@font-face {
  font-family: "WenYue HouXianDaiTi";
  src: url("/fonts/WENYUE-HOUXIANDAITI-NC-W2-75-1.OTF") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root,
html {
  --font-wenyue: "WenYue HouXianDaiTi";
  --font-display: var(--font-wenyue) !important;
  --font-accent: var(--font-wenyue) !important;
  --font-label: var(--font-wenyue) !important;
  --font-body: var(--font-wenyue) !important;
  --font-cjk-serif: var(--font-wenyue) !important;
  --font-cjk-sans: var(--font-wenyue) !important;
  --type-display: var(--font-wenyue), serif;
  --type-body: var(--font-wenyue), sans-serif;
  --type-serif-cn: var(--font-wenyue), serif;
  --type-label: var(--font-wenyue), sans-serif;
  --type-accent: var(--font-wenyue), serif;
  --type-project-title: var(--font-wenyue), serif;
}

body,
body *,
body *::before,
body *::after {
  font-family: var(--font-wenyue), sans-serif !important;
}

.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.section-heading-wide {
  max-width: none !important;
}

.service-heading-title {
  font-size: 40px !important;
  white-space: nowrap;
}

.service-heading-compact {
  margin-top: clamp(20px, 2.6vw, 42px) !important;
  margin-bottom: 0 !important;
}

.method-current-title {
  font-size: 36px !important;
  white-space: nowrap;
}

.service-grid {
  grid-template-columns: minmax(448px, 1fr);
  width: max-content;
  min-width: min(100%, 448px);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  gap: 12px !important;
}

.service-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #060100 !important;
  padding-top: clamp(24px, 2.8vw, 44px) !important;
}

.service-section .studio-container {
  position: relative;
  z-index: 1;
  max-width: 1840px;
  overflow-x: auto;
  overflow-y: clip;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.service-section .studio-container::-webkit-scrollbar {
  display: none;
}

.service-bg-video {
  position: absolute;
  inset: -40px;
  z-index: -2;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  object-fit: cover;
  opacity: 0.34;
  filter: blur(9px) saturate(1.16) contrast(1.07) brightness(1.18);
  transform: scale(1.06);
  pointer-events: none;
}

.service-bg-mask {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      circle at left center,
      rgba(78, 16, 8, 0.34),
      transparent 58%
    ),
    linear-gradient(
      90deg,
      rgba(58, 8, 4, 0.32) 0%,
      rgba(34, 5, 3, 0.26) 32%,
      rgba(8, 1, 1, 0.28) 68%,
      rgba(18, 2, 2, 0.3) 100%
    );
}

.service-card-compact {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 18px;
  align-content: start;
  width: 448px;
  min-height: 188px !important;
  min-width: 0;
  padding: 18px 24px 16px !important;
}

.service-card-compact > span {
  grid-column: 1;
  grid-row: 1 / span 2;
  line-height: 0.95;
}

.service-card-compact h3 {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0 !important;
}

.service-card-compact p:first-of-type {
  grid-column: 2;
  grid-row: 2;
}

.service-card-compact p:last-child {
  grid-column: 1 / -1;
  grid-row: 3;
  width: 100%;
  max-width: none;
  margin-top: 18px !important;
  line-height: 1.35 !important;
  white-space: nowrap;
}

.service-process-visual {
  --poster-rotate-x: 0deg;
  --poster-rotate-y: 0deg;
  --poster-glow-x: 50%;
  --poster-glow-y: 50%;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  margin: clamp(24px, 2.6vw, 38px) auto 0;
  overflow: visible;
  perspective: 1600px;
  transform-origin: center center;
  opacity: 1;
  transform: none;
}

.service-process-visual[data-inview="true"] {
  animation: none;
}

.service-process-float {
  display: block;
  transform-style: preserve-3d;
  will-change: transform;
}

.service-process-visual[data-inview="true"] .service-process-float {
  animation: servicePosterBreath 7.8s ease-in-out 0.9s infinite alternate;
}

.service-process-poster-card {
  position: relative;
  display: block;
  overflow: hidden;
  border: 0;
  background: #050101;
  box-shadow:
    0 26px 90px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 190, 164, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  transform:
    rotateX(var(--poster-rotate-x))
    rotateY(var(--poster-rotate-y))
    translateZ(0);
  transform-style: preserve-3d;
  transition:
    transform 0.32s cubic-bezier(0.215, 0.61, 0.355, 1),
    box-shadow 0.42s ease,
    filter 0.42s ease;
  will-change: transform;
}

.service-process-visual:hover .service-process-poster-card {
  filter: brightness(1.035) contrast(1.02);
  box-shadow:
    0 34px 118px rgba(0, 0, 0, 0.58),
    0 0 52px rgba(205, 78, 62, 0.16),
    0 0 0 1px rgba(255, 210, 190, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.055);
}

.service-process-visual img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  filter: saturate(0.96) contrast(1.04) brightness(0.98);
  transform: translateZ(14px);
}

