/* about.html — page-specific styles */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Page hero — text only, no image (editorial contrast
   with services and how-it-works which both have images)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.about-hero {
  border-bottom: 1px solid var(--color-ink);
  overflow: hidden;
}

.about-hero__inner {
  display: grid;
  grid-template-columns: 1fr clamp(700px, 78vw, 600px);
  align-items: start;
}

.about-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-48);
  padding-top: var(--spacing-96);
  padding-bottom: var(--spacing-96);
  padding-left: max(var(--spacing-24), calc((100vw - var(--page-max-width)) / 2 + 80px));
  padding-right: var(--spacing-96);
}

.about-hero__left .eyebrow { margin-bottom: var(--spacing-24); }

.about-hero__left h1 {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: -0.02em;
}

.about-hero__right {
  padding-bottom: 0;
}

.about-hero__media {
  align-self: start;
}

.about-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: top center;
}

.about-hero__statement {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--color-ink-70);
  max-width: 44ch;
  border-left: 2px solid var(--color-rose);
  padding-left: var(--spacing-24);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Who We Are — split column
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.about-who {
  padding-block: var(--spacing-128);
  border-bottom: 1px solid var(--color-ink);
}

.about-who__inner {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: max(var(--spacing-24), calc((100vw - var(--page-max-width)) / 2 + 80px));
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--spacing-96);
  align-items: start;
}

.about-who__label .eyebrow { margin-bottom: var(--spacing-24); }

.about-who__label h2 { color: var(--color-ink); }

.about-who__body p {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--color-ink-70);
  max-width: 58ch;
}

.about-who__body p + p { margin-top: var(--spacing-24); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Commitment — 2×2 card grid
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.about-commit {
  padding-block: var(--spacing-128);
  border-bottom: 1px solid var(--color-ink);
  background-color: var(--color-blush-deep);
}

.about-commit__inner {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: max(var(--spacing-24), calc((100vw - var(--page-max-width)) / 2 + 80px));
}

.about-commit__header {
  margin-bottom: var(--spacing-64);
}

.about-commit__header .eyebrow { margin-bottom: var(--spacing-24); }
.about-commit__header h2 { max-width: 24ch; }

.about-commit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-24);
  list-style: none;
}

.commit-card {
  background-color: var(--color-paper-white);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
}

.commit-card__heading {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  margin-bottom: var(--spacing-16);
}

.commit-card__body {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-ink-70);
  max-width: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Rose band — brand statement
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.about-statement {
  background-color: var(--color-rose);
  padding-block: var(--spacing-96);
}

.about-statement__inner {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: max(var(--spacing-24), calc((100vw - var(--page-max-width)) / 2 + 80px));
}

.about-statement p {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: 700;
  line-height: var(--leading-heading);
  letter-spacing: -0.02em;
  color: var(--color-blush-paper);
  max-width: 22ch;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Bottom CTA — Ink band
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.about-cta {
  background-color: var(--color-ink);
  padding-block: var(--spacing-96);
}

.about-cta__inner {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: max(var(--spacing-24), calc((100vw - var(--page-max-width)) / 2 + 80px));
}

.about-cta .eyebrow { color: var(--color-blush-paper); margin-bottom: var(--spacing-24); }
.about-cta h2       { color: var(--color-blush-paper); margin-bottom: var(--spacing-24); }

.about-cta__lead {
  font-size: var(--text-body-lg);
  color: color-mix(in srgb, var(--color-blush-paper) 70%, transparent);
  margin-bottom: var(--spacing-48);
}

.about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
}

.about-cta__ghost {
  border-color: color-mix(in srgb, var(--color-blush-paper) 45%, transparent);
  color: var(--color-blush-paper);
}
.about-cta__ghost:hover {
  background-color: var(--color-blush-paper);
  border-color: var(--color-blush-paper);
  color: var(--color-ink);
  text-decoration: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Responsive
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 900px) {
  .about-hero__inner  { grid-template-columns: 1fr; }
  .about-hero__media  { order: -1; }
  .about-hero__copy   { padding-right: var(--spacing-24); }
  .about-who__inner   { grid-template-columns: 1fr; gap: var(--spacing-48); }
  .about-commit__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .about-hero__copy { padding-block: var(--spacing-64); }
  .about-who   { padding-block: var(--spacing-96); }
  .about-commit { padding-block: var(--spacing-96); }
  .about-statement p { font-size: var(--text-heading-sm); }
}