/* Final mobile/tablet navigation layer. Keep this stylesheet last in <head>. */
@media (max-width: 1024px) {
  html {
    scroll-padding-top: 72px;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overscroll-behavior-x: none;
  }

  body {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overscroll-behavior-x: none;
  }

  /* Prevent layout children from forcing the document wider than the viewport. */
  body > *,
  body main,
  body section,
  body article,
  body footer,
  body .timelineWrap,
  body .layout,
  body .faqLayout,
  body .caseLayout,
  body .storyArticle,
  body .joshinIntro {
    max-width: 100%;
    min-width: 0;
  }

  body img,
  body video,
  body iframe,
  body svg {
    max-width: 100%;
  }

  body > header.siteHeader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 60px !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 0 clamp(14px, 3.5vw, 28px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    z-index: 2147483000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    translate: none !important;
    overflow: visible !important;
    contain: none !important;
    background: linear-gradient(180deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.58) 62%, rgba(0,0,0,.35) 100%) !important;
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
  }

  body > .mobileMenu {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    z-index: 2147483001 !important;
  }

  body > .mobileMenu:not(.isOpen):not(.is-open):not(.active) {
    pointer-events: none !important;
  }

  body > .mobileMenu.isOpen,
  body > .mobileMenu.is-open,
  body > .mobileMenu.active {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body > .mobileMenu .mobileMenuClose {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  body > .mobileMenu .mobileMenuInner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  body > header.siteHeader .headerUtility,
  body > header.siteHeader .topnav {
    display: none !important;
  }

  body > header.siteHeader .siteLogo {
    position: static !important;
    width: auto !important;
    height: 38px !important;
    min-width: 0 !important;
    max-width: calc(100% - 54px) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    overflow: visible !important;
    transform: none !important;
    color: #fff !important;
  }

  body > header.siteHeader .siteLogoMark {
    position: relative !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 34px !important;
    display: block !important;
    overflow: hidden !important;
  }

  body > header.siteHeader .siteLogoMark img {
    position: absolute !important;
    top: 1px !important;
    left: -13px !important;
    width: 70px !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: top center !important;
    aspect-ratio: 160 / 100 !important;
    transform: none !important;
  }

  body > header.siteHeader .siteLogoName {
    min-width: 0 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 7px !important;
    white-space: nowrap !important;
    color: #fff !important;
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif CJK JP", "Noto Serif JP", serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  body > header.siteHeader .siteLogoName b,
  body > header.siteHeader .siteLogoName em {
    font-family: inherit !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body > header.siteHeader .siteLogoName b {
    font-size: clamp(13px, 1.7vw, 15px) !important;
    letter-spacing: .045em !important;
  }

  body > header.siteHeader .siteLogoName em {
    font-size: clamp(11px, 1.45vw, 13px) !important;
    letter-spacing: .06em !important;
  }

  body > header.siteHeader .mobileMenuButton {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
    z-index: 2 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  body > header.siteHeader .mobileMenuButton span {
    display: block !important;
    width: 25px !important;
    height: 1px !important;
    margin: 0 !important;
    background: #fff !important;
  }

  /* Disable every in-page/sidebar navigation on mobile and tablet. */
  body .side,
  body aside.side,
  body .caseSide,
  body aside.caseSide,
  body .sideIn,
  body .sideInner,
  body #sideNav {
    display: none !important;
    position: static !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body .timelineWrap,
  body .layout,
  body .faqLayout,
  body .caseLayout {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Animated/wide visual elements must remain clipped by their own section. */
  body .hero,
  body .about,
  body .photoRail,
  body .venueBuildingVisual,
  body .futureHandoff,
  body .futureBridge,
  body .future {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  /* Keep intended horizontal interfaces scrollable without moving the page. */
  body .tabs,
  body .equipThumbs,
  body .monthScroller,
  body .priceScroll,
  body #layouts .pdfPrimary,
  body #layouts .layoutExamples,
  body #flow .flow,
  body .eventRail {
    max-width: 100% !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Mobile versions already place these editorial elements in normal flow. */
  body .editorial-shift-left,
  body .editorial-shift-right,
  body .article-figure-wide,
  body .article-figure-narrow,
  body .article-section-header {
    left: 0 !important;
    right: auto !important;
    max-width: 100% !important;
  }

  [id] {
    scroll-margin-top: 72px !important;
  }
}

@supports not (overflow: clip) {
  @media (max-width: 1024px) {
    html,
    body { overflow-x: hidden; }
  }
}

@media (max-width: 412px) {
  html { scroll-padding-top: 68px; }

  body > header.siteHeader {
    height: 58px !important;
    min-height: 58px !important;
    padding-left: 14px !important;
    padding-right: 8px !important;
  }

  body > header.siteHeader .siteLogo {
    height: 36px !important;
    gap: 8px !important;
  }

  body > header.siteHeader .siteLogoMark {
    flex-basis: 42px !important;
    width: 42px !important;
    height: 32px !important;
  }

  body > header.siteHeader .siteLogoMark img {
    top: 1px !important;
    left: -13px !important;
    width: 67px !important;
  }

  body > header.siteHeader .siteLogoName b { font-size: 13px !important; }
  body > header.siteHeader .siteLogoName em { font-size: 11px !important; }
  body > header.siteHeader .mobileMenuButton { margin-left: 6px !important; }

  [id] { scroll-margin-top: 68px !important; }
}