:root {
  --bg: #000;
  --panel: #0f0f0f;
  --line: rgba(255, 255, 255, 0.18);
  --text: #fff;
  --muted: rgba(255, 255, 255, 0.72);
  --cream: #f1e2c9;
  --rust: #a54119;
  --project-mobile-pad: 30px;
  --mono: "Roboto Mono", "SFMono-Regular", Consolas, monospace;
  --sans: "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (max-width: 767px) {
  body.newgen-page .ng-gameplay-title,
  body.newgen-page .ng-gameplay-intro,
  body.newgen-page .ng-gameplay-switcher {
    display: none !important;
  }

  body.playground-page .site-logo,
  body.water-figma-page .site-logo,
  body.newgen-page .site-logo,
  body.click-page .site-logo,
  body.wake-page .site-logo,
  body.home-page .site-logo,
  body.playground-page .site-logo:hover,
  body.playground-page .site-logo:focus-visible,
  body.playground-page .site-logo:active,
  body.water-figma-page .site-logo:hover,
  body.water-figma-page .site-logo:focus-visible,
  body.water-figma-page .site-logo:active,
  body.newgen-page .site-logo:hover,
  body.newgen-page .site-logo:focus-visible,
  body.newgen-page .site-logo:active,
  body.click-page .site-logo:hover,
  body.click-page .site-logo:focus-visible,
  body.click-page .site-logo:active,
  body.wake-page .site-logo:hover,
  body.wake-page .site-logo:focus-visible,
  body.wake-page .site-logo:active,
  body.home-page .site-logo:hover,
  body.home-page .site-logo:focus-visible,
  body.home-page .site-logo:active {
    clip-path: inset(0 calc(100% - 6.05em) 0 0);
    transition: none;
  }

  body.playground-page .site-logo .site-logo-track,
  body.water-figma-page .site-logo .site-logo-track,
  body.newgen-page .site-logo .site-logo-track,
  body.click-page .site-logo .site-logo-track,
  body.wake-page .site-logo .site-logo-track,
  body.home-page .site-logo .site-logo-track,
  body.playground-page .site-logo:hover .site-logo-track,
  body.playground-page .site-logo:focus-visible .site-logo-track,
  body.playground-page .site-logo:active .site-logo-track,
  body.water-figma-page .site-logo:hover .site-logo-track,
  body.water-figma-page .site-logo:focus-visible .site-logo-track,
  body.water-figma-page .site-logo:active .site-logo-track,
  body.newgen-page .site-logo:hover .site-logo-track,
  body.newgen-page .site-logo:focus-visible .site-logo-track,
  body.newgen-page .site-logo:active .site-logo-track,
  body.click-page .site-logo:hover .site-logo-track,
  body.click-page .site-logo:focus-visible .site-logo-track,
  body.click-page .site-logo:active .site-logo-track,
  body.wake-page .site-logo:hover .site-logo-track,
  body.wake-page .site-logo:focus-visible .site-logo-track,
  body.wake-page .site-logo:active .site-logo-track,
  body.home-page .site-logo:hover .site-logo-track,
  body.home-page .site-logo:focus-visible .site-logo-track,
  body.home-page .site-logo:active .site-logo-track {
    transform: none;
    transition: none;
  }

  body.click-page .figma-label {
    padding-top: 25px !important;
  }

  body.water-figma-page .water-spread-carousel > .water-w2-left {
    display: none;
  }
}

@media (max-width: 767px) {
  body.playground-page .site-logo,
  body.water-figma-page .site-logo,
  body.newgen-page .site-logo,
  body.click-page .site-logo,
  body.wake-page .site-logo,
  body.home-page .site-logo,
  body.playground-page .site-logo:hover,
  body.playground-page .site-logo:focus-visible,
  body.playground-page .site-logo:active,
  body.water-figma-page .site-logo:hover,
  body.water-figma-page .site-logo:focus-visible,
  body.water-figma-page .site-logo:active,
  body.newgen-page .site-logo:hover,
  body.newgen-page .site-logo:focus-visible,
  body.newgen-page .site-logo:active,
  body.click-page .site-logo:hover,
  body.click-page .site-logo:focus-visible,
  body.click-page .site-logo:active,
  body.wake-page .site-logo:hover,
  body.wake-page .site-logo:focus-visible,
  body.wake-page .site-logo:active,
  body.home-page .site-logo:hover,
  body.home-page .site-logo:focus-visible,
  body.home-page .site-logo:active {
    clip-path: inset(0 calc(100% - 6.05em) 0 0) !important;
    transition: none !important;
  }

  body.playground-page .site-logo .site-logo-track,
  body.water-figma-page .site-logo .site-logo-track,
  body.newgen-page .site-logo .site-logo-track,
  body.click-page .site-logo .site-logo-track,
  body.wake-page .site-logo .site-logo-track,
  body.home-page .site-logo .site-logo-track,
  body.playground-page .site-logo:hover .site-logo-track,
  body.playground-page .site-logo:focus-visible .site-logo-track,
  body.playground-page .site-logo:active .site-logo-track,
  body.water-figma-page .site-logo:hover .site-logo-track,
  body.water-figma-page .site-logo:focus-visible .site-logo-track,
  body.water-figma-page .site-logo:active .site-logo-track,
  body.newgen-page .site-logo:hover .site-logo-track,
  body.newgen-page .site-logo:focus-visible .site-logo-track,
  body.newgen-page .site-logo:active .site-logo-track,
  body.click-page .site-logo:hover .site-logo-track,
  body.click-page .site-logo:focus-visible .site-logo-track,
  body.click-page .site-logo:active .site-logo-track,
  body.wake-page .site-logo:hover .site-logo-track,
  body.wake-page .site-logo:focus-visible .site-logo-track,
  body.wake-page .site-logo:active .site-logo-track,
  body.home-page .site-logo:hover .site-logo-track,
  body.home-page .site-logo:focus-visible .site-logo-track,
  body.home-page .site-logo:active .site-logo-track {
    transform: none !important;
    transition: none !important;
  }

  body.click-page .figma-label {
    padding-top: 25px !important;
  }

  body.water-figma-page .water-spread-carousel > .water-w2-left {
    display: none !important;
  }
}

