/* ==========================================================================
   page-about.css — layout for about.html only.
   ========================================================================== */

/* ---- Page hero ---------------------------------------------------------- */

.page-hero__inner { max-width: none; text-align: center; }

/* Extra bottom padding so the founder panel can overlap the band below the
   title rather than across it. */
.page-hero { padding-block: var(--space-96) var(--space-112); }

/* ---- Founder statement --------------------------------------------------- */

.founder { padding-block-start: 0; }

/* The panel is pulled up so its top edge breaks the hero band — a deliberate
   overlap. It must be positioned to paint ABOVE the hero: .page-hero is
   position: relative, so without this the band covers the first line of the
   quote. The pull is kept shorter than the hero's bottom padding so a strip
   of the band still shows between the title and the panel. */
.founder__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: stretch;
  gap: var(--space-30);
  margin-block-start: calc(-1 * var(--space-64));
}

.founder__media img {
  width: 100%;
  height: 100%;
  max-height: 470px;
  object-fit: cover;
  object-position: 50% 20%;
}

.founder__panel {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--space-48);
  background-color: var(--color-spruce);
  color: var(--color-on-spruce);
}

.founder__quote-mark {
  width: var(--space-32);
  height: var(--space-32);
  color: var(--color-gold);
  margin-block-end: var(--space-24);
}

.founder__statement { margin: 0; }

.founder__statement p {
  font-family: var(--font-display);
  font-size: var(--fs-subtitle);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--color-on-spruce);
}

/* Signed off under a rule, the way an entry is attributed. */
.founder__caption {
  margin-block-start: auto;
  padding-block-start: var(--space-24);
  border-block-start: var(--border-width) solid var(--color-rule-invert);
  text-align: start;
}

.founder__name {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--color-on-spruce);
}

/* Original ran this in white on gold (1.85:1). */
.founder__role {
  font-family: var(--font-heading);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-gold);
}

/* ---- Vision & mission ---------------------------------------------------- */

.vision__inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: center;
  gap: var(--space-48);
}

.vision__media img { width: 100%; height: auto; }

.vision__copy { text-align: start; }

.vision__title {
  margin-block: var(--space-24) var(--space-32);
  font-family: var(--font-display);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  color: var(--color-spruce);
}

.vision__copy > p:not(.vision__title) {
  max-width: var(--column-max);
  color: var(--color-muted);
}

/* ---- Statistics — the statement block ------------------------------------
   Same device as the home page: a column head on a gold rule, the figure
   below, and a double rule closing the row. The markup here runs figure
   first, so the column is reversed rather than re-ordered in the HTML. */

.stats__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-end: var(--rule-total);
}

.stats__item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-16);
  padding: var(--space-24) var(--space-32) var(--space-32);
  background-color: transparent;
  text-align: start;
}

.stats__item + .stats__item { border-inline-start: var(--border-hairline); }
.stats__item:first-child { padding-inline-start: 0; }

.stats__item p {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--space-2);
  margin-block-end: 0;
}

.counter__suffix {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-counter);
  color: var(--color-gold-text);
}

.counter__suffix sup { font-size: 0.6em; }

.stats__item .counter__label {
  padding-block-end: var(--space-12);
  border-block-end: var(--rule-head);
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-spruce-soft);   /* original: #D9BC66 on white, 1.85:1 */
}

/* ---- Team ---------------------------------------------------------------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.team-card__figure {
  position: relative;
  margin: 0 0 var(--space-20);
}

/* The original placed a pale mint block behind the lower part of each cut-out
   portrait, so heads break above it. It shipped that block as a flat-colour
   JPEG; a token is the same result without the download. */
.team-card__figure::before {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 72%;
  background-color: var(--color-surface-mint);
}

.team-card__figure img {
  position: relative;
  width: 100%;
  height: auto;
}

.team-card__name {
  font-family: var(--font-heading);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  color: var(--color-ink);
}

/* The original set these white on a white panel — invisible. */
.team-card__role {
  margin-block-start: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--color-gold-text);
}

/* ---- Our process --------------------------------------------------------- */

.process {
  position: relative;
  background-color: var(--color-ledger);
  border-block: var(--border-hairline);
  color: var(--color-ink);
}

.process__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-64);
  align-items: start;
}

.process__lede {
  margin-block-start: var(--space-24);
  font-family: var(--font-body);
  font-size: var(--fs-lede);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-tight);
  color: var(--color-muted);
}

.process__title {
  font-family: var(--font-display);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--color-spruce);
  border-block-end: var(--rule-head);
  padding-block-end: var(--space-16);
  margin-block-end: var(--space-32);
}

/* This one IS a sequence — the steps of an engagement run in order — so the
   ruled rows carry checks rather than arbitrary numbering. */
.process-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.process-list li {
  position: relative;
  padding: var(--space-20) 0 var(--space-20) var(--space-50);
  border-block-end: var(--border-hairline);
  counter-increment: step;
}

.process-list li:first-child { border-block-start: var(--border-hairline); }

