/* ==========================================================================
   FG Visual Productions – sections.css
   Home sections and page layouts.
   ========================================================================== */

/* Hero: full-screen showreel with one quiet statement */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 82svh;
  overflow: hidden;
  color: var(--c-ivory);
  background: var(--c-ink);
}

.hero--full {
  min-height: 100vh;
  min-height: 100svh;
}

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

.hero__media .media-cover {
  transform-origin: 50% 60%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 62%, transparent) 0%, transparent 26%),
    linear-gradient(0deg, color-mix(in srgb, var(--c-ink) 92%, transparent) 0%, color-mix(in srgb, var(--c-ink) 45%, transparent) 34%, transparent 64%),
    color-mix(in srgb, var(--c-ink) calc(var(--overlay, 0.3) * 100%), transparent);
}

.hero__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 80% at 70% 20%, color-mix(in srgb, var(--c-brass) 16%, transparent), transparent 60%),
    linear-gradient(160deg, #141a23, var(--c-ink) 70%);
}

.hero__content {
  align-self: end;
  display: grid;
  gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(1.75rem, 1rem + 2vh, 3rem);
}

.hero__logo {
  height: clamp(3rem, 2rem + 3vw, 5rem);
}

.hero__logo svg,
.hero__logo img {
  height: 100%;
  width: auto;
}

.hero__title {
  max-width: 15ch;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--c-ivory) 28%, transparent);
}

.hero__subline {
  min-width: 0;
}

.hero__coords {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.25rem;
}

.hero__coords .t-coords,
.hero__coords .t-label {
  color: color-mix(in srgb, var(--c-ivory) 72%, transparent);
}

.hero__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
}

.hero__scroll-line {
  position: relative;
  width: 3.5rem;
  height: 1px;
  overflow: hidden;
  background: color-mix(in srgb, var(--c-ivory) 30%, transparent);
}

.hero__scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-ivory);
  transform: translateX(-100%);
  animation: hero-scroll-line 2.6s var(--ease-in-out) 1.6s infinite;
}

@keyframes hero-scroll-line {
  0% {
    transform: translateX(-100%);
  }
  45%,
  55% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.hero__end {
  display: block;
  height: 0;
}

@media (max-width: 749px) {
  .hero__title {
    max-width: none;
  }

  .hero__meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Start state for the intro – only when JS + motion are available (class set in <head>).
   A CSS failsafe reveals everything after 3 s in case JavaScript never runs. */
.js-motion .hero [data-hero-title] .line__inner {
  transform: translateY(105%);
  animation: hero-failsafe-lines 0.01s linear 3s forwards;
}

.js-motion .hero [data-hero-reveal] {
  opacity: 0;
  animation: hero-failsafe-fade 0.01s linear 3s forwards;
}

@keyframes hero-failsafe-lines {
  to {
    transform: none;
  }
}

@keyframes hero-failsafe-fade {
  to {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Statement (intro)
   -------------------------------------------------------------------------- */
.statement {
  row-gap: 2.5rem;
}

.statement .grid {
  row-gap: 2.5rem;
}

.statement__label {
  grid-column: 1 / -1;
}

.statement__text {
  grid-column: 1 / -1;
  max-width: 22ch;
}

.statement__signature {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: var(--label);
}

.statement__rule {
  width: 3.5rem;
  height: 1px;
  background: var(--accent);
}

@media (min-width: 990px) {
  .statement__label {
    grid-column: 1 / span 2;
    padding-top: 1.1rem;
  }

  .statement__text {
    grid-column: 3 / -1;
  }

  .statement__signature {
    grid-column: 3 / -1;
  }
}

/* --------------------------------------------------------------------------
   Four worlds – one full-screen slider 01–04 (exactly one screen high)
   -------------------------------------------------------------------------- */
.worlds {
  --controls-h: 6rem;
  position: relative;
  background: var(--c-ink);
  color: var(--c-ivory);
}

.world {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.world__media {
  z-index: -1;
}

.world__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--c-ink) 92%, transparent) 0%, color-mix(in srgb, var(--c-ink) 35%, transparent) 45%, transparent 70%),
    linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 55%, transparent) 0%, transparent 60%),
    color-mix(in srgb, var(--c-ink) 18%, transparent);
}

