/* Sureka micro-interactions */
@keyframes sx-shake{0%,100%{transform:translateX(0)}10%{transform:translateX(-11px)}22%{transform:translateX(10px)}34%{transform:translateX(-8px)}46%{transform:translateX(6px)}58%{transform:translateX(-4px)}70%{transform:translateX(2px)}82%{transform:translateX(-1px)}}
@keyframes sx-draw{to{stroke-dashoffset:0}}
@keyframes sx-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sx-pulse{0%{box-shadow:0 0 0 0 rgba(26,151,212,.55)}100%{box-shadow:0 0 0 14px rgba(26,151,212,0)}}
@keyframes sx-pop{0%{transform:scale(.55)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes sx-tick{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}

/* invalid fields: red ring, and the field shakes "no" */
.is-invalid{box-shadow:0 0 0 2px rgba(214,48,39,.6)!important;background-color:rgba(214,48,39,.07)!important}
@media (prefers-reduced-motion:no-preference){
  .sx-shake{animation:sx-shake .56s cubic-bezier(.36,.07,.19,.97) both}
  .sx-in{animation:sx-in .5s cubic-bezier(.2,.7,.2,1) both}
  .sx-pulse{animation:sx-pulse 1s ease-out 2}
  .steps li.on::before{animation:sx-pop .5s cubic-bezier(.3,.7,.3,1.4)}
}

/* submit success: the button turns green and draws a tick */
.sx-ok,.qm-row button[type=submit].sx-ok,.form-row button[type=submit].sx-ok,.enq .btn-p.sx-ok{color:#fff!important;background:rgba(23,128,79,.92)!important;box-shadow:0 12px 26px -12px rgba(23,128,79,.7)!important;pointer-events:none}
.sx-ok svg{animation:sx-tick .45s cubic-bezier(.3,.7,.3,1.4) both}
.sx-ok svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:sx-draw .4s .15s ease forwards}

/* sliding highlight behind the menu links */
.nav.sx-has{position:relative;isolation:isolate}
.nav.sx-has a:hover,.nav.sx-has a[aria-current="page"]{background:none!important;box-shadow:none!important}
.sx-ind{position:absolute;top:0;left:0;border-radius:999px;background:rgba(255,255,255,.6);box-shadow:0 6px 16px -10px rgba(20,20,44,.4);z-index:-1;pointer-events:none;opacity:0;transition:transform .42s cubic-bezier(.3,.8,.2,1),width .42s cubic-bezier(.3,.8,.2,1),opacity .25s ease}

/* header tightens once you scroll */
.hdr-in{transition:height .4s cubic-bezier(.3,.8,.2,1)}
.brand img{transition:height .4s cubic-bezier(.3,.8,.2,1)}
.hdr.sx-compact .hdr-in{height:66px!important}
.hdr.sx-compact .brand img{height:52px!important}

/* cards lean toward the pointer, with a soft light glare */
.sx-tilt{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;will-change:transform}
.sx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.4),transparent 45%);z-index:3}
.sx-tilt:hover .sx-glare{opacity:1}

