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

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

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

.js [data-reveal="up"] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal="up"].is-in { opacity: 1; transform: none; }

[data-reveal="lines"] .line-mask {
  display: block;
  overflow: hidden;
  padding-block: 0.08em 0.18em;
  margin-block: -0.08em -0.18em;
}

[data-reveal="lines"] .line-inner {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1s var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--line-delay, 0ms));
}

[data-reveal="lines"].is-in .line-inner { transform: none; }

[data-reveal="media"] { clip-path: inset(0 round var(--radius-media)); }
[data-reveal="media"] > :first-child {
  transform: scale(1.08);
  transition: transform 1.2s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="media"].is-in > :first-child { transform: scale(1); }

[data-reveal="rule"] {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="rule"].is-in { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal="up"] { opacity: 1 !important; transform: none !important; }
  [data-reveal="lines"] .line-inner { transform: none !important; }
  [data-reveal="media"] > :first-child { transform: none !important; }
}

/* Work ------------------------------------------------------------------ */

.work-runway {
  position: relative;
  height: 340vh;
  background: var(--black);
}

.runway-stage {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100svh;
  padding: calc(76px + clamp(1.25rem, 2vh, 2rem)) 0 0;
  overflow: hidden;
}

.runway-header {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(1.5rem, 3vh, 2.5rem);
}

.runway-header .section-title {
  font-size: clamp(2.2rem, 4.4vw, 4.4rem);
}

.runway-viewport {
  display: flex;
  align-items: center;
  overflow: hidden;
  min-width: 0;
}

.runway-track {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 2.5rem);
  padding: 0 var(--gutter);
  transform: translate3d(var(--runway-x, 0px), 0, 0);
  will-change: transform;
}

.runway-card {
  position: relative;
  width: min(50vw, 600px);
  height: min(36vh, 325px);
  flex: none;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--white-14);
  border-radius: var(--radius-media);
  background: var(--panel);
  color: var(--white);
  cursor: pointer;
  text-align: left;
  transform-style: preserve-3d;
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 360ms var(--ease-out);
}

.runway-card:hover {
  border-color: var(--signal);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.64), 0 0 26px rgba(255, 61, 23, 0.16);
}

.runway-card > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.84) contrast(1.05); transition: transform 520ms var(--ease-out), filter 360ms ease; }
.runway-card:hover > img { transform: scale(1.045); filter: saturate(1) contrast(1.08); }
/* Four stops rather than three: the picture stays clear through the middle,
   then ramps hard from ~70% down, which is where the copy sits. A two-stop
   ramp to the same depth would have greyed the whole lower half. */
.runway-card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.30) 0%,
    rgba(0, 0, 0, 0.04) 32%,
    rgba(0, 0, 0, 0.58) 70%,
    rgba(0, 0, 0, 0.95) 100%);
  pointer-events: none;
}
.runway-card-copy { position: absolute; right: 1.35rem; bottom: 1.2rem; left: 1.35rem; display: grid; gap: 0.45rem; pointer-events: none; }
.runway-card-copy small { color: var(--signal); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; }
.runway-card-copy strong { max-width: 34ch; font-size: clamp(1rem, 1.5vw, 1.4rem); line-height: 1.15; letter-spacing: -0.025em; }

.runway-timeline { padding: 0 var(--gutter) clamp(1.15rem, 2.4vh, 1.8rem); }

/* Ticks only. Taller marks every fifth, the way a ruler is actually read. */
.runway-ruler {
  height: 13px;
  margin-bottom: 0.5rem;
  background:
    repeating-linear-gradient(90deg, var(--white-28) 0 1px, transparent 1px 4%) bottom / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, var(--white-52) 0 1px, transparent 1px 20%) bottom / 100% 13px no-repeat;
}

.runway-progress { position: relative; height: 2px; background: var(--white-14); }
.runway-progress i { display: block; width: 100%; height: 100%; background: var(--signal); transform: scaleX(var(--runway-progress, 0)); transform-origin: left; }

/* A real playhead: the head sits above the line and the blade drops through
   the ruler, so the whole strip reads as a timeline rather than a scrollbar. */
