.icon { display: inline-block; flex: none; width: 24px; height: 24px; filter: invert(1); vertical-align: middle; }
.visually-hidden { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
.site-header { gap: 55px; }
.site-header .brand { font-size: 25px; letter-spacing: -.045em; font-weight: 500; }
.site-nav { margin-left: auto; gap: 39px; }
.site-nav a { border: 0; border-radius: 0; padding: 8px 0; font-size: 15px; position: relative; color: #bfc1c5; }
.site-nav a::after { content: ''; position: absolute; height: 1px; bottom: 0; left: 0; width: 100%; background: #d4d7db; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.site-nav a:hover { background: none; }
.site-nav a:hover::after, .site-nav a[aria-current=page]::after { transform: scaleX(1); }
.menu-toggle { display: grid; place-items: center; padding: 0; width: 50px; height: 50px; border-radius: 50%; border: 1px solid #81878d; flex: none; transition: border-color .25s, transform .3s var(--ease); }
.menu-toggle:hover { border-color: #f1f2f2; transform: rotate(8deg); }
.menu-toggle .icon { width: 22px; height: 22px; }
.menu-dialog { padding: 38px 6.7%; background: #07090b; }
.menu-top { align-items: center; }
.menu-top button { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 1px solid #777e85; border-radius: 50%; transition: transform .3s; }
.menu-top button:hover { transform: rotate(90deg); }
.menu-layout { display: grid; grid-template-columns: 1.08fr 1fr; gap: 11%; align-items: center; margin: 8vh auto 5vh; max-width: 1400px; }
.menu-dialog .menu-layout nav { margin: 0; width: 100%; }
.menu-dialog nav a { padding: 19px 0; gap: 26px; font-size: clamp(36px, 5.6vw, 73px); font-weight: 400; border-color: #2c3339; }
.menu-dialog nav a:hover { padding-left: 10px; }
.menu-dialog nav a .icon { width: 32px; height: 32px; margin-left: auto; opacity: 0; transform: translateX(-10px); transition: opacity .25s, transform .35s; }
.menu-dialog nav a:hover .icon, .menu-dialog nav a:focus-visible .icon { opacity: 1; transform: none; }
.menu-dialog nav a[aria-current=page] { color: #b4bdc7; }
.menu-preview { align-self: center; min-width: 0; }
.menu-preview > p:first-child { color: #8b96a2; font-size: 10px; letter-spacing: .22em; }
.menu-preview h2 { color: #e0e4e7; font-size: clamp(22px, 2.5vw, 35px); font-weight: 400; margin: 18px 0 14px; }
.menu-preview > p { color: #8c969f; font-size: 14px; line-height: 1.85; }
.menu-preview figure { margin-top: 28px; aspect-ratio: 1.5; overflow: hidden; }
.menu-preview img { width: 100%; height: 100%; object-fit: contain; }
.menu-preview[data-view=journey] img { object-position: left; }
.menu-dialog .menu-footnote { max-width: 1400px; font-size: 13px; color: #78828b; }
@media (max-width: 1000px) { .site-header { gap: 30px; }.site-nav { gap: 26px; }.menu-layout { gap: 7%; }.menu-dialog nav a { font-size: 46px; } }
@media (max-width: 720px) { .menu-layout { grid-template-columns: 1fr; }.menu-preview { display: none; }.menu-toggle { width: 44px; height: 44px; }.site-nav { display: none; } }
@media (prefers-reduced-motion: reduce) { .menu-toggle:hover, .menu-top button:hover { transform: none; } }
