/* ==========================================================================
   NEXGEN Holdings — site.css
   Plain CSS, no build step, no frameworks.

   Design direction
   ----------------
   A Gulf holding company reads as a portfolio, so the page is built like a
   set of ledgers: one continuous paper ground, hairline rules that mark where
   one entry ends and the next begins, and a petrol/teal palette lifted from
   the company's own mark. Restraint everywhere; the only loud elements are
   the display serif and the two dark statement bands.

   Architecture
   ------------
   1.  ONE paper ground for the whole document (--paper). Sections are
       separated by whitespace + a hairline, not by flipping backgrounds.
   2.  Petrol (--dark) is reserved for statement bands, the CTA band, the
       footer, and the hero image scrim.
   3.  Mobile-first: base rules target 360-390px, scaling at 640 / 768 /
       1024 / 1240.
   ========================================================================== */

/* --- 0. Fonts (self-hosted) ---------------------------------------------- */
/* Served from this origin rather than fonts.googleapis.com: no third-party
   round trip, no per-visitor request to Google, and — the reason this changed
   — no font swap reflowing the hero once it arrives. Both faces are variable,
   so one file covers 400-600. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Arabic. Amiri (Naskh serif) carries the display levels and IBM Plex Sans
   Arabic the body, mirroring the Latin two-role system: a serif that states and
   a geometric sans that structures. Both files carry the full Latin set, so
   brand names inside Arabic sentences set from the Arabic face rather than
   falling back. Neither has letter-spacing applied anywhere — tracking severs
   the joins between Arabic letters (see section 22). */
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/amiri-regular.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF,
    U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/amiri-bold.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF,
    U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/plex-arabic-regular.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF,
    U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/plex-arabic-semibold.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF,
    U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212;
}

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* Colour — petrol neutrals tinted toward the brand hue (the mark is
     #204060 petrol + #40c0c0 cyan; every neutral here carries 2-4% of it). */
  --paper:      #f4f6f6;   /* page ground, whole document                  */
  --panel:      #ffffff;   /* inset panels only, never full bands          */
  --panel-2:    #eceff0;   /* secondary inset (image plates)               */

  --ink:        #111a1f;   /* headings               16.25:1 on paper      */
  --body:       #3d474b;   /* body copy               8.79:1 on paper      */
  --muted:      #5f6c72;   /* meta / labels           5.00:1 on paper      */

  --dark:       #0f1a20;   /* statement bands                              */
  --dark-2:     #0a1216;   /* footer — one step deeper than the bands      */

  --teal:       #2a9d99;   /* accent FILLS only — 5.36:1 under --ink label */
  --teal-ink:   #0a5a62;   /* accent text / links      7.30:1 on paper     */
  --teal-bright:#5fd3cf;   /* accent on dark           9.85:1 on --dark    */

  --hairline:      rgba(16, 26, 31, .10);
  --line:          rgba(16, 26, 31, .16);
  --line-strong:   rgba(16, 26, 31, .28);
  --hairline-dark: rgba(255, 255, 255, .12);

  /* Metrics */
  --topbar-h: 76px;
  --gutter: 20px;
  --container: 1200px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;

  /* Spacing — one 8px-derived scale, used everywhere. No inline one-offs. */
  --s1: 8px;   --s2: 16px;  --s3: 24px;  --s4: 32px;
  --s5: 48px;  --s6: 64px;  --s7: 88px;  --s8: 112px;

  /* One rhythm value => consecutive sections feel evenly paced */
  --pace: clamp(56px, 7vw, 96px);

  /* Type scale.
     Every adjacent step clears 1.25 at the top of its clamp:
       label 13 · body 17 (1.31) · lead 22 (1.29) · h3 28 (1.27) ·
       h2 41 (1.46) · h1 52 (1.27) · hero 65 (1.25)  ==  --fs-hero is a full
     step clear of --fs-h1. On narrow screens the clamps compress the display
     end so the type still fits 360px; the full ladder is what desktop shows. */
  --fs-label: .8125rem;                                      /* 13px floor  */
  --fs-body: 1.0625rem;                                      /* 17px        */
  --fs-lead:   clamp(1.1875rem, 1.35vw + .75rem, 1.375rem);  /* 19 -> 22    */
  --fs-h4:     1.0625rem;                                    /* 17px        */
  --fs-h3:     clamp(1.375rem, 2.1vw + .65rem, 1.75rem);     /* 22 -> 28    */  --fs-h2:     clamp(1.75rem,   3.4vw + .5rem, 2.5625rem);   /* 28 -> 41    */
  --fs-h1:     clamp(2.125rem,  4.6vw + .5rem, 3.25rem);     /* 34 -> 52    */
  --fs-hero:   clamp(2.5rem,    6vw + .5rem,   4.0625rem);   /* 40 -> 65    */

  --lh-tight: 1.08;
  --lh-h:     1.16;
  --lh-body:  1.6;
  --lh-lead:  1.58;

  --shadow-sm: 0 1px 2px rgba(16, 26, 31, .05);
  --shadow-md: 0 16px 36px -22px rgba(16, 26, 31, .30);
  --shadow-lg: 0 34px 64px -38px rgba(16, 26, 31, .42);
  --shadow-panel: 0 1px 2px rgba(16, 26, 31, .03), 0 26px 50px -42px rgba(16, 26, 31, .32);

  /* Two families by ROLE: Newsreader states, Instrument Sans structures. */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  /* Arabic families sit AFTER the Latin ones: Latin glyphs (brand names such
     as NEXGEN or InPipe) still come from the Latin face, and only the Arabic
     runs fall through to these. */
  --font-display-ar: "Amiri", "Noto Naskh Arabic", Georgia, serif;
  --font-sans-ar: "IBM Plex Sans Arabic", "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  /* Motion tokens — one curve family, used by every transition below. */
  --ease:        cubic-bezier(.23, 1, .32, 1);   /* strong ease-out (UI)   */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);  /* on-screen movement     */
  --dur-press:   140ms;
  --dur-ui:      200ms;
  --dur-reveal:  620ms;
}

@media (max-width: 939.98px) { :root { --topbar-h: 64px; } }
@media (max-width: 420px)  { :root { --gutter: 18px; } }

/* --- 2. Reset & base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 24px);
}

body {
  margin: 0;
  background: var(--paper);          /* ONE continuous ground, whole doc   */
  color: var(--body);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);         /* 17px */
  line-height: var(--lh-body);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;   /* browser flash removed here  */
}

