/* ── Base & Reset ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; padding: 0; margin: 0; }

/* ── Typography ─────────────────────────────────── */
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; line-height: 1.15; color: #2d4a2d; }
p { margin: 0; }

/* ── Nav ────────────────────────────────────────── */
#site-header {
    height: 72px;
}

.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.25s ease;
}
.nav-link:hover::after {
    width: 100%;
}

.mobile-link {
    position: relative;
    display: block;
    padding: 8px 0;
}
.mobile-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.25s ease;
}
.mobile-link:hover::after,
.mobile-link:focus::after {
    width: 100%;
}

/* ── Hero ───────────────────────────────────────── */
.hero-eyebrow {
    animation: fadeDown 0.8s ease both;
}
@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Floating stat cards */
.stat-card {
    animation: floatIn 0.7s ease both;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.stat-card:nth-child(1) { animation-delay: 0.4s; }
.stat-card:nth-child(2) { animation-delay: 0.55s; }
.stat-card:nth-child(3) { animation-delay: 0.7s; }
@keyframes floatIn {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Scroll indicator */
.scroll-line {
    opacity: 0.6;
    animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%, 100% { opacity: 0.4; transform: translateY(0); }
    50%       { opacity: 1;   transform: translateY(6px); }
}

/* ── Section Eyebrows ───────────────────────────── */
.section-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6a9e6a;
}

/* ── Section Headings ───────────────────────────── */
.section-heading {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    color: #2d4a2d;
    letter-spacing: -0.01em;
}

/* ── Feature Items ──────────────────────────────── */
.feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #e3edd3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3a613a;
    flex-shrink: 0;
}

/* ── Living Cards ───────────────────────────────── */
.living-card {
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

/* ── Scroll Reveal (progressive enhancement) ───── */
.reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.fade-up {
    opacity: 0;
    transform: translateY(28px);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.fade-up,
    .stat-card,
    .hero-eyebrow,
    .living-card,
    .scroll-line {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }
    html { scroll-behavior: auto; }
}

/* ── Header shadow on scroll ────────────────────── */
#site-header.scrolled {
    box-shadow: 0 1px 12px rgba(0,0,0,0.06);
}

/* ── Mobile Menu ────────────────────────────────── */
#mobile-menu {
    animation: slideDown 0.25s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Utility ────────────────────────────────────── */
@media (max-width: 1023px) {
    .stat-card { display: none; }
}