:root {
  --orb-core:    #f4735a;
  --orb-glow:    #ff8c6e;
  --orb-halo:    #e8799a;
  --orb-ambient: #c9a0c8;
  --sky-top:     #a8c8d8;
  --sky-base:    #b8b0d0;
  --text: #ffffff;
  --muted-text: rgba(255,255,255,0.78);
  --shift-x: 0px;
  --shift-y: 0px;
  --hero-exit: 0;
}

/* ─────────────────────────────────────────────────────────────
   Highlight duplicate variant
   Inspired by the referenced CodePen: Google Sans Flex body, Google Sans Flex
   highlighted word, off-white day surface, dark night flip.
   ───────────────────────────────────────────────────────────── */

@property --mask-progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

:root {
  --variant-bg: #ececec;
  --variant-card: #f8f7f2;
  --variant-line: rgba(34,34,34,0.12);
  --highlight-green: #a8de97;
  --text: #222222;
  --muted-text: rgba(34,34,34,0.62);
}

body {
  color: var(--text);
  background: var(--variant-bg);
  font-family: "Google Sans Flex", sans-serif;
  transition: background 700ms ease, color 700ms ease;
}

.liquid-bg {
  display: none;
}

.site-nav {
  top: clamp(18px, 2.2vw, 34px);
  color: var(--text);
  mix-blend-mode: normal;
}

.site-nav.is-over-work,
.site-nav.is-over-work .nav-link,
.site-nav.is-over-work .nav-cta {
  color: #f3f0ea;
}

.nav-logo,
.nav-link,
.nav-cta {
  font-family: "Google Sans Flex", sans-serif;
}

.nav-logo {
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 700;
}

.nav-link,
.nav-cta {
  font-size: clamp(12px, 0.9vw, 14px);
  opacity: 0.46;
}

.nav-link.is-active,
.nav-cta.is-active,
.nav-link:hover,
.nav-cta:hover {
  opacity: 1;
}

.hero {
  min-height: 100svh;
  padding: clamp(110px, 14vh, 170px) clamp(22px, 7vw, 120px);
  color: var(--text);
  background:
    radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--highlight-green), transparent 74%) 0 14rem, transparent 28rem),
    radial-gradient(circle at 18% 82%, color-mix(in srgb, var(--highlight-green), transparent 84%) 0 10rem, transparent 24rem),
    var(--variant-bg);
  isolation: isolate;
  transition: background 700ms ease, color 700ms ease;
}

.hero::after,
.morph-filter,
.london-elements {
  display: none;
}

.hero-title {
  position: relative;
  z-index: 4;
  max-width: min(1100px, 92vw);
  font-family: "Google Sans Flex", sans-serif;
  font-size: clamp(58px, 11vw, 188px);
  font-style: normal;
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.085em;
  text-transform: none;
}

.hero-role-row {
  position: relative;
  z-index: 5;
  margin-top: clamp(28px, 4vw, 56px);
  gap: clamp(8px, 1.4vw, 18px);
  flex-wrap: wrap;
}

.hero-role {
  color: var(--muted-text);
  font-family: "Google Sans Flex", sans-serif;
  font-size: clamp(18px, 2vw, 33px);
  font-weight: 500;
  letter-spacing: -0.04em;
  gap: 0.38em;
  white-space: normal;
}

.hero-location {
  min-width: 0;
  text-align: center;
}

.hero-highlight {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 0.1em 0.24em 0.2em;
  color: var(--text);
  font-family: "Google Sans Flex", cursive;
  font-size: 1.2em;
  font-weight: 300;
  letter-spacing: -0.07em;
  white-space: nowrap;
}

.hero-highlight::before {
  content: '';
  position: absolute;
  top: 54%;
  left: 58%;
  z-index: -1;
  width: 240%;
  aspect-ratio: 1;
  border: clamp(14px, 2.2vw, 30px) solid var(--highlight-green);
  border-radius: 50%;
  opacity: 0.95;
  translate: -50% -50%;
  rotate: -8deg;
  mask-image: conic-gradient(from -30deg, #000 var(--mask-progress), transparent 0);
  transition: border-color 700ms ease, opacity 700ms ease;
}

.city-toggle {
  margin-left: clamp(2px, 1vw, 10px);
}

.city-toggle__inner {
  color: var(--text);
}

.city-toggle__bar {
  width: 38px;
  height: 4px;
}

.city-toggle__knob {
  width: 20px;
  height: 20px;
}

.temp-controls {
  color: var(--text);
  border-color: var(--variant-line);
  background: color-mix(in srgb, var(--variant-card), transparent 18%);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  backdrop-filter: blur(18px);
}

.temp-controls button {
  background: color-mix(in srgb, var(--text), transparent 90%);
}

.temp-controls button:hover,
.temp-controls button.is-active {
  color: var(--variant-bg);
  background: var(--text);
}

.hk-elements {
  z-index: 1;
}

:root[data-location="hong-kong"] .hk-elements {
  opacity: 0.42;
  visibility: visible;
}

.hk-building-lights {
  top: 12%;
  left: 50%;
  width: min(76vw, 980px);
  height: 30vh;
  opacity: 0.42;
  transform: translateX(-50%);
}

.hk-distant-building {
  width: clamp(38px, 4vw, 70px);
}

.hk-traffic-light {
  top: 27%;
  right: 16%;
  width: clamp(26px, 2.4vw, 42px);
  opacity: 0.42;
}

.hk-tram-wrap {
  left: 13%;
  bottom: 14%;
  width: clamp(112px, 13vw, 190px);
  opacity: 0.36;
}

.tl-red-beam,
.tram-light-rays,
.prog-blur {
  opacity: 0.32;
}

.projects {
  min-height: 280vh;
  padding-top: clamp(110px, 18vh, 190px);
  color: #f3f0ea;
  background: #10100f;
}

.projects__fixed-copy {
  font-family: "Google Sans Flex", sans-serif;
  color: rgba(243,240,234,0.72);
}

.project-panel {
  width: min(86vw, 1320px);
  border-color: rgba(243,240,234,0.16);
  border-radius: clamp(28px, 3vw, 54px);
  background: #181816;
}

.project-panel__meta {
  font-family: "Google Sans Flex", sans-serif;
  letter-spacing: -0.03em;
}

.project-panel h2 {
  font-family: "Google Sans Flex", sans-serif;
  font-size: clamp(54px, 8.6vw, 170px);
  font-weight: 800;
  letter-spacing: -0.09em;
}

.site-footer {
  color: #f3f0ea;
  background: #10100f;
  font-family: "Google Sans Flex", sans-serif;
}

.site-footer h2 {
  font-family: "Google Sans Flex", sans-serif;
  font-weight: 800;
  letter-spacing: -0.09em;
}

.site-footer__links a,
.site-footer__kicker {
  color: rgba(243,240,234,0.62);
}

:root[data-period="night"] .hero {
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--highlight-green), transparent 84%) 0 15rem, transparent 32rem),
    radial-gradient(circle at 18% 82%, rgba(255,255,255,0.035) 0 11rem, transparent 28rem),
    var(--variant-bg);
}

:root[data-period="night"] .hero-highlight::before {
  opacity: 0.82;
}

