/* RendReal — premium industrial dark theme.
   Palette is sampled from the supplied logo: red #E40301 on near-black, with
   silver/grey neutrals. No green, no blue accents, no gradients beyond subtle
   metallic sheen. */

/* ---------------------------------------------------------------- tokens */

:root {
  --red: #e40301;
  --red-hot: #f41410;
  --red-deep: #a80200;

  --black: #060606;
  --surface: #0b0b0b;
  --surface-2: #101012;
  --surface-3: #16161a;

  --white: #f5f6f7;
  --silver: #c9ced4;
  --muted: #969ba2;
  --faint: #6a6f76;

  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  --display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* The container is wide enough for card grids to hold a readable line length
     on a large display. Long-form copy is capped separately in ch units, so it
     keeps its reading measure no matter how wide this gets. */
  --wrap: 1560px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  --radius: 3px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------- reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--silver);
  font-family: var(--body);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0 0 1.1em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--white);
  text-decoration-color: rgba(228, 3, 1, 0.5);
  text-underline-offset: 0.2em;
  transition: color 0.2s var(--ease);
}

a:hover {
  color: var(--red-hot);
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--red-hot);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -4rem;
  transform: translateX(-50%);
  z-index: 100;
  background: var(--red);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 0.5rem;
  color: #fff;
}

/* ---------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--alt {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.section__head {
  max-width: 62ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section__title {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem);
  margin-bottom: 1rem;
}

.section__lead {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  color: var(--muted);
}

.eyebrow {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1rem;
}

.eyebrow--red {
  color: var(--silver);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.eyebrow--red::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--red);
  flex: none;
}

.note {
  margin-top: 2rem;
  padding-left: 1rem;
  border-left: 2px solid var(--red);
  color: var(--muted);
  font-size: 0.95rem;
}

.prose {
  max-width: 68ch;
  font-size: clamp(1.02rem, 1rem + 0.25vw, 1.15rem);
}

.plain a {
  text-decoration: none;
}

/* ---------------------------------------------------------------- buttons */

.button {
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--white);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
    transform 0.25s var(--ease), color 0.25s var(--ease);
}

.button--solid {
  --btn-bg: var(--red);
  border-color: var(--red);
  color: #fff;
}

.button--solid:hover {
  --btn-bg: var(--red-hot);
  border-color: var(--red-hot);
  color: #fff;
  transform: translateY(-2px);
}

.button--ghost:hover {
  border-color: var(--red);
  color: var(--white);
  transform: translateY(-2px);
}

.button--block {
  width: 100%;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.site-header.is-stuck {
  background: rgba(6, 6, 6, 0.88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.site-header__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0.9rem var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  flex: none;
}

.wordmark__mark {
  width: auto;
  height: 2.1rem;
}

.wordmark__text {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--white);
}

.wordmark__accent {
  color: var(--red);
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  display: flex;
  gap: clamp(1rem, 2.2vw, 2.2rem);
}

.site-nav a {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--silver);
  padding-block: 0.4rem;
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width 0.25s var(--ease);
}

.site-nav a:hover::after {
  width: 100%;
}

