/* 01 ABOUT — "International Conceptual Branding Agency"
   Real Easton copy, verbatim from the live eastonmedia.com about band —
   including the "We build brands that inspire, evolve, engage and grow"
   line, which is the exact sentence already typed out in the Splice claim
   further down this page. The live version sits on a saturated blue
   backdrop; this deck is deliberately never dark, so the same content is
   set here on paper instead, with a low-contrast faceted pattern (the same
   diagonal-band device the services monograms use) standing in for it.

   Normal document flow, not pinned — a credibility band, not a mechanism. */

.about {
  position: relative;
  /* Extra top air, well past the old symmetric clamp(70,13svh,150) — this
     sits right off the pinned 600vh cine hero with no pin of its own, so a
     single wheel/trackpad scroll could carry a visitor straight through the
     whole band into the next section before they'd read a word of it. More
     top padding (and a taller band overall) means more scroll distance has
     to pass before that next section arrives, giving the reveal — and the
     visitor — room to actually land here. */
  padding-top: clamp(220px, 36svh, 420px);
  padding-bottom: clamp(90px, 15svh, 170px);
  padding-inline: var(--pad);
  overflow: hidden;
  background: var(--print);
}
.about::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    repeating-linear-gradient(135deg, rgb(30 42 68 / .035) 0 40px, transparent 40px 80px),
    repeating-linear-gradient(45deg, rgb(200 106 74 / .028) 0 60px, transparent 60px 120px);
  pointer-events: none;
}

.about__inner {
  position: relative; z-index: 1;
  max-width: min(920px, 92vw); margin-inline: auto;
  text-align: center;
}

/* Reveal: fade + rise, staggered head → script → lead → stats, driven by
   --r (set in deck.js aboutUpdate, 0 as the band enters to 1 once settled).
   Default var(--r, 1) keeps everything visible with JS off, matching the
   rest of the deck's no-JS fallback. Fully reversible — scrolling back up
   fades it back out, same as .row below. */
.about__head {
  font-family: var(--display); font-weight: 800;
  font-variation-settings: "wdth" 108;
  font-size: clamp(1.5rem, 4vmin, 2.5rem); line-height: 1.1;
  letter-spacing: -.015em; color: var(--ink); text-wrap: balance;
  --t: clamp(0, (var(--r, 1) - 0.00) * 3.2, 1);
  opacity: var(--t);
  transform: translate3d(0, calc((1 - var(--t)) * 22px), 0);
  transition: transform .3s var(--ease);
}

.about__script {
  font-family: var(--script); font-weight: 400;
  font-size: clamp(1.9rem, 5.4vmin, 3.3rem); line-height: 1.25;
  color: var(--accent);
  margin-top: clamp(4px, 1svh, 10px);
  --t: clamp(0, (var(--r, 1) - 0.12) * 3.2, 1);
  opacity: var(--t);
  transform: translate3d(0, calc((1 - var(--t)) * 22px), 0);
  transition: transform .3s var(--ease);
}

.about__lead {
  margin: clamp(22px, 3.6svh, 36px) auto 0;
  max-width: 64ch;
  font-size: clamp(14px, 1.7vmin, 17px); line-height: 1.65;
  color: var(--ink-2);
  --t: clamp(0, (var(--r, 1) - 0.22) * 3.2, 1);
  opacity: var(--t);
  transform: translate3d(0, calc((1 - var(--t)) * 22px), 0);
  transition: transform .3s var(--ease);
}

.about__stats {
  margin-top: clamp(48px, 8svh, 88px);
  display: grid; row-gap: clamp(32px, 5svh, 48px); column-gap: 16px;
  --t: clamp(0, (var(--r, 1) - 0.34) * 3.2, 1);
  opacity: var(--t);
  transform: translate3d(0, calc((1 - var(--t)) * 22px), 0);
  transition: transform .3s var(--ease);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) {
  .about__stats { grid-template-columns: repeat(5, 1fr); }
}

.stat__num {
  font-family: var(--display); font-weight: 800;
  font-variation-settings: "wdth" 112;
  font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1;
  letter-spacing: -.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat__num i {
  font-style: normal; font-size: .5em; color: var(--accent);
  margin-left: 1px; vertical-align: super;
}

.stat__label {
  margin-top: 9px;
  font-family: var(--mono); font-size: clamp(8.5px, 1.1vmin, 10.5px);
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent);
}

@media (max-width: 480px) {
  .about__stats { grid-template-columns: repeat(2, 1fr); }
  .about__stats .stat:last-child { grid-column: 1 / -1; }
}