@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   DESIGN SYSTEM - CSS VARIABLES
   ========================================================================== */
:root {
    /* Color Palette */
    --color-navy-dark: #0A1424;     /* Deep dark navy for footer and hero background overlays */
    --color-navy: #0F1E36;          /* Navy as INK: headings, nav links, emphasis text (60%) */
    --surface-navy: #0F1E36;        /* Navy as SURFACE: hero/footer/panel backgrounds. Stays
                                       dark in dark mode while --color-navy flips to light ink. */
    --surface-navy-dark: #0A1424;
    --color-orange: #FF6B35;        /* Primary accent orange for CTAs and highlights (10%) */
    --color-orange-hover: #E0531F;  /* Hover state for primary accent */
    --color-neutral-bg: #FBFAF7;    /* Warm neutral for main website body background (30%) */
    --color-card-bg: #FFFFFF;       /* Clean white for panels, cards, and modal components */
    --color-light-gray: #F4F6F9;    /* Secondary light background for alternating sections */
    --color-border: #E2E8F0;        /* Subtle divider borders */
    --tint-navy-soft: rgba(15,30,54,0.04);   /* subtle navy wash for notice panels */
    --tint-navy-border: rgba(15,30,54,0.08); /* matching hairline border */
    
    /* Text Colors */
    --text-primary: #1C2025;        /* Deep charcoal for body copy (ensures optimal readability) */
    --text-secondary: #4A5568;      /* Muted gray for subtitles and labels */
    --text-light: #FFFFFF;          /* High contrast light text */
    --text-orange: #FF6B35;         /* Orange text highlights */

    /* Typography */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Shadow Systems (Premium depth) */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.02);
    --shadow-md: 0 4px 6px -1px rgba(15, 30, 54, 0.08), 0 2px 4px -1px rgba(15, 30, 54, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(15, 30, 54, 0.1), 0 4px 6px -2px rgba(15, 30, 54, 0.05);
    --shadow-premium: 0 25px 50px -12px rgba(15, 30, 54, 0.15), 0 15px 30px -15px rgba(255, 107, 53, 0.04);

    /* Border Radius (Concentric Nesting standard) */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 8px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.22, 1, 0.36, 1);

    /* Layout constants */
    --header-height: 70px; /* Shrunk sticky header height; consumed by pinned sections */
}

/* Dark theme — activated by the anti-FOUC head snippet (data-theme) before
   first paint. Re-declares the palette; component-level fixes for hardcoded
   colors live in the DARK MODE OVERRIDES block at the end of this file. */
html[data-theme="dark"] {
    --color-navy-dark: #060D1A;
    --color-navy: #DFE6F2;          /* navy-as-ink flips to light for readability */
    --surface-navy: #101C30;        /* navy surfaces stay dark, distinct from page bg */
    --surface-navy-dark: #060D1A;
    --color-orange: #FF7A47;        /* lifted for AA contrast on dark bg */
    --color-orange-hover: #FF6B35;
    --color-neutral-bg: #0B1526;
    --color-card-bg: #142238;
    --color-light-gray: #0F1B2E;
    --color-border: #26364F;
    --tint-navy-soft: rgba(255,255,255,0.05);
    --tint-navy-border: rgba(255,255,255,0.1);

    --text-primary: #E8ECF3;
    --text-secondary: #A3B0C2;
    --text-light: #FFFFFF;
    --text-orange: #FF7A47;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.45), 0 2px 4px -1px rgba(0,0,0,0.35);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -2px rgba(0,0,0,0.4);
    --shadow-premium: 0 25px 50px -12px rgba(0,0,0,0.6), 0 15px 30px -15px rgba(255,107,53,0.08);

    color-scheme: dark;
}

/* ==========================================================================
   RESET & BASE STYLES (typography-audit / ui-audit compliance)
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    text-size-adjust: 100%;
}

/* Native smooth scrolling is the fallback; Lenis adds the .lenis class to
   <html> when active and takes over scrolling entirely. */
html:not(.lenis) {
    scroll-behavior: smooth;
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--color-neutral-bg);
    overflow-x: hidden;
    
    /* Font Smoothing Audit compliance */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-navy);
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance; /* Prevent layout orphans and widows */
}

/* Heading Tracking Audits */
h1, h2 {
    letter-spacing: 0;
}

h3, h4 {
    letter-spacing: 0;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

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

/* Accessibility Focus-Visible Outline replacement */
button:focus, a:focus, input:focus, select:focus, textarea:focus, [tabindex="0"]:focus {
    outline: none;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex="0"]:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   MOTION: ANIMATIONS & KEYFRAMES (ui-animation compliance)
   ========================================================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    15%, 45%, 75% { transform: translateX(-6px); }
    30%, 60%, 90% { transform: translateX(6px); }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(255, 107, 53, 0); }
}

/* Class helper targets for initial load animations */
.animate-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
}

.animate-scale-up {
    animation: scaleUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
}

.animate-delay-1 { animation-delay: 150ms; }
.animate-delay-2 { animation-delay: 300ms; }
.animate-delay-3 { animation-delay: 450ms; }
.animate-delay-4 { animation-delay: 600ms; }

/* Viewport Scroll reveals */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

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

.shake {
    animation: errorShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ==========================================================================
   LAYOUT CONTAINERS & UTILITIES
   ========================================================================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: 90px 0;
}

.section-alt {
    background-color: var(--color-light-gray);
    padding: 90px 0;
}

.text-center { text-align: center; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }
.mb-5 { margin-bottom: 48px; }

/* Grid Utilities */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

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

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

@media (max-width: 992px) {
    .grid-4, .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .grid-4, .grid-3, .grid-2 {
        grid-template-columns: 1fr;
    }
    .section {
        padding: 60px 0;
    }
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
.site-header {
    /* Near-opaque base so the header reads clean WITHOUT a backdrop blur.
       A backdrop-filter on a sticky bar re-samples and re-blurs everything
       scrolling behind it every frame — the main source of site-wide scroll
       jank, worst on mobile GPUs. The frosted look is re-applied only for
       mouse-driven desktops below, where the GPU budget can absorb it. */
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

@media (hover: hover) and (pointer: fine) {
    .site-header {
        background-color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

.site-header.shrink {
    background-color: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow-md);
}

.site-header.shrink .header-container {
    height: 70px;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 85px;
    transition: var(--transition-normal);
    gap: 18px;
}

.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.logo-text {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: 0;
    color: var(--color-navy);
    white-space: nowrap;
}

.logo-text span {
    color: var(--color-orange);
}

.logo-slogan {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0;
    margin-top: -3px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Brand mark (provisional Roly logo — swap assets/brand/* for the client's final art) */
.logo-mark {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.brand-logo-img {
    height: 42px;
    width: auto;
    object-fit: contain;
    display: block;
}

.footer-mark {
    display: inline-block;
    margin-bottom: 14px;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 16px;
    list-style: none;
    flex-shrink: 1;
}

.nav-link {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-navy);
    padding: 8px 4px;
    position: relative;
    white-space: nowrap;
}

/* 6-item nav (service pages grouped under the Services dropdown) */
@media (min-width: 1025px) {
    .nav-menu {
        gap: 12px;
    }
    .nav-link {
        font-size: 0.86rem;
    }
    .nav-menu .btn-sm {
        padding: 8px 16px;
        font-size: 0.82rem;
        white-space: nowrap;
    }
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-orange);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-normal);
}

.nav-link:hover::after, .nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-link:hover {
    color: var(--color-orange);
}

/* ---- Services dropdown ---- */
.nav-has-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav-dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-navy);
    padding: 6px 2px;
    display: inline-flex;
    align-items: center;
}

.nav-dropdown-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform var(--transition-fast);
}

.nav-dropdown-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.nav-submenu {
    list-style: none;
}

@media (min-width: 1025px) {
    .nav-submenu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 244px;
        background-color: var(--color-card-bg);
        box-shadow: var(--shadow-lg);
        border-radius: var(--radius-md);
        border-top: 3px solid var(--color-orange);
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
        z-index: 1200;
    }

    .nav-has-dropdown:hover .nav-submenu,
    .nav-has-dropdown:focus-within .nav-submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-has-dropdown:hover .nav-dropdown-toggle svg {
        transform: rotate(180deg);
    }

    .nav-submenu .nav-link {
        display: block;
        padding: 9px 12px;
        border-radius: var(--radius-sm);
        white-space: nowrap;
        font-size: 0.84rem;
    }

    .nav-submenu .nav-link::after {
        display: none; /* no underline sweep inside the dropdown card */
    }

    .nav-submenu .nav-link:hover,
    .nav-submenu .nav-link.active {
        background-color: var(--color-light-gray);
        color: var(--color-orange);
    }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.phone-link {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-navy);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.phone-link:hover {
    color: var(--color-orange);
}

/* ---- Header toggles: language (EN/ES) + light/dark theme ---- */
.header-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1;
    padding: 6px 12px;
    min-height: 34px;
    cursor: pointer;
    transition: var(--transition-fast);
    touch-action: manipulation;
    white-space: nowrap;
}

.header-toggle svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.header-toggle:hover {
    border-color: var(--color-orange);
    color: var(--color-orange);
}

.lang-toggle[aria-pressed="true"] {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
    color: var(--text-light);
}

