/* Self-hosted webfonts. Replaces fonts.googleapis.com to drop the
           cross-origin CSS round-trip + gstatic.com TLS handshake on cold
           cache. Inter is shipped as a single variable woff2 covering 100-900;
           Playfair Display is one static cut at 700. Latin subset only. */
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 100 900;
            font-display: swap;
            src: url('/fonts/inter-variable-latin.woff2') format('woff2-variations'),
                 url('/fonts/inter-variable-latin.woff2') format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }
        @font-face {
            font-family: 'Playfair Display';
            font-style: normal;
            font-weight: 700;
            font-display: swap;
            src: url('/fonts/playfair-display-700-latin.woff2') format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }

        :root {
            /* Standardized palette */
            --color-primary: #2c2c2c;
            --color-secondary: #666666;
            --color-tertiary: #999999;
            --color-accent: #c9a961;
            --color-accent-dark: #b89548;
            --color-bg-light: #faf9f7;
            --color-border: #e8e8e8;

            --ink: var(--color-primary);
            --paper: #ffffff;
            --cream: var(--color-bg-light);
            --accent: var(--color-accent);
            --accent-dark: var(--color-accent-dark);
            --accent-gold: var(--color-accent);
            --accent-soft: color-mix(in srgb, var(--color-accent) 12%, transparent);
            --text-2: var(--color-secondary);
            --text-3: var(--color-tertiary);
            --text-0: var(--color-primary);
            --text-1: var(--color-secondary);
            --rule: var(--color-border);
            --border: var(--color-border);

            /* Legacy tokens → aliases (one root edit cascades to ~175 call sites) */
            --warm-white: var(--paper);
            --sage-green: var(--accent);
            --soft-tan: var(--accent);
            --terracotta: var(--accent);
            --blush-pink: var(--text-3);
            --slate-blue: var(--ink);

            --gold-tan: var(--accent);
            --gold-tan-dark: var(--accent-dark);
            --gold-tan-soft: var(--accent-soft);

            --charcoal: var(--ink);
            --charcoal-light: var(--text-2);
            --charcoal-medium: var(--text-2);

            --sage-light: var(--accent);
            --tan-light: var(--cream);
            --terracotta-light: var(--accent);
            --pink-light: var(--cream);
            --blue-light: var(--text-2);

            --primary-wood: var(--accent);
            --light-wood: var(--border);
            --dark-chocolate: var(--ink);
            --milk-chocolate: var(--accent);
            --cream-white: var(--cream);
            --pure-white: var(--paper);
            --warm-gray: var(--text-2);
            --light-gray: var(--cream);
            --text-dark: var(--ink);
            --text-medium: var(--text-2);
            --text-light: var(--text-2);
            --mint-accent: var(--accent);
            --mint-light: var(--cream);
            --mint-dark: var(--accent-dark);

            /* Gradients flatten to solids */
            --primary-gradient: var(--accent);
            --subtle-gradient: var(--cream);
            --mint-gradient: var(--accent);
            --accent-gradient: var(--accent);
            --cool-gradient: var(--ink);

            /* Border radius */
            --radius-xs: 4px;
            --radius-sm: 6px;
            --radius-md: 8px;
            --radius-lg: 8px;
            --radius-circle: 50%;
            --radius-pill: 999px;

            /* Shadows */
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

            /* Transitions */
            --transition-fast: all 0.3s ease;
            --transition-opacity: opacity 0.3s ease;
            --transition-color: color 0.3s ease;

            /* Font */
            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            --font-serif: 'Playfair Display', Georgia, serif;
            --font-primary: var(--font-sans);
            --font-heading: var(--font-serif);

            --h1-size: 50px;
            --h2-size: 40px;
            --h3-size: 22px;
            --body-size: 16px;
            --small-size: 14px;

            /* Header chrome - single source of truth across all pages */
            --header-height: 72px;
            --header-height-mobile: 60px;

            /* Section vertical rhythm - single source of truth for all .section blocks */
            --section-py: 2.5rem;
            --section-py-mobile: 2rem;

            /* Subtle background tints for alternating section rhythm */
            --section-alt-bg: var(--color-bg-light);
            --section-soft-bg: var(--color-bg-light);
        }

        /* Global typography defaults — minimal/premium */
        body {
            font-size: var(--body-size);
            line-height: 1.6;
            font-weight: 400;
        }
        h1, h2 {
            font-family: var(--font-serif);
            color: var(--ink);
        }
        h3, h4, h5, h6 {
            font-family: var(--font-sans);
            color: var(--ink);
        }
        h1 { font-size: var(--h1-size); font-weight: 700; letter-spacing: 0; line-height: 1.2; }
        h2 { font-size: var(--h2-size); font-weight: 700; letter-spacing: 0; line-height: 1.2; }
        h3 { font-size: var(--h3-size); font-weight: 600; line-height: 1.3; }
        h4 { font-size: 18px; font-weight: 600; line-height: 1.3; }
        .caption, small { font-size: var(--small-size); color: var(--color-secondary); line-height: 1.5; }
        .eyebrow {
            font-size: 12px;
            color: var(--text-2);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 500;
        }

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

        html {
            /* scroll-behavior: smooth; removed to prevent auto-scroll on page refresh */
        }

        body {
            font-family: var(--font-primary);
            color: var(--ink);
            background-color: var(--paper);
            overflow-x: hidden;
            padding-top: var(--header-height);
        }

        /* Utility Classes */
        .rounded { border-radius: 0; }
        .rounded-top { border-radius: 0; }
        
        /* Accent Color Utilities */
        .accent-terracotta { background: var(--terracotta); color: var(--warm-white); }
        .accent-blush { background: var(--blush-pink); color: var(--charcoal); }
        .accent-slate { background: var(--slate-blue); color: var(--warm-white); }
        .text-terracotta { color: var(--terracotta); }
        .text-blush { color: var(--blush-pink); }
        .text-slate { color: var(--slate-blue); }
        .border-terracotta { border-color: var(--terracotta); }
        .border-blush { border-color: var(--blush-pink); }
        .border-slate { border-color: var(--slate-blue); }
        
        /* Photo Banner Scrolling */
        .photo-scroll {
            scrollbar-width: thin;
            scrollbar-color: #ccc transparent;
        }
        .photo-scroll::-webkit-scrollbar {
            height: 6px;
        }
        .photo-scroll::-webkit-scrollbar-track {
            background: transparent;
        }
        .photo-scroll::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 0;
        }
        .photo-scroll::-webkit-scrollbar-thumb:hover {
            background: var(--color-tertiary);
        }
        .flex-center {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .flex-center-y {
            display: flex;
            align-items: center;
        }

        .transition-fast { transition: var(--transition-fast); }
        .transition-opacity { transition: var(--transition-opacity); }
        .transition-color { transition: var(--transition-color); }

        .shadow-sm { box-shadow: var(--shadow-sm); }
        .shadow-md { box-shadow: var(--shadow-md); }
        .shadow-lg { box-shadow: var(--shadow-lg); }

        .radius-sm { border-radius: var(--radius-sm); }
        .radius-md { border-radius: var(--radius-md); }
        .radius-lg { border-radius: var(--radius-lg); }
        .radius-circle { border-radius: var(--radius-circle); }

        .text-primary { color: var(--accent); }
        .text-gray { color: var(--text-2); }
        .text-light { color: var(--text-light); }

        .bg-primary { background: var(--accent); }
        .bg-danger { background: #dc3545; }
        .bg-gradient { background: var(--primary-gradient); }

        /* Admin chrome button — small label-style button used in header/upload contexts */
        .btn-admin {
            background: var(--accent);
            color: var(--paper);
            border: none;
            padding: 4px 10px;
            border-radius: 0;
            font-size: 11px;
            cursor: pointer;
            transition: background 0.2s ease;
        }
        .btn-admin:hover {
            background: var(--accent-dark);
        }
        .btn-admin--logo {
            position: absolute;
            top: -5px;
            right: -50px;
        }

        /* Admin login overlay (shown to non-admin visitors who hit /admin) */
        .admin-login-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.85);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .admin-login-form {
            background: var(--paper);
            padding: 40px;
            max-width: 360px;
            width: 90%;
            text-align: center;
        }
        .admin-login-form h2 {
            margin: 0 0 20px;
        }
        .admin-login-form .admin-login-error {
            color: #dc3545;
            margin: 0 0 15px;
        }
        .admin-login-form .form-group {
            margin-bottom: 15px;
        }

        
        /* Header */
        .header {
            position: fixed;
            top: 0;
            width: 100%;
            height: var(--header-height);
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(14px) saturate(1.1);
            -webkit-backdrop-filter: blur(14px) saturate(1.1);
            z-index: 1000;
            padding: 0;
            /* Limit transition to the props that actually change (background +
               box-shadow) — `all` was kicking off transitions every scroll
               tick when the JS listener wrote inline styles. */
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
            border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
        }
        .header--scrolled {
            background: rgba(255, 255, 255, 0.97);
            border-bottom-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
            box-shadow: 0 8px 24px rgba(26, 26, 26, 0.08);
        }
        /* Mobile: drop the header backdrop-filter. Each scroll tick was
           re-rasterising the full viewport-width strip behind the fixed
           header on iOS Safari — single largest scroll-jank source on
           phones. The 0.97 opacity reads as effectively solid without it. */
        @media (max-width: 768px) {
            .header {
                background: rgba(255, 255, 255, 0.97);
                -webkit-backdrop-filter: none;
                        backdrop-filter: none;
            }
            .header--scrolled {
                background: rgba(250, 246, 242, 0.99);
            }
        }

        .nav {
            max-width: 1200px;
            height: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2.25rem;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 500;
            color: var(--primary-wood);
            text-decoration: none;
            flex-shrink: 0;
            display: flex;
            align-items: center;
        }

        .header .logo img {
            display: block;
            height: 48px;
            max-height: calc(var(--header-height) - 16px);
            width: auto;
            object-fit: contain;
            margin-right: 0.35rem;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 2.15rem;
            flex: 1;
            justify-content: center;
            padding-right: 60px;
        }

        .nav-links a {
            text-decoration: none;
            color: var(--text-medium);
            font-weight: 600;
            font-size: 0.98rem;
            letter-spacing: 0;
            transition: color 0.3s ease;
        }

        .nav-links a:hover {
            color: var(--primary-wood);
        }

        .mobile-menu {
            display: none;
            flex-direction: column;
            cursor: pointer;
            padding: 14px;
            margin: -14px;
        }

        .mobile-menu span {
            width: 25px;
            height: 3px;
            background: var(--color-primary);
            margin: 3px 0;
            transition: 0.3s;
        }

        /* Hero Section */
        .hero {
            min-height: 100vh;
            background: var(--subtle-gradient);
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .hero-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            text-align: center;
            color: white;
            position: relative;
            z-index: 1;
        }

        .hero h1 {
            font-size: 3.5rem;
            font-weight: 400;
            margin-bottom: 1rem;
            animation: slideInUp 1s ease-out;
        }

        .hero p {
            font-size: 1.25rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            animation: slideInUp 1s ease-out 0.2s both;
        }

        .cta-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            animation: slideInUp 1s ease-out 0.4s both;
        }

        .btn {
            padding: 0.9rem 1.7rem;
            border-radius: 10px;
            font-family: var(--font-sans);
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0;
            text-transform: uppercase;
            text-decoration: none;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
                        transform 0.18s ease, box-shadow 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            border: 1.5px solid transparent;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        /* Pressed-in feel on click — quick scale-down springs back via the
           btn's existing transform transition. */
        .btn:active {
            transform: translateY(0) scale(0.97);
        }

        .btn-primary {
            background: var(--color-accent);
            color: var(--paper);
            border-color: var(--color-accent);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10),
                        0 8px 22px color-mix(in srgb, var(--color-accent) 20%, transparent);
        }

        .btn-primary:hover {
            background: var(--color-accent-dark);
            border-color: var(--color-accent-dark);
            color: var(--paper);
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16),
                        0 12px 28px color-mix(in srgb, var(--color-accent) 24%, transparent);
        }

        .btn-secondary {
            background: var(--paper);
            color: var(--color-accent);
            border: 1.5px solid var(--color-accent);
        }

        .btn-secondary:hover {
            background: var(--color-accent);
            color: var(--paper);
            transform: translateY(-2px) scale(1.02);
            box-shadow: var(--shadow-md);
        }

        .btn-outline {
            background: var(--paper);
            color: var(--color-accent);
            border: 1.5px solid var(--color-accent);
        }

        .btn-outline:hover {
            background: var(--color-accent);
            color: var(--paper);
            transform: translateY(-2px) scale(1.02);
            box-shadow: var(--shadow-md);
        }

        /* Button modifiers */
        .btn--full {
            display: flex;
            width: 100%;
            justify-content: center;
        }
        .btn--lg {
            padding: 1rem 2rem;
            font-size: 14px;
        }

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

        /* Sections — no top border. The 1px divider previously sat between
           sections but read as a stray vertical line whenever the hero
           foreground popout overflowed into the next section and hid the
           middle portion of the line, leaving only the left/right edges
           visible. Visual rhythm between sections is preserved by the
           .section-alt background-tint alternation below. */
        .section {
            padding: var(--section-py) 0;
        }
        /* Alternating background tint for visual rhythm. Subtle so it reads
           as a soft divider, not a coloured panel. The popout-cutout overrides
           below win on specificity for the first 3 sections after the hero. */
        .section-alt {
            background: var(--section-alt-bg);
        }
        /* FAQ section sits at the page's soft-finish — gentle off-white so the
           transition from the neighborhood preview reads as intentional. */
        #home-faq {
            background: var(--section-soft-bg);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .section-title {
            text-align: center;
            margin-bottom: 2rem;
        }

        .section-page-header {
            padding: 1.75rem 0 1rem;
        }
        .section-page-header .section-title {
            margin-bottom: 1rem;
        }

        .section-title h1 {
            margin-bottom: 1rem;
        }

        /* Animated page-title (used by lib/_partials/page_header.php) */
        .page-title {
            position: relative;
        }
        .page-title .page-title-h1 {
            display: inline-block;
            position: relative;
            margin-bottom: 1rem;
        }
        .page-title .page-title-h1 .page-title-text {
            position: relative;
            z-index: 1;
        }
        .page-title .page-title-h1::before {
            display: none;
        }
        .page-title .page-title-intro {
            opacity: 0;
            transform: translateY(8px);
            animation: pageTitleSlideUp 0.7s ease-out 0.25s forwards;
        }
        @keyframes pageTitlePulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50%      { transform: scale(1.025); opacity: 0.85; }
        }
        @keyframes pageTitleSlideUp {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @media (prefers-reduced-motion: reduce) {
            .page-title .page-title-h1::before {
                animation: none;
            }
            .page-title .page-title-intro {
                animation: none;
                opacity: 1;
                transform: none;
            }
        }

        .section-title h2 {
            font-family: var(--font-serif);
            font-size: var(--h2-size);
            font-weight: 700;
            color: var(--color-primary);
            margin: 1.5rem 0 1rem;
            letter-spacing: 0;
            line-height: 1.2;
        }

        .section-title p {
            font-size: var(--body-size);
            color: var(--color-secondary);
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        /* Properties Section */
        .property-complex {
            margin-bottom: 4rem;
            background: var(--pure-white);
            border-radius: 0;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(139, 69, 19, 0.1);
        }

        .property-header {
            background: var(--cream);
            color: var(--ink);
            padding: 2.5rem;
            border-top: 3px solid var(--accent);
            border-radius: 0;
            box-shadow: var(--shadow-sm);
            margin-bottom: 1.5rem;
        }

        .property-header h3 {
            font-size: 28px;
            color: var(--ink);
            font-weight: 400;
            letter-spacing: 0;
            margin-bottom: 0.4rem;
        }
        .property-header h3 .property-name-link {
            color: inherit;
            text-decoration: none;
            background-image: linear-gradient(currentColor, currentColor);
            background-position: 0 100%;
            background-repeat: no-repeat;
            background-size: 0 1px;
            transition: background-size 0.25s ease;
        }
        .property-header h3 .property-name-link:hover,
        .property-header h3 .property-name-link:focus-visible {
            background-size: 100% 1px;
        }

        .property-location {
            color: var(--text-medium);
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }

        .property-location-text {
            color: var(--text-medium);
        }

        .property-availability-badge {
            display: inline-block;
            font-size: 14px;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 0;
            font-weight: 500;
            background: transparent;
            padding: 0;
            border: none;
            border-radius: 0;
            margin-bottom: 1.25rem;
        }
        .property-availability-badge::before {
            display: none;
        }
        .property-availability-badge--available { color: var(--accent); }
        .property-availability-badge--occupied { color: var(--text-2); }
        .property-availability-badge--coming-soon { color: var(--accent-dark); }

        .property-header .property-amenities {
            display: flex;
            flex-wrap: wrap;
            gap: 32px;
            margin-bottom: 1.25rem;
        }
        .amenity-badge {
            display: inline-block;
            background: transparent;
            border: none;
            padding: 0;
            border-radius: 0;
            font-size: 13px;
            color: var(--color-secondary);
            transition: color 0.2s ease;
        }
        .amenity-badge:hover {
            background: transparent;
            color: var(--accent);
            border-color: transparent;
        }
        .property-cta-link {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            color: var(--gold-tan-dark);
            font-weight: 600;
            text-decoration: none;
            font-size: 0.95rem;
        }
        .property-cta-link .arrow {
            transition: transform 0.2s ease;
            display: inline-block;
        }
        .property-cta-link:hover .arrow {
            transform: translateX(4px);
        }
        @media (prefers-reduced-motion: reduce) {
            .amenity-badge,
            .property-cta-link .arrow {
                transition: none;
            }
        }

        .property-amenities {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .feature-tag {
            background: var(--sage-light);
            color: var(--charcoal);
            padding: 0.25rem 0.75rem;
            border-radius: 0;
            font-size: 0.8rem;
        }

        .rooms-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            padding: 2rem;
        }

        .room-card {
            background: #fff;
            border-radius: var(--radius-md);
            overflow: hidden;
            border: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
            display: flex;
            flex-direction: column;
            max-width: 380px;
            transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
            box-shadow: var(--shadow-sm);
            /* Offset deep-link anchor scrolls so the card lands below the
               sticky header rather than under it. */
            scroll-margin-top: calc(var(--header-height) + 1rem);
        }

        /* Deep-link from the room name — inherits the heading typography so
           the title still reads as a heading; only the hover/focus hint that
           it's clickable. */
        .room-info-heading h4 .room-name-link {
            color: inherit;
            text-decoration: none;
        }
        .room-info-heading h4 .room-name-link:hover,
        .room-info-heading h4 .room-name-link:focus-visible {
            color: var(--color-accent);
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .room-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
            border-color: color-mix(in srgb, var(--color-accent) 85%, transparent);
        }

        .room-card.occupied {
            opacity: 0.6;
            background: #f3f4f6;
        }

        .room-card.occupied:hover {
            transform: none;
            border-color: var(--color-border);
        }

        .room-card.is-filtered-out {
            opacity: 0;
            transform: scale(0.96);
            pointer-events: none;
        }
        /* Hover micro-interactions: price scales, type-badge subtle bump */
        .room-card .room-price {
            transition: transform .25s ease;
            transform-origin: left center;
        }
        .room-card:hover .room-price {
            transform: scale(1.06);
        }
        .room-card .room-type-badge {
            transition: transform .25s ease;
        }
        .room-card:hover .room-type-badge {
            transform: translateY(-1px);
        }
        @media (prefers-reduced-motion: reduce) {
            .room-card,
            .room-card .room-price,
            .room-card .room-type-badge {
                transition: none !important;
                transform: none !important;
            }
            .room-card.is-filtered-out { opacity: 0 !important; }
        }

        .room-image {
            aspect-ratio: 4 / 3;
            height: auto;
            position: relative;
            overflow: hidden;
            border-radius: 0;
            background: var(--color-border);
        }

        .room-gallery {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .room-gallery img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .room-gallery > picture {
            display: none;
        }

        .room-gallery > picture.active {
            display: block;
        }

        .room-gallery > picture img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Fallback for galleries without <picture> */
        .room-gallery > img {
            display: none;
        }

        .room-gallery > img.active {
            display: block;
        }

        /* Drag and Drop Styles for Admin Mode */
        
        .gallery-nav {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 6px;
            z-index: 10;
        }

        .gallery-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .gallery-dot.active {
            background: white;
        }

        .gallery-arrows {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0,0,0,0.5);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 10;
            padding: 8px;
        }

        .room-image:hover .gallery-arrows {
            opacity: 1;
        }

        .gallery-prev {
            left: 10px;
        }

        .gallery-next {
            right: 10px;
        }

        .photo-count {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 4px 8px;
            border-radius: 0;
            font-size: 0.75rem;
            z-index: 10;
        }

        .room-type-badge {
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            background: #2563eb;
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 0;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .room-type-badge.occupied {
            background: #6b7280;
        }

        .room-info {
            padding: 1.5rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .room-info h4 {
            font-size: 18px;
            font-weight: 400;
            margin: 0 0 0.35rem 0;
            color: var(--ink);
            line-height: 1.3;
            letter-spacing: 0;
        }

        .room-info-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.6rem;
            margin-bottom: 0.25rem;
        }
        .room-info-heading h4 {
            margin: 0;
        }

        .room-occupancy {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            font-size: 12px;
            color: var(--text-2);
            font-weight: 400;
            white-space: nowrap;
        }

        .room-type-line {
            font-size: 12px;
            color: var(--text-2);
            text-transform: uppercase;
            letter-spacing: 0;
            font-weight: 500;
            margin-bottom: 0.2rem;
        }

        .room-location {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.78rem;
            color: var(--text-light);
            margin-bottom: 0.85rem;
        }

        .rc-icon {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            color: var(--text-light);
        }

        .room-details {
            color: var(--text-light);
            font-size: 0.85rem;
            margin-bottom: 1rem;
            line-height: 1.5;
        }

        .room-price {
            font-size: 24px;
            font-weight: 400;
            color: var(--accent);
            letter-spacing: 0;
            line-height: 1.1;
            margin: 0.5rem 0 0.85rem;
        }
        .room-price-period {
            font-size: 13px;
            font-weight: 400;
            color: var(--text-2);
            margin-left: 0.15rem;
        }

        .room-features {
            list-style: none;
            margin: 0 0 1rem;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 0 0.5rem;
            line-height: 1.6;
        }
        .room-feature {
            font-size: 13px;
            color: var(--color-secondary);
            display: inline-flex;
            align-items: baseline;
        }
        .room-feature:not(:last-child)::after {
            content: '|';
            color: var(--text-2);
            margin-left: 0.5rem;
            opacity: 0.6;
        }
        .room-feature-check {
            color: var(--accent);
            flex-shrink: 0;
        }

        .room-pax {
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--text-medium);
        }

        .availability-status {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0;
            background: transparent;
            border-radius: 0;
            font-size: 0.85rem;
            font-weight: 600;
            line-height: 1.3;
            color: var(--charcoal);
        }

        .availability-status .availability-dot {
            flex: 0 0 auto;
            display: inline-block;
        }
        .availability-status.available .availability-dot circle { fill: #2f8f4d; }
        .availability-status.occupied .availability-dot circle { fill: #c45a45; }

        .room-footer {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0.6rem;
            margin-top: auto;
            padding-top: 1rem;
            border-top: 1px solid var(--color-border);
        }
        .room-footer .availability-status {
            margin-bottom: 0;
        }
        .room-footer .room-cta {
            width: 100%;
        }

        .room-card .room-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            margin: 0;
            padding: 0.7rem 1rem;
            font-size: 0.85rem;
            font-weight: 600;
            line-height: 1.25;
            text-transform: none;
            letter-spacing: 0;
            border-radius: 0;
            transition: gap 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
        }
        .room-card .room-cta:hover { gap: 0.65rem; }
        .room-cta-arrow {
            flex: 0 0 auto;
            transition: transform 0.2s ease;
        }
        .room-card .room-cta:hover .room-cta-arrow { transform: translateX(2px); }

        /* Gold-tan primary CTA, scoped to /properties room cards only */
        .room-card .room-cta.btn-primary {
            background: var(--gold-tan);
        }
        .room-card .room-cta.btn-primary:hover {
            background: var(--gold-tan-dark);
            box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 30%, transparent);
        }

        /* "Join Waitlist" reads as a secondary action — outline, not filled. */
        .room-card .room-cta.btn-secondary {
            background: transparent;
            color: var(--terracotta);
            border: 2px solid var(--terracotta);
        }
        .room-card .room-cta.btn-secondary:hover {
            background: var(--terracotta);
            color: var(--pure-white);
        }

        .btn-sm {
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
        }

        .summary-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-top: 3rem;
            padding: 2rem;
            background: var(--subtle-gradient);
            border-radius: 0;
        }

        .stat-card {
            text-align: center;
            color: white;
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            font-size: 0.9rem;
            opacity: 0.9;
            font-weight: 500;
        }

        /* About Section */
        .about {
            background: var(--light-gray);
        }

        .about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        .about-text h3 {
            font-size: 1.5rem;
            color: var(--dark-chocolate);
            margin-bottom: 1rem;
        }

        .about-text p {
            color: var(--text-medium);
            margin-bottom: 1.5rem;
        }

        .features-list {
            list-style: none;
            margin-bottom: 2rem;
        }

        .features-list li {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
            color: var(--text-medium);
        }

        .features-list li::before {
            content: '';
            flex: 0 0 auto;
            width: 18px;
            height: 18px;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CAF88' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
            background-repeat: no-repeat;
            background-size: contain;
        }

        .about-visual {
            background: var(--subtle-gradient);
            border-radius: 0;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .about-visual picture {
            display: block;
            width: 100%;
            height: 100%;
        }

        .about-visual img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: inherit;
        }

                .about-visual {
            cursor: pointer;
        }
        
        /* Gallery Section */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1rem;
            margin-top: 3rem;
        }

        .gallery-item {
            height: 250px;
            background: var(--color-border);
            border-radius: 0;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .gallery-item:hover {
            transform: scale(1.05);
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        
        /* Testimonials Section */
        .testimonials {
            background: var(--cream);
        }

        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .testimonial-card {
            background: var(--paper);
            padding: 2rem;
            border-radius: 0;
            border: 1px solid var(--border);
            box-shadow: none;
            position: relative;
        }

        .testimonial-card::before {
            content: '"';
            position: absolute;
            top: 0.5rem;
            left: 1.5rem;
            font-size: 3rem;
            color: var(--accent);
            opacity: 0.4;
            line-height: 1;
        }

        .testimonial-text {
            color: var(--color-secondary);
            margin-bottom: 1.5rem;
            font-size: 14px;
            line-height: 1.7;
            font-style: normal;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .author-avatar {
            width: 50px;
            height: 50px;
            background: var(--cream);
            color: var(--accent);
            border: 1px solid var(--border);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
        }

        .author-info h4 {
            font-weight: 500;
            font-size: 13px;
            color: var(--ink);
        }

        .author-info p {
            color: var(--text-2);
            font-size: 12px;
        }

        /* FAQ Section */
        .faq-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .faq-item {
            background: white;
            border-radius: 0;
            margin-bottom: 1rem;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            overflow: hidden;
        }

        .faq-question {
            width: 100%;
            padding: 1.5rem;
            background: white;
            border: none;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-dark);
            text-align: left;
            transition: background 0.3s ease;
        }

        .faq-question:hover {
            background: var(--sage-light);
        }

        .faq-question.active {
            background: var(--sage-light);
        }

        .faq-icon {
            font-size: 1.5rem;
            color: var(--sage-green);
            transition: transform 0.3s ease;
        }

        .faq-question.active .faq-icon {
            transform: rotate(45deg);
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
        }

        .faq-answer.open {
            max-height: 1000px;
        }

        .faq-answer-content {
            padding: 0 1.5rem 1.5rem;
            color: var(--text-medium);
            line-height: 1.7;
        }

        /* Contact Section */
        .contact-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
        }

        .contact-form {
            background: var(--paper);
            padding: 2rem;
            border: 1px solid var(--border);
            border-radius: 0;
        }

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

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-size: 12px;
            color: var(--text-2);
            text-transform: uppercase;
            letter-spacing: 0;
            font-weight: 500;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 0.85rem 0.75rem;
            border: 1px solid var(--color-border);
            border-radius: 0;
            background: var(--paper);
            font-size: 1rem;
            color: var(--ink);
            font-family: inherit;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft);
        }

        .contact-info {
            padding: 2rem 0;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding: 1.25rem 0;
            background: transparent;
            border-radius: 0;
            border-bottom: 1px solid var(--border);
        }
        .contact-item:last-child { border-bottom: none; }

        .contact-icon {
            width: 40px;
            height: 40px;
            background: transparent;
            border-radius: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent);
            font-size: 1.2rem;
            flex-shrink: 0;
        }
        .contact-icon svg { color: var(--accent); }

        /* Breadcrumbs */
        .breadcrumbs {
            font-size: 0.85rem;
            color: var(--text-medium);
            margin-bottom: 1.5rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            align-items: center;
        }
        .breadcrumbs a {
            color: var(--text-medium);
            text-decoration: none;
            transition: color 0.15s ease;
        }
        .breadcrumbs a:hover { color: var(--terracotta); }
        .breadcrumbs span[aria-current] { color: var(--charcoal); font-weight: 500; }
        .breadcrumbs span[aria-hidden] { color: var(--charcoal-light); }

        /* Blog index */
        .blog-section-title { margin-bottom: 2rem; }
        .blog-section-title p {
            max-width: 720px;
            margin: 0 auto;
            color: var(--text-medium);
            line-height: 1.6;
        }
        .blog-feature {
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 0;
            background: var(--paper);
            border-radius: 0;
            overflow: hidden;
            border: 1px solid var(--border);
            text-decoration: none;
            color: var(--ink);
            margin-bottom: 2.5rem;
            transition: border-color 0.25s ease;
        }
        .blog-feature:hover {
            border-color: var(--accent);
        }
        .blog-feature-media {
            aspect-ratio: 4/3;
            overflow: hidden;
            background: var(--sage-light);
            position: relative;
        }
        .blog-feature-media--kenburns img {
            animation: blogKenburns 14s ease-out both;
            transform-origin: 50% 55%;
        }
        @keyframes blogKenburns {
            from { transform: scale(1); }
            to   { transform: scale(1.12) translate(-1%, -1%); }
        }
        @media (prefers-reduced-motion: reduce) {
            .blog-feature-media--kenburns img { animation: none !important; transform: none !important; }
        }
        .blog-feature-media img,
        .blog-card-media img,
        .blog-post-cover img,
        .neighborhood-card-media img,
        .neighborhood-hero-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.3s ease;
        }
        .blog-feature:hover .blog-feature-media img,
        .blog-card:hover .blog-card-media img,
        .neighborhood-card:hover .neighborhood-card-media img {
            transform: scale(1.03);
        }
        .blog-feature-body {
            padding: 2.25rem 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 0.75rem;
        }
        .blog-feature-body h2 {
            font-size: 36px;
            font-weight: 400;
            line-height: 1.2;
            letter-spacing: 0;
            color: var(--ink);
            margin: 0;
        }
        .blog-feature-excerpt {
            color: var(--color-secondary);
            font-size: 16px;
            line-height: 1.7;
            margin: 0;
        }

        .blog-category-tag {
            display: inline-flex;
            align-items: center;
            background: var(--rule);
            color: var(--color-secondary);
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0;
            padding: 6px 12px;
            border-radius: 0;
            align-self: flex-start;
        }

        .blog-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            color: var(--text-2);
            font-size: 12px;
            margin: 0;
        }
        .blog-author { color: var(--ink); font-weight: 500; }
        .blog-author-role {
            font-weight: 400;
            color: var(--text-2);
            margin-left: 0.3rem;
        }

        .blog-filter-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1.75rem;
            justify-content: center;
        }
        .blog-filter-pills button {
            padding: 0.5rem 1rem;
            border: 1px solid var(--border);
            background: var(--paper);
            color: var(--text-2);
            border-radius: 999px;
            font-size: 12px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0;
            cursor: pointer;
            transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
        }
        .blog-filter-pills button:hover {
            border-color: var(--accent);
            color: var(--accent);
            background: var(--paper);
        }
        .blog-filter-pills button.active {
            background: var(--accent);
            color: var(--paper);
            border-color: var(--accent);
        }
        .blog-card.is-filtered-out {
            opacity: 0;
            transform: scale(0.96);
            pointer-events: none;
            transition: opacity .25s ease, transform .25s ease;
        }
        @media (prefers-reduced-motion: reduce) {
            .blog-card.is-filtered-out { transition: none !important; }
            .blog-filter-pills button.active { transform: none !important; }
        }

        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
            gap: 1.5rem;
        }
        .blog-card {
            background: var(--paper);
            border-radius: 0;
            overflow: hidden;
            border: 1px solid var(--border);
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .blog-card:hover {
            border-color: var(--accent);
            box-shadow: var(--shadow-lg);
        }
        .blog-card-link {
            display: flex;
            flex-direction: column;
            text-decoration: none;
            color: var(--charcoal);
            height: 100%;
        }
        .blog-card-media {
            aspect-ratio: 16/10;
            overflow: hidden;
            background: var(--sage-light);
        }
        .blog-card-body {
            padding: 1.25rem;
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
            flex: 1;
        }
        .blog-card-body h3 {
            font-size: 16px;
            font-weight: 400;
            line-height: 1.4;
            letter-spacing: 0;
            margin: 0;
            color: var(--ink);
        }
        .blog-card-excerpt {
            color: var(--color-secondary);
            font-size: 14px;
            line-height: 1.7;
            margin: 0;
            flex: 1;
        }

        /* Blog card hover: stronger lift, image zoom, accent border, read-time overlay */
        .blog-card {
            position: relative;
            border-top: 3px solid transparent;
            will-change: transform;
            transform-style: preserve-3d;
        }
        .blog-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 18px 40px rgba(0,0,0,0.12);
        }
        .blog-card-media {
            position: relative;
        }
        .blog-card-read-overlay {
            position: absolute;
            left: 12px;
            bottom: 12px;
            background: rgba(28,28,30,0.78);
            color: #fff;
            font-size: 0.78rem;
            font-weight: 600;
            padding: 0.25rem 0.6rem;
            border-radius: 0;
            opacity: 0;
            transform: translateY(6px);
            transition: opacity .25s ease, transform .25s ease;
            pointer-events: none;
        }
        .blog-card:hover .blog-card-read-overlay {
            opacity: 1;
            transform: none;
        }
        .blog-grid > .reveal:nth-child(1) { animation-delay: 0ms; }
        .blog-grid > .reveal:nth-child(2) { animation-delay: 100ms; }
        .blog-grid > .reveal:nth-child(3) { animation-delay: 200ms; }
        .blog-grid > .reveal:nth-child(4) { animation-delay: 300ms; }
        .blog-grid > .reveal:nth-child(5) { animation-delay: 400ms; }
        .blog-grid > .reveal:nth-child(6) { animation-delay: 500ms; }

        /* Category color coding — top accent border + tag tint per category */
        .blog-card[data-cat-slug="pet"]            { border-top-color: var(--terracotta); }
        .blog-card[data-cat-slug="moving"]         { border-top-color: var(--sage-green); }
        .blog-card[data-cat-slug="cost"]           { border-top-color: var(--slate-blue, #6b8eaf); }
        .blog-card[data-cat-slug="neighbourhood"]  { border-top-color: var(--color-accent); }
        .blog-card[data-cat-slug="neighborhood"]   { border-top-color: var(--color-accent); }
        .blog-card[data-cat-slug="lifestyle"]      { border-top-color: var(--terracotta); }
        .blog-card[data-cat-slug="work-from-home"] { border-top-color: var(--slate-blue, #6b8eaf); }
        .blog-card[data-cat-slug="resident-stories"] { border-top-color: var(--sage-green); }

        @media (prefers-reduced-motion: reduce) {
            .blog-card,
            .blog-card-read-overlay {
                transition: none !important;
                transform: none !important;
            }
        }

        .blog-empty {
            text-align: center;
            padding: 3rem 1.5rem;
            background: var(--pure-white);
            border-radius: 0;
            border: 1px dashed var(--sage-light);
        }
        .blog-empty h3 { margin-bottom: 0.5rem; color: var(--dark-chocolate); }
        .blog-empty p { color: var(--text-medium); margin: 0; }

        /* Blog post */
        .blog-post {
            padding-top: 2.5rem;
        }
        .blog-post-container {
            max-width: 760px;
        }
        .blog-post-header {
            margin-bottom: 1.75rem;
        }
        .blog-post-header h1 {
            font-size: 2.25rem;
            line-height: 1.2;
            color: var(--dark-chocolate);
            margin: 0.75rem 0 0.85rem;
        }
        .blog-post-lede {
            font-size: 1.1rem;
            line-height: 1.55;
            color: var(--text-medium);
            margin: 0 0 1rem;
        }
        .blog-post-cover {
            margin: 0 0 2rem;
            border-radius: 0;
            overflow: hidden;
            aspect-ratio: 16/9;
            background: var(--sage-light);
        }
        .blog-post-body {
            font-size: 1.02rem;
            line-height: 1.75;
            color: var(--charcoal);
        }
        .blog-post-body p { margin: 0 0 1.1rem; }
        .blog-post-body p.lede {
            font-size: 1.1rem;
            color: var(--text-medium);
        }
        .blog-post-body h2 {
            font-size: 1.55rem;
            line-height: 1.3;
            color: var(--dark-chocolate);
            margin: 2.25rem 0 0.85rem;
        }
        .blog-post-body h3 {
            font-size: 1.2rem;
            margin: 1.75rem 0 0.65rem;
            color: var(--dark-chocolate);
        }
        .blog-post-body ul,
        .blog-post-body ol {
            margin: 0 0 1.25rem 1.25rem;
            padding-left: 0.5rem;
        }
        .blog-post-body li { margin-bottom: 0.45rem; }
        .blog-post-body a {
            color: var(--terracotta);
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-underline-offset: 3px;
            transition: color 0.2s ease, text-decoration-thickness 0.25s ease, text-underline-offset 0.25s ease;
        }
        .blog-post-body a:hover {
            color: var(--dark-chocolate);
            text-decoration-thickness: 2px;
            text-underline-offset: 5px;
        }
        .blog-post-body strong { color: var(--charcoal); }
        .blog-post-body em { font-style: italic; }

        .blog-post-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            margin: 2rem 0 1.5rem;
        }
        .blog-tag {
            font-size: 0.78rem;
            color: var(--text-medium);
            background: var(--warm-white);
            padding: 0.25rem 0.6rem;
            border-radius: 0;
        }

        .blog-related-guides {
            background: var(--warm-white);
            border-radius: 0;
            padding: 1.5rem;
            margin: 2.5rem 0;
        }
        .blog-related-guides h2 {
            font-size: 1.2rem;
            margin: 0 0 1rem;
            color: var(--dark-chocolate);
        }
        .blog-related-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1rem;
        }
        .blog-related-card {
            display: block;
            text-decoration: none;
            color: var(--charcoal);
            background: var(--pure-white);
            border-radius: 0;
            padding: 1rem;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .blog-related-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        }
        .blog-related-card h3 {
            font-size: 1rem;
            margin: 0 0 0.4rem;
            color: var(--dark-chocolate);
        }
        .blog-related-card p {
            font-size: 0.85rem;
            color: var(--text-medium);
            margin: 0 0 0.6rem;
            line-height: 1.5;
        }
        .blog-related-cta {
            font-size: 0.8rem;
            color: var(--terracotta);
            font-weight: 600;
        }

        .blog-related-houses {
            margin: 2rem 0 0;
        }
        .blog-related-houses-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 0.85rem;
        }
        .blog-related-house-card {
            display: block;
            text-decoration: none;
            background: var(--pure-white);
            border: 1px solid var(--tan-light);
            border-radius: 0;
            padding: 1rem 1.1rem;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }
        .blog-related-house-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(0,0,0,0.06);
            border-color: var(--sage-green);
        }
        .blog-related-house-eyebrow {
            display: block;
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0;
            color: var(--text-medium);
        }
        .blog-related-house-name {
            display: block;
            font-weight: 600;
            color: var(--dark-chocolate);
            margin: 0.2rem 0 0.4rem;
        }
        .blog-related-house-cta {
            display: block;
            font-size: 0.85rem;
            color: var(--terracotta);
            font-weight: 600;
        }

        .blog-cta-card {
            background: var(--ink);
            color: var(--paper);
            border-radius: 0;
            padding: 1.75rem;
            margin: 2.5rem 0;
            text-align: center;
        }
        .blog-cta-card h2 {
            color: #fff;
            font-size: 1.35rem;
            margin: 0 0 0.5rem;
        }
        .blog-cta-card p {
            color: rgba(255,255,255,0.92);
            margin: 0;
            font-size: 0.95rem;
            line-height: 1.6;
        }
        .blog-cta-card a {
            color: #fff;
            text-decoration: underline;
            font-weight: 600;
        }

        .blog-more,
        .neighborhood-related-posts {
            margin-top: 2.5rem;
        }
        .blog-more h2,
        .neighborhood-related-posts h2 {
            font-size: 1.3rem;
            color: var(--dark-chocolate);
            margin: 0 0 1.25rem;
        }
        .blog-more-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 1rem;
        }
        .blog-more-card {
            display: block;
            background: var(--pure-white);
            border-radius: 0;
            padding: 1.25rem;
            text-decoration: none;
            color: var(--charcoal);
            box-shadow: 0 3px 12px rgba(0,0,0,0.05);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .blog-more-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 24px rgba(0,0,0,0.08);
        }
        .blog-more-card h3 {
            font-size: 1.05rem;
            margin: 0.5rem 0 0.4rem;
            color: var(--dark-chocolate);
            line-height: 1.3;
        }
        .blog-more-card p {
            font-size: 0.85rem;
            color: var(--text-medium);
            margin: 0;
            line-height: 1.5;
        }

        /* Neighborhoods index */
        .neighborhood-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 1.5rem;
        }
        .neighborhood-card {
            display: block;
            background: var(--paper);
            border-radius: 0;
            overflow: hidden;
            text-decoration: none;
            color: var(--ink);
            border: 1px solid var(--border);
            transition: border-color 0.25s ease;
        }
        .neighborhood-card:hover {
            border-color: var(--accent);
        }
        .neighborhood-card-media {
            aspect-ratio: 16/10;
            overflow: hidden;
            background: var(--sage-light);
            position: relative;
        }
        .neighborhood-card-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 1.25rem;
            background: linear-gradient(180deg, rgba(28,28,30,0) 40%, rgba(28,28,30,0.78) 100%);
            opacity: 0;
            transition: opacity .35s ease;
            color: #fff;
            pointer-events: none;
        }
        .neighborhood-card-overlay-name {
            display: block;
            font-size: 1.1rem;
            font-weight: 500;
            transform: translateY(14px);
            transition: transform .4s ease;
        }
        .neighborhood-card-overlay-cta {
            display: block;
            font-size: 0.9rem;
            font-weight: 600;
            opacity: 0;
            transform: translateY(8px);
            transition: opacity .35s ease .05s, transform .4s ease .05s;
            margin-top: 0.35rem;
        }
        .neighborhood-card:hover .neighborhood-card-overlay,
        .neighborhood-card:focus-visible .neighborhood-card-overlay {
            opacity: 1;
        }
        .neighborhood-card:hover .neighborhood-card-overlay-name,
        .neighborhood-card:focus-visible .neighborhood-card-overlay-name {
            transform: none;
        }
        .neighborhood-card:hover .neighborhood-card-overlay-cta,
        .neighborhood-card:focus-visible .neighborhood-card-overlay-cta {
            opacity: 1;
            transform: none;
        }
        .neighborhood-grid > .reveal:nth-child(1) { animation-delay: 0ms; }
        .neighborhood-grid > .reveal:nth-child(2) { animation-delay: 200ms; }
        .neighborhood-grid > .reveal:nth-child(3) { animation-delay: 400ms; }
        .neighborhood-grid > .reveal:nth-child(4) { animation-delay: 600ms; }

        @media (prefers-reduced-motion: reduce) {
            .neighborhood-card-overlay,
            .neighborhood-card-overlay-name,
            .neighborhood-card-overlay-cta {
                transition: none !important;
            }
        }
        .neighborhood-card-body {
            padding: 1.75rem;
        }
        .neighborhood-card-body h2 {
            font-size: 18px;
            font-weight: 400;
            margin: 0 0 0.6rem;
            color: var(--ink);
            letter-spacing: 0;
            line-height: 1.3;
        }
        .neighborhood-tagline {
            color: var(--color-secondary);
            font-size: 14px;
            line-height: 1.7;
            margin: 0 0 0.85rem;
        }
        .neighborhood-houses {
            font-size: 13px;
            color: var(--text-2);
            margin: 0 0 0.85rem;
        }
        .neighborhood-houses strong { color: var(--ink); font-weight: 500; }
        .neighborhood-cta {
            color: var(--accent);
            font-weight: 500;
            font-size: 14px;
        }

        /* Neighborhood guide */
        .neighborhood-guide .container { max-width: 920px; }
        .neighborhood-hero {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            align-items: center;
            margin-bottom: 2rem;
        }
        .neighborhood-hero-media {
            aspect-ratio: 4/3;
            border-radius: 0;
            overflow: hidden;
            background: var(--sage-light);
        }
        .neighborhood-hero-body .eyebrow {
            text-transform: uppercase;
            font-size: 0.78rem;
            letter-spacing: 0.08em;
            font-weight: 500;
            color: var(--sage-green);
            margin: 0 0 0.5rem;
        }
        .neighborhood-hero-body h1 {
            font-size: 2.3rem;
            line-height: 1.2;
            color: var(--dark-chocolate);
            margin: 0 0 0.85rem;
        }
        .neighborhood-hero-body .neighborhood-tagline {
            font-size: 1.05rem;
            line-height: 1.6;
            color: var(--text-medium);
        }

        .neighborhood-facts {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 1rem;
            background: var(--warm-white);
            border-radius: 0;
            padding: 1.25rem;
            margin-bottom: 2rem;
        }
        .neighborhood-fact {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }
        .neighborhood-fact-label {
            font-size: 0.72rem;
            text-transform: uppercase;
            font-weight: 500;
            letter-spacing: 0;
            color: var(--text-medium);
        }
        .neighborhood-fact-value {
            font-size: 0.95rem;
            color: var(--dark-chocolate);
            font-weight: 600;
            line-height: 1.4;
        }

        .neighborhood-houses-rail {
            background: var(--sage-light);
            border-radius: 0;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        .neighborhood-houses-rail h2 {
            font-size: 1.15rem;
            color: var(--dark-chocolate);
            margin: 0 0 1rem;
        }
        .neighborhood-houses-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 0.85rem;
        }
        .neighborhood-house-card {
            display: block;
            background: var(--pure-white);
            border-radius: 0;
            padding: 1rem 1.1rem;
            text-decoration: none;
            color: var(--charcoal);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .neighborhood-house-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        }
        .neighborhood-house-card h3 {
            font-size: 1rem;
            margin: 0 0 0.35rem;
            color: var(--dark-chocolate);
        }
        .neighborhood-house-cta {
            color: var(--terracotta);
            font-weight: 600;
            font-size: 0.85rem;
        }

        .neighborhood-intro {
            font-size: 1.02rem;
            line-height: 1.7;
            color: var(--charcoal);
            margin-bottom: 2rem;
        }
        .neighborhood-intro p { margin: 0 0 1rem; }
        .neighborhood-intro strong { color: var(--dark-chocolate); }

        .neighborhood-transit {
            background: var(--pure-white);
            border-radius: 0;
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 3px 14px rgba(0,0,0,0.05);
        }
        .neighborhood-transit h2 {
            font-size: 1.15rem;
            margin: 0 0 1rem;
            color: var(--dark-chocolate);
        }
        .neighborhood-transit-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 0.85rem;
        }
        .neighborhood-transit-list li {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            border-left: 3px solid var(--sage-green);
            padding: 0.4rem 0.85rem;
        }
        .transit-label {
            font-weight: 600;
            color: var(--dark-chocolate);
            font-size: 0.95rem;
        }
        .transit-detail {
            font-size: 0.85rem;
            color: var(--text-medium);
        }

        .neighborhood-section {
            margin-bottom: 2.25rem;
        }
        .neighborhood-section-heading {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            font-size: 1.4rem;
            color: var(--dark-chocolate);
            margin: 0 0 0.85rem;
        }
        .neighborhood-section-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 0;
            background: var(--sage-light);
            color: var(--sage-green);
            flex-shrink: 0;
        }
        .neighborhood-section-body {
            color: var(--text-medium);
            line-height: 1.65;
            margin-bottom: 0.85rem;
        }
        .neighborhood-section-body p { margin: 0 0 0.75rem; }
        .neighborhood-items {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 0.65rem;
        }
        .neighborhood-items li {
            background: var(--pure-white);
            border-radius: 0;
            padding: 0.85rem 1rem;
            border-left: 3px solid var(--terracotta);
            line-height: 1.55;
        }
        .neighborhood-item-desc {
            display: block;
            font-size: 0.9rem;
            color: var(--text-medium);
            margin-top: 0.2rem;
        }

        .neighborhood-faqs {
            margin-bottom: 2.25rem;
        }
        .neighborhood-faqs h2 {
            font-size: 1.4rem;
            color: var(--dark-chocolate);
            margin: 0 0 1rem;
        }
        .neighborhood-faq-list {
            display: grid;
            gap: 0.6rem;
        }
        .neighborhood-faq {
            background: var(--pure-white);
            border-radius: 0;
            padding: 1rem 1.25rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        .neighborhood-faq summary {
            cursor: pointer;
            font-weight: 600;
            color: var(--dark-chocolate);
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.75rem;
        }
        .neighborhood-faq summary::-webkit-details-marker { display: none; }
        .neighborhood-faq summary::after {
            content: '+';
            font-size: 1.4rem;
            color: var(--sage-green);
            line-height: 1;
            transition: transform 0.2s ease;
        }
        .neighborhood-faq[open] summary::after {
            content: '\2212';
            transform: rotate(0deg);
        }
        .neighborhood-faq-answer {
            margin-top: 0.75rem;
            color: var(--text-medium);
            line-height: 1.6;
        }
        .neighborhood-faq-answer a {
            color: var(--terracotta);
            text-decoration: underline;
        }

        @media (max-width: 768px) {
            .blog-feature {
                grid-template-columns: 1fr;
            }
            .blog-feature-body { padding: 1.5rem; }
            .blog-feature-body h2 { font-size: 1.4rem; }
            .blog-post-header h1 { font-size: 1.65rem; }
            .blog-post-body { font-size: 0.98rem; }
            .blog-post-body h2 { font-size: 1.3rem; }
            .neighborhood-hero {
                grid-template-columns: 1fr;
                gap: 1.25rem;
            }
            .neighborhood-hero-body h1 { font-size: 1.7rem; }
        }

        /* Footer */
        .footer {
            background: var(--color-bg-light);
            color: var(--ink);
            padding: 3.25rem 0 0;
            border-top: 1px solid var(--border);
        }

        .footer-rule {
            height: 1px;
            background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent) 75%, transparent), transparent);
            margin: 0 0 3rem;
            opacity: 1;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr 1fr;
            gap: 3.5rem;
            margin-bottom: 3rem;
        }

        .footer-col {
            min-width: 0;
        }

        .footer-col p,
        .footer-contact li {
            overflow-wrap: break-word;
            word-break: break-word;
        }

        .footer-col h3 {
            font-size: 0.78rem;
            letter-spacing: 0;
            text-transform: uppercase;
            color: var(--color-primary);
            font-weight: 700;
            margin-bottom: 1.25rem;
        }

        .footer-col p {
            color: var(--text-2);
            line-height: 1.65;
            margin-bottom: 1rem;
        }

        .footer-col a {
            color: var(--ink);
            opacity: 0.78;
            text-decoration: none;
            display: block;
            width: fit-content;
            margin-bottom: 0.65rem;
            transition: color 0.2s ease, opacity 0.2s ease, background-size 0.25s ease;
            /* Animated underline that grows in from the left on hover. */
            background-image: linear-gradient(currentColor, currentColor);
            background-position: 0 100%;
            background-size: 0% 1px;
            background-repeat: no-repeat;
            padding-bottom: 1px;
        }

        .footer-col a:hover {
            color: var(--color-accent-dark);
            opacity: 1;
            background-size: 100% 1px;
        }

        .footer-contact {
            list-style: none;
            padding: 0;
            margin: 1rem 0 0;
            color: var(--text-2);
        }

        .footer-contact li {
            margin-bottom: 0.4rem;
            font-size: 0.92rem;
        }

        .footer-social {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            padding: 0.4rem 0.75rem;
            margin: 0 0 0.5rem -0.75rem;
            border-radius: var(--radius-pill);
            transition: background 0.2s ease, color 0.2s ease;
        }

        .footer-social:hover {
            background: var(--accent-soft);
            color: var(--color-accent-dark);
        }

        .footer-social-icon {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            transition: transform 0.2s ease;
        }
        .footer-social:hover .footer-social-icon {
            transform: scale(1.15);
        }

        .footer-neighbourhoods {
            border-top: 1px solid color-mix(in srgb, var(--color-border) 90%, transparent);
            padding: 2.25rem 0 2.5rem;
            margin-bottom: 0;
        }

        .footer-neighbourhoods h4 {
            font-size: 0.72rem;
            letter-spacing: 0;
            text-transform: uppercase;
            color: var(--color-primary);
            font-weight: 700;
            margin: 0 0 1rem;
        }

        .footer-neighbourhoods nav {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem 0.75rem;
        }

        .footer-neighbourhoods nav a {
            color: var(--ink);
            opacity: 0.78;
            text-decoration: none;
            transition: color 0.2s ease, opacity 0.2s ease;
        }

        .footer-neighbourhoods nav a:hover {
            color: var(--color-accent-dark);
            opacity: 1;
        }

        .footer-neighbourhoods .dot {
            color: color-mix(in srgb, var(--color-primary) 42%, transparent);
        }

        .footer-strip {
            margin: 0 calc(50% - 50vw);
            padding: 1.25rem calc(50vw - 50% + 2rem);
            background: rgba(255,255,255,0.62);
            border-top: 1px solid color-mix(in srgb, var(--color-border) 90%, transparent);
            color: var(--text-2);
            font-size: 0.85rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .footer-copy {
            margin: 0;
        }

        .footer-policies {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.4rem 0.6rem;
        }

        .footer-policies a {
            color: var(--text-2);
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .footer-policies a:hover {
            color: var(--color-accent-dark);
        }

        .footer-policies .dot {
            color: color-mix(in srgb, var(--color-primary) 42%, transparent);
        }

        @media (max-width: 1024px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 2.5rem;
            }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            :root {
                --header-height: var(--header-height-mobile);
            }

            .section {
                padding: var(--section-py-mobile) 0;
            }

            .header .logo img {
                height: 40px;
            }

            .admin-tabs {
                padding: 0.5rem 0;
            }

            .footer {
                padding: 3rem 0 0;
            }

            .footer-rule {
                margin-bottom: 2.75rem;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 2.25rem;
                margin-bottom: 2.5rem;
            }

            .footer-col h3 {
                margin-bottom: 1rem;
            }

            .footer-neighbourhoods {
                padding: 2rem 0 2.25rem;
            }

            .footer-neighbourhoods nav {
                gap: 0.4rem 0.6rem;
                font-size: 0.92rem;
            }

            .footer-strip {
                flex-direction: column;
                align-items: flex-start;
                padding-left: 1.5rem;
                padding-right: 1.5rem;
                gap: 0.65rem;
                font-size: 0.8rem;
            }

            .footer-policies {
                gap: 0.35rem 0.5rem;
            }

            .footer-policies a {
                line-height: 1.6;
            }

            .nav-links {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: rgba(255, 255, 255, 0.98);
                flex-direction: column;
                padding: 1rem 0;
                gap: 0;
                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
                padding-right: 0;
            }

            .nav-links li {
                text-align: center;
                padding: 0.8rem 0;
                border-bottom: 1px solid var(--light-wood);
            }

            .nav-links li:last-child {
                border-bottom: none;
            }

            .mobile-menu {
                display: flex;
            }

            .header .nav {
                position: relative;
            }

            .hero h1 {
                font-size: 2.5rem;
            }

            .hero p {
                font-size: 1.1rem;
            }

            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }

            .about-content,
            .contact-content {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .rooms-grid {
                grid-template-columns: 1fr;
                padding: 1rem;
            }

            .property-header {
                padding: 1.5rem;
                border-left-width: 3px;
            }

            .property-header h3 {
                font-size: 1.5rem;
            }

            .property-availability-badge {
                font-size: 0.85rem;
            }

            .room-info {
                padding: 1rem;
            }
            .room-info h4 {
                font-size: 1.05rem;
            }
            .room-price {
                font-size: 1.35rem;
            }
            .room-footer {
                flex-direction: column;
                align-items: stretch;
            }
            .room-footer .availability-status {
                justify-content: center;
            }
            .room-card .room-cta {
                width: 100%;
                justify-content: center;
            }

            .summary-stats {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .gallery-grid,
            .testimonials-grid {
                grid-template-columns: 1fr;
            }

            .house-banner {
                margin: 1rem 0 !important;
            }

            #gallery .section-title {
                margin-bottom: 0;
            }

            #gallery .container {
                padding: 0 0.5rem;
            }

            .section-title h2 {
                font-size: 2rem;
            }

            .container {
                padding: 0 1rem;
            }

            .property-amenities {
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            .footer-neighbourhoods nav .dot,
            .footer-policies .dot {
                display: none;
            }

            .footer-neighbourhoods nav,
            .footer-policies {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }

            .footer-strip {
                font-size: 0.78rem;
            }
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            backdrop-filter: blur(5px);
        }

        .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 2rem;
            border-radius: 0;
            width: 90%;
            max-width: 800px;
            max-height: 80vh;
            overflow-y: auto;
            position: relative;
        }

        .close {
            position: absolute;
            right: 1.5rem;
            top: 1.5rem;
            color: var(--color-tertiary);
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover {
            color: var(--color-primary);
        }

        .policy-section {
            max-width: 860px;
            margin: 0 auto 2rem;
            padding: 0;
            background: transparent;
            border: 0;
            border-radius: 0;
            box-shadow: none;
        }

        .policy-section h3 {
            position: relative;
            font-family: var(--font-serif);
            color: var(--color-primary);
            margin: 1.5rem 0 1rem;
            padding-left: 0.9rem;
            font-size: 32px;
            font-weight: 700;
            letter-spacing: 0;
            line-height: 1.2;
        }

        .policy-section h3::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.2em;
            bottom: 0.18em;
            width: 2px;
            border-radius: var(--radius-pill);
            background: var(--color-accent);
        }

        .policy-section h3:first-of-type {
            margin-top: 0.5rem;
        }

        .policy-section h4 {
            font-family: var(--font-sans);
            color: var(--color-primary);
            margin: 1.25rem 0 0.65rem;
        }

        .policy-section p,
        .policy-section li {
            font-family: var(--font-sans);
            font-size: var(--body-size);
            color: var(--color-primary);
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .policy-section ul,
        .policy-section ol {
            margin: 0 0 0.9rem 1.2rem;
        }

        .policy-section li {
            margin-bottom: 0.6rem;
        }

        .policy-section em {
            display: inline-block;
            font-style: normal;
            font-size: 13px;
            line-height: 1.5;
            color: var(--color-tertiary);
            margin-bottom: 0.5rem;
        }

        .policy-section strong {
            color: var(--color-primary);
        }

        .policy-section .highlight {
            color: var(--color-primary);
            background: color-mix(in srgb, var(--color-accent) 14%, transparent);
            border-radius: var(--radius-xs);
            padding: 0.05em 0.28em;
        }

        .smooth-scroll {
            scroll-behavior: smooth;
        }

        /* Lightbox styles */
        .lightbox {
            display: none;
            position: fixed;
            z-index: 6000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(10px);
        }

        .lightbox-content {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .lightbox-image {
            max-width: 90%;
            max-height: 90vh;
            object-fit: contain;
            border-radius: 0;
            box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
            animation: zoomIn 0.3s ease-out;
        }

        @keyframes zoomIn {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .lightbox-close {
            position: absolute;
            top: 20px;
            right: 40px;
            color: white;
            font-size: 40px;
            font-weight: 300;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
        }

        .lightbox-close:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: rotate(90deg);
        }

        .lightbox-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .lightbox-nav:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .lightbox-prev {
            left: 20px;
        }

        .lightbox-next {
            right: 20px;
        }

        .lightbox-info {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            text-align: center;
            background: rgba(0, 0, 0, 0.7);
            padding: 10px 20px;
            border-radius: 0;
            backdrop-filter: blur(10px);
        }

        .lightbox-room-name {
            font-weight: 600;
            margin-bottom: 5px;
        }

        .lightbox-counter {
            font-size: 0.9rem;
            opacity: 0.8;
        }

        .lightbox-thumbnails {
            position: absolute;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            padding: 10px;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 0;
            backdrop-filter: blur(10px);
            max-width: 90%;
            overflow-x: auto;
        }

        .lightbox-thumbnail {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 0;
            cursor: pointer;
            opacity: 0.6;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .lightbox-thumbnail.active {
            opacity: 1;
            border-color: white;
        }

        .lightbox-thumbnail:hover {
            opacity: 1;
            transform: scale(1.1);
        }

        /* Smooth scroll for thumbnails */
        .lightbox-thumbnails::-webkit-scrollbar {
            height: 5px;
        }

        .lightbox-thumbnails::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 0;
        }

        .lightbox-thumbnails::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.5);
            border-radius: 0;
        }

        /* Mobile responsive for lightbox */
        @media (max-width: 768px) {
            .lightbox-nav {
                width: 40px;
                height: 40px;
                font-size: 20px;
            }

            .lightbox-prev {
                left: 10px;
            }

            .lightbox-next {
                right: 10px;
            }

            .lightbox-thumbnails {
                bottom: 60px;
            }

            .lightbox-thumbnail {
                width: 50px;
                height: 50px;
            }
        }

        /* Make gallery images clickable in normal mode */
                .room-gallery img {
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .room-gallery img:hover {
            transform: scale(1.02);
        }
        
        /* Ensure arrows and dots don't interfere */
        .gallery-arrows,
        .gallery-dot {
            pointer-events: auto;
            z-index: 11;
        }
        
        /* ============================================================
           UI/UX additions: scrollspy, filter bar, amenity chips,
           About enrichments, pricing summary, responsive refinements
           ============================================================ */

        /* Scrollspy active indicator + animated hover underline */
        .nav-links a {
            position: relative;
            transition: color 0.2s ease;
        }
        .nav-links a::after {
            content: '';
            position: absolute;
            left: 0; right: 0; bottom: -6px;
            height: 2px;
            background: var(--terracotta);
            border-radius: 0;
            transform: scaleX(0);
            transform-origin: left center;
            transition: transform 0.25s ease;
        }
        .nav-links a:hover::after {
            transform: scaleX(1);
        }
        .nav-links a.active {
            color: var(--terracotta);
        }
        .nav-links a.active::after {
            transform: scaleX(1);
            height: 3px;
        }

        /* Amenity chips */
        .amenity-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            margin-bottom: 1rem;
        }
        .amenity-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.3rem 0.65rem;
            background: var(--tan-light);
            color: var(--charcoal);
            border-radius: 0;
            font-size: 0.78rem;
            line-height: 1.2;
            position: relative;
            max-width: 100%;
            min-width: 0;
        }
        .amenity-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .amenity-chip[data-tip],
        .room-feature[data-tip] {
            cursor: help;
            position: relative;
            border-bottom: 1px dotted transparent;
        }
        .amenity-chip[data-tip]:hover,
        .amenity-chip[data-tip]:focus {
            background: var(--sage-light);
            outline: none;
        }
        .room-feature[data-tip]:focus { outline: none; }
        .amenity-chip[data-tip]:hover::after,
        .amenity-chip[data-tip]:focus::after,
        .room-feature[data-tip]:hover::after,
        .room-feature[data-tip]:focus::after {
            content: attr(data-tip);
            position: absolute;
            bottom: calc(100% + 6px);
            left: 50%;
            transform: translateX(-50%);
            background: var(--charcoal);
            color: var(--warm-white);
            padding: 0.4rem 0.7rem;
            border-radius: 0;
            font-size: 0.72rem;
            font-weight: 500;
            white-space: nowrap;
            z-index: 20;
            pointer-events: none;
            box-shadow: 0 4px 10px rgba(0,0,0,0.18);
        }
        .amenity-chip[data-tip]:hover::before,
        .amenity-chip[data-tip]:focus::before,
        .room-feature[data-tip]:hover::before,
        .room-feature[data-tip]:focus::before {
            content: '';
            position: absolute;
            bottom: calc(100% + 1px);
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-top-color: var(--charcoal);
            z-index: 20;
        }
        .amenity-icon {
            width: 14px;
            height: 14px;
            color: var(--sage-green);
            flex-shrink: 0;
        }
        .amenity-chip[data-tip]:hover .amenity-icon,
        .amenity-chip[data-tip]:focus .amenity-icon {
            color: var(--terracotta);
        }

        /* Property filter bar */
        .property-filter-bar {
            background: var(--pure-white);
            border-radius: 0;
            padding: 1.1rem 1.5rem 1.25rem;
            margin-bottom: 2rem;
            box-shadow: 0 4px 18px rgba(0,0,0,0.06);
            border: 1px solid rgba(0,0,0,0.04);
        }
        .property-filter-bar--sticky {
            position: sticky;
            top: 80px;
            z-index: 30;
        }

        .property-filter-bar .filter-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding-bottom: 0.85rem;
            margin-bottom: 0.85rem;
            border-bottom: 1px solid rgba(0,0,0,0.06);
        }
        .property-filter-bar .filter-title {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--charcoal);
        }
        .property-filter-bar .filter-icon {
            color: var(--sage-green);
        }
        .property-filter-bar .filter-active-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 1.4rem;
            height: 1.4rem;
            padding: 0 0.4rem;
            border-radius: 0;
            background: var(--terracotta);
            color: #fff;
            font-size: 0.72rem;
            font-weight: 500;
        }
        .property-filter-bar .filter-results-count {
            margin-left: auto;
            font-size: 0.85rem;
            color: var(--text-medium);
            font-weight: 500;
        }
        .property-filter-bar .filter-clear-all {
            background: transparent;
            border: 0;
            padding: 0.35rem 0.6rem;
            border-radius: 0;
            color: var(--terracotta);
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s ease;
        }
        .property-filter-bar .filter-clear-all:hover {
            background: var(--pink-light);
        }
        .property-filter-bar .filter-drawer-open {
            display: none;
            align-items: center;
            gap: 0.4rem;
            padding: 0.5rem 0.85rem;
            border-radius: 0;
            background: var(--sage-green);
            color: #fff;
            border: 0;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
        }

        .property-filter-bar .filter-active-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            margin-bottom: 0.85rem;
        }
        .property-filter-bar .chip {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.3rem 0.5rem 0.3rem 0.75rem;
            border-radius: 0;
            background: var(--sage-light);
            color: var(--charcoal);
            font-size: 0.8rem;
            font-weight: 500;
            line-height: 1.2;
        }
        .property-filter-bar .chip-remove {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.1rem;
            height: 1.1rem;
            border-radius: 50%;
            background: rgba(0,0,0,0.08);
            border: 0;
            color: var(--charcoal);
            cursor: pointer;
            padding: 0;
            transition: background 0.15s ease;
        }
        .property-filter-bar .chip-remove:hover {
            background: var(--terracotta);
            color: #fff;
        }

        /* Compact desktop bar — house pills + "More filters" toggle live here always. */
        .property-filter-bar .filter-bar-compact {
            display: flex;
            align-items: flex-start;
            gap: 0.85rem;
            flex-wrap: wrap;
        }
        .property-filter-bar .filter-bar-compact .filter-section--houses {
            flex: 1 1 auto;
            min-width: 0;
        }
        .property-filter-bar .filter-toggle-advanced {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.5rem 0.95rem;
            margin-top: 1.45rem;
            background: var(--warm-white);
            color: var(--charcoal);
            border: 1.5px solid var(--sage-green);
            border-radius: 0;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
        }
        .property-filter-bar .filter-toggle-advanced:hover {
            background: var(--sage-light);
        }
        .property-filter-bar .filter-toggle-advanced[aria-expanded="true"] {
            background: var(--sage-green);
            color: var(--pure-white);
            box-shadow: 0 2px 8px rgba(126,176,128,0.35);
        }
        .property-filter-bar .filter-toggle-advanced-chev {
            transition: transform 0.2s ease;
        }
        .property-filter-bar .filter-toggle-advanced[aria-expanded="true"] .filter-toggle-advanced-chev {
            transform: rotate(180deg);
        }

        /* Desktop: filter-body is the popover revealed by .is-open. The .is-open
           rule is desktop-scoped so it never conflicts with the mobile drawer. */
        .property-filter-bar .filter-body {
            display: none;
            grid-template-columns: 1fr;
            gap: 1.25rem;
            margin-top: 1rem;
            padding-top: 1.1rem;
            border-top: 1px solid rgba(0,0,0,0.06);
        }
        @media (min-width: 769px) {
            .property-filter-bar .filter-body.is-open {
                display: grid;
                animation: filterBodyReveal 0.22s ease;
            }
        }
        @keyframes filterBodyReveal {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            .property-filter-bar .filter-body.is-open { animation: none; }
            .property-filter-bar .filter-toggle-advanced-chev { transition: none; }
        }
        .property-filter-bar .filter-section {
            margin-bottom: 0;
        }
        .property-filter-bar .filter-section-label {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0;
            color: var(--charcoal);
            margin-bottom: 0.5rem;
        }

        .property-filter-bar .filter-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .property-filter-bar .filter-pills button {
            padding: 0.45rem 1rem;
            border: 1px solid var(--sage-light);
            background: var(--warm-white);
            color: var(--charcoal);
            border-radius: 0;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .property-filter-bar .filter-pills button:hover {
            border-color: var(--sage-green);
            background: var(--sage-light);
        }
        .property-filter-bar .filter-pills button.active {
            background: var(--sage-green);
            color: var(--pure-white);
            border-color: var(--sage-green);
        }

        .property-filter-bar select {
            padding: 0.5rem 0.75rem;
            border: 1px solid var(--sage-light);
            border-radius: 0;
            background: var(--warm-white);
            font-size: 0.9rem;
            min-width: 160px;
            text-transform: none;
            letter-spacing: 0;
            font-weight: 500;
            color: var(--charcoal);
        }

        .property-filter-bar .price-controls {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            min-width: 240px;
        }
        .property-filter-bar input[type="range"] {
            flex: 1;
            min-width: 90px;
            accent-color: var(--terracotta);
        }
        .property-filter-bar output {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--charcoal);
            min-width: 130px;
            text-transform: none;
            letter-spacing: 0;
        }

        .property-filter-bar .price-number-controls {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            margin-top: 0.35rem;
            text-transform: none;
            letter-spacing: 0;
            font-weight: 500;
        }
        .property-filter-bar .price-number-field {
            display: inline-flex;
            align-items: center;
            border: 1px solid var(--sage-light);
            border-radius: 0;
            background: var(--warm-white);
            padding: 0 0.55rem;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .property-filter-bar .price-number-field:focus-within {
            border-color: var(--terracotta);
            box-shadow: 0 0 0 3px rgba(214,127,107,0.15);
        }
        .property-filter-bar .price-number-prefix {
            color: var(--charcoal);
            font-size: 0.9rem;
            font-weight: 600;
            margin-right: 0.2rem;
        }
        .property-filter-bar .price-number-controls input[type="number"] {
            border: 0;
            background: transparent;
            padding: 10px 0;
            width: 110px;
            font-size: 15px;
            font-weight: 600;
            color: var(--charcoal);
            outline: none;
            -moz-appearance: textfield;
        }
        .property-filter-bar .price-number-controls input[type="number"]::-webkit-outer-spin-button,
        .property-filter-bar .price-number-controls input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .property-filter-bar .price-number-sep {
            color: var(--text-medium);
            font-size: 1rem;
            font-weight: 500;
            line-height: 1;
        }

        .property-filter-bar .price-presets {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
            margin-top: 0.4rem;
            text-transform: none;
            letter-spacing: 0;
        }
        .property-filter-bar .price-presets button {
            padding: 0.32rem 0.7rem;
            border: 1px solid var(--sage-light);
            background: var(--warm-white);
            color: var(--charcoal);
            border-radius: 0;
            font-size: 0.75rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .property-filter-bar .price-presets button:hover {
            border-color: var(--sage-green);
            background: var(--sage-light);
        }
        .property-filter-bar .price-presets button.active {
            background: var(--terracotta);
            color: #fff;
            border-color: var(--terracotta);
            transform: scale(1.05);
            box-shadow: 0 0 0 3px rgba(214,127,107,0.18);
        }
        @media (prefers-reduced-motion: reduce) {
            .property-filter-bar .price-presets button.active {
                transform: none;
            }
        }

        .property-filter-bar .filter-availability-check {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--charcoal);
            cursor: pointer;
            user-select: none;
        }
        .property-filter-bar .filter-availability-check input[type="checkbox"] {
            width: 18px;
            height: 18px;
            margin: 0;
            cursor: pointer;
            accent-color: var(--sage-green);
            flex-shrink: 0;
        }
        .property-filter-bar .filter-availability-meta {
            font-size: 0.8rem;
            color: var(--text-medium);
            font-weight: 500;
            margin-left: 0.1rem;
        }

        .property-filter-bar .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            padding-top: 0.75rem;
            border-top: 1px solid rgba(0,0,0,0.06);
        }
        .property-filter-bar .filter-actions .btn-primary {
            background: var(--sage-green);
        }
        /* Done button is mobile-drawer-only; hidden on desktop where filters are live. */
        .property-filter-bar #filterDrawerApply {
            display: none;
        }
        .property-filter-bar #filterReset {
            padding: 0.6rem 1.1rem;
            background: var(--warm-white);
            border: 1px solid var(--charcoal-light);
            border-radius: 0;
            color: var(--charcoal);
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s ease;
        }
        .property-filter-bar #filterReset:hover {
            background: var(--tan-light);
        }

        .filter-drawer-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            z-index: 998;
            border: 0;
            cursor: pointer;
        }


        .property-empty-card {
            display: none;
            text-align: center;
            background: var(--pure-white);
            border-radius: 0;
            padding: 2.5rem 2rem;
            margin: 1.5rem auto;
            max-width: 540px;
            box-shadow: 0 4px 18px rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.04);
        }
        .property-empty-card:not([hidden]) {
            display: block;
        }
        .property-empty-card .empty-icon {
            color: var(--sage-green);
            opacity: 0.6;
            margin: 0 auto 0.85rem;
            display: block;
        }
        .property-empty-card h3 {
            font-size: 1.25rem;
            color: var(--dark-chocolate);
            margin: 0 0 0.5rem;
        }
        .property-empty-card .empty-summary {
            color: var(--text-medium);
            margin: 0 0 0.5rem;
            font-size: 0.9rem;
        }
        .property-empty-card .empty-filter-list {
            list-style: none;
            padding: 0;
            margin: 0 0 1rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            justify-content: center;
        }
        .property-empty-card .empty-filter-list li {
            background: var(--sage-light);
            color: var(--charcoal);
            padding: 0.25rem 0.7rem;
            border-radius: 0;
            font-size: 0.78rem;
            font-weight: 500;
        }
        .property-empty-card .empty-suggest {
            color: var(--text-medium);
            margin: 0.75rem 0 0.4rem;
            font-size: 0.88rem;
            font-weight: 600;
        }
        .property-empty-card .empty-suggest-list {
            list-style: none;
            padding: 0;
            margin: 0 auto 1.25rem;
            color: var(--text-medium);
            font-size: 0.88rem;
            line-height: 1.7;
            max-width: 320px;
            text-align: left;
        }
        .property-empty-card .empty-suggest-list li::before {
            content: '\2022';
            color: var(--terracotta);
            display: inline-block;
            width: 1rem;
            font-weight: 500;
        }

        .property-empty {
            display: none;
            padding: 2rem;
            text-align: center;
            color: var(--text-medium);
            font-style: italic;
            background: var(--warm-white);
            border: 1px dashed var(--sage-light);
            border-radius: 0;
            margin: 1rem;
        }
        .property-complex.is-empty .property-empty {
            display: block;
        }
        .property-complex.is-filtered-out {
            display: none;
        }

        /* About: How co-living works + Community */
        .how-coliving {
            margin-top: 3rem;
        }
        .how-coliving h3 {
            text-align: center;
            margin-bottom: 1.5rem;
            font-size: 1.5rem;
            color: var(--dark-chocolate);
        }
        .how-coliving-steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.25rem;
            position: relative;
        }
        .how-coliving-steps::before {
            content: '';
            position: absolute;
            top: 28px;
            left: 16%;
            right: 16%;
            height: 1px;
            background: var(--accent);
            z-index: 0;
        }
        .step-card {
            background: var(--paper);
            padding: 32px;
            border-radius: 0;
            text-align: center;
            border: 1px solid var(--border);
            box-shadow: none;
            position: relative;
            z-index: 1;
            transition: border-color 0.25s ease;
        }
        .step-card:hover {
            border-color: var(--accent);
        }
        .step-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            margin-bottom: 0.75rem;
            background: var(--paper);
            color: var(--accent);
            border: 2px solid var(--accent);
            border-radius: 50%;
            font-weight: 500;
            font-size: 13px;
        }
        .step-card h4 {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 0.5rem;
            color: var(--ink);
        }
        .step-card p {
            font-size: 14px;
            color: var(--color-secondary);
            margin: 0;
            line-height: 1.7;
        }

        .community-block {
            margin-top: 3rem;
            padding: 2rem 0;
            background: transparent;
            border-radius: 0;
            border-top: 1px solid var(--border);
            box-shadow: none;
        }
        .community-block h3 {
            font-size: 24px;
            font-weight: 400;
            color: var(--ink);
            margin-bottom: 0.75rem;
            letter-spacing: 0;
        }
        .community-block > p {
            color: var(--color-secondary);
            margin-bottom: 1.5rem;
            max-width: 60ch;
        }
        .community-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 60px;
        }
        .community-stats.community-stats--two {
            grid-template-columns: repeat(2, 1fr);
            max-width: 640px;
            margin-left: auto;
            margin-right: auto;
        }
        .stat-tile-number {
            font-size: 48px;
            font-weight: 400;
            color: var(--accent);
            line-height: 1;
            letter-spacing: 0;
        }
        .stat-tile-label {
            margin-top: 0.6rem;
            font-size: 12px;
            color: var(--text-2);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0;
        }

        /* About page step-number counter pop animation only — hover handled above */
        .step-number .stat-num {
            display: inline-block;
        }
        .step-card.is-visible .step-number {
            animation: stepPop .55s ease-out;
        }
        @keyframes stepPop {
            0%   { transform: scale(0.8); }
            60%  { transform: scale(1.12); }
            100% { transform: scale(1); }
        }

        /* Stagger reveal across about-page grids */
        .how-coliving-steps > .reveal:nth-child(1) { animation-delay: 0ms; }
        .how-coliving-steps > .reveal:nth-child(2) { animation-delay: 140ms; }
        .how-coliving-steps > .reveal:nth-child(3) { animation-delay: 280ms; }
        .community-stats > .reveal:nth-child(1) { animation-delay: 0ms; }
        .community-stats > .reveal:nth-child(2) { animation-delay: 120ms; }
        .community-stats > .reveal:nth-child(3) { animation-delay: 240ms; }

        @media (prefers-reduced-motion: reduce) {
            .how-coliving-steps .step-card {
                transition: none !important;
                animation: none !important;
                opacity: 1 !important;
                transform: none !important;
            }
        }

        /* Home page SEO sections */
        .home-prose {
            max-width: 760px;
            margin: 0 auto;
            color: var(--color-secondary);
            line-height: 1.8;
            font-size: 16px;
        }
        .home-prose p {
            margin: 0 0 1rem;
        }
        .home-prose a {
            color: var(--accent);
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-underline-offset: 2px;
            transition: color 0.2s ease, text-decoration-thickness 0.25s ease, text-underline-offset 0.25s ease;
        }
        .home-prose a:hover {
            color: var(--accent-dark);
            text-decoration-thickness: 2px;
            text-underline-offset: 4px;
        }
        .home-comparison {
            max-width: 980px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0;
        }
        .home-comparison table {
            font-size: 0.92rem;
            border: 1px solid var(--border);
            overflow: hidden;
        }
        .home-comparison th[scope="row"] {
            background: transparent;
            color: var(--charcoal);
            white-space: nowrap;
        }
        .home-comparison thead th {
            text-align: center;
        }
        .home-comparison th:not(:first-child),
        .home-comparison td:not(:first-child) {
            text-align: center;
        }
        .home-comparison tbody tr:nth-child(even) {
            background: var(--color-bg-light);
        }
        .home-comparison tbody tr:hover {
            background: color-mix(in srgb, var(--color-accent) 10%, transparent);
        }
        .home-comparison-footnote {
            margin: 1rem 0 0;
            font-size: 0.9rem;
            color: var(--text-medium);
        }
        .home-comparison-footnote a {
            color: var(--terracotta);
            text-decoration: underline;
        }
        .home-faq-list {
            display: grid;
            gap: 0.6rem;
            max-width: 820px;
            margin: 0 auto;
        }
        .home-faq {
            background: var(--pure-white);
            border-radius: var(--radius-md);
            padding: 0.9rem 1.2rem;
            border: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }
        .home-faq:hover {
            background: var(--color-bg-light);
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
            transform: translateY(-1px);
        }
        .home-faq summary {
            cursor: pointer;
            font-weight: 600;
            color: var(--dark-chocolate);
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.75rem;
        }
        .home-faq summary::-webkit-details-marker { display: none; }
        .home-faq summary::after {
            content: '+';
            font-size: 1.4rem;
            color: var(--sage-green);
            line-height: 1;
            display: inline-block;
            /* Rotate `+` to `×` on open instead of swapping to `−` — feels
               more responsive and visually signals the toggled state. */
            transition: transform 0.25s ease;
        }
        .home-faq[open] summary::after {
            transform: rotate(45deg);
        }
        .home-faq-answer {
            margin-top: 0.75rem;
            color: var(--text-medium);
            line-height: 1.6;
        }
        /* Smooth slide+fade-in when a FAQ opens. Native <details> can't
           smoothly animate height across all browsers, but a transform-based
           reveal on the answer reads as smooth and ships everywhere. */
        .home-faq[open] .home-faq-answer {
            animation: faqAnswerIn 0.28s ease-out;
        }
        @keyframes faqAnswerIn {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @media (prefers-reduced-motion: reduce) {
            .home-faq[open] .home-faq-answer { animation: none; }
        }
        /* Stagger FAQ items into view as the section scrolls in. Cap at item 8
           so a long neighbourhood-guide FAQ doesn't drag on. */
        .home-faq-list > .reveal:nth-child(1),
        .neighborhood-faq-list > .reveal:nth-child(1) { animation-delay: 0ms; }
        .home-faq-list > .reveal:nth-child(2),
        .neighborhood-faq-list > .reveal:nth-child(2) { animation-delay: 60ms; }
        .home-faq-list > .reveal:nth-child(3),
        .neighborhood-faq-list > .reveal:nth-child(3) { animation-delay: 120ms; }
        .home-faq-list > .reveal:nth-child(4),
        .neighborhood-faq-list > .reveal:nth-child(4) { animation-delay: 180ms; }
        .home-faq-list > .reveal:nth-child(5),
        .neighborhood-faq-list > .reveal:nth-child(5) { animation-delay: 240ms; }
        .home-faq-list > .reveal:nth-child(6),
        .neighborhood-faq-list > .reveal:nth-child(6) { animation-delay: 300ms; }
        .home-faq-list > .reveal:nth-child(7),
        .neighborhood-faq-list > .reveal:nth-child(7) { animation-delay: 360ms; }
        .home-faq-list > .reveal:nth-child(n+8),
        .neighborhood-faq-list > .reveal:nth-child(n+8) { animation-delay: 420ms; }
        @media (max-width: 768px) {
            .home-comparison table { font-size: 0.85rem; }
            .home-comparison th,
            .home-comparison td { padding: 0.55rem 0.5rem; }
        }

        /* Pricing summary table */
        .pricing-summary {
            margin-top: 1.75rem;
            padding: 1.5rem;
            background: var(--pure-white);
            border-radius: var(--radius-md);
            border: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
            box-shadow: 0 4px 14px rgba(0,0,0,0.06);
        }
        .pricing-summary h3 {
            margin: 0 0 1rem;
            font-size: 1.1rem;
            color: var(--charcoal);
        }
        .pricing-summary table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 0.9rem;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            overflow: hidden;
        }
        .pricing-summary th,
        .pricing-summary td {
            padding: 0.7rem 0.85rem;
            text-align: left;
            border-bottom: 1px solid var(--border);
            border-right: 1px solid var(--border);
        }
        .pricing-summary th:last-child,
        .pricing-summary td:last-child {
            border-right: 0;
        }
        .pricing-summary th {
            background: var(--color-bg-light);
            font-weight: 600;
            color: var(--charcoal);
        }
        .pricing-summary tbody tr:nth-child(even) {
            background: var(--color-bg-light);
        }
        .pricing-summary tbody tr:hover {
            background: color-mix(in srgb, var(--color-accent) 10%, transparent);
        }
        .pricing-summary tr:last-child td {
            border-bottom: none;
        }
        .pricing-summary td.numeric {
            text-align: right;
            font-variant-numeric: tabular-nums;
            color: var(--terracotta);
            font-weight: 600;
        }

        /* Tap targets and tablet/phone tweaks */
        @media (min-width: 769px) and (max-width: 1024px) {
            .hero-immersive { height: 70vh; height: 70svh; min-height: 520px; }
            .stats-strip .stats-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 32px;
            }
            .rooms-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }
            .blog-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .neighborhood-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .about-content {
                grid-template-columns: 1fr;
                gap: 2.5rem;
            }
            .how-coliving-steps {
                gap: 1rem;
            }
        }

        @media (max-width: 768px) {
            .property-filter-bar {
                padding: 1rem;
            }
            .property-filter-bar--sticky {
                position: static;
            }
            .property-filter-bar .filter-results-count {
                display: none;
            }
            .property-filter-bar .filter-drawer-open {
                display: inline-flex;
                margin-left: auto;
            }
            .property-filter-bar .filter-clear-all {
                display: none;
            }
            /* Mobile hides the desktop "More filters" toggle — drawer is the entry point. */
            .property-filter-bar .filter-toggle-advanced {
                display: none;
            }
            .property-filter-bar .filter-bar-compact {
                gap: 0.5rem;
            }
            .property-filter-bar .filter-body {
                display: none;
                margin-top: 0;
                padding-top: 1.25rem;
                border-top: 0;
                position: fixed;
                inset: auto 0 0 0;
                max-height: 85vh;
                overflow-y: auto;
                background: var(--pure-white);
                border-radius: 0;
                padding: 1.25rem 1.25rem 1.5rem;
                box-shadow: 0 -8px 30px rgba(0,0,0,0.15);
                z-index: 999;
            }
            body.filter-drawer-active .property-filter-bar .filter-body {
                display: block;
            }
            body.filter-drawer-active {
                overflow: hidden;
            }
            .property-filter-bar .filter-actions {
                display: grid;
                grid-template-columns: 1fr 1fr;
                position: sticky;
                bottom: -1.5rem;
                margin: 1rem -1.25rem -1.5rem;
                padding: 0.85rem 1.25rem;
                background: var(--pure-white);
            }
            .property-filter-bar .filter-actions .btn {
                width: 100%;
            }
            .property-filter-bar #filterDrawerApply {
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
            .how-coliving-steps {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
            .how-coliving-steps::before {
                display: none;
            }
            .community-stats {
                grid-template-columns: 1fr;
            }
            .pricing-summary {
                overflow-x: auto;
            }
        }

        @media (max-width: 480px) {
            .hero h1 {
                font-size: 1.85rem;
            }
            .hero p {
                font-size: 1rem;
            }
            .section-title h2 {
                font-size: 1.65rem;
            }
            .property-header h3 {
                font-size: 1.3rem;
            }
            .property-header {
                padding: 1.25rem;
            }
            .property-filter-bar .filter-pills button {
                padding: 0.4rem 0.8rem;
                font-size: 0.8rem;
            }
            .amenity-chip {
                font-size: 0.74rem;
                padding: 0.28rem 0.55rem;
            }
            .step-card {
                padding: 1.25rem 1rem;
            }
            .stat-tile-number {
                font-size: 1.5rem;
            }
        }

        /* WCAG-friendly tap targets for form inputs */
        .form-group input,
        .form-group select,
        .form-group textarea {
            padding: 0.875rem 1rem;
            min-height: 44px;
        }
        .form-group textarea {
            min-height: 110px;
        }

        /* Admin tabbed dashboard - sticky pill bar + show/hide panels */
        .admin-tabs {
            position: sticky;
            top: var(--header-height);
            z-index: 50;
            background: var(--cream-white);
            display: flex;
            gap: 0.5rem;
            padding: 1rem 0;
            overflow-x: auto;
            border-bottom: 1px solid var(--light-wood);
            -webkit-overflow-scrolling: touch;
        }
        .admin-tabs button {
            flex: 0 0 auto;
            padding: 0.5rem 1.1rem;
            border: 1px solid var(--light-wood);
            border-radius: 0;
            background: transparent;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            color: inherit;
        }
        .admin-tabs button[aria-selected="true"] {
            background: var(--sage-green);
            color: var(--cream-white);
            border-color: var(--sage-green);
        }
        .admin-tab-panel { display: none; }
        .admin-tab-panel.active { display: block; }

        /* Public gallery tabs on /properties — one house panel visible at a time. */
        .gallery-tabs {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.5rem;
            margin: 0 0 2rem;
        }
        .gallery-tab {
            padding: 0.55rem 1.2rem;
            border: 1px solid var(--light-wood);
            border-radius: 999px;
            background: transparent;
            font-weight: 600;
            font-size: 0.95rem;
            color: inherit;
            cursor: pointer;
            transition: background 0.2s, color 0.2s, border-color 0.2s;
        }
        .gallery-tab:hover { border-color: var(--sage-green); }
        .gallery-tab[aria-selected="true"] {
            background: var(--sage-green);
            color: var(--cream-white);
            border-color: var(--sage-green);
        }
        .gallery-tab.is-hidden { opacity: 0.6; }
        .gallery-tab-panel { display: none; }
        .gallery-tab-panel.active { display: block; }

        .admin-settings-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-top: 2rem;
        }
        .admin-settings-card {
            background: var(--mint-light);
            border: 1px solid var(--light-wood);
            border-radius: 0;
            padding: 1.5rem;
        }
        .admin-settings-card h3 {
            margin: 0 0 0.5rem 0;
        }
        .admin-settings-card p {
            color: var(--text-medium);
            margin: 0 0 1rem 0;
        }
        .admin-settings-preview {
            display: block;
            width: 100%;
            max-height: 180px;
            object-fit: cover;
            border-radius: 0;
            margin-bottom: 1rem;
            background: #fff;
        }
        .admin-settings-preview-logo {
            object-fit: contain;
            background: #fff;
            padding: 0.5rem;
            max-height: 100px;
        }
        .admin-settings-empty {
            padding: 1.5rem;
            border: 1px dashed var(--light-wood);
            border-radius: 0;
            text-align: center;
            color: var(--text-medium);
            margin-bottom: 1rem;
        }

        /* ──────────── Immersive home redesign (PR-1) ──────────── */

        /* Reveal helper — uses a CSS animation (not a transition) so the
           starting state is explicit in the keyframe, not subject to paint-
           timing race conditions. Initial paint shows opacity:0 / shifted;
           animation runs once .is-visible is applied. */
        .reveal {
            opacity: 0;
            transform: translateY(80px) scale(0.96);
            will-change: opacity, transform;
        }
        .reveal.is-visible {
            animation: revealUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        @keyframes revealUp {
            from { opacity: 0; transform: translateY(80px) scale(0.96); }
            to   { opacity: 1; transform: none; }
        }
        /* Room-card stagger inside each rooms-grid — creates a left-to-right
           wave so the eye actually catches the reveal. Card 7+ shares the
           cap so big grids don't drag on. animation-delay (not transition-
           delay) since reveal now uses keyframes. */
        .rooms-grid > .reveal:nth-child(1) { animation-delay: 0ms; }
        .rooms-grid > .reveal:nth-child(2) { animation-delay: 150ms; }
        .rooms-grid > .reveal:nth-child(3) { animation-delay: 300ms; }
        .rooms-grid > .reveal:nth-child(4) { animation-delay: 450ms; }
        .rooms-grid > .reveal:nth-child(5) { animation-delay: 600ms; }
        .rooms-grid > .reveal:nth-child(6) { animation-delay: 750ms; }
        .rooms-grid > .reveal:nth-child(n+7) { animation-delay: 900ms; }
        /* Filter still wins after reveal — specificity bump so a filtered-out
           card stays hidden even though .reveal.is-visible would otherwise
           paint opacity:1 / transform:none. */
        .room-card.reveal.is-filtered-out {
            opacity: 0;
            transform: scale(0.96);
        }
        /* Photo-item hover scale needs a snappy transition once reveal has
           finished. While reveal is running the .reveal cubic-bezier wins. */
        .photo-item.reveal.is-visible {
            transition: transform 0.3s ease-out;
        }
        /* Gallery parallax — a per-photo Y-translate driven by scroll position,
           applied to the inner picture so it composites independently of the
           photo-item's reveal/hover transforms. JS sets --photo-parallax-y. */
        .photo-item picture {
            display: block;
            transform: translate3d(0, var(--photo-parallax-y, 0), 0);
            transition: transform 0.15s linear;
            will-change: transform;
        }
        @media (prefers-reduced-motion: reduce) {
            .photo-item picture { transform: none !important; }
        }
        .reveal-stagger > *:nth-child(1) { animation-delay: 0s; }
        .reveal-stagger > *:nth-child(2) { animation-delay: 0.2s; }
        .reveal-stagger > *:nth-child(3) { animation-delay: 0.4s; }
        .reveal-stagger > *:nth-child(4) { animation-delay: 0.6s; }
        @media (prefers-reduced-motion: reduce) {
            .reveal { opacity: 1; transform: none; transition: none; }
        }

        /* CSS scroll-driven parallax (Safari iOS 17+ / Chrome 115+).
           Replaces the JS rAF loop on supported browsers — the animation
           runs on the compositor thread, so it doesn't fight URL-bar
           collapse on iOS. JS in lib/_scripts.php detects support via
           CSS.supports('animation-timeline: scroll()') and bails when
           true, leaving CSS to drive the same custom properties.

           @property registrations make the custom properties animatable
           (without these, browsers treat them as discrete switches and
           interpolation skips — required for scroll-timeline to run them
           smoothly). */
        @property --hero-parallax-y    { syntax: "<length>"; initial-value: 0px;  inherits: true; }
        @property --hero-fg-y          { syntax: "<length>"; initial-value: 0px;  inherits: true; }
        @property --hero-bg-scale      { syntax: "<number>"; initial-value: 0.95; inherits: true; }
        @property --hero-fg-scale      { syntax: "<number>"; initial-value: 1.05; inherits: true; }
        @property --hero-overlay-opacity { syntax: "<number>"; initial-value: 0.35; inherits: true; }
        @property --hero-content-y     { syntax: "<length>"; initial-value: 0px;  inherits: true; }
        @property --hero-content-opacity { syntax: "<number>"; initial-value: 1;  inherits: true; }

        @supports (animation-timeline: scroll()) {
            /* Anchor a view-timeline to the hero. cover 50% = hero fully
               in view (top at viewport top), cover 100% = hero exited
               (bottom at viewport top). That matches the JS's
               progress = scrolled / heroHeight signal exactly. */
            .hero-immersive {
                view-timeline-name: --heroView;
                view-timeline-axis: block;
                animation: heroScrollVars linear forwards;
                animation-timeline: --heroView;
                animation-range: cover 50% cover 100%;
            }
            @keyframes heroScrollVars {
                from {
                    --hero-parallax-y: 0px;
                    --hero-fg-y: 0px;
                    --hero-bg-scale: 0.95;
                    --hero-fg-scale: 1.05;
                    --hero-overlay-opacity: 0.35;
                    --hero-content-y: 0px;
                    --hero-content-opacity: 1;
                }
                to {
                    /* End values mirror the JS: bg drift = 0.5 × heroH,
                       fg drift = 0.7 × heroH, content drift = -0.7 × heroH.
                       heroH≈88vh on desktop, 78svh on phones — using vh as
                       a stable unit; the relative ratios are what matter. */
                    --hero-parallax-y: 44vh;
                    --hero-fg-y: 62vh;
                    --hero-bg-scale: 0.90;
                    --hero-fg-scale: 1.02;
                    --hero-overlay-opacity: 0.12;
                    --hero-content-y: -62vh;
                    --hero-content-opacity: 0;
                }
            }
            @media (prefers-reduced-motion: reduce) {
                .hero-immersive { animation: none; }
            }
        }

        /* Hero — full-bleed photo + Ken Burns + text reveal */
        .hero-immersive {
            position: relative;
            min-height: 560px;
            height: 78vh;
            height: 78svh;
            max-height: 820px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            isolation: isolate;
            background: var(--subtle-gradient);
            margin-top: calc(-1 * var(--header-height));
            padding-top: var(--header-height);
        }
        .hero-immersive .hero-bg {
            position: absolute;
            inset: 0;
            display: block;
            z-index: -3;
            will-change: transform;
            transform:
                translate3d(0, var(--hero-parallax-y, 0), 0)
                scale(var(--hero-bg-scale, 0.95));
            transform-origin: 50% 30%;
            /* Two intersected masks:
                 1. Bottom fade so the lower portion belongs to the foreground
                    layer and we don't get ghost-furniture trailing.
                 2. Left fade (~6%-16% from the left edge) so any vertical
                    structure in the hero photo (window frames, wall corners,
                    drying racks, etc.) blends into the hero's parent
                    --subtle-gradient instead of reading as a hard line on
                    the left of the page.
               mask-composite: intersect → photo is visible only where BOTH
               masks are opaque. -webkit-mask-composite: source-in does the
               same thing for older Safari/Chrome. */
            -webkit-mask-image:
                linear-gradient(to bottom, black 0%, black 55%, transparent 92%),
                linear-gradient(to right, transparent 0%, transparent 45%, black 80%);
                    mask-image:
                linear-gradient(to bottom, black 0%, black 55%, transparent 92%),
                linear-gradient(to right, transparent 0%, transparent 45%, black 80%);
            -webkit-mask-composite: source-in;
                    mask-composite: intersect;
        }
        /* Foreground: same image, masked to show only the lower portion
           (where the furniture sits in the photo). Drifts faster and at a
           slightly larger scale so it reads as closer to the viewer.
           --hero-fg-offset-x/y nudge the layer per-image (admin-tunable);
           --hero-fg-base-scale combines with the parallax scale so the
           cutout breathes with scroll without losing the admin baseline. */
        .hero-immersive .hero-fg {
            position: absolute;
            inset: 0;
            display: block;
            z-index: -2;
            pointer-events: none;
            will-change: transform;
            transform:
                translate3d(
                    calc(var(--hero-fg-offset-x, 0%) * 1),
                    calc(var(--hero-fg-y, 0px) + (var(--hero-fg-offset-y, 0%) * 1)),
                    0
                )
                scale(calc(var(--hero-fg-scale, 1.05) * var(--hero-fg-base-scale, 1)));
            transform-origin: 50% 100%;
            -webkit-mask-image: linear-gradient(to top, black 0%, black 38%, transparent 62%);
                    mask-image: linear-gradient(to top, black 0%, black 38%, transparent 62%);
        }
        /* When a real transparent-PNG cutout is uploaded, drop the gradient
           mask — the image's own alpha channel handles which pixels show.
           Also drop the bg's bottom fade since the cutout no longer ghosts. */
        .hero-immersive .hero-fg.hero-fg-cutout {
            -webkit-mask-image: none;
                    mask-image: none;
        }
        /* No mask on the hero photo — masks + parallax + transforms produced
           emergent render artifacts (vertical and horizontal lines) that
           couldn't be eliminated through 22+ iterations of tuning gradient
           values. Switched to filter: blur + opacity. The photo becomes a
           soft, abstract background texture with no sharp edges anywhere,
           so no edge-rendering quirks can produce lines. The chairs cutout
           (.hero-fg.hero-fg-cutout) sits sharp on top, parallax intact.

           Blur was bumped from 15px → 40px and opacity from 0.7 → 0.5
           because at wide viewports object-fit:cover reveals the left
           portion of the source photo (window frame + drying rack), and
           15px wasn't enough to dissolve those vertical structures —
           they read as a faint vertical line through the blur. 40px +
           low opacity smudges them into the cream background. Saturate
           dialed back so the residual photo colors don't tint the cream
           page background. */
        .hero-immersive:has(.hero-fg.hero-fg-cutout) .hero-bg,
        .hero-immersive.hero-fg-popout .hero-bg {
            -webkit-mask-image: none;
                    mask-image: none;
            filter: blur(40px) saturate(0.9);
            opacity: 0.7;
        }
        .hero-immersive.hero-fg-popout .hero-fg {
            -webkit-mask-image: none;
                    mask-image: none;
        }
        /* No cutout uploaded? Hide the duplicated foreground layer entirely.
           The masked-region approximation is no longer worth its visual cost
           now that the real cutout pipeline exists. */
        .hero-immersive .hero-fg:not(.hero-fg-cutout) {
            display: none;
        }
        /* In popout mode the cutout itself carries the visual hierarchy;
           additional dim/scale chrome on the bg layer reads as competing
           grey overlays. Strip them all. */
        .hero-immersive.hero-fg-popout .hero-overlay {
            display: none;
        }
        .hero-immersive.hero-fg-popout .hero-bg {
            transform: translate3d(0, var(--hero-parallax-y, 0), 0) scale(1) !important;
        }
        .hero-immersive.hero-fg-popout {
            background: transparent;
        }
        .hero-immersive .hero-fg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: var(--hero-fg-object-position, 50% 100%);
            display: block;
        }
        /* Pop-out: cutout escapes the hero box and drops over the section
           below for a 3D "stepping out of the frame" feel. The bg + overlay
           keep their original clip via clip-path so only the cutout overflows.
           The fg layer extends 22% beyond the bottom edge (giving the cutout
           a runway) and gets a subtle ground shadow for visual anchoring. */
        .hero-immersive.hero-fg-popout {
            overflow: visible;
        }
        .hero-immersive.hero-fg-popout .hero-bg,
        .hero-immersive.hero-fg-popout .hero-overlay {
            clip-path: inset(0);
        }
        /* In popout mode the cutout's horizontal extent is admin-tunable via
           --hero-fg-width (% of hero width). Narrowing it leaves room either
           side for the trust-strip badges to flank the cutout instead of
           being fully eclipsed. */
        .hero-immersive.hero-fg-popout .hero-fg.hero-fg-cutout {
            inset: 0
                   calc((100% - var(--hero-fg-width, 100%)) / 2)
                   -22%
                   calc((100% - var(--hero-fg-width, 100%)) / 2);
            height: 122%;
            z-index: 5;
            opacity: var(--hero-fg-opacity, 1);
            /* Just the tight ground shadow. The previous chain also had a
               60px white drop-shadow glow whose halo edge moved with the
               cutout's scroll-driven parallax, reading as a faint vertical
               line at the silhouette edge that 'moves as you scroll'. */
            filter: drop-shadow(0 28px 32px rgba(0, 0, 0, 0.28));
            /* The home foreground PNG has subtle alpha contamination at its
               leftmost columns (x=0..7 carry alpha values 2–24 — invisible
               to the eye but real). drop-shadow above amplifies that
               near-transparent column into a directional vertical shadow
               band that ends ~60px below the cutout — exactly the "faint
               vertical line ending at the cutout parallax end" symptom.
               clip-path trims the leftmost 1.5% of the container box (the
               clipped region is empty — the chair starts ~32% in) so the
               contaminated columns are removed before the filter runs,
               killing the line without losing any visible cutout pixels
               or the ground shadow. Right side gets the same trim so the
               symmetry survives if the same artifact ever appears there. */
            clip-path: inset(0 1.5% 0 1.5%);
            /* Gentle float — uses the individual `translate` property so it
               composes with the parallax `transform` on the same element
               without overwriting it. Hint the compositor so the float
               animation runs on its own layer. */
            animation: heroFgFloat 5s ease-in-out infinite alternate;
            will-change: translate;
        }
        @keyframes heroFgFloat {
            from { translate: 0 -5px; }
            to   { translate: 0 8px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .hero-immersive.hero-fg-popout .hero-fg.hero-fg-cutout {
                animation: none;
                translate: 0 0;
                will-change: auto;
            }
        }
        /* Lift every section after the popout-active hero so its text reads
           above the overflowing cutout (cutout sits at z-index 5). */
        .hero-immersive.hero-fg-popout ~ section {
            position: relative;
            z-index: 10;
        }
        /* Drop the section-level backgrounds entirely so the cutout shows
           through the full width of each overlapping strip. Each section's
           text gets its own floating glass chip/card so words stay crisp
           against any cutout pixel — the "info chips on imagery" pattern. */
        .hero-immersive.hero-fg-popout + section,
        .hero-immersive.hero-fg-popout + section + section,
        .hero-immersive.hero-fg-popout + section + section + section,
        .hero-immersive.hero-fg-popout + .trust-bullets-strip {
            background: transparent;
            border-top: none;
            box-shadow: none;
            -webkit-backdrop-filter: none;
                    backdrop-filter: none;
        }

        /* Trust-strip: each bullet becomes a floating glass card.
           No inset 1px highlight — when trust bullets, stat tiles, and
           room cards all align at the same container x, their inset
           left-edge highlights stack into a visible vertical seam that
           moves with scroll. */
        .hero-immersive.hero-fg-popout + .trust-bullets-strip .trust-bullet {
            background: rgba(255, 255, 255, 0.85);
            -webkit-backdrop-filter: blur(14px) saturate(1.2);
                    backdrop-filter: blur(14px) saturate(1.2);
            padding: 0.55rem 1.1rem;
            border-radius: 0;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
        }

        /* Stats-strip: each stat tile becomes a glass card. (Same inset
           highlight removed for the same reason as trust bullets above.) */
        .hero-immersive.hero-fg-popout ~ .stats-strip .stat-tile {
            background: rgba(255, 255, 255, 0.85);
            -webkit-backdrop-filter: blur(16px) saturate(1.2);
                    backdrop-filter: blur(16px) saturate(1.2);
            padding: 1.5rem 1rem;
            border-radius: 14px;
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
        }

        /* Available rooms section title under the popout hero — no halo
           background. The earlier glass-card halo produced a faint
           rectangle whose top edge read as a horizontal line and whose
           left edge read as a vertical line on the page. Title centring
           comes from #available-rooms .section-title's base rule
           (text-align:center + margin:0 auto + width:fit-content). */
        .hero-immersive.hero-fg-popout ~ #available-rooms .section-title {
            margin-bottom: 1.25rem;
        }

        /* Fallback for browsers without backdrop-filter: solidify the chips
           so text always sits on a fully-readable surface. (Section title
           dropped from this list — no halo styling on it any more.) */
        @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
            .hero-immersive.hero-fg-popout + .trust-bullets-strip .trust-bullet,
            .hero-immersive.hero-fg-popout ~ .stats-strip .stat-tile {
                background: rgba(255, 255, 255, 0.85);
            }
        }

        /* Available-rooms CTA — centred button under the rooms grid,
           links into /properties for filter UX + occupied rooms. */
        #available-rooms .available-rooms-cta {
            text-align: center;
            margin-top: 2.5rem;
        }

        /* Empty-state copy when every room is occupied. */
        #available-rooms .available-rooms-empty {
            text-align: center;
            color: var(--text-secondary, #555);
            margin: 2rem 0;
        }

        /* ─── Home #available-rooms section title: tighter than the global
           default. Heading caps at 32px (was 46px), description gets a
           comfier line-height + readable size, gaps + bottom margin trimmed
           so the carousel sits closer to the headline. width:fit-content +
           auto margins keeps the block centred regardless of whether the
           popout-hero override later turns it into an inline-block halo. */
        #available-rooms .section-title {
            text-align: center;
            margin: 0 auto 1.5rem;
            padding: 0;
            width: fit-content;
            max-width: 100%;
        }
        #available-rooms .section-title h2 {
            font-size: 32px;
            margin: 0 0 0.6rem;
            line-height: 1.25;
        }
        #available-rooms .section-title p {
            font-size: 16px;
            line-height: 1.65;
            max-width: 600px;
            margin: 0 auto;
        }
        @media (max-width: 768px) {
            #available-rooms .section-title h2 { font-size: 26px; }
            #available-rooms .section-title p  { font-size: 15px; }
        }

        /* ─── Home rooms carousel: flex layout puts arrows OUTSIDE the
           viewport (no overlap with cards), viewport stretches to fill
           remaining space, arrows occupy fixed-width flex slots. */
        .rooms-carousel {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin: 0 auto;
            --carousel-gap: 1.75rem;
            --carousel-cards: 4;
        }
        .rooms-carousel-viewport {
            flex: 1 1 auto;
            min-width: 0;          /* let flex shrink below intrinsic */
            overflow-x: auto;
            /* `clip` (not `visible`) prevents the browser from upgrading
               the y-axis to `auto` when x is `auto`, which was creating
               a stray vertical scroll on the carousel. The 0.5rem
               top/bottom padding below keeps room for the card hover-lift
               shadow inside the clipped box. */
            overflow-y: clip;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding: 0.5rem 0.25rem;  /* room for hover-lift shadow */
        }
        .rooms-carousel-viewport::-webkit-scrollbar {
            display: none;
        }
        .rooms-carousel-track {
            display: flex;
            flex-wrap: nowrap;
            gap: var(--carousel-gap);
        }
        .rooms-carousel-track > .room-card-simple {
            flex: 0 0 calc((100% - (var(--carousel-cards) - 1) * var(--carousel-gap)) / var(--carousel-cards));
            scroll-snap-align: start;
            max-width: none;       /* override the legacy 380px cap */
            min-width: 0;          /* allow flex item to shrink below content size */
        }

        /* Arrows — flex slots outside the viewport. Hidden arrows reserve
           space via visibility:hidden so the viewport width doesn't jump
           when the user scrolls into a state where one arrow disappears. */
        .rooms-carousel-arrow {
            flex: 0 0 auto;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #fff;
            border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
            color: var(--text-1, #222);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
            transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
        }
        .rooms-carousel-arrow:hover {
            background: var(--color-accent, #2a9d8f);
            color: #fff;
            transform: scale(1.08);
        }
        /* Hidden via [hidden] (set by JS) — keep the slot to avoid jump. */
        .rooms-carousel-arrow[hidden] {
            display: flex;            /* override the UA display:none */
            visibility: hidden;
            pointer-events: none;
        }

        @media (max-width: 1024px) {
            .rooms-carousel { --carousel-cards: 3; --carousel-gap: 1.25rem; }
        }
        @media (max-width: 768px) {
            .rooms-carousel { --carousel-cards: 2; --carousel-gap: 1rem; gap: 0.4rem; }
            .rooms-carousel-arrow { width: 34px; height: 34px; }
        }
        @media (max-width: 520px) {
            /* phone: ~1.3 cards visible to telegraph swipeability */
            .rooms-carousel-track > .room-card-simple {
                flex: 0 0 78%;
            }
            .rooms-carousel-arrow,
            .rooms-carousel-arrow[hidden] { display: none; }
        }

        /* ─── Slim home-card variant: photo, type badge, house, name, price.
           Whole card is a button that opens #roomModal. */
        .room-card-simple {
            background: #fff;
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
            display: flex;
            flex-direction: column;
            max-width: 380px;
            cursor: pointer;
            transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                        box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                        border-color 0.25s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06),
                        0 1px 2px rgba(0, 0, 0, 0.04);
            scroll-margin-top: calc(var(--header-height) + 1rem);
            text-align: left;
            font: inherit;
            will-change: transform;
        }
        .room-card-simple:hover,
        .room-card-simple:focus-visible {
            transform: translateY(-6px) scale(1.02);
            box-shadow: 0 18px 36px rgba(0, 0, 0, 0.14),
                        0 6px 14px rgba(0, 0, 0, 0.08);
            border-color: color-mix(in srgb, var(--color-accent) 75%, transparent);
            outline: none;
        }
        .room-card-simple:focus-visible {
            box-shadow: 0 18px 36px rgba(0, 0, 0, 0.14),
                        0 6px 14px rgba(0, 0, 0, 0.08),
                        0 0 0 3px color-mix(in srgb, var(--color-accent) 45%, transparent);
        }
        .room-card-simple:active {
            transform: translateY(-2px) scale(1.005);
            transition-duration: 0.12s;
        }
        .room-card-simple.occupied {
            opacity: 0.6;
            background: #f3f4f6;
        }

        .room-card-simple-image {
            position: relative;
            aspect-ratio: 5 / 4;
            background: #f1f1f1;
            overflow: hidden;
            border-radius: 14px 14px 0 0;
        }
        /* Top gradient overlay — keeps the type badge readable against any
           image (light skies, busy textures), gives the card a subtle sense
           of depth even before hover. */
        .room-card-simple-image::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 70px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 100%);
            z-index: 1;
            pointer-events: none;
        }
        .room-card-simple-type {
            z-index: 2;
        }
        /* Subtle zoom on the image when the card is hovered — gives the
           card more "alive" feel without moving its overall footprint. */
        .room-card-simple-image picture,
        .room-card-simple-image img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        .room-card-simple:hover .room-card-simple-image img {
            transform: scale(1.06);
        }
        .room-card-simple-image picture,
        .room-card-simple-image img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .room-card-simple-noimg {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #bbb;
        }
        .room-card-simple-type {
            position: absolute;
            top: 12px;
            left: 12px;
            background: rgba(0, 0, 0, 0.65);
            color: #fff;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.02em;
        }

        .room-card-simple-info {
            padding: 0.7rem 0.85rem 0.85rem;
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }
        .room-card-simple-location {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            font-size: 0.78rem;
            color: var(--text-2, #555);
        }
        .room-card-simple-location .rc-icon {
            width: 12px;
            height: 12px;
            flex: none;
        }
        .room-card-simple-name {
            margin: 0;
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-1, #1f2937);
            line-height: 1.25;
        }
        .room-card-simple-price {
            font-size: 0.98rem;
            font-weight: 700;
            color: var(--color-accent, #2a9d8f);
        }
        .room-card-simple-price .room-price-period {
            font-size: 0.72rem;
            font-weight: 500;
            color: var(--text-2, #666);
            margin-left: 2px;
        }
        .room-card-simple-type {
            font-size: 0.7rem;
            padding: 3px 8px;
        }

        /* ─── Room detail modal ─── */
        .room-modal {
            position: fixed;
            inset: 0;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }
        .room-modal[hidden] { display: none; }
        .room-modal-overlay {
            position: absolute;
            inset: 0;
            background: rgba(15, 20, 25, 0.62);
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
        }
        .room-modal-content {
            position: relative;
            background: #fff;
            width: min(960px, 100%);
            max-height: calc(100vh - 2rem);
            border-radius: var(--radius-md, 14px);
            overflow: hidden;
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
        }
        @media (max-width: 760px) {
            .room-modal-content {
                grid-template-columns: 1fr;
                max-height: calc(100vh - 1rem);
                overflow-y: auto;
            }
        }
        .room-modal-close {
            position: absolute;
            top: 0.6rem;
            right: 0.6rem;
            z-index: 2;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.9);
            border: none;
            font-size: 1.6rem;
            line-height: 1;
            cursor: pointer;
            color: #222;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }
        .room-modal-close:hover { background: #fff; }

        .room-modal-gallery {
            position: relative;
            background: #111;
            min-height: 260px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .room-modal-gallery picture,
        .room-modal-gallery img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        @media (min-width: 761px) {
            .room-modal-gallery {
                min-height: 100%;
            }
            .room-modal-gallery picture,
            .room-modal-gallery img {
                position: absolute;
                inset: 0;
            }
        }
        .room-modal-gallery.is-empty {
            background: #f3f4f6;
        }
        .room-modal-gallery .room-modal-counter {
            position: absolute;
            bottom: 12px;
            left: 12px;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 0.78rem;
        }
        .room-modal-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.55);
            color: #fff;
            border: none;
            font-size: 1.4rem;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .room-modal-nav:hover { background: rgba(0, 0, 0, 0.78); }
        .room-modal-prev { left: 10px; }
        .room-modal-next { right: 10px; }

        .room-modal-body {
            padding: 1.6rem 1.6rem 1.4rem;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
        }
        .room-modal-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.85rem;
            color: var(--text-2, #555);
        }
        .room-modal-eyebrow .rc-icon { width: 14px; height: 14px; }
        #roomModalName {
            margin: 0;
            font-size: 1.6rem;
            line-height: 1.2;
        }
        .room-modal-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .room-modal-pill {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 600;
            background: #eef2f4;
            color: #2c3e50;
        }
        .room-modal-availability.is-available {
            background: #dcf6e6;
            color: #176c35;
        }
        .room-modal-availability.is-occupied {
            background: #fde8e8;
            color: #8a2424;
        }
        .room-modal-price {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--color-accent, #2a9d8f);
        }
        .room-modal-section h4 {
            margin: 0 0 0.4rem;
            font-size: 0.95rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--text-2, #555);
        }
        .room-modal-section ul {
            margin: 0;
            padding-left: 1.1rem;
            color: var(--text-1, #222);
            line-height: 1.55;
        }
        .room-modal-section p {
            margin: 0;
            color: var(--text-1, #222);
            line-height: 1.6;
        }
        .room-modal-ctas {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
            margin-top: 0.4rem;
        }
        @media (max-width: 720px) {
            /* Phones: tighter overflow so the cutout doesn't crowd the
               headlines. Default the cutout width to 65% of hero so the
               headline + CTAs flank it visually instead of being eclipsed
               (admin --hero-fg-width override still wins). pointer-events
               disabled so CTA taps land underneath. Float animation
               disabled — user wants the scroll-driven parallax to be the
               only motion on the cutout, matching desktop. */
            .hero-immersive.hero-fg-popout .hero-fg.hero-fg-cutout {
                inset: 0
                       calc((100% - var(--hero-fg-width, 65%)) / 2)
                       -8%
                       calc((100% - var(--hero-fg-width, 65%)) / 2);
                height: 108%;
                pointer-events: none;
                filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.22))
                        drop-shadow(0 0 28px rgba(255, 255, 255, 0.14));
                animation: none;
                translate: 0 0;
                will-change: auto;
            }
        }
        /* Tablets / iPad portrait: cutout narrower than full-bleed but wider
           than the phone tier — there's more horizontal room here, so 80%
           leaves the headline / CTAs visible without making the cutout look
           lost in the frame. Pointer-events still disabled so taps land on
           the buttons underneath even when pixels overlap. */
        @media (min-width: 721px) and (max-width: 1024px) {
            .hero-immersive.hero-fg-popout .hero-fg.hero-fg-cutout {
                inset: 0
                       calc((100% - var(--hero-fg-width, 80%)) / 2)
                       -16%
                       calc((100% - var(--hero-fg-width, 80%)) / 2);
                height: 116%;
                pointer-events: none;
                filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.25))
                        drop-shadow(0 0 44px rgba(255, 255, 255, 0.16));
            }
        }
        /* Slim down the trust strip while the popout is active so the cutout
           has room to breathe and only ~30px of its base is hidden behind the
           strip — reads as "standing on" rather than "buried in". */
        .hero-immersive.hero-fg-popout + .trust-bullets-strip {
            padding: 0.7rem 0;
        }
        .hero-immersive.hero-fg-popout + .trust-bullets-strip .trust-bullets {
            gap: 0.75rem 1.5rem;
        }
        .hero-immersive.hero-fg-popout + .trust-bullets-strip .trust-bullet {
            font-size: 13px;
        }
        .hero-immersive.hero-fg-popout + .trust-bullets-strip .trust-bullet-icon {
            width: 28px;
            height: 28px;
        }
        .hero-immersive.hero-fg-popout + .trust-bullets-strip .trust-bullet-icon svg {
            width: 16px;
            height: 16px;
        }
        @media (prefers-reduced-motion: reduce) {
            .hero-immersive .hero-bg,
            .hero-immersive .hero-fg { transform: none !important; }
        }
        .hero-immersive .hero-bg img,
        .hero-immersive .hero-fg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            /* Sharper resampling on browsers that honour these — useful when
               the source image is below the device-pixel target. */
            image-rendering: -webkit-optimize-contrast;
            image-rendering: high-quality;
            /* Force GPU compositing so the scale-up uses bilinear filtering
               instead of CPU's lower-quality nearest fallback in some edge
               cases (Safari/iOS). */
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            transform: translateZ(0);
            /* Tiny perceptual punch — recovers some of the apparent crispness
               lost when the source is below the device-pixel target. */
            filter: contrast(1.04) saturate(1.06);
        }
        .hero-immersive .hero-bg img {
            animation: kenburns 22s ease-out forwards;
            transform-origin: 50% 55%;
            /* Anchor the cover-crop toward the right edge of the photo so
               the window frame / curtain / drying rack on the LEFT side of
               the original image gets cropped off at narrower viewports. The
               foreground popup chairs sit on the right anyway, so favouring
               the right side keeps the visual focus consistent. */
            object-position: 75% center;
        }
        .hero-immersive.hero-no-image .hero-bg { display: none; }
        .hero-immersive.hero-no-image {
            background: var(--ink);
        }
        @keyframes kenburns {
            from { transform: translateZ(0) scale(1.01) translate(0, 0); }
            to   { transform: translateZ(0) scale(1.04) translate(-1%, -1%); }
        }
        /* Phones: kill Ken Burns. The 22s scale+translate keeps the hero
           on its own composited layer, fighting the URL-bar collapse for
           paint budget on every scroll tick. Static hero reads cleaner
           and frees the compositor. */
        @media (max-width: 768px) {
            .hero-immersive .hero-bg img {
                animation: none !important;
                transform: none !important;
            }
        }
        /* Dark gradient overlay: keeps the photo visible at the top, deepens
           toward the centre/bottom where the headline and subhead sit so
           white text reads cleanly without a wrapper panel. The flat
           background-color carries the parallax-driven --hero-overlay-opacity
           for extra darkening on scroll. */
        .hero-overlay {
            position: absolute;
            inset: 0;
            z-index: -1;
            background-color: rgba(0, 0, 0, var(--hero-overlay-opacity, 0.25));
            background-image:
                radial-gradient(circle at 50% 58%, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.28) 48%, rgba(0, 0, 0, 0.56) 100%),
                linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.42) 52%, rgba(0, 0, 0, 0.72) 100%);
            will-change: background-color;
        }
        @media (prefers-reduced-motion: reduce) {
            .hero-overlay { background-color: rgba(0, 0, 0, 0.25) !important; }
        }
        .hero-immersive .hero-content {
            position: relative;
            max-width: 760px;
            padding: 0 1.5rem;
            text-align: center;
            color: var(--color-primary);
            z-index: 1;
            /* Baseline downward offset so the centered text sits a bit
               below the geometric middle of the hero. Mobile h1 wraps to
               3 lines and was hugging the header at the top; desktop hero
               is tall (78svh) and the dead-center placement left a lot
               of empty room at the bottom. Composes with the scroll
               parallax (--hero-content-y) without disturbing it. */
            --hero-content-offset: clamp(2rem, 8vh, 6rem);
            transform: translate3d(0, calc(var(--hero-content-y, 0px) + var(--hero-content-offset)), 0);
            opacity: var(--hero-content-opacity, 1);
            will-change: transform, opacity;
        }
        @media (prefers-reduced-motion: reduce) {
            .hero-immersive .hero-content { transform: none !important; opacity: 1 !important; }
        }
        .hero-h1 {
            font-family: var(--font-serif);
            font-size: var(--h1-size);
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: 0;
            margin-bottom: 1rem;
            text-shadow: 0 1px 8px rgba(255, 255, 255, 0.82), 0 8px 30px rgba(255, 255, 255, 0.52);
            color: var(--color-primary);
        }
        .hero-sub {
            font-family: var(--font-sans);
            font-size: var(--body-size);
            line-height: 1.6;
            font-weight: 400;
            margin-bottom: 2rem;
            color: var(--color-secondary);
            opacity: 1;
            text-shadow: 0 1px 8px rgba(255, 255, 255, 0.82);
            display: inline-block;
            background: rgba(255, 255, 255, 0.3);
            padding: 0.65rem 1.1rem;
            border-radius: 10px;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }
        .hero-ctas {
            display: flex;
            gap: 0.75rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        .hero-ctas .btn {
            min-width: 168px;
        }
        /* Phones: lift the whole .hero-content block above the popout
           cutout (z-index 5). .hero-content has a `transform` which makes
           it its own stacking context, so bumping z-index on .hero-ctas
           alone never escaped the parent's z-index 1. Lifting the parent
           surfaces headline + subhead + CTAs together. The ghost button
           background is also bumped to ~30% opaque so it still reads
           against any cutout pixel that ends up behind it. */
        @media (max-width: 720px) {
            .hero-immersive .hero-content {
                z-index: 6;
                /* Smaller downward offset on phones — hero is 78svh with
                   a min-height floor of 480px, so the centered content
                   stack (3-line h1 + multi-line sub + 2 CTAs) is close
                   to the section height. Limit the shift so the CTAs
                   don't clip against the bottom edge. */
                --hero-content-offset: 1.75rem;
            }
            .hero-h1 {
                font-size: 2.5rem;
            }
            .hero-sub {
                font-size: 1rem;
            }
            .hero-immersive .hero-ctas .btn-ghost {
                background: rgba(255, 255, 255, 0.28);
                border-color: #fff;
                /* White button text was washing out on the lighter cutout
                   pixels behind it. Apply the same dark text-shadow the
                   hero h1 uses so the label reads on any background. */
                text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55),
                             0 4px 22px rgba(0, 0, 0, 0.45);
            }
        }
        .btn-ghost {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            border: 1.5px solid rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }
        .btn-ghost:hover {
            background: rgba(255, 255, 255, 0.92);
            color: var(--charcoal);
            border-color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
        }

        /* Hero text reveal — fires on page load with a tiny stagger. */
        .reveal-fade {
            opacity: 0;
            transform: translateY(24px);
            filter: blur(6px);
            animation: heroReveal 0.9s ease-out forwards;
        }
        .reveal-delay-1 { animation-delay: 0.18s; }
        .reveal-delay-2 { animation-delay: 0.36s; }
        @keyframes heroReveal {
            to {
                opacity: 1;
                transform: none;
                filter: none;
            }
        }

        /* Blog mid-article CTA — injected after the 3rd H2 in body_html */
        .blog-mid-cta {
            margin: 2rem 0;
            padding: 1.1rem 1.4rem;
            border-left: 3px solid var(--accent);
            background: var(--accent-soft, rgba(0,0,0,0.03));
            border-radius: 0 8px 8px 0;
        }
        .blog-mid-cta p {
            margin: 0;
            font-size: 15px;
            line-height: 1.5;
        }
        .blog-mid-cta a {
            color: var(--accent);
            font-weight: 600;
        }

        /* Properties page micro-copy under page header */
        .properties-microcopy {
            max-width: 760px;
            margin: 1.25rem auto 0;
            font-size: 14px;
            line-height: 1.6;
            color: var(--text-2);
            text-align: center;
        }
        @media (max-width: 640px) {
            .properties-microcopy {
                font-size: 13px;
                margin-top: 1rem;
            }
        }

        /* Hero foreground layout tuner (admin → Settings) */
        .hero-fg-tuner {
            display: grid;
            grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
            gap: 1.5rem;
            background: var(--paper, #fff);
            border: 1px solid var(--border, rgba(0,0,0,0.08));
            border-radius: 12px;
            padding: 1.25rem;
            margin-top: 1rem;
        }
        @media (max-width: 820px) {
            .hero-fg-tuner { grid-template-columns: 1fr; }
        }
        .hero-fg-tuner-preview {
            position: relative;
            aspect-ratio: 16 / 9;
            border-radius: 10px;
            overflow: hidden;
            background: var(--color-primary);
            isolation: isolate;
        }
        /* Mirror the production transform formula so the preview is faithful. */
        .hero-fg-tuner-bg,
        .hero-fg-tuner-fg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .hero-fg-tuner-bg-empty {
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255,255,255,0.6);
            font-size: 13px;
        }
        .hero-fg-tuner-fg {
            object-position: var(--hero-fg-object-position, 50% 100%);
            transform: translate(var(--hero-fg-offset-x, 0%), var(--hero-fg-offset-y, 0%))
                       scale(var(--hero-fg-base-scale, 1.05));
            transform-origin: 50% 100%;
            transition: transform 120ms ease-out, object-position 120ms ease-out;
        }
        .hero-fg-tuner-fg.is-popout {
            inset: 0
                   calc((100% - var(--hero-fg-width, 100%)) / 2)
                   -22%
                   calc((100% - var(--hero-fg-width, 100%)) / 2);
            height: 122%;
            opacity: var(--hero-fg-opacity, 1);
            filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.32));
        }
        .hero-fg-tuner-empty {
            position: absolute;
            inset: auto 0 0 0;
            padding: 0.6rem 0.9rem;
            background: rgba(0,0,0,0.65);
            color: #fff;
            font-size: 12px;
            text-align: center;
        }
        .hero-fg-tuner-controls {
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
        }
        .hero-fg-tuner-toggle {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 600;
            font-size: 14px;
            color: var(--text-0);
        }
        .hero-fg-tuner-row {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            font-size: 13px;
            color: var(--text-1);
        }
        .hero-fg-tuner-row > span {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
        }
        .hero-fg-tuner-row output {
            font-variant-numeric: tabular-nums;
            font-weight: 600;
            color: var(--text-0);
        }
        .hero-fg-tuner-row input[type="range"] {
            width: 100%;
            accent-color: var(--accent, #2c6e7e);
        }
        .hero-fg-tuner-row select {
            padding: 0.45rem 0.6rem;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: #fff;
            font-size: 13px;
        }
        .hero-fg-tuner-actions {
            display: flex;
            gap: 0.5rem;
            justify-content: flex-end;
            margin-top: 0.4rem;
        }

        /* Trust bullets strip — fast-scan claims under hero. position+z-index
           keep it readable when the popout cutout overflows the hero box; the
           cutout's lower edge tucks behind the strip for an "object resting on
           a shelf" effect. The top shadow defines the boundary against the
           overlapping cutout. */
        .trust-bullets-strip {
            background: var(--paper);
            padding: 1.15rem 0;
            position: relative;
            z-index: 10;
        }
        .trust-bullets {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem 2rem;
        }
        .trust-bullet {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            font-size: 14px;
            color: var(--ink);
            line-height: 1.35;
            padding: 0.85rem 1rem;
            background: #fff;
            border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        }
        .trust-bullet:hover {
            transform: translateY(-2px);
            border-color: color-mix(in srgb, var(--color-accent) 85%, transparent);
            box-shadow: var(--shadow-lg);
        }
        .trust-bullet-icon {
            flex: 0 0 auto;
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 16%, transparent), color-mix(in srgb, var(--color-accent) 10%, transparent));
            color: var(--accent);
            border-radius: 50%;
            border: 1px solid color-mix(in srgb, var(--color-accent) 38%, transparent);
        }
        .trust-bullet-text strong {
            color: var(--accent-dark);
            font-weight: 600;
        }
        @media (max-width: 900px) {
            .trust-bullets {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 520px) {
            .trust-bullets {
                grid-template-columns: 1fr;
                gap: 0.85rem;
            }
            .trust-bullets-strip { padding: 1rem 0; }
        }

        /* 4-stat strip — minimal, transparent tiles */
        .stats-strip {
            background: var(--section-soft-bg);
            padding: 2.25rem 0;
            position: relative;
            z-index: 1;
        }
        .stats-strip .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 60px;
        }
        .stat-tile {
            background: #fff;
            border-radius: var(--radius-md);
            padding: 1.25rem 1rem;
            text-align: center;
            border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
            box-shadow: var(--shadow-sm);
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        }
        .stat-tile:hover {
            transform: translateY(-2px);
            border-color: color-mix(in srgb, var(--color-accent) 85%, transparent);
            box-shadow: var(--shadow-lg);
        }
        .stat-tile .stat-num {
            font-size: 50px;
            font-weight: 600;
            color: var(--accent);
            line-height: 1;
            margin-bottom: 0.6rem;
            letter-spacing: 0;
            transition: color 0.25s ease;
        }
        .stat-tile:hover .stat-num {
            color: var(--accent-dark);
        }
        .stat-tile .stat-label {
            font-size: 12px;
            color: var(--text-2);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0;
        }
        .stat-tile .stat-icon {
            display: none;
        }

        @media (max-width: 768px) {
            .stats-strip { padding: 2rem 0; }
            .stats-strip .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 2rem;
            }
            .stat-tile .stat-num { font-size: 36px; }
            .hero-immersive { height: 78vh; height: 78svh; min-height: 480px; }
            .neighborhood-preview-content h2 { font-size: 2.1rem; }
        }

        /* Why-Coliva grid — tuned so all six cards line up in a single row
           on standard desktop widths. minmax(140px, 1fr) lets auto-fit pack
           six columns at ≥920px viewport while still reflowing to fewer
           columns on tablet/phone without an explicit breakpoint. */
        .why-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 0.625rem;
            margin-top: 1.5rem;
        }
        .why-card {
            background: linear-gradient(180deg, #fff 0%, var(--color-bg-light) 100%);
            border-radius: var(--radius-md);
            padding: 16px;
            /* Border removed — when the grid collapses to a single column on
               narrower viewports, all cards stack with their left borders
               aligned at the same x-coordinate, creating a faint continuous
               vertical seam visible at most desktop zoom levels. The
               box-shadow alone is enough to define the card. */
            box-shadow: var(--shadow-sm);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }
        .why-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }
        .why-card .why-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid var(--accent-gold);
            background: color-mix(in srgb, var(--color-accent) 8%, transparent);
            color: var(--accent-dark);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0;
            margin-bottom: 0.5rem;
        }
        .why-card h3 {
            font-family: var(--font-sans);
            font-size: 14px;
            font-weight: 600;
            color: var(--color-primary);
            margin-bottom: 0.3rem;
            line-height: 1.25;
            letter-spacing: 0;
        }
        .why-card p {
            color: var(--color-secondary);
            font-size: 12px;
            line-height: 1.5;
            margin: 0;
        }

        /* Stagger reveal for grids */
        .why-grid > .reveal:nth-child(1) { animation-delay: 0ms; }
        .why-grid > .reveal:nth-child(2) { animation-delay: 80ms; }
        .why-grid > .reveal:nth-child(3) { animation-delay: 160ms; }
        .why-grid > .reveal:nth-child(4) { animation-delay: 240ms; }
        .why-grid > .reveal:nth-child(5) { animation-delay: 320ms; }
        .why-grid > .reveal:nth-child(6) { animation-delay: 400ms; }

        .stats-grid > .reveal:nth-child(1) { animation-delay: 0ms; }
        .stats-grid > .reveal:nth-child(2) { animation-delay: 80ms; }
        .stats-grid > .reveal:nth-child(3) { animation-delay: 160ms; }
        .stats-grid > .reveal:nth-child(4) { animation-delay: 240ms; }
        /* Stat tiles enter from alternating sides instead of the default
           slide-up + scale — the directional motion reads more deliberate
           on the 4-card horizontal strip. Specificity (0,2,0) beats the
           global .reveal (0,1,0), so this overrides cleanly. */
        .stats-grid > .reveal:nth-child(odd) {
            transform: translateX(-60px) scale(0.96);
        }
        .stats-grid > .reveal:nth-child(even) {
            transform: translateX(60px) scale(0.96);
        }
        .stats-grid > .reveal:nth-child(odd).is-visible {
            animation: statsRevealLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        .stats-grid > .reveal:nth-child(even).is-visible {
            animation: statsRevealRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        @keyframes statsRevealLeft {
            from { opacity: 0; transform: translateX(-60px) scale(0.96); }
            to   { opacity: 1; transform: translateX(0) scale(1); }
        }
        @keyframes statsRevealRight {
            from { opacity: 0; transform: translateX(60px) scale(0.96); }
            to   { opacity: 1; transform: translateX(0) scale(1); }
        }
        @media (prefers-reduced-motion: reduce) {
            .stats-grid > .reveal:nth-child(odd),
            .stats-grid > .reveal:nth-child(even) {
                transform: none;
            }
        }

        .testimonials-grid > .reveal:nth-child(1) { animation-delay: 0ms; }
        .testimonials-grid > .reveal:nth-child(2) { animation-delay: 120ms; }
        .testimonials-grid > .reveal:nth-child(3) { animation-delay: 240ms; }

        /* Testimonial card hover — minimal: border accent only */
        .testimonial .testimonial-card {
            transition: border-color .25s ease;
            height: 100%;
        }
        .testimonial:hover .testimonial-card {
            border-color: var(--accent);
        }

        /* Springleaf neighborhood preview card */
        .neighborhood-preview { padding: 2rem 0; background: var(--section-soft-bg); }
        .neighborhood-preview-card {
            position: relative;
            display: block;
            min-height: 360px;
            border-radius: var(--radius-md);
            overflow: hidden;
            text-decoration: none;
            color: #fff;
            box-shadow: var(--shadow-lg);
            isolation: isolate;
            background: var(--ink);
        }
        .neighborhood-preview-bg {
            position: absolute;
            inset: 0;
            display: block;
            z-index: -2;
            /* JS sets --neighborhood-parallax-y while the card is on-screen.
               Clamped to ~±18px in JS so the pre-scaled img still covers the
               card edges. */
            transform: translate3d(0, var(--neighborhood-parallax-y, 0), 0);
            transition: transform 0.15s linear;
            will-change: transform;
        }
        .neighborhood-preview-bg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* Pre-scaled to give the parallax translate room to move without
               revealing the card's dark fallback background at the edges. */
            transform: scale(1.12);
            transition: transform .9s ease;
        }
        .neighborhood-preview-card.preview-no-image .neighborhood-preview-bg { display: none; }
        .neighborhood-preview-card:hover .neighborhood-preview-bg img {
            transform: scale(1.16);
        }
        @media (prefers-reduced-motion: reduce) {
            .neighborhood-preview-bg { transform: none !important; }
        }
        .neighborhood-preview-overlay {
            position: absolute;
            inset: 0;
            z-index: -1;
            background: linear-gradient(
                100deg,
                rgba(0, 0, 0, 0.82) 0%,
                rgba(0, 0, 0, 0.62) 45%,
                rgba(0, 0, 0, 0.38) 100%
            );
        }
        .neighborhood-preview-content {
            padding: 3rem 2rem;
            max-width: 620px;
        }
        .neighborhood-preview-content .eyebrow {
            display: inline-block;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-size: 0.78rem;
            font-weight: 600;
            opacity: 0.9;
            margin-bottom: 0.75rem;
            padding: 0.3rem 0.75rem;
            border-radius: 0;
            background: rgba(255, 255, 255, 0.18);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .neighborhood-preview-content h2 {
            font-size: 3rem;
            font-weight: 600;
            margin: 0 0 0.75rem;
            color: #fff;
            text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
        }
        .neighborhood-preview-content p {
            font-size: 1.05rem;
            line-height: 1.6;
            margin-bottom: 1.25rem;
            text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
        }
        .neighborhood-preview-content .cta {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            margin-top: 0.5rem;
            padding: 0.85rem 1.6rem;
            background: var(--accent);
            color: var(--paper);
            font-weight: 700;
            font-size: 0.95rem;
            letter-spacing: 0;
            border-radius: 999px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
            transition: background .25s ease, transform .25s ease, box-shadow .25s ease, gap .25s ease;
        }
        .neighborhood-preview-content .cta svg {
            transition: transform .3s ease;
        }
        .neighborhood-preview-card:hover .neighborhood-preview-content .cta {
            background: var(--accent-dark);
            gap: 0.85rem;
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
        }
        .neighborhood-preview-card:hover .neighborhood-preview-content .cta svg {
            transform: translateX(5px);
        }
        .neighborhood-preview-card:active .neighborhood-preview-content .cta {
            transform: translateY(0) scale(0.98);
        }
        @media (prefers-reduced-motion: reduce) {
            .neighborhood-preview-content .cta,
            .neighborhood-preview-content .cta svg {
                transition: none !important;
            }
            .neighborhood-preview-card:hover .neighborhood-preview-content .cta {
                transform: none;
            }
            .neighborhood-preview-card:hover .neighborhood-preview-content .cta svg {
                transform: none;
            }
        }

        /* Standardized typography and color system */
        body,
        p,
        li,
        td,
        input,
        textarea,
        select {
            font-family: var(--font-sans);
            font-size: var(--body-size);
            font-weight: 400;
            line-height: 1.6;
            color: var(--color-primary);
            letter-spacing: 0;
        }

        h1,
        .page-title .page-title-h1,
        .section-title h1,
        .hero-h1,
        .blog-post-header h1,
        .neighborhood-hero-body h1 {
            font-family: var(--font-serif);
            font-size: var(--h1-size);
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: 0;
            color: var(--color-primary);
        }

        h2,
        .section-title h2,
        .blog-feature-body h2,
        .blog-post-body h2,
        .blog-related-guides h2,
        .blog-cta-card h2,
        .neighborhood-related-posts h2,
        .neighborhood-card-body h2,
        .neighborhood-houses-rail h2,
        .neighborhood-transit h2,
        .neighborhood-faqs h2,
        .neighborhood-preview-content h2 {
            font-family: var(--font-serif);
            font-size: var(--h2-size);
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: 0;
            color: var(--color-primary);
        }

        .section-title h2 {
            margin: 1.5rem 0 1rem;
        }

        h3,
        h4,
        h5,
        h6,
        .pricing-summary h3,
        .blog-card-body h3,
        .blog-related-card h3,
        .blog-more-card h3,
        .neighborhood-house-card h3,
        .how-coliving h3,
        .community-block h3,
        .step-card h4,
        .footer-col h3,
        .footer-neighbourhoods h4 {
            font-family: var(--font-sans);
            font-size: var(--h3-size);
            font-weight: 600;
            line-height: 1.3;
            letter-spacing: 0;
            color: var(--color-primary);
        }

        small,
        .caption,
        .eyebrow,
        .footer-copy,
        .footer-policies,
        .home-comparison-footnote,
        .stat-tile .stat-label,
        .blog-category-tag {
            font-family: var(--font-sans);
            font-size: var(--small-size);
            font-weight: 400;
            line-height: 1.5;
            color: var(--color-secondary);
            letter-spacing: 0;
        }
        /* Tracked uppercase on eyebrow labels — refined feel without affecting body text */
        .eyebrow { letter-spacing: 0.08em; }

        .nav-links a,
        .btn,
        .btn-sm,
        label,
        th {
            font-family: var(--font-sans);
            font-size: 15px;
            font-weight: 600;
            color: var(--color-primary);
            letter-spacing: 0;
        }

        .btn,
        .btn-sm,
        label,
        th {
            font-size: var(--small-size);
        }

        .btn-primary,
        .btn-primary:hover {
            color: #fff;
        }

        .footer-col h3,
        .footer-neighbourhoods h4 {
            font-size: 0.78rem;
        }

        .hero-h1 {
            font-size: 54px;
            text-shadow: 0 1px 8px rgba(255, 255, 255, 0.82),
                         0 8px 30px rgba(255, 255, 255, 0.52);
        }

        #why-coliva .section-title h2 {
            font-size: 46px;
        }

        .hero-sub,
        .section-title p,
        .page-title .page-title-intro,
        .why-card p,
        .home-faq-answer,
        .footer-col p,
        .footer-contact li {
            color: var(--color-secondary);
        }

        .trust-bullet,
        .trust-bullet-text,
        .trust-bullet-text strong {
            color: var(--color-primary);
        }

        .trust-bullet-icon,
        .trust-bullet-icon svg {
            color: var(--color-accent);
            stroke: currentColor;
        }

        .stat-tile .stat-num,
        .stat-tile-number {
            color: var(--color-primary);
        }

        .stat-tile .stat-label,
        .stat-tile-label {
            color: var(--color-secondary);
        }

        .why-card .why-num {
            color: var(--color-primary);
            border-color: var(--color-accent);
        }

        .policy-section h3 {
            font-family: var(--font-serif);
            font-size: 36px;
            font-weight: 700;
            line-height: 1.2;
            color: var(--color-primary);
            margin: 1.5rem 0 1rem;
            letter-spacing: 0;
        }

        .policy-section > p:first-child,
        .policy-section > p:first-child em {
            font-family: var(--font-sans);
            font-size: 13px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.5;
            color: var(--color-tertiary);
        }

        .policy-section p,
        .policy-section li {
            font-family: var(--font-sans);
            font-size: var(--body-size);
            line-height: 1.6;
            color: var(--color-primary);
        }

        /* Springleaf preview: align the photo banner with the site's warm,
           minimal palette after the global typography reset. */
        .neighborhood-preview-card {
            border: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
            background: var(--paper);
            box-shadow: var(--shadow-md);
        }

        .neighborhood-preview-overlay {
            background:
                linear-gradient(
                    100deg,
                    rgba(250, 249, 247, 0.97) 0%,
                    rgba(250, 249, 247, 0.90) 46%,
                    rgba(250, 249, 247, 0.32) 100%
                ),
                linear-gradient(
                    180deg,
                    rgba(44, 44, 44, 0.06) 0%,
                    rgba(44, 44, 44, 0.28) 100%
                );
        }

        .neighborhood-preview-content,
        .neighborhood-preview-content h2,
        .neighborhood-preview-content p {
            color: var(--color-primary);
            text-shadow: none;
        }

        .neighborhood-preview-content .eyebrow {
            color: var(--accent-dark);
            background: color-mix(in srgb, var(--color-accent) 12%, var(--paper));
            border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
            -webkit-backdrop-filter: none;
                    backdrop-filter: none;
        }

        .neighborhood-preview-content h2 {
            color: var(--color-primary);
        }

        .neighborhood-preview-content p {
            color: var(--color-secondary);
            max-width: 560px;
        }

        @media (max-width: 1024px) {
            :root {
                --h1-size: 46px;
                --h2-size: 36px;
                --h3-size: 21px;
            }

            .hero-h1 {
                font-size: 46px;
            }

            #why-coliva .section-title h2 {
                font-size: 40px;
            }

            .policy-section h3 {
                font-size: 34px;
            }
        }

        @media (max-width: 720px) {
            :root {
                --h1-size: 40px;
                --h2-size: 32px;
                --h3-size: 20px;
            }

            .nav-links a {
                font-size: var(--small-size);
            }

            .hero-h1 {
                font-size: 40px;
            }

            #why-coliva .section-title h2 {
                font-size: 32px;
            }

            .stat-tile .stat-num,
            .stat-tile-number {
                font-size: 36px;
            }

            .why-card p {
                font-size: 14px;
            }

            .policy-section h3 {
                font-size: 30px;
            }
        }

        @media (max-width: 480px) {
            :root {
                --h1-size: 32px;
                --h2-size: 28px;
                --h3-size: 19px;
            }

            .hero-h1 {
                font-size: 32px;
            }

            #why-coliva .section-title h2 {
                font-size: 28px;
            }

            .policy-section h3 {
                font-size: 26px;
            }
        }

        /* Reduced motion: disable Ken Burns, float, tilt animations */
        @media (prefers-reduced-motion: reduce) {
            .hero-immersive .hero-bg img,
            .neighborhood-preview-bg img {
                animation: none !important;
                transition: none !important;
            }
            .reveal-fade {
                animation: none !important;
                opacity: 1;
                transform: none;
                filter: none;
            }
            .reveal {
                opacity: 1;
                transform: none;
                filter: none;
                transition: none;
            }
            .why-card,
            .stat-tile,
            .testimonial .testimonial-card {
                transition: none !important;
                transform: none !important;
            }
        }

        /* Scroll-to-top button — appears after the user scrolls ~600px.
           Stacked above the external AI chatbot widget (which docks at
           bottom: 24px, right: 24px, 60×60 desktop / bottom: 20px, 52×52
           ≤768px). The right offset is tuned so the scroll-top's centre
           sits directly above the chatbot's centre (chatbot centre x is
           ~54px from the viewport right edge on desktop, ~50px on
           mobile), and the bottom offset gives ~12px breathing room over
           the chatbot's top edge. */
        .scroll-top {
            position: fixed;
            right: 2rem;
            bottom: 6rem;
            width: 44px;
            height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--accent);
            color: var(--paper);
            border: none;
            border-radius: 999px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px);
            transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, box-shadow 0.2s ease, visibility 0s linear 0.25s;
            z-index: 90;
        }
        .scroll-top.is-visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            transition-delay: 0s;
        }
        .scroll-top:hover {
            background: var(--accent-dark);
            box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
            transform: translateY(-2px);
        }
        .scroll-top:focus-visible {
            outline: 2px solid var(--accent-dark);
            outline-offset: 3px;
        }
        .scroll-top svg { display: block; }
        @media (max-width: 720px) {
            .scroll-top { right: 1.875rem; bottom: 5.25rem; width: 40px; height: 40px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .scroll-top { transition: opacity 0.25s ease, visibility 0s linear 0.25s; transform: none; }
            .scroll-top.is-visible { transform: none; }
            .scroll-top:hover { transform: none; }
        }