.world__content {
  align-self: end;
  display: grid;
  gap: 1.25rem;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(3rem, 2rem + 4vh, 5rem);
}

.world__num {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.world__num-current {
  color: var(--c-brass);
}

.world__num-sep {
  width: 2.5rem;
  height: 1px;
  background: color-mix(in srgb, var(--c-ivory) 40%, transparent);
}

.world__title {
  max-width: 14ch;
}

.world__line {
  max-width: 40ch;
  color: color-mix(in srgb, var(--c-ivory) 86%, transparent);
}

.world__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 2.5rem;
}

.world__coords {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}

/* Slider (JavaScript). Without it the four worlds simply stack. */
.worlds.is-enhanced .worlds__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 36rem;
  overflow: hidden;
  touch-action: pan-y;
}

.worlds.is-enhanced .world {
  position: absolute;
  inset: 0;
  min-height: 0;
  visibility: hidden;
}

.worlds.is-enhanced .world.is-active,
.worlds.is-enhanced .world.is-leaving {
  visibility: visible;
}

.worlds.is-enhanced .world__content {
  padding-bottom: calc(var(--controls-h) + clamp(1.5rem, 1rem + 2.5vh, 3rem));
}

.js-motion .worlds.is-enhanced .world .world__content > * {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.8s var(--ease), transform 1s var(--ease);
}

.js-motion .worlds.is-enhanced .world.is-active .world__content > * {
  opacity: 1;
  transform: none;
  transition-delay: 0.35s;
}

.js-motion .worlds.is-enhanced .world.is-active .world__content > *:nth-child(2) {
  transition-delay: 0.45s;
}

.js-motion .worlds.is-enhanced .world.is-active .world__content > *:nth-child(3) {
  transition-delay: 0.55s;
}

.js-motion .worlds.is-enhanced .world.is-active .world__content > *:nth-child(4) {
  transition-delay: 0.65s;
}

.js-motion .worlds.is-enhanced .world .media-cover {
  transform: scale(1.06);
  transition: transform 2.4s var(--ease);
}

.js-motion .worlds.is-enhanced .world.is-active .media-cover {
  transform: none;
}

.worlds__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  gap: var(--col-gap);
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

.worlds__tabs {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--col-gap);
  min-width: 0;
}

.worlds__tab {
  position: relative;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  min-width: 0;
  min-height: 44px;
  padding-top: 1rem;
  text-align: left;
  color: color-mix(in srgb, var(--c-ivory) 58%, transparent);
  transition: color 0.5s var(--ease);
}

.worlds__tab:hover,
.worlds__tab.is-active {
  color: var(--c-ivory);
}

.worlds__tab-num {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  font-variant-numeric: tabular-nums;
}

.worlds__tab.is-active .worlds__tab-num {
  color: var(--c-brass);
}

.worlds__tab-label {
  font-family: var(--f-display);
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.35rem);
  line-height: 1.2;
  hyphens: auto;
}

.worlds__tab-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: color-mix(in srgb, var(--c-ivory) 25%, transparent);
  overflow: hidden;
}

.worlds__tab-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-brass);
  transform: scaleX(0);
  transform-origin: left;
}

.worlds__tab.is-active .worlds__tab-bar::after {
  transform: scaleX(1);
}

.worlds.has-autoplay .worlds__tab.is-active .worlds__tab-bar::after {
  transform: scaleX(0);
  animation: worlds-progress var(--autoplay, 7s) linear forwards;
}

.worlds.has-autoplay:not(.is-playing) .worlds__tab.is-active .worlds__tab-bar::after {
  animation-play-state: paused;
}

@media (max-width: 749px) and (max-height: 720px) {
  .worlds .world__coords {
    display: none;
  }
}

@keyframes worlds-progress {
  to {
    transform: scaleX(1);
  }
}

.worlds__buttons {
  display: flex;
  gap: 0.5rem;
  padding-bottom: 0.15rem;
}

