/* Results (#results). Prefix: hr-
   "Does it work?" Three figures on the navy band, with nothing competing with them.
   Heading on the start side, lead on the end side; then three huge Norsal figures separated by thin rules,
   each with a label and a quiet note. A faint growth line that only climbs is drawn once behind them.
   +27% and 2,000+ count up once; 4.8 is revealed, never counted (a rating is not a tally).
   Wide and tablet: three columns with vertical rules. Phones: stacked, with horizontal hairlines.
   Reduced motion and no JS: every figure final, the line drawn, nothing moves. */

.hr {
  --hr-rule: rgba(255, 255, 255, .16);
  /* The line and its end point use the navy accent, kept faint so the figures stay the focal point. */
  --hr-line: color-mix(in srgb, var(--accent) 46%, transparent);
  /* Peaks at 1440, where the container stops growing, so the widest figure always clears its rule. */
  --hr-fs: clamp(3.5rem, -.45rem + 7.93vw, 6.75rem);
}

/* ---------- The planet ----------
   Far behind everything: a dotted sphere whose surface drifts sideways (the dot tile scrolls one full period,
   so the loop is seamless) and a tilted dotted ring turning slowly. A radial mask darkens the far limb so the
   flat dots read as a sphere. Low opacity, so the figures stay the focal point. */
.hr { position: relative; overflow: clip; --hr-planet: clamp(340px, 46vw, 720px); }
.hr > .container { position: relative; z-index: 1; }
.hr-planet {
  position: absolute;
  z-index: 0;
  inset-inline-end: calc(var(--hr-planet) * -.28);
  top: 50%;
  width: var(--hr-planet);
  aspect-ratio: 1;
  translate: 0 -46%;
  opacity: .8;
  pointer-events: none;
}
.hr-planet__globe {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 80%, white) 1.4px, transparent 1.9px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(circle at 34% 36%, #000 20%, rgba(0, 0, 0, .7) 55%, transparent 74%);
          mask-image: radial-gradient(circle at 34% 36%, #000 20%, rgba(0, 0, 0, .7) 55%, transparent 74%);
  animation: hr-planet-drift 60s linear infinite;
}
.hr-planet__ring {
  position: absolute;
  inset: -14% -26%;
  transform: rotate(-18deg) scaleY(.26);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
/* The tilt is static; the dotted circle inside turns, so the dots travel along the orbit. */
.hr-planet__ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px dotted color-mix(in srgb, var(--accent) 85%, transparent);
  animation: hr-planet-orbit 90s linear infinite;
}
@keyframes hr-planet-drift { to { background-position: 18px 0; } }
@keyframes hr-planet-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hr-planet__globe, .hr-planet__ring::before { animation: none; } }
@media (max-width: 767px) { .hr-planet { opacity: .35; top: 36%; } }

/* ---------- Head: heading and lead side by side ---------- */
.hr-head { max-width: none; gap: var(--s-5); margin-block-end: 0; }
/* Stretch, so the heading breaks its lines across the whole column (SplitText keeps the first breaks). */
.hr-head__main { display: grid; justify-items: start; justify-self: stretch; gap: var(--s-4); }
.hr-title { max-width: 15em; }
.hr-lead { max-width: 30rem; }
@media (min-width: 900px) {
  .hr-head {
    grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);
    column-gap: clamp(40px, 5vw, 96px);
    align-items: end;
  }
  .hr-lead { justify-self: end; padding-block-end: .35em; }
}

/* ---------- The band ---------- */
/* The space above the figures holds the growth line, so it never crosses a word. */
.hr-body { --hr-air: clamp(76px, 8.4vw, 136px); position: relative; padding-block-start: var(--hr-air); }

.hr-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hr-stat {
  --hr-k: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-inline: clamp(20px, 3.4vw, 48px);
  padding-block: 6px 4px;
}
.hr-stat:first-child { padding-inline-start: 0; }
.hr-stat:last-child { padding-inline-end: 0; }
/* The rules between figures draw from the top (js scales --hr-k from 0 to 1). */
.hr-stat + .hr-stat::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 1px;
  background: var(--hr-rule);
  transform: scaleY(var(--hr-k));
  transform-origin: 50% 0;
}

