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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
}

::selection {
    background: rgba(26, 60, 52, 0.15);
    color: #1a3c34;
}

/* ── Hero Gradient ── */
.hero-gradient {
    background: linear-gradient(
        135deg,
        #0f2720 0%,
        #1a3c34 20%,
        #2d5a4f 40%,
        #3a634f 55%,
        #4a7d63 70%,
        #6a8e78 85%,
        #8fa498 100%
    );
}

/* Subtle animated gradient shift */
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.hero-gradient {
    background-size: 300% 300%;
    animation: gradientShift 18s ease infinite;
}

/* ── CTA Gradient ── */
.cta-gradient {
    background: linear-gradient(
        135deg,
        #1a3c34 0%,
        #2d4e3f 50%,
        #0f2720 100%
    );
}

/* ── Divider Line ── */
.divider-line {
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(26, 60, 52, 0.12) 20%,
        rgba(26, 60, 52, 0.12) 80%,
        transparent
    );
}

/* ── Eyebrow ── */
.eyebrow {
    letter-spacing: 0.2em;
}

/* ── Scroll Indicator ── */
@keyframes scrollLine {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(160%); }
}

.scroll-line {
    animation: scrollLine 2s ease-in-out infinite;
}

/* ── Hero Animations ── */
.hero-eyebrow {
    animation: fadeUp 0.9s ease forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

.hero-title {
    animation: fadeUp 0.9s ease forwards;
    animation-delay: 0.4s;
    opacity: 0;
}

.hero-subtitle {
    animation: fadeUp 0.9s ease forwards;
    animation-delay: 0.6s;
    opacity: 0;
}

.hero-cta {
    animation: fadeUp 0.9s ease forwards;
    animation-delay: 0.8s;
    opacity: 0;
}

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

/* ── Navbar ── */
#navbar {
    background: transparent;
}

#navbar.scrolled {
    background: rgba(250, 249, 246, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(26, 60, 52, 0.06);
}

/* ── Mobile Menu ── */
#mobile-menu.open {
    opacity: 1;
    pointer-events: all;
}

/* ── Menu List Items ── */
#menu ul li {
    border-bottom: 1px solid rgba(26, 60, 52, 0.06);
    padding-bottom: 0;
}

#menu ul li:first-child {
    border-top: 1px solid rgba(26, 60, 52, 0.06);
    padding-top: 0;
}

/* ── Reveal Animations (progressive enhancement) ── */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    /* Stagger children */
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
}

/* When JS is disabled or reduced motion preferred, all content is visible */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* ── Form Styles ── */
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid rgba(26, 60, 52, 0.2);
    background: transparent;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 300;
    color: #1a3c34;
    outline: none;
    transition: border-color 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-bottom-color: #1a3c34;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(26, 60, 52, 0.4);
}

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

/* ── Success Message ── */
.form-success {
    display: none;
    padding: 16px 20px;
    background: rgba(26, 60, 52, 0.06);
    border-left: 3px solid #1a3c34;
    color: #1a3c34;
    font-size: 0.9rem;
    font-weight: 300;
    margin-top: 16px;
}

.form-success.show {
    display: block;
    animation: fadeUp 0.4s ease;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .hero-title {
        font-size: 2.75rem;
    }

    .hero-title br {
        display: none;
    }

    .hero-title span {
        display: block;
        margin-top: 0.25rem;
    }
}