/* =========================================================
   PRAVA — company / research page
   Layered on top of styles.css; inherits every token from it.
   Adds one accent (a restrained instrument blue) used only for
   research signal: live nodes, model points, confidence.
   ========================================================= */

:root {
  --rl-accent: #6ea8ff;
  --rl-accent-soft: rgba(110, 168, 255, .16);
  --rl-accent-line: rgba(110, 168, 255, .42);
  --rl-grid: rgba(255, 255, 255, .045);

  /* Hero, dark: the photograph is already lit for this ground, so it plays
     nearly straight and the scrim is the page colour. */
  --hero-bg: var(--bg);
  --hero-text: var(--text);
  --hero-text-muted: var(--text-dim);
  --hero-border: var(--line);
  --hero-scrim: 6, 6, 7;
  /* rgb triplet the overlay is built from */
  --hero-image: url("images/hero-bg.png");
  --hero-image-opacity: .85;
  --hero-image-filter: none;
  /* Dark: the scrim is the page colour, so a soft wash both sides is fine. */
  --hero-overlay:
    linear-gradient(100deg,
      rgb(var(--hero-scrim)) 14%,
      rgba(var(--hero-scrim), .86) 40%,
      rgba(var(--hero-scrim), .34) 72%,
      rgba(var(--hero-scrim), .62) 100%),
    linear-gradient(to bottom,
      rgba(var(--hero-scrim), .55) 0%,
      rgba(var(--hero-scrim), 0) 26%,
      rgba(var(--hero-scrim), 0) 62%,
      rgb(var(--hero-scrim)) 100%);
}

:root[data-theme="light"] {
  --rl-accent: #1c5fd0;
  --rl-accent-soft: rgba(28, 95, 208, .11);
  --rl-accent-line: rgba(28, 95, 208, .34);
  --rl-grid: rgba(12, 12, 16, .05);

  /* Hero, light: the same photograph, lifted rather than inverted. Raising
     brightness while dropping contrast and saturation turns the near-black
     room into a pale grey one, and the scrim becomes the warm white page
     colour so the image sits under the copy instead of behind a black wash.
     Opacity is lower because a light image on a light ground needs less
     covering to stay behind the text. */
  --hero-bg: var(--bg);
  --hero-text: var(--text);
  --hero-text-muted: var(--text-mid);
  --hero-border: var(--line);
  --hero-scrim: 242, 242, 240;
  /* A light-theme render of the same room, so nothing has to be recovered by
     filter any more. Opacity is full and the filter is off — both existed only
     to drag the dark original toward white. */
  --hero-image: url("images/hero-bg-light.png");
  --hero-image-opacity: 1;
  --hero-image-filter: none;
  /* Gentler than the dark treatment needed: the left of this frame is already
     a white wall, so the scrim only has to settle it into the page colour
     rather than cover a dark room. */
  --hero-overlay:
    linear-gradient(90deg,
      rgb(var(--hero-scrim)) 0%,
      rgba(var(--hero-scrim), .90) 28%,
      rgba(var(--hero-scrim), .46) 52%,
      rgba(var(--hero-scrim), .10) 74%,
      rgba(var(--hero-scrim), 0) 100%),
    linear-gradient(to bottom,
      rgba(var(--hero-scrim), .35) 0%,
      rgba(var(--hero-scrim), 0) 9%,
      rgba(var(--hero-scrim), 0) 70%,
      rgba(var(--hero-scrim), .88) 100%);
}

/* shared section rhythm */
.rlab-hero,
.rlab-def,
.rlab-loop,
.rlab-track,
.rlab-models,
.rlab-signal,
.rlab-team,
.rlab-close {
  position: relative;
  padding: var(--sect-y) var(--pad);
  border-top: 1px solid var(--line-soft);
}

.rlab-hero {
  border-top: 0;
}

.rlab-def,
.rlab-models {
  background: var(--bg-elev);
}

.rlab-hero__inner>*,
.rlab-def__grid,
.rlab-loop__head,
.rlab-track__head,
.rlab-models__head,
.rlab-signal__head,
.rlab-loop__grid,
.rlab-team__head,
.rlab-close__inner,
.rlab-cycle,
.rlab-zig,
.rlab-plot,
.rlab-funnel,
.spot,
.rlab-signal__foot {
  position: relative;
  z-index: 1;
}