.runway-progress b {
  position: absolute;
  top: 1px;
  left: calc(var(--runway-progress, 0) * 100%);
  width: 2px;
  height: 20px;
  background: var(--signal);
  box-shadow: 0 0 10px rgba(255, 61, 23, 0.7);
  transform: translate(-50%, -100%);
}

.runway-progress b::before {
  position: absolute;
  top: -1px;
  left: 50%;
  width: 13px;
  height: 9px;
  background: var(--signal);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
  transform: translateX(-50%);
  content: "";
}

@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .work-runway { height: auto; padding: 6rem 0; }
  .runway-stage { position: static; display: block; height: auto; padding: 0; overflow: visible; }
  .runway-header { grid-template-columns: 1fr; gap: 1rem; padding-bottom: 2rem; }
  .runway-viewport { overflow-x: auto; padding-bottom: 1rem; scrollbar-width: none; }
  .runway-viewport::-webkit-scrollbar { display: none; }
  .runway-track { transform: none; }
  .runway-card { width: min(80vw, 480px); height: min(56vw, 340px); }
  .runway-timeline { display: none; }
}
/* Contact --------------------------------------------------------------- */

.contact {
  border-top: 1px solid var(--white-08);
  background: var(--black-soft);
}

.contact-shell {
  display: grid;
  grid-template-columns: minmax(20rem, 0.8fr) minmax(30rem, 1.2fr);
  gap: clamp(4rem, 10vw, 12rem);
}

.contact-intro h2 {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: clamp(3.5rem, 6.7vw, 8rem);
  font-weight: 600;
  line-height: 0.89;
  letter-spacing: -0.065em;
}

.contact-intro > p:not(.section-lede) {
  max-width: 30ch;
  margin-top: 2rem;
  color: var(--white-52);
  font-size: 1rem;
}

.contact-intro > a {
  display: inline-flex;
  gap: 0.65rem;
  margin-top: 1.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--white-28);
  font-size: 0.9rem;
}

.contact-form { display: grid; gap: 1.7rem; align-content: start; }
.contact-form label { display: grid; gap: 0.65rem; }

.contact-form label > span {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--white-52);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.65rem 0;
  border: 0;
  border-bottom: 1px solid var(--white-14);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--white);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 260ms ease;
}

.contact-form textarea { min-height: 116px; resize: vertical; }
.contact-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--white-52) 50%), linear-gradient(135deg, var(--white-52) 50%, transparent 50%); background-position: calc(100% - 11px) 50%, calc(100% - 6px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--white-28); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-bottom-color: var(--white); }
.contact-form :is(input, select, textarea)[aria-invalid="true"] { border-bottom-color: var(--signal); }
.honeypot { position: absolute !important; left: -9999px !important; }

.form-submit-row { display: flex; align-items: center; gap: 1.2rem; margin-top: 0.6rem; }
.form-submit-row [role="status"] { color: var(--white-52); font-size: 0.82rem; }
.form-note { font-size: 0.75rem; color: var(--white-28); }
.form-note a { color: var(--white-52); text-decoration: underline; text-underline-offset: 0.2em; }

/* Phones: the intro above the form, and the paired fields one per line.
   Without this the two columns' minimum widths held the page at ~880px. */
@media (max-width: 900px) {
  .contact-shell { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
}

@media (max-width: 560px) {
  .form-row { grid-template-columns: minmax(0, 1fr); gap: 1.7rem; }
}

/* Footer and dialog ----------------------------------------------------- */

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 110px;
  padding: 1.5rem var(--gutter);
  border-top: 1px solid var(--white-08);
  background: var(--black-soft);
}

.site-footer > p,
.site-footer nav {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-52);
}
.site-footer > p { justify-self: center; }
.site-footer nav { justify-self: end; display: flex; gap: 1.4rem; }

/* Small phones: logo, then the year, then the legal links, centred. */
@media (max-width: 600px) {
  .site-footer { grid-template-columns: 1fr; justify-items: center; gap: 0.9rem; padding-block: 2rem; }
  .site-footer nav { justify-self: center; }
}
.site-footer a { transition: color 260ms ease; }
.site-footer nav a:hover { color: var(--white); }

