/* Keep the captured home runtime intact while preventing the legacy Scale
   symbol from flashing before hydration replaces the footer identity. */
footer .logo:has(> svg[viewBox="0 0 24 24"]) > svg {
  display: none !important;
}

footer .logo:has(> svg[viewBox="0 0 24 24"])::after {
  content: "";
  display: block;
  width: 88px;
  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;
}

/* Preserve Scale's native 6xl hero measure so the approved long-form Asia GTM
   statement carries the same two-line editorial rhythm on desktop. */
@media (min-width: 768px) {
  h1[data-panasia-primary-heading] {
    max-width: 1152px;
    margin-inline: auto;
  }
}

/* Preserve the captured orbit choreography while restoring Panasia's market
   photography: documentary monochrome at rest, original color on exploration. */
/* Prefix-matched: NARRATIVE §4 gives this CTA a `?program=market-entry`, which
   the build writes into the server HTML and the Flight payload alike, so the
   exact-literal selector this replaces would no longer hide anything. */
[data-panasia-application-section] a.FlatCta[href^="/contact"] {
  display: none !important;
}

.application-item img[src*="/brand/editorial/market-"] {
  filter: grayscale(1) contrast(1.08) brightness(0.9);
  transition: filter 420ms ease;
}

.application-item img[src*="/brand/editorial/orbit-photo-"] {
  filter: saturate(0.86) contrast(1.05) brightness(0.9);
  transition: filter 420ms ease;
}

/* The orbit is a primary narrative, not background decoration. Scale only the
   card contents so the captured SVG path and scroll choreography stay intact. */
.application-item > div {
  scale: 1.32;
}

.application-item {
  cursor: pointer;
}

.application-item[data-panasia-active="true"] {
  z-index: 5 !important;
}

.application-item[data-panasia-active="true"] > div {
  border-radius: 8px;
  box-shadow: 0 0 0 2px #010101, 0 12px 32px rgb(0 0 0 / 18%);
}

.application-item a:focus-visible {
  border-radius: 8px;
  outline: 3px solid #010101;
  outline-offset: 4px;
}

section:has(.application-item) > .relative.z-50 {
  scale: 1.16;
  transform-origin: center;
}

section:has(.application-item) .text-center > .flex > h2:first-child {
  display: none;
}

section:has(.application-item) .text-center > .flex > div:has(.dynamic-header) {
  width: 100% !important;
  align-items: center;
}

section:has(.application-item) .dynamic-header {
  left: 50%;
  opacity: 0 !important;
  translate: -50% 0 !important;
  transform: translateY(100%) !important;
  transition: opacity 260ms ease, transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
  visibility: hidden;
}

section:has(.application-item) .dynamic-header[data-panasia-active="true"] {
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible;
}

@media (hover: hover) and (pointer: fine) {
  .application-item:hover img[src*="/brand/editorial/market-"] {
    filter: grayscale(0) contrast(1.02) brightness(1);
  }

  .application-item:hover img[src*="/brand/editorial/orbit-photo-"] {
    filter: saturate(1.12) contrast(1.04) brightness(1.02);
  }

  .application-item[data-panasia-active="true"] img[src*="/brand/editorial/market-"] {
    filter: grayscale(0) contrast(1.02) brightness(1);
  }

  .application-item[data-panasia-active="true"] img[src*="/brand/editorial/orbit-photo-"] {
    filter: saturate(1.12) contrast(1.04) brightness(1.02);
  }
}

@media (max-width: 767px) {
  .application-item > div {
    scale: 1.42;
  }

  section:has(.application-item) > .relative.z-50 {
    scale: 1;
  }

  section:has(.application-item) .text-center > .flex {
    width: 100%;
  }

  section:has(.application-item) .text-center > .flex > div:has(.dynamic-header) {
    width: calc(100vw - 32px) !important;
    align-items: center;
  }

  section:has(.application-item) .dynamic-header {
    translate: -50% 0 !important;
  }
}

/* A browser without WebGL keeps Scale's quote runway. The story remains pinned
   for the same 200dvh interval while the text renders in a readable final state. */
html[data-panasia-scale-fallback="true"] .ScrollingQuote {
  height: 200dvh !important;
  min-height: 200dvh !important;
}

html[data-panasia-scale-fallback="true"] .ScrollingQuote > section {
  position: sticky !important;
  top: 88px !important;
  min-height: calc(100svh - 88px) !important;
  height: calc(100svh - 88px) !important;
  background: #000 !important;
  overflow: hidden !important;
}

html[data-panasia-scale-fallback="true"]
  .ScrollingQuote
  > section
  > .wrapper,
html[data-panasia-scale-fallback="true"]
  .ScrollingQuote
  > section
  > .wrapper
  > :first-child {
  min-height: 100% !important;
  height: 100% !important;
}

@media (max-width: 767px) {
  html[data-panasia-scale-fallback="true"] .ScrollingQuote > section {
    top: 70px !important;
    min-height: calc(100svh - 70px) !important;
    height: calc(100svh - 70px) !important;
  }
}

html[data-panasia-scale-fallback="true"]
  .Applications
  [data-panasia-fallback-intro] {
  min-height: 60svh !important;
  padding-inline: 1rem;
  /* The captured section is a centred flex row because the orbit is painted
     over the heading rather than beside it. Once the orbit is a list in normal
     flow, the row puts the two side by side; the fallback reads down instead. */
  flex-direction: column !important;
  gap: 40px;
}

