:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #181818; background: #fff; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
.site-header, .content, .site-footer { width: min(1184px, 100%); margin: 0 auto; padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: 24px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo { display: block; width: 64px; height: 64px; }
.brand-name { text-align: center; font-size: 20px; font-weight: 650; letter-spacing: -.04em; }
.brand-name span { display: block; font-size: 12px; font-weight: 500; letter-spacing: .01em; color: #656565; margin-top: 3px; }
nav { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.nav-link { display: flex; align-items: center; min-height: 44px; text-decoration: none; color: #595959; }
.header-cta { display: flex; align-items: center; gap: 16px; min-height: 44px; border: 1px solid #ddd; border-radius: 999px; padding: 10px 20px; text-decoration: none; font-weight: 550; }
.hero { padding: clamp(64px, 8vw, 112px) 0 88px; border-bottom: 1px solid #e8e8e8; }
p { margin: 0; }
.eyebrow { font-size: 11px; letter-spacing: .14em; font-weight: 650; color: #737373; margin-bottom: 20px; }
h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.08; letter-spacing: -.055em; font-weight: 550; margin: 0; }
h1 span { color: #777; }
.hero-audience { font-size: 17px; line-height: 1.65; color: #666; margin-top: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.project-button { display: inline-flex; justify-content: center; align-items: center; gap: 24px; min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 1px solid #d5d5d5; text-decoration: none; font-size: 14px; font-weight: 550; }
.primary { background: #202020; color: #fff; border-color: #202020; }
.project-button:hover, .header-cta:hover { background: #ededed; }
.primary:hover { background: #3b3b3b; }
.text-link { display: inline-flex; align-items: center; gap: 16px; min-height: 48px; font-size: 14px; text-decoration: none; color: #555; }
a:focus-visible { outline: 3px solid #8e6d18; outline-offset: 5px; }
section:not(.hero) { padding: 72px 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.section-heading .eyebrow { margin-bottom: 12px; }
h2 { font-size: clamp(28px, 3vw, 38px); font-weight: 550; letter-spacing: -.04em; line-height: 1.2; margin: 0 0 32px; }
.section-heading h2 { margin: 0; }
.services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; counter-reset: services; }
.services-grid article { padding: 32px; background: #f5f5f5; border: 1px solid #efefef; border-radius: 20px; counter-increment: services; }
.services-grid article::before { content: '0' counter(services); display: block; color: #777; font-size: 12px; margin-bottom: 32px; font-variant-numeric: tabular-nums; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.025em; font-weight: 550; margin: 0 0 12px; }
.services-grid p, .steps p { color: #606060; font-size: 15px; line-height: 1.75; max-width: 40ch; }
section[aria-labelledby="process-title"] { border-top: 1px solid #e8e8e8; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; list-style: none; padding: 0; margin: 0; counter-reset: steps; }
.steps li { counter-increment: steps; }
.steps li::before { content: counter(steps); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #f2f2f2; font-size: 12px; color: #666; margin-bottom: 24px; }
section.enquiry { background: #f5f5f5; border-radius: 24px; padding: 56px 24px; margin: 16px 0 72px; text-align: center; }
.enquiry h2 { margin-bottom: 16px; }
.enquiry p:not(.eyebrow) { color: #606060; line-height: 1.7; }
.enquiry-note { margin-top: 16px; }
.email-address { overflow-wrap: anywhere; text-decoration: none; }
.enquiry-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.enquiry-controls .project-button { min-width: 112px; background: #fff; }
.site-footer { border-top: 1px solid #eee; padding-top: 24px; padding-bottom: max(32px, env(safe-area-inset-bottom)); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 10px; letter-spacing: .07em; color: #737373; }
.site-footer span { letter-spacing: 0; font-size: 12px; }
.skip-link { position: fixed; z-index: 10; top: 8px; left: 8px; padding: 12px 20px; background: #fff; border: 1px solid #222; border-radius: 8px; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
@media (max-width: 680px) {
  .site-header, .content, .site-footer { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
  .site-header { gap: 12px; }
  .logo { width: 52px; height: 52px; }
  .brand { gap: 10px; }
  .brand-name { font-size: 18px; }
  .brand-name span { font-size: 11px; }
  .nav-link { display: none; }
  .header-cta { padding: 10px 14px; gap: 8px; font-size: 13px; }
  .hero { padding: 56px 0 56px; }
  .desktop-break { display: none; }
  .hero-audience { font-size: 16px; }
  .hero-actions { gap: 12px 24px; }
  section:not(.hero) { padding: 48px 0; }
  .services-grid, .steps { grid-template-columns: 1fr; }
  .services-grid article { padding: 28px; }
  .steps { gap: 32px; }
  section.enquiry { padding: 40px 20px; margin-bottom: 48px; }
}
/* Keep enlarged text within the viewport without clipping content. */
.site-header { flex-wrap: wrap; }
h1, h2, h3, .brand-name { overflow-wrap: anywhere; }
.brand { min-width: 0; }
.brand-name { min-width: 0; }
.logo { flex-shrink: 0; }
main:focus { outline: none; }
.sunny-overlay { position: absolute; width: 96px; height: 110px; z-index: 2; pointer-events: none; }
.sunny-toggle { font: inherit; font-size: 12px; color: #606060; background: #fff; border: 1px solid #ddd; border-radius: 999px; padding: 10px 16px; min-height: 44px; cursor: pointer; flex-shrink: 0; }
.sunny-toggle:focus-visible { outline: 3px solid #8e6d18; outline-offset: 5px; }
.sunny-toggle:hover { background: #f5f5f5; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .sunny-overlay, .sunny-toggle { display: none !important; } }

.blobby-hit { position: absolute; z-index: 3; width: 60px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; box-shadow: none; }
.blobby-hit:focus-visible { outline: 2px dashed #8e6d18; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .blobby-hit { display: none !important; } }

.section-heading { flex-wrap: wrap; }

.sunny-overlay { transform-origin: bottom center; }

.blobby-greeting { position: absolute; z-index: 3; pointer-events: none; padding: 8px 12px; border: 1px solid #dfd7b7; border-radius: 14px; background: #fffdf4; color: #302b20; font: 13px/1.3 system-ui, sans-serif; white-space: nowrap; box-shadow: 0 3px 10px #00000008; }
.blobby-greeting::after { content: ''; position: absolute; right: -5px; bottom: 10px; width: 8px; height: 8px; background: #fffdf4; border-top: 1px solid #dfd7b7; border-right: 1px solid #dfd7b7; transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .blobby-greeting { display: none !important; } }

/* Local service demonstration trials: original illustrative scenes. */
.services-grid article::before { content: none; }
.services-grid .service-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 18px; padding: 28px; }
.service-copy { align-self: start; padding-top: 12px; min-width: 0; }
.service-demo { margin: 0; min-width: 0; overflow: hidden; }
.service-demo svg { width: 100%; display: block; overflow: hidden; }
.service-demo svg text { font: 9px system-ui, sans-serif; fill: #656565; }
.service-demo figcaption { font-size: 10px; text-align: center; color: #777; margin-top: 7px; letter-spacing: .03em; }
.trial-options { grid-column: 1/-1; border-top: 1px solid #e2e2e2; padding-top: 14px; }
.trial-options label { display: block; color: #777; font-size: 11px; margin-bottom: 7px; }
.trial-options select { font: inherit; font-size: 12px; width: 100%; min-height: 44px; background: #fff; color: #444; border: 1px solid #ddd; border-radius: 8px; padding: 8px; }
.trial-options select:focus-visible { outline: 2px solid #8e6d18; outline-offset: 3px; }
.service-demo * { animation-play-state: paused !important; }
.service-demo.is-running * { animation-play-state: running !important; }
.demo-cursor { transform: translate(62px,126px); animation: demo-cursor 14s ease-in-out infinite; animation-delay: var(--delay); }
.click-cue,.tap-cue { opacity: 0; animation: demo-tap 14s ease-in-out infinite; animation-delay: var(--delay); transform-box: fill-box; transform-origin: center; }
.phone-next { opacity: 0; animation: phone-next 14s ease-in-out infinite; animation-delay: var(--delay); }
.phone-home { animation: phone-home 14s ease-in-out infinite; animation-delay: var(--delay); }
.gear { animation: gears 14s ease-in-out infinite; animation-delay: var(--delay); }
.gear:nth-last-child(1) { animation-direction: reverse; }
.flow-dot { animation: workflow 14s ease-in-out infinite; animation-delay: var(--delay); }
.ai-dot { animation: ai-flow 14s ease-in-out infinite; animation-delay: var(--delay); }
.task-check { animation: check 14s ease-in-out infinite; animation-delay: var(--delay); }
.chart-bars { transform-origin: 170px 151px; animation: bars 14s ease-in-out infinite; animation-delay: var(--delay); }
.demo-hand { animation: hand 14s ease-in-out infinite; animation-delay: var(--delay); }
@keyframes demo-cursor { 0%,12%,100% { transform: translate(180px,90px); } 24%,37% { transform: translate(62px,126px); } 48%,88% { transform: translate(199px,153px); } }
@keyframes demo-tap { 0%,23%,34%,100% { opacity: 0; transform: scale(.6); } 27% { opacity: .8; transform: scale(1); } 33% { opacity: 0; transform: scale(1.3); } }
@keyframes phone-next { 0%,28%,85%,100% { opacity: 0; } 35%,78% { opacity: 1; } }
@keyframes phone-home { 0%,28%,85%,100% { opacity: 1; } 35%,78% { opacity: 0; } }
@keyframes gears { 0%,12% { transform: rotate(0); } 38%,100% { transform: rotate(90deg); } }
@keyframes workflow { 0%,12%,100% { transform: translateX(0); } 28% { transform: translateX(70px); } 42%,88% { transform: translateX(140px); } }
@keyframes ai-flow { 0%,12%,100% { transform: translateX(0); } 28% { transform: translateX(58px); } 42%,88% { transform: translateX(116px); } }
@keyframes check { 0%,30%,100% { opacity: .15; } 42%,88% { opacity: 1; } }
@keyframes bars { 0%,12%,100% { transform: scaleY(.55); } 42%,88% { transform: scaleY(1); } }
@keyframes hand { 0%,18%,45%,100% { transform: translateY(0); } 30% { transform: translateY(-8px); } }
@media (max-width: 1000px) and (min-width: 681px) { .services-grid .service-card { grid-template-columns: 1fr; } .service-demo { width: min(260px,100%); justify-self: center; } }
@media (max-width: 480px) { .services-grid .service-card { grid-template-columns: 1fr; gap: 18px; } .service-demo { width: min(240px,100%); justify-self: center; } }
@media (prefers-reduced-motion: reduce) { .service-demo * { animation: none !important; } .phone-next { display: none; } .task-check { opacity: 1; } }
.web-pages > rect:nth-of-type(3) { animation: web-select 14s ease-in-out infinite; animation-delay: var(--delay); }
.web-pages > rect:nth-last-of-type(-n+2) { animation: web-content 14s ease-in-out infinite; animation-delay: var(--delay); }
@keyframes web-select { 0%,24%,43%,100% { fill: #dbc78e; } 28%,38% { fill: #b49a54; } }
@keyframes web-content { 0%,44%,100% { fill: #eee; } 50%,88% { fill: #ddd5be; } }
.service-demo [hidden] * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .web-pages * { animation: none !important; } }

/* Second local trial: scrolling app, software concepts, holographic workstation. */
.app-scroll { animation: app-scroll 16s ease-in-out infinite; }
.app-chart { transform: none; }
.app-stat-low { animation: app-low 16s ease-in-out infinite; }
.app-stat-high { opacity: 0; animation: app-high 16s ease-in-out infinite; }
.app-toggle { animation: app-toggle 16s ease-in-out infinite; }
.app-touch { opacity: 0; animation: app-touch 16s ease-in-out infinite; }
.module-left { animation: module-left 16s ease-in-out infinite; }
.module-right { animation: module-right 16s ease-in-out infinite; }
.module-bottom { animation: module-bottom 16s ease-in-out infinite; }
.board-task { animation: board-task 16s ease-in-out infinite; }
.calendar-slot { animation: calendar-slot 16s ease-in-out infinite; }
.calendar-confirm { animation: calendar-confirm 16s ease-in-out infinite; }
.holo-hand-left { animation: holo-left 16s ease-in-out infinite; }
.holo-hand-right { animation: holo-right 16s ease-in-out infinite; }
.holo-check { opacity: .25; animation: holo-check 16s ease-in-out infinite; }
.holo-bars { transform-origin: 194px 130px; animation: holo-bars 16s ease-in-out infinite; }
.holo-flow { animation: holo-flow 16s ease-in-out infinite; }
.holo-tap-left, .holo-tap-right { opacity: 0; transform-box: fill-box; transform-origin: center; }
.holo-tap-left { animation: holo-tap-left 16s ease-in-out infinite; }
.holo-tap-right { animation: holo-tap-right 16s ease-in-out infinite; }
@keyframes app-scroll { 0%,27%,100% { transform: translateY(0); } 42%,79% { transform: translateY(-88px); } 94% { transform: translateY(0); } }
@keyframes app-chart { 0%,6%,100% { transform: scaleY(.45); } 20%,90% { transform: scaleY(1); } }
@keyframes app-low { 0%,10%,98%,100% { opacity: 1; } 15%,94% { opacity: 0; } }
@keyframes app-high { 0%,10%,98%,100% { opacity: 0; } 15%,94% { opacity: 1; } }
@keyframes app-toggle { 0%,50%,100% { transform: translateX(0); } 57%,89% { transform: translateX(10px); } }
@keyframes app-touch { 0%,48%,59%,100% { opacity: 0; } 52% { opacity: .8; } 48%,59% { transform: translateY(-30px); } 52% { transform: translateY(-30px); } }
@keyframes module-left { 0%,100% { transform: translateX(-9px); opacity: .45; } 22%,85% { transform: translateX(0); opacity: 1; } }
@keyframes module-right { 0%,15%,100% { transform: translateX(9px); opacity: .45; } 38%,85% { transform: translateX(0); opacity: 1; } }
@keyframes module-bottom { 0%,30%,100% { transform: translateY(8px); opacity: .45; } 53%,85% { transform: translateY(0); opacity: 1; } }
@keyframes board-task { 0%,12%,100% { transform: translateX(0); } 28%,43% { transform: translateX(67px); } 59%,88% { transform: translateX(134px); } }
@keyframes calendar-slot { 0%,15%,100% { transform: translate(0,0); } 40%,88% { transform: translate(70px,-25px); } }
@keyframes calendar-confirm { 0%,30%,100% { opacity: .15; } 45%,88% { opacity: 1; } }
@keyframes holo-left {
  0%,12%,36%,60%,84%,100% { transform: translate(96px,125px) rotate(110deg); }
  22%,28% { transform: translate(86.3185px,129.1764px) rotate(195deg) scaleX(.85); }
  24%,26% { transform: translate(86.3185px,129.1764px) rotate(195deg); }
  68%,76% { transform: translate(105.1421px,136.8579px) rotate(135deg) scaleX(.85); }
  71%,73% { transform: translate(105.1421px,136.8579px) rotate(135deg); }
}
@keyframes holo-right {
  0%,38%,64%,100% { transform: translate(144px,125px) rotate(70deg); }
  48%,54% { transform: translate(174.6815px,129.1764px) rotate(-15deg) scaleX(.85); }
  50%,52% { transform: translate(174.6815px,129.1764px) rotate(-15deg); }
}
@keyframes holo-tap-left { 0%,23%,30%,100% { opacity: 0; transform: scale(.6); } 25% { opacity: .8; transform: scale(1.15); } }
@keyframes holo-tap-right { 0%,49%,56%,100% { opacity: 0; transform: scale(.6); } 51% { opacity: .8; transform: scale(1.15); } }
@keyframes holo-check { 0%,25%,100% { opacity: .2; } 32%,90% { opacity: 1; } }
@keyframes holo-bars { 0%,51%,100% { transform: scaleY(.45); } 63%,90% { transform: scaleY(1); } }
@keyframes holo-flow { 0%,70%,100% { transform: translateX(0); } 83%,92% { transform: translateX(58px); } }
@media (prefers-reduced-motion: reduce) { .service-demo * { animation: none !important; } .app-stat-high { display: none; } .holo-check { opacity: 1; } }
.service-demo :is(.app-scroll,.app-chart,.app-stat-low,.app-stat-high,.app-toggle,.app-touch,.module-left,.module-right,.module-bottom,.board-task,.calendar-slot,.calendar-confirm,.holo-hand-left,.holo-hand-right,.holo-check,.holo-bars,.holo-flow,.holo-tap-left,.holo-tap-right) { animation-delay: var(--delay); }

.holo-hand-left { transform: translate(96px,125px) rotate(110deg); }
.holo-hand-right { transform: translate(144px,125px) rotate(70deg); }
.holo-tap-centre { opacity: 0; transform-box: fill-box; transform-origin: center; animation: holo-tap-centre 16s ease-in-out infinite; animation-delay: var(--delay); }
@keyframes holo-tap-centre { 0%,70%,78%,100% { opacity: 0; transform: scale(.6); } 72% { opacity: .8; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .holo-tap-centre { animation: none !important; } }


/* One sequential task, with stationary modules and exposed gears. */
.module-scene :is(.module-left,.module-right,.module-bottom) { animation: none; transform: none; opacity: 1; }
.core-gear-one { animation: core-turn 12s ease-in-out infinite; }
.core-gear-two { animation: core-turn-back 12s ease-in-out infinite; }
.module-order-progress { stroke-dasharray: 1; animation: order-progress 12s ease-in-out infinite; }
.module-stock-level { transform-origin: 191px 113px; animation: stock-progress 12s ease-in-out infinite; }
.module-report-check { transform-box: fill-box; transform-origin: center; animation: report-ready 12s ease-in-out infinite; }
.module-report-ripple { transform-box: fill-box; transform-origin: center; opacity: 0; animation: report-ripple 12s ease-out infinite; }
@keyframes core-turn { 0%,21.5% { transform: rotate(0); } 33%,53.8% { transform: rotate(72deg); } 64%,100% { transform: rotate(144deg); } }
@keyframes core-turn-back { 0%,21.5% { transform: rotate(0); } 33%,53.8% { transform: rotate(-72deg); } 64%,100% { transform: rotate(-144deg); } }
@keyframes order-progress { 0% { stroke-dashoffset: 1; opacity: 1; } 16%,95% { stroke-dashoffset: 0; opacity: 1; } 98% { stroke-dashoffset: 0; opacity: 0; } 99% { stroke-dashoffset: 1; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 1; } }
@keyframes stock-progress { 0%,38.8%,100% { transform: scaleY(.55); } 43% { transform: scaleY(.82); } 48%,96% { transform: scaleY(1.1); } }
@keyframes report-ready { 0%,67.6%,100% { opacity: 0; transform: scale(.65); } 70% { opacity: 1; transform: scale(1.18); } 72%,96% { opacity: 1; transform: scale(1); } }
@keyframes report-ripple { 0%,69%,76%,100% { opacity: 0; transform: scale(.5); } 70% { opacity: .8; transform: scale(.6); } 75% { opacity: 0; transform: scale(1.8); } }
@media (prefers-reduced-motion: reduce) { .module-scene * { animation: none !important; } .module-report-ripple { opacity: 0; } .module-report-check { opacity: 1; } }

.dual-hand-left { transform: translate(96px,128px) rotate(95deg); animation: dual-left 16s ease-in-out infinite; }
.dual-hand-right { transform: translate(144px,128px) rotate(85deg); animation: dual-right 16s ease-in-out infinite; }
.dual-check { animation: dual-check 16s ease-in-out infinite; }
.dual-bars { transform-origin: 177px 151px; animation: dual-bars 16s ease-in-out infinite; }
.dual-ripple-left,.dual-ripple-right,.focus-ripple { opacity: 0; transform-box: fill-box; transform-origin: center; }
.dual-ripple-left { animation: dual-ripple 16s ease-out infinite; }
.dual-ripple-right { animation: dual-ripple 16s ease-out infinite; animation-delay: -8s; }
.focus-hand-left { transform: translate(98px,132px) rotate(90deg); animation: focus-left 18s ease-in-out infinite; }
.focus-hand-right { transform: translate(141px,132px) rotate(90deg); }
.focus-check { animation: focus-check 18s ease-in-out infinite; }
.focus-dot { animation: focus-dot 18s ease-in-out infinite; }
.focus-ripple { animation: focus-ripple 18s ease-out infinite; }
@keyframes dual-left { 0%,8%,35%,100% { transform: translate(96px,128px) rotate(95deg); } 19%,25% { transform: translate(89.3185px,144.1764px) rotate(195deg) scaleX(.85); } 21%,23% { transform: translate(89.3185px,144.1764px) rotate(195deg); } }
@keyframes dual-right { 0%,58%,85%,100% { transform: translate(144px,128px) rotate(85deg); } 69%,75% { transform: translate(157.6815px,144.1764px) rotate(-15deg) scaleX(.85); } 71%,73% { transform: translate(157.6815px,144.1764px) rotate(-15deg); } }
@keyframes dual-ripple { 0%,20%,29%,100% { opacity: 0; transform: scale(.6); } 22% { opacity: .75; transform: scale(1); } 28% { opacity: 0; transform: scale(1.7); } }
@keyframes dual-check { 0%,21%,100% { opacity: .15; } 28%,92% { opacity: 1; } }
@keyframes dual-bars { 0%,72%,100% { transform: scaleY(.5); } 80%,92% { transform: scaleY(1); } }
@keyframes focus-left { 0%,12%,39%,100% { transform: translate(98px,132px) rotate(90deg); } 24%,31% { transform: translate(102.1421px,123.8579px) rotate(135deg) scaleX(.85); } 26%,28% { transform: translate(102.1421px,123.8579px) rotate(135deg); } }
@keyframes focus-ripple { 0%,25%,34%,100% { opacity: 0; transform: scale(.6); } 27% { opacity: .75; transform: scale(1); } 33% { opacity: 0; transform: scale(1.7); } }
@keyframes focus-check { 0%,27%,100% { opacity: .15; } 34%,92% { opacity: 1; } }
@keyframes focus-dot { 0%,38%,100% { transform: translateX(0); } 65%,92% { transform: translateX(52px); } }
@media (prefers-reduced-motion: reduce) { .service-demo * { animation: none !important; } }

/* The connector dots stay fixed; activity is a sequential swell. */
.module-link-dot { fill: #d3c6a4; transform-box: fill-box; transform-origin: center; }
.link-orders-0 { animation: link-orders-0 12s ease-in-out infinite; }
@keyframes link-orders-0 { 0%,100% { transform: scale(1); fill: #d3c6a4; } 16%,18% { transform: scale(1); fill: #d3c6a4; } 17% { transform: scale(1.8); fill: #ad9146; } }
.link-orders-1 { animation: link-orders-1 12s ease-in-out infinite; }
@keyframes link-orders-1 { 0%,100% { transform: scale(1); fill: #d3c6a4; } 17.5%,19.5% { transform: scale(1); fill: #d3c6a4; } 18.5% { transform: scale(1.8); fill: #ad9146; } }
.link-orders-2 { animation: link-orders-2 12s ease-in-out infinite; }
@keyframes link-orders-2 { 0%,100% { transform: scale(1); fill: #d3c6a4; } 19%,21% { transform: scale(1); fill: #d3c6a4; } 20% { transform: scale(1.8); fill: #ad9146; } }
.link-orders-3 { animation: link-orders-3 12s ease-in-out infinite; }
@keyframes link-orders-3 { 0%,100% { transform: scale(1); fill: #d3c6a4; } 20.5%,22.5% { transform: scale(1); fill: #d3c6a4; } 21.5% { transform: scale(1.8); fill: #ad9146; } }
.link-stock-0 { animation: link-stock-0 12s ease-in-out infinite; }
@keyframes link-stock-0 { 0%,100% { transform: scale(1); fill: #d3c6a4; } 33%,35% { transform: scale(1); fill: #d3c6a4; } 34% { transform: scale(1.8); fill: #ad9146; } 52.8%,54.8% { transform: scale(1); fill: #d3c6a4; } 53.8% { transform: scale(1.8); fill: #ad9146; } }
.link-stock-1 { animation: link-stock-1 12s ease-in-out infinite; }
@keyframes link-stock-1 { 0%,100% { transform: scale(1); fill: #d3c6a4; } 34.2%,36.2% { transform: scale(1); fill: #d3c6a4; } 35.2% { transform: scale(1.8); fill: #ad9146; } 51.6%,53.6% { transform: scale(1); fill: #d3c6a4; } 52.6% { transform: scale(1.8); fill: #ad9146; } }
.link-stock-2 { animation: link-stock-2 12s ease-in-out infinite; }
@keyframes link-stock-2 { 0%,100% { transform: scale(1); fill: #d3c6a4; } 35.4%,37.4% { transform: scale(1); fill: #d3c6a4; } 36.4% { transform: scale(1.8); fill: #ad9146; } 50.4%,52.4% { transform: scale(1); fill: #d3c6a4; } 51.4% { transform: scale(1.8); fill: #ad9146; } }
.link-stock-3 { animation: link-stock-3 12s ease-in-out infinite; }
@keyframes link-stock-3 { 0%,100% { transform: scale(1); fill: #d3c6a4; } 36.6%,38.6% { transform: scale(1); fill: #d3c6a4; } 37.6% { transform: scale(1.8); fill: #ad9146; } 49.2%,51.2% { transform: scale(1); fill: #d3c6a4; } 50.2% { transform: scale(1.8); fill: #ad9146; } }
.link-stock-4 { animation: link-stock-4 12s ease-in-out infinite; }
@keyframes link-stock-4 { 0%,100% { transform: scale(1); fill: #d3c6a4; } 37.8%,39.8% { transform: scale(1); fill: #d3c6a4; } 38.8% { transform: scale(1.8); fill: #ad9146; } 48%,50% { transform: scale(1); fill: #d3c6a4; } 49% { transform: scale(1.8); fill: #ad9146; } }
.link-reports-0 { animation: link-reports-0 12s ease-in-out infinite; }
@keyframes link-reports-0 { 0%,100% { transform: scale(1); fill: #d3c6a4; } 64%,66% { transform: scale(1); fill: #d3c6a4; } 65% { transform: scale(1.8); fill: #ad9146; } }
.link-reports-1 { animation: link-reports-1 12s ease-in-out infinite; }
@keyframes link-reports-1 { 0%,100% { transform: scale(1); fill: #d3c6a4; } 65.3%,67.3% { transform: scale(1); fill: #d3c6a4; } 66.3% { transform: scale(1.8); fill: #ad9146; } }
.link-reports-2 { animation: link-reports-2 12s ease-in-out infinite; }
@keyframes link-reports-2 { 0%,100% { transform: scale(1); fill: #d3c6a4; } 66.6%,68.6% { transform: scale(1); fill: #d3c6a4; } 67.6% { transform: scale(1.8); fill: #ad9146; } }
@media (prefers-reduced-motion: reduce) { .module-link-dot { animation: none !important; transform: none; } }

/* Fingerless Blobby operates a physical mouse; screen responses share its timing. */
.mouse-controller { transform-origin: 102px 163px; animation: mouse-operate 12s ease-in-out infinite; }
.mouse-task-pointer { transform: translate(202px,75px); animation: mouse-point 12s ease-in-out infinite; }
.mouse-click-one,.mouse-click-two,.mouse-click-three { opacity: 0; transform-box: fill-box; transform-origin: center; animation: mouse-ring 12s ease-out infinite; }
.mouse-click-two { animation-delay: -9s; }
.mouse-click-three { animation-delay: -6s; }
.mouse-row-one { animation: mouse-response 12s ease-in-out infinite; }
.mouse-row-two { animation: mouse-response 12s ease-in-out infinite; animation-delay: -9s; }
.mouse-row-three { animation: mouse-response 12s ease-in-out infinite; animation-delay: -6s; }
@keyframes mouse-operate { 0%,15%,32%,90%,100% { transform: translate(0,0); } 22%,24% { transform: translate(0,0) scaleY(.93); } 40%,47%,57% { transform: translate(5px,2px); } 49%,51% { transform: translate(5px,2px) scaleY(.93); } 65%,72%,82% { transform: translate(9px,4px); } 74%,76% { transform: translate(9px,4px) scaleY(.93); } }
@keyframes mouse-point { 0%,32%,100% { transform: translate(202px,75px); } 40%,57% { transform: translate(202px,98px); } 65%,90% { transform: translate(202px,121px); } }
@keyframes mouse-ring { 0%,21%,29%,100% { opacity: 0; transform: scale(.5); } 24% { opacity: .8; transform: scale(1); } 28% { opacity: 0; transform: scale(1.7); } }
@keyframes mouse-response { 0%,22%,45%,100% { fill: #ecede7; } 25%,36% { fill: #e4d8ad; } }
@media (prefers-reduced-motion: reduce) { .service-demo * { animation: none !important; } }

/* Small task team, staggered across an 18-second work cycle. */
@media (prefers-reduced-motion: reduce) { .service-demo * { animation: none !important; } }


/* Purposeful miniature work: compare, carry a draft, organise a project. */
.team-checker { transform: translate(45px,110px); animation: team-checker 18s ease-in-out infinite; }
.team-courier { transform: translate(91px,110px); animation: team-courier 18s ease-in-out infinite; }
.team-planner { transform: translate(222px,193px); animation: team-planner 18s ease-in-out infinite; }
.team-check-hand { animation: team-check-hand 18s ease-in-out infinite; }
.team-delivery-hand { animation: team-delivery-hand 18s ease-in-out infinite; }
.team-plan-hand { animation: team-plan-hand 18s ease-in-out infinite; }
.team-document { animation: team-document 18s ease-in-out infinite; }
.team-scan { animation: team-scan 18s ease-in-out infinite; }
.team-conflict { animation: team-conflict 18s ease-in-out infinite; }
.team-compare { animation: team-compare 18s ease-in-out infinite; }
.team-question { opacity: 0; animation: team-question 18s ease-in-out infinite; }
.team-question-line,.team-check-progress,.team-draft-lines { stroke-dasharray: 1; }
.team-question-line { animation: team-question-line 18s ease-in-out infinite; }
.team-check-progress { animation: team-check-progress 18s ease-in-out infinite; }
.team-draft-lines { animation: team-draft-lines 18s ease-in-out infinite; }
.team-review-ready { animation: team-review-ready 18s ease-in-out infinite; }
.team-task-card { animation: team-task-card 18s ease-in-out infinite; }
.team-reminder { transform-origin: 197.5px 148px; animation: team-reminder 18s ease-in-out infinite; }
.team-reminder-ring { opacity: 0; transform-box: fill-box; transform-origin: center; animation: team-reminder-ring 18s ease-out infinite; }
@keyframes team-checker { 0%,4%,94%,100% { transform: translate(45px,110px); } 11%,30% { transform: translate(62px,110px); } 37%,84% { transform: translate(45px,110px); } }
@keyframes team-courier { 0%,27%,100% { transform: translate(91px,110px); } 43%,62% { transform: translate(176px,110px); } 79%,94% { transform: translate(91px,110px); } }
@keyframes team-planner { 0%,45%,100% { transform: translate(222px,193px); } 52%,83% { transform: translate(222px,181px); } 92% { transform: translate(222px,193px); } }
@keyframes team-check-hand { 0%,12%,23%,100% { transform: translate(0,0); } 16%,19% { transform: translate(2px,-31px); } }
@keyframes team-delivery-hand { 0%,44%,65%,100% { transform: translate(0,0); } 51%,57% { transform: translate(0,-32px); } }
@keyframes team-plan-hand { 0%,53%,66%,76%,89%,100% { transform: translate(0,0); } 58%,61% { transform: translate(-7px,4px); } 80%,83% { transform: translate(-14.5px,-26px); } }
@keyframes team-document { 0%,23%,100% { opacity: 0; transform: translate(0,0); } 26%,44% { opacity: 1; transform: translate(0,0); } 51%,54% { opacity: 1; transform: translate(0,-32px); } 57%,94% { opacity: 0; transform: translate(0,-32px); } 97% { opacity: 0; transform: translate(0,0); } }
@keyframes team-scan { 0%,4%,100% { transform: translateY(0); opacity: 0; } 6% { opacity: 1; transform: translateY(0); } 14% { opacity: 1; transform: translateY(16px); } 17%,98% { opacity: 0; transform: translateY(16px); } }
@keyframes team-conflict { 0%,12%,100% { stroke: #c9cec5; } 16%,94% { stroke: #b99d58; } }
@keyframes team-compare { 0%,19%,100% { opacity: 1; } 23%,94% { opacity: 0; } }
@keyframes team-question { 0%,19%,100% { opacity: 0; } 23%,94% { opacity: 1; } }
@keyframes team-question-line { 0%,23%,100% { stroke-dashoffset: 1; } 28%,94% { stroke-dashoffset: 0; } }
@keyframes team-check-progress { 0%,4%,100% { stroke-dashoffset: 1; } 24%,94% { stroke-dashoffset: 0; } }
@keyframes team-draft-lines { 0%,52%,100% { stroke-dashoffset: 1; } 62%,94% { stroke-dashoffset: 0; } }
@keyframes team-review-ready { 0%,61%,100% { opacity: .15; } 66%,94% { opacity: 1; } }
@keyframes team-task-card { 0%,56%,100% { transform: translateX(0); } 65%,72% { transform: translateX(66px); } 81%,94% { transform: translateX(132px); } }
@keyframes team-reminder { 0%,79%,100% { transform: rotate(0); opacity: .4; } 82% { transform: rotate(-12deg); opacity: 1; } 84% { transform: rotate(10deg); opacity: 1; } 87%,94% { transform: rotate(0); opacity: 1; } }
@keyframes team-reminder-ring { 0%,81%,89%,100% { opacity: 0; transform: scale(.6); } 84% { opacity: .7; transform: scale(1); } 88% { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .service-demo * { animation: none !important; } .team-question { display: none; } .team-document { opacity: 0; } .team-scan { opacity: 0; } }

/* Same workstations, one worker: arrival precedes each screen response. */
.solo-team .team-courier { transform: translate(62px,110px); animation: solo-route 18s ease-in-out infinite; }
.solo-check-hand { animation: solo-check-hand 18s ease-in-out infinite; }
.solo-team .team-delivery-hand { animation: solo-delivery-hand 18s ease-in-out infinite; }
.solo-team .team-task-card { animation: solo-task-card 18s ease-in-out infinite; }
.solo-team .team-reminder { animation: solo-reminder 18s ease-in-out infinite; }
.solo-team .team-reminder-ring { animation: solo-reminder-ring 18s ease-out infinite; }
@keyframes solo-route { 0%,27%,100% { transform: translate(62px,110px); } 43%,62% { transform: translate(176px,110px); } 70% { transform: translate(225px,128px); } 79%,92% { transform: translate(225px,184px); } 96% { transform: translate(225px,128px); } }
@keyframes solo-check-hand { 0%,12%,23%,100% { transform: translate(0,0); } 16%,19% { transform: translate(2px,-31px); } }
@keyframes solo-delivery-hand { 0%,44%,65%,78%,93%,100% { transform: translate(0,0); } 51%,57% { transform: translate(0,-32px); } 82%,88% { transform: translate(-25px,0); } }
@keyframes solo-task-card { 0%,80%,100% { transform: translateX(0); } 85% { transform: translateX(66px); } 90%,97% { transform: translateX(132px); } }
@keyframes solo-reminder { 0%,89%,100% { opacity: .4; } 92%,97% { opacity: 1; } }
@keyframes solo-reminder-ring { 0%,90%,98%,100% { opacity: 0; transform: scale(.6); } 93% { opacity: .7; transform: scale(1); } 97% { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .service-demo * { animation: none !important; } }

/* Clean browser-like alternatives matching the approved website illustration. */
.soft-fill { stroke-dasharray: 1; animation: soft-fill 12s ease-in-out infinite; }
.soft-check { animation: soft-check 12s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.soft-dot { transform-box: fill-box; transform-origin: center; }
@keyframes soft-fill { 0%,8%,100% { stroke-dashoffset: 1; } 40%,92% { stroke-dashoffset: 0; } }
@keyframes soft-check { 0%,43%,100% { opacity: .1; transform: scale(.8); } 51%,92% { opacity: 1; transform: scale(1); } }
.soft-dot-0 { animation: soft-dot-0 12s ease-in-out infinite; }
@keyframes soft-dot-0 { 0%,13%,17%,100% { transform: scale(1); } 15% { transform: scale(1.65); } }
.soft-dot-1 { animation: soft-dot-1 12s ease-in-out infinite; }
@keyframes soft-dot-1 { 0%,15.5%,19.5%,100% { transform: scale(1); } 17.5% { transform: scale(1.65); } }
.soft-dot-2 { animation: soft-dot-2 12s ease-in-out infinite; }
@keyframes soft-dot-2 { 0%,18%,22%,100% { transform: scale(1); } 20% { transform: scale(1.65); } }
.soft-dot-3 { animation: soft-dot-3 12s ease-in-out infinite; }
@keyframes soft-dot-3 { 0%,20.5%,24.5%,100% { transform: scale(1); } 22.5% { transform: scale(1.65); } }
.soft-dot-4 { animation: soft-dot-4 12s ease-in-out infinite; }
@keyframes soft-dot-4 { 0%,23%,27%,100% { transform: scale(1); } 25% { transform: scale(1.65); } }
.soft-dot-5 { animation: soft-dot-5 12s ease-in-out infinite; }
@keyframes soft-dot-5 { 0%,25.5%,29.5%,100% { transform: scale(1); } 27.5% { transform: scale(1.65); } }
.soft-dot-6 { animation: soft-dot-6 12s ease-in-out infinite; }
@keyframes soft-dot-6 { 0%,28%,32%,100% { transform: scale(1); } 30% { transform: scale(1.65); } }
.soft-dot-7 { animation: soft-dot-7 12s ease-in-out infinite; }
@keyframes soft-dot-7 { 0%,30.5%,34.5%,100% { transform: scale(1); } 32.5% { transform: scale(1.65); } }
.soft-dot-8 { animation: soft-dot-8 12s ease-in-out infinite; }
@keyframes soft-dot-8 { 0%,33%,37%,100% { transform: scale(1); } 35% { transform: scale(1.65); } }
.soft-dot-9 { animation: soft-dot-9 12s ease-in-out infinite; }
@keyframes soft-dot-9 { 0%,35.5%,39.5%,100% { transform: scale(1); } 37.5% { transform: scale(1.65); } }
.soft-dot-10 { animation: soft-dot-10 12s ease-in-out infinite; }
@keyframes soft-dot-10 { 0%,38%,42%,100% { transform: scale(1); } 40% { transform: scale(1.65); } }
@media (prefers-reduced-motion: reduce) { .service-demo * { animation: none !important; } }
/* Retire the previous summary cleanly before it reaches the phone's top edge. */
.app-overview { animation: app-overview 16s ease-in-out infinite; animation-delay: var(--delay); }
@keyframes app-overview { 0%,28%,96%,100% { opacity: 1; } 37%,86% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .app-overview { animation: none !important; } }

/* Software processing state: fill, gear-to-confirmation, empty reset. */
.software-processor .soft-fill { animation: software-fill 12s ease-in-out infinite; }
.software-processor .soft-check { animation: software-confirm 12s ease-in-out infinite; }
.software-rotor { animation: software-spin 12s ease-in-out infinite; }
.software-gear-shape { animation: software-morph 12s ease-in-out infinite; }
.software-gear-hole { animation: software-hole 12s ease-in-out infinite; }
@keyframes software-fill { 0%,8%,96%,100% { stroke-dashoffset: 1; } 40%,78% { stroke-dashoffset: 0; } }
@keyframes software-spin { 0%,8% { transform: rotate(0); } 40%,100% { transform: rotate(144deg); } }
@keyframes software-morph { 0%,100% { d: path('M14.000 0.000L13.828 2.190L13.315 4.326L12.474 6.356L11.326 8.229L9.899 9.899L8.229 11.326L6.356 12.474L4.326 13.315L2.190 13.828L0.000 14.000L-2.190 13.828L-4.326 13.315L-6.356 12.474L-8.229 11.326L-9.899 9.899L-11.326 8.229L-12.474 6.356L-13.315 4.326L-13.828 2.190L-14.000 0.000L-13.828 -2.190L-13.315 -4.326L-12.474 -6.356L-11.326 -8.229L-9.899 -9.899L-8.229 -11.326L-6.356 -12.474L-4.326 -13.315L-2.190 -13.828L-0.000 -14.000L2.190 -13.828L4.326 -13.315L6.356 -12.474L8.229 -11.326L9.899 -9.899L11.326 -8.229L12.474 -6.356L13.315 -4.326L13.828 -2.190Z'); } 8%,40% { d: path('M14.000 0.000L10.865 1.721L10.462 3.399L12.474 6.356L11.326 8.229L7.778 7.778L6.466 8.899L6.356 12.474L4.326 13.315L1.721 10.865L0.000 11.000L-2.190 13.828L-4.326 13.315L-4.994 9.801L-6.466 8.899L-9.899 9.899L-11.326 8.229L-9.801 4.994L-10.462 3.399L-13.828 2.190L-14.000 0.000L-10.865 -1.721L-10.462 -3.399L-12.474 -6.356L-11.326 -8.229L-7.778 -7.778L-6.466 -8.899L-6.356 -12.474L-4.326 -13.315L-1.721 -10.865L-0.000 -11.000L2.190 -13.828L4.326 -13.315L4.994 -9.801L6.466 -8.899L9.899 -9.899L11.326 -8.229L9.801 -4.994L10.462 -3.399L13.828 -2.190Z'); } 48%,100% { d: path('M14.000 0.000L13.828 2.190L13.315 4.326L12.474 6.356L11.326 8.229L9.899 9.899L8.229 11.326L6.356 12.474L4.326 13.315L2.190 13.828L0.000 14.000L-2.190 13.828L-4.326 13.315L-6.356 12.474L-8.229 11.326L-9.899 9.899L-11.326 8.229L-12.474 6.356L-13.315 4.326L-13.828 2.190L-14.000 0.000L-13.828 -2.190L-13.315 -4.326L-12.474 -6.356L-11.326 -8.229L-9.899 -9.899L-8.229 -11.326L-6.356 -12.474L-4.326 -13.315L-2.190 -13.828L-0.000 -14.000L2.190 -13.828L4.326 -13.315L6.356 -12.474L8.229 -11.326L9.899 -9.899L11.326 -8.229L12.474 -6.356L13.315 -4.326L13.828 -2.190Z'); } }
@keyframes software-hole { 0%,48%,100% { opacity: 0; } 8%,40% { opacity: 1; } }
@keyframes software-confirm { 0%,43%,85%,100% { opacity: 0; transform: scale(.7); } 50%,78% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .software-processor * { animation: none !important; } .software-processor .soft-check { opacity: 0; } }

/* One page, two hands: write, lift, transfer, carry, deposit. */
.handoff-team .team-checker { animation: handoff-checker 18s ease-in-out infinite; }
.handoff-team .team-courier { transform: translate(176px,110px); animation: handoff-courier 18s ease-in-out infinite; }
.handoff-team .team-check-hand { animation: handoff-first-hand 18s ease-in-out infinite; }
.handoff-team .team-delivery-hand { transform: translate(-20px,4px); animation: handoff-second-hand 18s ease-in-out infinite; }
.handoff-team .team-question-line { animation: handoff-question-line 18s ease-in-out infinite; }
.handoff-team .team-draft-lines { animation: handoff-draft 18s ease-in-out infinite; }
.handoff-team .team-review-ready { animation: handoff-review 18s ease-in-out infinite; }
.handoff-team .team-task-card { animation: handoff-task 18s ease-in-out infinite; }
.handoff-team .team-reminder { animation: handoff-bell 18s ease-in-out infinite; }
.handoff-team .team-reminder-ring { animation: handoff-bell-ring 18s ease-out infinite; }
.handoff-team .team-plan-hand { animation: handoff-plan-hand 18s ease-in-out infinite; }
.handoff-loading { transform-origin: 19px 50px; animation: handoff-loading 18s ease-in-out infinite; }
.handoff-paper { transform: translate(85px,61px); animation: handoff-paper 18s ease-in-out infinite; }
.handoff-writing { stroke-dasharray: 1; animation: handoff-writing 18s ease-in-out infinite; }
.handoff-tray-glow { animation: handoff-tray-glow 18s ease-in-out infinite; }
@keyframes handoff-checker { 0%,4%,100% { transform: translate(45px,110px); } 11%,44% { transform: translate(62px,110px); } 52%,96% { transform: translate(45px,110px); } }
@keyframes handoff-courier { 0%,24%,58%,100% { transform: translate(176px,110px); } 38%,42% { transform: translate(95px,110px); } }
@keyframes handoff-loading { 0%,19%,100% { transform: scaleX(0); opacity: 1; } 28%,32% { transform: scaleX(1); opacity: 1; } 36%,96% { transform: scaleX(1); opacity: 0; } }
@keyframes handoff-question-line { 0%,20%,100% { stroke-dashoffset: 1; } 28%,96% { stroke-dashoffset: 0; } }
@keyframes handoff-writing { 0%,20%,100% { stroke-dashoffset: 1; } 28%,96% { stroke-dashoffset: 0; } }
@keyframes handoff-paper { 0%,19%,100% { transform: translate(85px,61px); opacity: 0; } 21%,30% { transform: translate(85px,61px); opacity: 1; } 36% { transform: translate(77px,96px); opacity: 1; } 40%,42% { transform: translate(83px,108px); opacity: 1; } 58% { transform: translate(164px,108px); opacity: 1; } 64% { transform: translate(216px,93px); opacity: 1; } 70% { transform: translate(216px,116px); opacity: 1; } 71%,97% { transform: translate(216px,116px); opacity: 0; } }
@keyframes handoff-first-hand { 0%,23%,52%,100% { transform: translate(0,0); } 28%,30% { transform: translate(12px,-42px); } 36% { transform: translate(4px,-7px); } 40%,42% { transform: translate(10px,5px); } }
@keyframes handoff-second-hand { 0%,31%,79%,100% { transform: translate(-20px,4px); } 40%,42% { transform: translate(-20px,4px); } 58% { transform: translate(-20px,4px); } 64% { transform: translate(32px,-11px); } 69% { transform: translate(32px,-7px); } }
@keyframes handoff-tray-glow { 0%,69%,100% { opacity: .15; } 72%,96% { opacity: 1; } }
@keyframes handoff-draft { 0%,70%,100% { stroke-dashoffset: 1; } 78%,96% { stroke-dashoffset: 0; } }
@keyframes handoff-review { 0%,77%,100% { opacity: .15; } 81%,96% { opacity: 1; } }
@keyframes handoff-task { 0%,69%,100% { transform: translateX(0); } 78%,81% { transform: translateX(66px); } 89%,96% { transform: translateX(132px); } }
@keyframes handoff-bell { 0%,88%,100% { opacity: .4; transform: rotate(0); } 91% { opacity: 1; transform: rotate(-10deg); } 93% { opacity: 1; transform: rotate(8deg); } 95%,97% { opacity: 1; transform: rotate(0); } }
@keyframes handoff-bell-ring { 0%,89%,97%,100% { opacity: 0; transform: scale(.6); } 92% { opacity: .7; transform: scale(1); } 96% { opacity: 0; transform: scale(1.6); } }
@keyframes handoff-plan-hand { 0%,70%,80%,86%,97%,100% { transform: translate(0,0); } 74%,77% { transform: translate(-7px,4px); } 90%,93% { transform: translate(-16.5px,-23px); } }
@media (prefers-reduced-motion: reduce) { .service-demo * { animation: none !important; } .handoff-paper,.handoff-loading { opacity: 0; } }

/* Noticeable, quick header adjustments separated by long rests. */
.software-control-one { animation: software-control-one 16s ease-in-out infinite; }
.software-control-two { animation: software-control-two 16s ease-in-out infinite; }
.software-stat-one { transform-origin: 29px 48px; animation: software-stat-one 16s ease-in-out infinite; }
.software-stat-two { transform-origin: 34px 48px; animation: software-stat-two 16s ease-in-out infinite; }
.software-stat-three { transform-origin: 39px 48px; animation: software-stat-three 16s ease-in-out infinite; }
@keyframes software-control-one { 0%,12%,100% { transform: translateY(0); } 20%,46% { transform: translateY(5px); } 54%,90% { transform: translateY(-3px); } 98% { transform: translateY(0); } }
@keyframes software-control-two { 0%,16%,100% { transform: translateY(0); } 24%,50% { transform: translateY(-6px); } 58%,90% { transform: translateY(2px); } 98% { transform: translateY(0); } }
@keyframes software-stat-one { 0%,2%,76%,100% { d: path("M29 40V48"); } 10%,35% { d: path("M29 45V48"); } 43%,68% { d: path("M29 35V48"); } }
@keyframes software-stat-two { 0%,13%,87%,100% { d: path("M34 37V48"); } 21%,46% { d: path("M34 44V48"); } 54%,79% { d: path("M34 39V48"); } }
@keyframes software-stat-three { 0%,24%,98%,100% { d: path("M39 42V48"); } 32%,57% { d: path("M39 35V48"); } 65%,90% { d: path("M39 45V48"); } }
@media (prefers-reduced-motion: reduce) { .service-demo * { animation: none !important; } }
.handoff-team .team-planner { animation: handoff-planner 18s ease-in-out infinite; }
@keyframes handoff-planner { 0%,45%,100% { transform: translate(222px,193px); } 52%,96% { transform: translate(222px,181px); } }
@media (prefers-reduced-motion: reduce) { .handoff-team .team-planner { animation: none !important; } }

/* Six brisk passes: three picture shapes and alternating headline drag lengths. */
.website-playground .demo-cursor { animation: website-tour 48s ease-in-out infinite; }
.website-headline { transform-origin: 28px 91.5px; animation: website-line 48s ease-in-out infinite; }
.website-shapes { transform-origin: 0 0; animation: website-pop 8s ease-in-out infinite; }
.website-triangle { animation: website-triangle 48s linear infinite; }
.website-circle { opacity: 0; animation: website-circle 48s linear infinite; }
.website-square { opacity: 0; animation: website-square 48s linear infinite; }
.website-shape-click,.website-bottom-click { opacity: 0; transform-box: fill-box; transform-origin: center; }
.website-shape-click { animation: website-shape-click 8s ease-out infinite; }
.website-bottom-click { animation: website-bottom-click 8s ease-out infinite; }
.website-playground .click-cue { animation: website-button-click 8s ease-out infinite; }
.website-playground .web-pages > rect:nth-of-type(3) { animation: website-button 8s ease-in-out infinite; }
.website-playground .web-pages > rect:nth-last-of-type(-n+2) { animation: none; }
@keyframes website-pop { 0%,12%,30%,100% { transform: scale(1); } 15% { transform: scale(.82); } 23% { transform: scale(1.12); } }
@keyframes website-shape-click { 0%,13%,24%,100% { opacity: 0; transform: scale(.7); } 17% { opacity: .75; transform: scale(1); } 23% { opacity: 0; transform: scale(1.35); } }
@keyframes website-button-click { 0%,65%,76%,100% { opacity: 0; transform: scale(.6); } 69% { opacity: .7; transform: scale(1); } 75% { opacity: 0; transform: scale(1.3); } }
@keyframes website-bottom-click { 0%,81%,93%,100% { opacity: 0; transform: scale(.6); } 85% { opacity: .7; transform: scale(1); } 92% { opacity: 0; transform: scale(1.3); } }
@keyframes website-button { 0%,65%,79%,100% { fill: #dbc78e; } 69%,74% { fill: #b49a54; } }
@keyframes website-bottom { 0%,81%,100% { fill: #eee; } 86%,94% { fill: #ddd5be; } }
@keyframes website-tour { 0.00000% { transform: translate(166px,153px); } 1.33333% { transform: translate(183px,108px); } 3.33333% { transform: translate(183px,108px); } 5.00000% { transform: translate(136px,91.5px); } 8.33333% { transform: translate(64px,91.5px); } 10.66667% { transform: translate(63px,127px); } 12.00000% { transform: translate(63px,127px); } 13.66667% { transform: translate(166px,153px); } 16.66667% { transform: translate(166px,153px); } 16.66667% { transform: translate(166px,153px); } 18.00000% { transform: translate(183px,108px); } 20.00000% { transform: translate(183px,108px); } 21.66667% { transform: translate(64px,91.5px); } 25.00000% { transform: translate(136px,91.5px); } 27.33333% { transform: translate(63px,127px); } 28.66667% { transform: translate(63px,127px); } 30.33333% { transform: translate(166px,153px); } 33.33333% { transform: translate(166px,153px); } 33.33333% { transform: translate(166px,153px); } 34.66667% { transform: translate(183px,108px); } 36.66667% { transform: translate(183px,108px); } 38.33333% { transform: translate(136px,91.5px); } 41.66667% { transform: translate(64px,91.5px); } 44.00000% { transform: translate(63px,127px); } 45.33333% { transform: translate(63px,127px); } 47.00000% { transform: translate(166px,153px); } 50.00000% { transform: translate(166px,153px); } 50.00000% { transform: translate(166px,153px); } 51.33333% { transform: translate(183px,108px); } 53.33333% { transform: translate(183px,108px); } 55.00000% { transform: translate(64px,91.5px); } 58.33333% { transform: translate(136px,91.5px); } 60.66667% { transform: translate(63px,127px); } 62.00000% { transform: translate(63px,127px); } 63.66667% { transform: translate(166px,153px); } 66.66667% { transform: translate(166px,153px); } 66.66667% { transform: translate(166px,153px); } 68.00000% { transform: translate(183px,108px); } 70.00000% { transform: translate(183px,108px); } 71.66667% { transform: translate(136px,91.5px); } 75.00000% { transform: translate(64px,91.5px); } 77.33333% { transform: translate(63px,127px); } 78.66667% { transform: translate(63px,127px); } 80.33333% { transform: translate(166px,153px); } 83.33333% { transform: translate(166px,153px); } 83.33333% { transform: translate(166px,153px); } 84.66667% { transform: translate(183px,108px); } 86.66667% { transform: translate(183px,108px); } 88.33333% { transform: translate(64px,91.5px); } 91.66667% { transform: translate(136px,91.5px); } 94.00000% { transform: translate(63px,127px); } 95.33333% { transform: translate(63px,127px); } 97.00000% { transform: translate(166px,153px); } 100.00000% { transform: translate(166px,153px); } }
@keyframes website-line { 0.00000% { transform: scaleX(1); } 5.00000% { transform: scaleX(1); } 8.33333% { transform: scaleX(0.3333333333333333); } 16.66667% { transform: scaleX(0.3333333333333333); } 16.66667% { transform: scaleX(0.3333333333333333); } 21.66667% { transform: scaleX(0.3333333333333333); } 25.00000% { transform: scaleX(1); } 33.33333% { transform: scaleX(1); } 33.33333% { transform: scaleX(1); } 38.33333% { transform: scaleX(1); } 41.66667% { transform: scaleX(0.3333333333333333); } 50.00000% { transform: scaleX(0.3333333333333333); } 50.00000% { transform: scaleX(0.3333333333333333); } 55.00000% { transform: scaleX(0.3333333333333333); } 58.33333% { transform: scaleX(1); } 66.66667% { transform: scaleX(1); } 66.66667% { transform: scaleX(1); } 71.66667% { transform: scaleX(1); } 75.00000% { transform: scaleX(0.3333333333333333); } 83.33333% { transform: scaleX(0.3333333333333333); } 83.33333% { transform: scaleX(0.3333333333333333); } 88.33333% { transform: scaleX(0.3333333333333333); } 91.66667% { transform: scaleX(1); } 100.00000% { transform: scaleX(1); } }
@keyframes website-triangle { 0% { opacity: 1; } 2.35000% { opacity: 1; } 2.65000% { opacity: 0; } 19.01667% { opacity: 0; } 19.31667% { opacity: 0; } 35.68333% { opacity: 0; } 35.98333% { opacity: 1; } 52.35000% { opacity: 1; } 52.65000% { opacity: 0; } 69.01667% { opacity: 0; } 69.31667% { opacity: 0; } 85.68333% { opacity: 0; } 85.98333% { opacity: 1; } 100% { opacity: 1; } }
@keyframes website-circle { 0% { opacity: 0; } 2.35000% { opacity: 0; } 2.65000% { opacity: 1; } 19.01667% { opacity: 1; } 19.31667% { opacity: 0; } 35.68333% { opacity: 0; } 35.98333% { opacity: 0; } 52.35000% { opacity: 0; } 52.65000% { opacity: 1; } 69.01667% { opacity: 1; } 69.31667% { opacity: 0; } 85.68333% { opacity: 0; } 85.98333% { opacity: 0; } 100% { opacity: 0; } }
@keyframes website-square { 0% { opacity: 0; } 2.35000% { opacity: 0; } 2.65000% { opacity: 0; } 19.01667% { opacity: 0; } 19.31667% { opacity: 1; } 35.68333% { opacity: 1; } 35.98333% { opacity: 0; } 52.35000% { opacity: 0; } 52.65000% { opacity: 0; } 69.01667% { opacity: 0; } 69.31667% { opacity: 1; } 85.68333% { opacity: 1; } 85.98333% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .service-demo * { animation: none !important; } .website-circle,.website-square { opacity: 0; } }

.website-playground .website-bottom-click { display: none; }

/* Hand-free comparison: grounded travel, with a pickup hop and bell hop. */
.hopping-team .team-checker { animation: hop-checker 18s ease-in-out infinite; }
.hopping-team .team-courier { animation: hop-courier 18s ease-in-out infinite; }
.hopping-team .handoff-paper { animation: hop-paper 18s ease-in-out infinite; }
.hopping-team .team-checker > use { transform-origin: 0 0; animation: hop-pickup-body 18s ease-in-out infinite; }
@keyframes hop-checker {
  0%,4%,52%,100% { transform: translate(45px,110px); }
  14%,23% { transform: translate(73px,110px); animation-timing-function: cubic-bezier(.333333,.666667,.666667,1); }
  28% { transform: translate(73px,63px); animation-timing-function: cubic-bezier(.333333,0,.666667,.333333); }
  33% { transform: translate(73px,110px); }
  38%,44% { transform: translate(71px,110px); }
}
@keyframes hop-courier {
  0%,28%,58%,100% { transform: translate(176px,110px); }
  40%,42% { transform: translate(95px,110px); }
}
@keyframes hop-paper {
  0%,19%,100% { transform: translate(85px,61px); opacity: 0; }
  21%,28% { transform: translate(85px,61px); opacity: 1; animation-timing-function: cubic-bezier(.333333,0,.666667,.333333); }
  33% { transform: translate(85px,108px); opacity: 1; }
  38%,42% { transform: translate(83px,108px); opacity: 1; }
  58.00% { transform: translate(164.000px,108.000px); opacity: 1; animation-timing-function: linear; }
  58.25% { transform: translate(164.270px,108.400px); opacity: 1; animation-timing-function: linear; }
  58.50% { transform: translate(165.039px,109.480px); opacity: 1; animation-timing-function: linear; }
  58.75% { transform: translate(166.249px,111.016px); opacity: 1; animation-timing-function: linear; }
  59.00% { transform: translate(167.848px,112.746px); opacity: 1; animation-timing-function: linear; }
  59.25% { transform: translate(169.782px,114.413px); opacity: 1; animation-timing-function: linear; }
  59.50% { transform: translate(171.994px,115.787px); opacity: 1; animation-timing-function: linear; }
  59.75% { transform: translate(174.423px,116.687px); opacity: 1; animation-timing-function: linear; }
  60.00% { transform: translate(177.000px,117.000px); opacity: 1; animation-timing-function: linear; }
  60.25% { transform: translate(179.646px,116.687px); opacity: 1; animation-timing-function: linear; }
  60.50% { transform: translate(182.275px,115.787px); opacity: 1; animation-timing-function: linear; }
  60.75% { transform: translate(184.793px,114.413px); opacity: 1; animation-timing-function: linear; }
  61.00% { transform: translate(187.098px,112.746px); opacity: 1; animation-timing-function: linear; }
  61.25% { transform: translate(189.081px,111.016px); opacity: 1; animation-timing-function: linear; }
  61.50% { transform: translate(190.632px,109.480px); opacity: 1; animation-timing-function: linear; }
  61.75% { transform: translate(191.641px,108.400px); opacity: 1; animation-timing-function: linear; }
  62.00% { transform: translate(192.000px,108.000px); opacity: 1; animation-timing-function: ease-in-out; }
  64% { transform: translate(216px,93px); opacity: 1; }
  70% { transform: translate(216px,116px); opacity: 1; }
  71%,97% { transform: translate(216px,116px); opacity: 0; }
}
@keyframes hop-pickup-body {
  0%,20%,28%,37%,100% { transform: scale(1); }
  23% { transform: scale(1.04,.96); }
  24% { transform: scale(.98,1.025); }
  33.5% { transform: scale(1.04,.96); }
}
@media (prefers-reduced-motion: reduce) { .hopping-team * { animation: none !important; } }

/* Press the pointer itself while its tip stays on the click target. */
.website-playground .demo-cursor > path {
  transform-origin: 0 0;
  animation: website-pointer-press 8s ease-in-out infinite;
}
@keyframes website-pointer-press {
  0%,12%,19%,64%,72%,100% { transform: scale(1); }
  15%,16%,68%,69% { transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
  .website-playground .demo-cursor > path { animation: none !important; }
}

/* Tasks reflect the two workers; completion triggers its own notification. */
:is(.hopping-team,.two-worker-team) .team-task-card { animation: two-team-task 18s ease-in-out infinite; }
:is(.hopping-team,.two-worker-team) .team-reminder { animation: two-team-bell 18s ease-in-out infinite; }
:is(.hopping-team,.two-worker-team) .team-reminder-ring { animation: two-team-bell-ring 18s ease-out infinite; }
@keyframes two-team-task {
  0%,16%,100% { transform: translateX(0); }
  22%,66% { transform: translateX(66px); }
  70%,96% { transform: translateX(132px); }
}
@keyframes two-team-bell {
  0%,78%,100% { opacity: .4; transform: rotate(0) scale(1); }
  79% { opacity: 1; transform: rotate(0) scale(.85); }
  81% { opacity: 1; transform: rotate(-10deg) scale(1); }
  83% { opacity: 1; transform: rotate(8deg) scale(1); }
  85%,97% { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes two-team-bell-ring {
  0%,79%,88%,100% { opacity: 0; transform: scale(.6); }
  82% { opacity: .7; transform: scale(1); }
  87% { opacity: 0; transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) { .hopping-team * { animation: none !important; } }

/* Change bar geometry, preserving true circular end caps and the baseline. */
.app-chart-bar-0 { animation: app-chart-bar-0 16s ease-in-out infinite; animation-delay: var(--delay); }
@keyframes app-chart-bar-0 { 0%,6%,100% { y: 139px; height: 10px; } 20%,90% { y: 130px; height: 19px; } }
.app-chart-bar-1 { animation: app-chart-bar-1 16s ease-in-out infinite; animation-delay: var(--delay); }
@keyframes app-chart-bar-1 { 0%,6%,100% { y: 135.95px; height: 13.05px; } 20%,90% { y: 120px; height: 29px; } }
.app-chart-bar-2 { animation: app-chart-bar-2 16s ease-in-out infinite; animation-delay: var(--delay); }
@keyframes app-chart-bar-2 { 0%,6%,100% { y: 139px; height: 10px; } 20%,90% { y: 127px; height: 22px; } }
.app-chart-bar-3 { animation: app-chart-bar-3 16s ease-in-out infinite; animation-delay: var(--delay); }
@keyframes app-chart-bar-3 { 0%,6%,100% { y: 134.6px; height: 14.4px; } 20%,90% { y: 117px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .app-chart > rect { animation: none !important; } }

/* Close-held delivery and three completion milestones for the selected team. */
.two-worker-team .team-courier { animation: close-courier 18s ease-in-out infinite; }
.two-worker-team .team-delivery-hand { transform: translate(-19px,-1px); animation: close-courier-hand 18s ease-in-out infinite; }
.two-worker-team .handoff-paper { animation: tipped-paper 18s ease-in-out infinite; }
@keyframes close-courier {
  0%,12%,84%,100% { transform: translate(176px,110px); }
  38%,42% { transform: translate(95px,110px); }
  58%,74% { transform: translate(186px,110px); }
}
@keyframes close-courier-hand {
  0%,31%,77%,100% { transform: translate(-19px,-1px); }
  40%,42%,58% { transform: translate(-20px,4px); }
  64%,65% { transform: translate(10px,-8px); }
  70% { transform: translate(3px,-1px); }
}
@keyframes tipped-paper {
  0%,19%,100% { transform: translate(85px,61px) rotate(0); opacity: 0; }
  21%,30% { transform: translate(85px,61px) rotate(0); opacity: 1; }
  36% { transform: translate(77px,96px) rotate(0); opacity: 1; }
  40%,42% { transform: translate(83px,108px) rotate(0); opacity: 1; }
  58% { transform: translate(174px,108px) rotate(0); opacity: 1; }
  64% { transform: translate(204px,96px) rotate(22deg); opacity: 1; }
  65% { transform: translate(204px,96px) rotate(30deg); opacity: 1; animation-timing-function: cubic-bezier(.333333,0,.666667,.333333); }
  70% { transform: translate(218px,119px) rotate(80deg); opacity: 1; }
  71%,97% { transform: translate(218px,119px) rotate(80deg); opacity: 0; }
}
.task-milestone { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.task-milestone-1 { animation: milestone-one 18s ease-in-out infinite; }
.task-milestone-2 { animation: milestone-two 18s ease-in-out infinite; }
.task-milestone-3 { animation: milestone-three 18s ease-in-out infinite; }
@keyframes milestone-one { 0%,40%,100% { stroke-dashoffset: 1; opacity: 0; } 40.1% { opacity: 1; } 43%,96% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes milestone-two { 0%,67%,100% { stroke-dashoffset: 1; opacity: 0; } 67.1% { opacity: 1; } 70%,96% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes milestone-three { 0%,90%,100% { stroke-dashoffset: 1; opacity: 0; } 90.1% { opacity: 1; } 93%,96% { stroke-dashoffset: 0; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .two-worker-team * { animation: none !important; } .task-milestone { stroke-dashoffset: 0; opacity: 1; } }

/* Fill once, finish review, move the card, then notify. */
.two-worker-team .team-task-card { animation: middle-to-review 18s ease-in-out infinite; }
.two-worker-team .task-working-lines { stroke-dasharray: 1; }
.two-worker-team .task-enquiry-progress { animation: task-enquiry-progress 18s linear infinite; }
.two-worker-team .task-total-progress { animation: task-total-progress 18s linear infinite; }
@keyframes middle-to-review {
  0%,84%,100% { transform: translateX(0); }
  89%,96% { transform: translateX(66px); }
}
@keyframes task-enquiry-progress {
  0%,4%,100% { stroke-dashoffset: 1; }
  40%,96% { stroke-dashoffset: 0; }
}
@keyframes task-total-progress {
  0%,4%,100% { stroke-dashoffset: 1; }
  93%,96% { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) { .two-worker-team * { animation: none !important; } .task-working-lines { stroke-dashoffset: 0; } }

.two-worker-team .team-reminder { animation-name: completed-review-bell; }
.two-worker-team .team-reminder-ring { animation-name: completed-review-ring; }
@keyframes completed-review-bell {
  0%,89%,100% { opacity: .4; transform: rotate(0) scale(1); }
  90% { opacity: 1; transform: rotate(0) scale(.85); }
  92% { opacity: 1; transform: rotate(-10deg) scale(1); }
  94% { opacity: 1; transform: rotate(8deg) scale(1); }
  96%,97% { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes completed-review-ring {
  0%,90%,98%,100% { opacity: 0; transform: scale(.6); }
  93% { opacity: .7; transform: scale(1); }
  97% { opacity: 0; transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) { .two-worker-team * { animation: none !important; } }

/* Independent strokes share one slower fill, regardless of their lengths. */
.two-worker-team .team-draft-lines { animation-name: simultaneous-draft-lines; }
.two-worker-team .team-review-ready { animation-name: slower-review-ready; }
@keyframes simultaneous-draft-lines {
  0%,70%,100% { stroke-dashoffset: 1; }
  84%,96% { stroke-dashoffset: 0; }
}
@keyframes slower-review-ready {
  0%,84%,100% { opacity: .15; }
  86%,96% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .two-worker-team * { animation: none !important; } }

.two-worker-team .team-scan { animation-name: full-height-scan; }
@keyframes full-height-scan {
  0%,4%,100% { transform: translateY(0); opacity: 0; }
  6% { transform: translateY(0); opacity: 1; }
  14% { transform: translateY(20px); opacity: 1; }
  17%,98% { transform: translateY(20px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .two-worker-team .team-scan { animation: none !important; } }

/* Three services, with manually selected app/software examples. */
.services-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.services-grid .service-card { grid-template-columns: minmax(0,1fr); align-content: start; }
.service-carousel { min-width: 0; width: 100%; }
.service-carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 12px; }
.service-carousel-track::-webkit-scrollbar { display: none; }
.service-carousel-track:focus-visible { outline: 2px solid #a9904e; outline-offset: 3px; }
.service-carousel-track .carousel-slide { flex: 0 0 100%; width: 100%; min-width: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; align-items: center; aspect-ratio: 240 / 228; }
.service-carousel-track .carousel-slide svg { width: 100%; }
.services-grid .carousel-caption { margin: 7px 0 0; max-width: none; text-align: center; font-size: 12px; line-height: 1.4; }
.carousel-dots { display: flex; justify-content: center; }
.carousel-dot { display: grid; place-items: center; width: 24px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.carousel-dot span { width: 7px; height: 7px; border-radius: 50%; background: #c9c9c4; transition: background .2s, transform .2s; }
.carousel-dot[aria-pressed="true"] span { background: #a9904e; transform: scale(1.25); }
.carousel-dot:focus-visible { outline: 2px solid #a9904e; outline-offset: -4px; }
@media (min-width: 1001px) { .services-grid .service-demo, .service-carousel { width: min(280px,100%); justify-self: center; } .services-grid .service-copy { min-height: 150px; } }
@media (min-width: 681px) and (max-width: 1000px) { .services-grid { grid-template-columns: 1fr; } .services-grid .service-card { grid-template-columns: 1fr 1fr; } .service-carousel { width: min(280px,100%); justify-self: center; } }
@media (max-width: 680px) { .services-grid { grid-template-columns: 1fr; } .service-carousel, .services-grid .service-demo { width: min(260px,100%); justify-self: center; } }
@media (prefers-reduced-motion: reduce) { .carousel-dot span { transition: none; } }

/* Responsive version of the same website, demonstrated through touch. */
.website-mobile .website-headline { transform-origin: 80px 67.5px; }
.mobile-web-button { animation: website-button 8s ease-in-out infinite; }
.mobile-button-click { opacity: 0; transform-box: fill-box; transform-origin: center; animation: website-button-click 8s ease-out infinite; }
.mobile-touch { animation: mobile-website-tour 48s ease-in-out infinite; }
.mobile-touch-pad { transform-origin: 0 0; animation: website-pointer-press 8s ease-in-out infinite; }
@keyframes mobile-website-tour { 0.00000% { transform: translate(102.5px,98.5px); } 1.33333% { transform: translate(121px,143px); } 3.33333% { transform: translate(121px,143px); } 5.00000% { transform: translate(160px,67.5px); } 8.33333% { transform: translate(106.66666666666667px,67.5px); } 10.66667% { transform: translate(102.5px,98.5px); } 12.00000% { transform: translate(102.5px,98.5px); } 13.66667% { transform: translate(102.5px,98.5px); } 16.66667% { transform: translate(102.5px,98.5px); } 16.66667% { transform: translate(102.5px,98.5px); } 18.00000% { transform: translate(121px,143px); } 20.00000% { transform: translate(121px,143px); } 21.66667% { transform: translate(106.66666666666667px,67.5px); } 25.00000% { transform: translate(160px,67.5px); } 27.33333% { transform: translate(102.5px,98.5px); } 28.66667% { transform: translate(102.5px,98.5px); } 30.33333% { transform: translate(102.5px,98.5px); } 33.33333% { transform: translate(102.5px,98.5px); } 33.33333% { transform: translate(102.5px,98.5px); } 34.66667% { transform: translate(121px,143px); } 36.66667% { transform: translate(121px,143px); } 38.33333% { transform: translate(160px,67.5px); } 41.66667% { transform: translate(106.66666666666667px,67.5px); } 44.00000% { transform: translate(102.5px,98.5px); } 45.33333% { transform: translate(102.5px,98.5px); } 47.00000% { transform: translate(102.5px,98.5px); } 50.00000% { transform: translate(102.5px,98.5px); } 50.00000% { transform: translate(102.5px,98.5px); } 51.33333% { transform: translate(121px,143px); } 53.33333% { transform: translate(121px,143px); } 55.00000% { transform: translate(106.66666666666667px,67.5px); } 58.33333% { transform: translate(160px,67.5px); } 60.66667% { transform: translate(102.5px,98.5px); } 62.00000% { transform: translate(102.5px,98.5px); } 63.66667% { transform: translate(102.5px,98.5px); } 66.66667% { transform: translate(102.5px,98.5px); } 66.66667% { transform: translate(102.5px,98.5px); } 68.00000% { transform: translate(121px,143px); } 70.00000% { transform: translate(121px,143px); } 71.66667% { transform: translate(160px,67.5px); } 75.00000% { transform: translate(106.66666666666667px,67.5px); } 77.33333% { transform: translate(102.5px,98.5px); } 78.66667% { transform: translate(102.5px,98.5px); } 80.33333% { transform: translate(102.5px,98.5px); } 83.33333% { transform: translate(102.5px,98.5px); } 83.33333% { transform: translate(102.5px,98.5px); } 84.66667% { transform: translate(121px,143px); } 86.66667% { transform: translate(121px,143px); } 88.33333% { transform: translate(106.66666666666667px,67.5px); } 91.66667% { transform: translate(160px,67.5px); } 94.00000% { transform: translate(102.5px,98.5px); } 95.33333% { transform: translate(102.5px,98.5px); } 97.00000% { transform: translate(102.5px,98.5px); } 100.00000% { transform: translate(102.5px,98.5px); } }
@media (prefers-reduced-motion: reduce) { .website-mobile * { animation: none !important; } .mobile-touch,.mobile-button-click { opacity: 0; } }

/* Every selected example gets a full cycle from its initial frame. */
.service-carousel .carousel-slide { --delay: 0s !important; }

/* Clip carousel motion at the actual grey card edges, not an inset window. */
.services-grid .service-card { overflow: hidden; }
.services-grid .service-card .service-carousel {
  width: calc(100% + 56px);
  max-width: none;
  margin-left: -28px;
  justify-self: start;
}
.service-carousel-track { border-radius: 0; }
.service-carousel-track:focus-visible { outline-offset: -3px; }
.service-carousel-track .carousel-slide {
  box-sizing: border-box;
  padding: 0 28px;
  aspect-ratio: auto;
  justify-items: center;
}
.service-carousel-track .carousel-slide svg { width: min(280px,100%); }
@media (max-width: 680px) {
  .service-carousel-track .carousel-slide svg { width: min(260px,100%); }
}
@media (min-width: 681px) and (max-width: 1000px) {
  .services-grid .service-card:has(.service-carousel) { grid-template-columns: minmax(0,1fr); }
}

.app-toggle-track { animation: app-toggle-track 16s ease-in-out infinite; animation-delay: var(--delay); }
@keyframes app-toggle-track {
  0%,50%,100% { fill: #d2d2cc; }
  57%,89% { fill: #cbb77d; }
}
@media (prefers-reduced-motion: reduce) { .app-toggle-track { animation: none !important; } }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.enquiry-invitation { max-width: 38ch; margin: 0 auto; }
@media (max-width: 680px) {
  .steps { gap: 22px; }
  .steps li { display: grid; grid-template-columns: 36px minmax(0,1fr); column-gap: 12px; row-gap: 4px; }
  .steps li::before { content: counter(steps); grid-column: 1; grid-row: 1; width: 36px; height: 36px; margin: 0; }
  .steps h3 { grid-column: 2; grid-row: 1; align-self: center; margin: 0; line-height: 1.3; }
  .steps p { grid-column: 2; margin: 0; font-size: 14px; line-height: 1.5; }
  .enquiry-invitation { font-size: 14px; }
  .enquiry-controls { margin-top: 20px; }
}

/* Roomy laptop rows keep each service illustration beside its description. */
@media (min-width: 681px) {
  .services-grid { grid-template-columns: minmax(0,1fr); }
  .services-grid .service-card,
  .services-grid .service-card:has(.service-carousel) {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    align-items: center;
  }
  .services-grid .service-copy { min-height: 0; align-self: center; padding-top: 0; }
  .services-grid .service-card .service-carousel {
    width: calc(100% + 28px);
    margin-left: 0;
  }
  .service-carousel-track .carousel-slide { padding: 0 28px 0 0; }
  .service-carousel .carousel-caption,
  .service-carousel .carousel-dots { margin-right: 28px; }
  .services-grid .service-demo > svg { max-width: 260px; }
  .services-grid .service-card > .service-demo { width: min(260px,100%); }
}

#project-process { scroll-margin-top: 24px; }

.service-invitation { padding: 32px 0 4px; max-width: 640px; }
.service-invitation h3 { margin: 0 0 10px; }
.service-invitation p { color: #606060; font-size: 15px; line-height: 1.7; margin: 0 0 16px; }
@media (max-width: 680px) { .service-invitation { padding-top: 28px; } }