/* ==========================================================================
   hire.css — the application page.
   Layered on studio.css tokens. The boldness comes from scale, structure and
   motion — never from colour, which stays achromatic on purpose.
   ========================================================================= */

html { scroll-behavior: smooth; }

/* --------------------------------------------------------------- REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal[data-shown="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------- HEADER */
.site-header__inner { padding-block: var(--spacing-16); }

.nav__link { position: relative; padding: 4px 2px; }

.nav__link::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link:hover { opacity: 1; }

/* ================================================================= HERO */
/* Headline top-left, a diagonal staircase of whole work tiles stepping down
   through the middle, and the copy block lower right — the same three-part
   composition the reference uses. */
.hero {
  position: relative;
  padding-block: var(--spacing-24) 0;
}

/* The hero is a fixed-ratio STAGE. Every child is positioned as a percentage
   of the stage, so the arrangement is pixel-identical at any width and type can
   never collide with a tile. Type scales in cqw (container width), so the whole
   thing behaves like one picture being scaled — which is what the reference
   does. Below 900px the stage is abandoned for a plain stacked layout. */
/* Full-bleed and wider than the content column, as on the reference — that is
   what gives the band room to run corner to corner. 2:1 is the reference's own
   proportion. */
.hero__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  container-type: inline-size;
}

/* --- statement: upper left, clear of the collage ------------------------ */
.hero__type {
  position: absolute;
  left: 3%;
  top: 2.5%;
  width: 25%;
  z-index: 2;
  pointer-events: none;
}

.hero__type a { pointer-events: auto; }

.hero__type .eyebrow { font-size: clamp(9.5px, 0.9cqw, 14px); }

.hero__type h1 {
  font-family: var(--font-inter);
  font-size: clamp(22px, 3.6cqw, 68px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: var(--font-weight-semibold);
  color: var(--color-charcoal-ink);
  margin: 0.3em 0 0;
}

.hero__type h1 em {
  font-style: normal;
  -webkit-text-stroke: 1.5px var(--color-charcoal-ink);
  color: transparent;
}

/* --- copy block: lower right, clear of the diagonal at EVERY phase -------
   The conveyor travels up-and-right, so a tile that sits well to the left of
   this block at rest can be underneath it later in the cycle. The left edge is
   therefore set from the worst case (a tile whose bottom corner reaches
   furthest right), not from the resting frame. */
.hero__copy {
  position: absolute;
  left: 71%;
  top: 66%;
  width: 26%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 1.25cqw, 22px);
  align-items: flex-start;
}

.hero__copy .lede {
  font-size: clamp(12px, 1.09cqw, 18px);
  line-height: 1.55;
  margin: 0;
  max-width: 48ch;
}

.hero__copy .avail { font-size: clamp(10px, 0.98cqw, 15px); padding: 0.4em 0.85em; }

.hero__copy .btn {
  padding: clamp(7px, 0.82cqw, 14px) clamp(12px, 1.35cqw, 22px);
  font-size: clamp(11px, 0.98cqw, 15px);
}

/* --- below 900px the absolute stage cannot hold, so it unstacks --------- */
.hero__mobile { display: none; }

/* availability pill */
.avail {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-family: var(--font-inter-tight);
  font-size: var(--text-nav);
  line-height: var(--leading-nav);
  font-weight: var(--font-weight-medium);
  color: var(--color-charcoal-ink);
  border: 1px solid color-mix(in srgb, var(--color-charcoal-ink) 18%, transparent);
  border-radius: var(--radius-compactbuttons);
  padding: 6px 12px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--color-studio-canvas) 82%, transparent);
}

.avail__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4f7a3a;
}

/* ------------------------------------------------------- DIAGONAL RIBBON */
/* The reference is a conveyor, not a staircase: a diagonal band of overlapping
   tiles of MISMATCHED sizes travelling up-and-right, exactly as the style spec
   describes ("tiles overlapping at mismatched sizes rather than forming a
   uniform grid ... no card padding or shadow").

   Two constraints make it read as separate pictures rather than a smeared
   ribbon, and both are pure geometry:
     · the track is rotated -45deg and every tile is counter-rotated +45deg, so
       the screenshots stay upright while the layout axis runs diagonally
     · the step between neighbours is 17.9cqw along the track, so their vertical
       step is 17.9 · sin45 = 12.7cqw against a tile height of 14cqw — the tiles
       overlap by ~9% vertically, which is what makes the chain read as one
       connected object instead of a row of cards with grey gaps between them
   Measuring the reference gives the rest: tiles are 3:1 and each is overlapped
   by roughly half its width. No mask — the tiles are cut by the stage edge
   exactly as they are cut by the viewport in the original. */
