/* ================================================================
           HUNTERSVILLE REALTY — VERANDAH
           Instrument Serif × Inter
           Buttercream paper, pine ink, boxwood green, copper CTAs
           ================================================================ */

        @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&display=swap');

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            /* ============================================================
               THE FOUR COLORS — that's the entire palette.
               Everything else aliases down to one of these four.
               ============================================================ */
            --ivory:        #F6F2E4;   /* paper — section surface (warm off-white) */
            --paper-card:   #FFFFFF;   /* card surface — sits above ivory for clear elevation */
            --pine:         #1F3A2E;   /* brand anchor + all dark surfaces */
            --brass:        #A67933;   /* all accents — CTAs, italic, badges, labels (WCAG AA on ivory) */
            --ink:          #1C1C1A;   /* text only */

            /* LEGACY ALIASES — existing CSS uses these names, point them all to the 4 */
            --linen:        var(--ivory);
            --cream:        var(--ivory);        /* no separate cream surface — one paper color */
            --parchment:    var(--ivory);        /* collapse to ivory */
            --stone:        var(--ink);          /* borders use ink (often at low opacity) */
            --driftwood:    var(--ink);
            --oak:          var(--ink);
            --charcoal:     var(--ink);
            --espresso:     var(--ink);
            --amber:        var(--brass);
            --amber-light:  var(--brass);
            --amber-dark:   #7F5F2B;             /* darker brass for hover states */
            --burgundy:     var(--brass);        /* no more burgundy */
            --burgundy-light:var(--brass);
            --burgundy-dark:var(--brass);
            --clay:         var(--brass);
            --pine-deep:    var(--pine);
            --pine-soft:    var(--pine);
            --pine-mist:    var(--brass);        /* labels use brass instead */

            /* Re-aliased to gold — no green anywhere in the system.
               Any stray reference to var(--sage) now renders as gold. */
            --sage:         #A4793D;
            --sage-light:   #C49456;
            --sage-muted:   #CFBF9F;

            /* Spacing rhythm tiers (70-30-10 visual hierarchy) */
            --space-tight:  3rem;
            --space-normal: 4rem;
            --space-loose:  5rem;

            /* Fonts */
            --serif:        'Instrument Serif', Georgia, serif;
            --sans:         'Inter', system-ui, -apple-system, sans-serif;

            /* Grain texture overlay */
            --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");

            /* ================================================================
               DESIGN TOKENS — introduced by AUDIT_FIX_PLAN.md 2026-04-20
               ================================================================ */

            /* Type scale (8 tiers) */
            --fs-xs:   0.75rem;
            --fs-sm:   0.875rem;
            --fs-base: 1rem;
            --fs-md:   1.0625rem;
            --fs-lg:   1.25rem;
            --fs-xl:   1.5rem;
            --fs-2xl:  2rem;
            --fs-3xl:  3rem;

            /* Container widths */
            --container:      1180px;
            --container-wide: 1400px;

            /* Border radius */
            --radius-sm: 2px;
            --radius-md: 4px;

            /* Shared card border */
            --border-card: 1px solid rgba(28, 22, 18, 0.18);

            /* Transitions */
            --transition-fast: 0.2s ease;
            --transition-base: 0.3s ease;

            /* Letter-spacing */
            --ls-tight:  -0.02em;
            --ls-normal: 0;
            --ls-wide:   0.08em;
            --ls-widest: 0.2em;
        }

        html { font-size: 16px; }

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

        body {
            font-family: var(--sans);
            font-weight: 400;
            line-height: 1.7;
            /* Pine is the dominant surface. Flip every text token directly for body scope. */
            --ink: var(--ivory);
            --charcoal: var(--ivory);
            --espresso: var(--ivory);
            --oak: var(--ivory);
            --driftwood: rgba(246, 242, 228, 0.82);
            --stone: rgba(246, 242, 228, 0.22);
            color: var(--ivory);
            background-color: var(--pine);
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        /* Any ivory-backed container flips text tokens back to dark — keeps contrast
           for text inside boxes/sections that sit inside the pine body. */
        .section--cream,
        .about-hero,
        .valuation,
        .valuation__card,
        .valuation-teaser,
        .filter-bar,
        .contact-phone-cta,
        .final-cta-card,
        .testimonial-strip__quote,
        .area-pill,
        .highlight-card,
        .property-card,
        .property-card__body,
        .lead-popup__content {
            --ink: #1C1C1A;
            --charcoal: #1C1C1A;
            --espresso: #0D0D0C;
            --oak: #2C2820;
            --driftwood: rgba(28, 28, 26, 0.65);
            --stone: rgba(28, 28, 26, 0.18);
            color: #1C1C1A;
        }
        .section--cream { background: var(--ivory); }

        /* Same-color adjacent sections: halve the second section's top padding
           at the seam so the rhythm tightens. Different-color transitions keep
           full padding so the color change has breathing room. */

        /* --- Two ivory sections in a row → halve top of the second --- */
        .section--cream + .section--cream { padding-top: calc(var(--space-normal) / 2); }
        .section--cream + .section--loose.section--cream { padding-top: calc(var(--space-loose) / 2); }
        .section--cream + .section--tight.section--cream { padding-top: calc(var(--space-tight) / 2); }

        /* --- Two pine sections in a row (neither is ivory/--cream) → halve
               top of the second. cta-band IS pine, so it participates. --- */
        .section:not(.section--cream) + .section:not(.section--cream) {
            padding-top: calc(var(--space-normal) / 2);
        }
        .section:not(.section--cream) + .section--loose:not(.section--cream) {
            padding-top: calc(var(--space-loose) / 2);
        }
        .section:not(.section--cream) + .section--tight:not(.section--cream) {
            padding-top: calc(var(--space-tight) / 2);
        }

        /* Pine non-.section bands that follow a pine .section (same color
           across a structural boundary) → halve their top padding too. */
        .section:not(.section--cream) + .risk-reversal {
            padding-top: calc(var(--space-normal) / 2);
        }

        /* Final CTA is always pine. If the section above it is also pine (normal
           case on every page), halve its top padding so the seam tightens.
           If the section above is ivory, keep the full top padding. */
        .section:not(.section--cream) + .final-cta {
            padding-top: calc(var(--space-loose) / 2);
        }
        .section--cream + .final-cta {
            padding-top: var(--space-loose);
        }

        /* (Elevated cards rule moved to end of file so it wins source-order) */

        img { max-width: 100%; height: auto; display: block; }
        a { color: var(--amber-dark); text-decoration: none; transition: color 0.3s ease; }
        a:hover { color: var(--amber); }
        ul, ol { list-style: none; }
        button { font-family: inherit; cursor: pointer; border: none; background: none; }

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

        /* Focus-visible styles for keyboard accessibility */
        :focus-visible {
            outline: 2px solid var(--amber);
            outline-offset: 3px;
        }

        button:focus-visible,
        .btn:focus-visible,
        .header__cta:focus-visible,
        .header__link:focus-visible,
        .tabs__btn:focus-visible,
        .testimonial-nav__arrow:focus-visible,
        .testimonials__arrow:focus-visible,
        .nearby-card:focus-visible,
        .area-pill:focus-visible {
            outline: 2px solid var(--amber);
            outline-offset: 3px;
        }

        :focus:not(:focus-visible) {
            outline: none;
        }

        /* ================================================================
           TYPOGRAPHY — Editorial Magazine
           ================================================================ */

        h1, h2, h3, h4 {
            font-family: var(--serif);
            font-weight: 400;
            line-height: 1.05;
            letter-spacing: -0.02em;
            color: var(--espresso);
        }

        h1 { font-size: var(--fs-3xl); }
        h2 { font-size: 2.5rem; }
        h3 { font-size: var(--fs-xl); font-weight: 500; }

        @media (min-width: 768px) {
            h1 { font-size: 4.8rem; }
            h2 { font-size: var(--fs-3xl); }
        }

        @media (min-width: 1024px) {
            h1 { font-size: 6rem; }
            h2 { font-size: 4rem; }
        }

        p { margin-bottom: 1rem; }
        p:last-child { margin-bottom: 0; }

        /* Label / Eyebrow — tiny, tracked, refined */
        .label {
            font-family: var(--sans);
            font-size: var(--fs-xs);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--pine-mist);
            display: flex;
            align-items: center;
            gap: 0.75em;
            margin-bottom: 1.25rem;
        }

        .label::before {
            content: '';
            width: 2em;
            height: 1px;
            background: var(--pine-mist);
        }

        /* ================================================================
           LAYOUT
           ================================================================ */

        .container {
            width: 100%;
            max-width: var(--container);
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        .container--narrow { max-width: 780px; }

        .section {
            padding: var(--space-normal) 0;
            position: relative;
        }

        .section--tight { padding: var(--space-tight) 0; }
        .section--loose { padding: var(--space-loose) 0; }

        /* Alternating section backgrounds */
        .section--cream { background: var(--cream); }

        @media (min-width: 768px) {
            :root {
                --space-tight:  3.5rem;
                --space-normal: 5rem;
                --space-loose:  6.5rem;
            }
        }
        @media (min-width: 1024px) {
            :root {
                --space-tight:  4rem;
                --space-normal: 6rem;
                --space-loose:  8rem;
            }
        }

        /* Grain texture removed — simplicity. The color contrast alone carries the section break. */
        .section--grain::after { content: none; }

        .section > .container { position: relative; z-index: 2; }

        /* ================================================================
           HEADER — Transparent, refined
           ================================================================ */

        .header {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 100;
            transition: background-color 0.4s ease, box-shadow 0.4s ease;
        }

        .header.scrolled,
        body:not(.has-video-hero) .header {
            background-color: var(--linen);
            border-bottom: 1px solid rgba(28, 22, 18, 0.08);
        }
        /* On scrolled ivory header, force dark text (otherwise ivory-on-ivory from pine-body scope) */
        .header.scrolled .header__link,
        body:not(.has-video-hero) .header .header__link { color: #1C1C1A; }
        .header.scrolled .header__link:hover,
        .header.scrolled .header__link--active,
        body:not(.has-video-hero) .header .header__link:hover,
        body:not(.has-video-hero) .header .header__link--active { color: #0D0D0C; }
        .header.scrolled .header__toggle span,
        body:not(.has-video-hero) .header .header__toggle span { background: #1C1C1A; }

        .header__inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: var(--container-wide);
            margin: 0 auto;
            padding: 0 1.5rem;
            height: 72px;
        }

        .header__logo {
            display: inline-flex;
            align-items: center;
            height: 60px;
            text-decoration: none;
            transition: opacity 0.25s ease;
            flex-shrink: 0;
        }

        .header__logo:hover { opacity: 0.7; }

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

        @media (max-width: 767px) {
            .header__logo { height: 48px; }
        }

        .header__nav { display: none; align-items: center; gap: 2.25rem; }
        @media (min-width: 768px) { .header__nav { display: flex; } }

        .header__link {
            font-family: var(--sans);
            font-size: var(--fs-xs);
            font-weight: 500;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--oak);
            text-decoration: none;
            padding: 0.25rem 0;
            position: relative;
            transition: color 0.3s ease;
        }

        .header__link::after {
            content: '';
            position: absolute;
            bottom: 0; left: 50%;
            width: 0; height: 1px;
            background: var(--pine);
            transition: width 0.3s ease, left 0.3s ease;
        }

        .header__link:hover, .header__link--active { color: var(--espresso); }
        .header__link:hover::after, .header__link--active::after { width: 100%; left: 0; }

        .header__cta {
            display: inline-flex;
            align-items: center;
            padding: 0.7rem 1.4rem;
            font-family: var(--sans);
            font-size: var(--fs-xs);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--linen);
            background-color: var(--brass);
            border: none;
            border-radius: 2px;
            text-decoration: none;
            transition: background-color 0.25s ease, transform 0.2s ease;
        }

        .header__cta:hover {
            background-color: var(--amber-dark);
            color: var(--linen);
            transform: translateY(-1px);
        }

        /* Over video hero: keep copper CTA visible */
        body.has-video-hero .header:not(.scrolled) .header__cta {
            background-color: var(--amber);
            color: var(--linen);
            box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
            filter: none;
        }

        /* Mobile toggle */
        .header__toggle {
            display: flex; flex-direction: column; gap: 4px;
            width: 24px; padding: 0;
        }
        @media (min-width: 768px) { .header__toggle { display: none; } }

        .header__toggle span {
            display: block; width: 100%; height: 2px;
            background: var(--espresso);
            transition: all 0.3s ease;
        }

        /* Mobile nav */
        .mobile-nav {
            display: none;
            position: fixed;
            inset: 0;
            background: var(--linen);
            z-index: 90;
            padding: 6rem 2rem 2rem;
            flex-direction: column;
            gap: 0;
        }

        .mobile-nav.is-open { display: flex; }
        @media (min-width: 768px) { .mobile-nav { display: none !important; } }

        /* Hardcoded dark colors here. The body-level token flip turns
           --espresso into ivory (light) for the pine-body scope, which
           would render the menu links invisible against the cream drawer
           bg. Same for --cream on the divider. Hex literals keep them
           dark-on-cream regardless of token state. */
        .mobile-nav__link {
            font-family: var(--serif);
            font-size: var(--fs-2xl);
            color: #1C1C1A;
            padding: 0.75rem 0;
            border-bottom: 1px solid rgba(28, 22, 18, 0.12);
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .mobile-nav__link:hover { color: var(--amber); }

        /* ================================================================
           HERO — Full viewport, layered depth
           ================================================================ */

        .hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .hero__bg {
            position: absolute;
            inset: 0;
            /* Warm editorial gradient — palette tokens only */
            background:
                radial-gradient(ellipse 80% 60% at 30% 70%, rgba(164, 121, 61, 0.08) 0%, transparent 60%),
                radial-gradient(ellipse 60% 80% at 70% 30%, rgba(164, 121, 61, 0.08) 0%, transparent 60%),
                linear-gradient(165deg, var(--parchment) 0%, var(--stone) 40%, var(--driftwood) 75%, var(--oak) 100%);
        }

        .hero__grain {
            position: absolute;
            inset: 0;
            background-image: var(--grain);
            background-repeat: repeat;
            opacity: 0.6;
            pointer-events: none;
        }

        .hero__content {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 6rem 1.5rem 4rem;
            max-width: 800px;
        }

        .hero__headline {
            color: var(--linen);
            font-size: 3.5rem;
            font-weight: 300;
            line-height: 1.0;
            letter-spacing: -0.03em;
            margin-bottom: 1.25rem;
            text-shadow: 0 2px 30px rgba(28, 22, 18, 0.15);
        }

        @media (min-width: 768px) {
            .hero__headline { font-size: 5.5rem; }
        }

        @media (min-width: 1024px) {
            .hero__headline { font-size: 7rem; letter-spacing: -0.04em; }
        }

        .hero__headline em {
            font-style: italic;
            font-weight: 400;
        }

        .hero__sub {
            font-family: var(--sans);
            font-size: var(--fs-base);
            font-weight: 300;
            color: rgba(246, 241, 235, 0.85);
            max-width: 460px;
            margin: 0 auto 2.5rem;
            line-height: 1.7;
            letter-spacing: 0.01em;
        }

        .hero__ctas {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
            margin-bottom: 3rem;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 1rem 2rem;
            font-family: var(--sans);
            font-size: var(--fs-xs);
            font-weight: 500;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            text-decoration: none;
            border-radius: 2px;
            transition: background 0.3s ease, transform 0.25s ease, border-color 0.3s ease, color 0.3s ease;
            min-height: 52px;
            position: relative;
            overflow: hidden;
        }

        .btn--primary {
            background: var(--amber);
            color: var(--linen);
            border: 1px solid var(--amber-dark);
        }

        .btn--primary:hover {
            background: var(--amber-dark);
            border-color: var(--amber-dark);
            color: var(--linen);
            transform: translateY(-1px);
        }

        .btn--outline {
            background: transparent;
            color: var(--linen);
            border: 1px solid rgba(244, 239, 228, 0.5);
        }

        .btn--outline:hover {
            background: rgba(244, 239, 228, 0.1);
            border-color: var(--linen);
            color: var(--linen);
            transform: translateY(-1px);
        }

        .btn--dark {
            background: transparent;
            color: var(--ink);
            border: 1px solid var(--ink);
        }

        .btn--dark:hover {
            background: var(--ink);
            color: var(--pine);
            border-color: var(--ink);
            transform: translateY(-1px);
        }

        /* Social proof pill in hero */
        .hero__proof {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            justify-content: center;
            align-items: center;
        }

        .hero__proof-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: var(--fs-xs);
            color: rgba(246, 241, 235, 0.7);
            font-weight: 300;
        }

        .hero__proof-number {
            font-family: var(--serif);
            font-size: 1.125rem;
            font-weight: 500;
            color: var(--linen);
        }

        .hero__proof-item + .hero__proof-item::before {
            content: '';
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: rgba(246, 241, 235, 0.3);
            margin-right: 0.5rem;
        }

        /* legacy dark-band proof-strip removed — see new light proof-strip in VERANDAH COMPONENTS below */

        /* ================================================================
           WHY MICHELLE — Asymmetric editorial layout
           ================================================================ */

        .why { /* inherits pine body bg */ }

        .why__header {
            max-width: 600px;
            margin-bottom: 2.5rem;
        }

        @media (min-width: 768px) {
            .why__header { margin-bottom: 3rem; }
        }

        .why__header p {
            font-size: var(--fs-md);
            color: var(--oak);
            line-height: 1.8;
            margin-top: 1.25rem;
        }

        .why__grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }

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

        .why__card {
            padding: 2.5rem 2rem;
            background: var(--cream);
            position: relative;
            border: 1px solid rgba(28, 22, 18, 0.18);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }

        .why__card:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 48px rgba(28, 22, 18, 0.08);
        }

        .why__card-number {
            font-family: var(--serif);
            font-size: 3.5rem;
            font-weight: 300;
            color: var(--parchment);
            line-height: 1;
            margin-bottom: 1.25rem;
        }

        .why__card h3 {
            font-family: var(--serif);
            font-size: var(--fs-xl);
            font-weight: 500;
            margin-bottom: 0.75rem;
            color: var(--espresso);
        }

        .why__card p {
            font-size: 0.9375rem;
            color: var(--oak);
            line-height: 1.75;
        }

        .why__cta {
            text-align: center;
            margin-top: 2.5rem;
        }

        /* ================================================================
           FEATURED LISTINGS — Placeholder
           ================================================================ */

        .listings {
            background: var(--cream);
            position: relative;
        }

        .listings::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: var(--grain);
            opacity: 0.4;
            pointer-events: none;
        }

        .listings > .container { position: relative; z-index: 2; }

        .listings__header {
            text-align: center;
            max-width: 600px;
            margin: 0 auto 2rem;
        }

        .listings__header p {
            color: var(--oak);
            margin-top: 1rem;
        }

        .listings__placeholder {
            padding: 4rem 2rem;
            background: var(--linen);
            border: 1px solid var(--parchment);
            text-align: center;
        }

        .listings__placeholder p { color: var(--driftwood); font-size: var(--fs-sm); }

        .listings__disclaimer {
            font-size: var(--fs-xs);
            color: var(--driftwood);
            margin-top: 1.25rem;
            line-height: 1.6;
        }

        .listings__cta { text-align: center; margin-top: 2.5rem; }

        /* ================================================================
           TESTIMONIALS — Large quote, editorial
           ================================================================ */

        .testimonials {
            /* inherits pine body bg */
        }

        .testimonials__header {
            max-width: 500px;
            margin-bottom: 2rem;
        }

        .testimonials__track {
            display: flex;
            gap: 2rem;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            padding-bottom: 0.5rem;
        }

        .testimonials__track::-webkit-scrollbar { display: none; }

        .testimonial {
            flex: 0 0 100%;
            scroll-snap-align: start;
            padding: 2.5rem;
            background: var(--cream);
            border: 1px solid rgba(28, 22, 18, 0.18);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 280px;
        }

        @media (min-width: 640px) { .testimonial { flex: 0 0 calc(50% - 1rem); } }
        @media (min-width: 1024px) { .testimonial { flex: 0 0 calc(33.333% - 1.5rem); } }

        .testimonial__quote {
            font-family: var(--serif);
            font-size: var(--fs-lg);
            font-style: italic;
            font-weight: 400;
            line-height: 1.6;
            color: var(--charcoal);
            margin-bottom: 2rem;
        }

        .testimonial__quote::before {
            content: '\201C';
            font-size: var(--fs-3xl);
            line-height: 0;
            vertical-align: -0.3em;
            color: var(--stone);
            margin-right: 0.25em;
        }

        .testimonial__name {
            font-family: var(--sans);
            font-size: var(--fs-sm);
            font-weight: 600;
            color: var(--espresso);
            font-style: normal;
            display: block;
        }

        .testimonial__location {
            font-size: var(--fs-xs);
            color: var(--driftwood);
            letter-spacing: 0.04em;
        }

        .testimonials__nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
            margin-top: 2.5rem;
        }

        .testimonials__arrow {
            width: 44px; height: 44px;
            display: flex; align-items: center; justify-content: center;
            border: 1px solid var(--stone);
            background: transparent;
            color: var(--oak);
            font-size: var(--fs-lg);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .testimonials__arrow:hover {
            border-color: var(--amber);
            color: var(--amber);
        }

        .testimonials__dots {
            display: flex;
            gap: 0.5rem;
        }

        .testimonials__dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: var(--stone);
            border: none;
            padding: 0;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .testimonials__dot.is-active {
            background: var(--amber);
            transform: scale(1.4);
        }

        /* ================================================================
           CTA SECTION — Full bleed dark
           ================================================================ */

        /* CTA band — flat pine, no decorative overlays. Color + typography
           carry the weight; no gradients or grain texture competing with content. */
        .cta-band {
            background: var(--pine);
            color: var(--linen);
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .cta-band::before,
        .cta-band::after { content: none; }

        .cta-band > .container { position: relative; z-index: 2; }

        .cta-band h2 { color: var(--linen); margin-bottom: 1rem; }

        .cta-band p {
            color: var(--driftwood);
            max-width: 500px;
            margin: 0 auto 2.5rem;
            font-size: var(--fs-base);
        }

        .cta-band__market {
            display: inline-block;
            padding: 1rem 2rem;
            border: 1px solid rgba(246, 241, 235, 0.1);
            margin-bottom: 3rem;
            font-size: var(--fs-sm);
            color: var(--stone);
            line-height: 1.6;
            max-width: 560px;
        }

        .cta-band__market strong {
            color: var(--linen);
            font-weight: 500;
        }

        .cta-split {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
        }

        .btn--amber {
            background: var(--amber);
            color: var(--linen);
            border: 1px solid var(--amber-dark);
        }

        .btn--amber:hover {
            background: var(--amber-dark);
            border-color: var(--amber-dark);
            color: var(--linen);
            transform: translateY(-1px);
        }

        .btn--ghost {
            background: transparent;
            color: var(--linen);
            border: 1px solid rgba(244, 239, 228, 0.35);
        }

        .btn--ghost:hover {
            border-color: var(--linen);
            background: rgba(244, 239, 228, 0.05);
            color: var(--linen);
            transform: translateY(-1px);
        }

        /* ================================================================
           FOOTER — Warm, grounded
           ================================================================ */

        .footer {
            background: var(--pine);
            padding: 4rem 0 3rem;
            color: rgba(246, 242, 228, 0.85);
        }

        .footer a { color: rgba(246, 242, 228, 0.80); }
        .footer a:hover { color: var(--linen); }

        .footer__grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2.5rem;
            margin-bottom: 3rem;
        }

        @media (min-width: 768px) {
            .footer__grid { grid-template-columns: 2fr 1fr 1fr; }
        }

        .footer__brand-name {
            font-family: var(--serif);
            font-size: var(--fs-lg);
            color: var(--linen);
            margin-bottom: 0.75rem;
        }
        .footer__brand-brokerage {
            font-family: var(--sans);
            font-size: 0.7em;
            font-weight: 500;
            letter-spacing: 0.08em;
            color: rgba(246, 242, 228, 0.75);
        }

        .footer__desc { font-size: var(--fs-sm); line-height: 1.7; color: rgba(246, 242, 228, 0.80); max-width: 320px; }

        .footer__heading {
            font-family: var(--sans);
            font-size: var(--fs-xs);
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--linen);
            margin-bottom: 1.25rem;
        }

        .footer__links { display: flex; flex-direction: column; gap: 0.5rem; }
        .footer__links a { font-size: var(--fs-sm); padding: 0.25rem 0; }

        .footer__contact-item {
            display: flex; align-items: center; gap: 0.5rem;
            font-size: var(--fs-sm); margin-bottom: 0.5rem;
            word-break: break-word;
        }

        .footer__social {
            display: flex;
            gap: 0.6rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }
        .footer__social a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border: 1px solid rgba(246, 242, 228, 0.35);
            color: rgba(246, 242, 228, 0.85);
            text-decoration: none;
            transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
        }
        .footer__social a:hover {
            color: var(--linen);
            border-color: var(--linen);
            background-color: rgba(246, 241, 235, 0.05);
        }
        .footer__social svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
        }

        .footer__bottom {
            border-top: 1px solid rgba(207, 191, 159, 0.15);
            padding-top: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        @media (min-width: 768px) {
            .footer__bottom { flex-direction: row; justify-content: space-between; }
        }

        .footer__copyright { font-size: var(--fs-xs); color: var(--driftwood); }
        .footer__disclaimer { font-size: var(--fs-sm); color: rgba(246, 242, 228, 0.85); max-width: 500px; line-height: 1.6; }

        /* ================================================================
           POPUP — Warm modal
           ================================================================ */

        .lead-popup {
            position: fixed; inset: 0; z-index: 200;
            display: flex; align-items: center; justify-content: center;
            opacity: 0; visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .lead-popup[hidden] { display: none; }
        .lead-popup.is-open { opacity: 1; visibility: visible; }

        .lead-popup__overlay {
            position: absolute; inset: 0;
            background: rgba(28, 22, 18, 0.55);
            backdrop-filter: blur(6px);
        }

        .lead-popup__content {
            position: relative;
            width: 90%; max-width: 460px;
            background: var(--linen);
            padding: 2.5rem;
            border: 1px solid rgba(28, 22, 18, 0.18);
            transform: translateY(16px);
            transition: transform 0.4s ease;
        }

        .lead-popup.is-open .lead-popup__content { transform: translateY(0); }

        @media (max-width: 639px) {
            .lead-popup { align-items: flex-end; }
            .lead-popup__content { width: 100%; max-width: none; max-height: 85vh; overflow-y: auto; transform: translateY(100%); }
            .lead-popup.is-open .lead-popup__content { transform: translateY(0); }
        }

        .lead-popup__close {
            width: 32px; height: 32px;
            display: flex; align-items: center; justify-content: center;
            font-size: var(--fs-xl); color: var(--driftwood);
            transition: color 0.2s ease;
            flex-shrink: 0;
            margin: 0; padding: 0;
        }
        .lead-popup__close:hover { color: var(--espresso); }

        .lead-popup__progress { height: 3px; background: var(--parchment); margin-bottom: 1rem; border-radius: 2px; overflow: hidden; }
        .lead-popup__progress-bar { height: 100%; background: var(--charcoal); transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); border-radius: 2px; }

        .lead-form__step[hidden] { display: none; }

        .lead-form__step h2 {
            font-size: var(--fs-xl);
            margin-bottom: 0.5rem;
        }

        .lead-form__step > p { color: var(--oak); margin-bottom: 1.5rem; font-size: 0.9375rem; line-height: 1.6; }

        .lead-form__options { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }

        .lead-form__option {
            padding: 1.5rem 1rem;
            font-family: var(--serif);
            font-size: 1.125rem;
            color: var(--charcoal);
            background: var(--cream);
            border: 1px solid rgba(28, 22, 18, 0.18);
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
        }

        .lead-form__option:hover {
            border-color: var(--charcoal);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.06);
        }

        .form-group { margin-bottom: 1.25rem; }

        .form-label {
            display: block;
            font-size: var(--fs-xs);
            font-weight: 500;
            color: #1C1C1A;
            margin-bottom: 0.25rem;
        }

        .form-label--required::after { content: ' *'; color: var(--brass); }

        /* Unified form control — canonical style. Explicit colors so forms work
           identically whether placed on ivory or pine sections. */
        .form-control,
        .form-input,
        .form-select,
        .form-textarea {
            width: 100%;
            padding: 0.875rem 1rem;
            font-family: var(--sans);
            font-size: var(--fs-base);
            line-height: 1.5;
            color: #1C1C1A;
            background: #FFFFFF;
            border: 1px solid rgba(28, 28, 26, 0.20);
            border-radius: 3px;
            min-height: 48px;
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
            appearance: none;
            -webkit-appearance: none;
        }

        .form-control::placeholder,
        .form-input::placeholder,
        .form-select::placeholder,
        .form-textarea::placeholder { color: rgba(28, 28, 26, 0.50); }

        .form-control:focus,
        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
            outline: none;
            border-color: var(--brass);
            box-shadow: 0 0 0 3px rgba(184, 135, 63, 0.20);
        }

        /* Form controls sitting on a pine (dark) section — invert for luxury feel.
           Applies to both the home cta-band form and the contact-form-section. */
        .cta-band .form-control,
        .cta-band .form-input,
        .cta-band .form-select,
        .cta-band .form-textarea,
        .contact-form-section .form-control,
        .contact-form-section .form-input,
        .contact-form-section .form-select,
        .contact-form-section .form-textarea {
            background: rgba(246, 242, 228, 0.08);
            color: #F6F2E4;
            border: 1px solid rgba(246, 242, 228, 0.28);
        }
        .cta-band .form-control::placeholder,
        .cta-band .form-input::placeholder,
        .contact-form-section .form-control::placeholder,
        .contact-form-section .form-input::placeholder,
        .contact-form-section .form-textarea::placeholder { color: rgba(246, 242, 228, 0.55); }
        .cta-band .form-label,
        .contact-form-section .form-label { color: rgba(246, 242, 228, 0.88); }
        .cta-band .form-control:focus,
        .cta-band .form-input:focus,
        .cta-band .form-select:focus,
        .cta-band .form-textarea:focus,
        .contact-form-section .form-control:focus,
        .contact-form-section .form-input:focus,
        .contact-form-section .form-select:focus,
        .contact-form-section .form-textarea:focus {
            border-color: var(--brass);
            box-shadow: 0 0 0 3px rgba(166, 121, 51, 0.25);
        }
        /* Reassurance copy on pine — muted ivory */
        .contact-form-section .intent-form__reassurance { color: rgba(246, 242, 228, 0.68); }
        .contact-form-section .intent-form__reassurance a { color: rgba(246, 242, 228, 0.82); }
        .contact-form-section .intent-form__reassurance a:hover { color: var(--brass); }

        .form-textarea { min-height: 100px; resize: vertical; }

        /* Native <select> options inherit their parent's color, but the OS
           renders the open dropdown panel against a light/white background.
           That makes a linen-colored option (used inside pine-context selects)
           render as linen-on-white = invisible. Force options to dark-on-white
           regardless of where the select sits in the layout. */
        select.form-control option,
        select.form-input option,
        select.form-select option,
        .form-control option,
        .form-select option {
            color: #1C1C1A;
            background: #FFFFFF;
        }

        .lead-form__success { text-align: center; padding: 2rem 0; }
        .lead-form__success h2 { color: var(--sage-dark); }

        /* Floating CTA */
        .floating-cta {
            position: fixed; bottom: 2rem; right: 2rem; z-index: 50;
            opacity: 0; transform: translateY(16px);
            pointer-events: none;
            transition: all 0.4s ease;
        }
        .floating-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

        .floating-cta__btn {
            display: inline-flex; padding: 0.75rem 2rem;
            font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600;
            letter-spacing: 0.1em; text-transform: uppercase;
            color: white; background: var(--amber); text-decoration: none;
            box-shadow: 0 8px 30px rgba(164, 121, 61, 0.3);
            transition: all 0.3s ease;
        }
        .floating-cta__btn:hover { background: var(--espresso); transform: translateY(-2px); color: var(--linen); }

        @media (max-width: 767px) { .floating-cta { display: none; } }

        /* Mobile bar */
        .mobile-cta-bar {
            display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
            background: var(--linen); border-top: 1px solid var(--parchment);
            padding: 0.75rem 1rem;
            opacity: 0; transform: translateY(100%);
            transition: all 0.3s ease;
        }
        .mobile-cta-bar.is-visible { opacity: 1; transform: translateY(0); }
        @media (max-width: 767px) { .mobile-cta-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } }

        .mobile-cta-bar__call {
            display: flex; align-items: center; justify-content: center;
            padding: 0.75rem; font-size: var(--fs-xs); font-weight: 600;
            color: var(--charcoal); background: var(--cream);
            border: 1px solid var(--parchment); text-decoration: none; text-align: center;
        }

        .mobile-cta-bar__action {
            display: flex; align-items: center; justify-content: center;
            padding: 0.75rem; font-size: var(--fs-xs); font-weight: 600;
            color: white; background: var(--amber); text-decoration: none;
        }

        /* ================================================================
           STAGGERED REVEAL ANIMATION
           ================================================================ */

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(24px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .reveal {
            opacity: 0;
            animation: fadeUp 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        }

        .reveal-d1 { animation-delay: 0.1s; }
        .reveal-d2 { animation-delay: 0.25s; }
        .reveal-d3 { animation-delay: 0.4s; }
        .reveal-d4 { animation-delay: 0.55s; }
        .reveal-d5 { animation-delay: 0.7s; }

        /* Scroll-triggered reveals */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.7s ease, transform 0.7s ease;
        }

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

        @media (prefers-reduced-motion: reduce) {
            .reveal, .scroll-reveal { opacity: 1; transform: none; animation: none; transition: none; }
            .lead-popup, .lead-popup__content { transition: none; }
        }

        /* Area pill links */
        .area-pill {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            background: var(--linen);
            font-family: var(--sans);
            font-size: var(--fs-sm);
            font-weight: 500;
            color: var(--charcoal);
            text-decoration: none;
            transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
        }

        .area-pill:hover {
            background: var(--charcoal);
            color: var(--linen);
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(28, 22, 18, 0.08);
        }

        /* Nearby community cards (on community pages) */
        .nearby-card {
            text-align: center;
            display: block;
            padding: 1.25rem 1.5rem;
            background: var(--cream);
            text-decoration: none;
            border: 1px solid rgba(28, 22, 18, 0.18);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .nearby-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(28, 22, 18, 0.08);
        }

        /* Content padding for fixed header — transparent so pine body shows
           through by default (fine on pine-first pages). For pages whose first
           section is ivory (About), we handle it by having that first section
           overlap up into the buffer area with its own bg — see the
           main > :first-child.section--cream rule below. */
        main { padding-top: 72px; }

        /* Ivory hero pages (About) — extend the first section up into the 72px
           header buffer so the ivory bg covers that strip. The section's own
           breathing room is kept deliberately tight (2.5rem below the nav)
           since inner pages don't need a visual hero entrance. */
        main > :first-child.section--cream {
            margin-top: -72px;
            padding-top: calc(72px + 2.5rem);
        }

        /* Pine-first inner pages (Buyers / Sellers / Contact) — first section
           gets minimal top padding since main's 72px already clears the nav.
           Only applies to inner-page first sections, not the video/image heroes
           on Home/communities. */
        main > :first-child.section--tight:not(.section--cream),
        main > :first-child.section:not(.section--cream):not(.section--tight):not(.section--loose) {
            padding-top: 1.5rem;
        }

        /* ================================================================
           LEAD POPUP — Shared styles for all pages
           ================================================================ */

        .lead-popup__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .lead-popup__step-label {
            font-family: var(--sans);
            font-size: var(--fs-xs);
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--driftwood);
            line-height: 32px;
        }

        .lead-form__back {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            font-family: var(--sans);
            font-size: var(--fs-xs);
            font-weight: 500;
            color: var(--driftwood);
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            margin-bottom: 0.5rem;
            transition: color 0.2s ease;
            letter-spacing: 0.02em;
        }

        .lead-form__back:hover { color: var(--charcoal); }

        .lead-form__next {
            width: 100%;
            margin-top: 0.5rem;
        }

        /* ================================================================
           TESTIMONIAL CAROUSEL — Single card, photo left 50%, text right 50%
           ================================================================ */

        .testimonial-carousel {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }

        .testimonial-carousel {
            position: relative;
        }

        .testimonial-slide {
            display: none;
            grid-template-columns: 1fr;
            background: var(--cream);
            border: 1px solid rgba(28, 22, 18, 0.18);
            overflow: hidden;
        }

        .testimonial-slide.is-active {
            display: grid;
        }

        @media (min-width: 640px) {
            .testimonial-slide {
                grid-template-columns: 1fr 1fr;
                height: 480px;
            }
        }

        @media (min-width: 1024px) {
            .testimonial-slide {
                height: 400px;
            }
        }

        .testimonial-slide__photo {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 140px;
        }

        @media (min-width: 640px) {
            .testimonial-slide__photo {
                min-height: 0;
                height: 100%;
            }
        }

        .testimonial-slide__photo span {
            font-family: var(--serif);
            font-size: var(--fs-3xl);
            color: var(--oak);
            opacity: 0.5;
        }

        .testimonial-slide__photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .testimonial-slide__content {
            padding: 1.5rem 1.5rem 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
            min-width: 0;
        }

        @media (min-width: 640px) {
            .testimonial-slide__content {
                padding: 2rem 2.5rem;
            }
        }

        .testimonial-slide__content p {
            font-family: var(--serif);
            font-size: 0.9375rem;
            font-style: italic;
            color: var(--charcoal);
            line-height: 1.6;
            margin: 0;
        }

        @media (min-width: 640px) {
            .testimonial-slide__content p {
                font-size: var(--fs-md);
                line-height: 1.65;
            }
        }

        .testimonial-slide__footer {
            margin-top: auto;
            padding-top: 0.875rem;
            border-top: 1px solid rgba(42, 42, 42, 0.08);
        }

        .testimonial-slide__footer cite {
            font-family: var(--sans);
            font-size: var(--fs-sm);
            font-weight: 600;
            color: var(--espresso);
            font-style: normal;
            display: block;
            margin-bottom: 0;
            line-height: 1.2;
        }

        .testimonial-slide__detail {
            font-size: var(--fs-xs);
            color: var(--driftwood);
            display: block;
            margin-top: 0.125rem;
        }

        .testimonial-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
            margin-top: 1.5rem;
        }

        .testimonial-nav__arrow {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--stone);
            background: transparent;
            color: var(--oak);
            font-size: var(--fs-lg);
            cursor: pointer;
            transition: border-color 0.2s ease, color 0.2s ease;
        }

        .testimonial-nav__arrow:hover {
            border-color: var(--charcoal);
            color: var(--charcoal);
        }

        .testimonial-nav__dots {
            display: flex;
            gap: 0.5rem;
        }

        .testimonial-nav__dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--stone);
            border: none;
            padding: 0;
            cursor: pointer;
            transition: background 0.2s ease, transform 0.2s ease;
        }

        .testimonial-nav__dot.is-active {
            background: var(--charcoal);
            transform: scale(1.3);
        }

        /* ================================================================
           PROPERTY CARDS (Shared — used on home, community, buyers)
           ================================================================ */

        .property-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }

        @media (min-width: 640px) { .property-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1024px) { .property-grid { grid-template-columns: repeat(3, 1fr); } }

        .property-card {
            background: white;
            border: 1px solid rgba(28, 22, 18, 0.18);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .property-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(28, 22, 18, 0.08);
        }

        .property-card__image {
            aspect-ratio: 16 / 10;
            background: var(--cream);
            position: relative;
            overflow: hidden;
            transition: opacity 0.3s ease;
        }

        .property-card:hover .property-card__image {
            opacity: 0.92;
        }

        .property-card__badge {
            position: absolute;
            top: 0.75rem;
            left: 0.75rem;
            padding: 0.25rem 0.75rem;
            font-family: var(--sans);
            font-size: var(--fs-xs);
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            background: var(--clay);
            color: var(--linen);
        }

        .property-card__body {
            padding: 1.25rem 1.5rem;
        }

        .property-card__price {
            font-family: var(--serif);
            font-size: var(--fs-xl);
            color: var(--espresso);
            margin-bottom: 0.25rem;
        }

        .property-card__address {
            font-family: var(--sans);
            font-size: var(--fs-sm);
            color: var(--oak);
            margin-bottom: 1rem;
        }

        .property-card__details {
            display: flex;
            gap: 1.5rem;
            padding-top: 0.75rem;
            border-top: 1px solid var(--parchment);
        }

        .property-card__detail {
            font-family: var(--sans);
            font-size: var(--fs-xs);
            color: var(--driftwood);
        }

        .property-card__detail strong {
            font-weight: 600;
            color: var(--charcoal);
            display: block;
            font-size: var(--fs-sm);
            margin-bottom: 0.125rem;
        }

        /* ================================================================
           LISTING TABS
           ================================================================ */

        .tabs {
            display: flex;
            gap: 0;
            border-bottom: 1px solid var(--parchment);
            margin-bottom: 2rem;
            overflow-x: auto;
            scrollbar-width: none;
        }

        .tabs::-webkit-scrollbar { display: none; }

        .tabs__btn {
            font-family: var(--sans);
            font-size: var(--fs-xs);
            font-weight: 500;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--driftwood);
            padding: 1rem 1.5rem;
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            cursor: pointer;
            white-space: nowrap;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .tabs__btn:hover {
            color: var(--charcoal);
        }

        .tabs__btn--active {
            color: var(--espresso);
            border-bottom-color: var(--espresso);
            font-weight: 600;
        }

        .tabs__panel { display: none; }
        .tabs__panel--active { display: block; }

        /* ================================================================
           SEARCH BAR
           ================================================================ */

        .search-bar {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.75rem;
        }

        @media (min-width: 768px) {
            .search-bar {
                grid-template-columns: 2fr 1fr 1fr auto;
                gap: 0;
                border: 1px solid var(--parchment);
                background: var(--linen);
            }

            .search-bar .form-input {
                border: none;
                border-right: 1px solid var(--parchment);
                border-radius: 0;
            }

            .search-bar .form-input:last-of-type {
                border-right: none;
            }

            .search-bar .btn {
                border-radius: 0;
                min-width: 160px;
            }
        }

        /* ================================================================
           MARKET STATS CARDS
           ================================================================ */

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

        @media (min-width: 768px) {
            .market-stats { grid-template-columns: repeat(4, 1fr); }
        }

        .market-stat {
            padding: 2rem 1.5rem;
            background: var(--cream);
            text-align: center;
        }

        .market-stat__number {
            font-family: var(--serif);
            font-size: var(--fs-2xl);
            color: var(--espresso);
            line-height: 1;
            margin-bottom: 0.5rem;
        }

        @media (min-width: 768px) { .market-stat__number { font-size: 2.5rem; } }

        .market-stat__label {
            font-family: var(--sans);
            font-size: var(--fs-xs);
            font-weight: 500;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--driftwood);
        }

        .market-stat__note {
            font-size: var(--fs-xs);
            color: var(--driftwood);
            text-align: center;
            margin-top: 1rem;
        }

        /* ================================================================
           COMMUNITY PAGE HERO
           ================================================================ */

        .community-hero {
            position: relative;
            padding: 4rem 0 3.5rem;
            background: linear-gradient(135deg, var(--parchment) 0%, var(--stone) 40%, var(--sage-muted) 100%);
            overflow: hidden;
        }

        @media (min-width: 768px) { .community-hero { padding: 5rem 0 4rem; } }

        .community-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: var(--grain);
            opacity: 0.4;
            pointer-events: none;
        }

        .community-hero > .container { position: relative; z-index: 2; text-align: center; }

        .community-hero h1 {
            color: var(--espresso);
            margin-top: 0.75rem;
        }

        .community-hero__sub {
            font-size: var(--fs-md);
            color: var(--oak);
            max-width: 540px;
            line-height: 1.75;
            margin-top: 1rem;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

        /* Community highlights grid */
        .highlights-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 3rem;
        }

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

        /* Unboxed highlight cards — brass rule above, ivory h3, muted ivory body.
           Same grammar as case-study stats, value-stack totals, personal cards:
           typography-on-pine, no containers, no shadows. */
        .highlight-card {
            background: transparent;
            border: none;
            box-shadow: none;
            padding: 0.5rem 0;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            transition: transform 0.3s ease;
        }

        .highlight-card::before {
            content: '';
            width: 2.5rem;
            height: 2px;
            background: var(--brass);
            display: block;
        }

        .highlight-card:hover { transform: translateY(-4px); }

        .highlight-card__icon {
            font-size: var(--fs-2xl);
            margin-bottom: 0;
        }

        .highlight-card h3 {
            font-family: var(--serif);
            font-style: italic;
            font-weight: 400;
            font-size: clamp(1.4rem, 2.2vw, 1.75rem);
            margin: 0;
            color: var(--linen);
            letter-spacing: -0.01em;
        }

        .highlight-card p {
            font-family: var(--sans);
            font-size: 0.95rem;
            color: rgba(246, 242, 228, 0.82);
            line-height: 1.7;
            margin: 0;
            max-width: 28rem;
        }

        /* Testimonial grid rows — 2 per row on desktop, 1 on mobile */
        .testimonial-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }

        @media (min-width: 768px) {
            .testimonial-row {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* ================================================================
           VERANDAH COMPONENTS — video hero, proof strip, steps, FAQ, final CTA
           ================================================================ */

        /* Italic emphasis on display text — boxwood green */
        h1 em, h2 em, h3 em, .vh-masthead h1 em, .final-cta h2 em { font-style: italic; color: var(--sage); }

        /* ----- HERO (video + glass) ----- */
        .verandah-hero { position: relative; min-height: 100vh; overflow: hidden; background: var(--charcoal); }
        .vh-video {
            position: absolute; inset: 0;
            width: 100%; height: 100%;
            object-fit: cover; z-index: 0;
            pointer-events: none;
        }
        .vh-veil {
            position: absolute; inset: 0; z-index: 1;
            /* Stronger bottom dim so the flat brass CTA is anchored against the
               video without needing its own shadow. Top dim keeps headline +
               nav legible when the sky is bright. */
            background: linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.50) 0%,
                rgba(0, 0, 0, 0.15) 22%,
                rgba(0, 0, 0, 0.08) 50%,
                rgba(0, 0, 0, 0.25) 75%,
                rgba(0, 0, 0, 0.65) 100%
            );
            pointer-events: none;
        }

        .vh-stage {
            position: relative; z-index: 10;
            max-width: var(--container-wide); margin: 0 auto;
            /* Top padding clears the 72px fixed header + breathing room */
            padding: clamp(104px, 16vh, 144px) clamp(28px, 5vw, 72px) clamp(56px, 8vh, 96px);
            min-height: 100vh;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto 1fr auto;
            grid-template-areas:
                "masthead .."
                ".. .."
                ".. action";
            gap: 0;
        }

        .vh-masthead {
            grid-area: masthead;
            color: var(--linen);
            max-width: 40rem;
            filter: drop-shadow(0 2px 3px rgba(31, 42, 36, .55)) drop-shadow(0 1px 1px rgba(31, 42, 36, .45));
        }
        .vh-rule {
            width: 72px; height: 2px;
            background: var(--amber);
            margin-bottom: 22px;
        }
        .vh-eyebrow {
            display: block;
            font-family: var(--sans);
            font-size: var(--fs-xs); letter-spacing: 0.3em; text-transform: uppercase;
            color: var(--linen);
            font-weight: 500;
            margin-bottom: 22px;
        }
        .vh-masthead h1 {
            font-family: var(--serif);
            font-weight: 400;
            font-size: clamp(2.5rem, 5.4vw, 5rem);
            line-height: 1.04;
            letter-spacing: -1.2px;
            color: var(--linen);
            text-wrap: balance;
        }
        .vh-masthead h1 em { color: var(--linen); font-style: italic; }

        .vh-action {
            grid-area: action;
            justify-self: end;
            text-align: right;
            max-width: 30rem;
            color: var(--linen);
            filter: drop-shadow(0 2px 3px rgba(31, 42, 36, .55)) drop-shadow(0 1px 1px rgba(31, 42, 36, .45));
        }
        .vh-action .vh-sub {
            font-size: var(--fs-base);
            line-height: 1.6;
            color: var(--linen);
            font-weight: 400;
            margin: 0 0 24px;
        }
        .vh-ctas {
            display: inline-flex; align-items: center; gap: 20px; flex-wrap: wrap;
            justify-content: flex-end;
        }

        /* Hero primary CTA — flat brass, matches the nav CTA language so the
           primary-action treatment is consistent across the site. The video
           vh-veil gradient handles contrast against the background; no
           decorative border or drop shadow needed. */
        .btn--hero {
            background: var(--brass);
            color: var(--linen);
            border: none;
        }
        .btn--hero:hover {
            background: var(--amber-dark);
            color: var(--linen);
            transform: translateY(-1px);
        }

        .btn--hero-ghost {
            display: inline-flex; align-items: center; gap: 8px;
            color: var(--linen);
            font-family: var(--sans);
            font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase;
            font-weight: 500;
            padding: 1rem 0.25rem;
            border-bottom: 1px solid rgba(244, 239, 228, 0.55);
            transition: border-color 0.25s ease, color 0.25s ease;
            text-shadow: 0 1px 10px rgba(31, 42, 36, .45);
            min-height: 52px;
        }
        .btn--hero-ghost:hover { border-color: var(--linen); }
        .btn--hero-ghost .arrow { transition: transform 0.25s ease; display: inline-block; }
        .btn--hero-ghost:hover .arrow { transform: translateX(3px); }

        .vh-scroll {
            position: absolute; right: 36px; bottom: 24px;
            z-index: 10;
            color: rgba(244, 239, 228, 0.82);
            font-family: var(--sans);
            font-size: var(--fs-xs); letter-spacing: 0.3em; text-transform: uppercase;
            display: flex; align-items: center; gap: 12px;
            pointer-events: none;
            text-shadow: 0 1px 10px rgba(31, 42, 36, .4);
        }
        @media (max-height: 780px) { .vh-scroll { display: none; } }
        .vh-scroll .line {
            width: 48px; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(244, 239, 228, 0.7));
            animation: pulseLine 2.4s ease-in-out infinite;
        }
        @keyframes pulseLine {
            0%, 100% { transform: scaleX(.6); transform-origin: right; opacity: .5; }
            50%      { transform: scaleX(1); opacity: 1; }
        }

        @media (max-width: 767px) {
            .vh-stage {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "masthead"
                    ".."
                    "action";
            }
            .vh-action { justify-self: start; text-align: left; }
            .vh-ctas { justify-content: flex-start; }
            .vh-scroll { right: 24px; }
        }

        /* ----- Kicker — small caps with leading rule ----- */
        .kicker {
            display: inline-flex; align-items: center; gap: 12px;
            font-family: var(--sans);
            font-size: var(--fs-xs); letter-spacing: 0.3em; text-transform: uppercase;
            color: var(--driftwood);
            font-weight: 500;
            margin-bottom: 1rem;
        }
        .kicker::before {
            content: ''; width: 24px; height: 1px;
            background: var(--driftwood);
        }
        .kicker--center { justify-content: center; }
        .kicker--center::before { display: none; }

        /* ----- Proof strip — near-black dark band, strong contrast against pine body ----- */
        .proof-strip {
            background: #0D0D0C;
            padding: 3rem 0;
            position: relative;
        }
        .proof-strip::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: var(--grain);
            opacity: 0.3;
            pointer-events: none;
        }
        .proof-strip__grid,
        .proof-row {
            max-width: var(--container);
            margin: 0 auto;
            padding: 0 1.75rem;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.75rem 2rem;
            position: relative;
            z-index: 2;
        }
        @media (min-width: 640px) {
            .proof-strip__grid,
            .proof-row { grid-template-columns: repeat(4, 1fr); }
        }
        @media (min-width: 1024px) {
            .proof-row { grid-template-columns: repeat(5, 1fr); }
        }
        .proof-strip__grid > div,
        .proof-stat {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            text-align: center;
        }
        .proof-strip__number,
        .proof-stat__num {
            font-family: var(--serif);
            font-weight: 400;
            font-size: 2.5rem;
            letter-spacing: -0.02em;
            line-height: 1;
            color: var(--linen);
            display: block;
        }
        @media (min-width: 768px) {
            .proof-strip__number,
            .proof-stat__num { font-size: 2.75rem; }
        }
        .proof-strip__label,
        .proof-stat__label {
            font-family: var(--sans);
            font-size: var(--fs-xs);
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--stone);
            font-weight: 500;
            display: block;
            line-height: 1.3;
        }

        /* Hide scroll progress bar line at top */
        .scroll-progress { display: none !important; }

        /* ----- How it works — 3 editorial steps ----- */
        .steps-grid {
            display: grid; gap: 2.25rem;
            grid-template-columns: 1fr;
        }
        @media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
        .step-card {
            padding-top: 2rem;
            border-top: 1px solid var(--stone);
            position: relative;
        }
        .step-card__num {
            font-family: var(--serif);
            font-size: var(--fs-lg);
            font-style: italic;
            color: var(--amber);
            margin-bottom: 1rem;
        }
        .step-card h3 {
            font-family: var(--serif);
            font-weight: 400;
            font-size: 1.75rem;
            line-height: 1.1;
            letter-spacing: -0.02em;
            margin: 0 0 0.75rem;
            color: var(--charcoal);
        }
        .step-card p {
            color: var(--oak);
            font-size: 0.9375rem;
            line-height: 1.7;
            margin: 0;
        }

        /* ----- FAQ accordion — smooth open/close animation ----- */
        .faq-list {
            border-top: 1px solid var(--stone);
            max-width: 52rem;
            margin: 0 auto;
        }
        .faq-list details {
            border-bottom: 1px solid var(--stone);
            padding: 1.5rem 0;
        }
        .faq-list summary {
            list-style: none; cursor: pointer;
            display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
            font-family: var(--serif); font-size: var(--fs-lg); letter-spacing: -0.01em;
            color: var(--charcoal);
            line-height: 1.3;
            transition: color 0.25s ease;
        }
        .faq-list summary::-webkit-details-marker { display: none; }
        .faq-list summary:hover { color: var(--amber-dark); }
        .faq-list summary::after {
            content: '+'; font-family: var(--sans); font-weight: 300;
            font-size: 1.75rem; color: var(--driftwood);
            line-height: 1;
            flex-shrink: 0;
            display: inline-block;
            width: 1.25rem;
            text-align: center;
            transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), color 0.25s ease;
        }
        .faq-list details[open] summary::after {
            content: '–';
            color: var(--amber);
            transform: rotate(180deg);
        }
        /* FAQ answer: starts collapsed. JS sets inline height, CSS transitions it. */
        .faq-list .faq-a {
            height: 0;
            overflow: hidden;
            opacity: 0;
            margin-top: 0;
            transition: height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
                        opacity 0.3s ease,
                        margin-top 0.4s ease;
        }
        .faq-list .faq-a > .faq-a__inner {
            color: var(--oak);
            max-width: 44rem;
            font-size: var(--fs-base);
            line-height: 1.7;
            padding-bottom: 0.25rem;
        }
        /* Reduced motion: instant, no transition */
        @media (prefers-reduced-motion: reduce) {
            .faq-list .faq-a { transition: none; }
            .faq-list details[open] .faq-a {
                height: auto;
                opacity: 1;
                margin-top: 0.875rem;
            }
        }

        /* ----- Final CTA — pine, bridges into pine footer ----- */
        .final-cta {
            position: relative;
            background: var(--pine);
            color: var(--linen);
            padding: var(--space-loose) 0;
            text-align: center;
            overflow: hidden;
        }
        .final-cta::before { content: none; }
        .final-cta h2 {
            font-family: var(--serif); font-weight: 400;
            font-size: clamp(2.4rem, 5.6vw, 4.8rem);
            line-height: 1.06;
            letter-spacing: -1.2px;
            margin: 0 auto;
            max-width: 20ch;
            position: relative;
            color: var(--linen);
        }
        .final-cta p {
            color: rgba(246, 242, 228, 0.85);
            max-width: 36rem;
            margin: 1.5rem auto 0;
            font-size: var(--fs-base);
            line-height: 1.7;
            position: relative;
        }
        .final-cta__ctas {
            margin-top: 2.5rem;
            position: relative;
            display: flex;
            gap: 1.25rem;
            justify-content: center;
            flex-wrap: wrap;
            align-items: center;
        }
        .btn--ghost-light {
            display: inline-flex; align-items: center; gap: 8px;
            color: var(--brass);
            font-family: var(--sans);
            font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase;
            font-weight: 600;
            padding: 1rem 0.25rem;
            border-bottom: 1px solid var(--brass);
            transition: border-color 0.25s ease, color 0.25s ease;
            min-height: 52px;
        }
        .btn--ghost-light:hover { color: #D4A55E; border-color: #D4A55E; }
        .btn--ghost-light .arrow { transition: transform 0.25s ease; display: inline-block; }
        .btn--ghost-light:hover .arrow { transform: translateX(3px); }

        /* ----- Header nav — transparent only over the home video hero -----
           On home (.has-video-hero) when not scrolled, header is transparent
           with white logo + links to read clean against the dark video. Once
           scrolled past 40px the .scrolled class flips it to solid cream
           (matching all inner pages). The :not(.scrolled) qualifier is
           critical so this rule's specificity doesn't beat the .scrolled
           background rule when both could match. */
        body.has-video-hero .header:not(.scrolled) {
            background: transparent;
            border-bottom: none;
        }
        body.has-video-hero .header:not(.scrolled) .header__link {
            color: var(--linen);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        }
        body.has-video-hero .header:not(.scrolled) .header__logo-img {
            filter: brightness(0) invert(1);
            opacity: 0.95;
        }
        /* When scrolled (home) OR on any inner page, logo is its native color */
        .header.scrolled .header__logo-img,
        body:not(.has-video-hero) .header__logo-img { filter: none; opacity: 1; }

        /* ================================================================
           TIER 1 UPGRADES — Trust bar, Value Stack, Risk Reversal, Valuation Form
           ================================================================ */

        /* ----- Trust bar (under hero, above proof strip) ----- */
        .trust-bar {
            background: #0D0D0C;
            border-top: none;
            border-bottom: 1px solid rgba(246, 242, 228, 0.08);
            padding: 0.75rem 0;
            color: rgba(246, 242, 228, 0.7);
        }
        .trust-bar__row {
            max-width: var(--container);
            margin: 0 auto;
            padding: 0 1.75rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem 1.5rem;
            justify-content: center;
            align-items: center;
            font-family: var(--sans);
            font-size: var(--fs-xs);
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(246, 242, 228, 0.65);
            font-weight: 500;
            text-align: center;
        }
        .trust-bar__row > span {
            display: inline-flex;
            align-items: center;
        }
        .trust-bar__row > span + span::before {
            content: '·';
            margin-right: 1.5rem;
            color: var(--stone);
            font-weight: 700;
        }
        @media (max-width: 640px) {
            .trust-bar__row {
                flex-direction: column;
                gap: 0.5rem;
            }
            .trust-bar__row > span + span::before { display: none; }
        }

        /* ----- Value Stack section ----- */
        .value-stack {
            /* inherits pine body bg */
        }
        .value-stack__grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 3rem;
            max-width: var(--container);
            margin: 0 auto;
        }
        @media (min-width: 768px) {
            .value-stack__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
        }
        .value-stack__col h3 {
            font-family: var(--serif);
            font-weight: 400;
            font-size: 1.75rem;
            letter-spacing: -0.01em;
            color: var(--charcoal);
            margin-bottom: 0.5rem;
            line-height: 1.15;
        }
        .value-stack__col h3 em { font-style: italic; color: var(--amber); }
        .value-stack__col > p {
            font-size: 0.9375rem;
            color: var(--driftwood);
            margin-bottom: 1.75rem;
            line-height: 1.5;
        }
        .value-stack__list {
            list-style: none;
            padding: 0;
            margin: 0 0 1.5rem 0;
        }
        .value-stack__item {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 0.75rem 1rem;
            align-items: baseline;
            padding: 0.875rem 0;
            border-bottom: 1px solid var(--stone);
        }
        .value-stack__item:last-child {
            border-bottom: none;
        }
        .value-stack__item-name {
            font-family: var(--sans);
            font-size: 0.9375rem;
            font-weight: 500;
            color: var(--charcoal);
            line-height: 1.4;
        }
        .value-stack__item-price {
            font-family: var(--sans);
            font-size: var(--fs-xs);
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--amber);
            font-weight: 600;
            white-space: nowrap;
        }
        /* Buyer/Seller total — unboxed display statement on pine. Sits at the
           bottom of the value-stack list with a thin brass rule separator, then
           brass kicker, brass italic amount, muted ivory note. Matches the
           case-study and proof-strip typography-on-pine pattern. */
        .value-stack__total {
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 1.75rem 0 0;
            margin-top: 1.5rem;
            border-top: 1px solid rgba(166, 121, 51, 0.5);
        }
        .value-stack__total-label {
            font-family: var(--sans);
            font-size: 0.75rem;
            letter-spacing: 0.26em;
            text-transform: uppercase;
            color: var(--brass);
            font-weight: 600;
            margin-bottom: 0.65rem;
            display: block;
        }
        .value-stack__total-amount {
            font-family: var(--serif);
            font-style: italic;
            font-size: clamp(2.5rem, 4.5vw, 3.75rem);
            color: #D4A55E;
            line-height: 1;
            letter-spacing: -0.01em;
            display: block;
            margin-bottom: 0.85rem;
        }
        .value-stack__total-note {
            font-size: 0.9rem;
            color: rgba(246, 242, 228, 0.72);
            line-height: 1.6;
            margin: 0;
            max-width: 34ch;
        }

        /* ----- Risk Reversal panel ----- */
        .risk-reversal {
            background: var(--pine);
            color: var(--linen);
            padding: var(--space-normal) 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .risk-reversal::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: var(--grain);
            opacity: 0.25;
            pointer-events: none;
        }
        .risk-reversal__stamp {
            position: relative;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            font-family: var(--sans);
            font-size: var(--fs-xs);
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--amber);
            margin-bottom: 1.75rem;
            font-weight: 500;
        }
        .risk-reversal__stamp::before,
        .risk-reversal__stamp::after {
            content: '';
            width: 24px;
            height: 1px;
            background: var(--amber);
        }
        .risk-reversal h2 {
            position: relative;
            z-index: 2;
            font-family: var(--serif);
            font-weight: 400;
            font-size: clamp(2rem, 4.8vw, 3.5rem);
            line-height: 1.1;
            letter-spacing: -0.03em;
            color: var(--linen);
            max-width: 22ch;
            margin: 0 auto;
        }
        .risk-reversal h2 em { font-style: italic; color: var(--amber); }
        .risk-reversal__quote {
            position: relative;
            z-index: 2;
            font-family: var(--serif);
            font-style: italic;
            font-size: clamp(1.125rem, 2vw, 1.375rem);
            line-height: 1.55;
            color: rgba(246, 242, 228, 0.88);
            max-width: 38rem;
            margin: 2rem auto 1.25rem;
        }
        .risk-reversal__signature {
            position: relative;
            z-index: 2;
            font-family: var(--sans);
            font-size: var(--fs-xs);
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--stone);
            font-weight: 500;
            opacity: 0.85;
        }

        /* ----- Home Valuation Lead Magnet (3-step form) ----- */
        .valuation {
            background: var(--cream);
            padding: var(--space-normal) 0;
            position: relative;
        }
        .valuation__card {
            max-width: 680px;
            margin: 0 auto;
            background: var(--linen);
            border: 1px solid var(--stone);
            border-radius: 2px;
            padding: clamp(2rem, 4vw, 3rem);
            box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.18);
        }
        .valuation__header {
            text-align: center;
            margin-bottom: 2rem;
        }
        .valuation__progress {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-bottom: 1.25rem;
        }
        .valuation__progress-dot {
            width: 2rem;
            height: 3px;
            background: var(--stone);
            border-radius: 1px;
            transition: background 0.35s ease;
        }
        .valuation__progress-dot.is-active { background: var(--amber); }
        .valuation__step-label {
            font-family: var(--sans);
            font-size: var(--fs-xs);
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: var(--driftwood);
            font-weight: 600;
        }
        .valuation__step {
            display: none;
        }
        .valuation__step.is-active {
            display: block;
            animation: valFadeIn 0.4s ease;
        }
        @keyframes valFadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .valuation__step h3 {
            font-family: var(--serif);
            font-weight: 400;
            font-size: 1.75rem;
            letter-spacing: -0.02em;
            color: var(--charcoal);
            margin-bottom: 0.35rem;
            line-height: 1.15;
        }
        .valuation__step p.valuation__hint {
            font-size: 0.9375rem;
            color: var(--driftwood);
            margin-bottom: 1.5rem;
            line-height: 1.5;
        }
        .valuation__field {
            margin-bottom: 1rem;
        }
        .valuation__field label {
            display: block;
            font-family: var(--sans);
            font-size: var(--fs-xs);
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--oak);
            font-weight: 600;
            margin-bottom: 0.4rem;
        }
        /* Valuation fields use the canonical .form-control style — see .form-control above */
        .valuation__row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 1rem;
        }
        @media (max-width: 520px) { .valuation__row { grid-template-columns: 1fr; } }
        .valuation__actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            margin-top: 1.75rem;
            flex-wrap: wrap;
        }
        .valuation__back {
            background: transparent;
            border: none;
            padding: 0.5rem 0;
            font-family: var(--sans);
            font-size: var(--fs-xs);
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--oak);
            font-weight: 500;
            cursor: pointer;
            transition: color 0.25s ease;
        }
        .valuation__back:hover { color: var(--amber-dark); }
        .valuation__next {
            background: var(--amber);
            color: var(--linen);
            border: 1px solid var(--amber-dark);
            padding: 1rem 2rem;
            font-family: var(--sans);
            font-size: var(--fs-xs);
            letter-spacing: 0.18em;
            text-transform: uppercase;
            font-weight: 500;
            border-radius: 2px;
            cursor: pointer;
            transition: background 0.25s ease, transform 0.25s ease;
            margin-left: auto;
        }
        .valuation__next:hover { background: var(--amber-dark); transform: translateY(-1px); }
        .valuation__reassurance {
            font-size: var(--fs-sm);
            color: var(--driftwood);
            text-align: center;
            margin-top: 1rem;
            line-height: 1.5;
        }
        .valuation__success {
            text-align: center;
            padding: 2rem 0;
        }
        .valuation__success svg {
            width: 3rem;
            height: 3rem;
            margin: 0 auto 1rem;
            color: var(--amber);
        }
        .valuation__success h3 {
            font-family: var(--serif);
            font-weight: 400;
            font-size: 1.75rem;
            color: var(--charcoal);
            margin-bottom: 0.75rem;
        }
        .valuation__success p {
            color: var(--oak);
            line-height: 1.6;
        }

        /* ----- Footer compliance block (fair housing, license, brokerage) ----- */
        .footer__compliance {
            margin-top: 1.5rem;
            padding: 1.75rem 0;
            border-top: 1px solid rgba(207, 191, 159, 0.2);
            border-bottom: 1px solid rgba(207, 191, 159, 0.2);
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 1.5rem 2rem;
            align-items: center;
        }
        @media (max-width: 640px) {
            .footer__compliance {
                grid-template-columns: 1fr;
                justify-items: center;
                text-align: center;
            }
        }
        /* Compliance copy is legally load-bearing — treat it as body text, not fine print. */
        .footer__compliance-text {
            font-size: var(--fs-sm);
            color: rgba(246, 242, 228, 0.88);
            line-height: 1.7;
            max-width: 48rem;
        }
        .footer__compliance-text strong { color: var(--linen); font-weight: 600; }
        .footer__compliance-text a { color: var(--linen); text-decoration: underline; }
        .footer__compliance-text a:hover { color: var(--brass); }
        .footer__fair-housing {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            border: 1px solid rgba(246, 242, 228, 0.40);
            border-radius: 2px;
            font-size: var(--fs-xs);
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: rgba(246, 242, 228, 0.90);
            font-weight: 500;
        }
        .footer__fair-housing svg {
            width: 1.5rem;
            height: 1.5rem;
            flex-shrink: 0;
        }

        /* ================================================================
           TIER 2 — Motion polish, editorial testimonials, case studies, mobile CTA
           ================================================================ */

        /* Magnetic CTAs removed per user request */

        /* ================================================================
           Scroll reveal animations — unified across every page
           ================================================================ */
        .m-fade-up {
            opacity: 0;
            transform: translateY(32px);
            transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .m-fade-up.is-revealed {
            opacity: 1;
            transform: translateY(0);
        }

        .m-scale-up {
            opacity: 0;
            transform: scale(0.92);
            transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .m-scale-up.is-revealed {
            opacity: 1;
            transform: scale(1);
        }

        .m-stagger > * {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .m-stagger > *.is-revealed {
            opacity: 1;
            transform: translateY(0);
        }

        @media (prefers-reduced-motion: reduce) {
            .m-fade-up, .m-scale-up, .m-stagger > * {
                opacity: 1 !important;
                transform: none !important;
                transition: none !important;
            }
        }

        /* ----- Scroll-driven hero vignette (Ken Burns removed — drone footage already has motion) ----- */
        .verandah-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: #000;
            opacity: 0;
            z-index: 2;
        }
        @supports (animation-timeline: view()) {
            @media (prefers-reduced-motion: no-preference) {
                .verandah-hero::after {
                    animation: vhVignette linear both;
                    animation-timeline: view();
                    animation-range: cover 55% cover 100%;
                }
                @keyframes vhVignette {
                    from { opacity: 0; }
                    to   { opacity: 0.65; }
                }
            }
        }

        /* ----- View Transitions API (page navigation cross-fades) -----
           @view-transition MUST be at top level of stylesheet, not nested in @supports.
           Browsers without support simply ignore it gracefully. */
        @view-transition { navigation: auto; }

        ::view-transition-old(root),
        ::view-transition-new(root) {
            animation-duration: 0.35s;
            animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Keep header pinned across navigation so it feels like a single app */
        .header { view-transition-name: header; }
        .footer { view-transition-name: footer; }
        ::view-transition-old(header),
        ::view-transition-new(header),
        ::view-transition-old(footer),
        ::view-transition-new(footer) {
            animation: none;
        }

        @media (prefers-reduced-motion: reduce) {
            ::view-transition-old(root),
            ::view-transition-new(root) { animation-duration: 0.01ms; }
        }

        /* ================================================================
           Testimonial Strips — editorial pull-quote treatment
           ================================================================ */
        .testimonial-strips__header {
            text-align: center;
            max-width: 640px;
            margin: 0 auto 3.5rem;
        }
        .testimonial-strips {
            display: flex;
            flex-direction: column;
            max-width: var(--container);
            margin: 0 auto;
        }
        .testimonial-strip {
            display: grid;
            grid-template-columns: 40% 60%;
            align-items: stretch;
            min-height: 380px;
            border-top: 1px solid var(--stone);
        }
        .testimonial-strip:last-child { border-bottom: 1px solid var(--stone); }
        .testimonial-strip--reverse { grid-template-columns: 60% 40%; }
        .testimonial-strip--reverse .testimonial-strip__portrait { order: 2; }
        .testimonial-strip--reverse .testimonial-strip__quote { order: 1; }
        .testimonial-strip__portrait {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 380px;
            position: relative;
            overflow: hidden;
            /* Brass gradient so the placeholder contrasts on BOTH pine sections
               (default body) and ivory sections (cream-tinted blocks). Pine-on-pine
               was invisible on the sellers testimonials section. */
            background: linear-gradient(135deg, var(--brass) 0%, #7F5F2B 100%) !important;
        }
        .testimonial-strip__portrait span {
            font-family: var(--serif);
            font-style: italic;
            font-size: clamp(3rem, 6vw, 4.5rem);
            color: var(--linen);
            opacity: 0.92;
            letter-spacing: 0.02em;
        }
        .testimonial-strip__quote {
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: var(--linen);
            padding: clamp(2rem, 5vw, 4rem) clamp(2rem, 5vw, 4.5rem);
            margin: 0;
            position: relative;
        }
        .testimonial-strip__quote p {
            font-family: var(--serif);
            font-style: italic;
            font-weight: 400;
            font-size: clamp(1.35rem, 2.8vw, 2rem);
            line-height: 1.35;
            color: var(--oak);
            margin: 0 0 2rem;
            text-indent: -0.35em;
            padding-left: 0.35em;
        }
        .testimonial-strip__quote p em {
            color: var(--amber);
            font-style: italic;
        }
        .testimonial-strip__quote-mark {
            color: var(--amber);
            font-family: var(--serif);
            font-style: normal;
            font-size: 1.15em;
            line-height: 0;
            margin-right: 0.05em;
            vertical-align: -0.05em;
        }
        .testimonial-strip__attribution {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--stone);
            max-width: 36rem;
        }
        .testimonial-strip__cite {
            font-family: var(--sans);
            font-style: normal;
            font-weight: 500;
            font-size: var(--fs-sm);
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--charcoal);
        }
        .testimonial-strip__detail {
            font-family: var(--sans);
            font-size: var(--fs-sm);
            font-style: italic;
            color: var(--driftwood);
            letter-spacing: 0.01em;
        }
        @media (max-width: 767px) {
            .testimonial-strips__header { margin-bottom: 2.5rem; }
            .testimonial-strip,
            .testimonial-strip--reverse {
                grid-template-columns: 1fr;
                min-height: 0;
            }
            .testimonial-strip__portrait,
            .testimonial-strip--reverse .testimonial-strip__portrait {
                order: 0;
                min-height: 220px;
                aspect-ratio: 4 / 3;
            }
            .testimonial-strip__quote,
            .testimonial-strip--reverse .testimonial-strip__quote {
                order: 1;
                padding: 2rem 1.5rem 2.5rem;
            }
            .testimonial-strip__quote p { margin-bottom: 1.5rem; }
            .testimonial-strip__attribution { padding-top: 1.25rem; }
        }

        /* ================================================================
           Review cards + Bento grid — mixed-size mosaic layout
           Hero card spans 2x2 on desktop with a larger quote treatment;
           supporting cards fill the remaining bento cells. On mobile
           everything stacks into a single column. Hardcoded dark colors
           so the body-level token flip can't make text invisible against
           the cream/linen card bg.
           ================================================================ */
        /* Bento grid — wall of all reviews in a varied-size mosaic.
           Six size variants (hero, feature, wide, extra-wide, tall,
           extra-tall) plus standard create real visual rhythm. Cards
           also rotate through three bg variants (linen, ivory, sage)
           so a row of standard squares doesn't read as monotonous.
           grid-auto-flow: dense packs cells tightly. On mobile (<640px)
           every card collapses to single column. */
        .reviews-bento {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.875rem;
            max-width: var(--container);
            margin: 0 auto;
        }
        @media (min-width: 640px) {
            .reviews-bento {
                grid-template-columns: repeat(2, 1fr);
                grid-auto-rows: 220px;
                grid-auto-flow: dense;
                gap: 1rem;
            }
            .reviews-bento .review-card--hero,
            .reviews-bento .review-card--feature,
            .reviews-bento .review-card--wide,
            .reviews-bento .review-card--extra-wide {
                grid-column: span 2;
            }
            .reviews-bento .review-card--hero,
            .reviews-bento .review-card--feature,
            .reviews-bento .review-card--tall {
                grid-row: span 2;
            }
            .reviews-bento .review-card--extra-tall {
                grid-row: span 3;
            }
        }
        @media (min-width: 768px) {
            .reviews-bento {
                grid-template-columns: repeat(3, 1fr);
                grid-auto-rows: 200px;
                gap: 1rem;
            }
            .reviews-bento .review-card--extra-wide {
                grid-column: span 3;
            }
        }
        @media (min-width: 1024px) {
            .reviews-bento {
                grid-template-columns: repeat(4, 1fr);
                grid-auto-rows: 200px;
                gap: 1.1rem;
            }
            .reviews-bento .review-card--hero {
                grid-column: span 2;
                grid-row: span 2;
            }
            .reviews-bento .review-card--feature {
                grid-column: span 2;
                grid-row: span 2;
            }
            .reviews-bento .review-card--wide {
                grid-column: span 2;
                grid-row: span 1;
            }
            .reviews-bento .review-card--extra-wide {
                grid-column: span 3;
                grid-row: span 1;
            }
            .reviews-bento .review-card--tall {
                grid-column: span 1;
                grid-row: span 2;
            }
            .reviews-bento .review-card--extra-tall {
                grid-column: span 1;
                grid-row: span 3;
            }
        }
        /* Standard cards stay uniform; size variety carries the rhythm.
           Hero + feature get genuinely distinct paper tones so they
           anchor the eye. (Paper-tone modifiers kept available but
           not currently rotated through standards — too noisy at scale.) */
        .review-card--paper-warm { background: #F4E8C8; }
        .review-card--paper-cool { background: #E5DFD0; }
        .review-card--paper-tan  { background: #EAD9B0; }
        /* Decorative oversized quote mark on the larger feature/hero
           cards to anchor the eye and add a graphic accent. Hidden by
           default on standard cards. */
        .review-card--hero::before,
        .review-card--feature::before {
            content: '\201C';
            position: absolute;
            top: 0.5rem;
            right: 1.25rem;
            font-family: var(--serif);
            font-size: 6rem;
            line-height: 1;
            color: rgba(127, 95, 43, 0.18);
            pointer-events: none;
        }
        @media (min-width: 1024px) {
            .review-card--hero::before,
            .review-card--feature::before {
                font-size: 8rem;
                top: 1rem;
                right: 1.75rem;
            }
        }
        .review-card--feature {
            background: #E5DFD0;
            border-left: 3px solid var(--brass);
            border-top: 1px solid rgba(28, 22, 18, 0.1);
        }
        .review-card--feature .review-card__quote {
            font-size: 1.2rem;
            line-height: 1.5;
        }
        @media (min-width: 1024px) {
            .review-card--feature .review-card__quote {
                font-size: 1.4rem;
                line-height: 1.45;
            }
        }
        /* Compact variant for short quotes — tightens line-height + size */
        .review-card--compact .review-card__quote {
            font-size: 0.95rem;
            line-height: 1.5;
        }

        /* Smaller bento for buyers/sellers — 3 cards: 1 hero + 2 supporting */
        .reviews-bento--compact {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
            max-width: var(--container);
            margin: 0 auto;
        }
        @media (min-width: 768px) {
            .reviews-bento--compact {
                grid-template-columns: 5fr 4fr;
                grid-auto-rows: 1fr;
                gap: 1.25rem;
            }
            .reviews-bento--compact .review-card--hero {
                grid-row: 1 / 3;
            }
        }

        /* Card styling */
        .review-card {
            background: var(--linen);
            border: 1px solid rgba(28, 22, 18, 0.1);
            padding: 1.75rem 1.75rem 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            position: relative;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }
        @media (min-width: 768px) {
            .review-card { padding: 1.85rem 1.85rem 1.6rem; }
        }
        .review-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 32px -16px rgba(28, 22, 18, 0.14);
        }
        /* Hero variant — buttery cream bg, larger quote, brass accent */
        .review-card--hero {
            background: #F4E8C8;
            padding: 2.25rem 2.25rem 1.85rem;
            gap: 1.4rem;
            border-top: 3px solid var(--brass);
        }
        @media (min-width: 1024px) {
            .review-card--hero { padding: 2.75rem 2.75rem 2.25rem; }
        }
        .review-card--hero .review-card__quote {
            font-size: 1.35rem;
            line-height: 1.45;
        }
        @media (min-width: 1024px) {
            .review-card--hero .review-card__quote {
                font-size: 1.6rem;
                line-height: 1.4;
            }
        }
        .review-card__stars {
            display: flex;
            gap: 2px;
            color: var(--brass);
        }
        .review-card__stars svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
            display: block;
        }
        .review-card--hero .review-card__stars svg {
            width: 20px;
            height: 20px;
        }
        .review-card__quote {
            font-family: var(--serif);
            font-style: italic;
            font-weight: 400;
            font-size: 1rem;
            line-height: 1.55;
            color: #1C1C1A;
            margin: 0;
        }
        .review-card__quote em {
            color: var(--brass);
            font-style: italic;
            font-weight: 500;
        }
        .review-card__attribution {
            margin-top: auto;
            padding-top: 1rem;
            border-top: 1px solid rgba(28, 22, 18, 0.08);
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }
        .review-card__cite {
            font-family: var(--sans);
            font-style: normal;
            font-weight: 600;
            font-size: 0.78rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #1C1C1A;
        }
        .review-card__detail {
            font-family: var(--sans);
            font-size: 0.76rem;
            font-style: italic;
            color: rgba(28, 22, 18, 0.6);
            line-height: 1.4;
        }

        /* ================================================================
           Reviews Pager — paginated testimonial-strip carousel
           Wraps testimonial-strip cards in pages and adds prev/next + dots.
           ================================================================ */
        .reviews-pager {
            max-width: var(--container);
            margin: 0 auto;
        }
        .reviews-pager__viewport {
            position: relative;
        }
        .reviews-pager__page {
            display: none;
            flex-direction: column;
            animation: reviewsPageFade 0.45s ease both;
        }
        .reviews-pager__page.is-active {
            display: flex;
        }
        @keyframes reviewsPageFade {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        /* The strips inside a page already provide their own borders.
           Tighten the bottom border so adjacent pages don't double-up. */
        .reviews-pager__page .testimonial-strip:last-child {
            border-bottom: 1px solid var(--stone);
        }
        .reviews-pager__nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.25rem;
            margin-top: 2.5rem;
        }
        .reviews-pager__arrow {
            width: 44px;
            height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--stone);
            background: transparent;
            color: var(--oak);
            cursor: pointer;
            padding: 0;
            border-radius: 50%;
            transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease, transform 0.25s ease;
        }
        .reviews-pager__arrow:hover:not(:disabled) {
            border-color: var(--brass);
            color: var(--brass);
            background: rgba(127, 95, 43, 0.06);
            transform: translateY(-1px);
        }
        .reviews-pager__arrow:focus-visible {
            outline: 2px solid var(--brass);
            outline-offset: 3px;
        }
        .reviews-pager__arrow:disabled {
            opacity: 0.32;
            cursor: not-allowed;
        }
        .reviews-pager__arrow svg {
            display: block;
        }
        .reviews-pager__dots {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .reviews-pager__dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--stone);
            border: none;
            padding: 0;
            cursor: pointer;
            transition: background 0.25s ease, transform 0.25s ease;
        }
        .reviews-pager__dot:hover {
            background: var(--driftwood);
        }
        .reviews-pager__dot.is-active {
            background: var(--brass);
            transform: scale(1.4);
        }
        .reviews-pager__counter {
            text-align: center;
            margin-top: 1rem;
            font-family: var(--sans);
            font-size: 0.78rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--driftwood);
        }
        @media (max-width: 767px) {
            .reviews-pager__nav { gap: 1rem; }
        }

        /* ================================================================
           Case Study bands — editorial replacement for Recently Sold grid
           ================================================================ */
        .case-study {
            display: grid;
            grid-template-columns: 35% 65%;
            gap: 2.5rem;
            align-items: stretch;
            padding: 2.25rem 0;
            border-top: 1px solid var(--stone);
            max-width: var(--container);
            margin: 0 auto;
        }
        .case-study:last-of-type { border-bottom: 1px solid var(--stone); }
        .case-study--reverse { grid-template-columns: 65% 35%; }
        .case-study--reverse .case-study__stat { order: 2; }
        .case-study--reverse .case-study__body { order: 1; }
        /* Case-study stat: unboxed display treatment. Huge brass italic numeral
           sitting directly on the pine body, thin brass rule, ivory caption.
           No background, no shadow, no border — "feature article" energy. */
        .case-study__stat {
            background: transparent;
            border: none;
            box-shadow: none;
            padding: 1rem 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            position: relative;
            min-height: 0;
        }
        .case-study__stat-value {
            font-family: var(--serif);
            font-style: italic;
            font-weight: 400;
            font-size: clamp(4.5rem, 10.5vw, 8.5rem);
            line-height: 0.9;
            color: #D4A55E;
            letter-spacing: -0.02em;
        }
        .case-study__stat-rule {
            width: 4rem;
            height: 2px;
            background: var(--brass);
            margin: 1.5rem 0 1.25rem;
            border: none;
        }
        .case-study__stat-label {
            font-family: var(--sans);
            font-size: 0.8125rem;
            font-weight: 500;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(246, 242, 228, 0.85);
            line-height: 1.5;
            max-width: 22ch;
        }
        .case-study__body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0.5rem 0;
        }
        .case-study__kicker {
            font-family: var(--sans);
            font-size: var(--fs-xs);
            font-weight: 500;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--amber);
            margin-bottom: 1rem;
        }
        .case-study__headline {
            font-family: var(--serif);
            font-size: 1.75rem;
            line-height: 1.2;
            color: var(--charcoal);
            margin: 0 0 1.25rem;
            letter-spacing: -0.01em;
        }
        .case-study__para {
            font-family: var(--sans);
            font-size: 0.9375rem;
            line-height: 1.6;
            color: var(--oak);
            margin: 0 0 0.6rem;
            max-width: 56ch;
        }
        .case-study__para strong {
            font-weight: 600;
            color: var(--charcoal);
            letter-spacing: 0.02em;
        }
        .case-study__attribution {
            font-family: var(--sans);
            font-size: var(--fs-xs);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--driftwood);
            margin-top: 1.25rem;
            padding-top: 1rem;
            border-top: 1px solid var(--stone);
            max-width: 56ch;
        }
        @media (max-width: 767px) {
            .case-study,
            .case-study--reverse {
                grid-template-columns: 1fr;
                gap: 0.75rem;
                padding: 2rem 0;
            }
            .case-study--reverse .case-study__stat { order: 0; }
            .case-study--reverse .case-study__body { order: 1; }
            .case-study__stat {
                padding: 0.5rem 0 0.25rem;
                align-items: flex-start;
            }
            .case-study__stat-value {
                font-size: clamp(4rem, 22vw, 6.5rem);
                line-height: 0.9;
            }
            .case-study__stat-rule { margin: 1rem 0 0.75rem; }
            .case-study__stat-label { font-size: 0.75rem; }
            .case-study__headline { font-size: var(--fs-xl); }
        }

        /* ================================================================
           Mobile Sticky CTA (bottom bar) — mobile only, hide-on-scroll-up
           ================================================================ */
        .mobile-sticky-cta {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 64px;
            display: none;
            z-index: 90;
            background: var(--linen);
            border-top: 1px solid var(--stone);
            box-shadow: 0 -6px 24px -12px rgba(0, 0, 0, 0.15);
            padding-bottom: env(safe-area-inset-bottom);
            transform: translateY(100%);
            transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
            will-change: transform;
        }
        @media (max-width: 767px) {
            .mobile-sticky-cta { display: flex; }
        }
        .mobile-sticky-cta.is-visible { transform: translateY(0); }
        .mobile-sticky-cta__btn {
            flex: 1 1 50%;
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-family: var(--sans);
            font-size: var(--fs-xs);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            text-decoration: none;
            border-radius: 2px;
            padding: 0 1rem;
        }
        .mobile-sticky-cta__btn--call {
            color: var(--charcoal);
            background: transparent;
        }
        .mobile-sticky-cta__btn--call .mobile-sticky-cta__icon { color: var(--amber); }
        .mobile-sticky-cta__btn--book {
            color: var(--linen);
            background: var(--amber);
            margin: 8px 8px 8px 0;
            border: 1px solid var(--amber-dark);
        }
        .mobile-sticky-cta__btn--book:active { background: var(--amber-dark); }
        .mobile-sticky-cta__sr {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        @media (prefers-reduced-motion: reduce) {
            .mobile-sticky-cta { transition: none; }
        }

        /* ================================================================
           TIER 3 — Interior page components (about, buyers, sellers, contact)
           ================================================================ */

        /* ----- ABOUT: Story timeline ----- */
        .about-story__header { max-width: 38rem; margin: 0 auto 3.5rem; }
        .about-story__header h2 { margin-top: 0.75rem; }
        .about-timeline {
            list-style: none; padding: 0; margin: 0 auto;
            position: relative; max-width: 44rem;
        }
        .about-timeline::before {
            content: ''; position: absolute; left: 7.5rem; top: 0.75rem; bottom: 0.75rem;
            width: 1px; background: var(--stone);
        }
        .about-timeline__row {
            display: grid; grid-template-columns: 6rem 1fr; column-gap: 3rem;
            padding: 1.75rem 0; align-items: center; position: relative;
        }
        .about-timeline__row::before {
            content: ''; position: absolute;
            left: calc(7.5rem - 4px); top: 50%; transform: translateY(-50%);
            width: 9px; height: 9px; border-radius: 50%;
            background: var(--parchment); border: 1px solid var(--stone);
        }
        .about-timeline__row--now::before {
            background: var(--amber); border-color: var(--amber);
            box-shadow: 0 0 0 4px rgba(0,0,0,0.04);
        }
        .about-timeline__year {
            font-family: var(--serif); font-size: 2.75rem; line-height: 1;
            color: var(--oak); font-weight: 300; letter-spacing: -0.01em; text-align: right;
        }
        .about-timeline__row--now .about-timeline__year { color: var(--amber); font-style: italic; }
        .about-timeline__body { max-width: 34rem; }
        .about-timeline__body p { font-family: var(--sans); font-size: var(--fs-md); line-height: 1.7; color: var(--oak); margin: 0; }
        @media (max-width: 640px) {
            .about-timeline::before, .about-timeline__row::before { display: none; }
            .about-timeline__row { grid-template-columns: 1fr; row-gap: 0.5rem; padding: 1.25rem 0; border-top: 1px solid var(--stone); }
            .about-timeline__row:first-child { border-top: 0; }
            .about-timeline__year { text-align: left; font-size: 2.25rem; }
        }

        /* ----- ABOUT: Editorial pull-quote ----- */
        .about-pullquote { text-align: center; max-width: 42rem; margin: 0 auto; padding: 1rem; position: relative; }
        .about-pullquote__mark { font-family: var(--serif); font-size: 6rem; line-height: 0.8; color: var(--amber); display: block; margin-bottom: 0.25rem; font-style: italic; }
        .about-pullquote__text { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.35; font-weight: 300; color: var(--charcoal); font-style: italic; margin: 0 0 2rem; letter-spacing: -0.005em; }
        .about-pullquote__text em { color: var(--amber); font-style: italic; }
        .about-pullquote__attribution { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
        .about-pullquote__cite { font-family: var(--sans); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oak); }
        .about-pullquote__detail { font-family: var(--sans); font-size: var(--fs-sm); color: var(--driftwood); letter-spacing: 0.04em; }

        /* ----- ABOUT: Promise grid (three promises) ----- */
        .promise-grid { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 58rem; margin: 0 auto; }
        @media (min-width: 768px) { .promise-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
        .promise-card { padding: 2.25rem 0.25rem 1.5rem; border-top: 1px solid var(--stone); position: relative; }
        .promise-card__mark { display: inline-block; font-family: var(--serif); font-style: italic; font-size: var(--fs-xl); color: var(--amber); line-height: 1; margin-bottom: 0.85rem; }
        .promise-card__title { font-family: var(--serif); font-size: 1.75rem; line-height: 1.2; font-weight: 400; color: var(--charcoal); margin: 0 0 0.9rem; letter-spacing: -0.01em; }
        .promise-card__title em { color: var(--amber); font-style: italic; }
        .promise-card__body { font-family: var(--sans); font-size: var(--fs-base); line-height: 1.7; color: var(--oak); margin: 0; max-width: 28rem; }

        /* ----- ABOUT: Personal touches cards ----- */
        .personal-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 64rem; margin: 0 auto; }
        @media (min-width: 768px) { .personal-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }
        /* Personal cards — unboxed display quotes on pine. Each quote gets a brass
           mark above and italic serif body, matching the case-study/value-stack
           display-on-pine grammar. */
        .personal-card {
            background: transparent;
            padding: 1.5rem 0;
            text-align: center;
            position: relative;
            min-height: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 1rem;
        }
        .personal-card::before {
            content: '';
            width: 2.5rem;
            height: 2px;
            background: var(--brass);
            display: block;
        }
        .personal-card::before { content: ''; position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); width: 1.5rem; height: 1px; background: var(--amber); }
        .personal-card__quote {
            font-family: var(--serif);
            font-style: italic;
            font-size: clamp(1.125rem, 1.6vw, 1.4rem);
            line-height: 1.5;
            color: rgba(246, 242, 228, 0.92);
            margin: 0;
            max-width: 24rem;
        }

        /* ----- BUYERS: MLS browse + filters ----- */
        .mls-browse__header { text-align: center; max-width: 680px; margin: 0 auto 2.75rem; }
        .mls-browse__sub { color: var(--oak); margin-top: 1.25rem; font-size: var(--fs-md); line-height: 1.7; }
        /* Filter bar — editorial search panel, no heavy box */
        .filter-bar {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem 2rem;
            padding: 2rem 0;
            background: transparent;
            border: none;
            border-top: 1px solid rgba(28, 28, 26, 0.15);
            border-bottom: 1px solid rgba(28, 28, 26, 0.15);
            border-radius: 0;
            margin-bottom: 3rem;
        }
        @media (min-width: 768px) { .filter-bar { grid-template-columns: repeat(2, 1fr); padding: 2rem 0; } }
        @media (min-width: 1024px) { .filter-bar { grid-template-columns: 1.2fr 2fr 1fr 1.8fr; align-items: end; gap: 1.5rem 2.5rem; } }
        .filter-bar__group { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
        /* Filter bar accents use pine (secondary), not brass (primary CTA color).
           Keeps the filter area from competing with CTA buttons for attention
           and reads as a quieter, editorial search panel. */
        .filter-bar__label {
            font-family: var(--sans);
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--pine);
        }
        .filter-select { position: relative; }
        /* Cleaner underline-only select — magazine-like */
        .filter-select__input {
            background: transparent;
            border: none;
            border-bottom: 1px solid rgba(28, 28, 26, 0.25);
            border-radius: 0;
            padding: 0.6rem 2rem 0.6rem 0;
            font-family: var(--serif);
            font-size: 1.125rem;
            font-weight: 400;
            color: #1C1C1A;
            cursor: pointer;
            min-height: auto;
            box-shadow: none;
        }
        .filter-select__input:hover { border-bottom-color: var(--pine); }
        .filter-select__input:focus { border-bottom-color: var(--pine); box-shadow: none; outline: none; }
        .filter-select__caret { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; color: var(--pine); pointer-events: none; }
        .filter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
        .filter-chip {
            font-family: var(--sans);
            font-size: 0.8rem;
            font-weight: 500;
            color: rgba(28, 28, 26, 0.75);
            background: transparent;
            border: 1px solid rgba(28, 28, 26, 0.25);
            border-radius: 2px;
            padding: 0.45rem 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
            letter-spacing: 0.04em;
        }
        .filter-chip:hover { border-color: #1C1C1A; color: #1C1C1A; }
        /* Active (selected) chip uses brass — distinctive from the pine-family
           labels/carets so the current selection clearly stands apart from the
           static metadata around it. */
        .filter-chip.is-active {
            background: var(--brass);
            border-color: var(--brass);
            color: var(--linen);
        }
        .filter-chip.is-active:hover {
            background: var(--amber-dark);
            border-color: var(--amber-dark);
        }
        .mls-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; margin-bottom: 3rem; }
        @media (min-width: 640px) { .mls-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1024px) { .mls-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
        .mls-grid .property-card__image { background: linear-gradient(135deg, var(--parchment) 0%, var(--stone) 60%, var(--sage-muted) 100%); }
        .mls-grid .property-card:nth-child(2) .property-card__image { background: linear-gradient(135deg, var(--stone) 0%, var(--parchment) 100%); }
        .mls-grid .property-card:nth-child(3) .property-card__image { background: linear-gradient(135deg, var(--sage-muted) 0%, var(--parchment) 60%, var(--stone) 100%); }
        .mls-grid .property-card:nth-child(4) .property-card__image { background: linear-gradient(135deg, var(--parchment) 0%, var(--sage-muted) 100%); }
        .mls-grid .property-card:nth-child(5) .property-card__image { background: linear-gradient(135deg, var(--stone) 0%, var(--sage-muted) 100%); }
        .mls-grid .property-card:nth-child(6) .property-card__image { background: linear-gradient(135deg, var(--parchment) 0%, var(--stone) 100%); }
        .mls-browse__cta { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin-top: 0.5rem; }
        @media (min-width: 640px) { .mls-browse__cta { flex-direction: row; justify-content: center; gap: 2rem; } }
        .mls-browse__ghost { font-family: var(--sans); font-size: var(--fs-sm); font-weight: 500; color: var(--oak); border-bottom: 1px solid var(--stone); padding-bottom: 2px; transition: color 0.25s, border-color 0.25s; }
        .mls-browse__ghost:hover { color: var(--amber); border-color: var(--amber); }
        .mls-browse__ghost .arrow { display: inline-block; transition: transform 0.25s; }
        .mls-browse__ghost:hover .arrow { transform: translateX(3px); }
        .mls-browse__note { text-align: center; font-family: var(--sans); font-size: var(--fs-xs); color: var(--driftwood); letter-spacing: 0.03em; margin-top: 1.75rem; }

        /* ----- BUYERS: Valuation teaser (inline CTA card) ----- */
        .valuation-teaser { padding: 3rem 0; background: var(--cream); }
        .valuation-teaser__card { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 2rem 2rem; background: var(--cream); border: 1px solid var(--stone); border-left: 3px solid var(--amber); border-radius: 3px; }
        @media (min-width: 768px) { .valuation-teaser__card { flex-direction: row; align-items: center; justify-content: space-between; gap: 2.5rem; padding: 2.25rem 2.5rem; } }
        .valuation-teaser__content { flex: 1; }
        .valuation-teaser__content .kicker { margin-bottom: 0.75rem; }
        .valuation-teaser__content h3 { font-family: var(--serif); font-size: var(--fs-xl); font-weight: 400; line-height: 1.2; color: var(--charcoal); margin-bottom: 0.5rem; letter-spacing: -0.01em; }
        .valuation-teaser__content p { font-size: 0.9375rem; color: var(--oak); line-height: 1.65; margin: 0; max-width: 52ch; }
        .valuation-teaser__cta { flex-shrink: 0; white-space: nowrap; }
        .valuation-teaser__cta .arrow { display: inline-block; margin-left: 0.35rem; transition: transform 0.25s; }
        .valuation-teaser__cta:hover .arrow { transform: translateX(3px); }

        /* ----- SELLERS: commission section + value stack single-column ----- */
        .value-stack__grid--single { grid-template-columns: 1fr; max-width: 720px; margin-left: auto; margin-right: auto; }
        .commission-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; margin-bottom: 2rem; }
        @media (min-width: 768px) { .commission-grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
        .commission-copy p { color: var(--oak); line-height: 1.8; font-size: var(--fs-md); margin-bottom: 1.25rem; }
        .commission-copy p:first-child { font-family: var(--serif); font-size: var(--fs-lg); line-height: 1.5; color: var(--charcoal); font-style: italic; }
        .commission-copy__meta { font-size: 0.9375rem !important; color: var(--driftwood) !important; border-left: 2px solid var(--amber); padding-left: 1rem; margin-top: 1.5rem !important; }
        .commission-footnote { text-align: center; font-family: var(--serif); font-style: italic; font-size: var(--fs-lg); color: #1C1C1A; margin-top: 2rem; }

        /* Commission card — single full-width panel, replaces two-column grid */
        .commission-card {
            background: #FFFFFF;
            border: 1px solid rgba(28, 28, 26, 0.12);
            padding: clamp(2rem, 5vw, 3.5rem);
            max-width: 780px;
            margin: 0 auto;
            color: #1C1C1A;
            --ink: #1C1C1A;
            --charcoal: #1C1C1A;
            --oak: #2C2820;
        }
        .commission-card__headline {
            font-family: var(--serif);
            font-size: clamp(1.8rem, 4vw, 2.75rem);
            line-height: 1.1;
            letter-spacing: -0.02em;
            color: #1C1C1A;
            margin-bottom: 1.75rem;
            text-align: center;
        }
        .commission-card__headline em { font-style: italic; color: var(--brass); }
        .commission-card__copy p {
            color: #2C2820;
            line-height: 1.75;
            font-size: var(--fs-md);
            margin-bottom: 1rem;
        }
        .commission-card__list { margin-top: 2rem; }
        .commission-card__list .value-stack__item { border-bottom-color: rgba(28, 28, 26, 0.12); }
        .commission-card__list .value-stack__item-name { color: #1C1C1A; }
        .commission-card__list .value-stack__item-price { color: var(--brass); }

        /* The total — full-width highlight banner */
        .commission-card__total {
            margin-top: 2rem;
            padding: 1.75rem 1.5rem;
            background: #1F3A2E;
            color: #F6F2E4;
            text-align: center;
            border-radius: 0;
        }
        .commission-card__total-label {
            font-family: var(--sans);
            font-size: 0.75rem;
            letter-spacing: 0.26em;
            text-transform: uppercase;
            color: rgba(246, 242, 228, 0.75);
            margin-bottom: 0.4rem;
        }
        .commission-card__total-amount {
            font-family: var(--serif);
            font-size: clamp(2.25rem, 5vw, 3.25rem);
            line-height: 1;
            color: #F6F2E4;
            letter-spacing: -0.01em;
        }
        .commission-card__total-note {
            margin-top: 0.6rem;
            font-family: var(--serif);
            font-style: italic;
            color: rgba(246, 242, 228, 0.80);
            font-size: 0.95rem;
        }
        .commission-card__meta {
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(28, 28, 26, 0.12);
            font-size: 0.9rem;
            color: #2C2820;
            line-height: 1.6;
        }
        .testimonial-strip__initials { font-family: var(--serif); font-size: 2.5rem; font-weight: 500; color: var(--linen); opacity: 0.85; letter-spacing: 0.05em; }

        /* ----- CONTACT: phone CTA block + intent tabs ----- */
        .contact-phone-cta { background: var(--cream); }
        .contact-phone-cta__number { display: inline-block; font-family: var(--serif); font-size: clamp(2.25rem, 6vw, 3rem); letter-spacing: -0.01em; color: var(--charcoal); margin: 0.5rem 0 0.75rem; text-decoration: none; line-height: 1.1; transition: color 0.25s; }
        .contact-phone-cta__number:hover { color: var(--amber); }
        .contact-phone-cta__sub { font-family: var(--sans); font-size: 0.9375rem; color: var(--driftwood); max-width: 420px; margin: 0 auto; }
        .contact-form-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: start; }
        @media (min-width: 1024px) { .contact-form-grid { grid-template-columns: 40% 1fr; gap: 4rem; } }

        /* Contact form section — pine bg (brand primary). Text + inputs flip
           to ivory for legibility; photo frame stays ivory so the portrait
           lifts off the pine as a clear card element. */
        .contact-form-section {
            background: var(--pine);
        }

        /* Photo column — photo frame + quote share the same max-width so they
           align as a single editorial unit. Frame ivory, stands out on pine. */
        .contact-photo-column { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; }
        .contact-photo-column__frame {
            width: 100%;
            max-width: 420px;
            aspect-ratio: 1 / 1;
            border: none;
            border-radius: 4px;
            overflow: hidden;
            background: var(--ivory);
            margin: 0;
        }
        .contact-photo-column__img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .contact-photo-column__quote {
            margin: 0;
            padding: 0;
            border: 0;
            width: 100%;
            max-width: 420px;
        }
        .contact-photo-column__quote p {
            font-family: var(--serif);
            font-style: italic;
            font-size: clamp(1.3rem, 1.6vw, 1.5rem);
            line-height: 1.5;
            color: rgba(246, 242, 228, 0.94);
            margin: 0 0 1rem;
        }
        .contact-photo-column__quote p em {
            color: var(--brass);
            font-style: italic;
        }
        .contact-photo-column__quote cite {
            font-family: var(--sans);
            font-style: normal;
            font-size: var(--fs-xs);
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(246, 242, 228, 0.7);
            font-weight: 600;
        }
        /* Intent tabs — editorial underline indicator, no heavy fills. Active
           tab gets a brass underline + 600 weight + full ivory text. Sits on
           pine, so all text/borders are ivory-tinted. */
        .contact-intent-tabs {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            margin-bottom: 2.25rem;
            border-bottom: 1px solid rgba(246, 242, 228, 0.18);
        }
        .contact-intent-tab {
            position: relative;
            background: transparent;
            border: 0;
            font-family: var(--sans);
            font-size: var(--fs-sm);
            font-weight: 500;
            letter-spacing: 0.06em;
            color: rgba(246, 242, 228, 0.55);
            padding: 1rem 0.5rem;
            cursor: pointer;
            transition: color 0.25s ease;
            text-align: center;
        }
        .contact-intent-tab::after {
            content: '';
            position: absolute;
            left: 50%;
            right: 50%;
            bottom: -1px;
            height: 2px;
            background: var(--brass);
            transition: left 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
                        right 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
        }
        .contact-intent-tab:hover { color: rgba(246, 242, 228, 0.85); }
        .contact-intent-tab.is-active {
            color: var(--linen);
            font-weight: 600;
        }
        .contact-intent-tab.is-active::after {
            left: 0;
            right: 0;
        }

        /* Form crossfade — all 3 forms share the same CSS grid cell so the
           column height stays stable (sized to the tallest form). The active
           form fades in while the others fade out. No snap-swap, no layout
           shift when switching tabs. */
        .contact-form-column {
            display: grid;
            grid-template-rows: auto 1fr;
        }
        .contact-intent-tabs {
            grid-row: 1;
            grid-column: 1;
        }
        .intent-form {
            grid-row: 2;
            grid-column: 1;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease, transform 0.3s ease;
            transform: translateY(8px);
        }
        .intent-form.is-active {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
            z-index: 2;
        }

        .intent-form__submit { width: 100%; margin-top: 0.5rem; }
        .intent-form__reassurance { margin-top: 1rem; font-family: var(--sans); font-size: var(--fs-xs); line-height: 1.55; color: rgba(28, 28, 26, 0.65); text-align: center; }
        .intent-form__reassurance a { color: rgba(28, 28, 26, 0.65); text-decoration: underline; }
        .intent-form__reassurance a:hover { color: var(--brass); }
        .contact-areas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; margin: 1.75rem 0 1.25rem; }
        .contact-areas__note { font-family: var(--sans); font-size: var(--fs-sm); color: var(--driftwood); margin: 0; }
        .contact-final-phone { font-family: var(--serif); font-size: var(--fs-lg); letter-spacing: 0.01em; }
        .final-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.5rem; }

        /* ================================================================
           TIER 3 PATCH — Fixes for spacing, filter alignment, FAQ, tabs
           ================================================================ */

        /* About page photo + bio: balanced 2-col on desktop, generous padding */
        .about-bio__grid--v2 {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2.5rem;
            align-items: center;
            max-width: var(--container);
            margin: 0 auto;
        }
        @media (min-width: 768px) {
            .about-bio__grid--v2 {
                grid-template-columns: 380px 1fr;
                gap: 4rem;
                align-items: center;
            }
        }
        .about-bio__grid--v2 .about-bio__photo {
            width: 100%;
            max-width: 380px;
            margin: 0 auto;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            border: 2px solid var(--stone);
            border-radius: 4px;
            box-shadow: 0 20px 40px -20px rgba(0,0,0,0.15);
        }
        .about-bio__grid--v2 .about-bio__photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .about-bio__grid--v2 .about-bio__text {
            max-width: 560px;
        }
        .about-bio__grid--v2 .about-bio__text h2 {
            margin-bottom: 1.25rem;
        }
        .about-bio__grid--v2 .about-bio__text p {
            color: var(--oak);
            line-height: 1.8;
            font-size: var(--fs-md);
            margin-bottom: 1.25rem;
        }
        .about-bio__grid--v2 .about-bio__text p:last-child { margin-bottom: 0; }

        /* BUYERS: filter bar top-aligned (was align-items: end) */
        @media (min-width: 1024px) {
            .filter-bar {
                align-items: start;
            }
        }
        /* Ensure label + input stack naturally top-down with consistent spacing */
        .filter-bar__group { align-self: start; }

        /* (Old heavy amber-fill tab override removed — the editorial underline
           treatment in the main .contact-intent-tab rule above handles styling.) */

        /* ================================================================
           MEET MICHELE — editorial 2-column with portrait + stat badge
           ================================================================ */
        .meet-michele { /* inherits pine body bg */ }
        .meet-michele__grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 3rem;
            max-width: var(--container);
            margin: 0 auto;
            align-items: center;
        }
        @media (min-width: 1024px) {
            .meet-michele__grid {
                grid-template-columns: minmax(400px, 520px) 1fr;
                gap: 5.5rem;
                align-items: center;
            }
        }

        /* Wrapper hosts the badge without clipping. Photo handles the image crop. */
        .meet-michele__photo-wrap {
            position: relative;
            max-width: 520px;
            width: 100%;
            margin: 0 auto;
        }
        .meet-michele__photo {
            position: relative;
            aspect-ratio: 1 / 1;
            width: 100%;
            overflow: hidden;
            background: var(--parchment);
            box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.45);
        }
        .meet-michele__photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.6s ease;
        }
        @media (hover: hover) {
            .meet-michele__photo:hover img { transform: scale(1.03); }
        }

        /* Badge sits outside the photo at bottom-right, anchored as a gold tile.
           Works on any headshot background (light or dark). */
        .meet-michele__photo-badge {
            position: absolute;
            bottom: -20px;
            right: -20px;
            background: var(--amber);
            color: var(--linen);
            padding: 1.1rem 1.4rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 1rem;
            box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.4);
            border: 1px solid var(--amber-dark);
            z-index: 2;
        }
        @media (max-width: 640px) {
            .meet-michele__photo-badge {
                bottom: -14px;
                right: 12px;
                padding: 0.9rem 1.1rem;
                gap: 0.75rem;
            }
        }
        .meet-michele__photo-badge-num {
            font-family: var(--serif);
            font-size: 2.5rem;
            line-height: 0.9;
            letter-spacing: -0.02em;
            font-weight: 400;
        }
        .meet-michele__photo-badge-label {
            font-family: var(--sans);
            font-size: var(--fs-xs);
            font-weight: 600;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            line-height: 1.35;
            text-align: left;
            opacity: 0.95;
            border-left: 1px solid rgba(247, 241, 228, 0.5);
            padding-left: 0.95rem;
            display: block;
            white-space: normal;
            min-width: 5.5rem;
        }
        @media (max-width: 640px) {
            .meet-michele__photo-badge-num { font-size: var(--fs-2xl); }
            .meet-michele__photo-badge-label { padding-left: 0.75rem; font-size: var(--fs-xs); }
        }

        /* Body column */
        .meet-michele__body { max-width: 560px; }
        .meet-michele__body .kicker { margin-bottom: 1.25rem; }
        .meet-michele__body h2 {
            margin-bottom: 1.25rem;
            font-size: clamp(2.2rem, 4.5vw, 3.25rem);
            line-height: 1.05;
        }
        .meet-michele__lead {
            font-family: var(--serif);
            font-style: italic;
            font-size: clamp(1.25rem, 2.2vw, 1.65rem);
            line-height: 1.4;
            color: var(--amber);
            margin: 0 0 1.5rem;
            letter-spacing: -0.01em;
        }
        .meet-michele__para {
            color: var(--oak);
            line-height: 1.8;
            font-size: var(--fs-md);
            margin-bottom: 2rem;
        }
        .meet-michele__signature {
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
            padding: 1.25rem 0 1.5rem;
            border-top: 1px solid var(--stone);
            margin-bottom: 2rem;
        }
        .meet-michele__sig-name {
            font-family: var(--serif);
            font-style: italic;
            font-size: var(--fs-xl);
            color: var(--charcoal);
            line-height: 1;
            letter-spacing: -0.01em;
        }
        .meet-michele__sig-title {
            font-family: var(--sans);
            font-size: var(--fs-xs);
            font-weight: 500;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--driftwood);
        }
        .meet-michele__ctas {
            display: flex;
            align-items: center;
            gap: 1.5rem 2rem;
            flex-wrap: wrap;
        }
        .meet-michele__ghost {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: var(--sans);
            font-size: var(--fs-xs);
            font-weight: 500;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--oak);
            border-bottom: 1px solid var(--stone);
            padding-bottom: 4px;
            transition: color 0.25s ease, border-color 0.25s ease;
        }
        .meet-michele__ghost:hover { color: var(--amber-dark); border-color: var(--amber); }
        .meet-michele__ghost .arrow { display: inline-block; transition: transform 0.25s ease; }
        .meet-michele__ghost:hover .arrow { transform: translateX(3px); }

        /* ========================================================================
           ELEVATED CARDS — three-tier surface hierarchy (pine > ivory > white).
           Cards get a distinct white background + subtle shadow so they lift off
           the ivory section surface instead of blending into it. Placed at the end
           of the stylesheet so these declarations win source-order against the
           earlier component-specific rules that set explicit cream/ivory bgs.
           ======================================================================== */
        .valuation__card,
        .valuation-teaser,
        .testimonial-strip__quote,
        .property-card,
        .commission-card {
            background: var(--paper-card);
            box-shadow:
                0 1px 2px rgba(28, 22, 16, 0.04),
                0 6px 22px -10px rgba(28, 22, 16, 0.14);
            border: 1px solid rgba(28, 22, 16, 0.06);
        }