:root[data-period="night"] .project-panel {
  box-shadow:
    0 36px 90px rgba(0,0,0,0.46),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

@media (max-width: 900px) {
  .hero-title {
    font-size: clamp(54px, 15vw, 118px);
  }

  .hero-role {
    justify-content: center;
    font-size: clamp(17px, 4.4vw, 28px);
  }

  .city-toggle {
    margin-left: 0;
  }

  .hk-building-lights {
    width: 96vw;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-inline: 18px;
  }

  .hero-title {
    font-size: clamp(48px, 18vw, 82px);
  }

  .hero-role-row {
    width: min(100%, 390px);
    gap: 8px;
  }

  .hero-role {
    display: inline;
    width: auto;
    line-height: 1.45;
  }

  .hero-highlight {
    white-space: normal;
  }

  .hero-highlight::before {
    width: 210%;
    border-width: 13px;
  }

  .hk-building-lights {
    top: 13%;
    width: 110vw;
    opacity: 0.34;
  }

  .hk-traffic-light {
    right: 7%;
    left: auto;
  }

  .hk-tram-wrap {
    left: 7%;
  }
}

/* Final scroll-led HK reveal override. Must stay at file end. */
body.hero-hk-stage .hk-elements {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 3;
}

body.hero-hk-stage .hk-elements * {
  animation-play-state: running !important;
}

body.hero-hk-stage .hk-building-lights {
  opacity: 0.92 !important;
}

body.hero-hk-stage .hk-traffic-light {
  opacity: 0.96 !important;
}

body.hero-hk-stage .hk-tram-wrap {
  opacity: 0.9 !important;
}

body.hero-hk-stage .tl-red-beam,
body.hero-hk-stage .tram-light-rays,
body.hero-hk-stage .prog-blur {
  opacity: 0.72 !important;
}

/* Highlight duplicate: day-to-HK sunset palette and cleaned landing UI. */
:root {
  --variant-bg: #b8b0d0;
  --variant-card: #f8f7f2;
  --variant-line: rgba(29,27,31,0.16);
  --highlight-green: #ff8c6e;
  --day-core: #ffc876;
  --day-glow: #ff8c6e;
  --day-halo: #e8799a;
  --day-ambient: #c9a0c8;
  --day-top: #a2ddfa;
  --day-base: #b8b0d0;
  --sunset-core: #d64b25;
  --sunset-glow: #FC7A47;
  --sunset-halo: #EF7758;
  --sunset-ambient: #9F5A6C;
  --sunset-top: #795877;
  --sunset-base: #3C4159;
}

.site-nav {
  justify-content: flex-end;
}

.nav-logo,
.temp-controls {
  display: none !important;
}

.hero {
  color: var(--text);
  background:
    radial-gradient(circle 38vmin at 48% 50%,
      var(--day-core) 0%,
      var(--day-glow) 46%,
      transparent 100%),
    radial-gradient(circle 78vmin at 50% 50%,
      var(--day-halo) 0%,
      var(--day-ambient) 56%,
      transparent 100%),
    linear-gradient(180deg, var(--day-top) 0%, var(--day-base) 100%) !important;
  transition: color 700ms ease, background-color 900ms ease;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block !important;
  pointer-events: none;
  background:
    radial-gradient(circle 42vmin at 48% 50%,
      var(--sunset-core) 0%,
      var(--sunset-glow) 48%,
      transparent 100%),
    radial-gradient(circle 84vmin at 50% 50%,
      var(--sunset-halo) 0%,
      var(--sunset-ambient) 58%,
      transparent 100%),
    linear-gradient(180deg, var(--sunset-top) 0%, var(--sunset-base) 100%);
  opacity: 0;
  transition: opacity 900ms ease;
}

body.hero-hk-stage .hero::after {
  opacity: 1;
}

.hero-stage {
  position: sticky;
  z-index: 2;
  overflow: visible !important;
}

body.hero-hk-stage .hero {
  color: #fff7ef;
}

body.hero-hk-stage .hero-role {
  color: rgba(255,247,239,0.76);
}

.hero-highlight,
.hero-location {
  color: inherit;
  padding: 0;
}

.hero-highlight::before,
.hero-location::before {
  display: none !important;
}

.hk-elements,
.hk-elements *,
.hk-traffic-light,
.hk-tram-wrap,
.tram-light-spill,
.tram-light-rays,
.tl-red-beam,
.prog-blur,
.pb-layer {
  overflow: visible !important;
  contain: none !important;
}

body.hero-hk-stage .tl-red-beam {
  width: 980% !important;
  height: 180% !important;
  right: 42% !important;
  left: auto !important;
  top: -64% !important;
  filter: blur(30px) url(#light-noise) !important;
  mask-image: radial-gradient(ellipse at 100% 50%, #000 0 18%, rgba(0,0,0,0.72) 42%, transparent 82%) !important;
}

body.hero-hk-stage .tram-light-rays {
  inset: -52% -86% -44% -92% !important;
  filter: blur(24px) url(#light-noise) !important;
  mask-image: radial-gradient(ellipse at 60% 50%, #000 0 28%, rgba(0,0,0,0.55) 58%, transparent 86%) !important;
}

body.hero-hk-stage .tram-light-spill {
  inset: -35% -44% -42% -60% !important;
  filter: blur(28px) url(#light-noise) !important;
}

/* Force the scroll-led HK reveal to win over older duplicate rules. */
body.hero-hk-stage .hk-elements {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 3;
}

body.hero-hk-stage .hk-elements * {
  animation-play-state: running !important;
}

body.hero-hk-stage .hk-building-lights {
  opacity: 0.92 !important;
}

body.hero-hk-stage .hk-traffic-light {
  opacity: 0.96 !important;
}

body.hero-hk-stage .hk-tram-wrap {
  opacity: 0.9 !important;
}

body.hero-hk-stage .tl-red-beam,
body.hero-hk-stage .tram-light-rays,
body.hero-hk-stage .prog-blur {
  opacity: 0.72 !important;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  width: 100%;
  min-height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: 'Google Sans Flex', sans-serif;   /* changed from Google Sans Flex */
  color: var(--text);
  background: #000;
  cursor: none;
}

a { color: inherit; text-decoration: none; }
button, input, a { font: inherit; cursor: none; }
img { max-width: 100%; }

.cursor-ring {
  position: fixed;
  left: 0; top: 0; z-index: 100;
  width: 34px; height: 34px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  color: var(--text);
  pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width 180ms ease, height 180ms ease, opacity 180ms ease;
}
.cursor-ring.is-visible { opacity: 0.86; }
.cursor-ring.is-active { width: 48px; height: 48px; }

.cursor-ring__label {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  color: #f4f0e9;
  font-family: "Google Sans Flex", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.84);
  transition:
    opacity 180ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cursor-ring__icon {
  font-family: "Material Symbols Outlined";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

.cursor-ring.is-project-cta {
  width: 120px;
  height: 44px;
  border-color: rgba(255, 255, 255, 0.5);
  border-width: 1px;
  border-radius: 999px;
  color: #f4f0e9;
  background: rgba(17, 15, 20, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 10px 30px rgba(0, 0, 0, 0.2);
  mix-blend-mode: normal;
  opacity: 1;
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}

.cursor-ring.is-project-cta .cursor-ring__label {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.liquid-bg {
  position: fixed;
  inset: -8%;
  z-index: -2;
  overflow: hidden;
  transform:
    translate3d(var(--shift-x), var(--shift-y), 0)
    scale(1.08);
  transition: transform 140ms linear;
  will-change: transform;
}

body.hero-transitioning .liquid-bg {
  opacity: calc(1 - var(--hero-exit));
  filter:
    blur(calc(var(--hero-exit) * 22px))
    saturate(calc(1 - var(--hero-exit) * 0.28));
  transform:
    translate3d(var(--shift-x), var(--shift-y), 0)
    scale(calc(1.08 - var(--hero-exit) * 0.07));
  will-change: transform, opacity, filter;
}

.liquid-layer {
  position: absolute;
  inset: 0;
  transition: opacity 1600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.52;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeBlend in='SourceGraphic' mode='overlay'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  animation: none;
}

@keyframes grain-shift {
  0%   { background-position: 0 0; }
  12%  { background-position: -80px 40px; }
  25%  { background-position: 60px -30px; }
  37%  { background-position: -40px 80px; }
  50%  { background-position: 100px 20px; }
  62%  { background-position: -60px -60px; }
  75%  { background-position: 30px 100px; }
  87%  { background-position: -100px 30px; }
  100% { background-position: 0 0; }
}

.site-nav {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 40;
  width: calc(100% - 48px);
  max-width: 1560px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateX(-50%);
  color: var(--text);
  transition: color 800ms ease;
}

.site-nav.is-over-work,
.site-nav.is-over-work .nav-link,
.site-nav.is-over-work .nav-cta {
  color: #fff;
}

.nav-logo {
  font-size: clamp(12px, 0.85vw, 14px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.3vw, 38px);
}

.nav-link,
.nav-cta {
  position: relative;
  padding: 7px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  opacity: 0.58;
  transition: opacity 220ms ease;
}

.nav-link::after,
.nav-cta::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-link:hover,
.nav-cta:hover,
.nav-link.is-active,
.nav-cta.is-active {
  opacity: 1;
}

.nav-link:hover::after,
.nav-cta:hover::after,
.nav-link.is-active::after,
.nav-cta.is-active::after {
  transform: scaleX(1);
}

.nav-link:focus-visible,
.nav-cta:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 6px;
}

main {
  position: relative;
  z-index: 1;
}

/* ── Hidden SVG morph filter ── */
.morph-filter {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

/* ── Hero layout ── */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 110px clamp(32px, 8vw, 116px) 90px;
  position: relative;
}

body.hero-transitioning .hero {
  opacity: calc(1 - var(--hero-exit));
  filter: blur(calc(var(--hero-exit) * 14px));
  transform:
    translateY(calc(var(--hero-exit) * -5vh))
    scale(calc(1 - var(--hero-exit) * 0.065));
  transform-origin: center 55%;
  will-change: transform, opacity, filter;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.14;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

body.hero-exited .liquid-bg,
body.hero-exited .hero {
  visibility: hidden;
}

body.hero-exited .grain,
body.hero-exited .hk-elements *,
:root[data-location="london"] .hk-elements * {
  animation-play-state: paused !important;
}

/* ── London landmark ── */
.london-elements {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 1000ms ease, visibility 0s linear;
}

:root[data-location="hong-kong"] .london-elements {
  opacity: 0;
  visibility: hidden;
  transition: opacity 650ms ease, visibility 0s linear 650ms;
}

.big-ben-wrap {
  position: absolute;
  top: 25%;
  left: 31%;
  width: clamp(68px, 6.3vw, 104px);
  isolation: isolate;
}

.big-ben {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  mix-blend-mode: luminosity;
  opacity: var(--tram-opacity, 0.9);
  transition: opacity 1200ms ease;
}

.big-ben-clock-light {
  position: absolute;
  top: 44.1%;
  left: 50.3%;
  z-index: 1;
  width: 15%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--clock-light-core);
  box-shadow:
    0 0 clamp(5px, 0.7vw, 11px) var(--clock-light-glow),
    0 0 clamp(12px, 1.4vw, 24px) color-mix(in srgb, var(--clock-light-glow), transparent 35%);
  opacity: var(--clock-light-opacity);
  transform: translate(-50%, -50%);
  transition:
    background 1400ms ease,
    box-shadow 1400ms ease,
    opacity 1400ms ease;
}

:root[data-period="morning"] {
  --clock-light-core: #fff0bd;
  --clock-light-glow: #ffad78;
  --clock-light-opacity: 0.72;
}

:root[data-period="afternoon"] {
  --clock-light-core: #fff7cf;
  --clock-light-glow: #ffc766;
  --clock-light-opacity: 0.68;
}

:root[data-period="evening"] {
  --clock-light-core: #ffd08c;
  --clock-light-glow: #fc7a47;
  --clock-light-opacity: 0.9;
}

:root[data-period="night"] {
  --clock-light-core: #f5ffbd;
  --clock-light-glow: #b8d7ff;
  --clock-light-opacity: 0.96;
}

.hero-title {
  color: var(--text);
  font-family: 'Valley Sans', serif;
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.0;
  letter-spacing: -0.02em;
}

.hero-role-row {
  margin-top: clamp(20px, 2.5vw, 32px);
  display: flex;
  align-items: center;
  justify-content: center;  /* keep hero centred */
  gap: 0px;
  flex-wrap: nowrap;        /* prevent wrapping */
}

.hero-role {
  color: var(--muted-text);
  font-family: 'Google Sans Flex', sans-serif;
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 300;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;      /* "Product Designer" never wraps */
}

.hero-location {
  display: inline-block;
  min-width: 140px;         /* fixed width so toggle never moves */
  text-align: left;
}

/* ── Typewriter cursor ── */
.hero-location {
  display: inline-block;
  min-width: 140px;
  text-align: left;
}

.hero-location.is-typing::after {
  content: '|';
  animation: cur-blink 480ms step-end infinite;
}

@keyframes cur-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.city-toggle {
  position: relative;
  width: 74px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: none;
  flex-shrink: 0;
}

.city-toggle__inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--text) 58%, var(--orb-ambient));
  filter: url('#gooeyness');
  transition: color 250ms linear;
}

.city-toggle__bar {
  position: absolute;
  width: 36px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
}

.city-toggle__knob {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-15px);
  transform-origin: 50%;
}

.city-toggle.is-hk .city-toggle__inner {
  color: var(--text);
}

.city-toggle.is-ready.is-hk .city-toggle__knob {
  animation: city-toggle-activate 250ms both linear;
}

.city-toggle.is-ready.inactive .city-toggle__knob {
  animation: city-toggle-inactivate 250ms both linear;
}

@keyframes city-toggle-activate {
  0% { transform: translateX(-15px); }
  50% { transform: translateX(0) scaleX(1.2) scaleY(0.7); }
  90% { transform: translateX(12px) scaleX(0.7) scaleY(0.94); }
  100% { transform: translateX(15px); }
}

@keyframes city-toggle-inactivate {
  0% { transform: translateX(15px); }
  50% { transform: translateX(0) scaleX(1.2) scaleY(0.7); }
  90% { transform: translateX(-12px) scaleX(0.7) scaleY(0.94); }
  100% { transform: translateX(-15px); }
}

@media (prefers-reduced-motion: reduce) {
  .city-toggle.is-ready.is-hk .city-toggle__knob,
  .city-toggle.is-ready.inactive .city-toggle__knob {
    animation-duration: 1ms;
  }
}

/* ── HK elements wrapper ── */
.hk-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1200ms ease;
  contain: layout paint;
}

.hk-elements.is-visible {
  opacity: 1;
  visibility: visible;
}

/* A building implied only by apartments switching on and off. */
.hk-building-lights {
  position: absolute;
  z-index: 0;
  top: 10%;
  left: 16%;
  width: 68%;
  height: 38%;
  opacity: 0.7;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 9%, #000 88%, transparent),
    linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image:
    linear-gradient(to bottom, transparent, #000 9%, #000 88%, transparent),
    linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.hk-distant-building {
  position: absolute;
  width: clamp(52px, 5.4vw, 88px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  align-items: center;
  justify-items: center;
}

.hk-distant-building.tower-1 {
  left: 18%;
  top: 55% ;
  height: 48%;
  opacity: 0.46;
  --window-blur: clamp(3.4px, 0.38vw, 5.4px);
  --window-scale: 0.9;
}

.hk-distant-building.tower-2 {
  left: 30%;
  top: -5%;
  height: 70%;
  opacity: 0.94;
  --window-blur: 0px;
  --window-scale: 1.08;
}

.hk-distant-building.tower-3 {
  right: 35%;
  top: 8%;
  height: 64%;
  opacity: 0.82;
  --window-blur: clamp(0.45px, 0.06vw, 0.9px);
  --window-scale: 1;
}

.hk-distant-building.tower-4 {
  right: 15%;
  top: 35%;
  height: 50%;
  opacity: 0.62;
  --window-blur: clamp(1.6px, 0.18vw, 2.8px);
  --window-scale: 0.84;
}

.hk-distant-building.tower-5 {
  left: 48%;
  top: 0;
  width: clamp(34px, 3.4vw, 54px);
  height: 52%;
  opacity: 0.78;
  --window-blur: clamp(2.2px, 0.26vw, 3.8px);
  --window-scale: 0.8;
}

.hk-distant-building i {
  width: clamp(4px, 0.36vw, 7px);
  height: clamp(6px, 0.52vw, 10px);
  border-radius: 2px;
  background: var(--tram-light-core, #fff0bd);
  box-shadow:
    0 0 5px color-mix(in srgb, var(--tram-light-glow, #ffad78), transparent 32%),
    0 0 12px color-mix(in srgb, var(--tram-light-haze, #e8799a), transparent 70%);
  transform:
    translate(var(--window-x, 0), var(--window-y, 0))
    scale(var(--window-scale, 1));
  opacity: 0.06;
  animation-duration: var(--apartment-cycle, 13s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: var(--apartment-delay, 0s);
}

.hk-distant-building.tower-1 i,
.hk-distant-building.tower-5 i {
  box-shadow:
    0 0 8px color-mix(in srgb, var(--tram-light-glow, #ffad78), transparent 42%),
    0 0 17px color-mix(in srgb, var(--tram-light-haze, #e8799a), transparent 76%);
}

.hk-distant-building i:nth-child(6n + 1) { --window-x: -52%; --window-y: 18%; }
.hk-distant-building i:nth-child(6n + 2) { --window-x: 22%; --window-y: -34%; }
.hk-distant-building i:nth-child(6n + 3) { --window-x: 48%; --window-y: 12%; }
.hk-distant-building i:nth-child(6n + 4) { --window-x: -24%; --window-y: 38%; }
.hk-distant-building i:nth-child(6n + 5) { --window-x: 58%; --window-y: -18%; }
.hk-distant-building i:nth-child(6n) { --window-x: -36%; --window-y: -12%; }

.hk-distant-building i:nth-child(4n) {
  width: clamp(3px, 0.28vw, 5px);
  height: clamp(5px, 0.42vw, 8px);
}

.hk-distant-building i:nth-child(7n + 2) {
  width: clamp(5px, 0.42vw, 8px);
  height: clamp(7px, 0.58vw, 11px);
}

.hk-distant-building i:nth-child(3n + 1) { --apartment-cycle: 17s; --apartment-delay: -8s; }
.hk-distant-building i:nth-child(3n + 2) { --apartment-cycle: 23s; --apartment-delay: -15s; }
.hk-distant-building i:nth-child(5n) { --apartment-cycle: 29s; --apartment-delay: -4s; }
.hk-distant-building i:nth-child(7n) {
  background: color-mix(in srgb, var(--tram-light-core, #fff0bd), #b8d7ff 42%);
}

.hk-building-lights .life-a { animation-name: apartment-life-a; }
.hk-building-lights .life-b { animation-name: apartment-life-b; }
.hk-building-lights .life-c { animation-name: apartment-life-c; }
.hk-building-lights .is-dark { opacity: 0.025; animation: none; box-shadow: none; }

:root[data-period="evening"] .hk-distant-building i:not(.is-dark):not(:nth-child(3n + 1)),
:root[data-period="night"] .hk-distant-building i:not(.is-dark):not(:nth-child(3n + 1)) {
  opacity: 0.38;
  animation-name: none;
}

:root[data-period="morning"] .hk-distant-building i,
:root[data-period="afternoon"] .hk-distant-building i {
  opacity: 0.012;
  animation-name: none;
  box-shadow: none;
}

:root[data-period="morning"] .hk-distant-building i:nth-child(11n + 2),
:root[data-period="morning"] .hk-distant-building i:nth-child(13n + 4) {
  animation-name: apartment-life-a;
  box-shadow:
    0 0 5px color-mix(in srgb, var(--tram-light-glow), transparent 48%),
    0 0 11px color-mix(in srgb, var(--tram-light-haze), transparent 78%);
}

:root[data-period="afternoon"] .hk-distant-building i:nth-child(7n + 2),
:root[data-period="afternoon"] .hk-distant-building i:nth-child(11n + 5) {
  animation-name: apartment-life-b;
  box-shadow:
    0 0 5px color-mix(in srgb, var(--tram-light-glow), transparent 42%),
    0 0 11px color-mix(in srgb, var(--tram-light-haze), transparent 76%);
}

:root[data-period="morning"] .hk-distant-building.tower-5 i:nth-child(1),
:root[data-period="afternoon"] .hk-distant-building.tower-5 i:nth-child(6) {
  opacity: 0.58;
  animation-name: apartment-life-c;
  box-shadow:
    0 0 6px color-mix(in srgb, var(--tram-light-glow), transparent 40%),
    0 0 14px color-mix(in srgb, var(--tram-light-haze), transparent 70%);
}

@keyframes apartment-life-a {
  0%, 14% { opacity: 0.04; }
  20%, 68% { opacity: 0.78; }
  76%, 100% { opacity: 0.04; }
}

@keyframes apartment-life-b {
  0%, 36% { opacity: 0.72; }
  43%, 78% { opacity: 0.035; }
  86%, 100% { opacity: 0.72; }
}

@keyframes apartment-life-c {
  0%, 24% { opacity: 0.035; }
  31%, 46% { opacity: 0.62; }
  54%, 72% { opacity: 0.035; }
  80%, 100% { opacity: 0.7; }
}

/* ── Traffic light ── */
.hk-traffic-light {
  position: absolute;
  top: 35%;
  right: 34%;
  width: clamp(24px, 2vw, 48px);
  isolation: isolate;
  --blur-direction: to top left;
  --blur-bleed: clamp(42px, 4vw, 70px);
  --deep-blur: clamp(24px, 2.4vw, 38px);
  --ash-blur: clamp(30px, 3vw, 48px);
  --ash-drift-x: 12%;
  --ash-drift-y: 8%;
  --ash-origin: 68% 58%;
}

.tl-svg {
  position: relative;
  z-index: 2;
  width: 100%;
  display: block;
  -webkit-mask-image: linear-gradient(var(--blur-direction), transparent 0 32%, rgba(0,0,0,0.18) 50%, #000 72%);
  mask-image: linear-gradient(var(--blur-direction), transparent 0 32%, rgba(0,0,0,0.18) 50%, #000 72%);
}

/* All glow dots — position: absolute against .hk-traffic-light */
.tl-glow {
  position: absolute;
  z-index: 1;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
  filter: blur(2px);
  mix-blend-mode: screen;
}

.tl-glow--red {
  z-index: 1;
  top: 15%;
  width: 48%;
  background: var(--signal-beam-core, #ff3b30);
  box-shadow:
    0 0 clamp(8px, 1.2vw, 16px) var(--signal-beam-glow, #ff665b),
    0 0 clamp(16px, 2vw, 28px) color-mix(in srgb, var(--signal-beam-core, #ff3b30), transparent 34%);
  filter: blur(1px);
  animation: red-pulse 4.5s ease-in-out infinite;
}
.tl-glow--amber { top: 45%; background: #ff9500; opacity: 0.25; }
.tl-glow--green { top: 75%; background: #30d158; opacity: 0.25; }

.tl-red-beam {
  position: absolute;
  z-index: 1;
  top: -42%;
  right: 54%;
  width: 760%;
  height: 130%;
  pointer-events: none;
  background: radial-gradient(
    ellipse 100% 54% at 100% 50%,
    var(--signal-beam-core) 0%,
    color-mix(in srgb, var(--signal-beam-core), transparent 42%) 16%,
    color-mix(in srgb, var(--signal-beam-glow), transparent 68%) 42%,
    color-mix(in srgb, var(--signal-beam-glow), transparent 90%) 68%,
    transparent 88%
  );
  -webkit-mask-image: linear-gradient(to left, #000 0 18%, rgba(0,0,0,0.48) 48%, transparent 100%);
  mask-image: linear-gradient(to left, #000 0 18%, rgba(0,0,0,0.48) 48%, transparent 100%);
  filter: blur(clamp(14px, 1.8vw, 24px));
  mix-blend-mode: screen;
  transform: rotate(-2deg);
  transform-origin: right center;
  animation: red-beam-pulse 4.5s ease-in-out infinite;
}

@keyframes red-pulse {
  0%   { opacity: 1; }
  78%  { opacity: 1; }
  84%  { opacity: 0.25; }
  94%  { opacity: 0.25; }
  100% { opacity: 1; }
}

@keyframes red-beam-pulse {
  0%, 78% { opacity: var(--signal-beam-opacity, 0.18); transform: rotate(-2deg) scaleX(1); }
  84%, 94% { opacity: 0; transform: rotate(-2deg) scaleX(0.82); }
  100% { opacity: var(--signal-beam-opacity, 0.18); transform: rotate(-2deg) scaleX(1); }
}

/* ── Tram wrapper ── */
.hk-tram-wrap {
  position: absolute;
  bottom: 18%;
  left: 28%;
  width: clamp(120px, 14vw, 220px);
  isolation: isolate;
}

.hk-tram {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  mix-blend-mode: luminosity;
  opacity: var(--tram-opacity, 0.9);
  transition: opacity 1200ms ease;
}

.tram-light-spill,
.tram-light-rays {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
}

.tram-light-spill {
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(ellipse 5% 9% at 40.4% 38%, var(--tram-light-core) 0 24%, var(--tram-light-glow) 48%, transparent 78%),
    radial-gradient(ellipse 5% 9% at 44.7% 36.9%, var(--tram-light-core) 0 24%, var(--tram-light-glow) 48%, transparent 78%),
    radial-gradient(ellipse 5% 9% at 49.4% 35.9%, var(--tram-light-core) 0 24%, var(--tram-light-glow) 48%, transparent 78%),
    radial-gradient(ellipse 5% 9% at 53.9% 34.7%, var(--tram-light-core) 0 24%, var(--tram-light-glow) 48%, transparent 78%),
    radial-gradient(ellipse 9% 10% at 66.7% 34.8%, var(--tram-light-core) 0 24%, var(--tram-light-glow) 48%, transparent 78%),
    radial-gradient(ellipse 4.5% 9% at 40.3% 55.5%, var(--tram-light-core) 0 22%, var(--tram-light-glow) 46%, transparent 78%),
    radial-gradient(ellipse 4.5% 9% at 44% 55.2%, var(--tram-light-core) 0 22%, var(--tram-light-glow) 46%, transparent 78%),
    radial-gradient(ellipse 5.5% 10% at 53.8% 54.6%, var(--tram-light-core) 0 22%, var(--tram-light-glow) 46%, transparent 78%),
    radial-gradient(ellipse 9% 10% at 67.5% 53.6%, var(--tram-light-core) 0 22%, var(--tram-light-glow) 46%, transparent 78%),
    radial-gradient(ellipse 86% 64% at 48% 48%,
      color-mix(in srgb, var(--tram-light-haze), transparent 68%) 0%,
      transparent 76%);
  opacity: var(--tram-light-opacity, 0.82);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,0.18) 18%,
    #000 42% 58%,
    rgba(0,0,0,0.18) 82%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,0.18) 18%,
    #000 42% 58%,
    rgba(0,0,0,0.18) 82%,
    transparent 100%
  );
  -webkit-mask-size: 46% 140%;
  mask-size: 46% 140%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: tram-window-pass 5.6s ease-in-out infinite;
}

.tram-light-rays {
  z-index: 0;
  top: -25%;
  right: -40%;
  bottom: -24%;
  left: -40%;
  background: radial-gradient(
    ellipse 28% 78% at 50% 50%,
    color-mix(in srgb, var(--tram-light-core), transparent 54%) 0%,
    color-mix(in srgb, var(--tram-light-glow), transparent 76%) 42%,
    color-mix(in srgb, var(--tram-light-haze), transparent 92%) 68%,
    transparent 88%
  );
  opacity: 0;
  animation: tram-reflection-pass 5.6s ease-in-out infinite;
}

@keyframes tram-window-pass {
  0% {
    -webkit-mask-position: 100% 50%;
    mask-position: 100% 50%;
    opacity: 0;
  }
  10% {
    -webkit-mask-position: 88% 50%;
    mask-position: 88% 50%;
    opacity: var(--tram-light-opacity, 0.82);
  }
  34% {
    -webkit-mask-position: 64% 50%;
    mask-position: 64% 50%;
    opacity: var(--tram-light-opacity, 0.82);
  }
  58% {
    -webkit-mask-position: 40% 50%;
    mask-position: 40% 50%;
    opacity: var(--tram-light-opacity, 0.82);
  }
  82% {
    -webkit-mask-position: 14% 50%;
    mask-position: 14% 50%;
    opacity: var(--tram-light-opacity, 0.82);
  }
  94%, 100% {
    -webkit-mask-position: 0% 50%;
    mask-position: 0% 50%;
    opacity: 0;
  }
}

@keyframes tram-reflection-pass {
  0% { opacity: 0; transform: translateX(14%); }
  10% { opacity: var(--tram-ray-opacity, 0.24); transform: translateX(12%); }
  34% { opacity: var(--tram-ray-opacity, 0.24); transform: translateX(6%); }
  58% { opacity: var(--tram-ray-opacity, 0.24); transform: translateX(-3%); }
  82% { opacity: var(--tram-ray-opacity, 0.24); transform: translateX(-12%); }
  94%, 100% { opacity: 0; transform: translateX(-14%); }
}

@media (prefers-reduced-motion: reduce) {
  .hk-building-lights i,
  .tram-light-spill,
  .tram-light-rays {
    animation: none;
  }
}

/* ── Progressive blur
   Layered SVG copies restore the original soft, ash-like traffic-light edge. ── */
.prog-blur {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.pb-layer {
  position: absolute;
  inset: calc(0px - var(--blur-bleed));
  box-sizing: border-box;
  width: calc(100% + var(--blur-bleed) + var(--blur-bleed));
  height: calc(100% + var(--blur-bleed) + var(--blur-bleed));
  padding: var(--blur-bleed);
  display: block;
}

.pb-layer--soft {
  filter: blur(var(--soft-blur, 4px));
  -webkit-mask-image: linear-gradient(var(--blur-direction), transparent 0 8%, #000 18% 52%, transparent 78%);
  mask-image: linear-gradient(var(--blur-direction), transparent 0 8%, #000 18% 52%, transparent 78%);
}

.pb-layer--medium {
  filter: blur(var(--medium-blur, 4px));
  -webkit-mask-image: linear-gradient(var(--blur-direction), transparent 0 8%, #000 16% 38%, transparent 62%);
  mask-image: linear-gradient(var(--blur-direction), transparent 0 8%, #000 16% 38%, transparent 62%);
}

.pb-layer--strong {
  filter: blur(30px);
  -webkit-mask-image: linear-gradient(var(--blur-direction), transparent 0 7%, #000 14% 27%, transparent 48%);
  mask-image: linear-gradient(var(--blur-direction), transparent 0 7%, #000 14% 27%, transparent 48%);
}

.pb-layer--deep {
  filter: blur(var(--deep-blur));
  -webkit-mask-image: linear-gradient(var(--blur-direction), transparent 0 6%, #000 12% 19%, transparent 34%);
  mask-image: linear-gradient(var(--blur-direction), transparent 0 6%, #000 12% 19%, transparent 34%);
}

.pb-layer--ash {
  opacity: 0.72;
  filter: blur(var(--ash-blur));
  transform: translate(var(--ash-drift-x), var(--ash-drift-y)) scale(1.05);
  -webkit-mask-image: radial-gradient(
    ellipse 78% 70% at var(--ash-origin),
    #000 0 22%,
    rgba(0,0,0,0.72) 42%,
    rgba(0,0,0,0.22) 63%,
    transparent 84%
  );
  mask-image: radial-gradient(
    ellipse 78% 70% at var(--ash-origin),
    #000 0 22%,
    rgba(0,0,0,0.72) 42%,
    rgba(0,0,0,0.22) 63%,
    transparent 84%
  );
}

.temp-controls {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  color: var(--text);
  background: rgba(0,0,0,0.2);
  transform: translateX(-50%);
}
.temp-controls span,
.temp-controls button { font-size: 11px; font-weight: 700; }
.temp-controls span { padding: 0 8px; opacity: 0.72; }
.temp-controls button {
  border: 0;
  border-radius: 999px;
  padding: 8px 11px;
  color: inherit;
  background: rgba(255,255,255,0.14);
}
.temp-controls button:hover,
.temp-controls button.is-active { background: rgba(255,255,255,0.78); color: #111; }

.projects {
  position: relative;
  min-height: 300vh;
  margin-top: 0;
  padding: 18vh 0 28vh;
  color: var(--text);
  background: #000;
  overflow: hidden;
  isolation: isolate;
}

.projects__fixed-copy {
  position: sticky;
  top: 58px;
  z-index: 5;
  width: calc(100% - 64px);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,0.82);
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
}

.project-panel {
  position: sticky;
  top: 13vh;
  width: min(88vw, 1540px);
  height: min(72vh, 840px);
  margin: 0 auto 32vh;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: clamp(24px, 2.5vw, 42px);
  color: var(--text);
  background: #222;
  overflow: hidden;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transform-origin: center;
  box-shadow:
    0 36px 90px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.12);
  cursor: none;
  transition: transform 220ms ease-out, filter 220ms ease;
}

.project-panel:nth-of-type(2) { top: 15vh; }
.project-panel:nth-of-type(3) { top: 17vh; }

.project-panel::before,
.project-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.project-panel::before {
  background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.46));
}

.project-panel::after {
  top: auto;
  height: 22%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.56));
}

.project-panel:hover {
  filter: brightness(1.06);
}

.project-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 600ms ease;
}

.project-panel:hover img {
  transform: scale(1.09);
}

.project-panel__meta {
  position: relative;
  z-index: 2;
  align-self: center;
  margin-bottom: clamp(90px, 13vh, 130px);
  font-size: clamp(14px, 1.25vw, 22px);
  font-weight: 800;
  text-align: center;
}

.project-panel h2 {
  position: absolute;
  z-index: 2;
  top: 45%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  font-family: 'Valley Sans', serif;
  font-size: clamp(54px, 10vw, 220px);
  font-weight: 400;
  line-height: 0.8;
  text-align: center;
  letter-spacing: -0.055em;
  white-space: nowrap;
}

.project-panel__arrow {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 23%;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.74);
  font-size: 31px;
  transform: translateX(-50%);
  transition: opacity 180ms ease, transform 180ms ease;
}

.project-panel:hover .project-panel__arrow {
  opacity: 0;
  transform: translateX(-50%) scale(0.82);
}

.project-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text);
  background: rgba(0,0,0,0.78);
  font-size: 32px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72);
  transition: opacity 180ms ease, transform 180ms ease;
}

.project-cursor.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.site-footer {
  min-height: 52vh;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(72px, 10vw, 140px) clamp(24px, 5vw, 80px);
  color: var(--text);
  background: #000;
}

.site-footer__kicker {
  margin-bottom: 14px;
  color: rgba(255,255,255,0.58);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer h2 {
  max-width: 720px;
  font-family: 'Valley Sans', serif;
  font-size: clamp(54px, 9vw, 150px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  font-size: 14px;
  font-weight: 700;
}

.site-footer__links a {
  color: rgba(255,255,255,0.78);
}

.site-footer__links a:hover {
  color: var(--text);
}

@media (max-width: 1100px) {
  .site-nav {
    width: calc(100% - 36px);
  }

  .hero {
    padding-inline: clamp(24px, 6vw, 72px);
  }

  .big-ben-wrap {
    top: 26%;
    left: 27%;
    width: clamp(58px, 7.4vw, 86px);
  }

  .hk-building-lights {
    top: 10%;
    left: 50%;
    width: min(82vw, 820px);
    height: min(36vh, 320px);
    transform: translateX(-50%);
  }

  .hk-traffic-light {
    top: 34%;
    right: auto;
    left: calc(50% + clamp(128px, 21vw, 245px));
    width: clamp(26px, 3vw, 42px);
  }

  .hk-tram-wrap {
    top: calc(50% + clamp(118px, 17vh, 165px));
    bottom: auto;
    left: calc(50% - clamp(265px, 31vw, 350px));
    width: clamp(122px, 18vw, 190px);
  }
}

@media (max-width: 900px) {
  .hero {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 112px 28px 96px;
  }

  .big-ben-wrap {
    top: 24%;
    left: 20%;
    width: clamp(50px, 9vw, 72px);
  }

  .hk-building-lights {
    top: 12%;
    width: 88vw;
    height: 34vh;
    opacity: 0.66;
  }

  .hk-traffic-light {
    top: 34%;
    left: calc(50% + clamp(102px, 23vw, 175px));
    width: clamp(24px, 4vw, 36px);
  }

  .hk-tram-wrap {
    top: calc(50% + clamp(112px, 17vh, 150px));
    left: calc(50% - clamp(205px, 34vw, 285px));
    width: clamp(118px, 22vw, 170px);
  }

  .project-panel {
    top: 14vh;
    width: calc(100vw - 36px);
    height: min(58vh, 620px);
    margin-bottom: 22vh;
  }

  .project-panel:nth-of-type(2),
  .project-panel:nth-of-type(3) {
    top: 14vh;
  }

  .projects__fixed-copy {
    width: calc(100% - 36px);
  }

  .site-footer {
    min-height: 62vh;
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer__links {
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .site-nav {
    width: calc(100% - 28px);
    top: 14px;
    align-items: flex-start;
    gap: 14px;
  }

  .nav-logo {
    font-size: 11px;
    line-height: 1.2;
    padding-top: 9px;
  }

  .nav-pill {
    gap: clamp(10px, 3vw, 14px);
  }

  .nav-link,
  .nav-cta {
    padding: 8px 0;
    font-size: 11px;
  }

  .hero {
    padding: 104px 18px 86px;
  }

  .hero-title {
    font-size: clamp(42px, 15vw, 68px);
  }

  .hero-role-row {
    width: min(100%, 340px);
    margin-top: 18px;
    gap: 2px;
    flex-wrap: wrap;
  }

  .hero-role {
    width: 100%;
    justify-content: center;
    font-size: clamp(12px, 3.3vw, 14px);
    white-space: normal;
  }

  .hero-location {
    min-width: 122px;
  }

  .city-toggle {
    width: 66px;
    height: 38px;
    margin-top: 2px;
  }

  .big-ben-wrap {
    top: 25%;
    left: 13%;
    width: clamp(44px, 12vw, 60px);
  }

  .hk-building-lights {
    top: 12%;
    width: 104vw;
    height: 32vh;
    opacity: 0.56;
  }

  .hk-distant-building {
    width: clamp(34px, 9.4vw, 50px);
  }

  .hk-distant-building.tower-1 {
    left: 13%;
    top: 53%;
  }

  .hk-distant-building.tower-2 {
    left: 28%;
    top: 0;
  }

  .hk-distant-building.tower-3 {
    right: 29%;
    top: 8%;
  }

  .hk-distant-building.tower-5 {
    left: 49%;
    top: 4%;
  }

  .hk-distant-building.tower-4 {
    right: 12%;
    top: 36%;
  }

  .hk-traffic-light {
    top: 35%;
    left: calc(50% + clamp(94px, 27vw, 126px));
    width: clamp(22px, 6vw, 30px);
    --blur-bleed: clamp(28px, 8vw, 42px);
    --deep-blur: clamp(18px, 5vw, 28px);
    --ash-blur: clamp(22px, 6vw, 34px);
  }

  .hk-tram-wrap {
    top: calc(50% + clamp(106px, 18vh, 132px));
    left: calc(50% - clamp(150px, 38vw, 190px));
    width: clamp(108px, 31vw, 140px);
  }

  .temp-controls {
    bottom: calc(12px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px);
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .temp-controls::-webkit-scrollbar {
    display: none;
  }

  .temp-controls span,
  .temp-controls button {
    flex: 0 0 auto;
    font-size: 10px;
  }

  .temp-controls button {
    padding: 7px 9px;
  }

  .project-panel h2 {
    white-space: normal;
    max-width: 92%;
    font-size: clamp(50px, 18vw, 92px);
  }

  .project-panel {
    width: calc(100vw - 24px);
    height: min(54vh, 520px);
    border-radius: 22px;
  }

  .project-panel__arrow,
  .project-cursor {
    width: 58px;
    height: 58px;
    font-size: 24px;
  }

  .site-footer h2 {
    font-size: clamp(52px, 18vw, 92px);
  }
}

@media (max-width: 390px) {
  .site-nav {
    width: calc(100% - 22px);
  }

  .nav-pill {
    gap: 8px;
  }

  .nav-link,
  .nav-cta {
    font-size: 10.5px;
  }

  .hero-title {
    font-size: clamp(38px, 14vw, 56px);
  }

  .hk-building-lights {
    top: 13%;
    width: 110vw;
    height: 30vh;
  }

  .hk-traffic-light {
    left: calc(50% + 84px);
    width: 22px;
  }

  .hk-tram-wrap {
    top: calc(50% + 112px);
    left: calc(50% - 138px);
    width: 106px;
  }
}

@media (hover: none), (pointer: coarse) {
  body,
  button,
  input,
  a,
  .city-toggle,
  .project-panel {
    cursor: auto;
  }

  .cursor-ring,
  .project-cursor {
    display: none;
  }
}

/* Final winning layer for the highlight duplicate variant. */
:root {
  --variant-bg: #ececec;
  --variant-card: #f8f7f2;
  --variant-line: rgba(34,34,34,0.12);
  --highlight-green: #a8de97;
  --highlight-reveal: 1;
  --hero-scroll: 0;
  --hero-parallax-y: 0px;
}

body {
  color: var(--text);
  background: var(--variant-bg);
  font-family: "Google Sans Flex", sans-serif;
}

.liquid-bg,
.hero::after,
.morph-filter,
.london-elements {
  display: none;
}

.site-nav {
  top: clamp(18px, 2.2vw, 34px);
  color: var(--text);
  mix-blend-mode: normal;
}

.site-nav.is-over-work,
.site-nav.is-over-work .nav-link,
.site-nav.is-over-work .nav-cta {
  color: #f3f0ea;
}

.nav-logo,
.nav-link,
.nav-cta,
.hero-title,
.hero-role,
.project-panel__meta,
.project-panel h2,
.site-footer,
.site-footer h2 {
  font-family: "Google Sans Flex", sans-serif;
}

.hero {
  position: relative;
  min-height: 270svh;
  display: block;
  padding: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--highlight-green), transparent 74%) 0 14rem, transparent 28rem),
    radial-gradient(circle at 18% 82%, color-mix(in srgb, var(--highlight-green), transparent 84%) 0 10rem, transparent 24rem),
    var(--variant-bg);
  overflow: visible;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: #10100f;
  opacity: clamp(0, calc((var(--hero-exit) - 0.82) / 0.18), 1);
}

.hero-stage {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(110px, 14vh, 170px) clamp(22px, 7vw, 120px);
  overflow: hidden;
}

body.hero-transitioning .hero {
  opacity: 1;
  filter: none;
  transform: none;
}

body.hero-exited .hero { visibility: visible; }

.hero-title {
  position: relative;
  z-index: 4;
  max-width: min(1100px, 92vw);
  font-size: clamp(58px, 11vw, 188px);
  font-style: normal;
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.085em;
  transform: translate3d(0, var(--hero-parallax-y), 0);
  transition: color 700ms ease;
  will-change: transform;
}

.hero-role-row {
  position: relative;
  z-index: 5;
  margin-top: clamp(28px, 4vw, 56px);
  gap: clamp(8px, 1.4vw, 18px);
  flex-wrap: wrap;
  transform: translate3d(0, var(--hero-parallax-y), 0);
  will-change: transform;
}

.hero-role {
  color: var(--muted-text);
  font-size: clamp(18px, 2vw, 33px);
  font-weight: 500;
  letter-spacing: -0.04em;
  gap: 0.38em;
  white-space: normal;
}

.hero-location {
  min-width: 0;
  text-align: center;
}

.hero-highlight {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 0 0.08em 0.16em;
  color: color-mix(in srgb, var(--text), var(--highlight-green) 44%);
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
}

.hero-highlight::before {
  content: '';
  position: absolute;
  top: auto;
  right: -0.08em;
  bottom: 0.08em;
  left: -0.08em;
  z-index: -1;
  width: auto;
  height: 0.38em;
  aspect-ratio: auto;
  border: 0;
  border-radius: 999px 60% 75% 45%;
  background: var(--highlight-green);
  opacity: 0.78;
  translate: 0 0;
  rotate: -1.4deg;
  mask-image: none;
  transform: scaleX(var(--highlight-reveal, 1));
  transform-origin: left center;
  transition: opacity 700ms ease;
}

.city-toggle { display: none; }

.temp-controls {
  color: var(--text);
  border-color: var(--variant-line);
  background: color-mix(in srgb, var(--variant-card), transparent 18%);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  backdrop-filter: blur(18px);
}

.temp-controls button {
  background: color-mix(in srgb, var(--text), transparent 90%);
}

.temp-controls button:hover,
.temp-controls button.is-active {
  color: var(--variant-bg);
  background: var(--text);
}

:root[data-location="hong-kong"] .hk-elements {
  opacity: 0;
  visibility: visible;
}

.hk-elements {
  z-index: 1;
  opacity: 0;
  transition: opacity 360ms ease;
}

body.hero-hk-stage .hk-elements {
  opacity: 1;
}

.hk-building-lights {
  top: 12%;
  left: 50%;
  width: min(76vw, 980px);
  height: 30vh;
  opacity: 0.82;
  transform: translateX(-50%);
}

.hk-distant-building {
  width: clamp(38px, 4vw, 70px);
}

.hk-traffic-light {
  top: 27%;
  right: 16%;
  left: auto;
  width: clamp(26px, 2.4vw, 42px);
  opacity: 0.86;
}

.hk-tram-wrap {
  top: auto;
  left: 13%;
  bottom: 14%;
  width: clamp(112px, 13vw, 190px);
  opacity: 0.78;
}

.tl-red-beam,
.tram-light-rays,
.prog-blur {
  opacity: 0.64;
}

.projects {
  min-height: 280vh;
  padding-top: clamp(110px, 18vh, 190px);
  color: #f3f0ea;
  background: #10100f;
}

.projects__fixed-copy {
  color: rgba(243,240,234,0.72);
}

.project-panel {
  width: min(86vw, 1320px);
  border-color: rgba(243,240,234,0.16);
  border-radius: clamp(28px, 3vw, 54px);
  background: #181816;
}

.project-panel h2 {
  font-size: clamp(54px, 8.6vw, 170px);
  font-weight: 800;
  letter-spacing: -0.09em;
}

.site-footer {
  color: #f3f0ea;
  background: #10100f;
}

.site-footer h2 {
  font-weight: 800;
  letter-spacing: -0.09em;
}

:root[data-period="night"] .hero {
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--highlight-green), transparent 84%) 0 15rem, transparent 32rem),
    radial-gradient(circle at 18% 82%, rgba(255,255,255,0.035) 0 11rem, transparent 28rem),
    var(--variant-bg);
}

body.hero-hk-stage .hero {
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--highlight-green), transparent 84%) 0 15rem, transparent 32rem),
    radial-gradient(circle at 18% 82%, rgba(255,255,255,0.035) 0 11rem, transparent 28rem),
    #10100f;
}

:root[data-period="night"] .hero-highlight::before {
  opacity: 0.72;
}

body.hero-hk-stage .hero-highlight::before {
  opacity: 0.76;
}

@media (max-width: 900px) {
  .hero-title {
    font-size: clamp(54px, 15vw, 118px);
  }

  .hero-role {
    justify-content: center;
    font-size: clamp(17px, 4.4vw, 28px);
  }

  .city-toggle {
    margin-left: 0;
  }

  .hk-building-lights {
    width: 96vw;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-inline: 18px;
  }

  .hero-title {
    font-size: clamp(48px, 18vw, 82px);
  }

  .hero-role-row {
    width: min(100%, 390px);
    gap: 8px;
  }

  .hero-role {
    display: inline;
    width: auto;
    line-height: 1.45;
  }

  .hero-highlight {
    white-space: normal;
  }

  .hero-highlight::before {
    right: -0.08em;
    left: -0.08em;
    height: 0.36em;
  }

  .hk-building-lights {
    top: 13%;
    width: 110vw;
    opacity: 0.74;
  }

  .hk-traffic-light {
    right: 7%;
    left: auto;
  }

  .hk-tram-wrap {
    left: 7%;
  }
}

/* Final scroll-led HK reveal override. Must stay at file end. */
body.hero-hk-stage .hk-elements {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 3;
}

body.hero-hk-stage .hk-elements * {
  animation-play-state: running !important;
}

body.hero-hk-stage .hk-building-lights {
  opacity: 0.92 !important;
}

body.hero-hk-stage .hk-traffic-light {
  opacity: 0.96 !important;
}

body.hero-hk-stage .hk-tram-wrap {
  opacity: 0.9 !important;
}

body.hero-hk-stage .tl-red-beam,
body.hero-hk-stage .tram-light-rays,
body.hero-hk-stage .prog-blur {
  opacity: 0.72 !important;
}

/* True final highlight duplicate override: keep this at EOF so it beats older duplicate blocks. */
:root {
  --variant-bg: #b8b0d0;
  --variant-card: #f8f7f2;
  --variant-line: rgba(29,27,31,0.16);
  --highlight-green: #ff8c6e;
  --day-core: #ffc876;
  --day-glow: #ff8c6e;
  --day-halo: #e8799a;
  --day-ambient: #c9a0c8;
  --day-top: #a2ddfa;
  --day-base: #b8b0d0;
  --sunset-core: #d64b25;
  --sunset-glow: #FC7A47;
  --sunset-halo: #EF7758;
  --sunset-ambient: #9F5A6C;
  --sunset-top: #795877;
  --sunset-base: #3C4159;
}

.site-nav {
  justify-content: flex-end;
}

.nav-logo,
.temp-controls {
  display: none !important;
}

.hero {
  color: var(--text);
  background:
    radial-gradient(circle 38vmin at 48% 50%,
      var(--day-core) 0%,
      var(--day-glow) 46%,
      transparent 100%),
    radial-gradient(circle 78vmin at 50% 50%,
      var(--day-halo) 0%,
      var(--day-ambient) 56%,
      transparent 100%),
    linear-gradient(180deg, var(--day-top) 0%, var(--day-base) 100%) !important;
  transition: color 700ms ease, background-color 900ms ease;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block !important;
  pointer-events: none;
  background:
    radial-gradient(circle 42vmin at 48% 50%,
      var(--sunset-core) 0%,
      var(--sunset-glow) 48%,
      transparent 100%),
    radial-gradient(circle 84vmin at 50% 50%,
      var(--sunset-halo) 0%,
      var(--sunset-ambient) 58%,
      transparent 100%),
    linear-gradient(180deg, var(--sunset-top) 0%, var(--sunset-base) 100%);
  opacity: 0;
  transition: opacity 900ms ease;
}

body.hero-hk-stage .hero::after {
  opacity: 1;
}

.hero-stage {
  position: sticky;
  z-index: 2;
  overflow: visible !important;
}

body.hero-hk-stage .hero {
  color: #fff7ef;
}

body.hero-hk-stage .hero-role {
  color: rgba(255,247,239,0.76);
}

.hero-highlight,
.hero-location {
  color: inherit;
  padding: 0;
}

.hero-highlight::before,
.hero-location::before {
  display: none !important;
}

.hk-elements,
.hk-elements *,
.hk-traffic-light,
.hk-tram-wrap,
.tram-light-spill,
.tram-light-rays,
.tl-red-beam,
.prog-blur,
.pb-layer {
  overflow: visible !important;
  contain: none !important;
}

body.hero-hk-stage .tl-red-beam {
  width: 2200% !important;
  height: 320% !important;
  right: -500% !important;
  left: auto !important;
  top: -112% !important;
  filter: blur(42px) url(#light-noise) !important;
  mask-image: radial-gradient(ellipse at 73% 50%, #000 0 8%, rgba(0,0,0,0.62) 36%, rgba(0,0,0,0.16) 62%, transparent 84%) !important;
  -webkit-mask-image: radial-gradient(ellipse at 73% 50%, #000 0 8%, rgba(0,0,0,0.62) 36%, rgba(0,0,0,0.16) 62%, transparent 84%) !important;
}

body.hero-hk-stage .tram-light-rays {
  inset: -52% -86% -44% -92% !important;
  filter: blur(24px) url(#light-noise) !important;
  mask-image: radial-gradient(ellipse at 60% 50%, #000 0 28%, rgba(0,0,0,0.55) 58%, transparent 86%) !important;
  -webkit-mask-image: radial-gradient(ellipse at 60% 50%, #000 0 28%, rgba(0,0,0,0.55) 58%, transparent 86%) !important;
}

body.hero-hk-stage .tram-light-spill {
  inset: -35% -44% -42% -60% !important;
  filter: blur(28px) url(#light-noise) !important;
}

/* Final attentive build: one soft orb, off-white landing, night-time HK transition. */
:root {
  --variant-bg: #f3f3f0;
  --variant-card: #f8f7f2;
  --variant-line: rgba(31,29,26,0.14);
  --highlight-green: #f0b96b;
  --orb-x: 50%;
  --orb-y: 99%;
  --night-reveal: 0;
  --work-blend: 0;
  --hero-text-exit: 0;
  --hk-reveal: 0;
  --hk-blur: 22px;
  --hk-y: 18px;
  --hk-scale: 0.985;
  --hk-child-opacity: 0.16;
  --hero-title-color: #1f1d1a;
  --hero-subtitle-color: #4c463e;
}

.hero {
  color: var(--hero-title-color);
  min-height: 300svh;
  background: #f3f3f0 !important;
  overflow: visible;
}

.hero::after {
  display: none !important;
}

.hero::before {
  z-index: 11;
  opacity: 0 !important;
}

.hero-stage {
  isolation: isolate;
  overflow: visible !important;
  background:
    linear-gradient(
      rgb(0 0 0 / var(--work-blend, 0)),
      rgb(0 0 0 / var(--work-blend, 0))),
    radial-gradient(circle 58vmin at var(--orb-x) var(--orb-y),
      rgba(255,244,229,1) 0%,
      rgba(247,183,137,0.9) 34%,
      rgba(230,128,103,0.46) 60%,
      rgba(243,243,240,0) 82%),
    radial-gradient(circle 108vmin at var(--orb-x) var(--orb-y),
      rgba(219,148,133,0.48) 0%,
      rgba(226,212,211,0.28) 54%,
      rgba(243,243,240,0) 80%),
    linear-gradient(180deg, #f8f8f5 0%, #eeeeec 100%);
}

.hero-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
  background:
    radial-gradient(circle 24vmin at calc(var(--orb-x) + 12%) calc(var(--orb-y) + 14vmin),
      rgba(190,166,200,0.42) 0%,
      rgba(162,137,185,0.23) 48%,
      rgba(118,92,153,0) 100%),
    radial-gradient(circle 30vmin at calc(var(--orb-x) - 14%) calc(var(--orb-y) - 6vmin),
      rgba(70,61,117,0.5) 0%,
      rgba(91,76,137,0.25) 54%,
      rgba(111,93,148,0) 100%),
    radial-gradient(circle 45vmin at var(--orb-x) calc(var(--orb-y) - 3vmin),
      rgba(81,68,126,0.99) 0%,
      rgba(103,85,143,0.97) 36%,
      rgba(130,107,164,0.93) 61%,
      rgba(158,134,181,0.82) 79%,
      rgba(154,134,178,0.54) 92%,
      rgba(139,122,168,0) 100%),
    radial-gradient(circle 50vmin at var(--orb-x) calc(var(--orb-y) + 4vmin),
      rgba(203,202,217,0.6) 0%,
      rgba(215,212,222,0.65) 55%,
      rgba(239,235,232,0.76) 70%,
      rgba(134,159,204,0.42) 86%,
      rgba(49,91,157,0) 100%),
    radial-gradient(ellipse 78vmin 68vmin at var(--orb-x) var(--orb-y),
      rgba(77,101,161,0.74) 0%,
      rgba(35,79,142,0.72) 55%,
      rgba(29,64,122,0.32) 82%,
      rgba(20,35,79,0) 100%),
    radial-gradient(ellipse 32vmin 72vmin at 52% 53%,
      rgba(37,101,166,0.48) 0%,
      rgba(32,75,139,0.18) 46%,
      rgba(37,29,72,0) 78%),
    radial-gradient(ellipse 70vmin 72vmin at 4% 100%,
      rgba(43,25,66,0.84) 0%,
      rgba(43,25,66,0) 72%),
    radial-gradient(ellipse 70vmin 72vmin at 96% 100%,
      rgba(42,25,65,0.78) 0%,
      rgba(42,25,65,0) 72%),
    linear-gradient(180deg,
      #214f8c 0%,
      #263c75 40%,
      #2c254f 68%,
      #181020 84%,
      #050307 96%,
      #08050c 100%);
  filter: blur(clamp(14px, 1.35vw, 24px)) saturate(0.88);
  transform: scale(1.045);
  transform-origin: center;
  opacity: var(--night-reveal, 0);
}

.hero-stage::after {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: 9;
  display: block;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  filter: contrast(1.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}

body.hero-hk-stage .hero-stage::after {
  opacity: 0.74;
  mix-blend-mode: multiply;
  filter: contrast(1.34);
}

.hero-title {
  color: var(--hero-title-color) !important;
  opacity: calc(1 - var(--hero-text-exit, 0));
  filter: blur(calc(var(--hero-text-exit, 0) * 52px));
  transition: color 120ms linear;
}

.hero-role-row {
  opacity: calc(1 - var(--hero-text-exit, 0));
  filter: blur(calc(var(--hero-text-exit, 0) * 40px));
}

.hero-role,
.hero-location {
  color: var(--hero-subtitle-color) !important;
  font-size: 14px !important;
  font-weight: 400;
  letter-spacing: -0.02em;
  transition: color 120ms linear;
}

.nav-link,
.nav-cta {
  font-weight: 300;
}

.hk-elements {
  opacity: var(--hk-reveal, 0) !important;
  visibility: visible !important;
  filter: blur(var(--hk-blur, 22px)) saturate(0.96) !important;
  transform: translate3d(0, var(--hk-y, 18px), 0) scale(var(--hk-scale, 0.985)) !important;
  transform-origin: 50% 54%;
  transition: none !important;
}

body.hero-hk-stage .hk-elements * {
  animation-play-state: running !important;
}

body.hero-hk-stage .hk-building-lights,
body.hero-hk-stage .hk-traffic-light,
body.hero-hk-stage .hk-tram-wrap {
  opacity: var(--hk-child-opacity, 0.16) !important;
}

body.hero-hk-stage .hk-tram-wrap {
  top: calc(50% + clamp(72px, 8vh, 92px));
  right: auto;
  bottom: auto;
  left: calc(50% - clamp(400px, 30vw, 500px));
  width: clamp(190px, 20vw, 310px);
}

body.hero-hk-stage .hk-tram {
  opacity: 0.88 !important;
  mix-blend-mode: normal !important;
  filter:
    blur(1.1px)
    grayscale(1)
    brightness(0.48)
    contrast(1.28)
    sepia(0.34)
    hue-rotate(188deg)
    saturate(1.45) !important;
}

body.hero-hk-stage .hk-traffic-light {
  top: 64%;
  right: 18%;
  width: clamp(22px, 1.6vw, 32px);
  --blur-bleed: clamp(70px, 7vw, 110px);
  --soft-blur: clamp(7px, 0.7vw, 11px);
  --medium-blur: clamp(12px, 1.2vw, 19px);
}

body.hero-hk-stage .tl-svg {
  filter: blur(1.25px);
}

body.hero-hk-stage .hk-tram-wrap::after,
body.hero-hk-stage .hk-traffic-light::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
}

body.hero-hk-stage .hk-tram-wrap::after {
  right: -10%;
  bottom: 13%;
  left: -24%;
  height: 25%;
  background: radial-gradient(
    ellipse,
    rgba(91,117,183,0.3) 0%,
    rgba(113,84,151,0.18) 44%,
    transparent 78%
  );
  filter: blur(18px);
}

body.hero-hk-stage .hk-traffic-light::after {
  right: -140%;
  bottom: -52%;
  left: -140%;
  height: 92%;
  background: radial-gradient(
    ellipse,
    rgba(255,93,84,0.2) 0%,
    rgba(115,75,139,0.13) 48%,
    transparent 80%
  );
  filter: blur(14px);
  animation: hk-signal-ground-pulse 4.5s ease-in-out infinite;
}

@keyframes hk-signal-ground-pulse {
  0%, 78%, 100% { opacity: 0.7; transform: scaleX(1); }
  84%, 94% { opacity: 0.18; transform: scaleX(0.82); }
}

.hk-distant-building.tower-6 {
  left: -8%;
  top: 22%;
  width: clamp(64px, 6.8vw, 108px);
  height: 68%;
  opacity: 0.88;
  --window-blur: 0px;
  --window-scale: 1.18;
}

.hk-distant-building.tower-7 {
  right: -5%;
  top: -2%;
  width: clamp(30px, 3vw, 48px);
  height: 46%;
  opacity: 0.4;
  --window-blur: clamp(4px, 0.48vw, 7px);
  --window-scale: 0.7;
}

.hk-distant-building.tower-8 {
  right: 7%;
  top: 52%;
  width: clamp(44px, 4.6vw, 74px);
  height: 44%;
  opacity: 0.7;
  --window-blur: clamp(1.2px, 0.14vw, 2.2px);
  --window-scale: 0.94;
}

.hk-distant-building.tower-1 {
  left: 3%;
}

.hk-distant-building.tower-2 {
  left: 12%;
}

.hk-distant-building.tower-3 {
  right: 15%;
}

.hk-distant-building.tower-4 {
  right: 2%;
}

.hk-distant-building.tower-5 {
  left: 24%;
}

.hk-distant-building.tower-9 {
  left: -17%;
  top: -8%;
  width: clamp(28px, 2.8vw, 44px);
  height: 58%;
  opacity: 0.36;
  --window-blur: clamp(4.8px, 0.55vw, 8px);
  --window-scale: 0.66;
}

.hk-distant-building.tower-10 {
  left: 31%;
  top: 48%;
  width: clamp(42px, 4.4vw, 70px);
  height: 48%;
  opacity: 0.68;
  --window-blur: clamp(1.6px, 0.18vw, 2.8px);
  --window-scale: 0.9;
}

.hk-distant-building.tower-11 {
  right: -16%;
  top: 18%;
  width: clamp(70px, 7.2vw, 116px);
  height: 76%;
  opacity: 0.9;
  --window-blur: clamp(0.2px, 0.03vw, 0.5px);
  --window-scale: 1.2;
}

.hk-distant-building.tower-12 {
  right: 28%;
  top: -12%;
  width: clamp(30px, 3.1vw, 50px);
  height: 48%;
  opacity: 0.4;
  --window-blur: clamp(4px, 0.46vw, 6.8px);
  --window-scale: 0.72;
}

.hk-distant-building.tower-13 {
  left: 18%;
  top: 26%;
  width: clamp(56px, 5.8vw, 92px);
  height: 70%;
  opacity: 0.82;
  --window-blur: clamp(0.7px, 0.08vw, 1.3px);
  --window-scale: 1.04;
}

.hk-distant-building.tower-14 {
  left: -27%;
  top: 34%;
  width: clamp(68px, 7vw, 112px);
  height: 66%;
  opacity: 0.82;
  --window-blur: clamp(0.4px, 0.05vw, 0.8px);
  --window-scale: 1.16;
}

.hk-distant-building.tower-15 {
  left: 27%;
  top: -14%;
  width: clamp(28px, 2.9vw, 46px);
  height: 46%;
  opacity: 0.36;
  --window-blur: clamp(4.6px, 0.52vw, 7.6px);
  --window-scale: 0.68;
}

.hk-distant-building.tower-16 {
  right: -27%;
  top: -6%;
  width: clamp(70px, 7.3vw, 118px);
  height: 72%;
  opacity: 0.86;
  --window-blur: clamp(0.3px, 0.04vw, 0.7px);
  --window-scale: 1.18;
}

.hk-distant-building.tower-17 {
  right: 22%;
  top: 44%;
  width: clamp(48px, 5vw, 80px);
  height: 52%;
  opacity: 0.64;
  --window-blur: clamp(1.6px, 0.18vw, 2.8px);
  --window-scale: 0.9;
}

.hk-distant-building i {
  filter: blur(var(--window-blur, 0px)) brightness(1.22);
}

.hk-distant-building.tower-6 i,
.hk-distant-building.tower-11 i {
  width: clamp(7px, 0.58vw, 11px);
  height: clamp(9px, 0.78vw, 15px);
  border-radius: clamp(2px, 0.18vw, 3px);
}

.hk-distant-building.tower-11 i {
  width: clamp(10px, 0.82vw, 16px);
  height: clamp(13px, 1.08vw, 21px);
  border-radius: clamp(2px, 0.22vw, 4px);
}

.hk-distant-building.tower-2 i,
.hk-distant-building.tower-13 i,
.hk-distant-building.tower-14 i,
.hk-distant-building.tower-16 i {
  width: clamp(6px, 0.48vw, 9px);
  height: clamp(8px, 0.66vw, 13px);
}

.hk-distant-building.tower-9 i,
.hk-distant-building.tower-10 i,
.hk-distant-building.tower-11 i,
.hk-distant-building.tower-12 i,
.hk-distant-building.tower-13 i,
.hk-distant-building.tower-14 i,
.hk-distant-building.tower-15 i,
.hk-distant-building.tower-16 i,
.hk-distant-building.tower-17 i {
  animation-name: none !important;
}

:root[data-period="night"] .hk-distant-building.tower-9 i:not(.is-dark),
:root[data-period="night"] .hk-distant-building.tower-10 i:not(.is-dark),
:root[data-period="night"] .hk-distant-building.tower-11 i:not(.is-dark),
:root[data-period="night"] .hk-distant-building.tower-12 i:not(.is-dark),
:root[data-period="night"] .hk-distant-building.tower-13 i:not(.is-dark),
:root[data-period="night"] .hk-distant-building.tower-14 i:not(.is-dark),
:root[data-period="night"] .hk-distant-building.tower-15 i:not(.is-dark),
:root[data-period="night"] .hk-distant-building.tower-16 i:not(.is-dark),
:root[data-period="night"] .hk-distant-building.tower-17 i:not(.is-dark) {
  opacity: 0.56;
}

:root[data-period="night"] .hk-building-lights .life-a {
  animation-name: apartment-life-a !important;
}

:root[data-period="night"] .hk-building-lights .life-b {
  animation-name: apartment-life-b !important;
}

:root[data-period="night"] .hk-building-lights .life-c {
  animation-name: apartment-life-c !important;
}

:root[data-period="night"] .hk-distant-building i:not(.is-dark) {
  box-shadow:
    0 0 7px color-mix(in srgb, var(--tram-light-glow), transparent 18%),
    0 0 18px color-mix(in srgb, var(--tram-light-haze), transparent 52%);
}

body.hero-hk-stage .tram-light-spill {
  z-index: 3;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 3.5% 6.5% at 48.8% 34.8%,
      var(--tram-light-core) 0 30%, var(--tram-light-glow) 54%, transparent 82%),
    radial-gradient(ellipse 3.8% 6.8% at 54.1% 34.3%,
      var(--tram-light-core) 0 30%, var(--tram-light-glow) 54%, transparent 82%),
    radial-gradient(ellipse 7% 7.8% at 66.6% 34.2%,
      var(--tram-light-core) 0 28%, var(--tram-light-glow) 54%, transparent 84%);
  filter: blur(6px) url(#light-noise) !important;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,0.04) 14%,
    rgba(0,0,0,0.28) 32%,
    #000 50%,
    rgba(0,0,0,0.28) 68%,
    rgba(0,0,0,0.04) 86%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,0.04) 14%,
    rgba(0,0,0,0.28) 32%,
    #000 50%,
    rgba(0,0,0,0.28) 68%,
    rgba(0,0,0,0.04) 86%,
    transparent 100%
  ) !important;
  -webkit-mask-size: 32% 100%;
  mask-size: 32% 100%;
}

body.hero-hk-stage .tram-light-rays {
  z-index: 1;
  inset: 20% 20% 51% 36% !important;
  background:
    radial-gradient(ellipse 76% 80% at 52% 50%,
      color-mix(in srgb, var(--tram-light-core), transparent 50%) 0%,
      color-mix(in srgb, var(--tram-light-glow), transparent 72%) 42%,
      transparent 82%);
  filter: blur(13px) url(#light-noise) !important;
  -webkit-mask-image: radial-gradient(
    ellipse at 50% 50%,
    #000 0%,
    rgba(0,0,0,0.7) 38%,
    rgba(0,0,0,0.16) 70%,
    transparent 100%
  ) !important;
  mask-image: radial-gradient(
    ellipse at 50% 50%,
    #000 0%,
    rgba(0,0,0,0.7) 38%,
    rgba(0,0,0,0.16) 70%,
    transparent 100%
  ) !important;
}

.hk-car-lights {
  position: absolute;
  z-index: 1;
  top: 76%;
  right: 22%;
  bottom: auto;
  left: 48%;
  height: 7%;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.9;
  transform: rotate(-4deg);
  transform-origin: left center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.hk-car-lights::before {
  display: none;
}

.car-light-pair {
  position: absolute;
  top: var(--pair-y, 20%);
  left: var(--pair-x, 20%);
  display: flex;
  align-items: center;
  gap: var(--pair-gap, clamp(8px, 0.7vw, 13px));
  opacity: 0;
  filter: none;
  animation: hk-car-drift-right var(--travel-time, 17s) ease-in-out infinite;
  animation-delay: var(--travel-delay, 0s);
  will-change: transform, opacity;
}

.car-light-pair i {
  display: block;
  width: var(--bulb-size, clamp(9px, 0.78vw, 14px));
  aspect-ratio: 1.9 / 1;
  border-radius: 68% 42% 54% 70%;
  background: #fff5d6;
  box-shadow:
    0 0 6px rgba(255,240,195,0.88),
    2px 0 15px rgba(136,174,255,0.34);
  filter: blur(var(--pair-blur, 1.4px));
  transform: skewX(-16deg) rotate(-3deg);
}

.car-light-pair i + i {
  opacity: 0.68;
  transform: translateY(1px) scale(0.76) skewX(-16deg) rotate(-3deg);
}

.car-light-pair--front {
  --pair-x: 4%;
  --pair-y: 34%;
  --bulb-size: clamp(10px, 0.86vw, 16px);
  --pair-gap: clamp(9px, 0.78vw, 15px);
  --pair-blur: 1.2px;
  --travel-time: 7.13s;
  --travel-delay: -1.87s;
}

.car-light-pair--mid {
  --pair-x: 26%;
  --pair-y: 25%;
  --bulb-size: clamp(7px, 0.58vw, 11px);
  --pair-gap: clamp(7px, 0.58vw, 11px);
  --pair-blur: 1.7px;
  --travel-time: 9.47s;
  --travel-delay: -7.21s;
  animation-name: hk-car-drift-left;
}

.car-light-pair--mid i {
  background: #ffd38a;
}

.car-light-pair--rear {
  --pair-x: 49%;
  --pair-y: 16%;
  --bulb-size: clamp(9px, 0.72vw, 14px);
  --pair-gap: clamp(8px, 0.68vw, 13px);
  --pair-blur: 1.6px;
  --travel-time: 8.61s;
  --travel-delay: -5.38s;
  animation-name: hk-car-drift-late;
}

.car-light-pair--rear i {
  background: #ff665b;
  box-shadow:
    0 0 11px rgba(255,102,91,0.94),
    0 0 28px rgba(217,73,88,0.5);
}

.car-light-pair--tiny {
  --pair-x: 69%;
  --pair-y: 8%;
  --bulb-size: clamp(5px, 0.42vw, 8px);
  --pair-gap: clamp(5px, 0.44vw, 8px);
  --pair-blur: 2.1px;
  --travel-time: 11.23s;
  --travel-delay: -3.44s;
  animation-name: hk-car-drift-left;
}

.car-light-pair--tiny i {
  background: #ff756c;
  box-shadow:
    0 0 9px rgba(255,117,108,0.88),
    0 0 24px rgba(217,73,88,0.46);
}

.car-light-pair--far {
  --pair-x: 87%;
  --pair-y: 1%;
  --bulb-size: clamp(7px, 0.58vw, 11px);
  --pair-gap: clamp(7px, 0.58vw, 11px);
  --pair-blur: 1.9px;
  --travel-time: 10.37s;
  --travel-delay: -8.16s;
}

.car-light-pair--far i {
  background: #ffd38a;
}

@keyframes hk-car-drift-right {
  0%, 38% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.92);
  }
  47% {
    opacity: 0.68;
  }
  70% {
    opacity: 0.82;
    transform: translate3d(clamp(6px, 0.8vw, 12px), 0, 0) scale(1);
  }
  88%, 100% {
    opacity: 0;
    transform: translate3d(clamp(14px, 1.5vw, 24px), 0, 0) scale(1.03);
  }
}

@keyframes hk-car-drift-left {
  0%, 19% {
    opacity: 0;
    transform: translate3d(18px, 0, 0) scale(0.96);
  }
  29% {
    opacity: 0.76;
  }
  51% {
    opacity: 0.84;
    transform: translate3d(8px, 0, 0) scale(1);
  }
  67%, 100% {
    opacity: 0;
    transform: translate3d(-8px, 0, 0) scale(1.02);
  }
}

@keyframes hk-car-drift-late {
  0%, 61% {
    opacity: 0;
    transform: translate3d(-4px, 0, 0) scale(0.94);
  }
  69% {
    opacity: 0.62;
  }
  81% {
    opacity: 0.86;
    transform: translate3d(7px, 0, 0) scale(1);
  }
  94%, 100% {
    opacity: 0;
    transform: translate3d(18px, 0, 0) scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .car-light-pair {
    animation: none;
    opacity: 0.38;
  }

  .car-light-pair--front,
  .car-light-pair--mid,
  .car-light-pair--rear,
  .car-light-pair--tiny,
  .car-light-pair--far {
    transform: none;
  }

}

@media (prefers-reduced-motion: no-preference) {
  body:not(.hero-hk-stage) .car-light-pair {
    animation-play-state: paused;
  }
}

.projects {
  z-index: 4;
  margin-top: -70vh;
  margin-top: -70svh;
  padding-top: 0;
  border-top: 0;
  background: #000;
  box-shadow: 0 -48px 80px 48px #000;
}

@media (max-width: 900px) {
  .projects {
    margin-top: -58vh;
    margin-top: -58svh;
  }

  body.hero-hk-stage .hk-tram-wrap {
    top: calc(50% + clamp(68px, 8vh, 86px));
    left: 7%;
    width: clamp(164px, 29vw, 224px);
  }

  body.hero-hk-stage .hk-traffic-light {
    top: 65%;
    right: 15%;
  }

  .hk-car-lights {
    top: 77%;
    right: 18%;
    bottom: auto;
    left: 42%;
    height: 8%;
  }
}

@media (max-width: 560px) {
  .projects {
    margin-top: -48vh;
    margin-top: -48svh;
  }

  .hero {
    min-height: 270svh;
  }

  .hero-role,
  .hero-location {
    font-size: clamp(12px, 3.3vw, 14px);
  }

  body.hero-hk-stage .hk-tram-wrap {
    top: calc(50% + 70px);
    left: 4%;
    width: clamp(148px, 42vw, 182px);
  }

  body.hero-hk-stage .hk-traffic-light {
    top: 67%;
    right: 12%;
  }

  .hk-car-lights {
    top: 79%;
    right: 16%;
    left: 52%;
    height: 7%;
  }
}

/* Temporary typography study: remove this block to restore Google Sans Flex. */
body,
.nav-link,
.nav-cta,
.hero-title,
.hero-role,
.hero-location,
.projects__fixed-copy,
.project-panel__meta,
.project-panel h2,
.site-footer,
.site-footer h2 {
  font-family: "Google Sans Flex", "Helvetica Neue", Arial, sans-serif !important;
}

.hero-title {
  font-weight: 620;
  line-height: 0.89;
  letter-spacing: -0.058em;
}

.hero-role,
.hero-location {
  font-weight: 450;
  letter-spacing: -0.025em;
}

.hero-role {
  gap: 0.14em;
}

.nav-link,
.nav-cta {
  font-weight: 430;
  letter-spacing: -0.018em;
}

.site-nav:not(.is-over-work),
.site-nav:not(.is-over-work) .nav-link,
.site-nav:not(.is-over-work) .nav-cta,
.site-nav:not(.is-over-work) .ambient-toggle {
  color: var(--hero-title-color) !important;
  transition: color 120ms linear;
}

.site-nav.is-over-work,
.site-nav.is-over-work .nav-link,
.site-nav.is-over-work .nav-cta,
.site-nav.is-over-work .ambient-toggle {
  color: #f3f0ea !important;
}

.site-nav {
  gap: clamp(14px, 1.8vw, 28px);
}

.ambient-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  opacity: 0.58;
  transition: color 120ms linear, opacity 220ms ease;
}

.ambient-toggle:hover,
.ambient-toggle:focus-visible,
.ambient-toggle.is-active {
  opacity: 1;
}

.ambient-toggle:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 5px;
  border-radius: 2px;
}

.ambient-toggle__bars {
  width: 14px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.ambient-toggle__bars i {
  width: 2px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition: height 240ms ease;
}

.ambient-toggle__bars i:nth-child(2) {
  height: 8px;
}

.ambient-toggle.is-playing .ambient-toggle__bars i {
  animation: ambient-bar 900ms ease-in-out infinite alternate;
}

.ambient-toggle.is-playing .ambient-toggle__bars i:nth-child(2) {
  animation-delay: -300ms;
}

.ambient-toggle.is-playing .ambient-toggle__bars i:nth-child(3) {
  animation-delay: -600ms;
}

@keyframes ambient-bar {
  from { height: 3px; }
  to { height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-toggle.is-playing .ambient-toggle__bars i {
    animation: none;
    height: 8px;
  }
}

@media (max-width: 560px) {
  .ambient-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Dedicated foreground grain: visible above the hero gradients and artwork. */
.hero-stage::after {
  opacity: 0.68;
  mix-blend-mode: soft-light;
  filter: contrast(1.7);
  background-size: 58px 58px;
}

body.hero-hk-stage .hero-stage::after {
  opacity: 0.94;
  mix-blend-mode: soft-light;
  filter: contrast(1.85);
}

body.hero-hk-stage .hero-stage::before {
  filter: blur(clamp(14px, 1.35vw, 24px)) saturate(0.9) brightness(0.72);
}

/* Restored original orb motion with the new daylight palette. */

body,
button,
input,
.site-nav,
.nav-link,
.nav-cta,
.ambient-toggle,
.hero-role,
.hero-location,
.projects__fixed-copy,
.project-panel__meta,
.project-panel__arrow,
.project-cursor,
.site-footer,
.site-footer__kicker,
.site-footer__links {
  font-family: "Google Sans Flex", "Helvetica Neue", Arial, sans-serif !important;
}

.hero-title,
.project-panel h2,
.site-footer h2 {
  font-family: "Valley Sans", Georgia, serif !important;
}

.hero-title {
  font-style: normal;
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: -0.057em;
}

.project-panel h2,
.site-footer h2 {
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.052em;
}

.project-panel__meta,
.projects__fixed-copy,
.site-footer__kicker,
.site-footer__links {
  font-weight: 500;
}

.hero {
  background: #cbd8e8 !important;
}

.hero-stage {
  isolation: isolate;
  opacity: 1;
  background:
    radial-gradient(circle 58vmin at var(--orb-x) var(--orb-y),
      rgba(255, 218, 150, 0.98) 0%,
      rgba(255, 190, 92, 0.9) 34%,
      rgba(241, 158, 78, 0.48) 60%,
      rgba(213, 166, 130, 0) 82%),
    radial-gradient(circle 108vmin at var(--orb-x) var(--orb-y),
      rgba(233, 185, 142, 0.42) 0%,
      rgba(220, 197, 181, 0.24) 54%,
      rgba(199, 212, 228, 0) 80%),
    linear-gradient(180deg,
      #c5d5e8 0%,
      #cedae8 42%,
      #d5d9df 70%,
      #d8cec6 100%) !important;
}

.hero-stage::before {
  display: block !important;
  z-index: 0;
  opacity: var(--night-reveal, 0) !important;
}

.work-fade {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  background: #000;
  opacity: var(--work-blend, 0);
}

.hero-stage::after {
  z-index: 12;
  opacity: 0.72;
  mix-blend-mode: soft-light;
  filter: none;
}

body.hero-hk-stage .hero-stage::after {
  opacity: 0.9;
  mix-blend-mode: soft-light;
  filter: none;
}

.hero-title,
.hero-role-row {
  z-index: 5;
}

@media (max-width: 1024px) {
  .hero-title {
    font-size: clamp(62px, 18vw, 112px);
    line-height: 0.84;
  }
}

/* Final landing/work palette pass. The ticker is the transition itself rather
   than a separately coloured strip; Work is already fully London blue. */
.client-ticker {
  background: linear-gradient(180deg, #001621 0%, #95bbea 100%) !important;
}

.projects,
.client-ticker + .projects {
  background: #95bbea !important;
}

/* Landing navigation details follow the active scene's readable text colour. */
.site-nav:not(.is-over-work) .nav-link::after,
.site-nav:not(.is-over-work) .nav-cta::after,
.site-nav:not(.is-over-work) .ambient-toggle__bars i {
  background-color: var(--nav-base) !important;
}

/* Project titles use the warm highlight; supporting metadata remains red. */
.work-stack-card__caption,
.work-stack-card__caption h2 {
  color: #ffedad !important;
}

/* The project cursor is a light frosted control, matching the site's glass UI. */
.cursor-ring.is-project-cta {
  color: #930500 !important;
  border-color: rgba(255, 255, 255, .9) !important;
  background: rgba(255, 255, 255, .7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 10px 28px rgba(0, 22, 33, .16) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.16) !important;
  backdrop-filter: blur(12px) saturate(1.16) !important;
}

.cursor-ring.is-project-cta .cursor-ring__label {
  color: #930500 !important;
}

/* Final visual tuning. */
.client-ticker {
  background: linear-gradient(180deg, #001621 0%, #36546f 100%) !important;
}

.projects,
.client-ticker + .projects {
  background: linear-gradient(180deg, #36546f 0, #6f96c4 20svh, #95bbea 44svh, #95bbea 100%) !important;
}

.work-stack-card__caption,
.work-stack-card__caption h2 {
  color: #930500 !important;
  text-shadow: none !important;
}

.cursor-ring.is-project-cta {
  background: rgba(255, 255, 255, .42) !important;
  border-color: rgba(255, 255, 255, .68) !important;
}

:root[data-location="hong-kong"] .site-nav:not(.is-over-work) {
  --nav-base: #fff;
}

/* Current landing-to-work behavior. */
.client-ticker { display: none !important; }
.hero::before { display: none !important; }

.site-nav .nav-pill {
  max-width: 360px;
  overflow: hidden;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transform-origin: right center;
  transition: max-width 360ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease, transform 360ms cubic-bezier(.22, 1, .36, 1);
}

.site-nav::after {
  width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(8px, 0, 0) scale(.78);
  transform-origin: center;
  transition: width 280ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease 80ms, transform 340ms cubic-bezier(.22, 1, .36, 1);
}

.site-nav.is-over-work .nav-pill {
  display: flex !important;
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(10px, 0, 0) scale(.92);
}

.site-nav.is-over-work::after {
  display: block !important;
  width: 22px;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.site-nav.is-over-work:hover .nav-pill,
.site-nav.is-over-work:focus-within .nav-pill {
  max-width: 360px;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.site-nav.is-over-work:hover::after,
.site-nav.is-over-work:focus-within::after {
  display: block !important;
  width: 0;
  opacity: 0;
  transform: translate3d(8px, 0, 0) scale(.78);
}

/* Temporarily hide the client carousel while preserving its markup. */
.client-ticker {
  display: none !important;
}

/* Remove the obsolete hero exit veil that produced a horizontal seam. */
.hero::before {
  display: none !important;
}

/* Morph the full navigation into the compact hamburger instead of snapping. */
.site-nav .nav-pill {
  max-width: 360px;
  overflow: hidden;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transform-origin: right center;
  transition:
    max-width 360ms cubic-bezier(.22, 1, .36, 1),
    opacity 180ms ease,
    transform 360ms cubic-bezier(.22, 1, .36, 1);
}

.site-nav::after {
  width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(8px, 0, 0) scale(.78);
  transform-origin: center;
  transition:
    width 280ms cubic-bezier(.22, 1, .36, 1),
    opacity 180ms ease 80ms,
    transform 340ms cubic-bezier(.22, 1, .36, 1);
}

.site-nav.is-over-work .nav-pill {
  display: flex !important;
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(10px, 0, 0) scale(.92);
}

.site-nav.is-over-work::after {
  display: block;
  width: 22px;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.site-nav.is-over-work:hover .nav-pill,
.site-nav.is-over-work:focus-within .nav-pill {
  max-width: 360px;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.site-nav.is-over-work:hover::after,
.site-nav.is-over-work:focus-within::after {
  display: block;
  width: 0;
  opacity: 0;
  transform: translate3d(8px, 0, 0) scale(.78);
}

/* Smooth the night-to-work hand-off across the ticker and the opening of Work,
   without introducing a hard horizontal colour seam. */
.client-ticker {
  background: linear-gradient(180deg, #001621 0%, #36546f 100%) !important;
}

.projects,
.client-ticker + .projects {
  background: linear-gradient(180deg, #36546f 0, #6f96c4 20svh, #95bbea 44svh, #95bbea 100%) !important;
}

/* Work typography returns to the core red with a clean, flat treatment. */
.work-stack-card__caption,
.work-stack-card__caption h2 {
  color: #930500 !important;
  text-shadow: none !important;
}

/* The project hover affordance stays glassy but lets more of the tile through. */
.cursor-ring.is-project-cta {
  background: rgba(255, 255, 255, .42) !important;
  border-color: rgba(255, 255, 255, .68) !important;
}

/* Hong Kong navigation accents and copy share the same accessible red. */
:root[data-location="hong-kong"] .site-nav:not(.is-over-work) {
  --nav-base: #930500;
}

/* Carry only the HK horizon's final colour through Work and Contact. */
:root {
  --hk-page-tail: #08050c;
}

body {
  background-color: var(--hk-page-tail) !important;
  background-image: none !important;
}

.projects,
.site-footer {
  background: transparent !important;
}

.projects {
  padding-bottom: 0 !important;
  background: transparent !important;
  box-shadow: 0 -48px 80px 48px #000 !important;
}

.project-panel:last-of-type {
  margin-bottom: clamp(40px, 6vh, 72px);
}

.hero {
  min-height: 340svh;
}

@media (max-width: 560px) {
  .hero {
    min-height: 310svh;
  }
}

/* Empty Work placeholder — intentionally ready for the next build. */
.projects {
  position: relative !important;
  z-index: 20;
  min-height: 100vh !important;
  min-height: 100svh !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  box-shadow: none !important;
}

body.hero-exited .hero {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

/* Work — Demo 1 inspired stack-to-serial-layout entrance. */
.projects {
  min-height: 326svh !important;
  overflow: visible !important;
  background:
    linear-gradient(
      180deg,
      #08050c 0,
      #06030a 18svh,
      #020103 52svh,
      #000 82svh
    ) !important;
}

.projects::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -76svh;
  right: 0;
  left: 0;
  height: 76svh;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(8, 5, 12, 0.08) 14%,
      rgba(8, 5, 12, 0.38) 48%,
      rgba(8, 5, 12, 0.84) 80%,
      #08050c 100%
    );
}

/* Client ticker — a short bridge from the HK night into Work. */
.client-ticker {
  position: relative;
  z-index: 22;
  display: flex;
  align-items: center;
  min-height: clamp(58px, 8svh, 76px);
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      #08050c 0%,
      #040207 28%,
      #000 68%,
      #000 100%
    );
}

.client-ticker__viewport {
  width: min(820px, 100%);
  margin-inline: auto;
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.12) 22%,
      #000 38%,
      #000 62%,
      rgba(0, 0, 0, 0.12) 78%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.12) 22%,
      #000 38%,
      #000 62%,
      rgba(0, 0, 0, 0.12) 78%,
      transparent 100%
    );
}

.client-ticker__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: client-ticker-move 28s linear infinite;
}

.client-ticker__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: 5px;
  padding-right: 5px;
}

.client-ticker__group span {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 9px 5px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  color: #f4f1eb;
  background: transparent;
  font-family: "Google Sans Flex", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(10px, 0.78vw, 12px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

@keyframes client-ticker-move {
  to {
    transform: translate3d(-33.333333%, 0, 0);
  }
}

.client-ticker + .projects {
  margin-top: 0 !important;
  background: #000 !important;
}

.client-ticker + .projects::before {
  display: none;
}

@media (max-width: 1024px) {
  .client-ticker {
    min-height: 56px;
  }

  .client-ticker__group span {
    min-height: 25px;
    padding: 4px 8px;
    font-size: 10px;
  }
}

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

  .client-ticker__track {
    animation: none;
  }

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

.work-stack-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 326svh;
  isolation: isolate;
}

.work-stack-card {
  --drift-x: 0px;
  --drift-y: 0px;
  --drift-rotate: 0deg;
  position: absolute;
  top: var(--card-top);
  left: calc(50% - clamp(58px, 7.6vw, 106px));
  width: min(66vw, 920px);
  height: min(70svh, 680px);
  margin: 0;
  opacity: 0;
  z-index: 2;
  transform:
    translate3d(
      calc(-50% + var(--stack-x)),
      var(--stack-y),
      0
    )
    rotate(var(--stack-rotate))
    scale(0.31);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition:
    transform 2300ms cubic-bezier(0.16, 1, 0.3, 1) var(--expand-delay),
    opacity 680ms ease var(--stack-delay);
}

.projects.is-stack-visible .work-stack-card {
  opacity: 1;
}

.projects.is-expanded .work-stack-card {
  transform: translate3d(-50%, 0, 0) rotate(0deg) scale(1);
}

.projects.is-expanded.is-settled .work-stack-card {
  transition:
    transform 230ms ease,
    opacity 240ms ease;
}

.work-stack-card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #111;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 2100ms cubic-bezier(0.16, 1, 0.3, 1) var(--expand-delay),
    filter 1500ms ease var(--expand-delay);
}

.work-stack-card__link {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
}

.work-stack-card__link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 6px;
}

.projects:not(.is-expanded) .work-stack-card__media {
  clip-path: inset(2.5% 2.5% 2.5% 2.5%);
  filter: saturate(0.84) brightness(0.76);
}

.work-stack-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 2500ms cubic-bezier(0.16, 1, 0.3, 1) var(--expand-delay);
}

#project-vip .work-stack-card__media img {
  object-position: 46% center;
}

.projects.is-expanded .work-stack-card__media img {
  transform: scale(1);
}

.projects.is-expanded.is-settled .work-stack-card__media {
  transform:
    translate3d(var(--drift-x), var(--drift-y), 0)
    rotate(var(--drift-rotate));
  transition:
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
    clip-path 2100ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 1500ms ease;
}

.work-stack-card__caption {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  bottom: auto;
  width: min(94vw, 1180px);
  color: #f4f0e9;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  filter: blur(16px);
  transform: translate3d(-50%, calc(-50% + 34px), 0);
  transition:
    opacity 700ms ease,
    filter 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.projects.is-expanded .work-stack-card.is-card-active .work-stack-card__caption {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(-50%, -50%, 0);
}

.work-stack-card__details {
  position: absolute;
  z-index: 4;
  top: 0;
  left: calc(100% + clamp(20px, 2.6vw, 44px));
  width: clamp(120px, 12vw, 172px);
  color: rgba(244, 240, 233, 0.84);
  font-family: "Google Sans Flex", "Helvetica Neue", Arial, sans-serif;
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(22px, 0, 0);
  transition:
    opacity 680ms ease,
    filter 820ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
}

.projects.is-expanded .work-stack-card.is-card-active .work-stack-card__details {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

.work-stack-card__number {
  display: block;
  font-family: "Valley Sans", Georgia, serif;
  font-size: clamp(38px, 4vw, 62px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.work-stack-card__rule {
  display: block;
  width: 100%;
  height: 1px;
  margin: 12px 0 17px;
  background: rgba(244, 240, 233, 0.28);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
}

.projects.is-expanded .work-stack-card.is-card-active .work-stack-card__rule {
  transform: scaleX(1);
}

.work-stack-card__details p {
  margin: 0 0 4px;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.work-stack-card__caption h2 {
  margin: 0;
  font-family: "Valley Sans", Georgia, serif;
  font-size: clamp(70px, 11vw, 180px);
  font-style: normal;
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: -0.065em;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.28);
}

@media (max-width: 1024px) {
  .projects,
  .work-stack-grid {
    min-height: 282svh !important;
  }

  .work-stack-card {
    left: 50%;
    width: 86vw;
    height: min(58svh, 520px);
  }

  .work-stack-card:nth-child(1) { --card-top: 8svh !important; --stack-y: 0svh !important; }
  .work-stack-card:nth-child(2) { --card-top: 94svh !important; --stack-y: -86svh !important; }
  .work-stack-card:nth-child(3) { --card-top: 180svh !important; --stack-y: -172svh !important; }

  .work-stack-card__caption h2 {
    font-size: clamp(54px, 17vw, 98px);
    line-height: 0.82;
  }

  .work-stack-card__details {
    top: 14px;
    right: 14px;
    left: auto;
    width: min(34vw, 124px);
    color: rgba(255, 255, 255, 0.9);
    text-align: right;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.42);
  }

  .work-stack-card__number {
    font-size: 32px;
  }

  .work-stack-card__rule {
    margin: 8px 0 10px;
    transform-origin: right;
    background: rgba(255, 255, 255, 0.48);
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-stack-card,
  .work-stack-card__media,
  .work-stack-card__media img,
  .work-stack-card__caption {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}

/* Keep the HK horizon continuous while Work gradually resolves to black. */
.work-fade {
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(8, 5, 12, 0.18) 38%,
      rgba(8, 5, 12, 0.78) 76%,
      #08050c 100%
    ) !important;
}

/* Continuous glass navigation treatment across Landing, ticker, and Work. */
.site-nav {
  right: 24px;
  left: auto;
  width: auto;
  max-width: calc(100% - 48px);
  justify-content: flex-start;
  transform: none;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(248, 246, 241, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 10px 28px rgba(20, 16, 26, 0.08);
  -webkit-backdrop-filter: blur(5px) saturate(1.12);
  backdrop-filter: blur(5px) saturate(1.12);
  transition:
    color 180ms linear,
    background-color 380ms ease,
    border-color 380ms ease,
    box-shadow 380ms ease,
    padding 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-nav.is-over-work {
  padding: 8px 15px;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(17, 15, 20, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 28px rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(5px) saturate(1.14);
  backdrop-filter: blur(5px) saturate(1.14);
}

@media (max-width: 560px) {
  .site-nav {
    right: 12px;
    max-width: calc(100% - 24px);
    padding: 6px 10px;
  }

  .site-nav.is-over-work {
    padding: 6px 10px;
  }
}

/* Navigation order, lighter glass, and contact copy interaction. */
.nav-divider {
  flex: none;
  color: currentColor;
  font-size: 13px;
  font-weight: 300;
  line-height: 1;
  opacity: 0.32;
  pointer-events: none;
}

.site-nav:not(.is-over-work) .nav-divider {
  color: var(--hero-title-color);
}

.site-nav.is-over-work .nav-divider {
  color: #f3f0ea;
}

.site-nav.is-over-work {
  -webkit-backdrop-filter: blur(5px) saturate(1.14);
  backdrop-filter: blur(5px) saturate(1.14);
}

.cursor-ring.is-project-cta {
  -webkit-backdrop-filter: blur(4px) saturate(1.12);
  backdrop-filter: blur(4px) saturate(1.12);
}

.site-footer h2 {
  max-width: none;
  font-size: clamp(96px, 14.5vw, 260px);
  line-height: 0.78;
  letter-spacing: -0.06em;
}

.site-footer__links {
  gap: 30px;
}

.email-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.email-link {
  position: relative;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.35;
  transition: color 180ms ease;
}

.email-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.email-link:hover::after,
.email-link:focus-visible::after {
  transform: scaleX(1);
}

.email-copy {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.78);
  background: transparent;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.2;
  transition:
    color 180ms ease,
    background-color 180ms ease;
}

.email-copy:hover,
.email-copy:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.09);
}

.email-copy:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 6px;
}

.email-copy__icon {
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

.home-back-top {
  position: fixed;
  z-index: 50;
  right: clamp(16px,3vw,38px);
  bottom: clamp(16px,3vw,38px);
  display: grid;
  width: clamp(48px,5vw,62px);
  height: clamp(48px,5vw,62px);
  place-items: center;
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 50%;
  color: #001621;
  background: rgba(255,255,255,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 14px 38px rgba(0,22,33,.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(.9);
  transition: opacity 320ms ease,transform 480ms cubic-bezier(.16,1,.3,1),background 220ms ease;
  -webkit-backdrop-filter: blur(18px) saturate(1.45);
  backdrop-filter: blur(18px) saturate(1.45);
}

.home-back-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.home-back-top:hover { background: rgba(255,255,255,.86); transform: translateY(-4px) scale(1); }
.home-back-top:focus-visible { outline: 2px solid #2786ff; outline-offset: 4px; }
.home-back-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.copy-toast {
  position: fixed;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 120;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #f4f0e9;
  background: rgba(16, 14, 19, 0.82);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.25);
  font-family: "Google Sans Flex", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, 12px, 0) scale(0.96);
  transition:
    opacity 180ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.copy-toast.is-visible {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
}

@media (min-width: 561px) {
  .ambient-toggle {
    transition:
      color 120ms linear,
      opacity 220ms ease,
      gap 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ambient-toggle__label {
    display: inline-block;
    max-width: 72px;
    overflow: hidden;
    opacity: 1;
    white-space: nowrap;
    transform: translateX(0);
    transition:
      max-width 320ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 180ms ease,
      transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .site-nav.is-ambient-compact .ambient-toggle {
    gap: 0;
  }

  .site-nav.is-ambient-compact .ambient-toggle__label {
    max-width: 0;
    opacity: 0;
    transform: translateX(-5px);
  }
}

a[href],
button,
[role="button"] {
  cursor: pointer !important;
}

@media (max-width: 560px) {
  .site-nav {
    gap: 9px;
  }

  .site-footer h2 {
    font-size: clamp(72px, 22vw, 122px);
  }

  .nav-divider {
    padding-top: 9px;
    font-size: 11px;
  }
}

/* Mobile: make the landing atmosphere full-bleed and keep the costly effects light. */
@media (max-width: 1024px) {
  html {
    scroll-behavior: auto;
  }

  .hero {
    width: 100%;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .hero-stage {
    width: 100%;
    min-width: 100%;
    padding-right: 18px;
    padding-left: 18px;
  }

  .hero-stage::before {
    filter: blur(10px) saturate(0.9) !important;
    transform: scale(1.018) !important;
  }

  .hero-stage::after,
  body.hero-hk-stage .hero-stage::after {
    filter: none !important;
    opacity: 0.52 !important;
    mix-blend-mode: soft-light;
  }

  body.hero-hk-stage .hk-elements {
    filter: blur(3px) saturate(0.96) !important;
  }

  .ambient-toggle__label {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
  }

  .site-nav.is-ambient-compact .ambient-toggle__label {
    display: none;
  }

  .site-nav {
    gap: 7px;
  }

  .nav-pill {
    gap: clamp(8px, 2.4vw, 12px);
  }
}

body.hero-hk-stage .hero {
  background: #08050c !important;
}

.hero-stage::before {
  filter: blur(14px) saturate(0.9) !important;
  transform: scale(1.025) !important;
}

/* Safari fallback: use stable viewport units for the sticky stage and reel. */
@supports (-webkit-touch-callout: none) {
  .hero-stage {
    height: 100vh !important;
    min-height: 100vh !important;
  }

  .hero,
  .work-stack-grid {
    min-height: 340vh !important;
  }

  .projects {
    min-height: 326vh !important;
  }

  .work-stack-card {
    height: min(70vh, 680px);
  }

  .work-stack-card:nth-child(1) {
    --card-top: 10vh !important;
    --stack-y: 0vh !important;
  }

  .work-stack-card:nth-child(2) {
    --card-top: 108vh !important;
    --stack-y: -98vh !important;
  }

  .work-stack-card:nth-child(3) {
    --card-top: 206vh !important;
    --stack-y: -196vh !important;
  }
}

/* London colour system — Aegean Sky, Sandy Linen, Scarlet Bikini.
   Hong Kong's scroll-led night scene deliberately keeps its own palette. */
:root[data-location="london"] {
  --theme-blue: #1a6fbf;
  --theme-red: #d91a2a;
  --theme-linen: #f5f0e8;
  --theme-ink: #151515;
  --theme-muted: rgba(21, 21, 21, 0.64);
  --variant-bg: var(--theme-linen);
  --variant-card: #fffdf9;
  --variant-line: rgba(21, 21, 21, 0.14);
  --highlight-green: var(--theme-red);
  --text: var(--theme-ink);
  --muted-text: var(--theme-muted);
  --hero-title-color: var(--theme-ink);
  --hero-subtitle-color: var(--theme-muted);
}

:root[data-location="london"] .hero {
  background: var(--theme-blue) !important;
}

:root[data-location="london"] .hero-stage {
  background:
    radial-gradient(circle 38vmin at var(--orb-x) var(--orb-y),
      var(--theme-red) 0 92%,
      rgba(217, 26, 42, .96) 92.5%,
      transparent 93.5%),
    linear-gradient(180deg, #287cc3 0%, var(--theme-blue) 54%, #155b9d 100%) !important;
}

:root[data-location="london"] .hero-title,
:root[data-location="london"] .hero-highlight,
:root[data-location="london"] .hero-role,
:root[data-location="london"] .hero-location,
:root[data-location="london"] .city-toggle__inner {
  color: #fffdf9 !important;
}

:root[data-location="london"] .hero-role {
  color: rgba(255, 253, 249, .82) !important;
}

:root[data-location="london"] .site-nav:not(.is-over-work),
:root[data-location="london"] .site-nav:not(.is-over-work) .nav-link,
:root[data-location="london"] .site-nav:not(.is-over-work) .nav-cta,
:root[data-location="london"] .site-nav:not(.is-over-work) .ambient-toggle,
:root[data-location="london"] .site-nav:not(.is-over-work) .nav-divider {
  color: #fffdf9 !important;
}

/* Black remains the grounding surface for the content sequence; blue and red
   provide the light, depth, and moments of emphasis. */
.client-ticker {
  background:
    linear-gradient(90deg, #090b0f 0%, #102c48 48%, #090b0f 100%) !important;
}

.projects,
.client-ticker + .projects {
  background:
    radial-gradient(circle 60vmin at 78% 14%, rgba(26, 111, 191, .24), transparent 63%),
    radial-gradient(circle 48vmin at 12% 84%, rgba(217, 26, 42, .2), transparent 62%),
    linear-gradient(180deg, #10151b 0%, #090a0c 36%, #050506 100%) !important;
}

.site-footer {
  background:
    radial-gradient(circle 54vmin at 88% 8%, rgba(26, 111, 191, .18), transparent 62%),
    radial-gradient(circle 44vmin at 6% 92%, rgba(217, 26, 42, .16), transparent 64%),
    #090a0c !important;
}

.site-nav:not(.is-over-work) {
  border-color: rgba(245, 240, 232, .5);
  background: rgba(245, 240, 232, .42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 10px 28px rgba(13, 45, 76, .18);
}

/* Hong Kong state — retain its own night identity, with a clean graphic orb. */
:root[data-location="hong-kong"] .hero,
body.hero-hk-stage .hero {
  background: #1e2540 !important;
}

:root[data-location="hong-kong"] .hero-stage,
body.hero-hk-stage .hero-stage {
  background:
    radial-gradient(circle 38vmin at var(--orb-x) var(--orb-y),
      #fff0a6 0 92%,
      rgba(255, 240, 166, .98) 92.5%,
      transparent 93.5%),
    #1e2540 !important;
}

:root[data-location="hong-kong"] .hero-stage::before,
body.hero-hk-stage .hero-stage::before {
  opacity: 0 !important;
}

/* City-scene palette. The scene colours interpolate in script as the orb travels,
   avoiding a hard switch at the London / Hong Kong transition point. */
.hero,
:root[data-location="hong-kong"] .hero,
body.hero-hk-stage .hero {
  background: var(--hero-scene-bg, #95bbea) !important;
}

.hero-stage,
:root[data-location="london"] .hero-stage,
:root[data-location="hong-kong"] .hero-stage,
body.hero-hk-stage .hero-stage {
  background:
    radial-gradient(circle 38vmin at var(--orb-x) calc(var(--orb-y) + var(--orb-entry-y, 0px)),
      var(--hero-orb-color, #ffedad) 0 99.8%,
      transparent 100%),
    var(--hero-scene-bg, #95bbea) !important;
}

.hero-title,
.hero-role,
.hero-location,
:root[data-location="london"] .hero-title,
:root[data-location="london"] .hero-role,
:root[data-location="london"] .hero-location {
  color: var(--hero-scene-text, #930500) !important;
}

/* A clipped duplicate makes only the title pixels inside London's moving orb
   change to blue — it is not a character-level colour swap. */
:root[data-location="london"] .hero-title::after {
  position: absolute;
  inset: 0;
  color: #95bbea;
  content: "I'm Vani Ip";
  pointer-events: none;
  clip-path: circle(38vmin at var(--title-orb-x, -100vmin) var(--title-orb-y, -100vmin));
}

.hero-stage::after,
body.hero-hk-stage .hero-stage::after {
  display: none !important;
}

/* Keep the illustrated Hong Kong layer crisp and remove the traffic signal's
   reflected red spill. */
body.hero-hk-stage .hk-tram {
  filter: grayscale(1) brightness(.48) contrast(1.28) sepia(.34) hue-rotate(188deg) saturate(1.45) !important;
}

body.hero-hk-stage .hk-elements {
  filter: blur(var(--hk-blur, 0px)) saturate(.96) !important;
}

body.hero-hk-stage .tl-red-beam,
body.hero-hk-stage .hk-traffic-light::after {
  display: none !important;
}

/* Restore the signal's native colour and edge; the former progressive blur
   layers were muting it to grey. */
body.hero-hk-stage .hk-traffic-light,
body.hero-hk-stage .hk-traffic-light .tl-svg {
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

body.hero-hk-stage .hk-traffic-light .prog-blur {
  display: none !important;
}

/* Keep the light halos, but give each moving car light a defined centre. */
body.hero-hk-stage .car-light-pair i {
  filter: blur(.75px) !important;
}

/* The subtitle receives the same per-pixel London orb treatment as the title. */
:root[data-location="london"] .hero-role {
  background: none !important;
  color: var(--hero-scene-text, #930500) !important;
}

:root[data-location="london"] .hero-role__label,
:root[data-location="london"] .hero-location {
  display: inline-block;
  color: transparent !important;
  background: radial-gradient(circle 38vmin at var(--role-orb-x, -100vmin) var(--role-orb-y, -100vmin), #95bbea 0 99.8%, var(--hero-scene-text, #930500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

:root[data-location="london"] .hero-location {
  background: radial-gradient(circle 38vmin at var(--location-orb-x, -100vmin) var(--location-orb-y, -100vmin), #95bbea 0 99.8%, var(--hero-scene-text, #930500) 100%);
}

/* Text-only navigation: its colour changes with the active scene for contrast. */
.site-nav,
.site-nav.is-over-work,
.nav-pill {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.site-nav,
.site-nav .nav-link,
.site-nav .nav-cta,
.site-nav .ambient-toggle,
.site-nav .nav-divider {
  color: var(--hero-scene-text, #930500) !important;
}

.site-nav.is-over-work,
.site-nav.is-over-work .nav-link,
.site-nav.is-over-work .nav-cta,
.site-nav.is-over-work .ambient-toggle,
.site-nav.is-over-work .nav-divider {
  color: #930500 !important;
}

:root[data-location="london"] .site-nav,
:root[data-location="london"] .site-nav .nav-link,
:root[data-location="london"] .site-nav .nav-cta,
:root[data-location="london"] .site-nav .ambient-toggle,
:root[data-location="london"] .site-nav .nav-divider {
  color: #930500 !important;
}

/* The client carousel no longer carries an independent blue strip. The work
   surface bridges from Hong Kong navy back to the London landing blue. */
.client-ticker {
  background: transparent !important;
}

.projects,
.client-ticker + .projects {
  background: #95bbea !important;
}

.client-ticker + .projects::before {
  display: block !important;
  background: linear-gradient(180deg, #001621 0%, #95bbea 100%) !important;
}

body {
  background-color: #95bbea !important;
}

/* Restore the deliberately softened traffic-light treatment. */
body.hero-hk-stage .hk-traffic-light .tl-svg {
  filter: blur(1.25px) !important;
  -webkit-mask-image: linear-gradient(var(--blur-direction), transparent 0 32%, rgba(0,0,0,.18) 50%, #000 72%) !important;
  mask-image: linear-gradient(var(--blur-direction), transparent 0 32%, rgba(0,0,0,.18) 50%, #000 72%) !important;
}

body.hero-hk-stage .hk-traffic-light .prog-blur {
  display: block !important;
}

/* Hero surfaces stay behind the readable copy throughout the city transition. */
.work-fade { z-index: 0 !important; }

/* Work typography uses the red accent; interaction controls remain soft white glass. */
.projects__fixed-copy,
.project-panel__meta,
.project-panel h2 { color: #930500 !important; }

.project-panel__arrow,
.project-cursor {
  color: #930500 !important;
  background: rgba(255,255,255,.64) !important;
  border: 1px solid rgba(255,255,255,.84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 12px 28px rgba(24,57,88,.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
}

/* Work navigation returns as a frosted container against the blue project field. */
.site-nav.is-over-work {
  padding: 8px 15px !important;
  border: 1px solid rgba(255,255,255,.46) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 10px 28px rgba(24,57,88,.2) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.12) !important;
  backdrop-filter: blur(10px) saturate(1.12) !important;
}

.site-nav.is-over-work,
.site-nav.is-over-work .nav-link,
.site-nav.is-over-work .nav-cta,
.site-nav.is-over-work .ambient-toggle,
.site-nav.is-over-work .nav-divider { color: #001621 !important; }

/* Contact closes in Scarlet Bikini with Aegean Sky typography. */
.site-footer { color: #1a6fbf !important; background: #d91a2a !important; }
.site-footer__kicker,
.site-footer__links a,
.site-footer__links a:hover { color: #1a6fbf !important; }

/* Use clipped duplicate glyphs for the subtitle: no painted rectangle is left
   by the location span's reserved typewriter width. */
:root[data-location="london"] .hero-role__label,
:root[data-location="london"] .hero-location {
  position: relative;
  display: inline-block;
  color: var(--hero-scene-text, #930500) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

:root[data-location="london"] .hero-role__label::after,
:root[data-location="london"] .hero-location::before {
  position: absolute;
  inset: 0;
  color: #95bbea;
  pointer-events: none;
  clip-path: circle(38vmin at var(--role-orb-x, -100vmin) var(--role-orb-y, -100vmin));
  content: "Product Designer";
}

:root[data-location="london"] .hero-location::before {
  content: attr(data-orb-copy);
  clip-path: circle(38vmin at var(--location-orb-x, -100vmin) var(--location-orb-y, -100vmin));
}

/* Keep the overlap treatment alive through the location hand-off. */
.hero-title::after { position: absolute; inset: 0; display: block; color: #95bbea; content: "I'm Vani Ip"; pointer-events: none; clip-path: circle(38vmin at var(--title-orb-x, -100vmin) var(--title-orb-y, -100vmin)); }
.hero-role__label::after { position: absolute; inset: 0; display: block !important; color: #95bbea; content: "Product Designer"; pointer-events: none; clip-path: circle(38vmin at var(--role-orb-x, -100vmin) var(--role-orb-y, -100vmin)); }
.hero-location::before { position: absolute; inset: 0; display: block !important; color: #95bbea; content: attr(data-orb-copy); pointer-events: none; clip-path: circle(38vmin at var(--location-orb-x, -100vmin) var(--location-orb-y, -100vmin)); }

/* Navigation is navy where the orb intersects. Away from the orb it is navy in
   London and white over the Hong Kong night scene. */
.site-nav:not(.is-over-work),
.site-nav:not(.is-over-work) .nav-link,
.site-nav:not(.is-over-work) .nav-cta,
.site-nav:not(.is-over-work) .ambient-toggle { color: #001621 !important; }
:root[data-location="hong-kong"] .site-nav:not(.is-over-work),
:root[data-location="hong-kong"] .site-nav:not(.is-over-work) .nav-link,
:root[data-location="hong-kong"] .site-nav:not(.is-over-work) .nav-cta,
:root[data-location="hong-kong"] .site-nav:not(.is-over-work) .ambient-toggle { color: #fff !important; }
[data-orb-label] { position: relative; }
[data-orb-label]::before { position: absolute; inset: 0; color: #001621; content: attr(data-orb-label); pointer-events: none; clip-path: circle(38vmin at var(--nav-orb-x, -100vmin) var(--nav-orb-y, -100vmin)); }

/* The old work veil is no longer needed and must never mask content. */
.work-fade { display: none !important; }

/* Work header condenses to a frosted sound control plus a three-line menu. */
.site-nav.is-over-work .nav-pill,
.site-nav.is-over-work .nav-divider { display: none; }
.site-nav.is-over-work::after { display: block; order: 2; color: #001621; content: "☰"; font-size: 22px; line-height: 1; }
.site-nav.is-over-work .ambient-toggle__label { max-width: 0; margin-left: 0; overflow: hidden; opacity: 0; transition: max-width 220ms ease, margin 220ms ease, opacity 180ms ease; }
.site-nav.is-over-work .ambient-toggle:hover .ambient-toggle__label,
.site-nav.is-over-work .ambient-toggle:focus-visible .ambient-toggle__label { max-width: 76px; margin-left: 7px; opacity: 1; }

.project-panel h2,
.project-panel h2 *,
.project-panel__meta,
.project-panel__meta *,
.projects__fixed-copy { color: #930500 !important; }

.site-footer { color: #95bbea !important; background: #930500 !important; }
.site-footer__kicker,
.site-footer__links a,
.site-footer__links a:hover { color: #95bbea !important; }

/* Foreground grain: above the orb and scene artwork, below all readable copy. */
.hero-stage::after,
body.hero-hk-stage .hero-stage::after {
  display: block !important;
  z-index: 3 !important;
  inset: 0 !important;
  opacity: .62 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23noise)' opacity='.72'/%3E%3C/svg%3E") !important;
  background-size: 68px 68px !important;
  mix-blend-mode: multiply !important;
  filter: contrast(1.7) !important;
  pointer-events: none;
}

.hero-title,
.hero-role-row {
  z-index: 5 !important;
}

/* Use one text layer for the landing navigation; the glyph fill itself changes
   where the orb intersects, avoiding doubled labels. */
.site-nav:not(.is-over-work) { --nav-base: #001621; }
:root[data-location="hong-kong"] .site-nav:not(.is-over-work) { --nav-base: #fff; }
.site-nav:not(.is-over-work) [data-orb-label] {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  background: radial-gradient(circle 38vmin at var(--nav-orb-x, -100vmin) var(--nav-orb-y, -100vmin), #001621 0 99.8%, var(--nav-base) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
[data-orb-label]::before { content: none !important; }

/* The transition now lives inside Work; it cannot escape upward over the hero. */
.client-ticker + .projects::before { display: none !important; }
.projects,
.client-ticker + .projects {
  background: linear-gradient(180deg, #001621 0, #95bbea 42svh, #95bbea 100%) !important;
}

/* Actual current Work-card typography. */
.work-stack-card__caption,
.work-stack-card__caption h2,
.work-stack-card__details,
.work-stack-card__details *,
.work-stack-card__number { color: #930500 !important; }
.work-stack-card__rule { background: rgba(147,5,0,.42) !important; }

/* Compact Work control expands as one unit when the container is hovered. */
.site-nav.is-over-work:hover .nav-pill,
.site-nav.is-over-work:focus-within .nav-pill { display: flex; }
.site-nav.is-over-work:hover .nav-divider,
.site-nav.is-over-work:focus-within .nav-divider { display: inline; }
.site-nav.is-over-work:hover::after,
.site-nav.is-over-work:focus-within::after { display: none; }
.site-nav.is-over-work:hover .ambient-toggle__label,
.site-nav.is-over-work:focus-within .ambient-toggle__label { max-width: 76px; margin-left: 7px; opacity: 1; }
.site-nav.is-over-work [data-orb-label] {
  color: #001621 !important;
  -webkit-text-fill-color: #001621;
  background: none !important;
}

/* Keep footer actions intact and readable at narrow widths. */
.site-footer__links { min-width: max-content; }
.email-actions,
.email-link { white-space: nowrap; }
.email-copy,
.email-copy:hover,
.email-copy:focus-visible { color: #95bbea !important; }

@media (max-width: 1024px) {
  .site-footer {
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
  }
  .site-footer__links {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 12px;
  }
}

/* Landing entrance: the orb falls into its London position, compressing its
   rebound into progressively smaller, more physical bounces. */
@property --orb-entry-y {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

html.orb-entering .hero-stage {
  animation: orb-drop-in 1850ms both;
}

@keyframes orb-drop-in {
  0% {
    --orb-entry-y: -155vh;
    animation-timing-function: cubic-bezier(.32, 0, .72, .38);
  }
  55% {
    --orb-entry-y: 9vh;
    animation-timing-function: cubic-bezier(.2, .72, .28, 1);
  }
  69% {
    --orb-entry-y: -4.5vh;
    animation-timing-function: cubic-bezier(.32, 0, .65, .44);
  }
  79% {
    --orb-entry-y: 3vh;
    animation-timing-function: cubic-bezier(.2, .72, .28, 1);
  }
  87% {
    --orb-entry-y: -1.35vh;
    animation-timing-function: cubic-bezier(.32, 0, .65, .44);
  }
  94% { --orb-entry-y: .65vh; }
  100% { --orb-entry-y: 0px; }
}

html.orb-entering .hero-title::after,
html.orb-entering .hero-role__label::after,
html.orb-entering .hero-location::before {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html.orb-entering .hero-stage { animation: none; }
}

/* “Ambient” belongs to the expanded navigation. The compact scroll marker may
   no longer hide it while the full menu is visible. */
.site-nav:not(.is-over-work) .ambient-toggle {
  gap: 7px;
}

.site-nav:not(.is-over-work) .ambient-toggle__label,
.site-nav.is-over-work:hover .ambient-toggle__label,
.site-nav.is-over-work:focus-within .ambient-toggle__label {
  display: inline-block !important;
  max-width: 76px !important;
  margin-left: 0;
  overflow: hidden;
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Keep these final overrides last: the ticker and Work share one solid,
   scroll-interpolated surface, matching the London/Hong Kong scene transition. */
.client-ticker {
  background: var(--work-scene-bg, #001621) !important;
}

.projects,
.client-ticker + .projects {
  background: var(--work-scene-bg, #95bbea) !important;
}

.site-nav:not(.is-over-work) .nav-link::after,
.site-nav:not(.is-over-work) .nav-cta::after,
.site-nav:not(.is-over-work) .ambient-toggle__bars i {
  background-color: var(--nav-base) !important;
}

.work-stack-card__caption,
.work-stack-card__caption h2 {
  color: #930500 !important;
  text-shadow: none !important;
}

.cursor-ring.is-project-cta {
  color: #930500 !important;
  border-color: rgba(255, 255, 255, .68) !important;
  background: rgba(255, 255, 255, .42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 10px 28px rgba(0, 22, 33, .16) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.16) !important;
  backdrop-filter: blur(12px) saturate(1.16) !important;
}

.cursor-ring.is-project-cta .cursor-ring__label {
  color: #930500 !important;
}

.cursor-ring.is-project-cta .cursor-ring__icon {
  color: #930500 !important;
}

:root[data-location="hong-kong"] .site-nav:not(.is-over-work) {
  --nav-base: #fff;
}

/* Final interaction overrides. */
.client-ticker { display: none !important; }
.hero::before { display: none !important; }
.site-nav .nav-pill {
  max-width: 360px; overflow: hidden; opacity: 1;
  transform: translate3d(0, 0, 0); transform-origin: right center;
  transition: max-width 360ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease, transform 360ms cubic-bezier(.22, 1, .36, 1);
}
.site-nav::after {
  width: 0; overflow: hidden; opacity: 0;
  transform: translate3d(8px, 0, 0) scale(.78); transform-origin: center;
  transition: width 280ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease 80ms, transform 340ms cubic-bezier(.22, 1, .36, 1);
}
.site-nav.is-over-work .nav-pill {
  display: flex !important; max-width: 0; opacity: 0; pointer-events: none;
  transform: translate3d(10px, 0, 0) scale(.92);
}
.site-nav.is-over-work::after {
  display: block !important; width: 22px; opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.site-nav.is-over-work:hover .nav-pill,
.site-nav.is-over-work:focus-within .nav-pill {
  max-width: 360px; opacity: 1; pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}
.site-nav.is-over-work:hover::after,
.site-nav.is-over-work:focus-within::after {
  display: block !important; width: 0; opacity: 0;
  transform: translate3d(8px, 0, 0) scale(.78);
}

/* Once the Hong Kong sequence has cleared, settle each project into a complete
   viewport instead of allowing the page to rest between cards. */
html.work-snap-enabled {
  scroll-snap-type: y mandatory;
}

html.work-snap-enabled .projects,
html.work-snap-enabled .work-stack-card,
html.work-snap-enabled .site-footer {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

html.work-snap-enabled .work-stack-card {
  scroll-margin-top: 8svh;
}

/* A compact chapter marker between Hong Kong and the project sequence. The
   project stack overlaps this field before opening into individual cards. */
.work-intro-snap {
  position: relative;
  z-index: 80;
  display: grid;
  width: 100%;
  min-height: 50svh;
  place-items: center;
  overflow: hidden;
  color: #930500;
  isolation: isolate;
  background: #95bbea !important;
}

.work-intro-snap::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #95bbea;
  content: "";
}

.work-intro-snap h2 {
  position: relative;
  z-index: 1;
  font-size: clamp(72px, 14vw, 220px);
  font-weight: 450;
  line-height: .82;
  letter-spacing: -.065em;
  text-align: center;
}

.work-intro-snap + .projects {
  position: relative;
  z-index: 81;
  margin-top: 0 !important;
  padding-top: 0;
  background: var(--work-scene-bg, #95bbea) !important;
  overflow: visible !important;
}

.site-nav {
  z-index: 90;
}

/* Only the collapsed stack rises over the chapter heading. Expanded cards
   return to their authored positions in the section below. */
.work-intro-snap + .projects .work-stack-card {
  transform:
    translate3d(
      calc(-50% + var(--stack-x)),
      calc(var(--stack-y) - 50svh),
      0
    )
    rotate(var(--stack-rotate))
    scale(.31);
}

.work-intro-snap + .projects.is-expanded .work-stack-card {
  transform: translate3d(-50%, 0, 0) rotate(0deg) scale(1);
}

html.work-snap-enabled .work-intro-snap {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Reverse scrolling lands on the complete Hong Kong end-state before the
   user continues upward through the London/Hong Kong transition. */
html.work-snap-enabled .hero {
  scroll-snap-align: end;
  scroll-snap-stop: always;
}

@media (max-width: 1024px) {
  .work-intro-snap h2 {
    font-size: clamp(62px, 18vw, 108px);
  }
}

/* “Selected works” is the opening viewport of Projects—not a separate panel. */
.projects {
  z-index: 81;
  overflow: visible !important;
  background: var(--work-scene-bg, #95bbea) !important;
}

.projects__intro {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 50svh;
  place-items: center;
  overflow: hidden;
  color: #930500;
}

.projects__intro h2 {
  font-size: clamp(72px, 14vw, 220px);
  font-weight: 450;
  line-height: .82;
  letter-spacing: normal;
  text-align: center;
}

.projects:not(.is-expanded) .work-stack-card {
  left: 50%;
  transform:
    translate3d(
      calc(-50% + var(--stack-x)),
      calc(var(--stack-y) - 55svh),
      0
    )
    rotate(var(--stack-rotate))
    scale(.31);
}

.projects.is-expanded .work-stack-card {
  transform: translate3d(-50%, 0, 0) rotate(0deg) scale(1);
}

/* The only Work boundary snap is Hong Kong ↔ the top of Projects. */
html.work-snap-enabled .projects {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

html.work-snap-enabled .work-stack-card,
html.work-snap-enabled .site-footer {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

@media (max-width: 1024px) {
  .projects__intro h2 {
    font-size: clamp(62px, 18vw, 108px);
  }
}

/* Project labels use the AA-compliant red against the London-blue Work surface. */
.work-stack-card__caption,
.work-stack-card__caption h2,
.work-stack-card__details,
.work-stack-card__details *,
.work-stack-card__number {
  color: #930500 !important;
}

.work-stack-card__rule {
  background: rgba(147, 5, 0, .72) !important;
}

/* Keep project names editorial but subordinate to the imagery. */
.work-stack-card__caption h2 {
  font-size: clamp(36px, 6vw, 88px);
  line-height: .92;
}

@media (max-width: 1024px) {
  .work-stack-card__caption h2 {
    font-size: clamp(32px, 10vw, 56px);
  }
}

/* Clamp the horizontal scrollport: oversized atmospheric artwork may paint
   outside the hero, but it must never move the page sideways in Safari. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
}

.hero,
.hero-stage {
  width: 100%;
  max-width: 100%;
}

body.hero-transitioning .hero {
  transform: none !important;
}

/* Site-wide heading typography uses the font's natural tracking. */
:where(h1, h2, h3, h4, h5, h6) {
  letter-spacing: normal !important;
}

/* Precise snap map: composed Hong Kong scene ↔ Projects opening, then each
   project centered. Snapping releases before the contact section. */
.hk-snap-point {
  position: absolute;
  top: var(--hk-snap-top, 216svh);
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

html.work-snap-enabled {
  scroll-snap-type: y mandatory;
}

html.work-snap-enabled .hero,
html.work-snap-enabled .projects,
html.work-snap-enabled .work-stack-card,
html.work-snap-enabled .site-footer {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

html.work-boundary-snap .hk-snap-point,
html.work-boundary-snap .projects {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* On the return journey, bypass the Projects heading and land directly on the
   fully composed Hong Kong scene. */
html.work-boundary-snap.is-scrolling-back .projects {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

html.project-snap-enabled {
  scroll-padding-top: 0;
}

html.project-snap-enabled .work-stack-card {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* Final cascade position for the Work-opening refinements. */
.projects__intro {
  min-height: 40svh;
  padding-top: clamp(64px, 10svh, 112px);
  padding-bottom: clamp(10px, 2svh, 24px);
}

.work-stack-card:first-child {
  --card-top: 4svh !important;
}

@media (max-width: 1024px) {
  .projects__intro {
    min-height: 42svh;
    padding-top: 9svh;
    padding-bottom: 1.5svh;
  }

  .work-stack-card:first-child {
    --card-top: 3svh !important;
  }
}

/* The London orb is a tactile scroll cue. */
.orb-interaction {
  position: absolute;
  z-index: 2;
  top: var(--orb-y);
  left: var(--orb-x);
  width: 76vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--hero-orb-color, #ffedad);
  opacity: 0;
  pointer-events: auto;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transform-origin: center;
  transition:
    transform 820ms cubic-bezier(.16,1,.3,1),
    opacity 440ms ease;
  will-change: transform, opacity;
}

:root[data-location="london"]:not(.orb-entering) .orb-interaction:hover {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1.045);
}

:root[data-location="hong-kong"] .orb-interaction,
html.orb-entering .orb-interaction {
  pointer-events: none;
}

.cursor-ring.is-orb-scroll {
  width: 26px;
  height: 40px;
  border: 1.25px solid #930500;
  border-radius: 18px;
  color: #930500;
  background: transparent;
  box-shadow: none;
  mix-blend-mode: normal;
  opacity: 1;
}

.cursor-ring.is-orb-scroll .cursor-ring__label {
  opacity: 0;
}

.cursor-ring.is-orb-scroll::after {
  position: absolute;
  top: 29%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #930500;
  content: "";
  transform: translate(-50%, -50%);
  animation: orb-cursor-down 2500ms linear infinite;
}

@keyframes orb-cursor-down {
  0% { top: 29%; opacity: 1; }
  15% { top: 50%; opacity: 1; }
  50% { top: 50%; opacity: 0; }
  100% { top: 29%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-ring.is-orb-scroll::after { animation: none; }
}

/* Extend the navigation's pixel-level orb inversion to the three ambient bars.
   The pipe uses the existing clipped text treatment via data-orb-label. */
.site-nav:not(.is-over-work) .ambient-toggle__bars i {
  background-color: var(--nav-base) !important;
  background-image: radial-gradient(
    circle 38vmin at var(--nav-orb-x, -100vmin) var(--nav-orb-y, -100vmin),
    #001621 0 99.8%,
    var(--nav-base) 100%
  ) !important;
}

/* Active and hover underlines share the same pixel-level orb inversion as
   their labels. The Y coordinate compensates for the rule's lower offset. */
.site-nav:not(.is-over-work) .nav-link::after,
.site-nav:not(.is-over-work) .nav-cta::after {
  background-color: var(--nav-base) !important;
  background-image: radial-gradient(
    circle 38vmin at var(--nav-orb-x, -100vmin) var(--nav-underline-orb-y, -100vmin),
    #001621 0 99.8%,
    var(--nav-base) 100%
  ) !important;
}

/* Resolve the title as the collapsed card stack enters from the HK scene,
   then let the cards spread into their project positions. */
.projects__intro h2 {
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 38px, 0);
  transition:
    opacity 720ms ease,
    filter 760ms ease,
    transform 820ms cubic-bezier(.16,1,.3,1);
  will-change: opacity, filter, transform;
}

.projects.is-stack-visible .projects__intro h2 {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

html.work-boundary-snap:not(.project-snap-enabled) {
  scroll-snap-type: none;
}

html.work-boundary-snap .hk-snap-point,
html.work-boundary-snap .projects {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

@media (prefers-reduced-motion: reduce) {
  .projects__intro h2 {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* Temporarily free-scroll the Hong Kong-to-Work handoff. A blurred overlap
   feathers the two live background states without exposing a section seam. */
.client-ticker + .projects::before {
  display: block !important;
  position: absolute;
  top: -20svh;
  right: 0;
  left: 0;
  z-index: 0;
  height: 20svh;
  pointer-events: none;
  content: "";
  background: var(--work-scene-bg, #95bbea) !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 30%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 30%, #000 100%);
  filter: blur(12px);
  transform: translateZ(0);
}

html.work-boundary-snap:not(.project-snap-enabled) {
  scroll-snap-type: none !important;
}

html.work-snap-enabled:not(.project-snap-enabled) {
  scroll-snap-type: none !important;
}

html.project-snap-enabled {
  scroll-snap-type: y mandatory !important;
  scroll-padding-top: 0;
}

html.project-snap-enabled .work-stack-card {
  scroll-snap-align: center !important;
  scroll-snap-stop: always !important;
}

/* JavaScript guides the large narrative transitions while the existing CSS
   snapping continues to handle individual project cards. */
html.home-programmatic-snap {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

/* Selected works settles once at its opening position. Project cards then
   return to normal scrolling instead of initiating a second snap sequence. */
html.project-snap-enabled {
  scroll-snap-type: none !important;
}

html.project-snap-enabled .work-stack-card {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}

.work-stack-card,
.work-stack-card__media {
  border-radius: clamp(18px, 2.2vw, 34px);
}

@media (min-width: 1025px) {
  .work-stack-card__details {
    width: clamp(160px, 16vw, 220px);
  }
}

/* Keep the atmospheric texture fine and quiet on high-density phone screens. */
@media (max-width: 1024px) {
  .grain {
    opacity: .24;
    background-size: 128px 128px;
  }

  .hero-stage::after,
  body.hero-hk-stage .hero-stage::after {
    opacity: .24 !important;
    background-size: 34px 34px !important;
    filter: contrast(1.2) !important;
  }

  /* Project imagery retains its authored landscape ratio on phones. */
  .work-stack-card {
    height: auto !important;
  }

  .work-stack-card__media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1.82 / 1;
  }

  .work-stack-card__media img {
    height: 100%;
    object-fit: contain;
    background: #111;
  }

  .work-stack-card__details {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    margin-top: 16px;
    color: #930500;
    text-align: left;
    text-shadow: none;
    transform: translate3d(0, 14px, 0);
  }

  .projects.is-expanded .work-stack-card.is-card-active .work-stack-card__details {
    transform: translate3d(0, 0, 0);
  }

  .work-stack-card__number {
    font-size: 28px;
  }

  .work-stack-card__rule {
    margin: 8px 0 10px;
    transform-origin: left;
  }
}

/* Phone GPUs struggle with the scene's blend layers and live blur filters.
   Retain the illustration while dropping effects that do not materially alter
   the composition at this size. */
@media (hover: none) and (pointer: coarse) {
  .grain,
  .hero-stage::after,
  body.hero-hk-stage .hero-stage::after {
    display: none !important;
  }

  .hero-stage::before,
  body.hero-hk-stage .hk-elements,
  body.hero-hk-stage .hk-elements * {
    filter: none !important;
  }

  .liquid-bg,
  .hero-stage,
  .hk-elements,
  .work-stack-card,
  .work-stack-card__media,
  .work-stack-card__media img {
    will-change: auto !important;
  }

  .hero-title::after,
  .hero-role__label::after,
  .hero-location::before {
    display: none !important;
  }

  html.orb-entering .hero-stage {
    animation-duration: 1100ms;
  }
}

/* Mobile Works is a simple document-flow stack. Its spacing follows each
   landscape image and metadata block instead of reserving viewport-sized gaps. */
@media (max-width: 1024px) {
  .projects,
  .work-stack-grid {
    min-height: 0 !important;
  }

  .work-stack-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(46px, 13vw, 68px);
    padding: 3svh 7vw 12svh;
  }

  .work-stack-card,
  .work-stack-card:nth-child(1),
  .work-stack-card:nth-child(2),
  .work-stack-card:nth-child(3),
  .projects:not(.is-expanded) .work-stack-card,
  .projects.is-expanded .work-stack-card,
  .work-intro-snap + .projects .work-stack-card,
  .work-intro-snap + .projects.is-expanded .work-stack-card {
    position: relative;
    top: auto !important;
    left: auto;
    width: 100%;
    opacity: 1;
    transform: none !important;
  }

  .work-stack-card__media,
  .work-stack-card__media img,
  .projects:not(.is-expanded) .work-stack-card__media,
  .projects.is-expanded .work-stack-card__media img {
    clip-path: none;
    filter: none;
    transform: none;
  }

  .work-stack-card__details,
  .projects.is-expanded .work-stack-card.is-card-active .work-stack-card__details {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* On touch screens the compact menu has an explicit closed/open state. This
   prevents Safari's emulated hover from exposing and activating Contact in the
   same tap. */
@media (hover: none) and (pointer: coarse) {
  .site-nav.is-over-work:not(.is-menu-open) .nav-pill,
  .site-nav.is-over-work:not(.is-menu-open):hover .nav-pill,
  .site-nav.is-over-work:not(.is-menu-open):focus-within .nav-pill,
  .site-nav.is-over-work:not(.is-menu-open) .nav-divider {
    display: none !important;
    pointer-events: none !important;
  }

  .site-nav.is-over-work:not(.is-menu-open)::after {
    display: block !important;
  }

  .site-nav.is-over-work.is-menu-open .nav-pill {
    display: flex !important;
    pointer-events: auto;
  }

  .site-nav.is-over-work.is-menu-open .nav-divider {
    display: inline !important;
  }

  .site-nav.is-over-work.is-menu-open::after {
    display: none !important;
  }
}