/* ==========================================================================
   Maydan Group shared design system, v3 (14/11/2026)
   Tokens and components shared by every Maydan company site; the
   "company theme" block is the only part that changes per site.
   KBC theme: the two typefaces of the KBC logo carry the identity.
     display (Latin)  : heavy condensed capitals, as in KAWAR BUILDING & CONTRACTING
     display (Arabic) : classical Naskh, as in the Arabic line of the logo
     rule-title       : the logo's thin rule with centred text, used as section title
   Logical properties are used so the Arabic page mirrors.
   ========================================================================== */

:root {
  --ink: #16171A;
  --text: #3B3D42;
  --muted: #6B6E75;
  --line: #DCD8D2;
  --bone: #F5F3EF;
  --paper: #FFFFFF;
  --font: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1160px;
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(64px, 9vw, 120px);
}

/* company theme: KBC */
:root {
  --brand: #7B2334;
  --brand-deep: #4F1521;
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --text-ar: "Almarai", "Barlow", Arial, sans-serif;
  --display-ar: "Scheherazade New", "Traditional Arabic", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font-family: var(--font); font-size: 18px; line-height: 1.6; color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; color: var(--ink); }
.display { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.98; }
.ar { font-family: var(--display-ar); font-weight: 700; line-height: 1.25; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.tinted { background: var(--bone); }
.small { font-size: 0.92rem; color: var(--muted); }
.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus { inset-inline-start: 16px; top: 16px; background: var(--paper); padding: 8px 12px; z-index: 100; }

/* ---------- the logo's rule, used as the section title ---------- */
.rule-title { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); margin-bottom: clamp(36px, 5vw, 64px); font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1; color: var(--brand); text-align: center; }
.rule-title::before, .rule-title::after { content: ""; flex: 1; height: 1px; background: var(--brand); transform-origin: center; }
.on-dark .rule-title, .rule-title.on-dark { color: #fff; }
.on-dark .rule-title::before, .on-dark .rule-title::after { background: rgba(255,255,255,.6); }

/* ---------- buttons and links ---------- */
.btn { display: inline-block; padding: 14px 28px; font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; background: var(--brand); color: #fff; border: 0; border-radius: 0; cursor: pointer; transition: background .2s; }
.btn:hover { background: var(--brand-deep); }
.btn.light { background: #fff; color: var(--brand-deep); }
.btn.light:hover { background: var(--bone); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.brand img { height: 46px; width: auto; }
.brand-endorse { font-size: 0.8rem; color: var(--muted); border-inline-start: 1px solid var(--line); padding-inline-start: 16px; line-height: 1.3; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); }
.nav a:hover { color: var(--brand); }
.nav .lang { font-family: var(--display-ar); font-size: 1.3rem; letter-spacing: 0; color: var(--brand); border-inline-start: 1px solid var(--line); padding-inline-start: 24px; }
.nav-toggle, .nav-button { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(86vh, 820px); display: flex; align-items: flex-end; color: #fff; background: #1b1c1f center / cover no-repeat; overflow: hidden; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,16,18,.25) 0%, rgba(15,16,18,.15) 35%, rgba(15,16,18,.82) 100%); }
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-block: clamp(40px, 7vw, 88px); }
.hero-endorse { font-size: 0.95rem; letter-spacing: 0.02em; color: rgba(255,255,255,.85); margin-bottom: 14px; padding-top: 16px; border-top: 3px solid #fff; display: inline-block; }
.hero h1 { color: #fff; font-size: clamp(3rem, 8.2vw, 7rem); max-width: 11em; }
.hero p { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: rgba(255,255,255,.9); margin: 22px 0 30px; max-width: 34em; }
.hero-credit { position: absolute; z-index: 2; inset-inline-end: var(--gutter); bottom: 14px; font-size: 0.78rem; color: rgba(255,255,255,.65); }

/* ---------- services strip under the hero ---------- */
.scope-strip { background: var(--ink); color: #fff; }
.scope-strip ul { list-style: none; margin: 0 auto; padding-block: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: 0.05em; text-transform: uppercase; }

/* ---------- classification: bilingual text with the membership marks between ---------- */
.credentials { background: var(--bone); border-block: 1px solid var(--line); }
.credentials .wrap { padding-block: clamp(30px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 72px); }
.cred-text p { margin: 0; }
.cred-text[lang="ar"] { font-family: var(--text-ar); }
.cred-label { font-size: 0.85rem; color: var(--muted); margin-bottom: 10px !important; }
.cred-line { font-size: 0.95rem; color: var(--text); line-height: 1.4; }
.cred-line + .cred-line { margin-top: 8px !important; }
.cred-line strong { display: block; color: var(--ink); font-weight: 600; font-size: 1.1rem; line-height: 1.3; }
.cred-marks { text-align: center; padding-inline: clamp(24px, 4vw, 56px); border-inline: 1px solid var(--line); }
.cred-marks .marks { display: flex; align-items: center; justify-content: center; gap: 26px; }
.cred-marks img { height: 76px; width: auto; }
.cred-marks img.wide { height: 30px; }
.cred-marks p { margin: 12px 0 0; font-size: 0.85rem; color: var(--muted); }

/* ---------- photo band ---------- */
.band { position: relative; margin: 0; height: min(62vh, 620px); overflow: hidden; background: #1b1c1f; }
.band img { width: 100%; height: 100%; object-fit: cover; }
.band figcaption { position: absolute; inset-inline-start: 0; bottom: 0; background: var(--brand); color: #fff; font-size: 0.88rem; padding: 10px var(--gutter); }

/* ---------- experience (expandable rows) ---------- */
.sectors { border-bottom: 1px solid var(--line); }
.sector { border-top: 1px solid var(--line); }
.sector button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) 40px; gap: clamp(16px, 4vw, 56px); align-items: center; width: 100%; padding: 22px 0; }
.sector button:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.sector .name { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1; color: var(--ink); transition: color .2s; }
.sector button:hover .name, .sector.open .name { color: var(--brand); }
.sector .line { font-size: 1.08rem; color: var(--text); }
.sector .plus { position: relative; width: 22px; height: 22px; justify-self: end; }
.sector .plus::before, .sector .plus::after { content: ""; position: absolute; inset-inline-start: 0; top: 10px; width: 22px; height: 2px; background: var(--brand); transition: transform .3s; }
.sector .plus::after { transform: rotate(90deg); }
.sector.open .plus::after { transform: rotate(0deg); }
.sector .more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.sector.open .more { grid-template-rows: 1fr; }
.sector .more > div { overflow: hidden; }
.sector dl { margin: 0; padding: 4px 0 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 4vw, 56px); }
.sector dt { font-size: 0.85rem; color: var(--muted); margin-bottom: 2px; }
.sector dd { margin: 0; font-size: 1rem; color: var(--ink); }

/* ---------- clients and partnerships (logo section) ---------- */
.logos { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 36px 30px; max-width: 1064px; }
.logos li { width: 152px; height: 80px; display: flex; align-items: center; justify-content: center; }
.logos img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

/* ---------- case study ---------- */
.case .wrap > .grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.gallery { margin: 0; }
.stage { position: relative; aspect-ratio: 3 / 2; background: #1b1c1f; overflow: hidden; }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.stage img.on { opacity: 1; }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.thumbs button { all: unset; cursor: pointer; aspect-ratio: 3 / 2; overflow: hidden; opacity: .55; transition: opacity .2s; outline-offset: 2px; }
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button:hover, .thumbs button.on { opacity: 1; }
.thumbs button.on { outline: 2px solid var(--brand); }
.thumbs button:focus-visible { outline: 2px solid var(--ink); opacity: 1; }
.gallery figcaption { font-size: 0.85rem; color: var(--muted); padding-top: 10px; }
.case .label { font-size: 0.95rem; color: var(--brand); font-weight: 600; margin-bottom: 8px; }
.case h3 { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom: 18px; }
.sheet { margin: 24px 0 0; }
.sheet div { display: grid; grid-template-columns: 6.5em 1fr; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.sheet div:last-child { border-bottom: 1px solid var(--line); }
.sheet dt { color: var(--muted); font-size: 0.95rem; }
.sheet dd { margin: 0; color: var(--ink); }

/* ---------- management ---------- */
.manage { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); }
.manage div { border-top: 3px solid var(--ink); padding-top: 16px; }
.manage h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 8px; }
.manage p { margin: 0; font-size: 1rem; }
.iso { margin-top: clamp(32px, 4vw, 48px); text-align: center; }

/* ---------- partnership band ---------- */
.partner { position: relative; color: #fff; background: var(--brand-deep) center / cover no-repeat; }
.partner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(79,21,33,.94) 0%, rgba(79,21,33,.82) 55%, rgba(79,21,33,.55) 100%); }
.partner .wrap { position: relative; padding-block: clamp(64px, 9vw, 120px); }
.partner h2 { color: #fff; font-size: clamp(2.4rem, 5.4vw, 4.4rem); max-width: 12em; }
.partner p { font-size: 1.15rem; max-width: 34em; margin: 20px 0 30px; color: rgba(255,255,255,.9); }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
address { font-style: normal; line-height: 1.75; color: var(--ink); }
address .ar { font-size: 1.7rem; color: var(--brand); display: block; margin-bottom: 4px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.92rem; color: var(--muted); }
.form .full { grid-column: 1 / -1; }
.form input, .form select, .form textarea { font: inherit; font-size: 1rem; color: var(--ink); padding: 12px 13px; border: 1px solid #B9B4AC; background: var(--paper); border-radius: 0; width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
.form .btn { justify-self: start; }
.form-note { font-size: 0.92rem; grid-column: 1 / -1; margin: 0; min-height: 1.4em; color: var(--muted); }
.form-note[data-state="error"] { color: #A0261B; }
.form-note[data-state="sent"] { color: #1F6B3A; font-weight: 600; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.66); font-size: 0.95rem; padding-block: 56px 32px; }
.site-footer .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px; align-items: start; }
.site-footer .lockup { height: 64px; width: auto; }
.site-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .endorse { color: #fff; }
.legal { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.16); padding-top: 20px; font-size: 0.85rem; }

/* ---------- motion (only when scripts run; off for reduced motion) ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .1s; } .js .reveal.d2 { transition-delay: .2s; } .js .reveal.d3 { transition-delay: .3s; }
.js .rule-title::before, .js .rule-title::after { transform: scaleX(0); transition: transform 1.1s ease .15s; }
.js .rule-title::before { transform-origin: right center; } .js .rule-title::after { transform-origin: left center; }
.js .rule-title.in::before, .js .rule-title.in::after { transform: scaleX(1); }
.js .band img { transform: scale(1.08); transition: transform 2.4s ease; }
.js .band.in img { transform: scale(1); }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes rise-solid { from { transform: translateY(26px); } to { transform: none; } }
.js .hero .wrap > * { animation: rise .9s ease both; }
/* the headline never starts invisible: it is the main content and must paint at once */
.js .hero .wrap > h1 { animation-name: rise-solid; }
.js .hero .wrap > *:nth-child(2) { animation-delay: .12s; } .js .hero .wrap > *:nth-child(3) { animation-delay: .24s; } .js .hero .wrap > *:nth-child(4) { animation-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .band img, .js .rule-title::before, .js .rule-title::after { opacity: 1; transform: none; transition: none; }
  .js .hero .wrap > * { animation: none; }
  .sector .more, .stage img { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .contact-grid, .case .wrap > .grid { grid-template-columns: minmax(0, 1fr); }
  .credentials .wrap { grid-template-columns: minmax(0, 1fr); }
  .cred-marks { order: 3; padding: 20px 0 0; border-inline: 0; border-top: 1px solid var(--line); }
  .scope-strip ul { justify-content: flex-start; font-size: 1rem; }
  .manage { grid-template-columns: 1fr 1fr; }
  .nav-button { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; cursor: pointer; padding: 10px; }
  .nav-button span { display: block; height: 2px; background: var(--ink); }
  .nav { display: none; position: absolute; top: 80px; inset-inline: 0; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 4px var(--gutter) 16px; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav .lang { border-inline-start: 0; padding-inline-start: 0; border-bottom: 0; }
  .nav-toggle:checked ~ .nav { display: flex; }
}
@media (max-width: 700px) {
  body { font-size: 17px; }
  .brand-endorse { display: none; }
  .brand img { height: 40px; }
  .hero { min-height: 78vh; }
  .hero-credit { position: static; padding: 0 var(--gutter) 12px; position: relative; text-align: start; inset: auto; }
  .hero { flex-direction: column; justify-content: flex-end; align-items: stretch; }
  .sector button { grid-template-columns: 1fr 28px; gap: 4px 12px; }
  .sector .line { grid-column: 1; grid-row: 2; }
  .sector .plus { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .sector dl { grid-template-columns: 1fr; gap: 14px; }
  .manage { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .site-footer .wrap { grid-template-columns: 1fr; }
  .band { height: 46vh; }
  .logos li { width: 42%; height: 68px; }
  .scope-strip ul { gap: 4px 18px; padding-block: 14px; }
}

/* ---------- Arabic page (html lang="ar" dir="rtl") ----------
   Headings take the logo's Naskh; body takes a plain Arabic text face. */
html[lang="ar"] body { font-family: var(--text-ar); line-height: 1.85; }
html[lang="ar"] .display,
html[lang="ar"] .rule-title,
html[lang="ar"] .nav a,
html[lang="ar"] .btn,
html[lang="ar"] .scope-strip ul,
html[lang="ar"] .sector .name { font-family: var(--display-ar); font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1.4; }
html[lang="ar"] .nav a { font-size: 1.4rem; }
html[lang="ar"] .nav .lang { font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; color: var(--brand); }
html[lang="ar"] .hero h1 { font-size: clamp(2.8rem, 7.2vw, 6.2rem); line-height: 1.3; max-width: 12em; }
html[lang="ar"] .rule-title { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.2; }
html[lang="ar"] .btn { font-size: 1.4rem; padding: 8px 30px 10px; }
html[lang="ar"] .scope-strip ul { font-size: 1.22rem; padding-block: 12px; }
html[lang="ar"] .sector .name { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.3; }
html[lang="ar"] .case h3 { font-size: clamp(2.2rem, 4vw, 3.3rem); }
html[lang="ar"] .manage h3 { font-size: clamp(1.7rem, 2.5vw, 2.1rem); }
html[lang="ar"] .partner h2 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); }
html[lang="ar"] .partner::before { background: linear-gradient(270deg, rgba(79,21,33,.94) 0%, rgba(79,21,33,.82) 55%, rgba(79,21,33,.55) 100%); }
html[lang="ar"] .cred-text { font-family: var(--text-ar); }
html[lang="ar"] .cred-text[lang="en"] { font-family: var(--font); }
html[lang="ar"] address .ar { line-height: 1.5; }

/* ---------- fine tuning, 15/11/2026 (Kayan chose fonts E2 + A4) ----------
   English: Barlow Condensed for the headline and section titles, Barlow for text.
   Arabic: Scheherazade New for headings, Almarai for text, menu and buttons.
   Capitals are kept for the headline and section titles only.
   Scroll fade-ins are off; the opening headline and the gallery still move. */
.display, .rule-title { font-weight: 700; letter-spacing: 0.02em; }
.hero h1 { line-height: 1; }

.nav a { font-family: var(--font); font-weight: 600; font-size: 1rem; letter-spacing: 0; text-transform: none; }
.btn { font-family: var(--font); font-weight: 600; font-size: 1rem; letter-spacing: 0; text-transform: none; padding: 13px 26px; }
.scope-strip ul { font-family: var(--font); font-weight: 600; font-size: 0.98rem; letter-spacing: 0; text-transform: none; }
.sector .name { font-weight: 600; text-transform: none; letter-spacing: 0; font-size: clamp(1.5rem, 2.7vw, 2.15rem); line-height: 1.1; }
.manage h3.display { font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.1; font-size: clamp(1.4rem, 2.1vw, 1.75rem); }
.case h3.display { line-height: 1.02; }

html[lang="ar"] .nav a, html[lang="ar"] .btn, html[lang="ar"] .scope-strip ul { font-family: var(--text-ar); font-weight: 700; letter-spacing: 0; line-height: 1.5; }
html[lang="ar"] .nav a { font-size: 1rem; }
html[lang="ar"] .btn { font-size: 1rem; padding: 12px 28px; }
html[lang="ar"] .scope-strip ul { font-size: 1rem; padding-block: 16px; }
html[lang="ar"] .nav .lang { font-family: var(--font); font-weight: 600; font-size: 1rem; letter-spacing: 0; text-transform: none; }
html[lang="ar"] .sector .name { font-family: var(--display-ar); font-weight: 700; font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.3; }
html[lang="ar"] .manage h3.display { font-family: var(--display-ar); font-weight: 700; font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.4; }
html[lang="ar"] .display, html[lang="ar"] .rule-title { font-weight: 700; letter-spacing: 0; }

.js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
.js .rule-title::before, .js .rule-title::after { transform: none; transition: none; }
.js .band img, .js .band.in img { transform: none; transition: none; }

/* ---------- tightening pass, 15/11/2026 (before launch; no new elements) ----------
   Less empty space between sections, smaller oversized headings, shorter hero and
   photo band, so the page reads as one compact company page. */
:root { --section: clamp(48px, 6vw, 84px); }
.rule-title { margin-bottom: clamp(26px, 3.4vw, 44px); }
.site-header .wrap { height: 72px; }
.brand img { height: 42px; }
.hero { min-height: min(76vh, 700px); }
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); max-width: 12em; }
.hero p { margin: 18px 0 26px; }
.scope-strip ul { padding-block: 15px; }
.band { height: min(46vh, 460px); }
.case h3 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-bottom: 14px; }
.iso { margin-top: clamp(24px, 3vw, 36px); }
.partner .wrap { padding-block: clamp(48px, 6.5vw, 88px); }
.partner h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.logos { gap: 26px 28px; }
.logos li { width: 144px; height: 72px; }
.credentials .wrap { padding-block: clamp(24px, 3vw, 36px); }
.site-footer { padding-block: 44px 28px; }

html[lang="ar"] .hero h1 { font-size: clamp(2.4rem, 5.8vw, 4.9rem); line-height: 1.3; max-width: 13em; }
html[lang="ar"] .case h3 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
html[lang="ar"] .partner h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }

@media (max-width: 980px) {
  .nav { top: 72px; }
}
@media (max-width: 700px) {
  .brand img { height: 38px; }
  .hero { min-height: 70vh; }
  .band { height: 38vh; }
  .logos li { width: 42%; height: 64px; }
  .scope-strip ul { padding-block: 12px; }
}

/* ---------- office map in the contact section, 15/11/2026 ----------
   Replaces the address block (the address stays in the footer).
   pointer-events: none keeps the map from opening Google Maps on click or tap. */
.contact-grid { align-items: stretch; }
.office-map { position: relative; min-height: 340px; background: #e9e6e1; border: 1px solid var(--line); overflow: hidden; }
.office-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
@media (max-width: 980px) {
  .office-map { min-height: 0; height: 280px; order: 2; }
}

/* ---------- experience rows, 15/11/2026 ----------
   The row now shows the named clients (dark, semi-bold) in place of a description;
   the description sits inside with the scope. Iraq is its own row with a quiet
   "Client confidential" tag. The first row is open when the page loads. */
.sector .line { color: var(--ink); font-weight: 600; font-size: 1.02rem; line-height: 1.5; }
.sector .tag { display: table; margin-top: 6px; padding: 2px 9px; border: 1px solid var(--line); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.sector dl { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 14px clamp(16px, 4vw, 56px); padding: 0 calc(40px + clamp(16px, 4vw, 56px)) 26px 0; padding-inline: 0 calc(40px + clamp(16px, 4vw, 56px)); }
.sector dl > div:first-child:nth-last-child(3) { grid-row: span 2; }
.sector dl > div:nth-child(3) { grid-column: 2; }
.sector dd { line-height: 1.6; }
html[lang="ar"] .sector .line { font-weight: 700; font-size: 1rem; line-height: 1.7; }
html[lang="ar"] .sector .tag { letter-spacing: 0; text-transform: none; font-size: 0.8rem; font-weight: 400; }
@media (max-width: 700px) {
  .sector dl { grid-template-columns: 1fr; gap: 14px; padding-inline: 0; }
  .sector dl > div:first-child:nth-last-child(3) { grid-row: auto; }
  .sector dl > div:nth-child(3) { grid-column: auto; }
}

/* ---------- header colour on scroll, 15/11/2026 ----------
   White at the top of the page. Once the page is scrolled (js/site.js adds
   .scrolled), the bar turns maroon and the logo, menu and language link turn white. */
.site-header { transition: background-color .25s ease, border-color .25s ease; }
.site-header .nav a, .site-header .brand-endorse { transition: color .25s ease; }
.site-header .brand img { transition: filter .25s ease; }
.site-header.scrolled { background: var(--brand); border-bottom-color: var(--brand); }
.site-header.scrolled .brand img { filter: brightness(0) invert(1); }
.site-header.scrolled .brand-endorse { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.35); }
.site-header.scrolled .nav a { color: #fff; }
.site-header.scrolled .nav a:hover { color: rgba(255,255,255,.75); }
.site-header.scrolled .nav .lang { color: #fff; border-color: rgba(255,255,255,.35); }
.site-header.scrolled .nav-button span { background: #fff; }
.site-header.scrolled a:focus-visible, .site-header.scrolled .nav-button:focus-visible { outline-color: #fff; }
@media (max-width: 980px) {
  .site-header.scrolled .nav { background: var(--brand); border-bottom-color: var(--brand); }
  .site-header.scrolled .nav a { border-bottom-color: rgba(255,255,255,.2); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header .nav a, .site-header .brand-endorse, .site-header .brand img { transition: none; }
}

/* ---------- project slider (Experience), 15/11/2026 ----------
   Nine project cards, three across on desktop, two on tablet, one on a phone.
   The track scrolls sideways with snap; js/site.js adds the arrows, the slow
   automatic advance and the "Learn more" hand-off to the contact form.
   Replaces the sector rows (their .sector rules above are no longer used). */
.slider-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.slider-head p { margin: 0; font-size: 1rem; color: var(--text); max-width: 34em; }
.slider-nav { display: flex; gap: 8px; flex: none; }
.slider-nav button { all: unset; box-sizing: border-box; width: 46px; height: 46px; border: 1px solid var(--ink); cursor: pointer; display: grid; place-items: center; color: var(--ink); transition: background-color .2s, color .2s, border-color .2s; }
.slider-nav button:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.slider-nav button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.slider-nav i { display: block; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.slider-nav .next i { transform: rotate(45deg); margin-right: 4px; }
.slider-nav .prev i { transform: rotate(-135deg); margin-left: 4px; }
html[dir="rtl"] .slider-nav .next i { transform: rotate(-135deg); margin: 0 0 0 4px; }
html[dir="rtl"] .slider-nav .prev i { transform: rotate(45deg); margin: 0 4px 0 0; }
.track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; }
.track::-webkit-scrollbar { display: none; }
.pcard { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--paper); }
.pcard figure { position: relative; margin: 0; aspect-ratio: 4 / 3; background: #1b1c1f; overflow: hidden; }
.pcard img { width: 100%; height: 100%; object-fit: cover; }
.pcard figcaption { position: absolute; inset-inline-start: 0; bottom: 0; padding: 4px 10px; font-size: 0.7rem; line-height: 1.4; color: rgba(255,255,255,.92); background: rgba(22,23,26,.62); }
.pbody { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.pbody .where { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); }
.pbody h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 2vw, 1.7rem); line-height: 1.1; margin: 8px 0 10px; }
.pbody p { font-size: 0.98rem; line-height: 1.55; margin: 0 0 18px; }
.pbody .client { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--ink); line-height: 1.45; }
.pbody .client > span:first-child { color: var(--muted); margin-inline-end: 12px; }
.conf { display: inline-block; padding: 1px 8px; border: 1px solid var(--line); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.more-link { align-self: flex-start; margin-top: 18px; padding: 10px 20px; border: 1px solid var(--brand); color: var(--brand); font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: background-color .2s, color .2s; }
.more-link:hover { background: var(--brand); color: #fff; }
.more-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.progress { height: 2px; background: var(--line); margin-top: 26px; position: relative; }
.progress i { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 33%; background: var(--brand); transition: inset-inline-start .3s ease, width .3s ease; }

html[lang="ar"] .pbody .where { letter-spacing: 0; text-transform: none; font-size: 0.86rem; font-weight: 700; }
html[lang="ar"] .pbody h3 { font-family: var(--display-ar); font-weight: 700; font-size: clamp(1.6rem, 2.3vw, 1.95rem); line-height: 1.35; margin: 4px 0 8px; }
html[lang="ar"] .pbody p { line-height: 1.8; }
html[lang="ar"] .conf { letter-spacing: 0; text-transform: none; font-size: 0.8rem; font-weight: 400; }
html[lang="ar"] .pcard figcaption { font-size: 0.76rem; }
html[lang="ar"] .more-link { font-weight: 700; }

@media (max-width: 980px) { .pcard { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 700px) {
  .pcard { flex-basis: 86%; }
  .track { gap: 16px; }
  .slider-head p { display: none; }
  .slider-head { justify-content: flex-end; margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .track { scroll-behavior: auto; } .progress i { transition: none; } }

/* ---------- section order, 15/11/2026 ----------
   Client logos now sit directly under the hero, followed by the project slider.
   Both are white sections, so the space between them is closed up to one gap. */
#clients { padding-bottom: 0; }

/* ---------- scroll effects, 15/11/2026 ----------
   Three only: (1) the photo band and the partnership band move slower than the page,
   (2) the rules beside each section title draw outward once, (3) the hero footage
   drifts slower than the headline. js/site.js drives 1 and 3; all are off when the
   visitor's device asks for reduced motion. Blanket fade-ins stay off on purpose. */
.band.has-px img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; will-change: transform; }
.partner { overflow: hidden; }
.partner.has-px { background-image: none !important; }
.partner-bg { position: absolute; inset: -15% 0; background: center / cover no-repeat; will-change: transform; }
.partner::before { z-index: 1; }
.partner .wrap { z-index: 2; }
.hero video { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .js .rule-title::before, .js .rule-title::after { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2,.6,.2,1) .1s; }
  .js .rule-title::before { transform-origin: right center; }
  .js .rule-title::after { transform-origin: left center; }
  html[dir="rtl"].js .rule-title::before { transform-origin: left center; }
  html[dir="rtl"].js .rule-title::after { transform-origin: right center; }
  .js .rule-title.in::before, .js .rule-title.in::after { transform: scaleX(1); }
}

/* ---------- pre-launch fixes, 15/11/2026 ----------
   One line under the contact form saying how the details are used. */
.form-privacy { grid-column: 1 / -1; margin: 0; font-size: 0.85rem; color: var(--muted); }