/* copy email or phone */
.sx-copy{cursor:copy;border-bottom:1px dashed currentColor;padding-bottom:1px}
.sx-toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:rgba(20,20,44,.86);color:#fff;font:500 15px/1 "Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 18px 40px -16px rgba(12,11,33,.6);opacity:0;transform:translate(-50%,24px) scale(.96);transition:opacity .3s ease,transform .4s cubic-bezier(.3,.8,.2,1.2);pointer-events:none}
.sx-toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
.sx-toast svg{color:#7FE3B0}

/* close button spins on hover */
.qm-x svg{transition:transform .35s cubic-bezier(.3,.8,.2,1)}
.qm-x:hover svg{transform:rotate(90deg)}

/* page transition: the logo assembles from its dots */
.sx-loader{animation:sx-autohide .4s 3.6s forwards}
.sx-loader.done{opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s;pointer-events:none}
.sx-logo{position:relative;width:min(58vw,250px);aspect-ratio:1;transition:transform .55s cubic-bezier(.3,.8,.2,1)}
.sx-loader.done .sx-logo{transform:scale(1.08)}
.sx-logo svg{width:100%;height:100%;display:block;overflow:visible}
.sx-word{position:absolute;left:47%;top:50%;transform:translateY(-52%);display:flex;font:600 calc(min(58vw,250px) * .21)/1 "Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.015em;color:#1A97D4;font-variation-settings:"wdth" 92}
.sx-bar{position:absolute;left:18%;right:18%;bottom:-34px;height:2px;border-radius:2px;background:#DCDFE8;overflow:hidden}
.sx-bar i{display:block;height:100%;background:#1A97D4;transform-origin:left;transform:scaleX(0)}
.sx-ld,.sx-lg{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .sx-ld{animation:sx-gather .72s cubic-bezier(.2,.8,.25,1.15) both;animation-delay:var(--d)}
  .sx-lg{animation:sx-fade .5s ease both;animation-delay:var(--d)}
  .sx-word span{display:inline-block;animation:sx-letter .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.78s + var(--i) * 55ms)}
  .sx-bar i{animation:sx-bar 1.5s cubic-bezier(.4,0,.2,1) .1s forwards}
}
@media (prefers-reduced-motion:reduce){.sx-bar i{transform:scaleX(1)}}
@keyframes sx-gather{from{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.15)}to{opacity:1;transform:none}}
@keyframes sx-fade{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes sx-letter{from{opacity:0;transform:translateY(45%)}to{opacity:1;transform:none}}
@keyframes sx-bar{to{transform:scaleX(1)}}
@keyframes sx-autohide{to{opacity:0;visibility:hidden}}
html:has(.sx-loader:not(.done)){overflow:hidden}
.sx-veil{position:fixed;inset:0;z-index:200;background:#F5F6F9;opacity:0;transition:opacity .28s ease;pointer-events:none}
.sx-veil.on{opacity:1;pointer-events:auto}

/* sleek scrollbars */
html{scrollbar-width:thin;scrollbar-color:rgba(20,20,44,.26) transparent}
:root[data-mode="night"]{scrollbar-color:rgba(255,255,255,.3) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(20,20,44,.24);border-radius:999px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(14,123,191,.6);background-clip:padding-box}

/* quiet number fields and clean focus rings that follow each box's shape */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input:focus,select:focus,textarea:focus,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none!important}
.fld2 input:not([type=checkbox]):focus,.fld2 select:focus,.fld2 textarea:focus,.sv-f input:focus,.sv-f textarea:focus,.qm-f input:focus,.qm-f textarea:focus,.ci-f input:focus,.ci-f select:focus,.ci-date input:focus,.ctrl select:focus,.mac-lead input:focus{border-color:#1A97D4!important;box-shadow:0 0 0 3px rgba(26,151,212,.22)!important;background-color:#fff!important}
.fld input:focus,.fld select:focus,.fld textarea:focus{box-shadow:0 0 0 3px rgba(26,151,212,.4)!important}
.rs:focus-within,.r-search:focus-within,.dim .num:focus-within,.qty:focus-within{border-color:#1A97D4!important;box-shadow:0 0 0 3px rgba(26,151,212,.22)}
.rs input:focus,.r-search input:focus,.dim .num input:focus,.qty input:focus,.srch-top input:focus,.mac-in input:focus{box-shadow:none!important;border-color:transparent!important;background:transparent!important}
.mac-in input:focus{box-shadow:inset 0 0 0 1.5px #0B84FE!important;background:#fff!important}

/* lighter rendering on modest devices */
.lite *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.lite .hdr{background:rgba(245,246,249,.95)!important}
.lite .ui-ov{background:rgba(12,11,33,.6)}