.worlds__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid color-mix(in srgb, var(--c-ivory) 38%, transparent);
  border-radius: 50%;
  color: var(--c-ivory);
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}

.worlds__btn:hover {
  border-color: var(--c-ivory);
  background: color-mix(in srgb, var(--c-ivory) 10%, transparent);
}

.worlds__arrow {
  position: relative;
  width: 0.9rem;
  height: 1px;
  background: currentColor;
}

.worlds__arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.worlds__arrow--prev {
  transform: scaleX(-1);
}

.worlds__btn--toggle[data-paused] .video-toggle__icon::before {
  left: 1px;
  width: 0;
  height: 0;
  background: none;
  border-style: solid;
  border-width: 5.5px 0 5.5px 9px;
  border-color: transparent transparent transparent currentColor;
}

.worlds__btn--toggle[data-paused] .video-toggle__icon::after {
  display: none;
}

@media (max-width: 749px) {
  .worlds {
    --controls-h: 12rem;
  }

  .worlds__controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .worlds__buttons {
    order: -1;
    justify-content: flex-end;
  }

  .worlds__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 0.75rem;
  }

  .worlds__tab {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 0.6rem;
    padding-top: 0.7rem;
    padding-bottom: 0.35rem;
  }

  .worlds__tab-label {
    font-family: var(--f-text);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
  }
}

/* --------------------------------------------------------------------------
   Featured production (21:9)
   -------------------------------------------------------------------------- */
.featured__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-bottom: 1.5rem;
}

.featured__frame {
  position: relative;
  aspect-ratio: 21 / 9;
  max-width: 100%;
  overflow: hidden;
  background: #000;
}

@media (max-width: 749px) {
  .featured__frame {
    aspect-ratio: 4 / 3;
  }
}

.featured__frame > .media-cover {
  inset: -8% 0;
}

.featured__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: linear-gradient(0deg, color-mix(in srgb, var(--c-ink) 60%, transparent), transparent 40%);
  color: var(--c-ivory);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.featured__play .play-icon {
  margin-bottom: 0.15rem;
}

.featured__meta {
  row-gap: 2rem;
  padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.featured__title {
  grid-column: 1 / -1;
}

.featured__title a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.8s var(--ease);
}

.featured__title a:hover,
.featured__title a:focus-visible {
  background-size: 100% 1px;
}

.featured__info {
  grid-column: 1 / -1;
  display: grid;
  gap: 2rem;
}

@media (min-width: 990px) {
  .featured__title {
    grid-column: 1 / span 6;
  }

  .featured__info {
    grid-column: 8 / -1;
  }
}

/* --------------------------------------------------------------------------
   Projects grid + cards
   -------------------------------------------------------------------------- */
.projects__head {
  row-gap: 1.5rem;
  align-items: end;
  margin-bottom: clamp(3rem, 2rem + 4vw, 6rem);
}

.projects__label {
  grid-column: 1 / -1;
}

.projects__title {
  grid-column: 1 / -1;
}

.projects__all {
  grid-column: 1 / -1;
}

@media (min-width: 990px) {
  .projects__label {
    grid-column: 1 / span 2;
    align-self: start;
    padding-top: 0.9rem;
  }

  .projects__title {
    grid-column: 3 / span 7;
  }

  .projects__all {
    grid-column: 10 / -1;
    justify-self: end;
  }
}

.projects__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(3.5rem, 2.5rem + 4vw, 7rem);
}

.card {
  grid-column: 1 / -1;
  min-width: 0;
}

@media (min-width: 990px) {
  .projects__grid > .card:nth-child(4n + 1) {
    grid-column: 1 / span 7;
  }

  .projects__grid > .card:nth-child(4n + 2) {
    grid-column: 9 / span 4;
    margin-top: clamp(4rem, 10vw, 10rem);
  }

  .projects__grid > .card:nth-child(4n + 3) {
    grid-column: 1 / span 4;
  }

  .projects__grid > .card:nth-child(4n + 4) {
    grid-column: 6 / span 7;
    margin-top: clamp(4rem, 10vw, 10rem);
  }

  /* Filtered views: simple two-column rhythm */
  .projects__grid.is-filtered > .card {
    grid-column: span 6;
    margin-top: 0;
  }
}