/* Offset to the LEFT of centre. On the reference the band enters through the
   bottom-left corner and leaves through the top right-of-centre; centred, it
   would enter at 25% and leave at 75% and leave both corners bare. */
.hero__ribbon {
  position: absolute;
  left: 45%;
  top: 50%;
  width: 260%;
  transform: translate(-50%, -50%) rotate(-45deg);
  pointer-events: none;
}

.ribbon__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: ribbon-conveyor 96s linear infinite;
}

/* -50% -> 0 travels along the track's own +x, which after rotate(-45deg) is
   up and to the right: bottom to top, as in the original. The duration is
   recalibrated to the ticker's px/s in the page script. */
@keyframes ribbon-conveyor {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Every tile is IDENTICAL. The style spec mentions mismatched sizes, but equal
   tiles are what make the overlaps equal — with varying widths the overlap
   alternates wide/narrow and the band stops looking deliberate.

   Measured off the reference: tiles are 32% of the viewport width and 3:1, and
   each row's bottom edge is the next row's top edge. So the vertical step has to
   equal the tile height exactly:
     height        32 / 3          = 10.7cqw
     step          10.7 / sin45    = 15.1cqw
     pull-back     32 - 15.1       = 16.9cqw   → 53% overlap, same as reference
     rows in stage 50 / 10.7       = 4.7       → same rhythm as the reference */
.ribbon__tile {
  flex: none;
  width: 32cqw;
  height: 10.7cqw;
  margin-right: -16.9cqw;
  overflow: hidden;
  border-radius: var(--radius-images);   /* 4px ... */
  background: var(--color-paper-white);
}

/* Scoped to the conveyor: the mobile grid uses the same tiles and must not
   inherit this, or every tile becomes a 45deg diamond. */
.ribbon__track .ribbon__tile {
  transform: rotate(45deg);  /* cancel the track rotation: screenshots stay upright */
}

.ribbon__tile:nth-child(even) { border-radius: var(--radius-cards); } /* ... alternating with 8px */

.ribbon__tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}

@media (prefers-reduced-motion: reduce) {
  .ribbon__track { animation: none; }
}

/* ============================================================== TICKER */
.ticker {
  background: var(--color-charcoal-ink);
  color: var(--color-paper-white);
  overflow: hidden;
  padding-block: var(--spacing-20);
}

.ticker__track {
  display: flex;
  gap: var(--spacing-48);
  width: max-content;
  animation: ticker 42s linear infinite;
}

.ticker:hover .ticker__track { animation-play-state: paused; }

.ticker__item {
  font-family: var(--font-inter);
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.03em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--spacing-48);
}

.ticker__item::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ============================================================== NUMBERS */
.numbers {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--spacing-24);
  padding-block: var(--spacing-64);
  border-bottom: 1px solid color-mix(in srgb, var(--color-charcoal-ink) 12%, transparent);
}

.num { grid-column: span 3; display: flex; flex-direction: column; gap: 4px; }

.num__value {
  font-family: var(--font-inter);
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.num__label {
  font-family: var(--font-inter-tight);
  font-size: var(--text-nav);
  line-height: 1.35;
  color: var(--color-soft-ash);
  margin: 0;
  max-width: 20ch;
}

/* =============================================================== HANDOFF */
.handoff {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 var(--spacing-24);
  margin-top: var(--spacing-48);
}

.handoff__item {
  grid-column: span 6;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: var(--spacing-16);
  padding-block: var(--spacing-32);
  border-top: 1px solid color-mix(in srgb, var(--color-charcoal-ink) 14%, transparent);
}

.handoff__item:nth-child(even) { padding-left: var(--spacing-48); }

.handoff__num {
  font-family: var(--font-inter);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: var(--font-weight-semibold);
  color: color-mix(in srgb, var(--color-charcoal-ink) 22%, transparent);
  margin: 0;
}

.handoff__title {
  font-family: var(--font-inter);
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.7px;
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--spacing-8);
}

