/* ============================
   About Page (company.html)
   Builds on home.css: container, section heads, logo row and CTA.
   company.css still styles the translated About pages.
   ============================ */

body {
  text-wrap: pretty;
}

/* ---- Hero: the title split between the top-left and bottom-right corners of the viewport,
   the description between the halves, and three brand graphics ---- */
.ab-hero {
  padding: calc(var(--hp-nav-height) + 24px) 0 clamp(96px, 11vw, 180px);
}
.ab-hero-stage {
  /* Type and tiles scale with the viewport's height as well as its width, so the stage always
     fits the first screen: the title (about 4.6em tall with the matrix) plus the description,
     the landscape tile and the gaps */
  --ab-hero-fs: clamp(40px, min(6.7vw, calc(17.6svh - 63px)), 120px);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "t1 t1 t1"
    ". . ."
    "portal . land"
    "portal t2 t2";
  row-gap: 24px;
  min-height: max(520px, calc(100svh - var(--hp-nav-height) - 64px));
}
/* The two halves of the title are placed in the stage's grid, so the h1 itself takes no box */
.ab-hero-title {
  display: contents;
  font-size: var(--ab-hero-fs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--text-primary);
}
.ab-hero-t1,
.ab-hero-t2 {
  display: block;
  margin: 0;
}
.ab-hero-t1 { grid-area: t1; }
.ab-hero-t2 { grid-area: t2; align-self: end; justify-self: end; text-align: end; }
/* Sits on the line like a word: top at the cap height, hanging below the baseline */
.ab-hero-matrix {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  margin: 0 0.06em;
  vertical-align: -0.72em;
}
.ab-hero-matrix canvas { display: block; width: 100%; height: 100%; }
/* Centered in the space between the two title halves, across the full width; it shares the
   tiles' row but stays clear of them. The first half's box runs down to the bottom of the
   hanging matrix and the second's starts above its capitals, so the lift centers it between
   the words themselves */
.ab-hero-desc {
  grid-row: 2 / 4;
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  translate: 0 calc(var(--ab-hero-fs) * -0.22);
  max-width: 22em;
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--hp-text-muted);
}
.ab-hero-nowrap { white-space: nowrap; }
.ab-hero-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.ab-hero-tile img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ab-hero-land { grid-area: land; align-self: end; width: clamp(120px, min(13vw, 19svh), 210px); }
/* The next landscape is revealed over the current one, wiping in from the left. The frame
   slides in while its image slides the other way, so the image holds still under a moving
   edge; transforms, because animated clip-path doesn't always repaint */
.ab-hero-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
}
.ab-hero-slide.is-on,
.ab-hero-slide.is-in { visibility: visible; }
.ab-hero-slide.is-in { z-index: 1; }
.ab-hero-slide.is-in,
.ab-hero-slide.is-in img { animation: abSwipe 1s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.ab-hero-slide.is-in img { animation-name: abSwipeImage; }
@keyframes abSwipe {
  from { transform: translateX(-100%); }
  to { transform: none; }
}
@keyframes abSwipeImage {
  from { transform: translateX(100%); }
  to { transform: none; }
}
/* Portal pattern from the brand book (Graphic System 5.2): nested arches, each with the brand
   gradient and an inner shadow, drawn by about.js */
.ab-hero-portal { grid-area: portal; align-self: end; width: clamp(140px, min(15.6vw, 23svh), 250px); }
.ab-hero-portal canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* Entrance: the headline and graphics fade in together, then the description */
.ab-hero-t1,
.ab-hero-t2,
.ab-hero-tile {
  opacity: 0;
  animation: heroFadeIn 0.8s ease 0.05s forwards;
}
.ab-hero-desc {
  opacity: 0;
  animation: heroFadeIn 0.8s ease 0.25s forwards;
}

/* ---- Sections: homepage section rhythm and title size ---- */
/* Same gap below the hero and every section as the homepage and contact page */
.ab-section {
  padding: 0 0 clamp(96px, 11vw, 180px);
}
.ab-section--first {
  padding-bottom: clamp(72px, 8vw, 140px);
}
/* A hairline halfway down the gap after the first section, as wide as the content */
.ab-section--first + .ab-section::before {
  content: '';
  display: block;
  width: min(calc(100% - 2 * var(--hp-gutter)), var(--hp-max));
  height: 1px;
  margin: 0 auto clamp(72px, 8vw, 140px);
  background: rgba(255, 255, 255, 0.08);
}
.ab-section--facts,
.ab-section--first {
  opacity: 0;
  animation: heroFadeIn 0.8s ease 0.25s forwards;
}

/* ---- Facts: three cards, value on top, label pinned to the bottom ---- */
.ab-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ab-facts li {
  display: flex;
  flex-direction: column;
  min-height: 176px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
}
.ab-fact-value {
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
.ab-fact-label {
  margin-top: auto;
  padding-top: 32px;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}
.ab-section .hp-customers-title { font-size: clamp(40px, 5vw, 72px); }

/* Title on the left, copy on the right */
.ab-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 40px;
  align-items: start;
}
.ab-copy p {
  max-width: 36em;
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.ab-copy p + p { margin-top: 24px; }
.ab-copy .ab-lead { color: var(--text-primary); }

/* ---- Team photos: two up, so the 1024px originals are never shown wider than they are ---- */
.ab-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(56px, 6.5vw, 104px);
}
.ab-photo { margin: 0; }
.ab-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #151917;
}

