/* ============================================================================
   Round 5, 13 October 2026. Oscar: the room photos "don't tell us anything".
   Each section now sits on a photo that matches what it says: family, a
   carer's visit, a call on the phone, a lamp at night. Pexels licence (free
   for commercial use, no credit needed). They are atmosphere only: none sits
   beside Joe or Mary, so nobody reads a stock face as a real customer.
   ========================================================================= */
:root {
  --p-family: image-set(url('/images/bgp-family.webp?v=2') type('image/webp'), url('/images/bgp-family.jpg?v=2') type('image/jpeg'));
  --p-care: image-set(url('/images/bgp-couple.webp?v=2') type('image/webp'), url('/images/bgp-couple.jpg?v=2') type('image/jpeg'));
  --p-couple: image-set(url('/images/bgp-couple.webp?v=2') type('image/webp'), url('/images/bgp-couple.jpg?v=2') type('image/jpeg'));
  --p-living: image-set(url('/images/bgp-living.webp?v=2') type('image/webp'), url('/images/bgp-living.jpg?v=2') type('image/jpeg'));
  --p-tea: image-set(url('/images/bgp-tea.webp?v=2') type('image/webp'), url('/images/bgp-tea.jpg?v=2') type('image/jpeg'));
  --p-phone: image-set(url('/images/bgp-phone.webp?v=2') type('image/webp'), url('/images/bgp-phone.jpg?v=2') type('image/jpeg'));
  --p-app: image-set(url('/images/bgp-app.webp?v=2') type('image/webp'), url('/images/bgp-app.jpg?v=2') type('image/jpeg'));
  --p-sofa: image-set(url('/images/bgp-sofa.webp?v=2') type('image/webp'), url('/images/bgp-sofa.jpg?v=2') type('image/jpeg'));
  --p-recovery: image-set(url('/images/bgp-recovery.webp?v=2') type('image/webp'), url('/images/bgp-recovery.jpg?v=2') type('image/jpeg'));
  --p-night: image-set(url('/images/bgp-night.webp?v=2') type('image/webp'), url('/images/bgp-night.jpg?v=2') type('image/jpeg'));
  --p-kitchen: image-set(url('/images/bgp-kitchen.webp?v=2') type('image/webp'), url('/images/bgp-kitchen.jpg?v=2') type('image/jpeg'));
  /* A lighter wash than round 4, so the people show through. */
  --wash-sand: linear-gradient(180deg, rgba(246, 241, 233, 0.84) 0%, rgba(243, 237, 227, 0.64) 55%, rgba(246, 241, 233, 0.78) 100%);
  --wash-mist: linear-gradient(180deg, rgba(234, 243, 241, 0.84) 0%, rgba(226, 238, 236, 0.64) 55%, rgba(234, 243, 241, 0.78) 100%);
  --wash-dark: linear-gradient(90deg, rgba(10, 38, 39, 0.9) 0%, rgba(10, 38, 39, 0.82) 45%, rgba(7, 26, 27, 0.7) 100%);
}

/* Default rotation for any light section a page does not name below. */
main > .svc-section:nth-of-type(4n+1) { background-image: var(--wash-sand), var(--p-couple) !important; }
main > .svc-section:nth-of-type(4n+2) { background-image: var(--wash-sand), var(--p-tea) !important; }
main > .svc-section:nth-of-type(4n+3) { background-image: var(--wash-sand), var(--p-care) !important; }
main > .svc-section:nth-of-type(4n) { background-image: var(--wash-sand), var(--p-sofa) !important; }
main > .svc-section-white:nth-of-type(odd) { background-image: var(--wash-mist), var(--p-living) !important; }
main > .svc-section-white:nth-of-type(even) { background-image: var(--wash-mist), var(--p-family) !important; }