body.nav-open { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

/* --- 3. Typography ------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: var(--lh-h);
  letter-spacing: -.008em;
  color: var(--ink);
  text-wrap: balance;
}

/* Display serif carries the two top levels only. The webfont ships the wght
   axis only (no opsz), which is 72KB lighter per page than the opsz build. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.018em;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -.022em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -.012em; }
h4 { font-size: var(--fs-h4); }

/* Headings that follow content get air above; after an eyebrow they don't. */
p:not(.eyebrow) + h2, p:not(.eyebrow) + h3,
ul + h2, ul + h3, ol + h2, ol + h3,
.grid + h2, .figure + h3, .stats + h2 { margin-top: 1.6em; }

p { margin: 0 0 var(--s3); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal-ink); text-decoration: none; transition: color var(--dur-ui) var(--ease); }
a:hover { color: var(--ink); }

ul, ol { margin: 0; padding: 0; list-style: none; }

strong { color: var(--ink); font-weight: 600; }

h1, h2, h3, h4, p, li, a, span { overflow-wrap: break-word; }

:focus-visible {
  outline: 3px solid var(--teal-ink);
  outline-offset: 3px;
  border-radius: 3px;
}
.section--dark :focus-visible,
.footer :focus-visible,
.topbar :focus-visible,
.hero :focus-visible { outline-color: var(--teal-bright); }

::selection { background: var(--teal); color: #06201f; }

/* The eyebrow is an editorial signpost, not a shouted micro-label: upright
   serif in the accent colour, sentence case, no tracking. Italic is NOT used —
   the webfont ships upright weights only, and synthesised slant on a serif
   looks like a defect; the real italic axis costs +62KB per page. */
.eyebrow {
  display: block;
  margin: 0 0 var(--s2);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--teal-ink);
}
.section--dark .eyebrow, .hero .eyebrow { color: var(--teal-bright); }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--body);
  max-width: 60ch;
}
.section--dark .lead { color: rgba(255, 255, 255, .84); }

.checklist { display: grid; gap: 10px; }
.checklist li {
  position: relative;
  padding-inline-start: 26px;
  max-width: 62ch;
  color: var(--body);
}
.checklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 3px;
  top: .62em;
  width: 7px;
  height: 7px;
  background: var(--teal);
  border-radius: 1px;
  transform: rotate(45deg);
}
.section--dark .checklist li { color: rgba(255, 255, 255, .84); }

/* A ledger head: hairline + small caps label, used to open a run of entries. */
.ledger {
  border-top: 1px solid var(--line);
  padding-top: var(--s3);
}

/* --- 4. Layout ----------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section, .next { padding-block: var(--pace); }

/* Section separation without background flipping: one hairline at the top
   edge of each section that follows another, aligned to the content box. */
main > .section + .section,
main > .section + .next,
main > .next + .section {
  background-image: linear-gradient(var(--hairline), var(--hairline));
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: calc(min(100%, var(--container)) - 2 * var(--gutter)) 1px;
}

.inset {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-panel);
  padding: clamp(20px, 4vw, 44px);
}

/* Statement band. The generator emits .section--dark; this is the single
   place that paints it, so a dark section can never silently go transparent.
   .section--panel-dark/.panel-dark are kept as aliases for inset variants. */
/* Statement bands arrive out of the page ground and return to it: the first
   and last --pace of each band carry a paper fade, matching its own padding,
   so no text ever sits on the transition. */
.section--dark {
  background-color: var(--dark);          /* opaque base under the gradients  */
  background-image:
    linear-gradient(180deg, rgba(244, 246, 246, 1) 0%, rgba(244, 246, 246, 0) 100%),
    linear-gradient(180deg, rgba(244, 246, 246, 0) 0%, rgba(244, 246, 246, 1) 100%),
    radial-gradient(130% 120% at 8% 0%, #16262e 0%, var(--dark) 58%, #0a1318 100%);
  background-repeat: no-repeat;
  background-size: 100% var(--pace), 100% var(--pace), 100% 100%;
  background-position: top, bottom, center;
  color: rgba(255, 255, 255, .84);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: rgba(255, 255, 255, .82); }
.section--dark strong { color: #fff; }
.section--dark a { color: var(--teal-bright); }
.section--dark a:hover { color: #fff; }
.section--dark .ledger { border-top-color: var(--hairline-dark); }

.section--panel-dark { padding-block: var(--pace); }
.section--panel-dark > .container > .panel-dark,
.panel-dark {
  background-color: var(--dark);          /* opaque base under the gradient   */
  background-image:
    radial-gradient(120% 130% at 12% 0%, #16262e 0%, var(--dark) 55%, #0a1318 100%);
  color: rgba(255, 255, 255, .86);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(28px, 5vw, 60px);
}
.panel-dark h1, .panel-dark h2, .panel-dark h3, .panel-dark h4 { color: #fff; }
.panel-dark strong { color: #fff; }
.panel-dark .lead { color: rgba(255, 255, 255, .82); }
.panel-dark .eyebrow { color: var(--teal-bright); }
.panel-dark p { color: rgba(255, 255, 255, .8); }

/* Legacy aliases: kept so an un-migrated block can never look broken. */
.section--alt { background: transparent; }

.grid { display: grid; gap: var(--s3); }
.grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  align-items: center;
}

/* Editorial split: statement left, the reading column right. Used where a
   section carries copy instead of an image, so the line length stays sane. */
.split--editorial { align-items: start; }
/* Two text columns share a top edge. Centring is for an image beside copy; when
   both sides are copy it only pushes the shorter column down by the difference.
   Browsers without :has() keep the centred fallback above. */
.split:not(:has(figure)) { align-items: start; }
.split--editorial > div:first-child { max-width: 34ch; }
.split--editorial > div:last-child > p { max-width: 62ch; }
@media (min-width: 900px) {
  .split--editorial { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6); }
}

.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: var(--s3); }
.center { text-align: center; }
.center p, .center .lead { margin-inline: auto; }
.center .eyebrow { margin-inline: auto; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 68ch; }
.measure-sm { max-width: 54ch; }

/* Section intro sizes — replace the old inline max-width/margin stacks. */
.intro        { max-width: 720px; margin-inline: auto; }
.intro--wide  { max-width: 760px; margin-inline: auto; }
.intro--space { margin-top: var(--s5); }
.section-lead-space { margin-top: var(--s5); }
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }

.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* --- 5. Buttons & links — every target >= 44px --------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease),
              border-color var(--dur-ui) var(--ease), transform var(--dur-press) var(--ease),
              box-shadow var(--dur-ui) var(--ease);
}

