/* =========================================================
   Binyan Alqimmah Alhadithah Cont. — binyan.sa
   Palette and type follow the delivered brand identity.
   Layout uses CSS logical properties so RTL/LTR mirror cleanly.
   ========================================================= */

:root{
  --navy-900:#0b1a2e;
  --navy-800:#122844;
  --navy-700:#1a374f;
  --navy-600:#22456b;
  --gold-600:#b07d3c;
  --gold-500:#c99250;
  --gold-400:#d9ab74;
  --gold-200:#fed2a1;
  --cream:#fbf6e2;
  --cream-2:#f4ecd4;
  --white:#ffffff;
  --ink:#16202e;
  --muted:#5d6c7e;
  --line:rgba(18,40,68,.12);

  --font-ar:"IBM Plex Sans Arabic";
  --font-en:"Manrope";
  --font:var(--font-ar),var(--font-en),system-ui,-apple-system,"Segoe UI",sans-serif;

  --wrap:1200px;
  --r:14px;
  --r-lg:22px;
  --shadow-sm:0 2px 10px rgba(11,26,46,.06);
  --shadow:0 14px 40px rgba(11,26,46,.10);
  --shadow-lg:0 30px 70px rgba(11,26,46,.18);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:84px;
}

html[lang="en"]{ --font:var(--font-en),var(--font-ar),system-ui,-apple-system,"Segoe UI",sans-serif; }

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); }

body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.75;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
/* Arabic headings need real leading — diacritics sit above the line and
   descenders below, so stacked lines crowd each other at Latin values.
   English gets the tighter setting it wants. */
h1,h2,h3,h4{ margin:0; line-height:1.5; font-weight:700; letter-spacing:normal; }
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4{ line-height:1.24; letter-spacing:-.01em; }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0; padding:0; list-style:none; }

.wrap{ width:min(var(--wrap),calc(100% - 48px)); margin-inline:auto; }

.skip-link{
  position:absolute; inset-block-start:-100px; inset-inline-start:16px; z-index:200;
  background:var(--gold-500); color:var(--navy-900);
  padding:12px 20px; border-radius:0 0 var(--r) var(--r); font-weight:600;
}
.skip-link:focus{ inset-block-start:0; }

:focus-visible{ outline:2px solid var(--gold-500); outline-offset:3px; border-radius:4px; }

/* ---------- shared bits ---------- */
.kicker{
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-600); margin:0 0 14px;
  display:flex; align-items:center; gap:12px;
}
.kicker::after{ content:""; flex:0 0 42px; height:1px; background:var(--gold-500); opacity:.6; }
.kicker--gold{ color:var(--gold-400); }
.kicker--gold::after{ background:var(--gold-400); }

.section{ padding-block:clamp(72px,9vw,128px); }

