/*
Theme Name: 2A Construction
Theme URI: https://2aconstruction.com
Author: 2A Construction LLC
Author URI: https://2aconstruction.com
Description: Custom WordPress theme for 2A Construction LLC — licensed general contractor serving Greater Seattle. Mirrors the Next.js marketing site (roofing, siding, home additions, kitchen & bath remodels). Orange (#eb5d1d) accent on a clean dark/light system with Outfit + DM Sans + Playfair Display typography.
Version: 1.3.9
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twoa
Tags: business, contractor, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   DESIGN TOKENS — ported from Next.js src/app/globals.css
   ========================================================= */
:root {
    /* Brand palette */
    --twoa-orange:        #eb5d1d;
    --twoa-orange-dark:   #c94a10;   /* WCAG AA on white */
    --twoa-orange-light:  #ff7a45;
    /* Lane 2 #1 — bump orange-glow alpha 0.10 → 0.15 (Vercel parity). */
    --twoa-orange-glow:        rgba(235, 93, 29, 0.15);
    /* Lane 2 #6 — strong orange-glow variant (Vercel parity). */
    --twoa-orange-glow-strong: rgba(235, 93, 29, 0.30);

    /* Neutrals (light defaults) */
    --twoa-dark:          #343434;
    --twoa-dark-deep:     #1a1a1a;
    --twoa-dark-mid:      #2a2a2a;
    --twoa-dark-soft:     #404040;
    /* Lane 2 #9 — surface dark token for FinancingCTA/Bottom contrast. */
    --twoa-surface-dark:  #1e1e1e;

    --twoa-white:         #ffffff;
    --twoa-warm:          #f8f5f2;
    --twoa-gray:          #ededed;
    /* Lane 2 #7, #8 — cream + warm-gray tokens (used by select ports). */
    --twoa-cream:         #faf9f7;
    --twoa-gray-warm:     #f5f3f0;

    /* Semantic surfaces & text (light) */
    --color-bg-primary:        #ffffff;
    --color-bg-secondary:      #f8f5f2;
    --color-bg-tertiary:       #ededed;
    --color-bg-card:           #ffffff;
    --color-bg-card-elevated:  #ffffff;
    --color-text-primary:      #1a1a1a;
    --color-text-secondary:    #343434;
    --color-text-muted:        #4a4a4a;
    --color-text-mid:          #4a4a4a;
    /* Lane 2 #2 — Vercel parity #666666. */
    --color-text-light:        #666666;
    --color-border:            #e2dedb;
    --color-border-subtle:     #e8e4e1;

    /* Lane 2 #5 — Hero token block (Vercel globals.css parity). */
    --hero-bg:               #f5f5f5;
    --hero-gradient:         linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%);
    --hero-grid-color:       rgba(26, 26, 26, 0.05);
    --hero-badge-bg:         rgba(235, 93, 29, 0.10);
    --hero-badge-border:     rgba(235, 93, 29, 0.20);
    --hero-heading-color:    var(--twoa-dark);
    --hero-subheading-color: rgba(52, 52, 52, 0.70);
    --hero-trust-text:       rgba(52, 52, 52, 0.60);
    --hero-scroll-text:      rgba(74, 74, 74, 0.85);
    --hero-scroll-line:      rgba(74, 74, 74, 0.50);

    /* Lane 2 #10 — gap tokens (Vercel parity). */
    --gap-xs: 0.5rem;
    --gap-sm: 0.75rem;
    --gap-md: clamp(1rem,   1.75vw, 2.5rem);
    --gap-lg: clamp(1.5rem, 2.5vw,  4rem);
    --gap-xl: clamp(2rem,   3.5vw,  5.5rem);

    /* Lane 2 #11 — shadow tokens (Vercel parity). */
    --shadow-s:         0 2px 8px  rgba(0,0,0,0.06);
    --shadow-m:         0 6px 24px rgba(0,0,0,0.08);
    --shadow-l:         0 16px 48px rgba(0,0,0,0.12);
    --shadow-orange-sm: 0 4px 16px rgba(235, 93, 29, 0.30);
    --shadow-orange-md: 0 6px 24px rgba(235, 93, 29, 0.40);
    --shadow-orange-lg: 0 8px 32px rgba(235, 93, 29, 0.40);

    /* Fonts */
    --font-display: "Outfit", system-ui, Arial, sans-serif;
    --font-body:    "DM Sans", system-ui, Arial, sans-serif;
    --font-serif:   "Playfair Display", Georgia, "Times New Roman", serif;

    /* Easings */
    --ease-out-cubic:     cubic-bezier(0.33, 1, 0.68, 1);
    --ease-in-out-cubic:  cubic-bezier(0.65, 0, 0.35, 1);
    --ease-out-back:      cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-quart:     cubic-bezier(0.25, 1, 0.5, 1);
    /* Lane 2 #12 — extra ease tokens (Vercel parity). */
    --ease-in-out-sine:   cubic-bezier(0.45, 0.05, 0.55, 0.95);
    --ease-out-expo:      cubic-bezier(0.16, 1, 0.30, 1);

    /* Fluid type scale (clamp-based) — tuned 2026-05-20 so values at the
       1440 reference width match the Vercel computed sizes:
         body 16px, section-label 14px, btn 14.6px, h2 51.2px. */
    --font-size-hero:     clamp(2.25rem, 4vw + 1rem, 6rem);
    --font-size-display:  clamp(2rem,   3.5vw + 0.75rem, 5rem);
    --font-size-h1:       clamp(1.875rem, 3vw + 0.5rem, 4rem);
    /* Clamp targets 24px @ 375px AND 51.2px @ 1440 to match Vercel text-5xl. */
    --font-size-h2:       clamp(1.5rem, 0.9rem + 2.55vw, 3.5rem);
    --font-size-h3:       clamp(1.25rem, 2vw + 0.25rem, 2.5rem);
    --font-size-h4:       clamp(1.125rem, 1.5vw + 0.125rem, 2rem);
    /* Vercel parity: clamp(1.0625rem, 1.25vw + 0.25rem, 1.5rem) — matches hero subtitles + lead paragraphs sitewide. */
    --font-size-body-lg:  clamp(1.0625rem, 1.25vw + 0.25rem, 1.5rem);
    --font-size-body:     clamp(0.9375rem, 0.2vw + 0.875rem, 1.0625rem);
    --font-size-body-sm:  clamp(0.875rem, 0.15vw + 0.8125rem, 1rem);
    --font-size-label:    clamp(0.75rem, 0.3vw + 0.625rem, 0.9375rem);
    --font-size-caption:  clamp(0.75rem, 0.2vw + 0.6875rem, 0.875rem);

    /* Fluid spacing */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  clamp(0.75rem, 1.25vw, 2rem);
    --space-lg:  clamp(1rem,    1.75vw, 3rem);
    --space-xl:  clamp(1.5rem,  2.5vw, 4rem);
    --space-2xl: clamp(2rem,    3.5vw, 5.5rem);
    --space-3xl: clamp(2.5rem,  4.5vw, 7rem);

    --section-padding-sm: clamp(2rem, 4vh, 5rem);
    --section-padding:    clamp(3rem, 6vh, 8rem);
    --section-padding-lg: clamp(4rem, 8vh, 10rem);
    --section-padding-xl: clamp(5rem, 10vh, 12rem);

    --container-padding: clamp(1rem, 3vw, 4rem);
    --header-height:     clamp(60px, 6vh, 100px);

    /* Radii */
    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-2xl: 24px;

    /* Lane 2 #16 — Full Plyr theme tokens ported from Vercel plyr-theme.css. */
    --plyr-color-main:                       #eb5d1d;
    --plyr-video-control-color:              #ffffff;
    --plyr-video-control-color-hover:        #ffffff;
    --plyr-video-control-background-hover:   rgba(235, 93, 29, 0.85);
    --plyr-video-controls-background:        linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.85));
    --plyr-control-icon-size:                18px;
    --plyr-control-spacing:                  12px;
    --plyr-control-radius:                   8px;
    --plyr-range-track-height:               5px;
    --plyr-range-thumb-height:               14px;
    --plyr-range-thumb-background:           #ffffff;
    --plyr-range-thumb-shadow:               0 1px 2px rgba(0,0,0,0.4), 0 0 0 2px rgba(235, 93, 29, 0.4);
    --plyr-range-fill-background:            #eb5d1d;
    --plyr-video-progress-buffered-background: rgba(255,255,255,0.25);
    --plyr-video-control-background:         rgba(0, 0, 0, 0.45);
    --plyr-menu-background:                  rgba(20, 20, 20, 0.96);
    --plyr-menu-color:                       #ffffff;
}

/* Dark Mode — match either <html class="dark"> (Tailwind darkMode:'class' style)
   or <body class="dark"> so we work whichever node hosts the theme class. */
html.dark, body.dark, .dark {
    --color-bg-primary:        #1a1a1a;
    --color-bg-secondary:      #262626;
    --color-bg-tertiary:       #343434;
    /* Lane 2 #4 — bump card 2a → 2d for 3-shade page/card/elevated contrast. */
    --color-bg-card:           #2d2d2d;
    --color-bg-card-elevated:  #333333;
    --color-text-primary:      #ededed;
    --color-text-secondary:    #ffffff;
    --color-text-muted:        #b0b0b0;
    --color-text-mid:          #b0b0b0;
    /* Lane 2 #3 — bump dark text-light from #888 → #b0b0b0 (legibility, parity intent). */
    --color-text-light:        #b0b0b0;
    --color-border:            #404040;
    --color-border-subtle:     #3a3a3a;

    /* Lane 2 #5 — Hero token block (dark overrides). */
    --hero-bg:               var(--twoa-dark-deep);
    --hero-gradient:         linear-gradient(180deg, var(--twoa-dark-deep) 0%, #000 100%);
    --hero-grid-color:       rgba(237, 237, 237, 0.05);
    --hero-badge-bg:         rgba(235, 93, 29, 0.15);
    --hero-badge-border:     rgba(235, 93, 29, 0.30);
    --hero-heading-color:    #ffffff;
    --hero-subheading-color: rgba(255, 255, 255, 0.70);
    --hero-trust-text:       rgba(255, 255, 255, 0.60);
    --hero-scroll-text:      rgba(237, 237, 237, 0.85);
    --hero-scroll-line:      rgba(237, 237, 237, 0.50);
}

/* System-preference dark when no explicit class wins (mirrors the ThemeContext
   "Auto" mode in the Next.js source). */
@media (prefers-color-scheme: dark) {
    html:not(.light):not(.dark):not([data-theme="light"]) {
        --color-bg-primary:        #1a1a1a;
        --color-bg-secondary:      #262626;
        --color-bg-tertiary:       #343434;
        /* Lane 2 #4 — bump card 2a → 2d (mirrors .dark block). */
        --color-bg-card:           #2d2d2d;
        --color-bg-card-elevated:  #333333;
        --color-text-primary:      #ededed;
        --color-text-secondary:    #ffffff;
        --color-text-muted:        #b0b0b0;
        --color-text-mid:          #b0b0b0;
        /* Lane 2 #3 — dark text-light parity. */
        --color-text-light:        #b0b0b0;
        --color-border:            #404040;
        --color-border-subtle:     #3a3a3a;

        /* Lane 2 #5 — Hero tokens (dark scheme parity). */
        --hero-bg:               var(--twoa-dark-deep);
        --hero-gradient:         linear-gradient(180deg, var(--twoa-dark-deep) 0%, #000 100%);
        --hero-grid-color:       rgba(237, 237, 237, 0.05);
        --hero-badge-bg:         rgba(235, 93, 29, 0.15);
        --hero-badge-border:     rgba(235, 93, 29, 0.30);
        --hero-heading-color:    #ffffff;
        --hero-subheading-color: rgba(255, 255, 255, 0.70);
        --hero-trust-text:       rgba(255, 255, 255, 0.60);
        --hero-scroll-text:      rgba(237, 237, 237, 0.85);
        --hero-scroll-line:      rgba(237, 237, 237, 0.50);
    }
}

/* =========================================================
   BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* Offset in-page anchors so they don't land under the sticky topbar+header
       stack. ~32px topbar + clamp(60-80) header = ~92-112px reserved. */
    scroll-padding-top: clamp(92px, 11vh, 112px);
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-text-primary);
    margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

a {
    color: var(--twoa-orange-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { color: var(--twoa-orange); }

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

button { font-family: inherit; cursor: pointer; }

/* Accessibility helpers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--twoa-orange);
    color: #fff;
    padding: 0.5rem 1rem;
    /* Lane 2 #40 — rounded-lg parity (was 6px). */
    border-radius: 8px;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Visible focus ring for keyboard users (mouse focus stays subtle). */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--twoa-orange);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Scroll-reveal — IntersectionObserver adds .is-revealed.
   Applies to any element with [data-reveal]. Disabled by prefers-reduced-motion
   via JS (everything gets .is-revealed immediately). */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease-out-cubic), transform 0.7s var(--ease-out-cubic);
    will-change: opacity, transform;
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

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

/* =========================================================
   LAYOUT — container + sections
   ========================================================= */
.twoa-container {
    width: 100%;
    max-width: 1280px;            /* Tailwind 'max-w-7xl' equivalent */
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

@media (min-width: 1536px) { .twoa-container { max-width: 1400px; } }
@media (min-width: 1920px) { .twoa-container { max-width: 1700px; } }
/* Lane 2 #13 — 4K container scaling (Vercel parity). */
@media (min-width: 2560px) { .twoa-container { max-width: 2200px; } }
@media (min-width: 3840px) { .twoa-container { max-width: 2800px; } }

/* Centered narrow heading column — mirrors Vercel's max-w-3xl mx-auto pattern
   used to keep H2 + subtitle paragraphs from going line-wide on big screens.
   48rem (~768px) gives long titles room without becoming line-wide at 1440. */
.heading-center {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.heading-center .section-subtitle { margin-left: auto; margin-right: auto; }

.section-py    { padding-top: clamp(3rem, 6vh, 8rem);   padding-bottom: clamp(3rem, 6vh, 8rem); }
.section-py-sm { padding-top: clamp(2rem, 4vh, 5rem);   padding-bottom: clamp(2rem, 4vh, 5rem); }
.section-py-lg { padding-top: clamp(4rem, 8vh, 10rem);  padding-bottom: clamp(4rem, 8vh, 10rem); }

/* =========================================================
   TYPOGRAPHY COMPONENTS
   ========================================================= */
.section-label {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--twoa-orange-dark);
    font-size: var(--font-size-label);
    letter-spacing: 0.15em;
    margin-bottom: clamp(0.5rem, 1.5vh, 1.25rem);
    display: inline-block;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-text-primary);
    /* Vercel --font-size-h2 hand-tune (~51.2px @1440 vs prior ~62.6px). */
    font-size: clamp(1.5rem, 0.9rem + 2.55vw, 3.5rem);
    line-height: 1.15;
    margin-bottom: clamp(0.75rem, 2vh, 2rem);
}

.section-subtitle {
    color: var(--color-text-muted);
    font-size: clamp(0.9375rem, 1vw + 0.25rem, 1.5rem);
    line-height: 1.7;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all 0.3s ease;
    border-radius: 9999px;
    font-size: clamp(0.8125rem, 0.875vw + 0.125rem, 1.25rem);
    padding: clamp(0.75rem, 1.25vh, 1.5rem) clamp(1.5rem, 2.5vw, 3.5rem);
    border: none;
    text-decoration: none;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--twoa-orange-dark);
    color: #fff;
    box-shadow: 0 4px 16px rgba(235, 93, 29, 0.25);
}
.btn-primary:hover {
    color: #fff;
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(235, 93, 29, 0.35);
}

