/* ============================================================
   MOTHALLATH — V5 "RESIDENCE"
   Recreated in the format of M'Braun Residence:
   near-black editorial luxury, full-bleed imagery,
   sequential storytelling, oversized display type.
   Display: Clash Display · Body: Switzer · AR: Tajawal
   ============================================================ */

:root {
  --black: #0A0A0B;
  --black-2: #111113;
  --bone: #F5F4F2;
  --bone-dim: #B8B6B1;
  --grey: #7E7C78;
  --taupe: #B7A695;
  --taupe-deep: #9C8A76;
  --line: rgba(245, 244, 242, .14);
  --line-soft: rgba(245, 244, 242, .08);

  --disp: 'Clash Display', 'Switzer', sans-serif;
  --body: 'Switzer', 'Helvetica Neue', Arial, sans-serif;

  --pad: clamp(1.4rem, 5vw, 5rem);
  --gap: clamp(6rem, 14vw, 13rem);
  --max: 1500px;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

html[lang="ar"] {
  --disp: 'Tajawal', sans-serif;
  --body: 'Tajawal', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body);
  font-weight: 400;
  background: var(--black);
  color: var(--bone);
  line-height: 1.6;
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button, input, textarea { font: inherit; color: inherit; background: none; border: 0; }
::selection { background: var(--bone); color: var(--black); }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

/* display headline base */
.d {
  font-family: var(--disp);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -0.02em;
}
html[lang="ar"] .d { font-weight: 700; line-height: 1.18; letter-spacing: 0; }

.eyebrow {
  font-size: .74rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--taupe);
}
html[lang="ar"] .eyebrow { letter-spacing: .08em; }

/* editorial lowercase caption */
.cap {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.1; letter-spacing: -0.01em;
  text-transform: lowercase; color: var(--bone-dim);
}
html[lang="ar"] .cap { text-transform: none; font-weight: 500; }
.cap b { color: var(--bone); font-weight: 500; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1.1rem, 2vw, 1.7rem) var(--pad);
  mix-blend-mode: difference;
}
.nav__logo img { height: 26px; width: auto; }
.nav__links { display: flex; align-items: center; gap: clamp(1.4rem, 2.6vw, 2.8rem); }
.nav__links a {
  font-size: .82rem; font-weight: 500; letter-spacing: .02em; color: var(--bone);
  position: relative; opacity: .85; transition: opacity .3s;
}
.nav__links a:hover { opacity: 1; }
.nav__links a.is-lang { opacity: 1; font-weight: 600; }
.nav__burger { display: none; }
@media (max-width: 820px) {
  .nav { mix-blend-mode: normal; background: linear-gradient(var(--black), transparent); }
  .nav__links a:not(.is-lang) { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: clip;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg video, .hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.1) 35%, rgba(10,10,11,.8) 100%);
}
.hero__in {
  position: relative; z-index: 1;
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
.hero__top {
  position: absolute; z-index: 1; top: 32vh; inset-inline: var(--pad);
  display: flex; justify-content: center;
}
.hero__top p {
  max-width: 42ch; text-align: center; color: var(--bone-dim);
  font-size: clamp(.95rem, 1.4vw, 1.15rem); line-height: 1.55;
}
.hero__top p b { color: var(--bone); font-weight: 500; }
.hero__title {
  font-size: clamp(2.4rem, 13vw, 13rem);
  letter-spacing: -0.04em; line-height: .86;
  text-transform: uppercase;
  white-space: nowrap;
}
html[lang="ar"] .hero__title { text-transform: none; letter-spacing: -0.01em; line-height: 1; font-size: clamp(3rem, 16vw, 16rem); }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between; align-items: flex-end;
  margin-top: clamp(1.4rem, 2.5vw, 2.2rem);
  padding-top: 1.3rem; border-top: 1px solid var(--line);
}
.hero__meta span { font-size: .8rem; letter-spacing: .04em; color: var(--bone-dim); }
.hero__meta span b { color: var(--bone); font-weight: 600; }
.hero__scroll {
  font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--bone-dim);
}

/* ============================================================
   STATEMENT (big centered)
   ============================================================ */
.statement { padding-block: var(--gap); }
.statement h2 {
  font-size: clamp(1.9rem, 5vw, 4.6rem);
  max-width: 20ch; margin-inline: auto; text-align: center;
}
.statement h2 .mute { color: var(--grey); }
.statement__mark { display: block; width: clamp(40px, 5vw, 64px); margin: 0 auto clamp(2rem,4vw,3rem); opacity: .9; }