.lang-toggle[aria-pressed="true"]:hover {
    background-color: var(--color-orange-hover);
    color: var(--text-light);
}

.theme-toggle {
    width: 34px;
    padding: 6px;
}

.theme-toggle .icon-moon {
    display: none;
}

html[data-theme="dark"] .theme-toggle .icon-moon {
    display: block;
}

html[data-theme="dark"] .theme-toggle .icon-sun {
    display: none;
}

@media (max-width: 380px) {
    /* Very narrow screens: label-only language pill */
    .lang-toggle svg {
        display: none;
    }
}

.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 2.5px;
    background-color: var(--color-navy);
    margin: 5px 0;
    transition: var(--transition-fast);
}

@media (max-width: 1024px) {
    .nav-menu {
        display: none; 
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: #FFFFFF;
        flex-direction: column;
        padding: 30px 24px;
        gap: 20px;
        box-shadow: var(--shadow-lg);
        border-bottom: 3px solid var(--color-orange);
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    .hamburger {
        display: block;
    }
    
    .header-actions .phone-link {
        display: none;
    }

    /* Keep the language/theme toggles visible next to the hamburger; the
       hamburger stays rightmost via order, toggles pack against it. */
    .header-actions {
        gap: 10px;
        margin-left: auto;
    }

    .hamburger {
        order: 10;
    }

    /* Services dropdown: inline accordion inside the mobile menu */
    .nav-has-dropdown {
        flex-wrap: wrap;
        width: 100%;
        gap: 0;
    }

    .nav-dropdown-toggle {
        margin-left: 8px;
        padding: 8px;
    }

    .nav-submenu {
        flex-basis: 100%;
        width: 100%;
        display: none;
        flex-direction: column;
        gap: 18px;
        padding: 18px 0 6px 16px;
        margin-top: 14px;
        border-left: 2px solid var(--color-orange);
    }

    .nav-has-dropdown.open .nav-submenu {
        display: flex;
    }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 14px 28px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, box-shadow 0.25s ease;
    border: 2px solid transparent;
    text-align: center;
    gap: 8px;
    min-height: 44px;
    touch-action: manipulation;
}

.btn-primary {
    background-color: var(--color-orange);
    color: var(--text-light);
}

.btn-primary:hover {
    background-color: var(--color-orange-hover);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
    transform: translateY(-2px);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background-color: var(--surface-navy);
    color: var(--text-light);
}

.btn-secondary:hover {
    background-color: var(--surface-navy-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary:active {
    transform: translateY(0);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--color-navy);
    color: var(--color-navy);
}

.btn-outline:hover {
    background-color: var(--surface-navy);
    color: var(--text-light);
    transform: translateY(-2px);
}

.btn-outline:active {
    transform: translateY(0);
}

.btn-sm {
    padding: 9px 14px;
    font-size: 0.84rem;
}

.btn-lg {
    padding: 18px 40px;
    font-size: 1.05rem;
    border-radius: var(--radius-lg);
}

/* ==========================================================================
   HERO SECTIONS
   ========================================================================== */
.hero {
    background-color: var(--surface-navy);
    color: var(--text-light);
    position: relative;
    padding: 58px 0 48px;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.16) 0%, rgba(15, 30, 54, 0) 48%);
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
    align-items: center;
}

.hero-content {
    max-width: 650px;
}

.hero-tagline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 107, 53, 0.15);
    color: var(--color-orange);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 24px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero-title {
    font-size: 2.65rem;
    font-weight: 800;
    color: var(--text-light);
    line-height: 1.15;
    margin-bottom: 20px;
}

.hero-title span {
    color: var(--color-orange);
}

.hero-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 26px;
    max-width: 580px;
}

.hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
}

.hero-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 22px;
}

.trust-badge-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
}

.trust-badge-icon {
    color: var(--color-orange);
    width: 20px;
    height: 20px;
}

/* Hero image visual polish */
.hero-image-pane {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image-pane div {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-premium);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Image outline for premium separation contrast */
.hero-image-pane img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    outline: 1px solid rgba(0,0,0,0.15);
    outline-offset: -1px;
}

/* Same-home, four-finishes hero loop — cross-fades through the 4 colorways */
.hero-color-loop {
    position: relative;
    width: 100%;
    height: 360px;
}
.hero-color-loop .hero-color-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: heroColorCycle 16s linear infinite;
}
.hero-color-loop .hero-color-frame:nth-child(1) { animation-delay: 0s; }
.hero-color-loop .hero-color-frame:nth-child(2) { animation-delay: 4s; }
.hero-color-loop .hero-color-frame:nth-child(3) { animation-delay: 8s; }
.hero-color-loop .hero-color-frame:nth-child(4) { animation-delay: 12s; }

.hero-color-chip {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 3;
    background: rgba(15, 30, 54, 0.85);
    backdrop-filter: blur(4px);
    color: #FFFFFF;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
}

/* 4 frames x 4s each within a 16s loop, with a short cross-fade overlap */
@keyframes heroColorCycle {
    0%   { opacity: 0; }
    3%   { opacity: 1; }
    22%  { opacity: 1; }
    25%  { opacity: 0; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-color-loop .hero-color-frame { animation: none; opacity: 0; }
    .hero-color-loop .hero-color-frame.is-active { opacity: 1; }
}

/* Standalone VSL Hero */
.vsl-hero {
    background-color: var(--surface-navy);
    color: var(--text-light);
    padding: 70px 0 90px;
    text-align: center;
}

.vsl-container {
    max-width: 900px;
    margin: 0 auto;
}

.vsl-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect */
    height: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-premium);
    margin: 36px 0;
    border: 4px solid rgba(255, 255, 255, 0.1);
}

.vsl-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 768px) {
    .animate-fade-in-up,
    .animate-scale-up {
        animation: none;
        opacity: 1;
    }
    .hero-title {
        font-size: 2rem;
        line-height: 1.12;
    }
    .hero {
        padding: 30px 0 42px;
    }
    .hero .container {
        gap: 22px;
    }
    .hero-image-pane {
        order: -1;
    }
    .hero-image-pane img {
        height: 168px;
    }
    .hero-color-loop {
        height: 168px;
    }
    .hero-tagline {
        font-size: 0.72rem;
        margin-bottom: 16px;
    }
    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 20px;
    }
    .hero-btns {
        gap: 10px;
        margin-bottom: 0;
    }
    .hero-btns .btn {
        width: 100%;
    }
    .hero-trust-badges {
        display: none;
    }
}

/* ==========================================================================
   TRUST & AUTHORITY BAR
   ========================================================================== */
.trust-bar {
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    padding: 24px 0;
    position: relative;
    z-index: 10;
}

.trust-bar-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.trust-bar-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.trust-bar-icon-box {
    background-color: rgba(255, 107, 53, 0.08);
    color: var(--color-orange);
    width: 46px;
    height: 46px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.trust-bar-item:hover .trust-bar-icon-box {
    transform: scale(1.1) translateY(-2px);
}

.trust-bar-text h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 1px;
}

.trust-bar-text p {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0;
}

@media (max-width: 768px) {
    .trust-bar-container {
        justify-content: flex-start;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   SERVICES & CARDS
   ========================================================================== */
.section-title-wrapper {
    max-width: 650px;
    margin: 0 auto 52px;
    text-align: center;
}

.section-label {
    color: var(--color-orange);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: block;
}

.section-title {
    font-size: 2.35rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.section-desc {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

/* Main Painting Cards (ui-animation compliance - transform/opacity animations only) */
.painting-card-main {
    background-color: var(--color-card-bg);
    border-radius: var(--radius-lg); /* Concentric border radius outer */
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
    border: 1px solid var(--color-border);
    position: relative;
}

.painting-card-main:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: var(--shadow-premium);
    border-color: var(--color-orange);
}

.card-img-wrapper {
    position: relative;
    height: 250px;
    overflow: hidden;
    /* Outline image separation pass */
    outline: 1px solid rgba(0,0,0,0.06);
    outline-offset: -1px;
}

.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.painting-card-main:hover .card-img-wrapper img {
    transform: scale(1.06);
}

.card-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background-color: var(--surface-navy);
    color: var(--text-light);
    padding: 6px 12px;
    border-radius: var(--radius-sm); /* Concentric inner */
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    z-index: 5;
}

.card-content {
    padding: 26px; /* Padding inside card determines concentric sizing */
}

.card-content h3 {
    font-size: 1.35rem;
    margin-bottom: 12px;
}

.card-content p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 22px;
}

.card-features-list {
    list-style: none;
    margin-bottom: 24px;
    border-top: 1px solid var(--color-border);
    padding-top: 18px;
}

.card-features-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.card-features-list li svg {
    color: var(--color-orange);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Secondary updates cards (Clean grids) */
.service-card-secondary {
    background-color: var(--color-card-bg);
    border-radius: var(--radius-md);
    padding: 26px;
    border: 1px solid var(--color-border);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.service-card-secondary:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-orange);
    transform: translateY(-4px) scale(1.02);
}

.service-card-icon-box {
    color: var(--color-orange);
    margin-bottom: 18px;
    transition: transform var(--transition-fast);
}

.service-card-secondary:hover .service-card-icon-box {
    transform: scale(1.1) translateY(-2px);
}

.service-card-secondary h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.service-card-secondary p {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.service-hero-note {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 28px;
    align-items: stretch;
    margin-top: 18px;
}

.service-priority-panel {
    background-color: var(--surface-navy);
    color: var(--text-light);
    border-radius: var(--radius-lg);
    padding: 30px;
    border: 1px solid rgba(255,255,255,0.1);
}

.service-priority-panel h3 {
    color: var(--text-light);
    font-size: 1.45rem;
    margin-bottom: 12px;
}

.service-priority-panel p {
    color: rgba(255,255,255,0.78);
}

.service-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.service-pill {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-light);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 0.82rem;
    font-weight: 700;
}

.service-route-card {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.service-route-card h3 {
    font-size: 1.28rem;
    margin-bottom: 10px;
}

.service-route-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 18px;
}

.service-route-list {
    list-style: none;
    display: grid;
    gap: 9px;
    margin-bottom: 22px;
}

.service-route-list li {
    display: flex;
    gap: 10px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.service-route-list li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--color-orange);
    flex: 0 0 auto;
    margin-top: 9px;
}

