:root {
  --navy-950: #07111f;
  --navy-900: #0a1728;
  --navy-800: #10233c;
  --gold: #c79a46;
  --gold-light: #e0bd72;
  --paper: #f5f2eb;
  --white: #ffffff;
  --ink: #111827;
  --muted: #687386;
  --line: rgba(10, 23, 40, .12);
  --container: 1200px;
  --radius: 8px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Tajawal", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.8;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }
.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  transition: background .3s ease, box-shadow .3s ease;
}
.site-header.scrolled {
  background: rgba(7, 17, 31, .95);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.nav-wrap { height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: flex; align-items: center; gap: 12px; color: white; }
.brand img { width: 60px; height: 60px; object-fit: contain; background:#fff; padding:5px; border-radius:8px; }
.brand-copy { display: grid; line-height: 1.25; }
.brand-copy strong { font-size: 1rem; }
.brand-copy span { color: #aeb8c8; font-size: .72rem; margin-top: 4px; }
.main-nav { display: flex; align-items: center; gap: 30px; color: #dfe5ec; font-size: .9rem; }
.main-nav a { position: relative; }
.main-nav a:not(.nav-cta)::after { content:""; position:absolute; right:0; left:auto; bottom:-8px; width:0; height:1px; background:var(--gold); transition:.25s; }
.main-nav a:hover::after { width:100%; }
.nav-cta { border: 1px solid rgba(199,154,70,.55); padding: 10px 18px; color: var(--gold-light); }
.menu-toggle { display:none; background:none; border:0; padding:8px; }
.menu-toggle span { display:block; width:24px; height:2px; background:white; margin:5px; }

.section-dark { background: var(--navy-950); color: white; }
.hero { min-height: 780px; display:grid; align-items:center; position:relative; overflow:hidden; padding: 150px 0 80px; }
.hero::after { content:""; position:absolute; inset:auto 0 0; height:140px; background:linear-gradient(to top, rgba(7,17,31,.85), transparent); pointer-events:none; }
.hero-grid { position:absolute; inset:0; opacity:.18; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to left, black, transparent 72%); }
.hero-orbit { position:absolute; border:1px solid rgba(199,154,70,.16); border-radius:50%; }
.hero-orbit-1 { width:720px; height:720px; left:-180px; top:40px; }
.hero-orbit-2 { width:500px; height:500px; left:-65px; top:150px; border-style:dashed; }
.hero-layout { display:grid; grid-template-columns: 1.08fr .92fr; align-items:center; gap:70px; position:relative; z-index:2; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; color:var(--gold-light); font-size:.72rem; letter-spacing:.18em; font-weight:700; text-transform:uppercase; margin-bottom:18px; }
.eyebrow::before { content:""; width:34px; height:1px; background:var(--gold); }
.eyebrow.dark { color:#8e6a2d; }
.hero h1, .section-heading h2, .cta-layout h2 { margin:0; line-height:1.18; letter-spacing:-.04em; }
.hero h1 { font-size:clamp(2.7rem, 5vw, 5.2rem); max-width:820px; }
.hero h1 em { font-style:normal; color:var(--gold-light); font-weight:500; }
.hero-copy > p { color:#c5cfda; max-width:720px; font-size:1.08rem; margin:28px 0 34px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.btn { min-height:50px; display:inline-flex; align-items:center; justify-content:center; padding:0 24px; border:1px solid transparent; font-weight:700; font-size:.9rem; transition:.25s ease; }
.btn-gold { background:var(--gold); color:var(--navy-950); }
.btn-gold:hover { background:var(--gold-light); transform:translateY(-2px); }
.btn-outline { border-color:rgba(255,255,255,.24); color:white; }
.btn-outline:hover { border-color:var(--gold); color:var(--gold-light); }
.hero-meta { margin-top:44px; display:flex; align-items:center; gap:14px; color:#8996a8; font-size:.76rem; letter-spacing:.08em; }
.hero-meta i { width:4px; height:4px; border-radius:50%; background:var(--gold); }

.hero-mark { min-height:520px; position:relative; display:grid; place-items:center; }
.mark-ring { position:absolute; width:390px; aspect-ratio:1; border:1px solid rgba(199,154,70,.26); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.018), 0 0 0 140px rgba(255,255,255,.012); }
.mark-card { width:310px; aspect-ratio:1; border:1px solid rgba(255,255,255,.18); background:#fff; display:grid; place-items:center; transform:rotate(45deg); box-shadow:0 35px 80px rgba(0,0,0,.35); }
.mark-card img { width:74%; transform:rotate(-45deg); filter:drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
.technical-note { position:absolute; display:flex; align-items:center; gap:10px; color:#7f8da1; font-size:.62rem; letter-spacing:.12em; }
.technical-note b { color:var(--gold); font-size:.72rem; }
.note-a { right:2%; top:18%; }
.note-b { left:-2%; top:56%; }
.note-c { right:5%; bottom:14%; }

.trust-strip { background:#0d1b2e; color:#dfe5ec; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.trust-grid { min-height:86px; display:grid; grid-template-columns:repeat(4,1fr); align-items:center; }
.trust-grid div { text-align:center; font-weight:600; font-size:.9rem; border-left:1px solid rgba(255,255,255,.08); }
.trust-grid div:last-child { border-left:0; }

.section { padding:115px 0; }
.section-light { background:var(--paper); }
.split-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:110px; align-items:start; }
.section-heading h2 { font-size:clamp(2.3rem, 4vw, 4rem); color:#0a1728; }
.section-heading.horizontal { display:flex; justify-content:space-between; align-items:end; gap:60px; margin-bottom:56px; }
.section-heading.horizontal > p { max-width:500px; color:var(--muted); margin:0 0 8px; }
.body-copy { max-width:680px; }
.body-copy p { color:#566173; }
.body-copy .lead { font-size:1.16rem; color:#1d2938; font-weight:500; }
.text-link { display:inline-flex; gap:10px; color:#8b6528; font-weight:700; margin-top:20px; }

.services-section { background:white; }
.service-list { border-top:1px solid var(--line); }
.service-row { display:grid; grid-template-columns:72px 1.1fr 1fr 40px; gap:28px; align-items:center; padding:34px 0; border-bottom:1px solid var(--line); transition:.25s ease; }
.service-row:hover { transform:translateX(-8px); }
.service-no { color:#9b7a42; font-size:.78rem; letter-spacing:.12em; }
.service-title h3 { margin:0; font-size:1.35rem; color:#0b192b; }
.service-row p { margin:0; color:#687386; font-size:.9rem; }
.service-arrow { color:#a97b32; font-size:1.2rem; }

.projects-section .section-heading h2, .cta-layout h2 { color:white; }
.projects-section .muted { color:#9eabba; }
.project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.project-card { background:#0d1c30; border:1px solid rgba(255,255,255,.08); overflow:hidden; }
.project-top { display:flex; justify-content:space-between; padding:16px 18px; color:#8995a5; font-size:.72rem; border-bottom:1px solid rgba(255,255,255,.07); }
.project-visual { height:220px; position:relative; overflow:hidden; background:#091625; }
.project-visual::before, .project-visual::after { content:""; position:absolute; }
.project-visual.fiber::before { width:160%; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); transform:rotate(-18deg); top:55%; left:-25%; box-shadow:0 16px 0 rgba(199,154,70,.45), 0 -16px 0 rgba(199,154,70,.24); }
.project-visual.fiber::after { width:140px; height:140px; border:1px solid rgba(199,154,70,.35); border-radius:50%; right:14%; top:18%; box-shadow:0 0 0 30px rgba(199,154,70,.035); }
.project-visual.power { background-image:linear-gradient(120deg, transparent 49.8%, rgba(199,154,70,.55) 50%, transparent 50.4%), linear-gradient(60deg, transparent 49.8%, rgba(199,154,70,.2) 50%, transparent 50.4%); background-size:90px 90px; }
.project-visual.power::after { inset:16% 10%; border:1px solid rgba(255,255,255,.08); }
.project-visual.control { background-image:radial-gradient(circle at 70% 50%, rgba(199,154,70,.16) 0 3px, transparent 4px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size:auto, 34px 34px, 34px 34px; }
.project-visual.control::before { width:180px; height:180px; border:1px dashed rgba(199,154,70,.42); border-radius:50%; right:18%; top:10%; }
.project-visual.control::after { width:8px; height:8px; background:var(--gold); border-radius:50%; right:calc(18% + 86px); top:calc(10% + 86px); box-shadow:0 0 0 14px rgba(199,154,70,.08),0 0 0 34px rgba(199,154,70,.035); }
.project-visual.data { background-image:linear-gradient(90deg, rgba(199,154,70,.12) 1px, transparent 1px), linear-gradient(rgba(199,154,70,.08) 1px, transparent 1px); background-size:44px 44px; }
.project-visual.data::before { width:65%; height:3px; background:var(--gold); left:18%; top:50%; box-shadow:0 -32px 0 rgba(199,154,70,.4),0 32px 0 rgba(199,154,70,.25); }
.project-body { padding:26px; }
.project-sector { color:var(--gold-light); font-size:.75rem; }
.project-body h3 { margin:8px 0 10px; font-size:1.4rem; }
.project-body p { color:#aeb8c6; margin:0; font-size:.9rem; }
.project-disclaimer { color:#728095; font-size:.72rem; margin:18px 0 0; }

.sector-grid { margin-top:60px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-right:1px solid var(--line); }
.sector-grid span { min-height:125px; display:flex; align-items:flex-end; padding:22px; font-weight:700; font-size:1.05rem; border-left:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.35); }

.method-section { background:#ece8df; }
.steps { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid rgba(10,23,40,.16); }
.steps > div { padding:28px 22px 10px; border-left:1px solid rgba(10,23,40,.13); min-height:210px; }
.steps > div:last-child { border-left:0; }
.steps b { color:#9b7435; font-size:.76rem; }
.steps h3 { margin:38px 0 8px; font-size:1.15rem; }
.steps p { margin:0; color:#687386; font-size:.86rem; }

.cta-section { background:#0b1a2d; color:white; padding:100px 0; position:relative; overflow:hidden; }
.cta-section::after { content:""; position:absolute; width:560px; height:560px; border:1px solid rgba(199,154,70,.13); border-radius:50%; left:-180px; top:-170px; box-shadow:0 0 0 80px rgba(199,154,70,.025); }
.cta-layout { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:90px; }
.cta-layout h2 { font-size:clamp(2.4rem,4vw,4.1rem); }
.cta-layout p { color:#bdc7d3; max-width:520px; margin:0 0 28px; }

.site-footer { background:#06101c; color:#aeb8c6; padding:70px 0 22px; }
.footer-grid { display:grid; grid-template-columns:1.7fr .8fr 1.05fr 1.15fr; gap:48px; }
.footer-brand { display:flex; gap:18px; align-items:flex-start; }
.footer-brand img { width:72px; height:72px; object-fit:contain; background:#fff; padding:7px; border-radius:10px; }
.footer-brand strong { color:white; font-size:1.25rem; }
.footer-brand p { margin:6px 0 0; max-width:420px; font-size:.84rem; }
.site-footer h4 { color:white; margin:0 0 14px; }
.site-footer a, .site-footer span { display:block; margin:8px 0; font-size:.84rem; }

.footer-contact a { color:#d7dee8; text-decoration:none; transition:color .2s ease; }
.footer-contact a:hover { color:#c79a46; }
.contact-group { margin-bottom:18px; }
.site-footer .contact-label { color:#c79a46; font-size:.72rem; font-weight:700; letter-spacing:.04em; margin-bottom:5px; }
.footer-locations .location-item { padding:0 0 13px; margin-bottom:13px; border-bottom:1px solid rgba(255,255,255,.07); }
.footer-locations .location-item:last-child { border-bottom:0; }
.site-footer .location-type { color:#c79a46; font-size:.75rem; font-weight:700; margin-bottom:3px; }

.footer-bottom { margin-top:56px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; color:#68768a; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }
.delay-1 { transition-delay:.12s; }

@media (max-width: 980px) {
  .hero-layout, .split-layout, .cta-layout { grid-template-columns:1fr; }
  .hero { padding-top:130px; }
  .hero-mark { min-height:390px; }
  .mark-ring { width:310px; }
  .mark-card { width:240px; }
  .section-heading.horizontal { display:block; }
  .section-heading.horizontal > p { margin-top:22px; }
  .service-row { grid-template-columns:55px 1fr 34px; }
  .service-row p { grid-column:2/3; }
  .project-grid { grid-template-columns:1fr; }
  .steps { grid-template-columns:repeat(2,1fr); }
  .sector-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1/-1; }
}

@media (max-width: 760px) {
  .container { width:min(100% - 28px, var(--container)); }
  .nav-wrap { height:74px; }
  .brand-copy span { display:none; }
  .brand img { width:42px; height:42px; }
  .menu-toggle { display:block; }
  .main-nav { position:absolute; top:74px; right:14px; left:14px; background:#0a1728; padding:18px; display:none; flex-direction:column; align-items:stretch; gap:8px; border:1px solid rgba(255,255,255,.1); box-shadow:0 24px 60px rgba(0,0,0,.3); }
  .main-nav.open { display:flex; }
  .main-nav a { padding:11px 8px; }
  .nav-cta { text-align:center; }
  .hero { min-height:auto; padding:125px 0 64px; }
  .hero h1 { font-size:2.7rem; }
  .hero-copy > p { font-size:.98rem; }
  .hero-mark { min-height:330px; }
  .mark-ring { width:245px; }
  .mark-card { width:190px; }
  .technical-note { display:none; }
  .trust-grid { grid-template-columns:repeat(2,1fr); }
  .trust-grid div { min-height:62px; display:grid; place-items:center; border-bottom:1px solid rgba(255,255,255,.07); }
  .section { padding:78px 0; }
  .split-layout { gap:38px; }
  .section-heading h2 { font-size:2.35rem; }
  .service-row { grid-template-columns:42px 1fr 25px; padding:26px 0; gap:12px; }
  .service-title h3 { font-size:1.15rem; }
  .service-row p { font-size:.84rem; }
  .project-visual { height:180px; }
  .sector-grid { grid-template-columns:1fr; }
  .sector-grid span { min-height:90px; }
  .steps { grid-template-columns:1fr; }
  .steps > div { min-height:auto; padding:24px 10px 24px; border-left:0; border-bottom:1px solid rgba(10,23,40,.13); }
  .steps h3 { margin:16px 0 6px; }
  .cta-layout { gap:35px; }
  .footer-grid { grid-template-columns:1fr; gap:36px; }
  .footer-brand { grid-column:auto; }
  .footer-bottom { display:block; }
  .footer-bottom span:last-child { margin-top:8px; }
}

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

.project-card-wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .brand img { width: 54px; height: 54px; } .nav-wrap { height: 88px; } }


/* Footer alignment refinements */
.footer-contact { text-align: right; }
.footer-contact .contact-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 18px;
}
.footer-contact .contact-label {
  width: 100%;
  text-align: right;
  margin: 0 0 6px;
}
.footer-contact .contact-group a {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 5px 0 0 auto;
  text-align: right;
}
.footer-bottom {
  direction: rtl;
  align-items: center;
  text-align: right;
}
.footer-bottom > span {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  margin: 0;
}
.footer-bottom #year { display: inline; margin: 0; }
.footer-bottom > span:last-child { text-align: left; }

@media (max-width: 760px) {
  .footer-bottom { text-align: right; }
  .footer-bottom > span { display: flex; width: 100%; }
  .footer-bottom > span:last-child { text-align: right; justify-content: flex-start; margin-top: 8px; }
}