/* Motion: flair that reads as care. Nothing loops, nothing bounces, reveals take under a second and hovers under half,
   and all of it switches off for anyone who asked their machine for reduced motion.
   Elements get .reveal from motion.js, so without JS the page simply shows; nothing is hidden by CSS alone. */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
/* Stagger siblings so a grid arrives as a ripple rather than a block. */
.reveal:nth-child(2){transition-delay:.12s}
.reveal:nth-child(3){transition-delay:.24s}
.reveal:nth-child(4){transition-delay:.36s}
.reveal:nth-child(5){transition-delay:.48s}
.reveal:nth-child(6){transition-delay:.60s}

/* The brand rule draws itself from the left, on load in the hero and on arrival elsewhere. */
@keyframes rule-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .rule{transform-origin:left;animation:rule-draw 1.1s cubic-bezier(.2,.7,.2,1) .2s both}
.reveal .rule{transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1) .3s}
.reveal.in .rule{transform:scaleX(1)}

/* Cards lift a touch and the accent bar grows. */
.svc,.case{transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease}
.svc:hover,.svc:focus-within{transform:translateY(-3px);box-shadow:var(--shadow-lift);position:relative;z-index:1}
.case:hover,.case:focus-within{transform:translateY(-3px);border-color:rgba(255,255,255,.28)}
.svc-mark{transition:width .5s cubic-bezier(.2,.7,.2,1)}
.svc:hover .svc-mark,.svc:focus-within .svc-mark{width:64px}
/* A soft glow on the primary button, in the brand cyan, only while hovered. */
.btn-primary{transition:transform .2s,box-shadow .35s,background .2s}
.btn-primary:hover,.btn-primary:focus-visible{box-shadow:0 2px 4px rgba(15,27,43,.06),0 12px 28px rgba(31,158,224,.28)}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal .rule,.hero .rule,.svc,.case,.svc-mark,.btn-primary{transition:none;animation:none}
  .reveal{opacity:1;transform:none}
  .reveal .rule{transform:none}
  .svc:hover,.case:hover{transform:none}
}

/* The remaining colored lines draw in as they arrive: the step tops, the card bars, the footer rule. */
.steps li.reveal{border-top-color:transparent}
.steps li.reveal::after{content:"";position:absolute;left:0;top:-3px;height:3px;width:100%;transform:scaleX(0);transform-origin:left;
  transition:transform 1s cubic-bezier(.2,.7,.2,1) .25s;background:var(--line)}
.steps li.reveal:nth-child(1)::after{background:var(--cyan)}
.steps li.reveal:nth-child(2)::after{background:var(--green)}
.steps li.reveal:nth-child(3)::after{background:var(--gold)}
.steps li.reveal:nth-child(4)::after{background:var(--magenta)}
.steps li.reveal.in::after{transform:scaleX(1)}
.svc.reveal .svc-mark{transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1) .3s,width .5s cubic-bezier(.2,.7,.2,1)}
.svc.reveal.in .svc-mark{transform:scaleX(1)}
.foot-rule.reveal{opacity:1;transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.foot-rule.reveal.in{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .steps li.reveal:nth-child(1){border-top-color:var(--cyan)}
  .steps li.reveal:nth-child(2){border-top-color:var(--green)}
  .steps li.reveal:nth-child(3){border-top-color:var(--gold)}
  .steps li.reveal:nth-child(4){border-top-color:var(--magenta)}
  .steps li.reveal::after{display:none}
  .svc.reveal .svc-mark,.foot-rule.reveal{transform:none;transition:none}
}