/* =============================================================================
   Advarience Agency Showcase Top Bar & Shared Architecture for Portfolio Sites
   Complete Dark / Light Theme System, Typography & Contrast Optimization
   ============================================================================= */

:root {
    --adv-bar-bg: rgba(15, 17, 21, 0.94);
    --adv-bar-border: rgba(255, 255, 255, 0.12);
    --adv-bar-text: #f3f4f6;
    --adv-bar-muted: #9ca3af;
    --adv-bar-accent: #f58e01;
    --adv-bar-accent-glow: rgba(245, 142, 1, 0.35);
}

/* -------------------------------------------------------------
   AGENCY SHOWCASE STICKY TOP BAR
   ------------------------------------------------------------- */
.adv-top-bar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    height: 44px;
    background: var(--adv-bar-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--adv-bar-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    color: var(--adv-bar-text);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.adv-top-bar a {
    color: inherit;
    text-decoration: none;
}

.adv-bar-left, .adv-bar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.adv-back-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.8rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.02em;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.adv-back-pill:hover {
    background: var(--adv-bar-accent);
    color: #0f172a;
    border-color: var(--adv-bar-accent);
    transform: translateX(-1px);
    box-shadow: 0 2px 10px var(--adv-bar-accent-glow);
}

.adv-agency-badge {
    display: none;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    background: rgba(245, 142, 1, 0.14);
    border: 1px solid rgba(245, 142, 1, 0.32);
    color: #fb923c;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .adv-agency-badge {
        display: inline-flex;
    }
}

.adv-concept-select {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 0.32rem 0.65rem;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    max-width: 190px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

@media (min-width: 640px) {
    .adv-concept-select {
        max-width: 280px;
    }
}

.adv-concept-select:focus, .adv-concept-select:hover {
    border-color: var(--adv-bar-accent);
    box-shadow: 0 0 0 2px rgba(245, 142, 1, 0.2);
}

.adv-concept-select option {
    background: #18191c;
    color: #ffffff;
}

/* -------------------------------------------------------------
   LIGHT / DARK THEME TOGGLE BUTTON (TOP RIGHT)
   ------------------------------------------------------------- */
.adv-theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.8rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    user-select: none;
}

.adv-theme-toggle-btn:hover {
    background: #f58e01;
    color: #0f172a;
    border-color: #f58e01;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(245, 142, 1, 0.35);
}

.adv-theme-toggle-btn i {
    font-size: 11px;
}

/* -------------------------------------------------------------
   SMOOTH SCROLLING & ACCESSIBLE CONTRAST DEFAULTS
   ------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

/* Ensure readable line height & contrast */
p {
    line-height: 1.65;
}

