@layer reset, base, components, motion, final;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body,
  h1,
  h2,
  h3,
  p {
    margin: 0;
  }

  img,
  video {
    display: block;
    max-width: 100%;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  button {
    cursor: pointer;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

@layer final {
  .tuc-banner.franchise-showcase {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    min-block-size: clamp(45rem, 88vh, 61rem);
    margin-block: clamp(6rem, 10vw, 10rem);
    padding: clamp(5rem, 7vw, 7.5rem) var(--gutter);
    overflow: clip;
    border: 0;
    background: #03060b;
    box-shadow: none;
  }

  .tuc-banner.franchise-showcase::before,
  .tuc-banner.franchise-showcase::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .tuc-banner.franchise-showcase::before {
    z-index: -1;
    background:
      linear-gradient(90deg, rgba(3, 6, 11, 0.96) 0%, rgba(3, 6, 11, 0.86) 31%, rgba(3, 6, 11, 0.2) 60%, rgba(3, 6, 11, 0.18) 100%),
      linear-gradient(180deg, #03060b 0%, rgba(3, 6, 11, 0.1) 17%, rgba(3, 6, 11, 0.08) 68%, #03060b 100%);
  }

  .tuc-banner.franchise-showcase::after {
    z-index: 2;
    opacity: 0.72;
    background:
      radial-gradient(ellipse at 72% 38%, rgba(126, 200, 255, 0.22), transparent 24rem),
      radial-gradient(ellipse at 74% 84%, rgba(47, 140, 255, 0.22), transparent 22rem),
      linear-gradient(90deg, rgba(3, 6, 11, 0.24), transparent 36%, transparent 100%);
    mix-blend-mode: screen;
  }

  .tuc-banner__stage {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: #03060b;
  }

  .tuc-banner__poster {
    position: absolute;
    display: block;
    block-size: auto;
    max-inline-size: none;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
  }

  .tuc-banner__poster--city {
    inset: -18% -8% -22% auto;
    inline-size: min(84vw, 78rem);
    min-block-size: 130%;
    opacity: 0.72;
    filter: saturate(0.82) hue-rotate(178deg) brightness(0.72) contrast(1.08);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 88%, transparent 100%);
  }

  .tuc-banner__poster--threat {
    right: clamp(13rem, 25vw, 24rem);
    top: -18%;
    z-index: 2;
    inline-size: min(47vw, 45rem);
    opacity: 0.5;
    transform: rotate(-1deg);
    filter:
      saturate(0.68)
      hue-rotate(178deg)
      brightness(0.46)
      contrast(1.2)
      drop-shadow(0 0 2.8rem rgba(126, 200, 255, 0.42));
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, #000 10%, #000 73%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000 13%, #000 86%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, transparent 0%, #000 10%, #000 73%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000 13%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%, 100% 100%;
    mask-size: 100% 100%, 100% 100%;
  }

  .tuc-banner__poster--family {
    right: clamp(-13rem, -10vw, -6rem);
    bottom: -18%;
    z-index: 4;
    inline-size: min(62vw, 56rem);
    opacity: 1;
    filter:
      saturate(1.02)
      contrast(1.06)
      brightness(0.9)
      drop-shadow(-2.6rem 2rem 4.2rem rgba(0, 0, 0, 0.68))
      drop-shadow(0 0 2.2rem rgba(126, 200, 255, 0.18));
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 7%, #000 82%, rgba(0, 0, 0, 0.56) 92%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 7%, #000 82%, rgba(0, 0, 0, 0.56) 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%, 100% 100%;
    mask-size: 100% 100%, 100% 100%;
  }

  .tuc-banner__logo {
    position: absolute;
    right: clamp(2rem, 6vw, 6rem);
    top: clamp(3rem, 5vw, 4.8rem);
    z-index: 5;
    inline-size: min(34vw, 34rem);
    block-size: auto;
    max-inline-size: none;
    opacity: 1;
    filter:
      drop-shadow(0 1.2rem 2.2rem rgba(0, 0, 0, 0.74))
      drop-shadow(0 0 1.4rem rgba(126, 200, 255, 0.2));
  }

  .tuc-banner__content {
    position: relative;
    z-index: 6;
    max-inline-size: min(39rem, 47vw);
    margin-inline-start: max(0rem, calc((100vw - var(--shell)) / 2));
    padding-block: clamp(1rem, 3vw, 2rem);
  }

  .tuc-banner .eyebrow {
    color: #aab6c5;
  }

  .tuc-banner__content h2 {
    margin-block: 0.75rem 1.2rem;
    color: #f4f7fb;
    font-size: clamp(4.25rem, 8vw, 7.9rem) !important;
    line-height: 0.84;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance;
  }

  .tuc-banner__content .text-blue {
    color: #7ec8ff;
    text-shadow: 0 0 1.8rem rgba(126, 200, 255, 0.24);
  }

  .tuc-banner__content p:not(.eyebrow) {
    max-inline-size: 35rem;
    margin: 0;
    color: #fff;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.72;
  }

  .tuc-banner__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.2rem;
    margin-block-start: 2rem;
  }

  .tuc-banner__socials {
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }

  .tuc-banner__socials a {
    display: grid;
    place-items: center;
    inline-size: 2.65rem;
    block-size: 2.65rem;
    color: #dceeff;
    border: 1px solid rgba(126, 200, 255, 0.28);
    background:
      linear-gradient(145deg, rgba(126, 200, 255, 0.12), rgba(47, 140, 255, 0.04)),
      rgba(5, 12, 22, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: skewX(-10deg);
  }

  .tuc-banner__socials a:hover,
  .tuc-banner__socials a:focus-visible {
    color: #fff;
    border-color: rgba(126, 200, 255, 0.78);
    background: rgba(47, 140, 255, 0.18);
    box-shadow: 0 0 1.5rem rgba(126, 200, 255, 0.2);
    transform: skewX(-10deg) translateY(-0.12rem);
  }

  .tuc-banner__socials .icon {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    transform: skewX(10deg);
  }


  .tuc-banner.franchise-showcase {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    min-block-size: clamp(45rem, 88vh, 61rem);
    margin-block: clamp(6rem, 10vw, 10rem);
    padding: clamp(5rem, 7vw, 7.5rem) var(--gutter);
    overflow: clip;
    border: 0;
    background: #03060b;
    box-shadow: none;
  }

  .tuc-banner.franchise-showcase::before,
  .tuc-banner.franchise-showcase::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .tuc-banner.franchise-showcase::before {
    z-index: -1;
    background:
      linear-gradient(90deg, rgba(3, 6, 11, 0.96) 0%, rgba(3, 6, 11, 0.86) 31%, rgba(3, 6, 11, 0.2) 60%, rgba(3, 6, 11, 0.18) 100%),
      linear-gradient(180deg, #03060b 0%, rgba(3, 6, 11, 0.1) 17%, rgba(3, 6, 11, 0.08) 68%, #03060b 100%);
  }

  .tuc-banner.franchise-showcase::after {
    z-index: 2;
    opacity: 0.72;
    background:
      radial-gradient(ellipse at 72% 38%, rgba(126, 200, 255, 0.22), transparent 24rem),
      radial-gradient(ellipse at 74% 84%, rgba(47, 140, 255, 0.22), transparent 22rem),
      linear-gradient(90deg, rgba(3, 6, 11, 0.24), transparent 36%, transparent 100%);
    mix-blend-mode: screen;
  }

  .tuc-banner__stage {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: #03060b;
  }

  .tuc-banner__poster {
    position: absolute;
    display: block;
    block-size: auto;
    max-inline-size: none;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
  }

  .tuc-banner__poster--city {
    inset: -18% -8% -22% auto;
    inline-size: min(84vw, 78rem);
    min-block-size: 130%;
    opacity: 0.72;
    filter: saturate(0.82) hue-rotate(178deg) brightness(0.72) contrast(1.08);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 88%, transparent 100%);
  }

  .tuc-banner__poster--threat {
    right: clamp(13rem, 25vw, 24rem);
    top: -18%;
    z-index: 2;
    inline-size: min(47vw, 45rem);
    opacity: 0.5;
    transform: rotate(-1deg);
    filter:
      saturate(0.68)
      hue-rotate(178deg)
      brightness(0.46)
      contrast(1.2)
      drop-shadow(0 0 2.8rem rgba(126, 200, 255, 0.42));
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, #000 10%, #000 73%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000 13%, #000 86%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, transparent 0%, #000 10%, #000 73%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000 13%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%, 100% 100%;
    mask-size: 100% 100%, 100% 100%;
  }

  .tuc-banner__poster--family {
    right: clamp(-13rem, -10vw, -6rem);
    bottom: -18%;
    z-index: 4;
    inline-size: min(62vw, 56rem);
    opacity: 1;
    filter:
      saturate(1.02)
      contrast(1.06)
      brightness(0.9)
      drop-shadow(-2.6rem 2rem 4.2rem rgba(0, 0, 0, 0.68))
      drop-shadow(0 0 2.2rem rgba(126, 200, 255, 0.18));
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 7%, #000 82%, rgba(0, 0, 0, 0.56) 92%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 7%, #000 82%, rgba(0, 0, 0, 0.56) 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%, 100% 100%;
    mask-size: 100% 100%, 100% 100%;
  }

  .tuc-banner__logo {
    position: absolute;
    right: clamp(2rem, 6vw, 6rem);
    top: clamp(3rem, 5vw, 4.8rem);
    z-index: 5;
    inline-size: min(34vw, 34rem);
    block-size: auto;
    max-inline-size: none;
    opacity: 1;
    filter:
      drop-shadow(0 1.2rem 2.2rem rgba(0, 0, 0, 0.74))
      drop-shadow(0 0 1.4rem rgba(126, 200, 255, 0.2));
  }

  .tuc-banner__content {
    position: relative;
    z-index: 6;
    max-inline-size: min(39rem, 47vw);
    margin-inline-start: max(0rem, calc((100vw - var(--shell)) / 2));
    padding-block: clamp(1rem, 3vw, 2rem);
  }

  .tuc-banner .eyebrow {
    color: #aab6c5;
  }

  .tuc-banner__content h2 {
    margin-block: 0.75rem 1.2rem;
    color: #f4f7fb;
    font-size: clamp(4.25rem, 8vw, 7.9rem) !important;
    line-height: 0.84;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance;
  }

  .tuc-banner__content .text-blue {
    color: #7ec8ff;
    text-shadow: 0 0 1.8rem rgba(126, 200, 255, 0.24);
  }

  .tuc-banner__content p:not(.eyebrow) {
    max-inline-size: 35rem;
    margin: 0;
    color: #fff;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.72;
  }

  .tuc-banner__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.2rem;
    margin-block-start: 2rem;
  }

  .tuc-banner__socials {
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }

  .tuc-banner__socials a {
    display: grid;
    place-items: center;
    inline-size: 2.65rem;
    block-size: 2.65rem;
    color: #dceeff;
    border: 1px solid rgba(126, 200, 255, 0.28);
    background:
      linear-gradient(145deg, rgba(126, 200, 255, 0.12), rgba(47, 140, 255, 0.04)),
      rgba(5, 12, 22, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: skewX(-10deg);
  }

  .tuc-banner__socials a:hover,
  .tuc-banner__socials a:focus-visible {
    color: #fff;
    border-color: rgba(126, 200, 255, 0.78);
    background: rgba(47, 140, 255, 0.18);
    box-shadow: 0 0 1.5rem rgba(126, 200, 255, 0.2);
    transform: skewX(-10deg) translateY(-0.12rem);
  }

  .tuc-banner__socials .icon {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    transform: skewX(10deg);
  }

  @media (max-width: 63.99rem) {
    .tuc-banner.franchise-showcase {
      min-block-size: auto;
      padding-block: clamp(27rem, 78vw, 36rem) 4.5rem;
    }

    .tuc-banner__content {
      max-inline-size: 100%;
      margin-inline-start: 0;
    }

    .tuc-banner__poster--city {
      inset: -12% -28% auto auto;
      inline-size: 115vw;
      opacity: 0.7;
    }

    .tuc-banner__poster--threat {
      right: auto;
      left: -13rem;
      top: -2rem;
      inline-size: 36rem;
      opacity: 0.32;
    }

    .tuc-banner__poster--family {
      right: 50%;
      bottom: auto;
      top: 1rem;
      inline-size: min(90vw, 34rem);
      transform: translateX(56%);
      opacity: 0.98;
    }

    .tuc-banner__logo {
      right: var(--gutter);
      top: clamp(14.5rem, 50vw, 23rem);
      inline-size: min(78vw, 25rem);
    }

    .tuc-banner__actions {
      align-items: flex-start;
      flex-direction: column;
      gap: 1rem;
    }
  }


  .tuc-banner.franchise-showcase {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    min-block-size: clamp(44rem, 88vh, 60rem);
    margin-block: clamp(6rem, 10vw, 10rem);
    padding: clamp(5.5rem, 8vw, 8rem) var(--gutter);
    overflow: clip;
    border: 0;
    background:
      radial-gradient(circle at 77% 42%, rgba(126, 200, 255, 0.24), transparent 25rem),
      radial-gradient(circle at 68% 75%, rgba(47, 140, 255, 0.2), transparent 28rem),
      linear-gradient(112deg, #03060b 0%, #06101d 42%, #08182d 100%);
    box-shadow: inset 0 1px 0 rgba(126, 200, 255, 0.12);
  }

  .tuc-banner.franchise-showcase::before,
  .tuc-banner.franchise-showcase::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .tuc-banner.franchise-showcase::before {
    z-index: -1;
    background:
      linear-gradient(90deg, rgba(3, 6, 11, 0.98) 0%, rgba(3, 6, 11, 0.86) 35%, rgba(3, 6, 11, 0.12) 70%, rgba(3, 6, 11, 0.5) 100%),
      linear-gradient(180deg, #03060b 0%, transparent 18%, transparent 68%, #03060b 100%);
  }

  .tuc-banner.franchise-showcase::after {
    z-index: 1;
    opacity: 0.56;
    background:
      radial-gradient(ellipse at 73% 58%, rgba(126, 200, 255, 0.24), transparent 22rem),
      repeating-linear-gradient(90deg, transparent 0 9.5rem, rgba(126, 200, 255, 0.045) 9.55rem, transparent 9.7rem);
    mix-blend-mode: screen;
  }

  .tuc-banner__stage {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
  }

  .tuc-banner__poster {
    position: absolute;
    display: block;
    block-size: auto;
    max-inline-size: none;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
  }

  .tuc-banner__poster--family {
    right: clamp(-9rem, -7vw, -4rem);
    bottom: -12%;
    z-index: 3;
    inline-size: min(57vw, 48rem);
    opacity: 0.98;
    filter:
      saturate(0.94)
      contrast(1.08)
      brightness(0.82)
      drop-shadow(-2.4rem 2rem 4rem rgba(0, 0, 0, 0.62));
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 9%, #000 80%, rgba(0, 0, 0, 0.52) 91%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 9%, #000 80%, rgba(0, 0, 0, 0.52) 91%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%, 100% 100%;
    mask-size: 100% 100%, 100% 100%;
  }

  .tuc-banner__poster--threat {
    right: clamp(13rem, 24vw, 23rem);
    top: -5%;
    z-index: 2;
    inline-size: min(34vw, 29rem);
    opacity: 0.32;
    transform: rotate(-2deg);
    filter:
      saturate(0.46)
      hue-rotate(176deg)
      brightness(0.48)
      contrast(1.12)
      drop-shadow(0 0 2.4rem rgba(126, 200, 255, 0.28));
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, #000 48%, rgba(0, 0, 0, 0.48) 68%, transparent 82%);
    mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, #000 48%, rgba(0, 0, 0, 0.48) 68%, transparent 82%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .tuc-banner__logo {
    position: absolute;
    right: clamp(1.5rem, 6vw, 6.5rem);
    top: clamp(3.8rem, 7vw, 6.4rem);
    z-index: 4;
    inline-size: min(35vw, 34rem);
    block-size: auto;
    max-inline-size: none;
    opacity: 0.94;
    filter:
      saturate(0.68)
      hue-rotate(178deg)
      drop-shadow(0 1.2rem 2rem rgba(0, 0, 0, 0.68))
      drop-shadow(0 0 1.6rem rgba(126, 200, 255, 0.26));
  }

  .tuc-banner__content {
    position: relative;
    z-index: 4;
    max-inline-size: min(39rem, 48vw);
    margin-inline-start: max(0rem, calc((100vw - var(--shell)) / 2));
  }

  .tuc-banner .eyebrow {
    color: #aab6c5;
  }

  .tuc-banner__content h2 {
    margin-block: 0.75rem 1.2rem;
    color: #f4f7fb;
    font-size: clamp(4.25rem, 8vw, 7.9rem) !important;
    line-height: 0.84;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance;
  }

  .tuc-banner__content .text-blue {
    color: #7ec8ff;
    text-shadow: 0 0 1.8rem rgba(126, 200, 255, 0.24);
  }

  .tuc-banner__content p:not(.eyebrow) {
    max-inline-size: 35rem;
    margin: 0;
    color: #fff;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.72;
  }

  .tuc-banner__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.2rem;
    margin-block-start: 2rem;
  }

  .tuc-banner__cta {
    border-color: rgba(126, 200, 255, 0.48);
    color: #f4f7fb;
    background:
      linear-gradient(135deg, rgba(47, 140, 255, 0.28), rgba(126, 200, 255, 0.12)),
      rgba(5, 12, 22, 0.88);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 1.2rem 2.4rem rgba(0, 0, 0, 0.42),
      0 0 2rem rgba(47, 140, 255, 0.18);
  }

  .tuc-banner__cta:hover,
  .tuc-banner__cta:focus-visible {
    border-color: rgba(126, 200, 255, 0.86);
    color: #fff;
    background:
      linear-gradient(135deg, rgba(47, 140, 255, 0.42), rgba(126, 200, 255, 0.18)),
      rgba(6, 18, 34, 0.96);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 1.4rem 2.8rem rgba(0, 0, 0, 0.46),
      0 0 2.5rem rgba(126, 200, 255, 0.24);
  }

  .tuc-banner__socials {
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }

  .tuc-banner__socials a {
    display: grid;
    place-items: center;
    inline-size: 2.65rem;
    block-size: 2.65rem;
    color: #dceeff;
    border: 1px solid rgba(126, 200, 255, 0.28);
    background:
      linear-gradient(145deg, rgba(126, 200, 255, 0.12), rgba(47, 140, 255, 0.04)),
      rgba(5, 12, 22, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: skewX(-10deg);
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  }

  .tuc-banner__socials a:hover,
  .tuc-banner__socials a:focus-visible {
    color: #fff;
    border-color: rgba(126, 200, 255, 0.78);
    background: rgba(47, 140, 255, 0.18);
    box-shadow: 0 0 1.5rem rgba(126, 200, 255, 0.2);
    transform: skewX(-10deg) translateY(-0.12rem);
  }

  .tuc-banner__socials .icon {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    transform: skewX(10deg);
  }

  @media (max-width: 63.99rem) {
    .tuc-banner.franchise-showcase {
      min-block-size: auto;
      margin-block: 4.5rem;
      padding-block: clamp(25rem, 74vw, 35rem) 4.5rem;
    }

    .tuc-banner.franchise-showcase::before {
      background:
        linear-gradient(180deg, rgba(3, 6, 11, 0.12) 0%, rgba(3, 6, 11, 0.42) 38%, #03060b 78%),
        linear-gradient(90deg, rgba(3, 6, 11, 0.82), rgba(3, 6, 11, 0.12), rgba(3, 6, 11, 0.82));
    }

    .tuc-banner__content {
      max-inline-size: 100%;
      margin-inline-start: 0;
    }

    .tuc-banner__content h2 {
      font-size: clamp(3.2rem, 16vw, 5.4rem) !important;
    }

    .tuc-banner__poster--family {
      right: 50%;
      bottom: auto;
      top: 1rem;
      inline-size: min(82vw, 30rem);
      transform: translateX(55%);
      opacity: 0.94;
    }

    .tuc-banner__poster--threat {
      right: auto;
      left: -9rem;
      top: 1rem;
      inline-size: 27rem;
      opacity: 0.2;
    }

    .tuc-banner__logo {
      right: var(--gutter);
      top: clamp(14.5rem, 50vw, 24rem);
      inline-size: min(74vw, 24rem);
    }

    .tuc-banner__actions {
      align-items: flex-start;
      flex-direction: column;
      gap: 1rem;
    }
  }


  .tuc-banner {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    min-block-size: clamp(42rem, 86vh, 58rem);
    margin-block: clamp(6rem, 10vw, 10rem);
    padding: clamp(5.5rem, 8vw, 8rem) var(--gutter);
    overflow: clip;
    border: 0;
    background:
      radial-gradient(circle at 76% 45%, rgba(47, 140, 255, 0.2), transparent 34rem),
      radial-gradient(circle at 24% 20%, rgba(126, 200, 255, 0.12), transparent 26rem),
      linear-gradient(112deg, #03060b 0%, #06101d 44%, #08182d 100%);
    box-shadow: inset 0 1px 0 rgba(126, 200, 255, 0.12);
  }

  .tuc-banner::before,
  .tuc-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }

  .tuc-banner::before {
    background:
      linear-gradient(90deg, rgba(3, 6, 11, 0.98) 0%, rgba(3, 6, 11, 0.82) 33%, rgba(3, 6, 11, 0.24) 68%, rgba(3, 6, 11, 0.72) 100%),
      linear-gradient(180deg, rgba(3, 6, 11, 0.92) 0%, transparent 20%, transparent 66%, #03060b 100%);
  }

  .tuc-banner::after {
    opacity: 0.58;
    background:
      repeating-linear-gradient(90deg, transparent 0 9.5rem, rgba(126, 200, 255, 0.055) 9.55rem, transparent 9.65rem),
      radial-gradient(ellipse at 72% 28%, rgba(126, 200, 255, 0.2), transparent 18rem);
    mix-blend-mode: screen;
  }

  .tuc-banner__stage {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
  }

  .tuc-banner__poster {
    position: absolute;
    display: block;
    block-size: auto;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
  }

  .tuc-banner__poster--family {
    right: max(-3rem, -4vw);
    bottom: -8%;
    inline-size: min(48vw, 36rem);
    opacity: 0.96;
    filter: saturate(0.86) contrast(1.06) brightness(0.86) drop-shadow(-2rem 2rem 3.5rem rgba(0, 0, 0, 0.58));
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 11%, #000 92%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 8%, #000 79%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0%, #000 11%, #000 92%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 8%, #000 79%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%, 100% 100%;
    mask-size: 100% 100%, 100% 100%;
  }

  .tuc-banner__poster--threat {
    right: 30%;
    top: 4%;
    inline-size: min(30vw, 24rem);
    opacity: 0.2;
    transform: rotate(-4deg);
    filter: saturate(0.42) hue-rotate(176deg) brightness(0.62) contrast(1.08);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, #000 42%, transparent 72%);
    mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, #000 42%, transparent 72%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .tuc-banner__logo {
    position: absolute;
    right: clamp(2rem, 7vw, 8rem);
    top: clamp(4rem, 8vw, 7rem);
    z-index: 3;
    inline-size: min(38vw, 36rem);
    block-size: auto;
    opacity: 0.94;
    filter:
      saturate(0.68)
      hue-rotate(178deg)
      drop-shadow(0 1.2rem 2rem rgba(0, 0, 0, 0.68))
      drop-shadow(0 0 1.6rem rgba(126, 200, 255, 0.28));
  }

  .tuc-banner__content {
    position: relative;
    z-index: 4;
    max-inline-size: min(39rem, 49vw);
    margin-inline-start: max(0rem, calc((100vw - var(--shell)) / 2));
  }

  .tuc-banner .eyebrow {
    color: #aab6c5;
  }

  .tuc-banner__content h2 {
    margin-block: 0.75rem 1.2rem;
    color: #f4f7fb;
    font-size: clamp(4.25rem, 8vw, 7.9rem) !important;
    line-height: 0.84;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance;
  }

  .tuc-banner__content .text-blue {
    color: #7ec8ff;
    text-shadow: 0 0 1.8rem rgba(126, 200, 255, 0.24);
  }

  .tuc-banner__content p:not(.eyebrow) {
    max-inline-size: 35rem;
    margin: 0;
    color: #fff;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.72;
  }

  .tuc-banner__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.2rem;
    margin-block-start: 2rem;
  }

  .tuc-banner__cta {
    border-color: rgba(126, 200, 255, 0.48);
    color: #f4f7fb;
    background:
      linear-gradient(135deg, rgba(47, 140, 255, 0.28), rgba(126, 200, 255, 0.12)),
      rgba(5, 12, 22, 0.88);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 1.2rem 2.4rem rgba(0, 0, 0, 0.42),
      0 0 2rem rgba(47, 140, 255, 0.18);
  }

  .tuc-banner__cta:hover,
  .tuc-banner__cta:focus-visible {
    border-color: rgba(126, 200, 255, 0.86);
    color: #fff;
    background:
      linear-gradient(135deg, rgba(47, 140, 255, 0.42), rgba(126, 200, 255, 0.18)),
      rgba(6, 18, 34, 0.96);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 1.4rem 2.8rem rgba(0, 0, 0, 0.46),
      0 0 2.5rem rgba(126, 200, 255, 0.24);
  }

  .tuc-banner__socials {
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }

  .tuc-banner__socials a {
    display: grid;
    place-items: center;
    inline-size: 2.65rem;
    block-size: 2.65rem;
    color: #dceeff;
    border: 1px solid rgba(126, 200, 255, 0.28);
    background:
      linear-gradient(145deg, rgba(126, 200, 255, 0.12), rgba(47, 140, 255, 0.04)),
      rgba(5, 12, 22, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: skewX(-10deg);
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  }

  .tuc-banner__socials a:hover,
  .tuc-banner__socials a:focus-visible {
    color: #fff;
    border-color: rgba(126, 200, 255, 0.78);
    background: rgba(47, 140, 255, 0.18);
    box-shadow: 0 0 1.5rem rgba(126, 200, 255, 0.2);
    transform: skewX(-10deg) translateY(-0.12rem);
  }

  .tuc-banner__socials .icon {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    transform: skewX(10deg);
  }

  @media (max-width: 63.99rem) {
    .tuc-banner {
      min-block-size: auto;
      margin-block: 4.5rem;
      padding-block: clamp(24rem, 72vw, 34rem) 4.5rem;
    }

    .tuc-banner::before {
      background:
        linear-gradient(180deg, rgba(3, 6, 11, 0.18) 0%, rgba(3, 6, 11, 0.42) 38%, #03060b 78%),
        linear-gradient(90deg, rgba(3, 6, 11, 0.82), rgba(3, 6, 11, 0.14), rgba(3, 6, 11, 0.82));
    }

    .tuc-banner__content {
      max-inline-size: 100%;
      margin-inline-start: 0;
    }

    .tuc-banner__content h2 {
      font-size: clamp(3.2rem, 16vw, 5.4rem) !important;
    }

    .tuc-banner__poster--family {
      right: 50%;
      bottom: auto;
      top: 1.2rem;
      inline-size: min(78vw, 27rem);
      transform: translateX(56%);
      opacity: 0.92;
    }

    .tuc-banner__poster--threat {
      right: auto;
      left: -8rem;
      top: 2rem;
      inline-size: 24rem;
      opacity: 0.15;
    }

    .tuc-banner__logo {
      right: var(--gutter);
      top: clamp(14rem, 48vw, 23rem);
      inline-size: min(74vw, 24rem);
    }

    .tuc-banner__actions {
      align-items: flex-start;
      flex-direction: column;
      gap: 1rem;
    }
  }


@layer base {
  :root {
    --black: #050505;
    --black-2: #090909;
    --black-3: #111111;
    --gold: #d59b32;
    --blue: #499fd4;
    --off-white: #f5f0e8;
    --muted: rgba(245, 240, 232, 0.72);
    --soft: rgba(245, 240, 232, 0.48);
    --line: rgba(245, 240, 232, 0.13);
    --line-strong: rgba(213, 155, 50, 0.45);
    --shadow: 0 2rem 6rem rgba(0, 0, 0, 0.55);
    --display: "Barlow Condensed", Impact, sans-serif;
    --nav-font: "urwdin-semi-condensed-medium", "Barlow Condensed", "Arial Narrow", sans-serif;
    --body: "Inter", "Segoe UI", sans-serif;
    --gutter: clamp(1.2rem, 4vw, 5rem);
    --shell: 88rem;
    --space-section: clamp(7.5rem, 12vw, 12rem);
    --scroll-progress: 0;
  }

  html,
  body {
    max-inline-size: 100%;
    overflow-x: hidden;
    background: var(--black);
    color: var(--off-white);
  }

  body {
    min-height: 100vh;
    font-family: var(--body);
    text-rendering: optimizeLegibility;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.28;
    background:
      radial-gradient(circle at 18% 8%, rgba(73, 159, 212, 0.08), transparent 22rem),
      radial-gradient(circle at 80% 18%, rgba(213, 155, 50, 0.07), transparent 24rem);
  }

  body::after {
    display: none;
  }

  main,
  .site-header,
  .site-footer {
    position: relative;
    z-index: 2;
  }

  :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 0.22rem;
  }
}

@layer components {
  .icon-sprite {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
  }

  .icon {
    inline-size: 1rem;
    block-size: 1rem;
    flex: 0 0 auto;
  }

  .section-shell {
    width: min(calc(100vw - (var(--gutter) * 2)), var(--shell));
    margin-inline: auto;
  }

  .eyebrow {
    color: var(--gold);
    font-family: var(--body);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
  }

  h1,
  h2,
  h3 {
    font-family: var(--display);
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .text-gold {
    color: var(--gold) !important;
  }

  .text-blue {
    color: var(--blue) !important;
  }

  p {
    color: var(--muted);
    line-height: 1.72;
  }

  .site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    background: transparent;
    transition: background 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
  }

  .site-header[data-scrolled="true"],
  body[data-nav-open="true"] .site-header {
    background: rgba(5, 5, 5, 0.92);
    border-block-end: 1px solid var(--line);
    backdrop-filter: blur(18px);
  }

  .site-header__bar {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-block-size: 4.15rem;
    padding-inline: var(--gutter);
  }

  .site-header__toggle {
    display: none;
    justify-self: end;
    grid-column: 3;
    border: 1px solid var(--line);
    background: rgba(5, 5, 5, 0.75);
    color: var(--off-white);
    min-block-size: 2.6rem;
    padding-inline: 0.95rem;
    font-family: var(--display);
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .site-nav {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: clamp(1.2rem, 2.3vw, 2.6rem);
    pointer-events: auto;
  }

  .site-nav__mega-wrap {
    display: inline-flex;
    align-items: center;
  }

  .site-nav a,
  .site-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--off-white);
    font-family: var(--nav-font);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .site-nav a::after,
  .site-nav__link::after {
    content: "";
    position: absolute;
    inset: auto 0 -0.95rem;
    block-size: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 180ms ease;
  }

  .site-nav a:hover::after,
  .site-nav a:focus-visible::after,
  .site-nav__link:hover::after,
  .site-nav__link:focus-visible::after,
  .site-nav a[aria-current="true"]::after,
  .site-nav__link[aria-expanded="true"]::after {
    transform: scaleX(1);
  }

  .mobile-comics {
    display: none;
  }

  .comics-mega {
    position: absolute;
    inset: 5rem 0 auto;
    z-index: -1;
    background:
      radial-gradient(circle at 50% 0%, rgba(73, 159, 212, 0.16), transparent 42%),
      linear-gradient(180deg, #fff 0%, #f7fbff 46%, #eef4fa 100%);
    color: #080808;
    border-block: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.34);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.8rem);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  }

  body[data-mega-open="true"] .comics-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  @media (min-width: 64rem) {
    .site-header:has(.site-nav__mega-wrap:hover) .comics-mega,
    .site-header:has(.site-nav__mega-wrap:focus-within) .comics-mega,
    .site-header:has(.comics-mega:hover) .comics-mega,
    .site-header:has(.comics-mega:focus-within) .comics-mega {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
  }

  .comics-mega__heading {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    margin-block-end: 1.15rem;
    font-family: var(--display);
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .comics-mega__heading a {
    padding: 0.55rem 0.9rem;
    border: 1px solid #080808;
    transform: skewX(-12deg);
  }

  .comics-mega__heading a::before {
    content: "";
  }

  .comics-mega__inner {
    width: min(calc(100vw - (var(--gutter) * 2)), 42rem);
    margin-inline: auto;
    padding-block: 1.25rem 1.55rem;
  }

  .comics-mega__inner .eyebrow {
    color: #080808;
    font-family: var(--display);
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    letter-spacing: 0.03em;
  }

  .comics-mega__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(8rem, 11.5rem));
    justify-content: center;
    gap: clamp(1rem, 2.6vw, 1.8rem);
    text-align: left;
  }

  .comic-drop-card {
    display: grid;
    gap: 0.65rem;
    min-inline-size: 0;
    color: #080808;
    font-family: var(--display);
    font-size: 13px;
    font-weight: 900;
    line-height: 0.98;
    text-transform: uppercase;
  }

  .comic-drop-card img,
  .comic-drop-card--placeholder {
    inline-size: 100%;
    block-size: auto;
    height: auto;
    aspect-ratio: 1456 / 2048;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.16);
  }

  .comic-drop-card--placeholder {
    display: grid;
    place-items: center;
    padding: 1rem;
    color: rgba(245, 240, 232, 0.7);
    background:
      radial-gradient(circle at 55% 25%, rgba(73, 159, 212, 0.35), transparent 45%),
      radial-gradient(circle at 20% 78%, rgba(213, 155, 50, 0.28), transparent 48%),
      linear-gradient(145deg, #141414, #050505);
  }

  .comic-drop-card--placeholder i {
    font-family: var(--body);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: 0.09em;
    text-align: center;
  }

  .hero {
    position: relative;
    min-block-size: 100vh;
    min-block-size: 100svh;
    display: grid;
    align-items: center;
    overflow: clip;
    isolation: isolate;
    background: var(--black);
  }

  .hero__media,
  .hero__video,
  .hero__depth,
  .hero__grain,
  .hero__veil {
    position: absolute;
    inset: 0;
  }

  .hero__media {
    transform: none;
    will-change: transform;
  }

  .hero__video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center center;
    filter: none;
  }

  .hero__veil {
    display: block;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 64%, rgba(5, 5, 5, 0.74) 86%, var(--black) 100%);
  }

  .hero__depth,
  .hero__grain {
    display: none;
  }

  .studio-manifesto,
  .slate-section,
  .portal-section {
    padding-block: var(--space-section);
    background:
      radial-gradient(circle at 78% 12%, rgba(213, 155, 50, 0.08), transparent 26rem),
      linear-gradient(180deg, var(--black), var(--black-2));
  }

  .studio-manifesto h2,
  .section-heading h2,
  .vertical-series h2,
  .movie-section__heading h2,
  .portal h2 {
    max-inline-size: 10ch;
    margin-block-start: 1rem;
    font-size: clamp(4rem, 10vw, 9rem);
    line-height: 0.78;
  }

  .section-heading p:not(.eyebrow) {
    max-inline-size: 45rem;
    margin-block-start: 1rem;
    font-size: clamp(1rem, 1.16vw, 1.2rem);
  }

  .slate-section .section-heading h2,
  .movie-section__heading h2 {
    max-inline-size: 14ch;
    font-size: clamp(3.8rem, 8vw, 7rem);
    line-height: 0.82;
  }

  .manifesto-grid {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    margin-block-start: clamp(2rem, 5vw, 4rem);
  }

  .studio-copy {
    display: grid;
    gap: 1.1rem;
  }

  .studio-copy p {
    max-inline-size: 44rem;
    font-size: clamp(1.05rem, 1.25vw, 1.32rem);
  }

  .founder-portrait {
    position: relative;
    margin: 0;
    min-block-size: 34rem;
    overflow: clip;
    border: 0;
    background: transparent;
  }

  .founder-portrait::before {
    display: none;
  }

  .founder-portrait::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    block-size: 42%;
    background: linear-gradient(180deg, transparent, var(--black));
  }

  .founder-portrait img {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center top;
    mask-image: linear-gradient(180deg, #000 0 72%, transparent 100%);
  }

  .series-story {
    position: relative;
    min-block-size: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(24rem, 0.85fr);
    align-items: end;
    gap: clamp(2rem, 5vw, 5rem);
    padding: var(--space-section) var(--gutter);
    overflow: clip;
    background:
      linear-gradient(90deg, rgba(5, 5, 5, 0.96), rgba(5, 5, 5, 0.38) 48%, rgba(5, 5, 5, 0.94)),
      var(--black);
  }

  .series-story::before,
  .movie-section::before {
    display: none;
  }

  .series-story__media {
    position: absolute;
    inset: 0;
  }

  .series-story__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.08) contrast(1.05) brightness(0.76);
  }

  .series-story__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(5, 5, 5, 0.14), rgba(5, 5, 5, 0.88)),
      linear-gradient(90deg, rgba(5, 5, 5, 0.96), rgba(5, 5, 5, 0.32) 54%, rgba(5, 5, 5, 0.7));
  }

  .series-story__copy {
    position: relative;
    z-index: 1;
    grid-column: 1;
    max-inline-size: 48rem;
  }

  .series-story__copy h2 {
    margin-block-start: 1rem;
    font-size: clamp(4.6rem, 11vw, 10rem);
    line-height: 0.78;
  }

  .series-story__copy p:not(.eyebrow) {
    max-inline-size: 35rem;
    margin-block-start: 1rem;
    font-size: clamp(1rem, 1.25vw, 1.25rem);
  }

  .social-line {
    display: flex;
    gap: 0.75rem;
    margin-block-start: 1.5rem;
  }

  .social-line a,
  .site-footer__social {
    inline-size: 2.35rem;
    block-size: 2.35rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    color: var(--off-white);
    transform: skewX(-12deg);
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
  }

  .social-line a:hover,
  .site-footer__social:hover {
    color: #fff;
    border-color: rgba(126, 200, 255, 0.78);
    background: rgba(47, 140, 255, 0.18);
  }

  .social-line .icon,
  .site-footer__social .icon {
    transform: skewX(12deg);
  }

  .vertical-series {
    position: relative;
    min-block-size: 100vh;
    display: grid;
    align-items: end;
    overflow: clip;
    background: var(--black);
  }

  .feature-universe__image {
    position: absolute;
    inset: 0;
  }

  .feature-universe__image img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    filter: saturate(1.04) contrast(1.08) brightness(0.74);
    transform: scale(1.02);
  }

  .feature-universe__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(5, 5, 5, 0.05), rgba(5, 5, 5, 0.92)),
      linear-gradient(90deg, rgba(5, 5, 5, 0.92), rgba(5, 5, 5, 0.24) 58%, rgba(5, 5, 5, 0.7));
  }

  .feature-universe__content {
    position: relative;
    z-index: 2;
    width: min(calc(100vw - (var(--gutter) * 2)), var(--shell));
    margin-inline: auto;
    padding-block: var(--space-section);
  }

  .feature-universe__content p:not(.eyebrow) {
    max-inline-size: 39rem;
    font-size: clamp(1rem, 1.25vw, 1.28rem);
  }

  .tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-block-start: 1.2rem;
  }

  .tag-row span {
    border: 1px solid var(--line);
    padding: 0.58rem 0.72rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .text-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-block-start: 1.6rem;
  }

  .text-links a {
    border-block-end: 1px solid var(--gold);
    color: var(--off-white);
    font-family: var(--display);
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .section-heading {
    margin-block-end: clamp(2rem, 5vw, 4rem);
  }

  .premium-card-grid {
    display: grid;
    gap: 1rem;
  }

  .tv-slate {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr) minmax(0, 0.82fr);
    gap: 1rem;
    align-items: stretch;
  }

  .tv-series-visual {
    position: relative;
    display: grid;
    grid-template-columns: minmax(22rem, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    min-block-size: auto;
    padding: 0;
    overflow: clip;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .tv-series-visual::before {
    display: none;
  }

  .uptown-series-card {
    position: relative;
    min-block-size: clamp(22rem, 42vw, 34rem);
    overflow: clip;
    margin: 0;
    border: 1px solid var(--line);
    background: var(--black-3);
    box-shadow: var(--shadow);
  }

  .uptown-series-card img {
    z-index: 1;
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    filter: saturate(1.04) contrast(1.05) brightness(0.84);
  }

  .uptown-series-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 38%, rgba(5, 5, 5, 0.9));
  }

  .uptown-series-card div {
    position: absolute;
    inset: auto 1.2rem 1.2rem;
    z-index: 1;
  }

  .tv-series-visual span,
  .uptown-series-card span {
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .uptown-series-card h3 {
    margin-block-start: 0.4rem;
    font-size: clamp(2.4rem, 4.8vw, 4.4rem);
    line-height: 0.86;
  }

  .tv-series-visual__copy {
    max-inline-size: 44rem;
  }

  .tv-series-visual__copy h3 {
    margin-block: 0.7rem 1rem;
    font-size: clamp(2.4rem, 4.8vw, 4.7rem);
    line-height: 0.88;
  }

  .tv-slate__feature,
  .tv-poster,
  .premium-card,
  .character-row article {
    position: relative;
    min-block-size: 30rem;
    overflow: clip;
    background: var(--black-3);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
  }

  .tv-slate__feature {
    display: grid;
    align-content: end;
    gap: clamp(2rem, 5vw, 4rem);
    min-block-size: 32rem;
    padding: clamp(1.3rem, 3vw, 2rem);
    background:
      radial-gradient(circle at 18% 24%, rgba(73, 159, 212, 0.2), transparent 28rem),
      linear-gradient(145deg, rgba(213, 155, 50, 0.08), transparent 45%),
      #080808;
  }

  .tv-slate__feature span,
  .tv-poster span {
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .tv-slate__feature h3 {
    max-inline-size: 12ch;
    margin-block-start: 0.55rem;
    font-size: clamp(2.8rem, 5.2vw, 4.8rem);
    line-height: 0.84;
  }

  .tv-slate__feature p {
    max-inline-size: 34rem;
  }

  .tv-poster {
    display: grid;
    align-content: space-between;
    min-block-size: 32rem;
    padding: 1.1rem;
    background: #0b0b0b;
  }

  .tv-poster::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.9;
    background:
      radial-gradient(circle at 50% 18%, rgba(245, 240, 232, 0.12), transparent 16rem),
      linear-gradient(180deg, transparent 35%, rgba(5, 5, 5, 0.9));
  }

  .tv-poster--blue::before {
    background:
      radial-gradient(circle at 50% 18%, rgba(73, 159, 212, 0.45), transparent 15rem),
      linear-gradient(180deg, transparent 35%, rgba(5, 5, 5, 0.9));
  }

  .tv-poster--gold::before {
    background:
      radial-gradient(circle at 50% 18%, rgba(213, 155, 50, 0.42), transparent 15rem),
      linear-gradient(180deg, transparent 35%, rgba(5, 5, 5, 0.9));
  }

  .tv-poster i,
  .tv-poster div {
    position: relative;
    z-index: 1;
  }

  .tv-poster i {
    color: var(--soft);
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .tv-poster h3 {
    margin-block-start: 0.35rem;
    font-size: clamp(2.4rem, 4.5vw, 4rem);
    line-height: 0.84;
  }

  .premium-card img,
  .character-row img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 360ms ease, filter 360ms ease;
  }

  .premium-card::after,
  .character-row article::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, transparent 40%, rgba(5, 5, 5, 0.92)),
      radial-gradient(circle at 50% 70%, rgba(213, 155, 50, 0.14), transparent 42%);
  }

  .premium-card__reveal,
  .character-row article div {
    position: absolute;
    inset: auto 1.1rem 1.1rem;
    z-index: 1;
    transform: translateY(0.7rem);
    transition: transform 220ms ease;
  }

  .premium-card:hover img,
  .character-row article:hover img {
    transform: scale(1.035);
    filter: saturate(1.08) contrast(1.06);
  }

  .premium-card:hover .premium-card__reveal,
  .character-row article:hover div {
    transform: translateY(0);
  }

  .premium-card__reveal span,
  .character-row span {
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .premium-card__reveal h3,
  .character-row h3 {
    margin-block: 0.25rem 0.45rem;
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    line-height: 0.86;
  }

  .premium-card__reveal a {
    color: var(--off-white);
    font-family: var(--display);
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .premium-card--placeholder {
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background:
      radial-gradient(circle at 70% 18%, rgba(73, 159, 212, 0.28), transparent 34%),
      radial-gradient(circle at 22% 80%, rgba(213, 155, 50, 0.22), transparent 38%),
      linear-gradient(145deg, #161616, #050505);
  }

  .premium-card--placeholder i {
    color: var(--soft);
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
  }

  .movie-section {
    position: relative;
    padding-block: var(--space-section);
    overflow: clip;
    background:
      radial-gradient(circle at 82% 22%, rgba(213, 155, 50, 0.11), transparent 28rem),
      radial-gradient(circle at 20% 70%, rgba(73, 159, 212, 0.08), transparent 26rem),
      linear-gradient(180deg, var(--black), #070706);
  }

  .movie-section__heading {
    margin-block-end: clamp(2rem, 5vw, 4rem);
  }

  .movie-section__heading h2 {
    max-inline-size: 9ch;
  }

  .movie-stage {
    width: min(calc(100vw - (var(--gutter) * 2)), var(--shell));
    margin-inline: auto;
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: stretch;
    padding: clamp(1rem, 2vw, 1.4rem);
    border: 1px solid var(--line);
    background:
      linear-gradient(90deg, rgba(213, 155, 50, 0.08), transparent 40%),
      rgba(8, 8, 8, 0.76);
    box-shadow: var(--shadow);
  }

  .movie-story {
    position: relative;
    z-index: 1;
    width: min(calc(100vw - (var(--gutter) * 2)), var(--shell));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(18rem, 0.68fr) minmax(0, 1.32fr);
    gap: clamp(2.2rem, 6vw, 6rem);
    align-items: center;
  }

  .movie-story__copy {
    display: grid;
    gap: 1.1rem;
  }

  .movie-story__copy h2 {
    max-inline-size: 13ch;
    font-size: clamp(2.8rem, 5.8vw, 5.8rem);
    line-height: 0.86;
  }

  .movie-story__copy p:not(.eyebrow) {
    max-inline-size: 35rem;
    font-size: clamp(1rem, 1.16vw, 1.22rem);
  }

  .movie-story__trailer {
    position: relative;
    display: grid;
    place-items: center;
  }

  .movie-story__trailer::before {
    content: "";
    position: absolute;
    inset: 10% -8% -6% 8%;
    border: 1px solid rgba(213, 155, 50, 0.32);
    transform: skewX(-8deg);
  }

  .movie-story__trailer video {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.62);
  }

  .movie-stage__poster {
    border: 1px solid var(--line-strong);
    background: #030303;
  }

  .movie-stage__poster video {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .movie-stage__copy {
    display: grid;
    gap: 1rem;
    align-content: center;
    padding: clamp(0.4rem, 2vw, 1.2rem);
  }

  .great-ones-lockup {
    inline-size: min(100%, 34rem);
    block-size: auto;
    height: auto;
    aspect-ratio: 2172 / 724;
    object-fit: contain;
    filter: drop-shadow(0 0 2rem rgba(213, 155, 50, 0.22));
  }

  .movie-stage__copy p:not(.eyebrow) {
    max-inline-size: 37rem;
    font-size: clamp(1rem, 1.2vw, 1.24rem);
  }

  .character-row {
    width: min(calc(100vw - (var(--gutter) * 2)), var(--shell));
    position: relative;
    z-index: 1;
    margin: clamp(2rem, 5vw, 4rem) auto 0;
    display: grid;
    gap: clamp(0.8rem, 2vw, 1.3rem);
  }

  .character-row article {
    min-block-size: clamp(15rem, 24vw, 24rem);
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .character-row article::after {
    display: none;
  }

  .character-row img {
    border: 1px solid rgba(213, 155, 50, 0.26);
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: 78% 28%;
    filter: saturate(1.05) contrast(1.04);
  }

  .character-row article:nth-child(2) {
    margin-block-start: clamp(1rem, 3vw, 2.6rem);
  }

  .character-row article:nth-child(3) {
    margin-block-start: clamp(0.25rem, 1.5vw, 1.4rem);
  }

  .portal-section {
    background:
      radial-gradient(circle at 12% 18%, rgba(213, 155, 50, 0.11), transparent 24rem),
      linear-gradient(180deg, #070707, var(--black));
  }

  .portal {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }

  .portal__intro h2 {
    max-inline-size: 10ch;
  }

  .portal__intro p {
    max-inline-size: 28rem;
    margin-block: 1rem;
  }

  .portal__intro a {
    color: var(--gold);
    font-weight: 800;
  }

  .contact-form {
    display: grid;
    gap: 1rem;
    padding: clamp(1.1rem, 3vw, 2rem);
    border: 1px solid var(--line-strong);
    background:
      linear-gradient(180deg, rgba(213, 155, 50, 0.08), transparent),
      rgba(8, 8, 8, 0.84);
    box-shadow: var(--shadow);
  }

  .contact-form__grid {
    display: grid;
    gap: 1rem;
  }

  .contact-form label {
    display: grid;
    gap: 0.45rem;
    color: var(--soft);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .contact-form__full {
    grid-column: 1 / -1;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    inline-size: 100%;
    border: 1px solid var(--line);
    background: rgba(5, 5, 5, 0.76);
    color: var(--off-white);
    padding: 0.6rem 0.85rem;
    border-radius: 0;
  }

  .contact-form textarea {
    min-block-size: 6rem;
    resize: vertical;
  }

  .contact-form input::placeholder,
  .contact-form textarea::placeholder {
    color: rgba(245, 240, 232, 0.32);
  }

  .contact-form input:focus,
  .contact-form select:focus,
  .contact-form textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 0.22rem rgba(213, 155, 50, 0.13);
    outline: none;
  }

  .contact-form__honeypot {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .contact-form__footer {
    display: grid;
    gap: 0.75rem;
    padding-block-start: 0.5rem;
  }

  .form-submit {
    min-block-size: 3.2rem;
    border: 1px solid var(--gold);
    background: var(--gold);
    color: #050505;
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    transform: skewX(-12deg);
  }

  .form-submit:hover {
    transform: skewX(-12deg) translateY(-2px);
  }

  .contact-form__status {
    min-block-size: 1.5rem;
    color: var(--soft);
    font-size: 0.85rem;
  }

  .contact-form__status[data-state="success"] {
    color: #bdeec7;
  }

  .contact-form__status[data-state="error"] {
    color: #ffb3b3;
  }

  .site-footer {
    padding: 3rem var(--gutter);
    background: #020202;
    border-block-start: 1px solid var(--line);
  }

  .site-footer__inner {
    width: min(calc(100vw - (var(--gutter) * 2)), var(--shell));
    margin-inline: auto;
    display: grid;
    gap: 1.2rem;
    justify-items: center;
    text-align: center;
  }

  .site-footer__brand {
    inline-size: 5.5rem;
  }

  .site-footer__brand img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 608 / 254;
    object-fit: contain;
  }

  .site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 1.4rem;
    align-items: center;
    justify-content: center;
  }

  .site-footer__links a {
    color: var(--muted);
    font-family: var(--nav-font);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .site-footer__legal {
    color: var(--soft);
    font-size: 0.82rem;
  }

  @keyframes orbital-drift {
    from {
      transform: rotate(0deg) scale(1);
    }

    to {
      transform: rotate(360deg) scale(1.04);
    }
  }

  .comics-page main {
    padding-block-start: 4.15rem;
  }

  .comics-hero,
  .comics-list,
  .comics-expansion {
    padding-block: var(--space-section);
    background:
      radial-gradient(circle at 80% 18%, rgba(213, 155, 50, 0.14), transparent 24rem),
      linear-gradient(180deg, var(--black), var(--black-2));
  }

  .comics-hero {
    min-block-size: calc(100vh - 4.15rem);
    display: grid;
    align-items: center;
  }

  .comics-hero__layout {
    width: min(calc(100vw - (var(--gutter) * 2)), var(--shell));
    margin-inline: auto;
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }

  .comics-hero h1 {
    max-inline-size: 9ch;
    margin-block: 1rem;
    font-size: clamp(4.4rem, 13vw, 11rem);
    line-height: 0.78;
  }

  .comics-hero p:not(.eyebrow) {
    max-inline-size: 38rem;
    font-size: clamp(1rem, 1.2vw, 1.28rem);
  }

  .comics-hero__covers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.8rem, 2vw, 1.3rem);
    align-items: start;
  }

  .comics-hero__covers img,
  .comic-issue img {
    inline-size: 100%;
    aspect-ratio: 0.68;
    object-fit: cover;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
  }

  .comics-hero__covers img:nth-child(2) {
    margin-block-start: clamp(1.5rem, 5vw, 4rem);
  }

  .comic-issue-grid {
    display: grid;
    gap: 1.2rem;
  }

  .comic-issue {
    display: grid;
    gap: 1rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--line);
  }

  .comic-issue > div {
    display: grid;
    gap: 0.65rem;
  }

  .comic-issue span {
    color: var(--gold);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .comic-issue h3 {
    font-size: clamp(2.5rem, 6vw, 5.2rem);
    line-height: 0.86;
  }

  .comic-issue p {
    color: var(--muted);
  }

  .comic-issue a {
    width: fit-content;
    border-block-end: 1px solid var(--gold);
    color: var(--off-white);
    font-family: var(--display);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  [data-reveal],
  [data-split-heading],
  [data-hero-word] {
    transition: opacity 650ms ease, transform 650ms ease;
  }

  .js [data-reveal],
  .js [data-split-heading] {
    opacity: 0;
    transform: translateY(2rem);
  }

  .js [data-reveal].is-visible,
  .js [data-split-heading].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .js [data-hero-word] {
    opacity: 0;
    transform: translateY(1.6rem);
  }

  .js [data-hero-word].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (min-width: 48rem) {
    .manifesto-grid,
    .portal {
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
    }

    .premium-card-grid,
    .character-row {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .premium-card--wide {
      grid-column: span 2;
    }

    .movie-stage {
      grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    }

    .comics-hero__layout {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }

    .comic-issue-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .movie-stage__copy {
      order: -1;
    }

    .contact-form__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 63.99rem) {
    .site-header__bar {
      grid-template-columns: auto 1fr auto;
      min-block-size: 4.3rem;
    }

    .site-header__toggle {
      display: inline-flex;
      align-items: center;
    }

    .site-nav {
      position: fixed;
      inset: 4.3rem var(--gutter) auto;
      display: grid;
      justify-content: stretch;
      gap: 0;
      padding: 1rem;
      background: rgba(5, 5, 5, 0.96);
      border: 1px solid var(--line);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-0.7rem);
      transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    }

    body[data-nav-open="true"] .site-nav {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .site-nav a,
    .site-nav__link {
      display: block;
      inline-size: 100%;
      padding: 0.92rem 0;
      text-align: left;
    }

    .site-nav a::after,
    .site-nav__link::after {
      inset: auto 0 0;
    }

    .mobile-comics {
      display: none;
      padding: 0 0 0.6rem 1rem;
    }

    .mobile-comics a {
      color: var(--muted);
      font-size: 0.88rem;
    }

    body[data-mobile-comics-open="true"] .mobile-comics {
      display: grid;
    }

    .comics-mega {
      display: none;
    }

    .hero {
      min-block-size: 78vh;
      min-block-size: 78svh;
    }

    .studio-manifesto h2,
    .series-story__copy h2,
    .slate-section .section-heading h2,
    .movie-story__copy h2,
    .portal h2 {
      font-size: clamp(3.2rem, 15vw, 5.6rem);
    }

    .series-story,
    .movie-story,
    .tv-series-visual {
      grid-template-columns: 1fr;
    }

    .series-story {
      min-block-size: 48rem;
      align-items: end;
      padding-block-start: 8rem;
    }

    .series-story__media img {
      object-position: 58% center;
    }

    .tv-slate {
      grid-template-columns: 1fr;
    }

    .tv-series-visual {
      min-block-size: auto;
    }

    .uptown-series-card {
      min-block-size: 22rem;
    }

    .uptown-series-card img {
      inline-size: min(72vw, 18rem);
      block-size: auto;
      min-inline-size: 100%;
    }

    .tv-slate__feature,
    .tv-poster {
      min-block-size: 26rem;
    }

    .movie-story__trailer {
      min-block-size: auto;
    }

    .character-row {
      grid-template-columns: 1fr;
    }

    .character-row article {
      min-block-size: 24rem;
      margin-block-start: 0;
    }
  }

  .studio-section,
  .scale-section,
  .project-section,
  .media-gallery-section,
  .partnership-section {
    position: relative;
    padding-block: clamp(7.5rem, 11vw, 11rem);
    overflow: clip;
  }

  .studio-section {
    background:
      radial-gradient(circle at 76% 38%, rgba(213, 155, 50, 0.16), transparent 27rem),
      radial-gradient(circle at 14% 76%, rgba(73, 159, 212, 0.1), transparent 30rem),
      linear-gradient(180deg, #050505 0%, #090909 56%, #050505 100%);
  }

  .studio-section__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
  }

  .studio-section__copy {
    margin: 0;
  }

  .studio-section__copy h2 {
    max-inline-size: 12ch;
    margin-block-start: 1rem;
    font-size: clamp(5.4rem, 8.8vw, 9.8rem);
    line-height: 0.78;
  }

  .studio-section__copy p:not(.eyebrow) {
    max-inline-size: 39rem;
    margin-block-start: 1.35rem;
    color: rgba(245, 240, 232, 0.78);
    font-size: clamp(1rem, 1.2vw, 1.2rem);
  }

  .founder-card {
    position: relative;
    min-block-size: clamp(35rem, 50vw, 48rem);
    margin: 0;
    overflow: clip;
    border: 1px solid rgba(245, 240, 232, 0.14);
    background:
      radial-gradient(circle at 52% 20%, rgba(73, 159, 212, 0.18), transparent 20rem),
      linear-gradient(180deg, rgba(245, 240, 232, 0.05), rgba(5, 5, 5, 0.2));
    box-shadow: 0 2.8rem 7rem rgba(0, 0, 0, 0.6);
  }

  .founder-card::before {
    content: "";
    position: absolute;
    inset: auto -20% -20% -20%;
    z-index: 1;
    block-size: 48%;
    background: linear-gradient(180deg, transparent, #050505 72%);
    pointer-events: none;
  }

  .founder-card::after {
    content: "";
    position: absolute;
    inset: 1rem;
    border: 1px solid rgba(213, 155, 50, 0.24);
    pointer-events: none;
  }

  .founder-card img {
    inline-size: 100%;
    block-size: 100%;
    min-block-size: inherit;
    object-fit: cover;
    object-position: center top;
  }

  .founder-card figcaption {
    position: absolute;
    inset: auto 1.5rem 1.5rem;
    z-index: 2;
    display: grid;
    gap: 0.28rem;
    color: var(--off-white);
    font-family: var(--display);
    font-size: clamp(2rem, 3.2vw, 3.4rem);
    font-weight: 900;
    line-height: 0.9;
    text-transform: uppercase;
  }

  .founder-card figcaption span {
    color: var(--gold);
    font-family: var(--body);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.18em;
  }

  .franchise-showcase {
    position: relative;
    min-block-size: 100vh;
    display: grid;
    align-items: end;
    padding: clamp(7rem, 11vw, 10rem) var(--gutter);
    overflow: clip;
    isolation: isolate;
    background: #050505;
  }

  .franchise-showcase__art {
    position: absolute;
    inset: 0;
    z-index: -2;
  }

  .franchise-showcase__art img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.08) contrast(1.06) brightness(0.92);
    transform: scale(1.015);
  }

  .franchise-showcase__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(5, 5, 5, 0.06), rgba(5, 5, 5, 0.84) 82%, #050505),
      linear-gradient(90deg, rgba(5, 5, 5, 0.94), rgba(5, 5, 5, 0.32) 52%, rgba(5, 5, 5, 0.7));
  }

  .franchise-showcase__panel {
    position: relative;
    width: min(44rem, 100%);
    margin-inline-start: max(0rem, calc((100vw - var(--shell)) / 2));
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-inline-start: 3px solid var(--gold);
    background:
      linear-gradient(135deg, rgba(213, 155, 50, 0.09), transparent 36%),
      rgba(5, 5, 5, 0.78);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
  }

  .franchise-showcase__panel h2 {
    margin-block-start: 0.85rem;
    font-size: clamp(4.6rem, 8.2vw, 8.6rem);
    line-height: 0.8;
  }

  .franchise-showcase__panel p:not(.eyebrow) {
    max-inline-size: 35rem;
    margin-block-start: 1rem;
    color: rgba(245, 240, 232, 0.82);
    font-size: clamp(1rem, 1.15vw, 1.16rem);
  }

  .franchise-actions,
  .franchise-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-block-start: 1.35rem;
  }

  .cta-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 3rem;
    padding-inline: 1.15rem;
    border: 1px solid var(--gold);
    background: var(--gold);
    color: #050505;
    font-family: var(--nav-font);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transform: skewX(-12deg);
    transition: transform 160ms ease, background 160ms ease, color 160ms ease;
  }

  .cta-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(245, 240, 232, 0.18);
    transform: translate(0.28rem, 0.28rem);
    transition: transform 160ms ease;
  }

  .cta-button:hover {
    transform: skewX(-12deg) translateY(-2px);
  }

  .cta-button:hover::before {
    transform: translate(0.18rem, 0.18rem);
  }

  .cta-button--ghost {
    background: transparent;
    color: var(--off-white);
  }

  .franchise-chips a {
    border: 1px solid rgba(245, 240, 232, 0.15);
    padding: 0.65rem 0.82rem;
    background: rgba(245, 240, 232, 0.04);
    color: rgba(245, 240, 232, 0.78);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
  }

  .franchise-chips a:hover {
    border-color: rgba(213, 155, 50, 0.6);
    background: rgba(213, 155, 50, 0.09);
    color: var(--off-white);
  }

  .scale-section {
    background:
      radial-gradient(circle at 28% 18%, rgba(73, 159, 212, 0.13), transparent 28rem),
      linear-gradient(180deg, #050505, #0a0a0a 52%, #050505);
  }

  .section-heading--compact {
    max-inline-size: 52rem;
  }

  .section-heading--compact h2 {
    margin-block-start: 0.85rem;
    font-size: clamp(4.4rem, 7.4vw, 8.2rem);
    line-height: 0.82;
  }

  .section-heading--compact p:not(.eyebrow) {
    max-inline-size: 38rem;
    margin-block-start: 1rem;
  }

  .series-feature {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(18rem, 0.42fr) minmax(0, 0.66fr);
    gap: clamp(1rem, 2.4vw, 2rem);
    align-items: stretch;
    margin-block: clamp(2.4rem, 5vw, 4rem) 1rem;
  }

  .series-feature__copy,
  .series-feature__video,
  .series-feature__art {
    position: relative;
    overflow: clip;
    border: 1px solid rgba(245, 240, 232, 0.13);
    background:
      radial-gradient(circle at 18% 18%, rgba(73, 159, 212, 0.12), transparent 18rem),
      rgba(8, 8, 8, 0.9);
    box-shadow: 0 1.7rem 4rem rgba(0, 0, 0, 0.32);
  }

  .series-feature__copy {
    display: grid;
    align-content: end;
    padding: clamp(1.25rem, 2.4vw, 2rem);
    min-block-size: 34rem;
  }

  .series-feature__copy h3 {
    max-inline-size: 12ch;
    margin-block: 0.8rem 1rem;
    font-size: clamp(3.4rem, 5.7vw, 6.6rem);
    line-height: 0.8;
  }

  .series-feature__copy p:not(.eyebrow) {
    max-inline-size: 35rem;
    color: rgba(245, 240, 232, 0.75);
  }

  .series-feature__video {
    display: grid;
    place-items: center;
    padding: 0.75rem;
    background:
      linear-gradient(180deg, rgba(213, 155, 50, 0.08), transparent 42%),
      #030303;
  }

  .series-feature__video::before {
    content: "";
    position: absolute;
    inset: 0.75rem;
    border: 1px solid rgba(213, 155, 50, 0.28);
    pointer-events: none;
  }

  .series-feature__video video {
    inline-size: min(100%, 22rem);
    block-size: 100%;
    max-block-size: 42rem;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    background: #050505;
  }

  .series-feature__art {
    display: grid;
    grid-template-rows: minmax(0, 0.46fr) minmax(0, 0.54fr);
    min-block-size: 34rem;
  }

  .series-feature__art img {
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 0;
    object-fit: cover;
    filter: saturate(1.04) contrast(1.05) brightness(0.9);
    transition: transform 220ms ease, filter 220ms ease;
  }

  .series-feature__art img:first-child {
    object-position: center;
  }

  .series-feature__art img:last-child {
    object-position: center 18%;
    border-block-start: 1px solid rgba(245, 240, 232, 0.13);
  }

  .series-feature__art:hover img {
    transform: scale(1.025);
    filter: saturate(1.08) contrast(1.06) brightness(0.98);
  }

  .content-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  .content-card {
    position: relative;
    min-block-size: 24rem;
    display: grid;
    align-content: end;
    gap: 0.8rem;
    padding: clamp(1.1rem, 2vw, 1.45rem);
    overflow: clip;
    border: 1px solid rgba(245, 240, 232, 0.13);
    background:
      radial-gradient(circle at 22% 18%, rgba(213, 155, 50, 0.14), transparent 16rem),
      linear-gradient(180deg, rgba(245, 240, 232, 0.05), rgba(5, 5, 5, 0.18)),
      #090909;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }

  .content-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(135deg, transparent 0 58%, rgba(73, 159, 212, 0.1)),
      linear-gradient(180deg, transparent, rgba(5, 5, 5, 0.48));
    pointer-events: none;
  }

  .content-card:hover {
    transform: translateY(-0.35rem);
    border-color: rgba(213, 155, 50, 0.42);
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.38);
  }

  .content-card span,
  .content-card h3,
  .content-card p {
    position: relative;
    z-index: 1;
  }

  .content-card span {
    color: var(--blue);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.18em;
  }

  .content-card h3 {
    font-size: clamp(2rem, 3vw, 3.2rem);
    line-height: 0.9;
  }

  .content-card p {
    color: rgba(245, 240, 232, 0.68);
    font-size: 0.95rem;
    line-height: 1.58;
  }

  .project-section {
    background:
      radial-gradient(circle at 76% 12%, rgba(213, 155, 50, 0.16), transparent 28rem),
      radial-gradient(circle at 12% 82%, rgba(73, 159, 212, 0.12), transparent 28rem),
      linear-gradient(180deg, #050505, #0b0906 54%, #050505);
  }

  .project-card {
    display: grid;
    grid-template-columns: minmax(20rem, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border: 1px solid rgba(245, 240, 232, 0.13);
    background:
      linear-gradient(90deg, rgba(213, 155, 50, 0.08), transparent 44%),
      rgba(7, 7, 7, 0.88);
    box-shadow: var(--shadow);
  }

  .project-card__copy {
    display: grid;
    gap: 1.05rem;
    align-content: center;
  }

  .project-card__copy .cta-button {
    width: fit-content;
    margin-block-start: 0.2rem;
  }

  .project-card__copy p:not(.eyebrow) {
    max-inline-size: 35rem;
    color: rgba(245, 240, 232, 0.78);
  }

  .project-card__media {
    position: relative;
    isolation: isolate;
  }

  .project-card__media::before {
    content: "";
    position: absolute;
    inset: -0.8rem 0.8rem 0.8rem -0.8rem;
    z-index: -1;
    border: 1px solid rgba(73, 159, 212, 0.28);
    transform: skewX(-7deg);
  }

  .project-card__media video {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #050505;
    box-shadow: 0 2.5rem 6rem rgba(0, 0, 0, 0.6);
  }

  .project-section .great-ones-lockup {
    inline-size: min(100%, 28rem);
    aspect-ratio: 2172 / 724;
    object-fit: contain;
  }

  .concept-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-block-start: 1rem;
  }

  .concept-strip img {
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: 76% 30%;
    border: 1px solid rgba(245, 240, 232, 0.13);
    filter: saturate(1.04) contrast(1.03);
    transition: transform 180ms ease, border-color 180ms ease;
  }

  .concept-strip img:hover {
    transform: scale(1.018);
    border-color: rgba(213, 155, 50, 0.45);
  }

  .media-gallery-section {
    background:
      radial-gradient(circle at 18% 34%, rgba(73, 159, 212, 0.12), transparent 25rem),
      linear-gradient(180deg, #050505, #080808 50%, #050505);
  }

  .media-gallery {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
  }

  .image-card {
    position: relative;
    min-block-size: 21rem;
    grid-column: span 4;
    overflow: clip;
    border: 1px solid rgba(245, 240, 232, 0.13);
    background: #080808;
  }

  .image-card:nth-child(1),
  .image-card:nth-child(4) {
    grid-column: span 6;
  }

  .image-card:nth-child(5) {
    grid-column: span 3;
    min-block-size: 34rem;
  }

  .image-card img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.02) contrast(1.04) brightness(0.88);
    transition: transform 260ms ease, filter 260ms ease;
  }

  .image-card:nth-child(6) img {
    object-fit: contain;
    padding: 2rem;
    background:
      radial-gradient(circle at 50% 48%, rgba(213, 155, 50, 0.2), transparent 16rem),
      #030303;
  }

  .image-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 56%, rgba(5, 5, 5, 0.86));
  }

  .image-card span {
    position: absolute;
    inset: auto 1rem 1rem;
    z-index: 1;
    color: var(--off-white);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .image-card:hover img {
    transform: scale(1.035);
    filter: saturate(1.08) contrast(1.06) brightness(0.95);
  }

  .partnership-section {
    background:
      radial-gradient(circle at 82% 28%, rgba(213, 155, 50, 0.12), transparent 26rem),
      linear-gradient(180deg, #050505, #080808);
  }

  .partnership-section .portal {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(245, 240, 232, 0.13);
    background:
      linear-gradient(120deg, rgba(73, 159, 212, 0.08), transparent 46%),
      rgba(7, 7, 7, 0.86);
    box-shadow: var(--shadow);
  }

  .partnership-section .portal__intro h2 {
    max-inline-size: 11ch;
    font-size: clamp(4rem, 6.7vw, 7.2rem);
    line-height: 0.82;
  }

  .partnership-form {
    border-color: rgba(213, 155, 50, 0.28);
    background:
      linear-gradient(180deg, rgba(213, 155, 50, 0.08), transparent 38%),
      #050505;
  }

  .partnership-form .form-submit {
    min-block-size: 3.2rem;
    padding-inline: 1.3rem;
    background: var(--gold);
    color: #050505;
  }

  .site-footer {
    padding-block: 4rem 3rem;
    border-block-start: 1px solid rgba(245, 240, 232, 0.11);
    background: #030303;
  }

  .site-footer__inner {
    gap: 1.2rem;
  }

  .site-footer__brand img {
    inline-size: min(12rem, 46vw);
    aspect-ratio: 608 / 254;
    object-fit: contain;
  }

  .site-footer__links {
    justify-content: center;
  }

  .site-footer__legal {
    color: rgba(245, 240, 232, 0.48);
    text-align: center;
  }

  @media (max-width: 63.99rem) {
    .studio-section__grid,
    .project-card,
    .partnership-section .portal {
      grid-template-columns: 1fr;
    }

    .studio-section__copy h2,
    .franchise-showcase__panel h2,
    .section-heading--compact h2,
    .partnership-section .portal__intro h2 {
      font-size: clamp(3.25rem, 15vw, 5.8rem);
    }

    .founder-card {
      min-block-size: 34rem;
    }

    .franchise-showcase {
      min-block-size: 48rem;
      padding-block: 8rem 5rem;
    }

    .franchise-showcase__panel {
      margin-inline-start: 0;
    }

    .content-card-grid,
    .series-feature,
    .concept-strip {
      grid-template-columns: 1fr;
    }

    .series-feature__copy,
    .series-feature__art {
      min-block-size: 26rem;
    }

    .series-feature__video video {
      max-block-size: 36rem;
    }

    .content-card {
      min-block-size: 18rem;
    }

    .media-gallery {
      grid-template-columns: 1fr;
    }

    .image-card,
    .image-card:nth-child(1),
    .image-card:nth-child(4),
    .image-card:nth-child(5) {
      grid-column: auto;
      min-block-size: 24rem;
    }
  }

  .studio-section,
  .scale-section,
  .project-section,
  .media-gallery-section,
  .partnership-section {
    padding-block: clamp(10rem, 15vw, 16rem);
  }

  .studio-section {
    background:
      radial-gradient(circle at 72% 28%, rgba(213, 155, 50, 0.18), transparent 30rem),
      radial-gradient(circle at 84% 72%, rgba(73, 159, 212, 0.12), transparent 28rem),
      linear-gradient(180deg, #050505 0%, #080807 48%, #050505 100%);
  }

  .studio-section__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(23rem, 0.72fr);
    gap: clamp(5rem, 9vw, 10rem);
  }

  .studio-section__copy h2 {
    max-inline-size: 11ch;
    font-size: clamp(5.9rem, 9.6vw, 10.8rem);
  }

  .studio-section__copy p:not(.eyebrow) {
    max-inline-size: 42rem;
    margin-block-start: clamp(1.5rem, 3vw, 2.4rem);
  }

  .founder-card {
    min-block-size: clamp(42rem, 56vw, 56rem);
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .founder-card::after {
    inset: auto 5% 1.4rem 5%;
    block-size: 36%;
    border: 0;
    background:
      radial-gradient(ellipse at 50% 96%, rgba(213, 155, 50, 0.18), transparent 58%),
      linear-gradient(180deg, transparent, #050505 82%);
  }

  .founder-card img {
    filter: drop-shadow(0 3rem 5rem rgba(0, 0, 0, 0.72));
    -webkit-mask-image: linear-gradient(180deg, #000 0 73%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0 73%, transparent 100%);
  }

  .founder-card figcaption {
    inset: auto 0 0;
  }

  .franchise-showcase {
    min-block-size: 116vh;
    padding-block: clamp(10rem, 14vw, 14rem);
  }

  .franchise-showcase__art img {
    filter: saturate(1.18) contrast(1.08) brightness(1.08);
    transform: scale(1.08);
  }

  .franchise-showcase__art::after {
    background:
      linear-gradient(180deg, rgba(5, 5, 5, 0.02), rgba(5, 5, 5, 0.62) 82%, #050505),
      linear-gradient(90deg, rgba(5, 5, 5, 0.78), rgba(5, 5, 5, 0.18) 52%, rgba(5, 5, 5, 0.5));
  }

  .franchise-showcase__panel {
    width: min(48rem, 100%);
    padding: 0;
    border-inline-start: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .franchise-showcase__panel::before {
    content: "";
    display: block;
    inline-size: 5rem;
    block-size: 3px;
    margin-block-end: 1.25rem;
    background: var(--gold);
  }

  .franchise-showcase__panel h2 {
    font-size: clamp(5.4rem, 9.6vw, 10.4rem);
  }

  .franchise-actions {
    gap: 0.9rem;
    margin-block-start: 2rem;
  }

  .franchise-socials {
    margin-block-start: 2rem;
  }

  .franchise-socials a {
    inline-size: 2.8rem;
    block-size: 2.8rem;
    border-color: transparent;
    background: transparent;
    color: rgba(245, 240, 232, 0.82);
  }

  .franchise-socials a:hover {
    border-color: transparent;
    background: transparent;
    color: var(--gold);
  }

  .scale-section {
    background:
      radial-gradient(circle at 20% 16%, rgba(73, 159, 212, 0.11), transparent 32rem),
      linear-gradient(180deg, #050505, #080808 54%, #050505);
  }

  .series-feature {
    grid-template-columns: minmax(0, 0.95fr) minmax(18rem, 0.44fr) minmax(0, 0.7fr);
    gap: clamp(2rem, 4vw, 4rem);
    margin-block: clamp(4rem, 7vw, 6rem) clamp(4rem, 7vw, 6rem);
  }

  .series-feature__copy,
  .series-feature__video,
  .series-feature__art {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .series-feature__copy {
    padding: 0;
  }

  .series-feature__video {
    padding: 0;
  }

  .series-feature__video::before {
    inset: -0.7rem;
    border-color: rgba(213, 155, 50, 0.18);
    transform: skewX(-4deg);
  }

  .series-feature__video video {
    inline-size: min(100%, 23rem);
    box-shadow: 0 3rem 7rem rgba(0, 0, 0, 0.65);
  }

  .series-feature__art {
    gap: 1.2rem;
  }

  .series-feature__art img {
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.36);
  }

  .series-feature__art img:last-child {
    border-block-start: 0;
  }

  .content-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.4rem, 2.4vw, 2.2rem);
  }

  .content-card {
    min-block-size: clamp(26rem, 34vw, 34rem);
    padding: clamp(1.7rem, 3vw, 2.4rem);
    border: 0;
    background:
      radial-gradient(circle at 28% 20%, rgba(73, 159, 212, 0.16), transparent 18rem),
      linear-gradient(180deg, rgba(245, 240, 232, 0.06), rgba(245, 240, 232, 0.015)),
      rgba(255, 255, 255, 0.018);
  }

  .content-card h3 {
    max-inline-size: 8ch;
    font-size: clamp(2.7rem, 4.3vw, 4.6rem);
  }

  .content-card p {
    max-inline-size: 23rem;
    font-size: 1rem;
  }

  .project-card {
    grid-template-columns: minmax(18rem, 0.58fr) minmax(0, 1.42fr);
    gap: clamp(3rem, 6vw, 6rem);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .project-card__media {
    order: 2;
  }

  .project-card__media::before {
    inset: -1.2rem 1.2rem 1.2rem -1.2rem;
    border-color: rgba(73, 159, 212, 0.22);
  }

  .project-card__media video {
    box-shadow: 0 3rem 8rem rgba(0, 0, 0, 0.72);
  }

  .project-section .great-ones-lockup {
    inline-size: min(100%, 31rem);
  }

  .concept-strip {
    grid-template-columns: 1.05fr 0.95fr 1.05fr;
    gap: clamp(1.3rem, 2.4vw, 2.2rem);
    margin-block-start: clamp(4rem, 7vw, 6rem);
  }

  .concept-strip img {
    border: 0;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.42);
  }

  .media-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
  }

  .image-card,
  .image-card:nth-child(1),
  .image-card:nth-child(4),
  .image-card:nth-child(5) {
    grid-column: auto;
    min-block-size: clamp(29rem, 45vw, 42rem);
    border: 0;
    box-shadow: 0 2.2rem 5.5rem rgba(0, 0, 0, 0.42);
  }

  .image-card:nth-child(4) img {
    object-position: center 16%;
  }

  .partnership-section .portal {
    gap: clamp(4rem, 7vw, 7rem);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .partnership-form {
    gap: 1.45rem;
    padding: clamp(1.7rem, 3.4vw, 3rem);
    border-color: rgba(245, 240, 232, 0.1);
    background:
      radial-gradient(circle at 88% 8%, rgba(213, 155, 50, 0.09), transparent 18rem),
      rgba(245, 240, 232, 0.035);
  }

  .contact-form__grid {
    gap: 1.35rem;
  }

  .contact-form label {
    gap: 0.65rem;
    color: rgba(245, 240, 232, 0.72);
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    min-block-size: 3.55rem;
    border-color: rgba(245, 240, 232, 0.14);
    background: rgba(5, 5, 5, 0.58);
    padding: 1.08rem 1.1rem;
  }

  .contact-form textarea {
    min-block-size: 12rem;
  }

  .partnership-form .form-submit {
    min-block-size: 3.65rem;
    padding-inline: 1.7rem;
  }

  @media (max-width: 63.99rem) {
    .studio-section,
    .scale-section,
    .project-section,
    .media-gallery-section,
    .partnership-section {
      padding-block: clamp(6.5rem, 18vw, 9rem);
    }

    .studio-section__grid,
    .series-feature,
    .content-card-grid,
    .project-card,
    .concept-strip,
    .media-gallery,
    .partnership-section .portal {
      grid-template-columns: 1fr;
    }

    .founder-card {
      min-block-size: 38rem;
    }

    .franchise-showcase {
      min-block-size: 58rem;
    }

    .franchise-showcase__art img {
      object-position: 58% center;
      transform: scale(1.12);
    }

    .franchise-socials a {
      inline-size: 2.65rem;
      block-size: 2.65rem;
    }

    .series-feature__copy {
      min-block-size: auto;
    }

    .series-feature__art {
      grid-template-rows: repeat(2, 18rem);
      min-block-size: auto;
    }

    .content-card {
      min-block-size: 22rem;
    }

    .project-card__media {
      order: 0;
    }

    .image-card,
    .image-card:nth-child(1),
    .image-card:nth-child(4),
    .image-card:nth-child(5) {
      min-block-size: 25rem;
    }
  }

  .studio-section,
  .franchise-showcase,
  .universe-rail-section,
  .scale-section,
  .project-section,
  .media-gallery-section,
  .partnership-section {
    --studio-black: #03060b;
    --studio-navy: #07111f;
    --studio-blue: #0b1e36;
    --electric-blue: #2f8cff;
    --ice-blue: #7ec8ff;
    --studio-white: #f4f7fb;
    --steel: #aab6c5;
    --glass: rgba(8, 18, 32, 0.72);
    --glass-line: rgba(126, 200, 255, 0.18);
    --blue-shadow: 0 2.5rem 7rem rgba(47, 140, 255, 0.16);
    color: var(--studio-white);
    font-family: "Space Grotesk", var(--body);
  }

  .studio-section .text-blue,
  .franchise-showcase .text-blue,
  .scale-section .text-blue,
  .partnership-section .text-blue {
    background: linear-gradient(135deg, #2f8cff, #7ec8ff) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: none !important;
  }

  .studio-section,
  .universe-rail-section,
  .scale-section,
  .project-section,
  .media-gallery-section,
  .partnership-section {
    padding-block: clamp(9rem, 14vw, 15rem);
    background:
      radial-gradient(circle at 50% -8%, rgba(126, 200, 255, 0.1), transparent 30rem),
      radial-gradient(circle at 88% 22%, rgba(47, 140, 255, 0.1), transparent 28rem),
      linear-gradient(180deg, #03060b, #07111f 52%, #03060b);
  }

  .studio-section h2,
  .franchise-showcase h2,
  .universe-rail-section h2,
  .scale-section h2,
  .project-section h2,
  .media-gallery-section h2,
  .partnership-section h2,
  .series-feature__copy h3,
  .content-card h3,
  .image-card h3 {
    font-family: "Rajdhani", var(--display);
    letter-spacing: 0.01em;
  }

  .studio-section .eyebrow,
  .franchise-showcase .eyebrow,
  .universe-rail-section .eyebrow,
  .scale-section .eyebrow,
  .project-section .eyebrow,
  .media-gallery-section .eyebrow,
  .partnership-section .eyebrow {
    color: var(--ice-blue);
  }

  .studio-section p,
  .franchise-showcase p,
  .universe-rail-section p,
  .scale-section p,
  .project-section p,
  .media-gallery-section p,
  .partnership-section p {
    color: var(--steel);
  }

  .studio-section {
    background:
      radial-gradient(ellipse at 76% 38%, rgba(47, 140, 255, 0.2), transparent 26rem),
      linear-gradient(105deg, #03060b 0%, #07111f 56%, #0b1e36 100%);
  }

  .studio-section__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(24rem, 0.72fr);
  }

  .studio-section__copy h2 {
    color: var(--studio-white);
    text-transform: none;
    font-size: clamp(4.8rem, 8vw, 8.8rem);
    line-height: 0.9;
  }

  .studio-section__copy p:not(.eyebrow) {
    font-size: clamp(1.08rem, 1.35vw, 1.28rem);
  }

  .founder-card::before {
    background:
      radial-gradient(ellipse at 55% 88%, rgba(126, 200, 255, 0.2), transparent 52%),
      linear-gradient(180deg, transparent, #03060b 78%);
  }

  .founder-card img {
    filter: drop-shadow(0 3rem 6rem rgba(47, 140, 255, 0.16)) drop-shadow(0 3rem 5rem rgba(0, 0, 0, 0.78));
  }

  .founder-card figcaption span {
    color: var(--ice-blue);
  }

  .franchise-showcase {
    min-block-size: 112vh;
    background: #03060b;
  }

  .franchise-showcase__art img {
    filter: saturate(1.14) contrast(1.08) brightness(1.12);
  }

  .franchise-showcase__art::after {
    background:
      radial-gradient(circle at 62% 38%, rgba(126, 200, 255, 0.12), transparent 26rem),
      linear-gradient(180deg, rgba(3, 6, 11, 0.03), rgba(3, 6, 11, 0.56) 80%, #03060b),
      linear-gradient(90deg, rgba(3, 6, 11, 0.84), rgba(3, 6, 11, 0.14) 55%, rgba(3, 6, 11, 0.45));
  }

  .franchise-showcase__panel::before {
    background: linear-gradient(90deg, var(--electric-blue), var(--ice-blue));
    box-shadow: 0 0 1.8rem rgba(47, 140, 255, 0.5);
  }

  .franchise-showcase__panel h2 {
    color: var(--studio-white);
    text-transform: none;
    line-height: 0.86;
  }

  .franchise-showcase__panel p:not(.eyebrow) {
    color: rgba(244, 247, 251, 0.86);
    font-size: clamp(1.06rem, 1.28vw, 1.24rem);
  }

  .cta-button {
    border-color: rgba(126, 200, 255, 0.36);
    background: linear-gradient(135deg, var(--electric-blue), var(--ice-blue));
    color: #03060b;
    box-shadow: 0 1.2rem 3rem rgba(47, 140, 255, 0.2);
  }

  .cta-button::before {
    border-color: rgba(126, 200, 255, 0.22);
  }

  .cta-button--ghost {
    background: rgba(8, 18, 32, 0.38);
    color: var(--studio-white);
  }

  .franchise-rail {
    gap: clamp(1.1rem, 2vw, 1.8rem);
    margin-block-start: 2.3rem;
  }

  .franchise-rail a {
    border: 0;
    border-block-end: 1px solid rgba(126, 200, 255, 0.38);
    padding: 0 0 0.45rem;
    background: transparent;
    color: rgba(244, 247, 251, 0.88);
    font-family: "Space Grotesk", var(--body);
    font-size: 0.78rem;
  }

  .franchise-rail a:hover {
    background: transparent;
    border-color: var(--ice-blue);
    color: var(--ice-blue);
  }

  .universe-rail-section {
    overflow: clip;
  }

  .universe-rail-section .section-heading {
    margin-block-end: clamp(2.5rem, 5vw, 4.5rem);
  }

  .universe-rail-section h2,
  .scale-section .section-heading--compact h2,
  .media-gallery-section h2,
  .partnership-section .portal__intro h2 {
    color: var(--studio-white);
    text-transform: none;
    line-height: 0.9;
  }

  .universe-rail {
    display: grid;
    grid-template-columns: repeat(5, minmax(13rem, 1fr));
    gap: clamp(1rem, 2vw, 1.4rem);
  }

  .universe-tile {
    position: relative;
    min-block-size: clamp(20rem, 28vw, 30rem);
    overflow: clip;
    background: var(--studio-navy);
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.34);
  }

  .universe-tile img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    filter: saturate(1.04) contrast(1.04) brightness(0.86);
    transition: transform 260ms ease, filter 260ms ease;
  }

  .universe-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 50% 72%, rgba(47, 140, 255, 0.16), transparent 38%),
      linear-gradient(180deg, transparent 46%, rgba(3, 6, 11, 0.88));
  }

  .universe-tile span {
    position: absolute;
    inset: auto 1rem 1rem;
    z-index: 1;
    color: var(--studio-white);
    font-family: "Space Grotesk", var(--body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .universe-tile:hover img,
  .image-card:hover img,
  .concept-strip img:hover {
    transform: scale(1.035);
    filter: saturate(1.1) contrast(1.08) brightness(1);
  }

  .series-feature__video::before,
  .project-card__media::before {
    border-color: rgba(126, 200, 255, 0.2);
    box-shadow: 0 0 3rem rgba(47, 140, 255, 0.12);
  }

  .tag-row span {
    border-color: rgba(126, 200, 255, 0.18);
    color: rgba(244, 247, 251, 0.72);
    background: rgba(8, 18, 32, 0.42);
  }

  .content-card {
    min-block-size: clamp(24rem, 30vw, 30rem);
    background:
      radial-gradient(circle at 74% 18%, rgba(126, 200, 255, 0.13), transparent 15rem),
      linear-gradient(180deg, rgba(8, 18, 32, 0.72), rgba(8, 18, 32, 0.32));
    box-shadow: var(--blue-shadow);
  }

  .content-card span {
    color: var(--ice-blue);
  }

  .content-card h3 {
    color: var(--studio-white);
    text-transform: none;
  }

  .content-card p {
    color: var(--steel);
  }

  .project-section {
    background:
      radial-gradient(circle at 74% 28%, rgba(47, 140, 255, 0.14), transparent 30rem),
      linear-gradient(180deg, #03060b, #07111f 50%, #03060b);
  }

  .project-card__copy {
    gap: 1.35rem;
  }

  .project-card__copy p:not(.eyebrow) {
    color: var(--steel);
    font-size: clamp(1.02rem, 1.2vw, 1.18rem);
  }

  .concept-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .concept-strip img,
  .image-card {
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.42), 0 0 4rem rgba(47, 140, 255, 0.08);
  }

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

  .image-card,
  .image-card:nth-child(1),
  .image-card:nth-child(4),
  .image-card:nth-child(5) {
    min-block-size: clamp(25rem, 34vw, 34rem);
  }

  .image-card::after {
    background:
      radial-gradient(circle at 50% 78%, rgba(47, 140, 255, 0.18), transparent 36%),
      linear-gradient(180deg, transparent 42%, rgba(3, 6, 11, 0.9));
  }

  .image-card span {
    inset: auto 1.1rem 4.2rem;
    color: var(--ice-blue);
  }

  .image-card h3 {
    position: absolute;
    inset: auto 1.1rem 1.05rem;
    z-index: 1;
    margin: 0;
    color: var(--studio-white);
    font-size: clamp(1.8rem, 2.7vw, 2.7rem);
    line-height: 0.95;
    text-transform: none;
  }

  .partnership-section .portal__intro p,
  .portal__intro a {
    color: var(--steel);
  }

  .partnership-form {
    border-color: rgba(126, 200, 255, 0.16);
    background:
      radial-gradient(circle at 90% 0%, rgba(47, 140, 255, 0.12), transparent 18rem),
      rgba(8, 18, 32, 0.56);
    backdrop-filter: blur(16px);
  }

  .contact-form label {
    color: rgba(244, 247, 251, 0.78);
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    border-color: rgba(126, 200, 255, 0.16);
    background: rgba(3, 6, 11, 0.72);
    color: var(--studio-white);
  }

  .contact-form input:focus,
  .contact-form select:focus,
  .contact-form textarea:focus {
    border-color: var(--ice-blue);
    box-shadow: 0 0 0 0.22rem rgba(47, 140, 255, 0.16);
  }

  .partnership-form .form-submit {
    background: linear-gradient(135deg, var(--electric-blue), var(--ice-blue));
    color: #03060b;
    border-color: rgba(126, 200, 255, 0.3);
  }

  .site-footer {
    background:
      radial-gradient(circle at 50% 0%, rgba(47, 140, 255, 0.1), transparent 22rem),
      #03060b;
    border-block-start-color: rgba(126, 200, 255, 0.12);
  }

  .site-footer__links a:hover {
    color: var(--ice-blue);
  }

  @media (max-width: 63.99rem) {
    .universe-rail,
    .concept-strip,
    .media-gallery {
      display: flex;
      gap: 1rem;
      margin-inline: calc(var(--gutter) * -1);
      overflow-x: auto;
      padding-inline: var(--gutter);
      scroll-snap-type: x mandatory;
    }

    .universe-tile,
    .concept-strip img,
    .image-card,
    .image-card:nth-child(1),
    .image-card:nth-child(4),
    .image-card:nth-child(5) {
      flex: 0 0 min(82vw, 22rem);
      min-block-size: 28rem;
      scroll-snap-align: start;
    }

    .franchise-rail {
      gap: 1rem;
    }

    .studio-section__copy h2,
    .franchise-showcase__panel h2,
    .section-heading--compact h2,
    .partnership-section .portal__intro h2 {
      font-size: clamp(3.2rem, 14vw, 5.5rem);
    }

    .content-card {
      min-block-size: 20rem;
    }
  }

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

    .hero__media {
      transform: none !important;
    }

    .js [data-reveal],
    .js [data-split-heading],
    .js [data-hero-word] {
      opacity: 1 !important;
      transform: none !important;
    }
  }
}

@layer motion {
  .site-footer__links a,
  .text-links a,
  .comics-mega a,
  .comic-drop-card,
  .form-submit {
    transition: color 160ms ease, border-color 160ms ease, transform 160ms ease, opacity 160ms ease;
  }

  .site-footer__links a:hover,
  .text-links a:hover,
  .comics-mega a:hover {
    color: var(--gold);
  }

  .form-submit:hover {
    transform: skewX(-12deg) translateY(-2px);
  }
}


  :root {
    --blue: #2f8cff;
    --body: "Roboto Condensed", "Arial Narrow", sans-serif;
    --display: "Roboto Condensed", "Arial Narrow", sans-serif;
    --nav-font: "Roboto Condensed", "Arial Narrow", sans-serif;
  }

  body,
  button,
  input,
  select,
  textarea,
  .site-nav a,
  .site-nav__link,
  .eyebrow,
  p {
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
  }

  body,
  p {
    font-size: var(--type-body, 18.4px);
  }

  p {
    color: #fff;
  }

  body.has-modal-open {
    overflow: hidden;
  }

  .eyebrow,
  .comics-mega__inner .eyebrow {
    color: #AAB6C5;
    font-size: 12px;
  }

  :focus-visible {
    outline-color: #2f8cff;
  }

  .site-header {
    background:
      linear-gradient(180deg, rgba(2, 5, 10, 0.9), rgba(3, 8, 16, 0.8)),
      radial-gradient(circle at 50% 0%, rgba(126, 200, 255, 0.12), transparent 44%);
    border-block-end: 1px solid rgba(126, 200, 255, 0.18);
    box-shadow: 0 0.9rem 2.4rem rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(20px) saturate(125%);
  }

  .site-announcement {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-block-size: 2rem;
    padding: 0.45rem var(--gutter);
    border-block-end: 1px solid rgba(126, 200, 255, 0.14);
    background:
      linear-gradient(90deg, rgba(1, 4, 9, 0.98), rgba(6, 20, 35, 0.96) 50%, rgba(1, 4, 9, 0.98)),
      radial-gradient(circle at 50% 0%, rgba(73, 159, 212, 0.16), transparent 52%);
    color: #f6fbff;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
  }

  .site-announcement::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    block-size: 1px;
    background:
      linear-gradient(90deg, transparent, rgba(126, 200, 255, 0.76), rgba(47, 140, 255, 0.9), transparent);
    transform: translateX(-100%);
    animation: announcementSweep 5.5s ease-in-out infinite;
  }

  .site-announcement::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0 40%, rgba(255, 255, 255, 0.07) 48%, transparent 56% 100%);
    transform: translateX(-120%);
    animation: announcementShimmer 7s ease-in-out infinite;
    pointer-events: none;
  }

  .site-announcement__dot {
    position: relative;
    z-index: 1;
    inline-size: 0.44rem;
    block-size: 0.44rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #7ec8ff;
    box-shadow:
      0 0 0 0 rgba(126, 200, 255, 0.45),
      0 0 0.9rem rgba(126, 200, 255, 0.86);
    animation: liveDotPulse 2.6s ease-in-out infinite;
  }

  .site-announcement__text {
    position: relative;
    z-index: 1;
  }

  @keyframes announcementSweep {
    0%, 28% {
      transform: translateX(-100%);
      opacity: 0;
    }
    44%, 62% {
      opacity: 1;
    }
    100% {
      transform: translateX(100%);
      opacity: 0;
    }
  }

  @keyframes announcementShimmer {
    0%, 45% {
      transform: translateX(-120%);
      opacity: 0;
    }
    56% {
      opacity: 1;
    }
    78%, 100% {
      transform: translateX(120%);
      opacity: 0;
    }
  }

  @keyframes liveDotPulse {
    0%, 100% {
      box-shadow:
        0 0 0 0 rgba(126, 200, 255, 0.28),
        0 0 0.75rem rgba(126, 200, 255, 0.72);
      transform: scale(1);
    }
    50% {
      box-shadow:
        0 0 0 0.32rem rgba(126, 200, 255, 0),
        0 0 1.15rem rgba(126, 200, 255, 0.92);
      transform: scale(1.08);
    }
  }

  .site-header[data-scrolled="true"],
  .site-header.is-scrolled,
  body[data-nav-open="true"] .site-header {
    background:
      linear-gradient(180deg, rgba(2, 5, 10, 0.98), rgba(4, 9, 17, 0.94)),
      radial-gradient(circle at 12% 50%, rgba(47, 140, 255, 0.14), transparent 36%);
    border-block-end: 1px solid rgba(126, 200, 255, 0.25);
    box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(24px) saturate(132%);
  }

  .site-header__bar {
    grid-template-columns: 1fr auto 1fr;
    min-block-size: 3rem;
  }

  .site-header__mark {
    position: absolute;
    inset-inline-start: var(--gutter);
    inset-block-start: 50%;
    inline-size: clamp(5.6rem, 8vw, 7.4rem);
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(-50% - 0.35rem));
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .site-header__mark img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 608 / 254;
    object-fit: contain;
  }

  .site-header[data-scrolled="true"] .site-header__mark,
  .site-header.is-scrolled .site-header__mark,
  body[data-nav-open="true"] .site-header__mark {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%);
  }

  .site-nav {
    grid-column: 1 / -1;
    grid-row: 1;
    position: relative;
    justify-content: center;
    gap: clamp(1.4rem, 3vw, 3.1rem);
  }

  .site-nav::before {
    content: none;
  }

  .hero {
    position: relative;
    overflow: clip;
    min-block-size: calc(100vh - 5rem);
    min-block-size: calc(100svh - 5rem);
    margin-block-start: 5rem;
    background: #03060b;
  }

  .hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 4;
    height: 2px;
    background: #03060b;
    pointer-events: none;
  }

  .hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #03060b;
  }

  .hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 1;
    filter: none;
    transform: translateZ(0);
  }

  .hero__veil {
    display: block;
    position: absolute;
    inset: auto 0 0;
    z-index: 3;
    height: clamp(12rem, 24vh, 20rem);
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(3, 6, 11, 0) 0%,
      rgba(3, 6, 11, 0.18) 35%,
      rgba(3, 6, 11, 0.58) 72%,
      #03060b 100%
    );
  }

  .hero__video {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero__depth--blue {
    display: none;
  }

  .hero__grain {
    display: none;
  }

  .hero-scroll-cue {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .site-announcement::before,
    .site-announcement::after,
    .site-announcement__dot {
      animation: none;
      transform: none;
    }

    .site-announcement::before,
    .site-announcement::after {
      opacity: 0.65;
    }

    .hero__video {
      display: none;
    }

    .hero__media {
      background:
        radial-gradient(circle at 50% 45%, rgba(126, 200, 255, 0.1), transparent 46%),
        url("./assets/sdg-hero-poster.png") center / cover no-repeat,
        #02050a;
    }
  }

  .site-nav a,
  .site-nav__link {
    z-index: 1;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
  }

  .site-nav a::after,
  .site-nav__link::after {
    background: #2f8cff;
    box-shadow: 0 0 1.2rem rgba(47, 140, 255, 0.55);
  }

  .comics-mega__heading .eyebrow,
  .comics-mega__heading a,
  .comic-drop-card span {
    color: #0b1e36;
  }

  .comics-mega__heading .eyebrow {
    font-size: 32px;
  }

  .comics-mega {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(231, 242, 252, 0.72)),
      radial-gradient(circle at 50% 0%, rgba(126, 200, 255, 0.38), transparent 42%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(126, 200, 255, 0.16));
    border-block: 1px solid rgba(255, 255, 255, 0.58);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      inset 0 -1px 0 rgba(47, 140, 255, 0.16),
      0 2rem 4.5rem rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
  }

  .comics-mega::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.38) 44%, transparent 56% 100%),
      radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.38), transparent 48%);
    opacity: 0.54;
  }

  .comics-mega__inner {
    position: relative;
    z-index: 1;
  }

  .comic-drop-card {
    position: relative;
    outline-offset: 0.45rem;
    transition:
      color 180ms ease,
      transform 220ms ease,
      filter 220ms ease;
  }

  .comic-drop-card img {
    transition:
      transform 240ms ease,
      box-shadow 240ms ease,
      border-color 240ms ease,
      filter 240ms ease;
  }

  .comic-drop-card:hover,
  .comic-drop-card:focus-visible,
  .comic-drop-card:focus-within,
  .comic-drop-card:active {
    color: #2f8cff;
    transform: translateY(-0.32rem);
    filter: drop-shadow(0 1.1rem 1.4rem rgba(47, 140, 255, 0.18));
  }

  .comic-drop-card:hover img,
  .comic-drop-card:focus-visible img,
  .comic-drop-card:focus-within img,
  .comic-drop-card:active img {
    border-color: rgba(47, 140, 255, 0.55);
    box-shadow:
      0 1.2rem 2.6rem rgba(0, 0, 0, 0.24),
      0 0 0 1px rgba(255, 255, 255, 0.46),
      0 0 1.4rem rgba(126, 200, 255, 0.34);
    filter: saturate(1.08) contrast(1.04);
    transform: scale(1.035);
  }

  .comic-drop-card span {
    transition: color 180ms ease, transform 220ms ease;
  }

  .comic-drop-card:hover span,
  .comic-drop-card:focus-visible span,
  .comic-drop-card:focus-within span,
  .comic-drop-card:active span {
    color: #2f8cff;
    transform: translateY(-0.08rem);
  }

  .site-footer__links a {
    font-size: 12px;
  }

  .studio-section h2,
  .franchise-showcase h2,
  .universe-rail-section h2,
  .scale-section h2,
  .project-section h2,
  .media-gallery-section h2,
  .partnership-section h2,
  .series-feature__copy h3,
  .content-card h3,
  .image-card h3,
  .portal h2 {
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 32px !important;
    line-height: 1.08;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }

  .studio-section p,
  .franchise-showcase p,
  .universe-rail-section p,
  .scale-section p,
  .project-section p,
  .media-gallery-section p,
  .partnership-section p,
  .content-card p,
  .project-card__copy p:not(.eyebrow),
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    font-size: var(--type-body, 18.4px);
  }

  .studio-section .eyebrow,
  .franchise-showcase .eyebrow,
  .project-section .eyebrow,
  .partnership-section .eyebrow,
  .mission-modal .eyebrow {
    color: #AAB6C5;
    font-size: 12px;
  }

  .studio-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: -1px;
    padding-block: clamp(9rem, 13vw, 14rem);
    padding-block-start: 60px;
    background:
      radial-gradient(ellipse at 76% 46%, rgba(47, 140, 255, 0.2), transparent 38%),
      linear-gradient(180deg, #03060b 0%, #07111f 48%, #03060b 100%);
  }

  .studio-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
      linear-gradient(90deg, rgba(126, 200, 255, 0.1) 1px, transparent 1px),
      linear-gradient(180deg, rgba(126, 200, 255, 0.06) 1px, transparent 1px);
    background-size: 9rem 9rem;
    mask-image: radial-gradient(ellipse at 72% 42%, #000 0 20%, transparent 68%);
    opacity: 0.22;
  }

  .studio-section::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: -1;
    block-size: 32%;
    background: linear-gradient(180deg, transparent, #03060b 88%);
    pointer-events: none;
  }

  .studio-section__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(22rem, 0.78fr);
    gap: clamp(5rem, 9vw, 10rem);
    align-items: center;
  }

  .studio-section__copy {
    position: relative;
    z-index: 2;
  }

  .studio-read-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-block-start: 1.35rem;
    min-block-size: 2.7rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid rgba(126, 200, 255, 0.5);
    background:
      linear-gradient(180deg, rgba(5, 5, 5, 0.96), rgba(2, 5, 10, 0.88));
    color: #fff;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    transform: skewX(-10deg);
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.28);
    cursor: pointer;
  }

  .studio-read-more:hover,
  .studio-read-more:focus-visible {
    border-color: rgba(47, 140, 255, 0.9);
    box-shadow: 0 1rem 2.6rem rgba(47, 140, 255, 0.18);
  }

  .mission-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: clamp(1.25rem, 4vw, 3rem);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease;
  }

  .mission-modal.is-open,
  .mission-modal:target {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mission-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 50% 10%, rgba(47, 140, 255, 0.18), transparent 38%),
      rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(14px);
  }

  .mission-modal__panel {
    position: relative;
    z-index: 1;
    inline-size: min(100%, 46rem);
    max-block-size: min(82vh, 48rem);
    overflow: auto;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid rgba(126, 200, 255, 0.24);
    background:
      linear-gradient(180deg, rgba(3, 6, 11, 0.98), rgba(7, 17, 31, 0.96));
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.62);
  }

  .mission-modal__panel h2 {
    margin-block: 0.45rem 0.35rem;
    color: #fff;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 32px;
    text-transform: uppercase;
  }

  .mission-modal__copy {
    display: grid;
    gap: 1rem;
  }

  .mission-modal__copy p {
    margin: 0;
    color: #fff;
    font-size: var(--type-body, 18.4px);
    line-height: 1.72;
  }

  .mission-modal__close {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    display: inline-grid;
    place-items: center;
    inline-size: 2.45rem;
    block-size: 2.45rem;
    border: 1px solid rgba(126, 200, 255, 0.28);
    background: rgba(5, 5, 5, 0.58);
    color: #fff;
    padding: 0;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
  }

  .mission-modal__close:hover,
  .mission-modal__close:focus-visible {
    border-color: rgba(47, 140, 255, 0.9);
    background: rgba(47, 140, 255, 0.12);
    color: #7ec8ff;
  }

  .mission-modal__close-icon {
    inline-size: 1.1rem;
    block-size: 1.1rem;
  }

  .mission-modal__close-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  .founder-card {
    position: relative;
    min-block-size: clamp(34rem, 54vw, 46rem);
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .founder-card::before {
    display: none;
  }

  .founder-card::after {
    display: none;
  }

  .founder-card img {
    display: block;
    position: relative;
    z-index: 1;
    inline-size: min(100%, 35rem);
    block-size: auto;
    object-fit: contain;
    object-position: center bottom;
    opacity: 1;
    filter:
      drop-shadow(0 1.8rem 3.4rem rgba(0, 0, 0, 0.54));
    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%
      ),
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 76%,
        rgba(0, 0, 0, 0.85) 86%,
        rgba(0, 0, 0, 0.35) 94%,
        rgba(0, 0, 0, 0) 100%
      );
    mask-image:
      linear-gradient(
        to right,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%
      ),
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 76%,
        rgba(0, 0, 0, 0.85) 86%,
        rgba(0, 0, 0, 0.35) 94%,
        rgba(0, 0, 0, 0) 100%
      );
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%, 100% 100%;
    mask-size: 100% 100%, 100% 100%;
  }

  .founder-card figcaption {
    display: none;
  }

  .franchise-showcase__panel h2,
  .studio-section__copy h2,
  .section-heading--compact h2,
  .partnership-section .portal__intro h2 {
    max-inline-size: 36rem;
  }

  .site-footer__links a:hover,
  .text-links a:hover,
  .comics-mega a:hover {
    color: #2f8cff;
  }

  .site-footer__social:hover,
  .site-footer__social:focus-visible {
    color: #fff;
    border-color: rgba(126, 200, 255, 0.78);
    background: rgba(47, 140, 255, 0.18);
    box-shadow: 0 0 1.5rem rgba(126, 200, 255, 0.2);
    outline: 2px solid rgba(126, 200, 255, 0.62);
    outline-offset: 3px;
  }

  @media (max-width: 63.99rem) {
    .site-header__bar {
      grid-template-columns: minmax(5rem, 1fr) auto minmax(4rem, 1fr);
      min-block-size: 3rem;
    }

    .site-header__mark {
      inline-size: 5.25rem;
    }

    .site-header__toggle {
      display: inline-flex;
      align-items: center;
      justify-self: end;
      min-block-size: 2.35rem;
      border-color: rgba(126, 200, 255, 0.24);
      background: rgba(3, 8, 16, 0.74);
      box-shadow: 0 0.75rem 1.8rem rgba(0, 0, 0, 0.32);
    }

    .site-nav {
      position: fixed;
      inset: 5rem var(--gutter) auto;
      display: grid;
      justify-content: stretch;
      gap: 0;
      padding: 0.75rem 1rem;
      border: 1px solid rgba(126, 200, 255, 0.22);
      background:
        linear-gradient(180deg, rgba(3, 8, 16, 0.98), rgba(2, 5, 10, 0.96));
      box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.46);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-0.45rem);
      transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    }

    body[data-nav-open="true"] .site-nav {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .site-nav a,
    .site-nav__link {
      display: block;
      inline-size: 100%;
      padding: 0.82rem 0;
      font-size: 12px;
      text-align: left;
    }

    .site-nav a::after,
    .site-nav__link::after {
      inset: auto 0 0;
    }

    .studio-section h2,
    .franchise-showcase h2,
    .universe-rail-section h2,
    .scale-section h2,
    .project-section h2,
    .media-gallery-section h2,
    .partnership-section h2,
    .series-feature__copy h3,
    .content-card h3,
    .image-card h3,
    .portal h2 {
      font-size: 32px !important;
    }
  }


  /* Landing page design system: keep type, spacing, and controls consistent. */
  :root {
    --type-heading: 32px;
    --type-body: 18.4px;
    --type-body-line: 1.72;
    --type-eyebrow: 12px;
    --type-nav: 12px;
    --type-button: 0.82rem;
    --color-page: #03060b;
    --color-text: #ffffff;
    --color-muted: #aab6c5;
    --color-accent: #2f8cff;
    --color-accent-soft: #7ec8ff;
    --space-section-y: clamp(7.5rem, 12vw, 12rem);
  }

  .studio-read-more.cta-button,
  .tuc-banner .cta-button,
  .project-card__copy .cta-button {
    min-block-size: 3rem;
    padding: 0 1.15rem;
    border-color: rgba(126, 200, 255, 0.36);
    background: linear-gradient(135deg, var(--electric-blue), var(--ice-blue));
    color: #03060b;
    font-family: var(--nav-font);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    transform: skewX(-12deg);
    box-shadow: 0 1.2rem 3rem rgba(47, 140, 255, 0.2);
  }

  .studio-read-more.cta-button {
    margin-block-start: 1.35rem;
  }

  body {
    font-size: var(--type-body);
  }

  .studio-section__copy > p,
  .tuc-banner__content p:not(.eyebrow),
  .project-card__copy p:not(.eyebrow),
  .portal__intro p:not(.eyebrow),
  .section-heading--compact p:not(.eyebrow),
  .content-card p,
  .image-card p,
  .mission-modal__copy p {
    color: var(--color-text);
    font-size: var(--type-body);
    line-height: var(--type-body-line);
  }

  .studio-section .eyebrow,
  .franchise-showcase .eyebrow,
  .project-section .eyebrow,
  .partnership-section .eyebrow,
  .mission-modal .eyebrow,
  .comics-mega .eyebrow {
    color: var(--color-muted);
    font-size: var(--type-eyebrow);
    line-height: 1;
  }

  .site-nav a,
  .site-nav__link,
  .site-footer__links a {
    font-size: var(--type-nav);
  }

  .comics-mega__heading .eyebrow {
    color: var(--color-page);
    font-size: 32px;
    line-height: 1;
  }

  .comics-mega .comic-drop-card,
  .comics-mega .comic-drop-card:hover,
  .comics-mega .comic-drop-card:focus-visible,
  .comics-mega .comic-drop-card:focus-within,
  .comics-mega .comic-drop-card:active,
  .comics-mega .comic-drop-card span,
  .comics-mega .comic-drop-card:hover span,
  .comics-mega .comic-drop-card:focus-visible span,
  .comics-mega .comic-drop-card:focus-within span,
  .comics-mega .comic-drop-card:active span {
    color: var(--color-page);
  }

  .studio-read-more.cta-button::before,
  .tuc-banner .cta-button::before,
  .project-card__copy .cta-button::before {
    border-color: rgba(126, 200, 255, 0.22);
  }

  .studio-read-more.cta-button:hover,
  .studio-read-more.cta-button:focus-visible,
  .tuc-banner .cta-button:hover,
  .tuc-banner .cta-button:focus-visible,
  .project-card__copy .cta-button:hover,
  .project-card__copy .cta-button:focus-visible {
    border-color: rgba(126, 200, 255, 0.36);
    background: linear-gradient(135deg, var(--electric-blue), var(--ice-blue));
    color: #03060b;
    transform: skewX(-12deg) translateY(-2px);
    box-shadow: 0 1.2rem 3rem rgba(47, 140, 255, 0.2);
  }


  .site-footer__links a {
    color: #fff;
  }

  .site-footer__legal {
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
  }

  .contact-form textarea::placeholder {
    color: #fff;
    opacity: 1;
  }

  .contact-form select,
  .contact-form textarea::placeholder {
    font-size: 14px;
  }

  [data-contact-email] {
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 16px;
    line-height: 1.35;
  }

  .video-modal__panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1.15rem;
    inline-size: min(100%, 27rem);
    max-block-size: min(92vh, 52rem);
    padding: clamp(1.25rem, 3vw, 1.5rem);
    border: 1px solid rgba(126, 200, 255, 0.24);
    background: rgba(3, 6, 11, 0.96);
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.72);
  }

  .video-modal__close {
    inset-block-start: 1.25rem;
    inset-inline-end: 1.25rem;
    inline-size: 2.65rem;
    block-size: 2.65rem;
  }

  .video-modal__close:focus-visible {
    outline: 1px solid rgba(126, 200, 255, 0.42);
    outline-offset: 4px;
  }

  .video-modal__title {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    min-block-size: 2.8rem;
    padding-inline-end: 4.15rem;
    color: #fff;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 14px;
    line-height: 1.25;
    text-transform: none;
  }

  .video-modal__subtitle {
    color: #7ec8ff;
  }

  .video-modal__frame {
    aspect-ratio: 9 / 16;
    inline-size: min(100%, 24rem);
    max-block-size: min(78vh, 43rem);
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid rgba(126, 200, 255, 0.24);
    background: #000;
  }

  .video-modal__frame video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    background: #000;
  }

  .founder-card figcaption {
    position: absolute;
    inset-inline: 50% auto;
    inset-block-end: 0;
    z-index: 3;
    display: grid;
    gap: 0.25rem;
    inline-size: min(82%, 22rem);
    padding: 0.85rem 1rem;
    border: 1px solid #7ec8ff24;
    background: rgba(3, 6, 11, 0.78);
    color: #fff;
    text-align: center;
    transform: translateX(-50%);
    box-shadow: inset 0 1px 0 rgba(244, 247, 251, 0.08);
  }

  .founder-card figcaption strong {
    color: #fff;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: none;
  }

  .founder-card figcaption span {
    color: #7ec8ff;
    font-family: var(--nav-font, "Inter", sans-serif);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: none;
  }

  .studio-section__grid {
    grid-template-columns: minmax(0, 36rem) minmax(18rem, 32rem);
    gap: clamp(0.75rem, 1.6vw, 1.75rem);
    justify-content: center;
    max-inline-size: min(100%, 72rem);
    margin-inline: auto;
    padding-inline-start: clamp(2rem, 4vw, 5rem);
  }

  .studio-section__copy {
    align-self: center;
    justify-self: end;
    max-inline-size: 36rem;
    margin-block-end: -16rem;
  }

  .founder-card {
    justify-content: flex-start;
    margin-block-end: -6rem;
  }

  .founder-card img {
    inline-size: min(100%, 34rem);
  }

  .founder-card figcaption {
    inset-block-end: clamp(0.4rem, 1.6vw, 1.2rem);
    inline-size: auto;
    min-inline-size: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-shadow: 0 0.8rem 1.6rem rgba(0, 0, 0, 0.62);
  }

  .founder-card figcaption strong {
    display: block;
    white-space: nowrap;
    font-family: "Mr Dafoe", cursive;
    font-size: 2.25vw;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    line-height: 0.9;
    text-transform: none;
  }

  .founder-card figcaption span {
    margin-block-start: 0.25rem;
    color: #7ec8ff;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  main > .studio-section,
  main > .franchise-showcase.tuc-banner,
  main > .project-section,
  main > .partnership-section {
    margin-block: 0;
  }

  main > .hero + .studio-section,
  main > .studio-section + .franchise-showcase.tuc-banner,
  main > .franchise-showcase.tuc-banner + .project-section,
  main > .project-section + .partnership-section {
    margin-block-start: 60px;
  }

  #movies.project-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
      radial-gradient(circle at 74% 28%, rgba(47, 140, 255, 0.12), transparent 30rem),
      linear-gradient(180deg, #03060b, #07111f 50%, #03060b);
  }

  #movies.project-section::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("./assets/great-ones-bg-image.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    opacity: 0.38;
    filter: saturate(0.85) contrast(1.08);
  }

  #movies.project-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, transparent 30%, rgba(3, 6, 11, 0.72) 70%, #03060b 100%),
      linear-gradient(180deg, rgba(3, 6, 11, 0.48) 0%, transparent 30%, transparent 70%, #03060b 100%);
    pointer-events: none;
  }

  #movies .section-shell {
    position: relative;
    z-index: 1;
  }

  .great-ones-brand {
    display: grid;
    gap: 0.6rem;
    inline-size: min(100%, 38rem);
    margin-block-start: 0.5rem;
  }

  .project-card {
    grid-template-columns: minmax(22rem, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(2.5rem, 4.8vw, 5rem);
  }

  .project-card__copy {
    gap: 0.95rem;
    max-inline-size: 40rem;
  }

  .project-card__copy > .eyebrow {
    margin-block-end: 0;
  }

  .project-section .great-ones-lockup {
    inline-size: min(100%, 28rem);
    block-size: auto;
    filter:
      brightness(1.16)
      contrast(1.06)
      saturate(1.08)
      drop-shadow(0 0 1.85rem rgba(126, 200, 255, 0.14));
  }

  .great-ones-brand__divider {
    position: relative;
    inline-size: min(56rem, 61%);
    block-size: 1.5rem;
    overflow: visible;
    background:
      radial-gradient(ellipse 55% 100% at 50% 50%, rgba(47, 140, 255, 0.18), transparent),
      radial-gradient(ellipse 18% 70% at 50% 50%, rgba(126, 200, 255, 0.28), transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 72%, transparent 100%);
  }

  /* horizontal beam */
  .great-ones-brand__divider::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    block-size: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(47, 140, 255, 0.3) 18%,
      rgba(126, 200, 255, 0.85) 36%,
      #fff 50%,
      rgba(126, 200, 255, 0.85) 64%,
      rgba(47, 140, 255, 0.3) 82%,
      transparent 100%
    );
    transform: translateY(-50%);
  }

  /* center bright point */
  .great-ones-brand__divider::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: #fff;
    box-shadow:
      0 0 0.3rem 0.15rem rgba(255, 255, 255, 0.95),
      0 0 1rem 0.4rem rgba(180, 220, 255, 0.85),
      0 0 2.8rem 1rem rgba(47, 140, 255, 0.6),
      0 0 6rem 2.5rem rgba(47, 140, 255, 0.25);
    transform: translate(-50%, -50%);
  }

  .project-card__copy p.great-ones-brand__tagline {
    max-inline-size: 29rem;
    margin: 0;
    color: #fff;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .great-ones-brand__tagline-white {
    color: #fff;
  }

  .great-ones-brand__tagline-blue {
    color: #7ec8ff;
  }

  .project-card__media {
    position: relative;
    padding: 0.16rem;
    border: 1px solid rgba(126, 200, 255, 0.78);
    border-radius: 1.05rem;
    background:
      linear-gradient(135deg, rgba(126, 200, 255, 0.45), rgba(47, 140, 255, 0.08) 36%, rgba(126, 200, 255, 0.42));
    box-shadow:
      0 0 0 1px rgba(47, 140, 255, 0.22),
      0 0 2.1rem rgba(47, 140, 255, 0.32),
      0 2.2rem 5.5rem rgba(0, 0, 0, 0.72);
    overflow: hidden;
  }

  .project-card__media::before {
    inset: 0;
    z-index: 1;
    border: 0;
    border-radius: inherit;
    background:
      linear-gradient(180deg, rgba(126, 200, 255, 0.32), transparent 18%),
      linear-gradient(90deg, rgba(47, 140, 255, 0.55), transparent 12%, transparent 88%, rgba(47, 140, 255, 0.48));
    opacity: 0.65;
    pointer-events: none;
    transform: none;
  }

  .project-card__media::after {
    content: "";
    position: absolute;
    inset: 0.18rem;
    z-index: 1;
    border: 1px solid rgba(126, 200, 255, 0.2);
    border-radius: 0.85rem;
    box-shadow:
      inset 0 0 0.9rem rgba(126, 200, 255, 0.12),
      inset 0 -2rem 2.4rem rgba(3, 6, 11, 0.42);
    pointer-events: none;
  }

  .project-card__media video {
    display: block;
    inline-size: 100%;
    border-radius: 0.82rem;
    box-shadow: none;
  }

  .great-ones-characters {
    position: relative;
    display: grid;
    gap: clamp(1.4rem, 2.6vw, 2.4rem);
    margin-block-start: clamp(4rem, 7vw, 6rem);
    padding-block: clamp(1.25rem, 2.4vw, 2rem) 0;
    isolation: isolate;
  }

  .great-ones-characters__heading {
    display: grid;
    grid-template-columns: minmax(2rem, 1fr) auto minmax(2rem, 1fr);
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
  }

  .great-ones-characters__heading span {
    position: relative;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, rgba(126, 200, 255, 0.82));
    box-shadow: 0 0 1rem rgba(47, 140, 255, 0.52);
  }

  .great-ones-characters__heading span:last-child {
    background: linear-gradient(90deg, rgba(126, 200, 255, 0.82), transparent);
  }

  .great-ones-characters__heading h3 {
    margin: 0;
    color: #f4f7fb;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.52em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-shadow: none;
  }

  .great-ones-characters__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.55rem);
  }

  .great-ones-character-card {
    position: relative;
    display: block;
    min-block-size: clamp(18rem, 28vw, 26rem);
    overflow: hidden;
    border: 1px solid rgba(126, 200, 255, 0.42);
    border-radius: 0.45rem;
    background: #03060b;
    box-shadow:
      inset 0 0 0 1px rgba(47, 140, 255, 0.16),
      0 0 1.7rem rgba(47, 140, 255, 0.16),
      0 1.7rem 4rem rgba(0, 0, 0, 0.48);
  }

  .great-ones-character-card[data-character-modal-open] {
    inline-size: 100%;
    padding: 0;
    color: inherit;
    cursor: pointer;
    text-align: inherit;
    text-decoration: none;
    appearance: none;
  }

  .great-ones-character-card[data-character-modal-open]:hover,
  .great-ones-character-card[data-character-modal-open]:focus-visible {
    border-color: rgba(126, 200, 255, 0.82);
    box-shadow:
      inset 0 0 0 1px rgba(47, 140, 255, 0.28),
      0 0 2.1rem rgba(47, 140, 255, 0.34),
      0 1.7rem 4rem rgba(0, 0, 0, 0.48);
  }

  .great-ones-character-card[data-character-modal-open]:focus-visible {
    outline: 1px solid rgba(126, 200, 255, 0.72);
    outline-offset: 4px;
  }

  .great-ones-character-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, transparent 42%, rgba(3, 6, 11, 0.48) 66%, rgba(3, 6, 11, 0.94) 100%),
      linear-gradient(90deg, rgba(47, 140, 255, 0.16), transparent 24%, transparent 76%, rgba(47, 140, 255, 0.12));
    pointer-events: none;
  }

  .great-ones-character-card img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
  }

  .great-ones-character-card:nth-child(1) img {
    object-position: 52% 30%;
  }

  .great-ones-character-card:nth-child(2) img {
    object-position: 50% 28%;
  }

  .great-ones-character-card:nth-child(3) img {
    object-position: 48% 26%;
  }

  .great-ones-character-card:nth-child(4) img {
    object-position: center;
  }

  .great-ones-character-card__copy {
    position: absolute;
    inset-inline: 1rem 3.8rem;
    inset-block-end: 1rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .great-ones-character-card__copy h4 {
    margin: 0;
    color: #fff;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 0.2rem 0.9rem rgba(0, 0, 0, 0.65);
  }

  .great-ones-character-card__copy p {
    margin: 0;
    color: #f4f7fb;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: break-word;
    text-shadow: 0 0.2rem 0.9rem rgba(0, 0, 0, 0.72);
  }

  .great-ones-character-card__arrow {
    position: absolute;
    inset-inline-end: 0.85rem;
    inset-block-end: 0.85rem;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border: 1.5px solid rgba(47, 140, 255, 0.72);
    border-radius: 50%;
    background: rgba(3, 6, 11, 0.72);
    color: #7ec8ff;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 1.1rem;
    line-height: 1;
    box-shadow:
      0 0 1.2rem rgba(47, 140, 255, 0.28),
      inset 0 0 0.5rem rgba(47, 140, 255, 0.12);
    backdrop-filter: blur(4px);
  }

  .sdg-light-divider {
    position: relative;
    inline-size: min(100%, 62rem);
    block-size: 1.55rem;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 999px;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(126, 200, 255, 0.95) 0 2%, rgba(47, 140, 255, 0.72) 4%, rgba(47, 140, 255, 0.3) 12%, transparent 34%),
      linear-gradient(180deg, transparent 0%, rgba(47, 140, 255, 0.08) 38%, rgba(126, 200, 255, 0.18) 50%, rgba(47, 140, 255, 0.08) 62%, transparent 100%),
      linear-gradient(90deg, transparent 0%, rgba(47, 140, 255, 0.14) 18%, rgba(126, 200, 255, 0.95) 50%, rgba(47, 140, 255, 0.14) 82%, transparent 100%);
    filter:
      drop-shadow(0 0 0.45rem rgba(126, 200, 255, 0.72))
      drop-shadow(0 0 1.7rem rgba(47, 140, 255, 0.55));
  }

  .sdg-light-divider::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    block-size: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(47, 140, 255, 0.38) 20%, #7ec8ff 50%, rgba(47, 140, 255, 0.38) 80%, transparent 100%);
    box-shadow:
      0 0 0.55rem rgba(126, 200, 255, 0.9),
      0 0 1.2rem rgba(47, 140, 255, 0.62);
    transform: translateY(-50%);
  }

  .sdg-light-divider::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: min(7.2rem, 24%);
    block-size: 0.32rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(126, 200, 255, 0.32), #7ec8ff, rgba(126, 200, 255, 0.32));
    box-shadow:
      0 0 0.35rem rgba(244, 247, 251, 0.95),
      0 0 1rem rgba(126, 200, 255, 0.9),
      0 0 2.6rem rgba(47, 140, 255, 0.72);
    transform: translate(-50%, -50%);
  }

  .great-ones-characters__divider {
    margin-block-start: clamp(0.8rem, 2.2vw, 1.6rem);
  }

  .great-ones-characters__quote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0;
    padding-block-start: 0.1rem;
    color: #f4f7fb;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: clamp(1.35rem, 2.4vw, 2.05rem);
    font-style: italic;
    line-height: 1.25;
    text-align: center;
    text-shadow: 0 0 1.2rem rgba(126, 200, 255, 0.24);
  }

  .great-ones-characters__quote::before,
  .great-ones-characters__quote::after {
    content: "";
    flex: 1 1 4rem;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, rgba(126, 200, 255, 0.82));
    box-shadow: 0 0 0.75rem rgba(47, 140, 255, 0.55);
  }

  .great-ones-characters__quote::after {
    background: linear-gradient(90deg, rgba(126, 200, 255, 0.82), transparent);
  }

  .great-ones-characters__quote span {
    color: #2f8cff;
    font-size: 1.4em;
    font-weight: 800;
    line-height: 0;
    text-shadow: 0 0 1rem rgba(47, 140, 255, 0.7);
  }

  .great-ones-characters__sigil {
    justify-self: center;
    inline-size: 1.4rem;
    block-size: 1.4rem;
    margin-block-start: -0.55rem;
    border: 1px solid rgba(126, 200, 255, 0.8);
    background: radial-gradient(circle, #7ec8ff 0 18%, rgba(47, 140, 255, 0.46) 19% 44%, transparent 45%);
    box-shadow:
      0 0 1rem rgba(47, 140, 255, 0.72),
      0 0 0 0.45rem rgba(47, 140, 255, 0.08);
    transform: rotate(45deg);
  }

  .character-modal .mission-modal__backdrop {
    border: 0;
    cursor: pointer;
  }

  /* guarantee character modal sits above the fixed nav */
  .character-modal {
    z-index: 1000;
  }

  /* character modal — wider than text modals to fit character art */
  .character-modal__panel {
    inline-size: min(100%, 56rem);
    max-block-size: min(88vh, 56rem);
  }

  .character-modal .mission-modal__copy p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-muted, #aab6c5);
  }

  .character-modal__image {
    display: block;
    inline-size: 100%;
    margin-block-start: 1.25rem;
    object-fit: contain;
    border: 1px solid rgba(126, 200, 255, 0.18);
    background: #03060b;
  }

  .tuc-banner.franchise-showcase {
    min-block-size: clamp(42rem, 82vh, 56rem);
    padding: clamp(5.5rem, 8vw, 8rem) var(--gutter);
    border-block: 1px solid rgba(126, 200, 255, 0.36);
    background: #03060b;
    box-shadow:
      inset 0 1px 0 rgba(244, 247, 251, 0.08),
      inset 0 -1px 0 rgba(244, 247, 251, 0.06);
  }

  .tuc-banner.franchise-showcase::before {
    display: block;
    z-index: -1;
    background: linear-gradient(90deg, rgba(3, 6, 11, 0.92) 0%, rgba(3, 6, 11, 0.78) 28%, rgba(3, 6, 11, 0.28) 48%, transparent 66%);
  }

  .tuc-banner.franchise-showcase::after {
    display: none;
  }

  .tuc-banner__stage {
    background: #03060b;
  }

  .tuc-banner__background {
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: cover;
    object-position: 67% center;
    opacity: 1;
    filter: none;
  }

  .tuc-banner__poster,
  .tuc-banner__logo {
    display: none;
  }

  .tuc-banner__content {
    max-inline-size: min(37rem, 45vw);
    margin-inline-start: max(0rem, calc((100vw - var(--shell)) / 2));
    padding-block: clamp(1rem, 3vw, 2rem);
  }

  .tuc-banner__content h2 {
    margin-block: 0.75rem 0.95rem;
  }

  .tuc-banner__content-logo {
    inline-size: min(25rem, 100%);
    block-size: auto;
    margin-block: 0 1.1rem;
    filter: none;
  }

  .tuc-banner__content p:not(.eyebrow) {
    max-inline-size: 33rem;
    padding-top: 20px;
  }

  @media (max-width: 63.99rem) {
    .project-card {
      grid-template-columns: 1fr;
    }

    .great-ones-brand {
      inline-size: min(100%, 34rem);
    }

    .great-ones-characters__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .great-ones-characters__heading h3 {
      letter-spacing: 0.32em;
    }

    .tuc-banner.franchise-showcase {
      min-block-size: auto;
      padding-block: clamp(18rem, 62vw, 24rem) 4.5rem;
    }

    .tuc-banner__background {
      block-size: 100%;
      object-position: 42% center;
      opacity: 1;
      -webkit-mask-image: none;
      mask-image: none;
    }

    .tuc-banner__content {
      max-inline-size: 100%;
      margin-inline-start: 0;
    }

    .tuc-banner__content-logo {
      inline-size: min(22rem, 92vw);
    }
  }

  @media (max-width: 38rem) {
    .great-ones-characters__heading {
      grid-template-columns: 1fr;
    }

    .great-ones-characters__heading span {
      display: none;
    }

    .great-ones-characters__grid {
      grid-template-columns: 1fr;
    }

    .great-ones-character-card {
      min-block-size: 24rem;
    }

    .great-ones-characters__quote {
      display: block;
      font-size: 1.35rem;
    }

    .great-ones-characters__quote::before,
    .great-ones-characters__quote::after {
      display: none;
    }
  }

  .form-submit {
    font-size: 1rem;
  }

  /* character modal description line */
  /* footer social — blue border, no gold, single border on hover */
  .site-footer__social {
    border-color: rgba(126, 200, 255, 0.28);
  }

  .site-footer__social:hover,
  .site-footer__social:focus-visible {
    color: #fff;
    border-color: rgba(126, 200, 255, 0.78);
    background: rgba(47, 140, 255, 0.18);
    box-shadow: 0 0 1.5rem rgba(126, 200, 255, 0.2);
    outline: none;
  }

  /* featured movie logo */
  .project-section .great-ones-lockup {
    inline-size: 460px;
    block-size: 90px;
  }

  /* featured movie section divider — wider than tuc divider */
  .featured-movie__divider {
    inline-size: min(56rem, 91%);
  }

  /* tagline spacing */
  .project-card__copy p.great-ones-brand__tagline {
    padding-top: 16px;
  }

  /* ─── HAMBURGER ICON TOGGLE ─────────────────────────────────── */
  .site-header__toggle {
    display: none; /* hidden on desktop by default */
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0;
  }

  .site-header__hamburger,
  .site-header__close-icon {
    inline-size: 1.35rem;
    block-size: 1.35rem;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
    flex-shrink: 0;
  }

  /* Show hamburger lines by default, hide X */
  .site-header__hamburger { display: block; }
  .site-header__close-icon { display: none; }

  /* When nav is open swap to X icon */
  body[data-nav-open="true"] .site-header__hamburger { display: none; }
  body[data-nav-open="true"] .site-header__close-icon { display: block; }

  /* ─── TABLET (48rem – 63.99rem): show nav links inline ───────── */
  @media (min-width: 48rem) and (max-width: 63.99rem) {
    .site-header__bar {
      grid-template-columns: auto 1fr;
      gap: 0.5rem;
    }

    .site-header__toggle {
      display: none !important;
    }

    .site-nav {
      position: static !important;
      display: flex !important;
      flex-wrap: nowrap;
      opacity: 1 !important;
      visibility: visible !important;
      transform: none !important;
      background: none !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      gap: 0;
      justify-content: center;
    }

    .site-nav a,
    .site-nav__link {
      display: inline-flex !important;
      inline-size: auto !important;
      padding: 0.4rem 0.55rem !important;
      font-size: 11px !important;
      white-space: nowrap;
    }

    .mobile-comics {
      display: none !important;
    }

    /* ── Studio / Founder: restore two-column layout at tablet ── */
    .studio-section__grid {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(1.5rem, 3vw, 2.5rem);
      align-items: start;
    }

    /* Override the explicit align-self:center that causes the copy to
       not contribute its full height to grid track sizing */
    .studio-section__copy {
      align-self: start !important;
    }

    .studio-section__copy h2 {
      font-size: clamp(2.6rem, 6.5vw, 4.5rem) !important;
      line-height: 0.9;
    }

    .studio-section__copy p:not(.eyebrow) {
      font-size: clamp(0.88rem, 1.6vw, 1rem) !important;
    }

    /* Use aspect-ratio for a definite block size so the card doesn't
       collapse to 0 via the block-size:100% circular reference */
    .founder-card {
      min-block-size: 0;
      aspect-ratio: 4 / 5;
    }
  }

  /* ─── PHONE (< 48rem): hamburger + dropdown ─────────────────── */
  @media (max-width: 47.99rem) {
    /* Show the toggle button */
    .site-header__toggle {
      display: inline-flex;
    }

    /* Hero: less overwhelming on small screens */
    .hero {
      min-block-size: 62svh;
      min-block-size: 62vh;
    }

    /* Studio section: proper vertical stacking, no overflow */
    .studio-section {
      padding-block: 5rem 2rem;
      overflow: hidden;
    }

    .studio-section__grid {
      display: flex !important;
      flex-direction: column;
      gap: 2rem;
    }

    .studio-section__copy {
      order: 1;
    }

    .studio-section__copy h2 {
      font-size: clamp(2.4rem, 10vw, 3rem) !important;
      line-height: 1.05 !important;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    .studio-section__copy p:not(.eyebrow) {
      font-size: 1rem !important;
    }

    .founder-card {
      order: 2;
      min-block-size: 0;
      aspect-ratio: 4 / 5;
    }

    /* TV Series (tuc-banner): shift image right to show family,
       keep original absolute stacking — just adjust position + overlay */
    .tuc-banner.franchise-showcase {
      min-block-size: 70svh;
      min-block-size: 70vh;
      padding-block: 3.5rem 3rem;
    }

    .tuc-banner__background {
      object-position: 65% center;
    }

    /* Lighter overlay in the middle so image reads through;
       strong dark at the very bottom behind the copy */
    .tuc-banner.franchise-showcase::before {
      background:
        linear-gradient(180deg,
          rgba(3, 6, 11, 0.62) 0%,
          rgba(3, 6, 11, 0.08) 28%,
          rgba(3, 6, 11, 0.08) 52%,
          rgba(3, 6, 11, 0.92) 82%,
          rgba(3, 6, 11, 1.00) 100%
        ),
        linear-gradient(90deg,
          rgba(3, 6, 11, 0.55) 0%,
          rgba(3, 6, 11, 0.18) 52%,
          transparent 100%
        );
    }

    .tuc-banner__content {
      max-inline-size: 100%;
      margin-inline-start: 0;
    }

    .tuc-banner__content-logo {
      inline-size: min(18rem, 80vw);
    }

    /* Lockup: scale down on phone */
    .project-section .great-ones-lockup {
      inline-size: min(340px, 88vw);
      block-size: auto;
    }

    /* Contact / form */
    .form-submit {
      inline-size: 100%;
    }
  }

  /* ─── Latest Projects Section ──────────────────────────────────── */
  .latest-projects-section {
    padding-block: 0 var(--space-section, clamp(7.5rem, 12vw, 12rem));
    background: #03060b;
  }

  main > .project-section + .latest-projects-section {
    margin-block-start: 60px;
  }

  .latest-projects__header {
    margin-block-end: 3rem;
  }

  .latest-projects__header .eyebrow {
    color: #aab6c5;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-block-end: 0.6rem;
  }

  .latest-projects__header h2 {
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    line-height: 1;
  }

  .latest-projects__title-accent {
    background: linear-gradient(135deg, #2f8cff, #7ec8ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .latest-projects__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .latest-projects__item {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    align-items: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(126,200,255,0.1);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    transition: border-color 0.2s ease, background 0.2s ease;
  }

  .latest-projects__item:hover {
    border-color: rgba(126,200,255,0.28);
    background: rgba(255,255,255,0.05);
  }

  .latest-projects__thumb {
    inline-size: 100%;
    block-size: 130px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    border: 1px solid rgba(126,200,255,0.12);
  }

  .latest-projects__copy {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .latest-projects__title {
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    line-height: 1.1;
  }

  .latest-projects__meta {
    font-size: 0.875rem;
    color: var(--color-muted, #aab6c5);
    letter-spacing: 0.04em;
    margin: 0;
  }

  .latest-projects__status {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.2rem 0.65rem;
    border-radius: 99px;
    border: 1px solid rgba(126,200,255,0.35);
    color: #7ec8ff;
    background: rgba(126,200,255,0.07);
    align-self: flex-start;

  /* Active state overrides */
  }
  .latest-projects__status--active {
    border-color: rgba(74,222,128,0.4);
    color: #4ade80;
    background: rgba(74,222,128,0.08);
  }

  @media (max-width: 47.99rem) {
    .latest-projects__item {
      grid-template-columns: 1fr;
    }

    .latest-projects__thumb {
      block-size: auto;
      aspect-ratio: 16 / 9;
    }
  }

  /* ── Mission modal: rich content styles ── */
  .mission-modal__copy h3 {
    margin: 0.5rem 0 0;
    color: var(--gold, #d59b32);
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .mission-modal__copy ul {
    margin: 0;
    padding-inline-start: 1.15rem;
    display: grid;
    gap: 0.35rem;
  }

  .mission-modal__copy li {
    color: #fff;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.55;
    opacity: 0.88;
  }

  .mission-modal__philosophy {
    margin-block-start: 0.5rem;
    color: var(--gold, #d59b32) !important;
    font-style: italic;
    font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
    opacity: 0.9;
  }

  /* ── Contact form: reduced input/textarea heights ── */
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    min-block-size: 0 !important;
    padding: 0.6rem 0.85rem !important;
  }

  .contact-form textarea {
    min-block-size: 6rem !important;
  }

  /* ── Movies section: trim bottom padding now that characters section is hidden ── */
  #movies.project-section {
    padding-block-end: clamp(4rem, 6vw, 6rem);
  }

  /* ── Contact section: philosophy tagline ── */
  .portal__philosophy {
    margin: 0.75rem 0 0;
    color: var(--soft, rgba(245, 240, 232, 0.55));
    font-size: 0.8rem;
    line-height: 1.6;
    font-style: italic;
    max-inline-size: 30rem;
  }


}