/* =============================================
   Delta Realty LLC — Global Styles
   ============================================= */

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --black: #1A1A1A;
    --gold: #FFD700; /* Bright sunshine yellow */
    --gold-dark: #b0912f;
    --white: #FFFFFF;
    --gray-bg: #F5F5F5;
    --gray-text: #333333;
    --gray-light: #E5E5E5;
    --gray-muted: #888888;
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', 'Helvetica Neue', sans-serif;
    --transition: 0.35s ease;
    --radius: 6px;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.12);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--gray-text);
    background: var(--white);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

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

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

address {
    font-style: normal;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Performance: Extracted Inline Styles ---------- */
/* These classes replace inline style="" attributes so the browser can
   cache them in the stylesheet instead of re-parsing them on every page
   load. Moving styles from HTML to CSS also reduces HTML file size and
   keeps all styling in one maintainable location. */

/* PLACEHOLDER — swap for a real local Delta Realty listing photo before launch.
   Current Unsplash image is a free-to-use charming rural/small-town home with front porch.
   Target vibe: warm, inviting, unmistakably residential SE Missouri — not urban, not luxury. */
.hero-bg-default {
    background-image: url('https://images.unsplash.com/photo-1570129477492-45c003edd2be?w=1600&auto=format&fit=crop');
}

.cta-bg-default {
    background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=1600');
}

.gold-line-left {
    margin-left: 0;
}

.bg-gray {
    background: var(--gray-bg);
}

.form-submit-left {
    text-align: left;
}

/* ---------- Shared Elements ---------- */
.gold-line {
    width: 60px;
    height: 2px;
    background: var(--gold);
    margin: 16px auto 0;
}

.section {
    padding: 96px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 56px;
}

.section-header h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 600;
    color: var(--black);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 14px 32px;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
}

.btn-gold {
    background: var(--gold);
    color: var(--black);
    border-color: var(--gold);
}

.btn-gold:hover {
    background: #E6C200;
    border-color: #E6C200;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
    transition: all 0.2s ease;
}

.btn-gold:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(255, 215, 0, 0.2);
}

.btn-gold:disabled {
    background-color: #999;
    border-color: #999;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-outline-gold {
    background: transparent;
    color: var(--white);
    border-color: var(--gold);
}

.btn-outline-gold:hover {
    background: var(--gold);
    color: var(--black);
    transform: translateY(-2px);
}

.btn-lg {
    padding: 16px 40px;
    font-size: 1rem;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.85rem;
}

/* ---------- Navigation ---------- */
.trust-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1001;
    background: #1A1A1A;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 13px;
    text-align: center;
    padding: 8px 0;
}

.navbar {
    position: fixed;
    top: 32px;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--black);
    transition: box-shadow var(--transition);
}

.navbar.scrolled {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
}

/* Home-page navbar variant: no brand, nav links centered full-width */
.navbar-home .nav-container {
    justify-content: center;
}

.navbar-home .nav-right {
    flex: 1;
    justify-content: center;
}

.navbar-home .nav-links {
    gap: 48px;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--white);
}

.logo span {
    font-weight: 400;
    color: var(--gold);
}

/* Logo sized to match nav height — use height only, width: auto preserves aspect ratio */
.nav-logo {
    height: 50px;
    width: auto;
    display: block;
}

/* Nav brand — logo + text side by side */
.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.nav-brand-text {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: #fff;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.nav-brand-accent {
    color: var(--gold);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 40px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-links a {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    transition: color var(--transition);
}

.nav-links a:hover,
.nav-links a.nav-active {
    color: var(--gold);
}

/* CTA button inside nav-links keeps dark text and matches sibling nav-link typography.
   Without this override, .nav-links a wins specificity and forces font-weight: 500 + light color. */
.nav-links a.btn-gold,
.nav-links a.btn-gold:hover,
.nav-links a.btn-gold:focus {
    color: var(--black);
    font-family: var(--font-body);
    font-weight: 500;
}

.nav-cta {
    padding: 10px 24px;
    font-size: 0.85rem;
}

.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.mobile-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    border-radius: 1px;
    transition: all var(--transition);
}

