/* ==========================================================================
   Sections — the larger blocks pages are assembled from.
   Hero · statement · film reel · journey · testimonials · call to action ·
   footer, then the 22 Oct revision: opening · proof · big film strip · the
   deep · inner page heads · case study · contact.
   (Statement and testimonials are only used by preview/home-v1.html now.)
   ========================================================================== */

/* --- Hero: footage behind the page's opening line ------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: end;
  min-height: min(100svh, 64rem);
  padding-top: 7rem;
  padding-bottom: clamp(1.5rem, 3vw, 3rem);
}

/* The footage emerges out of the Tide a moment after the page opens */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  container-type: size;
  animation: hero-emerge 1000ms var(--ease-out) 100ms both;
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* While the film is on its way the still stays hidden; the film fades up
   out of the dark (hero.js). The still shows only if the film cannot play. */
.hero__media > img {
  transition: opacity 1200ms ease;
}
.film-pending .hero__media > img {
  opacity: 0;
}
/* Darkens the footage where the words sit: left side and bottom edge */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--ink) 0%, rgb(3 11 25 / 0.72) 28%, rgb(3 11 25 / 0.2) 62%, rgb(3 11 25 / 0.5) 100%),
    linear-gradient(to right, rgb(3 11 25 / 0.55) 0%, rgb(3 11 25 / 0) 70%);
}
/* A hosted player standing in for the loop: sized to cover, like the still */
.hero__media iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 177.78cqh);
  height: max(100cqh, 56.25cqw);
  border: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 1200ms ease;
}
.hero__media iframe.is-playing {
  opacity: 1;
}
/* The YouTube reel (2 Nov, draft): a little larger than the frame, still
   16:9, so YouTube's title along the top and its logo in the corner fall
   outside it */
.hero__media:has(iframe.is-youtube) {
  overflow: hidden;
}
.hero__media iframe.is-youtube {
  width: max(100cqw + 14.22rem, 177.78cqh + 14.22rem);
  height: max(56.25cqw + 8rem, 100cqh + 8rem);
  pointer-events: none;
}
/* Hidden at once, so YouTube's play button never shows through a fade */
.hero__media iframe.is-youtube:not(.is-playing) {
  transition-duration: 0ms;
}
/* The uploaded clip (WordPress, hero.js): over the still, faded in once playing */
.hero__media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1200ms ease;
}
.hero__media video.is-playing {
  opacity: 1;
}

.hero__grid {
  row-gap: 0;
}
.hero__kicker {
  grid-column: 1 / -1;
  font-size: clamp(0.8125rem, 0.7rem + 0.35vw, 1rem); /* 2 Nov: a step larger than other labels, so it reads (Jeremy) */
}
.hero__title {
  grid-column: 1 / -1;
  margin-top: var(--space-4);
  margin-left: -0.08em; /* the big capital R has a wide left margin of its own; this lines its stem up with the words above and below */
  font-size: min(var(--display-xl), 23svh); /* never taller than a short laptop screen allows */
}
/* Supporting text sits directly under the headline (28 Oct: Jeremy) */
.hero__side {
  grid-column: 1 / span 7;
  grid-row: 3;
  margin-top: var(--space-5);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-6);
  margin-top: var(--space-6);
}
.hero__facts {
  grid-column: 1 / -1;
  grid-row: 4;
  margin-top: var(--space-7);
}

@keyframes hero-emerge {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 56rem) {
  .hero__side {
    grid-column: 1 / -1;
  }
  .hero__facts {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: var(--space-7);
  }
}

/* --- Statement: one big line, supporting text to the side ---------------- */

.statement__line {
  grid-column: 1 / span 10;
}
.statement__body {
  grid-column: 7 / -1;
  margin-top: var(--space-8);
}
.statement__label {
  grid-column: 1 / span 4;
  margin-top: var(--space-8);
}

@media (max-width: 56rem) {
  .statement__line,
  .statement__body,
  .statement__label {
    grid-column: 1 / -1;
  }
  .statement__label {
    grid-row: 1;
    margin: 0 0 var(--space-5);
  }
  .statement__body {
    margin-top: var(--space-6);
  }
}

/* --- Film reel -----------------------------------------------------------
   A strip of films. On phones and for reduced motion it is swiped sideways.
   On desktop, ../js/reel.js pins it and scrolling down moves it across. */

.reel__pin {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* the strip may be wider than the page; the page must not be */
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: var(--space-6);
  padding-block: clamp(4rem, 9vw, 7rem) clamp(2.5rem, 5vw, 4rem);
}

.reel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}
.reel__head .link-arrow {
  flex: none;
}

.reel__track {
  --reel-h: 60vw;
  display: flex;
  align-items: flex-start;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.reel__track::-webkit-scrollbar {
  display: none;
}

.reel__card {
  flex: none;
  scroll-snap-align: start;
}

/* Each still keeps its own shape: wide, cinema-wide or upright */
.reel__frame {
  position: relative;
  display: block;
  overflow: hidden;
  height: var(--reel-h);
  aspect-ratio: min(var(--ratio, 1.78), 1.35);
  background: var(--navy);
}
.reel__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease-out);
}
.reel__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(3 11 25 / 0.55) 0%, rgb(3 11 25 / 0) 45%);
}
.reel__frame:hover img,
.reel__frame:focus-visible img {
  transform: scale(1.04);
}

.reel__text {
  display: grid;
  gap: var(--space-3);
  width: 0;
  min-width: 100%; /* never wider than its still */
  margin-top: var(--space-5);
}
.reel__blurb {
  max-width: 30em;
}

/* Upright stills carry their text beside them, not below */
.reel__card--tall {
  display: flex;
  align-items: flex-end;
  gap: var(--space-5);
}
.reel__card--tall .reel__frame {
  aspect-ratio: var(--ratio);
}
.reel__card--tall .reel__text {
  width: min(20rem, 48vw);
  min-width: 0;
  margin-top: 0;
}

