@charset "UTF-8";

.work-hero {
  width: 100%;
}

.work-hero img,
.work-hero video {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.work-info {
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding: 80px 50px;
  gap: 50px;
}

.work-client p {
  font-size: 20px;
  color: #011e41;
}

.work-tagline {
  font-size: 36px;
  line-height: 1.3;
  margin-bottom: 40px;
  font-weight: 400;
}

.work-description {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  font-size: 14px;
  line-height: 1.8;
  color: #011e41;
  text-align: justify;
}

.work-video {
  display: flex;
  justify-content: center;
  padding: 0 50px 80px;
}

.work-video video {
  width: 100%;
  max-width: 400px;
}

.work-full-video,
.work-full-image {
  padding: 0 50px 80px;
}

.work-screen-video video {
  width: 100%;
  display: block;
}

.work-full-image img {
  width: 100%;
  display: block;
}

.work-full-video:has(+ .work-full-video) {
  padding-bottom: 0;
}

.work-screen-video + .work-full-image {
  padding-top: 100px;
}

.work-full-image:has(+ .work-image-grid) {
  padding-bottom: 35px;
}

.work-image-grid:has(+ .work-full-image) {
  padding-bottom: 35px;
}

.work-full-image:has(+ .work-full-image) {
  padding-bottom: 35px;
}

.work-full-image:has(+ .work-full-video) {
  padding-bottom: 35px;
}

.work-full-video:has(+ .work-image-grid) {
  padding-bottom: 35px;
}

.work-image-grid:has(+ .work-image-grid) {
  padding-bottom: 35px;
}

.work-full-video + .work-full-video {
  padding-top: 50px;
}

.work-full-video video {
  width: 100%;
  display: block;
}

.work-image {
  display: flex;
  justify-content: center;
  padding: 60px 50px 80px;
}

.work-image img {
  width: 100%;
  max-width: 700px;
}

.work-grid-caption {
  font-size: 14px;
  line-height: 1.8;
  color: #011e41;
  text-align: justify;
  margin-top: 16px;
  margin-bottom: 0;
  width: 100%;
}

.work-grid-text {
  font-size: 14px;
  line-height: 1.8;
  color: #011e41;
  text-align: justify;
  padding-top: 20px;
  margin-bottom: 0;
}

.work-dark-section {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  background-color: #000;
}

.work-dark-text {
  grid-column: 1;
  padding: 80px 0 80px 50px;
  font-size: 14px;
  line-height: 1.8;
  color: #fff;
  text-align: justify;
}

.work-dark-text p {
  margin-bottom: 0;
}

.work-dark-image {
  grid-column: 3;
  padding: 80px 50px 0 0;
}

.work-dark-image img {
  width: 100%;
  display: block;
}

.work-dark-sub {
  padding: 0 50px 80px;
}

.work-dark-sub--wide {
  grid-column: 1 / 3;
  padding-right: 250px;
}

.work-dark-sub--middle {
  grid-column: 2;
  margin: 0 -575px 0 425px;
}

.work-dark-sub--wide-left {
  grid-column: 1 / 3;
  margin: 0 -250px 0 150px;
}

.work-dark-sub--right {
  grid-column: 3;
  padding: 0 50px 80px;
}

.work-dark-sub--right-lg {
  margin-left: -100px;
  padding-top: 0;
}

.work-dark-sub--right-lg .work-dark-caption {
  max-width: 75%;
  margin-bottom: 30px;
}

.work-dark-sub--left {
  grid-column: 1;
  padding: 0 50px 80px;
  margin-right: -300px;
}

.work-dark-sub--left .work-dark-caption {
  max-width: 80%;
}

.work-dark-sub--no-bottom {
  padding-bottom: 0;
}

.work-dark-sub--wide .work-dark-caption,
.work-dark-sub--middle .work-dark-caption {
  max-width: 100%;
}

.work-dark-sub img {
  width: 100%;
  display: block;
}

.work-dark-caption {
  font-size: 14px;
  line-height: 1.8;
  color: #fff;
  margin-top: 16px;
  margin-bottom: 0;
  max-width: 50%;
}

.work-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding: 80px 50px;
}

.work-3col-item img {
  width: 100%;
  display: block;
}

.work-section-title {
  font-size: 36px;
  line-height: 1.3;
  font-weight: 400;
  padding: 60px 50px 40px;
}

.work-section-title--right {
  text-align: left;
  padding-left: 35%;
}

.work-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px;
  padding: 0 50px 80px;
}

.work-image-grid img,
.work-image-grid video {
  width: 100%;
  display: block;
  overflow: hidden;
  min-width: 0;
}

.work-image-grid video {
  clip-path: inset(0 2px 0 0);
}

.work-image-grid--3col {
  grid-template-columns: 1fr 1fr 1fr;
}

.work-image-grid--gap-120 {
  gap: 120px;
}