.btn--primary { background: var(--ink); color: #fff; }
.btn--accent  { background: var(--teal); color: #08201f; }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--onDark  { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .42); }
.btn--quiet   { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .34); }

/* Press feedback on pointer-down, not on release. Hover is gated below. */
.btn:active { transform: scale(.975); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--teal-ink); color: #fff; box-shadow: var(--shadow-md); }
  .btn--accent:hover  { background: #25918d; }
  .btn--outline:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
  .btn--onDark:hover  { background: #fff; color: var(--ink); border-color: #fff; }
  .btn--quiet:hover   { background: #fff; color: var(--ink); border-color: #fff; }
}

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--spaced { margin-top: var(--s4); }
.center-actions { justify-content: center; margin-top: var(--s5); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
}
.link-arrow::after { content: "\2192"; transition: transform var(--dur-ui) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { color: var(--teal-ink); }
  .link-arrow:hover::after { transform: translateX(5px); }   /* flipped in section 22 */
}

/* --- 6. Skip link -------------------------------------------------------- */
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 300;
  padding: 14px 22px;
  background: var(--teal);
  color: #06201f;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.skip-link:focus { inset-inline-start: 12px; top: 12px; }

/* --- 7. Topbar + navigation ---------------------------------------------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  background: var(--dark);
  border-bottom: 1px solid var(--hairline-dark);
  /* Hiding on the way down and returning on the way up is a transform, so the
     bar keeps its own composited layer and never reflows the page. It also
     makes .topbar the containing block for the drawer below, which is what
     glues the drawer to the bar instead of to the viewport. */
  transform: translateY(0);
  transition: transform .28s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.topbar.is-hidden { transform: translateY(-101%); }
/* No backdrop-filter here: it would make .topbar the containing block for its
   fixed descendants and collapse the drawer. The bar is 97% opaque anyway, so
   the blur was never doing visible work. */
.topbar.is-stuck {
  background: rgba(10, 18, 22, .97);
  box-shadow: 0 12px 30px -22px rgba(0, 0, 0, .7);
}
/* The bar is dark and the page ground is not: let it bleed a little instead of
   ending on a hard 1px line. Invisible over the hero, where both are dark. */
.topbar::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto 0;
  height: 20px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 26, 32, .55) 0%, rgba(15, 26, 32, 0) 100%);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.topbar.is-stuck::after { opacity: 1; }

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--s2);
  height: var(--topbar-h);
}

/* The bar's trailing cluster: the language switch and the contact button. They
   travel together so the CTA keeps its place at the end of the row and the
   switch never collides with the nav. */
.topbar__end {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-inline-start: auto;
}

/* Language switch. Deliberately quiet — it is a utility, not a call to action:
   no fill, no border, just the other language's own name in its own script.
   Sized to a full 44px target because it is tapped, not read. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .70);
  white-space: nowrap;
  transition: color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .lang-switch:hover { color: #fff; background: rgba(255, 255, 255, .08); }
}
/* On the Arabic pages the switch reads "English" — a Latin word. Keep it in the
   Latin face so it does not get set in Amiri, where a lone Latin word at label
   size looks like a different brand. */
[dir="rtl"] .lang-switch { font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; }

@media (max-width: 419.98px) {
  /* 360px is tight: the brand, the switch, the CTA and the toggle all compete.
     The switch keeps its 44px height but drops to the compact padding. */
  .lang-switch { padding: 0 8px; }
  .topbar__end { gap: 4px; }
}

.topbar__brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; min-height: 44px; }
.topbar__brand img { height: 42px; width: auto; }
.topbar__brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.topbar__brand-name {
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}
.topbar__brand-tag {
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}

.topbar__toggle {
  display: block;
  margin-inline-start: auto;
  width: 48px;
  height: 48px;
  /* The topbar row is tight at 360px; without this the button is flex-shrunk
     to 22px and the touch target falls well under 44px. */
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: var(--radius);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.topbar__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: #fff;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.topbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile: the nav becomes a slide-in panel anchored to the bottom edge of the
   bar. It is absolutely positioned rather than fixed so it stays glued to the
   bar when the bar translates away, and so a transform or filter anywhere on
   .topbar can never re-anchor it by accident. */
.topbar__nav {
  position: absolute;
  inset: 100% 0 auto 0;
  height: calc(100vh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h));
  display: flex;
  flex-direction: column;
  padding: var(--s4) var(--gutter) calc(var(--s5) + env(safe-area-inset-bottom, 0px));
  background: var(--dark-2);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateX(102%);   /* flipped for RTL in section 22 */
  visibility: hidden;
  transition: transform .3s var(--ease), visibility .3s;
}
.nav-open .topbar__nav { transform: none; visibility: visible; }
.nav-open .topbar { background: var(--dark-2); }

.topbar__menu { display: flex; flex-direction: column; }
.topbar__menu > li { border-bottom: 1px solid var(--hairline-dark); }

.topbar__menu a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 12px 2px;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, .82);
}
.topbar__menu a[aria-current="page"] { color: #fff; }
.topbar__menu a[aria-current="page"]::after {
  content: "";
  width: 6px; height: 6px;
  margin-inline-start: auto;
  background: var(--teal-bright);
  border-radius: 50%;
}

/* --- 7a. Companies disclosure -------------------------------------------- */
/* The group is a real link to the overview page plus a separate caret button
   that owns the disclosure. Keeping the two apart means the label is always a
   one-tap route to the overview, and opening the list never hijacks it. */
.drop { display: flex; flex-wrap: wrap; align-items: center; }
.drop > a { flex: 1 1 auto; }
.drop__toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .66);
  cursor: pointer;
  touch-action: manipulation;
}
.drop__caret {
  width: 9px;
  height: 9px;
  border-inline-end: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--ease);
}
/* Drawer: the list is a nested block, open by default so every venture is
   reachable without JS. The caret collapses it. */