/* ---------- hero ---------- */
.rlab-hero {
  padding-top: calc(var(--nav-h) + clamp(64px, 12vh, 150px));
  overflow: hidden;
}

/**
 * The research room behind the opening statement.
 *
 * The photograph is composed with its subject on the right and empty wall on
 * the left, which is exactly where the copy sits — so it is anchored right and
 * a scrim is laid over it, opaque under the text and clearing toward the
 * imagery. Without the scrim the lede loses contrast against the monitors.
 */
.rlab-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: 78% center;
  background-repeat: no-repeat;
  opacity: var(--hero-image-opacity);
  filter: var(--hero-image-filter);
  /* so switching theme eases rather than jumps */
  transition: opacity .55s var(--ease), filter .55s var(--ease);
}

.rlab-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
}

@media (max-width: 860px) {

  /* cover-cropping a wide frame into a tall one loses the composition, so it
     recedes to a texture rather than a scene */
  .rlab-hero__bg {
    opacity: .5;
    background-position: 68% center;
  }
}

.rlab-hero__inner {
  max-width: 74ch;
}

.rlab-hero__title {
  margin: 20px 0 clamp(24px, 3vh, 38px);
  font-size: clamp(1.95rem, 4.8vw, 3.8rem);
  letter-spacing: -.042em;
  line-height: 1.05;
}

.rlab-hero__title {
  color: var(--hero-text);
}

.rlab-hero__title em {
  font-style: normal;
  color: var(--hero-text-muted);
}

.rlab-hero__lede {
  max-width: 58ch;
  color: var(--text-mid);
  position: relative;
  font-size: clamp(1rem, .5vw + .9rem, 1.16rem);
}

.rlab-hero__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
  margin: clamp(38px, 5vh, 64px) 0 0;
  max-width: 62ch;
}

/* Each term sits under its own rule so the three read as a set of labelled
   facts. The label was previously --text-faint at 9.6px, which on this ground
   was effectively invisible; it is now mid-tone and a step larger. */
.rlab-hero__meta>div {
  padding-top: 14px;
  border-top: 1px solid var(--hero-border);
}

.rlab-hero__meta dt {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mid);
}

.rlab-hero__meta dd {
  margin: 10px 0 0;
  font-size: 1rem;
  letter-spacing: -.02em;
  color: var(--hero-text);
}

/* the page-long spine */
.rlab-hero__spine {
  position: absolute;
  left: calc(var(--pad) * .42);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-soft);
}

.rlab-hero__spine span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--rl-accent), transparent);
  transform-origin: top;
  transform: scaleY(0);
}

@media (max-width: 900px) {
  .rlab-hero__spine {
    display: none;
  }
}

/* ---------- definition ---------- */
.rlab-def__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}

.rlab-def__title {
  margin-top: 18px;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  letter-spacing: -.035em;
}

.rlab-def__title em {
  font-style: normal;
  color: var(--text-dim);
}

.rlab-def__body p {
  color: var(--text-mid);
  margin: 0 0 18px;
  max-width: 56ch;
}

.rlab-def__claim {
  margin-top: 26px !important;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  color: var(--text) !important;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  letter-spacing: -.025em;
}

/* ---------- research loop: copy left, ring right ---------- */
.rlab-loop__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}

.rlab-loop__head {
  max-width: 46ch;
}

.rlab-loop__title {
  margin: 18px 0 22px;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  letter-spacing: -.035em;
}

.rlab-loop__title em {
  font-style: normal;
  color: var(--text-dim);
}

.rlab-loop__lede {
  color: var(--text-mid);
}

