/* Panasia repurposes the captured "Log In" navigation slot as the "Market Briefs"
   content CTA. Scale's muted login grey (#929292, 3.11:1 on white) reads as
   disabled on a real CTA and fails WCAG AA, so the token is retoned to the
   Panasia ink used by the rest of the header. */
[data-theme="light"] body,
:root:not([data-theme]) body {
  --nav-login-cta-text: #101010;
}

[data-initial-chrome-theme="dark"],
[data-theme="dark"] body {
  --nav-login-cta-text: #f5f5f5;
}

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

.panasia-wordmark,
.panasia-brand-wordmark {
  --panasia-wordmark-width: 86px;
  display: block;
  flex: none;
  width: var(--panasia-wordmark-width) !important;
  height: auto !important;
  aspect-ratio: 891 / 162;
  background: currentColor;
  -webkit-mask: url("/brand/panasia-wordmark.svg") center / contain no-repeat;
  mask: url("/brand/panasia-wordmark.svg") center / contain no-repeat;
}

.panasia-wordmark--announcement {
  --panasia-wordmark-width: 66px;
}

.panasia-wordmark--footer {
  --panasia-wordmark-width: 88px;
}

/* The captured announcement and footer use Scale's standalone symbol outside
   the normal home links. Hide it before hydration, then let runtime-guard
   replace it with the same live wordmark used by the navigation. */
[role="region"][aria-label="Announcement"]
  .flex.flex-wrap.items-center:has(> svg:first-child[viewBox="0 0 32 32"])
  > svg:first-child,
footer .logo:has(> svg[viewBox="0 0 24 24"]) > svg {
  display: none !important;
}

[role="region"][aria-label="Announcement"]
  .flex.flex-wrap.items-center:has(> svg:first-child[viewBox="0 0 32 32"])::before,
footer .logo:has(> svg[viewBox="0 0 24 24"])::after {
  content: "";
  display: block;
  width: 86px;
  aspect-ratio: 891 / 162;
  background: currentColor;
  -webkit-mask: url("/brand/panasia-wordmark.svg") center / contain no-repeat;
  mask: url("/brand/panasia-wordmark.svg") center / contain no-repeat;
}

[role="region"][aria-label="Announcement"]
  .flex.flex-wrap.items-center:has(> svg:first-child[viewBox="0 0 32 32"])::before {
  width: 66px;
}

footer .logo:has(> svg[viewBox="0 0 24 24"])::after {
  width: 88px;
}

@media (max-width: 640px) {
  [role="region"][aria-label="Announcement"] > div:first-child {
    padding-inline: 2.75rem !important;
  }
}

.panasia-client-marquee {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  padding-block: 1.25rem 0.25rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}


.panasia-client-marquee__provenance {
  width: min(100% - 3rem, 72rem);
  margin: 1.25rem auto 0;
  color: #666;
  font: 500 1rem/1.45 ui-monospace, SFMono-Regular, Menlo, "Panasia KR", monospace;
  letter-spacing: 0.02em;
  text-align: center;
}

.panasia-native-navigation {
  box-sizing: border-box;
  color: #0a0a0a;
  font-family: var(--font-aeonik), aeonik, Arial, sans-serif;
}

.panasia-native-navigation *,
.panasia-native-navigation *::before,
.panasia-native-navigation *::after {
  box-sizing: border-box;
}

.panasia-native-navigation--static {
  position: fixed;
  z-index: 180;
  inset: 0 0 auto;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
  backdrop-filter: blur(18px);
}

.panasia-native-navigation__bar {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(26rem, 2fr) minmax(15rem, 1fr);
  align-items: center;
  min-height: 5rem;
  padding: 0 1.5rem;
}

.panasia-native-navigation__brand,
.panasia-native-navigation__panel-brand {
  width: max-content;
  color: inherit;
  text-decoration: none;
}

.panasia-native-navigation__desktop {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 3rem);
}

.panasia-native-navigation__desktop a,
.panasia-native-navigation__desktop button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
}

.panasia-native-navigation__fallback {
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.panasia-native-navigation__actions > .panasia-native-navigation__fallback {
  display: none;
}

.panasia-native-navigation__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
}

.panasia-native-navigation__briefs,
.panasia-native-navigation__cta {
  display: inline-flex;
  min-height: 2.6rem;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  border: 1px solid #0a0a0a;
  border-radius: 0.5rem;
  color: inherit;
  font-size: 0.88rem;
  text-decoration: none;
}

.panasia-native-navigation__cta {
  background: #0a0a0a;
  color: #fff;
}

.panasia-native-navigation__mobile-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.32rem;
  padding: 0;
  border: 1px solid rgba(10, 10, 10, 0.24);
  border-radius: 0.65rem;
  background: #fff;
  cursor: pointer;
}

.panasia-native-navigation__mobile-toggle span {
  width: 1.1rem;
  height: 1px;
  background: currentColor;
  transition: transform 180ms ease;
}

.panasia-native-navigation[data-open="true"] .panasia-native-navigation__mobile-toggle span:first-child {
  transform: translateY(0.21rem) rotate(45deg);
}

.panasia-native-navigation[data-open="true"] .panasia-native-navigation__mobile-toggle span:last-child {
  transform: translateY(-0.21rem) rotate(-45deg);
}

.panasia-native-navigation__panel[hidden] {
  display: none;
}

.panasia-native-navigation__panel {
  position: absolute;
  z-index: 181;
  top: 100%;
  left: 0;
  width: 100%;
  min-height: 27rem;
  padding: 2.5rem clamp(1.5rem, 5vw, 5rem) 3rem;
  background: #fff;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
  box-shadow: 0 1.5rem 4rem rgba(10, 10, 10, 0.12);
}

.panasia-native-navigation__panel-head {
  display: none;
}

.panasia-native-navigation__content {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(12rem, 0.75fr) minmax(22rem, 1.4fr);
  gap: clamp(2rem, 6vw, 7rem);
  max-width: 90rem;
  margin: 0 auto;
}

.panasia-native-navigation__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.35rem;
}

.panasia-native-navigation__group p {
  margin: 0 0 0.4rem;
  color: #777;
  font-size: 0.92rem;
}

.panasia-native-navigation__link {
  max-width: 19rem;
  color: #0a0a0a;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.12;
  text-decoration: none;
}

.panasia-native-navigation__link:hover,
.panasia-native-navigation__link:focus-visible {
  color: #75549a;
}

.panasia-native-navigation__preview {
  min-height: 21rem;
  margin: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  background: #f2f2f2;
}

.panasia-native-navigation__preview img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 21rem;
  object-fit: cover;
}

.panasia-native-navigation--home-mobile {
  display: none;
}