.mobile-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* Pure-black gradient darkens the image just enough for white text to stay readable
       over lighter regions of the photo (e.g. sky, porch highlights) without losing detail. */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.hero-content {
    position: relative;
    text-align: center;
    max-width: 800px;
    padding: 24px;
}

/* Home-page hero brand — typographic statement centered above the h1.
   Sized larger than the h1 (which uses clamp(2rem, 5vw, 3.4rem)) so it
   reads as the top of the visual hierarchy. Dual text-shadow gives
   soft contrast over the hero image without a visible box. */
.hero-brand {
    font-family: var(--font-heading);
    font-size: clamp(2.75rem, 7vw, 4.75rem);
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.5px;
    line-height: 1.15;
    margin-bottom: 24px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 12px rgba(0, 0, 0, 0.6);
}

.hero-brand-accent {
    color: var(--gold);
}

/* Rental link in footer — noticeable but not competing with main CTAs. */
.footer-rental-link {
    margin-top: 16px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
}

.footer-rental-link a {
    color: var(--gold);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-rental-link a:hover {
    color: #CCCCCC;
}

.hero-content h1 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.15rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.25;
    margin-bottom: 20px;
}

.hero-subtitle {
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    color: rgba(255, 255, 255, 0.95);
    font-weight: 300;
    margin-bottom: 40px;
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- Stats Bar ---------- */
.stats-bar {
    background: var(--black);
    padding: 52px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1.2;
}

.stat-suffix {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--gold);
}

.stat-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 6px;
}

/* ---------- Featured Listings ---------- */
.listings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.property-card {
    background: transparent;
    border: 1px solid var(--black);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition);
    /* GPU compositing hint that doesn't occupy the transform property —
       leaves transform free for the hover translateY() so hover-in and
       hover-out animate smoothly without matrix decomposition snaps. */
    will-change: transform;
}

.property-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.property-image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.property-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    will-change: transform;
}

.property-card:hover .property-image img {
    transform: scale(1.04);
}

.property-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--gold);
    color: var(--black);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.property-info {
    padding: 24px;
    background: var(--white);
}

/* Listings-page-only fix for a 1px subpixel gap visible on right-column cards.
   Cause: #listingsGrid uses grid-template-columns: repeat(3, 1fr); when the
   container width doesn't divide evenly by 3, right-column cards land on
   fractional pixel positions, and the hover transform reveals a hairline
   between the top border and the image. Scoped to #listingsGrid so the
   home-page Featured Properties (which work fine) are untouched. */
#listingsGrid .property-card {
    background: var(--black);
}

#listingsGrid .property-image {
    /* .property-image already has position: relative at the base rule — we
       just offset it visually by 1px without affecting layout flow, so the
       hover transform on the parent card stays clean (no reflow/margin
       interaction). Card's overflow: hidden clips the 1px overlap. */
    top: -1px;
}

.property-price {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: #1A1A1A;
    background: #FFD700;
    border: 2px solid #1A1A1A;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: 6px;
}

.property-address {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 12px;
    line-height: 1.4;
}

.property-details {
    display: flex;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--gray-light);
}

.property-details span {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gray-muted);
}

.property-link {
    background: #FFD700;
    color: #1A1A1A;
    text-decoration: none;
    border: 2px solid #1A1A1A;
    border-radius: 6px;
    padding: 6px 16px;
    font-weight: 700;
    font-size: 14px;
    display: inline-block;
    transition: background 0.2s ease, color 0.2s ease;
}

.property-link:hover {
    background: #1A1A1A;
    color: #FFD700;
    border-color: #1A1A1A;
}

.tour-request-section {
    position: relative;
    background: url('../images/brown-ln-mansion.jpg') center/cover no-repeat;
    background-size: cover;
    background-attachment: fixed;
    min-height: 700px;
    overflow: hidden;
}

