*, *::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; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }

.skip-link { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); z-index: 100; padding: 0.75rem 1.5rem; background: #065F46; color: white; font-size: 0.875rem; text-decoration: none; border-radius: 0 0 4px 4px; }
.skip-link:focus { top: 0; }

/* ─── Header ─── */
.site-header { background: rgba(253,252,240,0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(4,120,87,0.06); }
.site-header.scrolled { background: rgba(253,252,240,0.95); box-shadow: 0 1px 0 rgba(4,120,87,0.06); }
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: #059669; transition: width 0.3s ease; }
.nav-link:hover::after { width: 100%; }

/* ─── Buttons ─── */
.btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 2rem; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; border-radius: 0; transition: all 0.3s ease; cursor: pointer; border: none; }
.btn-primary { background: #047857; color: white; }
.btn-primary:hover { background: #065F46; }
.btn-secondary { background: transparent; color: #047857; border: 1px solid rgba(4,120,87,0.3); }
.btn-secondary:hover { background: rgba(4,120,87,0.05); border-color: #059669; }
.btn-primary-contact { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 3rem; background: #10B981; color: white; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; border: none; border-radius: 0; cursor: pointer; transition: all 0.3s ease; }
.btn-primary-contact:hover { background: #059669; }

/* ─── Hero ─── */
.hero { background: linear-gradient(135deg, #022C22 0%, #064E3B 25%, #047857 50%, #059669 75%, #10B981 100%); }
.hero-gradient { background: radial-gradient(ellipse at 30% 50%, rgba(16,185,129,0.3) 0%, transparent 60%), radial-gradient(ellipse at 70% 30%, rgba(5,150,105,0.4) 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(2,44,34,0.5) 0%, transparent 50%); }
.hero-grid { background-image: linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px); background-size: 16.66% 100%; }
.hero-grain { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); background-size: 128px 128px; }
.diamond { animation: float 6s ease-in-out infinite; }
.diamond:nth-child(2) { animation-delay: -1s; animation-duration: 8s; }
.diamond:nth-child(3) { animation-delay: -3s; animation-duration: 7s; }
.diamond:nth-child(4) { animation-delay: -2s; animation-duration: 9s; }
.diamond:nth-child(5) { animation-delay: -4s; animation-duration: 6s; }
.diamond:nth-child(6) { animation-delay: -1.5s; animation-duration: 7.5s; }

/* ─── Mobile Menu ─── */
.mobile-menu { transition: opacity 0.4s ease; }
.mobile-menu.open { pointer-events: auto; opacity: 1; }
.mobile-menu.closed { pointer-events: none; opacity: 0; }
.mobile-nav-link { position: relative; }
.mobile-nav-link::after { content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 0; height: 1px; background: #059669; transition: width 0.3s ease; }
.mobile-nav-link:hover::after { width: 60%; }
.menu-line { transition: all 0.3s ease; }
.menu-toggle[aria-expanded="true"] .menu-line:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-line:nth-child(2) { top: 50%; transform: translateY(-50%) rotate(-45deg); }
.menu-toggle[aria-expanded="true"] { background: rgba(4,120,87,0.1); border-radius: 50%; }

/* ─── Typography ─── */
.label { display: block; font-family: 'Outfit', sans-serif; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: #059669; margin-bottom: 0.75rem; }

/* ─── Cards ─── */
.card { position: relative; }
.card::before { content: ''; position: absolute; inset: 0; border: 1px solid rgba(4,120,87,0.06); border-radius: 0; pointer-events: none; transition: border-color 0.5s ease; }
.card:hover::before { border-color: rgba(4,120,87,0.15); }

/* ─── Contact Form ─── */
.form-group { text-align: left; }
.form-label { display: block; font-family: 'Outfit', sans-serif; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 0.5rem; }
.form-input, .form-select, .form-textarea { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: white; padding: 0.875rem 1rem; font-size: 0.9375rem; font-weight: 200; transition: all 0.3s ease; outline: none; border-radius: 0; -webkit-appearance: none; }
.form-input::placeholder, .form-textarea::placeholder { color: rgba(255,255,255,0.2); }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: rgba(16,185,129,0.5); background: rgba(255,255,255,0.06); }
.form-select { cursor: pointer; }
.form-select option { background: #064E3B; color: white; }
.form-textarea { resize: vertical; min-height: 120px; }
.form-input.error, .form-textarea.error { border-color: rgba(239,68,68,0.5); }
.form-error { font-size: 0.75rem; color: #EF4444; margin-top: 0.375rem; display: none; }
.form-error.visible { display: block; }

/* ─── Back to Top ─── */
.back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 44px; height: 44px; background: #047857; color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; z-index: 30; border-radius: 0; }
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: #065F46; }

/* ─── Animations ─── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(45deg); }
    50% { transform: translateY(-12px) rotate(45deg); }
}

/* ─── Scroll Reveal ─── */
.reveal { opacity: 1; transform: translateY(0); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.revealed { opacity: 1; transform: translateY(0); }

/* ─── Contact Grid Pattern ─── */
.contact-grid-pattern {
    background-image: linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* ─── Focus Styles ─── */
:focus-visible { outline: 2px solid #10B981; outline-offset: 2px; }

/* ─── Responsive ─── */
@media (max-width: 767px) {
    .hero h1 { font-size: 2.75rem; }
    .hero h1 br { display: none; }
    .hero h1 span { display: inline; }
    .hero-content { padding: 0 1rem; }
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; }
}

/* ─── Print ─── */
@media print {
    .site-header, .mobile-menu, .back-to-top { display: none; }
    .hero { min-height: auto; padding: 2rem 0; background: #064E3B !important; }
    body { background: white; color: black; }
}
