/* achievements.css — 08 / Achievements
 *
 * Swiss/editorial: flat, rule-based, no radius and no shadows anywhere.
 * Vertical rhythm is in vh so the panel always fills exactly 100vh without
 * internal scrolling. Type is fluid clamp() throughout.
 *
 * TRACK GEOMETRY — 380vh, in three parts, all derived in sequence.js:
 *   100vh  curtain. The Clients section is pinned above this panel and clipped
 *          away from the top, so the red recedes and uncovers this grey.
 *    80vh  hold. Crossing into it triggers the entrance, which then plays on its
 *          own clock — the user does not scroll it.
 *   200vh  flight. The handoff's original track length, so its windows stay
 *          calibrated exactly as specified.
 * Change any of these and the matching constant in sequence.js must follow, as
 * must .clients-track's padding-bottom and this track's negative margin.
 *
 * The rail, the side column, the guides, the split heading and the flight
 * layer are shared with About and live in sequence.css. Below 1024px:
 * achievements.small.css.
 */

.ach-track {
  /* 100vh curtain + 80vh entrance hold + 200vh flight. The 200vh flight tail is
     the handoff's original track length, so its windows stay calibrated. */
  height: 380vh;
  position: relative;
  z-index: 1;

  /* Slides the grey panel up BEHIND the pinned Clients section, so it is already
     docked at top:0 when the red starts being clipped away. The offset is the
     Clients stick distance (100vh) plus one viewport. */
  margin-top: -200vh;
}

.ach {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-ach);
  color: var(--near-black);
}


.ghost {
  position: absolute;
  left: -.03em; bottom: -.17em;
  font-family: var(--display); font-weight: 600;
  font-size: 24vw; line-height: .78;
  letter-spacing: -.05em;
  color: var(--ghost);
  white-space: nowrap;
  pointer-events: none; user-select: none;
}



/* --- centre column ------------------------------------------------------- */

.ach__centre {
  position: absolute;
  left: 11%; width: 48%;
  top: 0; bottom: calc(0px + var(--banner-h));
  display: flex; flex-direction: column;
  justify-content: flex-end; align-items: flex-start;
  padding: 0 4vw 6vh 1.6vw;
}

/* Flight source. Hidden for the whole page life — the fixed clone in the flight
   layer is what the user actually sees, here and in About. */
.n16 {
  visibility: hidden;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(130px, 17vw, 270px);
  line-height: .8;
  letter-spacing: -.045em;
  color: var(--dim-num);
}

.yearsblock {
  margin-top: 2.2vh;
  padding-top: 1.6vh;
  border-top: 2px solid var(--red);   /* the one emphasis rule in the design */
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  max-width: 100%;
}
.yearsblock__cap {
  visibility: hidden;                 /* flight source */
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
.yearsblock__note {
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(10px, .72vw, 12px);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-3);
}

.expertise { margin-top: 4.2vh; width: 100%; }
.expertise__label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(10px, .72vw, 12px);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.expertise__label span { white-space: nowrap; }
.expertise__label i { flex: 1; height: 1px; background: var(--hair-2); }

.expertise__grid {
  margin-top: 1vh;
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(20px, 2.4vw, 44px);
  border-top: 1px solid rgba(18, 28, 40, .2);
}
.xitem {
  display: grid; grid-template-columns: 20px 1fr;
  gap: clamp(8px, .8vw, 12px);
  align-items: baseline;
  padding: 1.1vh 0;
  border-bottom: 1px solid var(--hair-2);
}
/* The last row of the two-column grid closes on the grid's own edge. */
.xitem:nth-last-child(-n+2) { border-bottom: 0; }
.xitem__i {
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(10px, .68vw, 11px);
  letter-spacing: .1em;
  color: var(--red);
}
.xitem__t {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(13px, 1.05vw, 17px);
  letter-spacing: -.01em; line-height: 1.2;
  color: var(--ink-head);
}
.xitem__s {
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(10px, .66vw, 11px);
  letter-spacing: .03em; line-height: 1.35;
  color: var(--muted-2);
  margin-top: .4vh;
}


/* --- right column: heading, metric list, footer --------------------------- */

.ach__h2 { margin-top: 3.2vh; }
.ach__intro {
  font-family: var(--body); font-weight: 400;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.6;
  color: var(--ink-body);
  margin: 1.8vh 0 0;
}

.metrics {
  margin-top: 3.2vh;
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--hair-2);
}
/* Mobile only — the metric list moves away from its heading below 768px and
   needs a label of its own there. See achievements.small.css. */
.metrics__label { display: none; }
.metric {
  display: grid;
  grid-template-columns: 3px 1fr auto;
  gap: clamp(14px, 1.4vw, 22px);
  align-items: center;
  padding: 2.6vh 0;
  border-top: 1px solid var(--hair-2);
}
.metric__tick {
  width: 3px;
  height: clamp(24px, 2.3vw, 36px);
  background: var(--red);
}
.metric__n {
  visibility: hidden;                 /* flight source */
  font-family: var(--display); font-weight: 500;
  font-size: clamp(34px, 3.9vw, 64px);
  line-height: .85;
  letter-spacing: -.03em;
  color: var(--ink-head);
}
.metric__cap {
  visibility: hidden;                 /* flight source */
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(10px, .7vw, 11px);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
  text-align: right;
}

.ach__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  padding-top: 1.8vh;
  border-top: 1px solid var(--hair-2);
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(10px, .72vw, 12px);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.ach__foot a { white-space: nowrap; }




/* =========================================================================
   Reduced motion — no curtain, no flight, no entrance. The numbers sit directly
   in their slots. Note the curtain has to be dismissed explicitly: left alone it
   would stay fully red and cover the entire section.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .flight { display: none; }
  .n16, .yearsblock__cap, .metric__n, .metric__cap { visibility: visible; }
  [data-enter] { opacity: 1 !important; transform: none !important; }
}