.site-header__cta {
  padding: 0.7rem 1.3rem;
  font-size: 0.78rem;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  position: absolute;
  left: 50%;
  width: 1.1rem;
  height: 2px;
  background: var(--white);
  transform: translateX(-50%);
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle__bars {
  top: 50%;
  margin-top: -1px;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  left: 0;
  transform: none;
}

.nav-toggle__bars::before {
  top: -6px;
}

.nav-toggle__bars::after {
  top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

.mobile-nav {
  background: rgba(6, 6, 6, 0.97);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 1rem var(--gutter) 1.75rem;
}

.mobile-nav ul {
  display: grid;
  gap: 0.25rem;
}

.mobile-nav a {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
}

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: clamp(8rem, 16vh, 12rem) clamp(3.5rem, 8vh, 6rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Barely a fade. The still is the clip's own first frame, so a long cross-fade
   blended a frozen arm with one already in motion and read as a double image;
   this is just long enough to hide the compression difference between them. */
.hero__video {
  opacity: 0;
  transition: opacity 0.18s linear;
}

.hero__video.is-playing {
  opacity: 1;
}

/* No brightness lift: the UR10 cell is a bright, evenly lit shot, and the grade
   this carried for the near-black watch movement washed the copy out. */
.hero__poster,
.hero__video {
  filter: saturate(1.02);
}

/* Weighted to the bottom half, which is where every line of copy sits. The robot
   itself is in the upper third and stays clear of it. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to top,
      rgba(6, 6, 6, 0.95) 0%,
      rgba(6, 6, 6, 0.88) 28%,
      rgba(6, 6, 6, 0.66) 47%,
      rgba(6, 6, 6, 0.26) 70%,
      rgba(6, 6, 6, 0.44) 100%
    ),
    radial-gradient(120% 80% at 20% 80%, rgba(6, 6, 6, 0.5), transparent 62%);
}

/* The film runs from a dusk exterior to a sunlit yard, so the copy has to hold
   on both: a shadow does the work the scrim cannot without flattening the
   footage. */
.hero__inner {
  max-width: 60rem;
  text-shadow: 0 1px 14px rgba(6, 6, 6, 0.65);
}

.hero__heading {
  font-size: clamp(2.4rem, 1.1rem + 6.4vw, 5.5rem);
  margin-bottom: 1.25rem;
}

.hero__lead {
  font-size: clamp(1.1rem, 1rem + 0.7vw, 1.55rem);
  color: var(--white);
  max-width: 46ch;
  margin-bottom: 1rem;
}

.hero__support {
  color: var(--muted);
  max-width: 52ch;
  margin-bottom: 2.25rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.hero__controls {
  position: absolute;
  right: var(--gutter);
  bottom: 1.5rem;
  z-index: 2;
  display: flex;
  gap: 0.5rem;
}

.hero__motion,
.sound-toggle {
  background: rgba(6, 6, 6, 0.62);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.hero__motion:hover,
.sound-toggle:hover {
  color: var(--white);
  border-color: var(--red);
}

.sound-toggle[aria-pressed="true"] {
  color: var(--white);
  border-color: var(--red);
}

/* ---------------------------------------------------------------- promise */

.promise {
  background: var(--surface);
  border-block: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 5rem);
}

.promise__inner {
  max-width: 80ch;
}

.promise__heading {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  margin-bottom: 1rem;
}

.promise__body {
  color: var(--muted);
  font-size: clamp(1.02rem, 1rem + 0.3vw, 1.2rem);
}

/* ---------------------------------------------------------------- capabilities */

.cap-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.cap {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  padding: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  overflow: hidden;
}

.cap__media img {
  width: 100%;
  object-fit: cover;
  filter: saturate(0.95);
}

.cap__title {
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem) 0.75rem;
}

.cap__body {
  padding-inline: clamp(1.25rem, 3vw, 2rem);
  color: var(--muted);
}

.cap .ticks {
  padding-inline: clamp(1.25rem, 3vw, 2rem);
}

.ticks li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.55rem;
  color: var(--silver);
  font-size: 0.98rem;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.7rem;
  height: 2px;
  background: var(--red);
}

/* ---------------------------------------------------------------- services */

/* auto-fit spends extra container width on more columns, not wider ones, so the
   minimum track has to rise with the container or the text stays cramped. At
   20rem this holds four columns across the widest layout and two rows of four
   for the eight services. */
.service-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.service {
  background: var(--black);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transition: background 0.3s var(--ease);
  position: relative;
}

.service::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.service:hover {
  background: var(--surface-2);
}

.service:hover::after {
  transform: scaleX(1);
}

.service__number {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--red);
  margin-bottom: 0.85rem;
}

.service__title {
  font-size: 1.12rem;
  margin-bottom: 0.75rem;
}

.service__body {
  font-size: 0.94rem;
  color: var(--muted);
}

.callout {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-left: 2px solid var(--red);
  background: var(--surface-2);
  max-width: 70ch;
}

.callout__title {
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}

.callout p {
  color: var(--muted);
}

/* ---------------------------------------------------------------- bridge */

.compare-grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  /* These are square, so full container width would make each one taller than
     the viewport. Held at the size the pair was composed for. */
  max-width: 76rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Left-aligned rather than centred: on a wide container a centred single figure
   floats away from the headings and galleries that share the same left edge. */
.compare-grid--single {
  grid-template-columns: minmax(0, 52rem);
  justify-content: start;
}

.compare-pair {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 70rem) {
  .compare-pair {
    /* The wipe is square, so two square stills at half its width stack to exactly
       its height. Bottom-aligned because the wipe carries a heading above it and
       the stills should line up with the image, not with the text. */
    --stage: min(64rem, 68svh);
    grid-template-columns: var(--stage) minmax(0, calc((var(--stage) - clamp(1rem, 2.5vw, 1.75rem)) / 2));
    justify-content: start;
    align-items: end;
  }
}

.compare-pair__stills {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.compare {
  margin: 0;
}

.compare__head {
  margin-bottom: 1.25rem;
}

.compare__title {
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}

.compare__body {
  color: var(--muted);
  font-size: 0.96rem;
}

.compare__stage {
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface-2);
  overflow: hidden;
  touch-action: pan-y;
  --pos: 50%;
}

.compare__layer {
  position: relative;
}

.compare__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compare__layer--before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.compare__tag {
  position: absolute;
  bottom: 0.75rem;
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  background: rgba(6, 6, 6, 0.78);
  border: 1px solid var(--line-strong);
  color: var(--white);
}

.compare__tag--before {
  left: 0.75rem;
}

.compare__tag--after {
  right: 0.75rem;
}

.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  background: var(--red);
  transform: translateX(-1px);
  pointer-events: none;
}

