:root{
    --navy: #1F2A52;
    --navy-deep: #131A34;
    --navy-soft: #24325E;
    --steel: #3E5C99;
    --accent: #5D7FB9;
    --fog: #EFF2F7;
    --concrete: #D6DBE4;
    --ink: #14181C;
    --paper: #FFFFFF;
    --line: rgba(31,42,82,0.14);
    --line-light: rgba(255,255,255,0.12);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'IBM Plex Sans Arabic', sans-serif;
    color:#fff;
    background:var(--navy-deep);
    line-height:1.75;
    overflow-x:hidden;
  }
  h1,h2,h3,.eyebrow{font-family:'Tajawal', sans-serif;}
  .num, .label-en{font-family:'Barlow Condensed', sans-serif; letter-spacing:0.06em;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
  section{position:relative;}

  /* ---------- Reveal ---------- */
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
    html{scroll-behavior:auto;}
  }

  /* ---------- Nav ---------- */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(10,39,64,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 28px;
    min-height:90px;
  }
  .brand{display:flex; flex-direction:column; align-items:center; gap:4px; color:#fff;}
  .brand .mark{
    width:54px; height:54px; flex:none;
  }
  .brand .mark img{width:100%; height:100%; object-fit:contain;}
  .brand .brand-text{
    font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size:17px;
    letter-spacing:0.18em; color:#fff; white-space:nowrap;
  }
  .navlinks{display:flex; gap:30px; font-size:15px; color:#dfe6ec;}
  .navlinks a{position:relative; padding:6px 0; transition:color .2s;}
  .navlinks a:hover{color:#fff;}
  .navlinks a::after{
    content:""; position:absolute; right:0; bottom:0; width:0; height:2px;
    background:var(--accent); transition:width .25s;
  }
  .navlinks a:hover::after{width:100%;}
  .nav-cta{
    background:#fff; color:var(--navy); font-weight:700; font-size:14px;
    padding:10px 20px; border-radius:2px; white-space:nowrap;
  }
  .navtoggle{display:none;}
  @media (max-width:880px){
    .navlinks{display:none;}
    .navtoggle{display:block; color:#fff; font-size:26px; background:none; border:none;}
  }

  /* ---------- Hero ---------- */
  .hero{
    background:radial-gradient(120% 140% at 15% 0%, #163f63 0%, var(--navy-deep) 55%, #081b2c 100%);
    color:#fff; padding:110px 0 140px; overflow:hidden; position:relative;
  }
  .hero::before{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(93,127,185,0.10), transparent 40%);
    pointer-events:none;
  }
  .hero-mark{
    position:absolute; left:-6%; top:50%; transform:translateY(-50%);
    width:520px; height:520px; opacity:0.06; pointer-events:none;
  }
  @media (max-width:900px){ .hero-mark{display:none;} }
  .hero .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:14px; color:var(--accent); letter-spacing:0.15em; font-weight:700; margin-bottom:22px;
  }
  .hero .eyebrow::before{content:""; width:26px; height:2px; background:var(--accent); display:block;}
  .hero h1{
    font-size:clamp(32px, 5.2vw, 58px); font-weight:900; line-height:1.25; max-width:800px;
  }
  .hero h1 em{font-style:normal; color:var(--accent);}
  .hero p.lead{
    max-width:620px; margin-top:22px; font-size:18px; color:#c9d4de;
  }
  .hero .cta-row{display:flex; gap:16px; margin-top:38px; flex-wrap:wrap;}
  .btn{
    display:inline-block; padding:14px 30px; font-weight:700; font-size:15px; border-radius:2px;
    transition:transform .2s, box-shadow .2s;
  }
  .btn-primary{background:#fff; color:var(--navy);}
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,0.25);}
  .btn-ghost{border:1.5px solid rgba(255,255,255,0.35); color:#fff;}
  .btn-ghost:hover{border-color:#fff; transform:translateY(-2px);}

  /* Highway signature element */
  .highway{
    position:relative; margin-top:80px; height:90px;
  }
  .highway .road{
    position:absolute; right:0; left:0; top:50%; height:4px; background:rgba(255,255,255,0.14); transform:translateY(-50%);
  }
  .highway .dashes{
    position:absolute; right:0; left:0; top:50%; height:4px; transform:translateY(-50%);
    background-image:repeating-linear-gradient(to left, var(--accent) 0 26px, transparent 26px 54px);
    animation:drive 3.6s linear infinite;
  }
  @keyframes drive{ from{background-position-x:0;} to{background-position-x:-80px;} }
  .truck{
    position:absolute; top:50%; transform:translateY(-58%); animation:go 3.6s linear infinite;
  }
  @keyframes go{ from{right:100%;} to{right:-6%;} }
  @media (prefers-reduced-motion: reduce){
    .dashes, .truck{animation:none;}
  }
  .stat-row{
    display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:60px;
  }
  .stat{border-right:2px solid rgba(224,145,46,0.5); padding-right:16px;}
  .stat .num{font-size:38px; font-weight:700; color:#fff;}
  .stat .cap{font-size:13px; color:#a9b7c2; margin-top:4px;}
  @media (max-width:780px){ .stat-row{grid-template-columns:repeat(2,1fr);} }

  /* ---------- Page banner (subpages) ---------- */
  .page-banner{
    background:radial-gradient(120% 140% at 15% 0%, #163f63 0%, var(--navy-deep) 55%, #081b2c 100%);
    color:#fff; padding:64px 0 56px; border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .page-banner .crumb{
    display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:#a9b7c2; margin-bottom:18px;
  }
  .page-banner .crumb:hover{color:#fff;}
  .page-banner .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:14px; color:var(--accent); letter-spacing:0.15em; font-weight:700; margin-bottom:16px;
  }
  .page-banner .eyebrow::before{content:""; width:26px; height:2px; background:var(--accent); display:block;}
  .page-banner h1{font-size:clamp(28px,4vw,42px); font-weight:900;}
  .page-banner p{margin-top:14px; max-width:640px; color:#c9d4de; font-size:16px;}

  /* ---------- Section headers ---------- */
  .shead{margin-bottom:48px;}
  .shead .eyebrow{
    color:var(--accent); font-weight:700; font-size:13px; letter-spacing:0.18em;
    display:flex; align-items:center; gap:10px; margin-bottom:10px;
  }
  .shead .eyebrow::before{content:""; width:22px; height:2px; background:var(--accent); display:block;}
  .shead h2{font-size:clamp(26px,3.4vw,40px); font-weight:800; color:#fff;}
  .shead p{margin-top:14px; max-width:640px; color:#c9d4de; font-size:16px;}

  /* ---------- About ---------- */
  .about{padding:100px 0; background:var(--navy-deep);}
  .about-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:start;}
  .about-copy p{color:#c9d4de; font-size:16.5px; margin-bottom:16px;}
  .about-copy strong{color:#fff;}
  .vm-cards{display:grid; gap:18px;}
  .vm-card{
    background:rgba(255,255,255,0.05); border:1px solid var(--line-light); border-radius:4px; padding:26px 28px;
    border-right:4px solid var(--steel);
  }
  .vm-card.mission{border-right-color:var(--accent);}
  .vm-card h3{font-size:19px; color:#fff; margin-bottom:10px; display:flex; align-items:baseline; gap:10px;}
  .vm-card .label-en{font-size:13px; color:#9aa6b3; font-weight:600;}
  .vm-card p{color:#c2ccd6; font-size:15px;}

  /* ---------- Values ---------- */
  .values{padding:100px 0; background:var(--navy-deep); color:#fff;}
  .values .shead h2{color:#fff;}
  .values .shead p{color:#aebac5;}
  .vgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.1);}
  .vcard{background:var(--navy-deep); padding:30px 22px; text-align:right;}
  .vcard .icon{width:40px; height:40px; margin-bottom:18px; color:var(--accent);}
  .vcard h3{font-size:17px; margin-bottom:8px;}
  .vcard p{font-size:13.5px; color:#a3b0bc;}
  @media (max-width:980px){ .vgrid{grid-template-columns:repeat(2,1fr);} }

  /* ---------- Partner reasons ---------- */
  .partner{padding:100px 0; background:var(--navy);}
  .partner .shead h2{color:#fff;}
  .partner .shead p{color:#c9d4de;}
  .pgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.12);}
  .pitem{background:var(--navy); padding:28px 30px; display:flex; gap:18px;}
  .pitem .mk{
    flex:none; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--accent);
    display:flex; align-items:center; justify-content:center; color:var(--accent);
  }
  .pitem h4{font-size:16.5px; color:#fff; margin-bottom:6px;}
  .pitem p{font-size:14px; color:#c2ccd6;}
  @media (max-width:780px){ .pgrid{grid-template-columns:1fr;} }

  /* ---------- Coverage ---------- */
  .coverage{padding:100px 0; background:var(--navy);}
  .coverage .shead h2{color:#fff;}
  .coverage .shead p{color:#c9d4de;}
  .cov-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;}
  .cov-list{list-style:none;}
  .cov-list li{
    display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-light); font-size:16px; color:#dfe6ec;
  }
  .cov-list li .dot{width:10px; height:10px; border-radius:50%; background:var(--accent); flex:none;}
  .cov-list li strong{color:#fff;}
  .hub-svg{width:100%; height:auto;}

  /* ---------- Services ---------- */
  .services{padding:100px 0; background:var(--navy);}
  .services .shead h2, .services .shead .eyebrow{color:#fff;}
  .services .shead p{color:#c9d4de;}
  .services .eyebrow{color:var(--accent);}
  .sgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
  .scard{
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:6px;
    padding:34px 28px; color:#fff; transition:transform .25s, background .25s;
  }
  .scard:hover{transform:translateY(-6px); background:rgba(255,255,255,0.08);}
  .scard .icon{width:44px; height:44px; color:var(--accent); margin-bottom:22px;}
  .scard h3{font-size:20px; margin-bottom:12px;}
  .scard p{font-size:14.5px; color:#c2ccd6;}
  @media (max-width:900px){ .sgrid{grid-template-columns:1fr;} }

  /* ---------- Equipment ---------- */
  .equipment{padding:100px 0; background:var(--navy-deep);}
  .egrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
  .echip{
    border:1px solid var(--line-light); border-radius:4px; padding:18px 20px; font-size:15px; color:#dfe6ec;
    display:flex; align-items:center; gap:12px; background:rgba(255,255,255,0.05);
  }
  .echip .n{font-family:'Barlow Condensed',sans-serif; font-weight:700; color:var(--accent); font-size:15px;}
  @media (max-width:780px){ .egrid{grid-template-columns:1fr 1fr;} }
  @media (max-width:480px){ .egrid{grid-template-columns:1fr;} }

  /* ---------- Org Chart (coded tree, not an image) ---------- */
  .orgchart{padding:100px 0; background:var(--navy);}
  .orgchart .shead h2{color:#fff;}
  .orgchart .shead p{color:#c9d4de;}
  .org-scroll{
    overflow-x:auto; text-align:center; padding:50px 20px;
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:10px;
  }
  .tree, .tree ul{ padding-top:20px; position:relative; transition:all .4s; }
  .tree{ display:inline-block; }
  .tree li{
    float:left; text-align:center; list-style-type:none;
    position:relative; padding:20px 8px 0 8px; transition:all .4s;
  }
  .tree li::before, .tree li::after{
    content:''; position:absolute; top:0; right:50%;
    border-top:2px solid rgba(255,255,255,0.24); width:50%; height:20px;
  }
  .tree li::after{ right:auto; left:50%; border-left:2px solid rgba(255,255,255,0.24); }
  .tree li:only-child::after, .tree li:only-child::before{ display:none; }
  .tree li:only-child{ padding-top:0; }
  .tree li:first-child::before, .tree li:last-child::after{ border:0 none; }
  .tree li:last-child::before{
    border-right:2px solid rgba(255,255,255,0.24); border-radius:0 6px 0 0;
  }
  .tree li:first-child::after{ border-radius:6px 0 0 0; }
  .tree ul ul::before{
    content:''; position:absolute; top:0; left:50%;
    border-left:2px solid rgba(255,255,255,0.24); width:0; height:20px;
  }
  .tree .node{
    border:1px solid rgba(255,255,255,0.18); padding:9px 16px;
    display:inline-block; white-space:nowrap; text-align:center;
    border-radius:5px; font-size:13px; font-weight:600; color:#fff;
    background:var(--accent); box-shadow:0 4px 10px rgba(0,0,0,0.18);
  }
  .tree .node.root{ background:#55606E; font-size:14.5px; padding:13px 24px; }
  .tree .node.dark{ background:var(--navy-deep); }
  @media (max-width:780px){ .org-scroll{ padding:34px 12px; } }

  /* ---------- Clients ---------- */
  .clients{padding:90px 0; background:var(--navy); border-top:1px solid rgba(255,255,255,0.1); border-bottom:1px solid rgba(255,255,255,0.1);}
  .cgrid{
    display:flex; flex-wrap:wrap; gap:22px; justify-content:center; align-items:center;
  }
  .ctag{
    border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.06); padding:12px 20px; font-size:14.5px; font-weight:600; color:#fff;
    border-radius:2px;
  }
  .ctag-logo{
    height:280px; width:auto; object-fit:contain;
  }

  /* ---------- Contact ---------- */
  .contact{padding:100px 0 60px; background:var(--navy-deep); color:#fff;}
  .contact .shead h2, .contact .shead .eyebrow{color:#fff;}
  .contact .shead p{color:#aebac5;}
  .cwrap{display:grid; grid-template-columns:1fr 1fr; gap:50px;}
  .cinfo{display:grid; gap:22px;}
  .cinfo .row{display:flex; gap:16px;}
  .cinfo .ic{
    flex:none; width:42px; height:42px; border-radius:50%; background:rgba(224,145,46,0.15); color:var(--accent);
    display:flex; align-items:center; justify-content:center;
  }
  .cinfo .t{font-size:13px; color:#93a1ad; margin-bottom:3px;}
  .cinfo .v{font-size:16px; color:#fff;}
  .map-frame{
    border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,0.15); height:100%; min-height:320px;
    position:relative; display:block; cursor:pointer;
  }
  .map-frame iframe{
    width:100%; height:100%; min-height:320px; border:0; filter:grayscale(0.3) contrast(1.05);
    pointer-events:none;
  }
  .map-overlay{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(19,26,52,0.55); color:#fff; font-weight:700; font-size:15px;
    opacity:0; transition:opacity .25s ease;
  }
  .map-frame:hover .map-overlay{ opacity:1; }
  footer{
    text-align:center; padding:26px 0; color:#7c8a97; font-size:13px; border-top:1px solid rgba(255,255,255,0.08);
    background:var(--navy-deep);
  }
  footer span{color:var(--accent);}

  @media (max-width:900px){
    .about-grid, .cov-grid, .cwrap{grid-template-columns:1fr;}
  }

  /* ---------- Quote Request Modal ---------- */
  .quote-overlay{
    position:fixed; inset:0; background:rgba(8,14,24,0.72); backdrop-filter:blur(3px);
    z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px;
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .quote-overlay.open{opacity:1; pointer-events:auto;}
  .quote-modal{
    background:#fff; width:100%; max-width:640px; max-height:92vh; overflow-y:auto;
    border-radius:10px; position:relative; box-shadow:0 30px 80px rgba(0,0,0,0.4);
    transform:translateY(16px); transition:transform .3s ease; color:var(--ink);
  }
  .quote-overlay.open .quote-modal{transform:translateY(0);}
  .quote-head{
    background:var(--navy-deep); color:#fff; padding:28px 32px; border-radius:10px 10px 0 0; position:relative;
  }
  .quote-head .eyebrow{color:var(--accent); font-size:13px; font-weight:700; letter-spacing:0.14em; margin-bottom:8px;}
  .quote-head h3{font-size:23px; font-weight:800;}
  .quote-head p{font-size:14px; color:#c9d4de; margin-top:8px;}
  .quote-close{
    position:absolute; left:20px; top:20px; width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,0.1); color:#fff; border:none; font-size:17px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:background .2s;
  }
  .quote-close:hover{background:rgba(255,255,255,0.22);}
  .quote-body{padding:28px 32px 32px; background:#fff;}
  .qf-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .qf-field{display:flex; flex-direction:column; gap:6px;}
  .qf-field.full{grid-column:1 / -1;}
  .qf-field label{font-size:13.5px; font-weight:600; color:var(--navy-deep);}
  .qf-field input, .qf-field select, .qf-field textarea{
    border:1.5px solid var(--concrete); border-radius:5px; padding:11px 13px; font-size:14.5px;
    font-family:inherit; color:var(--ink); background:#fbfcfd; transition:border-color .2s; width:100%;
  }
  .qf-field input:focus, .qf-field select:focus, .qf-field textarea:focus{
    outline:none; border-color:var(--accent); background:#fff;
  }
  .qf-field textarea{resize:vertical; min-height:70px;}
  .qf-submit{
    margin-top:22px; width:100%; background:var(--navy-deep); color:#fff; font-weight:700; font-size:15.5px;
    padding:15px; border:none; border-radius:5px; cursor:pointer; transition:background .2s;
  }
  .qf-submit:hover{background:var(--navy);}
  .qf-submit:disabled{opacity:0.6; cursor:not-allowed;}
  .qf-note{font-size:12.5px; color:#8b93a0; margin-top:12px; text-align:center;}
  .qf-success{text-align:center; padding:16px 0;}
  .qf-success .ok{
    width:64px; height:64px; border-radius:50%; background:rgba(93,127,185,0.14); color:var(--steel);
    display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:30px;
  }
  .qf-success h4{font-size:20px; color:var(--navy-deep); margin-bottom:10px;}
  .qf-success p{color:#4b5560; font-size:15px; margin-bottom:6px;}
  .qf-success .rid{
    display:inline-block; background:var(--fog); border:1px dashed var(--concrete); padding:8px 16px;
    border-radius:5px; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:17px; color:var(--navy-deep); margin:10px 0;
  }
  .qf-error{color:#b23b3b; font-size:13.5px; margin-top:10px; text-align:center;}
  .quote-fab{
    position:fixed; bottom:26px; left:26px; z-index:900; background:var(--navy-deep); color:#fff;
    padding:14px 22px; border-radius:50px; font-weight:700; font-size:14.5px; box-shadow:0 10px 30px rgba(0,0,0,0.3);
    border:none; cursor:pointer; display:flex; align-items:center; gap:8px; transition:transform .2s, background .2s;
  }
  .quote-fab:hover{transform:translateY(-3px); background:var(--navy);}
  @media (max-width:600px){
    .qf-grid{grid-template-columns:1fr;}
    .quote-fab{left:14px; bottom:14px; padding:12px 18px; font-size:13.5px;}
  }