/* =============================================================
   Forward Finance — About us page
   Companion to pages/about.html.
   Link order: fonts.css → tokens.css → site.css → about.css

   Shared chrome (reset, nav, buttons, hero shell, section shells,
   CTA band, footer) lives in site.css. This file holds only the
   about-page blocks: hero callout cards, purpose statement, what-we-do
   grid, operating pillars, leadership rows, core team, principles and
   the mission band.
   ============================================================= */


/* -------------------------------------------------------------
   Hero
   The hero shell — grid split, type ramp and top spacing — is inherited
   wholesale from .phero in site.css, so this page lines up with Products
   and Contact column for column. Deliberately no overrides here: the
   page-local ones this file used to carry are exactly what made the copy
   column wider and the headline smaller than every other page.
   ------------------------------------------------------------- */
.asset-list { max-width: 560px; }


/* -------------------------------------------------------------
   Hero callout cards (right column)
   ------------------------------------------------------------- */
.hero-cards { display: flex; flex-direction: column; gap: 14px; }

.hcard {
  background: #171f28;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
}
/* The two cards are told apart by their label colour rather than a coloured
   rule along the top edge — same information, less template. */
.hcard-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.hcard.is-gold .hcard-label { color: var(--ff-gold-bright); }
.hcard.is-blue .hcard-label { color: #6BA6FF; }

.hcard-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
  margin-top: 8px;
}
.hcard-body {
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 8px;
}


/* -------------------------------------------------------------
   Section density
   Seven sections at the shared 104px rhythm makes this page very tall.
   Tighten padding and the heading ramp here only — index.html and the
   products page keep the roomier default.
   ------------------------------------------------------------- */
.sec { padding: 72px 0; }
.sec-head { margin-bottom: 40px; }
.sec-head h2 { font-size: clamp(26px, 3vw, 36px); margin-top: 12px; }
.sec-head p { font-size: 16px; margin-top: 12px; }


/* -------------------------------------------------------------
   Why Forward exists
   ------------------------------------------------------------- */
.why-body { max-width: 760px; margin: 0 auto; text-align: center; }
.why-lead {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
.why-sub {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--fg-2);
  margin-top: 16px;
}
.why-sub b { color: var(--fg-1); font-weight: 600; }


/* -------------------------------------------------------------
   What we do — 2x2
   ------------------------------------------------------------- */
.wgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.wcard {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 20px;
  padding: 24px;
  transition: box-shadow .22s var(--ease-forward), transform .22s var(--ease-forward);
}
.wcard:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }

.wcard-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--neutral-100);
  margin-bottom: 18px;
}
.wcard-ico svg { width: 21px; height: 21px; color: var(--fg-2); }
.wcard-ico.is-gold { background: rgba(229, 173, 67, 0.22); }
.wcard-ico.is-gold svg { color: var(--ff-gold-deep); }
.wcard-ico.is-blue { background: rgba(0, 99, 255, 0.09); }
.wcard-ico.is-blue svg { color: var(--fw-blue); }

.wcard h3 { font-size: 17px; font-weight: 600; }
.wcard p { font-size: 13.5px; line-height: 1.55; color: var(--fg-2); margin-top: 8px; }


/* -------------------------------------------------------------
   How we operate — 3 pillars
   ------------------------------------------------------------- */
.ogrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.ocard {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 20px;
  padding: 24px;
}
.ocard-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(0, 99, 255, 0.08);
  margin-bottom: 18px;
}
.ocard-ico svg { width: 21px; height: 21px; color: var(--fw-blue); }

.ocard h3 { font-size: 17.5px; font-weight: 600; }
.ocard ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-1);
}
.ocard li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-2);
}
.ocard li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ff-gold);
}


/* -------------------------------------------------------------
   Leadership — alternating portrait / bio rows
   ------------------------------------------------------------- */
.leaders { display: flex; flex-direction: column; gap: 28px; }

