/* ==========================================================================
   about/about.css · the About page's own pieces, on top of the refined page
   kit (kit/rf.css). Scoped like the kit: every rule sits under body.rf and an
   .ab- class, so no other page can be touched. Motion is about/about.js.

     .ab-blue       a blue card: the hero (with the drifting globe) and partners
     .ab-tiles      the glass figures inside a blue card
     .ab-lit        a statement whose words light up as it is scrolled through
     .ab-band       the app: picture and words on one white card
     .ab-eco        start anywhere: entries either side of the hub
     .ab-twin-panel the twin's dark panel, the figure ringed and glowing
     .ab-map        the world map on navy, with its place names
     .ab-offices    each office with its address (the shared offices list)
     .ab-fstats     the founder's figures in one ruled row
     .ab-natfeat    the Nature feature on a dark card
     .ab-team       the executive team, a photo card each
     .ab-advisors   the boards, a small photo beside each name
     .ab-mpi        the 1 Million Phenome Initiative panel
   ======================================================================= */

.rf main > section[id] { scroll-margin-top: calc(var(--ph-nav-h, 44px) + 12px); }

/* The About pages sit closer together than the kit's long pages: sections and
   the blocks inside them are spaced as the prototype spaces them. The opening
   section is one even tint (the shared .hero fades grey to white) and meets
   the section after it. */
.rf .rf-sec { padding-block: clamp(40px, 4.4vw, 72px); }
.rf .rf-cards { margin-top: clamp(28px, 3vw, 48px); }
.rf .rf-hero.ab-hero { padding: clamp(20px, 2.4vw, 32px) 0 clamp(20px, 2.4vw, 32px); background: var(--rf-sunk); }
.rf .rf-sec.ab-mv-sec { padding-top: clamp(16px, 1.8vw, 28px); }

/* ---- shared ----------------------------------------------------------------- */
.rf .ab-first { margin-top: 0; }
.rf .rf-cards[data-n="5"] { --n: 5; }
.rf .ab-say .rf-kicker { margin-bottom: 22px; letter-spacing: .1em; }
.rf .ab-board { margin-top: clamp(48px, 5vw, 80px); }
.rf .ab-values .rf-card { gap: 10px; }
.rf .ab-values .rf-card-v { margin: 0; }

/* ---- a page's opening card: blue, or pale (Our people) ----------------------
   Sized as the About prototype set it: 52px in, 24px corners, a 46px heading,
   a 17px lede and the figures in 26px glass tiles. */
