/*
 * Gecko compatibility: a WORK scene fills the viewport and contains embedded
 * SVG documents, filtered artwork, and backdrop-filtered buttons. Animating a
 * filter on their common ancestor makes Firefox flatten that entire tree into
 * a changing offscreen surface during rapid scroll reversals. Avoid that
 * render-target path, including blur(0px) in the settled state. Keep the same
 * opacity/transform choreography, individual artwork shadows, and canvas.
 * This engine query intentionally does not include Firefox on iOS (WebKit).
 */
@supports (-moz-appearance: none) {
  html .work .work-scene {
    filter: none;
    transition:
      opacity .62s ease,
      visibility .62s,
      transform .9s var(--ease);
  }
}

/*
 * Unified WORK composition for tablets, laptops, desktops, and 4K displays.
 *
 * The 1440 × 900 reference is a 70em-wide composition: two 30em columns
 * separated by a 10em center lane. The Work-only unit scales from 11px on a
 * portrait tablet to 16px at 1440px, then follows the same gradual curve to a
 * 32px ceiling on full 4K displays.
 * Phone portrait and short phone-landscape layouts intentionally stay on the
 * existing <=700px / <=540px systems.
 */

@media (min-width: 701px) and (min-height: 541px) {
  html.hero-handoff-enabled .site-shell > main > .work .work__sticky {
    --work-u: clamp(11px, calc(.74405vw + 5.2857px), 16px);
    --work-composition: 70em;
    --work-column-gap: clamp(3em, 11.111vw, 10em);
    --work-outer: max(32px, calc((100vw - var(--work-composition)) / 2));
    --work-content-lift: 1.25em;
    font-size: var(--work-u);
  }

  html.hero-handoff-enabled .site-shell > main > .work .work-intro {
    align-items: center;
    justify-content: center;
    padding: max(76px, 5.75em) var(--work-outer) max(5em, 9svh);
  }

  html.hero-handoff-enabled .site-shell > main > .work .work-intro > div {
    width: min(100%, 70em);
    text-align: center;
  }

  html.hero-handoff-enabled .site-shell > main > .work .work-intro .eyebrow {
    margin-bottom: 2.5em;
    font-size: max(.75em, 10px);
    letter-spacing: .24em;
  }

  html.hero-handoff-enabled .site-shell > main > .work .work-intro h2 {
    font-size: 4.5em;
    line-height: .97;
  }

  html.hero-handoff-enabled .site-shell > main > .work .work-intro > div > p:last-child {
    max-width: 28.9em;
    margin-top: 3.8em;
    font-size: max(1.125em, 14px);
    line-height: 1.65;
  }

  html.hero-handoff-enabled .site-shell > main > .work .project-scene,
  html.hero-handoff-enabled .site-shell > main > .work .project-scene--right {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--work-column-gap);
    align-items: end;
    padding: max(76px, 5.75em) var(--work-outer) max(5em, 9svh);
    translate: none;
  }

  html.hero-handoff-enabled .site-shell > main > .work .project-scene__copy {
    align-self: end;
    justify-self: start;
    width: 100%;
    max-width: 30em;
    min-width: 0;
    translate: 0 calc(0px - var(--work-content-lift));
  }

  html.hero-handoff-enabled .site-shell > main > .work .project-scene__copy .eyebrow {
    margin-bottom: 2em;
    font-size: max(.75em, 10px);
  }

  html.hero-handoff-enabled .site-shell > main > .work .project-scene__copy h2 {
    font-size: max(2.5em, 30px);
    line-height: 1;
  }

  html.hero-handoff-enabled .site-shell > main > .work .project-scene__copy > p:not(.eyebrow) {
    max-width: 32em;
    margin-top: 2.4em;
    font-size: max(.9375em, 13px);
    line-height: 1.55;
  }

  html.hero-handoff-enabled .site-shell > main > .work .project-scene__thumbs {
    flex-wrap: nowrap;
    gap: 1.25em;
    margin: 2.25em 0;
  }

  html.hero-handoff-enabled .site-shell > main > .work .project-scene__thumbs a {
    aspect-ratio: 5 / 7;
    width: 6.25em;
    min-width: 0;
    border-radius: .625em;
  }

  html.hero-handoff-enabled .site-shell > main > .work .project-scene__feature,
  html.hero-handoff-enabled .site-shell > main > .work .project-scene--right .project-scene__feature {
    order: 2;
    align-self: center;
    justify-self: center;
    justify-content: center;
    width: min(36em, calc(100% + 6em));
    min-width: 0;
    max-width: none;
    overflow: visible;
    translate: 0 calc(
      14svh - var(--work-content-lift) +
      var(--work-feature-anchor-shift, 0px)
    );
  }

  html.hero-handoff-enabled .site-shell > main > .work .project-scene__feature > img,
  html.hero-handoff-enabled .site-shell > main > .work .project-scene__videostudio-animation,
  html.hero-handoff-enabled .site-shell > main > .work .project-scene__coreldraw-animation {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 34em;
    object-fit: contain;
    object-position: center;
  }

  html.hero-handoff-enabled .site-shell > main > .work .project-scene__parallels-lockup {
    width: min(100%, 32.9em);
    max-width: 100%;
    height: auto;
    max-height: 34em;
    aspect-ratio: 1855 / 1900;
  }

  html.hero-handoff-enabled .site-shell > main > .work .project-scene__clearwire-animation {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 34em;
  }

  html.hero-handoff-enabled .site-shell > main > .work .work__stage-index {
    right: auto;
    bottom: max(1.5625em, env(safe-area-inset-bottom));
    left: 50%;
    flex-direction: column;
    align-items: center;
    gap: .5em;
    width: max-content;
    max-width: calc(100vw - 40px);
    font-size: 1em;
    transform: translateX(-50%);
  }

  html.hero-handoff-enabled .site-shell > main > .work .work__section-indicator {
    --bw-work-segment-min: 2.1875em;
    --bw-work-segment-active: 9.625em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6875em;
  }

  html.hero-handoff-enabled .site-shell > main > .work .work__stage-button {
    appearance: none;
    position: relative;
    flex: none;
    overflow: visible;
    width: var(--bw-work-segment-min) !important;
    height: 2.75em;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    transition: width .38s var(--ease) !important;
  }

  html.hero-handoff-enabled .site-shell > main > .work .work__stage-button.is-active {
    width: var(--bw-work-segment-active) !important;
  }

  html.hero-handoff-enabled .site-shell > main > .work .work__stage-track {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    display: block;
    overflow: hidden;
    height: .1875em;
    background: rgb(248 248 244 / .28);
    transform: translateY(-50%);
    transition: background-color .3s ease, box-shadow .3s ease !important;
  }

  html.hero-handoff-enabled .site-shell > main > .work .work__stage-button.is-active .work__stage-track {
    background: rgb(248 248 244 / .40);
    opacity: 1 !important;
  }

  html.hero-handoff-enabled .site-shell > main > .work .work__stage-track::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #7cb9b5 !important;
    box-shadow: 0 0 .875em rgb(124 185 181 / .28);
    transform-origin: 0 50%;
    opacity: 1;
    transform: scaleX(0) !important;
    transition: transform .12s linear !important;
  }

  html.hero-handoff-enabled .site-shell > main > .work .work__stage-button.is-active .work__stage-track::after {
    transform: scaleX(var(--segment-fill, 0)) !important;
  }

  html.hero-handoff-enabled .site-shell > main > .work .work__stage-button.is-complete .work__stage-track {
    background: #7cb9b5 !important;
    box-shadow: 0 0 .875em rgb(124 185 181 / .28);
  }

  html.hero-handoff-enabled .site-shell > main > .work .work__stage-button.is-complete .work__stage-track::after {
    display: none;
  }

  html.hero-handoff-enabled .site-shell > main > .work .work__stage-number {
    position: absolute;
    bottom: calc(50% + .75em);
    left: 50%;
    display: block;
    opacity: 0;
    color: rgb(248 248 244 / .82);
    font-size: max(.5em, 8px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .12em;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity .18s ease, transform .18s var(--ease);
  }

  html.hero-handoff-enabled .site-shell > main > .work .work__stage-button:hover .work__stage-number,
  html.hero-handoff-enabled .site-shell > main > .work .work__stage-button:focus-visible .work__stage-number {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  html.hero-handoff-enabled .site-shell > main > .work .work__stage-button:focus-visible {
    outline: none;
  }

  html.hero-handoff-enabled .site-shell > main > .work .work__stage-button:hover .work__stage-track,
  html.hero-handoff-enabled .site-shell > main > .work .work__stage-button:focus-visible .work__stage-track {
    box-shadow: 0 0 .75em rgb(124 185 181 / .36);
  }

  html.hero-handoff-enabled .site-shell > main > .work .work__stage-button:focus-visible .work__stage-track {
    outline: 1px solid var(--aura);
    outline-offset: 4px;
  }

  html.hero-handoff-enabled .site-shell > main > .work .work__stage-label {
    display: inline-flex;
    justify-content: center;
    align-items: baseline;
    column-gap: clamp(14px, 1.4vw, 20px);
    color: rgb(248 248 244 / .82);
    font-size: max(.625em, 9px);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
  }

  html.hero-handoff-enabled .site-shell > main > .work .work__stage-name {
    color: rgb(248 248 244 / .82);
    text-transform: uppercase;
  }

  html.hero-handoff-enabled .site-shell > main > .work .work__stage-count {
    display: inline-flex;
    gap: .45em;
    color: rgb(248 248 244 / .82);
  }

  html.hero-handoff-enabled .site-shell > main > .work .work__stage-count,
  html.hero-handoff-enabled .site-shell > main > .work .work__stage-count > span {
    opacity: 1;
  }

  html.hero-handoff-enabled .site-shell > main > .work .work__stage-current {
    color: var(--aura);
  }
}

@media (min-width: 701px) and (max-width: 1440px) and (min-height: 541px) {
  html.hero-handoff-enabled .site-shell > main > .work .project-scene__copy {
    translate: 0 calc(20px - var(--work-content-lift));
  }
}

@media (min-width: 1441px) and (min-height: 541px) {
  html.hero-handoff-enabled .site-shell > main > .work .work__sticky {
    --work-u: clamp(16px, calc(.74405vw + 5.2857px), 32px);
  }
}

@media (min-width: 701px) and (max-width: 1100px) and (min-height: 541px) and (orientation: portrait) {
  html.hero-handoff-enabled .site-shell > main > .work .work__sticky {
    --work-u: clamp(12px, min(1.55vw, 1.25svh), 15px);
    --work-outer: clamp(40px, 6vw, 72px);
  }

  html.hero-handoff-enabled .site-shell > main > .work .project-scene,
  html.hero-handoff-enabled .site-shell > main > .work .project-scene--right {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: end;
    align-items: stretch;
    justify-items: center;
    row-gap: clamp(18px, 2.2svh, 28px);
    padding: max(96px, 9svh) var(--work-outer) max(118px, 11svh);
  }

  html.hero-handoff-enabled .site-shell > main > .work .project-scene__feature,
  html.hero-handoff-enabled .site-shell > main > .work .project-scene--right .project-scene__feature {
    grid-column: 1;
    grid-row: 1;
    order: 0;
    align-self: end;
    justify-self: center;
    width: min(100%, 42em);
    height: clamp(240px, 31svh, 390px);
    translate: none;
  }

  html.hero-handoff-enabled .site-shell > main > .work .project-scene__feature > img,
  html.hero-handoff-enabled .site-shell > main > .work .project-scene__videostudio-animation,
  html.hero-handoff-enabled .site-shell > main > .work .project-scene__coreldraw-animation,
  html.hero-handoff-enabled .site-shell > main > .work .project-scene__clearwire-animation {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 100%;
  }

  html.hero-handoff-enabled .site-shell > main > .work .project-scene__parallels-lockup {
    width: min(100%, 32em);
    max-width: 100%;
    height: auto;
    max-height: 100%;
  }

  html.hero-handoff-enabled .site-shell > main > .work .project-scene__copy {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    justify-self: center;
    width: min(100%, 48em);
    max-width: 48em;
    translate: none;
  }

  html.hero-handoff-enabled .site-shell > main > .work .project-scene__copy h2 {
    font-size: clamp(34px, 2.8em, 42px);
  }

  html.hero-handoff-enabled .site-shell > main > .work .project-scene__copy > p:not(.eyebrow) {
    max-width: 39em;
    font-size: max(1.0625em, 14px);
  }

  html.hero-handoff-enabled .site-shell > main > .work .project-scene__thumbs a {
    width: 6.75em;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 701px) and (min-height: 541px) {
  html.hero-handoff-enabled .site-shell > main > .work .work__stage-button,
  html.hero-handoff-enabled .site-shell > main > .work .work__stage-track::after,
  html.hero-handoff-enabled .site-shell > main > .work .work__stage-number {
    transition: none !important;
  }
}