.rlab-loop__ring {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rlab-cycle {
  position: relative;
  width: min(440px, 100%);
  aspect-ratio: 1;
}

.rlab-cycle__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rlab-cycle__ring {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 2 8;
}

/* the pulse that travels the loop — the only thing that says "this repeats" */
.rlab-cycle__flow {
  fill: none;
  stroke: var(--rl-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 46 683;
  /* one short arc on a 729px circumference */
  stroke-dashoffset: 0;
  opacity: 0;
}

.rlab-cycle.is-in .rlab-cycle__flow {
  opacity: .85;
  animation: rlFlow 7s linear infinite;
}

@keyframes rlFlow {
  to {
    stroke-dashoffset: -729;
  }
}

.rlab-cycle__node {
  position: absolute;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: inherit;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0;
  transform: scale(.88);
  transition: border-color .35s var(--ease), color .35s var(--ease),
    background .35s var(--ease), box-shadow .35s var(--ease);
}

.rlab-cycle.is-in .rlab-cycle__node {
  animation: rlNodeIn .65s var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes rlNodeIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.rlab-cycle__node i {
  font-family: var(--mono);
  font-style: normal;
  font-size: .54rem;
  letter-spacing: .16em;
  color: var(--text-faint);
}

.rlab-cycle__node span {
  font-size: .82rem;
  letter-spacing: -.015em;
}

.rlab-cycle__node:hover,
.rlab-cycle__node:focus-visible,
.rlab-cycle__node.is-lit {
  border-color: var(--rl-accent-line);
  color: var(--rl-accent);
  background: var(--bg-elev);
  box-shadow: 0 0 0 5px var(--rl-accent-soft);
  outline: none;
}

/* the others recede while one is held */
.rlab-cycle.is-open .rlab-cycle__node:not(.is-lit) {
  opacity: .4;
}

/* At rest the caption carries the statement the whole loop is about; holding a
   phase swaps it for that phase's own description. A floor on the height stops
   the section shifting as the text changes length. */
.rlab-cycle__caption {
  width: min(46ch, 100%);
  margin-top: clamp(6px, 1.6vh, 20px);
  text-align: center;
  pointer-events: none;
  min-height: 5.2em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.rlab-cycle__core-idle {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  letter-spacing: -.014em;
  color: var(--text-mid);
}

.rlab-cycle__core-label {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rl-accent);
}

.rlab-cycle__core-detail {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--text-mid);
}

.rlab-cycle__caption>* {
  animation: rlFadeIn .35s var(--ease-out) both;
}

@keyframes rlFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- the zig-zag evolution rail ---------- */
.rlab-track__head {
  max-width: 64ch;
}

.rlab-track__title {
  margin: 18px 0 20px;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  letter-spacing: -.04em;
}

.rlab-track__lede {
  color: var(--text-mid);
  max-width: 56ch;
}

.rlab-zig {
  position: relative;
  margin: clamp(48px, 7vh, 88px) auto 0;
  max-width: 1080px;
}

.rlab-zig__path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.rlab-zig__line {
  stroke: var(--line);
  stroke-width: 1;
}

.rlab-zig__lit {
  stroke: var(--rl-accent);
  stroke-width: 1.4;
}

.rlab-zig__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rlab-step {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 132px;
  outline: none;
  opacity: 0;
  transition: opacity .7s var(--ease-out), transform .85s var(--ease-out);
}

/* Each phase enters from the side it lives on, so the rail assembles outward
   from its own line rather than everything rising uniformly. */
.rlab-step--left {
  transform: translateX(-58px);
}

.rlab-step--right {
  transform: translateX(58px);
}

.rlab-step.is-in {
  opacity: 1;
  transform: none;
}

/* Cards hug the rail rather than the page edge, and the rail swings wider,
   so the fold is legible as a zig-zag instead of a nearly straight line. */
/* Cards clear the rail by a wide margin. The line swings between 41% and 59%,
   so stopping the cards at 34%/66% keeps roughly 70px of air between the card
   edge and the curve even when a card is expanded. */
.rlab-step--left {
  justify-content: flex-end;
  padding-right: 66%;
}

.rlab-step--right {
  justify-content: flex-start;
  padding-left: 66%;
}

/* the dot sits on the rail, at the inner edge of each card */
.rlab-step__dot {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  transition: background .35s var(--ease), border-color .35s var(--ease),
    box-shadow .35s var(--ease), scale .35s var(--ease);
  z-index: 1;
}

.rlab-step--left .rlab-step__dot {
  left: 41%;
  translate: -50% -50%;
}

.rlab-step--right .rlab-step__dot {
  left: 59%;
  translate: -50% -50%;
}

.rlab-step--research .rlab-step__dot {
  border-color: var(--rl-accent-line);
}

.rlab-step--model .rlab-step__dot {
  background: var(--rl-accent);
  border-color: var(--rl-accent);
}

.rlab-step--rebuild .rlab-step__dot {
  border-radius: 2px;
  rotate: 45deg;
  border-color: var(--text);
}

.rlab-step:hover .rlab-step__dot,
.rlab-step:focus-visible .rlab-step__dot {
  box-shadow: 0 0 0 6px var(--rl-accent-soft);
  scale: 1.15;
}

.rlab-step__card {
  position: relative;
  max-width: 360px;
  padding: 16px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}

.rlab-step--left .rlab-step__card {
  text-align: right;
}

.rlab-step--right .rlab-step__card {
  text-align: left;
}

.rlab-step:hover .rlab-step__card,
.rlab-step:focus-visible .rlab-step__card {
  border-color: var(--line-soft);
  background: var(--bg-elev);
}

.rlab-step__id {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.rlab-step__title {
  margin: 0;
  font-size: clamp(1.02rem, 1.5vw, 1.28rem);
  letter-spacing: -.028em;
}

/* body is the reward for hovering — collapsed, not merely faded, so the rail
   stays compact at rest and the reveal has somewhere to go */
.rlab-step__body {
  margin: 0;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-mid);
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .45s var(--ease-out), opacity .35s var(--ease),
    margin .45s var(--ease-out);
}

.rlab-step__body>span {
  overflow: hidden;
}

.rlab-step:hover .rlab-step__body,
.rlab-step:focus-visible .rlab-step__body {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 10px;
}

/* ---------- model plot ---------- */
.rlab-models__head {
  max-width: 66ch;
}

.rlab-models__title {
  margin: 18px 0 20px;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  letter-spacing: -.04em;
}

.rlab-models__title em {
  font-style: normal;
  color: var(--text-dim);
}

.rlab-models__lede {
  color: var(--text-mid);
  max-width: 58ch;
}

.rlab-plot {
  margin: clamp(40px, 6vh, 72px) 0 0;
}

.rlab-plot__frame {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--bg);
  padding: 10px;
  background-image: linear-gradient(var(--rl-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--rl-grid) 1px, transparent 1px);
  background-size: 46px 46px;
}

.rlab-plot__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.rlab-plot__grid {
  stroke: var(--line-soft);
  stroke-width: 1;
}

.rlab-plot__curve {
  stroke: var(--rl-accent-line);
  stroke-width: 1.4;
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
}

.is-in .rlab-plot__curve {
  transition: stroke-dashoffset 2.2s var(--ease-out) .1s;
  stroke-dashoffset: 0;
}

.rlab-plot__halo {
  fill: var(--rl-accent-soft);
  opacity: 0;
  transform-origin: center;
}

.rlab-plot__dot {
  fill: var(--rl-accent);
  opacity: 0;
}

.is-in .rlab-plot__halo,
.is-in .rlab-plot__dot {
  animation: rlPop .7s var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes rlPop {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.rlab-plot__cards {
  position: absolute;
  inset: 10px;
  pointer-events: none;
}

.rlab-plot__card {
  --gap: 22px;
  /* clearance between card and its dot */
  position: absolute;
  margin: 0;
  translate: -50% calc(-100% - var(--gap));
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 122px;
  max-width: 190px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--glass);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  opacity: 0;
  transform: translateY(6px);
}

/* edge anchoring, so no card leaves the plot */
.rlab-plot__card.is-left {
  translate: 0 calc(-100% - var(--gap));
}

.rlab-plot__card.is-right {
  translate: -100% calc(-100% - var(--gap));
}

.rlab-plot__card.is-below {
  translate: -50% var(--gap);
}

.rlab-plot__card.is-below.is-left {
  translate: 0 var(--gap);
}

.rlab-plot__card.is-below.is-right {
  translate: -100% var(--gap);
}

/* the two flagship models carry the largest halos, so their cards stand off
   further than the rest to keep the point readable underneath */
.rlab-plot__card.is-far {
  --gap: 54px;
}

/* pinned to the ends of the plot rather than to their own point */
.rlab-plot__card.is-start {
  left: 0 !important;
}

.rlab-plot__card.is-end {
  left: 100% !important;
}

.is-in .rlab-plot__card {
  animation: rlCard .7s var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes rlCard {
  to {
    opacity: 1;
    transform: none;
  }
}

.rlab-plot__scale {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: -.02em;
  color: var(--rl-accent);
}

.rlab-plot__label {
  font-size: .78rem;
  letter-spacing: -.015em;
}

.rlab-plot__note {
  font-size: .68rem;
  line-height: 1.45;
  color: var(--text-dim);
}

.rlab-plot__metric {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--text);
}

/* one line, never wrapping: it is an axis note, not a paragraph */
.rlab-plot__cap {
  margin: 18px 0 0;
  font-size: .78rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- accuracy funnel ---------- */
.rlab-signal__head {
  max-width: 66ch;
}

.rlab-signal__title {
  margin: 18px 0 20px;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  letter-spacing: -.04em;
}

.rlab-signal__title em {
  font-style: normal;
  color: var(--text-dim);
}

.rlab-signal__lede {
  color: var(--text-mid);
  max-width: 58ch;
}

/* the channel on the left, the gates it passes through on the right */
.rlab-funnel {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 46px);
  margin: clamp(44px, 6vh, 76px) 0 0;
  align-items: stretch;
}

.rlab-funnel__viz {
  position: relative;
}

.rlab-funnel__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rlab-funnel__body {
  fill: var(--rl-accent-soft);
  opacity: 0;
  transition: opacity 1s var(--ease-out) .1s;
}

.rlab-funnel__edge {
  stroke: var(--rl-accent-line);
  stroke-width: 1.2;
  stroke-dasharray: 2200;
  stroke-dashoffset: 2200;
  transition: stroke-dashoffset 1.6s var(--ease-out);
}

.rlab-funnel__ticks line {
  stroke: var(--line-soft);
  stroke-width: 1;
  opacity: 0;
  transition: opacity .7s var(--ease) .5s;
}

.rlab-funnel__viz.is-in .rlab-funnel__body {
  opacity: 1;
}

.rlab-funnel__viz.is-in .rlab-funnel__edge {
  stroke-dashoffset: 0;
}

.rlab-funnel__viz.is-in .rlab-funnel__ticks line {
  opacity: 1;
}

/* what goes in at the top, what comes out at the bottom */
.rlab-funnel__cap {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.rlab-funnel__cap--in {
  top: -22px;
}

.rlab-funnel__cap--out {
  bottom: -22px;
}

.rlab-funnel__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rlab-gate {
  padding: clamp(14px, 1.6vh, 22px) 0;
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateX(18px);
  transition: opacity .6s var(--ease-out), transform .7s var(--ease-out);
}

.rlab-gate:first-child {
  border-top: 1px solid var(--line-soft);
}

.rlab-gate.is-in {
  opacity: 1;
  transform: none;
}

.rlab-gate__name {
  margin: 0 0 5px;
  font-size: .96rem;
  letter-spacing: -.022em;
  display: flex;
  gap: 11px;
  align-items: baseline;
}

.rlab-gate__name i {
  font-family: var(--mono);
  font-style: normal;
  font-size: .58rem;
  letter-spacing: .16em;
  color: var(--rl-accent);
}

.rlab-gate__body {
  margin: 0;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--text-mid);
}

.rlab-signal__foot {
  margin: clamp(30px, 4vh, 50px) 0 0;
  font-size: .84rem;
  color: var(--text-dim);
  max-width: 62ch;
}

/* ---------- team spotlight ---------- */
.rlab-team {
  padding-top: clamp(48px, 6vh, 88px);
  padding-bottom: clamp(48px, 6vh, 88px);
}

.rlab-team__head {
  max-width: 58ch;
  margin-bottom: clamp(28px, 4vh, 56px);
}

.rlab-team__title {
  margin: 14px 0 16px;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  letter-spacing: -.04em;
}

.rlab-team__lede {
  color: var(--text-mid);
  max-width: 52ch;
}

.spot {
  position: relative;
}

.spot__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 86px);
  align-items: center;
}

