/* ==========================================================================
   FGX — About page (about-us/index.html)
   Builds on /assets/fgx/fgx-type.css (fonts + fluid type scale) and
   ui-ux.css (tokens, grid, buttons, hero, theme switching, shared modules).
   Only the about-specific modules live here:
     FGX-AB-03 sticky media scroller   FGX-AB-04 pinned evolution timeline
     FGX-AB-06 growth-principle cards
   ========================================================================== */

.ab .ux-statement__text { text-indent: 0; }

/* ---------- 01 Hero ------------------------------------------------------- */
.ab-hero__media { height: clamp(420px, 44vw, 80vh); }
.ab-hero__media img { object-position: center 22%; }

/* ---------- 02 Statement -------------------------------------------------- */
.ab-statement__foot { margin-top: clamp(40px, 5vw, 88px); }
.ab-statement__foot .ux-body { max-width: 52ch; }
.ab-stats { margin: clamp(72px, 9vw, 150px) 0 0; }

/* ---------- 03 Sticky media scroller ------------------------------------- */
.ab-pillars__layout { display: grid; gap: 72px; }
.ab-pillar__n { margin-bottom: 18px !important; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ux-red); }
.ab-pillar .ux-h3 { max-width: 14ch; }
.ab-pillar .ux-body { max-width: 46ch; }
.ab-pillar__btn { align-self: flex-start; margin-top: 32px; }
.ab-pillar__img { aspect-ratio: 491 / 340; margin-bottom: 28px; }
.ab-pillars__media { display: none; }
@media (min-width: 992px) {
  .ab-pillars__layout { grid-template-columns: 5fr 7fr; gap: var(--ux-gap); }
  .ab-pillars__list { display: grid; }
  .ab-pillar { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding-block: 8vh; opacity: .28; transition: opacity .6s var(--ux-ease); }
  .ab-pillar.is-on { opacity: 1; }
  .ab-pillar__img { display: none; }
  .ab-pillars__media { display: block; }
  .ab-pillars__sticky { position: sticky; top: 16vh; }
  .ab-pillars__frame { position: relative; aspect-ratio: 491 / 340; overflow: hidden; border-radius: calc(var(--ux-radius) + 8px); background: #d9d4d1; }
  .ab-pillars__frame img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    clip-path: inset(100% 0 0 0 round 0); transform: scale(1.14);
    transition: clip-path 1.1s var(--ux-ease), transform 1.6s var(--ux-ease);
  }
  .ab-pillars__frame img.is-on { clip-path: inset(0 0 0 0 round 0); transform: scale(1); z-index: 1; }
  .ab-pillars__frame img.was-on { z-index: 0; clip-path: inset(0 0 0 0); transform: scale(1.06); }
  .ab-pillars__count { display: flex; align-items: baseline; gap: 6px; margin-top: 20px !important; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--ux-muted); }
  .ab-pillars__count b { color: var(--ux-red); }
  .ab-pillars__count span { margin-left: auto; font-family: var(--ux-display); font-size: clamp(22px, 2vw, 34px); font-weight: 600; letter-spacing: -.035em; color: var(--ux-fg); }
}

/* ---------- 04 Evolution timeline ---------------------------------------- */
.ab-tl { position: relative; }
.ab-tl__stage { position: relative; padding-block: clamp(96px, 12vw, 200px); overflow: hidden; }
.ab-tl__top { display: grid; gap: 18px; margin-bottom: clamp(48px, 6vw, 96px); }
@media (min-width: 1200px) { .ab-tl__top { grid-template-columns: 2fr 10fr; gap: var(--ux-gap); align-items: start; } }
.ab-tl__title { font-family: var(--ux-display); font-weight: 600; font-size: var(--fgx-size-h2-sm, clamp(40px, 5.6vw, 110px)); line-height: .98; letter-spacing: -.045em; max-width: 14ch; }

/* Default (mobile / no JS): a vertical timeline with a photo per entry */
.ab-year, .ab-deck, .ab-rail { display: none; }
.ab-entries { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; display: grid; gap: 72px; }
.ab-entries::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 0; width: 1px; background: var(--ux-line); }
.ab-entry { position: relative; }
.ab-entry::before { content: ""; position: absolute; left: -28px; top: 10px; width: 11px; height: 11px; border-radius: 50%; background: var(--ux-red); box-shadow: 0 0 0 5px rgba(229, 36, 33, .2); }
.ab-entry__y { font-family: var(--ux-display); font-weight: 700; font-size: clamp(64px, 16vw, 120px); line-height: .85; letter-spacing: -.07em; color: var(--ux-red); }
.ab-entry__t { margin: 18px 0 12px !important; font-family: var(--ux-display); font-weight: 600; font-size: var(--fgx-size-h3, clamp(34px, 3.6vw, 68px)); line-height: 1; letter-spacing: -.04em; }
.ab-entry .ux-body { max-width: 40ch; }
.ab-entry__img { aspect-ratio: 600 / 580; margin-top: 28px; max-width: 520px; }
.ab-entry:last-child .ab-entry__img { aspect-ratio: 1917 / 900; max-width: none; }
.ab-entry__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; top: 0; }

