/* ==========================================================================
   About — /about/ (spec §35–36)
   Story order: philosophy → mission → challenge × speed → approach → business → people.
   ========================================================================== */

/* Hero: the bird artwork, large, on white. */
.about .subhero__art--bird {
  top: -6vw;
  right: -14vw;
  width: 104vw;
}

@media (min-width: 1024px) {
  .about .subhero__art--bird {
    top: calc(120 * var(--u));
    right: calc(-40 * var(--u));
    left: auto;
    width: calc(1120 * var(--u));
  }
}

/* ---------- philosophy statement ---------- */

.about-statement {
  overflow: hidden;
  padding-block: var(--space-section) calc(var(--space-section) * .7);
}

.about-statement__words {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .3em;
  margin-top: 26px;
  font-family: var(--font-serif);
  font-size: clamp(34px, 7.4vw, 150px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: .01em;
  color: var(--color-word);
}

.about-statement__times {
  font-size: .56em;
}

.about-statement__title {
  margin-top: clamp(26px, 3vw, 60px);
  font-size: clamp(24px, 3.2vw, 62px);
  line-height: 1.55;
  letter-spacing: .03em;
  color: var(--color-hero-ink);
}

/* ---------- shared numbers ---------- */

:is(.about-mission__num, .about-values__num, .about-approach__num, .about-business__num) {
  font-family: var(--font-serif);
  font-size: clamp(48px, 5vw, 96px);
  font-weight: 500;
  line-height: 1;
  color: var(--color-brand);
}

.about-approach__num { color: rgba(255, 255, 255, .34); }

/* ---------- mission ---------- */

.about-mission__inner {
  display: grid;
  gap: 34px;
  align-items: center;
}

.about-mission__media {
  aspect-ratio: 4 / 3;
}

.about-mission__text .eyebrow {
  margin-top: 16px;
}

.about-mission__title {
  margin-top: 12px;
  font-size: clamp(26px, 3vw, 56px);
  line-height: 1.45;
  color: var(--color-hero-ink);
}

.about-mission__body {
  margin-top: 22px;
  line-height: 2.05;
  letter-spacing: .05em;
}

.about-mission__content {
  margin-top: 22px;
}

@media (min-width: 1024px) {
  .about-mission__inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: 6vw;
  }
}

/* ---------- challenge × speed ---------- */

.about-values {
  position: relative;
  overflow: hidden;
}

/* The runner's ground is white; multiply keeps only its paint on the white section. */
.about-values__art {
  display: block;
  width: 118%;
  margin: -20px -9% 20px;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.about-values__art img {
  width: 100%;
}

.about-values .container {
  position: relative;
}

.about-values__grid {
  display: grid;
  gap: 36px;
  margin-top: 48px;
}

.about-value {
  padding-top: 30px;
  border-top: 2px solid var(--color-ink);
}

.about-value__en {
  font-family: var(--font-serif);
  font-size: clamp(38px, 4.6vw, 88px);
  font-weight: 500;
  line-height: 1;
  color: var(--color-word);
}

.about-value__title {
  margin-top: 14px;
  font-size: clamp(24px, 2vw, 38px);
  line-height: 1.4;
  color: var(--color-hero-ink);
}

.about-value__lines {
  margin-top: 18px;
}

.about-value__lines li {
  padding: 13px 0;
  border-bottom: 1px solid var(--color-line);
  font-size: clamp(15px, 1.15vw, 20px);
  font-weight: 600;
  letter-spacing: .06em;
}

@media (min-width: 768px) {
  .about-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 5vw; }
}

@media (min-width: 1024px) {
  .about-values__art {
    position: absolute;
    top: 2%;
    right: -6%;
    width: min(64vw, 1180px);
    margin: 0;
    opacity: .95;
  }

  .about-values__grid { margin-top: clamp(120px, 14vw, 260px); }

  .about-value { background: rgba(255, 255, 255, .88); }
}

/* ---------- our approach ---------- */

.about-approach {
  overflow: hidden;
}

.about-approach__plane {
  position: absolute;
  top: 0;
  right: -26%;
  bottom: 0;
  width: 62%;
  background: url("../../art/brush-strokes-1200.webp") 90% 10% / auto 120% no-repeat, var(--color-brand-dark);
  clip-path: polygon(34% 0, 100% 0, 66% 100%, 0 100%);
}

.about-approach__inner {
  position: relative;
  display: grid;
  gap: 44px;
}

.about-approach__text .eyebrow {
  margin-top: 16px;
}

.about-approach__text .section-title {
  margin-top: 12px;
}

.about-approach__body {
  max-width: 40em;
  margin-top: 22px;
  line-height: 2.05;
  color: rgba(255, 255, 255, .9);
}

.about-approach__fact {
  display: grid;
  justify-items: start;
  gap: 8px;
}

.about-approach__fact-label {
  font-size: 14px;
  letter-spacing: .14em;
}

.about-approach__fact-value {
  font-size: clamp(22px, 2vw, 36px);
  font-weight: 600;
}

.about-approach__fact-num {
  margin-right: .08em;
  font-family: var(--font-serif);
  font-size: clamp(96px, 10vw, 210px);
  font-weight: 500;
  line-height: .9;
}

@media (min-width: 1024px) {
  .about-approach__plane { right: -8%; width: 38%; }

  .about-approach__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: end;
  }
}

/* ---------- business philosophy ---------- */

.about-business__list {
  margin-top: 40px;
  border-top: 1px solid var(--color-ink);
}

.about-business__item {
  display: grid;
  gap: 10px;
  padding: clamp(28px, 3vw, 60px) 0;
  border-bottom: 1px solid var(--color-line);
}

.about-business__en {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3em;
  color: var(--color-brand-text);
}

.about-business__quote {
  margin: 0;
  font-size: clamp(22px, 2.7vw, 50px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .03em;
  color: var(--color-hero-ink);
}

@media (min-width: 1024px) {
  .about-business__item {
    grid-template-columns: 15em minmax(0, 1fr);
    align-items: baseline;
  }
}

/* ---------- people ---------- */

.about-people__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 16px;
  margin-top: 44px;
}

.about-people__more {
  margin-top: 32px;
}

@media (min-width: 1024px) {
  .about-people__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
}