/* iOS Safari doesn't support background-attachment: fixed and renders
   the image at a zoomed-in scale. Fall back to scroll on mobile — the
   parallax effect is desktop-only anyway. */
@media (max-width: 768px) {
    .tour-request-section {
        background-attachment: scroll;
    }
}

.tour-request-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
}

.tour-request-container {
    position: relative;
    z-index: 1;
    min-height: 700px;
}

.tour-success {
    display: none;
    text-align: center;
    min-height: 700px;
    opacity: 0;
    transition: opacity 0.5s ease;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
}

.matterport-tour {
    width: 100%;
    background: #f0f0f0;
    padding: 20px;
    text-align: center;
}

.matterport-placeholder {
    font-style: italic;
    color: #666;
}

.share-buttons {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    border-top: 1px solid #eee;
    padding-top: 12px;
}

.share-btn {
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    transition: all 0.3s ease;
    padding: 0;
}

.share-facebook:hover {
    color: #1877F2;
    border-color: #1877F2;
}

.share-email:hover {
    color: var(--gold);
    border-color: var(--gold);
}

.share-copy:hover {
    color: #333;
    border-color: #333;
}

/* ---------- Why Choose Us ---------- */
.why-choose {
    background: var(--gray-bg);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.feature-card {
    text-align: center;
    padding: 40px 24px;
    background: var(--white);
    border: 1px solid var(--black);
    border-radius: var(--radius);
    transition: transform var(--transition), box-shadow var(--transition);
}

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

.feature-icon {
    font-size: 2.8rem;
    margin-bottom: 20px;
    line-height: 1;
}

.feature-card h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 12px;
}

.feature-card p {
    font-size: 0.9rem;
    color: var(--gray-text);
    line-height: 1.7;
}

/* ---------- Testimonial ---------- */
.testimonial-section-gray {
    background: var(--gray-bg);
}

.testimonial-content {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.stars {
    font-size: 1.4rem;
    color: var(--gold);
    letter-spacing: 4px;
    margin-bottom: 24px;
}

.testimonial-content .quote-mark {
    display: block;
    font-family: var(--font-heading);
    font-size: 5rem;
    color: var(--gold);
    line-height: 0.4;
    margin-bottom: 20px;
}

.testimonial-content blockquote {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-weight: 400;
    font-style: italic;
    color: var(--gray-text);
    line-height: 1.9;
    margin-bottom: 28px;
}

.testimonial-author {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--black);
}

/* Carousel: all slides stacked absolutely inside a fixed-height container
   so the section never resizes when transitioning between long and short reviews. */
.testimonial-carousel {
    position: relative;
    min-height: 280px;
}

.testimonial-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
    will-change: opacity;
}

.testimonial-slide.active {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 768px) {
    .testimonial-carousel {
        min-height: 360px;
    }
}

@media (max-width: 480px) {
    .testimonial-carousel {
        min-height: 440px;
    }
}

.testimonial-dots {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}

.testimonial-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: var(--gray-light);
    cursor: pointer;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.3s ease, transform 0.3s ease;
}

.testimonial-dot.active {
    background: var(--gold);
    transform: scale(1.25);
}

.testimonial-dot:hover {
    background: var(--gold);
}

/* ---------- Financing Callout ---------- */
.financing-callout {
    background: var(--gray-bg);
}

.financing-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.financing-content p {
    font-size: 1.05rem;
    color: var(--gray-text);
    line-height: 1.8;
    margin-bottom: 32px;
}

/* ---------- CTA Section ---------- */
.cta-section {
    position: relative;
    padding: 100px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 26, 0.8);
}

.cta-content {
    position: relative;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.cta-content h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 16px;
}

.cta-content p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 36px;
    line-height: 1.7;
}

/* ---------- Footer ---------- */
.footer {
    background: var(--black);
    padding-top: 72px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--white);
    display: inline-block;
    margin-bottom: 16px;
}

.footer-logo span {
    font-weight: 400;
    color: var(--gold);
}

