:root{
  --navy-900:#081B2E;
  --navy-800:#0D2B47;
  --navy-700:#173C5E;
  --navy-600:#25547D;
  --navy-500:#3D6D97;
  --orange-700:#8F511F;
  --orange-600:#B8672B;
  --orange-500:#CC7A3C;
  --orange-100:#F4E3D3;
  --sand-100:#F4F5F7;
  --sand-200:#E8EBEF;
  --gray-600:#5B6674;
  --gray-400:#8D97A3;
  --gray-300:#D7DBE1;
  --ink:#0F1B26;
  --white:#FFFFFF;
  --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--sand-100);
  color:var(--ink);
  font-family:'IBM Plex Sans Arabic','Inter',sans-serif;
  line-height:1.7;
  overflow-x:hidden;
}
body.lang-en{font-family:'Inter','IBM Plex Sans Arabic',sans-serif;}
h1,h2,h3,h4{font-family:'Space Grotesk','IBM Plex Sans Arabic',sans-serif; font-weight:600; color:var(--navy-900); line-height:1.25;}
body.lang-ar h1,body.lang-ar h2,body.lang-ar h3,body.lang-ar h4{font-family:'IBM Plex Sans Arabic',sans-serif; font-weight:700;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
body.lang-ar .en{display:none;}
body.lang-en .ar{display:none;}
[data-num]::before{content:attr(data-num);}

/* ---------- NAV ---------- */
header.site-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(8,27,46,0.96); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:1180px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{width:38px; height:38px; flex-shrink:0;}
.brand-text{color:var(--white); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; letter-spacing:1px;}
.brand-sub{color:var(--gray-400); font-size:11px; letter-spacing:2px; text-transform:uppercase;}
nav.links{display:flex; gap:28px; align-items:center;}
nav.links a{color:var(--sand-200); font-size:14.5px; font-weight:500; padding:6px 0; border-bottom:2px solid transparent; transition:border-color .2s, color .2s;}
nav.links a:hover{color:var(--white); border-color:var(--orange-500);}
.lang-btn{
  background:transparent; border:1px solid rgba(255,255,255,0.28); color:var(--white);
  padding:8px 16px; border-radius:100px; font-size:13.5px; font-weight:600; cursor:pointer;
  transition:background .2s;
}
.lang-btn:hover{background:rgba(255,255,255,0.1);}
.mobile-toggle{display:none; background:none; border:none; color:var(--white); font-size:26px; cursor:pointer;}

@media (max-width:920px){
  nav.links{display:none;}
  .mobile-toggle{display:block;}
  nav.links.open{
    display:flex; flex-direction:column; position:absolute; top:70px; inset-inline:0;
    background:var(--navy-900); padding:20px 28px; gap:18px; border-top:1px solid rgba(255,255,255,0.1);
  }
}

/* ---------- HERO ---------- */
.hero{
  position:relative; color:var(--white);
  padding:96px 0 110px; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(8,27,46,0.90) 0%, rgba(10,34,58,0.82) 45%, rgba(8,27,46,0.95) 100%),
    url('../img/hero-riyadh.jpg') center 30%/cover no-repeat;
}
.hero-grid{
  position:absolute; inset:0; opacity:0.18;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom, black, transparent 85%);
}
.hero-inner{position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:0 28px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--orange-500); font-size:13px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  border:1px solid rgba(204,122,60,0.5); padding:7px 16px; border-radius:100px; margin-bottom:28px;
}
.hero h1{color:var(--white); font-size:clamp(34px,5vw,58px); max-width:820px; margin-bottom:20px;}
.hero p.lead{color:var(--sand-200); font-size:19px; max-width:640px; margin-bottom:36px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:64px;}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:8px;
  font-weight:600; font-size:15px; cursor:pointer; border:1px solid transparent; transition:transform .15s, background .2s;
}
.btn-primary{background:var(--orange-600); color:var(--white);}
.btn-primary:hover{background:var(--orange-500);}
.btn-ghost{background:transparent; border-color:rgba(255,255,255,0.3); color:var(--white);}
.btn-ghost:hover{background:rgba(255,255,255,0.08);}
.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.14); border-radius:12px; overflow:hidden;
}
.hero-stats .cell{background:rgba(255,255,255,0.03); padding:22px 20px;}
.hero-stats .num{font-family:'Space Grotesk',sans-serif; font-size:30px; font-weight:700; color:var(--white);}
.hero-stats .lbl{font-size:13px; color:var(--gray-400); margin-top:4px;}
@media (max-width:760px){.hero-stats{grid-template-columns:repeat(2,1fr);}}

