/* ==========================================================================
   "من نحن"
   Deliberately almost empty. The page's design has not been decided yet, so
   this holds nothing but the light-header colours and the little needed to
   keep the raw content readable. Everything structural — tokens, type scale,
   containers, buttons, the header — is in tu-system.css.
   ========================================================================== */

/* The header on this page is the homepage's, unchanged: the floating capsule
   over the hero picture, styled entirely in tu-system.css. Nothing about it is
   restated here — a full-width white bar with a border was a header this site
   does not have. */

/* ==========================================================================
   "من نحن" — the live page rebuilt
   Every number below was read off /about/ rather than chosen: container 1152,
   the two centred headings 39px in #a7001e, the section headings 33px, the red
   card 960 wide with a 12px radius and 48px of padding, the opening plate 650
   wide, the side plates 500.
   ========================================================================== */

.abO__wrap { width: min(100% - 2 * var(--frame-inset), 1152px); margin-inline: auto; }

/* --- Hero -----------------------------------------------------------------
   A fixed band under the header, in two proposals. The height is set here in
   both, so the page opens at the same depth whatever the copy does, and neither
   reserves space for a floating header — on this page the header is above it.
   -------------------------------------------------------------------------- */
/* Taller than the band alone: the header floats on it, so the picture has to
   carry the capsule as well as the title. */
.abO__hero { --hero-h: clamp(400px, 44vw, 540px); }

/* 1 · full-bleed ---------------------------------------------------------- */
.abO__hero--full {
  position: relative;
  isolation: isolate;
  height: var(--hero-h);
  display: grid;
  align-items: center;
  background: var(--dark);
  overflow: hidden;
}
/* Cropped high: the band sits on the certificates, which is the point of the
   picture on this page — a firm's credentials on its own wall. The scrim below
   carries the text over them. */
.abO__hero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
/* Even across the band: the title is centred, so there is no reading edge to
   weight one side for. */
.abO__hero--full::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12, 9, 14, .62), rgba(12, 9, 14, .78));
}
/* Pushed clear of the capsule overhead. */
.abO__hero-in { text-align: center; padding-top: clamp(72px, 8vw, 96px); }
.abO__hero--full h1 {
  color: #fff; font-size: clamp(28px, 2.9vw, 39px); font-weight: 700;
  margin: 0 0 var(--sp-4);
  text-shadow: 0 1px 18px rgba(0, 0, 0, .45);
}

/* The opening statement moved up here from the section below. Held to a
   readable measure and centred with the title; white running text over a
   photograph needs the shadow as well as the scrim. */
.abO__hero--full p {
  max-width: 70ch;
  margin: 0 auto;
  color: rgba(255, 255, 255, .92);
  font-size: var(--fs-body);
  line-height: 1.85;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .55);
}


/* --- Opening --------------------------------------------------------------
   The intro, centred, over the site's line graphic. */
.abO__open {
  position: relative;
  isolation: isolate;
  /* More above than below: the hero ends on a hard edge, and the section needs
     to start clear of it rather than butt against it. */
  padding-block: clamp(var(--sp-8), 8vw, 120px) clamp(var(--sp-7), 6vw, var(--sp-9));
}
/* No graphic behind this block. It ran its dotted lines and circles straight
   across the heading and the first paragraph, and a decoration that crosses the
   text is competing with it, not supporting it. */

.abO__open-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 5vw, 84px);
  align-items: center;
}
.abO__open-copy p { font-size: var(--fs-lead); line-height: 1.85; }
.abO__open-copy p + p { margin-top: var(--sp-5); }

.abO__open-media { margin: 0; }
/* A fixed ratio rather than the picture's own height: the source is a phone
   photograph in portrait and would tower over three paragraphs beside it. */
.abO__open-media img {
  display: block; width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  border-radius: var(--r-surface);
}

/* --- Approved by ----------------------------------------------------------
   Same arrangement as the reference: a soft tinted band, centred heading and
   one line, then a row of marks with a name under each. No cards and no
   borders — the marks sit on the ground, which is what makes the row read as
   a set of institutions rather than a grid of boxes. */
