/* ==========================================================================
   metavision.ae
   Static. No JavaScript. No third-party requests. No cookies.
   ========================================================================== */

/* --- Typeface: Inter, self-hosted so the page makes no third-party requests -- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/inter-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: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  --bg:        #fafaf8;
  --ink:       #14140f;
  --ink-muted: #5c5c55;
  --rule:      #e3e3dc;
  --rule-soft: #eeeee8;

  /* MetaVision green. Vivid on dark, where it carries text at 13:1.
     On paper it is 1.37:1, so there it marks and underlines but never sets
     type; --accent-ink is the same hue darkened until it can. */
  --accent:     #27f695;
  --accent-ink: #0e804a;

  /* One fluid type scale, 375px -> 1440px. Every size on the page is a step on
     it. Before this there were seven distinct sizes between 13 and 17px, which
     reads as noise rather than hierarchy. Roles sharing a step are separated by
     weight and colour instead, which is the stronger signal anyway. */
  --fs-xs:      clamp(0.75rem, 0.717rem + 0.1408vw, 0.8438rem);
  --fs-sm:      clamp(0.8438rem, 0.8107rem + 0.1408vw, 0.9375rem);
  --fs-base:    clamp(1rem, 0.978rem + 0.0939vw, 1.062rem);
  --fs-md:      clamp(1.125rem, 1.092rem + 0.1408vw, 1.219rem);
  --fs-lg:      clamp(1.375rem, 1.199rem + 0.7512vw, 1.875rem);
  --fs-xl:      clamp(1.625rem, 1.361rem + 1.127vw, 2.75rem);
  --fs-display: clamp(2.125rem, 1.597rem + 2.254vw, 4.5rem);

  --measure: 70ch;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  /* Fluid: fills a large monitor without stranding the page in a narrow
     column, and still keeps an outer margin at laptop widths. The 1180px floor
     only caps, so narrow screens are unaffected and fall back to --gutter. */
  --page: clamp(1180px, 88vw, 1500px);
  --label-col: clamp(11rem, 15vw, 17rem);
  --col-gap: clamp(2rem, 5vw, 5.5rem);
  /* Adjacent sections each contribute this, so the gap between two sections is
     twice the value. Kept modest because there is no longer a rule between them
     to breathe around. */
  --section-pad: clamp(2rem, 4vw, 4.25rem);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue",
    Arial, sans-serif;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent-ink: #27f695;
    --bg:        #121211;
    --ink:       #f0f0ea;
    --ink-muted: #9a9a92;
    --rule:      #2b2b28;
    --rule-soft: #212120;
  }
}
:root[data-theme="dark"] {
  --accent-ink: #27f695;
  --bg:        #121211;
  --ink:       #f0f0ea;
  --ink-muted: #9a9a92;
  --rule:      #2b2b28;
  --rule-soft: #212120;
}

/* --- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -0.011em;
  font-feature-settings: "cv05" 1; /* single-storey l, clearer at small sizes */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.page {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Links -------------------------------------------------------------- */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: none;
}
a:hover {
  text-decoration-color: var(--accent-ink);
  text-decoration-thickness: 2px;
}
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
  text-decoration-color: currentColor;
}

/* Outbound marker. Decorative: the accessible warning is in .sr-only text. */
.ext::after {
  content: "\2197";
  display: inline-block;
  margin-left: 0.28em;
  font-size: 0.82em;
  line-height: 1;
  color: var(--ink-muted);
  text-decoration: none;
  vertical-align: 0.06em;
}
a:hover .ext::after { color: var(--accent-ink); }
a:focus-visible .ext::after { color: inherit; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  transform: translateY(-120%);
  z-index: 10;
  background: var(--bg);
  color: var(--ink);
  padding: 0.7rem 1rem;
  border: 1px solid var(--ink);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.skip-link:focus { transform: translateY(0.75rem); }

/* --- Header ------------------------------------------------------------- */
.masthead {
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}
.masthead__mark {
  display: inline-block;
  width: clamp(38px, 4vw, 58px);
  color: var(--ink);
}
.masthead__mark svg { display: block; width: 100%; height: auto; }
a.masthead__mark { text-decoration: none; }
a.masthead__mark:hover { opacity: 0.65; }
a.masthead__mark:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }

