/* AL WESAM AL MUMAYZ TECHNICAL WORKS — site styles
   Concept: the structural drawing sheet. Blueprint grid, dimension lines,
   registration corners, condensed uppercase headings, navy + orange.
   Logical properties throughout so the same file serves LTR and RTL. */

:root{
  --navy:#0E2A47; --navy-deep:#08192C; --steel:#4A6178; --orange:#F26B1D; --orange-deep:#C4500D;
  --concrete:#E9ECEF; --paper:#FAFBFC; --line:#C9D2DC; --ink:#16283D; --mist:#8FA3B8;
  --display:'Barlow Condensed','Arial Narrow',sans-serif;
  --body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1200px; --gut:clamp(16px,4vw,40px);
  --grid:24px;
}
:lang(ar){ --display:'Cairo',sans-serif; --body:'Cairo',system-ui,sans-serif }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px }
body{ margin:0; font-family:var(--body); font-size:1.0625rem; line-height:1.6; color:var(--ink); background:var(--paper); overflow-x:hidden }
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
h1,h2,h3,p,ul,ol,dl,dd,figure{ margin:0 }
ul,ol{ padding:0; list-style:none }
button,input,select,textarea{ font:inherit; color:inherit }
:focus-visible{ outline:3px solid var(--orange); outline-offset:3px }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.skip{ position:absolute; inset-inline-start:12px; top:-60px; z-index:100; background:var(--orange); color:var(--navy-deep); padding:10px 16px; font-weight:600; text-decoration:none }
.skip:focus{ top:12px }
.vh{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block }

