
:root{--navy:#0f2a43;--blue:#164f7a;--cyan:#e8f6fb;--text:#142033;--muted:#596579;--line:#d9e2ea;--bg:#f6f8fb;--white:#fff;--accent:#f5a623;--shadow:0 18px 45px rgba(15,42,67,.12);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;color:var(--text);background:var(--white);line-height:1.6}a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}.skip-link{position:absolute;left:-999px;top:auto}.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.75rem;z-index:5}.topbar{display:flex;justify-content:space-between;gap:1rem;align-items:center;background:var(--navy);color:#fff;padding:.5rem max(1rem,calc((100vw - 1180px)/2));font-size:.92rem}.topbar p{margin:0}.topbar a{color:#fff;font-weight:700}.nav-wrap{max-width:1180px;margin:auto;padding:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.brand{display:flex;align-items:center;gap:.8rem;color:var(--text)}.brand:hover{text-decoration:none}.brand-mark{display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:900;border-radius:14px;width:58px;height:58px;letter-spacing:-.06em}.brand small{display:block;color:var(--muted)}.primary-nav{display:flex;gap:.85rem;align-items:center}.primary-nav a{color:var(--text);font-weight:700;padding:.5rem .35rem;border-bottom:3px solid transparent}.primary-nav a.active,.primary-nav a:hover{border-color:var(--accent);text-decoration:none}.menu-toggle{display:none}.hero{background:linear-gradient(135deg,var(--navy),#1a5f8f);color:#fff;padding:clamp(3rem,6vw,6rem) max(1rem,calc((100vw - 1180px)/2));display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.7fr);gap:2rem;align-items:center}.hero h1,.page-hero h1{font-size:clamp(2.2rem,5vw,4.5rem);line-height:1.05;margin:.2rem 0 1rem}.lead,.page-hero p{font-size:1.2rem;max-width:760px}.eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.14em;font-weight:900;font-size:.78rem}.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.5rem 0}.button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.82rem 1.15rem;font-weight:900;border:2px solid transparent}.button.primary{background:var(--accent);color:#181200}.button.secondary{border-color:rgba(255,255,255,.45);color:#fff}.page-hero .button.secondary,.section .button.secondary{border-color:var(--blue);color:var(--blue)}.button.light{background:#fff;color:var(--navy)}.button.full{width:100%;background:var(--accent);color:#181200}.trust-list{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.4rem 0 0;padding:0;list-style:none}.trust-list li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:.45rem .75rem}.hero-card,.quote-card,.info-box,.contact-card,.contact-form,.service-card,.review-card,.area-grid article{background:#fff;color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:24px;padding:1.4rem}.section{max-width:1180px;margin:auto;padding:clamp(3rem,6vw,5rem) 1rem}.section.alt,.alt{background:var(--bg);max-width:none}.section.alt>*{max-width:1180px;margin-left:auto;margin-right:auto}.section-heading{max-width:760px;margin-bottom:2rem}.section-heading h2,.split h2,.cta-band h2,.service-card h2,.service-card h3{line-height:1.15}.card-grid{display:grid;gap:1.1rem}.card-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.card-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.service-card h3,.service-card h2{margin-top:0}.text-link{font-weight:900}.split{display:grid;grid-template-columns:1fr 380px;gap:2rem;align-items:start}.check-list{padding:0;list-style:none}.check-list li{padding:.45rem 0 .45rem 2rem;position:relative}.check-list li:before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:900}.quote-card p{font-size:1.35rem;font-weight:800;line-height:1.3}.quote-card span,.note{color:var(--muted);font-size:.95rem}.pill-list{display:flex;flex-wrap:wrap;gap:.6rem}.pill-list span{background:var(--cyan);border:1px solid var(--line);padding:.55rem .8rem;border-radius:999px;font-weight:800}.cta-band{background:var(--navy);color:#fff;text-align:center;padding:3rem 1rem}.breadcrumbs{max-width:1180px;margin:1rem auto 0;padding:0 1rem;color:var(--muted);display:flex;gap:.4rem;font-size:.92rem}.page-hero{max-width:1180px;margin:auto;padding:clamp(2rem,5vw,4rem) 1rem}.service-detail{padding-top:2rem}.faq-list details{background:#fff;border:1px solid var(--line);border-radius:18px;margin:.8rem 0;padding:1rem}.faq-list summary{font-weight:900;cursor:pointer}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.review-card p{font-size:1.15rem;font-weight:800}.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}.placeholder-img{height:260px;border-radius:22px;background:linear-gradient(135deg,#dce8f2,#f6f8fb);display:grid;place-items:center;color:var(--muted);font-weight:900;border:1px dashed #b9c7d2}.gallery-grid figure{margin:0}.gallery-grid figcaption{margin-top:.6rem;color:var(--muted)}.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.contact-form{display:grid;gap:.85rem}.contact-form input,.contact-form textarea{width:100%;padding:.8rem;border:1px solid var(--line);border-radius:12px;font:inherit;margin-top:.2rem}.site-footer{background:#081a2a;color:#dbe6ef;padding:3rem max(1rem,calc((100vw - 1180px)/2)) 1.5rem}.site-footer a{color:#fff}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}.site-footer h2{color:#fff;font-size:1rem}.footer-bottom{border-top:1px solid rgba(255,255,255,.16);margin-top:2rem;padding-top:1rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:#a8b7c4}@media(max-width:860px){.hero,.split,.card-grid.three,.card-grid.two,.review-grid,.gallery-grid,.area-grid,.footer-grid{grid-template-columns:1fr}.primary-nav{display:none;position:absolute;right:1rem;top:112px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:1rem;flex-direction:column;align-items:flex-start}.primary-nav.open{display:flex}.menu-toggle{display:inline-flex;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.6rem .9rem;font-weight:900}.topbar{font-size:.82rem}.hero{padding-top:3rem}.button{width:100%}.cta-row{width:100%}}


/* Gallery, carousel and review-platform additions */
.row-heading{display:flex;justify-content:space-between;gap:1rem;align-items:end;max-width:none}.row-heading>div:first-child{max-width:760px}.carousel-controls{display:flex;gap:.5rem}.carousel-btn{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);font-size:1.8rem;line-height:1;cursor:pointer;color:var(--navy)}.carousel-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,34%);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.2rem .1rem 1rem;scrollbar-width:thin}.carousel-slide{margin:0;scroll-snap-align:start;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:24px;overflow:hidden}.carousel-slide img{width:100%;height:290px;display:block;object-fit:cover;background:#eef3f7}.carousel-slide figcaption{padding:.85rem 1rem;color:var(--muted);font-weight:800}.work-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.work-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}.work-card a{display:block;background:#eef3f7}.work-card img{width:100%;height:270px;display:block;object-fit:cover}.work-card figcaption{padding:.85rem 1rem;color:var(--muted);font-weight:800}.platform-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-bottom:1.4rem}.platform-card{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:24px;padding:1.4rem;display:flex;justify-content:space-between;gap:1rem;align-items:center}.platform-card h3{font-size:2rem;margin:.2rem 0;color:var(--navy)}.platform-label{margin:0;color:var(--accent);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:900}.review-grid.expanded{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1rem}.platform-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.platform-links a{background:var(--cyan);border:1px solid var(--line);padding:.45rem .65rem;border-radius:999px;font-weight:900}.platform-links.compact a{font-size:.9rem}.source-note{margin-top:1rem}.button.secondary.dark{border-color:var(--blue);color:var(--blue)}.gallery-links .button{width:auto}@media(max-width:860px){.row-heading{display:block}.carousel-controls{margin-top:1rem}.carousel-track{grid-auto-columns:82%}.work-gallery,.platform-grid,.review-grid.expanded{grid-template-columns:1fr}.platform-card{display:block}.platform-card .button{margin-top:1rem}.carousel-slide img,.work-card img{height:250px}.gallery-links .button{width:100%}}


/* Fixed gallery preview, constrained layout and lightbox */
.why-section{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.contained-split{max-width:1180px;margin:0 auto;align-items:center;width:100%}
.work-preview-section .section-heading{max-width:780px}
.auto-gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;overflow:hidden}
.auto-gallery-card,.work-card{margin:0;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:24px;overflow:hidden;min-width:0}
.auto-gallery-card{transition:opacity .35s ease,transform .35s ease}
.auto-gallery-card.is-swapping{opacity:.2;transform:translateY(6px)}
.gallery-image-button{display:block;width:100%;padding:0;border:0;background:#eef3f7;cursor:pointer;text-align:left;overflow:hidden}
.gallery-image-button img,.auto-gallery-card img,.work-card img{width:100%;height:270px;display:block;object-fit:cover;background:#eef3f7}
.auto-gallery-card figcaption,.work-card figcaption{padding:.85rem 1rem;color:var(--muted);font-weight:800}
.work-card figcaption span{display:block;margin-top:.2rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--blue)}
.work-gallery{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(8,26,42,.88);display:none;align-items:center;justify-content:center;padding:2rem}
.lightbox.open{display:flex}
.lightbox-inner{position:relative;width:min(1100px,100%);max-height:92vh;background:#fff;border-radius:24px;box-shadow:0 25px 70px rgba(0,0,0,.35);padding:1rem;display:grid;gap:.75rem}
.lightbox img{width:100%;max-height:75vh;object-fit:contain;background:#081a2a;border-radius:16px}
.lightbox-caption{margin:0;color:var(--text);font-weight:800}
.lightbox-close{position:absolute;top:.5rem;right:.5rem;width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:1.6rem;line-height:1;cursor:pointer;box-shadow:var(--shadow)}
.carousel-controls{display:none!important}.carousel-track{overflow:visible!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-flow:initial!important;grid-auto-columns:initial!important;scroll-snap-type:none!important;padding:0!important}.carousel-slide{scroll-snap-align:initial!important}
@media(max-width:1000px){.auto-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.work-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.contained-split{grid-template-columns:1fr}.auto-gallery-grid,.work-gallery{grid-template-columns:1fr}.gallery-image-button img,.auto-gallery-card img,.work-card img{height:250px}.lightbox{padding:1rem}.lightbox-inner{border-radius:18px}.lightbox img{max-height:70vh}}


/* Homepage hero background image update */
.hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(90deg,rgba(8,26,42,.88) 0%,rgba(8,26,42,.76) 42%,rgba(8,26,42,.35) 100%),
    url("../images/hero/cropped-system-boiler-costs1.jpg") center right/cover no-repeat;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.13),transparent 38%);
}
.hero-content,.hero-card{position:relative;z-index:1}
.hero-card{background:rgba(255,255,255,.93);backdrop-filter:blur(6px)}
@media(max-width:860px){
  .hero{
    background:
      linear-gradient(180deg,rgba(8,26,42,.9),rgba(8,26,42,.82)),
      url("../images/hero/cropped-system-boiler-costs1.jpg") center center/cover no-repeat;
  }
}

/* Mobile navigation layering fix */
.site-header{
  position:relative;
  z-index:1000;
  background:#fff;
}
.nav-wrap{
  position:relative;
  overflow:visible;
}
@media(max-width:860px){
  .primary-nav{
    top:calc(100% + .65rem);
    left:1rem;
    right:1rem;
    z-index:1001;
    max-width:none;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:0 24px 80px rgba(8,26,42,.22);
    padding:.75rem;
    gap:.15rem;
    align-items:stretch;
  }
  .primary-nav a{
    width:100%;
    display:block;
    padding:.85rem 1rem;
    border-bottom:0;
    border-radius:12px;
  }
  .primary-nav a.active,
  .primary-nav a:hover{
    border-color:transparent;
    background:var(--cyan);
  }
  .menu-toggle{
    position:relative;
    z-index:1002;
  }
}

/* Mobile navigation compact right-aligned dropdown */
@media(max-width:860px){
  .primary-nav{
    left:auto;
    right:1rem;
    width:max-content;
    min-width:12rem;
    max-width:calc(100vw - 2rem);
    align-items:stretch;
  }
  .primary-nav a{
    width:100%;
    white-space:nowrap;
  }
}
@media(max-width:360px){
  .primary-nav{
    left:1rem;
    right:1rem;
    width:auto;
  }
  .primary-nav a{
    white-space:normal;
  }
}