@media (max-width: 767px) {
  body.newgen-page .ng-gameplay-title {
    display: block !important;
    order: 10;
    width: var(--newgen-mobile-inner) !important;
    max-width: var(--newgen-mobile-inner) !important;
    margin-top: 72px !important;
    margin-bottom: 14px !important;
    font-size: clamp(30px, 8vw, 42px) !important;
    line-height: 0.98 !important;
  }

  body.newgen-page .ng-gameplay-intro {
    display: block !important;
    order: 10;
    width: var(--newgen-mobile-inner) !important;
    max-width: var(--newgen-mobile-inner) !important;
    margin-top: 0 !important;
    margin-bottom: 26px !important;
    font-size: 13px !important;
    line-height: 18px !important;
    text-align: left !important;
  }

  body.newgen-page .ng-mobile-gameplay-roles {
    display: grid;
    order: 10;
    width: min(100%, calc(100dvw - 80px)) !important;
    max-width: min(100%, calc(100dvw - 80px)) !important;
    gap: 26px;
    margin: 0;
  }

  body.newgen-page .ng-mobile-gameplay-role h3,
  body.newgen-page .ng-mobile-gameplay-role p {
    box-sizing: border-box;
    width: min(100%, calc(100dvw - 80px)) !important;
    max-width: min(100%, calc(100dvw - 80px)) !important;
    inline-size: min(100%, calc(100dvw - 80px)) !important;
    max-inline-size: min(100%, calc(100dvw - 80px)) !important;
    margin: 0;
    color: #fff;
    text-align: left;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  body.newgen-page .ng-mobile-gameplay-role h3 {
    font-family: "Roboto Mono", var(--mono);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
  }

  body.newgen-page .ng-mobile-gameplay-role p {
    margin-top: 8px;
    font-family: var(--newgen-sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
  }

  body.newgen-page .ng-mobile-gameplay-role p span {
    display: block;
  }

  body.newgen-page .ng-gameplay-switcher {
    display: none !important;
  }
}

@media (max-width: 767px) {
  body.newgen-page {
    --newgen-mobile-pad: var(--project-mobile-pad);
    --newgen-mobile-inner: calc(100dvw - (var(--project-mobile-pad) * 2));
    min-height: auto;
    overflow-x: hidden;
  }

  body.newgen-page .newgen-stage,
  body.newgen-page .newgen-artboard {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body.newgen-page .newgen-artboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0 var(--project-mobile-pad) 88px;
  }

  body.newgen-page .newgen-artboard > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  body.newgen-page .newgen-artboard p:not(.ng-meta),
  body.newgen-page .newgen-artboard h2,
  body.newgen-page .ng-question,
  body.newgen-page .ng-gameplay-switcher {
    width: var(--newgen-mobile-inner) !important;
    max-width: var(--newgen-mobile-inner) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-self: start;
  }

  body.newgen-page .newgen-artboard > .ng-meta {
    display: none;
  }

  body.newgen-page .ng-hero-bg {
    order: 1;
    width: 100dvw !important;
    max-width: none !important;
    height: 411px !important;
    margin: 0 calc(var(--project-mobile-pad) * -1) 0 !important;
    aspect-ratio: auto;
    background-position: center top;
    background-size: cover;
  }

  body.newgen-page .newgen-artboard > .ng-mobile-hero-meta {
    position: absolute !important;
    z-index: 3;
    top: 48px !important;
    left: 0 !important;
    right: auto !important;
    display: block;
    width: 100dvw !important;
    height: 330px;
    pointer-events: none;
    transform: none !important;
  }

  body.newgen-page .ng-mobile-hero-meta span {
    position: absolute;
    display: block;
    color: #fff;
    font-family: "Roboto Mono", var(--mono);
    font-size: 7px;
    font-weight: 400;
    line-height: 12px;
    letter-spacing: 0;
  }

  body.newgen-page .ng-mobile-meta-type {
    top: 0 !important;
    left: var(--project-mobile-pad) !important;
    width: 118px;
    text-align: left;
  }

  body.newgen-page .ng-mobile-meta-year {
    top: 0 !important;
    left: 50% !important;
    width: auto;
    transform: translateX(-50%) !important;
    text-align: center;
  }

  body.newgen-page .ng-mobile-meta-descriptor {
    top: 0 !important;
    right: var(--project-mobile-pad) !important;
    left: auto !important;
    width: min(150px, 38vw);
    max-width: min(150px, 38vw);
    text-align: right;
    white-space: normal;
  }

  body.newgen-page .ng-mobile-meta-ai {
    top: 294px !important;
    right: var(--project-mobile-pad) !important;
    left: auto !important;
    width: min(150px, 38vw);
    max-width: min(150px, 38vw);
    text-align: right;
    white-space: normal;
  }

  body.newgen-page .newgen-artboard > .ng-title {
    position: absolute !important;
    z-index: 3;
    top: 145px !important;
    left: var(--project-mobile-pad) !important;
    width: var(--newgen-mobile-inner) !important;
    margin: 0 !important;
    font-size: clamp(48px, 14vw, 60px);
    line-height: 0.94;
    white-space: nowrap;
    transform: none !important;
  }

  body.newgen-page .ng-lead {
    order: 2;
    margin-top: 26px !important;
    margin-bottom: 74px !important;
    font-size: 13px !important;
    line-height: 18px !important;
    text-align: left !important;
  }

  body.newgen-page .ng-lead-closer {
    display: block;
    margin-top: 22px;
    font-weight: 700;
  }

  body.newgen-page .ng-copy,
  body.newgen-page .ng-lore-copy,
  body.newgen-page .ng-character-copy {
    font-size: 13px !important;
    line-height: 18px !important;
    text-align: left !important;
    text-wrap: auto;
  }

  body.newgen-page .ng-small-heading,
  body.newgen-page .ng-subheading,
  body.newgen-page .ng-caption,
  body.newgen-page .ng-label-faded,
  body.newgen-page .ng-mini-heading {
    font-family: "Roboto Mono", var(--mono) !important;
    font-size: 11px !important;
    line-height: 18px !important;
    letter-spacing: 0;
  }

  body.newgen-page .ng-small-heading,
  body.newgen-page .ng-subheading {
    margin-top: 56px !important;
    margin-bottom: 12px !important;
  }

  body.newgen-page .ng-about-heading {
    margin-top: 0 !important;
  }

  body.newgen-page .ng-about-copy {
    margin-top: 0 !important;
    padding: 0 !important;
  }

  body.newgen-page .ng-copy + .ng-copy {
    margin-top: 18px !important;
  }

  body.newgen-page .ng-section-title {
    margin-top: 96px !important;
    margin-bottom: 22px !important;
    font-size: clamp(30px, 8vw, 42px) !important;
    line-height: 0.98 !important;
    white-space: normal !important;
  }

  body.newgen-page .ng-question {
    margin-top: 72px !important;
    margin-bottom: 72px !important;
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.14 !important;
    overflow-wrap: normal !important;
  }

  body.newgen-page .ng-mobile-tag-row {
    width: var(--newgen-mobile-inner) !important;
    max-width: var(--newgen-mobile-inner) !important;
    gap: 6px;
    margin: 28px 0 27px !important;
    padding: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.newgen-page .ng-mobile-tag-row::-webkit-scrollbar {
    display: none;
  }

  body.newgen-page .ng-mobile-tag-row span {
    height: 18px;
    padding: 1px 8px 0;
    font-size: 10px;
    line-height: 14px;
  }

  body.newgen-page .ng-gameplay-switcher {
    margin-top: 20px !important;
    margin-bottom: 82px !important;
  }

  body.newgen-page .ng-gameplay-tabs {
    height: 56px;
  }

  body.newgen-page .ng-gameplay-card {
    height: 458px;
  }

  body.newgen-page .ng-gameplay-panel {
    padding: 24px 22px;
  }

  body.newgen-page .ng-gameplay-summary,
  body.newgen-page .ng-gameplay-card .ng-mini-copy,
  body.newgen-page .ng-gameplay-row .ng-mini-copy,
  body.newgen-page .ng-gameplay-panel.is-beta .ng-mini-copy {
    font-size: 13px !important;
    line-height: 18px !important;
  }

  body.newgen-page .ng-media:not(.ng-hero-bg):not(.ng-gameplay-gun):not(.ng-about-icons) {
    width: var(--newgen-mobile-inner) !important;
    max-width: var(--newgen-mobile-inner) !important;
    margin-top: 24px;
  }

  body.newgen-page .ng-giltex-wide,
  body.newgen-page .ng-xargard-wide {
    width: 100dvw !important;
    max-width: none !important;
    margin-right: calc(var(--project-mobile-pad) * -1) !important;
    margin-left: calc(var(--project-mobile-pad) * -1) !important;
  }

  body.newgen-page .ng-world-carousel,
  body.newgen-page .ng-prototype-carousel,
  body.newgen-page .ng-strategy-carousel {
    display: flex;
    width: 100dvw;
    min-width: 0;
    gap: 16px;
    margin: 8px calc(var(--project-mobile-pad) * -1) 72px;
    padding: 0 var(--project-mobile-pad) 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: var(--project-mobile-pad);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.newgen-page .ng-world-carousel::-webkit-scrollbar,
  body.newgen-page .ng-prototype-carousel::-webkit-scrollbar,
  body.newgen-page .ng-strategy-carousel::-webkit-scrollbar {
    display: none;
  }

  body.newgen-page .ng-world-carousel > .ng-media,
  body.newgen-page .ng-prototype-carousel > .ng-media {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: 0 0 calc(var(--newgen-mobile-inner) + var(--project-mobile-pad));
    width: calc(var(--newgen-mobile-inner) + var(--project-mobile-pad)) !important;
    max-width: calc(var(--newgen-mobile-inner) + var(--project-mobile-pad)) !important;
    margin: 0 !important;
    aspect-ratio: 16 / 9;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.newgen-page .ng-prototype-carousel > .ng-prototype-hero,
  body.newgen-page .ng-prototype-carousel > .ng-prototype-wide-1,
  body.newgen-page .ng-prototype-carousel > .ng-prototype-wide-2,
  body.newgen-page .ng-prototype-carousel > .ng-prototype-wide-3 {
    width: var(--newgen-mobile-inner) !important;
    max-width: var(--newgen-mobile-inner) !important;
    margin: 0 !important;
  }

  body.newgen-page .ng-strategy-slide {
    position: relative !important;
    display: block;
    flex: 0 0 var(--newgen-mobile-inner);
    width: var(--newgen-mobile-inner);
    max-width: var(--newgen-mobile-inner);
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.newgen-page .ng-strategy-slide .ng-caption {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    white-space: nowrap;
  }

  body.newgen-page .ng-strategy-slide .ng-media {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    aspect-ratio: 530 / 245;
    scroll-snap-align: start;
    background-size: contain;
  }

  body.newgen-page .ng-final-bot {
    width: min(72vw, 312px) !important;
    max-width: min(72vw, 312px) !important;
    margin-top: 8px !important;
    justify-self: center;
  }
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Goldman";
  src: url("assets/fonts/goldman-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Goldman";
  src: url("assets/fonts/goldman-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Moon Dance";
  src: url("assets/fonts/moon-dance-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("assets/fonts/roboto-mono-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("assets/fonts/roboto-mono-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
}

.home-page {
  overscroll-behavior-y: auto;
}

.home-page main {
  background: #050505;
}

body.click-page {
  background:
    radial-gradient(circle at 0 12rem, rgba(241, 226, 201, 0.12), transparent 14rem),
    radial-gradient(circle at 100% 23rem, rgba(165, 65, 25, 0.16), transparent 18rem),
    var(--bg);
}

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

.crop {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--panel);
}

.crop > img {
  position: absolute;
  max-width: none;
  object-fit: fill;
}

p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.92rem, 0.86rem + 0.2vw, 1rem);
  line-height: 1.42;
}

a {
  color: inherit;
}

.site-logo {
  position: absolute !important;
  z-index: 1000;
  top: clamp(22px, 2.8vw, 58px);
  left: 2.73vw;
  display: block;
  width: 12.7em;
  height: 1.35em;
  overflow: hidden;
  color: #fff;
  font-family: "Roboto Mono", var(--mono);
  font-size: clamp(0.62rem, 0.66vw, 1.5rem);
  font-weight: 400;
  line-height: 1.33;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  isolation: isolate;
  clip-path: inset(0 calc(100% - 6.05em) 0 0);
  transition: clip-path 680ms cubic-bezier(0.16, 1, 0.3, 1);
  backface-visibility: hidden;
}

.site-logo-track {
  display: inline-flex;
  gap: 0.48em;
  transform: translate3d(0, 0, 0);
  transition: transform 680ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.site-logo:hover .site-logo-track,
.site-logo:focus-visible .site-logo-track {
  transform: translate3d(-1.68em, 0, 0);
}

.site-logo:hover,
.site-logo:focus-visible {
  clip-path: inset(0);
}

.site-logo:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 6px;
}

.water-figma-page .site-logo {
  color: #000;
}

.portfolio-nav {
  position: fixed;
  z-index: 20;
  top: 18px;
  left: 50%;
  display: flex;
  width: min(1135px, calc(100% - 28px));
  justify-content: space-between;
  gap: 24px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.portfolio-nav a {
  text-decoration: none;
}

.portfolio-nav nav {
  display: flex;
  gap: 18px;
}

.portfolio-nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.click-nav {
  color: rgba(255, 255, 255, 0.86);
}

.site-shell {
  margin-top: 58px;
}

.home-page {
  --home-bg: #f3f0ea;
  --home-ink: #111;
  --home-muted: rgba(17, 17, 17, 0.62);
  --home-line: rgba(17, 17, 17, 0.16);
  --hero-x: 50%;
  --hero-y: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--home-ink);
  background:
    radial-gradient(circle at 16% 18%, rgba(174, 205, 155, 0.42), transparent 18rem),
    radial-gradient(circle at 86% 8%, rgba(255, 102, 38, 0.18), transparent 22rem),
    linear-gradient(180deg, #f8f6f0 0%, var(--home-bg) 52%, #e9e3d8 100%);
}

.home-page::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(rgba(17, 17, 17, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 86%);
}

.home-page::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: 0.26;
  background:
    radial-gradient(circle at var(--hero-x) var(--hero-y), rgba(255, 255, 255, 0.82), transparent 13rem),
    linear-gradient(110deg, transparent 0 42%, rgba(17, 17, 17, 0.04) 42% 43%, transparent 43% 100%);
}

.home-page .portfolio-nav {
  color: rgba(17, 17, 17, 0.86);
}

.home-page p {
  color: var(--home-muted);
}

.home-page main {
  width: min(1360px, calc(100% - 32px));
  margin: 0 auto;
  min-width: 0;
}

.home-hero {
  position: relative;
  display: block;
  min-height: 100svh;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0;
  min-width: 0;
  background: #050505;
}

.hero-copy {
  position: relative;
  z-index: 2;
  grid-column: 1 / span 5;
  padding-top: 46px;
  min-width: 0;
}

.home-kicker,
.project-number,
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.home-kicker {
  margin-bottom: 22px;
  color: rgba(17, 17, 17, 0.72);
}

.home-hero h1 {
  max-width: 640px;
  margin: 0 0 24px;
  color: var(--home-ink);
  font-size: 6.4rem;
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero-copy p:not(.home-kicker) {
  max-width: 430px;
  font-size: 1.08rem;
  overflow-wrap: break-word;
}

.hero-visual-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100svh;
  padding: 0;
  min-width: 0;
}

.home-page .hero-hello {
  position: absolute;
  z-index: 4;
  top: 50.75%;
  left: 15.43%;
  width: 20.57vw;
  color: rgba(255, 255, 255, 0.7);
  font-family: "Montserrat", var(--sans);
  font-size: clamp(1.7rem, 2.18vw, 5rem);
  font-weight: 400;
  line-height: 1.225;
  text-align: center;
  text-shadow: none;
  transform: none;
  mix-blend-mode: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.hero-visual {
  position: relative;
  min-height: 100svh;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  aspect-ratio: auto;
  border: 0;
  background-color: #050505;
  background-position: left -17svh;
  background-size: 114.86% 114.8%;
  background-repeat: no-repeat;
  box-shadow: none;
  contain: paint;
}

.hero-picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-photo {
  display: block;
  width: 114.86%;
  max-width: none;
  height: 114.8%;
  filter: none;
  image-rendering: auto;
  opacity: 0;
  object-fit: cover;
  object-position: left top;
  transform: translate3d(0, -14.8%, 0);
  transition: opacity 180ms ease;
}

.hero-photo.is-loaded {
  opacity: 1;
}

.hero-note {
  width: min(430px, 56%);
  margin: 18px 0 0 auto;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.34;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.hero-marquee {
  position: absolute;
  right: 0;
  bottom: 24px;
  left: 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: rgba(17, 17, 17, 0.42);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.dark-flow {
  position: relative;
  width: 100vw;
  margin-top: -1px;
  margin-left: calc(50% - 50vw);
  overflow: visible;
  background: #050505;
}

.dark-flow-motion {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.statement-strip {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  width: 100vw;
  margin-left: 0;
  overflow: visible;
  padding: 0;
  background: transparent;
  isolation: isolate;
}

.statement-block {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--block-width);
  height: var(--block-height);
  border-radius: 50%;
  background: var(--block-fill);
  background-blend-mode: soft-light, screen, normal;
  filter: blur(32px) brightness(0.45) saturate(0.72);
  opacity: 0.9;
  transform:
    translate3d(var(--statement-object-x, 0), var(--statement-object-y, 0), 0)
    rotate(var(--statement-object-angle, 0deg))
    scale(var(--statement-object-scale-x, 1), var(--statement-object-scale-y, 1));
  will-change: transform;
}

.statement-block-1 {
  --block-width: clamp(210px, 31.09vw, 398px);
  --block-height: var(--block-width);
  --block-fill:
    url("assets/hero/cr1.webp") center / 160% 220% no-repeat,
    linear-gradient(128deg, rgba(255, 255, 255, 0.5) 0%, rgba(135, 124, 124, 0.9) 34%, rgba(26, 25, 25, 0.7) 78%),
    #877c7c;
  --statement-object-x: 5.7vw;
  --statement-object-y: 53.73svh;
}

.statement-block-2 {
  --block-width: clamp(204px, 30.08vw, 385px);
  --block-height: var(--block-width);
  --block-fill:
    url("assets/hero/cr2.webp") 42% 24% / 180% 230% no-repeat,
    radial-gradient(ellipse at 28% 20%, rgba(255, 255, 255, 0.88) 0%, rgba(241, 227, 214, 0.92) 30%, rgba(60, 55, 52, 0.62) 76%),
    #f1e3d6;
  --statement-object-x: 64.3vw;
  --statement-object-y: 9.62svh;
}

.statement-block-3 {
  --block-width: clamp(178px, 26.25vw, 336px);
  --block-height: var(--block-width);
  --block-fill:
    url("assets/hero/cr1.webp") 48% 58% / 175% 235% no-repeat,
    linear-gradient(152deg, rgba(255, 255, 255, 0.78) 0%, rgba(217, 217, 217, 0.9) 38%, rgba(24, 24, 24, 0.66) 82%),
    #d9d9d9;
  --statement-object-x: 50vw;
  --statement-object-y: 50svh;
}

.statement-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50vw;
  display: block;
  width: min(596px, calc(100vw - 56px));
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.6);
  font-family: "Intel One Mono", "Roboto Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 17px;
  text-align: left;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.statement-copy p {
  width: 100%;
  margin: 0 0 19px;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-shadow: none;
  white-space: normal;
}

.statement-copy p:last-child {
  margin-bottom: 0;
}

.statement-copy p:first-child,
.statement-copy p:last-child {
  color: inherit;
  font-weight: inherit;
}

.statement-mobile-text {
  display: none;
}

.mobile-carousel-dots {
  display: none;
}

.statement-copy[data-reveal],
.statement-copy[data-reveal].is-visible {
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .statement-block {
    animation: none;
  }
}

.home-projects {
  position: relative;
  z-index: 1;
  overflow: visible;
  min-height: 100svh;
  width: 100vw;
  margin-left: 0;
  padding: 78px max(24px, calc((100vw - 1360px) / 2)) 34px;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  isolation: isolate;
}

.home-projects::before {
  display: none;
}

.projects-heading {
  position: relative;
  z-index: 2;
  margin-bottom: 34px;
}

.projects-heading .eyebrow {
  font-family: "Montserrat", var(--sans);
  font-weight: 400;
}

.projects-heading p:last-child {
  max-width: 430px;
  color: rgba(255, 255, 255, 0.58);
}

.project-rows {
  position: relative;
  z-index: 2;
}

.project-row {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(150px, 260px) 54px;
  gap: 22px;
  align-items: center;
  min-height: 118px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  cursor: pointer;
  transition:
    color 260ms ease,
    opacity 260ms ease;
}

.project-row > * {
  min-width: 0;
}

.project-row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.project-row::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: transparent;
}

.project-row > span {
  transition:
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 260ms ease,
    color 260ms ease;
  will-change: transform;
}

.project-row:hover,
.project-row:focus-visible {
  color: #fff;
}

.project-row:hover .project-number,
.project-row:focus-visible .project-number {
  opacity: 0.58;
  transform: translateX(-8px);
}

.project-row:hover .project-title,
.project-row:focus-visible .project-title {
  transform: translateX(18px);
}

.project-row:hover .project-feeling,
.project-row:focus-visible .project-feeling {
  transform: translateX(-16px);
}

.project-row:hover .project-arrow,
.project-row:focus-visible .project-arrow {
  transform: translateX(8px);
}

.project-title {
  font-family: "Montserrat", var(--sans);
  font-size: 4rem;
  font-weight: 400;
  line-height: 0.94;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.project-feeling,
.project-arrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}

.project-feeling {
  color: rgba(255, 255, 255, 0.5);
}

.project-arrow {
  justify-self: end;
}

.project-row-muted {
  color: rgba(255, 255, 255, 0.36);
}

.project-row-muted .project-feeling {
  color: rgba(255, 255, 255, 0.28);
}

.project-preview {
  position: fixed;
  z-index: 12;
  top: 0;
  left: 0;
  display: none;
  width: min(300px, calc(100vw - 32px));
  aspect-ratio: 1.18 / 1;
  overflow: hidden;
  pointer-events: none;
  background-color: transparent;
  background-position: center;
  background-size: cover;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
  transform: translate3d(var(--preview-x, -999px), var(--preview-y, -999px), 0) rotate(-2deg);
}

.project-preview.is-visible {
  display: block;
}

.surprise-panel {
  position: relative;
  display: grid;
  overflow: visible;
  place-items: center;
  min-height: 100svh;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 92px max(24px, calc((100vw - 1360px) / 2));
  background: #050505;
  isolation: isolate;
}

.surprise-panel[data-reveal],
.surprise-panel[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.bottom-glow {
  display: none;
}

.bottom-orb {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  display: block;
  width: clamp(240px, 33vw, 430px);
  height: clamp(240px, 33vw, 430px);
  border-radius: 50%;
  background:
    url("assets/hero/cr2.webp") 42% 24% / 180% 230% no-repeat,
    radial-gradient(ellipse at 28% 20%, rgba(255, 255, 255, 0.88) 0%, rgba(241, 227, 214, 0.92) 30%, rgba(60, 55, 52, 0.62) 76%),
    #f1e3d6;
  background-blend-mode: soft-light, screen, normal;
  filter: blur(32px) brightness(0.45) saturate(0.72);
  opacity: 0.9;
  transform:
    translate3d(
      calc(var(--bottom-orb-x, 50vw) - 50%),
      calc(var(--bottom-orb-y, 50svh) - 50%),
      0
    )
    scale(var(--bottom-orb-scale-x, 1), var(--bottom-orb-scale-y, 1));
  will-change: transform;
}

.surprise-panel p {
  position: relative;
  z-index: 2;
  width: min(596px, calc(100vw - 56px));
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: "Intel One Mono", "Roboto Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  text-align: center;
  text-transform: uppercase;
}

@keyframes bottom-glow-drift {
  0% {
    transform: translate3d(-2%, 1%, 0) scale(1);
  }

  100% {
    transform: translate3d(2%, -1.8%, 0) scale(1.06);
  }
}

.cursor-orb {
  --cursor-x: -100px;
  --cursor-y: -100px;
  --cursor-scale: 1;
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  display: none;
  width: 72px;
  height: 72px;
  opacity: 0;
  pointer-events: none;
  background: url("assets/hero/point.webp") center / contain no-repeat;
  filter: none;
  mix-blend-mode: normal;
  transform: translate3d(var(--cursor-x), var(--cursor-y), 0) translate(-50%, -50%) scale(var(--cursor-scale));
  transition:
    opacity 160ms ease,
    filter 160ms ease;
  will-change: transform;
}

.cursor-orb.is-page {
  --cursor-scale: 1;
  opacity: 1;
}

.cursor-orb.is-link {
  --cursor-scale: 1.18;
  opacity: 1;
}

.playground-page {
  min-height: 100vh;
  overflow-x: hidden;
  background: #050505;
  color: rgba(255, 255, 255, 0.86);
}

.playground-page::before,
.playground-page::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
}

.playground-page::before {
  background:
    radial-gradient(circle at 18% 24%, rgba(174, 205, 155, 0.16), transparent 18rem),
    radial-gradient(circle at 84% 10%, rgba(255, 102, 38, 0.1), transparent 20rem),
    radial-gradient(circle at 58% 78%, rgba(241, 226, 201, 0.08), transparent 17rem),
    #050505;
}

.playground-page::after {
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 74%);
}

.playground-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-height: 100svh;
  place-items: center;
  padding: clamp(76px, 8vw, 108px) 20px clamp(52px, 7vw, 86px);
}

.playground-home {
  position: fixed;
  z-index: 8;
  top: 18px;
  left: max(20px, calc((100vw - 1135px) / 2));
  color: rgba(255, 255, 255, 0.54);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    color 180ms ease,
    transform 180ms ease;
}

.playground-home:hover,
.playground-home:focus-visible {
  color: rgba(255, 255, 255, 0.88);
  transform: translateY(-2px);
}

.playground-stage {
  position: relative;
  display: grid;
  width: calc(100vw - 40px);
  min-width: 0;
  max-width: 920px;
  justify-self: center;
  justify-items: center;
}

.playground-stage::before,
.playground-stage::after {
  position: absolute;
  z-index: -1;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  content: "";
  background-blend-mode: soft-light, screen, normal;
  filter: blur(34px) brightness(0.45) saturate(0.72);
  opacity: 0.72;
}

.playground-stage::before {
  top: 8%;
  left: -8%;
  width: clamp(170px, 24vw, 310px);
  aspect-ratio: 1;
  background:
    url("assets/hero/cr1.webp") center / 170% 230% no-repeat,
    linear-gradient(128deg, rgba(255, 255, 255, 0.5), rgba(135, 124, 124, 0.9) 36%, rgba(26, 25, 25, 0.7)),
    #877c7c;
}

.playground-stage::after {
  right: -7%;
  bottom: 9%;
  width: clamp(150px, 21vw, 270px);
  aspect-ratio: 1;
  background:
    url("assets/hero/cr2.webp") 42% 24% / 180% 230% no-repeat,
    radial-gradient(ellipse at 28% 20%, rgba(255, 255, 255, 0.88), rgba(241, 227, 214, 0.92) 32%, rgba(60, 55, 52, 0.62)),
    #f1e3d6;
}

.playground-switch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: 620px;
  min-height: 58px;
  margin-bottom: clamp(28px, 4.2vw, 48px);
  align-items: center;
  padding: 8px clamp(8px, 1.4vw, 14px);
  isolation: isolate;
}

.playground-switch-glow {
  position: absolute;
  inset: -18px -24px;
  z-index: -1;
  display: block;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 16% 52%, rgba(255, 255, 255, 0.95), rgba(241, 226, 201, 0.68) 24%, transparent 45%),
    radial-gradient(ellipse at 51% 48%, rgba(174, 205, 155, 0.46), transparent 47%),
    radial-gradient(ellipse at 88% 50%, rgba(255, 255, 255, 0.76), rgba(241, 226, 201, 0.42) 22%, transparent 48%);
  filter: blur(18px);
  opacity: 0.82;
}

.playground-tab {
  position: relative;
  min-width: 0;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(0, 0, 0, 0.72);
  font-family: "Roboto Mono", var(--mono);
  font-size: clamp(0.78rem, 1vw, 0.96rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.playground-tab.is-active {
  color: rgba(255, 255, 255, 0.88);
}

.playground-tab:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.82);
  outline-offset: 4px;
}

.playground-video-wrap {
  width: calc(100vw - 40px);
  max-width: 920px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
}

.playground-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
}

.playground-copy {
  width: calc(100vw - 40px);
  max-width: 920px;
  margin-top: clamp(20px, 3vw, 30px);
  color: rgba(255, 255, 255, 0.62);
}

.playground-copy h2 {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.88);
  font-family: "Montserrat", var(--sans);
  font-size: clamp(1.45rem, 3.2vw, 2.65rem);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.playground-copy p {
  max-width: 680px;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--sans);
  font-size: clamp(0.82rem, 1vw, 0.94rem);
  line-height: 1.42;
}

.playground-credit {
  margin-top: 14px;
  font-family: "Roboto Mono", var(--mono) !important;
  font-size: 0.66rem !important;
  font-weight: 400;
  line-height: 1.35 !important;
  text-transform: uppercase;
}

.playground-credit + .playground-credit {
  margin-top: 8px;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 720ms ease,
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

html.case-scroll-ready {
  scroll-behavior: smooth;
  scrollbar-color: rgba(255, 255, 255, 0.42) rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
}

html.case-scroll-ready::-webkit-scrollbar {
  width: 10px;
}

html.case-scroll-ready::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
}

html.case-scroll-ready::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.22))
    border-box;
  background-clip: padding-box;
}

html.case-scroll-ready body.water-figma-page {
  scrollbar-color: rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.08);
}

html.case-scroll-ready body.water-figma-page::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.08);
}

html.case-scroll-ready body.water-figma-page::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.18))
    border-box;
  background-clip: padding-box;
}

[data-case-reveal] {
  opacity: 0.18;
  translate: 0 18px;
  transition:
    opacity 920ms ease,
    translate 980ms cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: var(--case-reveal-delay, 0ms);
  will-change: opacity, translate;
}

[data-case-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  html.case-scroll-ready {
    scroll-behavior: auto;
  }

  [data-case-reveal] {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}

@media (max-width: 767px) {
  :root {
    --project-mobile-copy: min(calc(100vw - (var(--project-mobile-pad) * 2)), 330px);
  }

  [data-case-reveal] {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}

@media (min-width: 1100px) {
  .home-hero h1 {
    font-size: 8.8rem;
  }

  .project-title {
    font-size: 5.6rem;
  }
}

@media (pointer: fine) {
  .home-page {
    cursor: none;
  }

  .home-page a,
  .home-page button,
  .home-page [role="button"] {
    cursor: none;
  }

  .cursor-orb {
    display: block;
  }

  .statement-strip,
  .statement-strip * {
    cursor: auto;
  }
}

.water-page {
  background: #fffefe;
  color: #000;
}

.water-page .portfolio-nav {
  color: #000;
}

.water-page p {
  color: #000;
}

.water-shell {
  width: min(1280px, 100%);
  margin: 0 auto;
  overflow: hidden;
  background: #fffefe;
}

.water-hero {
  position: relative;
  display: grid;
  min-height: clamp(660px, 76vw, 860px);
  align-content: center;
  padding: 86px clamp(22px, 5.6vw, 72px) 120px;
}

.water-meta,
.water-year,
.water-tagline,
.water-source {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.35;
}

.water-meta {
  position: absolute;
  top: 82px;
  left: clamp(22px, 7.4vw, 95px);
  display: grid;
  gap: 2px;
}

.water-year {
  position: absolute;
  top: 82px;
  right: clamp(22px, 7.4vw, 95px);
}

.water-tagline {
  position: absolute;
  top: 82px;
  right: clamp(92px, 34vw, 430px);
  width: min(340px, 30vw);
  text-align: right;
}

.water-hero h1 {
  width: min(820px, 100%);
  margin: 0;
  font-size: clamp(4.8rem, 8vw, 6.25rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.water-subtitle {
  width: min(430px, 80vw);
  margin-top: 18px;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.08;
}

.water-context {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 370px;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  padding: 0 clamp(22px, 6.4vw, 82px) 92px;
}

.water-context p:not(.eyebrow) {
  font-size: 0.94rem;
  line-height: 1.43;
  text-align: justify;
}

.water-thumbnails {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  align-self: center;
}

.water-thumbnails img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.water-source {
  width: min(530px, calc(100% - 44px));
  margin: 0 auto 56px;
  text-align: center;
}

.water-spread-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  width: min(1060px, calc(100% - 44px));
  margin: 0 auto 86px;
  align-items: start;
}

.water-spread-grid img,
.water-gallery img {
  width: 100%;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
}

.water-spread-grid img:nth-child(even) {
  margin-top: 42px;
}

.water-mockup {
  display: grid;
  min-height: clamp(430px, 54vw, 735px);
  place-items: center;
  margin: 0;
  background: #e9e9e9;
}

.water-mockup img {
  width: min(100%, 1280px);
}

.water-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: min(1440px, 100%);
  margin: 0 auto;
}

.water-gallery img {
  box-shadow: none;
}

.water-gallery img:nth-child(1) {
  grid-column: 1 / -1;
  width: min(720px, 74%);
  margin: 86px auto 0;
}

.water-closing {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1fr);
  gap: clamp(36px, 8vw, 96px);
  align-items: start;
  padding: clamp(72px, 10vw, 120px) clamp(22px, 5.2vw, 67px) 90px;
}

.water-closing p {
  max-width: 700px;
  font-size: clamp(2.1rem, 3.2vw, 2.5rem);
  line-height: 1.15;
}

.water-closing img {
  width: min(608px, 100%);
  justify-self: end;
}

.site-shell {
  width: min(1135px, calc(100% - 28px));
  margin: 58px auto;
  padding: clamp(18px, 2.2vw, 28px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  background: rgba(78, 78, 78, 0.2);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero {
  position: relative;
  min-height: clamp(260px, 32vw, 420px);
  padding: clamp(24px, 4vw, 48px);
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.18)),
    url("assets/click/film-strip.webp");
  background-size: 112.33% 525.07%;
  background-position: 6.87% 47%;
  border-bottom: 1px solid var(--line);
}

.logo-mark {
  position: absolute;
  left: 50%;
  top: 48%;
  width: clamp(220px, 40vw, 520px);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 20px 38px rgba(0, 0, 0, 0.52));
}

.meta,
.year,
.tagline,
.eyebrow,
.closing p {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0;
}

.meta-right {
  position: absolute;
  top: clamp(18px, 3vw, 36px);
  right: clamp(18px, 3vw, 38px);
  display: grid;
  gap: 2px;
  color: var(--text);
  font-size: 0.72rem;
  line-height: 1.2;
  text-align: right;
}

.year {
  position: absolute;
  top: clamp(76px, 8vw, 96px);
  right: clamp(18px, 3vw, 38px);
  font-size: 0.75rem;
}

