/* ==========================================================================
   HERO 3D CRT & NAVIGATION SYSTEM (css/hero-3d.css)
   ==========================================================================
   Scope & Responsibilities:
   - Full-bleed hero section geometry and 3D CRT monitor styling.
   - ASCII TV frame borders, SVG clip-path definitions, and scanlines.
   - Fixed navigation taskbar (Group A socials, Group B studio, live clock).
   - Dropdown navigation drawer (desktop drawer & full-screen overlay).
   ========================================================================== */

/* ==========================================================================
   Hero & Navigation Typography & Layout Settings
   Easily adjust font size, boldness (weight), gaps, and coordinates below:
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     1. Navigation: Groups A & B (Links, Boldness, Word & Letter Gaps)
     -------------------------------------------------------------------------- */
  --nav-font-size: 14px;
  --nav-font-weight: 500;
  --nav-letter-spacing: -0.8px;
  --nav-item-gap: 56px;
  --nav-groups-gap: 252px;

  /* Specific Group A overrides (Socials: Behance, Instagram, Awwwards) */
  --group-a-font-size: 14px;
  --group-a-font-weight: 500;
  --group-a-letter-spacing: -0.8px;
  --group-a-gap: 56px;
  --behance-left-anchor: 28%;

  /* Specific Group B overrides (Studio: Works, Studio, Archive) */
  --group-b-font-size: 14px;
  --group-b-font-weight: 500;
  --group-b-letter-spacing: -0.8px;
  --group-b-gap: 56px;

  /* --------------------------------------------------------------------------
     2. Center Main Visual: Interactive ASCII Disc (Letters Evade Cursor)
     -------------------------------------------------------------------------- */
  --center-disc-size: 658px;
  --center-disc-top: 48%;
  --center-disc-left: 50%;
  --disc-repulsion-radius: 320px;
  --disc-repulsion-force: 26;
  --hero-meta-top: 47.5%;

  /* --------------------------------------------------------------------------
     3. Top-Right Live Clock (GMT+7 24h)
     -------------------------------------------------------------------------- */
  --clock-font-size: 12.5px;
  --clock-font-weight: 400;
  --clock-letter-spacing: -0.035em;

  /* --------------------------------------------------------------------------
     4. Hero Layout Coordinates & Margins
     -------------------------------------------------------------------------- */
  --nav-padding-y: 13px;
  /* Header top/bottom padding */
  --nav-padding-x: 25px;
  /* Header left/right padding */
  --hero-bottom-offset: 28px;
  /* Bottom bar offset from bottom edge */
  --hero-left-offset: 25px;
  /* Left margin */
  --hero-right-offset: 25px;
  /* Right margin */
  --desc-left-anchor: 55%;
  /* Horizontal position of Description & Group B Anchor */

  /* --------------------------------------------------------------------------
     5. Bottom Statement & Description
     -------------------------------------------------------------------------- */
  --statement-font-size: 67px;
  --statement-font-weight: 400;
  --statement-line-height: 0.82;
  --statement-letter-spacing: -1.9px;
  --statement-max-width: 650px;

  --desc-font-size: 14px;
  --desc-font-weight: 500;
  --desc-letter-spacing: -0.8px;
  --desc-line-height: 17.4px;
  --desc-max-width: 420px;

  /* --------------------------------------------------------------------------
     6. Showreel Preview Card (Independent sizing)
     -------------------------------------------------------------------------- */
  --showreel-width: 110px;
  --showreel-height: 90px;
  --showreel-radius: 6px;

  /* --------------------------------------------------------------------------
     7. Atmosphere & Background
     -------------------------------------------------------------------------- */
  --backdrop-brightness: 0.96;
  --backdrop-contrast: 1.16;
  --duotone-opacity: 0.62;

  /* Direct aliases for description and bottom bar */
  --vd-statement-font-size: var(--statement-font-size);
  --vd-statement-line-height: var(--statement-line-height);
  --vd-statement-letter-spacing: var(--statement-letter-spacing);
  --vd-statement-max-width: var(--statement-max-width);
  --vd-bottom-bar-bottom: var(--hero-bottom-offset);
  --vd-bottom-bar-left: var(--hero-left-offset);
  --vd-bottom-bar-right: var(--hero-right-offset);
  --vd-desc-left: var(--desc-left-anchor);
  --vd-bottom-desc-size: var(--desc-font-size);
  --vd-bottom-desc-weight: var(--desc-font-weight);
  --vd-bottom-desc-letter-spacing: var(--desc-letter-spacing);
  --vd-bottom-desc-line-height: var(--desc-line-height);
  --vd-bottom-desc-max-width: var(--desc-max-width);
  --vd-showreel-width: var(--showreel-width);
  --vd-showreel-height: var(--showreel-height);
  --vd-showreel-radius: var(--showreel-radius);
  --vd-nav-padding-y: var(--nav-padding-y);
  --vd-nav-padding-x: var(--nav-padding-x);
  --vd-nav-font-size: var(--nav-font-size);
  --vd-nav-center-gap: var(--nav-item-gap);
  --vd-nav-groups-gap: var(--nav-groups-gap);
}

/* ==========================================================================
   Top Navigation: Centered Modular Navigation Box with Roll Animation
   ========================================================================== */
:root {
  /* Nav Bar */
  --nav-box-top: 25px;
  --nav-box-width: 480px;
  --nav-box-height: 57px;
  --nav-box-min-height: auto;
  --nav-box-min-width: 280px;
  --nav-box-offset-x: 0px;
  --nav-box-offset-y: 0px;
  --nav-box-margin-top: 0px;
  --nav-box-margin-bottom: 0px;
  --nav-box-margin-left: 0px;
  --nav-box-margin-right: 0px;
  --nav-box-gap: 25px;
  --nav-box-padx: 17px;
  --nav-box-pady: 10px;
  --nav-box-radius: 4px;
  --nav-box-border-width: 0px;
  --nav-box-bg: var(--nav-glass-bg, rgba(16, 16, 16, 0.60));

  /* Glassmorphism Design Tokens */
  --nav-glass-bg: rgba(16, 16, 16, 0.60);
  --nav-glass-blur: 16px;
  --nav-glass-saturate: 140%;
  --nav-glass-border: transparent;
  --nav-glass-highlight: transparent;
  --nav-glass-shadow-nav: 0 12px 32px rgba(0, 0, 0, 0.45);
  --nav-glass-shadow-menu: 0 24px 60px rgba(0, 0, 0, 0.75);
  --nav-glass-fallback-bg: #101010;

  /* Dropdown Fullscreen Backdrop Overlay Controls - Adjust darkness & blur here */
  --nav-dropdown-backdrop-bg: rgba(4, 4, 6, 0.80);
  --nav-dropdown-backdrop-blur: 26px;

  /* Nav Inside */
  --nav-logo-size: 32px;
  --nav-logo-offset-x: -2px;
  --nav-logo-offset-y: 0px;
  --nav-box-brand-size: 25px;
  --nav-box-brand-weight: 700;
  --nav-box-brand-letter-spacing: -0.7px;
  --nav-box-brand-slash-gap: 0px;
  --nav-box-brand-p-offset-y: -0.1px;
  --nav-box-brand-r-size: 10px;
  --nav-box-brand-r-gap: 1px;
  --nav-pinned-font-size: 11px;
  --nav-box-link-size: 14.5px;
  --nav-box-link-weight: 400;
  --nav-box-link-letter-spacing: calc(-0.01em - 0.7px);
  --nav-status-font-size: 11.5px;
  --nav-status-font-weight: 500;
  --nav-status-letter-spacing: -0.02em;
  --nav-status-color: rgba(255, 255, 255, 0.65);

  /* Nav Hamburger Button */
  --nav-hamburger-size: 30px;
  --nav-hamburger-line-width: 19px;
  --nav-hamburger-line-height: 1.5px;
  --nav-hamburger-gap: 4.5px;
  --nav-hamburger-active-rotate: -68deg;

  /* Dropdown Menu Controls */
  --nav-dropdown-bg: rgba(12, 12, 14, 0.88);
  --nav-dropdown-padding-top: 24px;
  --nav-dropdown-padding-bottom: 22px;
  --nav-dropdown-padding-x: 22px;
  --nav-dropdown-item-padding-y: 20px;
  --nav-dropdown-item-padding-x: 4px;
  --nav-dropdown-deck-margin-top: 18px;
  --nav-dropdown-deck-padding-y: 18px;
  --nav-dropdown-actions-gap: 12px;
  --nav-dropdown-actions-margin-top: 12px;
  --nav-dropdown-item-font-size: 16.5px;
  --nav-dropdown-info-font-size: 14px;
  --nav-dropdown-item-font-weight: 400;
  --nav-dropdown-btn-font-weight: 500;
}

