@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');

:root {
  --navy: #102b4e;
  --navy-deep: #081d36;
  --blue: #0d4f8b;
  --blue-soft: #eaf2f8;
  --ink: #1d2935;
  --muted: #64717e;
  --line: #e3e8ed;
  --paper: #fff;
  --soft: #f5f7f9;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
}

/* Arabic typography */
html[lang="ar"] body,
html[lang="ar"] input,
html[lang="ar"] button,
html[lang="ar"] textarea,
html[lang="ar"] select {
  font-family: 'Almarai', Helvetica, Arial, Lucida, sans-serif;
}

/* Arabic script needs more leading and no tightened tracking */
html[lang="ar"] body { line-height: 1.9; }
html[lang="ar"] .hero h1,
html[lang="ar"] .page-header h1 { line-height: 1.45; letter-spacing: normal; }
html[lang="ar"] .engagement h2 { line-height: 1.5; }
html[lang="ar"] .service p,
html[lang="ar"] .prose p { line-height: 1.9; }

a { color: inherit; }
.container { width: min(1150px, calc(100% - 48px)); margin: 0 auto; }

.site-header {
  position: relative;
  z-index: 10;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid rgba(16,43,78,.08);
}

.nav {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--navy);
  letter-spacing: .04em;
}

.brand-mark {
  width: 34px;
  height: 48px;
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 4px;
}

.brand-mark span {
  display: block;
  width: 8px;
  background: var(--navy);
  clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
}
.brand-mark span:nth-child(1) { height: 30px; opacity: .65; }
.brand-mark span:nth-child(2) { height: 46px; }
.brand-mark span:nth-child(3) { height: 37px; opacity: .82; }