@media (max-width: 768px) {
  .panasia-native-navigation--home-mobile {
    display: block;
    position: fixed;
    z-index: 210;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    pointer-events: none;
  }

  .panasia-native-navigation--home-mobile > .panasia-native-navigation__mobile-toggle {
    position: fixed;
    z-index: 212;
    top: calc(var(--announcement-offset, 0px) + 0.9rem);
    right: 1rem;
    pointer-events: auto;
  }

  .panasia-native-navigation--home-mobile > .panasia-native-navigation__fallback {
    position: fixed;
    z-index: 212;
    top: calc(var(--announcement-offset, 0px) + 1.2rem);
    right: 1rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(10, 10, 10, 0.24);
    border-radius: 0.65rem;
    background: #fff;
    font-size: 0.82rem;
    pointer-events: auto;
  }

  .panasia-native-navigation--home-mobile > .panasia-native-navigation__panel {
    pointer-events: auto;
  }

  .panasia-native-navigation__bar {
    grid-template-columns: 1fr auto;
    min-height: 4.5rem;
    padding: 0 1rem;
  }

  .panasia-native-navigation__desktop,
  .panasia-native-navigation__briefs {
    display: none;
  }

  .panasia-native-navigation__actions {
    gap: 0.5rem;
  }

  .panasia-native-navigation__actions > .panasia-native-navigation__fallback {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    padding-inline: 0.8rem;
    border: 1px solid rgba(10, 10, 10, 0.24);
    border-radius: 0.5rem;
    font-size: 0.8rem;
  }

  .panasia-native-navigation__cta {
    min-height: 2.5rem;
    padding-inline: 0.8rem;
    font-size: 0.8rem;
  }

  .panasia-native-navigation__mobile-toggle {
    display: inline-flex;
  }

  .panasia-native-navigation__panel {
    position: fixed;
    z-index: 211;
    inset: 0;
    width: 100vw;
    min-height: 100dvh;
    padding: 1.25rem 1.25rem 2.5rem;
    overflow-y: auto;
    border: 0;
    box-shadow: none;
  }

  .panasia-native-navigation__panel-head {
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    padding-right: 3.6rem;
  }

  .panasia-native-navigation__close {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }

  .panasia-native-navigation__content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding-top: 3rem;
  }

  .panasia-native-navigation__group {
    gap: 1.15rem;
  }

  .panasia-native-navigation__link {
    max-width: 21rem;
    font-size: clamp(1.7rem, 8vw, 2.25rem);
  }

  .panasia-native-navigation__preview {
    display: none;
  }
}

.panasia-client-marquee__track {
  display: flex;
  width: max-content;
  transform: translate3d(0, 0, 0);
  animation: panasia-client-marquee 38s linear infinite;
  will-change: transform;
}

.panasia-client-marquee__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(2.75rem, 5vw, 5.5rem);
  margin: 0;
  padding: 0 clamp(2.75rem, 5vw, 5.5rem) 0 0;
  list-style: none;
}

.panasia-client-marquee__item {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.7rem;
  color: #090909;
  white-space: nowrap;
}

.panasia-client-marquee__item img {
  display: block;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  object-fit: contain;
  filter: grayscale(1) saturate(0) contrast(1.12);
  opacity: 0.82;
}

