/* BUILD GRUPA motion layer. Visual tokens stay in the existing site styles. */
:root {
  --motion-fast: 240ms;
  --motion-normal: 540ms;
  --motion-slow: 980ms;
  --ease-standard: cubic-bezier(.22, .61, .36, 1);
  --ease-premium: cubic-bezier(.2, .75, .25, 1);
  --reveal-distance-desktop: 24px;
  --reveal-distance-mobile: 16px;
}

/* Only JavaScript-selected offscreen elements enter a pending state. */
[data-bg-reveal="pending"] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance-desktop), 0);
}
[data-bg-reveal="visible"] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity var(--motion-normal) var(--ease-standard),
              transform var(--motion-normal) var(--ease-premium);
  transition-delay: var(--bg-stagger, 0ms);
}

@keyframes bg-hero-photo {
  from { opacity: .85; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes bg-hero-copy {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes bg-hero-photo-mobile {
  from { opacity: .86; transform: scale(1.03); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes bg-hero-copy-mobile {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  .bg-motion-hero > .hero-image,
  .bg-motion-hero > img,
  .bg-motion-hero .complete-hero-visual img,
  .bg-motion-hero .investor-hero-media img {
    animation: bg-hero-photo var(--motion-slow) var(--ease-premium) both;
    transform-origin: center;
  }
  .bg-motion-hero h1 { animation: bg-hero-copy 650ms var(--ease-premium) 90ms both; }
  .bg-motion-hero h1 + p,
  .bg-motion-hero .sv-hero-copy > p { animation: bg-hero-copy 600ms var(--ease-premium) 170ms both; }
  .bg-motion-hero :where(.hero-actions, .investor-actions, .complete-hero-copy > .button, .sv-hero-actions) {
    animation: bg-hero-copy 580ms var(--ease-premium) 250ms both;
  }
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :where(.service-card, .complete-service-cards > a, .sv-index-card) {
    transition: transform 300ms var(--ease-standard), box-shadow 300ms var(--ease-standard);
  }
  :where(.service-card, .complete-service-cards > a, .sv-index-card):hover {
    transform: translate3d(0, -2px, 0);
  }
  :where(.service-card, .complete-service-cards > a, .sv-index-card) img,
  :where(.project-row, .complete-projects [data-project], .project-card) img {
    transition: transform 320ms var(--ease-standard), filter 320ms var(--ease-standard);
  }
  :where(.service-card, .complete-service-cards > a, .sv-index-card):hover img {
    transform: scale(1.03);
  }
  :where(.project-row, .complete-projects [data-project], .project-card):hover img {
    transform: scale(1.04);
    filter: brightness(.96);
  }
  :where(.project-row, .complete-projects [data-project], .project-card) :where(h3, .project-main, .project-link) {
    transition: transform 300ms var(--ease-standard);
  }
  :where(.project-row, .complete-projects [data-project], .project-card):hover :where(h3, .project-main, .project-link) {
    transform: translate3d(0, -2px, 0);
  }
  :where(main .button, .site-header .button, .bg-nav-link) {
    transition: transform var(--motion-fast) var(--ease-standard), opacity var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
  }
  :where(main .button, .site-header .button):hover { transform: translate3d(0, -2px, 0); }
  .bg-nav-link:hover { opacity: .78; }
}

/* Step emphasis follows the viewport without pinning or intercepting scroll. */
.bg-motion-step { transition: opacity 350ms var(--ease-standard); }
.bg-motion-process:has(.bg-motion-step.bg-active-step) .bg-motion-step:not(.bg-active-step) { opacity: .72; }

@media (max-width: 1199px) and (prefers-reduced-motion: no-preference) {
  :root { --motion-normal: 450ms; --reveal-distance-mobile: 20px; }
  [data-bg-reveal="pending"] { transform: translate3d(0, var(--reveal-distance-mobile), 0); }
  [data-bg-reveal="visible"] { transition-delay: var(--bg-stagger-mobile, 0ms); }
  .bg-motion-hero > .hero-image,
  .bg-motion-hero > img,
  .bg-motion-hero .complete-hero-visual img,
  .bg-motion-hero .investor-hero-media img {
    animation: bg-hero-photo-mobile 600ms var(--ease-standard) both;
  }
  .bg-motion-hero h1 { animation: bg-hero-copy-mobile 540ms var(--ease-standard) 80ms both; }
  .bg-motion-hero h1 + p,
  .bg-motion-hero .sv-hero-copy > p { animation: bg-hero-copy-mobile 500ms var(--ease-standard) 160ms both; }
  .bg-motion-hero :where(.hero-actions, .investor-actions, .complete-hero-copy > .button, .sv-hero-actions) {
    animation: bg-hero-copy-mobile 500ms var(--ease-standard) 240ms both;
  }
  :where(main .button, .service-card, .complete-service-cards > a):active {
    transform: scale(.98);
    transition: transform 120ms ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-bg-reveal="pending"], [data-bg-reveal="visible"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .bg-motion-hero *, .bg-motion-step, .bg-motion-hero {
    animation: none !important;
    transition: none !important;
  }
  .bg-motion-process .bg-motion-step { opacity: 1 !important; }
}

/* BUILD editorial update 2026-10-05 */
.hero-inner>h1+p{max-width:60ch;line-height:1.65;color:#fff}
.hook-practical{box-sizing:border-box;padding-top:54px;padding-bottom:54px;scroll-margin-top:100px}
.hook-practical h2{font-size:clamp(25px,3vw,42px);line-height:1.15;max-width:900px;margin:15px 0 24px}
.hook-practical ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:0 0 24px}
.hook-practical li{padding-top:18px;border-top:2px solid #bddb3c;font-size:16px;line-height:1.7}
.hook-summary{border:1px solid #dbe1d1;padding:24px;margin:28px 0;background:#f7f9f2;border-radius:8px}
.hook-summary h2{font-size:25px;margin:0 0 16px}.hook-summary ul{padding-left:22px}.hook-summary li{margin-bottom:10px}
.hook-table-wrap{overflow-x:auto}.hook-summary table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.6}
.hook-summary th,.hook-summary td{padding:12px;text-align:left;border-bottom:1px solid #dbe1d1;vertical-align:top}.hook-summary th{width:32%}
.hook-status{padding:14px 18px;border-left:3px solid #bddb3c;background:rgba(0,0,0,.35);max-width:700px}
.hook-proof{display:grid;grid-template-columns:1fr 1fr;gap:32px}.hook-proof figure{margin:0}.hook-proof img{width:100%;height:280px;object-fit:cover;border-radius:8px}.hook-proof figcaption{font-size:14px;line-height:1.6;margin-top:12px}
.hook-form-next{font-size:15px;line-height:1.6;max-width:680px}.sv-process.hook-short .sv-process-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
body:has(.hook-updated-heading) .hook-updated-heading{font-size:clamp(35px,5.5vw,74px);line-height:1.07;text-wrap:balance;max-width:1050px}
@media(max-width:700px){.hook-practical{padding-top:36px;padding-bottom:36px}.hook-practical ul,.hook-proof,.sv-process.hook-short .sv-process-grid{grid-template-columns:1fr}.hook-proof img{height:260px}.hook-summary{padding:18px}.hook-summary th,.hook-summary td{padding:8px;font-size:14px}.hook-updated-heading{overflow-wrap:normal}}