/* ============================================================
   CHAPTER (label → headline → narrative + image)
   ============================================================ */
.chapter { padding-block: var(--gap) 0; }
.chapter__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem) clamp(2rem, 6vw, 7rem); align-items: end;
}
.chapter__head .eyebrow { display: block; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.chapter__title { font-size: clamp(3rem, 9vw, 8.5rem); text-transform: uppercase; }
html[lang="ar"] .chapter__title { text-transform: none; }
.chapter__title .stroke {
  -webkit-text-stroke: 1px var(--bone); color: transparent;
}
.chapter__body { max-width: 46ch; padding-bottom: .5rem; }
.chapter__body p { color: var(--bone-dim); font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.7; }
.chapter__figure { margin-top: clamp(3rem, 7vw, 6rem); position: relative; overflow: clip; }
.chapter__figure img { width: 100%; aspect-ratio: 16 / 8.5; object-fit: cover; transform: scale(1.02); }
.chapter__figcap {
  position: absolute; bottom: clamp(1.2rem, 2.5vw, 2rem); inset-inline-start: clamp(1.2rem, 2.5vw, 2rem);
}
@media (max-width: 820px) {
  .chapter__grid { grid-template-columns: 1fr; align-items: start; }
}

/* ============================================================
   SPECS + NUMBERED FEATURES
   ============================================================ */
.specs { padding-block: var(--gap); }
.specs__lead {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem) clamp(2rem,6vw,7rem);
  align-items: start; margin-bottom: clamp(3.5rem, 8vw, 6rem);
}
.specs__big {
  font-family: var(--disp); font-weight: 500; font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 1.12; letter-spacing: -0.015em;
}
html[lang="ar"] .specs__big { font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.specs__big .mute { color: var(--grey); }
.specs__note { color: var(--bone-dim); max-width: 44ch; align-self: end; }

.feats { border-top: 1px solid var(--line); }
.feat {
  display: grid; grid-template-columns: 80px 1fr; gap: 2rem;
  padding: clamp(1.6rem, 3vw, 2.6rem) 0; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.feat__n { font-family: var(--disp); font-weight: 500; font-size: 1rem; color: var(--taupe); }
.feat__t {
  font-family: var(--disp); font-weight: 400; font-size: clamp(1.4rem, 3.2vw, 2.4rem);
  line-height: 1.1; letter-spacing: -0.01em;
}
html[lang="ar"] .feat__t { font-weight: 500; letter-spacing: 0; line-height: 1.35; }
.feat__t b { font-weight: 500; }
.feat__t .mute { color: var(--grey); }
@media (max-width: 560px) { .feat { grid-template-columns: 54px 1fr; gap: 1.2rem; } }

/* ============================================================
   FULL-BLEED IMAGE BAND
   ============================================================ */
.band { position: relative; height: clamp(60vh, 80vw, 92vh); overflow: clip; }
.band img { width: 100%; height: 100%; object-fit: cover; }
.band__cap {
  position: absolute; bottom: clamp(1.4rem, 3vw, 2.6rem); inset-inline-start: var(--pad);
  inset-inline-end: var(--pad);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem;
}
.band__badge {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--bone);
}
html[lang="ar"] .band__badge { letter-spacing: .04em; }
.band__badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--taupe); animation: blink 1.8s infinite; }
@keyframes blink { 50% { opacity: .3; } }

/* ============================================================
   METHOD (architects analog)
   ============================================================ */