.footer-about {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.7;
    margin-bottom: 16px;
}

.footer-address {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.6;
}

.footer-col h4 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-col ul li {
    margin-bottom: 10px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}

.footer-col ul li a {
    color: rgba(255, 255, 255, 0.55);
    transition: color var(--transition);
}

.footer-col ul li a:hover {
    color: var(--gold);
}

.footer-bottom {
    padding: 24px 0;
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.35);
}

.footer-credit strong {
    color: var(--gold);
    font-weight: 600;
}

/* ---------- Screen Reader Only (Accessibility Utility) ---------- */
/* LEARNING POINT: .sr-only hides text visually but keeps it
   readable by screen readers. This is how you label things
   for accessibility without affecting your visual design.
   You'll use this pattern on EVERY site you build. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Listings Filter Bar ---------- */
.listings-filters {
    background: var(--gray-bg);
    padding: 32px 0;
    border-bottom: 1px solid var(--gray-light);
}

.filter-bar {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filter-group {
    flex: 1;
    min-width: 160px;
}

.filter-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.filter-select {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--gray-text);
    background: var(--white);
    border: 1px solid var(--gray-light);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--transition);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.filter-select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15);
}

.filter-btn {
    padding: 12px 32px;
    white-space: nowrap;
}

/* ---------- Results Toolbar ---------- */
.results-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray-light);
}

.results-count {
    font-size: 0.9rem;
    color: var(--gray-muted);
}

.results-count strong {
    color: var(--black);
    font-weight: 600;
}

.sort-select {
    width: auto;
    min-width: 180px;
}

/* ---------- Property County Tag ---------- */
.property-county {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--gray-muted);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ---------- No Results State ---------- */
.no-results {
    text-align: center;
    padding: 80px 24px;
}

.no-results-text {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--gray-muted);
    margin-bottom: 24px;
}

/* ---------- Property Card Show/Hide for Filters ---------- */
.property-card.card-hidden {
    display: none;
}

/* ---------- Team Intro ---------- */
.team-intro-content {
    max-width: 800px;
}

.team-intro-content h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 600;
    color: var(--black);
    margin-bottom: 0;
}

.team-intro-content .gold-line {
    margin: 16px 0 0;
}

.team-intro-content p {
    font-size: 1rem;
    color: var(--gray-text);
    line-height: 1.8;
    margin-top: 24px;
}

/* ---------- Team Grid ---------- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
}

.agent-card {
    display: flex;
    gap: 24px;
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition);
}

.agent-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.agent-photo {
    flex-shrink: 0;
    width: 200px;
}

.agent-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.agent-info {
    padding: 28px 28px 28px 0;
    display: flex;
    flex-direction: column;
}

.agent-name {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 4px;
}

.agent-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.agent-bio {
    font-size: 0.88rem;
    color: var(--gray-text);
    line-height: 1.7;
    margin-bottom: 16px;
}

.agent-specialties {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.agent-tag {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gold-dark);
    background: rgba(255, 215, 0, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.agent-areas {
    font-size: 0.8rem;
    color: var(--gray-muted);
    margin-bottom: 16px;
    font-weight: 500;
}

.agent-contact {
    display: flex;
    gap: 16px;
    margin-top: auto;
    flex-wrap: wrap;
}

.agent-contact-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--black);
    transition: color var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.agent-contact-link:hover {
    color: var(--gold);
}

.agent-contact-icon {
    font-size: 1rem;
}

/* ---------- Join Our Team ---------- */
.join-team {
    background: var(--gray-bg);
}

.join-team-content {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}

.join-team-content h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 600;
    color: var(--black);
}

.join-team-content p {
    font-size: 1rem;
    color: var(--gray-text);
    line-height: 1.7;
    margin: 24px 0 36px;
}

/* ---------- Page Header ---------- */
.page-header {
    background: var(--black);
    padding: 100px 0 56px;
    margin-top: 108px;
    text-align: center;
}

.page-header h1 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 12px;
}

.page-header p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 300;
}

