:root {
        --fw-ink: #f7f7f5;
        --fw-muted: rgba(247, 247, 245, 0.72);
        --fw-line: rgba(255, 255, 255, 0.14);
        --fw-panel: #101010;
        --fw-red: #d51f18;
        --fw-gold: #c79b5c;
        --fw-ease: cubic-bezier(0.22, 0.9, 0.28, 1);
      }

      body.featured-page {
        background: #050505;
        color: var(--fw-ink);
      }

      body.featured-page .grid-overlay {
        display: none;
      }

      body.featured-page .ac-header {
        background: rgba(5, 5, 5, 0.18);
        backdrop-filter: blur(10px);
      }

      .featured-hero {
        align-items: center;
        display: flex;
        justify-content: center;
        min-height: 100svh;
        overflow: hidden;
        padding: clamp(7rem, 13vh, 10rem) clamp(1.5rem, 4vw, 4.5rem) 4rem;
        position: relative;
      }

      .featured-hero__copy {
        align-self: center;
        max-width: min(58rem, 100%);
        position: relative;
        text-align: center;
        z-index: 3;
      }

      .featured-hero__media,
      .featured-hero__media::before,
      .featured-hero__media::after {
        inset: 0;
        position: absolute;
      }

      .featured-hero__media {
        inset: -8% 0;
        z-index: 0;
      }

      .featured-hero__media::before {
        background-image: var(--hero-media);
        background-position: center;
        background-size: cover;
        content: "";
        filter: saturate(0.8) contrast(1.05) brightness(0.62);
        transform: scale(1.04);
        will-change: transform;
      }

      .featured-hero__media::after {
        background:
          linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.48) 45%,
            rgba(0, 0, 0, 0.7) 100%
          ),
          linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.42) 0%,
            rgba(0, 0, 0, 0.08) 42%,
            #050505 100%
          );
        content: "";
      }

      .featured-hero__scan {
        background: repeating-linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.04) 0 1px,
          transparent 1px 7rem
        );
        inset: 0;
        opacity: 0.45;
        pointer-events: none;
        position: absolute;
        z-index: 1;
      }

      .featured-hero__spotlight {
        background: radial-gradient(
          circle,
          rgba(255, 255, 255, 0.18) 0%,
          rgba(199, 155, 92, 0.08) 35%,
          transparent 68%
        );
        border-radius: 50%;
        height: 34rem;
        left: 52%;
        mix-blend-mode: screen;
        opacity: 0.72;
        pointer-events: none;
        position: absolute;
        top: 45%;
        transform: translate(-50%, -50%);
        width: 34rem;
        z-index: 2;
      }

      .featured-hero__copy {
        align-self: center;
        max-width: min(58rem, 100%);
        position: relative;
        text-align: center;
        z-index: 3;
      }

      .featured-hero__title {
        font-family: "Limelight", Georgia, serif;
        font-size: clamp(2.8rem, 5vw, 4.8rem);
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.18;
        text-transform: uppercase;
      }

      .featured-hero__title span {
        display: block;
        opacity: 0;
        transform: translateY(2.5rem);
      }

      .featured-hero__lede {
        color: rgba(255, 255, 255, 0.82);
        font-size: clamp(0.82rem, 1.15vw, 1rem);
        line-height: 1.7;
        margin: 2rem auto 0;
        max-width: 42rem;
        opacity: 1;
        text-align: center;
        transform: translateY(0);
      }

      .featured-hero__actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.6rem;
        margin-top: 2.4rem;
        opacity: 0;
        transform: translateY(1rem);
      }

      .featured-pill {
        align-items: center;
        border: 2px solid #ffffff;
        border-radius: 999px;
        color: #ffffff;
        display: inline-flex;
        font-size: clamp(0.95rem, 1.3vw, 1.25rem);
        font-weight: 600;
        isolation: isolate;
        justify-content: center;
        min-height: 3.1rem;
        min-width: 13rem;
        overflow: hidden;
        padding: 0.6rem 1.3rem;
        position: relative;
      }

      .featured-pill::before {
        background: #ffffff;
        content: "";
        inset: 0;
        position: absolute;
        transform: translateY(105%);
        transition: transform 0.32s var(--fw-ease);
        z-index: -1;
      }

      .featured-pill:hover,
      .featured-pill:focus-visible {
        color: #050505;
      }

      .featured-pill:hover::before,
      .featured-pill:focus-visible::before {
        transform: translateY(0);
      }

      .hero-scroll-marker {
        align-items: center;
        bottom: 2.2rem;
        color: rgba(255, 255, 255, 0.75);
        display: flex;
        font-size: 0.68rem;
        gap: 0.75rem;
        left: clamp(1.5rem, 4vw, 4.5rem);
        letter-spacing: 0.16em;
        position: absolute;
        text-transform: uppercase;
        z-index: 4;
      }

      .hero-scroll-marker span {
        background: linear-gradient(#ffffff, transparent);
        display: block;
        height: 2.8rem;
        overflow: hidden;
        position: relative;
        width: 1px;
      }

      .hero-scroll-marker span::after {
        animation: scroll-drop 1.8s ease-in-out infinite;
        background: #ffffff;
        content: "";
        height: 1.4rem;
        left: 0;
        position: absolute;
        top: -1.4rem;
        width: 1px;
      }

      @keyframes scroll-drop {
        to {
          top: 2.8rem;
        }
      }

      .filter-dock {
        align-items: center;
        background: #090909;
        border-bottom: 1px solid var(--fw-line);
        border-top: 1px solid var(--fw-line);
        display: flex;
        flex-wrap: wrap;
        gap: 0.7rem;
        margin-top: 0;
        padding: 1rem clamp(1.5rem, 4vw, 4.5rem);
        position: relative;
        z-index: 4;
      }

      .filter-btn {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        color: var(--fw-muted);
        cursor: pointer;
        font: inherit;
        font-size: 0.78rem;
        letter-spacing: 0.1em;
        padding: 0.6rem 1rem;
        text-transform: uppercase;
        transition:
          border-color 0.25s ease,
          color 0.25s ease,
          background 0.25s ease;
      }

      .filter-btn:hover,
      .filter-btn:focus-visible,
      .filter-btn.active {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.58);
        color: #ffffff;
      }

      .featured-section {
        padding: clamp(4.5rem, 8vw, 7rem) clamp(1.5rem, 4vw, 4.5rem);
        position: relative;
      }

      .section-kicker {
        color: var(--fw-gold);
        display: block;
        font-size: 0.72rem;
        letter-spacing: 0.22em;
        margin-bottom: 0.9rem;
        text-transform: uppercase;
      }

      .section-title {
        font-family: "Limelight", Georgia, serif;
        font-size: clamp(2.3rem, 4.6vw, 4.8rem);
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.05;
        max-width: 65rem;
        text-transform: uppercase;
      }

      .section-copy {
        color: var(--fw-muted);
        font-size: 1.05rem;
        margin-top: 1rem;
        max-width: 42rem;
      }

      .work-strip {
        border-bottom: 16px solid #141414;
        border-top: 16px solid #141414;
        cursor: grab;
        display: flex;
        overflow-x: auto;
        padding: 0 clamp(1.5rem, 4vw, 4.5rem) 1rem;
        position: relative;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
      }

      .work-strip::-webkit-scrollbar {
        display: none;
      }

      .work-strip.dragging {
        cursor: grabbing;
        scroll-snap-type: none;
      }

      .work-card {
        aspect-ratio: 4 / 5;
        flex: 0 0 min(22rem, 78vw);
        isolation: isolate;
        margin-right: 0.4rem;
        overflow: hidden;
        position: relative;
        scroll-snap-align: start;
        transition:
          flex-basis 0.45s var(--fw-ease),
          filter 0.45s var(--fw-ease),
          opacity 0.45s var(--fw-ease),
          transform 0.45s var(--fw-ease);
      }

      .work-card.hidden-cat {
        flex-basis: 4.5rem;
        filter: grayscale(1);
        opacity: 0.18;
        pointer-events: none;
      }

      .work-card__image {
        background-image: var(--image);
        background-position: var(--pos, center);
        background-size: cover;
        inset: 0;
        position: absolute;
        transform: scale(1.04);
        transition: transform 0.65s var(--fw-ease);
        z-index: -2;
      }

      .work-card__image video {
        display: block;
        height: 100%;
        inset: 0;
        object-fit: cover;
        position: absolute;
        width: 100%;
      }

      .work-card::after {
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0.04),
          rgba(0, 0, 0, 0.12) 48%,
          rgba(0, 0, 0, 0.92)
        );
        content: "";
        inset: 0;
        position: absolute;
        z-index: -1;
      }

      .work-card:hover {
        filter: brightness(1.12);
        transform: translateY(-0.35rem);
      }

      .work-card:hover .work-card__image {
        transform: scale(1.12);
      }

      .work-card__meta {
        display: flex;
        justify-content: space-between;
        left: 1rem;
        position: absolute;
        right: 1rem;
        top: 1rem;
      }

      .work-card__meta span {
        background: rgba(0, 0, 0, 0.54);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 999px;
        font-size: 0.68rem;
        letter-spacing: 0.12em;
        padding: 0.32rem 0.55rem;
      }

      .work-card__play {
        align-items: center;
        border: 1px solid rgba(255, 255, 255, 0.68);
        border-radius: 999px;
        color: #ffffff;
        display: flex;
        font-size: 0.65rem;
        font-weight: 600;
        height: auto;
        justify-content: center;
        left: 50%;
        letter-spacing: 0.08em;
        opacity: 0;
        padding: 0.8rem 1.2rem;
        position: absolute;
        text-align: center;
        text-transform: uppercase;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.75);
        transition:
          opacity 0.35s ease,
          transform 0.35s var(--fw-ease);
        width: auto;
      }

      .work-card:hover .work-card__play {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }

      .work-card__play svg {
        display: none;
      }

      .work-card__play::before {
        content: 'Coming soon';
      }

      .work-card__copy {
        bottom: 0;
        left: 0;
        padding: 1.35rem;
        position: absolute;
        right: 0;
      }

      .work-card__copy small {
        color: var(--fw-gold);
        display: block;
        font-size: 0.68rem;
        letter-spacing: 0.18em;
        margin-bottom: 0.5rem;
        text-transform: uppercase;
      }

      .work-card__copy h3 {
        font-family: "Limelight", Georgia, serif;
        font-size: 1.65rem;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.04;
        text-transform: uppercase;
      }

      .work-card__copy p {
        color: rgba(255, 255, 255, 0.74);
        font-size: 0.9rem;
        margin-top: 0.65rem;
      }

      .category-world {
        align-items: center;
        border-top: 1px solid var(--fw-line);
        display: grid;
        gap: clamp(2rem, 5vw, 5rem);
        grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 1.1fr);
        isolation: isolate;
        min-height: 115svh;
        overflow: hidden;
        padding: clamp(5rem, 8vw, 8rem) clamp(1.5rem, 4vw, 4.5rem);
        position: relative;
      }

      .category-world::before {
        background: conic-gradient(
          from 90deg,
          transparent,
          var(--world-glow),
          transparent 45%,
          rgba(255, 255, 255, 0.12),
          transparent 72%
        );
        border-radius: 50%;
        content: "";
        display: none;
        filter: blur(1px);
        height: min(48rem, 60vw);
        opacity: 0.5;
        position: absolute;
        right: -12rem;
        top: 12%;
        width: min(48rem, 60vw);
        z-index: 0;
        pointer-events: none;
        transform: translateZ(0);
      }

      .category-world::after {
        background:
          repeating-linear-gradient(
            110deg,
            rgba(255, 255, 255, 0.055) 0 1px,
            transparent 1px 5rem
          ),
          radial-gradient(
            circle at 20% 20%,
            var(--world-haze),
            transparent 35%
          ),
          linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 45%);
        content: "";
        inset: 0;
        opacity: 0.88;
        position: absolute;
        z-index: -1;
      }

      .category-world--film {
        --world-glow: rgba(213, 31, 24, 0.72);
        --world-haze: rgba(199, 155, 92, 0.14);
        background: #060606;
      }

      .film-bg {
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        position: absolute;
        z-index: 0;
      }

      .film-bg::after {
        background:
          linear-gradient(
            90deg,
            rgba(6, 6, 6, 0.94) 0%,
            rgba(6, 6, 6, 0.78) 38%,
            rgba(6, 6, 6, 0.42) 72%,
            rgba(6, 6, 6, 0.86) 100%
          ),
          linear-gradient(
            180deg,
            rgba(6, 6, 6, 0.9),
            rgba(6, 6, 6, 0.35) 45%,
            rgba(6, 6, 6, 0.92)
          );
        content: "";
        inset: 0;
        position: absolute;
      }

      .film-bg video {
        height: 100%;
        object-fit: cover;
        opacity: 0.36;
        transform: scale(1.08);
        width: 100%;
      }

      .category-world--film .category-world__stage {
        background:
          radial-gradient(
            circle at 18% 18%,
            rgba(213, 31, 24, 0.2),
            transparent 34%
          ),
          linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%),
          rgba(0, 0, 0, 0.62);
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 2rem 7rem rgba(0, 0, 0, 0.45);
      }

      .category-world--film .video-tile {
        box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.5);
        overflow: hidden;
      }

      .category-world--film .video-tile video {
        object-fit: cover;
      }

      .category-world--film .video-tile::after {
        background: linear-gradient(
          180deg,
          transparent 45%,
          rgba(0, 0, 0, 0.62)
        );
        content: "";
        inset: 0;
        pointer-events: none;
        position: absolute;
        z-index: 1;
      }

      .category-world--commercial {
        --world-glow: rgba(64, 167, 166, 0.64);
        --world-haze: rgba(64, 167, 166, 0.12);
        background: #050808;
      }

      .category-world--commercial {
        align-items: center;
        background:
          radial-gradient(
            circle at 50% 18%,
            rgba(64, 167, 166, 0.18),
            transparent 34%
          ),
          radial-gradient(
            circle at 18% 74%,
            rgba(213, 31, 24, 0.12),
            transparent 28%
          ),
          #050808;
        gap: clamp(1.1rem, 2.6vw, 2.6rem);
        grid-template-columns: minmax(10rem, 0.64fr) minmax(
            19rem,
            0.72fr
          ) minmax(22rem, 1.34fr);
        min-height: 100svh;
      }

      .category-world--commercial::after {
        background:
          linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.08) 0 1px,
            transparent 1px 13%
          ),
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.06) 0 1px,
            transparent 1px 16%
          ),
          radial-gradient(
            circle at 50% 50%,
            transparent 0 35%,
            rgba(0, 0, 0, 0.42) 72%
          );
        background-size:
          13rem 13rem,
          13rem 13rem,
          auto;
        opacity: 0.68;
      }

      .category-world--commercial .category-world__copy {
        align-items: center;
        justify-self: center;
        max-width: 34rem;
        text-align: center;
        z-index: 5;
      }

      .category-world--commercial .category-world__label {
        justify-content: center;
      }

      .category-world--commercial .category-world__copy p {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.22);
        max-width: 31rem;
        padding: 1rem 1.1rem 0;
      }

      .category-world--commercial .motion-list {
        justify-content: center;
      }

      .commercial-media {
        display: grid;
        gap: clamp(0.8rem, 1.5vw, 1.2rem);
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(7, minmax(2.4rem, 1fr));
        height: clamp(29rem, 54vw, 41rem);
        max-width: 28rem;
        position: relative;
        width: 100%;
        z-index: 3;
      }

      .commercial-media--left {
        justify-self: end;
      }

      .commercial-media--right {
        gap: clamp(0.65rem, 1vw, 0.95rem);
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: repeat(8, minmax(2rem, 1fr));
        height: clamp(31rem, 56vw, 45rem);
        justify-self: start;
        max-width: min(49rem, 45vw);
        perspective: 1000px;
      }

      .commercial-media--right .commercial-box {
        animation-name: commercial-right-mosaic;
      }

      .commercial-box {
        animation: commercial-product-wall 8.4s ease-in-out infinite;
        animation-delay: var(--delay, 0s);
        background:
          radial-gradient(
            circle at 22% 16%,
            rgba(255, 255, 255, 0.24),
            transparent 26%
          ),
          linear-gradient(135deg, var(--box-a, #39c8c5), var(--box-b, #d51f18));
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;
        box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.48);
        grid-column: var(--cols);
        grid-row: var(--rows);
        isolation: isolate;
        min-height: 0;
        overflow: hidden;
        position: relative;
        transform: rotate(var(--rot, 0deg));
      }

      .commercial-box::before {
        background:
          linear-gradient(
            120deg,
            transparent,
            rgba(255, 255, 255, 0.24),
            transparent
          ),
          repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.12) 0 1px,
            transparent 1px 1rem
          );
        content: "";
        inset: 0;
        mix-blend-mode: screen;
        opacity: 0.34;
        position: absolute;
        transform: translateX(-55%);
        z-index: 1;
      }

      .commercial-box::after {
        background:
          linear-gradient(
            90deg,
            transparent 0 34%,
            rgba(255, 255, 255, 0.16) 34% 35%,
            transparent 35% 64%,
            rgba(255, 255, 255, 0.1) 64% 65%,
            transparent 65%
          ),
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.12),
            transparent 32%,
            rgba(0, 0, 0, 0.3)
          );
        content: "";
        inset: 0;
        opacity: 0.45;
        pointer-events: none;
        position: absolute;
        z-index: 1;
      }

      .commercial-box:hover::before {
        animation: lens-sweep 0.8s var(--fw-ease) both;
      }

      .commercial-box video {
        height: 100%;
        object-fit: cover;
        opacity: 0.94;
        transform: scale(1.06);
        width: 100%;
      }

      .commercial-box .video-tile__caption {
        font-size: 0.62rem;
        padding: 2rem 0.75rem 0.7rem;
      }

      .commercial-box--image {
        background-image:
          linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.28)),
          var(--image),
          linear-gradient(135deg, var(--box-a, #39c8c5), var(--box-b, #d51f18));
        background-position: center, var(--pos, center), center;
        background-size: cover, cover, cover;
      }

      .commercial-box--copy {
        align-items: flex-end;
        color: #ffffff;
        display: flex;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        padding: 0.85rem;
        text-transform: uppercase;
      }

      .commercial-box--copy span {
        position: relative;
        z-index: 2;
      }

      .commercial-box--left-a {
        --cols: 1 / 4;
        --rows: 1 / 4;
        --delay: -0.8s;
        --rot: -3deg;
      }

      .commercial-box--left-b {
        --box-a: #ff4f9f;
        --box-b: #f4b348;
        --cols: 3 / 5;
        --rows: 3 / 6;
        --delay: -2.2s;
        --rot: 4deg;
      }

      .commercial-box--left-c {
        --box-a: #4df2b5;
        --box-b: #125c6a;
        --cols: 1 / 3;
        --rows: 5 / 8;
        --delay: -3.5s;
        --rot: 2deg;
      }

      .commercial-box--right-a {
        --box-a: #f7d34f;
        --box-b: #d51f18;
        --cols: 2 / 6;
        --rows: 1 / 4;
        --delay: -1.4s;
        --tilt: -7deg;
        --rot: 3deg;
      }

      .commercial-box--right-b {
        --cols: 1 / 4;
        --rows: 3 / 7;
        --delay: -2.8s;
        --tilt: 8deg;
        --rot: -4deg;
      }

      .commercial-box--right-c {
        --box-a: #54d6ff;
        --box-b: #6d4dff;
        --cols: 4 / 7;
        --rows: 5 / 8;
        --delay: -4s;
        --tilt: -5deg;
        --rot: -2deg;
      }

      .commercial-box--right-d {
        --box-a: #37e0a5;
        --box-b: #1b5d7a;
        --cols: 5 / 7;
        --rows: 2 / 5;
        --delay: -5.1s;
        --tilt: 9deg;
        --rot: 4deg;
      }

      .commercial-box--right-e {
        --box-a: #ff6f59;
        --box-b: #f7d34f;
        --cols: 1 / 3;
        --rows: 1 / 3;
        --delay: -6.2s;
        --tilt: 6deg;
        --rot: -2deg;
      }

      .commercial-box--right-f {
        --box-a: #ff4f9f;
        --box-b: #6d4dff;
        --cols: 3 / 5;
        --rows: 7 / 9;
        --delay: -7.4s;
        --tilt: -9deg;
        --rot: 2deg;
      }

      .commercial-box--right-g {
        --box-a: #62d4ff;
        --box-b: #092d33;
        --cols: 5 / 7;
        --rows: 7 / 9;
        --delay: -3.7s;
        --tilt: 7deg;
        --rot: -4deg;
      }

      @keyframes commercial-product-wall {
        0%,
        100% {
          box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.48);
          transform: rotate(var(--rot, 0deg)) translate3d(0, 0, 0) scale(1);
        }
        28% {
          box-shadow: 0 2.2rem 5rem rgba(0, 0, 0, 0.56);
          transform: rotate(calc(var(--rot, 0deg) * -0.25))
            translate3d(0.9rem, -0.8rem, 0) scale(1.035);
        }
        56% {
          transform: rotate(calc(var(--rot, 0deg) * 0.65))
            translate3d(-0.55rem, 0.65rem, 0) scale(0.985);
        }
        72% {
          transform: rotate(calc(var(--rot, 0deg) + 1deg))
            translate3d(0.35rem, 0.1rem, 0) scale(1.015);
        }
      }

      @keyframes commercial-right-mosaic {
        0%,
        100% {
          box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.48);
          transform: perspective(900px) rotate(var(--rot, 0deg)) rotateY(0deg)
            translate3d(0, 0, 0) scale(1);
        }
        24% {
          box-shadow: 0 2.4rem 5.8rem rgba(0, 0, 0, 0.58);
          transform: perspective(900px) rotate(calc(var(--rot, 0deg) * -0.2))
            rotateY(var(--tilt, 6deg)) translate3d(-0.75rem, -0.65rem, 2rem)
            scale(1.04);
        }
        48% {
          transform: perspective(900px) rotate(calc(var(--rot, 0deg) + 1deg))
            rotateY(calc(var(--tilt, 6deg) * -0.6))
            translate3d(0.65rem, 0.45rem, 0) scale(0.99);
        }
        76% {
          transform: perspective(900px) rotate(var(--rot, 0deg))
            rotateY(calc(var(--tilt, 6deg) * 0.35))
            translate3d(-0.25rem, 0.2rem, 1rem) scale(1.02);
        }
      }

      .commercial-studio {
        background: linear-gradient(135deg, #0a0a0a 0%, #131113 50%, #0d0d0d 100%);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: clamp(5rem, 8vw, 8rem) clamp(1.5rem, 4vw, 4.5rem);
        position: relative;
      }

      .commercial-studio::before {
        background: radial-gradient(
          ellipse 800px 300px at 50% 0%,
          rgba(213, 31, 24, 0.06) 0%,
          transparent 70%
        );
        content: "";
        inset: 0;
        pointer-events: none;
        position: absolute;
        z-index: 0;
      }

      .commercial-studio__header {
        margin-bottom: clamp(3rem, 6vw, 5rem);
        position: relative;
        z-index: 1;
      }

      .commercial-studio__header h2 {
        font-family: "Limelight", Georgia, serif;
        font-size: clamp(2.4rem, 5.2vw, 5.2rem);
        font-weight: 400;
        letter-spacing: -0.02em;
        line-height: 1.08;
        margin-top: 1rem;
        text-transform: uppercase;
      }

      .commercial-studio__content {
        display: grid;
        gap: clamp(3rem, 6vw, 5rem);
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
        position: relative;
        z-index: 1;
      }

      .commercial-studio__intro {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        justify-content: space-between;
      }

      .commercial-studio__intro p {
        color: rgba(247, 247, 245, 0.82);
        font-size: clamp(0.95rem, 1.2vw, 1.1rem);
        line-height: 1.72;
        max-width: 42rem;
      }

      .commercial-stats {
        display: grid;
        gap: 1.5rem;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      }

      .commercial-stats div {
        backdrop-filter: blur(12px);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1.5rem 1.2rem;
        transition: all 0.4s cubic-bezier(0.22, 0.9, 0.28, 1);
      }

      .commercial-stats div:hover {
        background: rgba(213, 31, 24, 0.15);
        border-color: rgba(213, 31, 24, 0.4);
        transform: translateY(-4px);
      }

      .commercial-stats b {
        color: #ffffff;
        font-size: 1.8rem;
        font-weight: 700;
      }

      .commercial-stats span {
        color: var(--fw-gold);
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .commercial-gallery {
        display: grid;
        gap: clamp(1.5rem, 3vw, 2.5rem);
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: auto auto auto;
      }

      .commercial-gallery__hero {
        background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
        border-radius: 12px;
        display: flex;
        grid-column: 1 / 5;
        grid-row: 1 / 2;
        max-height: 420px;
        overflow: hidden;
        position: relative;
      }

      .commercial-gallery__hero img {
        height: auto;
        object-fit: cover;
        width: 100%;
      }

      .commercial-gallery__hero video {
        height: auto;
        object-fit: cover;
        width: 100%;
      }

      .commercial-gallery__label {
        background: rgba(0, 0, 0, 0.68);
        backdrop-filter: blur(12px);
        bottom: 1.5rem;
        color: var(--fw-gold);
        font-size: 0.72rem;
        font-weight: 700;
        left: 1.5rem;
        letter-spacing: 0.18em;
        padding: 0.65rem 1.2rem;
        position: absolute;
        text-transform: uppercase;
      }

      .commercial-gallery__grid {
        display: grid;
        gap: clamp(1rem, 2vw, 1.8rem);
        grid-column: 1 / 5;
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }

      .commercial-gallery__item {
        aspect-ratio: 1;
        background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
        border-radius: 10px;
        cursor: pointer;
        overflow: hidden;
        position: relative;
        transition: all 0.5s cubic-bezier(0.22, 0.9, 0.28, 1);
      }

      .commercial-gallery__item--1 {
        grid-column: 1 / 3;
      }

      .commercial-gallery__item--2 {
        grid-column: 3 / 5;
      }

      .commercial-gallery__item--3 {
        grid-column: 5 / 7;
      }

      .commercial-gallery__item--4 {
        grid-column: 1 / 3;
      }

      .commercial-gallery__item--5 {
        grid-column: 3 / 5;
      }

      .commercial-gallery__item--6 {
        grid-column: 5 / 7;
      }

      .commercial-gallery__item:hover {
        box-shadow: 0 2.4rem 6rem rgba(213, 31, 24, 0.32);
        transform: translateY(-6px) scale(1.02);
      }

      .commercial-gallery__image {
        background-image: linear-gradient(135deg, rgba(213, 31, 24, 0.1), rgba(199, 155, 92, 0.08)),
          var(--image);
        background-position: center, var(--pos, center);
        background-size: cover, cover;
        height: 100%;
        width: 100%;
      }

      .commercial-gallery__item video {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .commercial-gallery__item span {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4));
        backdrop-filter: blur(8px);
        bottom: 0;
        color: #ffffff;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        left: 0;
        padding: 0.9rem 1rem;
        position: absolute;
        right: 0;
        text-transform: uppercase;
        transition: all 0.4s ease;
      }

      .commercial-gallery__item:hover span {
        background: linear-gradient(135deg, rgba(213, 31, 24, 0.9), rgba(199, 155, 92, 0.8));
        transform: translateY(-0.5rem);
      }

      @media (max-width: 1024px) {
        .commercial-studio__content {
          grid-template-columns: 1fr;
        }

        .commercial-gallery {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .commercial-gallery__hero {
          grid-column: 1 / 4;
        }

        .commercial-gallery__grid {
          grid-column: 1 / 4;
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .commercial-gallery__item {
          aspect-ratio: 1;
        }

        .commercial-gallery__item--1,
        .commercial-gallery__item--2,
        .commercial-gallery__item--3,
        .commercial-gallery__item--4,
        .commercial-gallery__item--5,
        .commercial-gallery__item--6 {
          grid-column: auto;
        }
      }

      .category-world--music {
        --world-glow: rgba(194, 62, 151, 0.66);
        --world-haze: rgba(213, 31, 24, 0.1);
        background: #080507;
      }

      .category-world--branded {
        --world-glow: rgba(229, 217, 135, 0.58);
        --world-haze: rgba(90, 124, 255, 0.1);
        background: #070806;
      }

      .category-world__copy {
        position: relative;
        z-index: 2;
      }

      .category-world__label {
        align-items: center;
        color: var(--fw-gold);
        display: inline-flex;
        font-size: 0.72rem;
        gap: 0.65rem;
        letter-spacing: 0.22em;
        margin-bottom: 1rem;
        text-transform: uppercase;
      }

      .category-world__label::before {
        animation: record-pulse 1.35s ease-in-out infinite;
        background: var(--world-glow);
        border-radius: 50%;
        box-shadow: 0 0 1rem var(--world-glow);
        content: "";
        height: 0.48rem;
        width: 0.48rem;
      }

      .category-world h2 {
        font-family: "Limelight", Georgia, serif;
        font-size: clamp(2.6rem, 6.2vw, 6.8rem);
        font-weight: 400;
        letter-spacing: 0;
        line-height: 0.96;
        max-width: 10ch;
        text-transform: uppercase;
      }

      .category-world p {
        color: var(--fw-muted);
        font-size: clamp(1rem, 1.25vw, 1.18rem);
        margin-top: 1.35rem;
        max-width: 35rem;
      }

      .motion-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.65rem;
        margin-top: 2rem;
      }

      .motion-list span {
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 999px;
        color: rgba(255, 255, 255, 0.82);
        font-size: 0.68rem;
        letter-spacing: 0.13em;
        padding: 0.48rem 0.7rem;
        text-transform: uppercase;
      }

      .category-world__stage {
        display: grid;
        gap: clamp(0.9rem, 1.5vw, 1.3rem);
        grid-template-columns: repeat(8, 1fr);
        min-height: min(45rem, 75vh);
        perspective: 1000px;
        position: relative;
      }

      .video-tile {
        animation: video-float 5.5s ease-in-out infinite;
        aspect-ratio: 16 / 10;
        background: #111111;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.42);
        grid-column: var(--cols);
        grid-row: var(--rows);
        isolation: isolate;
        min-height: 10rem;
        overflow: hidden;
        position: relative;
        transform: rotate(var(--rot, 0deg)) translateY(var(--lift, 0));
        transform-style: preserve-3d;
      }

      .video-tile:nth-child(2) {
        animation-delay: -1.2s;
      }
      .video-tile:nth-child(3) {
        animation-delay: -2.4s;
      }
      .video-tile:nth-child(4) {
        animation-delay: -3.5s;
      }

      .video-tile video {
        height: 100%;
        object-fit: cover;
        opacity: 0.78;
        transform: scale(1.12);
        width: 100%;
      }

      .video-tile::before {
        background:
          linear-gradient(
            120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.26) 48%,
            transparent 58%
          ),
          radial-gradient(
            circle at 22% 18%,
            rgba(255, 255, 255, 0.24),
            transparent 28%
          );
        content: "";
        inset: 0;
        mix-blend-mode: screen;
        opacity: 0.48;
        position: absolute;
        transform: translateX(-70%);
        z-index: 1;
      }

      .video-tile:hover::before {
        animation: lens-sweep 0.8s var(--fw-ease) both;
      }

      .video-tile__caption {
        align-items: center;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.84), transparent);
        bottom: 0;
        display: flex;
        font-size: 0.72rem;
        justify-content: space-between;
        left: 0;
        letter-spacing: 0.12em;
        padding: 2.8rem 0.95rem 0.8rem;
        position: absolute;
        right: 0;
        text-transform: uppercase;
        z-index: 2;
      }

      .video-tile__caption b {
        color: #ffffff;
        font-weight: 600;
      }

      .video-tile__caption span {
        color: var(--fw-gold);
      }

      .video-tile--wide {
        --cols: 1 / 6;
        --rows: 1 / 4;
        --rot: -2deg;
      }

      .video-tile--tall {
        --cols: 5 / 9;
        --rows: 2 / 6;
        --rot: 3deg;
        aspect-ratio: 4 / 5;
      }

      .video-tile--small-a {
        --cols: 2 / 5;
        --rows: 4 / 7;
        --rot: 4deg;
      }

      .video-tile--small-b {
        --cols: 6 / 9;
        --rows: 1 / 3;
        --rot: -4deg;
      }

      .category-orbit {
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 50%;
        display: none;
        height: 15rem;
        left: 50%;
        pointer-events: none;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 15rem;
        z-index: 0;
      }

      .category-orbit::before,
      .category-orbit::after {
        background: var(--world-glow);
        border-radius: 50%;
        box-shadow: 0 0 1.4rem var(--world-glow);
        content: "";
        height: 0.65rem;
        position: absolute;
        width: 0.65rem;
      }

      .category-orbit::before {
        left: 50%;
        top: -0.32rem;
      }
      .category-orbit::after {
        bottom: -0.32rem;
        right: 24%;
      }

      @keyframes reel-spin {
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes record-pulse {
        50% {
          opacity: 0.35;
          transform: scale(1.6);
        }
      }

      @keyframes video-float {
        0%,
        100% {
          translate: 0 0;
        }
        50% {
          translate: 0 -1rem;
        }
      }

      @keyframes lens-sweep {
        to {
          transform: translateX(72%);
        }
      }

      @keyframes orbit-drift {
        to {
          rotate: 360deg;
        }
      }

      .category-world {
        align-items: center;
        display: grid;
        gap: clamp(2rem, 5vw, 5rem);
        grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 1.1fr);
        min-height: auto;
        overflow: hidden;
        padding: clamp(5rem, 8vw, 8rem) clamp(1.5rem, 4vw, 4.5rem);
        position: relative;
      }

      .category-context {
        display: none;
      }

      .category-context::before,
      .category-context::after {
        content: "";
        position: absolute;
        pointer-events: none;
      }

      .category-context::before {
        animation: context-sweep 8s linear infinite;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.12),
          transparent
        );
        height: 1px;
        left: -15%;
        top: 34%;
        width: 130%;
      }

      .category-context::after {
        animation: context-radar 16s linear infinite;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        box-shadow: inset 0 0 4rem rgba(255, 255, 255, 0.03);
        height: clamp(18rem, 34vw, 38rem);
        right: clamp(1rem, 8vw, 8rem);
        top: 9vh;
        width: clamp(18rem, 34vw, 38rem);
      }

      .context-frame {
        border: 1px solid rgba(255, 255, 255, 0.13);
        height: min(40rem, 64vh);
        left: 49%;
        position: absolute;
        top: 16%;
        transform: translateX(-50%);
        width: min(54rem, 56vw);
      }

      .context-frame::before,
      .context-frame::after {
        background:
          linear-gradient(
            90deg,
            transparent calc(50% - 0.5px),
            rgba(255, 255, 255, 0.16) calc(50% - 0.5px) calc(50% + 0.5px),
            transparent calc(50% + 0.5px)
          ),
          linear-gradient(
            180deg,
            transparent calc(50% - 0.5px),
            rgba(255, 255, 255, 0.16) calc(50% - 0.5px) calc(50% + 0.5px),
            transparent calc(50% + 0.5px)
          );
        content: "";
        inset: 0;
        position: absolute;
      }

      .context-word {
        animation: context-float 7s ease-in-out infinite;
        animation-delay: var(--delay, 0s);
        background: rgba(0, 0, 0, 0.46);
        border: 1px solid rgba(255, 255, 255, 0.36);
        border-radius: 999px;
        box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.28);
        color: rgba(255, 255, 255, 0.92);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: clamp(0.68rem, 0.9vw, 0.9rem);
        font-weight: 700;
        left: var(--x);
        letter-spacing: 0.11em;
        padding: 0.48rem 0.72rem;
        position: absolute;
        text-transform: uppercase;
        top: var(--y);
        white-space: nowrap;
      }

      .context-counter {
        animation: context-pulse-card 4.6s ease-in-out infinite;
        animation-delay: var(--delay, 0s);
        background: rgba(0, 0, 0, 0.54);
        border: 1px solid rgba(255, 255, 255, 0.34);
        border-radius: 8px;
        box-shadow: 0 1rem 2.8rem rgba(0, 0, 0, 0.38);
        backdrop-filter: blur(10px);
        left: var(--x);
        min-width: 8rem;
        padding: 0.85rem 1rem;
        position: absolute;
        top: var(--y);
      }

      .context-counter b {
        color: #ffffff;
        display: block;
        font-family: "Limelight", Georgia, serif;
        font-size: clamp(2rem, 4vw, 4rem);
        font-weight: 400;
        letter-spacing: 0;
        line-height: 0.9;
      }

      .context-counter small {
        color: rgba(255, 255, 255, 0.8);
        display: block;
        font-size: 0.68rem;
        letter-spacing: 0.16em;
        margin-top: 0.5rem;
        text-transform: uppercase;
      }

      .context-ticker {
        animation: context-ticker 24s linear infinite;
        bottom: 12vh;
        color: rgba(255, 255, 255, 0.34);
        filter: drop-shadow(0 0.8rem 1.5rem rgba(0, 0, 0, 0.8));
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: clamp(2rem, 7vw, 8rem);
        font-weight: 800;
        left: 0;
        letter-spacing: 0;
        line-height: 0.8;
        position: absolute;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .context-signal {
        animation: context-blink 1.5s steps(2, end) infinite;
        background: var(--world-glow);
        border-radius: 50%;
        box-shadow: 0 0 1.4rem var(--world-glow);
        height: 0.7rem;
        left: var(--x);
        position: absolute;
        top: var(--y);
        width: 0.7rem;
      }

      @keyframes context-float {
        0%,
        100% {
          transform: translate3d(0, 0, 0);
        }
        50% {
          transform: translate3d(1.2rem, -1.7rem, 0);
        }
      }

      @keyframes context-pulse-card {
        0%,
        100% {
          opacity: 0.54;
          transform: translateY(0) scale(1);
        }
        50% {
          opacity: 1;
          transform: translateY(-0.75rem) scale(1.03);
        }
      }

      @keyframes context-ticker {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }

      @keyframes context-sweep {
        0% {
          transform: translateY(-22vh);
          opacity: 0;
        }
        18%,
        72% {
          opacity: 1;
        }
        100% {
          transform: translateY(58vh);
          opacity: 0;
        }
      }

      @keyframes context-radar {
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes context-blink {
        50% {
          opacity: 0.28;
          transform: scale(1.7);
        }
      }

      .category-world__copy {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: min(42rem, 100%);
        padding: 0;
        pointer-events: auto;
        position: relative;
        text-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.9);
        z-index: 7;
      }

      .category-world__copy p {
        background: rgba(0, 0, 0, 0.32);
        border-left: 1px solid rgba(255, 255, 255, 0.28);
        padding: 0.85rem 1rem;
        backdrop-filter: blur(8px);
      }

      .category-world__copy .motion-list span {
        background: rgba(0, 0, 0, 0.38);
        backdrop-filter: blur(8px);
      }

      .category-world__stage {
        background:
          radial-gradient(
            circle at 22% 18%,
            var(--world-haze),
            transparent 34%
          ),
          linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%),
          #060606;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        display: grid;
        gap: 0;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-template-rows: repeat(6, minmax(0, 1fr));
        height: clamp(24rem, 58vw, 43rem);
        margin-top: 0;
        min-height: 0;
        overflow: hidden;
        perspective: none;
        position: relative;
        transform-origin: 50% 50%;
        width: 100%;
        will-change: auto;
        z-index: 1;
      }

      .category-world__stage::before {
        border: 1px solid rgba(255, 255, 255, 0.26);
        content: "";
        inset: 0;
        pointer-events: none;
        position: absolute;
        z-index: 6;
      }

      .category-world__stage::after {
        background:
          linear-gradient(
            90deg,
            transparent calc(33.333% - 0.5px),
            rgba(255, 255, 255, 0.16) calc(33.333% - 0.5px)
              calc(33.333% + 0.5px),
            transparent calc(33.333% + 0.5px)
          ),
          linear-gradient(
            90deg,
            transparent calc(66.666% - 0.5px),
            rgba(255, 255, 255, 0.16) calc(66.666% - 0.5px)
              calc(66.666% + 0.5px),
            transparent calc(66.666% + 0.5px)
          ),
          linear-gradient(
            180deg,
            transparent calc(50% - 0.5px),
            rgba(255, 255, 255, 0.14) calc(50% - 0.5px) calc(50% + 0.5px),
            transparent calc(50% + 0.5px)
          );
        content: "";
        inset: 0;
        pointer-events: none;
        position: absolute;
        z-index: 5;
      }

      .video-tile {
        animation: none;
        background: #000000;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        min-height: 0;
        transform: none;
      }

      .video-tile video {
        object-fit: contain;
        object-position: center;
        opacity: 1;
        transform: scale(1);
      }

      .video-tile--wide {
        --cols: 1 / 7;
        --rows: 1 / 5;
      }

      .video-tile--tall {
        --cols: 6 / 9;
        --rows: 1 / 7;
        aspect-ratio: auto;
      }

      .video-tile--small-a {
        --cols: 1 / 4;
        --rows: 5 / 7;
      }

      .video-tile--small-b {
        --cols: 4 / 6;
        --rows: 5 / 7;
      }

      .category-orbit {
        border-color: rgba(255, 255, 255, 0.24);
        z-index: 4;
      }

      .spotlight-project {
        align-items: center;
        display: grid;
        gap: clamp(2rem, 5vw, 5rem);
        grid-template-columns: minmax(0, 1.12fr) minmax(20rem, 0.88fr);
      }

      .spotlight-video {
        aspect-ratio: 16 / 10;
        background: #111111;
        border: 1px solid var(--fw-line);
        overflow: hidden;
        position: relative;
      }

      .spotlight-video video {
        height: 100%;
        object-fit: cover;
        opacity: 0.76;
        width: 100%;
      }

      .spotlight-video::after {
        background:
          radial-gradient(
            circle at 28% 22%,
            rgba(255, 255, 255, 0.26),
            transparent 28%
          ),
          linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
        content: "";
        inset: 0;
        position: absolute;
      }

      .spotlight-copy p {
        color: var(--fw-muted);
        margin-top: 1rem;
        max-width: 36rem;
      }

      .fact-row {
        display: flex;
        flex-wrap: wrap;
        gap: 1.3rem;
        margin-top: 1.8rem;
      }

      .fact-row div {
        border-left: 1px solid var(--fw-line);
        min-width: 8rem;
        padding-left: 0.85rem;
      }

      .fact-row b {
        display: block;
        font-family: "Limelight", Georgia, serif;
        font-size: 1.9rem;
        font-weight: 400;
        letter-spacing: 0;
      }

      .fact-row span {
        color: var(--fw-muted);
        display: block;
        font-size: 0.7rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
      }

      .marquee-band {
        background: #ffffff;
        color: #050505;
        overflow: hidden;
        padding: 1.25rem 0;
      }

      .marquee-track {
        animation: marquee-slide 28s linear infinite;
        display: flex;
        width: max-content;
      }

      .marquee-track span {
        align-items: center;
        display: inline-flex;
        font-family: "Limelight", Georgia, serif;
        font-size: clamp(1.8rem, 3.6vw, 4rem);
        gap: 1.5rem;
        letter-spacing: 0;
        padding-right: 1.5rem;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .marquee-track i {
        background: #050505;
        border-radius: 50%;
        display: inline-block;
        height: 0.45rem;
        width: 0.45rem;
      }

      @keyframes marquee-slide {
        to {
          transform: translateX(-50%);
        }
      }

      .start-project {
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 40%),
          #0c0c0c;
        border-top: 1px solid var(--fw-line);
      }

      .start-project__inner {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: space-between;
      }

      .start-project .featured-pill {
        min-width: 12rem;
      }

      .reveal-up {
        opacity: 0;
        transform: translateY(2.4rem);
      }

      @media (max-width: 900px) {
        .spotlight-project {
          grid-template-columns: 1fr;
        }

        .category-world {
          grid-template-columns: 1fr;
          min-height: auto;
        }

        .category-world__stage {
          height: clamp(22rem, 80vw, 34rem);
          min-height: 0;
        }

        .category-world__copy {
          max-width: min(42rem, 100%);
        }

        .category-world--commercial {
          grid-template-columns: 1fr;
        }

        .commercial-media {
          height: clamp(21rem, 68vw, 30rem);
          justify-self: center;
          max-width: min(34rem, 100%);
        }

        .commercial-media--right {
          grid-template-columns: repeat(6, minmax(0, 1fr));
          grid-template-rows: repeat(8, minmax(1.6rem, 1fr));
          max-width: min(36rem, 100%);
        }

        .context-frame {
          left: 58%;
          width: min(40rem, 72vw);
        }

        .featured-hero {
          min-height: 92svh;
        }
      }

      @media (max-width: 680px) {
        .featured-hero {
          padding-top: 7.25rem;
        }

        .featured-hero__title {
          font-size: clamp(2.45rem, 13vw, 4rem);
        }

        .featured-hero__lede {
          max-width: 19rem;
        }

        .featured-pill {
          min-width: 100%;
        }

        .filter-dock {
          position: relative;
        }

        .work-card.hidden-cat {
          flex-basis: 2.8rem;
        }

        .category-world__copy {
          max-width: 88vw;
        }

        .category-world {
          padding-left: 1.5rem;
          padding-right: 1.5rem;
        }

        .category-world__stage {
          height: 28rem;
        }

        .commercial-media {
          gap: 0.7rem;
          grid-template-rows: repeat(7, minmax(1.7rem, 1fr));
          height: 23rem;
        }

        .commercial-media--right {
          grid-template-rows: repeat(8, minmax(1.35rem, 1fr));
          height: 27rem;
        }

        .commercial-box .video-tile__caption,
        .commercial-box--copy {
          font-size: 0.56rem;
        }

        .context-frame {
          left: 50%;
          top: 22%;
          width: 86vw;
        }

        .context-word {
          font-size: 0.62rem;
        }

        .context-counter {
          min-width: 6.8rem;
          padding: 0.65rem 0.75rem;
        }

        .context-ticker {
          bottom: 16vh;
          font-size: clamp(2.2rem, 18vw, 5rem);
        }

        .video-tile__caption {
          font-size: 0.62rem;
          padding: 2rem 0.7rem 0.7rem;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation: none !important;
          scroll-behavior: auto !important;
          transition: none !important;
        }

        .featured-hero__title span,
        .featured-hero__lede,
        .featured-hero__actions,
        .reveal-up,
        .category-world__stage {
          opacity: 1 !important;
          transform: none !important;
          clip-path: none !important;
        }
      }