/* ============================================================================
   أرض نبع الغدير — corporate website.

   Static HTML on purpose. A corporate brochure has no users, no session and
   nothing to protect; a database here would be a liability with no benefit.
   The one dynamic thing the brief asks for — the contact form — is a single
   POST to an endpoint the server owns, so the pages stay files on disk.

   The palette is the one set in §3 of the brief. It is deliberately NOT lifted
   from the logo bitmap in the incorporation papers: the brief forbids redrawing
   the mark from a scan, so every colour here is a stated value that can be
   re-tuned in one place the moment the official SVG arrives.
   ============================================================================ */

@font-face {
  font-family: 'Cairo';
  src: url('fonts/Cairo-Variable.ttf') format('truetype');
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  /* §3 of the brief, verbatim. Nothing else may introduce a new hex value —
     a fifth blue invented inside one section is how a corporate site starts
     looking like three different companies. */
  --primary:      #194F89;   /* headings, buttons */
  --primary-dark: #102D4A;   /* header, dark grounds */
  --accent:       #D94D79;   /* the logo's rose, used sparingly */
  --tint:         #F5F7FA;   /* section grounds */
  --card:         #FFFFFF;
  --ink:          #263445;   /* body text */

  /* Derived, not new: mixes of the above for borders and quiet text. They are
     written out rather than computed so the file has no build step. */
  --ink-soft:     #4A5A6E;
  --muted:        #6B7B8F;
  --border:       #DFE5EC;
  --divider:      #E8ECF2;
  --primary-soft: #E8EFF7;

  --wide: 1160px;
  --r:    14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Cairo', 'Segoe UI', system-ui, sans-serif;
  background: var(--card);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 24px; }

/* Latin digits — phone numbers, dates, the capital figure — stay left-to-right
   inside an Arabic line. Without isolation a '+964' lands as '964+'. */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* --------------------------------------------------------------- a11y --- */
/* Keyboard users get a visible focus ring everywhere. :focus-visible keeps it
   off mouse clicks, so nothing looks broken for pointer users. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
  background: var(--primary-dark); color: #fff; padding: 12px 20px;
  border-radius: 0 0 10px 10px; font-weight: 700;
}
.skip:focus { inset-inline-start: 50%; transform: translateX(50%); }
html[dir="ltr"] .skip:focus { transform: translateX(-50%); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------- wordmark --- */
/* The mark is the company name over its transliteration, set in type, not
   placed as an image — the same lockup the client supplied, rebuilt in Cairo.

   Two consequences worth keeping: it recolours for the dark footer with one
   `color` declaration instead of a second white artwork file, and it stays
   sharp at any zoom on any screen, which a raster wordmark never does.

   The tracking on the Latin line is the whole effect. At normal spacing the
   transliteration reads as a caption under a heading; opened up to .2em it
   reads as part of the mark. */
.brand { text-decoration: none; display: block; }
.brand b {
  display: block; font-weight: 800; letter-spacing: -.3px;
  line-height: 1.2; white-space: nowrap;
}
.brand small {
  display: block; font-weight: 600; text-transform: uppercase;
  letter-spacing: .2em; line-height: 1.2; white-space: nowrap;
}

/* ---------------------------------------------------------------- nav --- */
header.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--divider);
}
.nav .wrap { display: flex; align-items: center; gap: 20px; height: 72px; }
.nav .brand { color: var(--primary-dark); }
.nav .brand:hover { text-decoration: none; }
.nav .brand:hover b, .nav .brand:hover small { color: var(--primary); }
.nav .brand b { font-size: 22px; }
/* The Latin line is optically indented by its own trailing letter-space: the
   .2em after the last R has nowhere to go. Pulling it back by that amount lines
   the two lines up on the right edge, which is where an RTL reader checks. */
.nav .brand small { font-size: 10.5px; color: var(--primary); opacity: .85; margin-inline-start: -.2em; }

/* The -.2em above cancels the trailing letter-space that sits AFTER the final
   R. On an RTL page the wordmark is flush right, so that space pushes the Latin
   line off the edge and the correction is needed. On an LTR page both lines are
   flush LEFT, the trailing space falls harmlessly on the right, and the same
   correction would drag the line 2px out of alignment instead. */
html[dir="ltr"] .brand small { margin-inline-start: 0; }