/* ========================================================================
   SHORTLIST FORM — buyer mini-form on /buyers (replaces fake MLS browse).
   Inherits .form-control / .form-label tokens from the global form system.
   ======================================================================== */
.shortlist-form {
    max-width: 680px;
    margin: 2.5rem auto 0;
}

.shortlist-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .shortlist-form__row {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

.shortlist-form .form-group {
    margin-bottom: 0;
}

.shortlist-form .form-label__hint {
    color: var(--driftwood);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.shortlist-form textarea.form-control {
    resize: vertical;
    min-height: 90px;
    line-height: 1.55;
}

.shortlist-form__actions {
    text-align: center;
    margin-top: 2rem;
}

.shortlist-form__actions .btn {
    min-width: 240px;
}

.shortlist-form__note {
    margin-top: 1rem;
    color: var(--driftwood);
    font-size: 0.85rem;
    line-height: 1.55;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

.shortlist-form__success {
    margin-top: 2rem;
    padding: 2rem;
    background: var(--paper-card);
    border: 1px solid rgba(28, 22, 16, 0.08);
    border-left: 4px solid var(--amber);
    border-radius: 4px;
    text-align: center;
}

.shortlist-form__success h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--charcoal);
    margin: 0 0 0.5rem;
}

.shortlist-form__success p {
    color: var(--oak);
    line-height: 1.65;
    margin: 0;
}

.shortlist-form__success a {
    color: var(--amber-dark);
    text-decoration: underline;
}

/* ========================================================================
   COMMUNITY PAGES — Layout fixes after MLS removal
   ======================================================================== */

/* Proof strip on community pages: exactly 3 stats (was 4 before "Active
   Listings" was dropped). Use :has() to detect grids with exactly three
   children so this rule applies to community pages only and leaves the
   home page's 4-stat strip untouched. */
.proof-strip__grid:has(> :nth-child(3):last-child) {
    max-width: 720px;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .proof-strip__grid:has(> :nth-child(3):last-child) {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Nearby-communities grid is 2 columns. With 7 cities (Kannapolis added),
   the last card sits alone on its row. Span both columns when this happens
   so the bottom feels balanced. Auto-applies to any odd count. */
.nearby-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}