.process-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: var(--space-24);
  width: var(--space-16);
  height: var(--space-16);
  background-color: var(--color-gold-text);
  /* A check mark, ticked off against the row — no surrounding chip. */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M173.9 439.4l-166.4-166.4c-10-10-10-26.2 0-36.2l36.2-36.2c10-10 26.2-10 36.2 0L192 312.7 432.1 72.6c10-10 26.2-10 36.2 0l36.2 36.2c10 10 10 26.2 0 36.2l-294.4 294.4c-10 10-26.2 10-36.2 0z' fill='white'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M173.9 439.4l-166.4-166.4c-10-10-10-26.2 0-36.2l36.2-36.2c10-10 26.2-10 36.2 0L192 312.7 432.1 72.6c10-10 26.2-10 36.2 0l36.2 36.2c10 10 10 26.2 0 36.2l-294.4 294.4c-10 10-26.2 10-36.2 0z' fill='white'/></svg>") center / contain no-repeat;
}

.process-list__title {
  font-family: var(--font-heading);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  color: var(--color-spruce);
  margin-block-end: var(--space-4);
}

.process-list p {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-tight);
  color: var(--color-muted);   /* original: white on gold, 1.85:1 */
}

/* ---- New customers CTA ---------------------------------------------------- */

/* Photo band on top, copy below — as on the original. Keeping the photo
   behind the copy put 14px text over faces. */
.new-customers__panel {
  background-color: var(--color-ledger);
  border: var(--border-hairline);
  border-block-start: var(--rule-head);
  text-align: center;
  overflow: hidden;
}

.new-customers__photo {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: 50% 22%;
}

.new-customers__copy { padding: var(--space-40) var(--space-40) var(--space-64); }

.new-customers__title {
  margin-block: var(--space-20) var(--space-16);
  font-family: var(--font-display);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--color-ink);
}

.new-customers__note {
  max-width: 46ch;
  margin-inline: auto;
  margin-block-end: var(--space-30);
  font-size: var(--fs-small);
  color: var(--color-ink);
}

/* ---- Quote form ----------------------------------------------------------- */

.quote { background-color: var(--color-paper); }

.quote__title {
  position: relative;
  margin-block: var(--space-24) var(--space-16);
  padding-inline-start: var(--space-24);
}

.quote__title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: var(--space-4);
  width: var(--border-width-thick);
  background-color: var(--color-gold);
}

.quote__lede {
  margin-block-end: var(--space-40);
  font-weight: var(--fw-regular);
  color: var(--color-muted);
}

.quote__submit { width: 100%; }

.quote__contact {
  display: grid;
  gap: var(--space-16);
  margin: var(--space-40) 0 0;
  padding: 0;
  list-style: none;
}

.quote__contact li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-16);
  max-width: 640px;
  padding-block: var(--space-12);
  border-block-end: var(--border-hairline);
  background-color: transparent;
}

.quote__contact-icon {
  display: grid;
  place-items: center;
  width: var(--space-40);
  height: var(--space-40);
  background-color: var(--color-spruce);
  color: var(--color-gold);
}

.quote__contact-icon svg { width: var(--space-16); height: var(--space-16); }

.quote__contact-body { display: grid; gap: 2px; padding-block: var(--space-8); }

.quote__contact-label {
  font-family: var(--font-heading);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-gold-text);   /* original: #D9BC66 on white, 1.85:1 */
}

.quote__contact-body a,
.quote__contact-body span:last-child {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  color: var(--color-ink);
}

/* ==========================================================================
   Responsive — values mirror --bp-* in tokens.css
   ========================================================================== */

@media (max-width: 1024px) {

  .founder__inner { margin-block-start: calc(-1 * var(--space-48)); }

  .stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Two-up: the first item of each row drops its left rule, and the second
     row gains one above it. */
  .stats__item:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .stats__item:nth-child(n + 3) { border-block-start: var(--border-hairline); }

  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .process__inner { gap: var(--space-40); }

  .vision__inner { gap: var(--space-30); }
}

@media (max-width: 767px) {

  .founder__inner {
    grid-template-columns: 1fr;
    margin-block-start: calc(-1 * var(--space-40));
  }

  .founder__media img { max-height: 340px; }

  .founder__panel { padding: var(--space-24); }

  .vision__inner { grid-template-columns: 1fr; }

  .stats__list { grid-template-columns: 1fr; }

  .stats__item {
    padding-inline: 0;
    border-inline-start: 0;
    border-block-start: var(--border-hairline);
  }

  .stats__item:first-child { border-block-start: 0; }
  .stats__item + .stats__item { border-inline-start: 0; }

  .team-grid { grid-template-columns: 1fr; gap: var(--space-30); }

  .process__inner { grid-template-columns: 1fr; gap: var(--space-30); }

  .new-customers__photo { height: 180px; }
  .new-customers__copy { padding: var(--space-30) var(--space-20) var(--space-40); }

  .quote__contact li { max-width: none; }
}