.page-progress {
  position: fixed;
  z-index: 200;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  pointer-events: none;
}

.page-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--signal);
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left;
}

/* The work viewer ---------------------------------------------------------
   Full screen and quiet: the player owns the middle, the brand's kicker and
   counter sit above it, the channel and title below in the site's heading
   voice, and every video in the selection is one click away underneath. */

.work-dialog {
  --player-w: min(1100px, calc(100vw - 2 * var(--gutter) - 8.5rem), calc((100svh - 19rem) * 16 / 9));

  width: 100vw;
  max-width: none;
  height: 100svh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--white);
}

.work-dialog::backdrop {
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(255, 61, 23, 0.1), transparent 70%),
    rgba(4, 4, 4, 0.94);
  backdrop-filter: blur(10px);
}

.work-dialog[open] { animation: dialog-in 520ms var(--ease-out); }
.work-dialog[open]::backdrop { animation: dialog-fade 420ms ease; }

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes dialog-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.dialog-shell {
  outline: none;
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: center;
  justify-items: center;
  gap: clamp(0.9rem, 2.2vh, 1.5rem);
  box-sizing: border-box;
  height: 100%;
  padding: clamp(1rem, 3vh, 2.2rem) var(--gutter);
}

.dialog-bar,
.dialog-meta,
.dialog-strip {
  width: var(--player-w);
}

.dialog-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.dialog-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font: 500 var(--fs-label) / 1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
}

.dialog-count {
  padding-left: 0.7rem;
  border-left: 1px solid var(--white-14);
  color: var(--white-52);
  font-variant-numeric: tabular-nums;
}

.dialog-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.dialog-youtube {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--white-14);
  border-radius: var(--radius-control);
  font: 500 var(--fs-label) / 1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-76);
  transition: color 200ms ease, border-color 200ms ease;
}

.dialog-youtube:hover,
.dialog-youtube:focus-visible {
  border-color: var(--signal);
  color: var(--white);
}

.dialog-youtube svg { width: 0.95rem; height: 0.95rem; color: var(--signal); }

/* Round controls: close and the arrows share one shape. */
.dialog-round {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  border: 1px solid var(--white-14);
  border-radius: 50%;
  background: rgba(242, 240, 234, 0.04);
  color: var(--white);
  cursor: pointer;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, transform 300ms var(--ease-out);
}

.dialog-round:hover,
.dialog-round:focus-visible {
  border-color: var(--white);
  background: var(--white);
  color: var(--black);
}

.dialog-round svg {
  width: 1.15rem;
  height: 1.15rem;
}

.dialog-youtube svg,
.dialog-round svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The player between its arrows. */
.dialog-stage {
  position: relative;
  display: grid;
  grid-template-columns: auto var(--player-w) auto;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.6rem);
}

.dialog-nav {
  width: 3.3rem;
  height: 3.3rem;
}

.dialog-nav svg { width: 1.4rem; height: 1.4rem; }
.dialog-nav--prev:hover { transform: translateX(-3px); }
.dialog-nav--next:hover { transform: translateX(3px); }

.dialog-player {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--white-14);
  border-radius: var(--radius-media);
  background: #000;
  box-shadow:
    0 50px 120px -50px rgba(0, 0, 0, 0.95),
    0 0 90px -40px rgba(255, 61, 23, 0.45);
  transition: opacity 220ms ease, transform 360ms var(--ease-out);
}

.dialog-stage.is-switching .dialog-player {
  opacity: 0;
  transform: scale(0.985);
}

.dialog-player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Channel and title, in the site's voice. */
.dialog-meta {
  display: grid;
  gap: 0.55rem;
}

.dialog-client {
  font: 500 var(--fs-label) / 1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
}

.dialog-title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-size: clamp(1.2rem, 2.1vw, 1.9rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--white);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dialog-meta.is-fresh > * { animation: dialog-rise 520ms var(--ease-out) both; }
.dialog-meta.is-fresh > :nth-child(2) { animation-delay: 60ms; }