.method { padding-block: var(--gap); }
.method__head { max-width: var(--max); }
.method__title { font-size: clamp(3rem, 9vw, 8.5rem); text-transform: uppercase; margin-bottom: clamp(2.5rem,6vw,4.5rem); }
html[lang="ar"] .method__title { text-transform: none; }
.method__lead {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem,5vw,5rem);
}
.method__lead .eyebrow { padding-top: .5rem; }
.method__para {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2.3rem); line-height: 1.3; letter-spacing: -0.01em;
}
html[lang="ar"] .method__para { font-weight: 500; letter-spacing: 0; line-height: 1.5; }
.method__para b { color: var(--bone); font-weight: 500; }
.method__para .mute { color: var(--grey); }
@media (max-width: 820px) { .method__lead { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ============================================================
   AVAILABILITY
   ============================================================ */
.avail { padding-block: var(--gap); text-align: center; border-top: 1px solid var(--line-soft); }
.avail .eyebrow { display: block; margin-bottom: clamp(2rem,4vw,3rem); }
.avail h2 {
  font-family: var(--disp); font-weight: 500;
  font-size: clamp(2rem, 6vw, 5rem); line-height: 1.05; letter-spacing: -0.02em;
  max-width: 24ch; margin-inline: auto;
}
html[lang="ar"] .avail h2 { font-weight: 700; letter-spacing: 0; line-height: 1.25; }
.avail h2 .mute { color: var(--grey); }
.avail__sub { margin-top: clamp(1.6rem,3vw,2.4rem); color: var(--bone-dim); max-width: 50ch; margin-inline: auto; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { padding-block: var(--gap); border-top: 1px solid var(--line-soft); text-align: center; }
.contact__lead { font-size: clamp(1rem,1.3vw,1.15rem); color: var(--bone-dim); margin-bottom: 1.2rem; }
.contact__mail {
  display: inline-block; font-family: var(--disp); font-weight: 500;
  font-size: clamp(2rem, 7vw, 6rem); letter-spacing: -0.03em; line-height: 1;
  transition: color .35s var(--ease);
}
html[lang="ar"] .contact__mail { font-weight: 700; letter-spacing: 0; }
.contact__mail:hover { color: var(--taupe); }
.contact__addr {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: flex; flex-wrap: wrap; gap: .4rem 2.4rem; justify-content: center;
  font-size: .9rem; color: var(--grey);
}
.contact__addr a { transition: color .3s; }
.contact__addr a:hover { color: var(--bone); }

/* ============================================================
   FOOTER — giant wordmark
   ============================================================ */
.foot { border-top: 1px solid var(--line-soft); padding-top: clamp(3rem,6vw,5rem); overflow: clip; }
.foot__word {
  font-family: var(--disp); font-weight: 500;
  font-size: clamp(4rem, 23vw, 23rem); line-height: .8; text-align: center;
  letter-spacing: -0.04em; text-transform: uppercase;
  color: var(--bone); user-select: none;
  padding-inline: var(--pad);
}
html[lang="ar"] .foot__word { text-transform: none; letter-spacing: 0; }
.foot__bar {
  margin-top: clamp(2rem,4vw,3rem);
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between; align-items: center;
  padding: 1.8rem var(--pad); border-top: 1px solid var(--line-soft);
  font-size: .78rem; color: var(--grey);
}
.foot__bar a:hover { color: var(--bone); }
.foot__lic { display: flex; flex-wrap: wrap; gap: .4rem 1.8rem; }
.foot__lic b { color: var(--bone-dim); font-weight: 600; }

/* ============================================================
   REVEAL
   ============================================================ */
.rv { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv[data-d="1"]{transition-delay:.08s} .rv[data-d="2"]{transition-delay:.16s} .rv[data-d="3"]{transition-delay:.24s}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .chapter__figure img { transform: none; }
}

/* ============================================================
   V7 ADDITIONS — Resal content architecture in v5's dark style
   ============================================================ */

/* shared section intro */
.shead { margin-bottom: clamp(2.6rem, 6vw, 4.5rem); }
.shead .eyebrow { display:block; margin-bottom: 1.2rem; }
.shead h2 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.02em; max-width: 20ch; }
html[lang="en"] .shead h2 { text-transform: uppercase; }
html[lang="ar"] .shead h2 { font-weight: 700; letter-spacing: 0; line-height: 1.2; }
.shead h2 .stroke { -webkit-text-stroke: 1px var(--bone); color: transparent; }
.shead h2 .mute { color: var(--grey); }

/* ── VISION / MISSION ── */
.vm { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem,2.5vw,2rem); margin-top: clamp(3rem,6vw,5rem); }
.vm__card { border-top: 1px solid var(--line); padding-top: 1.6rem; }
.vm__label { font-size: .74rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--taupe); display:block; margin-bottom: 1.1rem; }
html[lang="ar"] .vm__label { letter-spacing: .06em; }
.vm__text { font-family: var(--disp); font-weight: 400; font-size: clamp(1.3rem, 2.2vw, 1.85rem); line-height: 1.32; letter-spacing: -0.01em; color: var(--bone); }
html[lang="ar"] .vm__text { font-weight: 500; letter-spacing: 0; line-height: 1.5; }
@media (max-width: 760px) { .vm { grid-template-columns: 1fr; } }