.brand strong { display:block; font-size: 1.15rem; line-height:1; }
.brand small { display:block; margin-top:4px; font-size:.55rem; letter-spacing:.23em; color:#778391; }


.language-switcher { position:relative; }
.language-current {
  border:1px solid var(--line); background:#fff; color:var(--navy);
  padding:9px 11px; min-width:58px; cursor:pointer; font:inherit;
  font-size:.76rem; font-weight:700; letter-spacing:.04em;
}
.chevron { margin-left:5px; font-size:.9rem; }
.language-menu {
  display:none; position:absolute; top:calc(100% + 8px); right:0; min-width:135px;
  background:#fff; border:1px solid var(--line); box-shadow:0 10px 30px rgba(16,43,78,.12);
  padding:6px; z-index:20;
}
.language-switcher.open .language-menu { display:block; }
.language-menu a {
  display:block; padding:8px 10px; text-decoration:none; color:#35424e;
  font-size:.78rem !important; white-space:nowrap;
}
.language-menu a:hover, .language-menu a.active { background:var(--soft); color:var(--blue); }
[dir="rtl"] .language-menu { right:auto; left:0; }
[dir="rtl"] .nav { direction:rtl; }
[dir="rtl"] .main-nav { direction:rtl; }
[dir="rtl"] .hero-copy { direction:rtl; text-align:right; }
[dir="rtl"] .engagement-grid, [dir="rtl"] .page-content { direction:rtl; }
[dir="rtl"] .accent-line { margin-right:0; margin-left:auto; }
[dir="rtl"] .service { direction:rtl; }
[dir="rtl"] .footer-inner { direction:rtl; }
[dir="rtl"] .button span, [dir="rtl"] .nav-cta span { display:inline-block; transform:scaleX(-1); }
[dir="rtl"] .nav-cta span { margin-left:0; margin-right:8px; }

.main-nav { display:flex; align-items:center; gap:30px; }
.main-nav a { text-decoration:none; font-size:.9rem; font-weight:500; color:#2f3944; }
.main-nav a:hover, .main-nav a.active { color:var(--navy); }
.main-nav a.active { position:relative; }
.main-nav a.active::after {
  content:""; position:absolute; left:0; right:0; bottom:-12px; height:2px; background:var(--blue);
}
.nav-cta {
  background:var(--navy) !important; color:#fff !important;
  padding:12px 18px; border-radius:2px;
}
.nav-cta span { margin-left:8px; }
.menu-toggle { display:none; border:0; background:none; font-size:1.5rem; color:var(--navy); }

.hero {
  position:relative;
  overflow:hidden;
  min-height:520px;
  background:linear-gradient(105deg, #f7f9fb 0%, #eef3f7 54%, #dfe9f1 100%);
}

.hero-pattern {
  position:absolute; inset:0; opacity:.28;
  background-image: linear-gradient(rgba(13,79,139,.08) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(13,79,139,.08) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image: linear-gradient(to right, black 0%, transparent 75%);
}

.hero-grid {
  min-height:520px;
  display:grid;
  grid-template-columns: 47% 53%;
  align-items:center;
}

.hero-copy { position:relative; z-index:2; padding:55px 0; }
.eyebrow { color:var(--blue); font-size:.72rem; font-weight:700; letter-spacing:.16em; margin-bottom:15px; }
.hero h1 { max-width:650px; margin:0; color:var(--navy); font-size:clamp(2.7rem, 5vw, 4.6rem); line-height:1.06; letter-spacing:-.045em; }
.accent-line { width:44px; height:3px; background:#8b949d; margin:27px 0; }
.hero-copy p { max-width:620px; font-size:1rem; color:#3e4a56; margin:0 0 28px; }

.button {
  display:inline-flex; align-items:center; gap:14px; padding:14px 21px;
  background:var(--navy); color:#fff; text-decoration:none; font-size:.88rem; font-weight:600;
  border-radius:2px; transition:transform .2s, background .2s;
}
.button:hover { transform:translateY(-1px); background:#0b3764; }
.button span { font-size:1.15rem; }

.hero-visual { position:relative; height:100%; min-height:520px; overflow:hidden; }
.blueprint-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
  background-size:32px 32px; opacity:.18;
}
.bridge {
  position:absolute; background:linear-gradient(#8999a7,#6d7d8b);
  transform:skewX(-18deg); box-shadow:0 15px 30px rgba(16,43,78,.15);
}
.bridge-top { width:90%; height:74px; right:-5%; top:105px; }
.bridge-bottom { width:72%; height:42px; right:5%; top:179px; opacity:.75; }
.bridge-pillar {
  position:absolute; width:54px; background:linear-gradient(90deg,#748492,#9ca9b4);
  bottom:0; height:245px; transform:skewX(-4deg);
}
.pillar-1 { right:30%; }
.pillar-2 { right:8%; height:285px; }
.bridge::after {
  content:""; position:absolute; left:8%; right:0; bottom:-16px; height:12px;
  background:#5e6d79;
}

.services { background:#fff; border-bottom:1px solid var(--line); }
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.service { min-height:250px; text-align:center; padding:43px 25px 35px; border-right:1px solid var(--line); }
.service:first-child { border-left:1px solid var(--line); }
.service-icon { height:45px; margin-bottom:18px; color:var(--navy); }
.service-icon svg { width:42px; height:42px; stroke:currentColor; fill:none; stroke-width:1.6; }
.service h2 { font-size:1rem; margin:0 0 10px; color:#27333e; }
.service p { max-width:230px; margin:0 auto; color:var(--muted); font-size:.82rem; line-height:1.65; }
.service-rule { display:block; width:28px; height:3px; margin:24px auto 0; background:var(--blue); }

.engagement { background:var(--soft); padding:70px 0; }
.engagement-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.engagement h2 { color:var(--navy); font-size:2.1rem; line-height:1.18; max-width:520px; margin:0 0 18px; }
.engagement p { color:#586572; max-width:540px; }
.button-dark { margin-top:12px; }
.engagement-visual {
  height:310px; position:relative; overflow:hidden; border-radius:8px;
  background:linear-gradient(135deg,#b9c8d3,#e8edf1 60%,#9cacb8);
}
.site-lines {
  position:absolute; inset:0; opacity:.45;
  background:linear-gradient(165deg, transparent 45%, rgba(255,255,255,.75) 45.5%, transparent 46%),
             linear-gradient(10deg, transparent 60%, rgba(16,43,78,.25) 60.5%, transparent 61%);
}
.crane { position:absolute; width:75%; height:220px; right:8%; top:20px; }
.crane i { position:absolute; left:8%; top:12%; width:3px; height:88%; background:#34495a; }
.crane b { position:absolute; left:8%; top:12%; width:92%; height:3px; background:#34495a; transform-origin:left; transform:rotate(2deg); }
.crane em { position:absolute; left:68%; top:12%; width:2px; height:48%; background:#34495a; font-style:normal; }

.page-header { background:var(--soft); padding:70px 0 60px; border-bottom:1px solid var(--line); }
.page-header h1 { margin:0; color:var(--navy); font-size:clamp(2.3rem,5vw,3.8rem); line-height:1.1; letter-spacing:-.04em; }
.page-content { padding:65px 0 85px; }
.prose { max-width:820px; }
.prose h2 { color:var(--navy); font-size:1.5rem; margin-top:42px; }
.prose p { color:#56636f; }
.prose a { color:var(--blue); font-weight:600; }
.prose strong { color:#2c3945; }
.contact-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; margin:38px 0; }
.contact-card { border:1px solid var(--line); padding:24px; background:#fff; }
.contact-label { display:block; color:var(--blue); font-size:.67rem; font-weight:700; letter-spacing:.14em; margin-bottom:8px; }
.contact-card strong { font-size:.96rem; }

.site-footer { background:var(--navy-deep); color:#bfcbd6; padding:32px 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.footer-brand { color:#fff; font-weight:700; letter-spacing:.08em; font-size:.9rem; }
.footer-inner p { margin:5px 0 0; font-size:.78rem; }
.footer-right { display:flex; align-items:center; gap:24px; font-size:.75rem; }
.footer-right a { width:27px; height:27px; border:1px solid #6c7c8c; border-radius:50%; display:grid; place-items:center; text-decoration:none; font-weight:700; }
.footer-right a.footer-phone { width:auto; height:auto; border:0; border-radius:0; display:inline; font-weight:600; white-space:nowrap; }
.footer-bottom { display:flex; align-items:flex-start; gap:28px; margin-top:24px; padding-top:24px; border-top:1px solid rgba(191,203,214,.2); }
.footer-partner { display:block; }
.footer-partner img { display:block; height:40px; width:auto; }
.footer-partner img.is-white { filter:brightness(0) invert(1); }
.footer-partner:has(.footer-partner-label) { display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; }
.footer-partner-label { font-family:'Almarai', sans-serif; font-size:.8rem; color:#fff; white-space:nowrap; }

@media (max-width: 850px) {
  .container { width:min(100% - 32px, 1150px); }
  .menu-toggle { display:block; }
  .main-nav {
    display:none; position:absolute; top:82px; left:0; right:0; padding:18px;
    background:#fff; border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch;
  }
  .main-nav.is-open { display:flex; }
  .main-nav a { padding:8px 0; }
  .main-nav a.active::after { display:none; }
  .hero-grid { grid-template-columns:1fr; }
  .hero { min-height:0; }
  .hero-copy { padding:70px 0 40px; }
  .hero-visual { min-height:260px; height:260px; }
  .bridge-top { top:60px; }
  .bridge-bottom { top:115px; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .service { border-bottom:1px solid var(--line); }
  .service:nth-child(odd) { border-left:1px solid var(--line); }
  .engagement-grid { grid-template-columns:1fr; gap:35px; }
}

@media (max-width: 560px) {
  .services-grid, .contact-grid { grid-template-columns:1fr; }
  .service { border-left:1px solid var(--line); }
  .footer-inner, .footer-right { align-items:flex-start; flex-direction:column; }
  .hero h1 { font-size:2.6rem; }
}

/* Real photography layer */
.hero-visual {
  background-size: cover;
  background-position: center;
  min-height: 520px;
}
.engagement-visual {
  background-size: cover;
  background-position: center;
}
.hero-visual .blueprint-grid { z-index: 1; }

.service-image {
  margin: 0 0 20px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.service-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Réalisations */
.realisations-intro { padding-bottom:0; }
.realisation-alt { background:var(--paper); }
.realisation-alt .engagement-grid > div:first-child { order:2; }
.engagement-grid.realisation-text-only { grid-template-columns:1fr; }
.realisation-text-only h2, .realisation-text-only p { max-width:820px; }
@media (max-width: 850px) {
  .realisation-alt .engagement-grid > div:first-child { order:0; }
}

/* Contact map */
.contact-map { margin:0 0 38px; }
.contact-map iframe { display:block; width:100%; height:380px; border:1px solid var(--line); }
.contact-map a { display:inline-block; margin-top:10px; font-size:.9rem; }