/* ── DESIGN TOKENS — CSULA official brand colors & fonts ──────────────── */
        /* Source: https://www.calstatela.edu/brand/colors-fonts                   */
        :root {
            --color-base: #FAFAF8;
            /* near-white warm base                  */
            --color-green: #626B2E;
            /* CSULA tertiary green standard          */
            --color-green-dark: #424322;
            /* CSULA tertiary green dark              */
            --color-green-light: #909640;
            /* CSULA tertiary green light             */
            --color-gold: #FCB237;
            /* CSULA Marigold — high contrast gold    */
            --color-gold-bright: #FFCE00;
            /* CSULA Gold — official primary          */
            --color-gold-light: #FFF3CC;
            /* pale tint of official gold             */
            --color-dark-gray: #4A4F55;
            /* CSULA secondary dark gray              */
            --color-text: #1A1A1A;
            /* near-black body text                   */
            --color-muted: #5A5F4A;
            /* olive-toned muted text                 */
            --color-linen: #F2F0E8;
            /* warm off-white section alternate       */
            --color-white: #FFFFFF;

            /* CSULA official fonts */
            --font-display: 'Montserrat', sans-serif;
            /* headings — matches calstatela.edu */
            --font-body: 'Open Sans', sans-serif;
            /* body — matches calstatela.edu     */

            /* gradients using CSULA olive greens */
            --gradient-who: linear-gradient(135deg, #424322 0%, #626B2E 55%, #909640 100%);

            --space-xs: 0.5rem;
            --space-sm: 1rem;
            --space-md: 2rem;
            --space-lg: 4rem;
            --space-xl: 7rem;

            --radius-sm: 6px;
            --radius-md: 12px;
            --radius-lg: 20px;

            --max-width: 1100px;
            --shadow-card: 0 2px 16px rgba(66, 67, 34, 0.10);
        }

        /* ── RESET & BASE ──────────────────────────────────────────────────────── */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-body);
            background: var(--color-base);
            color: var(--color-text);
            line-height: 1.7;
            font-size: 1rem;
        }

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

        a {
            color: inherit;
        }

        /* ── UTILITY ───────────────────────────────────────────────────────────── */
        .container {
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 var(--space-md);
        }

        .section-eyebrow {
            font-family: var(--font-body);
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--color-gold);
            /* CSULA Marigold #FCB237 — legible at small size */
            display: block;
            margin-bottom: 0.6rem;
        }

        .section-heading {
            font-family: var(--font-display);
            font-size: clamp(1.8rem, 3.5vw, 2.6rem);
            font-weight: 700;
            color: var(--color-green);
            line-height: 1.2;
            margin-bottom: 1rem;
        }

        .section-subtext {
            font-size: 1.05rem;
            color: var(--color-muted);
            max-width: 600px;
            line-height: 1.75;
        }

        .btn-primary {
            display: inline-block;
            background: var(--color-gold);
            color: var(--color-white);
            font-family: var(--font-body);
            font-weight: 600;
            font-size: 0.95rem;
            padding: 0.85rem 2rem;
            border-radius: var(--radius-sm);
            text-decoration: none;
            letter-spacing: 0.02em;
            transition: background 0.2s, transform 0.15s;
            border: none;
            cursor: pointer;
        }

        .btn-primary:hover {
            background: #a97820;
            transform: translateY(-1px);
        }

        .btn-outline {
            display: inline-block;
            background: transparent;
            color: var(--color-green);
            font-family: var(--font-body);
            font-weight: 600;
            font-size: 0.95rem;
            padding: 0.8rem 1.9rem;
            border-radius: var(--radius-sm);
            text-decoration: none;
            letter-spacing: 0.02em;
            border: 2px solid var(--color-green);
            transition: background 0.2s, color 0.2s;
            cursor: pointer;
        }

        .btn-outline:hover {
            background: var(--color-green);
            color: var(--color-white);
        }

        /* ── ANNOUNCEMENT BAR ──────────────────────────────────────────────────── */
        .announce-bar {
            background: linear-gradient(90deg, #424322 0%, var(--color-green) 100%);
            color: var(--color-gold-light);
            text-align: center;
            font-size: 0.85rem;
            font-weight: 500;
            padding: 0.6rem var(--space-md);
            letter-spacing: 0.02em;
        }

        .announce-bar a {
            color: var(--color-gold);
            text-decoration: underline;
            font-weight: 600;
        }

        /* ── NAV ───────────────────────────────────────────────────────────────── */
        nav {
            background: var(--color-white);
            border-bottom: 1px solid #e5e0d8;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .nav-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.9rem var(--space-md);
            max-width: var(--max-width);
            margin: 0 auto;
        }

        .nav-logo {
            font-family: var(--font-display);
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--color-green);
            text-decoration: none;
        }

        .nav-logo span {
            font-size: 0.75rem;
            font-family: var(--font-body);
            font-weight: 400;
            color: var(--color-muted);
            display: block;
            letter-spacing: 0.03em;
        }

        .nav-links {
            list-style: none;
            display: flex;
            gap: 1.8rem;
        }

        .nav-links a {
            font-size: 0.88rem;
            font-weight: 500;
            color: var(--color-muted);
            text-decoration: none;
            transition: color 0.15s;
        }

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

        .nav-cta {
            font-size: 0.85rem;
            padding: 0.55rem 1.2rem;
        }

        /* ── HERO — full-bleed photo, content overlaid on gradient scrim ──────── */
        /*
      The photo does all the emotional work. The green is just a scrim —
      dark enough to read white text against, light enough to let the
      house show through. No solid color block, no split panel.
    */
        .hero {
            position: relative;
            min-height: 88vh;
            display: flex;
            align-items: flex-end;
            /* content sits in lower-left, photo fills frame */
            overflow: hidden;
        }

        /* full-bleed background photo */
        .hero-image {
            position: absolute;
            inset: 0;
            z-index: 0;
        }

        .hero-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 30%;
            /* keep roofline visible */
        }

        /* scrim: barely-there green tint — photo does the work */
        .hero-image::after {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(to top,
                    rgba(98, 107, 46, 0.55) 0%,
                    rgba(98, 107, 46, 0.18) 40%,
                    rgba(98, 107, 46, 0.02) 100%);
        }

        /* content sits above the scrim */
        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 620px;
            padding: var(--space-lg) var(--space-md) var(--space-xl) var(--space-md);
            margin-left: calc((100% - var(--max-width)) / 2);
            /* aligns to container left edge */
        }

        .hero-eyebrow {
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--color-gold);
            margin-bottom: 1rem;
            display: block;
        }

        .hero-headline {
            font-family: var(--font-display);
            font-size: clamp(2.6rem, 5vw, 4.2rem);
            font-weight: 700;
            color: var(--color-white);
            line-height: 1.08;
            margin-bottom: 1.2rem;
            text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.4);
        }

        .hero-headline em {
            font-style: normal;
            color: var(--color-gold);
        }

        .hero-location-tag {
            font-size: 0.8rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.65);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            margin-bottom: 1rem;
        }

        .hero-tagline {
            font-size: 1.05rem;
            color: rgba(255, 255, 255, 0.82);
            margin-bottom: 2rem;
            max-width: 480px;
            line-height: 1.7;
        }

        /* price badge — official CSULA Gold, dark text for contrast per brand guide */
        .hero-price-block {
            display: inline-flex;
            align-items: baseline;
            gap: 0.5rem;
            background: var(--color-gold-bright);
            /* #FFCE00 — official CSULA Gold */
            padding: 0.85rem 1.4rem;
            border-radius: var(--radius-sm);
            margin-bottom: 2rem;
            width: fit-content;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
        }

        .hero-price-amount {
            font-family: var(--font-display);
            font-size: 2.8rem;
            font-weight: 800;
            color: #1A1A1A;
            /* dark text — CSULA brand says black on gold */
            line-height: 1;
        }

        .hero-price-label {
            font-size: 0.85rem;
            color: #2a2a1a;
            font-weight: 600;
            line-height: 1.3;
        }

        .hero-actions {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .btn-hero-outline {
            display: inline-block;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(4px);
            color: var(--color-white);
            font-family: var(--font-body);
            font-weight: 600;
            font-size: 0.95rem;
            padding: 0.8rem 1.9rem;
            border-radius: var(--radius-sm);
            text-decoration: none;
            border: 1.5px solid rgba(255, 255, 255, 0.45);
            transition: background 0.2s, border-color 0.2s;
        }

        .btn-hero-outline:hover {
            background: rgba(255, 255, 255, 0.22);
            border-color: rgba(255, 255, 255, 0.8);
        }

        /* ── WALK STRIP — THE SIGNATURE ELEMENT ───────────────────────────────── */
        /*
      This is the design's single memorable moment: instead of a bullet saying
      "5-min walk to campus," we show it as a visual path — the #1 selling point
      made into a graphic landmark on the page.
    */
        .walk-strip {
            background: var(--color-gold-light);
            border-top: 3px solid var(--color-gold);
            border-bottom: 3px solid var(--color-gold);
            padding: var(--space-md) 0;
            overflow: hidden;
        }

        .walk-inner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 var(--space-md);
        }

        .walk-node {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            min-width: 130px;
        }

        .walk-icon {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            margin-bottom: 0.4rem;
        }

        .walk-icon.home {
            background: var(--color-green);
        }

        .walk-icon.campus {
            background: var(--color-gold);
        }

        .walk-label {
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--color-green);
            letter-spacing: 0.04em;
        }

        .walk-sublabel {
            font-size: 0.7rem;
            color: var(--color-muted);
        }

        .walk-line {
            flex: 1;
            position: relative;
            height: 3px;
            background: repeating-linear-gradient(90deg,
                    var(--color-green) 0,
                    var(--color-green) 10px,
                    transparent 10px,
                    transparent 20px);
            margin: 0 var(--space-sm);
            margin-bottom: 1.6rem;
        }

        .walk-time-badge {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--color-green);
            color: var(--color-white);
            font-family: var(--font-display);
            font-size: 0.95rem;
            font-weight: 700;
            padding: 0.35rem 0.9rem;
            border-radius: 100px;
            white-space: nowrap;
            margin-bottom: 0;
        }

        /* ── AMENITIES GRID ────────────────────────────────────────────────────── */
        .amenities-section {
            padding: var(--space-xl) 0;
            background: var(--color-base);
        }

        .amenities-header {
            margin-bottom: var(--space-lg);
            text-align: center;
        }

        .amenities-header .section-subtext {
            margin: 0 auto;
            /* centers the max-width constrained subtext */
        }

        .amenities-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 1.2rem;
        }

        .amenity-card {
            background: var(--color-white);
            border: 1px solid #e5e0d8;
            border-radius: var(--radius-md);
            padding: 1.4rem 1.2rem;
            transition: box-shadow 0.2s, transform 0.2s;
        }

        .amenity-card:hover {
            box-shadow: var(--shadow-card);
            transform: translateY(-2px);
        }

        .amenity-icon {
            font-size: 1.6rem;
            margin-bottom: 0.6rem;
        }

        .amenity-title {
            font-weight: 600;
            font-size: 0.95rem;
            color: var(--color-green);
            margin-bottom: 0.2rem;
        }

        .amenity-desc {
            font-size: 0.82rem;
            color: var(--color-muted);
            line-height: 1.5;
        }

        .amenities-note {
            margin-top: 1.4rem;
            font-size: 0.85rem;
            color: var(--color-muted);
            text-align: center;
            border-top: 1px solid #e5e0d8;
            padding-top: 1.2rem;
        }

        .amenities-note strong {
            color: var(--color-green-dark);
        }

        /* ── PHOTO GALLERY ─────────────────────────────────────────────────────── */
        .gallery-section {
            padding: var(--space-xl) 0;
            background: var(--color-linen);
        }

        .gallery-header {
            margin-bottom: var(--space-md);
            text-align: center;
        }

        /* Masonry-style grid using columns */
        .photo-grid {
            columns: 3;
            column-gap: 0.8rem;
        }

        .photo-grid figure {
            break-inside: avoid;
            margin-bottom: 0.8rem;
            border-radius: var(--radius-sm);
            overflow: hidden;
            cursor: pointer;
        }

        .photo-grid img {
            width: 100%;
            display: block;
            transition: transform 0.3s;
        }

        .photo-grid figure:hover img {
            transform: scale(1.03);
        }

        /* ── WHO SECTION ───────────────────────────────────────────────────────── */
        .who-section {
            padding: var(--space-xl) 0;
            background: var(--gradient-who);
        }

        .who-section .section-heading {
            color: var(--color-white);
            text-align: center;
        }

        .who-section .section-eyebrow {
            color: var(--color-gold);
            display: block;
            text-align: center;
        }

        .who-section .section-subtext {
            color: #c8ca8a;
            text-align: center;
            margin: 0 auto;
        }

        .who-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1rem;
            margin-top: var(--space-md);
        }

        .who-card {
            background: rgba(255, 255, 255, 0.09);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: var(--radius-md);
            padding: 1.4rem;
        }

        .who-card-icon {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .who-card-title {
            font-weight: 700;
            font-size: 0.95rem;
            color: var(--color-white);
            margin-bottom: 0.3rem;
        }

        .who-card-desc {
            font-size: 0.8rem;
            color: #d4d5b0;
            line-height: 1.5;
        }

        /* ── DORM BANNER ───────────────────────────────────────────────────────── */
        .dorm-banner {
            background: var(--color-gold-bright);
            padding: var(--space-md) 0;
        }

        .dorm-banner-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-md);
        }

        .dorm-banner-eyebrow {
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--color-green-dark);
            display: block;
            margin-bottom: 0.4rem;
        }

        .dorm-banner-heading {
            font-family: var(--font-display);
            font-size: clamp(1.2rem, 2.5vw, 1.6rem);
            font-weight: 800;
            color: var(--color-green-dark);
            line-height: 1.2;
            margin-bottom: 0.5rem;
        }

        .dorm-banner-body {
            font-size: 0.9rem;
            color: #2a2a0a;
            line-height: 1.65;
            max-width: 620px;
        }

        .dorm-banner-cta {
            flex-shrink: 0;
        }

        /* override btn-primary inside gold banner — use dark green instead */
        .dorm-banner .btn-primary {
            background: var(--color-green-dark);
            white-space: nowrap;
        }

        .dorm-banner .btn-primary:hover {
            background: var(--color-green);
        }

        /* highlighted who-card for the dorm callout */
        .who-card-dorm {
            border: 2px solid var(--color-gold-bright);
            background: rgba(255, 206, 0, 0.10);
        }

        .who-card-dorm .who-card-title {
            color: var(--color-gold-bright);
        }

        @media (max-width: 700px) {
            .dorm-banner-inner {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        /* ── LOCATION ──────────────────────────────────────────────────────────── */
        .location-section {
            padding: var(--space-xl) 0;
            background: var(--color-base);
        }

        .location-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-lg);
            align-items: start;
        }

        .location-list {
            list-style: none;
            margin-top: var(--space-md);
            display: flex;
            flex-direction: column;
            gap: 0.7rem;
        }

        .location-list li {
            display: flex;
            align-items: flex-start;
            gap: 0.7rem;
            font-size: 0.95rem;
            color: var(--color-text);
        }

        .location-list li span:first-child {
            font-size: 1rem;
            flex-shrink: 0;
            margin-top: 0.1rem;
        }

        .map-container {
            border-radius: var(--radius-md);
            overflow: hidden;
            border: 1px solid #e5e0d8;
            box-shadow: var(--shadow-card);
            position: relative;
            /* needed so overlay positions correctly */
        }

        /* invisible overlay that captures clicks and opens walking directions */
        .map-walk-link {
            position: absolute;
            inset: 0;
            z-index: 2;
            display: block;
            text-decoration: none;
        }

        /* small hint badge in the corner so users know it's clickable */
        .map-walk-hint {
            position: absolute;
            bottom: 12px;
            right: 12px;
            background: var(--color-green-dark);
            color: var(--color-white);
            font-family: var(--font-body);
            font-size: 0.78rem;
            font-weight: 600;
            padding: 0.4rem 0.8rem;
            border-radius: 100px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
            pointer-events: none;
            white-space: nowrap;
        }

        .map-container iframe {
            display: block;
            width: 100%;
            height: 450px;
            border: none;
        }

        /* ── FAQ ───────────────────────────────────────────────────────────────── */
        .faq-section {
            padding: var(--space-xl) 0;
            background: var(--color-linen);
        }

        .faq-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-top: var(--space-md);
        }

        details {
            background: var(--color-white);
            border: 1px solid #e5e0d8;
            border-radius: var(--radius-sm);
            overflow: hidden;
        }

        summary {
            list-style: none;
            padding: 1.1rem 1.3rem;
            font-weight: 600;
            font-size: 0.95rem;
            color: var(--color-green);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        summary::-webkit-details-marker {
            display: none;
        }

        summary::after {
            content: '+';
            font-size: 1.3rem;
            font-weight: 300;
            color: var(--color-gold);
            flex-shrink: 0;
            margin-left: 1rem;
        }

        details[open] summary::after {
            content: '−';
        }

        .faq-body {
            padding: 0 1.3rem 1.1rem;
            font-size: 0.9rem;
            color: var(--color-muted);
            line-height: 1.7;
            border-top: 1px solid #f0ede6;
        }

        .faq-body a {
            color: var(--color-gold);
        }

        /* ── CONTACT FORM ──────────────────────────────────────────────────────── */
        .contact-section {
            padding: var(--space-xl) 0;
            background: var(--color-base);
        }

        .contact-layout {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: var(--space-lg);
            align-items: start;
        }

        .contact-aside {
            padding-top: 0.5rem;
        }

        .contact-aside .section-subtext {
            margin-bottom: var(--space-md);
        }

        .next-steps {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .next-steps li {
            display: flex;
            gap: 1rem;
            align-items: flex-start;
            font-size: 0.9rem;
            color: var(--color-muted);
        }

        .step-num {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--color-gold);
            color: white;
            font-size: 0.75rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .contact-form-card {
            background: var(--color-white);
            border: 1px solid #e5e0d8;
            border-radius: var(--radius-lg);
            padding: var(--space-md);
            box-shadow: var(--shadow-card);
        }

        .open-house-badge {
            background: var(--color-gold-light);
            border: 1px solid var(--color-gold);
            border-radius: var(--radius-sm);
            padding: 0.7rem 1rem;
            font-size: 0.85rem;
            color: var(--color-green);
            font-weight: 500;
            margin-bottom: 1.4rem;
            display: flex;
            gap: 0.5rem;
            align-items: flex-start;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.8rem;
        }

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

        label {
            display: block;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--color-green);
            margin-bottom: 0.3rem;
            letter-spacing: 0.02em;
        }

        input,
        select,
        textarea {
            width: 100%;
            padding: 0.75rem 0.9rem;
            border: 1.5px solid #ddd9d0;
            border-radius: var(--radius-sm);
            font-family: var(--font-body);
            font-size: 0.9rem;
            color: var(--color-text);
            background: var(--color-base);
            transition: border-color 0.15s;
            appearance: none;
        }

        input:focus,
        select:focus,
        textarea:focus {
            outline: none;
            border-color: var(--color-green);
        }

        textarea {
            resize: vertical;
            min-height: 90px;
        }

        .form-submit {
            width: 100%;
            padding: 0.95rem;
            font-size: 1rem;
            border-radius: var(--radius-sm);
            margin-top: 0.4rem;
        }

        .form-privacy {
            font-size: 0.73rem;
            color: var(--color-muted);
            text-align: center;
            margin-top: 0.7rem;
        }

        .form-success {
            display: none;
            background: #e8f5e9;
            border: 1px solid #66bb6a;
            border-radius: var(--radius-sm);
            padding: 1rem;
            font-size: 0.9rem;
            color: #2e7d32;
            text-align: center;
            margin-top: 1rem;
        }

        .form-error {
            display: none;
            background: #fff3e0;
            border: 1px solid #ffa726;
            border-radius: var(--radius-sm);
            padding: 1rem;
            font-size: 0.9rem;
            color: #e65100;
            text-align: center;
            margin-top: 1rem;
        }

        /* ── FOOTER ────────────────────────────────────────────────────────────── */
        footer {
            background: linear-gradient(135deg, var(--color-green-dark) 0%, var(--color-green) 100%);
            color: #d4d5b0;
            padding: var(--space-lg) 0 var(--space-md);
        }

        .footer-inner {
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 var(--space-md);
        }

        .footer-top {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1fr;
            gap: var(--space-md);
            padding-bottom: var(--space-md);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: var(--space-md);
            align-items: start;
        }

        .footer-brand {
            font-family: var(--font-display);
            font-size: 1.2rem;
            color: var(--color-white);
            margin-bottom: 0.6rem;
        }

        .footer-address {
            font-size: 0.85rem;
            line-height: 1.7;
            color: #d4d5b0;
        }

        .footer-col-title {
            font-weight: 700;
            font-size: 0.78rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--color-gold);
            margin-bottom: 0.5rem;
        }

        .footer-links {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .footer-links a {
            font-size: 0.85rem;
            color: #d4d5b0;
            text-decoration: none;
            transition: color 0.15s;
            line-height: 1.3;
            display: block;
            padding: 0.1rem 0;
        }

        .footer-links a:hover {
            color: var(--color-white);
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.78rem;
            color: #a0a080;
        }

        /* ── RESPONSIVE ────────────────────────────────────────────────────────── */
        @media (max-width: 860px) {
            .hero {
                min-height: 75vh;
                align-items: flex-end;
            }

            .hero-content {
                margin-left: 0;
                padding: var(--space-md) var(--space-md) var(--space-lg);
                max-width: 100%;
            }

            .photo-grid {
                columns: 2;
            }

            .faq-grid {
                grid-template-columns: 1fr;
            }

            .location-layout {
                grid-template-columns: 1fr;
            }

            .contact-layout {
                grid-template-columns: 1fr;
            }

            .footer-top {
                grid-template-columns: 1fr 1fr;
            }

            .form-row {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 560px) {
            .nav-links {
                display: none;
            }

            .photo-grid {
                columns: 1;
            }

            .walk-inner {
                flex-direction: column;
                gap: 1rem;
            }

            .walk-line {
                display: none;
            }

            .footer-top {
                grid-template-columns: 1fr;
            }
        }

        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                transition: none !important;
                animation: none !important;
            }
        }
    
