/* ── 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 { font-family: 'Inter', system-ui, sans-serif; font-weight: 300; line-height: 1.7; color: #1a1a1a; background-color: #FAF8F5; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── Typography ─────────────────────────────────────────── */
.cormorant { font-family: 'Cormorant Garamond', Georgia, serif; }
.inter { font-family: 'Inter', system-ui, sans-serif; }

/* ── Navbar ─────────────────────────────────────────────── */
#navbar { background: transparent; }
#navbar.scrolled { background: rgba(250, 248, 245, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid #e8e4df; }
.nav-logo { color: #fff; transition: color 0.4s ease; }
#navbar.scrolled .nav-logo { color: #065f46; }
.nav-logo-text { color: #fff; transition: color 0.4s ease; }
#navbar.scrolled .nav-logo-text { color: #1a1a1a; }
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: #065f46; transition: width 0.3s ease; }
.nav-link:hover::after { width: 100%; }

/* ── Mobile Menu ────────────────────────────────────────── */
.mobile-nav-link { color: #1a1a1a; padding: 8px 0; display: block; border-bottom: 1px solid #f0ece7; transition: color 0.3s ease; }
.mobile-nav-link:hover { color: #065f46; }
#menu-icon-open, #menu-icon-close { color: #fff; transition: color 0.4s ease; }
#navbar.scrolled #menu-icon-open { color: #1a1a1a; }
#navbar.scrolled #menu-icon-close { color: #1a1a1a; }

/* ── Hero ───────────────────────────────────────────────── */
.hero-gradient { background: linear-gradient(135deg, #042e22 0%, #065f46 35%, #059669 65%, #10b981 100%); }
.hero-pattern {
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.3) 1px, transparent 0);
    background-size: 40px 40px;
}
.hero-vignette {
    background: radial-gradient(ellipse at center, transparent 40%, rgba(4, 46, 34, 0.4) 100%);
}
.hero-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.hero-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 300;
    line-height: 1.1;
    color: #fff;
    letter-spacing: -0.01em;
}
.hero-subtitle {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.75;
    font-weight: 300;
}
.hero-scroll { color: rgba(255,255,255,0.5); animation: heroScroll 2s ease-in-out infinite; }
@keyframes heroScroll {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(6px); opacity: 1; }
}

/* ── Buttons ────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 32px;
    background: #fff;
    color: #065f46;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid #fff;
    border-radius: 0;
    transition: all 0.35s ease;
    cursor: pointer;
}
.btn-primary:hover { background: transparent; color: #fff; }
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 32px;
    background: transparent;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 0;
    transition: all 0.35s ease;
    cursor: pointer;
}
.btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 36px;
    background: #fff;
    color: #065f46;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid #fff;
    border-radius: 0;
    transition: all 0.35s ease;
    cursor: pointer;
}
.btn-cta:hover { background: transparent; color: #fff; }

/* ── Section Elements ───────────────────────────────────── */
.section-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #065f46;
}
.section-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 300;
    line-height: 1.15;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}
.section-subtitle {
    font-size: 16px;
    color: #6b6b6b;
    line-height: 1.75;
    font-weight: 300;
}

/* ── Service Cards ──────────────────────────────────────── */
.service-card { transition: background 0.3s ease; }
.service-card:hover { background: #f7f5f2; }
.service-card h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; }

/* ── Values Cards ───────────────────────────────────────── */
.values-card { transition: background 0.3s ease; }
.values-card:hover { background: #f7f5f2; }
.values-card h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; }

/* ── CTA Section ────────────────────────────────────────── */
.cta-pattern {
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.4) 1px, transparent 0);
    background-size: 32px 32px;
}

/* ── Form ───────────────────────────────────────────────── */
.input-field {
    width: 100%;
    padding: 13px 0;
    border: none;
    border-bottom: 1px solid #e0dcd7;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: #1a1a1a;
    outline: none;
    border-radius: 0;
    transition: border-color 0.3s ease;
}
.input-field::placeholder { color: #bbb; }
.input-field:focus { border-bottom-color: #065f46; }

/* ── Scroll Reveal ──────────────────────────────────────── */
.reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.revealed {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(24px);
    }
    .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-title { padding: 0 0.5rem; }
}