.panasia-client-marquee__name {
  font-family: var(--font-aeonik), aeonik, sans-serif;
  font-size: clamp(1.25rem, 1.6vw, 1.65rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

.panasia-client-marquee:hover .panasia-client-marquee__track,
.panasia-client-marquee:focus-within .panasia-client-marquee__track {
  animation-play-state: paused;
}

@keyframes panasia-client-marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (max-width: 767px) {
  .panasia-client-marquee {
    padding-block: 1rem 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }

  .panasia-client-marquee__track {
    animation-duration: 30s;
  }

  .panasia-client-marquee__group {
    gap: 2.5rem;
    padding-right: 2.5rem;
  }

  .panasia-client-marquee__item img {
    width: 1.75rem;
    height: 1.75rem;
    flex-basis: 1.75rem;
  }

  .panasia-client-marquee__name {
    font-size: 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panasia-client-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: none;
  }

  .panasia-client-marquee__track {
    animation: none;
    transform: none;
    will-change: auto;
  }

  .panasia-client-marquee__group[aria-hidden="true"] {
    display: none;
  }
}

header a[aria-label="Home"]:not([data-panasia-wordmark="true"]),
header a[aria-label="Panasia home"]:not([data-panasia-wordmark="true"]),
header a[aria-label="PANASIA 홈"]:not([data-panasia-wordmark="true"]),
footer a[aria-label="Home"]:not([data-panasia-wordmark="true"]),
footer a[aria-label="Panasia home"]:not([data-panasia-wordmark="true"]),
footer a[aria-label="PANASIA 홈"]:not([data-panasia-wordmark="true"]) {
  font-size: 0;
}

header a[aria-label="Home"]:not([data-panasia-wordmark="true"]) > *,
header a[aria-label="Panasia home"]:not([data-panasia-wordmark="true"]) > *,
header a[aria-label="PANASIA 홈"]:not([data-panasia-wordmark="true"]) > *,
footer a[aria-label="Home"]:not([data-panasia-wordmark="true"]) > *,
footer a[aria-label="Panasia home"]:not([data-panasia-wordmark="true"]) > *,
footer a[aria-label="PANASIA 홈"]:not([data-panasia-wordmark="true"]) > * {
  display: none !important;
}

header a[aria-label="Home"]:not([data-panasia-wordmark="true"])::after,
header a[aria-label="Panasia home"]:not([data-panasia-wordmark="true"])::after,
header a[aria-label="PANASIA 홈"]:not([data-panasia-wordmark="true"])::after,
footer a[aria-label="Home"]:not([data-panasia-wordmark="true"])::after,
footer a[aria-label="Panasia home"]:not([data-panasia-wordmark="true"])::after,
footer a[aria-label="PANASIA 홈"]:not([data-panasia-wordmark="true"])::after {
  content: "";
  display: block;
  width: 86px;
  aspect-ratio: 891 / 162;
  background: currentColor;
  -webkit-mask: url("/brand/panasia-wordmark.svg") center / contain no-repeat;
  mask: url("/brand/panasia-wordmark.svg") center / contain no-repeat;
}

html {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

html[data-panasia-prerender="true"]:not([data-panasia-runtime="ready"]) body {
  opacity: 0;
}

html[data-panasia-static="true"] body {
  opacity: 1 !important;
}

html[data-panasia-runtime="ready"] body {
  opacity: 1;
  transition: opacity 120ms linear;
}

body {
  min-height: 100%;
  overflow-x: clip;
}

[data-panasia-mobile-hero-copy] {
  display: none;
}

@media (max-width: 767px) {
  /* The captured H1 is clipped to 1x1 below 768 so the pinned GSAP tree cannot
     repaint the largest visible text late; `[data-panasia-mobile-hero-copy]`
     below is the layer a phone reader actually sees, and `runtime-guard.js`
     exposes that layer as the level-1 heading. `visibility: hidden` is what takes
     this clipped duplicate out of the accessibility tree, so the phone hero
     announces one level-1 heading — the visible one — instead of announcing the
     sentence twice from a box no one can see. It stays a laid-out 1x1 box rather
     than `display: none` so the captured pin keeps something measurable where it
     expects its heading. */
  .HomeHero h1[data-panasia-mobile-hero-source] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    visibility: hidden !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  [data-panasia-mobile-hero-copy] {
    position: absolute;
    z-index: 10;
    top: calc(45dvh + 97px);
    left: 2rem;
    display: block;
    width: calc(100% - 4rem);
    color: #fff;
    text-align: center;
    pointer-events: none;
  }

  [data-panasia-mobile-hero-copy] > p {
    margin: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* Home keeps the captured Scale runway even when WebGL is unavailable. The
   local video replaces only the canvas; media-gate owns the four copy states. */
.HomeHero {
  /* The pinned frame owns its white gutters. The much taller scroll runway
     must stay black so it cannot surface as a white band during handoff to
     the following ScrollingQuote scene. */
  background: #000;
}

.HomeHero > .pin-spacer > :first-child > .parallaxOut:first-child > [aria-hidden="true"] > .bg-black:first-child,
.HomeHero > :first-child:not(.pin-spacer) > .parallaxOut:first-child > [aria-hidden="true"] > .bg-black:first-child {
  background: #b8b7af url("/static/assets/videos/Packed-poster.webp") center / cover no-repeat;
}

.HomeHero > .pin-spacer > :first-child,
.HomeHero > :first-child:not(.pin-spacer) {
  /* Scale keeps the opening pinned canvas white so the bounded film always
     has white side gutters, including the frames before WebGL paints. The
     handoff rule below turns this surface black only near the next scene. */
  background: #fff;
}

/* The final fallback narrative state overlaps the black quote scene. Retire
   the pinned frame's white canvas at that exact handoff so it cannot travel
   across the viewport as a detached white slab. Earlier states retain the
   source-locked white gutters around the opening film. */
.HomeHero[data-panasia-handoff="true"] > .pin-spacer,
.HomeHero[data-panasia-handoff="true"] > .pin-spacer > :first-child,
.HomeHero[data-panasia-handoff="true"] > :first-child:not(.pin-spacer) {
  background: #000 !important;
}

html[data-panasia-scale-fallback="true"] .HomeHero {
  height: 450dvh !important;
  min-height: 100svh !important;
  overflow: visible !important;
}

html[data-panasia-scale-fallback="true"]
  main
  > .relative.overflow-x-hidden {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

html[data-panasia-scale-fallback="true"] .HomeHero > .pin-spacer,
html[data-panasia-scale-fallback="true"]
  .HomeHero
  > :first-child:not(.pin-spacer) {
  position: sticky !important;
  top: 0 !important;
  inset-inline: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100svh !important;
  max-height: 100svh !important;
  padding: 0 !important;
  transform: none !important;
  overflow: hidden !important;
}

html[data-panasia-scale-fallback="true"] .HomeHero > .pin-spacer > :first-child {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100svh !important;
  max-height: 100svh !important;
  padding: 0 !important;
  transform: none !important;
  overflow: hidden !important;
}

html[data-panasia-scale-fallback="true"]
  .HomeHero
  .parallaxOut
  > :has(canvas) {
  opacity: 0 !important;
  visibility: hidden !important;
}

html[data-panasia-scale-fallback="true"]
  .HomeHero
  .parallaxOut
  > [aria-hidden="true"]:has([data-panasia-scale-composition="frame-stack"]) {
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-panasia-scale-fallback="true"]
  .HomeHero
  .parallaxOut
  > [aria-hidden="true"]:has([data-panasia-scale-composition="frame-stack"])
  > :first-child::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.2));
  pointer-events: none;
}

.PanasiaHomeHeroFallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  pointer-events: none;
}

.PanasiaHomeHeroFallback__stack {
  position: relative;
  width: min(74vw, 1180px);
  height: min(76svh, 720px);
  transform: translate3d(0, -1svh, 0);
  transform-origin: center;
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1),
    height 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.PanasiaHomeHeroFallback__frame,
.PanasiaHomeHeroFallback__media {
  position: absolute;
  border-radius: clamp(22px, 2.1vw, 36px);
}

.PanasiaHomeHeroFallback__frame {
  inset: 7% 2%;
  border: 1px solid rgb(255 255 255 / 0.38);
  transition: opacity 450ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.PanasiaHomeHeroFallback__frame--rear {
  transform: perspective(1200px) rotateX(2deg) rotateZ(-6.5deg) translate(-1%, 0);
}

.PanasiaHomeHeroFallback__frame--middle {
  inset: 9% 5%;
  transform: perspective(1200px) rotateX(4deg) rotateZ(5.2deg) translate(2%, 1%);
}

.PanasiaHomeHeroFallback__frame--front {
  inset: 11% 8%;
  border-color: rgb(255 255 255 / 0.52);
  transform: perspective(1200px) rotateX(6deg) rotateZ(-1.8deg);
}

.PanasiaHomeHeroFallback__media {
  inset: 15% 15%;
  z-index: 2;
  overflow: hidden;
  background: #090909 url("/static/assets/videos/Packed-poster.webp") center / cover no-repeat;
  box-shadow: 0 34px 90px rgb(0 0 0 / 0.5);
  transform: perspective(1200px) rotateX(5deg) rotateZ(-1.8deg);
}

.PanasiaHomeHeroFallback__media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.PanasiaHomeHeroFallback__media video[data-panasia-scale-video="fallback"] {
  filter: saturate(0.78) contrast(1.08) brightness(0.78);
}

.PanasiaHomeHeroFallback__media video[data-panasia-scale-overlay="outline"] {
  z-index: 2;
  opacity: 0;
  visibility: hidden;
}

.PanasiaHomeHeroFallback[data-panasia-scale-composition-state="0"]
  .PanasiaHomeHeroFallback__stack {
  width: 100%;
  height: 100%;
  transform: none;
}

.PanasiaHomeHeroFallback[data-panasia-scale-composition-state="0"]
  .PanasiaHomeHeroFallback__frame {
  opacity: 0;
}

.PanasiaHomeHeroFallback[data-panasia-scale-composition-state="0"]
  .PanasiaHomeHeroFallback__media {
  inset: 0;
  border-radius: 16px;
  transform: none;
}

.PanasiaHomeHeroFallback[data-panasia-scale-composition-state="2"]
  .PanasiaHomeHeroFallback__stack {
  transform: translate3d(18vw, -1svh, 0) scale(0.82);
}

.PanasiaHomeHeroFallback[data-panasia-scale-composition-state="3"]
  .PanasiaHomeHeroFallback__stack {
  transform: translate3d(-17vw, -1svh, 0) scale(0.72);
}

html[data-panasia-scale-fallback="true"]
  .HomeHero
  [data-panasia-fallback-hero-state] {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(0, 24px, 0) !important;
  pointer-events: none !important;
  transition: opacity 280ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 420ms !important;
}

html[data-panasia-scale-fallback="true"]
  .HomeHero
  [data-panasia-fallback-hero-state][data-panasia-fallback-active="true"] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  transition-delay: 0s !important;
}

html[data-panasia-scale-fallback="true"]
  [data-panasia-fallback-hero-copy] {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 240ms ease, visibility 0s linear 240ms !important;
}

html[data-panasia-scale-fallback="true"]
  [data-panasia-fallback-hero-copy][data-panasia-fallback-active="true"] {
  opacity: 1 !important;
  visibility: visible !important;
  transition-delay: 0s !important;
}

html[data-panasia-scale-fallback="true"] main .AnimatedText,
html[data-panasia-scale-fallback="true"] main .AnimatedText * {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto !important;
}

@media (max-width: 767px) {
  html[data-panasia-scale-fallback="true"] .HomeHero {
    height: 232dvh !important;
  }

  .PanasiaHomeHeroFallback__stack {
    width: 132vw;
    height: 57svh;
    transform: translate3d(0, -15svh, 0);
  }

  .PanasiaHomeHeroFallback__media {
    inset: 18% 17%;
  }

  .PanasiaHomeHeroFallback[data-panasia-scale-composition-state="0"]
    .PanasiaHomeHeroFallback__media {
    inset: 0;
    border-radius: 16px;
  }

  .PanasiaHomeHeroFallback[data-panasia-scale-composition-state="2"]
    .PanasiaHomeHeroFallback__stack,
  .PanasiaHomeHeroFallback[data-panasia-scale-composition-state="3"]
    .PanasiaHomeHeroFallback__stack {
    transform: translate3d(0, -16svh, 0) scale(0.86);
  }
}

@media (min-width: 768px) and (max-width: 1919px) {
  .PanasiaHomeHeroFallback[data-panasia-scale-composition-state="0"]
    .PanasiaHomeHeroFallback__media {
    inset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .PanasiaHomeHeroFallback__stack,
  .PanasiaHomeHeroFallback__frame {
    transition: none;
  }
}

header {
  visibility: visible !important;
  pointer-events: auto !important;
}

header a[href]:not([aria-disabled="true"]),
header button:not(:disabled) {
  cursor: pointer;
}

/* Secondary pages use one editorial media language: the same deep-neutral,
   restrained treatment as the site's films, with fixed framing that prevents
   CMS cards from collapsing while images decode. */
html[data-panasia-static="true"] img[data-panasia-editorial-media] {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: #0c1712;
  border-radius: inherit;
  object-position: 50% 50%;
}

html[data-panasia-static="true"] img[data-panasia-editorial-media="photo"] {
  object-fit: cover;
  filter: saturate(0.72) contrast(1.06) brightness(0.9);
  transition: filter 420ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-panasia-static="true"] img[data-panasia-editorial-media="graphic"] {
  object-fit: contain;
  filter: saturate(0.82) contrast(1.04);
}

html[data-panasia-static="true"] a:hover img[data-panasia-editorial-media="photo"],
html[data-panasia-static="true"] a:focus-visible img[data-panasia-editorial-media="photo"] {
  filter: saturate(0.9) contrast(1.08) brightness(0.96);
  transform: scale(1.015);
}

/* The source pages reveal copy with GSAP/React. Static secondary documents
   must ship their readable final state instead of leaving text at opacity 0. */
html[data-panasia-static="true"] main .AnimatedText.is-visible,
html[data-panasia-static="true"] main .AnimatedText.is-visible * {
  opacity: 1 !important;
}

html[data-panasia-static="true"] main .AnimatedText.is-visible [style*="transform"],
html[data-panasia-static="true"] main .AnimatedText.is-visible .will-change-transform {
  transform: none !important;
  will-change: auto !important;
}

/* Protocols owns the captured 450vh pull-apart rhythm without restoring the
   removed React/WebGL runtime. The lightweight SVG scene and two copy states
   are driven by the Panasia guard instead of leaving a blank canvas. */
html[data-panasia-static="true"][data-panasia-route="/protocols"]
  .EnterprisePullApart {
  position: relative !important;
  height: 450svh !important;
  min-height: 2700px;
  isolation: isolate;
}

html[data-panasia-static="true"][data-panasia-route="/protocols"]
  .EnterprisePullApart
  > .pin-spacer {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100svh !important;
  max-height: 100svh !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html[data-panasia-static="true"][data-panasia-route="/protocols"]
  .EnterprisePullApart[data-panasia-protocols-pin="active"]
  > .pin-spacer {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
}

html[data-panasia-static="true"][data-panasia-route="/protocols"]
  .EnterprisePullApart[data-panasia-protocols-pin="after"]
  > .pin-spacer {
  inset: auto auto 0 0 !important;
}

html[data-panasia-static="true"][data-panasia-route="/protocols"]
  .EnterprisePullApart
  > .pin-spacer
  > :first-child {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 100svh !important;
  max-height: 100svh !important;
  transform: none !important;
  overflow: hidden !important;
}

html[data-panasia-route="/protocols"]
  .EnterprisePullApart
  [data-panasia-protocols-visual] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

html[data-panasia-route="/protocols"]
  .EnterprisePullApart
  [data-panasia-protocols-visual]
  > canvas {
  display: none !important;
}

.PanasiaProtocolsScene {
  position: absolute;
  inset: 5svh max(3vw, 1.5rem);
  color: #747474;
  opacity: 0.94;
  filter: drop-shadow(0 24px 55px rgb(0 0 0 / 0.62));
}

.PanasiaProtocolsScene svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.PanasiaProtocolsScene .protocols-frame,
.PanasiaProtocolsScene .protocols-link,
.PanasiaProtocolsScene .protocols-layer,
.PanasiaProtocolsScene .protocols-node {
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
}

.PanasiaProtocolsScene .protocols-frame,
.PanasiaProtocolsScene .protocols-layer {
  fill: rgb(7 7 7 / 0.52);
  stroke: currentColor;
  stroke-width: 1;
}

.PanasiaProtocolsScene .protocols-frame {
  stroke-dasharray: 4 7;
  stroke-dashoffset: var(--protocols-dash, 0);
}

.PanasiaProtocolsScene .protocols-link {
  fill: none;
  stroke: #565656;
  stroke-width: 1;
  stroke-dasharray: 3 6;
  stroke-dashoffset: var(--protocols-dash, 0);
}

.PanasiaProtocolsScene .protocols-node {
  fill: #050505;
  stroke: #9a9a9a;
  stroke-width: 1.2;
}

html[data-panasia-route="/protocols"]
  .EnterprisePullApart
  [data-panasia-protocols-panel] {
  will-change: opacity, transform;
  pointer-events: none;
}

/* Briefs owns its scroll scene locally. The captured React/WebGL runtime is
   deliberately absent, but the original 600vh pacing, sticky stage, four copy
   states, and controls remain available to the Panasia runtime. */
html[data-panasia-static="true"][data-panasia-route="/briefs"]
  .SgpIntro[style*="height:600vh"] {
  position: relative !important;
  height: 600svh !important;
  min-height: 3600px;
  background: #000;
  isolation: isolate;
}

html[data-panasia-static="true"][data-panasia-route="/briefs"]
  .SgpIntro
  > .pin-spacer {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100svh !important;
  max-height: 100svh !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html[data-panasia-static="true"][data-panasia-route="/briefs"]
  .SgpIntro[data-panasia-briefs-pin="active"]
  > .pin-spacer {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
}

html[data-panasia-static="true"][data-panasia-route="/briefs"]
  .SgpIntro[data-panasia-briefs-pin="after"]
  > .pin-spacer {
  inset: auto auto 0 0 !important;
}

html[data-panasia-static="true"][data-panasia-route="/briefs"]
  .SgpIntro
  > .pin-spacer
  > :first-child {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 100svh !important;
  max-height: 100svh !important;
  transform: none !important;
  overflow: hidden !important;
}

html[data-panasia-route="/briefs"] .SgpIntro [data-panasia-briefs-visual] {
  position: absolute !important;
  inset: 8svh 48% 10svh 3% !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html[data-panasia-route="/briefs"]
  .SgpIntro
  [data-panasia-briefs-visual]
  > :not(.PanasiaBriefsScene) {
  display: none !important;
}

.PanasiaBriefsScene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #777;
  opacity: 0.96;
  filter: drop-shadow(0 20px 45px rgb(0 0 0 / 0.55));
}

.PanasiaBriefsScene svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.PanasiaBriefsScene .briefs-plane,
.PanasiaBriefsScene .briefs-flow,
.PanasiaBriefsScene .briefs-signal,
.PanasiaBriefsScene .briefs-node {
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
}

.PanasiaBriefsScene .briefs-plane {
  fill: rgb(8 8 8 / 0.42);
  stroke: #666;
  stroke-width: 1.1;
  transform: translate3d(0, var(--briefs-plane-shift, 0), 0);
}

.PanasiaBriefsScene .briefs-plane--echo {
  stroke: #2f2f2f;
  stroke-dasharray: 3 5;
}

.PanasiaBriefsScene .briefs-flow {
  fill: none;
  stroke: #555;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 4 7;
  stroke-dashoffset: var(--briefs-dash, 0);
}

.PanasiaBriefsScene .briefs-signal {
  fill: none;
  stroke: #8d8d8d;
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.65;
}

.PanasiaBriefsScene .briefs-node rect,
.PanasiaBriefsScene .briefs-node path {
  fill: #050505;
  stroke: currentColor;
  stroke-width: 1.2;
}

.PanasiaBriefsScene .briefs-node circle {
  fill: currentColor;
  filter: url(#briefs-glow);
}

.PanasiaBriefsScene [data-briefs-visual-step] {
  transition: none;
}

.PanasiaBriefsScene .briefs-scan {
  fill: url(#briefs-scan-gradient);
  transform: translateY(var(--briefs-scan, -70%));
  opacity: 0.32;
}

.PanasiaBriefsScrollCue {
  position: absolute;
  z-index: 35;
  right: max(24px, 3vw);
  bottom: max(22px, 3svh);
  display: none;
  align-items: center;
  gap: 10px;
  color: #d4d4d4;
  font: 500 12px/1.2 ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Panasia KR", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 180ms ease, transform 180ms ease;
}

.PanasiaBriefsScrollCue i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 0.38);
  border-radius: 50%;
  font-style: normal;
  animation: panasia-briefs-cue 1.4s ease-in-out infinite;
}

.PanasiaBriefsScrollCue[data-hidden="true"] {
  opacity: 0;
  transform: translateY(8px);
}

@keyframes panasia-briefs-cue {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}

@media (max-width: 767px) {
  html[data-panasia-static="true"][data-panasia-route="/briefs"]
    .SgpIntro[style*="height:600vh"] {
    height: 400svh !important;
    min-height: 2600px;
  }

  .PanasiaBriefsScrollCue {
    display: flex;
  }
}

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

html[data-panasia-route="/briefs"] .SgpIntro [data-panasia-briefs-copy] {
  position: absolute !important;
  inset: 32% 5% auto 58% !important;
  width: auto !important;
  height: 42svh !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html[data-panasia-route="/briefs"] .SgpIntro [data-panasia-briefs-panel] {
  display: grid !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none;
  will-change: opacity, transform;
}

html[data-panasia-route="/briefs"] .SgpIntro [data-panasia-briefs-panel] > div {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}

html[data-panasia-route="/briefs"] .SgpIntro [data-panasia-briefs-panel] .index {
  opacity: 1 !important;
}

html[data-panasia-route="/briefs"] .SgpIntro [data-panasia-briefs-intro] {
  display: none !important;
}

html[data-panasia-route="/briefs"] .SgpIntro [data-panasia-briefs-controls] {
  z-index: 30 !important;
}

html[data-panasia-route="/briefs"] .SgpIntro [data-panasia-briefs-progress] {
  transform: scaleX(var(--briefs-progress, 0)) !important;
}

html[data-panasia-route="/briefs"] .SgpIntro .arrow-control-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* The second Briefs scene is a four-state flywheel. Its captured 150vh pin is
   preserved, but Panasia owns which absolute copy panel is visible. */
html[data-panasia-static="true"][data-panasia-route="/briefs"] .SgpFlywheel {
  position: relative !important;
  height: 150svh !important;
  min-height: 900px;
  isolation: isolate;
}

html[data-panasia-static="true"][data-panasia-route="/briefs"]
  .SgpFlywheel
  > .pin-spacer {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100svh !important;
  max-height: 100svh !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html[data-panasia-static="true"][data-panasia-route="/briefs"]
  .SgpFlywheel[data-panasia-flywheel-pin="active"]
  > .pin-spacer {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
}

html[data-panasia-static="true"][data-panasia-route="/briefs"]
  .SgpFlywheel[data-panasia-flywheel-pin="after"]
  > .pin-spacer {
  inset: auto auto 0 0 !important;
}

html[data-panasia-static="true"][data-panasia-route="/briefs"]
  .SgpFlywheel
  > .pin-spacer
  > :first-child {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 100svh !important;
  max-height: 100svh !important;
  transform: none !important;
  overflow: hidden !important;
}

html[data-panasia-route="/briefs"] .SgpFlywheel [data-panasia-flywheel-panel] {
  opacity: var(--panasia-flywheel-opacity, 0) !important;
  visibility: visible !important;
  transform: translate3d(0, var(--panasia-flywheel-y, 24px), 0) !important;
  transition: none !important;
  pointer-events: none;
  will-change: opacity, transform;
}

html[data-panasia-route="/briefs"]
  .SgpFlywheel
  [data-panasia-flywheel-panel].is-active {
  visibility: visible !important;
}

/* Captured testimonial carousels contain three absolute quote/name states.
   Only the selected state may occupy the shared slot once hydration is gone. */
html[data-panasia-static="true"] .ClientTestimonials > .pin-spacer {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

html[data-panasia-static="true"]
  .ClientTestimonials
  > .pin-spacer
  > :first-child {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  transform: none !important;
}

html[data-panasia-static="true"]
  .ClientTestimonials
  [data-panasia-testimonial-panel] {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(0, 18px, 0) !important;
  pointer-events: none !important;
  transition: opacity 360ms ease, transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 480ms !important;
}

html[data-panasia-static="true"]
  .ClientTestimonials
  [data-panasia-testimonial-panel].is-active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) !important;
  pointer-events: auto !important;
  transition-delay: 0s !important;
}

html[data-panasia-static="true"]
  .ClientTestimonials
  [data-panasia-testimonial-control][aria-selected="true"] {
  color: #839cb2 !important;
}

/* The captured enterprise hero stores the desktop pin dimensions inline.
   Reapply the source page's mobile viewport contract so its headline, CTA,
   and market nodes stay inside the device instead of a clipped 1410px stage. */
@media (max-width: 767px) {
  html[data-panasia-static="true"][data-panasia-route="/protocols"]
    .pin-spacer:has(> .EnterpriseHero),
  html[data-panasia-static="true"][data-panasia-route="/protocols"]
    .pin-spacer:has(> .EnterpriseHero)
    > .EnterpriseHero {
    width: 100% !important;
    max-width: 100% !important;
    height: 100svh !important;
    max-height: 100svh !important;
  }

  html[data-panasia-route="/briefs"] .SgpIntro [data-panasia-briefs-visual] {
    inset: 8svh 7% 52svh 7% !important;
  }

  html[data-panasia-route="/briefs"] .SgpIntro [data-panasia-briefs-copy] {
    inset: 52svh 6% auto 6% !important;
    height: 33svh !important;
  }

  html[data-panasia-route="/briefs"] .SgpIntro [data-panasia-briefs-panel] {
    align-items: start !important;
  }

  html[data-panasia-route="/briefs"]
    .SgpIntro
    [data-panasia-briefs-panel][aria-hidden="true"] {
    visibility: hidden !important;
  }

  html[data-panasia-route="/briefs"] .SgpIntro [data-panasia-briefs-panel] h2 {
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }

  html[data-panasia-route="/briefs"] .SgpIntro [data-panasia-briefs-controls] {
    padding: 0 1rem 1rem !important;
  }

  .PanasiaProtocolsScene {
    inset: 10svh 2vw 12svh;
  }

  html[data-panasia-route="/protocols"]
    .EnterprisePullApart
    .PullApartContent {
    width: 100% !important;
    padding-inline: 1rem !important;
  }

  html[data-panasia-route="/briefs"] .SgpFlywheel {
    min-height: 1050px;
  }

  html[data-panasia-static="true"][data-panasia-route="/institutions"]
    .FullBleedMediaSection
    img[src*="panasia-institutions-hero"] {
    object-fit: cover !important;
    object-position: 72% 50% !important;
  }

  html[data-panasia-static="true"][data-panasia-route="/desks"]
    [data-panasia-desks-rail] {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: auto !important;
    margin-inline: -24px !important;
    padding: 4px 24px 20px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 24px;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  html[data-panasia-static="true"][data-panasia-route="/desks"]
    [data-panasia-desks-rail]::-webkit-scrollbar {
    display: none;
  }

  html[data-panasia-static="true"][data-panasia-route="/desks"]
    [data-panasia-desks-rail]
    > * {
    flex: 0 0 min(82vw, 320px) !important;
    width: min(82vw, 320px) !important;
    max-width: none !important;
    scroll-snap-align: start;
  }

}

/* The same captured timelines leave their card wrappers at the invisible
   pre-reveal state. The cards still reserve their full grid slots, which reads
   as an empty section once the animation runtime has been removed. Restore the
   static final state without revealing duplicate carousel copies. */
html[data-panasia-static="true"] main .BaseCard {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto !important;
}

/* Board, Desks, and Institutions retain Scale's light-theme text class while
   using a dark full-bleed hero image. Keep the preserved hero composition and
   correct only the foreground token so the supporting line remains readable. */
html[data-panasia-static="true"][data-panasia-route="/board"]
  .FullBleedMediaSection
  .relative.z-20,
html[data-panasia-static="true"][data-panasia-route="/desks"]
  .FullBleedMediaSection
  .relative.z-20,
html[data-panasia-static="true"][data-panasia-route="/institutions"]
  .FullBleedMediaSection
  .relative.z-20 {
  color: #fff !important;
}

/* Market nodes stay documentary monochrome until the user explores a city. */
.node img[src*="/brand/editorial/market-"] {
  filter: grayscale(1) contrast(1.12) brightness(0.88);
  transform: scale(1.2) !important;
  transition: filter 480ms ease, transform 580ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: filter, transform;
}

.node:hover img[src*="/brand/editorial/market-"],
.node:focus-visible img[src*="/brand/editorial/market-"] {
  filter: sepia(0.85) saturate(3.6) contrast(1.08) brightness(1.02);
  transform: scale(1.28) !important;
}

.node:hover img[src*="market-seoul-"],
.node:focus-visible img[src*="market-seoul-"] {
  filter: sepia(0.9) saturate(4.2) hue-rotate(168deg) contrast(1.08) brightness(1.02);
}

.node:hover img[src*="market-tokyo-"],
.node:focus-visible img[src*="market-tokyo-"] {
  filter: sepia(0.95) saturate(4.6) hue-rotate(320deg) contrast(1.08) brightness(1.02);
}

.node:hover img[src*="market-taipei-"],
.node:focus-visible img[src*="market-taipei-"] {
  filter: sepia(0.9) saturate(3.8) hue-rotate(104deg) contrast(1.08) brightness(1.02);
}

.node:hover img[src*="market-hong-kong-"],
.node:focus-visible img[src*="market-hong-kong-"] {
  filter: sepia(0.95) saturate(4.4) hue-rotate(338deg) contrast(1.1) brightness(1.04);
}

.node:hover img[src*="market-ho-chi-minh-"],
.node:focus-visible img[src*="market-ho-chi-minh-"] {
  filter: sepia(0.92) saturate(4) hue-rotate(72deg) contrast(1.08) brightness(1.02);
}

.node:hover img[src*="market-kuala-lumpur-"],
.node:focus-visible img[src*="market-kuala-lumpur-"] {
  filter: sepia(0.92) saturate(4.2) hue-rotate(225deg) contrast(1.08) brightness(1.02);
}

.node:hover img[src*="market-singapore-"],
.node:focus-visible img[src*="market-singapore-"] {
  filter: sepia(0.9) saturate(3.8) hue-rotate(142deg) contrast(1.08) brightness(1.02);
}

@media (prefers-reduced-motion: reduce) {
  html[data-panasia-static="true"][data-panasia-route="/briefs"]
    .SgpIntro[data-panasia-motion="reduced"],
  html[data-panasia-static="true"][data-panasia-route="/briefs"]
    .SgpFlywheel[data-panasia-motion="reduced"],
  html[data-panasia-static="true"][data-panasia-route="/protocols"]
    .EnterprisePullApart[data-panasia-motion="reduced"] {
    height: 100svh !important;
    min-height: 100svh !important;
  }

  html[data-panasia-static="true"] img[data-panasia-editorial-media] {
    transition: none;
  }

  html[data-panasia-static="true"] a:hover img[data-panasia-editorial-media="photo"],
  html[data-panasia-static="true"] a:focus-visible img[data-panasia-editorial-media="photo"] {
    transform: none;
  }

  .node img[src*="/brand/editorial/market-"] {
    transition: filter 180ms linear !important;
  }

  .node:hover img[src*="/brand/editorial/market-"],
  .node:focus-visible img[src*="/brand/editorial/market-"] {
    transform: scale(1.2) !important;
  }

  html[data-panasia-static="true"]
    .ClientTestimonials
    [data-panasia-testimonial-panel] {
    transition: none !important;
  }
}

#q-messenger-frame,
q-focus-sentinel,
#qualified-bootstrap,
#qualified-script {
  display: none !important;
}

/* The captured carousel initializes logo wrappers with Tailwind's individual
   `scale: 0` property. Its GSAP reveal writes `transform: scale(1)`, which does
   not override that individual property, so approved marks remain 0px after
   hydration. Keep the captured card motion but fail open to the visible state. */
.FullWidthCardCarousel .keen-slider__slide .will-change-transform:has(img[src^="/brand/clients/"]) {
  scale: 1 !important;
}

/* The first captured PullApart panel used a row of Scale customer marks.
   Keep its original compact trust-row geometry, but normalize Panasia's
   approved client marks into one restrained monochrome system. */
.PullApartContent .max-h-12 img {
  width: auto !important;
  height: auto !important;
  max-width: 68px !important;
  max-height: 30px !important;
  object-fit: contain !important;
  filter: grayscale(1) saturate(0) contrast(1.12) brightness(1.35) !important;
  opacity: 0.72 !important;
}

.PullApartContent .max-h-12 img.opacity-0 {
  opacity: 0.72 !important;
  pointer-events: none !important;
}

@media (max-width: 767px) {
  .panasia-wordmark,
  .panasia-brand-wordmark {
    --panasia-wordmark-width: 80px;
  }

  /* The captured Scale mobile carousel assumes short article titles and lets
     four slides shrink into one row. Panasia's editorial titles need a real
     reading width, so keep the captured rail but make it a native snap strip. */
  html[data-panasia-route="/board"]
    .overflow-x-hidden:has(> .keen-slider) {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  html[data-panasia-route="/board"]
    .overflow-x-hidden:has(> .keen-slider)::-webkit-scrollbar {
    display: none;
  }

  html[data-panasia-route="/board"] .keen-slider {
    gap: 16px;
    overflow: visible;
    scroll-snap-type: x mandatory;
  }

  html[data-panasia-route="/board"] .keen-slider__slide {
    width: min(82vw, 300px);
    min-width: min(82vw, 300px);
    max-width: min(82vw, 300px);
    flex: 0 0 min(82vw, 300px);
    scroll-snap-align: start;
  }

  html[data-panasia-route="/board"] .keen-slider__slide h3 {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }

  /* The institutional source plate is deliberately low-key. Center-cropping
     it on portrait screens loses the illuminated facade, so bias the crop to
     the architectural detail and restore luminance behind a text-safe fade. */
  html[data-panasia-route="/institutions"]
    .FullBleedMediaSection:has(img[src*="panasia-institutions-hero"])
    img[src*="panasia-institutions-hero"] {
    object-position: 72% 50%;
    filter: brightness(1.38) saturate(0.9) contrast(1.06);
  }

  html[data-panasia-route="/institutions"]
    .FullBleedMediaSection:has(img[src*="panasia-institutions-hero"])
    .media-overlay {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.28) 56%,
      rgba(0, 0, 0, 0.08) 100%
    );
  }

  /* The outer item owns the orbit transform; its child only scales on desktop hover. */
  .Applications .application-item > div {
    will-change: auto !important;
  }

  /* Native vertical pan owns the gesture; Three.js keeps rendering and can
     still receive horizontal pointer input without trapping page scroll. */
  canvas[data-engine^="three.js"],
  div:has(> canvas[data-engine^="three.js"]) {
    touch-action: pan-y pinch-zoom !important;
  }

  .node img[src*="/brand/editorial/market-"] {
    will-change: auto;
  }

  /* Proof cards keep their final appearance without retaining hundreds of
     completed per-word and logo compositor transforms on mobile. */
  .FullWidthCardCarousel .keen-slider__slide .AnimatedText > div > div,
  .FullWidthCardCarousel .keen-slider__slide .word,
  .FullWidthCardCarousel .keen-slider__slide .will-change-transform {
    transform: none !important;
    opacity: 1 !important;
    will-change: auto !important;
  }
}
.panasia-about-services,
.panasia-about-sequence {
  background: #fff;
  color: #050505;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(5.5rem, 9vw, 9rem) 1.5rem;
  width: 100vw;
}

.panasia-about-services__shell,
.panasia-about-sequence__shell {
  margin: 0 auto;
  max-width: 1216px;
}

.panasia-about-kicker {
  color: rgba(0, 0, 0, 0.5);
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  line-height: 1.4;
  margin: 0 0 1.15rem;
  text-transform: uppercase;
}

.panasia-about-services__header,
.panasia-about-sequence__header {
  margin: 0 auto clamp(4rem, 7vw, 6.5rem);
  max-width: 780px;
  text-align: center;
}

.panasia-about-services__header h2,
.panasia-about-sequence__header h2 {
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

.panasia-about-services__header > p:last-child,
.panasia-about-sequence__header > p:last-child {
  color: rgba(0, 0, 0, 0.62);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  margin: 1.5rem auto 0;
  max-width: 660px;
}

.panasia-about-service {
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, 0.16);
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
  padding: clamp(3.5rem, 6vw, 6rem) 0;
}

.panasia-about-service--reverse .panasia-about-service__media {
  order: 2;
}

.panasia-about-service__media {
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.panasia-about-service__media picture {
  display: block;
  height: 100%;
}

.panasia-about-service__media img {
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
}

.panasia-about-service:hover .panasia-about-service__media img {
  transform: scale(1.025);
}

.panasia-about-service__copy h3 {
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

.panasia-about-service__copy > p:not(.panasia-about-kicker) {
  color: rgba(0, 0, 0, 0.68);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 1.5rem 0 0;
}

.panasia-about-service__copy ul {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
}

.panasia-about-service__copy li {
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  font-size: 1rem;
  line-height: 1.45;
  padding: 0.8rem 0;
}

.panasia-about-service__copy a,
.panasia-about-sequence__close a {
  align-items: center;
  border-bottom: 1px solid currentColor;
  color: inherit;
  display: inline-flex;
  font-size: 0.9rem;
  gap: 0.5rem;
  line-height: 1.4;
  min-height: 44px;
  padding: 0.5rem 0;
  text-decoration: none;
}

.panasia-about-service__copy a:focus-visible,
.panasia-about-sequence__close a:focus-visible {
  outline: 2px solid #0d3a27;
  outline-offset: 5px;
}

.panasia-about-sequence {
  background: #f3f3f1;
}

.panasia-about-sequence__steps {
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  list-style: none;
  margin: 0;
  padding: 0;
}

.panasia-about-sequence__steps li {
  align-items: baseline;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 4rem minmax(220px, 0.8fr) minmax(260px, 1.2fr);
  padding: 1.9rem 0;
  transition: padding-left 260ms ease-out;
}

.panasia-about-sequence__steps li:hover {
  padding-left: 0.75rem;
}

.panasia-about-sequence__steps span {
  color: rgba(0, 0, 0, 0.42);
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.panasia-about-sequence__steps h3 {
  font-size: clamp(1.35rem, 2.5vw, 2.1rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
}

.panasia-about-sequence__steps p {
  color: rgba(0, 0, 0, 0.62);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

.panasia-about-sequence__close {
  align-items: end;
  display: flex;
  justify-content: space-between;
  padding-top: clamp(3rem, 6vw, 5rem);
}

.panasia-about-sequence__close p {
  margin: 0;
}

.panasia-about-sequence__close p span {
  color: rgba(0, 0, 0, 0.44);
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}

.panasia-about-sequence__close strong {
  font-size: clamp(2rem, 4.5vw, 4.25rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

@media (max-width: 767px) {
  .panasia-about-services,
  .panasia-about-sequence {
    padding: 4.5rem 1rem;
  }

  .panasia-about-services__header,
  .panasia-about-sequence__header {
    margin-bottom: 3.5rem;
    text-align: left;
  }

  .panasia-about-service,
  .panasia-about-service--reverse {
    gap: 2rem;
    grid-template-columns: 1fr;
    padding: 3.5rem 0;
  }

  .panasia-about-service--reverse .panasia-about-service__media {
    order: 0;
  }

  .panasia-about-service__copy > p:not(.panasia-about-kicker) {
    font-size: 1rem;
  }

  .panasia-about-sequence__steps li {
    gap: 0.85rem 1rem;
    grid-template-columns: 2.5rem 1fr;
    padding: 1.6rem 0;
  }

  .panasia-about-sequence__steps p {
    grid-column: 2;
  }

  .panasia-about-sequence__steps li:hover {
    padding-left: 0;
  }

  .panasia-about-sequence__close {
    align-items: flex-start;
    flex-direction: column;
    gap: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panasia-about-service__media img,
  .panasia-about-sequence__steps li {
    transition: none;
  }
}

/* The captured About prefooter still ships Scale's scroll-motion hooks. In a
   motion-capable browser they can translate the copy wrapper past the clipped
   card edge, even though the static build is geometrically correct. Keep the
   original full-bleed frame and pin only the copy to the card's content box. */
html[data-panasia-route="/about"] [data-panasia-about-prefooter]
  > .relative
  > .relative.z-20 {
  inset: auto !important;
  translate: none !important;
  transform: none !important;
  width: min(100%, 72rem) !important;
  max-width: min(72rem, 100%) !important;
}

html[data-panasia-route="/about"] [data-panasia-about-prefooter]
  .AnimatedText,
html[data-panasia-route="/about"] [data-panasia-about-prefooter]
  .AnimatedText > div,
html[data-panasia-route="/about"] [data-panasia-about-prefooter]
  .AnimatedText > div > div {
  translate: none !important;
  transform: none !important;
}

html[data-panasia-route="/about"] [data-panasia-about-prefooter] .AnimatedText {
  color: #fff !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}

html[data-panasia-route="/about"] [data-panasia-about-prefooter] .media-overlay {
  background: linear-gradient(0deg, rgba(0, 0, 0, .68), rgba(0, 0, 0, .18) 68%) !important;
}

/* `/protocols` card carousel: the captured Scale slide dots are 6x6 with 2px
   side margins, a 10px pitch. Ten 44px targets would need 440px of a 360px
   screen, and 44px overlays on a 10px pitch would stack four deep, so a tap
   would resolve to whichever dot painted last rather than the one under the
   finger — a worse outcome than a small but honest target. The dots therefore
   keep their 6x6 mark and take a 24x44 hit overlay on a 24px pitch: WCAG 2.5.8's
   minimum with no overlap between neighbours, and 240px for all ten. The 44px of
   height comes free out of the row's own 64px vertical margin. */
button[aria-label^="Go to slide "] {
  position: relative;
  margin-inline: 9px;
}

button[aria-label^="Go to slide "]::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 44px;
  transform: translate(-50%, -50%);
  content: "";
}