.service-process-poster-finish,
.service-process-title-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.service-process-poster-finish {
  background:
    radial-gradient(
      circle at var(--poster-glow-x) var(--poster-glow-y),
      rgba(255, 255, 255, 0.11),
      transparent 19%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 26%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(90deg, rgba(255, 210, 190, 0.045), transparent 36% 76%, rgba(205, 232, 238, 0.035));
  mix-blend-mode: screen;
  opacity: 0.5;
  transition: opacity 0.42s ease;
  transform: translateZ(22px);
}

.service-process-visual:hover .service-process-poster-finish {
  opacity: 0.72;
}

.service-process-title-sheen {
  left: 2.4%;
  top: 13.8%;
  right: 13%;
  bottom: 36.5%;
  overflow: hidden;
  opacity: 0.62;
  mix-blend-mode: screen;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0 6%, #000 13% 42%, transparent 51%, #000 57% 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0 6%, #000 13% 42%, transparent 51%, #000 57% 90%, transparent 100%);
  mask-composite: intersect;
  transform: translateZ(30px);
}

.service-process-title-sheen::before {
  content: "";
  position: absolute;
  top: -18%;
  bottom: -18%;
  left: -34%;
  width: 24%;
  background:
    linear-gradient(
      104deg,
      transparent 0%,
      rgba(255, 255, 255, 0.08) 18%,
      rgba(255, 255, 255, 0.78) 47%,
      rgba(181, 217, 225, 0.42) 58%,
      transparent 100%
    );
  filter: blur(4px);
  transform: translateX(0) skewX(-12deg);
  opacity: 0;
}

.service-process-visual[data-inview="true"] .service-process-title-sheen::before {
  animation: serviceTitleSheen 8.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1.4s infinite;
}

@keyframes servicePosterReveal {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes servicePosterBreath {
  0% {
    transform: translateY(-2px);
  }

  100% {
    transform: translateY(4px);
  }
}

@keyframes serviceTitleSheen {
  0%,
  28% {
    opacity: 0;
    transform: translateX(0) skewX(-12deg);
  }

  42% {
    opacity: 0.72;
  }

  64%,
  100% {
    opacity: 0;
    transform: translateX(560%) skewX(-12deg);
  }
}

.method-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #060100;
}

.method-bg-video {
  position: absolute;
  inset: -44px;
  z-index: -2;
  width: calc(100% + 88px);
  height: calc(100% + 88px);
  object-fit: cover;
  opacity: 0.38;
  filter: blur(10px) saturate(1.16) contrast(1.05) brightness(1.22);
  transform: scale(1.07);
  pointer-events: none;
}

.method-bg-mask {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      circle at left center,
      rgba(78, 16, 8, 0.24),
      transparent 60%
    ),
    radial-gradient(
      circle at 78% 72%,
      rgba(84, 10, 8, 0.08),
      transparent 42%
    ),
    linear-gradient(
      90deg,
      rgba(58, 8, 4, 0.34) 0%,
      rgba(34, 5, 3, 0.3) 32%,
      rgba(8, 1, 1, 0.36) 68%,
      rgba(0, 0, 0, 0.46) 100%
    );
}

.method-audio-hover-zone {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: min(52vw, 940px);
  height: min(58%, 520px);
  pointer-events: auto;
}

.method-content {
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .service-heading-title {
    font-size: 64px !important;
  }

  .method-current-title {
    font-size: 52px !important;
  }
}

@media (min-width: 960px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1880px) {
  .service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

.hero-cold-vignette {
  background:
    radial-gradient(circle at 74% 34%, rgba(132, 175, 190, 0.16), transparent 31%),
    radial-gradient(circle at 18% 82%, rgba(123, 16, 27, 0.34), transparent 36%),
    linear-gradient(90deg, rgba(3, 3, 4, 0.9), rgba(3, 3, 4, 0.2) 52%, rgba(3, 3, 4, 0.76)),
    linear-gradient(180deg, rgba(3, 3, 4, 0.12), #030304 92%);
}

.hero-glow-field {
  opacity: 0.86;
  filter: blur(6px);
  background:
    radial-gradient(ellipse at 66% 28%, rgba(177, 219, 224, 0.11), transparent 27%),
    radial-gradient(ellipse at 32% 68%, rgba(120, 13, 24, 0.18), transparent 31%),
    linear-gradient(115deg, transparent 0 42%, rgba(195, 225, 226, 0.045) 47%, transparent 54%);
}

.hero-contact-card {
  position: absolute;
  left: clamp(126px, 6.5vw, 140px);
  top: clamp(46px, 5.6svh, 58px);
  z-index: 45;
  display: grid;
  width: clamp(178px, 9.6vw, 208px);
  min-height: 0;
  align-content: start;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(212, 168, 106, 0.25);
  border-radius: 5px;
  padding: clamp(12px, 0.9vw, 15px) clamp(13px, 1vw, 16px) clamp(12px, 0.9vw, 15px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 34%, rgba(0, 0, 0, 0.18)),
    rgba(18, 8, 7, 0.36);
  box-shadow:
    0 18px 58px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(212, 168, 106, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, 0.82);
  isolation: isolate;
}

.hero-contact-card::before,
.hero-contact-card::after {
  content: none;
}

.hero-contact-card > * {
  position: relative;
  z-index: 1;
  font-family: inherit;
}

.hero-contact-label {
  font-size: clamp(7px, 0.4vw, 8px);
  line-height: 1.35;
  letter-spacing: 0.34em;
  color: rgba(212, 168, 106, 0.74);
}

.hero-contact-name {
  display: block;
  margin-top: clamp(8px, 0.58vw, 10px);
  font-family: var(--type-serif-cn);
  font-size: clamp(18px, 1.14vw, 23px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.84);
  white-space: nowrap;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
}

.hero-contact-rule {
  display: block;
  width: min(100%, 160px);
  height: 1px;
  margin: clamp(7px, 0.52vw, 9px) 0 clamp(7px, 0.48vw, 8px);
  background: linear-gradient(90deg, rgba(212, 168, 106, 0.54), rgba(212, 168, 106, 0.08) 86%, rgba(212, 168, 106, 0));
}

.hero-contact-status,
.hero-contact-phone {
  display: block;
  font-size: clamp(8px, 0.45vw, 9px);
  line-height: 1.42;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.58);
  text-decoration: none;
}

.hero-contact-phone {
  margin-top: 4px;
  letter-spacing: 0.18em;
  color: rgba(212, 168, 106, 0.74);
}

@media (max-width: 767px) {
  .hero-contact-card {
    left: max(12px, 3.8vw);
    top: max(34px, 7.2vw);
    width: min(31vw, 136px);
    padding: 8px 9px 9px;
    border-radius: 4px;
  }

  .hero-contact-label {
    font-size: 6px;
    letter-spacing: 0.26em;
  }

  .hero-contact-name {
    margin-top: 6px;
    font-size: clamp(12px, 3.2vw, 15px);
    letter-spacing: 0.12em;
  }

  .hero-contact-rule {
    margin: 6px 0;
  }

  .hero-contact-status,
  .hero-contact-phone {
    font-size: 7px;
    line-height: 1.35;
    letter-spacing: 0.08em;
  }
}

#top.hero {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  background: #030304 !important;
  transform: none !important;
}

#top.hero .hero-video {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

@media (min-width: 768px) {
  .site-nav {
    right: clamp(-460px, -22vw, -260px);
  }
}