.btn-outline {
    background: transparent;
    color: var(--color-text-primary);
    border: 2px solid rgba(26, 26, 26, 0.4);
}
.btn-outline:hover {
    background: rgba(26, 26, 26, 0.06);
    color: var(--color-text-primary);
}

.dark .btn-outline { color: #fff; border-color: rgba(255,255,255,0.4); }
.dark .btn-outline:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* Secondary on-brand CTA: orange ghost that fills with brand orange on hover.
   Used for the "Show More/Less" (before/after) and "Check for more Google
   reviews" buttons. Mirrors Vercel .btn-outline-orange in globals.css. */
.btn-outline-orange {
    position: relative;
    background: transparent;
    color: var(--twoa-orange-dark, #c94a10);
    border: 2px solid rgba(235, 93, 29, 0.40);
    transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.btn-outline-orange:hover,
.btn-outline-orange:focus-visible {
    color: #fff;
    background-color: var(--twoa-orange, #eb5d1d);
    border-color: var(--twoa-orange, #eb5d1d);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(235, 93, 29, 0.30);
}
.btn-outline-orange:active { transform: translateY(0); }
.btn-outline-orange:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(235, 93, 29, 0.25); }
.btn-outline-orange svg {
    width: 1.05em;
    height: 1.05em;
    flex: none;
    transition: transform .3s ease;
}
/* Chevron flips when the toggle is expanded (Show Less state). */
.btn-outline-orange[aria-expanded="true"] .btn-ico-chevron { transform: rotate(180deg); }

.dark .btn-outline-orange { color: var(--twoa-orange-light, #ff7a45); border-color: rgba(235, 93, 29, 0.55); }
.dark .btn-outline-orange:hover,
.dark .btn-outline-orange:focus-visible { color: #fff; background-color: var(--twoa-orange, #eb5d1d); border-color: var(--twoa-orange, #eb5d1d); }

/* =========================================================
   SITE HEADER (TopBar + Header)
   ========================================================= */
/* Sticky stack — topbar pins to viewport top, header pins BELOW the topbar
   (--twoa-topbar-h) so they don't overlap. The combined height also feeds
   `scroll-padding-top` on <html> so in-page anchors clear the chrome. */
:root { --twoa-topbar-h: 32px; }

.topbar {
    background: var(--twoa-dark-deep);
    color: #fff;
    font-size: 0.75rem;
    /* Lane 2 #37 — tracking-wide parity (was 0.02em). */
    letter-spacing: 0.025em;
    padding: 0.5rem 0;
    position: sticky;
    top: 0;
    z-index: 52;
    min-height: var(--twoa-topbar-h);
}
/* Lane 2 #38 — Topbar 3xl bumps (Vercel parity). */
@media (min-width: 1920px) {
    .topbar { padding: 0.75rem 0; font-size: 0.875rem; }
    .topbar svg { width: 16px; height: 16px; }
}
.topbar__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.topbar__contact {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.topbar__contact a {
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    /* Lane 2 #39 — color + transform transition (Vercel parity). */
    transition: color 300ms ease, transform 300ms ease;
}
.topbar__contact a:hover { color: var(--twoa-orange); transform: scale(1.05); }
.topbar__license { color: rgba(255,255,255,0.8); }

.site-header {
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: var(--twoa-topbar-h);   /* sit BELOW the sticky topbar, not behind it */
    z-index: 50;
    transition: box-shadow 0.3s ease;
}
/* Lane 2 #26 — shadow-m token parity. */
.site-header.is-scrolled { box-shadow: var(--shadow-m); }

/* Lane 2 #33 — site logo hover scale + transition. */
.site-brand img {
    transition: transform 0.3s ease;
}
.site-brand:hover img {
    transform: scale(1.05);
}

html.dark .site-header,
body.dark .site-header,
.dark .site-header { background: var(--twoa-dark); }

/* Topbar collapses on very narrow screens (chips wrap and add height) —
   force a slightly taller reserve so the header still doesn't tuck behind. */
@media (max-width: 480px) {
    :root { --twoa-topbar-h: 56px; }
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: clamp(60px, 8vh, 80px);
    gap: 1rem;
}

.site-brand {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
.site-brand img {
    height: clamp(40px, 6vh, 56px);
    width: auto;
    object-fit: contain;
}

.site-nav {
    display: none;
    align-items: center;
    /* Lane 2 #30 — gap-2 Tailwind parity (was 0.25rem). */
    gap: 0.5rem;
}
@media (min-width: 768px) {
    .site-nav { display: flex; }
}

.nav-item { position: relative; }
.nav-item__toggle,
.nav-item > a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    background: transparent;
    border: none;
    /* Vercel parity: nav pill uses rounded-lg, which the 2A tailwind config
       overrides to 16px (not the Tailwind default 8px). */
    border-radius: 16px;
    transition: all 0.2s ease;
    text-decoration: none;
}
.nav-item__toggle:hover,
.nav-item > a:hover {
    color: var(--twoa-orange);
    background: var(--twoa-gray);
}
.dark .nav-item__toggle:hover,
.dark .nav-item > a:hover { background: var(--twoa-dark-deep); }

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    /* Lane 2 #28 — min-width 220 → 200 (Vercel parity). */
    min-width: 200px;
    background: var(--color-bg-primary);
    border-radius: 10px;
    /* Lane 2 #27 — shadow-l token parity. */
    box-shadow: var(--shadow-l);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    /* Lane 2 #29 — transition 0.25s → 0.3s ease (Vercel parity). */
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 60;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.is-open .nav-dropdown {       /* JS click toggle for touch devices */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
html.dark .nav-dropdown,
body.dark .nav-dropdown,
.dark .nav-dropdown { background: var(--twoa-dark-deep); }

.nav-dropdown a {
    display: block;
    padding: 0.625rem 0.875rem;
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-dropdown a:hover {
    color: var(--twoa-orange);
    background: var(--twoa-warm);
}
.dark .nav-dropdown a:hover { background: var(--twoa-dark); }

/* Active-page state (Vercel Header parity: aria-current + .is-active highlight). */
.nav-item.is-active > .nav-item__toggle,
.nav-item.is-active > a,
.nav-dropdown a.is-current,
.mobile-menu a.is-current {
    color: var(--twoa-orange);
    background: rgba(235, 93, 29, 0.10);
}

.header-cta {
    display: none;
    margin-left: 0.75rem;
}
@media (min-width: 768px) { .header-cta { display: inline-flex; } }

.mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: transparent;
    border: none;
    /* Vercel parity: mobile toggle uses rounded-lg = 16px (tailwind override). */
    border-radius: 16px;
    color: var(--color-text-primary);
    transition: background 0.2s ease;
}
.mobile-toggle:hover { background: var(--twoa-gray); }
/* Lane 2 #25 — dark hover bg. */
.dark .mobile-toggle:hover { background: var(--twoa-dark-deep); }
/* Lane 2 #41 — SVG bump 22 → 24 (Vercel parity). */
.mobile-toggle svg { width: 24px; height: 24px; }
@media (min-width: 768px) { .mobile-toggle { display: none; } }

.mobile-menu {
    display: none;
    position: fixed;
    /* Full-height panel from the true viewport top (top:0). The chrome (sticky
       topbar z:52 + header z:50) paints OVER the drawer's empty padding-top
       region; an opaque scroll-padding-top pushes the first item (EXTERIOR /
       Roofing) below the chrome. Because the topbar uses flex-wrap and a
       *min-height* (not a fixed height), its rendered height grows when the
       contact chips wrap at 360–600px — so a fixed `top` calc using
       --twoa-topbar-h underestimates the chrome and tucked the top group behind
       it. A generous full-height spacer clears the worst-case wrapped chrome and
       the list scrolls from the true top (scrollTop:0 shows EXTERIOR/Roofing).
       Math: topbar (≤480 min 56px, wrapped ~80–96px) + header clamp(60-80px)
       + 24px breathing room → clamp(150px, 26vh, 200px) safe spacer. */
    top: 0;
    right: 0;
    bottom: 0;
    width: 18rem;
    max-width: 88vw;
    background: var(--color-bg-primary);
    border-left: 2px solid var(--twoa-orange);
    padding: clamp(150px, 26vh, 200px) 1.5rem 1.5rem;
    /* BELOW the sticky topbar (z:52) + header (z:50) so the chrome paints over
       the drawer's padding-top region (visually capping it) and the header's
       X-toggle stays clickable to close the menu. */
    z-index: 49;
    overflow-y: auto;
    /* iOS momentum scrolling — without this an overflowing drawer can feel
       "stuck" / non-scrollable on older iOS Safari when the body is scroll-locked. */
    -webkit-overflow-scrolling: touch;
    /* Lane 2 #34 — overscroll containment + touch-action. */
    overscroll-behavior: contain;
    touch-action: pan-y;
    /* Lane 2 #35 — drawer shadow normalize. */
    box-shadow: -16px 0 48px rgba(0,0,0,0.18);
}
/* Lane 2 #23 — dark drawer background var(--twoa-dark). */
.dark .mobile-menu { background: var(--twoa-dark); }
.mobile-menu.is-open { display: block; }
.mobile-menu h3 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    /* Lane 2 #36 — letter-spacing 0.1em → 0.05em (tracking-wider). */
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
}
.mobile-menu a {
    display: block;
    padding: 0.5rem 0;
    color: var(--color-text-primary);
}
.mobile-menu a:hover { color: var(--twoa-orange); }
.mobile-menu__group { margin-bottom: 1.5rem; }
.mobile-menu .btn { display: flex; width: 100%; margin-top: 1rem; justify-content: center; text-align: center; }

.mobile-backdrop {
    display: none;
    position: fixed;
    /* Full-viewport dimmer (top:0) sitting BELOW the sticky chrome (z:50/52) so
       the topbar+header stay visible/clickable on top; the drawer (z:49) sits
       above the backdrop (z:48). */
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 48;
}
/* Lane 2 #24 — dark backdrop 0.4 → 0.6 (Vercel parity). */
.dark .mobile-backdrop { background: rgba(0,0,0,0.6); }
.mobile-backdrop.is-open { display: block; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f5f5f5;
}
html.dark .hero, body.dark .hero, .dark .hero { background: var(--twoa-dark-deep); }

/* Mobile/tablet (<1024): hero height is purely content-driven (heading + image
   + scroll). Explicit height:auto + min-height:0 guards against any inherited
   vh/flex stretch that left dead `#f5f5f5` space below the scroll cue. */
@media (max-width: 1023px) {
    .hero { height: auto; min-height: 0; }
}

/* Desktop: fills the viewport below the chrome (~32+72 = 104px) but never
   collapses below 720px so the heading + CTAs always have breathing room. */
@media (min-width: 1024px) {
    .hero { height: calc(100dvh - 120px); min-height: 720px; }
}
/* Lane 2 #42 — 3xl bump (Vercel `3xl:h-[calc(100dvh-132px)]`). */
@media (min-width: 1536px) {
    .hero { height: calc(100dvh - 132px); }
}

.hero__heading-mobile {
    text-align: center;
    flex-shrink: 0;
    padding: clamp(1rem, 2.5vh, 3rem) 0 clamp(0.75rem, 1.5vh, 2rem);
}
@media (min-width: 1024px) { .hero__heading-mobile { display: none; } }

/* The mobile heading is a presentational duplicate (spans in a div, no <h1>),
   so it must be targeted via its wrapper — not `h1` — or it falls back to the
   body font (DM Sans 400, ~15px) and renders "normal" instead of the bold
   display heading. */
.hero__heading-mobile > div,
.hero__heading-mobile h1,
.hero__heading-desktop h1 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.1;
}
.hero__heading-mobile > div,
.hero__heading-mobile h1 { font-size: clamp(2rem, 4.5vw + 0.75rem, 6rem); }
.hero__heading-desktop h1 { font-size: clamp(1.75rem, 2.5vw + 0.5rem, 4rem); }

.hero__heading-line-1 { color: var(--twoa-dark); display: inline-block; }
/* Dark mode: up to tablet (<1024px) the mobile heading sits on the section
   background (not over the house photo), so dark-on-dark is invisible — render
   "Build Property Value —" white (user request, strict). Desktop (>=1024px)
   keeps it dark: there the heading overlays the light-sky house photo, where
   dark stays legible. The orange line-2 is unchanged. */
.dark .hero__heading-line-1 { color: var(--twoa-dark); }
@media (max-width: 1023px) {
    .dark .hero__heading-line-1 { color: #ffffff; }
}
.hero__heading-line-2 {
    display: block;
    color: var(--twoa-orange-dark);
}
/* Lane 2 #45 — desktop H1 spans get drop-shadow-sm (Vercel parity). */
@media (min-width: 1024px) {
    .hero__heading-desktop h1 span {
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
    }
}

.hero__image-area {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}
/* Tablet (601–1023): the 3:2 composite (intended for narrow phones) balloons
   on wider screens, leaving the photo cover-cropped with dead hero bg below the
   scroll cue. Cap the box height so it tracks the small viewport and the scroll
   indicator sits flush under the image. svh keeps it stable under mobile
   browser chrome (dynamic toolbar) instead of the larger lvh/vh. */
@media (min-width: 601px) and (max-width: 1023px) {
    .hero__image-area { aspect-ratio: auto; height: 66svh; max-height: 70vh; }
}
@media (min-width: 1024px) {
    .hero__image-area { aspect-ratio: auto; flex: 1 1 0; min-height: 0; }
}

.hero__image-mobile,
.hero__image-desktop {
    position: absolute;
    inset: 0;
}
.hero__image-mobile img,
.hero__image-desktop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
@media (max-width: 1023px) { .hero__image-desktop { display: none; } }
@media (min-width: 1024px) { .hero__image-mobile { display: none; } }

.hero__heading-desktop {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
    padding-top: clamp(1.25rem, 2.5vh, 3.75rem);
}
@media (min-width: 1024px) { .hero__heading-desktop { display: block; } }

.hero__cta-row {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(1.5rem, 5vh, 6rem);
    z-index: 20;
    width: 90%;
    display: flex;
}
@media (min-width: 1024px) { .hero__cta-row { display: none; } }
.hero__cta-row > div { width: 50%; display: flex; justify-content: center; }

.hero__cta-exterior,
.hero__cta-interior {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.5rem, 1vw, 1.25rem) clamp(1rem, 2vw, 3rem);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(0.75rem, 1vw, 1.5rem);
    border-radius: 9999px;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}
/* Lane 2 #49, #50 — shadow-xl recipe (Vercel parity). */
.hero__cta-exterior { background: rgba(255,255,255,0.95); color: var(--twoa-dark); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); }
.hero__cta-exterior:hover { background: var(--twoa-orange); color: #fff; transform: scale(1.05); }
.hero__cta-interior { background: var(--twoa-orange-dark); color: #fff; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); }
.hero__cta-interior:hover { background: #fff; color: var(--twoa-dark); transform: scale(1.05); }

.hero__cta-desktop-ext,
.hero__cta-desktop-int {
    display: none;
    position: absolute;
    z-index: 20;
}
@media (min-width: 1024px) {
    .hero__cta-desktop-ext { display: block; left: 32%; top: 75%; }
    .hero__cta-desktop-int { display: block; right: 32%; top: 75%; }
}

.hero__scroll {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0 0.75rem;
}
.hero__scroll span {
    color: var(--color-text-mid);
    /* Lane 2 #46 — tracking-wider 0.05em. */
    letter-spacing: 0.05em;
    font-size: clamp(0.75rem, 0.8vw, 1rem);
}
/* Lane 2 #47 — dark scroll span color. */
.dark .hero__scroll span { color: var(--twoa-gray); }
.hero__scroll-line {
    width: 2px;
    height: clamp(1.25rem, 1.6vh, 2.5rem);
    background: rgba(74,74,74,0.5);
    margin-top: 0.25rem;
}
/* Lane 2 #48 — dark scroll-line color. */
.dark .hero__scroll-line { background: rgba(237,237,237,0.5); }

/* Lane 2 #53, #54 — Hero scroll entrance + keyframe-driven scroll text/line. */
@media (prefers-reduced-motion: no-preference) {
    .hero__scroll {
        animation: twoaFadeInUp 0.7s 0.6s ease-out both;
        opacity: 0;
    }
    .hero__scroll span {
        animation: twoaScrollText 2s ease-in-out infinite;
    }
    .hero__scroll-line {
        animation: twoaScrollLine 2s ease-in-out infinite;
        transform-origin: top;
    }
}

/* =========================================================
   TRUST BAR
   ========================================================= */
.trustbar {
    background: var(--twoa-dark);
    color: #fff;
    padding: 1.25rem 0;
    border-bottom: 3px solid var(--twoa-orange);
    /* Lane 2 #57 — overflow:hidden. */
    overflow: hidden;
}
.trustbar__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
@media (min-width: 768px) { .trustbar__inner { gap: 2.5rem; } }
.trustbar__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    /* Lane 2 #58 — tracking-wide (0.025em). */
    letter-spacing: 0.025em;
    /* Lane 2 #55 — color transition for hover state. */
    transition: color 300ms ease;
    cursor: default;
}
.trustbar__item svg {
    color: var(--twoa-orange);
    transition: transform 300ms ease;
}
/* Lane 2 #55 — hover orange + svg scale. */
.trustbar__item:hover { color: var(--twoa-orange); }
.trustbar__item:hover svg { transform: scale(1.1); }
/* Lane 2 #56 — vertical divider at md+ breakpoints. */
.trustbar__item:not(:last-child)::after {
    content: "";
    display: none;
    width: 1px;
    height: 1.25rem;
    background: rgba(255, 255, 255, 0.15);
    margin-left: 2.5rem;
}
@media (min-width: 768px) {
    .trustbar__item:not(:last-child)::after { display: inline-block; }
}

/* =========================================================
   SERVICES GRID
   ========================================================= */
.services-section {
    background: var(--color-bg-primary);
    /* Lane 2 #71 — bg-color transition. */
    transition: background-color 0.3s ease;
}
/* Lane 2 #72 — dark services bg = var(--twoa-dark). */
.dark .services-section { background: var(--twoa-dark); }

.services-header { text-align: center; margin-bottom: 3.5rem; }

.services-sublabel {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: 1.25rem;
    padding-bottom: 0.625rem;
    border-bottom: 2px solid var(--twoa-gray);
    scroll-margin-top: 7rem;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 3rem;
}
@media (min-width: 640px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid--ext { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .services-grid--int { grid-template-columns: repeat(3, 1fr); } }

.service-card {
    background: var(--color-bg-card);
    border: 1.5px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.service-card:hover {
    border-color: var(--twoa-orange);
    transform: translateY(-8px);
    /* Lane 2 #73 — shadow-l token parity. */
    box-shadow: var(--shadow-l);
    color: inherit;
}

.service-card__media {
    position: relative;
    height: 11rem;
    overflow: hidden;
}
.service-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.service-card:hover .service-card__media img { transform: scale(1.1); }

.service-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
}

.service-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    background: var(--twoa-orange-dark);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    /* Lane 2 #81 — letter-spacing 0.02 → 0.025em. */
    letter-spacing: 0.025em;
    /* Lane 2 #80 — pulse glow animation. */
    animation: twoaPulseGlow 2s ease-in-out infinite;
}

.service-card__body { padding: 1.25rem; }
.service-card__body h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    /* Lane 2 #74 — margin 0.4 → 0.375rem. */
    margin: 0 0 0.375rem;
    /* Lane 2 #75 — transition 0.2 → 0.3s. */
    transition: color 0.3s ease;
}
.service-card:hover .service-card__body h3 { color: var(--twoa-orange); }
.service-card__body p {
    font-size: 0.875rem;
    color: var(--color-text-mid);
    /* Lane 2 #76 — line-height 1.6 → 1.625. */
    line-height: 1.625;
    margin-bottom: 0.75rem;
}
/* Lane 2 #77 — dark body color. */
.dark .service-card__body p { color: var(--twoa-gray); }
.service-card__cta {
    display: inline-flex;
    align-items: center;
    /* Lane 2 #78 — gap 0.4 → 0.375rem. */
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--twoa-orange);
}
.service-card:hover .service-card__cta { gap: 0.75rem; }
/* Lane 2 #79 — svg translateX on hover. */
.service-card__cta svg { transition: transform 0.3s ease; }
.service-card:hover .service-card__cta svg { transform: translateX(4px); }

/* =========================================================
   WHY CHOOSE US / PROCESS
   ========================================================= */
.section-alt {
    background: var(--twoa-warm);
    /* Lane 2 #82 — bg-color transition. */
    transition: background-color 0.3s ease;
}
.dark .section-alt { background: var(--twoa-dark-deep); }

.why-grid,
.process-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (min-width: 640px)  { .why-grid { grid-template-columns: repeat(2, 1fr); } .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(5, 1fr); } .process-grid { grid-template-columns: repeat(4, 1fr); } }
/* Lane 2 #83 — why-grid 3xl/4k gap bumps. */
@media (min-width: 1536px) { .why-grid { gap: 2rem; } }
@media (min-width: 1920px) { .why-grid { gap: 2.5rem; } }
/* Lane 2 #94 — process-grid gap split + 3xl/4k bumps (Vercel gap-8/10/12). */
@media (min-width: 1024px) { .process-grid { gap: 2rem; } }
@media (min-width: 1536px) { .process-grid { gap: 2.5rem; } }
@media (min-width: 1920px) { .process-grid { gap: 3rem; } }

.feature-card {
    position: relative;
    text-align: center;
    padding: 2rem;
    border-radius: 16px;
    background: var(--color-bg-card);
    border: 1.5px solid var(--color-border);
    transition: all 0.3s ease;
    height: 100%;
}
/* Lane 2 #84 — 3xl padding bump. */
@media (min-width: 1536px) { .feature-card { padding: 2.5rem; } }
.feature-card:hover {
    border-color: var(--twoa-orange);
    transform: translateY(-8px);
    /* Lane 2 #89 — shadow-lg recipe (Vercel parity). */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* Lane 2 #91 — raise above siblings on hover. */
    z-index: 10;
}
/* Lane 2 #171 — verified: .feature-card__icon (below) covers icon-pill requirement
   for service-page Why-Choose (bg-orange-glow, text-orange, w-14 h-14, rounded-[14px],
   mx-auto mb-4). Markup will be added in Lane 3+. */
.feature-card__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 14px;
    background: var(--twoa-orange-glow);
    color: var(--twoa-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    transition: all 0.3s ease;
}
/* Lane 2 #85 — 3xl icon size bump. */
@media (min-width: 1536px) {
    .feature-card__icon { width: 4rem; height: 4rem; }
}
.feature-card:hover .feature-card__icon { background: var(--twoa-orange); color: #fff; transform: scale(1.1); }
.feature-card h3 {
    /* Lane 2 #86 — display font + color transition. */
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--color-text-primary);
    transition: color 0.3s ease;
}
/* Lane 2 #86 — 3xl h3 size bump. */
@media (min-width: 1536px) { .feature-card h3 { font-size: 1rem; } }
.feature-card p {
    /* Lane 2 #87 — font-size 0.8125 → 0.75rem, line-height 1.55 → 1.625. */
    font-size: 0.75rem;
    color: var(--color-text-mid);
    line-height: 1.625;
    margin: 0;
}
@media (min-width: 1536px) { .feature-card p { font-size: 0.875rem; } }
/* Lane 2 #88 — dark body color. */
.dark .feature-card p { color: var(--twoa-gray); }

/* Connecting line behind the 4 numbered circles on desktop — mirrors Vercel's
   absolute line at top-9 (36px from top) spanning left:15% to right:15%, z-0
   so the circles (z-10) overlap it. */
.process-grid { position: relative; }
@media (min-width: 1024px) {
    .process-grid::before {
        content: "";
        position: absolute;
        top: 36px;
        left: 15%;
        right: 15%;
        height: 2px;
        background: var(--twoa-gray);
        border-radius: 9999px;
        z-index: 0;
        pointer-events: none;
    }
    .dark .process-grid::before { background: var(--twoa-dark-soft); }
}

/* Lane 2 #92, #93 — process-section transitions + dark background. */
.process-section { transition: background-color 0.3s ease; }
.dark .process-section { background: var(--twoa-dark); }

/* Lane 2 #95 — process-step z-index 1 → 10. */
.process-step { text-align: center; position: relative; z-index: 10; }
.process-step__number {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-bg-card);
    border: 3px solid var(--twoa-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--twoa-orange);
    transition: all 0.3s ease;
}
/* Lane 2 #96 — 3xl process-step number size bump. */
@media (min-width: 1536px) {
    .process-step__number { width: 88px; height: 88px; font-size: 1.875rem; }
}
.process-step:hover .process-step__number {
    background: var(--twoa-orange);
    color: #fff;
    transform: scale(1.1);
    /* Lane 2 #97 — shadow-orange-lg token parity. */
    box-shadow: var(--shadow-orange-lg);
}
.process-step h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 0.5rem;
}
/* Lane 2 #98 — 3xl h3 size bump. */
@media (min-width: 1536px) { .process-step h3 { font-size: 1.125rem; } }
.process-step p {
    font-size: 0.875rem;
    color: var(--color-text-mid);
    /* Lane 2 #99 — line-height 1.5 → 1.625. */
    line-height: 1.625;
    max-width: 220px;
    margin: 0 auto;
}
/* Lane 2 #99 — 3xl p size + max-width bump. */
@media (min-width: 1536px) {
    .process-step p { font-size: 1rem; max-width: 280px; }
}

/* Lane 2 #100 — process-grid line-shimmer entrance overlay (Vercel parity). */
@media (min-width: 1024px) {
    .process-grid::before {
        background: linear-gradient(
            90deg,
            transparent 0%,
            var(--twoa-gray) 20%,
            rgba(235, 93, 29, 0.40) 50%,
            var(--twoa-gray) 80%,
            transparent 100%
        );
        background-size: 200% 100%;
        animation: twoaLineShimmer 3s ease-in-out infinite, twoaFadeIn 0.7s 0.3s ease-out both;
        opacity: 0;
    }
    .dark .process-grid::before {
        background: linear-gradient(
            90deg,
            transparent 0%,
            var(--twoa-dark-soft) 20%,
            rgba(235, 93, 29, 0.40) 50%,
            var(--twoa-dark-soft) 80%,
            transparent 100%
        );
        background-size: 200% 100%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .process-grid::before { animation: none; opacity: 1; }
}

/* =========================================================
   ESTIMATE FORM
   ========================================================= */
.estimate-section {
    background: var(--twoa-warm);
    /* Lane 2 #59 — bg-color transition. */
    transition: background-color 0.3s ease;
}
.dark .estimate-section { background: var(--twoa-dark-deep); }

/* Vercel uses `container form-container-sm mx-auto` which clamps the form
   column (and its heading) to 680px at the design width. The heading-center
   default of 48rem is wider, so override it here. */
.estimate-section__inner { max-width: 680px; }
.estimate-section__head { max-width: 680px; }

.estimate-card {
    max-width: 680px;
    margin: 0 auto;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: 1.25rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.10);
    /* Lane 2 #64 — soft transition for hover state. */
    transition: box-shadow 500ms ease, border-color 500ms ease;
}
.estimate-card:hover {
    box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.15);
    border-color: rgba(235, 93, 29, 0.20);
}
@media (min-width: 768px)  { .estimate-card { padding: 1.5rem; } }
@media (min-width: 1024px) { .estimate-card { padding: 1.75rem; } }

.estimate-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 768px) { .estimate-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }

.form-field { display: flex; flex-direction: column; gap: 0.375rem; }
.form-field--full { grid-column: 1 / -1; }
.form-field label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-mid);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.form-field label .req { color: var(--twoa-orange); }