.handoff__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-graphite);
  margin: 0;
}

/* ================================================================== WORK */
/* One project = one self-contained row. A full-width header carries the index,
   title and tags; underneath, the screenshot and the facts sit on the same
   baseline and are forced to the SAME height, so there is never a ragged edge
   or a pocket of dead space. No alternation — evenness is the point. */
.case {
  display: block;
  padding-block: clamp(38px, 4.6vw, 68px);
  border-top: 1px solid color-mix(in srgb, var(--color-charcoal-ink) 12%, transparent);
}

.case__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-32);
  align-items: end;
  padding-bottom: var(--spacing-24);
}

.case__ident {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: var(--spacing-20);
  align-items: baseline;
}

.case__index {
  font-family: var(--font-inter);
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-soft-ash);
  margin: 0;
  padding-top: 0.55em;
}

.case__title {
  font-family: var(--font-inter);
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.case__sub {
  font-family: var(--font-inter-tight);
  font-size: var(--text-nav);
  line-height: 1.4;
  color: var(--color-soft-ash);
  margin: var(--spacing-8) 0 0;
}

.case__head .work-card__tags { margin-top: 0; justify-content: flex-end; }

.case__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--spacing-24);
  align-items: stretch;
}

.case__shot {
  grid-column: 1 / span 7;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-cards);
  background: var(--color-absolute-black);
  min-height: 260px;
}

.case__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 0;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) { .case__shot:hover img { transform: scale(1.02); } }

.case__facts {
  grid-column: 9 / span 4;
  display: grid;
  align-content: start;
}

/* Facts stack as labelled blocks: a narrow key column inside a ~400px column
   produced three-word lines, so the label sits above the value instead. */
.fact {
  display: block;
  padding-block: var(--spacing-16);
  border-top: 1px solid color-mix(in srgb, var(--color-charcoal-ink) 10%, transparent);
  font-size: 14px;
  line-height: 1.55;
}

.fact:first-child { border-top: 0; padding-top: 0; }

.fact__key {
  display: block;
  font-family: var(--font-inter-tight);
  font-size: 10.5px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-soft-ash);
  margin-bottom: 5px;
}

.fact__val { color: var(--color-graphite); margin: 0; }

.fact__val a {
  color: var(--color-charcoal-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--color-charcoal-ink) 35%, transparent);
}

.fact__val a:hover { text-decoration-color: var(--color-charcoal-ink); }

/* ====================================================== MORE WORK — BAND */
/* Two full-bleed rows of uniform tiles scrolling in opposite directions.
   Even gutters, no holes, no random sizing — the same device the reference
   uses for its gallery strips. */
.workband {
  margin-top: var(--spacing-48);
  display: grid;
  gap: 14px;
}

.workband__row { overflow: hidden; }

.workband__track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: band-left 78s linear infinite;
}

.workband__row--b .workband__track { animation: band-right 92s linear infinite; }

.workband:hover .workband__track { animation-play-state: paused; }

@keyframes band-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes band-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.workband__tile {
  position: relative;
  flex: none;
  display: block;
  width: 340px;
  height: 226px;
  border-radius: var(--radius-images);
  overflow: hidden;
  background: var(--color-paper-white);
}

.workband__tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 0;
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) { .workband__tile:hover img { transform: scale(1.05); } }

.workband__label {
  position: absolute;
  left: 10px; bottom: 10px;
  background: var(--color-charcoal-ink);
  color: var(--color-paper-white);
  font-family: var(--font-inter-tight);
  font-size: 12px;
  line-height: 1.4;
  padding: 4px 9px;
  border-radius: var(--radius-compactbuttons);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 220ms ease, transform 220ms ease;
}

@media (hover: hover) { .workband__tile:hover .workband__label { opacity: 1; transform: none; } }
@media (hover: none) { .workband__label { opacity: 1; transform: none; } }

/* A tile with neither a live site nor an archived copy still earns its place:
   the work exists, it just cannot be linked to any more. */
