/* ==========================================================================
   /about — hero with tile collage, story timeline (the signal), three rules
   + hiring band. Prefix: ab-
   ========================================================================== */

/* ---------- hero: headline left, intro right, three tiles below ---------- */
.ab-hero { overflow: hidden; padding-block: calc(var(--hd-h) + clamp(40px, 5vw, 80px)) var(--sy-b); }
.ab-hero__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 28px 72px; }
.ab-hero__h { font-size: clamp(2.6rem, 5.4vw, 5.8rem); }
.ab-hero__side { padding-bottom: 8px; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 26px; }
.ab-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font-size: 11px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.ab-chips i { width: 8px; height: 8px; border-radius: 50%; background: var(--grad-warm); }
@media (max-width: 900px) { .ab-hero__top { grid-template-columns: minmax(0, 1fr); align-items: start; } }

.ab-tiles { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(16px, 2vw, 28px); margin-top: clamp(48px, 6vw, 96px); }
.ab-tile { position: relative; border-radius: 28px; }
.ab-tile--a { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; aspect-ratio: 1.3; padding: clamp(18px, 2vw, 26px); color: #f5f5f5; background: #111; }
.ab-tile--b { display: grid; place-content: center; justify-items: center; gap: 12px; aspect-ratio: 1; border-radius: 50%; color: #fff; background: var(--grad); }
.ab-tile--b img { width: clamp(64px, 7vw, 110px); height: auto; filter: brightness(0) invert(1); }
.ab-tile--b b { font-size: clamp(1.6rem, 2.6vw, 2.6rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.ab-tile--c { display: grid; align-content: center; gap: 14px; aspect-ratio: 1.1; padding: clamp(16px, 1.8vw, 24px); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.ab-tile__lbl { font-size: 10px; color: var(--mut); }
.ab-tile--a .ab-tile__lbl { color: #9a9aa4; }
.ab-tile__chart { width: 100%; height: 100%; min-height: 0; }
.ab-tile__nums { display: flex; justify-content: space-between; font-size: clamp(1.4rem, 2.4vw, 2.2rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.ab-tile__nums span { display: grid; gap: 6px; }
.ab-tile__nums span:last-child { text-align: right; }
.ab-tile__nums small { font-size: 9.5px; font-weight: 400; letter-spacing: .06em; color: #9a9aa4; }
.ab-tile__logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ab-tile__logos li { display: grid; place-items: center; aspect-ratio: 1.5; padding: 8px; border-radius: 12px; background: #fff; }
.ab-tile__logos img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

/* floating note on each tile (as on the reference's photos) */
.ab-note { position: absolute; left: 18px; bottom: -18px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: 999px; font-size: 10.5px; color: #111; background: #fff; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(17, 17, 17, .06); white-space: nowrap; }
.ab-note::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--pink, #FF3D81); box-shadow: 0 0 0 2px #fff; }
.ab-note__ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--grad-warm); }
.ab-note__ic .icon { width: 12px; height: 12px; }
.ab-tile--b .ab-note { left: 50%; bottom: 6%; translate: -50% 0; }
.motion .ab-tile { animation: hero-in .9s var(--ease) both; animation-delay: calc(.35s + var(--t, 0) * .12s); }
.ab-tile--b { --t: 1; }
.ab-tile--c { --t: 2; }
@media (max-width: 700px) {
  .ab-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .ab-tile--a { grid-column: 1 / -1; aspect-ratio: 1.45; }
  .ab-tile--c { aspect-ratio: 1; }
  .ab-tile__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-tile__logos li:nth-child(n + 5) { display: none; }
  .ab-note { font-size: 10px; }
  .ab-tile--c .ab-note { left: 50%; translate: -50% 0; }
  .ab-tile--b .ab-note { display: none; }   /* wider than the circle on a phone */
}

/* ---------- our story: a plain list by default (no JS, phones, reduced motion) ---------- */
.ab-tl__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.ab-tl__now { display: none; }   /* the year counter only means something while the signal runs */
.ab-tl__now b { display: block; font-size: clamp(2.2rem, 4.4vw, 4.2rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; text-align: right; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-tl__now .mono { display: block; margin-top: 8px; font-size: 11px; text-align: right; color: var(--mut); }
.ab-tl__view { margin-top: clamp(40px, 5vw, 72px); }
.ab-tl__track { position: relative; display: grid; gap: 34px; max-width: var(--max); margin-inline: auto; padding-inline: max(var(--pad), env(safe-area-inset-left, 0px)); padding-left: calc(var(--pad) + 46px); }
.ab-tl__track::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: calc(var(--pad) + 14px); width: 2px; border-radius: 2px; background: linear-gradient(180deg, #FF7A00, #FF3D81 45%, #7B4DFF 80%, #3A8DFF); }
.ab-tl__it { position: relative; display: grid; justify-items: start; gap: 8px; }
.ab-tl__yr { font-size: clamp(2.6rem, 10vw, 4.4rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.ab-tl__node { position: absolute; top: calc(clamp(2.6rem, 10vw, 4.4rem) / 2 - 15px); left: -46px; display: grid; place-items: center; width: 30px; height: 30px; }
.ab-tl__node i { width: 12px; height: 12px; border-radius: 50%; background: #FF3D81; box-shadow: 0 0 0 6px rgba(255, 61, 129, .18); }
.ab-tl__pulse { display: none; }
.ab-tl__h { max-width: 34ch; font-size: clamp(1rem, 1.2vw, 1.12rem); font-weight: 500; line-height: 1.4; }
.ab-tl__chip { margin-top: 2px; }
a.ab-tl__chip:hover { box-shadow: inset 0 0 0 1px #FF3D81; }
.ab-tl__hint { display: none; }

/* ---------- wide screens with motion: the section pins and the signal runs year to year ----------
   about.js sets --p (0 → 1 through the section) and is-on / is-past on the milestones. */
@media (min-width: 900px) and (min-height: 640px) {
  .js.motion .ab-tl { height: calc(100vh + (var(--n) - 1) * 55vh); padding-block: 0; }
  .js.motion .ab-tl__pin { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; height: 100vh; height: 100svh; padding-top: var(--hd-h, 80px); overflow: hidden; }
  .js.motion .ab-tl__now { display: block; }
  .js.motion .ab-tl__view { --w: clamp(300px, 27vw, 430px); margin-top: clamp(32px, 6vh, 72px); }
  .js.motion .ab-tl__track {
    display: flex; gap: 0; width: max-content; max-width: none; margin: 0;
    --pl: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
    padding-left: var(--pl); padding-right: 0;
    /* slides just far enough for the last milestone to reach the right-hand margin */
    transform: translateX(calc(-1 * var(--p, 0) * (var(--n) * var(--w) + 2 * var(--pl) - 100vw)));
    will-change: transform;
  }
  .js.motion .ab-tl__track::before { display: none; }
  .js.motion .ab-tl__it {
    --f: clamp(0, calc(var(--p, 0) * (var(--n) - 1) + .5 - var(--k)), 1);   /* how much of this milestone's line the signal has filled */
    flex: 0 0 var(--w); justify-items: center; gap: 16px; padding-inline: 14px; text-align: center;
  }
  .js.motion .ab-tl__yr { font-size: clamp(4.2rem, 7.6vw, 7.6rem); white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .26); transition: color .45s var(--ease), -webkit-text-stroke-color .45s; }
  .js.motion .ab-tl__it.is-past .ab-tl__yr { -webkit-text-stroke-color: rgba(255, 255, 255, .42); }
  .js.motion .ab-tl__it.is-on .ab-tl__yr { color: #fff; -webkit-text-stroke-color: transparent; }
  .js.motion .ab-tl__node { position: relative; top: auto; left: auto; width: calc(100% + 28px); margin-inline: -14px; height: 64px; }
  .js.motion .ab-tl__node::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dotted rgba(255, 255, 255, .18); }
  .js.motion .ab-tl__node::after { content: ""; position: absolute; left: 0; top: calc(50% - 1px); width: calc(var(--f) * 100%); height: 2px; background: #FF3D81; box-shadow: 0 0 12px rgba(255, 61, 129, .75); }
  .js.motion .ab-tl__node i { position: relative; z-index: 1; width: 12px; height: 12px; background: #1c1c20; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .4); transition: background .4s, box-shadow .4s; }
  .js.motion .ab-tl__it.is-past .ab-tl__node i { background: #FF3D81; box-shadow: 0 0 0 1.5px #FF3D81; }
  .js.motion .ab-tl__it.is-on .ab-tl__node i { background: #fff; box-shadow: 0 0 0 9px rgba(255, 61, 129, .22), 0 0 0 22px rgba(255, 61, 129, .08), 0 0 28px 6px rgba(255, 61, 129, .55); }
  /* the heartbeat blip where the signal has passed a milestone */
  .js.motion .ab-tl__pulse { position: absolute; z-index: 1; left: calc(50% - 46px); top: 50%; display: block; width: 80px; height: 40px; translate: 0 -50%; fill: none; stroke: #FF3D81; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 140; stroke-dashoffset: 140; filter: drop-shadow(0 0 6px rgba(255, 61, 129, .8)); transition: stroke-dashoffset .7s var(--ease); }
  .js.motion .ab-tl__it.is-past .ab-tl__pulse { stroke-dashoffset: 0; }
  .js.motion .ab-tl__h { color: var(--mut); transition: color .4s; }
  .js.motion .ab-tl__it.is-on .ab-tl__h { color: var(--fg); }
  .js.motion .ab-tl__chip { opacity: .45; transition: opacity .4s; }
  .js.motion .ab-tl__it.is-on .ab-tl__chip, .js.motion .ab-tl__it.is-past .ab-tl__chip { opacity: 1; }
  .js.motion .ab-tl__hint { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: clamp(28px, 6vh, 64px); font-size: 10.5px; color: var(--mut); }
  .js.motion .ab-tl__hint i { width: 28px; height: 2px; border-radius: 2px; background: var(--grad-warm); }
}

/* ---------- how we work: three rules + hiring band ---------- */
.ab-rules__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); margin-top: var(--sy-head); }
.ab-rule { position: relative; display: grid; align-content: start; gap: 14px; padding: clamp(24px, 2.4vw, 34px); border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.ab-rule__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; background: var(--grad-warm); }
.ab-rule__ic .icon { width: 22px; height: 22px; }
.ab-rule__n { position: absolute; top: clamp(24px, 2.4vw, 34px); right: clamp(24px, 2.4vw, 34px); font-size: 11px; color: var(--mut); }
.ab-rule h3 { margin-top: clamp(28px, 3vw, 44px); font-size: clamp(1.35rem, 1.9vw, 1.75rem); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
.ab-rule p { color: var(--mut); line-height: 1.6; }
@media (max-width: 900px) { .ab-rules__grid { grid-template-columns: minmax(0, 1fr); } }

.ab-hire { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; margin-top: clamp(40px, 5vw, 72px); padding: 12px 12px 12px clamp(20px, 2.4vw, 32px); border-radius: 999px; color: #111; background: var(--grad-warm); transition: box-shadow .3s; }
.ab-hire:hover { box-shadow: 0 18px 40px -18px rgba(255, 61, 129, .7); }
.ab-hire__l { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; }
.ab-hire__l i { width: 8px; height: 8px; border-radius: 50%; background: #111; }
.ab-hire__t { flex: 1 1 320px; font-size: clamp(1.05rem, 1.55vw, 1.4rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.ab-hire__b { display: inline-flex; align-items: center; gap: 14px; padding: 6px 6px 6px 22px; border-radius: 999px; font-size: 11px; color: #fff; background: #111; }
.ab-hire__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #111; background: var(--grad-warm); }
.ab-hire__ic .icon { width: 16px; height: 16px; }
@media (max-width: 700px) { .ab-hire { border-radius: 26px; padding: 20px; } .ab-hire__b { width: 100%; justify-content: space-between; } }