/* The figure comes first on screen; the label stays first for screen readers. */
.hr-stat__fig { order: -1; }
.hr-num {
  display: inline-flex;
  align-items: baseline;
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--hr-fs);
  line-height: .9;
  letter-spacing: -.035em;
  white-space: nowrap;
  color: var(--page-ink);
}
.hr-num__u { color: var(--accent); }
.hr-num__u--pct { margin-inline-start: .03em; }
/* Counting cells: each keeps the width of its final glyph (Norsal has no tabular figures), so nothing shifts. */
.hr-num__c { display: inline-block; text-align: center; }
.hr-num__mask {
  display: inline-block;
  overflow: clip;
  overflow-clip-margin: .08em;
  padding-block: .08em;
  margin-block: -.08em;
}
.hr-num__mask > .hr-num__n { display: inline-block; }
.hr-num__star { display: inline-grid; align-self: flex-start; margin-inline-start: .06em; margin-block-start: .08em; color: var(--accent); }
.hr-num__star .ico { width: .5em; height: .5em; }

.hr-stat__label {
  margin-block-start: clamp(16px, 1.8vw, 24px);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--page-ink);
  text-wrap: balance;
}
.hr-stat__note {
  margin-block-start: 6px;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--page-ink-3);
  text-wrap: pretty;
}
:lang(ar) .hr-stat__label { letter-spacing: 0; line-height: 1.6; }
:lang(ar) .hr-stat__note { line-height: 1.75; }

/* ---------- The growth line ----------
   It rises across the space between the heading and the figures: from just above the first figure to just
   under the lead, and its end point lands last. */
.hr-growth {
  position: absolute;
  inset-inline: 0;
  top: 0;
  width: 100%;
  height: calc(var(--hr-air) - 2px);
  overflow: visible;
  pointer-events: none;
}
[dir="rtl"] .hr-growth { transform: scaleX(-1); }   /* time runs with the reading direction */
.hr-growth__line { fill: none; stroke: var(--hr-line); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* The end point: the path ends at (1000, 64) of a 1000 x 400 viewBox. */
.hr-growth__dot {
  position: absolute;
  inset-inline-start: 100%;
  top: calc((var(--hr-air) - 2px) * .16);
  width: 11px;
  height: 11px;
  margin-block-start: -5.5px;
  margin-inline-start: -5.5px;
  border-radius: 50%;
  background: var(--page-bg);
  box-shadow: inset 0 0 0 2px var(--hr-line);
}

/* ---------- Tablet: three narrower columns ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .hr { --hr-fs: clamp(3.25rem, .6rem + 6.4vw, 4.75rem); }
  .hr-stat { padding-inline: clamp(16px, 2.6vw, 28px); }
  .hr-stat__note { font-size: .875rem; }
}

/* ---------- Phones: stacked, horizontal hairlines ---------- */
@media (max-width: 767px) {
  .hr { --hr-fs: clamp(4rem, 2.2rem + 9vw, 5.5rem); }
  .hr-stats { grid-template-columns: minmax(0, 1fr); }
  .hr-stat,
  .hr-stat:first-child,
  .hr-stat:last-child { padding: 28px 0; }
  .hr-stat:first-child { padding-block-start: 4px; }
  .hr-stat:last-child { padding-block-end: 0; }
  .hr-stat + .hr-stat::before {
    inset-block: 0 auto;
    inset-inline: 0;
    width: auto;
    height: 1px;
    transform: scaleX(var(--hr-k));
    transform-origin: left center;
  }
  [dir="rtl"] .hr-stat + .hr-stat::before { transform-origin: right center; }
  .hr-stat__label { margin-block-start: 14px; }
  .hr-body { --hr-air: 72px; }
}