.reel__foot {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.reel__bar {
  flex: 1;
  height: 1px;
  background: var(--line);
}
.reel__bar span {
  display: block;
  height: 100%;
  margin-top: -1px;
  border-top: 3px solid var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

/* Desktop, set by reel.js: pinned, and driven by scrolling */
.reel--driven .reel__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  padding-block: 3.5rem 2rem;
}
.reel--driven .reel__track {
  --reel-h: min(46svh, 30rem);
  align-items: center;
  overflow: visible;
  scroll-snap-type: none;
  will-change: transform;
}
.reel--driven .reel__frame {
  aspect-ratio: var(--ratio, 1.78);
}
.reel--driven .reel__card--tall .reel__text {
  width: 22rem;
}

/* --- Journey: the steps from kickoff to delivery ------------------------- */

.journey__rail {
  grid-column: 1 / span 4;
  align-self: start;
  position: sticky;
  top: var(--space-8);
}
.journey__rail .display {
  margin-top: var(--space-3);
}
.journey__rail .lede {
  margin-top: var(--space-5);
  font-size: var(--text-m);
  line-height: 1.5;
}
.journey__rail .link-arrow {
  margin-top: var(--space-6);
}

.journey__steps {
  grid-column: 6 / -1;
}
.journey__step {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: var(--col-gap);
  row-gap: var(--space-3);
  padding-block: var(--space-6) var(--space-7);
  border-top: 1px solid var(--line);
}
.journey__step:last-child {
  border-bottom: 1px solid var(--line);
}
.journey__num {
  padding-top: 0.5em;
}
.journey__step > :not(.journey__num) {
  grid-column: 2;
}
.journey__step .slate-line {
  margin-top: var(--space-3);
  color: var(--fg-muted);
}

/* Steps rise into place as they are scrolled to (newer browsers only) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .journey__step {
      animation: step-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}
@keyframes step-rise {
  from { opacity: 0.15; transform: translate3d(0, 2.5rem, 0); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 56rem) {
  .journey__rail {
    grid-column: 1 / -1;
    position: static;
    margin-bottom: var(--space-7);
  }
  .journey__steps {
    grid-column: 1 / -1;
  }
  .journey__step {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }
}

/* --- Testimonials: upright videos that load only when clicked ------------ */

.voices__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--space-4);
  align-items: end;
  margin-bottom: var(--space-8);
}
.voices__head .display {
  grid-column: 1 / span 6;
}
.voices__head .lede {
  grid-column: 8 / -1;
  font-size: var(--text-m);
  line-height: 1.5;
}

.voices__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
}
/* Staggered, so it reads as a wall of people rather than a grid of cards */
.voices__grid > :nth-child(2) { margin-top: var(--space-8); }
.voices__grid > :nth-child(3) { margin-top: var(--space-5); }
.voices__grid > :nth-child(4) { margin-top: var(--space-9); }

.vfacade,
.video-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--navy);
}
.vfacade {
  padding: 0;
  border: 0;
  cursor: pointer;
}
.vfacade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease-out);
}
.vfacade:hover img,
.vfacade:focus-visible img {
  transform: scale(1.04);
}
.vfacade .film__play {
  top: auto;
  right: auto;
  left: clamp(0.75rem, 1.6vw, 1.25rem);
  bottom: clamp(0.75rem, 1.6vw, 1.25rem);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 56rem) {
  .voices__head .display,
  .voices__head .lede {
    grid-column: 1 / -1;
  }
  .voices__head {
    margin-bottom: var(--space-6);
  }
  .voices__grid {
    display: flex;
    gap: var(--space-4);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .voices__grid::-webkit-scrollbar {
    display: none;
  }
  .voices__grid > * {
    flex: none;
    width: 62vw;
    margin-top: 0 !important;
    scroll-snap-align: start;
  }
}

/* --- Call to action ------------------------------------------------------ */

.cta__line {
  grid-column: 1 / -1;
}
.cta__body {
  grid-column: 7 / -1;
  margin-top: var(--space-7);
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-6);
  margin-top: var(--space-6);
}

@media (max-width: 56rem) {
  .cta__body {
    grid-column: 1 / -1;
    margin-top: var(--space-6);
  }
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  padding-top: var(--space-9);
  padding-bottom: var(--space-6);
  overflow: hidden;
}
.site-footer__cols {
  row-gap: var(--space-7);
}
.site-footer__col {
  grid-column: span 3;
  display: grid;
  align-content: start;
  gap: var(--space-3);
}
.site-footer__col:first-child {
  grid-column: span 5;
}
.site-footer__col:last-child {
  grid-column: span 4;
}
.site-footer__col a {
  text-decoration: none;
}
.site-footer__col a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.site-footer__big {
  font-size: var(--text-l);
  line-height: 1.3;
}
.site-footer__links {
  display: grid;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

/* The name, outlined, as wide as the page */
.site-footer__mark {
  margin-top: var(--space-9);
  font-family: var(--font-display);
  font-size: 15.4vw;
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgb(251 250 246 / 0.45);
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

@media (max-width: 56rem) {
  .site-footer__col,
  .site-footer__col:first-child,
  .site-footer__col:last-child {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   22 Oct revision
   ========================================================================== */

/* --- Opening: the logo swims in, the film plays clean, and the words come
   up over it as you scroll (site.js sets --reveal and .is-live) ---------- */

.opening {
  --reveal: 1;
  position: relative;
}
.opening.is-live {
  height: 175svh; /* the extra height is the scroll that brings the words in */
}
.opening__stick {
  position: sticky;
  top: 0;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: end;
  min-height: 100svh;
  padding-top: 7rem;
  padding-bottom: clamp(1.5rem, 3vw, 3rem);
}
/* While the words are away, the film is barely darkened */
.opening .hero__media::after {
  opacity: calc(0.3 + var(--reveal) * 0.7);
}
.opening__words {
  opacity: calc(var(--reveal) * (1 - var(--exit, 0)));
  transform: translate3d(0, calc((1 - var(--reveal)) * 4rem), 0);
}
.opening.is-clear .opening__words {
  pointer-events: none;
}
.opening__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  transform: translateX(-50%);
  opacity: calc(1 - var(--reveal) * 3);
  color: var(--foam);
}
.opening__cue::after {
  content: "";
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(var(--aqua), transparent);
  transform-origin: top;
  animation: cue 2.2s var(--ease-out) infinite;
}
@keyframes cue {
  0% { transform: scaleY(0); opacity: 1; }
  70% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
.opening:not(.is-live) .opening__cue {
  display: none;
}

/* --- Proof: the numbers, what people say, and the way into the case studies */

.proof__label {
  margin-bottom: var(--space-6);
}
.proof .stats dd {
  --delay: calc(var(--n, 0) * 140ms);
}
.reviews {
  margin-top: var(--space-9);
}
.carousel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}
.carousel__head .lede {
  margin-top: var(--space-3);
}
.carousel__nav {
  display: flex;
  flex: none;
  gap: var(--space-3);
}
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(100%, 38rem);
  column-gap: var(--col-gap);
  margin-top: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar {
  display: none;
}
.carousel__track > * {
  scroll-snap-align: start;
}
.review {
  min-height: 14rem;
}
/* Written quotes in the reviews carousel (2 Nov) */
.review.quote {
  display: grid;
  align-content: start;
  gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.review.quote blockquote {
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.3;
}
.review.quote blockquote::before {
  content: "\201C";
}
.review.quote blockquote::after {
  content: "\201D";
}
.review.quote figcaption {
  margin-top: 0;
}
.review.quote--long blockquote {
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); /* a longer quote, a step smaller */
}
/* The same long quote on a campaign page (3 Nov): larger, but not poster size */
.quote--long:not(.review) blockquote {
  max-width: 30em;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2.25rem);
  line-height: 1.25;
  text-wrap: pretty;
}
.quote--long:not(.review) blockquote::before {
  content: "\201C";
}
.quote--long:not(.review) blockquote::after {
  content: "\201D";
}
.proof__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-7);
  margin-top: var(--space-8);
}