.input-premium,
.textarea-premium,
.select-premium {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 0.875rem;
    transition: all 0.25s ease;
}

.select-premium {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23eb5d1d'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    cursor: pointer;
}
.input-premium:focus,
.textarea-premium:focus,
.select-premium:focus {
    outline: none;
    border-color: var(--twoa-orange);
    /* Lane 2 #60 — focus ring alpha 0.10 → 0.20. */
    box-shadow: 0 0 0 4px rgba(235, 93, 29, 0.20);
    /* Lane 2 #61 — lift -1px → -2px. */
    transform: translateY(-2px);
}
.textarea-premium { min-height: 80px; resize: vertical; }

/* Custom select — mirrors Vercel CustomSelect.tsx (replaces native <select>). */
.twoa-custom-select { position: relative; width: 100%; }
.twoa-cs__button {
    width: 100%;
    padding: 0.875rem 0.75rem 0.875rem 1rem;
    border: 2px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 0.875rem;
    text-align: left;
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    cursor: pointer;
    transition: all 0.25s ease;
}
.twoa-cs__button:hover { border-color: rgba(235, 93, 29, 0.5); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.twoa-cs__button:focus,
.twoa-custom-select.is-open .twoa-cs__button {
    outline: none;
    border-color: var(--twoa-orange);
    box-shadow: 0 0 0 4px rgba(235, 93, 29, 0.15), 0 8px 16px rgba(235, 93, 29, 0.10);
    transform: translateY(-1px);
}
.twoa-cs__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.twoa-cs__label--placeholder { color: var(--color-text-light); font-weight: 400; }
.twoa-cs__chevron {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(235, 93, 29, 0.10); color: var(--twoa-orange);
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.twoa-custom-select.is-open .twoa-cs__chevron { background: var(--twoa-orange); color: #fff; transform: rotate(180deg); }
.twoa-cs__list {
    position: absolute; left: 0; right: 0; top: calc(100% + 0.5rem);
    margin: 0; padding: 0.25rem; list-style: none;
    background: var(--color-bg-primary);
    border: 2px solid rgba(235, 93, 29, 0.20);
    border-radius: 16px;
    /* Lane 2 #68 — neutral shadow per Vercel parity (was orange-tinted). */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-height: 280px; overflow-y: auto; overflow-x: hidden;
    z-index: 99999;
    scrollbar-width: thin; scrollbar-color: var(--twoa-orange) transparent;
    animation: twoa-cs-in 0.2s ease-out;
}
@keyframes twoa-cs-in { from { opacity: 0; transform: scale(0.95) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.twoa-cs__list ul { list-style: none; margin: 0; padding: 0; }
.twoa-cs__group-label {
    padding: 0.375rem 0.75rem 0.25rem;
    font-size: 0.625rem; font-weight: 600; letter-spacing: 0.05em;
    color: rgba(235, 93, 29, 0.70); text-transform: uppercase;
}
.twoa-cs__group-label--sep { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid rgba(0,0,0,0.06); }
.twoa-cs__option {
    padding: 0.625rem 1rem;
    border-radius: 8px;
    color: var(--color-text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 0.25rem;
}
.twoa-cs__option:hover,
.twoa-cs__option.is-highlighted {
    background: linear-gradient(to right, var(--twoa-orange), var(--twoa-orange-dark));
    color: #fff;
}
.twoa-cs__option.is-selected { color: var(--twoa-orange); font-weight: 500; background: rgba(235, 93, 29, 0.08); }
.twoa-cs__option.is-selected.is-highlighted { color: #fff; background: linear-gradient(to right, var(--twoa-orange), var(--twoa-orange-dark)); }
.twoa-custom-select.is-invalid .twoa-cs__button { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15); }
.dark .twoa-cs__list { background: var(--twoa-dark-mid); border-color: rgba(235, 93, 29, 0.30); }
.dark .twoa-cs__option { color: var(--color-text-secondary, #e5e5e5); }

.btn-submit-premium {
    width: 100%;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 9999px;
    border: none;
    background: linear-gradient(to right, var(--twoa-orange), var(--twoa-orange-dark));
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 24px rgba(235, 93, 29, 0.30);
    transition: all 0.3s ease;
    cursor: pointer;
}
.btn-submit-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(235, 93, 29, 0.40);
}

/* =========================================================
   FINANCING CTA / VIDEO BLOCK
   ========================================================= */
.financing-cta {
    background: linear-gradient(135deg, var(--twoa-dark) 0%, var(--twoa-dark-deep) 100%);
    padding: 3.5rem 0;
    position: relative;
    overflow: hidden;
}
.financing-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    text-align: center;
}
@media (min-width: 768px) {
    .financing-cta__inner { flex-direction: row; text-align: left; }
}
/* Lane 2 #133 — explicit font-weight 700 on h3. */
.financing-cta h3 { color: #fff; font-size: 1.5rem; font-weight: 700; margin: 0 0 0.4rem; }
/* Lane 2 #132 — alpha 0.7 → 0.6 (Vercel parity). */
.financing-cta p { color: rgba(255,255,255,0.6); font-size: 0.875rem; margin: 0; }
.financing-cta__pulse {
    position: absolute;
    top: -33%;
    right: -10%;
    width: 500px;
    height: 500px;
    border-radius: 9999px;
    background: rgba(235, 93, 29, 0.05);
    pointer-events: none;
    animation: twoa-financing-pulse 2.4s ease-in-out infinite;
}
@keyframes twoa-financing-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
    .financing-cta__pulse { animation: none; }
}

.video-section {
    background: var(--twoa-dark-deep);
    color: #fff;
}
/* Lane 2 #101 — dark video-section bg = var(--twoa-dark-mid). */
.dark .video-section { background: var(--twoa-dark-mid); }
.video-section .video-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
}
@media (min-width: 1024px) { .video-section .video-grid { grid-template-columns: repeat(2, 1fr); } }
.video-section .section-title { color: #fff; }
/* Lane 2 #102 — line-height 1.6 → 1.625, alpha 0.7 → 0.65. */
.video-section p { color: rgba(255,255,255,0.65); line-height: 1.625; }
.video-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.1);
    background: #000;
    aspect-ratio: 16 / 9;
    /* Lane 2 #103 — shadow-lg recipe (Vercel parity). */
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    transition: border-color 0.3s ease;
}
.video-frame:hover { border-color: rgba(235,93,29,0.5); }
.video-frame video { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   SERVICE PAGE — TOP VIDEO (.twoa-service-top-video)
   Mirrors Vercel src/app/services/<slug>/page.tsx lines 359-385:
   - py-4 md:py-6  white bg, dark text
   - max-w-3xl, capped by viewport height so 16:9 fits one fold
   - heading text-lg md:text-xl, centered, mb-3 md:mb-4
   ========================================================= */
.twoa-service-top-video {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background: #fff;
    color: var(--color-text-primary);
    overflow: hidden;
}
.dark .twoa-service-top-video { background: var(--twoa-dark-soft); color: #fff; }
@media (min-width: 768px) {
    .twoa-service-top-video { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}
.twoa-service-top-video__inner {
    margin-left: auto;
    margin-right: auto;
    max-width: 48rem; /* Tailwind max-w-3xl */
    /* Cap width so 16:9 + header + heading fit in one fold on 768p+ laptops. */
    width: min(100%, calc((100vh - 220px) * 16 / 9));
}
@media (min-width: 1920px) {
    .twoa-service-top-video__inner { max-width: 56rem; } /* 3xl:max-w-4xl */
}
.twoa-service-top-video__heading {
    text-align: center;
    margin-bottom: 0.75rem;
}
@media (min-width: 768px) {
    .twoa-service-top-video__heading { margin-bottom: 1rem; }
}
.twoa-service-top-video__h2 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-text-primary);
    font-size: 1.125rem; /* text-lg */
    line-height: 1.35;
    margin: 0;
}
.dark .twoa-service-top-video__h2 { color: #fff; }
@media (min-width: 768px) {
    .twoa-service-top-video__h2 { font-size: 1.25rem; } /* text-xl */
}
.twoa-service-top-video__frame {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    border: 2px solid rgba(0,0,0,0.08);
    background: #000;
    aspect-ratio: 16 / 9;
    box-shadow: 0 20px 50px rgba(0,0,0,0.18);
    transition: border-color .3s ease;
}
.dark .twoa-service-top-video__frame { border-color: rgba(255,255,255,0.08); box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.twoa-service-top-video__frame video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   SERVICE PAGE — HERO (.mc-service-hero)
   Mirrors Vercel page.tsx lines 387-434:
   - relative, bg-[#f8f7f4] dark:bg-dark-deep
   - container pt-12 pb-6 sm:pt-16 sm:pb-8 lg:pt-20 lg:pb-20
   - grid lg:grid-cols-2 gap-8 items-center
   - Eyebrow: orange/20 bg, orange border pill with Shield icon
   - H1: text-3xl sm:text-4xl lg:fluid-h1, last line span orange block
   ========================================================= */
.mc-service-hero {
    position: relative;
    background: #f8f7f4;
    color: var(--color-text-primary);
    overflow: hidden;
}
.dark .mc-service-hero { background: var(--twoa-dark-deep); color: #fff; }
.mc-service-hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #f8f7f4, rgba(248,247,244,0.95), rgba(248,247,244,0.9));
    pointer-events: none;
}
.dark .mc-service-hero__bg {
    background: linear-gradient(to bottom, var(--twoa-dark-deep), color-mix(in srgb, var(--twoa-dark-deep) 95%, transparent), color-mix(in srgb, var(--twoa-dark-deep) 90%, transparent));
}
@media (min-width: 1024px) {
    .mc-service-hero__bg {
        background: linear-gradient(to right, #f8f7f4, rgba(248,247,244,0.95), rgba(248,247,244,0.4));
    }
    .dark .mc-service-hero__bg {
        background: linear-gradient(to right, var(--twoa-dark-deep), color-mix(in srgb, var(--twoa-dark-deep) 95%, transparent), color-mix(in srgb, var(--twoa-dark-deep) 40%, transparent));
    }
}
.mc-service-hero__container {
    position: relative;
    z-index: 1;
    padding-top: 3rem;
    padding-bottom: 1.5rem;
}
@media (min-width: 640px) {
    .mc-service-hero__container { padding-top: 4rem; padding-bottom: 2rem; }
}
@media (min-width: 1024px) {
    .mc-service-hero__container { padding-top: 5rem; padding-bottom: 5rem; }
}
.mc-service-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .mc-service-hero__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
.mc-service-hero__content {
    max-width: 36rem; /* max-w-xl */
}
@media (min-width: 1920px) {
    .mc-service-hero__content { max-width: 42rem; }
}
.mc-service-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(235, 93, 29, 0.2);
    border: 1px solid rgba(235, 93, 29, 0.3);
    /* Lane 2 #157 — eyebrow color orange-dark → orange (Vercel parity). */
    color: var(--twoa-orange);
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1;
}
/* Lane 2 #160 — dark eyebrow orange-light → orange. */
.dark .mc-service-hero__eyebrow { color: var(--twoa-orange); }
@media (min-width: 640px) {
    .mc-service-hero__eyebrow {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
    }
}
.mc-service-hero__eyebrow-icon { width: 0.75rem; height: 0.75rem; flex-shrink: 0; }
@media (min-width: 640px) {
    .mc-service-hero__eyebrow-icon { width: 1rem; height: 1rem; }
}
.mc-service-hero__h1 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-text-primary);
    font-size: 1.875rem; /* text-3xl */
    /* Lane 2 #158 — leading-tight 1.25. */
    line-height: 1.25;
    margin: 0 0 1rem 0;
}
.dark .mc-service-hero__h1 { color: #fff; }
@media (min-width: 640px) {
    .mc-service-hero__h1 { font-size: 2.25rem; margin-bottom: 1.5rem; } /* sm:text-4xl */
}
@media (min-width: 1024px) {
    .mc-service-hero__h1 { font-size: clamp(2.5rem, 4vw + 0.5rem, 4.5rem); } /* lg:fluid-h1 */
}
.mc-service-hero__h1-accent {
    /* Lane 2 #156 — accent color orange-dark → orange (Vercel parity). */
    color: var(--twoa-orange);
    display: block;
}
.dark .mc-service-hero__h1-accent { color: var(--twoa-orange); }
.mc-service-hero__lead {
    color: rgba(52, 52, 52, 0.7);
    font-size: 1rem;
    /* Lane 2 #159 — line-height 1.6 → 1.625. */
    line-height: 1.625;
    margin: 0 0 1.5rem 0;
    max-width: 42rem;
}
.dark .mc-service-hero__lead { color: rgba(255, 255, 255, 0.7); }
@media (min-width: 640px) {
    .mc-service-hero__lead { font-size: 1.125rem; margin-bottom: 2rem; }
}
@media (min-width: 1024px) {
    .mc-service-hero__lead { font-size: 1.25rem; }
}
.mc-service-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .mc-service-hero__ctas { gap: 1rem; }
}
.mc-service-hero__cta { font-size: 0.875rem; }
@media (min-width: 640px) {
    .mc-service-hero__cta { font-size: 1rem; }
}
/* Lane 2 #162 — primary CTA glow-pulse animation (Vercel parity). */
.mc-service-hero__cta.btn-primary {
    animation: twoaGlowPulse 2s ease-in-out infinite;
}
/* Lane 2 #161 — outline CTA hover lift + scale. */
.mc-service-hero__cta.btn-outline { transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; }
.mc-service-hero__cta.btn-outline:hover {
    transform: translateY(-2px) scale(1.05);
}
/* Lane 10 row 5: opt-in primary CTA hover scale for bathroom-remodeling
   (Vercel page.tsx:248 adds `hover:scale-105` to primary alongside glow-pulse).
   Data-driven via the `animate-glow-pulse hover:scale-105` class pair on the
   anchor; here we map those utility-shaped class names to real transforms. */
.mc-service-hero__cta.btn-primary { transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease; }
.mc-service-hero__cta.btn-primary.hover\:scale-105:hover {
    transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
    .mc-service-hero__cta.btn-primary { animation: none; }
    .mc-service-hero__cta.btn-outline:hover { transform: none; }
    .mc-service-hero__cta.btn-primary.hover\:scale-105:hover { transform: none; }
}
.mc-service-hero__gallery {
    display: none; /* hidden lg:block */
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (min-width: 1024px) {
    .mc-service-hero__gallery { display: grid; }
}
.mc-service-hero__gallery-item {
    border-radius: 0.75rem;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: rgba(0, 0, 0, 0.04);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.dark .mc-service-hero__gallery-item { background: rgba(255,255,255,0.04); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.mc-service-hero__gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Stagger thumbs slightly for the floating Vercel look. */
.mc-service-hero__gallery-item--0 { transform: translateY(-12px); }
.mc-service-hero__gallery-item--1 { transform: translateY(12px); }
.mc-service-hero__gallery-item--2 { transform: translateY(12px); }
.mc-service-hero__gallery-item--3 { transform: translateY(-12px); }
.mc-service-hero__breadcrumbs {
    font-size: 0.8125rem;
    margin-top: 1.5rem;
    color: rgba(52, 52, 52, 0.55);
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    letter-spacing: 0.01em;
    font-weight: 500;
    /* Entrance: fade up on load, staggered just after the hero content.
       Load-time (not scroll-reveal) so it's reliably visible even when it
       sits at the fold edge at the bottom of the hero. */
    animation: twoaFadeInUp 0.7s var(--ease-out-cubic) 0.4s both;
}
@media (prefers-reduced-motion: reduce) {
    .mc-service-hero__breadcrumbs { animation: none; }
}
.dark .mc-service-hero__breadcrumbs { color: rgba(255,255,255,0.55); }
.mc-service-hero__breadcrumbs a {
    position: relative;
    color: inherit;
    text-decoration: none;
    transition: color 0.25s var(--ease-out-cubic);
}
/* Animated underline grows from the left on hover/focus. */
.mc-service-hero__breadcrumbs a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s var(--ease-out-cubic);
}
.mc-service-hero__breadcrumbs a:hover,
.mc-service-hero__breadcrumbs a:focus-visible { color: var(--twoa-orange-dark); }
.mc-service-hero__breadcrumbs a:hover::after,
.mc-service-hero__breadcrumbs a:focus-visible::after { transform: scaleX(1); }
.dark .mc-service-hero__breadcrumbs a:hover,
.dark .mc-service-hero__breadcrumbs a:focus-visible { color: var(--twoa-orange); }
/* Chevron separators: lighter than the links, non-selectable. */
.mc-service-hero__breadcrumbs-sep {
    color: rgba(52, 52, 52, 0.32);
    font-size: 0.95em;
    user-select: none;
    line-height: 1;
}
.dark .mc-service-hero__breadcrumbs-sep { color: rgba(255,255,255,0.32); }
.mc-service-hero__breadcrumbs-current { color: var(--twoa-orange-dark); font-weight: 600; }
.dark .mc-service-hero__breadcrumbs-current { color: var(--twoa-orange); }

/* =========================================================
   GALLERY
   ========================================================= */
.gallery-section {
    background: var(--twoa-warm);
    /* Lane 2 #104 — bg-color transition. */
    transition: background-color 0.3s ease;
}
.dark .gallery-section { background: var(--twoa-dark-deep); }

.gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(200px, auto);
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (min-width: 640px)  { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }

/* Vercel makes the 1st gallery item span 2 rows so it stands as the hero
   project. Only kicks in at ≥sm where we have multi-column grid. */
@media (min-width: 640px) {
    .gallery-grid > .gallery-item:first-child { grid-row: span 2; }
}

.gallery-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
/* The row-spanning hero item shouldn't be locked to 4:3 — let the grid row
   stretch it tall. */
@media (min-width: 640px) {
    .gallery-grid > .gallery-item:first-child { aspect-ratio: auto; height: 100%; }
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item__overlay {
    position: absolute;
    inset: 0;
    /* Lane 2 #105 — add via-stop for the gradient (Vercel parity). */
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    opacity: 0;
    display: flex;
    align-items: flex-end;
    padding: 1.25rem;
    /* Lane 2 #106 — transition 0.4s → 0.5s. */
    transition: opacity 0.5s ease;
    color: #fff;
    font-weight: 600;
    /* Lane 2 #107 — explicit font-size 14px. */
    font-size: 0.875rem;
}
.gallery-item:hover .gallery-item__overlay { opacity: 1; }

/* Lane 2 #108 — BeforeAfter section base styles. */
.before-after-section {
    background: #fff;
    color: var(--color-text-primary);
}
.dark .before-after-section {
    background: var(--twoa-dark-soft);
    color: #fff;
}

/* =========================================================
   SERVICE AREA / CITY CHIPS
   ========================================================= */
.area-section {
    background: var(--twoa-warm);
    /* Lane 2 #123 — bg transition + overflow. */
    transition: background-color 0.3s ease;
    overflow: hidden;
}
.dark .area-section { background: var(--twoa-dark-deep); }

.area-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) { .area-grid { grid-template-columns: repeat(2, 1fr); } }

.city-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}
.city-chip {
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--color-border);
    /* Lane 2 #124 — bg var(--twoa-warm) light, dark-mid dark. */
    background: var(--twoa-warm);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    transition: all 0.2s ease;
    cursor: pointer;
    font-family: inherit;
}
.dark .city-chip { background: var(--twoa-dark-mid); }
.city-chip:hover {
    border-color: var(--twoa-orange);
    color: var(--twoa-orange);
    background: var(--twoa-orange-glow);
    /* Lane 2 #125 — scale 1.03 → 1.05. */
    transform: scale(1.05);
}
.city-chip.is-active {
    background: var(--twoa-orange);
    color: #fff;
    border-color: var(--twoa-orange);
    transform: scale(1.05);
}
/* Lane 2 #127 — removed .city-chip.is-active:hover so active state holds steady. */

.area-map-wrap {
    width: 100%;
}
#twoa-area-map {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid var(--color-border);
    /* Lane 2 #129 — shadow-m parity. */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    background: #e0e0e0;
    transition: all 0.3s ease;
}
#twoa-area-map:hover {
    border-color: var(--twoa-orange);
    /* Lane 2 #129 — shadow-l parity on hover. */
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.area-map-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-mid);
    font-weight: 500;
    z-index: 1;
    pointer-events: none;
    /* Lane 2 #130 — pulse-glow on loading state. */
    animation: twoaPulseGlow 2s ease-in-out infinite;
    background: rgba(0, 0, 0, 0.05);
}
/* Ensure Leaflet's containers behave with our wrapper */
#twoa-area-map .leaflet-container {
    width: 100% !important;
    height: 100% !important;
    background: #e0e0e0 !important;
    font-family: var(--font-body) !important;
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
/* Lane 2 #109 — dark testimonials-section bg = var(--twoa-dark). */
.dark .testimonials-section { background: var(--twoa-dark); }

/* ----- Testimonial main player + thumbnail tabs ----- */
/* Testimonial review stage — one reusable .video-frame per review; only the
   active .testimonial-slide is shown. Chrome (border, rounded, hover-orange,
   skeleton) now comes from .video-frame--standard, identical to every other
   video. Opacity-only fade keeps wrappers transform-free so native fullscreen
   isn't clipped (unlike [data-reveal], which persists transform + will-change). */
.testimonial-stage {
    max-width: 64rem;
    margin: 0 auto;
}
.testimonial-slide {
    opacity: 1;
    transition: opacity 0.5s var(--ease-out-cubic);
}
.testimonial-slide:not(.is-shown) {
    opacity: 0;
}
.testimonial-slide[hidden] {
    display: none;
}
/* Testimonials are vertical 9:16 phone clips shown in the wide 16:9 frame so
   the block fills the section width (no empty gutters). The real video is
   centered and uncropped (object-fit:contain), and the side areas are filled
   with a blurred, scaled copy of the clip's own poster instead of black bars —
   the standard "vertical video in a landscape stage" treatment. The poster URL
   arrives as the --twoa-testi-poster custom property on .testimonial-slide. */
.testimonial-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--twoa-testi-poster, none);
    background-size: cover;
    background-position: center;
    /* Blur + darken so the centered video reads as the focus, scale past the
       edges so the blur doesn't show a hard border. */
    filter: blur(34px) saturate(1.25) brightness(0.5);
    transform: scale(1.18);
    pointer-events: none;
}
/* Let the blurred backdrop show through the player chrome in the side gaps.
   .plyr__poster is the key one: Plyr fills it with a solid black background, so
   without this override the poster's black box hides the blurred backdrop while
   the clip is at rest. Its centered poster image (background-size:contain)
   still shows. */
.testimonial-frame .plyr,
.testimonial-frame .plyr__video-wrapper,
.testimonial-frame .plyr__poster,
.testimonial-frame video {
    background-color: transparent !important;
}
.testimonial-frame .plyr {
    position: relative;
    z-index: 1;
}
/* Centered, uncropped video over the backdrop (and clean letterbox in
   fullscreen — no cropped heads). */
.testimonial-frame video {
    object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
    .testimonial-slide {
        transition: none;
        opacity: 1;
    }
}

.testimonial-thumbs {
    max-width: 64rem;
    margin: 1.5rem auto 0;
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    /* Lane 2 #122 — scrollbar-hide per Vercel parity (Firefox + IE/Edge). */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
@media (min-width: 768px) {
    .testimonial-thumbs {
        gap: 1rem;
        overflow-x: visible;
    }
}
/* Lane 2 #122 — scrollbar-hide per Vercel parity (WebKit). */
.testimonial-thumbs::-webkit-scrollbar { display: none; }

.testimonial-thumb {
    position: relative;
    flex: 0 0 160px;
    aspect-ratio: 16 / 9;
    /* Lane 2 #111 — border-radius 10 → 12px (rounded-xl). */
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--color-border);
    /* Lane 2 #112 — bg dark-deep → dark. */
    background: var(--twoa-dark);
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
    scroll-snap-align: center;
    font-family: inherit;
}
/* Lane 2 #113 — sm:w-[180px] bump. */
@media (min-width: 640px) {
    .testimonial-thumb { flex: 0 0 180px; }
}
@media (min-width: 768px) {
    .testimonial-thumb { flex: 1 1 0; min-width: 0; }
}
.testimonial-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.testimonial-thumb__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.10) 50%, transparent);
    transition: opacity 0.3s ease;
    /* Lane 2 #116 — base overlay opacity (0.7 idle → 0.9 hover/active). */
    opacity: 0.7;
}
.testimonial-thumb:hover .testimonial-thumb__overlay,
.testimonial-thumb.is-active .testimonial-thumb__overlay {
    opacity: 0.9;
}
.testimonial-thumb__play {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    color: var(--twoa-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: all 0.3s ease;
}
.testimonial-thumb__play svg { width: 1.25rem; height: 1.25rem; margin-left: 2px; }
.testimonial-thumb:hover .testimonial-thumb__play,
.testimonial-thumb.is-active .testimonial-thumb__play {
    background: var(--twoa-orange);
    color: #fff;
    transform: scale(1.1);
}
.testimonial-thumb__label {
    position: absolute;
    bottom: 6px;
    left: 8px;
    right: 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* Lane 2 #114 — sm:text-xs (0.75rem) bump. */
@media (min-width: 640px) {
    .testimonial-thumb__label { font-size: 0.75rem; }
}
.testimonial-thumb__nowplaying {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--twoa-orange);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 4px;
}
.testimonial-thumb:hover {
    border-color: var(--twoa-orange);
    transform: translateY(-2px);
    /* Lane 2 #115 — soften shadow to shadow-m parity. */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.testimonial-thumb.is-active {
    border-color: var(--twoa-orange);
    box-shadow: 0 8px 24px rgba(235, 93, 29, 0.25);
    transform: scale(1.02);
}
.testimonial-thumb:focus-visible {
    outline: 2px solid var(--twoa-orange);
    outline-offset: 2px;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px)  { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }

.testimonial-card {
    background: var(--color-bg-card);
    border: 1.5px solid var(--color-border);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}
.testimonial-card:hover {
    border-color: var(--twoa-orange);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}
.testimonial-card__stars {
    color: var(--twoa-orange);
    font-size: 0.75rem;
    /* Lane 2 #118 — letter-spacing 0.1em → 0.05em. */
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.testimonial-card blockquote {
    font-size: 0.875rem;
    /* Lane 2 #119 — line-height 1.55 → 1.625, add line-clamp:4. */
    line-height: 1.625;
    color: var(--color-text-mid);
    font-style: italic;
    margin: 0 0 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.testimonial-card footer {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.testimonial-card .avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--twoa-orange-glow);
    color: var(--twoa-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.6875rem;
    /* Lane 2 #121 — line-height 1.5 → 1 (avatar centering parity). */
    line-height: 1;
}
.testimonial-card cite {
    font-weight: 700;
    font-size: 0.75rem;
    font-style: normal;
}
/* Lane 2 #120 — dark cite color = #fff. */
.dark .testimonial-card cite { color: #fff; }

/* =========================================================
   BOTTOM CONTACT
   ========================================================= */
.bottom-contact {
    padding: 4rem 0;
    background: var(--color-bg-primary);
    text-align: center;
    border-top: 1px solid var(--color-border);
    /* Lane 2 #137 — bg + border transition. */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.bottom-contact h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.625rem;
}
.bottom-contact__phone {
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--twoa-orange);
    display: inline-block;
    margin-bottom: 0.375rem;
    /* Lane 2 #138 — transform transition for scale. */
    transition: transform 0.3s ease;
}
.bottom-contact__phone:hover {
    text-decoration: underline;
    transform: scale(1.05);
}
.bottom-contact__email {
    color: var(--color-text-mid);
    display: block;
    /* Lane 2 #139 — color transition + orange hover. */
    transition: color 0.3s ease;
}
.bottom-contact__email:hover { color: var(--twoa-orange); }
.bottom-contact__hours {
    color: var(--color-text-light);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
    background: var(--twoa-dark-deep);
    color: rgba(255,255,255,0.6);
    padding: 4rem 0 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}
@media (min-width: 768px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }

.footer-brand a {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
}
.footer-brand a .twoa { color: var(--twoa-orange); }
.footer-brand p {
    font-size: 0.875rem;
    line-height: 1.55;
    max-width: 280px;
    margin: 0 0 1.5rem;
}
.footer-logo-circle {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff, var(--twoa-gray));
    padding: 0.25rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    overflow: hidden;
}
.footer-logo-circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }

.footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.footer-socials a {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.8);
    transition: all 0.25s ease;
}
.footer-socials a:hover {
    background: var(--twoa-orange);
    color: #fff;
    transform: scale(1.1);
}

.footer-col h3 {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.footer-col a {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.6);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.footer-col a:hover { color: var(--twoa-orange); }
.footer-col li.contact-line { display: flex; align-items: center; gap: 0.5rem; }
.footer-col svg { color: var(--twoa-orange); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 1.5rem 0;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    text-align: center;
}
.footer-military {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.footer-military img { width: 56px; height: auto; display: block; }
.footer-military span {
    color: rgba(255,255,255,0.75);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
}
.footer-copy { white-space: nowrap; }
@media (max-width: 640px) {
    .footer-bottom { flex-direction: column; justify-content: center; }
    .footer-copy { white-space: normal; }
}

/* =========================================================
   FALLBACK PAGE (index.php / page stubs)
   ========================================================= */
.page-stub {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 4rem 1rem;
}
.page-stub h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
.page-stub p { color: var(--color-text-muted); margin-bottom: 2rem; max-width: 36rem; }

/* =========================================================
   PARITY ROUND 2 — Vercel WP gap fixes (1.0.5)
   ========================================================= */

/* G1 — hero entrance animations + gentle infinite CTA bounce.
   Selectors target this theme's actual hero markup (heading-mobile/desktop wrappers + CTA classes).
   IMPORTANT — opacity-fallback fix: the initial `opacity: 0` used to live on the
   element itself, which meant headless Playwright captures (and any client where
   the animation never fired) showed an invisible H1 + CTAs. We now default to
   opacity:1 and only animate when the browser explicitly allows motion. The
   `from {opacity:0}` inside the keyframe still produces the fade entrance for
   real users without risking a permanently-invisible hero. */
@keyframes twoaFadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Lane 2 #51 — bounce amplitude bumped from -4px → -10px (Vercel parity). */
@keyframes twoaBounceSlow {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* Default (no-JS, no-animation, reduced-motion, screenshot) — fully visible. */
.hero__heading-mobile h1,
.hero__heading-desktop h1,
.hero__cta-row .hero__cta-exterior,
.hero__cta-row .hero__cta-interior,
.hero__cta-desktop-ext .hero__cta-exterior,
.hero__cta-desktop-int .hero__cta-interior {
    opacity: 1;
}

/* Only trigger the entrance + bounce animations when the user hasn't asked for
   reduced motion. The keyframe still starts from opacity:0 so the fade is
   preserved, but the end state is opacity:1 (forwards) which matches the
   default rule above. */
@media (prefers-reduced-motion: no-preference) {
    .hero__heading-mobile h1,
    .hero__heading-desktop h1 {
        animation: twoaFadeInUp 0.7s 0.4s ease-out both;
    }
    /* Lane 2 #52 — entrance delays 0.6s→0.4s (ext) and 0.7s→0.5s (int) per Vercel. */
    .hero__cta-row .hero__cta-exterior,
    .hero__cta-desktop-ext .hero__cta-exterior {
        animation: twoaFadeInUp 0.7s 0.4s ease-out both,
                   twoaBounceSlow 2.5s 1.5s ease-in-out infinite;
    }
    .hero__cta-row .hero__cta-interior,
    .hero__cta-desktop-int .hero__cta-interior {
        animation: twoaFadeInUp 0.7s 0.5s ease-out both,
                   twoaBounceSlow 2.5s 1.9s ease-in-out infinite;
    }
}

/* Lane 2 #141, #142, #143 — About hero H1 Vercel parity (max 40px), leading-tight, no letter-spacing. */
.page-about .about-hero h1,
.page-about #about-hero-title {
    font-size: clamp(1.375rem, 2vw + 0.25rem, 2.5rem);
    line-height: 1.25;
}

/* About hero background — Vercel uses bg-[#f8f7f4]. */
.page-about .about-hero {
    background: #f8f7f4;
    /* Lane 2 #145 — overflow:hidden. */
    overflow: hidden;
}
.dark .page-about .about-hero { background: var(--twoa-dark-deep); }

/* Lane 2 #144 — About hero subtitle paragraph styling. */
.page-about .about-hero p {
    font-size: clamp(0.875rem, 0.7vw + 0.375rem, 1.0625rem);
    color: rgba(52, 52, 52, 0.7);
    line-height: 1.625;
    max-width: 42rem;
}
/* !important needed: the lead paragraphs carry an inline color:rgba(52,52,52,0.7)
   (text-dark/70) which beats this rule by specificity and left the text near-
   invisible on the dark bg. Vercel about hero uses dark:text-white/70 → this color.
   :not(.about-hero__tagline) excludes the orange "Experience the Art of Value."
   tagline so it stays orange in dark mode, matching Vercel. (A class, not an inline
   [style*=…] match — the reveal JS rewrites inline styles and normalizes #eb5d1d to
   rgb(), which would defeat an attribute-substring selector.) */
.dark .page-about .about-hero p:not(.about-hero__tagline) { color: rgba(255, 255, 255, 0.7) !important; }

/* About hero 2-col layout — Vercel uses grid-cols-1 md:grid-cols-2 with
   gap-8/10/12. Without this rule the text + video stack on every breakpoint. */
.page-about .about-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 768px) {
    .page-about .about-hero__grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
}
@media (min-width: 1024px) { .page-about .about-hero__grid { gap: 3rem; } }

/* About > "What We Specialize In" — Vercel renders a 4-up grid of p-8
   cards with an orange icon-pill, h4 title, and body. The shared
   feature-card style is too small (p-8 vs 2rem, no icon), so we use
   a dedicated block here. */
.page-about .about-expertise__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (min-width: 640px) {
    .page-about .about-expertise__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .page-about .about-expertise__grid { grid-template-columns: repeat(4, 1fr); }
}
.page-about .about-expertise__card {
    background: var(--twoa-warm);
    border: 1.5px solid var(--color-border);
    border-radius: 16px;
    padding: 2rem;
    height: 100%;
    transition: all 0.3s ease;
}
.dark .page-about .about-expertise__card {
    background: var(--twoa-dark-mid);
    border-color: var(--twoa-dark-soft);
}
.page-about .about-expertise__card:hover {
    border-color: var(--twoa-orange);
    transform: translateY(-12px);
    box-shadow: 0 24px 50px rgba(0,0,0,0.12);
}
.page-about .about-expertise__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 14px;
    background: var(--twoa-orange-glow);
    color: var(--twoa-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    transition: all 0.3s ease;
}
.page-about .about-expertise__card:hover .about-expertise__icon {
    background: var(--twoa-orange);
    color: #fff;
    transform: scale(1.1);
}
.page-about .about-expertise__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1rem, 1.25vw + 0.25rem, 1.75rem);
    margin: 0 0 0.5rem;
    line-height: 1.25;
    transition: color 0.3s ease;
}
.page-about .about-expertise__card:hover .about-expertise__title { color: var(--twoa-orange); }
.page-about .about-expertise__body {
    font-size: clamp(0.875rem, 0.875vw + 0.25rem, 1.25rem);
    /* Lane 2 #147 — line-height 1.6 → 1.625. */
    line-height: 1.625;
    color: var(--color-text-mid);
    margin: 0;
}
/* Vercel about/page.tsx line 500: `text-text-mid dark:text-gray` (#ededed). */
.dark .page-about .about-expertise__body { color: var(--twoa-gray); }

