/* ============================================================================
   SmartCare Living, clean design, 12 October 2026
   ----------------------------------------------------------------------------
   Oscar: "not as good as fourwindsdigital.com or smart-space.ie. I want the
   same font as Smart Space and same style, very clean and professional, but
   with nice orange, white and teal."

   Loaded last on every public page, after style.css and glow.css, so it
   decides. What it does:
   - Plus Jakarta Sans, the Smart Space font, with Smart Space's tight
     headings and warm off-white page;
   - page tops are light (ink headline on off-white) instead of teal slabs;
   - cards are white with a hairline border, no coloured glow;
   - one closing band per page, deep teal, the only dark block;
   - the scrolling SmartGuardian ribbon is gone from every page;
   - no breathing buttons or drifting backgrounds.
   Many pages carry inline style="" attributes, which only !important beats.
   ========================================================================= */

:root {
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ink: #18272a;            /* headings: near-black with a teal cast */
  --body: #47555a;           /* paragraphs, 7.4:1 on paper */
  --muted: #5f6c70;          /* small print, 5.4:1 on paper */
  --paper: #fbfaf7;          /* Smart Space's page colour */
  --paper-2: #f4f1ea;        /* a quieter band */
  --line: #e7e2d9;
  --orange: #f48222;         /* buttons (with ink text, 6.7:1) and accents */
  --orange-text: #ad5310;    /* orange words, 5.2:1 on white */
  --orange-tint: #fff3e8;
  --teal: #056d70;           /* teal words and secondary buttons, 5.1:1 on white */
  --teal-deep: #0b3b3d;      /* the closing band */
  --teal-tint: #eaf4f3;
  --r-card: 20px;
  --shadow-card: 0 1px 2px rgba(24, 39, 42, 0.04), 0 8px 24px rgba(24, 39, 42, 0.05);
  --shadow-lift: 0 2px 4px rgba(24, 39, 42, 0.05), 0 18px 40px rgba(24, 39, 42, 0.09);

  /* the older names the pages already use, pointed at the new palette */
  --dark: var(--ink);
  --text-primary: var(--ink);
  --text-secondary: var(--body);
  --text-gray: var(--muted);
  --light-gray: var(--paper-2);
  --bg: var(--paper);
  --bg-white: #ffffff;
  --border: var(--line);
  --shadow: var(--shadow-card);
  --shadow-hover: var(--shadow-lift);
  --glow-teal-rest: var(--shadow-card);
  --glow-teal-hover: var(--shadow-lift);
}

/* ---- Base ---------------------------------------------------------------- */
html, body { font-family: var(--font) !important; }
body {
  background: var(--paper);
  color: var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit !important; }
h1, h2, h3, h4 { color: var(--ink); font-family: var(--font) !important; }
h1 { letter-spacing: -0.035em !important; font-weight: 800 !important; }
h2 { letter-spacing: -0.03em !important; font-weight: 800 !important; }
h3 { letter-spacing: -0.02em !important; font-weight: 700 !important; }
p { line-height: 1.7; }
::selection { background: rgba(244, 130, 34, 0.18); color: var(--ink); }