/* --- Big film strip: each film nearly fills the screen; its words sit
   faintly on the footage, bottom left, and come up when you hover there ---- */

.reel--big .reel__card {
  width: min(86vw, 84rem);
}
.reel--big .reel__frame {
  height: auto;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.reel--driven.reel--big .reel__card {
  width: min(80vw, calc((100svh - 13rem) * 16 / 9));
}
.reel--driven.reel--big .reel__frame {
  aspect-ratio: 16 / 9;
}
.reel--big .reel__frame img {
  filter: sepia(0.12) saturate(0.88) contrast(1.03); /* a little faded, like film */
}
.reel--big .reel__frame::after {
  background: linear-gradient(to top, rgb(3 11 25 / 0.8) 0%, rgb(3 11 25 / 0.25) 38%, rgb(3 11 25 / 0) 60%);
  opacity: 0.55;
  transition: opacity var(--dur-2) var(--ease-out);
}
.reel--big .reel__text {
  position: absolute;
  left: clamp(1rem, 3vw, 2.75rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  z-index: 2;
  width: min(34rem, 75%);
  min-width: 0;
  margin: 0;
  opacity: 0.4;
  transition: opacity var(--dur-2) var(--ease-out);
}
.reel--big .reel__text .display {
  font-size: var(--display-l);
}
.reel--big .reel__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-2);
}
.reel--big .film__play {
  border: 0;
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.reel--big .film__play:hover {
  background: var(--ink);
}
/* Hover the words (or tab to them) and they turn solid */
.reel--big .reel__text:hover,
.reel--big .reel__text:focus-within {
  opacity: 1;
}
.reel--big .reel__frame:has(.reel__text:hover)::after,
.reel--big .reel__frame:has(.reel__text:focus-within)::after {
  opacity: 1;
}
/* Touch screens have no hover, so the words simply stay readable */
@media (hover: none) {
  .reel--big .reel__text { opacity: 1; }
  .reel--big .reel__frame::after { opacity: 1; }
}
/* Phones: the words move under the footage, where there is room for them */
@media (max-width: 40rem) {
  .reel--big .reel__frame {
    overflow: visible;
    aspect-ratio: auto;
    background: none;
  }
  .reel--big .reel__frame img {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .reel--big .reel__frame::after {
    display: none;
  }
  .reel--big .reel__text {
    position: static;
    width: auto;
    margin-top: var(--space-4);
    opacity: 1;
  }
  .reel--big .reel__text .display {
    font-size: var(--display-m);
  }
}
.reel__after {
  display: flex;
  justify-content: flex-end;
  padding-block: 0 var(--space-8);
}

/* --- The deep: the bottom of every page, darkest of all ------------------ */

.deep {
  padding-block: var(--section) 0;
}
.deep__line {
  grid-column: 1 / -1;
}
.deep__body {
  grid-column: 1 / span 7;
  margin-top: var(--space-5);
}
.deep__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-6);
  margin-top: var(--space-6);
}
@media (max-width: 56rem) {
  .deep__body {
    grid-column: 1 / -1;
    margin-top: var(--space-6);
  }
}
.site-footer__col .socials {
  margin-top: var(--space-2);
}

/* --- Inner pages: the opening of Films, Case study, About and Contact ------ */

.page-head {
  padding-top: calc(var(--gutter) * 2 + clamp(5.5rem, 9vw, 8rem)); /* clears the header */
  padding-bottom: var(--space-8);
}
.page-head .display {
  margin-top: var(--space-4);
}
.page-head__side {
  grid-column: 1 / span 8;
  margin-top: var(--space-5);
}
.page-head__side .slate-line {
  margin-top: var(--space-5);
}
.page-head .display,
.page-head > .wrap > .label {
  grid-column: 1 / -1;
}
@media (max-width: 56rem) {
  .page-head__side {
    grid-column: 1 / -1;
  }
}

/* A block: its heading, then its content directly underneath */
.split {
  row-gap: var(--space-4);
}
.split__rail {
  grid-column: 1 / -1;
}
.split__body {
  grid-column: 1 / span 9;
}
.split + .split,
.split + .quote,
.quote + .split {
  margin-top: var(--space-9);
}
@media (max-width: 56rem) {
  .split__rail,
  .split__body {
    grid-column: 1 / -1;
  }
}

/* Two things side by side, unevenly */
.pair {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-7) var(--col-gap);
  align-items: start;
}
@media (max-width: 56rem) {
  .pair {
    grid-template-columns: 1fr;
  }
}

