/* A scroll-scrubbed film and a still artwork share the same opening. */
html:has(.cp-scroll-active) { scroll-padding-top: 0; }
.company-portfolios .cp-scroll {
  --cp-stage-size: clamp(515px, calc(100svh - 85px), 1040px);
  --cp-scroll-travel: clamp(510px, 92svh, 970px);
  --cp-scroll-progress: 0;
  --cp-seam: 49%;
  --cp-sweep: 0;
  --cp-feather: 0;
  --cp-sweep-distance: calc(var(--cp-sweep) * 54%);
  --cp-edge-feather: calc(var(--cp-feather) * clamp(24px, 7.5vw, 62px));
  --cp-edge-angle: calc(28deg * var(--cp-sweep) * (1 - var(--cp-sweep)));
  --cp-scene-shade:
    linear-gradient(180deg, #08090bb5 0%, #08090b00 29%, #08090b04 48%, #08090bbf 75%, #08090b 100%),
    linear-gradient(90deg, #08090b7a 0%, #08090b30 33%, #08090b00 70%);
  position: relative;
  background: #08090b;
}
.company-portfolios .cp-scroll-active {
  min-height: calc(var(--cp-stage-px, var(--cp-stage-size)) + var(--cp-scroll-travel));
  margin-block-end: calc(-1 * var(--cp-stage-px, 0px));
  z-index: 1;
  background: transparent;
  pointer-events: none;
}
.company-portfolios .cp-scroll-stage {
  display: flex;
  position: relative;
  isolation: isolate;
  min-height: var(--cp-stage-size);
  overflow: hidden;
  background: transparent;
}
.company-portfolios .cp-scroll-active .cp-scroll-stage {
  position: sticky;
  top: 0;
}
.company-portfolios .cp-scroll-visual,
.company-portfolios .cp-scroll-media,
.company-portfolios .cp-scroll-shade,
.company-portfolios .cp-scroll-wings,
.company-portfolios .cp-scroll-wing,
.company-portfolios .cp-scroll-wing::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.company-portfolios .cp-scroll-visual { background: #181513; }
.company-portfolios .cp-scroll-crossing:not(.cp-scroll-split) .cp-scroll-visual {
  --cp-clear-left: calc(var(--cp-seam) - var(--cp-sweep-distance));
  --cp-clear-right: calc(var(--cp-seam) + var(--cp-sweep-distance));
  mask-image: linear-gradient(90deg, #000 calc(var(--cp-clear-left) - var(--cp-edge-feather)),
    transparent var(--cp-clear-left), transparent var(--cp-clear-right),
    #000 calc(var(--cp-clear-right) + var(--cp-edge-feather)));
}
.company-portfolios .cp-scroll-wings { display: none; }
.company-portfolios .cp-scroll-split .cp-scroll-visual { background: transparent; }
.company-portfolios .cp-scroll-split .cp-scroll-media,
.company-portfolios .cp-scroll-split .cp-scroll-shade { visibility: hidden; }
.company-portfolios .cp-scroll-split .cp-scroll-wings { display: block; }
.company-portfolios .cp-scroll-wing-left {
  --cp-wing-rise: calc(var(--cp-sweep) * 2.4%);
  mask-image: linear-gradient(calc(90deg - var(--cp-edge-angle)),
    #000 calc(var(--cp-seam) - var(--cp-edge-feather)), transparent calc(var(--cp-seam) + .5px));
  transform: translate3d(calc(-1 * var(--cp-sweep-distance)), 0, 0);
}
.company-portfolios .cp-scroll-wing-right {
  --cp-wing-rise: calc(var(--cp-sweep) * -1.8%);
  mask-image: linear-gradient(calc(90deg + var(--cp-edge-angle)),
    transparent calc(var(--cp-seam) - .5px), #000 calc(var(--cp-seam) + var(--cp-edge-feather)));
  transform: translate3d(var(--cp-sweep-distance), 0, 0);
}
.company-portfolios .cp-scroll-arrived .cp-scroll-stage {
  visibility: hidden;
  pointer-events: none;
}
.company-portfolios .cp-scroll-artwork,
.company-portfolios .cp-scroll-video,
.company-portfolios .cp-scroll-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 44% 48%;
}
.company-portfolios .cp-scroll-media,
.company-portfolios .cp-scroll-frame {
  transform: translate3d(0, var(--cp-wing-rise, 0px), 0) scale(var(--cp-flight-scale, 1));
  transform-origin: var(--cp-seam) 50%;
}
.company-portfolios .cp-scroll-video {
  opacity: 0;
  transition: opacity .45s ease;
}
.company-portfolios .cp-scroll-active.cp-scroll-ready .cp-scroll-video {
  opacity: 1;
}
.company-portfolios .cp-scroll-wing::after { content: ""; }
.company-portfolios .cp-scroll-shade,
.company-portfolios .cp-scroll-wing::after {
  background: var(--cp-scene-shade);
}
.company-portfolios .cp-scroll-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  opacity: var(--cp-copy-visibility, 1);
  padding: clamp(22px, 4vw, 58px) max(5vw, env(safe-area-inset-right)) clamp(26px, 4vw, 59px) max(5vw, env(safe-area-inset-left));
}
.company-portfolios .cp-scroll-active .cp-scroll-enter { pointer-events: auto; }
.company-portfolios .cp-scroll-crossing .cp-scroll-enter { pointer-events: none; }
.company-portfolios .cp-scroll-crossing .cp-scroll-copy:focus-within {
  opacity: 1;
}
.company-portfolios .cp-scroll-crossing .cp-scroll-enter:focus-visible { pointer-events: auto; }
.company-portfolios .cp-scroll-crossing .cp-scroll-progress { visibility: hidden; }
.company-portfolios .cp-scroll-copy .cp-opening-meta {
  color: #f2ede3;
  text-shadow: 0 2px 10px #08090b;
  margin-bottom: auto;
}
.company-portfolios .cp-scroll-copy h1 {
  font-size: clamp(64px, 8vw, 135px);
  line-height: .9;
  text-shadow: 0 6px 40px #08090b88;
  margin: clamp(112px, 22vh, 280px) 0 25px;
  translate: 0 calc(var(--cp-scroll-progress) * -22px);
}
.company-portfolios .cp-scroll-copy .cp-opening-bottom p {
  max-width: 64ch;
  color: #dedbd2;
  text-shadow: 0 2px 8px #08090b;
}
.company-portfolios .cp-scroll-enter {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  align-self: end;
  gap: 18px;
  flex-shrink: 0;
  min-height: 46px;
  padding: 9px 0 9px 1px;
  border-bottom: 1px solid #d7c19580;
  font-size: 12px;
  line-height: 1.45;
  color: #f7efdb;
}
.company-portfolios .cp-scroll-enter span {
  font-size: 20px;
  color: var(--cp-accent);
}
.company-portfolios .cp-scroll-enter:hover {
  border-color: #f7efdb;
}
.company-portfolios .cp-scroll-progress {
  position: absolute;
  bottom: 0;
  inset-inline: 5%;
  height: 1px;
  background: #d7c19526;
  pointer-events: none;
}
.company-portfolios .cp-scroll-progress span {
  display: block;
  height: 100%;
  background: var(--cp-accent);
  transform: scaleX(var(--cp-scroll-progress));
  transform-origin: left;
}
.company-portfolios #portfolio-collections {
  position: relative;
  z-index: 0;
  scroll-margin-top: 12px;
}
.company-portfolios .cp-scroll-active:not(.cp-scroll-arrived) + #portfolio-collections {
  pointer-events: none;
}
.company-portfolios .cp-scroll-active + #portfolio-collections .cp-chapter { scroll-margin-top: 12px; }
.company-portfolios #portfolio-collections:not(:has(.cp-chapter[open])) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  gap: clamp(10px, 1.4vw, 24px);
  min-height: min(615px, 82svh);
  padding: 40px 4vw 64px;
}
.company-portfolios #portfolio-collections:not(:has(.cp-chapter[open])) .cp-chapter {
  border: 1px solid var(--cp-line);
  min-width: 0;
}
.company-portfolios .cp-scroll-active:not(.cp-scroll-arrived) + #portfolio-collections:not(:has(.cp-chapter[open])) .cp-chapter {
  --cp-card-distance: calc(1 - var(--cp-card-approach, 1));
  transform: translate3d(0, calc(var(--cp-card-distance) * 34px), 0) scale(calc(1 - var(--cp-card-distance) * .16));
}
.company-portfolios #portfolio-collections:not(:has(.cp-chapter[open])) .cp-trigger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: clamp(235px, 29vw, 395px);
  padding: 19px clamp(12px, 1.8vw, 30px);
}
.company-portfolios #portfolio-collections:not(:has(.cp-chapter[open])) .cp-trigger-meta {
  flex-wrap: wrap;
  gap: 5px 12px;
}
.company-portfolios #portfolio-collections:not(:has(.cp-chapter[open])) .cp-trigger-title {
  max-width: none;
  margin: auto 0 0;
  font-size: clamp(28px, 4.25vw, 65px);
}
.company-portfolios #portfolio-collections:not(:has(.cp-chapter[open])) .cp-planes {
  width: 77%;
  right: 11%;
  height: 75%;
  top: 6%;
}
.company-portfolios .cp-trigger .cp-planes {
  translate: 0 var(--cp-plane-offset, 0px);
}
@media (min-width:761px) {
  .company-portfolios .cp-scroll-copy { padding-bottom: clamp(88px, 7vw, 120px); }
}
@media (max-width:760px) {
  .company-portfolios #portfolio-collections:not(:has(.cp-chapter[open])) {
    grid-template-columns: minmax(0, 1fr);
    min-height: min(745px, calc(100svh - 65px));
    padding: 24px 5vw 112px;
  }
  .company-portfolios #portfolio-collections:not(:has(.cp-chapter[open])) .cp-trigger {
    min-height: 100px;
    padding: 14px 5vw 16px;
    gap: 10px;
  }
  .company-portfolios #portfolio-collections:not(:has(.cp-chapter[open])) .cp-trigger-title { font-size: clamp(27px, 7vw, 43px); }
  .company-portfolios #portfolio-collections:not(:has(.cp-chapter[open])) .cp-trigger-bottom { display: none; }
  .company-portfolios #portfolio-collections:not(:has(.cp-chapter[open])) .cp-planes { width: 39%; right: 5%; height: 91%; top: 4%; }
  .company-portfolios .cp-scroll {
    --cp-stage-size: clamp(510px, calc(100svh - 75px), 820px);
    --cp-scroll-travel: clamp(440px, 82svh, 820px);
    --cp-scene-shade: linear-gradient(180deg, #08090bb5 0%, #08090b00 26%, #08090b15 44%, #08090bcf 70%, #08090b 100%);
  }
  .company-portfolios .cp-scroll-artwork,
  .company-portfolios .cp-scroll-video,
  .company-portfolios .cp-scroll-frame {
    object-position: calc(39% + var(--cp-scroll-progress) * 11%) 44%;
  }
  .company-portfolios .cp-scroll-copy h1 {
    font-size: clamp(44px, 11.5vw, 79px);
    margin-bottom: 15px;
  }
  .company-portfolios .cp-scroll-copy { padding-bottom: max(120px, calc(186px - var(--cp-scroll-progress) * 250px)); }
  .company-portfolios .cp-scroll-copy .cp-opening-bottom p {
    max-width: 52ch;
    font-size: 11px;
  }
  .company-portfolios .cp-scroll-enter {
    margin-top: 10px;
    min-height: 44px;
    font-size: 11px;
  }
}
@media (max-width:760px) and (max-height:650px) {
  .company-portfolios .cp-scroll-copy { padding-top: 18px; }
  .company-portfolios .cp-scroll-copy h1 {
    margin-top: clamp(30px, 8svh, 54px);
    font-size: clamp(38px, 10.5vw, 60px);
  }
  .company-portfolios .cp-scroll-copy .cp-opening-bottom p { line-height: 1.55; }
}
@media (prefers-reduced-motion:reduce) {
  .company-portfolios .cp-scroll-active { min-height: 0; margin-block-end: 0; }
  .company-portfolios .cp-scroll-active .cp-scroll-stage { position: relative; }
  .company-portfolios .cp-scroll-video { display: none; }
  .company-portfolios .cp-trigger .cp-planes { translate: none; }
}
@media (forced-colors:active) {
  .company-portfolios .cp-scroll-visual,
  .company-portfolios .cp-scroll-media,
  .company-portfolios .cp-scroll-shade,
  .company-portfolios .cp-scroll-progress { display: none; }
  .company-portfolios .cp-scroll-enter { border-bottom: 1px solid LinkText; }
}