@keyframes dialog-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Every video, one click away; the current one outlined in the accent. */
.dialog-strip {
  display: flex;
  gap: clamp(0.4rem, 0.8vw, 0.65rem);
  overflow-x: auto;
  padding: 3px;
  scrollbar-width: none;
}

.dialog-thumb {
  position: relative;
  flex: 1 1 0;
  min-width: 3.6rem;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #000;
  cursor: pointer;
  opacity: 0.42;
  transition: opacity 240ms ease, transform 300ms var(--ease-out);
}

.dialog-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dialog-thumb:hover { opacity: 0.8; transform: translateY(-2px); }

.dialog-thumb.is-current {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--signal), 0 8px 24px -8px rgba(255, 61, 23, 0.6);
}

@media (max-width: 760px) {
  .work-dialog { --player-w: calc(100vw - 2 * var(--gutter)); }

  /* The arrows sit over the player's edges on a phone. */
  .dialog-stage { grid-template-columns: var(--player-w); }
  .dialog-nav {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 2.6rem;
    height: 2.6rem;
    background: rgba(8, 8, 8, 0.72);
    transform: translateY(-50%);
  }
  .dialog-nav--prev { left: 0.5rem; }
  .dialog-nav--next { right: 0.5rem; }
  .dialog-nav--prev:hover,
  .dialog-nav--next:hover { transform: translateY(-50%); }
  /* The bar has room for the essentials only: the count, an icon-only
     YouTube link and the close. */
  .dialog-youtube { width: 2.7rem; height: 2.7rem; justify-content: center; padding: 0; }
  .dialog-youtube-label { display: none; }
  .dialog-kicker > span:nth-child(2) { display: none; }
  .dialog-count { padding-left: 0; border-left: 0; color: var(--white); }
}

@media (prefers-reduced-motion: reduce) {
  .work-dialog[open],
  .work-dialog[open]::backdrop,
  .dialog-meta.is-fresh > * { animation: none; }
}

button:disabled { cursor: wait; opacity: 0.58; }


/* Clients ---------------------------------------------------------------- */
/* A face column carries the recognition the names alone cannot. Muted until
   pointed at, so the block reads as one calm list rather than nine logos. */

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

.client-roster {
  border-top: 1px solid var(--white-14);
}

.client-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  padding-block: clamp(0.7rem, 1.5vw, 1.05rem);
  border-bottom: 1px solid var(--white-14);
  transition: background-color 320ms var(--ease-out);
}

.client-link:hover { background: rgba(255, 255, 255, 0.02); }

.client-link-avatar {
  width: clamp(40px, 4vw, 54px);
  height: clamp(40px, 4vw, 54px);
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.62);
  transform: scale(0.96);
  transition: filter 400ms var(--ease-out), transform 500ms var(--ease-out);
}

.client-link:hover .client-link-avatar {
  filter: none;
  transform: scale(1);
}

.client-link-name {
  font-size: clamp(1.15rem, 2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--white-52);
  transition: color 320ms var(--ease-out);
}

.client-link:hover .client-link-name { color: var(--white); }

.client-socials {
  display: flex;
  gap: clamp(0.7rem, 1.6vw, 1.4rem);
}

.client-social-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--white-52);
}

.client-social-badge img { width: 14px; height: 14px; opacity: 0.6; }

.client-link-arrow {
  color: var(--white-28);
  transition: color 320ms var(--ease-out), transform 400ms var(--ease-out);
}

.client-link:hover .client-link-arrow { color: var(--signal); transform: translateX(4px); }

.client-more {
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-28);
}

@media (max-width: 720px) {
  .client-link { grid-template-columns: auto minmax(0, 1fr) auto; }
  .client-socials { display: none; }
}

/* Studio ----------------------------------------------------------------- */
/* The background plate is tritoned into the palette, so the section reads as
   one temperature rather than a stock video behind text. */

.studio {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--white-08);
}

.studio-bed {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.studio-bed video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: url("#tritone") contrast(1.06);
  opacity: 0.5;
}