/* ---------- Sell Page: Value Proposition ---------- */
.sell-value-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.sell-value-text h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 600;
    color: var(--black);
    margin-bottom: 0;
}

.sell-value-text p {
    font-size: 1rem;
    color: var(--gray-text);
    line-height: 1.8;
    margin-top: 24px;
}

.sell-benefits {
    margin-top: 24px;
    margin-bottom: 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sell-benefits li {
    font-size: 0.95rem;
    color: var(--gray-text);
    line-height: 1.7;
    padding-left: 20px;
    position: relative;
}

.sell-benefits li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%;
}

.sell-benefits li strong {
    color: var(--black);
}

.sell-value-image {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.sell-value-image img {
    display: block;
    width: 100%;
    height: auto;
}

.brown-ln-banner {
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 0;
    overflow: hidden;
}

.brown-ln-banner img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ---------- Sell Page: Process Steps ---------- */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.process-step {
    text-align: center;
    padding: 32px 20px;
    background: var(--white);
    border-radius: var(--radius);
    transition: transform var(--transition), box-shadow var(--transition);
}

.process-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.process-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--black);
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.process-step h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 12px;
}

.process-step p {
    font-size: 0.88rem;
    color: var(--gray-text);
    line-height: 1.7;
}

/* ---------- Sell Page: Valuation Form ---------- */
.sell-form-subtitle {
    font-size: 1rem;
    color: var(--gray-muted);
    margin-top: 16px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.valuation-form {
    max-width: 720px;
    margin: 0 auto;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group-full {
    grid-column: 1 / -1;
}

.form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--gray-text);
    background: var(--white);
    border: 1px solid var(--gray-light);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input::placeholder {
    color: var(--gray-muted);
    opacity: 0.6;
}

.form-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15);
}

.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

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

.form-submit {
    text-align: center;
    margin-top: 32px;
}

.form-trust {
    font-size: 0.82rem;
    color: var(--gray-muted);
    margin-top: 14px;
    font-style: italic;
}

/* ---------- Contact Page: Two-Column Layout ---------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
    align-items: start;
}

/* Offset anchor targets so the fixed nav/trust bars don't cover the
   heading when the browser scrolls to it. Applied to every section
   heading we link to from CTAs. */
#contact-form,
#valuationForm {
    scroll-margin-top: 100px;
}

/* Mobile-only: the tour form success message needs extra top offset
   because the success element sits high in its section and would
   otherwise get hidden behind the fixed nav + trust bar. */
@media (max-width: 768px) {
    #tourSuccessMessage,
    .tour-success {
        scroll-margin-top: 150px;
    }
}

.contact-form-col h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 600;
    color: var(--black);
    margin-bottom: 0;
}

.contact-form-col .gold-line {
    margin: 16px 0 0;
}

.contact-form {
    margin-top: 32px;
}

/* ---------- Contact Page: Info Card ---------- */
.contact-info-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 36px;
}

.contact-info-card h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 28px;
}

.contact-info-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-light);
}

.contact-info-item:last-of-type {
    border-bottom: none;
}

.contact-info-icon {
    font-size: 1.3rem;
    line-height: 1.4;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.contact-info-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gray-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.contact-info-value {
    font-size: 0.92rem;
    color: var(--gray-text);
    line-height: 1.6;
}

.contact-info-link {
    color: var(--black);
    font-weight: 600;
    transition: color var(--transition);
}

.contact-info-link:hover {
    color: var(--gold);
}

/* ---------- Contact Page: Map Placeholder ---------- */
.map-placeholder {
    width: 100%;
    height: 280px;
    background: var(--gray-bg);
    border-radius: var(--radius);
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-muted);
    border: 1px dashed var(--gray-light);
}

/* ---------- Contact Page: Quick-Call Banner ---------- */
.quick-call-banner {
    background: var(--black);
    padding: 40px 0;
}

.quick-call-content {
    text-align: center;
}

.quick-call-content p {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 500;
    color: var(--white);
}

