/* Design N Build – Architectural UI v3. One authoritative presentation layer.
   Maintains source document semantics, original grid and all routes. */
:root{--navy:#102c3d;--navy-2:#173d50;--gold:#087c84;--gold-deep:#086c73;--ink:#102c3d;--body:#415462;--muted:#667786;--line:#e0e9e8;--paper:#fff;--soft:#f7f8f6;--radius:14px;--dnb-head:'Manrope','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;--dnb-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;--dnb-shadow:0 12px 32px rgba(16,44,61,.065)}
html,body{max-width:100%;overflow-x:clip}
body,body.public-site{font-family:var(--dnb-body);font-size:15px;color:#415462;line-height:1.7;background:#fff;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6,body.public-site h1,body.public-site h2,body.public-site h3,body.public-site h4{font-family:var(--dnb-head);letter-spacing:-.03em;color:#102c3d;font-weight:750}
p{line-height:1.75}a,button{touch-action:manipulation}
:where(a,button,summary,input):focus-visible{outline:3px solid #087c84;outline-offset:3px}
.wrap{max-width:1320px}
.dnb-top{background:#102c3d;color:#dce8ea}
.dnb-top a{color:#dce8ea}
.dnb-top a:hover{color:#a8e3df}
.dnb-header{background:#fff;color:#102c3d;border-bottom:1px solid #e1e9e8;box-shadow:0 5px 22px rgba(16,44,61,.07);position:sticky;top:0;z-index:85}
.dnb-header .dnb-nav-row{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:76px}
.dnb-header .dnb-brand,.dnb-header .dnb-brand strong{color:#102c3d}
.dnb-header .dnb-brand strong>span,.dnb-header .brand-mark{color:#087c84}
.dnb-header .dnb-brand small{color:#5b707b}
.dnb-header .dnb-nav{display:flex;position:static;align-items:center;gap:8px;flex:1;justify-content:flex-end;min-width:0;background:transparent;border:0;box-shadow:none;padding:0}
.dnb-header .dnb-nav>a:not(.btn),.dnb-header .nav-disclosure>summary{min-height:44px;padding:8px 10px;border-radius:9px;display:flex;align-items:center;gap:7px;color:#102c3d;font-family:var(--dnb-body);font-size:12px;font-weight:700;white-space:nowrap;transition:background-color .18s,color .18s}
.dnb-header .dnb-nav>a:not(.btn):hover,.dnb-header .nav-disclosure>summary:hover,.dnb-header .nav-disclosure[open]>summary{color:#087c84;background:#edf6f4}
.dnb-header .dnb-nav>a[aria-current=page]{color:#087c84;background:#edf6f4}
.dnb-header .dnb-nav>a[aria-current=page]::after,.dnb-header .nav-disclosure>summary.is-current::after{display:none}
.dnb-header .nav-phone strong{color:#102c3d}.dnb-header .nav-phone small{color:#617781}.dnb-header .nav-phone>.icon{color:#087c84}
.dnb-header .dnb-nav>a.btn-primary,.btn-primary{background:#087c84;border-color:#087c84;color:#fff;border-radius:10px}
.btn-primary:hover,.dnb-header .dnb-nav>a.btn-primary:hover{background:#075e65;border-color:#075e65;color:#fff}
.dnb-header .dnb-nav .nav-disclosure>summary{color:#102c3d;background:transparent}
.dnb-header .nav-disclosure>summary .icon{color:#087c84}
.dnb-header .mega-menu{background:#fff;border:1px solid #e0e9e8;border-top:3px solid #087c84;box-shadow:0 22px 54px rgba(16,44,61,.16);border-radius:0 0 15px 15px;color:#102c3d;padding:23px}
.dnb-header .mega-heading strong{color:#102c3d}.dnb-header .mega-heading small{color:#087c84}
.dnb-header .mega-grid{gap:15px}
.dnb-header .mega-group{background:#f8faf9;border:1px solid #e6efed;border-radius:12px;padding:12px}
.dnb-header .mega-group>p{font-size:11px;color:#087c84;font-weight:800;letter-spacing:.06em}
.dnb-header .mega-group>a{border-radius:9px;min-height:43px;color:#203d4a;transition:background-color .18s,color .18s}
.dnb-header .mega-group>a:hover{background:#e7f2f0;color:#087c84}
.dnb-header .mega-group>a>.icon:first-child{color:#087c84}
.dnb-header .menu-toggle{color:#102c3d;background:#edf6f4;border:1px solid #cfdfdb;border-radius:10px;min-height:44px}
.dnb-header .menu-toggle:hover{background:#e0f0ec}
.dnb-header .mobile-menu-heading{color:#102c3d}
.dnb-header .dnb-nav-icon{display:inline-grid;place-items:center;flex:0 0 26px;width:26px;height:26px;background:#e9f5f2;border:1px solid #d4e8e4;border-radius:8px;color:#087c84}
.dnb-header .dnb-nav-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}

/* Light architectural heroes, preserving imagery and editorial disclosures. */
.reference-hero,.dnb-hero.reference-hero{background:#f7f8f6;color:#102c3d;isolation:isolate;min-width:0}
.reference-hero::before,.reference-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f7f8f6 0%,rgba(247,248,246,.98) 31%,rgba(247,248,246,.88) 46%,rgba(247,248,246,.23) 72%,rgba(247,248,246,.1) 100%);z-index:0;pointer-events:none}
.reference-hero .reference-hero-media{position:absolute;inset:0 0 0 44%;left:44%;z-index:-1;height:100%;overflow:hidden}
.reference-hero .reference-hero-media img{width:100%;height:100%;object-fit:cover;opacity:1;filter:saturate(.90)}
.reference-hero .reference-hero-media:after{background:transparent}
.reference-hero .hero-shell{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:35px;align-items:center;min-height:490px;padding-block:67px 72px}
.reference-hero .hero-copy{position:relative;max-width:630px;z-index:2}
.reference-hero .hero-kicker,.reference-hero .kicker{color:#087c84;font-weight:800;letter-spacing:.10em}
.reference-hero .hero-copy h1,.reference-hero h1{color:#102c3d;font-weight:800;font-family:var(--dnb-head);font-size:clamp(36px,4.4vw,62px);line-height:1.075;letter-spacing:-.048em;max-width:16ch}
.reference-hero .hero-copy h1 span{color:#087c84}
.reference-hero .hero-lead,.reference-hero .hero-copy>p,.reference-hero .breadcrumbs,.reference-hero .breadcrumbs a{color:#445b69}
.reference-hero .hero-lead{font-size:clamp(15px,1.2vw,17px);line-height:1.74;max-width:52ch}
.reference-hero .hero-copy .action-row{gap:12px}
.reference-hero .btn-outline-light{background:#fff;color:#102c3d;border:1px solid #c5d8d5}
.reference-hero .btn-outline-light:hover{background:#e4f1ee;border-color:#087c84;color:#102c3d}
.reference-hero .hero-enquiry-link{color:#087c84;font-weight:700}
.reference-hero .hero-enquiry-link:hover{color:#064f58}
.reference-hero .breadcrumbs li,.reference-hero .breadcrumbs span{color:#445b69}
.reference-hero .reference-hero-media figcaption,.reference-hero .hero-image-disclosure{background:rgba(16,44,61,.88);color:#fff;border-radius:7px}
.home-hero .hero-shell{grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);min-height:550px}
.home-hero .hero-enquiry-panel{justify-self:end;align-self:end;width:min(100%,355px);max-width:355px;padding:14px;background:#fff;border:1px solid #e0e9e8;border-radius:18px;box-shadow:0 18px 50px rgba(16,44,61,.14);margin:0 0 6px}
.home-hero .hero-enquiry-panel>.dnb-contact-only{background:#fff;border:0;box-shadow:none;padding:10px 6px}
.home-hero .hero-enquiry-panel .dnb-contact-only h3{font-size:20px;line-height:1.25}
.home-hero .hero-enquiry-panel .dnb-contact-only-intro{font-size:13px;line-height:1.5;margin-bottom:12px}
.home-hero .hero-enquiry-panel .dnb-contact-only-actions{gap:7px}
.home-hero .hero-enquiry-panel .dnb-contact-only-btn{min-height:61px;padding:9px 4px;font-size:12px}
.home-hero .hero-enquiry-panel .dnb-contact-only-details{font-size:10px;margin-top:9px!important}
.hero-enquiry-panel:has(.dnb-contact-only) .form-heading{display:none}

.section,.section-soft{background:#fff}
.section:nth-of-type(even){background:#f7f8f6}
.section-dark,.champs-banner,.project-strip{background:#102c3d;color:#e5eff0}
.section-dark h2,.section-dark h3,.champs-banner h2{color:#fff}
.section-top h2,.section-heading h2{letter-spacing:-.035em}
.section-lead{max-width:70ch}
.btn,.dnb-contact-only-btn{border-radius:10px;transition:transform .2s,box-shadow .2s,background-color .2s,border-color .2s}
.btn:hover,.dnb-contact-only-btn:hover{transform:translateY(-2px)}
.kicker,.section .kicker{color:#087c84}
/* Image-forward white service cards replace dark photograph-overlay tiles. */
.champs-service-card{display:flex;flex-direction:column;align-items:stretch;min-height:0;border-radius:15px;overflow:hidden;background:#fff;color:#102c3d;border:1px solid #dde7e6;box-shadow:0 12px 30px rgba(16,44,61,.07);transition:transform .22s,box-shadow .22s}
.champs-service-card:after,.champs-service-card::after{display:none}
.champs-service-card>img{position:relative;z-index:auto;inset:auto;left:auto;top:auto;bottom:auto;right:auto;width:100%;height:215px;object-fit:cover;flex:0 0 215px;opacity:1;transition:transform .4s}
.champs-service-card>div{position:relative;z-index:1;padding:22px;flex:1;background:#fff;color:#102c3d}
.champs-service-card h3{color:#102c3d;font-size:20px;font-weight:800;line-height:1.28}
.champs-service-card .service-card-icon{width:38px;height:38px;border-radius:10px;background:#e7f4f1;border:1px solid #cfebe4;color:#087c84;margin-bottom:12px}
.champs-service-card .service-card-icon .icon{color:#087c84}
.champs-service-card .card-explore{color:#087c84;font-size:12px;font-weight:750}
.champs-service-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(16,44,61,.12)}
.champs-service-card:hover>img{transform:scale(1.025)}
.service-tile,.coverage-card,.option-card,.area-group,.stage-card,.cost-card{border-radius:14px}
.service-tile,.coverage-card,.option-card,.area-group,.cost-card{background:#fff;border:1px solid #e0e9e8;box-shadow:0 8px 28px rgba(16,44,61,.055)}
.service-tile-image img{object-fit:cover}
.service-tile h3,.coverage-card h3,.option-card h3{color:#102c3d}
.service-tile:hover,.coverage-card:hover,.option-card:hover,.area-group:hover,.cost-card:hover{box-shadow:0 14px 35px rgba(16,44,61,.11);border-color:#9ecac7}
.service-card-icon,.service-tile-icon,.process-top{color:#087c84}
.stage-card{background:#214758;border-color:#365f70}
.stage-card h3{color:#fff}
.faq-list details{background:#fff;border:1px solid #e1eae8;border-radius:12px;margin-bottom:8px;overflow:hidden}
.faq-list summary{padding:15px 19px;min-height:58px}
.faq-list details>p{padding:0 19px 17px;margin:0}
.dnb-footer{background:#102c3d;color:#e0eaeb}
.dnb-footer h2,.dnb-footer h3,.dnb-footer .dnb-brand{color:#fff}
.dnb-footer .dnb-brand strong span{color:#9fe0d9}
.dnb-footer a:hover{color:#a3e5df}
.dnb-footer-direct{border-top:1px solid #ffffff22}
.mobile-actions{background:#102c3d}
.mobile-actions>a{border-radius:9px}
@media(max-width:1100px){
 .dnb-header .dnb-nav-row{display:flex;align-items:center;justify-content:space-between;min-height:72px}
 .dnb-header .menu-toggle{display:flex;align-items:center;justify-content:center;flex:0 0 auto;z-index:3}
 .dnb-header .dnb-nav{display:none;position:fixed;inset:0 0 0 auto;width:min(400px,90vw);max-width:100vw;height:100dvh;max-height:100dvh;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;z-index:110;background:#fff;color:#102c3d;padding:20px 18px 28px;box-shadow:-14px 0 55px rgba(16,44,61,.21);overscroll-behavior:contain;flex:initial}
 .dnb-header .dnb-nav.is-open{display:block}
 .dnb-header .dnb-nav>a:not(.btn),.dnb-header .nav-disclosure>summary{color:#102c3d;padding:13px 11px;min-height:50px}
 .dnb-header .mega-menu,.dnb-header .coverage-menu{position:static;left:auto;right:auto;top:auto;border:0;border-radius:10px;box-shadow:none;background:#f7faf9;padding:13px;margin:8px 0 12px;max-height:none;overflow:visible}
 .dnb-header .mega-grid{grid-template-columns:1fr;gap:9px}
 .dnb-header .mega-group{padding:9px}
 .dnb-header .mega-group>a{min-height:45px}
 .dnb-header .mobile-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 19px}
 .dnb-header .mobile-menu-heading button{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid #d4e5e1;border-radius:10px;background:#ecf6f3;color:#102c3d}
 .menu-scrim:not([hidden]){display:block;position:fixed;inset:0;z-index:84;background:rgba(16,44,61,.48)}
 .dnb-header .nav-contact{display:none}
 .reference-hero .hero-shell{grid-template-columns:minmax(0,1fr);min-height:0;padding-block:48px 55px}
 .reference-hero .reference-hero-media{left:34%;opacity:.52}
 .reference-hero:before{background:linear-gradient(90deg,#f7f8f6 0%,rgba(247,248,246,.97) 45%,rgba(247,248,246,.72) 100%)}
 .home-hero .hero-shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0}
 .home-hero .hero-enquiry-panel{width:100%;max-width:350px}
}
@media(max-width:767px){
 html{scroll-padding-top:82px}
 .dnb-header .dnb-nav-row{min-height:69px;gap:10px}
 .dnb-header .dnb-brand{min-width:0;gap:8px}
 .dnb-header .dnb-brand strong{color:#102c3d;font-size:17px}
 .dnb-header .dnb-brand small{color:#667783;font-size:7px}
 .dnb-header .brand-mark{color:#087c84;width:33px;flex:0 0 33px}
 .reference-hero .reference-hero-media{left:0;opacity:.2}
 .reference-hero:before{background:rgba(247,248,246,.84)}
 .reference-hero .hero-shell,.home-hero .hero-shell{display:block;min-height:0;padding-block:37px 44px}
 .reference-hero .hero-copy h1,.reference-hero h1{font-size:clamp(33px,8.5vw,43px);max-width:18ch;letter-spacing:-.04em}
 .reference-hero .hero-copy .hero-lead{font-size:14.5px;line-height:1.65}
 .home-hero .hero-enquiry-panel{margin-top:22px;max-width:none;width:100%;padding:10px}
 .home-hero .hero-enquiry-panel>.dnb-contact-only{padding:13px}
 .home-hero .hero-enquiry-panel .dnb-contact-only-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
 .champs-service-card>img{height:190px;flex-basis:190px}
 .champs-service-card h3{font-size:19px}
 .champs-service-card>div{padding:20px}
 .champs-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .section{padding-block:45px}
 .dnb-footer-direct{gap:14px}
 .mobile-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
}
@media(max-width:520px){
 .dnb-header .dnb-nav{width:min(370px,100vw)}
 .dnb-header .dnb-brand strong{font-size:clamp(14px,4.5vw,18px)}
 .dnb-header .dnb-brand small{font-size:6px;letter-spacing:.04em}
 .dnb-header .brand-mark{width:29px;flex-basis:29px}
 .dnb-header .menu-toggle{min-height:44px;padding:8px 9px;font-size:12px}
 .reference-hero .hero-copy h1,.reference-hero h1{font-size:clamp(33px,8.3vw,41px)}
 .champs-service-grid{grid-template-columns:1fr}
 .champs-service-card>img{height:205px;flex-basis:205px}
 .champs-service-card>div{padding:18px}
 .service-tiles,.service-directory .service-tiles{grid-template-columns:1fr}
 .home-hero .hero-enquiry-panel .dnb-contact-only h3{font-size:20px}
 .mobile-actions>a{min-height:47px;font-size:11px;gap:5px}
 .dnb-footer-direct nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:360px){
 .dnb-header .dnb-nav-row{gap:7px}
 .dnb-header .dnb-brand strong{font-size:14px}
 .dnb-header .dnb-brand small{font-size:5.8px}
 .dnb-header .brand-mark{width:26px;flex-basis:26px}
 .dnb-header .menu-toggle{padding:8px 7px;font-size:11px}
 .home-hero .dnb-contact-only-btn{font-size:11px;padding:8px 3px}
 .mobile-actions>a{min-width:0;font-size:10px;padding:7px 3px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Layering fix: photo sits above the surface but below the soft wash and all text. */
.reference-hero .reference-hero-media{z-index:1}
.reference-hero::before,.reference-hero:before{z-index:2}
.reference-hero .hero-shell{z-index:3}
.reference-hero .hero-image-disclosure{z-index:4}

/* Surgical resets for legacy source CSS with explicit display:none!important. */
@media(max-width:1100px){.dnb-header .menu-toggle{display:flex!important}.dnb-header .mobile-menu-heading{display:flex!important}.menu-scrim:not([hidden]){display:block!important}}