.tagline {
  position: absolute;
  right: clamp(18px, 3vw, 38px);
  bottom: clamp(22px, 4vw, 44px);
  width: min(420px, 54%);
  color: var(--text);
  font-size: clamp(0.82rem, 0.74rem + 0.25vw, 0.95rem);
  line-height: 1.35;
  text-align: right;
}

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 72px);
}

.intro-grid,
.essence-grid,
.magazine-intro {
  padding: clamp(36px, 6vw, 72px) clamp(4px, 2vw, 18px);
}

.eyebrow {
  margin-bottom: 12px;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
}

.logo-eyebrow {
  margin-top: 30px;
  margin-bottom: 8px;
}

.wide-film {
  margin: 0 calc(clamp(18px, 2.2vw, 28px) * -1);
  height: clamp(148px, 17vw, 188px);
  border-block: 1px solid var(--line);
}

.crop-film {
  width: 100%;
  height: 100%;
}

.crop-film img {
  width: 112.33%;
  height: 525.07%;
  left: -6.87%;
  top: -211.91%;
}

.mono-photo {
  width: 100%;
  margin-top: 44px;
  aspect-ratio: 16 / 6;
}

.crop-brand-photo img {
  width: 142.35%;
  height: 287.89%;
  left: -15.5%;
  top: -79.17%;
  filter: grayscale(1);
}

.swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(82px, 1fr));
  gap: 14px;
  margin-bottom: 48px;
}

.swatch {
  min-height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-family: var(--mono);
  font-size: 0.66rem;
}

.swatch.dark {
  background: #0f0f0f;
  color: #fff;
}

.swatch.light {
  background: #fff;
  color: #000;
}

.swatch.cream {
  background: var(--cream);
  color: #000;
}

.swatch.rust {
  background: var(--rust);
  color: #fff;
  border-color: transparent;
}

.feature-image {
  margin: 0 calc(clamp(18px, 2.2vw, 28px) * -1);
}

.crop-signboard {
  width: 100%;
  aspect-ratio: 1134 / 636;
}

.crop-signboard img {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.merch-grid,
.poster-grid,
.magazine-wall {
  display: grid;
  gap: clamp(14px, 2vw, 28px);
}

.merch-grid {
  grid-template-columns: 0.85fr 1.1fr 0.85fr;
  align-items: end;
  margin: 34px 0 clamp(52px, 7vw, 86px);
}

.merch-grid figure,
.poster-grid .crop,
.magazine-wall .crop,
.magazine-intro .crop,
.closing .crop {
  overflow: hidden;
  background: var(--panel);
}

figure {
  margin: 0;
}

.crop-square {
  width: 100%;
  aspect-ratio: 4 / 4;
}

.crop-merch-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
}

.crop-tshirt img {
  width: 100%;
  height: 109.9%;
  left: 0;
  top: 0;
}

.crop-tshirt-back img {
  width: 100%;
  height: 109.53%;
  left: 0;
  top: 0;
}

.crop-merch-photo img {
  width: 100%;
  height: 111.28%;
  left: 0;
  top: -1.63%;
}

.poster-grid {
  grid-template-columns: repeat(3, 1fr);
  margin: 34px 0 clamp(68px, 8vw, 110px);
}

.crop-poster {
  width: 100%;
  aspect-ratio: 29 / 40;
}

.crop-poster-1 img {
  width: 174.55%;
  height: 187.72%;
  left: -39.13%;
  top: -44.78%;
}

.crop-poster-2 img {
  width: 175.52%;
  height: 186.1%;
  left: -38.85%;
  top: -43.86%;
}

.crop-poster-3 img {
  width: 174.39%;
  height: 186.44%;
  left: -38.01%;
  top: -44.42%;
}

.magazine-intro {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: clamp(28px, 6vw, 80px);
  align-items: center;
  border-top: 1px solid var(--line);
}

.crop-magazine-pack {
  width: 100%;
  aspect-ratio: 715 / 562;
}

.crop-magazine-pack img {
  width: 104.8%;
  height: 100%;
  left: -4.78%;
  top: 0;
}

.magazine-wall {
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  align-items: start;
}

.magazine-wall .crop {
  width: 100%;
  aspect-ratio: 2480 / 3508;
}

.crop-mag-000 img {
  width: 200%;
  height: 188.9%;
  left: -100%;
  top: -0.04%;
}

.crop-mag-1111 img {
  width: 120.81%;
  height: 181.46%;
  left: -20.81%;
  top: -0.09%;
}

.crop-mag-222 img {
  width: 100%;
  height: 188.6%;
  left: 0;
  top: -0.12%;
}

.crop-mag-333 img {
  width: 100%;
  height: 188.01%;
  left: 0;
  top: -0.33%;
}

.crop-mag-44 img {
  width: 230.1%;
  height: 190.42%;
  left: 0;
  top: -0.02%;
}

.crop-mag-5555 img {
  width: 100%;
  height: 189.2%;
  left: 0;
  top: -0.02%;
}

.crop-mag-888 img {
  width: 116.5%;
  height: 176.52%;
  left: -0.04%;
  top: 0;
}

.crop-mag-999 img {
  width: 122.01%;
  height: 187.93%;
  left: -21.96%;
  top: 0;
}

.magazine-wall .crop:nth-child(1),
.magazine-wall .crop:nth-child(4),
.magazine-wall .crop:nth-child(7) {
  grid-column: span 3;
}

.magazine-wall .crop:nth-child(2),
.magazine-wall .crop:nth-child(3),
.magazine-wall .crop:nth-child(5),
.magazine-wall .crop:nth-child(6),
.magazine-wall .crop:nth-child(8) {
  grid-column: span 4;
}

.closing {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(56px, 8vw, 96px) 0 24px;
  border-top: 1px solid var(--line);
}

.crop-smile {
  width: min(280px, 72vw);
  aspect-ratio: 268 / 220;
}

.crop-smile img {
  width: 100.27%;
  height: 107.44%;
  left: -0.14%;
  top: -3.31%;
}

.closing p {
  color: var(--text);
  font-size: 0.82rem;
}

@media (max-width: 780px) {
  .portfolio-nav {
    top: 14px;
    width: calc(100% - 28px);
  }

  .home-hero {
    min-height: 100svh;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0;
  }

  .hero-copy,
  .hero-visual-wrap {
    grid-column: 1;
  }

  .hero-copy {
    padding-top: 0;
  }

  .home-hero h1 {
    max-width: 520px;
    font-size: 5.3rem;
  }

  .hero-visual-wrap {
    min-height: 100svh;
    padding: 0;
  }

  .hero-hello {
    top: 50%;
    left: 50%;
    width: min(560px, calc(100% - 40px));
    font-size: clamp(2.15rem, 9vw, 5rem);
    text-align: center;
    transform: translate(-50%, -50%);
  }

  .hero-visual {
    min-height: 100svh;
    height: 100svh;
  }

  .hero-note {
    width: min(520px, 100%);
    margin-left: 0;
  }

  .projects-heading,
  .surprise-panel,
  .water-context,
  .water-closing {
    grid-template-columns: 1fr;
  }

  .project-row {
    grid-template-columns: 42px minmax(0, 1fr) minmax(118px, 26vw) 42px;
    min-height: 104px;
  }

  .project-title {
    font-size: 3.1rem;
  }

  .project-feeling {
    grid-column: auto;
    margin-top: 0;
  }

  .project-preview {
    display: none !important;
  }

  .playground-shell {
    align-items: start;
  }

  .playground-switch {
    max-width: 560px;
  }

  .water-tagline {
    position: static;
    width: min(360px, 72vw);
    margin-top: 104px;
    text-align: left;
  }

  .water-hero {
    min-height: 620px;
    padding-bottom: 82px;
  }

  .water-hero h1 {
    font-size: clamp(3.6rem, 14vw, 5.8rem);
  }

  .water-context {
    padding-bottom: 64px;
  }

  .water-thumbnails {
    max-width: 420px;
  }

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

  .water-spread-grid img:nth-child(even) {
    margin-top: 0;
  }

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

  .water-gallery img:nth-child(1) {
    width: 100%;
    margin-top: 0;
  }

  .water-closing img {
    justify-self: start;
  }

  .site-shell {
    width: min(100% - 16px, 620px);
    margin: 8px auto;
    padding: 16px;
  }

  .click-page .site-shell {
    margin-top: 48px;
  }

  .hero {
    min-height: 380px;
  }

  .meta-right,
  .year,
  .tagline {
    right: 18px;
  }

  .tagline {
    width: min(280px, 70%);
  }

  .split,
  .magazine-intro {
    grid-template-columns: 1fr;
  }

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

  .merch-grid,
  .poster-grid {
    grid-template-columns: 1fr;
  }

  .magazine-wall {
    grid-template-columns: repeat(2, 1fr);
  }

  .magazine-wall .crop,
  .magazine-wall .crop:nth-child(n) {
    grid-column: span 1;
  }
}

@media (max-width: 480px) {
  .portfolio-nav {
    width: calc(100% - 20px);
    gap: 14px;
    font-size: 0.58rem;
  }

  .portfolio-nav nav {
    gap: 9px;
  }

  .home-page main {
    width: calc(100% - 20px);
  }

  .home-hero {
    padding-top: 84px;
  }

  .home-hero h1 {
    max-width: 100%;
    font-size: 2.58rem;
    line-height: 0.92;
    word-break: break-word;
  }

  .hero-copy p:not(.home-kicker) {
    font-size: 0.98rem;
  }

  .hero-note {
    font-size: 0.64rem;
  }

  .hero-visual {
    min-height: 240px;
    aspect-ratio: 1 / 1.08;
  }

  .hero-photo {
    object-position: 58% center;
  }

  .hero-marquee {
    position: static;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 12px;
  }

  .home-projects {
    padding-top: 48px;
  }

  .project-row {
    grid-template-columns: 28px minmax(0, 1fr) minmax(82px, 24vw) 28px;
    gap: 10px;
    min-height: 92px;
  }

  .project-title {
    font-size: 1.82rem;
  }

  .project-arrow {
    font-size: 0.66rem;
  }

  .water-meta,
  .water-year {
    top: 68px;
  }

  .water-hero {
    min-height: 560px;
    padding-top: 74px;
  }

  .water-subtitle {
    font-size: 1.7rem;
  }

  .water-spread-grid {
    grid-template-columns: 1fr;
  }

  .water-mockup {
    min-height: 320px;
  }

  .water-closing {
    padding-bottom: 56px;
  }

  .site-shell {
    width: 100%;
    margin: 0;
    border-inline: 0;
  }

  .hero {
    min-height: 340px;
  }

  .logo-mark {
    width: min(88vw, 360px);
  }

  .tagline {
    width: 82%;
  }
}

@media (max-width: 600px) {
  .home-page {
    overscroll-behavior-y: auto;
  }

  .home-page .portfolio-nav {
    width: calc(100% - 32px);
    justify-content: flex-start;
    gap: 14px;
    font-size: 0.58rem;
  }

  .home-page .portfolio-nav nav {
    gap: 9px;
  }

  .home-page main {
    width: calc(100% - 32px);
  }

  .home-page [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .home-page .statement-copy[data-reveal] {
    transform: translate(-50%, -50%);
  }

  .home-page .home-hero {
    min-height: 86svh;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0;
  }

  .home-page .hero-visual-wrap {
    min-height: 86svh;
    padding: 0;
  }

  .home-page .hero-hello {
    top: 11.5svh;
    left: 50%;
    width: min(310px, 78vw);
    font-size: clamp(1.25rem, 6.1vw, 2rem);
    line-height: 1.18;
    text-align: center;
    white-space: nowrap;
    transform: translateX(-50%);
  }

  .home-hero h1 {
    max-width: 100%;
    font-size: 2.58rem;
    line-height: 0.92;
    word-break: break-word;
  }

  .hero-copy p:not(.home-kicker) {
    max-width: 330px;
    font-size: 0.98rem;
  }

  .home-projects,
  .surprise-panel {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-right: 20px;
    padding-left: 20px;
  }

  .home-projects {
    min-height: auto;
    padding-bottom: 8px;
  }

  .surprise-panel {
    min-height: 52svh;
    padding-top: 0;
    padding-bottom: 0;
  }

  .surprise-panel p {
    align-self: center;
    width: min(596px, calc(100vw - 40px));
    max-width: none;
    margin-top: 0;
    font-size: 12px;
    line-height: 17px;
  }

  .bottom-orb {
    top: 50%;
    left: 50%;
    width: clamp(230px, 68vw, 340px);
    height: clamp(230px, 68vw, 340px);
    transform: translate3d(-50%, -50%, 0);
  }

  .hero-note {
    max-width: 330px;
  }

  .hero-note {
    font-size: 0.64rem;
  }

  .hero-visual {
    min-height: 86svh;
    height: 86svh;
    aspect-ratio: auto;
    background-image: none !important;
    background-size: cover;
    background-position: center;
  }

  .hero-photo {
    width: 100%;
    height: 100%;
    filter: none;
    opacity: 1;
    object-fit: cover;
    object-position: 51% center;
    transform: none;
    transition: none;
  }

  .statement-copy {
    top: 50%;
    width: min(596px, calc(100vw - 40px));
    font-size: 10.5px;
    line-height: 15px;
  }

  .statement-strip {
    min-height: 78svh;
  }

  .statement-desktop-text {
    display: none;
  }

  .statement-mobile-text {
    display: inline;
  }

  .statement-copy p {
    margin-bottom: 15px;
  }

  .statement-block-1,
  .statement-block-2,
  .statement-block-3 {
    --block-width: clamp(250px, 72vw, 340px);
    --statement-object-scale-x: 1;
    --statement-object-scale-y: 1;
  }

  .home-projects {
    padding-top: 52px;
    padding-bottom: 8px;
  }

  .projects-heading {
    margin-bottom: 28px;
  }

  .hero-marquee {
    position: static;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 12px;
  }

  .project-row {
    grid-template-columns: 24px minmax(0, 1fr) minmax(104px, 31vw) 24px;
    gap: 10px;
    min-height: 92px;
  }

  .project-title {
    font-size: clamp(1.2rem, 5.6vw, 1.62rem);
    white-space: nowrap;
  }

  .project-feeling,
  .project-arrow {
    font-size: clamp(0.42rem, 2.05vw, 0.58rem);
    white-space: nowrap;
  }

  .project-feeling {
    justify-self: end;
    text-align: right;
  }

  .project-row:hover .project-number,
  .project-row:focus-visible .project-number,
  .project-row:hover .project-title,
  .project-row:focus-visible .project-title,
  .project-row:hover .project-feeling,
  .project-row:focus-visible .project-feeling,
  .project-row:hover .project-arrow,
  .project-row:focus-visible .project-arrow {
    transform: none;
  }

  .project-row:hover .project-number,
  .project-row:focus-visible .project-number {
    opacity: 1;
  }

  .playground-shell {
    padding: 72px 16px 44px;
  }

  .playground-stage,
  .playground-switch,
  .playground-video-wrap,
  .playground-copy {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }

  .playground-home {
    left: 16px;
    font-size: 0.62rem;
  }

  .playground-switch {
    min-height: 52px;
    margin-bottom: 28px;
    padding: 7px;
  }

  .playground-switch-glow {
    inset: -14px -16px;
    filter: blur(15px);
  }

  .playground-tab {
    min-height: 38px;
    font-size: clamp(0.58rem, 3vw, 0.74rem);
    letter-spacing: 0.04em;
  }

  .playground-copy h2 {
    margin-bottom: 12px;
  }

  .playground-copy p {
    font-size: 0.84rem;
  }
}

.water-figma-page {
  margin: 0;
  overflow-x: hidden;
  background: #fffefe;
  color: #000;
  --water-scale: 1;
}

.newgen-page {
  margin: 0;
  overflow-x: hidden;
  background: #000;
  color: #fff;
  --newgen-scale: 1;
  --newgen-bleed-left: 0px;
  --newgen-bleed-width: 1280px;
  --newgen-mono: "Roboto Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  --newgen-sans: "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --newgen-display: "Goldman", var(--newgen-sans);
  --newgen-script: "Moon Dance", cursive;
}

.newgen-stage {
  position: relative;
  width: calc(1280px * var(--newgen-scale));
  height: calc(14671px * var(--newgen-scale));
  margin: 0 auto;
  overflow: visible;
  background: #000;
}

.newgen-artboard {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 14671px;
  overflow: visible;
  background: #000;
  transform: scale(var(--newgen-scale));
  transform-origin: top left;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.newgen-artboard > * {
  position: absolute;
  box-sizing: border-box;
}

.newgen-artboard p,
.newgen-artboard h1,
.newgen-artboard h2 {
  margin: 0;
  letter-spacing: 0;
  font-synthesis: none;
  text-wrap: auto;
}

.ng-media {
  overflow: hidden;
  background-color: #050505;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ng-contain {
  background-color: transparent;
  background-size: contain;
}

.ng-world-carousel {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  overflow: visible;
}

.ng-world-carousel > .ng-media {
  position: absolute;
  box-sizing: border-box;
}

.ng-hero-bg {
  left: var(--newgen-bleed-left);
  top: -52px;
  width: var(--newgen-bleed-width);
  height: 792px;
  background-image: url("assets/new-gen/hero-bg.webp");
  transform: matrix(-1, 0, 0, 1, 0, 0);
}

.ng-title {
  font-family: var(--newgen-display);
  font-size: 120px;
  font-weight: 400;
  line-height: 144px;
  text-transform: uppercase;
  color: #fff;
}

.ng-section-title {
  font-family: var(--newgen-display);
  font-size: 60px;
  font-weight: 400;
  line-height: 72px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.ng-world-title {
  color: rgba(255, 255, 255, 0.9);
}

.ng-small-heading,
.ng-subheading {
  font-family: var(--newgen-display);
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

.ng-small-heading {
  font-size: 14px;
  line-height: 17px;
}

.ng-subheading {
  font-size: 16px;
  line-height: 19px;
}

.ng-copy {
  font-family: var(--newgen-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
  color: #fff;
  text-align: justify;
  text-wrap: pretty;
  white-space: normal;
}

.ng-lead {
  font-family: var(--newgen-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  white-space: normal;
}

.ng-lead-closer {
  display: block;
  margin-top: 22px;
  font-weight: 500;
}

.ng-gameplay-intro {
  text-align: left;
  white-space: nowrap;
}

.ng-lore-copy {
  font-size: 14px;
  line-height: 17px;
}

.ng-character-copy {
  font-size: 15px;
  line-height: 18px;
  text-align: left;
}

.ng-question {
  font-family: var(--newgen-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 48px;
  text-transform: uppercase;
  color: #fff;
}

.ng-meta {
  font-family: var(--newgen-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  color: #fff;
}

.ng-source-link {
  color: inherit;
  text-decoration: none;
}

.ng-keep {
  white-space: nowrap;
}

.ng-right {
  text-align: right;
}

.ng-tag {
  font-family: var(--newgen-display);
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  text-transform: uppercase;
  color: #fff;
}

.ng-pill {
  border: 1px solid #faaf4e;
  border-radius: 10px;
}

.ng-tab {
  border: 1px solid #fff;
}

.ng-tab-light {
  border-radius: 20px 0 0 20px;
}

.ng-tab-right {
  border-radius: 0 20px 20px 0;
}

.ng-tab-filled {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 0 20px 20px 0;
}

.ng-tab-left {
  border-radius: 20px 0 0 20px;
}

.ng-card {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid #000;
  border-radius: 10px;
}

.ng-script {
  font-family: var(--newgen-script);
  font-size: 40px;
  font-weight: 400;
  line-height: 54px;
  text-transform: capitalize;
}

.ng-script.ng-blue {
  color: #97bbff;
  font-size: 38px;
  line-height: 51px;
}

.ng-script.ng-pink {
  color: #ed84a3;
}

.ng-dark {
  color: #000;
}

.ng-light {
  color: #fff;
}

.ng-player {
  font-family: var(--newgen-sans);
  font-size: 28px;
  font-weight: 500;
  line-height: 34px;
  text-align: center;
}

.ng-label-faded {
  font-family: var(--newgen-sans);
  font-size: 6px;
  font-weight: 400;
  line-height: 7px;
  color: rgba(255, 255, 255, 0.6);
}

.ng-mini-heading {
  font-family: var(--newgen-display);
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  text-transform: uppercase;
  color: #fff;
}

.ng-mini-copy {
  font-family: var(--newgen-sans);
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  color: #fff;
}

.ng-vertical-label {
  font-family: var(--newgen-display);
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  margin-left: 0;
  color: rgba(255, 255, 255, 0.7);
  text-align: justify;
  transform: rotate(-90deg);
  transform-origin: top left;
}

.ng-concept-label {
  font-family: var(--newgen-display);
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

.ng-dot {
  z-index: 5;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.ng-caption {
  font-family: var(--newgen-display);
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  text-transform: capitalize;
  color: #fff;
}

.ng-gameplay-switcher {
  left: 50%;
  top: 1537px;
  width: 521px;
  transform: translateX(-50%);
}

.ng-gameplay-intro {
  z-index: 2;
}

.ng-gameplay-gun {
  position: absolute;
  z-index: 0;
  right: var(--newgen-gameplay-gun-right, -386px);
  top: -335px;
  width: 1050px;
  height: 760px;
  background-image: url("assets/new-gen/gameplay-bot.webp");
  background-position: calc(100% + 176px) center;
  pointer-events: none;
}

.ng-gameplay-tabs {
  position: relative;
  z-index: 2;
  display: grid;
  height: 50px;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05)),
    rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -10px 22px rgba(0, 0, 0, 0.18),
    0 14px 34px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}

.ng-gameplay-glass {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: 50%;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.08) 58%),
    rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -14px 26px rgba(0, 0, 0, 0.15),
    0 10px 24px rgba(0, 0, 0, 0.24);
  transition: transform 520ms cubic-bezier(0.2, 0.95, 0.18, 1);
  will-change: transform;
}

.ng-gameplay-switcher[data-mode="beta"] .ng-gameplay-glass {
  transform: translateX(100%);
}

.ng-gameplay-tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.45);
  background: transparent;
  cursor: pointer;
  transition: color 260ms ease, text-shadow 260ms ease;
}

.ng-gameplay-script {
  font-family: var(--newgen-script);
  font-size: 38px;
  line-height: 46px;
}

.ng-gameplay-player {
  font-family: var(--newgen-sans);
  font-size: 25px;
  font-weight: 500;
  line-height: 31px;
}

.ng-gameplay-switcher[data-mode="alpha"] .is-alpha,
.ng-gameplay-switcher[data-mode="beta"] .is-beta {
  color: #fff;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.16);
}

.ng-gameplay-switcher[data-mode="alpha"] .is-alpha .ng-gameplay-script {
  color: #97bbff;
}

.ng-gameplay-switcher[data-mode="beta"] .is-beta .ng-gameplay-script {
  color: #ed84a3;
}

.ng-gameplay-card {
  position: relative;
  z-index: 1;
  min-height: 270px;
  margin-top: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.11);
}

.ng-gameplay-panel {
  position: absolute;
  inset: 0;
  padding: 28px 47px 28px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0);
  transition:
    opacity 220ms ease,
    filter 220ms ease;
  filter: blur(3px);
  will-change: opacity, filter;
}

.ng-gameplay-switcher[data-mode="alpha"] .ng-gameplay-panel.is-alpha,
.ng-gameplay-switcher[data-mode="beta"] .ng-gameplay-panel.is-beta {
  opacity: 1;
  pointer-events: auto;
  filter: blur(0);
}

.ng-gameplay-summary {
  width: 100%;
  margin: 0 0 16px;
  font-family: var(--newgen-sans);
  font-size: 13.5px;
  line-height: 18px;
  color: #fff;
  text-align: left;
}

.ng-gameplay-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px;
  align-items: baseline;
  margin-top: 0;
}

.ng-gameplay-row .ng-mini-copy {
  max-width: 340px;
}

.ng-gameplay-card .ng-label-faded {
  margin: 0 0 2px;
  font-size: 7.5px;
  line-height: 9px;
}

.ng-gameplay-card .ng-mini-heading {
  font-size: 12px;
  line-height: 15px;
}

.ng-gameplay-card .ng-mini-copy {
  font-size: 10.5px;
  line-height: 14px;
  text-align: left;
}

.ng-gameplay-card .ng-gameplay-nowrap {
  max-width: none;
  font-size: 9.2px;
  letter-spacing: 0;
  white-space: nowrap;
}

.ng-line-list span {
  display: block;
}

.ng-gameplay-panel.is-alpha .ng-gameplay-summary {
  margin-bottom: 28px;
}

.ng-gameplay-panel.is-alpha .ng-gameplay-mechanics-label {
  margin-top: 27px;
}

.ng-gameplay-mechanics-label {
  margin-top: 15px;
}

.ng-gameplay-mechanics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 74px;
  margin-top: 1px;
}

