/* ========== CSS RESET & ROOT ========== */
        *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
        :root{
            --clr-bg:#fafaf8;
            --clr-bg-alt:#f2efe8;
            --clr-bg-card:#ffffff;
            --clr-border:#e4e0d6;
            --clr-gold:#b8860e;
            --clr-gold-light:#d4a223;
            --clr-gold-dark:#8b6206;
            --clr-white:#141413;
            --clr-text:#4a4845;
            --clr-text-light:#84817c;
            --clr-accent:#b8860e;
            --clr-whatsapp:#25D366;
            --clr-success:#2ecc71;
            --clr-error:#e74c3c;
            --radius-sm:6px;
            --radius:10px;
            --radius-lg:16px;
            --radius-xl:24px;
            --shadow-gold:0 8px 40px rgba(184,134,14,0.15);
            --shadow-card:0 4px 28px rgba(0,0,0,0.06);
            --transition:0.3s cubic-bezier(0.4,0,0.2,1);
            --font-en:'Inter',sans-serif;
            --font-ar:'Cairo',sans-serif;
            --max-width:1200px;
            --nav-h:80px;
        }
        html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
        body{
            font-family:var(--font-en);
            background:var(--clr-bg);
            color:var(--clr-text);
            line-height:1.7;
            overflow-x:hidden;
        }
        body.rtl{direction:rtl;font-family:var(--font-ar)}
        body.rtl .section-header .subtitle{font-family:var(--font-en)}
        ::selection{background:var(--clr-gold);color:#fff}

        /* ========== TYPOGRAPHY ========== */
        h1,h2,h3,h4{color:var(--clr-white);font-weight:700;line-height:1.2}
        h1{font-size:clamp(2.4rem,5vw,4rem)}
        h2{font-size:clamp(1.8rem,3.5vw,2.6rem)}
        h3{font-size:1.25rem}
        a{text-decoration:none;color:inherit}

        /* ========== UTILITY ========== */
        .container{max-width:var(--max-width);margin:0 auto;padding:0 1.5rem}
        .section-header{text-align:center;margin-bottom:3.5rem}
        .section-header .subtitle{
            display:inline-block;
            color:var(--clr-gold);
            text-transform:uppercase;
            font-weight:600;
            font-size:0.85rem;
            letter-spacing:3px;
            margin-bottom:0.75rem;
        }
        .section-header h2{position:relative}
        .section-header h2::after{
            content:'';
            display:block;
            width:60px;height:3px;
            background:var(--clr-gold);
            margin:1rem auto 0;
            border-radius:2px;
        }
        .text-gold{color:var(--clr-gold)}
        .btn{
            display:inline-flex;align-items:center;gap:0.6rem;
            padding:0.9rem 2rem;
            font-weight:600;font-size:0.95rem;
            border-radius:var(--radius);
            cursor:pointer;border:none;
            transition:var(--transition);
            font-family:inherit;
            white-space:nowrap;
        }
        .btn-primary{
            background:var(--clr-gold);
            color:#fff;
            box-shadow:0 8px 32px rgba(184,134,14,0.28);
        }
        .btn-primary:hover{
            background:var(--clr-gold-light);
            transform:translateY(-2px);
            box-shadow:0 14px 44px rgba(184,134,14,0.45);
        }
        .btn-outline{
            background:transparent;
            color:var(--clr-white);
            border:2px solid var(--clr-border);
        }
        .btn-outline:hover{
            border-color:var(--clr-gold);
            color:var(--clr-gold);
            transform:translateY(-2px);
        }
        .btn-whatsapp{
            background:var(--clr-whatsapp);
            color:#fff;
            box-shadow:0 8px 25px rgba(37,211,102,0.2);
        }
        .btn-whatsapp:hover{
            transform:translateY(-2px);
            box-shadow:0 12px 35px rgba(37,211,102,0.35);
        }
        .btn-lg{padding:1.1rem 2.8rem;font-size:1.05rem;border-radius:var(--radius-lg)}

        /* ========== NAVIGATION ========== */
        .nav{
            position:fixed;top:0;left:0;right:0;z-index:1000;
            height:var(--nav-h);
            background:rgba(255,255,255,0.88);
            backdrop-filter:blur(20px);
            -webkit-backdrop-filter:blur(20px);
            border-bottom:1px solid var(--clr-border);
            transition:var(--transition);
        }
        .nav.scrolled{background:rgba(255,255,255,0.97);border-bottom-color:rgba(184,134,14,0.3)}
        .nav .container{
            display:flex;align-items:center;justify-content:space-between;
            height:100%;
        }
        .nav-logo{
            display:flex;align-items:center;gap:0.6rem;
            font-weight:800;font-size:1.2rem;color:var(--clr-white);
        }
        .atlal-logo{
            width:150px;
            height:auto;
            max-height:60px;
            object-fit:contain;
            display:block;
        }
        .nav-logo .logo-icon{
            width:42px;height:42px;
            background:linear-gradient(135deg,var(--clr-gold),var(--clr-gold-dark));
            border-radius:var(--radius-sm);
            display:flex;align-items:center;justify-content:center;
            font-size:1.3rem;color:#fff;
            flex-shrink:0;
        }
        .nav-logo span{font-size:0.82rem;color:var(--clr-gold);display:block;font-weight:500;line-height:1}
        .nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
        .nav-links a{
            font-size:0.88rem;font-weight:500;
            color:var(--clr-text);
            transition:var(--transition);
            position:relative;
        }
        .nav-links a::after{
            content:'';position:absolute;
            bottom:-4px;left:0;width:0;height:2px;
            background:var(--clr-gold);transition:var(--transition);
        }
        .nav-links a:hover{color:var(--clr-white)}
        .nav-links a:hover::after{width:100%}
        .nav-actions{display:flex;align-items:center;gap:0.75rem}
        .nav-phone{
            display:flex;align-items:center;gap:0.4rem;
            color:var(--clr-white);font-weight:600;font-size:0.9rem;
        }
        .nav-phone i{color:var(--clr-gold)}
        .lang-toggle{
            background:var(--clr-bg-card);border:1px solid var(--clr-border);
            color:var(--clr-white);padding:0.4rem 0.75rem;
            border-radius:var(--radius-sm);cursor:pointer;
            font-size:0.82rem;font-weight:600;
            transition:var(--transition);
            font-family:inherit;
        }
        .lang-toggle:hover{border-color:var(--clr-gold);color:var(--clr-gold)}
        .mobile-toggle{
            display:none;background:none;border:none;
            color:var(--clr-white);font-size:1.6rem;cursor:pointer;
        }

        /* ========== HERO ========== */
        .hero{
            min-height:100vh;
            display:flex;align-items:center;
            position:relative;
            padding:calc(var(--nav-h) + 3rem) 0 5rem;
            overflow:hidden;
        }
        .hero-bg{
            position:absolute;inset:0;z-index:0;
            background:
                radial-gradient(ellipse 80% 60% at 30% 20%, rgba(184,134,14,0.08) 0%, transparent 60%),
                radial-gradient(ellipse 60% 50% at 70% 70%, rgba(184,134,14,0.04) 0%, transparent 50%),
                var(--clr-bg);
        }
        .hero-pattern{
            position:absolute;inset:0;z-index:1;opacity:0.03;
            background-image:
                linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
            background-size:60px 60px;
        }
        .hero-drill-icon{
            position:absolute;z-index:0;
            font-size:28rem;color:rgba(184,134,14,0.015);
            right:-8%;top:50%;transform:translateY(-50%);
            pointer-events:none;
        }
        .hero .container{position:relative;z-index:2}
        .hero-grid{
            display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;
        }
        .hero-badge{
            display:inline-flex;align-items:center;gap:0.5rem;
            background:rgba(184,134,14,0.1);border:1px solid rgba(184,134,14,0.25);
            color:var(--clr-gold);padding:0.5rem 1.1rem;
            border-radius:50px;font-size:0.85rem;font-weight:600;
            margin-bottom:1.5rem;
            animation:fadeInUp 0.6s ease-out;
        }
        .hero-badge .dot{
            width:8px;height:8px;border-radius:50%;
            background:var(--clr-gold);
            animation:pulse-dot 2s infinite;
        }
        .hero h1{margin-bottom:1.25rem;animation:fadeInUp 0.6s ease-out 0.1s both}
        .hero-desc{
            font-size:1.1rem;color:var(--clr-text);
            margin-bottom:2rem;max-width:500px;
            animation:fadeInUp 0.6s ease-out 0.2s both;
        }
        .hero-cta{
            display:flex;flex-wrap:wrap;gap:1rem;
            animation:fadeInUp 0.6s ease-out 0.3s both;
        }
        .hero-trust{
            display:flex;gap:2.5rem;margin-top:3rem;flex-wrap:wrap;
            animation:fadeInUp 0.6s ease-out 0.4s both;
        }
        .hero-trust-item{text-align:center}
        .hero-trust-item .num{
            font-size:2.2rem;font-weight:800;color:var(--clr-white);
        }
        .hero-trust-item .num span{color:var(--clr-gold)}
        .hero-trust-item .lbl{font-size:0.8rem;color:var(--clr-text-light);margin-top:0.2rem}
        .hero-visual{
            position:relative;
            display:flex;align-items:center;justify-content:center;
            animation:fadeInRight 0.8s ease-out;
        }
        .hero-visual .drill-circle{
            width:320px;height:320px;
            border-radius:50%;
            background:linear-gradient(135deg,rgba(184,134,14,0.08),rgba(184,134,14,0.02));
            border:1px solid rgba(184,134,14,0.2);
            display:flex;align-items:center;justify-content:center;
            position:relative;
            box-shadow:var(--shadow-gold);
        }
        .hero-visual .drill-circle i{
            font-size:7rem;color:var(--clr-gold);
            filter:drop-shadow(0 0 32px rgba(184,134,14,0.35));
        }
        .hero-visual .orbit-ring{
            position:absolute;border-radius:50%;
            border:1px dashed rgba(184,134,14,0.15);
            animation:spin 30s linear infinite;
        }
        .hero-visual .orbit-ring:nth-child(2){width:380px;height:380px;animation-duration:40s}
        .hero-visual .orbit-ring:nth-child(3){width:440px;height:440px;animation-duration:50s;animation-direction:reverse}
        .hero-visual .floating-card{
            position:absolute;
            background:var(--clr-bg-card);
            border:1px solid var(--clr-border);
            border-radius:var(--radius);
            padding:0.75rem 1rem;
            display:flex;align-items:center;gap:0.6rem;
            box-shadow:var(--shadow-card);
            font-size:0.82rem;color:var(--clr-white);
            animation:float 6s ease-in-out infinite;
        }
        .hero-visual .floating-card:nth-child(4){top:5%;right:-20px;animation-delay:0s}
        .hero-visual .floating-card:nth-child(5){bottom:10%;left:-30px;animation-delay:2s}
        .hero-visual .floating-card:nth-child(6){top:40%;right:-50px;animation-delay:4s}
        .hero-visual .floating-card i{color:var(--clr-gold)}

        /* ========== SERVICES ========== */
        .services{
            padding:6rem 0;
            background:var(--clr-bg-alt);
            position:relative;
        }
        .services-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
            gap:1.5rem;
        }
        .service-card{
            background:var(--clr-bg-card);
            border:1px solid var(--clr-border);
            border-radius:var(--radius-lg);
            padding:2rem 1.5rem;
            transition:var(--transition);
            position:relative;
            overflow:hidden;
            cursor:default;
        }
        .service-card::before{
            content:'';position:absolute;
            top:0;left:0;right:0;height:3px;
            background:linear-gradient(90deg,var(--clr-gold),transparent);
            opacity:0;transition:var(--transition);
        }
        .service-card:hover{
            border-color:var(--clr-gold);
            transform:translateY(-6px);
            box-shadow:var(--shadow-gold);
        }
        .service-card:hover::before{opacity:1}
        .service-icon{
            width:56px;height:56px;
            background:rgba(184,134,14,0.1);
            border-radius:var(--radius);
            display:flex;align-items:center;justify-content:center;
            font-size:1.5rem;color:var(--clr-gold);
            margin-bottom:1.25rem;
            transition:var(--transition);
        }
        .service-card:hover .service-icon{
            background:var(--clr-gold);
            color:#fff;
        }
        .service-card h3{margin-bottom:0.6rem}
        .service-card p{font-size:0.9rem;color:var(--clr-text-light);margin-bottom:1rem}
        .service-card .learn-more{
            color:var(--clr-gold);font-weight:600;font-size:0.85rem;
            display:inline-flex;align-items:center;gap:0.3rem;
            transition:var(--transition);
        }
        .service-card .learn-more:hover{gap:0.6rem}

        /* ========== STATS BAR ========== */
        .stats-bar{
            padding:3rem 0;
            background:linear-gradient(135deg,var(--clr-bg-card),var(--clr-bg));
            border-top:1px solid var(--clr-border);
            border-bottom:1px solid var(--clr-border);
        }
        .stats-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
            gap:2rem;text-align:center;
        }
        .stat-item .stat-num{
            font-size:2.8rem;font-weight:800;color:var(--clr-white);
            line-height:1;
        }
        .stat-item .stat-suffix{color:var(--clr-gold)}
        .stat-item .stat-label{
            font-size:0.85rem;color:var(--clr-text-light);margin-top:0.4rem;
        }

        /* ========== WHY US ========== */
        .why-us{padding:6rem 0;position:relative}
        .why-us-grid{
            display:grid;
            grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
        }
        .why-us-features{display:flex;flex-direction:column;gap:1.25rem}
        .feature-item{
            display:flex;gap:1.25rem;align-items:flex-start;
            padding:1.25rem;
            background:var(--clr-bg-card);
            border:1px solid var(--clr-border);
            border-radius:var(--radius);
            transition:var(--transition);
        }
        .feature-item:hover{border-color:rgba(184,134,14,0.4);transform:translateX(6px)}
        .feature-icon{
            width:48px;height:48px;min-width:48px;
            background:rgba(184,134,14,0.1);
            border-radius:var(--radius-sm);
            display:flex;align-items:center;justify-content:center;
            color:var(--clr-gold);font-size:1.2rem;
        }
        .feature-text h4{font-size:1rem;margin-bottom:0.25rem}
        .feature-text p{font-size:0.85rem;color:var(--clr-text-light)}
        .why-us-image{
            position:relative;
            display:flex;align-items:center;justify-content:center;
        }
        .why-us-image .img-box{
            width:100%;max-width:440px;aspect-ratio:1;
            background:linear-gradient(135deg,rgba(184,134,14,0.06),rgba(184,134,14,0.01));
            border:1px solid var(--clr-border);
            border-radius:var(--radius-xl);
            display:flex;align-items:center;justify-content:center;
            position:relative;
            overflow:hidden;
        }
        .why-us-image .img-box i{
            font-size:8rem;color:var(--clr-gold);
            filter:drop-shadow(0 0 44px rgba(184,134,14,0.3));
        }
        .why-us-image .exp-badge{
            position:absolute;bottom:1.5rem;right:1.5rem;
            background:var(--clr-gold);color:#fff;
            padding:0.6rem 1.2rem;border-radius:var(--radius);
            font-weight:800;font-size:0.85rem;
            box-shadow:0 8px 34px rgba(184,134,14,0.35);
        }

        /* ========== SERVICE AREAS ========== */
        .areas{padding:6rem 0;background:var(--clr-bg-alt)}
        .areas-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
            gap:1rem;
        }
        .area-tag{
            background:var(--clr-bg-card);
            border:1px solid var(--clr-border);
            border-radius:var(--radius);
            padding:0.9rem 1.25rem;
            display:flex;align-items:center;gap:0.6rem;
            font-weight:500;font-size:0.9rem;
            transition:var(--transition);
        }
        .area-tag i{color:var(--clr-gold);font-size:0.8rem}
        .area-tag:hover{border-color:var(--clr-gold);color:var(--clr-white)}

        /* ========== QUOTE / CONTACT ========== */
        .quote{padding:6rem 0;position:relative}
        .quote-grid{
            display:grid;grid-template-columns:1fr 1fr;gap:3rem;
            background:var(--clr-bg-card);
            border:1px solid var(--clr-border);
            border-radius:var(--radius-xl);
            padding:3rem;
            box-shadow:var(--shadow-card);
        }
        .quote-info h2{margin-bottom:1rem}
        .quote-info p{margin-bottom:2rem;color:var(--clr-text-light)}
        .quote-contact-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}
        .quote-contact-item{
            display:flex;align-items:center;gap:0.75rem;
            font-size:0.95rem;color:var(--clr-white);
        }
        .quote-contact-item i{
            width:36px;height:36px;
            background:rgba(184,134,14,0.1);
            border-radius:50%;
            display:flex;align-items:center;justify-content:center;
            color:var(--clr-gold);font-size:0.9rem;
        }
        .quote-social{display:flex;gap:0.75rem}
        .quote-social a{
            width:44px;height:44px;
            background:var(--clr-bg);
            border:1px solid var(--clr-border);
            border-radius:50%;
            display:flex;align-items:center;justify-content:center;
            color:var(--clr-text);
            transition:var(--transition);
            font-size:1.05rem;
        }
        .quote-social a:hover{color:var(--clr-gold);border-color:var(--clr-gold)}
        .quote-form{display:flex;flex-direction:column;gap:1rem}
        .form-group{position:relative}
        .form-group input,
        .form-group select,
        .form-group textarea{
            width:100%;
            padding:0.9rem 1rem;
            background:var(--clr-bg);
            border:1px solid var(--clr-border);
            border-radius:var(--radius);
            color:var(--clr-white);
            font-family:inherit;
            font-size:0.9rem;
            transition:var(--transition);
            outline:none;
        }
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus{
            border-color:var(--clr-gold);
            box-shadow:0 0 0 3px rgba(184,134,14,0.08);
        }
        .form-group textarea{resize:vertical;min-height:100px}
        .form-group select{appearance:none;cursor:pointer}
        .form-group select option{background:var(--clr-bg-card);color:var(--clr-white)}
        .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
        .form-submit{
            display:flex;align-items:center;gap:0.75rem;margin-top:0.5rem;
        }
        .form-success{
            display:none;align-items:center;gap:0.5rem;
            color:var(--clr-success);font-weight:600;font-size:0.9rem;
        }
        .form-success.show{display:flex}

        /* ========== CTA BANNER ========== */
        .cta-banner{
            padding:5rem 0;
            text-align:center;
            background:linear-gradient(135deg,rgba(184,134,14,0.06),rgba(184,134,14,0.01));
            border-top:1px solid var(--clr-border);
            border-bottom:1px solid var(--clr-border);
        }
        .cta-banner h2{margin-bottom:1rem}
        .cta-banner p{margin-bottom:2rem;font-size:1.05rem;color:var(--clr-text-light);max-width:600px;margin-inline:auto}
        .cta-banner .btn-group{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem}

        /* ========== FOOTER ========== */
        .footer{
            padding:3rem 0 1.5rem;
            background:var(--clr-bg-alt);
            border-top:1px solid var(--clr-border);
        }
        .footer-grid{
            display:grid;
            grid-template-columns:2fr 1fr 1fr;
            gap:2.5rem;
            margin-bottom:2.5rem;
        }
        .footer-brand .nav-logo{margin-bottom:1rem}
        .footer-brand p{font-size:0.85rem;color:var(--clr-text-light);max-width:280px}
        .footer h4{font-size:0.9rem;margin-bottom:1.25rem;text-transform:uppercase;letter-spacing:1px}
        .footer-links{list-style:none;display:flex;flex-direction:column;gap:0.6rem}
        .footer-links a{color:var(--clr-text-light);font-size:0.85rem;transition:var(--transition)}
        .footer-links a:hover{color:var(--clr-gold)}
        .footer-bottom{
            border-top:1px solid var(--clr-border);
            padding-top:1.5rem;
            display:flex;justify-content:space-between;
            font-size:0.8rem;color:var(--clr-text-light);
            flex-wrap:wrap;gap:0.5rem;
        }

        /* ========== FLOATING WHATSAPP ========== */
        .whatsapp-float{
            position:fixed;bottom:2rem;right:2rem;z-index:999;
            width:60px;height:60px;
            background:var(--clr-whatsapp);
            border-radius:50%;
            display:flex;align-items:center;justify-content:center;
            font-size:1.8rem;color:#fff;
            box-shadow:0 8px 30px rgba(37,211,102,0.35);
            transition:var(--transition);
            animation:pulse-wa 2.5s infinite;
        }
        .whatsapp-float:hover{
            transform:scale(1.1);
            box-shadow:0 12px 40px rgba(37,211,102,0.5);
            animation:none;
        }
        .whatsapp-float .tooltip-text{
            position:absolute;right:70px;
            background:var(--clr-bg-card);color:var(--clr-white);
            padding:0.5rem 1rem;border-radius:var(--radius);
            font-size:0.8rem;font-weight:600;
            white-space:nowrap;
            opacity:0;pointer-events:none;
            transition:var(--transition);
            border:1px solid var(--clr-border);
        }
        .whatsapp-float:hover .tooltip-text{opacity:1}

        /* ========== MOBILE NAV ========== */
        .mobile-nav{
            position:fixed;top:0;right:-100%;width:300px;height:100vh;
            background:var(--clr-bg-card);z-index:1100;
            padding:2rem;
            transition:0.4s cubic-bezier(0.4,0,0.2,1);
            border-left:1px solid var(--clr-border);
            display:flex;flex-direction:column;gap:1.5rem;
        }
        .mobile-nav.open{right:0}
        .mobile-nav .close-btn{
            align-self:flex-end;background:none;border:none;
            color:var(--clr-white);font-size:1.5rem;cursor:pointer;
        }
        .mobile-nav-links{list-style:none;display:flex;flex-direction:column;gap:1rem}
        .mobile-nav-links a{
            color:var(--clr-white);font-size:1.1rem;font-weight:600;
            display:block;padding:0.5rem 0;
        }
        .overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1050;display:none}
        .overlay.show{display:block}

        /* ========== ANIMATIONS ========== */
        @keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
        @keyframes fadeInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
        @keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:0.3}}
        @keyframes pulse-wa{0%,100%{box-shadow:0 8px 30px rgba(37,211,102,0.35)}50%{box-shadow:0 8px 50px rgba(37,211,102,0.6)}}
        @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
        @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

        .reveal{opacity:0;transform:translateY(40px);transition:0.7s cubic-bezier(0.4,0,0.2,1)}
        .reveal.visible{opacity:1;transform:translateY(0)}

        /* ========== RESPONSIVE ========== */
        @media(max-width:1024px){
            .hero-grid{grid-template-columns:1fr;text-align:center}
            .hero-desc{margin-inline:auto}
            .hero-cta{justify-content:center}
            .hero-trust{justify-content:center}
            .hero-visual{order:-1}
            .hero-visual .drill-circle{width:240px;height:240px}
            .hero-visual .drill-circle i{font-size:5rem}
            .hero-visual .orbit-ring:nth-child(2){width:290px;height:290px}
            .hero-visual .orbit-ring:nth-child(3){width:340px;height:340px}
            .why-us-grid{grid-template-columns:1fr;gap:2rem}
            .quote-grid{grid-template-columns:1fr;padding:2rem}
            .footer-grid{grid-template-columns:1fr 1fr}
        }
        @media(max-width:768px){
            .nav-links,.nav-actions .btn,.nav-phone{display:none}
            .mobile-toggle{display:block}
            .services-grid{grid-template-columns:1fr}
            .areas-grid{grid-template-columns:1fr 1fr}
            .form-row{grid-template-columns:1fr}
            .footer-grid{grid-template-columns:1fr}
            .footer-bottom{flex-direction:column;text-align:center}
            .hero-trust{gap:1.5rem}
            .hero-trust-item .num{font-size:1.6rem}
            .whatsapp-float{width:50px;height:50px;font-size:1.5rem;bottom:1.5rem;right:1.5rem}
            .stats-grid{grid-template-columns:1fr 1fr}
        }
        @media(max-width:480px){
            .atlal-logo{width:125px}
            .hero-visual .drill-circle{width:180px;height:180px}
            .hero-visual .drill-circle i{font-size:3.5rem}
            .hero-visual .orbit-ring:nth-child(2){width:220px;height:220px}
            .hero-visual .orbit-ring:nth-child(3){width:260px;height:260px}
            .hero-visual .floating-card{font-size:0.7rem;padding:0.5rem 0.75rem}
            .areas-grid{grid-template-columns:1fr}
        }
    