/* Pinned (desktop, added by JS): rolling year, stacked entries, photo deck, rail */
.ab-tl.is-pinned .ab-tl__stage { height: 100vh; min-height: 680px; padding-block: clamp(96px, 12vh, 130px) 36px; display: flex; flex-direction: column; }
.ab-tl.is-pinned .ab-tl__stage > .ux-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ab-tl.is-pinned .ab-tl__top { margin-bottom: 2vh; }
.ab-tl.is-pinned .ab-tl__title { font-size: clamp(30px, 3vw, 56px); max-width: none; }
.ab-tl.is-pinned .ab-tl__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 5fr 7fr; gap: var(--ux-gap); align-items: center; }
.ab-tl.is-pinned .ab-year { display: flex; font-family: var(--ux-display); font-weight: 700; font-size: clamp(120px, 13vw, 260px); line-height: 1; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.ab-year > span:not(.ab-year__col) { color: transparent; -webkit-text-stroke: 1px rgba(244, 240, 238, .35); }
.ab-year__col {
  position: relative;
  display: inline-block;
  flex: 0 0 .68em;
  width: .68em;
  height: 1em;
  padding-right: 0;
  margin-right: -.05em;
  overflow: hidden;
  color: var(--ux-red);
}
.ab-year__strip { display: block; will-change: transform; }
.ab-year__strip i { display: block; height: 1em; font-style: normal; }
.ab-tl.is-pinned .ab-entries { display: grid; padding: 0; margin-top: 3vh; gap: 0; }
.ab-tl.is-pinned .ab-entries::before, .ab-tl.is-pinned .ab-entry::before, .ab-tl.is-pinned .ab-entry__y, .ab-tl.is-pinned .ab-entry__img { display: none; }
.ab-tl.is-pinned .ab-entry { grid-area: 1 / 1; }
.ab-tl.is-pinned .ab-entry__t { margin-top: 0 !important; font-size: clamp(30px, 3vw, 58px); }

.ab-tl.is-pinned .ab-deck { display: grid; place-items: center; position: relative; height: 100%; min-height: 360px; }
.ab-photo {
  --dim: 0;
  position: relative; grid-area: 1 / 1; width: min(52%, 44vh); margin: 0;
  padding: 12px 12px 0; border-radius: 18px; background: #f4f0ee;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .5); will-change: transform;
}
.ab-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: var(--dim); pointer-events: none; }
.ab-photo img { display: block; width: 100%; aspect-ratio: 600 / 580; object-fit: cover; border-radius: 10px; background: #cfc8c3; }
.ab-photo--wide { width: min(92%, 110vh); }
.ab-photo--wide img { aspect-ratio: 1917 / 760; }
.ab-photo figcaption { display: flex; gap: 12px; align-items: baseline; padding: 14px 4px 16px; font-size: 14px; font-weight: 700; color: var(--ux-ink); }
.ab-photo figcaption b { font-family: var(--ux-display); font-size: 20px; letter-spacing: -.03em; color: var(--ux-red); }

.ab-tl.is-pinned .ab-rail { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 3vh 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--ux-line); }
.ab-rail__m { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(244, 240, 238, .4); transition: color .4s; }
.ab-rail__m b { font-family: var(--ux-display); font-size: 20px; letter-spacing: -.03em; text-transform: none; }
.ab-rail__m.is-past { color: rgba(244, 240, 238, .7); }
.ab-rail__m.is-on { color: #fff; }
.ab-rail__m.is-on b { color: var(--ux-red); }
.ab-rail__bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; overflow: hidden; }
.ab-rail__bar i { position: absolute; inset: 0; background: var(--ux-red); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- 06 Growth principles ----------------------------------------- */
.ab-principles__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ux-gap); }
@media (min-width: 768px) { .ab-principles__grid { grid-template-columns: 1fr 1fr; } }
.ab-principle {
  position: relative; display: flex; flex-direction: column; min-height: clamp(360px, 30vw, 480px); padding: clamp(28px, 3vw, 48px);
  overflow: hidden; isolation: isolate; border-radius: calc(var(--ux-radius) + 6px); background: var(--ux-ink); color: var(--ux-paper);
}
.ab-principle__n { font-family: var(--ux-display); font-weight: 700; font-size: clamp(88px, 9vw, 170px); line-height: .8; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1px rgba(244, 240, 238, .3); transition: -webkit-text-stroke-color .5s, color .5s; }
.ab-principle:hover .ab-principle__n { color: var(--ux-red); -webkit-text-stroke-color: var(--ux-red); }
.ab-principle .ux-h3 { margin: auto 0 16px !important; padding-top: 40px; color: #fff; }
.ab-principle .ux-body { color: rgba(244, 240, 238, .7); max-width: 52ch; }

@media (prefers-reduced-motion: reduce) {
  .ab-pillars__frame img, .ab-pillar { transition: none; }
}