.drop__menu {
  flex: 1 0 100%;
  margin-inline-start: 2px;
  padding: 0 0 10px 12px;
  border-inline-start: 1px solid rgba(255, 255, 255, .12);
}
.drop__menu a {
  min-height: 48px;
  padding: 12px 2px;
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, .72);
}
.drop.is-collapsed .drop__menu { display: none; }
.drop.is-collapsed .drop__caret { transform: rotate(-45deg) translate(0, -2px); }
.drop.is-current > a { color: #fff; }
.drop.is-current .drop__caret { border-color: var(--teal-bright); }

/* The CTA lives in the bar itself, not inside the drawer. It has to clear the
   44px touch minimum and still fit a 64px row next to the brand and the
   toggle, so it gets its own compact metrics rather than .btn's roomy ones. */
.topbar__cta {
  margin-top: 0;
  width: auto;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  white-space: nowrap;
}
/* 360px leaves about 120px for the button; tighten it rather than let the
   label wrap onto a second line and grow past the bar. */
@media (max-width: 379.98px) {
  .topbar__cta { padding: 0 12px; letter-spacing: .02em; }
}

/* --- 7b. Desktop navigation ---------------------------------------------- */
/* Measured: with the ventures behind the Companies panel the row costs
   brand + the labels + the button fit well inside the 1200px container, so it
   appears once a 940px viewport can seat it. Below that the drawer is the
   honest layout rather than a row that folds labels onto two lines. */
@media (min-width: 940px) {
  .topbar__toggle { display: none; }

  .topbar__nav {
    position: static;
    inset: auto;
    height: auto;
    flex-direction: row;
    /* Stretch to the bar so the Companies panel can hang off the bar's own
       bottom edge rather than off the 44px label row inside it. */
    align-self: stretch;
    align-items: stretch;
    gap: 6px;
    margin-inline-start: auto;
    padding: 0;
    background: none;
    overflow: visible;
    transform: none;
    visibility: visible;
  }

  .topbar__menu { flex-direction: row; align-items: stretch; height: 100%; gap: 1px; }
  .topbar__menu > li { border-bottom: 0; display: flex; align-items: center; }

  .topbar__menu a {
    position: relative;
    width: auto;
    min-height: 44px;
    padding: 11px 11px;
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .03em;
    text-transform: uppercase;
    /* Never fold a label across two lines: a two-line row is the tell of a
       template that was not measured. */
    white-space: nowrap;
    color: rgba(255, 255, 255, .74);
  }
  @media (hover: hover) and (pointer: fine) {
    .topbar__menu a:hover { color: #fff; }
  }

  .topbar__menu a::after {
    content: "";
    position: absolute;
    inset-inline: 12px; bottom: 5px;
    height: 2px;
    background: var(--teal-bright);
    transform: scaleX(0);
    transform-origin: left;   /* flipped for RTL in section 22 */
    transition: transform .25s var(--ease);
  }
  .topbar__menu a[aria-current="page"] { color: #fff; }
  .topbar__menu a[aria-current="page"]::after { transform: scaleX(1); }
  @media (hover: hover) and (pointer: fine) {
    .topbar__menu a:hover::after { transform: scaleX(1); }
  }

  /* Desktop: the group is the label + its own caret, and the list becomes a
     panel below them. The group stretches to the full bar height so the
     panel's 100% lands under the bar's bottom edge instead of over it. */
  .drop { position: relative; align-self: stretch; flex-wrap: nowrap; }
  .drop__toggle { width: 44px; height: 44px; color: rgba(255, 255, 255, .74); }
  .drop.is-current .drop__toggle { color: #fff; }
  .drop__menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    z-index: 1;
    flex: none;
    min-width: 236px;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-lg);
    background: var(--dark-2);
    box-shadow: 0 28px 54px -24px rgba(0, 0, 0, .6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .drop.is-open .drop__menu { opacity: 1; visibility: visible; transform: none; }
  .drop.is-open .drop__caret { transform: rotate(-135deg) translate(-2px, -2px); }
  .drop__menu a {
    min-height: 46px;
    padding: 11px 12px;
    border-radius: var(--radius);
    font-size: var(--fs-label);
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .74);
  }
  .drop__menu a::after { display: none; }
  @media (hover: hover) and (pointer: fine) {
    .drop__menu a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  }
  .drop__menu a[aria-current="page"] { background: rgba(95, 211, 207, .14); color: #fff; }

  .topbar__cta { margin-top: 0; width: auto; min-height: 44px; padding: 12px 20px; }
}

/* No-JS drawer fallback. The slide-in drawer is opened by the toggle, which is
   inert without a script, so below the desktop breakpoint the menu would sit
   hidden off-screen and every link, Companies included, would be unreachable.
   With scripting off the bar becomes an in-flow header instead: brand and CTA
   on one row, the full menu (Companies list expanded) beneath. A media query
   rather than :not(.js) so script-enabled visitors never see it flash. */
@media (scripting: none) and (max-width: 939.98px) {
  .topbar { position: relative; }
  /* Hero rules come later in the file; the extra selector wins on specificity. */
  body .hero { margin-top: 0; }
  .topbar__inner { flex-wrap: wrap; height: auto; min-height: var(--topbar-h); }
  .topbar__toggle { display: none; }
  .topbar__cta { margin-inline-start: auto; }
  .topbar__nav {
    position: static;
    order: 3;
    flex: 1 0 100%;
    height: auto;
    padding: 0 0 var(--s3);
    overflow: visible;
    transform: none;
    visibility: visible;
    transition: none;
  }
}

/* --- 9. Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: var(--topbar-h);
  min-height: min(74vh, 660px);
  padding-block: var(--s7);
  overflow: hidden;
  background-color: var(--dark);          /* opaque base; the image sits over it */
  color: rgba(255, 255, 255, .86);
  isolation: isolate;
}
.hero--home { min-height: min(80vh, 740px); }
/* Only photo heroes reserve room for the fade below their copy. */
.hero--photo { padding-bottom: calc(var(--s7) + var(--s6)); }

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
/* Scrim: heavy at the left where the type sits, lighter at the right so the
   photograph still reads as a photograph. The last layer is the bridge: the
   page ground fades in over the bottom of the hero, so near-black yields to
   paper through one continuous value ramp instead of a cut. A plain fade of
   --paper composites to a mathematically even ramp (a 246 to 24 travel has the
   same step at every row), which is why there are no intermediate stops. */
.hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(244, 246, 246, 0) 0%, rgba(244, 246, 246, 1) 100%) bottom / 100% var(--s7) no-repeat,
    linear-gradient(180deg, rgba(10, 18, 22, .78) 0%, rgba(10, 18, 22, .52) 45%, rgba(10, 18, 22, .86) 100%),
    linear-gradient(90deg, rgba(8, 15, 19, .80) 0%, rgba(8, 15, 19, .22) 62%);
}
.hero--photo.hero--bright::after {
  background:
    linear-gradient(180deg, rgba(244, 246, 246, 0) 0%, rgba(244, 246, 246, 1) 100%) bottom / 100% var(--s7) no-repeat,
    linear-gradient(180deg, rgba(10, 18, 22, .70) 0%, rgba(10, 18, 22, .42) 45%, rgba(10, 18, 22, .80) 100%),
    linear-gradient(90deg, rgba(8, 15, 19, .72) 0%, rgba(8, 15, 19, .14) 62%);
}

/* InPipe hero: the source photo is a partner slide with its own headline and
   presenter caption baked into the left half. The scrim goes near-opaque under
   the copy and only opens on the right, where the equipment is, so the two
   sets of type never compete. */
.hero--photo.hero--inpipe::after {
  background:
    linear-gradient(180deg, rgba(244, 246, 246, 0) 0%, rgba(244, 246, 246, 1) 100%) bottom / 100% var(--s7) no-repeat,
    linear-gradient(180deg, rgba(10, 18, 22, .55) 0%, rgba(10, 18, 22, .20) 45%, rgba(10, 18, 22, .70) 100%),
    linear-gradient(90deg, rgb(8, 15, 19) 0%, rgb(8, 15, 19) 50%, rgba(8, 15, 19, .30) 80%, rgba(8, 15, 19, .12) 100%);
}
.hero--inpipe .hero__media img { object-position: 78% 55%; }
/* Below the desktop breakpoint every photo hero stacks: see section 20. */

/* Venture hero: a compact petrol plate. No decorative grid, no empty void. */
.hero--plate {
  min-height: 0;
  padding-block: clamp(52px, 9vw, 92px);
  text-align: center;
  background-color: var(--dark);          /* opaque base under the gradient   */
  background-image: radial-gradient(120% 110% at 50% 0%, #16262e 0%, var(--dark) 58%, #0a1318 100%);
}
.hero--plate .hero__inner { max-width: 760px; margin-inline: auto; }
.hero--plate .lead { margin-inline: auto; }
.hero--plate .hero__mark {
  display: block;
  width: 100px;
  height: 100px;
  padding: 12px;
  object-fit: contain;
  background: #fff;
  border-radius: 26px;
  margin: 0 auto var(--s3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 18px 34px -12px rgba(0, 0, 0, .6);
}
.hero--plate .btn-row { justify-content: center; }
@media (min-width: 700px) {
  .hero--plate .hero__mark { width: 120px; height: 120px; }
}

.hero__inner { position: relative; max-width: 720px; }
.hero h1 {
  color: #fff;
  font-size: var(--fs-hero);
  letter-spacing: -.024em;
  margin-bottom: var(--s2);
}
.hero .lead { color: rgba(255, 255, 255, .86); max-width: 56ch; }
.hero__actions { margin-top: var(--s4); }
.hero--plate .hero__actions { justify-content: center; }

/* --- 10. Cards & venture grid -------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--s4);
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease),
              border-color var(--dur-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line); }
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--body); }
.card__foot { margin-top: auto; padding-top: var(--s3); }

/* Venture card — the mark is a white tile on a pale plate. The artwork is the
   bare logo (its badge rings and dark box were removed), so the tile carries
   the depth and every company reads at the same weight. */
.venture { padding: 0; overflow: hidden; position: relative; }
.venture__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4) var(--s3);
  min-height: 176px;
  background-color: #e8efef;              /* opaque base under the gradient   */
  background-image: linear-gradient(180deg, #edf3f3 0%, #e1eaea 100%);
  border-bottom: 1px solid var(--hairline);
}
.venture__media img {
  width: 104px;
  height: 104px;
  max-width: 100%;
  padding: 12px;
  object-fit: contain;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 1px 0 rgba(16, 26, 31, .06), 0 16px 28px -16px rgba(16, 40, 46, .45);
  transition: transform .35s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .venture:hover .venture__media img { transform: scale(1.04); }
}
.venture__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s3);
  background: var(--panel);
}
.venture__kicker {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--teal-ink);
}
.venture__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.venture__kicker + .venture__title { margin-top: 0; }
.venture__body p { font-size: 1rem; margin-bottom: 10px; }
.venture__body .card__foot { padding-top: var(--s2); }
.card__foot .link-arrow { min-height: 44px; }

