/* ============================================================================
   Glow and motion, 30 September 2026
   ----------------------------------------------------------------------------
   Oscar: "i just want more glow and animtations. the whole site feels very
   flat". Loaded last on every page except the homepage (which carries the
   same rules in its own <style>), on top of each page's own design:
   - section headings sit in a faint pool of teal light;
   - cards carry a teal glow at rest and lift into a stronger one on hover;
   - icon tiles glow, and grow a little when their card is hovered;
   - the light in every teal banner and closing card drifts slowly;
   - the main buttons breathe a soft orange glow;
   - content fades up as it scrolls into view (js/main.js adds .sc-reveal);
   - the header's "Call us" and "Question?" are lit buttons with an icon.
   Nothing moves for anyone who has asked their device for reduced motion.
   Remove the one <link> per page and the page is exactly as it was.
   ========================================================================= */

:root {
  --surface-2: #eef6f5;   /* the off-white band on the pages that load css/clean.css */
  --glow-teal-rest: 0 1px 2px rgba(6, 40, 41, 0.05), 0 8px 24px rgba(8, 169, 172, 0.09);
  --glow-teal-hover: 0 2px 4px rgba(6, 40, 41, 0.06), 0 20px 44px rgba(8, 169, 172, 0.22), 0 0 0 1px rgba(8, 169, 172, 0.16);
}

/* Section headings in a pool of teal light. */
.section-header, .sv-section-header { position: relative; isolation: isolate; }
.section-header::before, .sv-section-header::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -70px;
  width: min(760px, 110%);
  height: 260px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(8, 169, 172, 0.13), rgba(8, 169, 172, 0));
  z-index: -1;
  pointer-events: none;
}

/* Cards: a teal glow at rest, a lift and a stronger glow on hover. */
.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 {
  box-shadow: var(--glow-teal-rest);
  transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.35s ease;
}
.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, .sv-feature:hover, .sv-who-item:hover, .sv-included-item:hover, .feature-card:hover, .story-card:hover,
.blog-card:hover, .advice-card:hover, .info-card:hover, .card:hover, .cs-card:hover, .sv-step:hover, .hw-step:hover,
.install-booking-page .ib-card:hover, .install-booking-page .ib-step:hover, .cost-card:hover, .nf-card:hover {
  box-shadow: var(--glow-teal-hover);
  border-color: rgba(8, 169, 172, 0.35);
  transform: translateY(-4px);
}

/* Icon tiles glow, and grow a little with their card. */
.feature-card .feature-icon, .sv-feature-icon, .sv-included-icon, .fac-hub-node, .zone-card .zone-icon,
.install-booking-page .ib-card-icon, .install-booking-page .ib-step-num, .hw-num, .sv-step-num,
.service-layer-features .icon, .rec-block-icon, .bc-tile .bc-ico {
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60%);
  box-shadow: 0 0 0 5px rgba(8, 169, 172, 0.07), 0 6px 16px rgba(8, 169, 172, 0.22);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease;
}
.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, .install-booking-page .ib-card:hover .ib-card-icon,
.rec-block:hover .rec-block-icon, .bc-tile:hover .bc-ico {
  transform: scale(1.07);
  box-shadow: 0 0 0 7px rgba(8, 169, 172, 0.10), 0 10px 22px rgba(8, 169, 172, 0.32);
}

/* The light in the teal banners and the closing card drifts slowly. */
.page-header, .story-hero, .cs-hero, .sv-hero, .sv-final-cta, .quiz-wrapper, .bp-hero,
.cta-section > .container {
  background-size: 150% 150%;
  animation: sc-drift 18s ease-in-out infinite alternate;
}
@keyframes sc-drift {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 70%; }
}
.cta-section > .container { box-shadow: 0 2px 4px rgba(3, 57, 59, 0.10), 0 24px 60px rgba(8, 169, 172, 0.30); }

/* The main buttons breathe. */
.cta-section .cta-buttons .btn:first-child, .guide-inline-cta .gic-primary, .btn-primary {
  animation: sc-breathe 3.4s ease-in-out infinite;
}
@keyframes sc-breathe {
  0%, 100% { box-shadow: 0 6px 18px rgba(244, 130, 34, 0.28), 0 2px 6px rgba(179, 86, 16, 0.22); }
  50% { box-shadow: 0 10px 30px rgba(244, 130, 34, 0.48), 0 3px 8px rgba(179, 86, 16, 0.30); }
}
.cta-section .cta-buttons .btn-white:first-child { animation-name: sc-breathe-white; }
@keyframes sc-breathe-white {
  0%, 100% { box-shadow: 0 6px 18px rgba(255, 255, 255, 0.18), 0 2px 6px rgba(0, 0, 0, 0.12); }
  50% { box-shadow: 0 10px 32px rgba(255, 255, 255, 0.34), 0 3px 8px rgba(0, 0, 0, 0.14); }
}
.btn:hover, .guide-inline-cta a:hover { transform: translateY(-2px); }