/* ========== MULTI-PAGE ADDITIONS ========== */
.page-hero{padding:calc(var(--nav-h) + 4rem) 0 4rem;background:radial-gradient(ellipse 80% 100% at 20% 0%,rgba(184,134,14,.10),transparent 65%),var(--clr-bg);border-bottom:1px solid var(--clr-border)}
.page-hero h1{max-width:780px;margin-bottom:1rem}.page-hero p{max-width:700px;color:var(--clr-text-light);font-size:1.05rem}.breadcrumb{display:flex;gap:.55rem;align-items:center;color:var(--clr-text-light);font-size:.82rem;margin-bottom:1.4rem}.breadcrumb a:hover{color:var(--clr-gold)}
.content-section{padding:6rem 0}.content-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:center}.content-section.alt{background:var(--clr-bg-alt)}.content-section h2{margin-bottom:1rem}.content-section p{color:var(--clr-text-light);margin-bottom:1rem}.content-section ul{list-style:none;display:grid;gap:.8rem;margin:1.5rem 0}.content-section li{display:flex;gap:.7rem;align-items:flex-start}.content-section li i{color:var(--clr-gold);margin-top:.35rem}.visual-panel{min-height:330px;border:1px solid var(--clr-border);border-radius:var(--radius-xl);background:linear-gradient(135deg,rgba(184,134,14,.12),rgba(184,134,14,.02));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.visual-panel>i{font-size:8rem;color:var(--clr-gold);filter:drop-shadow(0 0 32px rgba(184,134,14,.28))}.visual-panel .panel-label{position:absolute;bottom:1.2rem;right:1.2rem;background:var(--clr-gold);color:#fff;padding:.6rem 1rem;border-radius:var(--radius);font-weight:700;font-size:.85rem}.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.faq-card{padding:2rem;background:var(--clr-bg-card);border:1px solid var(--clr-border);border-radius:var(--radius-lg);transition:var(--transition)}.faq-card:hover{transform:translateY(-5px);border-color:var(--clr-gold);box-shadow:var(--shadow-gold)}.faq-card h3{margin-bottom:.55rem}.faq-card p{font-size:.9rem;color:var(--clr-text-light)}.service-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.service-detail{padding:2rem;background:var(--clr-bg-card);border:1px solid var(--clr-border);border-radius:var(--radius-lg);transition:var(--transition)}.service-detail:hover{transform:translateY(-5px);border-color:var(--clr-gold);box-shadow:var(--shadow-gold)}.service-detail .service-icon{margin-bottom:1rem}.service-detail h3{margin-bottom:.55rem}.service-detail p{font-size:.9rem;color:var(--clr-text-light)}.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:2rem}.contact-card{padding:1.35rem;background:var(--clr-bg-card);border:1px solid var(--clr-border);border-radius:var(--radius);display:flex;gap:.9rem;align-items:flex-start}.contact-card i{color:var(--clr-gold);font-size:1.25rem;margin-top:.15rem}.contact-card strong{display:block;color:var(--clr-white);margin-bottom:.2rem}.contact-card span{font-size:.85rem;color:var(--clr-text-light)}.area-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}.area-detail{padding:1.4rem;background:var(--clr-bg-card);border:1px solid var(--clr-border);border-radius:var(--radius);display:flex;gap:.8rem}.area-detail i{color:var(--clr-gold);margin-top:.3rem}.area-detail h3{font-size:1rem;margin-bottom:.25rem}.area-detail p{font-size:.82rem;color:var(--clr-text-light)}.notice{padding:1rem 1.2rem;background:rgba(184,134,14,.08);border:1px solid rgba(184,134,14,.22);border-radius:var(--radius);color:var(--clr-text);margin-top:1.5rem}.nav-links a.active{color:var(--clr-gold)}
@media(max-width:900px){.content-grid{grid-template-columns:1fr;gap:2rem}.content-grid .visual-panel{order:-1}}

/* Kuwaiti Arabic RTL polish */
html[dir="rtl"] body{font-family:var(--font-ar);text-align:right}html[dir="rtl"] .nav-links a::after{left:auto;right:0}html[dir="rtl"] .hero{text-align:right}html[dir="rtl"] .hero-cta,html[dir="rtl"] .form-submit{flex-direction:row-reverse}html[dir="rtl"] .hero-trust-item{text-align:center}html[dir="rtl"] .feature-item:hover{transform:translateX(-6px)}html[dir="rtl"] .floating-card{direction:rtl}html[dir="rtl"] .breadcrumb{flex-direction:row-reverse}html[dir="rtl"] .learn-more i,html[dir="rtl"] .btn i{transform:scaleX(-1)}html[dir="rtl"] .quote-contact-item,html[dir="rtl"] .area-detail,html[dir="rtl"] .content-section li{flex-direction:row}html[dir="rtl"] .footer-bottom{direction:rtl}html[dir="rtl"] input,html[dir="rtl"] select,html[dir="rtl"] textarea{text-align:right}


/* ========== MOBILE UX REFINEMENT: ARABIC + ENGLISH ========== */
html { overflow-x: hidden; }
body { min-width: 320px; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, .btn, .lang-toggle, .mobile-toggle, .close-btn { min-height: 44px; }

/* Keep the drawer on the correct physical side in both languages. */
html[dir="ltr"] .mobile-nav { right: -100%; left: auto; border-left: 1px solid var(--clr-border); border-right: 0; }
html[dir="ltr"] .mobile-nav.open { right: 0; }
html[dir="rtl"] .mobile-nav { left: -100%; right: auto; border-right: 1px solid var(--clr-border); border-left: 0; }
html[dir="rtl"] .mobile-nav.open { left: 0; }
html[dir="rtl"] .mobile-nav .close-btn { align-self: flex-start; }

@media (max-width: 1024px) {
  .container { padding-left: 1.25rem; padding-right: 1.25rem; }
  .nav-links { gap: 1.15rem; }
  .nav-actions { gap: .45rem; }
  .nav-phone { font-size: .8rem; }
  .hero { padding-top: calc(var(--nav-h) + 2.5rem); }
  .hero-grid { gap: 2rem; }
  .hero-visual { margin-bottom: 1rem; }
  .quote-grid { padding: 2rem; }
}

@media (max-width: 768px) {
  :root { --nav-h: 72px; }
  .container { width: 100%; padding-left: 1rem; padding-right: 1rem; }
  .nav { height: var(--nav-h); }
  .nav .container { gap: .75rem; }
  .nav-logo { min-width: 0; }
  .atlal-logo { width: 126px; max-width: 42vw; }
  .mobile-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; padding: 0; }
  .nav-actions { margin-inline-start: auto; }
  .nav-actions .lang-toggle { display: inline-flex; align-items: center; justify-content: center; padding: .45rem .65rem; font-size: .76rem; }
  .mobile-nav { width: min(86vw, 340px); padding: 1.25rem 1rem; overflow-y: auto; }
  .mobile-nav-links { gap: .35rem; }
  .mobile-nav-links a { min-height: 48px; display: flex; align-items: center; padding: .7rem .25rem; }
  .mobile-nav .btn { width: 100%; }
  body.menu-open { overflow: hidden; }

  .hero { min-height: auto; padding: calc(var(--nav-h) + 2.25rem) 0 3.5rem; }
  .hero-grid, .content-grid, .quote-grid { grid-template-columns: 1fr; }
  .hero-grid { gap: 1.5rem; }
  .hero-text { order: 1; }
  .hero-visual { order: 0; min-height: 235px; }
  .hero-visual .drill-circle { width: 190px; height: 190px; }
  .hero-visual .drill-circle i { font-size: 4rem; }
  .hero-visual .orbit-ring:nth-child(2) { width: 235px; height: 235px; }
  .hero-visual .orbit-ring:nth-child(3) { width: 280px; height: 280px; }
  .hero-visual .floating-card:nth-child(4) { top: 0; right: 3%; }
  .hero-visual .floating-card:nth-child(5) { bottom: 0; left: 2%; }
  .hero-visual .floating-card:nth-child(6) { top: 45%; right: 0; }
  .hero-visual .floating-card { max-width: 48%; font-size: .72rem; padding: .55rem .65rem; }
  .hero h1 { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.18; overflow-wrap: anywhere; }
  .hero-desc { font-size: .98rem; line-height: 1.8; }
  .hero-cta, .form-submit { align-items: stretch; }
  .hero-cta .btn, .form-submit .btn { flex: 1 1 100%; justify-content: center; }
  .hero-trust { gap: .75rem; justify-content: space-between; }
  .hero-trust-item { flex: 1 1 30%; min-width: 0; }
  .hero-trust-item .num { font-size: 1.45rem; }
  .hero-trust-item .lbl { font-size: .7rem; line-height: 1.35; }

  .page-hero { padding: calc(var(--nav-h) + 2.25rem) 0 2.5rem; }
  .page-hero h1 { font-size: clamp(1.85rem, 8vw, 2.75rem); line-height: 1.2; overflow-wrap: anywhere; }
  .page-hero p { font-size: .95rem; line-height: 1.8; }
  .breadcrumb { flex-wrap: wrap; line-height: 1.6; }
  .content-section, .quote { padding: 3.5rem 0; }
  .content-grid { gap: 1.75rem; }
  .content-grid .visual-panel { order: 0; min-height: 220px; }
  .visual-panel > i { font-size: 5rem; }
  .visual-panel .panel-label { right: .75rem; bottom: .75rem; font-size: .75rem; }
  .section-header { margin-bottom: 2rem; }
  .section-header h2, .content-section h2, .quote-info h2 { font-size: clamp(1.55rem, 7vw, 2.15rem); }
  .services-grid, .service-detail-grid, .faq-grid, .area-detail-grid, .contact-cards { grid-template-columns: 1fr; }
  .service-card { padding: 1.35rem; }
  .service-detail:hover, .service-card:hover, .faq-card:hover { transform: none; }
  .quote-grid { gap: 1.5rem; padding: 1.15rem; border-radius: var(--radius-lg); }
  .quote-contact-item { align-items: flex-start; line-height: 1.5; }
  .form-row { grid-template-columns: 1fr; }
  .form-group input, .form-group select, .form-group textarea { font-size: 16px; min-height: 48px; }
  .form-group textarea { min-height: 130px; }
  .form-submit { flex-direction: column; }
  .form-success { justify-content: center; text-align: center; }
  .cta-banner { padding: 3.25rem 0; }
  .cta-banner .btn-group { flex-direction: column; align-items: stretch; }
  .cta-banner .btn { justify-content: center; }
  .footer { padding-top: 2.5rem; }
  .footer-grid { gap: 1.75rem; margin-bottom: 1.75rem; }
  .footer-brand p { max-width: none; }
  .footer-bottom { gap: .8rem; }
  .whatsapp-float { width: 52px; height: 52px; right: 1rem; bottom: 1rem; font-size: 1.45rem; }
  html[dir="rtl"] .whatsapp-float { right: auto; left: 1rem; }
  .whatsapp-float .tooltip-text { display: none; }
}

@media (max-width: 420px) {
  .container { padding-left: .85rem; padding-right: .85rem; }
  .atlal-logo { width: 112px; }
  .nav-actions .lang-toggle { padding-inline: .5rem; }
  .hero { padding-bottom: 3rem; }
  .hero-visual { min-height: 205px; transform: scale(.9); margin: -0.5rem 0; }
  .hero-cta .btn, .cta-banner .btn { padding-inline: 1rem; }
  .hero-trust-item .lbl { font-size: .64rem; }
  .mobile-nav { width: min(90vw, 320px); }
}

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