/* HydroGrid premium navigation shell — 2026-10-03 */
html,body{max-width:100%;overflow-x:clip}
.site-header{position:sticky!important;top:0!important;z-index:1000!important;background:rgba(255,255,255,.96)!important;backdrop-filter:saturate(165%) blur(18px);-webkit-backdrop-filter:saturate(165%) blur(18px);border-bottom:1px solid rgba(8,30,52,.1)!important;box-shadow:0 8px 28px rgba(8,30,52,.045)}
.site-header .nav{width:min(1180px,90%)!important;margin:auto!important;height:86px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:26px!important;position:relative!important}
.site-header .logo-brand{display:flex!important;align-items:center!important;gap:10px!important;min-width:max-content!important;color:#162d44!important;text-decoration:none!important}
.site-header .logo-window{display:block!important;position:relative!important;width:56px!important;height:56px!important;overflow:hidden!important;border-radius:8px!important;flex:none!important;background:#031225!important}
.site-header .logo-window img{position:absolute!important;max-width:none!important;width:123px!important;height:auto!important;left:-33px!important;top:-28px!important}
.site-header .brand-name{font-size:27px!important;font-weight:900!important;letter-spacing:-1px!important;color:#162d44!important;line-height:1!important}
.site-header .brand-name>span{color:#1466ee!important}
.site-header .brand-name small{display:block!important;font-size:9px!important;letter-spacing:3px!important;color:#566b80!important;line-height:1!important;margin-top:6px!important}
.site-header .premium-nav{margin-left:auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:3px!important;min-width:0!important;font-size:13px!important}
.site-header .premium-nav>.nav-link,.site-header .premium-nav>.nav-group>summary{min-height:46px!important;display:flex!important;align-items:center!important;gap:6px!important;padding:0 11px!important;border-radius:10px!important;color:#17324b!important;font-weight:800!important;white-space:nowrap!important;text-decoration:none!important}
.site-header .premium-nav>.nav-link:hover,.site-header .premium-nav>.nav-link:focus-visible,.site-header .premium-nav>.nav-group>summary:hover,.site-header .premium-nav>.nav-group>summary:focus-visible,.site-header .premium-nav>.nav-group[open]>summary{background:#f0f5fa!important;color:#0a55cf!important}
.site-header .premium-nav a[aria-current="page"]{background:#eef5fb!important;color:#075aca!important}
.site-header .nav-group{position:relative!important;margin:0!important;padding:0!important;border:0!important}
.site-header .nav-group>summary{list-style:none!important;cursor:pointer!important;user-select:none!important}
.site-header .nav-group>summary::-webkit-details-marker{display:none!important}
.site-header .nav-group>summary span{font-size:14px!important;transition:transform .18s ease!important}
.site-header .nav-group[open]>summary span{transform:rotate(180deg)}
.site-header .nav-dropdown{position:absolute!important;left:0!important;top:calc(100% + 11px)!important;width:340px!important;padding:10px!important;background:rgba(255,255,255,.99)!important;border:1px solid #dce6ef!important;border-radius:16px!important;box-shadow:0 22px 55px rgba(8,30,52,.16)!important;display:grid!important;gap:3px!important}
.site-header .nav-dropdown-right{left:auto!important;right:0!important}
.site-header .nav-dropdown a{display:grid!important;gap:2px!important;padding:11px 12px!important;border-radius:10px!important;text-decoration:none!important;color:#112c45!important}
.site-header .nav-dropdown a:hover,.site-header .nav-dropdown a:focus-visible{background:#eef5fb!important}
.site-header .nav-dropdown strong{font-size:13px!important;color:#112c45!important}
.site-header .nav-dropdown small{font-size:11px!important;line-height:1.35!important;font-weight:500!important;color:#607589!important}
.site-header .nav-special{display:grid!important;gap:0!important;padding:7px 11px!important;border-radius:11px!important;background:#eff8ff!important;border:1px solid #c9e9fb!important;white-space:nowrap!important;line-height:1.12!important;text-decoration:none!important}
.site-header .nav-special small{font-size:9px!important;text-transform:uppercase!important;letter-spacing:1.2px!important;color:#2773ad!important;font-weight:800!important}
.site-header .nav-special strong{font-size:12px!important;color:#07365c!important}
.site-header .nav-whatsapp{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:46px!important;padding:12px 16px!important;border-radius:10px!important;background:#1466ee!important;color:#fff!important;font-size:13px!important;font-weight:800!important;white-space:nowrap!important;text-decoration:none!important;border:0!important}
.site-header .nav-whatsapp:hover,.site-header .nav-whatsapp:focus-visible{background:#0750c8!important}
.site-header .menu{display:none!important;min-width:48px!important;min-height:48px!important;align-items:center!important;justify-content:center!important;gap:9px!important;border:1px solid #cbd8e4!important;border-radius:11px!important;background:#fff!important;color:#112c45!important;font-weight:800!important;cursor:pointer!important}
.site-header .menu-bars,.site-header .menu-bars:before,.site-header .menu-bars:after{width:18px!important;height:2px!important;background:#17324b!important;border-radius:2px!important;display:block!important;content:""!important;position:relative!important}
.site-header .menu-bars:before{position:absolute!important;top:-6px!important}
.site-header .menu-bars:after{position:absolute!important;top:6px!important}
.site-header .menu[aria-expanded="true"] .menu-bars{background:transparent!important}
.site-header .menu[aria-expanded="true"] .menu-bars:before{top:0!important;transform:rotate(45deg)}
.site-header .menu[aria-expanded="true"] .menu-bars:after{top:0!important;transform:rotate(-45deg)}
.hero-grid>*,.split>*,.grid>*{min-width:0}
.hero .intro,.hero h1,.actions,.strip{max-width:100%}
@media(max-width:1240px){
 .site-header .nav{height:78px!important}
 .site-header .menu{display:inline-flex!important;margin-left:auto!important;flex:none!important}
 .site-header .premium-nav{display:none!important}
 .site-header .premium-nav.open{display:flex!important;position:absolute!important;top:calc(100% + 1px)!important;right:0!important;width:min(430px,94vw)!important;max-height:calc(100dvh - 92px)!important;overflow:auto!important;background:rgba(255,255,255,.995)!important;border:1px solid #dbe5ed!important;border-radius:0 0 18px 18px!important;box-shadow:0 24px 60px rgba(8,30,52,.18)!important;padding:12px!important;flex-direction:column!important;align-items:stretch!important;gap:3px!important}
 .site-header .premium-nav>.nav-link,.site-header .premium-nav>.nav-group>summary{min-height:48px!important;padding:0 13px!important}
 .site-header .nav-group{width:100%!important}
 .site-header .nav-dropdown,.site-header .nav-dropdown-right{position:static!important;width:100%!important;padding:4px 8px 9px!important;border:0!important;border-radius:12px!important;box-shadow:none!important;background:#f7fafc!important}
 .site-header .nav-dropdown a{min-height:48px!important;padding:9px 11px!important}
 .site-header .nav-special{padding:10px 13px!important;margin-top:3px!important}
 .site-header .nav-whatsapp{min-height:48px!important;margin-top:4px!important}
 body.hg-nav-open{overflow:hidden!important}
}
@media(max-width:650px){
 .site-header .nav{height:72px!important;width:calc(100% - 28px)!important;max-width:none!important;gap:10px!important}
 .site-header .logo-brand{gap:7px!important}
 .site-header .logo-window{width:38px!important;height:42px!important}
 .site-header .logo-window img{width:93px!important;left:-27px!important;top:-21px!important}
 .site-header .brand-name{font-size:18px!important}
 .site-header .brand-name small{font-size:7px!important;letter-spacing:1.7px!important;margin-top:5px!important}
 .site-header .menu{padding:8px 10px!important;font-size:13px!important}
 .site-header .premium-nav.open{position:fixed!important;top:72px!important;left:0!important;right:0!important;width:100%!important;max-height:calc(100dvh - 72px)!important;border-radius:0!important;padding:12px 14px 22px!important}
 .hero{padding-top:38px}
 .hero .wrap{width:calc(100% - 32px)}
 .hero h1{font-size:clamp(38px,12vw,50px)!important;line-height:1.05!important;letter-spacing:-2px!important;overflow-wrap:break-word}
 .hero .intro{font-size:17px!important}
 .actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
 .actions .btn{width:100%!important;min-height:50px!important;white-space:normal!important}
 .chooser{min-width:0!important}.choice{min-width:0!important;gap:12px!important}
 .mobilebar{padding-left:14px!important;padding-right:14px!important}.mobilebar a{min-width:0!important}
}
@media(max-width:380px){
 .site-header .brand-name{font-size:17px!important}
 .site-header .brand-name small{letter-spacing:1.4px!important}
 .site-header .menu .menu-label{display:none!important}
 .hero .wrap{width:calc(100% - 28px)}.hero h1{font-size:39px!important}
}
/* Wide Solutions dropdown.
   The premium nav replaced a seven-link flat header that linked /commercial-industrial-ro/
   from 31 pages, which left 12 service pages unreachable from any navigation. They are
   restored here rather than added to the bar, because the bar is already at its width
   limit at 1161px and a twelfth top-level item would overflow it. Two columns keep the
   panel short and the bar unchanged. */
.site-header .nav-dropdown-wide{width:min(600px,calc(100vw - 40px))!important;grid-template-columns:1fr 1fr!important;column-gap:8px!important}
@media(max-width:1240px){
 /* The width reset belongs here and not only in the rule above. The desktop
    `.nav-dropdown-wide` width is declared later in this file at the same
    specificity, so it wins the cascade and the earlier `width:100%` never
    reached the wide panel. Between 651px and 1160px that left a 600px panel
    sitting inside the 430px collapsed nav, so all 16 of its links ran past the
    right edge of the screen and could not be clicked -- including
    /borehole-water-treatment/ and /backup-water-systems/. At 650px and below the
    panel becomes viewport-width, so `calc(100vw - 40px)` happened to fit there
    and the defect hid from the phone widths alone. Resetting the width makes the
    wide panel follow the collapsed panel at every collapsed width. */
 .site-header .nav-dropdown-wide{width:100%!important;grid-template-columns:1fr!important}
}

@media(prefers-reduced-motion:reduce){.site-header .nav-group>summary span,.site-header .menu-bars:before,.site-header .menu-bars:after{transition:none!important}}

/* 2026-10-16 navigation refinement: visible Domestic RO + cleaner collapsed/mobile menu */
.site-header .premium-nav>.nav-ro{color:#075aca!important;background:#f2f8ff!important;border:1px solid #d7eaff!important}
.site-header .premium-nav>.nav-ro:hover,.site-header .premium-nav>.nav-ro:focus-visible{background:#e7f3ff!important;color:#0649a8!important}
@media(max-width:1240px){
 .site-header .premium-nav.open{gap:6px!important}
 .site-header .premium-nav>.nav-link,.site-header .premium-nav>.nav-group>summary{border:1px solid transparent!important}
 .site-header .premium-nav>.nav-link:hover,.site-header .premium-nav>.nav-link:focus-visible,.site-header .premium-nav>.nav-group>summary:hover,.site-header .premium-nav>.nav-group>summary:focus-visible,.site-header .premium-nav>.nav-group[open]>summary{border-color:#dbe6ef!important}
 .site-header .premium-nav>.nav-ro{order:-1!important;min-height:52px!important;font-size:14px!important}
}
@media(max-width:650px){
 .site-header .premium-nav.open{background:#fff!important;padding:10px 14px calc(24px + env(safe-area-inset-bottom))!important;overscroll-behavior:contain!important}
 .site-header .premium-nav>.nav-link,.site-header .premium-nav>.nav-group>summary{min-height:52px!important;padding:0 14px!important;border-radius:12px!important;font-size:14px!important}
 .site-header .nav-group>summary{justify-content:space-between!important;background:#f8fafc!important;border-color:#e4ebf1!important}
 .site-header .nav-dropdown,.site-header .nav-dropdown-right,.site-header .nav-dropdown-wide{margin-top:5px!important;padding:6px!important;background:#f4f8fb!important;border:1px solid #e1eaf1!important;border-radius:12px!important}
 .site-header .nav-dropdown a{min-height:46px!important;padding:10px!important;border-radius:9px!important}
 .site-header .nav-dropdown strong{font-size:13px!important}.site-header .nav-dropdown small{font-size:11px!important;line-height:1.3!important}
 .site-header .nav-special{min-height:54px!important;padding:10px 14px!important;border-radius:12px!important}
 .site-header .nav-whatsapp{min-height:52px!important;border-radius:12px!important}
 .site-header .menu{min-width:46px!important;min-height:46px!important}
 body.hg-nav-open{overflow:hidden!important;touch-action:none!important}
}
@media(max-width:410px){
 .site-header .menu .menu-label{display:none!important}
 .site-header .brand-name small{display:none!important}
 .site-header .brand-name{font-size:19px!important}
}