/* ============================================================================
   Motion and films, 12 October 2026. Paired with js/motion.js.
   Every film's resting frame is a complete picture, so with motion reduced
   (or the script missing) each one still says what it is for.
   ========================================================================= */

/* ---- Page-load entrance for the top of every page -------------------------- */
@keyframes m-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
.svc-hero .svc-wrap > *, .svc-hero-copy > *, .home-hero-copy > *, .page-header .container > *,
.bp-hero .container > *, .story-hero .container > *, .results-hero .container > * {
  animation: m-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.svc-hero .svc-wrap > :nth-child(2), .svc-hero-copy > :nth-child(2), .home-hero-copy > :nth-child(2),
.page-header .container > :nth-child(2), .bp-hero .container > :nth-child(2) { animation-delay: 0.08s; }
.svc-hero .svc-wrap > :nth-child(3), .svc-hero-copy > :nth-child(3), .home-hero-copy > :nth-child(3),
.page-header .container > :nth-child(3), .bp-hero .container > :nth-child(3) { animation-delay: 0.16s; }
.svc-hero .svc-wrap > :nth-child(n+4), .svc-hero-copy > :nth-child(n+4), .home-hero-copy > :nth-child(n+4),
.page-header .container > :nth-child(n+4), .bp-hero .container > :nth-child(n+4) { animation-delay: 0.24s; }
.home-hero-media, .svc-hero-media { animation: m-rise 1.1s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ---- Scroll reveal (js/motion.js adds .m-reveal, then .m-in) --------------- */
.m-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--m-i, 0) * 90ms);
}
.m-reveal.m-in { opacity: 1; transform: none; }

/* ---- Header: a shadow once the page moves ---------------------------------- */
.header { transition: box-shadow 0.3s ease, background-color 0.3s ease; }
.header.m-scrolled { box-shadow: 0 8px 30px rgba(24, 39, 42, 0.07) !important; background: rgba(255, 255, 255, 0.96) !important; }

/* ---- Reading progress on guides ------------------------------------------- */
.m-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000;
  background: linear-gradient(90deg, var(--teal), var(--orange));
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

/* ---- Glows ------------------------------------------------------------------ */
/* Two slow orbs of light behind every page top. */
.svc-hero, .home-hero, .page-header, .bp-hero, .story-hero, .results-hero { position: relative; overflow: clip; isolation: isolate; }
.svc-hero::before, .svc-hero::after, .home-hero::before, .home-hero::after {
  content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  filter: blur(60px); opacity: 0.55;
}
.svc-hero::before, .home-hero::before {
  width: 520px; height: 520px; right: -120px; top: -160px;
  background: radial-gradient(circle, rgba(8, 169, 172, 0.35), rgba(8, 169, 172, 0) 70%);
  animation: m-orb-a 22s ease-in-out infinite alternate;
}
.svc-hero::after, .home-hero::after {
  width: 460px; height: 460px; left: -140px; bottom: -200px;
  background: radial-gradient(circle, rgba(244, 130, 34, 0.32), rgba(244, 130, 34, 0) 70%);
  animation: m-orb-b 26s ease-in-out infinite alternate;
}
@keyframes m-orb-a { to { transform: translate(-120px, 80px) scale(1.15); } }
@keyframes m-orb-b { to { transform: translate(140px, -60px) scale(1.1); } }

/* The closing band: light moves slowly across the deep teal. */
.sv-final-cta, .cta-section > .container, .results-cta > .container { position: relative; overflow: clip; isolation: isolate; }
.sv-final-cta::before, .sv-final-cta::after { display: block !important; }
.sv-final-cta::before {
  content: ''; position: absolute; z-index: -1; width: 640px; height: 640px; right: -160px; top: -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 130, 34, 0.35), rgba(244, 130, 34, 0) 70%);
  filter: blur(40px); animation: m-orb-a 18s ease-in-out infinite alternate;
}
.sv-final-cta::after {
  content: ''; position: absolute; z-index: -1; width: 560px; height: 560px; left: -160px; bottom: -280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(8, 169, 172, 0.4), rgba(8, 169, 172, 0) 70%);
  filter: blur(40px); animation: m-orb-b 22s ease-in-out infinite alternate;
}

/* A faint pool of light under each section heading. */
.svc-head { position: relative; isolation: isolate; }
.svc-head::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: -40px; width: min(560px, 100%); height: 180px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(8, 169, 172, 0.10), rgba(8, 169, 172, 0));
}

/* Cards: a light that follows the pointer, and a coloured edge on hover. */
.svc-card, .svc-related-card, .home-steps li, .about-facts > div { position: relative; overflow: hidden; isolation: isolate; }
.svc-card::after, .svc-related-card::after, .home-steps li::after, .about-facts > div::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(244, 130, 34, 0.10), rgba(8, 169, 172, 0.05) 40%, transparent 70%);
  transition: opacity 0.4s ease;
}
.svc-card:hover::after, .svc-related-card:hover::after, .home-steps li:hover::after, .about-facts > div:hover::after { opacity: 1; }
.svc-card, .home-steps li, .about-facts > div { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; }
.svc-card:hover, .home-steps li:hover, .about-facts > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(24, 39, 42, 0.05), 0 22px 48px rgba(24, 39, 42, 0.10), 0 0 0 1px rgba(244, 130, 34, 0.18);
}
.svc-related-card:hover { box-shadow: 0 2px 4px rgba(24, 39, 42, 0.05), 0 22px 48px rgba(24, 39, 42, 0.10), 0 0 0 1px rgba(244, 130, 34, 0.22) !important; }
.svc-card:hover .svc-ico { transform: scale(1.08) rotate(-4deg); box-shadow: 0 8px 20px rgba(244, 130, 34, 0.25); }
.svc-ico { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease; }
.svc-more { display: inline-flex; gap: 6px; align-items: center; }
.svc-more span { transition: transform 0.3s ease; }
.svc-related-card:hover .svc-more span { transform: translateX(4px); }

/* Buttons: a sheen sweeps across on hover; the main one glows. */
.btn, .svc-related-card { position: relative; }
.btn { overflow: hidden; isolation: isolate; }
.btn::before {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg); transition: left 0.7s ease; pointer-events: none;
}
.btn:hover::before { left: 120%; }
.btn-primary, .sv-final-cta .btn-white { box-shadow: 0 10px 26px rgba(244, 130, 34, 0.32), 0 0 0 0 rgba(244, 130, 34, 0.4) !important; }
.btn-primary:hover, .sv-final-cta .btn-white:hover { box-shadow: 0 14px 34px rgba(244, 130, 34, 0.42), 0 0 0 6px rgba(244, 130, 34, 0.12) !important; }