.service-route-card .btn {
    margin-top: auto;
}

@media (max-width: 768px) {
    .service-hero-note {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   AVATAR PATHWAYS (AUDIENCE SEGMENTATION)
   ========================================================================== */
.avatar-pathway {
    background-color: var(--surface-navy);
    color: var(--text-light);
}

.avatar-pathway .section-title {
    color: var(--text-light);
}

.avatar-pathway .section-desc {
    color: rgba(255,255,255,0.7);
}

.avatar-card {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 34px;
    transition: transform var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.avatar-card:hover {
    background-color: rgba(255, 255, 255, 0.07);
    border-color: var(--color-orange);
    transform: translateY(-5px);
}

.avatar-header h3 {
    font-size: 1.45rem;
    color: var(--text-light);
    margin-bottom: 12px;
}

.avatar-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-orange);
    letter-spacing: 0;
    margin-bottom: 16px;
}

.avatar-card p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin-bottom: 26px;
}

.avatar-link {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-orange);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    transition: gap var(--transition-fast);
}

.avatar-card:hover .avatar-link {
    color: var(--text-light);
    gap: 12px;
}

/* ==========================================================================
   TESTIMONIALS & REVIEWS
   ========================================================================== */
.review-card {
    background-color: var(--color-card-bg);
    border-radius: var(--radius-lg);
    padding: 34px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-normal), border-color var(--transition-normal);
}

.review-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-orange);
}

.review-stars {
    color: #FBBF24; /* Star Gold */
    margin-bottom: 18px;
    display: flex;
    gap: 4px;
}

.review-text {
    font-size: 0.95rem;
    color: var(--text-primary);
    font-style: italic;
    margin-bottom: 26px;
    flex-grow: 1;
    position: relative;
}

.review-text::before {
    content: '"';
    font-size: 3.5rem;
    font-family: Georgia, serif;
    color: rgba(15, 30, 54, 0.07);
    position: absolute;
    top: -24px;
    left: -12px;
    line-height: 1;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 14px;
    border-top: 1px solid var(--color-border);
    padding-top: 18px;
}

.author-initial {
    width: 44px;
    height: 44px;
    background-color: rgba(15, 30, 54, 0.08);
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.author-info h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.author-info p {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0;
}

/* ==========================================================================
   PROGRESSIVE MULTI-STEP CRM FORM (GHL CONTAINER)
   ========================================================================== */
.form-section {
    background-color: var(--color-light-gray);
}

.form-outer-wrapper {
    max-width: 650px;
    margin: 0 auto;
    background-color: var(--color-card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-premium);
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: transform 0.2s ease;
}

.form-header-banner {
    background-color: var(--surface-navy);
    color: var(--text-light);
    padding: 32px;
    text-align: center;
}

.form-header-banner h3 {
    color: var(--text-light);
    font-size: 1.45rem;
    margin-bottom: 8px;
}

.form-header-banner p {
    color: rgba(255,255,255,0.75);
    font-size: 0.92rem;
}

/* Steps Progress Tracker */
.steps-tracker {
    display: flex;
    justify-content: space-between;
    padding: 24px 44px;
    background-color: var(--color-light-gray);
    border-bottom: 1px solid var(--color-border);
}

.step-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    position: relative;
}

.step-node:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    width: 100%;
    height: 2.5px;
    background-color: var(--color-border);
    z-index: 1;
    transition: background-color var(--transition-normal);
}

.step-node.completed:not(:last-child)::after {
    background-color: var(--color-orange);
}

.step-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: 2px solid var(--color-border);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    position: relative;
    z-index: 2;
    transition: border-color var(--transition-normal), background-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal);
}

.step-node.active .step-circle {
    border-color: var(--color-orange);
    background-color: var(--color-orange);
    color: #FFFFFF;
    box-shadow: 0 0 0 5px rgba(255, 107, 53, 0.2);
}

.step-node.completed .step-circle {
    border-color: var(--color-orange);
    background-color: var(--color-orange);
    color: #FFFFFF;
}

.step-node span {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0;
}

.step-node.active span {
    color: var(--color-navy);
}

/* Form Container and Slides (progressive transition-ready UI) */
.form-slides-container {
    padding: 44px;
}

.form-slide {
    display: none; 
    opacity: 0;
    transform: translateX(12px);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.form-slide.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

.form-slide.exit {
    display: block;
    opacity: 0;
    transform: translateX(-12px);
}

.form-slide-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 26px;
    color: var(--color-navy);
}

.form-slide-hint {
    margin-top: 18px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Inputs & Custom Checkboxes */
.form-group {
    margin-bottom: 22px;
}

.form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.form-control {
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-primary);
    background-color: var(--color-neutral-bg);
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
    border-color: var(--color-orange);
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.18);
}

.form-control[aria-invalid="true"] {
    border-color: var(--color-orange);
    background-color: rgba(255, 107, 53, 0.05);
}

.field-error,
.slide-error {
    margin-top: 8px;
    color: var(--color-orange);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
}

.slide-error {
    margin: -12px 0 20px;
}

.estimate-scope-panel {
    margin: 2px 0 24px;
    padding: 22px;
    border: 1px solid rgba(15, 30, 54, 0.12);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #FFFFFF 0%, var(--color-neutral-bg) 100%);
    box-shadow: var(--shadow-sm);
}

.estimate-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 10px;
}

.estimate-panel-header .section-label {
    margin-bottom: 6px;
    color: var(--color-orange);
}

.estimate-panel-header h5 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--color-navy);
}

.estimate-pill {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: var(--radius-full);
    background: rgba(255, 107, 53, 0.1);
    color: var(--color-orange);
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.estimate-panel-copy {
    margin: 0 0 18px;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.55;
}

.scope-fields[hidden] {
    display: none;
}

.estimate-check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.estimate-check-row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
}

.estimate-check-row input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-orange);
}

.estimate-addons {
    margin-top: 4px;
}

.estimate-range-preview,
.success-estimate-range {
    display: grid;
    gap: 5px;
    margin-top: 16px;
    padding: 16px;
    border-radius: var(--radius-md);
    background: var(--surface-navy);
    color: #FFFFFF;
    text-align: left;
}

.estimate-range-preview span,
.success-estimate-range span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.estimate-range-preview strong,
.success-estimate-range strong {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: #FFFFFF;
}

.estimate-range-preview small,
.success-estimate-range p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8rem;
    line-height: 1.45;
    margin: 0;
}

.photo-followup-note {
    min-height: 72px;
    padding: 18px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(15, 30, 54, 0.04);
    color: var(--text-secondary);
    font-size: 0.84rem;
    line-height: 1.5;
}

/* Visual Options Grids (Step 1 & 2) */
.options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.option-box {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md); /* Concentric radiuses outer */
    padding: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    background-color: #FFFFFF;
    transition: transform var(--transition-normal), border-color var(--transition-normal), background-color var(--transition-normal), box-shadow var(--transition-normal);
}

.option-box:hover {
    border-color: var(--color-orange);
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.option-box.selected {
    border-color: var(--color-orange);
    background-color: rgba(255, 107, 53, 0.05);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.08);
}

.option-icon {
    color: var(--color-orange);
    margin-bottom: 12px;
    width: 34px;
    height: 34px;
    transition: transform var(--transition-normal);
}

.option-box:hover .option-icon {
    transform: scale(1.1) translateY(-2px);
}

.option-box h4 {
    font-size: 0.98rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.option-box p {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

@media (max-width: 500px) {
    .options-grid {
        grid-template-columns: 1fr;
    }
}

/* Form Actions Button Bar */
.form-actions {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--color-border);
    padding: 24px 44px;
    background-color: var(--color-light-gray);
}

/* Photo upload wrapper */
.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}