/* ---------- SECTION shell ---------- */
section{padding:88px 0;}
.section-tag{
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
  font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange-600);
}
.section-tag .line{width:28px; height:2px; background:var(--orange-600);}
h2.section-title{font-size:clamp(26px,3.4vw,38px); max-width:640px;}
p.section-lead{color:var(--gray-600); font-size:16.5px; max-width:660px; margin-top:14px;}
.section-head{margin-bottom:52px;}
.alt-bg{background:var(--white); border-top:1px solid var(--gray-300); border-bottom:1px solid var(--gray-300);}

/* ---------- ABOUT ---------- */
.about-grid{max-width:820px;}
.about-copy p{color:var(--gray-600); margin-bottom:16px; font-size:16.5px;}
.about-copy strong{color:var(--navy-900);}

/* ---------- VALUES ---------- */
.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:860px){.values-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.values-grid{grid-template-columns:1fr;}}
.value-card{background:var(--white); border:1px solid var(--gray-300); border-radius:var(--radius); padding:28px;}
.value-card .vnum{font-family:'Space Grotesk',sans-serif; color:var(--orange-600); font-weight:700; font-size:13px; letter-spacing:1px;}
.value-card h3{font-size:19px; margin:10px 0 8px;}
.value-card p{color:var(--gray-600); font-size:14.5px;}

/* ---------- VISION MISSION ---------- */
.vm-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media (max-width:760px){.vm-grid{grid-template-columns:1fr;}}
.vm-card{border-radius:var(--radius); padding:34px; color:var(--white);}
.vm-card.vision{background:var(--navy-800);}
.vm-card.mission{background:var(--orange-700);}
.vm-card h3{color:var(--white); font-size:22px; margin-bottom:14px;}
.vm-card p{font-size:15.5px; opacity:0.92;}

/* ---------- SECTORS ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:56px;}
@media (max-width:860px){.pillars{grid-template-columns:1fr;}}
.pillar{border:1px solid var(--gray-300); background:var(--white); border-radius:var(--radius); padding:26px;}
.pillar .pnum{color:var(--gray-400); font-family:'Space Grotesk',sans-serif; font-weight:700;}
.pillar h3{font-size:19px; margin:8px 0 8px;}
.pillar p{color:var(--gray-600); font-size:14.5px;}

.services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media (max-width:980px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.services-grid{grid-template-columns:1fr;}}
.service-card{
  background:var(--white); border:1px solid var(--gray-300); border-radius:var(--radius);
  padding:24px; transition:border-color .2s, transform .2s;
}
.service-card:hover{border-color:var(--orange-500); transform:translateY(-3px);}
.service-card .code{font-family:'Space Grotesk',sans-serif; font-size:11.5px; font-weight:700; color:var(--orange-600); letter-spacing:1px;}
.service-card .icon{width:34px; height:34px; color:var(--navy-800); margin:14px 0 12px;}
.service-card h4{font-size:16.5px; margin-bottom:8px;}
.service-card p{color:var(--gray-600); font-size:13.8px; margin-bottom:12px;}
.service-card ul{list-style:none; display:flex; flex-direction:column; gap:6px;}
.service-card li{font-size:12.8px; color:var(--gray-600); display:flex; gap:8px;}
.service-card li::before{content:"—"; color:var(--orange-500); flex-shrink:0;}

/* ---------- OPERATING MODEL ---------- */
.model-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:860px){.model-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.model-grid{grid-template-columns:1fr;}}
.model-item{display:flex; gap:14px; align-items:flex-start; background:var(--white); border:1px solid var(--gray-300); border-radius:12px; padding:18px;}
.model-item .dot{width:8px; height:8px; border-radius:50%; background:var(--orange-500); margin-top:8px; flex-shrink:0;}
.model-item p{font-size:14.3px; color:var(--gray-600);}

