@font-face{font-family:"Departure Mono";src:url(../fonts/DepartureMono.woff2) format("woff2");font-display:swap}
/* The hero: a full-width wordmark with the product standing in front of it, the line and survey button bottom-left, the range bottom-right. */
:root{
  --f-ui:"Inter",system-ui,sans-serif;
  --f-px:"Departure Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --L:1.97vw; --R:2.9vw;                 /* left / right page margins */
  /* top zone sits on black/navy, bottom zone on the pale end of the sky */
  --ink-top:#fff; --ink-top-2:#8e9097;
  --ink-mid:#fff; --ink-mid-2:rgba(255,255,255,.55);
  --ink-low:#141823; --ink-low-2:#4a5061; --line-low:rgba(20,24,35,.16);
  --tile:rgba(222,230,246,.16); --tile-edge:rgba(255,255,255,.18);
}
[data-theme=light]{
  --ink-top:#0d0f14; --ink-top-2:#8a8b92;
  --ink-mid:#0d0f14; --ink-mid-2:rgba(13,15,20,.5);
  --tile:rgba(255,255,255,.5); --tile-edge:rgba(13,15,20,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#000;font-family:var(--f-ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:#a9bce6;color:#0d0f14}
button,input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1.5px solid #8fb0ff;outline-offset:3px;border-radius:3px}

.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;isolation:isolate}
.sky{position:absolute;inset:0;z-index:-2;transition:opacity 1.1s var(--ease-io)}
.sky--dark{background:linear-gradient(180deg,#000 0%,#06070b 19%,#101e35 30%,#1a3756 40%,#355273 50%,#516c8a 60%,#788aa6 70%,#9fa8ba 80%,#bec1cd 88%,#d7d2dd 94%,#ebe4e9 100%)}
.sky--light{opacity:0;background:linear-gradient(180deg,#f3f2f5 0%,#efeef2 35%,#e8e6ee 60%,#dedbe7 80%,#d2cfe0 100%)}
[data-theme=light] .sky--light{opacity:1}

/* ---------- header ---------- */
.top{position:absolute;top:0;left:var(--gx);right:var(--gx);height:clamp(64px,8.8vh,92px);display:flex;align-items:center;z-index:6}
.nav{display:flex;align-items:center;gap:1.6vw;margin-right:1.6vw;font-size:clamp(10px,.78vw,14px);letter-spacing:0;text-transform:uppercase}
.nav a{display:inline-flex;align-items:center;gap:.32em;color:var(--ink-top-2);transition:color .3s var(--ease)}
.nav a:hover,.nav a[aria-current]{color:var(--ink-top)}
.nav .tri{width:.62em;height:.62em;fill:currentColor;margin-top:-.08em}
.nmk{display:block;height:1.05em;aspect-ratio:93/168;margin-right:.18em;background:currentColor;-webkit-mask:url(../img/mark.svg) center/contain no-repeat;mask:url(../img/mark.svg) center/contain no-repeat}   /* the auro mark marks the current page, as the reference's glyph does */
.mode{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:3px;width:clamp(96px,7.3vw,128px);height:clamp(28px,3.6vh,36px);border:0;border-radius:99px;cursor:pointer;
  background:linear-gradient(90deg,#0a1433 0%,#183a8c 45%,#2e5cc9 75%);box-shadow:inset 0 0 0 1px rgba(160,190,255,.22)}
.mode::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:99px;background:#fff;transition:transform .55s var(--ease)}
[data-theme=dark] .mode::before{transform:translateX(100%)}
.mode span{position:relative;z-index:1;display:grid;place-items:center;font-family:var(--f-px);font-size:clamp(9px,.68vw,12px);letter-spacing:.05em;color:#7d98e6;transition:color .45s var(--ease)}
[data-theme=dark] .mode .m-d,[data-theme=light] .mode .m-l{color:#0d0f14}
[data-theme=light] .mode{background:linear-gradient(90deg,#fff 0%,#e9eefb 40%,#1d3f99 70%,#08122e 100%)}
[data-theme=light] .mode .m-d{color:#9db2ec}

/* the mark, home link at the left of the bar, turned from pointing right to pointing up and right */
.hmk{display:block;margin-right:auto;color:var(--ink-top)}
.mark{display:block;width:clamp(18px,1.5vw,26px);aspect-ratio:93/168;background:currentColor;-webkit-mask:url(../img/mark.svg) center/contain no-repeat;mask:url(../img/mark.svg) center/contain no-repeat;transform:rotate(-45deg)}

/* ---------- wordmark: the drawn logotype across the page, behind the product; never so tall that it reaches the line below ---------- */
.word{position:absolute;left:var(--gx);top:clamp(84px,12vh,130px);width:min(calc(100vw - 2 * var(--gx)),calc(36vh * 4.093));margin:0;line-height:0;color:var(--ink-top);z-index:0}
.word svg{display:block;width:100%;height:auto;overflow:visible}
.word .ch{opacity:0;transform-box:fill-box;transform:translateY(18%);filter:blur(.04em)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- the line and the survey button, on the pale foot of the sky ---------- */
.hb-copy{position:absolute;left:var(--gx);bottom:clamp(22px,3.4vh,48px);width:min(25vw,400px);color:var(--ink-low);z-index:4}
.hb-t{font-family:var(--f-head);font-weight:400;font-size:clamp(30px,2.8vw,52px);line-height:1;letter-spacing:-.03em}
.hb-t span{display:block;opacity:0;transform:translateY(.4em)}
.hb-l{margin:clamp(12px,1.4vh,18px) 0 clamp(18px,2.4vh,26px);max-width:34ch;font-size:clamp(14px,1.02vw,16px);font-weight:300;line-height:1.4;color:var(--ink-low-2)}
.hb-copy .btn{--btn:#0d0f14;--btn-ink:#e9eaee;--acc:#2e5cc9;--acc-ink:#fff}

/* ---------- the range: counter, name, spec, and a strip of the five products ---------- */
.hb-pick{position:absolute;right:var(--gx);bottom:clamp(22px,3.4vh,48px);width:min(25vw,400px);display:flex;flex-direction:column;align-items:flex-end;text-align:right;color:var(--ink-low);z-index:4}
.hb-c{font-family:var(--f-px);font-size:12px;letter-spacing:.04em;color:var(--ink-low-2)}
.hb-c #pn{color:var(--ink-low)}
.hb-n{margin-top:8px;font-family:var(--f-head);font-weight:500;font-size:clamp(22px,1.8vw,32px);letter-spacing:-.015em;line-height:1.1;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.hb-s{margin-top:6px;font-family:var(--f-px);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-low-2);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.hb-n.out,.hb-s.out{opacity:0;transform:translateY(5px)}
.hb-ctl{display:flex;gap:6px;margin-top:clamp(14px,2vh,20px)}
.hb-th{display:flex;gap:6px}
.hb-ctl button{display:grid;place-items:center;width:clamp(42px,3.3vw,52px);aspect-ratio:1;border:0;border-radius:8px;cursor:pointer;color:var(--ink-low);
  background:var(--tile);box-shadow:inset 0 0 0 1px var(--tile-edge);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background .4s var(--ease),box-shadow .4s var(--ease)}   /* floating tiles, as the old wheel's */
.hb-ctl button:hover{background:rgba(255,255,255,.55)}
.hb-ctl img{width:76%;height:76%;object-fit:contain;transition:scale .5s var(--ease)}
.hb-ctl button:hover img{scale:1.06}
.hb-th [aria-pressed=true]{background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1.5px var(--ink-low)}
.hb-a svg{width:12px;height:12px}

/* ---------- product stage: each product is placed in px by hero.js (contained in its box, standing on the box's bottom) ---------- */
.stage{position:absolute;inset:0;z-index:1;pointer-events:none;--dy:0px;--s:1}
/* product change: the old one drops and fades, the new one comes down into place (opacity, translate, scale only: no filters on big images) */
.stage .p{position:absolute;left:var(--x);top:var(--y);height:var(--h);width:auto;max-width:none;opacity:0;--dy:-4vh;--s:1.02;scale:var(--s);translate:0 var(--dy);will-change:opacity,translate,scale;
  transition:opacity .9s var(--ease-io),translate 1.2s var(--ease),scale 1.2s var(--ease)}
.stage .panel{transform-origin:100% 0;transform:skewY(-4deg)}   /* a light skew steepens the panel's top edge */
/* everything moves top to bottom: the new product settles down from above while a soft edge reveals it downward */
.stage .p.in{opacity:1;--dy:0px;--s:1}
/* the entrance reveal lives on its own class, dropped when it finishes, so nothing can replay it later */
.stage .p.enter{-webkit-mask:linear-gradient(180deg,#000 45%,transparent 55%) 0 0/100% 300% no-repeat;mask:linear-gradient(180deg,#000 45%,transparent 55%) 0 0/100% 300% no-repeat;animation:reveal 1.3s var(--ease) both}
@keyframes reveal{from{-webkit-mask-position:0 100%;mask-position:0 100%}}
.stage .p.out{opacity:0;--dy:3vh;--s:.985;transition:opacity .5s var(--ease-io),translate .7s var(--ease-io),scale .7s var(--ease-io)}
.stage .p.snap{transition:none!important}
[data-theme=light] .stage .p.xray,[data-theme=dark] .stage .p.has-xray{opacity:0!important}
.stage .sweep{position:absolute;opacity:0;pointer-events:none;z-index:3}
/* theme change: the colour band (brightest at 52% of its 300% track, travelling down) carries a tight edge; the new version is
   revealed behind it and the old one removed by the inverse mask, so each part changes exactly as the band crosses it */
[data-theme] .stage .p.in.hold{opacity:1!important;transition:none;z-index:2;-webkit-mask:linear-gradient(180deg,transparent 49%,#000 55%) 0 100%/100% 300% no-repeat;mask:linear-gradient(180deg,transparent 49%,#000 55%) 0 100%/100% 300% no-repeat;animation:wipe 1.6s var(--ease-io) forwards}
.stage .p.wipe{z-index:2;transition:none;-webkit-mask:linear-gradient(180deg,#000 49%,transparent 55%) 0 100%/100% 300% no-repeat;mask:linear-gradient(180deg,#000 49%,transparent 55%) 0 100%/100% 300% no-repeat;animation:wipe 1.6s var(--ease-io) forwards}
@keyframes wipe{to{-webkit-mask-position:0 0;mask-position:0 0}}
.sweep.run{animation:sweep 1.6s var(--ease-io)}
.sweep i{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(255,210,90,.0) 35%,rgba(255,206,92,.75) 45%,rgba(232,247,190,.8) 52%,rgba(110,165,255,.7) 60%,transparent 70%) 0 0/100% 300% no-repeat;mix-blend-mode:screen;animation:inherit}
@keyframes sweep{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}
.sweep.run i{animation:sweepx 1.6s var(--ease-io)}
@keyframes sweepx{from{background-position:0 100%}to{background-position:0 0}}

/* ---------- entrance ---------- */
.ready .word .ch{opacity:1;transform:none;filter:none;transition:opacity 1s var(--ease),transform 1.3s var(--ease),filter 1s var(--ease);transition-delay:calc(var(--i)*70ms + 80ms)}
.ready .hb-t span{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:calc(var(--i)*90ms + 600ms)}
.ready .hb-l,.ready .hb-go{animation:rise 1.2s var(--ease) .85s both}
.ready .hb-pick{animation:rise 1.2s var(--ease) 1s both}
.ready .top{animation:fade 1s var(--ease) .4s both}
@keyframes rise{from{opacity:0;transform:translateY(24px);filter:blur(8px)}}
@keyframes fade{from{opacity:0}}

/* ---------- phones: wordmark, then the product's name and arrows, the product full size rising from the foot, the line on a floating card ---------- */
@media (max-width:760px){
  .hero{min-height:640px}
  .top{height:64px}
  .nav{display:none}
  .mode{width:104px;height:32px}
  .mode span{font-size:10px}
  .mark{width:20px}
  .word{top:70px;width:calc(100vw - 2 * var(--gx))}
  .hb-pick{top:calc(70px + (100vw - 2 * var(--gx)) / 4.093 + 18px);bottom:auto;left:var(--gx);right:var(--gx);width:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:12px;text-align:left;color:var(--ink-top)}
  .hb-c{grid-column:1;color:var(--ink-top-2)}
  .hb-c #pn{color:var(--ink-top)}
  .hb-n{grid-column:1;margin-top:4px;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hb-s,.hb-th{display:none}
  .hb-ctl{grid-column:2;grid-row:1/3;margin:0}
  .hb-ctl button{width:44px;color:var(--ink-top);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
  [data-theme=light] .hb-ctl button{background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(13,15,20,.1)}
  .hb-copy{left:var(--gx);right:var(--gx);bottom:16px;width:auto;padding:18px;border-radius:14px;background:rgba(243,242,245,.86);-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);box-shadow:inset 0 0 0 1px rgba(13,15,20,.07);color:#141823}   /* a floating card over the product's foot */
  .hb-t{font-size:30px}
  .hb-l{display:none}
  .hb-copy .btn{width:100%;justify-content:space-between;height:48px;margin-top:16px}
}
/* ?still: no motion, for measured captures */
.still *,.still *::before,.still *::after{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.2s!important;transition-delay:0s!important}
}