/* ---- Header -------------------------------------------------------------- */
.header {
  background: rgba(255, 255, 255, 0.88) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(231, 226, 217, 0.8) !important;
  box-shadow: none !important;
}
.nav-link { color: var(--ink) !important; font-weight: 500 !important; font-size: 0.92rem !important; }
.nav-link:hover { color: var(--orange-text) !important; }
.nav-link[href^="tel:"] { color: var(--ink) !important; font-weight: 700 !important; }
.nav-link[href="assessment"], .nav-cta, .nav-links > a.nav-cta {
  background: var(--orange) !important;
  background-image: none !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  box-shadow: 0 6px 16px rgba(244, 130, 34, 0.25) !important;
}
.nav-link[href="assessment"]:hover, .nav-cta:hover { background: #ff9130 !important; color: var(--ink) !important; }

/* Phone header buttons: flat, one orange and one outlined, like Smart Space. */
@media (max-width: 1100px) {
  .header-phone-mobile.header-phone-mobile {
    background: var(--orange) !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    border-radius: 999px !important;
  }
  .header-question-mobile.header-question-mobile {
    background: #fff !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
  }
}

/* ---- The SmartGuardian ribbon: removed everywhere ------------------------ */
.sg-ribbon { display: none !important; }

/* ---- Page tops: light, ink headline, like smart-space.ie ----------------- */
.page-header, .story-hero, .cs-hero, .sv-hero, .bp-hero, .results-hero {
  background: var(--paper) !important;
  background-image:
    radial-gradient(60% 80% at 85% 0%, rgba(8, 169, 172, 0.10), rgba(8, 169, 172, 0) 70%),
    radial-gradient(50% 70% at 10% 100%, rgba(244, 130, 34, 0.08), rgba(244, 130, 34, 0) 70%) !important;
  color: var(--ink) !important;
  animation: none !important;
  border-bottom: 1px solid var(--line);
}
.page-header::before, .page-header::after, .story-hero::before, .story-hero::after,
.cs-hero::before, .cs-hero::after, .sv-hero::before, .sv-hero::after,
.bp-hero::before, .bp-hero::after { display: none !important; }
.page-header h1, .story-hero h1, .cs-hero h1, .sv-hero h1, .bp-hero h1, .results-hero h1 {
  color: var(--ink) !important;
  font-weight: 800 !important;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.04em !important;
  text-wrap: balance;
}
.results-hero p, .results-hero .lede, .page-header p, .story-hero p, .cs-hero p, .sv-hero p, .sv-hero .tagline, .bp-hero p, .bp-hero .lede {
  color: var(--body) !important;
  text-wrap: pretty;
}
.page-header a:not(.btn), .story-hero a:not(.btn), .sv-hero a:not(.btn), .bp-hero a:not(.btn) { color: var(--teal) !important; }
.sv-hero { padding-top: 76px !important; padding-bottom: 72px !important; }
.sv-hero .tagline { font-size: 1.15rem !important; font-weight: 400 !important; }

/* Eyebrows become the Smart Space pill: white, hairline, orange dot. */
.sv-hero-eyebrow, .page-header .eyebrow, .bp-hero .eyebrow, .story-hero .eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: #fff !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(24, 39, 42, 0.04);
}
.sv-hero-eyebrow::before, .page-header .eyebrow::before, .bp-hero .eyebrow::before, .story-hero .eyebrow::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
}
.bp-hero .rdate, .bp-hero .date { color: var(--muted) !important; }