.upload-file-label {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: 26px;
    text-align: center;
    background-color: var(--color-neutral-bg);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.upload-file-label:hover {
    border-color: var(--color-orange);
    background-color: #FFFFFF;
}

.upload-file-label svg {
    color: var(--color-orange);
    width: 32px;
    height: 32px;
}

.upload-file-label span {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Hidden elements */
.hidden-input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

/* Success Card */
.form-success-card {
    text-align: center;
    padding: 44px 24px;
    animation: scaleUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.success-icon-box {
    width: 68px;
    height: 68px;
    background-color: rgba(255, 107, 53, 0.1);
    color: var(--color-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 26px;
    animation: pulseGlow 2s infinite;
}

.success-icon-box svg {
    width: 34px;
    height: 34px;
}

.form-success-card h3 {
    font-size: 1.65rem;
    margin-bottom: 12px;
}

.form-success-card p {
    color: var(--text-secondary);
    margin-bottom: 26px;
}

/* ==========================================================================
   FOOTER SECTION
   ========================================================================== */
.site-footer {
    background-color: var(--surface-navy-dark);
    color: rgba(255, 255, 255, 0.8);
    padding: 70px 0 30px;
    font-size: 0.92rem;
    border-top: 4px solid var(--color-orange);
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 40px;
}

.footer-brand h3 {
    color: var(--text-light);
    font-size: 1.45rem;
    margin-bottom: 12px;
}

.footer-brand h3 span {
    color: var(--color-orange);
}

.footer-brand p {
    margin-bottom: 24px;
    max-width: 320px;
}

.footer-col h4 {
    color: var(--text-light);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 22px;
    text-transform: uppercase;
    letter-spacing: 0;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a:hover {
    color: var(--color-orange);
    padding-left: 6px;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.footer-contact-item svg {
    color: var(--color-orange);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.footer-social-links {
    display: flex;
    gap: 12px;
}

.social-icon-box {
    width: 38px;
    height: 38px;
    background-color: rgba(255,255,255,0.05);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-weight: 700;
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.social-icon-box:hover {
    background-color: var(--color-orange);
    transform: translateY(-3px);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-bottom p {
    font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   A2P 10DLC / TCPA — the carrier-registered legal links and the SMS program
   disclosure must be visible on every page without submitting anything.
   Links carry target="_top": rolyhomeservices.net embeds this site in an
   iframe, so they must break out of it to reach the registered URLs.
   -------------------------------------------------------------------------- */
.footer-legal-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.8rem;
    margin-bottom: 14px;
}

.footer-sms-disclosure {
    margin: 8px 0 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-sms-disclosure p {
    font-size: 0.72rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.55);
    max-width: 900px;
    margin: 0;
}

.footer-sms-disclosure strong {
    color: rgba(255,255,255,0.75);
}

.footer-sms-disclosure a,
.footer-legal-row a {
    color: var(--color-orange);
    text-decoration: underline;
}

.nf-legal {
    margin-top: 32px;
}

.nf-legal a {
    color: var(--text-secondary);
}

/* Express-consent checkboxes on the lead form. Unchecked by default and
   never required — consent is not a condition of purchase. */
.form-consent-optin {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.consent-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--text-secondary);
    cursor: pointer;
}

.consent-check input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--color-orange);
    cursor: pointer;
}

@media (max-width: 992px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width: 640px) {
    .footer-top {
        grid-template-columns: 1fr;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   PHASE 5: COLOR LAB, VIDEO REVIEWS & ABOUT SECTION STYLING
   ========================================================================== */

/* Color Lab Visualizer */
.color-chip-btn {
    background-color: #FFFFFF;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 10px 20px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-navy);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.color-chip-btn:hover {
    border-color: var(--color-orange);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.color-chip-btn:focus-visible {
    outline: 3px solid var(--color-orange);
    outline-offset: 2px;
}

.color-chip-btn.active {
    border-color: var(--color-orange);
    background-color: var(--surface-navy);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(15, 30, 54, 0.15);
}

.lab-image {
    opacity: 0;
    z-index: 1;
    transform: scale(1.0);
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.lab-image.active {
    opacity: 1;
    z-index: 2;
    transform: scale(1.04);
}

.lab-data-cards-grid {
    position: relative;
    /* JS sets an explicit height equal to the active card so the section stays
       compact for the static palettes (balanced with the 440px image pane) and
       only stretches for the taller interactive customizer. The transition
       animates that resize so the section grows/shrinks smoothly. */
    transition: height 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.lab-data-card {
    /* Inactive cards are pulled out of flow so they no longer inflate the
       container to the tallest (interactive) card's height. */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 360px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px) scale(0.98);
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s;
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-premium);
    padding: 24px;
}

.lab-data-card.active {
    /* The active card sits in flow and defines the container's natural height. */
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    z-index: 5;
}

/* Color Lab Gauge Animations & Dials */
.gauge-bar {
    width: 0% !important; /* Starts at 0% for JS animation trigger */
    transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.lab-data-card.active .gauge-bar {
    /* The active class will trigger width animation defined in the inline style attribute */
    width: var(--target-width, 100%) !important;
}

/* --------------------------------------------------------------------------
   DISTINCTIVE TOUCH — Color Lab / Gallery only. Restrained, brand colors
   only, every layer under 0.15 alpha, so the client's white reference holds.
   Goal: give the signature "paint your home" zone subconscious depth instead
   of flat white, and mark the live palette card without adding chrome.
   -------------------------------------------------------------------------- */
#color-science-lab,
#paint-your-home {
    background-image:
        radial-gradient(circle at 14% -10%, rgba(255, 107, 53, 0.05), transparent 42%),
        radial-gradient(circle at 104% 112%, rgba(15, 30, 54, 0.045), transparent 46%);
}

/* Live-state hairline on the active palette card. */
.lab-data-card.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(90deg, transparent, var(--color-orange), transparent);
    pointer-events: none;
}

.lrv-pointer, .lrv-pointer-secondary {
    transition: left 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Video Reviews Grid styling */
.play-btn-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 107, 53, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #FFFFFF;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
    z-index: 5;
}

.video-thumbnail-wrapper:hover .play-btn-overlay {
    transform: translate(-50%, -50%) scale(1.15);
    background-color: var(--color-orange-hover);
}

.play-arrow {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #FFFFFF;
    margin-left: 4px; /* Align arrow center visually */
}

/* Custom details list for Pre-Sale */
.pre-sale-list li {
    line-height: 1.5;
}

/* About image pane responsiveness */
@media (max-width: 992px) {
    .about-image-pane img {
        height: 320px;
    }
}

/* ==========================================================================
   INTERACTIVE SVG COLORIZER & GSAP SCROLLYTELLING STYLES
   ========================================================================== */

:root {
    --color-house-siding: #1B355A;   /* Default Navy */
    --color-house-trim: #FAF9F6;     /* Default Cream/Alabaster */
    --color-house-door: #FF6B35;     /* Default Orange Accent */
    --color-house-roof: #3B3B3B;     /* Default Charcoal Shingle */
    --color-house-shutters: #303030; /* Default Tricorn Black */
    --color-house-garage: #FAF9F6;   /* Default Alabaster */
}

/* Custom Interactive Lab layout */
.interactive-lab-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.interactive-control-box {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--color-border);
}

.control-group-title {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--color-navy);
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 0;
}

.swatch-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.swatch-btn {
    border: 2px solid var(--color-border);
    background: #FFFFFF;
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.swatch-btn:hover {
    border-color: var(--color-orange);
    transform: translateY(-1px);
}

.swatch-btn.active {
    border-color: var(--color-orange);
    background-color: var(--surface-navy);
    color: #FFFFFF;
}

.swatch-color-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
}

/* Designer palette presets (one click repaints every zone) */
.palette-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.preset-btn {
    border: 2px solid var(--color-border);
    background: #FFFFFF;
    border-radius: var(--radius-full);
    padding: 6px 14px 6px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.preset-btn:hover {
    border-color: var(--color-orange);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.preset-btn.active {
    border-color: var(--color-orange);
    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.18);
}

.preset-dots {
    display: inline-flex;
}

.preset-dots span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

.preset-dots span + span {
    margin-left: -5px;
}

/* "Your Color Plan" live summary panel + conversion buttons */
.color-plan {
    margin-top: 18px;
    padding: 16px;
    background: var(--color-light-gray);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.color-plan-title {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--color-navy);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
}

.color-plan-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
    margin-bottom: 12px;
}

.color-plan-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    line-height: 1.25;
    min-width: 0;
}

.color-plan-row .plan-dot {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0,0,0,0.12);
}

.color-plan-row .plan-zone {
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.62rem;
    display: block;
}

.color-plan-row .plan-name {
    color: var(--color-navy);
    font-weight: 700;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.color-plan-verdict {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-top: 1px dashed var(--color-border);
    padding-top: 10px;
    margin-bottom: 14px;
}

.color-plan-verdict strong {
    color: var(--color-orange);
}

.color-plan-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.color-plan-actions .btn {
    flex: 1 1 auto;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .color-plan-rows {
        grid-template-columns: 1fr;
    }
}

/* 3D house stage (canvas injected by house-3d.js over the SVG fallback) */
[data-house-3d] {
    position: relative;
}

.house-3d-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
    touch-action: pan-y pinch-zoom;
}

.house-3d-canvas:active {
    cursor: grabbing;
}

.house-mode-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(15, 30, 54, 0.2);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(6px);
    color: var(--color-navy);
    border-radius: var(--radius-full);
    padding: 6px 12px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.house-mode-toggle:hover {
    background: #FFFFFF;
}

.house-mode-toggle.is-dusk {
    background: rgba(15, 30, 54, 0.85);
    border-color: rgba(255, 255, 255, 0.25);
    color: #FFD166;
}

.house-3d-hint {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 3;
    background: rgba(15, 30, 54, 0.72);
    color: #FFFFFF;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    pointer-events: none;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.4s ease;
}

[data-house-3d].is-touched .house-3d-hint {
    opacity: 0;
}

/* A/B palette comparator — save buttons row + glassmorphic viewer overlay */
.palette-compare {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px dashed var(--color-border);
    padding-top: 12px;
    margin-bottom: 14px;
}

.compare-label {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.palette-compare .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.palette-compare .preset-dots span {
    width: 12px;
    height: 12px;
}

.palette-compare [data-save-slot].is-flashing {
    border-color: var(--color-orange);
    color: var(--color-orange);
}

.compare-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 8px;
    background: rgba(15, 30, 54, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    backdrop-filter: blur(8px);
}

.compare-seg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.compare-seg:hover {
    background: rgba(255, 255, 255, 0.2);
}

.compare-seg.is-viewing {
    border-color: var(--color-orange);
    background: rgba(255, 107, 53, 0.18);
}

.compare-thumb {
    width: 72px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
}

.compare-close {
    align-self: flex-start;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}

.compare-close:hover {
    background: rgba(255, 255, 255, 0.34);
}

/* Scrollytelling Section Styling */
.scroll-story-section {
    position: relative;
    background-color: var(--surface-navy);
    color: #FFFFFF;
    overflow: visible; /* Need overflow visible for sticky to work */
}

.scroll-story-section .sticky-container {
    position: -webkit-sticky;
    position: sticky;
    top: var(--header-height, 70px);
    height: calc(100vh - var(--header-height, 70px));
    display: flex;
    align-items: stretch;
    width: 100%;
    overflow: hidden;
}

.story-visual-pane {
    flex: 1.2;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.visual-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    transform: scale(1.02);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    z-index: 1;
    overflow: hidden;
}

.visual-layer.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

/* Background image lives on a child so its parallax transform stays
   independent of the parent layer's clip-path wipe. */
.layer-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.layer-badge {
    align-self: flex-start;
    position: relative;
    z-index: 1;
    background-color: rgba(15, 30, 54, 0.85);
    color: #FFFFFF;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: 12px;
}

.layer-info-tag {
    position: relative;
    z-index: 1;
    background: rgba(15, 30, 54, 0.75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 16px 20px;
    border-radius: var(--radius-md);
    max-width: 500px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #FFFFFF;
}

.story-text-pane {
    flex: 0.8;
    background: var(--surface-navy);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
    position: relative;
    border-left: 1px solid rgba(255,255,255,0.1);
    z-index: 10;
}

.story-step {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.story-step.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.step-num {
    font-size: 3rem;
    font-family: var(--font-heading);
    font-weight: 900;
    color: var(--color-orange);
    line-height: 1;
    display: block;
    margin-bottom: 10px;
    opacity: 0.8;
}

.story-step h3 {
    font-size: 1.8rem;
    font-family: var(--font-heading);
    color: #FFFFFF;
    margin-bottom: 12px;
    font-weight: 800;
}

.story-step p {
    font-size: 1rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
}

/* --- Progress rail (desktop pinned timeline) --- */
.story-rail {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    z-index: 20;
    pointer-events: none;
}

.story-rail-track {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 240px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2px;
    overflow: hidden;
}

.story-rail-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-orange);
    transform: scaleY(0);
    transform-origin: top center;
}

.story-rail-node {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: var(--surface-navy);
    cursor: pointer;
    pointer-events: auto;
    padding: 0;
    z-index: 1;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.story-rail-node.is-active {
    background: var(--color-orange);
    border-color: var(--color-orange);
    box-shadow: 0 0 0 5px rgba(255, 107, 53, 0.2);
    transform: scale(1.15);
}

.story-rail-node:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 4px;
}

/* --- Oversized step counter --- */
.story-step-counter {
    position: absolute;
    top: 24px;
    right: 36px;
    height: 8.5rem;
    overflow: hidden;
    z-index: 6;
    pointer-events: none;
}

.counter-digit {
    display: block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 9rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.28);
}

/* --- Wet-edge wipe bar --- */
.story-wipe-bar {
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: 0;
    width: 14%;
    transform: skewX(-8deg) translateX(-150%);
    background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.35), rgba(255, 255, 255, 0.5));
    z-index: 15;
    opacity: 0;
    pointer-events: none;
}

/* --- Finale transformation CTA --- */
.story-finale-cta {
    position: absolute;
    inset: 0;
    z-index: 18;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding: 40px;
    background: rgba(10, 20, 36, 0.55);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
}

.finale-kicker {
    color: var(--color-orange);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
}

.story-finale-cta h3 {
    color: #FFFFFF;
    font-size: 1.9rem;
    max-width: 18ch;
    margin-bottom: 6px;
}

/* --- GSAP-controlled desktop mode (pin + scrub). Neutralizes the sticky
   fallback and the CSS transitions that would fight the scrub. --- */
[data-gsap].scroll-story-section .sticky-container {
    position: relative;
    top: 0;
    height: 100vh;
    padding-top: var(--header-height, 70px);
}

[data-gsap] .visual-layer,
[data-gsap] .story-step {
    transition: none;
}

[data-gsap] .story-text-pane {
    display: grid;
    align-content: center;
}

[data-gsap] .story-step {
    grid-area: 1 / 1;
    display: block;
    opacity: 0;
}

/* Mobile carousel dots (hidden on desktop) */
.story-dots {
    display: none;
}

/* Responsive Overrides: mobile horizontal carousel */
@media (max-width: 992px) {
    .scroll-story-section .sticky-container {
        flex-direction: column;
        height: auto;
        position: relative;
        top: 0;
        padding-top: 0;
    }

    .story-rail {
        display: none;
    }

    .story-visual-pane {
        height: 320px;
        flex: none;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .visual-layer {
        position: relative;
        flex: 0 0 100%;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        scroll-snap-align: center;
    }

    .story-step-counter,
    .story-wipe-bar,
    .story-finale-cta {
        display: none;
    }

    .story-text-pane {
        padding: 40px 24px;
        flex: none;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .story-step {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        margin-bottom: 40px;
    }

    .story-step:last-child {
        margin-bottom: 0;
    }

    .story-dots {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: 18px 0 4px;
    }

    .story-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .story-dot.is-active {
        background: var(--color-orange);
        transform: scale(1.3);
    }
}

/* Accessibility reduced motion fallback */
@media (prefers-reduced-motion: reduce) {
    .scroll-story-section .sticky-container {
        flex-direction: column;
        height: auto;
        position: relative;
        top: 0;
        padding-top: 0;
    }
    .story-visual-pane {
        display: none;
    }
    .story-rail,
    .story-dots {
        display: none;
    }
    .story-text-pane {
        padding: 40px 20px;
    }
    .story-step {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        margin-bottom: 30px;
    }
}

/* ==========================================================================
   LEGAL PAGES (privacy / terms)
   ========================================================================== */
.legal-container {
    max-width: 820px;
}

.legal-body {
    margin-top: 8px;
}

.legal-body h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-navy);
    margin-top: 32px;
    margin-bottom: 10px;
}

.legal-body p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 14px;
    max-width: 70ch;
}

.legal-back {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   PHASE 4 — PREMIUM MICRO-INTERACTIONS
   ========================================================================== */

/* Title reveal companion: a section whose heading carries the SplitText motion
   only fades in (the directional travel comes from the words themselves). */
.reveal-on-scroll.reveal-fade-only {
    transform: none;
}

/* --- Buttons: shine sweep on primary CTAs --- */
.btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
    transform: translateX(-130%);
    pointer-events: none;
    z-index: 1;
}

.btn-primary:hover::after {
    transform: translateX(130%);
    transition: transform 0.65s ease;
}

/* --- Card spotlight: orange glow tracking the pointer --- */
.painting-card-main,
.service-card-secondary,
.avatar-card {
    position: relative;
}

.painting-card-main::before,
.service-card-secondary::before,
.avatar-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(240px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255, 107, 53, 0.10), transparent 70%);
}