/* ---- the portrait ---- */
.spot__stage {
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  /* Sized from viewport HEIGHT so the whole section clears the fold: the frame
     is 4:5, so its width is 0.8 of the height left over.
     The overhead is partly proportional — the section padding is 6vh a side —
     so subtracting a flat pixel figure fitted small screens and overflowed
     large ones. 88vh takes out the padding, the 300px covers the heading and
     the hint line. Width still wins on narrow screens via max-width. */
  width: min(100%, calc((88vh - 300px) * 0.8));
  max-width: 100%;
}

.spot__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  background: linear-gradient(168deg, var(--surface), var(--bg) 88%);
  transition: border-color .6s var(--ease), transform .8s var(--ease-out);
}

.spot__stage:hover .spot__frame,
.spot__stage:focus-visible .spot__frame {
  border-color: var(--line);
}

.spot.is-revealed .spot__frame {
  transform: scale(1.018);
}

/* a fixed scanline texture over everything: the technical register */
.spot__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, .030) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
  opacity: .8;
}

:root[data-theme="light"] .spot__frame::after {
  background: repeating-linear-gradient(to bottom,
      rgba(12, 12, 16, .045) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
}

/* the abstraction, on top at rest */
.spot__art {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 7% 12% 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transition: opacity .55s var(--ease), filter .7s var(--ease), transform .9s var(--ease-out);
}

.spot__art.is-image {
  padding: 0;
}

.spot__face {
  width: 100%;
  height: 100%;
}

.spot__face-lines path {
  fill: none;
  stroke: var(--text);
  stroke-width: .45;
  stroke-linecap: round;
  opacity: .46;
}

:root[data-theme="light"] .spot__face-lines path {
  opacity: .6;
}

.spot.is-revealed .spot__art {
  opacity: 0;
  filter: blur(6px);
  transform: scale(1.03);
}

/* the person, wiped in from the top beneath it */
.spot__real {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition: clip-path .78s var(--ease-out), opacity .4s var(--ease), transform .9s var(--ease-out);
  transform: scale(1.04);
}

.spot.is-revealed .spot__real {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: scale(1);
}

/* nobody's photograph on file: keep the abstraction up */
.spot__stage.is-artonly~* .spot__real,
.spot.is-revealed .spot__stage.is-artonly .spot__art {
  opacity: 1;
  filter: none;
  transform: none;
}

/* the line that rides the edge of the wipe */
.spot__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--rl-accent) 18%, #fff 50%, var(--rl-accent) 82%, transparent);
  box-shadow: 0 0 14px 1px var(--rl-accent-soft);
}

