/* ==========================================================================
   MOBILE & TABLET RESPONSIVE OVERRIDES (css/responsive.css)
   ==========================================================================
   Scope & Isolation Rules (RULE 7):
   - Strictly isolated to viewport widths < 1024px.
   - Never alter desktop tokens, desktop grid metrics, or >= 1024px layout rules.
   - Contains mobile navigation controls, card stack collapses, and touch targets.
   ========================================================================== */

/* ==========================================================================
   Mobile-Only Lockout Overlay Deactivated (< 1024px)
   ========================================================================== */

.mobile-lockout-overlay {
  display: none !important;
}

#site-root {
  display: contents;
}

:root {
  /* ==========================================================================
     MOBILE DROPDOWN MENU MANUAL CONTROLS:
     Adjust redirection link gaps, backdrop darkness & position of ongoing projects
     ========================================================================== */
  --mobile-nav-link-font-size: 30px;
  /* <-- TWEAK THIS: Text size of dropdown navigation links (e.g. 30px, 34px, 38px, clamp(32px, 8.5vw, 36px)) */
  --mobile-nav-link-gap: 5px;
  /* <-- TWEAK THIS: Spacing/gap between each navigation link */
  --mobile-nav-link-line-height: 1.1;
  /* <-- TWEAK THIS: Line height of navigation links */
  --mobile-nav-link-letter-spacing: -0.02em;
  /* <-- TWEAK THIS: Letter spacing of navigation links */
  --mobile-nav-link-padding-y: 0px;
  /* <-- TWEAK THIS: Top & bottom padding of each link */
  --mobile-nav-top-spacing: 109px;
  /* <-- TWEAK THIS: Top spacing (navbar bottom ~71px + 25px additional spacing) */
  --mobile-nav-info-margin-bottom: 25px;
  /* <-- TWEAK THIS: Distance from bottom of screen */
  --mobile-nav-info-margin-right: 25px;
  /* <-- TWEAK THIS: Distance from right of screen */
  --mobile-nav-backdrop-bg: rgba(0, 0, 0, 0.80);
  /* <-- TWEAK THIS: Revelatio-style blur & darken background */
  --mobile-nav-backdrop-blur: 20px;
  /* <-- TWEAK THIS: Backdrop blur intensity */
  --nav-logo-mobile-size: 30px;
  /* <-- TWEAK THIS: Height/size of logo in mobile nav bar (e.g. 24px, 28px, 32px) */
  --nav-logo-mobile-width: auto;
  /* <-- TWEAK THIS: Width of logo (auto scales proportionally) */
  --mobile-nav-ongoing-font-size: 14.5px;
  /* <-- TWEAK THIS: Text size of 'Ongoing projects' in mobile menu (e.g. 13px, 14px, 14.5px, 15px) */
  --mobile-nav-clock-font-size: 12px;
  /* <-- TWEAK THIS: Text size of live studio clock in mobile menu (e.g. 11px, 12px, 13px) */
}

/* ==========================================================================
   Mobile Navigation Bar & Hamburger Dropdown (< 1024px)
   Desktop/Laptop viewport remains 100% independent and unaffected
   ========================================================================== */
