/* Keyspur site motion layer. Pairs with motion.js (home, trade pages).
   Nothing here hides content unless motion.js is about to show it: the head snippet sets html.mo only when the visitor
   hasn't asked for reduced motion, and motion.js adds html.mo-on (or html.mo-off, which undoes every hidden state). */
:root{--m-ease:cubic-bezier(.16,1,.3,1)}

/* ---- page-to-page transitions (a cross-fade with a small rise; browsers without the feature just navigate) ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:m-vt-out .3s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:m-vt-in .65s var(--m-ease) both}
@keyframes m-vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes m-vt-in{from{opacity:0;transform:translateY(20px)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ---- hidden starting states (only while motion is about to play) ---- */
html.mo:not(.mo-off) .reveal{opacity:0}
html.mo:not(.mo-off) .hero h1{visibility:hidden}
html.mo-on:not(.mo-off) .hero h1{visibility:visible}
html.mo:not(.mo-off) .hero .copy>*:not(h1),html.mo:not(.mo-off) .hero .desk,html.mo:not(.mo-off) .hero .legend,html.mo:not(.mo-off) .hero .radar,html.mo:not(.mo-off) .hero .grid-bg svg{opacity:0}
/* if anything goes wrong, everything shows */
html.mo-off .reveal,html.mo-off .hero .copy>*,html.mo-off .hero .desk,html.mo-off .hero .legend,html.mo-off .hero .radar,html.mo-off .hero .grid-bg svg{opacity:1!important;transform:none!important}
html.mo-off .hero h1{visibility:visible}
html.mo-off .m-wi{transform:none!important}

/* the hero's big drawings: rotation and offset as separate properties, so motion.js is free to use transform */
@supports (translate:0){
  .hero .radar{transform:none;translate:0 -50%;rotate:-8deg}
  .hero .grid-bg svg{transform:none;translate:0 -50%;rotate:-8deg}
}