/* Wide venture card: the mark plate beside the copy on desktop. */
.venture__media img.venture__mark--round {
  width: 112px;
  height: 112px;
  padding: 0;
  object-fit: cover;
  background: #0d0e10;                    /* the InPipe badge is its own black disc */
  border-radius: 50%;
  box-shadow: 0 0 0 5px #fff, 0 16px 28px -14px rgba(16, 40, 46, .5);
}
@media (min-width: 900px) {
  .venture--wide { flex-direction: row; }
  .venture--wide .venture__media { flex: 0 0 34%; min-height: 0; border-bottom: 0; border-inline-end: 1px solid var(--hairline); }
  .venture--wide .venture__body { justify-content: center; padding: var(--s4); }
  .venture--wide .venture__body p { max-width: 60ch; }
}

.feature { padding: var(--s3) 0; border-top: 1px solid var(--hairline); }
.feature h3 { font-size: var(--fs-h4); margin-bottom: 6px; }

/* Value cell: drop the tinted left bar (a lazy accent); use a hairline and
   the accent as a small mark instead. */
.value {
  position: relative;
  padding: var(--s3) 0 0;
  border-top: 1px solid var(--line);
  background: transparent;
}
.value::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; top: -1px;
  width: 34px; height: 2px;
  background: var(--teal);
}
.value h3 { font-size: var(--fs-h4); margin-bottom: 4px; }
.section--dark .value { border-top-color: var(--hairline-dark); }

.panel {
  padding: var(--s4);
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.person { text-align: start; }
.person__media { overflow: hidden; border-radius: var(--radius-lg); background: var(--panel-2); }
.person__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  filter: saturate(.94) contrast(1.02);
  transition: transform .5s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .person:hover .person__media img { transform: scale(1.03); }
}
.person__body { padding-top: var(--s2); }
.person__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 2px;
}
.person__role {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin: 0 0 10px;
}
.section--dark .person__role { color: var(--teal-bright); }
.person__note { color: var(--body); }
.section--dark .person__note { color: rgba(255, 255, 255, .82); }

.advisor {
  display: flex;
  gap: var(--s2);
  align-items: center;
  min-height: 44px;
  padding: var(--s2);
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  color: inherit;
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease),
              border-color var(--dur-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .advisor:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line); color: inherit; }
}
.advisor img { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.advisor__name { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 1rem; color: var(--ink); margin: 0 0 2px; }
.advisor__role { display: block; font-size: .9375rem; color: var(--muted); margin: 0; }
@media (hover: hover) and (pointer: fine) {
  .advisor:hover .advisor__name { color: var(--teal-ink); }
}

/* Partner team: a compact grid of round portraits. Grayscale is applied here
   so every source photograph, whatever its colour, sits in one family. */
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s2); }
.teammate { text-align: center; }
.teammate img {
  width: 84px;
  height: 84px;
  margin: 0 auto var(--s2);
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px var(--line);
}
.teammate__name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; margin: 0 0 2px; }
.teammate__role { margin: 0 auto; max-width: 22ch; font-size: .875rem; line-height: 1.4; color: var(--muted); }
@media (min-width: 640px) {
  .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5) var(--s3); }
  .teammate img { width: 104px; height: 104px; }
}
/* A three-person group should not stretch across four columns; it stays
   centred so the trio keeps the same portrait size as larger grids. */