.rf .ab-blue, .rf .ab-pale {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; align-content: center;
  min-height: clamp(320px, 26vw, 380px); padding: clamp(30px, 3.6vw, 52px); border-radius: 24px;
}
.rf .ab-blue { color: #fff; background: radial-gradient(120% 140% at 85% 10%, #2c4a9a 0%, var(--rf-navy) 55%, #071641 100%); }
.rf .ab-pale { color: var(--rf-ink); background: linear-gradient(135deg, #fff 0%, #e6ebf7 100%); }
.rf :is(.ab-blue, .ab-pale) .rf-kicker { font-size: 12px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; }
.rf :is(.ab-blue, .ab-pale) .ph-display { margin: 12px 0 0; font-size: 46px; line-height: 1.08; letter-spacing: -1.2px; animation: ab-rise 1s var(--rf-ease) both; }
.rf :is(.ab-blue, .ab-pale) .rf-lede { margin-top: 14px; max-width: 580px; font-size: 17px; line-height: 1.55; animation: ab-rise 1s .15s var(--rf-ease) both; }
.rf .ab-pale .rf-kicker { color: var(--rf-accent); }
.rf .ab-pale .ph-display { color: var(--rf-ink); }
.rf .ab-pale .rf-lede { color: var(--rf-ink-2); }
.rf .rf-split-media.ab-square { aspect-ratio: 1 / 1; }
.rf .ab-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rf .ab-mosaic img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 22%; border-radius: 12px; background: var(--rf-soft); }
.rf .ab-blue-bg {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: right center;
  opacity: .55; transform: scale(1.08); animation: ab-drift 18s ease-in-out infinite alternate;
}
.rf .ab-blue.is-image::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #071641 25%, rgba(7, 22, 65, .55) 60%, rgba(7, 22, 65, .2));
}
/* "Your data. Your health. Your future." on one line: smaller type, its two parts side by side. */
.rf .ab-blue .ph-display.ab-stack { font-size: clamp(26px, 2.5vw, 36px); white-space: nowrap; }
.rf .ab-blue .ph-display.ab-stack > span { display: inline; }
.rf .ab-blue .ph-display.ab-stack > span + span::before { content: "\00a0"; }
/* "About Phenome Longevity": the company hero's eyebrow, larger than the other cards' */
.rf .ab-blue .rf-kicker, .rf .ab-pale .rf-kicker { font-size: 17px; letter-spacing: .1em; }
.rf .ab-blue .rf-kicker { color: #9fb4ec; }
.rf .ab-blue .ph-display { color: #fff; }
.rf .ab-blue .rf-lede { color: #c9d3ee; }
.rf .ab-tiles { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rf .ab-tiles li {
  padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.rf .ab-tiles b { display: block; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.5px; color: #fff; font-variant-numeric: tabular-nums; }
.rf .ab-tiles span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: #c9d3ee; }

/* ---- mission and vision, as the prototype lays them out --------------------- */
.rf .ab-mv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(16, 33, 75, .12); border-bottom: 1px solid rgba(16, 33, 75, .12); }
.rf .ab-mvcol { padding: 44px 48px 44px 0; }
.rf .ab-mvcol + .ab-mvcol { padding: 44px 0 44px 48px; border-left: 1px solid rgba(16, 33, 75, .12); }
.rf .ab-mvk { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.rf .ab-mvk span { font-size: 22px; line-height: 1; font-weight: 500; color: var(--rf-navy); font-variant-numeric: tabular-nums; }
.rf .ab-mvk b { font-size: 17px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--rf-accent); }
.rf .ab-mvcol h2 { margin: 0; font-size: clamp(24px, 2.5vw, 32px); line-height: 1.22; letter-spacing: -0.6px; font-weight: 500; color: var(--rf-ink); text-wrap: pretty; }
.rf .ab-mvcol p:not(.ab-mvk) { margin: 16px 0 0; max-width: 520px; font-size: 16px; line-height: 1.6; color: var(--rf-ink-2); }
.rf .ab-g5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.rf .ab-card { padding: 24px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 33, 75, .1); }
.rf .ab-card h3 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--rf-ink); }
.rf .ab-card p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; font-weight: 600; color: var(--rf-ink-2); }
/* The five pillars under the mission: an icon, the area in small capitals, the name large, a number and a
   blue edge, lifting on hover. The lift uses translate so the entrance motion's transform is left alone. */
.rf .ab-pillars { counter-reset: ab-pil; grid-template-columns: repeat(4, minmax(0, 1fr) auto) minmax(0, 1fr); gap: 10px; margin-top: 20px; }
.rf .ab-chev { align-self: center; display: grid; place-items: center; width: 18px; color: var(--rf-accent); }
.rf .ab-chev svg { width: 18px; height: 18px; }
.rf .ab-pillars .ab-card {
  position: relative; overflow: hidden; padding: 26px 24px 26px; border-radius: 22px;
  background: linear-gradient(165deg, #fff 0%, #f4f7fe 100%);
  box-shadow: inset 0 0 0 1px rgba(16, 33, 75, .1);
  transition: translate .4s var(--rf-ease), box-shadow .4s var(--rf-ease);
}
.rf .ab-pillars .ab-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--rf-navy), #5b8cff); }
.rf .ab-pillars .ab-card::after { counter-increment: ab-pil; content: "0" counter(ab-pil); position: absolute; top: 26px; right: 24px; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: rgba(16, 33, 75, .3); font-variant-numeric: tabular-nums; }
.rf .ab-pillars a.ab-card { text-decoration: none; color: inherit; }
.rf .ab-pillars .ab-card:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px rgba(32, 58, 133, .35); }
.rf .ab-pill-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 22px; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #3a63d6, var(--rf-navy)); }
.rf .ab-pill-ic svg { width: 22px; height: 22px; }
.rf .ab-pillars .ab-card h3 { font-size: 14px; line-height: 1.4; letter-spacing: .1em; font-weight: 600; color: var(--rf-accent); }
.rf .ab-pillars .ab-card p { margin: 6px 0 0; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.2; letter-spacing: -0.01em; font-weight: 600; color: var(--rf-ink); }
/* The company page's first screen: the blue card and the mission block share one screen, the block taking
   what the card leaves, so What we believe starts at the fold. Its height repeats the card's two clamps. */
@media (min-width: 1024px) {
  .rf .rf-hero.ab-hero.is-first { padding-block: clamp(12px, 1.6svh, 18px); }
  .rf .is-first .ab-blue { min-height: clamp(256px, 31svh, 320px); padding-block: clamp(22px, 3svh, 34px); }
  .rf .is-first .ab-tiles { gap: 10px; }
  .rf .is-first .ab-tiles li { padding: 12px 16px; }
  .rf .is-first .ab-tiles b { font-size: 24px; }
  .rf .is-first .ab-tiles span { margin-top: 2px; }
  .rf .rf-sec.ab-mv-sec {
    display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100svh - var(--ph-nav-h, 44px) - clamp(256px, 31svh, 320px) - 2 * clamp(12px, 1.6svh, 18px));
    padding-block: clamp(10px, 1.4svh, 16px) clamp(20px, 3svh, 36px);
  }
  .rf .ab-mv-sec .ab-mvcol { padding-block: clamp(16px, 2.8svh, 36px); }
  .rf .ab-mv-sec .ab-mvk { margin-bottom: 12px; }
  .rf .ab-mv-sec .ab-mvcol h2 { font-size: clamp(22px, 2vw, 28px); }
  .rf .ab-mv-sec .ab-mvcol p:not(.ab-mvk) { margin-top: 12px; }
  .rf .ab-pillars { margin-top: clamp(12px, 2svh, 20px); }
  .rf .ab-pillars .ab-card { padding: 18px 20px 20px; }
  .rf .ab-pillars .ab-card::after { top: 20px; right: 20px; }
  .rf .ab-pill-ic { width: 40px; height: 40px; margin-bottom: 14px; border-radius: 12px; }
  .rf .ab-pill-ic svg { width: 20px; height: 20px; }
}