/* ── VALUES ── */
.values { background: var(--black-2); border-block: 1px solid var(--line-soft); }
.values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.value { background: var(--black); padding: clamp(2rem,3vw,2.8rem) clamp(1.6rem,2.2vw,2.1rem); position: relative; transition: background .4s var(--ease); }
.value:hover { background: var(--black-2); }
.value__n { font-family: var(--disp); font-weight: 500; font-size: 1rem; color: transparent; -webkit-text-stroke: .8px var(--taupe); display: block; margin-bottom: 2.4rem; }
.value__t { font-family: var(--disp); font-size: 1.32rem; font-weight: 500; margin-bottom: .7rem; }
html[lang="en"] .value__t { text-transform: uppercase; letter-spacing: .01em; }
html[lang="ar"] .value__t { font-weight: 700; }
.value__d { font-size: .95rem; color: var(--bone-dim); line-height: 1.65; }
.value::after { content:''; position:absolute; inset-inline-start:0; bottom:0; width:100%; height:2px; background:var(--taupe); transform:scaleX(0); transform-origin: inline-start; transition: transform .4s var(--ease); }
.value:hover::after { transform: scaleX(1); }
@media (max-width: 980px) { .values__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .values__grid { grid-template-columns: 1fr; } }

/* ── OUR WAY ── */
.ways__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.way { background: var(--black); padding: clamp(2.4rem,3.5vw,3.4rem) clamp(2rem,3vw,3rem); position: relative; transition: background .4s var(--ease); }
.way:hover { background: var(--black-2); }
.way__n { font-family: var(--disp); font-weight: 500; font-size: clamp(2rem,3vw,2.8rem); color: transparent; -webkit-text-stroke: 1px var(--taupe-deep); line-height: 1; margin-bottom: 1.4rem; }
.way__t { font-family: var(--disp); font-size: clamp(1.3rem,1.9vw,1.6rem); font-weight: 500; margin-bottom: .8rem; }
html[lang="ar"] .way__t { font-weight: 700; }
.way__d { color: var(--bone-dim); line-height: 1.7; max-width: 46ch; }
@media (max-width: 760px) { .ways__grid { grid-template-columns: 1fr; } }

/* ── SERVICES ── */
.services .srow { display: grid; grid-template-columns: 90px 1fr auto; gap: 0 2.5rem; align-items: baseline; padding: clamp(1.7rem,3vw,2.6rem) 0; border-top: 1px solid var(--line); transition: padding-inline-start .4s var(--ease); }
.services .srow:last-child { border-bottom: 1px solid var(--line); }
.services .srow:hover { padding-inline-start: 1rem; }
.srow__n { font-family: var(--disp); font-weight: 500; font-size: 1rem; color: var(--taupe-deep); }
.srow__t { font-family: var(--disp); font-size: clamp(1.4rem,2.6vw,2.2rem); font-weight: 500; line-height: 1.12; }
html[lang="en"] .srow__t { text-transform: uppercase; letter-spacing: .01em; }
html[lang="ar"] .srow__t { font-weight: 700; }
.srow__d { color: var(--bone-dim); max-width: 52ch; margin-top: .7rem; line-height: 1.65; font-size: .98rem; }
.srow__tag { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); white-space: nowrap; align-self: start; padding-top: .4rem; }
html[lang="ar"] .srow__tag { letter-spacing: 0; }
@media (max-width: 720px) { .services .srow { grid-template-columns: 54px 1fr; } .srow__tag { display: none; } }

/* ============================================================
   V7.1 — process timeline, partners, project teaser
   ============================================================ */