.hero-top-nav {
  position: fixed;
  top: var(--nav-box-top, 25px);
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  min-height: var(--nav-box-height, 56px);
  z-index: 1000;
  padding: 0 var(--hero-margin, 25px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  isolation: isolate;
}

.hero-top-nav .nav-modular-box {
  position: absolute;
  left: calc(50% + var(--nav-box-offset-x, 0px));
  top: calc(50% + var(--nav-box-offset-y, 0px));
  transform: translate(-50%, -50%);
  margin-top: var(--nav-box-margin-top, 0px);
  margin-bottom: var(--nav-box-margin-bottom, 0px);
  margin-left: var(--nav-box-margin-left, 0px);
  margin-right: var(--nav-box-margin-right, 0px);
  transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.hero-top-nav .nav-pinned-item {
  transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.nav-pinned-item {
  display: inline-flex;
  align-items: center;
  pointer-events: auto;
  will-change: transform;
  z-index: 2;
  line-height: 1;
  mix-blend-mode: normal !important;
}

.nav-pinned-left {
  margin-right: auto;
}

.nav-pinned-right {
  margin-left: auto;
}

.nav-pinned-item .hero-location-text {
  font-family: var(--font-mono);
  font-size: var(--nav-pinned-font-size, 11px);
  font-weight: 500;
  letter-spacing: -0.2px;
  color: #faf9fc;
  text-transform: uppercase;
  line-height: 1;
}

.nav-pinned-item .live-clock-gmt {
  font-family: var(--font-mono);
  font-size: var(--nav-pinned-font-size, 11px);
  font-weight: 500;
  color: #faf9fc;
  letter-spacing: -0.2px;
  line-height: 1;
}

.nav-pinned-item .hero-clock-dot,
.hero-clock-dot {
  display: inline-block;
  width: 5.5px;
  height: 5.5px;
  border-radius: 50%;
  background-color: #00ff66 !important;
  box-shadow: 0 0 8px #00ff66 !important;
  margin-right: 7px;
  animation: clockDotPulse 2s ease-in-out infinite;
  mix-blend-mode: normal !important;
  vertical-align: middle;
  transform: translateY(-0.75px);
  flex-shrink: 0;
}

@keyframes clockDotPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 8px #00ff66;
  }

  50% {
    opacity: 0.65;
    transform: scale(0.85);
    box-shadow: 0 0 3px rgba(0, 255, 102, 0.3);
  }
}

/* ==========================================================================
   Dynamic Navigation Theme: Light (White Section) vs Dark (Black Section)
   ========================================================================== */

/* Smooth color, background, transform & opacity transitions for navigation */
.hero-top-nav,
.site-nav-top {
  transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nav-pinned-item,
.nav-modular-box,
.hero-location-text,
.live-clock-gmt,
.live-clock,
.nav-modular-box .nav-box-link,
.nav-modular-box .nav-box-brand,
.nav-modular-box .brand-slash,
.nav-modular-box .brand-r,
.nav-modular-box .nav-roll-inner span,
.nav-modular-box .brand-roll-inner span,
.site-nav-top a,
.site-nav-top span {
  transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Navigation Theme: Permanent Dark Glass Aesthetic (Never Turns White) --- */
.hero-top-nav,
.hero-top-nav.nav-theme-dark,
.hero-top-nav.nav-theme-light {
  color: #ffffff !important;
}

.hero-top-nav .nav-modular-box,
.hero-top-nav.nav-theme-dark .nav-modular-box,
.hero-top-nav.nav-theme-light .nav-modular-box {
  background: var(--nav-glass-bg, rgba(16, 16, 16, 0.60)) !important;
  backdrop-filter: blur(var(--nav-glass-blur, 16px)) saturate(var(--nav-glass-saturate, 140%)) !important;
  -webkit-backdrop-filter: blur(var(--nav-glass-blur, 16px)) saturate(var(--nav-glass-saturate, 140%)) !important;
  border: none !important;
  box-shadow: var(--nav-glass-shadow-nav, 0 12px 32px rgba(0, 0, 0, 0.45)) !important;
}

.hero-top-nav .nav-modular-box .nav-box-link,
.hero-top-nav.nav-theme-dark .nav-modular-box .nav-box-link,
.hero-top-nav.nav-theme-light .nav-modular-box .nav-box-link {
  color: rgba(255, 255, 255, 0.65) !important;
}

.hero-top-nav .nav-modular-box .nav-box-link:hover,
.hero-top-nav.nav-theme-dark .nav-modular-box .nav-box-link:hover,
.hero-top-nav.nav-theme-light .nav-modular-box .nav-box-link:hover,
.hero-top-nav .nav-modular-box .nav-box-link.active,
.hero-top-nav.nav-theme-dark .nav-modular-box .nav-box-link.active,
.hero-top-nav.nav-theme-light .nav-modular-box .nav-box-link.active {
  color: #ffffff !important;
}

.hero-top-nav .nav-modular-box .nav-box-brand,
.hero-top-nav.nav-theme-dark .nav-modular-box .nav-box-brand,
.hero-top-nav.nav-theme-light .nav-modular-box .nav-box-brand,
.hero-top-nav .nav-modular-box .brand-slash,
.hero-top-nav .nav-modular-box .brand-r {
  color: #ffffff !important;
}

.hero-top-nav .hero-clock-dot,
.hero-top-nav.nav-theme-light .hero-clock-dot,
.hero-top-nav.nav-theme-dark .hero-clock-dot,
.site-nav-top .hero-clock-dot,
.site-nav-top.nav-theme-light .hero-clock-dot,
.site-nav-top.nav-theme-dark .hero-clock-dot {
  background-color: #00ff66 !important;
  box-shadow: 0 0 8px #00ff66 !important;
  mix-blend-mode: normal !important;
}

.site-nav-top {
  position: fixed;
  top: var(--nav-box-top, 26px);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  padding: 0 var(--hero-margin, 25px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  mix-blend-mode: normal !important;
  transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

/* Permanent navbar visibility (neutralized nav-hidden) */
.hero-top-nav.nav-hidden,
.site-nav-top.nav-hidden {
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.hero-top-nav.nav-hidden .nav-modular-box {
  transform: translate(-50%, 0) scale(1) !important;
  opacity: 1 !important;
}

.hero-top-nav.nav-hidden .nav-pinned-item {
  opacity: 1 !important;
}

.site-nav-top a,
.hero-top-nav a,
.site-nav-top .nav-left,
.site-nav-top .nav-center-group,
.site-nav-top .nav-right,
.nav-modular-box {
  pointer-events: auto !important;
}

.site-nav-top .nav-right {
  display: inline-flex;
  align-items: center;
}

.nav-modular-box {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nav-box-gap, 25px);
  width: var(--nav-box-width, 480px);
  height: var(--nav-box-height, auto);
  min-height: var(--nav-box-height, auto);
  min-width: var(--nav-box-min-width, 280px);
  max-width: var(--nav-box-max-width, calc(100vw - 40px));
  padding: var(--nav-box-pady, 10px) var(--nav-box-padx, 17px);
  margin-top: var(--nav-box-margin-top, 0px);
  margin-bottom: var(--nav-box-margin-bottom, 0px);
  margin-left: var(--nav-box-margin-left, 0px);
  margin-right: var(--nav-box-margin-right, 0px);
  background: var(--nav-glass-bg, rgba(16, 16, 16, 0.60));
  backdrop-filter: blur(var(--nav-glass-blur, 16px)) saturate(var(--nav-glass-saturate, 140%));
  -webkit-backdrop-filter: blur(var(--nav-glass-blur, 16px)) saturate(var(--nav-glass-saturate, 140%));
  border: none;
  border-radius: var(--nav-box-radius, 4px);
  box-shadow: var(--nav-glass-shadow-nav, 0 12px 32px rgba(0, 0, 0, 0.45));
  box-sizing: border-box;
  position: relative;
  opacity: var(--nav-box-opacity, 1);
  isolation: isolate;
  transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Center Status Line in Nav Box */
.nav-status-line {
  font-family: var(--type-mono-a-font, var(--font-mono, 'PP Supply Mono', monospace));
  font-size: var(--type-mono-a-size, 11px);
  font-weight: var(--nav-status-font-weight, 500);
  letter-spacing: var(--type-mono-a-spacing, 0.5px);
  color: var(--nav-status-color, rgba(255, 255, 255, 0.65));
  white-space: nowrap;
  pointer-events: auto;
  text-align: center;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

/* Right: Hamburger Button (2 lines of equal width) */
.nav-hamburger-btn {
  background: transparent;
  border: none;
  padding: 4px 2px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--nav-hamburger-gap, 4.5px);
  pointer-events: auto;
  user-select: none !important;
  width: var(--nav-hamburger-size, 30px);
  height: var(--nav-hamburger-size, 30px);
  transform: rotate(0deg);
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.nav-hamburger-btn:hover {
  opacity: 1;
}

.nav-hamburger-btn:active {
  transform: scale(0.92);
  transition: transform 120ms ease-out;
}

.nav-hamburger-btn .hamburger-line {
  display: block;
  width: var(--nav-hamburger-line-width, 19px);
  height: var(--nav-hamburger-line-height, 1.5px);
  background-color: #ffffff;
  border-radius: 1px;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.2s ease,
    opacity 0.2s ease;
  will-change: transform;
}

/* Hover: Merge both lines into a single center line '-' */
.nav-hamburger-btn:hover .hamburger-line:first-child,
.nav-hamburger-btn:focus-visible .hamburger-line:first-child {
  transform: translateY(calc((var(--nav-hamburger-gap, 4.5px) + var(--nav-hamburger-line-height, 1.5px)) / 2));
}

.nav-hamburger-btn:hover .hamburger-line:last-child,
.nav-hamburger-btn:focus-visible .hamburger-line:last-child {
  transform: translateY(calc(-1 * (var(--nav-hamburger-gap, 4.5px) + var(--nav-hamburger-line-height, 1.5px)) / 2));
}

/* Active / Clicked State: Merge into single line and rotate into a slash '/' */
.nav-hamburger-btn.is-active {
  transform: rotate(var(--nav-hamburger-active-rotate, -68deg));
}

.nav-hamburger-btn.is-active .hamburger-line:first-child {
  transform: translateY(calc((var(--nav-hamburger-gap, 4.5px) + var(--nav-hamburger-line-height, 1.5px)) / 2));
}

.nav-hamburger-btn.is-active .hamburger-line:last-child {
  transform: translateY(calc(-1 * (var(--nav-hamburger-gap, 4.5px) + var(--nav-hamburger-line-height, 1.5px)) / 2));
}

/* Fullscreen Backdrop Scrim when dropdown is active: blurs the entire site in sync with navbar glass settings */
.nav-dropdown-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--nav-dropdown-backdrop-bg, rgba(4, 4, 6, 0.80));
  backdrop-filter: blur(var(--nav-dropdown-backdrop-blur, 24px)) saturate(var(--nav-glass-saturate, 140%));
  -webkit-backdrop-filter: blur(var(--nav-dropdown-backdrop-blur, 24px)) saturate(var(--nav-glass-saturate, 140%));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.26s ease;
  z-index: 990;
  isolation: isolate;
  transform: none;
  will-change: opacity;
}

.nav-dropdown-backdrop.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear;
}

/* Full-Width 2-Column Split Dropdown Menu spanning width of the nav bar:
   Maintains identical glass styling (tint, border, highlight, shadow) without redundant
   duplicate backdrop blur since the entire page is already blurred by .nav-dropdown-backdrop.
   GPU-composited opacity and transform for locked 120fps performance. */
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--nav-glass-bg, rgba(16, 16, 16, 0.60));
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: var(--nav-box-radius, 4px);
  box-shadow: var(--nav-glass-shadow-menu, 0 24px 60px rgba(0, 0, 0, 0.75)) !important;
  padding: var(--nav-dropdown-padding-top, 24px) var(--nav-dropdown-padding-x, 22px) var(--nav-dropdown-padding-bottom, 22px) var(--nav-dropdown-padding-x, 22px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
  transform-origin: top center;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.24s ease;
  will-change: opacity, transform;
  z-index: 1000;
  isolation: isolate;
  text-transform: none !important;
}

/* Maintain navbar pill blur to avoid jarring flash or repaint stall on menu open/close */
body.nav-dropdown-active .nav-modular-box {
  /* Navbar pill keeps its natural blur without interference */
}

/* Prevent site scrolling when dropdown menu is active, preserving layout scrollbar space */
html {
  scrollbar-gutter: stable;
}

html.nav-dropdown-active,
body.nav-dropdown-active {
  overflow: hidden !important;
  touch-action: none !important;
}

.nav-dropdown-menu {
  touch-action: auto;
}

/* Fallback for browsers without backdrop-filter support */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-modular-box {
    background: var(--nav-glass-fallback-bg, #101010) !important;
  }

  .nav-dropdown-menu {
    background: var(--nav-glass-fallback-bg, #101010) !important;
  }

  .nav-dropdown-backdrop {
    background: rgba(0, 0, 0, 0.75) !important;
  }
}

/* Accessibility: User preference for reduced transparency */
@media (prefers-reduced-transparency: reduce) {
  .nav-modular-box {
    background: var(--nav-glass-fallback-bg, #101010) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
  }

  .nav-dropdown-menu {
    background: var(--nav-glass-fallback-bg, #101010) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
  }

  .nav-dropdown-backdrop {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ==========================================================================
   DESKTOP NAV GLASS (>= 1024px ONLY — mobile keeps the original tokens above)
   - Pill is always blurred (rest tint is light enough that blur reads clearly).
   - isolation: auto on nav ancestors allows the pill to sample and blur page content behind it.
   - Opening the dropdown blurs the whole site with the SAME blur as the pill (--nav-glass-blur).
   - Pill + dropdown darken to --nav-glass-bg-active on top of the blurred site.
   ========================================================================== */
@media (min-width: 1024px) {
  :root {
    --nav-glass-blur: 20px;
    /* <-- TWEAK THIS: ONE blur for the nav pill AND the blurred site (e.g. 14px, 20px, 28px) */
    --nav-glass-saturate: 140%;
    --nav-glass-bg: rgba(16, 16, 16, 0.42);
    /* <-- TWEAK THIS: Nav pill tint at rest (lower alpha = more see-through, blur shows more) */
    --nav-glass-bg-active: rgba(8, 8, 8, 0.74);
    /* <-- TWEAK THIS: Nav pill + dropdown tint when menu is open (darker than rest) */
    --nav-site-dim-bg: rgba(4, 4, 6, 0.30);
    /* <-- TWEAK THIS: Dim over the blurred site (raise toward 0.80 for a near-black site) */
  }

  /* Remove backdrop-root boundaries so nav pill can sample and blur the content behind it.
     Desktop Header: Permanently static 100vh overlay container (pointer-events: none)
     so the compositor layer boundary never shifts between rest and open. */
  .hero-top-nav,
  .site-nav-top {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    pointer-events: none !important;
    transition: none !important;
    isolation: auto !important;
    will-change: auto !important;
    padding: 0 !important;
  }

  /* Desktop Nav Modular Box: Permanently static at top: 25px, centered at left: 50%, transform: translateX(-50%).
     Zero position or transform delta between resting and active states ensures rock-solid static navbar. */
  .hero-top-nav .nav-modular-box,
  .hero-top-nav.nav-theme-dark .nav-modular-box,
  .hero-top-nav.nav-theme-light .nav-modular-box,
  .site-nav-top .nav-modular-box,
  .nav-modular-box {
    position: absolute !important;
    top: var(--nav-box-top, 25px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    pointer-events: auto !important;
    width: var(--nav-box-width, 480px) !important;
    margin: 0 !important;
    will-change: auto !important;
    isolation: auto !important;
    box-shadow: none !important;
    background: var(--nav-glass-bg, rgba(16, 16, 16, 0.42)) !important;
    backdrop-filter: blur(var(--nav-glass-blur, 20px)) saturate(var(--nav-glass-saturate, 140%)) !important;
    -webkit-backdrop-filter: blur(var(--nav-glass-blur, 20px)) saturate(var(--nav-glass-saturate, 140%)) !important;
    transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Full-site backdrop blurs using the SAME blur token as the nav pill */
  .nav-dropdown-backdrop {
    background: var(--nav-site-dim-bg, rgba(4, 4, 6, 0.30));
    backdrop-filter: blur(var(--nav-glass-blur, 20px)) saturate(var(--nav-glass-saturate, 140%));
    -webkit-backdrop-filter: blur(var(--nav-glass-blur, 20px)) saturate(var(--nav-glass-saturate, 140%));
    transform: none !important;
    will-change: auto !important;
  }

  /* Pill darkens smoothly when dropdown is deployed. Releases redundant backdrop-filter
     while fullscreen .nav-dropdown-backdrop handles the site blur.
     Position and transform remain 100% IDENTICAL to resting state (zero movement, zero pop). */
  body.nav-dropdown-active .hero-top-nav .nav-modular-box,
  body.nav-dropdown-active .hero-top-nav.nav-theme-dark .nav-modular-box,
  body.nav-dropdown-active .hero-top-nav.nav-theme-light .nav-modular-box,
  body.nav-dropdown-active .site-nav-top .nav-modular-box {
    background: var(--nav-glass-bg-active, rgba(8, 8, 8, 0.74)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Release will-change on hamburger button when open so hover doesn't dirty the compositor layer */
  .nav-hamburger-btn.is-active,
  .nav-hamburger-btn.is-active:hover,
  .nav-hamburger-btn.is-active .hamburger-line,
  .nav-hamburger-btn.is-active:hover .hamburger-line {
    will-change: auto !important;
  }

  /* Dropdown panel sits on top with matching darker tint */
  .nav-dropdown-menu {
    background: var(--nav-glass-bg-active, rgba(8, 8, 8, 0.74)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .nav-dropdown-menu.is-open {
    will-change: auto !important;
    isolation: isolate !important;
  }

  /* Release and collapse background gallery compositor layers while dropdown is open.
     This destroys the separate 3D texture quads (cyan layer boxes) behind the backdrop filter,
     preventing Chromium blur shader quad edge/seam artifacts. */
  body.nav-dropdown-active #f3-content,
  body.nav-dropdown-active .f3-editorial-wrapper,
  body.nav-dropdown-active .f3-scroll-reveal,
  body.nav-dropdown-active .f3-gallery-project-block,
  body.nav-dropdown-active .f3-gallery-row,
  body.nav-dropdown-active .f3-gallery-card-wrap,
  body.nav-dropdown-active .f3-gallery-item,
  body.nav-dropdown-active .f3-gallery-media,
  body.nav-dropdown-active .f3-gallery-img,
  body.nav-dropdown-active .f3-gallery-hairline-divider,
  body.nav-dropdown-active .f3-intro-lockup,
  body.nav-dropdown-active .f3-intro-divider-row,
  body.nav-dropdown-active .f3-featured-tag-row,
  body.nav-dropdown-active .f3-work-card,
  body.nav-dropdown-active .f3-line-inner,
  body.nav-dropdown-active .f3-line-mask,
  body.nav-dropdown-active .f3-contact-action-row,
  body.nav-dropdown-active #f3-cursor-view-tag {
    transition: none !important;
    will-change: auto !important;
    transform: none !important;
    filter: none !important;
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav-modular-box {
      background: var(--nav-glass-fallback-bg, #101010) !important;
    }
    body.nav-dropdown-active .hero-top-nav .nav-modular-box,
    body.nav-dropdown-active .site-nav-top .nav-modular-box,
    .nav-dropdown-menu {
      background: #0a0a0a !important;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .nav-modular-box {
      background: var(--nav-glass-fallback-bg, #101010) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    body.nav-dropdown-active .hero-top-nav .nav-modular-box,
    body.nav-dropdown-active .site-nav-top .nav-modular-box,
    .nav-dropdown-menu {
      background: #0a0a0a !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
  }
}

.nav-dropdown-menu * {
  text-transform: none !important;
}

.nav-dropdown-menu .type-mono-a,
.nav-dropdown-menu .nav-dropdown-clock-wrap,
.nav-dropdown-menu .nav-dropdown-clock,
.nav-dropdown-menu .nav-row-count,
.nav-dropdown-menu .nav-ongoing-badge {
  text-transform: uppercase !important;
}

.nav-dropdown-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition: opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear;
}

/* 2-Column Grid Container - Centered 50/50 Split */
.nav-dropdown-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

/* Left Column: Navigation Links */
.nav-dropdown-col-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  padding-right: 20px;
}

.nav-dropdown-row-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  text-align: left;
  padding: 3px 0;
  text-decoration: none;
  color: #faf9fc;
  font-family: var(--font-display, "Neue Haas Grotesk Display Pro", "Inter", -apple-system, sans-serif);
  font-size: var(--nav-dropdown-item-font-size, 16.5px);
  font-weight: var(--nav-dropdown-item-font-weight, 400);
  letter-spacing: calc(-0.02em - 0.7px);
  text-transform: none !important;
  opacity: 1;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dim unhovered items when left column is hovered */
.nav-dropdown-col-left:hover .nav-dropdown-row-link {
  color: #626262;
  opacity: 0.35;
}

.nav-dropdown-col-left .nav-dropdown-row-link:hover,
.nav-dropdown-col-left .nav-dropdown-row-link:focus-visible,
.nav-dropdown-row-link:hover,
.nav-dropdown-row-link:focus-visible {
  color: #faf9fc !important;
  opacity: 1 !important;
}

.nav-dropdown-row-link[aria-disabled="true"],
.nav-dropdown-row-link[data-cursor] {
  cursor: not-allowed;
}

/* Rolling Text Flip Container: safe padding avoids font glyph overhang cropping */
.nav-dropdown-row-link .nav-row-roll {
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
  height: 1.35em;
  line-height: 1.35em;
  vertical-align: middle;
  padding-right: 8px;
  padding-bottom: 2px;
  margin-right: -8px;
  margin-bottom: -2px;
}

.nav-dropdown-row-link .nav-row-roll-inner {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.nav-dropdown-row-link .nav-row-roll:not([data-flip-initialized="true"]) .nav-row-roll-inner {
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-flip-initialized="true"] .nav-row-roll-inner,
[data-flip-initialized="true"] .text-flip-inner {
  transition: none !important;
}

.nav-dropdown-row-link .nav-row-roll-inner .nav-row-text {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: 1.35em;
  line-height: 1.35em;
  text-align: left;
  color: inherit;
  white-space: nowrap;
  padding-right: 8px;
  text-transform: none !important;
  transition: color 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-dropdown-row-link:hover .nav-row-roll-inner .nav-row-text,
.nav-dropdown-row-link:focus-visible .nav-row-roll-inner .nav-row-text {
  color: #faf9fc !important;
  opacity: 1 !important;
}

/* Flip text once on hover (fallback if not initialized by Motion.dev) */
.nav-dropdown-row-link:hover .nav-row-roll:not([data-flip-initialized="true"]) .nav-row-roll-inner,
.nav-dropdown-row-link:focus-visible .nav-row-roll:not([data-flip-initialized="true"]) .nav-row-roll-inner {
  transform: translateY(-50%);
}

/* Row Counter Badge (e.g. (06) at top right of Works) */
.nav-dropdown-row-link .nav-row-count {
  font-family: var(--type-mono-a-font, var(--font-mono, 'PP Supply Mono', monospace));
  font-size: var(--type-mono-a-size, 11px);
  font-weight: 500;
  letter-spacing: var(--type-mono-a-spacing, 0.5px);
  text-transform: uppercase !important;
  color: #faf9fc;
  display: inline-block;
  vertical-align: top;
  margin-top: -5px;
  margin-left: 3px;
  line-height: 1;
  transition: color 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-dropdown-col-left:hover .nav-dropdown-row-link .nav-row-count {
  color: #626262;
  opacity: 0.35;
}

.nav-dropdown-row-link:hover .nav-row-count,
.nav-dropdown-row-link:focus-visible .nav-row-count {
  color: #faf9fc !important;
  opacity: 1 !important;
}

/* Modern :has precision: only grey out items when an actual link is hovered */
@supports selector(:has(*)) {

  .nav-dropdown-col-left:has(.nav-dropdown-row-link:hover) .nav-dropdown-row-link:not(:hover),
  .nav-dropdown-col-left:has(.nav-dropdown-row-link:focus-visible) .nav-dropdown-row-link:not(:focus-visible) {
    color: #626262 !important;
    opacity: 0.35 !important;
  }

  .nav-dropdown-col-left:has(.nav-dropdown-row-link:hover) .nav-dropdown-row-link:not(:hover) .nav-row-count,
  .nav-dropdown-col-left:has(.nav-dropdown-row-link:focus-visible) .nav-dropdown-row-link:not(:focus-visible) .nav-row-count {
    color: #626262 !important;
    opacity: 0.35 !important;
  }
}

/* Vertical Dashed Divider (Centered in Middle) */
.nav-dropdown-divider {
  width: 1px;
  border-left: 1px dashed rgba(255, 255, 255, 0.16);
  margin: 0;
}

/* Right Column: Clock, Info & Socials (Always White) */
.nav-dropdown-col-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  text-align: right;
  padding-left: 20px;
}

/* Mobile dropdown clock hidden by default on desktop/laptop */
.nav-dropdown-mobile-clock {
  display: none;
}

/* Top Right Clock - White at all times (layout & paint contained to isolate tick invalidations) */
.nav-dropdown-clock-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--type-mono-a-font, var(--font-mono, 'PP Supply Mono', monospace));
  font-size: var(--type-mono-a-size, 11px);
  font-weight: 400;
  color: #faf9fc;
  letter-spacing: var(--type-mono-a-spacing, 0.5px);
  line-height: 1;
  text-transform: uppercase !important;
  padding-right: 2px;
  contain: layout paint;
  will-change: contents;
}

.nav-dropdown-clock {
  letter-spacing: var(--type-mono-a-spacing, 0px);
  line-height: 1;
  display: inline-block;
}

.nav-dropdown-clock-wrap .nav-clock-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  background-color: #faf9fc;
  border-radius: 0;
  box-shadow: none;
  flex-shrink: 0;
  transform: translateY(-0.75px);
}

/* Middle / Bottom Info Stack - White at all times */
.nav-dropdown-info-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  margin-top: auto;
  padding-top: 24px;
}

.nav-dropdown-ongoing {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 3px;
}

.nav-ongoing-line {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  font-family: var(--font-sans, "Inter", -apple-system, sans-serif);
  font-size: var(--nav-dropdown-info-font-size, 14px);
  font-weight: 400;
  color: #faf9fc;
  letter-spacing: calc(-0.01em - 0.7px);
  line-height: 1;
  text-transform: none !important;
  opacity: 1;
  white-space: nowrap;
  padding-right: 2px;
}

.nav-ongoing-text {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* The old box badge for "01" */
.nav-ongoing-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #161616;
  border: none;
  color: #faf9fc;
  font-family: var(--type-mono-light-font, 'Supply-Light', 'PP Supply Mono', monospace);
  font-size: var(--type-mono-a-size, 11px);
  font-weight: var(--type-mono-light-weight, 300);
  letter-spacing: var(--type-mono-a-spacing, 0.5px);
  padding: 0 var(--rect-btn-padx, 8px);
  height: calc(var(--rect-btn-height, 22px) + 1px);
  min-width: var(--rect-btn-min-width, auto);
  box-sizing: border-box;
  border-radius: 0;
  line-height: 1;
  text-transform: uppercase !important;
}

.nav-info-email,
.nav-info-phone {
  font-family: var(--font-sans, "Inter", -apple-system, sans-serif);
  font-size: var(--nav-dropdown-info-font-size, 14px);
  font-weight: 400;
  color: #faf9fc;
  text-decoration: none;
  letter-spacing: calc(-0.01em - 0.7px);
  line-height: 1.35;
  text-transform: none !important;
  opacity: 1;
  transition: transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {

  .nav-info-email:hover,
  .nav-info-phone:hover,
  .nav-info-email:focus-visible,
  .nav-info-phone:focus-visible {
    color: #faf9fc !important;
    opacity: 1 !important;
    transform: translateY(-1px);
  }
}

.nav-info-email:active,
.nav-info-phone:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}

/* Socials Row - White at all times */
.nav-dropdown-socials {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 6px;
}

.nav-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #faf9fc;
  text-decoration: none;
  opacity: 1;
  transition: transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {

  .nav-social-icon:hover,
  .nav-social-icon:focus-visible {
    opacity: 1 !important;
    color: #faf9fc !important;
    transform: translateY(-1px);
  }
}

.nav-social-icon:active {
  transform: scale(0.9);
  transition-duration: 0.08s;
}

.nav-social-icon svg {
  width: 14px;
  height: 14px;
  display: block;
  stroke: #ffffff;
  color: #faf9fc;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-social-icon .social-icon-txt {
  font-family: var(--font-display, "Neue Haas Grotesk Display Pro", "Inter", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: calc(-0.02em - 0.7px);
  line-height: 1;
  color: #faf9fc;
}

@media (max-width: 500px) {
  .nav-dropdown-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .nav-dropdown-divider {
    display: none;
  }

  .nav-dropdown-col-left {
    padding-right: 0;
  }

  .nav-dropdown-col-right {
    padding-left: 0;
    align-items: flex-start;
    text-align: left;
  }

  .nav-dropdown-clock-wrap {
    justify-content: flex-start;
  }

  .nav-dropdown-info-stack {
    align-items: flex-start;
    padding-top: 10px;
  }

  .nav-dropdown-socials {
    justify-content: flex-start;
  }
}

/* Bottom-Centered Floating 'Start a project' Call Button (Syncs with Dropdown) */
.nav-floating-cta {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%) translateY(16px) scale(0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  min-width: 46px;
  padding: 0 15px;
  background: #f4f0ea;
  color: #0e0e11;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  cursor: pointer;
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  text-transform: none !important;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease;
  will-change: opacity, transform;
  box-sizing: border-box;
}

/* Make visible when dropdown menu is active */
body.nav-dropdown-active .nav-floating-cta,
.nav-floating-cta.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {

  .nav-floating-cta:hover,
  .nav-floating-cta:focus-visible {
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.75), 0 4px 12px rgba(255, 255, 255, 0.15);
    padding: 0 24px;
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
      transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
      background 0.5s ease,
      box-shadow 0.5s ease,
      padding 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  }
}

.nav-floating-cta:active {
  transform: translateX(-50%) translateY(0px) scale(0.97);
  transition-duration: 0.15s;
}

.nav-floating-cta .floating-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  max-width: 16px;
  color: #0e0e11;
  flex-shrink: 0;
  opacity: 1;
  transform: scale(1);
  overflow: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .nav-floating-cta:hover .floating-cta-icon,
  .nav-floating-cta:focus-visible .floating-cta-icon {
    opacity: 0;
    max-width: 0;
    transform: scale(0.7);
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
      max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

.nav-floating-cta .floating-cta-text {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--type-aero-f-font, var(--font-primary, 'AT Aero', sans-serif));
  font-size: var(--type-aero-f-size, 16px);
  font-weight: var(--type-aero-f-weight, 400);
  letter-spacing: var(--type-aero-f-spacing, -0.3px);
  color: #0e0e11;
  text-transform: none !important;
  text-align: center;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  margin-left: 0;
  transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {

  .nav-floating-cta:hover .floating-cta-text,
  .nav-floating-cta:focus-visible .floating-cta-text {
    max-width: 160px;
    opacity: 1;
    margin-left: 0;
    transition: max-width 0.6s cubic-bezier(0.25, 1, 0.5, 1),
      opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1) 0.06s;
  }
}

/* Nam Pham Brand Mark Logo - Prominent & Aligned on Exact Same Visual Level */
.nav-brand-logo {
  height: var(--nav-logo-size, 32px);
  width: auto;
  max-width: none;
  display: inline-block;
  vertical-align: middle;
  color: #faf9fc;
  fill: currentColor;
  flex-shrink: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  user-select: none;
}

.site-nav-top .nav-brand-logo {
  height: var(--nav-logo-size, 32px);
  width: auto;
  max-width: none;
}

.nav-modular-box .nav-box-brand,
.site-nav-top .hero-nav-brand {
  font-family: var(--font-display, var(--font-sans)) !important;
  color: #faf9fc !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: opacity 0.18s ease;
  padding: 0;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  height: auto !important;
  min-height: 25px;
  cursor: pointer;
  transform: translate(var(--nav-logo-offset-x, 0px), var(--nav-logo-offset-y, 0px));
}

.nav-modular-box .nav-box-brand:hover,
.site-nav-top .hero-nav-brand:hover {
  opacity: 0.8;
}

.nav-modular-box .brand-roll {
  display: inline-block !important;
  position: relative !important;
  overflow: hidden !important;
  height: var(--nav-box-brand-size, 17px) !important;
  line-height: var(--nav-box-brand-size, 17px) !important;
  vertical-align: top !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-modular-box .brand-roll-inner {
  display: block !important;
  height: calc(var(--nav-box-brand-size, 17px) * 2) !important;
  transition: transform 0.44s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-modular-box .brand-roll-inner span {
  display: block !important;
  height: var(--nav-box-brand-size, 17px) !important;
  line-height: var(--nav-box-brand-size, 17px) !important;
  text-align: center !important;
  font-size: var(--nav-box-brand-size, 17px) !important;
  font-weight: var(--nav-box-brand-weight, 700) !important;
  letter-spacing: var(--nav-box-brand-letter-spacing, 0px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-modular-box .brand-roll-p {
  transform: translateY(var(--nav-box-brand-p-offset-y, -1px)) !important;
}

.nav-modular-box .brand-slash {
  display: inline-block !important;
  height: var(--nav-box-brand-size, 17px) !important;
  line-height: var(--nav-box-brand-size, 17px) !important;
  font-size: var(--nav-box-brand-size, 17px) !important;
  font-weight: var(--nav-box-brand-weight, 700) !important;
  margin: 0 var(--nav-box-brand-slash-gap, 1px) !important;
  vertical-align: top !important;
}

.nav-modular-box .brand-r {
  font-family: var(--font-sans) !important;
  font-size: var(--nav-box-brand-r-size, 9px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  display: inline-block !important;
  vertical-align: top !important;
  margin-top: 1px !important;
  margin-left: var(--nav-box-brand-r-gap, 2px) !important;
  color: #faf9fc !important;
}

/* N rolls UP on hover */
.nav-modular-box .brand-roll.roll-up .brand-roll-inner {
  transform: translateY(0) !important;
}

.nav-modular-box .nav-box-brand:hover .brand-roll.roll-up .brand-roll-inner {
  transform: translateY(calc(-1 * var(--nav-box-brand-size, 17px))) !important;
}

/* P rolls DOWN on hover */
.nav-modular-box .brand-roll.roll-down .brand-roll-inner {
  transform: translateY(calc(-1 * var(--nav-box-brand-size, 17px))) !important;
}

.nav-modular-box .nav-box-brand:hover .brand-roll.roll-down .brand-roll-inner {
  transform: translateY(0) !important;
}

.nav-modular-box .nav-box-brand:hover {
  opacity: 0.95;
}

@media (max-width: 768px) {

  .hero-top-nav,
  .site-nav-top {
    top: 14px;
  }

  .nav-modular-box {
    gap: 16px;
    padding: 10px 16px;
    max-width: calc(100vw - 28px);
  }

  .nav-modular-box .nav-box-link {
    font-size: 12px !important;
  }

  .nav-modular-box .nav-box-brand {
    font-size: 14px !important;
  }
}

/* ==========================================================================
   Geometric Blueprint Grid Overlay (Wireframe vector lines)
   ========================================================================== */
.hero-blueprint-container {
  display: none;
  position: absolute;
  top: var(--hero-margin, 25px);
  left: var(--hero-margin, 25px);
  right: var(--hero-margin, 25px);
  bottom: var(--hero-margin, 25px);
  pointer-events: none;
  z-index: 2;
  opacity: var(--blueprint-opacity, 0);
}

.hero-blueprint-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.hero-blueprint-svg line {
  stroke: rgba(255, 255, 255, var(--grid-opacity, 0));
}

.hero-grid-square {
  display: none;
  position: absolute;
  width: var(--hero-square-size, 7px);
  height: var(--hero-square-size, 7px);
  background-color: var(--hero-square-color, #ffffff);
  bottom: var(--hero-square-bottom, 0px);
  z-index: 3;
  opacity: var(--grid-square-opacity, 0);
}

.hero-square-center {
  left: calc(50% + var(--hero-square-offset-x, 0px));
  transform: translateX(-50%);
}

/* ==========================================================================
   Center Main Visual: Wide ASCII Ribbon Banner + 4 Corner Squares
   ========================================================================== */
:root {
  --hero-margin: 25px;
  --grid-opacity: 0;
  --hero-tv-width: 910px;
  /* Width on desktop */
  --hero-tv-height: 310px;
  /* Height on desktop */
  --hero-tv-max-width: calc(100vw - (var(--hero-margin, 25px) * 2));
  --hero-tv-max-height: calc(100vh - (var(--hero-margin, 25px) * 2));
  --hero-tv-top: 51.5%;
  /* Vertical position */
  --hero-tv-left: 50%;
  /* Horizontal position */
  --hero-tv-scale: 1;
  /* Scale multiplier */
  --hero-tv-rect-margin-x: 25px;
  /* Margin on left and right sides when expanded */
  --hero-tv-rect-margin-y: 25px;
  /* Margin on top and bottom sides when expanded */

  /* Corner Squares Sizing & Offsets (7px squares) */
  --corner-square-size: 7px;
  --corner-square-color: #ffffff;
  --corner-slashes-size: 7px;
  --corner-slashes-color: #ffffff;
  --corner-slashes-offset-x: 0px;
  --corner-slashes-offset-y: 0px;
  --corner-tl-x: -16px;
  --corner-tl-y: -16px;
  --corner-tr-x: -16px;
  --corner-tr-y: -16px;
  --corner-bl-x: -16px;
  --corner-bl-y: -16px;
  --corner-br-x: -16px;
  --corner-br-y: -16px;
  --hero-tv-corner-x: 5.2%;
  --hero-tv-corner-y: 11.5%;
  --hero-tv-corner-offset: 15px;
  --hero-bottom-switch-bottom: 25px;

  /* Typography */
  --headline-font-size: 60px;
  --tagline-font-size: 19.5px;
  --tagline-left: calc(50% + 200px);

  /* Hero Element Opacity Controls */
  --hero-viewport-opacity: 1;
  --hero-visual-opacity: 1;
  --hero-canvas-opacity: 1;
  --corner-slashes-opacity: 1;
  --corner-tl-opacity: 1;
  --corner-tr-opacity: 1;
  --corner-bl-opacity: 1;
  --corner-br-opacity: 1;
  --blueprint-opacity: 1;
  --grid-square-opacity: 1;
  --backdrop-opacity: 1;
  --headline-opacity: 1;
  --eyebrow-opacity: 0.45;
  --tagline-opacity: 1;
  --socials-opacity: 1;
  --meta-bar-opacity: 1;
  --nav-box-opacity: 1;
  --cta-opacity: 1;
  --clock-opacity: 1;
}

.hero-center-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  transform: scale(var(--hero-tv-scale, 1));
  transform-origin: center center;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  user-select: none;
  opacity: var(--hero-visual-opacity, 1);
}

.hero-tv-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  will-change: transform;
  transform: scale(var(--hero-ascii-scale, 1)) !important;
  transform-origin: center center;
  background-color: var(--bg, #000000);
  mask-image: none !important;
  -webkit-mask-image: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-tv-wrapper:hover {
  transform: scale(var(--hero-ascii-scale, 1)) !important;
}

.hero-tv-canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  background-color: transparent;
  pointer-events: auto;
  user-select: none;
  opacity: var(--hero-canvas-opacity, 1);
}

/* Edge Vignette Overlay: Smooth black feathering around fullbleed ASCII (Picture 2) */
.hero-vignette-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  background:
    /* Top navbar dark backdrop feather */
    linear-gradient(to bottom, #000000 0%, rgba(0, 0, 0, 0.85) 12%, rgba(0, 0, 0, 0.4) 22%, transparent 35%),
    /* Bottom section transition feather */
    linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0.85) 10%, rgba(0, 0, 0, 0.3) 22%, transparent 35%),
    /* Left and right side fades */
    linear-gradient(to right, #000000 0%, rgba(0, 0, 0, 0.8) 8%, transparent 22%, transparent 78%, rgba(0, 0, 0, 0.8) 92%, #000000 100%),
    /* Soft global cinematic spotlight vignette */
    radial-gradient(ellipse 65% 58% at 50% 50%, transparent 25%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0.95) 90%, #000000 100%);
}

/* Corner elements and CRT framing deactivated for fullbleed hero */
.ascii-corner-slash,
.hero-corner-square {
  display: none !important;
}

/* ==========================================================================
   Top Right: CTA Pill Button + Clock (Stacked)
   ========================================================================== */
.hero-top-right-group {
  position: absolute;
  top: 0;
  right: var(--hero-margin, 25px);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: auto;
}

.hero-cta-btn {
  font-family: var(--type-mono-a-font, var(--font-mono, 'PP Supply Mono', monospace));
  font-size: var(--type-mono-a-size, 11px);
  font-weight: var(--cta-btn-font-weight, 600);
  letter-spacing: var(--type-mono-a-spacing, 0.5px);
  text-transform: uppercase;
  color: #000000;
  background-color: #ffffff;
  padding: 0 var(--cta-btn-padx, 18px);
  height: 30px;
  box-sizing: border-box;
  border-radius: var(--cta-btn-radius, 999px);
  text-decoration: none;
  border: 1px solid #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  overflow: hidden;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.2s ease,
    opacity 0.2s ease;
  opacity: var(--cta-opacity, 1);
}

.hero-cta-btn .cta-roll {
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2em;
  vertical-align: middle;
}

.hero-cta-btn .cta-roll-inner {
  display: flex;
  flex-direction: column;
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.hero-cta-btn .cta-roll-inner span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.2em;
  line-height: 1.2em;
  text-align: center;
  color: #000000;
}

.hero-cta-btn:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #000000;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15);
}

.hero-cta-btn:hover .cta-roll-inner {
  transform: translateY(-50%);
}

.hero-cta-btn:active {
  transform: translateY(0) scale(0.96);
  transition: transform 120ms ease-out;
}

.hero-clock-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--type-mono-a-font, var(--font-mono, 'PP Supply Mono', monospace));
  font-size: var(--type-mono-a-size, 11px);
  font-weight: 500;
  color: #faf9fc;
  letter-spacing: var(--type-mono-a-spacing, 0.5px);
  line-height: 1;
  text-transform: uppercase;
  opacity: var(--clock-opacity, 1);
}

.hero-clock-dot {
  display: inline-block;
  width: 5.5px;
  height: 5.5px;
  background-color: #00ff66 !important;
  border-radius: 50%;
  box-shadow: 0 0 8px #00ff66 !important;
  animation: clockDotPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* ==========================================================================
   Hero Bottom Corner Statements: "Nothing here/" & "/by accident."
   ========================================================================== */
.hero-bottom-text {
  position: absolute;
  bottom: var(--hero-bottom-text-bottom, var(--hero-margin, 25px));
  z-index: 10;
  pointer-events: auto;
  font-family: "AT Aero Retina", "At Aero Retina", "AT Aero", var(--font-sans), -apple-system, sans-serif;
  font-size: var(--hero-bottom-text-size, var(--headline-font-size, 48px));
  font-weight: var(--hero-bottom-text-weight, 400);
  line-height: 1;
  letter-spacing: var(--hero-bottom-text-spacing, calc(-0.02em - 0.7px));
  color: #faf9fc;
  white-space: nowrap;
}

.hero-text-left {
  left: var(--hero-bottom-text-side, var(--hero-margin, 25px));
  text-align: left;
}

.hero-text-right {
  right: var(--hero-bottom-text-side, var(--hero-margin, 25px));
  text-align: right;
}

@media (max-width: 900px) {
  .hero-bottom-text {
    font-size: clamp(24px, 4vw, 36px);
  }
}

/* Hold hero bottom text and switch hidden during page navigation fade or intro loader until reveal */
html.is-navigating-in .hero-bottom-text,
body.is-loading .hero-bottom-text,
html.is-navigating-in .hero-bottom-switch-wrap,
body.is-loading .hero-bottom-switch-wrap {
  opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {

  html.is-navigating-in .hero-bottom-text,
  body.is-loading .hero-bottom-text,
  html.is-navigating-in .hero-bottom-switch-wrap,
  body.is-loading .hero-bottom-switch-wrap {
    opacity: 1 !important;
  }
}

/* ==========================================================================
   Hero Bottom Visual Toggle Switch
   ========================================================================== */
.hero-bottom-switch-wrap {
  position: absolute;
  bottom: var(--hero-bottom-switch-bottom, var(--hero-margin, 25px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: opacity 0.3s ease;
}

.hero-bottom-switch {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}

.hero-bottom-switch.is-disabled,
.hero-bottom-switch[disabled] {
  cursor: not-allowed;
  pointer-events: auto;
}

.hero-bottom-switch:hover .hero-switch-track {
  border-color: rgba(255, 255, 255, 0.25);
}

.hero-bottom-switch:focus-visible .hero-switch-track {
  box-shadow: 0 0 0 2px #000000, 0 0 0 4px rgba(255, 255, 255, 0.5);
}

.hero-switch-track {
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 0;
  background: var(--nav-glass-bg, rgba(16, 16, 16, 0.60));
  backdrop-filter: blur(var(--nav-glass-blur, 16px)) saturate(var(--nav-glass-saturate, 140%));
  -webkit-backdrop-filter: blur(var(--nav-glass-blur, 16px)) saturate(var(--nav-glass-saturate, 140%));
  border: var(--nav-box-border-width, 1px) solid var(--nav-glass-border, rgba(255, 255, 255, 0.10));
  box-shadow: var(--nav-glass-shadow-nav, 0 12px 32px rgba(0, 0, 0, 0.45)), inset 0 1px 0 var(--nav-glass-highlight, rgba(255, 255, 255, 0.06));
  box-sizing: border-box;
  padding: 2px;
  display: flex;
  align-items: center;
  transition: background 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-switch-thumb {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 0;
  background-color: #ffffff;
  transform: translateX(0);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease;
}

/* Checked / ON state (fallback if ever toggled) */
.hero-bottom-switch[aria-checked="true"] .hero-switch-track,
.hero-bottom-switch.is-checked .hero-switch-track {
  border-color: rgba(255, 255, 255, 0.30);
  background: rgba(28, 28, 28, 0.75);
}

.hero-bottom-switch[aria-checked="true"] .hero-switch-thumb,
.hero-bottom-switch.is-checked .hero-switch-thumb {
  transform: translateX(16px);
  background-color: #ffffff;
}

/* Tooltip: Clean pure text */
.hero-switch-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  color: #737373;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 20;
  user-select: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-bottom-switch-wrap:hover .hero-switch-tooltip,
.hero-bottom-switch:focus-visible ~ .hero-switch-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  color: #faf9fc;
}



/* ==========================================================================
   Legacy Bottom Wrappers (Optional)
   ========================================================================== */
.hero-bottom-headline-wrap {
  position: absolute;
  bottom: var(--headline-bottom, var(--hero-margin, 25px));
  left: var(--headline-left, var(--hero-margin, 25px));
  z-index: 10;
  pointer-events: auto;
  text-align: left;
  max-width: var(--headline-max-width, 520px);
  opacity: var(--headline-opacity, 1);
}

.hero-eyebrow {
  font-family: var(--type-mono-a-font, var(--font-mono, 'PP Supply Mono', monospace));
  font-size: var(--type-mono-a-size, 11px);
  font-weight: var(--eyebrow-font-weight, 500);
  letter-spacing: var(--type-mono-a-spacing, 0.5px);
  text-transform: uppercase;
  color: var(--eyebrow-color, rgba(255, 255, 255, 0.45));
  margin-bottom: var(--eyebrow-margin-bottom, 8px);
  display: block;
  opacity: var(--eyebrow-opacity, 0.45);
}

.hero-bottom-headline {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: var(--headline-font-size, clamp(34px, 4vw, 56px));
  font-weight: var(--headline-font-weight, 600);
  line-height: var(--headline-line-height, 0.94);
  letter-spacing: var(--headline-letter-spacing, calc(-0.035em - 0.7px));
  color: #faf9fc;
  text-transform: uppercase;
  margin: 0;
}

/* ==========================================================================
   Bottom Center-Right: 2-Line Tagline right of middle bottom square
   ========================================================================== */
.hero-center-tagline {
  position: absolute;
  bottom: var(--tagline-bottom, var(--hero-margin, 25px));
  left: var(--tagline-left, calc(50% + 24px));
  z-index: 10;
  pointer-events: none;
  max-width: var(--tagline-max-width, 290px);
  text-align: left;
  opacity: var(--tagline-opacity, 1);
}

.hero-center-tagline p {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: var(--tagline-font-size, 13px);
  font-weight: var(--tagline-font-weight, 400);
  line-height: var(--tagline-line-height, 1.4);
  letter-spacing: var(--tagline-letter-spacing, calc(0em - 0.7px));
  color: var(--tagline-color, #ffffff);
  margin: 0;
}

/* ==========================================================================
   Bottom Right: Stacked Social List (Right-Aligned)
   ========================================================================== */
.hero-bottom-socials {
  position: absolute;
  bottom: var(--hero-margin, 25px);
  right: var(--hero-margin, 25px);
  z-index: 10;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  opacity: var(--socials-opacity, 1);
}

.hero-bottom-socials a {
  font-family: var(--type-mono-a-font, var(--font-mono, 'PP Supply Mono', monospace));
  font-size: var(--type-mono-a-size, 11px);
  font-weight: 500;
  letter-spacing: var(--type-mono-a-spacing, 0.5px);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.18s ease;
  line-height: 1.3;
}

.hero-bottom-socials a:hover {
  color: #faf9fc;
}

@media (max-width: 768px) {
  .ascii-corner-slash {
    font-size: 22px;
  }

  .ascii-corner-tl {
    top: -12px;
    left: -8px;
  }

  .ascii-corner-tr {
    top: -12px;
    right: -8px;
  }

  .ascii-corner-bl {
    bottom: -12px;
    left: -8px;
  }

  .ascii-corner-br {
    bottom: -12px;
    right: -8px;
  }

  .hero-bottom-headline {
    font-size: clamp(24px, 6.5vw, 32px);
  }

  .hero-center-tagline {
    display: none;
  }
}

/* ==========================================================================
   Hero Editorial Mid Metadata ("01/" Left, "INTRO" Right)
   ========================================================================== */
.hero-mid-meta-bar {
  position: absolute;
  top: 50%;
  left: var(--hero-margin, 25px);
  right: var(--hero-margin, 25px);
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  opacity: var(--meta-bar-opacity, 1);
}

.hero-meta-index,
.hero-meta-tag {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.1px !important;
  text-transform: uppercase;
}

/* Secondary / Rolling Brand Lockup */
.legacy-nav-brand {
  font-family: var(--font-nav);
  font-weight: var(--nav-font-weight, 500);
  font-size: var(--nav-font-size, 14px);
  line-height: var(--nav-line-height, 16px);
  letter-spacing: var(--nav-letter-spacing, -0.8px);
  text-transform: uppercase;
  color: #faf9fc;
  text-decoration: none;
  display: inline-flex;
  align-items: flex-start;
}

.site-nav-top .hero-nav-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
}

body.is-loading .brand-r {
  opacity: 0;
  transform: scale(0.2);
}

body.loader-revealed .brand-r,
html.skip-intro .brand-r {
  opacity: 0.9;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .brand-r {
    transition: none !important;
    transform: none !important;
    opacity: 0.9 !important;
  }
}

.brand-roll,
.nav-roll {
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
  height: var(--nav-line-height, 14.5px);
  line-height: var(--nav-line-height, 14.5px);
  vertical-align: top;
}

.site-nav-top .brand-roll-inner,
.site-nav-top .nav-roll-inner {
  display: flex;
  flex-direction: column;
  transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.site-nav-top .brand-roll-inner span,
.site-nav-top .nav-roll-inner span {
  display: block;
  height: var(--nav-line-height, 14.5px);
  line-height: var(--nav-line-height, 14.5px);
  text-align: center;
}

/* N rolls UP on hover */
.site-nav-top .brand-roll.roll-up .brand-roll-inner,
.site-nav-top .nav-roll.roll-up .nav-roll-inner {
  transform: translateY(0);
}

.site-nav-top .hero-nav-brand:hover .brand-roll.roll-up .brand-roll-inner,
.site-nav-top .hero-nav-link:hover .nav-roll.roll-up .nav-roll-inner {
  transform: translateY(-50%);
}

/* P rolls DOWN on hover */
.site-nav-top .brand-roll.roll-down .brand-roll-inner,
.site-nav-top .nav-roll.roll-down .nav-roll-inner {
  transform: translateY(-50%);
}

.site-nav-top .hero-nav-brand:hover .brand-roll.roll-down .brand-roll-inner,
.site-nav-top .hero-nav-link:hover .nav-roll.roll-down .nav-roll-inner {
  transform: translateY(0);
}

.nav-roll-static {
  display: inline-block;
  line-height: var(--nav-line-height, 14.5px);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {

  .brand-roll-inner,
  .nav-roll-inner {
    transition: none !important;
    transform: none !important;
  }

  .brand-roll.roll-down .brand-roll-inner,
  .nav-roll.roll-down .nav-roll-inner {
    transform: translateY(-50%) !important;
  }
}

.hero-nav-stack {
  display: flex;
  flex-direction: column;
  gap: var(--nav-stack-gap, 0px);
  line-height: var(--nav-line-height, 14.5px);
}

.hero-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #faf9fc;
  text-decoration: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.hero-nav-link:hover {
  color: #faf9fc;
  opacity: 0.85;
}

/* Pop-up square indicator removed on nav bar */
.hero-nav-link::before {
  display: none !important;
  content: none !important;
}

/* Global Scrollbar Suppression */
html,
body {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* ==========================================================================
   Hero Center Viewport (Full-Bleed Cinematic Blacklead Experience)
   ========================================================================== */
.hero-center-viewport {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background-color: var(--bg, #030303);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: var(--hero-viewport-opacity, 1);
  transition: var(--transition-theme);
}


/* Full-bleed Pure Black Backdrop */
.hero-backdrop-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--bg, #030303);
  opacity: var(--backdrop-opacity, 1);
  transition: var(--transition-theme);
}

.hero-backdrop-duotone {
  display: none;
}

.hero-backdrop-vignette {
  display: none;
}

/* ==========================================================================
   Upper-Mid Featured Title & Metadata
   ========================================================================== */
.hero-upper-mid {
  position: absolute;
  top: var(--vd-featured-top, 130px);
  left: var(--vd-featured-left, 48px);
  right: var(--vd-featured-left, 48px);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}

.hero-featured-headline {
  flex: 1;
}

.hero-featured-title {
  font-family: var(--font-sans);
  font-size: var(--vd-featured-font-size, 78px);
  font-weight: 500;
  line-height: var(--vd-featured-line-height, 0.95);
  letter-spacing: -1.9px;
  color: #faf9fc;
  margin: 0;
  text-transform: capitalize;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.hero-featured-meta {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.5vw, 48px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  padding-bottom: 8px;
}

.hero-featured-meta .meta-item {
  display: inline-flex;
  align-items: center;
}



/* ==========================================================================
   Hero Bottom Bar (Headline + Description + Showreel Card)
   ========================================================================== */
/* ==========================================================================
   Hero Bottom Bar (Coordinates + Live GMT+7 Clock with pulsating green dot)
   ========================================================================== */
.hero-bottom-bar {
  position: absolute;
  bottom: var(--hero-margin, 25px);
  left: var(--hero-margin, 25px);
  right: var(--hero-margin, 25px);
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: auto;
}

.hero-location-left,
.hero-location-info {
  display: inline-flex;
  align-items: center;
}

.hero-location-text {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: #faf9fc;
  text-transform: uppercase;
  line-height: 1;
}

.hero-clock-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: #faf9fc;
  letter-spacing: -0.2px;
  line-height: 1;
}

.hero-clock-right {
  margin-left: auto;
  text-align: right;
}

.hero-clock-dot {
  display: inline-block;
  width: 5.5px;
  height: 5.5px;
  background-color: #00ff66;
  border-radius: 50%;
  box-shadow: 0 0 7px rgba(0, 255, 102, 0.85), 0 0 2px #00ff66;
  flex-shrink: 0;
  vertical-align: middle;
  transform: translateY(-0.75px);
  animation: pulse-online-dot 2.4s ease-in-out infinite;
}

.hero-lang-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer !important;
  padding: 2px 4px;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  position: relative;
}

.hero-lang-btn:last-child {
  padding-right: 0;
  margin-right: 0;
}

.hero-lang-btn:hover {
  color: rgba(255, 255, 255, 0.85);
}

.hero-lang-btn.is-active,
.hero-lang-btn.active {
  color: #faf9fc;
  font-weight: 500;
}

.hero-lang-btn.is-active::after,
.hero-lang-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 4px;
  right: 4px;
  height: 1px;
  background-color: #ffffff;
}

.hero-lang-divider {
  color: rgba(255, 255, 255, 0.25);
  font-size: 12px;
  font-weight: 400;
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
@media (max-width: 1024px) {
  .nav-center-group {
    gap: 20px;
  }

  .hero-bottom-bar {
    grid-template-columns: 1fr 1fr;
  }

  .hero-showreel-card {
    display: none;
  }
}

@media (max-width: 768px) {

  .hero-top-nav,
  .site-nav-top {
    padding: 12px 16px;
  }

  .nav-center-group {
    display: none;
  }

  .hero-upper-mid {
    top: 74px;
    left: 16px;
    right: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .hero-featured-title {
    font-size: clamp(2.2rem, 9vw, 3.4rem);
  }



  .hero-bottom-bar {
    bottom: 24px;
    left: 16px;
    right: 16px;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hero-bottom-statement {
    font-size: clamp(1.8rem, 7.5vw, 2.8rem);
  }

  .hero-bottom-desc {
    font-size: 13px;
    max-width: 100%;
  }
}

/* ==========================================================================
   Reduced Motion — Respect prefers-reduced-motion: reduce
   Kill non-essential animations; keep structural transitions minimal.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  /* Kill clock dot pulse */
  .nav-dropdown-clock-wrap .nav-clock-dot {
    animation: none;
    transform: scale(1);
    opacity: 1;
  }

  /* Snap the dropdown menu open / closed instantly */
  .nav-dropdown-menu,
  .nav-dropdown-menu.is-open {
    transition: none;
  }

  /* Snap the dropdown grid nudge */
  .nav-dropdown-grid {
    transition: none;
  }

  /* Snap hover text-flip in dropdown */
  .nav-dropdown-row-link .nav-row-roll-inner {
    transition: none;
  }

  /* Kill nav-link roll animations */
  .nav-modular-box .brand-roll-inner {
    transition: none !important;
  }

  /* Snap floating CTA reveal */
  .nav-floating-cta,
  .nav-floating-cta .floating-cta-text,
  .nav-floating-cta .floating-cta-icon {
    transition: opacity 0.1s ease !important;
  }

  /* Kill page-transition curtain animation */
  .page-transition-curtain {
    transition: none !important;
  }

  /* Kill hero backdrop / atmospheric transitions */
  .nav-dropdown-backdrop {
    transition: opacity 0.15s ease;
  }

  /* Kill social icon hover lift */
  .nav-social-icon:active,
  .nav-info-email:active,
  .nav-info-phone:active {
    transform: none;
    transition: none;
  }
}