/* ---------- HSE ---------- */
.hse-section{background:var(--navy-900); color:var(--white);}
.hse-section .section-tag{color:var(--orange-500);}
.hse-section h2.section-title{color:var(--white);}
.hse-section p.section-lead{color:var(--gray-400);}
.hse-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:48px;}
@media (max-width:860px){.hse-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.hse-grid{grid-template-columns:1fr;}}
.hse-card{background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:12px; padding:20px;}
.hse-card .icon{width:28px; height:28px; color:var(--orange-500); margin-bottom:10px;}
.hse-card h4{color:var(--white); font-size:15.5px; margin-bottom:6px;}
.hse-card p{color:var(--gray-400); font-size:13.3px;}
.hse-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,0.14); border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,0.14); margin-bottom:48px;}
.hse-stats .cell{background:rgba(255,255,255,0.03); padding:22px 18px; text-align:center;}
.hse-stats .num{font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:700; color:var(--orange-500);}
.hse-stats .lbl{font-size:12.5px; color:var(--gray-400); margin-top:6px;}
@media (max-width:700px){.hse-stats{grid-template-columns:repeat(2,1fr);}}
.hse-process{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media (max-width:860px){.hse-process{grid-template-columns:repeat(2,1fr);}}
.hse-step{border-inline-start:2px solid var(--orange-500); padding-inline-start:16px;}
.hse-step .snum{font-family:'Space Grotesk',sans-serif; color:var(--orange-500); font-weight:700; font-size:13px;}
.hse-step h4{color:var(--white); font-size:15.5px; margin:6px 0;}
.hse-step p{color:var(--gray-400); font-size:13.2px;}

/* ---------- TEAM ---------- */
.team-wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
@media (max-width:860px){.team-wrap{grid-template-columns:1fr;}}
.team-list{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px;}
@media (max-width:520px){.team-list{grid-template-columns:1fr;}}
.team-list li{font-size:14.3px; color:var(--gray-600); padding:10px 0; border-bottom:1px solid var(--gray-300);}
.badge-row{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap;}
.badge{background:var(--orange-100); color:var(--orange-700); font-size:12.8px; font-weight:600; padding:8px 14px; border-radius:100px;}

/* ---------- PROJECTS ---------- */
.projects-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:40px;}
@media (max-width:860px){.projects-grid{grid-template-columns:1fr;}}
.project-card{background:var(--white); border:1px solid var(--gray-300); border-radius:var(--radius); overflow:hidden;}
.project-card .pic{
  height:150px; background:linear-gradient(135deg, var(--navy-800), var(--navy-600));
  position:relative; display:flex; align-items:flex-end; padding:16px;
}
.project-card .pic::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size:24px 24px;
}
.project-card .pic.has-photo{height:240px; background-size:cover; background-position:center;}
.project-card .pic.has-photo::after{
  background-image:linear-gradient(to top, rgba(8,27,46,0.85), rgba(8,27,46,0.05) 60%);
  background-size:100% 100%;
}
.project-card .pic .loc{position:relative; z-index:1; color:var(--white); font-size:12.5px; font-weight:600; letter-spacing:0.5px;}
.project-card .body{padding:22px;}
.project-card h4{font-size:16.5px; margin-bottom:10px;}
.project-card .meta{display:flex; flex-direction:column; gap:6px; margin-bottom:10px;}
.project-card .meta span{font-size:13px; color:var(--gray-600);}
.project-card .meta b{color:var(--navy-900);}
.project-card .note{font-size:12px; color:var(--gray-400); font-style:italic;}
.more-projects{background:var(--sand-200); border-radius:var(--radius); padding:26px;}
.more-projects h4{font-size:16px; margin-bottom:14px;}
.more-list{display:grid; grid-template-columns:repeat(2,1fr); gap:10px 24px;}
@media (max-width:700px){.more-list{grid-template-columns:1fr;}}
.more-list div{font-size:13.5px; color:var(--gray-600); padding:8px 0; border-bottom:1px dashed var(--gray-300);}
.more-list b{color:var(--navy-900);}
.infra-banner{width:100%; border-radius:10px; margin-bottom:20px; display:block;}

.dior-card{
  margin-top:24px; background:var(--white); border:1px solid var(--gray-300); border-radius:var(--radius);
  overflow:hidden; display:grid; grid-template-columns:260px 1fr;
}
@media (max-width:700px){.dior-card{grid-template-columns:1fr;}}
.dior-card img{width:100%; height:100%; object-fit:cover; display:block;}
.dior-body{padding:24px;}
.dior-body h4{font-size:17px; margin-bottom:10px;}
.dior-body p{color:var(--gray-600); font-size:13.8px; margin-bottom:10px;}
.dior-body .note{font-size:12px; color:var(--gray-400); font-style:italic;}