/* The how-it-works steps: a line draws between the numbers. */
.home-steps { position: relative; }
.home-steps::before {
  content: ''; position: absolute; z-index: 0; top: 50px; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--orange));
  transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
  opacity: 0.35;
}
.home-steps.m-drawn::before { transform: scaleX(1); }
.home-steps li { z-index: 1; }
.home-step-num { box-shadow: 0 0 0 6px rgba(5, 109, 112, 0.10); }
@media (max-width: 640px) { .home-steps::before { display: none; } }

/* Hero photo: a slow push-in. */
.home-hero-media picture { display: block; overflow: hidden; border-radius: 28px; }
.home-hero-media img { animation: m-push 18s ease-in-out infinite alternate; }
@keyframes m-push { from { transform: scale(1); } to { transform: scale(1.06); } }
.home-alert { animation: m-float 6s ease-in-out infinite; }
@keyframes m-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.home-alert-dot { animation: m-ping 2s ease-out infinite; }
@keyframes m-ping { 0% { box-shadow: 0 0 0 0 rgba(244, 130, 34, 0.45); } 100% { box-shadow: 0 0 0 14px rgba(244, 130, 34, 0); } }

/* ============================================================================
   Films
   ========================================================================= */
.film { position: relative; border-radius: 28px; overflow: hidden; isolation: isolate; user-select: none; }
.film * { animation-play-state: paused !important; }
.film.is-playing * { animation-play-state: running !important; }
.film-caption { font-size: 0.88rem; color: var(--muted); margin: 14px 0 0; text-align: center; }

/* Split page top: words on the left, a film on the right. */
.svc-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; text-align: left; }
.svc-hero-grid .svc-lede { margin-left: 0; }
.svc-hero-grid h1 { margin-left: 0; }
.svc-hero-grid .svc-actions { justify-content: flex-start; }
.svc-hero.has-film { text-align: left; padding: 80px 0 88px; }
@media (max-width: 960px) {
  .svc-hero-grid { grid-template-columns: 1fr; gap: 44px; }
}