/* ---- a statement that lights up (about.js sets --ab-lit) -------------------- */
.ab-motion .rf .ab-lit {
  background-image: linear-gradient(90deg, #fff calc(100% - 3em), rgba(255, 255, 255, .26)), linear-gradient(rgba(255, 255, 255, .26), rgba(255, 255, 255, .26));
  background-repeat: no-repeat; background-size: var(--ab-lit, 100%) 100%, 100% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- the app ---------------------------------------------------------------- */
.rf .ab-band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border-radius: var(--rf-r-lg); border: 1px solid var(--rf-rule); background: #fff; }
.rf .ab-band-media {
  position: relative; display: grid; place-items: center; min-height: 480px; margin: 0; overflow: hidden;
  background: radial-gradient(80% 80% at 50% 45%, #eef2ff 0%, var(--rf-soft) 100%);
}
.rf .ab-band-media img { display: block; width: 70%; max-width: 400px; height: auto; filter: drop-shadow(0 30px 40px rgba(10, 30, 87, .25)); }
/* The App page's fan of five phones: wide, so it takes the panel's width. */
.rf .ab-band-media.is-fan img { width: 94%; max-width: 680px; filter: drop-shadow(0 24px 30px rgba(10, 30, 87, .22)); }

/* ---- what we make: square product photos ------------------------------------ */
.rf .ab-products .rf-card.is-photo .rf-card-img { aspect-ratio: 1; }
.rf .ab-band-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 4.4vw, 64px); }
.rf .ab-band-copy .rf-solid { margin-top: 16px; }
.rf .ab-band-copy .rf-kicker, .rf .rf-kicker.ab-kick { letter-spacing: .1em; }

/* ---- start anywhere --------------------------------------------------------- */
.rf .ab-eco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 64px); align-items: stretch; margin-top: clamp(28px, 3vw, 48px); }
.rf .ab-eco-mid { display: flex; flex-direction: column; }
.rf .ab-step { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--rf-ink-2); }
.rf .ab-step span { display: inline-grid; place-items: center; min-width: 36px; height: 28px; padding: 0 9px; border-radius: 99px; background: var(--rf-navy); color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
.rf .ab-eco-mid .ab-step { justify-content: center; }
.rf .ab-entry {
  display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; padding: 18px 20px; border-radius: 18px;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 33, 75, .08); color: inherit; text-decoration: none;
  transition: translate .35s var(--rf-ease), box-shadow .35s var(--rf-ease);
}
.rf .ab-entry:last-child { margin-bottom: 0; }
.rf .ab-entry:hover { translate: 0 -3px; box-shadow: inset 0 0 0 1px rgba(32, 58, 133, .3), 0 18px 36px -18px rgba(16, 33, 75, .35); }
.rf .ab-entry i { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(145deg, #eef2ff, #dce5ff); color: var(--rf-navy); }
.rf .ab-entry i svg { width: 22px; height: 22px; }
.rf .ab-entry b { display: block; font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--rf-ink); }
.rf a.ab-entry b::after { content: " \2192"; color: var(--rf-navy); }
.rf .ab-entry span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--rf-ink-2); }
.rf .ab-hub {
  position: relative; flex: 1; display: grid; place-items: center; min-height: 340px; border-radius: var(--rf-r-lg);
  background: radial-gradient(circle at 50% 45%, #1e46b4 0%, var(--rf-navy) 62%, #071641 100%);
  box-shadow: 0 30px 70px -30px rgba(10, 30, 87, .6);
}
.rf .ab-orbit { position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; border: 1px solid rgba(159, 195, 255, .22); }
.rf .ab-orbit.is-1 { width: 250px; height: 250px; border-style: dashed; animation: ab-spin 40s linear infinite; }
.rf .ab-orbit.is-2 { width: 190px; height: 190px; border-color: rgba(159, 195, 255, .08); border-top-color: rgba(159, 195, 255, .75); animation: ab-spin 8s linear infinite; }
.rf .ab-beam { position: absolute; top: 50%; width: clamp(28px, 4.4vw, 64px); height: 2px; overflow: hidden; background: rgba(32, 58, 133, .18); }
.rf .ab-beam.is-l { right: 100%; }
.rf .ab-beam.is-r { left: 100%; }
.rf .ab-beam::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, #3b5bdb, transparent); animation: ab-beam 1.6s linear infinite; }
.rf .ab-beam.is-r::after { animation-delay: .8s; }
.rf .ab-hubcore { position: relative; z-index: 1; max-width: 230px; text-align: center; color: #fff; }
.rf .ab-hubcore small { display: block; font-size: 15px; line-height: 1.35; font-weight: 600; color: #9fc3ff; }
.rf .ab-hubcore b { display: block; margin: 10px 0; font-size: clamp(30px, 2.6vw, 38px); line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; }
.rf .ab-hubcore span { display: block; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .76); }
.rf .ab-loop { display: flex; align-items: center; gap: 18px; margin-top: clamp(24px, 2.4vw, 32px); padding: 22px 26px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px rgba(32, 58, 133, .16); }
.rf .ab-loop i { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--rf-navy); color: #fff; }
.rf .ab-loop i svg { width: 24px; height: 24px; animation: ab-spin 6s linear infinite; }
.rf .ab-loop p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--rf-ink-2); }
.rf .ab-loop b { color: var(--rf-ink); }

