/* ==========================================================================
   Phixr — About page
   css/about.css  (loaded after css/home.css; reuses its type, buttons,
   eyebrows, sticky header and footer). All page classes are prefixed ab-.
   ========================================================================== */

/* Accent line in headings (palette lilac, as on the homepage) */
.about-page .h2 span { color: #7B73FF; }
/* a touch more line height so descenders (g, y) clear the line below */
.about-page .h2 { line-height: 1.04; }
.about-page .lead { font-size: 19px; }
.about-page strong { color: var(--ink); font-weight: 700; }

.ab-section { padding: 120px 0; position: relative; overflow: hidden; }


/* ---------- Decorative layers (palette only) ---------- */
.ab-dots {
  position: absolute;
  width: 280px;
  height: 280px;
  opacity: .5;
  background-image: radial-gradient(#6D5BFF 2.1px, transparent 2.3px);
  background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(circle, #000, transparent 70%);
          mask-image: radial-gradient(circle, #000, transparent 70%);
  pointer-events: none;
}

.ab-orbit {
  position: absolute;
  width: 780px;
  height: 390px;
  border: 1.5px solid #FF6B6B;
  border-radius: 50%;
  transform: rotate(-16deg);
  opacity: .85;
  pointer-events: none;
}


/* ---------- Hero (dark Phixr blue; header sits inside) ---------- */
.ab-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(circle at 72% 38%, #6139FF 0, transparent 38%),
              linear-gradient(115deg, #2E008C 0%, #3A01AC 45%, #540DEE 100%);
}

.ab-hero-dots {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image: radial-gradient(#fff 1.2px, transparent 1.2px);
  background-size: 15px 15px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, transparent 45%);
          mask-image: linear-gradient(90deg, #000 0, transparent 45%);
  pointer-events: none;
}

.ab-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .7fr 1fr;
  gap: 24px;
  align-items: start;
  padding-top: 30px;
}

.ab-hero-copy { padding-bottom: 48px; }
.ab-hero .kicker { color: #A7ABFF; }
.about-page .ab-hero .h2 { color: #fff; }
.about-page .ab-hero .h2 span { color: #A7ABFF; }
.ab-h1 { font-size: clamp(44px, 4.6vw, 72px); margin: 22px 0 26px; }
.ab-hero .lead { max-width: 560px; margin: 0 0 14px; font-size: 18px; color: #DCDAFF; }
.about-page .ab-hero strong { color: #fff; }

.ab-note {
  max-width: 540px;
  margin: 26px 0 34px;
  padding-left: 22px;
  border-left: 3px solid #FF6B6B;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: #fff;
}

.ab-down {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.ab-down span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid #A7ABFF;
  font-size: 18px;
  transition: background .2s, border-color .2s;
}
.ab-down:hover span { background: rgba(255, 255, 255, .1); border-color: #fff; }

/* Visual: founders cut-out on halftone, coral orbit + journey timeline */
.ab-hero-visual {
  position: relative;
  aspect-ratio: 800 / 660;      /* anchored to the top of the copy: orbit + heads level with the headline */
  margin: -120px -5vw 0 0;  /* lifted: orbit starts just under the header, heads level with the headline */
}

.ab-halftone {
  position: absolute;
  left: 6%;
  top: 14%;
  width: 72%;
  height: 76%;
  background: radial-gradient(circle, rgba(123, 115, 255, .45) 0, transparent 62%);
}
.ab-halftone::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#A7ABFF 2.6px, transparent 2.9px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(circle at 55% 45%, #000 12%, transparent 62%);
          mask-image: radial-gradient(circle at 55% 45%, #000 12%, transparent 62%);
  opacity: .8;
}

.ab-hero-orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: #FF6B6B;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}

.ab-hero-visual picture { position: absolute; left: 1%; bottom: -12%; width: 95%; }
.ab-founders-img { display: block; width: 100%; height: auto; }

.ab-node {
  position: absolute;
  z-index: 3;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: #FF6B6B;
  box-shadow: 0 0 0 7px rgba(255, 107, 107, .22), 0 0 22px rgba(255, 107, 107, .55);
}
.ab-node--top { left: 87.5%; top: 18.8%; }
.ab-node--now { left: 86.25%; top: 65.3%; }

.ab-tl {
  position: absolute;
  z-index: 3;
  left: 84%;
  top: 0;
  width: 18%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ab-tl li {
  position: absolute;
  left: 0;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.35;
  color: #DCDAFF;
}
.ab-tl li::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #A7ABFF;
}
.ab-tl b {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
.ab-tl .t1 { top: 26.5%; left: -2.2%; }
.ab-tl .t2 { top: 37%; left: -2%; }
.ab-tl .t3 { top: 49.5%; left: -1%; }
.ab-tl .t4 { top: 63%; left: 7.5%; }
.ab-tl .now::before { display: none; }
.ab-tl .now b { font-size: 18px; letter-spacing: .03em; }


.ab-hero-note {
  margin: 26px 0 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: #A7ABFF;
}

.ab-section p:not(.kicker):not(.ab-role) { margin: 0 0 16px; font-size: 17px; line-height: 1.7; color: #4c4658; }
.ab-section .h2 { margin-bottom: 28px; }
.ab-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8%;
  align-items: center;
}


/* ---------- Our purpose ---------- */
.ab-purpose { background: #fff; }

.ab-purpose-art {
  position: relative;
  height: 470px;
  overflow: hidden;
  border-radius: 42px 42px 120px 42px;
  background: radial-gradient(circle at 80% 15%, #7B73FF 0, transparent 45%),
              linear-gradient(145deg, #CAC7FF 0%, #6D5BFF 48%, #540DEE 80%, #3A01AC 100%);
}
.ab-purpose-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .42) 2px, transparent 2.3px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(130deg, #000 0%, transparent 60%);
          mask-image: linear-gradient(130deg, #000 0%, transparent 60%);
}
.ab-pa-orbit {
  position: absolute;
  width: 650px;
  height: 650px;
  left: -90px;
  top: -110px;
  border: 2px solid #FF6B6B;
  border-radius: 50%;
  transform: rotate(-22deg);
}
.ab-pa-small {
  position: absolute;
  z-index: 1;
  top: 10%;
  left: 9%;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
}
.ab-pa-big {
  position: absolute;
  z-index: 1;
  left: 9%;
  bottom: 10%;
  max-width: 490px;
  font-size: clamp(38px, 4vw, 62px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.055em;
  color: #fff;
}


/* ---------- What we believe ---------- */
.ab-beliefs { background: #faf9fc; }
.ab-beliefs-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 60px;
  margin-bottom: 50px;
}
.ab-beliefs-head .h2 { max-width: 900px; margin-bottom: 0; }
.ab-beliefs-head > p:not(.kicker) { max-width: 390px; margin: 0; }

.ab-belief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 65px; }
.ab-belief {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 22px;
  padding: 30px 0 36px;
  border-top: 1px solid var(--line);
}
.ab-num { font-size: 15px; font-weight: 800; color: #FF6B6B; }
.ab-belief h3 { margin: 0 0 12px; font-size: clamp(23px, 2vw, 30px); line-height: 1.18; letter-spacing: -.035em; color: var(--ink); }
.ab-section .ab-belief p { font-size: 16px; margin: 0; }


/* ---------- Our founders ---------- */
.ab-founders { background: #fff; }
.ab-founders-top { max-width: 970px; margin-bottom: 55px; }
.ab-hl { color: var(--purple); font-weight: 700; }

.ab-founder-layout {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 5%;
  align-items: center;
}
.ab-founder-photo {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 400px;
  padding-top: 40px;
  border-radius: 40px 40px 100px 40px;
  background: radial-gradient(circle at 78% 20%, #7B73FF 0, transparent 50%),
              linear-gradient(130deg, #EDECFF 0%, #CAC7FF 45%, #6D5BFF 100%);
}
.ab-fp-orbit {
  position: absolute;
  width: 500px;
  height: 500px;
  left: 10%;
  top: -25%;
  border: 1.5px solid #FF6B6B;
  border-radius: 50%;
}
.ab-founder-photo picture { position: relative; z-index: 1; width: 100%; }
.ab-founder-photo img { display: block; width: 100%; height: auto; }

.ab-bios { display: grid; gap: 26px; }
.ab-bio { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.ab-bio h3 { margin: 0 0 4px; font-size: clamp(23px, 2vw, 30px); letter-spacing: -.035em; color: var(--ink); }
.ab-role {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--purple);
}
.ab-section .ab-bio p:not(.ab-role) { font-size: 16px; margin: 0; }


/* ---------- Our backing (dark) ---------- */
.ab-backing { background: #2E008C; color: #fff; }
.ab-backing > .ab-orbit { width: 500px; height: 500px; right: -170px; top: -170px; border-width: 1px; transform: none; }
.ab-backing .kicker { color: #A7ABFF; }
.about-page .ab-backing .h2 { color: #fff; max-width: 700px; }
.about-page .ab-backing .h2 span { color: #A7ABFF; }
.ab-section.ab-backing p:not(.kicker) { color: #DCDAFF; }
.ab-stem-btn { margin-top: 16px; }

.ab-stem-side { padding: 40px 0; }
.ab-stem-mark {
  font-size: clamp(55px, 7vw, 110px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.07em;
  color: #A7ABFF;
}
.ab-stem-mark span { color: #FF6B6B; }
.ab-stem-sub {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #CAC7FF;
}
.ab-rule { height: 1px; margin: 35px 0; background: rgba(255, 255, 255, .3); }
.ab-stem-side h3 { max-width: 460px; margin: 0 0 20px; font-size: clamp(30px, 3.1vw, 48px); line-height: 1.08; letter-spacing: -.045em; color: #fff; }


/* ---------- Our ambition ---------- */
.ab-ambition { background: #fff; padding-bottom: 40px; }
.ab-ambition-copy { max-width: 960px; }
.ab-ambition-copy p:not(.kicker) { max-width: 790px; }


/* ---------- CTA ---------- */
.ab-cta-wrap { padding: 40px 0 100px; }
.ab-cta-box {
  position: relative;
  overflow: hidden;
  padding: 65px 7%;
  border-radius: 35px;
  color: #fff;
  background: radial-gradient(circle at 85% 10%, #6139FF 0, transparent 45%), #540DEE;
}
.ab-cta-box > .ab-orbit { width: 440px; height: 440px; right: -120px; top: -240px; border-width: 1px; transform: none; }
.ab-cta-box .kicker { color: #CAC7FF; }
.about-page .ab-cta-box .h2 { position: relative; z-index: 1; margin: 16px 0 22px; font-size: clamp(40px, 4.4vw, 68px); color: #fff; }
.ab-cta-box p { position: relative; z-index: 1; max-width: 750px; margin: 0 0 30px; font-size: 18px; line-height: 1.6; color: #eee8ff; }
.ab-cta-box .actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; }


/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .ab-hero-grid, .ab-split, .ab-founder-layout { grid-template-columns: 1fr; gap: 50px; }
  .ab-hero-grid { padding-top: 10px; }
  .ab-hero-copy { padding-bottom: 10px; }
  .ab-hero-visual { margin-right: -5vw; }
  .ab-beliefs-head { display: block; }
  .ab-beliefs-head > p:not(.kicker) { margin-top: 20px; }
}

@media (max-width: 900px) {
  .ab-section { padding: 80px 0; }
  .ab-belief-grid { grid-template-columns: 1fr; }
  .ab-purpose-art { height: 390px; }
}

@media (max-width: 600px) {
  /* phones: photo full width, orbit/timeline hidden */
  .ab-hero-visual { aspect-ratio: auto; height: 300px; margin: 0 -6vw; }
  .ab-hero-visual picture { width: 100%; left: 0; bottom: 0; }
  .ab-hero-orbit, .ab-node, .ab-tl { display: none; }
  .ab-purpose-art { height: 330px; }
  .ab-founder-photo { min-height: 0; }
  .ab-cta-box { padding: 45px 26px; border-radius: 25px; }
  .ab-belief { grid-template-columns: 36px 1fr; gap: 14px; }
}

/* Hero stacks a little earlier than the other sections so the timeline labels keep room */
@media (max-width: 1100px) and (min-width: 601px) {
  .ab-hero-grid { grid-template-columns: 1fr; gap: 20px; padding-top: 10px; }
  .ab-hero-copy { padding-bottom: 10px; max-width: 720px; }
  .ab-hero-visual { margin: 0 -2vw 0 -5vw; }
  .ab-hero-visual picture { bottom: 0; }
}

/* Hero photo removed for now: on phones the visual would be an empty block, so hide it until the new image arrives */
@media (max-width: 600px) { .ab-hero-visual { display: none; } }

/* ---------- Our purpose: photo collage (assets/about-purpose.*) with the Phixr logo in the centre disc ---------- */
.ab-purpose-visual { position: relative; margin: 0; }
.ab-purpose-visual picture img { display: block; width: 100%; height: auto; }
.ab-pv-logo {
  position: absolute;
  left: 49.78%;
  top: 50.33%;
  width: 12.6%;           /* sits inside the 17.5%-wide disc */
  height: auto;
  transform: translate(-50%, -46%);
}
@media (max-width: 1000px) {
  .ab-purpose-visual { max-width: 640px; margin: 0 auto; }
}

/* Panel headlines set in HTML (one size for both), scaled with the image via container units */
.ab-purpose-visual { container-type: inline-size; width: 100%; }
/* desktop: give the collage more of the row and let it run a little past the content edge */
@media (min-width: 1001px) {
  .ab-purpose .ab-split { grid-template-columns: .95fr 1.05fr; gap: 4%; }
  .ab-purpose-visual { width: calc(100% + 4vw); margin-right: -4vw; }
}
.ab-pv-text {
  position: absolute;
  display: block;
  margin: 0;
  font-size: 4.8cqw;
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.045em;
  color: #fff;
  pointer-events: none;
}
.ab-pv-l { left: 7.6%; top: 40.4%; }
.ab-pv-r { left: 65.2%; top: 47.0%; }


/* ---------- What we believe: four principles, big lilac numerals, coral orbits ---------- */
.ab-beliefs .h2 .ab-dot { font-style: normal; color: #7B73FF; }
.ab-beliefs-head { align-items: center; margin-bottom: 40px; }

.ab-principles {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 20px;
}
/* centre divider + row divider */
.ab-principles::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.ab-principles::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, var(--line) 0 48.5%, transparent 48.5% 51.5%, var(--line) 51.5% 100%);
}

.ab-pr-orbits {
  position: absolute;
  inset: -2% -3% -4% -4%;
  width: 107%;
  height: 106%;
  overflow: visible;
  fill: none;
  stroke: #FF6B6B;
  stroke-width: 1.4;
  opacity: .8;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.ab-pr-orbits path { vector-effect: non-scaling-stroke; }
.ab-pr-orbits path.fade { opacity: .45; }
.ab-pr-node {
  position: absolute;
  z-index: 1;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: #FF6B6B;
  box-shadow: 0 0 0 6px rgba(255, 107, 107, .16);
}
.ab-pr-node.n1 { left: -1.65%; top: 38.77%; }
.ab-pr-node.n2 { left: 13.12%; top: 100.94%; }
.ab-pr-node.n3 { left: 97.11%; top: 14.31%; }
.ab-pr-node.n4 { left: 66.62%; top: 102.98%; }

.ab-pr {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 46% 1fr;
  align-items: center;
  gap: 3%;
  min-height: 270px;
  padding: 40px 5% 40px 0;
}
.ab-pr:nth-child(even of .ab-pr) { padding-left: 5%; padding-right: 0; }

.ab-pr-num {
  position: relative;
  font-size: clamp(120px, 13.5vw, 215px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.07em;
  color: #E6E4FF;
  user-select: none;
}
/* soft halftone behind each numeral */
.ab-pr-num::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12% 10% -12% -18%;
  background-image: radial-gradient(#A7ABFF 1.6px, transparent 1.9px);
  background-size: 12px 12px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse at 30% 50%, #000 0, transparent 68%);
          mask-image: radial-gradient(ellipse at 30% 50%, #000 0, transparent 68%);
}

.ab-pr-copy h3 {
  margin: 0 0 14px;
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.12;
  letter-spacing: -.035em;
  color: var(--ink);
}
.ab-section .ab-pr-copy p { margin: 0; font-size: 17px; line-height: 1.6; color: #4c4658; }

@media (max-width: 1000px) {
  .ab-pr { grid-template-columns: 38% 1fr; min-height: 230px; }
}
.ab-pr-dot, .ab-pr-links { display: none; }

/* Mobile: zig-zag with a coral S-curve joining each numeral (as "More than capital" on the homepage; js/about.js draws the line) */
@media (max-width: 760px) {
  .ab-principles { display: block; margin-top: 30px; }
  .ab-principles::before, .ab-principles::after, .ab-pr-orbits, .ab-pr-node { display: none; }
  .ab-pr-links { display: block; position: absolute; top: 0; left: 0; z-index: 0; overflow: visible; pointer-events: none; }
  .ab-pr, .ab-pr:nth-child(even of .ab-pr) {
    display: grid;
    grid-template-columns: 118px 1fr;
    grid-template-areas: "num copy";
    column-gap: 20px;
    align-items: center;
    min-height: 0;
    padding: 0;
    margin: 0 0 56px;
    border: 0;
  }
  .ab-principles .ab-pr:nth-child(even of .ab-pr) { grid-template-columns: 1fr 118px; grid-template-areas: "copy num"; }
  .ab-pr:last-of-type { margin-bottom: 0; }
  .ab-pr-num { grid-area: num; position: relative; z-index: 1; font-size: 104px; text-align: center; }
  .ab-pr-copy { grid-area: copy; }
  .ab-pr-copy h3 { font-size: 22px; margin-bottom: 8px; }
  .ab-section .ab-pr-copy p { font-size: 15px; line-height: 1.55; }
  .ab-pr-dot {
    display: block;
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: #FF6B6B;
    box-shadow: 0 0 0 7px rgba(255, 107, 107, .18);
  }
}
}
@media (max-width: 1000px) { .ab-beliefs-head > p:not(.kicker) { margin-top: 22px; } }
@media (max-width: 1000px) { .ab-section .ab-beliefs-head > p:not(.kicker) { margin-top: 22px; } }
/* mobile: dot sits beside the numeral — left of 01/03, right of 02/04 */
@media (max-width: 760px) {
  .ab-pr-num { display: inline-block; justify-self: center; }
  .ab-pr-dot { left: -12px; }
  .ab-principles .ab-pr:nth-child(even of .ab-pr) .ab-pr-dot { left: auto; right: -12px; margin: -7px -7px 0 0; }
}

/* Founders: office photo in the brand frame, soft purple grade at the foot + coral orbit over the top */
.ab-founder-layout { grid-template-columns: .9fr 1.1fr; }
.ab-founder-photo { display: block; min-height: 0; padding: 0; background: #EDECFF; aspect-ratio: 620 / 700; }
.ab-founder-photo picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.ab-founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ab-founder-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(46, 0, 140, .38) 0%, rgba(84, 13, 238, 0) 35%);
  pointer-events: none;
}
.ab-fp-orbit { z-index: 2; width: 130%; height: 60%; left: -40%; top: auto; bottom: -22%; border-color: rgba(255, 107, 107, .9); transform: rotate(-12deg); }
@media (max-width: 1000px) { .ab-founder-photo { max-width: 560px; } }
.ab-founder-photo .ab-fp-orbit { display: none; }
@media (max-width: 1000px) { .ab-founder-layout { grid-template-columns: 1fr; gap: 36px; } .ab-founder-photo { width: 100%; margin: 0 auto; } }
.ab-founder-photo::after { display: none; }

/* ---------- Typography aligned with the homepage (css/home.css) ----------
   Headings: .h2 70px / .96 line height / -.055em. Body copy: 18px / 1.65 (as .lead). */
.about-page .h2 { line-height: .96; }
.about-page .h2 + p, .about-page .h2 { padding-bottom: .04em; }  /* keeps descenders (g, y, p) clear */
.ab-section p:not(.kicker):not(.ab-role),
.ab-cta-box p,
.ab-hero .lead { font-size: 18px; line-height: 1.65; }
.ab-section .ab-belief p, .ab-section .ab-bio p:not(.ab-role) { font-size: 16px; line-height: 1.65; }
.about-page .ab-cta-box .h2 { font-size: clamp(40px, 5vw, 70px); }
.about-page .ab-h1 { font-size: clamp(40px, 5vw, 70px); }
@media (max-width: 760px) { .ab-section .ab-pr-copy p { font-size: 16px; } }

/* ---------- Our backing: split panel — copy on Phixr deep blue, Hong Kong photo full-bleed right ---------- */
.ab-backing {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 54% 46%;
  min-height: 640px;
  background: radial-gradient(circle at 20% 10%, #3A01AC 0, transparent 55%), #2E008C;
  color: #fff;
}
.ab-bk-copy { position: relative; display: flex; align-items: center; }
.ab-bk-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 700px;
  padding: 110px 60px 110px max(5vw, calc((100vw - 1240px) / 2));
}
.ab-backing .kicker { color: #A7ABFF; }
.about-page .ab-backing .h2 { color: #fff; margin: 22px 0 28px; }
.about-page .ab-backing .h2 span { color: #A7ABFF; }
.ab-backing p { margin: 0 0 18px; font-size: 18px; line-height: 1.65; color: #DCDAFF; max-width: 600px; }
.ab-backing .ab-stem-btn { margin-top: 18px; }
.ab-backing .ab-bk-copy > .ab-orbit {
  width: 520px; height: 520px; right: -150px; top: -300px; left: auto;
  border-width: 1.5px; transform: none; opacity: .9;
}
.ab-bk-photo { position: relative; min-height: 100%; }
.ab-bk-photo picture, .ab-bk-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ab-bk-photo img { object-fit: cover; object-position: 60% 50%; display: block; }

@media (max-width: 1000px) {
  .ab-backing { grid-template-columns: 1fr; min-height: 0; }
  .ab-bk-inner { max-width: none; padding: 80px 5vw 60px; }
  .ab-bk-photo { height: 340px; }
}
@media (max-width: 600px) { .ab-bk-photo { height: 260px; } }
section.ab-backing { padding: 0; }
.ab-backing .ab-bk-copy > .ab-orbit { right: -60px; top: -330px; }
@media (max-width: 1000px) { .ab-backing .ab-bk-copy > .ab-orbit { width: 320px; height: 320px; right: -170px; top: -170px; } }
.ab-backing { background: linear-gradient(180deg, #540DEE 0%, #6139FF 55%, #6D5BFF 100%); }

/* ---------- Our ambition: intro + three photo cards, aligned to the page grid (.wrap) ---------- */
.ab-ambition { padding-bottom: 90px; }
.ab-amb-orbit { width: 700px; height: 700px; right: -220px; top: -340px; border-width: 1.5px; transform: none; }
.ab-ambition-copy { max-width: 900px; }
.ab-amb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 48px;
}
.ab-amb-card { padding: 0 32px; border-left: 1px solid var(--line); }
.ab-amb-card:first-child { padding-left: 0; border-left: 0; }
.ab-amb-card:last-child { padding-right: 0; }
.ab-amb-card img {
  display: block;
  width: 100%;
  aspect-ratio: 520 / 200;
  height: auto;
  object-fit: cover;
  border-radius: 14px;
}
.ab-amb-card h3 {
  position: relative;
  margin: 44px 0 10px;
  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1.2;
  letter-spacing: -.035em;
  color: var(--ink);
}
.ab-amb-card h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: -22px;
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: #FF6B6B;
}
.ab-section .ab-amb-card p { margin: 0; font-size: 16px; line-height: 1.6; }

@media (max-width: 900px) {
  .ab-amb-grid { grid-template-columns: 1fr; gap: 44px; }
  .ab-amb-card, .ab-amb-card:first-child, .ab-amb-card:last-child { padding: 0; border-left: 0; }
  .ab-amb-orbit { width: 380px; height: 380px; right: -200px; top: -200px; }
}
/* equal-width cards: gap for spacing, divider drawn in the gap */
.ab-amb-grid { column-gap: 64px; }
.ab-amb-card, .ab-amb-card:first-child, .ab-amb-card:last-child { position: relative; padding: 0; border-left: 0; }
.ab-amb-card + .ab-amb-card::before { content: ""; position: absolute; left: -32px; top: 0; bottom: 0; width: 1px; background: var(--line); }
@media (max-width: 900px) { .ab-amb-card + .ab-amb-card::before { display: none; } .ab-amb-orbit { display: none; } }

/* titles: same scale as the homepage (78px desktop / 46px mobile) */
.about-page .h2, .about-page .ab-h1, .about-page .ab-cta-box .h2 { font-size: clamp(46px, 5.4vw, 78px); }
@media (max-width: 600px) { .about-page .h2, .about-page .ab-h1, .about-page .ab-cta-box .h2 { font-size: 46px; } }

/* ---------- Hero v2: Phixr blue — deep at bottom right, lighter towards top left;
   three-photo collage with a coral orbit sweeping round it ---------- */
.ab-hero {
  background: radial-gradient(circle at 70% 45%, rgba(123, 115, 255, .18) 0, transparent 45%),
              linear-gradient(135deg, #6D5BFF 0%, #6139FF 30%, #540DEE 68%, #4700CD 100%);
}
.ab-hero-grid { align-items: center; padding-bottom: 70px; grid-template-columns: .85fr 1.15fr; gap: 56px; }
.ab-hv2 { aspect-ratio: auto; margin: 0; display: block !important; }
.ab-hv-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 47fr 53fr;
  gap: 22px;
}
.ab-hv-grid picture { display: block; overflow: hidden; border-radius: 18px; box-shadow: 0 24px 50px rgba(20, 0, 80, .28); }
.ab-hv-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-hv-grid .p1 { grid-column: 1 / -1; aspect-ratio: 844 / 350; }
.ab-hv-grid .p2, .ab-hv-grid .p3 { aspect-ratio: 16 / 10; }
.ab-hv-orbit {
  position: absolute;
  z-index: 1;
  inset: -12% -8% -14% -12%;
  width: 120%;
  height: 126%;
  overflow: visible;
  fill: none;
  stroke: #FF6B6B;
  stroke-width: 1.6;
  opacity: .9;
  pointer-events: none;
}
.ab-hv-orbit path { vector-effect: non-scaling-stroke; }
.ab-hv-node {
  position: absolute;
  z-index: 3;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: #FF6B6B;
  box-shadow: 0 0 0 10px rgba(255, 107, 107, .22), 0 0 26px rgba(255, 107, 107, .55);
}
.ab-hv-node.n1 { left: 3%; top: 2%; }
.ab-hv-node.n2 { left: 92%; top: 104%; }
.ab-hero-dots { opacity: .14; }

@media (max-width: 1100px) {
  .ab-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .ab-hv2 { margin: 0 !important; }
}
@media (max-width: 600px) {
  .ab-hero-visual.ab-hv2 { display: block !important; height: auto; margin: 0 !important; }
  .ab-hv-grid { gap: 12px; }
  .ab-hv-grid picture { border-radius: 14px; }
  .ab-hv-orbit, .ab-hv-node { display: none; }
}
.ab-hero-visual.ab-hv2 picture { position: relative; left: auto; bottom: auto; width: auto; }
.ab-hero-visual.ab-hv2 { margin: 0 !important; aspect-ratio: auto !important; height: auto !important; }
/* hero v2 refinements: one continuous orbit ellipse behind the photos, nodes on the ring; equal-height lower photos */
.ab-hv-node { display: none; }
.ab-hv-orbit { z-index: 1; inset: -14% -10% -14% -10%; width: 120%; height: 128%; }
.ab-hv-orbit ellipse { fill: none; stroke: #FF6B6B; stroke-width: 1.6; }
.ab-hv-orbit circle { fill: #FF6B6B; stroke: none; }
.ab-hv-orbit circle.glow { fill: rgba(255, 107, 107, .25); }
.ab-hv-grid .p2, .ab-hv-grid .p3 { aspect-ratio: auto; height: clamp(150px, 14.5vw, 225px); }
@media (max-width: 600px) { .ab-hv-grid .p2, .ab-hv-grid .p3 { height: 130px; } }
.ab-hv-orbit { z-index: 3; inset: -12% -8% -12% -6%; width: 114%; height: 124%; }
.ab-hv-grid { z-index: 2; }
.ab-hv-orbit ellipse { stroke-dasharray: none; }
/* orbit sits behind the photos; drawn in a box slightly larger than the collage; nodes placed on the ring */
.ab-hv-orbit { z-index: 1; left: -4%; top: -14%; right: auto; bottom: auto; inset: auto; width: 112%; height: 128%; position: absolute; }
.ab-hv-orbit { left: -4%; top: -14%; }
.ab-hv-orbit ellipse { vector-effect: non-scaling-stroke; }
.ab-hv-dot {
  position: absolute; z-index: 3;
  left: calc(-4% + var(--x) * 1.12%);
  top: calc(-14% + var(--y) * 1.28%);
  width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: #FF6B6B;
  box-shadow: 0 0 0 10px rgba(255, 107, 107, .22), 0 0 26px rgba(255, 107, 107, .5);
}
@media (max-width: 600px) { .ab-hv-dot { display: none; } }
@media (max-width: 1100px) { .ab-hv-grid .p2, .ab-hv-grid .p3 { height: clamp(130px, 24vw, 260px); } }
.ab-founders-top { margin-bottom: 0; } .ab-founder-layout { margin-top: 80px; } @media (max-width: 760px) { .ab-founder-layout { margin-top: 48px; } }

/* ---------- Animated coral lines (js/about-lines.js): hero orbit, purpose collage, principles ---------- */
.ab-pv-line { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 912 / 774; overflow: visible; pointer-events: none; z-index: 2; }
.ab-pv-line path { fill: none; stroke: #FF6B6B; stroke-width: 2.6; stroke-linecap: round; }
.ab-pv-line circle { fill: #FF6B6B; }
.motion .ab-hv-orbit:not(.is-on), .motion .ab-pr-orbits:not(.is-on), .motion .ab-pv-line:not(.is-on) path { visibility: hidden; }
.motion .ab-hv-dot, .motion .ab-pr-node, .motion .ab-pv-line .dl-dot { opacity: 0; transform: scale(.2); transition: opacity .4s ease, transform .7s cubic-bezier(.34,1.56,.64,1); }
.motion .ab-pv-line .dl-dot { transform-box: fill-box; transform-origin: center; }
.motion .ab-hv-dot.on, .motion .ab-pr-node.on, .motion .ab-pv-line .dl-dot.on { opacity: 1; transform: none; }
/* drawn-in orbits: dash lengths must be in the SVG's own units, so no non-scaling stroke here */
.ab-pr-orbits, .ab-pr-orbits path { vector-effect: none; stroke-width: 1.1; }
.ab-pv-line .dl-dot .halo { fill: rgba(255, 107, 107, .22); }
/* founders photo: show the whole image (no side crop) */
.ab-founder-photo { aspect-ratio: 673 / 841; }
.ab-founder-photo img { object-fit: cover; object-position: center; }