.compare__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.6rem;
  height: 2.6rem;
  transform: translate(-50%, -50%);
  border: 2px solid var(--red);
  border-radius: 50%;
  background: rgba(6, 6, 6, 0.65);
  backdrop-filter: blur(2px);
}

.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  background: none;
}

.compare__range:focus-visible {
  opacity: 1;
  outline-offset: -3px;
}

.layer-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.layer {
  background: var(--black);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.layer__title {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.layer__body {
  font-size: 0.92rem;
  color: var(--muted);
}

.software {
  margin: 0;
  border-top: 1px solid var(--line);
}

.software__row {
  display: grid;
  gap: 0.25rem 2rem;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line);
}

.software__name {
  font-family: var(--display);
  font-weight: 600;
  color: var(--white);
  font-size: 0.98rem;
}

.software__role {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

/* ---------------------------------------------------------------- cards */

/* Six tracks so the two lead projects can take half the row each and the rest
   sit three-up, which keeps every row filled and every card in a row the same
   height. Collapses to two columns, then one. */
.card-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .card-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .card--main {
    grid-column: span 3;
  }

  .card--third {
    grid-column: span 2;
  }
}

.card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.card:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
}

.card__link {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.card__media {
  position: relative;
  overflow: hidden;
  background: var(--black);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
  filter: saturate(0.92);
}

.card:hover .card__media img {
  transform: scale(1.035);
  filter: saturate(1);
}

.card__play {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line-strong);
  background: rgba(6, 6, 6, 0.6);
  backdrop-filter: blur(2px);
}

.card__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-left: 9px solid var(--red);
  border-block: 6px solid transparent;
}

.card__body {
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Two lines are reserved so titles stay on the same baseline across a row
   whether or not the category label wraps. */
.card__category {
  margin: 0;
  min-height: 2.4em;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.card__title {
  font-size: 1.18rem;
}

.card__summary {
  margin: 0;
  font-size: 0.93rem;
  color: var(--muted);
}

.card__more {
  margin-top: auto;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.card__more::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--red);
  transition: width 0.3s var(--ease);
}

.card:hover .card__more::after {
  width: 2.5rem;
}


/* ---------------------------------------------------------------- ai + workflow */

.ai-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.ai-item {
  background: var(--black);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.ai-item__title {
  font-size: 1rem;
  margin-bottom: 0.45rem;
}

.ai-item__body {
  font-size: 0.92rem;
  color: var(--muted);
}

.step-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  counter-reset: step;
}

.step {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-strong);
}

.step__number {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: var(--red);
  margin-bottom: 0.75rem;
}

.step__title {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.step__body {
  font-size: 0.92rem;
  color: var(--muted);
}

/* ---------------------------------------------------------------- about + founder */

.pillar-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.pillar {
  padding-left: 1.25rem;
  border-left: 2px solid var(--red);
}

.pillar__title {
  font-size: 1rem;
  margin-bottom: 0.45rem;
}

.pillar__body {
  font-size: 0.92rem;
  color: var(--muted);
}

.founder {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 52rem) {
  .founder {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  }
}

.founder__media {
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  background: var(--surface-2);
}

.founder__media img {
  width: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.02);
}

.founder__role {
  color: var(--red);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-block: 0.75rem 1.5rem;
}

/* The column is as wide as the container allows, so the paragraphs carry their
   own reading measure rather than stretching to the full grid track. */
.founder__text {
  max-width: 76ch;
}

.founder__text p:not(.founder__role):not(.eyebrow) {
  color: var(--muted);
}

/* ---------------------------------------------------------------- contact */

.contact__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 56rem) {
  .contact__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
}

.contact__card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.contact__list {
  margin: 1.75rem 0 0;
  display: grid;
  gap: 0.35rem 1.5rem;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  font-size: 0.94rem;
}

.contact__list dt {
  color: var(--faint);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 0.2rem;
}

.contact__list dd {
  margin: 0;
  color: var(--silver);
}

.contact--slim {
  background: var(--surface);
  border-top: 1px solid var(--line);
  text-align: center;
}

.contact__cta {
  max-width: 46rem;
  margin-inline: auto;
}

.contact__cta .section__lead {
  margin-bottom: 2rem;
}