.workband__tile--nolink { cursor: default; }
.workband__tile--nolink img { filter: saturate(0.5); }
.workband__tile--nolink .workband__label {
  opacity: 1;
  transform: none;
  background: var(--color-soft-ash);
}

@media (prefers-reduced-motion: reduce) { .workband__track { animation: none; } }

/* =============================================================== STACK */
/* A board of panels, not a list. Each group is a surface with its own label and
   its tools as chips, so the section scans as a set of objects — which is what
   makes a long inventory readable. The core stack gets a full-width panel and
   larger chips: hierarchy by scale, so nothing has to be graded. */
.stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-16);
  margin-top: var(--spacing-48);
}

.stack__panel {
  background: var(--color-paper-white);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.stack__panel--core,
.stack__panel--wide { grid-column: 1 / -1; }

.stack__label {
  font-family: var(--font-inter-tight);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-soft-ash);
  margin: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.chip {
  font-family: var(--font-inter-tight);
  font-size: 14px;
  line-height: 1.2;
  font-weight: var(--font-weight-medium);
  color: var(--color-charcoal-ink);
  background: color-mix(in srgb, var(--color-studio-canvas) 62%, #fff);
  border: 1px solid color-mix(in srgb, var(--color-charcoal-ink) 10%, transparent);
  border-radius: var(--radius-compactbuttons);
  padding: 7px 12px;
  white-space: nowrap;
}

.chips--lg .chip {
  font-size: 19px;
  letter-spacing: -0.4px;
  padding: 10px 18px;
}

/* =============================================================== ABOUT */
.about-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--spacing-48) var(--spacing-24);
}

.about-grid__left { grid-column: 1 / span 6; }
.about-grid__right { grid-column: 8 / span 5; }

.about-list { display: grid; gap: 0; margin: var(--spacing-24) 0 0; padding: 0; list-style: none; }

.about-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--spacing-12);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-graphite);
  padding-block: var(--spacing-12);
  border-top: 1px solid color-mix(in srgb, var(--color-charcoal-ink) 10%, transparent);
}

.about-list li::before {
  content: "";
  width: 8px; height: 8px;
  margin-top: 8px;
  background: var(--color-charcoal-ink);
  border-radius: 2px;
}

/* ================================================================= CTA */
/* padding-bottom is 0 on purpose: it makes the grid's bottom edge the band's own
   bottom edge, so the portrait — which occupies the last row — lands exactly on
   it and the flat bottom of the crop coincides with the edge.
   
   Three named grid items rather than an image nested in the left column, because
   the nested version breaks the moment the columns stack: the contact block drops
   below the left column and the portrait ends up floating 300px above the edge.
   As its own row it stays on the edge at every width. */
.cta-band {
  position: relative;
  background: var(--color-charcoal-ink);
  color: var(--color-paper-white);
  padding-block: clamp(64px, 9vw, 140px) 0;
  overflow: hidden;
}

.cta-band .section-heading { color: var(--color-paper-white); }

.cta-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: var(--spacing-32) var(--spacing-24);
}

.cta-grid__left { grid-column: 1 / span 7; grid-row: 1; }

/* Spans both rows and centres against their combined height — the heading plus
   the portrait, which is what was asked for. */
.cta-grid__right {
  grid-column: 8 / span 5;
  grid-row: 1 / span 2;
  align-self: center;
}

/* Cut out of its backdrop (see _tools/prepare_portrait.py). Centred across the
   same seven columns as the heading, and pinned to the bottom of the grid. */
.cta-cutout {
  grid-column: 1 / span 7;
  grid-row: 2;
  justify-self: center;
  align-self: end;
  height: clamp(150px, 19vw, 290px);
  width: auto;
  display: block;
  pointer-events: none;
}