/* --- Section shell ------------------------------------------------------ */
.section { padding-block: var(--section-pad); }
.section--open { padding-top: clamp(1.5rem, 4vw, 3rem); }

.block {
  display: grid;
  grid-template-columns: minmax(0, var(--label-col)) minmax(0, 1fr);
  gap: 0 var(--col-gap);
  align-items: start;
}
.block__label {
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 0.55rem;
}
.block__label::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 3px;
  margin-bottom: 1.1rem;
  background: var(--accent);
}
.block__body { min-width: 0; }

/* One block, the stats row, runs the full width: four figures do not fit in
   the narrow right-hand column without breaking to three lines. */
.block--stack { grid-template-columns: minmax(0, 1fr); gap: 0; }
.block--stack .block__label { padding-top: 0; margin-bottom: clamp(2rem, 4vw, 3rem); }

@media (max-width: 880px) {
  .block { grid-template-columns: 1fr; gap: 1.25rem; }
  .block__label { padding-top: 0; }
}

.intro {
  font-size: var(--fs-md);
  color: var(--ink-muted);
  max-width: var(--measure);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* --- Opening ------------------------------------------------------------ */
.opening__name {
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 0.87;
  letter-spacing: -0.048em;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.opening__lead {
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.026em;
  max-width: 22ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.opening__text {
  font-size: var(--fs-md);
  line-height: 1.58;
  color: var(--ink-muted);
  max-width: 58ch;
}

/* --- At a glance -------------------------------------------------------- */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2.25rem);
}
.facts > li { list-style: none; }
.fact { display: flex; flex-direction: column; }
.fact__figure {
  display: flex;
  align-items: flex-end;       /* the inner span keeps this from splitting text */
  min-height: 2.3em;           /* two lines, so every label starts level */
  font-size: var(--fs-xl);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
  margin-bottom: 0.95rem;
}
/* Inter's hyphen has generous sidebearings that only show at display size. */
.hy { letter-spacing: -0.055em; margin-inline: -0.05em; }

.fact__label {
  font-size: var(--fs-xs);
  line-height: 1.45;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

@media (max-width: 880px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  /* A single column of four is dead height; the figure's two-line minimum is
     only there to give the labels a shared baseline, which one column has by
     definition. */
  .facts { grid-template-columns: 1fr; gap: 1.4rem 0; }
  .fact__figure { min-height: 0; margin-bottom: 0.5rem; }

}

/* --- Register: the shared row rhythm for portfolio, records, press ------- */
.register > li { border-top: 1px solid var(--rule); }

.entry {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0.35rem var(--col-gap);
  padding-block: clamp(1.15rem, 2vw, 1.55rem);
  align-items: baseline;
}
.entry__name {
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: -0.016em;
}
.entry__desc {
  color: var(--ink-muted);
  max-width: var(--measure);
  font-size: var(--fs-base);
  line-height: 1.6;
}
.entry__note {
  grid-column: 2;
  order: 3;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  letter-spacing: 0.005em;
  margin-top: 0.15rem;
}

@media (max-width: 880px) {
  .entry { grid-template-columns: 1fr; row-gap: 0.55rem; }
  .entry__note { grid-column: 1; }
  .entry--flip { row-gap: 0.35rem; }
}

.entry--solo { grid-template-columns: minmax(0, 1fr); }

/* Records + press rows: label left, link right (mirrors .entry, reversed) */
.entry--flip .entry__name { order: 2; }
.entry--flip .entry__meta { order: 1; }
.entry__meta {
  font-size: var(--fs-xs);
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.5;
}
.entry__meta--proper {
  text-transform: none;
  font-size: var(--fs-sm);
  letter-spacing: -0.005em;
}

.entry__title {
  font-size: var(--fs-base);
  font-weight: 400;
  letter-spacing: -0.014em;
  max-width: var(--measure);
}

/* --- Independent records: logo cards ------------------------------------ */
/* The four marks are PNG alpha masks, not colour images, so they render in the
   page's own ink and follow the light/dark theme. Four different brand palettes
   side by side would have fought the page. */
.records {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}
.record {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(6.5rem, 10vw, 9rem);
  padding: clamp(1rem, 2vw, 1.75rem);
  border: 1px solid var(--rule);
  text-decoration: none;
}
.record:hover { border-color: var(--ink-muted); }
.record:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.record__logo {
  width: 100%;
  max-width: 12.5rem;
  max-height: 2.9rem;
  aspect-ratio: var(--ar);
  background-color: var(--ink-muted);
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
}
.record:hover .record__logo,
.record:focus-visible .record__logo { background-color: var(--ink); }

.record--cbinsights { --ar: 8.81; --src: url("assets/db-cbinsights.png"); }
.record--crunchbase { --ar: 7.03; --src: url("assets/db-crunchbase.png"); }
.record--pitchbook  { --ar: 6.58; --src: url("assets/db-pitchbook.png"); }
.record--dealroom   { --ar: 4.16; --src: url("assets/db-dealroom.png"); }

@media (max-width: 880px) { .records { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .records { grid-template-columns: minmax(0, 1fr); } }

/* --- Portfolio logos ----------------------------------------------------- */
/* Same idea as the record cards: PNG alpha masks painted in the page's ink, so
   ten unrelated brand palettes become one quiet mark under each name. Each
   sits in the same 9 x 2.6rem box and is contained within it: a wide wordmark
   fills the width, a stacked or square lockup fills the height. Equalising on
   height alone made the stacked marks illegible next to the wide ones. */
.entry__logo {
  display: block;
  width: 9rem;
  height: 2.6rem;
  margin-top: 0.7rem;
  background-color: var(--ink-muted);
  -webkit-mask: var(--src) left center / contain no-repeat;
  mask: var(--src) left center / contain no-repeat;
}
.entry__logo--cathedral   { --ar: 2.43; --src: url("assets/pf-cathedral.png"); }
.entry__logo--cognitive3d { --ar: 1.49; --src: url("assets/pf-cognitive3d.png"); }
.entry__logo--exhuman     { --ar: 0.94; --src: url("assets/pf-exhuman.png"); }
.entry__logo--fasttravel  { --ar: 2.41; --src: url("assets/pf-fasttravel.png"); }
.entry__logo--immertec    { --ar: 5.15; --src: url("assets/pf-immertec.png"); }
.entry__logo--pudgy       { --ar: 1.21; --src: url("assets/pf-pudgy.png"); }
.entry__logo--sinn        { --ar: 0.70; --src: url("assets/pf-sinn.png"); }
.entry__logo--uthana      { --ar: 4.75; --src: url("assets/pf-uthana.svg"); }
.entry__logo--xrhealth    { --ar: 6.27; --src: url("assets/pf-xrhealth.png"); }
.entry__logo--zibra       { --ar: 4.68; --src: url("assets/pf-zibra.png"); }

/* --- Press subheads ----------------------------------------------------- */
.press__group + .press__group { margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.press__heading {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.9rem;
}

/* --- Company information ------------------------------------------------ */
.entities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) var(--col-gap);
}
@media (max-width: 720px) { .entities { grid-template-columns: 1fr; } }

.entity { padding-top: 0; }
.entity__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.65rem;
}
.entity__address {
  color: var(--ink-muted);
  font-size: var(--fs-base);
  line-height: 1.72;
  font-style: normal;
}

.standing {
  margin-top: clamp(2.75rem, 5vw, 3.75rem);
  font-size: var(--fs-md);
  line-height: 1.6;
  max-width: 64ch;
  color: var(--ink);
}

/* --- Footer ------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(3rem, 6vw, 4.5rem);
  font-size: var(--fs-xs);
  line-height: 1.85;
  letter-spacing: 0.045em;
  color: var(--ink-muted);
}
.footer__legal { text-transform: uppercase; }
.footer a { text-decoration-color: var(--ink-muted); }

/* --- Privacy page ------------------------------------------------------- */
.prose { max-width: 62ch; }
.prose h1 {
  font-size: var(--fs-xl);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
.prose p { margin-bottom: 1.5rem; color: var(--ink-muted); }
.prose p:last-child { margin-bottom: 0; }

/* --- Print -------------------------------------------------------------- */
@media print {
  .entry__logo { background-color: #000; }
  :root { --bg: #fff; --ink: #000; --ink-muted: #333; --rule: #ccc; --rule-soft: #ddd; }
  .skip-link { display: none; }
  .section { break-inside: avoid; }
  a { text-decoration: none; }
  .ext::after { content: ""; }
}

/* ==========================================================================
   Hero variant (index-hero.html only)
   Night plate, full viewport. Logo and tagline across the top, the copy centred
   in the left column, and the stats as a glass card at the foot. The plate is
   already near black behind the copy, so the scrim is light and directional;
   the card supplies its own contrast for the figures.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #07090b;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: #fff;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(5, 7, 9, 0.62) 0%,
    rgba(5, 7, 9, 0.44) 40%,
    rgba(5, 7, 9, 0.10) 70%,
    rgba(5, 7, 9, 0.00) 100%
  );
}
.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2.25rem);
}

.hero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}
.hero__logo { display: block; width: clamp(150px, 13.5vw, 270px); color: #fff; }
.hero__logo svg { display: block; width: 100%; height: auto; }

.hero__content {
  margin-block: auto;
  padding-block: clamp(1.25rem, 2.5vh, 2rem);
}
.hero__headline {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.03em;
  /* Measured at weight 600 / -0.03em: "A private investment" is 8.75em and
     "A private investment company" is 12.94em. A cap between the two breaks
     after "investment" and nowhere else, at every width, since it scales with
     em; "company in Dubai." (7.83em) then holds the second line. */
  max-width: 9.6em;
  margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
}
.hero__accent { color: var(--accent); }
.hero__text {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
  max-width: 44ch;
  margin-bottom: clamp(1.25rem, 2.6vw, 2rem);
}
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  padding: 0.95em 1.75em;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(8, 10, 12, 0.55);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.hero__cta:hover { background: rgba(39, 246, 149, 0.12); text-decoration: none; }
.hero__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero__cta-arrow { color: var(--accent); font-size: 1.15em; line-height: 1; }

/* the stats, as a glass card at the foot of the hero */
.hero__stats {
  margin-top: auto;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  background: rgba(8, 10, 13, 0.55);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding: clamp(1.25rem, 1.9vw, 1.75rem) clamp(1.25rem, 2.2vw, 2.25rem);
}
.facts--hero {
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.facts--hero .fact {
  padding-inline: clamp(1rem, 2.2vw, 2.25rem);
  border-left: 1px solid rgba(255, 255, 255, 0.13);
}
.facts--hero .fact:first-child { border-left: 0; padding-left: 0; }
.facts--hero .fact__figure { color: var(--accent); font-weight: 400; letter-spacing: -0.02em; }
.facts--hero .fact__label { color: rgba(255, 255, 255, 0.66); letter-spacing: 0.18em; }

.section--after-hero { border-top: 0; }

@media (max-width: 880px) {
  .hero__stats { padding: 1.5rem 1.25rem; }
  .facts--hero { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; }
  .facts--hero .fact:nth-child(odd) { border-left: 0; padding-left: 0; }
  .facts--hero .fact:nth-child(n + 3) { padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.13); }
}
@media (max-width: 700px) {
    .hero__content { max-width: none; padding-block: 2.25rem 2rem; }
  /* the 9.6em headline cap is 326px at the phone size, inside the 335px
     column, so it holds and gives the same two-line break as desktop */
  .hero__stats { border-radius: 14px; }
  .facts--hero .fact { padding-inline: 0.75rem; }
  .facts--hero .fact:nth-child(odd) { padding-left: 0; }
  /* "2022–2025" cannot break, and at the full xl step it overhangs a 147px
     cell by 12px. 0.88 of the step fits it on a 360px phone with room. */
  .facts--hero .fact__figure { min-height: 2.3em; font-size: calc(var(--fs-xl) * 0.88); }
  /* 0.18em tracking pushes "LIVE POSITIONS TODAY" onto three lines in a 155px cell */
  .facts--hero .fact__label { letter-spacing: 0.06em; }
  /* on a phone the copy spans the full width, so darken downward instead */
  .hero::after {
    background: linear-gradient(
      180deg,
      rgba(5, 7, 9, 0.32) 0%,
      rgba(5, 7, 9, 0.70) 42%,
      rgba(5, 7, 9, 0.78) 68%,
      rgba(5, 7, 9, 0.82) 100%
    );
  }
}

@media print {
  .hero { min-height: 0; background: none; }
  .hero__media, .hero::after { display: none; }
  .hero__inner, .hero__logo,   .hero__lead, .hero__text { color: #333; }
  .hero__stats { background: none; }
  .facts--hero .fact__figure, .facts--hero .fact__label { color: #000; }
}