/* Section eyebrows: small orange caps, no pill. */
.section-eyebrow, .sv-section-header .eyebrow, .home-subsection-eyebrow, .micro-eyebrow, .cta-eyebrow {
  color: var(--orange-text) !important;
  background: none !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
}
.section-eyebrow::before, .section-eyebrow::after { display: none !important; }
.section-title, .sv-section-header h2, .home-subsection-title {
  color: var(--ink) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance;
}
.section-header::before, .sv-section-header::before { display: none !important; }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 999px !important;
  animation: none !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary, .guide-inline-cta .gic-primary {
  background: var(--orange) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border-color: var(--orange) !important;
  box-shadow: 0 8px 20px rgba(244, 130, 34, 0.25) !important;
  animation: none !important;
}
.btn-primary:hover, .guide-inline-cta .gic-primary:hover { background: #ff9130 !important; color: var(--ink) !important; }
/* On light page tops the old white-outline buttons would vanish. */
.sv-hero .btn-outline, .page-header .btn-outline, .story-hero .btn-outline, .bp-hero .btn-outline {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: var(--ink) !important;
  box-shadow: 0 8px 20px rgba(244, 130, 34, 0.25) !important;
}
.sv-hero .btn-white, .page-header .btn-white, .story-hero .btn-white {
  background: var(--orange) !important; color: var(--ink) !important; border-color: var(--orange) !important;
}
.btn-outline {
  background: #fff;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
.btn-outline:hover { border-color: var(--ink) !important; background: #fff !important; color: var(--ink) !important; }
.btn-ghost { color: var(--ink) !important; }

/* ---- Cards ---------------------------------------------------------------- */
.related-card, .sv-related-card, .fac-hub-spoke > a, .bp-content .fac-hub-index li a,
.further-reading-grid > a, .block-card, .rec-block, .rec-real-story-card, .bc-tile,
.zone-card, .sv-feature, .sv-who-item, .sv-included-item, .feature-card, .story-card,
.blog-card, .advice-card, .info-card, .card, .cs-card, .sv-step, .hw-step,
.install-booking-page .ib-card, .install-booking-page .ib-step, .cost-card, .nf-card,
.home-block-card, .s-card, .tile-lift-md {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--shadow-card) !important;
  transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s ease !important;
}
.related-card:hover, .sv-related-card:hover, .fac-hub-spoke > a:hover, .bp-content .fac-hub-index li a:hover,
.further-reading-grid > a:hover, .block-card:hover, .rec-block:hover, .rec-real-story-card:hover, .bc-tile:hover,
.zone-card:hover, .feature-card:hover, .story-card:hover, .blog-card:hover, .advice-card:hover, .card:hover,
.cs-card:hover, .home-block-card:hover, .s-card:hover, .tile-lift-md:hover, .nf-card:hover {
  box-shadow: var(--shadow-lift) !important;
  border-color: #d9d2c6 !important;
  transform: translateY(-3px) !important;
}
/* Cards that are not links should not move. */
.sv-feature:hover, .sv-who-item:hover, .sv-included-item:hover, .info-card:hover, .sv-step:hover, .hw-step:hover,
.cost-card:hover, .install-booking-page .ib-card:hover, .install-booking-page .ib-step:hover {
  transform: none !important;
  box-shadow: var(--shadow-card) !important;
  border-color: var(--line) !important;
}

/* Icon tiles: a soft orange square, no gradient, no halo. */
.feature-card .feature-icon, .sv-feature-icon, .sv-included-icon, .fac-hub-node, .zone-card .zone-icon,
.install-booking-page .ib-card-icon, .hw-num, .sv-step-num, .service-layer-features .icon,
.rec-block-icon, .bc-tile .bc-ico {
  background: var(--orange-tint) !important;
  background-image: none !important;
  color: var(--orange-text) !important;
  box-shadow: none !important;
  border: 1px solid #fbe0c7 !important;
}
.sv-feature-icon svg, .sv-included-icon svg, .feature-card .feature-icon svg { stroke: var(--orange-text) !important; color: var(--orange-text) !important; }
.feature-card:hover .feature-icon, .sv-feature:hover .sv-feature-icon, .sv-included-item:hover .sv-included-icon,
.fac-hub-spoke > a:hover .fac-hub-node, .zone-card:hover .zone-icon, .rec-block:hover .rec-block-icon,
.bc-tile:hover .bc-ico { transform: none !important; box-shadow: none !important; }
.sv-who-check { background: var(--teal) !important; color: #fff !important; box-shadow: none !important; }

/* ---- Bands ---------------------------------------------------------------- */
.sv-section:nth-of-type(even) { background: #fff; }
.sv-stat-strip {
  background: #fff !important;
  color: var(--ink) !important;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 56px 20px !important;
}
.sv-stat-strip .big { color: var(--orange-text) !important; font-weight: 800 !important; letter-spacing: -0.04em; }
.sv-stat-strip .caption { color: var(--body) !important; opacity: 1 !important; font-size: 1.05rem !important; }

.stats { background: var(--teal-deep) !important; background-image: none !important; }

/* ---- The one dark block: the closing call to action ---------------------- */
.sv-final-cta, .cta-section > .container, section.cta, .results-cta > .container {
  background: var(--teal-deep) !important;
  background-image:
    radial-gradient(55% 90% at 100% 0%, rgba(244, 130, 34, 0.22), rgba(244, 130, 34, 0) 70%),
    radial-gradient(50% 80% at 0% 100%, rgba(8, 169, 172, 0.25), rgba(8, 169, 172, 0) 70%) !important;
  animation: none !important;
  box-shadow: none !important;
}
.sv-final-cta::before, .sv-final-cta::after { display: none !important; }
.sv-final-cta h2, .cta-section h2, .cta-title { color: #fff !important; letter-spacing: -0.035em !important; }
.sv-final-cta p, .cta-section p, .cta-desc { color: rgba(255, 255, 255, 0.82) !important; }
.sv-final-cta .btn-white, .cta-section .btn-white, .cta-section .cta-buttons .btn:first-child {
  background: var(--orange) !important;
  color: var(--ink) !important;
  border-color: var(--orange) !important;
  animation: none !important;
  box-shadow: 0 10px 26px rgba(244, 130, 34, 0.3) !important;
}
.sv-final-cta .btn-outline, .cta-section .btn-outline {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
}
.sv-final-cta .btn-outline:hover, .cta-section .btn-outline:hover { border-color: #fff !important; }
.cta-section > .container { border-radius: 28px !important; }

/* ---- Quiz: a white card on the page, not on a teal slab ------------------ */
.quiz-wrapper {
  background: var(--paper) !important;
  background-image: radial-gradient(60% 60% at 50% 0%, rgba(8, 169, 172, 0.08), rgba(8, 169, 172, 0) 70%) !important;
  animation: none !important;
}
.quiz-wrapper::before, .quiz-wrapper::after { display: none !important; }
.quiz-container {
  border: 1px solid var(--line) !important;
  box-shadow: 0 2px 4px rgba(24, 39, 42, 0.04), 0 24px 60px rgba(24, 39, 42, 0.08) !important;
  border-radius: 24px !important;
}
.quiz-option, .quiz-chip-card {
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  background: #fff !important;
}
.quiz-option:hover, .quiz-chip-card:hover { border-color: #cfc6b8 !important; }
.quiz-option[aria-checked="true"], .quiz-option.selected,
.quiz-chip-card[aria-checked="true"], .quiz-chip-card.selected {
  border-color: var(--orange) !important;
  background: var(--orange-tint) !important;
  box-shadow: 0 0 0 1px var(--orange) inset !important;
}
.quiz-option-icon, .quiz-chip-icon {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.quiz-eyebrow { color: var(--orange-text) !important; letter-spacing: 0.14em !important; }
.quiz-chip { background: var(--paper-2) !important; color: var(--ink) !important; border: 0 !important; }
.quiz-progress-bar { background: var(--orange) !important; }
.quiz-input {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: #fff !important;
}
.quiz-input:focus { border-color: var(--teal) !important; box-shadow: 0 0 0 3px rgba(5, 109, 112, 0.15) !important; outline: none; }

/* ---- Footer --------------------------------------------------------------- */
.footer {
  background: #fff !important;
  border-top: 1px solid var(--line) !important;
}
.footer-col-title { color: var(--ink) !important; letter-spacing: 0.12em !important; font-size: 0.74rem !important; }
.footer-links a { color: var(--body) !important; }
.footer-links a:hover { color: var(--orange-text) !important; }
.footer-bottom, .footer-bottom p { color: var(--muted) !important; }
.footer .logo-text { color: var(--ink) !important; font-family: var(--font) !important; letter-spacing: -0.02em !important; }

/* ---- Guides --------------------------------------------------------------- */
.bp-content, .bp-body { color: var(--body); }
.bp-content h2, .bp-body h2 { letter-spacing: -0.03em !important; }
.callout { border-radius: 16px !important; box-shadow: none !important; }
.guide-inline-cta { border-radius: 20px !important; box-shadow: none !important; border: 1px solid var(--line) !important; }

/* ---- Motion: content still fades up, nothing breathes or drifts ---------- */
.sc-reveal { transform: translateY(14px); transition-duration: 0.6s; }
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .home-block-card:hover, .related-card:hover { transform: none !important; }
}

/* ---- Service pages (smart-lighting, smart-doorbell, voice-communication,
   sound-detection, digital-lock-box): one short template ------------------- */
.svc-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.svc-hero {
  margin-top: 72px;
  padding: 96px 0 88px;
  text-align: center;
  background: var(--paper);
  background-image:
    radial-gradient(55% 75% at 85% 0%, rgba(8, 169, 172, 0.11), rgba(8, 169, 172, 0) 70%),
    radial-gradient(45% 65% at 10% 100%, rgba(244, 130, 34, 0.09), rgba(244, 130, 34, 0) 70%);
  border-bottom: 1px solid var(--line);
}
.svc-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; margin-bottom: 26px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.svc-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.svc-hero h1 {
  font-size: clamp(2.3rem, 5.2vw, 4rem); line-height: 1.04; letter-spacing: -0.045em !important;
  max-width: 820px; margin: 0 auto 22px; text-wrap: balance;
}
.svc-lede { font-size: 1.15rem; color: var(--body); max-width: 620px; margin: 0 auto 34px; text-wrap: pretty; }
.svc-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.svc-section { padding: 96px 0; }
.svc-section-white { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.svc-head { text-align: center; margin-bottom: 48px; }
.svc-eyebrow {
  display: block; margin-bottom: 12px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange-text);
}
.svc-head h2, .svc-panel h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.1; margin: 0; }

.svc-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.svc-grid-4 { grid-template-columns: repeat(4, 1fr); }
.svc-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 30px 26px; box-shadow: var(--shadow-card);
}
.svc-card h3 { font-size: 1.08rem; margin: 20px 0 8px; }
.svc-card p { font-size: 0.95rem; color: var(--body); margin: 0; line-height: 1.65; }
.svc-ico {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  background: var(--orange-tint); border: 1px solid #fbe0c7; color: var(--orange-text);
}
.svc-ico svg { width: 24px; height: 24px; }

.svc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.svc-panel h2 { margin-bottom: 26px; }
.svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.svc-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.02rem; color: var(--ink); line-height: 1.55; }
.svc-list svg {
  flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 50%;
  background: var(--teal-tint); color: var(--teal); margin-top: 1px;
}

.svc-related { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 860px; margin: 0 auto; }
.svc-related-card {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 28px 28px 26px; box-shadow: var(--shadow-card);
  transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s ease;
}
.svc-related-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); border-color: #d9d2c6; }
.svc-related-card h3 { font-size: 1.15rem; margin: 0 0 8px; }
.svc-related-card p { font-size: 0.95rem; color: var(--body); margin: 0 0 16px; }
.svc-more { font-size: 0.9rem; font-weight: 700; color: var(--orange-text); }

.sv-final-cta { padding: 96px 20px !important; text-align: center; color: #fff; }
.sv-final-cta .container { max-width: 760px; margin: 0 auto; }
.sv-final-cta h2 { font-size: clamp(2rem, 4vw, 3rem) !important; line-height: 1.08; margin-bottom: 16px; }
.sv-final-cta p { font-size: 1.1rem; margin: 0 auto 30px; max-width: 560px; }
.sv-final-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.svc-cta-call { margin: 26px 0 0 !important; font-size: 0.98rem !important; }
.svc-cta-call a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 960px) {
  .svc-grid, .svc-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .svc-two { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 640px) {
  .svc-hero { padding: 64px 0 60px; }
  .svc-section { padding: 64px 0; }
  .svc-grid, .svc-grid-4, .svc-related { grid-template-columns: 1fr; }
  .svc-actions .btn { width: 100%; }
  .sv-final-cta { padding: 72px 20px !important; }
  .sv-final-cta-buttons .btn { width: 100%; }
}

/* ---- Homepage -------------------------------------------------------------- */
.home-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.home-hero {
  margin-top: 72px; padding: 88px 0 96px;
  background: var(--paper);
  background-image:
    radial-gradient(50% 70% at 90% 10%, rgba(8, 169, 172, 0.12), rgba(8, 169, 172, 0) 70%),
    radial-gradient(45% 60% at 0% 100%, rgba(244, 130, 34, 0.10), rgba(244, 130, 34, 0) 70%);
  border-bottom: 1px solid var(--line);
}
.home-hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 64px; align-items: center; }
.home-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -0.05em !important; margin: 0 0 22px; text-wrap: balance; }
.home-lede { font-size: 1.18rem; color: var(--body); max-width: 520px; margin: 0 0 32px; }
.home-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.home-trust { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.9rem; color: var(--muted); font-weight: 500; }
.home-trust li { display: inline-flex; align-items: center; gap: 8px; }
.home-trust li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.home-hero-media { position: relative; }
.home-hero-media img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 38% center;
  border-radius: 28px; box-shadow: 0 2px 4px rgba(24, 39, 42, 0.06), 0 30px 70px rgba(24, 39, 42, 0.16);
}
.home-alert {
  position: absolute; left: -24px; bottom: 32px;
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 18px 14px 16px; box-shadow: 0 18px 40px rgba(24, 39, 42, 0.16);
}
.home-alert strong { display: block; font-size: 0.95rem; color: var(--ink); }
.home-alert small { display: block; font-size: 0.8rem; color: var(--muted); }
.home-alert-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(244, 130, 34, 0.18); flex: none; }