.cta-lines { display: grid; gap: var(--spacing-8); margin: var(--spacing-24) 0 0; }
.cta-line { font-family: var(--font-inter-tight); font-size: 19px; line-height: 1.5; color: #f7f7f7; }
.cta-line a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ==================================================== PROTOTYPES (apps) */
/* Self-initiated work, deliberately separated from client work: a compact
   index strip that jump-links, then ONE FULL-WIDTH ROW PER APP. Full width is
   the point — a 1440px dashboard squeezed into a three-up grid drops below its
   native text size and stops being readable. Each frame carries minimal browser
   chrome and reveals the rest of the page on hover or keyboard focus. */

.proto-index {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: var(--spacing-32);
}

.proto-index__item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  background: var(--color-paper-white);
  border: 1px solid color-mix(in srgb, var(--color-charcoal-ink) 9%, transparent);
  border-radius: var(--radius-cards);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease;
}

.proto-index__item:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--color-charcoal-ink) 30%, transparent);
}

.proto-index__n {
  font-family: var(--font-inter);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-soft-ash);
}

.proto-index__name {
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.4px;
}

.proto-index__cat {
  font-family: var(--font-inter-tight);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--color-soft-ash);
}

.proto-list {
  margin-top: var(--spacing-64);
  display: grid;
  gap: clamp(48px, 6vw, 96px);
}

.proto__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-24);
  align-items: end;
  padding-bottom: var(--spacing-20);
}

.proto__ident {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: var(--spacing-20);
  align-items: baseline;
}

.proto__index {
  font-family: var(--font-inter);
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-soft-ash);
  margin: 0;
  padding-top: 0.5em;
}

.proto__name {
  font-family: var(--font-inter);
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.proto__cat {
  font-family: var(--font-inter-tight);
  font-size: var(--text-nav);
  line-height: 1.4;
  color: var(--color-soft-ash);
  margin: var(--spacing-8) 0 0;
}

.proto__frame {
  position: relative;
  display: block;
  border-radius: var(--radius-cards);
  border: 1px solid color-mix(in srgb, var(--color-charcoal-ink) 12%, transparent);
  background: var(--color-paper-white);
  overflow: hidden;
}

/* The frame wraps a <span>, so these must be told to behave as blocks —
   otherwise aspect-ratio is ignored and the full-height screenshot expands the
   page instead of being cropped by the frame. */
.proto__chrome { display: flex; align-items: center; gap: 4px; padding: 10px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-charcoal-ink) 8%, transparent);
  background: color-mix(in srgb, var(--color-studio-canvas) 55%, #fff); }

.proto__dots { display: flex; gap: 5px; }
.proto__dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-charcoal-ink) 18%, transparent);
  display: block;
}

.proto__url {
  margin-left: 12px;
  font-family: var(--font-inter-tight);
  font-size: 12px;
  color: var(--color-soft-ash);
}

.proto__viewport {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--color-paper-white);
}

.proto__viewport img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  transform: translateY(0);
  transition: transform 2600ms cubic-bezier(0.22, 0.75, 0.25, 1);
}

@media (hover: hover) {
  .proto__frame:hover .proto__viewport img,
  .proto__frame:focus-visible .proto__viewport img {
    transform: translateY(var(--scroll, 0px));
    transition-delay: 180ms;   /* riding past should not trigger it */
  }
}

@media (prefers-reduced-motion: reduce) {
  .proto__viewport img { transition: none; }
  .proto__frame:hover .proto__viewport img { transform: none; }
}

.proto__hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: var(--color-charcoal-ink);
  color: var(--color-paper-white);
  font-family: var(--font-inter-tight);
  font-size: 12px;
  line-height: 1.4;
  padding: 6px 12px;
  border-radius: var(--radius-compactbuttons);
  transition: opacity 240ms ease;
}

@media (hover: hover) { .proto__frame:hover .proto__hint { opacity: 0; } }

.proto__meta {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--spacing-24);
  margin-top: var(--spacing-24);
}

.proto__blurb {
  grid-column: 1 / span 6;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--color-graphite);
  margin: 0;
}

.proto__facts { grid-column: 8 / span 5; margin: 0; display: grid; gap: 0; }

.proto__facts > div {
  padding-block: var(--spacing-12);
  border-top: 1px solid color-mix(in srgb, var(--color-charcoal-ink) 10%, transparent);
}

.proto__facts > div:first-child { border-top: 0; padding-top: 0; }

.proto__facts dt {
  font-family: var(--font-inter-tight);
  font-size: 10.5px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-soft-ash);
  margin-bottom: 5px;
}

.proto__facts dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-graphite); }

