:root {
            --navy: #0A1F3D;
            --navy-deep: #071730;
            --steel: #1B5FA8;
            --gold: #C9A24B;
            --gold-light: #E4C978;
        }

        html {
            scroll-behavior: smooth;
        }
        body {
            background: #F6F7F9;
            color: #2B2F36;
            overflow-x: hidden;
        }
        html[dir="rtl"] body {
            font-family: 'Tajawal', sans-serif;
        }
        html[dir="ltr"] body {
            font-family: 'Inter', sans-serif;
        }
        html[dir="rtl"] .font-display {
            font-family: 'Cairo', sans-serif;
        }
        html[dir="ltr"] .font-display {
            font-family: 'Poppins', sans-serif;
        }

        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* Scroll progress */
        #scrollProgress {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            width: 0%;
            background: linear-gradient(90deg, var(--gold), var(--gold-light));
            z-index: 9999;
            transition: width .1s ease-out;
        }

        /* Reveal animations */
        .reveal {
            opacity: 0;
            transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1);
        }
        .reveal-up {
            transform: translateY(36px);
        }
        .reveal-left {
            transform: translateX(-48px);
        }
        .reveal-right {
            transform: translateX(48px);
        }
        .reveal-scale {
            transform: scale(.92);
        }
        .reveal.in-view {
            opacity: 1;
            transform: translate(0, 0) scale(1);
        }

        /* Hero */
        .hero-bg {
            background:
                linear-gradient(180deg, rgba(7, 23, 48, .88) 0%, rgba(10, 31, 61, .86) 45%, rgba(7, 23, 48, .96) 100%),
                url('https://images.unsplash.com/photo-1494412651409-8963ce7935a7?q=80&w=1920&auto=format&fit=crop') center center no-repeat;
            background-size: auto, 118%;
            animation: heroZoom 26s ease-in-out infinite alternate;
        }
        @keyframes heroZoom {
            from { background-size: auto, 118%; }
            to { background-size: auto, 132%; }
        }
        @media (prefers-reduced-motion: reduce) {
            .hero-bg { animation: none; }
        }
        .grid-overlay {
            background-image:
                linear-gradient(rgba(201, 162, 75, .08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(201, 162, 75, .08) 1px, transparent 1px);
            background-size: 44px 44px;
            mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
        }

        .float-slow {
            animation: float-y 6s ease-in-out infinite;
        }
        .float-slower {
            animation: float-y 9s ease-in-out infinite;
        }
        .float-med {
            animation: float-y 4.5s ease-in-out infinite;
        }
        @keyframes float-y {
            0%,
            100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-16px);
            }
        }

        /* Glass */
        .glass {
            background: rgba(255, 255, 255, .06);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(255, 255, 255, .14);
        }
        .glass-light {
            background: rgba(255, 255, 255, .7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, .6);
        }

        /* Buttons */
        .btn-primary {
            background: linear-gradient(135deg, var(--steel), #0A1F3D);
            color: #fff;
            position: relative;
            overflow: hidden;
            isolation: isolate;
            transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
            box-shadow: 0 10px 30px -12px rgba(27, 95, 168, .55);
        }
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 16px 34px -10px rgba(201, 162, 75, .45);
            background: linear-gradient(135deg, #164d8a, #071730);
        }
        .btn-gold {
            background: linear-gradient(135deg, var(--gold-light), var(--gold));
            color: #1a1200;
            transition: transform .35s ease, box-shadow .35s ease;
            box-shadow: 0 10px 26px -10px rgba(201, 162, 75, .6);
        }
        .btn-gold:hover {
            transform: translateY(-3px);
            box-shadow: 0 16px 34px -10px rgba(201, 162, 75, .75);
        }
        .btn-outline {
            border: 1.5px solid rgba(255, 255, 255, .55);
            color: #fff;
            transition: all .35s ease;
        }
        .btn-outline:hover {
            border-color: var(--gold-light);
            background: rgba(255, 255, 255, .08);
        }
        .btn-outline-navy {
            border: 1.5px solid rgba(10, 31, 61, .18);
            color: var(--navy);
            transition: all .3s ease;
        }
        .btn-outline-navy:hover {
            border-color: var(--gold);
            background: rgba(201, 162, 75, .08);
            color: var(--gold-600, #AD8636);
        }
        .btn-primary:active,
        .btn-gold:active,
        .btn-outline:active,
        .btn-outline-navy:active,
        .fa-btn:active,
        .lang-float:active {
            transform: scale(.95);
        }

        /* Service Cards - redesigned: icon-badge header instead of repeated stock photo */
        .service-card {
            background: #fff;
            border-radius: 28px;
            overflow: hidden;
            position: relative;
            border: 1px solid rgba(10, 31, 61, .06);
            transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease, border-color .45s ease;
            box-shadow: 0 10px 30px -18px rgba(10, 31, 61, .16);
            display: flex;
            flex-direction: column;
        }
        .service-card::before {
            content: '';
            position: absolute;
            inset: 0 0 auto 0;
            height: 4px;
            background: linear-gradient(90deg, var(--navy), var(--gold));
            transform: scaleX(0);
            transform-origin: right;
            transition: transform .5s cubic-bezier(.22, .61, .36, 1);
        }
        [dir="ltr"] .service-card::before { transform-origin: left; }
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 30px 55px -24px rgba(10, 31, 61, .32);
            border-color: rgba(201, 162, 75, .3);
        }
        .service-card:hover::before { transform: scaleX(1); }
        .service-card .service-icon-wrap {
            display: flex;
            justify-content: center;
            padding: 2.35rem 1.5rem 0;
        }
        .service-card .service-icon {
            width: 74px;
            height: 74px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--navy) 0%, #143257 100%);
            box-shadow: 0 14px 26px -12px rgba(10, 31, 61, .5);
            transition: transform .45s cubic-bezier(.22, .61, .36, 1), background .45s ease;
        }
        .service-card .service-icon svg { width: 32px; height: 32px; }
        .service-card:hover .service-icon {
            transform: scale(1.08) rotate(-4deg);
            background: linear-gradient(135deg, var(--gold) 0%, #b8903a 100%);
        }
        .service-card .service-body {
            padding: 1.4rem 1.5rem 1.5rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        .service-card .service-title {
            font-size: 1.25rem;
            font-weight: 800;
            color: var(--navy);
            margin-top: 0.25rem;
            margin-bottom: 0.5rem;
        }
        .service-card .service-desc {
            font-size: 0.9rem;
            color: #4a5058;
            line-height: 1.7;
            flex: 1;
        }
        .service-card .service-actions {
            margin-top: 1.25rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(10, 31, 61, .08);
            display: flex;
            gap: 0;
            width: 100%;
        }
        .service-card .service-actions .btn-action {
            flex: 1;
            padding: 0.6rem 0.4rem;
            font-size: 0.8rem;
            font-weight: 700;
            text-align: center;
            transition: all .3s ease;
            border: 1px solid rgba(10, 31, 61, .1);
            background: transparent;
            color: var(--navy);
            cursor: pointer;
            font-family: inherit;
        }
        .service-card .service-actions .btn-action:first-child {
            border-radius: 30px 0 0 30px;
            border-left: none;
        }
        .service-card .service-actions .btn-action:last-child {
            border-radius: 0 30px 30px 0;
        }
        .service-card .service-actions .btn-action:hover {
            background: var(--navy);
            color: #fff;
            border-color: var(--navy);
        }
        .service-card .service-actions .btn-action.btn-primary-action:hover {
            background: var(--gold);
            border-color: var(--gold);
            color: #1a1200;
        }

        /* Why Cards - redesigned: compact icon-badge card */
        .why-card {
            background: #fff;
            border-radius: 24px;
            overflow: hidden;
            padding: 2.1rem 1.35rem 1.6rem;
            text-align: center;
            border: 1px solid rgba(10, 31, 61, .06);
            box-shadow: 0 8px 26px -16px rgba(10, 31, 61, .14);
            transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, border-color .4s ease;
        }
        .why-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 24px 46px -20px rgba(10, 31, 61, .26);
            border-color: rgba(201, 162, 75, .3);
        }
        .why-card .why-icon {
            width: 62px;
            height: 62px;
            border-radius: 17px;
            margin: 0 auto 1.1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--gold) 0%, #b8903a 100%);
            box-shadow: 0 12px 22px -10px rgba(201, 162, 75, .55);
            transition: transform .4s cubic-bezier(.22, .61, .36, 1);
        }
        .why-card .why-icon svg { width: 28px; height: 28px; }
        .why-card:hover .why-icon {
            transform: scale(1.08) rotate(4deg);
        }
        .why-card .why-title {
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--navy);
        }

        /* Partner logos */
        .partner-logo {
            aspect-ratio: 3/2;
            object-fit: contain;
            background: #fff;
            border-radius: 22px;
            padding: 1.25rem;
            box-shadow: 0 8px 22px -12px rgba(10, 31, 61, .12);
            transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, border-color .4s ease;
            width: 100%;
            border: 1px solid rgba(10, 31, 61, .06);
        }
        .partner-logo:hover {
            transform: translateY(-6px) scale(1.02);
            box-shadow: 0 18px 36px -16px rgba(10, 31, 61, .2);
            border-color: rgba(201, 162, 75, .35);
        }

        /* Fixed action buttons */
        .fixed-actions {
            position: fixed;
            bottom: 1.5rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 300;
            display: flex;
            gap: 0.75rem;
            background: rgba(255, 255, 255, .85);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            padding: 0.6rem 1.2rem;
            border-radius: 60px;
            box-shadow: 0 12px 40px -12px rgba(7, 23, 48, .35);
            border: 1px solid rgba(255, 255, 255, .6);
            align-items: center;
        }
        .fixed-actions .fa-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0.5rem 1rem;
            border-radius: 40px;
            font-weight: 700;
            font-size: 0.8rem;
            transition: all .3s ease;
            border: none;
            background: transparent;
            color: var(--navy);
            cursor: pointer;
            text-decoration: none;
            font-family: inherit;
            white-space: nowrap;
        }
        .fixed-actions .fa-btn svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }
        .fixed-actions .fa-btn:hover {
            background: var(--navy);
            color: #fff;
            transform: translateY(-2px);
        }
        .fixed-actions .fa-btn.gold-btn {
            background: linear-gradient(135deg, var(--gold-light), var(--gold));
            color: #1a1200;
            box-shadow: 0 6px 18px -8px rgba(201, 162, 75, .5);
        }
        .fixed-actions .fa-btn.gold-btn:hover {
            background: linear-gradient(135deg, var(--gold), var(--gold-600));
            color: #1a1200;
            transform: translateY(-2px);
        }
        @media (max-width: 640px) {
            .fixed-actions {
                padding: 0.4rem 0.8rem;
                gap: 0.3rem;
                bottom: 0.8rem;
                width: 94%;
                justify-content: center;
                border-radius: 40px;
            }
            .fixed-actions .fa-btn {
                font-size: 0.65rem;
                padding: 0.3rem 0.6rem;
                gap: 3px;
            }
            .fixed-actions .fa-btn svg {
                width: 14px;
                height: 14px;
            }
        }
        @media (max-width: 420px) {
            .fixed-actions .fa-btn span {
                display: none;
            }
            .fixed-actions .fa-btn {
                padding: 0.4rem 0.7rem;
            }
        }

        /* Modals */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(7, 23, 48, .6);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            z-index: 400;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.25rem;
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s ease;
        }
        .modal-overlay.is-open {
            opacity: 1;
            pointer-events: auto;
        }
        .modal-panel {
            background: #fff;
            border-radius: 28px;
            width: 100%;
            max-width: 540px;
            max-height: 88vh;
            overflow-y: auto;
            transform: translateY(24px) scale(.97);
            opacity: 0;
            transition: transform .35s cubic-bezier(.22, .61, .36, 1), opacity .35s ease;
            box-shadow: 0 30px 80px -20px rgba(7, 23, 48, .5);
        }
        .modal-overlay.is-open .modal-panel {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
        .modal-close {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, .14);
            color: #fff;
            transition: background .3s ease, transform .3s ease;
            border: none;
            cursor: pointer;
        }
        .modal-close:hover {
            background: rgba(255, 255, 255, .28);
            transform: rotate(90deg);
        }
        body.modal-locked {
            overflow: hidden;
        }

        /* Coverage */
        .coverage-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 1rem;
        }
        .coverage-item {
            background: rgba(255, 255, 255, .06);
            border-radius: 16px;
            padding: 1rem 0.5rem;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, .08);
            transition: all .3s ease;
        }
        .coverage-item:hover {
            background: rgba(255, 255, 255, .12);
            border-color: var(--gold-light);
            transform: translateY(-4px);
        }

        /* Navbar */
        .nav-link {
            position: relative;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -6px;
            width: 0%;
            height: 2px;
            background: var(--gold);
            transition: width .35s ease;
        }
        .nav-link:hover::after {
            width: 100%;
        }

        /* ===== NAVBAR STATE (transparent-on-hero -> white-on-scroll) ===== */
        #navbar {
            background: transparent;
            border-bottom: 1px solid transparent;
        }
        #navbar.scrolled {
            background: rgba(255, 255, 255, .97);
            border-bottom: 1px solid rgba(10, 31, 61, .06);
            box-shadow: 0 8px 30px -18px rgba(7, 23, 48, .35);
        }
        #navbar .nav-link,
        #navbar .brand-title,
        #navbar .brand-sub,
        #navbar #menuBtn {
            color: #fff;
            transition: color .4s ease, border-color .4s ease;
        }
        #navbar .brand-sub { color: rgba(255, 255, 255, .7); }
        #navbar.scrolled .nav-link,
        #navbar.scrolled .brand-title,
        #navbar.scrolled #menuBtn {
            color: var(--navy);
        }
        #navbar.scrolled .brand-sub { color: var(--steel); }
        #navbar .nav-link::after { background: var(--gold-light); }
        #navbar.scrolled .nav-link::after { background: var(--gold); }
        #navbar .nav-link.active-link::after { width: 100%; }
        #navbar .nav-link.active-link { color: var(--gold-light); }
        #navbar.scrolled .nav-link.active-link { color: var(--gold-600, #AD8636); }

        /* Wider, more spacious navbar on desktop */
        #navbar .nav-container {
            max-width: 92rem;
        }
        @media (min-width: 1024px) {
            #navbar nav.main-nav {
                gap: 2.5rem;
            }
        }

        /* Mobile menu smooth slide */
        #mobileMenu {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height .45s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
        }
        #mobileMenu.menu-open {
            max-height: 640px;
            opacity: 1;
        }

        /* Clickable contact info */
        .contact-link {
            transition: color .25s ease, transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, background-color .25s ease;
        }
        .contact-link:hover {
            color: var(--gold-600, #AD8636);
            transform: translateY(-4px);
            box-shadow: 0 14px 28px -16px rgba(10, 31, 61, .25);
        }
        .contact-link:hover .contact-icon,
        a.contact-link:hover > div:first-child {
            transform: scale(1.08) rotate(-4deg);
        }
        a.contact-link > div:first-child {
            transition: transform .35s cubic-bezier(.22,.61,.36,1);
        }

        /* ===== MOBILE POLISH ===== */
        @media (max-width: 640px) {
            h1 { letter-spacing: -0.01em; }
            .service-card .service-body { padding: 1.25rem 1.15rem 1.1rem; }
            .service-card .service-title { font-size: 1.1rem; }
            .modal-panel { border-radius: 22px; max-height: 92vh; }
            section { scroll-margin-top: 88px; }
            .coverage-grid { gap: .7rem; }
        }
        html { scroll-padding-top: 96px; }

        /* ===== SITE LOGO =====
           The logo artwork is dark navy line-art on a transparent background,
           so it disappears against the dark hero / dark footer. A white
           circular "badge" plate behind it guarantees contrast everywhere. */
        .logo-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            border-radius: 50%;
            padding: 4px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .28), 0 0 0 1px rgba(10, 31, 61, .05);
            flex-shrink: 0;
            transition: box-shadow .4s ease, transform .35s ease;
        }
        .logo-link:hover .logo-badge {
            transform: scale(1.06);
            box-shadow: 0 8px 22px rgba(0, 0, 0, .32), 0 0 0 1px rgba(10, 31, 61, .08);
        }
        .site-logo {
            display: block;
            height: clamp(62px, 9vw, 78px);
            width: clamp(62px, 9vw, 78px);
            object-fit: contain;
            transition: height .4s ease, width .4s ease;
        }
        #navbar.scrolled .site-logo {
            height: clamp(54px, 7vw, 66px);
            width: clamp(54px, 7vw, 66px);
        }
        .footer-logo-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            border-radius: 50%;
            padding: 5px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
        }
        .footer-logo {
            display: block;
            height: 78px;
            width: 78px;
            object-fit: contain;
        }

        /* Ripple */
        .ripple {
            position: absolute;
            border-radius: 50%;
            transform: scale(0);
            animation: ripple-anim .65s linear;
            background: rgba(255, 255, 255, .5);
            pointer-events: none;
        }
        @keyframes ripple-anim {
            to {
                transform: scale(3.2);
                opacity: 0;
            }
        }

        /* ===== 2026 RESPONSIVE + CTA + FLOATING ACTION POLISH ===== */
        :root { --safe-bottom: env(safe-area-inset-bottom, 0px); }
        img { max-width: 100%; height: auto; }
        a, button { -webkit-tap-highlight-color: transparent; }
        .hero-bg { min-height: 100svh; }
        .cta-inline {
            margin-top: 2rem; padding: 1.1rem 1.2rem; border-radius: 18px;
            background: linear-gradient(135deg, rgba(10,31,61,.06), rgba(201,162,75,.10));
            border: 1px solid rgba(10,31,61,.08); display:flex; align-items:center; justify-content:space-between; gap:1rem;
        }
        .cta-inline strong { color:var(--navy); font-size:.95rem; }
        .cta-inline p { margin:.15rem 0 0; font-size:.8rem; color:#667085; }
        .cta-inline-actions { display:flex; gap:.6rem; flex-shrink:0; }
        .cta-mini-btn { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:.65rem 1rem; border-radius:999px; font-weight:800; font-size:.78rem; text-decoration:none; white-space:nowrap; }
        .cta-mini-primary { background:var(--navy); color:#fff; }
        .cta-mini-gold { background:var(--gold); color:#191308; }
        .coverage-cta { max-width:760px; margin:1.6rem auto 0; padding:1rem 1.2rem; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); border-radius:18px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
        .coverage-cta p { color:#fff; font-weight:700; margin:0; }
        .coverage-cta small { color:rgba(255,255,255,.62); display:block; margin-top:.25rem; }
        .partners-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.1rem; }
        .partner-card { min-height:142px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid rgba(10,31,61,.08); border-radius:22px; padding:1.1rem; box-shadow:0 10px 28px -20px rgba(10,31,61,.3); transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
        .partner-card:hover { transform:translateY(-6px); border-color:rgba(201,162,75,.45); box-shadow:0 22px 38px -22px rgba(10,31,61,.35); }
        .partner-card img { width:100%; height:105px; object-fit:contain; border-radius:16px; }
        .contact-number-list { display:grid; gap:.55rem; margin-top:.7rem; }
        .contact-number-list a { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.65rem .8rem; border-radius:11px; background:#fff; color:var(--navy); text-decoration:none; border:1px solid rgba(10,31,61,.07); }
        .contact-number-list small { color:#7a8492; }
        .fixed-actions { left:auto; transform:none; inset-inline-end:1.2rem; bottom:1.2rem; width:auto; padding:0; gap:.55rem; background:transparent; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; flex-direction:column; align-items:flex-end; }
        .fixed-actions .fa-btn { min-width:54px; min-height:54px; padding:.75rem 1rem; background:#fff; border:1px solid rgba(10,31,61,.08); box-shadow:0 10px 28px -12px rgba(7,23,48,.35); }
        .fixed-actions .fa-btn:hover { box-shadow:0 16px 34px -14px rgba(7,23,48,.45); }
        .fixed-actions .fa-btn.wa-btn { background:#159447; color:#fff; border-color:#159447; }
        .fixed-actions .fa-btn.wa-btn:hover { background:#117b3b; }
        .fixed-actions .fa-btn.top-btn { min-width:46px; min-height:46px; padding:.55rem; opacity:0; pointer-events:none; transform:translateY(8px); }
        .fixed-actions .fa-btn.top-btn.show { opacity:1; pointer-events:auto; transform:translateY(0); }
        .call-panel { position:fixed; inset-inline-end:1.2rem; bottom:10.7rem; z-index:310; width:min(320px,calc(100vw - 2rem)); background:#fff; border:1px solid rgba(10,31,61,.09); border-radius:20px; padding:.7rem; box-shadow:0 24px 60px -22px rgba(7,23,48,.55); opacity:0; pointer-events:none; transform:translateY(10px) scale(.98); transition:.25s ease; }
        .call-panel.open { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
        .call-panel-head { padding:.55rem .65rem .7rem; color:var(--navy); font-weight:900; font-size:.85rem; }
        .call-option { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.78rem .8rem; border-radius:13px; text-decoration:none; color:var(--navy); transition:.2s ease; }
        .call-option:hover { background:#F4F6F8; }
        .call-option b { direction:ltr; }
        body { padding-bottom:0; }
        @media (max-width: 1024px) {
            .partners-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
            .hero-bg { background-size:auto,cover; animation:none; background-position:center center; }
            #navbar .nav-container { padding-inline:1rem; }
        }
        @media (max-width: 768px) {
            .partners-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
            .partner-card { min-height:120px; padding:.8rem; border-radius:18px; }
            .partner-card img { height:88px; }
            .cta-inline, .coverage-cta { flex-direction:column; align-items:stretch; text-align:center; }
            .cta-inline-actions { justify-content:center; flex-wrap:wrap; }
            .coverage-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
            .hero-bg { min-height:100svh; }
            .hero-bg .max-w-3xl { max-width:100%; }
        }
        @media (max-width: 640px) {
            body { padding-bottom:calc(84px + var(--safe-bottom)); }
            #navbar .nav-container { padding-inline:.75rem; }
            #navInner { height:76px !important; }
            .site-logo { width:54px; height:54px; }
            #navbar.scrolled .site-logo { width:48px; height:48px; }
            .logo-badge { padding:3px; }
            #home .relative.z-10 { padding-top:6.5rem; padding-bottom:6.5rem; }
            #home h1 { font-size:clamp(2rem,10vw,2.65rem); line-height:1.23; }
            #home p { font-size:.98rem; }
            section { padding-top:4.5rem !important; padding-bottom:4.5rem !important; }
            .fixed-actions { inset-inline: .6rem; bottom:calc(.55rem + var(--safe-bottom)); width:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:.35rem; padding:.4rem; background:rgba(255,255,255,.94); border:1px solid rgba(10,31,61,.08); border-radius:20px; box-shadow:0 14px 38px -14px rgba(7,23,48,.38); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
            .fixed-actions .fa-btn { min-width:0; min-height:58px; padding:.42rem .35rem; border:0; box-shadow:none; border-radius:15px; flex-direction:column; gap:.2rem; font-size:.64rem; justify-content:center; }
            .fixed-actions .fa-btn svg { width:19px; height:19px; }
            .fixed-actions .fa-btn span { display:inline; }
            .fixed-actions .fa-btn.top-btn { min-width:0; min-height:58px; padding:.42rem .35rem; }
            .fixed-actions .fa-btn.top-btn:not(.show) { display:flex; opacity:.35; pointer-events:none; transform:none; }
            .call-panel { inset-inline:.7rem; bottom:calc(5.6rem + var(--safe-bottom)); width:auto; }
            .lang-float { bottom:calc(6rem + var(--safe-bottom)); inset-inline-end:.8rem; z-index:240; }
            .modal-overlay { padding:.6rem; align-items:flex-end; }
            .modal-panel { border-radius:22px 22px 14px 14px; max-height:90svh; }
            input, select, textarea { font-size:16px !important; }
        }
        
@media (min-width: 640px) and (max-width: 1023px) {
  .header-actions .header-call-btn { width:auto; height:46px; padding:.65rem .9rem; }
  .header-actions .header-call-btn span { display:inline; }
}

@media (max-width: 390px) {
            .coverage-grid { grid-template-columns:1fr 1fr; gap:.55rem; }
            .coverage-item { padding:.8rem .35rem; }
            .partners-grid { gap:.6rem; }
            .partner-card { min-height:104px; padding:.55rem; }
            .partner-card img { height:75px; }
            .fixed-actions .fa-btn span { display:inline; font-size:.6rem; }
        }


/* ===== FCD 2026 FINAL RESPONSIVE / RTL-LTR SYSTEM ===== */
:root { --header-h: 96px; --touch: 48px; }
html[dir="rtl"] body { text-align: right; }
html[dir="ltr"] body { text-align: left; }

/* Header: explicit semantic direction; hamburger follows document start side */
#navbar .nav-container { max-width: 94rem; }
.header-main { display:flex; align-items:center; gap:1rem; width:100%; }
.mobile-menu-trigger { flex:0 0 auto; width:48px; height:48px; align-items:center; justify-content:center; border-radius:14px; color:#fff; transition:.25s ease; }
#navbar.scrolled .mobile-menu-trigger { color:var(--navy); background:rgba(10,31,61,.045); }
.brand-link { display:flex; align-items:center; gap:.9rem; flex:0 1 auto; min-width:0; text-decoration:none; }
.site-logo { width:clamp(82px,7.4vw,112px); height:clamp(68px,6.1vw,92px); object-fit:contain; background:transparent !important; border-radius:0 !important; padding:0 !important; box-shadow:none !important; }
#navbar.scrolled .site-logo { width:clamp(74px,6.5vw,98px); height:clamp(60px,5.3vw,80px); }
.brand-copy { min-width:0; line-height:1.25; }
.brand-title { font-size:clamp(.96rem,1.3vw,1.18rem); font-weight:900; color:#fff; white-space:nowrap; }
.brand-sub { margin-top:.2rem; font-size:clamp(.68rem,.85vw,.78rem); color:rgba(255,255,255,.72); white-space:nowrap; }
#navbar.scrolled .brand-title { color:var(--navy); }
#navbar.scrolled .brand-sub { color:var(--steel); }
.main-nav { margin-inline:auto; gap:clamp(1.1rem,2vw,2.15rem); white-space:nowrap; }
.header-actions { display:flex; align-items:center; gap:.65rem; flex:0 0 auto; }
.header-call-btn, .lang-link, .mobile-lang-link { min-height:46px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-family:inherit; font-weight:800; font-size:.8rem; text-decoration:none; transition:.25s ease; }
.header-call-btn { gap:.45rem; padding:.7rem 1rem; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.10); color:#fff; cursor:pointer; }
.header-call-btn svg { width:18px; height:18px; }
.header-call-btn:hover { background:var(--gold); color:#17120a; border-color:var(--gold); transform:translateY(-2px); }
.lang-link { padding:.65rem .9rem; color:#fff; border:1px solid rgba(255,255,255,.22); }
#navbar.scrolled .header-call-btn { background:var(--navy); border-color:var(--navy); color:#fff; }
#navbar.scrolled .lang-link { color:var(--navy); border-color:rgba(10,31,61,.15); background:#fff; }
.mobile-menu-panel { background:#fff; border-top:1px solid rgba(10,31,61,.08); box-shadow:0 24px 46px -28px rgba(7,23,48,.45); }
.mobile-nav { padding:1rem 1.2rem 1.25rem; display:flex; flex-direction:column; gap:.25rem; color:var(--navy); }
.mobile-nav > a { display:flex; align-items:center; min-height:48px; padding:.65rem .75rem; border-radius:12px; }
.mobile-nav > a:hover { background:#f4f6f8; }
.mobile-nav-actions { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; padding-top:.65rem; margin-top:.4rem; border-top:1px solid rgba(10,31,61,.08); }
.mobile-nav-actions .header-call-btn { background:var(--navy); color:#fff; border-color:var(--navy); }
.mobile-lang-link { color:var(--navy); border:1px solid rgba(10,31,61,.12); }
html[dir="rtl"] .mobile-nav { text-align:right; direction:rtl; }
html[dir="ltr"] .mobile-nav { text-align:left; direction:ltr; }

/* Eliminate the old white circle behind logo everywhere */
.logo-badge, .footer-logo-badge { background:transparent !important; border-radius:0 !important; padding:0 !important; box-shadow:none !important; }
.footer-logo-wrap { display:inline-flex; align-items:center; background:transparent; }
.footer-logo { width:112px; height:90px; object-fit:contain; border-radius:0; }

/* Numbers: only the number is shown; visual affordance comes from icon/card */
.contact-number-list { gap:.65rem; }
.contact-number-list a.phone-number-link { min-height:52px; justify-content:flex-start; gap:.75rem; padding:.7rem .85rem; border-radius:14px; font-size:.98rem; font-weight:800; direction:ltr; }
.phone-row-icon { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(27,95,168,.08); color:var(--steel); font-size:.95rem; }
.contact-number-list b { letter-spacing:.035em; }

/* Fixed contacts: same physical side on Arabic and English to avoid visual split */
.fixed-actions { inset-inline-start:auto !important; inset-inline-end:auto !important; right:1.15rem !important; left:auto !important; transform:none !important; bottom:1.15rem; display:flex; flex-direction:column; gap:.55rem; align-items:flex-end; }
.fixed-actions .fa-btn { min-width:56px; min-height:56px; border-radius:18px; padding:.75rem 1rem; font-size:.75rem; box-shadow:0 14px 34px -17px rgba(7,23,48,.5); }
.fixed-actions .fa-btn.call-fab { background:#fff; color:var(--navy); }
.fixed-actions .fa-btn.wa-btn { background:#138a43; color:#fff; }
.fixed-actions .fa-btn.top-btn { background:rgba(255,255,255,.96); color:var(--navy); }
.call-panel { inset-inline-start:auto !important; inset-inline-end:auto !important; right:1.15rem !important; left:auto !important; bottom:9.5rem; width:min(330px,calc(100vw - 2rem)); }
.call-panel-head { text-align:inherit; }
.call-option { min-height:56px; display:grid; grid-template-columns:38px 1fr 28px; align-items:center; gap:.65rem; }
.call-option-icon { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:11px; background:#f0f4f8; color:var(--navy); }
.call-option b { font-size:1rem; letter-spacing:.035em; justify-self:start; }
.call-option-arrow { color:#8a94a3; justify-self:end; }
html[dir="rtl"] .call-panel { direction:rtl; text-align:right; }
html[dir="rtl"] .call-option b { direction:ltr; justify-self:end; }
html[dir="rtl"] .call-option-arrow { transform:scaleX(-1); justify-self:start; }
html[dir="ltr"] .call-panel { direction:ltr; text-align:left; }

/* Landing CTAs */
.lead-cta-section { padding:0 1rem 2rem; background:#f6f7f9; }
.lead-cta-card { border-radius:28px; padding:clamp(1.35rem,3vw,2.25rem); background:linear-gradient(120deg,#071730,#123e70); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:2rem; box-shadow:0 22px 50px -30px rgba(7,23,48,.62); }
.lead-cta-copy { max-width:720px; }
.lead-cta-kicker { display:inline-block; color:var(--gold-light); font-weight:900; font-size:.78rem; letter-spacing:.04em; margin-bottom:.45rem; }
.lead-cta-card h2 { font-family:'Cairo',sans-serif; font-size:clamp(1.35rem,2.4vw,2rem); line-height:1.35; font-weight:900; }
html[dir="ltr"] .lead-cta-card h2 { font-family:'Poppins',sans-serif; }
.lead-cta-card p { color:rgba(255,255,255,.7); margin-top:.45rem; line-height:1.75; }
.lead-cta-actions { display:flex; flex-wrap:wrap; gap:.7rem; flex:0 0 auto; }
.lead-cta-primary, .lead-cta-secondary { min-height:50px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:.75rem 1.15rem; font-weight:900; font-family:inherit; text-decoration:none; white-space:nowrap; cursor:pointer; }
.lead-cta-primary { background:var(--gold); color:#181208; }
.lead-cta-secondary { background:transparent; border:1px solid rgba(255,255,255,.35); color:#fff; }

/* Honeypot is visually absent but not display:none, which catches more basic bots */
.hp-field { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; white-space:nowrap !important; opacity:.001 !important; pointer-events:none !important; }
.hp-field input { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; }

/* Touch/focus */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid rgba(201,162,75,.55); outline-offset:3px; }
input, select, textarea { min-height:48px; }
textarea { min-height:112px; }

@media (max-width: 1180px) {
  .main-nav { gap:1.05rem; font-size:.86rem; }
  .brand-sub { display:none; }
  .site-logo { width:82px; height:68px; }
}
@media (max-width: 1023px) {
  .header-main { gap:.6rem; }
  .mobile-menu-trigger { display:flex; order:0; }
  .brand-link { order:1; margin-inline-end:auto; }
  .header-actions { order:2; }
  .brand-sub { display:block; }
  .header-call-btn span { display:none; }
  .header-call-btn { width:46px; height:46px; padding:0; }
  .lang-link { min-height:44px; padding:.55rem .75rem; }
  .lead-cta-card { flex-direction:column; align-items:stretch; }
  .lead-cta-actions { justify-content:flex-start; }
}
@media (max-width: 640px) {
  body { padding-bottom:calc(86px + var(--safe-bottom)); }
  #navInner { height:78px !important; }
  .header-main { gap:.42rem; }
  .mobile-menu-trigger { width:44px; height:44px; border-radius:12px; }
  .site-logo, #navbar.scrolled .site-logo { width:74px; height:60px; }
  .brand-title { font-size:.82rem; }
  .brand-sub { font-size:.57rem; max-width:128px; white-space:normal; line-height:1.35; }
  .header-actions { gap:.35rem; }
  .header-call-btn { width:42px; height:42px; min-height:42px; }
  .lang-link { min-height:42px; padding:.5rem .62rem; font-size:.67rem; }
  #home .relative.z-10 { padding-top:6.25rem; padding-bottom:5.75rem; }
  #home h1 { font-size:clamp(1.95rem,9.8vw,2.55rem); }
  .fixed-actions { inset-inline-start:auto !important; inset-inline-end:auto !important; right:.55rem !important; left:.55rem !important; bottom:calc(.55rem + var(--safe-bottom)); display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; padding:.4rem; background:rgba(255,255,255,.96); border:1px solid rgba(10,31,61,.08); border-radius:20px; box-shadow:0 14px 38px -14px rgba(7,23,48,.38); backdrop-filter:blur(16px); }
  .fixed-actions .fa-btn, .fixed-actions .fa-btn.top-btn { min-width:0; min-height:58px; padding:.42rem .35rem; border:0; box-shadow:none; border-radius:15px; flex-direction:column; gap:.18rem; justify-content:center; font-size:.62rem; }
  .fixed-actions .fa-btn svg { width:19px; height:19px; }
  .fixed-actions .fa-btn.top-btn:not(.show) { display:flex; opacity:.35; pointer-events:none; transform:none; }
  .call-panel { inset-inline-start:auto !important; inset-inline-end:auto !important; right:.65rem !important; left:.65rem !important; width:auto; bottom:calc(5.65rem + var(--safe-bottom)); }
  .lead-cta-section { padding:0 .75rem 1.25rem !important; }
  .lead-cta-card { border-radius:22px; gap:1.2rem; }
  .lead-cta-actions { display:grid; grid-template-columns:1fr; }
  .lead-cta-primary, .lead-cta-secondary { width:100%; }
  .contact-number-list a.phone-number-link { min-height:54px; font-size:.93rem; }
  .footer-logo { width:96px; height:76px; }
}
@media (max-width: 390px) {
  .brand-sub { display:none; }
  .brand-title { font-size:.78rem; }
  .site-logo, #navbar.scrolled .site-logo { width:70px; height:56px; }
  .lang-link { font-size:.61rem; padding:.42rem .52rem; }
}