/* ============================================================
   Contactable — About Us page styles
   Loads on top of tokens.css + iip.css.
   Figma: About Us • Desktop (node 10460-65598)
   ============================================================ */

/* ===== Hero (Header / 5) ===== */
.ab-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 750px;
  padding: 112px 0;
  background-color: #2a1856;
  background-image: url("../assets/brand/about-hero-bg.webp");
  /* Face-anchored crop (Figma 11233-1890), Pillow-verified at 1280/1470/1920.
     Height-locked zoom (auto 160% of the 750px box = constant 2141px-wide
     render) so the vertical crop never changes; the calc pins the subject's
     eye (60% across the source) to 63vw at every width. min(…, 0px) stops
     the image detaching past ~2040px. Constant 1285px = 0.60 × 2141.
     Relies on the fixed 750px min-height — re-solve if that changes. */
  background-size: auto 160%;
  background-position: min(calc(63vw - 1285px), 0px) 63%;
  background-repeat: no-repeat;
}
/* Copy aligns with the nav logo, not the centred .wrap — same gutter clamp
   as .nav__inner, so they line up at every width (user-requested; Figma
   puts the copy hard-left of the woman, wrap-centring pushed it into her). */
.ab-hero__inner { position: relative; z-index: 1; width: 100%; max-width: none; padding-inline: clamp(24px, 6vw, 88px); }
.ab-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 560px; }
.ab-hero__eyebrow { color: #fff; font-size: clamp(15px, 1.56vw, 20px); } /* hero-eyebrow size, matches cap-hero__eyebrow */
.ab-hero__title {
  font-family: "Archivo Black", "Google Sans Flex", sans-serif;
  font-weight: 400;
  font-size: 75px;
  line-height: 1.1;
  color: #fff;
  text-transform: uppercase;
  margin: 0;
  text-wrap: wrap;
}
.ab-hero__text { font-size: 24px; font-weight: 600; line-height: 1.5; color: #fff; margin: 0; max-width: 521px; }

/* ===== Why we exist (Layout / 237) ===== */
.ab-why { background: #fff; padding: 112px 0; }
.ab-why__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.ab-why__head { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 1074px; text-align: center; }
.ab-why__eyebrow { color: #8087b0; }
.ab-why__heading { font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); font-weight: 700; line-height: 1.1; color: var(--deep-orange); margin: 0; text-wrap: wrap; }
.ab-why__body { display: flex; flex-direction: column; gap: 18px; }
.ab-why__body p { font-size: 18px; line-height: 1.5; color: var(--deep-blue); margin: 0; }
.ab-why__body-strong { font-weight: 700; }
.ab-why__subheading { font-size: 32px; font-weight: 600; line-height: 1.3; color: var(--deep-orange); text-align: center; margin: 24px 0 0; }
.ab-why__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; width: 100%; margin-top: 24px; }
.ab-pillar {
  background: var(--soft-grey);
  border: 1px solid #d2d2d2;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.ab-pillar__icon {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--periwinkle);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.ab-pillar__icon .material-symbols-rounded { color: #fff; font-size: 38px; }
.ab-pillar__title { font-size: 32px; font-weight: 700; line-height: 1.3; color: var(--deep-blue); margin: 0; }
.ab-pillar__text { font-size: 16px; line-height: 1.5; color: var(--deep-blue); margin: 0; }

/* ===== What makes us different (Layout / 399) ===== */
.ab-diff { background: var(--soft-grey); padding: 112px 0; }
.ab-diff__inner { display: flex; flex-direction: column; align-items: center; gap: 80px; }
.ab-diff__head { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 768px; text-align: center; }
.ab-diff__heading { font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); font-weight: 700; line-height: 1.1; color: var(--deep-orange); margin: 0; text-wrap: wrap; }
.ab-diff__lead { font-size: 20px; font-weight: 500; line-height: 1.5; color: var(--deep-blue); margin: 0; }
.ab-diff__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; width: 100%; align-items: stretch; }
.ab-diff-card {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
}
.ab-diff-card__img { height: 212px; flex: none; overflow: hidden; }
.ab-diff-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-diff-card__body { padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.ab-diff-card__cat { font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--periwinkle); margin: 0; }
.ab-diff-card__title { font-size: 24px; font-weight: 600; line-height: 1.4; color: var(--deep-orange); margin: 0; }
.ab-diff-card__text { font-size: 16px; line-height: 1.5; color: var(--deep-blue); margin: 0; }

/* ===== Stats cluster (Stats / 55) ===== */
.ab-stats { background: #fff; padding: 112px 0 114px; }
.ab-stats__inner { display: flex; gap: 80px; align-items: center; }
.ab-stats__copy { width: 430px; flex: none; display: flex; flex-direction: column; gap: 32px; }
.ab-stats__heading { font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); font-weight: 700; line-height: 1.1; color: var(--deep-blue); margin: 0; text-wrap: wrap; }
.ab-stats__text { font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--deep-blue); margin: 0; }
.ab-stats__actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.ab-btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 24px; border-radius: 9999px;
  border: 1px solid var(--deep-blue); color: var(--deep-blue);
  font-size: 16px; font-weight: 800; text-decoration: none;
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.ab-btn-outline:hover { background: var(--deep-blue); color: #fff; }

/* Staggered cluster — equal circles with real gaps between them (mirrors the
   Figma absolute layout, node 11099-4221 = same 715×536 box as homepage Stats).
   Container is a fixed-aspect box; circles positioned in % of it. */
.ab-stats__cluster {
  flex: 1 0 0; min-width: 0;
  position: relative;
  width: 100%; max-width: 715px;
  aspect-ratio: 715 / 536;
  margin-left: auto;
}
.ab-bubble {
  position: absolute;
  width: 38.32%;       /* 274 / 715 — leaves the Figma gap between circles */
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; box-sizing: border-box;
  container-type: inline-size;  /* cqi below = % of the circle's own width */
  box-shadow: 0 10px 34px rgba(245,76,44,0.20), 0 0 36px rgba(245,76,44,0.12);
}
.ab-bubble__num { font-size: 21.9cqi; font-weight: 700; line-height: 1.2; }   /* 60 / 274 */
.ab-bubble__label { font-size: 8.76cqi; font-weight: 700; line-height: 1.3; margin-top: 4px; max-width: 82%; text-wrap: balance; }  /* 24 / 274 */
/* positions as % of the 715×536 bounding box (same staggered layout as .hp-stat) */
.ab-bubble--1 { left: 20.84%; top: 0;      background: linear-gradient(135deg, #F54C2C 0%, #FDA104 100%); z-index: 1; } /* 100M+ */
.ab-bubble--2 { left: 61.68%; top: 0;      background: linear-gradient(225deg, #F54C2C 0%, #FDA104 100%); z-index: 1; } /* 15 */
.ab-bubble--3 { left: 0;      top: 48.88%; background: linear-gradient(45deg,  #FDA104 0%, #F54C2C 100%); z-index: 1; } /* 65M+ */
.ab-bubble--4 { left: 41.26%; top: 48.88%; background: linear-gradient(315deg, #F54C2C 0%, #FDA104 100%); z-index: 1; } /* 1500+ */

/* ===== Funding (Stats / 19) ===== */
.ab-fund { background: var(--soft-grey); padding: 85px 0; }
.ab-fund__inner { display: grid; grid-template-columns: 773fr 522fr; align-items: stretch; gap: 0; }
.ab-fund__inner > * { min-width: 0; }  /* stop wide content (e.g. the $13.5M display text) blowing the tracks past the gutters */
.ab-fund__card {
  background: var(--deep-blue);
  border-radius: 20px;
  padding: 48px;
  display: flex; flex-direction: column;
  min-height: 472px;
  position: relative;
}
.ab-fund__eyebrow { color: #fff; margin: 0; font-size: 20px; }
.ab-fund__amount {
  font-family: "Archivo Black", "Google Sans Flex", sans-serif;
  font-weight: 400;
  font-size: clamp(44px, 10vw, 150px);  /* floor 44 (was 72): at 375px the un-wrappable "$13.5M" was 348px wide, blowing the grid track past the gutters (section shifted right + 7px overflow). 10vw governs ≥440px, so tablet/desktop unchanged. */
  line-height: 1.1;
  text-transform: uppercase;
  margin: 48px 0 0;   /* gap below the eyebrow (previously held by the removed USD label) */
  width: fit-content;   /* box hugs the text so the gradient maps to the glyphs, not the empty block width (kept the "M" from stopping at magenta) */
  background: linear-gradient(to right, #6962F0 4.47%, #7747EE 29.32%, #F54C2C 70.73%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ab-fund__note { font-size: 16px; line-height: 1.5; color: #fff; margin: auto 0 32px; padding-left: 28px; border-left: 1px solid rgba(255,255,255,0.5); max-width: 650px; }
.ab-fund__quote { padding: 48px 16px 48px 24px; display: flex; flex-direction: column; justify-content: flex-start; gap: 24px; }
.ab-fund__quote-text { font-size: 20px; font-weight: 700; font-style: italic; line-height: 1.5; color: var(--deep-blue); margin: 0; }
.ab-fund__person { margin-top: 8px; } /* sits just under the quote (was margin-top:auto — pinned to the card-height column bottom, leaving a big gap) */
.ab-fund__quote .ab-fund__btn { margin-top: 40px; }
.ab-fund__person { display: flex; flex-direction: column; }
.ab-fund__name { font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--deep-blue); }
.ab-fund__role { font-size: 20px; font-weight: 500; line-height: 1.5; color: var(--deep-blue); }
.ab-fund__btn { align-self: flex-start; }

/* ===== Values (Layout / 399) ===== */
.ab-values { background: #fff; padding: 104px 0 112px; }
.ab-values__inner { display: flex; flex-direction: column; align-items: center; gap: 53px; }
.ab-values__head { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 1096px; text-align: center; }
.ab-values__eyebrow { color: #8087b0; }
.ab-values__heading { font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); font-weight: 700; line-height: 1.1; color: var(--deep-orange); margin: 0; text-wrap: wrap; }
.ab-values__lead { font-size: 18px; line-height: 1.5; color: var(--deep-blue); margin: 0; }
.ab-values__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 53px; width: 100%; max-width: 1096px; }
.ab-values__grid > * { min-width: 0; }  /* the icon+title head row's min-content (e.g. "Responsibility") was blowing the 1fr track past the gutters on phones, cutting the cards off at the right */
.ab-value {
  border: 2px solid #8087b0;
  border-radius: 30px;
  padding: 32px;
  display: flex; flex-direction: column;
}
.ab-value__head { display: flex; align-items: center; gap: 24px; margin-bottom: 20px; }
.ab-value__dot {
  width: 64px; height: 64px; border-radius: 50%; background: var(--deep-orange); flex: none;
  display: flex; align-items: center; justify-content: center;
}
.ab-value__dot .material-symbols-rounded { color: #fff; font-size: 32px; }
.ab-value__title { font-size: 32px; font-weight: 600; line-height: 1.2; color: var(--deep-blue); margin: 0; }
.ab-value__statement { font-size: 24px; font-weight: 700; font-style: italic; line-height: 1.4; color: var(--periwinkle); margin: 0 0 16px; }
.ab-value__text { font-size: 18px; line-height: 1.5; color: #000; margin: 0; }

/* ===== Final CTA band (CTA / 15) — reuses .final ===== */
.ab-final { padding: 112px 64px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- Hero --- */
/* Ultra-wide (≥2041px): the constant-size render (2141px) stops covering,
   so switch to width-locked 105% — ox=0 keeps the eye at 63vw, the y calc
   keeps it at the same 150px from the top. */
@media (min-width: 2041px) {
  .ab-hero { background-size: 105% auto; background-position: 0px calc(150px - 21.19vw); }
}
@media (max-width: 1024px) { .ab-hero__title { font-size: clamp(44px, 8vw, 75px); } }
/* Tablet (641–900, Figma 11639-2474): shorter box, same face-anchor maths
   re-solved for the 600px height (render 1713px wide; 1027 = 0.60 × 1713).
   Type steps down per the Figma tablet frame: title 48, body 18/400 @ 392. */
@media (max-width: 900px) {
  .ab-hero { min-height: 600px; background-position: min(calc(63vw - 1027px), 0px) 59%; }
  .ab-hero__title { font-size: 48px; }
  .ab-hero__text { font-size: 18px; font-weight: 400; max-width: 392px; }
}
/* Mobile (≤640, Figma 11489-1588): face lower-right under the copy — slight
   zoom past cover (auto 117%), top-anchored, eye panned to ~72vw via 55%. */
@media (max-width: 640px) {
  /* Values derived from the Figma node's own image transform (h 113.34%,
     left -135.89% of a 393×697 frame): eye lands at ~80% across, top-anchored. */
  /* Zoom knob: bigger % sits her LOWER (top-anchored) and larger.
     If you change it, keep the pair: 113.4%↔52%, 122%↔53%. */
  .ab-hero { min-height: 697px; padding: 112px 0 80px; background-size: auto 122%; background-position: 53% top; align-items: flex-start; }
  /* Figma mobile 11489-1588: copy top-aligned, title 36, eyebrow 16,
     body 18/400 in the narrow 224px column (7-line wrap per the mockup) */
  .ab-hero__title { font-size: 36px; }
  .ab-hero__eyebrow { font-size: 16px; letter-spacing: 0.8px; }
  .ab-hero__text { font-size: 18px; font-weight: 400; max-width: 224px; }
}

/* --- Why --- */
@media (max-width: 900px) {
  .ab-why { padding: 80px 0; }
  .ab-why__cards { grid-template-columns: 1fr; gap: 24px; }
}

/* --- Diff --- */
@media (max-width: 1024px) { .ab-diff__row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .ab-diff { padding: 80px 0; }
  .ab-diff__inner { gap: 56px; }
}
@media (max-width: 560px) { .ab-diff__row { grid-template-columns: 1fr; } }

/* --- Stats cluster --- */
@media (max-width: 1024px) {
  /* stat-circle template (matches homepage): circles first, copy centred */
  .ab-stats__inner { flex-direction: column; align-items: center; gap: 56px; }
  .ab-stats__copy { width: 100%; align-items: center; text-align: center; }
  .ab-stats__actions { justify-content: center; }
  .ab-stats__cluster { order: -1; width: 100%; margin: 0 auto; }
}
@media (max-width: 900px) {
  .ab-stats { padding: 80px 0; }
}
/* cqi type scales with the circle at every width, so no phone override needed */

/* --- Funding --- */
/* Tablet-wide (981–1100, incl. 1024): the two columns crowd, so widen the
   gap between the blue card and the quote a touch. Knob: padding-left. */
@media (min-width: 981px) and (max-width: 1100px) {
  .ab-fund__quote { padding-left: 48px; }
  /* Centre the card content as a block so top gap == bottom gap (the card
     stretches to the quote column's height, so justify-center balances it).
     Note flows normally with a gap above — drops the bottom-pin + lift. */
  .ab-fund__card { justify-content: center; }
  .ab-fund__note { margin: 40px 0 0; }
}
@media (max-width: 980px) {
  .ab-fund__inner { grid-template-columns: 1fr; }
  /* Stacked tablet: centre everything horizontally + even vertical rhythm
     between eyebrow / USD / $amount / note. Knob: card gap. */
  .ab-fund__card { min-height: 0; align-items: center; text-align: center; gap: 40px; }
  .ab-fund__amount { margin-top: 0; }   /* card gap owns the vertical rhythm here */
  /* note: drop the left accent line (reads broken under centred text) + let the gap own the spacing */
  .ab-fund__note { margin: 0; padding-left: 0; border-left: 0; }
  /* quote block below the card centres too */
  .ab-fund__quote { padding: 40px 0 0; align-items: center; text-align: center; }
  .ab-fund__person { align-items: center; }
  .ab-fund__quote .ab-fund__btn { align-self: center; margin-top: 0; }
}
@media (max-width: 640px) {
  .ab-fund__card { padding: 32px; }
}

/* --- Values --- */
@media (max-width: 900px) {
  .ab-values { padding: 80px 0; }
  .ab-values__grid { grid-template-columns: 1fr; gap: 24px; }
  .ab-value__title { font-size: 32px; }
  .ab-value__head { gap: 20px; }
  .ab-value__dot { width: 64px; height: 64px; }
  .ab-value__statement { font-size: 24px; }
  .ab-value__text { font-size: 18px; }
}

/* --- Final band --- */
@media (max-width: 900px) { .ab-final { padding: 80px 28px; } }