/* Universal Header Navigation Bar Styles for Portfolio Sites */
nav ul.nav-links, .nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul.nav-links li, .nav-links li {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul.nav-links a, .nav-links a {
    text-decoration: none;
    color: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    transition: color 0.2s ease, opacity 0.2s ease;
    white-space: nowrap;
}

/* Prevent text clipping or harsh contrast falls in dark mode */
body:not(.light-theme) {
    color-scheme: dark;
}

/* -------------------------------------------------------------
   COMPLETE 32-SITE LIGHT THEME VARIABLE DEFINITIONS
   When .light-theme is active, every single custom variable swaps
   cleanly to high-contrast, beautiful editorial light surfaces!
   ------------------------------------------------------------- */
body.light-theme, 
html.light-theme body, 
:root.light-theme body {
    color-scheme: light;
    background-color: #f8fafc !important;
    color: #0f172a !important;

    /* Top Bar Light Theme Tokens */
    --adv-bar-bg: rgba(255, 255, 255, 0.95);
    --adv-bar-border: rgba(0, 0, 0, 0.1);
    --adv-bar-text: #0f172a;
    --adv-bar-muted: #64748b;

    /* =========================================================
       SITE 01: APEX GARAGE
       ========================================================= */
    --apex-bg: #f8fafc;
    --apex-card: #ffffff;
    --apex-surface: #f1f5f9;
    --text-light: #0f172a;
    --text-dim: #475569;
    --text-muted: #64748b;
    --border-apex: rgba(234, 179, 8, 0.35);
    --border-subtle: rgba(0, 0, 0, 0.08);

    /* =========================================================
       SITE 02: VANGUARD AUTO PERFORMANCE
       ========================================================= */
    --auto-bg: #f8fafc;
    --auto-surface: #f1f5f9;
    --auto-surface-card: #ffffff;
    --auto-text: #0f172a;
    --auto-text-muted: #475569;
    --auto-border: rgba(0, 0, 0, 0.1);

    /* =========================================================
       SITE 03: IRONWOOD CONSTRUCTION
       ========================================================= */
    --const-bg: #f8fafc;
    --const-surface: #f1f5f9;
    --const-surface-card: #ffffff;
    --const-text: #0f172a;
    --const-text-muted: #475569;
    --const-border: rgba(0, 0, 0, 0.1);

    /* =========================================================
       SITE 04: PRESTIGE NOTARY
       ========================================================= */
    --notary-bg: #f8fafc;
    --notary-navy: #0f172a;
    --notary-surface: #f1f5f9;
    --notary-surface-card: #ffffff;
    --notary-text: #0f172a;
    --notary-text-muted: #475569;
    --notary-border: rgba(212, 175, 55, 0.3);

    /* =========================================================
       SITE 05: PULSEPOINT HEALTH / URGENT CARE
       ========================================================= */
    --peds-bg: #f8fafc;
    --peds-card: #ffffff;
    --peds-surface: #f0fdfa;
    --border-peds: rgba(20, 184, 166, 0.3);

    /* =========================================================
       SITE 06: AURA AESTHETICS MED SPA
       ========================================================= */
    --bg-sand: #faf8f5;
    --bg-card: #ffffff;
    --bg-surface: #f4efeb;
    --text-pure: #1c1917;
    --text-muted: #57534e;
    --border-soft: rgba(232, 165, 136, 0.3);

    /* =========================================================
       SITE 07: SOVEREIGN LIMO / EXECUTIVE CHAUFFEUR
       ========================================================= */
    --limo-bg: #f8fafc;
    --limo-surface: #f1f5f9;
    --limo-surface-card: #ffffff;
    --limo-text: #0f172a;
    --limo-text-muted: #475569;
    --limo-border: rgba(197, 160, 89, 0.28);

    /* =========================================================
       SITE 08: ELEVATE PHYSICAL THERAPY / REHAB
       ========================================================= */
    --rehab-bg: #f8fafc;
    --rehab-surface: #f1f5f9;
    --rehab-surface-card: #ffffff;
    --rehab-text: #0f172a;
    --rehab-text-muted: #475569;
    --rehab-border: rgba(13, 148, 136, 0.25);

    /* =========================================================
       SITE 09: PUREAIR REMEDIATION / MOLD
       ========================================================= */
    --mold-bg: #f8fafc;
    --mold-surface: #f1f5f9;
    --mold-surface-card: #ffffff;
    --mold-text: #0f172a;
    --mold-text-muted: #475569;
    --mold-border: rgba(16, 185, 129, 0.25);

    /* =========================================================
       SITE 10: ECOVANGUARD ENVIRONMENTAL
       ========================================================= */
    --enviro-bg: #f8fafc;
    --enviro-surface: #f1f5f9;
    --enviro-surface-card: #ffffff;
    --enviro-text: #0f172a;
    --enviro-text-muted: #475569;
    --enviro-border: rgba(5, 150, 105, 0.25);

    /* =========================================================
       SITE 11: MONARCH EXOTIC CAR RENTALS
       ========================================================= */
    --car-bg: #f8fafc;
    --car-surface: #f1f5f9;
    --car-surface-card: #ffffff;
    --car-text: #0f172a;
    --car-text-muted: #475569;
    --car-border: rgba(234, 179, 8, 0.28);

    /* =========================================================
       SITE 12: SPARKLEMAID CLEANING
       ========================================================= */
    --maid-bg: #f8fafc;
    --maid-surface: #f1f5f9;
    --maid-surface-card: #ffffff;
    --maid-text: #0f172a;
    --maid-text-muted: #475569;
    --maid-border: rgba(6, 182, 212, 0.25);

    /* =========================================================
       SITE 13: ROLLING GRIP ROADSIDE TIRES
       ========================================================= */
    --tire-bg: #f8fafc;
    --tire-surface: #f1f5f9;
    --tire-surface-card: #ffffff;
    --tire-text: #0f172a;
    --tire-text-muted: #475569;
    --tire-border: rgba(255, 184, 0, 0.28);

    /* =========================================================
       SITE 14: VELVET CERAMIC AUTO SPA
       ========================================================= */
    --spa-bg: #faf5ff;
    --spa-surface: #f5f3ff;
    --spa-surface-card: #ffffff;
    --spa-text: #0f172a;
    --spa-text-muted: #475569;
    --spa-border: rgba(139, 92, 246, 0.25);

    /* =========================================================
       SITE 15: BLUELINE EMERGENCY PLUMBING
       ========================================================= */
    --plumb-bg: #f8fafc;
    --plumb-surface: #f1f5f9;
    --plumb-surface-card: #ffffff;
    --plumb-text: #0f172a;
    --plumb-text-muted: #475569;
    --plumb-border: rgba(0, 180, 216, 0.25);

    /* =========================================================
       SITE 16: COLDSTREAM SUB-ZERO HVAC
       ========================================================= */
    --hvac-bg: #f8fafc;
    --hvac-card: #ffffff;
    --hvac-surface: #f0f9ff;
    --border-hvac: rgba(56, 189, 248, 0.3);

    /* =========================================================
       SITE 17: VERDE ARTISAN PIZZERIA & KITCHEN
       ========================================================= */
    --verde-bg: #fafaf7;
    --verde-card: #ffffff;
    --verde-surface: #f4f5ee;
    --verde-cream: #141712;
    --border-verde: rgba(96, 108, 56, 0.25);

    /* =========================================================
       SITE 18: LUMIERE GENEVA HAUTE HORLOGERIE
       ========================================================= */
    --bg-noir: #f8f9fa;
    --bg-surface: #f1f5f9;
    --bg-card: #ffffff;
    --text-main: #0f172a;
    --text-sub: #475569;
    --border-fine: rgba(197, 160, 89, 0.3);

    /* =========================================================
       SITE 19: AL-MIRAJ DUBAI LUXURY REAL ESTATE
       ========================================================= */
    --dubai-dark: #f8f9fa;
    --dubai-card: #ffffff;
    --dubai-surface: #f1f5f9;
    --border-gold: rgba(212, 175, 55, 0.3);

    /* =========================================================
       SITE 20: BESPOKE SAVILE ROW TAILORS
       ========================================================= */
    --tailor-bg: #f9faf8;
    --tailor-card: #ffffff;
    --tailor-surface: #f1f4f2;
    --border-tailor: rgba(203, 161, 53, 0.3);

    /* =========================================================
       SITE 21: ARCADIA COFFEE ROASTERS
       ========================================================= */
    --coffee-bg: #faf7f2;
    --coffee-card: #ffffff;
    --coffee-surface: #f3ece2;
    --border-coffee: rgba(200, 125, 70, 0.28);

    /* =========================================================
       SITE 22: PALAIS OASIS DESERT RESORT
       ========================================================= */
    --oasis-bg: #faf6f0;
    --oasis-card: #ffffff;
    --oasis-surface: #f3ece1;
    --border-oasis: rgba(201, 122, 71, 0.28);

    /* =========================================================
       SITE 23: KURA BOTANICALS SKINCARE
       ========================================================= */
    --kura-bg: #f7faf7;
    --kura-card: #ffffff;
    --kura-surface: #eef4ee;
    --border-kura: rgba(144, 169, 85, 0.3);

    /* =========================================================
       SITE 24: PRECISION SOLAR & MICROGRIDS
       ========================================================= */
    --solar-bg: #f8fafc;
    --solar-card: #ffffff;
    --solar-surface: #f1f5f9;
    --border-solar: rgba(245, 158, 11, 0.3);

    /* =========================================================
       SITE 25: NEXUS WEALTH MANAGEMENT
       ========================================================= */
    --nexus-navy: #f8fafc;
    --nexus-card: #ffffff;
    --nexus-surface: #f1f5f9;
    --border-nexus: rgba(197, 155, 39, 0.3);

    /* =========================================================
       SITE 26: NORDIC FORM ARCHITECTURAL JOINERY
       ========================================================= */
    --nordic-bg: #f8f9fa;
    --nordic-sidebar: #ffffff;
    --nordic-card: #ffffff;
    --nordic-surface: #f1f3f5;
    --border-nordic: rgba(0, 0, 0, 0.08);

    /* =========================================================
       SITE 27: STRATA CLOUD OBSERVABILITY
       ========================================================= */
    --dev-bg: #f8fafc;
    --dev-card: #ffffff;
    --dev-surface: #f1f5f9;
    --text-dev: #0f172a;
    --border-tech: rgba(0, 102, 255, 0.25);

    /* =========================================================
       SITE 28: TITAN HEAVY TOWING & RECOVERY
       ========================================================= */
    --titan-dark: #f8fafc;
    --titan-card: #ffffff;
    --titan-surface: #f1f5f9;
    --border-titan: rgba(245, 158, 11, 0.35);

    /* =========================================================
       SITE 29: VELOS MARINE CARBON CATAMARANS
       ========================================================= */
    --marine-dark: #f8fafc;
    --marine-card: #ffffff;
    --marine-surface: #f0f7ff;
    --border-marine: rgba(0, 102, 255, 0.25);

    /* =========================================================
       SITE 30: ZENITH ORAL SURGERY
       ========================================================= */
    --med-dark: #f8fafc;
    --med-card: #ffffff;
    --med-surface: #f0f9ff;
    --border-med: rgba(0, 180, 216, 0.3);

    /* =========================================================
       SITE 31: VANGUARD TRIAL LAWYERS
       ========================================================= */
    --law-navy: #f8fafc;
    --law-dark: #ffffff;
    --law-card: #ffffff;
    --law-surface: #f1f5f9;
    --border-law: rgba(0, 92, 255, 0.25);

    /* =========================================================
       SITE 32: SUMMIT RIDGE ROOFING
       ========================================================= */
    --roof-dark: #f8fafc;
    --roof-card: #ffffff;
    --roof-surface: #f1f5f9;
    --text-gray: #475569;
    --border-roof: rgba(234, 79, 28, 0.3);

    /* =========================================================
       SITE 33: PULSEPOINT PEDIATRIC HEALTH
       ========================================================= */
    --peds-bg: #f8fafc;
    --peds-card: #ffffff;
    --peds-surface: #f0fdfa;
    --peds-teal: #0d9488;
    --peds-teal-light: #0f766e;
    --peds-teal-glow: rgba(13, 148, 136, 0.2);
    --border-peds: rgba(13, 148, 136, 0.22);
}

/* -------------------------------------------------------------
   TOP BAR LIGHT THEME STYLES
   ------------------------------------------------------------- */
body.light-theme .adv-top-bar {
    background: var(--adv-bar-bg);
    border-bottom-color: var(--adv-bar-border);
    color: var(--adv-bar-text);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
}

body.light-theme .adv-back-pill {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.15);
    color: #0f172a;
}

body.light-theme .adv-back-pill:hover {
    background: #f58e01;
    color: #0f172a;
    border-color: #f58e01;
}

body.light-theme .adv-concept-select {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
    color: #0f172a;
}

body.light-theme .adv-concept-select option {
    background: #ffffff;
    color: #0f172a;
}

body.light-theme .adv-theme-toggle-btn {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.18);
    color: #0f172a;
}

body.light-theme .adv-theme-toggle-btn:hover {
    background: #f58e01;
    color: #0f172a;
    border-color: #f58e01;
}

/* -------------------------------------------------------------
   UNIVERSAL LIGHT THEME SURFACE & TYPOGRAPHY OVERRIDES
   ------------------------------------------------------------- */

