/* ============================================================
   MOEDATECH  ·  ABOUT MOEDATECH            abt.css  2026-09-17
   Loads after docs.css on /about-us only.

   Same vocabulary as sup.css: a two-column spread per section
   (heading and one line on the left, the content on the right),
   written separately because this page's pieces differ - a
   pulled quote, the four commitments, a figures row, the two
   audience cards, the backer logos and the entity block.

   The page keeps the SKIN's own bar, so there is nothing here
   about the header. Logical properties throughout, so Arabic
   mirrors with no RTL override.
   ============================================================ */

/* ---- the spread -------------------------------------------- */

.abt .doc-sec > .doc-in {
  display: grid;
  grid-template-columns: minmax(200px, 0.72fr) minmax(0, 2fr);
  column-gap: clamp(28px, 4vw, 72px);
  row-gap: 10px;
  align-items: start;
}
.abt .abt-rail { grid-column: 1; grid-row: 1; }
.abt .abt-rail h2 { margin-block-end: 8px; }
.abt .abt-rail .doc-note { max-width: 34ch; }
/* Column 2 is ONE item (.abt-col) with its own flow, not one grid item per
   block. With several items there, row 1 took the rail's height and a
   section's second block started ~60px low; spanning the rail across rows
   instead created a pile of empty implicit rows. This has neither problem. */
.abt .abt-col {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
}
.abt .abt-backed > .doc-in { display: block; }

/* ---- hero -------------------------------------------------- */

/* The hero had an empty right third. The cause was the inherited 24ch cap on
   the h1: a 52-character sentence folded into two short lines and left the
   rest of every line unused. Uncapped, the heading runs the full measure and
   covers that space itself - which is what Hisham asked for ("change the text
   to cover it"). A two-column hero was tried first and rejected ("no its
   bad"), so the layout stays as one column.
   The lede keeps a readable measure underneath; a 1700px-wide paragraph would
   be ~110 characters a line, well past where the eye loses its place. */
.abt .doc-hero h1 { max-width: none; font-size: clamp(2.3rem, 6.4vw, 5.6rem); }
/* 5.6rem, not the inherited 4rem: at the smaller size the sentence left ~300px
   of every line unused inside a 1180px measure. This fills it in two lines. */
.abt .doc-hero .doc-lede { max-width: 62ch; }

.abt-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 22px; }
.abt-btn {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding-inline: 26px;
  border-radius: var(--d-pill);
  background: var(--d-acc);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s var(--d-ease), transform .18s var(--d-ease);
}
.abt-btn:hover { background: var(--d-acc-d); }
.abt-btn:active { transform: scale(.98); }
.abt-btn--ghost {
  background: transparent;
  color: var(--d-ink);
  border: 1px solid var(--d-line);
}
.abt-btn--ghost:hover { background: var(--d-card); border-color: var(--d-ink); }

/* ---- the founder quote ------------------------------------- */

/* Published on the home page; it is the story's spine, so it is set as a
   pulled quote rather than dropped into the prose. The accent rule sits on
   the inline-start edge so it mirrors in Arabic by itself. */
.abt-quote {
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  padding-inline-start: clamp(16px, 2vw, 26px);
  border-inline-start: 3px solid var(--d-acc);
}
.abt-quote blockquote {
  margin: 0;
  font-size: clamp(1.14rem, 1.9vw, 1.44rem);
  line-height: 1.45;
  font-weight: 450;
  letter-spacing: -.01em;
  color: var(--d-ink);
  text-wrap: pretty;
}
[lang="ar"] .abt-quote blockquote { letter-spacing: 0; line-height: 1.65; }
.abt-quote figcaption { margin-block-start: 12px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.abt-quote figcaption b { font-size: .95rem; font-weight: 650; color: var(--d-ink); }
.abt-quote figcaption span { font-size: .95rem; color: var(--d-mut); }

/* ---- prose ------------------------------------------------- */

.abt-prose p {
  margin: 0 0 .85em;
  max-width: 68ch;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--d-soft);
}
.abt-prose p:last-child { margin-block-end: 0; }

/* ---- the three steps --------------------------------------- */

.abt-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.abt-steps li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-block-end: 1px solid var(--d-line);
}
.abt-steps li:last-child { border-block-end: 0; }
.abt-step-n {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--d-acc) 12%, transparent);
  color: var(--d-acc-d);
  font-size: .85rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.abt-step-b { display: grid; gap: 3px; }
.abt-step-b b { font-size: 1rem; font-weight: 650; color: var(--d-ink); }
.abt-step-b span { font-size: .95rem; line-height: 1.55; color: var(--d-soft); }

/* ---- the four commitments ---------------------------------- */

/* A minus sign, not a tick: every line is something we do NOT do, and a tick
   next to "we sell no equipment" reads as the opposite of the sentence. */
