:root{
      --ink:#031b36;
      --ink-soft:#062b55;
      --ink-card:#0a3e70;
      --paper:#f8fafc;
      --paper-2:#eef3f8;
      --white:#fff;
      --orange:#ff9c21;
      --orange-2:#ff6a00;
      --red:#ed3345;
      --blue:#062b55;
      --text:#10243f;
      --muted:#68778a;
      --line:#e1e7ee;
      --shadow:0 24px 70px rgba(3,27,54,.14);
      --radius:26px;
      --container:1180px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:90px}
    body{
      margin:0;
      font-family:"Cairo",Tahoma,Arial,sans-serif;
      color:var(--text);
      background:var(--paper);
      overflow-x:hidden;
    }
    body.menu-open{overflow:hidden}
    img{display:block;max-width:100%}
    a{text-decoration:none;color:inherit}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}

    .container{width:min(calc(100% - 40px),var(--container));margin-inline:auto}
    .section{padding:92px 0;position:relative}
    .section-tight{padding:62px 0}
    .section-kicker{
      display:inline-flex;align-items:center;gap:9px;
      color:var(--orange-2);font-size:13px;font-weight:900;
      letter-spacing:.1px;margin-bottom:12px;
    }
    .section-kicker::before{content:"";width:30px;height:3px;border-radius:9px;background:linear-gradient(90deg,var(--orange),var(--orange-2))}
    .section-heading{margin:0 0 16px;font-size:clamp(30px,4vw,48px);line-height:1.3;font-weight:900;letter-spacing:-1.2px}
    .section-copy{margin:0;color:var(--muted);font-size:15px;line-height:2;max-width:660px}
    .center{text-align:center}
    .center .section-kicker{justify-content:center}
    .center .section-copy{margin-inline:auto}

    .btn{
      min-height:52px;padding:12px 24px;border:0;border-radius:999px;
      display:inline-flex;align-items:center;justify-content:center;gap:9px;
      font-weight:900;transition:.25s ease;white-space:nowrap;
    }
    .btn:hover{transform:translateY(-3px)}
    .btn-primary{color:#161616;background:linear-gradient(135deg,var(--orange),var(--orange-2));box-shadow:0 14px 30px rgba(255,132,0,.28)}
    .btn-dark{color:#fff;background:#171717}
    .btn-light{color:#171717;background:#fff}
    .btn-outline{color:#fff;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.05);backdrop-filter:blur(10px)}
    .btn svg{width:19px;height:19px;flex:0 0 auto}

    /* Header */
    .topbar{background:#111;color:#fff;font-size:12px}
    .topbar-inner{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:18px}
    .topbar-note{display:flex;align-items:center;gap:8px;color:#e8e8e8}
    .topbar-note b{color:var(--orange)}
    .topbar-links{display:flex;gap:18px;direction:ltr}
    .topbar-links a{font-weight:800}

    .header{
      position:relative;top:auto;z-index:100;background:#fff;
      backdrop-filter:none;border-bottom:1px solid var(--line);
    }
    .header-inner{height:82px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:30px}
    .brand{display:flex;align-items:center;gap:12px}
    .brand img{width:148px;height:58px;object-fit:contain}
    .nav{display:flex;justify-content:center;gap:24px}
    .nav a{font-size:14px;font-weight:800;color:#333;position:relative;padding:10px 0}
    .nav a::after{content:"";position:absolute;right:0;left:100%;bottom:2px;height:3px;border-radius:8px;background:var(--orange);transition:.25s ease}
    .nav a:hover::after{left:0}
    .header-actions{display:flex;align-items:center;gap:10px}
    .header-phone{direction:ltr;font-weight:900;font-size:14px}
    .menu-toggle{display:none;width:44px;height:44px;border:0;border-radius:14px;background:#eee7da;font-size:22px;color:#111}

    /* Hero */
    .hero{position:relative;background:var(--ink);color:#fff;min-height:690px;overflow:hidden}
    .hero::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:rgba(255,174,0,.12);filter:blur(4px);left:-180px;top:-180px}
    .hero::after{content:"";position:absolute;inset:auto 0 0;height:170px;background:linear-gradient(to top,rgba(0,0,0,.3),transparent);pointer-events:none}
    .hero-grid{min-height:690px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:48px;position:relative;z-index:2;padding:54px 0}
    .hero-badge{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);border-radius:999px;padding:8px 14px;font-size:12px;font-weight:800;color:#f0f0f0;margin-bottom:22px}
    .hero-badge span{width:8px;height:8px;background:#32d36b;border-radius:50%;box-shadow:0 0 0 5px rgba(50,211,107,.15)}
    .hero h1{font-size:clamp(42px,6vw,72px);line-height:1.23;letter-spacing:-2px;margin:0 0 20px;font-weight:900}
    .hero h1 em{font-style:normal;color:var(--orange)}
    .hero-copy{max-width:600px;margin:0 0 28px;color:#d7d7d7;font-size:16px;line-height:2}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
    .hero-points{display:flex;gap:18px 26px;flex-wrap:wrap;color:#efefef;font-size:13px;font-weight:700}
    .hero-points span{display:flex;align-items:center;gap:7px}
    .hero-points span::before{content:"✓";width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,174,0,.16);color:var(--orange);font-weight:900}

    .hero-visual{position:relative;min-height:540px}
    .hero-main-image{position:absolute;inset:20px 0 40px 38px;border-radius:34px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.16)}
    .hero-main-image img{width:100%;height:100%;object-fit:cover}
    .hero-main-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.45))}
    .hero-mini{position:absolute;width:190px;height:152px;left:0;bottom:0;border:8px solid var(--ink);border-radius:24px;overflow:hidden;box-shadow:0 18px 46px rgba(0,0,0,.42);z-index:2}
    .hero-mini img{width:100%;height:100%;object-fit:cover}
    .hero-rating{position:absolute;right:-22px;top:4px;background:#fff;color:#222;border-radius:18px;padding:14px 16px;box-shadow:var(--shadow);z-index:3;min-width:180px}
    .hero-rating strong{display:block;font-size:20px;direction:ltr}
    .hero-rating .stars{color:var(--orange);letter-spacing:2px;font-size:13px}
    .hero-rating small{color:#777;font-size:10px}
    .hero-float-card{position:absolute;right:-12px;bottom:32px;background:linear-gradient(135deg,var(--orange),var(--orange-2));color:#151515;padding:17px 20px;border-radius:20px;z-index:3;box-shadow:0 18px 44px rgba(255,122,0,.3)}
    .hero-float-card b{display:block;font-size:25px;direction:ltr}
    .hero-float-card span{font-size:11px;font-weight:900}

    /* trust strip */
    .trust-strip{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 12px 40px rgba(29,22,10,.05)}
    .trust-grid{display:grid;grid-template-columns:repeat(5,1fr);min-height:110px}
    .trust-item{display:flex;align-items:center;justify-content:center;gap:12px;padding:18px;border-left:1px solid var(--line)}
    .trust-item:last-child{border-left:0}
    .trust-icon{width:44px;height:44px;flex:0 0 44px;border-radius:15px;background:#fff3da;color:var(--orange-2);display:grid;place-items:center;font-size:20px;font-weight:900}
    .trust-item b{display:block;font-size:13px}
    .trust-item span{display:block;color:#888;font-size:10px;margin-top:3px}

    /* About */
    .about-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:76px;align-items:center}
    .about-media{position:relative;padding:0 0 54px 54px}
    .about-media > img{width:100%;height:560px;object-fit:cover;border-radius:34px;box-shadow:var(--shadow)}
    .about-card{position:absolute;left:0;bottom:0;background:#171717;color:#fff;border-radius:24px;padding:22px;width:250px;box-shadow:0 24px 52px rgba(0,0,0,.26)}
    .about-card img{width:145px;height:58px;object-fit:contain;background:#fff;border-radius:14px;padding:7px;margin-bottom:14px}
    .about-card strong{font-size:20px;display:block;color:var(--orange);margin-bottom:4px}
    .about-card span{font-size:11px;line-height:1.8;color:#d8d8d8}
    .about-list{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:26px 0 30px}
    .about-list div{display:flex;align-items:flex-start;gap:10px;background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;font-size:12px;font-weight:800;box-shadow:0 8px 24px rgba(30,20,0,.05)}
    .about-list div::before{content:"✓";width:24px;height:24px;display:grid;place-items:center;flex:0 0 24px;border-radius:50%;background:#fff1d4;color:var(--orange-2)}

    /* Services */
    .services{background:#171717;color:#fff;overflow:hidden}
    .services::before{content:"";position:absolute;width:580px;height:580px;border-radius:50%;right:-260px;top:-240px;background:rgba(255,174,0,.08)}
    .services .section-copy{color:#c9c9c9}
    .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
    .service-card{background:#232323;border:1px solid rgba(255,255,255,.09);border-radius:25px;overflow:hidden;transition:.3s ease;position:relative}
    .service-card:hover{transform:translateY(-8px);border-color:rgba(255,174,0,.55);box-shadow:0 26px 55px rgba(0,0,0,.28)}
    .service-image{height:205px;overflow:hidden;position:relative}
    .service-image img{width:100%;height:100%;object-fit:cover;transition:.5s ease}
    .service-card:hover .service-image img{transform:scale(1.06)}
    .service-number{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:14px;background:rgba(17,17,17,.8);backdrop-filter:blur(9px);display:grid;place-items:center;color:var(--orange);font-weight:900;direction:ltr}
    .service-body{padding:21px}
    .service-body h3{margin:0 0 8px;font-size:19px}
    .service-body p{margin:0;color:#bcbcbc;font-size:12px;line-height:1.85}
    .service-link{display:inline-flex;align-items:center;gap:7px;color:var(--orange);font-size:12px;font-weight:900;margin-top:15px}

    /* process */
    .process-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:66px;align-items:center}
    .process-image{position:relative}
    .process-image img{width:100%;height:600px;object-fit:cover;border-radius:34px;box-shadow:var(--shadow)}
    .process-label{position:absolute;right:-22px;bottom:32px;border-radius:20px;background:#fff;padding:17px 20px;box-shadow:var(--shadow);display:flex;align-items:center;gap:13px}
    .process-label strong{font-size:26px;color:var(--orange-2);direction:ltr}
    .process-label span{font-size:11px;font-weight:800;color:#555}
    .timeline{position:relative;margin-top:30px}
    .timeline::before{content:"";position:absolute;right:27px;top:26px;bottom:26px;width:2px;background:linear-gradient(var(--orange),#eadfcb)}
    .timeline-item{position:relative;display:grid;grid-template-columns:56px 1fr;gap:18px;margin-bottom:19px}
    .timeline-number{width:56px;height:56px;border-radius:18px;background:#fff4dc;color:var(--orange-2);border:1px solid #ffe0a3;display:grid;place-items:center;font-size:18px;font-weight:900;z-index:2;direction:ltr}
    .timeline-content{background:#fff;border:1px solid var(--line);border-radius:20px;padding:17px 19px;box-shadow:0 10px 30px rgba(35,25,5,.05)}
    .timeline-content h3{margin:0 0 4px;font-size:16px}
    .timeline-content p{margin:0;color:#777;font-size:11px;line-height:1.8}

    /* stats */
    .stats{background:linear-gradient(135deg,#f4a500,#ff7a00);padding:50px 0;color:#151515}
    .stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
    .stat{text-align:center;padding:10px 18px;border-left:1px solid rgba(20,20,20,.16)}
    .stat:last-child{border-left:0}
    .stat strong{display:block;font-size:clamp(34px,5vw,54px);font-weight:900;direction:ltr;line-height:1.1}
    .stat span{font-size:12px;font-weight:900}

    /* packing */
    .packing{background:var(--paper-2)}
    .packing-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
    .packing-visual{position:relative;display:grid;grid-template-columns:1fr .78fr;gap:14px;align-items:end}
    .packing-visual img{width:100%;object-fit:cover;border-radius:28px;box-shadow:var(--shadow)}
    .packing-visual img:first-child{height:470px}
    .packing-visual img:last-child{height:330px;margin-bottom:28px}
    .packing-chip{position:absolute;right:22px;bottom:17px;background:#171717;color:#fff;border-radius:18px;padding:14px 17px;font-size:11px;font-weight:800;box-shadow:0 18px 35px rgba(0,0,0,.24)}
    .packing-chip b{display:block;color:var(--orange);font-size:17px;margin-bottom:2px}
    .material-list{display:grid;gap:11px;margin-top:27px}
    .material-item{display:flex;gap:13px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:13px 15px}
    .material-icon{width:42px;height:42px;border-radius:14px;background:#171717;color:var(--orange);display:grid;place-items:center;font-weight:900;flex:0 0 auto}
    .material-item b{font-size:13px;display:block}
    .material-item span{font-size:10px;color:#777}

    /* Checklist */
    .checklist-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
    .check-card{border:1px solid var(--line);background:#fff;border-radius:23px;padding:22px;position:relative;overflow:hidden;min-height:190px;box-shadow:0 12px 34px rgba(35,25,5,.06)}
    .check-card::after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;background:#fff4dc;left:-38px;bottom:-38px}
    .check-icon{width:50px;height:50px;border-radius:16px;background:#171717;color:var(--orange);display:grid;place-items:center;font-size:21px;font-weight:900;margin-bottom:16px}
    .check-card h3{margin:0 0 8px;font-size:16px}
    .check-card p{margin:0;color:#777;font-size:11px;line-height:1.85}

    /* Coverage */
    .coverage{background:#171717;color:#fff}
    .coverage-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
    .coverage .section-copy{color:#c6c6c6}
    .coverage-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}
    .coverage-chips span{border:1px solid rgba(255,255,255,.14);background:#242424;border-radius:999px;padding:9px 14px;font-size:11px;font-weight:800}
    .coverage-card{position:relative;border-radius:32px;overflow:hidden;min-height:520px;box-shadow:0 28px 70px rgba(0,0,0,.38)}
    .coverage-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .coverage-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.76))}
    .coverage-overlay{position:absolute;z-index:2;right:28px;left:28px;bottom:27px}
    .coverage-overlay h3{margin:0 0 7px;font-size:27px}
    .coverage-overlay p{margin:0;color:#e2e2e2;font-size:12px;line-height:1.85}

    /* Guarantees */
    .guarantee-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
    .guarantee{display:flex;gap:18px;align-items:flex-start;border:1px solid var(--line);border-radius:22px;padding:20px;background:#fff}
    .guarantee-icon{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;flex:0 0 52px;background:#fff1d1;color:var(--orange-2);font-size:22px;font-weight:900}
    .guarantee h3{margin:0 0 5px;font-size:16px}
    .guarantee p{margin:0;color:#777;font-size:11px;line-height:1.8}

    /* Promo */
    .promo-wrap{padding-top:0}
    .promo{background:linear-gradient(135deg,#ed3345,#bb162a);color:#fff;border-radius:34px;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;box-shadow:0 30px 74px rgba(187,22,42,.2)}
    .promo-content{padding:54px}
    .promo-content h2{font-size:clamp(32px,4vw,50px);line-height:1.3;margin:0 0 14px}
    .promo-content p{margin:0 0 25px;color:#ffe5e8;line-height:1.95;font-size:14px}
    .promo-image{min-height:420px;position:relative}
    .promo-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .promo-image::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(187,22,42,.36),transparent 42%)}

    /* reviews */
    .reviews{background:var(--paper-2)}
    .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:19px;margin-top:36px}
    .review{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 12px 34px rgba(32,23,5,.06)}
    .review-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
    .review-top img{width:58px;height:58px;border-radius:18px;object-fit:cover}
    .review-top h3{font-size:14px;margin:0 0 2px}
    .review-top span{font-size:10px;color:#888}
    .review-stars{margin-right:auto;color:var(--orange);font-size:13px;direction:ltr}
    .review p{margin:0;color:#666;font-size:12px;line-height:1.95}

    /* FAQ */
    .faq-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:58px;align-items:start}
    .faq-side{position:sticky;top:112px}
    .faq-side img{width:190px;height:76px;object-fit:contain;margin-bottom:18px}
    .faq-list{display:grid;gap:12px}
    .faq-item{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}
    .faq-question{width:100%;border:0;background:transparent;display:flex;align-items:center;justify-content:space-between;gap:15px;text-align:right;padding:19px 20px;font-weight:900;color:#222}
    .faq-plus{width:30px;height:30px;border-radius:10px;background:#fff1d4;color:var(--orange-2);display:grid;place-items:center;flex:0 0 30px;font-size:19px;transition:.25s ease}
    .faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease}
    .faq-answer p{margin:0;padding:0 20px 19px;color:#707070;font-size:12px;line-height:1.9}
    .faq-item.open .faq-plus{transform:rotate(45deg);background:#171717;color:#fff}

    /* Quote */
    .quote{background:#071b4d;color:#fff;overflow:hidden}
    .quote::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:#0d347d;left:-250px;bottom:-260px;opacity:.65}
    .quote-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:58px;align-items:center;position:relative;z-index:2}
    .quote .section-copy{color:#c3d3f3}
    .quote-contact{display:grid;gap:12px;margin-top:28px}
    .quote-contact a{display:flex;align-items:center;gap:13px;border:1px solid rgba(255,255,255,.14);border-radius:17px;padding:14px;background:rgba(255,255,255,.05)}
    .quote-contact b{direction:ltr}
    .contact-icon{width:40px;height:40px;border-radius:13px;background:var(--orange);color:#171717;display:grid;place-items:center;font-weight:900}
    .quote-form{background:#fff;color:#222;border-radius:30px;padding:30px;box-shadow:0 30px 74px rgba(0,0,0,.34)}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .field{display:grid;gap:7px}
    .field.full{grid-column:1/-1}
    .field label{font-size:11px;font-weight:800;color:#555}
    .field input,.field select,.field textarea{width:100%;border:1px solid #e5dfd4;background:#fbfaf7;border-radius:14px;padding:13px 14px;outline:none;color:#222;transition:.2s ease}
    .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,174,0,.12)}
    .services-select{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
    .service-check{display:flex;align-items:center;gap:8px;background:#fbfaf7;border:1px solid #e5dfd4;border-radius:13px;padding:10px;font-size:11px;font-weight:700}
    .quote-submit{width:100%;margin-top:18px}
    .form-note{text-align:center;color:#888;font-size:9px;margin-top:9px}

    /* Footer */
    .footer{background:#111;color:#fff;padding:62px 0 24px}
    .footer-grid{display:grid;grid-template-columns:1.2fr .7fr .7fr 1fr;gap:42px}
    .footer-brand img{width:190px;height:80px;object-fit:contain;background:#fff;border-radius:18px;padding:9px;margin-bottom:17px}
    .footer-brand p{margin:0;color:#bdbdbd;font-size:11px;line-height:1.9;max-width:360px}
    .footer h3{font-size:14px;margin:0 0 16px;color:var(--orange)}
    .footer-links{display:grid;gap:10px}
    .footer-links a{color:#d0d0d0;font-size:11px}
    .footer-phone-list{display:grid;gap:10px;direction:ltr}
    .footer-phone-list a{border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:10px 12px;font-size:12px;font-weight:900;text-align:center}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:#999;font-size:10px}

    /* Floating actions */
    .floating-call{position:fixed;z-index:999;left:max(18px,calc((100vw - var(--container))/2 + 18px));bottom:max(18px,env(safe-area-inset-bottom));height:58px;padding:0 18px 0 9px;border-radius:999px;background:linear-gradient(135deg,var(--orange),var(--orange-2));color:#171717;display:flex;flex-direction:row;align-items:center;gap:10px;direction:ltr;font-weight:900;box-shadow:0 18px 42px rgba(255,122,0,.38);border:2px solid #fff;animation:pulse 2s infinite}
    .floating-call-icon{width:38px;height:38px;border-radius:50%;background:#171717;color:#fff;display:grid;place-items:center}
    .floating-call svg{width:18px;height:18px}
    @keyframes pulse{50%{transform:translateY(-3px);box-shadow:0 22px 50px rgba(255,122,0,.5)}}

    .reveal{opacity:0;transform:translateY(24px);transition:.7s ease}
    .reveal.in-view{opacity:1;transform:none}

    @media(max-width:1050px){
      .nav{gap:15px}.nav a{font-size:12px}.header-phone{display:none}
      .hero-grid{gap:28px}.hero-rating{right:0}.hero-float-card{right:8px}
      .services-grid{grid-template-columns:repeat(2,1fr)}
      .checklist-grid{grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:1.2fr 1fr 1fr}
      .footer-grid > :last-child{grid-column:1/-1}
    }

    @media(max-width:820px){
      .section{padding:70px 0}
      .topbar-links{display:none}
      .header-inner{height:72px;grid-template-columns:auto 1fr auto}
      .brand img{width:128px;height:50px}
      .nav{position:fixed;top:72px;right:0;left:0;bottom:0;background:#fffdf7;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:24px;gap:0;transform:translateX(105%);transition:.3s ease;z-index:120}
      .nav.open{transform:none}
      .nav a{font-size:17px;padding:15px;border-bottom:1px solid var(--line)}
      .header-actions .btn{display:none}
      .menu-toggle{display:grid;place-items:center}
      .hero-grid,.about-grid,.process-layout,.packing-grid,.coverage-grid,.faq-layout,.quote-grid{grid-template-columns:1fr}
      .hero{min-height:auto}
      .hero-grid{padding:64px 0 78px;min-height:auto}
      .hero-copy{font-size:14px}
      .hero-visual{min-height:480px;margin-top:6px}
      .hero-main-image{inset:0 0 42px 26px}
      .hero-rating{top:-16px}
      .trust-grid{grid-template-columns:repeat(2,1fr)}
      .trust-item{border-bottom:1px solid var(--line)}
      .trust-item:nth-child(even){border-left:0}
      .trust-item:last-child{grid-column:1/-1}
      .about-grid{gap:44px}
      .about-media > img{height:500px}
      .process-layout{gap:42px}
      .process-image{order:2}.process-image img{height:480px}
      .stats-grid{grid-template-columns:repeat(2,1fr);gap:20px 0}.stat:nth-child(2){border-left:0}
      .coverage-card{min-height:460px}
      .promo{grid-template-columns:1fr}.promo-image{min-height:340px;order:-1}.promo-content{padding:36px}
      .reviews-grid{grid-template-columns:1fr}
      .faq-side{position:static}
      .quote-grid{gap:36px}
      .footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}
      .floating-call{left:14px}
    }

    @media(max-width:560px){
      .container{width:min(calc(100% - 28px),var(--container))}
      .topbar-inner{justify-content:center}.topbar-note{font-size:10px;text-align:center}
      .hero h1{font-size:39px;letter-spacing:-1px}
      .hero-actions{display:grid;grid-template-columns:1fr 1fr}.hero-actions .btn{padding-inline:12px}
      .hero-points{display:grid;grid-template-columns:1fr 1fr;gap:12px}
      .hero-visual{min-height:390px}
      .hero-mini{width:145px;height:115px;border-width:5px}
      .hero-rating{min-width:150px;padding:10px 12px}.hero-rating strong{font-size:16px}
      .hero-float-card{bottom:20px;padding:12px 14px}.hero-float-card b{font-size:20px}
      .trust-grid{grid-template-columns:1fr}.trust-item{justify-content:flex-start;border-left:0}.trust-item:last-child{grid-column:auto}
      .about-media{padding:0 0 44px 28px}.about-media > img{height:390px}.about-card{width:215px;padding:17px}
      .about-list{grid-template-columns:1fr}
      .services-grid{grid-template-columns:1fr}.service-image{height:220px}
      .process-image img{height:400px}.process-label{right:10px;bottom:18px}
      .stats-grid{grid-template-columns:1fr 1fr}.stat{padding:15px 8px}.stat strong{font-size:38px}
      .packing-visual{grid-template-columns:1fr 1fr;gap:8px}.packing-visual img:first-child{height:350px}.packing-visual img:last-child{height:260px}
      .checklist-grid,.guarantee-grid{grid-template-columns:1fr}
      .coverage-card{min-height:390px}
      .promo-content{padding:28px 22px}.promo-content h2{font-size:30px}.promo-image{min-height:270px}
      .form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}
      .services-select{grid-template-columns:1fr}
      .quote-form{padding:21px;border-radius:24px}
      .footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-bottom{flex-direction:column;text-align:center}
      .floating-call{height:52px;padding:0 13px 0 8px;font-size:12px}.floating-call-icon{width:33px;height:33px}
    }

    @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
  

    /* Al Nesr visual refresh */
    :root{
      --ink:#043b50;
      --ink-soft:#07485e;
      --ink-card:#0a5067;
      --paper:#fffdf8;
      --paper-2:#f4f7f7;
      --orange:#ff9700;
      --orange-2:#ee7f00;
      --blue:#043b50;
      --text:#18333c;
      --muted:#63757b;
      --line:#dfe9e9;
    }

    html{scroll-padding-top:20px}
    .header{position:relative;top:auto;background:#fff;border-bottom:1px solid var(--line);backdrop-filter:none}
    .brand img{width:126px;height:66px;object-fit:contain;background:#fff;border-radius:14px;padding:3px}
    .footer-brand img,.faq-side > img,.about-card img{object-fit:contain;background:#fff}

    .hero{background:linear-gradient(145deg,#043b50 0%,#062f41 58%,#021e2b 100%)}
    .hero::before{background:rgba(255,151,0,.15)}
    .hero-main-image{
      inset:0 62px 0 62px;
      border-radius:30px;
      background:#f8f3e9;
      border:5px solid rgba(255,255,255,.13);
    }
    .hero-main-image img{object-fit:contain;object-position:center;background:#f8f3e9}
    .hero-main-image::after{display:none}
    .hero-mini{
      width:176px;height:220px;left:0;bottom:-8px;
      border:7px solid #043b50;background:#f8f3e9;
    }
    .hero-mini img{object-fit:contain;background:#f8f3e9}
    .hero-rating{right:0}
    .hero-float-card{right:12px}

    .about-media > img,.process-image img{
      object-fit:contain;
      object-position:center;
      background:#eef4f3;
      padding:7px;
    }

    .service-image{
      height:auto;
      aspect-ratio:4 / 5;
      background:#f3f0e9;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .service-image img{object-fit:contain;object-position:center;background:#f3f0e9}
    .service-card:hover .service-image img{transform:scale(1.018)}

    .packing-visual{align-items:stretch}
    .packing-visual img:first-child,.packing-visual img:last-child{
      height:auto;
      min-height:430px;
      object-fit:contain;
      object-position:center;
      background:#eaf1f0;
      margin-bottom:0;
      padding:5px;
    }

    .coverage-card{background:#eef3f2;min-height:610px}
    .coverage-card img{object-fit:contain;object-position:center;background:#eef3f2;padding:6px}
    .coverage-card::after{background:linear-gradient(180deg,transparent 58%,rgba(2,30,43,.88))}

    .promo{background:linear-gradient(135deg,#073e53,#032b3b)}
    .promo-image{background:#f6f0e6;min-height:560px}
    .promo-image img{object-fit:contain;object-position:center;background:#f6f0e6;padding:5px}
    .promo-image::after{display:none}

    .review-avatar{
      width:58px;height:58px;border-radius:18px;display:grid;place-items:center;
      flex:0 0 58px;background:linear-gradient(135deg,var(--orange),var(--orange-2));
      color:#fff;font-size:22px;font-weight:900;box-shadow:0 8px 20px rgba(238,127,0,.2)
    }

    .services,.coverage,.footer{background:#043b50}
    .quote{background:#062f50}
    .footer{background:#021e2b}
    .trust-icon,.guarantee-icon,.faq-plus,.timeline-number{color:#e97800}

    @media(max-width:820px){
      .hero-main-image{inset:0 35px 42px 35px}
      .coverage-card{min-height:520px}
      .promo-image{min-height:480px}
    }
    @media(max-width:560px){
      .brand img{width:105px;height:57px}
      .hero-visual{min-height:565px}
      .hero-main-image{inset:0 20px 70px 20px}
      .hero-mini{width:128px;height:164px;bottom:5px}
      .hero-rating{top:-12px;right:6px}
      .service-image{aspect-ratio:4 / 5}
      .packing-visual{grid-template-columns:1fr}
      .packing-visual img:first-child,.packing-visual img:last-child{min-height:0;height:auto;max-height:none}
      .coverage-card{min-height:500px}
      .promo-image{min-height:430px}
    }

  
    /* Updated logo sizing + clean image carousel */
    .brand img{width:188px;height:74px;object-fit:contain}
    .about-card img{width:170px;height:70px}
    .faq-side img{width:220px;height:88px}
    .footer-brand img{width:220px;height:92px}

    .hero{position:relative;background:#111;min-height:540px;overflow:hidden}
    .hero::before,.hero::after{display:none}
    .hero-carousel{position:relative;height:540px}
    .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease-in-out;background-size:cover;background-position:center center;background-repeat:no-repeat}
    .hero-slide.active{opacity:1}
    .hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.22))}
    .hero-dots{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;display:flex;gap:8px}
    .hero-dots button{width:11px;height:11px;border-radius:999px;border:0;background:rgba(255,255,255,.45);padding:0;cursor:pointer;transition:.25s ease}
    .hero-dots button.active{width:30px;background:var(--orange)}
    @media(max-width:820px){
      .brand img{width:168px;height:66px}
      .hero,.hero-carousel{min-height:420px;height:420px}
    }
    @media(max-width:560px){
      .brand img{width:154px;height:62px}
      .hero,.hero-carousel{min-height:330px;height:330px}
      .hero-dots{bottom:14px}
      .hero-dots button{width:9px;height:9px}
      .hero-dots button.active{width:24px}
    }



    /* Mobile carousel: preserve the full 4:5 artwork and add cinematic transitions */
    .hero-carousel{
      isolation:isolate;
      background:#071d29;
      touch-action:pan-y;
    }
    .hero-slide{
      will-change:opacity,transform,filter;
      transform:translateX(4%) scale(.985);
      filter:saturate(.9) brightness(.82);
      transition:
        opacity .85s ease,
        transform 1.15s cubic-bezier(.22,.75,.18,1),
        filter 1s ease;
    }
    .hero-slide.from-left{transform:translateX(-5%) scale(.985)}
    .hero-slide.from-right{transform:translateX(5%) scale(.985)}
    .hero-slide.active{
      opacity:1;
      transform:translateX(0) scale(1);
      filter:saturate(1) brightness(1);
      z-index:2;
    }
    .hero-slide::after{
      background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.10));
      opacity:.7;
      transition:opacity 1s ease;
    }
    .hero-slide.active::after{opacity:.18}
    .hero-dots{
      padding:7px 10px;
      border-radius:999px;
      background:rgba(0,0,0,.25);
      backdrop-filter:blur(8px);
      box-shadow:0 8px 28px rgba(0,0,0,.22);
    }
    .hero-dots button{
      box-shadow:0 0 0 1px rgba(255,255,255,.42);
    }
    .hero-dots button.active{
      box-shadow:0 0 18px rgba(255,173,0,.72);
    }

    @media(max-width:560px){
      .hero{
        min-height:0;
        height:auto;
        background:#071d29;
      }
      .hero-carousel{
        width:100%;
        height:auto;
        min-height:0;
        aspect-ratio:4 / 5;
        overflow:hidden;
      }
      .hero-slide{
        background-size:100% 100%;
        background-position:center;
        background-color:#071d29;
      }
      .hero-dots{bottom:15px}
    }

    @media(max-width:560px) and (orientation:landscape){
      .hero-carousel{
        aspect-ratio:auto;
        height:calc(100svh - 100px);
        min-height:320px;
      }
      .hero-slide{
        background-size:contain;
      }
    }


    /* Final responsive image/frame corrections */

    /* Mobile menu icon at the far-left edge */
    @media (max-width:820px){
      .header-inner{
        position:relative;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        min-height:72px;
        height:72px;
        padding-left:56px;
      }

      .brand{margin-left:auto}

      .header-actions{
        position:absolute;
        left:0;
        top:50%;
        transform:translateY(-50%);
        margin:0;
      }

      .menu-toggle{
        display:grid;
        place-items:center;
        margin:0;
      }
    }

    /* Carousel ratio 16:10 on all screens */
    .hero{
      min-height:0 !important;
      height:auto !important;
    }

    .hero-carousel{
      width:100% !important;
      height:auto !important;
      min-height:0 !important;
      aspect-ratio:16 / 10 !important;
      overflow:hidden;
      background:#071d29;
    }

    .hero-slide{
      inset:0;
      background-size:cover !important;
      background-position:center center !important;
      background-repeat:no-repeat !important;
    }

    @media (max-width:820px){
      .hero,
      .hero-carousel{
        height:auto !important;
        min-height:0 !important;
      }
    }

    @media (max-width:560px){
      .hero-carousel{
        aspect-ratio:16 / 10 !important;
      }
    }

    @media (max-width:560px) and (orientation:landscape){
      .hero-carousel{
        height:auto !important;
        min-height:0 !important;
        aspect-ratio:16 / 10 !important;
      }

      .hero-slide{
        background-size:cover !important;
      }
    }

    /* Image frames follow the natural dimensions of each image */
    .about-media{padding:0 !important}

    .about-media > img,
    .process-image > img{
      width:100% !important;
      height:auto !important;
      min-height:0 !important;
      max-height:none !important;
      object-fit:unset !important;
      object-position:center !important;
      padding:0 !important;
      background:transparent !important;
    }

    .service-image{
      width:100%;
      height:auto !important;
      min-height:0 !important;
      aspect-ratio:auto !important;
      display:block !important;
      overflow:hidden;
      background:transparent !important;
    }

    .service-image img{
      position:relative !important;
      width:100% !important;
      height:auto !important;
      min-height:0 !important;
      max-height:none !important;
      object-fit:unset !important;
      object-position:center !important;
      padding:0 !important;
      background:transparent !important;
    }

    .service-card:hover .service-image img{
      transform:none !important;
    }

    .packing-visual{
      align-items:start !important;
    }

    .packing-visual img:first-child,
    .packing-visual img:last-child{
      width:100% !important;
      height:auto !important;
      min-height:0 !important;
      max-height:none !important;
      margin:0 !important;
      padding:0 !important;
      object-fit:unset !important;
      object-position:center !important;
      background:transparent !important;
    }

    .coverage-card{
      min-height:0 !important;
      height:auto !important;
      background:transparent !important;
    }

    .coverage-card img{
      position:relative !important;
      inset:auto !important;
      width:100% !important;
      height:auto !important;
      min-height:0 !important;
      max-height:none !important;
      padding:0 !important;
      object-fit:unset !important;
      object-position:center !important;
      background:transparent !important;
    }

    .promo-image{
      min-height:0 !important;
      height:auto !important;
      background:transparent !important;
    }

    .promo-image img{
      position:relative !important;
      inset:auto !important;
      width:100% !important;
      height:auto !important;
      min-height:0 !important;
      max-height:none !important;
      padding:0 !important;
      object-fit:unset !important;
      object-position:center !important;
      background:transparent !important;
    }

    @media (max-width:560px){
      .about-media > img,
      .process-image > img,
      .packing-visual img:first-child,
      .packing-visual img:last-child,
      .coverage-card,
      .promo-image{
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
      }
    }


    /* =========================================================
       Mobile features: two cards per row
       ========================================================= */
    @media(max-width:560px){
      .trust-strip{
        padding:12px 0;
        background:#fff;
      }

      .trust-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px !important;
        min-height:0 !important;
      }

      .trust-item{
        min-height:112px;
        padding:14px 9px !important;
        border:1px solid var(--line) !important;
        border-radius:18px;
        background:#fff;
        display:flex !important;
        flex-direction:column;
        align-items:center;
        justify-content:center !important;
        gap:8px !important;
        text-align:center;
        box-shadow:0 9px 25px rgba(4,59,80,.07);
      }

      .trust-item:nth-child(even){
        border-left:1px solid var(--line) !important;
      }

      .trust-item:last-child{
        grid-column:1 / -1 !important;
        width:calc(50% - 5px);
        justify-self:center;
      }

      .trust-icon{
        width:42px;
        height:42px;
        flex-basis:42px;
        border-radius:14px;
      }

      .trust-item b{
        font-size:11px;
        line-height:1.5;
      }

      .trust-item span{
        font-size:9px;
        line-height:1.5;
      }
    }

    /* =========================================================
       Brand arrival section inspired by the uploaded reference
       ========================================================= */
    .arrival-showcase{
      position:relative;
      overflow:hidden;
      padding:58px 20px 0;
      background:
        radial-gradient(circle at 18% 12%,rgba(255,151,0,.12),transparent 28%),
        linear-gradient(180deg,#fff 0%,#fffdf8 100%);
      border-bottom:1px solid var(--line);
    }

    .arrival-showcase::before,
    .arrival-showcase::after{
      content:"";
      position:absolute;
      border-radius:50%;
      pointer-events:none;
    }

    .arrival-showcase::before{
      width:220px;
      height:220px;
      left:-120px;
      bottom:-130px;
      border:26px solid rgba(255,151,0,.11);
    }

    .arrival-showcase::after{
      width:180px;
      height:180px;
      right:-105px;
      top:-110px;
      border:22px solid rgba(4,59,80,.08);
    }

    .arrival-showcase-inner{
      position:relative;
      z-index:2;
      width:min(100%,760px);
      margin-inline:auto;
      display:grid;
      justify-items:center;
      text-align:center;
    }

    .arrival-brand{
      display:grid;
      justify-items:center;
      gap:8px;
      margin-bottom:24px;
    }

    .arrival-brand img{
      width:184px;
      height:78px;
      object-fit:contain;
      background:#fff;
      border-radius:16px;
      padding:5px;
      box-shadow:0 10px 28px rgba(4,59,80,.09);
    }

    .arrival-brand span{
      color:#043b50;
      font-size:13px;
      font-weight:900;
    }

    .arrival-copy{
      max-width:610px;
      margin-inline:auto;
    }

    .arrival-kicker{
      display:inline-flex;
      align-items:center;
      gap:7px;
      margin-bottom:8px;
      color:#ee7f00;
      font-size:11px;
      font-weight:900;
    }

    .arrival-kicker::before,
    .arrival-kicker::after{
      content:"";
      width:24px;
      height:2px;
      border-radius:10px;
      background:#ff9700;
    }

    .arrival-copy h2{
      margin:0 0 10px;
      color:#043b50;
      font-size:clamp(30px,5vw,48px);
      line-height:1.3;
      font-weight:900;
      letter-spacing:-1px;
    }

    .arrival-copy p{
      max-width:520px;
      margin:0 auto;
      color:#708087;
      font-size:13px;
      line-height:2;
    }

    .arrival-worker{
      position:relative;
      width:min(330px,76vw);
      margin-top:20px;
      line-height:0;
    }

    .arrival-worker-image{
      width:100%;
      height:auto;
      display:block;
      filter:drop-shadow(0 20px 28px rgba(4,59,80,.16));
    }

    .arrival-box-logo{
      position:absolute;
      left:52%;
      top:47%;
      width:30%;
      transform:translate(-50%,-50%) rotate(6deg);
      padding:2px 4px;
      border-radius:4px;
      background:rgba(255,255,255,.92);
      box-shadow:0 3px 7px rgba(0,0,0,.12);
    }

    .arrival-box-logo img{
      width:100%;
      height:auto;
      object-fit:contain;
    }

    @media(max-width:560px){
      .arrival-showcase{
        padding:34px 14px 0;
      }

      .arrival-brand{
        margin-bottom:18px;
      }

      .arrival-brand img{
        width:156px;
        height:68px;
      }

      .arrival-brand span{
        font-size:12px;
      }

      .arrival-copy h2{
        margin-bottom:7px;
        font-size:25px;
      }

      .arrival-copy p{
        max-width:320px;
        font-size:10px;
        line-height:1.9;
      }

      .arrival-worker{
        width:min(250px,78vw);
        margin-top:15px;
      }
    }


    /* =========================================================
       Attractive section reveal animations
       ========================================================= */

    html.scroll-animations-ready .scroll-section{
      --section-x:0px;
      --section-y:54px;
      --section-scale:.965;
      --section-rotate:0deg;
      position:relative;
      opacity:0;
      transform:
        translate3d(var(--section-x),var(--section-y),0)
        scale(var(--section-scale))
        rotate(var(--section-rotate));
      filter:blur(9px);
      transition:
        opacity .9s cubic-bezier(.2,.78,.16,1),
        transform 1.05s cubic-bezier(.2,.78,.16,1),
        filter .95s ease;
      will-change:opacity,transform,filter;
    }

    html.scroll-animations-ready .scroll-section.scroll-from-right{
      --section-x:70px;
      --section-y:16px;
      --section-scale:.975;
      --section-rotate:.35deg;
    }

    html.scroll-animations-ready .scroll-section.scroll-from-left{
      --section-x:-70px;
      --section-y:16px;
      --section-scale:.975;
      --section-rotate:-.35deg;
    }

    html.scroll-animations-ready .scroll-section.scroll-zoom{
      --section-x:0px;
      --section-y:0px;
      --section-scale:.91;
    }

    html.scroll-animations-ready .scroll-section.is-visible{
      opacity:1;
      transform:translate3d(0,0,0) scale(1) rotate(0);
      filter:blur(0);
    }

    html.scroll-animations-ready .scroll-item{
      opacity:0;
      transform:translate3d(0,34px,0) scale(.98);
      filter:blur(5px);
      transition:
        opacity .72s ease,
        transform .82s cubic-bezier(.2,.78,.16,1),
        filter .72s ease;
      transition-delay:calc(var(--reveal-order,0) * 85ms + 150ms);
      will-change:opacity,transform,filter;
    }

    html.scroll-animations-ready .scroll-item.scroll-item-left{
      transform:translate3d(-34px,18px,0) scale(.985);
    }

    html.scroll-animations-ready .scroll-item.scroll-item-right{
      transform:translate3d(34px,18px,0) scale(.985);
    }

    html.scroll-animations-ready .scroll-item.scroll-item-scale{
      transform:translate3d(0,18px,0) scale(.92);
    }

    html.scroll-animations-ready .scroll-section.is-visible .scroll-item{
      opacity:1;
      transform:translate3d(0,0,0) scale(1);
      filter:blur(0);
    }

    /* Images get a subtle cinematic entrance */
    html.scroll-animations-ready .scroll-media{
      overflow:hidden;
    }

    html.scroll-animations-ready .scroll-media img{
      transform:scale(1.075);
      filter:saturate(.88) brightness(.9);
      transition:
        transform 1.35s cubic-bezier(.2,.78,.16,1),
        filter 1.1s ease;
      transition-delay:220ms;
      will-change:transform,filter;
    }

    html.scroll-animations-ready .scroll-section.is-visible .scroll-media img{
      transform:scale(1);
      filter:saturate(1) brightness(1);
    }

    /* Decorative accent line that grows as the section appears */
    html.scroll-animations-ready .scroll-section::before{
      content:"";
      position:absolute;
      z-index:4;
      top:0;
      right:50%;
      width:0;
      height:4px;
      border-radius:999px;
      background:linear-gradient(90deg,var(--orange),var(--orange-2));
      transform:translateX(50%);
      opacity:.9;
      transition:width .8s .12s cubic-bezier(.2,.78,.16,1);
      pointer-events:none;
    }

    html.scroll-animations-ready .scroll-section.is-visible::before{
      width:min(150px,32vw);
    }

    /* Hero enters smoothly on initial page load */
    html.scroll-animations-ready .hero.scroll-section,
    html.scroll-animations-ready .arrival-showcase.scroll-section{
      transform-origin:center center;
    }

    /* Keep cards interactive after reveal */
    .scroll-section.is-visible .service-card,
    .scroll-section.is-visible .check-card,
    .scroll-section.is-visible .guarantee,
    .scroll-section.is-visible .review,
    .scroll-section.is-visible .trust-item{
      backface-visibility:hidden;
    }

    @media(max-width:820px){
      html.scroll-animations-ready .scroll-section{
        --section-y:38px;
        filter:blur(6px);
      }

      html.scroll-animations-ready .scroll-section.scroll-from-right{
        --section-x:34px;
      }

      html.scroll-animations-ready .scroll-section.scroll-from-left{
        --section-x:-34px;
      }

      html.scroll-animations-ready .scroll-item{
        transform:translate3d(0,25px,0) scale(.985);
        transition-delay:calc(var(--reveal-order,0) * 65ms + 100ms);
      }
    }

    @media(prefers-reduced-motion:reduce){
      html.scroll-animations-ready .scroll-section,
      html.scroll-animations-ready .scroll-item,
      html.scroll-animations-ready .scroll-media img{
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
        transition:none !important;
      }

      html.scroll-animations-ready .scroll-section::before{
        width:min(150px,32vw) !important;
        transition:none !important;
      }
    }


    /* =========================================================
       White service-card content areas
       ========================================================= */
    .services .service-card{
      background:#ffffff;
      border-color:rgba(255,255,255,.16);
    }

    .services .service-body{
      background:#ffffff !important;
      color:#18333c !important;
      padding:22px 21px 24px;
      border-top:1px solid #e5eded;
    }

    .services .service-body h3{
      color:#043b50 !important;
      margin:0 0 9px;
      font-weight:900;
    }

    .services .service-body p{
      color:#64777d !important;
      margin:0;
      line-height:1.9;
    }

    .services .service-link{
      color:#e97800 !important;
      font-weight:900;
    }

    .services .service-link:hover{
      color:#043b50 !important;
    }

    .services .service-number{
      color:#ffad00;
      background:rgba(3,37,51,.88);
    }

    .services .service-card:hover{
      border-color:rgba(255,173,0,.72);
      box-shadow:0 26px 58px rgba(0,0,0,.30);
    }

    @media(max-width:560px){
      .services .service-body{
        padding:18px 16px 20px;
      }

      .services .service-body h3{
        font-size:16px;
      }

      .services .service-body p,
      .services .service-link{
        font-size:11px;
      }
    }



    /* Moving international shipping announcement */
    .topbar{
      overflow:hidden;
      background:#111;
    }

    .topbar-marquee{
      width:100%;
      min-height:40px;
      display:flex;
      align-items:center;
      overflow:hidden;
      direction:ltr;
      white-space:nowrap;
      position:relative;
    }

    .topbar-marquee-track{
      display:flex;
      align-items:center;
      width:max-content;
      flex-shrink:0;
      will-change:transform;
      animation:topbarMarquee 20s linear infinite !important;
    }

    .topbar-marquee-group{
      min-width:100vw;
      flex-shrink:0;
      display:flex;
      align-items:center;
      justify-content:space-around;
      gap:70px;
      padding-inline:35px;
    }

    .topbar-marquee-group span{
      direction:rtl;
      color:#fff;
      font-size:13px;
      font-weight:800;
      line-height:40px;
    }

    .topbar-marquee-group span::first-letter{color:var(--orange)}

    @keyframes topbarMarquee{
      from{transform:translate3d(0,0,0)}
      to{transform:translate3d(-50%,0,0)}
    }

    /* Keep this announcement moving even when the device reduces other motion. */
    @media(prefers-reduced-motion:reduce){
      .topbar-marquee-track{
        animation:topbarMarquee 20s linear infinite !important;
      }
    }

    @media(max-width:560px){
      .topbar-marquee-track{
        animation-duration:14s !important;
      }
      .topbar-marquee-group{
        gap:42px;
        padding-inline:20px;
      }
      .topbar-marquee-group span{
        font-size:11px;
      }
    }



    /* =========================================================
       Header logo: far-right position + continuous 360° spin
       ========================================================= */
    @keyframes brandLogoSpin360{
      from{transform:perspective(900px) rotateY(0deg)}
      to{transform:perspective(900px) rotateY(360deg)}
    }

    .brand{
      perspective:900px;
      z-index:5;
    }

    .brand img{
      transform-origin:center center;
      backface-visibility:visible;
      animation:brandLogoSpin360 5s linear infinite !important;
      will-change:transform;
    }

    /* Full-width header layout so the logo reaches the far-right edge. */
    @media(min-width:821px){
      .header .header-inner{
        width:100%;
        max-width:none;
        margin:0;
        padding-inline:18px;
        display:grid;
        grid-template-columns:220px minmax(0,1fr) 220px;
        grid-template-areas:"actions nav brand";
        align-items:center;
        gap:18px;
        direction:ltr;
      }

      .header .brand{
        grid-area:brand;
        justify-self:end;
        margin:0;
        direction:rtl;
      }

      .header .nav{
        grid-area:nav;
        justify-self:center;
        direction:rtl;
      }

      .header .header-actions{
        grid-area:actions;
        justify-self:start;
        direction:rtl;
      }
    }

    @media(max-width:1050px) and (min-width:821px){
      .header .header-inner{
        grid-template-columns:180px minmax(0,1fr) 180px;
        gap:10px;
      }
    }

    @media(max-width:820px){
      .header .header-inner{
        width:100%;
        max-width:none;
        margin:0;
        padding:0 14px 0 66px;
        position:relative;
      }

      .header .brand{
        position:absolute;
        top:50%;
        right:14px;
        left:auto;
        margin:0 !important;
        transform:translateY(-50%);
      }

      .header .header-actions{
        left:14px;
        right:auto;
      }
    }

    /* Keep the logo spinning even when other page animations are reduced. */
    @media(prefers-reduced-motion:reduce){
      .brand img{
        animation:brandLogoSpin360 5s linear infinite !important;
      }
    }



    /* =========================================================
       Enhanced carousel directional transitions
       ========================================================= */
    .hero-carousel{
      --carousel-duration:1.15s;
      perspective:1400px;
    }

    .hero-slide{
      opacity:0;
      z-index:0;
      transform:translate3d(8%,0,0) scale(1.075) rotateY(-2deg);
      transform-origin:center center;
      filter:brightness(.76) saturate(.82) blur(2px);
      clip-path:inset(0 0 0 10%);
      transition:
        opacity var(--carousel-duration) ease,
        transform var(--carousel-duration) cubic-bezier(.18,.78,.18,1),
        filter var(--carousel-duration) ease,
        clip-path var(--carousel-duration) cubic-bezier(.18,.78,.18,1) !important;
      will-change:opacity,transform,filter,clip-path;
      backface-visibility:hidden;
    }

    .hero-slide.active{
      opacity:1;
      z-index:2;
      transform:translate3d(0,0,0) scale(1) rotateY(0);
      filter:brightness(1) saturate(1) blur(0);
      clip-path:inset(0 0 0 0);
    }

    .hero-slide.enter-from-right{
      transform:translate3d(13%,0,0) scale(1.09) rotateY(-3deg);
      clip-path:inset(0 0 0 18%);
    }

    .hero-slide.enter-from-left{
      transform:translate3d(-13%,0,0) scale(1.09) rotateY(3deg);
      clip-path:inset(0 18% 0 0);
    }

    .hero-slide.exit-to-left{
      opacity:0;
      z-index:1;
      transform:translate3d(-11%,0,0) scale(1.035) rotateY(2deg);
      filter:brightness(.72) saturate(.8) blur(2px);
      clip-path:inset(0 15% 0 0);
    }

    .hero-slide.exit-to-right{
      opacity:0;
      z-index:1;
      transform:translate3d(11%,0,0) scale(1.035) rotateY(-2deg);
      filter:brightness(.72) saturate(.8) blur(2px);
      clip-path:inset(0 0 0 15%);
    }

    .hero-slide::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:1;
      pointer-events:none;
      opacity:0;
      transform:translateX(70%) skewX(-16deg);
      background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.2) 50%,transparent 75%);
    }

    .hero-slide.active::before{
      animation:carouselLightSweep .9s .08s ease both;
    }

    @keyframes carouselLightSweep{
      0%{opacity:0;transform:translateX(70%) skewX(-16deg)}
      30%{opacity:.72}
      100%{opacity:0;transform:translateX(-70%) skewX(-16deg)}
    }

    .hero-dots button{
      transition:width .35s ease,background .35s ease,transform .35s ease,box-shadow .35s ease !important;
    }

    .hero-dots button.active{
      transform:scaleY(1.12);
    }

    @media(max-width:560px){
      .hero-carousel{--carousel-duration:.9s}
      .hero-slide.enter-from-right{transform:translate3d(10%,0,0) scale(1.055)}
      .hero-slide.enter-from-left{transform:translate3d(-10%,0,0) scale(1.055)}
      .hero-slide.exit-to-left{transform:translate3d(-9%,0,0) scale(1.025)}
      .hero-slide.exit-to-right{transform:translate3d(9%,0,0) scale(1.025)}
    }

    /* Keep the requested carousel movement active even when the device uses reduced motion. */
    @media(prefers-reduced-motion:reduce){
      .hero-slide{
        transition:
          opacity .75s ease,
          transform .75s ease,
          filter .75s ease,
          clip-path .75s ease !important;
      }
      .hero-slide.active::before{animation:carouselLightSweep .75s ease both !important}
      .hero-dots button{transition:width .3s ease,background .3s ease,transform .3s ease !important}
    }



    /* =========================================================
       Seamless carousel transition — no exposed background
       The outgoing slide stays fully visible underneath while
       the incoming slide fades and softly zooms above it.
       ========================================================= */
    .hero-carousel{
      --carousel-duration:1.05s;
      background:#071d29;
      overflow:hidden;
      isolation:isolate;
    }

    .hero-slide{
      opacity:0;
      z-index:0;
      transform:scale(1.075);
      transform-origin:center center;
      filter:brightness(.92) saturate(.92) blur(1.5px);
      clip-path:none !important;
      transition:
        opacity var(--carousel-duration) ease,
        transform var(--carousel-duration) cubic-bezier(.2,.75,.2,1),
        filter var(--carousel-duration) ease !important;
      will-change:opacity,transform,filter;
    }

    .hero-slide.active{
      opacity:1;
      z-index:3;
      transform:scale(1);
      filter:brightness(1) saturate(1) blur(0);
      clip-path:none !important;
    }

    /* Keep the previous image opaque below the new one until the
       incoming transition finishes, so the dark frame never appears. */
    .hero-slide.exit-to-left,
    .hero-slide.exit-to-right{
      opacity:1 !important;
      z-index:2 !important;
      transform:scale(1.025) !important;
      filter:brightness(.96) saturate(.96) blur(0) !important;
      clip-path:none !important;
      transition:transform var(--carousel-duration) ease,
                 filter var(--carousel-duration) ease !important;
    }

    .hero-slide.enter-from-right,
    .hero-slide.enter-from-left{
      opacity:0;
      z-index:3;
      transform:scale(1.075) !important;
      filter:brightness(.9) saturate(.9) blur(1.5px) !important;
      clip-path:none !important;
    }

    /* Replace the previous directional light sweep with a soft
       center glow that does not expose either side of the frame. */
    .hero-slide::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:1;
      pointer-events:none;
      opacity:0;
      transform:scale(.92);
      background:radial-gradient(circle at center,rgba(255,255,255,.18),transparent 56%);
    }

    .hero-slide.active::before{
      animation:carouselSoftGlow .85s ease both !important;
    }

    @keyframes carouselSoftGlow{
      0%{opacity:0;transform:scale(.92)}
      45%{opacity:.5}
      100%{opacity:0;transform:scale(1.08)}
    }

    @media(max-width:560px){
      .hero-carousel{--carousel-duration:.85s}
      .hero-slide.enter-from-right,
      .hero-slide.enter-from-left{transform:scale(1.045) !important}
      .hero-slide.exit-to-left,
      .hero-slide.exit-to-right{transform:scale(1.015) !important}
    }

    @media(prefers-reduced-motion:reduce){
      .hero-slide{
        transition:opacity .7s ease,transform .7s ease,filter .7s ease !important;
      }
      .hero-slide.active::before{
        animation:carouselSoftGlow .65s ease both !important;
      }
    }


    /* =========================================================
       Attention-grabbing entrance for the first carousel slide
       ========================================================= */
    .hero-carousel.first-slide-intro-running{
      overflow:hidden;
    }

    .hero-slide.first-slide-intro{
      z-index:4 !important;
      animation:firstHeroSlideEntrance 1.55s cubic-bezier(.16,.84,.24,1) both !important;
    }

    .hero-carousel.first-slide-intro-running::after{
      content:"";
      position:absolute;
      inset:0;
      z-index:5;
      pointer-events:none;
      opacity:0;
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,.32),transparent 34%),
        linear-gradient(115deg,transparent 34%,rgba(255,255,255,.22) 48%,transparent 62%);
      animation:firstHeroSlideFlash 1.35s .12s ease-out both !important;
    }

    .hero-slide.first-slide-intro::before{
      animation:firstHeroSlideGlow 1.4s .08s ease-out both !important;
    }

    @keyframes firstHeroSlideEntrance{
      0%{
        opacity:.12;
        transform:scale(1.14) translate3d(0,18px,0);
        filter:brightness(.58) saturate(.72) blur(7px);
      }
      48%{
        opacity:1;
        transform:scale(.985) translate3d(0,0,0);
        filter:brightness(1.12) saturate(1.08) blur(0);
      }
      72%{
        transform:scale(1.018) translate3d(0,0,0);
        filter:brightness(1.04) saturate(1.03) blur(0);
      }
      100%{
        opacity:1;
        transform:scale(1) translate3d(0,0,0);
        filter:brightness(1) saturate(1) blur(0);
      }
    }

    @keyframes firstHeroSlideFlash{
      0%{opacity:0;transform:translateX(38%) scale(1.08)}
      28%{opacity:.68}
      68%{opacity:.2}
      100%{opacity:0;transform:translateX(-38%) scale(1)}
    }

    @keyframes firstHeroSlideGlow{
      0%{opacity:0;transform:scale(.76)}
      42%{opacity:.72;transform:scale(1)}
      100%{opacity:0;transform:scale(1.22)}
    }

    @media(max-width:560px){
      .hero-slide.first-slide-intro{
        animation-duration:1.25s !important;
      }
      .hero-carousel.first-slide-intro-running::after{
        animation-duration:1.1s !important;
      }
    }

    @media(prefers-reduced-motion:reduce){
      .hero-slide.first-slide-intro{
        animation:firstHeroSlideEntrance 1.25s ease-out both !important;
      }
      .hero-carousel.first-slide-intro-running::after{
        animation:firstHeroSlideFlash 1.05s ease-out both !important;
      }
    }

    /* =========================================================
       Animated quick-features strip
       ========================================================= */
    .trust-strip{
      position:relative;
      overflow:hidden;
      isolation:isolate;
    }

    .trust-strip::after{
      content:"";
      position:absolute;
      inset:0;
      z-index:-1;
      pointer-events:none;
      background:
        radial-gradient(circle at 15% 50%,rgba(255,151,0,.10),transparent 25%),
        radial-gradient(circle at 85% 50%,rgba(4,59,80,.08),transparent 28%);
      animation:trustBackgroundDrift 7s ease-in-out infinite alternate !important;
    }

    .trust-strip .trust-item{
      position:relative;
      overflow:hidden;
      transform-origin:center;
      transition:
        transform .35s cubic-bezier(.2,.78,.16,1),
        box-shadow .35s ease,
        border-color .35s ease,
        background-color .35s ease !important;
    }

    .trust-strip.is-visible .trust-item{
      animation:trustCardFloat 4.2s ease-in-out infinite !important;
      animation-delay:calc(900ms + var(--reveal-order,0) * 180ms) !important;
    }

    .trust-strip .trust-item::after{
      content:"";
      position:absolute;
      top:-45%;
      bottom:-45%;
      width:38%;
      right:-55%;
      pointer-events:none;
      transform:rotate(18deg);
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
      opacity:0;
    }

    .trust-strip.is-visible .trust-item::after{
      animation:trustCardShine 5.2s ease-in-out infinite !important;
      animation-delay:calc(1.2s + var(--reveal-order,0) * 420ms) !important;
    }

    .trust-strip .trust-icon{
      position:relative;
      transition:transform .35s ease,box-shadow .35s ease !important;
      animation:trustIconPulse 2.8s ease-in-out infinite !important;
      animation-delay:calc(var(--reveal-order,0) * 160ms) !important;
    }

    .trust-strip .trust-item:hover{
      transform:translateY(-9px) scale(1.035) !important;
      border-color:rgba(255,151,0,.55) !important;
      background:#fffdf8;
      box-shadow:0 18px 40px rgba(4,59,80,.15) !important;
      z-index:3;
    }

    .trust-strip .trust-item:hover .trust-icon{
      transform:rotateY(360deg) scale(1.12) !important;
      box-shadow:0 12px 25px rgba(238,127,0,.25);
    }

    @keyframes trustCardFloat{
      0%,100%{transform:translateY(0) scale(1)}
      50%{transform:translateY(-5px) scale(1.012)}
    }

    @keyframes trustIconPulse{
      0%,100%{transform:translateY(0) rotate(0deg)}
      50%{transform:translateY(-4px) rotate(5deg)}
    }

    @keyframes trustCardShine{
      0%,62%{right:-55%;opacity:0}
      70%{opacity:.55}
      88%{right:125%;opacity:.18}
      100%{right:125%;opacity:0}
    }

    @keyframes trustBackgroundDrift{
      from{transform:translateX(-1.5%) scale(1)}
      to{transform:translateX(1.5%) scale(1.035)}
    }

    @media(max-width:560px){
      .trust-strip.is-visible .trust-item{
        animation-duration:3.8s !important;
      }

      .trust-strip .trust-item:hover{
        transform:translateY(-6px) scale(1.025) !important;
      }
    }

    /* Keep the requested effects enabled even when the device reduces motion. */
    @media(prefers-reduced-motion:reduce){
      .trust-strip::after{animation:trustBackgroundDrift 7s ease-in-out infinite alternate !important}
      .trust-strip.is-visible .trust-item{animation:trustCardFloat 4.2s ease-in-out infinite !important}
      .trust-strip.is-visible .trust-item::after{animation:trustCardShine 5.2s ease-in-out infinite !important}
      .trust-strip .trust-icon{animation:trustIconPulse 2.8s ease-in-out infinite !important}
    }



    /* =========================================================
       Individual image transitions across the full landing page
       ========================================================= */
    html.image-reveal-ready main img.image-scroll-reveal{
      --image-enter-x:0px;
      --image-enter-y:54px;
      --image-enter-scale:.94;
      opacity:0 !important;
      transform:
        translate3d(var(--image-enter-x),var(--image-enter-y),0)
        scale(var(--image-enter-scale)) !important;
      filter:blur(12px) saturate(.72) brightness(.78) !important;
      clip-path:inset(12% 8% 12% 8% round 28px);
      transition:
        opacity .85s ease,
        transform 1.15s cubic-bezier(.16,.84,.24,1),
        filter 1.05s ease,
        clip-path 1.15s cubic-bezier(.16,.84,.24,1) !important;
      transition-delay:var(--image-delay,0ms) !important;
      will-change:opacity,transform,filter,clip-path;
      backface-visibility:hidden;
    }

    html.image-reveal-ready main img.image-scroll-reveal.image-from-right{
      --image-enter-x:72px;
      --image-enter-y:18px;
      --image-enter-scale:.96;
      clip-path:inset(5% 0 5% 28% round 28px);
    }

    html.image-reveal-ready main img.image-scroll-reveal.image-from-left{
      --image-enter-x:-72px;
      --image-enter-y:18px;
      --image-enter-scale:.96;
      clip-path:inset(5% 28% 5% 0 round 28px);
    }

    html.image-reveal-ready main img.image-scroll-reveal.image-zoom-in{
      --image-enter-x:0px;
      --image-enter-y:10px;
      --image-enter-scale:.84;
      clip-path:inset(16% 16% 16% 16% round 40px);
    }

    html.image-reveal-ready main img.image-scroll-reveal.image-rotate-in{
      --image-enter-x:0px;
      --image-enter-y:42px;
      --image-enter-scale:.92;
      rotate:-2deg;
    }

    html.image-reveal-ready main img.image-scroll-reveal.image-in-view{
      opacity:1 !important;
      transform:translate3d(0,0,0) scale(1) !important;
      rotate:0deg;
      filter:blur(0) saturate(1) brightness(1) !important;
      clip-path:inset(0 0 0 0 round 0);
    }

    /* A soft travelling highlight when an image arrives */
    .image-reveal-frame{
      position:relative;
      overflow:hidden;
      isolation:isolate;
    }

    .image-reveal-frame::after{
      content:"";
      position:absolute;
      z-index:5;
      inset:-35% auto -35% -45%;
      width:30%;
      pointer-events:none;
      opacity:0;
      transform:skewX(-18deg);
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
    }

    .image-reveal-frame.image-frame-in-view::after{
      animation:imageRevealShine 1.05s .32s ease-out both;
    }

    @keyframes imageRevealShine{
      0%{left:-45%;opacity:0}
      18%{opacity:.65}
      100%{left:120%;opacity:0}
    }

    /* Reverse the exit direction based on the user's current scroll direction. */
    body.scroll-direction-up main img.image-scroll-reveal:not(.image-in-view){
      --image-enter-y:-38px;
    }

    body.scroll-direction-down main img.image-scroll-reveal:not(.image-in-view){
      --image-enter-y:38px;
    }

    @media(max-width:820px){
      html.image-reveal-ready main img.image-scroll-reveal{
        --image-enter-y:36px;
        clip-path:inset(9% 5% 9% 5% round 20px);
        transition-duration:.78s,1s,.9s,1s !important;
      }

      html.image-reveal-ready main img.image-scroll-reveal.image-from-right{
        --image-enter-x:40px;
      }

      html.image-reveal-ready main img.image-scroll-reveal.image-from-left{
        --image-enter-x:-40px;
      }
    }



    /* =========================================================
       Final responsive overflow fix
       Prevent side white gaps and keep the floating call button
       fully inside the viewport on every screen size.
       ========================================================= */
    html,
    body{
      width:100%;
      max-width:100%;
      overflow-x:hidden;
    }

    @supports (overflow:clip){
      html,
      body{overflow-x:clip}
    }

    body,
    main,
    header,
    footer,
    section,
    .topbar,
    .hero-carousel{
      position:relative;
      max-width:100%;
    }

    .container,
    .header-inner,
    .hero-carousel,
    .services-grid,
    .trust-grid,
    .about-grid,
    .process-layout,
    .packing-grid,
    .coverage-grid,
    .faq-layout,
    .quote-grid,
    .footer-grid{
      min-width:0;
    }

    .services-grid > *,
    .trust-grid > *,
    .about-grid > *,
    .process-layout > *,
    .packing-grid > *,
    .coverage-grid > *,
    .faq-layout > *,
    .quote-grid > *,
    .footer-grid > *{
      min-width:0;
      max-width:100%;
    }

    img,
    svg,
    video,
    iframe,
    input,
    select,
    textarea{
      max-width:100%;
    }

    .section-heading,
    .section-copy,
    .service-body,
    .timeline-content,
    .coverage-overlay,
    .promo-content,
    .quote-form,
    .review,
    .faq-item{
      overflow-wrap:anywhere;
    }

    .floating-call{
      left:max(14px,env(safe-area-inset-left)) !important;
      right:auto !important;
      bottom:max(14px,env(safe-area-inset-bottom)) !important;
      max-width:calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right));
      box-sizing:border-box;
      transform:translateZ(0);
      isolation:isolate;
    }

    @media(max-width:1050px){
      .process-label{right:0}
    }

    @media(max-width:820px){
      .header .header-inner{
        overflow:visible;
      }

      .nav{
        width:100%;
        max-width:100vw;
      }

      .floating-call{
        left:max(12px,env(safe-area-inset-left)) !important;
        bottom:max(12px,env(safe-area-inset-bottom)) !important;
      }
    }

    @media(max-width:560px){
      .container{
        width:calc(100% - 24px) !important;
        max-width:100%;
      }

      .section{
        padding:58px 0;
      }

      .header .header-inner{
        height:68px;
        min-height:68px;
        padding:0 62px 0 62px !important;
      }

      .header .brand{
        right:10px;
      }

      .header .brand img{
        width:116px !important;
        height:52px !important;
      }

      .header .header-actions{
        left:10px;
      }

      .menu-toggle{
        width:42px;
        height:42px;
        border-radius:12px;
      }

      .topbar-marquee-group{
        min-width:100vw;
        max-width:none;
      }

      .hero-dots{
        max-width:calc(100% - 24px);
      }

      .floating-call{
        width:54px !important;
        min-width:54px;
        max-width:54px;
        height:54px !important;
        padding:0 !important;
        gap:0 !important;
        justify-content:center;
        border-radius:50%;
        left:max(10px,env(safe-area-inset-left)) !important;
        bottom:max(10px,env(safe-area-inset-bottom)) !important;
      }

      .floating-call > span:last-child{
        display:none;
      }

      .floating-call-icon{
        width:36px !important;
        height:36px !important;
        flex:0 0 36px;
      }

      .floating-call svg{
        width:18px;
        height:18px;
      }

      .process-label{
        right:8px;
        left:auto;
        max-width:calc(100% - 16px);
      }

      .promo-content,
      .quote-form,
      .review,
      .guarantee,
      .check-card,
      .service-body{
        min-width:0;
      }
    }

    @media(max-width:380px){
      .header .brand img{
        width:102px !important;
        height:48px !important;
      }

      .header .header-inner{
        padding-inline:56px !important;
      }

      .section-heading{
        font-size:27px;
      }

      .hero-dots{
        bottom:9px;
      }
    }



    /* =========================================================
       Video showcase section
       ========================================================= */
    .video-showcase{
      background:linear-gradient(180deg,#fff 0%,#f7faf9 100%);
    }

    .video-showcase-box{
      display:grid;
      grid-template-columns:.92fr 1.08fr;
      gap:28px;
      align-items:center;
      background:#ffffff;
      border:1px solid var(--line);
      border-radius:34px;
      padding:30px;
      box-shadow:0 24px 60px rgba(4,59,80,.08);
      overflow:hidden;
      position:relative;
    }

    .video-showcase-box::before{
      content:"";
      position:absolute;
      width:220px;
      height:220px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(255,151,0,.14),transparent 70%);
      top:-80px;
      left:-80px;
      pointer-events:none;
    }

    .video-copy{position:relative;z-index:1}
    .video-copy .section-copy{max-width:100%}
    .video-features{display:grid;gap:12px;margin:22px 0 28px}
    .video-feature{
      display:flex;
      align-items:flex-start;
      gap:10px;
      background:#fff8eb;
      border:1px solid #ffe3b3;
      border-radius:16px;
      padding:12px 14px;
      color:#294149;
      font-size:13px;
      font-weight:800;
    }
    .video-feature::before{
      content:"▶";
      width:24px;
      height:24px;
      flex:0 0 24px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:linear-gradient(135deg,var(--orange),var(--orange-2));
      color:#fff;
      font-size:10px;
      margin-top:1px;
    }

    .video-actions{display:flex;gap:12px;flex-wrap:wrap}

    .video-frame{
      position:relative;
      border-radius:28px;
      overflow:hidden;
      background:#072c3b;
      box-shadow:0 30px 65px rgba(3,37,51,.22);
      min-height:100%;
    }

    .video-frame::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      border:1px solid rgba(255,255,255,.12);
      border-radius:28px;
    }

    .video-embed{
      position:relative;
      width:100%;
      aspect-ratio:16 / 9;
      background:#021e2b;
    }

    .video-embed iframe{
      width:100%;
      height:100%;
      border:0;
      display:block;
    }

    .video-badge{
      position:absolute;
      right:18px;
      top:18px;
      z-index:2;
      display:inline-flex;
      align-items:center;
      gap:8px;
      background:rgba(7,44,59,.86);
      color:#fff;
      padding:10px 14px;
      border-radius:999px;
      backdrop-filter:blur(8px);
      font-size:12px;
      font-weight:900;
      box-shadow:0 10px 24px rgba(0,0,0,.18);
    }

    .video-note{
      padding:16px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      color:#dce8ec;
      font-size:12px;
      font-weight:700;
      background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
    }

    .video-note b{color:#fff}

    /* =========================================================
       Storage section
       ========================================================= */
    .storage-section{background:var(--paper-2)}
    .storage-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:22px;
      margin-top:36px;
    }

    .storage-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:28px;
      overflow:hidden;
      box-shadow:0 18px 46px rgba(4,59,80,.08);
      transition:.3s ease;
      display:flex;
      flex-direction:column;
      height:100%;
    }

    .storage-card:hover{
      transform:translateY(-8px);
      box-shadow:0 28px 56px rgba(4,59,80,.12);
      border-color:rgba(255,151,0,.4);
    }

    .storage-image{
      position:relative;
      aspect-ratio:16 / 10;
      overflow:hidden;
      background:#e8eff1;
    }

    .storage-image img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .storage-tag{
      position:absolute;
      top:16px;
      right:16px;
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      padding:9px 12px;
      background:rgba(4,59,80,.85);
      color:#fff;
      font-size:11px;
      font-weight:900;
      backdrop-filter:blur(8px);
    }

    .storage-body{padding:22px 22px 24px;display:grid;gap:14px;flex:1}
    .storage-body h3{margin:0;color:#043b50;font-size:22px;line-height:1.4}
    .storage-body p{margin:0;color:#61767d;font-size:13px;line-height:2}
    .storage-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
    .storage-list li{display:flex;align-items:flex-start;gap:10px;color:#284149;font-size:12px;font-weight:800}
    .storage-list li::before{
      content:"✓";
      width:22px;
      height:22px;
      flex:0 0 22px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:#fff2d8;
      color:var(--orange-2);
      font-size:12px;
      margin-top:1px;
    }

    @media(max-width:920px){
      .video-showcase-box,
      .storage-grid{grid-template-columns:1fr}
      .video-showcase-box{padding:22px}
    }

    @media(max-width:560px){
      .video-showcase-box{padding:16px;border-radius:24px}
      .video-frame,.video-frame::after{border-radius:22px}
      .video-badge{top:12px;right:12px;font-size:10px;padding:8px 10px}
      .video-note{padding:12px 14px;font-size:11px;align-items:flex-start;flex-direction:column}
      .video-feature{font-size:12px;padding:10px 12px}
      .video-actions{display:grid;grid-template-columns:1fr}
      .storage-grid{gap:18px}
      .storage-body{padding:18px 16px 20px}
      .storage-body h3{font-size:18px}
      .storage-body p,.storage-list li{font-size:11px}
    }



    /* =========================================================
       Simplified embedded video + stacked mobile call buttons
       ========================================================= */
    .video-showcase{
      background:linear-gradient(180deg,#ffffff 0%,#f5f9f8 100%);
    }

    .video-section-heading{
      margin-bottom:30px;
    }

    .video-frame-full{
      width:min(100%,980px);
      margin-inline:auto;
      border-radius:30px;
      padding:8px;
      background:linear-gradient(135deg,#043b50,#021e2b);
      box-shadow:0 28px 70px rgba(4,59,80,.22);
    }

    .video-frame-full .video-embed{
      border-radius:23px;
      overflow:hidden;
    }

    .floating-call-stack{
      position:fixed;
      z-index:999;
      left:max(18px,calc((100vw - var(--container))/2 + 18px));
      bottom:max(18px,env(safe-area-inset-bottom));
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:10px;
      pointer-events:none;
    }

    .floating-call-stack .floating-call{
      position:relative !important;
      left:auto !important;
      right:auto !important;
      bottom:auto !important;
      max-width:none !important;
      pointer-events:auto;
    }


    .floating-call-stack button.floating-call{
      border:2px solid #fff;
      appearance:none;
      -webkit-appearance:none;
      text-align:inherit;
    }

    .floating-call-secondary{
      display:none !important;
      background:linear-gradient(135deg,#07516a,#043b50) !important;
      color:#fff !important;
      animation-delay:.35s !important;
    }

    .floating-call-secondary .floating-call-icon{
      background:var(--orange);
      color:#171717;
    }

    @media(max-width:820px){
      .floating-call-stack{
        left:max(12px,env(safe-area-inset-left));
        bottom:max(12px,env(safe-area-inset-bottom));
        gap:8px;
        max-width:calc(100vw - 24px);
      }
    }

    @media(max-width:560px){
      .video-section-heading{margin-bottom:20px}
      .video-frame-full{padding:5px;border-radius:22px}
      .video-frame-full .video-embed{border-radius:17px}

      .floating-call-stack{
        left:max(10px,env(safe-area-inset-left));
        bottom:max(10px,env(safe-area-inset-bottom));
        width:auto;
      }

      .floating-call-stack .floating-call{
        display:flex !important;
        width:auto !important;
        min-width:158px !important;
        max-width:calc(100vw - 20px) !important;
        height:50px !important;
        padding:0 13px 0 7px !important;
        border-radius:999px !important;
        justify-content:flex-start !important;
        gap:9px !important;
        font-size:12px !important;
        direction:ltr;
      }

      .floating-call-stack .floating-call-number{
        display:inline !important;
        direction:ltr;
        white-space:nowrap;
        font-weight:900;
        letter-spacing:.15px;
      }

      .floating-call-stack .floating-call-icon{
        width:34px !important;
        height:34px !important;
        flex:0 0 34px !important;
      }

      .floating-call-secondary{
        display:flex !important;
      }
    }



    /* =========================================================
       Floating video after 15% page scroll
       ========================================================= */
    .floating-video-player{
      position:fixed;
      z-index:998;
      right:max(16px,env(safe-area-inset-right));
      bottom:max(16px,env(safe-area-inset-bottom));
      width:min(360px,calc(100vw - 32px));
      padding:6px;
      border-radius:20px;
      background:linear-gradient(135deg,#043b50,#021e2b);
      box-shadow:0 24px 60px rgba(2,30,43,.38);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transform:translate3d(0,32px,0) scale(.9);
      transform-origin:right bottom;
      transition:opacity .35s ease,transform .45s cubic-bezier(.2,.78,.16,1),visibility .35s ease;
      isolation:isolate;
    }

    .floating-video-player.is-visible{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transform:translate3d(0,0,0) scale(1);
    }

    .floating-video-shell{
      position:relative;
      overflow:hidden;
      border-radius:15px;
      background:#000;
      aspect-ratio:16 / 9;
    }

    .floating-video-shell iframe{
      width:100%;
      height:100%;
      display:block;
      border:0;
    }

    .floating-video-close{
      position:absolute;
      z-index:3;
      top:9px;
      left:9px;
      width:32px;
      height:32px;
      border:1px solid rgba(255,255,255,.35);
      border-radius:50%;
      display:grid;
      place-items:center;
      padding:0;
      background:rgba(2,30,43,.82);
      color:#fff;
      font-size:18px;
      line-height:1;
      box-shadow:0 6px 18px rgba(0,0,0,.24);
      backdrop-filter:blur(8px);
      transition:transform .2s ease,background .2s ease;
    }

    .floating-video-close:hover{
      transform:scale(1.08);
      background:#ed3345;
    }

    .floating-video-label{
      position:absolute;
      z-index:2;
      right:9px;
      top:9px;
      max-width:calc(100% - 58px);
      padding:7px 10px;
      border-radius:999px;
      background:rgba(2,30,43,.76);
      color:#fff;
      font-size:10px;
      font-weight:900;
      backdrop-filter:blur(8px);
      pointer-events:none;
    }

    @media(max-width:820px){
      .floating-video-player{
        width:min(300px,calc(100vw - 24px));
        right:max(12px,env(safe-area-inset-right));
        bottom:max(12px,env(safe-area-inset-bottom));
      }
    }

    @media(max-width:560px){
      .floating-video-player{
        width:min(230px,calc(100vw - 24px));
        right:max(10px,env(safe-area-inset-right));
        /* Keep the video above the two stacked call buttons. */
        bottom:calc(126px + env(safe-area-inset-bottom));
        padding:4px;
        border-radius:16px;
      }

      .floating-video-shell{border-radius:12px}
      .floating-video-close{top:7px;left:7px;width:28px;height:28px;font-size:16px}
      .floating-video-label{top:7px;right:7px;font-size:9px;padding:6px 8px}
    }

    @media(max-width:380px){
      .floating-video-player{
        width:190px;
        bottom:calc(124px + env(safe-area-inset-bottom));
      }

      .floating-video-label{display:none}
    }



    /* Show storage images at their full natural size without cropping */
    .storage-image{
      aspect-ratio:auto !important;
      height:auto !important;
      min-height:0 !important;
      display:block !important;
      background:#eef3f3;
    }

    .storage-image img{
      position:relative !important;
      width:100% !important;
      height:auto !important;
      min-height:0 !important;
      max-height:none !important;
      object-fit:contain !important;
      object-position:center !important;
      background:#eef3f3;
    }



    /* =========================================================
       Floating call confirmation step
       ========================================================= */
    .call-confirm-modal{
      position:fixed;
      inset:0;
      z-index:1400;
      display:grid;
      place-items:center;
      padding:18px;
      background:rgba(2,30,43,.58);
      backdrop-filter:blur(8px);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .25s ease,visibility .25s ease;
    }

    .call-confirm-modal.is-open{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }

    .call-confirm-box{
      width:min(100%,390px);
      position:relative;
      overflow:hidden;
      border-radius:28px;
      background:#fffdf8;
      border:1px solid rgba(255,151,0,.22);
      box-shadow:0 28px 80px rgba(0,0,0,.28);
      padding:24px 20px 20px;
      text-align:center;
      transform:translateY(18px) scale(.96);
      transition:transform .32s cubic-bezier(.2,.78,.16,1);
    }

    .call-confirm-modal.is-open .call-confirm-box{
      transform:translateY(0) scale(1);
    }

    .call-confirm-box::before{
      content:"";
      position:absolute;
      width:180px;
      height:180px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(255,151,0,.18),transparent 70%);
      top:-90px;
      right:-70px;
      pointer-events:none;
    }

    .call-confirm-close{
      position:absolute;
      top:12px;
      left:12px;
      width:34px;
      height:34px;
      border:0;
      border-radius:50%;
      background:#eef4f3;
      color:#043b50;
      display:grid;
      place-items:center;
      font-size:20px;
      line-height:1;
      z-index:2;
      transition:.2s ease;
    }

    .call-confirm-close:hover{
      background:#ed3345;
      color:#fff;
      transform:rotate(90deg);
    }

    .call-confirm-icon{
      width:62px;
      height:62px;
      margin:0 auto 12px;
      border-radius:22px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg,var(--orange),var(--orange-2));
      color:#fff;
      box-shadow:0 14px 30px rgba(238,127,0,.25);
      animation:callConfirmIconRing 1.75s ease-in-out infinite;
    }

    .call-confirm-icon svg{
      width:28px;
      height:28px;
    }

    .call-confirm-title{
      position:relative;
      z-index:1;
      margin:0 0 8px;
      color:#043b50;
      font-size:22px;
      line-height:1.4;
      font-weight:900;
    }

    .call-confirm-text{
      position:relative;
      z-index:1;
      margin:0 auto 15px;
      max-width:300px;
      color:#61767d;
      font-size:13px;
      line-height:1.9;
      font-weight:700;
    }

    .call-confirm-number{
      position:relative;
      z-index:1;
      width:100%;
      min-height:58px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      direction:ltr;
      border-radius:999px;
      background:linear-gradient(135deg,#043b50,#021e2b);
      color:#fff;
      font-size:21px;
      font-weight:900;
      letter-spacing:.4px;
      box-shadow:0 16px 36px rgba(4,59,80,.22);
      transition:.25s ease;
    }

    .call-confirm-number:hover{
      transform:translateY(-3px);
      box-shadow:0 20px 44px rgba(4,59,80,.32);
    }

    .call-confirm-number span{
      width:38px;
      height:38px;
      flex:0 0 38px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg,var(--orange),var(--orange-2));
      color:#fff;
    }

    .call-confirm-number svg{
      width:18px;
      height:18px;
    }

    .call-confirm-hint{
      position:relative;
      z-index:1;
      margin:12px 0 0;
      color:#8a9a9f;
      font-size:10px;
      line-height:1.7;
      font-weight:800;
    }

    @keyframes callConfirmIconRing{
      0%,100%{transform:rotate(0deg) scale(1)}
      44%{transform:rotate(-7deg) scale(1.06)}
      70%{transform:rotate(7deg) scale(1.03)}
    }

    @media(max-width:560px){
      .call-confirm-modal{
        align-items:end;
        padding:14px;
      }

      .call-confirm-box{
        width:100%;
        border-radius:26px;
        padding:22px 16px 18px;
      }

      .call-confirm-title{
        font-size:19px;
      }

      .call-confirm-text{
        font-size:12px;
      }

      .call-confirm-number{
        min-height:54px;
        font-size:18px;
      }
    }

    /* Final brand alignment: عباد الرحمن navy + orange */
    .brand img{animation:none !important}
    .services,.coverage{background:linear-gradient(145deg,#031b36,#062b55) !important}
    .footer{background:#021425 !important}
    .quote{background:#031b36 !important}
    .btn-primary{color:#fff !important}
    .topbar{background:#031b36 !important}
    .floating-call-secondary{display:flex !important}
    .floating-call-primary{background:linear-gradient(135deg,#ff6a00,#ff9c21) !important;color:#fff !important}
    .floating-call-secondary{background:linear-gradient(135deg,#0a4a82,#062b55) !important}
    .header-phone a{font-size:14px;font-weight:900;direction:ltr}
    .header-phone a:first-child{color:#ff6a00}
    .service-number{background:rgba(3,27,54,.9) !important;color:#ff9c21 !important}


/* ===== صفحات المدونة والمقال (ديناميكية) ===== */
.page-hero{background:linear-gradient(90deg,rgba(3,27,54,.96),rgba(6,43,85,.82)),var(--ink);color:#fff;padding:72px 0 56px}
.page-hero h1{margin:0 0 12px;font-size:clamp(28px,4.2vw,48px);line-height:1.25;font-weight:900}
.page-hero p{margin:0;max-width:640px;color:#c7d5e6;font-size:14px;line-height:2}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;color:#93a8c2;margin-bottom:14px;flex-wrap:wrap}
.breadcrumb a{color:#dbe6f3}.breadcrumb a:hover{color:var(--orange)}.breadcrumb span{color:var(--orange)}
.page-hero .article-meta{display:flex;gap:16px;color:#c7d5e6;font-size:12px;font-weight:700;margin-top:6px}
.pagination{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:44px 0 8px}
.pagination a{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border:1px solid var(--line);border-radius:13px;font-size:13px;font-weight:800;color:var(--ink);background:#fff;transition:.2s}
.pagination a:hover,.pagination a.active{background:var(--orange);border-color:var(--orange);color:#171717}
.empty-state{text-align:center;padding:60px 20px;color:var(--muted)}
.empty-state p{font-size:15px;line-height:2;margin-bottom:20px}
.article-layout{display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:start}
.article-main{min-width:0}
.article-featured{width:100%;height:auto;display:block;border-radius:20px;margin-bottom:26px;box-shadow:var(--shadow)}
.prose{font-size:15px;line-height:2.05;color:var(--text)}
.prose h2{font-size:clamp(21px,3vw,28px);font-weight:900;color:var(--ink);margin:32px 0 14px;padding-right:14px;border-right:4px solid var(--orange)}
.prose h3{font-size:clamp(17px,2.4vw,22px);font-weight:900;color:var(--ink-soft);margin:24px 0 10px}
.prose p{margin:0 0 17px}.prose ul,.prose ol{padding-right:22px;margin:0 0 18px;display:grid;gap:8px}
.prose li{line-height:2}.prose ul li::marker{color:var(--orange-2)}
.prose img{max-width:100%;height:auto;border-radius:14px;margin:10px 0}
.prose a{color:var(--orange-2);font-weight:800}
.related{margin-top:50px;padding-top:32px;border-top:1px solid var(--line)}
.related h3{font-size:20px;font-weight:900;color:var(--ink);margin-bottom:20px}
.side{position:sticky;top:96px}
.side-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 12px 34px rgba(3,27,54,.08)}
.side-card h3{font-size:16px;font-weight:900;color:var(--ink);margin-bottom:9px}
.side-card p{font-size:12px;color:var(--muted);line-height:1.9;margin-bottom:14px}
@media(max-width:900px){.article-layout{grid-template-columns:1fr}.side{position:static}}
/* بطاقات المقالات: صورة بكامل الحجم بلا قصّ */
.service-card .service-image img{width:100%;height:auto;object-fit:contain}