/* ── HOW WE WORK → process timeline (distinct from services) ── */
.proc { position: relative; margin-top: clamp(2.5rem,6vw,4rem); }
.proc__step {
  display: grid; grid-template-columns: 130px 1fr; gap: clamp(1.5rem,4vw,4rem);
  padding: clamp(2rem,3.5vw,3rem) 0; border-top: 1px solid var(--line);
  position: relative;
}
.proc__step:last-child { border-bottom: 1px solid var(--line); }
.proc__n {
  font-family: var(--disp); font-weight: 500; font-size: clamp(2.4rem,4vw,3.6rem);
  color: transparent; -webkit-text-stroke: 1px var(--taupe); line-height: 1;
  display: flex; align-items: baseline; gap: .6rem;
}
.proc__n small { font-size: .34em; -webkit-text-stroke: 0; color: var(--taupe-deep); letter-spacing: .2em; font-weight: 600; }
html[lang="ar"] .proc__n small { letter-spacing: 0; }
.proc__t { font-family: var(--disp); font-size: clamp(1.4rem,2.4vw,2.1rem); font-weight: 500; margin-bottom: .8rem; line-height: 1.1; }
html[lang="en"] .proc__t { text-transform: uppercase; letter-spacing: .01em; }
html[lang="ar"] .proc__t { font-weight: 700; }
.proc__d { color: var(--bone-dim); line-height: 1.7; max-width: 60ch; }
.proc__step:hover .proc__n { -webkit-text-stroke-color: var(--bone); }
@media (max-width: 620px) { .proc__step { grid-template-columns: 1fr; gap: .8rem; } }

/* ── PARTNERS logo strip ── */
.partners { background: var(--black-2); border-block: 1px solid var(--line-soft); }
.partners__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line-soft); margin-top: clamp(2.5rem,5vw,3.5rem);
}
.partner {
  background: var(--black); min-height: clamp(140px, 16vw, 190px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  padding: 2rem 1.5rem; text-align: center; transition: background .4s var(--ease);
}
.partner:hover { background: var(--black-2); }
.partner__logo { height: clamp(30px, 3.4vw, 44px); width: auto; max-width: 78%; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .82; transition: opacity .4s var(--ease); }
.partner:hover .partner__logo { opacity: 1; }
.partner__word { font-family: var(--disp); font-weight: 500; font-size: clamp(1.3rem,2vw,1.7rem); color: var(--bone); letter-spacing: .04em; opacity: .86; transition: opacity .4s; }
html[lang="en"] .partner__word { text-transform: uppercase; }
.partner:hover .partner__word { opacity: 1; }
.partner__role { font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe-deep); }
html[lang="ar"] .partner__role { letter-spacing: 0; }
@media (max-width: 820px) { .partners__grid { grid-template-columns: 1fr 1fr; } }

/* ── PROJECT teaser (unnamed, coming soon) ── */
.reveal-soon { display:inline-flex; align-items:center; gap:.7rem; font-size:.75rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--taupe); }
html[lang="ar"] .reveal-soon { letter-spacing:0; }
.reveal-soon::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--taupe); animation: blink 1.8s infinite; }

/* ── FOOTER dedup: smaller lockup instead of 2nd giant wordmark ── */
.foot--v7 .foot__word { display: none; }
.foot__lockup { display:flex; flex-direction:column; align-items:center; gap:1rem; padding: clamp(2.5rem,6vw,4.5rem) var(--pad) clamp(1.5rem,3vw,2.5rem); text-align:center; }
.foot__lockup img { height: 40px; width:auto; }
.foot__lockup span { font-size:.72rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--taupe); }
html[lang="ar"] .foot__lockup span { letter-spacing:.06em; }

/* ── simple CTA link/button ── */
.cta7 { display:inline-flex; align-items:center; gap:.7rem; padding:.95rem 2rem; border:1px solid var(--line); color:var(--bone); font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; transition:all .35s var(--ease); }
html[lang="ar"] .cta7 { letter-spacing:0; }
.cta7:hover { background:var(--taupe); border-color:var(--taupe); color:var(--black); }
.proc-sec, .partners { position: relative; }

/* ============================================================
   V8 — BRAND THEME  ("lose the black")
   Off-white + navy-teal + deep teal + warm tan, per the
   Mothallath investment-deck brand. Light-first with
   navy-teal dark sections for contrast.
   ============================================================ */
:root {
  --navy:#112A34; --navy-2:#17484F; --teal:#074147;
  --tan:#B7A695; --tan-deep:#9C8A76; --tan-lt:#CFC6BB;
  --paper:#F6F5F1; --paper-2:#FFFFFF; --ink:#112A34; --ink-dim:#4C5D62; --muted:#8A9699;
  --line:rgba(17,42,52,.13); --line-soft:rgba(17,42,52,.07);
}
body { background:var(--paper); color:var(--ink); }
::selection { background:var(--navy); color:var(--paper); }
.eyebrow { color:var(--teal); }
.d .stroke, .stroke { -webkit-text-stroke-color:var(--tan) !important; color:transparent; }
.mute { color:var(--muted) !important; }