/* Films page: one film after another */
.film-list {
  display: grid;
  gap: var(--space-10);
}
.film-list .film {
  scroll-margin-top: 2rem;
}
.film-list .film__frame img {
  filter: sepia(0.12) saturate(0.88) contrast(1.03);
}
.film-list .film__play {
  border: 0;
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Case study and About: photo prints, scattered a little */
.prints {
  display: grid;
  grid-template-columns: 5fr 4fr 3fr;
  gap: var(--space-7) var(--col-gap);
  align-items: start;
}
.prints > :nth-child(2) { --tilt: 1deg; margin-top: var(--space-8); }
.prints > :nth-child(3) { --tilt: -1.4deg; margin-top: var(--space-5); }
@media (max-width: 40rem) {
  .prints {
    grid-template-columns: 1fr;
  }
  .prints > * { margin-top: 0 !important; }
}

.result-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.result-list li {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

/* Contact: reach us directly on the left, the optional questions on the right */
.contact__direct {
  display: grid;
  align-content: start;
  gap: var(--space-5);
}
.contact__direct .display a {
  text-decoration: none;
}

/* Two numbers inside a column, smaller than the homepage's */
.stats--two {
  grid-template-columns: 1fr 1fr;
}
.stats--two dd {
  font-size: var(--display-l);
}
@media (max-width: 40rem) {
  .stats--two { grid-template-columns: 1fr; }
}

/* Before and after (Truth Belt, 2 Nov): the old number muted, the new one in
   aqua */
.stats--change {
  row-gap: var(--space-7);
}
.stats--change dd {
  font-size: var(--display-m);
  white-space: nowrap;
}
.stats--change .was {
  color: var(--fg-muted);
}
.stats--change .to {
  font-family: var(--font-text);
  font-size: 0.6em;
  vertical-align: 0.15em;
  color: var(--fg-muted);
}
@media (max-width: 40rem) {
  .stats--change dd { font-size: clamp(1.75rem, 9vw, 2.5rem); }
}

/* Numbered steps, side by side under a top rule (Truth Belt, 2 Nov) */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--col-gap);
  margin-top: var(--space-6);
}
.steps--four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.steps li {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.steps .display--s {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); /* below the section headings */
}
.steps p {
  color: var(--fg-muted);
}
@media (max-width: 40rem) {
  .steps,
  .steps--four { grid-template-columns: 1fr; }
}

/* --- Surviving Panama case study (3 Nov) -------------------------------- */

/* Five numbers, three across (two on tablets, one on phones) */
.stats--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: var(--space-7);
}
.stats--three dd {
  font-size: var(--display-m);
}
@media (max-width: 56rem) {
  .stats--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .stats--three { grid-template-columns: 1fr; row-gap: var(--space-5); }
}
.source-note {
  margin-top: var(--space-6);
}

/* Facts in rows: the name on the left, the figure on the right */
.ledger {
  display: grid;
  max-width: 40rem;
  margin: var(--space-7) 0 0;
}
.ledger div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-3);
  border-top: 1px solid var(--line);
}
.ledger dt {
  color: var(--fg-muted);
}
.ledger dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-align: right;
}

/* Simple bar charts: each bar measured against the group's largest
   (--max), the ones that matter most in aqua */
.charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-7) var(--col-gap);
  margin-top: var(--space-6);
}
.bars {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.bars__title {
  font-family: var(--font-display);
  font-size: var(--text-m);
  font-weight: 700;
}
.bars__list {
  display: grid;
  gap: var(--space-4);
}
/* The name and its figure on one line, the bar under them */
.bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name value" "track track";
  align-items: baseline;
  gap: 0.375rem var(--space-3);
  font-size: var(--text-s);
  line-height: 1.3;
}
.bar__name { grid-area: name; }
.bar__value { grid-area: value; }
.bar__track { grid-area: track; }
.bar__track {
  height: 0.375rem;
  border-radius: 1rem;
  background: rgb(251 250 246 / 0.1);
  overflow: hidden;
}
.bar__track span {
  display: block;
  width: calc(var(--v) / var(--max) * 100%);
  min-width: 2px;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}
.bar.is-key .bar__track span {
  background: var(--aqua);
}
.bar.is-key .bar__name,
.bar.is-key .bar__value {
  color: var(--foam);
  font-weight: 700;
}
.bar__value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bars__note {
  font-size: var(--text-s);
  color: var(--fg-muted);
}
.learned--one {
  grid-template-columns: minmax(0, 1fr);
  max-width: 46rem;
}

.learned {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--col-gap);
  margin-top: var(--space-8);
}
.learned__item {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}
.learned__item > p:last-child {
  color: var(--fg-muted);
}
@media (max-width: 56rem) {
  .learned { grid-template-columns: 1fr; }
}

/* --- Our credibility: festival laurels and brand logos (29 Oct; renamed
   and filled 2 Nov: Jeremy) --------------------------------------------
   Logos sit on the dark ground with no box. A tile still waiting for a logo
   keeps a dashed, labelled slot. */

.brands {
  margin-top: var(--space-9);
}
.brands__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
}
/* 2 Nov (Jeremy): smaller, with more room between them; six logos, in two
   rows of three */
.brands__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7) clamp(2.5rem, 7vw, 7rem);
  max-width: 62rem;
  margin-top: var(--space-7);
}
.brand {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr); /* one cell the size of the box */
  place-items: center;
  height: clamp(5rem, 9vw, 8rem);
  transition: transform var(--dur-2) var(--ease-out);
}
.brand:not(:has(img)) {
  border: 1px dashed var(--line);
}
.brand img {
  width: 100%;
  height: 100%; /* each logo fits inside its box, whatever its own shape */
  object-fit: contain;
  opacity: 0.9;
  transition: opacity var(--dur-1) ease;
}
/* The laurels have wide empty margins of their own */
.brand--laurel {
  padding: 0;
}
.brand--laurel img {
  transform: scale(1.25);
}
/* A black logo shown white on the dark ground */
.brand__white {
  filter: brightness(0) invert(1);
}
.brand:hover {
  transform: scale(1.06);
}
.brand:hover img {
  opacity: 1;
}
@media (max-width: 56rem) {
  .brands__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .brands__row {
    max-width: 22rem;
  }
}
/* 2 Nov, fifth round (Jeremy): the logos in one line you can move along with
   the arrows or a swipe, like the reviews */
.brands .brands__track {
  grid-auto-columns: clamp(7rem, 14vw, 11rem);
  column-gap: clamp(2rem, 5vw, 5rem);
  padding-block: var(--space-4); /* room for the laurels, drawn a little larger than their box */
}

/* --- Films page: the screening room, a cinematic carousel (29 Oct) -------
   The chosen film sits large in the middle; the others wait at either side,
   smaller and dimmed. ../js/screening.js moves it (sets --at). */

