@import url('motion-tokens.css'); /* shared BlueCat motion tokens */
/* BlueCat motion layer — code-drawn motion on top of bluecat.css. Style untouched:
   flat fills, cast hues, 200ms hovers, springs on marks/hero only. */

/* ---------- shared ---------- */
.mo-canvas { display: block; width: 100%; height: 100%; }
@keyframes moBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-2deg); } }

/* ---------- hero ---------- */
.marks-hero .mark svg { animation: moBob 4.8s cubic-bezier(.45,0,.55,1) infinite; animation-delay: calc(var(--d, 0ms) + 900ms); transform-origin: 50% 80%; }
.marks-hero .m2 svg { animation-duration: 3.6s; }
.marks-hero .m3 svg { animation-duration: 5.6s; }
.hero-h1 .pill::before { animation: moBeat 2.4s cubic-bezier(.34,1.56,.64,1) infinite; }
@keyframes moBeat { 0%, 60%, 100% { transform: scale(1); } 20% { transform: scale(1.35); } 40% { transform: scale(.9); } }

/* desk feed: newest card drops in on top */
.mock-desk .desk-card.mo-new { animation: moDeskIn 700ms var(--spring, cubic-bezier(.34,1.56,.64,1)) both; }
@keyframes moDeskIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }

/* pretend visitor: cursor glides to the button and clicks */
.mo-cursor { position: absolute; width: 18px; height: 18px; pointer-events: none; z-index: 3; left: 0; top: 0; }
.mo-cursor svg { width: 100%; height: 100%; display: block; }
.mo-cursor::after { content: ''; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 9999px; border: 2px solid var(--blue, #0075de); opacity: 0; }
.mock-main { position: relative; }
.mock-main .mo-cursor { animation: moCurMain 7s cubic-bezier(.65,0,.35,1) infinite; }
.mock-main .mo-cursor::after { animation: moClick 7s ease-out infinite; }
@keyframes moCurMain {
  0%, 8%   { transform: translate(700px, 96px); }
  32%, 46% { transform: translate(48px, 168px); }
  70%, 100%{ transform: translate(700px, 96px); }
}
@keyframes moClick { 0%, 36% { opacity: 0; transform: scale(.4); } 38% { opacity: 1; transform: scale(.6); } 48%, 100% { opacity: 0; transform: scale(1.8); } }
.mock-btns b { transition: transform 200ms ease; }
.mock-main.mo-press .mock-btns b { transform: scale(.94); }

/* ---------- trust strip: four leaks, one catch ---------- */
.mo-drip { height: 132px; grid-column: 1 / span 2; grid-row: 2; }
.trust-card > p { grid-column: 2; grid-row: 1; }

/* ---------- services tiles ---------- */
.t-chat .bub { animation: moBub 7s cubic-bezier(.34,1.56,.64,1) infinite both; }
.t-chat .bub:nth-child(1) { animation: none; }
.t-chat .bub:nth-child(2) { animation-name: moBub2; }
.t-chat .bub:nth-child(3) { animation-name: moBub3; }
.t-chat .bub:nth-child(4) { animation-name: moBub4; }
@keyframes moBub  { 0% { opacity: 0; transform: translateY(8px) scale(.94); } 5%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes moBub2 { 0%, 8% { opacity: 0; transform: translateY(8px) scale(.94); } 15%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes moBub3 { 0%, 24% { opacity: 0; transform: translateY(8px) scale(.94); } 31%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes moBub4 { 0%, 40% { opacity: 0; transform: translateY(8px) scale(.94); } 47%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.t-call .call-dot { animation: moRing 1.6s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes moRing { 0% { box-shadow: 0 0 0 0 rgba(246,73,50,.5); } 80%, 100% { box-shadow: 0 0 0 7px rgba(246,73,50,0); } }
.mo-wave { display: inline-flex; align-items: center; gap: 2px; height: 12px; margin-left: 8px; }
.mo-wave i { display: block; width: 2px; height: 100%; border-radius: 4px; background: currentColor; opacity: .55; transform-origin: 50% 50%; animation: moWave 1.1s cubic-bezier(.45,0,.55,1) infinite; }
.mo-wave i:nth-child(2) { animation-delay: -.2s; } .mo-wave i:nth-child(3) { animation-delay: -.5s; }
.mo-wave i:nth-child(4) { animation-delay: -.8s; } .mo-wave i:nth-child(5) { animation-delay: -.35s; } .mo-wave i:nth-child(6) { animation-delay: -.65s; } .mo-wave i:nth-child(7) { animation-delay: -.1s; }
@keyframes moWave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.t-call .capture-card .cr { animation: moRow 6s ease infinite both; }
.t-call .capture-card .cr:nth-child(3) { animation-name: moRow2; }
.t-call .capture-card .cr:nth-child(4) { animation-name: moRow3; }
@keyframes moRow  { 0%, 9% { opacity: 0; } 16%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes moRow2 { 0%, 25% { opacity: 0; } 32%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes moRow3 { 0%, 41% { opacity: 0; } 48%, 94% { opacity: 1; } 100% { opacity: 0; } }

.t-review .review-card:nth-child(2) { animation: moReview 7s cubic-bezier(.34,1.56,.64,1) infinite both; }
@keyframes moReview { 0%, 6% { opacity: 0; transform: translateY(16px); } 14%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
.t-review .review-card:nth-child(2) .rc-stars { display: inline-block; clip-path: inset(0 100% 0 0); animation: moStars 7s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes moStars { 0%, 14% { clip-path: inset(0 100% 0 0); } 30%, 100% { clip-path: inset(0 0 0 0); } }

.t-site { position: relative; }
.t-site .t-bar span::after { content: ''; display: inline-block; width: 1px; height: 10px; margin-left: 2px; vertical-align: -1px; background: var(--ink-60); animation: moCaret 1.2s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes moCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes moCurSite { 0%, 8% { transform: translate(60px, 96px); } 32%, 48% { transform: translate(var(--bx, 210px), 40px); } 72%, 100% { transform: translate(60px, 96px); } }

/* jelly: the arrow chips and the filled buttons squish on hover */
.arrow-chip, .btn-primary { transition: transform 200ms ease, background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.home-svc-card:hover .arrow-chip { animation: moJelly 600ms var(--spring, cubic-bezier(.34,1.56,.64,1)); }
.btn-primary:hover { animation: moJelly 600ms var(--spring, cubic-bezier(.34,1.56,.64,1)); }
@keyframes moJelly { 0% { transform: scale(1, 1); } 30% { transform: scale(1.08, .92); } 50% { transform: scale(.95, 1.05); } 70% { transform: scale(1.03, .97); } 100% { transform: scale(1, 1); } }

/* ---------- how: the steps tick on in order ---------- */
.step-card .step-ui > div { opacity: 0; transform: translateX(-8px); transition: opacity 500ms ease, transform 500ms var(--enter, ease); }
.step-card.in .step-ui > div { opacity: 1; transform: none; }
.step-card.in .step-ui > div:nth-child(1) { transition-delay: calc(var(--i, 0) * 240ms + 400ms); }
.step-card.in .step-ui > div:nth-child(2) { transition-delay: calc(var(--i, 0) * 240ms + 700ms); }
.step-card.in .step-ui > div:nth-child(3) { transition-delay: calc(var(--i, 0) * 240ms + 1000ms); }
.step-card .step-ui i { transition: transform 400ms var(--spring, cubic-bezier(.34,1.56,.64,1)); transform: scale(0); }
.step-card.in .step-ui i { transform: scale(1); transition-delay: inherit; }
.step-card .step-ui i.mo-on { background: var(--blue, #0075de) !important; transition: background 200ms ease; }

/* ---------- why: the flipping question disc ---------- */
#why .container { position: relative; }
.mo-disc { position: absolute; right: 0; top: -24px; width: 240px; height: 200px; pointer-events: none; }

/* ---------- cta: the endless ribbon ---------- */
.mo-ribbon { width: min(100%, 640px); height: 240px; margin: 0 auto 24px; pointer-events: none; }

/* ---------- footer: the cat blinks ---------- */
.brand-logo { height: 28px; width: auto; display: block; }
.footer-brand .brand-logo { height: 24px; }
@keyframes moBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

@media (max-width: 900px) {
  .mo-drip, .trust-card > p { grid-column: auto; grid-row: auto; }
}
@media (max-width: 1024px) {
  .mo-disc { width: 160px; height: 160px; top: -8px; }
}
@media (max-width: 640px) {
  .mo-disc { width: 112px; height: 112px; top: -4px; right: -8px; }
  .mo-drip { height: 112px; }
  .mo-ribbon { height: 160px; margin-bottom: 16px; }
  .mock-main .mo-cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .marks-hero .mark svg, .hero-h1 .pill::before, .t-chat .bub, .t-call .call-dot, .mo-wave i,
  .t-call .capture-card .cr, .t-review .review-card, .t-review .rc-stars, .mo-cursor, .mo-cursor::after,
  .home-svc-card:hover .arrow-chip, .btn-primary:hover, .mock-desk .desk-card.mo-new { animation: none !important; }
  .t-review .review-card:nth-child(2) .rc-stars { clip-path: none; }
  .mo-cursor { display: none; }
  .step-card .step-ui > div, .step-card .step-ui i { transform: none !important; }
}

/* ================= PUSH — a few moves from Officevibe + Podia (2026-10-09) ================= */
/* 1. serif italic voice inside the sans headlines */
.section-h2 em, .cta-h2 em, .trust-card h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -1.4px; }
.trust-card h2 em { letter-spacing: -1px; }

/* 2. bold proof numbers */
.proof-num { font-size: 40px; letter-spacing: -1.2px; }
.hero-proof { align-items: baseline; }

/* 3. floating chips off the hero mockup */
.mo-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 16px 8px 8px; font-size: 14px; line-height: 1.2; color: var(--ink-95); pointer-events: none; white-space: nowrap; opacity: 0; animation: moChipIn 700ms var(--spring) forwards, moBob 5.2s cubic-bezier(.45,0,.55,1) 1.6s infinite; }
.mo-chip b { font-weight: 600; }
.mo-chip .ic { width: 24px; height: 24px; border-radius: var(--r-pill); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--white); }
.mo-chip.c1 { left: 520px; top: 196px; animation-delay: 900ms, 1.6s; }
.mo-chip.c2 { right: 40px; top: 28px; animation-delay: 1150ms, 2.4s; }
@keyframes moChipIn { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }

/* 4. cut-paper shapes behind the service tiles */
.home-svc-card .mo-cut { position: absolute; right: -60px; top: -60px; width: 120px; height: 120px; transform-origin: 50% 50%; pointer-events: none; z-index: 0; transform: rotate(var(--rot, 0deg)); will-change: transform; }
.home-svc-card > *:not(.mo-cut) { position: relative; z-index: 1; }
.home-svc-card .svc-tile { z-index: 2; }

/* 5. the closing band goes navy */
#cta .cta-inner { max-width: none; background: var(--midnight); border-radius: var(--r-card); padding: 56px 24px 64px; }
#cta .cta-h2 { color: var(--white); max-width: 760px; margin: 0 auto; }
#cta .cta-h2 em { color: var(--sky); }
#cta .cta-sub { color: rgba(255,255,255,.7); }
#cta .chip { background: rgba(255,255,255,.1); color: var(--white); }
#cta .cta-email { color: rgba(255,255,255,.55); }
#cta .cta-email a { color: rgba(255,255,255,.9); text-decoration: underline; text-underline-offset: 3px; }


/* movement is king: italic words sweep in after their heading, stripes slide, mockup drifts */
.js .trust-card h2 em { display: inline-block; }
.js .section-h2[data-reveal] em, .js .cta-inner[data-reveal] .cta-h2 em { display: block; }
.js .section-h2[data-reveal] em, .js .cta-inner[data-reveal] .cta-h2 em, .js .trust-card h2 em { opacity: 0; transform: translateX(-18px); transition: opacity 700ms ease, transform 900ms var(--spring); transition-delay: 350ms; }
.js .section-h2 em, .js .cta-h2 em { display: block; }
.js .section-h2[data-reveal].in em, .js .cta-inner[data-reveal].in .cta-h2 em, .js .trust-card.in h2 em { opacity: 1; transform: none; }
.home-svc-card .mo-cut rect { animation: moStripe 3.2s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes moStripe { from { transform: translateX(0); } to { transform: translateX(36px); } }
.mock-stage { transform: translateY(var(--drift, 0px)); will-change: transform; }

@media (max-width: 1100px) { .mo-chip.c1 { display: none; } .mo-chip.c2 { right: auto; left: 0; top: -46px; } }
@media (max-width: 640px) {
  .proof-num { font-size: 28px; }
  .mo-chip.c2 { font-size: 12px; padding: 4px 12px 4px 4px; top: -52px; }
  .mo-collage.k2 { top: 40px; }
  .mo-flow, .mo-disc { display: none; }
  #cta .cta-inner { padding: 40px 20px 48px; }
}
@media (prefers-reduced-motion: reduce) { .mo-chip { animation: none !important; opacity: 1; } .home-svc-card .mo-cut, .mock-stage { transform: none !important; } .home-svc-card .mo-cut rect { animation: none !important; } .js .section-h2 em, .js .cta-h2 em, .js .trust-card h2 em { transform: none !important; } }

/* ---------- round 2 (design loop fixes) ---------- */
.hero-h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -3px; }
/* hero cut-paper collage behind the mockup */
.mock-stage .mock-clip { z-index: 1; }
.mock-stage .mark { z-index: 3; }
.mo-collage { position: absolute; pointer-events: none; z-index: 0; will-change: transform; }
.mo-collage.k1 { left: -250px; top: -110px; width: 430px; height: 430px; transform: rotate(var(--rot, 0deg)); }
.mo-collage.k2 { right: -230px; top: -60px; width: 400px; height: 400px; transform: rotate(calc(var(--rot, 0deg) * -1)); }
@media (max-width: 1100px) { .mo-collage.k1 { display: none; } .mo-collage.k2 { right: -120px; top: -90px; width: 220px; height: 220px; } }
/* steps: a flow line that carries the work 01 -> 02 -> 03 */
.mo-flow { height: 72px; margin-top: 24px; }
.step-num { display: inline-block; color: var(--ink); background: var(--step, var(--sky)); padding: 4px 12px; border-radius: var(--r-pill); }
.step-card:nth-child(1) { --step: var(--sky); } .step-card:nth-child(2) { --step: var(--marigold); } .step-card:nth-child(3) { --step: var(--coral); }
.step-card:nth-child(3) .step-num { color: var(--white); }
.step-ui { min-height: 132px; }
/* trust card: body top aligns with the heading */
.trust-card > p { align-self: start; margin-top: 6px; }
/* disc sits beside the heading, not out at the edge */
.mo-disc { right: 0; top: 0; }
@media (prefers-reduced-motion: reduce) { .mo-collage { transform: none !important; } .t-site .t-bar span::after { animation: none !important; } }
.step-card { display: flex; flex-direction: column; }
.step-card .step-ui { margin-top: auto; }
@media (max-width: 640px) { .mo-disc { width: 64px; height: 64px; top: -72px; right: 0; } }
@media (max-width: 480px) { .marks-hero .m1 { right: 8px; top: -30px; width: 52px; height: 52px; } }

/* ---------- round 3: every block moves ---------- */
.proof-item { position: relative; }
.proof-item::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; border-radius: 4px; background: var(--blue); transform: scaleX(0); transform-origin: left; animation: moSweep 8s cubic-bezier(.65,0,.35,1) infinite; }
.proof-item:nth-child(2)::after { animation-delay: 2s; } .proof-item:nth-child(3)::after { animation-delay: 4s; } .proof-item:nth-child(4)::after { animation-delay: 6s; }
@keyframes moSweep { 0% { transform: scaleX(0); transform-origin: left; } 10% { transform: scaleX(1); transform-origin: left; } 18% { transform: scaleX(1); transform-origin: right; } 26%, 100% { transform: scaleX(0); transform-origin: right; } }
.mo-mark { position: relative; display: inline-block; white-space: nowrap; z-index: 0; }
.mo-mark::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: .08em; height: .34em; background: var(--sky-tint-deep); z-index: -1; transform: scaleX(0); transform-origin: left; border-radius: 4px; }
.step-callout.in .mo-mark::after { transition: transform 1100ms cubic-bezier(.65,0,.35,1) 700ms; transform: scaleX(1); }
.why-q::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 9999px; background: var(--blue); margin-right: 10px; vertical-align: 3px; transform: scale(.75); opacity: .4; animation: moAsk 8s cubic-bezier(.34,1.56,.64,1) infinite; }
.why-block:nth-child(2) .why-q::before { animation-delay: 2s; } .why-block:nth-child(3) .why-q::before { animation-delay: 4s; } .why-block:nth-child(4) .why-q::before { animation-delay: 6s; }
@keyframes moAsk { 0%, 100% { transform: scale(.75); opacity: .4; } 8%, 22% { transform: scale(1.15); opacity: 1; } 30% { transform: scale(.75); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .proof-item::after, .why-q::before { animation: none !important; } .why-q::before { transform: none; opacity: 1; } .mo-mark::after { transform: none; transition: none !important; } }
.step-card .step-desc { margin-bottom: 12px; }
.step-card .step-num { margin-bottom: 24px; align-self: flex-start; }
/* round 4 */
.info-item strong::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 9999px; background: var(--blue); margin-right: 8px; vertical-align: 2px; animation: moBeat 2.4s cubic-bezier(.34,1.56,.64,1) infinite; }
.info-item:nth-child(2) strong::before { animation-delay: .8s; } .info-item:nth-child(3) strong::before { animation-delay: 1.6s; }
@media (max-width: 640px) {
  .mo-collage.k2 { right: -110px; top: 40px; width: 200px; height: 200px; }
  .mo-chip.c2 { left: 0; top: -34px; }
}
@media (prefers-reduced-motion: reduce) { .footer-brand .brand-logo, .info-item strong::before { animation: none !important; } }
.why-q { display: flex; align-items: baseline; }
.why-q::before { flex-shrink: 0; }
.t-review .rc-text { white-space: normal; }

/* ---------- service cards: more movement (Graeme, 2026-10-09) ---------- */
/* the mini screens float, staggered, and rise into place as the card scrolls in */
.home-svc-card .svc-tile { translate: 0 var(--py, 0px); animation: moFloat 6s cubic-bezier(.45,0,.55,1) infinite; }
.home-svc-card:nth-child(2) .svc-tile { animation-delay: -1.5s; } .home-svc-card:nth-child(3) .svc-tile { animation-delay: -3s; } .home-svc-card:nth-child(4) .svc-tile { animation-delay: -4.5s; }
@keyframes moFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* arrow chips nudge toward the click */
.home-svc-card .arrow-chip svg { animation: moNudge 2.8s cubic-bezier(.65,0,.35,1) infinite; }
.home-svc-card:nth-child(2) .arrow-chip svg { animation-delay: .35s; } .home-svc-card:nth-child(3) .arrow-chip svg { animation-delay: .7s; } .home-svc-card:nth-child(4) .arrow-chip svg { animation-delay: 1.05s; }
@keyframes moNudge { 0%, 55%, 100% { transform: translateX(0); } 70% { transform: translateX(4px); } 85% { transform: translateX(-1px); } }
/* corner stripes rock on their own (on top of the scroll turn) */
.home-svc-card .mo-cut { animation: moRock 5s cubic-bezier(.45,0,.55,1) infinite; }
.home-svc-card:nth-child(even) .mo-cut { animation-direction: reverse; }
@keyframes moRock { 0%, 100% { rotate: -14deg; } 50% { rotate: 14deg; } }
/* Websites: the mini site scrolls itself, then Book now gets pressed */
.t-site .t-bar { position: relative; z-index: 2; background: var(--white); box-shadow: 0 -24px 0 0 var(--white); }
.t-site .t-nav, .t-site .t-h, .t-site .t-tiles { animation: moSiteScroll 8s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes moSiteScroll { 0%, 25% { transform: translateY(0); } 45%, 70% { transform: translateY(-46px); } 90%, 100% { transform: translateY(0); } }
.t-site .t-nav em { display: inline-block; animation: moPress 8s cubic-bezier(.34,1.56,.64,1) infinite; }
@keyframes moPress { 0%, 76% { transform: scale(1); background: var(--sky-tint); color: var(--blue); } 80% { transform: scale(.88); } 84%, 94% { transform: scale(1); background: var(--blue); color: var(--white); } 100% { background: var(--sky-tint); color: var(--blue); } }
/* Phone: the transcript types itself */
.t-call .tline { clip-path: inset(0 100% 0 0); animation: moType1 6s cubic-bezier(.65,0,.35,1) infinite; }
.t-call .tline.cust { animation-name: moType2; }
@keyframes moType1 { 0%, 4% { clip-path: inset(0 100% 0 0); } 18%, 94% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes moType2 { 0%, 20% { clip-path: inset(0 100% 0 0); } 36%, 94% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.mo-wave { height: 14px; } .mo-wave i { width: 3px; }
/* Reviews: count ticks as the new review lands */
.t-review .rt-sub b { font-weight: 600; color: var(--ink-95); display: inline-block; }
.t-review .rt-sub b.mo-tick { animation: moTick 600ms cubic-bezier(.34,1.56,.64,1); }
@keyframes moTick { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .home-svc-card .svc-tile, .home-svc-card .arrow-chip svg, .home-svc-card .mo-cut, .t-site .t-nav, .t-site .t-h, .t-site .t-tiles, .t-site .t-nav em, .t-call .tline, .t-review .rt-sub b { animation: none !important; }
  .home-svc-card .svc-tile { translate: none; } .t-call .tline { clip-path: none; }
}

/* ---------- hero headline types itself in ---------- */
.js .hero-h1:not(.mo-typed) { opacity: 0; animation: moShow 0s 2.5s forwards; }   /* safety: shows even if JS fails */
@keyframes moShow { to { opacity: 1; } }
.hero-h1 .mo-ch { opacity: 0; display: inline-block; transform: translateY(.12em); transition: opacity 400ms ease, transform 400ms var(--spring); white-space: pre; }
.hero-h1 .mo-ch.on { opacity: 1; transform: none; }
.hero-h1.mo-typed .pill { transform: scale(.85); opacity: 0; transition: transform 500ms var(--spring), opacity 400ms ease; }
.hero-h1.mo-typed .pill.on { transform: none; opacity: 1; }
.hero-h1 .mo-word { display: inline-block; white-space: nowrap; }
.mo-caret { display: inline-block; width: 0; position: relative; }
.mo-caret::after { content: ''; position: absolute; left: 2px; bottom: .08em; width: .06em; height: .9em; border-radius: 4px; background: var(--blue); animation: moCaret 900ms cubic-bezier(.65,0,.35,1) infinite; }
.mo-caret.done { opacity: 0; transition: opacity 600ms ease 1.2s; }
@media (prefers-reduced-motion: reduce) { .js .hero-h1:not(.mo-typed) { opacity: 1; animation: none; } }

/* ---------- demo form (replaces the public email address, 2026-10-09) ---------- */
.demo-form { max-width: 640px; margin: 8px auto 0; text-align: left; display: grid; gap: 12px; }
.df-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.demo-form label { display: grid; gap: 4px; font-size: 12px; line-height: 1.33; letter-spacing: .12px; font-weight: 500; color: rgba(255,255,255,.7); }
.demo-form label span { font-weight: 400; color: rgba(255,255,255,.45); }
.demo-form input, .demo-form select, .demo-form textarea { font: 400 16px/1.5 var(--sans); color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-btn); padding: 8px 12px; width: 100%; transition: border-color 200ms ease, box-shadow 200ms ease; }
.demo-form textarea { resize: vertical; min-height: 80px; }
.demo-form input:focus, .demo-form select:focus, .demo-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,117,222,.35); }
.demo-form .btn-primary { justify-self: center; margin-top: 8px; font-size: 16px; padding: 8px 20px; border: 0; cursor: pointer; }
.demo-form .btn-primary[disabled] { opacity: .6; cursor: default; }
.df-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.df-status { text-align: center; font-size: 14px; min-height: 20px; color: rgba(255,255,255,.8); }
.df-status.ok { color: var(--white); font-weight: 600; }
.demo-form.sent .df-row, .demo-form.sent .df-full, .demo-form.sent .btn-primary { display: none; }
.info-item a { color: var(--blue); text-decoration: none; } .info-item a:hover { text-decoration: underline; }
html { scroll-behavior: smooth; } #demo { scroll-margin-top: 120px; }
@media (max-width: 640px) { .df-row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- sub-pages: shared bits that used to live in each page (2026-10-09) ---------- */
.mobile-sticky { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 400; background: var(--paper); border-top: 1px solid var(--line); padding: 12px 16px; }
.mobile-sticky a { display: block; text-align: center; padding: 12px; border-radius: var(--r-btn); background: var(--blue); color: var(--white); font-size: 16px; font-weight: 500; text-decoration: none; }
@media (max-width: 768px) { .mobile-sticky { display: block; } body { padding-bottom: 72px; } }
.hero-eyebrow, .eyebrow { font-size: 12px; line-height: 1.33; letter-spacing: .12px; font-weight: 500; color: var(--ink-60); margin-bottom: 16px; display: block; }
/* websites page: the client-demo phone (a real client's site, so its own palette is fine — flat, no gradient) */
.phone-wrap { position: relative; display: flex; justify-content: center; }
.phone-mock { width: 260px; height: 520px; background: #0D1021; border: 1px solid var(--line); border-radius: 36px; overflow: hidden; box-shadow: var(--shadow-mock); animation: moFloat 6s cubic-bezier(.45,0,.55,1) infinite; }
.phone-notch { width: 80px; height: 22px; background: #060910; border-radius: 0 0 12px 12px; margin: 0 auto; }
.mock-nav-bar { padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,.06); }
.mock-logo-text { font-size: 10px; font-weight: 700; color: #C9A84C; }
.mock-book-pill { background: #C9A84C; color: #0D1021; font-size: 7px; font-weight: 700; padding: 3px 7px; border-radius: 4px; }
.mock-hero-area { background: #14122b; padding: 20px 14px 16px; }
.mock-eyebrow-text { font-size: 7px; letter-spacing: 2px; text-transform: uppercase; color: #C9A84C; margin-bottom: 8px; }
.mock-headline { font-family: var(--serif); font-size: 18px; font-weight: 400; color: #fff; line-height: 1.1; margin-bottom: 6px; }
.mock-headline em { font-style: italic; color: #C9A84C; display: block; }
.mock-body-text { font-size: 7px; color: rgba(255,255,255,.45); line-height: 1.5; margin-bottom: 14px; }
.mock-cta-btn { background: #C9A84C; color: #0D1021; font-size: 8px; font-weight: 700; padding: 7px 12px; display: inline-block; border-radius: 4px; }
.mock-services-area { background: #0A0F1E; padding: 14px; }
.mock-svc-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.mock-svc-row:last-child { border-bottom: none; }
.mock-svc-name { font-size: 7px; color: rgba(255,255,255,.65); }
.mock-svc-price { font-size: 7px; color: #C9A84C; font-weight: 600; }
.mock-float-badge { position: absolute; bottom: 40px; right: calc(50% - 160px); background: var(--white); color: var(--ink-95); border: 1px solid var(--line); font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 9999px; white-space: nowrap; animation: moBob 5s cubic-bezier(.45,0,.55,1) infinite; }
@media (max-width: 768px) { .phone-mock { width: 200px; height: 400px; } }
@media (prefers-reduced-motion: reduce) { .phone-mock, .mock-float-badge { animation: none !important; } }

/* ---------- service hero scene: depth like Officevibe (Graeme: "we look flat", 2026-10-09) ---------- */
.ov-scene { position: relative; width: 100%; max-width: 540px; margin: 0 auto; padding: 104px 36px 76px 72px; isolation: isolate; }
.ov-panel { position: absolute; inset: 0; z-index: -1; border-radius: 24px; background:
  radial-gradient(120% 80% at 85% 100%, rgba(98,174,240,.45) 0%, rgba(98,174,240,0) 60%),
  linear-gradient(140deg, #02093a 0%, #0a2a8f 55%, #1f6bff 100%);
  box-shadow: 0 30px 60px -20px rgba(2,9,58,.45); }
.ov-notify { position: absolute; top: 28px; left: 28px; display: flex; align-items: center; gap: 0; }
.ov-app { position: relative; width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(2,9,58,.35); }
.ov-app svg { width: 26px; height: 26px; } .ov-g { font: 700 26px/1 var(--sans); color: #4285f4; }
.ov-badge { position: absolute; top: -8px; left: -8px; width: 22px; height: 22px; border-radius: 9999px; background: var(--coral); color: var(--white); font: 600 12px/22px var(--sans); text-align: center; box-shadow: 0 0 0 3px #02093a; }
.ov-msg { margin: 28px 0 0 -10px; background: var(--white); color: var(--ink-95); font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 12px; box-shadow: 0 12px 28px rgba(2,9,58,.35); white-space: nowrap; }
.ov-arrow { position: absolute; left: 14px; top: 96px; width: 64px; height: 150px; overflow: visible; }
.ov-arrow path { stroke-dasharray: 320; stroke-dashoffset: 320; }
.ov-glass { position: relative; padding: 14px; border-radius: 20px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 24px 48px -12px rgba(2,9,58,.5); }
.ov-glass .device, .ov-glass .review-shell { width: 100%; max-width: none; box-shadow: 0 2px 6px rgba(2,9,58,.12); border: 0; }
.ov-glass .phone-wrap { display: block; }
.ov-sent { position: absolute; left: 72px; bottom: 22px; background: var(--white); color: var(--ink-95); font-size: 14px; font-weight: 600; padding: 8px 16px 8px 12px; border-radius: 9999px; box-shadow: 0 12px 28px rgba(2,9,58,.35); }
.ov-sent::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 9999px; background: #2bd47d; margin-right: 8px; vertical-align: 1px; }
.ov-user { position: absolute; right: 26px; bottom: 14px; width: 52px; height: 52px; }
.ov-ava { position: absolute; inset: 0; border-radius: 9999px; background: var(--coral); display: grid; place-items: center; box-shadow: 0 10px 24px rgba(2,9,58,.4); overflow: hidden; }
.ov-ava svg { width: 40px; height: 40px; margin-top: 10px; }
.ov-cursor { position: absolute; width: 22px; height: 22px; left: -14px; top: -14px; z-index: 2; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }

/* the play-through: chip pops, arrow draws, the conversation lands line by line, then "sent" */
.ov-notify, .ov-sent, .ov-user { opacity: 0; transform: translateY(10px) scale(.92); transition: opacity 400ms ease, transform 600ms var(--spring); }
.ov-line { opacity: 0; transform: translateY(10px); transition: opacity 400ms ease, transform 600ms var(--spring); }
.ov-scene.play .ov-notify { opacity: 1; transform: none; transition-delay: 200ms; }
.ov-scene.play .ov-badge { animation: ovBadge 600ms var(--spring) 700ms both; }
@keyframes ovBadge { from { transform: scale(0); } to { transform: scale(1); } }
.ov-scene.play .ov-arrow path { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms cubic-bezier(.65,0,.35,1) 700ms; }
.ov-scene:not(.play) .ov-arrow path { transition: stroke-dashoffset 300ms ease; }
.ov-scene.play .ov-line { opacity: 1; transform: none; transition-delay: calc(1500ms + var(--k) * 550ms); }
.ov-scene.play .ov-sent { opacity: 1; transform: none; transition-delay: calc(1900ms + var(--n) * 550ms); }
.ov-scene.play .ov-user { opacity: 1; transform: none; transition-delay: calc(1500ms + var(--n) * 550ms); }
.ov-scene.play .ov-cursor { animation: ovClick 1.6s cubic-bezier(.65,0,.35,1) both; animation-delay: calc(1600ms + var(--n) * 550ms); }
@keyframes ovClick { 0% { transform: translate(0, 0); } 60% { transform: translate(calc(-1 * var(--cx, 180px)), -6px); } 70% { transform: translate(calc(-1 * var(--cx, 180px)), -6px) scale(.8); } 80%, 100% { transform: translate(calc(-1 * var(--cx, 180px)), -6px) scale(1); } }
.ov-scene { --n: 6; }
.ov-glass .review-shell, .ov-glass .device { animation: none; }

@media (max-width: 900px) { .ov-scene { max-width: 460px; margin-top: 24px; } }
@media (max-width: 640px) {
  .ov-scene { padding: 92px 16px 72px 16px; }
  .ov-arrow { display: none; }
  .ov-notify { top: 20px; left: 16px; } .ov-app { width: 48px; height: 48px; }
  .ov-msg { font-size: 12px; margin-top: 22px; }
  .ov-sent { left: 16px; bottom: 18px; font-size: 12px; } .ov-user { right: 16px; bottom: 12px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-notify, .ov-sent, .ov-user, .ov-line { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ov-arrow path { stroke-dashoffset: 0 !important; transition: none !important; } .ov-badge, .ov-cursor { animation: none !important; }
}
/* sub-page hero: readable paragraph + stats aligned left with the copy */
.hero-grid .hero-sub { line-height: 1.5; font-size: 18px; }
.hero-grid .hero-proof { justify-content: flex-start; }
.hero-h1 em { white-space: nowrap; }