.works-preview {
  --works-preview-module-width: clamp(286px, 17vw, 360px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: clamp(40px, 5.4vw, 86px) 0 clamp(42px, 5vw, 80px);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.works-preview::-webkit-scrollbar {
  display: none;
}

.works-preview-inner {
  width: min(calc(100vw - 44px - var(--works-preview-module-width) - 2px), 1638px);
  min-width: 0;
}

.works-preview-head {
  display: grid;
  gap: 12px;
  margin-bottom: clamp(22px, 2.8vw, 42px);
}

.works-preview-head p,
.works-preview-head span,
.works-preview-cta span {
  font-family: var(--type-label);
  font-size: 10px;
  letter-spacing: 0.32em;
}

.works-preview-head p {
  color: rgba(230, 194, 116, 0.68);
}

.works-preview-head span {
  color: rgba(255, 255, 255, 0.36);
  letter-spacing: 0.14em;
}

.works-preview-head h2 {
  font-family: var(--type-serif-cn);
  font-size: clamp(38px, 3.6vw, 68px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.94);
}

.works-preview-board {
  position: relative;
  width: 100%;
  isolation: isolate;
  perspective: 1400px;
  transform-style: preserve-3d;
  will-change: transform, translate;
}

.works-preview[data-inview="true"] .works-preview-board {
  animation: worksWallDrift 15s ease-in-out 1.1s infinite alternate;
}

.works-preview-entry {
  position: relative;
  will-change: opacity, transform;
}

.works-preview-board::before,
.works-preview-board::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.works-preview-board::before {
  inset: -8% -5%;
  z-index: 0;
  background:
    radial-gradient(circle at 14% 18%, rgba(200, 22, 29, 0.16), transparent 30%),
    radial-gradient(circle at 72% 32%, rgba(172, 220, 226, 0.1), transparent 28%),
    radial-gradient(circle at 52% 90%, rgba(230, 194, 116, 0.055), transparent 34%);
  filter: blur(28px);
  opacity: 0.46;
}

.works-preview[data-inview="true"] .works-preview-board::before {
  animation: worksGlowPulse 13s ease-in-out infinite alternate;
}

.works-preview-board::after {
  top: -14%;
  bottom: -14%;
  left: -38%;
  z-index: 1;
  width: 36%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.08) 48%, transparent 100%);
  filter: blur(18px);
  mix-blend-mode: screen;
  opacity: 0.18;
  transform: skewX(-12deg);
}

.works-preview[data-inview="true"] .works-preview-board::after {
  animation: worksLightSweep 19s cubic-bezier(0.215, 0.61, 0.355, 1) 1.6s infinite;
}

.works-preview-modules {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% + 2px);
  display: grid;
  width: var(--works-preview-module-width);
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  z-index: 2;
}

.works-preview-module-card {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 1.2vw, 22px);
  overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: clamp(22px, 2vw, 36px);
  background:
    radial-gradient(circle at 18% 20%, rgba(92, 15, 8, 0.34), transparent 32%),
    radial-gradient(circle at 42% 82%, rgba(56, 7, 4, 0.22), transparent 36%),
    linear-gradient(100deg, rgba(53, 8, 4, 0.96) 0%, rgba(22, 3, 2, 0.98) 42%, rgba(5, 3, 3, 0.99) 100%);
  color: rgba(255, 255, 255, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 0 46px rgba(0, 0, 0, 0.42);
  isolation: isolate;
  translate: 0 0;
  will-change: translate;
}

.works-preview[data-inview="true"] .works-preview-module-card {
  animation: worksModuleFloat 11.5s ease-in-out -1.2s infinite alternate;
}

.works-preview-module-card::before,
.works-preview-module-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.works-preview-module-card::before {
  background:
    linear-gradient(90deg, rgba(88, 12, 7, 0.16), transparent 34% 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 64px);
  opacity: 0.58;
}

.works-preview-module-card::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 18%, rgba(0, 0, 0, 0.36) 100%),
    linear-gradient(90deg, rgba(8, 0, 0, 0.16), transparent 22% 78%, rgba(0, 0, 0, 0.52));
}

.works-preview-module-card > * {
  position: relative;
  z-index: 1;
}

.works-preview-module-card:nth-child(2) {
  animation-delay: -4.6s;
  animation-duration: 13s;
}

.works-preview-module-card span {
  font-family: var(--type-label);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(230, 194, 116, 0.66);
}

.works-preview-module-card strong {
  font-family: var(--type-serif-cn);
  font-size: clamp(27px, 2.4vw, 46px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.95);
}

.works-preview-module-card p {
  max-width: 320px;
  font-size: 13px;
  line-height: 1.78;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.58);
}

.works-preview-module-copy {
  font-size: 16px !important;
  line-height: 1.72 !important;
}

.works-preview-nowrap {
  white-space: nowrap;
}

.works-preview-industries {
  display: grid;
  width: min(100%, 318px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: clamp(2px, 0.35vw, 8px) 0 0;
  padding: clamp(8px, 0.75vw, 12px) 0 0;
  border-top: 1px solid rgba(230, 194, 116, 0.16);
  list-style: none;
}

.works-preview-industries li {
  min-width: 0;
  padding: 6px 4px 7px;
  border: 1px solid rgba(230, 194, 116, 0.16);
  background: rgba(58, 9, 5, 0.34);
  color: rgba(230, 194, 116, 0.88);
  font-family: var(--type-serif-cn);
  font-size: clamp(15px, 0.92vw, 17px);
  line-height: 1.12;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.2);
}

.works-preview-module-card em {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--type-serif-cn);
  font-size: clamp(20px, 1.58vw, 29px);
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #f3d8a0;
}

.works-preview-grid {
  --works-preview-row: clamp(86px, 5.72vw, 114px);
  position: relative;
  z-index: 2;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  grid-auto-rows: var(--works-preview-row);
  grid-template-rows:
    repeat(8, var(--works-preview-row))
    repeat(3, calc(var(--works-preview-row) * 1.08))
    calc(var(--works-preview-row) * 1.872);
  grid-template-areas:
    "w01 w01 w01 w01 w01 w01 w01 w01 w01 w01 w03 w03 w03 w03 w03"
    "w01 w01 w01 w01 w01 w01 w01 w01 w01 w01 w03 w03 w03 w03 w03"
    "w01 w01 w01 w01 w01 w01 w01 w01 w01 w01 w03 w03 w03 w03 w03"
    "w01 w01 w01 w01 w01 w01 w01 w01 w01 w01 w03 w03 w03 w03 w03"
    "w02 w02 w02 w02 w02 w02 w02 w02 w02 w02 w04 w04 w04 w04 w04"
    "w02 w02 w02 w02 w02 w02 w02 w02 w02 w02 w04 w04 w04 w04 w04"
    "w02 w02 w02 w02 w02 w02 w02 w02 w02 w02 w04 w04 w04 w04 w04"
    "w02 w02 w02 w02 w02 w02 w02 w02 w02 w02 w04 w04 w04 w04 w04"
    "w05 w05 w05 w05 w05 w06 w06 w06 w06 w06 w07 w07 w07 w07 w07"
    "w05 w05 w05 w05 w05 w06 w06 w06 w06 w06 w07 w07 w07 w07 w07"
    "w05 w05 w05 w05 w05 w06 w06 w06 w06 w06 w07 w07 w07 w07 w07"
    "w08 w08 w08 w09 w09 w09 w10 w10 w10 w11 w11 w11 w12 w12 w12";
  gap: 2px;
  overflow: hidden;
  padding: 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 34px 130px rgba(0, 0, 0, 0.48),
    inset 0 0 0 1px rgba(255, 255, 255, 0.055);
}

