/* Monument: the headline lives between the landscape and architecture. */
#top.hero-monument { --monument-inset:37px; position:relative; height:100svh; padding:8px; }
#top.hero-monument[data-monument-started="true"] { height:360svh; }
#top.hero-monument .hero-frame { position:sticky; top:8px; height:calc(100svh - 16px); min-height:0; overflow:hidden; isolation:isolate; border-radius:28px; background:#18222c; }
.monument-media,.monument-media picture,.monument-media img,.monument-canvas,.monument-shade { position:absolute; inset:0; width:100%; height:100%; }
.monument-media img { object-fit:cover; object-position:100% 50%; }
.monument-canvas { display:block; pointer-events:none; }
.monument-canvas[hidden] { display:none; }
.monument-shade { z-index:2; pointer-events:none; background:linear-gradient(180deg,rgba(5,16,23,.16),transparent 35%,transparent 65%,rgba(5,14,20,.34)); }
#top .monument-header { z-index:6; top:21px; left:var(--monument-inset); right:var(--monument-inset); }
.monument-header .brand img { width:133px; }
html.in-monument .menu-toggle { top:29px; right:45px; left:auto; bottom:auto; transform:none; padding:10px 0 10px 16px; min-height:44px; gap:17px; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--cream); font-size:11px; }
html.in-monument .menu-icon { width:18px; }
html.in-monument .menu-toggle:hover { background:transparent; color:var(--cream); }
.monument-skip { position:absolute; left:var(--monument-inset); bottom:24px; z-index:8; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.monument-skip:focus { width:auto; height:auto; min-height:44px; padding:12px 18px; clip-path:none; border-radius:24px; background:#18222c; outline:1px solid var(--cream); }
@media(max-width:1000px) and (orientation:portrait) {
  #top.hero-monument { --monument-inset:23px; --monument-height:min(calc((100vw - 16px)*4/3),72svh); }
  #top.hero-monument,#top.hero-monument[data-monument-started="true"] { height:calc(var(--monument-height) + 16px); }
  #top.hero-monument .hero-frame { position:relative; top:0; height:var(--monument-height); border-radius:25px; background:#292d30; }
  .monument-shade { background:linear-gradient(180deg,rgba(20,19,18,.10),transparent 32%,transparent 75%,rgba(12,15,15,.17)); }
  #top .monument-header { top:15px; }
  .monument-header .brand img { width:104px; }
  html.in-monument .menu-toggle { top:23px; right:31px; gap:12px; font-size:10px; }
}
@media(max-height:500px) and (orientation:landscape) {
  #top.hero-monument { --monument-inset:25px; }
  #top .monument-header { top:10px; }
  .monument-header .brand img { width:110px; }
  html.in-monument .menu-toggle { top:18px; right:33px; }
}