.compass-menu-hero .voyage-scene{inset:0;background:linear-gradient(180deg,#03111e12,transparent 65%,#03111e55),url('north-mountains.webp') center 66%/cover no-repeat}
.compass-menu-hero:before{background:linear-gradient(90deg,#03111e65,transparent 65%)}
.compass-menu-hero .voyage-stage{grid-template-columns:40% 60%;min-height:650px;padding-block:35px;gap:0}
.compass-menu-hero .voyage-copy{align-self:center;padding:0 0 35px}
.compass-menu-hero .voyage-copy h1{font-size:clamp(48px,4.5vw,72px)}.compass-menu-hero .voyage-intro{max-width:34ch}
.compass-navigation{width:100%;max-width:740px;justify-self:end;--needle-angle:0deg;--icon-size:52px;--hit-size:56px}
.compass-instruction{font-size:9px;letter-spacing:.3em;color:#acc4d4;margin:0 0 12px 8%}
.compass-assembly{position:relative;isolation:isolate;aspect-ratio:700/600;width:100%}
.compass-art{position:absolute;left:0;top:4%;width:72%;aspect-ratio:1;pointer-events:none;z-index:0}
.compass-dial-image,.compass-star-layer,.compass-star-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-width:none}
.compass-dial-image{transform:translate(1.55%,1.15%);filter:drop-shadow(0 12px 20px #0007)}
.compass-star-image{transform:translate(1.1%,.55%);filter:drop-shadow(0 0 7px #ffc45e26)}
.compass-star-layer{transform:rotate(var(--needle-angle));transform-origin:50% 50%;transition:transform .55s cubic-bezier(.22,.75,.2,1)}
.compass-centre-glow{position:absolute;left:50%;top:50%;width:12%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff5cc55,#ffbd4c12 30%,transparent 70%);mix-blend-mode:screen}
.compass-orbit-track{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.compass-track-line{fill:none;stroke:url('#compass-track-gold');stroke-width:1.2;opacity:.66}
.compass-track-outer{fill:none;stroke:#71a2bb;stroke-width:.7;opacity:.2}
.compass-active-ray{stroke:#ffd789;stroke-width:.7;opacity:0;transition:opacity .2s}.compass-track-marker{fill:#ffe7b4;opacity:0;filter:drop-shadow(0 0 6px #ffbe58)}
.compass-assembly.has-selection .compass-active-ray{opacity:.11}.compass-assembly.has-selection .compass-track-marker{opacity:1}
.compass-destinations{position:absolute;inset:0;z-index:2}
.compass-destination{position:absolute;left:var(--destination-x);top:var(--destination-y);transform:translateY(-50%);display:flex;align-items:center;gap:12px;min-height:var(--hit-size);padding:0;border-radius:40px;color:#c2ced9;text-decoration:none;white-space:nowrap;outline:none;transition:color .2s}
.compass-destination-icon{width:var(--icon-size);height:var(--icon-size);display:grid;place-items:center;flex-shrink:0;border-radius:50%;border:1px solid #617f9299;background:radial-gradient(circle at 40% 30%,#243849,#081823 75%);box-shadow:0 0 0 5px #06141c99,0 0 0 6px #7292a326,inset 0 1px 10px #aec2cf12;transition:box-shadow .2s,border-color .2s,color .2s}
.compass-destination-icon svg{width:26px;height:26px}
.compass-destination>span:last-child{display:block;max-width:140px;white-space:normal;text-transform:uppercase;font-size:10px;letter-spacing:.08em;line-height:1.5;padding:8px 12px 8px 0;text-shadow:0 2px 6px #000;background:linear-gradient(90deg,#04131eb3,#04131e00);border-radius:0 30px 30px 0}
.compass-destination:hover,.compass-destination.is-pointed{color:#ffdfa4}
.compass-destination.is-pointed .compass-destination-icon{border:1px solid #ffe6b5;color:#ffdda0;background:radial-gradient(circle,#88632c66,#112331 75%);box-shadow:0 0 0 4px #f9b14b40,0 0 0 6px #ffb84918,0 0 23px #ffbb5159,inset 0 0 13px #ffcf7b20}
.compass-destination:focus-visible .compass-destination-icon{outline:2px solid #ffe8bc;outline-offset:8px}.compass-destination:focus-visible>span:last-child{text-decoration:underline;text-underline-offset:5px}
.compass-selection{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #6e91a13d;padding-top:14px;margin:4px 5% 0 8%;font-size:11px;color:#b4c6d4}
.compass-selection>a{color:#f5d18e;white-space:nowrap;font-weight:600}.compass-selection>a span{margin-left:14px}
@media(min-width:1500px){.compass-menu-hero .voyage-stage{min-height:700px}}
@media(min-width:901px) and (max-width:1200px){.compass-menu-hero .voyage-stage{grid-template-columns:38% 62%;min-height:600px}.compass-navigation{--icon-size:44px;--hit-size:48px}.compass-destination{gap:9px}.compass-destination-icon svg{width:23px;height:23px}.compass-destination>span:last-child{max-width:112px;font-size:9px;letter-spacing:.03em}.compass-menu-hero .voyage-copy h1{font-size:clamp(43px,4.5vw,58px)}}
@media(max-width:900px){.compass-menu-hero .voyage-stage{grid-template-columns:1fr;padding:40px 0 28px;min-height:0}.compass-menu-hero .voyage-copy{min-height:0;padding:0 0 35px}.compass-menu-hero .voyage-copy h1{font-size:clamp(48px,7vw,65px)}.compass-menu-hero .voyage-copy h1 br:nth-of-type(1),.compass-menu-hero .voyage-copy h1 br:nth-of-type(3){display:none}.compass-menu-hero .voyage-intro{max-width:48ch}.compass-navigation{justify-self:center;max-width:660px}.compass-menu-hero .voyage-scene{height:auto;background-position:60% bottom}}
@media(max-width:600px){.compass-menu-hero .voyage-stage{padding-top:34px;width:calc(100% - 36px)}.compass-menu-hero .voyage-copy h1{font-size:clamp(40px,10vw,58px);line-height:1.02;max-width:10ch}.compass-menu-hero .voyage-copy h1 br{display:none!important}.compass-menu-hero .voyage-copy h1 span{display:block}.compass-menu-hero .voyage-intro{font-size:13px;max-width:36ch}.compass-navigation{--icon-size:34px;--hit-size:44px}.compass-instruction{font-size:8px;margin-bottom:14px;letter-spacing:.2em}.compass-destination{gap:7px}.compass-destination-icon{box-shadow:0 0 0 3px #06141c99,0 0 0 4px #7292a326}.compass-destination-icon svg{width:19px;height:19px}.compass-destination>span:last-child{font-size:8px;max-width:82px;line-height:1.45;padding:7px 0;letter-spacing:.015em}.compass-destination.is-pointed .compass-destination-icon{box-shadow:0 0 0 3px #f9b14b40,0 0 15px #ffbb5159,inset 0 0 10px #ffcf7b20}.compass-selection{font-size:10px;margin-inline:3%;gap:12px}.compass-selection>a span{margin-left:5px}.compass-menu-hero:before{background:linear-gradient(180deg,#03111e75,transparent 70%,#03111e88)}.compass-menu-hero .voyage-proof{margin-top:20px}}
@media(max-width:600px){.compass-destination>span:last-child{font-size:9px;line-height:1.35}}
@media(prefers-reduced-motion:reduce){.compass-star-layer,.compass-destination,.compass-destination-icon{transition:none}}