.work-image-grid--tower {
  display: grid;
  grid-template-columns: 1fr 1fr 0.7fr;
  gap: 35px;
  padding: 80px 50px 80px;
}

.work-image-grid--tower img,
.work-image-grid--tower video {
  width: 100%;
  display: block;
  min-width: 0;
}

.work-grid-item--shrink {
  padding-right: 215px;
}

.work-image-grid--sinkbat {
  grid-template-columns: 3.08fr 4.31fr;
  column-gap: 300px;
}

.work-image-grid--text-video {
  grid-template-columns: 2fr 1fr 1fr;
  align-items: start;
}

.work-image-grid--text-video .work-grid-text,
.work-image-grid--3col .work-grid-text {
  padding-top: 0;
}

.work-image-grid--span2-left img:first-child {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .work-hero {
    padding-top: 66px;
  }

  .work-hero img,
  .work-hero video {
    height: 56vw;
  }

  .work-info {
    grid-template-columns: 1fr;
    padding: 40px 16px 40px;
    gap: 16px;
  }

  .work-tagline {
    font-size: 24px;
  }

  .work-description {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .work-description p {
    margin-bottom: 0;
  }

  .work-video {
    padding: 0 16px 60px;
  }

  .work-video video {
    max-width: 100%;
  }

  .work-full-video,
  .work-full-image {
    padding: 0 16px 60px;
  }

  .work-grid-text {
    grid-column: 1;
  }

  .work-dark-section {
    grid-template-columns: 1fr;
  }

  .work-dark-text {
    grid-column: 1;
    padding: 16px 16px 24px;
  }

  .work-dark-image {
    grid-column: 1;
    padding: 0 16px 40px;
  }

  .work-dark-caption {
    max-width: 100%;
  }

  .work-dark-sub {
    grid-column: 1;
    padding: 0 16px 40px;
  }

  .work-dark-sub--wide {
    padding-right: 16px;
  }

  .work-dark-sub--middle {
    grid-column: 1;
    margin: 0;
    padding: 40px 16px 40px;
  }

  .work-dark-sub--wide-left {
    grid-column: 1;
    margin: 0;
    padding: 20px 16px 40px;
  }

  .work-dark-sub--left {
    grid-column: 1;
    margin: 0;
    padding: 40px 16px 40px;
  }

  .work-dark-sub--left .work-dark-caption {
    max-width: 100%;
  }

  .work-dark-sub--right-lg {
    margin-left: 0;
    padding-top: 0;
  }

  .work-dark-sub--right-lg .work-dark-caption {
    max-width: 100%;
  }

  .work-dark-sub--sp-hidden {
    display: none;
  }

  .work-dark-sub--no-bottom {
    padding-bottom: 0;
  }

  .work-3col {
    grid-template-columns: 1fr;
    padding: 40px 16px;
    gap: 12px;
  }

  .work-section-title {
    font-size: 24px;
    padding: 80px 16px 24px;
  }

  .work-section-title--right {
    padding-top: 20px;
    padding-left: 16px;
  }

  .work-image-grid {
    grid-template-columns: 1fr;
    padding: 0 16px 60px;
    gap: 16px;
  }

  .work-full-video + .work-full-video {
    padding-top: 16px;
  }

  .work-image {
    padding-top: 0;
  }

  .work-screen-video {
    margin-top: -44px;
  }

  .work-screen-video + .work-full-image {
    padding-top: 40px;
  }

  .work-full-image:has(+ .work-image-grid) {
    padding-bottom: 15px;
  }

  .work-image-grid:has(+ .work-image-grid) {
    padding-bottom: 15px;
  }

  .work-full-image:has(+ .work-full-image) {
    padding-bottom: 15px;
  }

  .work-image-grid:has(+ .work-full-image) {
    padding-bottom: 15px;
  }

  .work-full-image:has(+ .work-full-video) {
    padding-bottom: 15px;
  }

  .work-full-video:has(+ .work-image-grid) {
    padding-bottom: 15px;
  }

  .work-image-grid--3col {
    grid-template-columns: 1fr;
  }

  .work-image-grid--3col img:first-child {
    grid-column: span 1;
  }

  .work-image-grid--3col div:empty {
    display: none;
  }

  .work-image-grid--gap-120 {
    gap: 16px;
  }

  .work-image-grid--tower {
    grid-template-columns: 1fr;
    padding: 0 16px 60px;
    gap: 16px;
  }

  .work-image-grid--sinkbat {
    grid-template-columns: 1fr;
    padding: 0 16px 16px;
  }

  .work-image-grid--sinkbat div {
    padding-right: 0 !important;
  }

  .work-grid-item--shrink {
    padding-right: 0;
  }

  .work-image-grid div:empty {
    display: none;
  }

  .work-image img {
    max-width: 320px;
  }
}