/* ---------- type ---------- */
.display{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.005em; line-height:.92 }
:lang(ar) .display{ text-transform:none; line-height:1.25; font-weight:800 }
.h2{ font-size:clamp(2.3rem,5.2vw,4.1rem); color:var(--navy) }
:lang(ar) .h2{ font-size:clamp(1.9rem,4.2vw,3.1rem) }
.h2 em{ font-style:normal; color:var(--orange-deep) }
.on-dark .h2{ color:#fff } .on-dark .h2 em{ color:var(--orange) }
.label{ font-family:'Barlow Condensed',var(--display); font-weight:600; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--orange-deep) }
:lang(ar) .label{ font-family:'Cairo',sans-serif; letter-spacing:0; font-size:.88rem; font-weight:700 }
.on-dark .label{ color:var(--orange) }
.lede{ font-size:clamp(1.08rem,1.6vw,1.22rem); color:var(--steel); max-width:60ch }
.on-dark .lede{ color:#C9D2DC }

/* Dimension line: |——— LABEL ———| ; used as section eyebrow */
.dim{ display:flex; align-items:center; gap:12px; margin-block-end:18px; max-width:520px }
.dim::before,.dim::after{ content:""; height:11px; flex:1 1 0; background:
  linear-gradient(currentColor,currentColor) left center/100% 1px no-repeat,
  linear-gradient(currentColor,currentColor) left center/1px 100% no-repeat; color:var(--line); opacity:.9 }
.dim::after{ background:
  linear-gradient(currentColor,currentColor) left center/100% 1px no-repeat,
  linear-gradient(currentColor,currentColor) right center/1px 100% no-repeat }
.dim::before{ flex:0 0 28px }
[dir=rtl] .dim::before{ transform:scaleX(-1) } [dir=rtl] .dim::after{ transform:scaleX(-1) }
.on-dark .dim::before,.on-dark .dim::after{ color:#3A5574 }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 22px;
  font-family:'Barlow Condensed',var(--display); font-weight:700; font-size:1.05rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; border:1.5px solid transparent; border-radius:2px; cursor:pointer; transition:background .2s,color .2s,border-color .2s,transform .2s }
:lang(ar) .btn{ font-family:'Cairo',sans-serif; letter-spacing:0; font-size:1rem }
.btn svg{ width:20px; height:20px; flex:none }
.btn--primary{ background:var(--orange); color:var(--navy-deep) }
.btn--primary:hover{ background:#ff7e33 }
.btn--navy{ background:var(--navy); color:#fff }
.btn--navy:hover{ background:var(--navy-deep) }
.btn--ghost{ border-color:rgba(201,210,220,.5); color:#fff; background:transparent }
.btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.06) }
.btn--line{ border-color:var(--navy); color:var(--navy); background:transparent }
.btn--line:hover{ background:var(--navy); color:#fff }
.btn:active{ transform:translateY(1px) }

/* ---------- header ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(250,251,252,.96); backdrop-filter:saturate(1.4) blur(8px); border-block-end:1px solid var(--line) }
.site-header .wrap{ display:flex; align-items:center; gap:24px; min-height:72px }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--navy); flex:none }
.brand img{ width:42px; height:42px }
.brand__txt{ display:flex; flex-direction:column; line-height:1 }
.brand__en{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.32rem; letter-spacing:.01em; text-transform:uppercase }
.brand__sub{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:.66rem; letter-spacing:.3em; color:var(--steel); margin-block-start:4px }
.brand__ar{ font-family:'Cairo',sans-serif; font-weight:700; font-size:1.12rem; line-height:1.3 }
.nav{ display:flex; align-items:center; gap:4px; margin-inline-start:auto }
.nav a{ text-decoration:none; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:1rem; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); padding:10px 12px; position:relative }
:lang(ar) .nav a{ font-family:'Cairo',sans-serif; letter-spacing:0; font-size:.98rem }
.nav a::after{ content:""; position:absolute; inset-inline:12px; bottom:4px; height:2px; background:var(--orange); transform:scaleX(0); transform-origin:var(--o,left); transition:transform .25s }
[dir=rtl] .nav a::after{ --o:right }
.nav a:hover::after{ transform:scaleX(1) }
.nav .nav__lang{ font-family:'Cairo',sans-serif; text-transform:none; letter-spacing:0; border-inline-start:1px solid var(--line); margin-inline-start:6px; padding-inline-start:16px }
[lang=ar] .nav .nav__lang{ font-family:'Barlow Condensed',sans-serif; letter-spacing:.08em }
.nav .btn{ margin-inline-start:10px; min-height:42px; padding:8px 16px; font-size:.95rem }
.nav .btn::after{ display:none }
.nav-toggle{ display:none; margin-inline-start:auto; width:46px; height:46px; border:1px solid var(--line); background:#fff; border-radius:2px; cursor:pointer; align-items:center; justify-content:center }
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--navy); position:relative }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; inset-inline:0; height:2px; background:var(--navy); transition:transform .2s }
.nav-toggle span::before{ top:-6px } .nav-toggle span::after{ top:6px }
[data-open=true] .nav-toggle span{ background:transparent }
[data-open=true] .nav-toggle span::before{ transform:translateY(6px) rotate(45deg) }
[data-open=true] .nav-toggle span::after{ transform:translateY(-6px) rotate(-45deg) }

@media (max-width:980px){
  .nav-toggle{ display:inline-flex }
  .nav{ display:none; position:absolute; top:100%; inset-inline:0; flex-direction:column; align-items:stretch; gap:0; background:var(--paper); border-block-end:3px solid var(--orange); padding:8px var(--gut) 18px; box-shadow:0 18px 30px rgba(8,25,44,.12) }
  [data-open=true] .nav{ display:flex }
  .nav a{ padding:14px 0; border-block-end:1px solid var(--concrete) }
  .nav a::after{ display:none }
  .nav .nav__lang{ border-inline-start:0; margin:0; padding-inline-start:0 }
  .nav .btn{ margin:14px 0 0 }
}
@media (max-width:400px){ .brand__sub{ letter-spacing:.2em } .brand__en{ font-size:1.18rem } .brand img{ width:38px; height:38px } }

/* ---------- blueprint surfaces ---------- */
.blueprint{ background-color:var(--navy);
  background-image:
    linear-gradient(rgba(201,210,220,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,210,220,.09) 1px,transparent 1px),
    linear-gradient(rgba(201,210,220,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,210,220,.04) 1px,transparent 1px);
  background-size:calc(var(--grid)*5) calc(var(--grid)*5),calc(var(--grid)*5) calc(var(--grid)*5),var(--grid) var(--grid),var(--grid) var(--grid);
  background-position:-1px -1px }
.on-dark{ color:#E9ECEF }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding-block:clamp(48px,7vw,88px) 0 }
.hero__grid{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr); gap:clamp(28px,5vw,64px); align-items:center; padding-block-end:40px }
.hero h1{ font-size:clamp(2.9rem,6.6vw,5.6rem); color:#fff; margin-block:6px 26px }
.hero h1 .u{ color:var(--orange); position:relative; white-space:nowrap }
:lang(ar) .hero h1{ font-size:clamp(2.1rem,4.6vw,3.7rem); line-height:1.35 }
.hero .lede{ margin-block-end:30px }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center }
.hero__pdf{ display:inline-flex; align-items:center; gap:8px; color:#C9D2DC; font-size:.95rem; text-decoration:underline; text-decoration-color:rgba(242,107,29,.7); text-underline-offset:4px; padding:12px 4px }
.hero__pdf:hover{ color:#fff }
.hero__pdf svg{ width:18px; height:18px }

/* hex detail: photo clipped to the medal outline, with a drawing callout */
.detail{ position:relative; width:min(100%,430px); margin-inline:auto; aspect-ratio:.866/1 }
.detail__hex{ position:absolute; inset:0; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background:var(--navy-deep) }
.detail__hex img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.05) }
.detail__outline{ position:absolute; inset:-14px; width:calc(100% + 28px); height:calc(100% + 28px); overflow:visible; pointer-events:none }
.detail__ribbon{ position:absolute; inset-inline:-18px; top:64%; height:46px; background:var(--orange); color:var(--navy-deep);
  clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%); display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.16em; font-size:.92rem; text-transform:uppercase }
:lang(ar) .detail__ribbon{ font-family:'Cairo',sans-serif; letter-spacing:0; font-size:.95rem }
.callout{ position:absolute; left:50%; top:100%; margin-top:26px; transform:translateX(-50%); white-space:nowrap; display:flex; align-items:center; gap:10px; color:#C9D2DC; font-family:'Barlow Condensed',sans-serif; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase }
:lang(ar) .callout{ font-family:'Cairo',sans-serif; letter-spacing:0; font-size:.85rem }
.callout b{ display:grid; place-items:center; width:34px; height:34px; border:1.5px solid var(--orange); border-radius:50%; color:var(--orange); font-size:1rem; letter-spacing:0; font-family:'Barlow Condensed',sans-serif }

/* title block: the hero's factual footer, drawn like a drawing title block */
.titleblock{ margin-block-start:clamp(44px,6vw,72px); display:grid; grid-template-columns:1.6fr repeat(4,1fr); border-block-start:1px solid rgba(201,210,220,.28) }
.titleblock > div{ padding:16px 18px 18px; border-inline-end:1px solid rgba(201,210,220,.18); min-width:0 }
.titleblock > div:first-child{ padding-inline-start:0 }
.titleblock > div:last-child{ border-inline-end:0 }
.titleblock dt{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--orange) }
:lang(ar) .titleblock dt{ font-family:'Cairo',sans-serif; letter-spacing:0; font-size:.8rem }
.titleblock dd{ color:#fff; font-weight:500; font-size:.98rem; line-height:1.35; margin-block-start:4px }

@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr }
  .detail{ width:min(78%,340px); margin-block-start:12px }
  .titleblock{ grid-template-columns:1fr 1fr }
  .titleblock > div{ padding-inline:0 14px; border-inline-end:0; border-block-end:1px solid rgba(201,210,220,.16) }
  .titleblock > div:first-child{ grid-column:1/-1 }
}

/* ---------- sections ---------- */
.section{ padding-block:clamp(64px,9vw,112px) }
.section--concrete{ background:var(--concrete) }
.section--deep{ background:var(--navy-deep) }
.section__head{ max-width:760px; margin-block-end:clamp(32px,5vw,52px) }
.section__head .lede{ margin-block-start:18px }

/* about */
.about{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(32px,6vw,80px); align-items:start }
.about__text p + p{ margin-block-start:16px }
.about__text p{ color:#2F445B; max-width:62ch }
.about__text .btn{ margin-block-start:28px }
.factsheet{ border:1px solid var(--line); background:#fff; position:relative }
.factsheet::before{ content:""; position:absolute; inset-inline-start:-1px; top:-1px; width:56px; height:4px; background:var(--orange) }
.factsheet h3{ font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.16em; font-size:.85rem; text-transform:uppercase; color:var(--steel); padding:16px 20px; border-block-end:1px solid var(--line); display:flex; justify-content:space-between }
:lang(ar) .factsheet h3{ font-family:'Cairo',sans-serif; letter-spacing:0; font-size:.95rem }
.factsheet dl > div{ display:grid; grid-template-columns:minmax(120px,40%) 1fr; gap:12px; padding:13px 20px; border-block-end:1px solid var(--concrete) }
.factsheet dl > div:last-child{ border-block-end:0 }
.factsheet dt{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-deep); padding-block-start:3px }
:lang(ar) .factsheet dt{ font-family:'Cairo',sans-serif; letter-spacing:0; font-size:.88rem; padding:0 }
.factsheet dd{ color:var(--navy); font-weight:500; line-height:1.4 }
@media (max-width:860px){ .about{ grid-template-columns:1fr } }

/* services: two groups (structure / finishing & maintenance), cards drawn as a 1px-ruled grid */
.svc-group + .svc-group{ margin-block-start:clamp(36px,5vw,56px) }
.svc-group__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; padding-block-end:14px; margin-block-end:18px; border-block-end:2px solid var(--navy) }
.svc-group__no{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1rem; letter-spacing:.12em; color:var(--orange-deep); border:1.5px solid var(--orange); padding:2px 8px; line-height:1.2 }
.svc-group__t{ font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1; text-transform:uppercase; color:var(--navy) }
:lang(ar) .svc-group__t{ line-height:1.35 }
.svc-group__sub{ color:var(--steel); font-size:.98rem; flex:1 1 260px }
.services{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; padding:1px }
.svc{ padding:28px 24px 30px; background:#fff; box-shadow:0 0 0 1px var(--line); position:relative; display:flex; flex-direction:column }
.svc__icon{ width:56px; height:56px; margin-block-end:20px; color:var(--navy) }
.svc__icon .o{ stroke:var(--orange) }
.svc h3{ font-family:var(--display); font-weight:700; font-size:1.55rem; line-height:1; text-transform:uppercase; color:var(--navy); margin-block-end:12px }
:lang(ar) .svc h3{ font-size:1.25rem; line-height:1.4 }
.svc p{ color:#3B5068; font-size:.98rem }
.svc__tag{ margin-block-start:auto; padding-block-start:18px; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--steel) }
:lang(ar) .svc__tag{ font-family:'Cairo',sans-serif; letter-spacing:0; font-size:.85rem }
.svc--core{ background:var(--navy); color:#fff; box-shadow:0 0 0 1px var(--navy) }
.svc--core h3{ color:#fff } .svc--core p{ color:#C9D2DC } .svc--core .svc__icon{ color:#fff } .svc--core .svc__tag{ color:var(--orange) }
.svc--core::before{ content:""; position:absolute; top:-1px; inset-inline:-1px; height:5px; background:var(--orange) }
@media (max-width:1040px){ .services{ grid-template-columns:1fr 1fr } }
@media (max-width:600px){ .services{ grid-template-columns:1fr } .svc{ padding:24px 20px 26px } }

.m3note{ margin-block-start:28px; display:flex; gap:18px; align-items:flex-start; padding:20px 22px; border-inline-start:4px solid var(--orange); background:#fff; max-width:860px }
.m3note strong{ font-family:'Barlow Condensed',sans-serif; font-size:2.2rem; line-height:1; color:var(--navy); flex:none; display:flex; flex-direction:column; gap:4px }
.m3note strong small{ font-size:1.5rem; color:var(--orange-deep) }
.m3note p{ color:#2F445B }

/* process (a real sequence → numbered) */
.steps{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); counter-reset:s; position:relative }
.steps::before{ content:""; position:absolute; top:27px; inset-inline:0; border-top:1px dashed #3A5574 }
.step{ position:relative; padding-inline-end:22px }
.step__hex{ position:relative; width:56px; height:56px; margin-block-end:20px }
.step__hex svg{ position:absolute; inset:0 }
.step__hex span{ position:absolute; inset:0; display:grid; place-items:center; color:var(--orange); font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.3rem }
.step h3{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:1.35rem; line-height:1.05; color:#fff; margin-block-end:8px }
:lang(ar) .step h3{ font-size:1.12rem; line-height:1.45 }
.step p{ color:#AEBCCB; font-size:.96rem }
@media (max-width:980px){
  .steps{ grid-template-columns:1fr; gap:28px }
  .steps::before{ top:0; bottom:0; inset-inline-start:27px; inset-inline-end:auto; border-top:0; border-inline-start:1px dashed #3A5574 }
  .step{ display:grid; grid-template-columns:56px 1fr; column-gap:20px; padding:0 }
  .step__hex{ grid-row:span 2; margin:0 }
}

/* projects gallery */
.gallery{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:250px; grid-auto-flow:dense; gap:18px }
.tile{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); text-decoration:none; color:inherit; min-width:0; overflow:hidden }
.tile img{ flex:1 1 auto; min-height:0; width:100%; object-fit:cover; transition:transform .5s ease }
.tile--tall{ grid-row:span 2 }
.tile--wide{ grid-column:span 2 }
.tile__cap{ display:flex; flex-direction:column; gap:2px; padding:11px 14px 12px; border-block-start:1px solid var(--line); background:#fff; position:relative }
.tile__cap::before{ content:""; position:absolute; top:-1px; inset-inline-start:0; width:28px; height:3px; background:var(--orange) }
.kind{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-deep) }
:lang(ar) .kind{ font-family:'Cairo',sans-serif; letter-spacing:0; font-size:.78rem }
.tile__title{ font-weight:600; color:var(--navy); line-height:1.3; font-size:.98rem }
.tile__meta{ color:var(--steel); font-size:.88rem }
a.tile:hover img,.tile--link:hover img{ transform:scale(1.04) }
a.tile:focus-visible{ outline-offset:2px }
/* registration corners on photos */
.tile::after{ content:""; position:absolute; top:10px; inset-inline-start:10px; width:18px; height:18px; border-top:2px solid #fff; border-inline-start:2px solid #fff; opacity:.85; pointer-events:none }
@media (max-width:1040px){ .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){ .gallery{ grid-template-columns:1fr; grid-auto-rows:auto } .tile img{ aspect-ratio:4/3; flex:none } .tile--tall{ grid-row:auto } .tile--wide{ grid-column:auto } .tile--tall img{ aspect-ratio:4/5 } }
.projects__foot{ margin-block-start:30px; display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between }
.projects__foot p{ color:var(--steel); font-size:.95rem; max-width:62ch }

/* safety & quality */
.checks{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-block-start:1px solid var(--line) }
.check{ padding:24px 24px 26px 0; border-block-end:1px solid var(--line); display:grid; grid-template-columns:34px 1fr; gap:14px; align-content:start }
.check svg{ width:30px; height:30px; color:var(--orange-deep) }
.check h3{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:1.3rem; line-height:1.05; color:var(--navy); margin-block-end:6px }
:lang(ar) .check h3{ font-size:1.08rem; line-height:1.5 }
.check p{ color:#3B5068; font-size:.97rem }
@media (max-width:900px){ .checks{ grid-template-columns:1fr 1fr } }
@media (max-width:600px){ .checks{ grid-template-columns:1fr } .check{ padding-inline-end:0 } }

/* areas */
.areas{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(28px,5vw,64px); align-items:center }
.emirates{ display:grid; gap:0; border-block-start:1px solid #2C4664 }
.emirates li{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:16px 0; border-block-end:1px solid #2C4664 }
.emirates .n{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1; color:#fff }
:lang(ar) .emirates .n{ font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:1.4 }
.emirates .t{ font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:.8rem; color:var(--orange) }
:lang(ar) .emirates .t{ font-family:'Cairo',sans-serif; letter-spacing:0; font-size:.88rem }
.emirates li.more .n{ color:#8FA3B8 }

/* contact */
.contact{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,5vw,64px); align-items:start }
.clist{ margin-block-start:28px; border-block-start:1px solid var(--line) }
.clist li{ border-block-end:1px solid var(--line) }
.clist a,.clist .row{ display:grid; grid-template-columns:96px 1fr; gap:12px; padding:14px 0; text-decoration:none; align-items:baseline }
.clist a:hover .v{ color:var(--orange-deep) }
.clist .k{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-deep) }
:lang(ar) .clist .k{ font-family:'Cairo',sans-serif; letter-spacing:0; font-size:.86rem }
.clist .v{ color:var(--navy); font-weight:600; overflow-wrap:anywhere; transition:color .2s }
.clist .v small{ display:block; color:var(--steel); font-weight:400; font-size:.9rem }

.quote-form{ background:#fff; border:1px solid var(--line); padding:clamp(20px,3.4vw,34px); position:relative }
.quote-form::before{ content:""; position:absolute; top:-1px; inset-inline-start:-1px; width:80px; height:5px; background:var(--orange) }
.quote-form h3{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:1.7rem; color:var(--navy); line-height:1 }
:lang(ar) .quote-form h3{ font-size:1.35rem; line-height:1.4 }
.quote-form .sub{ color:var(--steel); font-size:.95rem; margin-block:8px 22px }
.fields{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.field{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.field--full{ grid-column:1/-1 }
.field label{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--navy) }
:lang(ar) .field label{ font-family:'Cairo',sans-serif; letter-spacing:0; font-size:.9rem }
.field label .opt{ color:var(--steel); font-weight:500; text-transform:none; letter-spacing:0 }
.field input,.field select,.field textarea{ width:100%; min-height:48px; padding:11px 13px; border:1px solid #AEBBC8; border-radius:2px; background:var(--paper); font-size:1rem }
.field textarea{ min-height:110px; resize:vertical }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(242,107,29,.35); background:#fff }
.field [aria-invalid=true]{ border-color:#B42318; background:#FFF6F5 }
.err{ color:#B42318; font-size:.86rem; min-height:0 }
.err:empty{ display:none }
.form-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-block-start:22px }
.linkbtn{ background:none; border:0; padding:10px 4px; color:var(--navy); text-decoration:underline; text-underline-offset:4px; cursor:pointer; font-weight:500 }
.form-status{ margin-block-start:14px; color:var(--navy); font-size:.95rem }
.form-status:empty{ display:none }
.form-note{ margin-block-start:14px; color:var(--steel); font-size:.86rem }
@media (max-width:900px){ .contact{ grid-template-columns:1fr } }
@media (max-width:520px){ .fields{ grid-template-columns:1fr } }

/* ---------- footer ---------- */
.site-footer{ background:var(--navy-deep); color:#AEBCCB; padding-block:56px 26px; font-size:.95rem; border-block-start:5px solid var(--orange) }
.foot{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px }
.foot .brand{ color:#fff } .foot .brand__sub{ color:#8FA3B8 }
.foot p{ margin-block-start:14px; max-width:40ch }
.foot h2{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--orange); margin-block-end:12px }
:lang(ar) .foot h2{ font-family:'Cairo',sans-serif; letter-spacing:0; font-size:.9rem }
.foot li{ margin-block-end:6px }
.foot a{ color:#E9ECEF; text-decoration:none }
.foot a:hover{ color:var(--orange); text-decoration:underline }
.legal{ margin-block-start:40px; padding-block-start:18px; border-block-start:1px solid #1F3651; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-size:.84rem; color:#8FA3B8 }
.legal .d{ color:var(--orange); padding-inline:6px }
.legal a{ color:#6F849B; text-decoration:none } .legal a:hover{ color:#fff }
@media (max-width:800px){ .foot{ grid-template-columns:1fr } }

/* ---------- projects page ---------- */
.page-head{ padding-block:clamp(44px,6vw,72px) }
.page-head h1{ font-size:clamp(2.6rem,6.4vw,5rem); color:#fff; margin-block:4px 16px }
:lang(ar) .page-head h1{ font-size:clamp(2rem,4.6vw,3.4rem) }
.projects-body{ padding-block:clamp(40px,6vw,72px) }
.notice{ padding:14px 18px; border-inline-start:4px solid var(--orange); background:#fff; margin-block-end:24px; color:var(--navy) }
.project-meta{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); border:1px solid var(--line); background:#fff; margin-block-end:28px }
.project-meta > div{ padding:14px 18px; border-inline-end:1px solid var(--line) }
.project-meta dt{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-deep) }
.project-meta dd{ color:var(--navy); font-weight:600 }
.photo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px }
.photo-grid__item{ padding:0; border:1px solid var(--line); background:#fff; cursor:zoom-in; aspect-ratio:4/3; overflow:hidden }
.photo-grid__item img{ width:100%; height:100%; object-fit:cover; transition:transform .4s }
.photo-grid__item:hover img{ transform:scale(1.04) }
.back-link{ margin-block-start:28px }
.back-link a{ color:var(--navy); font-weight:600 }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(8,25,44,.96); display:grid; place-items:center; padding:56px 64px }
.lightbox[hidden]{ display:none }
.lightbox__stage{ max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:12px }
.lightbox__img{ max-width:100%; max-height:calc(100vh - 160px); object-fit:contain }
.lightbox figcaption{ color:#C9D2DC; display:flex; gap:14px; font-size:.95rem }
.lightbox__count{ color:var(--orange); font-family:'Barlow Condensed',sans-serif; letter-spacing:.1em }
.lightbox button{ position:absolute; width:48px; height:48px; border:1px solid #3A5574; background:var(--navy); color:#fff; font-size:1.5rem; cursor:pointer; border-radius:2px }
.lightbox button:hover{ background:var(--orange); color:var(--navy-deep) }
.lightbox__close{ top:14px; inset-inline-end:14px }
.lightbox__nav--prev{ inset-inline-start:10px; top:50% } .lightbox__nav--next{ inset-inline-end:10px; top:50% }
@media (max-width:600px){ .lightbox{ padding:64px 10px } .lightbox__nav--prev,.lightbox__nav--next{ top:auto; bottom:10px } }

/* 404 */
.nf{ min-height:70vh; display:grid; align-items:center; padding-block:64px }
.nf h1{ font-size:clamp(4rem,14vw,10rem); color:#fff }
.nf .pair{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-block-start:24px }
@media (max-width:700px){ .nf .pair{ grid-template-columns:1fr } }

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero .lede,.hero__actions,.detail{ animation:rise .8s cubic-bezier(.2,.7,.2,1) both }
  .hero .lede{ animation-delay:.08s } .hero__actions{ animation-delay:.16s } .detail{ animation-delay:.1s }
  .detail__outline polygon{ stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 1.6s .3s ease-out forwards }
}
@keyframes rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@keyframes draw{ to{ stroke-dashoffset:0 } }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } *,*::before,*::after{ transition:none!important; animation:none!important } }

/* late responsive fixes */
@media (max-width:800px){ .areas{ grid-template-columns:1fr } }
@media (max-width:560px){ .tile--wide.tile--tall img{ aspect-ratio:4/3 } }
.clist .v.ltr{ justify-self:start }
.explist{ margin-block-start:clamp(40px,6vw,64px); border-block-start:2px solid var(--navy) }
.explist li{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.2fr); gap:8px 24px; padding:16px 0; border-block-end:1px solid var(--line); align-items:baseline }
.explist .t{ font-weight:600; color:var(--navy) }
.explist .l{ color:var(--steel) }
.explist .s{ color:#3B5068; font-size:.95rem }
@media (max-width:760px){ .explist li{ grid-template-columns:1fr; gap:2px } }
.tile--cta{ background:var(--navy); border-color:var(--navy); color:#fff; padding:26px; justify-content:space-between; gap:12px }
.tile--cta::after{ border-color:var(--orange) }
.tile--cta .label{ color:var(--orange); padding-inline-start:28px }
.cta__t{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1 }
:lang(ar) .cta__t{ line-height:1.4; font-size:1.5rem }
.cta__b{ color:var(--orange); font-weight:600 }
.tile--cta:hover{ background:var(--navy-deep) }
.explist{ margin-block-start:0 }
[dir=rtl] .clist .v.ltr{ text-align:right }