.studio-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 30% 20%, transparent, rgba(5, 5, 5, 0.72) 70%),
    linear-gradient(180deg, var(--black) 0%, rgba(5, 5, 5, 0.55) 26%, rgba(5, 5, 5, 0.72) 70%, var(--black) 100%);
}

.studio-inner { position: relative; z-index: 1; }

.studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.studio-portrait {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--white-14);
  border-radius: var(--radius-media);
  background: var(--black-soft);
}

.studio-portrait img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* Framed off-centre: monitors upper left, him at the desk on the right. */
  object-position: 55% 50%;
  filter: saturate(0.92) contrast(1.04);
}

.studio-portrait figcaption {
  position: absolute;
  right: 0.9rem;
  bottom: 0.8rem;
  left: 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-76);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.studio-text {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  /* ~67 characters a line. A shade over the 66 ideal, traded for the vertical
     space it saves against the portrait beside it. */
  max-width: 52ch;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

.studio-text p {
  color: var(--white-76);
  font-size: var(--fs-body);
  line-height: 1.55;
  letter-spacing: -0.01em;
}

/* Stacked rather than a wrapping row: the three facts are no longer of
   comparable length, and a row would break at an arbitrary point. */
.studio-facts {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--white-14);
  list-style: none;
  color: var(--white-76);
}

.studio-facts li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--white-14);
  font-size: var(--fs-small);
  line-height: 1.4;
}

.studio-facts span { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--signal); }

@media (max-width: 900px) {
  .studio-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .studio-portrait { max-width: 26rem; }
}

/* Client words ----------------------------------------------------------- */
/* Scroll moves through the quotes. There is nothing to click, because the
   page is already the control. */

.words {
  position: relative;
  background: var(--black);
  border-top: 1px solid var(--white-08);
}

.words-track { position: relative; height: 260vh; }

.words-stage {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  height: 100svh;
}

.words-deck { position: relative; padding-top: clamp(1rem, 3vh, 2.5rem); }

.words-counter {
  display: block;
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--white-28);
}

.words-counter b { font-weight: 500; color: var(--signal); }
.words-counter i { font-style: normal; }

/* Stacked in one grid cell rather than absolutely positioned, so the deck is
   always as tall as its longest quote and nothing below can be overlapped. */
.words-quotes {
  position: relative;
  display: grid;
}

.words-quote {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  pointer-events: none;
  transition: opacity 460ms var(--ease-out), transform 640ms var(--ease-out);
}

.words-quote.is-active { opacity: 1; transform: none; pointer-events: auto; }

.words-quote blockquote {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(2rem, 5vw, 5rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

/* Big orange quotation marks: the opening one set large above the words,
   the closing one in line at their end. */
.words-quote blockquote::before {
  content: "\201C";
  display: block;
  height: 0.5em;
  margin-bottom: 0.08em;
  font-size: 2.7em;
  line-height: 0.8;
  letter-spacing: 0;
  color: var(--signal);
  text-shadow: 0 0 44px rgba(255, 61, 23, 0.35);
}

.words-tail {
  white-space: nowrap;
}

/* Inside the tail, so the mark cannot wrap away from the last word. */
.words-tail::after {
  content: "\201D";
  margin-left: 0.04em;
  color: var(--signal);
}

.words-person {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.words-person img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.words-person strong { display: block; font-size: var(--fs-body); font-weight: 600; }
.words-person small {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.02em;
  color: var(--white-52);
}

.words-person small b {
  font-weight: 500;
  color: var(--white);
}

.words-ticks {
  display: flex;
  gap: 6px;
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
}

.words-ticks i {
  width: 34px;
  height: 2px;
  background: var(--white-14);
  transition: background-color 360ms var(--ease-out);
}

.words-ticks i.is-on { background: var(--signal); }

@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .words-track { height: auto; }
  .words-stage { position: static; display: block; height: auto; padding-block: 5rem; }
  .words-quotes { display: flex; flex-direction: column; gap: 3.5rem; }
  .words-quote { position: static; opacity: 1; transform: none; pointer-events: auto; }
  .words-counter, .words-ticks { display: none; }
}