.works-preview-tile {
  scale: 1;
  translate: 0 0;
  transform-origin: center center;
  transition:
    scale 0.64s cubic-bezier(0.215, 0.61, 0.355, 1),
    filter 0.46s ease,
    border-color 0.34s ease;
  will-change: translate, scale, filter;
}

.works-preview[data-inview="true"] .works-preview-tile {
  animation: worksTileFloat var(--float-duration, 10.8s) ease-in-out var(--float-delay, 0s) infinite alternate;
}

.works-preview-tile img,
.works-preview-tile video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  background: #050505;
  filter: brightness(0.88) saturate(0.85);
  transition:
    filter 0.55s ease,
    transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.works-preview-tile video {
  pointer-events: none;
}

.works-preview-media-strip {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(104px, 0.38fr);
  gap: 2px;
  background: #050505;
}

.works-preview-media-strip img {
  min-width: 0;
}

.works-preview-media-strip--duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.works-preview-tile--duo .works-preview-media-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.works-preview-tile--duo .works-preview-companion-image {
  object-fit: contain;
  object-position: center center;
  background: #050505;
}

.works-preview-desman-feature {
  display: block;
}

.works-preview-desman-case {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
}

.works-preview-tile--lead {
  border-color: rgba(230, 194, 116, 0.2);
}

.works-preview-tile:hover img,
.works-preview-tile:focus-visible img,
.works-preview-tile:hover video,
.works-preview-tile:focus-visible video {
  transform: none;
  filter: brightness(1) saturate(1) contrast(1.02);
}

.works-preview-tile:hover,
.works-preview-tile:focus-visible {
  scale: 1.03;
  filter: brightness(1.05);
}

.works-preview-caption strong {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

.works-preview-shade {
  opacity: 0.36;
}

.works-preview-tile--lead .works-preview-shade {
  opacity: 0.28;
}

.works-preview-tile--bottom-row img,
.works-preview-tile--bottom-row video {
  transform: none !important;
  transform-origin: center center;
}

.works-preview-tile--bottom-row:hover img,
.works-preview-tile--bottom-row:focus-visible img,
.works-preview-tile--bottom-row:hover video,
.works-preview-tile--bottom-row:focus-visible video {
  transform: none !important;
}

@keyframes worksWallDrift {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 0 -5px;
  }

  100% {
    translate: 0 3px;
  }
}

@keyframes worksTileFloat {
  0% {
    translate: 0 var(--float-y-start, -3px);
  }

  100% {
    translate: 0 var(--float-y-end, 5px);
  }
}

@keyframes worksModuleFloat {
  0% {
    translate: 0 -3px;
  }

  100% {
    translate: 0 5px;
  }
}

@keyframes worksGlowPulse {
  0% {
    opacity: 0.34;
    transform: scale(0.985);
  }

  100% {
    opacity: 0.54;
    transform: scale(1.015);
  }
}

