/* about-us.css: /about-us/ only (body.page-about-us). Hero photo, About/Founder/Crew/Mission/"How We Help" rhythm,
   the crew masonry (.crew, .crew-card) and the white mission cards (.mission-card) on the grey band.
   Numbers are the measured bboxes from reference/about-us at 390 (base rules) and 1440 (min-width: 1025px). */

/* The about-us accent words render in Circular (not Open Sans) on the captures; the templates add --sans. */
.page-about-us .about-text { margin: 10px auto 0; }

/* Phones: hero, About and "How We Help" copy runs edge to edge (x=0..390) */
.about-hero .container, .about-intro .container, .about-help .container { padding-inline: 0; }
@media (min-width: 768px) {
  .about-hero .container, .about-intro .container, .about-help .container { padding-inline: var(--gutter); }
}

/* ---- Hero: H1, 10px, intro, 47px (34 desktop), photo flush to the section bottom ---- */
.about-hero { padding-bottom: 13px; }
.about-hero__media { margin-top: 47px; padding-inline: 13px; }
.about-hero__media img { width: 100%; }
@media (min-width: 768px) {
  .about-hero { padding-bottom: 0; }
  .about-hero__media { margin-top: 34px; padding-inline: 0; }
  .about-hero__text { max-width: 808px; }
}
@media (min-width: 1025px) {
  .about-hero__title { max-width: 750px; }
}

/* ---- About CTutor ---- */
.about-intro { padding: 32px 0 62px; }
@media (min-width: 768px) { .about-intro { padding: 64px 0 80px; } }
@media (min-width: 1025px) { .about-intro { padding: 80px 0 94px; } }
@media (min-width: 768px) { .page-about-us .about-text--wide { max-width: 1075px; } }

/* ---- Founder Story: centred stack on phones, text | photo from 768px ---- */
.about-founder { padding: 42px 0 57px; text-align: center; }
.page-about-us .about-founder__text { margin-top: 11px; }
.about-founder__media { margin-top: 55px; }
.about-founder__media img { width: 100%; border-radius: var(--r-12); }
@media (min-width: 768px) {
  .about-founder { padding: 64px 0; text-align: left; }
  .about-founder__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: center; }
  .about-founder__title { text-align: left; margin-left: 0; }
  .about-founder__media { margin-top: 0; }
}
/* The photo sits ~9px below the text block's centre line */
@media (min-width: 1025px) { .about-founder__media { margin-top: 18px; } }
@media (min-width: 1025px) { .about-founder { padding: 90px 0 104px; } }

/* ---- The Crew: one column on phones, two on tablets, 4-column staggered masonry on desktop ---- */
.about-crew { padding: 32px 0 57px; }
.about-crew .container { --gutter: 16px; }
.page-about-us .about-crew__intro { margin-top: 5px; }
.crew { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; margin-top: 35px; padding-inline: 10px; text-align: left; }
.crew-card__figure {
  position: relative; height: 380px; overflow: hidden;
  border-radius: var(--r-20); background: var(--c-bg-avatar);
}
.crew-card__figure picture { display: contents; }
.crew-card__photo { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* White label bar overlapping the photo: gold name pill + plain role, both 10/600 #313131 */
.crew-card__label {
  position: absolute; top: 269px; left: 7px; right: 10px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center;
  padding: 8px 8px 8px 21px; background: var(--c-white); border-radius: var(--r-30);
  box-shadow: var(--shadow-soft);
}
.crew-card__name, .crew-card__role {
  justify-self: start; padding: 12px 24px; font: 600 10px/10px var(--font-sans); color: var(--c-text-strong);
}
.crew-card__name { max-width: 136px; background: var(--c-gold); border-radius: var(--r-30); text-align: center; }
@media (min-width: 768px) {
  .crew { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 21px; row-gap: 30px; padding-inline: 0; }
}
@media (min-width: 1025px) {
  .about-crew { padding: 80px 0 92px; }
  .about-crew .container { --gutter: 20px; }
  .page-about-us .about-crew__intro { margin-top: 1px; }
  /* Columns 1 and 3 drop 138px (relative offset); the bottom padding reserves the room they move into */
  .crew { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 51px; padding-bottom: 138px; }
  .crew-card { grid-column: var(--col); grid-row: var(--row); }
  .crew-card--low { position: relative; top: 138px; }
  .crew-card__figure { height: 405px; }
  .crew-card__label { top: 251px; left: 6px; right: 6px; padding: 8px; align-items: start; }
}
@media (min-width: 1281px) { .about-crew .container { --gutter: 0px; } }

/* ---- Our Mission: heading + two white cards on the grey band ---- */
.about-mission { padding: 32px 0 60px; }
.about-mission__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 41px; margin-top: 30px; }
.mission-card { background: var(--c-white); border-radius: var(--r-20); padding: 30px 30px 43px; }
.mission-card--end { padding-right: 0; }
.mission-card__media img { width: 100%; }
.page-about-us .mission-card__text { margin: 23px 0 0; }
.page-about-us .mission-card--end .mission-card__text { margin-top: 35px; }
@media (min-width: 768px) {
  .about-mission { padding: 64px 0; }
  .mission-card__media img { width: auto; }
}
@media (min-width: 1025px) {
  .about-mission { padding: 80px 0; }
  .about-mission__grid { grid-template-columns: 623fr 607fr; column-gap: 20px; align-items: center; margin-top: 20px; }
  .mission-card { padding-bottom: 44px; }
  .mission-card--end .mission-card__media { display: flex; justify-content: flex-end; }
  .page-about-us .mission-card__text { width: 90%; }
}

/* ---- How We Help ---- */
.about-help { padding: 32px 0 62px; }
.page-about-us .about-help__text { margin-top: 15px; }
.page-about-us .section-title + .about-help__text { margin-top: 39px; }
@media (min-width: 768px) { .about-help { padding: 64px 0 80px; } }
@media (min-width: 1025px) {
  .about-help { padding: 80px 0 94px; }
  /* The accent is --whole (one line) on phones only */
  .about-help .section-title__accent { display: inline; }
  .page-about-us .section-title + .about-help__text { margin-top: 40px; }
}