/* ============================================================= SECTION */
.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--spacing-24);
  align-items: end;
}

.section-head__title { grid-column: 1 / span 8; }
.section-head__aside { grid-column: 9 / span 4; }

/* =========================================================== RESPONSIVE */
@media (max-width: 1080px) {
  .num { grid-column: span 6; }
  .num:nth-child(3), .num:nth-child(4) { margin-top: var(--spacing-24); }

  .handoff__item,
  .handoff__item:nth-child(even) { grid-column: span 12; padding-left: 0; }

  .case__head { grid-template-columns: 1fr; gap: var(--spacing-16); align-items: start; }
  .case__head .work-card__tags { justify-content: flex-start; max-width: none; }
  .case__body { grid-template-columns: 1fr; gap: var(--spacing-20); }
  .case__shot { grid-column: 1 / -1; aspect-ratio: 16 / 10; min-height: 0; }
  .case__facts { grid-column: 1 / -1; }

  .about-grid__left, .about-grid__right { grid-column: 1 / -1; }
  /* Stacked: heading, then contacts, then the portrait last so it still lands on
     the band's bottom edge. The two-row desktop grid would otherwise leave the
     portrait sitting above the contact block. */
  .cta-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .cta-grid__left, .cta-grid__right, .cta-cutout {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .cta-grid__right { align-self: auto; }
  .cta-cutout { justify-self: center; align-self: end; }
  .section-head__title, .section-head__aside { grid-column: 1 / -1; }

  .proto-index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proto__head { grid-template-columns: 1fr; gap: var(--spacing-16); align-items: start; }
  .proto__meta { grid-template-columns: 1fr; }
  .proto__blurb, .proto__facts { grid-column: 1 / -1; }
}

/* Below 900px the fixed stage would squeeze the type and the tiles, so the hero
   unstacks: normal flow for the text, and the same tiles as a plain grid. */
@media (max-width: 900px) {
  .hero__stage { aspect-ratio: auto; overflow: visible; container-type: normal; }
  .hero__ribbon { display: none; }

  .hero__type, .hero__copy { position: static; width: auto; }
  .hero__type { margin-bottom: var(--spacing-32); }
  .hero__type .eyebrow { font-size: 11px; }
  .hero__type h1 { font-size: clamp(34px, 9vw, 62px); max-width: 15ch; }

  .hero__copy { gap: var(--spacing-16); }
  .hero__copy .lede { font-size: 16px; line-height: 1.55; max-width: 52ch; }
  .hero__copy .avail { font-size: 13px; padding: 6px 12px; }
  .hero__copy .btn { font-size: 14px; padding: 11px 18px; }

  .hero__mobile { display: block; margin-top: var(--spacing-40); }
  .ribbon__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ribbon__grid .ribbon__tile {
    position: static; width: auto; height: auto; margin-right: 0; transform: none;
    aspect-ratio: 16 / 10; border-radius: var(--radius-cards);
  }
  .ribbon__grid .ribbon__tile:first-child { grid-column: 1 / -1; }

  .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .hero { padding-block: var(--spacing-24) 0; }
  /* the stage is full-bleed, so it needs its own gutter once it unstacks */
  .hero__stage { padding-inline: var(--spacing-24); }
  .ribbon__grid { grid-template-columns: 1fr; }
  .ribbon__grid .ribbon__tile { aspect-ratio: 16 / 9; }

  .stack { grid-template-columns: 1fr; }

  .handoff__item { grid-template-columns: 44px minmax(0, 1fr); }
  .handoff__num { font-size: 24px; }
  .case__ident { grid-template-columns: 32px minmax(0, 1fr); gap: var(--spacing-12); }
  .case__index { font-size: 13px; padding-top: 0.4em; }

  .proto-index { grid-template-columns: 1fr; }
  .proto__ident { grid-template-columns: 32px minmax(0, 1fr); gap: var(--spacing-12); }
  .proto__index { font-size: 13px; padding-top: 0.4em; }
  .proto__viewport { aspect-ratio: 4 / 3; }
  .proto__chrome { padding: 8px 10px; }
  .proto__url { font-size: 11px; }
  .workband__tile { width: 230px; height: 154px; }
}