/* ---- header: a progress hairline, a condensed bar once you scroll, a line under the current section's link ---- */
.top{transition:background-color .45s,box-shadow .45s}
.top .wrap{transition:height .5s var(--m-ease)}
.top.solid{background:rgba(11,22,40,.94);box-shadow:0 18px 40px -26px rgba(0,0,0,.7)}
.top.solid .wrap{height:62px}
.m-sp{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;overflow:hidden}
.m-sp i{display:block;height:100%;background:linear-gradient(90deg,rgba(255,210,63,0),#FFD23F 85%);transform:scaleX(0);transform-origin:left}
.top nav a:not(.btn){position:relative;padding:6px 0}
.top nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:#FFD23F;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--m-ease)}
.top nav a:not(.btn):hover::after,.top nav a.on::after{transform:scaleX(1);transform-origin:left}
.top nav a.on{color:#fff}

/* ---- a little film grain over everything, which also takes the flat look off the big colour areas ---- */
body::after{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- split headlines: each word rises out of its own mask ---- */
.m-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .05em .14em;margin:-.12em -.05em -.14em}
.m-wi{display:inline-block;will-change:transform;transform-origin:0 100%}
.m-iw{display:inline}

/* ---- sections: a rule that draws itself as the section arrives ---- */
html.mo-on .m-sec{position:relative;border-top-color:transparent}
html.mo-on .m-sec::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,#FFD23F,#2A4470 14%,#2A4470);transform:scaleX(var(--ln,0));transform-origin:left}
.m-amb-host{position:relative;overflow:clip}
.m-amb-host>.wrap{position:relative;z-index:1}
.m-amb{position:absolute;z-index:0;width:min(60vw,820px);aspect-ratio:1;border-radius:50%;pointer-events:none;will-change:transform;-webkit-mask-image:radial-gradient(circle,#000 20%,transparent 68%);mask-image:radial-gradient(circle,#000 20%,transparent 68%)}
.m-amb.y{right:-14vw;top:-8%;background:radial-gradient(circle,rgba(255,210,63,.10),transparent 66%)}
.m-amb.b{left:-18vw;bottom:-10%;background:radial-gradient(circle,rgba(70,120,210,.20),transparent 66%)}

/* ---- the hero's soft light that follows the cursor ---- */
.m-gf{position:absolute;left:0;top:0;width:760px;height:760px;margin:-380px 0 0 -380px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(255,210,63,.11),transparent 62%);opacity:0;transition:opacity .8s}
.hero:hover .m-gf{opacity:1}

/* ---- the marquee band ---- */
.m-mq{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(16px,2.2vw,28px) 0;user-select:none}
.m-mq-tr{display:flex;width:max-content;will-change:transform}
.m-mq-it{display:flex;align-items:center;flex:none;gap:clamp(22px,3vw,46px);padding-right:clamp(22px,3vw,46px);font:900 clamp(2.3rem,5.6vw,5rem)/1 var(--display);text-transform:uppercase;white-space:nowrap}
.m-mq-it span{color:transparent;-webkit-text-stroke:1.5px rgba(232,239,248,.5)}
.m-mq-it span:nth-of-type(even){color:var(--hail);-webkit-text-stroke:0}
.m-mq-it i{flex:none;width:.4em;height:.4em;background:var(--r-yellow);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}

/* ---- cards: a soft light and a thin ring that follow the cursor (mouse devices only) ---- */
@media (hover:hover) and (pointer:fine){
  html.mo-on .m-spot{position:relative;isolation:isolate;--mx:50%;--my:50%}
  html.mo-on .m-spot::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;
    background:radial-gradient(380px circle at var(--mx) var(--my),rgba(255,210,63,.12),transparent 65%)}
  html.mo-on .m-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .4s;
    background:radial-gradient(240px circle at var(--mx) var(--my),#FFD23F,transparent 70%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
  html.mo-on .m-spot:hover::before,html.mo-on .m-spot:hover::after{opacity:1}
  html.mo-on a.card:hover,html.mo-on .tcard:hover{box-shadow:inset 0 0 0 1px var(--line)}
  html.mo-on a.card .more,html.mo-on .tcard i{transition:transform .5s var(--m-ease)}
  html.mo-on a.card:hover .more,html.mo-on .tcard:hover i{transform:translateX(7px)}
}

/* ---- buttons: a glint crosses the button on hover ---- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-50%;width:34%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg) translateX(-160%);transition:transform .9s var(--m-ease)}
.btn:hover::after{transform:skewX(-20deg) translateX(520%)}
html .btn.primary:hover{background:#FFE27A;border-color:#FFE27A}
html .cta .btn.primary:hover{background:#000;border-color:#000}

/* ---- the set-up steps light up one after another as you reach them ---- */
html.mo-on .step>*{transition:opacity .6s}
html.mo-on .step:not(.is-on)>*{opacity:.4}
html.mo-on .step .n{transition:color .6s,-webkit-text-stroke-color .6s}
html.mo-on .step:not(.is-on) .n{color:transparent;-webkit-text-stroke:1.5px var(--r-yellow)}
html.mo-on .step.is-on .n{-webkit-text-stroke:1.5px transparent}

/* ---- questions open and close smoothly where the browser can do it ---- */
@supports (interpolate-size:allow-keywords){
  .faq details{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .45s var(--m-ease),opacity .35s,content-visibility .45s allow-discrete}
  .faq details[open]::details-content{block-size:auto;opacity:1}
}

/* ---- the closing band: outlined words drift across it as you scroll past ---- */
.cta{position:relative}
.cta>.wrap{position:relative;z-index:1}
.m-bgw{position:absolute;left:0;right:0;bottom:-.06em;z-index:0;pointer-events:none;user-select:none;display:grid;gap:0;font:900 clamp(4.6rem,12vw,10.5rem)/.8 var(--display);text-transform:uppercase;white-space:nowrap}
.m-bgw span{display:block;width:max-content;color:transparent;-webkit-text-stroke:1.5px rgba(15,29,51,.2)}
.m-bgw span:nth-child(2){-webkit-text-stroke-color:rgba(15,29,51,.11)}
html.mo-on .cta[data-words]{padding-bottom:calc(clamp(90px,12vw,170px) + 12vw)}
/* ---- the closing band opens up from a rounded card to the full width (the clip is driven by scroll) ---- */
.cta{overflow-x:clip}

@media (prefers-reduced-motion:reduce){
  .m-gf,.m-amb{display:none}
  .btn::after{display:none}
}
@media (max-width:900px){
  .m-amb{opacity:.7}
}