/* Lighter glow over the dark navy avatar cards */
.avatar-card::before {
    background: radial-gradient(240px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255, 255, 255, 0.08), transparent 70%);
}

.painting-card-main:hover::before,
.service-card-secondary:hover::before,
.avatar-card:hover::before {
    opacity: 1;
}

/* --- Form step tracker: animated connector fill + active circle pop --- */
.step-node:not(:last-child)::after {
    background-image: linear-gradient(var(--color-orange), var(--color-orange));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    transition: background-size 0.5s ease 0.1s;
}

.step-node.completed:not(:last-child)::after {
    background-size: 100% 100%;
}

@keyframes stepCirclePop {
    0%   { transform: scale(1); }
    55%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.step-node.active .step-circle {
    animation: stepCirclePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Success card: hand-drawn checkmark --- */
@keyframes drawCheck {
    to { stroke-dashoffset: 0; }
}

.form-success-card .success-icon-box svg path {
    stroke-dasharray: 26;
    stroke-dashoffset: 26;
    animation: drawCheck 0.45s ease-out 0.25s forwards;
}

/* ==========================================================================
   PHASE 4 — REDUCED MOTION MASTER OVERRIDES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-in-up,
    .animate-scale-up {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .btn-primary::after,
    .painting-card-main::before,
    .service-card-secondary::before,
    .avatar-card::before {
        display: none;
    }
    .step-node.active .step-circle {
        animation: none;
    }
    .form-success-card .success-icon-box svg path {
        animation: none;
        stroke-dashoffset: 0;
    }
    html:not(.lenis) {
        scroll-behavior: auto;
    }
}

/* ==========================================================================
   GALLERY PAGE — filterable project grid
   ========================================================================== */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 36px;
}

.gallery-filter {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 10px 20px;
    min-height: 44px; /* comfortable touch target */
    cursor: pointer;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.gallery-filter:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

.gallery-filter:hover {
    border-color: var(--color-orange);
    transform: translateY(-1px);
}

.gallery-filter.is-active {
    color: #FFFFFF;
    background: var(--color-orange);
    border-color: var(--color-orange);
}

.gallery-card.is-hidden {
    display: none;
}

.gallery-card-loc {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-orange);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.gallery-card .card-content {
    padding: 24px;
}

.gallery-card .card-content h3 {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.gallery-card .card-content p:last-child {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* ==========================================================================
   SHARED PANEL COMPONENTS — extracted from repeated inline styles (R5)
   ========================================================================== */
/* White value/info card used in About, Contact, and the index About section */
.about-value-item {
    background: #FFFFFF;
    padding: 16px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-light-gray);
}

.about-value-item h4 {
    color: var(--color-navy);
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 0.95rem;
}

.about-value-item p {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Navy feature panel (e.g. the pre-sale callout on index) */
.panel-navy {
    background-color: var(--surface-navy);
    color: #FFFFFF;
    padding: 40px;
    border-radius: var(--radius-lg);
    margin-top: 48px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-lg);
}

.panel-navy-inset {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 24px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Glassmorphic dashboard pinned over the color lab viewer */
.viewer-dashboard-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(15, 30, 54, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    backdrop-filter: blur(8px);
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

/* ==========================================================================
   IMAGE CROP UTILITIES — the same 1024x1024 source photo is reused in several
   slots; distinct object-positions make each usage read as a different shot
   until the client provides real per-project photography.
   ========================================================================== */
.crop-top    { object-position: center 18% !important; }
.crop-bottom { object-position: center 80% !important; }
.crop-left   { object-position: 15% center !important; }
.crop-right  { object-position: 85% center !important; }

/* ==========================================================================
   GALLERY CARD CTA OVERLAY — makes project cards actionable
   ========================================================================== */
.gallery-card .card-img-wrapper {
    cursor: pointer;
}

.gallery-card-cta {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    padding: 14px;
    background: linear-gradient(180deg, transparent 50%, rgba(15, 30, 54, 0.88) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-card-cta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
}

.gallery-card-cta svg {
    width: 15px;
    height: 15px;
    color: var(--color-orange);
    flex: 0 0 auto;
}

.gallery-card:hover .gallery-card-cta,
.gallery-card-cta:focus-visible {
    opacity: 1;
}

/* Touch devices get the CTA persistently (no hover state to discover) */
@media (hover: none) {
    .gallery-card-cta {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-card-cta {
        transition: none;
    }
}

/* ==========================================================================
   MOBILE CALL PILL — persistent click-to-call for local-service conversion.
   The header phone link is hidden under 1024px; this floating pill keeps a
   one-tap call action visible at every scroll position on touch devices.
   ========================================================================== */
.mobile-call-pill {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    display: none;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 13px 20px;
    background: var(--color-orange);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: var(--radius-full);
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.45), 0 3px 8px rgba(15, 30, 54, 0.25);
    text-decoration: none;
}

.mobile-call-pill svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

.mobile-call-pill:active {
    transform: scale(0.97);
}

@media (max-width: 1024px) {
    .mobile-call-pill {
        display: inline-flex;
    }
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes callPillIn {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .mobile-call-pill {
        animation: callPillIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.2s backwards;
    }
}

/* ==========================================================================
   SKIP LINK — keyboard/screen-reader shortcut past the header (WCAG 2.4.1)
   ========================================================================== */
.skip-link {
    position: absolute;
    top: -48px;
    left: 12px;
    z-index: 200;
    background: var(--color-orange);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 10px 18px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid #FFFFFF;
    outline-offset: -4px;
}

/* ==========================================================================
   BEFORE / AFTER COMPARISON SLIDER  (reintroduced — gridded drag curtain)
   Multi-instance: app.js wires every [data-ba-slider]. Real <img> elements
   (alt text + lazy loading); the "after" layer is revealed by a clip-path
   driven by the --pos CSS var. With no JS it degrades to a static 50/50 split.
   ========================================================================== */
.ba-grid {
    display: grid;
    /* Two large columns so each real before/after gets room to read; the
       client's locked-camera proof is the point, not a dense thumbnail wall. */
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.ba-item {
    margin: 0;
}

.ba-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* match the 16:9 source so object-fit: cover crops nothing — full transformation shows */
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    background: var(--color-light-gray);
    --pos: 50%;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y; /* vertical scroll passes through; the handle owns horizontal drag */
}

.ba-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.ba-before {
    z-index: 1;
}

/* "After" sits on top, revealed from --pos to the right edge; "before" shows
   through on the left. Labels match: BEFORE bottom-left, AFTER bottom-right. */
.ba-after {
    z-index: 2;
    clip-path: inset(0 0 0 var(--pos));
}

.ba-label {
    position: absolute;
    bottom: 14px;
    z-index: 3;
    background: rgba(15, 30, 54, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #FFFFFF;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    pointer-events: none;
}

.ba-label-before {
    left: 14px;
}

.ba-label-after {
    right: 14px;
}

/* Transparent 44px-wide button = comfortable touch/drag target; the visible
   line (::after) and knob (::before) stay slim. */
.ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 44px;
    transform: translateX(-50%);
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    z-index: 4;
    cursor: ew-resize;
    touch-action: none;
}

.ba-handle::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: #FFFFFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}

.ba-handle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    transform: translate(-50%, -50%);
    background: var(--color-orange);
    border: 3px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: background-color var(--transition-fast);
    z-index: 1;
}

.ba-handle svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    color: #FFFFFF;
    z-index: 2;
    pointer-events: none;
}

.ba-handle:hover::before,
.ba-handle:active::before {
    background: var(--color-orange-hover);
}

.ba-handle:focus-visible {
    outline: none;
}

.ba-handle:focus-visible::before {
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ba-caption {
    margin-top: 12px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-navy);
    text-align: center;
}

/* A short customer quote can ride under the caption (reviews page). */
.ba-quote {
    margin-top: 6px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.84rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--text-secondary);
    text-align: center;
}

@media (max-width: 768px) {
    .ba-grid {
        /* One large column on tablet/phone — more prominent than two cramped tiles. */
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   FEATURED BEFORE/AFTER CAROUSEL — one large panoramic stage + thumbnail rail.
   Wraps the same [data-ba-slider] engine; app.js swaps the stage images and
   resets --pos when the active project changes. Lets many wide 16:9 pairs read
   large without stacking a long wall of tiles.
   ========================================================================== */
.ba-carousel { margin-top: 8px; }

.ba-stage-wrap { position: relative; }

.ba-stage-figure { margin: 0; }

/* Big stage: full container width, 16:9 so wide panoramic pairs read large. */
.ba-slider.ba-stage {
    aspect-ratio: 16 / 9;
    max-height: 72vh;
    margin: 0 auto;
}

/* Overlaid prev/next arrows — siblings of the stage, not inside the slider,
   so they never trigger the curtain's click-to-reposition. */
.ba-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: var(--shadow-md);
    color: var(--color-navy);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 5;
    transition: background-color 0.2s, transform 0.2s, color 0.2s;
}
.ba-nav:hover { background: var(--color-navy); color: #FFFFFF; transform: translateY(-50%) scale(1.07); }
.ba-nav:focus-visible { outline: 3px solid var(--color-orange); outline-offset: 2px; }
.ba-nav-prev { left: 14px; }
.ba-nav-next { right: 14px; }

.ba-carousel .ba-caption { margin-top: 16px; font-size: 1.02rem; font-weight: 700; }

/* Thumbnail rail — horizontal scroll + snap, active project outlined. */
.ba-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    padding: 4px 2px 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.ba-thumbs::-webkit-scrollbar { height: 8px; }
.ba-thumbs::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 8px; }

.ba-thumb {
    flex: 0 0 auto;
    width: 132px;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    padding: 0;
    scroll-snap-align: start;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ba-thumb:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ba-thumb img { display: block; width: 100%; height: 74px; object-fit: cover; }
.ba-thumb span {
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 6px 8px;
    text-align: left;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ba-thumb.is-active { border-color: var(--color-orange); }
.ba-thumb.is-active span { color: var(--color-navy); }

/* Single wide column — reviews / vsl enlarged in place (no carousel). */
.ba-grid--wide { grid-template-columns: 1fr; gap: 32px; max-width: 880px; margin-inline: auto; }
.ba-grid--wide .ba-slider { max-height: 70vh; }

@media (max-width: 768px) {
    .ba-slider.ba-stage { aspect-ratio: 4 / 3; }
    .ba-nav { width: 42px; height: 42px; font-size: 1.25rem; }
    .ba-nav-prev { left: 8px; }
    .ba-nav-next { right: 8px; }
    .ba-thumb { width: 112px; }
    .ba-thumb img { height: 64px; }
}

/* ==========================================================================
   DARK MODE OVERRIDES
   Fixes for hardcoded (non-variable) colors that would break on a dark
   background. The palette itself flips via the html[data-theme="dark"]
   variable block at the top of this file.
   ========================================================================== */
html[data-theme="dark"] .site-header {
    background-color: rgba(16, 28, 48, 0.95);
}

@media (hover: hover) and (pointer: fine) {
    html[data-theme="dark"] .site-header {
        background-color: rgba(16, 28, 48, 0.9);
    }
}

html[data-theme="dark"] .site-header.shrink {
    background-color: rgba(16, 28, 48, 0.97);
}

@media (max-width: 1024px) {
    html[data-theme="dark"] .nav-menu {
        background-color: var(--color-card-bg);
    }
}

/* White panels/cards -> dark card surface */
html[data-theme="dark"] .trust-bar,
html[data-theme="dark"] .step-circle,
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .estimate-check-row label,
html[data-theme="dark"] .option-box,
html[data-theme="dark"] .upload-file-label:hover,
html[data-theme="dark"] .color-chip-btn,
html[data-theme="dark"] .lab-data-card,
html[data-theme="dark"] .swatch-btn,
html[data-theme="dark"] .preset-btn,
html[data-theme="dark"] .about-value-item,
html[data-theme="dark"] .ba-thumb {
    background-color: var(--color-card-bg);
}

html[data-theme="dark"] .house-mode-toggle {
    background: rgba(20, 34, 56, 0.88);
}

html[data-theme="dark"] .house-mode-toggle:hover {
    background: var(--color-card-bg);
}

/* Light navy tints on light bg -> light-on-dark tints */
html[data-theme="dark"] .author-initial {
    background-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .photo-followup-note {
    background: rgba(255, 255, 255, 0.05);
}

/* Toggles on the navy VSL funnel header */
.funnel-header .header-toggle {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.35);
}

.funnel-header .header-toggle:hover {
    color: var(--color-orange);
    border-color: var(--color-orange);
}

/* Toggles on the minimal 404 page (no site header) */
.nf-toggles {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10;
}

/* ==========================================================================
   INSTANT ESTIMATE WIZARD (estimate.html) — est-* namespace
   ========================================================================== */

/* Compact, centered text hero */
.est-hero-content {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.est-hero .hero-btns {
    justify-content: center;
    margin-bottom: 20px;
}

.est-hero-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.est-hero-chips span {
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.88);
    border-radius: var(--radius-full);
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Wizard container — wider than the lead form so 3 tier cards fit */
.form-outer-wrapper.est-wizard {
    max-width: 880px;
}

@media (max-width: 640px) {
    .est-steps-tracker {
        padding: 18px 14px;
    }
    .est-steps-tracker .step-node span {
        font-size: 0.62rem;
    }
}

/* Scope groups (step 2 & 3) */
.est-scope-group {
    margin-bottom: 26px;
}

.est-scope-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: 4px;
}

.est-scope-copy {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 10px 0 10px;
    line-height: 1.5;
}

/* Chips */
.est-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.est-chip {
    appearance: none;
    border: 1.5px solid var(--color-border);
    background-color: var(--color-card-bg);
    color: var(--text-primary);
    border-radius: var(--radius-full);
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.est-chip:hover {
    border-color: var(--color-orange);
}

.est-chip.selected {
    border-color: var(--color-orange);
    background-color: rgba(255, 107, 53, 0.12);
    color: var(--color-orange);
}

.est-chip small {
    display: block;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.1;
}

.est-chip.selected small {
    color: inherit;
}

.est-link-btn {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 2px 0 10px;
    color: var(--color-orange);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* Steppers */
.est-stepper-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 14px 0 6px;
}

.est-stepper {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--color-border);
    background-color: var(--color-card-bg);
    border-radius: var(--radius-md);
    padding: 12px 16px;
}

.est-stepper-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}

.est-stepper-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.est-stepper-btn {
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    background-color: var(--color-card-bg);
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.est-stepper-btn:hover {
    border-color: var(--color-orange);
    color: var(--color-orange);
}

.est-stepper-value {
    min-width: 32px;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-navy);
}

/* Room rows */
.est-room-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}

.est-room-empty {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 14px 16px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
}

.est-room-row {
    border: 1px solid var(--color-border);
    background-color: var(--color-card-bg);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}

.est-room-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.est-room-row-head strong {
    font-family: var(--font-heading);
    font-size: 0.98rem;
    color: var(--color-navy);
}

.est-room-remove {
    appearance: none;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.est-room-remove:hover {
    color: var(--color-orange);
}

.est-room-row-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.est-size-row {
    margin-bottom: 0;
}

.est-chip-size {
    padding: 6px 12px;
    text-align: center;
}

.est-room-count .est-stepper-value {
    font-size: 0.92rem;
}

.est-surface-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border);
}

.est-surface-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-primary);
    cursor: pointer;
}

.est-surface-check input {
    accent-color: var(--color-orange);
}

/* Add-ons */
.est-addons-block {
    margin-top: 4px;
}

.est-addon-range {
    font-style: normal;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-left: 4px;
}

/* Results (step 4) */
.est-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.est-results-header .form-slide-title {
    margin-bottom: 10px;
}

.est-note-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.est-note-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 4px 12px;
}

/* The hidden attribute must win over the inline-block display above. */
.est-note-pill[hidden] {
    display: none !important;
}

.est-note-warn {
    color: var(--color-orange);
    border-color: var(--color-orange);
}

.est-tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: stretch;
    margin: 6px 0 18px;
}