/* ---- the twin --------------------------------------------------------------- */
.rf .ab-twin-panel {
  position: relative; overflow: clip; padding: clamp(40px, 5vw, 72px) clamp(24px, 3.4vw, 52px); border-radius: var(--rf-r-lg); color: #fff;
  background: radial-gradient(ellipse 60% 70% at 50% 55%, #0d2457 0%, #071330 45%, #040b1b 100%);
}
.rf .ab-twin-panel .rf-kicker { color: #9fb4ec; }
.rf .ab-twin-panel .rf-solid { color: #fff; }
.rf .ab-twin-panel .rf-lede { color: rgba(255, 255, 255, .74); }
.rf .ab-twin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; margin-top: clamp(28px, 3vw, 48px); }
.rf .ab-twin-k {
  display: inline-block; margin: 0 0 22px; padding: 8px 16px; border-radius: 99px; font-size: 15px; font-weight: 600; color: #9fb4ec;
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(159, 180, 236, .35);
}
.rf .ab-list { margin: 0; padding: 0; list-style: none; counter-reset: ab; }
.rf .ab-list li { counter-increment: ab; position: relative; padding: 0 0 18px 48px; }
.rf .ab-list li::before {
  content: counter(ab); position: absolute; left: 0; top: -3px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); font-size: 15px; font-weight: 600; color: #fff; transition: background .3s, box-shadow .3s;
}
.rf .ab-list li:hover::before { background: #3b5bdb; box-shadow: none; }
.rf .ab-list b { display: block; font-size: 17px; line-height: 1.35; font-weight: 600; color: #fff; }
.rf .ab-list span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.5; color: #9aa8c7; }
.rf .ab-tcore { position: sticky; top: calc(var(--ph-nav-h, 44px) + 60px); margin: 20px 0 0; aspect-ratio: 1; }
.rf .ab-tcore img {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 72%); mask-image: radial-gradient(circle, #000 62%, transparent 72%);
}
.rf .ab-glow {
  position: absolute; left: 30%; right: 30%; top: 20%; bottom: 20%; z-index: 2; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(80, 170, 255, .45), transparent 70%); filter: blur(20px); mix-blend-mode: screen;
  animation: ab-breathe 4s ease-in-out infinite;
}
.rf .ab-ring { position: absolute; inset: -2%; z-index: 0; border-radius: 50%; border: 1px dashed rgba(159, 195, 255, .28); animation: ab-spin 60s linear infinite; }
.rf .ab-ring.is-2 { inset: -7%; border-style: solid; border-color: rgba(159, 195, 255, .1); border-top-color: rgba(159, 195, 255, .6); animation-duration: 14s; }
.rf .ab-tnote { margin: 14px 0 0; padding: 18px 20px; border-radius: 16px; font-size: 15px; line-height: 1.5; color: #fff; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }

/* ---- products --------------------------------------------------------------- */
.rf .rf-card-img img[data-ab-par] { scale: 1.1; }
.rf .rf-card.is-photo:hover .rf-card-img img[data-ab-par] { scale: 1.14; }

/* ---- where we are ----------------------------------------------------------- */
.rf .ab-map {
  margin-top: clamp(28px, 3vw, 48px); padding: clamp(28px, 3.6vw, 52px) clamp(12px, 3vw, 44px);
  border-radius: var(--rf-r-lg); overflow: hidden;
  background: radial-gradient(90% 120% at 50% 30%, var(--rf-navy-2) 0%, var(--rf-navy) 55%, #071641 100%);
}
.rf .ab-map-in { position: relative; max-width: 1100px; margin: 0 auto; }
.rf .ab-map-img { display: block; width: 100%; height: auto; }
.rf .ab-pin {
  position: absolute; transform: translate(14px, -50%); white-space: nowrap; pointer-events: none;
  font-size: 15px; line-height: 1.2; font-weight: 600; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.rf .ab-pin.is-l { transform: translate(calc(-100% - 14px), -50%); }
.rf .ab-pin.is-t { transform: translate(-30%, calc(-100% - 14px)); }
.rf .ab-offices { margin-top: clamp(14px, 1.4vw, 22px); }
.rf .ab-offices .ph-offices { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); margin: 0; }
.rf .ab-offices .ph-office { padding: clamp(22px, 2.2vw, 30px); border-radius: var(--rf-r-md); background: #fff; }
.rf .ab-offices .ph-office-city { margin: 0 0 10px; font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--rf-accent); }
.rf .ab-offices .ph-office-lines { gap: 2px; font-size: 16px; line-height: 1.5; color: var(--rf-ink-2); }
.rf .ab-offices .ph-office-lines strong { font-size: 17px; color: var(--rf-ink); }
.rf .ab-offices .ph-office-map { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--rf-navy); }

/* ---- founder ---------------------------------------------------------------- */
.rf .ab-founder .ph-display { margin-top: 16px; animation: ab-rise 1s var(--rf-ease) both; }
.rf .ab-founder .rf-lede { animation: ab-rise 1s .15s var(--rf-ease) both; }
.rf .ab-portrait { aspect-ratio: 520 / 494; max-width: 520px; width: 100%; justify-self: end; }
.rf .ab-founder .rf-small { margin-top: 14px; }
.rf .ab-fstats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(32px, 3.6vw, 56px) 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--rf-rule); border-bottom: 1px solid var(--rf-rule);
}
.rf .ab-fstats li { padding: 28px 24px; border-right: 1px solid var(--rf-rule); }
.rf .ab-fstats li:last-child { border-right: 0; }
.rf .ab-fstats b { display: block; font-size: clamp(34px, 3.2vw, 46px); line-height: 1; font-weight: 600; letter-spacing: -0.02em; color: var(--rf-navy); font-variant-numeric: tabular-nums; }
.rf .ab-fstats span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.4; color: var(--rf-ink-2); }
.rf .ab-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 72px); margin-top: 22px; }
.rf .ab-cols .rf-p { margin: 0; max-width: none; font-size: clamp(18px, 1.35vw, 21px); }
.rf .ab-quote { margin: clamp(48px, 5vw, 80px) auto 0; max-width: 1080px; text-align: center; }
.rf .ab-quote blockquote { margin: 0; }
.rf .ab-quote figcaption { margin-top: 24px; font-size: 17px; font-weight: 600; color: var(--rf-accent); }
.rf .ab-natfeat { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); overflow: hidden; border-radius: var(--rf-r-lg); background: #0b1736; color: #fff; }
.rf .ab-natfeat-media { position: relative; min-height: 380px; margin: 0; overflow: hidden; }
.rf .ab-natfeat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: 1.12; }
.rf .ab-natfeat-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 4vw, 56px); }
.rf .ab-natfeat .rf-kicker { color: #9fb4ec; }
.rf .ab-natfeat .rf-solid { margin-top: 16px; font-size: clamp(28px, 2.8vw, 42px); color: #fff; }
.rf .ab-natfeat .rf-lede { color: rgba(255, 255, 255, .8); }
.rf .ab-work { margin-top: clamp(40px, 4.4vw, 64px); }
.rf .ab-work .rf-rows.is-wide { margin-top: 18px; }

/* ---- people ----------------------------------------------------------------- */
.rf .ab-sub { margin: clamp(48px, 5vw, 80px) 0 0; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--rf-ink); }
.rf .ab-team { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); margin-top: 26px; }
.rf .ab-person { display: flex; flex-direction: column; border-radius: var(--rf-r-md); overflow: hidden; background: var(--rf-sunk); }
.rf .ab-person img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 22%; background: var(--rf-soft); }
.rf .ab-person > div { padding: 18px 20px 22px; }
.rf .ab-person-n { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 600; color: var(--rf-ink); }
.rf .ab-person-r { margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: var(--rf-ink-2); }
.rf .ab-person-i { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: var(--rf-accent); }
.rf .ab-advisors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); margin-top: clamp(32px, 3.4vw, 48px); }
.rf .ab-adv { display: flex; flex-direction: column; border-radius: var(--rf-r-md); overflow: hidden; background: #fff; }
.rf .ab-adv img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 22%; background: var(--rf-soft); }
.rf .ab-adv > div { padding: 18px 20px 22px; }