/* Homepage and SmartGuardian: each section on the picture that fits it. */
#the-app { background: var(--wash-dark), var(--p-app) center / cover no-repeat !important; }
#how-it-works { background-image: var(--wash-sand), var(--p-family) !important; }
#services { background-image: var(--wash-mist), var(--p-couple) !important; }
#start { background-image: var(--wash-sand), var(--p-care) !important; }
#alerts { background: var(--wash-dark), var(--p-phone) center / cover no-repeat !important; }
#stories { background-image: var(--wash-mist), var(--p-living) !important; }
#guides { background-image: var(--wash-sand), var(--p-tea) !important; }
#price { background-image: var(--wash-mist), var(--p-sofa) !important; }
.proof { background: linear-gradient(90deg, rgba(7, 26, 27, 0.94), rgba(11, 59, 61, 0.9)), var(--p-sofa) center / cover no-repeat !important; }
.sv-final-cta { background-image: radial-gradient(55% 90% at 100% 0%, rgba(244, 130, 34, 0.22), rgba(244, 130, 34, 0) 70%), linear-gradient(180deg, rgba(11, 59, 61, 0.88), rgba(7, 30, 31, 0.92)), var(--p-family) !important; }

/* Service page tops: the scene each one is about. */
.svc-hero.has-film { background-image: linear-gradient(90deg, rgba(246, 241, 233, 0.95) 0%, rgba(246, 241, 233, 0.8) 45%, rgba(234, 243, 241, 0.5) 100%), var(--p-living) !important; }
body:has(.film-light) .svc-hero.has-film { background-image: linear-gradient(90deg, rgba(246, 241, 233, 0.95) 0%, rgba(246, 241, 233, 0.78) 45%, rgba(234, 243, 241, 0.35) 100%), var(--p-night) !important; }
body:has(.film-door) .svc-hero.has-film { background-image: linear-gradient(90deg, rgba(246, 241, 233, 0.95) 0%, rgba(246, 241, 233, 0.8) 45%, rgba(234, 243, 241, 0.5) 100%), var(--p-care) !important; }
body:has(.film-voice) .svc-hero.has-film { background-image: linear-gradient(90deg, rgba(246, 241, 233, 0.95) 0%, rgba(246, 241, 233, 0.8) 45%, rgba(234, 243, 241, 0.5) 100%), var(--p-phone) !important; }
body:has(.film-sound) .svc-hero.has-film { background-image: linear-gradient(90deg, rgba(246, 241, 233, 0.95) 0%, rgba(246, 241, 233, 0.8) 45%, rgba(234, 243, 241, 0.5) 100%), var(--p-kitchen) !important; }
body:has(.film-lock) .svc-hero.has-film { background-image: linear-gradient(90deg, rgba(246, 241, 233, 0.95) 0%, rgba(246, 241, 233, 0.8) 45%, rgba(234, 243, 241, 0.5) 100%), var(--p-care) !important; }
.svc-hero:not(.has-film):not(.home-hero) { background-image: linear-gradient(90deg, rgba(246, 241, 233, 0.95) 0%, rgba(246, 241, 233, 0.8) 45%, rgba(234, 243, 241, 0.5) 100%), var(--p-couple) !important; }
.page-header, .bp-hero, .results-hero, .ec-hero { background-image: linear-gradient(90deg, rgba(246, 241, 233, 0.95) 0%, rgba(246, 241, 233, 0.82) 45%, rgba(234, 243, 241, 0.55) 100%), var(--p-tea) !important; }
.ec-hero { background-image: linear-gradient(90deg, rgba(246, 241, 233, 0.95) 0%, rgba(246, 241, 233, 0.82) 45%, rgba(234, 243, 241, 0.55) 100%), var(--p-recovery) !important; }

/* Contact and booking: a call, and a visit. */
.cp { background-image: linear-gradient(180deg, rgba(10, 38, 39, 0.9) 0, rgba(11, 49, 51, 0.88) 800px, rgba(246, 241, 233, 0.88) 800px, rgba(243, 237, 227, 0.88) 100%), var(--p-phone) !important; background-position: center top !important; }
@media (max-width: 900px) { .cp { background-image: linear-gradient(180deg, rgba(10, 38, 39, 0.9) 0, rgba(11, 49, 51, 0.88) 760px, rgba(246, 241, 233, 0.88) 760px), var(--p-phone) !important; } }
.ib-hero { background-image: radial-gradient(120% 120% at 50% 0%, rgba(15, 58, 60, 0.86) 0%, rgba(10, 38, 39, 0.9) 55%, rgba(7, 26, 27, 0.94) 100%), var(--p-care) !important; }
.ib-how { background-image: var(--wash-mist), var(--p-care) !important; }
.ib-included { background-image: var(--wash-sand), var(--p-sofa) !important; }
.ib-quote-section { background-image: var(--wash-mist), var(--p-family) !important; }