.abt-nevers { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.abt-nevers li {
  position: relative;
  padding: 13px 16px 13px 0;
  padding-inline-start: 40px;
  border-radius: calc(var(--d-r) * .5);
  background: color-mix(in srgb, var(--d-sunk) 48%, transparent);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--d-ink);
}
.abt-nevers li::before {
  content: "\2212";
  position: absolute;
  inset-inline-start: 16px;
  top: 12px;
  width: 16px;
  text-align: center;
  font-weight: 700;
  color: var(--d-acc-d);
}

/* ---- what it is not ---------------------------------------- */

.abt-nots { margin: 0; display: grid; gap: 14px; }
.abt-nots > div { display: grid; gap: 4px; }
.abt-nots dt { font-size: 1rem; font-weight: 650; color: var(--d-ink); }
.abt-nots dd {
  margin: 0;
  max-width: 66ch;
  font-size: .97rem;
  line-height: 1.6;
  color: var(--d-soft);
}
.abt-nots a, .abt-foot a { color: var(--d-acc-d); text-underline-offset: 3px; }

/* ---- the figures ------------------------------------------- */

.abt-figs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px clamp(20px, 2.6vw, 40px);
}
.abt-figs li {
  display: flex; flex-direction: column; gap: 2px;
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--d-acc);
}
.abt-figs b {
  font-size: clamp(1.7rem, 3.2vw, 2.2rem);
  font-weight: 600; line-height: 1.05; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--d-ink);
}
.abt-figs span { font-size: .93rem; line-height: 1.45; color: var(--d-mut); max-width: 26ch; }

.abt-foot { margin: 14px 0 0; font-size: .93rem; line-height: 1.6; color: var(--d-mut); max-width: 70ch; }

/* ---- the two audiences ------------------------------------- */

.abt-sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.abt-side {
  margin: 0;
  padding: clamp(18px, 2vw, 24px);
  border-radius: calc(var(--d-r) * .62);
  background: var(--d-card);
  border: 1px solid var(--d-line);
}
.abt-side h3 { margin: 0 0 6px; font-size: 1.06rem; font-weight: 650; color: var(--d-ink); }
.abt-side p { margin: 0 0 12px; font-size: .95rem; line-height: 1.55; color: var(--d-mut); }
.abt-side ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.abt-side li { font-size: .97rem; line-height: 1.4; }
.abt-side a {
  color: var(--d-ink);
  text-decoration: none;
  border-block-end: 1px solid var(--d-line);
  padding-block-end: 1px;
}
.abt-side a:hover { border-color: var(--d-acc); color: var(--d-acc-d); }

/* ---- backed by --------------------------------------------- */

.abt-backed-l {
  display: block;
  margin-block-end: 18px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--d-mut);
}
[lang="ar"] .abt-backed-l { letter-spacing: 0; text-transform: none; font-size: .9rem; }
.abt-logos {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(22px, 4vw, 54px);
}
/* The six marks are supplied at different widths and weights, so they are
   normalised by HEIGHT and toned back - a logo wall should read as one row,
   not as six competing signs. */
.abt-logos img {
  display: block;
  width: auto;
  height: clamp(26px, 2.6vw, 34px);
  max-width: 170px;
  object-fit: contain;
  opacity: .72;
  filter: grayscale(1);
  transition: opacity .18s var(--d-ease), filter .18s var(--d-ease);
}
.abt-logos li:hover img { opacity: 1; filter: none; }

/* ---- the company ------------------------------------------- */

.abt-entity { display: grid; gap: 16px; }
.abt-op { margin: 0; max-width: 62ch; font-size: 1.02rem; line-height: 1.6; color: var(--d-soft); }
.abt-entity dl { margin: 0; display: grid; gap: 12px; }
.abt-entity dl > div {
  display: grid;
  grid-template-columns: minmax(130px, 22%) 1fr;
  gap: 4px 18px;
  padding: 12px 16px;
  border-radius: calc(var(--d-r) * .5);
  background: color-mix(in srgb, var(--d-sunk) 48%, transparent);
}
.abt-entity dt { font-weight: 650; font-size: .95rem; color: var(--d-ink); }
.abt-entity dd {
  margin: 0;
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  font-size: .95rem; line-height: 1.5; color: var(--d-soft);
  font-variant-numeric: tabular-nums;
}
.abt-entity dd a { color: var(--d-acc-d); text-underline-offset: 3px; }

/* ---- narrower screens -------------------------------------- */

@media (max-width: 1080px) {
  .abt .doc-sec > .doc-in { grid-template-columns: minmax(0, 1fr); }
  .abt .abt-rail { grid-column: 1; grid-row: auto; }
  .abt .abt-rail .doc-note { max-width: 60ch; }
  .abt .abt-col { grid-column: 1; grid-row: auto; margin-block-start: 14px; }
}

@media (max-width: 720px) {
  .abt-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abt-figs li:last-child { grid-column: 1 / -1; }
  .abt-sides { grid-template-columns: 1fr; }
  .abt-entity dl > div { grid-template-columns: 1fr; }
}