/* achievements.small.css — 08 / Achievements below 900px
 *
 * TWO BANDS: the designed mobile layout first, then the undesigned tablet
 * fallback at the end of the file. The tablet block is fenced with
 * `min-width: 768px`, so it cannot reach into the mobile block and the order
 * between them carries no meaning.
 *
 * From the Achievements Section Redesign mobile handoff. The handoff is explicit
 * that this is "a separate implementation, not a set of overrides", and the two
 * differ structurally rather than cosmetically:
 *
 *   · NOTHING PINS. Desktop runs a 380vh track — curtain, entrance hold, flight.
 *     Here the section is ordinary document flow at its natural height, and the
 *     flight runway is the last 1.15 viewports before About docks.
 *   · THE METRIC LIST MOVES TO THE END, because it is the flight's launch point
 *     and the figures have to leave from the bottom of the section.
 *   · The expertise grid is one column with all six visible.
 *
 * Reading order below 768px is: eyebrow row, 16+, heading block, expertise,
 * metric list, footer. The markup is in the desktop's three-column order, so the
 * two wrapper columns become `display: contents` and the pieces are re-ordered
 * as direct flex children of the panel.
 *
 * Type here is FIXED px, not the desktop clamp() — the handoff specifies mobile
 * sizes outright and a fluid scale off a 390px base has nothing to interpolate.
 */

@media (max-width: 767.98px) {

  .ach-track {
    height: auto;
    /* Nothing docks behind Clients here: the red curtain does not exist below
       768px, so the negative margin would only pull this panel over a section
       that is still on screen. */
    margin-top: 0;
  }

  .ach {
    position: relative;
    height: auto;
    padding: 0 0 6vh;
    display: flex;
    flex-direction: column;
  }

  /* Two guides at the gutter, not four at 11/40/60/80% of a three-column grid. */
  /* SCOPED TO .ach ON PURPOSE. .railcol, .sidecol and .guides are shared
     between 08 and 09 — the geometry is declared once in achievements.css — so
     an unscoped mobile rule here would also hit About, where about.small.css
     wants something different. Both mobile sheets scope every shared class. */
  .ach .guides i:nth-child(1) { left: 20px; }
  .ach .guides i:nth-child(2) { left: auto; right: 20px; }
  .ach .guides i:nth-child(3),
  .ach .guides i:nth-child(4) { display: none; }

  /* Bleeds off the section's bottom-left corner, behind everything. */
  .ghost {
    left: -.05em;
    bottom: -.16em;
    font-size: 150px;
    line-height: .78;
    z-index: 0;
  }

  /* --- reading order ------------------------------------------------------ */

  .ach__centre, .ach .sidecol { display: contents; }

  .ach .railcol { order: 1; }
  .n16         { order: 2; }
  .yearsblock  { order: 3; }
  .ach__h2     { order: 4; }
  .ach__intro  { order: 5; }
  .expertise   { order: 6; }
  .metrics     { order: 7; }
  .ach__foot   { order: 8; }

  /* The eyebrow row is the rail pair — `08 / Outcome scale` against
     `2010 → now`. The sidecol's own head row would repeat it. */
  .ach .sidecol__head { display: none; }

  .ach .railcol {
    position: static;
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    /* 34px, not the handoff's 22px: the floating MENU is fixed at 18px from the
       top over this panel and the handoff did not know it exists — the same
       reservation .sidecol__head makes on desktop. */
    padding: 34px 20px 0;
  }
  .ach .railcol__top {
    font-size: 10px;
    letter-spacing: .18em;
    line-height: 1.5;
  }
  /* "03 / Outcome scale" is one line here, not two. BOTH breaks in that row are
     <br class="wide-only"> now — the one after "03 /" in the markup and the
     label's own, emitted by netface_br_wide() — and each leaves a space behind,
     so nothing runs together. That is what the old single-line mob.achRail was
     working around. */
  /* Wide/narrow variants, the same pair Services uses. Repeated per section
     rather than shared because small-screen overrides belong in the section's
     own *.small.css — see CLAUDE.md. */
  .wide-only { display: none; }
  .ach .railcol__bottom {
    font-size: 10px;
    letter-spacing: .18em;
    white-space: nowrap;
    text-align: right;
  }


  /* --- the 16+ hero figure ------------------------------------------------
     Not a flight source below 768px: the 16+ does not fly, it fades into the
     About strip, so it is simply visible here. */

  .n16 {
    visibility: visible;
    position: relative;
    margin: 5vh 20px 0;
    font-size: 128px;
    line-height: .8;
    letter-spacing: -.045em;
  }

  .yearsblock {
    margin: 14px 20px 0;
    padding-top: 12px;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: nowrap;
  }
  .yearsblock__cap  { visibility: visible; font-size: 11px; letter-spacing: .16em; }
  .yearsblock__note { font-size: 10px; letter-spacing: .14em; }


  /* --- heading block ------------------------------------------------------ */

  .ach__h2 {
    margin: 6vh 20px 0;
    font-size: 31px;
    line-height: 1.02;
  }
  .ach__intro {
    margin: 14px 20px 0;
    font-size: 15px;
    line-height: 1.6;
  }


  /* --- expertise: one column, all six visible ----------------------------- */

  .expertise {
    width: auto;
    margin: 6vh 20px 0;
  }
  .expertise__label { font-size: 10px; }
  .expertise__grid {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
  }
  .xitem {
    grid-template-columns: 22px 1fr;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--hair-2);
  }
  /* One column, so only the actual last row closes on the grid's edge. */
  .xitem:nth-last-child(-n+2) { border-bottom: 1px solid var(--hair-2); }
  .xitem:last-child { border-bottom: 0; }
  .xitem__t { font-size: 16px; }
  .xitem__s { font-size: 10px; margin-top: 4px; }


  /* --- metric list — the flight's launch point ---------------------------- */

  .metrics {
    margin: 7vh 20px 0;
    border-bottom: 1px solid var(--hair-2);
  }
  /* Desktop has no label above this list; on mobile it needs one, because the
     list has been moved away from the heading it used to sit under. */
  .metrics__label {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--hud); font-weight: 400;
    font-size: 10px;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .metrics__label span { white-space: nowrap; }
  .metrics__label i { flex: 1; height: 1px; background: var(--hair-2); }

  .metric {
    gap: 16px;
    padding: 18px 0;
  }
  .metric__tick { height: 30px; }
  /* The four numbers ARE the flight sources here, and the handoff's rest state
     is the static page: they are visible in the markup and only hidden once the
     flight has actually launched (sequence.js writes visibility from p). */
  .metric__n { visibility: visible; font-size: 48px; }
  .metric__cap { visibility: visible; font-size: 10px; }

  .ach__foot {
    margin: 14px 20px 0;
    padding-top: 0;
    border-top: 0;
    align-items: baseline;
    font-size: 10px;
    line-height: 1.6;
  }
  /* ≥44px of hit area around a 10px link, per the handoff's a11y note. */
  .ach__foot a { padding: 12px 0; }
}