/* Lane 2 #146 — explicit expertise section bg light + dark. */
.page-about .about-expertise { background: #fff; }
.dark .page-about .about-expertise { background: var(--twoa-dark); }
/* Lane 2 #148 — dark expertise title color. */
.dark .page-about .about-expertise__title { color: #fff; }

/* About > Proudly Serving — centered title + full-width map + project strip.
   Different shape from homepage 2-col service-area partial. */
.page-about .about-area { background: #fff; }
.dark .page-about .about-area { background: var(--twoa-dark-mid); }
.page-about .about-area__chips {
    justify-content: center;
    margin-top: 0;
    /* Lane 2 #149 — margin-bottom 2.5rem → 3rem. */
    margin-bottom: 3rem;
}
.page-about .about-area__map-wrap {
    width: 100%;
    margin: 0;
    /* Lane 2 #150 — shadow-m parity. */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.page-about .about-area__map-wrap #twoa-area-map {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    border: 2px solid var(--color-border);
    overflow: hidden;
}
@media (min-width: 1024px) {
    .page-about .about-area__map-wrap #twoa-area-map { aspect-ratio: 21 / 9; }
}
.page-about .about-area__projects { margin-top: 3rem; }
.page-about .about-area__projects-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.125rem, 1.5vw + 0.25rem, 2rem);
    margin: 0 0 1.5rem;
}
.page-about .about-area__projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (min-width: 640px) { .page-about .about-area__projects-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .page-about .about-area__projects-grid { grid-template-columns: repeat(6, 1fr); gap: 1rem; } }
.page-about .about-area__project {
    position: relative;
    margin: 0;
    border: 2px solid var(--color-border);
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    transition: border-color 0.3s ease;
}
.dark .page-about .about-area__project { border-color: var(--twoa-dark-soft); }
.page-about .about-area__project:hover { border-color: var(--twoa-orange); }
.page-about .about-area__project img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.page-about .about-area__project:hover img { transform: scale(1.05); }
.page-about .about-area__project-caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
    color: #fff;
    gap: 0.25rem;
}
.page-about .about-area__project-title {
    font-weight: 700;
    /* Lane 2 #151 — 16-24px Vercel parity. */
    font-size: clamp(1rem, 1.25vw + 0.25rem, 1.5rem);
    line-height: 1.25;
}
.page-about .about-area__project-loc {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    /* Lane 2 #152 — 14-18px Vercel parity, alpha 0.85 → 0.80. */
    font-size: clamp(0.875rem, 0.875vw + 0.25rem, 1.125rem);
    color: rgba(255,255,255,0.80);
}