/* Story pages: rooms and objects only, no stock faces beside Joe or Mary. */
.story-hero { background-image: radial-gradient(120% 120% at 50% 0%, rgba(15, 58, 60, 0.86) 0%, rgba(10, 38, 39, 0.9) 55%, rgba(7, 26, 27, 0.94) 100%), var(--p-night) !important; }
.tabs-section, .stories-section, main > section[style*="light-gray"] { background-image: var(--wash-sand), var(--p-kitchen) !important; }
.cost-section, .installation-section { background-image: var(--wash-mist), var(--p-night) !important; }
body:has(.rs-pair) #joe { background-image: var(--wash-sand), var(--p-kitchen) !important; }
body:has(.rs-pair) #mary { background: var(--wash-dark), var(--p-night) center / cover no-repeat !important; }
body:has(.rs-pair) .svc-hero { background-image: linear-gradient(90deg, rgba(246, 241, 233, 0.95) 0%, rgba(246, 241, 233, 0.8) 45%, rgba(234, 243, 241, 0.5) 100%), var(--p-family) !important; }

/* Section headings sit on a soft paper glow so they stay crisp over a face. */
.svc-head h2, .svc-head p { text-shadow: 0 0 24px rgba(246, 241, 233, 0.9), 0 0 2px rgba(246, 241, 233, 0.8); }
.dark-band .svc-head h2, .dark-band .svc-head p { text-shadow: 0 2px 20px rgba(7, 26, 27, 0.8); }

/* ---------- Round 6: pages rebuilt last (install support, 404, payment, hubs) ---------- */