/* Headers, Navigation bars, and Tickers */
body.light-theme header,
body.light-theme .site-header,
body.light-theme [class*="-header-wrap"],
body.light-theme [class*="-nav-wrap"],
body.light-theme .apex-header-wrap,
body.light-theme .kura-header,
body.light-theme .oasis-header {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
    color: #0f172a;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* Tickers, Telemetry Bars & Notification Strips */
body.light-theme [class*="ticker"],
body.light-theme [class*="-ticker"],
body.light-theme [class*="ticker-bar"],
body.light-theme [class*="ticker-strip"],
body.light-theme [class*="hazard-top-bar"],
body.light-theme .apex-dispatch-ticker,
body.light-theme .harvest-ticker,
body.light-theme .guarantee-strip,
body.light-theme .footer-guarantee-strip {
    background: #f1f5f9 !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
    color: #1e293b !important;
}

body.light-theme [class*="ticker"] span,
body.light-theme [class*="ticker"] div,
body.light-theme [class*="ticker"] p,
body.light-theme [class*="-ticker"] span,
body.light-theme [class*="-ticker"] div,
body.light-theme .ticker-license,
body.light-theme .ticker-license span,
body.light-theme .footer-guarantee-strip span {
    color: #475569 !important;
}

body.light-theme [class*="ticker"] strong,
body.light-theme [class*="-ticker"] strong,
body.light-theme .ticker-license strong {
    color: #0f172a !important;
}

/* Brand Links, Logos & Titles */
body.light-theme .brand-title,
body.light-theme .brand-name,
body.light-theme [class*="brand-title"],
body.light-theme [class*="brand-name"],
body.light-theme .brand-text h2,
body.light-theme .brand-apex {
    color: #0f172a !important;
}

/* Navigation Links */
body.light-theme nav a, 
body.light-theme .nav-links a, 
body.light-theme .nav-link,
body.light-theme .nav-item {
    color: #334155 !important;
}

body.light-theme nav a:hover, 
body.light-theme .nav-links a:hover, 
body.light-theme .nav-link:hover,
body.light-theme .nav-item:hover {
    color: #f58e01 !important;
}

/* Alternating & Thematic Sections in Light Mode */
body.light-theme .openers-section,
body.light-theme .pricing-section,
body.light-theme .doors-section,
body.light-theme .faq-section,
body.light-theme .fleet-section,
body.light-theme .terroir-section,
body.light-theme .greenhouse-section,
body.light-theme .menu-section,
body.light-theme .verdict-section,
body.light-theme .faculty-section,
body.light-theme .insurance-section,
body.light-theme .wellness-section,
body.light-theme .villas-section,
body.light-theme .metrics-banner,
body.light-theme .corridor-section,
body.light-theme .reviews-section,
body.light-theme .section-allon4,
body.light-theme .section-cbct,
body.light-theme .section-surgeons,
body.light-theme .section-faq,
body.light-theme .section-fleet,
body.light-theme .section-engineering,
body.light-theme .section-practice,
body.light-theme .section-attorneys,
body.light-theme .section-systems,
body.light-theme .section-drone,
body.light-theme .section-architecture,
body.light-theme .section-docs,
body.light-theme .section-pricing,
body.light-theme .section-powerwall,
body.light-theme .section-desert,
body.light-theme .section-incentives,
body.light-theme .calc-section,
body.light-theme .spec-section,
body.light-theme [class*="section-dark"],
body.light-theme .section-dark {
    background: #f1f5f9 !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

/* Cards, Content Boxes & Pricing Containers */
body.light-theme .card,
body.light-theme .feature-card,
body.light-theme .service-card,
body.light-theme .review-card,
body.light-theme .faq-item,
body.light-theme .faq-card,
body.light-theme .calc-box,
body.light-theme .calc-wrapper,
body.light-theme .calc-container,
body.light-theme .interactive-card,
body.light-theme .product-card,
body.light-theme .spec-card,
body.light-theme .spec-mini-card,
body.light-theme .pricing-card,
body.light-theme .fleet-card,
body.light-theme .estate-card,
body.light-theme .dial-card,
body.light-theme .coffee-customizer-box,
body.light-theme .box-summary-panel,
body.light-theme .step-card,
body.light-theme .roast-card,
body.light-theme .suite-card,
body.light-theme .blend-card,
body.light-theme .opener-card,
body.light-theme .door-card,
body.light-theme .dispatch-card,
body.light-theme .modal-card {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.05) !important;
    color: #0f172a;
}

/* Headings inside light theme (high contrast, non-destructive) */
body.light-theme h1, 
body.light-theme h2, 
body.light-theme h3, 
body.light-theme h4, 
body.light-theme h5, 
body.light-theme h6,
body.light-theme .section-title,
body.light-theme .section-h2,
body.light-theme [class*="section-title"],
body.light-theme .opener-title,
body.light-theme .door-content h4,
body.light-theme .dispatch-card h3,
body.light-theme .modal-card h3 {
    color: #0f172a !important;
}

/* Paragraphs & Subtexts inside light theme */
body.light-theme p:not([class*="btn"]):not([class*="pill"]):not([class*="badge"]),
body.light-theme .section-desc,
body.light-theme .section-sub,
body.light-theme .hero-sub,
body.light-theme .hero-desc,
body.light-theme .card p,
body.light-theme .service-card p,
body.light-theme .opener-desc,
body.light-theme .door-content p,
body.light-theme .modal-card p {
    color: #475569 !important;
}

/* Feature lists & specs */
body.light-theme .opener-features,
body.light-theme .opener-features li,
body.light-theme .features-list li,
body.light-theme .spec-list li {
    color: #334155 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Sub-panels, Badges, Total Boxes & Option Buttons in Light Theme */
body.light-theme .total-box,
body.light-theme .summary-box,
body.light-theme .estimate-box,
body.light-theme .issue-price-preview,
body.light-theme .calc-summary {
    background: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #0f172a !important;
}

body.light-theme .total-box span,
body.light-theme .total-box p,
body.light-theme .issue-price-preview span,
body.light-theme .issue-price-preview p,
body.light-theme .calc-option-row div {
    color: #475569 !important;
}

body.light-theme .issue-btn,
body.light-theme .calc-pill,
body.light-theme .tab-btn {
    background: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #1e293b !important;
}

body.light-theme .issue-btn div {
    color: #475569 !important;
}

body.light-theme .spring-badge-overlay,
body.light-theme [class*="badge-overlay"] {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .spring-badge-overlay span,
body.light-theme .spring-badge-overlay div {
    color: #1e293b !important;
}

/* Form inputs & interactive widgets */
body.light-theme input[type="text"],
body.light-theme input[type="email"],
body.light-theme input[type="tel"],
body.light-theme input[type="number"],
body.light-theme input[type="date"],
body.light-theme select,
body.light-theme textarea {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(0, 0, 0, 0.22) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

body.light-theme input:focus,
body.light-theme select:focus,
body.light-theme textarea:focus {
    border-color: #f58e01 !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 142, 1, 0.15) !important;
}

/* Secondary / Outline Buttons in Light Theme */
body.light-theme .btn-secondary,
body.light-theme [class*="btn-"][style*="background:transparent"],
body.light-theme [class*="btn-"][style*="background: transparent"],
body.light-theme .btn-outline {
    color: #0f172a !important;
    border-color: rgba(0, 0, 0, 0.25) !important;
    background-color: rgba(0, 0, 0, 0.03) !important;
}

body.light-theme .btn-secondary:hover,
body.light-theme [class*="btn-"][style*="background:transparent"]:hover,
body.light-theme [class*="btn-"][style*="background: transparent"]:hover,
body.light-theme .btn-outline:hover {
    background-color: rgba(0, 0, 0, 0.08) !important;
    color: #0f172a !important;
}

/* Footers */
body.light-theme footer,
body.light-theme [class*="-footer"],
body.light-theme .site-footer {
    background-color: #f1f5f9 !important;
    border-top-color: rgba(0, 0, 0, 0.1) !important;
    color: #475569 !important;
}

body.light-theme footer p, 
body.light-theme footer a:not([class*="btn"]):not([class*="-btn"]), 
body.light-theme footer li {
    color: #475569 !important;
}

body.light-theme footer a:not([class*="btn"]):not([class*="-btn"]):hover {
    color: #f58e01 !important;
}

body.light-theme footer h3,
body.light-theme footer h4, 
body.light-theme footer h5, 
body.light-theme footer .footer-title,
body.light-theme footer [class*="title"],
body.light-theme .footer-col h5 {
    color: #0f172a !important;
}

body.light-theme .footer-guarantee-strip {
    background-color: #fefce8 !important;
    border-bottom: 1px solid rgba(234, 179, 8, 0.25) !important;
}

body.light-theme .county-tag-pill,
body.light-theme [class*="tag-pill"] {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #334155 !important;
}

/* FAQ Accordion Items in Light Theme */
body.light-theme .faq-item,
body.light-theme .faq-card,
body.light-theme [class*="faq-item"],
body.light-theme [class*="faq-card"] {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

body.light-theme .faq-item.active,
body.light-theme .faq-card.active {
    border-color: rgba(245, 142, 1, 0.5) !important;
    box-shadow: 0 4px 16px rgba(245, 142, 1, 0.08) !important;
}

body.light-theme .faq-question-btn,
body.light-theme .faq-question,
body.light-theme .faq-btn,
body.light-theme [class*="faq-question"],
body.light-theme [class*="faq-btn"] {
    color: #0f172a !important;
    background: transparent !important;
}

body.light-theme .faq-question-btn span,
body.light-theme .faq-question span,
body.light-theme .faq-btn span {
    color: #0f172a !important;
}

body.light-theme .faq-answer-pane,
body.light-theme .faq-answer,
body.light-theme .faq-ans,
body.light-theme [class*="faq-answer"] {
    background: #f8fafc !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body.light-theme .faq-answer-pane p,
body.light-theme .faq-answer p,
body.light-theme .faq-ans p,
body.light-theme [class*="faq-answer"] p {
    color: #475569 !important;
}

/* Responsive logo styles */
.brand-logo svg, .brand-icon-box svg, .logo-icon svg, .responsive-logo-svg {
    width: 32px;
    height: 32px;
    max-width: 100%;
    max-height: 100%;
    display: block;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .brand-logo svg, .brand-icon-box svg, .logo-icon svg, .responsive-logo-svg {
        width: 26px;
        height: 26px;
    }
}

/* =============================================================
   UNIVERSAL CARD & SECTION IMAGE PRESENTATION
   ============================================================= */
.card-img-wrap {
    width: 100%;
    height: 195px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    position: relative;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
    background: rgba(0, 0, 0, 0.15);
}

.card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

.service-card:hover .card-img-wrap img,
.arch-card:hover .card-img-wrap img,
.desert-card:hover .card-img-wrap img,
.spa-prov-card:hover .card-img-wrap img,
.card-img-wrap:hover img {
    transform: scale(1.06);
}

body.light-theme .card-img-wrap {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* =============================================================
   Universal Modal Overlay & Card System
   ============================================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(8, 16, 24, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.modal-overlay.active,
.modal-overlay.open {
    display: flex;
}

.modal-card {
    position: relative;
    max-width: 550px;
    width: 100%;
    margin: auto;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85);
}

.modal-close-btn {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: transparent;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
}

body.light-theme .modal-overlay {
    background: rgba(15, 23, 42, 0.65);
}

/* =============================================================
   Universal Light Mode Contrast & Readability Safeguard
   Ensures headings, paragraphs, spans, and labels maintain high
   WCAG contrast even if custom inline white styles were applied.
   Excludes buttons, active badge pills, and dark accent components.
   ============================================================= */
body.light-theme h1:not([class*="btn"]):not([class*="badge"]),
body.light-theme h2:not([class*="btn"]):not([class*="badge"]),
body.light-theme h3:not([class*="btn"]):not([class*="badge"]),
body.light-theme h4:not([class*="btn"]):not([class*="badge"]),
body.light-theme h5:not([class*="btn"]):not([class*="badge"]),
body.light-theme h6:not([class*="btn"]):not([class*="badge"]) {
    color: var(--text-light, #0f172a);
}

body.light-theme [style*="color:#fff"]:not([class*="btn"]):not([class*="badge"]):not([class*="pill"]):not([class*="cta"]):not(button):not([style*="background"]),
body.light-theme [style*="color: #fff"]:not([class*="btn"]):not([class*="badge"]):not([class*="pill"]):not([class*="cta"]):not(button):not([style*="background"]),
body.light-theme [style*="color:#ffffff"]:not([class*="btn"]):not([class*="badge"]):not([class*="pill"]):not([class*="cta"]):not(button):not([style*="background"]),
body.light-theme [style*="color: #ffffff"]:not([class*="btn"]):not([class*="badge"]):not([class*="pill"]):not([class*="cta"]):not(button):not([style*="background"]),
body.light-theme [style*="color:white"]:not([class*="btn"]):not([class*="badge"]):not([class*="pill"]):not([class*="cta"]):not(button):not([style*="background"]),
body.light-theme [style*="color: white"]:not([class*="btn"]):not([class*="badge"]):not([class*="pill"]):not([class*="cta"]):not(button):not([style*="background"]) {
    color: #0f172a !important;
}

/* =============================================================================
   UNIVERSAL MOBILE RESPONSIVENESS & STANDARDIZED CONTAINER WIDTH ENGINE
   Applies to every single portfolio showcase site:
   - Header, menu, sections, and footer are 100% responsive and of the EXACT SAME WIDTH
   - Uniform horizontal padding across all viewport breakpoints
   - Multi-column grids and flex rows collapse gracefully on mobile & tablet
   - Bulletproof mobile navigation drawer and hamburger toggle styling
   - Zero horizontal overflow on any device
   ============================================================================= */

/* 1. Global Box Model & Overflow Safeguards */
*, *::before, *::after {
    box-sizing: border-box !important;
}

html, body {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
    position: relative;
    box-sizing: border-box !important;
}

.hero-banner-wrap,
.hero {
    max-width: 100% !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
}

img, video, iframe, canvas {
    max-width: 100% !important;
    height: auto !important;
}

svg {
    max-width: 100%;
}

/* 2. Standardized Container & Section Widths on Desktop */
:root {
    --adv-container-max: 1320px;
    --adv-gutter-desktop: 1.5rem;
    --adv-gutter-tablet: 1.25rem;
    --adv-gutter-mobile: 1rem;
}

/* All main section wrappers, inner grid containers, headers, and footers share the EXACT SAME max-width */
.container,
.section-wrap,
.hero,
.hero-grid,
.content-area,
.site-footer,
.footer-grid,
.footer-main-grid,
.nordic-footer-grid,
.calc-container,
.calc-wrapper,
.properties-grid,
.palm-grid,
.villas-section,
.dining-section,
.section-atelier,
.section-provenance,
.section-specs,
.section-collectors,
.section-treatments,
.results-section,
.longevity-grid,
.section-systems,
.drone-grid,
.section-fleet,
.eng-grid,
.section-allon4,
.section-cbct,
.verdict-section,
.practice-grid,
.section-attorneys,
.section-powerwall,
.section-desert,
.section-incentives,
.section-visa,
.section-helicopter,
.section-studio,
.section-spec-box,
.menu-section,
.terroir-grid,
.greenhouse-section,
.openers-grid,
.doors-section,
.origin-grid,
.brew-section,
.craft-section,
.fittings-section,
.heritage-grid,
.corridor-section,
.auto-nav-container,
.const-nav-container,
.enviro-nav-container,
.notary-nav-container,
.plumb-nav-container,
.rehab-nav-container,
.mold-nav-container,
.tire-nav-main,
.governance-strip,
.fiduciary-top-bar,
.main-header-row,
.sanctuary-header,
.site-nav,
.console-header,
.strata-ticker-bar,
.editorial-header,
.minimal-tailor-bar,
.marine-nav,
.med-nav,
.apex-nav,
.coffee-nav,
.hvac-nav,
.titan-nav,
.main-verde-nav,
.header-main-nav,
.header-top-bar,
.footer-bottom,
.footer-bottom-bar,
.footer-compliance-strip,
.dubai-compliance-strip,
.enviro-compliance-strip,
.rehab-compliance-strip,
.titan-cert-strip,
.law-cert-strip,
.marine-compliance-strip,
.clinical-compliance-strip,
.strata-cert-strip,
.nordic-cert-strip,
.spa-provenance-strip,
.monarch-telemetry-strip,
.maid-eco-strip,
.solar-yield-strip,
.tire-spec-strip,
.footer-regulatory-container,
.footer-guarantee-strip {
    max-width: var(--adv-container-max) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* 3. Floating Pill Headers Standardization */
.peds-pill,
.solar-pill,
.car-floating-nav,
.spa-floating-nav,
.maid-floating-nav,
.pill-header {
    max-width: var(--adv-container-max) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* 4. Desktop Consistent Horizontal Gutters */
@media (min-width: 1025px) {
    .section-wrap,
    .hero,
    .hero-grid,
    .footer-main-grid,
    .properties-grid,
    .content-area,
    .auto-nav-container,
    .const-nav-container,
    .enviro-nav-container,
    .notary-nav-container,
    .plumb-nav-container,
    .rehab-nav-container,
    .mold-nav-container,
    .tire-nav-main,
    .editorial-header,
    .minimal-tailor-bar,
    .site-nav,
    .marine-nav,
    .med-nav,
    .apex-nav,
    .coffee-nav,
    .hvac-nav,
    .titan-nav,
    .main-verde-nav,
    .header-main-nav {
        padding-left: var(--adv-gutter-desktop) !important;
        padding-right: var(--adv-gutter-desktop) !important;
    }
}

/* 5. Tablet Responsiveness & Same-Width Alignment (<= 1024px) */
@media (max-width: 1024px) {
    /* Hide desktop nav links across all sites */
    nav ul.nav-links,
    .nav-links,
    .peds-nav-links,
    .pill-nav,
    .header-nav-links,
    .law-nav-links,
    .split-nav-left,
    .split-nav-right,
    .store-nav-links,
    .sidebar-menu:not(.nordic-mobile-menu):not(.open) {
        display: none !important;
    }
    .sidebar-menu.open {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    /* Reveal mobile hamburger toggle buttons */
    .mobile-nav-toggle,
    .mobile-toggle-btn,
    .menu-toggle,
    .menu-drawer-btn,
    .mobile-miraj-toggle,
    .mobile-marine-toggle,
    .mobile-clinical-toggle,
    .peds-mobile-toggle,
    .solar-mobile-toggle,
    .prestige-mobile-toggle,
    .tire-mobile-toggle,
    .maid-mobile-toggle,
    .spa-mobile-toggle,
    .verde-mobile-toggle,
    .monarch-mobile-toggle,
    .limo-hamburger-btn,
    .pill-mobile-btn,
    .rehab-menu-btn,
    .roof-menu-btn,
    .btn-atelier-index,
    [class*="mobile-toggle"],
    [class*="hamburger-btn"],
    [id*="MobileToggle"],
    [id*="MobileBtn"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 40px !important;
        min-height: 40px !important;
        cursor: pointer !important;
    }

    /* Standardize all section, header, and footer widths and side gutters on tablet */
    .section-wrap,
    .hero,
    .hero-grid,
    .site-footer,
    .footer-grid,
    .footer-main-grid,
    .nordic-footer-grid,
    .content-area,
    .calc-container,
    .calc-wrapper,
    .properties-grid,
    .palm-grid,
    .villas-section,
    .dining-section,
    .section-atelier,
    .section-provenance,
    .section-specs,
    .section-collectors,
    .section-treatments,
    .results-section,
    .longevity-grid,
    .section-systems,
    .drone-grid,
    .section-fleet,
    .eng-grid,
    .section-allon4,
    .section-cbct,
    .verdict-section,
    .practice-grid,
    .section-attorneys,
    .section-powerwall,
    .section-desert,
    .section-incentives,
    .section-visa,
    .section-helicopter,
    .section-studio,
    .section-spec-box,
    .menu-section,
    .terroir-grid,
    .greenhouse-section,
    .openers-grid,
    .doors-section,
    .origin-grid,
    .brew-section,
    .craft-section,
    .fittings-section,
    .heritage-grid,
    .corridor-section,
    .auto-nav-container,
    .const-nav-container,
    .enviro-nav-container,
    .notary-nav-container,
    .plumb-nav-container,
    .rehab-nav-container,
    .mold-nav-container,
    .tire-nav-main,
    .governance-strip,
    .fiduciary-top-bar,
    .main-header-row,
    .sanctuary-header,
    .site-nav,
    .console-header,
    .strata-ticker-bar,
    .editorial-header,
    .minimal-tailor-bar,
    .marine-nav,
    .med-nav,
    .apex-nav,
    .coffee-nav,
    .hvac-nav,
    .titan-nav,
    .main-verde-nav,
    .header-main-nav,
    .header-top-bar,
    .footer-bottom,
    .footer-bottom-bar,
    .footer-compliance-strip,
    .dubai-compliance-strip,
    .enviro-compliance-strip,
    .rehab-compliance-strip,
    .titan-cert-strip,
    .law-cert-strip,
    .marine-compliance-strip,
    .clinical-compliance-strip,
    .strata-cert-strip,
    .nordic-cert-strip,
    .spa-provenance-strip,
    .monarch-telemetry-strip,
    .maid-eco-strip,
    .solar-yield-strip,
    .tire-spec-strip,
    .footer-regulatory-container,
    .footer-guarantee-strip,
    .auto-hero,
    .car-hero,
    .const-hero,
    .enviro-hero,
    .limo-hero,
    .maid-hero,
    .mold-hero,
    .notary-hero,
    .plumb-hero,
    .rehab-hero,
    .spa-hero,
    .auto-footer,
    .car-footer,
    .const-footer,
    .enviro-footer,
    .limo-footer,
    .maid-footer,
    .mold-footer,
    .notary-footer,
    .rehab-footer,
    .spa-mega-footer,
    .pillars-section,
    .process-section,
    .quiz-section,
    .origin-section,
    .heritage-section,
    .geothermal-section,
    .dispatch-section,
    .section-longevity,
    .section-concierge,
    .section-cta,
    .section-palm,
    .section-complications,
    .section-partners,
    .section-strategies,
    .sustain-section,
    .nexus-header,
    .store-header,
    .roof-header-wrap,
    .rehab-header-wrap,
    .notary-nav-wrap,
    .plumb-nav-wrap,
    .auto-nav-wrap,
    .const-nav-wrap,
    .enviro-nav-wrap,
    .limo-nav-wrap,
    .mold-nav-wrap,
    .tire-dual-header,
    .roof-nav,
    section > .container,
    section > [class*="-container"],
    section > [class*="-wrap"] {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: var(--adv-gutter-tablet) !important;
        padding-right: var(--adv-gutter-tablet) !important;
        box-sizing: border-box !important;
    }

    /* Floating pill headers at tablet */
    .peds-pill,
    .solar-pill,
    .car-floating-nav,
    .spa-floating-nav,
    .maid-floating-nav,
    .pill-header {
        width: calc(100% - 2.5rem) !important;
        max-width: calc(100% - 2.5rem) !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* 4-column grids collapse to 2 columns on tablet */
    .footer-grid,
    .footer-main-grid,
    .nordic-footer-grid,
    .specs-grid,
    .faculty-grid,
    .surgeons-grid,
    .attorneys-grid,
    .pricing-grid,
    .doors-grid,
    .origin-grid,
    .grid-4,
    [class*="-grid-4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    /* Split hero columns adjust on tablet */
    .hero,
    .hero-grid,
    .hero-section {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }

    /* Left-Rail Vertical Sidebar sites on tablet/mobile */
    .auto-sidebar-rail,
    .vertical-sidebar {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        border-right: none !important;
        box-shadow: none !important;
    }
    .auto-main-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .main-layout {
        flex-direction: column !important;
    }
}

/* 6. Mobile Responsiveness & Strict Uniform Sizing (<= 768px) */
@media (max-width: 768px) {
    /* Exact same width and side padding for ALL sections, header, and footer */
    .section-wrap,
    .hero,
    .hero-grid,
    .hero-section,
    .site-footer,
    .footer-grid,
    .footer-main-grid,
    .nordic-footer-grid,
    .content-area,
    .calc-container,
    .calc-wrapper,
    .properties-grid,
    .palm-grid,
    .villas-section,
    .dining-section,
    .section-atelier,
    .section-provenance,
    .section-specs,
    .section-collectors,
    .section-treatments,
    .results-section,
    .longevity-grid,
    .section-systems,
    .drone-grid,
    .section-fleet,
    .eng-grid,
    .section-allon4,
    .section-cbct,
    .verdict-section,
    .practice-grid,
    .section-attorneys,
    .section-powerwall,
    .section-desert,
    .section-incentives,
    .section-visa,
    .section-helicopter,
    .section-studio,
    .section-spec-box,
    .menu-section,
    .terroir-grid,
    .greenhouse-section,
    .openers-grid,
    .doors-section,
    .origin-grid,
    .brew-section,
    .craft-section,
    .fittings-section,
    .heritage-grid,
    .corridor-section,
    .auto-nav-container,
    .const-nav-container,
    .enviro-nav-container,
    .notary-nav-container,
    .plumb-nav-container,
    .rehab-nav-container,
    .mold-nav-container,
    .tire-nav-main,
    .governance-strip,
    .fiduciary-top-bar,
    .main-header-row,
    .sanctuary-header,
    .site-nav,
    .console-header,
    .strata-ticker-bar,
    .editorial-header,
    .minimal-tailor-bar,
    .marine-nav,
    .med-nav,
    .apex-nav,
    .coffee-nav,
    .hvac-nav,
    .titan-nav,
    .main-verde-nav,
    .header-main-nav,
    .header-top-bar,
    .footer-bottom,
    .footer-bottom-bar,
    .footer-compliance-strip,
    .dubai-compliance-strip,
    .enviro-compliance-strip,
    .rehab-compliance-strip,
    .titan-cert-strip,
    .law-cert-strip,
    .marine-compliance-strip,
    .clinical-compliance-strip,
    .strata-cert-strip,
    .nordic-cert-strip,
    .spa-provenance-strip,
    .monarch-telemetry-strip,
    .maid-eco-strip,
    .solar-yield-strip,
    .tire-spec-strip,
    .footer-regulatory-container,
    .footer-guarantee-strip,
    .auto-hero,
    .car-hero,
    .const-hero,
    .enviro-hero,
    .limo-hero,
    .maid-hero,
    .mold-hero,
    .notary-hero,
    .plumb-hero,
    .rehab-hero,
    .spa-hero,
    .auto-footer,
    .car-footer,
    .const-footer,
    .enviro-footer,
    .limo-footer,
    .maid-footer,
    .mold-footer,
    .notary-footer,
    .rehab-footer,
    .spa-mega-footer,
    .pillars-section,
    .process-section,
    .quiz-section,
    .origin-section,
    .heritage-section,
    .geothermal-section,
    .dispatch-section,
    .section-longevity,
    .section-concierge,
    .section-cta,
    .section-palm,
    .section-complications,
    .section-partners,
    .section-strategies,
    .sustain-section,
    .nexus-header,
    .store-header,
    .roof-header-wrap,
    .rehab-header-wrap,
    .notary-nav-wrap,
    .plumb-nav-wrap,
    .auto-nav-wrap,
    .const-nav-wrap,
    .enviro-nav-wrap,
    .limo-nav-wrap,
    .mold-nav-wrap,
    .tire-dual-header,
    .roof-nav,
    section > .container,
    section > [class*="-container"],
    section > [class*="-wrap"] {
        padding-left: var(--adv-gutter-mobile) !important;
        padding-right: var(--adv-gutter-mobile) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Floating pill headers at mobile: align cleanly with exact same margin */
    .peds-pill,
    .solar-pill,
    .car-floating-nav,
    .spa-floating-nav,
    .maid-floating-nav,
    .pill-header {
        width: calc(100% - 2rem) !important;
        max-width: calc(100% - 2rem) !important;
        margin-left: 1rem !important;
        margin-right: 1rem !important;
        padding: 0.65rem 1rem !important;
        border-radius: 12px !important;
    }

    /* Hero section top padding adjustment for sticky bars */
    .hero,
    .hero-grid,
    .hero-section,
    [class*="-hero"] {
        padding-top: clamp(80px, 12vh, 120px) !important;
        padding-bottom: 2.5rem !important;
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Responsive Display Typography: Prevent breaking or squishing */
    h1,
    .hero-h1,
    .hero-title,
    .lookbook-title,
    [class*="-h1"],
    [class*="hero-title"] {
        font-size: clamp(1.85rem, 6.5vw, 2.75rem) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em !important;
        word-break: break-word !important;
    }

    h2,
    [class*="-h2"] {
        font-size: clamp(1.4rem, 5vw, 2rem) !important;
        line-height: 1.25 !important;
    }

    /* Collapse ALL multi-column grids to 1 clean column on mobile */
    .services-grid,
    .features-grid,
    .properties-grid,
    .palm-grid,
    .villas-grid,
    .fleet-grid,
    .origin-grid,
    .craft-grid,
    .specs-grid,
    .surgeons-grid,
    .faculty-grid,
    .attorneys-grid,
    .pricing-grid,
    .faq-grid,
    .footer-grid,
    .footer-main-grid,
    .nordic-footer-grid,
    .spec-grid,
    .doors-grid,
    .openers-grid,
    .terroir-grid,
    .visa-cards-grid,
    .arch-grid,
    .strategies-grid,
    .wellness-grid,
    .exp-grid,
    .powerwall-grid,
    .springs-comparison-grid,
    .issue-btn-grid,
    .calc-container,
    .calc-wrapper,
    .booking-widget-wrapper,
    .atelier-card,
    .studio-contact-box {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Hero Action Buttons: Full width & vertical stacking for easy tap (excludes header/nav actions) */
    .hero-actions,
    .hero-btn-group,
    .hero-cta-group,
    .banner-actions,
    .hero-buttons,
    [class*="hero-btn-group"],
    [class*="hero-cta-group"],
    [class*="banner-actions"] {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.75rem !important;
    }

    .hero-actions a,
    .hero-actions button,
    .hero-btn-group a,
    .hero-btn-group button,
    [class*="hero-btn-group"] a,
    [class*="hero-btn-group"] button,
    [class*="hero-cta-group"] a,
    [class*="hero-cta-group"] button {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Header Container Wrapper: standard block width, no side-by-side flex blowout */
    header,
    .site-header,
    .limo-nav-wrap,
    .store-header,
    .plumb-nav-wrap,
    .roof-header-wrap,
    .nexus-header,
    .car-floating-nav,
    .spa-floating-nav,
    .maid-floating-nav,
    .site-nav,
    .sanctuary-header {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* STRICT ONE-LINE MOBILE HEADER NAVIGATION BAR ROW */
    .site-nav,
    .editorial-header,
    .marine-nav,
    .med-nav,
    .pill-header,
    .peds-pill,
    .solar-pill,
    .console-header,
    .sanctuary-header,
    .auto-nav-container,
    .const-nav-container,
    .enviro-nav-container,
    .notary-nav-container,
    .plumb-nav-container,
    .rehab-nav-container,
    .mold-nav-container,
    .tire-nav-main,
    .main-header-row,
    .apex-nav,
    .coffee-nav,
    .hvac-nav,
    .titan-nav,
    .main-verde-nav,
    .header-main-nav,
    .roof-nav,
    .main-store-nav,
    .minimal-tailor-bar,
    .limo-split-header,
    .car-floating-inner,
    .spa-floating-inner,
    .maid-floating-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: auto !important;
        min-height: 50px !important;
        max-height: 64px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }

    .car-floating-nav,
    .spa-floating-nav,
    .maid-floating-nav {
        margin: 0 !important;
        padding: 0 0.5rem !important;
        max-height: 60px !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
    .car-floating-inner,
    .spa-floating-inner,
    .maid-floating-inner {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        padding: 0.35rem 0.75rem !important;
        min-height: 48px !important;
        max-height: 58px !important;
        height: 54px !important;
        box-sizing: border-box !important;
    }

    .limo-footer {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100vw !important;
        width: 100% !important;
        overflow-x: clip !important;
        box-sizing: border-box !important;
    }
    .limo-footer > div {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .limo-footer div[style*="display: flex"],
    .limo-footer div[style*="display:flex"] {
        flex-wrap: wrap !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Brand Logo / Link: Always in one line, no wrapping */
    .brand-link, .brand-box, .brand-miraj, .brand-med, .brand-velos, .brand-oasis,
    .brand-titan, .brand-nexus, .brand-crest, .solar-brand, .peds-brand, .pill-brand,
    .law-logo, .brand-kura, .brand-center-box, .centered-royal-brand, .roof-brand,
    [class*="brand-"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.4rem !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    .brand-link svg, .brand-box svg, .brand-miraj svg, .brand-med svg, .brand-velos svg,
    .brand-oasis svg, .brand-titan svg, .brand-nexus svg, .brand-crest svg, .solar-brand svg,
    .peds-brand svg, .pill-brand svg, .law-logo svg, .royal-crest-svg, .roof-brand svg,
    [class*="brand-"] svg {
        max-width: 34px !important;
        max-height: 34px !important;
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
    }

    .brand-text, .brand-text-block, .brand-name, .brand-title, .brand-logo-text,
    .solar-brand-name, .peds-name, .law-title, .brand-oasis-name, .brand-title-verde,
    .brand-latin, .royal-brand-name, .roof-brand-title, .brand-crest-title,
    [class*="brand-title"], [class*="brand-name"] {
        font-size: clamp(0.82rem, 3.4vw, 1.05rem) !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
        letter-spacing: 0.02em !important;
    }

    .brand-text h2,
    .brand-link h2,
    [class*="brand-"] h2 {
        font-size: clamp(0.82rem, 3.4vw, 1.05rem) !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }

    .brand-arabic, .brand-subtitle, .brand-tagline, .brand-sub-verde, .brand-crest-sub {
        display: none !important;
    }

    /* Header Actions: Strictly horizontal row on right */
    .header-actions,
    .nav-actions,
    .pill-actions,
    .header-actions-wrap,
    .verde-nav-right,
    .store-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.4rem !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }

    /* Hide Header Multi-tier Clutter & Secondary Badges on Mobile */
    .currency-switch-box,
    .currency-btn,
    .nav-escapement-hud,
    .solar-yield-hud,
    .fleet-status-pill,
    .eco-air-pill,
    .curing-hud-pill,
    .quick-res-bar,
    .peds-queue-badge,
    .vhf-dial-link,
    .emergency-desk-phone,
    #mirajPhoneCta,
    .sovereign-strip,
    .fiduciary-strip,
    .header-top-bar,
    .fiduciary-top-bar,
    .temp-status-bar,
    .roof-emergency-bar,
    .tire-dispatch-subbar,
    .strata-ticker-bar,
    .miraj-telemetry-strip,
    .marine-telemetry-strip,
    .apex-dispatch-ticker,
    .auto-ticker-bar,
    .car-ticker-bar,
    .const-ticker-bar,
    .enviro-ticker-bar,
    .limo-ticker-bar,
    .maid-ticker-bar,
    .mold-ticker-bar,
    .notary-ticker-bar,
    .plumb-ticker-bar,
    .rehab-ticker-bar,
    .roast-ticker-bar,
    .solar-ticker-strip,
    .spa-ticker-bar,
    .harvest-ticker,
    .governance-strip,
    .shipping-announcement-bar,
    [class*="-ticker-bar"],
    [class*="-telemetry-strip"],
    [class*="-dispatch-ticker"],
    [class*="-emergency-bar"] {
        display: none !important;
    }

    /* Hide desktop CTA buttons and badges inside header on mobile to ensure strictly 1 line */
    .cart-icon-btn,
    .btn-plumb-primary,
    .btn-plumb-secondary,
    .btn-ironwood-primary,
    .btn-rehab-cta,
    .btn-rehab-primary,
    .btn-prestige-cta,
    .btn-notary-primary,
    .btn-mold-primary,
    .btn-enviro-cta,
    .btn-solar-cta,
    .btn-car-primary,
    .btn-spa-primary,
    .btn-maid-primary,
    .btn-limo-primary,
    .btn-portal,
    .btn-gold-miraj,
    .btn-gold,
    .btn-law-primary,
    .btn-dispatch-titan,
    .btn-dev-cta,
    .btn-gold-oasis,
    .btn-oasis-outline,
    .btn-table-gold,
    .btn-cockpit,
    .btn-med-cta,
    .roof-dispatch-btn,
    .btn-dispatch,
    .btn-call-apex,
    .btn-subscribe-cta,
    .btn-join-queue,
    .solar-cta,
    .pill-cta,
    .header-actions > .btn-portal,
    .header-actions > a[class*="btn-"],
    .nav-actions > a[class*="btn-"],
    header > div a[class*="btn-"]:not([class*="toggle"]):not([class*="mobile"]):not([class*="menu"]):not([class*="atelier"]),
    header > div button[class*="btn-"]:not([class*="toggle"]):not([class*="mobile"]):not([class*="menu"]):not([class*="atelier"]):not([id*="Mobile"]):not([id*="mobile"]),
    header nav a[class*="btn-"]:not([class*="toggle"]):not([class*="mobile"]):not([class*="menu"]),
    .plumb-nav-container a[class*="btn-"]:not([class*="toggle"]):not([class*="mobile"]),
    .car-floating-inner a[class*="btn-"]:not([class*="toggle"]):not([class*="mobile"]),
    .spa-floating-inner a[class*="btn-"]:not([class*="toggle"]):not([class*="mobile"]),
    .maid-floating-inner a[class*="btn-"]:not([class*="toggle"]):not([class*="mobile"]),
    .limo-split-header a[class*="btn-"]:not([class*="toggle"]):not([class*="mobile"]),
    .site-nav > a[class*="btn-"],
    .header-main-nav > a[class*="btn-"],
    .sanctuary-header a[class*="btn-"]:not([class*="toggle"]) {
        display: none !important;
    }

    /* Stats and metrics bars: 2 columns on mobile with minmax(0, 1fr) */
    .hero-metrics,
    .hero-stats-row,
    .hero-stats-bar,
    .stats-strip,
    [class*="-metrics"],
    [class*="-stats-row"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 1rem 0.75rem !important;
    }

    .hero-stat-item {
        padding: 0.5rem 0.25rem !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .hero-stat-item:nth-child(2n) {
        border-right: none !important;
    }

    .hero-stat-num {
        font-size: clamp(1.3rem, 4.5vw, 1.8rem) !important;
    }

    /* Terroir, Provenance, and Cert Strips */
    .footer-terroir-strip,
    .terroir-badge,
    [class*="-terroir-strip"],
    [class*="-provenance-strip"] {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Inline grid templates that exceed mobile width */
    form div[style*="grid-template-columns: 1fr 1fr"],
    form div[style*="grid-template-columns:1fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns:1fr 1fr"],
    div[style*="grid-template-columns: 1.15fr 0.85fr"] {
        grid-template-columns: 1fr !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        gap: 1.25rem !important;
        box-sizing: border-box !important;
    }

    input, textarea, select {
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }

    /* Footer strips & compliance copyright bars: Vertical stack & centered */
    .footer-bottom,
    .footer-bottom-bar,
    .footer-compliance-strip,
    .dubai-compliance-strip,
    .enviro-compliance-strip,
    .rehab-compliance-strip,
    .titan-cert-strip,
    .law-cert-strip,
    .marine-compliance-strip,
    .clinical-compliance-strip,
    .strata-cert-strip,
    .nordic-cert-strip,
    .spa-provenance-strip,
    .monarch-telemetry-strip,
    .maid-eco-strip,
    .solar-yield-strip,
    .tire-spec-strip,
    .footer-regulatory-container,
    .footer-guarantee-strip {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.85rem !important;
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    /* Ticker bars and status pills: wrap cleanly */
    [class*="-ticker-bar"],
    [class*="-telemetry-strip"],
    [class*="-emergency-bar"] {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* 7. Extra-Small Mobile Screens (<= 480px) */
@media (max-width: 480px) {
    /* Agency Showcase Sticky Top Bar */
    .adv-top-bar {
        padding: 0 0.5rem !important;
        height: 42px !important;
    }
    .adv-back-pill span {
        display: none !important;
    }
    .adv-concept-select {
        max-width: 130px !important;
        font-size: 10px !important;
        padding: 0.2rem 0.4rem !important;
    }
    .adv-theme-toggle-btn .adv-theme-label {
        display: none !important;
    }

    /* Stats collapse to 1 column on very narrow devices if cramped */
    .hero-metrics,
    .hero-stats-row {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* =============================================================================
   UNIVERSAL MOBILE NAVIGATION DRAWER ARCHITECTURE
   Styles for all existing and dynamically generated mobile navigation menus
   ============================================================================= */
.mobile-drawer,
.apex-mobile-drawer,
.coffee-mobile-drawer,
.hvac-mobile-drawer,
.peds-mobile-drawer,
.solar-mobile-drawer,
.prestige-mobile-drawer,
.tire-mobile-drawer,
.maid-mobile-drawer,
.spa-mobile-drawer,
.verde-mobile-drawer,
.monarch-mobile-drawer,
.strata-mobile-drawer,
.titan-mobile-drawer,
.law-mobile-drawer,
.miraj-mobile-drawer,
.marine-mobile-drawer,
.clinical-mobile-drawer,
.roof-mobile-drawer,
.enviro-mobile-drawer,
.rehab-mobile-drawer,
.mold-mobile-drawer,
.limo-mobile-drawer,
.oasis-mobile-drawer,
.kura-mobile-drawer,
.tailor-mobile-drawer,
.plumb-mobile-drawer,
.aura-mobile-drawer,
.nordic-mobile-drawer,
.auto-mobile-drawer,
.mobile-nav-drawer,
.pill-mobile-dropdown,
[class*="-mobile-drawer"],
[class*="mobile-nav-drawer"],
[id*="MobileDrawer"] {
    display: none !important;
    position: fixed !important;
    top: 52px !important;
    left: 1rem !important;
    right: 1rem !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    background: rgba(14, 18, 26, 0.98) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    z-index: 99998 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85) !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    max-height: calc(100vh - 70px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
}

/* Light Theme support for Universal Mobile Drawers */
body.light-theme .mobile-drawer,
body.light-theme [class*="-mobile-drawer"],
body.light-theme [class*="mobile-nav-drawer"],
body.light-theme .pill-mobile-dropdown,
body.light-theme [id*="MobileDrawer"],
body.light-theme .drawer-panel {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18) !important;
}

/* When drawer is open or active */
.mobile-drawer.open,
.mobile-drawer.active,
.pill-mobile-dropdown.open,
.pill-mobile-dropdown.active,
.tailor-fullscreen-curtain.open,
.tailor-fullscreen-curtain.active,
.vertical-sidebar.open,
.vertical-sidebar.active,
[class*="-mobile-drawer"].open,
[class*="-mobile-drawer"].active,
[class*="mobile-nav-drawer"].open,
[class*="mobile-nav-drawer"].active,
[id*="MobileDrawer"].open,
[id*="MobileDrawer"].active,
.drawer-overlay.open,
.drawer-overlay.active {
    display: flex !important;
    animation: advDrawerSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes advDrawerSlide {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Drawer links styling: Keep icon and menu item text close together with uniform gap */
.mobile-drawer a:not([class*="btn-"]):not([class*="button"]),
.pill-mobile-dropdown a:not([class*="btn-"]):not([class*="button"]),
.tailor-fullscreen-curtain a:not([class*="btn-"]):not([class*="button"]),
.drawer-panel a:not([class*="btn-"]):not([class*="button"]),
[class*="-mobile-drawer"] a:not([class*="btn-"]):not([class*="button"]),
[class*="-mobile-drawer"] li a:not([class*="btn-"]):not([class*="button"]),
[class*="mobile-nav-drawer"] a:not([class*="btn-"]):not([class*="button"]),
[class*="-mobile-links"] a:not([class*="btn-"]):not([class*="button"]),
[class*="-mobile-links"] li a:not([class*="btn-"]):not([class*="button"]),
[class*="-mobile-nav"] a:not([class*="btn-"]):not([class*="button"]),
[class*="-mobile-nav"] li a:not([class*="btn-"]):not([class*="button"]),
[id*="MobileDrawer"] a:not([class*="btn-"]):not([class*="button"]),
[id*="MobileDrawer"] li a:not([class*="btn-"]):not([class*="button"]),
.drawer-links a:not([class*="btn-"]):not([class*="button"]) {
    color: #f3f4f6 !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    padding: 0.72rem 0.6rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.85rem !important;
    transition: color 0.2s, background 0.2s !important;
    border-radius: 6px !important;
    text-align: left !important;
}

body.light-theme .mobile-drawer a:not([class*="btn-"]):not([class*="button"]),
body.light-theme .pill-mobile-dropdown a:not([class*="btn-"]):not([class*="button"]),
body.light-theme .tailor-fullscreen-curtain a:not([class*="btn-"]):not([class*="button"]),
body.light-theme .drawer-panel a:not([class*="btn-"]):not([class*="button"]),
body.light-theme [class*="-mobile-drawer"] a:not([class*="btn-"]):not([class*="button"]),
body.light-theme [class*="-mobile-drawer"] li a:not([class*="btn-"]):not([class*="button"]),
body.light-theme [class*="mobile-nav-drawer"] a:not([class*="btn-"]):not([class*="button"]),
body.light-theme [class*="-mobile-links"] a:not([class*="btn-"]):not([class*="button"]),
body.light-theme [class*="-mobile-links"] li a:not([class*="btn-"]):not([class*="button"]),
body.light-theme [class*="-mobile-nav"] a:not([class*="btn-"]):not([class*="button"]),
body.light-theme [class*="-mobile-nav"] li a:not([class*="btn-"]):not([class*="button"]),
body.light-theme [id*="MobileDrawer"] a:not([class*="btn-"]):not([class*="button"]),
body.light-theme [id*="MobileDrawer"] li a:not([class*="btn-"]):not([class*="button"]),
body.light-theme .drawer-links a:not([class*="btn-"]):not([class*="button"]) {
    color: #0f172a !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.mobile-drawer a:not([class*="btn-"]):hover,
.pill-mobile-dropdown a:not([class*="btn-"]):hover,
.tailor-fullscreen-curtain a:not([class*="btn-"]):hover,
.drawer-panel a:not([class*="btn-"]):hover,
[class*="-mobile-drawer"] a:not([class*="btn-"]):hover,
[class*="mobile-nav-drawer"] a:not([class*="btn-"]):hover,
[class*="-mobile-links"] a:not([class*="btn-"]):hover,
[class*="-mobile-nav"] a:not([class*="btn-"]):hover,
[id*="MobileDrawer"] a:not([class*="btn-"]):hover {
    color: #f58e01 !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

body.light-theme .mobile-drawer a:not([class*="btn-"]):hover,
body.light-theme .pill-mobile-dropdown a:not([class*="btn-"]):hover,
body.light-theme .tailor-fullscreen-curtain a:not([class*="btn-"]):hover,
body.light-theme .drawer-panel a:not([class*="btn-"]):hover,
body.light-theme [class*="-mobile-drawer"] a:not([class*="btn-"]):hover,
body.light-theme [class*="mobile-nav-drawer"] a:not([class*="btn-"]):hover,
body.light-theme [class*="-mobile-links"] a:not([class*="btn-"]):hover,
body.light-theme [class*="-mobile-nav"] a:not([class*="btn-"]):hover,
body.light-theme [id*="MobileDrawer"] a:not([class*="btn-"]):hover {
    color: #d97706 !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

/* Mobile Drawer Link Icons: Unified alignment and tight proximity to menu text */
.mobile-drawer a:not([class*="btn-"]) i,
.mobile-drawer a:not([class*="btn-"]) svg,
.pill-mobile-dropdown a:not([class*="btn-"]) i,
.pill-mobile-dropdown a:not([class*="btn-"]) svg,
.tailor-fullscreen-curtain a:not([class*="btn-"]) i,
.tailor-fullscreen-curtain a:not([class*="btn-"]) svg,
.drawer-panel a:not([class*="btn-"]) i,
.drawer-panel a:not([class*="btn-"]) svg,
[class*="-mobile-drawer"] a:not([class*="btn-"]) i,
[class*="-mobile-drawer"] a:not([class*="btn-"]) svg,
[class*="-mobile-drawer"] li a:not([class*="btn-"]) i,
[class*="-mobile-drawer"] li a:not([class*="btn-"]) svg,
[class*="mobile-nav-drawer"] a:not([class*="btn-"]) i,
[class*="mobile-nav-drawer"] a:not([class*="btn-"]) svg,
[class*="-mobile-links"] a:not([class*="btn-"]) i,
[class*="-mobile-links"] a:not([class*="btn-"]) svg,
[class*="-mobile-links"] li a:not([class*="btn-"]) i,
[class*="-mobile-links"] li a:not([class*="btn-"]) svg,
[class*="-mobile-nav"] a:not([class*="btn-"]) i,
[class*="-mobile-nav"] a:not([class*="btn-"]) svg,
[class*="-mobile-nav"] li a:not([class*="btn-"]) i,
[class*="-mobile-nav"] li a:not([class*="btn-"]) svg,
[id*="MobileDrawer"] a:not([class*="btn-"]) i,
[id*="MobileDrawer"] a:not([class*="btn-"]) svg,
[id*="MobileDrawer"] li a:not([class*="btn-"]) i,
[id*="MobileDrawer"] li a:not([class*="btn-"]) svg,
.drawer-links a:not([class*="btn-"]) i,
.drawer-links a:not([class*="btn-"]) svg {
    order: -1 !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    font-size: 1rem !important;
}

/* Ensure any spans or text wrappers inside drawer links do not expand unnecessarily */
.mobile-drawer a:not([class*="btn-"]) span,
.pill-mobile-dropdown a:not([class*="btn-"]) span,
.tailor-fullscreen-curtain a:not([class*="btn-"]) span,
.drawer-panel a:not([class*="btn-"]) span,
[class*="-mobile-drawer"] a:not([class*="btn-"]) span,
[class*="mobile-nav-drawer"] a:not([class*="btn-"]) span,
[class*="-mobile-links"] a:not([class*="btn-"]) span,
[class*="-mobile-nav"] a:not([class*="btn-"]) span,
[id*="MobileDrawer"] a:not([class*="btn-"]) span,
.drawer-links a:not([class*="btn-"]) span {
    flex-grow: 0 !important;
    text-align: left !important;
}

/* Universal Mobile Toggle Button Base Styles */
.mobile-nav-toggle,
.mobile-toggle-btn,
.menu-toggle,
.menu-drawer-btn,
.pill-mobile-btn,
.rehab-menu-btn,
.roof-menu-btn,
.btn-atelier-index,
[class*="mobile-toggle"],
[class*="hamburger-btn"],
[id*="MobileToggle"],
[id*="MobileBtn"] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important;
    font-size: 1.15rem !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

body.light-theme .mobile-nav-toggle,
body.light-theme .mobile-toggle-btn,
body.light-theme .menu-toggle,
body.light-theme .menu-drawer-btn,
body.light-theme .pill-mobile-btn,
body.light-theme .rehab-menu-btn,
body.light-theme .roof-menu-btn,
body.light-theme .btn-atelier-index,
body.light-theme [class*="mobile-toggle"],
body.light-theme [class*="hamburger-btn"],
body.light-theme [id*="MobileToggle"],
body.light-theme [id*="MobileBtn"] {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #0f172a !important;
}

.mobile-nav-toggle:hover,
.mobile-toggle-btn:hover,
.menu-toggle:hover,
.menu-drawer-btn:hover,
.pill-mobile-btn:hover,
.rehab-menu-btn:hover,
.roof-menu-btn:hover,
.btn-atelier-index:hover {
    background: #f58e01 !important;
    color: #0f172a !important;
    border-color: #f58e01 !important;
}