.screening {
  --w: min(64vw, 60rem);
  --gap: clamp(1rem, 3vw, 2.5rem);
  padding-bottom: var(--section);
}
.screening__viewport {
  container-type: inline-size;
  overflow: hidden;
  padding-block: var(--space-3);
}
.screening__track {
  touch-action: pan-y; /* sideways swipes move the carousel; up and down still scroll */
  user-select: none;
  display: flex;
  gap: var(--gap);
  width: max-content;
  cursor: grab;
  will-change: transform; /* screening.js moves it, frame by frame */
}
.screening.is-dragging .screening__track {
  cursor: grabbing;
}
.screening__slide {
  flex: none;
  width: var(--w);
  transform-origin: 50% 30%;
  will-change: transform, opacity;
}
.screening__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--navy);
}
.screening__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.12) saturate(0.88) contrast(1.03);
}
.screening .film__play {
  border: 0;
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--dur-2) var(--ease-out);
}
.screening .film__play {
  opacity: var(--near, 1);
}
.screening__caption {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  max-width: 40rem;
  margin-top: var(--space-5);
  opacity: var(--near, 1);
}
.screening__caption p:not(.label) {
  color: var(--fg-muted);
}
.screening__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
@media (max-width: 40rem) {
  .screening {
    --w: 84vw;
  }
}

/* --- Campaigns: cards you pick from, each leading to its results ----------
   (29 Oct: Jeremy wanted Campaigns to look clearly different from Films, with
   thumbnails that obviously invite a click.) */

.campaign-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--col-gap);
}
.campaign-card {
  display: grid;
  height: 100%;
  border: 1px solid var(--line);
  background: rgb(3 11 25 / 0.35);
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.campaign-card__thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--navy);
}
.campaign-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.12) saturate(0.88) contrast(1.03);
  transition: transform var(--dur-3) var(--ease-out);
}
/* The invitation: a solid button that rises in on hover (always shown on touch) */
.campaign-card__go {
  position: absolute;
  right: var(--space-5);
  top: var(--space-5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  padding: 0.75em 1.1em 0.7em;
  border-radius: 2px;
  background: var(--aqua);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--ui-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate3d(0, 0.75rem, 0);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.campaign-card__go::after {
  content: "";
  width: 1.5em;
  height: 0.6em;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
}
.campaign-card__body {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-5) var(--space-5) var(--space-6);
}
.campaign-card__body p {
  color: var(--fg-muted);
}
.campaign-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-7);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.campaign-card__stats div {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-1);
}
.campaign-card__stats dt {
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.campaign-card__stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--display-s);
  line-height: 1;
  color: var(--accent);
}
.campaign-card:hover,
.campaign-card:focus-visible {
  transform: translate3d(0, -4px, 0);
  border-color: var(--aqua);
  background: rgb(3 11 25 / 0.55);
}
.campaign-card:hover .campaign-card__thumb img,
.campaign-card:focus-visible .campaign-card__thumb img {
  transform: scale(1.05);
}
.campaign-card:hover .campaign-card__go,
.campaign-card:focus-visible .campaign-card__go {
  opacity: 1;
  transform: none;
}
@media (hover: none) {
  .campaign-card__go {
    opacity: 1;
    transform: none;
  }
}
.campaign-card--empty {
  min-height: 18rem;
  background: none;
}
@media (max-width: 40rem) {
  .campaign-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Back to the surface (top of the page) -------------------------------- */

/* 2 Nov (Jeremy): a clear button, not a small label */
.site-footer__legal {
  align-items: center;
}
.to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.95em 1.4em 0.9em;
  border: 1px solid var(--accent);
  border-radius: 2px;
  font-size: var(--ui-size);
  letter-spacing: 0.08em;
  color: var(--fg);
  text-decoration: none;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.to-top .accent {
  font-size: 1.3em;
  line-height: 0.8;
  transition: transform var(--dur-2) var(--ease-out);
}
.to-top:hover,
.to-top:focus-visible {
  background: var(--accent);
  color: var(--ink);
}
.to-top:hover .accent,
.to-top:focus-visible .accent {
  color: var(--ink);
  transform: translateY(-0.2em);
}

/* --- About (28 Oct, after One Forty's About page) ------------------------- */

/* Opens on film, full width */
.about-film {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: clamp(18rem, 56vw, 82svh);
}
/* The film fades into the water below it, with no hard edge */
.about-film .hero__media {
  -webkit-mask: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.about-film .hero__media::after {
  background: linear-gradient(to bottom, rgb(3 11 25 / 0.55) 0%, rgb(3 11 25 / 0) 30%);
}

/* A short centred introduction */
.about-intro {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  max-width: 46rem;
  text-align: center;
}
.about-intro p {
  max-width: 40em;
}
.about-intro strong {
  font-weight: 700;
  color: var(--foam);
}
.about-intro .gap {
  width: 100%;
  margin-top: var(--space-4);
}

/* The founders, side by side */
.founders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--col-gap);
  margin-top: var(--space-7);
}
.founder {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.founder__photo {
  width: min(100%, 24rem);
  margin-bottom: var(--space-3);
}
/* Paige's awards (3 Nov, Jeremy): stickers on the corner of her photo,
   each on a round of paper, a little crooked */
.founder__media {
  position: relative;
  width: min(100%, 24rem);
}
.founder__media .founder__photo {
  width: 100%;
}
.stickers {
  position: absolute;
  right: calc(var(--space-5) * -1);
  bottom: var(--space-2);
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sticker {
  display: grid;
  place-items: center;
  width: clamp(5.5rem, 9vw, 7.5rem);
  aspect-ratio: 1;
  padding: 0.85rem;
  border-radius: 50%;
  background: var(--foam);
  box-shadow: 0 0.4rem 1rem rgb(3 11 25 / 0.35);
  transform: rotate(var(--tilt, 0deg));
}
.sticker + .sticker {
  margin-left: -1rem;
}
.sticker img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 40rem) {
  .stickers {
    right: var(--space-2);
  }
}

/* The short bios (3 Nov): a label, then the fact */
.founder__facts {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  max-width: 34rem;
}
.founder__facts div {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.founder__facts dd {
  margin: 0;
}
@media (max-width: 40rem) {
  .founders {
    grid-template-columns: 1fr;
  }
}

/* What we do, beside a collage of behind-the-scenes photos */
.about-work {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-8) var(--col-gap);
  align-items: start;
}
.about-work__text {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}
.services {
  display: grid;
  width: 100%;
}
.services li {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
}
.services li:last-child {
  border-bottom: 1px solid var(--line);
}
.services p {
  color: var(--fg-muted);
  font-size: var(--text-s);
}
/* Questions: each one over its answer, between hairlines like the services */
.faq {
  display: grid;
}
.faq > li {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-top: 1px solid var(--line);
}
.faq > li:last-child {
  border-bottom: 1px solid var(--line);
}
.faq .display--s {
  max-width: 30em;
  text-wrap: balance;
}
.faq .prose {
  color: var(--fg-muted);
}

.about-work__photos {
  display: grid;
  gap: var(--space-4);
  position: sticky;
  top: var(--space-6);
}
.collage {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: auto auto;
  gap: var(--space-3);
}
.collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  filter: sepia(0.14) saturate(0.86) contrast(1.03);
}
.collage img:nth-child(2) { aspect-ratio: 3 / 4; grid-row: span 2; }
.collage img:nth-child(3) { aspect-ratio: 16 / 10; }
.collage img:nth-child(4) { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
@media (max-width: 56rem) {
  .about-work {
    grid-template-columns: 1fr;
  }
  .about-work__photos {
    position: static;
  }
}

/* Ends on film, with the call to action over it */
.about-end {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: end;
  min-height: clamp(26rem, 70svh, 46rem);
  padding-block: var(--space-10) var(--space-9);
}
.about-end .hero__media {
  animation: none;
}
.about-end .hero__media::after {
  background: linear-gradient(to top, rgb(3 11 25 / 0.92) 0%, rgb(3 11 25 / 0.45) 55%, rgb(3 11 25 / 0.75) 100%);
}
/* 3 Nov: with no film behind it, it takes only the room it needs */
.about-end:not(:has(.hero__media)) {
  min-height: 0;
  padding-block: var(--section);
}
.about-end__inner {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}
.about-end__inner .lede {
  max-width: 30em;
}

/* --- The cave dive (29 Oct, cave.js) ---------------------------------------
   Without 3D: ordinary sections, one after another. With it (.is-3d): the
   stage holds still while you scroll through the dive, and the sections are
   placed on the spiral by cave.js, in front of the 3D cave. */

.dive__panel {
  padding-block: var(--section);
}
.dive__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
}
.dive .proof__actions {
  margin-top: var(--space-7);
}
.dive .stats {
  margin-top: var(--space-7);
}