/* ---- Gallery: four columns of equal width, each piece at its own height ---- */
.ab-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.ab-gallery > * {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: #151917;
}
/* A little shorter than the 9:16 footage, cropped to fill */
.ab-gallery video { aspect-ratio: 3 / 5; }

/* ---- How we work ---- */
.ab-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(56px, 6.5vw, 104px);
}
.ab-value {
  min-height: 220px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
}

/* ---- Investors ---- */
.ab-group-label {
  margin: clamp(56px, 6.5vw, 104px) 0 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--hp-text-muted);
}
.ab-investors + .ab-group-label { margin-top: 40px; }
.ab-investors {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ab-investors a {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 132px;
  padding: 20px 48px 20px 20px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.ab-investors a::after {
  content: '↗';
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ab-investors a span {
  margin-top: auto;
  padding-top: 24px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.6);
}
.ab-investors a:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }
@media (hover: hover) {
  .ab-investors a:hover { background-color: rgba(255, 255, 255, 0.055); }
  .ab-investors a:hover::after { color: #77AB97; transform: translate(2px, -2px); }
}

/* Fund cards: name on top, logo tile pinned to the bottom */
.ab-investors--funds a { gap: 32px; }
.ab-investors .ab-fund-media {
  display: block;
  margin-top: auto;
  /* The card's right padding leaves room for the arrow; the tile runs past it to match the left */
  margin-right: -28px;
  padding-top: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.ab-fund-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Press: same card as the investors, with the headline as the hero of the card ---- */
.ab-press {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: clamp(56px, 6.5vw, 104px) 0 0;
  padding: 0;
  list-style: none;
}
.ab-press a {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 260px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.ab-press a::after {
  content: '↗';
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ab-press-outlet {
  font-size: 16px;
  line-height: 1.4;
  color: var(--hp-text-muted);
}
.ab-press-headline {
  max-width: 18em;
  margin-top: 40px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  text-wrap: balance;
}
/* Pinned to the bottom so the dates line up across the row */
.ab-press-meta {
  margin-top: auto;
  padding-top: 32px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.5);
}
.ab-press a:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }
@media (hover: hover) {
  .ab-press a:hover { background-color: rgba(255, 255, 255, 0.055); }
  .ab-press a:hover::after { color: #77AB97; transform: translate(2px, -2px); }
}

/* ============================
   Responsive
   ============================ */
@media (max-width: 1199px) {
  .ab-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-investors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .ab-split { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .ab-copy p { font-size: 18px; }
  .ab-photos { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* Two flowing columns, so the uneven heights stack without gaps */
  .ab-gallery { display: block; columns: 2; column-gap: 12px; }
  .ab-gallery > * { break-inside: avoid; margin-bottom: 12px; }
  .ab-press { grid-template-columns: minmax(0, 1fr); }
  .ab-press a { min-height: 200px; }
  .ab-press-headline { font-size: 20px; }
}

@media (max-width: 768px) {
  /* Still one screen tall: the whole title at the top, the description centered in the open
     space, then the dot matrix and the landscape side by side. No portal tile */
  .ab-hero-stage {
    --ab-hero-fs: clamp(36px, 11vw, 52px);
    --ab-hero-gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "title title" "desc desc" ". land";
    column-gap: var(--ab-hero-gap);
    row-gap: 24px;
  }
  .ab-hero-title { display: block; grid-area: title; margin: 0; }
  .ab-hero-t1,
  .ab-hero-t2 { display: inline; }
  .ab-hero-title br { display: none; }
  .ab-hero-desc {
    grid-area: desc;
    justify-self: start;
    max-width: 20em;
    font-size: 18px;
    text-align: start;
    translate: none;
  }
  /* The matrix leaves the line and fills the empty cell beside the landscape */
  .ab-hero-matrix {
    position: absolute;
    inset-inline-start: var(--hp-gutter);
    bottom: 0;
    width: calc((100% - 2 * var(--hp-gutter) - var(--ab-hero-gap)) / 2);
    height: auto;
    aspect-ratio: 1;
    margin: 0;
  }
  .ab-hero-land { width: auto; }
  .ab-hero-portal { display: none; }
}

@media (max-width: 600px) {
  .ab-values,
  .ab-investors,
  .ab-facts { grid-template-columns: minmax(0, 1fr); }
  .ab-facts li { min-height: 136px; }
  .ab-value { min-height: 0; }
  .ab-investors a { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-investors a,
  .ab-investors a::after,
  .ab-press a,
  .ab-press a::after { transition: none; }
}