/* ===== ABOUT PAGE ===== */

/* Hero pale band curves up on the bottom-LEFT (matches mockup) */
.section.round-bl{ border-bottom-left-radius:140px; }   /* Figma: pale band radii [.,140,.,140] */

/* Hero: Our Story (pale band) */
.about-hero__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-2xl,48px);
  align-items:center;   /* D/L: the quote card sits vertically centred against the intro column */
}
.about-hero__intro{ container-type:inline-size; }   /* proportional hero: title scales in cqi of this column */
.about-hero__intro .hero__title{margin:0 0 var(--space-md,24px); font-size:clamp(2rem, 21cqi, 6rem);}
.about-hero .lead{max-width:38ch; font-size:var(--fs-sm);}

/* Founding quote card (carbon on pale) */
.quote-card{
  margin:0;
  background:var(--c-carbon);
  color:var(--c-white);
  /* CLI diagonal sweep (Figma-measured 48/0/48/0): rounded top-left + bottom-right,
     sharp top-right + bottom-left. Same as the recruiting quote card. */
  border-radius:var(--r-2xl) 0 var(--r-2xl) 0;
  padding:var(--space-xl,40px) var(--space-2xl,48px) var(--space-2xl,48px);
}
.quote-card__mark{
  display:block;
  font-size:var(--fs-h1);
  line-height:.6;
  font-weight:700;
  color:var(--c-blue);
  margin-bottom:var(--space-sm,16px);
}
.quote-card__text{
  margin:0;
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.4;
}

/* Centered section titles */
.section-title-center{
  text-align:center;
  margin:0 0 var(--space-3xl,64px);
}

/* Bio rows (photo + body) */
.bio{
  display:grid;
  grid-template-columns:260px 1fr;   /* photo column trimmed from 340 */
  gap:var(--space-2xl,48px);
  align-items:start;
  margin-bottom:var(--space-3xl,80px);
}
.bio:last-child{margin-bottom:0;}
/* sticky photo parks just BELOW the sticky 84px header (was tucking behind it) */
.bio__photo{position:sticky;top:calc(var(--solnav-h,84px) + var(--space-lg,32px));}
.img-ph--circle{border-radius:var(--r-pill,999px);overflow:hidden;}
.bio__name{
  color:var(--c-blue);
  margin:0 0 var(--space-xs,4px);
}
.bio__role{
  font-weight:600;
  color:var(--c-white);
  margin:0 0 var(--space-md,24px);
}
.bio__body > p{margin:0 0 var(--space-md,24px);}
.bio__email{margin-top:var(--space-sm,16px);}

/* Carbon-pill email/link button — SAME animated treatment as the primary CTA
   (chevron wipe sweeps in from the left, arrow slides off + fades, label recentres).
   Rest = carbon; hover wipe = --c-blue so the button is clearly visible against the
   dark section (eclipse wipe blended into the background and vanished). */
.btn--carbon{
  background:var(--c-carbon);
  color:var(--c-white);
  border:none;
  position:relative; overflow:hidden; isolation:isolate;
}
.btn--carbon::before{
  content:""; position:absolute; top:0; bottom:0; left:0; right:-22px; z-index:-1;
  background:var(--c-blue);
  transform:translateX(-102%);
  -webkit-clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  transition:transform .42s var(--ease);
}
.btn--carbon .arrow{ transition:transform .38s var(--ease), opacity .28s var(--ease); }
.btn--carbon .btn__label{ transition:transform .38s var(--ease); }
.btn--carbon:hover::before{ transform:translateX(0); }
.btn--carbon:hover .arrow{ transform:translateX(2.4rem); opacity:0; }
.btn--carbon:hover .btn__label{ transform:translateX(0.8rem); }

/* Testimonials */
.testimonials{
  display:flex;
  flex-direction:column;
  gap:var(--space-3xl,64px);
}
.testimonial{margin:0;text-align:center;}
.testimonial__text{
  margin:0 0 var(--space-md,24px);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.5;
  color:var(--c-white);
}
.testimonial__cite{
  color:var(--c-blue);
  font-weight:600;
  font-size:var(--fs-sm);
}

/* Responsive */
/* Laptop: keep the bio 2-col but slim the photo column to 200px. */
@media (min-width:768px) and (max-width:979.98px){
  .bio{ grid-template-columns:200px 1fr; }
}

/* About hero — Recruiting's hero treatment on T/M: title stacks above a full-bleed
   carbon quote band that IS the hero's bottom edge (48/0/48/0 sweep). It dips r-2xl
   into the next section so its rounded bottom-right corner reveals that section's dark
   bg; the blue mark is a left-hand icon. Desktop/laptop keep the 2-col reading layout. */
@media (max-width:767.98px){
  .about-hero__grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-xl,40px); }
  .about-hero .lead{ max-width:none; }
  .about-hero.round-bl{ padding-bottom:0; border-bottom-left-radius:0; }
  .quote-card{
    position:relative; z-index:1;
    width:100vw; margin-inline:calc(50% - 50vw);
    margin-bottom:calc(-1 * var(--r-2xl));
    border-radius:var(--r-2xl) 0 var(--r-2xl) 0;
    padding-block:var(--space-lg); padding-inline:var(--gutter);
    display:grid; grid-template-columns:auto 1fr; column-gap:var(--space-md); align-items:center;
  }
  .quote-card__mark{ grid-area:1 / 1; margin:0; align-self:center; line-height:1; transform:translateY(0.22em); }
  .quote-card__text{ grid-area:1 / 2; }
  .about-hero + .section{ padding-top:calc(var(--r-2xl) + 80px); }

  /* Bio rows stack (laptop kept 2-col above). Photo shrinks to 200px and the
     photo + name/role + email button centre; the body paragraphs stay left-read. */
  .bio{ grid-template-columns:minmax(0,1fr); gap:var(--space-lg,32px); }
  .bio__photo{ position:static; max-width:200px; margin-inline:auto; }
  .bio__name, .bio__role{ text-align:center; }
  .bio__email{ display:flex; width:fit-content; margin-inline:auto; }
}
/* MOBILE (<480): center the hero intro + quote card, matching the homepage's
   mobile-hero centering. Tablet/Laptop keep the left-aligned reading layout
   already established above (unchanged). */
@media (max-width:479.98px){
  .about-hero__intro{ text-align:center; }
  .about-hero .lead{ margin-inline:auto; }
  /* (quote-card is a full-bleed band via the ≤767 treatment above — no mobile override) */
}