@media (max-width: 1023.98px) {

  /* ==========================================================================
     Standardized Mobile Typography Presets
     Dynamically linked to manual controls in css/typography.css
     ========================================================================== */
  :root {
    /* At Aero Type A */
    --type-aero-a-size: var(--type-aero-a-mobile-size, var(--type-aero-a-size-mobile, 34.4px));
    --type-aero-a-line: var(--type-aero-a-mobile-line, var(--type-aero-a-line-mobile, 39.2px));
    --type-aero-a-spacing: var(--type-aero-a-mobile-spacing, var(--type-aero-a-spacing-mobile, -1.6px));

    /* At Aero Type B */
    --type-aero-b-size: var(--type-aero-b-mobile-size, var(--type-aero-b-size-mobile, 24px));
    --type-aero-b-line: var(--type-aero-b-mobile-line, var(--type-aero-b-line-mobile, 28px));
    --type-aero-b-spacing: var(--type-aero-b-mobile-spacing, var(--type-aero-b-spacing-mobile, -0.8px));

    /* At Aero Type C */
    --type-aero-c-size: var(--type-aero-c-mobile-size, var(--type-aero-c-size-mobile, 16px));
    --type-aero-c-line: var(--type-aero-c-mobile-line, var(--type-aero-c-line-mobile, 22px));
    --type-aero-c-spacing: var(--type-aero-c-mobile-spacing, var(--type-aero-c-spacing-mobile, -0.96px));

    /* At Aero Type D */
    --type-aero-d-size: var(--type-aero-d-mobile-size, var(--type-aero-d-size-mobile, 184px));
    --type-aero-d-line: var(--type-aero-d-mobile-line, var(--type-aero-d-line-mobile, 184px));
    --type-aero-d-spacing: var(--type-aero-d-mobile-spacing, var(--type-aero-d-spacing-mobile, -13.6px));

    /* At Aero Type E */
    --type-aero-e-size: var(--type-aero-e-mobile-size, var(--type-aero-e-mobile-size, 11.6px));
    --type-aero-e-line: var(--type-aero-e-mobile-line, var(--type-aero-e-line-mobile, 16px));
    --type-aero-e-spacing: var(--type-aero-e-mobile-spacing, var(--type-aero-e-spacing-mobile, -0.24px));

    /* At Aero Type F */
    --type-aero-f-size: var(--type-aero-f-mobile-size, var(--type-aero-f-size-mobile, 12.8px));
    --type-aero-f-line: var(--type-aero-f-line-mobile, var(--type-aero-f-line-mobile, 17.6px));
    --type-aero-f-spacing: var(--type-aero-f-mobile-spacing, var(--type-aero-f-spacing-mobile, -0.24px));

    /* PP Supply Mono Type A */
    --type-mono-a-size: var(--type-mono-a-mobile-size, var(--type-mono-a-size-mobile, 9.35px));
    --type-mono-a-line: var(--type-mono-a-mobile-line, var(--type-mono-a-line-mobile, 11.05px));
    --type-mono-a-spacing: var(--type-mono-a-mobile-spacing, var(--type-mono-a-spacing-mobile, 0.425px));
    --type-mono-a-weight: 400;
    --type-mono-light-weight: 400;
  }

  .type-aero-a {
    font-size: var(--type-aero-a-size) !important;
    line-height: var(--type-aero-a-line) !important;
    letter-spacing: var(--type-aero-a-spacing) !important;
  }

  .type-aero-b {
    font-size: var(--type-aero-b-size) !important;
    line-height: var(--type-aero-b-line) !important;
    letter-spacing: var(--type-aero-b-spacing) !important;
  }

  .type-aero-c {
    font-size: var(--type-aero-c-size) !important;
    line-height: var(--type-aero-c-line) !important;
    letter-spacing: var(--type-aero-c-spacing) !important;
  }

  .type-aero-d {
    font-size: var(--type-aero-d-size) !important;
    line-height: var(--type-aero-d-line) !important;
    letter-spacing: var(--type-aero-d-spacing) !important;
  }

  .type-aero-e {
    font-size: var(--type-aero-e-size) !important;
    line-height: var(--type-aero-e-line) !important;
    letter-spacing: var(--type-aero-e-spacing) !important;
  }

  .type-aero-f {
    font-size: var(--type-aero-f-size) !important;
    line-height: var(--type-aero-f-line) !important;
    letter-spacing: var(--type-aero-f-spacing) !important;
  }

  .type-mono-a {
    font-size: var(--type-mono-a-size) !important;
    line-height: var(--type-mono-a-line) !important;
    letter-spacing: var(--type-mono-a-spacing) !important;
    font-weight: 400 !important;
  }

  /* Mobile Mono Typography: Enforce Regular weight (400) instead of Light weight (300) across all mono text */
  .type-mono-b,
  [class*="type-mono"],
  .nav-ongoing-badge,
  .nav-dropdown-clock,
  .live-clock,
  .live-clock-gmt,
  .f3-gallery-item-index,
  .f3-gallery-subbar-tag,
  .f3-services-num-badge,
  .f3-services-scope-tag,
  .btn-badge,
  .f3-featured-more-link,
  .pm-meta-year,
  .pm-action-badge {
    font-weight: 400 !important;
  }

  /* Dropdown Menu Typography Exemption: preserve original laptop sizing */
  .nav-dropdown-menu,
  .nav-dropdown-menu * {
    --type-aero-a-size: 43px;
    --type-aero-a-line: 49px;
    --type-aero-a-spacing: -2px;

    --type-aero-b-size: 30px;
    --type-aero-b-line: 38px;
    --type-aero-b-spacing: -1px;

    --type-aero-c-size: 20px;
    --type-aero-c-line: 30px;
    --type-aero-c-spacing: -0.8px;

    --type-aero-d-size: 230px;
    --type-aero-d-line: 230px;
    --type-aero-d-spacing: -17px;

    --type-aero-e-size: 14.5px;
    --type-aero-e-line: 20px;
    --type-aero-e-spacing: -0.3px;

    --type-aero-f-size: 16px;
    --type-aero-f-line: 22px;
    --type-aero-f-spacing: -0.3px;

    --type-mono-a-size: 11px;
    --type-mono-a-line: 13px;
    --type-mono-a-spacing: 0.5px;
    --type-mono-a-weight: 400;
    --type-mono-light-weight: 400;
  }

  .nav-dropdown-menu .type-aero-a {
    font-size: 43px !important;
    line-height: 49px !important;
    letter-spacing: -2px !important;
  }

  .nav-dropdown-menu .type-aero-b {
    font-size: 30px !important;
    line-height: 38px !important;
    letter-spacing: -1px !important;
  }

  .nav-dropdown-menu .type-aero-c {
    font-size: 20px !important;
    line-height: 30px !important;
    letter-spacing: -0.8px !important;
  }

  .nav-dropdown-menu .type-aero-d {
    font-size: 230px !important;
    line-height: 230px !important;
    letter-spacing: -17px !important;
  }

  .nav-dropdown-menu .type-aero-e {
    font-size: 14.5px !important;
    line-height: 20px !important;
    letter-spacing: -0.3px !important;
  }

  .nav-dropdown-menu .type-aero-f {
    font-size: 16px !important;
    line-height: 22px !important;
    letter-spacing: -0.3px !important;
  }

  .nav-dropdown-menu .type-mono-a {
    font-size: 11px !important;
    line-height: 13px !important;
    letter-spacing: 0.5px !important;
  }

  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    position: relative;
    -webkit-text-size-adjust: 100%;
  }

  .site-nav-top,
  .hero-top-nav {
    top: 14px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 0 16px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: none !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
    will-change: auto !important;
    transform: none !important;
  }

  .nav-modular-box,
  .hero-top-nav .nav-modular-box,
  .site-nav-top .nav-modular-box,
  .hero-top-nav.nav-theme-dark .nav-modular-box,
  .hero-top-nav.nav-theme-light .nav-modular-box {
    position: relative !important;
    z-index: 105 !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    border: none !important;
    box-shadow: 0 clamp(3px, 1.2vw, 8px) clamp(10px, 3.2vw, 22px) rgba(0, 0, 0, 0.22),
      0 1px 2px rgba(0, 0, 0, 0.08) !important;
  }

  /* Smaller mobile screens (< 480px): even softer, smaller and more subtle shadow */
  @media (max-width: 480px) {

    .nav-modular-box,
    .hero-top-nav .nav-modular-box,
    .site-nav-top .nav-modular-box,
    .hero-top-nav.nav-theme-dark .nav-modular-box,
    .hero-top-nav.nav-theme-light .nav-modular-box {
      box-shadow: 0 clamp(2px, 1vw, 4px) clamp(6px, 2.4vw, 10px) rgba(0, 0, 0, 0.16),
        0 1px 2px rgba(0, 0, 0, 0.05) !important;
    }
  }

  .nav-box-brand.hero-nav-brand {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .nav-brand-logo,
  .site-nav-top .nav-brand-logo,
  .hero-top-nav .nav-brand-logo {
    width: var(--nav-logo-mobile-width, auto) !important;
    height: var(--nav-logo-mobile-size, 24px) !important;
    max-width: none !important;
  }

  /* Mobile: remove quote in navbar, keep center empty */
  .nav-status-line {
    display: none !important;
  }

  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,
  body.nav-dropdown-active .site-nav-top.nav-theme-dark .nav-modular-box,
  body.nav-dropdown-active .site-nav-top.nav-theme-light .nav-modular-box {
    background: rgba(0, 0, 0, 0.50) !important;
    border: none !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;
    will-change: auto !important;
    transform: none !important;
    transition: background 0.28s ease !important;
  }

  /* Hamburger Menu Button on Mobile:
     - Default: 2 equal horizontal lines
     - Hover / Tap-Active: merges into one line '-'
     - Deployed (.is-active): rotates into a slash '/' */
  .nav-hamburger-btn {
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 110 !important;
    width: var(--nav-hamburger-size, 30px) !important;
    height: var(--nav-hamburger-size, 30px) !important;
    gap: var(--nav-hamburger-gap, 4.5px) !important;
    transform: rotate(0deg);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
  }

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

  /* Hover & Tap: Merge both lines into single center line '-' */
  .nav-hamburger-btn:hover .hamburger-line:first-child,
  .nav-hamburger-btn:active .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)) !important;
  }

  .nav-hamburger-btn:hover .hamburger-line:last-child,
  .nav-hamburger-btn:active .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)) !important;
  }

  /* Deployed / Active: Merged into single line and rotated into slash '/' */
  .nav-hamburger-btn.is-active {
    transform: rotate(var(--nav-hamburger-active-rotate, -68deg)) !important;
  }

  .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)) !important;
  }

  .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)) !important;
  }

  /* Revelatio Fullscreen Blur & Darken Backdrop Overlay (< 1024px) */
  .nav-dropdown-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 90 !important;
    background: var(--mobile-nav-backdrop-bg, rgba(0, 0, 0, 0.80)) !important;
    backdrop-filter: blur(var(--mobile-nav-backdrop-blur, 20px)) saturate(160%) !important;
    -webkit-backdrop-filter: blur(var(--mobile-nav-backdrop-blur, 20px)) saturate(160%) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0.3s ease !important;
  }

  .nav-dropdown-backdrop.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Fullscreen Dropdown Menu Drawer (< 1024px) */
  .nav-dropdown-menu {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    z-index: 95 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: calc(env(safe-area-inset-top, 0px) + var(--mobile-nav-top-spacing, 109px)) 24px calc(env(safe-area-inset-bottom, 0px) + 24px) 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    will-change: opacity !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0.3s ease;
  }

  .nav-dropdown-menu.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    will-change: opacity !important;
  }

  .nav-dropdown-grid {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    min-height: calc(100dvh - 120px) !important;
    width: 100% !important;
    gap: 0 !important;
  }

  .nav-dropdown-col-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--mobile-nav-link-gap, 5px) !important;
    padding: 0 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* Redirection Links: AT Aero Retina typography with customizable font size & gaps */
  .nav-dropdown-row-link,
  .nav-dropdown-row-link .nav-row-text {
    font-family: var(--font-retina, 'AT Aero Retina', 'At Aero Retina', 'AtAero-Retina', 'AT Aero', -apple-system, sans-serif) !important;
    font-size: var(--mobile-nav-link-font-size, 30px) !important;
    line-height: var(--mobile-nav-link-line-height, 1.1) !important;
    letter-spacing: var(--mobile-nav-link-letter-spacing, -0.02em) !important;
    font-weight: 350 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: var(--mobile-nav-link-padding-y, 0px) 0 !important;
    min-height: auto !important;
    opacity: 1;
    display: block !important;
  }

  .nav-dropdown-row-link:active,
  .nav-dropdown-row-link:active .nav-row-text {
    opacity: 0.65 !important;
    transform: scale(0.98) !important;
    transition: opacity 120ms ease-out, transform 120ms ease-out !important;
  }

  .nav-dropdown-row-link .nav-row-roll {
    overflow: visible !important;
    height: auto !important;
    display: block !important;
  }

  .nav-dropdown-row-link .nav-row-roll-inner {
    transform: none !important;
    display: block !important;
  }

  .nav-dropdown-row-link .nav-row-text:last-child {
    display: none !important;
  }

  .nav-dropdown-row-link .nav-row-text:first-child {
    display: block !important;
  }

  /* Hide subtag, divider, location block, dual timezones per explicit user instruction */
  .nav-dropdown-subtag,
  .nav-dropdown-divider,
  .nav-dropdown-location-block,
  .nav-dropdown-clock-wrap,
  .nav-clock-line {
    display: none !important;
  }

  /* Mobile Live Studio Clock (UTC+7) underneath last nav link (Archive) */
  .nav-dropdown-mobile-clock {
    display: inline-flex !important;
    align-items: center !important;
    margin-top: 14px !important;
    padding-left: 1px !important;
    color: #ffffff !important;
    opacity: 1;
    font-size: var(--mobile-nav-clock-font-size, 12px) !important;
    contain: layout paint;
    will-change: contents;
    pointer-events: none !important;
  }

  .nav-dropdown-mobile-clock .nav-clock-dot {
    display: none !important;
  }

  .nav-dropdown-mobile-clock .nav-dropdown-clock {
    color: #ffffff !important;
    font-size: var(--mobile-nav-clock-font-size, 12px) !important;
    line-height: 1 !important;
    display: inline-block !important;
    white-space: nowrap !important;
  }

  /* Unwrap right column wrapper */
  .nav-dropdown-col-right,
  .nav-dropdown-meta-col {
    display: contents !important;
  }

  /* 01 Ongoing projects block + 3 social icons pinned 25px from bottom and right edge of screen */
  .nav-dropdown-info-stack {
    position: fixed !important;
    right: calc(env(safe-area-inset-right, 0px) + var(--mobile-nav-info-margin-right, 25px)) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-nav-info-margin-bottom, 25px)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 8px !important;
    width: auto !important;
    z-index: 98 !important;
  }

  .nav-dropdown-ongoing {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    text-align: right !important;
  }

  .nav-dropdown-ongoing .nav-ongoing-line {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .nav-dropdown-ongoing .nav-ongoing-text {
    font-family: var(--type-aero-c-font, 'AT Aero', sans-serif) !important;
    font-weight: var(--type-aero-c-weight, 400) !important;
    font-size: var(--mobile-nav-ongoing-font-size, 14.5px) !important;
    line-height: 1 !important;
    letter-spacing: var(--type-aero-c-mobile-spacing, -0.55px) !important;
    color: #ffffff !important;
    white-space: nowrap !important;
  }

  .nav-dropdown-socials {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 20px !important;
    margin-top: 2px !important;
  }

  .nav-dropdown-socials .nav-social-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    padding: 4px 0 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    transition: color 0.2s ease !important;
    text-decoration: none !important;
  }

  .nav-dropdown-socials .nav-social-icon::before {
    content: '' !important;
    position: absolute !important;
    inset: -8px -4px !important;
  }

  .nav-dropdown-socials .nav-social-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  .nav-dropdown-socials .nav-social-icon .social-icon-txt {
    font-size: 15.5px !important;
  }

  .nav-dropdown-socials .nav-social-icon:active {
    color: #ffffff !important;
  }

  /* Hide floating bottom CTA button when mobile menu is active */
  body.nav-dropdown-active .nav-floating-cta {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(16px) scale(0.96) !important;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Mobile touch micro-feedback (:active states) */
  .f3-gallery-subbar .f3-featured-more-link:active,
  .f3-statement-btn:active,
  .nav-floating-cta:active {
    transform: scale(0.94) !important;
    opacity: 0.75 !important;
    transition: transform 120ms ease-out, opacity 120ms ease-out !important;
  }

  /* ==========================================================================
     Mobile Hero & Intro Layout (< 1024px)
     - Hide ASCII hero on mobile
     - Start page directly from Manifesto Statement
     - Position quote & Background button visible at initial viewport (25px bottom padding)
     ========================================================================== */
  #hero-viewport,
  .hero-center-viewport {
    display: none !important;
  }

  .f3-section-intro {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
    box-sizing: border-box !important;
  }

  .f3-section-intro > .f3-container {
    padding-left: 25px !important;
    padding-right: 25px !important;
    box-sizing: border-box !important;
  }

  .f3-intro-lockup {
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding-top: 100px !important;
    padding-bottom: 25px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  .f3-intro-left-col {
    display: none !important;
  }

  .f3-intro-right-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin-top: auto !important;
  }

  .f3-intro-statement {
    font-size: 30px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.9px !important;
    margin: 0 0 20px 0 !important;
  }

  .f3-statement-btn {
    margin-bottom: 0 !important;
  }

  .hero-center-visual {
    display: none !important;
  }

  .hero-corner-square {
    display: none !important;
  }

  /* ==========================================================================
     Recent Works Section (< 1024px)
     - Remove list and grid view switcher icons
     - Keep project images in horizontal rows (like laptop), scaled relatively to fit
     - Position project number box (01, 02...) and View on Behance button above images
     ========================================================================== */
  /* Remove divider, Recent works header, view switcher, and see all projects button */
  .f3-intro-divider-row,
  .f3-featured-tag-row,
  .f3-view-switcher {
    display: none !important;
  }

  :root {
    --f3-gallery-mobile-height: calc((100vw - 58px) / 2.1133 + 25px);
  }

  .f3-works-grid-container {
    padding-bottom: 44px !important;
  }

  .f3-gallery-list-wrap {
    gap: 44px !important;
  }

  .f3-gallery-project-block {
    width: 100% !important;
    position: relative !important;
    padding-top: 53px !important;
    padding-bottom: 38px !important;
  }

  .f3-gallery-project-block.f3-scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 0.44s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.44s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }

  .f3-gallery-project-block.f3-scroll-reveal.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .f3-gallery-hairline-divider {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .f3-gallery-project-title {
    display: block !important;
    position: absolute !important;
    top: 14px !important;
    left: 0 !important;
    height: 22px !important;
    line-height: var(--type-aero-c-line, 22px) !important;
    color: #faf9fc !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
  }

  .f3-gallery-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 9px !important;
    width: calc(100% + 50px) !important;
    max-width: 100vw !important;
    margin-left: -25px !important;
    margin-right: -25px !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
    box-sizing: border-box !important;
    position: static !important;
  }

  .f3-gallery-row::-webkit-scrollbar {
    display: none !important;
  }

  .f3-gallery-row::after {
    content: '' !important;
    flex: 0 0 16px !important;
    pointer-events: none !important;
  }

  .f3-gallery-offset-spacer,
  .f3-gallery-offset-spacer-right,
  .f3-gallery-img-code {
    display: none !important;
  }

  .f3-bleed-right {
    margin-right: 0 !important;
  }

  .f3-bleed-left {
    margin-left: 0 !important;
  }

  /* Card Wrap transparent to flex so subbar orders cleanly to top/bottom */
  .f3-gallery-card-wrap {
    display: contents !important;
  }

  /* Subbar containing number box (bottom left) + View on Behance button (bottom right) */
  .f3-gallery-subbar {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    pointer-events: auto !important;
  }

  /* Mobile: replace view on behance button with an arrow-only button pointing top right */
  .f3-gallery-subbar .f3-featured-more-link {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    gap: 0 !important;
  }

  .f3-gallery-subbar .f3-featured-more-link::before {
    content: '' !important;
    position: absolute !important;
    top: -10px !important;
    bottom: -10px !important;
    left: -10px !important;
    right: -10px !important;
  }

  .f3-gallery-subbar .f3-featured-more-link span:not(.btn-arrow) {
    display: none !important;
  }

  .f3-gallery-subbar .f3-featured-more-link .btn-arrow {
    font-size: 12px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(-0.5px);
  }

  /* Image card items in horizontal row, uniform height matching first row (Milano Cortina) */
  .f3-gallery-item {
    display: block !important;
    height: var(--f3-gallery-mobile-height) !important;
    flex: 0 0 auto !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  .f3-gallery-media,
  .f3-gallery-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Row 1: USSS Milano Cortina (2 images: 975/766 + 748/890) */
  .f3-gallery-card-usss-1 .f3-gallery-item {
    flex: 0 0 auto !important;
    width: calc(var(--f3-gallery-mobile-height) * 975 / 766) !important;
    aspect-ratio: 975 / 766 !important;
  }

  .f3-gallery-card-usss-2 .f3-gallery-item {
    flex: 0 0 auto !important;
    width: calc(var(--f3-gallery-mobile-height) * 748 / 890) !important;
    aspect-ratio: 748 / 890 !important;
  }

  /* Row 2: Memphis Grizzlies (3 images: 1616/1264 + 748/890 + 962/891, swipeable) */
  .f3-gallery-card-memphis-1 .f3-gallery-item {
    flex: 0 0 auto !important;
    width: calc(var(--f3-gallery-mobile-height) * 1616 / 1264) !important;
    aspect-ratio: 1616 / 1264 !important;
  }

  .f3-gallery-card-memphis-2 .f3-gallery-item {
    flex: 0 0 auto !important;
    width: calc(var(--f3-gallery-mobile-height) * 748 / 890) !important;
    aspect-ratio: 748 / 890 !important;
  }

  .f3-gallery-card-memphis-3 .f3-gallery-item {
    flex: 0 0 auto !important;
    width: calc(var(--f3-gallery-mobile-height) * 962 / 891) !important;
    aspect-ratio: 962 / 891 !important;
  }

  /* Row 3: NK Hoops (2 images: 748/890 + 1800/1408) */
  .f3-gallery-card-nk-2 .f3-gallery-item {
    flex: 0 0 auto !important;
    width: calc(var(--f3-gallery-mobile-height) * 748 / 890) !important;
    aspect-ratio: 748 / 890 !important;
  }

  .f3-gallery-card-nk-1 .f3-gallery-item {
    flex: 0 0 auto !important;
    width: calc(var(--f3-gallery-mobile-height) * 1800 / 1408) !important;
    aspect-ratio: 1800 / 1408 !important;
  }

  /* Row 4: Uniros (3 images: 1800/1400 + 748/890 + 1800/1408, swipeable) */
  .f3-gallery-card-uniros-1 .f3-gallery-item {
    flex: 0 0 auto !important;
    width: calc(var(--f3-gallery-mobile-height) * 1800 / 1400) !important;
    aspect-ratio: 1800 / 1400 !important;
  }

  .f3-gallery-card-uniros-2 .f3-gallery-item {
    flex: 0 0 auto !important;
    width: calc(var(--f3-gallery-mobile-height) * 748 / 890) !important;
    aspect-ratio: 748 / 890 !important;
  }

  .f3-gallery-card-uniros-3 .f3-gallery-item {
    flex: 0 0 auto !important;
    width: calc(var(--f3-gallery-mobile-height) * 1800 / 1408) !important;
    aspect-ratio: 1800 / 1408 !important;
  }

  /* Mobile: place Uniros 2 at start of row before Uniros 1 */
  .f3-gallery-card-uniros-2,
  .f3-gallery-card-uniros-2 .f3-gallery-item {
    order: 1 !important;
  }

  .f3-gallery-card-uniros-1,
  .f3-gallery-card-uniros-1 .f3-gallery-item {
    order: 2 !important;
  }

  .f3-gallery-card-uniros-3,
  .f3-gallery-card-uniros-3 .f3-gallery-item {
    order: 3 !important;
  }

  .f3-gallery-row-4::after {
    order: 99 !important;
  }

  /* ==========================================================================
     Mobile Services Directory Blocks & Horizontal Carousel (< 1024px)
     ========================================================================== */
  .f3-services-directory-section {
    padding-bottom: 120px !important;
  }

  .f3-services-directory-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 82px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .f3-services-col-focus {
    margin-bottom: 24px !important;
  }

  .f3-services-cards-track {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 25px !important;
    scroll-padding-right: 25px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 12px !important;
    padding: 0 25px !important;
    margin: 0 -25px !important;
    width: calc(100% + 50px) !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .f3-services-cards-track::-webkit-scrollbar {
    display: none !important;
  }

  .f3-services-cards-track>.f3-services-col {
    flex: 0 0 calc(100vw - 50px - 36px) !important;
    width: calc(100vw - 50px - 36px) !important;
    max-width: 340px !important;
    scroll-snap-align: start !important;
    background: #070707 !important;
    padding: 28px 24px !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    border: none !important;
    margin-top: 0 !important;
  }

  .f3-services-cards-track::after {
    content: '' !important;
    flex: 0 0 13px !important;
    pointer-events: none !important;
  }

  .f3-services-col-title {
    font-size: var(--type-aero-c-size, 16px) !important;
    line-height: var(--type-aero-c-line, 22px) !important;
    letter-spacing: var(--type-aero-c-spacing, -0.96px) !important;
    margin-bottom: 20px !important;
  }

  .f3-services-list {
    gap: 12px !important;
  }

  .f3-services-item {
    font-size: var(--type-aero-c-size, 16px) !important;
    line-height: 1.4 !important;
    letter-spacing: var(--type-aero-c-spacing, -0.96px) !important;
  }

  .f3-services-group+.f3-services-group {
    margin-top: 32px !important;
  }

  /* Horizontal Scroll Indicator Underneath Blocks */
  .f3-services-scroll-indicator {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 24px !important;
  }

  .f3-services-indicator-track {
    width: 60px !important;
    height: 2px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .f3-services-indicator-thumb {
    width: 30px !important;
    height: 100% !important;
    background: #ffffff !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: translateX(0px);
    will-change: transform;
    pointer-events: none !important;
  }

  /* Mobile: remove HCMC time above the quote */
  .f3-intro-left-col,
  .f3-intro-status,
  .f3-intro-status-dot {
    display: none !important;
  }

  /* Mobile: remove intro divider above recent works */
  .f3-intro-divider-row {
    display: none !important;
  }

  /* Mobile: move contact action rows block downward by 15px, keeping headline & section spacing intact */
  .f3-contact-right-col {
    margin-top: 15px !important;
  }

  /* Mobile: space from action rows (Drop a message) to dual clocks bar calibrated to 120px */
  .f3-contact-hero-stage {
    padding-bottom: 154px !important;
    /* 84px + 36px split-layout padding = 120px exact to clocks */
  }

  /* Mobile: 25px padding from the clock's end to the end of the black section */
  .f3-section-contact {
    padding-bottom: 25px !important;
  }

  /* Mobile: align dual clocks (MY TIME / YOUR TIME) in CTA section to the right */
  .f3-contact-corners-bar {
    align-items: flex-end !important;
    text-align: right !important;
  }

  .f3-contact-corner {
    justify-content: flex-end !important;
  }


  /* About Page Mobile Layout: Full-bleed #e5e5e6 backdrop with centered scaled portrait */
  .about-main-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .about-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .about-hero-section.about-bio-section {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .about-split-row.about-bio-split,
  .about-bio-split {
    display: flex !important;
    flex-direction: column !important;
    padding-top: 0 !important;
    padding-bottom: 80px !important;
    gap: 0 !important;
    width: 100% !important;
  }

  .about-bio-portrait-col {
    width: 100% !important;
    margin: 0 !important;
    height: calc(75vh + 25px) !important;
    height: calc(75dvh + 25px) !important;
    min-height: calc(75vh + 25px) !important;
    min-height: calc(75dvh + 25px) !important;
    background-color: #e5e5e6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 50px !important;
    /* visual compensation for floating top navbar */
    padding-bottom: 25px !important;
    /* maintain exact picture position when backdrop extends 25px downward */
    box-sizing: border-box !important;
  }

  .about-portrait-wrap {
    width: clamp(210px, 58vw, 260px) !important;
    max-width: 260px !important;
    height: auto !important;
    aspect-ratio: 5 / 6 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
  }

  .about-portrait-wrap .about-portrait-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .about-bio-text-col {
    width: 100% !important;
    padding-top: 48px !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  .about-paragraphs {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    transform: none !important;
  }

  /* Mobile Bottom Footer Layout: Hide @scherre & align logo to bottom-right of socials */
  .f3-footer-brand-signature {
    display: none !important;
  }

  .f3-footer-main-grid {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "contact contact"
      "socials emblem" !important;
    row-gap: 52px !important;
    column-gap: 20px !important;
    align-items: end !important;
    min-height: auto !important;
    margin-bottom: 22px !important;
  }

  .f3-footer-left-stage {
    display: contents !important;
  }

  .f3-footer-right-stage {
    display: contents !important;
  }

  .f3-footer-contact-block {
    grid-area: contact !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 0 !important;
  }

  .f3-footer-email-link,
  .f3-footer-location,
  .f3-footer-location span {
    line-height: var(--type-aero-c-line, 22px) !important;
  }

  .f3-footer-socials-wrap {
    grid-area: socials !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-self: end !important;
    width: auto !important;
    margin: 0 !important;
  }

  .f3-footer-socials-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .f3-footer-social-item,
  .f3-footer-social-link {
    text-align: left !important;
  }

  .f3-footer-emblem-wrap {
    grid-area: emblem !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    align-self: end !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .f3-footer-brand-mark {
    transform: translateY(10px) !important;
    margin: 0 !important;
    align-self: flex-end !important;
  }

  /* Mobile Footer Spacing: Symmetrical 25px from CTA section to upper divider & divider to contact block */
  .f3-editorial-footer {
    padding-top: 25px !important;
    padding-bottom: 0 !important;
  }

  .f3-footer-divider-row {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    border-top: 1px solid rgba(3, 3, 3, 0.15) !important;
    margin-top: 0 !important;
    margin-bottom: 22px !important;
  }

  .f3-footer-divider-row .f3-intro-divider-col-left,
  .f3-footer-divider-row .f3-intro-divider-col-right {
    display: none !important;
  }

  .f3-footer-divider-row::before,
  .f3-footer-divider-row::after {
    content: '' !important;
    position: absolute !important;
    width: 2px !important;
    height: 2px !important;
    background-color: #030303 !important;
    top: -1px !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  .f3-footer-divider-row::before {
    left: 0 !important;
  }

  .f3-footer-divider-row::after {
    right: 0 !important;
  }

  /* Mobile Footer Colophon: Hide 'ALL RIGHTS RESERVED' and align privacy policy to the right
     Lower divider spacing bumped to 42px with centered text vertical balance */
  .f3-colophon-left {
    display: none !important;
  }

  .f3-footer-colophon-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 42px !important;
    box-sizing: border-box !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .f3-colophon-center {
    justify-self: auto !important;
    text-align: left !important;
  }

  .f3-colophon-right {
    justify-self: auto !important;
    text-align: right !important;
    margin-left: auto !important;
  }

  .f3-colophon-privacy-link {
    text-align: right !important;
  }

  /* Archive Page Mobile Layout: 2 Columns, evenly stacked, 10px middle column gap, 25px row gap */
  .archive-matrix {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 25px 10px !important;
    row-gap: 25px !important;
    column-gap: 10px !important;
    margin-bottom: 80px !important;
  }

  .archive-slot-empty {
    display: none !important;
  }

  .archive-slot {
    width: 100% !important;
  }

  .archive-grid-item {
    width: 100% !important;
  }

  .archive-grid-item-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
  }
}

/* ==========================================================================
   Responsive Breakpoints & Media Queries
   ========================================================================== */

/* Tablet (810px - 1199px) */
@media (max-width: 1199px) {
  .nav-grid {
    grid-template-columns: 1fr 1fr;
  }

  .nav-col-center,
  .nav-col-right .nav-meta-hide {
    display: none;
  }

  .featured-grid,
  .works-grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .project-narrative-section {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .project-meta-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Mobile (< 810px) */
@media (max-width: 809.98px) {
  .site-header {
    padding: 16px 20px;
  }

  .nav-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .nav-col-left .nav-link,
  .nav-col-center,
  .nav-col-right {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .hero-bottom-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero-meta-col {
    align-items: flex-start;
    text-align: left;
  }

  .featured-grid,
  .works-grid-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .works-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .works-list-row {
    grid-template-columns: 40px 1fr auto;
  }

  .works-list-field,
  .works-list-client,
  .works-list-year {
    display: none;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .project-gallery-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .gallery-item.full-width {
    grid-column: span 1;
  }

  .clients-row {
    grid-template-columns: 1.5fr 1fr;
  }

  .client-year {
    display: none;
  }

  /* ==========================================================================
     Mobile Smooth Touch Inertia Scrolling (< 1024px)
     ========================================================================== */
  html.lenis,
  html.lenis body {
    height: auto !important;
  }

  .lenis.lenis-smooth {
    scroll-behavior: auto !important;
  }

  .f3-gallery-row,
  .f3-services-cards-track {
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain !important;
  }
}