:root {
    --navy: #03142d;
    --blue: #2a81cf;
    --white: #ffffff;
    --ink: #14243d;
    --mist: #f5f5f5;
    --line: #c8ced7;
    --serif: "Noto Serif", Georgia, serif;
    --sans: "TT Hoves", "Avenir Next", Arial, sans-serif;
    --header-height: 108px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; padding-top: var(--header-height); }
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.14; }
h3, h4, h5, h6 { font-family: var(--sans); font-weight: 600; }
a { color: var(--blue); text-decoration: none; }
img { max-width: 100%; }
.container { max-width: 1180px; }
.skip-link { background: #fff; left: 1rem; padding: .75rem 1rem; position: fixed; top: 1rem; z-index: 1100; }

.site-header { background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.8); min-height: var(--header-height); }
.navbar { min-height: var(--header-height); padding: .7rem 0; }
.navbar-brand img { height: 78px; object-fit: contain; width: auto; }
.navbar-nav { gap: 1.4rem; }
.navbar-dark .navbar-nav .nav-link { border-bottom: 3px solid transparent; color: #fff; font-size: .95rem; padding: .65rem 0 .45rem; }
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link.active { border-color: var(--blue); color: #fff; }
.phone-pill { align-items: center; background: var(--blue); border-radius: 999px; color: #fff; display: inline-flex; gap: .45rem; padding: .35rem .8rem; }
.phone-pill i { font-size: .78rem; }
.phone-pill:hover { background: #fff; color: var(--navy); }

.btn { border-radius: .28rem; font-size: .8rem; font-weight: 700; letter-spacing: .01em; padding: .95rem 1.65rem; text-transform: uppercase; }
.btn-primary { --bs-btn-bg: var(--blue); --bs-btn-border-color: var(--blue); --bs-btn-hover-bg: #1768ad; --bs-btn-hover-border-color: #1768ad; }
.btn-outline-light { border-width: 2px; }
.btn-arrow { align-items: center; display: inline-flex; gap: 2rem; justify-content: space-between; min-width: 285px; }
.btn-arrow span, .text-link span { font-size: 1.6em; line-height: 0; }
.section-pad { padding: 5.5rem 0; }
.section-kicker { color: var(--blue); font-size: .78rem; font-weight: 700; letter-spacing: .02em; margin-bottom: 1.25rem; text-transform: uppercase; }
.section-heading { margin: 0 auto 3.5rem; max-width: 760px; }
.section-heading h2 { font-size: clamp(1.9rem, 3vw, 2.65rem); }
.text-link { align-items: center; display: inline-flex; font-size: .85rem; font-weight: 700; gap: 2.5rem; margin-top: 1.5rem; text-transform: uppercase; }

.hero { background: var(--navy); min-height: 630px; overflow: hidden; position: relative; }
.hero-content { align-items: center; display: flex; min-height: 630px; position: relative; z-index: 2; }
.hero-copy { max-width: 620px; padding: 5rem 0; position: relative; z-index: 3; }
.hero-home .hero-copy { max-width: 700px; width: 100%; }
.hero-home h1 { font-size: clamp(2.5rem, 4vw, 3.8rem); }
.hero h1 { font-size: clamp(2.5rem, 5vw, 4.75rem); margin-bottom: 2rem; }
.hero h1 span { color: var(--blue); }
.hero p { font-size: 1.25rem; max-width: 590px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 4rem; }
.hero-video { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.hero-overlay { background: linear-gradient(90deg, rgba(0,5,12,.93) 0%, rgba(0,5,12,.62) 48%, rgba(0,5,12,.12) 100%); inset: 0; position: absolute; }
.hero-image { background-position: center; background-size: cover; height: 100%; position: absolute; right: 0; top: 0; width: 51%; }
.hero-image::after { background: linear-gradient(90deg, var(--navy), rgba(3,20,45,.72) 24%, transparent 75%); content: ""; inset: 0; position: absolute; }
.engineer-hero { background-position: center 34%; }
.hero-split .container { min-height: 610px; }
.hero-split .hero-media { align-self: stretch; align-items: center; display: flex; justify-content: center; }
.van-hero img { filter: drop-shadow(0 1.4rem 1.5rem rgba(0,0,0,.35)); height: auto; object-fit: contain; width: 100%; }
.contact-hero .hero-image { background-position: center 42%; }

.proof-strip { background: var(--navy); border-top: 1px solid rgba(255,255,255,.7); color: #fff; padding: 1.5rem 0; }
.proof-item { align-items: center; border-right: 1px solid rgba(255,255,255,.2); display: flex; gap: 1rem; min-height: 60px; padding: .25rem 1.5rem; }
.proof-item:last-child { border-right: 0; }
.proof-item img { height: 42px; object-fit: contain; width: 48px; }
.proof-strip .proof-item img { filter: brightness(0) invert(1); }
.hero-home + .proof-strip img[src$="icon-trusted-across-uk-light.png"] { height: 26px; }
.proof-item span, .proof-item strong { display: block; text-transform: uppercase; }
.proof-item span { font-size: .75rem; opacity: .85; }
.proof-item strong { font-size: .95rem; }
.sector-benefits { background: #fff; color: var(--ink); padding: 1.6rem 0; }
.proof-item.light { border-color: #dce0e6; }
.proof-item.light strong { color: var(--blue); font-size: .9rem; text-transform: none; }
.proof-item.light span { font-size: .82rem; text-transform: none; }

.water-decor { overflow: hidden; position: relative; }
.water-decor::before, .water-decor::after { background-position: center; background-repeat: no-repeat; background-size: contain; content: ""; pointer-events: none; position: absolute; z-index: 0; }
.water-decor > .container { position: relative; z-index: 1; }
.water-decor-left::before { background-image: url('/assets/images/decorative-water-splash-horizontal-left.png'); background-position: left bottom; bottom: -8rem; height: 470px; left: -7rem; mix-blend-mode: multiply; width: 650px; }
.water-decor-right::after { background-image: url('/assets/images/decorative-water-splash-wide-right.png'); background-position: right bottom; bottom: -10rem; height: 560px; mix-blend-mode: multiply; right: -11rem; width: 720px; }
.water-decor-about::before { background-image: url('/assets/images/decorative-water-splash-about-top.png'); background-position: center bottom; bottom: -11rem; height: 500px; left: 18%; width: 720px; }
.water-decor-about::after { background-image: url('/assets/images/decorative-water-splash-about-side.png'); background-position: right top; height: 650px; right: -9rem; top: -7rem; width: 430px; }
.water-decor-services::before { background-image: url('/assets/images/decorative-water-splash-horizontal-left.png'); background-position: left bottom; bottom: -10rem; height: 620px; left: -2rem; mix-blend-mode: multiply; width: 680px; }
.water-decor-services::after { background-image: url('/assets/images/decorative-water-splash-services-right.png'); background-position: right top; height: 600px; right: -11rem; top: -10rem; width: 600px; }
.water-decor-approach::after { background-image: url('/assets/images/decorative-water-splash-wide-right.png'); background-position: right top; height: 520px; mix-blend-mode: multiply; right: -10rem; top: -9rem; width: 650px; }
.water-decor-contact::after { background-image: url('/assets/images/decorative-water-splash-about-side.png'); background-position: right bottom; bottom: -5rem; height: 650px; right: -8rem; width: 460px; }

.services-intro, .experience-section, .service-grid-section, .story-section, .why-choose, .contact-section, .sectors-grid { background: var(--mist); }
.services-intro h2, .experience-section h2, .story-section h2 { font-size: clamp(2rem, 3vw, 3rem); margin-bottom: 2rem; }
.service-card { background: #fff; border: 1px solid var(--line); border-radius: .75rem; height: 100%; min-height: 225px; padding: 1.7rem; }
.service-card img { height: 54px; margin-bottom: 1.5rem; object-fit: contain; width: 54px; }
.service-card h3 { color: var(--blue); font-size: .95rem; font-weight: 500; }
.service-card p { font-size: .88rem; margin-bottom: 0; }
.service-card.tall { min-height: 285px; }
.sector-band, .testimonials, .proactive-section { background: var(--navy); }
.sector-band { padding: 2.4rem 0; }
.sector-band h2 { font-size: 1.65rem; }
.sector-icon-row { display: grid; grid-template-columns: repeat(6,1fr); }
.sector-icon-row > div { align-items: center; border-right: 1px solid rgba(255,255,255,.22); display: flex; flex-direction: column; gap: .5rem; padding: 0 .6rem; text-align: center; }
.sector-icon-row > div:last-child { border-right: 0; }
.sector-icon-row img { height: 45px; object-fit: contain; }
.sector-icon-row span { font-size: .72rem; }
.benefit { padding: .8rem; }
.benefit-icon { align-items: center; background: var(--blue); border-radius: 50%; display: flex; height: 48px; justify-content: center; margin-bottom: 1rem; width: 48px; }
.benefit-icon img { filter: brightness(0) invert(1); height: 30px; object-fit: contain; width: 30px; }
.benefit h3 { color: var(--blue); font-size: .95rem; }
.benefit p { font-size: .88rem; }
.testimonial-card { border: 1px solid #fff; border-radius: .75rem; height: 100%; margin: 0; padding: 2rem; }
.testimonial-card::before { color: var(--blue); content: "“"; font-family: var(--serif); font-size: 3rem; float: left; line-height: .8; margin-right: .7rem; }
.stars { color: #ffc400; letter-spacing: .16rem; margin-bottom: 1.5rem; }
.testimonial-card p { clear: both; font-size: .9rem; }
.testimonial-card footer strong, .testimonial-card footer span { display: block; font-size: .8rem; }
.process-step { position: relative; text-align: center; z-index: 1; }
.process-step > span { align-items: center; background: #173b6c; border-radius: 50%; color: #fff; display: flex; font-size: 1.15rem; font-weight: 700; height: 52px; justify-content: center; margin: 0 auto 1.75rem; width: 52px; }
.process-step h3 { color: var(--blue); font-size: 1rem; margin-bottom: 1.25rem; }
.process-step p { font-size: .9rem; margin-bottom: 0; }

.team-list { display: grid; }
.team-profile + .team-profile { border-top: 3px solid var(--blue); margin-top: 4rem; padding-top: 4rem; }
.team-profile-image { border-radius: .8rem; display: block; height: auto; object-fit: contain; width: 100%; }
.team-profile-header { margin-bottom: 1.25rem; }
.team-profile-header h3 { color: var(--navy); font-size: clamp(1.35rem, 2vw, 1.75rem); margin-bottom: .25rem; }
.team-profile-header p { color: var(--blue); font-size: 1rem; font-weight: 600; margin: 0; }
.team-profile-copy > p { max-width: 850px; }
.team-profile-experience { color: var(--blue); margin-top: 1rem; }
.team-profile-experience strong { color: var(--navy); }
.team-profile-details { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; }
.team-profile-details section { border-left: 3px solid var(--blue); padding-left: 1rem; }
.team-profile-details .team-profile-detail-full { grid-column: 1 / -1; }
.team-profile-details h4 { color: var(--navy); font-size: .9rem; margin-bottom: .65rem; text-transform: uppercase; }
.team-profile-details p, .team-profile-details ul { font-size: .9rem; margin-bottom: 0; }
.team-profile-detail-full p + p { margin-top: .5rem; }
.team-profile-details ul { padding-left: 1.15rem; }
.team-profile-details li + li { margin-top: .35rem; }
.choose-card { align-items: center; display: flex; gap: 1.2rem; height: 100%; }
.choose-card img { height: 65px; object-fit: contain; width: 65px; }
.choose-card h3 { color: var(--blue); font-size: .95rem; }
.choose-card p { font-size: .86rem; margin: 0; }
.feature-image { border-radius: 1rem; width: 100%; }
.proactive-section h2 { font-size: clamp(2rem, 3vw, 3rem); }
.tick-list { list-style: none; margin: 2rem 0; padding: 0; }
.tick-list li { margin: .8rem 0; padding-left: 2.1rem; position: relative; }
.tick-list li::before { align-items: center; background: var(--blue); border-radius: 50%; color: #fff; content: "✓"; display: flex; height: 22px; justify-content: center; left: 0; position: absolute; top: .05rem; width: 22px; }
.approach { background: var(--mist); }
.approach-row { position: relative; }
.approach-row::before { border-top: 7px dotted #173b6c; content: ""; left: 12.5%; position: absolute; right: 12.5%; top: calc(1.5rem + 26px); transform: translateY(-50%); }

.sectors-grid .section-heading { max-width: 850px; }
.sector-card { background: #fff; border: 1px solid var(--line); border-radius: .8rem; height: 100%; overflow: hidden; position: relative; }
.sector-image img { aspect-ratio: 1.15/1; object-fit: cover; width: 100%; }
.sector-card-icon { background: #0874d5; border-radius: 50%; height: 62px; left: 1.2rem; object-fit: contain; padding: .65rem; position: absolute; top: 235px; width: 62px; }
.sector-card-copy { padding: 2.6rem 1.4rem 1.6rem; }
.sector-card-copy h3 { color: var(--blue); font-size: .95rem; }
.sector-card-copy p { font-size: .86rem; }

.contact-form-card { background: #fff; border: 1px solid var(--line); border-radius: .8rem; padding: clamp(1.5rem,4vw,4rem); }
.contact-form-card h2, .location-row h2 { font-size: 1.65rem; margin-bottom: 1.5rem; }
.form-control, .form-select { border: 1px solid #aeb4bd; border-radius: .7rem; min-height: 60px; padding: 1rem; }
textarea.form-control { min-height: 190px; }
.form-control:focus, .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 .25rem rgba(42,129,207,.18); }
.location-row { margin-top: 4rem; }
.location-map { display: block; height: auto; width: 100%; }
.service-area { border-left: 3px solid var(--blue); margin-top: 2rem; padding-left: 1rem; }
.contact-benefits { background: #fff; padding: 3.5rem 0; }

.cta-section { background: var(--navy); color: #fff; padding: 0 0 2rem; }
.cta-panel { align-items: center; background: linear-gradient(90deg, #294c7d 0%, #294c7d 56%, rgba(41,76,125,.35) 72%), url('/assets/images/water-ripple-call-to-action-banner.png') right center/50% 100% no-repeat; border-radius: 1rem; display: flex; justify-content: space-between; padding: 2.25rem 2.6rem; transform: translateY(-1rem); }
.cta-panel h2 { font-size: 1.55rem; margin-bottom: .6rem; }
.cta-panel p { font-size: .85rem; margin: 0; }

.site-footer { background: var(--navy); border-top: 1px solid rgba(255,255,255,.7); }
.footer-main { padding-top: 4.5rem; }
.footer-logo { height: auto; width: 150px; }
.site-footer p, .site-footer li, .site-footer a { color: #fff; font-size: .82rem; }
.site-footer h2 { color: var(--blue); font-family: var(--sans); font-size: .82rem; font-weight: 700; text-transform: uppercase; }
.footer-company-details { border-top: 1px solid rgba(255,255,255,.25); color: #fff; font-size: .78rem; font-style: normal; line-height: 1.55; margin: 0; overflow-wrap: anywhere; padding: 1.5rem 0; text-align: center; }
.footer-company-details > span { display: block; margin-top: .4rem; }
.footer-company-details strong { color: #fff; }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin: .25rem 0; }
.footer-contact { align-items: center; display: flex; gap: .8rem; }
.footer-contact img { object-fit: contain; }
.accreditation-logos { align-items: center; display: flex; flex-direction: column; gap: 1rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.55); margin-top: 0; padding: 2rem 0; text-align: center; }
.legal-links { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 1.2rem; text-transform: uppercase; }
.footer-bottom p { font-weight: 700; margin: 0; }
.site-credit { background: #000; padding: 1rem; text-align: center; }
.site-credit a { color: #fff; font-size: .9rem; font-weight: 700; }
.site-credit a:hover, .site-credit a:focus { color: #fff; text-decoration: underline; }

.legal-hero { align-items: center; background: var(--navy); display: flex; min-height: 350px; }
.legal-hero h1 { color: #fff; font-size: clamp(2.6rem, 5vw, 4.5rem); margin-bottom: 1rem; }
.legal-hero p { color: rgba(255,255,255,.82); font-size: 1rem; margin: 0; }
.legal-page { background: var(--mist); }
.legal-document { background: #fff; border: 1px solid var(--line); border-radius: .8rem; margin: 0 auto; max-width: 980px; padding: clamp(2rem, 5vw, 5rem); }
.legal-document h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 3rem 0 1.25rem; }
.legal-document h2:first-child { margin-top: 0; }
.legal-document h3 { color: var(--navy); font-size: 1.25rem; margin: 2rem 0 .8rem; }
.legal-document p, .legal-document li { line-height: 1.75; }
.legal-document ul { padding-left: 1.35rem; }
.legal-document li { margin-bottom: .55rem; }
.legal-document a { color: var(--blue); font-weight: 700; }
.legal-document .table { margin: 1.5rem 0; min-width: 760px; }
.legal-document .table th { background: var(--navy); color: #fff; font-family: var(--sans); }
.legal-document .table td, .legal-document .table th { padding: 1rem; vertical-align: top; }
.legal-document .table td:first-child { font-weight: 700; white-space: nowrap; }
.legal-document .policy-promise { background: var(--mist); border-left: 4px solid var(--blue); margin-top: 2rem; padding: 1.5rem 1.5rem 1rem; }
.cookie-policy-content { min-height: 300px; }

@media (max-width: 991.98px) {
    :root { --header-height: 88px; }
    .navbar { min-height: var(--header-height); }
    .navbar-brand img { height: 62px; }
    .navbar-collapse { background: var(--navy); padding: 1rem 0 1.5rem; }
    .navbar-nav { align-items: stretch !important; gap: .4rem; }
    .navbar-dark .navbar-nav .nav-link { display: inline-block; }
    .hero, .hero-content { min-height: 570px; }
    .hero-image { opacity: .45; width: 100%; }
    .hero-split .container { min-height: auto; }
    .hero-split .hero-copy { padding-bottom: 1rem; }
    .van-hero { padding-bottom: 2rem; }
    .sector-icon-row { grid-template-columns: repeat(3,1fr); gap: 1.5rem 0; }
    .sector-card-icon { top: auto; transform: translateY(-50%); }
    .cta-panel { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
    .approach-row::before { border-left: 5px dotted #173b6c; border-top: 0; bottom: calc(1.5rem + 26px); left: calc(var(--bs-gutter-x) * .5 + 26px); right: auto; top: calc(1.5rem + 26px); transform: none; }
    .process-step { display: grid; gap: 0 1.25rem; grid-template-columns: 52px minmax(0, 1fr); text-align: left; }
    .process-step > span { grid-row: 1; margin: 0; }
    .process-step-copy { background: var(--mist); min-height: 52px; padding-top: .2rem; position: relative; }
    .process-step h3 { margin-bottom: .45rem; }
}

@media (max-width: 767.98px) {
    .section-pad { padding: 4rem 0; }
    .hero h1 { font-size: 2.55rem; }
    .hero p { font-size: 1.05rem; }
    .hero-actions { margin-top: 2.5rem; }
    .proof-item { border-bottom: 1px solid rgba(255,255,255,.18); border-right: 0; padding: 1rem .5rem; }
    .sector-benefits .proof-item { border-color: #dce0e6; }
    .sector-icon-row { grid-template-columns: repeat(2,1fr); }
    .testimonial-card { padding: 1.5rem; }
    .cta-panel { background: #294c7d; padding: 1.8rem; }
    .btn-arrow { min-width: 0; width: 100%; }
    .contact-form-card { padding: 1.4rem; }
    .team-profile + .team-profile { margin-top: 3rem; padding-top: 3rem; }
    .team-profile-image { max-width: none; width: 100%; }
    .team-profile-details { grid-template-columns: 1fr; }
}