.ng-gameplay-mechanics-single {
  grid-template-columns: 150px;
}

.ng-gameplay-panel.is-beta .ng-gameplay-summary {
  max-width: 405px;
  margin-bottom: 15px;
}

.ng-gameplay-panel.is-beta .ng-gameplay-row {
  margin: 0;
}

.ng-gameplay-panel.is-beta .ng-mini-heading {
  margin: 0;
}

.ng-gameplay-panel.is-beta .ng-mini-copy {
  max-width: 405px;
}

.ng-gameplay-panel.is-beta .ng-gameplay-mechanics-label {
  margin-top: 13px;
}

.ng-gameplay-panel.is-beta .ng-gameplay-mechanics {
  display: block;
  margin-top: 0;
}

.ng-gameplay-panel.is-beta .ng-gameplay-mechanics .ng-mini-copy {
  max-width: 275px;
}

.ng-mobile-gameplay-roles {
  display: none;
}

.ng-about-icons {
  left: 660px;
  top: 864px;
  width: 135px;
  height: 16px;
  background-image: url("assets/new-gen/about.webp");
}

.ng-character-group {
  z-index: 2;
  background-size: 100% 100%;
}

.ng-main-character-group {
  left: 130px;
  top: 2394px;
  width: 1105px;
  height: 645px;
  background-image: url("assets/new-gen/main character.webp");
}

.ng-robot-companion-group {
  left: 240px;
  top: 3213px;
  width: 987px;
  height: 530px;
  background-image: url("assets/new-gen/robot companion.webp");
}

.ng-vendor-group {
  left: 188px;
  top: 3768px;
  width: 1092px;
  height: 690px;
  background-image: url("assets/new-gen/vendor.webp");
}

.ng-giltex-1 {
  left: 95px;
  top: 4816px;
  width: 532px;
  height: 299px;
  background-image: url("assets/new-gen/giltex-1.webp");
}

.ng-giltex-2 {
  left: 655px;
  top: 4816px;
  width: 531px;
  height: 299px;
  background-image: url("assets/new-gen/giltex-2.webp");
}

.ng-giltex-3 {
  left: 95px;
  top: 5136px;
  width: 530px;
  height: 298px;
  background-image: url("assets/new-gen/giltex-3.webp");
}

.ng-giltex-wide {
  left: 0;
  top: 5460px;
  width: 1280px;
  height: 720px;
  background-image: url("assets/new-gen/giltex-wide.webp");
}

.ng-giltex-people {
  left: 710px;
  top: 5083px;
  width: 399px;
  height: 351px;
  background-image: url("assets/new-gen/giltex-people.webp");
}

.ng-xargard-1 {
  left: 95px;
  top: 6424px;
  width: 529px;
  height: 297px;
  background-image: url("assets/new-gen/xargard-1.webp");
}

.ng-xargard-2 {
  left: 655px;
  top: 6424px;
  width: 530px;
  height: 298px;
  background-image: url("assets/new-gen/xargard-2.webp");
}

.ng-xargard-3 {
  left: 95px;
  top: 6752px;
  width: 528px;
  height: 297px;
  background-image: url("assets/new-gen/xargard-3.webp");
}

.ng-xargard-wide {
  left: 0;
  top: 7086px;
  width: 1280px;
  height: 720px;
  background-image: url("assets/new-gen/xargard-wide.webp");
}

.ng-xargard-people {
  left: 671px;
  top: 6727px;
  width: 515px;
  height: 322px;
  background-image: url("assets/new-gen/xargard-people.webp");
}

.ng-prototype-hero {
  left: 0;
  top: 8102px;
  width: 1258px;
  height: 708px;
  background-image: url("assets/new-gen/prototype-hero.webp");
}

.ng-prototype-1 {
  left: 95px;
  top: 8852px;
  width: 526px;
  height: 296px;
  background-image: url("assets/new-gen/prototype-1.webp");
}

.ng-prototype-2 {
  left: 655px;
  top: 8851px;
  width: 528px;
  height: 297px;
  background-image: url("assets/new-gen/prototype-2.webp");
}

.ng-prototype-woman {
  left: 95px;
  top: 9176px;
  width: 529px;
  height: 298px;
  background-image: url("assets/new-gen/Woman in grey.webp");
}

.ng-prototype-3 {
  left: 655px;
  top: 9176px;
  width: 530px;
  height: 298px;
  background-image: url("assets/new-gen/prototype-3.webp");
}

.ng-prototype-wide-1 {
  left: 0;
  top: 9557px;
  width: 1280px;
  height: 720px;
  background-image: url("assets/new-gen/prototype-wide-1.webp");
}

.ng-prototype-4 {
  left: 95px;
  top: 10362px;
  width: 526px;
  height: 296px;
  background-image: url("assets/new-gen/prototype-4.webp");
}

.ng-prototype-5 {
  left: 655px;
  top: 10362px;
  width: 530px;
  height: 299px;
  background-image: url("assets/new-gen/prototype-5.webp");
}

.ng-prototype-wide-2 {
  left: 0;
  top: 10746px;
  width: 1289px;
  height: 726px;
  background-image: url("assets/new-gen/prototype-wide-2.webp");
}

.ng-prototype-6 {
  left: 95px;
  top: 11524px;
  width: 530px;
  height: 298px;
  background-image: url("assets/new-gen/prototype-6.webp");
}

.ng-prototype-7 {
  left: 655px;
  top: 11524px;
  width: 535px;
  height: 301px;
  background-image: url("assets/new-gen/prototype-7.webp");
}

.ng-prototype-8 {
  left: 95px;
  top: 11877px;
  width: 530px;
  height: 299px;
  background-image: url("assets/new-gen/prototype-8.webp");
}

.ng-prototype-9 {
  left: 655px;
  top: 11877px;
  width: 530px;
  height: 298px;
  background-image: url("assets/new-gen/prototype-9.webp");
}

.ng-prototype-wide-3 {
  left: 0;
  top: 12238px;
  width: 1288px;
  height: 725px;
  background-image: url("assets/new-gen/prototype-wide-3.webp");
}

.ng-giltex-wide,
.ng-xargard-wide,
.ng-prototype-hero,
.ng-prototype-wide-1,
.ng-prototype-wide-2,
.ng-prototype-wide-3 {
  left: var(--newgen-bleed-left);
  width: var(--newgen-bleed-width);
}

.ng-prototype-10 {
  left: 95px;
  top: 13024px;
  width: 530px;
  height: 298px;
  background-image: url("assets/new-gen/prototype-10.webp");
}

.ng-prototype-11 {
  left: 655px;
  top: 13024px;
  width: 530px;
  height: 298px;
  background-image: url("assets/new-gen/prototype-11.webp");
}

.ng-strategy-1 {
  left: 95px;
  top: 13536px;
  width: 530px;
  height: 245px;
  background-image: url("assets/new-gen/Competitor Matrix.webp");
}

.ng-strategy-2 {
  left: 655px;
  top: 13536px;
  width: 530px;
  height: 245px;
  background-image: url("assets/new-gen/Development Roadmap.webp");
}

.ng-strategy-3 {
  left: 95px;
  top: 13828px;
  width: 530px;
  height: 245px;
  background-image: url("assets/new-gen/financial model.webp");
}

.ng-strategy-4 {
  left: 655px;
  top: 13828px;
  width: 530px;
  height: 245px;
  background-image: url("assets/new-gen/Promotion Methods.webp");
}

.ng-lightbox-trigger,
.click-lightbox-trigger,
.water-lightbox-trigger {
  cursor: zoom-in;
  transition: filter 180ms ease, transform 180ms ease;
}

.ng-lightbox-trigger:hover {
  filter: brightness(1.08);
}

.ng-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgba(0, 0, 0, 0);
  cursor: zoom-out;
  opacity: 0;
  transition: background 220ms ease, opacity 220ms ease;
}

.ng-lightbox.is-open {
  background: rgba(0, 0, 0, 0.78);
  opacity: 1;
}

.ng-lightbox img {
  width: min(72vw, 980px);
  max-width: 96vw;
  max-height: 92vh;
  object-fit: contain;
  cursor: default;
  transform: scale(0.88);
  transition: transform 240ms ease;
}

.ng-lightbox.is-open img {
  transform: scale(1);
}

.click-lightbox img {
  width: min(84vw, 1120px);
}

.water-lightbox img {
  width: min(86vw, 1180px);
}

.ng-final-bot {
  left: 513px;
  top: 14072px;
  width: 312px;
  height: 535px;
  background-image: url("assets/new-gen/final-bot.webp");
}

.ng-mobile-tag-row {
  display: none;
}

.ng-mobile-hero-meta {
  display: none;
}

.ng-prototype-carousel,
.ng-strategy-carousel,
.ng-strategy-slide {
  display: contents;
}