.card__link {
  display: grid;
  gap: 1.25rem;
}

.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  overflow: hidden;
  background: #000;
}

.card--tall .card__media {
  aspect-ratio: 4 / 5;
}

@media (max-width: 989px) {
  .card--tall .card__media {
    aspect-ratio: 16 / 10;
  }
}

.card__media .media-cover {
  transition: transform 1.4s var(--ease);
}

.card__link:hover .card__media .media-cover,
.card__link:focus-visible .card__media .media-cover {
  transform: scale(1.04);
}

.card__body {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.25rem;
  row-gap: 0.6rem;
}

.card__index {
  grid-row: span 2;
  padding-top: 0.55rem;
  font-variant-numeric: tabular-nums;
}

.card__title {
  min-width: 0;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}

/* Filter */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid var(--line);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--label);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}

.filter__btn:hover {
  color: var(--fg);
  border-color: var(--line-strong);
}

.filter__btn[aria-pressed='true'] {
  color: var(--bg);
  background: var(--fg);
  border-color: var(--fg);
}

.filter__count {
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}

.projects__empty {
  display: grid;
  justify-items: start;
  gap: 1.5rem;
  padding-block: 3rem;
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Process (light section, pinned media)
   -------------------------------------------------------------------------- */
.process__head {
  row-gap: 1.5rem;
  margin-bottom: clamp(3rem, 2rem + 4vw, 6rem);
}

.process__head > * {
  grid-column: 1 / -1;
}

@media (min-width: 990px) {
  .process__head > .t-label {
    grid-column: 1 / span 2;
    padding-top: 0.9rem;
  }

  .process__title {
    grid-column: 3 / -1;
  }
}

.process__body {
  align-items: start;
}

.process__media {
  display: none;
}

.process__steps {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(3rem, 2rem + 4vw, 5rem);
}

.process__step {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.process__step-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

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

.process__num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--accent);
}

@media (min-width: 990px) {
  .process__media {
    grid-column: 1 / span 6;
    display: block;
    position: sticky;
    top: calc(50vh - 18vw);
  }

  .process__frame {
    position: relative;
    aspect-ratio: 4 / 5;
    max-height: 72vh;
    overflow: hidden;
  }

  .process__image {
    position: absolute;
    inset: 0;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transition: opacity 0.8s var(--ease), clip-path 1.2s var(--ease-in-out);
  }

  .process__image picture,
  .process__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .process__image.is-active {
    opacity: 1;
    clip-path: inset(0);
  }

  .process__progress {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
    height: 1px;
    background: color-mix(in srgb, var(--c-ivory) 35%, transparent);
  }

  .process__progress-fill {
    position: absolute;
    inset: 0;
    background: var(--c-ivory);
    transform: scaleX(var(--process, 0.333));
    transform-origin: left;
    transition: transform 0.6s var(--ease);
  }

  .process__steps {
    grid-column: 8 / -1;
    gap: 0;
  }

  .process__step {
    min-height: 56vh;
    align-content: center;
    opacity: 0.28;
    transition: opacity 0.8s var(--ease);
  }

  .no-js .process__step,
  .process__step.is-active {
    opacity: 1;
  }

  .process__step-image {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Logos
   -------------------------------------------------------------------------- */
.logos {
  padding-block: clamp(4.5rem, 3rem + 5vw, 8rem);
  border-bottom: 1px solid var(--line);
}

.logos__label {
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.logos__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem clamp(2rem, 4vw, 4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.logos__item {
  flex: 0 1 auto;
}

.logos__img {
  height: clamp(2.25rem, 1.8rem + 1.5vw, 3.5rem);
  width: auto;
  max-width: 11rem;
  object-fit: contain;
  opacity: 0.72;
  transition: opacity 0.5s var(--ease);
}

.logos__item:hover .logos__img {
  opacity: 1;
}

@media (max-width: 749px) {
  .logos__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: start;
  }
}

/* --------------------------------------------------------------------------
   Client voices
   -------------------------------------------------------------------------- */
.voices .grid {
  row-gap: 3rem;
}

.voices__label {
  grid-column: 1 / -1;
}

.voices__film {
  grid-column: 1 / -1;
  display: grid;
  gap: 1rem;
  align-content: start;
}

.voices__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  overflow: hidden;
  background: #000;
}

.voices__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--c-ivory);
  background: color-mix(in srgb, var(--c-ink) 22%, transparent);
  transition: background-color 0.6s var(--ease);
}