.est-tier-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--color-border);
    background-color: var(--color-card-bg);
    border-radius: var(--radius-md);
    padding: 40px 18px 18px;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.est-tier-card:hover {
    border-color: var(--color-orange);
    box-shadow: var(--shadow-md);
}

.est-tier-card.selected {
    border-color: var(--color-orange);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.18), var(--shadow-md);
}

.est-tier-featured {
    box-shadow: var(--shadow-lg);
}

.est-tier-ribbon {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-orange);
    color: #FFFFFF;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    padding: 4px 12px;
    white-space: nowrap;
}

.est-tier-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-navy);
    margin-bottom: 2px;
}

.est-tier-tagline {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    min-height: 2.2em;
}

.est-tier-price {
    font-family: var(--font-heading);
    font-size: 1.28rem;
    font-weight: 800;
    color: var(--color-orange);
    margin-bottom: 6px;
    white-space: nowrap;
}

.est-tier-meta {
    font-size: 0.76rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.est-tier-paint {
    margin-bottom: 12px;
}

.est-tier-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex-grow: 1;
}

.est-tier-list li {
    position: relative;
    padding-left: 18px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-primary);
}

.est-tier-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-orange);
    font-weight: 800;
}

.est-tier-select {
    width: 100%;
    justify-content: center;
}

