/* ==========================================================================
   At a glance (#numbers)
   1. Heading on the canvas.
   2. Full-bleed cinematic band (21:9, capped at 66vh) with the three headline
      figures set in white along its bottom edge over a soft dark gradient.
   3. The remaining figures in a clean grid below: hairline numerals, tabular
      lining figures, solid graphite labels.
   Phones: band goes 16:9 with two overlaid figures; grid is two columns.
   No reveal or opacity states: every figure is fully legible at rest.
   ========================================================================== */
.nb { display: block; }

/* Heading */
.nb-head { padding-bottom: clamp(28px, 4.5vh, 52px); }
.nb-head h2 {
  margin: 0;
  font-size: clamp(32px, 3.8vw, 54px); font-weight: 300; letter-spacing: -0.025em; line-height: 1.06;
  color: var(--carbon);
}
.nb-head p { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: var(--pewter); max-width: 48ch; }

/* ---------- Band ---------- */
.nb-band {
  position: relative;
  margin-inline: calc(-1 * var(--gutter));
  aspect-ratio: 21 / 9;
  max-height: 66vh;
  min-height: 380px;
  overflow: hidden;
  background: var(--ash);
  color: #fff;
}
/* overflow clips the nb-settle scale(1.07) below. Without it the render is wider
   than the viewport mid-animation and the whole page scrolls sideways on a phone. */
.nb-media { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.nb-media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  transform-origin: 50% 55%;
}
/* Legibility: a long, soft fall-off from the bottom edge, plus a whisper at the top for the caption. */
.nb-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(10, 12, 13, .74) 0%, rgba(10, 12, 13, .5) 24%, rgba(10, 12, 13, .14) 52%, rgba(10, 12, 13, 0) 68%),
    linear-gradient(180deg, rgba(10, 12, 13, .28) 0%, rgba(10, 12, 13, 0) 18%);
}
.nb-media figcaption {
  position: absolute; left: var(--gutter); top: 16px; z-index: 1;
  font-size: 13px; font-weight: 600; letter-spacing: 0.005em; color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .3);
}

.nb-over {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(24px, 5vh, 52px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
/* .wrap sets max-width; padding above keeps text off the viewport edge when the wrap is full width. */
@media (min-width: 1480px) { .nb-over { padding-inline: 0; } }

/* ---------- Shared figure type ---------- */
.nb-item { display: flex; flex-direction: column; min-width: 0; }
.nb-fig {
  order: -1; margin: 0; display: block;
  font-weight: 200; line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
}
.nb-num { position: relative; display: inline-block; white-space: nowrap; }
.nb-anim { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; visibility: hidden; }
.nb-num.counting .nb-real { visibility: hidden; }
.nb-num.counting .nb-anim { visibility: visible; }
.nb-pre, .nb-suf { white-space: nowrap; }
.nb-pre { margin-right: .01em; }
.nb-suf { margin-left: .01em; }
/* Units sit smaller and lighter, on the baseline. */
.nb-unit { margin-left: .14em; font-size: .36em; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.nb-item[data-k="sold"] .nb-suf { font-size: .62em; font-weight: 300; letter-spacing: -0.01em; margin-left: .04em; }
/* Word figures ("Under construction") instead of a number. Numbers must never
   wrap, but a phrase has to, or it pushes the page sideways on a phone. */
.nb-text { font-size: .8em; letter-spacing: -0.035em; white-space: normal; text-wrap: balance; }
.nb-label { margin-top: 12px; font-size: 13px; font-weight: 600; line-height: 1.35; letter-spacing: 0.005em; }
.nb-sub { margin: 4px 0 0; max-width: 34ch; font-size: 13px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.nb-sub .link { font-size: inherit; margin-left: 2px; }

/* Band figures: white numerals, white labels, soft white sublabels. */
.nb-over .nb-fig { font-size: clamp(52px, 6.4vw, 104px); color: #fff; }
.nb-over .nb-unit { color: rgba(255, 255, 255, .78); }
.nb-over .nb-label { color: #fff; font-size: 14px; }
.nb-over .nb-sub { color: rgba(255, 255, 255, .8); }
.nb-over .nb-sub .link { color: #fff; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .5); }
.nb-over .nb-sub .link:hover { box-shadow: inset 0 -1px 0 #fff; }

/* ---------- Grid below the band ---------- */
.nb-grid {
  margin: 0 auto;
  padding-top: clamp(44px, 7vh, 80px);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 48px); row-gap: clamp(36px, 6vh, 56px);
}
.is-cell .nb-fig { font-size: clamp(44px, 4.8vw, 76px); color: var(--carbon); }
.is-cell .nb-unit { color: var(--pewter); }
.is-cell .nb-label { color: var(--graphite); }
.is-cell .nb-sub { color: var(--pewter); }
.is-cell .nb-sub .link { color: var(--carbon); box-shadow: inset 0 -1px 0 var(--ash-2); }
.is-cell .nb-sub .link:hover { box-shadow: inset 0 -1px 0 currentColor; }
.is-cell.is-narrow { display: none; }

.nb-cta { padding-top: clamp(36px, 6vh, 64px); }

/* Slow settle on the render as the band scrolls through (compositor only, no JS). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .nb-band { view-timeline: --nb block; }
    .nb-media img { animation: nb-settle linear both; animation-timeline: --nb; animation-range: entry 0% exit 100%; }
    @keyframes nb-settle { from { transform: scale(1.07); } to { transform: scale(1); } }
  }
}

/* Tablet: grid in three columns. */
@media (max-width: 1100px) {
  .nb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .is-cell .nb-fig { font-size: clamp(44px, 6.4vw, 68px); }
  .nb-over .nb-sub { display: none; }
}

/* Phones: 16:9 band, two overlaid figures, area joins the grid, two columns. */
@media (max-width: 700px) {
  .nb-band { aspect-ratio: 16 / 9; min-height: 0; max-height: none; }
  .nb-media img { object-position: 52% 55%; }
  .nb-media::after {
    background:
      linear-gradient(0deg, rgba(10, 12, 13, .78) 0%, rgba(10, 12, 13, .44) 36%, rgba(10, 12, 13, 0) 72%),
      linear-gradient(180deg, rgba(10, 12, 13, .26) 0%, rgba(10, 12, 13, 0) 22%);
  }
  .nb-media figcaption { top: 12px; font-size: 12px; }
  .nb-over { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; padding-bottom: 16px; }
  .nb-over .is-wide { display: none; }
  .nb-over .nb-fig { font-size: clamp(38px, 11vw, 56px); }
  .nb-over .nb-label { margin-top: 6px; font-size: 13px; }
  .is-cell.is-narrow { display: flex; }
  .nb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 36px; padding-top: 36px; }
  .is-cell .nb-fig { font-size: clamp(40px, 12vw, 56px); }
  .nb-cta .btn { width: 100%; justify-content: center; }
}
@media (max-width: 360px) {
  .nb-over .nb-fig, .is-cell .nb-fig { font-size: 36px; }
}

/* Full-bleed band: the section drops its side padding and the text rows carry the gutter instead. */
#numbers.section { padding-inline: 0; }
#numbers .wrap { padding-inline: var(--gutter); box-sizing: border-box; }
#numbers .nb-band { margin-inline: 0; width: 100%; }
#numbers .nb-over { max-width: calc(var(--max) + 2 * var(--gutter)); }
@media (min-width: 1480px) { #numbers .nb-over { padding-inline: var(--gutter); } }