.section-head{ max-width:800px; margin-block-end:clamp(40px,5vw,64px); }
.section-head h2{ font-size:clamp(1.85rem,3.6vw,2.9rem); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .kicker{ justify-content:center; }
.section-sub{ color:var(--muted); font-size:1.06rem; margin-block-start:18px; }
.lead{ font-size:1.1rem; }

.ico{
  width:26px; height:26px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- social icons ---------- */
.svg-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.socials{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.socials[hidden]{ display:none; }

.social{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line); color:var(--navy-800);
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.social svg{
  width:20px; height:20px;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.social:hover{
  background:var(--navy-800); border-color:var(--navy-800); color:var(--cream);
  transform:translateY(-3px);
}

/* footer sits on navy, so the light-surface treatment inverts */
.socials--footer{ margin-block-start:24px; }
.site-footer .social{ border-color:rgba(251,246,226,.22); color:rgba(251,246,226,.72); }
.site-footer .social:hover{
  background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-900);
}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--gold-500); --btn-fg:var(--navy-900);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:100px; border:1px solid transparent;
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:inherit; font-size:.97rem; font-weight:700; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(201,146,80,.34); }
.btn:active{ transform:translateY(0); }
.btn-gold{ background:var(--gold-500); color:var(--navy-900); }
.btn-gold:hover{ background:var(--gold-400); }
.btn-ghost{ background:transparent; color:var(--cream); border-color:rgba(251,246,226,.42); }
.btn-ghost:hover{ background:rgba(251,246,226,.1); border-color:var(--cream); box-shadow:none; }
/* outline variant for light sections (btn-ghost is for dark backgrounds) */
.btn-outline{ background:transparent; color:var(--navy-800); border-color:var(--line); }
.btn-outline:hover{
  background:var(--navy-800); color:var(--cream); border-color:var(--navy-800);
  box-shadow:0 12px 28px rgba(18,40,68,.22);
}
.btn-sm{ padding:11px 22px; font-size:.9rem; }
.btn-lg{ padding:18px 40px; font-size:1.05rem; }
.btn-block{ width:100%; }
.btn-wa{ background:#1faa54; color:#fff; }
.btn-wa:hover{ background:#18944a; box-shadow:0 12px 28px rgba(31,170,84,.32); }
.btn-wa svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
  padding-block:16px;
}
.site-header.is-stuck{
  background:rgba(11,26,46,.94);
  backdrop-filter:blur(14px);
  box-shadow:0 6px 30px rgba(11,26,46,.28);
  padding-block:8px;
}
.header-inner{ display:flex; align-items:center; gap:28px; }

/* The delivered lockup is portrait (mark stacked over two text lines), which
   goes illegible at header height. The header pairs the mark with live text
   instead so both stay readable; the full lockup is used in the footer. */
.brand{ flex:none; display:flex; align-items:center; gap:13px; }
.brand-mark{ height:46px; width:auto; transition:height .35s var(--ease); }
.site-header.is-stuck .brand-mark{ height:39px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-text strong{
  font-size:.87rem; font-weight:700; color:var(--cream); letter-spacing:.005em;
}
.brand-text em{
  font-style:normal; font-family:var(--font-en),sans-serif;
  font-size:.6rem; font-weight:600; letter-spacing:.055em; color:var(--gold-400);
}

.nav{ display:flex; gap:30px; margin-inline-start:auto; }
.nav a{
  position:relative; font-size:.96rem; font-weight:500; color:var(--cream);
  padding-block:6px; opacity:.9; transition:opacity .2s, color .2s;
  white-space:nowrap;   /* "How We Work" / "Why Binyan" must not break in two */
}
.nav a::after{
  content:""; position:absolute; inset-block-end:0; inset-inline-start:0;
  width:0; height:2px; background:var(--gold-500); transition:width .28s var(--ease);
}
.nav a:hover{ opacity:1; }
.nav a:hover::after,
.nav a.is-active::after{ width:100%; }
.nav a.is-active{ color:var(--gold-400); opacity:1; }

.header-actions{ display:flex; align-items:center; gap:14px; flex:none; }

.lang-toggle{
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(251,246,226,.35); background:transparent; color:var(--cream);
  font-family:var(--font-en),sans-serif; font-size:.8rem; font-weight:700; letter-spacing:.03em;
  cursor:pointer; transition:background .25s, border-color .25s, color .25s;
}
.lang-toggle:hover{ background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-900); }

.burger{
  display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; padding:0;
}
.burger span{
  display:block; height:2px; width:24px; margin-inline:auto; background:var(--cream);
  transition:transform .3s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding-block:calc(var(--header-h) + 40px) 96px;
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
  background:url("../img/hero.jpg") center/cover no-repeat;
  transform:scale(1.06);
  animation:heroZoom 18s var(--ease) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }

/* Kept light enough to preserve the golden-hour warmth of the photograph
   while holding contrast for cream text on the reading side. */
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(11,26,46,.94) 0%, rgba(11,26,46,.36) 38%, rgba(11,26,46,.20) 100%),
    linear-gradient(to var(--scrim-dir,left), rgba(11,26,46,.80) 0%, rgba(11,26,46,.34) 55%, rgba(11,26,46,.03) 100%);
}
html[dir="rtl"]{ --scrim-dir:left; }
html[dir="ltr"]{ --scrim-dir:right; }

.hero-inner{ position:relative; z-index:2; max-width:820px; }
.hero .eyebrow{
  color:var(--gold-400); font-size:.83rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; margin:0 0 22px;
}
.hero-title{
  color:var(--cream); font-size:clamp(2.5rem,6.4vw,5rem);
  line-height:1.6; letter-spacing:normal; margin:0 0 30px;
}
/* Both languages share the headline leading so the hero reads the same either
   way. The value has to be restated here, not just inherited from .hero-title:
   the generic html[lang="en"] h1..h4 rule near the top is (0,1,2) and would
   otherwise out-specify .hero-title (0,1,0) and drag this back to 1.24.
   Only the tracking still splits — negative tracking squeezes the joins of a
   connected script, so it stays off in Arabic and on for Latin display type. */
html[lang="en"] .hero-title{ line-height:1.6; letter-spacing:-.02em; }
.hero-lead{
  color:rgba(251,246,226,.86); font-size:clamp(1.02rem,1.55vw,1.2rem);
  max-width:64ch; margin:0 0 56px;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }

.hero-scroll{
  position:absolute; inset-block-end:34px; inset-inline-start:50%;
  transform:translateX(-50%); z-index:2;
}
html[dir="rtl"] .hero-scroll{ transform:translateX(50%); }
.hero-scroll-line{
  display:block; width:1px; height:60px;
  background:linear-gradient(to bottom, transparent, var(--gold-400));
  animation:scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

/* =========================================================
   TRUST STRIP
   ========================================================= */
.trust{ background:var(--navy-800); color:var(--cream); padding-block:clamp(56px,6vw,76px); }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:38px; }
.trust-item .ico{ color:var(--gold-400); width:32px; height:32px; margin-block-end:16px; }
.trust-item h3{ font-size:1.06rem; margin-block-end:8px; }
.trust-item p{ margin:0; font-size:.94rem; line-height:1.65; color:rgba(251,246,226,.66); }