@media (max-width: 900px) {
    .est-tier-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .est-tier-card {
        flex: 0 0 82%;
        max-width: 320px;
        scroll-snap-align: center;
    }
}

/* Line-item breakdown */
.est-breakdown {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-card-bg);
    margin-bottom: 12px;
    overflow: hidden;
}

.est-breakdown summary {
    cursor: pointer;
    padding: 13px 16px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-navy);
    list-style: none;
}

.est-breakdown summary::-webkit-details-marker {
    display: none;
}

.est-breakdown summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 8px;
    color: var(--color-orange);
    transition: transform var(--transition-fast);
}

.est-breakdown[open] summary::before {
    transform: rotate(90deg);
}

.est-line-items-wrap {
    overflow-x: auto;
    padding: 0 16px 14px;
}

.est-line-items {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    min-width: 420px;
}

.est-line-items th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    padding: 8px 10px;
    border-bottom: 2px solid var(--color-border);
}

.est-line-items td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    color: var(--text-primary);
}

.est-line-items td:last-child,
.est-line-items th:last-child {
    text-align: right;
    white-space: nowrap;
}

.est-line-items tfoot td {
    border-bottom: none;
    padding-top: 12px;
    font-size: 0.88rem;
    color: var(--color-navy);
}

.est-fine-print {
    padding: 0 16px 14px;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.est-trust-strip {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 14px;
}

/* Step 5 */
.est-zip-note {
    font-size: 0.8rem;
    color: var(--color-orange);
    background: rgba(255, 107, 53, 0.08);
    border: 1px solid rgba(255, 107, 53, 0.35);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin: -6px 0 14px;
    line-height: 1.5;
}

/* Success actions */
.est-success-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}

.est-contact-line {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 22px;
}

.est-contact-line a {
    color: var(--color-orange);
    font-weight: 600;
}

/* Restored-session toast (lives inside the wizard card) */
.est-toast {
    margin: 0 20px 16px;
    padding: 10px 16px;
    background: var(--tint-navy-soft);
    border: 1px solid var(--tint-navy-border);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-secondary);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.est-toast.visible {
    opacity: 1;
    transform: none;
}

/* Sticky live range — mobile companion while configuring */
.est-sticky-range {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    z-index: 89;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background-color: var(--surface-navy);
    color: #FFFFFF;
    border-radius: var(--radius-full);
    padding: 11px 20px;
    box-shadow: 0 10px 28px rgba(15, 30, 54, 0.35);
}