/* VERSION 2.0 RESOURCE PAGE COMPONENTS */
.page-hero{background:var(--gradient-who);color:var(--color-white);padding:5rem 0 4rem}.page-hero .section-eyebrow{color:var(--color-gold-bright)}.page-hero h1{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,4rem);line-height:1.08;max-width:850px;margin-bottom:1.2rem}.page-hero p{font-size:1.12rem;max-width:720px;color:var(--color-gold-light)}
.breadcrumbs{font-size:.84rem;margin-bottom:1.25rem;color:var(--color-gold-light)}.breadcrumbs a{color:var(--color-gold-bright)}
.content-section{padding:5rem 0}.content-section.alt{background:var(--color-linen)}.prose{max-width:780px}.prose h2{font-family:var(--font-display);font-size:clamp(1.65rem,3vw,2.35rem);color:var(--color-green);line-height:1.2;margin:2.4rem 0 .8rem}.prose h3{font-family:var(--font-display);font-size:1.2rem;color:var(--color-green-dark);margin:1.7rem 0 .45rem}.prose p,.prose li{color:var(--color-dark-gray)}.prose ul{padding-left:1.25rem;margin:1rem 0}.prose li{margin:.45rem 0}.lead{font-size:1.13rem;color:var(--color-muted)}
.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.2rem}.resource-card{background:var(--color-white);border:1px solid #e5e0d8;border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:1.6rem}.resource-card h2,.resource-card h3{font-family:var(--font-display);color:var(--color-green);font-size:1.18rem;line-height:1.25;margin-bottom:.6rem}.resource-card p{color:var(--color-muted);font-size:.95rem}.resource-card a{display:inline-block;color:var(--color-green);font-weight:700;margin-top:.85rem;text-decoration:none}.resource-card a:hover{text-decoration:underline}
.fact-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#ddd8cb;border-radius:var(--radius-md);overflow:hidden;margin-top:-2rem;position:relative;box-shadow:var(--shadow-card)}.fact{background:var(--color-white);padding:1.4rem;text-align:center}.fact strong{display:block;font-family:var(--font-display);font-size:1.35rem;color:var(--color-green)}.fact span{font-size:.82rem;color:var(--color-muted)}
.callout{background:var(--color-gold-light);border-left:5px solid var(--color-gold);padding:1.3rem 1.5rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:1.8rem 0}.cta-band{background:var(--color-green-dark);padding:3rem 0;color:white}.cta-band .container{display:flex;justify-content:space-between;align-items:center;gap:2rem}.cta-band h2{font-family:var(--font-display);font-size:1.8rem}.cta-band p{color:var(--color-gold-light)}
.resource-photo{width:100%;max-height:420px;object-fit:cover;border-radius:var(--radius-md);box-shadow:var(--shadow-card);margin:1.6rem 0 2rem}
.btn-outline-light{display:inline-block;background:transparent;color:var(--color-white);font-family:var(--font-body);font-weight:600;font-size:.95rem;padding:.8rem 1.9rem;border-radius:var(--radius-sm);text-decoration:none;letter-spacing:.02em;border:2px solid var(--color-gold-light);transition:background .2s,color .2s}
.btn-outline-light:hover{background:var(--color-gold-light);color:var(--color-green-dark)}
.mid-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin:2rem 0}
.cta-band .container{flex-wrap:wrap}.cta-band .cta-actions{display:flex;gap:.9rem;flex-wrap:wrap}
@media(max-width:800px){.resource-grid{grid-template-columns:1fr}.fact-strip{grid-template-columns:1fr 1fr}.cta-band .container{display:block}.cta-band .btn-primary{margin-top:1rem}.page-hero{padding:3.5rem 0}.nav-links{gap:.8rem;flex-wrap:wrap;justify-content:flex-end}.resource-photo{max-height:260px}}