/* =========================================================
   ABOUT
   ========================================================= */
.about{ background:var(--cream); }
.about-grid{
  display:grid; grid-template-columns:1fr 1.08fr;
  gap:clamp(40px,5.5vw,80px); align-items:center;
}
.about-media{ position:relative; }
.about-media img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r-lg); box-shadow:var(--shadow);
}
.about-badge{
  position:absolute; inset-block-end:-26px; inset-inline-end:-18px;
  background:var(--navy-800); color:var(--cream);
  padding:22px 26px; border-radius:var(--r); max-width:230px;
  box-shadow:var(--shadow-lg);
  border-inline-start:3px solid var(--gold-500);
}
.about-badge strong{ display:block; color:var(--gold-400); font-size:1.15rem; margin-block-end:4px; }
.about-badge span{ font-size:.85rem; line-height:1.55; color:rgba(251,246,226,.72); }

.about-copy h2{ font-size:clamp(1.8rem,3.4vw,2.7rem); margin-block-end:22px; }
.about-copy p{ color:var(--muted); }
.about-copy .lead{ color:var(--ink); }

.pillars{
  display:grid; grid-template-columns:1fr 1fr; gap:26px;
  margin-block-start:36px; padding-block-start:32px; border-block-start:1px solid var(--line);
}
.pillar strong{
  display:block; color:var(--navy-800); font-size:1.02rem; margin-block-end:8px;
  padding-inline-start:14px; border-inline-start:3px solid var(--gold-500);
}
.pillar p{ font-size:.93rem; line-height:1.65; margin:0; color:var(--muted); }

/* =========================================================
   SERVICES
   ========================================================= */
.services{ background:var(--white); }
.svc-list{ display:flex; flex-direction:column; gap:clamp(48px,6vw,84px); }

.svc{
  display:grid; grid-template-columns:1fr 1.12fr;
  gap:clamp(32px,4.5vw,64px); align-items:center;
}
.svc--flip .svc-media{ order:2; }

.svc-media{ position:relative; }
.svc-media img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r-lg); box-shadow:var(--shadow);
}
.svc-body h3{ font-size:clamp(1.4rem,2.4vw,1.95rem); margin-block-end:16px; color:var(--navy-800); }
.svc-body > p{ color:var(--muted); }

.svc-tags{
  display:grid; grid-template-columns:1fr 1fr; gap:8px 20px;
  margin-block:22px 24px;
}
.svc-tags li{
  position:relative; font-size:.92rem; color:var(--ink);
  padding-inline-start:20px;
}
.svc-tags li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.62em;
  width:7px; height:7px; border-radius:2px; background:var(--gold-500);
}
.svc-method{
  background:var(--cream); border-inline-start:3px solid var(--gold-500);
  padding:18px 22px; border-radius:0 var(--r) var(--r) 0;
  font-size:.92rem; line-height:1.7; color:var(--muted); margin:0;
}
html[dir="rtl"] .svc-method{ border-radius:var(--r) 0 0 var(--r); }
.svc-method strong{ color:var(--navy-800); }

/* =========================================================
   PROCESS
   ========================================================= */
.process{
  background:var(--cream-2);
  background-image:url("../img/mark-navy.png");
  background-repeat:no-repeat;
  background-position:var(--wm-x,left) -60px;
  background-size:auto 460px;
  background-blend-mode:normal;
  position:relative;
}
html[dir="rtl"]{ --wm-x:-70px; }
html[dir="ltr"]{ --wm-x:calc(100% + 70px); }
.process::before{
  content:""; position:absolute; inset:0; background:var(--cream-2); opacity:.955;
  pointer-events:none;
}
.process .wrap{ position:relative; z-index:1; }

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; counter-reset:s; }
.step{
  position:relative; background:var(--white); border-radius:var(--r-lg);
  padding:34px 28px 30px; box-shadow:var(--shadow-sm);
  border-block-start:3px solid var(--gold-500);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.step-num{
  display:inline-block; font-family:var(--font-en),sans-serif;
  font-size:2.1rem; font-weight:800; line-height:1;
  color:var(--gold-500); opacity:.32; margin-block-end:14px; letter-spacing:-.03em;
}
.step h3{ font-size:1.06rem; color:var(--navy-800); margin-block-end:12px; }
.step p{ font-size:.9rem; line-height:1.68; color:var(--muted); margin:0; }

/* =========================================================
   PROJECTS
   ========================================================= */
.projects{ background:var(--white); }
.proj-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }

.proj{
  position:relative; background:var(--cream); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  display:flex; flex-direction:column;
}
.proj:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.proj img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.proj-tag{
  position:absolute; inset-block-start:18px; inset-inline-start:18px; z-index:2;
  background:rgba(11,26,46,.88); color:var(--gold-400);
  font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 14px; border-radius:100px; backdrop-filter:blur(6px);
}
.proj-body{ padding:26px 28px 30px; }
.proj-body h3{ font-size:1.12rem; color:var(--navy-800); margin-block-end:12px; line-height:1.45; }
.proj-body p{ font-size:.92rem; line-height:1.7; color:var(--muted); margin:0; }

/* gallery */
.gallery-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:20px; margin-block:clamp(56px,6vw,84px) 26px;
}
.gallery-head h3{ font-size:1.35rem; color:var(--navy-800); }
.filters{ display:flex; flex-wrap:wrap; gap:8px; }
.filter{
  border:1px solid var(--line); background:transparent; color:var(--muted);
  font-family:inherit; font-size:.88rem; font-weight:600;
  padding:9px 20px; border-radius:100px; cursor:pointer;
  transition:background .25s, color .25s, border-color .25s;
}
.filter:hover{ border-color:var(--gold-500); color:var(--navy-800); }
.filter.is-active{ background:var(--navy-800); border-color:var(--navy-800); color:var(--cream); }

.gallery{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.gallery button{
  position:relative; border:0; padding:0; cursor:pointer; overflow:hidden;
  border-radius:var(--r); background:var(--cream-2);
  aspect-ratio:1; display:block;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.gallery button img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s var(--ease);
}
.gallery button::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(11,26,46,.5),transparent 55%);
  opacity:0; transition:opacity .35s;
}
.gallery button:hover img{ transform:scale(1.07); }
.gallery button:hover::after{ opacity:1; }
.gallery button.is-hidden{ display:none; }

.gallery-more{ display:flex; justify-content:center; margin-block-start:32px; }
.gallery-more[hidden]{ display:none; }   /* must follow the rule above to win */

/* =========================================================
   WHY
   ========================================================= */
.why{ background:var(--cream); }
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.why-card{
  background:var(--white); border-radius:var(--r-lg); padding:34px 30px;
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.why-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.why-card .ico{
  color:var(--gold-600); width:30px; height:30px; margin-block-end:18px;
}
.why-card h3{ font-size:1.08rem; color:var(--navy-800); margin-block-end:10px; }
.why-card p{ font-size:.92rem; line-height:1.7; color:var(--muted); margin:0; }

/* =========================================================
   QA / HSE BAND
   ========================================================= */
.qa-band{
  background:var(--navy-800); color:var(--cream);
  padding-block:clamp(66px,8vw,110px);
}
.qa-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); }
.qa-col h3{ font-size:clamp(1.3rem,2.3vw,1.8rem); margin-block-end:16px; }
.qa-lead{ color:rgba(251,246,226,.68); font-size:.98rem; }
.qa-list{ display:grid; gap:12px; margin-block-start:26px; }
.qa-list li{
  position:relative; padding-inline-start:30px;
  font-size:.95rem; color:rgba(251,246,226,.9);
}
/* A tick is not a directional glyph — it must keep physical left/bottom borders
   in both writing modes, otherwise RTL turns it into a chevron. */
.qa-list li::before{
  content:""; position:absolute; inset-inline-start:1px; inset-block-start:.42em;
  width:14px; height:8px;
  border-left:2px solid var(--gold-400);
  border-bottom:2px solid var(--gold-400);
  transform:rotate(-45deg);
}

/* =========================================================
   CTA
   ========================================================= */
.cta{
  background:var(--gold-500);
  padding-block:clamp(60px,7vw,92px);
}
.cta-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(32px,5vw,64px); flex-wrap:wrap;
}
.cta blockquote{ margin:0; max-width:760px; }
.cta blockquote p{
  font-size:clamp(1.08rem,1.9vw,1.35rem); line-height:1.7;
  color:var(--navy-900); font-weight:500; margin:0 0 14px;
}
.cta cite{
  font-style:normal; font-size:.85rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(11,26,46,.6);
}
.cta .btn-gold{ background:var(--navy-800); color:var(--cream); flex:none; }
.cta .btn-gold:hover{ background:var(--navy-900); box-shadow:0 12px 30px rgba(11,26,46,.3); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ background:var(--cream); }
.contact-grid{
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(40px,5.5vw,80px); align-items:start;
}
.contact-intro h2{ font-size:clamp(1.8rem,3.4vw,2.7rem); margin-block-end:18px; }
.contact-intro .lead{ color:var(--muted); }