.est-sticky-range[hidden] {
    display: none !important;
}

.est-sticky-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

.est-sticky-value {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.98rem;
    white-space: nowrap;
}

@media (min-width: 1025px) {
    .est-sticky-range {
        display: none !important;
    }
}

/* ==========================================================================
   PRO ESTIMATE BUILDER (pro-estimate.html, internal) — pro-* namespace
   ========================================================================== */
.pro-header {
    background-color: var(--surface-navy);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 80;
}

.pro-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
}

.pro-header .logo-text,
.pro-header .logo-slogan {
    color: #FFFFFF;
}

.pro-main {
    padding: 26px 0 80px;
    min-height: 70vh;
}

.pro-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.pro-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pro-est-number {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--color-navy);
}

.pro-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pro-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 960px) {
    .pro-grid {
        grid-template-columns: 1fr;
    }
}

.pro-col-inputs {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pro-card {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.pro-card-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: 14px;
}

.pro-sub-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-navy);
    margin: 16px 0 8px;
}

.pro-hint {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 4px 0 10px;
    line-height: 1.5;
}

.pro-scope-block {
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px dashed var(--color-border);
}

.pro-inline-field {
    margin-top: 10px;
}

.pro-room-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0;
}

.pro-room-row {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 12px;
    background-color: var(--color-neutral-bg);
}

.pro-dims-row {
    display: flex;
    gap: 8px;
    margin: 10px 0;
}

.pro-dims-row label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    flex: 1;
}

.pro-dim {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.85rem;
}

/* Right column results — sticky on desktop */
.pro-results-card {
    position: sticky;
    top: 88px;
}

@media (max-width: 960px) {
    .pro-results-card {
        position: static;
    }
}

.pro-results-card .est-tier-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}

.pro-results-card .est-tier-card {
    padding: 14px 14px 14px;
}

.pro-results-card .est-tier-ribbon {
    position: static;
    transform: none;
    display: inline-block;
    margin-bottom: 6px;
}

/* Rates panel */
.pro-rates-details summary,
.pro-drafts-details summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--color-navy);
    list-style: none;
}

.pro-rates-details summary::-webkit-details-marker,
.pro-drafts-details summary::-webkit-details-marker {
    display: none;
}

.pro-rates-details summary::before,
.pro-drafts-details summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 8px;
    color: var(--color-orange);
}

.pro-rates-details[open] summary::before,
.pro-drafts-details[open] summary::before {
    content: '▾';
}

.pro-rates-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 12px 0;
}

@media (max-width: 520px) {
    .pro-rates-grid {
        grid-template-columns: 1fr;
    }
}

.pro-rate-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 3px;
}

.pro-rate-field input {
    padding: 7px 9px;
    font-size: 0.85rem;
}

.pro-rate-field.is-overridden input {
    border-color: var(--color-orange);
    background-color: rgba(255, 107, 53, 0.06);
}

.pro-rates-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.pro-rates-json {
    margin-top: 10px;
    font-family: monospace;
    font-size: 0.8rem;
}

/* Drafts */
.pro-draft-count {
    color: var(--text-secondary);
    font-weight: 500;
}

.pro-drafts-list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pro-draft-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.pro-draft-meta {
    font-size: 0.82rem;
    color: var(--text-primary);
}

.pro-draft-actions {
    display: flex;
    gap: 6px;
}

.pro-draft-del {
    color: var(--color-orange);
    border-color: var(--color-orange);
}

/* Toast */
.pro-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(8px);
    background-color: var(--surface-navy);
    color: #FFFFFF;
    padding: 12px 22px;
    border-radius: var(--radius-full);
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 200;
}

.pro-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

html[data-theme="dark"] .pro-room-row {
    background-color: rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .pro-rate-field.is-overridden input {
    background-color: rgba(255, 107, 53, 0.12);
}

/* Instant-estimate promo band (index) */
.est-promo-strip {
    padding: 34px 0;
}

.est-promo-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    background-color: var(--surface-navy);
    border-radius: var(--radius-lg);
    padding: 26px 32px;
    box-shadow: var(--shadow-lg);
    border-left: 5px solid var(--color-orange);
}

.est-promo-copy h3 {
    color: #FFFFFF;
    font-size: 1.25rem;
    margin-bottom: 6px;
}

.est-promo-copy p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
    margin: 0;
    max-width: 560px;
}

/* The print document never renders on screen */
.print-only {
    display: none;
}

/* Dark mode — est components that use literal tints */
html[data-theme="dark"] .est-chip.selected {
    background-color: rgba(255, 107, 53, 0.16);
}

html[data-theme="dark"] .est-zip-note {
    background: rgba(255, 107, 53, 0.12);
}

html[data-theme="dark"] .est-tier-card.selected {
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.28);
}

/* ==========================================================================
   PRINT — branded estimate document. ONLY #estimateDocument prints.
   Colors are literal hex on purpose: a visitor printing while the site is
   in dark mode must still get a light paper document (never CSS vars here).
   ========================================================================== */
@media print {
    @page {
        margin: 14mm;
    }

    html,
    body {
        background: #FFFFFF !important;
        /* color-scheme drives the page canvas (incl. @page margins) in
           Chrome — without this, dark mode prints a black page frame. */
        color-scheme: light !important;
    }

    /* Scoped with :has() so pages WITHOUT the estimate document keep their
       normal print behavior; on estimate pages, only the document prints. */
    body:has(#estimateDocument) > *:not(#estimateDocument) {
        display: none !important;
    }

    #estimateDocument {
        display: block !important;
        color: #1C2025;
        font-family: 'Inter', Arial, sans-serif;
        font-size: 10.5pt;
        line-height: 1.5;
    }

    #estimateDocument h1 {
        font-family: 'Outfit', 'Inter', Arial, sans-serif;
        font-size: 17pt;
        color: #0F1E36;
        margin: 0 0 2mm;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    #estimateDocument h2 {
        font-family: 'Outfit', 'Inter', Arial, sans-serif;
        font-size: 12pt;
        color: #0F1E36;
        margin: 6mm 0 2.5mm;
        border-bottom: 2px solid #FF6B35;
        padding-bottom: 1.5mm;
    }

    .est-doc-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8mm;
        border-bottom: 3px solid #0F1E36;
        padding-bottom: 4mm;
        margin-bottom: 4mm;
        break-inside: avoid;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .est-doc-brand {
        display: flex;
        align-items: flex-start;
        gap: 4mm;
        font-size: 8.5pt;
        line-height: 1.5;
        color: #4A5568;
    }

    .est-doc-brand img {
        height: 14mm;
        width: auto;
    }

    .est-doc-brand strong {
        color: #0F1E36;
        font-size: 11pt;
        font-family: 'Outfit', 'Inter', Arial, sans-serif;
    }

    .est-doc-meta {
        text-align: right;
        font-size: 9pt;
        color: #4A5568;
    }

    .est-doc-prepared,
    .est-doc-summary {
        margin: 0 0 2.5mm;
        font-size: 9.5pt;
    }

    .est-doc-lines,
    .est-doc-tier-table {
        width: 100%;
        border-collapse: collapse;
        break-inside: avoid;
        font-size: 9.5pt;
    }

    .est-doc-lines th {
        text-align: left;
        font-size: 8pt;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #4A5568;
        border-bottom: 1.5pt solid #0F1E36;
        padding: 2mm 2.5mm;
    }

    .est-doc-lines td {
        border-bottom: 0.5pt solid #D8DCE2;
        padding: 2mm 2.5mm;
        vertical-align: top;
    }

    .est-doc-lines td:last-child,
    .est-doc-lines th:last-child {
        text-align: right;
        white-space: nowrap;
    }

    .est-doc-lines tfoot td {
        border-bottom: none;
        border-top: 1.5pt solid #0F1E36;
        font-size: 10.5pt;
        color: #0F1E36;
    }

    .est-doc-line-row {
        break-inside: avoid;
    }

    .est-doc-tier-table td {
        width: 33.33%;
        border: 0.5pt solid #D8DCE2;
        padding: 3mm;
        vertical-align: top;
        font-size: 9pt;
        line-height: 1.55;
    }

    .est-doc-tier-table td strong {
        color: #0F1E36;
        font-size: 10pt;
    }

    .est-doc-tier-table .est-doc-tier-selected {
        border: 1.5pt solid #FF6B35;
        background: #FFF4EE;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .est-doc-list {
        margin: 0 0 3mm;
        padding-left: 5mm;
        break-inside: avoid;
    }

    .est-doc-list li {
        margin-bottom: 1mm;
    }

    .est-doc-disclaimer {
        margin-top: 5mm;
        padding: 3mm 4mm;
        border: 0.75pt solid #D8DCE2;
        border-radius: 2mm;
        font-size: 8.5pt;
        color: #4A5568;
        break-inside: avoid;
    }

    .est-doc-disclaimer p {
        margin: 0 0 1.5mm;
    }

    .est-doc-footer {
        margin-top: 5mm;
        text-align: center;
        font-size: 8pt;
        color: #4A5568;
        border-top: 0.5pt solid #D8DCE2;
        padding-top: 2.5mm;
    }
}