/* ── Reset & Base ── */
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 80px; }
    body { margin: 0; -webkit-font-smoothing: antialiased; }
    img { max-width: 100%; height: auto; display: block; }
    a { text-decoration: none; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }

    /* ── Navbar ── */
    #navbar.scrolled {
        background: rgba(11, 29, 58, 0.95);
        backdrop-filter: blur(12px);
        box-shadow: 0 1px 20px rgba(0,0,0,0.3);
    }

    /* ── Mobile Menu ── */
    #mobileMenu.open { opacity: 1; pointer-events: all; }
    #mobileMenu.closed { opacity: 0; pointer-events: none; }
    .menu-line:nth-child(3) { width: 1.5rem; }
    #menuBtn[aria-expanded="true"] .menu-line:nth-child(1) {
        transform: translateY(4px) rotate(45deg);
    }
    #menuBtn[aria-expanded="true"] .menu-line:nth-child(2) {
        opacity: 0;
    }
    #menuBtn[aria-expanded="true"] .menu-line:nth-child(3) {
        width: 1.5rem;
        transform: translateY(-4px) rotate(-45deg);
    }

    /* ── Service Cards Hover ── */
    .service-card {
        transform: translateY(0);
    }
    .service-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 60px rgba(11, 29, 58, 0.3);
    }

    /* ── Gallery Items ── */
    .gallery-item {
        position: relative;
        overflow: hidden;
    }
    .gallery-item::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(11,29,58,0.3) 0%, transparent 50%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .gallery-item:hover::after {
        opacity: 1;
    }

    /* ── Scroll Reveal (progressive enhancement) ── */
    @media (prefers-reduced-motion: no-preference) {
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.7s ease, transform 0.7s ease;
        }
        .reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }
        .reveal-delay-1 { transition-delay: 0.1s; }
        .reveal-delay-2 { transition-delay: 0.2s; }
        .reveal-delay-3 { transition-delay: 0.3s; }
    }

    /* ── Reduced motion ── */
    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        .service-card:hover { transform: none; }
        .gallery-item img { transition: none; }
        .reveal { opacity: 1; transform: none; }
    }

    /* ── Focus styles ── */
    a:focus-visible, button:focus-visible {
        outline: 2px solid #D4A843;
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* ── Selection ── */
    ::selection {
        background: rgba(212, 168, 67, 0.3);
        color: #fff;
    }
</style>