/* ---- Film: the alert on a phone ------------------------------------------- */
.film-phone { width: 270px; aspect-ratio: 270 / 560; border-radius: 44px; background: #0d1416; padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 40px 80px rgba(24, 39, 42, 0.28), inset 0 0 0 2px #2a3437; overflow: visible; }
.film-phone .ph-screen { position: relative; width: 100%; height: 100%; border-radius: 35px; overflow: hidden;
  background: radial-gradient(120% 80% at 20% 0%, #0f6b6e 0%, #0b3b3d 55%, #071f21 100%); color: #fff; }
.film-phone .ph-notch { position: absolute; top: 10px; left: 50%; width: 86px; height: 24px; transform: translateX(-50%); background: #0d1416; border-radius: 20px; z-index: 5; }
.film-phone .ph-time { position: absolute; top: 70px; left: 0; right: 0; text-align: center; font-size: 3.4rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.film-phone .ph-date { position: absolute; top: 132px; left: 0; right: 0; text-align: center; font-size: 0.82rem; opacity: 0.8; }
.film-phone .ph-note { position: absolute; left: 12px; right: 12px; top: 176px; display: flex; gap: 10px; align-items: flex-start;
  background: rgba(255, 255, 255, 0.94); color: var(--ink); border-radius: 18px; padding: 12px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: ph-note 10s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.film-phone .ph-app { width: 34px; height: 34px; border-radius: 9px; background: var(--orange); flex: none; display: grid; place-items: center; }
.film-phone .ph-app svg { width: 20px; height: 20px; }
.film-phone .ph-note b { display: block; font-size: 0.86rem; }
.film-phone .ph-note small { display: block; font-size: 0.72rem; color: var(--muted); line-height: 1.35; }
.film-phone .ph-note > span:last-child { flex: 1; min-width: 0; }
.film-phone .ph-note .ph-meta { display: flex; gap: 8px; justify-content: space-between; font-size: 0.66rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 2px; }
.film-phone .ph-tap { position: absolute; top: 200px; left: 50%; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); opacity: 0; animation: ph-tap 10s ease-out infinite; z-index: 4; }
.film-phone .ph-view { position: absolute; inset: 0; background: #f6f4ef; color: var(--ink); padding: 54px 16px 18px; display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform: translateY(24px); animation: ph-view 10s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.film-phone .ph-view h4 { margin: 0; font-size: 1.15rem; letter-spacing: -0.02em; }
.film-phone .ph-view .ph-sub { font-size: 0.74rem; color: var(--muted); margin-top: -8px; }
.film-phone .ph-room { position: relative; height: 210px; border-radius: 16px; background: #10181a; overflow: hidden; }
.film-phone .ph-room svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-phone .ph-room .ph-tag { position: absolute; left: 10px; top: 10px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.12); color: #fff; padding: 4px 8px; border-radius: 999px; }
.film-phone .ph-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; }
.film-phone .ph-btn.talk { background: var(--orange); color: var(--ink); animation: ph-pulse 10s ease-out infinite; }
.film-phone .ph-btn.later { background: #fff; border: 1px solid var(--line); color: var(--ink); }
@keyframes ph-note {
  0%, 8% { opacity: 0; transform: translateY(-40px) scale(0.96); }
  14%, 46% { opacity: 1; transform: none; }
  52%, 100% { opacity: 0; transform: translateY(-8px) scale(0.98); }
}
@keyframes ph-tap {
  0%, 38% { opacity: 0; transform: scale(0.6); }
  42% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
  48% { opacity: 0; transform: scale(1.1); box-shadow: 0 0 0 26px rgba(255, 255, 255, 0); }
  100% { opacity: 0; }
}
@keyframes ph-view {
  0%, 46% { opacity: 0; transform: translateY(24px); }
  52%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes ph-pulse {
  0%, 60% { box-shadow: 0 0 0 0 rgba(244, 130, 34, 0.5); }
  70% { box-shadow: 0 0 0 12px rgba(244, 130, 34, 0); }
  71%, 78% { box-shadow: 0 0 0 0 rgba(244, 130, 34, 0.5); }
  88%, 100% { box-shadow: 0 0 0 12px rgba(244, 130, 34, 0); }
}
/* Resting frame (motion reduced): the notification on the lock screen. */
@media (prefers-reduced-motion: reduce) {
  .film-phone .ph-note { animation: none; opacity: 1; transform: none; }
  .film-phone .ph-view, .film-phone .ph-tap { animation: none; opacity: 0; }
}

/* Phone placed over the corner of a hero photo. */
.hero-stack { position: relative; padding: 0 0 40px; }
.hero-stack > picture img { width: 100%; }
.hero-stack .film-phone { position: absolute; right: -18px; bottom: -36px; width: 270px; z-index: 2; transform: scale(0.8); transform-origin: 100% 100%; }
.hero-stack .home-alert { display: none; }
@media (max-width: 960px) { .hero-stack .film-phone { right: 8px; bottom: -20px; transform: scale(0.66); } }
@media (max-width: 640px) { .hero-stack .film-phone { right: 6px; bottom: -28px; transform: scale(0.52); } .hero-stack { padding-bottom: 36px; } }

/* ---- Film: a fall, seen as a stick figure --------------------------------- */
.film-fall { aspect-ratio: 16 / 10; background: radial-gradient(120% 90% at 30% 0%, #163c3e 0%, #0b2223 60%, #071718 100%); box-shadow: 0 30px 70px rgba(24, 39, 42, 0.22); }
.film-fall svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-fall .ff-fig { transform-box: fill-box; transform-origin: 50% 100%; animation: ff-walk 10s linear infinite; }
.film-fall .ff-body { transform-box: fill-box; transform-origin: 50% 100%; animation: ff-fall 10s cubic-bezier(0.5, 0, 0.75, 0) infinite; }
.film-fall .ff-leg-a, .film-fall .ff-leg-b, .film-fall .ff-arm-a, .film-fall .ff-arm-b { transform-box: fill-box; transform-origin: 50% 0; }
.film-fall .ff-leg-a, .film-fall .ff-arm-b { animation: ff-swing-a 10s linear infinite; }
.film-fall .ff-leg-b, .film-fall .ff-arm-a { animation: ff-swing-b 10s linear infinite; }
.film-fall .ff-ring { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: ff-ring 10s ease-out infinite; }
.film-fall .ff-ring.r2 { animation-delay: 0.6s; }
.film-fall .ff-toast { position: absolute; right: 18px; top: 18px; display: flex; gap: 10px; align-items: center; background: #fff; color: var(--ink);
  border-radius: 14px; padding: 10px 14px 10px 12px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(-12px);
  animation: ff-toast 10s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.film-fall .ff-toast b { display: block; font-size: 0.86rem; }
.film-fall .ff-toast small { display: block; font-size: 0.74rem; color: var(--muted); }
.film-fall .ff-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(244, 130, 34, 0.2); flex: none; }
.film-fall .ff-label { position: absolute; left: 18px; top: 18px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.1); padding: 5px 10px; border-radius: 999px; }
.film-fall .ff-label::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #2fd07a; margin-right: 7px; vertical-align: 1px; }
@keyframes ff-walk { 0% { transform: translateX(0); } 42% { transform: translateX(150px); } 100% { transform: translateX(150px); } }
@keyframes ff-fall { 0%, 44% { transform: rotate(0); } 52%, 100% { transform: rotate(84deg) translate(0, -6px); } }
@keyframes ff-swing-a {
  0% { transform: rotate(22deg); } 7% { transform: rotate(-22deg); } 14% { transform: rotate(22deg); } 21% { transform: rotate(-22deg); }
  28% { transform: rotate(22deg); } 35% { transform: rotate(-22deg); } 42% { transform: rotate(22deg); } 46%, 100% { transform: rotate(10deg); }
}
@keyframes ff-swing-b {
  0% { transform: rotate(-22deg); } 7% { transform: rotate(22deg); } 14% { transform: rotate(-22deg); } 21% { transform: rotate(22deg); }
  28% { transform: rotate(-22deg); } 35% { transform: rotate(22deg); } 42% { transform: rotate(-22deg); } 46%, 100% { transform: rotate(-14deg); }
}
@keyframes ff-ring { 0%, 54% { opacity: 0; transform: scale(0.4); } 58% { opacity: 0.9; } 74% { opacity: 0; transform: scale(2.2); } 100% { opacity: 0; } }
@keyframes ff-toast { 0%, 56% { opacity: 0; transform: translateY(-12px); } 62%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .film-fall .ff-toast { animation: none; opacity: 1; transform: none; }
  .film-fall .ff-fig { animation: none; transform: translateX(150px); }
  .film-fall .ff-body { animation: none; transform: rotate(84deg) translate(0, -6px); }
}

/* ---- Film: the week's pattern --------------------------------------------- */
.film-week { background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(24, 39, 42, 0.12); padding: 28px 28px 24px; }
.film-week .fw-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 22px; }
.film-week .fw-title { font-weight: 700; color: var(--ink); font-size: 1rem; }
.film-week .fw-sub { font-size: 0.8rem; color: var(--muted); }
.film-week .fw-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; align-items: end; height: 190px; padding-bottom: 4px; border-bottom: 1px solid var(--line); position: relative; }
.film-week .fw-base { position: absolute; left: 0; right: 0; bottom: calc(25% + 4px); border-top: 1px dashed #cfc7b9; }
.film-week .fw-base span { position: absolute; right: 0; top: -20px; font-size: 0.7rem; color: var(--muted); }
.film-week .fw-bar { height: var(--h); border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #4fb6b8, #0b7f82);
  transform-origin: 50% 100%; transform: scaleY(1); animation: fw-grow 1.2s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--d) * 110ms); }
.film-week .fw-bar.is-high { background: linear-gradient(180deg, #ffb46b, #f48222); box-shadow: 0 10px 24px rgba(244, 130, 34, 0.35); }
.film-week .fw-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: 8px; font-size: 0.74rem; color: var(--muted); text-align: center; }
.film-week .fw-call { margin-top: 18px; display: flex; gap: 12px; align-items: center; background: var(--orange-tint); border: 1px solid #fbe0c7;
  border-radius: 14px; padding: 12px 14px; animation: m-rise 0.8s 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.film-week .fw-call b { display: block; color: var(--ink); font-size: 0.92rem; }
.film-week .fw-call small { color: var(--muted); font-size: 0.8rem; }
@keyframes fw-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---- Film: lights along the route at night -------------------------------- */
.film-light { aspect-ratio: 16 / 11; background: #0a1517; box-shadow: 0 30px 70px rgba(10, 21, 23, 0.35); }
.film-light svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-light .fl-wall { fill: none; stroke: #2a3c3f; stroke-width: 3; }
.film-light .fl-label { fill: #6f8487; font: 600 11px var(--font); letter-spacing: 0.12em; text-transform: uppercase; }
/* A round trip, as installed in real homes (Nigel, 22 Oct 2026): the lights come
   on as they get up, stay on in the bathroom and on the walk back, and go off only
   once they are back in bed. 16s loop: lights from 6%, walking at 13%, bathroom
   38-54%, back in bed by 82%, lights off from 86%. The lamps' stagger (0.4s each)
   lights the way ahead. */
.film-light .fl-glow { opacity: 0.06; animation: fl-glow 16s ease-in-out infinite; }
.film-light .fl-glow.g2 { animation-delay: 0.4s; } .film-light .fl-glow.g3 { animation-delay: 0.8s; } .film-light .fl-glow.g4 { animation-delay: 1.2s; }
.film-light .fl-lamp { fill: #3a4a4c; animation: fl-lamp 16s ease-in-out infinite; }
.film-light .fl-lamp.g2 { animation-delay: 0.4s; } .film-light .fl-lamp.g3 { animation-delay: 0.8s; } .film-light .fl-lamp.g4 { animation-delay: 1.2s; }
.film-light .fl-person { offset-path: path('M 120 150 C 200 150, 230 230, 330 230 S 470 230, 520 160'); offset-rotate: 0deg; animation: fl-walk 16s ease-in-out infinite; }
.film-light .fl-clock { position: absolute; left: 18px; top: 16px; color: #cfe3e4; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em; }
.film-light .fl-clock small { display: block; font-weight: 500; font-size: 0.72rem; color: #7f9799; }
.film-light .fl-chip { position: absolute; right: 16px; bottom: 16px; background: rgba(255, 200, 130, 0.14); color: #ffd7a8; border: 1px solid rgba(255, 200, 130, 0.3);
  font-size: 0.74rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; animation: fl-chip 16s ease-in-out infinite; }
@keyframes fl-walk { 0%, 13% { offset-distance: 0%; } 38%, 54% { offset-distance: 100%; } 82%, 100% { offset-distance: 0%; } }
@keyframes fl-glow { 0%, 6% { opacity: 0.06; } 11%, 86% { opacity: 1; } 92%, 100% { opacity: 0.06; } }
@keyframes fl-lamp { 0%, 6% { fill: #3a4a4c; } 11%, 86% { fill: #ffd29a; } 92%, 100% { fill: #3a4a4c; } }
@keyframes fl-chip { 0%, 8% { opacity: 0; transform: translateY(6px); } 12%, 86% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .film-light .fl-glow { animation: none; opacity: 1; } .film-light .fl-lamp { animation: none; fill: #ffd29a; }
  .film-light .fl-person { animation: none; offset-distance: 60%; } .film-light .fl-chip { animation: none; opacity: 1; }
}

/* ---- Film: the doorbell on the living-room screen ------------------------- */
.film-door { aspect-ratio: 16 / 11; background: linear-gradient(160deg, #efe9df, #e4ddd1); box-shadow: 0 30px 70px rgba(24, 39, 42, 0.16); display: grid; place-items: center; }
.film-door .fd-screen { position: relative; width: 78%; aspect-ratio: 16 / 10; border-radius: 18px; background: #0d1416; padding: 9px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28); }
.film-door .fd-inner { position: relative; width: 100%; height: 100%; border-radius: 11px; overflow: hidden; background: #172123; }
.film-door .fd-idle { position: absolute; inset: 0; display: grid; place-items: center; color: #dfeaea; text-align: center; animation: fd-idle 10s ease infinite; }
.film-door .fd-idle b { display: block; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.04em; }
.film-door .fd-idle small { font-size: 0.78rem; color: #8aa1a3; }
.film-door .fd-cam { position: absolute; inset: 0; opacity: 0; animation: fd-cam 10s ease infinite; }
.film-door .fd-cam svg { width: 100%; height: 100%; display: block; }
.film-door .fd-live { position: absolute; left: 10px; top: 10px; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  background: rgba(0, 0, 0, 0.45); padding: 4px 8px; border-radius: 999px; }
.film-door .fd-live::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ff5a4f; margin-right: 6px; vertical-align: 1px; animation: m-ping 1.6s ease-out infinite; }
.film-door .fd-btns { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; gap: 8px; justify-content: center; }
.film-door .fd-btns span { font-size: 0.72rem; font-weight: 700; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: var(--ink); }
.film-door .fd-btns span.talk { background: var(--orange); }
.film-door .fd-ring { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; background: #fff; color: var(--ink);
  font-size: 0.8rem; font-weight: 700; padding: 8px 14px; border-radius: 999px; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2); opacity: 0; animation: fd-ring 10s ease infinite; white-space: nowrap; }
.film-door .fd-ring i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: m-ping 1.4s ease-out infinite; }
.film-door .fd-phone { position: absolute; right: 7%; bottom: 8%; width: 18%; aspect-ratio: 9 / 18; border-radius: 16px; background: #0d1416; padding: 4px;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(14px); animation: fd-phone 10s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.film-door .fd-phone div { width: 100%; height: 100%; border-radius: 12px; background: #172123; overflow: hidden; }
.film-door .fd-phone svg { width: 100%; height: 100%; display: block; }
@keyframes fd-idle { 0%, 10% { opacity: 1; } 16%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fd-cam { 0%, 10% { opacity: 0; } 16%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fd-ring { 0%, 6% { opacity: 0; transform: translate(-50%, 8px); } 12%, 40% { opacity: 1; transform: translate(-50%, 0); } 48%, 100% { opacity: 0; transform: translate(-50%, 0); } }
@keyframes fd-phone { 0%, 22% { opacity: 0; transform: translateY(14px); } 30%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .film-door .fd-idle { animation: none; opacity: 0; } .film-door .fd-cam { animation: none; opacity: 1; }
  .film-door .fd-phone { animation: none; opacity: 1; transform: none; } .film-door .fd-ring { animation: none; opacity: 1; transform: translateX(-50%); }
}

/* ---- Film: calling by voice ----------------------------------------------- */
.film-voice { aspect-ratio: 16 / 11; background: linear-gradient(160deg, #f7f2ea, #efe7db); box-shadow: 0 30px 70px rgba(24, 39, 42, 0.14);
  display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 4%; padding: 0 6%; }
.film-voice .fv-speaker { position: relative; justify-self: center; width: 150px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #3a4446, #182022 70%); box-shadow: 0 24px 40px rgba(0, 0, 0, 0.25); }
.film-voice .fv-speaker::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: 16%; height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, #08a9ac, #7fe0e2, #08a9ac); box-shadow: 0 0 18px rgba(8, 169, 172, 0.8); animation: fv-led 10s ease infinite; }
.film-voice .fv-wave { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(8, 169, 172, 0.5); opacity: 0; animation: fv-wave 2.5s ease-out infinite; }
.film-voice .fv-wave.w2 { animation-delay: 0.8s; } .film-voice .fv-wave.w3 { animation-delay: 1.6s; }
.film-voice .fv-chat { display: flex; flex-direction: column; gap: 10px; }
.film-voice .fv-msg { align-self: flex-start; max-width: 100%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; font-size: 0.86rem; font-weight: 600;
  background: #fff; color: var(--ink); box-shadow: 0 8px 18px rgba(24, 39, 42, 0.08); opacity: 0; transform: translateY(10px); animation: fv-msg 10s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.film-voice .fv-msg.me { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--ink); color: #fff; }
.film-voice .fv-msg.ok { background: var(--teal-tint); color: var(--teal); }
.film-voice .fv-msg.help { background: var(--orange); color: var(--ink); }
.film-voice .fv-msg.m1 { animation-name: fv-m1; } .film-voice .fv-msg.m2 { animation-name: fv-m2; } .film-voice .fv-msg.m3 { animation-name: fv-m3; }
.film-voice .fv-msg.m4 { animation-name: fv-m4; } .film-voice .fv-msg.m5 { animation-name: fv-m5; }
@keyframes fv-m1 { 0%, 4% { opacity: 0; transform: translateY(10px); } 8%, 46% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; } }
@keyframes fv-m2 { 0%, 14% { opacity: 0; transform: translateY(10px); } 18%, 46% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; } }
@keyframes fv-m3 { 0%, 26% { opacity: 0; transform: translateY(10px); } 30%, 46% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; } }
@keyframes fv-m4 { 0%, 54% { opacity: 0; transform: translateY(10px); } 58%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes fv-m5 { 0%, 64% { opacity: 0; transform: translateY(10px); } 68%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.film-voice .fv-chat { display: grid; }
.film-voice .fv-chat > * { grid-area: auto; }
.film-voice .fv-set { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; }
@keyframes fv-wave { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes fv-led { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .film-voice .fv-set.s1 .fv-msg { animation: none; opacity: 1; transform: none; } }

/* ---- Film: listening for one sound ---------------------------------------- */
.film-sound { aspect-ratio: 16 / 11; background: #0b1b1d; box-shadow: 0 30px 70px rgba(10, 21, 23, 0.32); padding: 7% 7% 0; color: #dbe8e9; }
.film-sound .fs-head { display: flex; justify-content: space-between; font-size: 0.74rem; color: #7f9799; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.film-sound .fs-wave { display: flex; align-items: center; gap: 4px; height: 46%; margin-top: 8%; }
.film-sound .fs-wave i { flex: 1; height: 12%; border-radius: 4px; background: #2d6e70; transform-origin: 50% 50%; animation: fs-bar 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -97ms); }
.film-sound .fs-wave i.hot { animation-name: fs-hot; animation-duration: 10s; animation-delay: 0s; animation-direction: normal; }
@keyframes fs-bar { from { height: 8%; } to { height: 26%; } }
@keyframes fs-hot { 0%, 38% { height: 14%; background: #2d6e70; } 41% { height: 100%; background: #f48222; } 46% { height: 70%; background: #f48222; } 52% { height: 20%; background: #2d6e70; } 100% { height: 14%; background: #2d6e70; } }
.film-sound .fs-note { position: absolute; left: 7%; right: 7%; bottom: 8%; display: flex; gap: 12px; align-items: center; background: #fff; color: var(--ink);
  border-radius: 16px; padding: 12px 14px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(14px); animation: fs-note 10s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.film-sound .fs-note b { display: block; font-size: 0.9rem; }
.film-sound .fs-note small { color: var(--muted); font-size: 0.76rem; }
.film-sound .fs-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--orange-tint); color: var(--orange-text); display: grid; place-items: center; flex: none; }
.film-sound .fs-icon svg { width: 20px; height: 20px; }
@keyframes fs-note { 0%, 44% { opacity: 0; transform: translateY(14px); } 50%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .film-sound .fs-note { animation: none; opacity: 1; transform: none; } }

/* ---- Film: a code on the lock box ----------------------------------------- */
.film-lock { aspect-ratio: 16 / 11; background: linear-gradient(160deg, #f4efe7, #e9e1d4); box-shadow: 0 30px 70px rgba(24, 39, 42, 0.14);
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 6%; align-items: center; padding: 0 7%; }
.film-lock .fk-box { background: #1a2224; border-radius: 22px; padding: 16px 14px 18px; box-shadow: 0 24px 44px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.film-lock .fk-led { height: 6px; width: 40%; margin: 0 auto 12px; border-radius: 6px; background: #3b4648; animation: fk-led 9s ease infinite; }
.film-lock .fk-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; }
.film-lock .fk-dots i { width: 9px; height: 9px; border-radius: 50%; background: #3b4648; animation: fk-dot 9s ease infinite; }
.film-lock .fk-dots i:nth-child(2) { animation-name: fk-dot2; } .film-lock .fk-dots i:nth-child(3) { animation-name: fk-dot3; } .film-lock .fk-dots i:nth-child(4) { animation-name: fk-dot4; }
.film-lock .fk-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.film-lock .fk-keys span { aspect-ratio: 1; border-radius: 50%; background: #262f31; color: #c9d6d7; display: grid; place-items: center; font-size: 0.8rem; font-weight: 600; }
.film-lock .fk-keys span.k1 { animation: fk-k1 9s ease infinite; } .film-lock .fk-keys span.k2 { animation: fk-k2 9s ease infinite; }
.film-lock .fk-keys span.k3 { animation: fk-k3 9s ease infinite; } .film-lock .fk-keys span.k4 { animation: fk-k4 9s ease infinite; }
.film-lock .fk-log { background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 16px 34px rgba(24, 39, 42, 0.12); }
.film-lock .fk-log h5 { margin: 0 0 10px; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-text); }
.film-lock .fk-row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.8rem; padding: 8px 0; border-top: 1px solid var(--line); color: var(--body); }
.film-lock .fk-row b { color: var(--ink); font-weight: 700; }
.film-lock .fk-row.new { animation: fk-new 9s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
@keyframes fk-press { 0%, 100% { background: #262f31; } }
@keyframes fk-k1 { 0%, 10% { background: #262f31; } 12% { background: #f48222; color: #18272a; } 16%, 100% { background: #262f31; color: #c9d6d7; } }
@keyframes fk-k2 { 0%, 18% { background: #262f31; } 20% { background: #f48222; color: #18272a; } 24%, 100% { background: #262f31; color: #c9d6d7; } }
@keyframes fk-k3 { 0%, 26% { background: #262f31; } 28% { background: #f48222; color: #18272a; } 32%, 100% { background: #262f31; color: #c9d6d7; } }
@keyframes fk-k4 { 0%, 34% { background: #262f31; } 36% { background: #f48222; color: #18272a; } 40%, 100% { background: #262f31; color: #c9d6d7; } }
@keyframes fk-dot { 0%, 11% { background: #3b4648; } 12%, 88% { background: #f48222; } 92%, 100% { background: #3b4648; } }
@keyframes fk-dot2 { 0%, 19% { background: #3b4648; } 20%, 88% { background: #f48222; } 92%, 100% { background: #3b4648; } }
@keyframes fk-dot3 { 0%, 27% { background: #3b4648; } 28%, 88% { background: #f48222; } 92%, 100% { background: #3b4648; } }
@keyframes fk-dot4 { 0%, 35% { background: #3b4648; } 36%, 88% { background: #f48222; } 92%, 100% { background: #3b4648; } }
@keyframes fk-led { 0%, 40% { background: #3b4648; box-shadow: none; } 44%, 86% { background: #2fd07a; box-shadow: 0 0 14px rgba(47, 208, 122, 0.8); } 92%, 100% { background: #3b4648; box-shadow: none; } }
@keyframes fk-new { 0%, 44% { opacity: 0; max-height: 0; padding: 0; border-color: transparent; } 50%, 90% { opacity: 1; max-height: 50px; padding: 8px 0; border-color: var(--line); } 96%, 100% { opacity: 0; max-height: 0; padding: 0; } }
@media (prefers-reduced-motion: reduce) { .film-lock .fk-row.new { animation: none; } .film-lock .fk-led { animation: none; background: #2fd07a; } .film-lock .fk-dots i { animation: none; background: #f48222; } }

/* ---- Everything still, for anyone who asked ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .svc-hero .svc-wrap > *, .svc-hero-copy > *, .home-hero-copy > *, .page-header .container > *, .bp-hero .container > *,
  .story-hero .container > *, .results-hero .container > *, .home-hero-media, .svc-hero-media,
  .home-hero-media img, .home-alert, .home-alert-dot, .svc-hero::before, .svc-hero::after, .home-hero::before, .home-hero::after,
  .sv-final-cta::before, .sv-final-cta::after, .film-week .fw-bar, .film-week .fw-call, .film-sound .fs-wave i, .film-voice .fv-wave { animation: none !important; }
  .m-reveal { opacity: 1; transform: none; transition: none; }
  .btn::before { display: none; }
  .home-steps::before { transform: scaleX(1); transition: none; }
}

/* ---- Film: raise an arm to call ------------------------------------------- */
.film-raise .fr-arm { transform-box: fill-box; transform-origin: 50% 0; animation: fr-arm 10s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
@keyframes fr-arm { 0%, 34% { transform: rotate(0); } 44%, 92% { transform: rotate(-138deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .film-raise .fr-arm { animation: none; transform: rotate(-138deg); } }

/* ---- Films inside guide page tops ------------------------------------------ */
.bp-hero-film { max-width: 760px; margin: 44px auto 0; }
.bp-hero-film.is-phone {
  display: grid; place-items: center; padding: 36px 0 30px; border-radius: 28px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.bp-hero-film.is-phone .film-phone { width: 270px; }
.bp-hero-film .film-caption { color: var(--muted) !important; }
@media (max-width: 640px) { .bp-hero-film { margin-top: 28px; } .bp-hero-film.is-phone .film-phone { transform: scale(0.82); margin: -40px 0; } }

/* ---- Film: the doorbell, rebuilt 13 Oct with a real scene ------------------ */
.fdx { aspect-ratio: 16 / 11; background: radial-gradient(120% 90% at 70% 10%, #f7f1e7, #e6ddcf); display: grid; place-items: center; position: relative; overflow: hidden; }
.fdx::before { content: ""; position: absolute; width: 60%; height: 70%; left: -10%; bottom: -20%; border-radius: 50%; background: radial-gradient(circle, rgba(244, 130, 34, 0.22), transparent 65%); }
.fdx-stage { position: relative; width: 86%; }
.fdx-screen { position: relative; width: 82%; aspect-ratio: 16 / 10; border-radius: 18px; background: #0b1214; padding: 8px; box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; }
.fdx-screen::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 26%; height: 16px; transform: translateX(-50%); background: linear-gradient(#1a2224, #0b1214); border-radius: 0 0 8px 8px; }
.fdx-inner { position: relative; width: 100%; height: 100%; border-radius: 11px; overflow: hidden; background: linear-gradient(160deg, #183032, #0f1c1e); }
.fdx-idle { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #e6f0f0; gap: 2px; opacity: 0; }
.fdx-idle b { font-size: clamp(1.6rem, 4vw, 2.6rem); letter-spacing: -0.04em; line-height: 1; }
.fdx-idle small { font-size: 0.72rem; color: #9fb6b7; } .fdx-weather { font-size: 0.68rem; color: #9fb6b7; margin-top: 6px; }
.fdx-cam { position: absolute; inset: 0; }
.fdx-cam .fdx-svg { width: 100%; height: 100%; display: block; }
.fdx-live, .fdx-time { position: absolute; top: 8px; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; color: #fff; background: rgba(0, 0, 0, 0.5); padding: 3px 8px; border-radius: 999px; text-transform: uppercase; }
.fdx-live { left: 8px; } .fdx-time { right: 8px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.fdx-live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ff5a4f; margin-right: 6px; vertical-align: 1px; animation: m-ping 1.6s ease-out infinite; }
.fdx-btns { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; gap: 8px; justify-content: center; }
.fdx-btns span { font-size: 0.66rem; font-weight: 700; padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.fdx-btns .fdx-talk { background: var(--orange); box-shadow: 0 0 0 4px rgba(244, 130, 34, 0.35); }
.fdx-talk i { width: 6px; height: 6px; border-radius: 50%; background: #18272a; }
.fdx-say { position: absolute; left: 50%; bottom: 42px; transform: translateX(-50%); white-space: nowrap; font-size: 0.68rem; font-weight: 700; color: var(--ink); background: #fff; padding: 6px 11px; border-radius: 12px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25); }
.fdx-say::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: #fff; transform: translateX(-50%) rotate(45deg); }
.fdx-banner { position: absolute; left: 50%; top: 10px; transform: translate(-50%, -140%); display: flex; gap: 8px; align-items: center; background: rgba(255, 255, 255, 0.96); border-radius: 12px; padding: 7px 12px 7px 8px; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); white-space: nowrap; opacity: 0; }
.fdx-banner b { display: block; font-size: 0.7rem; color: var(--ink); } .fdx-banner small { font-size: 0.58rem; color: var(--muted); }
.fdx-bell { width: 22px; height: 22px; border-radius: 7px; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318272a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E") center / 14px no-repeat; }
.fdx-phone { position: absolute; right: -2%; bottom: -10%; width: 27%; aspect-ratio: 9 / 18.5; border-radius: 18px; background: #0b1214; padding: 4px; box-shadow: 0 24px 40px -10px rgba(0, 0, 0, 0.45); }
.fdx-phone-in { width: 100%; height: 100%; border-radius: 14px; overflow: hidden; background: #f2f2f7; display: flex; flex-direction: column; gap: 6px; padding: 18px 6px 6px; }
.fdx-pnote { display: flex; gap: 6px; align-items: center; background: #fff; border-radius: 9px; padding: 5px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); }
.fdx-pnote .nt-ic { width: 20px; height: 20px; border-radius: 6px; flex: none; display: grid; place-items: center; }
.fdx-pnote .nt-ic svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2; }
.fdx-pnote b { display: block; font-size: 0.5rem; color: var(--ink); } .fdx-pnote small { display: block; font-size: 0.46rem; color: var(--muted); line-height: 1.25; }
.fdx-pcam { flex: 1; border-radius: 8px; overflow: hidden; }
.fdx-pcam .fdx-svg { width: 100%; height: 100%; display: block; }
.fdx-pbtns { display: flex; gap: 4px; } .fdx-pbtns span { flex: 1; text-align: center; font-size: 0.48rem; font-weight: 700; padding: 4px 0; border-radius: 999px; background: #fff; color: var(--ink); }
.fdx-pbtns span:first-child { background: var(--orange); }
body:has(.svc-hero-product) .fdx-phone { right: auto; left: -4%; }
/* the still frame: courier at the step, box held, reply showing */
.fdx-walker, .fdx-box, .fdx-wave, .fdx-left-box { transform-box: view-box; }
.fdx-walker { transform-origin: 160px 200px; }
.fdx-left-box, .fdx-wave { opacity: 0; }
.fdx-still .fdx-say { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .fdx.is-playing .fdx-idle { animation: fdx-idle 14s ease infinite; }
  .fdx.is-playing .fdx-cam { animation: fdx-cam 14s ease infinite; }
  .fdx.is-playing .fdx-banner { animation: fdx-banner 14s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
  .fdx.is-playing .fdx-cam .fdx-walker { animation: fdx-walk 14s cubic-bezier(0.4, 0, 0.3, 1) infinite; }
  .fdx.is-playing .fdx-cam .fdx-bob { animation: fdx-bob 14s linear infinite; }
  .fdx.is-playing .fdx-cam .fdx-box { animation: fdx-box 14s ease infinite; }
  .fdx.is-playing .fdx-cam .fdx-left-box { animation: fdx-left 14s ease infinite; }
  .fdx.is-playing .fdx-cam .fdx-wave { transform-origin: 190px 150px; animation: fdx-wave 14s ease-in-out infinite; }
  .fdx.is-playing .fdx-talk { animation: fdx-talk 14s ease infinite; }
  .fdx.is-playing .fdx-say { animation: fdx-say 14s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
  .fdx.is-playing .fdx-phone { animation: fdx-phone 14s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
}
@keyframes fdx-idle { 0%, 8% { opacity: 1; } 13%, 93% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes fdx-cam { 0%, 9% { opacity: 0; } 14%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes fdx-banner { 0%, 5% { opacity: 0; transform: translate(-50%, -140%); } 9%, 30% { opacity: 1; transform: translate(-50%, 0); } 35%, 100% { opacity: 0; transform: translate(-50%, -140%); } }
@keyframes fdx-walk { 0%, 14% { transform: translate(18px, -80px) scale(0.3); } 48%, 100% { transform: none; } }
@keyframes fdx-bob { 14.0% { transform: translateY(0px); } 15.7% { transform: translateY(-2.5px); } 17.4% { transform: translateY(0px); } 19.1% { transform: translateY(-2.5px); } 20.8% { transform: translateY(0px); } 22.5% { transform: translateY(-2.5px); } 24.2% { transform: translateY(0px); } 25.9% { transform: translateY(-2.5px); } 27.6% { transform: translateY(0px); } 29.3% { transform: translateY(-2.5px); } 31.0% { transform: translateY(0px); } 32.7% { transform: translateY(-2.5px); } 34.4% { transform: translateY(0px); } 36.1% { transform: translateY(-2.5px); } 37.8% { transform: translateY(0px); } 39.5% { transform: translateY(-2.5px); } 41.2% { transform: translateY(0px); } 42.9% { transform: translateY(-2.5px); } 44.6% { transform: translateY(0px); } 46.3% { transform: translateY(-2.5px); } 48%, 100% { transform: none; } }
@keyframes fdx-box { 0%, 62% { opacity: 1; transform: none; } 67% { opacity: 0; transform: translateY(14px); } 100% { opacity: 0; } }
@keyframes fdx-left { 0%, 64% { opacity: 0; } 68%, 100% { opacity: 1; } }
@keyframes fdx-wave { 0%, 67% { opacity: 0; transform: rotate(0); } 70% { opacity: 1; transform: rotate(-10deg); } 74% { transform: rotate(8deg); } 78% { transform: rotate(-10deg); } 82% { transform: rotate(8deg); } 86% { opacity: 1; transform: rotate(0); } 90%, 100% { opacity: 0; } }
@keyframes fdx-talk { 0%, 48% { box-shadow: none; transform: none; } 51% { transform: scale(0.92); } 54%, 82% { transform: none; box-shadow: 0 0 0 4px rgba(244, 130, 34, 0.35); } 88%, 100% { box-shadow: none; } }
@keyframes fdx-say { 0%, 52% { opacity: 0; transform: translate(-50%, 8px); } 56%, 80% { opacity: 1; transform: translate(-50%, 0); } 85%, 100% { opacity: 0; transform: translate(-50%, 0); } }
@keyframes fdx-phone { 0%, 20% { opacity: 0; transform: translateY(18px); } 27%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(10px); } }
@media (max-width: 560px) { .fdx-say { font-size: 0.58rem; bottom: 34px; } .fdx-btns span { font-size: 0.58rem; padding: 5px 10px; } .fdx-banner b { font-size: 0.6rem; } }

/* ---- Film: a person becomes a stick figure, then the fall and the alert (SmartGuardian top) ----
   After the maker's 2023 video (scan line over a person, then a fall and an alert), rebuilt in our own
   frames with the single green figure Nigel preferred. The still frame is the alert. */
.film-sgx { position: relative; aspect-ratio: 16 / 11; border-radius: 26px; overflow: hidden; background: #0a1517; box-shadow: 0 40px 80px -30px rgba(11, 59, 61, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; }
.sgx-stage, .sgx-a, .sgx-c { position: absolute; inset: 0; }
.sgx-a picture, .sgx-b picture { display: block !important; width: 100%; height: 100%; }
.sgx-a img, .sgx-b img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sgx-b { position: absolute; inset: 0; clip-path: inset(0 0 0 0); }
.sgx-scan { position: absolute; top: 0; bottom: 0; left: 100%; width: 3px; background: #b6ffd6; box-shadow: 0 0 18px 6px rgba(47, 208, 122, 0.75), 0 0 60px 18px rgba(47, 208, 122, 0.35); opacity: 0; }
.sgx-c svg { width: 100%; height: 100%; display: block; }
.sgx-walk, .sgx-fallen, .sgx-ring { transform-box: view-box; }
.sgx-walk { transform-origin: 0 179px; transform: translate(196px, 0) rotate(-85deg); opacity: 0; }
.sgx-ring { transform-origin: 176px 166px; opacity: 0; }
.sgx-tag { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; background: rgba(10, 21, 23, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sgx-tag i { width: 7px; height: 7px; border-radius: 50%; background: #2fd07a; box-shadow: 0 0 8px #2fd07a; }
.sgx-cap { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); white-space: nowrap; padding: 8px 14px; border-radius: 12px; font-size: 0.82rem; font-weight: 700; color: #fff; background: rgba(10, 21, 23, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; }
.sgx-cap.c2 { background: rgba(31, 122, 62, 0.88); }
.film-sgx .sgx-note { position: absolute !important; right: 14px; top: 14px; left: auto !important; width: min(290px, 62%) !important; max-width: none !important; margin: 0 !important; }
.sgx-call { position: absolute; right: 14px; top: calc(14px + 84px); display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #2fd07a; color: #0a1517; font-weight: 800; font-size: 0.82rem; box-shadow: 0 10px 22px rgba(47, 208, 122, 0.4); }
.sgx-call i { width: 8px; height: 8px; border-radius: 50%; background: #0a1517; }
@media (max-width: 560px) { .sgx-note { width: 78%; right: 10px; top: 44px; } .sgx-call { top: calc(44px + 80px); right: 10px; } .sgx-cap { font-size: 0.72rem; bottom: 10px; } }
@media (prefers-reduced-motion: no-preference) {
  .film-sgx.is-playing .sgx-b { animation: sgx-wipe 16s linear infinite; }
  .film-sgx.is-playing .sgx-scan { animation: sgx-scan 16s linear infinite; }
  .film-sgx.is-playing .sgx-c { animation: sgx-room 16s ease infinite; }
  .film-sgx.is-playing .sgx-walk { animation: sgx-walk 16s linear infinite; }
  .film-sgx.is-playing .sgx-fallen { animation: sgx-fallen 16s linear infinite; }
  .film-sgx.is-playing .sgx-ring { animation: sgx-ring 16s ease-out infinite; }
  .film-sgx.is-playing .sgx-ring.r2 { animation-delay: 0.5s; }
  .film-sgx.is-playing .sgx-cap.c1 { animation: sgx-c1 16s ease infinite; }
  .film-sgx.is-playing .sgx-cap.c2 { animation: sgx-c2 16s ease infinite; }
  .film-sgx.is-playing .sgx-cap.c3 { animation: sgx-c3 16s ease infinite; }
  .film-sgx.is-playing .sgx-note { animation: sgx-note 16s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
  .film-sgx.is-playing .sgx-call { animation: sgx-call 16s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
}
@keyframes sgx-wipe { 0%, 12% { clip-path: inset(0 100% 0 0); } 31%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes sgx-scan { 0%, 11.5% { left: 0; opacity: 0; } 12% { left: 0; opacity: 1; } 31% { left: 100%; opacity: 1; } 32%, 100% { left: 100%; opacity: 0; } }
@keyframes sgx-room { 0%, 46% { opacity: 0; } 50%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sgx-walk { 0%, 50% { opacity: 1; transform: translate(70px, 0) rotate(0deg); } 67% { opacity: 1; transform: translate(196px, 0) rotate(0deg); } 71% { opacity: 1; transform: translate(196px, 0) rotate(-85deg); } 72%, 100% { opacity: 0; transform: translate(196px, 0) rotate(-85deg); } }
@keyframes sgx-fallen { 0%, 71% { opacity: 0; } 72%, 100% { opacity: 1; } }
@keyframes sgx-ring { 0%, 73% { opacity: 0; transform: scale(0.4); } 76% { opacity: 1; } 84%, 100% { opacity: 0; transform: scale(2.2); } }
@keyframes sgx-c1 { 0%, 1% { opacity: 0; } 3%, 11% { opacity: 1; } 13%, 100% { opacity: 0; } }
@keyframes sgx-c2 { 0%, 31% { opacity: 0; } 33%, 45% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes sgx-c3 { 0%, 51% { opacity: 0; } 53%, 70% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes sgx-note { 0%, 75% { opacity: 0; transform: translateY(-16px); } 78%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes sgx-call { 0%, 80% { opacity: 0; transform: scale(0.9); } 83%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
.film-sgx .sk-walk { animation: none !important; }
@media (max-width: 560px) { .film-sgx .sgx-note { top: 46px; right: 10px; width: 80% !important; } .film-sgx .sgx-call { top: calc(46px + 78px); } }
.film-sgx .sgx-note { background: rgba(255, 255, 255, 0.97) !important; } .film-sgx .sgx-note .nt-top span { color: #4a4a50 !important; }

/* ---- SmartGuardian top: the maker's real sensor footage (Nigel, 15 Oct: "use AltumView's video").
   Cut from their 2023 promo: the scan that turns a person into a stick figure, then the fall; cropped
   to drop their label and burned-in subtitles. Our captions and alert sit on top, timed by js/motion.js. */
.film-sgv { position: relative; aspect-ratio: 16 / 10; border-radius: 26px; overflow: hidden; background: #0a1517; box-shadow: 0 40px 80px -30px rgba(11, 59, 61, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; }
.sgv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film-sgv .sgx-cap, .film-sgv .sgx-note, .film-sgv .sgx-call { transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.film-sgv .sgx-cap { opacity: 0; transform: translate(-50%, 8px); }
.film-sgv .sgx-note, .film-sgv .sgx-call { opacity: 1; }
.film-sgv[data-phase] .sgx-note { opacity: 0; transform: translateY(-14px); }
.film-sgv[data-phase] .sgx-call { opacity: 0; transform: scale(0.9); }
.film-sgv[data-phase="c1"] .sgx-cap.c1, .film-sgv[data-phase="c2"] .sgx-cap.c2, .film-sgv[data-phase="c3"] .sgx-cap.c3 { opacity: 1; transform: translate(-50%, 0); }
.film-sgv[data-phase="alert"] .sgx-note { opacity: 1; transform: none; }
.film-sgv[data-phase="alert"] .sgx-call { opacity: 1; transform: none; transition-delay: 0.6s; }
.film-sgv .sgx-note { background: rgba(255, 255, 255, 0.97) !important; position: absolute !important; right: 14px; top: 14px; left: auto !important; width: min(290px, 62%) !important; max-width: none !important; margin: 0 !important; }
.film-sgv .sgx-note .nt-top span { color: #4a4a50 !important; }
@media (max-width: 560px) { .film-sgv .sgx-note { top: 46px; right: 10px; width: 80% !important; } .film-sgv .sgx-call { top: calc(46px + 78px); right: 10px; } .film-sgv .sgx-cap { font-size: 0.72rem; bottom: 10px; } }
@media (max-width: 560px) {
  .film-sgv .sgx-tag { left: auto; right: 10px; top: 10px; font-size: 0.64rem; padding: 4px 9px; }
  .film-sgv[data-phase="alert"] .sgx-tag { opacity: 0; }
}