/* ------------------------------------------------------- language switch --- */
.langswitch {
  border: 1px solid var(--border); border-radius: 9px;
  padding: 7px 14px !important; font-size: 14.5px !important;
  color: var(--ink-soft) !important; background: var(--card);
}
.langswitch:hover { background: var(--tint); border-color: var(--muted); }
@media (max-width: 900px) {
  /* In the dropped panel it is a row like the others, but it keeps its frame so
     it still reads as a control rather than a fifth destination. */
  .langswitch { text-align: center; margin-top: 8px; }
}
.nav .links { display: flex; gap: 6px; margin-inline-start: auto; align-items: center; }
.nav .links a {
  color: var(--ink-soft); font-size: 15.5px; font-weight: 600;
  padding: 8px 12px; border-radius: 9px;
}
.nav .links a:hover { color: var(--primary); background: var(--tint); text-decoration: none; }
/* The current page is named, not merely coloured: colour alone is not a cue a
   screen reader can pass on, hence aria-current on the markup side too. */
.nav .links a[aria-current="page"] { color: var(--primary); background: var(--primary-soft); }

/* `.nav .links a` is two classes plus an element and therefore outranks
   `.btn.primary`; without this line the call-to-action's label repaints in
   --ink-soft and goes dark-on-blue. Naming it is the narrow fix — !important
   would win too, and hide the reason from whoever reads this next. */
.nav .links a.btn.primary { color: #fff; background: var(--primary); }
.nav .links a.btn.primary:hover { background: var(--primary-dark); }

.burger {
  display: none; margin-inline-start: auto;
  width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--card); color: var(--primary-dark);
  cursor: pointer; align-items: center; justify-content: center; padding: 0;
}
.burger svg { width: 22px; height: 22px; }
.burger .close { display: none; }
.burger[aria-expanded="true"] .open  { display: none; }
.burger[aria-expanded="true"] .close { display: block; }

@media (max-width: 900px) {
  .burger { display: inline-flex; }
  .nav .links {
    position: absolute; inset-inline: 0; top: 72px;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--card); border-bottom: 1px solid var(--divider);
    padding: 12px 24px 20px; box-shadow: 0 18px 30px rgba(16,45,74,.10);
  }
  /* `hidden` rather than `display:none` in CSS: the attribute keeps the panel
     out of the accessibility tree as well, so a closed menu is not tabbable. */
  .nav .links[hidden] { display: none; }
  .nav .links a { padding: 12px 14px; font-size: 16.5px; }
  .nav .links a.btn { margin-top: 8px; }
}

/* ---------------------------------------------------------------- btn --- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 12px 24px; border-radius: 11px; font-weight: 700; font-size: 16px;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  line-height: 1.5;
}
.btn:hover { text-decoration: none; }
.btn.primary  { background: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-dark); }
.btn.ghost    { border-color: var(--border); background: var(--card); color: var(--ink); }
.btn.ghost:hover { background: var(--tint); }
.btn.white    { background: #fff; color: var(--primary-dark); }
.btn.white:hover { background: var(--tint); }
.btn.on-brand { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.40); }
.btn.on-brand:hover { background: rgba(255,255,255,.24); }

/* --------------------------------------------------------------- hero --- */
.hero {
  background: linear-gradient(215deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff; position: relative; overflow: hidden;
  padding: 88px 0 96px;
}
.hero::after {
  content: ''; position: absolute; inset-inline-start: -180px; top: -240px;
  width: 640px; height: 640px; border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 56px; align-items: center; }
.hero.plain { padding: 66px 0 70px; }
.hero.plain .wrap { display: block; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.26);
  padding: 6px 15px; border-radius: 999px; font-size: 14.5px; margin-bottom: 20px;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.hero h1 { font-size: clamp(31px, 4.8vw, 50px); font-weight: 800; line-height: 1.25; letter-spacing: -.6px; margin: 0 0 16px; }
.hero p.lead { font-size: 19px; line-height: 1.85; color: rgba(255,255,255,.90); margin: 0 0 30px; max-width: 36em; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .note { margin-top: 22px; font-size: 14.5px; color: rgba(255,255,255,.72); }

/* Breadcrumbs sit inside the dark hero on inner pages. */
.crumbs { font-size: 14.5px; color: rgba(255,255,255,.75); margin-bottom: 14px; }
.crumbs a { color: rgba(255,255,255,.92); }
.crumbs span { padding: 0 6px; opacity: .55; }

/* ------------------------------------------------------------ hero art --- */
/* Geometry, not photography. The brief is explicit: a stock photograph shown
   beside a project name reads as a photograph OF that project, and none of the
   three projects has an approved image yet. Abstract marks make no such claim
   and need no licence. Replace with company photography when it is cleared. */
.art {
  aspect-ratio: 4 / 3; width: 100%; border-radius: 20px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center; padding: 28px;
}
.art svg { width: 100%; height: auto; color: rgba(255,255,255,.88); }

/* ------------------------------------------------------------ section --- */
main { display: block; }
section { padding: 80px 0; }
section.tint { background: var(--tint); border-block: 1px solid var(--divider); }
section.tight { padding: 56px 0; }

.eyebrow-dark {
  display: inline-block; color: var(--primary); font-weight: 700; font-size: 14.5px;
  letter-spacing: .3px; margin-bottom: 10px;
}
h2.title { font-size: clamp(25px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.4px; margin: 0 0 12px; line-height: 1.35; }
p.sub { color: var(--ink-soft); font-size: 18px; margin: 0 0 38px; max-width: 48em; }
.prose p { color: var(--ink-soft); font-size: 17px; max-width: 46em; }
.prose h3 { font-size: 20px; font-weight: 700; margin: 30px 0 8px; color: var(--ink); }
.prose ul { color: var(--ink-soft); padding-inline-start: 22px; max-width: 46em; }
.prose li { margin-bottom: 8px; }

/* --------------------------------------------------------------- grid --- */
/*
   **`1fr` is not `minmax(0, 1fr)`.** A `1fr` track refuses to shrink below its
   content's min-content width, so one long unbroken string keeps its column
   wide and pushes the page sideways. On an RTL page that overflow scrolls the
   content out of view at the START edge — the half a reader's eye lands on
   first. Every track below is therefore floored at zero.
*/
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } }

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 28px 26px;
  display: flex; flex-direction: column;
}
.card .ico {
  width: 48px; height: 48px; border-radius: 13px; background: var(--primary-soft);
  color: var(--primary); display: grid; place-items: center; margin-bottom: 16px;
}
.card .ico svg { width: 25px; height: 25px; }
.card h3 { font-size: 19.5px; font-weight: 700; margin: 0 0 8px; color: var(--ink); }
.card p  { color: var(--ink-soft); font-size: 15.8px; line-height: 1.75; margin: 0; }
.card .more { margin-top: auto; padding-top: 16px; font-weight: 700; font-size: 15.5px; display: inline-flex; gap: 6px; align-items: center; }
.card .more svg { width: 16px; height: 16px; }
/* The whole card is the target, but only the link is in the tab order — two
   tab stops for one destination is noise for a keyboard user. The stretched
   pseudo-element covers the card; nothing else inside it is clickable. */