.voices__play::before {
  content: '';
  position: absolute;
  width: 5.5rem;
  height: 5.5rem;
  border: 1px solid color-mix(in srgb, var(--c-ivory) 70%, transparent);
  border-radius: 50%;
  transition: transform 0.8s var(--ease);
}

.voices__play:hover::before,
.voices__play:focus-visible::before {
  transform: scale(1.12);
}

.voices__play .play-icon {
  margin-left: 0.3rem;
}

.voices__quotes {
  grid-column: 1 / -1;
  display: grid;
  gap: clamp(3rem, 2rem + 3vw, 4.5rem);
}

.quote {
  display: grid;
  gap: 1.5rem;
  margin: 0;
}

.quote__text {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 2.1rem);
  line-height: 1.3;
  text-wrap: pretty;
}

.quote__author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.quote__author::before {
  content: '';
  width: 2.5rem;
  height: 1px;
  background: var(--accent);
}

@media (min-width: 990px) {
  .voices__label {
    grid-column: 1 / span 2;
  }

  .voices__film {
    grid-column: 3 / span 4;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }

  .voices__quotes {
    grid-column: 8 / -1;
  }
}

/* --------------------------------------------------------------------------
   Inquiry CTA (light)
   -------------------------------------------------------------------------- */
.cta {
  text-align: left;
}

.cta__title {
  max-width: 16ch;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
}

/* --------------------------------------------------------------------------
   Page hero (areas, projects, text pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  color: var(--c-ivory);
}

.page-hero--media {
  min-height: 88vh;
  min-height: 88svh;
  overflow: hidden;
  background: var(--c-ink);
}

.page-hero--full {
  min-height: 100vh;
  min-height: 100svh;
}

.page-hero .hero__media {
  z-index: -1;
}

.page-hero__content {
  align-self: end;
  display: grid;
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  padding-top: calc(var(--header-h) + clamp(3rem, 8vh, 7rem));
  padding-bottom: clamp(2.5rem, 2rem + 3vh, 4.5rem);
}

.page-hero--text .page-hero__content {
  padding-top: calc(var(--header-h) + clamp(5rem, 14vh, 10rem));
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
  border-bottom: 1px solid var(--line);
}

.page-hero__title {
  max-width: 16ch;
}

.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--c-ivory) 24%, transparent);
}

.page-hero--text .page-hero__meta {
  border-top: 0;
  padding-top: 0;
}

.page-hero__intro {
  flex: 1 1 28rem;
  max-width: 46ch;
}

.page-hero__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

.btn--film {
  border-color: color-mix(in srgb, var(--c-ivory) 50%, transparent);
  color: var(--c-ivory);
  --fg: var(--c-ivory);
  --bg: var(--c-ink);
}

/* Section spacing helpers */
.section--flush {
  padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.statement__text.t-h2 {
  max-width: 34ch;
}

.section--tight {
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) var(--section-space);
}

/* --------------------------------------------------------------------------
   Services list
   -------------------------------------------------------------------------- */
.services .grid {
  row-gap: 2.5rem;
}

.services__label {
  grid-column: 1 / -1;
}

.services__list {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.services__item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.5rem;
  padding-block: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  border-bottom: 1px solid var(--line);
}