.ng-prototype-carousel > .ng-media,
.ng-strategy-slide > .ng-caption,
.ng-strategy-slide > .ng-media {
  position: absolute;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  body.newgen-page {
    --newgen-scale: 1 !important;
    --newgen-bleed-left: 0px !important;
    --newgen-bleed-width: 100vw !important;
  }

  .newgen-stage {
    width: 100%;
    height: auto;
    margin: 0;
    overflow: hidden;
  }

  .newgen-artboard {
    --newgen-mobile-pad: clamp(28px, 6vw, 64px);
    position: relative;
    display: grid;
    width: 100%;
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    padding: 0 var(--newgen-mobile-pad) 96px;
    row-gap: 0;
    transform: none;
  }

  .newgen-artboard > * {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    order: 10;
    min-width: 0;
    grid-column: 1 / -1;
  }

  .newgen-artboard p,
  .newgen-artboard h1,
  .newgen-artboard h2 {
    width: 100% !important;
    max-width: 100%;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .newgen-artboard br {
    display: none;
  }

  .ng-hero-bg {
    order: 1;
    width: calc(100% + var(--newgen-mobile-pad) + var(--newgen-mobile-pad)) !important;
    height: auto;
    aspect-ratio: 1672 / 941;
    margin-right: calc(0px - var(--newgen-mobile-pad));
    margin-left: calc(0px - var(--newgen-mobile-pad));
    background-position: center top;
    transform: matrix(-1, 0, 0, 1, 0, 0) !important;
  }

  .ng-meta {
    order: 2;
    margin-top: 10px;
    font-size: 9px;
    line-height: 1.35;
    text-align: left;
  }

  .ng-meta.ng-right {
    text-align: left;
  }

  .ng-title {
    order: 3;
    margin-top: 34px;
    font-size: clamp(54px, 11vw, 96px);
    line-height: 0.96;
    overflow-wrap: normal;
  }

  .ng-lead {
    order: 4;
    margin-top: 22px;
    margin-bottom: 56px;
    font-size: clamp(18px, 2.8vw, 24px);
    line-height: 1.28;
  }

  .ng-lead-closer {
    margin-top: 18px;
  }

  .ng-copy,
  .ng-lore-copy,
  .ng-character-copy {
    margin-top: 18px;
    font-size: clamp(16px, 2vw, 18px);
    line-height: 1.48;
    text-align: left;
    text-wrap: pretty;
  }

  .ng-copy + .ng-copy {
    margin-top: 42px;
  }

  .ng-copy + .ng-small-heading,
  .ng-copy + .ng-subheading {
    margin-top: 68px;
  }

  .ng-small-heading,
  .ng-subheading {
    margin-top: 54px;
    font-size: clamp(15px, 2.2vw, 18px);
    line-height: 1.2;
  }

  .ng-section-title {
    margin-top: 120px;
    font-size: clamp(44px, 7.4vw, 64px);
    line-height: 0.98;
  }

  .ng-world-title {
    font-size: clamp(34px, 6.6vw, 58px);
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .ng-question {
    margin-top: clamp(120px, 15vw, 150px);
    margin-bottom: clamp(72px, 9vw, 88px);
    font-size: clamp(28px, 4.8vw, 38px);
    line-height: 1.12;
    overflow-wrap: break-word;
  }

  .ng-pill,
  .ng-about-icons,
  .ng-concept-label,
  .ng-dot,
  .ng-tag {
    display: none;
  }

  .ng-mobile-tag-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 14px;
    margin-bottom: 34px;
    align-items: center;
  }

  .ng-mobile-tag-row span {
    display: inline-flex;
    width: auto;
    flex: 0 0 auto;
    align-items: center;
    border: 1px solid #faaf4e;
    border-radius: 999px;
    padding: 4px 12px 5px;
    font-family: var(--newgen-display);
    font-size: 13px;
    line-height: 1.1;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .ng-gameplay-intro {
    z-index: 2;
    margin-top: 28px;
    white-space: normal;
  }

  .ng-gameplay-switcher {
    width: 100% !important;
    margin-top: 42px;
    margin-bottom: 104px;
  }

  .ng-gameplay-gun {
    position: relative !important;
    z-index: 0;
    width: min(100%, 760px) !important;
    height: clamp(180px, 28vw, 260px) !important;
    margin: 0 0 18px auto;
    background-position: center right;
    background-size: contain;
  }

  .ng-gameplay-tabs {
    height: clamp(52px, 8vw, 64px);
    min-width: 0;
  }

  .ng-gameplay-tab {
    gap: 6px;
  }

  .ng-gameplay-script {
    font-size: clamp(30px, 6vw, 42px);
    line-height: 1;
  }

  .ng-gameplay-player {
    font-size: clamp(18px, 3.8vw, 28px);
    line-height: 1;
  }

  .ng-gameplay-card {
    height: clamp(390px, 47vw, 430px);
    min-height: 0;
  }

  .ng-gameplay-panel {
    position: absolute;
    display: none;
    inset: 0;
    overflow: hidden;
    padding: 26px clamp(22px, 5vw, 48px);
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .ng-gameplay-switcher[data-mode="alpha"] .ng-gameplay-panel.is-alpha,
  .ng-gameplay-switcher[data-mode="beta"] .ng-gameplay-panel.is-beta {
    display: block;
  }

  .ng-gameplay-summary,
  .ng-gameplay-panel.is-beta .ng-gameplay-summary {
    max-width: none;
    margin-bottom: 24px;
    font-size: clamp(16px, 2.4vw, 20px);
    line-height: 1.35;
  }

  .ng-gameplay-row,
  .ng-gameplay-panel.is-beta .ng-gameplay-row {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px;
    margin: 0;
  }

  .ng-gameplay-card .ng-label-faded {
    font-size: 9px;
    line-height: 1.2;
  }

  .ng-gameplay-card .ng-mini-heading {
    font-size: clamp(13px, 2vw, 16px);
    line-height: 1.2;
  }

  .ng-gameplay-card .ng-mini-copy,
  .ng-gameplay-row .ng-mini-copy,
  .ng-gameplay-panel.is-beta .ng-mini-copy {
    max-width: none;
    font-size: clamp(13px, 2vw, 16px);
    line-height: 1.35;
  }

  .ng-gameplay-mechanics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(22px, 7vw, 64px);
  }

  .ng-gameplay-panel.is-alpha .ng-gameplay-summary {
    margin-bottom: 34px;
  }

  .ng-gameplay-panel.is-alpha .ng-gameplay-mechanics-label {
    margin-top: 32px;
  }

  .ng-media:not(.ng-hero-bg):not(.ng-gameplay-gun):not(.ng-about-icons) {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    margin-top: 28px;
    background-repeat: no-repeat;
    background-position: center;
    justify-self: center;
  }

  .ng-world-carousel,
  .ng-prototype-carousel,
  .ng-strategy-carousel {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: grid;
    width: 100% !important;
    height: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 30px;
    overflow: visible;
  }

  .ng-world-carousel > .ng-media,
  .ng-prototype-carousel > .ng-media,
  .ng-strategy-slide,
  .ng-strategy-slide > .ng-caption,
  .ng-strategy-slide > .ng-media {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  .ng-world-carousel > .ng-media,
  .ng-prototype-carousel > .ng-media,
  .ng-strategy-slide .ng-media {
    width: 100% !important;
    max-width: 100%;
    margin: 0;
  }

  .ng-world-carousel > .ng-giltex-wide,
  .ng-world-carousel > .ng-xargard-wide,
  .ng-prototype-carousel > .ng-prototype-hero,
  .ng-prototype-carousel > .ng-prototype-wide-1,
  .ng-prototype-carousel > .ng-prototype-wide-2,
  .ng-prototype-carousel > .ng-prototype-wide-3 {
    grid-column: 1 / -1;
  }

  .ng-strategy-slide {
    display: block;
    margin: 0;
  }

  .ng-strategy-slide .ng-caption {
    margin: 0 0 12px;
  }

  .ng-character-group {
    background-size: contain;
    background-position: center;
  }

  .ng-main-character-group {
    aspect-ratio: 1105 / 645;
  }

  .ng-robot-companion-group {
    aspect-ratio: 987 / 530;
  }

  .ng-vendor-group {
    aspect-ratio: 1092 / 690;
  }

  .ng-giltex-people {
    width: min(100%, 399px) !important;
    aspect-ratio: 399 / 351;
  }

  .ng-xargard-people {
    width: min(100%, 515px) !important;
    aspect-ratio: 515 / 322;
  }

  .ng-giltex-1,
  .ng-giltex-2,
  .ng-giltex-3,
  .ng-xargard-1,
  .ng-xargard-2,
  .ng-xargard-3,
  .ng-prototype-1,
  .ng-prototype-2,
  .ng-prototype-woman,
  .ng-prototype-3,
  .ng-prototype-4,
  .ng-prototype-5,
  .ng-prototype-6,
  .ng-prototype-7,
  .ng-prototype-8,
  .ng-prototype-9,
  .ng-prototype-10,
  .ng-prototype-11 {
    aspect-ratio: 16 / 9;
  }

  .ng-giltex-wide,
  .ng-xargard-wide,
  .ng-prototype-hero,
  .ng-prototype-wide-1,
  .ng-prototype-wide-2,
  .ng-prototype-wide-3 {
    width: calc(100% + var(--newgen-mobile-pad) + var(--newgen-mobile-pad)) !important;
    max-width: none;
    aspect-ratio: 16 / 9;
    margin-right: calc(0px - var(--newgen-mobile-pad));
    margin-left: calc(0px - var(--newgen-mobile-pad));
  }

  .ng-strategy-1,
  .ng-strategy-2,
  .ng-strategy-3,
  .ng-strategy-4 {
    aspect-ratio: 530 / 245;
    background-size: contain;
  }

  .ng-caption {
    margin-top: 34px;
    font-size: 13px;
    line-height: 1.2;
  }

  .ng-caption + .ng-caption {
    margin-top: 52px;
  }

  .ng-caption + .ng-media,
  .ng-media + .ng-caption {
    margin-top: 16px;
  }

  .ng-final-bot {
    width: min(70vw, 312px) !important;
    aspect-ratio: 312 / 535;
    justify-self: center;
    background-size: contain;
  }
}

@media (max-width: 767px) {
  body.playground-page .site-logo,
  body.water-figma-page .site-logo,
  body.newgen-page .site-logo,
  body.click-page .site-logo,
  body.wake-page .site-logo,
  body.home-page .site-logo,
  body.playground-page .site-logo:hover,
  body.playground-page .site-logo:focus-visible,
  body.playground-page .site-logo:active,
  body.water-figma-page .site-logo:hover,
  body.water-figma-page .site-logo:focus-visible,
  body.water-figma-page .site-logo:active,
  body.newgen-page .site-logo:hover,
  body.newgen-page .site-logo:focus-visible,
  body.newgen-page .site-logo:active,
  body.click-page .site-logo:hover,
  body.click-page .site-logo:focus-visible,
  body.click-page .site-logo:active,
  body.wake-page .site-logo:hover,
  body.wake-page .site-logo:focus-visible,
  body.wake-page .site-logo:active,
  body.home-page .site-logo:hover,
  body.home-page .site-logo:focus-visible,
  body.home-page .site-logo:active {
    clip-path: inset(0 calc(100% - 6.05em) 0 0) !important;
    transition: none !important;
  }

  body.playground-page .site-logo .site-logo-track,
  body.water-figma-page .site-logo .site-logo-track,
  body.newgen-page .site-logo .site-logo-track,
  body.click-page .site-logo .site-logo-track,
  body.wake-page .site-logo .site-logo-track,
  body.home-page .site-logo .site-logo-track,
  body.playground-page .site-logo:hover .site-logo-track,
  body.playground-page .site-logo:focus-visible .site-logo-track,
  body.playground-page .site-logo:active .site-logo-track,
  body.water-figma-page .site-logo:hover .site-logo-track,
  body.water-figma-page .site-logo:focus-visible .site-logo-track,
  body.water-figma-page .site-logo:active .site-logo-track,
  body.newgen-page .site-logo:hover .site-logo-track,
  body.newgen-page .site-logo:focus-visible .site-logo-track,
  body.newgen-page .site-logo:active .site-logo-track,
  body.click-page .site-logo:hover .site-logo-track,
  body.click-page .site-logo:focus-visible .site-logo-track,
  body.click-page .site-logo:active .site-logo-track,
  body.wake-page .site-logo:hover .site-logo-track,
  body.wake-page .site-logo:focus-visible .site-logo-track,
  body.wake-page .site-logo:active .site-logo-track,
  body.home-page .site-logo:hover .site-logo-track,
  body.home-page .site-logo:focus-visible .site-logo-track,
  body.home-page .site-logo:active .site-logo-track {
    transform: none !important;
    transition: none !important;
  }

  body.click-page .figma-label {
    padding-top: 25px !important;
  }

  body.water-figma-page .water-spread-carousel > .water-w2-left {
    display: none !important;
  }
}

@media (max-width: 600px) {
  body.newgen-page,
  .newgen-stage,
  .newgen-artboard {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .newgen-artboard {
    --newgen-mobile-pad: 22px;
    padding-bottom: 72px;
  }

  .newgen-artboard p:not(.ng-meta),
  .newgen-artboard h2 {
    width: calc(100vw - 44px) !important;
    max-width: calc(100vw - 44px);
  }

  .ng-hero-bg {
    width: 168.2vw !important;
    height: 411px;
    max-width: none;
    margin-left: -56.2vw;
    margin-right: 0;
    background-position: center top;
    background-size: cover;
  }

  .newgen-artboard > .ng-meta {
    display: none;
  }

  .newgen-artboard > .ng-mobile-hero-meta {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 3;
    display: block;
    width: 100% !important;
    height: 411px;
    margin: 0;
    pointer-events: none;
  }

  .ng-mobile-hero-meta span {
    position: absolute;
    display: block;
    font-family: var(--newgen-mono);
    font-weight: 700;
    color: #fff;
  }

  .ng-mobile-meta-type {
    left: 22px;
    top: 21px;
    width: 88px;
    font-size: 9px;
    line-height: 14px;
    white-space: nowrap;
  }

  .ng-mobile-meta-year {
    left: 50%;
    top: 21px;
    width: 73px;
    transform: translateX(-50%);
    font-size: 9px;
    line-height: 14px;
    text-align: center;
    white-space: nowrap;
  }

  .ng-mobile-meta-descriptor {
    right: 20px;
    top: 321px;
    width: 156px;
    font-size: 7px;
    line-height: 14px;
    text-align: right;
    white-space: nowrap;
  }

  .ng-mobile-meta-ai {
    right: 18px;
    top: 383px;
    width: 158px;
    font-size: 7px;
    line-height: 11px;
    white-space: nowrap;
  }

  .newgen-artboard > .ng-title {
    position: absolute !important;
    z-index: 3;
    margin: 0;
  }

  .ng-title {
    left: 22px !important;
    top: 148px !important;
    width: 319px !important;
    font-size: clamp(48px, 14.6vw, 56px);
    line-height: 72px;
    white-space: nowrap;
  }

  .ng-lead {
    margin-top: 20px;
    margin-bottom: 74px;
    padding: 0 5px;
    font-size: 16px;
    line-height: 20px;
  }

  .ng-lead-closer {
    margin-top: 28px;
    font-weight: 700;
  }

  .ng-about-heading {
    margin-top: 0;
  }

  .ng-about-copy {
    margin-top: 3px;
    padding: 0 5px;
    font-size: 15px;
    line-height: 18px;
    text-align: justify;
  }

  .ng-mobile-tag-row {
    gap: 11px;
    margin-top: 42px;
    margin-bottom: 64px;
    padding: 0 5px;
  }

  .ng-mobile-tag-row span {
    height: 16px;
    padding: 0 9px;
    font-size: 12px;
    line-height: 14px;
  }

  .ng-section-title {
    margin-top: 96px;
    font-size: clamp(23px, 7.2vw, 34px);
    white-space: nowrap;
  }

  .ng-world-title {
    font-size: clamp(22px, 6.4vw, 30px);
    white-space: nowrap;
  }

  .ng-question {
    margin-top: 96px;
    margin-bottom: 72px;
    font-size: clamp(23px, 7.2vw, 32px);
    line-height: 1.16;
    word-break: normal;
    overflow-wrap: normal;
  }

  .ng-gameplay-gun {
    display: none;
  }

  .ng-gameplay-card {
    height: 430px;
    min-height: 0;
  }

  .ng-gameplay-panel {
    padding: 24px 22px;
  }

  .ng-gameplay-row,
  .ng-gameplay-panel.is-beta .ng-gameplay-row,
  .ng-gameplay-mechanics {
    display: block;
  }

  .ng-gameplay-row + .ng-gameplay-row {
    margin-top: 8px;
  }

  .ng-gameplay-card .ng-mini-heading {
    margin-bottom: 2px;
  }

  .ng-gameplay-mechanics > div + div {
    margin-top: 12px;
  }

  .ng-mobile-tag-row {
    gap: 6px;
  }

  .ng-mobile-tag-row span {
    padding-right: 8px;
    padding-left: 8px;
    font-size: 10.5px;
  }

  .ng-caption {
    margin-top: 18px;
    font-size: 11px;
    white-space: nowrap;
  }
}

.water-stage {
  position: relative;
  width: calc(1280px * var(--water-scale));
  height: calc(5500px * var(--water-scale));
  margin: 0 auto;
  overflow: visible;
  background: #fffefe;
}

.water-artboard {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 5500px;
  margin: 0;
  overflow: visible;
  background: #fffefe;
  transform: scale(var(--water-scale));
  transform-origin: top left;
  --mono: "Roboto Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.water-artboard p {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: #000;
  letter-spacing: 0;
}

.water-image {
  position: absolute;
  overflow: hidden;
}

.water-spread-carousel {
  display: contents;
}

.water-image > img,
.water-mini img {
  position: absolute;
  display: block;
  max-width: none;
}

.water-floating-magazine {
  left: 0;
  top: 2136px;
  width: 1280px;
  height: 927px;
}

.water-floating-magazine img {
  left: 0;
  top: 0;
  width: 100%;
  height: 103.56%;
}

.water-w1-small {
  left: 115px;
  top: 1492px;
  width: 342px;
  height: 253px;
}

.water-w1-small img {
  left: -0.01%;
  top: 0;
  width: 100.02%;
  height: 191.08%;
}

.water-w1-large {
  left: 270px;
  top: 3213px;
  width: 720px;
  height: 548px;
}

.water-w1-large img {
  left: -0.01%;
  top: 0;
  width: 100.02%;
  height: 185.16%;
}

.water-w2-small {
  left: 466px;
  top: 1488px;
  width: 348px;
  height: 263px;
}

.water-w2-small img {
  left: -0.05%;
  top: 0;
  width: 100.09%;
  height: 187.16%;
}

.water-w2-left {
  left: -62px;
  top: 3754px;
  width: 711px;
  height: 538px;
}

.water-w2-left img {
  left: -0.05%;
  top: 0;
  width: 100.09%;
  height: 187.16%;
}

.water-w2-right {
  left: 943px;
  top: 3214px;
  width: 699px;
  height: 548px;
}

.water-w2-right img {
  left: -0.05%;
  top: 0;
  width: 103.51%;
  height: 187.16%;
}

@media (min-width: 901px) {
  .water-w2-right {
    display: none;
  }
}

.water-w5-small {
  left: 816px;
  top: 1746px;
  width: 354px;
  height: 272px;
}

.water-w5-small img {
  left: -0.05%;
  top: 0;
  width: 100.09%;
  height: 184.32%;
}

.water-w5-large {
  left: 565px;
  top: 4302px;
  width: 726px;
  height: 557px;
}

.water-w5-large img {
  left: -0.05%;
  top: 0;
  width: 100.09%;
  height: 184.32%;
}

.water-w4-small {
  left: 466px;
  top: 1746px;
  width: 353px;
  height: 256px;
}

.water-w4-small img {
  left: 0;
  top: 0;
  width: 100.01%;
  height: 194.76%;
}

.water-w4-large {
  left: -67px;
  top: 4300px;
  width: 726px;
  height: 558px;
}

.water-w4-large img {
  left: 0;
  top: 0;
  width: 100.01%;
  height: 184.26%;
}

.water-w3-small {
  left: 816px;
  top: 1488px;
  width: 352px;
  height: 269px;
}

.water-w3-small img {
  left: -0.01%;
  top: 0;
  width: 100.03%;
  height: 185.16%;
}

.water-w3-large {
  left: 559px;
  top: 3745px;
  width: 726px;
  height: 555px;
}

.water-w3-large img {
  left: -0.01%;
  top: 0;
  width: 100.03%;
  height: 185.16%;
}

.water-title-image {
  position: absolute;
  z-index: 2;
  left: 95px;
  top: 238px;
  width: 681px;
  height: 184px;
  max-width: none;
}

.water-meta {
  z-index: 2;
  left: 95px;
  top: 82px;
  width: 144px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  line-height: normal;
  white-space: pre-wrap;
}

.water-meta p {
  position: static;
  font: inherit;
  line-height: normal;
}

.water-source {
  left: 375px;
  top: 1360px;
  width: 530px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  text-wrap: pretty;
  white-space: pre-wrap;
}

.water-source a {
  color: inherit;
  text-decoration: none;
}

.water-year {
  left: 1156px;
  top: 82px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  line-height: normal;
  text-align: right;
  white-space: nowrap;
}

.water-descriptor {
  left: 518px;
  top: 82px;
  width: 332px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  line-height: normal;
  text-align: right;
  text-wrap: pretty;
  white-space: nowrap;
}

.water-descriptor-mobile {
  display: none;
}

.water-subtitle-image {
  position: absolute;
  z-index: 2;
  left: 95px;
  top: 459px;
  width: 404px;
  height: 88px;
  max-width: none;
}

.water-dot-wave {
  position: absolute;
  z-index: 1;
  left: calc((1280px - (100vw / var(--water-scale))) / 2);
  top: 170px;
  width: calc(100vw / var(--water-scale));
  height: 860px;
  pointer-events: none;
}

.water-mobile-title,
.water-mobile-subtitle,
.water-mobile-meta {
  display: none;
}

.water-closing-image {
  position: absolute;
  left: 95px;
  top: 5009px;
  width: 603px;
  height: 93px;
  max-width: none;
}

.water-label {
  left: 95px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}

.water-problem-label {
  top: 1010px;
}

.water-solution-label {
  top: 1157px;
}

.water-problem-text,
.water-solution-text {
  left: 95px;
  width: 642px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: normal;
  text-align: justify;
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: normal;
}

.water-problem-text {
  top: 1036px;
}

.water-nowrap {
  white-space: nowrap;
}

.water-solution-text {
  top: 1182px;
}

.water-mini {
  position: absolute;
  width: 134px;
  height: 131px;
  overflow: hidden;
  background: #e6e6e6;
  isolation: isolate;
}

.water-mini-left {
  left: 835px;
  top: 1141px;
}

.water-mini-right {
  left: 969px;
  top: 1010px;
}

.water-mini-left .water-mini-texture {
  left: -65px;
  top: -10px;
  width: 249px;
  height: 172px;
  object-fit: cover;
  opacity: 0.74;
}

.water-mini-left .water-mini-photo {
  left: -76px;
  top: -26px;
  width: 305px;
  height: 203px;
  object-fit: cover;
}

.water-mini-right .water-mini-texture-only {
  left: -285px;
  top: -193px;
  width: 525px;
  height: 350px;
  object-fit: cover;
}

.water-final-spread {
  left: 95px;
  top: 5167px;
  width: 603px;
  height: 297px;
}

.water-final-spread img {
  left: 0;
  top: 0;
  width: 107.05%;
  height: 288.55%;
}

@media (min-width: 1281px) {
  .water-floating-magazine {
    left: calc((1280px - 100vw) / 2);
    width: 100vw;
  }

  .water-w2-left,
  .water-w4-large {
    left: calc((1280px - 100vw) / 2);
  }

  .water-w3-large,
  .water-w5-large {
    transform: translateX(calc((100vw - 1280px) / 2));
  }
}

@media (max-width: 900px) {
  .water-figma-page {
    --water-scale: 1 !important;
  }

  .water-stage {
    width: 100%;
    height: auto;
    margin: 0;
    overflow: hidden;
  }

  .water-artboard {
    position: relative;
    display: grid;
    width: 100%;
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 0;
    overflow: hidden;
    box-sizing: border-box;
    padding: 34px clamp(28px, 7vw, 64px) 88px;
    transform: none;
  }

  .water-artboard > * {
    min-width: 0;
  }

  .water-artboard p,
  .water-meta,
  .water-title-image,
  .water-subtitle-image,
  .water-image,
  .water-mini,
  .water-closing-image {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    transform: none;
  }

  .water-title-image,
  .water-subtitle-image,
  .water-closing-image {
    min-width: 0;
    max-width: 100%;
  }

  .water-artboard p,
  .water-meta,
  .water-title-image,
  .water-subtitle-image,
  .water-dot-wave,
  .water-closing-image,
  .water-source,
  .water-floating-magazine,
  .water-spread-carousel,
  .water-w1-large,
  .water-w2-left,
  .water-w2-right,
  .water-w3-large,
  .water-w4-large,
  .water-w5-large,
  .water-final-spread {
    grid-column: 1 / -1;
  }

  .water-image,
  .water-mini {
    width: 100%;
    height: auto;
  }

  .water-meta {
    order: 1;
    width: auto;
    font-size: 9px;
    line-height: 1.15;
  }

  .water-meta p {
    position: static;
  }

  .water-descriptor {
    order: 2;
    justify-self: end;
    width: min(240px, 62vw);
    margin-top: -24px;
    font-size: 9px;
    text-align: right;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .water-year {
    order: 3;
    justify-self: end;
    margin-top: 8px;
    font-size: 9px;
  }

  .water-title-image {
    display: none;
  }

  .water-subtitle-image {
    display: none;
  }

  .water-mobile-title {
    position: relative;
    z-index: 2;
    display: block;
    order: 4;
    margin-top: clamp(88px, 16vw, 142px);
    font-family: var(--sans);
    font-size: clamp(64px, 15.5vw, 118px);
    font-weight: 700;
    line-height: 0.98;
    text-transform: uppercase;
    max-width: 100%;
  }

  .water-mobile-subtitle {
    position: relative;
    z-index: 2;
    display: block;
    order: 5;
    margin-top: 20px;
    font-family: var(--sans);
    font-size: clamp(30px, 6.8vw, 52px);
    font-weight: 400;
    line-height: 1.25;
  }

  .water-title-image {
    z-index: 2;
    order: 4;
    width: calc(100vw - (clamp(28px, 7vw, 64px) * 2));
    height: auto !important;
    margin-top: clamp(88px, 16vw, 142px);
  }

  .water-subtitle-image {
    z-index: 2;
    order: 5;
    width: min(calc(100vw - (clamp(28px, 7vw, 64px) * 2)), 404px);
    height: auto !important;
    margin-top: 22px;
  }

  .water-dot-wave {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 96px;
    width: 100vw;
    height: 620px;
    transform: translateX(-50%);
  }

  .water-label {
    width: auto;
    font-size: 12px;
    line-height: 1.2;
  }

  .water-problem-label {
    order: 6;
    margin-top: clamp(250px, 58vw, 420px);
  }

  .water-problem-text,
  .water-solution-text {
    width: auto;
    font-size: 14px;
    line-height: 1.32;
    text-align: left;
    text-wrap: pretty;
    word-break: normal;
  }

  .water-problem-text {
    order: 7;
    margin-top: 12px;
  }

  .water-problem-text br {
    display: none;
  }

  .water-mini-right {
    order: 10;
    grid-column: 1 / -1;
    justify-self: center;
    width: min(20vw, 134px);
    aspect-ratio: 1 / 1;
    margin-top: 32px;
    transform: translateX(50%);
  }

  .water-solution-label {
    order: 8;
    margin-top: 0;
    padding-top: 50px;
  }

  .water-solution-text {
    order: 9;
    margin-top: 12px;
  }

  .water-mini-left {
    order: 11;
    grid-column: 1 / -1;
    justify-self: center;
    width: min(20vw, 134px);
    aspect-ratio: 1 / 1;
    margin-top: 0;
    transform: translateX(-50%);
  }

  .water-mini-left .water-mini-texture {
    left: -48%;
    top: -8%;
    width: 186%;
    height: 132%;
  }

  .water-mini-left .water-mini-photo {
    left: -56%;
    top: -20%;
    width: 228%;
    height: 156%;
  }

  .water-mini-right .water-mini-texture-only {
    left: -212%;
    top: -148%;
    width: 392%;
    height: 268%;
  }

  .water-source {
    order: 12;
    width: min(100%, 530px);
    margin: clamp(64px, 13vw, 92px) auto clamp(64px, 13vw, 92px);
    font-size: 9px;
    line-height: 1.25;
    justify-self: center;
    text-align: center;
    white-space: normal;
  }

  .water-w1-small,
  .water-w2-small,
  .water-w3-small,
  .water-w4-small,
  .water-w5-small {
    width: 100%;
    margin: 0;
    aspect-ratio: 1.32 / 1;
  }

  .water-w1-small {
    order: 13;
  }

  .water-w2-small {
    order: 14;
  }

  .water-w3-small {
    order: 15;
  }

  .water-w4-small {
    order: 16;
    margin-top: 12px;
  }

  .water-w5-small {
    order: 17;
    margin-top: 12px;
  }

  .water-w1-small img,
  .water-w2-small img,
  .water-w3-small img,
  .water-w4-small img,
  .water-w5-small img {
    top: 0;
    object-fit: fill;
  }

  .water-w1-small img {
    left: -0.01%;
    width: 100.02%;
    height: 191.08%;
  }

  .water-w2-small img {
    left: -0.05%;
    width: 100.09%;
    height: 187.16%;
  }

  .water-w3-small img {
    left: -0.01%;
    width: 100.03%;
    height: 185.16%;
  }

  .water-w4-small img {
    left: 0;
    width: 100.01%;
    height: 194.76%;
  }

  .water-w5-small img {
    left: -0.05%;
    width: 100.09%;
    height: 184.32%;
  }

  .water-w1-large img,
  .water-w2-left img,
  .water-w2-right img,
  .water-w3-large img,
  .water-w4-large img,
  .water-w5-large img,
  .water-final-spread img {
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
  }

  .water-floating-magazine {
    order: 18;
    width: calc(100% + (clamp(28px, 7vw, 64px) * 2));
    aspect-ratio: 1280 / 927;
    margin: clamp(68px, 14vw, 110px) calc(clamp(28px, 7vw, 64px) * -1) 0;
  }

  .water-floating-magazine img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .water-w1-large,
  .water-w2-left,
  .water-w2-right,
  .water-w3-large,
  .water-w4-large,
  .water-w5-large {
    width: 100%;
    aspect-ratio: 1.32 / 1;
    margin-top: 18px;
  }

  .water-w1-large {
    order: 19;
    width: min(100%, 720px);
    justify-self: center;
  }

  .water-w2-right {
    order: 20;
    width: min(100%, 720px);
    grid-column: 1 / -1;
    justify-self: center;
  }

  .water-w3-large {
    order: 21;
    width: min(100%, 720px);
    grid-column: 1 / -1;
    justify-self: center;
  }

  .water-w2-left {
    order: 22;
    width: min(100%, 720px);
    grid-column: 1 / -1;
    justify-self: center;
  }

  .water-w4-large {
    order: 23;
    width: min(100%, 720px);
    grid-column: 1 / -1;
    justify-self: center;
  }

  .water-w5-large {
    order: 24;
    width: min(100%, 720px);
    grid-column: 1 / -1;
    justify-self: center;
  }

  .water-closing-image {
    order: 25;
    width: min(100%, 603px);
    height: auto;
    justify-self: center;
    margin-top: clamp(76px, 18vw, 130px);
  }

  .water-final-spread {
    order: 26;
    width: min(100%, 603px);
    aspect-ratio: 603 / 297;
    justify-self: center;
    margin-top: 34px;
  }
}

@media (max-width: 520px) {
  .water-stage,
  .water-artboard {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .water-artboard {
    --mobile-pad: 30px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --water-mini-mobile: min(22vw, 86px);
    padding: 32px var(--mobile-pad) 72px;
    column-gap: 10px;
  }

  .water-meta,
  .water-descriptor,
  .water-year,
  .water-source {
    font-size: 7px;
  }

  .water-meta {
    position: absolute;
    left: var(--mobile-pad);
    top: 32px;
    grid-column: auto;
  }

  .water-artboard .water-descriptor {
    position: absolute;
    left: auto !important;
    right: var(--mobile-pad) !important;
    top: 32px !important;
    grid-column: auto;
    justify-self: auto;
    width: min(210px, calc(100% - (var(--mobile-pad) * 2) - 112px)) !important;
    text-align: right;
    overflow-wrap: normal;
    word-break: normal;
  }

  .water-artboard .water-year {
    position: absolute;
    left: 50%;
    top: 45px;
    grid-column: auto;
    justify-self: auto;
    margin-top: 0;
    transform: translateX(-50%);
    text-align: center;
  }

  .water-title-image {
    display: none;
    width: 100%;
    margin-top: 74px;
  }

  .water-subtitle-image {
    display: none;
    width: min(100%, 320px);
    margin-top: 16px;
  }

  .water-mobile-title {
    margin-top: 74px;
    max-width: 100%;
    font-size: clamp(36px, 10vw, 48px);
    line-height: 1.04;
  }

  .water-mobile-subtitle {
    margin-top: 16px;
    max-width: 100%;
    font-size: clamp(24px, 6.6vw, 30px);
  }

  .water-dot-wave {
    top: 78px;
    height: 500px;
  }

  .water-problem-label {
    margin-top: 330px;
  }

  .water-problem-text,
  .water-solution-text {
    width: calc(100% - var(--mobile-pad)) !important;
    max-width: calc(100% - var(--mobile-pad)) !important;
    inline-size: calc(100% - var(--mobile-pad)) !important;
    max-inline-size: calc(100% - var(--mobile-pad)) !important;
    justify-self: stretch;
    font-size: 11px;
    line-height: 1.32;
    overflow-wrap: normal;
  }

  .water-label {
    font-size: 9px;
  }

  .water-mini-left,
  .water-mini-right {
    width: var(--water-mini-mobile);
    justify-self: center;
    left: auto !important;
  }

  .water-mini-right {
    margin-left: 0;
    transform: translateX(50%) !important;
  }

  .water-mini-left {
    margin-left: 0;
    transform: translateX(-50%) !important;
  }

  .water-source {
    margin-top: 56px;
    margin-bottom: 56px;
    width: calc(100% - (var(--mobile-pad) * 2));
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .water-w1-small,
  .water-w2-small,
  .water-w3-small,
  .water-w4-small,
  .water-w5-small {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
    margin-top: 0;
    aspect-ratio: 1.32 / 1;
  }

  .water-w1-large,
  .water-w2-left,
  .water-w2-right,
  .water-w3-large,
  .water-w4-large,
  .water-w5-large {
    grid-column: 1 / -1;
    width: 100%;
    justify-self: stretch;
    margin-top: 12px;
    aspect-ratio: 1.28 / 1;
  }

  .water-floating-magazine {
    width: calc(100% + (var(--mobile-pad) * 2));
    margin-left: calc(var(--mobile-pad) * -1);
    margin-right: calc(var(--mobile-pad) * -1);
  }
}

@media (max-width: 900px) {
  .water-artboard .water-descriptor {
    margin-top: -24px;
  }

  .water-artboard .water-year {
    margin-top: 8px;
  }

  .water-artboard .water-mobile-title {
    margin-top: clamp(88px, 16vw, 142px);
  }

  .water-artboard .water-mobile-subtitle {
    margin-top: 20px;
  }

  .water-artboard .water-problem-label {
    margin-top: clamp(250px, 58vw, 420px);
  }

  .water-artboard .water-problem-text,
  .water-artboard .water-solution-text {
    margin-top: 12px;
  }

  .water-artboard .water-solution-label {
    margin-top: 0;
    padding-top: 50px;
  }

  .water-artboard .water-source {
    margin-top: clamp(64px, 13vw, 92px);
    margin-bottom: clamp(64px, 13vw, 92px);
  }
}

@media (max-width: 520px) {
  .water-artboard .water-descriptor {
    margin-top: 0;
  }

  .water-artboard .water-year {
    margin-top: 0;
  }

  .water-artboard .water-mobile-title {
    margin-top: 74px;
  }

  .water-artboard .water-mobile-subtitle {
    margin-top: 16px;
  }

  .water-artboard .water-problem-label {
    margin-top: 330px;
  }

  .water-artboard .water-source {
    margin-top: 56px;
    margin-bottom: 56px;
  }
}

@media (max-width: 360px) {
  .water-artboard {
    --mobile-pad: 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .water-artboard .water-year {
    left: var(--mobile-pad);
    top: 58px;
    grid-column: auto;
    justify-self: auto;
    margin-top: 0;
    transform: none;
    text-align: left;
  }

  .water-artboard .water-descriptor {
    grid-column: auto;
    justify-self: auto;
    left: auto !important;
    right: var(--mobile-pad) !important;
    width: min(190px, calc(100% - (var(--mobile-pad) * 2) - 104px)) !important;
  }
}

@media (max-width: 520px) {
  .water-artboard > .water-descriptor {
    position: absolute !important;
    left: auto !important;
    inset-inline-start: auto !important;
    right: var(--mobile-pad) !important;
    inset-inline-end: var(--mobile-pad) !important;
    top: 32px !important;
    width: min(210px, calc(100% - (var(--mobile-pad) * 2) - 112px)) !important;
    max-width: 210px !important;
    transform: none !important;
    white-space: normal !important;
    text-align: right !important;
    overflow: visible !important;
    color: #000 !important;
  }

  .water-descriptor-desktop {
    display: none;
  }

  .water-descriptor-mobile {
    position: static;
    display: block;
    top: 0;
    left: auto;
    right: auto;
    width: 100%;
    color: #000;
    text-align: right;
    white-space: normal;
  }

  .water-artboard > .water-year {
    position: absolute !important;
    left: var(--mobile-pad) !important;
    top: 58px !important;
    transform: none !important;
    text-align: left !important;
  }
}

@media (max-width: 360px) {
  .water-artboard > .water-descriptor {
    left: auto !important;
    inset-inline-start: auto !important;
    right: var(--mobile-pad) !important;
    inset-inline-end: var(--mobile-pad) !important;
    width: min(190px, calc(100% - (var(--mobile-pad) * 2) - 104px)) !important;
    max-width: 190px !important;
    transform: none !important;
  }

  .water-descriptor-mobile {
    width: 100%;
  }
}

@media (max-width: 520px) {
  html,
  body.water-figma-page,
  .water-stage,
  .water-artboard {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .water-artboard {
    --mobile-pad: 30px;
    box-sizing: border-box;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: var(--mobile-pad);
  }

  .water-meta {
    left: var(--mobile-pad) !important;
  }

  .water-artboard > .water-descriptor {
    left: auto !important;
    right: var(--mobile-pad) !important;
    inset-inline-start: auto !important;
    inset-inline-end: var(--mobile-pad) !important;
    width: min(210px, calc(100% - (var(--mobile-pad) * 2) - 112px)) !important;
    max-width: 210px !important;
  }

  .water-descriptor-mobile {
    width: 100%;
    white-space: nowrap;
  }

  .water-artboard > .water-year {
    left: var(--mobile-pad) !important;
  }

  .water-mobile-title {
    font-size: clamp(31px, 8.8vw, 39px);
    line-height: 1;
    white-space: nowrap;
  }

  .water-mobile-subtitle {
    font-size: clamp(17px, 4.7vw, 22px);
    line-height: 1.1;
    white-space: nowrap;
  }

  .water-mobile-title br,
  .water-mobile-subtitle br {
    display: none;
  }

  .water-label,
  .water-meta,
  .water-year,
  .water-descriptor-mobile,
  .water-source {
    white-space: nowrap;
  }

  .water-problem-text,
  .water-solution-text {
    width: calc(100% - var(--mobile-pad)) !important;
    max-width: calc(100% - var(--mobile-pad)) !important;
    inline-size: calc(100% - var(--mobile-pad)) !important;
    max-inline-size: calc(100% - var(--mobile-pad)) !important;
    justify-self: stretch;
  }

  .water-mini-left,
  .water-mini-right {
    grid-column: 1 / -1;
    justify-self: center;
    margin-left: 0;
  }

  .water-mini-right {
    transform: translateX(50%) !important;
  }

  .water-mini-left {
    transform: translateX(-50%) !important;
  }

  .water-source {
    width: calc(100% - (var(--mobile-pad) * 2));
    margin-inline: auto;
    justify-self: center;
    text-align: center;
  }

  .water-floating-magazine {
    width: calc(100% + (var(--mobile-pad) * 2));
    max-width: none;
    margin-left: calc(var(--mobile-pad) * -1);
    margin-right: calc(var(--mobile-pad) * -1);
  }

  .water-floating-magazine img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #e9e9e9;
  }
}

@media (max-width: 360px) {
  .water-artboard {
    --mobile-pad: 22px;
  }

  .water-mobile-title {
    font-size: clamp(29px, 9vw, 32px);
  }

  .water-artboard > .water-descriptor {
    width: min(190px, calc(100% - (var(--mobile-pad) * 2) - 104px)) !important;
    max-width: 190px !important;
  }
}

body.figma-click-body {
  width: 100%;
  min-width: 320px;
  min-height: var(--click-page-height, 6998px);
  overflow-x: hidden;
  background: #000;
}

.figma-click-frame {
  position: relative;
  width: 1280px;
  height: 6998px;
  margin: 0;
  overflow: visible;
  background: #000;
  color: #fff;
  isolation: isolate;
  transform: scale(var(--click-scale, 1));
  transform-origin: top left;
}

.figma-click-frame > :not(.deco-star) {
  z-index: 1;
}

.figma-click-frame p,
.figma-click-frame span {
  margin: 0;
  color: inherit;
  letter-spacing: 0;
}

.figma-click-logo,
.figma-brandmark,
.figma-image,
.figma-video,
.figma-rule,
.deco-star,
.smile-shadow,
.mobile-click-meta {
  position: absolute;
}

.mobile-click-meta {
  display: none;
}

.figma-click-logo {
  display: block;
}

.hero-logo {
  width: 495.42px;
  height: 116px;
  left: 100px;
  top: 106px;
}

.figma-meta {
  position: absolute;
  width: 115px;
  height: 42px;
  left: 1100px;
  top: 94px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  line-height: 14px;
  text-align: right;
}

.figma-year {
  position: absolute;
  width: 115px;
  height: 14px;
  left: 1100px;
  top: 157px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  line-height: 14px;
  text-align: right;
}

.figma-tagline {
  position: absolute;
  width: 403px;
  height: 28px;
  left: 812px;
  top: 192px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  line-height: 14px;
  text-align: right;
}

.figma-label {
  position: absolute;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 14px;
  line-height: 19px;
  text-transform: uppercase;
}

.figma-copy {
  position: absolute;
  font-family: var(--sans);
  font-weight: normal;
  font-size: 15px;
  line-height: 18px;
  text-align: justify;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.figma-small {
  position: absolute;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 19px;
  text-align: right;
}

.problem-label { width: 61px; left: 100px; top: 316px; }
.problem-copy { width: 502px; height: 72px; left: 100px; top: 336px; }
.insight-label { width: 61px; left: 649px; top: 316px; }
.insight-copy { width: 566px; height: 72px; left: 649px; top: 336px; }

.figma-image {
  overflow: hidden;
}

.figma-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.figma-video {
  overflow: hidden;
  z-index: 1;
}

.figma-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film-strip {
  width: 1280px;
  height: 161px;
  left: 0;
  top: 479px;
}

.figma-brandmark span,
.figma-brandmark img {
  position: absolute;
  display: block;
}

.figma-brandmark span {
  width: 78%;
  height: 70%;
  left: 7%;
  top: 0;
}

.figma-brandmark span::before,
.figma-brandmark span::after {
  position: absolute;
  inset: 0;
  content: "";
  background: currentColor;
  clip-path: polygon(48% 0, 59% 34%, 95% 20%, 68% 48%, 100% 63%, 62% 64%, 62% 100%, 43% 69%, 8% 88%, 30% 55%, 0 39%, 37% 38%);
}

.figma-brandmark span::after {
  inset: 17%;
  background: #000;
}

.figma-brandmark img {
  width: 100%;
  height: 24%;
  left: 0;
  bottom: 0;
  object-fit: fill;
}

.deco-star {
  width: 566.89px;
  height: 484.84px;
  opacity: 0.78;
  background: url("assets/click/background_star.webp") center / contain no-repeat;
  z-index: 0;
}

.deco-star-1 {
  left: 831px;
  top: 1239px;
}

.deco-star-2 {
  left: -72px;
  top: 3159px;
}

.deco-star-3 {
  width: 398.84px;
  height: 341.14px;
  left: -116.32px;
  top: 534.66px;
  transform: rotate(20.64deg);
}

.essence-label { width: 112px; left: 100px; top: 704px; }
.essence-copy { width: 502px; height: 54px; left: 100px; top: 726px; }
.personality-label { width: 147px; left: 649px; top: 704px; }
.naming-label { width: 52px; left: 649px; top: 847px; }
.naming-copy { width: 566px; height: 72px; left: 649px; top: 873px; }
.logo-label { width: 35px; left: 649px; top: 963px; }
.logo-copy { width: 566px; height: 54px; left: 649px; top: 987px; }

.swatch-pill {
  position: absolute;
  width: 120px;
  height: 23px;
  top: 746px;
  border-radius: 20px;
}

.swatch-pill span {
  position: absolute;
  top: 5px;
  right: 7px;
  width: 43px;
  height: 14px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  line-height: 14px;
  text-transform: uppercase;
}

.swatch-black {
  left: 649px;
  background: #0f0f0f;
  border: 0.2px solid #fff;
}

.swatch-white {
  left: 781px;
  background: #fff;
  color: #000;
}

.swatch-cream {
  left: 915px;
  background: #f1e2c9;
  color: #000;
}

.swatch-rust {
  left: 1050px;
  background: #a54119;
}

.brand-photo {
  width: 502px;
  height: 188px;
  left: 100px;
  top: 847px;
}

.brand-photo img {
  filter: grayscale(1);
}

.logo-sample-light {
  width: 136.65px;
  height: 129.42px;
  top: 1078px;
}

.logo-fire {
  width: 566px;
  height: 163px;
  left: 649px;
  top: 1062px;
}

.logo-fire img {
  object-fit: fill;
}

.logo-sample-light {
  left: 298px;
  color: #fff;
}

.signboard {
  width: 1134px;
  height: 636px;
  left: 81px;
  top: 1303px;
}

.merchandise-label { width: 95px; left: 100px; top: 1981px; }
.tshirt-front { width: 278px; height: 253px; left: 159px; top: 2077px; }
.tshirt-back { width: 285px; height: 260px; left: 288px; top: 2203px; }
.merch-photo { width: 340px; height: 423px; left: 661px; top: 2061px; }

.posters-label { width: 121px; left: 100px; top: 2612px; }
.poster-1 { width: 290px; height: 405px; left: 100px; top: 2647px; }
.poster-2 { width: 290px; height: 410px; left: 495px; top: 2647px; }
.poster-3 { width: 284px; height: 399px; left: 889px; top: 2651px; }

.magazine-label { width: 69px; left: 100px; top: 3170px; }
.magazine-pack-group {
  width: 1280px;
  height: 562px;
  left: 0;
  top: 3179px;
}

.magazine-pack-group img {
  object-fit: fill;
}

.magazine-copy {
  width: 417px;
  height: 102px;
  left: 730px;
  top: 3596px;
  font-size: 14px;
  line-height: 17px;
}

.mag-thumb img,
.spread img {
  object-fit: contain;
}

.mag-000 { width: 124px; height: 186px; left: 243px; top: 3846px; }
.mag-1111-a { width: 257px; height: 200px; left: 376px; top: 3843px; }
.mag-222-a { width: 258px; height: 193px; left: 642px; top: 3847px; }
.mag-333-a { width: 258px; height: 194px; left: 907px; top: 3846px; }
.mag-44-a { width: 257px; height: 191px; left: 113px; top: 4084px; }
.mag-5555-a { width: 256px; height: 191px; left: 377px; top: 4084px; }
.mag-999-a { width: 259px; height: 195px; left: 641px; top: 4084px; }
.mag-888-a { width: 268px; height: 215px; left: 907px; top: 4084px; }

.spread-1111 { width: 663px; height: 561px; left: 0; top: 4374px; }
.spread-222-wide { width: 669px; height: 549px; left: 611px; top: 4374px; }
.spread-222-tall { width: 318px; height: 506px; left: 0; top: 4900px; }
.spread-333 { width: 694px; height: 522px; left: 293px; top: 4900px; }
.spread-44-right { width: 344px; height: 528px; left: 936px; top: 4894px; }
.spread-44-left { width: 318px; height: 515px; left: 0; top: 5397px; }
.spread-5555 { width: 706px; height: 528px; left: 287px; top: 5397px; }
.spread-999-side { width: 344px; height: 538px; left: 936px; top: 5397px; }
.spread-999-wide { width: 640px; height: 536px; left: 0; top: 5912px; }
.spread-888 { width: 666px; height: 577px; left: 614px; top: 5912px; }

.bottom-group {
  width: 1280px;
  height: 322px;
  left: 0;
  top: 6470px;
}

.bottom-group img {
  object-fit: fill;
  object-position: center center;
}

@media (max-width: 767px) {
  body.figma-click-body {
    min-height: auto;
    overflow-x: hidden;
  }

  .figma-click-frame {
    --click-mobile-inner: min(calc(100vw - 40px), 374px);
    --click-mobile-copy: min(calc(100vw - 80px), 334px);
    display: flex;
    width: 100vw;
    max-width: 100vw;
    height: auto;
    min-height: 100vh;
    flex-direction: column;
    gap: 0;
    padding: 22px 20px 96px;
    overflow: hidden;
    transform: none;
  }

  .figma-click-frame > * {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    min-width: 0;
  }

  .figma-click-frame p {
    flex: 0 1 auto;
    width: var(--click-mobile-copy) !important;
    inline-size: var(--click-mobile-copy) !important;
    max-inline-size: var(--click-mobile-copy) !important;
    min-width: 0;
    height: auto !important;
    max-width: var(--click-mobile-copy);
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    font-weight: 400;
  }

  .mobile-click-meta {
    order: 1;
    display: grid;
    grid-template-columns: 116px 1fr 124px;
    align-items: flex-start;
    column-gap: 12px;
    width: var(--click-mobile-inner);
    margin: 0 0 34px;
    font-family: var(--mono);
    font-size: 7px;
    line-height: 12px;
    color: #fff;
  }

  .mobile-click-meta span {
    display: block;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    white-space: nowrap;
  }

  .mobile-click-meta span:first-child {
    text-align: left;
  }

  .mobile-click-meta span:last-child {
    width: 124px;
    max-width: 124px;
    justify-self: end;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    overflow-wrap: normal;
  }

  .mobile-click-meta span:nth-child(2) {
    text-align: center;
  }

  .hero-logo {
    order: 2;
    width: min(86vw, 374px);
    height: calc(min(86vw, 374px) * 0.23415);
    aspect-ratio: 495.42 / 116;
    object-fit: contain;
    margin: 34px 0 48px;
  }

  .figma-meta {
    display: none;
  }

  .figma-year {
    display: none;
  }

  .figma-tagline {
    display: none !important;
    visibility: hidden !important;
  }

  .figma-label {
    margin: 0 0 12px;
    font-weight: 600;
    font-size: 11px;
    line-height: 18px;
    white-space: nowrap;
  }

  .figma-copy {
    font-weight: 400;
    font-size: 12.5px;
    line-height: 15.5px;
    text-align: left;
    max-width: var(--click-mobile-copy);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
  }

  .problem-label { order: 5; margin-top: 0; padding-top: 50px; }
  .problem-copy { order: 6; margin-bottom: 34px; }
  .insight-label { order: 7; margin-top: 0; padding-top: 50px; }
  .insight-copy { order: 8; margin-bottom: 50px; }

  .film-strip {
    order: 9;
    width: calc(100% + 520px);
    height: clamp(148px, 44vw, 210px);
    margin: 0 -260px 58px;
  }

  .figma-video video {
    object-fit: cover;
    object-position: center center;
  }

  .deco-star {
    display: none;
  }

  .essence-label { order: 10; margin-top: 0; padding-top: 50px; }
  .essence-copy { order: 11; margin-bottom: 44px; }
  .personality-label { order: 12; margin-bottom: 12px; padding-top: 50px; }

  .swatch-pill {
    order: 13;
    width: calc(50% - 6px);
    height: 24px;
    margin-bottom: 10px;
  }

  .swatch-black,
  .swatch-cream {
    align-self: flex-start;
  }

  .swatch-white,
  .swatch-rust {
    align-self: flex-end;
    margin-top: -34px;
  }

  .swatch-rust {
    margin-bottom: 50px;
  }

  .brand-photo {
    order: 14;
    width: 100%;
    height: auto;
    aspect-ratio: 505 / 188;
    margin-bottom: 48px;
  }

  .brand-photo img {
    object-fit: cover;
  }

  .naming-label { order: 15; margin-top: 0; padding-top: 50px; }
  .naming-copy { order: 16; margin-bottom: 36px; }
  .logo-label { order: 17; margin-top: 0; padding-top: 50px; }
  .logo-copy { order: 18; margin-bottom: 42px; }

  .logo-sample-light {
    order: 19;
    width: min(28vw, 104px);
    height: auto;
    aspect-ratio: 1236 / 1170;
    align-self: center;
    margin-bottom: 42px;
  }

  .logo-sample-light img {
    object-fit: contain;
  }

  .logo-fire {
    order: 20;
    width: calc(100% + 40px);
    height: auto;
    aspect-ratio: 566 / 163;
    margin: 0 -20px 50px;
  }

  .logo-fire img {
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center center;
    transform: none;
  }

  .signboard {
    order: 21;
    width: calc(100% + 40px);
    height: auto;
    aspect-ratio: 1134 / 636;
    margin: 0 -20px 58px;
  }

  .signboard img {
    object-fit: contain;
  }

  .merchandise-label { order: 22; margin-bottom: 12px; padding-top: 50px; }
  .tshirt-front {
    order: 23;
    width: 56%;
    height: auto;
    aspect-ratio: 278 / 253;
    align-self: flex-start;
    margin: 18px 0 0 8%;
  }

  .tshirt-back {
    order: 24;
    width: 58%;
    height: auto;
    aspect-ratio: 285 / 260;
    align-self: flex-end;
    margin: -44px 4% 50px 0;
  }

  .merch-photo {
    order: 25;
    width: calc(100% + 40px);
    height: auto;
    aspect-ratio: 340 / 423;
    align-self: center;
    margin: 0 -20px 64px;
  }

  .merch-photo img {
    object-fit: cover;
    object-position: center center;
  }

  .posters-label { order: 26; margin-bottom: 12px; padding-top: 50px; }

  .poster-1,
  .poster-2,
  .poster-3 {
    width: min(76vw, 310px);
    height: auto;
    aspect-ratio: 290 / 405;
    align-self: center;
    margin-top: 0;
    margin-bottom: 24px;
  }

  .poster-1 { order: 27; }
  .poster-2 { order: 28; }
  .poster-3 { order: 29; margin-bottom: 64px; }

  .magazine-label { order: 30; margin-bottom: 12px; padding-top: 50px; }

  .magazine-pack-group {
    order: 31;
    width: calc(100% + 40px);
    height: clamp(250px, 70vw, 360px);
    margin: 0 -20px 34px;
  }

  .magazine-pack-group img {
    width: 150%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
  }

  .magazine-copy {
    order: 32;
    margin-bottom: 40px;
    font-size: 14px;
    line-height: 17px;
  }

  .mag-thumb {
    order: 33;
    width: calc(50% - 7px);
    height: auto;
    aspect-ratio: 257 / 195;
    margin-bottom: 20px;
  }

  .mag-thumb img {
    object-fit: contain;
  }

  .mag-000,
  .mag-222-a,
  .mag-44-a,
  .mag-888-a {
    align-self: flex-start;
  }

  .mag-1111-a,
  .mag-333-a,
  .mag-5555-a,
  .mag-999-a {
    align-self: flex-end;
    margin-top: calc((50vw - 27px) * -0.758 - 14px);
  }

  .mag-999-a {
    margin-bottom: 66px;
  }

  .spread {
    display: none;
  }

  .bottom-group {
    order: 34;
    width: calc(100% + 40px);
    height: clamp(210px, 58vw, 250px);
    margin: 0 -20px;
  }

  .bottom-group img {
    position: absolute;
    top: 0;
    left: 50%;
    width: clamp(900px, 222vw, 940px);
    max-width: none;
    height: auto;
    object-fit: contain;
    object-position: center top;
    transform: translateX(-50%);
  }

  .problem-copy {
    margin-bottom: 46px !important;
  }

  .insight-label {
    margin-top: 0 !important;
  }

  .insight-copy {
    margin-bottom: 68px !important;
  }

  .film-strip {
    margin-bottom: 74px !important;
  }

  .essence-copy {
    margin-bottom: 56px !important;
  }

  .personality-label {
    margin-bottom: 20px !important;
  }

  .swatch-rust {
    margin-bottom: 66px !important;
  }

  .brand-photo {
    margin-bottom: 66px !important;
  }

  .naming-copy {
    margin-bottom: 46px !important;
  }

  .logo-label {
    margin-top: 8px !important;
  }

  .logo-copy {
    margin-bottom: 58px !important;
  }

  .logo-sample-light {
    margin-bottom: 56px !important;
  }

  .logo-fire {
    margin-bottom: 72px !important;
  }

  .signboard {
    margin-bottom: 78px !important;
  }

  .merchandise-label {
    margin-bottom: 34px !important;
  }

  .tshirt-back {
    margin-bottom: 66px !important;
  }

  .merch-photo {
    margin-bottom: 82px !important;
  }

  .posters-label {
    margin-bottom: 34px !important;
  }

  .poster-1,
  .poster-2 {
    margin-bottom: 34px !important;
  }

  .poster-3 {
    margin-bottom: 84px !important;
  }

  .magazine-label {
    margin-bottom: 32px !important;
  }

  .magazine-pack-group {
    margin-bottom: 46px !important;
  }

  .magazine-copy {
    margin-bottom: 56px !important;
  }

  .mag-thumb {
    margin-bottom: 28px !important;
  }

  .mag-999-a {
    margin-bottom: 82px !important;
  }
}

@media (max-width: 767px) {
  body.playground-page .site-logo,
  body.water-figma-page .site-logo,
  body.newgen-page .site-logo,
  body.click-page .site-logo,
  body.wake-page .site-logo,
  body.home-page .site-logo {
    position: absolute !important;
    top: var(--project-mobile-pad);
    left: var(--project-mobile-pad);
    width: 15em;
    font-size: 9px;
    line-height: 1.33;
    clip-path: inset(0 calc(100% - 6.05em) 0 0);
  }

  body.playground-page .site-logo:hover,
  body.playground-page .site-logo:focus-visible,
  body.playground-page .site-logo:active,
  body.water-figma-page .site-logo:hover,
  body.water-figma-page .site-logo:focus-visible,
  body.water-figma-page .site-logo:active,
  body.newgen-page .site-logo:hover,
  body.newgen-page .site-logo:focus-visible,
  body.newgen-page .site-logo:active,
  body.click-page .site-logo:hover,
  body.click-page .site-logo:focus-visible,
  body.click-page .site-logo:active,
  body.wake-page .site-logo:hover,
  body.wake-page .site-logo:focus-visible,
  body.wake-page .site-logo:active,
  body.home-page .site-logo:hover,
  body.home-page .site-logo:focus-visible,
  body.home-page .site-logo:active {
    clip-path: inset(0);
  }

  body.playground-page .site-logo:hover .site-logo-track,
  body.playground-page .site-logo:focus-visible .site-logo-track,
  body.playground-page .site-logo:active .site-logo-track,
  body.water-figma-page .site-logo:hover .site-logo-track,
  body.water-figma-page .site-logo:focus-visible .site-logo-track,
  body.water-figma-page .site-logo:active .site-logo-track,
  body.newgen-page .site-logo:hover .site-logo-track,
  body.newgen-page .site-logo:focus-visible .site-logo-track,
  body.newgen-page .site-logo:active .site-logo-track,
  body.click-page .site-logo:hover .site-logo-track,
  body.click-page .site-logo:focus-visible .site-logo-track,
  body.click-page .site-logo:active .site-logo-track,
  body.wake-page .site-logo:hover .site-logo-track,
  body.wake-page .site-logo:focus-visible .site-logo-track,
  body.wake-page .site-logo:active .site-logo-track,
  body.home-page .site-logo:hover .site-logo-track,
  body.home-page .site-logo:focus-visible .site-logo-track,
  body.home-page .site-logo:active .site-logo-track {
    transform: translate3d(-1.68em, 0, 0);
  }

  body.playground-page .site-logo,
  body.newgen-page .site-logo,
  body.click-page .site-logo,
  body.wake-page .site-logo,
  body.home-page .site-logo {
    color: #fff;
  }

  body.water-figma-page .site-logo {
    color: #000;
  }

  .playground-shell {
    padding: 86px var(--project-mobile-pad) 44px;
  }

  .playground-stage,
  .playground-switch,
  .playground-video-wrap,
  .playground-copy {
    width: var(--project-mobile-copy);
    max-width: var(--project-mobile-copy);
  }

  .playground-copy h2 {
    margin-bottom: 12px;
    font-size: 22px;
    line-height: 1.08;
  }

  .playground-copy p,
  .figma-copy,
  .water-problem-text,
  .water-solution-text,
  .ng-copy,
  .ng-lore-copy,
  .ng-character-copy,
  body.wake-page .wake-copy {
    font-size: 13px !important;
    line-height: 18px !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  .playground-credit,
  .figma-label,
  .figma-meta,
  .figma-year,
  .figma-tagline,
  .mobile-click-meta,
  .water-label,
  .water-meta,
  .water-year,
  .water-descriptor,
  .water-source,
  .ng-meta,
  .ng-small-heading,
  .ng-subheading,
  .ng-label-faded,
  .ng-mini-heading,
  .ng-caption,
  body.wake-page .wake-label,
  body.wake-page .wake-meta,
  body.wake-page .wake-ai-note {
    font-family: "Roboto Mono", var(--mono) !important;
  }

  .ng-small-heading,
  .ng-subheading,
  .figma-label,
  .water-label,
  body.wake-page .wake-label {
    margin-bottom: 12px;
    font-size: 11px !important;
    line-height: 18px !important;
  }

  .figma-click-frame {
    --click-mobile-inner: var(--project-mobile-copy);
    --click-mobile-copy: var(--project-mobile-copy);
    padding: 86px var(--project-mobile-pad) 96px;
  }

  .figma-click-frame p {
    width: var(--click-mobile-copy) !important;
    max-width: var(--click-mobile-copy) !important;
    inline-size: var(--click-mobile-copy) !important;
    max-inline-size: var(--click-mobile-copy) !important;
    align-self: flex-start;
  }

  .mobile-click-meta {
    grid-template-columns: 116px 1fr 124px;
    width: var(--click-mobile-inner);
    margin-bottom: 34px;
  }

  .hero-logo {
    width: var(--project-mobile-copy);
    height: auto;
    margin-top: 34px;
  }

  .film-strip,
  .logo-fire,
  .signboard,
  .merch-photo,
  .magazine-pack-group,
  .bottom-group {
    width: calc(100% + (var(--project-mobile-pad) * 2));
    margin-right: calc(var(--project-mobile-pad) * -1);
    margin-left: calc(var(--project-mobile-pad) * -1);
  }

  .water-artboard {
    --mobile-pad: var(--project-mobile-pad);
    padding-top: 86px;
    padding-right: var(--project-mobile-pad);
    padding-left: var(--project-mobile-pad);
  }

  .water-meta {
    left: var(--project-mobile-pad) !important;
    top: 86px !important;
  }

  .water-artboard > .water-year {
    left: var(--project-mobile-pad) !important;
    top: 112px !important;
  }

  .water-artboard > .water-descriptor {
    right: var(--project-mobile-pad) !important;
    inset-inline-end: var(--project-mobile-pad) !important;
    top: 86px !important;
    width: 130px !important;
    max-width: 130px !important;
  }

  .water-artboard .water-mobile-title {
    margin-top: 76px;
    white-space: normal;
  }

  .water-mobile-subtitle {
    white-space: normal;
  }

  .water-mobile-title br,
  .water-mobile-subtitle br {
    display: block;
  }

  .water-problem-text,
  .water-solution-text {
    width: var(--project-mobile-copy) !important;
    max-width: var(--project-mobile-copy) !important;
    inline-size: var(--project-mobile-copy) !important;
    max-inline-size: var(--project-mobile-copy) !important;
  }

  .newgen-artboard {
    --newgen-mobile-pad: var(--project-mobile-pad);
    padding-right: var(--project-mobile-pad);
    padding-left: var(--project-mobile-pad);
  }

  .newgen-artboard p:not(.ng-meta),
  .newgen-artboard h2 {
    width: var(--project-mobile-copy) !important;
    max-width: var(--project-mobile-copy);
    overflow-wrap: break-word;
    white-space: normal;
  }

  .ng-question {
    width: var(--project-mobile-copy) !important;
    max-width: var(--project-mobile-copy) !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  .ng-mobile-meta-type {
    left: var(--project-mobile-pad);
    top: 64px;
  }

  .ng-mobile-meta-year {
    top: 64px;
  }

  .ng-mobile-meta-descriptor {
    right: var(--project-mobile-pad);
    width: 130px;
    white-space: normal;
  }

  .ng-mobile-meta-ai {
    right: var(--project-mobile-pad);
    width: 130px;
    white-space: normal;
  }

  .ng-title {
    left: var(--project-mobile-pad) !important;
  }
}

@media (max-width: 767px) {
  body.click-page .figma-click-frame {
    --click-mobile-inner: 100%;
    --click-mobile-copy: 100%;
    width: 100%;
    max-width: 100%;
    padding-top: 48px;
  }

  body.click-page .mobile-click-meta {
    position: relative !important;
    display: block;
    width: var(--click-mobile-inner);
    max-width: var(--click-mobile-inner);
    height: 42px;
    margin-bottom: 22px;
    transform: translateY(16px);
  }

  body.click-page .mobile-click-meta span {
    position: absolute;
    top: 0;
  }

  body.click-page .mobile-click-meta span:first-child {
    left: 0;
    width: 118px;
    text-align: left;
  }

  body.click-page .mobile-click-meta span:nth-child(2) {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }

  body.click-page .mobile-click-meta span:last-child {
    width: min(128px, 35vw);
    max-width: min(128px, 35vw);
    right: 0;
    text-align: right;
  }

  body.click-page .hero-logo {
    width: var(--click-mobile-inner);
    max-width: var(--click-mobile-inner);
    height: auto;
    margin-top: 22px;
  }

  body.click-page .figma-click-frame p {
    width: var(--click-mobile-copy) !important;
    max-width: var(--click-mobile-copy) !important;
    inline-size: var(--click-mobile-copy) !important;
    max-inline-size: var(--click-mobile-copy) !important;
  }

  body.click-page .mag-thumb {
    width: calc((100% - 14px) / 2);
    margin-bottom: 28px !important;
  }

  body.click-page .mag-1111-a,
  body.click-page .mag-333-a,
  body.click-page .mag-5555-a,
  body.click-page .mag-999-a {
    margin-top: calc(-37.94vw) !important;
  }
}

@media (max-width: 767px) {
  body.water-figma-page .water-artboard {
    --mobile-pad: var(--project-mobile-pad);
    --water-mobile-inner: calc(100dvw - (var(--project-mobile-pad) * 2));
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
    padding-top: 48px;
    padding-right: var(--project-mobile-pad);
    padding-left: var(--project-mobile-pad);
  }

  body.water-figma-page .water-problem-text,
  body.water-figma-page .water-solution-text,
  body.water-figma-page .water-source {
    width: var(--water-mobile-inner) !important;
    max-width: var(--water-mobile-inner) !important;
    inline-size: var(--water-mobile-inner) !important;
    max-inline-size: var(--water-mobile-inner) !important;
  }

  body.water-figma-page .water-meta {
    left: var(--project-mobile-pad) !important;
  }

  body.water-figma-page .water-artboard > .water-descriptor {
    right: var(--project-mobile-pad) !important;
    width: min(148px, 40vw) !important;
    max-width: min(148px, 40vw) !important;
    text-align: right !important;
  }

  body.water-figma-page .water-artboard > .water-year {
    left: var(--project-mobile-pad) !important;
  }

  body.water-figma-page .water-w1-small,
  body.water-figma-page .water-w2-small,
  body.water-figma-page .water-w3-small,
  body.water-figma-page .water-w4-small,
  body.water-figma-page .water-w5-small {
    width: 100%;
  }

  body.water-figma-page .water-w1-large,
  body.water-figma-page .water-w2-left,
  body.water-figma-page .water-w2-right,
  body.water-figma-page .water-w3-large,
  body.water-figma-page .water-w4-large,
  body.water-figma-page .water-w5-large,
  body.water-figma-page .water-final-spread {
    width: 100%;
    max-width: 100%;
  }

  body.water-figma-page .water-floating-magazine {
    width: 100dvw;
    max-width: none;
    margin-right: calc(var(--project-mobile-pad) * -1);
    margin-left: calc(var(--project-mobile-pad) * -1);
  }

  body.water-figma-page .water-meta {
    display: none;
  }

  body.water-figma-page .water-artboard > .water-year {
    display: none;
  }

  body.water-figma-page .water-artboard > .water-descriptor {
    display: none;
  }

  body.water-figma-page .water-mobile-meta {
    position: absolute;
    z-index: 3;
    top: 64px;
    left: 0;
    right: auto;
    display: block;
    width: 100vw !important;
    max-width: none !important;
    height: 42px;
    margin: 0;
    color: #000;
    font-family: "Roboto Mono", var(--mono);
    font-size: 7px;
    font-weight: 400;
    line-height: 12px;
  }

  body.water-figma-page .water-mobile-meta span {
    position: absolute;
    top: 0;
    display: block;
    color: inherit;
    font: inherit;
    letter-spacing: 0;
    white-space: normal;
  }

  body.water-figma-page .water-mobile-meta span:first-child {
    left: var(--project-mobile-pad);
    width: 118px;
    text-align: left;
  }

  body.water-figma-page .water-mobile-meta span:nth-child(2) {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
  }

  body.water-figma-page .water-mobile-meta span:last-child {
    left: auto;
    right: var(--project-mobile-pad);
    width: 128px !important;
    max-width: 128px !important;
    text-align: right;
    transform: none;
  }

  body.water-figma-page .water-problem-text,
  body.water-figma-page .water-solution-text {
    justify-self: start;
    overflow: visible;
  }

  body.water-figma-page .water-spread-carousel {
    display: flex;
    order: 19;
    grid-column: 1 / -1;
    width: 100dvw;
    min-width: 0;
    gap: 16px;
    margin: 18px calc(var(--project-mobile-pad) * -1) 0;
    padding: 0 var(--project-mobile-pad) 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: var(--project-mobile-pad);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.water-figma-page .water-spread-carousel::-webkit-scrollbar {
    display: none;
  }

  body.water-figma-page .water-spread-carousel > .water-image {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    flex: 0 0 calc(var(--water-mobile-inner) - 32px);
    width: calc(var(--water-mobile-inner) - 32px);
    max-width: calc(var(--water-mobile-inner) - 32px);
    aspect-ratio: 1.28 / 1;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.water-figma-page .water-spread-carousel > .water-image img {
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
  }

  body.water-figma-page .water-spread-carousel + .mobile-carousel-dots {
    order: 20;
    grid-column: 1 / -1;
    margin: 2px 0 56px;
  }

  body.newgen-page .newgen-artboard {
    --newgen-mobile-pad: var(--project-mobile-pad);
    --newgen-mobile-inner: calc(100dvw - (var(--project-mobile-pad) * 2));
    width: 100%;
    max-width: 100%;
    padding-right: var(--project-mobile-pad);
    padding-left: var(--project-mobile-pad);
  }

  body.newgen-page .newgen-artboard p:not(.ng-meta),
  body.newgen-page .newgen-artboard h2,
  body.newgen-page .ng-question {
    width: var(--newgen-mobile-inner) !important;
    max-width: var(--newgen-mobile-inner) !important;
    inline-size: var(--newgen-mobile-inner) !important;
    max-inline-size: var(--newgen-mobile-inner) !important;
  }

  body.newgen-page .ng-hero-bg,
  body.newgen-page .ng-giltex-wide,
  body.newgen-page .ng-xargard-wide,
  body.newgen-page .ng-prototype-hero,
  body.newgen-page .ng-prototype-wide-1,
  body.newgen-page .ng-prototype-wide-2,
  body.newgen-page .ng-prototype-wide-3 {
    width: 100dvw !important;
    max-width: none;
    margin-right: calc(var(--project-mobile-pad) * -1);
    margin-left: calc(var(--project-mobile-pad) * -1);
  }

  body.newgen-page .ng-media:not(.ng-hero-bg):not(.ng-gameplay-gun):not(.ng-about-icons),
  body.newgen-page .ng-gameplay-switcher {
    width: var(--newgen-mobile-inner) !important;
    max-width: var(--newgen-mobile-inner);
  }

  body.newgen-page .ng-mobile-hero-meta {
    width: 100% !important;
  }

  body.newgen-page .ng-mobile-meta-type {
    left: var(--project-mobile-pad);
  }

  body.newgen-page .ng-mobile-meta-year {
    left: 50%;
    transform: translateX(-50%);
  }

  body.newgen-page .ng-mobile-meta-descriptor,
  body.newgen-page .ng-mobile-meta-ai {
    right: var(--project-mobile-pad);
    width: min(150px, 38vw);
    max-width: min(150px, 38vw);
    text-align: right;
  }

  body.newgen-page .ng-mobile-tag-row {
    width: 100%;
    padding: 0;
  }
}

@media (max-width: 767px) {
  body.newgen-page {
    --newgen-mobile-pad: var(--project-mobile-pad);
    --newgen-mobile-inner: calc(100dvw - (var(--project-mobile-pad) * 2));
    --newgen-mobile-axis: var(--project-mobile-pad);
    overflow-x: hidden;
  }

  body.newgen-page .newgen-stage,
  body.newgen-page .newgen-artboard {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body.newgen-page .newgen-artboard {
    padding: 0 var(--newgen-mobile-axis) 88px;
  }

  body.newgen-page .newgen-artboard p:not(.ng-meta),
  body.newgen-page .newgen-artboard h2,
  body.newgen-page .ng-question,
  body.newgen-page .ng-gameplay-switcher {
    width: var(--newgen-mobile-inner) !important;
    max-width: var(--newgen-mobile-inner) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-self: start;
  }

  body.newgen-page .newgen-artboard > .ng-meta {
    display: none;
  }

  body.newgen-page .ng-hero-bg {
    width: 100dvw !important;
    max-width: none !important;
    height: 411px !important;
    margin: 0 calc(var(--project-mobile-pad) * -1) 0 !important;
    background-position: center top;
    background-size: cover;
  }

  body.newgen-page .newgen-artboard > .ng-mobile-hero-meta {
    display: none !important;
  }

  body.newgen-page > .ng-page-mobile-hero-meta {
    position: absolute !important;
    z-index: 1001;
    top: 64px !important;
    left: 0 !important;
    right: auto !important;
    display: block !important;
    width: 100dvw !important;
    height: 330px;
    pointer-events: none;
    transform: none !important;
  }

  body.newgen-page > .ng-page-mobile-hero-meta span {
    position: absolute;
    display: block;
    color: #fff;
    font-family: "Roboto Mono", var(--mono);
    font-size: 7px;
    font-weight: 400;
    line-height: 12px;
  }

  body.newgen-page > .ng-page-mobile-hero-meta .ng-mobile-meta-type {
    top: 0 !important;
    left: var(--newgen-mobile-axis) !important;
    width: 118px;
    text-align: left;
  }

  body.newgen-page > .ng-page-mobile-hero-meta .ng-mobile-meta-year {
    top: 0 !important;
    left: 50% !important;
    width: auto;
    transform: translateX(-50%) !important;
    text-align: center;
  }

  body.newgen-page > .ng-page-mobile-hero-meta .ng-mobile-meta-descriptor {
    top: 0 !important;
    right: var(--project-mobile-pad) !important;
    left: auto !important;
    width: min(160px, 42vw);
    max-width: min(160px, 42vw);
    text-align: right;
    white-space: normal;
  }

  body.newgen-page > .ng-page-mobile-hero-meta .ng-mobile-meta-ai {
    top: 318px !important;
    left: var(--newgen-mobile-axis) !important;
    right: auto !important;
    width: min(150px, 38vw);
    max-width: min(150px, 38vw);
    text-align: left;
    white-space: normal;
  }

  body.newgen-page .newgen-artboard > .ng-title {
    top: 145px !important;
    left: calc(var(--newgen-mobile-axis) - 34px) !important;
    width: var(--newgen-mobile-inner) !important;
    margin: 0 !important;
    font-size: clamp(48px, 14vw, 60px);
    line-height: 0.94;
    justify-self: start;
    text-align: left;
    white-space: nowrap;
    transform: none !important;
  }

  body.newgen-page .ng-lead,
  body.newgen-page .ng-copy,
  body.newgen-page .ng-lore-copy,
  body.newgen-page .ng-character-copy,
  body.newgen-page .ng-gameplay-summary,
  body.newgen-page .ng-gameplay-card .ng-mini-copy,
  body.newgen-page .ng-gameplay-row .ng-mini-copy,
  body.newgen-page .ng-gameplay-panel.is-beta .ng-mini-copy {
    font-size: 13px !important;
    line-height: 18px !important;
    text-align: left !important;
  }

  body.newgen-page .ng-lead {
    margin-top: 26px !important;
    margin-bottom: 74px !important;
    padding: 0 !important;
  }

  body.newgen-page .ng-lead-closer {
    display: block;
    margin-top: 22px;
    font-weight: 700;
  }

  body.newgen-page .ng-small-heading,
  body.newgen-page .ng-subheading,
  body.newgen-page .ng-caption,
  body.newgen-page .ng-label-faded,
  body.newgen-page .ng-mini-heading {
    font-family: "Roboto Mono", var(--mono) !important;
    font-size: 11px !important;
    line-height: 18px !important;
  }

  body.newgen-page .ng-small-heading,
  body.newgen-page .ng-subheading {
    margin-top: 37px !important;
    margin-bottom: 12px !important;
  }

  body.newgen-page .ng-about-heading,
  body.newgen-page .ng-about-copy {
    margin-top: 0 !important;
    padding: 0 !important;
  }

  body.newgen-page .ng-section-title {
    margin-top: 64px !important;
    margin-bottom: 8px !important;
    font-size: clamp(30px, 8vw, 42px) !important;
    line-height: 0.98 !important;
    white-space: normal !important;
  }

  body.newgen-page .ng-section-title + .ng-subheading {
    margin-top: 12px !important;
  }

  body.newgen-page .ng-question {
    margin-top: 72px !important;
    margin-bottom: 0 !important;
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.14 !important;
  }

  body.newgen-page .ng-mobile-tag-row {
    width: var(--newgen-mobile-inner) !important;
    max-width: var(--newgen-mobile-inner) !important;
    gap: 6px;
    margin: 28px 0 64px !important;
    padding: 3px 6px 3px 0 !important;
    overflow: visible;
    scrollbar-width: none;
  }

  body.newgen-page .ng-mobile-tag-row::-webkit-scrollbar {
    display: none;
  }

  body.newgen-page .ng-mobile-tag-row span {
    box-sizing: border-box;
    min-height: 22px;
    height: auto;
    padding: 3px 9px 4px;
    font-size: 10px;
    line-height: 13px;
  }

  body.newgen-page .ng-mobile-tag-row span:last-child {
    margin-right: 6px;
  }

  body.newgen-page .ng-gameplay-switcher {
    left: 0 !important;
    right: auto !important;
    width: calc(100dvw - (var(--project-mobile-pad) * 2)) !important;
    max-width: calc(100dvw - (var(--project-mobile-pad) * 2)) !important;
    margin-top: 20px !important;
    margin-bottom: 0 !important;
    transform: none !important;
    box-sizing: border-box;
  }

  body.newgen-page .ng-gameplay-tabs {
    width: 100% !important;
    max-width: 100% !important;
    height: 50px !important;
  }

  body.newgen-page .ng-gameplay-tab {
    gap: 8px;
  }

  body.newgen-page .ng-gameplay-script {
    font-family: var(--newgen-sans) !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }

  body.newgen-page .ng-gameplay-player {
    font-size: 13px !important;
    line-height: 18px !important;
  }

  body.newgen-page .ng-gameplay-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 270px !important;
    min-height: 270px !important;
    box-sizing: border-box;
  }

  body.newgen-page .ng-gameplay-card p {
    width: min(100%, calc(100dvw - 104px)) !important;
    max-width: min(100%, calc(100dvw - 104px)) !important;
    inline-size: min(100%, calc(100dvw - 104px)) !important;
    max-inline-size: min(100%, calc(100dvw - 104px)) !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  body.newgen-page .ng-gameplay-panel {
    display: block !important;
    padding: 28px 22px !important;
    opacity: 0;
    pointer-events: none;
    filter: blur(3px);
    transition:
      opacity 220ms ease,
      filter 220ms ease;
  }

  body.newgen-page .ng-gameplay-switcher[data-mode="alpha"] .ng-gameplay-panel.is-alpha,
  body.newgen-page .ng-gameplay-switcher[data-mode="beta"] .ng-gameplay-panel.is-beta {
    opacity: 1;
    pointer-events: auto;
    filter: blur(0);
  }

  body.newgen-page .ng-gameplay-row {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px;
    align-items: baseline;
    margin-top: 0;
  }

  body.newgen-page .ng-gameplay-mechanics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 5vw, 74px);
  }

  body.newgen-page .ng-gameplay-panel.is-beta .ng-gameplay-mechanics {
    display: block;
  }

  body.newgen-page .ng-gameplay-summary,
  body.newgen-page .ng-gameplay-panel.is-beta .ng-gameplay-summary {
    max-width: none;
    margin-bottom: 16px;
    font-size: 12px !important;
    line-height: 16px !important;
  }

  body.newgen-page .ng-gameplay-panel.is-alpha .ng-gameplay-summary {
    margin-bottom: 28px;
  }

  body.newgen-page .ng-gameplay-card .ng-label-faded {
    margin: 0 0 2px;
    font-size: 7.5px !important;
    line-height: 9px !important;
  }

  body.newgen-page .ng-gameplay-card .ng-mini-heading {
    font-size: 12px !important;
    line-height: 15px !important;
  }

  body.newgen-page .ng-gameplay-card .ng-mini-copy,
  body.newgen-page .ng-gameplay-row .ng-mini-copy,
  body.newgen-page .ng-gameplay-panel.is-beta .ng-mini-copy {
    font-size: 9.5px !important;
    line-height: 12px !important;
  }

  body.newgen-page .ng-media:not(.ng-hero-bg):not(.ng-gameplay-gun):not(.ng-about-icons) {
    width: var(--newgen-mobile-inner) !important;
    max-width: var(--newgen-mobile-inner) !important;
    margin-top: 24px;
  }

  body.newgen-page .ng-final-bot {
    width: min(23.333vw, 104px) !important;
    max-width: min(23.333vw, 104px) !important;
    height: auto !important;
    aspect-ratio: 312 / 535;
    justify-self: center;
    background-size: contain;
  }

  body.newgen-page .ng-character-group,
  body.newgen-page .ng-giltex-people,
  body.newgen-page .ng-xargard-people {
    width: calc(var(--newgen-mobile-inner) + var(--project-mobile-pad)) !important;
    max-width: calc(var(--newgen-mobile-inner) + var(--project-mobile-pad)) !important;
    justify-self: start;
  }

  body.newgen-page .ng-giltex-wide,
  body.newgen-page .ng-xargard-wide {
    width: 100dvw !important;
    max-width: none !important;
    margin-right: calc(var(--project-mobile-pad) * -1) !important;
    margin-left: calc(var(--project-mobile-pad) * -1) !important;
  }

  body.newgen-page .ng-world-carousel,
  body.newgen-page .ng-prototype-carousel,
  body.newgen-page .ng-strategy-carousel {
    display: flex;
    width: 100dvw;
    min-width: 0;
    gap: 16px;
    margin: 8px calc(var(--project-mobile-pad) * -1) 0;
    padding: 0 var(--project-mobile-pad) 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: var(--project-mobile-pad);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.newgen-page .ng-prototype-carousel {
    margin-bottom: 0 !important;
  }

  body.newgen-page .ng-world-carousel + .mobile-carousel-dots,
  body.newgen-page .ng-prototype-carousel + .mobile-carousel-dots,
  body.newgen-page .ng-strategy-carousel + .mobile-carousel-dots {
    margin: 2px 0 66px;
  }

  body.newgen-page .ng-prototype-carousel + .mobile-carousel-dots {
    margin-bottom: 78px;
  }

  body.newgen-page .ng-world-carousel::-webkit-scrollbar,
  body.newgen-page .ng-prototype-carousel::-webkit-scrollbar,
  body.newgen-page .ng-strategy-carousel::-webkit-scrollbar {
    display: none;
  }

  body.newgen-page .ng-world-carousel > .ng-media,
  body.newgen-page .ng-prototype-carousel > .ng-media {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: 0 0 var(--newgen-mobile-inner);
    width: var(--newgen-mobile-inner) !important;
    max-width: var(--newgen-mobile-inner) !important;
    margin: 0 !important;
    aspect-ratio: 16 / 9;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.newgen-page .ng-world-carousel > .ng-giltex-wide,
  body.newgen-page .ng-world-carousel > .ng-xargard-wide {
    width: calc(var(--newgen-mobile-inner) + var(--project-mobile-pad)) !important;
    max-width: calc(var(--newgen-mobile-inner) + var(--project-mobile-pad)) !important;
    margin: 0 !important;
  }

  body.newgen-page .ng-strategy-slide {
    position: relative !important;
    display: block;
    flex: 0 0 calc(var(--newgen-mobile-inner) + var(--project-mobile-pad));
    width: calc(var(--newgen-mobile-inner) + var(--project-mobile-pad));
    max-width: calc(var(--newgen-mobile-inner) + var(--project-mobile-pad));
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.newgen-page .ng-strategy-slide .ng-caption {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    white-space: nowrap;
  }

  body.newgen-page .ng-strategy-slide .ng-media {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    aspect-ratio: 530 / 245;
    background-size: contain;
  }

  .mobile-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-height: 10px;
    pointer-events: none;
  }

  .mobile-carousel-dots span {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.26;
    transform: scale(1);
    transition:
      opacity 180ms ease,
      transform 180ms ease;
  }

  .mobile-carousel-dots span.is-active {
    opacity: 0.82;
    transform: scale(1.45);
  }

  body.newgen-page .mobile-carousel-dots {
    color: #fff;
  }

  body.water-figma-page .mobile-carousel-dots {
    color: #000;
  }
}

@media (max-width: 767px) {
  body.playground-page .site-logo,
  body.water-figma-page .site-logo,
  body.newgen-page .site-logo,
  body.click-page .site-logo,
  body.wake-page .site-logo,
  body.home-page .site-logo,
  body.playground-page .site-logo:hover,
  body.playground-page .site-logo:focus-visible,
  body.playground-page .site-logo:active,
  body.water-figma-page .site-logo:hover,
  body.water-figma-page .site-logo:focus-visible,
  body.water-figma-page .site-logo:active,
  body.newgen-page .site-logo:hover,
  body.newgen-page .site-logo:focus-visible,
  body.newgen-page .site-logo:active,
  body.click-page .site-logo:hover,
  body.click-page .site-logo:focus-visible,
  body.click-page .site-logo:active,
  body.wake-page .site-logo:hover,
  body.wake-page .site-logo:focus-visible,
  body.wake-page .site-logo:active,
  body.home-page .site-logo:hover,
  body.home-page .site-logo:focus-visible,
  body.home-page .site-logo:active {
    clip-path: inset(0 calc(100% - 6.05em) 0 0) !important;
    transition: none !important;
  }

  body.playground-page .site-logo .site-logo-track,
  body.water-figma-page .site-logo .site-logo-track,
  body.newgen-page .site-logo .site-logo-track,
  body.click-page .site-logo .site-logo-track,
  body.wake-page .site-logo .site-logo-track,
  body.home-page .site-logo .site-logo-track,
  body.playground-page .site-logo:hover .site-logo-track,
  body.playground-page .site-logo:focus-visible .site-logo-track,
  body.playground-page .site-logo:active .site-logo-track,
  body.water-figma-page .site-logo:hover .site-logo-track,
  body.water-figma-page .site-logo:focus-visible .site-logo-track,
  body.water-figma-page .site-logo:active .site-logo-track,
  body.newgen-page .site-logo:hover .site-logo-track,
  body.newgen-page .site-logo:focus-visible .site-logo-track,
  body.newgen-page .site-logo:active .site-logo-track,
  body.click-page .site-logo:hover .site-logo-track,
  body.click-page .site-logo:focus-visible .site-logo-track,
  body.click-page .site-logo:active .site-logo-track,
  body.wake-page .site-logo:hover .site-logo-track,
  body.wake-page .site-logo:focus-visible .site-logo-track,
  body.wake-page .site-logo:active .site-logo-track,
  body.home-page .site-logo:hover .site-logo-track,
  body.home-page .site-logo:focus-visible .site-logo-track,
  body.home-page .site-logo:active .site-logo-track {
    transform: none !important;
    transition: none !important;
  }

  body.click-page .figma-label {
    padding-top: 25px !important;
  }

  body.water-figma-page .water-spread-carousel > .water-w2-left {
    display: none !important;
  }
}