.quick-call-number {
    color: var(--gold);
    font-weight: 700;
    transition: color var(--transition);
}

.quick-call-number:hover {
    color: var(--gold-dark);
}

/* ---------- Contact Page: Service Areas ---------- */
.areas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.area-card {
    background: var(--white);
    border: 1px solid var(--black);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition);
}

.area-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.area-card h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold);
}

.area-card ul li {
    font-size: 0.9rem;
    color: var(--gray-text);
    padding: 5px 0;
    padding-left: 16px;
    position: relative;
}

.area-card ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 13px;
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .listings-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-grid {
        grid-template-columns: 1fr;
        max-width: 640px;
        margin: 0 auto;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sell-value-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sell-value-image {
        max-width: 100%;
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .areas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .nav-logo {
        height: 40px;
    }

    .mobile-toggle {
        display: flex;
    }

    /* Home-page mobile: pin hamburger to the right since there's no brand in the bar */
    .navbar-home .nav-container {
        justify-content: flex-end;
    }

    .navbar-home .nav-right {
        flex: initial;
    }

    /* Mobile-opened nav on home: restore vertical stacked menu (overrides desktop centered row) */
    .navbar-home .nav-right.open .nav-links {
        gap: 16px;
    }

    /* Hero brand gets a tighter gap above the h1 on smaller screens */
    .hero-brand {
        margin-bottom: 18px;
    }

    .filter-bar {
        flex-direction: column;
    }

    .filter-group {
        min-width: 100%;
    }

    .filter-btn {
        width: 100%;
    }

    .results-toolbar {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .sort-select {
        width: 100%;
    }

    .agent-card {
        flex-direction: column;
    }

    .agent-photo {
        width: 100%;
        height: 240px;
    }

    .agent-info {
        padding: 24px;
    }

    .nav-right {
        display: none;
        position: absolute;
        top: 76px;
        left: 0;
        width: 100%;
        background: var(--black);
        flex-direction: column;
        padding: 24px;
        gap: 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-right.open {
        display: flex;
    }

    .nav-links {
        flex-direction: column;
        gap: 16px;
    }

    .nav-cta {
        align-self: center;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .listings-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .section {
        padding: 72px 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .cta-section {
        padding: 72px 0;
    }

    .process-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
    }

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

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .areas-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .nav-brand-text {
        font-size: 1.1rem;
    }

    .hero-brand {
        margin-bottom: 14px;
    }

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

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

    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
    }

    .hero-content h1 {
        font-size: 1.8rem;
    }
}

/* ---------- Form Validation States ---------- */
/* These styles support client-side validation feedback. The error
   state uses a red border + message to clearly indicate which field
   needs attention. The success state replaces the entire form with
   a confirmation message. Both use transitions to avoid jarring
   visual jumps. */

.field-error {
    border-color: #D32F2F !important;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.12) !important;
}

.error-message {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: #D32F2F;
    margin-top: 6px;
    animation: errorAppear 0.25s ease;
}

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

.form-success {
    text-align: center;
    padding: 64px 24px;
    animation: successAppear 0.4s ease;
}

@keyframes successAppear {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.form-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #2E7D32;
    margin: 0 auto 24px;
    position: relative;
}

.form-success-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 10px;
    border-left: 3px solid var(--white);
    border-bottom: 3px solid var(--white);
    transform: translate(-50%, -60%) rotate(-45deg);
}

.form-success-text {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-weight: 500;
    color: var(--gray-text);
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto;
}

.form-success-detail {
    font-size: 0.85rem;
    color: #999;
    margin-top: 1rem;
    font-style: italic;
}

/* ---------- Micro-Interactions ---------- */
/* Smooth transition on submit buttons so disabled state change
   doesn't feel jarring — the color shift animates instead of snapping */
.btn {
    transition: all 0.2s ease;
}

/* Form field focus — gold glow matches brand, meets WCAG 2.4.7
   Focus Visible requirement. The 3px ring ensures keyboard-only
   users can always see which field is active. */
.form-input:focus,
.filter-select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* --- Review CTA Section --- */
.review-cta {
    background: var(--black);
    color: var(--white);
    text-align: center;
    padding: 60px 0;
}

.review-cta h2 {
    color: var(--gold);
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin: 0 0 16px;
}

.review-cta p {
    color: var(--gray-light, #ccc);
    font-size: 1.1rem;
    max-width: 640px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

.review-cta .btn-gold {
    display: inline-block;
}

@media (max-width: 480px) {
    .review-cta {
        padding: 48px 0;
    }
    .review-cta p {
        font-size: 1rem;
    }
}

/* Soft review ask appended to form success messages */
.form-success-review {
    margin-top: 16px;
    font-size: 0.95rem;
    color: var(--gray-text, #555);
}

.form-success-review a {
    color: var(--gold);
    font-weight: 600;
    text-decoration: underline;
}

/* --- Admin Panel --- */
.admin-body {
    background: var(--black);
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-body);
}

.admin-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.admin-card {
    background: var(--white);
    border-radius: 8px;
    padding: 48px 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    text-align: center;
}

.admin-card-wide {
    max-width: 560px;
    text-align: left;
}

.admin-brand {
    font-family: var(--font-heading);
    color: var(--black);
    font-size: 1.75rem;
    margin: 0 0 4px;
    text-align: center;
}

.admin-brand span {
    color: var(--gold);
}

.admin-subtitle {
    color: var(--gray-text, #666);
    font-size: 0.95rem;
    margin: 0 0 32px;
    text-align: center;
}

.admin-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-form label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--black);
    margin-top: 14px;
}

.admin-form input,
.admin-form select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
    background: var(--white);
}

.admin-form input:focus,
.admin-form select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
}

.admin-submit {
    margin-top: 24px;
    width: 100%;
}

.admin-error {
    margin: 16px 0 0;
    padding: 10px 14px;
    background: #fdecea;
    color: #a32e22;
    border-radius: 4px;
    font-size: 0.9rem;
}

.admin-message {
    margin: 18px 0 0;
    padding: 12px 14px;
    border-radius: 4px;
    font-size: 0.95rem;
}

.admin-message-success {
    background: #e8f5ee;
    color: #1f7a3d;
    border-left: 3px solid #1f7a3d;
}

.admin-message-error {
    background: #fdecea;
    color: #a32e22;
    border-left: 3px solid #a32e22;
}

.admin-counter {
    margin-top: 24px;
    text-align: center;
    color: var(--gray-text, #666);
    font-size: 0.9rem;
}

.admin-counter #sentCount {
    color: var(--gold);
    font-weight: 700;
}

@media (max-width: 480px) {
    .admin-card {
        padding: 32px 24px;
    }
}

/* ==========================================================
   Sticky Mobile CTA Bar
   Mobile-only fixed bottom bar with Call Now / Email Us.
   Hidden on desktop (display: none). On <=768px viewports it
   becomes a fixed flex row pinned to the bottom of the viewport.
   env(safe-area-inset-bottom) adds padding on iPhones with the
   home-indicator bar so the buttons clear the gesture area.
   body padding-bottom keeps page content from being covered.
   ========================================================== */

.mobile-cta-bar {
    display: none;
}

@media (max-width: 768px) {
    .mobile-cta-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: #1A1A1A;
        border-top: 2px solid #FFD700;
        padding: 10px 16px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
        gap: 12px;
    }

    .mobile-cta-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px 12px;
        border-radius: 8px;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: opacity 0.2s;
    }

    .mobile-cta-btn:active {
        opacity: 0.8;
    }

    .mobile-cta-call {
        background: #FFD700;
        color: #1A1A1A;
    }

    .mobile-cta-email {
        background: transparent;
        color: #FFD700;
        border: 2px solid #FFD700;
    }

    /* Push page content up so the fixed bar doesn't cover the footer */
    body {
        padding-bottom: 80px;
    }

    footer {
        margin-bottom: 0;
    }
}