/* NAV — white over hero, solid navy on light after scroll */
.nav { mix-blend-mode:normal; transition:background .35s var(--ease), padding .35s var(--ease); }
.nav__links a { color:var(--bone); }
.nav .logo-dark { display:none; }
.nav.is-solid { background:rgba(246,245,241,.92); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line-soft); padding-block:.85rem; }
.nav.is-solid .nav__links a { color:var(--ink); }
.nav.is-solid .logo-light { display:none; }
.nav.is-solid .logo-dark { display:block; }
.nav.is-solid .burger span { background:var(--ink); }
@media (max-width:820px){ .nav { background:linear-gradient(rgba(17,42,52,.4),transparent); } .nav.is-solid { background:rgba(246,245,241,.95); } }

/* HERO stays dark (photo) — warm the wash toward teal */
.hero__bg::after { background:linear-gradient(180deg, rgba(17,42,52,.5) 0%, rgba(17,42,52,.12) 38%, rgba(10,20,24,.82) 100%); }
.hero__meta { border-top-color:rgba(245,244,242,.22); }

/* STATEMENT — light */
.statement { background:var(--paper); }
.statement__mark { opacity:1; }

/* COMPANY chapter — light */
.chapter__body p { color:var(--ink-dim); }
.chapter__figure::after { content:''; position:absolute; inset:0; background:linear-gradient(200deg,rgba(17,42,52,.05),rgba(17,42,52,.28)); pointer-events:none; }
.chapter__figcap .cap { color:#EDEBE6; } .chapter__figcap .cap b { color:#fff; }

/* BANDS (photos) — teal treatment + legibility */
.band::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(17,42,52,.25), rgba(17,42,52,.15) 45%, rgba(17,42,52,.62)); pointer-events:none; }
.band__cap { z-index:2; }

/* SHEAD */
.shead p.section-lead { color:var(--ink-dim) !important; }

