@font-face {
  font-family: "Geologica";
  src: url("./assets/Geologica-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
}

@property --home-reveal-brightness {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

:root {
  --black: #000;
  --track: #212121;
  --white: #fff;
  --desktop-scale: 1;
  --mobile-scale: 1;
  --sequence-left: 0px;
  --sequence-top: 0px;
  --sequence-width: 100vw;
  --sequence-height: 100vh;
}

.secondary-page { min-height: 100vh; background: #fff; color: #000; }
.secondary-header { position: relative; display: flex; align-items: center; justify-content: space-between; height: 80px; margin: 0 78px; }
.secondary-page .site-header,
.secondary-page .site-footer { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.secondary-header .site-nav--header { position: static; width: auto; height: auto; }
.secondary-header .site-nav__link { position: static; transform: none; }
.secondary-empty { min-height: calc(100vh - 560px); }
.secondary-page .site-footer { position: relative; min-height: 480px; height: 480px; }
.secondary-page { display: flex; flex-direction: column; min-height: 100vh; }
.secondary-page .secondary-header { flex: 0 0 auto; opacity: 1 !important; visibility: visible !important; transform: none !important; }
.secondary-page .site-header__logo-image,
.secondary-page .site-nav--header .site-nav__link { opacity: 1 !important; visibility: visible !important; }
.secondary-page .site-header__logo-image--hover { opacity: 0 !important; }
.secondary-page .site-header__logo:hover .site-header__logo-image--default,
.secondary-page .site-header__logo:focus-visible .site-header__logo-image--default { opacity: 0 !important; }
.secondary-page .site-header__logo:hover .site-header__logo-image--hover,
.secondary-page .site-header__logo:focus-visible .site-header__logo-image--hover { opacity: 1 !important; }
.secondary-page .site-header__logo-image--default { filter: brightness(0) !important; }
.secondary-page .site-nav--header .site-nav__link { color: #000 !important; }
.secondary-page .site-shell { position: relative; display: flex; flex-direction: column; width: 100%; min-height: 100vh; height: 100vh; background: #fff; opacity: 1 !important; visibility: visible !important; pointer-events: auto; }
.secondary-page .site-shell > .home-first-screen-background { display: none; }
.secondary-page .site-shell > .site-header { position: relative; flex: 0 0 80px; margin: 0 78px; }
.secondary-page .site-shell > .site-footer { position: relative; flex: 0 0 480px; margin-top: auto; }
.secondary-page .site-shell > .site-header { flex: 0 0 auto; height: calc(31px * var(--page-scale)); margin: var(--chrome-outer-margin); }
.secondary-page .site-shell > .site-footer { flex: 0 0 480px; margin: auto 0 0; }
.secondary-page .site-shell > .site-header .site-nav--header { position: absolute; }
.secondary-page .site-shell > .site-footer .site-nav--footer { position: absolute; }
.secondary-page .site-nav--header .site-nav__link { text-decoration: none; transition: opacity 180ms ease, color 180ms ease; }
.secondary-page .site-nav--header:hover .site-nav__link { opacity: .5; }
.secondary-page .site-nav--header:hover .site-nav__link:not(:hover) { opacity: .5 !important; }
.secondary-page .site-nav--header .site-nav__link:hover,
.secondary-page .site-nav--header .site-nav__link:focus-visible { color: #000 !important; opacity: 1 !important; }
.secondary-page .site-nav--header .site-nav__link:hover { opacity: 1 !important; }
.secondary-page .secondary-empty { flex: 1 0 auto; min-height: 0; }
.secondary-page > .site-footer { flex: 0 0 480px; margin-top: auto; opacity: 1 !important; visibility: visible !important; transform: none !important; background: #fff !important; color: #000 !important; }
.secondary-page > .site-footer .site-nav--footer { position: absolute; left: 50%; right: 78px; top: 24px; width: auto; height: 216px; transform: none; }
.secondary-page > .site-footer .site-nav--footer .site-nav__link { color: #000 !important; border-bottom-color: #3c3c3c !important; font-size: 24px; }
.secondary-page > .site-footer .site-nav--footer .site-nav__link { text-decoration: none; }
.secondary-page > .site-footer .site-nav--footer .site-nav__link { justify-content: flex-end; gap: 24px; }
.secondary-page > .site-footer .site-nav--footer .site-nav__link::before { color: #000; font-size: 18px; content: ""; }
.secondary-page > .site-footer .site-nav--footer .site-nav__link:nth-child(1)::before { content: "01"; }
.secondary-page > .site-footer .site-nav--footer .site-nav__link:nth-child(2)::before { content: "02"; }
.secondary-page > .site-footer .site-nav--footer .site-nav__link:nth-child(3)::before { content: "03"; }
.secondary-page > .site-footer .site-nav--footer:hover .site-nav__link { opacity: .5; }
.secondary-page > .site-footer .site-nav--footer .site-nav__link:hover,
.secondary-page > .site-footer .site-nav--footer .site-nav__link:focus-visible { color: #000 !important; opacity: 1; }
.secondary-page > .site-footer .site-footer__legal-link,
.secondary-page > .site-footer::after { color: #a9a9a9 !important; }
.secondary-page .site-footer .site-nav--footer:hover .site-nav__link { opacity: .5 !important; }
.secondary-page .site-footer .site-nav--footer .site-nav__link:hover,
.secondary-page .site-footer .site-nav--footer .site-nav__link:focus-visible { opacity: 1 !important; color: #000 !important; }
.secondary-page .site-shell > .site-footer { background: #000 !important; color: #fff !important; }
.secondary-page .site-shell > .site-footer .site-footer__logo-image--default { filter: none !important; }
.secondary-page .site-shell > .site-footer .site-nav--footer .site-nav__link { color: #fff !important; border-bottom-color: #3c3c3c !important; }
.secondary-page .site-shell > .site-footer .site-nav--footer .site-nav__link::before { color: #fff !important; }
.secondary-page .site-shell > .site-footer .site-footer__legal-link,
.secondary-page .site-shell > .site-footer::after { color: #3c3c3c !important; }
.secondary-page .site-shell > .site-footer .site-nav--footer .site-nav__link:hover,
.secondary-page .site-shell > .site-footer .site-nav--footer .site-nav__link:focus-visible { color: #fff !important; }
.secondary-page .site-shell > .site-footer .site-nav--footer .site-nav__link,
.secondary-page .site-shell > .site-footer .site-nav--footer .site-nav__link span { color: #fff !important; }

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: #000000; }
body {
  overflow: hidden;
  background: #000000;
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.loading-screen {
  position: fixed;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  background: var(--black);
}

.loading-ui {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.loading-screen.is-intro .loading-ui { pointer-events: none; }

.progress-track {
  --bar-width: 210px;
  --bar-height: 22px;
  --skew-offset: calc(var(--bar-height) * 0.32492);
  --fill-offset: calc(var(--bar-height) * 0.32492 * var(--desktop-scale));
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--bar-width) * var(--desktop-scale));
  height: calc(var(--bar-height) * var(--desktop-scale));
  transform: translate(-50%, -50%);
  background: var(--track);
  overflow: hidden;
  clip-path: polygon(
    calc(var(--skew-offset) * var(--desktop-scale)) 0,
    100% 0,
    calc(100% - (var(--skew-offset) * var(--desktop-scale))) 100%,
    0 100%
  );
  transition: opacity 0s linear;
}

.progress-fill {
  position: absolute;
  inset: 0 auto auto 0;
  width: calc(var(--progress, 0) * 1%);
  height: 100%;
  background: var(--white);
  clip-path: polygon(
    var(--fill-offset) 0,
    100% 0,
    calc(100% - var(--fill-offset)) 100%,
    0 100%
  );
  transition: width 80ms linear;
}

.progress-number {
  position: absolute;
  left: calc(72px * var(--desktop-scale));
  top: 50%;
  --number-base-transform: translateY(-50%);
  transform: var(--number-base-transform);
  min-width: calc(292px * var(--desktop-scale));
  color: var(--white);
  font-family: "Geologica", sans-serif;
  font-size: calc(88px * var(--desktop-scale));
  font-weight: 300;
  font-synthesis: none;
  font-variation-settings: "wght" 300, "CRSV" 0, "SHRP" 0, "slnt" 0;
  line-height: 0.98;
  letter-spacing: 0;
  font-variant-numeric: normal;
  font-feature-settings: normal;
  white-space: nowrap;
  user-select: none;
  will-change: clip-path;
}

.progress-number .digit { color: var(--white); }
.progress-number .digit.is-muted { color: var(--track); }

@media (orientation: portrait), (max-width: 700px) {
  .progress-track {
    --bar-width: 122px;
    --bar-height: 12px;
    --fill-offset: calc(var(--bar-height) * 0.32492 * var(--mobile-scale));
    width: calc(var(--bar-width) * var(--mobile-scale));
    height: calc(var(--bar-height) * var(--mobile-scale));
    clip-path: polygon(
      calc(var(--skew-offset) * var(--mobile-scale)) 0,
      100% 0,
      calc(100% - (var(--skew-offset) * var(--mobile-scale))) 100%,
      0 100%
    );
  }

  .progress-number {
    left: 50%;
    top: auto;
    bottom: calc(env(safe-area-inset-bottom) + 56px);
    min-width: 0;
    --number-base-transform: translateX(-50%);
    transform: var(--number-base-transform);
    font-size: calc(56px * var(--mobile-scale));
    line-height: 0.98;
  }
}

@media (prefers-reduced-motion: reduce) {
  .progress-fill { transition: none; }
}

/* The authored PNG sequence lives below the DOM loading UI. Its canvas is
   positioned by JavaScript using frame 00110's bar as the responsive anchor. */
.intro-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #000;
  opacity: 0;
  pointer-events: none;
  contain: strict;
}

.loading-screen.is-intro .intro-stage {
  opacity: 1;
  pointer-events: auto;
}

.sequence-canvas {
  position: absolute;
  left: var(--sequence-left);
  top: var(--sequence-top);
  width: var(--sequence-width);
  height: var(--sequence-height);
  transform-origin: 0 0;
  overflow: visible;
  will-change: left, top, width, height;
}

.sequence-surface {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  backface-visibility: hidden;
}

/* All decoded PNG frames are painted onto one persistent canvas. Avoiding
   alternating image layers prevents 30 Hz compositor flashes. */
.loading-screen.is-sequence-playing .progress-track { opacity: 0; }

.logo-closure {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  overflow: hidden;
  fill: #000;
  pointer-events: none;
  backface-visibility: hidden;
  shape-rendering: auto;
  will-change: opacity;
  transform: translateZ(0);
  isolation: isolate;
}

.logo-mark {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform;
  transform: translateZ(0);
}

.loading-screen.is-closing .sequence-surface {
  opacity: 0;
}

.loading-screen.is-closing .logo-closure {
  opacity: 1;
}

.loading-screen.is-closing .logo-mark {
  animation: logo-close 2182ms cubic-bezier(.22, 1, .36, 1) both;
}

.loading-screen.is-finished .intro-stage {
  opacity: 0;
  transition: opacity 0s linear;
}

/* Remove the finished intro surface as a paint source. This prevents the
   white closing background from leaking through for one compositor frame
   when the logo closure hands control to the home page. */
.loading-screen.is-finished .intro-stage {
  visibility: hidden;
}

.loading-screen.is-finished {
  /* Keep the finished intro transparent. The first screen supplies its own
     black surface; leaving this fixed layer white makes Safari/Chrome paint a
     white strip above the fixed header during top overscroll. */
  background: transparent !important;
}

@keyframes number-slice-out {
  /* The authored mask keeps the area below an 18° line. Its vertical rise is
     width × tan(18°), so the glyphs never skew and only the mask moves. */
  from {
    clip-path: polygon(
      0 calc(-1 * var(--number-wipe-rise)),
      100% 0,
      100% 100%,
      0 100%
    );
  }
  to {
    clip-path: polygon(
      0 100%,
      100% calc(100% + var(--number-wipe-rise)),
      100% 100%,
      0 100%
    );
  }
}

@keyframes logo-close {
  from { transform: scale(1); }
  to { transform: scale(32); }
}

.loading-screen.is-number-slicing .progress-number {
  min-width: 0;
  animation: number-slice-out 266.667ms linear both;
}

@media (prefers-reduced-motion: reduce) {
  .loading-screen.is-number-slicing .progress-number {
    animation-duration: 1ms;
  }
  .loading-screen.is-closing .logo-mark {
    animation-duration: 1ms;
  }
}

/* -------------------------------------------------------------------------
   Empty home chrome demo
   Kept outside the locked loading / intro implementation above.
   ------------------------------------------------------------------------- */
.site-shell {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  padding: 52px 72px 48px;
  background: #000;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-shell.is-header-revealed,
.site-shell.is-revealed {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.site-header,
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  opacity: 0;
  transform: translateY(-14px);
}

.site-header {
  --chrome-offset: -14px;
  align-self: start;
}

.site-footer {
  --chrome-offset: 14px;
  align-self: end;
  transform: translateY(14px);
}

.site-shell.is-header-revealed .site-header,
.site-shell.is-revealed .site-footer {
  animation: site-chrome-in 720ms cubic-bezier(.22, 1, .36, 1) both;
}

.site-shell.is-revealed .site-footer {
  animation-delay: 70ms;
}

/* The header starts on the early reveal signal and must not restart when the
   final black closing state dispatches intro:complete. */
.site-shell.is-revealed .site-header {
  animation: none;
  opacity: 1;
  transform: translateY(0);
}

.site-header__logo {
  position: relative;
  display: block;
  flex: 0 0 30px;
  width: 30px;
  height: 31px;
  color: #fff;
}

.site-header__logo-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: difference;
  object-fit: contain;
  transition: opacity 180ms ease, transform 180ms ease;
}

.site-header__logo-image--hover {
  opacity: 0;
}

.site-header__logo:hover .site-header__logo-image--default,
.site-header__logo:focus-visible .site-header__logo-image--default {
  opacity: 0;
}

.site-header__logo:hover .site-header__logo-image--hover,
.site-header__logo:focus-visible .site-header__logo-image--hover {
  opacity: 1;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.7vw, 48px);
}

.site-nav__link {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  font: 300 14px/1.15 "Geologica", sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: default;
  transition: opacity 180ms ease, color 180ms ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: #fff;
  outline: none;
}

.site-nav.is-hovering .site-nav__link:not(.is-hovered) {
  opacity: .5;
}

.site-nav__link.is-hovered {
  opacity: 1;
}

/* Match the supplied reference: controls over the dark card use Difference,
   while controls that have crossed into the white page margin switch to a
   solid black treatment. */
.site-nav--header .site-nav__link:not(.language-switch),
.site-nav--header .header-home-subitem {
  mix-blend-mode: difference;
}

/* The reference has an authored black header on the exposed white margin and
   white controls over the black first-screen card. */
.site-header__logo.is-on-light .site-header__logo-image,
.site-nav--header .site-nav__link.is-on-light,
.site-nav--header .header-home-subitem.is-on-light {
  mix-blend-mode: normal;
  filter: brightness(0);
  color: #000 !important;
}

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

.site-footer__logo-mark {
  display: block;
  width: 173px;
  height: 40px;
  background: #fff;
  -webkit-mask: url("./header&footer/footer logo.svg") center / contain no-repeat;
  mask: url("./header&footer/footer logo.svg") center / contain no-repeat;
  transition: background-color 180ms ease;
}

.site-footer__brand:hover .site-footer__logo-mark,
.site-footer__brand:focus-visible .site-footer__logo-mark {
  background: #B9E2EE;
}

.site-content {
  min-width: 0;
  min-height: 0;
  opacity: 0;
}

/* The hero title is timed from the same reveal signal as the header. The
   content wrapper must therefore be paintable at that moment; otherwise its
   parent opacity: 0 hides the title until the later content-reveal signal. */
.site-shell.is-header-revealed .site-content {
  opacity: 1;
}

.site-shell.is-content-revealed .site-content {
  animation: site-content-in 700ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes site-chrome-in {
  from { opacity: 0; transform: translateY(var(--chrome-offset, 0)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes site-content-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 700px), (orientation: portrait) {
  body.has-secondary-mobile-nav .site-nav--header { display: none !important; }
  body.has-secondary-mobile-nav .detail-mobile-menu-toggle {
    display: block;
    position: absolute; top: 9px; right: 0; z-index: 42; width: 19.2px; height: 14.4px; padding: 0; border: 0;
    background: linear-gradient(#000 0 2px, transparent 2px 6.2px, #000 6.2px 8.2px, transparent 8.2px 12.4px, #000 12.4px 14.4px);
  }
  body.has-secondary-mobile-nav .detail-mobile-menu-panel {
    display: block;
    position: fixed; inset: 0; z-index: 41; width: 100vw; height: 100dvh; padding: 96px 24px 24px; background: #fff;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms ease, visibility 180ms ease;
  }
  body.has-secondary-mobile-nav .detail-mobile-menu-panel nav { display: grid; }
  body.has-secondary-mobile-nav .detail-mobile-menu-panel a { display: grid; grid-template-columns: 1fr auto; padding: 17px 0; border-bottom: 1px solid #d1d1d1; color: #000; font: 400 24px/1.15 "Geologica", "PingFang SC", sans-serif; text-decoration: none; }
  body.has-secondary-mobile-nav .detail-mobile-menu-panel a span { justify-self: start; }
  body.has-secondary-mobile-nav .detail-mobile-menu-panel a b { justify-self: end; font-weight: 400; }
  body.has-secondary-mobile-nav .detail-mobile-menu-panel nav:has(a:hover) a:not(:hover),
  body.has-secondary-mobile-nav .detail-mobile-menu-panel nav:has(a:focus-visible) a:not(:focus-visible) { color: #a9a9a9; }
  body.has-secondary-mobile-nav .detail-mobile-menu-panel a:hover,
  body.has-secondary-mobile-nav .detail-mobile-menu-panel a:focus-visible { color: #000; }
  body.has-secondary-mobile-nav .detail-mobile-menu-open .detail-mobile-menu-panel { opacity: 1; visibility: visible; pointer-events: auto; }
  body.has-secondary-mobile-nav .detail-mobile-menu-open .detail-mobile-menu-toggle { background: linear-gradient(#000 0 2px, transparent 2px 14.4px); }
  body.secondary-page > main + .site-footer ~ * { display: none; }
  body.secondary-page:has(> main + .site-footer) .site-nav--header { display: none !important; }
  body.secondary-page:has(> main + .site-footer) .detail-mobile-menu-toggle {
    /* The detail-page header itself is already inset 24px from the viewport.
       Anchor to that header box so the button is not doubled to a 48px edge. */
    position: absolute; top: 9px; right: 0; z-index: 42; width: 19.2px; height: 14.4px; padding: 0; border: 0;
    background: linear-gradient(#000 0 2px, transparent 2px 6.2px, #000 6.2px 8.2px, transparent 8.2px 12.4px, #000 12.4px 14.4px);
    transform: translateY(0);
  }
  body.secondary-page:has(> main + .site-footer) .detail-mobile-menu-panel {
    position: fixed; inset: 0; z-index: 41; width: 100vw; height: 100dvh; padding: 96px 24px 24px; border-radius: 0;
    background: #fff; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms ease, visibility 180ms ease;
  }
  body.secondary-page:has(> main + .site-footer) .detail-mobile-menu-panel nav { display: grid; }
  body.secondary-page:has(> main + .site-footer) .detail-mobile-menu-panel a { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 17px 0; border-bottom: 1px solid #d1d1d1; color: #000; font: 400 24px/1.15 "Geologica", "PingFang SC", sans-serif; text-decoration: none; }
  body.secondary-page:has(> main + .site-footer) .detail-mobile-menu-panel a span { justify-self: start; }
  body.secondary-page:has(> main + .site-footer) .detail-mobile-menu-panel a b { justify-self: end; font-weight: 400; }
  body.secondary-page:has(> main + .site-footer) .detail-mobile-menu-panel a.is-tapped { color: #a9a9a9; }
  /* When a navigation item is hovered/focused, keep it dark and mute the
     remaining items to the reference gray. */
  body.secondary-page:has(> main + .site-footer) .detail-mobile-menu-panel nav:has(a:hover) a:not(:hover),
  body.secondary-page:has(> main + .site-footer) .detail-mobile-menu-panel nav:has(a:focus-visible) a:not(:focus-visible) { color: #a9a9a9; }
  body.secondary-page:has(> main + .site-footer) .detail-mobile-menu-panel a:hover,
  body.secondary-page:has(> main + .site-footer) .detail-mobile-menu-panel a:focus-visible { color: #000; }
  body.secondary-page:has(> main + .site-footer) .detail-mobile-menu-open .detail-mobile-menu-panel { opacity: 1; visibility: visible; pointer-events: auto; }
  body.secondary-page:has(> main + .site-footer) .detail-mobile-menu-open .detail-mobile-menu-toggle { background: linear-gradient(#000 0 2px, transparent 2px 14.4px); }
  /* Job-detail pages use a direct main + footer structure. Keep their footer
     at the document bottom without touching the shell-based pages. */
  body.secondary-page > main + .site-footer {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-height: 362px !important;
    height: 362px !important;
    margin-top: 0 !important;
    clear: both;
    display: block !important;
  }
  body.secondary-page:has(> main + .site-footer) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
  }
  body.secondary-page:has(> main + .site-footer) > main {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 1;
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-bottom: 60px !important;
  }
  body.secondary-page:has(> main + .site-footer) > main > aside,
  body.secondary-page:has(> main + .site-footer) > main > article {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.secondary-page:has(> main + .site-footer) > main > a {
    display: block !important;
    width: 21.333px !important;
    height: 21.333px !important;
    margin-bottom: 36px !important;
  }
  body.secondary-page:has(> main + .site-footer) > main > a img {
    width: 21.333px !important;
    height: 21.333px !important;
  }
  body.secondary-page:has(> main + .site-footer) > main > aside h1 {
    margin-bottom: 36px !important;
    font-size: 24px !important;
  }
  body.secondary-page:has(> main + .site-footer) > main > aside > p {
    margin: 8px 0 4px !important;
    font-size: 9px !important;
  }
  body.secondary-page:has(> main + .site-footer) > main > aside > div {
    width: 100% !important;
    padding: 4px 0 !important;
    font-size: 12px !important;
  }
  body.secondary-page:has(> main + .site-footer) > main > aside {
    margin-bottom: 36px !important;
  }
  body.secondary-page:has(> main + .site-footer) > main > article h2 {
    font-size: 18px !important;
  }
  body.secondary-page:has(> main + .site-footer) > main > article,
  body.secondary-page:has(> main + .site-footer) > main > article li,
  body.secondary-page:has(> main + .site-footer) > main > article li::before,
  body.secondary-page:has(> main + .site-footer) > main > article p {
    font-size: 12px !important;
  }
  body.secondary-page:has(> main + .site-footer) > .site-footer {
    height: 332px !important;
    min-height: 332px !important;
  }
  body.secondary-page:has(> main + .site-footer) > .site-footer .site-nav--footer {
    left: 24px !important;
    right: 24px !important;
    top: auto !important;
    bottom: 66px !important;
    width: auto !important;
  }
  body.secondary-page:has(> main + .site-footer) > .site-footer::after {
    bottom: 24px !important;
  }
  body.secondary-page > main + .site-footer .site-nav--footer {
    top: auto !important;
    bottom: 54px !important;
    height: 180px !important;
    grid-template-rows: repeat(3, 60px) !important;
  }
  body.secondary-page:has(> main + .site-footer) > .site-footer {
    height: 332px !important;
    min-height: 332px !important;
  }
  body.secondary-page:has(> main + .site-footer) > .site-footer::after {
    left: 24px !important;
    bottom: 24px !important;
    font-size: 12px !important;
  }
  body.secondary-page > main + .site-footer::after {
    bottom: 24px !important;
  }
  body.secondary-page > main + .site-footer {
    height: 318px !important;
    min-height: 318px !important;
  }
  .site-shell {
    padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
  }

  .site-nav {
    gap: 16px;
  }

  .site-nav__link {
    font-size: 12px;
  }

  .site-header__logo {
    flex-basis: 26px;
    width: 26px;
    height: 27px;
  }

  .site-footer__logo-mark {
    width: 130px;
    height: 30px;
  }
}

/* Detail pages keep a 240px inline main bottom margin on desktop. Offset the
   excess 150px only for their sibling footer so the effective gap is 90px. */
@media (min-width: 701px) {
  body.secondary-page > main + .site-footer {
    margin-top: 0 !important;
    top: auto !important;
    position: relative !important;
  }
}

/* Keep direct-detail pages in one unambiguous vertical document flow. */
body.secondary-page:has(> main + .site-footer) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.secondary-page:has(> main + .site-footer) > main { flex: 0 0 auto; }
body.secondary-page:has(> main + .site-footer) > .site-footer { flex: 0 0 auto; }

/* Desktop job-detail pages retain their existing layout while reducing the
   application-to-footer separation to 90px. */
@media (min-width: 701px) and (orientation: landscape) {
  body.secondary-page:has(> main + .site-footer) > .site-footer {
    margin-top: 0 !important;
    top: auto !important;
    position: relative !important;
  }
}

/* -------------------------------------------------------------------------
   Imported middle pages from zigleap-site.
   The first screen and chrome stay authored above; these sections use the
   current site's 12-column content grid instead of the source site's layout.
   ------------------------------------------------------------------------- */
.second-screen {
  width: 100%;
  min-height: 0;
  margin-top: 100dvh;
  background: #fff;
}

.zigleap-content {
  width: 100%;
  color: #0b0b0c;
  background: #fff;
  font-family: "Geologica", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.zigleap-section {
  --section-content-opacity: 1;
  padding: calc(150px * var(--page-scale)) var(--page-content-margin);
}

.zigleap-section > * {
  opacity: var(--section-content-opacity);
  transition: opacity 40ms linear;
}

.home-hero-copy {
  --section-content-opacity: 1;
  opacity: var(--section-content-opacity);
}

.home-hero-copy__eyebrow,
.home-hero-copy__title,
.home-hero-copy__line {
  opacity: var(--section-content-opacity);
}

.zigleap-section__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 var(--page-grid-gap);
}

.zigleap-kicker {
  grid-column: 1 / span 2;
  margin: 4px 0 0;
  color: #888;
  font-size: calc(12px * var(--page-scale));
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.3;
}

.zigleap-section__body {
  grid-column: 3 / -1;
  min-width: 0;
}

.zigleap-section h2 {
  margin: 0;
  font-size: calc(54px * var(--page-scale));
  font-weight: 300;
  letter-spacing: -.06em;
  line-height: 1.2;
}

.zigleap-section h2 strong { font-weight: 600; }
.zigleap-about h2 { font-size: calc(72px * var(--page-scale)); }
.zigleap-section p { line-height: 1.7; }

/* About: keep the two image-following text blocks on the same measure. */
.zigleap-about .zigleap-positioning { max-width: 760px; }

.zigleap-positioning {
  max-width: 980px;
  margin: calc(54px * var(--page-scale)) 0 0;
  font-size: calc(34px * var(--page-scale));
  line-height: 1.35 !important;
}

.zigleap-about-image {
  display: block;
  width: 100%;
  height: auto;
  margin: calc(44px * var(--page-scale)) 0 0;
}

.zigleap-belief {
  max-width: 760px;
  margin: calc(28px * var(--page-scale)) 0 0;
  color: #777;
  font-size: calc(16px * var(--page-scale));
}

.zigleap-purpose-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(46px * var(--page-scale));
  border-top: 1px solid #d5d5d2;
  border-bottom: 1px solid #d5d5d2;
  padding: calc(24px * var(--page-scale)) 0 calc(28px * var(--page-scale));
}

.zigleap-purpose-strip span,
.zigleap-cap-grid small {
  color: #777;
  font-size: calc(11px * var(--page-scale));
  letter-spacing: .08em;
}

.zigleap-purpose-strip p,
.zigleap-principle strong {
  margin: calc(16px * var(--page-scale)) 0 0;
  font-size: calc(18px * var(--page-scale));
  line-height: 1.55 !important;
}

.zigleap-principle strong { display: block; font-weight: 500; }
.zigleap-principle p { color: #777; font-size: calc(13px * var(--page-scale)); }

.zigleap-section--dark {
  color: #f7f7f5;
  background: #0a0a0b;
}

#capabilities {
  color: #0b0b0c;
  background: #ffffff;
  border-top: 1px solid #d1d1ce;
  border-bottom: 1px solid #d1d1ce;
}

.zigleap-capabilities__title {
  white-space: nowrap;
}

.zigleap-capabilities__media {
  position: relative;
  width: 100%;
  margin-top: calc(44px * var(--page-scale));
}

.zigleap-capabilities__image {
  display: block;
  width: 100%;
  height: auto;
}

.zigleap-capabilities__image--overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms ease-in-out;
}

.zigleap-capabilities__media.is-model-transitioning .zigleap-capabilities__image--overlay {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .zigleap-capabilities__image--overlay {
    transition: none;
  }
}

.zigleap-capabilities__caption {
  max-width: 980px;
  margin-top: calc(54px * var(--page-scale));
}

.zigleap-section--dark .zigleap-kicker { color: #777; }
.zigleap-section-head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(30px * var(--page-scale)); margin-bottom: calc(90px * var(--page-scale)); }
.zigleap-section-head > h2 { grid-column: 1 / span 2; }
.zigleap-section-head > p { grid-column: 3; align-self: end; max-width: 390px; margin: 0; color: #aaa; font-size: calc(15px * var(--page-scale)); }

.zigleap-cap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #333; background: #1E1E1E; }
.zigleap-cap-grid article { display: grid; grid-template-columns: calc(48px * var(--page-scale)) minmax(0, 1fr); gap: calc(22px * var(--page-scale)); padding: calc(36px * var(--page-scale)) calc(44px * var(--page-scale)) calc(44px * var(--page-scale)) 0; border-bottom: 1px solid #333; }
.zigleap-cap-grid article:nth-child(odd) { border-right: 1px solid #333; padding-right: calc(60px * var(--page-scale)); }
.zigleap-cap-grid article:nth-child(even) { padding-left: calc(60px * var(--page-scale)); }
.zigleap-cap-grid b { color: #777; font-size: calc(12px * var(--page-scale)); font-weight: 400; }
.zigleap-cap-grid small { color: #ffffff; }
.zigleap-cap-grid h3 { max-width: 9em; margin: calc(14px * var(--page-scale)) 0; color: #ffffff; font-size: calc(46px * var(--page-scale)); font-weight: 500; line-height: 1.15; }
.zigleap-cap-grid p { margin: 0; color: #999; font-size: calc(14px * var(--page-scale)); }
.zigleap-cap-link { display: inline-flex; margin-top: calc(18px * var(--page-scale)); color: #ffffff; font-size: calc(13px * var(--page-scale)); text-decoration: none; }

.zigleap-section--world { background: #ffffff; }
.zigleap-world-layout { display: block; }
.zigleap-world-copy { display: block; }
.zigleap-world-copy h2 { white-space: nowrap; }
.zigleap-path h2 { white-space: nowrap; }
.zigleap-path h2 br { display: none; }
.zigleap-world-copy h2 br { display: none; }
.zigleap-world-copy > p { max-width: none; margin: calc(24px * var(--page-scale)) 0 0; color: #777; font-size: calc(15px * var(--page-scale)); }
.zigleap-world-copy .zigleap-lead { margin-top: 0; color: #111; font-size: calc(34px * var(--page-scale)); }
.zigleap-evolution-image {
  display: block;
  width: 100%;
  height: auto;
  margin: calc(44px * var(--page-scale)) 0 calc(36px * var(--page-scale));
}

.zigleap-path {
  padding-bottom: calc(180px * var(--page-scale));
  background: #0a0a0b url("./home/04 PATH TO HOME Background.png?v=20260826-path-bg2") center center / cover no-repeat;
}
@media (min-width: 1800px) and (orientation: landscape) {
  .zigleap-section#path { background-position: center top; }
}
.zigleap-path .zigleap-kicker { color: #ffffff; }
.zigleap-path .zigleap-section-head > p { color: #ffffff; }
.zigleap-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(30px * var(--page-scale)); }
.zigleap-timeline article { border-top: 1px solid rgba(255,255,255,.3); padding-top: calc(20px * var(--page-scale)); }
.zigleap-timeline article > div { display: flex; justify-content: space-between; color: #777; }
.zigleap-timeline i { display: none; }
.zigleap-path .zigleap-timeline article > div,
.zigleap-path .zigleap-timeline article > div span { color: #ffffff; }
.zigleap-timeline .is-active i { background: #fff; }
.zigleap-timeline h3 { margin: calc(62px * var(--page-scale)) 0 calc(16px * var(--page-scale)); font-size: calc(25px * var(--page-scale)); font-weight: 500; }
.zigleap-timeline p { max-width: 310px; margin: 0; color: #999; font-size: calc(14px * var(--page-scale)); }

.zigleap-join { color: #fff; background: #000; border-top: 1px solid #333; }
.zigleap-join__body { position: relative; }
.zigleap-join .zigleap-kicker { color: #888; }
.zigleap-join__button { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: fit-content; min-width: calc(47.5px * var(--page-scale)); height: calc(42px * var(--page-scale)); margin: 0; padding: 0 calc(60px * var(--page-scale)); border-radius: 999px; color: #000; background: #fff; font-size: calc(15px * var(--page-scale)); font-weight: 500; text-decoration: none; transition: background-color 180ms ease; }
.zigleap-join__button img { width: calc(19.2px * var(--page-scale)); height: calc(19.2px * var(--page-scale)); margin-left: calc(12px * var(--page-scale)); filter: brightness(0); }
.zigleap-join__button:hover, .zigleap-join__button:focus-visible { color: #000; background: #a9a9a9; }
.zigleap-join__principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(40px * var(--page-scale)); margin-top: calc(90px * var(--page-scale)); border-top: 1px solid #333; }
.zigleap-join__principles article { display: grid; grid-template-columns: 1fr; align-items: start; gap: calc(22.4px * var(--page-scale)); padding: calc(56px * var(--page-scale)) 0; border-bottom: 1px solid #333; }
.zigleap-join__principles article:nth-child(1) { position: relative; border-right: 0; }
.zigleap-join__principles article > span { color: #888; font-size: calc(14px * var(--page-scale)); text-align: left !important; }
.zigleap-join__principles article:nth-child(-n + 2) { padding-top: calc(64px * var(--page-scale)); padding-bottom: calc(64px * var(--page-scale)); }
.zigleap-join__principles article:nth-child(3) { grid-column: 1 / -1; }
.zigleap-join__principles article > span { position: relative; top: calc(4px * var(--page-scale)); margin-top: 0; color: #888; font-size: calc(12px * var(--page-scale)); line-height: 1.2; text-align: center; }
.zigleap-join__principles h3 { margin: 0 0 calc(14px * var(--page-scale)); font-size: calc(22px * var(--page-scale)); font-weight: 500; line-height: 1.2; text-align: left; }
.zigleap-join__principles h3 em { color: #888; font-style: normal; font-weight: 400; }
.zigleap-join__principles p { max-width: 760px; margin: 0; color: #aaa; font-size: calc(16px * var(--page-scale)); }
.zigleap-join__principles-en { color: #fff; font-size: calc(22px * var(--page-scale)); }
/* PRINCIPLES uses the full width of its spanning card for the English title. */
.zigleap-join__principles article:nth-child(3) p { max-width: none; }
.zigleap-join__principles article:nth-child(3) .zigleap-join__principles-en { display: block; width: 100%; }
.zigleap-join__closing { margin: 0; font-size: calc(54px * var(--page-scale)); font-weight: 300; letter-spacing: -.06em; line-height: 1.2 !important; }
.zigleap-join__closing strong { font-weight: 600; }

@media (max-width: 700px), (orientation: portrait) {
  .zigleap-section { padding: 90px 24px; }
  .zigleap-section__grid { display: block; }
  .zigleap-kicker { margin-bottom: 54px; font-size: 12px; }
  .zigleap-section h2 { font-size: 36px; }
  .zigleap-positioning { margin-top: 36px; font-size: 28px; }
  .zigleap-belief { margin-bottom: 48px; font-size: 15px; }
  .zigleap-purpose-strip, .zigleap-cap-grid, .zigleap-world-layout, .zigleap-timeline { display: block; }
  .zigleap-world-copy { display: block; }
  .zigleap-join__button { position: static; margin-top: calc(56px * var(--page-scale)); }
  .zigleap-purpose-strip article { padding: 18px 0; border-bottom: 1px solid #d5d5d2; }
  .zigleap-purpose-strip article:last-child { border-bottom: 0; }
  .zigleap-section-head { display: block; margin-bottom: 56px; }
  .zigleap-section-head > p { margin-top: 28px; }
  .zigleap-join__principles { display: block; }
  .zigleap-join__principles article:nth-child(1) { border-right: 0; }
  .zigleap-join__principles article:nth-child(1)::after { display: none; }
  .zigleap-join__principles article:nth-child(3) { grid-column: auto; }
  .zigleap-capabilities__title { white-space: normal; }
  .zigleap-world-copy h2 { white-space: normal; }
  .zigleap-world-layout > * + * { margin-top: 55px; }
  .zigleap-timeline article { margin-bottom: 52px; }
}

/* The footer now follows the imported page sections in normal document flow;
   its authored dimensions and visual rules remain unchanged. */
.site-shell > .site-footer {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  margin: 0;
}

/* Footer light variant. Hover behavior remains unchanged; only the default
   surface, logo, navigation, dividers and legal copy switch to the supplied
   light palette. */
.site-shell > .site-footer {
  background: #000 !important;
  color: #fff !important;
}

.site-shell > .site-footer .site-footer__logo-image--default {
  filter: none !important;
}

.site-shell > .site-footer .site-nav--footer .site-nav__link {
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.9);
}

.site-shell > .site-footer .site-footer::after,
.site-shell > .site-footer::after,
.site-shell > .site-footer .site-footer__legal-link,
.site-shell > .site-footer .site-footer__legal-link:disabled {
  color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
  .site-header__logo-image,
  .site-nav__link,
  .site-footer__logo-mark {
    transition: none;
  }

  .site-shell.is-revealed .site-header,
  .site-shell.is-revealed .site-footer,
  .site-shell.is-content-revealed .site-content {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}

/* -------------------------------------------------------------------------
   Responsive page grid specification
   Baseline: MacBook Pro 14 full viewport, 1512 × 982.
   Header/Footer keep independent 24px outer margins on all four sides.
   This layer only affects the page chrome/content shell; loading and intro
   rules above remain locked.
   ------------------------------------------------------------------------- */
:root {
  --page-scale: 1;
  --footer-scale: 1;
  --page-baseline-width: 1512px;
  --page-baseline-height: 982px;
  --page-content-max-width: 1512px;
  --page-content-margin: calc(78px * var(--page-scale));
  --page-grid-gap: calc(24px * var(--page-scale));
  --chrome-outer-margin: calc(24px * var(--page-scale));
}

.site-shell {
  padding: 0;
}

.site-header,
.site-footer {
  width: calc(100% - (2 * var(--chrome-outer-margin)));
  margin: var(--chrome-outer-margin);
}

.site-header__logo {
  flex-basis: calc(30px * var(--page-scale));
  width: calc(30px * var(--page-scale));
  height: calc(31px * var(--page-scale));
}

.site-nav {
  gap: calc(72px * var(--page-scale));
  margin-right: 0;
}

.site-nav__link {
  font-size: calc(14px * var(--page-scale));
}

.site-footer__logo-mark {
  width: calc(173px * var(--page-scale));
  height: calc(40px * var(--page-scale));
}

.site-content {
  display: block;
  width: min(100%, var(--page-content-max-width));
  margin: 0 auto;
  padding-inline: var(--page-content-margin);
}

.site-content__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--page-grid-gap);
  width: 100%;
  min-height: 100%;
}

@media (max-width: 700px), (orientation: portrait) {
  :root {
    --page-content-margin: 24px;
    --page-grid-gap: 16px;
    --chrome-outer-margin: 24px;
  }

  .site-nav {
    gap: 16px;
    margin-right: 0;
  }

  .site-nav__link {
    font-size: 12px;
  }

  .site-content {
    width: 100%;
    padding-inline: 24px;
  }

  .site-content__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px), (orientation: portrait) {
  /* Mobile uses its dedicated composition after the desktop scaling range. */
  .site-header__logo {
    flex-basis: 26px;
    width: 26px;
    height: 27px;
  }

  .site-footer__logo-mark {
    width: 130px;
    height: 30px;
  }

  .site-header,
  .site-footer {
    width: calc(100% - 48px);
    margin: 24px;
  }
}
/* -------------------------------------------------------------------------
   Supplied header / footer reference alignment.
   Baseline: MacBook 14 viewport 1512 × 982. The loading and intro rules
   above remain locked and are not modified by this layer.
   ------------------------------------------------------------------------- */
.site-header {
  position: relative;
  height: calc(31px * var(--page-scale));
  align-items: flex-start;
}

.site-nav--header {
  position: absolute;
  left: auto;
  right: calc(54px * var(--page-scale));
  width: max-content;
  top: 0;
  height: calc(31px * var(--page-scale));
  display: flex;
  align-items: flex-start;
  gap: calc(72px * var(--page-scale));
  padding: 0;
  z-index: 4;
  pointer-events: auto;
}

.site-nav--header .site-nav__link {
  position: relative;
  top: calc(1px * var(--page-scale));
  width: max-content;
  white-space: nowrap;
}
.site-nav--header .site-nav__link:nth-child(1) { left: 0; }
.site-nav--header .site-nav__link:nth-child(2),
.site-nav--header .site-nav__link:nth-child(3),
.site-nav--header .site-nav__link:nth-child(4) { left: 0; right: auto; }

/* HOME expands into the supplied four-section submenu on hover. */
.site-nav--header > .header-home-group {
  position: relative;
  width: max-content;
  flex: 0 0 auto;
  top: 0;
  left: 0;
  height: calc(180px * var(--page-scale));
}

.site-nav--header > .header-home-group > .header-home-trigger {
  left: 0;
  top: calc(1px * var(--page-scale));
}

.header-home-expanded {
  position: absolute;
  /* Keep the divider below the 31px ZIGLEAP trigger; the 5px visual gap is
     half of the original spacing without overlapping the trigger. */
  top: calc(36px * var(--page-scale));
  left: 0;
  width: max-content;
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-4px * var(--page-scale)));
  transition: opacity 180ms ease;
}

.header-home-submenu {
  position: static;
  display: grid;
  gap: calc(7px * var(--page-scale));
  width: max-content;
}

.header-home-divider {
  width: 100%;
  margin-bottom: calc(9px * var(--page-scale));
  border-top: 0.5px solid #747474;
}

.header-home-group:hover .header-home-expanded,
.header-home-group:focus-within .header-home-expanded {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.header-home-subitem {
  display: grid;
  /* Size the number track to the glyph itself so the visible gap is exactly
     the authored 4px, rather than including unused width in a fixed column. */
  grid-template-columns: max-content max-content max-content;
  gap: calc(9px * var(--page-scale));
  width: max-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: #a9a9a9 !important;
  font: 300 calc(14px * var(--page-scale))/1.15 "Geologica", sans-serif;
  text-align: left;
  white-space: nowrap;
  cursor: default;
  text-decoration: none !important;
  transition: color 180ms ease;
}

.header-home-subitem__index {
  color: inherit;
}

.header-home-subitem__zh { font-weight: 400; }
.header-home-subitem__en { font-weight: 300; }

.site-nav--header .header-home-group.is-subitem-hovering .header-home-trigger,
.site-nav--header .header-home-group.is-subitem-hovering .header-home-subitem.is-hovered {
  color: #fff;
  opacity: 1;
}

.site-nav--header .header-home-group.is-subitem-hovering .header-home-subitem:not(.is-hovered) {
  color: #747474;
}

/* Use explicit anchors so the nested HOME group and the two direct links share
   exactly the same horizontal baseline. */
.site-nav--header > .site-nav__link[data-nav-item="chronicle"] { left: 0; }
.site-nav--header > .site-nav__link[data-nav-item="career"] { left: 0; }

.site-nav--header > .site-nav__link[data-nav-item="contact"] {
  left: 0;
  right: auto;
}

.site-nav--header > .site-nav__link[data-nav-item="chronicle"],
.site-nav--header > .site-nav__link[data-nav-item="career"],
.site-nav--header > .site-nav__link[data-nav-item="contact"] {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 400;
}

.site-nav--header > .site-nav__link[data-nav-item="chronicle"],
.site-nav--header > .site-nav__link[data-nav-item="career"],
.site-nav--header > .site-nav__link[data-nav-item="contact"] {
  /* Expand the hit area without moving the visible text baseline. */
  top: calc(-9px * var(--page-scale));
  height: calc(51px * var(--page-scale));
  padding-top: calc(10px * var(--page-scale));
  margin: 0;
  transform: translateY(calc(-4px * var(--page-scale)));
}

/* Final alignment override: HOME, CAREER and CONTACT share one exact text
   baseline even though HOME is wrapped by its expandable submenu. */
.site-nav--header > .header-home-group {
  top: calc(1px * var(--page-scale));
}

.site-nav--header > .header-home-group > .header-home-trigger {
  top: 0;
  height: calc(31px * var(--page-scale));
  padding: 0;
  margin: 0;
  transform: translateY(calc(2px * var(--page-scale)));
  font-size: calc(14px * var(--page-scale));
}

.site-nav--header:has(.header-home-group:hover) > .site-nav__link:not(.language-switch),
.site-nav--header:has(.header-home-group:focus-within) > .site-nav__link:not(.language-switch) {
  opacity: 0.5;
}

.site-nav--header:has(.header-home-group:hover) .header-home-trigger,
.site-nav--header:has(.header-home-group:focus-within) .header-home-trigger {
  opacity: 1;
  color: #fff;
}

/* Keep header hover feedback above the scrolling content and preserve the
   correct foreground color after the header crosses onto a light section. */
.site-nav--header .site-nav__link:hover,
.site-nav--header .site-nav__link:focus-visible {
  opacity: 1;
}

.site-nav--header .site-nav__link.is-on-light:hover,
.site-nav--header .site-nav__link.is-on-light:focus-visible {
  color: #000 !important;
}

/* Preserve the same hover hierarchy on light sections while retaining the
   contrast-aware black treatment. */
.site-nav--header:has(.header-home-group:hover) .header-home-trigger.is-on-light,
.site-nav--header:has(.header-home-group:focus-within) .header-home-trigger.is-on-light,
.site-nav--header .header-home-group.is-subitem-hovering .header-home-trigger.is-on-light,
.site-nav--header .header-home-group.is-subitem-hovering .header-home-subitem.is-hovered.is-on-light {
  color: #000 !important;
}

.site-nav--header .header-home-group.is-subitem-hovering .header-home-subitem:not(.is-hovered).is-on-light {
  color: #747474 !important;
}

/* ZIGLEAP submenu palette while the header crosses a light home section. */
.site-nav--header:has(.header-home-trigger.is-on-light) .header-home-divider {
  border-top-color: #A9A9A9;
}
.site-nav--header .header-home-subitem.is-on-light,
.site-nav--header .header-home-group.is-subitem-hovering .header-home-subitem:not(.is-hovered).is-on-light {
  color: #A9A9A9 !important;
}
.site-nav--header .header-home-group.is-subitem-hovering .header-home-subitem.is-hovered.is-on-light {
  color: #000000 !important;
}
.site-nav--header:has(.header-home-trigger.is-on-light) .header-home-subitem:not(.is-hovered) {
  color: #A9A9A9 !important;
}
.site-nav--header:has(.header-home-trigger.is-on-light) .header-home-subitem:not(:hover) {
  color: #A9A9A9 !important;
}
.site-nav--header:has(.header-home-trigger.is-on-light):not(:has(.header-home-subitem:hover)) .header-home-subitem {
  color: #A9A9A9 !important;
}
.site-nav--header:has(.header-home-trigger.is-on-light) .header-home-subitem,
.site-nav--header:has(.header-home-trigger.is-on-light) .header-home-subitem.is-hovered,
.site-nav--header:has(.header-home-trigger.is-on-light) .header-home-subitem:hover {
  color: #A9A9A9 !important;
}

/* Submenu interaction colors: default muted, with contrast-aware hover. */
.header-home-subitem:hover,
.header-home-subitem:focus-visible {
  color: #fff !important;
}
.site-nav--header:has(.header-home-trigger.is-on-light) .header-home-subitem:hover,
.site-nav--header:has(.header-home-trigger.is-on-light) .header-home-subitem:focus-visible {
  color: #3c3c3c !important;
}
.site-nav--header:has(.header-home-trigger.is-on-light) .header-home-subitem:not(:hover):not(:focus-visible),
.site-nav--header .header-home-subitem.is-on-light:not(:hover):not(:focus-visible) {
  color: #a9a9a9 !important;
}

/* On light sections the submenu must not inherit any difference-blend or
   hover color from the surrounding header; keep its idle state explicit. */
.site-nav--header .header-home-subitem.is-on-light:not(:hover):not(:focus-visible) {
  mix-blend-mode: normal !important;
  color: #a9a9a9 !important;
}

html { scroll-behavior: smooth; }
.detail-mobile-menu-toggle,
.detail-mobile-menu-panel { display: none; }
.site-nav--header:has(.header-home-trigger.is-on-light) .header-home-subitem.is-hovered {
  color: #A9A9A9 !important;
}

/* Final light-surface idle state. The shared header contrast rule applies
   brightness(0) to .is-on-light; that filter made the intended gray appear
   black even when the color declaration was overridden. */
.site-nav--header .header-home-subitem.is-on-light:not(:hover):not(:focus-visible),
.site-nav--header:has(.header-home-trigger.is-on-light) .header-home-subitem:not(:hover):not(:focus-visible) {
  filter: none !important;
  mix-blend-mode: normal !important;
  color: #a9a9a9 !important;
}

/* Compact header navigation for narrow screens. */
.mobile-menu-toggle,
.mobile-header-menu { display: none; }

@media (max-width: 700px) {
  .site-header { z-index: 20; }
  .site-nav--header { display: none; }
  .mobile-menu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    width: 19.2px;
    height: 19.2px;
    padding: 2px 0;
    border: 0;
    background: transparent;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 22;
  }
  .mobile-menu-toggle span { display: block; width: 19.2px; height: 1px; background: currentColor; transition: transform 180ms ease, opacity 180ms ease; }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mobile-header-menu {
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    display: grid;
    padding: 0 0 4px;
    background: #fff;
    color: #000;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 21;
  }
  .mobile-header-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .mobile-header-menu button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #000;
    background: transparent;
    color: #000;
    font: 400 14px/1 "Noto Sans SC", "PingFang SC", sans-serif;
    cursor: pointer;
    transition: color 180ms ease;
  }
  .mobile-header-menu button:first-child { border-top: 1px solid #000; }
  .mobile-header-menu button:hover,
  .mobile-header-menu button:focus-visible { color: #000; }
  .mobile-header-menu:hover button:not(:hover),
  .mobile-header-menu:focus-within button:not(:focus-visible) { color: #a9a9a9; }
  .mobile-header-menu__index { text-align: left; }
  .mobile-header-menu__label { text-align: right; }
}


@media (max-width: 700px), (orientation: portrait) {
  .site-nav--header > .header-home-group {
    width: 100px;
    height: 150px;
  }

  .header-home-submenu {
    gap: 10px;
  }

  .header-home-subitem {
    grid-template-columns: max-content max-content max-content;
    gap: 9px;
    font-size: 12px;
  }

}

.site-footer {
  position: relative;
  width: 100%;
  min-height: calc(480px * var(--page-scale));
  height: calc(480px * var(--page-scale));
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
}

.site-footer__brand {
  position: absolute;
  left: calc(24px * var(--page-scale));
  top: calc(24px * var(--page-scale));
}

.site-footer__logo-mark {
  width: calc(260px * var(--page-scale));
  height: calc(60px * var(--page-scale));
  background: #fff;
  -webkit-mask: url("./header&footer/footer logo.svg") center / contain no-repeat;
  mask: url("./header&footer/footer logo.svg") center / contain no-repeat;
}

.site-nav--footer {
  position: absolute;
  left: calc(768px * var(--page-scale));
  right: calc(24px * var(--page-scale));
  top: calc(24px * var(--page-scale));
  width: auto;
  height: calc(216px * var(--page-scale));
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: calc(62px * var(--page-scale)) calc(77px * var(--page-scale)) calc(77px * var(--page-scale));
  gap: 0;
  align-items: center;
}

.site-nav--footer .site-nav__link {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-column: 1 / -1;
  border-bottom: 1px solid rgba(255,255,255,.9);
  color: #fff;
  font-size: calc(24px * var(--page-scale));
  line-height: 1;
  text-transform: none;
}
.site-nav--footer .site-nav__link:nth-child(1) { grid-row: 1; }
.site-nav--footer .site-nav__link:nth-child(2) { grid-row: 2; }
.site-nav--footer .site-nav__link:nth-child(3) { grid-row: 3; }
.site-nav--footer .site-nav__index {
  font-size: calc(18px * var(--page-scale));
  line-height: 1;
}
.site-nav--footer .site-nav__label {
  font-size: inherit;
  line-height: inherit;
}

/* The footer reference also includes the small copyright line at bottom left. */
.site-footer::after {
  content: '©2026 Zigleap AI';
  position: absolute;
  left: calc(24px * var(--page-scale));
  bottom: calc(24px * var(--page-scale));
  color: #fff;
  font: 300 calc(14px * var(--page-scale))/1.2 "Geologica", sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Legal links are authored in the supplied footer reference. */
.site-footer__legal {
  position: absolute;
  right: calc(24px * var(--page-scale));
  bottom: calc(24px * var(--page-scale));
  display: flex;
  align-items: center;
  gap: calc(60px * var(--page-scale));
  margin: 0;
  padding: 0;
}

.site-footer__legal-link {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  font: 300 calc(14px * var(--page-scale))/1.2 "Geologica", sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: default;
  opacity: 1;
  transition: opacity 180ms ease;
}

.site-footer__legal-link:disabled {
  color: #fff;
  opacity: 1;
}

@media (max-width: 700px), (orientation: portrait) {
  .site-header { height: 27px; }
  .site-header__logo { flex-basis: 26px; width: 26px; height: 27px; }
  .site-nav--header {
    position: static;
    width: auto;
    height: 27px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 16px;
    padding: 0;
  }
  .site-nav--header .site-nav__link {
    position: static;
    font-size: 12px;
  }

  .site-footer {
    height: 362px;
    min-height: 362px;
  }
  .site-footer__brand { left: 24px; top: 24px; }
  .site-footer__logo-mark { width: 130px; height: 30px; }
  .site-nav--footer {
    left: 24px;
    right: 24px;
    top: 84px;
    bottom: auto;
    height: 180px;
    grid-template-rows: repeat(3, 60px);
  }
  .site-nav--footer .site-nav__link { font-size: 18px; }
  .site-nav--footer .site-nav__index { font-size: 13px; }
  .site-footer__legal {
    right: 24px;
    bottom: 24px;
    gap: 16px;
  }
  .site-footer::after { left: 24px; bottom: 24px; font-size: 12px; }
  .site-footer__legal-link { font-size: 12px; }
  body.secondary-page:has(> main + .site-footer) > .site-footer {
    height: 332px !important;
    min-height: 332px !important;
  }
  body.secondary-page:has(> main + .site-footer) > .site-footer .site-footer__brand {
    top: 24px !important;
  }
  body.secondary-page:has(> main + .site-footer) > .site-footer .site-nav--footer {
    top: 84px !important;
    bottom: auto !important;
  }

}

@media (min-width: 701px) and (orientation: landscape) {
  .site-nav--header .site-nav__link {
    top: calc(10px * var(--page-scale));
    font-size: calc(12px * var(--page-scale));
  }

  /* The expanded HOME items use the exact same type scale as the three main
     header labels, including the desktop reference's 12px override. */
  .site-nav--header .header-home-subitem {
    font-size: calc(12px * var(--page-scale));
  }
}

@media (min-width: 701px) and (orientation: landscape) {
  /* The header navigation stays right-anchored so CONTACT ends at the
     standard 24px page edge. */
  .site-nav--footer {
    left: calc(50% + 12px * var(--page-scale));
  }
}

@media (min-width: 701px) and (orientation: landscape) {
  .site-nav--footer { left: calc(768px * var(--page-scale)); }
}

/* Final responsive anchor: center-aligned text stays tied to the page
   midline; only the 24px chrome edge and authored gaps scale below baseline. */
@media (min-width: 701px) and (orientation: landscape) {
  .site-nav--footer { left: calc(50% + 12px * var(--page-scale)); }
}

/* Header theme pair supplied by the design references. The page currently
   uses the dark variant; the light variant is available without changing the
   updated SVG assets. */
.site-shell[data-theme="light"] {
  background: #fff;
  color: #000;
}

.site-shell[data-theme="light"] .site-nav__link {
  color: #000;
}

.site-shell[data-theme="light"] .site-nav--header .language-switch {
  background: #000;
  color: #fff;
}

.site-shell[data-theme="light"] .language-switch__current {
  background: #fff;
  color: #000;
}

.site-shell[data-theme="light"] .language-switch__option {
  color: #fff;
}

/* -------------------------------------------------------------------------
   Header language control — authored in the supplied header references.
   It is intentionally visual-only for now (the markup is disabled).
   ------------------------------------------------------------------------- */
.site-nav--header .language-switch {
  position: absolute;
  top: calc(1px * var(--page-scale));
  right: 0;
  display: grid;
  grid-template-columns: calc(39px * var(--page-scale)) 1fr;
  align-items: center;
  width: calc(84px * var(--page-scale));
  height: calc(27px * var(--page-scale));
  padding: calc(3px * var(--page-scale));
  border: 0;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
  color: #000;
  font: 300 calc(12px * var(--page-scale))/1 "Geologica", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  cursor: default;
  opacity: 1;
  appearance: none;
}

.site-nav--header .language-switch:disabled {
  opacity: 1;
  color: #000;
}

.language-switch__current,
.language-switch__option {
  display: grid;
  place-items: center;
  height: 100%;
}

.language-switch__current {
  border-radius: 999px;
  background: #000;
  color: #fff;
}

.language-switch__option {
  color: #000;
}

@media (max-width: 700px), (orientation: portrait) {
  .site-nav--header .language-switch {
    position: static;
    width: 52px;
    height: 20px;
    grid-template-columns: 24px 1fr;
    padding: 2px;
    font-size: 9px;
  }

  .language-switch__current {
    min-width: 0;
  }
}


/* Keep the light header variant exact even though the control is disabled. */
.site-shell[data-theme="light"] .site-nav--header .language-switch:disabled {
  background: #000;
  color: #fff;
}

.site-shell[data-theme="light"] .site-nav--header .language-switch .language-switch__current {
  background: #fff;
  color: #000;
}

.site-shell[data-theme="light"] .site-nav--header .language-switch .language-switch__option {
  color: #fff;
}


/* -------------------------------------------------------------------------
   Final supplied footer/header corrections.
   Keep these explicit so the authored footer assets cannot be hidden by the
   earlier generic chrome rules or by a browser's mask shorthand handling.
   ------------------------------------------------------------------------- */
.site-footer__brand,
.site-nav--footer,
.site-footer__legal {
  z-index: 2;
}

.site-footer__logo-mark {
  display: block;
  flex: 0 0 auto;
  background-color: #fff;
  -webkit-mask-image: url("./header&footer/footer%20logo.svg?v=20260824");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url("./header&footer/footer%20logo.svg?v=20260824");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  opacity: 1;
  visibility: visible;
}

.site-footer__brand:hover .site-footer__logo-mark,
.site-footer__brand:focus-visible .site-footer__logo-mark {
  background-color: #B9E2EE;
}

.site-footer__legal {
  visibility: visible;
  opacity: 1;
}

.site-footer__legal-link,
.site-footer__legal-link:disabled {
  display: block;
  visibility: visible;
  color: #fff;
  opacity: 1;
  border-radius: 0;
  text-decoration: none;
}

.site-nav--header .language-switch,
.site-nav--header .language-switch:disabled {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 9999px !important;
  overflow: hidden;
}


/* Use the supplied footer SVG as an image for the default state. This avoids
   mask rasterization differences while keeping the supplied hover color. */
.site-footer__brand {
  position: absolute;
  display: block;
  width: calc(260px * var(--footer-scale));
  height: calc(60px * var(--footer-scale));
  color: inherit;
  text-decoration: none;
}

.site-footer__logo-image,
.site-footer__logo-mark--hover {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: none;
  isolation: isolate;
}

.site-footer__logo-image--default {
  opacity: 1;
  transition: none;
}

.site-footer__logo-mark--hover {
  z-index: 2;
  background: url("./header&footer/footer logo hover.svg?v=20260826-footer-hover2") center / 100% 100% no-repeat;
  -webkit-mask: none;
  mask: none;
  -webkit-mask-image: url("./header&footer/footer%20logo.svg?v=20260824");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url("./header&footer/footer%20logo.svg?v=20260824");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  opacity: 0;
}

.site-footer__brand:hover .site-footer__logo-image--default,
.site-footer__brand:focus-visible .site-footer__logo-image--default {
  opacity: 0;
}

.site-footer__brand:hover .site-footer__logo-mark--hover,
.site-footer__brand:focus-visible .site-footer__logo-mark--hover {
  opacity: 1;
  transform: scale(1.04);
  transform-origin: center;
}

/* Keep the hover artwork's fill explicit. The footer logo has both an image
   layer and a masked hover layer; the hover state must not inherit the black
   SVG artwork's color. */
.site-footer__brand:hover .site-footer__logo-mark--hover,
.site-footer__brand:focus-visible .site-footer__logo-mark--hover {
  z-index: 2;
  background: url("./header&footer/footer logo hover.svg?v=20260826-footer-hover2") center / 100% 100% no-repeat !important;
  color: #ffffff !important;
  mix-blend-mode: normal;
  -webkit-mask: none;
  mask: none;
}

@media (max-width: 700px), (orientation: portrait) {
  .site-footer__brand {
    width: 130px;
    height: 30px;
  }
}

/* Footer detail corrections from the supplied reference. */
.site-nav--footer .site-nav__link {
  border-bottom: 0.5px solid #3C3C3C;
}

.site-footer::after,
.site-footer__legal-link,
.site-footer__legal-link:disabled {
  color: #ffffff;
}

.site-footer { background: #000000 !important; color: #ffffff; }
.site-footer .site-nav--footer .site-nav__link,
.site-footer .site-nav--footer .site-nav__index,
.site-footer .site-nav--footer .site-nav__label { color: #ffffff; }
.site-footer .site-nav--footer .site-nav__link { border-bottom-color: #3c3c3c !important; }
.site-footer .site-footer__legal-link,
.site-footer .site-footer__legal-link:disabled,
.site-footer::after { color: #A9A9A9 !important; }

/* Light footer variant. */
.site-footer { background: #ffffff !important; color: #000000 !important; }
.site-footer .site-footer__logo-image--default { filter: brightness(0) !important; }
.site-footer .site-nav--footer .site-nav__link,
.site-footer .site-nav--footer .site-nav__index,
.site-footer .site-nav--footer .site-nav__label,
.site-footer .site-footer__legal-link,
.site-footer .site-footer__legal-link:disabled,
.site-footer::after { color: #000000 !important; }
.site-shell > .site-footer { background: #ffffff !important; }
.site-shell > .site-footer .site-footer__logo-image--default { filter: brightness(0) !important; }
.site-shell > .site-footer::after,
.site-shell > .site-footer .site-footer__legal-link,
.site-shell > .site-footer .site-footer__legal-link:disabled { color: #A9A9A9 !important; }
.site-footer__legal-link,
.site-footer__legal-link:disabled,
.site-footer::after { color: #c9c9c9 !important; }

/* Final narrow-screen overrides (must come after the legacy portrait rules). */
@media (max-width: 700px) {
  .site-nav--header { display: none !important; }
  .site-header__logo-image--default { z-index: 1; }
  .site-header__logo-image--hover { z-index: 2; }
  /* The hover SVG contains intentional white outline details. The shared
     light-surface rule must only blacken the plain default logo; otherwise
     those details disappear and the hover mark looks incorrectly flattened. */
  .site-header__logo.is-on-light .site-header__logo-image--hover {
    filter: none !important;
    mix-blend-mode: normal !important;
  }
  .mobile-menu-toggle { color: #fff; }
  .mobile-menu-toggle.is-on-light,
  .site-header.mobile-menu-open .mobile-menu-toggle { color: #000; }
  .mobile-menu-toggle span { height: 2px; }
  .site-header.mobile-menu-open .site-header__logo { opacity: 0; visibility: hidden; pointer-events: none; }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1),
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { opacity: 0; transform: none; }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 1; transform: none; }
  .mobile-header-menu {
    /* The animated/fixed header establishes the containing block for this
       overlay; cancel its 24px chrome inset so the panel starts at viewport
       coordinate (0, 0). */
    position: absolute;
    top: calc(-1 * var(--chrome-outer-margin));
    left: calc(-1 * var(--chrome-outer-margin));
    right: auto;
    bottom: auto;
    width: 100vw;
    height: 100dvh;
    box-sizing: border-box;
    padding: 96px 24px 24px;
    overflow-y: auto;
    border-radius: 0;
    align-content: start;
    grid-auto-rows: max-content;
  }
  .mobile-header-menu button {
    min-height: 61.6px;
    padding: 13.6px 0;
    box-sizing: border-box;
    border-top: 0;
    border-bottom-color: #d0d0d0;
    font: 400 24px/1.15 "Noto Sans SC", "PingFang SC", sans-serif;
    color: #000;
  }
  .mobile-header-menu button:first-child { border-top: 0; }
  .mobile-header-menu button:hover,
  .mobile-header-menu button:focus-visible { color: #000; }
  .mobile-header-menu:has(button:hover) button:not(:hover),
  .mobile-header-menu:has(button:focus-visible) button:not(:focus-visible) { color: #a9a9a9; }
  .mobile-header-menu:has(button:focus) button:not(:focus) { color: #a9a9a9; }
  .mobile-header-menu:has(button:focus) button:focus { color: #000; }
  .mobile-header-menu:not(:has(button:hover)):not(:has(button:focus)) button { color: #000; }
  .mobile-header-menu button .mobile-header-menu__index,
  .mobile-header-menu button[data-nav-item="home"] .mobile-header-menu__label { font-family: "Geologica", sans-serif; }
}
.site-footer .site-nav--footer .site-nav__link { border-bottom-color: #3c3c3c !important; }


/* The language control is not part of the dimmed header-button group. */
.site-nav--header.is-hovering .language-switch {
  opacity: 1 !important;
}


/* -------------------------------------------------------------------------
   Empty second-screen preview.
   The existing loading, intro, header and footer visuals remain unchanged;
   this only makes the page scrollable after the first viewport. 
   ------------------------------------------------------------------------- */
body {
  overflow-x: hidden;
  overflow-y: hidden;
}

body.page-ready {
  overflow-y: auto;
  /* Top rubber-band overscroll reveals the document root. It must match the
     black first screen; the later sections provide their own white surfaces. */
  background: #000000 !important;
}

.site-shell {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
}

.second-screen {
  width: 100%;
  min-height: 100dvh;
  margin-top: 100dvh;
  background: #fff;
}

/* -------------------------------------------------------------------------
   Document-bottom footer.
   The footer belongs to the end of the two-screen page, not to the first
   viewport. It therefore enters the viewport only when the user reaches the
   bottom of the page. Header/loading visuals remain unchanged.
   ------------------------------------------------------------------------- */
.site-shell {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 100%;
  height: 200dvh;
  min-height: 200dvh;
  padding: 0;
  background: transparent;
  /* Do not isolate the header's Difference blend from the document behind
     it. The shell must remain transparent to the page backdrop. */
  z-index: auto;
}

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  margin: var(--chrome-outer-margin);
}

.site-content {
  display: none;
}

.site-footer {
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  margin: 0;
}

/* Keep the header pinned while the second screen is scrolled. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
}


/* -------------------------------------------------------------------------
   Home first-screen background.
   This layer is intentionally separate from the locked loading/intro stack:
   it reveals immediately after the header reveal signal and is clipped to the
   first viewport only. `cover` preserves the source ratio while guaranteeing
   complete viewport coverage at every aspect ratio.
   ------------------------------------------------------------------------- */
.home-first-screen-background {
  --home-scroll-brightness: 1;
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #000000;
  opacity: 1;
  pointer-events: none;
  will-change: opacity;
}

.home-first-screen-background::before {
  content: "";
  position: absolute;
  inset: 0;
  /* The SVG's own viewBox is intentionally used as the crop window. Its
     path extends beyond that viewBox, so only the same partial geometric
     fragment as the supplied background-line reference is visible. */
  /* Keep the 1512 × 982 artwork proportional; the first-screen box is the
     crop window, matching the supplied background-line reference. */
  background: url("./home/backgroundline.svg?v=20260826-highlight5") center / cover no-repeat;
  opacity: 1;
  filter: brightness(var(--home-reveal-brightness, 1));
  pointer-events: none;
}

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

.site-shell.is-background-revealed .home-first-screen-background::before {
  animation: home-first-screen-background-in 1800ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes home-first-screen-background-in {
  from { --home-reveal-brightness: 0; }
  to { --home-reveal-brightness: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .site-shell.is-background-revealed .home-first-screen-background::before {
    animation-duration: 1ms;
  }
}

/* -------------------------------------------------------------------------
   Home first-screen content.
   The copy is centered inside the first viewport, while the scroll prompt is
   anchored to that viewport's lower-left content margin.
   ------------------------------------------------------------------------- */
.site-content {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 100%;
  height: 100dvh;
  margin: 0;
  padding: 0;
  z-index: 1;
  pointer-events: none;
}

.site-content__grid {
  display: none;
}

.home-hero-copy {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  /* Keep the eyebrow's authored position fixed while the title block changes
     size and moves closer to it. */
  transform: translateY(calc(-50% - (30px * var(--page-scale))));
  color: #fff;
  text-align: center;
}

.home-hero-copy__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(20px * var(--page-scale));
  font: 400 min(78pt, 78pt * var(--page-scale))/1.2 "Geologica", sans-serif;
  text-align: center;
  letter-spacing: 0;
  white-space: nowrap;
}

.home-hero-copy__divider {
  width: 1px;
  height: 28px;
  background: currentColor;
  opacity: .8;
}

.home-hero-copy__title {
  margin: calc(26px * var(--page-scale)) 0 0;
  font-family: "Geologica", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: min(18pt, 18pt * var(--page-scale));
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.65;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: center;
}

.home-scroll-prompt {
  position: absolute;
  left: var(--page-content-margin);
  bottom: var(--page-content-margin);
  display: flex;
  align-items: center;
  gap: calc(12px * var(--page-scale));
  color: #fff;
  font: 300 calc(16px * var(--page-scale))/1 "Geologica", sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
}

.home-scroll-prompt img {
  display: block;
  width: 20px;
  height: 18px;
}

/* The content starts with the background reveal, then enters item by item. */
.home-hero-copy__eyebrow,
.home-hero-copy__line,
.home-scroll-prompt {
  opacity: 0;
  transform: translateY(12px);
}

.home-hero-copy__line {
  display: block;
}

.site-shell.is-background-revealed .home-hero-copy__line,
.site-shell.is-background-revealed .home-scroll-prompt {
  animation: home-content-item-in 1400ms cubic-bezier(.22, 1, .36, 1) both;
}

/* The English hero title uses a longer, slower reveal than the other
   first-screen content. */
.site-shell.is-header-revealed .home-hero-copy__eyebrow {
  animation-duration: 3600ms;
  animation-delay: 0ms;
}

.site-shell.is-background-revealed .home-hero-copy__line:nth-child(1) {
  animation-delay: 0ms;
}

.site-shell.is-background-revealed .home-hero-copy__line:nth-child(2) {
  animation-delay: 0ms;
}

/* The header reveal is the actual visual start signal. Start the English
   title from the same class instead of waiting for the later background
   reveal, so both elements enter together. */
.site-shell.is-header-revealed .home-hero-copy__eyebrow {
  animation: home-content-item-in 3600ms cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: 450ms;
}

.site-shell.is-background-revealed .home-scroll-prompt {
  animation-delay: 300ms;
}

@keyframes home-content-item-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.site-shell.is-background-revealed .site-content,
.site-shell.is-content-revealed .site-content {
  opacity: 1;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-shell.is-background-revealed .home-hero-copy__eyebrow,
  .site-shell.is-background-revealed .home-hero-copy__line,
  .site-shell.is-background-revealed .home-scroll-prompt {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}

@media (min-width: 701px) and (max-width: 1200px) {
  .home-hero-copy__title {
    white-space: normal;
  }
}

@media (max-width: 700px), (orientation: portrait) {
  .home-hero-copy {
    left: 24px;
    width: calc(100% - 48px);
    transform: translateY(-50%);
  }

  .home-hero-copy__eyebrow {
    gap: 10px;
    font-size: 16px;
    white-space: normal;
  }

  .home-hero-copy__divider {
    height: 20px;
  }

  .home-hero-copy__title {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.55;
    white-space: normal;
  }

  .home-scroll-prompt {
    left: 24px;
    bottom: 40px;
    gap: 20px;
    font-size: 24px;
  }

  .home-scroll-prompt img {
    width: 20px;
    height: 18px;
  }
}

/* Final flow overrides: the imported middle content sits after the first
   viewport and the locked footer remains the last module in the document. */
.site-shell > .second-screen {
  /* The shell is now the document-flow wrapper. Keep this first section's
     100dvh offset from collapsing through the shell and shifting the first
     screen downward. */
  min-height: 0;
  margin-top: 100dvh;
  background: #fff;
}

.site-shell {
  display: flow-root;
}

.site-shell > .site-footer {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  margin: 0;
}

/* Final mobile first-screen typography override. */
@media (max-width: 700px) {
  .zigleap-section#about {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
    box-sizing: border-box;
  }
  .zigleap-section#about .zigleap-kicker {
    margin-top: 0;
    margin-bottom: 36px;
  }
  .zigleap-section#about h2 { margin: 0; }
  .zigleap-section#about .zigleap-about-image { margin-top: 36px; }
  .zigleap-section#about .zigleap-positioning { font-size: 18px; }
  .zigleap-section#about .zigleap-belief {
    margin-top: 24px;
    margin-bottom: 36px;
    font-size: 12px;
  }
  .zigleap-section#capabilities {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
    box-sizing: border-box;
  }
  .zigleap-section#capabilities .zigleap-kicker {
    margin-top: 0;
    margin-bottom: 36px;
  }
  .zigleap-section#capabilities h2 { font-size: 24px; }
  .zigleap-section#capabilities .zigleap-capabilities__media { margin-top: 36px; }
  .zigleap-section#capabilities .zigleap-capabilities__caption {
    margin-bottom: 0;
    font-size: 15px;
  }
  .zigleap-section#evolution {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
    box-sizing: border-box;
  }
  .zigleap-section#evolution .zigleap-kicker {
    margin-top: 0;
    margin-bottom: 36px;
  }
  .zigleap-section#evolution h2 { font-size: 24px; }
  .zigleap-section#evolution .zigleap-evolution-image {
    margin-top: 36px;
    margin-bottom: 36px;
  }
  .zigleap-section#evolution .zigleap-lead {
    font-size: 18px;
  }
  .zigleap-section#evolution .zigleap-world-copy > p:not(.zigleap-lead) {
    font-size: 12px;
  }
  .zigleap-section#path {
    padding-top: 72px;
    padding-bottom: 72px !important;
    box-sizing: border-box;
    background-position: calc(50% + 300px) center;
  }
  .zigleap-section#path,
  .zigleap-section#path * { color: #fff !important; }
  .zigleap-section#path .zigleap-kicker {
    margin-top: 0;
    margin-bottom: 36px;
  }
  .zigleap-section#path h2 { font-size: 24px; }
  .zigleap-section#path .zigleap-section-head {
    margin-bottom: 36px;
  }
  .zigleap-section#path .zigleap-section-head > p {
    margin-top: 24px;
    width: 100%;
    max-width: none;
    font-size: 12px;
  }
  .zigleap-section#path .zigleap-timeline article {
    padding-top: 12px;
    margin-bottom: 24px;
    margin-left: 0;
    width: 100%;
  }
  .zigleap-section#path .zigleap-timeline h3 {
    margin-top: 24px;
    margin-bottom: 12px;
    font-size: 18px;
  }
  .zigleap-section#path .zigleap-timeline p {
    width: 100%;
    max-width: none;
    font-size: 12px;
  }
  .zigleap-section#join {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
    box-sizing: border-box;
  }
  .zigleap-section#join .zigleap-kicker {
    margin-top: 0;
    margin-bottom: 36px;
  }
  .zigleap-section#join .zigleap-join__closing { font-size: 24px; }
  .zigleap-section#join .zigleap-join__principles { margin-top: 36px; }
  .zigleap-section#join .zigleap-join__principles article {
    gap: 18px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .zigleap-section#join .zigleap-join__principles h3 {
    margin-bottom: 12px;
    font-size: 18px;
  }
  .zigleap-section#join .zigleap-join__principles p { font-size: 12px; }
  .zigleap-section#join .zigleap-join__principles-en { font-size: 18px; }
  .zigleap-section#join .zigleap-join__button {
    margin-left: auto;
    margin-right: auto;
  }
  /* Keep the same primary-body scale as ABOUT for matching captions in the
     following sections; specialized supporting copy remains unchanged. */
  .zigleap-section .zigleap-positioning { font-size: 18px; }
  .home-hero-copy {
    top: auto;
    bottom: calc(40px + 18px + 60px);
    transform: none;
    text-align: left;
  }
  .home-hero-copy__eyebrow {
    justify-content: flex-start;
    text-align: left;
    font-size: 60px;
  }
  .home-hero-copy__title {
    text-align: left;
    font-size: 24px;
  }
  .home-scroll-prompt {
    gap: 13.3333px;
    font-size: 15px;
  }
  .home-first-screen-background::before {
    /* Fit the complete line artwork to the mobile viewport width without
       distorting its aspect ratio, then center it in the first screen. */
    background-image: url("./home/backgroundline-mobile.svg?v=20260830-mobile-1px-speed48-sync");
    background-size: 100% auto;
    background-position: center center;
  }
}
:root.page-transition-ready { opacity: 1; transition: opacity 220ms ease; }
:root.page-transition-ready.page-transition-leaving { opacity: 0; }

/* Keep the four desktop header labels on one visual baseline. The previous
   Chinese-link hit-area offsets also moved the visible text, which made the
   navigation look uneven and made stale CSS especially noticeable. */
@media (min-width: 701px) and (orientation: landscape) {
  .site-nav--header > .header-home-group { top: 0; }
  .site-nav--header > .header-home-group > .header-home-trigger,
  .site-nav--header > .site-nav__link[data-nav-item="chronicle"],
  .site-nav--header > .site-nav__link[data-nav-item="career"],
  .site-nav--header > .site-nav__link[data-nav-item="contact"] {
    top: calc(1px * var(--page-scale));
    height: calc(31px * var(--page-scale));
    margin: 0;
    padding: 0;
    transform: translateY(0);
    font-family: "Geologica", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: calc(12px * var(--page-scale));
    font-weight: 400;
    line-height: 1.15;
  }
}