.spot.is-revealed .spot__scan {
  animation: spotScan .78s var(--ease-out);
}

@keyframes spotScan {
  0% {
    top: 0;
    opacity: 0;
  }

  14% {
    opacity: .85;
  }

  86% {
    opacity: .85;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

/* instrument corners, so the frame reads as a viewport rather than a card */
.spot__corner {
  position: absolute;
  width: 13px;
  height: 13px;
  z-index: 4;
  pointer-events: none;
  border: 1px solid var(--line-strong);
  opacity: .5;
}

.spot__corner--tl {
  top: 8px;
  left: 8px;
  border-right: 0;
  border-bottom: 0;
}

.spot__corner--br {
  bottom: 8px;
  right: 8px;
  border-left: 0;
  border-top: 0;
}

.spot__hint {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color .4s var(--ease), opacity .4s var(--ease);
}

.spot.is-revealed .spot__hint {
  opacity: 0;
}

/* ---- the details ---- */
.spot__info {
  min-width: 0;
}

.spot__count {
  margin: 0 0 clamp(16px, 2.4vh, 26px);
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
}

.spot__count b {
  font-weight: 400;
  color: var(--text);
  font-size: .92rem;
}

.spot__count span,
.spot__count i {
  font-style: normal;
  color: var(--text-faint);
}

.spot__name {
  margin: 0;
  font-size: clamp(1.7rem, 3.4vw, 2.8rem);
  letter-spacing: -.042em;
  line-height: 1.04;
}

.spot__role {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rl-accent);
}

.spot__desc {
  margin: clamp(18px, 2.4vh, 28px) 0 0;
  max-width: 42ch;
  font-size: clamp(.95rem, .5vw + .84rem, 1.1rem);
  line-height: 1.62;
  color: var(--text-mid);
}

/* the outgoing profile, and the stagger on the way back in */
.spot__live>*,
.spot__count b,
.spot__art,
.spot__real {
  transition-property: opacity, transform, filter, clip-path;
}

.spot.is-out .spot__name,
.spot.is-out .spot__role,
.spot.is-out .spot__desc,
.spot.is-out .spot__count b {
  opacity: 0;
  transform: translateY(9px);
}

.spot.is-out .spot__frame {
  opacity: 0;
  transform: scale(.985);
}

.spot__name,
.spot__role,
.spot__desc,
.spot__count b {
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
}

.spot__frame {
  opacity: 1;
}

/* staggered arrival: number, name, role, then the sentence */
.spot__count b {
  transition-delay: 40ms;
}

.spot__name {
  transition-delay: 90ms;
}

.spot__role {
  transition-delay: 150ms;
}

.spot__desc {
  transition-delay: 215ms;
}

.spot.is-out .spot__count b,
.spot.is-out .spot__name,
.spot.is-out .spot__role,
.spot.is-out .spot__desc {
  transition-delay: 0ms;
}

/* ---- navigation ---- */
.spot__nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(26px, 3.6vh, 44px);
}