.contact-list{ display:grid; gap:22px; margin-block:34px 30px; }
.contact-list li{ display:flex; gap:16px; align-items:flex-start; }
.contact-list .ico{ color:var(--gold-600); margin-block-start:3px; }
.contact-list .lbl{
  display:block; font-size:.76rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-block-end:3px;
}
.contact-list a,
.contact-list div > span:not(.lbl){
  font-size:1.02rem; font-weight:600; color:var(--navy-800);
  transition:color .2s;
}
.contact-list a:hover{ color:var(--gold-600); }

/* form */
.contact-form-wrap{
  background:var(--white); border-radius:var(--r-lg);
  padding:clamp(28px,3.5vw,46px); box-shadow:var(--shadow);
}
.field{ margin-block-end:20px; }
/* minmax(0,…) stops grid items refusing to shrink below their content width. */
.field-row{
  display:grid; gap:18px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.field label{
  display:block; font-size:.86rem; font-weight:600;
  color:var(--navy-800); margin-block-end:8px;
}
.field input,
.field select,
.field textarea{
  width:100%; font-family:inherit; font-size:.97rem; color:var(--ink);
  padding:14px 16px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--cream); transition:border-color .25s, background .25s, box-shadow .25s;
}
.field textarea{ resize:vertical; min-height:120px; }
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-size:6px 6px,6px 6px;
  background-position:calc(100% - 22px) 22px,calc(100% - 16px) 22px;
  background-repeat:no-repeat;
}
html[dir="rtl"] .field select{ background-position:18px 22px,24px 22px; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--gold-500); background:var(--white);
  box-shadow:0 0 0 4px rgba(201,146,80,.14);
}
.field .err{
  display:none; margin:7px 0 0; font-size:.82rem; color:#c0392b; font-weight:500;
}
.field.is-invalid input,
.field.is-invalid textarea{ border-color:#c0392b; background:#fdf4f3; }
.field.is-invalid .err{ display:block; }

.hp{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }

/* ---------- country code selector ---------- */

/* Windows ships no country-flag glyphs, so 🇸🇦 falls back to the letters "SA".
   This font supplies them. unicode-range limits it to the regional-indicator
   block, so the 78KB only downloads for pages that actually show a flag.
   Twemoji by Twitter, CC BY 4.0 — see the credit in README.md. */
@font-face{
  font-family:"Twemoji Country Flags";
  src:url("../fonts/TwemojiCountryFlags.woff2") format("woff2");
  unicode-range:U+1F1E6-1F1FF;
  font-display:swap;
}
.phone-row{ display:flex; gap:10px; align-items:stretch; }
.phone-row #phone{ flex:1 1 auto; min-width:9ch; letter-spacing:.04em; }

.cc{ position:relative; flex:none; }
.cc-btn{
  height:100%; display:flex; align-items:center; gap:6px;
  padding:0 10px; flex:none;
  font-family:inherit; font-size:.95rem; color:var(--ink); cursor:pointer;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.cc-btn:hover{ border-color:var(--gold-500); }
.cc-btn[aria-expanded="true"]{
  border-color:var(--gold-500); background:var(--white);
  box-shadow:0 0 0 4px rgba(201,146,80,.14);
}
.cc-flag,
.cc-list .fg{
  font-family:"Twemoji Country Flags","Apple Color Emoji","Segoe UI Emoji",
              "Noto Color Emoji",sans-serif;
}
.cc-flag{ font-size:1.15rem; line-height:1; }
.cc-dial{ font-weight:600; font-variant-numeric:tabular-nums; }
.cc-caret{
  width:15px; height:15px; margin-inline-start:auto; flex:none;
  fill:none; stroke:var(--muted); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .25s var(--ease);
}
.cc-btn[aria-expanded="true"] .cc-caret{ transform:rotate(180deg); }

.cc-pop{
  position:absolute; z-index:30; inset-block-start:calc(100% + 8px); inset-inline-start:0;
  width:min(330px,78vw);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.cc-pop[hidden]{ display:none; }

.cc-search{
  width:100%; border:0; border-bottom:1px solid var(--line);
  padding:13px 16px; font-family:inherit; font-size:.93rem; color:var(--ink);
  background:var(--cream);
}
.cc-search:focus{ outline:none; background:var(--white); }

.cc-list{ max-height:264px; overflow-y:auto; overscroll-behavior:contain; }
.cc-list li[role="option"]{
  display:flex; align-items:center; gap:10px;
  padding:9px 16px; cursor:pointer; font-size:.9rem;
  transition:background .15s;
}
.cc-list li[role="option"]:hover,
.cc-list li[role="option"].is-active{ background:var(--cream-2); }
.cc-list li[role="option"][aria-selected="true"]{ font-weight:600; }
.cc-list .nm{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cc-list .dl{
  color:var(--muted); font-variant-numeric:tabular-nums; font-size:.85rem;
  direction:ltr; flex:none;
}
.cc-list .fg{ font-size:1.1rem; line-height:1; flex:none; width:1.5em; text-align:center; }

/* Saudi first, then the GCC, then everyone else */
.cc-sep{
  padding:7px 16px; font-size:.68rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-600);
  background:var(--cream); border-block:1px solid var(--line);
  position:sticky; inset-block-start:0;
}
.cc-empty{ margin:0; padding:16px; font-size:.88rem; color:var(--muted); text-align:center; }
.cc-empty[hidden]{ display:none; }

@media (max-width:420px){
  .cc-btn{ padding:0 8px; font-size:.88rem; gap:5px; }
  .cc-pop{ width:min(300px,86vw); }
}

#submitBtn{ position:relative; margin-block-start:6px; }
.spinner{
  display:none; width:17px; height:17px; border-radius:50%;
  border:2px solid rgba(11,26,46,.28); border-top-color:var(--navy-900);
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
#submitBtn.is-loading{ pointer-events:none; opacity:.75; }
#submitBtn.is-loading .spinner{ display:block; }

.form-status{
  margin-block-start:16px; padding:14px 18px; border-radius:var(--r);
  font-size:.92rem; font-weight:500; display:none;
}
.form-status.is-ok{ display:block; background:#eaf7ef; color:#1c7a45; border:1px solid #bde5cc; }
.form-status.is-err{ display:block; background:#fdf1f0; color:#b3372c; border:1px solid #f3ccc8; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--navy-900); color:var(--cream); padding-block:clamp(56px,6vw,80px) 0; }
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1.2fr;
  gap:clamp(28px,4vw,56px); padding-block-end:48px;
}
.footer-brand img{ height:150px; width:auto; margin-block-end:22px; }
.footer-brand p{ font-size:.9rem; line-height:1.75; color:rgba(251,246,226,.6); margin:0; max-width:40ch; }

.site-footer h4{
  font-size:.79rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-400); margin-block-end:18px;
}
.footer-nav,.footer-svc,.footer-contact{ display:flex; flex-direction:column; gap:11px; }
.footer-nav a,.footer-svc span,.footer-contact a,.footer-contact span{
  font-size:.92rem; color:rgba(251,246,226,.66); transition:color .2s;
}
.footer-nav a:hover,.footer-contact a:hover{ color:var(--gold-400); }
/* dir="ltr" keeps "+966 …" in the right glyph order, but would also drag the
   text to the left edge of an RTL column — realign it to the column's start. */
html[dir="rtl"] .footer-contact [dir="ltr"]{ text-align:right; }
html[dir="ltr"] .footer-contact [dir="ltr"]{ text-align:left; }

.footer-bottom{
  border-block-start:1px solid rgba(251,246,226,.12);
  padding-block:24px; text-align:center;
}
.footer-bottom p{ margin:0; font-size:.85rem; color:rgba(251,246,226,.46); }

/* =========================================================
   WHATSAPP FLOAT
   ========================================================= */
.wa-float{
  position:fixed; inset-block-end:26px; inset-inline-end:26px; z-index:90;
  width:56px; height:56px; border-radius:50%;
  background:#1faa54; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 10px 28px rgba(31,170,84,.4);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.wa-float:hover{ transform:scale(1.08); box-shadow:0 14px 34px rgba(31,170,84,.5); }
.wa-float svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }

/* =========================================================
   BACK TO TOP — sits above the WhatsApp button, same edge, so
   both mirror together with the writing direction.
   ========================================================= */
.to-top{
  position:fixed; inset-block-end:92px; inset-inline-end:26px; z-index:90;
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(251,246,226,.22);
  background:var(--navy-800); color:var(--cream);
  display:grid; place-items:center; cursor:pointer; padding:0;
  opacity:0; visibility:hidden; transform:translateY(10px);
  box-shadow:0 10px 26px rgba(11,26,46,.34);
  transition:opacity .3s var(--ease), transform .3s var(--ease),
             visibility .3s, background .25s, color .25s, border-color .25s;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--gold-500); color:var(--navy-900); border-color:var(--gold-500); }
.to-top svg{
  width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(6,15,27,.96);
  display:grid; place-items:center;
  padding:5vmin;
  animation:fadeIn .25s var(--ease);
}
.lightbox[hidden]{ display:none; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.lightbox img{
  max-width:100%; max-height:88vh; object-fit:contain;
  border-radius:var(--r); box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lb-close,.lb-nav{
  position:absolute; border:0; background:rgba(251,246,226,.1); color:var(--cream);
  cursor:pointer; border-radius:50%; transition:background .25s;
  display:grid; place-items:center; line-height:1;
}
.lb-close:hover,.lb-nav:hover{ background:var(--gold-500); color:var(--navy-900); }
.lb-close{ inset-block-start:22px; inset-inline-end:22px; width:46px; height:46px; font-size:1.9rem; }
.lb-nav{ inset-block-start:50%; transform:translateY(-50%); width:52px; height:52px; font-size:2.2rem; }
.lb-prev{ inset-inline-start:22px; }
.lb-next{ inset-inline-end:22px; }
html[dir="rtl"] .lb-prev{ transform:translateY(-50%) scaleX(-1); }
html[dir="rtl"] .lb-next{ transform:translateY(-50%) scaleX(-1); }
.lb-counter{
  position:absolute; inset-block-end:24px; inset-inline-start:50%;
  transform:translateX(-50%);
  color:rgba(251,246,226,.7); font-size:.86rem; letter-spacing:.08em;
  font-family:var(--font-en),sans-serif;
}
html[dir="rtl"] .lb-counter{ transform:translateX(50%); }

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
/* Content is hidden ONLY when JS is confirmed running (html.js is set by
   script.js on its first line). If the script fails to load or throws before
   that point, nothing is ever hidden and the page renders normally. */
.js .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* English labels are longer than the Arabic ones, so the bar gets tight
   before the mobile breakpoint — close the gaps rather than wrap. */
@media (max-width:1240px){
  .nav{ gap:20px; }
  .nav a{ font-size:.92rem; }
}

/* Below this the header CTA no longer fits beside the English nav and gets
   clipped. Drop it — the hero and the Contact link both still lead there. */
@media (max-width:1024px){
  .header-cta{ display:none; }
}

@media (max-width:1080px){
  .trust-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .why-grid{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:repeat(3,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  :root{ --header-h:72px; }

  /* Drawer opens from the reading-start edge so it matches the burger:
     right in Arabic, left in English. */
  .nav{
    position:fixed; inset-block-start:0; inset-inline-start:0;
    width:min(320px,84vw); height:100svh;
    background:var(--navy-900);
    flex-direction:column; justify-content:center; gap:8px;
    padding:40px;
    transition:transform .4s var(--ease);
    box-shadow:20px 0 60px rgba(0,0,0,.4);
    margin-inline-start:0;
    transform:translateX(-100%);           /* LTR: parked off the left edge */
  }
  html[dir="rtl"] .nav{
    transform:translateX(100%);            /* RTL: parked off the right edge */
    box-shadow:-20px 0 60px rgba(0,0,0,.4);
  }

  /* Both open rules must out-specify html[dir="rtl"] .nav (0,2,1), otherwise
     the parked transform keeps winning and the drawer never slides in. */
  .nav.is-open,
  html[dir="rtl"] .nav.is-open{ transform:translateX(0); }

  /* Switching language flips where the closed drawer parks (-100% <-> +100%).
     Without this it animates that flip and a navy panel sweeps across the
     screen. The class is held for one frame while the direction changes. */
  html.lang-switching .nav{ transition:none !important; }
  .nav a{ font-size:1.15rem; padding-block:12px; }

  .burger{ display:flex; order:-1; }   /* first item, so it lands in the corner */
  .header-cta{ display:none; }

  /* Burger takes the start corner (right in AR, left in EN); logo moves to the
     opposite end. */
  .header-actions{ order:-1; margin-inline-start:0; }
  .brand{ margin-inline-start:auto; }
  .brand-mark{ height:40px; }

  .about-grid,
  .svc,
  .contact-grid,
  .qa-grid,
  .proj-grid{ grid-template-columns:1fr; }

  .svc--flip .svc-media{ order:0; }
  .about-media img{ aspect-ratio:16/11; }
  .about-badge{ inset-inline-end:16px; inset-block-end:-20px; }

  .cta-inner{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:680px){
  body{ font-size:16px; }
  .wrap{ width:calc(100% - 36px); }

  .brand-text{ display:none; }
  .footer-brand img{ height:120px; }

  /* Centring the hero block left a dead gap under the buttons on phones.
     Stretch the content column instead and let the CTAs settle at the foot,
     clear of the floating WhatsApp button. */
  /* 100svh, not 92 — svh is the viewport with the browser chrome fully shown,
     which is what you get on load, so the banner fills the first screen exactly
     and the trust strip only appears once you scroll. */
  .hero{ min-height:100svh; align-items:stretch; padding-block-end:96px; }
  .hero-media{ background-image:url("../img/hero-mobile.jpg"); }
  .hero-inner{ display:flex; flex-direction:column; }

  /* Headline gets more air between its two lines, and the whole text block
     (eyebrow, headline, lead) sits a little lower down the screen. The CTAs
     are pinned to the foot, so this only eats the slack in between. */
  .hero .eyebrow{ margin-block-start:5vh; }
  .hero-title{ line-height:1.44; margin-block-end:34px; }
  .hero-cta{ margin-block-start:auto; padding-block-start:34px; }
  .hero-cta .btn{ flex:1 1 100%; }
  .hero-scroll{ display:none; }

  .trust-grid{ grid-template-columns:1fr; gap:28px; }
  .steps,
  .why-grid{ grid-template-columns:1fr; }
  .svc-tags,
  .pillars,
  .field-row{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr 1fr; gap:10px; }
  .footer-grid{ grid-template-columns:1fr; gap:34px; }
  .gallery-head{ flex-direction:column; align-items:flex-start; }

  .lb-nav{ width:42px; height:42px; font-size:1.7rem; }
  .lb-prev{ inset-inline-start:10px; }
  .lb-next{ inset-inline-end:10px; }
  .wa-float{ inset-block-end:18px; inset-inline-end:18px; width:52px; height:52px; }
  .to-top{ inset-block-end:80px; inset-inline-end:18px; width:42px; height:42px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  /* must match .js .reveal specificity, otherwise the hidden state wins */
  .js .reveal{ opacity:1; transform:none; }
  .hero-media{ transform:none; }
}

/* =========================================================
   SUBMISSION CONFIRMATION
   Same brand furniture as the confirmation email so the two
   read as one message. Fixed brand colours, not tokens that
   could drift.
   ========================================================= */
.confirm{
  position:fixed; inset:0; z-index:210;
  background:rgba(6,15,27,.78);
  display:grid; place-items:center;
  padding:5vmin;
  animation:fadeIn .25s var(--ease);
  overflow-y:auto;
}
.confirm[hidden]{ display:none; }

.confirm-card{
  position:relative;
  width:min(560px,100%);
  background:var(--white);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  animation:confirmIn .32s var(--ease);
}
@keyframes confirmIn{
  from{ opacity:0; transform:translateY(14px) scale(.98); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .confirm,.confirm-card{ animation:none; }
}

.confirm-close{
  position:absolute; inset-block-start:14px; inset-inline-end:14px;
  width:38px; height:38px; border:0; border-radius:50%;
  background:rgba(251,246,226,.14); color:var(--cream);
  font-size:1.6rem; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:background .25s;
}
.confirm-close:hover{ background:var(--gold-500); color:var(--navy-900); }

.confirm-head{
  background:var(--navy-800);
  padding:26px 24px 22px;
  text-align:center;
  border-block-end:3px solid var(--gold-500);
}
.confirm-head img{ width:150px; height:auto; margin:0 auto 8px; display:block; }
.confirm-tagline{
  display:block; color:var(--gold-500);
  font-size:.78rem; letter-spacing:.6px;
}

.confirm-body{ padding:26px 26px 22px; }
.confirm-body h3{
  color:var(--navy-800); font-size:1.32rem;
  margin:0 0 10px; line-height:1.4;
}
.confirm-intro{
  color:var(--ink); font-size:.94rem; line-height:1.85; margin:0 0 18px;
}
.confirm-ref{
  display:inline-block; margin:0 0 20px;
  background:var(--cream-2); color:var(--navy-800);
  font-size:.86rem; padding:7px 14px; border-radius:8px;
}
.confirm-ref b{ font-weight:600; }

.confirm-summary{
  background:var(--cream); border-radius:10px;
  padding:16px 18px; margin-bottom:20px;
}
.confirm-summary-label{
  color:var(--gold-600); font-size:.78rem;
  letter-spacing:.4px; margin:0 0 12px;
}
.confirm-summary dl{
  display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr);
  gap:6px 12px; margin:0; font-size:.86rem;
}
.confirm-summary dt{ color:var(--muted); }
.confirm-summary dd{ color:var(--ink); margin:0; line-height:1.7; overflow-wrap:anywhere; }

.confirm-body h4{
  color:var(--navy-800); font-size:.98rem; margin:0 0 8px;
}
.confirm-next{
  color:var(--muted); font-size:.86rem; line-height:1.85; margin:0;
}

.confirm-foot{
  background:var(--navy-800); padding:16px 24px; text-align:center;
}
.confirm-foot span{
  display:block; color:var(--cream); font-size:.78rem; line-height:1.8;
}
.confirm-foot .confirm-foot-url{ color:var(--gold-500); margin-block-start:2px; }

@media (max-width:560px){
  .confirm{ padding:0; place-items:stretch; }
  .confirm-card{ width:100%; border-radius:0; min-height:100%; }
  .confirm-summary dl{ grid-template-columns:1fr; gap:2px 0; }
  .confirm-summary dd{ margin-block-end:8px; }
  /* 44px minimum touch target */
  .confirm-close{ width:44px; height:44px; }
}

@media print{
  .site-header,.wa-float,.hero-scroll,.lightbox,.confirm,.filters,.contact-form-wrap{ display:none !important; }
  body{ background:#fff; }
  .js .reveal{ opacity:1; transform:none; }
}