/* Lane 2 #153 — CTA banner section bg + border-top + padding. */
.page-about .cta-banner {
    padding: 4rem 0;
    background: #fff;
    border-top: 1px solid var(--color-border);
}
.dark .page-about .cta-banner {
    background: var(--twoa-dark);
    border-top-color: var(--twoa-dark-deep);
}
/* G3 — About final CTA banner — small heading, not a section title. */
.page-about .cta-banner h2 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    /* Lane 2 #154 — drop letter-spacing -0.25px. */
    /* Lane 2 #155 — margin-bottom 0.5rem → 0.625rem (mb-2.5). */
    margin: 0 0 0.625rem;
}
.page-about .cta-banner .cta-banner__sub {
    font-size: 1rem;
    color: var(--color-text-mid);
    margin: 0;
}

/* G4 — service-card h3 line-height parity (Vercel 28px). */
.service-card__body h3 { line-height: 28px; }

/* G5 — services-grid gap parity. Vercel uses `gap-5` (1.25rem) across all
   breakpoints; previously bumped to 3-4rem here which actually NARROWS the
   cards (the opposite of what the old comment claimed). Reverted to 1.25rem
   so card widths match Vercel at 1440. */
@media (min-width: 1024px) {
    .services-grid--ext { column-gap: 1.25rem; }
    .services-grid--int { column-gap: 1.25rem; }
}

