/* The supplied FV film stays in the viewport while WORKS scrolls over it.
   clip-path confines the fixed layer to this section without moving the film. */
#works {
  isolation: isolate;
  clip-path: inset(0);
  background: #14191c;
  color: var(--paper);
}
#works .works-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
#works .works-background video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; }
#works .works-background video[hidden] { display: none; }
#works .hero-shade {
  background: linear-gradient(90deg, rgb(8 14 20 / .76), rgb(8 14 20 / .62) 54%, rgb(8 14 20 / .52)),
    linear-gradient(180deg, rgb(5 10 15 / .3), transparent 35%, rgb(6 13 20 / .44));
}
#works .section-heading > p,
#works .kicker-right,
#works .metric-label,
#works .metric p,
#works .producer-label .tiny-label,
#works .producer-name > span,
#works .producer-name > small,
#works .producer > p { color: rgb(255 255 255 / .85); }
#works .work-visual { background: rgb(8 14 20 / .28); border: 1px solid rgb(255 255 255 / .2); }
#works .metrics,
#works .metric { border-color: rgb(255 255 255 / .28); }
#works .producer-photo { background: rgb(8 14 20 / .25); border-color: rgb(255 255 255 / .4); color: rgb(255 255 255 / .8); }
@media (max-width: 760px) {
  #works .works-background video { object-position: 52% 50%; }
}

#works .work-visual-image { height: auto; background: none; border: 0; }
#works .work-visual-image > img { display: block; width: 100%; height: auto; }

#works #works-title { font-size: clamp(23px, 2vw, 29px); line-height: 1.9; letter-spacing: -.035em; }
@media (max-width: 760px) {
  #works #works-title { font-size: 20px; line-height: 1.9; }
  #works #works-title br { display: none; }
}

/* Project image and results read together, with the supplied art uncropped. */
#works .works-results {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 56px;
  align-items: center;
}
#works .work-visual-image { min-width: 0; border-radius: 0; }
#works .works-results .metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  border: 0;
  row-gap: 0;
}
#works .works-results .metric {
  padding: 22px 0 22px 24px;
  border: 0;
  min-width: 0;
}
#works .works-results .metric:nth-child(odd) { padding-left: 0; padding-right: 24px; border-right: 1px solid rgb(255 255 255 / .28); }
#works .works-results .metric:nth-child(-n+2) { border-bottom: 1px solid rgb(255 255 255 / .28); }
#works .works-results .metric-label { font-size: 9px; letter-spacing: .04em; }
#works .works-results .metric strong { font-size: clamp(36px, 3.2vw, 46px); line-height: 1.4; margin-top: 12px; margin-bottom: 4px; }
#works .works-results .metric p { font-size: 15px; line-height: 1.9; }
#works .producer { margin-top: 48px; border-top: 1px solid rgb(255 255 255 / .28); }
@media (max-width: 1100px) {
  #works .works-results { grid-template-columns: 1fr 1fr; gap: 32px; }
  #works .works-results .metric { padding-left: 18px; }
  #works .works-results .metric:nth-child(odd) { padding-left: 0; padding-right: 18px; }
  #works .works-results .metric strong { font-size: 36px; }
}
@media (max-width: 900px) {
  #works .works-results { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 760px) {
  #works .works-results .metric { padding-block: 20px; }
  #works .works-results .metric-label { font-size: 8px; }
  #works .producer { margin-top: 32px; }
}