/* Install support: an install moving through its four stages */
body:has(.film-journey) .svc-hero.has-film { background-image: linear-gradient(90deg, rgba(246, 241, 233, 0.95) 0%, rgba(246, 241, 233, 0.8) 45%, rgba(234, 243, 241, 0.4) 100%), var(--p-care) !important; }
.film-journey { position: relative; max-width: 440px; margin-inline: auto; padding: 26px 26px 30px; border-radius: 26px; color: #eaf4f3;
  background: linear-gradient(160deg, #0f4a4c 0%, #0b3b3d 55%, #082c2e 100%);
  box-shadow: 0 40px 80px -30px rgba(11, 59, 61, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; overflow: hidden; isolation: isolate; }
.film-journey::before { content: ""; position: absolute; z-index: -1; width: 320px; height: 320px; right: -120px; top: -140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 130, 34, 0.35), transparent 65%); }
.fj-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.fj-head img { width: 38px; height: auto; padding: 6px; border-radius: 11px; background: #fff; }
.fj-head b { display: block; font-size: 1.05rem; color: #fff; }
.fj-head small { font-size: 0.8rem; color: #b9d3d1; }
.fj-steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 18px; }
.fj-steps::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: rgba(255, 255, 255, 0.14); }
.fj-steps::after { content: ""; position: absolute; left: 13px; top: 14px; width: 2px; height: calc(100% - 28px); background: linear-gradient(#f48222, #ffb36b);
  transform-origin: top; transform: scaleY(1); }
.fj-steps li { position: relative; display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; align-items: center; }
.fj-steps i { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: #f48222; box-shadow: 0 0 0 5px rgba(244, 130, 34, 0.18); }
.fj-steps i::after { content: ""; position: absolute; left: 9px; top: 6px; width: 7px; height: 12px; border: solid #18272a; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.fj-steps b { display: block; color: #fff; font-size: 0.98rem; }
.fj-steps small { display: block; color: #b9d3d1; font-size: 0.82rem; line-height: 1.4; }
.fj-steps em { width: 8px; height: 8px; border-radius: 50%; background: #2fd07a; box-shadow: 0 0 10px #2fd07a; }
.fj-done { position: absolute; right: 22px; top: 26px; padding: 6px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: #0b3b3d; background: #9ff0c4; }
@media (prefers-reduced-motion: no-preference) {
  .film-journey.is-playing .fj-steps::after { animation: fj-line 9s cubic-bezier(.6,0,.3,1) infinite; }
  .film-journey.is-playing .fj-steps li { animation: fj-step 9s ease infinite; }
  .film-journey.is-playing .fj-steps li.s2 { animation-name: fj-step2; }
  .film-journey.is-playing .fj-steps li.s3 { animation-name: fj-step3; }
  .film-journey.is-playing .fj-steps li.s4 { animation-name: fj-step4; }
  .film-journey.is-playing .fj-done { animation: fj-done 9s ease infinite; }
}
@keyframes fj-line { 0% { transform: scaleY(0); } 10% { transform: scaleY(0); } 70% { transform: scaleY(1); } 92% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes fj-step  { 0%, 4% { opacity: .35; transform: translateX(-6px); } 10%, 92% { opacity: 1; transform: none; } 100% { opacity: .35; } }
@keyframes fj-step2 { 0%, 26% { opacity: .35; transform: translateX(-6px); } 32%, 92% { opacity: 1; transform: none; } 100% { opacity: .35; } }
@keyframes fj-step3 { 0%, 46% { opacity: .35; transform: translateX(-6px); } 52%, 92% { opacity: 1; transform: none; } 100% { opacity: .35; } }
@keyframes fj-step4 { 0%, 64% { opacity: .35; transform: translateX(-6px); } 70%, 92% { opacity: 1; transform: none; } 100% { opacity: .35; } }
@keyframes fj-done  { 0%, 72% { opacity: 0; transform: scale(.8); } 76%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.is-steps { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .is-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .is-steps { grid-template-columns: 1fr; } }
.is-band { background: var(--wash-dark), var(--p-family) center / cover no-repeat !important; }
.is-notes { display: grid; gap: 14px; max-width: 380px; margin-inline: auto; }
.is-notes .nt:nth-child(2) { margin-left: 28px; }
.is-notes .nt:nth-child(3) { margin-left: 56px; }
@media (max-width: 560px) { .is-notes .nt:nth-child(n) { margin-left: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .is-notes .nt { animation: m-float 7s ease-in-out infinite; }
  .is-notes .nt:nth-child(2) { animation-delay: -2.3s; }
  .is-notes .nt:nth-child(3) { animation-delay: -4.6s; }
}
@media (max-width: 900px) { .is-steps::before { display: none; } }

/* 404: the card floats on the family photo, the logo mark stands in for the zero */
.nf-wrap { position: relative; background: var(--wash-sand), var(--p-tea) center / cover no-repeat !important; overflow: clip; }
.nf-wrap::before { content: ""; position: absolute; width: 520px; height: 520px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 130, 34, 0.22), transparent 62%); pointer-events: none; }
.nf-card { position: relative; background: rgba(255, 255, 255, 0.86) !important; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 40px 80px -30px rgba(24, 39, 42, 0.35) !important; border-radius: 28px !important; }
.nf-code { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 5.2rem !important; letter-spacing: -0.04em; color: var(--teal-deep) !important; }
.nf-code img { width: 84px; height: auto; filter: drop-shadow(0 12px 18px rgba(244, 130, 34, 0.35)); }
.nf-kicker { margin: 4px 0 10px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-text); }
.nf-cta .nf-primary { background: var(--orange) !important; color: var(--ink) !important; }
.nf-cta .nf-secondary { background: #fff !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
@media (prefers-reduced-motion: no-preference) {
  .nf-code img { animation: nf-bob 3.2s ease-in-out infinite; }
}
@keyframes nf-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-6deg); } }

/* Payment received: the result box sits on a photo, as a glass card */
#main > .section:has(#scl-pay-state) { position: relative; min-height: 70vh; display: grid; place-items: center; padding: 120px 0 96px !important;
  background: var(--wash-sand), var(--p-sofa) center / cover no-repeat; }
#scl-pay-state { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 28px; box-shadow: 0 40px 80px -30px rgba(24, 39, 42, 0.35); padding: 48px 32px !important; }
#scl-pay-state.is-paid::before { content: ""; display: block; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 28px no-repeat;
  box-shadow: 0 0 0 8px rgba(5, 109, 112, 0.12); }
#scl-pay-state:not(.is-paid):not(.is-unsure)::before { content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 18px; border-radius: 50%;
  border: 3px solid rgba(5, 109, 112, 0.18); border-top-color: var(--teal); animation: pay-spin 0.9s linear infinite; }
@keyframes pay-spin { to { transform: rotate(360deg); } }

/* Family Advice Centre: each hub opens on its own photo; the dark core glows */
.page-header.fac-head { background-image: linear-gradient(90deg, rgba(246, 241, 233, 0.95) 0%, rgba(246, 241, 233, 0.8) 50%, rgba(234, 243, 241, 0.45) 100%), var(--fac-photo, var(--p-tea)) !important;
  background-size: cover !important; background-position: center !important; padding-block: 110px 80px !important; }
.page-header.fac-head .container { max-width: 880px; }
.page-header.fac-head h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem) !important; letter-spacing: -0.035em; }
.page-header.fac-head p { max-width: 640px; margin-inline: auto; }
.fac-hub-core { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(160deg, #0f4a4c 0%, #0b3b3d 55%, #082c2e 100%) !important;
  box-shadow: 0 40px 80px -30px rgba(11, 59, 61, 0.6) !important; }
.fac-hub-core::before { content: ""; position: absolute; z-index: -1; width: 360px; height: 360px; right: -160px; top: -160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 130, 34, 0.38), transparent 65%); }
.fac-hub-core::after { content: ""; position: absolute; z-index: -1; width: 300px; height: 300px; left: -150px; bottom: -120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 208, 180, 0.22), transparent 65%); }
@media (prefers-reduced-motion: no-preference) {
  .fac-hub-core::before { animation: fac-orb 12s ease-in-out infinite alternate; }
}
@keyframes fac-orb { to { transform: translate(-60px, 80px) scale(1.15); } }
.fac-hub-spoke > a { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Guides: each one opens on a photo that fits its subject (set per page as --bp-photo) */
.bp-hero[style*="--bp-photo"] { background-image: linear-gradient(90deg, rgba(246, 241, 233, 0.95) 0%, rgba(246, 241, 233, 0.82) 45%, rgba(234, 243, 241, 0.5) 100%), var(--bp-photo) !important;
  background-size: cover !important; background-position: center !important; }

/* The two family tools and the legal pages sit on a photo too, not bare paper */
.bc-section, .bt-top { background: var(--wash-sand), var(--p-family) center / cover no-repeat !important; }
.legal-page { background: var(--wash-sand), var(--p-tea) center top / cover no-repeat !important; }
@media (min-width: 900px) { .legal-page, .bc-section, .bt-top { background-attachment: fixed !important; } }
.legal-page article { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#main > .section:has(.bk-card) { min-height: 70vh; background: var(--wash-sand), var(--p-care) center / cover no-repeat; }

/* Fall slider: wide photo, labels on each side */
.home-feature-wide { grid-template-columns: 0.8fr 1.2fr; }
@media (max-width: 960px) { .home-feature-wide { grid-template-columns: 1fr; } }
.sg-slider-wide { aspect-ratio: 1600 / 744; }
@media (max-width: 640px) { .sg-slider-wide { aspect-ratio: 4 / 3; } .sg-slider-wide .sg-slider-image { background-position: 42% center; } }
.sg-slider-tag { position: absolute; z-index: 2; bottom: 14px; padding: 6px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
  background: rgba(10, 21, 23, 0.72); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; }
.sg-slider-tag.t-real { left: 14px; }
.sg-slider-tag.t-stick { right: 14px; background: rgba(47, 208, 122, 0.9); color: #0a1517; }
#sensor-view { background-image: var(--wash-sand), var(--p-living) !important; }
.sg-slider:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }

/* SmartGuardian: the real sensor beside its spec list */
.sg-device-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; max-width: 1180px; margin: 0 auto; }
.sg-device-grid .sg-spec { max-width: none; margin: 0; }
.sg-device-grid .sg-spec > div { grid-template-columns: 150px 1fr; }
@media (max-width: 960px) { .sg-device-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 560px) { .sg-device-grid .sg-spec > div { grid-template-columns: 1fr; gap: 4px; } }
.sg-device { position: relative; isolation: isolate; padding: 40px 10px 60px; }
.sg-device::before { content: ""; position: absolute; z-index: -1; inset: 6% 4%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(244, 130, 34, 0.30), rgba(5, 109, 112, 0.16) 55%, transparent 75%); filter: blur(10px); }
.sg-device picture { display: block !important; }
.sg-device img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(24, 39, 42, 0.35)); }
.sg-device-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 700;
  color: var(--ink); background: rgba(255, 255, 255, 0.9); box-shadow: 0 12px 30px -10px rgba(24, 39, 42, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sg-device-chip i { width: 8px; height: 8px; border-radius: 50%; background: #2fd07a; box-shadow: 0 0 8px #2fd07a; }
.sg-device-chip.c1 { left: 0; top: 8px; }
.sg-device-chip.c2 { right: 0; bottom: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .sg-device img { animation: m-float 7s ease-in-out infinite; }
  .sg-device-chip.c1 { animation: m-float 6s ease-in-out infinite; animation-delay: -1.5s; }
  .sg-device-chip.c2 { animation: m-float 6.5s ease-in-out infinite; animation-delay: -3s; }
}
.sv-device { margin: 0; }
.sv-device .sv-device-note { left: 0; top: 0; }
@media (max-width: 960px) { .sv-device .sv-device-note { left: 0; top: -10px; } }

/* ---------- Phone clean-up (Nigel, 13 Oct): shorter pages, less empty space, left-aligned reading ---------- */
@media (max-width: 640px) {
  /* long paragraphs read left-aligned, not centred */
  .tab-panel h3, .tab-panel p, .tab-content-grid .check-list li { text-align: left !important; }
  /* rooms on Mary's story: two to a row, compact */
  .zone-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .zone-card { padding: 14px 10px !important; }
  .zone-icon { padding: 10px !important; margin-bottom: 6px !important; }
  .zone-card h3 { font-size: 0.95rem !important; margin: 0 !important; }
  /* homepage worry cards: two to a row */
  .home-services { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .home-services .svc-related-card { padding: 16px 14px !important; }
  .home-services .svc-related-card h3 { font-size: 0.98rem; line-height: 1.25; }
  .home-services .svc-related-card p { font-size: 0.85rem; line-height: 1.45; margin-bottom: 8px; }
  .home-services .svc-more { font-size: 0.8rem; }
  /* steps: number beside the heading, less padding */
  .home-steps li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 18px 18px !important; }
  .home-steps li .home-step-num { grid-row: span 2; }
  .home-steps li h3 { margin: 6px 0 4px !important; font-size: 1.05rem; }
  .home-steps li p { grid-column: 2; font-size: 0.92rem; }
  /* scroll story: steps no longer a screen apart */
  /* every section a little tighter */
  .svc-section { padding-block: 56px !important; }
  .svc-card { padding: 20px !important; }
}
@media (max-width: 760px) {
  .app-trio::after { content: ""; flex: 0 0 8px; }
}
.app-swipe { display: none; }
@media (max-width: 760px) { .app-swipe { display: block; text-align: center; font-size: 0.82rem; color: rgba(255, 255, 255, 0.7); margin: -10px 0 18px; } }
/* booking heroes: the three facts as dark glass pills on a phone (they were white on white) */
@media (max-width: 640px) {
  .install-booking-page .ib-price-pill > span:not(.dot) { background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.18); }
  .install-booking-page .ib-price-pill > span.free { color: #ffb066 !important; }
  .install-booking-page .ib-trust { background: none !important; border: 0 !important; padding: 0 !important; }
  /* The facts wrap into separate pills, so the box drawn round all three had
     an empty rounded outline behind two rows; and the eyebrow wraps to two
     centred lines, so its accent line goes above it rather than beside it
     (iPhone, 28 Oct 2026). */
  .install-booking-page .ib-price-pill { background: none !important; border: 0 !important; justify-content: center; }
  .install-booking-page .ib-eyebrow { flex-direction: column; gap: 10px !important; text-align: center; }
}

/* Real Stories: Joe and Mary side by side, same size, each with the alert their family gets */
.rs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.rs-col { grid-template-rows: 1fr auto; } .rs-card { align-content: start; }
.rs-col { display: grid; gap: 14px; }
.rs-card { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 26px 18px 22px; border-radius: 26px; background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 30px 60px -28px rgba(24, 39, 42, 0.35); text-decoration: none; color: var(--ink);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease; }
.rs-card:hover, .rs-card:focus-visible { transform: translateY(-4px); box-shadow: 0 40px 70px -28px rgba(24, 39, 42, 0.45); }
.rs-card picture { display: block !important; margin-bottom: 8px; }
.rs-card img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 6px var(--orange-tint); }
.rs-card b { font-size: 1.2rem; }
.rs-card small { font-size: 0.85rem; color: var(--muted); line-height: 1.4; min-height: 2.8em; }
.rs-card .svc-more { margin-top: 6px; }
.rs-col .nt { width: auto; }
@media (max-width: 560px) {
  .rs-pair { gap: 12px; }
  .rs-card { padding: 18px 10px 16px; border-radius: 20px; }
  .rs-card img { width: 80px; height: 80px; }
  .rs-card small { font-size: 0.78rem; }
  .rs-col .nt { display: none; }
  .rs-card .svc-more { font-size: 0.8rem; }
}

/* Whole-card links: the heading's link stretches over the card */
.card-link { position: relative; cursor: pointer; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease; }
.card-link .stretch { color: inherit; text-decoration: none; }
.card-link .stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.card-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card-link:hover h3 { color: var(--orange-text); }
.card-link .stretch:focus-visible { outline: none; }
.card-link:has(.stretch:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; }
.card-link h3::after { content: " \2192"; color: var(--orange-text); opacity: 0; transition: opacity 0.25s ease; }
.card-link:hover h3::after, .card-link:has(.stretch:focus-visible) h3::after { opacity: 1; }

/* About: what families say, under "Why families choose us" */
.rv { margin-top: 40px; }
.rv-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
.rv-card { position: relative; margin: 0; padding: 34px 32px 28px; border-radius: 24px; background: linear-gradient(160deg, #0f4a4c 0%, #0b3b3d 60%, #082c2e 100%);
  color: #eaf4f3; box-shadow: 0 40px 80px -36px rgba(11, 59, 61, 0.6); overflow: hidden; isolation: isolate; }
.rv-card::before { content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; right: -110px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(244, 130, 34, 0.35), transparent 65%); }
.rv-mark { display: block; font-size: 3.4rem; line-height: 0.6; color: #ffb066; font-weight: 800; margin-bottom: 14px; }
.rv-card blockquote { margin: 0 0 20px; font-size: 1.06rem; line-height: 1.65; color: #fff; }
.rv-card figcaption { display: flex; gap: 8px; align-items: baseline; font-size: 0.9rem; }
.rv-card figcaption b { color: #fff; } .rv-card figcaption span { color: #b9d3d1; }
@media (max-width: 760px) {
  .rv-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -20px; padding: 0 20px 8px; scrollbar-width: none; }
  .rv-track::-webkit-scrollbar { display: none; }
  .rv-card { flex: 0 0 86%; scroll-snap-align: center; padding: 26px 22px 22px; }
  .rv-card blockquote { font-size: 0.98rem; }
}
.svc-two.svc-one { grid-template-columns: 1fr; max-width: 820px; }
.svc-one .svc-list { columns: 2; column-gap: 32px; } .svc-one .svc-list li { break-inside: avoid; }
@media (max-width: 640px) { .svc-one .svc-list { columns: 1; } }
.sg-kit { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .sg-kit { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sg-kit { grid-template-columns: 1fr; } }
/* SmartGuardian: hardware specs as tiles under the sensor */
.sg-tech { max-width: 1180px; margin: 44px auto 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1180px) { .sg-tech { grid-template-columns: repeat(4, 1fr); } }
.sg-tech > div { padding: 20px 20px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line); box-shadow: var(--shadow-card); display: grid; gap: 4px; }
.sg-tech b { font-size: 1.35rem; letter-spacing: -0.02em; color: var(--teal-deep); line-height: 1.15; }
.sg-tech small { font-size: 0.84rem; color: var(--muted); line-height: 1.4; }
.sg-tech-note { max-width: 1180px; margin: 12px auto 0; font-size: 0.82rem; color: var(--muted); }
@media (max-width: 900px) { .sg-tech { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .sg-tech b { font-size: 1.12rem; } .sg-tech > div { padding: 14px; } }

@media (max-width: 640px) { figure:has(.fdx) > .svc-hero-note, .svc-hero-media:has(.fdx) .svc-hero-note { display: none; } }
.card-link .stretch { display: inline-block; padding-block: 2px; min-height: 24px; }
/* About: our promises sit beside the two real reviews, clearly in our own voice */
.rv-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rv-card.rv-fact { background: rgba(255, 255, 255, 0.92); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.rv-card.rv-fact::before { background: radial-gradient(circle, rgba(244, 130, 34, 0.18), transparent 65%); }
.rv-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-text); margin-bottom: 10px; }
.rv-fact h3 { font-size: 1.12rem; margin: 0 0 8px; color: var(--ink); } .rv-fact p { margin: 0; color: var(--body); }
@media (max-width: 1000px) { .rv-track { grid-template-columns: 1fr 1fr; } }

/* SmartGuardian: pendant / camera / SmartGuardian comparison, and the CES badge */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cmp-section { padding: 96px 0; background: var(--wash-sand), var(--p-living) center / cover no-repeat; }
.cmp-wrap { max-width: 1080px; margin: 0 auto; border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line); box-shadow: var(--shadow-lift); }
.cmp { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.cmp th, .cmp td { padding: 16px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); color: var(--body); line-height: 1.45; }
.cmp thead th { border-top: 0; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: #faf8f4; }
.cmp tbody th { font-weight: 700; color: var(--ink); width: 26%; }
.cmp .cmp-sg { background: rgba(5, 109, 112, 0.07); color: var(--ink); }
.cmp thead .cmp-sg { background: var(--teal); color: #fff; }
.cmp-y, .cmp-n { display: inline-block; font-weight: 700; margin-right: 6px; }
.cmp-y { color: #1f7a3e; } .cmp-n { color: #b3261e; }
.cmp-note { max-width: 1080px; margin: 14px auto 0; font-size: 0.88rem; color: var(--muted); }
.cmp-note a { color: var(--orange-text); font-weight: 600; }
@media (max-width: 760px) {
  .cmp-section { padding: 56px 0; }
  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100%; }
  .cmp tr { border-top: 1px solid var(--line); padding: 14px 16px; }
  .cmp tr:first-child { border-top: 0; }
  .cmp tbody th { width: auto; padding: 0 0 8px; border: 0; font-size: 1rem; }
  .cmp td { border: 0; padding: 6px 10px; display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; border-radius: 10px; }
  .cmp td::before { content: attr(data-label); font-size: 0.78rem; font-weight: 700; color: var(--muted); }
  .cmp td.cmp-sg::before { color: var(--teal); }
}
.sg-ces { display: flex; gap: 18px; align-items: center; justify-content: center; max-width: 820px; margin: 28px auto 0; padding: 0 20px; }
.sg-ces picture { display: block !important; flex: none; }
.sg-ces img { width: 76px; height: auto; display: block; filter: drop-shadow(0 8px 14px rgba(24, 39, 42, 0.2)); }
.sg-ces p { margin: 0; font-size: 0.92rem; color: var(--body); }
.proof-ic.proof-ces { background: #fff !important; padding: 4px; } .proof-ic.proof-ces img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cmp-v { display: block; }

/* Phones (Oscar, 15 Oct: the pinned phone sat on top of the step text): no pinning on a
   phone. The phone shows once, the four steps follow as ordinary cards. */
@media (max-width: 860px) {
  .story-sticky { position: relative !important; top: auto !important; padding: 8px 0 28px !important; }
  .story-sticky::before { width: 300px !important; height: 300px !important; }
  .story-sticky .app-phone { width: 230px !important; }
  .story-ping { display: none !important; }
  .story-steps { padding: 0 !important; display: grid; gap: 12px; }
  .story-step { min-height: 0 !important; opacity: 1 !important; display: block !important; }
  .story-step > div { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 18px 18px 20px !important; }
  .story-step h3 { font-size: 1.3rem !important; }
  .story-step p { font-size: 0.98rem !important; }
  .story-step .num { width: 36px !important; height: 36px !important; margin-bottom: 10px !important; }
}
/* Phones: the app screens line up from the left, the next one peeking in, never half-cut on the left */
@media (max-width: 760px) {
  .app-trio { scroll-snap-type: x mandatory; scroll-padding-left: 24px; }
  .app-trio .app-phone { scroll-snap-align: start !important; width: 72vw !important; max-width: 280px; }
}