/* Orbit models: one Orbit on a turntable, the model names running underneath; click him for that model's details.
   Flat colour per model from the brand palette, a drafting grid, Inter 400/500/600 only.
   .om is the experience (the full-screen page's <body>, or the popover <dialog> on Meet Orbit). It sizes itself to its
   stage with container units, so the same rules work full screen and inset. */
@font-face{font-family:Inter;src:url("https://cdn.prod.website-files.com/6acdbdbd2e045e4cb7879ab7/6acdc0bc03c3d4a6d9dcd425_InterVariable.woff2") format("woff2");font-weight:100 900;font-display:swap}

.om{--om-bg:#0b004a;--om-ink:#ffffff;--om-soft:rgba(255,255,255,.62);--om-line:rgba(255,255,255,.07);--om-tile:rgba(255,255,255,.08);
  --om-stroke:rgba(255,255,255,.5);--om-top:96px;--om-hint-top:27px;--om-pad:clamp(16px,3vw,48px);
  --om-size:min(56cqh,74cqw);--om-floor:max(21cqh,calc(var(--om-name) * 1.25));--om-name:clamp(48px,9.4cqw,152px);
  background:var(--om-bg);color:var(--om-ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;
  transition:background-color .6s ease,color .6s ease}
.om.is-light{--om-ink:#0b004a;--om-soft:rgba(11,0,74,.66);--om-line:rgba(11,0,74,.06);--om-tile:rgba(11,0,74,.06);--om-stroke:rgba(11,0,74,.42)}
.om *{box-sizing:border-box}
.om-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.om svg.ic{width:20px;height:20px;stroke-width:1.5;vector-effect:non-scaling-stroke}

/* the full-screen page */
html:has(body.om-page),body.om-page{height:100%;margin:0}
body.om-page{overflow:hidden}
.om-top{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:20px;padding:24px var(--om-pad)}
.om-logo{display:block;line-height:0}
.om-logo img{width:134px;height:auto}
.om-logo__light{display:none}
.om:not(.is-light) .om-logo__dark{display:none}
.om:not(.is-light) .om-logo__light{display:block}
.om .om-tag{margin:0;padding:6px 10px;border-radius:6px;background:var(--om-line);color:var(--om-soft);font-size:14px;font-weight:500;line-height:1;letter-spacing:.04em;text-transform:uppercase}
.om .om-link{margin-left:auto;color:inherit;font-size:16px;font-weight:500;line-height:1.4;text-decoration:none}
.om .om-link span{display:inline-block;margin-left:4px;transition:transform .2s ease}
.om .om-link:hover span{transform:translate(2px,-2px)}
.om-page .om-stage{position:fixed;inset:0}

/* the stage and its drafting grid */
.om-stage{container:om/size;overflow:hidden;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}
.om-stage.is-dragging{cursor:grabbing}
.om-stage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--om-line) 1px,transparent 1px),linear-gradient(90deg,var(--om-line) 1px,transparent 1px);
  background-size:64px 64px;background-position:50% 0}
.om p,.om h2,.om dl,.om dd{margin:0}

/* what this model is */
/* what this model is: one line at the top left (the code is already in the details) */
.om .om-info{position:absolute;z-index:4;top:var(--om-top);left:var(--om-pad);width:min(22rem,calc(100cqw - 32px));transition:opacity .3s ease}
.om .om-info p{transition:opacity .25s ease}
.om .om-info__desc{font-size:18px;font-weight:400;line-height:1.45}
.om .om-info.is-swapping p{opacity:0}