/* VALUES — white cards on light */
.values { background:var(--paper); border-block:1px solid var(--line-soft); }
.values__grid { background:var(--line); border-color:var(--line); }
.value { background:var(--paper-2); }
.value:hover { background:#FBFAF7; }
.value__n { -webkit-text-stroke-color:var(--tan); }
.value__t { color:var(--ink); }
.value__d { color:var(--ink-dim); }
.value::after { background:var(--teal); }

/* PROCESS timeline — light */
.proc__step { border-top-color:var(--line); }
.proc__step:last-child { border-bottom-color:var(--line); }
.proc__n { -webkit-text-stroke-color:var(--tan); }
.proc__n small { color:var(--teal); }
.proc__t { color:var(--ink); }
.proc__d { color:var(--ink-dim); }
.proc__step:hover .proc__n { -webkit-text-stroke-color:var(--navy); }

/* SERVICES — light */
.services .srow { border-top-color:var(--line); }
.services .srow:last-child { border-bottom-color:var(--line); }
.services .srow:hover { background:rgba(7,65,71,.035); }
.srow__n { color:var(--tan-deep); }
.srow__t { color:var(--ink); }
.srow__d { color:var(--ink-dim); }
.srow__tag { color:var(--teal); border:1px solid rgba(7,65,71,.3); padding:.28rem .7rem; }

/* PROJECT teaser — light */
.reveal-soon { color:var(--teal); }
.avail h2 { color:var(--ink); }
.avail__sub { color:var(--ink-dim); }
.cta7 { border-color:var(--navy); color:var(--navy); }
.cta7:hover { background:var(--navy); border-color:var(--navy); color:var(--paper); }

/* PARTNERS — white cards, natural-colour logos */
.partners { background:var(--paper-2); border-block:1px solid var(--line-soft); }
.partners__grid { background:var(--line); border-color:var(--line); }
.partner { background:var(--paper-2); }
.partner:hover { background:#FBFAF7; }
.partner__logo { filter:none; opacity:.9; }
.partner:hover .partner__logo { opacity:1; }
.partner__word { color:var(--navy); }
.partner__role { color:var(--tan-deep); }

/* CONTACT — dark navy-teal block for contrast */
.contact { background:linear-gradient(150deg,var(--navy),var(--navy-2)); color:var(--bone); border-top:0; }
.contact__lead { color:rgba(245,244,242,.6); }
.contact__mail { color:var(--bone); }
.contact__mail:hover { color:var(--tan); }
.contact__addr { color:rgba(245,244,242,.55); }
.contact__addr a:hover { color:var(--bone); }

/* FOOTER — dark navy-teal */
.foot { background:var(--navy); border-top:0; }
.foot__lockup span { color:var(--tan); }
.foot__bar { border-top-color:rgba(245,244,242,.12); color:rgba(245,244,242,.5); }
.foot__lic b { color:rgba(245,244,242,.8); }
.foot__bar a:hover { color:var(--bone); }

/* reveal already fine */

/* PARTNERS — five columns, image logos */
.partners__grid { grid-template-columns:repeat(5,1fr); }
.partner__logo { height:auto; max-height:clamp(34px,3.4vw,46px); max-width:74%; }
@media (max-width:1024px){ .partners__grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px){ .partners__grid { grid-template-columns:1fr 1fr; } }

/* ============================================================
   V8.1 fixes — hero wordmark white + process-label spacing
   ============================================================ */
/* hero wordmark: white on the dark hero photo (both langs) */
.hero__title { color: var(--bone) !important; }

/* process timeline: stack the stage label UNDER the number so it
   never collides with the step title */
.proc__step { grid-template-columns: 165px 1fr; }
.proc__n { flex-direction: column; align-items: flex-start; gap: .35rem; line-height: 1; }
.proc__n small { letter-spacing: .12em; }
html[lang="ar"] .proc__n small { letter-spacing: 0; }
html[lang="ar"] .proc__n { align-items: flex-start; }
@media (max-width: 620px) { .proc__step { grid-template-columns: 1fr; } }

/* ============================================================
   V8.2 — Vision/Mission legibility + 6-partner grid
   ============================================================ */
/* Vision & Mission text was white (invisible) on the light theme */
.vm__text { color: var(--ink); }
.vm__label { color: var(--teal); }
.vm__card { border-top-color: var(--line); }

/* Partners: six logos → balanced 3 × 2 grid */
.partners__grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .partners__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .partners__grid { grid-template-columns: 1fr; } }

/* ============================================================
   V8.3 — services category tags: inset from the right edge
   ============================================================ */
.services .srow { padding-inline-end: clamp(1.2rem, 3.5vw, 3.5rem); }
.srow__tag { align-self: center; padding-top: 0; }

/* ============================================================
   V8.4 — refined contact block (structured, not a big email)
   ============================================================ */
.contact { text-align: start; }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.contact__intro .eyebrow { display: block; margin-bottom: 1.4rem; color: var(--tan); }
.contact__h {
  font-family: var(--disp); font-weight: 500; color: var(--bone);
  font-size: clamp(1.7rem, 3.2vw, 2.9rem); line-height: 1.12; letter-spacing: -0.02em; max-width: 16ch;
}
html[lang="ar"] .contact__h { font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.contact__note { margin-top: 1.4rem; color: rgba(245,244,242,.5); max-width: 42ch; line-height: 1.7; font-size: .98rem; }
.contact__details { display: grid; }
.cdetail {
  display: grid; grid-template-columns: 120px 1fr; gap: 1.5rem; align-items: baseline;
  padding: 1.05rem 0; border-top: 1px solid rgba(245,244,242,.12);
}
.cdetail:last-child { border-bottom: 1px solid rgba(245,244,242,.12); }
.cdetail__label { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tan); }
html[lang="ar"] .cdetail__label { letter-spacing: 0; }
.cdetail a, .cdetail span { color: rgba(245,244,242,.86); font-size: 1.02rem; transition: color .3s var(--ease); text-align: start; }
.cdetail a:hover { color: var(--tan); }
@media (max-width: 820px) {
  .contact__grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .cdetail { grid-template-columns: 100px 1fr; gap: 1rem; }
}

/* ============================================================
   V8.5 — contact: text rows for email/office, icon row for social
   ============================================================ */
.cdetail--icons { align-items: center; }
.cicons { display: flex; gap: .7rem; }
.cicons a {
  width: 44px; height: 44px; border: 1px solid rgba(245,244,242,.2); border-radius: 50%;
  display: grid; place-items: center; color: rgba(245,244,242,.78);
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.cicons a:hover { border-color: var(--tan); color: var(--tan); background: rgba(183,166,149,.08); }
.cicons svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }