/* ══════════════════════════════════════════════════════════
   LIGHT SUB-PAGE THEME — scoped to body.light-page only.
   Overrides the shared dark-theme component classes (used
   across service/sector/town/about/careers/insights/legal
   pages) so they render light instead. Nav, footer, and the
   final-cta band stay dark everywhere — already hardcoded
   independent of theme, so nothing extra needed for those.
   Only pages with the light-page body class are affected —
   zero risk to any page that hasn't been converted yet.
   ══════════════════════════════════════════════════════════ */

body.light-page{
  --bg:#ffffff;
  --bg-alt:#f6f8fa;
  --surface:#ffffff;
  --card-bg:#eef1f4;
  --border:rgba(16,31,47,.09);
  --border-2:rgba(16,31,47,.15);
  --text:#101f2f;
  --text-light:#4a5a6a;
  --text-lighter:#7c8b99;
  color:var(--text-light);
  background:var(--bg);
}

/* CRITICAL: nav's background is hardcoded dark independent of theme, but its link
   text uses the shared --text/--text-light variables, which body.light-page just
   redefined to dark values above. Without this, nav text would be dark-on-dark and
   nearly invisible on every light-theme page, desktop and mobile alike. Locally
   re-declare the original light values scoped to nav so it's always readable
   regardless of page theme. */
body.light-page nav#nav{
  --text:#f4f7f9;
  --text-light:#aab6c2;
  --text-lighter:#6d7a87;
  --border:rgba(255,255,255,.08);
  --border-2:rgba(255,255,255,.15);
}

/* ── Subtle grid-line background texture, sitewide on the light theme ── */
body.light-page{
  background-image:
    linear-gradient(rgba(16,31,47,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,31,47,.035) 1px, transparent 1px);
  background-size:48px 48px;
  background-position:center top;
}