.leader {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  align-items: center;
}
/* mirror every other row: bio left, portrait right */
.leader.is-flip { grid-template-columns: 1fr 280px; }
.leader.is-flip .portrait { order: 2; }
.leader.is-flip .leader-body { order: 1; }

/* portrait: the initials sit underneath, so a missing photo file still
   reads as an intentional placeholder rather than a broken image */
.portrait {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background-color: var(--neutral-200);
  background-image: repeating-linear-gradient(45deg, rgba(16, 24, 32, 0.045) 0 10px, transparent 10px 20px);
  border: 1px solid var(--border-1);
}
.portrait::after {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: rgba(16, 24, 32, 0.16);
}
.portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The supplied portraits are taller than this 4:5 frame (0.70–0.77), so
     cover trims top and bottom. Bias the crop upward to keep heads in
     frame and leave the torso — not a face — behind the quote pill. */
  object-position: center 22%;
  display: block;
}

/* quote pill overlapping the portrait's lower edge */
.portrait-quote {
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: 16px;
  max-width: calc(100% - 28px);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--on-accent);
  background: var(--ff-gold);
  border-radius: 10px;
  padding: 9px 13px;
  box-shadow: var(--shadow-2);
}
.portrait-quote.is-blue { background: var(--fw-blue); color: #fff; }
.portrait-quote.is-teal { background: var(--status-success); color: #fff; }

.leader-body { min-width: 0; }
.leader-rule {
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--ff-gold);
  margin-bottom: 14px;
}
.leader.is-flip .leader-rule { background: var(--fw-blue); }
.leader:nth-child(3) .leader-rule { background: var(--status-success); }

.leader-body h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.leader-role {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-strong);
  margin-top: 4px;
}
.leader-body p {
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--fg-2);
  margin-top: 12px;
}
.leader-li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-3);
  margin-top: 14px;
  transition: color .18s;
}
.leader-li svg { width: 15px; height: 15px; }
.leader-li:hover { color: var(--fw-blue); }


/* -------------------------------------------------------------
   Core team — 4 up
   ------------------------------------------------------------- */
.tgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* No decorative top rule: four identical coloured bars across a row reads as
   template filler. The avatar, the name and the gold role carry the card, and
   it now lifts on hover like every other card type on the site. */
.tcard {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 20px;
  padding: 24px 22px;
  transition: box-shadow .22s var(--ease-forward),
              border-color .22s var(--ease-forward),
              transform .22s var(--ease-forward);
}
.tcard:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--border-2);
  transform: translateY(-2px);
}

/* A rounded square, not a circle. Six of the eight supplied photos are already
   400x400, so a square frame shows the whole crop instead of clipping its
   corners away — and it can run the full width of the card, which a circle
   never could without looking enormous. To dial the size back, cap it with
   `max-width` here; everything else scales off the aspect-ratio. */
.avatar {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: var(--neutral-100);
  border: 1px solid var(--border-1);
  margin-bottom: 18px;
}
.avatar::after {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fw-blue);
}
.avatar img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* jp-sinha.jpg and cln-charyulu.jpg are portrait (0.70–0.76), so a square
     frame has to crop top and bottom — bias upward so heads stay in frame.
     No effect on the six 400x400 crops, which are not cropped at all. */
  object-position: center 22%;
  display: block;
}

.tcard h4 { font-size: 16px; font-weight: 600; }
.tcard-role {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-strong);
  margin-top: 4px;
  line-height: 1.4;
}
/* min-height reserves three lines on every card, so a person whose bio has
   not been supplied leaves a deliberate blank instead of a stunted card and
   a ragged grid row. Drop the reserve on phones, where cards are 1-up. */
.tcard p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-2);
  margin-top: 12px;
  min-height: 63px;
}


/* -------------------------------------------------------------
   Forward principles — 5 up
   ------------------------------------------------------------- */
.pgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }

.prin {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 18px;
  padding: 24px 20px;
  text-align: center;
}
.prin-ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(0, 99, 255, 0.08);
  margin: 0 auto 16px;
}
.prin-ico svg { width: 20px; height: 20px; color: var(--fw-blue); }
.prin h4 { font-size: 15.5px; font-weight: 600; }
.prin p { font-size: 13px; line-height: 1.55; color: var(--fg-2); margin-top: 8px; }


/* -------------------------------------------------------------
   Mission band — brand blue
   ------------------------------------------------------------- */
.mission {
  background: linear-gradient(135deg, var(--fw-blue) 0%, var(--fw-blue-deep) 100%);
  color: #fff;
}
.mission-inner {
  margin: 0;
  padding: 64px 0;
  max-width: 840px;
  margin-inline: auto;
  text-align: center;
}
.mission-mark {
  width: 28px;
  height: 28px;
  color: rgba(255, 255, 255, 0.32);
  margin-bottom: 14px;
}
.mission-inner p {
  font-family: var(--font-display);
  font-size: clamp(15.5px, 1.6vw, 19px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
}


/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 1024px) {
  /* these must be restated: the density overrides above sit outside any
     media query but load after site.css, so they would otherwise win
     inside site.css's own breakpoints and leave the page too airy */
  .sec { padding: 60px 0; }
  .sec-head { margin-bottom: 34px; }

  .pgrid { grid-template-columns: repeat(3, 1fr); }
  .tgrid { grid-template-columns: repeat(2, 1fr); }
  .ogrid { grid-template-columns: 1fr; }

  .leader,
  .leader.is-flip { grid-template-columns: 240px 1fr; gap: 28px; }
  .leader.is-flip .portrait { order: 0; }
  .leader.is-flip .leader-body { order: 0; }

  .mission-inner { padding: 56px 0; }
}

@media (max-width: 900px) {
  /* .phero collapses to one column from site.css at this same breakpoint */
  .hero-cards { max-width: 560px; }
}

@media (max-width: 768px) {
  .sec { padding: 46px 0; }
  .sec-head { margin-bottom: 26px; }
  .sec-head p { font-size: 15px; }
  .hero-cards { max-width: none; gap: 12px; }
  .hcard { padding: 17px 18px; border-radius: 16px; }
  .hcard-title { font-size: 19px; }
  .hcard-body { font-size: 14.5px; }

  .why-lead { font-size: 19px; }
  .why-sub { font-size: 15.5px; margin-top: 16px; }

  .wgrid { grid-template-columns: 1fr; gap: 14px; }
  .wcard { padding: 22px; }
  .wcard:hover { transform: none; }

  .ocard { padding: 22px; }

  /* leadership stacks: portrait above, bio below. Keep the frame upright —
     a landscape crop of a head-and-shoulders portrait cuts badly. */
  .leaders { gap: 32px; }
  .leader,
  .leader.is-flip { grid-template-columns: 1fr; gap: 20px; }
  .portrait { aspect-ratio: 3 / 4; max-width: 280px; }
  .portrait::after { font-size: 52px; }
  .leader-body h3 { font-size: 21px; }
  .leader-body p { font-size: 14px; margin-top: 14px; }
  .leader-rule { margin-bottom: 14px; }

  .tgrid { gap: 14px; }
  .tcard { padding: 22px 20px; }

  .pgrid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  .mission-inner { padding: 56px 0; }
  .mission-mark { width: 28px; height: 28px; margin-bottom: 14px; }
}

@media (max-width: 480px) {
  .sec { padding: 38px 0; }

  .tgrid { grid-template-columns: 1fr; }
  .tcard p { min-height: 0; }   /* 1-up: no need to reserve */
  .pgrid { grid-template-columns: 1fr; }
  .prin { text-align: left; display: flex; gap: 14px; align-items: flex-start; padding: 18px; }
  .prin-ico { margin: 0; flex-shrink: 0; }

  .portrait { max-width: 240px; }
  .portrait-quote { font-size: 12px; padding: 8px 11px; }
  .mission-inner { padding: 46px 0; }
}