/* ---- partners --------------------------------------------------------------- */
.rf .rf-cards.ab-regions { margin-top: clamp(32px, 3.4vw, 48px); }
.rf .rf-card .ab-names { margin: 6px 0 0; padding: 0; list-style: none; display: block; }
.rf .rf-card .ab-names li { padding: 13px 0 0; margin-top: 13px; border-top: 1px solid var(--rf-rule); font-size: 17px; line-height: 1.4; color: var(--rf-ink); }
.rf .rf-card .ab-names li:first-child { margin-top: 0; }
.rf .rf-card .ab-names li::before { content: none; }
.rf .ab-names small { font-size: 15px; color: var(--rf-ink-2); white-space: nowrap; }
.rf .rf-cards.ab-words { margin-top: clamp(32px, 3.4vw, 48px); }
.rf .ab-words .rf-card { align-items: center; justify-content: center; min-height: 120px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--rf-navy); text-align: center; }
.rf .ab-mpi-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(14px, 1.4vw, 22px); align-items: stretch; }
.rf .ab-mpi-grid .rf-cards { margin-top: 0; }
.rf .ab-mpi {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 440px; padding: clamp(28px, 3.2vw, 52px); border-radius: var(--rf-r-lg); color: #fff; background: var(--rf-navy);
}
.rf .ab-mpi::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 22, 65, .1) 0%, rgba(7, 22, 65, .86) 78%); }
.rf .ab-mpi::after {
  content: ""; position: absolute; inset: 0; z-index: -2; background: url("/site/assets/about/globe.jpg") center / cover;
  transform: scale(1.08); animation: ab-drift 18s ease-in-out infinite alternate;
}
.rf .ab-mpi .rf-kicker, .rf .ab-mpi .rf-solid { color: #fff; }
.rf .ab-mpi .rf-solid { margin-top: 14px; font-size: clamp(28px, 2.6vw, 40px); }
.rf .ab-mpi .rf-p { color: rgba(255, 255, 255, .82); }
.rf .ab-press .btn { align-self: flex-start; margin: auto 0 0; }

/* ---- motion: hidden until about.js shows it (never in the prerendered page) -- */
.ab-motion .rf :is(.rf-cards > *, .ab-entry, .ab-team > *, .ab-advisors > *, .ab-fstats li, .ab-tiles li, .ab-g5 > *, .ab-mvcol) {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1), translate .35s var(--rf-ease), box-shadow .35s var(--rf-ease), scale .9s var(--rf-ease);
}
.ab-motion .rf .ab-list li { opacity: 0; transform: translateX(-14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.ab-motion .rf .ab-list.is-right li { transform: translateX(14px); }
/* :is() weighs as its heaviest selector, so the shown state names the same list. */
.ab-motion .rf :is(.rf-cards > *, .ab-entry, .ab-team > *, .ab-advisors > *, .ab-fstats li, .ab-tiles li, .ab-g5 > *, .ab-mvcol, .ab-list li).ab-in { opacity: 1; transform: none; }

@keyframes ab-drift { to { transform: scale(1.16) translateX(-2%); } }
@keyframes ab-rise { from { opacity: 0; transform: translateY(30px); } }
@keyframes ab-spin { to { rotate: 360deg; } }
@keyframes ab-breathe { 0%, 100% { opacity: .55; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes ab-beam { from { left: -40%; } to { left: 100%; } }

/* ---- narrow widths ---------------------------------------------------------- */
@media (max-width: 1180px) {
  .rf .rf-cards[data-n="5"] { --n: 3; }
  .rf .ab-team { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rf .ab-offices .ph-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .rf .ab-blue, .rf .ab-pale, .rf .ab-mv, .rf .ab-band, .rf .ab-eco, .rf .ab-twin, .rf .ab-natfeat, .rf .ab-cols, .rf .ab-mpi-grid { grid-template-columns: minmax(0, 1fr); }
  .rf .ab-mvcol, .rf .ab-mvcol + .ab-mvcol { padding: 32px 0; border-left: 0; }
  .rf .ab-mvcol + .ab-mvcol { border-top: 1px solid rgba(16, 33, 75, .12); }
  .rf .ab-g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf .ab-pillars > :last-child { grid-column: 1 / -1; }
  .rf .ab-pillars .ab-chev { display: none; }
  .rf .ab-tcore { position: relative; top: 0; order: -1; width: 100%; max-width: 440px; margin: 0 auto; }
  .rf .ab-beam { display: none; }
  .rf .ab-hub { min-height: 300px; }
  .rf .ab-band-media { min-height: 360px; }
  .rf .ab-band-media.is-fan { min-height: 0; padding: 36px 0; }
  .rf .ab-natfeat-media { min-height: 280px; }
  .rf .ab-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rf .ab-portrait { justify-self: start; }
  .rf .ab-fstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf .ab-fstats li:nth-child(2) { border-right: 0; }
  .rf .ab-fstats li:nth-child(-n+2) { border-bottom: 1px solid var(--rf-rule); }
}
@media (max-width: 760px) {
  .rf .rf-cards[data-n="5"] { --n: 2; }
  .rf .ab-team, .rf .ab-advisors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf .ab-offices .ph-offices { grid-template-columns: minmax(0, 1fr); }
  .rf :is(.ab-blue, .ab-pale) .ph-display { font-size: 34px; }
  /* A phone is too narrow for the whole sentence on one line at a readable size. */
  .rf .ab-blue .ph-display.ab-stack { font-size: 28px; white-space: normal; }
  .rf .ab-tiles b { font-size: 22px; }
  .rf .ab-pin { display: none; }
  .rf .ab-mpi { min-height: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .rf .ab-blue-bg, .rf :is(.ab-blue, .ab-pale, .ab-founder) :is(.ph-display, .rf-lede), .rf .ab-orbit, .rf .ab-beam::after,
  .rf .ab-loop i svg, .rf .ab-ring, .rf .ab-glow, .rf .ab-mpi::after { animation: none; }
}