/* G6 — hero image aspect ratio parity (Vercel ≈ 1.865:1).
   IMPORTANT: only constrain the mobile image. On desktop the <img> is
   absolutely positioned inside .hero__image-area which itself stretches to
   `flex: 1 1 0` to fill `calc(100dvh - 120px)`. Applying aspect-ratio to the
   desktop <img> overrides its width/height:100% and shrinks the rendered
   image, leaving a large white gap below the house and pushing the CTAs out
   of position. */
/* Lane 2 #43 — removed mobile aspect-ratio override (letterboxed the image). */

/* G8 — hero h1 letter-spacing parity (-0.025em vs -0.02em). */
.hero__heading-mobile h1,
.hero__heading-desktop h1 { letter-spacing: -0.025em; }

/* G15 — header dropdown :hover/:focus warm bg + orange text (Vercel parity). */
.nav-dropdown a:hover,
.nav-dropdown a:focus {
    background: var(--twoa-warm, #f8f5f2);
    color: var(--twoa-orange);
}

/* =========================================================
   V1.0.7 → V1.0.8 SENIOR PORT — full Vercel hover/animation parity
   Mirrors globals.css keyframes, .btn-submit-premium, every interactive
   hover state surfaced in the Vercel components, dark-mode patches, and
   reduced-motion guards. Additive only — does not override v1.0.5 rules.
   ========================================================= */

/* ------------------------------------------------------------------
   1. KEYFRAME LIBRARY (twoa- prefix — mirrors Vercel globals.css)
   ------------------------------------------------------------------ */
@keyframes twoaFadeIn       { from { opacity: 0; } to { opacity: 1; } }
@keyframes twoaFadeInDown   { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes twoaFadeInLeft   { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes twoaFadeInRight  { from { opacity: 0; transform: translateX(30px); }  to { opacity: 1; transform: translateX(0); } }
@keyframes twoaScaleIn      { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes twoaPopIn {
    0%   { opacity: 0; transform: scale(0.8); }
    70%  { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes twoaPulseGlow {
    0%, 100% { box-shadow: 0 0 0 0   rgba(235, 93, 29, 0.40); }
    50%      { box-shadow: 0 0 20px 10px rgba(235, 93, 29, 0); }
}
@keyframes twoaGlowPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(235, 93, 29, 0.30); }
    50%      { box-shadow: 0 8px 32px rgba(235, 93, 29, 0.50); }
}
@keyframes twoaFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-15px); }
}
@keyframes twoaSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes twoaInputReveal {
    0%   { opacity: 0; transform: translateY(20px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes twoaInputFocusGlow {
    0%   { box-shadow: 0 0 0  0 rgba(235, 93, 29, 0); }
    50%  { box-shadow: 0 0 20px 4px rgba(235, 93, 29, 0.15); }
    100% { box-shadow: 0 0 0  4px rgba(235, 93, 29, 0.10); }
}
@keyframes twoaFormLift {
    0%   { opacity: 0; transform: translateY(40px); box-shadow: 0 0 0 rgba(0,0,0,0); }
    100% { opacity: 1; transform: translateY(0);    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); }
}
@keyframes twoaButtonShine {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
@keyframes twoaSuccessCircle {
    0%   { transform: scale(0);   opacity: 0; }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1);   opacity: 1; }
}
@keyframes twoaCheckmarkDraw {
    0%   { stroke-dashoffset: 50; }
    100% { stroke-dashoffset: 0; }
}
@keyframes twoaShake {
    0%, 100%                 { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90%  { transform: translateX(-4px); }
    20%, 40%, 60%, 80%       { transform: translateX(4px); }
}

/* Lane 2 #17 — Hero scroll indicator keyframes (Vercel Hero.tsx 228-256). */
@keyframes twoaScrollText {
    0%, 100% { opacity: 0.5; transform: translateY(0); }
    50%      { opacity: 1;   transform: translateY(-2px); }
}
@keyframes twoaScrollLine {
    0%   { transform: scaleY(0); opacity: 1; }
    100% { transform: scaleY(1); opacity: 0; }
}

/* Lane 2 #18 — Image skeleton shimmer. */
@keyframes twoaShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* Lane 2 #19 — Marquee + scroll loops + line shimmer (Vercel globals.css). */
@keyframes twoaMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes twoaScrollUp {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
@keyframes twoaScrollDown {
    0%   { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}
@keyframes twoaScrollHorizontal {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes twoaLineShimmer {
    0%   { background-position: -200% 50%; }
    100% { background-position:  200% 50%; }
}

/* Lane 2 #20 — ServiceGallery entrance keyframes. */
@keyframes twoaCarouselFadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes twoaCarouselZoomFade {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes twoaCarouselFlipIn {
    from { opacity: 0; transform: perspective(800px) rotateY(35deg); }
    to   { opacity: 1; transform: perspective(800px) rotateY(0); }
}

/* Lane 2 #21 — Polish keyframes (Vercel globals.css 587-724). */
@keyframes twoaArrowPulse {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}
@keyframes twoaCardReveal3D {
    0%   { opacity: 0; transform: perspective(1000px) rotateY(-15deg) translateY(40px); }
    100% { opacity: 1; transform: perspective(1000px) rotateY(0) translateY(0); }
}
@keyframes twoaCardShimmer {
    0%   { background-position: -150% 0; opacity: 0; }
    50%  { opacity: 1; }
    100% { background-position:  150% 0; opacity: 0; }
}
@keyframes twoaBorderGlow {
    0%, 100% { box-shadow: 0 0 0  0 rgba(235, 93, 29, 0.50); }
    50%      { box-shadow: 0 0 24px 6px rgba(235, 93, 29, 0); }
}
@keyframes twoaFloatBadge {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-6px) rotate(-2deg); }
}
@keyframes twoaCountUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes twoaPulseRing {
    0%   { opacity: 0.6; transform: scale(0.9); }
    100% { opacity: 0;   transform: scale(1.6); }
}
@keyframes twoaSpotlightSweep {
    0%   { transform: translateX(-120%) skewX(-12deg); opacity: 0; }
    50%  { opacity: 0.5; }
    100% { transform: translateX(220%) skewX(-12deg);  opacity: 0; }
}
@keyframes twoaIconBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
@keyframes twoaMorphBg {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes twoaPriceSwing {
    0%, 100% { transform: rotate(0) scale(1); }
    50%      { transform: rotate(-2deg) scale(1.04); }
}
@keyframes twoaCheckPop {
    0%   { transform: scale(0)   rotate(-45deg); opacity: 0; }
    60%  { transform: scale(1.2) rotate(0); opacity: 1; }
    100% { transform: scale(1)   rotate(0); opacity: 1; }
}

/* Lane 2 #22 — FinancingCTA slow pulse for decorative orange circle. */
@keyframes twoaSlowPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* Utility classes — opt-in animation hooks for inline use. */
.twoa-anim-fade-in       { animation: twoaFadeIn 0.6s ease-out forwards; }
.twoa-anim-fade-in-up    { animation: twoaFadeInUp 0.7s ease-out forwards; opacity: 0; }
.twoa-anim-fade-in-down  { animation: twoaFadeInDown 0.7s ease-out forwards; opacity: 0; }
.twoa-anim-fade-in-left  { animation: twoaFadeInLeft 0.7s ease-out forwards; opacity: 0; }
.twoa-anim-fade-in-right { animation: twoaFadeInRight 0.7s ease-out forwards; opacity: 0; }
.twoa-anim-scale-in      { animation: twoaScaleIn 0.5s ease-out forwards; opacity: 0; }
.twoa-anim-pop-in        { animation: twoaPopIn 0.5s ease-out forwards; opacity: 0; }
.twoa-anim-float         { animation: twoaFloat 4s ease-in-out infinite; }
.twoa-anim-pulse-glow    { animation: twoaPulseGlow 2s ease-in-out infinite; }
.twoa-anim-glow-pulse    { animation: twoaGlowPulse 2s ease-in-out infinite; }

/* Stagger helpers (mirror Vercel .animation-delay-*). */
.twoa-delay-100 { animation-delay: 100ms; }
.twoa-delay-200 { animation-delay: 200ms; }
.twoa-delay-300 { animation-delay: 300ms; }
.twoa-delay-400 { animation-delay: 400ms; }
.twoa-delay-500 { animation-delay: 500ms; }
.twoa-delay-600 { animation-delay: 600ms; }

/* ------------------------------------------------------------------
   2. SCROLL-REVEAL STAGGER + REDUCED MOTION SHORT-CIRCUIT
   The base [data-reveal] rule + IntersectionObserver hookup live earlier
   in this file. This block adds explicit per-step stagger delays so the
   theme can mark up `<div data-reveal data-reveal-delay="2">`.
   ------------------------------------------------------------------ */
[data-reveal][data-reveal-delay="1"].is-revealed { transition-delay: 100ms; }
[data-reveal][data-reveal-delay="2"].is-revealed { transition-delay: 200ms; }
[data-reveal][data-reveal-delay="3"].is-revealed { transition-delay: 300ms; }
[data-reveal][data-reveal-delay="4"].is-revealed { transition-delay: 400ms; }
[data-reveal][data-reveal-delay="5"].is-revealed { transition-delay: 500ms; }
[data-reveal][data-reveal-delay="6"].is-revealed { transition-delay: 600ms; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    [data-reveal][data-reveal-delay] { transition-delay: 0ms !important; }
}

/* ------------------------------------------------------------------
   3. .btn-submit-premium — full Vercel parity
   Vercel rule: gradient bg + lifted shadow + hover lift + sweeping shine
   pseudo. WP previously had simple lift + shadow. Adds the ::before
   shine sweep, loading spinner, success state, disabled state.
   ------------------------------------------------------------------ */
.btn-submit-premium {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.25rem;
    overflow: hidden;
    background: linear-gradient(to right, var(--twoa-orange), var(--twoa-orange-dark));
    color: #fff;
    border-radius: 9999px;
    box-shadow: 0 10px 24px rgba(235, 93, 29, 0.30);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}
.btn-submit-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.30) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-position: -200% center;
    transition: background-position 0.5s ease;
    pointer-events: none;
    border-radius: inherit;
}
@media (hover: hover) {
    .btn-submit-premium:hover {
        /* Lane 2 #69 — lift -2 → -4 (Vercel -translate-y-1). */
        transform: translateY(-4px);
        /* Lane 2 #70 — shadow alpha 0.45 → 0.40 (Vercel parity). */
        box-shadow: 0 16px 36px rgba(235, 93, 29, 0.40);
    }
    .btn-submit-premium:hover::before { background-position: 200% center; }
}
.btn-submit-premium:active {
    transform: translateY(0);
    box-shadow: 0 6px 18px rgba(235, 93, 29, 0.30);
}
.btn-submit-premium:disabled,
.btn-submit-premium[aria-busy="true"] {
    opacity: 0.7;
    cursor: wait;
    transform: none;
    box-shadow: 0 6px 18px rgba(235, 93, 29, 0.20);
}
.btn-submit-premium:disabled::before { display: none; }

/* Loading spinner — add class via JS during submit. */
.btn-submit-premium.is-loading > span,
.btn-submit-premium.is-loading > svg { opacity: 0; }
.btn-submit-premium.is-loading::after {
    content: "";
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: twoaSpin 1s linear infinite; /* Lane 2 #172 — 0.8s → 1s, Vercel animate-spin parity */
}

/* Success state — green gradient + checkmark sweep. */
.btn-submit-premium.is-success {
    background: linear-gradient(to right, #22c55e, #16a34a);
    box-shadow: 0 10px 24px rgba(34, 197, 94, 0.30);
}
.btn-submit-premium.is-success:hover {
    box-shadow: 0 16px 36px rgba(34, 197, 94, 0.45);
}

/* ------------------------------------------------------------------
   4. PREMIUM INPUT POLISH — focus glow + soft hover border + lift
   Vercel `.input-premium:focus` triggers `inputFocusGlow` animation
   + translateY(-2px). WP base rule already lifts by -1px; we add the
   keyframe-driven glow + soft hover. Plus the disabled state.
   ------------------------------------------------------------------ */
@media (hover: hover) {
    .input-premium:hover,
    .textarea-premium:hover,
    .select-premium:hover {
        border-color: rgba(235, 93, 29, 0.50);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
}
/* Lane 2 #67 — input focus glow animation (Vercel parity). */
.input-premium:focus,
.textarea-premium:focus,
.select-premium:focus {
    animation: twoaInputFocusGlow 0.6s ease-out both;
}

/* Lane 2 #65 — estimate-card entrance lift (gated by reduced-motion). */
@media (prefers-reduced-motion: no-preference) {
    .estimate-card {
        animation: twoaFormLift 0.7s 0.4s ease-out both;
    }
    /* Lane 2 #66 — staggered input reveal (100ms steps). */
    .estimate-grid > .form-field {
        animation: twoaInputReveal 0.5s ease-out both;
    }
    .estimate-grid > .form-field:nth-child(1) { animation-delay: 0.5s; }
    .estimate-grid > .form-field:nth-child(2) { animation-delay: 0.6s; }
    .estimate-grid > .form-field:nth-child(3) { animation-delay: 0.7s; }
    .estimate-grid > .form-field:nth-child(4) { animation-delay: 0.8s; }
    .estimate-grid > .form-field:nth-child(5) { animation-delay: 0.9s; }
    .estimate-grid > .form-field:nth-child(6) { animation-delay: 1.0s; }
    .estimate-grid > .form-field:nth-child(7) { animation-delay: 1.1s; }
    .estimate-grid > .form-field:nth-child(n+8) { animation-delay: 1.2s; }
}
.input-premium::placeholder,
.textarea-premium::placeholder {
    /* Lane 2 #63 — Tailwind text-gray-400 parity. */
    color: #9ca3af;
    opacity: 1;
}
.input-premium:disabled,
.textarea-premium:disabled,
.select-premium:disabled {
    /* Lane 2 #62 — disabled opacity 0.55 → 0.70. */
    opacity: 0.70;
    cursor: not-allowed;
    background-color: var(--color-bg-secondary);
}
.input-premium[aria-invalid="true"],
.textarea-premium[aria-invalid="true"],
.select-premium[aria-invalid="true"] {
    border-color: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
    animation: twoaShake 0.5s ease-out;
}

/* form-field-group lift on focus-within (parity with Vercel). */
.form-field {
    transition: transform 0.25s ease;
}
.form-field:focus-within {
    transform: translateY(-2px);
}

/* Exception: the field wrapping the custom-select must NOT create a
   stacking context, otherwise the absolutely-positioned dropdown gets
   trapped beneath sibling fields. */
.form-field:has(.twoa-custom-select):focus-within {
    transform: none;
}

/* Belt-and-braces: elevate the open custom-select's wrapping field above
   its siblings so the dropdown escapes even in browsers where :has()
   doesn't suppress the transform stacking context. */
.form-field:has(.twoa-custom-select.is-open) {
    position: relative;
    z-index: 50;
}

/* ------------------------------------------------------------------
   5. BUTTON POLISH — .btn-primary, .btn-outline, .btn-ghost, .btn-dark
   Vercel uses `hover:bg-orange-dark hover:-translate-y-0.5 hover:shadow-orange-md`
   (solid color swap, not brightness filter). Align WP to the same model.
   Keep the existing brightness rule above; this section adds: outline,
   ghost, dark variants + a unified `:active` snap + focus-visible ring.
   ------------------------------------------------------------------ */
.btn-outline:focus-visible,
.btn-primary:focus-visible,
.btn-dark:focus-visible,
.btn-ghost:focus-visible {
    outline: 3px solid var(--twoa-orange);
    outline-offset: 3px;
}
.btn-primary:active,
.btn-outline:active,
.btn-dark:active,
.btn-ghost:active {
    transform: translateY(1px) scale(0.98);
    transition: transform 0.1s var(--ease-out-cubic);
}
.btn-primary:disabled,
.btn-outline:disabled,
.btn-dark:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* Ghost button — Vercel uses for low-emphasis CTAs. */
.btn-ghost {
    background: transparent;
    color: var(--color-text-primary);
    border: none;
    transition: all 0.3s ease;
}
.btn-ghost:hover {
    background: var(--twoa-orange-glow);
    color: var(--twoa-orange);
}

.btn-dark {
    background: var(--twoa-dark);
    color: #fff;
    transition: all 0.3s ease;
}
.btn-dark:hover {
    background: var(--twoa-dark-deep);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

/* Suppress hover transforms on touch devices to avoid sticky-hover. */
@media (hover: none) {
    .btn-primary:hover,
    .btn-dark:hover,
    .btn-outline:hover,
    .btn-ghost:hover,
    .btn-submit-premium:hover {
        transform: none;
    }
}

/* ------------------------------------------------------------------
   6. HEADER CTA pill — Vercel adds hover:scale-105 on top of .btn-primary
   ------------------------------------------------------------------ */
@media (hover: hover) {
    .header-cta.btn-primary:hover {
        transform: translateY(-2px) scale(1.05);
    }
}

/* ------------------------------------------------------------------
   7. SERVICE / WHY-CHOOSE / PROCESS card hover polish
   Vercel `WhyChooseUs.tsx`: card has hover:z-10 (raises above siblings).
   Vercel `Process.tsx`: number scales 1.1 + shadow-orange-lg.
   WP already lifts + borders these; add the missing z-index + tinted
   background hover, plus the title color shift on .why-card.
   ------------------------------------------------------------------ */
.feature-card,
.process-step {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
/* Lane 2 #90 — gradient bg removed for strict Vercel parity. */
.feature-card:hover {
    z-index: 10;
}
.feature-card:hover h3 {
    color: var(--twoa-orange);
    transition: color 0.3s ease;
}
.process-step:hover h3 {
    color: var(--twoa-orange);
    transition: color 0.3s ease;
}
@media (hover: none) {
    .feature-card:hover,
    .process-step:hover,
    .service-card:hover { transform: none; }
}

/* ------------------------------------------------------------------
   8. GALLERY hover overlay (Vercel parity)
   Existing rules already scale image + fade overlay. Add the label
   slide-up motion that Vercel `Gallery.tsx` ships via translate-y-4
   → translate-y-0 on group-hover.
   ------------------------------------------------------------------ */
.gallery-item__overlay span,
.gallery-item__overlay .gallery-item__label {
    transform: translateY(1rem);
    transition: transform 0.5s var(--ease-out-cubic);
}
.gallery-item:hover .gallery-item__overlay span,
.gallery-item:hover .gallery-item__overlay .gallery-item__label {
    transform: translateY(0);
}
/* Orange border tint on gallery item hover (mirrors Vercel border-orange/50). */
.gallery-item {
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}
.gallery-item:hover {
    border-color: rgba(235, 93, 29, 0.5);
}

/* ------------------------------------------------------------------
   9. FOOTER social icons — add scale lift on hover (Vercel parity).
   Base rule already swaps color + bg; ensure scale stays on touch
   devices' tap state too via :focus-visible.
   ------------------------------------------------------------------ */
.footer-socials a:focus-visible {
    background: var(--twoa-orange);
    color: #fff;
    outline-offset: 4px;
}

/* Lane 2 #166 — translateX(2px) removed for strict Vercel parity. */
.footer-col a {
    transition: color 0.2s ease;
}

/* ------------------------------------------------------------------
   10. FINANCING CTA — lift + glow on the button (group hover translate
        on the arrow). Vercel `FinancingCTA.tsx` uses hover:scale-105 +
        hover:gap-3 + arrow translate-x-1.
   ------------------------------------------------------------------ */
.financing-cta .btn-primary {
    transition: transform 0.3s ease, box-shadow 0.3s ease, gap 0.3s ease, background-color 0.3s ease;
}
@media (hover: hover) {
    .financing-cta .btn-primary:hover {
        transform: translateY(-2px) scale(1.05);
        gap: 0.75rem;
        box-shadow: 0 0 30px rgba(235, 93, 29, 0.35), 0 8px 24px rgba(235, 93, 29, 0.35);
    }
    .financing-cta .btn-primary:hover svg {
        transform: translateX(4px);
    }
}
.financing-cta .btn-primary svg {
    transition: transform 0.3s ease;
}

/* ------------------------------------------------------------------
   11. SERVICE-AREA CHIPS — already styled; add the dark-mode tint that
        Vercel `CityChips.tsx` uses on hover (`dark:hover:bg-orange-glow`).
   ------------------------------------------------------------------ */
.dark .city-chip:hover {
    background: rgba(235, 93, 29, 0.18);
    color: var(--twoa-orange);
    border-color: var(--twoa-orange);
}

/* ------------------------------------------------------------------
   12. TESTIMONIAL CARD hover (Vercel `Testimonials.tsx` line 151):
        hover:border-orange + hover:shadow-m + hover:-translate-y-1
        + group-hover on avatar (bg-orange, text-white) and cite (text-orange)
   ------------------------------------------------------------------ */
.testimonial-card .avatar,
.testimonial-card cite {
    transition: background-color 0.3s ease, color 0.3s ease;
}
.testimonial-card:hover .avatar {
    background: var(--twoa-orange);
    color: #fff;
}
.testimonial-card:hover cite {
    color: var(--twoa-orange);
}

/* ------------------------------------------------------------------
   13. NAV LINK underline — REMOVED per Lane 2 #32/167 (Vercel ships
        chevron-only; strict parity wins). The position:relative is kept
        because nested rules elsewhere rely on it.
   ------------------------------------------------------------------ */
.nav-item__toggle,
.nav-item > a {
    position: relative;
}

/* ------------------------------------------------------------------
   14. SERVICE PARTIAL POLISH — extend the inline <style> blocks shipped
        in service-pricing-plans.php / service-cost-estimator.php /
        service-whats-included.php / service-popular-upgrades.php /
        service-materials.php / service-request-form.php. Inline blocks
        are kept as fallback; these rules add the higher-end Vercel touch:
        gradient shimmer on the "popular" card, badge float, soft hover
        glow, dark-mode polish, and animated reveal on the price.
   ------------------------------------------------------------------ */

/* Pricing-plan cards — popular badge floats; card border glows on hover. */
.twoa-pricing-card {
    position: relative;
    /* No overflow:hidden — Vercel's popular card lets the "Best Value" badge
       overflow above the card (-top-4). The ::before gradient keeps the card's
       rounded corners via border-radius:inherit instead of clipping. */
}
.twoa-pricing-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(235, 93, 29, 0.08) 0%,
        transparent 50%,
        rgba(235, 93, 29, 0.04) 100%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.twoa-pricing-card:hover::before { opacity: 1; }
/* Lane 2 #164 — badge animation switched from twoaFloat → twoaPulseGlow (Vercel parity). */
.twoa-pricing-card--popular .twoa-pricing-card__badge {
    animation: twoaPulseGlow 2s ease-in-out infinite;
    box-shadow: 0 6px 18px rgba(235, 93, 29, 0.35);
}
.twoa-pricing-card--popular:hover .twoa-pricing-card__badge {
    animation-play-state: paused;
    transform: translateX(-50%) scale(1.06);
}
/* Lane 2 #165 — price scale hover removed (extra polish, not in Vercel). */
@media (hover: none) {
    .twoa-pricing-card:hover { transform: none; }
}

/* Cost estimator results — pop-in when computed (.is-visible class added by JS). */
.twoa-cost-estimator__results.is-visible .twoa-cost-result {
    animation: twoaPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
}
.twoa-cost-estimator__results.is-visible .twoa-cost-result:nth-child(1) { animation-delay: 0.05s; }
.twoa-cost-estimator__results.is-visible .twoa-cost-result:nth-child(2) { animation-delay: 0.15s; }
.twoa-cost-estimator__results.is-visible .twoa-cost-result:nth-child(3) { animation-delay: 0.25s; }
.twoa-cost-result {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.twoa-cost-result:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(235, 93, 29, 0.12);
}
.twoa-cost-estimator__field input {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.twoa-cost-estimator__field input:focus {
    transform: translateY(-1px);
}

/* Whats-included list items — cascade slide-in on reveal. */
.twoa-whats-included.is-revealed .twoa-whats-included__list li {
    opacity: 0;
    animation: twoaFadeInLeft 0.5s ease-out forwards;
}
.twoa-whats-included.is-revealed .twoa-whats-included__list li:nth-child(1)  { animation-delay: 0.05s; }
.twoa-whats-included.is-revealed .twoa-whats-included__list li:nth-child(2)  { animation-delay: 0.10s; }
.twoa-whats-included.is-revealed .twoa-whats-included__list li:nth-child(3)  { animation-delay: 0.15s; }
.twoa-whats-included.is-revealed .twoa-whats-included__list li:nth-child(4)  { animation-delay: 0.20s; }
.twoa-whats-included.is-revealed .twoa-whats-included__list li:nth-child(5)  { animation-delay: 0.25s; }
.twoa-whats-included.is-revealed .twoa-whats-included__list li:nth-child(6)  { animation-delay: 0.30s; }
.twoa-whats-included.is-revealed .twoa-whats-included__list li:nth-child(7)  { animation-delay: 0.35s; }
.twoa-whats-included.is-revealed .twoa-whats-included__list li:nth-child(8)  { animation-delay: 0.40s; }
.twoa-whats-included.is-revealed .twoa-whats-included__list li:nth-child(9)  { animation-delay: 0.45s; }
.twoa-whats-included.is-revealed .twoa-whats-included__list li:nth-child(n+10) { animation-delay: 0.50s; }
.twoa-whats-included__list li {
    padding: 0.15rem 0;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.twoa-whats-included__list li:hover {
    background: rgba(235, 93, 29, 0.06);
    transform: translateX(2px);
}
.twoa-whats-included__num {
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.twoa-whats-included__list li:hover .twoa-whats-included__num {
    background: var(--twoa-orange);
    color: #fff;
    transform: scale(1.08);
}

/* Popular-upgrade cards — orange dot pulse + title color shift on hover. */
.twoa-upgrade-card__dot {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.twoa-upgrade-card:hover .twoa-upgrade-card__dot {
    transform: scale(1.35);
    box-shadow: 0 0 0 4px rgba(235, 93, 29, 0.18);
}
.twoa-upgrade-card__title { transition: color 0.3s ease; }
.twoa-upgrade-card:hover .twoa-upgrade-card__title {
    color: var(--twoa-orange);
}

/* Material/brand/cabinet cards — title underline draw + price scale on hover. */
.twoa-material-card__name {
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
}
.twoa-material-card__name::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--twoa-orange);
    transition: width 0.4s var(--ease-out-cubic);
}
.twoa-material-card:hover .twoa-material-card__name::after { width: 100%; }
.twoa-material-card__price { transition: transform 0.3s ease; }
.twoa-material-card:hover .twoa-material-card__price { transform: scale(1.06); }

/* Pros/cons list items inside material card — Vercel-style subtle hover tint. */
.twoa-material-card__listblock li {
    padding: 0.25rem 0.5rem;
    margin: 0 -0.5rem;
    border-radius: 0.4rem;
    transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.twoa-material-card__listblock h4 + ul li:hover {
    background: rgba(22, 163, 74, 0.08);
    transform: translateX(3px);
}
.twoa-material-card__listblock h4 {
    /* Disambiguate pros vs cons via accent color on the heading. */
    color: var(--color-text-mid, #4a4a4a);
}
.twoa-material-card__listblock:nth-of-type(odd) h4 { color: #16a34a; }
.twoa-material-card__listblock:nth-of-type(even) h4 { color: #c94a10; }
.twoa-material-card__listblock:nth-of-type(even) h4 + ul li:hover {
    background: rgba(201, 74, 16, 0.08);
    color: #c94a10;
}

/* Service-request form — focus glow + animated reveal on submit success. */
.twoa-service-form { transition: box-shadow 0.5s ease, transform 0.5s ease; }
.twoa-service-form:focus-within {
    box-shadow: 0 30px 60px -20px rgba(235, 93, 29, 0.18), 0 0 0 1px rgba(235, 93, 29, 0.15);
}
.twoa-service-form__field input.input-premium,
.twoa-service-form__field textarea.textarea-premium {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.twoa-service-form__field input.input-premium:focus,
.twoa-service-form__field textarea.textarea-premium:focus {
    transform: translateY(-1px);
}
.twoa-service-form__status[data-state="success"] {
    animation: twoaPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.twoa-service-form__status[data-state="error"] {
    animation: twoaShake 0.5s ease-out;
}

/* ------------------------------------------------------------------
   15. DARK-MODE PATCHES — Vercel uses Tailwind `dark:` variants on every
        interactive surface. Catch surfaces that lacked an explicit dark
        rule above (financing-cta, bottom-contact text contrast, service
        partials).
   ------------------------------------------------------------------ */
/* Lane 2 #134 — dark gradient aligned to Vercel: dark → dark-deep (no pure black). */
.dark .financing-cta {
    background: linear-gradient(135deg, var(--twoa-dark) 0%, var(--twoa-dark-deep) 100%);
}
/* Lane 2 #136, #140 — dark bg dark-deep → dark, border dark-deep. */
.dark .bottom-contact {
    background: var(--twoa-dark);
    border-top-color: var(--twoa-dark-deep);
}
.dark .bottom-contact h2 { color: #fff; }
/* Dark text parity: Vercel BottomContact.tsx email + hours both use
   `dark:text-gray` (#ededed), not graduated white alphas. */
.dark .bottom-contact__email { color: var(--twoa-gray); }
.dark .bottom-contact__hours { color: var(--twoa-gray); }

/* ---- Dark TEXT/HOVER parity sweep (2026-05-26) ----
   Each rule below cites the Vercel `dark:` class it mirrors. Scoped to .dark
   so light mode is untouched; reuses existing --twoa-* / --color-* tokens. */

/* section-subtitle: 25/28 Vercel usages add `dark:text-gray` (#ededed) on top
   of the .section-subtitle base (which would otherwise resolve to
   --color-text-muted #b0b0b0 in dark). Match the dominant variant. */
.dark .section-subtitle { color: var(--twoa-gray); }

/* Estimate form field labels — Vercel EstimateForm.tsx: `text-text-mid
   dark:text-gray` (#ededed). Base --color-text-mid resolves to #b0b0b0 in dark. */
.dark .form-field label { color: var(--twoa-gray); }

/* Testimonial blurb — Vercel Testimonials.tsx line 162: blockquote is
   `text-text-mid dark:text-gray` (#ededed). Base used --color-text-mid (#b0b0b0). */
.dark .testimonial-card blockquote { color: var(--twoa-gray); }

/* City/area chip resting text — Vercel CityChips.tsx: `dark:text-white` (#fff).
   Base .city-chip uses --color-text-primary (#ededed) in dark; bump to pure white. */
.dark .city-chip { color: #fff; }

.dark .twoa-pricing-card__cta {
    background: var(--twoa-dark-soft);
}
.dark .twoa-pricing-card__cta:hover {
    background: var(--twoa-orange);
}
.dark .twoa-cost-result__name,
.dark .twoa-cost-estimator__field label,
.dark .twoa-service-form__field label {
    color: rgba(255, 255, 255, 0.78);
}
.dark .twoa-cost-result__note,
.dark .twoa-cost-estimator__disclaimer {
    color: rgba(255, 255, 255, 0.55);
}
.dark .twoa-material-card__meta strong { color: rgba(255, 255, 255, 0.88); }
.dark .twoa-whats-included__list li:hover {
    background: rgba(235, 93, 29, 0.12);
}

/* ------------------------------------------------------------------
   16. TYPOGRAPHY POLISH — underline-offset on body anchors so the orange
        underline doesn't clip descenders; section-label letter spacing
        bumped slightly tighter on small screens to match Vercel's
        computed `tracking-widest` at 375.
   ------------------------------------------------------------------ */
a {
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
@media (max-width: 480px) {
    .section-label { letter-spacing: 0.12em; }
}
body {
    /* Vercel computed 1.6 line-height matches WP; reaffirm here so
       service-partial inline blocks can't accidentally shrink it. */
    line-height: 1.6;
}

/* ------------------------------------------------------------------
   17. REDUCED-MOTION FINAL GUARD — skip every hover transform and the
        infinite floats so animations don't compete with assistive tech.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .btn-submit-premium,
    .btn-submit-premium::before,
    .btn-submit-premium.is-loading::after,
    .twoa-pricing-card--popular .twoa-pricing-card__badge,
    .twoa-anim-float,
    .twoa-anim-pulse-glow,
    .twoa-anim-glow-pulse {
        animation: none !important;
    }
    .btn-submit-premium:hover,
    .btn-primary:hover,
    .btn-outline:hover,
    .btn-dark:hover,
    .header-cta.btn-primary:hover,
    .financing-cta .btn-primary:hover,
    .feature-card:hover,
    .process-step:hover,
    .service-card:hover,
    .twoa-pricing-card:hover,
    .twoa-material-card:hover,
    .twoa-upgrade-card:hover {
        transform: none !important;
    }
    /* Lane 2 #169 — no-JS / no-anim fallback so data-reveal elements stay visible. */
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
    /* Lane 2 #170 — disable About expertise card hover lift under reduced-motion. */
    .page-about .about-expertise__card:hover {
        transform: none !important;
    }
}

/* =========================================================
   PROJECT GALLERY (service page) — Vercel ProjectGallery.tsx parity
   Default `columns=2` branch (no service page passes columns=3):
   grid-cols-1 sm:grid-cols-2; gap-4 sm:gap-5 lg:gap-6 xl:gap-8.
   Each card: aspect-[4/3], rounded-lg sm:rounded-xl, 2px transparent border,
   hover -> orange border + lift + image scale.
   ========================================================= */
.twoa-project-gallery__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem; /* gap-4 */
}
@media (min-width: 640px)  { .twoa-project-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } } /* sm:grid-cols-2 sm:gap-5 */
@media (min-width: 1024px) { .twoa-project-gallery__grid { gap: 1.5rem; } } /* lg:gap-6 */
@media (min-width: 1280px) { .twoa-project-gallery__grid { gap: 2rem; } }   /* xl:gap-8 */
.twoa-project-gallery__item {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: 0.5rem; /* rounded-lg */
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
@media (min-width: 640px) {
    .twoa-project-gallery__item { border-radius: 0.75rem; } /* sm:rounded-xl */
}
.twoa-project-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease-out-cubic);
}
.twoa-project-gallery__item:hover {
    border-color: var(--twoa-orange);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* hover:shadow-xl */
}
.twoa-project-gallery__item:hover img { transform: scale(1.05); }
@media (min-width: 640px) {
    .twoa-project-gallery__item:hover img { transform: scale(1.10); } /* sm:group-hover:scale-110 */
}
.dark .twoa-project-gallery__item { border-color: var(--twoa-dark-soft); box-shadow: none; }
.dark .twoa-project-gallery__item:hover { box-shadow: 0 8px 30px rgba(235, 93, 29, 0.15); }

/* ---------------------------------------------------------
   Gallery hover overlays + caption — Vercel ProjectGallery.tsx:88-124 parity.
   Card = .twoa-project-gallery__item (the "group"); hover === group-hover.
   --------------------------------------------------------- */

/* (1) Dark gradient overlay: bg-gradient-to-t from-black/70 via-black/20 to-transparent;
   opacity 0 -> 1 on hover, transition-opacity duration-300. */
.twoa-project-gallery__overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to top, rgba(0,0,0,0.70), rgba(0,0,0,0.20) 50%, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}
.dark .twoa-project-gallery__overlay {
    /* dark: from-black/80 via-black/30 to-transparent */
    background-image: linear-gradient(to top, rgba(0,0,0,0.80), rgba(0,0,0,0.30) 50%, transparent);
}
.twoa-project-gallery__item:hover .twoa-project-gallery__overlay { opacity: 1; }

/* (2) Orange glow overlay: bg-gradient-to-t from-orange/20 via-transparent to-transparent;
   opacity 0 -> 1 (dark: -> 0.30) on hover, transition-opacity duration-500, pointer-events:none. */
.twoa-project-gallery__glow {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to top, rgba(235,93,29,0.20), transparent 50%, transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 2;
}
.twoa-project-gallery__item:hover .twoa-project-gallery__glow { opacity: 1; }
.dark .twoa-project-gallery__item:hover .twoa-project-gallery__glow { opacity: 0.30; }

/* (3) Caption: absolute bottom, p-3 (sm:p-4), text-white.
   DESKTOP (>=640px): starts translateY(100%), slides to 0 on hover (transform 300ms).
   MOBILE (<640px): always visible with its own from-black/80 gradient for readability. */
.twoa-project-gallery__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0.75rem; /* p-3 */
    color: #fff;
    z-index: 3;
}
@media (min-width: 640px) {
    .twoa-project-gallery__caption {
        padding: 1rem; /* sm:p-4 */
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }
    .twoa-project-gallery__item:hover .twoa-project-gallery__caption { transform: translateY(0); }
}
/* Mobile-only readability gradient behind the caption (sm:hidden on Vercel). */
.twoa-project-gallery__caption-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to top, rgba(0,0,0,0.80), transparent);
    pointer-events: none;
}
@media (min-width: 640px) {
    .twoa-project-gallery__caption-bg { display: none; }
}
.twoa-project-gallery__caption-inner { position: relative; }

/* Title: font-semibold text-sm (sm:text-base), drop-shadow. */
.twoa-project-gallery__title {
    font-weight: 600;
    font-size: 0.875rem; /* text-sm */
    line-height: 1.25rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* drop-shadow-sm */
}
@media (min-width: 640px) {
    .twoa-project-gallery__title { font-size: 1rem; line-height: 1.5rem; } /* sm:text-base */
}

/* Location row: text-xs (sm:text-sm), text-white/80 (dark:text-white/70), pin + text. */
.twoa-project-gallery__loc {
    display: flex;
    align-items: center;
    gap: 0.25rem; /* gap-1 */
    margin-top: 0.125rem; /* mt-0.5 */
    font-size: 0.75rem; /* text-xs */
    line-height: 1rem;
    color: rgba(255,255,255,0.80);
}
.dark .twoa-project-gallery__loc { color: rgba(255,255,255,0.70); }
@media (min-width: 640px) {
    .twoa-project-gallery__loc { font-size: 0.875rem; line-height: 1.25rem; } /* sm:text-sm */
}
.twoa-project-gallery__pin {
    width: 0.75rem;  /* w-3 */
    height: 0.75rem; /* h-3 */
    flex-shrink: 0;
    opacity: 0.7;
}
@media (min-width: 640px) {
    .twoa-project-gallery__pin { width: 0.875rem; height: 0.875rem; } /* sm:w-3.5 sm:h-3.5 */
}

/* Reduced motion: no transform slide — caption fades in on hover instead. */
@media (prefers-reduced-motion: reduce) {
    .twoa-project-gallery__overlay,
    .twoa-project-gallery__glow { transition: none; }
    @media (min-width: 640px) {
        .twoa-project-gallery__caption {
            transform: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .twoa-project-gallery__item:hover .twoa-project-gallery__caption { opacity: 1; }
    }
}

/* =========================================================
   Wave 3 cleanup — classes referenced by Lane 3/4 markup promotions
   ========================================================= */

/* Lane 3 #14 — VideoSection body: PLAN-10 row VideoSec-Body says
   opacity 0.65, line-height 1.625, margin-bottom 1.75rem. Color stays
   inherit (white-on-dark in the section). */
.video-section__body {
    opacity: 0.65;
    line-height: 1.625;
    margin-bottom: 1.75rem;
}

/* Lane 3 #21 — "More Reviews" caption above testimonial cards.
   PLAN-10 row More-Reviews: tracking-wider = 0.05em. */
.testimonials-more-reviews {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-mid);
    text-align: center;
    margin-bottom: 1.5rem;
}
.dark .testimonials-more-reviews { color: var(--twoa-gray); }

/* Lane 3 #22 — testimonial-card location line (replaces inline style). */
.testimonial-card__location {
    font-size: 0.6875rem;
    color: var(--color-text-light);
}
.dark .testimonial-card__location { color: var(--twoa-gray); }

/* Lane 4 #11 — About quote band container breakpoint widths.
   PLAN-03 row 259 says max-width:48rem base, 56rem @1920, 64rem @2560. */
.about-quote-band__container { max-width: 48rem; }
@media (min-width: 1920px) { .about-quote-band__container { max-width: 56rem; } }
@media (min-width: 2560px) { .about-quote-band__container { max-width: 64rem; } }