:root {
      --navy: #162733;
      --deep-navy: #0f202c;
      --blue: #1887e7;
      --blue-light: #2997f6;
      --white: #fff;
      --ink: #142131;
      --muted: #303d4a;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; color: var(--ink); font-family: Arial, Helvetica, sans-serif; background: #fff; }
    a { color: inherit; }
    button, input, select, textarea { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    :focus-visible { outline: 3px solid #54abfa; outline-offset: 4px; }
    .container { width: min(1168px, calc(100% - 48px)); margin-inline: auto; }
    .site-header { height: 105px; background: var(--navy); color: #fff; }
    .header-row { display: flex; align-items: center; height: 100%; gap: 26px; }
    .brand { min-width: 425px; display: inline-flex; align-items: center; text-decoration: none; gap: 13px; }
    .brand-symbol { width: 91px; height: 87px; flex: none; object-fit: contain; }
    .brand-lines { display: flex; flex-direction: column; white-space: nowrap; }
    .brand-name { color: #f8fafd; font-size: 36px; font-weight: 800; line-height: 1.02; letter-spacing: -0.7px; }
    .brand-sub { color: #288ff0; font-size: 21px; font-weight: 700; letter-spacing: 4.2px; line-height: 1.1; }
    .desktop-nav { display: flex; align-items: center; justify-content: center; gap: 27px; margin-left: auto; }
    .desktop-nav a { text-decoration: none; color: #f4f7fa; font-size: 16px; padding-block: 15px; border-bottom: 3px solid transparent; transition: color .18s, border-color .18s; }
    .desktop-nav a:hover, .desktop-nav a.active { color: #3eabff; border-bottom-color: #138de9; }
    .button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; cursor: pointer; font-size: 18px; border-radius: 7px; min-height: 58px; white-space: nowrap; transition: background .2s, box-shadow .2s, transform .2s; }
    .button:hover { transform: translateY(-1px); }
    .button-primary { background: #1686e9; color: white; border: 1px solid #1686e9; box-shadow: 0 5px 13px #0002; }
    .button-primary:hover { background: #0677dd; }
    .button-outline { color: #fff; background: #1525307a; border: 2px solid #edf5fd; }
    .button-outline:hover { background: #263a4b; }
    .header-call { flex: 0 0 208px; padding-inline: 15px; margin-left: 21px; font-size: 17px; }
    .icon { display: inline-block; width: 23px; height: 23px; fill: currentColor; flex: none; }
    .mobile-toggle { display: none; border: 0; color: #fff; background: transparent; padding: 7px; margin-left: auto; cursor: pointer; }
    .mobile-nav { display: none; }
    /* HERO: sampled photography from the supplied reference; text remains editable. */
    .hero { position: relative; height: 467px; overflow: hidden; isolation: isolate; color: white; background: linear-gradient(90deg,#0c151d 0%,#1b2934 45%,#53616b 69%,#253744 100%); }
    .hero-photo { position: absolute; z-index: -2; inset: 0 0 0 auto; width: 702px; background: url('../images/hero-faucet.webp') center / 702px 469px no-repeat; }
    .hero::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; background:linear-gradient(90deg,rgba(8,17,24,.26) 0%,rgba(12,22,31,.23) 38%,rgba(17,27,33,.09) 54%,transparent 73%); }
    .hero-inner { position: relative; height: 100%; padding-top: 59px; }
    .eyebrow { margin: 0 0 14px; font-size: 13px; line-height: 1.5; letter-spacing: 2.65px; color: #fff; }
    .hero h1 { margin: 0; font-size: clamp(40px, 4.35vw, 60px); line-height: .95; letter-spacing: -1.6px; font-weight: 800; color: #fff; }
    .hero h1 span { color: #248de7; }
    .hero-copy { width: 535px; max-width: 100%; margin: 16px 0 23px; font-size: 18px; line-height: 1.34; color: #f7f8fb; }
    .hero-actions { display: flex; align-items: center; gap: 20px; }
    .hero-actions .button:first-child { padding: 0 28px; }
    .hero-actions .button:last-child { padding: 0 23px; }
    /* FOUR SERVICES */
    .services { background: #f8faff; border-top: 5px solid #fff; }
    .service-grid { min-height: 151px; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; }
    .service { display: grid; grid-template-columns: 72px minmax(0,1fr); align-items:start; gap: 13px; min-height: 95px; padding: 3px 15px 0 0; color: #131f31; text-decoration: none; }
    .service:not(:first-child) { border-left: 1px solid #d9dde5; padding-left: 31px; }
    .service-icon { width: 58px; height: 58px; fill: currentColor; flex: none; }
    .service:nth-child(2) .service-icon { color: #076cb7; }
    .service h2 { margin: 0 0 11px; font-size: 18px; font-weight: 800; line-height: 1.15; letter-spacing: -.45px; }
    .service p { margin: 0; font-size: 15px; line-height: 1.33; color: #384451; }
    .service:hover h2 { color: #137bda; }
    /* ABOUT: same split, with a photographed plumbing installation on the right. */
    .about { min-height: 327px; display: grid; grid-template-columns: 25% 75%; background: #f5f9ff; }
    .about-mark { background: #172a36 url('../images/brand-mark.webp') center / cover no-repeat; min-height:327px; }
    .about-main { position: relative; min-width: 0; min-height: 327px; overflow: hidden; background: #f5f9ff; isolation:isolate; }
    .about-main::before { content:""; position:absolute; inset:0 0 0 auto; width: 612px; z-index:-2; background:url('../images/about-pipes.webp') center / 612px 328px no-repeat; }
    .about-main::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,#f5f9ff 0%,#f5f9ff 33%,rgba(245,249,255,.94) 42%,rgba(245,249,255,.08) 62%,transparent 75%); }
    .about-content { padding: 32px 0 16px 44px; width: 520px; max-width: 57%; }
    .about-kicker { margin: 0 0 7px; color: #0a69b8; font-size: 15px; font-weight: 800; letter-spacing: 2px; }
    .about h2 { font-size: 29px; line-height: 1.1; letter-spacing: -.85px; margin: 0 0 14px; }
    .about-text { font-size: 16px; line-height: 1.43; max-width: 450px; margin: 0 0 18px; }
    .trust-row { display: flex; align-items:center; gap: 27px; margin-top: 5px; }
    .trust-item { display:flex; align-items:center; gap: 9px; font-size: 16px; line-height:1.14; font-weight:700; white-space:nowrap; }
    .trust-icon { width:40px; height:42px; fill:#102131; flex:none; }
    /* FOOTER */
    .footer { min-height: 144px; background: #142631; color: #f9fbff; }
    .footer-grid { min-height: 144px; display: grid; grid-template-columns: 1.2fr .95fr 1.35fr; align-items: center; }
    .contact-item { display:flex; align-items: center; gap:21px; min-height:55px; color: #fafbfd; text-decoration:none; font-size: 17px; line-height:1.45; padding:0 24px 0 27px; }
    .contact-item:first-child { padding-left: 25px; }
    .contact-item:not(:first-child) { border-left: 1px solid #b2bec4; padding-left: 62px; }
    .contact-item .icon { width:32px; height:32px; }
    .contact-item:hover span { color:#56b8ff; }
    /* Quote and gallery overlays are hidden until a real user action. */
    dialog { border: 0; padding: 0; color: var(--ink); max-width: min(94vw, 535px); width:100%; border-radius: 12px; box-shadow: 0 28px 100px #0009; }
    dialog::backdrop { background: rgba(5,17,27,.72); backdrop-filter:blur(3px); }
    .dialog-head { display:flex; justify-content:space-between; align-items:center; padding: 19px 24px; border-bottom:1px solid #dbe4ec; }
    .dialog-head h2 { margin:0; font-size:23px; }
    .close-dialog { cursor:pointer; border:0; background:#eef3f7; width:34px; height:34px; border-radius:50%; font-size:24px; line-height:1; }
    .quote-form { display:grid; gap:13px; padding:22px 24px 26px; }
    .quote-form label { display:grid; gap:6px; font-size:13px; font-weight:700; }
    .quote-form input, .quote-form select, .quote-form textarea { border:1px solid #b4c5d2; border-radius:5px; width:100%; padding:10px 11px; font-size:15px; background:#fff; }
    .quote-form textarea { resize:vertical; min-height:88px; }
    .quote-form button { width:100%; }
    .form-note { margin:0; font-size:12px; color:#516171; line-height:1.45; }
    .gallery-modal { width:min(94vw,900px); max-width:900px; }
    .gallery-panel { display:grid; grid-template-columns:1fr 1fr; gap:13px; padding:18px; }
    .gallery-panel img { display:block; width:100%; height:260px; object-fit:cover; }
    .gallery-panel p { margin:8px 0 0; font-size:13px; }
    @media (max-width: 1190px) {
      .brand { min-width: 360px; }
      .brand-name { font-size:30px; }
      .brand-sub { font-size:17px; letter-spacing:3.5px; }
      .desktop-nav { gap:18px; }
      .header-call { flex-basis:186px; margin-left:0; font-size:15px; }
      .service { grid-template-columns:58px minmax(0,1fr); gap:8px; }
      .service:not(:first-child) { padding-left:14px; }
      .service-icon { width:46px; height:46px; }
      .about-content { max-width:63%; }
      .trust-row { gap:14px; }
      .contact-item:not(:first-child) { padding-left:25px; }
    }
    @media (max-width: 940px) {
      .site-header { height:85px; }
      .brand { min-width:0; }
      .brand-symbol { width:72px; height:69px; }
      .brand-name { font-size:27px; }
      .brand-sub { font-size:15px; letter-spacing:2.9px; }
      .desktop-nav, .header-call { display:none; }
      .mobile-toggle { display:flex; }
      .mobile-nav.is-open { display:grid; background:var(--navy); position:absolute; top:85px; left:0; right:0; z-index:100; padding:12px 24px 22px; box-shadow:0 16px 25px #0003; }
      .mobile-nav a { color:#fff; text-decoration:none; padding:12px 0; border-bottom:1px solid #ffffff26; }
      .hero-photo { right:0; opacity:.78; }
      .hero::before { background:linear-gradient(90deg,#0b1725ef 0%,#10202fde 49%,#14202a55 100%); }
      .service-grid { grid-template-columns:repeat(2,1fr); gap:15px 0; padding-block:21px; }
      .service { padding-block:5px; min-height:90px; }
      .service:nth-child(3) { border-left:0; padding-left:0; }
      .about { grid-template-columns: 27% 73%; }
      .about-content { width:100%; max-width:78%; }
      .about-main::after { background:linear-gradient(90deg,#f5f9ff 0%,#f5f9ff 48%,rgba(245,249,255,.55) 78%, transparent 100%); }
      .footer-grid { grid-template-columns:1fr 1fr; padding-block:20px; row-gap:19px; }
      .contact-item:last-child { grid-column:span 2; border-left:0; padding-left:25px; }
    }
    @media (max-width: 600px) {
      .container { width: min(100% - 32px, 1168px); }
      .brand-symbol { width:57px; height:57px; }
      .brand { gap:8px; }
      .brand-name { font-size: clamp(18px,5vw,26px); }
      .brand-sub { font-size:clamp(10px,2.6vw,14px); letter-spacing:2px; }
      .hero { height:auto; min-height:520px; }
      .hero-photo { right:-245px; }
      .hero-inner { padding-top:56px; padding-bottom:40px; }
      .eyebrow { font-size:10px; letter-spacing:1.45px; }
      .hero h1 { font-size:clamp(37px,9.2vw,52px); line-height:1.02; }
      .hero-copy { font-size:16px; width:96%; line-height:1.45; }
      .hero-actions { gap:10px; flex-wrap:wrap; }
      .hero-actions .button { min-height:51px; font-size:15px; }
      .hero-actions .button:first-child { padding-inline:15px; }
      .hero-actions .button:last-child { padding-inline:14px; }
      .hero-actions .icon { width:19px; height:19px; }
      .service-grid { grid-template-columns:1fr; }
      .service, .service:not(:first-child), .service:nth-child(3) { border-left:0; border-bottom:1px solid #d9dde5; padding:11px 0; grid-template-columns:65px 1fr; min-height:80px; }
      .service:last-child { border-bottom:0; }
      .about { grid-template-columns: 1fr; }
      .about-mark { min-height:165px; background-size:auto 328px; background-position:center 47%; }
      .about-main { min-height:410px; }
      .about-main::before { opacity:.48; }
      .about-main::after { background:linear-gradient(90deg,#f5f9fff5 0%,#f5f9ffdc 100%); }
      .about-content { max-width:100%; padding:28px 22px; }
      .about h2 { font-size:26px; }
      .about-text { font-size:15px; }
      .trust-row { flex-wrap:wrap; gap:13px 18px; }
      .trust-item { font-size:14px; }
      .footer-grid { grid-template-columns:1fr; gap:0; padding-block:14px; }
      .contact-item, .contact-item:first-child, .contact-item:not(:first-child), .contact-item:last-child { grid-column:auto; border-left:0; padding:13px 5px; font-size:15px; border-bottom:1px solid #ffffff28; gap:16px; }
      .contact-item:last-child { border-bottom:0; overflow-wrap:anywhere; }
      .gallery-panel { grid-template-columns:1fr; }
      .gallery-panel img { height:220px; }
    }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto!important; transition:none!important; } }
  

/* Multi-page routes & editorial content */
.body-page { min-height:calc(100vh - 249px); background:#f7faff; }
.site-header {position:relative; z-index:60}
.desktop-nav a[aria-current="page"] { color:#3eabff; border-bottom-color:#138de9; }
.brand {min-width:425px}
.inner-hero {position:relative; overflow:hidden; background:#122633; color:#fff; min-height:310px; isolation:isolate}
.inner-hero::before {content:""; position:absolute; inset:0; background:linear-gradient(90deg,#0d1c28 4%,#142937ed 45%,#14293764 100%);z-index:-1}
.inner-hero-photo {position:absolute;inset:0 0 0 auto;width:52%; background:url('../images/hero-faucet.webp') center / cover no-repeat;z-index:-2}
.inner-hero-pipes .inner-hero-photo { background-image:url('../images/about-pipes.webp') }
.inner-hero .container {padding-top:58px;padding-bottom:62px}
.eyebrow {font-size:13px;letter-spacing:2.2px;font-weight:800;text-transform:uppercase;color:#3c9bf2;margin:0 0 10px}
.inner-hero h1 {font-size:clamp(36px,5.2vw,59px);line-height:1.05;letter-spacing:-1.5px;max-width:730px;margin:0 0 16px}
.inner-hero p:not(.eyebrow) {font-size:19px;max-width:610px;line-height:1.5;margin:0}
.section-pad {padding:68px 0}
.section-heading {font-size:clamp(30px,4vw,42px);letter-spacing:-1px;line-height:1.1;margin:0 0 15px;color:#152633}
.section-intro {max-width:760px;font-size:17px;line-height:1.6;color:#485766;margin:0 0 32px}
.services-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.service-detail {display:flex;flex-direction:column;min-height:236px;padding:27px;background:#fff;border:1px solid #e4ecf3;border-top:4px solid #1686e9;box-shadow:0 12px 30px #0b294c0b;transition:transform .22s,box-shadow .22s}
.service-detail:hover {transform:translateY(-4px);box-shadow:0 16px 36px #0b294c16}
.service-detail .service-number {font-size:13px;font-weight:800;letter-spacing:2px;color:#1476ce}
.service-detail h2 {font-size:24px;margin:12px 0 10px;letter-spacing:-.6px}
.service-detail p {font-size:15.5px;line-height:1.55;margin:0;color:#4c5c69;flex:1}
.service-detail a {display:inline-flex;align-items:center;gap:6px;color:#087ed8;font-weight:800;text-decoration:none;margin-top:20px}
.service-detail a:hover {text-decoration:underline}
.cta-band {background:#142631;color:white;padding:30px 0}
.cta-band-row {display:flex;align-items:center;justify-content:space-between;gap:24px}
.cta-band h2 {font-size:27px;margin:0 0 5px}
.cta-band p {font-size:16px;margin:0;color:#dce8f1}
.cta-band .button {padding:0 25px}
.about-page-grid {display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:42px}
.about-page-image {min-height:390px;background:url('../images/about-pipes.webp') center / cover no-repeat;box-shadow:0 16px 32px #14273819}
.about-page-copy {padding:15px 0}
.about-page-copy p {font-size:16px;line-height:1.65;color:#344657}
.about-page-copy .section-heading {margin-bottom:20px}
.credentials {display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:26px}
.credential {background:white;border-left:4px solid #1686e9;padding:20px;min-height:105px}
.credential strong {display:block;font-size:29px;color:#147cde;letter-spacing:-1px}
.credential span {font-size:14px;color:#3c4e5c}
.feature-list {display:grid;grid-template-columns:repeat(2,1fr);gap:13px;list-style:none;padding:0;margin:20px 0}
.feature-list li {padding:12px 13px;background:#fff;border:1px solid #e0e9f1;font-weight:700}
.feature-list li::before {content:'✓';color:#0a82e7;margin-right:10px}
.gallery-toolbar {display:flex;gap:9px;flex-wrap:wrap;margin-bottom:25px}
.filter-button {border:1px solid #c8d7e3;padding:10px 16px;background:#fff;color:#163347;cursor:pointer;border-radius:4px;font-size:15px;font-weight:700}
.filter-button[aria-pressed="true"],.filter-button:hover {background:#1686e9;color:#fff;border-color:#1686e9}
.gallery-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:23px}
.gallery-card {background:#fff;border:1px solid #dce7ef;box-shadow:0 12px 30px #172d400c;overflow:hidden}
.gallery-card[hidden] {display:none}
.gallery-photo-button {display:block;border:0;padding:0;background:transparent;width:100%;cursor:zoom-in;overflow:hidden}
.gallery-photo-button img {width:100%;height:315px;object-fit:cover;display:block;transition:transform .25s}
.gallery-photo-button:hover img {transform:scale(1.035)}
.gallery-card-content {padding:22px}
.gallery-card-content h2 {font-size:24px;margin:0 0 8px}
.gallery-card-content p {font-size:15px;line-height:1.55;color:#4c5e6d;margin:0}
.notice {padding:14px 18px;background:#eaf4ff;border-left:4px solid #1887e7;color:#26425b;font-size:14px;line-height:1.5;margin-top:26px}
.contact-grid {display:grid;grid-template-columns:.9fr 1.1fr;gap:42px}
.contact-list {list-style:none;padding:0;margin:25px 0 0}
.contact-list li {border-bottom:1px solid #d9e5ed;padding:19px 0;line-height:1.45}
.contact-list strong {display:block;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#1478cb;margin-bottom:5px}
.contact-list a {color:#142c3e;text-decoration:none;overflow-wrap:anywhere}
.contact-list a:hover {text-decoration:underline}
.contact-form {display:grid;gap:16px;background:#fff;box-shadow:0 15px 36px #112b4312;padding:30px;border-top:4px solid #1887e7}
.contact-form h2 {font-size:27px;margin:0 0 3px}
.contact-form label {display:grid;gap:7px;font-size:14px;font-weight:700}
.contact-form input,.contact-form select,.contact-form textarea {font:inherit;border:1px solid #bdcbd5;border-radius:4px;padding:12px;width:100%;color:#172633;background:#fff}
.contact-form textarea {min-height:130px;resize:vertical}
.contact-form .button {width:100%;border:0}
.form-explain {font-size:12px;line-height:1.5;color:#596979;margin:0}
.home-extended {padding:54px 0}
.home-columns {display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
.home-columns img {display:block;width:100%;height:260px;object-fit:cover}
.home-columns p {font-size:16px;line-height:1.6;color:#455a6c}
.home-columns .button {padding:0 24px;margin-top:14px}
.preview-dialog {border:0;border-radius:6px;padding:0;width:min(960px,96vw);max-height:92vh;margin:auto;background:#fff;color:#142631}
.preview-dialog::backdrop {background:#07151be8}
.preview-dialog img {display:block;max-width:100%;max-height:75vh;object-fit:contain;margin:auto}
.preview-dialog .dialog-head {position:relative}
.preview-dialog p {padding:9px 20px 18px;margin:0;color:#596e7c;font-size:13px}
.site-footer-secondary {border-top:1px solid #324550;background:#0f202c;color:#bad0df;text-align:center;font-size:12px;padding:14px}
@media(max-width:940px){.services-list {grid-template-columns:repeat(2,1fr)}.about-page-grid,.contact-grid{grid-template-columns:1fr}.contact-grid{gap:18px}.inner-hero-photo{width:75%;opacity:.58}.gallery-photo-button img{height:255px}.credentials{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.services-list,.gallery-grid,.home-columns,.credentials,.feature-list{grid-template-columns:1fr}.inner-hero{min-height:290px}.inner-hero .container{padding-top:55px;padding-bottom:45px}.inner-hero p:not(.eyebrow){font-size:16px}.section-pad{padding:43px 0}.cta-band-row{flex-direction:column;align-items:flex-start}.cta-band .button{width:100%}.about-page-image{min-height:250px}.gallery-photo-button img{height:250px}.contact-form{padding:22px}}

/* Quote delivery status & unobtrusive bot trap. */
.honeypot-field { position:absolute!important; left:-10000px!important; top:auto!important; width:1px!important; height:1px!important; overflow:hidden!important; opacity:0!important; pointer-events:none!important; }
.form-status { padding:11px 13px; border-radius:5px; font-size:14px; line-height:1.45; font-weight:600; }
.form-status[data-state="success"] { color:#11552a; background:#e8f6eb; border:1px solid #b8e1c2; }
.form-status[data-state="error"] { color:#8b2222; background:#fff0ee; border:1px solid #f0bcb5; }
.form-status[hidden] { display:none; }