.cave-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.dive.is-3d {
  position: relative;
  height: calc(var(--units, 10) * 75svh + 100svh); /* the pacing is set in cave.js */
}
.dive.is-3d .dive__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective-origin: 50% 50%;
}
.dive.is-3d .dive__panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a line of logos never widens the stop */
  align-content: center;
  padding-block: clamp(6rem, 12svh, 9rem) var(--space-7);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.dive.is-3d .dive__panel.deep .display--xl {
  font-size: var(--display-l);
}
/* 2 Nov, fourth round (Jeremy): consistency. Every stop's title is the size
   of The results' title and comes to rest at the same height; cave.js reads
   where The results' title rests (--title-rest) and the stops after it start
   there, so they all arrive and swing away alike. */
.dive.is-3d .dive__panel ~ .dive__panel {
  align-content: start;
  padding-top: var(--title-rest, clamp(6rem, 12svh, 9rem));
}
/* 3 Nov (Jeremy): the campaigns title sits a tad higher, lifting the
   pictures with it */
.dive.is-3d .dive__panel ~ .dive__panel:has(.tier) {
  padding-top: calc(var(--title-rest, clamp(6rem, 12svh, 9rem)) - clamp(1.5rem, 5svh, 3.5rem));
}
.dive.is-3d .brands,
.dive.is-3d .reviews {
  margin-top: 0;
}

/* The films carousel, smaller inside the dive */
.screening--compact {
  --w: min(42vw, 36rem);
  padding-bottom: 0;
}
.screening--compact .screening__caption {
  margin-top: var(--space-4);
}
.screening--compact .screening__controls {
  margin-top: var(--space-4);
}
@media (max-width: 56rem) {
  .screening--compact {
    --w: 84vw;
  }
}

/* --- From the film into the cave (2 Nov: Jeremy chose Fade) ----------------
   The film plays clean; scrolling brings the headline up over it (--reveal),
   then the film fades through deep blue into the cave (--exit, set by
   site.js, never too fast). One thing at a time (3 Nov): the dive starts
   where the fade ends, and the results wait until it has finished. While
   the dive is on, the opening is held in place on the screen, so the
   fading words never scroll; once faded it is hidden. */

.opening.is-live.is-diving {
  height: 230svh; /* 3 Nov: the headline holds for about half a cave stop; 2 Nov, fifth round: a little longer, and site.js also holds it for a moment */
}
.opening.is-diving .opening__stick {
  position: fixed;
  inset: 0 0 auto;
}
.opening.is-diving.is-gone .opening__stick {
  visibility: hidden;
}
.opening.is-diving .opening__stick {
  opacity: calc(1 - var(--exit, 0)); /* not a filter on the video: much lighter work (3 Nov) */
}
.opening.is-diving .hero__media::after {
  background-color: rgb(3 30 46 / calc(var(--exit, 0) * 0.8));
}
.dive.is-3d {
  margin-top: -100svh;
}

/* --- Films on the homepage: a diagonal tier (30 Oct) -----------------------
   Three films stepping down to the right, arriving one after another when
   their stop faces you, then the All films button. The words sit on each
   still, faint until you hover, then solid white. */
.tier {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--col-gap);
  margin-top: var(--space-7);
}
.tier__item:nth-child(2) { margin-top: 9%; }
.tier__item:nth-child(3) { margin-top: 18%; }
.tier__film {
  display: block;
  text-decoration: none;
}
.tier__frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--navy);
}
.tier__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.12) saturate(0.88) contrast(1.03);
  transition: transform var(--dur-3) var(--ease-out);
}
.tier__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(3 11 25 / 0.85), rgb(3 11 25 / 0) 60%);
  opacity: 0.6;
  transition: opacity var(--dur-2) var(--ease-out);
}
.tier__text {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 1;
  display: grid;
  gap: var(--space-1);
  opacity: 0.55;
  transition: opacity var(--dur-2) var(--ease-out);
}
.tier__film {
  position: relative;
}
.tier__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--display-s);
  line-height: 1.1;
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-case);
}
.tier__line {
  font-size: var(--text-s);
  color: var(--fg-muted);
}
.tier__film:hover .tier__text,
.tier__film:focus-visible .tier__text,
.tier__text:hover {
  opacity: 1;
}
.tier__film:hover .tier__frame::after,
.tier__film:focus-visible .tier__frame::after {
  opacity: 1;
}
.tier__film:hover .tier__frame img {
  transform: scale(1.05);
}
@media (hover: none) {
  .tier__text { opacity: 1; }
}
.tier__end {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-6);
}

