/* Navigation is a full-page composition on compact screens. */
.menu-intro,.menu-footer {
  display:none
}

.nav-item:not(.nav-contact) .menu-link-arrow {
  display:none
}

.header>.logo {
  position:relative;
  z-index:42
}

.hero-top {
  gap:24px
}

.hero-top>span {
  white-space:nowrap
}

.scene-caption {
  top:auto;
  bottom:5px;
  left:16%;
  right:9%;
  gap:24px;
  white-space:nowrap
}

@media(max-width:1100px) and (min-width:961px) {
  .hero-top>span:last-child {
    max-width:42%;
    text-align:right;
    white-space:normal
  }
  .scene-caption {
    left:18%;
    right:12%;
    font-size:6px
  }
}

@media(max-width:960px) {
  body.menu-open {
    overflow:hidden
  }
  .header {
    isolation:isolate
  }
  .header>.logo {
    z-index:42
  }
  .menu-toggle {
    position:relative;
    z-index:42;
    min-height:44px;
    gap:14px;
    font-size:12px
  }
  .menu-toggle .menu-label {
    font-size:12px;
    transform:none
  }
  .menu-icon {
    display:block;
    position:relative;
    width:23px;
    height:18px
  }
  .menu-icon i {
    position:absolute;
    left:0;
    width:23px;
    height:1px;
    background:currentColor;
    top:5px;
    transition:transform .4s cubic-bezier(.22,1,.36,1),top .4s
  }
  .menu-icon i:last-child {
    top:12px;
    width:17px;
    left:auto;
    right:0
  }
  .menu-toggle[aria-expanded=true]>.menu-icon {
    transform:none
  }
  .menu-toggle[aria-expanded=true] .menu-icon i {
    top:9px;
    transform:rotate(45deg);
    width:23px
  }
  .menu-toggle[aria-expanded=true] .menu-icon i:last-child {
    transform:rotate(-45deg)
  }
  .header nav {
    display:flex;
    flex-direction:column;
    position:fixed;
    inset:0;
    z-index:40;
    width:100%;
    height:100vh;
    height:100dvh;
    background:var(--paper);
    color:var(--ink);
    padding:135px var(--gutter) 25px;
    box-shadow:none;
    gap:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    clip-path:inset(0 0 100% 0);
    visibility:hidden;
    pointer-events:none;
    transition:clip-path .65s cubic-bezier(.76,0,.24,1),visibility 0s .65s
  }
  .header nav.open {
    visibility:visible;
    pointer-events:auto;
    clip-path:inset(0);
    transition:clip-path .65s cubic-bezier(.76,0,.24,1),visibility 0s
  }
  .menu-intro {
    display:flex;
    justify-content:space-between;
    font-size:8px;
    border-bottom:1px solid var(--line);
    padding-bottom:22px;
    margin-bottom:13px;
    gap:20px
  }
  .header nav>.nav-item {
    display:flex;
    align-items:center;
    gap:14px;
    flex-shrink:0;
    border:0;
    padding:18px 0;
    line-height:1.12;
    font-size:clamp(32px,9.5vw,66px);
    letter-spacing:-.5px;
    font-weight:500;
    transform:translateY(28px);
    opacity:0;
    transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .3s
  }
  .header nav.open>.nav-item {
    transform:translateY(0);
    opacity:1;
    transition-delay:.2s
  }
  .header nav.open>.nav-item:nth-of-type(2) {
    transition-delay:.27s
  }
  .header nav.open>.nav-item:nth-of-type(3) {
    transition-delay:.34s
  }
  .header nav>.nav-item:before {
    content:attr(data-index);
    font:8px/1 BodySans;
    letter-spacing:-.5px;
    align-self:start;
    margin-top:8px;
    min-width:16px;
    color:var(--muted)
  }
  .header nav>.nav-item:after {
    display:none
  }
  .header nav>.nav-item .menu-link-arrow {
    display:block;
    margin-left:auto;
    font-size:26px;
    letter-spacing:-.5px;
    transition:transform .3s;
    font-weight:400
  }
  .header nav>.nav-item:hover .menu-link-arrow {
    transform:translate(3px,-3px)
  }
  .header nav>.nav-contact {
    color:#b83a1c;
    justify-content:start
  }
  .menu-footer {
    display:block;
    margin-top:auto;
    padding-top:45px;
    transform:translateY(15px);
    opacity:0;
    transition:opacity .3s,transform .5s
  }
  .open .menu-footer {
    opacity:1;
    transform:translateY(0);
    transition-delay:.4s
  }
  .menu-footer p {
    font-size:17px;
    line-height:1.4;
    letter-spacing:-.5px;
    margin-bottom:16px
  }
  .menu-footer>a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    font-size:15px;
    letter-spacing:-.5px;
    width:100%;
    padding-bottom:20px;
    border-bottom:1px solid var(--line)
  }
  .menu-footer>a>span {
    font-size:20px
  }
  .menu-signoff {
    display:flex;
    justify-content:space-between;
    gap:15px;
    font-size:7px;
    margin-top:20px
  }
  .scene-caption {
    top:10px;
    bottom:auto;
    left:var(--gutter);
    right:var(--gutter);
    gap:20px;
    font-size:6px
  }
  .hero-bottom {
    flex-direction:row
  }
  .hero-bottom .round-link {
    flex-shrink:0
  }
  .hero h1 {
    font-size:clamp(40px,12.4vw,88px)
  }
}

@media(max-height:650px) and (max-width:960px) {
  .header nav {
    padding-top:105px
  }
  .header nav>.nav-item {
    padding:12px 0;
    font-size:32px
  }
  .menu-intro {
    padding-bottom:13px;
    margin-bottom:5px
  }
  .menu-footer {
    padding-top:25px
  }
  .menu-footer p {
    display:none
  }
}

@media(prefers-reduced-motion:reduce) {
  .header nav,.header nav>.nav-item,.menu-footer,.menu-icon i {
    transition:none!important
  }
}