/* ==========================================================================
   About — pinned light panel.
   A tall scroll track (.s-about-wrap) holds a sticky full-height panel. The
   scrubbed timeline in about.js lifts the intro text away, gathers the five
   icon tiles into a mini row, then flies each one into its slot inside the
   closing sentence while the words slide in around it.
   ========================================================================== */

/* ---------- Scroll track + sticky panel ---------- */
.s-about-wrap {
  position: relative;
  height: calc(var(--vhx, 100svh) * 1.85);          /* pinned for .85 of a viewport */
  margin-bottom: calc(var(--vhx, 100svh) * -.08);   /* Trust starts 8vh early and slides over */
  background: var(--ice);                           /* no seam under the hero wave */
}
.s-about {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: var(--vhx, 100svh);
  padding-top: min(60rem, 5vh);
  padding-bottom: min(48rem, 4vh);
  background: var(--ice);
  color: var(--ink);
  overflow: clip;
}
.about__sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.about__container { padding: 0 48rem; }

/* ---------- Intro text ---------- */
.about__base { position: relative; will-change: transform; }
.about__subtitle { color: var(--ink); }

.s-about .about__title {
  margin-top: 85rem;
  font-size: 140rem;               /* Anton runs wider than the reference face; 140rem keeps line 1 ~92% of the row */
  line-height: 1;                  /* Anton caps are tall (.82em) — ~25rem of air between the lines */
  color: var(--ink);
}
/* source markup: two parts; about.js regroups the words into visual lines */
.about__tpart, .about__tline { display: block; white-space: nowrap; }
.about__tpart--2, .about__tline--r { text-align: right; }
.about__w { display: inline-block; }
/* keep the wide glyph from inflating its line box (equal line spacing), and
   move the scale origin down by the same .2em so the glyph sits where it did */
.about__title .wide { line-height: .6; transform-origin: 50% calc(100% + .2em); margin: 0 .015em; }

.about__desc {
  margin-top: 45rem;
  padding-left: 612rem;            /* lines up with the start of title line 2 */
  font-size: 19rem;
  line-height: 1.25;
}
.about__lead { font-weight: 500; margin-bottom: 18rem; }
.about__text { font-weight: 300; max-width: 440rem; }

/* ---------- Tiles: an edge-to-edge row that fills the width ---------- */
.about__tiles {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: min(73rem, 6.08vh);
  padding: 0 32rem;
}
.about__tile {
  position: relative;
  flex: none;
  aspect-ratio: 1;
  height: 100%;
  /* five tiles add up to 5.144 tile-widths → fill the row when there is room */
  max-height: calc((min(100vw, 1920rem) - 96rem - 20px) / 5.144);
  will-change: transform;
}
.about__tile--wide { aspect-ratio: 412 / 360; }
.about__icon { position: absolute; inset: 0; pointer-events: none; }
.about__icon svg, .about__slot svg { width: 100%; height: 100%; overflow: visible; }
.about__icon--b { transform: scale(0); }