/* --- The founder ----------------------------------------------------------
   Portrait opposite his own account of the firm. */
/* A soft wash behind this block, the way the reference sets its founder
   section apart from the row above. Ours in red rather than its lavender, and
   kept faint — the portrait and the red rule are already carrying colour. */
/* One wash behind the founder and the figures together. Painted on the wrapper
   rather than on each section: a gradient restarts at the top of whatever it is
   painted on, so two copies of it meant the founder faded to white and the
   figures began again at full tint, drawing a line between them. */
.abO__wash {
  /* Four stops rather than three: this now runs under three blocks instead of
     two, and over that distance a straight fade reads as a flat panel that
     stops. Weighted to thin quickly at first and then trail off, so it has
     become the page's own colour by the bottom rather than ending on an edge. */
  background:
    linear-gradient(180deg,
      rgba(167, 0, 30, .06) 0%,
      rgba(167, 0, 30, .035) 32%,
      rgba(167, 0, 30, .014) 62%,
      rgba(167, 0, 30, 0) 100%),
    var(--paper);
}
/* Inside the wrapper the row has no ground of its own — that is the whole
   point of the wrapper. Its own is for the homepage, where it stands alone. */
.abO__wash .tu-creds { background: none; }
.abO__founder {
  padding-block: clamp(var(--sp-7), 6vw, var(--sp-9));
}
.abO__founder-in {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(var(--sp-6), 5vw, 84px);
  align-items: center;
}
.abO__founder h2 { color: var(--red); font-size: clamp(24px, 2.4vw, 33px); font-weight: 700; margin: var(--sp-4) 0 var(--sp-5); }
.abO__founder-lead { font-size: var(--fs-lead); line-height: 1.85; margin-bottom: var(--sp-6); }

/* His name and what he does, set apart from the firm's account of itself. */
.abO__founder-card {
  padding-inline-start: var(--sp-5);
  border-inline-start: 2px solid var(--red);
}
.abO__founder-card b { display: block; color: var(--ink); font-size: var(--fs-h3); font-weight: 800; }
.abO__founder-card > span { display: block; margin-top: var(--sp-2); color: var(--red); font-size: var(--fs-small); font-weight: 700; }
.abO__founder-card ul { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.abO__founder-card li { position: relative; padding-inline-start: var(--sp-5); font-size: var(--fs-small); line-height: 1.75; }
.abO__founder-card li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .7em;
  width: 10px; height: 2px; background: var(--red);
}

.abO__founder-photo { margin: 0; }
.abO__founder-photo img {
  display: block; width: 100%;
  aspect-ratio: 1160 / 1187;
  height: auto;
  object-fit: cover;
  border-radius: var(--r-surface);
}

/* --- Counters ------------------------------------------------------------- */
/* The counters were four numbers loose on white — the one block on the page
   with nothing holding it. A tinted band and a card each, so they read as a
   measured claim rather than as text that happens to be large. */