/* In the dive (31 Oct): the title holds at the top while the films travel
   past one by one on a long diagonal (cave.js places each film) */
.dive.is-3d .dive__panel:has(.tier) h2 {
  position: relative;
  z-index: 20; /* the films pass behind the title */
}
.dive.is-3d .tier {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  pointer-events: none;
}
/* 2 Nov, fifth round (Jeremy): the campaigns are a carousel like the
   others: one line under the title, the first lined up with it, as close as
   the results sit under theirs. cave.js slides the line along as you scroll
   through the stop, until the last rests under the title with All campaigns
   beside it, along its bottom edge. The pictures are never so big that they
   run off the bottom of a short screen. cave.js passes in where the title
   ends (--title-bottom, --title-left). */
/* 3 Nov (Jeremy): smaller, and centred: the film in view sits in the middle
   of the screen across, and in the room under the title. 3 Nov, later
   (Jeremy): closer to the title, a quarter of the way down that room. */
.dive.is-3d .tier__item,
.dive.is-3d .tier__end {
  --room: calc(100svh - var(--title-bottom, 8rem) - var(--space-6));
  --tw: min(38vw, 32rem, var(--room) * 1.3);
  --top: calc(var(--title-bottom, 8rem) + max(var(--space-5), (var(--room) - var(--tw) * 0.625) / 4 - var(--space-4)));
}
.dive.is-3d .tier__item {
  position: absolute;
  left: calc(50% - var(--tw) / 2);
  top: var(--top);
  width: var(--tw);
  margin: 0;
  pointer-events: auto;
  transition: none !important;
  will-change: transform;
}
.dive.is-3d .tier__item:nth-child(n) {
  margin-top: 0;
}
.dive.is-3d .tier__end {
  position: absolute;
  left: calc(50% - var(--tw) / 2);
  top: var(--top);
  margin: 0;
  transition: none !important;
}

/* Phones and tablets in the dive (3 Nov): each stop fits one screen, and the
   films are nearly the full width, passing one at a time down the middle */
@media (max-width: 56rem) {
  .dive.is-3d .dive__panel {
    padding-block: clamp(4.5rem, 10svh, 6rem) var(--space-6);
  }
  .dive.is-3d .dive__panel .display--l {
    font-size: var(--display-m);
  }
  .dive.is-3d .dive__panel.deep .display--xl {
    font-size: var(--display-m);
  }
  .dive.is-3d .tier__item,
  .dive.is-3d .tier__end {
    --room: calc(100svh - var(--title-bottom, 8rem) - var(--space-4) - 3rem - var(--space-6));
    --tw: min(76vw, 100vw - var(--title-left, var(--gutter)) * 2, var(--room) * 1.3);
    --top: calc(var(--title-bottom, 8rem) + max(var(--space-5), (var(--room) - var(--tw) * 0.625) / 4 - var(--space-4)));
  }
  /* No room beside the pictures: the button waits under the last one's
     right-hand corner */
  .dive.is-3d .tier__end {
    top: calc(var(--top) + var(--tw) * 0.625 + var(--space-4));
    width: var(--tw);
  }
}

/* Arriving one after another: only when there is motion to give */
@media (prefers-reduced-motion: no-preference) {
  .will-split .tier__item,
  .will-split .tier + .tier__end {
    opacity: 0;
    transform: translate3d(4rem, 3rem, 0);
    transition:
      opacity 500ms var(--ease-out) calc(var(--n, 0) * 100ms + 100ms),
      transform 700ms cubic-bezier(0.2, 0.75, 0.1, 1) calc(var(--n, 0) * 100ms + 100ms);
  }
  .will-split .tier.is-in .tier__item,
  .will-split .tier.is-in + .tier__end {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 40rem) {
  .tier {
    grid-template-columns: 1fr;
  }
  .tier__item:nth-child(n) { margin-top: 0; }
}

/* The Links page (for the social bios): the same strip, one film under
   another until there is room for all three side by side (and for a long
   line, like The Making of the Body's, on each picture) */
@media (max-width: 72rem) {
  .tier--links {
    grid-template-columns: 1fr;
  }
  .tier--links .tier__item:nth-child(n) { margin-top: 0; }
}

/* --- Words on the picture, faint until hovered, then solid white (30 Oct) --
   Used by the Campaigns cards and the Films page. On touch screens, which
   cannot hover, the words are simply solid. */
.campaign-card__thumb::after,
.work__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(3 11 25 / 0.88) 0%, rgb(3 11 25 / 0.35) 40%, rgb(3 11 25 / 0) 65%);
  opacity: 0.65;
  transition: opacity var(--dur-2) var(--ease-out);
  pointer-events: none;
}
.campaign-card__text,
.work__text {
  position: absolute;
  left: clamp(1rem, 2.5vw, 2rem);
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 1;
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  opacity: 0.45;
  transition: opacity 260ms ease, transform 420ms var(--ease-out);
}
.campaign-card__title,
.work__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--display-s);
  line-height: 1.1;
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-case);
  color: var(--foam);
}
.campaign-card__line,
.work__text p:not(.label) {
  max-width: 34em;
  font-size: var(--text-s);
  color: var(--foam);
}
.campaign-card:hover .campaign-card__text,
.campaign-card:focus-visible .campaign-card__text,
.campaign-card__text:hover,
.work__frame:hover .work__text,
.work__frame:focus-within .work__text,
.work__text:hover {
  opacity: 1;
  transform: translate3d(0, -4px, 0);
}
.campaign-card:hover .campaign-card__thumb::after,
.campaign-card:focus-visible .campaign-card__thumb::after,
.work__frame:hover::after,
.work__frame:focus-within::after {
  opacity: 1;
}
@media (hover: none) {
  .campaign-card__text,
  .work__text { opacity: 1; }
  .campaign-card__thumb::after,
  .work__frame::after { opacity: 1; }
}
/* 3 Nov (Jeremy): the YouTube covers carry their own words, so the card's
   title and line moved under the picture, solid, above the numbers */