/* ── Page hero: light gradient background, recolored wave lines + bubbles ── */
body.light-page .page-hero-no-photo{
  background:linear-gradient(180deg,#fbfcfd 0%,#f3f6f8 100%);
}
body.light-page .page-hero h1,
body.light-page .page-hero .section-eyebrow{color:var(--text)}
body.light-page .page-hero .section-eyebrow{color:#0c7a84}
body.light-page .page-hero .hero-sub{color:var(--text-light)}

body.light-page .bubble{
  background:radial-gradient(circle at 32% 30%, rgba(12,122,132,.22), rgba(12,122,132,.08) 65%, transparent 78%) !important;
}
body.light-page .bubble-2, body.light-page .bubble-6{
  background:radial-gradient(circle at 32% 30%, rgba(169,131,47,.2), rgba(169,131,47,.07) 65%, transparent 78%) !important;
}
body.light-page .bubble-4, body.light-page .bubble-7{
  background:radial-gradient(circle at 32% 30%, rgba(201,74,31,.18), rgba(201,74,31,.06) 65%, transparent 78%) !important;
}
body.light-page .wave-line-1 path{stroke:#0c7a84 !important;opacity:.28 !important}
body.light-page .wave-line-2 path{stroke:#a9832f !important;opacity:.22 !important}
body.light-page .wave-line-3 path{stroke:#c94a1f !important;opacity:.22 !important}

/* ── Content sections ── */
body.light-page .content-section,
body.light-page .sectors-section,
body.light-page .faq-section,
body.light-page .process-section,
body.light-page .trust-strip{
  background-image:linear-gradient(rgba(16,31,47,.035) 1px, transparent 1px),linear-gradient(90deg, rgba(16,31,47,.035) 1px, transparent 1px);
  background-size:48px 48px;
}
body.light-page .content-section{background-color:var(--bg)}
body.light-page .content-section.alt{background-color:var(--bg-alt)}
body.light-page .sectors-section{background-color:var(--bg-alt)}
body.light-page .faq-section{background-color:var(--bg)}
body.light-page .process-section{background-color:var(--bg)}
body.light-page .insurance-section{background-color:var(--bg-alt)}
body.light-page .trust-strip{background-color:var(--bg)}
body.light-page .reach-banner{background-color:var(--bg-alt);border-color:var(--border)}

body.light-page .section-eyebrow{color:#0c7a84}
body.light-page h1, body.light-page h2, body.light-page h3, body.light-page h4{color:var(--text)}
body.light-page .section-header p, body.light-page p{color:var(--text-light)}
body.light-page .reach-item{color:var(--text-light)}
body.light-page .reach-item svg{stroke:#0c7a84}
body.light-page .reach-divider{background:var(--border-2)}

/* ── Cards: light-grey for visible definition against white/alt sections ── */
body.light-page .service-list-card,
body.light-page .sector-card,
body.light-page .insurance-card,
body.light-page .trust-cell,
body.light-page .faq-item{
  background:var(--card-bg);border-color:var(--border);
}
body.light-page .service-list-card p,
body.light-page .sector-card p,
body.light-page .insurance-card p,
body.light-page .faq-item p{color:var(--text-light)}
body.light-page .service-list-card h4,
body.light-page .sector-card h3,
body.light-page .insurance-card h3,
body.light-page .faq-item summary{color:var(--text)}
body.light-page .sector-icon{background:rgba(12,122,132,.1)}
body.light-page .sector-icon svg{stroke:#0c7a84}
body.light-page .division-cta{color:#0c7a84;border-color:rgba(12,122,132,.35)}
body.light-page .division-cta svg{stroke:#0c7a84}

/* ── Insurance list ── */
body.light-page .insurance-list li{color:var(--text)}
body.light-page .insurance-card{background:linear-gradient(160deg,rgba(12,122,132,.05),var(--card-bg))}

/* ── Trust strip ── */
body.light-page .trust-num{color:#0c7a84}
body.light-page .trust-label{color:var(--text)}
body.light-page .trust-sub{color:var(--text-lighter)}
body.light-page .trust-aftercare{background:var(--card-bg);border-color:var(--border)}

/* ── Process ── */
body.light-page .process-node{background:#e3f2f3;border-color:#0c7a84;position:relative;z-index:3}
body.light-page .process-node svg{stroke:#0c7a84}
body.light-page .process-num{color:#0c7a84}
body.light-page .process-body h4{color:var(--text)}
body.light-page .process-body p{color:var(--text-light)}
body.light-page .process-line,
body.light-page .process-line-v{background:var(--border-2)}

/* ── Process section: real motion — glowing line-fill and node pop-in, hover lift.
   (Previously used a separately-positioned traveling dot anchored via right:0 to
   the animating line's width — this tracked unreliably and could appear detached
   from the line. Replaced with a glow directly on the line-fill itself, which is
   inherently always in the correct place since there's no separate element to
   mis-position.) ── */
body.light-page .process-node{transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s}
body.light-page .process-step:hover .process-node{transform:scale(1.08);box-shadow:0 10px 26px rgba(12,122,132,.25)}
body.light-page .process-line-fill.animated,
body.light-page .process-line-v-fill.animated{
  box-shadow:0 0 10px rgba(12,122,132,.5);
  animation:process-glow-pulse 2s ease-in-out .3s 2;
}
@keyframes process-glow-pulse{
  0%,100%{box-shadow:0 0 6px rgba(12,122,132,.35)}
  50%{box-shadow:0 0 16px rgba(12,122,132,.75)}
}
@media(prefers-reduced-motion:reduce){
  body.light-page .process-line-fill.animated,
  body.light-page .process-line-v-fill.animated{animation:none}
}

/* ── Two-col visual / single-image-card ── */
body.light-page .two-col-visual{border-color:var(--border);background-color:var(--card-bg)}
body.light-page .single-image-card{background-color:var(--card-bg)}
body.light-page .two-col ul li{color:var(--text)}

/* ── Buttons used outside the dark final-cta band ── */
body.light-page .content-section .btn-secondary,
body.light-page .page-hero .btn-secondary{
  background:transparent;border:1.5px solid var(--border-2);color:var(--text);
}
body.light-page .content-section .btn-secondary:hover,
body.light-page .page-hero .btn-secondary:hover{
  border-color:#0c7a84;color:#0c7a84;background:rgba(12,122,132,.05);
}

/* ── Coverage pills ── */
body.light-page .coverage-pill{background:var(--card-bg);border-color:var(--border);color:var(--text-light)}
body.light-page .coverage-pill:hover{background:#0c7a84;color:#fff;border-color:#0c7a84}

/* ── FAQ marker icon colour ── */
body.light-page .faq-item summary::after{color:#0c7a84}

/* Nav, footer, and .final-cta are intentionally left untouched —
   already hardcoded dark independent of any theme, giving the
   page a consistent dark frame top and bottom either way. */

/* ══════════════════════════════════════════════════════════
   CINEMATIC ENHANCEMENTS — bigger typography, stronger photo
   treatment, more dramatic stat callouts. Builds on the proven
   .reveal scroll-fade already used sitewide (not a new/risky
   pattern), just turned up with more visual confidence.
   ══════════════════════════════════════════════════════════ */
body.light-page .page-hero h1{font-size:3.1rem;letter-spacing:-.01em}
body.light-page .section-header h2{font-size:2.3rem}
@media(max-width:768px){
  body.light-page .page-hero h1{font-size:2.1rem}
  body.light-page .section-header h2{font-size:1.7rem}
}

/* stat callouts: bigger, bolder */
body.light-page .trust-num{font-size:2.3rem;font-weight:700}

/* photo treatment: full-bleed with a subtle zoom on hover, more editorial than a static box */
body.light-page .two-col-visual,
body.light-page .single-image-card{
  overflow:hidden;border-radius:18px;box-shadow:0 24px 56px rgba(16,31,47,.12);
}
body.light-page .two-col-visual{transition:box-shadow .4s cubic-bezier(.23,1,.32,1),transform .4s cubic-bezier(.23,1,.32,1)}
body.light-page .two-col-visual:hover{
  box-shadow:0 10px 20px rgba(16,31,47,.1),0 34px 64px rgba(16,31,47,.24);
  transform:translateY(-8px) scale(1.015);
}
body.light-page .single-image-card img{transition:transform .6s cubic-bezier(.23,1,.32,1)}
body.light-page .single-image-card:hover img{transform:scale(1.04)}

/* more generous section rhythm for a calmer, more premium feel */
body.light-page .content-section,
body.light-page .sectors-section,
body.light-page .faq-section,
body.light-page .process-section,
body.light-page .insurance-section{padding:96px 0}
@media(max-width:768px){
  body.light-page .content-section,
  body.light-page .sectors-section,
  body.light-page .faq-section,
  body.light-page .process-section,
  body.light-page .insurance-section{padding:60px 0}
}

/* card hover: consistent lift across every card type, matching the homepage device */
body.light-page .service-list-card,
body.light-page .sector-card,
body.light-page .insurance-card{transition:box-shadow .35s,transform .35s}
body.light-page .service-list-card:hover,
body.light-page .sector-card:hover,
body.light-page .insurance-card:hover{box-shadow:0 22px 46px rgba(16,31,47,.12);transform:translateY(-4px)}

/* ── Contact page specific cards ── */
body.light-page .contact-method-card{background:var(--card-bg);border-color:var(--border)}
body.light-page .contact-method-card strong{color:var(--text)}
body.light-page .contact-method-card span{color:var(--text-light)}
body.light-page .contact-method-icon{background:rgba(12,122,132,.1)}
body.light-page .contact-method-icon svg{stroke:#0c7a84}

/* ── Final CTA "Ready To Get Started" — converted to light theme for full site consistency ── */
body.light-page .final-cta{
  background:linear-gradient(160deg,#f6f8fa 0%,#eef1f4 100%);color:var(--text);
}
body.light-page .final-cta-orb{background:radial-gradient(circle,rgba(12,122,132,.1) 0%,transparent 65%)}
body.light-page .final-cta-eyebrow{color:#0c7a84}
body.light-page .final-cta h2{color:var(--text)}
body.light-page .final-cta p{color:var(--text-light)}
body.light-page .cta-trust-row{border-top-color:var(--border)}
body.light-page .cta-trust-item{color:var(--text-lighter)}
body.light-page .cta-trust-item svg{stroke:#0c7a84}
body.light-page .final-cta .btn-secondary{
  background:transparent;border:1.5px solid var(--border-2);color:var(--text);
}
body.light-page .final-cta .btn-secondary:hover{
  border-color:#0c7a84;color:#0c7a84;background:rgba(12,122,132,.05);
}

/* ── Mobile nav dropdown: explicit values (not variables), so it's immune to the
   nav-scoped restoration above — this panel is deliberately light regardless of
   the fact its parent nav bar stays dark. ── */
body.light-page .nav-menu.open{background:#f6f8fa;border-color:rgba(16,31,47,.09)}
body.light-page .nav-menu.open>li>a{color:#101f2f;border-color:rgba(16,31,47,.09)}
body.light-page .nav-dropdown a{color:#4a5a6a}
body.light-page .nav-dropdown a:hover{background:rgba(12,122,132,.08);color:#0c7a84}
body.light-page li.has-dropdown.open .nav-dropdown{background:rgba(12,122,132,.05)}

/* ── About page: Why/Outcomes/Testimonials sections ── */
body.light-page .why-item,
body.light-page .outcome-card,
body.light-page .testimonial-card{background:var(--card-bg);border-color:var(--border)}
body.light-page .why-item h3,
body.light-page .outcome-card h3,
body.light-page .testimonial-card .t-name{color:var(--text)}
body.light-page .why-item p,
body.light-page .outcome-card p,
body.light-page .testimonial-text,
body.light-page .t-role{color:var(--text-light)}
body.light-page .why-icon{background:rgba(12,122,132,.1)}
body.light-page .why-icon svg{stroke:#0c7a84}
body.light-page .google-rating-bar{background:var(--card-bg);border-color:var(--border)}
body.light-page .google-rating-text{color:var(--text-light)}

/* ── Accreditation pills, footer-style badges used inline in content ── */
body.light-page .accred-pill{background:var(--card-bg);border-color:var(--border);color:var(--text-light)}
body.light-page .accred-pill svg{stroke:#0c7a84}

/* ── Legal pages (Terms/Privacy/Cookies) ── */
body.light-page .legal-content{color:var(--text-light)}
body.light-page .legal-content h2,
body.light-page .legal-content h3{color:var(--text)}
body.light-page .legal-content a{color:#0c7a84}

/* ── Remaining sections/cards found in final sweep ── */
body.light-page .testimonials-section,
body.light-page .why-section,
body.light-page .quote-embed-section{
  background-color:var(--bg-alt);
  background-image:linear-gradient(rgba(16,31,47,.035) 1px, transparent 1px),linear-gradient(90deg, rgba(16,31,47,.035) 1px, transparent 1px);
  background-size:48px 48px;
}
body.light-page .dual-image-card{border-color:var(--border);background-color:var(--card-bg);box-shadow:0 16px 40px rgba(16,31,47,.12)}
body.light-page .dual-image-card:hover{box-shadow:0 10px 20px rgba(16,31,47,.1),0 30px 60px rgba(16,31,47,.2)}
body.light-page .quote-embed-fallback{color:var(--text-lighter)}
body.light-page .quote-embed-fallback a{color:#0c7a84}
body.light-page .sitemap-grid a{color:var(--text-light)}
body.light-page .sitemap-grid a:hover{color:#0c7a84}