/* ---------- QUALITY ---------- */
.qsg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:860px){.qsg-grid{grid-template-columns:1fr;}}
.qsg-card{background:var(--white); border:1px solid var(--gray-300); border-radius:var(--radius); padding:28px;}
.qsg-card .icon{width:32px; height:32px; color:var(--orange-600); margin-bottom:14px;}
.qsg-card h3{font-size:18px; margin-bottom:10px;}
.qsg-card p{color:var(--gray-600); font-size:14.3px;}

/* ---------- CONTACT ---------- */
.contact-section{background:var(--navy-900); color:var(--white);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.contact-section h2.section-title{color:var(--white);}
.contact-section p.section-lead{color:var(--gray-400);}
.contact-list{list-style:none; margin-top:24px;}
.contact-list li{display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.1);}
.contact-list .icon{width:22px; height:22px; color:var(--orange-500); flex-shrink:0; margin-top:2px;}
.contact-list .k{font-size:12.5px; color:var(--gray-400); text-transform:uppercase; letter-spacing:1px;}
.contact-list .v{font-size:16px; font-weight:600; color:var(--white); margin-top:2px;}
.contact-card{background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius); padding:32px;}
.contact-card h3{color:var(--white); font-size:19px; margin-bottom:18px;}
.form-row{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.form-row label{font-size:12.5px; color:var(--gray-400);}
.form-row input, .form-row textarea{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.2); border-radius:8px;
  padding:12px 14px; color:var(--white); font-family:inherit; font-size:14.5px;
}
.form-row input::placeholder, .form-row textarea::placeholder{color:var(--gray-400);}
.form-row textarea{resize:vertical; min-height:90px;}

/* ---------- FOOTER ---------- */
footer{background:var(--navy-900); border-top:1px solid rgba(255,255,255,0.1); padding:36px 0; color:var(--gray-400);}
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.footer-inner .tag{font-size:13.5px;}
.footer-inner .copy{font-size:12.5px;}

/* watermark monogram */
.watermark{position:absolute; opacity:0.06; pointer-events:none;}

/* ---------- DYNAMIC / SCROLL REVEAL ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal-stagger.is-visible .stagger-item{opacity:1; transform:translateY(0);}
.stagger-item{opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.is-visible, .stagger-item, .reveal-stagger.is-visible .stagger-item{opacity:1; transform:none; transition:none;}
}

/* Nav scrolled state */
header.site-nav{transition:box-shadow .3s ease, background-color .3s ease;}
header.site-nav.scrolled{box-shadow:0 8px 24px rgba(0,0,0,0.28);}

/* Richer hover motion across cards */
.value-card, .qsg-card, .hse-card, .model-item, .pillar, .team-list li, .more-list div{
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.value-card:hover, .qsg-card:hover{transform:translateY(-5px); box-shadow:0 16px 32px rgba(13,43,71,0.12); border-color:var(--orange-500);}
.hse-card{transition:transform .28s cubic-bezier(.2,.7,.2,1), background .28s ease, border-color .28s ease;}
.hse-card:hover{transform:translateY(-5px); background:rgba(255,255,255,0.08); border-color:var(--orange-500);}
.model-item:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(13,43,71,0.1); border-color:var(--orange-500);}
.pillar{transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;}
.pillar:hover{transform:translateY(-5px); box-shadow:0 16px 32px rgba(13,43,71,0.12);}
.project-card{transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;}
.project-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(13,43,71,0.16);}
.project-card .pic.has-photo{transition:transform .5s ease;}
.project-card:hover .pic.has-photo{transform:scale(1.05);}
.project-card .pic.has-photo{overflow:hidden;}

.btn{transition:transform .2s ease, background .2s ease, box-shadow .2s ease;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(184,103,43,0.35);}
.btn-ghost:hover{transform:translateY(-2px);}
.badge{transition:transform .2s ease, background .2s ease;}
.badge:hover{transform:translateY(-2px); background:var(--orange-500); color:var(--white);}

/* Animated number ticker */
.num[data-count]{font-variant-numeric:tabular-nums;}