.team-grid--trio { max-width: 46rem; margin-inline: auto; }
@media (min-width: 640px) {
  .team-grid--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Advisors with no portrait in the source: named, not given a stock face. */
.team-advisors { max-width: 46rem; margin: var(--s5) auto 0; text-align: center; }
.team-advisors__title {
  font-family: var(--font-sans); font-size: .8125rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 var(--s3);
}
.team-advisors__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.team-advisors__list li { display: grid; gap: 2px; }
.team-advisors__list strong { font-size: .9375rem; font-weight: 600; }
.team-advisors__list span { font-size: .875rem; line-height: 1.4; color: var(--muted); }

/* --- 11. Stats / credential band ----------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat { padding: var(--s4) var(--s3); background: var(--panel); text-align: center; }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
  margin-bottom: 10px;
}
.stat__value sup { font-size: .5em; vertical-align: super; margin-inline-start: 1px; }
.stat__label { font-size: .9375rem; color: var(--body); margin: 0 auto; }

/* On a dark band: hairline-divided cells rather than floating cards. */
.section--dark .stats { background: var(--hairline-dark); border-color: var(--hairline-dark); }
.section--dark .stat { background: transparent; }
.section--dark .stat__value { color: #fff; }
.section--dark .stat__label { color: rgba(255, 255, 255, .78); }

.cred-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: var(--s5);
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.cred { background: var(--panel); padding: clamp(20px, 3.4vw, 30px); }
.cred__kicker {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.cred__value {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.2vw, 2rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
}
.cred__note { margin: 0; font-size: .9375rem; color: var(--body); max-width: 42ch; }

/* --- 12. Steps ----------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--s2); }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--s2);
  align-items: start;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--hairline);
}
.step:last-child { border-bottom: 0; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--teal-ink);
}
.step h3 { font-size: var(--fs-h4); margin-bottom: 4px; }
.step p { font-size: 1rem; margin: 0; }
.step > div { min-width: 0; }

/* --- 13. Next-venture / continuity cue ----------------------------------- */
.next__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
}
.next__inner h2 { margin-bottom: 6px; }
.next__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* --- 14. CTA band + footer ----------------------------------------------- */
.cta-band { padding-block: 0 var(--pace); }
.cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s5) var(--s4);
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-panel);
}
.cta-band h2 { margin: 0 0 6px; font-size: clamp(1.5rem, 3vw, 2rem); }
.cta-band p { margin: 0; color: var(--body); max-width: 46ch; }
.cta-band__actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cta-band__alt {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-size: .9375rem;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .cta-band__alt:hover { color: var(--teal-ink); text-decoration-color: currentColor; }
}

.footer { background: var(--dark-2); color: rgba(255, 255, 255, .72); font-size: 1rem; }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  padding-block: var(--s6) var(--s5);
}
.footer__brand img { height: 44px; width: auto; margin-bottom: var(--s2); }
.footer__brand p { font-size: .9375rem; max-width: 36ch; }
/* These are real h2s for the document outline, but visually they are small
   uppercase labels. The class carries the look so the level can be honest. */
.footer__heading {
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--s2);
}
.footer__links { display: grid; gap: 2px; }
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255, 255, 255, .74);
  transition: color var(--dur-ui) var(--ease);
}
.footer__contact { display: grid; gap: 10px; }
.footer__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255, 255, 255, .84);
  transition: color var(--dur-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .footer__links a:hover, .footer__contact a:hover, .footer__bottom a:hover { color: var(--teal-bright); }
}
.footer__label {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  margin-bottom: 2px;
}
.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-block: var(--s3);
  border-top: 1px solid var(--hairline-dark);
  font-size: .9375rem;
  color: rgba(255, 255, 255, .64);
}
.footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, .70); }
.footer__bottom p { margin: 0; }

/* --- 15. Contact --------------------------------------------------------- */
.contact-card { display: grid; gap: var(--s3); }
.contact-row {
  display: grid;
  gap: 4px;
  min-height: 44px;
  padding: var(--s3);
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease),
              transform var(--dur-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .contact-row:hover { border-color: var(--line); box-shadow: var(--shadow-md); transform: translateY(-2px); }
}
.contact-row__label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-row__value { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  a.contact-row:hover .contact-row__value { color: var(--teal-ink); }
}
.contact-row__note { font-size: .9375rem; color: var(--body); margin: 0; }

/* --- 16. Media ----------------------------------------------------------- */
.figure { margin: 0; }
/* One photographic treatment across mismatched sources keeps the page coherent. */
.figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  filter: saturate(.94) contrast(1.02);
}
.figure--crop img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 42%; }
.figure--plate {
  background: var(--panel);       /* stays light: some marks have no alpha    */
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--s4);
}
.figure--plate img { filter: none; }
.figure figcaption { margin-top: 12px; font-size: .9375rem; color: var(--muted); }
.figure__mark { display: block; width: 160px; height: auto; margin-inline: auto; }
.figure img.figure__mark { width: 160px; }
.figure__mark--lg { width: 200px; }

/* Homepage image dock removed: the two portraits carried no information the
   copy did not already state. The section is an editorial split instead. */

/* --- 17. Reveal on scroll (progressive enhancement) ---------------------- */
/* One orchestrated entrance, opacity + transform only, capped stagger. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: .06s; }
.js .reveal[data-delay="2"] { transition-delay: .12s; }
.js .reveal[data-delay="3"] { transition-delay: .18s; }

/* Venture status marker: a venture that is not live yet says so plainly, in the
   site's own type and accent, so no page implies a shipping product. */
.status-note {
  display: inline-block;
  margin: 0 0 var(--s2);
  padding: 9px 16px;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teal-ink);
  background: rgba(42, 157, 153, .12);
  border: 1px solid rgba(42, 157, 153, .34);
  border-radius: 999px;
}
/* On the dark grounds the marker switches to the bright accent and a lighter
   rule, matching the eyebrow treatment already used there. */
.hero .status-note, .section--dark .status-note {
  color: var(--teal-bright);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .28);
}
/* In a card body the paragraph rule (`.venture__body p`) outranks a bare class,
   and the flex column would stretch the pill edge to edge; restate the size and
   let the pill hug its own text. */
.venture__body .status-note {
  font-size: var(--fs-label);
  align-self: flex-start;
  margin-bottom: 10px;
}

