body {
            font-family: "Cairo", system-ui, sans-serif;
            color: var(--wg-ink);
            background: #fff;
        }

        .navbar {
            backdrop-filter: blur(14px);
            background: rgba(255, 255, 255, .92);
            border-bottom: 1px solid var(--wg-line);
        }

        .brand-mark {
            width: 42px;
            height: 42px;
            display: inline-grid;
            place-items: center;
            color: #fff;
            background: linear-gradient(135deg, var(--wg-brand), #143c5a);
            border-radius: 8px;
            font-weight: 800;
        }

        .brand-logo {
            width: 42px;
            height: 42px;
            object-fit: contain;
        }

        .hero {
            min-height: 92vh;
            display: flex;
            align-items: center;
            padding: 110px 0 48px;
            background:
                linear-gradient(120deg, rgba(8, 42, 59, .88), rgba(11, 111, 106, .78)),
                url("https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=1800&q=85") center/cover;
            color: #fff;
        }

        .hero h1 {
            font-size: clamp(2.7rem, 6vw, 5.7rem);
            line-height: 1.05;
            font-weight: 800;
            letter-spacing: 0;
        }

        .hero p {
            max-width: 720px;
            color: rgba(255, 255, 255, .86);
            font-size: 1.15rem;
            line-height: 1.9;
        }

        .btn-brand {
            --bs-btn-bg: var(--wg-accent);
            --bs-btn-border-color: var(--wg-accent);
            --bs-btn-color: #211700;
            --bs-btn-hover-bg: #ffd063;
            --bs-btn-hover-border-color: #ffd063;
            font-weight: 800;
        }

        .metric {
            border-right: 1px solid rgba(255, 255, 255, .28);
        }

        .section-pad {
            padding: 88px 0;
        }

        .eyebrow {
            color: var(--wg-brand);
            font-weight: 800;
            margin-bottom: 10px;
        }

        .section-title {
            font-weight: 800;
            letter-spacing: 0;
        }

        .service-card,
        .project-card,
        .contact-panel {
            border: 1px solid var(--wg-line);
            border-radius: 8px;
            background: #fff;
            height: 100%;
        }

        .service-icon {
            width: 54px;
            height: 54px;
            display: inline-grid;
            place-items: center;
            border-radius: 8px;
            color: var(--wg-brand);
            background: var(--wg-soft);
            font-size: 1.5rem;
        }

        .project-thumb {
            aspect-ratio: 16 / 10;
            object-fit: cover;
            background: linear-gradient(135deg, #143c5a, #0b6f6a 52%, #f4b740);
        }

        .project-placeholder {
            aspect-ratio: 16 / 10;
            display: grid;
            place-items: center;
            color: #fff;
            background: linear-gradient(135deg, #143c5a, #0b6f6a 52%, #f4b740);
            font-size: 2.2rem;
            font-weight: 800;
        }

        .band {
            background: var(--wg-soft);
        }

        .form-control,
        .form-select {
            border-radius: 8px;
            padding: .85rem 1rem;
        }

        .site-footer {
            background: #0c1821;
            color: rgba(255, 255, 255, .76);
        }

        .footer-logo {
            width: 64px;
            height: 64px;
            object-fit: contain;
            padding: 6px;
            border: 1px solid rgba(255, 255, 255, .16);
            border-radius: 8px;
            background: rgba(255, 255, 255, .06);
        }

        .footer-mark {
            width: 64px;
            height: 64px;
            display: inline-grid;
            place-items: center;
            border-radius: 8px;
            color: #fff;
            background: linear-gradient(135deg, var(--wg-brand), #143c5a);
            font-size: 1.25rem;
            font-weight: 800;
        }

        .footer-title {
            color: #fff;
            font-weight: 800;
        }

        .footer-link {
            color: rgba(255, 255, 255, .72);
            text-decoration: none;
        }

        .footer-link:hover {
            color: #fff;
        }

        .footer-contact {
            display: flex;
            gap: .65rem;
            align-items: flex-start;
            margin-bottom: .8rem;
        }

        .footer-contact i {
            color: var(--wg-accent);
            margin-top: .15rem;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, .12);
        }

        @media (max-width: 767.98px) {
            .hero {
                min-height: auto;
                padding-top: 96px;
            }

            .metric {
                border-right: 0;
            }
        }