/* About page styles — Exterior Services LLC
   Hero + process are in service.css (linked on this page); design3d is
   removed site-wide (Brief D14).
   This file covers: story 2-col layout, portrait panel. */

/* ══════════════════════════════════════════════════════════════════════════════
   STORY — copy left, portrait right
   ══════════════════════════════════════════════════════════════════════════════ */
.about__story {
  margin-top: var(--sp-6);
  width: min(68rem, 100%); margin-inline: auto;
  display: grid; grid-template-columns: 3fr 2fr;
  gap: var(--sp-7); align-items: start;
}
.about__copy p {
  line-height: 1.8; color: var(--mut);
}
.about__copy p + p { margin-top: var(--sp-5); }
.about__copy p:first-child { color: var(--ink); }
.about__copy p:first-child::first-letter {
  font-family: var(--font-display); font-weight: 700;
  font-size: 3.2em; line-height: 0.8;
  float: left; padding-right: var(--sp-3); padding-top: var(--sp-1);
  color: var(--green);
}
.about__portrait .shot { aspect-ratio: 3 / 4; }

/* 2020 lockup sign-off under the story copy (Brief D14) — decorative, sized to
   sit in the column rather than fill it; centred so it reads as a signature. */
.about__logo {
  display: block; margin: var(--sp-6) auto 0;
  width: min(340px, 80%); height: auto;
}

/* ── Stats band centering (about page uses narrower max-width than full mosaic) */
.about__stats { max-width: 42rem; margin-inline: auto; }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE — ≤880px
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  .about__story {
    grid-template-columns: 1fr;
  }
  .about__portrait { order: -1; } /* portrait above copy on mobile */
  /* FLAGGED (Brief 16 pt 2 mobile-ratio audit): TEAM-002 is natively 0.667, so
     this 4/3 box throws away HALF the frame — the worst mobile crop on the site.
     2/3 would be zero-crop. Left as-is pending Bobby's decision, per the brief. */
  .about__portrait .shot { aspect-ratio: 4 / 3; }
}