.card.link { position: relative; transition: border-color .18s, box-shadow .18s, transform .18s; }
.card.link:hover { border-color: var(--primary); box-shadow: 0 12px 28px rgba(16,45,74,.09); transform: translateY(-2px); }
.card.link .more::after { content: ''; position: absolute; inset: 0; border-radius: var(--r); }

/* -------------------------------------------------------------- split --- */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center; }
@media (max-width: 940px) { .split { grid-template-columns: minmax(0,1fr); gap: 34px; } }

.checks { list-style: none; padding: 0; margin: 20px 0 0; }
.checks li { display: flex; gap: 11px; margin-bottom: 12px; font-size: 16.5px; align-items: start; color: var(--ink-soft); }
.checks li svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--primary); margin-top: 5px; }

/* --------------------------------------------------------------- facts --- */
/* Company facts as a definition list, because that is what they are. Only the
   rows §2 of the brief clears for publication appear in the markup at all. */
.facts { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--card); }
.facts dl { margin: 0; }
.facts .row { display: grid; grid-template-columns: minmax(0,190px) minmax(0,1fr); border-bottom: 1px solid var(--divider); }
.facts .row:last-child { border-bottom: 0; }
.facts dt { padding: 15px 20px; background: var(--tint); font-weight: 700; font-size: 15.5px; color: var(--primary-dark); margin: 0; }
.facts dd { padding: 15px 20px; margin: 0; font-size: 16px; color: var(--ink-soft); }
@media (max-width: 620px) {
  .facts .row { grid-template-columns: minmax(0,1fr); }
  .facts dt { padding-bottom: 4px; background: var(--card); }
  .facts dd { padding-top: 0; }
}

/* --------------------------------------------------------------- band --- */
.band {
  background: linear-gradient(215deg, var(--primary), var(--primary-dark));
  color: #fff; border-radius: 20px; padding: 52px 44px; text-align: center;
  position: relative; overflow: hidden;
}
.band::after {
  content: ''; position: absolute; inset-inline-end: -140px; bottom: -200px;
  width: 470px; height: 470px; border-radius: 50%; background: rgba(255,255,255,.07);
}
.band h2 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; margin: 0 0 12px; position: relative; }
.band p  { color: rgba(255,255,255,.88); font-size: 18px; margin: 0 auto 26px; position: relative; max-width: 42em; }
.band .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }

/* --------------------------------------------------------------- form --- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 700; font-size: 15.5px; color: var(--ink); }
.field .hint { font-weight: 400; color: var(--muted); font-size: 14px; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--muted); }
/* Never colour alone: an invalid field also gets a message node below it. */
.field .err { color: #A3183A; font-size: 14.5px; font-weight: 600; }
.field .err:empty { display: none; }
.field [aria-invalid="true"] { border-color: #A3183A; background: #FEF4F6; }
.consent { display: flex; gap: 10px; align-items: start; font-size: 15.5px; color: var(--ink-soft); }
.consent input { width: 18px; height: 18px; margin-top: 6px; flex: 0 0 18px; }
.form-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
@media (max-width: 640px) { .form-row { grid-template-columns: minmax(0,1fr); } }

/* The form's own status line. It is polite-live so a screen reader announces
   the outcome without stealing focus mid-typing. */
.form-status { border-radius: 10px; padding: 14px 16px; font-size: 15.5px; font-weight: 600; }
.form-status[hidden] { display: none; }
.form-status.ok   { background: #ECF7EF; color: #1B5E33; border: 1px solid #C6E4CF; }
.form-status.bad  { background: #FDF0F3; color: #A3183A; border: 1px solid #F3CDD6; }

/* --------------------------------------------------------------- misc --- */
.tel-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.tel-list a {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px;
  background: var(--card); color: var(--ink); font-weight: 700; font-size: 17px;
}
.tel-list a:hover { border-color: var(--primary); background: var(--primary-soft); text-decoration: none; }
.tel-list svg { width: 20px; height: 20px; color: var(--primary); flex: 0 0 20px; }

/* A quiet editorial note, for the few places the brief requires a disclosure
   (illustrative artwork, figures awaiting confirmation). Not an error state. */
.note-box {
  border-inline-start: 3px solid var(--primary);
  background: var(--tint); border-radius: 0 10px 10px 0;
  padding: 14px 18px; color: var(--ink-soft); font-size: 15.5px; margin: 24px 0 0;
}
html[dir="ltr"] .note-box { border-radius: 10px 0 0 10px; }

/* A blank the company must fill before launch — a retention period, an
   approved mailbox. It is framed rather than left as bare brackets so nobody
   can publish the page without noticing it, and so the reviewer can find every
   one of them by searching for this class. */
.todo {
  border: 1px dashed var(--primary);
  background: var(--primary-soft);
  border-radius: 6px; padding: 1px 8px;
  font-size: .94em; color: var(--primary-dark); font-weight: 700;
}

/* ------------------------------------------------------------- footer --- */
footer.site {
  background: var(--primary-dark); color: rgba(255,255,255,.72);
  padding: 56px 0 28px; font-size: 15.5px;
}
footer.site .cols { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap: 36px; }
@media (max-width: 900px) { footer.site .cols { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 30px; } }
@media (max-width: 560px) { footer.site .cols { grid-template-columns: minmax(0,1fr); } }
/* The same wordmark, one colour change. This is what setting it in type buys —
   a second, white artwork file would otherwise have to be made and kept in step
   with the first every time the mark is touched. */
footer.site .brand { color: #fff; margin-bottom: 14px; }
footer.site .brand b { font-size: 21px; }
footer.site .brand small { font-size: 10px; color: rgba(255,255,255,.62); margin-inline-start: -.2em; }
footer.site p { margin: 0; max-width: 34em; line-height: 1.8; }
footer.site h4 { color: #fff; font-size: 16px; font-weight: 700; margin: 0 0 12px; }
footer.site ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
footer.site a { color: rgba(255,255,255,.80); }
footer.site a:hover { color: #fff; }
footer.site .legal {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 14.5px; color: rgba(255,255,255,.60);
}

/* =========================== small screens ============================== */
/* Last line of defence: a decorative circle or a wide element that escapes
   anyway must not turn the page into a sideways scroll. */
html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 940px) { .hero .wrap { grid-template-columns: minmax(0,1fr); gap: 40px; } }
@media (max-width: 700px) {
  .wrap { padding: 0 18px; }
  section { padding: 56px 0; }
  .hero { padding: 54px 0 60px; }
  .hero.plain { padding: 44px 0 48px; }
  .band { padding: 38px 22px; }
  .card { padding: 24px 20px; }
  .nav .wrap { gap: 10px; padding: 0 18px; }
  /* The Latin line is half the wordmark, so it shrinks on a phone rather than
     disappearing — hiding it would leave a different mark on small screens. */
  .nav .brand b { font-size: 19px; }
  .nav .brand small { font-size: 9px; letter-spacing: .16em; }
}

/* A visitor who has asked their system for less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .card.link:hover { transform: none; }
}