.home-feature { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.home-feature-copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.08; margin: 0 0 18px; }
.home-feature-copy > p { font-size: 1.08rem; margin: 0 0 26px; }
.home-feature-copy .svc-list { margin-bottom: 32px; }
.home-feature-media { margin: 0; }
.home-feature-media figcaption { font-size: 0.88rem; color: var(--muted); margin-top: 14px; }

.sg-slider {
  position: relative; width: 100%; aspect-ratio: 16 / 11; border-radius: 24px !important; overflow: hidden;
  background: #0a0a12; cursor: ew-resize; user-select: none; touch-action: none; --pos: 50;
  box-shadow: 0 2px 4px rgba(24, 39, 42, 0.06), 0 30px 70px rgba(24, 39, 42, 0.16) !important;
}
.sg-slider-image { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.sg-slider-stick { clip-path: inset(0 0 0 calc(var(--pos) * 1%)); }
.sg-slider-handle { position: absolute; top: 0; bottom: 0; left: calc(var(--pos) * 1%); width: 3px; background: #fff; transform: translateX(-50%); pointer-events: none; z-index: 3; }
.sg-slider-handle::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; transform: translate(-50%, -50%); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  background-image: 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='M9 6L3 12L9 18'/%3E%3Cpath d='M15 6L21 12L15 18'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 22px;
}

.home-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.home-services-all { background: var(--orange-tint) !important; border-color: #fbe0c7 !important; }
.home-guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.home-more { text-align: center; margin: 36px 0 0; }
.home-more a { font-weight: 700; color: var(--orange-text); text-decoration: none; }

.home-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: none; }
.home-steps li { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 30px 28px; box-shadow: var(--shadow-card); }
.home-step-num {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--teal); color: #fff; font-weight: 800; font-size: 1rem;
}
.home-steps h3 { font-size: 1.15rem; margin: 18px 0 8px; }
.home-steps p { margin: 0; font-size: 0.97rem; }