/* --- 18. Responsive scale-up --------------------------------------------- */
@media (min-width: 640px) {
  :root { --gutter: 24px; }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cred-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
  .cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .cta-band__actions { align-items: center; }
  .next__inner { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .venture__media { min-height: 200px; }
  .venture__media img { width: 112px; height: 112px; }
  .venture__media img.venture__mark--round { width: 124px; height: 124px; }
}

@media (min-width: 768px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
  .split--reverse > *:first-child { order: 2; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .step { grid-template-columns: 56px minmax(0, 1fr); }
}

/* --- 19. Motion + print -------------------------------------------------- */
/* Reduced motion keeps the crossfade (it aids comprehension) and drops the
   movement, rather than zeroing every transition. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .card, .btn, .contact-row, .advisor, .person__media img,
  .venture__media img, .link-arrow::after, .topbar__toggle span { transition: none !important; }
  .topbar { transition: none !important; }
  .drop__caret, .drop__menu { transition: none !important; }
  .btn:active { transform: none; }
}

@media print {
  .topbar, .cta-band, .footer__bottom { display: none; }
  body { background: #fff; color: #000; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* --- 19. Compact mobile ---------------------------------------------------
   Below 640px a page is read one screen at a time, so the whole scale tightens
   together: the spacing tokens, the type ladder, and the components that were
   sized in absolute pixels. Nothing is removed; the same content simply takes
   fewer screens. Body text stays at 16px and every target keeps its 44px. */
@media (max-width: 639.98px) {
  :root {
    --pace: 40px;
    --s3: 20px; --s4: 26px; --s5: 34px; --s6: 44px; --s7: 56px;
    --fs-body: 1rem;
    --fs-lead: 1.0625rem;
    --fs-h3: 1.1875rem;
    --fs-h2: 1.5rem;
    --fs-h1: 1.875rem;
    --fs-hero: 2.125rem;
    --lh-body: 1.55;
  }

  p:not(.eyebrow) + h2, p:not(.eyebrow) + h3,
  ul + h2, ul + h3, ol + h2, ol + h3,
  .grid + h2, .figure + h3, .stats + h2 { margin-top: 1.2em; }
  .checklist { gap: 8px; }

  /* Heroes: no viewport-height floor, less air above and below the copy. */
  .hero, .hero--home { min-height: 0; padding-block: var(--s5); }
  .hero--photo { padding-bottom: calc(var(--s5) + var(--s6)); }
  .hero--plate { padding-block: 40px; }
  .hero--plate .hero__mark { width: 76px; height: 76px; padding: 9px; border-radius: 20px; margin-bottom: var(--s2); }
  .hero__actions { margin-top: var(--s3); }

  /* Cards and panels */
  .card, .panel { padding: var(--s3); }
  .venture { padding: 0; }
  .venture__media { min-height: 136px; padding: var(--s3); }
  .venture__media img { width: 88px; height: 88px; padding: 10px; border-radius: 20px; }
  .venture__media img.venture__mark--round { width: 88px; height: 88px; padding: 0; }
  .step { padding: var(--s2) 0; }
  .contact-row { padding: var(--s2) var(--s3); }
  .contact-row__value { font-size: 1.25rem; }

  /* Portraits and decorative marks: a square crop instead of a tall portrait,
     and the round marks capped so they stop filling the whole screen. */
  .person__media img { aspect-ratio: 1 / 1; }
  .split > .figure:not(:has(img[src*="team-"])) { max-width: 230px; margin-inline: auto; }
  .split > .figure:has(img[src*="team-"]) { max-width: 320px; margin-inline: auto; }
  .figure img[src*="team-"] { aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 24%; }

  /* Figures read better two across than four stacked. */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: var(--s3) var(--s2); }
  .stat__value { font-size: 1.75rem; }
  .stat__label { font-size: .875rem; }

  /* Call-to-action band and footer */
  .cta-band__inner { padding: var(--s4) var(--s3); }
  .cta-band h2 { font-size: 1.375rem; }
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s4) var(--s3);
    padding-block: var(--s5) var(--s4);
  }
  .footer__brand, .footer__top > div:last-child { grid-column: 1 / -1; }
}

/* Company themes. A venture keeps the NexGen system (type, spacing, cards,
   layout, the dark ground) and changes only the accent, so it reads as its own
   company inside the same family. The nav and footer stay NexGen teal. */
.theme-saby {
  --teal: #9d86f5;          /* fills under dark labels  */
  --teal-bright: #b9a8ff;   /* accent on dark grounds   */
  --teal-ink: #4a3aa8;      /* accent text on paper     */
}
.theme-dari {
  --teal: #4fb0ea;
  --teal-bright: #7cc6f5;
  --teal-ink: #0b5d94;
}
/* Esaal's mark is a cyan disc, so the accent leans to aqua rather than Dari's
   sky blue: a clear 13-degree step in hue keeps the two siblings apart on
   sight. */
.theme-esaal {
  --teal: #16a8c6;
  --teal-bright: #6fd8f2;
  --teal-ink: #08647e;
}
/* Trust Flow's own mark is a green-teal only four degrees off the NexGen accent,
   which would read as a mistake rather than a sibling. Pushing it into green at
   the same lightness and saturation keeps the family coherent while giving the
   company its own colour: 25 degrees clear of NexGen, 37 from Esaal. */
.theme-trust-flow {
  --teal: #2a9d69;
  --teal-bright: #5fd39f;
  --teal-ink: #0a623a;
}

/* Venture heroes: the company's logo tile sits above the title, left-aligned. */
.hero--venture .hero__mark {
  display: block;
  width: 88px;
  height: 88px;
  padding: 11px;
  object-fit: contain;
  background: #fff;
  border-radius: 22px;
  margin: 0 0 var(--s3);
  box-shadow: 0 0 0 2px var(--teal), 0 16px 30px -12px rgba(0, 0, 0, .55);
}
.hero--saby .hero__media img { object-position: 86% 50%; }
.hero--dari .hero__media img { object-position: 92% 50%; }
/* Esaal's photograph carries its detail in the right three quarters; this pan
   keeps that while leaving the quieter left edge under the scrim. */
.hero--esaal .hero__media img { object-position: 88% 50%; }
/* Trust Flow's frame carries its subject in the right 43-99%; the narrow band
   pans that far right so the whole subject survives the 4:3 crop. */
.hero--trust-flow .hero__media img { object-position: 100% 50%; }
@media (max-width: 639.98px) {
  .hero--venture .hero__mark { width: 72px; height: 72px; padding: 9px; border-radius: 18px; margin-bottom: var(--s2); }
}

/* --- 20. Photo heroes on every screen --------------------------------------
   One rule for the whole site: a photograph is never hidden and never sits
   behind the copy on a narrow screen. Below 1100px the copy takes the dark
   ground on top and the photograph runs full width as a band directly under
   it, blending up out of the ground and down into the page. On wide screens
   the homepage splits: copy on the ground, photograph open on the right. */
@media (max-width: 1099.98px) {
  .hero.hero--photo {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 0;
  }
  .hero.hero--photo .hero__inner {
    order: 1;
    width: 100%;
    max-width: none;
    padding-block: var(--s5) var(--s4);
  }
  .hero.hero--photo .hero__inner > * { max-width: 42rem; }
  .hero.hero--photo h1 { font-size: clamp(2.125rem, 3.4vw + 1rem, 3.25rem); }
  .hero.hero--photo .hero__media {
    order: 2;
    position: relative;
    inset: auto;
    z-index: 0;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 460px;
  }
  .hero__media picture { display: contents; }
  .hero.hero--inpipe .hero__media img { object-position: 50% 62%; }
  /* The abstract backdrop is a mood, not a subject: a slimmer band, darkened to
     the same depth the wide hero gets from its scrim. */
  .hero.hero--abstract .hero__media { aspect-ratio: 2 / 1; }
  .hero.hero--abstract .hero__media img { filter: brightness(.5) contrast(1.08); }
  /* Top edge of the band dissolves into the copy's ground. */
  .hero.hero--photo .hero__media::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 42%;
    z-index: 1;
    background: linear-gradient(180deg, var(--dark) 0%, rgba(15, 26, 32, 0) 100%);
  }
  /* Bottom edge hands over to the page: the same value ramp as the wide hero. */
  .hero.hero--photo::after,
  .hero.hero--photo.hero--bright::after,
  .hero.hero--photo.hero--inpipe::after {
    background: linear-gradient(180deg, rgba(244, 246, 246, 0) 0%, rgba(244, 246, 246, 1) 100%) bottom / 100% var(--s6) no-repeat;
  }
}
@media (max-width: 639.98px) {
  .hero.hero--photo .hero__inner { padding-block: var(--s4) var(--s3); }
  .hero.hero--photo .hero__media { aspect-ratio: 4 / 3; }
  .hero.hero--abstract .hero__media { aspect-ratio: 2 / 1; }
}

