/* =========================================================
   01 · About (piece B)
   Also holds .pb-quote, the shared quote band used by About (Yoda) and
   Video (Einstein): a framed steel print beside the quote on clean metal.
   Depth is driven by js/sections/about.js.
   ========================================================= */

.about__band { overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); background-position: center top; }
.about-quote { background-position: center top; }

/* Engraved headline on light metal */
.about__title, .video__title { color: var(--graphite); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }

/* Mechanism 4: headline cols 1–7, supporting copy cols 9–12, bottoms on the headline's last line */
.about__head { align-items: end; row-gap: 40px; }
.about__title { grid-column: 1 / span 8; text-wrap: balance; }
.about__copy { grid-column: 9 / span 4; display: grid; gap: 20px; justify-items: start; }
.about__copy p { font-size: 16px; line-height: 1.6; color: rgba(26, 27, 30, .84); }
.about__copy .link { margin-top: 4px; color: var(--graphite); padding-bottom: 4px; }

/* Proof points: three identical columns (numeral / label / caption) sharing rows via subgrid */
.about__proof {
  margin-top: clamp(88px, 9vw, 144px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto);
  border-top: 1px solid var(--rule-light);
}
.proof {
  grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 0;
  padding: 36px clamp(20px, 2.6vw, 40px) 4px;
}
.proof:first-child { padding-left: 0; }
.proof + .proof { border-left: 1px solid var(--rule-light); }
.proof__fig {
  align-self: end; margin-bottom: 20px;
  font-size: clamp(72px, 7.4vw, 120px); font-weight: 300; letter-spacing: -0.055em; line-height: .9;
  color: var(--graphite); font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(255, 255, 255, .65);
}
/* qualifier set above the numeral, in the label voice so the figure stays the hero */
.proof__pre { display: block; margin-bottom: 10px; font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--muted-on-light); text-shadow: none; }
.proof__label { align-self: start; font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--graphite); max-width: 26ch; margin-bottom: 10px; }
.proof__caption { align-self: start; font-size: 15px; line-height: 1.5; color: rgba(26, 27, 30, .78); max-width: 32ch; }

/* =========================================================
   Quote band: steel print + quote on clean dark metal
   ========================================================= */
.pb-quote { overflow: hidden; }
/* Print takes 7 columns, the quote 5; both hang from the same top line */
.pb-quote__grid { align-items: stretch; row-gap: 48px; }
.pb-quote__print { grid-column: 1 / span 5; position: relative; will-change: transform; }
.pb-quote__quote { grid-column: 8 / span 5; display: flex; flex-direction: column; position: relative; margin: 0; will-change: transform; }
.pb-quote__quote .pb-quote__text { margin-block: auto; padding-block: 24px; }
.pb-quote__quote .pb-quote__cite { margin-top: 0; }
.pb-quote--flip .pb-quote__print { grid-column: 8 / span 5; grid-row: 1; }
.pb-quote--flip .pb-quote__quote { grid-column: 1 / span 5; grid-row: 1; }


/* Clean crop with a 1px hairline edge */
.pb-quote__print { padding: 0; }

.pb-quote__photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; isolation: isolate; background: #111; box-shadow: 0 0 0 1px rgba(236, 238, 240, .16); }
.pb-quote--light .pb-quote__photo { box-shadow: 0 0 0 1px rgba(26, 27, 30, .2); }
/* Pre-graded in sharp (greyscale, normalise 2-98, CLAHE, contrast). Shown at or below native size. */
.pb-quote__media { position: absolute; inset: -9% 0; will-change: transform; }
.pb-quote__media picture, .pb-quote__media img { width: 100%; height: 100%; }
.pb-quote__media img { object-fit: cover; object-position: 50% 40%; }
.pb-quote__tint { position: absolute; inset: 0; pointer-events: none; }
.pb-quote__tint::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 130% at 50% 40%, transparent 65%, rgba(14, 15, 17, .22) 100%); }
.pb-quote__plate {
  display: flex; justify-content: space-between; gap: 16px; padding-top: 14px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-on-dark);
}
.pb-quote--light .pb-quote__plate { color: rgba(26, 27, 30, .7); }

/* Quote */
.pb-quote__text {
  margin: 0; font-size: clamp(44px, 4.6vw, 72px); font-weight: 500; letter-spacing: -0.045em; line-height: 1;
  text-wrap: balance; color: var(--alu-50);
}
.pb-quote__text .line { background: linear-gradient(180deg, var(--alu-50) 15%, var(--alu-400) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pb-quote__text em { font-weight: 400; font-style: italic; }
.pb-quote__cite {
  display: flex; align-items: center; gap: 16px; margin-top: clamp(28px, 3vw, 40px);
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-on-dark);
}
.pb-quote__dash { width: 48px; height: 1px; background: currentColor; opacity: .4; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .about__title { grid-column: 1 / -1; }
  .about__copy { grid-column: 1 / -1; max-width: 560px; }
  .about__proof { grid-template-columns: 1fr; border-top: 0; margin-top: 72px; }
  .about__proof { grid-template-rows: none; }
  .proof { grid-row: auto; grid-template-rows: auto auto auto; padding: 32px 0 28px; border-top: 1px solid var(--rule-light); }
  .proof + .proof { border-left: 0; }
  .proof__fig { font-size: 72px; }
  .pb-quote__print, .pb-quote__quote,
  .pb-quote--flip .pb-quote__print, .pb-quote--flip .pb-quote__quote { grid-column: 1 / -1; grid-row: auto; }
  .pb-quote--flip .pb-quote__quote { grid-row: 2; }
  .pb-quote__quote .pb-quote__text { margin-block: 0; padding-block: 0; }
  .pb-quote__quote .pb-quote__cite { margin-top: 28px; }
  .pb-quote__plate span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pb-quote__media, .pb-quote__quote, .pb-quote__print { transform: none !important; }
}

/* Yoda print continues the About aluminum: a light variant, engraved type, no band edge */
.pb-quote--light { margin-top: var(--section-pad); }
.pb-quote--light .pb-quote__text { color: var(--graphite); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.pb-quote--light .pb-quote__text .line { background: none; color: inherit; -webkit-background-clip: border-box; background-clip: border-box; }
.pb-quote--light .pb-quote__text em { color: var(--steel-600); }
.pb-quote--light .pb-quote__cite { color: var(--graphite); }
.proof__fig--statement { /* a non-numeric fact set as an h3 statement, bottom-aligned to the numerals' baseline */
  font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; max-width: 16ch;
  font-variant-numeric: normal; padding-bottom: .1em;
}

/* Einstein band: a designed top edge (light bevel, dark line, soft cast shadow) where it meets the aluminum */
.video-quote.band--gunmetal {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 2px 0 rgba(0, 0, 0, .85),
    inset 0 30px 28px -22px rgba(0, 0, 0, .6),
    inset 0 -1px 0 rgba(0, 0, 0, .6);
}

/* Client: the quote credit sits directly under the quote as a readable line, not a caption down by the photo */
.pb-quote__quote { justify-content: center; }
.pb-quote__quote .pb-quote__text { margin-block: 0; }
.pb-quote__quote .pb-quote__cite, .pb-quote__cite {
  margin-top: clamp(20px, 2.2vw, 32px);
  font-family: var(--font-display); font-size: clamp(17px, 1.3vw, 20px); font-weight: 500;
  letter-spacing: 0; text-transform: none;
}
.pb-quote--light .pb-quote__cite { color: var(--graphite); }
@media (max-width: 900px) { .pb-quote__quote .pb-quote__cite { margin-top: 20px; } }