/* Eligent Labs / motion and process icons · Nov 2026 */
.big-step{--step-color:#FF75B5;position:relative;overflow:hidden;align-items:center;transition:border-color .35s ease,background .35s ease,box-shadow .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.big-step[data-step="1"]{--step-color:#FF75B5}
.big-step[data-step="2"]{--step-color:#6DCEFF}
.big-step[data-step="3"]{--step-color:#B49AFF}
.big-step[data-step="4"]{--step-color:#75F3B8}
.big-step[data-step="5"]{--step-color:#FFB36B}
.big-step>span:first-child{color:var(--step-color)}
.big-step-symbol{width:58px;height:58px;justify-self:end;display:grid;place-items:center;color:var(--step-color);background:color-mix(in srgb,var(--step-color) 10%,transparent);border:1px solid color-mix(in srgb,var(--step-color) 24%,transparent);border-radius:17px;transition:transform .4s cubic-bezier(.2,.8,.2,1),background .35s ease,border-color .35s ease;z-index:1}
.big-step-symbol svg{width:29px;height:29px;overflow:visible}
.big-step:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--step-color) 45%,transparent);background:linear-gradient(110deg,color-mix(in srgb,var(--step-color) 8%,#142536),#142536 55%);box-shadow:0 20px 55px rgba(0,0,0,.16)}
.big-step:hover .big-step-symbol{transform:translateY(-3px) rotate(-5deg) scale(1.07);background:color-mix(in srgb,var(--step-color) 18%,transparent);border-color:color-mix(in srgb,var(--step-color) 50%,transparent)}
.big-step:before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:8px;background:var(--step-color);opacity:.75;transform:scaleY(.25);transform-origin:center;transition:transform .5s ease,opacity .5s ease}
.big-step:hover:before{transform:scaleY(1);opacity:1}
@media (max-width:760px){.big-step{grid-template-columns:48px minmax(0,1fr) 38px;gap:13px;align-items:center}.big-step-symbol{width:38px;height:38px;border-radius:12px}.big-step-symbol svg{width:21px;height:21px}}
@media (max-width:440px){.big-step{padding:19px 14px;grid-template-columns:36px minmax(0,1fr) 32px;gap:10px}.big-step-symbol{width:32px;height:32px}.big-step-symbol svg{width:19px;height:19px}.big-step h3{font-size:1.2rem}}
/* Motion enhancement - progressive enhancement: content never hidden without JS */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  body.motion-ready .motion-reveal{opacity:0;transform:translate3d(0,24px,0);filter:blur(5px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.16,1,.3,1),filter .8s ease;transition-delay:var(--reveal-delay,0ms)}
  body.motion-ready .motion-reveal.motion-visible{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
  .hero .hero-copy h1{animation:labs-title-in .9s cubic-bezier(.16,1,.3,1) both}
  .hero-art .art-frame{animation:labs-art-enter 1.1s cubic-bezier(.16,1,.3,1) both, labs-art-float 9s ease-in-out 1.1s infinite alternate}
  .ambient:before{animation:labs-ambient 20s ease-in-out infinite alternate}
  .cta-orb{animation:labs-orb 10s ease-in-out infinite alternate}
  .service-card,.mini-card,.work-card,.aside-card,.faq-item,.art-frame,.image-panel{transition:transform .45s cubic-bezier(.2,.75,.25,1),box-shadow .45s ease,border-color .4s ease,background .4s ease}
  .mini-card:hover,.aside-card:hover,.work-card:hover{transform:translateY(-5px);border-color:rgba(156,169,255,.42);box-shadow:0 25px 55px rgba(0,0,0,.16)}
  .image-panel img,.work-image img,.story-visual img{transition:transform .9s cubic-bezier(.2,.75,.25,1)}
  .image-panel:hover img,.work-card:hover img,.story-visual:hover img{transform:scale(1.04)}
  .btn{transition:transform .27s ease,filter .27s ease,box-shadow .3s ease,background .3s ease}
  .btn:hover{transform:translateY(-2px);filter:brightness(1.07)}
  .text-link span,.sc-link span{transition:transform .3s ease;display:inline-block}
  .text-link:hover span,.sc-link:hover span{transform:translate(3px,-3px)}
  .eyedot{animation:labs-dot 3s ease-in-out infinite}
  @keyframes labs-title-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
  @keyframes labs-art-enter{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
  @keyframes labs-art-float{from{translate:0 0}to{translate:0 -8px}}
  @keyframes labs-ambient{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.07)}}
  @keyframes labs-orb{from{transform:translate(-5%,-2%) scale(1)}to{transform:translate(6%,5%) scale(1.08)}}
  @keyframes labs-dot{0%,100%{box-shadow:0 0 0 0 rgba(112,221,246,.3)}50%{box-shadow:0 0 0 6px rgba(112,221,246,0)}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}body.motion-ready .motion-reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}.hero-art .art-frame,.ambient:before,.cta-orb,.eyedot{animation:none!important}.big-step,.big-step-symbol,.btn,.service-card,.mini-card{transition:none!important}}
@media (min-width:761px){.big-step{grid-template-columns:90px minmax(0,1fr) 66px}}

/* 2026-11-14 — form controls unified across browsers */
.contact-form-panel .field select {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  min-height: 56px;
  padding: 0 52px 0 16px;
  border: 1px solid rgba(183,220,235,.22);
  border-radius: 10px;
  background-color: #0b1928;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ACC6DD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 17px center;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  color: #f3f9fb;
  font-size: .9rem;
  line-height: 1.3;
  cursor: pointer;
}
.contact-form-panel .field input:not([type=checkbox]) {
  min-height: 56px;
  height: 56px;
  padding: 0 16px;
}
.contact-form-panel .field select:focus-visible {
  outline: 2px solid #9eabff;
  outline-offset: 2px;
}
.contact-form-panel .field select option {
  color: #f3f9fb;
  background-color: #101b30;
}
@media (max-width:680px) {
  .contact-form-panel .field select,
  .contact-form-panel .field input:not([type=checkbox]) {
    height: 54px;
    min-height: 54px;
    font-size: 16px;
  }
}