@media (min-width: 1100px) {
  .hero--split .hero__media { inset: 0 0 0 auto; width: 66%; }
  /* A breath of the company accent rising from the lower left of the ground. */
  .hero--venture::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(50% 58% at 4% 76%, color-mix(in srgb, var(--teal) 20%, transparent), transparent 72%);
  }
  .hero--split .hero__media img { object-position: 62% 50%; }
  .hero--split .hero__inner { max-width: 37rem; margin-left: max(0px, calc((100% - var(--container)) / 2)); margin-right: auto; }
  .hero--split h1 { font-size: clamp(2.5rem, 2.6vw + 1.1rem, 3.5rem); }
  .hero--split .lead { font-size: 1.125rem; max-width: 34rem; }
  .hero--photo.hero--split::after {
    background:
      linear-gradient(180deg, rgba(244, 246, 246, 0) 0%, rgba(244, 246, 246, 1) 100%) bottom / 100% var(--s7) no-repeat,
      linear-gradient(180deg, rgba(10, 18, 22, .35) 0%, rgba(10, 18, 22, 0) 28%),
      linear-gradient(90deg, var(--dark) 0%, var(--dark) 34%, rgba(15, 26, 32, .55) 44%, rgba(15, 26, 32, 0) 62%);
  }
}

/* --- 21. Focus areas + chips ---------------------------------------------
   Companies sit under the three areas NexGen works in. A pillar is a heading
   column beside its company cards; on narrow screens they stack. */
.pillars { display: grid; }
.pillar {
  display: grid;
  gap: var(--s4);
  padding-block: var(--s5);
  border-top: 1px solid var(--hairline);
}
.pillar:first-child { border-top: 0; padding-top: 0; }
.pillar__num {
  margin: 0 0 var(--s1);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--teal-ink);
}
.pillar__title { margin: 0 0 10px; font-size: var(--fs-h3); }
.pillar__head p:last-child { margin: 0; color: var(--body); max-width: 34ch; }
.pillar__cards { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 640px) {
  .pillar__cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
@media (min-width: 1024px) {
  .pillar { grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: var(--s6); }
  .pillar__head { position: sticky; top: calc(var(--topbar-h) + 24px); align-self: start; }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: var(--s3) 0 0;
  padding: 0;
  list-style: none;
}
.chips--center { justify-content: center; }
.chips li {
  padding: 10px 18px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.card__foot--links { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* --- 22. Arabic / RTL ------------------------------------------------------
   One direction-keyed block instead of a second stylesheet, so the Arabic
   locale can never drift away from the English one structurally.

   Three things Arabic needs that Latin does not:
   1. The two-role font system mapped to Arabic faces (serif display over
      geometric sans), mirroring Newsreader over Instrument Sans.
   2. letter-spacing forced to 0. Tracking is a Latin device; on Arabic it
      severs the joins between letters and the word stops being a word.
   3. The handful of genuinely directional details (the arrow glyph, the
      underline's origin, which side the hero photograph sits on). */
[dir="rtl"] {
  --font-display: "Amiri", "Noto Naskh Arabic", "Times New Roman", serif;
  --font-sans: "IBM Plex Sans Arabic", "Instrument Sans", "Noto Sans Arabic",
    "Helvetica Neue", Arial, sans-serif;
}

/* Tracking off, everywhere. The Latin faces listed as a fallback still render
   correctly at zero tracking. */
[dir="rtl"] *,
[dir="rtl"] *::before,
[dir="rtl"] *::after { letter-spacing: 0 !important; }

/* Arabic has no case, so an uppercase transform is a no-op — but leaving the
   declaration in place makes the component look "wrong" to anyone reading the
   CSS later. Reset it so the intent is explicit. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .footer__heading,
[dir="rtl"] .footer__label,
[dir="rtl"] .venture__kicker,
[dir="rtl"] .person__role,
[dir="rtl"] .contact-row__label,
[dir="rtl"] .status-note,
[dir="rtl"] .cred__kicker,
[dir="rtl"] .team-advisors__title,
[dir="rtl"] .link-arrow { text-transform: none; }

/* The brand wordmark is Latin artwork, not translated copy: keep it in the
   Latin face even on Arabic pages, so the logo looks identical on both. */
[dir="rtl"] .topbar__brand-name,
[dir="rtl"] .topbar__brand-tag { font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; }

/* Arabic ascenders and descenders sit deeper than Latin ones, and Naskh reads
   small at the same nominal size — so the Arabic lines get a little more room.
   Amiri's x-height ratio to Newsreader is 0.984, so the display sizes match at
   their face value rather than needing to be scaled up. */
[dir="rtl"] body { line-height: 1.75; }
[dir="rtl"] .lead { line-height: 1.72; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { line-height: 1.35; }
[dir="rtl"] .hero h1 { line-height: 1.28; }
[dir="rtl"] .stat__value { line-height: 1.2; }
[dir="rtl"] .teammate__role { line-height: 1.6; }

/* The disclosure arrow, the link arrow and the nav underline all point in a
   reading direction. */
[dir="rtl"] .link-arrow::after { content: "\2190"; }
[dir="rtl"] .link-arrow:hover::after { transform: translateX(-5px); }
[dir="rtl"] .topbar__menu a::after { transform-origin: right; }

/* The mobile drawer is anchored to one edge; mirror where it parks itself.
   Scoped to the drawer's own breakpoint: above it the nav is position:static
   (a normal row), and an unscoped transform would slide the whole desktop nav
   off-screen. */
@media (max-width: 939.98px) {
  [dir="rtl"] .topbar__nav { transform: translateX(-102%); }
  [dir="rtl"] .nav-open .topbar__nav { transform: none; }
}

/* Arabic numerals in the counters would fight the western digits used in the
   copy, so the step counter stays as it is. The step gutter moves to the other
   side automatically (grid follows the document direction). */
[dir="rtl"] .step::before { font-family: "IBM Plex Sans Arabic", "Instrument Sans", sans-serif; }

/* Amiri is a Naskh face: at the small label sizes its hairlines thin out, so
   the display face is not used below the heading levels. */
[dir="rtl"] .figure figcaption,
[dir="rtl"] .cred__note { font-family: var(--font-sans); }