@keyframes worksLightSweep {
  0%,
  24% {
    opacity: 0;
    transform: translateX(0) skewX(-12deg);
  }

  42% {
    opacity: 0.18;
  }

  68%,
  100% {
    opacity: 0;
    transform: translateX(430%) skewX(-12deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .works-preview-board,
  .works-preview-board::before,
  .works-preview-board::after,
  .works-preview-tile,
  .works-preview-module-card,
  .service-process-visual,
  .service-process-float,
  .service-process-title-sheen::before {
    animation: none !important;
    scale: 1;
    translate: 0 0;
  }

  .service-process-poster-card {
    transform: none !important;
    transition: none !important;
  }

  .service-process-visual {
    opacity: 1;
    transform: none;
  }
}

.works-preview-cta {
  justify-content: center;
  gap: 18px;
  border-color: rgba(230, 194, 116, 0.36);
  background: rgba(5, 5, 5, 0.96);
}

.works-preview-cta svg {
  right: clamp(22px, 2.6vw, 42px);
  bottom: clamp(22px, 2.6vw, 42px);
  top: auto;
  width: clamp(44px, 4.4vw, 72px);
  height: clamp(44px, 4.4vw, 72px);
  padding: clamp(10px, 1vw, 18px);
  border: 1px solid currentColor;
  border-radius: 999px;
}

.works-preview-cta--footer {
  width: max-content;
  min-height: 0;
  margin: clamp(18px, 1.8vw, 28px) auto 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 11px 16px 12px;
  border: 1px solid rgba(230, 194, 116, 0.32);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.82);
}

.works-preview-cta--footer span {
  font-size: 9px;
  letter-spacing: 0.22em;
}

.works-preview-cta--footer strong {
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.08em;
}

.works-preview-cta--footer svg {
  position: static;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
}

@media (max-width: 1023px) {
  .works-preview-inner {
    width: min(calc(100vw - 44px), 1998px);
  }

  .works-preview-modules {
    position: static;
    display: grid;
    width: 100%;
    margin-top: 2px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .works-preview-grid {
    grid-template-columns: repeat(15, minmax(0, 1fr));
    grid-auto-rows: clamp(88px, 13vw, 138px);
    grid-template-rows: none;
    grid-template-areas:
      "w01 w01 w01 w01 w01 w01 w01 w01 w01 w01 w03 w03 w03 w03 w03"
      "w01 w01 w01 w01 w01 w01 w01 w01 w01 w01 w03 w03 w03 w03 w03"
      "w01 w01 w01 w01 w01 w01 w01 w01 w01 w01 w03 w03 w03 w03 w03"
      "w02 w02 w02 w02 w02 w02 w02 w02 w02 w02 w04 w04 w04 w04 w04"
      "w02 w02 w02 w02 w02 w02 w02 w02 w02 w02 w04 w04 w04 w04 w04"
      "w02 w02 w02 w02 w02 w02 w02 w02 w02 w02 w04 w04 w04 w04 w04"
      "w05 w05 w05 w05 w05 w06 w06 w06 w06 w06 w07 w07 w07 w07 w07"
      "w05 w05 w05 w05 w05 w06 w06 w06 w06 w06 w07 w07 w07 w07 w07"
      "w08 w08 w08 w09 w09 w09 w10 w10 w10 w11 w11 w11 w12 w12 w12";
  }
}

@media (max-width: 767px) {
  .works-preview {
    padding: 48px 0 72px;
  }

  .works-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(108px, 32vw, 164px);
    grid-template-areas:
      "w01 w01"
      "w01 w01"
      "w01 w01"
      "w01 w01"
      "w02 w02"
      "w02 w02"
      "w02 w02"
      "w03 w03"
      "w03 w03"
      "w03 w03"
      "w04 w04"
      "w04 w04"
      "w05 w05"
      "w05 w05"
      "w06 w06"
      "w06 w06"
      "w07 w08"
      "w09 w10"
      "w11 w12";
    gap: 2px;
    padding: 2px;
  }

  .works-preview-modules {
    grid-template-columns: 1fr;
  }

  .works-preview-cta {
    min-height: 0;
  }

  .works-preview-cta--footer {
    width: max-content;
    max-width: 100%;
  }
}

.portfolio-exhibition {
  background:
    radial-gradient(circle at 20% 10%, rgba(88, 12, 19, 0.3), transparent 34%),
    radial-gradient(circle at 86% 60%, rgba(119, 154, 164, 0.09), transparent 33%),
    #030304;
}

.case-pin {
  background: linear-gradient(180deg, #030304 0%, rgba(7, 2, 3, 0.98) 48%, #030304 100%);
}

.case-ambient {
  background:
    radial-gradient(circle at 76% 20%, rgba(140, 184, 194, 0.12), transparent 26%),
    radial-gradient(circle at 14% 74%, rgba(130, 15, 28, 0.26), transparent 34%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 100%);
  background-size: auto, auto, 18vw 100%;
  opacity: 0.9;
}

.portfolio-exhibition .case-gallery-head {
  margin-bottom: clamp(18px, 3svh, 34px);
}

.portfolio-exhibition .case-gallery-head h2 {
  color: #6f1218;
  font-size: clamp(42px, 8vw, 116px);
  letter-spacing: 0.16em;
  text-shadow:
    0 0 34px rgba(111, 18, 24, 0.36),
    0 0 58px rgba(0, 0, 0, 0.62);
}

.portfolio-exhibition .case-gallery-head p,
.portfolio-exhibition .case-gallery-head span {
  color: rgba(202, 226, 229, 0.48);
}

.portfolio-exhibition .case-gallery-frame {
  height: min(68svh, 780px);
  min-height: 520px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0;
  background:
    radial-gradient(circle at calc(28% + var(--scroll-progress, 0) * 44%) 36%, rgba(154, 191, 202, 0.13), transparent 27%),
    radial-gradient(circle at 18% 78%, rgba(104, 11, 23, 0.22), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.01) 22%, rgba(0, 0, 0, 0) 72%),
    #030304;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 40px 150px rgba(0, 0, 0, 0.62);
  perspective: 1500px;
}

.portfolio-exhibition .case-gallery-frame::before {
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 49.9%, rgba(188, 219, 224, 0.12) 50%, transparent 50.1%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 116px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 92px);
  opacity: 0.5;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 76%);
}

.portfolio-exhibition .case-gallery-frame::after {
  content: "";
  background:
    linear-gradient(90deg, #030304 0%, transparent 15%, transparent 85%, #030304 100%),
    linear-gradient(180deg, #030304 0%, transparent 17%, transparent 75%, #030304 100%);
}

.portfolio-exhibition .case-gallery-core {
  width: min(58vw, 680px);
}

.portfolio-exhibition .case-gallery-core p,
.portfolio-exhibition .case-gallery-core span {
  color: rgba(203, 228, 230, 0.46);
  letter-spacing: 0.42em;
}

.portfolio-exhibition .case-gallery-core strong {
  color: rgba(255, 255, 255, 0.06);
  font-family: var(--type-label);
  font-size: clamp(90px, 17vw, 260px);
  font-weight: 300;
  letter-spacing: 0.02em;
  text-shadow: 0 0 62px rgba(157, 208, 215, 0.12);
}

.portfolio-exhibition .exhibit-card {
  transform: none;
}

.portfolio-exhibition .case-gallery-track {
  pointer-events: auto;
}

.portfolio-exhibition .exhibit-card-inner {
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #030304;
  box-shadow:
    0 26px 90px rgba(0, 0, 0, 0.58),
    0 0 46px rgba(126, 169, 180, 0.035),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.portfolio-exhibition .exhibit-card:hover .exhibit-card-inner,
.portfolio-exhibition .exhibit-card:focus-visible .exhibit-card-inner,
.portfolio-exhibition .exhibit-card[data-focused="true"] .exhibit-card-inner {
  border-color: rgba(191, 225, 229, 0.46);
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.7),
    0 0 60px rgba(151, 198, 207, 0.09),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.portfolio-exhibition .exhibit-card img,
.portfolio-exhibition .exhibit-card[data-active="true"] img {
  object-fit: contain;
  background: #030304;
}

.portfolio-exhibition .exhibit-card:hover img {
  transform: scale(1.01);
}

.portfolio-exhibition .exhibit-card-shade {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), transparent 52%, rgba(0, 0, 0, 0.52)),
    linear-gradient(90deg, rgba(70, 6, 14, 0.28), transparent 44%, rgba(120, 167, 180, 0.08));
  opacity: 0.4;
}

.portfolio-exhibition .exhibit-card[data-active="true"] .exhibit-card-shade,
.portfolio-exhibition .exhibit-card[data-focused="true"] .exhibit-card-shade {
  opacity: 0;
}

.portfolio-exhibition .exhibit-card-caption span,
.portfolio-exhibition .exhibit-card-index,
.portfolio-exhibition .case-gallery-meta p,
.portfolio-exhibition .case-gallery-meta span {
  color: rgba(206, 229, 232, 0.56);
}

.portfolio-exhibition .exhibit-card-caption strong {
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--type-serif-cn);
  letter-spacing: 0.08em;
}