/* ---------- Closing sentence (tiles land in the empty slots) ---------- */
.about__final {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
  height: var(--vhx, 100svh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}
.about__sentence {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 104rem;               /* our line 1 runs longer than the reference copy */
  line-height: .92;
  letter-spacing: -.04em;
  font-variation-settings: "opsz" 96;  /* keep the tight display cut at every size (small sizes default to a wider text cut) */
  color: var(--ink);
}
.about__line { display: flex; justify-content: center; align-items: center; white-space: nowrap; }
.about__word { display: inline-block; }
.about__sentence .wide {
  letter-spacing: 0;
  font-weight: 480;
  font-variation-settings: "wdth" 150, "wght" 480;
  margin: 0 .02em;
}
/* slots are sized in em so they track the sentence size at every breakpoint */
.about__slot { position: relative; flex: none; width: .88em; height: .88em; margin: 0 .145em; }
.about__slot--heart { width: .855em; height: .855em; }
.about__slot--tag { width: 1.01em; }
.about__slot--bolt { margin-right: 0; }
.about__slot--cursor { margin-right: .045em; }
.about__slot--chart { margin-left: .045em; }
.about__slot svg { display: none; }       /* only the static version shows slot icons */

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
  .s-about { padding-top: min(92rem, 6vh); }
  .about__container { padding: 0 25rem 0 24rem; }
  .about__subtitle { margin: 0 0 min(92rem, 6vh); font-size: 18rem; }
  /* WE SHAPE BRANDS AND / DIGITAL / PRODUCTS THAT / GROW; capped by the viewport
     height so short landscape tablets / phones still show the tile row */
  .s-about .about__title { margin-top: 0; font-size: min(74rem, calc(var(--vhx, 100svh) * .095)); line-height: 1.02; }
  .about__tpart { white-space: normal; }
  /* "PRODUCTS THAT GROW" would fill ~93% of the row, so its right alignment
     read as a stray indent; a narrower measure breaks it into a clear
     right-aligned stair: PRODUCTS THAT / GROW (about.js keeps these breaks) */
  .about__tpart--2 { padding-left: 20%; }
  .about__desc { margin-top: 45rem; padding-left: 0; font-size: 16rem; }
  .about__lead { margin-bottom: 16rem; }
  .about__text { max-width: 420rem; }

  .about__tiles {
    flex: 0 0 auto;
    justify-content: center;          /* centred when 11vh caps the tile size */
    gap: 10.9rem;
    margin-top: min(100rem, 6vh);
    padding: 0 25rem 0 24rem;
  }
  .about__tile { height: min(126rem, 11vh); max-height: none; }

  .about__final { padding: 0 24rem; }
  .about__sentence { font-size: 44rem; }
}

/* ---------- Phone ---------- */
@media (max-width: 743px) {
  .s-about { padding-top: min(98rem, 8vh); }
  .about__container { padding: 0 16rem; }
  .about__subtitle { margin-bottom: 44rem; font-size: 13rem; }
  .s-about .about__title { font-size: min(60rem, calc(var(--vhx, 100svh) * .085)); line-height: 1; }
  .about__tpart--2 { padding-left: 12%; }          /* PRODUCTS / THAT GROW */
  .about__desc { margin-top: 22rem; font-size: 13rem; }
  .about__lead { margin-bottom: 12rem; }
  .about__text { max-width: 300rem; }

  .about__tiles { gap: 5.8rem; margin-top: min(50rem, 6vh); padding: 0 16rem; }
  .about__tile { height: min(64rem, 9vh); }

  .about__final { padding: 0 16rem; }
  .about__sentence { font-size: 23rem; }
}

/* ---------- Reduced motion / no GSAP / no JS: a static, readable version ----------
   Base layout first, then the finished sentence with its icons in place. */
html.reduced-motion .s-about-wrap,
html:not(.js) .s-about-wrap { height: auto; margin-bottom: 0; }
html.reduced-motion .s-about,
html:not(.js) .s-about { position: relative; height: auto; min-height: var(--vhx, 100svh); overflow: visible; }
html.reduced-motion .about__tiles,
html:not(.js) .about__tiles { flex: 0 0 auto; height: calc((min(100vw, 1920rem) - 96rem - 20px) / 5.144); }
html.reduced-motion .about__final,
html:not(.js) .about__final {
  position: relative;
  height: auto;
  opacity: 1;
  padding-top: 170rem;
  padding-bottom: 150rem;
}
html.reduced-motion .about__slot svg,
html:not(.js) .about__slot svg { display: block; }
html:not(.js) .about__title { visibility: visible; }
@media (max-width: 991px) {
  html.reduced-motion .about__tiles,
  html:not(.js) .about__tiles { height: auto; }
  html.reduced-motion .about__final,
  html:not(.js) .about__final { padding-top: 110rem; padding-bottom: 90rem; }
}