.services__num {
  grid-row: span 2;
  padding-top: 0.5rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.services__text {
  color: var(--label);
  max-width: 52ch;
}

@media (min-width: 990px) {
  .services__label {
    grid-column: 1 / span 2;
    padding-top: 1.8rem;
  }

  .services__list {
    grid-column: 3 / -1;
  }

  .services__item {
    grid-template-columns: 4rem minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: baseline;
  }

  .services__num {
    grid-row: auto;
  }
}

/* --------------------------------------------------------------------------
   Empty state (e.g. Private Aviation without projects)
   -------------------------------------------------------------------------- */
.empty-state .grid {
  row-gap: 2rem;
}

.empty-state__label {
  grid-column: 1 / -1;
}

.empty-state__body {
  grid-column: 1 / -1;
  display: grid;
  gap: 1.75rem;
  justify-items: start;
  padding: clamp(2.5rem, 2rem + 3vw, 5rem);
  border: 1px solid var(--line);
  background:
    radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--c-brass) 10%, transparent), transparent 60%),
    color-mix(in srgb, var(--c-ivory) 2%, transparent);
}

@media (min-width: 990px) {
  .empty-state__label {
    grid-column: 1 / span 2;
  }

  .empty-state__body {
    grid-column: 3 / -1;
  }
}

/* --------------------------------------------------------------------------
   Project detail
   -------------------------------------------------------------------------- */
.project__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem var(--col-gap);
  margin: 0 0 clamp(3.5rem, 2.5rem + 4vw, 7rem);
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}

.project__facts div {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  min-width: 0;
}

.project__facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 990px) {
  .project__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.project__body {
  row-gap: 3rem;
  margin-bottom: clamp(4rem, 3rem + 5vw, 8rem);
}

.project__text {
  grid-column: 1 / -1;
  display: grid;
  gap: 2rem;
}

.project__credits {
  grid-column: 1 / -1;
  display: grid;
  gap: 1rem;
  align-content: start;
  font-size: var(--fs-small);
  line-height: 1.8;
}

@media (min-width: 990px) {
  .project__text {
    grid-column: 1 / span 7;
  }

  .project__credits {
    grid-column: 9 / -1;
  }
}

.prose {
  max-width: var(--measure);
  display: grid;
  gap: 1.1rem;
}

.prose h2 {
  margin-top: 1.5rem;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.15;
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.prose strong {
  font-weight: 600;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
}

.gallery__item {
  grid-column: 1 / -1;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin: 0;
  background: #000;
}

.gallery__item--portrait {
  aspect-ratio: 9 / 16;
}

.gallery__item picture,
.gallery__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 750px) {
  .gallery__item {
    grid-column: span 6;
  }

  .gallery__item:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 21 / 9;
  }

  .gallery__item--portrait,
  .gallery__item--portrait:first-child {
    grid-column: span 4;
    aspect-ratio: 9 / 16;
  }
}

/* Next project – a large transition into the next film */
.next-project {
  position: relative;
  border-top: 1px solid var(--line);
}

.next-project__link {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 80vh;
  min-height: 80svh;
  overflow: hidden;
  color: var(--c-ivory);
}

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

.next-project__media > .media-cover {
  inset: -8% 0;
  transition: transform 1.6s var(--ease);
}

.next-project__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--c-ink) 88%, transparent), color-mix(in srgb, var(--c-ink) 35%, transparent) 60%),
    color-mix(in srgb, var(--c-ink) 25%, transparent);
  transition: background-color 0.8s var(--ease);
}

.next-project__link:hover .next-project__media > .media-cover {
  transform: scale(1.04);
}

.next-project__content {
  align-self: end;
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}

.next-project__title {
  max-width: 18ch;
}

/* --------------------------------------------------------------------------
   About – founder
   -------------------------------------------------------------------------- */
.founder .grid {
  row-gap: 3rem;
  align-items: start;
}