.spot__dot {
  --w: 26px;
  width: var(--w);
  height: 22px;
  padding: 0;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  outline: none;
}

.spot__dot span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--line-strong);
  transition: background .4s var(--ease), height .4s var(--ease), opacity .4s var(--ease);
  opacity: .55;
}

.spot__dot:hover span,
.spot__dot:focus-visible span {
  opacity: 1;
}

.spot__dot.is-on span {
  background: var(--rl-accent);
  height: 2px;
  opacity: 1;
}

/* ---- responsive ---- */
@media (max-width: 1023px) {
  .spot__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    gap: 32px;
  }

  .spot__name {
    font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  }
}

@media (max-width: 720px) {

  /* portrait above the details */
  .spot__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .spot__frame {
    aspect-ratio: 1 / 1;
  }

  .spot__stage {
    width: 100%;
    max-width: 340px;
  }

  .spot__desc {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .spot__frame,
  .spot__art,
  .spot__real,
  .spot__name,
  .spot__role,
  .spot__desc,
  .spot__count b {
    transition: opacity .2s linear !important;
    transform: none !important;
  }

  .spot__scan {
    display: none;
  }

  .spot.is-revealed .spot__real {
    clip-path: inset(0 0 0 0);
  }
}

/* ---------- closing ---------- */
.rlab-close {
  text-align: center;
}

.rlab-close__inner {
  max-width: 60ch;
  margin: 0 auto;
}

.rlab-close__title {
  font-size: clamp(2rem, 5vw, 3.6rem);
  letter-spacing: -.045em;
}

.rlab-close__lede {
  margin: 22px auto 0;
  color: var(--text-mid);
  max-width: 50ch;
}

.rlab-close__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: clamp(30px, 4vh, 46px);
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .rlab-loop__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rlab-loop__head {
    max-width: 60ch;
  }

  .rlab-cycle {
    width: min(400px, 86vw);
    margin: 0 auto;
  }
}