/* ---------------------------------------------------------------- project page */

.page--project main,
.page--index main {
  padding-top: 5.5rem;
}

.page-head {
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.project__head {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.75rem, 3vw, 2.5rem);
}

.project__title {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem);
  margin-bottom: 1rem;
}

.project__summary {
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.35rem);
  color: var(--muted);
  max-width: 60ch;
}

/* Sized from the viewport, not the column. These clips are mostly 4:5 or square
   because they were cut for social, and a 4:5 frame at full column width is
   taller than any screen — the controls sat permanently below the fold. Capping
   the width by height keeps the whole player visible at once, and the aspect
   ratio still decides the shape. */
.video-frame {
  position: relative;
  max-width: calc(var(--ar, 1.7778) * 78svh);
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}

.video-frame__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--black);
}

.project__media {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.project__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: var(--section-y);
}

@media (min-width: 58rem) {
  .project__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }
}

/* Portrait player with the write-up alongside it, so the clip can be watched and
   read at the same time. */
.project__stage {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: var(--section-y);
}

@media (min-width: 70rem) {
  .project__stage {
    /* The player's width follows from the height cap, but never past 56% of the
       row: on a tall window the cap alone would leave the copy in a gutter. The
       minmax lets the track give way rather than overflow on a narrow window. */
    grid-template-columns:
      minmax(0, min(calc(var(--ar, 0.8) * 78svh), 56%))
      minmax(20rem, 1fr);
    align-items: start;
  }
}

.project__beside {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Sticky earns its keep beside three sections of copy, not inside the column that
   holds them. */
.project__beside .project__aside {
  position: static;
}

.block {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 62ch;
}

.block__title {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.75rem;
  font-family: var(--body);
}

.block p {
  font-size: clamp(1rem, 0.98rem + 0.25vw, 1.12rem);
}

.project__aside {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  padding: clamp(1.4rem, 3vw, 2rem);
  position: sticky;
  top: 6.5rem;
}

.aside__title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1rem;
}

.project__aside .ticks {
  margin-bottom: 2rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  border: 1px solid var(--line-strong);
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  color: var(--silver);
  background: var(--black);
}

.gallery {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  /* Stills are the point of this section, so the wider container buys larger
     images rather than a fourth column. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

/* Same height cap as the player: a project with a single 4:5 still gets one
   full-width column, which would stand taller than the screen. In a multi-column
   gallery the columns are already narrower than this, so nothing changes there. */
.gallery__item {
  margin: 0;
  max-width: calc(var(--ar, 0.8) * 74svh);
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.gallery__item img {
  width: 100%;
  object-fit: cover;
}

.gallery__item figcaption {
  padding: 0.85rem 1rem;
  font-size: 0.82rem;
  color: var(--faint);
  border-top: 1px solid var(--line);
}

.credits-block {
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.credits {
  font-size: 0.8rem;
  color: var(--faint);
}

.credits summary {
  cursor: pointer;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--faint);
  padding-block: 0.5rem;
}

.credits summary:hover {
  color: var(--muted);
}

.credits ul {
  margin-top: 0.5rem;
  display: grid;
  gap: 0.3rem;
  max-width: 80ch;
}

.credits__intro {
  margin-top: 0.5rem;
  max-width: 80ch;
}

.credits__project {
  color: var(--muted);
}

.project-nav {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}

.project-nav__link {
  text-decoration: none;
  display: grid;
  gap: 0.3rem;
}

.project-nav__link--next {
  text-align: right;
}

.project-nav__label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.project-nav__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--white);
}

.project-nav__all {
  justify-self: center;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-top: clamp(3rem, 6vw, 5rem);
}

.site-footer__inner {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.site-footer__tagline {
  margin-top: 1rem;
  color: var(--faint);
  font-size: 0.9rem;
}

.site-footer__heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1rem;
}

.site-footer__contact li,
.site-footer__nav li {
  margin-bottom: 0.5rem;
  font-size: 0.94rem;
}

.site-footer__legal {
  border-top: 1px solid var(--line);
  padding-block: 1.5rem 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer__copy {
  margin: 0;
  font-size: 0.78rem;
  color: var(--faint);
}

/* ---------------------------------------------------------------- reveal */

/* Scoped to .js so the content is visible when the script never runs: the
   reveal is an enhancement, not a prerequisite for reading the page. */
.js .reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 60rem) {
  .site-nav,
  .site-header__cta {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  .project__aside {
    position: static;
  }
}

@media (max-width: 40rem) {
  .software__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }

  .contact__list dd {
    margin-bottom: 0.75rem;
  }

  .hero__controls {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .hero__video {
    display: none;
  }
}