.founder__portrait {
  grid-column: 1 / -1;
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

.founder__portrait picture,
.founder__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder__text {
  grid-column: 1 / -1;
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.founder__name {
  font-style: italic;
}

@media (min-width: 990px) {
  .founder__portrait {
    grid-column: 1 / span 5;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }

  .founder__text {
    grid-column: 7 / -1;
    padding-top: 4rem;
  }
}

/* --------------------------------------------------------------------------
   Inquiry form
   -------------------------------------------------------------------------- */
.inquiry .grid {
  row-gap: 4rem;
  align-items: start;
}

.inquiry__main {
  grid-column: 1 / -1;
  min-width: 0;
}

.inquiry__aside {
  grid-column: 1 / -1;
  display: grid;
  gap: 2.25rem;
  font-size: var(--fs-small);
}

.inquiry__block {
  display: grid;
  gap: 0.6rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

@media (min-width: 990px) {
  .inquiry__main {
    grid-column: 1 / span 8;
  }

  .inquiry__aside {
    grid-column: 10 / -1;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

.form {
  display: grid;
  gap: clamp(2.75rem, 2rem + 2vw, 4rem);
}

.form__group {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form__legend {
  padding: 0;
  margin-bottom: 1.25rem;
}

.form__subgroup {
  display: grid;
  gap: 0.9rem;
}

.form__honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.tiles--large {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
  gap: 0.75rem;
}

@media (max-width: 599px) {
  .tiles--large .tile {
    min-height: 5.5rem;
    gap: 0.75rem;
  }
}

.tile {
  position: relative;
  display: grid;
  gap: 1.75rem;
  align-content: space-between;
  min-height: 7.5rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease), color 0.4s var(--ease);
}

.tile--small {
  min-height: 0;
  padding: 0.8rem 1.1rem;
  gap: 0;
}

.tile input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.tile__num {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--label);
  font-variant-numeric: tabular-nums;
}

.tile__label {
  font-family: var(--f-display);
  font-size: 1.35rem;
  line-height: 1.15;
}

.tile--small .tile__label {
  font-family: var(--f-text);
  font-size: var(--fs-small);
}

.tile:hover {
  border-color: var(--fg);
}

.tile:has(input:checked) {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.tile:has(input:checked) .tile__num {
  color: var(--accent);
}

.tile:has(input:focus-visible) {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.form__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem var(--col-gap);
}

.field {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.field--full {
  grid-column: 1 / -1;
}

@media (max-width: 599px) {
  .form__fields {
    grid-template-columns: 1fr;
  }
}

.field__label {
  font-size: var(--fs-small);
  color: var(--label);
}

.field__optional {
  font-size: 0.8rem;
}

.field__input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 1.05rem;
  transition: border-color 0.4s var(--ease);
}

.field__input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.field__input:focus-visible {
  outline: none;
  box-shadow: 0 1px 0 0 var(--accent);
}

.field__input--area {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.6;
}

.field__hint {
  font-size: 0.8rem;
  color: var(--label);
}

.check {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  cursor: pointer;
  font-size: var(--fs-small);
  line-height: 1.6;
}

.check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.check__box {
  position: relative;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.1rem;
  border: 1px solid var(--line-strong);
}

.check input:checked + .check__box {
  background: var(--fg);
  border-color: var(--fg);
}

.check input:checked + .check__box::after {
  content: '';
  position: absolute;
  left: 0.45rem;
  top: 0.18rem;
  width: 0.4rem;
  height: 0.75rem;
  border-right: 2px solid var(--bg);
  border-bottom: 2px solid var(--bg);
  transform: rotate(45deg);
}

.check input:focus-visible + .check__box {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.form__status {
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-size: var(--fs-small);
}

.form__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
}

.form__submit .btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.form-success {
  display: grid;
  gap: 1.5rem;
  padding-block: 2rem;
}

.form-success:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */
.legal__body {
  grid-column: 1 / -1;
}

@media (min-width: 990px) {
  .legal__body {
    grid-column: 3 / span 7;
  }
}

/* Page heroes animate like the home hero */
.js-motion .page-hero [data-hero-title] .line__inner {
  transform: translateY(105%);
  animation: hero-failsafe-lines 0.01s linear 3s forwards;
}

.js-motion .page-hero [data-hero-reveal] {
  opacity: 0;
  animation: hero-failsafe-fade 0.01s linear 3s forwards;
}