html[data-panasia-scale-fallback="true"]
  .Applications
  [data-panasia-fallback-intro]
  .dynamic-header,
html[data-panasia-scale-fallback="true"]
  .Applications
  [data-panasia-fallback-intro]
  .text-center
  > .flex
  > h2 {
  display: none !important;
}

/* Twelve of the page's links live inside the orbit, and without WebGL nothing
   ever runs the captured timeline that sizes and places them: every
   `.application-item` measures 0x0, stacked on the section's centre point. This
   block used to hide the whole container — the twelve destinations disappeared
   with it, leaving a section that looked complete and navigated nowhere. The
   container is kept in flow instead, its absolute centring undone, so it can
   host the readable list `home-application-selector.js` builds from the same
   anchors. The orbit's own nodes stay hidden: they are unpositioned decoration
   here, not a layout that CSS could rescue. */
html[data-panasia-scale-fallback="true"]
  .Applications
  [data-panasia-fallback-intro]
  > [data-panasia-fallback-orbit] {
  position: static !important;
  translate: none !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
}

html[data-panasia-scale-fallback="true"]
  [data-panasia-fallback-orbit]
  > :not([data-panasia-fallback-orbit-list]) {
  display: none !important;
}

[data-panasia-fallback-orbit-list] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  max-width: 56rem;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

/* The fallback section is the captured light ground with the black
   `Markets across Asia` heading on it — the orbit's own white-on-canvas palette
   belongs to the WebGL scene, not here. */
a[data-panasia-fallback-orbit-link] {
  display: block;
  border: 1px solid rgb(1 1 1 / 24%);
  border-radius: 999px;
  /* 46px tall: these are the section's only touch targets on the fallback. */
  padding: 10px 18px;
  color: #010101;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease;
}

a[data-panasia-fallback-orbit-link]:hover,
a[data-panasia-fallback-orbit-link]:focus-visible {
  background: rgb(1 1 1 / 6%);
  border-color: rgb(1 1 1 / 64%);
}

@media (prefers-reduced-motion: reduce) {
  a[data-panasia-fallback-orbit-link] {
    transition: none;
  }
}

html[data-panasia-scale-fallback="true"]
  .Applications
  [data-panasia-fallback-intro]
  .text-center
  > h2:first-child {
  display: block !important;
  max-width: 15ch;
  margin-inline: auto;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .application-item img[src*="/brand/editorial/market-"],
  .application-item img[src*="/brand/editorial/orbit-photo-"] {
    transition: none;
  }

  section:has(.application-item) .dynamic-header {
    transition: none;
  }
}

/* The homepage entry cards keep the captured three-column composition, but
   arrive earlier and occupy less vertical runway on wide screens. */
[data-panasia-entry-grid] .AnimatedText,
[data-panasia-entry-grid] .AnimatedText * {
  transition-duration: 260ms !important;
  transition-delay: 0ms !important;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html[data-panasia-runtime="ready"]
  [data-panasia-entry-grid][data-panasia-entry-motion="ready"]:not([data-panasia-entry-grid-state="visible"])
  > div
  > .AnimatedText,
html[data-panasia-runtime="ready"]
  [data-panasia-entry-grid][data-panasia-entry-motion="ready"]:not([data-panasia-entry-grid-state="visible"])
  [data-panasia-entry-card] {
  opacity: 0 !important;
  transform: translate3d(0, 12px, 0) !important;
}

[data-panasia-entry-grid] > div > .AnimatedText,
[data-panasia-entry-grid] [data-panasia-entry-card] {
  opacity: 1 !important;
  transform: none !important;
  transition-property: opacity, transform !important;
  transition-duration: 280ms !important;
  transition-delay: 0ms !important;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

[data-panasia-entry-grid] [data-panasia-entry-card="1"] {
  transition-delay: 35ms !important;
}

[data-panasia-entry-grid] [data-panasia-entry-card="2"] {
  transition-delay: 70ms !important;
}

@media (min-width: 1280px) {
  [data-panasia-entry-grid] {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }

  [data-panasia-entry-grid] > div > .AnimatedText {
    margin-bottom: 48px !important;
    font-size: 38px !important;
    line-height: 46px !important;
  }

  [data-panasia-entry-grid] .CardGridContainer {
    grid-template-rows: 432px !important;
  }

  [data-panasia-entry-grid] [data-panasia-entry-card],
  [data-panasia-entry-grid] [data-panasia-entry-card] > .LinkCard,
  [data-panasia-entry-grid] [data-panasia-entry-card] > .LinkCard > a {
    height: 432px !important;
  }

  [data-panasia-entry-grid] [data-panasia-entry-card] > .LinkCard > a > .relative.z-10 {
    padding: 36px !important;
    gap: 52px !important;
  }

  [data-panasia-entry-grid] [data-panasia-entry-card] .header5-regular {
    font-size: 22px !important;
    line-height: 32px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-panasia-entry-grid] > div > .AnimatedText,
  [data-panasia-entry-grid] [data-panasia-entry-card] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Card copy + CTA block. The captured card is a fixed 432px column whose
   flex-1 body keeps min-height:auto, so a three-line description cannot shrink
   and instead overflows the card's own 36px bottom padding. Two-line cards fit,
   three-line cards do not, and the CTA chips end up 15px out of line with each
   other. Allowing the block to shrink lets it grow upward into the whitespace
   above instead, so every CTA lands on the padding edge regardless of copy
   length. Scale never hits this because all three of their cards are 3 lines. */
.CardGrid .flex.flex-col.justify-end.flex-1 {
  min-height: 0;
}