.abO__figures {
  padding-block: clamp(var(--sp-7), 6vw, var(--sp-9));
  text-align: center;
}
.abO__figures h2 {
  color: var(--red);
  font-size: clamp(28px, 2.9vw, 39px);
  font-weight: 700;
  margin-bottom: clamp(var(--sp-6), 4vw, var(--sp-7));
}
.abO__counters {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.abO__counters > div {
  padding: clamp(var(--sp-5), 3vw, var(--sp-6)) var(--sp-4);
  /* Tinted rather than white: by this point in the wash the ground is nearly
     white itself, and a white card on it was only its own border. */
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
}
.abO__counters b {
  display: block; color: var(--red);
  font-size: clamp(34px, 4vw, 54px); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.abO__counters span { display: block; margin-top: var(--sp-4); font-size: var(--fs-body); line-height: 1.6; color: var(--ink); font-weight: 700; }

/* --- Vision and mission card ----------------------------------------------
   960 x 487 on the original, 12px radius, 48px padding, with a quotation mark
   watermark and two rings at the top of the reading edge. */
/* --- Vision and mission ---------------------------------------------------
   The band is the brand colour and the statements sit on it. It was a red card
   floating on a dark band — two surfaces doing one job, and because the card's
   padding was fixed and the two statements are short, most of it was empty. */
.abO__mission {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(var(--sp-8), 8vw, 120px);
  background: var(--red);
  color: #fff;
}

/* One quotation mark, large and faint, off to the side of the reading edge —
   it marks the two statements as quotations without sitting under them. */
.abO__mission-quote {
  position: absolute; z-index: -1;
  left: 6%; top: 50%;
  transform: translateY(-52%);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(240px, 30vw, 420px);
  line-height: .8;
  color: rgba(255, 255, 255, .08);
  pointer-events: none;
  user-select: none;
}

.abO__mission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--sp-6), 5vw, 84px);
}
.abO__mission-grid h2 {
  color: #fff;
  font-size: clamp(24px, 2.4vw, 33px);
  font-weight: 700;
  margin: 0 0 var(--sp-4);
}
/* A short rule under each heading, in white on the red rather than red on
   white — the same mark the rest of the page uses, inverted for this band. */
.abO__mission-grid h2::after {
  content: ""; display: block; width: 48px; height: 3px;
  background: rgba(255, 255, 255, .5);
  margin-top: var(--sp-4);
}
.abO__mission-grid p {
  color: rgba(255, 255, 255, .94);
  font-size: var(--fs-lead);
  line-height: 1.9;
  margin: 0;
}

/* --- Picture and text rows ------------------------------------------------
   Copy on the reading edge, a 500-wide plate opposite. */
/* Padded top and bottom, like every other band on the page. It carried only a
   bottom padding, so it began on the exact pixel the red band ended and the
   photograph stood against the red with no ground of its own. */
.abO__split { padding-block: clamp(var(--sp-7), 6vw, var(--sp-9)); }
.abO__split-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  gap: clamp(var(--sp-6), 5vw, 84px);
  align-items: center;
}
.abO__copy h2 { color: var(--red); font-size: clamp(24px, 2.4vw, 33px); font-weight: 700; margin-bottom: var(--sp-5); }
.abO__copy p + p { margin-top: var(--sp-4); }
.abO__copy ul { margin: 0; padding-inline-start: var(--sp-5); list-style: disc; }
.abO__copy li { margin-bottom: var(--sp-2); line-height: 1.85; }
.abO__copy li::marker { color: var(--ink); }

.abO__side { margin: 0; }
.abO__side img {
  display: block; width: 100%; aspect-ratio: 500 / 417; height: auto;
  object-fit: cover; border-radius: var(--r-surface);
}

@media (max-width: 900px) {
  .abO__open-in { grid-template-columns: minmax(0, 1fr); }
  .abO__founder-in { grid-template-columns: minmax(0, 1fr); }
  .abO__founder-photo { max-width: 360px; }
  .abO__counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abO__mission-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .abO__split-in { grid-template-columns: minmax(0, 1fr); }
  .abO__side { order: -1; }
  .abO__mission-quote { font-size: 200px; left: 4%; }
}
@media (max-width: 560px) {
  .abO__counters { grid-template-columns: minmax(0, 1fr); }
}

/* --- FAQ -------------------------------------------------------------------
   The accordion itself is tu-faq.css; this is only the band it sits in. Tinted
   so the page does not end on two plain white sections in a row. */
.abO__faq {
  padding-block: clamp(var(--sp-7), 6vw, var(--sp-9));
  /* Full tint from the top — this is a ground, and fading it in at both ends
     left it reading as plain white. Only the bottom lets go, because the white
     the footer opens on sat against it on a hard line. */
  background: linear-gradient(
    180deg,
    var(--wash) 0%,
    var(--wash) 84%,
    #fff 100%
  );
}