.campaign-card { grid-template-rows: auto 1fr; }
.campaign-card__thumb::after { content: none; }
.campaign-card__body .campaign-card__text {
  position: static;
  opacity: 1;
  transform: none;
}
.campaign-card__body .campaign-card__line { color: var(--fg-muted); }
.campaign-card__body .campaign-card__stats {
  margin-top: var(--space-2);
}

/* --- Films page: two by two, after Lusion's Featured Work (30 Oct) --------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--col-gap);
  align-items: start;
}
.work:nth-child(even) {
  margin-top: 14%; /* the second column sits lower */
}
.work {
  scroll-margin-top: 2rem;
}
.work__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.54 / 1;
  background: var(--navy);
  border-radius: 12px;
}
.work__frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.12) saturate(0.88) contrast(1.03);
}
.work .film__play {
  z-index: 2;
  border: 0;
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.work .video-frame {
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 40rem) {
  .work-grid { grid-template-columns: 1fr; }
  .work:nth-child(even) { margin-top: 0; }
  .work__frame { aspect-ratio: 4 / 5; }
}

/* The Films carousel with the words on each still (31 Oct): faint until you
   hover the film in the middle; the films at the sides keep theirs dimmer */
.screening__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(3 11 25 / 0.88) 0%, rgb(3 11 25 / 0.35) 40%, rgb(3 11 25 / 0) 65%);
  opacity: 0.65;
  transition: opacity var(--dur-2) var(--ease-out);
  pointer-events: none;
}
.screening .work__text {
  opacity: calc(var(--near, 1) * 0.45);
}
.screening__slide.is-here .screening__frame:hover .work__text,
.screening__slide.is-here .screening__frame:focus-within .work__text,
.screening__slide.is-here .work__text:hover {
  opacity: 1;
  transform: translate3d(0, -4px, 0);
}
.screening__slide.is-here .screening__frame:hover::after,
.screening__slide.is-here .screening__frame:focus-within::after {
  opacity: 1;
}
.screening .work__title {
  font-size: var(--display-m);
}
@media (hover: none) {
  .screening .work__text { opacity: var(--near, 1); }
  .screening__frame::after { opacity: 1; }
}
@media (max-width: 40rem) {
  .screening .work__text p:not(.label) { display: none; } /* the title and link are enough on a phone */
}

/* --- Start a project (31 Oct): the questions large and first ---------------- */
.contact-layout {
  display: grid;
  gap: var(--space-9);
}
.contact-layout .intake {
  gap: var(--space-6);
  padding: clamp(1.5rem, 4.5vw, 4rem);
  border: 1px solid color-mix(in srgb, var(--aqua) 35%, transparent);
  border-top: 3px solid var(--aqua);
  background: rgb(25 38 61 / 0.55);
}
.contact-layout .intake__top {
  display: grid;
  gap: var(--space-3);
}
.contact-layout .intake__count {
  justify-self: end;
  margin-bottom: calc(var(--space-4) * -1);
}
.contact-layout .intake__bar span {
  height: 4px;
}
.contact-layout .intake__step {
  min-height: 15rem;
}
.contact-layout .intake__step legend {
  font-size: var(--display-l);
  margin-bottom: var(--space-6);
}
.contact-layout .choice span {
  padding: 1em 1.4em 0.95em;
  font-size: 1.0625rem;
}
.contact-layout .intake__choices {
  gap: var(--space-4);
}
.contact-layout .intake__nav .btn {
  padding: 1em 1.6em 0.95em;
}
.contact-layout .contact__direct {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  align-items: end;
  gap: var(--space-6) var(--col-gap);
}
/* Without the 3D dive, films sliding in from the right must not widen the page */
.dive:not(.is-3d) .dive__panel {
  overflow-x: clip;
}

/* --- Films page carousel, nearly edge to edge (1 Nov) ----------------------
   The film in the middle fills almost the whole width in the 2.39:1 shape of
   a cinema screen; the next and previous films just peek in at the edges. */
.screening:not(.screening--compact) {
  --w: 90vw;
  --gap: 1.25vw;
}
.screening:not(.screening--compact) .screening__frame {
  aspect-ratio: 2.39 / 1;
}
.screening:not(.screening--compact) .work__text {
  left: clamp(1.25rem, 4vw, 4rem);
  bottom: clamp(1.25rem, 3.5vw, 3.5rem);
}
.screening:not(.screening--compact) .work__title {
  font-size: var(--display-l);
}
@media (max-width: 40rem) {
  .screening:not(.screening--compact) {
    --w: 88vw;
  }
  .screening:not(.screening--compact) .screening__frame {
    aspect-ratio: 4 / 5;
  }
}

/* --- Start a project: the direct ways to reach us (1 Nov fix) --------------
   The email address no longer runs into the button and phone number: the
   addresses are set in ordinary letters, and the row wraps when it must. */
.contact-layout .contact__direct {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-6) var(--space-9);
}
.contact__direct .display {
  font-size: var(--text-l);
  text-transform: none;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

/* Films page (2 Nov): bigger still, and a little taller than widescreen.
   Fifth round (Jeremy): narrower, so the next and previous films show at the
   edges, at half strength and full size, and people can see there is more */
.screening:not(.screening--compact) {
  --w: 86vw;
  --gap: 1.5vw;
  --shrink: 0;
  --dim: 0.5;
}
.screening:not(.screening--compact) .screening__frame {
  aspect-ratio: 2 / 1;
  max-height: 78svh;
}
@media (max-width: 40rem) {
  .screening:not(.screening--compact) {
    --w: 80vw;
    --gap: 2vw;
  }
  .screening:not(.screening--compact) .screening__frame {
    aspect-ratio: 4 / 5;
    max-height: none;
  }
}
/* While the dive overlaps the end of the opening, clicks pass through it to
   the opening's buttons; only the stop facing you takes them */
.dive.is-3d,
.dive.is-3d .dive__stage {
  pointer-events: none;
}
.dive.is-3d .dive__panel.is-here {
  pointer-events: auto;
}