.portfolio-exhibition .case-gallery-meta,
.portfolio-exhibition .case-gallery-detail {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.portfolio-exhibition .case-gallery-meta h3,
.portfolio-exhibition .case-gallery-detail h3 {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 0 34px rgba(159, 205, 212, 0.08);
}

.portfolio-exhibition .case-gallery-close,
.portfolio-exhibition .case-gallery-controls button {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(3, 3, 4, 0.56);
  backdrop-filter: blur(8px);
}

.portfolio-exhibition .case-gallery-close:hover,
.portfolio-exhibition .case-gallery-controls button:hover {
  border-color: rgba(196, 229, 233, 0.5);
  color: #fff;
}

@media (max-width: 767px) {
  .portfolio-exhibition .case-gallery-frame {
    height: min(62svh, 560px);
    min-height: 360px;
  }

  .portfolio-exhibition .case-gallery-head {
    margin-bottom: 12px;
  }

  .portfolio-exhibition .case-gallery-head h2 {
    font-size: clamp(34px, 11vw, 54px);
  }

  .portfolio-exhibition .case-gallery-core {
    top: 32%;
    width: 86vw;
  }
}

@media (min-width: 768px) {
  .md\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

body header [style*="opacity:0"],
body main [style*="opacity:0"]:not(.exhibit-card) {
  opacity: 1 !important;
  transform: none !important;
}

body header [style*="opacity"],
body header [style*="visibility"],
[data-hero-reveal],
[data-hero-copy],
.works-preview-entry,
.service-grid,
.service-card-compact,
.section-heading-wide {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

#top,
#top [data-hero-media],
#top video,
.hero-contact-card {
  opacity: 1 !important;
  visibility: visible !important;
}

.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card {
  width: clamp(420px, 38vw, 760px) !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  opacity: 0;
  visibility: visible;
  filter: brightness(0.36) saturate(0.82);
  transform-origin: center center;
  animation: exhibitionOrbit 42s linear infinite;
  animation-delay: var(--orbit-delay, 0s);
  pointer-events: auto;
}

.portfolio-exhibition .case-gallery-frame[data-paused="true"]:not([data-focus="true"]) .exhibit-card {
  animation: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.46s ease,
    filter 0.46s ease,
    transform 0.58s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.portfolio-exhibition .case-gallery-frame[data-paused="true"]:not([data-focus="true"]) .exhibit-card[data-orbit-slot="center"] {
  z-index: 90;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  filter: brightness(1.08) saturate(1);
  transform: translate(-50%, calc(-50% - 18px)) rotate(0deg) scale(1.04) !important;
}

.portfolio-exhibition .case-gallery-frame[data-paused="true"]:not([data-focus="true"]) .exhibit-card[data-orbit-slot="left-near"] {
  z-index: 56;
  opacity: 0.6;
  visibility: visible;
  pointer-events: auto;
  filter: brightness(0.54) saturate(0.78);
  transform: translate(calc(-50% - clamp(260px, 25vw, 520px)), calc(-50% + 12px)) rotate(-4deg) scale(0.78) !important;
}

.portfolio-exhibition .case-gallery-frame[data-paused="true"]:not([data-focus="true"]) .exhibit-card[data-orbit-slot="right-near"] {
  z-index: 58;
  opacity: 0.64;
  visibility: visible;
  pointer-events: auto;
  filter: brightness(0.56) saturate(0.8);
  transform: translate(calc(-50% + clamp(260px, 25vw, 520px)), calc(-50% + 12px)) rotate(4deg) scale(0.78) !important;
}

.portfolio-exhibition .case-gallery-frame[data-paused="true"]:not([data-focus="true"]) .exhibit-card[data-orbit-slot="left-mid"] {
  z-index: 38;
  opacity: 0.38;
  visibility: visible;
  pointer-events: auto;
  filter: brightness(0.36) saturate(0.72);
  transform: translate(calc(-50% - clamp(500px, 48vw, 940px)), calc(-50% + 42px)) rotate(-8deg) scale(0.62) !important;
}

.portfolio-exhibition .case-gallery-frame[data-paused="true"]:not([data-focus="true"]) .exhibit-card[data-orbit-slot="right-mid"] {
  z-index: 36;
  opacity: 0.36;
  visibility: visible;
  pointer-events: auto;
  filter: brightness(0.35) saturate(0.72);
  transform: translate(calc(-50% + clamp(500px, 48vw, 940px)), calc(-50% + 42px)) rotate(8deg) scale(0.62) !important;
}

.portfolio-exhibition .case-gallery-frame[data-paused="true"]:not([data-focus="true"]) .exhibit-card[data-orbit-slot="left-far"] {
  z-index: 24;
  opacity: 0.26;
  visibility: visible;
  pointer-events: auto;
  filter: brightness(0.28) saturate(0.66);
  transform: translate(calc(-50% - clamp(650px, 62vw, 1180px)), calc(-50% + 64px)) rotate(-10deg) scale(0.52) !important;
}

.portfolio-exhibition .case-gallery-frame[data-paused="true"]:not([data-focus="true"]) .exhibit-card[data-orbit-slot="right-far"] {
  z-index: 22;
  opacity: 0.24;
  visibility: visible;
  pointer-events: auto;
  filter: brightness(0.27) saturate(0.66);
  transform: translate(calc(-50% + clamp(650px, 62vw, 1180px)), calc(-50% + 64px)) rotate(10deg) scale(0.52) !important;
}

.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card:nth-child(1) { --orbit-delay: 0s; }
.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card:nth-child(2) { --orbit-delay: -2.1s; }
.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card:nth-child(3) { --orbit-delay: -4.2s; }
.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card:nth-child(4) { --orbit-delay: -6.3s; }
.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card:nth-child(5) { --orbit-delay: -8.4s; }
.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card:nth-child(6) { --orbit-delay: -10.5s; }
.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card:nth-child(7) { --orbit-delay: -12.6s; }
.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card:nth-child(8) { --orbit-delay: -14.7s; }
.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card:nth-child(9) { --orbit-delay: -16.8s; }
.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card:nth-child(10) { --orbit-delay: -18.9s; }
.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card:nth-child(11) { --orbit-delay: -21s; }
.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card:nth-child(12) { --orbit-delay: -23.1s; }
.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card:nth-child(13) { --orbit-delay: -25.2s; }
.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card:nth-child(14) { --orbit-delay: -27.3s; }
.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card:nth-child(15) { --orbit-delay: -29.4s; }
.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card:nth-child(16) { --orbit-delay: -31.5s; }
.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card:nth-child(17) { --orbit-delay: -33.6s; }
.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card:nth-child(18) { --orbit-delay: -35.7s; }
.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card:nth-child(19) { --orbit-delay: -37.8s; }
.portfolio-exhibition .case-gallery-frame:not([data-focus="true"]) .exhibit-card:nth-child(20) { --orbit-delay: -39.9s; }

@keyframes exhibitionOrbit {
  0% {
    opacity: 0;
    z-index: 12;
    filter: brightness(0.18) saturate(0.58);
    transform: translate(calc(-50% + clamp(660px, 62vw, 1220px)), calc(-50% + 62px)) rotate(11deg) scale(0.5);
  }

  10% {
    opacity: 0.24;
    z-index: 20;
    filter: brightness(0.28) saturate(0.66);
    transform: translate(calc(-50% + clamp(520px, 50vw, 980px)), calc(-50% + 48px)) rotate(8deg) scale(0.6);
  }

  24% {
    opacity: 0.58;
    z-index: 48;
    filter: brightness(0.52) saturate(0.78);
    transform: translate(calc(-50% + clamp(260px, 25vw, 520px)), calc(-50% + 12px)) rotate(4deg) scale(0.78);
  }

  38% {
    opacity: 1;
    z-index: 90;
    filter: brightness(1.08) saturate(1);
    transform: translate(-50%, calc(-50% - 18px)) rotate(0deg) scale(1.04);
  }

  52% {
    opacity: 0.58;
    z-index: 48;
    filter: brightness(0.52) saturate(0.78);
    transform: translate(calc(-50% - clamp(260px, 25vw, 520px)), calc(-50% + 12px)) rotate(-4deg) scale(0.78);
  }

  66% {
    opacity: 0.28;
    z-index: 20;
    filter: brightness(0.3) saturate(0.68);
    transform: translate(calc(-50% - clamp(520px, 50vw, 980px)), calc(-50% + 48px)) rotate(-8deg) scale(0.6);
  }

  80% {
    opacity: 0;
    z-index: 12;
    filter: brightness(0.18) saturate(0.58);
    transform: translate(calc(-50% - clamp(660px, 62vw, 1220px)), calc(-50% + 62px)) rotate(-11deg) scale(0.5);
  }

  100% {
    opacity: 0;
    z-index: 12;
    filter: brightness(0.18) saturate(0.58);
    transform: translate(calc(-50% + clamp(660px, 62vw, 1220px)), calc(-50% + 62px)) rotate(11deg) scale(0.5);
  }
}

/* Temporary mobile video diagnostics, 2026-06-15. Remove after WeChat playback is confirmed. */
.studio-video-gate {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 9999;
  display: none;
  min-width: 188px;
  transform: translateY(0);
  border: 1px solid rgba(230, 194, 116, 0.46);
  border-radius: 999px;
  padding: 12px 18px 13px;
  color: #f7db9c;
  background:
    linear-gradient(135deg, rgba(60, 4, 5, 0.96), rgba(3, 3, 4, 0.94)),
    rgba(3, 3, 4, 0.96);
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  text-align: center;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.studio-video-gate span,
.studio-video-gate em {
  display: block;
  font-style: normal;
}

.studio-video-gate span {
  font-size: 14px;
  letter-spacing: 0.12em;
}

.studio-video-gate em {
  margin-top: 3px;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.58);
}

.studio-video-gate.is-hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.studio-video-debug {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 100;
  display: none;
  max-width: min(82vw, 360px);
  border: 1px solid rgba(89, 255, 198, 0.55);
  border-radius: 6px;
  padding: 5px 7px;
  color: #b9ffe8;
  background: rgba(0, 0, 0, 0.78);
  font-family: Consolas, monospace !important;
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  pointer-events: none;
}

@media (max-width: 767px) {
  .studio-video-gate {
    display: block;
  }

  .studio-video-debug {
    display: none !important;
  }

  .hero,
  .works-preview-tile,
  .service-section,
  .method-section {
    position: relative;
  }

  #top.hero .hero-video,
  .works-preview-tile video,
  .service-bg-video,
  .method-bg-video {
    visibility: visible !important;
  }

  #top.hero .hero-video {
    z-index: 0 !important;
  }

  .works-preview-inner {
    width: min(calc(100vw - 44px), 520px) !important;
  }

  .works-preview-grid {
    grid-template-columns: repeat(15, minmax(0, 1fr)) !important;
    grid-auto-rows: clamp(22px, 5.72vw, 34px) !important;
    grid-template-rows:
      repeat(8, clamp(22px, 5.72vw, 34px))
      repeat(3, calc(clamp(22px, 5.72vw, 34px) * 1.08))
      calc(clamp(22px, 5.72vw, 34px) * 1.872) !important;
    grid-template-areas:
      "w01 w01 w01 w01 w01 w01 w01 w01 w01 w01 w03 w03 w03 w03 w03"
      "w01 w01 w01 w01 w01 w01 w01 w01 w01 w01 w03 w03 w03 w03 w03"
      "w01 w01 w01 w01 w01 w01 w01 w01 w01 w01 w03 w03 w03 w03 w03"
      "w01 w01 w01 w01 w01 w01 w01 w01 w01 w01 w03 w03 w03 w03 w03"
      "w02 w02 w02 w02 w02 w02 w02 w02 w02 w02 w04 w04 w04 w04 w04"
      "w02 w02 w02 w02 w02 w02 w02 w02 w02 w02 w04 w04 w04 w04 w04"
      "w02 w02 w02 w02 w02 w02 w02 w02 w02 w02 w04 w04 w04 w04 w04"
      "w02 w02 w02 w02 w02 w02 w02 w02 w02 w02 w04 w04 w04 w04 w04"
      "w05 w05 w05 w05 w05 w06 w06 w06 w06 w06 w07 w07 w07 w07 w07"
      "w05 w05 w05 w05 w05 w06 w06 w06 w06 w06 w07 w07 w07 w07 w07"
      "w05 w05 w05 w05 w05 w06 w06 w06 w06 w06 w07 w07 w07 w07 w07"
      "w08 w08 w08 w09 w09 w09 w10 w10 w10 w11 w11 w11 w12 w12 w12" !important;
  }

  .works-preview-tile img,
  .works-preview-tile video {
    position: relative;
    z-index: 2;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    opacity: 1 !important;
  }

  .works-preview-tile--video {
    background:
      url("/studio/cases/desman-reference-video-poster.jpg") center / contain no-repeat,
      #050505 !important;
  }

  .works-preview-shade {
    z-index: 1;
  }

  .service-section,
  .method-section {
    overflow: visible;
  }

  .service-bg-video,
  .method-bg-video {
    z-index: 1 !important;
    opacity: 0.38 !important;
  }

  .service-bg-mask,
  .method-bg-mask {
    z-index: 0 !important;
  }

  .service-section .studio-container,
  .method-content,
  .method-audio-hover-zone {
    position: relative;
    z-index: 2;
  }
}

@media (max-width: 767px) {
  :root {
    --mobile-canvas-scale: 0.26;
  }

  .service-section,
  .method-section {
    position: relative !important;
    width: 100vw !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .service-section .studio-container {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 1440px !important;
    max-width: none !important;
    min-width: 1440px !important;
    padding: 34px 48px 42px !important;
    overflow: visible !important;
    transform: translateX(-50%) scale(var(--mobile-canvas-scale)) !important;
    transform-origin: top center !important;
  }

  .service-grid {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 34px !important;
  }

  .service-card-compact {
    width: auto !important;
    min-height: 148px !important;
    padding: 16px 18px 14px !important;
  }

  .service-card-compact h3 {
    font-size: 26px !important;
    white-space: nowrap;
  }

  .service-card-compact p:last-child {
    white-space: normal;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .service-heading-compact {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 26px !important;
    text-align: left !important;
  }

  .service-heading-title {
    font-size: 46px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  .service-process-visual {
    width: 1220px !important;
    max-width: none !important;
    margin: 0 auto !important;
    perspective: none !important;
  }

  .service-process-float,
  .service-process-poster-card,
  .service-process-visual img {
    transform: none !important;
  }

  .service-bg-video,
  .method-bg-video {
    opacity: 0.16 !important;
    filter: blur(8px) saturate(1.05) contrast(1.02) brightness(0.95) !important;
    transform: scale(1.02) !important;
  }

  .method-content {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 1440px !important;
    max-width: none !important;
    min-width: 1440px !important;
    padding: 36px 48px 44px !important;
    transform: translateX(-50%) scale(var(--mobile-canvas-scale)) !important;
    transform-origin: top center !important;
  }

  .method-content .section-heading-wide {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 34px !important;
    text-align: left !important;
  }

  .method-content .section-heading-wide h2 {
    font-size: 56px !important;
    line-height: 1.02 !important;
    white-space: nowrap !important;
  }

  .method-content > .grid {
    display: grid !important;
    grid-template-columns: 760px 1fr !important;
    align-items: center !important;
    gap: 78px !important;
  }

  .method-content > .grid > .flex {
    display: flex !important;
    height: 430px !important;
    min-height: 0 !important;
    flex-direction: row !important;
  }

  .method-content > .grid > .flex > button {
    min-height: 0 !important;
    height: 100% !important;
    flex: 1 1 auto !important;
  }

  .method-content > .grid > div:last-child {
    margin-top: 0 !important;
    padding-left: 42px !important;
  }

  .method-current-title {
    font-size: 48px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  .method-audio-hover-zone {
    width: 520px !important;
    height: 360px !important;
  }
}

@media (max-width: 767px) {
  header .site-logo {
    left: 8px !important;
    top: -12px !important;
    z-index: 42;
    padding: 0 !important;
    opacity: 0.54 !important;
    transform: scale(0.68) !important;
    transform-origin: left top !important;
  }

  header .site-logo span {
    font-size: 14px !important;
    letter-spacing: 0.12em !important;
  }

  #top.hero {
    overflow: hidden !important;
  }

  #top.hero .hero-video {
    position: relative !important;
    z-index: 0 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;
    object-position: center top !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: #030304 !important;
  }

  #top.hero .hero-contact-card {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    transform: scale(0.75) !important;
    transform-origin: left top !important;
    z-index: 50 !important;
    pointer-events: none !important;
  }
}

@media (min-width: 768px) {
  body > main > header .site-nav {
    position: absolute !important;
    top: 0 !important;
    right: clamp(-150px, -7vw, -96px) !important;
    left: auto !important;
    display: flex !important;
    transform: none !important;
  }
}

/* Header/Hero structure lock: keep navigation outside Hero's stacking context. */
body > main > header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 1000 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  isolation: isolate !important;
  pointer-events: none !important;
}

body > main > header .site-logo {
  position: absolute !important;
  z-index: 30 !important;
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body > main > header .site-nav,
body > main > header button[aria-label],
body > main > header nav {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#top.hero {
  position: relative !important;
  z-index: 0 !important;
  isolation: isolate !important;
  transform: none !important;
  filter: none !important;
}

@media (max-width: 767px) {
  body > main > header .site-logo {
    left: 0 !important;
    top: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Stable Hero layering: video 0, overlay 1, UI 10, glass 20, GWIN 30. */
#top.hero {
  isolation: isolate !important;
}

#top.hero .hero-video {
  position: relative !important;
  z-index: 0 !important;
}

#top.hero::before,
#top.hero::after {
  z-index: 1 !important;
  pointer-events: none !important;
}

header {
  z-index: auto !important;
}

header .site-nav,
header button[aria-label],
header nav {
  position: relative;
  z-index: 10 !important;
}

#top.hero .hero-contact-card {
  z-index: 15 !important;
}

header .site-logo {
  position: fixed !important;
  z-index: 30 !important;
}

@media (max-width: 767px) {
  header .site-logo {
    top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
    left: calc(env(safe-area-inset-left, 0px) + 16px) !important;
    opacity: 0.42 !important;
    transform: scale(0.62) !important;
    transform-origin: left top !important;
  }

  #top.hero .hero-contact-card {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    transform: scale(0.6) !important;
    transform-origin: left top !important;
    z-index: 5 !important;
    pointer-events: none !important;
  }
}