/* ============================================================================
   The SmartGuardian app, drawn in HTML, 12 October 2026.
   Layout follows the app's own store screenshots: an iOS app with a plain
   title bar, blue text actions (Start Call, Resolve, Refresh), the room photo
   with a multicolour skeleton over it, and a five-tab bar (Rooms, People,
   Alerts, Dashboard, Settings). Plus phone notification banners, and the dark
   "premium" bands the Smart Space site uses.
   ========================================================================= */

:root { --app-blue: #2563c9; --app-line: #e6e6eb; --app-grey: #63636a; --app-bg: #f2f2f7; }

/* ---- Phone ----------------------------------------------------------------- */
.app-phone {
  position: relative; width: 290px; aspect-ratio: 290 / 600; flex: none;
  border-radius: 48px; padding: 11px; background: #101415;
  box-shadow: inset 0 0 0 2px #2b3133, inset 0 0 0 5px #0a0c0d, 0 2px 4px rgba(0, 0, 0, 0.12), 0 50px 90px -20px rgba(11, 59, 61, 0.45), 0 30px 60px -30px rgba(244, 130, 34, 0.35);
  font-family: -apple-system, 'SF Pro Text', var(--font); color: #111; text-align: left; user-select: none;
}
.app-island { position: absolute; z-index: 5; top: 20px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #000; }
.app-screen { position: absolute; inset: 11px; border-radius: 38px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.app-status { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 14px 24px 0 30px; font-size: 13px; font-weight: 600; flex: none; }
.app-status-r { display: inline-flex; gap: 5px; align-items: center; }
.app-status-r svg { width: 16px; height: 11px; fill: #111; }
.app-batt { width: 22px; height: 11px; border: 1.5px solid #111; border-radius: 3px; padding: 1px; position: relative; }
.app-batt i { display: block; height: 100%; width: 72%; background: #111; border-radius: 1px; }
.app-nav { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; height: 40px; padding: 0 12px; border-bottom: 1px solid var(--app-line); flex: none; }
.app-nav b { text-align: center; font-size: 14px; font-weight: 600; }
.app-nav svg { width: 20px; height: 20px; fill: none; stroke: #111; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-nav-c { grid-template-columns: 1fr; }
.app-body { flex: 1; overflow: hidden; background: var(--app-bg); display: flex; flex-direction: column; }
.app-meta { background: #fff; padding: 10px 14px 0; font-size: 10.5px; color: #555; }
.app-headline { background: #fff; padding: 2px 14px 10px; font-size: 14px; font-weight: 700; }
.app-row { background: #fff; border-top: 1px solid var(--app-line); min-height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 12.5px; }
.app-center { justify-content: center; }
.app-link { color: var(--app-blue); font-weight: 500; }
.app-call .app-link { flex: 1; text-align: center; margin-right: 26px; }
.app-phone-ico { width: 26px; height: 26px; border-radius: 50%; background: #eee; display: grid; place-items: center; }
.app-phone-ico svg { width: 15px; fill: #777; }
.app-ok { width: 9px; height: 9px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.18); }
.app-id { padding: 8px 14px; font-size: 9.5px; color: var(--app-grey); }
.app-kv { justify-content: space-between; color: #333; }
.app-kv b { font-weight: 600; } .app-green { color: #1f7a3e; }
.app-room { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #1b1b1b; flex: none; }
.app-room img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85) brightness(0.92); }
.app-room svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.app-room .sk-name { color: #fff; fill: #fff; stroke: #000; stroke-width: 3px; font: 700 9px var(--font); paint-order: stroke; }
.app-room.is-live::after { content: 'LIVE'; position: absolute; left: 8px; top: 8px; font: 700 8px var(--font); letter-spacing: 0.1em; color: #fff; background: #ff3b30; padding: 2px 6px; border-radius: 4px; }
.app-tabs { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); height: 58px; padding: 6px 4px 14px; background: #fafafa; border-top: 1px solid var(--app-line); }
.app-tabs span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 8.5px; color: var(--app-grey); }
.app-tabs svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-tabs span.on { color: var(--app-blue); }
.app-tabs em { position: absolute; top: -3px; left: 52%; font-style: normal; font-size: 8px; font-weight: 700; color: #fff; background: #d70015; border-radius: 999px; padding: 1px 5px; }
.app-week { background: #fff; display: grid; grid-template-columns: repeat(7, 1fr); padding: 8px 8px 4px; border-top: 1px solid var(--app-line); }
.app-week span { display: grid; justify-items: center; font-size: 11px; font-weight: 600; gap: 2px; }
.app-week small { font-size: 8px; color: var(--app-grey); font-weight: 500; }
.app-week b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 600; }
.app-week span.on b { background: var(--app-blue); color: #fff; }
.app-date { background: #fff; text-align: center; font-size: 9.5px; font-weight: 600; padding: 2px 0 8px; }
.app-sub { background: #fff; padding: 10px 14px 6px; font-size: 11.5px; font-weight: 600; border-top: 8px solid var(--app-bg); }
.app-barcode { background: #fff; display: flex; height: 26px; padding: 0 14px 10px; gap: 0; }
.app-barcode i { width: var(--w); background: repeating-linear-gradient(90deg, var(--c) 0 2px, transparent 2px 3px); }
.app-act { background: #fff; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--app-line); font-size: 11.5px; }
.app-act i { width: 8px; height: 8px; } .app-act span { flex: 1; } .app-act b { font-weight: 500; font-size: 11px; }
.app-room-row { background: #fff; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--app-line); font-size: 12.5px; }
.app-room-row span:nth-child(2) { flex: 1; } .app-room-row b { color: var(--app-grey); font-weight: 400; font-size: 11px; }
.app-star { color: #c7c7cc; } .app-star.on { color: var(--app-blue); }

/* Skeleton motion in the live view: a slow walk across the room. */
.sk-walk { animation: sk-walk 9s ease-in-out infinite alternate; }
.sk-leg-a { animation: sk-a 0.9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
.sk-leg-b { animation: sk-b 0.9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes sk-walk { from { transform: translate(105px, 112px) scale(1.45); } to { transform: translate(220px, 118px) scale(1.45); } }
@keyframes sk-a { from { transform: rotate(16deg); } to { transform: rotate(-16deg); } }
@keyframes sk-b { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }

/* ---- Notification banners --------------------------------------------------- */
.nt {
  display: flex; gap: 11px; align-items: flex-start; width: 100%;
  background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 20px; padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 16px 34px -10px rgba(11, 40, 42, 0.28);
  font-family: -apple-system, 'SF Pro Text', var(--font); color: #111; text-align: left;
}
.nt-ic { width: 36px; height: 36px; border-radius: 9px; flex: none; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px #eee; }
.nt-ic img { width: 28px; height: auto; }
.nt-ic svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nt-door { background: #1d9bf0; box-shadow: none; } .nt-lock { background: #3a4a4c; box-shadow: none; }
.nt-sound { background: #f48222; box-shadow: none; } .nt-voice { background: #056d70; box-shadow: none; }
.nt-txt { min-width: 0; flex: 1; }
.nt-top { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: #6b6b70; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 1px; }
.nt b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.nt small { display: block; font-size: 12px; color: #444; line-height: 1.35; }

/* A slow, endless column of notifications. */
.nt-feed { position: relative; height: 520px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.nt-track { display: flex; flex-direction: column; gap: 12px; animation: nt-scroll 32s linear infinite; }
.nt-feed:hover .nt-track { animation-play-state: paused; }
@keyframes nt-scroll { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 6px)); } }

/* ---- Hero stage: phone, glow and floating notifications --------------------- */
.stage { position: relative; display: grid; place-items: center; min-height: 600px; isolation: isolate; perspective: 1400px; }
.stage::before {
  content: ''; position: absolute; z-index: -1; width: 520px; height: 520px; border-radius: 50%;
  background: conic-gradient(from 200deg, rgba(244, 130, 34, 0.55), rgba(8, 169, 172, 0.45), rgba(244, 130, 34, 0.25), rgba(8, 169, 172, 0.5), rgba(244, 130, 34, 0.55));
  filter: blur(70px); opacity: 0.55; animation: stage-spin 24s linear infinite;
}
@keyframes stage-spin { to { transform: rotate(360deg); } }
.stage .app-phone { transform: rotateY(-14deg) rotateX(6deg) rotateZ(1deg); transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.stage:hover .app-phone { transform: rotateY(-6deg) rotateX(3deg); }
.stage-photo { position: absolute; z-index: -1; left: -4%; bottom: 6%; width: 46%; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(24, 39, 42, 0.4); transform: rotate(-5deg); }
.stage-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 30% center; }
.stage .nt { position: absolute; width: 300px; z-index: 3; opacity: 0; transform: translateY(18px) scale(0.96); animation: nt-pop 12s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.stage .nt.n1 { right: -6%; top: 14%; animation-delay: 0.6s; }
.stage .nt.n2 { left: -10%; top: 42%; animation-delay: 4.6s; }
.stage .nt.n3 { right: -2%; bottom: 14%; animation-delay: 8.6s; }
@keyframes nt-pop { 0% { opacity: 0; transform: translateY(18px) scale(0.96); } 5%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateY(-10px) scale(0.98); } }
.stage-chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.8);
  font-size: 0.78rem; font-weight: 700; color: var(--ink); box-shadow: 0 12px 26px -10px rgba(24, 39, 42, 0.25); animation: m-float 7s ease-in-out infinite;
}
.stage-chip i { width: 8px; height: 8px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.2); }
.stage-chip.c1 { left: 2%; top: 8%; } .stage-chip.c2 { right: 4%; top: 48%; animation-delay: -3s; }
@media (max-width: 960px) {
  .stage { min-height: 560px; }
  .stage .nt { width: 260px; } .stage .nt.n1 { right: 0; } .stage .nt.n2 { left: 0; } .stage .nt.n3 { right: 2%; }
}
@media (max-width: 640px) {
  .stage { min-height: 520px; transform: scale(0.86); margin: -30px 0; }
  .stage-photo { display: none; }
  .stage .nt { width: 250px; } .stage .nt.n2 { left: -4%; }
}

/* ---- Dark premium band (Smart Space's near-black card, in deep teal) ------- */
.dark-band {
  position: relative; isolation: isolate; overflow: clip; color: #fff;
  background: radial-gradient(120% 120% at 50% 0%, #0f3a3c 0%, #0a2627 45%, #071a1b 100%);
  padding: 120px 0;
}
.dark-band::before, .dark-band::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.dark-band::before { width: 620px; height: 620px; right: -160px; top: -200px; background: rgba(244, 130, 34, 0.32); animation: m-orb-a 20s ease-in-out infinite alternate; }
.dark-band::after { width: 560px; height: 560px; left: -200px; bottom: -220px; background: rgba(8, 169, 172, 0.34); animation: m-orb-b 24s ease-in-out infinite alternate; }
.dark-band .svc-eyebrow { color: #ffb066; }
.dark-band h2 { color: #fff !important; }
.dark-band p { color: rgba(255, 255, 255, 0.76); }
.dark-band .svc-head h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.dark-band .svc-head::before { background: radial-gradient(closest-side, rgba(244, 130, 34, 0.18), rgba(244, 130, 34, 0)); }
.dark-grid-bg { position: absolute; inset: 0; z-index: -1; opacity: 0.25; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%); }
.glass {
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px; padding: 24px 24px 22px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background 0.3s ease, border-color 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.glass:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 176, 102, 0.35); transform: translateY(-3px); }
.glass h3 { color: #fff; font-size: 1.05rem; margin: 14px 0 6px; }
.glass p { font-size: 0.93rem; margin: 0; color: rgba(255, 255, 255, 0.7); }
.glass .svc-ico { background: rgba(244, 130, 34, 0.14); border-color: rgba(244, 130, 34, 0.3); color: #ffb066; }

/* Three phones, the middle one raised. */
.app-trio { display: flex; justify-content: center; align-items: flex-end; gap: 36px; margin: 64px 0 56px; }
.app-trio .app-phone:nth-child(2) { transform: translateY(-36px) scale(1.04); }
.app-trio .app-phone:nth-child(1) { transform: rotate(-4deg) translateY(10px); }
.app-trio .app-phone:nth-child(3) { transform: rotate(4deg) translateY(10px); }
.app-trio-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1100px) { .app-trio { gap: 18px; } .app-trio .app-phone { width: 250px; } }
@media (max-width: 860px) {
  .app-trio { overflow-x: auto; justify-content: flex-start; scroll-snap-type: x mandatory; padding: 40px 24px 20px; margin: 30px -24px; align-items: center; }
  .app-trio .app-phone { scroll-snap-align: center; transform: none !important; width: 260px; }
  .app-trio-caps { grid-template-columns: 1fr; }
}

/* ---- Scroll story: one phone stays put while the steps scroll past -------- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.story-sticky { position: sticky; top: 110px; display: grid; place-items: center; min-height: 640px; isolation: isolate; }
.story-sticky::before { content: ''; position: absolute; z-index: -1; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(244, 130, 34, 0.35), rgba(8, 169, 172, 0.2) 50%, transparent 70%); filter: blur(30px); }
.story-steps { padding: 120px 0 200px; }
.story-step { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.28; transition: opacity 0.5s ease; }
.story-step.is-on { opacity: 1; }
.story-step .num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: var(--ink); font-weight: 800; margin-bottom: 18px; box-shadow: 0 0 0 8px rgba(244, 130, 34, 0.15), 0 10px 26px rgba(244, 130, 34, 0.35); }
.story-step h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; letter-spacing: -0.035em !important; margin: 0 0 12px; }
.story-step p { font-size: 1.08rem; max-width: 460px; margin: 0; }
.dark-band .story-step h3 { color: #fff; }
.app-story-phone .app-screen { opacity: 0; transform: scale(0.98); transition: opacity 0.6s ease, transform 0.6s ease; }
.app-story-phone[data-screen="live"] .app-s-live, .app-story-phone[data-screen="alert"] .app-s-alert, .app-story-phone[data-screen="activity"] .app-s-activity { opacity: 1; transform: none; }
.story-ping { position: absolute; z-index: 4; top: 120px; left: 50%; width: 300px; margin-left: -150px; opacity: 0; transform: translateY(-20px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.story-sticky[data-screen="ping"] .story-ping { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .story { grid-template-columns: 1fr; gap: 0; }
  .story-sticky { top: 70px; min-height: 0; padding: 20px 0; z-index: 2; }
  .story-sticky .app-phone { width: 210px; }
  .story-step { min-height: 60vh; position: relative; z-index: 3; }
  .story-step > div { background: rgba(251, 250, 247, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 20px; padding: 20px; border: 1px solid var(--line); }
  .dark-band .story-step > div { background: rgba(7, 26, 27, 0.85); border-color: rgba(255, 255, 255, 0.1); }
  .story-ping { width: 250px; margin-left: -125px; top: 70px; }
}

/* ---- Trust strip under the homepage top ------------------------------------ */
.trust-strip { border-bottom: 1px solid var(--line); background: #fff; }
.trust-strip ul { list-style: none; margin: 0 auto; padding: 22px 24px; max-width: 1180px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; }
.trust-strip li { display: inline-flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.trust-strip svg { width: 22px; height: 22px; stroke: var(--orange-text); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Rotating gradient edge for the cards that matter ---------------------- */
@property --edge { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.edge-glow { position: relative; isolation: isolate; }
.edge-glow::before {
  content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--edge), rgba(244, 130, 34, 0), rgba(244, 130, 34, 0.9), rgba(8, 169, 172, 0.8), rgba(244, 130, 34, 0) 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: edge-spin 6s linear infinite;
}
@keyframes edge-spin { to { --edge: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .sk-walk, .sk-leg-a, .sk-leg-b, .nt-track, .stage::before, .stage .nt, .stage-chip, .dark-band::before, .dark-band::after, .edge-glow::before { animation: none !important; }
  .stage .nt.n1 { opacity: 1; transform: none; }
  .story-step { opacity: 1; }
}

.app-hist { background: #fff; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--app-line); }
.app-hist i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.app-hist span { flex: 1; min-width: 0; } .app-hist b { display: block; font-size: 11.5px; font-weight: 600; } .app-hist small { font-size: 9.5px; color: var(--app-grey); }
.app-hist em { font-style: normal; font-size: 9.5px; color: #1f7a3e; font-weight: 600; }
.dark-band .svc-list li { color: rgba(255, 255, 255, 0.88); }
.dark-band .svc-list svg { background: rgba(244, 130, 34, 0.18); color: #ffb066; }
.svc-hero-media { position: relative; }
.svc-hero-note { position: absolute; z-index: 3; left: -28px; top: -26px; width: 300px; animation: m-float 7s ease-in-out infinite; }
@media (max-width: 960px) { .svc-hero-note { left: 10px; top: -22px; width: 270px; } }
.bp-hero-film.is-phone .app-phone { width: 280px; }
@media (max-width: 640px) { .bp-hero-film.is-phone .app-phone { transform: scale(0.85); margin: -40px 0; } }
@media (max-width: 640px) {
  .stage { transform: none; margin: 0; min-height: 0; padding: 70px 0 10px; }
  .stage .app-phone { transform: none; width: 250px; }
  .stage .nt.n2, .stage .nt.n3, .stage-chip { display: none; }
  .stage .nt.n1 { left: 50%; right: auto; top: 0; width: 290px; margin-left: -145px; animation: none; opacity: 1; transform: none; }
}
.svc-hero-product { display: block !important; position: absolute; z-index: 3; right: -26px; bottom: -40px; width: 104px; filter: drop-shadow(0 24px 30px rgba(24, 39, 42, 0.35)); animation: m-float 8s ease-in-out infinite; animation-delay: -2s; }
.svc-hero-product img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .svc-hero-product { width: 74px; right: 4px; bottom: -30px; } }

/* ============================================================================
   Round 3: Oscar, "keep the subtle lady falling in the background ... shaded
   background ... too much white going on".
   ========================================================================= */

/* The hero photo, full bleed behind the top of the page, shaded so the words
   on the left stay crisp and she shows through on the right. */
.home-hero.has-photo { background: #e9e4dc; }
.hero-photo-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-photo-bg picture, .hero-photo-bg img { display: block !important; width: 100%; height: 100%; }
.hero-photo-bg img { object-fit: cover; object-position: 30% 40%; filter: saturate(0.85); animation: m-push 24s ease-in-out infinite alternate; }
/* Lighter by a step on 15 Oct 2026: Nigel could barely see her behind the
   words. The left edge still carries most of the wash, because the headline
   and the line under it sit over her; the text's contrast against the real
   photo was measured after the change (scratchpad hero-contrast check). */
.hero-photo-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(251, 250, 247, 0.92) 0%, rgba(251, 250, 247, 0.78) 34%, rgba(251, 250, 247, 0.46) 62%, rgba(233, 244, 243, 0.4) 100%),
    linear-gradient(180deg, rgba(251, 250, 247, 0) 78%, rgba(251, 250, 247, 0.85) 100%);
}
.home-hero.has-photo::before, .home-hero.has-photo::after { z-index: -1; opacity: 0.45; }
@media (max-width: 960px) {
  .hero-photo-bg img { object-position: 20% 30%; }
  .hero-photo-bg::after { background: linear-gradient(180deg, rgba(251, 250, 247, 0.93) 0%, rgba(251, 250, 247, 0.86) 55%, rgba(251, 250, 247, 0.7) 100%); }
}

/* Less white: sections take warm sand or a teal mist; cards stay white on top. */
body { background: #f6f1e9 !important; }
.svc-section { background: linear-gradient(180deg, #f6f1e9 0%, #f3ede3 100%); }
.svc-section-white { background: linear-gradient(180deg, #eaf3f1 0%, #e4efed 100%) !important; border-color: #d7e6e3 !important; }
.svc-hero:not(.has-film), .svc-hero.has-film, .page-header, .bp-hero, .story-hero, .results-hero, .cs-hero, .ec-hero, .ib-hero { background-color: #f3ede3 !important; }
.trust-strip { background: var(--teal-deep); border-bottom: 0; }
.trust-strip li { color: rgba(255, 255, 255, 0.9); }
.trust-strip svg { stroke: #ffb066; }
.svc-card, .svc-related-card, .home-steps li, .about-facts > div { border-color: rgba(24, 39, 42, 0.08) !important; }

/* The footer goes dark, like Smart Space's; the logo sits on its own white tile. */
.footer { background: #0a2223 !important; border-top: 0 !important; color: rgba(255, 255, 255, 0.75); }
.footer h2, .footer h3, .footer h4, .footer-col-title { color: #ffb066 !important; }
.footer-links a, .footer a { color: rgba(255, 255, 255, 0.78) !important; }
.footer-links a:hover, .footer a:hover { color: #fff !important; }
.footer-bottom { border-color: rgba(255, 255, 255, 0.12) !important; }
.footer-bottom, .footer-bottom p { color: rgba(255, 255, 255, 0.6) !important; }
.footer-logo { background: #fff; border-radius: 18px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.footer-logo img { width: 120px; }
.sv-final-cta + footer, .sv-final-cta ~ .footer { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }

/* ---- Real stories ----------------------------------------------------------- */
.rs-faces { position: relative; min-height: 440px; }
.rs-face { position: absolute; display: grid; justify-items: center; gap: 12px; padding: 22px 26px 18px; background: #fff; border-radius: 28px;
  box-shadow: 0 2px 4px rgba(24, 39, 42, 0.05), 0 30px 60px -20px rgba(24, 39, 42, 0.3); }
.rs-face img { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 6px var(--orange-tint); }
.rs-face span { font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.rs-joe { left: 4%; top: 8%; transform: rotate(-4deg); animation: m-float 8s ease-in-out infinite; }
.rs-mary { right: 4%; bottom: 4%; transform: rotate(3deg); animation: m-float 9s ease-in-out infinite; animation-delay: -3s; }
.rs-mary img { box-shadow: 0 0 0 6px var(--teal-tint); }
.rs-faces .nt { position: absolute; width: 290px; z-index: 2; }
.rs-n1 { right: 0; top: 0; animation: m-float 7s ease-in-out infinite; }
.rs-n2 { left: 0; bottom: 6%; animation: m-float 7s ease-in-out infinite; animation-delay: -2s; }
.rs-media { position: relative; }
.rs-phone { position: relative; display: grid; place-items: center; }
.rs-phone .svc-hero-note { left: auto; right: -10px; top: 40px; }
.rs-flip { grid-template-columns: 1fr 1fr; }
@media (max-width: 960px) {
  .rs-faces { min-height: 400px; }
  .rs-flip .home-feature-media { order: 2; }
}
@media (max-width: 640px) {
  .rs-faces { min-height: 380px; }
  .rs-face { padding: 16px 18px 14px; } .rs-face img { width: 96px; height: 96px; }
  .rs-faces .nt { width: 250px; }
  .rs-phone .app-phone { width: 250px; }
  .rs-phone .svc-hero-note { right: 0; top: -10px; }
}

/* ---- Joe's and Mary's pages -------------------------------------------------- */
.story-hero {
  background: radial-gradient(120% 120% at 50% 0%, #0f3a3c 0%, #0a2627 50%, #071a1b 100%) !important;
  color: #fff !important; padding: 150px 0 96px !important; position: relative; overflow: clip; isolation: isolate; border-bottom: 0 !important;
}
.story-hero::before { content: ''; display: block !important; position: absolute; z-index: -1; width: 620px; height: 620px; right: -160px; top: -220px; border-radius: 50%; background: rgba(244, 130, 34, 0.3); filter: blur(80px); animation: m-orb-a 20s ease-in-out infinite alternate; }
.story-hero::after { content: ''; display: block !important; position: absolute; z-index: -1; width: 520px; height: 520px; left: -200px; bottom: -240px; border-radius: 50%; background: rgba(8, 169, 172, 0.32); filter: blur(80px); animation: m-orb-b 24s ease-in-out infinite alternate; }
.story-hero h1 { color: #fff !important; }
.story-hero p { color: rgba(255, 255, 255, 0.78) !important; }
.story-hero .risk-label { background: rgba(244, 130, 34, 0.16) !important; color: #ffb066 !important; border-color: rgba(244, 130, 34, 0.35) !important; }
.story-avatar { display: block !important; width: 112px; margin-bottom: 22px; }
.story-avatar img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12), 0 0 0 12px rgba(244, 130, 34, 0.18), 0 20px 40px rgba(0, 0, 0, 0.35); }
.story-hero .family-requests { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none !important; }
.story-hero .family-requests h2 { color: #ffb066 !important; }
.story-hero .family-requests li { color: rgba(255, 255, 255, 0.9) !important; }
.tabs-section { background: linear-gradient(180deg, #f6f1e9, #f3ede3) !important; padding: 88px 0 !important; }
.tabs-section .tab-buttons { gap: 10px; }
.tabs-section .tab-btn { background: #fff !important; border: 1px solid var(--line) !important; color: var(--ink) !important; font-weight: 700 !important; padding: 12px 20px !important; box-shadow: var(--shadow-card); }
.tabs-section .tab-btn.active { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; box-shadow: 0 10px 24px rgba(24, 39, 42, 0.25); }
.tabs-section .tab-panel { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 40px; margin-top: 30px; box-shadow: var(--shadow-card); }
.tabs-section .tab-content-grid { align-items: center; gap: 48px; }
.tabs-section .tab-content-grid h3 { font-size: 1.6rem !important; letter-spacing: -0.03em !important; }
.tab-visual { display: grid; place-items: center; }
.tab-visual .film { width: 100%; }
.tab-visual .app-phone { width: 260px; }
.installation-section { background: linear-gradient(180deg, #eaf3f1, #e4efed) !important; }
.zone-card { background: #fff !important; }
.cost-section { background: linear-gradient(180deg, #eaf3f1, #e4efed) !important; }
.stories-section, section[style*="background: var(--light-gray)"] { background: linear-gradient(180deg, #f6f1e9, #f3ede3) !important; }
.faq-section { background: #fff !important; }
@media (max-width: 760px) { .tabs-section .tab-panel { padding: 24px; } .tab-visual .app-phone { width: 230px; } }
.tab-content-grid > .tab-visual { display: grid !important; }
.tabs-section .tab-content-grid { grid-template-columns: 1.05fr 1fr !important; }
@media (max-width: 860px) { .tabs-section .tab-content-grid { grid-template-columns: 1fr !important; } }

/* ---- Contact: a dark top with glass tiles; the form floats over it -------- */
.cp { position: relative; isolation: isolate; overflow: clip;
  background: linear-gradient(180deg, #0a2627 0, #0b3133 800px, #f6f1e9 800px, #f3ede3 100%) !important; }
.cp::before { content: ''; position: absolute; z-index: -1; width: 640px; height: 640px; right: -180px; top: -240px; border-radius: 50%; background: rgba(244, 130, 34, 0.3); filter: blur(80px); animation: m-orb-a 20s ease-in-out infinite alternate; }
.cp::after { content: ''; position: absolute; z-index: -1; width: 520px; height: 520px; left: -220px; top: 120px; border-radius: 50%; background: rgba(8, 169, 172, 0.3); filter: blur(80px); animation: m-orb-b 24s ease-in-out infinite alternate; }
.cp-head h1 { color: #fff !important; font-size: clamp(2.4rem, 5vw, 3.8rem) !important; letter-spacing: -0.045em !important; }
.cp-head p { color: rgba(255, 255, 255, 0.78) !important; font-size: 1.12rem; }
.cp-info .cp-h2 { color: #ffb066 !important; font-size: 0.78rem !important; letter-spacing: 0.14em !important; text-transform: uppercase; }
.cp-item { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 18px !important; padding: 14px 16px !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform 0.3s ease, border-color 0.3s ease; }
.cp-item:hover { transform: translateY(-2px); border-color: rgba(255, 176, 102, 0.4) !important; }
.cp-icon { background: rgba(244, 130, 34, 0.16) !important; color: #ffb066 !important; border-radius: 12px !important; }
.cp-label { color: rgba(255, 255, 255, 0.6) !important; }
.cp-value, a.cp-value { color: #fff !important; font-weight: 700 !important; }
.cp-promise { margin: 18px 0; animation: m-float 7s ease-in-out infinite; }
.cp-help { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 20px !important; box-shadow: var(--shadow-card) !important; }
.cp-card { border-radius: 28px !important; border: 1px solid rgba(24, 39, 42, 0.08) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 40px 80px -20px rgba(7, 26, 27, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.4) !important; }
.cp-card input, .cp-card select, .cp-card textarea { border-radius: 12px !important; border-color: var(--line) !important; background: #fbfaf7 !important; }
.cp-card input:focus, .cp-card select:focus, .cp-card textarea:focus { border-color: var(--teal) !important; box-shadow: 0 0 0 3px rgba(5, 109, 112, 0.15) !important; outline: none; background: #fff !important; }
.cp-card button[type="submit"], .cp-card .cp-submit { background: var(--orange) !important; color: var(--ink) !important; border-radius: 999px !important; box-shadow: 0 10px 26px rgba(244, 130, 34, 0.32) !important; font-weight: 700 !important; }
@media (max-width: 900px) { .cp { background: linear-gradient(180deg, #0a2627 0, #0b3133 760px, #f6f1e9 760px) !important; } }

/* ---- Booking pages: a dark top, the calendar and form float over it ------- */
.ib-hero { position: relative; isolation: isolate; overflow: clip;
  background: radial-gradient(120% 120% at 50% 0%, #0f3a3c 0%, #0a2627 55%, #0a2627 100%) !important; color: #fff; padding-bottom: 150px !important; border-bottom: 0 !important; }
.ib-hero::before { content: ''; position: absolute; z-index: -1; width: 640px; height: 640px; right: -180px; top: -240px; border-radius: 50%; background: rgba(244, 130, 34, 0.3); filter: blur(80px); animation: m-orb-a 20s ease-in-out infinite alternate; }
.ib-hero::after { content: ''; position: absolute; z-index: -1; width: 520px; height: 520px; left: -220px; bottom: -200px; border-radius: 50%; background: rgba(8, 169, 172, 0.3); filter: blur(80px); animation: m-orb-b 24s ease-in-out infinite alternate; }
.ib-eyebrow { color: #ffb066 !important; background: rgba(244, 130, 34, 0.14) !important; border: 1px solid rgba(244, 130, 34, 0.3) !important; border-radius: 999px !important; }
.ib-h1 { color: #fff !important; letter-spacing: -0.045em !important; }
.ib-h1 .accent { color: #ffb066 !important; background: none !important; -webkit-text-fill-color: #ffb066 !important; }
.ib-sub { color: rgba(255, 255, 255, 0.78) !important; }
.ib-price-pill { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; color: rgba(255, 255, 255, 0.9) !important; }
.ib-price-pill .free { color: #ffb066 !important; }
.ib-trust { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: rgba(255, 255, 255, 0.88) !important; }
.ib-trust svg { color: #ffb066 !important; stroke: #ffb066 !important; }
.ib-booking-section { position: relative; margin-top: -120px !important; background: transparent !important; padding-top: 0 !important; z-index: 2; }
.book-cal-card, .book-form-card { border-radius: 28px !important; border: 1px solid rgba(24, 39, 42, 0.08) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 40px 80px -24px rgba(7, 26, 27, 0.4) !important; background: #fff !important; }
.book-form-card input, .book-form-card select, .book-form-card textarea { border-radius: 12px !important; background: #fbfaf7 !important; }
.book-form-card input:focus, .book-form-card select:focus, .book-form-card textarea:focus { border-color: var(--teal) !important; box-shadow: 0 0 0 3px rgba(5, 109, 112, 0.15) !important; background: #fff !important; }
.cal-nav-btn { border-radius: 999px !important; }
.cal-day.selected, .cal-day.is-selected, .cal-day[aria-pressed="true"], .cal-time.selected, .cal-time[aria-pressed="true"] { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; box-shadow: 0 10px 22px rgba(24, 39, 42, 0.25) !important; }
.ib-how { background: linear-gradient(180deg, #eaf3f1, #e4efed) !important; }
.ib-included { background: linear-gradient(180deg, #f6f1e9, #f3ede3) !important; }
.ib-quote-section { background: linear-gradient(180deg, #eaf3f1, #e4efed) !important; }
.install-booking-page main, .ib-page main { background: #f3ede3; }
.home-hero.has-photo .home-trust { color: #3f4b4f; }
.footer p, .footer .footer-brand p { color: rgba(255, 255, 255, 0.72) !important; }

/* Round 7: more app screens, so pages don't all show the same fall alert */
.app-headline.app-amber { color: #a65d00; }
.app-seg { background: #fff; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin: 0; padding: 8px 10px; border-bottom: 1px solid var(--app-line); }
.app-seg span { text-align: center; font-size: 10px; font-weight: 600; padding: 5px 0; border-radius: 7px; color: var(--app-grey); background: var(--app-bg); }
.app-seg span.on { background: var(--app-blue); color: #fff; }
.app-hist em.app-open { color: #d70015; font-weight: 700; }
.app-chart { background: #fff; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 6px; height: 120px; padding: 6px 14px 8px; }
.app-chart span { display: grid; grid-template-rows: 1fr auto; height: 100%; justify-items: center; gap: 4px; }
.app-chart i { align-self: end; width: 100%; height: var(--h); border-radius: 5px 5px 2px 2px; background: #c9d6ee; }
.app-chart span.hi i { background: var(--app-blue); }
.app-chart small { font-size: 8.5px; color: var(--app-grey); }
.app-callout { background: #fff; margin: 0; padding: 10px 14px 12px; border-top: 1px solid var(--app-line); display: grid; gap: 2px; }
.app-callout b { font-size: 13px; color: #18272a; } .app-callout small { font-size: 10.5px; color: var(--app-grey); }
.app-person { background: #fff; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--app-line); }
.app-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; flex: none; }
.app-person span:nth-child(2) { flex: 1; display: grid; } .app-person b { font-size: 12px; } .app-person small { font-size: 9.5px; color: var(--app-grey); }
.app-person em { font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--app-blue); background: #eaf1fd; padding: 3px 7px; border-radius: 999px; }
#mary .rs-phone .svc-hero-note { top: auto; bottom: 22%; }
@media (max-width: 960px) { #mary .rs-phone .svc-hero-note { bottom: 14%; } }

/* One stick figure everywhere: thin white lines, as in the maker's own footage that the other
   app screens and the top film use (Nigel, 15 Oct: one colour, not the maker's multicoloured
   figure; 28 Oct: the green figure's lines were too bold). A fine dark edge keeps it clear on any room. */
.app-room .sk line, .app-room .sk circle[fill="none"] { stroke: #fff !important; stroke-width: 2px; }
.app-room .sk { filter: drop-shadow(0 0 1.2px rgba(0, 0, 0, 0.75)); }