.home-story { display: flex; gap: 22px; align-items: flex-start; }
.home-story img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; }

@media (max-width: 960px) {
  .home-hero-grid, .home-feature { grid-template-columns: 1fr; gap: 48px; }
  .home-hero { padding: 64px 0 72px; }
  .home-alert { left: 16px; bottom: 16px; }
  .home-services, .home-guides { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .home-hero { padding: 48px 0 56px; }
  .home-actions .btn { width: 100%; }
  .home-services, .home-guides, .home-steps { grid-template-columns: 1fr; }
  .home-story { flex-direction: column; gap: 16px; }
  .home-story img { width: 64px; height: 64px; }
}

/* ---- Results page ------------------------------------------------------- */
.results-hero::before, .results-hero::after { display: none !important; }
.results-hero .results-eyebrow { color: var(--orange-text) !important; }
.results-cta > .container { border-radius: 28px !important; }
.results-cta h2 { color: #fff !important; }
.results-cta p { color: rgba(255, 255, 255, 0.82) !important; }
.rec-blocks-section { background: #fff !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rec-blocks-eyebrow, .recs-eyebrow { color: var(--orange-text) !important; }
.rec-flagship, .rec-flagship-card { border-radius: 24px !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-card) !important; }
.rcta-btn.primary, .rec-flagship-cta, .home-flagship-cta {
  background: var(--orange) !important; background-image: none !important; color: var(--ink) !important;
  border-radius: 999px !important; box-shadow: 0 8px 20px rgba(244, 130, 34, 0.25) !important; animation: none !important;
}
.rcta-btn.outline { border-radius: 999px !important; }

/* ---- SmartGuardian page ------------------------------------------------- */
.sg-spec { max-width: 860px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.sg-spec > div { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 18px 28px; border-top: 1px solid var(--line); }
.sg-spec > div:first-child { border-top: 0; }
.sg-spec dt { font-weight: 700; color: var(--ink); }
.sg-spec dd { margin: 0; color: var(--body); }
.sg-note { text-align: center; max-width: 720px; margin: 24px auto 0; font-size: 0.92rem; color: var(--muted); }
.sg-note a { color: var(--teal); font-weight: 600; }
.sg-note + .sg-note { margin-top: 6px; }
.sg-price { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 860px; margin: 0 auto; }
.sg-price-label { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-text); }
.sg-price .sg-price-num { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); margin: 10px 0 6px; line-height: 1.1; }
.sg-price-num span { font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
@media (max-width: 640px) {
  .sg-spec > div { grid-template-columns: 1fr; gap: 4px; padding: 16px 20px; }
  .sg-price { grid-template-columns: 1fr; }
}

/* ---- Services and About ------------------------------------------------- */
.svc-price-line { font-size: 0.95rem !important; color: var(--muted) !important; margin: -8px 0 26px !important; }
.about-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.about-intro h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.1; margin: 0 0 20px; }
.about-intro p { font-size: 1.05rem; }
.about-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
.about-facts > div { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 24px; box-shadow: var(--shadow-card); }
.about-facts dt { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.04em; color: var(--orange-text); line-height: 1; }
.about-facts dd { margin: 8px 0 0; font-size: 0.92rem; color: var(--body); font-weight: 500; }
@media (max-width: 960px) { .about-intro { grid-template-columns: 1fr; gap: 40px; } }
.footer h2, .footer h3, .footer h4 { color: var(--ink) !important; font-size: 0.74rem !important; letter-spacing: 0.12em !important; text-transform: uppercase; }

/* ---- Story pages ---------------------------------------------------------- */
.story-hero .family-requests {
  background: #fff !important; border: 1px solid var(--line) !important; border-radius: var(--r-card) !important;
  box-shadow: var(--shadow-card) !important; color: var(--ink) !important; padding: 26px 28px !important;
}
.story-hero .family-requests h2 { color: var(--orange-text) !important; font-size: 0.74rem !important; letter-spacing: 0.14em !important; text-transform: uppercase; }
.story-hero .family-requests li { color: var(--ink) !important; }
.story-hero .family-requests li::before, .story-hero .family-requests li::marker { color: var(--teal) !important; }
.story-hero .risk-label { background: var(--orange-tint) !important; color: var(--orange-text) !important; border: 1px solid #fbe0c7 !important; }

/* A closing section was a coloured band holding a dark card: keep the card, drop the band. */
section.cta-section { background: var(--paper) !important; padding: 72px 20px !important; }
.cta-section > .container { padding: 64px 32px !important; color: #fff; }

/* FAQs: white, hairlines, no dark slab. */
.faq-section { background: #fff !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq-section h2, .faq-section .section-header h2 { color: var(--ink) !important; }
.faq-section .section-header p { color: var(--body) !important; }
.faq-item { border-color: var(--line) !important; background: transparent !important; }
.faq-question { color: var(--ink) !important; font-weight: 700 !important; }
.faq-question::after { color: var(--orange-text) !important; }
.faq-answer, .faq-answer p { color: var(--body) !important; }

.tabs-section .tab-btn, .tab-button, [role="tab"] { border-radius: 999px !important; }
.cost-section .cost-card { border-radius: var(--r-card) !important; }

/* ---- Emergency callback: light top, the form card leads ------------------ */
.ec-hero {
  background: var(--paper) !important;
  background-image: radial-gradient(55% 80% at 85% 0%, rgba(244, 130, 34, 0.14), rgba(244, 130, 34, 0) 70%),
                    radial-gradient(50% 70% at 10% 100%, rgba(8, 169, 172, 0.10), rgba(8, 169, 172, 0) 70%) !important;
  color: var(--ink) !important; animation: none !important; border-bottom: 1px solid var(--line);
}
.ec-hero::before, .ec-hero::after { display: none !important; }
.ec-hero h1 { color: var(--ink) !important; letter-spacing: -0.04em !important; }
.ec-hero p { color: var(--body) !important; }
.ec-badge { background: var(--orange-tint) !important; color: var(--orange-text) !important; border: 1px solid #fbe0c7 !important; }
.reply-pill { background: #fff !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
.ec-step-num { background: var(--teal) !important; color: #fff !important; }

/* ---- Advice hubs: the teal panels become the deep closing teal ----------- */
.fac-hub-core, .fac-hub-core-in { background: var(--teal-deep) !important; background-image: radial-gradient(80% 60% at 100% 0%, rgba(244, 130, 34, 0.25), rgba(244, 130, 34, 0) 70%) !important; }
.blog-card-image { background: var(--paper-2) !important; background-image: radial-gradient(70% 90% at 80% 0%, rgba(244, 130, 34, 0.18), rgba(244, 130, 34, 0) 70%), radial-gradient(70% 90% at 0% 100%, rgba(8, 169, 172, 0.16), rgba(8, 169, 172, 0) 70%) !important; }
.blog-card-image svg { stroke: var(--teal) !important; }

/* ---- Story cards and the advice-centre prompt ---------------------------- */
.story-card-image, .cs-card-top, .s-top {
  background: var(--paper-2) !important;
  background-image: radial-gradient(70% 90% at 85% 0%, rgba(244, 130, 34, 0.16), rgba(244, 130, 34, 0) 70%),
                    radial-gradient(70% 90% at 0% 100%, rgba(8, 169, 172, 0.14), rgba(8, 169, 172, 0) 70%) !important;
}
.story-card .risk-badge, .cs-card-tag { background: #fff !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
.story-card .price, .cs-card-package { color: var(--orange-text) !important; }
.cs-closing { background: transparent !important; }
.fac-checker-cta {
  background: var(--teal-deep) !important;
  background-image: radial-gradient(55% 90% at 100% 0%, rgba(244, 130, 34, 0.25), rgba(244, 130, 34, 0) 70%),
                    radial-gradient(50% 80% at 0% 100%, rgba(8, 169, 172, 0.3), rgba(8, 169, 172, 0) 70%) !important;
  border-radius: 28px !important; box-shadow: none !important;
}
.fac-checker-cta .btn-white { background: var(--orange) !important; color: var(--ink) !important; border-color: var(--orange) !important; }

/* ---- Landing-page hero buttons ------------------------------------------- */
a.bh-primary { background: var(--orange) !important; color: var(--ink) !important; border: 1px solid var(--orange) !important; border-radius: 999px !important; box-shadow: 0 10px 26px rgba(244, 130, 34, 0.3) !important; }
a.bh-secondary { background: #fff !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 999px !important; box-shadow: none !important; }
@media (max-width: 380px) {
  .about-facts { gap: 10px; }
  .about-facts > div { padding: 18px 14px; }
  .about-facts dt { font-size: 1.7rem; }
  .about-facts dd { font-size: 0.82rem; }
}

/* ---- The real logo in the footer ------------------------------------------ */
.footer-logo { display: inline-block; }
.footer-logo img { display: block; width: 150px; height: auto; }
.film-phone .ph-app { background: #fff !important; }
.film-phone .ph-app img { width: 26px; height: auto; }

/* html and body carried overflow-x: hidden, which makes body a scroll
   container and silently breaks every position: sticky inside it (the scroll
   story's phone never pinned). clip stops sideways scroll without that. */
html, body { overflow-x: clip !important; overflow-y: visible !important; }
/* The skip link sat 24px down the page, hidden only because the fixed header
   happened to cover it. Off screen until it has focus. */
.skip-link:not(:focus):not(:focus-visible) { top: -200px !important; }