/* ── Hero ──────────────────────────────────────────────────── */
.hero {
    margin-top: 82px;
    min-height: 50vh;
    background: linear-gradient(180deg, #1A241E 0%, #0D1410 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 80px 0;
}

.hero-bg {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    background-image:
        linear-gradient(rgba(45, 90, 61, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45, 90, 61, 0.1) 1px, transparent 1px);
    background-size: 60px 60px;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

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

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
}

.breadcrumb a            { color: #888; text-decoration: none; transition: color 0.3s; }
.breadcrumb a:hover      { color: #C6A867; }
.breadcrumb-separator    { color: #555; }
.breadcrumb-current      { color: #2D5A3D; }

/* ── Hero text ──────────────────────────────────────────────── */
.hero-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(42px, 6vw, 68px);
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.1;
    margin-bottom: 24px;
}

.hero-highlight {
    font-style: italic;
    background: linear-gradient(135deg, #2D5A3D 0%, #4A8B5C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    color: #A8A49C;
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
}

/* ── Map/Content Section ────────────────────────────────────── */
.map-section {
    background: #FAFAF8;
    padding: 100px 0;
}

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

.section-eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #2D5A3D;
    margin-bottom: 16px;
}

.section-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 400;
    color: #1A241E;
    line-height: 1.15;
    margin-bottom: 20px;
}

/* ── Tabs ───────────────────────────────────────────────────── */
.map-tabs {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.map-tab {
    padding: 14px 32px;
    background: #FFFFFF;
    border: 2px solid #E5E5E5;
    border-radius: 100px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.map-tab.active              { background: #2D5A3D; border-color: #2D5A3D; color: #FFFFFF; }
.map-tab:hover:not(.active)  { border-color: #2D5A3D; color: #2D5A3D; }

/* ── Content Display Container ────────────────────────────────── */
.map-display {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 0;
    border: 1px solid #E5E5E5;
    min-height: 600px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    position: relative;
}

/* ── AR Placeholder ────────────────────────────────────────── */
.ar-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 40px;
}

.ar-placeholder-icon {
    font-size: 64px;
    margin-bottom: 24px;
    opacity: 0.6;
}

.ar-placeholder-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    font-weight: 500;
    color: #1A241E;
    margin-bottom: 12px;
}

.ar-placeholder-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    color: #888;
    max-width: 400px;
    line-height: 1.7;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .map-display { min-height: 420px; }
    #genially-embed, #ar-embed { height: 420px !important; }
    .container { padding: 0 20px; }
    .hero { padding: 60px 0; }
}