:root{ --bg-photo:url("/assets/img/bg/home.avif"); --bg-photo-opacity:.18; --footer-h:64px }
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background: radial-gradient(1000px 700px at 20% -10%,#13203c,transparent),
  radial-gradient(1000px 800px at 120% 10%,#0f1a32,transparent), linear-gradient(180deg,var(--bg0),var(--bg1));
  color:var(--fg); font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.container{max-width:1100px;margin:0 auto;padding:14px}
.glass{backdrop-filter: blur(18px) saturate(120%); background:var(--glass-bg);
  border:1px solid var(--glass-brd); border-radius:var(--radius); box-shadow:0 18px 60px rgba(0,0,0,.35)}
/* Header */
.brand-name{font-weight:800;letter-spacing:.2px;line-height:1;color:#0a35ff;font-size:18px;white-space:nowrap}
.header{position:sticky; top:0; z-index:10}
.nav{display:flex;justify-content:space-between;align-items:center; gap:16px; padding:10px 16px; margin:16px auto}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;font-weight:700}
.brand span{opacity:.95}
.nav a{color:var(--fg);text-decoration:none;opacity:.9;margin-left:12px}
/* Base button */
.btn {
  --btn-bg:        linear-gradient(180deg, #4ea1ff 0%, #2e7be7 100%);
  --btn-bg-hover:  linear-gradient(180deg, #60abff 0%, #3685f0 100%);
  --btn-bg-active: linear-gradient(180deg, #2e7be7 0%, #1f69d6 100%);
  --btn-fg:        #fff;
  --btn-ring:      0 0 0 3px rgba(62, 144, 255, .35);
  --btn-shadow:    0 8px 24px rgba(46,123,231,.35), inset 0 1px 0 rgba(255,255,255,.25);
  --btn-shadow-sm: 0 4px 14px rgba(46,123,231,.28), inset 0 1px 0 rgba(255,255,255,.25);

  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.15rem;
  border: 0;
  border-radius: 14px;
  color: var(--btn-fg);
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  font: 600 16px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .2s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Primary variant => use class="btn primary" */
.btn.primary {}

/* Hover / active */
.btn.primary:hover { background: var(--btn-bg-hover); box-shadow: var(--btn-shadow); transform: translateY(-1px); }
.btn.primary:active { background: var(--btn-bg-active); box-shadow: var(--btn-shadow-sm); transform: translateY(0); }

/* Keyboard focus ring (AA friendly) */
.btn.primary:focus-visible {
  outline: none;
  box-shadow: var(--btn-shadow), var(--btn-ring);
}

/* Disabled state */
.btn[disabled],
.btn:disabled,
.btn.is-disabled {
  opacity: .65;
  cursor: not-allowed;
  filter: grayscale(.15);
  transform: none;
  box-shadow: none;
}

/* Size helpers */
.btn.sm { padding: .6rem .9rem; font-size: 14px; border-radius: 12px; }
.btn.lg { padding: 1.05rem 1.35rem; font-size: 17px; border-radius: 16px; }

/* Full width option */
.btn.block { display: inline-flex; width: 100%; }

/* Icon alignment inside buttons */
.btn .ic { display:inline-flex; line-height:0; }
.btn .ic svg { width: 1.05em; height: 1.05em; }

/* Loading spinner utility
   add class "is-loading" and include a child .spinner element */
.btn.is-loading { pointer-events: none; }
.btn.is-loading .spinner {
  width: 1.1em; height: 1.1em; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff; animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* Optional dark-glass context tweak (fits your glass UI) */
.glass .btn.primary { box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18); }

main{padding:20px}
/* Hero */
.hero{margin:24px 0}
.hero .body{padding:24px}
.hero h1{margin:0 0 8px; font-size:clamp(28px,4vw,44px)}
.hero p{margin:0 0 14px; color:var(--muted)}
/* Footer */
.footer{margin-top:40px; padding:16px; color:var(--muted); text-align:center}

/* Brand stack */

.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand-icon{height:158px;width:auto;display:block}
.brand-stack{display:flex;flex-direction:column;line-height:1.1}
.brand-line1{font-weight:800;letter-spacing:.4px;font-size:18px;color:#eaf0fb}
.brand-line2{font-weight:600;letter-spacing:.3px;font-size:12.5px;color:#a8b2c6; text-transform:uppercase}
@media (max-width:720px){
  .brand-line1{font-size:15px}
  .brand-line2{font-size:11px}
  .brand-icon{height:28px}
}

/* --- Header tidy (compact, single-line brand lines) --- */
.header{padding:10px 0}
.nav{margin:0;padding:8px 12px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand-icon{height:44px;width:auto;display:block}            /* cap logo size */
.brand-stack{display:flex;flex-direction:column;line-height:1.15}
.brand-line1,.brand-line2{white-space:nowrap}                /* prevent word-by-word wrapping */
.brand-line1{font-weight:800;letter-spacing:.35px;font-size:18px;color:#eaf0fb}
.brand-line2{font-weight:600;letter-spacing:.25px;font-size:12.5px;color:#a8b2c6;text-transform:uppercase}
.nav nav{display:flex;align-items:center;gap:16px}
@media (max-width:900px){ .brand-icon{height:38px}
  .brand-line1{font-size:15px}
  .brand-line2{font-size:11px}
  .nav{flex-wrap:wrap;gap:10px}
  .nav nav{width:100%;justify-content:flex-end}
}

/* Override: brand icon sizing */
.brand-icon{height:64px;width:auto;display:block}
@media (max-width:900px){
  .brand-icon{height:40px}
}

/* Section padding + service cards */
.section{padding:28px}
.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.card{padding:18px;border-radius:16px;border:1px solid var(--brd);background:var(--glass)}
.card:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,0,0,.35)}
.service-card{display:block;text-decoration:none;color:var(--fg)}
.service-card h3{margin:0 0 6px;font-size:18px}
.service-card p{margin:0;color:var(--muted)}

/* --- Layout: header fixed to top, footer at bottom --- */
.layout{min-height:100vh;display:flex;flex-direction:column}
.header{position:sticky;top:0;z-index:20;padding:10px 0}
.content{flex:1; padding-top:8px; padding-bottom:12px} /* space so content never crashes into footer */
.site-footer{margin-top:16px; padding:12px 0}
.footer-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px;border-radius:18px;border:1px solid var(--brd);background:var(--glass);backdrop-filter:saturate(120%) blur(18px)}
.footer-links{display:flex;flex-wrap:wrap;gap:10px}
.footer-links a{display:inline-block;padding:8px 12px;border-radius:12px;border:1px solid var(--brd);text-decoration:none;color:var(--fg);opacity:.92}
.footer-links a:hover{opacity:1}
.footer-meta{color:var(--muted);font-size:14px}

/* Slightly larger brand icon (adjust as you like) */
.brand-icon{height:64px;width:auto;display:block}
@media (max-width:900px){
  .footer-bar{flex-direction:column;align-items:flex-start}
  .brand-icon{height:40px}
}

/* Layout fixes */
.layout{min-height:100vh;display:flex;flex-direction:column}
.header{position:sticky;top:0;z-index:20}
.content{flex:1;padding:20px 0}
.section{padding:28px;margin:10px 0}

/* --- Fixed footer bar --- */
/* removed */.site-footer{position:fixed;left:0;right:0;bottom:0;z-index:15;padding:10px 0}
.footer-bar{border-radius:16px}
/* removed */.content{padding-bottom:100px} /* reserve space for the fixed footer */

/* Mobile: footer a bit taller, reserve more space */
@media (max-width:900px){
  .site-footer{padding:12px 0}
  /* removed */.content{padding-bottom:120px}
}


/* --- Stable layout & sticky footer (no jumping) --- */
html{scrollbar-gutter: stable}
.layout{min-height:100dvh;display:flex;flex-direction:column}
.header{position:sticky;top:0;z-index:20}
.content{flex:1; padding:20px 0}
.site-footer{margin-top:auto; padding:12px 0}        /* footer sits at the foot naturally */
.footer-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 14px;border-radius:18px;border:1px solid var(--brd);background:var(--glass);
  backdrop-filter:saturate(120%) blur(18px)}
@media (max-width:900px){ .footer-bar{flex-direction:column;align-items:flex-start} }

/* --- Page transitions (respect reduced motion) --- */
.page{opacity:0; transform:translateY(4px); transition:opacity .28s ease, transform .28s ease}
.page--in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .page{transition:none; opacity:1!important; transform:none!important}
}

/* --- Form polish --- */
.form{display:grid;gap:14px;max-width:720px}
.field{display:grid;gap:6px}
label span{color:var(--muted);font-weight:600}
.input, textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--brd);background:rgba(255,255,255,.06);color:var(--fg)}
textarea{min-height:120px;resize:vertical}
.input:focus, textarea:focus{outline:0;box-shadow:0 0 0 3px rgba(45,123,255,.25)}
.help{font-size:13px;color:var(--muted)}
.err{color:#ff9a9a;font-size:13px}
.inline{display:flex;gap:12px;flex-wrap:wrap}
.badge{display:inline-block;padding:6px 10px;border-radius:12px;border:1px solid var(--brd);background:rgba(255,255,255,.06);font-size:13px}
.hp{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.actions{display:flex;gap:10px;align-items:center}
.success{padding:12px;border-radius:12px;background:rgba(60,200,120,.15);border:1px solid rgba(60,200,120,.35)}

/* --- Footer & layout: definitive reset --- */
.layout{min-height:100vh; display:flex; flex-direction:column}
.content{flex:1 0 auto; padding:24px 0 48px !important}   /* bottom space so buttons aren't covered */
.site-footer{
  position:static !important;  /* ensure no fixed/absolute leftovers */
  left:auto; right:auto; bottom:auto; margin-top:auto; padding:14px 0;
}
.footer-bar{
  position:static !important;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 14px; border-radius:18px; border:1px solid var(--brd); background:var(--glass);
  backdrop-filter:saturate(120%) blur(18px);
}
@media (max-width:900px){
  .footer-bar{flex-direction:column; align-items:flex-start}
  .content{padding-bottom:72px !important}
}

/* ===== Layout tidy: fixed footer + compact spacing (override block) ===== */
:root{ --footer-h:64px }                     /* footer height */

html{scrollbar-gutter:stable}                /* no layout jump */
.layout{min-height:100dvh;display:flex;flex-direction:column}
.header{position:sticky;top:0;z-index:20}

/* Fixed footer that does NOT block content */
.site-footer{
  position:fixed; left:0; right:0; bottom:0; height:var(--footer-h);
  z-index:15; padding:10px 0;
}
.footer-bar{
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 14px; border-radius:16px; border:1px solid var(--brd);
  background:var(--glass); backdrop-filter:saturate(120%) blur(18px)
}
/* Reserve space so content can scroll fully behind the fixed footer */
.content{flex:1; padding:16px 0 calc(var(--footer-h) + 16px)}

/* Compact the global spacing */
.container{max-width:1120px;margin:0 auto;padding:18px}
.section{padding:20px;margin:10px 0}
h1{margin:0 0 8px}
p{margin:0 0 10px}

/* Contact form: tighter rhythm */
.form{display:grid;gap:10px;max-width:680px}
.field{gap:6px}
.input, textarea{padding:9px 12px}
textarea{min-height:110px}

/* Header: slimmer */
.header .nav{padding:4px 6px}
.brand-icon{height:76px}
@media (max-width:900px){
  :root{ --footer-h:82px }                   /* slightly taller footer on mobile */
  .footer-bar{flex-direction:column;align-items:flex-start;padding:8px 12px}
  .brand-icon{height:38px}
}

/* --- FIXED FOOTER: exact height, no under-gap --- */
:root{ --footer-h: 72px }               /* footer bar total height (change here if you want taller/shorter) */

.site-footer{
  position:fixed; left:0; right:0; bottom:0;
  height:var(--footer-h); z-index:15; padding:0;   /* no vertical padding here */
  background:transparent;                           /* avoid double background strip */
}
.site-footer .container{ height:100%; padding:0 18px }  /* only horizontal padding */
.footer-bar{
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 14px;                                   /* inner horizontal padding only */
  border-radius:16px; border:1px solid var(--brd);
  background:var(--glass); backdrop-filter:saturate(120%) blur(18px)
}

/* Reserve EXACT space for the fixed footer so content can scroll fully */
.content{ flex:1; padding:16px 0 calc(var(--footer-h) + 12px) }

/* Mobile tweak */
@media (max-width:900px){
  :root{ --footer-h: 84px }
  .footer-bar{flex-direction:column; align-items:flex-start}
}
.icon{width:22px;height:22px;display:inline-block;color:#9db6ff}
.icon-lg{width:28px;height:28px}
.service-card h3{display:flex;align-items:center;gap:10px}
.label-icon{display:inline-flex;align-items:center;gap:8px}
#bgfx{ position:fixed; inset:0; z-index:0; pointer-events:none }
/* Mask icons */
.ico{display:inline-block;width:22px;height:22px;background-color:#9db6ff;vertical-align:-3px}
.ico-lg{width:28px;height:28px}
.ico, .ico::before{ -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
                    mask-repeat:no-repeat; mask-position:center; mask-size:contain }
/* per-icon masks */
.ico-bolt{ -webkit-mask-image:url("/assets/img/icons/bolt.svg"); mask-image:url("/assets/img/icons/bolt.svg") }
.ico-meter{ -webkit-mask-image:url("/assets/img/icons/meter.svg"); mask-image:url("/assets/img/icons/meter.svg") }
.ico-phone{ -webkit-mask-image:url("/assets/img/icons/phone.svg"); mask-image:url("/assets/img/icons/phone.svg") }
.ico-wrench{ -webkit-mask-image:url("/assets/img/icons/wrench.svg"); mask-image:url("/assets/img/icons/wrench.svg") }
.ico-bulb{ -webkit-mask-image:url("/assets/img/icons/bulb.svg"); mask-image:url("/assets/img/icons/bulb.svg") }
.ico-plug{ -webkit-mask-image:url("/assets/img/icons/plug.svg"); mask-image:url("/assets/img/icons/plug.svg") }
.ico-shield{ -webkit-mask-image:url("/assets/img/icons/shield.svg"); mask-image:url("/assets/img/icons/shield.svg") }
/* headings that include icons */
.service-card h3{display:flex;align-items:center;gap:10px}
.label-icon{display:inline-flex;align-items:center;gap:8px}
.ic{display:inline-flex;align-items:center;color:#9db6ff}
.ic svg{width:22px;height:22px;display:block}
.ic-lg svg{width:28px;height:28px}
.service-card h3{display:flex;align-items:center;gap:10px}
.label-icon{display:inline-flex;align-items:center;gap:8px}

/* --- Icon tune: bigger + per-colour, with priority to beat old rules --- */
.service-card .ic svg,
.label-icon .ic svg{width:30px !important;height:30px !important}
.label-icon .ic.ic-lg svg{width:34px !important;height:34px !important}

/* colours */
.icc-amber{color:#ffb84d !important}
.icc-cyan{color:#5fd4ff !important}
.icc-teal{color:#2fd3b5 !important}
.icc-yellow{color:#ffe066 !important}
.icc-purple{color:#b08cff !important}
.icc-green{color:#72e28b !important}
.icc-blue{color:#9db6ff !important}

.service-card h3{gap:12px}
/* --- Services cards: glassmorph idle + hover lift/glow --- */
.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:18px}
.card.service-card{
  position:relative; isolation:isolate;
  padding:18px 18px 16px; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 24px rgba(0,0,0,.24);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  text-decoration:none; color:var(--fg);
}
.card.service-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 14px 38px rgba(0,0,0,.36);
  border-color: rgba(157,182,255,.28);
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
}
.card.service-card:focus-visible{
  outline:0;
  box-shadow: 0 0 0 3px rgba(80,140,255,.35), 0 10px 30px rgba(0,0,0,.35);
}
.card.service-card:active{ transform: translateY(-1px) }
.card.service-card h3{margin:0 0 6px}
.card.service-card p{margin:0;color:var(--muted);font-size:17px}
.prose{line-height:1.7}
.lead{font-size:18px;color:var(--muted)}
/* Footer must always be fixed and consistent (even if other rules load earlier) */
.site-footer{position:fixed!important;left:0;right:0;bottom:0;z-index:15;height:var(--footer-h)}
.site-footer .container{height:100%}
.content{padding-bottom:calc(var(--footer-h) + 14px)!important}
/* Sitemap */
.sitemap{display:grid;gap:18px}
.sitemap .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.link-pill{display:inline-block;padding:10px 14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);text-decoration:none}
.link-pill:hover{border-color:rgba(157,182,255,.28)}
.sitemap ul{list-style:none;margin:6px 0 0 0;padding:0;display:grid;gap:8px}
.sitemap li a{text-decoration:none}
/* Background photo layer (sits behind the canvas) */
:root{ --bg-photo-opacity:.18 } /* site-wide default; tweak freely */
.bg-photo{
  position:fixed; inset:0;
  z-index: -1;                /* under everything */
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity: var(--bg-photo-opacity);
  transition: opacity .25s ease, filter .25s ease;
  filter: saturate(1.05) contrast(1.02) brightness(0.95); /* subtle grade under glass */
}
/* If you ever want a page to be more subtle, set --bg-photo-opacity on .page */
/* show the page photo under the lights */
#bgfx{ opacity:.08 }
/* --- Persistent stacking order --- */
:root{ --footer-h:64px }

.bg-photo{ position:fixed; inset:0; z-index:0; background-position:center; background-size:cover; background-repeat:no-repeat; opacity:var(--bg-photo-opacity,0.35); filter:saturate(1.05) contrast(1.02) brightness(.95); transition:opacity .25s ease, filter .25s ease; }
#bgfx{ opacity:1; pointer-events:none } /* lights over photo */
.page{ position:relative; z-index:5; min-height:calc(100vh - var(--footer-h)); padding-bottom:calc(var(--footer-h) + 16px) !important }

/* Footer always fixed and visible above content */
.site-footer{ position:fixed !important; left:0; right:0; bottom:0; height:var(--footer-h); z-index:30 }
.site-footer .container{ height:100% }
/* Brighter glass containers */
.section.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 2px 0 rgba(255,255,255,.07) inset, 0 14px 38px rgba(0,0,0,.36);
}
.card.service-card{
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06));
  border-color: rgba(255,255,255,.16);
}
:root{ --footer-h:64px }
.bg-photo{ z-index:0; }
#bgfx{ position:fixed; inset:0; z-index:1; pointer-events:none }
.page{ position:relative; z-index:5; min-height:calc(100vh - var(--footer-h)); padding-bottom:calc(var(--footer-h) + 16px) !important }
.site-footer{ position:fixed !important; left:0; right:0; bottom:0; height:var(--footer-h); z-index:30 }

/* emergency: keep content visible even if JS fails */
.page{opacity:1 !important}

:root{--footer-h:64px}
.site-footer{position:fixed;left:0;right:0;bottom:0;height:var(--footer-h);z-index:30}
.page{min-height:calc(100vh - var(--footer-h));padding-bottom:calc(var(--footer-h) + 16px)!important}

/* Backdrop photo layer via CSS only (no JS dependency) */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0;
  background: var(--bg-photo, none) center / cover no-repeat;
  opacity: var(--bg-photo-opacity, .35);
  filter: saturate(1.05) contrast(1.02) brightness(.95);
  pointer-events:none;
}

/* Per-page images (set by data-page on <body>) */
body[data-page="home"]             { --bg-photo: url("/assets/img/bg/home.avif") }
body[data-page="services"]         { --bg-photo: url("/assets/img/bg/home.avif") }
body[data-page="contact"]          { --bg-photo: url("/assets/img/bg/contact.avif") }
/* Service details by slug on <body data-service="..."> */
body[data-service="electrical-works"]   { --bg-photo: url("/assets/img/bg/electrical-works.avif") }
body[data-service="compliance-testing"] { --bg-photo: url("/assets/img/bg/compliance-testing.avif") }
body[data-service="emergency-call-out"] { --bg-photo: url("/assets/img/bg/emergency-call-out.avif") }
body[data-service="led-upgrades"]       { --bg-photo: url("/assets/img/bg/led-upgrades.avif") }
body[data-service="ev-charging"]        { --bg-photo: url("/assets/img/bg/ev-charging.avif") }
body[data-service="wet-plumbing"]       { --bg-photo: url("/assets/img/bg/wet-plumbing.avif") }
body[data-service="handyman-services"]  { --bg-photo: url("/assets/img/bg/handyman-services.avif") }
body[data-service="small-works"]        { --bg-photo: url("/assets/img/bg/small-works.avif") }
/* Per-page images via <body data-page="..."> */
body[data-page="home"]             { --bg-photo: url("/assets/img/bg/home.avif") }
body[data-page="services"]         { --bg-photo: url("/assets/img/bg/home.avif") }
body[data-page="contact"]          { --bg-photo: url("/assets/img/bg/contact.avif") }
body[data-page="privacy"]          { --bg-photo: url("/assets/img/bg/home.avif") }
body[data-page="cookies"]          { --bg-photo: url("/assets/img/bg/home.avif") }
body[data-page="terms"]            { --bg-photo: url("/assets/img/bg/home.avif") }
body[data-page="accessibility"]    { --bg-photo: url("/assets/img/bg/home.avif") }
body[data-page="data-protection"]  { --bg-photo: url("/assets/img/bg/home.avif") }
body[data-page="sitemap"]          { --bg-photo: url("/assets/img/bg/home.avif") }
/* Service detail photos via <body data-service="slug"> */
body[data-service="electrical-works"]   { --bg-photo: url("/assets/img/bg/electrical-works.avif") }
body[data-service="compliance-testing"] { --bg-photo: url("/assets/img/bg/compliance-testing.avif") }
body[data-service="emergency-call-out"] { --bg-photo: url("/assets/img/bg/emergency-call-out.avif") }
body[data-service="led-upgrades"]       { --bg-photo: url("/assets/img/bg/led-upgrades.avif") }
body[data-service="ev-charging"]        { --bg-photo: url("/assets/img/bg/ev-charging.avif") }
body[data-service="wet-plumbing"]       { --bg-photo: url("/assets/img/bg/wet-plumbing.avif") }
body[data-service="handyman-services"]  { --bg-photo: url("/assets/img/bg/handyman-services.avif") }
body[data-service="small-works"]        { --bg-photo: url("/assets/img/bg/small-works.avif") }
/* --- Radius system (and enforce it everywhere that should be rounded) --- */
:root{
  --r-xl: 26px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
}

/* Header & footer shells */
header, .site-header, .site-header .container{
  border-radius: var(--r-md) !important;
  overflow: hidden;
}
.site-footer, .site-footer .container{
  border-radius: var(--r-md) !important;
  overflow: hidden;
}

/* Main glass sections */
.section.glass{
  border-radius: var(--r-lg) !important;
  overflow: hidden;                 /* clip inner glow so corners stay rounded */
  backdrop-filter: blur(18px);
}

/* Cards (services etc.) */
.card, .card.service-card, .glass .card, .card .inner{
  border-radius: var(--r-md) !important;
  overflow: hidden;
}

/* Service tiles grid item fix */
.service-grid > .card.service-card{
  border-radius: var(--r-md) !important;
}

/* Link pills (sitemap / footer buttons) */
.link-pill{
  border-radius: var(--r-sm) !important;
}

/* Prevent any reset from zeroing radii inside glass blocks */
.section.glass *{
  border-radius: inherit;
}

/* Keep shadows/glow crisp around rounded edges */
.section.glass,
.card.service-card{
  box-shadow: 0 2px 0 rgba(255,255,255,.07) inset, 0 14px 38px rgba(0,0,0,.36);
}
#bgfx{ position:fixed; inset:0; z-index:1; pointer-events:none } /* sits above photo, below content */
.bg-photo, body::before{ z-index:0 }
.page{ position:relative; z-index:5 }
.site-footer{ z-index:30 }
/* --- STACK ORDER --- */
html, body { background:#000; }                 /* ➊ solid black base */
body::before{ z-index:0 !important; }           /* ➋ photo */
#bgfx{ position:fixed; inset:0; z-index:1;       /* ➌ lights canvas */
      pointer-events:none }
.page{ position:relative; z-index:5; }           /* ➍ content */
.site-footer{ z-index:30; }                      /* ➎ footer above content */

/* --- HEADER RADIUS / CONTAINER --- */
:root{
  --r-md: 16px;
}
header, .site-header, .site-header .container, nav.main-nav{
  border-radius: var(--r-md) !important;
  overflow: hidden;                /* clip inner glow so corners stay rounded */
}
/* keep header looking glassy if any reset dulled it */
header, .site-header{
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 28px rgba(0,0,0,.28);
}
/* ——— PALETTE & TEXT ——— */
:root{
  --fg: #E9F1FF;             /* main text */
  --fg-strong: #F6FAFF;      /* headings */
  --muted: #B7C3D9;          /* secondary text */
  --link: #A7C5FF;
  --link-hover: #CFE0FF;
}

/* Global light text */
body, .page, .section.glass, .card, .card.service-card, .prose{ color: var(--fg); }
h1,h2,h3,h4{ color: var(--fg-strong); }
a{ color: var(--link); text-decoration: none; }
a:hover{ color: var(--link-hover); }

/* ——— HEADER: remove the unwanted inner container box, keep rounded/glass look ——— */
.site-header .container{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.site-header, header{
  border-radius: 16px !important;
  overflow: hidden;
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  background: linear-gradient(180deg, rgba(22,30,48,.60), rgba(16,22,40,.45)) !important;
  border: 1px solid rgba(135,175,255,.22) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 28px rgba(0,0,0,.28);
}
.site-header nav a{ color: var(--fg) !important; }

/* ——— GLASS CONTAINERS: punchy again ——— */
.section.glass{
  border-radius: 22px !important;
  overflow: hidden;
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  background: linear-gradient(180deg, rgba(16,23,40,.55), rgba(16,23,40,.40)) !important;
  border: 1px solid rgba(135,175,255,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.45);
}

/* Service cards */
.card.service-card{
  border-radius: 16px !important;
  overflow: hidden;
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  background: linear-gradient(180deg, rgba(20,30,50,.48), rgba(18,26,44,.36)) !important;
  border: 1px solid rgba(135,175,255,.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 26px rgba(0,0,0,.40);
}
.card.service-card:hover{
  border-color: rgba(160,200,255,.45) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 38px rgba(0,0,0,.55);
}

/* ——— STACK ORDER (black → photo → canvas → content) stays as requested ——— */
html, body { background:#000; }
body::before{ z-index:0 !important; }
#bgfx{ position:fixed; inset:0; z-index:1; pointer-events:none; }
.page{ position:relative; z-index:5; }
.site-footer{ z-index:30; }
/* =======================================================================
   FINAL OVERRIDES — header, radii, glass, and performance tidy
   ======================================================================= */

/* 0) Stack order stays: black → photo → lights → content */
html,body{background:#000}
body::before{z-index:0!important}
#bgfx{position:fixed;inset:0;z-index:1;pointer-events:none}
.page{position:relative;z-index:5}

/* 1) Radius system */
:root{
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
}

/* 2) HEADER — a single rounded glass bar; kill inner container box */
.site-header{ 
  border-radius: var(--r-md) !important;
  overflow: hidden;
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  background: linear-gradient(180deg, rgba(18,24,40,.58), rgba(14,20,36,.44)) !important;
  border: 1px solid rgba(135,175,255,.22) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 24px rgba(0,0,0,.30);
}
.site-header .container{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 3) MAIN GLASS SECTION — crisp glass */
.section.glass{
  border-radius: var(--r-lg) !important;
  overflow: hidden;
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  background: linear-gradient(180deg, rgba(18,26,46,.52), rgba(16,24,44,.40)) !important;
  border: 1px solid rgba(135,175,255,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.40);
}

/* 4) SERVICE CARDS — remove extra blur; keep lightweight glass (fixes haze & lag) */
.card.service-card{
  border-radius: var(--r-md) !important;
  overflow: hidden;
  /* No backdrop-filter here → prevents double-blur compounding */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: linear-gradient(180deg, rgba(24,32,56,.46), rgba(20,28,50,.34)) !important;
  border: 1px solid rgba(135,175,255,.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(0,0,0,.35);
}
.card.service-card:hover{
  border-color: rgba(160,200,255,.40) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.48);
}

/* 5) Typography — keep light text */
:root{ --fg:#E9F1FF; --fg-strong:#F6FAFF; --muted:#B7C3D9; --link:#A7C5FF; --link-hover:#CFE0FF }
body,.page,.section.glass,.card,.card.service-card,.prose{color:var(--fg)}
h1,h2,h3{color:var(--fg-strong)}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}
/* stack: black → photo (-1) → canvas (0) → UI (1) */
html,body{ background:#000; position:relative; z-index:0 }
.page, .site-header, .site-footer{ position:relative; z-index:1 }
/* centered, rounded header bar */
.site-header{
  display:block;
  max-width: 1180px;       /* adjust to taste */
  margin: 18px auto;       /* centers the bar */
  padding: 10px 16px;
  border-radius: 16px !important;
  overflow: hidden;
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  background: linear-gradient(180deg, rgba(18,24,40,.62), rgba(14,20,36,.46)) !important;
  border: 1px solid rgba(135,175,255,.22) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 24px rgba(0,0,0,.30);
}
.site-header .container{ background:transparent!important; border:0!important; box-shadow:none!important }
/* crisp section glass; cards without extra blur */
.section.glass{
  border-radius: 22px !important;
  overflow:hidden;
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  background: linear-gradient(180deg, rgba(18,26,46,.52), rgba(16,24,44,.40)) !important;
  border: 1px solid rgba(135,175,255,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.40);
}
.card.service-card{
  border-radius:16px !important; overflow:hidden;
  -webkit-backdrop-filter:none!important; backdrop-filter:none!important; /* prevents hazy double-blur */
  background: linear-gradient(180deg, rgba(24,32,56,.46), rgba(20,28,50,.34)) !important;
  border:1px solid rgba(135,175,255,.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(0,0,0,.35);
}
/* ===== STACK ORDER FIX (override at the end) ===== */
body::before{ z-index:-1 !important; }                  /* photo under everything */
#bgfx{ position:fixed; inset:0; z-index:0 !important;    /* lights between photo & UI */
      pointer-events:none }
.page, .site-header, .site-footer{ 
  position:relative; z-index:1 !important;              /* UI above canvas */
}

/* ===== HEADER: centered rounded glass bar (not full width) ===== */


/* ===== GLASS CONTAINERS stay crisp ===== */
.section.glass{
  border-radius:22px !important;
  overflow:hidden;
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  background: linear-gradient(180deg, rgba(18,26,46,.52), rgba(16,24,44,.40)) !important;
  border: 1px solid rgba(135,175,255,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.40);
}

/* ===== Cards: remove extra blur (prevents milky double-blur) ===== */
.card.service-card{
  border-radius:16px !important; overflow:hidden;
  -webkit-backdrop-filter:none!important; 
  backdrop-filter:none!important;
  background: linear-gradient(180deg, rgba(24,32,56,.46), rgba(20,28,50,.34)) !important;
  border:1px solid rgba(135,175,255,.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(0,0,0,.35);
}
/* Header: pill shape only (keep existing style) */
.site-header{
  max-width: 1240px;        /* same centered bar, tweak if you like */
  margin: 18px auto;        /* centered */
  padding: 10px 18px;       /* same internal spacing */
  border-radius: 9999px !important;  /* <- pill ends */
  overflow: hidden !important;       /* clip to pill */
}
/* ensure inner wrapper can't square the ends */
.site-header .container{
  border-radius: inherit !important;
  overflow: hidden !important;
}
/* ===== Header: SINGLE pill container ===== */
.site-header{
  position: relative;
  max-width: 1240px;         /* adjust if you want it narrower/wider */
  margin: 18px auto;
  padding: 10px 18px;
  border-radius: 9999px !important;   /* pill */
  overflow: hidden !important;
  /* make the real element transparent; we'll paint the pill once in ::before */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}

/* Paint the pill ONCE (no duplicate inner boxes) */
.site-header::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(18,24,40,.62), rgba(14,20,36,.46));
  border: 1px solid rgba(135,175,255,.22);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 24px rgba(0,0,0,.30);
  pointer-events: none;       /* let clicks fall through */
}

/* Neutralise ANY inner container/nav trying to draw its own box */
.site-header .container,
.site-header nav,
.site-header .container::before,
.site-header nav::before{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;   /* shape is controlled by the outer pill only */
  overflow: visible !important;
}
/* ===== Header: SINGLE pill container ===== */
.site-header{
  position: relative;
  max-width: 768px;         /* adjust if you want it narrower/wider */
  margin: 9px auto;
  padding: 5px 9px;
  border-radius: 18px !important;   /* pill */
  overflow: hidden !important;
  /* make the real element transparent; we'll paint the pill once in ::before */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}

/* Paint the pill ONCE (no duplicate inner boxes) */
.site-header::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(18,24,40,.62), rgba(14,20,36,.46));
  border: 1px solid rgba(135,175,255,.22);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 24px rgba(0,0,0,.30);
  pointer-events: none;       /* let clicks fall through */
}

/* Neutralise ANY inner container/nav trying to draw its own box */
.site-header .container,
.site-header nav,
.site-header .container::before,
.site-header nav::before{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;   /* shape is controlled by the outer pill only */
  overflow: visible !important;
}
/* ===== FINAL HEADER GEOMETRY (wins over everything above) ===== */
/* Handle either class name your markup might use */
:is(.header,.site-header){
  position: sticky; top: 0; z-index: 25;           /* keep sticky bar */
  width: min(100%, 1085px);                        /* the pill width */
  margin: 3px auto;                               /* center it */
  padding: 0px 9px;
  border-radius: 18px !important;                /* pill ends */
  overflow: hidden !important;

  /* header itself is transparent; we paint the glass once in ::before */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}

/* Paint ONE glass skin (prevents the “second container” look) */
:is(.header,.site-header)::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background: linear-gradient(180deg, rgba(18,24,40,.62), rgba(14,20,36,.46));
  border: 1px solid rgba(135,175,255,.22);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 24px rgba(0,0,0,.30);
  pointer-events:none;
}

/* Nuke ANY inner background/border/shadow so only the outer pill shows */
:is(.header,.site-header) .container,
:is(.header,.site-header) .nav,
:is(.header,.site-header) .container::before,
:is(.header,.site-header) .nav::before{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;       /* shape controlled by the outer pill */
  overflow: visible !important;
}

.site-header{
  display:block;
  max-width:1180px;          /* adjust to taste (e.g., 1080/1240) */
  margin:18px auto;          /* centers the bar */
  padding:10px 16px;
  border-radius:16px !important;
  overflow:hidden;
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  background: linear-gradient(180deg, rgba(18,24,40,.62), rgba(14,20,36,.46)) !important;
  border:1px solid rgba(135,175,255,.22) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 24px rgba(0,0,0,.30);
}
.site-header .container{ background:transparent!important; border:0!important; box-shadow:none!important }

/* ===== LAYERING to keep everything crisp ===== */
body::before{ z-index:-1 !important; }             /* photo at the back */
#bgfx{ position:fixed; inset:0; z-index:0 !important; pointer-events:none }  /* lights */
.page{ position:relative; z-index:1 }              /* content above lights */
:is(.header,.site-header), .site-footer{ z-index: 30 } /* header/footer above content */

/* ========= FAQ Accordion (Service pages) ========= */
.faq { margin-top: 28px; }
.faq-title { margin: 0 0 12px; font-size: 1.4rem; font-weight: 700; }

.faq-accordion { display: grid; gap: 10px; }

.faq-item {
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}

.faq-item[open] {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.15);
}

.faq-q {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  font-weight: 600;
}

.faq-q::-webkit-details-marker { display: none; } /* hide default marker */
.faq-q-text { line-height: 1.2; }

.faq-icon {
  width: 18px; height: 18px; position: relative; display: inline-block;
}
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; inset: 0;
  margin: auto; width: 14px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .2s ease;
}
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); } /* morph + to – */

.faq-a {
  padding: 0 16px 14px 16px;
  color: #e8eefc;
  opacity: .95;
}

.faq-a p { margin: 0; }

/* subtle motion */
.faq-item .faq-a { animation: faq-reveal .18s ease; }
@keyframes faq-reveal { from { opacity:0; transform: translateY(-4px);} to{opacity:1; transform:translateY(0);} }



/* ========= Floating “Established 1976” badge ========= */
.established-badge {
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 9999;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(36,36,36,.75), rgba(16,16,16,.75));
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
@media (max-width: 640px) {
  .established-badge { right: 12px; top: 12px; padding: 8px 12px; }
}

.badge-medal {
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff7c5 0%, #f7d879 35%, #d7a728 65%, #9b6b00 100%);
  border: 2px solid rgba(255,255,255,.35);
  position: relative;
  box-shadow: inset 0 0 10px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.25);
}
.badge-medal::after {
  content:"★"; position:absolute; inset:0; display:grid; place-items:center;
  font-size: 15px; color: rgba(60,40,0,.9);
  text-shadow: 0 1px 0 #fff6, 0 -1px 0 #0002;
}

.badge-text { color: #fff; font-size: .95rem; line-height: 1.15; }
.badge-text strong { font-weight: 700; }
#years-running { opacity: .9; }



/* ========= Home hero (copy + trust logos) ========= */
.home-hero { position: relative; padding: 42px; }
.home-hero .hero-grid { display: grid; gap: 24px; grid-template-columns: 1.2fr 1fr; }
@media (max-width: 960px) { .home-hero .hero-grid { grid-template-columns: 1fr; } }

.home-hero h1 { margin: 0 0 8px; font-size: clamp(1.8rem, 2.8vw, 2.6rem); }
.home-hero .hero-lead { margin: 6px 0 14px; font-size: 1.05rem; opacity: .95; }
.home-hero .hero-benefits { margin: 0 0 16px; padding-left: 18px; }
.home-hero .hero-benefits li { margin: 6px 0; }
.nowrap { white-space: nowrap; }

.home-hero .hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.35); }
.home-hero .microcopy { margin-top: 10px; opacity: .85; font-size: .92rem; }

/* Trust logos */
.trust-logos { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; list-style: none; padding: 0; margin: 0 0 8px; }
.trust-logos img { display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); border-radius: 6px; }

/* Small pill list under hero */
.home-services { margin-top: 18px; }
.service-pills { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:10px 0 0; }
.service-pills a {
  display:inline-block; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
}
.service-pills a:hover { background: rgba(255,255,255,.1); }


/* ====== HOMEPAGE POLISH ====== */

/* 1) Hero: spacing, edge softness, legibility */
.hero.glass {
  margin-top: 24px;                 /* breathe from header */
  border-radius: 18px;
  padding: 36px 32px;
  box-shadow: 0 10px 36px rgba(0,0,0,.35);
  background: linear-gradient(180deg, rgba(20,26,40,.75), rgba(16,22,34,.65)); /* slightly darker for contrast */
  border: 1px solid rgba(255,255,255,.12);
}
.hero-copy h1 {
  letter-spacing: .2px;
  line-height: 1.15;
  text-wrap: balance;
}
.hero-lead {
  opacity: .95;
  margin-bottom: 14px;
}

/* keep badge from covering text on narrower screens */
@media (max-width: 1100px) {
  .established-badge { top: 12px; right: 12px; transform: scale(.95); }
  .hero.glass { padding-top: 54px; } /* give room above */
}
@media (max-width: 640px) {
  .established-badge { transform: scale(.9); }
  .hero.glass { padding-top: 64px; }
}

/* 2) Section headings + spacing harmony */
.section + .section { margin-top: 28px; }
.section h2 {
  margin: 0 0 12px;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  font-weight: 800;
}
/* ===== HOMEPAGE POLISH v2 (spacing + no logo clipping) ===== */

/* 1) Give the hero some breathing room from the section below */
.hero.glass{
  margin-top:24px;
  margin-bottom:22px;      /* NEW: pushes “Accreditations” down */
  border-radius:18px;
  padding:36px 32px;
}

/* 2) Accreditations section: centered row, consistent cards, NO CROPPING */
.hero-trust{ margin-top: 12px; }

.trust-logos{
  display:flex;
  justify-content:center;  /* center the strip */
  align-items:stretch;
  flex-wrap:wrap;
  gap:18px;
  list-style:none;
  padding:0;
  margin:14px auto 8px;
  max-width:980px;
}

/* Card sizing:
   - use aspect-ratio so all cards match
   - generous padding so tall/wide logos fit
   - NO overflow clipping
*/
.trust-logos li{
  display:flex;
  align-items:center;
  justify-content:center;
  width: clamp(220px, 26vw, 300px);
  aspect-ratio: 5 / 3;           /* uniform card shape */
  padding: 14px 18px;            /* space for tall/oval logos */
  border-radius:12px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  overflow: visible;              /* IMPORTANT: never crop the image */
}

/* Logo fits entirely inside the card—no cropping */
.trust-logos img{
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  object-fit: contain;            /* preserve proportions inside frame */
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.22));
}

/* Caption below logos */
.hero-trust .microcopy{
  text-align:center;
  max-width:980px;
  margin:10px auto 0;
  opacity:.9;
}

/* 3) Badge & hero interactions on narrower screens (avoid overlaps) */
@media (max-width:1100px){
  .established-badge{ top:12px; right:12px; transform:scale(.95); }
  .hero.glass{ padding-top:56px; }
}
@media (max-width:640px){
  .established-badge{ transform:scale(.9); }
  .hero.glass{ padding-top:64px; }
}



/* ===== HOMEPAGE — final spacing + icon pills (non-breaking overrides) ===== */

/* 1) HERO box: flatten nested padding, set one canonical padding */
.hero .body, .hero .inner, .hero .content { padding: 0 !important; }
.hero.glass { 
  padding: 28px 28px 22px !important;   /* was 36/32; a touch leaner */
  margin: 18px 0 26px !important;       /* gives space before Accreditations */
  border-radius: 18px !important;
}
.hero-copy h1 { margin: 0 0 10px !important; line-height: 1.12; }
.hero-lead { margin: 0 0 12px !important; }
.hero-copy ul { margin: 0 0 14px !important; padding-left: 18px !important; }
.hero-ctas { margin-top: 6px !important; gap: 10px; }

/* Keep the floating badge from overlapping on small screens */
@media (max-width: 1100px){
  .hero.glass { padding-top: 56px !important; }
}
@media (max-width: 640px){
  .hero.glass { padding-top: 64px !important; }
}

/* 2) Popular services: compact section + consistent pill sizing */
.home-services.section.glass { 
  padding: 18px 22px !important; 
  margin-top: 18px !important;
}
.home-services h2 { margin: 0 0 10px !important; }
.service-pills { 
  margin: 8px 0 0 !important; 
  gap: 12px !important; 
}
.service-pills a{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px !important;
  font-weight: 600; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  text-decoration: none;
}

/* 3) Iconised pills (uses your existing .ico-* mask icons) */
.service-pills .ico{ 
  width: 20px; height: 20px; 
  background-color: currentColor; 
  flex: 0 0 20px;
}

/* brand colours per pill */
.service-pills a[data-ic="bolt"]  { color: #ffb84d; } /* amber */
.service-pills a[data-ic="meter"] { color: #5fd4ff; } /* cyan  */
.service-pills a[data-ic="phone"] { color: #b08cff; } /* purple*/
.service-pills a[data-ic="bulb"]  { color: #ffe066; } /* yellow*/
.service-pills a[data-ic="plug"]  { color: #72e28b; } /* green */
.service-pills a[data-ic="wrench"]{ color: #9db6ff; } /* blue  */

/* 4) Accreditations spacing (keep previous no-crop rules; small tweak) */
.hero-trust { margin-top: 12px !important; }
.hero-trust .microcopy { margin-top: 12px !important; }


/* ==== HERO padding tidy (kills the big gap under the buttons) ==== */
.hero.glass{
  padding: 22px 26px 14px !important;   /* leaner bottom padding */
  margin-bottom: 22px !important;       /* keeps space before Accreditations */
}

/* Flatten nested margins so the last row doesn’t add extra space */
.hero.glass .hero-copy > *{ margin-bottom: 10px !important; }
.hero.glass .hero-copy > *:last-child{ margin-bottom: 0 !important; }

/* List + CTAs spacing */
.hero.glass .hero-copy ul{ margin: 6px 0 10px !important; padding-left: 18px !important; }
.hero.glass .hero-ctas{ margin-top: 8px !important; margin-bottom: 0 !important; }

/* If any grid wrapper is forcing height, neutralise it */
.hero.glass .hero-grid{ min-height: unset !important; align-items: start !important; row-gap: 10px !important; }
.hero.glass .hero-grid > *{ align-self: start !important; }

/* Ensure no stray bottom margins from common block elements */
.hero.glass :where(h1,h2,h3,p,ul,ol,div):last-child{ margin-bottom: 0 !important; }



/* === Hero text block padding & spacing === */
.hero-grid .hero-copy{
  padding: 18px 22px 16px !important;   /* add real breathing room */
  border-radius: 16px !important;        /* matches the inner rounded outline */
}

.hero-grid .hero-copy h1{
  margin: 0 0 10px !important;
  line-height: 1.12;
}

.hero-grid .hero-copy .hero-lead{
  margin: 0 0 10px !important;
}

.hero-grid .hero-copy .hero-benefits{
  margin: 0 0 12px !important;
  padding-left: 22px !important;         /* bullet indent */
}

.hero-grid .hero-copy .hero-ctas{
  margin-top: 12px !important;           /* space above buttons */
  margin-bottom: 0 !important;
}

/* keep it comfy on small screens */
@media (max-width: 640px){
  .hero-grid .hero-copy{ padding: 16px 18px 14px !important; }
}


/* === FINAL OVERRIDES — compact header + halve header→content gap === */
:root{
  --header-pad-y: 6px;   /* vertical padding inside the header bar */
  --header-gap:   10px;  /* space above/below the bar */
}

/* 1) Slim header bar */
:is(.header,.site-header){
  margin: var(--header-gap) auto !important;    /* was ~18px */
  padding: var(--header-pad-y) 12px !important; /* was 10–14px+ in places */
}

/* 2) Remove “extra” padding wrappers inside the bar (some rules re-add it) */
:is(.header,.site-header) .container,
:is(.header,.site-header) .nav{
  padding: 0 !important;
}

/* 3) Tighten link hit-areas very slightly (keeps good tap targets) */
:is(.header,.site-header) nav a{
  padding: 6px 10px !important;
}

/* 4) Halve the gap before the first content block */
.page > .section:first-of-type,
.page > .hero:first-of-type,
.home-hero,
.hero.glass{
  margin-top: 12px !important;   /* was ~24px+ */
}
/* put near the end of app.css */
:root{ --footer-h: 72px; }  /* adjust if your footer is taller */

.content{
  /* reserve room so the last section doesn't sit under the fixed footer */
  padding-bottom: calc(var(--footer-h) + 18px);
}

.site-footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--footer-h);
  z-index: 30;
  background: transparent; /* your glass stays on .footer-bar */
}

.site-footer .container{ height:100%; padding:0 18px; }

.footer-bar{
  height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 14px; border-radius:16px;
  /* keep your glass look */
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  backdrop-filter:saturate(120%) blur(18px);
}
/* Areas section — compact look */
.areas.section { margin-top: 3px; }

.areas .pill-grid{
  list-style:none; padding:0; margin:10px 0 0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:8px;
}

.areas .pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px 10px;                         /* smaller */
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  text-decoration:none; color:#eaf0fb;
  font-weight:600; font-size:.9rem;         /* smaller text */
  min-height:34px; line-height:1;
  white-space:nowrap;
}
.areas .pill:hover{ border-color:rgba(160,200,255,.35); }
@media (max-width:480px){
  .areas .pill-grid{ grid-template-columns:1fr 1fr; }
  .areas .pill{ font-size:.88rem; padding:6px 9px; min-height:32px; }
}