*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; }

.skip-link { position: absolute; left: -9999px; top: 0; background: #C8A45C; color: #0A1F44; padding: 12px 24px; z-index: 100; font-weight: 600; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

/* ─── Header ─── */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(10,31,68,0.06);
    transition: box-shadow 0.3s ease;
}
.site-header.scrolled { box-shadow: 0 4px 24px rgba(10,31,68,0.10); }

/* ─── Hero ─── */
.hero { position: relative; }
.hero-bg { position: absolute; inset: 0; }
.hero-img { will-change: transform; transition: transform 6s ease; }
.hero:hover .hero-img { transform: scale(1.03); }
.hero-overlay {
    background: linear-gradient(135deg, rgba(4,12,32,0.88) 0%, rgba(10,31,68,0.78) 50%, rgba(10,31,68,0.70) 100%);
}
.hero-content { position: relative; z-index: 10; }

/* ─── Stat Cards ─── */
.stat-card {
    background: rgba(255,255,255,0.08);
    transition: background 0.3s ease, transform 0.3s ease;
}
.stat-card:hover {
    background: rgba(255,255,255,0.14);
    transform: translateY(-2px);
}

/* ─── Buttons ─── */
.btn-primary {
    background: #C8A45C;
    color: #0A1F44;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(200,164,92,0.35);
}
.btn-primary:hover { background: #D4B06A; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,164,92,0.45); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 12px;
    font-weight: 600;
    backdrop-filter: blur(8px);
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.btn-secondary:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); transform: translateY(-2px); }

/* ─── Service Cards ─── */
.service-card {
    background: #fff;
    border: 1px solid rgba(10,31,68,0.07);
    border-radius: 16px;
    padding: 2rem;
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.service-card:hover {
    box-shadow: 0 12px 40px rgba(10,31,68,0.12);
    transform: translateY(-4px);
    border-color: rgba(200,164,92,0.3);
}

/* ─── Safety Cards ─── */
.safety-card {
    background: #fff;
    border: 1px solid rgba(10,31,68,0.07);
    border-radius: 16px;
    padding: 1.75rem;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.safety-card:hover {
    box-shadow: 0 8px 32px rgba(10,31,68,0.10);
    transform: translateY(-2px);
}

/* ─── Contact Form ─── */
.contact-form { border: 1px solid rgba(10,31,68,0.07); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    box-shadow: 0 0 0 3px rgba(200,164,92,0.15);
}

/* ─── Mobile Menu ─── */
.mobile-menu { animation: slideDown 0.25s ease; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.mobile-link { display: block; padding: 0.5rem 0; }
.mobile-menu-btn .menu-line-1 { transform-origin: center; transition: transform 0.3s ease, opacity 0.2s ease; }
.mobile-menu-btn .menu-line-2 { transition: opacity 0.2s ease; }
.mobile-menu-btn .menu-line-3 { transform-origin: center; transition: transform 0.3s ease, opacity 0.2s ease; }
.mobile-menu-btn.active .menu-line-1 { transform: translateY(5px) rotate(45deg); }
.mobile-menu-btn.active .menu-line-2 { opacity: 0; }
.mobile-menu-btn.active .menu-line-3 { transform: translateY(-5px) rotate(-45deg); }

/* ─── Utility ─── */
::selection { background: rgba(200,164,92,0.3); color: #0A1F44; }
</style>