/* Orbit on the turntable; the clear button over him opens the details */
.om-turn{position:absolute;left:50%;bottom:var(--om-floor);width:var(--om-size);height:var(--om-size);transform:translateX(-50%);perspective:1400px;
  transition:left .8s cubic-bezier(.2,.7,.2,1),bottom .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.om-orbit{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;pointer-events:none}
.om-orbit img{display:block;width:100%;height:100%;object-fit:contain}
.om-hit{position:absolute;inset:8% 20% 6%;z-index:2;padding:0;border:0;border-radius:24px;background:none;cursor:pointer}
.om-hit:focus-visible{outline:2px solid var(--om-ink);outline-offset:4px}
.om-table{position:absolute;left:-12%;right:-12%;bottom:-7%;width:124%;height:auto;overflow:visible;pointer-events:none}
.om-table__rim{fill:none;stroke:var(--om-stroke);stroke-width:1;vector-effect:non-scaling-stroke}
.om-table__ticks line{stroke:var(--om-stroke);stroke-width:1;vector-effect:non-scaling-stroke}
.om-table__dot{fill:var(--om-ink)}

/* the names: solid, with a small lens that follows the mouse and shows the outline inside it */
@property --om-r{syntax:"<length>";inherits:true;initial-value:0px}
.om-names{position:absolute;z-index:3;left:0;right:0;bottom:clamp(20px,5cqh,56px);height:calc(var(--om-name) * 1.8);pointer-events:none;
  transition:opacity .4s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.om .om-name{position:absolute;left:50%;bottom:0;margin:0;padding:0;border:0;background:none;font:inherit;font-size:var(--om-name);font-weight:600;
  line-height:.88;letter-spacing:-.045em;text-align:center;white-space:nowrap;color:var(--om-ink);
  cursor:pointer;pointer-events:auto;will-change:transform;--om-r:0px;--lx:50%;--ly:50%;transition:--om-r .35s cubic-bezier(.2,.7,.2,1)}
.om .om-name.is-lens{--om-r:clamp(36px,calc(var(--om-name) * .42),64px)}
.om .om-name__fill{display:block;
  -webkit-mask-image:radial-gradient(circle at var(--lx) var(--ly),transparent calc(var(--om-r) - .5px),#000 var(--om-r));
  mask-image:radial-gradient(circle at var(--lx) var(--ly),transparent calc(var(--om-r) - .5px),#000 var(--om-r))}
.om .om-name__line{position:absolute;inset:0;color:transparent;-webkit-text-stroke:1.5px var(--om-ink);clip-path:circle(var(--om-r) at var(--lx) var(--ly));pointer-events:none}
.om .om-name:focus-visible{outline:2px solid var(--om-ink);outline-offset:6px;border-radius:6px}

/* how to use it: small, centred in the top bar */
.om .om-hint{position:absolute;z-index:6;left:50%;top:var(--om-hint-top);transform:translateX(-50%);color:var(--om-soft);font-size:14px;font-weight:400;line-height:22px;white-space:nowrap;transition:opacity .3s ease}
.om .om-hint span{display:inline-block;min-width:20px;padding:0 5px;border-radius:4px;background:var(--om-line);line-height:20px;text-align:center}

/* details: Orbit steps right, the model's details fill the left */
.om .om-detail{position:absolute;z-index:4;left:var(--om-pad);top:var(--om-top);bottom:32px;width:min(36rem,46cqw);display:flex;flex-direction:column;
  justify-content:center;gap:28px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateX(-24px);
  transition:opacity .35s ease,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s linear .6s;cursor:auto;user-select:text;-webkit-user-select:text}
.om .om-detail__back{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:8px 14px 8px 10px;border:0;border-radius:6px;
  background:var(--om-tile);color:var(--om-ink);font:inherit;font-size:16px;font-weight:500;line-height:1.2;cursor:pointer}
.om .om-detail__body{transition:opacity .2s ease}
.om .om-detail__body.is-swapping{opacity:0}
.om .om-detail__code{color:var(--om-soft);font-size:14px;font-weight:500;line-height:1.3;letter-spacing:.04em;text-transform:uppercase}
.om .om-detail__name{margin-top:12px!important;font-size:40px;font-weight:600;line-height:1.05;letter-spacing:-.025em}
.om .om-detail__desc{margin-top:16px!important;color:var(--om-soft);font-size:18px;font-weight:400;line-height:1.45}
.om .om-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:28px!important}
.om .om-specs div{padding:14px 16px 16px;border-radius:6px;background:var(--om-tile)}
.om .om-specs dt{color:var(--om-soft);font-size:14px;font-weight:500;line-height:1.4}
.om .om-specs dd{margin-top:6px;font-size:16px;font-weight:400;line-height:1.4}
.om .om-detail__step{display:flex;gap:8px}
.om .om-detail__step button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:6px;background:var(--om-tile);color:var(--om-ink);cursor:pointer}
.om .om-detail button:focus-visible{outline:2px solid var(--om-ink);outline-offset:2px}

.om.is-detail .om-turn{left:72%;bottom:calc(50cqh - var(--om-size) * .42)}
.om.is-detail .om-names{opacity:0;transform:translateY(40px)}
.om.is-detail .om-names .om-name{pointer-events:none}
.om.is-detail :is(.om-info,.om-hint){opacity:0;pointer-events:none}
.om.is-detail .om-detail{opacity:1;visibility:visible;transform:none;transition:opacity .4s ease .15s,transform .6s cubic-bezier(.2,.7,.2,1) .1s,visibility 0s}
.om.is-detail .om-stage{cursor:auto}

/* the popover on Meet Orbit: an inset panel over the page, not a full-screen takeover */
html.om-locked{overflow:hidden}
.om-pop{width:min(calc(100% - 48px),1480px);max-width:none;height:min(calc(100svh - 96px),820px);max-height:none;margin:auto;padding:0;border:0;border-radius:8px;overflow:hidden}
.om-pop::backdrop{background:rgba(4,0,46,.62)}
.om-pop[open]{animation:om-pop-in .45s cubic-bezier(.2,.7,.2,1)}
@keyframes om-pop-in{from{opacity:0;transform:translateY(16px) scale(.98)}}
.om-pop .om-stage{position:absolute;inset:0}
.om-pop{--om-top:80px}
.om .om-pop__close{position:absolute;z-index:6;top:20px;right:20px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:6px;
  background:var(--om-tile);color:var(--om-ink);cursor:pointer}
.om .om-pop__close:focus-visible{outline:2px solid var(--om-ink);outline-offset:2px}
.om .om-pop__title{position:absolute;z-index:5;top:28px;left:var(--om-pad);margin:0;color:var(--om-ink);font-size:16px;font-weight:500;line-height:1.2}

/* small stages (phones, or a narrow popover) */
@container om (max-width:720px){
  .om .om-info{left:16px;right:16px;width:auto}
  .om .om-info__desc{font-size:16px;line-height:1.4}
  .om .om-hint{display:none}
  .om .om-detail{left:16px;right:16px;width:auto;top:calc(var(--om-top) + var(--om-size) * .46 + 16px);bottom:16px;justify-content:flex-start;gap:20px}
  .om .om-detail__back{position:absolute;top:0;left:0}
  .om .om-detail__body{margin-top:52px}
  .om .om-detail__name{font-size:32px}
  .om .om-specs{grid-template-columns:minmax(0,1fr)}
  .om.is-detail .om-turn{left:50%;bottom:calc(100cqh - var(--om-top) - var(--om-size));transform:translateX(-50%) scale(.46);transform-origin:50% 0}
}
@media (max-width:720px){
  .om{--om-size:min(50cqh,86cqw);--om-name:clamp(40px,13.5cqw,72px)}
  .om-page{--om-top:76px}
  .om .om-tag{display:none}
  .om-pop{width:calc(100% - 16px);height:calc(100svh - 16px)}
  .om-pop{--om-top:72px}
}

@media (prefers-reduced-motion:reduce){
  .om,.om .om-name,.om-info,.om-info p,.om .om-hint,.om-turn,.om-names,.om-detail,.om-detail__body{transition:none}
  .om-pop[open]{animation:none}
}
/* popover: a quiet way into the full-screen models page, beside the close button (the page is not in the nav) */
.om .om-pop__full{position:absolute;z-index:6;top:20px;right:72px;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:6px;background:var(--om-tile);color:var(--om-ink);font-size:14px;font-weight:500;line-height:1.2;text-decoration:none;transition:background-color .2s}
.om .om-pop__full:hover{filter:brightness(1.08)}
.om .om-pop__full:focus-visible{outline:2px solid var(--om-ink);outline-offset:2px}

/* Native Webflow page wrapper for the source body class. */
.om-root.om-page{position:fixed;inset:0;z-index:10000;height:100dvh;overflow:hidden}