/* One shared scene gives the portfolio room to grow beyond its current clients. */
.highlights-index-page .ch-gallery-hero {
  overflow: hidden;
  padding: 112px 0 0;
  border-bottom: 0;
  background: var(--ch-paper);
}

.highlights-index-page .ch-gallery-hero > .container {
  display: flex;
  align-items: center;
  min-height: clamp(270px, 29.2vw, 535px);
  padding: 30px 0;
}

.ch-gallery-hero__copy { width: 40%; min-width: 0; container-type: inline-size; }
.ch-gallery-hero__eyebrow { margin: 0; font-size: .73rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

.highlights-index-page .ch-gallery-hero h1 {
  margin: 20px 0 0;
  font-size: min(6rem, 16cqi);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  overflow-wrap: normal;
}

.highlights-index-page .ch-gallery-hero__bottom {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  gap: 23px;
  margin-top: 18px;
  padding-top: 0;
  border-top: 0;
}

.highlights-index-page .ch-gallery-hero__bottom p { max-width: 24rem; color: #263c22; font-size: 1.06rem; line-height: 1.5; }
.highlights-index-page .ch-gallery-hero__bottom a { display: inline-flex; width: fit-content; min-height: 46px; padding: 0 18px; font-size: .75rem; letter-spacing: .06em; text-decoration: none; }
.highlights-index-page .ch-gallery-hero a:focus-visible { outline: 3px solid #0f1712; outline-offset: 5px; }

.ch-gallery-hero__scene {
  position: absolute;
  inset: 112px 0 0 auto;
  width: 70%;
  pointer-events: none;
  mask-image: linear-gradient(to right, transparent, #000 14%);
}
.ch-gallery-hero__scene img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }

.highlights-index-page .ch-project-index { padding-top: 30px; scroll-margin-top: 110px; }
.highlights-index-page .ch-index-line { padding-bottom: 15px; }
.highlights-index-page .ch-desktop-project-list > .ch-portfolio-project:first-child { margin-top: 28px; }

@media (max-width: 1200px) {
  .highlights-index-page .ch-gallery-hero { padding-top: 98px; }
  .highlights-index-page .ch-gallery-hero > .container { padding-block: 20px; }
  .ch-gallery-hero__scene { top: 98px; }
}

@media (max-width: 780px) {
  .highlights-index-page .ch-gallery-hero { display: flex; flex-direction: column; padding: 108px 0 0; }
  .highlights-index-page .ch-gallery-hero > .container { order: -1; width: calc(100% - 32px); min-height: 0; padding: 0 0 12px; }
  .ch-gallery-hero__copy { width: 100%; }
  .ch-gallery-hero__eyebrow { font-size: .65rem; }
  .highlights-index-page .ch-gallery-hero h1 { margin-top: 10px; font-size: min(4.4rem, 15cqi); }
  .highlights-index-page .ch-gallery-hero__bottom { margin-top: 10px; }
  .highlights-index-page .ch-gallery-hero__bottom p { max-width: none; font-size: .95rem; }
  .highlights-index-page .ch-gallery-hero__bottom a { display: none; }
  .ch-gallery-hero__scene { position: relative; inset: auto; width: 100%; height: clamp(250px, 70vw, 360px); mask-image: linear-gradient(to bottom, transparent, #000 6%); }
  .ch-gallery-hero__scene img { object-position: 75% center; }
  .highlights-index-page .ch-project-index { padding-top: 20px; scroll-margin-top: 85px; }
}

@media (min-width: 781px) and (pointer: coarse) {
  .highlights-index-page .ch-gallery-hero { padding-top: 100px; }
  .ch-gallery-hero__scene { top: 100px; }
  .highlights-index-page .ch-gallery-hero__bottom a { display: none; }
}

@media (max-width: 900px) and (max-height: 620px) and (orientation: landscape) {
  .highlights-index-page .ch-gallery-hero { display: block; padding: 74px 0 0; }
  .highlights-index-page .ch-gallery-hero > .container { min-height: 255px; padding: 20px 0; }
  .ch-gallery-hero__copy { width: 40%; }
  .ch-gallery-hero__eyebrow { font-size: .65rem; }
  .highlights-index-page .ch-gallery-hero h1 { margin-top: 10px; font-size: 16cqi; }
  .highlights-index-page .ch-gallery-hero__bottom { margin-top: 10px; }
  .highlights-index-page .ch-gallery-hero__bottom p { font-size: .88rem; }
  .highlights-index-page .ch-gallery-hero__bottom a { display: none; }
  .ch-gallery-hero__scene { position: absolute; inset: 74px 0 0 auto; width: 70%; height: auto; mask-image: linear-gradient(to right, transparent, #000 14%); }
  .ch-gallery-hero__scene img { object-position: right center; }
}