/* ------------------------------------------------------------------
   Service-page hero scenes: same idea as the homepage scene
   (three beats on one clock, phone frame, beat labels), sized for the
   dark page hero. Everything inside scales with the scene's width
   (em units from a container-query font size), so one set of numbers
   works from phone to desktop.
   Shared shell: .sc-*  ·  Web design scene: .ws-*
------------------------------------------------------------------ */

.page-hero.has-scene .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.page-hero.has-scene .display { font-size: clamp(2.75rem, 5.6vw, 4.75rem); }

/* ---------- shell ---------- */
.sc-scene { container-type: inline-size; position: relative; width: 100%; max-width: 32rem; margin-left: auto; aspect-ratio: 1 / 1.08; user-select: none; }
.sc-orbit { --d: 8s; position: absolute; inset: 0; font-size: clamp(8px, 3.05cqi, 16px); perspective: 1100px; isolation: isolate; }
.sc-halo { position: absolute; inset: 8% 6% 6% 0; border-radius: 48% 52% 45% 55%; background: radial-gradient(circle at 42% 44%, rgba(37, 99, 235, 0.42), rgba(236, 72, 153, 0.16) 46%, transparent 70%); filter: blur(18px); animation: sc-halo var(--d) ease-in-out infinite; }

.sc-phone { position: absolute; left: 6%; top: 1%; width: 52%; aspect-ratio: 9 / 17.8; padding: 0.5em; border-radius: 2.2em; background: #020617; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 40px 70px -30px rgba(0, 0, 0, 0.85); transform: rotateY(-7deg) rotateX(2deg) rotateZ(-2deg); animation: sc-phone var(--d) var(--ease-out-expo) infinite; }
.sc-phone::before { content: ""; position: absolute; z-index: 9; top: 0.62em; left: 50%; width: 30%; height: 1em; border-radius: 0 0 0.65em 0.65em; background: #020617; transform: translateX(-50%); }
.sc-screen { position: relative; height: 100%; overflow: hidden; border-radius: 1.75em; background: #fff; }
.sc-status { position: absolute; z-index: 8; inset: 0.5em 0.95em auto; display: flex; justify-content: space-between; color: #0f172a; font-size: 0.55em; font-weight: 800; }
.sc-status i { width: 2.6em; height: 0.9em; border-radius: 0.2em; background: linear-gradient(90deg, #0f172a 0 70%, transparent 70%); outline: 1px solid #0f172a; outline-offset: 1px; transform: scale(0.7); transform-origin: right center; }
.sc-view { position: absolute; inset: 3.35em 0 0; overflow: hidden; }

.sc-beats { position: absolute; z-index: 20; right: 0; top: 3%; display: grid; gap: 0.55em; }
.sc-beat { display: flex; align-items: center; gap: 0.45em; color: #94a3b8; font-size: max(0.72em, 10px); font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.4; transform: translateX(0.5em); }
.sc-beat::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; }
.sc-beat:nth-child(1) { animation: sc-beat-1 var(--d) linear infinite; }
.sc-beat:nth-child(2) { animation: sc-beat-2 var(--d) linear infinite; }
.sc-beat:nth-child(3) { animation: sc-beat-3 var(--d) linear infinite; }

.sc-note { position: absolute; left: 6%; bottom: 0; color: #94a3b8; font-size: max(0.62em, 10px); font-weight: 600; letter-spacing: 0.04em; }

.sc-scene.is-paused *, .sc-scene.is-paused *::before, .sc-scene.is-paused *::after { animation-play-state: paused !important; }

@keyframes sc-halo { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes sc-phone { 0%, 100% { transform: rotateY(-7deg) rotateX(2deg) rotateZ(-2deg) translateY(0); } 40% { transform: rotateY(-4deg) rotateX(1deg) rotateZ(-1deg) translateY(-0.35em); } 75% { transform: rotateY(-8deg) rotateX(2deg) rotateZ(-2deg) translateY(-0.2em); } }
@keyframes sc-beat-1 { 0%, 3%, 99%, 100% { color: #60a5fa; opacity: 1; transform: none; } 31%, 97% { color: #94a3b8; opacity: 0.4; transform: translateX(0.5em); } }
@keyframes sc-beat-2 { 0%, 33%, 63%, 100% { color: #94a3b8; opacity: 0.4; transform: translateX(0.5em); } 37%, 60% { color: #f472b6; opacity: 1; transform: none; } }
@keyframes sc-beat-3 { 0%, 64%, 100% { color: #94a3b8; opacity: 0.4; transform: translateX(0.5em); } 68%, 95% { color: #facc15; opacity: 1; transform: none; } }

/* ---------- web design: Mockup -> Approved -> Live ---------- */

/* browser address bar: preview address, then the client's own domain */
.ws-bar { position: absolute; z-index: 7; top: 1.75em; left: 0.7em; right: 0.7em; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.4em; height: 1.45em; padding: 0 0.6em; border-radius: 1em; background: #f1f5f9; color: #475569; font-size: 1em; }
.ws-lock { width: 0.75em; height: 0.75em; color: #94a3b8; animation: ws-lock var(--d) linear infinite; }
.ws-url { grid-area: 1 / 2; overflow: hidden; font-size: 0.56em; font-weight: 700; white-space: nowrap; }
.ws-url-preview { animation: ws-url-preview var(--d) linear infinite; }
.ws-url-live { color: #0f172a; opacity: 0; animation: ws-url-live var(--d) var(--ease-out-expo) infinite; }

/* the dated site */
.ws-old { background: #f4f1e8; font-family: "Times New Roman", Times, serif; animation: ws-old var(--d) linear infinite; }
.old-head { padding: 0.75em 0.8em 0.6em; background: #1d3fbb; color: #fff; }
.old-head b { display: block; font-size: 0.95em; letter-spacing: 0.04em; }
.old-head i { font-size: 0.55em; color: #dbe2ff; }
.old-nav { padding: 0.5em 0.8em; border-bottom: 2px groove #ccc; color: #0000ee; font-size: 0.55em; text-decoration: underline; }
.old-body { padding: 0.75em 0.8em; }
.old-body h4 { margin: 0 0 0.4em; color: #800000; font-size: 0.85em; }
.old-line { height: 0.36em; margin-top: 0.42em; background: #b9b5ab; }
.old-line:nth-child(3) { width: 92%; }
.old-line:nth-child(4) { width: 78%; }
.old-line:nth-child(5) { width: 88%; }
.old-img { display: grid; place-items: center; height: 6.2em; margin-top: 0.8em; border: 1px dashed #999; background: #e9e5da; color: #b00; font-size: 0.55em; }
.old-foot { margin-top: 0.8em; color: #8a8478; font-size: 0.45em; font-style: italic; text-align: center; }

/* the new design, wiping in over the old one */
.ws-new { z-index: 2; background: #fff; clip-path: inset(0 0 100% 0); animation: ws-new var(--d) var(--ease-out-expo) infinite; }
.new-top { display: flex; align-items: center; justify-content: space-between; padding: 0.65em 0.8em; background: #0f172a; color: #fff; font-size: 0.62em; font-weight: 900; letter-spacing: -0.02em; }
.new-top span { display: flex; align-items: center; gap: 0.35em; }
.new-top span::before { content: ""; width: 0.75em; height: 0.75em; border-radius: 0.2em; background: #facc15; }
.new-top i { width: 1em; height: 0.55em; background: linear-gradient(#fff 0 1px, transparent 1px 45%, #fff 45% calc(45% + 1px), transparent 0 90%, #fff 90%); }
.new-hero { position: relative; overflow: hidden; padding: 1.1em 0.9em 1.2em; background: #0f172a; color: #fff; }
.new-hero::after { content: ""; position: absolute; right: -2.4em; bottom: -2.8em; width: 8.5em; height: 8.5em; border-radius: 50%; background: #2563eb; opacity: 0.6; }
.new-proof { position: relative; z-index: 1; color: #fde68a; font-size: 0.46em; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.new-title { position: relative; z-index: 1; max-width: 7ch; margin-top: 0.4em; font-size: 1.45em; font-weight: 900; line-height: 0.98; letter-spacing: -0.04em; }
.new-hero p { position: relative; z-index: 1; max-width: 15em; margin-top: 0.55em; color: #cbd5e1; font-size: 0.54em; line-height: 1.5; }
.new-cta { position: relative; z-index: 1; display: inline-block; margin-top: 0.8em; padding: 0.6em 0.8em; border-radius: 0.55em; background: #facc15; color: #0f172a; font-size: 0.55em; font-weight: 900; }
.new-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3em; padding: 0.6em; background: #f8fafc; }
.new-chips span { padding: 0.5em 0.2em; border-radius: 0.4em; background: #fff; color: #334155; font-size: 0.42em; font-weight: 750; text-align: center; }
.new-row { display: flex; align-items: center; gap: 0.55em; margin: 0 0.8em; padding: 0.65em 0; border-bottom: 1px solid #e2e8f0; color: #64748b; font-size: 0.48em; }
.new-row::before { content: ""; flex: 0 0 auto; width: 2.2em; height: 2.2em; border-radius: 0.6em; background: #dbeafe; }
.new-row b { display: block; color: #0f172a; font-size: 1.12em; }

/* approval card, tapped by the thumb */
.ws-approve { position: absolute; z-index: 6; left: 0.6em; right: 0.6em; bottom: 0.6em; padding: 0.85em; border-radius: 1em; background: #fff; box-shadow: 0 -10px 40px -16px rgba(15, 23, 42, 0.5), 0 0 0 1px #e2e8f0; transform: translateY(130%); animation: ws-approve var(--d) var(--ease-out-expo) infinite; }
.ws-approve b { display: block; color: #0f172a; font-size: 0.78em; letter-spacing: -0.02em; }
.ws-approve small { display: block; margin-top: 0.15em; color: #64748b; font-size: 0.52em; }
.ws-btn { position: relative; display: grid; height: 2.2em; margin-top: 0.7em; border-radius: 0.6em; background: #2563eb; color: #fff; font-size: 1em; animation: ws-btn var(--d) var(--ease-out-expo) infinite; }
.ws-btn span { grid-area: 1 / 1; place-self: center; font-size: 0.6em; font-weight: 850; }
.ws-btn .btn-a { animation: ws-btn-a var(--d) linear infinite; }
.ws-btn .btn-b { opacity: 0; animation: ws-btn-b var(--d) linear infinite; }
.sc-thumb { position: absolute; z-index: 3; right: 22%; top: 30%; width: 1.9em; height: 1.9em; border-radius: 50%; background: rgba(255, 255, 255, 0.95); box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.8); opacity: 0; transform: translate(2.5em, 3em) scale(0.8); animation: sc-thumb var(--d) var(--ease-out-expo) infinite; }
.sc-thumb::before { content: ""; position: absolute; inset: 0.5em; border: 2px solid #2563eb; border-radius: 50%; }

/* "free mockup" sticker on the phone edge */
.ws-tag { position: absolute; z-index: 15; left: 0; top: 60%; padding: 0.55em 0.8em; border-radius: 0.6em; background: #facc15; color: #0f172a; font-size: 0.7em; font-weight: 900; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.7); opacity: 0; transform: rotate(-7deg) scale(0.6); animation: ws-tag var(--d) var(--ease-out-expo) infinite; }
.ws-tag small { display: block; font-size: 0.78em; font-weight: 700; color: #422006; }

/* ownership card: it's live, and it's theirs */
.ws-own { position: absolute; z-index: 12; right: 0; bottom: 6%; width: 47%; padding: 0.95em; border-radius: 1em; background: #fff; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.85); opacity: 0; transform: translateY(1.5em) rotate(4deg); animation: ws-own var(--d) var(--ease-out-expo) infinite; }
.ws-own-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.6em; border-bottom: 1px solid #e2e8f0; }
.ws-own-head b { color: #0f172a; font-size: 0.8em; letter-spacing: -0.02em; }
.ws-live { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.25em 0.55em; border-radius: 1em; background: #dcfce7; color: #166534; font-size: 0.5em; font-weight: 850; letter-spacing: 0.05em; text-transform: uppercase; }
.ws-live::before { content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; background: #16a34a; }
.ws-own-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.5em; padding: 0.55em 0 0; color: #334155; font-size: 0.6em; font-weight: 700; }
.ws-own-row small { display: block; color: #64748b; font-size: 0.85em; font-weight: 600; }
.ws-tick { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: #2563eb; color: #fff; transform: scale(0); }
.ws-tick svg { width: 0.95em; height: 0.95em; }
.ws-own-row:nth-of-type(2) .ws-tick { animation: ws-tick-1 var(--d) var(--ease-out-expo) infinite; }
.ws-own-row:nth-of-type(3) .ws-tick { animation: ws-tick-2 var(--d) var(--ease-out-expo) infinite; }
.ws-own-row:nth-of-type(4) .ws-tick { animation: ws-tick-3 var(--d) var(--ease-out-expo) infinite; }

/* one 8s clock: 0-32 mockup, 34-62 approved, 64-96 live, then reset */
@keyframes ws-old { 0%, 12% { opacity: 1; filter: none; } 22%, 96% { opacity: 0; filter: blur(2px); } 99%, 100% { opacity: 1; filter: none; } }
@keyframes ws-new { 0%, 10% { clip-path: inset(0 0 100% 0); } 22%, 96% { clip-path: inset(0 0 0 0); } 99%, 100% { clip-path: inset(0 0 100% 0); } }
@keyframes ws-tag { 0%, 18% { opacity: 0; transform: rotate(-7deg) scale(0.6); } 23%, 56% { opacity: 1; transform: rotate(-7deg) scale(1); } 61%, 100% { opacity: 0; transform: rotate(-7deg) scale(0.9) translateY(-0.5em); } }
@keyframes ws-approve { 0%, 33% { transform: translateY(130%); } 39%, 58% { transform: translateY(0); } 64%, 100% { transform: translateY(130%); } }
@keyframes sc-thumb { 0%, 42% { opacity: 0; transform: translate(2.5em, 3em) scale(0.8); } 46% { opacity: 1; transform: translate(0, 0) scale(1); } 48% { transform: translate(0, 0) scale(0.82); } 50% { opacity: 1; transform: translate(0, 0) scale(1); } 54%, 100% { opacity: 0; transform: translate(0.5em, 1em) scale(1.15); } }
@keyframes ws-btn { 0%, 47% { background: #2563eb; color: #fff; transform: scale(1); } 48% { transform: scale(0.95); } 50%, 100% { background: #facc15; color: #0f172a; transform: scale(1); } }
@keyframes ws-btn-a { 0%, 48% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ws-btn-b { 0%, 48% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes ws-url-preview { 0%, 63% { opacity: 1; transform: none; } 66%, 96% { opacity: 0; transform: translateY(-0.6em); } 99%, 100% { opacity: 1; transform: none; } }
@keyframes ws-url-live { 0%, 64% { opacity: 0; transform: translateY(0.6em); } 68%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes ws-lock { 0%, 64%, 99%, 100% { color: #94a3b8; } 67%, 96% { color: #16a34a; } }
@keyframes ws-own { 0%, 64% { opacity: 0; transform: translateY(1.5em) rotate(4deg); } 70%, 94% { opacity: 1; transform: translateY(0) rotate(2deg); } 98%, 100% { opacity: 0; transform: translateY(0.5em) rotate(2deg); } }
@keyframes ws-tick-1 { 0%, 72% { transform: scale(0); } 75%, 96% { transform: scale(1); } 99%, 100% { transform: scale(0); } }
@keyframes ws-tick-2 { 0%, 76% { transform: scale(0); } 79%, 96% { transform: scale(1); } 99%, 100% { transform: scale(0); } }
@keyframes ws-tick-3 { 0%, 80% { transform: scale(0); } 83%, 96% { transform: scale(1); } 99%, 100% { transform: scale(0); } }

/* ---------- local SEO: Searched -> Found -> Called ---------- */
.ls-view { position: absolute; inset: 2.1em 0 0; overflow: hidden; }

/* search */
.ls-search { padding: 1.2em 0.85em; background: linear-gradient(180deg, #eff6ff, #f8fafc 35%); animation: ls-search var(--d) linear infinite; }
.ls-mark { display: flex; align-items: center; gap: 0.45em; margin-bottom: 0.8em; color: #0f172a; font-size: 0.72em; font-weight: 850; }
.ls-mark svg { width: 1.1em; height: 1.1em; color: #2563eb; }
.ls-box { display: flex; align-items: center; gap: 0.45em; min-height: 2.3em; padding: 0.6em 0.7em; border: 1px solid #cbd5e1; border-radius: 0.75em; background: #fff; color: #334155; box-shadow: 0 10px 28px -22px rgba(15, 23, 42, 0.6); }
.ls-box svg { flex: 0 0 auto; width: 0.85em; height: 0.85em; color: #2563eb; }
.ls-query { overflow: hidden; width: 0; font-size: 0.62em; font-weight: 650; white-space: nowrap; animation: ls-query var(--d) steps(19, end) infinite; }
.ls-caret { width: 1px; height: 0.8em; background: #2563eb; animation: ls-caret 0.8s step-end infinite; }
.ls-skel { margin-top: 0.6em; padding: 0.75em; border-radius: 0.8em; background: #fff; box-shadow: 0 15px 36px -28px rgba(15, 23, 42, 0.75); opacity: 0; transform: translateY(0.8em); animation: ls-skel var(--d) var(--ease-out-expo) infinite; }
.ls-skel:nth-of-type(4) { animation-delay: 0.12s; }
.ls-skel:nth-of-type(5) { animation-delay: 0.24s; }
.ls-skel i { display: block; height: 0.42em; border-radius: 1em; background: #e2e8f0; }
.ls-skel i:first-child { width: 45%; height: 0.55em; background: #bfdbfe; }
.ls-skel i + i { margin-top: 0.4em; }
.ls-skel i:last-child { width: 80%; }

/* map + business profile */
.ls-map { opacity: 0; background: linear-gradient(28deg, transparent 43%, #fff 44% 48%, transparent 49%), linear-gradient(102deg, transparent 36%, #fff 37% 42%, transparent 43%), linear-gradient(170deg, transparent 60%, #fff 61% 64%, transparent 65%), #e3ecf5; animation: ls-map var(--d) linear infinite; }
.ls-map::before { content: ""; position: absolute; left: 8%; top: 54%; width: 34%; height: 18%; border-radius: 40%; background: #cfe8d4; }
.ls-map-head { position: absolute; z-index: 3; inset: 0.7em 0.7em auto; padding: 0.55em 0.7em; border-radius: 0.7em; background: #fff; color: #334155; font-size: 0.56em; font-weight: 750; box-shadow: 0 10px 24px -18px rgba(15, 23, 42, 0.7); }
.ls-pin { position: absolute; width: 1em; height: 1em; border: 0.22em solid #fff; border-radius: 50% 50% 50% 0; background: #94a3b8; box-shadow: 0 6px 14px -6px #0f172a; transform: rotate(-45deg); }
.ls-pin.p1 { left: 18%; top: 30%; } .ls-pin.p2 { left: 72%; top: 24%; } .ls-pin.p3 { left: 62%; top: 52%; }
.ls-you { position: absolute; z-index: 2; left: 40%; top: 34%; display: grid; justify-items: center; gap: 0.25em; opacity: 0; transform: translateY(-3em); animation: ls-you var(--d) var(--ease-out-expo) infinite; }
.ls-you .ls-pin { position: static; width: 2.2em; height: 2.2em; border-width: 0.35em; background: #ec4899; box-shadow: 0 0 0 0.5em rgba(236, 72, 153, 0.22), 0 8px 18px -6px #0f172a; }
.ls-you span:last-child { margin-top: 0.3em; padding: 0.3em 0.6em; border-radius: 0.45em; background: #0f172a; color: #fff; font-size: 0.6em; font-weight: 800; white-space: nowrap; }
.ls-profile { position: absolute; z-index: 4; left: 0.55em; right: 0.55em; bottom: 0.55em; padding: 0.85em; border-radius: 1em; background: #fff; box-shadow: 0 -12px 40px -18px rgba(15, 23, 42, 0.55); transform: translateY(130%); animation: ls-profile var(--d) var(--ease-out-expo) infinite; }
.ls-profile b { display: block; color: #0f172a; font-size: 0.82em; letter-spacing: -0.02em; }
.ls-profile small { display: block; margin-top: 0.15em; color: #64748b; font-size: 0.5em; font-weight: 600; }
.ls-stars { margin-top: 0.35em; color: #b45309; font-size: 0.55em; font-weight: 800; letter-spacing: 0.06em; }
.ls-stars em { color: #64748b; font-style: normal; font-weight: 600; letter-spacing: 0; }
.ls-open { color: #15803d !important; }
.ls-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35em; margin-top: 0.7em; }
.ls-actions > span { position: relative; display: grid; place-items: center; height: 2em; border-radius: 0.55em; background: #eff6ff; color: #1d4ed8; font-size: 0.5em; font-weight: 850; }
.ls-actions .ls-call { background: #2563eb; color: #fff; animation: ls-call var(--d) var(--ease-out-expo) infinite; }
.ls-actions .sc-thumb { right: 18%; top: 18%; width: 3.4em; height: 3.4em; }
.ls-actions .sc-thumb::before { inset: 0.9em; }
.ls-actions .sc-thumb { animation-name: ls-thumb; }

/* the call */
.ls-calling { z-index: 5; inset: 0; display: grid; align-content: center; justify-items: center; gap: 0.3em; background: radial-gradient(circle at 50% 38%, #1e3a8a, #0f172a 65%); color: #fff; text-align: center; opacity: 0; transform: scale(1.04); animation: ls-calling var(--d) var(--ease-out-expo) infinite; }
.ls-avatar { position: relative; display: grid; place-items: center; width: 4.2em; height: 4.2em; margin-bottom: 0.6em; border-radius: 50%; background: #ec4899; font-size: 1em; font-weight: 900; }
.ls-avatar::before, .ls-avatar::after { content: ""; position: absolute; inset: 0; border: 2px solid rgba(244, 114, 182, 0.6); border-radius: 50%; animation: ls-ring 1.6s ease-out infinite; }
.ls-avatar::after { animation-delay: 0.8s; }
.ls-calling small { color: #93c5fd; font-size: 0.55em; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.ls-calling b { font-size: 1em; letter-spacing: -0.02em; }
.ls-calling > span:last-child { margin-top: 2.2em; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: #dc2626; }
.ls-calling > span:last-child svg { width: 1.2em; height: 1.2em; }

/* side cards: what gets set up, then the enquiry arriving */
.ls-setup, .ls-notify { position: absolute; z-index: 12; right: 0; width: 46%; padding: 0.95em; border-radius: 1em; background: #fff; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.85); opacity: 0; }
.ls-setup { top: 26%; transform: translateY(1em) rotate(3deg); animation: ls-setup var(--d) var(--ease-out-expo) infinite; }
.ls-setup b { display: block; padding-bottom: 0.55em; border-bottom: 1px solid #e2e8f0; color: #0f172a; font-size: 0.78em; letter-spacing: -0.02em; }
.ls-setup span { display: flex; align-items: center; gap: 0.5em; padding-top: 0.55em; color: #334155; font-size: 0.6em; font-weight: 700; }
.ls-setup span::before { content: ""; width: 0.45em; height: 0.8em; margin: 0 0.25em 0 0.15em; border: solid #2563eb; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-0.15em); }
.ls-notify { bottom: 8%; display: grid; grid-template-columns: auto 1fr; gap: 0.7em; align-items: center; transform: translateY(1.5em) rotate(-3deg); animation: ls-notify var(--d) var(--ease-out-expo) infinite; }
.ls-notify i { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 0.7em; background: #dcfce7; color: #15803d; }
.ls-notify i svg { width: 1.2em; height: 1.2em; }
.ls-notify b { display: block; color: #0f172a; font-size: 0.75em; letter-spacing: -0.02em; }
.ls-notify small { display: block; margin-top: 0.15em; color: #64748b; font-size: 0.55em; font-weight: 600; line-height: 1.4; }

@keyframes ls-search { 0%, 30% { opacity: 1; transform: none; filter: none; } 35%, 97% { opacity: 0; transform: scale(1.03); filter: blur(2px); } 99%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes ls-query { 0%, 4% { width: 0; } 16%, 97% { width: 9.6em; } 99%, 100% { width: 0; } }
@keyframes ls-caret { 50% { opacity: 0; } }
@keyframes ls-skel { 0%, 17% { opacity: 0; transform: translateY(0.8em); } 21%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: none; } }
@keyframes ls-map { 0%, 30% { opacity: 0; } 35%, 63% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes ls-you { 0%, 37% { opacity: 0; transform: translateY(-3em); } 41% { opacity: 1; transform: translateY(0.2em); } 43%, 63% { opacity: 1; transform: none; } 67%, 100% { opacity: 0; transform: none; } }
@keyframes ls-profile { 0%, 43% { transform: translateY(130%); } 48%, 63% { transform: translateY(0); } 67%, 100% { transform: translateY(130%); } }
@keyframes ls-thumb { 0%, 52% { opacity: 0; transform: translate(2.5em, 3em) scale(0.8); } 56% { opacity: 1; transform: none; } 58% { transform: scale(0.82); } 60% { opacity: 1; transform: none; } 63%, 100% { opacity: 0; transform: translate(0.5em, 1em) scale(1.15); } }
@keyframes ls-call { 0%, 57%, 61%, 100% { transform: scale(1); filter: none; } 58% { transform: scale(0.92); filter: brightness(0.9); } }
@keyframes ls-calling { 0%, 62% { opacity: 0; transform: scale(1.04); } 66%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes ls-ring { from { transform: scale(1); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
@keyframes ls-setup { 0%, 38% { opacity: 0; transform: translateY(1em) rotate(3deg); } 44%, 61% { opacity: 1; transform: rotate(2deg); } 65%, 100% { opacity: 0; transform: translateY(-0.5em) rotate(2deg); } }
@keyframes ls-notify { 0%, 69% { opacity: 0; transform: translateY(1.5em) rotate(-3deg); } 74%, 94% { opacity: 1; transform: rotate(-2deg); } 98%, 100% { opacity: 0; transform: translateY(0.5em) rotate(-2deg); } }

/* ---------- website care: Checked -> Changed -> Reported ---------- */
.wc-view { position: absolute; inset: 2.1em 0 0; overflow: hidden; padding: 1em 0.85em; }
.wc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5em; padding-bottom: 0.7em; border-bottom: 1px solid #e2e8f0; }
.wc-head b { color: #0f172a; font-size: 0.85em; letter-spacing: -0.02em; }
.wc-head small { color: #64748b; font-size: 0.5em; font-weight: 700; }

/* checks */
.wc-checks { background: linear-gradient(180deg, #f0fdf4, #fff 30%); animation: wc-checks var(--d) linear infinite; }
.wc-site { margin: 0.8em 0 0.3em; color: #475569; font-size: 0.55em; font-weight: 700; }
.wc-check { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.5em; margin-top: 0.5em; padding: 0.7em 0.75em; border-radius: 0.75em; background: #fff; box-shadow: 0 12px 30px -24px rgba(15, 23, 42, 0.7), 0 0 0 1px #eef2f7; }
.wc-check span { color: #0f172a; font-size: 0.62em; font-weight: 800; }
.wc-check small { display: block; color: #64748b; font-size: 0.82em; font-weight: 600; }
.wc-tick { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: #16a34a; color: #fff; transform: scale(0); }
.wc-tick svg { width: 0.9em; height: 0.9em; }
.wc-check:nth-of-type(3) .wc-tick { animation: wc-tick-1 var(--d) var(--ease-out-expo) infinite; }
.wc-check:nth-of-type(4) .wc-tick { animation: wc-tick-2 var(--d) var(--ease-out-expo) infinite; }
.wc-check:nth-of-type(5) .wc-tick { animation: wc-tick-3 var(--d) var(--ease-out-expo) infinite; }
.wc-check:nth-of-type(6) .wc-tick { animation: wc-tick-4 var(--d) var(--ease-out-expo) infinite; }

/* change request by email */
.wc-mail { z-index: 2; background: #f8fafc; opacity: 0; animation: wc-mail var(--d) linear infinite; }
.wc-msg { max-width: 82%; margin-top: 0.7em; padding: 0.65em 0.75em; border-radius: 0.85em; font-size: 0.6em; font-weight: 650; line-height: 1.4; opacity: 0; transform: translateY(0.8em); }
.wc-msg small { display: block; margin-bottom: 0.2em; font-size: 0.82em; font-weight: 800; opacity: 0.7; }
.wc-msg.from-you { margin-top: 1.4em; border-bottom-left-radius: 0.25em; background: #fff; color: #0f172a; box-shadow: 0 0 0 1px #e2e8f0; animation: wc-msg-1 var(--d) var(--ease-out-expo) infinite; }
.wc-msg.from-ben { margin-left: auto; border-bottom-right-radius: 0.25em; background: #2563eb; color: #fff; animation: wc-msg-2 var(--d) var(--ease-out-expo) infinite; }
.wc-typing { display: flex; gap: 0.25em; width: max-content; margin: 0.7em 0 0 auto; padding: 0.6em 0.7em; border-radius: 0.85em; background: #dbeafe; opacity: 0; animation: wc-typing var(--d) linear infinite; }
.wc-typing i { width: 0.4em; height: 0.4em; border-radius: 50%; background: #2563eb; animation: wc-dot 0.9s ease-in-out infinite; }
.wc-typing i:nth-child(2) { animation-delay: 0.15s; }
.wc-typing i:nth-child(3) { animation-delay: 0.3s; }
.wc-change { margin-top: 0.9em; padding: 0.75em; border-radius: 0.85em; background: #fff; box-shadow: 0 0 0 1px #e2e8f0; opacity: 0; transform: translateY(0.8em); animation: wc-msg-3 var(--d) var(--ease-out-expo) infinite; }
.wc-change small { display: block; color: #64748b; font-size: 0.5em; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.wc-price { display: flex; justify-content: space-between; margin-top: 0.45em; color: #0f172a; font-size: 0.62em; font-weight: 800; }
.wc-price s { color: #94a3b8; font-weight: 600; }
.wc-price b { color: #15803d; }

/* monthly report */
.wc-report { z-index: 3; background: #fff; opacity: 0; animation: wc-report var(--d) linear infinite; }
.wc-chart-label { margin-top: 0.8em; color: #475569; font-size: 0.52em; font-weight: 700; }
.wc-chart { display: flex; align-items: flex-end; gap: 0.35em; height: 5.5em; margin-top: 0.45em; padding: 0.55em; border-radius: 0.75em; background: #f1f5f9; }
.wc-chart i { flex: 1; height: var(--h); border-radius: 0.3em 0.3em 0.1em 0.1em; background: #93c5fd; transform: scaleY(0); transform-origin: bottom; animation: wc-bar var(--d) var(--ease-out-expo) infinite; }
.wc-chart i:last-child { background: #2563eb; }
.wc-sugg-label { margin-top: 0.85em; color: #0f172a; font-size: 0.62em; font-weight: 850; }
.wc-sugg { display: flex; justify-content: space-between; gap: 0.5em; margin-top: 0.45em; padding: 0.6em 0.7em; border-radius: 0.65em; background: #fff; box-shadow: 0 0 0 1px #e2e8f0; color: #334155; font-size: 0.55em; font-weight: 700; opacity: 0; transform: translateX(1em); }
.wc-sugg b { color: #0f172a; white-space: nowrap; }
.wc-sugg:nth-of-type(1) { animation: wc-sugg-1 var(--d) var(--ease-out-expo) infinite; }
.wc-sugg:nth-of-type(2) { animation: wc-sugg-2 var(--d) var(--ease-out-expo) infinite; }
.wc-sugg:nth-of-type(3) { animation: wc-sugg-3 var(--d) var(--ease-out-expo) infinite; }

/* side cards */
.wc-card { position: absolute; z-index: 12; right: 0; width: 46%; padding: 0.95em; border-radius: 1em; background: #fff; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.85); opacity: 0; }
.wc-card b { display: block; color: #0f172a; font-size: 0.78em; letter-spacing: -0.02em; }
.wc-card small { display: block; margin-top: 0.25em; color: #64748b; font-size: 0.58em; font-weight: 600; line-height: 1.45; }
.wc-card .wc-pill { display: inline-block; margin-bottom: 0.5em; padding: 0.25em 0.6em; border-radius: 1em; font-size: 0.5em; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; }
.wc-included { top: 30%; transform: translateY(1em) rotate(3deg); animation: wc-card-2 var(--d) var(--ease-out-expo) infinite; }
.wc-included .wc-pill { background: #dbeafe; color: #1d4ed8; }
.wc-choice { bottom: 8%; transform: translateY(1.5em) rotate(-3deg); animation: wc-card-3 var(--d) var(--ease-out-expo) infinite; }
.wc-choice .wc-pill { background: #fef9c3; color: #854d0e; }

@keyframes wc-checks { 0%, 30% { opacity: 1; transform: none; filter: none; } 35%, 97% { opacity: 0; transform: scale(1.03); filter: blur(2px); } 99%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes wc-tick-1 { 0%, 5% { transform: scale(0); } 8%, 97% { transform: scale(1); } 99%, 100% { transform: scale(0); } }
@keyframes wc-tick-2 { 0%, 11% { transform: scale(0); } 14%, 97% { transform: scale(1); } 99%, 100% { transform: scale(0); } }
@keyframes wc-tick-3 { 0%, 17% { transform: scale(0); } 20%, 97% { transform: scale(1); } 99%, 100% { transform: scale(0); } }
@keyframes wc-tick-4 { 0%, 23% { transform: scale(0); } 26%, 97% { transform: scale(1); } 99%, 100% { transform: scale(0); } }
@keyframes wc-mail { 0%, 31% { opacity: 0; } 35%, 63% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes wc-msg-1 { 0%, 35% { opacity: 0; transform: translateY(0.8em); } 39%, 63% { opacity: 1; transform: none; } 67%, 100% { opacity: 0; transform: none; } }
@keyframes wc-typing { 0%, 41% { opacity: 0; } 43%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes wc-dot { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-0.2em); opacity: 1; } }
@keyframes wc-msg-2 { 0%, 49% { opacity: 0; transform: translateY(0.8em); } 52%, 63% { opacity: 1; transform: none; } 67%, 100% { opacity: 0; transform: none; } }
@keyframes wc-msg-3 { 0%, 53% { opacity: 0; transform: translateY(0.8em); } 56%, 63% { opacity: 1; transform: none; } 67%, 100% { opacity: 0; transform: none; } }
@keyframes wc-report { 0%, 63% { opacity: 0; transform: translateY(4%); } 67%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes wc-bar { 0%, 66% { transform: scaleY(0); } 74%, 96% { transform: scaleY(1); } 99%, 100% { transform: scaleY(0); } }
@keyframes wc-sugg-1 { 0%, 74% { opacity: 0; transform: translateX(1em); } 77%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes wc-sugg-2 { 0%, 78% { opacity: 0; transform: translateX(1em); } 81%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes wc-sugg-3 { 0%, 82% { opacity: 0; transform: translateX(1em); } 85%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes wc-card-2 { 0%, 52% { opacity: 0; transform: translateY(1em) rotate(3deg); } 57%, 62% { opacity: 1; transform: rotate(2deg); } 66%, 100% { opacity: 0; transform: translateY(-0.5em) rotate(2deg); } }
@keyframes wc-card-3 { 0%, 84% { opacity: 0; transform: translateY(1.5em) rotate(-3deg); } 88%, 95% { opacity: 1; transform: rotate(-2deg); } 98%, 100% { opacity: 0; transform: translateY(0.5em) rotate(-2deg); } }

/* ---------- reduced motion: one still frame, the finished state ---------- */
@media (prefers-reduced-motion: reduce) {
  .sc-scene *, .sc-scene *::before, .sc-scene *::after { animation: none !important; }
  .sc-beat { color: #e2e8f0; opacity: 1; transform: none; }
  .ws-old, .ws-tag, .ws-approve, .sc-thumb, .ws-url-preview { opacity: 0 !important; }
  .ws-new { clip-path: none; }
  .ws-url-live { opacity: 1; }
  .ws-lock { color: #16a34a; }
  .ws-own { opacity: 1; transform: rotate(2deg); }
  .ws-tick { transform: none; }
  /* local SEO still frame: found on the map, profile open, enquiry arriving */
  .ls-search, .ls-calling, .ls-setup, .ls-actions .sc-thumb { opacity: 0 !important; }
  .ls-map, .ls-you { opacity: 1; transform: none; }
  .ls-profile { transform: none; }
  .ls-notify { opacity: 1; transform: rotate(-2deg); }
  /* care still frame: the monthly report, with the choice card */
  .wc-checks, .wc-mail, .wc-included { opacity: 0 !important; }
  .wc-report, .wc-sugg { opacity: 1; transform: none; }
  .wc-chart i { transform: none; }
  .wc-choice { opacity: 1; transform: rotate(-2deg); }
}

/* ---------- layout ---------- */
@media (max-width: 900px) {
  .page-hero.has-scene .wrap { grid-template-columns: 1fr; }
  .sc-scene { max-width: 26rem; margin: 0.5rem auto 0; }
}