/* ===== MOTION PACK (2026-10-29, shared by every page since 2026-10-30) — same layout and colours, things now move in =====
   Everything here only adds movement. Reduced-motion visitors get the page as it was. */

html,body{overflow-x:clip} /* things sliding in from the side never widen the page */

/* --- the black panel: a reel of what we do, running beside "Built like the shop you walk into" --- */
.mock-body{min-height:340px}
.mock-body .mock-kicker,.mock-body .mock-h,.mock-body .mock-p,.mock-body .mock-btn{max-width:50%}
.mock-body .mock-p{max-width:min(50%,40ch)}
.mk-reel{position:absolute;z-index:2;top:0;bottom:0;right:26px;width:42%;display:grid;grid-template-columns:1fr 1fr;gap:12px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.mk-col{overflow:hidden;position:relative}
.mk-trk{display:flex;flex-direction:column;gap:12px;padding:6px 0;will-change:transform}
.mk-col.up .mk-trk{animation:mkUp 34s linear infinite}
.mk-col.dn .mk-trk{animation:mkUp 40s linear infinite reverse}
.mk-reel:hover .mk-trk{animation-play-state:paused}
@keyframes mkUp{to{transform:translateY(-50%)}}
.mkc{border-radius:12px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);padding:9px;color:#fff;font-size:.74rem;line-height:1.35;flex:none}
.mkc img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:8px}
.mkc .cp{display:flex;justify-content:space-between;gap:8px;margin-top:7px;font-weight:700}
.mkc .cp span{font-weight:600;color:rgba(255,255,255,.5)}
.mkc .k{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#5FD8C8}
.mkc .big{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:4px 0 2px}
.mkc .sub{color:rgba(255,255,255,.55)}
.mkc.note{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:start}
.mkc.note .ic{width:26px;height:26px;border-radius:8px;background:#f5b03d;display:grid;place-items:center;color:#0a0a0b;font-weight:900;font-size:.8rem}
.mkc.note b{display:block}
.mkc table{width:100%;border-collapse:collapse;margin-top:6px;font-size:.68rem}
.mkc td{padding:3px 2px;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.75)}
.mkc td:last-child{text-align:right}
.mkc .sc{display:inline-block;min-width:24px;text-align:center;border-radius:5px;font-weight:800;color:#0a0a0b;background:#5FD8C8}
.mkc .sc.hot{background:#f5b03d}
.mkc .wave{display:flex;align-items:center;gap:3px;height:22px;margin-top:6px}
.mkc .wave i{display:block;width:3px;border-radius:2px;background:#5FD8C8;height:30%;animation:mkWave 1.1s ease-in-out infinite alternate}
.mkc .wave i:nth-child(2n){animation-delay:.15s}.mkc .wave i:nth-child(3n){animation-delay:.3s}.mkc .wave i:nth-child(4n){animation-delay:.45s}
@keyframes mkWave{to{height:100%}}
.mkc .soon{display:inline-block;margin-top:6px;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#f5b03d}
.mkc .px{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;margin-top:7px}
.mkc .px i{display:block;aspect-ratio:1;border-radius:1px;background:rgba(255,255,255,.12)}
.mkc .px i.t{background:#5FD8C8}.mkc .px i.h{background:#f5b03d}

/* the address bar types each kind of business */
.chrome .bar .typed::after{content:"";display:inline-block;width:1px;height:.9em;margin-left:1px;vertical-align:-1px;background:#9AA8AE;animation:mkCaret 1s steps(1) infinite}
@keyframes mkCaret{50%{opacity:0}}

@media (max-width:760px){
  .mock-body{min-height:0}
  .mock-body .mock-kicker,.mock-body .mock-h,.mock-body .mock-p,.mock-body .mock-btn{max-width:none}
  .mock-body .mock-p{max-width:40ch}
  .mk-reel{position:relative;right:auto;top:auto;bottom:auto;width:auto;display:block;margin:26px -34px -54px;padding-bottom:18px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
  .mk-col.dn{display:none}
  .mk-trk{flex-direction:row;align-items:flex-start;padding:0;width:max-content}
  .mk-col.up .mk-trk{animation:mkLeft 38s linear infinite}
  .mkc{width:178px}
}
@keyframes mkLeft{to{transform:translateX(-50%)}}

/* --- the browser window is pulled flat into the screen as you scroll --- */
.hero .wrap{perspective:1400px}
.hero-mock.mp-tilt{transform-origin:50% 0;transition:opacity .7s var(--ease)}

@media (prefers-reduced-motion:no-preference){
  /* hero words rise in on load */
  .mp .hero h1 .mw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
  .mp .hero h1 .mw>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease)}
  .mp.mp-go .hero h1 .mw>span{transform:none}
  .mp .hero .sale-flag,.mp .hero .lede,.mp .hero .hero-cta>*,.mp .hero .hero-live>*{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .mp.mp-go .hero .sale-flag,.mp.mp-go .hero .lede,.mp.mp-go .hero .hero-cta>*,.mp.mp-go .hero .hero-live>*{opacity:1;transform:none}
  .mp .hero .sale-flag{transform:translateY(-12px)}
  .mp.mp-go .hero .lede{transition-delay:.35s}
  .mp.mp-go .hero .hero-cta>*:nth-child(1){transition-delay:.5s}.mp.mp-go .hero .hero-cta>*:nth-child(2){transition-delay:.58s}
  .mp.mp-go .hero .hero-live>*:nth-child(1){transition-delay:.7s}.mp.mp-go .hero .hero-live>*:nth-child(2){transition-delay:.78s}

  /* section headings: words rise one after another */
  .mp .sec-head h2 .mw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
  .mp .sec-head h2 .mw>span{display:inline-block;transform:translateY(105%);transition:transform .8s var(--ease)}
  .mp .sec-head.in h2 .mw>span{transform:none}

  /* banners slide in from alternating sides */
  .mp .plug-strip.rv.mp-l{transform:translateX(-90px)}
  .mp .plug-strip.rv.mp-r{transform:translateX(90px)}
  .mp .plug-strip.rv.in{transform:none}
  .mp .plug-strip .ps-in{position:relative;overflow:hidden}
  .mp .plug-strip .ps-in::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent);transform:translateX(-120%)}
  .mp .plug-strip.in .ps-in::after{animation:mpSheen 1.6s .5s var(--ease) both}
  @keyframes mpSheen{to{transform:translateX(320%)}}

  /* work cards rise and the picture settles in from a slight zoom */
  .mp .work-card.rv{transform:translateY(56px) scale(.95)}
  .mp .work-card.rv.in{transform:none}
  .mp .work-card.rv.in:hover{transform:translateY(-6px)}
  .mp .work-card .work-shot.cover img{transform:scale(1.16);transition:transform 1.5s var(--ease)}
  .mp .work-card.in .work-shot.cover img{transform:scale(1)}
  .mp .work-card.in:hover .work-shot.cover img{transform:scale(1.045)}
  .mp .auto-work.rv{transform:translateY(56px) scale(.97)}
  .mp .auto-work.rv.in{transform:none}

  /* what-you-get: the icons draw themselves */
  .mp .val .ico{transform:scale(.6) rotate(-8deg);transition:transform .7s var(--ease)}
  .mp .val.in .ico{transform:none}
  .mp .val .ico svg *{stroke-dasharray:var(--len,80);stroke-dashoffset:var(--len,80);transition:stroke-dashoffset 1.2s .25s var(--ease)}
  .mp .val.in .ico svg *{stroke-dashoffset:0}

  /* how it works: a line runs through the steps as you scroll */
  .mp-line{position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:rgba(18,165,148,.14);overflow:hidden}
  .mp-line i{display:block;height:100%;width:100%;background:var(--accent,#12A594);transform-origin:0 50%;transform:scaleX(var(--p,0))}
  .mp .step.rv:nth-child(2){transition-delay:.12s}.mp .step.rv:nth-child(3){transition-delay:.24s}

  /* pricing: the checklist ticks in, one line at a time */
  .mp .incl li svg{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .5s var(--ease)}
  .mp .price-wrap.in .incl li svg{stroke-dashoffset:0}
  .mp .incl li{opacity:0;transform:translateX(-14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .mp .price-wrap.in .incl li{opacity:1;transform:none}

  /* --- other pages --- */
  /* work: the phone rises into place on load */
  .mp .phero .eyebrow,.mp .phero .lede{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .mp.mp-go .phero .eyebrow,.mp.mp-go .phero .lede{opacity:1;transform:none}
  .mp.mp-go .phero .lede{transition-delay:.35s}
  .mp .phero .reel{opacity:0;transform:translateY(70px) scale(.92);transition:opacity 1s .45s var(--ease),transform 1.2s .45s var(--ease)}
  .mp.mp-go .phero .reel{opacity:1;transform:none}
  /* cards on every page rise and the pictures settle in */
  .mp .card.rv,.mp .ag-card.rv,.mp .plan.rv{transform:translateY(56px) scale(.95)}
  .mp .card.rv.in,.mp .ag-card.rv.in,.mp .plan.rv.in{transform:none}
  .mp .card.rv.in:hover{transform:translateY(-6px)}
  .mp .card .shot.cover img{transform:scale(1.16);transition:transform 1.5s var(--ease)}
  .mp .card.in .shot.cover img{transform:scale(1)}
  .mp .card.in:hover .shot.cover img{transform:scale(1.045)}
  /* numbered lists slide in one line at a time */
  .mp .la-steps.rv,.mp .ag-how.rv{transform:none}
  .mp .la-steps.rv li,.mp .ag-how.rv li{opacity:0;transform:translateX(-26px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .mp .la-steps.rv.in li,.mp .ag-how.rv.in li{opacity:1;transform:none}
  /* big panels are pulled flat into the screen */
  .mp .mp-pull{transform-origin:50% 0;transition:opacity .7s var(--ease)!important}
}
.steps{position:relative}
@media (max-width:700px){.mp-line{display:none}}