/* Fade up into view (classes added by js/main.js, only when motion is allowed). */
.sc-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--sc-i, 0) * 80ms);
}
.sc-reveal.sc-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .page-header, .story-hero, .cs-hero, .sv-hero, .sv-final-cta, .quiz-wrapper, .bp-hero,
  .cta-section > .container, .cta-section .cta-buttons .btn:first-child, .guide-inline-cta .gic-primary, .btn-primary {
    animation: none;
  }
  .sc-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Header "Call us" and "Question?" -------------------------------------- */
/* Oscar: "the call us and question? button look v basic". Lit buttons with an
   icon each: a sheen from the top, a fine highlight on the top edge, a soft
   glow in the brand colour underneath. "Call us" is the bright orange with
   near-black words (see "Livelier orange" below); "Question?" is teal with
   white words above 4.5:1. 40px tall on phones. */
@media (max-width: 1100px) {
  .header-phone-mobile.header-phone-mobile,
  .header-question-mobile.header-question-mobile {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    height: 40px !important;
    padding: 0 14px 0 12px !important;
    border-radius: 12px !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    color: #fff !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease !important;
  }
  .header-phone-mobile.header-phone-mobile {
    background: linear-gradient(180deg, #f89a4c 0%, #f48222 55%, #ec7414 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 18px rgba(244, 130, 34, 0.45), 0 1px 2px rgba(150, 66, 8, 0.25) !important;
    color: #1a1a1a !important;
  }
  .header-question-mobile.header-question-mobile {
    background: linear-gradient(180deg, #0a7d80 0%, #056d70 55%, #045a5c 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 6px 16px rgba(8, 169, 172, 0.34), 0 1px 2px rgba(3, 50, 52, 0.3) !important;
  }
  .header-phone-mobile.header-phone-mobile::before,
  .header-question-mobile.header-question-mobile::before {
    content: '';
    width: 16px;
    height: 16px;
    flex: none;
    background: currentColor;
    -webkit-mask: var(--sc-ico) center / contain no-repeat;
            mask: var(--sc-ico) center / contain no-repeat;
  }
  .header-phone-mobile.header-phone-mobile {
    --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  }
  .header-question-mobile.header-question-mobile {
    --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  }
  /* The pair sits together beside the menu button, never spread across the header. */
  .header-phone-mobile.header-phone-mobile { margin-left: auto !important; margin-right: 8px !important; }
  .header-question-mobile.header-question-mobile { margin-left: 0 !important; margin-right: 10px !important; }
  .header-phone-mobile.header-phone-mobile:hover,
  .header-question-mobile.header-question-mobile:hover { transform: translateY(-1px) !important; filter: brightness(1.06) saturate(1.05); }
  .header-phone-mobile.header-phone-mobile:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 26px rgba(244, 130, 34, 0.6), 0 1px 2px rgba(150, 66, 8, 0.25) !important; }
  .header-question-mobile.header-question-mobile:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 10px 24px rgba(8, 169, 172, 0.46), 0 1px 2px rgba(3, 50, 52, 0.3) !important; }
  .header-phone-mobile.header-phone-mobile:active,
  .header-question-mobile.header-question-mobile:active { transform: translateY(1px) !important; filter: brightness(0.96); }
  .header-phone-mobile.header-phone-mobile:focus-visible,
  .header-question-mobile.header-question-mobile:focus-visible { outline: 3px solid #045153 !important; outline-offset: 3px !important; }
}
@media (max-width: 380px) {
  .header-phone-mobile.header-phone-mobile, .header-question-mobile.header-question-mobile { padding: 0 11px 0 10px !important; gap: 5px !important; font-size: 0.8rem !important; }
}
@media (max-width: 345px) {
  .header-phone-mobile.header-phone-mobile::before, .header-question-mobile.header-question-mobile::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .header-phone-mobile.header-phone-mobile, .header-question-mobile.header-question-mobile { transition: none !important; }
}

/* ---- Fixes the original pages needed -------------------------------------- */
/* Article contents rail (css/fac.css): "10" and "11" broke onto two lines. */
.bp-content .toc ol li a::before { flex: none; min-width: 1.6em; }
/* An open answer was capped at 300px and cut long answers off on phones. */
.faq-item.open .faq-answer { max-height: 2400px; }
/* The skip link's shadow showed as a faint smudge at the top left of every page. */
.skip-link:not(:focus):not(:focus-visible) { box-shadow: none; }
@media (max-width: 640px) {
  /* style.css sets every article h2 to 1.35rem on phones, which blew the
     small "In this guide" label up to heading size. */
  .bp-content .toc h2 { font-size: 0.8rem !important; margin: 0 0 12px !important; }
  /* style.css made each table row its own table on phones, so columns no
     longer lined up and text fell to 12.5px. Rows stay rows; the table box
     still scrolls sideways when it must. */
  .bp-content table { font-size: 0.9rem !important; }
  .bp-content table thead { display: table-header-group !important; width: auto !important; }
  .bp-content table tbody { display: table-row-group !important; width: auto !important; }
  .bp-content table tr { display: table-row !important; width: auto !important; }
}

/* ---- Livelier orange ---------------------------------------------------- */
/* Oscar: "make the orange tints a bit more lively. they are very orange brown
   at the moment on take the first step etc". The brown was #b35610, chosen so
   white text on it reaches 4.5:1; no brighter orange can hold white text. So
   the orange buttons take the homepage hero's own answer: the bright brand
   orange with near-black text (6.7:1), a light sheen from the top, and an
   orange glow. Several of these carry their colour in an inline style, hence
   !important on the fill and the text colour. */
a.nav-link[style*="orange-cta"], a[style*="background:var(--orange-cta)"], a[style*="background: var(--orange-cta)"],
div[style*="background: var(--orange-cta)"],
.nav-cta, .flagship-cta-primary, .prompt-btn, .rec-flagship-cta, .rcta-btn.primary, .bc-btn.primary,
.nf-cta .nf-primary, .slp-btn, .sv-hub-hero .btn-primary, #scl-pay-state .btn-primary, .guide-inline-cta .gic-primary,
.contact-page .cp-submit, .quiz-nav-btn.quiz-next, .install-booking-page .book-submit, .ec-page .ec-submit,
.flagship-badge, .feature-card:not(.teal) {
  background-color: #f48222 !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0) 60%) !important;
  border-color: #f48222 !important;
  color: #1a1a1a !important;
}
a.nav-link[style*="orange-cta"], a[style*="background:var(--orange-cta)"], a[style*="background: var(--orange-cta)"],
.nav-cta, .flagship-cta-primary, .prompt-btn, .rec-flagship-cta, .rcta-btn.primary, .bc-btn.primary,
.nf-cta .nf-primary, .slp-btn, .sv-hub-hero .btn-primary, #scl-pay-state .btn-primary, .guide-inline-cta .gic-primary,
.contact-page .cp-submit, .quiz-nav-btn.quiz-next, .install-booking-page .book-submit, .ec-page .ec-submit {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 22px rgba(244, 130, 34, 0.38), 0 2px 5px rgba(150, 66, 8, 0.16);
}
a.nav-link[style*="orange-cta"]:hover, a[style*="background:var(--orange-cta)"]:hover, a[style*="background: var(--orange-cta)"]:hover,
.nav-cta:hover, .flagship-cta-primary:hover, .prompt-btn:hover, .rec-flagship-cta:hover, .rcta-btn.primary:hover, .bc-btn.primary:hover,
.nf-cta .nf-primary:hover, .slp-btn:hover, .sv-hub-hero .btn-primary:hover, #scl-pay-state .btn-primary:hover, .guide-inline-cta .gic-primary:hover,
.contact-page .cp-submit:hover:not(:disabled), .quiz-nav-btn.quiz-next:hover:not(:disabled),
.install-booking-page .book-submit:hover:not(:disabled), .ec-page .ec-submit:hover:not(:disabled) {
  background-color: #ff9130 !important;
  color: #1a1a1a !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 30px rgba(244, 130, 34, 0.52), 0 3px 8px rgba(150, 66, 8, 0.18);
}
/* The About page's orange card: its words and icon follow the text colour. */
.feature-card:not(.teal) h3, .feature-card:not(.teal) p { color: #1a1a1a; }
.feature-card:not(.teal) p { opacity: 1; }
.feature-card:not(.teal) .feature-icon { background: rgba(255, 255, 255, 0.35); }
.feature-card:not(.teal) .feature-icon svg { stroke: #1a1a1a; }
.feature-card:not(.teal):hover { box-shadow: 0 14px 40px rgba(244, 130, 34, 0.42); }
/* Orange tiles with a white mark and no words: the homepage's bright tiles. */
.flagship-features .check, .service-layer-features .icon,
.bc-tile:nth-child(5) .bc-ico, .bc-tile:nth-child(6) .bc-ico, .bc-tile:nth-child(7) .bc-ico {
  background: linear-gradient(145deg, #f89a4c, #f48222 60%, #ec7414) !important;
}