@media (max-width: 860px) {
  .rlab-def__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* the channel needs width to read as a taper; below this it is dropped and
     the gates stand on their own */
  .rlab-funnel {
    grid-template-columns: minmax(0, 1fr);
  }

  .rlab-funnel__viz {
    display: none;
  }

  /* the zig-zag straightens into a single left-hand rail */
  .rlab-zig__path {
    display: none;
  }

  .rlab-zig__list {
    border-left: 1px solid var(--line);
    padding-left: 26px;
  }

  .rlab-step,
  .rlab-step--left,
  .rlab-step--right {
    justify-content: flex-start;
    padding: 0 0 26px;
    min-height: 0;
  }

  .rlab-step--left .rlab-step__dot,
  .rlab-step--right .rlab-step__dot {
    left: -32px;
    right: auto;
    top: 26px;
    translate: 0 0;
  }

  .rlab-step__card {
    max-width: none;
  }

  /* no hover on touch: show the detail outright */
  .rlab-step__body {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 10px;
  }

  .rlab-hero__meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 620px) {
  .rlab-plot__card {
    display: none;
  }

  .rlab-plot__frame::after {
    content: "564M · specialised   ·   125B · reasoning depth";
    display: block;
    padding: 10px 4px 2px;
    font-family: var(--mono);
    font-size: .62rem;
    color: var(--text-dim);
    text-align: center;
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {

  .rlab-step,
  .rlab-plot__card,
  .rlab-cycle__node {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .rlab-cycle__flow {
    animation: none !important;
    opacity: .4 !important;
  }

  .rlab-gate {
    opacity: 1 !important;
    transform: none !important;
  }

  .rlab-funnel__edge {
    stroke-dashoffset: 0 !important;
  }

  .rlab-plot__curve {
    stroke-dashoffset: 0 !important;
  }

  .rlab-zig__lit {
    display: none;
  }

  .rlab-hero__spine span {
    display: none;
  }
}