/* =========================================================================
   TABLET FALLBACK — 768 to 900px
   The desktop handoff is explicit that its prototype is desktop-only. Per its
   own recommendation: drop the pinning and the flight, stack the columns, keep
   a plain fade-up. Readable, not designed — below 768px the mobile handoff's
   own implementation takes over (achievements.small.css), so this band is
   fenced off from it.
   ========================================================================= */

@media (min-width: 768px) and (max-width: 900px) {
  .ach-track { height: auto; }
  .ach {
    position: relative;
    height: auto;
    padding: 64px 22px calc(48px + var(--banner-h));
  }
  .guides, .ghost, .flight { display: none; }
  .ach-track { margin-top: 0; }

  .railcol, .sidecol, .ach__centre {
    position: static;
    width: auto;
    padding: 0;
  }
  /* The floating MENU is at the screen edge here, not over this column. */
  .sidecol__head { padding-right: 0; }
  .railcol { flex-direction: row; justify-content: space-between; margin-bottom: 34px; }
  .ach__centre { display: block; margin-bottom: 40px; }

  /* Without the flight there is nothing to reveal these, so they show in place. */
  .n16, .yearsblock__cap, .metric__n, .metric__cap { visibility: visible; }
  .n16 { font-size: clamp(96px, 34vw, 190px); }

  .expertise__grid { grid-template-columns: 1fr; }
  .xitem:nth-last-child(-n+2) { border-bottom: 1px solid var(--hair-2); }
  .xitem:last-child { border-bottom: 0; }

  .ach__foot { flex-direction: column; align-items: flex-start; gap: 10px; }
}