:root{--navy:#063a5d;--navy2:#082f4b;--blue:#08a5e8;--blue2:#72d5f7;--ink:#0a3150;--muted:#607a8e;--line:#d9e9f1;--soft:#edf8fc;--white:#fff;--shadow:0 18px 45px rgba(6,58,93,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Manrope,sans-serif;color:var(--ink);line-height:1.55;background:#fff}body.menu-open{overflow:hidden}a{text-decoration:none;color:inherit}.container{width:min(1180px,calc(100% - 40px));margin:auto}.utility-bar{background:var(--navy);color:#e8f6fb;font-size:11px}.utility-inner{min-height:34px;display:flex;justify-content:space-between;align-items:center;gap:18px}.utility-inner>div{display:flex;gap:18px}.utility-inner a,.utility-inner span{display:flex;align-items:center;gap:7px}.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.98);border-bottom:1px solid rgba(6,58,93,.1);backdrop-filter:blur(10px)}.nav-shell{height:80px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;flex-direction:column;align-items:center;gap:0}.brand img{width:92px;max-height:58px;object-fit:contain}.brand span{font-size:9px;color:var(--navy);margin-top:-3px}.main-nav{display:flex;align-items:center;gap:18px;font-size:12px;font-weight:700}.main-nav>a{white-space:nowrap}.main-nav>a:not(.track-link):not(.contact-cta){position:relative}.main-nav>a.active:not(.track-link):not(.contact-cta){color:#079fdc}.main-nav>a.active:not(.track-link):not(.contact-cta):after{content:"";position:absolute;height:2px;background:var(--blue);left:0;right:0;bottom:-12px}.nav-arrow{display:none}.track-link,.contact-cta{padding:12px 15px;border-radius:9px;display:flex;gap:8px;align-items:center}.track-link{border:1px solid #8ad2f1;color:#047cad}.contact-cta{background:var(--blue);color:white;box-shadow:0 8px 20px rgba(8,165,232,.2)}.menu-toggle{display:none;border:0;background:none;width:42px;height:42px;padding:8px}.menu-toggle span{height:2px;background:var(--navy);display:block;margin:6px 0;transition:.25s}.hero{background:linear-gradient(110deg,#073957 0%,#073957 50%,#dbeaf1 50%,#f3f9fb 100%);overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;min-height:500px;align-items:center;gap:32px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.22em;color:var(--blue);margin:0 0 9px}.eyebrow.light{color:#8bdcf9}.hero h1,.page-hero h1{color:#fff;font-size:62px;line-height:.98;letter-spacing:-.045em;margin:0 0 22px}.hero h1 span{color:#77d9fb}.hero-lead{font-size:16px;color:#e4f2f7;max-width:610px;margin:0 0 28px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{min-height:46px;padding:12px 18px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:800;font-size:13px}.btn.primary{background:var(--blue);color:#fff}.btn.ghost{border:1px solid rgba(255,255,255,.85);color:#fff}.btn.secondary{background:var(--navy);color:#fff}.hero-values{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:35px;color:#e8f5f9;font-size:11px}.hero-values span{display:flex;align-items:center;gap:7px;padding-right:8px;border-right:1px solid rgba(255,255,255,.2)}.hero-media{height:420px;position:relative;display:flex;align-items:center;justify-content:center}.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0;box-shadow:0 20px 45px rgba(5,44,70,.12)}.hero-media-label{position:absolute;right:20px;bottom:28px;color:#fff;font-size:24px;line-height:1.08;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.35);text-align:right}.company-intro,.services-preview,.company-story,.digital-section,.inner-section{padding:70px 0}.intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px}.company-intro h2,.section-heading h2,.company-story h2,.inner-section h2{font-size:38px;line-height:1.08;letter-spacing:-.03em;margin:0}.company-intro h2 span{color:var(--blue)}.lead-copy{font-size:16px;font-weight:600}.intro-grid p{color:var(--muted)}.text-link{display:inline-flex;margin-top:12px;color:var(--blue);font-weight:800;font-size:13px;gap:8px;align-items:center}.services-preview{background:#fbfdfe}.section-heading{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin-bottom:28px}.section-heading p:not(.eyebrow){margin:0;color:var(--muted)}.section-heading.compact{margin-bottom:22px}.service-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.service-card{border:1px solid var(--line);border-radius:12px;background:#fff;padding:20px 15px;min-height:205px;box-shadow:0 10px 24px rgba(6,58,93,.06);transition:.25s}.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.service-card>span{width:52px;height:52px;border-radius:50%;background:#e7f7fd;color:#079fdc;display:grid;place-items:center;font-size:21px;margin-bottom:18px}.service-card h3{font-size:15px;line-height:1.2;margin:0 0 9px}.service-card p{font-size:12px;color:var(--muted);margin:0}.brand-strip{background:linear-gradient(90deg,#eff9fd,#dff3fb);border-top:1px solid #d5edf7;border-bottom:1px solid #d5edf7}.brand-strip-grid{display:grid;grid-template-columns:repeat(4,1fr)}.brand-strip-grid>div{padding:18px 24px;display:grid;grid-template-columns:auto 1fr;column-gap:13px;border-right:1px solid #cbe9f5;align-items:center}.brand-strip-grid i{grid-row:1/3;font-size:26px;color:#0b9fdf}.brand-strip-grid strong{font-size:13px}.brand-strip-grid small{font-size:11px;color:var(--muted)}.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.story-water{min-height:390px;border-radius:18px;background:linear-gradient(rgba(6,58,93,.08),rgba(6,58,93,.08)),url('https://images.unsplash.com/photo-1548839140-29a749e1cf4d?auto=format&fit=crop&w=1200&q=85') center/cover;box-shadow:var(--shadow)}.company-story p{color:var(--muted)}.story-points{display:grid;gap:10px;margin:24px 0}.story-points span{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}.story-points i{width:24px;height:24px;border-radius:50%;background:#e4f7fe;color:#079edc;display:grid;place-items:center}.digital-section{background:var(--soft)}.digital-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.digital-grid>a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;box-shadow:0 8px 20px rgba(6,58,93,.05)}.digital-grid>a>i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#e6f7fe;color:#079fdc}.digital-grid h3{font-size:15px;margin:0 0 5px}.digital-grid p{font-size:11px;color:var(--muted);margin:0}.closing-cta{background:linear-gradient(100deg,#073957,#0b6b98);color:#fff;padding:58px 0;overflow:hidden}.closing-grid{display:grid;grid-template-columns:1fr .7fr;align-items:center}.closing-cta h2{font-size:38px;line-height:1.08;margin:0 0 12px}.closing-cta p{color:#ddecf4}.water-word{font-size:120px;font-weight:800;letter-spacing:.04em;text-align:right;color:rgba(255,255,255,.08)}.page-hero{background:linear-gradient(120deg,#073957,#0a6a96);padding:70px 0}.page-hero h1{font-size:52px}.page-hero p{max-width:720px;color:#dceef6}.detail-grid,.sector-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.detail-grid article,.sector-detail-grid article{border:1px solid var(--line);border-radius:14px;padding:24px;min-height:190px;background:#fff;box-shadow:0 10px 26px rgba(6,58,93,.06)}.detail-grid i{font-size:25px;color:var(--blue);margin-bottom:15px}.detail-grid h3,.sector-detail-grid h3{font-size:18px;margin:0 0 8px}.detail-grid p,.sector-detail-grid p{font-size:13px;color:var(--muted)}.detail-grid a{font-size:12px;color:var(--blue);font-weight:800}.soft-cta{padding:50px 0;background:var(--soft);text-align:center}.soft-cta h2{font-size:30px;margin:0 0 8px}.soft-cta p{color:var(--muted)}.about-grid,.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:55px}.about-panel,.contact-panel{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:28px}.about-panel>div+div{border-top:1px solid #cfe4ee;margin-top:18px;padding-top:18px}.about-panel strong{font-size:14px}.about-panel p{color:var(--muted);font-size:13px}.contact-list{display:grid;gap:12px;margin-top:25px}.contact-list>a,.contact-list>div{display:flex;gap:13px;align-items:center}.contact-list i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#e7f7fd;color:#079fdc}.contact-list span{display:grid;font-size:12px;color:var(--muted)}.contact-list b{font-size:12px;color:var(--ink)}.contact-panel h3{margin:0 0 15px}.contact-panel>a{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #d2e6ef;font-weight:700;font-size:13px}.site-footer{background:linear-gradient(180deg,#f0f9fd,#e7f5fb);color:var(--ink);border-top:1px solid #d6e9f2}.footer-main{padding:48px 0 34px;display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:28px}.footer-brand img{width:130px;max-height:80px;object-fit:contain}.tagline{font-size:12px;font-weight:700;margin:4px 0}.footer-copy{font-size:11px;color:var(--muted);max-width:230px}.site-footer h4{font-size:12px;margin:0 0 12px}.site-footer a,.site-footer span{display:block;font-size:10.5px;color:#486b82;margin:7px 0}.socials{display:flex;gap:8px;margin-top:15px}.socials a{width:29px;height:29px;border-radius:50%;border:1px solid #a9d4e7;display:grid;place-items:center;color:#076d99}.footer-legal{border-top:1px solid #c8e3ee;padding:16px 0;display:flex;justify-content:space-between;align-items:center}.footer-legal>div{display:flex;gap:8px;align-items:center}.footer-legal span,.footer-legal a{font-size:9.5px;margin:0}.floating-whatsapp{position:fixed;right:22px;bottom:22px;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;font-size:27px;box-shadow:0 12px 30px rgba(0,0,0,.2);z-index:35}
@media(max-width:1080px){.main-nav{gap:12px}.service-cards{grid-template-columns:repeat(3,1fr)}.footer-main{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.utility-message,.utility-inner>div a:nth-child(2){display:none}.brand img{width:82px}.menu-toggle{display:block;z-index:53}.menu-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}.menu-toggle.open span:nth-child(2){opacity:0}.menu-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.main-nav{position:fixed;top:114px;left:16px;right:16px;display:none;flex-direction:column;align-items:stretch;background:#fff;border:1px solid #d8e8f0;border-radius:16px;padding:8px;box-shadow:0 25px 60px rgba(5,44,70,.2);max-height:calc(100vh - 132px);overflow:auto}.main-nav.open{display:flex}.main-nav>a{padding:15px 13px!important;border-bottom:1px solid #edf3f6;border-radius:9px;display:flex!important;align-items:center;justify-content:space-between}.main-nav>a.active:not(.track-link):not(.contact-cta){background:#0a9fdf;color:#fff}.main-nav>a.active:not(.track-link):not(.contact-cta):after{display:none}.nav-arrow{display:inline-flex;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center;background:#eef7fb;color:#0a78a5;font-size:20px}.main-nav>a.active .nav-arrow{background:rgba(255,255,255,.18);color:#fff}.hero{background:linear-gradient(180deg,#073957 0%,#073957 57%,#eaf4f8 57%)}.hero-grid{grid-template-columns:1fr;padding:50px 0 34px}.hero h1{font-size:50px}.hero-values{grid-template-columns:repeat(2,1fr)}.hero-media{height:420px;margin-top:5px}.intro-grid,.section-heading,.story-grid,.closing-grid,.about-grid,.contact-grid{grid-template-columns:1fr}.service-cards{grid-template-columns:repeat(2,1fr)}.brand-strip-grid{grid-template-columns:repeat(2,1fr)}.digital-grid{grid-template-columns:1fr}.detail-grid,.sector-detail-grid{grid-template-columns:repeat(2,1fr)}.water-word{display:none}.footer-main{grid-template-columns:repeat(2,1fr)}.footer-brand{grid-column:1/-1}.footer-legal{display:grid;gap:8px}}
@media(max-width:600px){.container{width:min(100% - 28px,1180px)}.utility-bar{display:none}.nav-shell{height:74px}.brand img{width:76px;max-height:50px}.brand span{font-size:8px}.main-nav{top:86px}.hero-grid{padding-top:42px}.hero h1{font-size:43px}.hero-lead{font-size:14px}.hero-actions .btn{width:100%}.hero-values{font-size:10px}.hero-media{height:330px}.hero-media-label{font-size:19px}.company-intro,.services-preview,.company-story,.digital-section,.inner-section{padding:54px 0}.company-intro h2,.section-heading h2,.company-story h2,.inner-section h2,.closing-cta h2{font-size:31px}.service-cards,.detail-grid,.sector-detail-grid{grid-template-columns:1fr}.brand-strip-grid{grid-template-columns:1fr}.brand-strip-grid>div{border-right:0;border-bottom:1px solid #cbe9f5}.page-hero{padding:52px 0}.page-hero h1{font-size:40px}.footer-main{grid-template-columns:1fr 1fr}.footer-legal{font-size:9px}.floating-whatsapp{width:50px;height:50px;right:16px;bottom:16px}}


/* ===== V2.1 PREMIUM REFINEMENT ===== */
:root{--premium:#062f4c;--premium2:#0b476d;--ice:#f5fafc;--hair:#dceaf1}
body{letter-spacing:-.006em}
.site-header{box-shadow:0 8px 30px rgba(4,47,76,.045)}
.nav-shell{height:86px}
.brand img{width:104px;max-height:64px}
.brand span{font-size:8.5px;letter-spacing:.03em}
.main-nav{gap:21px}
.main-nav>a{transition:color .2s ease,background .2s ease,transform .2s ease}
.main-nav>a:not(.track-link):not(.contact-cta):hover{color:var(--blue)}
.track-link{background:#fff;border-color:#9edaf2}
.contact-cta{padding-left:19px;padding-right:19px;box-shadow:0 10px 26px rgba(8,165,232,.22)}
.hero{background:linear-gradient(110deg,#062f4c 0%,#073d60 50%,#e9f3f7 50%,#f7fbfc 100%)}
.hero-grid{min-height:535px}
.hero-copy{padding:18px 0}
.hero h1{font-size:64px;max-width:660px}
.hero-lead{font-size:15.5px;line-height:1.75;max-width:640px;color:#e8f3f7}
.hero-media{height:440px}
.hero-media img{border-radius:18px;box-shadow:0 30px 70px rgba(5,44,70,.18)}
.hero-media:before{content:"WATER CLEANIC";position:absolute;z-index:2;top:18px;left:18px;color:rgba(255,255,255,.78);font-size:9px;font-weight:800;letter-spacing:.24em}
.hero-media-label{right:24px;bottom:24px;font-size:21px;letter-spacing:-.025em}
.hero-values{margin-top:38px}
.hero-values span{opacity:.92}
.company-intro{padding:88px 0}
.intro-grid{gap:85px}
.company-intro h2,.section-heading h2,.company-story h2,.inner-section h2{font-size:41px}
.intro-grid p{line-height:1.8}
.services-preview{padding:82px 0;background:linear-gradient(180deg,#fbfdfe,#f6fbfd)}
.section-heading{margin-bottom:34px}
.service-cards{gap:14px}
.service-card{min-height:224px;border-color:#dfeaf0;border-radius:16px;padding:24px 18px;box-shadow:0 12px 35px rgba(6,58,93,.055)}
.service-card>span{background:linear-gradient(145deg,#eaf8fe,#d9f2fc);width:54px;height:54px}
.service-card h3{font-size:15.5px}
.service-card p{line-height:1.65}
.brand-strip{background:linear-gradient(90deg,#f1f9fc,#e8f6fb)}
.brand-strip-grid>div{padding-top:22px;padding-bottom:22px}
.company-story{padding:90px 0}
.story-grid{gap:70px}
.story-water{min-height:430px;border-radius:22px;box-shadow:0 26px 65px rgba(6,58,93,.12)}
.story-points{margin:28px 0}
.digital-section{padding:78px 0;background:linear-gradient(180deg,#eef8fc,#e8f5fa)}
.digital-grid{gap:17px}
.digital-grid>a{padding:24px;border-radius:15px;box-shadow:0 12px 34px rgba(6,58,93,.06);transition:.25s}
.digital-grid>a:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(6,58,93,.11)}
.closing-cta{padding:72px 0;background:linear-gradient(105deg,#062f4c,#086b98)}
.closing-cta h2{font-size:42px}
.water-word{font-size:135px}
.site-footer{background:linear-gradient(180deg,#f7fbfd,#edf7fb);border-top:1px solid #dceaf1}
.footer-main{padding-top:55px;padding-bottom:42px}
.footer-brand img{width:145px;max-height:88px}
.footer-copy{line-height:1.7}
.footer-legal{padding-top:19px;padding-bottom:19px}
.floating-whatsapp{box-shadow:0 15px 35px rgba(9,93,65,.25)}
.page-hero{padding:82px 0;background:linear-gradient(115deg,#062f4c,#08739f)}
.page-hero h1{font-size:56px}
.detail-grid article,.sector-detail-grid article,.about-panel,.contact-panel{border-radius:18px;box-shadow:0 14px 38px rgba(6,58,93,.055)}
@media(max-width:820px){
 .nav-shell{height:78px}.brand img{width:90px}
 .main-nav{top:90px}
 .hero{background:linear-gradient(180deg,#062f4c 0%,#073d60 58%,#eef6f9 58%)}
 .hero-grid{min-height:auto}
 .hero h1{font-size:51px}
 .hero-media{height:430px}
 .company-intro,.services-preview,.company-story,.digital-section{padding:65px 0}
}
@media(max-width:600px){
 .nav-shell{height:76px}.brand img{width:84px}
 .main-nav{top:86px}
 .hero-grid{padding-top:48px}
 .hero h1{font-size:44px;line-height:1.02}
 .hero-lead{line-height:1.65}
 .hero-media{height:345px}
 .hero-media img{border-radius:15px}
 .company-intro h2,.section-heading h2,.company-story h2,.inner-section h2,.closing-cta h2{font-size:32px}
 .footer-brand img{width:132px}
}


/* ===== V2.2 NEW IMAGERY + PREMIUM REFINEMENT ===== */
.hero{background:linear-gradient(110deg,#062f4c 0%,#073a5c 48.5%,#eaf4f8 48.5%,#f7fbfd 100%)}
.hero-media{height:455px}
.hero-media img{object-fit:cover;object-position:center;border-radius:20px;box-shadow:0 34px 75px rgba(5,44,70,.2)}
.hero-media-label{background:rgba(4,43,68,.74);backdrop-filter:blur(9px);padding:12px 15px;border-radius:12px;font-size:18px}
.hero-media:before{display:none}

.services-preview{padding-top:86px;padding-bottom:88px}
.service-cards.image-led{grid-template-columns:repeat(3,1fr);gap:18px}
.service-cards.image-led .service-card{
  position:relative;padding:0 19px 22px;min-height:330px;overflow:hidden;border-radius:17px;
  box-shadow:0 16px 42px rgba(6,58,93,.075);background:#fff
}
.service-photo{height:145px;margin:0 -19px 0;overflow:hidden}
.service-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.service-card:hover .service-photo img{transform:scale(1.045)}
.service-cards.image-led .service-card>span{
  position:relative;margin-top:-27px;margin-bottom:13px;border:4px solid #fff;
  box-shadow:0 6px 16px rgba(6,58,93,.1)
}
.service-cards.image-led .service-card h3{font-size:16px;margin-bottom:8px}
.service-cards.image-led .service-card p{font-size:12px;line-height:1.7;min-height:62px}
.service-cards.image-led .service-card b{display:inline-block;margin-top:8px;font-size:11px;color:var(--blue)}
.premium-water{
  background:
  linear-gradient(rgba(4,43,68,.12),rgba(4,43,68,.22)),
  url('../images/purpose-water-v22.jpg') center/cover!important;
}
.company-story{background:#fff}
.company-story .story-grid{align-items:stretch}
.company-story .story-grid>div:last-child{display:flex;flex-direction:column;justify-content:center}
.brand-strip{box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.site-footer{background:linear-gradient(180deg,#f9fcfd,#edf7fb)}
.footer-brand img{filter:none!important;opacity:1!important}

@media(max-width:1080px){
  .service-cards.image-led{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .hero{background:linear-gradient(180deg,#062f4c 0%,#073a5c 57%,#edf6f9 57%)}
  .hero-media{height:430px}
  .service-cards.image-led{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .hero-media{height:340px}
  .service-cards.image-led{grid-template-columns:1fr}
  .service-cards.image-led .service-card{min-height:315px}
  .service-photo{height:155px}
}

/* ===== V2.3 REFERENCE MOCKUP MATCH ===== */
:root{--v23-navy:#053a5c;--v23-deep:#062f4b;--v23-blue:#0ba8ef;--v23-pale:#edf8fd}
.utility-bar{background:#053a5c}
.site-header{box-shadow:0 1px 0 rgba(5,58,92,.10)}
.nav-shell{min-height:70px}
.brand img{height:46px;width:auto}.brand span{font-size:8px;margin-top:0}
.main-nav{gap:24px}.main-nav>a:not(.track-link):not(.contact-cta){font-size:12px}
.hero{padding:0;background:#062f4b;overflow:hidden}
.hero .container{max-width:none;padding:0;display:grid;grid-template-columns:40% 60%;min-height:410px}
.hero-copy{padding:48px max(40px,calc((100vw - 1320px)/2));padding-right:34px;display:flex;flex-direction:column;justify-content:center;z-index:2;background:linear-gradient(90deg,#062f4b 0%,#073d60 100%)}
.hero-copy h1{font-size:56px;line-height:1.03;letter-spacing:-2.4px;margin:8px 0 18px;max-width:620px}.hero-copy h1 span{color:#65ccfa}
.hero-lead{font-size:16px;line-height:1.55;max-width:590px}.hero-media{height:410px;border-radius:0;box-shadow:none;overflow:hidden;position:relative}.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0;box-shadow:none}.hero-media-label{position:absolute;right:7%;top:24%;bottom:auto;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;font-family:cursive;font-size:31px;line-height:1.05;text-align:center;transform:rotate(-4deg);padding:0;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.28)}
.hero-values{position:absolute;left:0;right:60%;bottom:0;padding:14px max(40px,calc((100vw - 1320px)/2));background:rgba(2,33,52,.42);gap:0;justify-content:space-between}.hero-values span{font-size:11px;padding:0 16px;border-right:1px solid rgba(255,255,255,.25)}.hero-values span:first-child{padding-left:0}.hero-values span:last-child{border:0}
.company-intro{padding:58px 0 42px}.company-intro h2{font-size:38px}.intro-grid{gap:80px}
.services-preview{padding:26px 0 48px;background:#fff}.services-preview .section-heading{align-items:center;margin-bottom:22px}.services-preview .section-heading h2{font-size:34px;line-height:1.02;max-width:450px}.services-preview .section-heading>p{border-left:2px solid #1aaaf0;padding-left:28px;max-width:650px;color:#1c5d87}.service-cards.image-led{grid-template-columns:repeat(6,1fr);gap:10px}.service-cards.image-led .service-card{min-height:315px;padding:0 14px 18px;border-radius:10px;box-shadow:0 8px 22px rgba(5,58,92,.09);border:1px solid #dbeaf2}.service-photo{height:116px;margin:0 -14px}.service-cards.image-led .service-card>span{width:46px;height:46px;margin-top:-23px;margin-bottom:9px;font-size:18px}.service-cards.image-led .service-card h3{font-size:15px;line-height:1.2}.service-cards.image-led .service-card p{font-size:11px;line-height:1.45;min-height:65px}.service-cards.image-led .service-card b{font-size:11px}
.brand-strip{background:#e7f7ff;padding:21px 0}.brand-strip-grid{gap:0}.brand-strip-grid>div{padding:0 34px;border-right:1px solid #9fdcf8;grid-template-columns:48px 1fr}.brand-strip-grid>div:last-child{border:0}.brand-strip i{font-size:33px}.brand-strip strong{font-size:13px}.brand-strip small{font-size:10px}
@media(max-width:1100px){.service-cards.image-led{grid-template-columns:repeat(3,1fr)}.hero .container{grid-template-columns:48% 52%}.hero-values{right:52%}.hero-copy h1{font-size:44px}}
@media(max-width:820px){.hero .container{display:block;min-height:0}.hero-copy{padding:45px 24px 30px}.hero-copy h1{font-size:42px}.hero-media{height:360px}.hero-values{position:static;padding:18px 24px;background:#062f4b;display:grid;grid-template-columns:1fr 1fr;gap:14px}.hero-values span{border:0;padding:0}.service-cards.image-led{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.hero-copy h1{font-size:38px}.hero-media{height:300px}.service-cards.image-led{grid-template-columns:1fr}.service-photo{height:180px}.service-cards.image-led .service-card{min-height:330px}.company-intro{padding:42px 0 30px}}


/* ===== V2.4 APPROVED PREMIUM REFERENCE MATCH ===== */
.hero{
  position:relative;
  overflow:hidden;
  background:#073d60;
}
.hero .container{
  max-width:none;
  width:100%;
  padding-left:max(7.2vw,34px);
  padding-right:0;
}
.hero-grid{
  grid-template-columns:42% 58%;
  min-height:520px;
  gap:0;
  align-items:stretch;
}
.hero-copy{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:54px 56px 42px 0;
  background:linear-gradient(90deg,#073b60 0%,#073b60 76%,rgba(7,59,96,.92) 88%,rgba(7,59,96,0) 100%);
}
.hero h1{
  font-size:62px;
  line-height:.98;
  letter-spacing:-.045em;
  max-width:610px;
  margin:10px 0 18px;
}
.hero h1 span{color:#69cef5}
.hero-lead{max-width:570px;font-size:15px;line-height:1.65}
.hero-actions{margin-top:20px}
.hero-values{
  margin-top:32px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:620px;
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:18px;
}
.hero-values span{
  display:flex;
  flex-direction:column;
  gap:7px;
  align-items:flex-start;
  border-right:1px solid rgba(255,255,255,.14);
  padding-right:12px;
  font-size:10px;
}
.hero-values span:last-child{border-right:0}
.hero-values i{font-size:23px;color:#fff}

.hero-media.premium-lifestyle{
  position:relative;
  height:auto;
  min-height:520px;
  overflow:hidden;
  border-radius:0;
}
.hero-media.premium-lifestyle img{
  width:100%;
  height:100%;
  min-height:520px;
  object-fit:cover;
  object-position:center;
  border-radius:0;
  box-shadow:none;
}
.hero-media.premium-lifestyle:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(7,59,96,.24),transparent 25%,transparent 100%);
  pointer-events:none;
}
.hero-signature{
  position:absolute;
  z-index:3;
  right:7%;
  top:18%;
  color:#082f4b;
  font-size:31px;
  line-height:1.03;
  font-weight:800;
  font-style:italic;
  letter-spacing:-.04em;
  text-shadow:0 2px 14px rgba(255,255,255,.65);
  transform:rotate(-4deg);
}
.hero-signature:after{
  content:"";
  display:block;
  width:108px;
  height:4px;
  background:#0aa7e8;
  margin-top:12px;
  margin-left:18px;
  transform:rotate(-8deg);
  border-radius:999px;
}

.company-intro{padding:72px 0 58px}
.services-preview{padding:42px 0 22px;background:#fff}
.services-preview .section-heading{
  display:grid;
  grid-template-columns:1.05fr 1.35fr auto;
  gap:42px;
  align-items:end;
  margin-bottom:25px;
}
.services-preview .section-heading:after{
  content:"View all services  →";
  color:#059fe3;
  font-size:12px;
  font-weight:800;
  align-self:center;
  white-space:nowrap;
}
.services-preview .section-heading h2{font-size:35px;line-height:1.04}
.services-preview .section-heading p{border-left:2px solid #19a9e7;padding-left:30px}

.service-cards.image-led{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
}
.service-cards.image-led .service-card{
  min-height:285px;
  padding:0 13px 16px;
  border-radius:10px;
  box-shadow:0 8px 25px rgba(6,58,93,.055);
  border:1px solid #dcebf2;
}
.service-photo{height:112px;margin:0 -13px;overflow:hidden;border-radius:10px 10px 0 0}
.service-photo img{width:100%;height:100%;object-fit:cover}
.service-cards.image-led .service-card>span{
  width:46px;height:46px;margin-top:-23px;margin-bottom:8px;border:4px solid #fff;
}
.service-cards.image-led .service-card h3{font-size:13px;line-height:1.2;margin:0 0 6px}
.service-cards.image-led .service-card p{font-size:10.5px;line-height:1.48;min-height:64px}
.service-cards.image-led .service-card b{font-size:10px}

.brand-strip{margin-top:16px;background:#eaf7fd}
.brand-strip-grid>div{padding:22px 16px}
.brand-strip-grid i{font-size:31px}
.brand-strip-grid strong{font-size:12px}
.brand-strip-grid small{font-size:9.5px}

@media(max-width:1180px){
  .hero .container{padding-left:5vw}
  .hero-grid{grid-template-columns:48% 52%}
  .hero h1{font-size:53px}
  .service-cards.image-led{grid-template-columns:repeat(3,1fr)}
  .service-photo{height:145px}
  .service-cards.image-led .service-card{min-height:310px}
}
@media(max-width:820px){
  .hero .container{padding:0}
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding:50px 7vw 35px;background:#073b60}
  .hero h1{font-size:50px}
  .hero-media.premium-lifestyle,.hero-media.premium-lifestyle img{min-height:390px}
  .hero-values{max-width:none}
  .services-preview .section-heading{grid-template-columns:1fr;gap:15px}
  .services-preview .section-heading:after{display:none}
  .services-preview .section-heading p{border-left:0;padding-left:0}
  .service-cards.image-led{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .hero-copy{padding:42px 22px 30px}
  .hero h1{font-size:43px}
  .hero-values{grid-template-columns:repeat(2,1fr);gap:15px}
  .hero-values span{border-right:0}
  .hero-media.premium-lifestyle,.hero-media.premium-lifestyle img{min-height:310px}
  .hero-signature{font-size:22px;right:7%;top:12%}
  .service-cards.image-led{grid-template-columns:1fr}
  .service-photo{height:180px}
}


/* ===== V2.5 CLEAN PREMIUM — APPROVED DIRECTION ===== */
.hero .container{max-width:100%;padding-left:0;padding-right:0}
.hero-grid{grid-template-columns:53% 47%;min-height:445px}
.hero-copy{
  padding:54px max(5vw,46px) 38px max(7vw,60px);
  background:linear-gradient(90deg,#073b60 0%,#073b60 76%,rgba(7,59,96,.96) 90%,rgba(7,59,96,.80) 100%);
}
.hero h1{font-size:58px;max-width:620px}
.hero-lead{max-width:610px}
.hero-media.premium-lifestyle,
.hero-media.premium-lifestyle img{min-height:445px;height:445px}
.hero-media.premium-lifestyle img{object-fit:cover;object-position:center}
.hero-media.premium-lifestyle:after{
  background:linear-gradient(90deg,rgba(7,59,96,.32),rgba(7,59,96,.05) 20%,transparent 40%);
}
.hero-signature{display:none!important}
.hero-values{max-width:600px;margin-top:26px}
.hero-values span{font-size:9.5px}

.services-preview{padding:42px 0 38px;background:#fff}
.services-preview .section-heading{grid-template-columns:1.05fr 1.35fr auto}
.service-cards.image-led{grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.service-cards.image-led .service-card{min-height:286px;border-radius:9px}
.service-photo{height:112px}
.service-photo img{object-fit:cover;object-position:center}
.service-cards.image-led .service-card h3{font-size:12.5px}
.service-cards.image-led .service-card p{font-size:10px;line-height:1.5}
.brand-strip{margin-top:0}

.premium-story-v25{
  padding:70px 0;
  background:linear-gradient(100deg,#f2faff,#e8f6fd);
}
.story-v25-grid{
  display:grid;
  grid-template-columns:1.05fr 1.12fr .95fr;
  gap:38px;
  align-items:center;
}
.story-v25-copy h2{
  font-size:40px;
  line-height:1.04;
  letter-spacing:-.04em;
  color:#063653;
  margin:8px 0 18px;
}
.story-v25-copy h2 span{color:#0aa7e8}
.story-v25-copy>p:not(.eyebrow){font-size:13px;line-height:1.75;color:#587589;margin-bottom:24px}
.story-v25-photo img{
  width:100%;
  height:300px;
  object-fit:cover;
  border-radius:15px;
  display:block;
  box-shadow:0 18px 44px rgba(6,58,93,.10);
}
.story-v25-outcomes{display:grid;gap:17px}
.story-v25-outcomes>div{display:flex;align-items:center;gap:14px}
.story-v25-outcomes i{
  flex:0 0 47px;width:47px;height:47px;border-radius:50%;
  display:grid;place-items:center;background:#d8f2fd;color:#0aa7e8;font-size:20px
}
.story-v25-outcomes p{margin:0;display:flex;flex-direction:column;gap:3px}
.story-v25-outcomes strong{font-size:12px;color:#073b60}
.story-v25-outcomes small{font-size:10px;line-height:1.45;color:#5c788a}

.closing-cta{
  background:
    linear-gradient(90deg,rgba(4,63,99,.93),rgba(7,143,193,.78)),
    radial-gradient(circle at 20% 20%,#21b4e7,#075b86);
}
.closing-cta h2{font-size:32px}

@media(max-width:1180px){
  .hero-grid{grid-template-columns:50% 50%}
  .hero-copy{padding-left:5vw}
  .service-cards.image-led{grid-template-columns:repeat(3,1fr)}
  .service-photo{height:145px}
  .story-v25-grid{grid-template-columns:1fr 1fr}
  .story-v25-outcomes{grid-column:1/-1;grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding:48px 7vw 34px;background:#073b60}
  .hero-media.premium-lifestyle,.hero-media.premium-lifestyle img{height:390px;min-height:390px}
  .service-cards.image-led{grid-template-columns:repeat(2,1fr)}
  .story-v25-grid{grid-template-columns:1fr}
  .story-v25-outcomes{grid-column:auto;grid-template-columns:1fr 1fr}
  .story-v25-photo img{height:330px}
}
@media(max-width:600px){
  .hero-copy{padding:42px 22px 30px}
  .hero h1{font-size:43px}
  .hero-media.premium-lifestyle,.hero-media.premium-lifestyle img{height:310px;min-height:310px}
  .service-cards.image-led{grid-template-columns:1fr}
  .service-photo{height:180px}
  .story-v25-outcomes{grid-template-columns:1fr}
  .story-v25-photo img{height:250px}
  .story-v25-copy h2{font-size:34px}
}


/* ===== V2.5.1 HERO CLEANUP ===== */
.hero-v251{
  position:relative;
  min-height:500px;
  background:
    url('../images/hero-clean-v251.jpg') center center / cover no-repeat;
  color:#fff;
  overflow:hidden;
}
.hero-v251::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:70px;
  background:linear-gradient(180deg,transparent,rgba(3,42,67,.22));
  pointer-events:none;
}
.hero-v251-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(6,47,76,.98) 0%,
      rgba(6,47,76,.96) 26%,
      rgba(6,47,76,.80) 42%,
      rgba(6,47,76,.50) 55%,
      rgba(6,47,76,.18) 68%,
      rgba(6,47,76,0) 80%);
}
.hero-v251-inner{
  position:relative;
  z-index:2;
  min-height:500px;
  display:flex;
  align-items:center;
}
.hero-v251-copy{
  width:min(620px,52%);
  padding:48px 0 34px;
}
.hero-v251 .eyebrow{margin-bottom:11px}
.hero-v251 h1{
  margin:0 0 18px;
  font-size:62px;
  line-height:.98;
  letter-spacing:-.045em;
  color:#fff;
}
.hero-v251 h1 span{color:#6fd2f6}
.hero-v251 .hero-lead{
  max-width:585px;
  margin:0 0 24px;
  color:#e9f4f8;
  font-size:15px;
  line-height:1.68;
}
.hero-v251 .hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 28px;
}
.hero-v251-values{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:610px;
  border-top:1px solid rgba(255,255,255,.2);
  padding-top:18px;
}
.hero-v251-values>div{
  min-height:52px;
  padding:0 14px;
  border-right:1px solid rgba(255,255,255,.18);
  display:flex;
  flex-direction:column;
  gap:7px;
  justify-content:center;
}
.hero-v251-values>div:first-child{padding-left:0}
.hero-v251-values>div:last-child{border-right:0}
.hero-v251-values i{
  font-size:21px;
  color:#fff;
}
.hero-v251-values span{
  font-size:10px;
  font-weight:700;
  line-height:1.25;
  color:#f3f9fb;
}

/* Ensure old V2.4/V2.5 hero rules cannot interfere */
.hero-v251 .hero-grid,
.hero-v251 .hero-copy,
.hero-v251 .hero-media,
.hero-v251 .hero-values{all:unset}

@media(max-width:980px){
  .hero-v251-shade{
    background:linear-gradient(90deg,
      rgba(6,47,76,.98) 0%,
      rgba(6,47,76,.94) 38%,
      rgba(6,47,76,.63) 60%,
      rgba(6,47,76,.15) 82%,
      rgba(6,47,76,0) 100%);
  }
  .hero-v251-copy{width:62%}
  .hero-v251 h1{font-size:53px}
}
@media(max-width:820px){
  .hero-v251{
    min-height:620px;
    background-position:64% center;
  }
  .hero-v251-shade{
    background:linear-gradient(180deg,
      rgba(6,47,76,.96) 0%,
      rgba(6,47,76,.92) 48%,
      rgba(6,47,76,.60) 72%,
      rgba(6,47,76,.28) 100%);
  }
  .hero-v251-inner{
    min-height:620px;
    align-items:flex-start;
  }
  .hero-v251-copy{
    width:100%;
    padding-top:52px;
  }
  .hero-v251 h1{font-size:50px;max-width:540px}
  .hero-v251 .hero-lead{max-width:560px}
}
@media(max-width:600px){
  .hero-v251{min-height:650px;background-position:69% center}
  .hero-v251-inner{min-height:650px}
  .hero-v251-copy{padding:42px 0 30px}
  .hero-v251 h1{font-size:42px}
  .hero-v251 .hero-actions .btn{width:100%}
  .hero-v251-values{
    grid-template-columns:repeat(2,1fr);
    gap:14px 0;
    padding-top:16px;
  }
  .hero-v251-values>div{
    border-right:0;
    padding:0 8px 0 0;
  }
}


/* ===== V2.5.2 PREMIUM HERO + ABOUT REFINEMENT ===== */

/* Move hero content into the same visual grid as the rest of the website. */
.hero-v251-inner{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
}
.hero-v251-copy{
  width:min(610px,52%);
  padding-left:6px;
}
.hero-v251 h1{
  font-size:58px;
  max-width:585px;
}
.hero-v251 .hero-lead{
  max-width:570px;
}
.hero-v251 .btn.ghost{
  background:rgba(4,45,72,.38);
  border-color:rgba(255,255,255,.72);
}
.hero-v251 .btn.ghost:hover{
  background:#fff;
  color:#073b60;
}

/* About / company statement */
.premium-story-v252{
  position:relative;
  overflow:hidden;
  padding:82px 0 76px;
  background:
    radial-gradient(circle at 92% 12%,rgba(91,202,243,.17),transparent 25%),
    linear-gradient(135deg,#f7fcff 0%,#eaf7fd 58%,#f7fcff 100%);
}
.premium-story-v252:before{
  content:"WATER";
  position:absolute;
  right:-22px;
  top:22px;
  font-size:160px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.07em;
  color:rgba(9,157,218,.045);
  pointer-events:none;
}
.about-v252-head{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:end;
  margin-bottom:32px;
}
.about-v252-head h2{
  margin:7px 0 0;
  font-size:43px;
  line-height:1.02;
  letter-spacing:-.045em;
  color:#073b60;
}
.about-v252-head h2 span{color:#08a6e7}
.about-v252-manifesto{
  margin:0;
  padding-left:26px;
  border-left:3px solid #08a6e7;
  color:#587589;
  font-size:18px;
  line-height:1.55;
  max-width:510px;
}
.about-v252-manifesto strong{color:#073b60}

.about-v252-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:44px;
  align-items:stretch;
}
.about-v252-photo{
  position:relative;
  min-height:345px;
  overflow:hidden;
  border-radius:18px;
  box-shadow:0 20px 50px rgba(5,58,91,.12);
}
.about-v252-photo img{
  width:100%;
  height:100%;
  min-height:345px;
  object-fit:cover;
  display:block;
}
.about-v252-photo:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 54%,rgba(3,43,68,.58));
  pointer-events:none;
}
.about-v252-photo-badge{
  position:absolute;
  z-index:2;
  left:22px;
  bottom:20px;
  display:flex;
  align-items:center;
  gap:13px;
  max-width:340px;
  padding:13px 16px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:13px;
  background:rgba(4,52,82,.72);
  backdrop-filter:blur(9px);
  color:#fff;
}
.about-v252-photo-badge>i{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  flex:0 0 38px;
  background:#0aa7e8;
}
.about-v252-photo-badge span{display:flex;flex-direction:column;gap:2px}
.about-v252-photo-badge strong{font-size:12px}
.about-v252-photo-badge small{font-size:9.5px;line-height:1.35;color:#dceff7}

.about-v252-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px 5px 24px 0;
}
.about-v252-copy p{
  margin:0 0 17px;
  color:#577487;
  font-size:14px;
  line-height:1.75;
}
.about-v252-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  margin-top:5px;
  color:#079fdf;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}
.about-v252-link:hover{gap:14px}

.about-v252-pillars{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:35px;
  background:#fff;
  border:1px solid #d9eaf2;
  border-radius:15px;
  box-shadow:0 13px 36px rgba(5,58,91,.07);
  overflow:hidden;
}
.about-v252-pillars article{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:98px;
  padding:19px;
  border-right:1px solid #e0edf3;
}
.about-v252-pillars article:last-child{border-right:0}
.about-v252-pillars article>span{
  width:43px;height:43px;border-radius:50%;
  flex:0 0 43px;
  display:grid;place-items:center;
  background:#e1f5fd;
  color:#08a6e7;
  font-size:17px;
}
.about-v252-pillars article>div{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.about-v252-pillars strong{
  color:#073b60;
  font-size:11.5px;
}
.about-v252-pillars small{
  color:#6b8493;
  font-size:9.5px;
  line-height:1.4;
}

@media(max-width:980px){
  .hero-v251-copy{width:62%}
  .about-v252-pillars{grid-template-columns:repeat(2,1fr)}
  .about-v252-pillars article:nth-child(2){border-right:0}
  .about-v252-pillars article:nth-child(-n+2){border-bottom:1px solid #e0edf3}
}
@media(max-width:820px){
  .hero-v251-inner{width:min(100% - 40px,720px)}
  .hero-v251-copy{width:100%;padding-left:0}
  .about-v252-head,
  .about-v252-grid{grid-template-columns:1fr}
  .about-v252-head{gap:20px}
  .about-v252-manifesto{max-width:none}
  .about-v252-photo{min-height:330px}
}
@media(max-width:600px){
  .hero-v251-inner{width:calc(100% - 36px)}
  .hero-v251 h1{font-size:41px}
  .premium-story-v252{padding:58px 0}
  .premium-story-v252:before{font-size:92px;top:18px}
  .about-v252-head h2{font-size:35px}
  .about-v252-manifesto{font-size:15px}
  .about-v252-photo,
  .about-v252-photo img{min-height:270px}
  .about-v252-photo-badge{left:14px;right:14px;bottom:14px}
  .about-v252-pillars{grid-template-columns:1fr}
  .about-v252-pillars article{
    border-right:0!important;
    border-bottom:1px solid #e0edf3;
  }
  .about-v252-pillars article:last-child{border-bottom:0}
}


/* ===== V2.5.3 — HERO CLOSER + CLEAN PHOTOGRAPHY ===== */

/* Desktop: bring the hero copy inward without pushing it too far toward centre. */
.hero-v251-inner{
  width:min(1180px,calc(100% - 48px)) !important;
  margin:0 auto !important;
}
.hero-v251-copy{
  width:min(600px,52%) !important;
  padding-left:42px !important;
  padding-right:0 !important;
}
.hero-v251 h1{
  max-width:570px !important;
  font-size:56px !important;
  line-height:1 !important;
}
.hero-v251 .hero-lead{max-width:555px !important}
.hero-v251 .hero-values{max-width:570px !important}

/* Keep the photograph clean. Website copy remains HTML, never baked into imagery. */
.hero-signature,
.hero-media-label,
.about-v252-photo-badge{
  display:none !important;
}

/* About section: more life, but photograph itself stays completely clean. */
.about-v252-photo:after{display:none !important}
.about-v252-photo{
  box-shadow:0 22px 55px rgba(5,58,91,.13) !important;
}
.about-v252-pillars article{
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.about-v252-pillars article:hover{
  transform:translateY(-3px);
  background:#f8fdff;
  box-shadow:0 12px 28px rgba(5,58,91,.07);
}
.about-v252-manifesto strong{color:#073b60}

@media(max-width:1100px){
  .hero-v251-copy{
    width:58% !important;
    padding-left:22px !important;
  }
}
@media(max-width:820px){
  .hero-v251-inner{
    width:min(100% - 40px,720px) !important;
  }
  .hero-v251-copy{
    width:100% !important;
    padding-left:0 !important;
  }
}
@media(max-width:600px){
  .hero-v251-inner{width:calc(100% - 34px) !important}
  .hero-v251 h1{font-size:40px !important}
}


/* ===== V2.6 FINAL HOMEPAGE HERO ===== */
.hero-v26{
  position:relative;
  min-height:520px;
  overflow:hidden;
  color:#fff;
  background:url('../images/hero-final-v26.jpg') center center / cover no-repeat;
}
.hero-v26-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(5,47,77,.985) 0%,
    rgba(5,47,77,.97) 28%,
    rgba(5,47,77,.84) 42%,
    rgba(5,47,77,.56) 54%,
    rgba(5,47,77,.24) 65%,
    rgba(5,47,77,.06) 74%,
    rgba(5,47,77,0) 82%);
}
.hero-v26-inner{
  position:relative;
  z-index:2;
  width:min(1180px,calc(100% - 48px));
  min-height:520px;
  margin:0 auto;
  display:flex;
  align-items:center;
}
.hero-v26-copy{
  width:690px;
  max-width:58%;
  padding:42px 0 32px 18px;
}
.hero-v26 .eyebrow{
  margin:0 0 13px;
  font-size:11px;
  letter-spacing:.22em;
}
.hero-v26 h1{
  margin:0 0 21px;
  font-size:60px;
  line-height:.98;
  letter-spacing:-.045em;
  max-width:680px;
}
.hero-v26 h1 span{display:block}
.hero-line-white{color:#fff}
.hero-line-blue{
  color:#6fd2f6;
  white-space:nowrap;
}
.hero-v26 .hero-lead{
  max-width:610px;
  margin:0 0 25px;
  color:#e9f4f8;
  font-size:15px;
  line-height:1.68;
}
.hero-v26 .hero-actions{
  display:flex;
  gap:13px;
  flex-wrap:wrap;
  margin-bottom:28px;
}
.hero-v26 .btn.ghost{
  background:rgba(3,43,69,.34);
  border-color:rgba(255,255,255,.75);
}
.hero-v26-values{
  max-width:650px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.19);
  padding-top:18px;
}
.hero-v26-values>div{
  min-height:58px;
  padding:0 16px;
  border-right:1px solid rgba(255,255,255,.16);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
}
.hero-v26-values>div:first-child{padding-left:0}
.hero-v26-values>div:last-child{border-right:0}
.hero-v26-values i{font-size:22px;color:#fff}
.hero-v26-values span{
  font-size:10px;
  line-height:1.25;
  color:#f5fafc;
  font-weight:700;
}

/* Final About cleanup: lively section, clean photography with no text overlay. */
.about-v252-photo:after,
.about-v252-photo-badge,
.hero-signature,
.hero-media-label{
  display:none!important;
}
.about-v252-photo{
  box-shadow:0 22px 55px rgba(5,58,91,.13)!important;
}
.about-v252-photo img{
  object-fit:cover;
  object-position:center;
}
.about-v252-pillars article{
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.about-v252-pillars article:hover{
  transform:translateY(-3px);
  background:#f9fdff;
  box-shadow:0 12px 28px rgba(5,58,91,.07);
}

@media(max-width:1180px){
  .hero-v26-copy{
    width:630px;
    max-width:60%;
    padding-left:6px;
  }
  .hero-v26 h1{font-size:54px}
  .hero-line-blue{white-space:normal}
}
@media(max-width:900px){
  .hero-v26{
    min-height:650px;
    background-position:64% center;
  }
  .hero-v26-shade{
    background:linear-gradient(180deg,
      rgba(5,47,77,.97) 0%,
      rgba(5,47,77,.94) 46%,
      rgba(5,47,77,.63) 70%,
      rgba(5,47,77,.24) 100%);
  }
  .hero-v26-inner{
    min-height:650px;
    align-items:flex-start;
    padding-top:44px;
  }
  .hero-v26-copy{
    width:100%;
    max-width:680px;
    padding:0;
  }
  .hero-v26 h1{font-size:50px}
  .hero-line-blue{white-space:normal}
}
@media(max-width:600px){
  .hero-v26{
    min-height:690px;
    background-position:69% center;
  }
  .hero-v26-inner{
    width:calc(100% - 34px);
    min-height:690px;
    padding-top:38px;
  }
  .hero-v26 h1{
    font-size:42px;
    line-height:1.01;
  }
  .hero-v26 .hero-lead{
    font-size:14px;
  }
  .hero-v26 .hero-actions .btn{
    width:100%;
  }
  .hero-v26-values{
    grid-template-columns:repeat(2,1fr);
    gap:13px 0;
  }
  .hero-v26-values>div{
    padding:0 8px 0 0;
    border-right:0;
  }
}


/* ===== V2.6.1 FINAL DETAIL PASS — CONTACT ===== */

/* Make the contact section more compact and premium. */
.contact-section,
.contact-page-section,
.contact-v2{
  padding-top:54px !important;
  padding-bottom:54px !important;
}

/* Contact details: 2 x 2 grid on desktop. */
.contact-details,
.contact-info-list,
.contact-methods{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  column-gap:34px !important;
  row-gap:16px !important;
  margin-top:24px !important;
}
.contact-details > *,
.contact-info-list > *,
.contact-methods > *{
  margin:0 !important;
  min-width:0;
}

/* Quick links: content-sized rather than a tall empty panel. */
.quick-links,
.contact-quick-links,
.quick-links-card{
  align-self:start !important;
  min-height:0 !important;
  height:auto !important;
  padding:28px 32px !important;
}
.quick-links h3,
.contact-quick-links h3,
.quick-links-card h3{
  margin:0 0 18px !important;
}
.quick-links a,
.contact-quick-links a,
.quick-links-card a{
  min-height:48px !important;
  padding:13px 0 !important;
}

/* Give Water Assessments a clear flask icon even if markup had no icon. */
.quick-links a[href*="boreholes"]:before,
.quick-links a[href*="assessment"]:before,
.contact-quick-links a[href*="boreholes"]:before,
.contact-quick-links a[href*="assessment"]:before,
.quick-links-card a[href*="boreholes"]:before,
.quick-links-card a[href*="assessment"]:before{
  content:"\f0c3";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  color:#10a8e5;
  margin-right:10px;
}

/* Keep arrows pushed to the right if link rows use flex. */
.quick-links a,
.contact-quick-links a,
.quick-links-card a{
  display:flex;
  align-items:center;
}

/* Responsive: stack cleanly on mobile. */
@media(max-width:760px){
  .contact-section,
  .contact-page-section,
  .contact-v2{
    padding-top:40px !important;
    padding-bottom:40px !important;
  }
  .contact-details,
  .contact-info-list,
  .contact-methods{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .quick-links,
  .contact-quick-links,
  .quick-links-card{
    padding:24px !important;
  }
}


/* ===== V2.6.2 CONTACT FIX — exact selectors ===== */

/* Make the whole contact section shorter. */
.contact-grid{
  align-items:start !important;
  gap:46px !important;
}
.contact-grid > div:first-child > p:last-of-type{
  max-width:720px;
  margin-bottom:0;
}

/* Actual contact details block: 2 columns / 2 rows on desktop. */
.compact-contact-list{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px 34px !important;
  margin-top:24px !important;
}
.compact-contact-list > *{
  margin:0 !important;
}
.compact-contact-list > a,
.compact-contact-list > div{
  display:flex !important;
  align-items:center !important;
  gap:13px !important;
}
.compact-contact-list i{
  width:44px !important;
  height:44px !important;
  flex:0 0 44px;
}

/* Actual Quick Links panel: remove the empty lower area. */
.compact-contact-panel{
  align-self:start !important;
  height:auto !important;
  min-height:0 !important;
  padding:26px 30px !important;
}
.compact-contact-panel h3{
  margin:0 0 15px !important;
}
.compact-contact-panel > a{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  min-height:54px !important;
  padding:11px 0 !important;
  gap:18px;
}
.quick-link-left{
  display:flex !important;
  align-items:center !important;
  gap:13px !important;
  margin:0 !important;
}
.quick-link-left i{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#ddf3fc;
  color:#0aa5e5;
  font-size:15px;
}
.quick-link-left b{
  font-size:13px;
  color:var(--ink);
}
.quick-arrow{
  margin:0 !important;
  font-size:15px;
  color:#0a678f !important;
}

/* Reduce surrounding contact-section padding without affecting other pages. */
main > .inner-section:has(.contact-grid){
  padding-top:52px !important;
  padding-bottom:52px !important;
}

@media(max-width:820px){
  .compact-contact-list{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .compact-contact-panel{
    padding:24px !important;
  }
  main > .inner-section:has(.contact-grid){
    padding-top:42px !important;
    padding-bottom:42px !important;
  }
}

@media(max-width:600px){
  .compact-contact-panel > a{
    min-height:52px !important;
  }
  .quick-link-left i{
    width:36px;
    height:36px;
    flex-basis:36px;
  }
}


/* ===== V2.6.3 CONNECTED WATER SERVICES FIX ===== */
.connected-v263{
  position:relative;
  overflow:hidden;
  padding:68px 0 76px;
  background:
    radial-gradient(circle at 8% 15%,rgba(10,167,232,.08),transparent 27%),
    linear-gradient(180deg,#eef9fd 0%,#eaf7fc 100%);
}
.connected-v263:after{
  content:"";
  position:absolute;
  left:-4%;
  right:-4%;
  bottom:0;
  height:72px;
  background:
    radial-gradient(80% 80px at 18% 100%,rgba(71,191,235,.12),transparent 72%),
    radial-gradient(80% 80px at 72% 100%,rgba(71,191,235,.10),transparent 72%);
  pointer-events:none;
}
.connected-v263-head{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:end;
  margin-bottom:28px;
}
.connected-v263-head h2{
  margin:0;
  font-size:39px;
  line-height:1.06;
  letter-spacing:-.035em;
  color:#073b60;
}
.connected-v263-head p:not(.eyebrow){
  margin:0;
  color:#628095;
  font-size:14px;
  line-height:1.65;
  max-width:560px;
}
.connected-v263-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.connected-v263-card{
  min-height:126px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:15px;
  padding:22px 24px;
  background:#fff;
  border:1px solid #d9e9f1;
  border-radius:16px;
  box-shadow:0 12px 34px rgba(6,58,93,.07);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.connected-v263-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(6,58,93,.11);
  border-color:#bfe1ef;
}
.connected-v263-icon{
  width:50px;
  height:50px;
  flex:0 0 50px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#def4fc;
  color:#09a5e5;
  font-size:20px;
}
.connected-v263-card h3{
  margin:0 0 5px;
  font-size:15px;
  color:#073b60;
}
.connected-v263-card p{
  margin:0;
  color:#688294;
  font-size:11.5px;
  line-height:1.55;
}
.connected-v263-arrow{
  font-size:19px;
  color:#0a6c96;
  transition:transform .2s ease;
}
.connected-v263-card:hover .connected-v263-arrow{
  transform:translateX(4px);
}

@media(max-width:900px){
  .connected-v263-head{
    grid-template-columns:1fr;
    gap:14px;
  }
  .connected-v263-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:600px){
  .connected-v263{
    padding:54px 0 62px;
  }
  .connected-v263-head h2{
    font-size:32px;
  }
  .connected-v263-card{
    min-height:112px;
    padding:18px;
  }
  .connected-v263-icon{
    width:44px;
    height:44px;
    flex-basis:44px;
    font-size:18px;
  }
}


/* V2.6.4 — About + Solutions visual polish */
.about-panel-icons{padding:18px 28px;background:linear-gradient(145deg,#f1faff,#e7f5fb)}
.about-panel-icons>div{display:grid;grid-template-columns:54px 1fr;gap:16px;align-items:center;padding:18px 0}
.about-panel-icons>div+div{margin-top:0;padding-top:18px}
.about-panel-icons section{min-width:0}.about-panel-icons p{margin:6px 0 0}
.about-icon,.sector-icon{width:50px;height:50px;border-radius:14px;background:#fff;color:#08a2e3;display:grid;place-items:center;font-size:20px;box-shadow:0 8px 22px rgba(6,58,93,.08);border:1px solid #d9edf6}
.about-values-section{padding:66px 0;background:linear-gradient(180deg,#f6fbfd,#eaf7fc)}
.about-values-heading{display:grid;grid-template-columns:.8fr 1fr;column-gap:55px;align-items:end;margin-bottom:28px}
.about-values-heading .eyebrow{grid-column:1/-1}.about-values-heading h2{font-size:38px;line-height:1.08;letter-spacing:-.03em;margin:0}.about-values-heading>p:last-child{margin:0;color:var(--muted)}
.about-value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.about-value-grid article{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px;box-shadow:0 12px 32px rgba(6,58,93,.055)}
.about-value-grid article>span{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:#e5f7fe;color:#079fdc;font-size:21px;margin-bottom:18px}
.about-value-grid h3{font-size:17px;margin:0 0 8px}.about-value-grid p{font-size:13px;color:var(--muted);margin:0}
.sector-detail-grid{gap:18px}.sector-detail-grid article{position:relative;overflow:hidden;min-height:220px;padding:27px;transition:transform .22s ease,box-shadow .22s ease}
.sector-detail-grid article:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#079fdc,#62d4f6)}
.sector-detail-grid article:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(6,58,93,.1)}
.sector-detail-grid .sector-icon{margin-bottom:18px;background:#e8f8fe;box-shadow:none}
.sector-detail-grid h3{font-size:19px}.sector-detail-grid p{font-size:13px;line-height:1.6}
.solutions-approach{padding:55px 0;background:linear-gradient(105deg,#063b5d,#0879a7);color:#fff}
.solutions-approach-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center}.solutions-approach h2{font-size:34px;line-height:1.08;margin:0}.solutions-approach .eyebrow{color:#8bdcf9}
.approach-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.approach-steps span{position:relative;min-height:125px;padding:20px 16px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.07);display:flex;flex-direction:column;justify-content:flex-end}.approach-steps b{position:absolute;top:13px;right:14px;font-size:10px;color:#8bdcf9}.approach-steps i{font-size:22px;color:#79dcfb;margin-bottom:13px}.approach-steps strong{font-size:12px}
@media(max-width:820px){.about-values-heading,.solutions-approach-grid{grid-template-columns:1fr;gap:18px}.about-value-grid{grid-template-columns:1fr}.approach-steps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.about-panel-icons{padding:14px 20px}.about-panel-icons>div{grid-template-columns:46px 1fr;gap:13px}.about-icon,.sector-icon{width:46px;height:46px;border-radius:13px}.about-values-section{padding:50px 0}.about-values-heading h2{font-size:31px}.approach-steps{grid-template-columns:1fr}.approach-steps span{min-height:100px}.solutions-approach{padding:48px 0}.solutions-approach h2{font-size:29px}.sector-detail-grid article{min-height:0}}

/* V2.6.5 — reliable inline sector icons (no CDN dependency) */
.sector-icon svg{width:23px;height:23px;display:block;fill:currentColor}
.sector-icon svg .cut{fill:#e8f8fe}

/* ===== WATER CLEANIC MAIN GATEWAY — HOMEPAGE REBUILD V1 ===== */
html,body{max-width:100%;overflow-x:clip}
.gateway-home{width:100%;overflow-x:clip}
.gateway-home img{display:block;max-width:100%}
.gateway-home *{box-sizing:border-box}
.gateway-hero{background:linear-gradient(135deg,#052f4d 0%,#073b60 54%,#0a668f 100%);color:#fff;padding:42px 0}
.gateway-hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);gap:52px;align-items:center;min-height:560px}
.gateway-hero-copy{min-width:0;padding:28px 0}
.gateway-hero-copy h1{margin:8px 0 20px;font-size:clamp(44px,5.2vw,76px);line-height:.98;letter-spacing:-.05em;color:#fff;max-width:780px}
.gateway-hero-copy h1 span{color:#72d3f6}
.gateway-hero-copy>p:not(.eyebrow){font-size:16px;line-height:1.75;color:#e3f2f8;max-width:690px;margin:0}
.gateway-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}
.gateway-hero .btn.ghost{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.gateway-hero-trust{display:flex;flex-wrap:wrap;gap:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16)}
.gateway-hero-trust span{font-size:11px;font-weight:700;color:#eff9fc;display:flex;align-items:center;gap:8px}.gateway-hero-trust i{color:#7bd8f7}
.gateway-hero-media{position:relative;min-width:0;border-radius:28px;overflow:hidden;box-shadow:0 30px 70px rgba(0,20,35,.28);aspect-ratio:4/3;background:#d9edf6}
.gateway-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.gateway-hero-media-card{position:absolute;left:20px;right:20px;bottom:20px;padding:17px 20px;border-radius:16px;background:rgba(5,47,77,.84);backdrop-filter:blur(8px);display:flex;justify-content:space-between;gap:16px;align-items:center}
.gateway-hero-media-card strong{font-size:16px;color:#fff}.gateway-hero-media-card span{font-size:11px;color:#d7edf5;text-align:right}
.gateway-services,.gateway-sectors,.gateway-work{padding:78px 0;background:#fff}
.gateway-heading{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:60px;align-items:end;margin-bottom:34px}
.gateway-heading h2{margin:4px 0 0;font-size:clamp(31px,3.4vw,48px);line-height:1.06;letter-spacing:-.04em;color:#073b60}.gateway-heading>p{margin:0;color:#617d90;line-height:1.7;font-size:14px;max-width:640px}
.gateway-heading.centered{grid-template-columns:1fr;text-align:center;max-width:780px;margin:0 auto 34px}.gateway-heading.centered>p{margin:0 auto}
.gateway-service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.gateway-service-card{min-width:0;border:1px solid #dbeaf1;border-radius:20px;background:#fff;overflow:hidden;box-shadow:0 12px 34px rgba(6,58,93,.07);transition:.22s ease;display:flex;flex-direction:column}
.gateway-service-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(6,58,93,.12);border-color:#b9deed}.gateway-service-card.featured{border-color:#98d9f2}
.gateway-service-image{height:190px;overflow:hidden;background:#e9f5fa}.gateway-service-image img{width:100%;height:100%;object-fit:cover}
.gateway-service-body{position:relative;padding:28px 22px 23px;display:flex;flex-direction:column;flex:1}.gateway-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#e0f5fc;color:#08a3e2;font-size:18px;margin-top:-52px;margin-bottom:16px;border:4px solid #fff}
.gateway-service-body small,.gateway-work small,.future-service small{font-size:9px;letter-spacing:.16em;color:#0b9dd8;font-weight:800}.gateway-service-body h3{font-size:18px;line-height:1.2;color:#073b60;margin:8px 0}.gateway-service-body p{font-size:12px;line-height:1.6;color:#678294;margin:0 0 18px}.gateway-service-body b{margin-top:auto;color:#087cab;font-size:11px}
.future-service{margin-top:22px;border:1px dashed #a9d9ea;border-radius:18px;padding:20px 24px;background:linear-gradient(90deg,#f7fcfe,#eef9fd);display:flex;align-items:center;gap:18px}.future-service>span{width:50px;height:50px;flex:0 0 50px;border-radius:15px;background:#073b60;color:#fff;display:grid;place-items:center;font-size:20px}.future-service strong{display:block;color:#073b60;font-size:16px;margin:3px 0}.future-service p{margin:0;color:#688295;font-size:12px}
.gateway-sectors{background:#f3fafc}.gateway-sector-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}.gateway-sector-grid a{min-width:0;min-height:160px;padding:21px 14px;border-radius:17px;background:#fff;border:1px solid #dcebf2;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;box-shadow:0 8px 25px rgba(6,58,93,.045);transition:.2s}.gateway-sector-grid a:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(6,58,93,.09)}.gateway-sector-grid i{font-size:25px;color:#0aa3e2;margin-bottom:16px}.gateway-sector-grid strong{font-size:12px;color:#073b60;line-height:1.25}.gateway-sector-grid span{font-size:9.5px;color:#78909f;margin-top:6px;line-height:1.35}
.gateway-story{padding:82px 0;background:#fff}.gateway-story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center}.gateway-story-image{border-radius:24px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 24px 55px rgba(6,58,93,.13)}.gateway-story-image img{width:100%;height:100%;object-fit:cover}.gateway-story-copy h2{font-size:clamp(34px,4vw,54px);line-height:1.03;letter-spacing:-.045em;color:#073b60;margin:5px 0 20px}.gateway-story-copy h2 span{color:#0aa4e2}.gateway-story-copy>p:not(.eyebrow){font-size:14px;line-height:1.75;color:#617d90;margin:0}.gateway-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:28px 0}.gateway-pillars span{padding:14px 10px;border:1px solid #dceaf1;border-radius:14px;background:#f8fcfe;display:flex;flex-direction:column;gap:9px}.gateway-pillars i{color:#0aa3e2;font-size:18px}.gateway-pillars b{font-size:10px;color:#073b60}.text-link{font-size:12px;font-weight:800;color:#0787bd}
.gateway-ecosystem{padding:78px 0;background:linear-gradient(135deg,#063653,#074d71);color:#fff}.gateway-ecosystem .gateway-heading h2{color:#fff}.gateway-ecosystem .gateway-heading>p{color:#d8ebf3}.gateway-ecosystem .eyebrow{color:#8bdcf8}.ecosystem-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:10px}.ecosystem-flow>a,.ecosystem-flow>div:not(.flow-arrow){min-width:0;min-height:160px;border-radius:17px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);padding:18px;display:flex;flex-direction:column;justify-content:flex-end;position:relative}.ecosystem-flow span{position:absolute;top:14px;right:14px;font-size:9px;color:#79d8f8;font-weight:800}.ecosystem-flow i{font-size:23px;color:#7bdafa;margin-bottom:16px}.ecosystem-flow strong{color:#fff;font-size:14px}.ecosystem-flow small{color:#c4dce6;font-size:10px;margin-top:6px;line-height:1.4}.flow-arrow{color:#7bdafa;font-size:15px}
.gateway-work{background:#f5fafc}.gateway-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.gateway-work article{overflow:hidden;background:#fff;border:1px solid #dcebf2;border-radius:19px;box-shadow:0 10px 30px rgba(6,58,93,.055)}.gateway-work article img{width:100%;height:230px;object-fit:cover}.gateway-work article div{padding:21px}.gateway-work h3{font-size:17px;color:#073b60;margin:7px 0}.gateway-work p{font-size:12px;color:#688294;line-height:1.55;margin:0}
.gateway-final-cta{padding:72px 0;background:#072f4b;color:#fff}.gateway-final-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:60px;align-items:center}.gateway-final-cta h2{font-size:clamp(34px,4vw,52px);line-height:1.02;margin:5px 0 15px;color:#fff}.gateway-final-cta p:not(.eyebrow){color:#d5e8f0;line-height:1.65;max-width:560px}.gateway-cta-links{display:grid;gap:9px}.gateway-cta-links a{min-width:0;padding:15px 18px;border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.07);border-radius:13px;display:flex;align-items:center;justify-content:space-between;gap:15px;color:#fff;font-size:12px;font-weight:700}.gateway-cta-links a:hover{background:rgba(255,255,255,.12)}.gateway-cta-links span{display:flex;align-items:center;gap:12px;min-width:0}.gateway-cta-links span i{color:#78d9f8}
@media(max-width:1100px){.gateway-hero-grid{grid-template-columns:1fr 1fr;gap:34px}.gateway-service-grid{grid-template-columns:repeat(2,1fr)}.gateway-sector-grid{grid-template-columns:repeat(4,1fr)}.ecosystem-flow{grid-template-columns:repeat(5,1fr);gap:10px}.flow-arrow{display:none}.gateway-story-grid{gap:40px}}
@media(max-width:820px){.gateway-hero{padding:28px 0 48px}.gateway-hero-grid{grid-template-columns:1fr;min-height:0;gap:26px}.gateway-hero-copy{padding:20px 0 0}.gateway-hero-media{width:100%;aspect-ratio:16/11}.gateway-heading,.gateway-story-grid,.gateway-final-grid{grid-template-columns:1fr;gap:20px}.gateway-heading{margin-bottom:28px}.gateway-service-grid{grid-template-columns:1fr 1fr}.gateway-sector-grid{grid-template-columns:repeat(2,1fr)}.gateway-story-image{order:2}.gateway-story-copy{order:1}.ecosystem-flow{grid-template-columns:repeat(2,1fr)}.gateway-work-grid{grid-template-columns:1fr}.gateway-work article{display:grid;grid-template-columns:180px 1fr}.gateway-work article img{height:100%;min-height:180px}.gateway-pillars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.gateway-home .container{width:calc(100% - 34px)}.gateway-hero{padding:18px 0 38px}.gateway-hero-copy h1{font-size:43px}.gateway-hero-copy>p:not(.eyebrow){font-size:14px;line-height:1.65}.gateway-hero-actions{display:grid;grid-template-columns:1fr;margin:22px 0}.gateway-hero-actions .btn{width:100%;justify-content:center}.gateway-hero-trust{gap:12px 18px}.gateway-hero-media{aspect-ratio:4/5;border-radius:20px}.gateway-hero-media img{object-position:center}.gateway-hero-media-card{left:12px;right:12px;bottom:12px;padding:13px 14px;display:block}.gateway-hero-media-card span{display:block;text-align:left;margin-top:3px}.gateway-services,.gateway-sectors,.gateway-story,.gateway-ecosystem,.gateway-work{padding:54px 0}.gateway-heading h2{font-size:32px}.gateway-service-grid{grid-template-columns:1fr}.gateway-service-image{height:210px}.future-service{align-items:flex-start;padding:18px}.gateway-sector-grid{grid-template-columns:1fr 1fr;gap:10px}.gateway-sector-grid a{min-height:138px;padding:17px 10px}.gateway-story-image{aspect-ratio:4/3}.gateway-pillars{grid-template-columns:1fr 1fr}.ecosystem-flow{grid-template-columns:1fr 1fr}.ecosystem-flow>a,.ecosystem-flow>div:not(.flow-arrow){min-height:140px}.gateway-work article{display:block}.gateway-work article img{height:210px}.gateway-final-cta{padding:54px 0}.gateway-final-grid{gap:28px}.gateway-cta-links a{padding:14px 15px}.gateway-home h1,.gateway-home h2,.gateway-home h3,.gateway-home p,.gateway-home a,.gateway-home div{overflow-wrap:break-word}}
@media(max-width:390px){.gateway-home .container{width:calc(100% - 28px)}.gateway-hero-copy h1{font-size:38px}.gateway-sector-grid{grid-template-columns:1fr}.gateway-pillars{grid-template-columns:1fr}.ecosystem-flow{grid-template-columns:1fr}.gateway-service-image{height:190px}}

/* V2 imagery refinement: warm, relatable, mobile-first */
.gateway-hero-media{background:#eef7fb}
.gateway-hero-media img{object-position:52% center;filter:saturate(.96) contrast(1.01)}
.gateway-service-image img,.gateway-story-image img,.gateway-work article img{transition:transform .35s ease,filter .35s ease;filter:saturate(.95) contrast(1.015)}
.gateway-service-card:hover .gateway-service-image img,.gateway-work article:hover img{transform:scale(1.018)}
.gateway-service-card:nth-child(1) .gateway-service-image img{object-position:center 55%}
.gateway-service-card:nth-child(2) .gateway-service-image img{object-position:center 48%}
.gateway-service-card:nth-child(3) .gateway-service-image img{object-position:center 44%}
.gateway-service-card:nth-child(4) .gateway-service-image img{object-position:center 44%}
.gateway-story-image img{object-position:center 46%}
.gateway-work article:nth-child(1) img{object-position:center 54%}
.gateway-work article:nth-child(2) img{object-position:center 42%}
.gateway-work article:nth-child(3) img{object-position:center 45%}
@media(max-width:600px){
  .gateway-hero-media{aspect-ratio:4/5}
  .gateway-hero-media img{object-position:52% center}
  .gateway-service-image{height:235px}
  .gateway-service-card:nth-child(4) .gateway-service-image img{object-position:center 36%}
  .gateway-story-image{aspect-ratio:4/5}
  .gateway-story-image img{object-position:center 46%}
  .gateway-work article img{height:235px}
}

/* V3 imagery refinement: human feel without visible faces, softer hero integration */
.gateway-hero{overflow:hidden}
.gateway-hero-media{box-shadow:none;border-radius:30px;background:transparent;isolation:isolate}
.gateway-hero-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(7,59,96,.56) 0%,rgba(7,59,96,.18) 22%,rgba(7,59,96,0) 50%),linear-gradient(180deg,rgba(5,47,77,0) 55%,rgba(5,47,77,.20) 100%)}
.gateway-hero-media img{position:relative;z-index:0;filter:saturate(.92) contrast(1.02);object-position:center 48%;transform:scale(1.015)}
.gateway-hero-media-card{z-index:2;background:rgba(5,47,77,.72);border:1px solid rgba(255,255,255,.16);box-shadow:0 14px 40px rgba(0,20,35,.16)}
.gateway-service-card:nth-child(1) .gateway-service-image img{object-position:center 54%}
.gateway-service-card:nth-child(2) .gateway-service-image img{object-position:center 50%}
.gateway-service-card:nth-child(3) .gateway-service-image img{object-position:center 52%}
.gateway-service-card:nth-child(4) .gateway-service-image img{object-position:center 50%}
.gateway-story-image img{object-position:center 52%}
@media(max-width:820px){
  .gateway-hero-media{border-radius:22px}
  .gateway-hero-media::before{background:linear-gradient(180deg,rgba(7,59,96,.06) 0%,rgba(7,59,96,0) 50%,rgba(5,47,77,.18) 100%)}
}
@media(max-width:600px){
  .gateway-hero-media{aspect-ratio:4/5}
  .gateway-hero-media img{object-position:center 50%;transform:scale(1.01)}
  .gateway-story-image img{object-position:center 52%}
}

/* V4 imagery refresh */
.gateway-hero-media img{object-position:center 52%;transform:scale(1.02)}
.gateway-service-card:nth-child(1) .gateway-service-image img{object-position:center 50%}
.gateway-story-image img{object-position:center 54%}
.gateway-work article:first-child img{object-position:center 50%}
.gateway-work article:nth-child(3) img{object-position:center 56%}
@media(max-width:600px){.gateway-hero-media img{object-position:center 50%;transform:scale(1.03)}.gateway-service-card:nth-child(1) .gateway-service-image img{object-position:center 50%}.gateway-work article:first-child img{object-position:center 52%}.gateway-work article:nth-child(3) img{object-position:center 52%}}


/* V4.1 MOBILE IMAGE SCALE FIX */
@media (max-width: 820px){
  .gateway-hero-media{
    aspect-ratio:16/10;
    max-height:360px;
    border-radius:20px;
  }
  .gateway-hero-media img{
    object-position:center 48%;
    transform:none;
  }
  .gateway-service-image{
    height:175px;
  }
  .gateway-story-image{
    aspect-ratio:16/10;
    max-height:340px;
  }
  .gateway-work article img{
    height:175px;
    min-height:0;
  }
}
@media (max-width: 600px){
  .gateway-hero-media{
    aspect-ratio:16/9;
    height:auto;
    max-height:245px;
    border-radius:16px;
  }
  .gateway-hero-media img{
    object-position:center 46%;
    transform:none;
  }
  .gateway-hero-media-card{
    left:10px;
    right:10px;
    bottom:10px;
    padding:9px 11px;
    border-radius:11px;
  }
  .gateway-hero-media-card strong{font-size:13px}
  .gateway-hero-media-card span{font-size:9px;line-height:1.35}
  .gateway-service-image{
    height:155px;
  }
  .gateway-service-card:nth-child(1) .gateway-service-image img{
    object-position:center 48%;
  }
  .gateway-service-card:nth-child(2) .gateway-service-image img,
  .gateway-service-card:nth-child(3) .gateway-service-image img,
  .gateway-service-card:nth-child(4) .gateway-service-image img{
    object-position:center center;
  }
  .gateway-story-image{
    aspect-ratio:16/10;
    max-height:230px;
  }
  .gateway-story-image img{object-position:center 50%}
  .gateway-work article img{
    height:155px;
  }
}
@media (max-width: 390px){
  .gateway-hero-media{max-height:215px}
  .gateway-service-image{height:145px}
  .gateway-story-image{max-height:210px}
  .gateway-work article img{height:145px}
}


/* V4.2 MOBILE FULL-IMAGE TREATMENT
   Preserve the complete photograph on phones instead of cropping with cover. */
@media (max-width: 600px){
  .gateway-hero-media,
  .gateway-story-image{
    aspect-ratio:auto;
    height:auto;
    max-height:none;
    overflow:hidden;
  }
  .gateway-hero-media img,
  .gateway-story-image img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    object-position:center;
    transform:none;
  }
  .gateway-hero-media-card{
    display:none;
  }
  .gateway-service-image{
    height:auto;
    aspect-ratio:auto;
    background:#f3f8fb;
  }
  .gateway-service-image img{
    display:block;
    width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
    object-position:center;
  }
  .gateway-work article img{
    display:block;
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    object-fit:contain;
    object-position:center;
    background:#f3f8fb;
  }
}
@media (max-width: 390px){
  .gateway-hero-media,
  .gateway-story-image{max-height:none}
  .gateway-service-image{height:auto}
  .gateway-work article img{height:auto}
}

/* V4.3 content + wider mobile imagery */
.gateway-pillars span p{margin:0;color:#6b8292;font-size:10px;line-height:1.5}
@media(max-width:820px){
  .gateway-pillars{grid-template-columns:1fr 1fr;gap:12px}
  .gateway-pillars span{padding:18px 16px;min-height:150px}
  .gateway-pillars b{font-size:13px}
  .gateway-pillars span p{font-size:11px;line-height:1.55}
}
@media(max-width:600px){
  .gateway-hero-media img{width:100%;height:auto;object-fit:contain;object-position:center;transform:none}
  .gateway-pillars{grid-template-columns:1fr;gap:12px}
  .gateway-pillars span{min-height:0;padding:18px 18px;gap:8px}
  .gateway-pillars i{font-size:22px}
  .gateway-pillars b{font-size:15px}
  .gateway-pillars span p{font-size:13px;line-height:1.55;max-width:520px}
  .gateway-work article:first-child img{width:100%;height:auto;object-fit:contain;object-position:center}
}


/* V4.4 visual differentiation + desktop hero blending */
@media (min-width: 821px){
  .gateway-hero-media{
    border-radius:0 30px 30px 0;
    overflow:hidden;
    box-shadow:none;
    background:transparent;
    margin-left:-34px;
  }
  .gateway-hero-media::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
      linear-gradient(90deg,#073b60 0%,rgba(7,59,96,.92) 8%,rgba(7,59,96,.58) 20%,rgba(7,59,96,.16) 38%,rgba(7,59,96,0) 56%),
      linear-gradient(180deg,rgba(5,47,77,0) 66%,rgba(5,47,77,.16) 100%);
  }
  .gateway-hero-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transform:none;
  }
  .gateway-hero-media-card{
    z-index:2;
    left:42px;
    right:20px;
    background:rgba(245,251,254,.90);
    border:1px solid rgba(255,255,255,.82);
    box-shadow:0 12px 32px rgba(4,39,62,.12);
    backdrop-filter:blur(10px);
  }
  .gateway-hero-media-card strong{color:#073b60}
  .gateway-hero-media-card span{color:#557286}
}

/* Make every major homepage photograph visually distinct. */
.gateway-service-card:nth-child(3) .gateway-service-image img{object-position:center 50%}
.gateway-work article:nth-child(3) img{object-position:center 50%}

@media (max-width:600px){
  .gateway-service-card:nth-child(3) .gateway-service-image img,
  .gateway-work article:nth-child(3) img{
    width:100%;
    height:auto;
    object-fit:contain;
    object-position:center;
  }
}

/* ==========================================================
   V4.6 — integrated multi-water-use hero + locked mobile menu
   Footer intentionally untouched.
   ========================================================== */
.gateway-hero-v46{
  position:relative;
  isolation:isolate;
  min-height:570px;
  padding:0;
  background:
    linear-gradient(90deg,
      #052f4d 0%,
      #073b60 30%,
      rgba(7,59,96,.96) 39%,
      rgba(7,59,96,.78) 49%,
      rgba(7,59,96,.40) 59%,
      rgba(7,59,96,.08) 72%,
      rgba(7,59,96,0) 100%),
    url('../images/hero-multiple-water-uses-v46.jpg') right center / 62% 100% no-repeat,
    #073b60;
}
.gateway-hero-v46::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(3,34,55,.04) 55%,rgba(3,34,55,.24) 100%);
}
.gateway-hero-v46 .gateway-hero-grid{
  min-height:570px;
  display:block;
}
.gateway-hero-v46 .gateway-hero-copy{
  width:min(610px,48vw);
  min-height:570px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:58px 0 48px;
}
.gateway-hero-v46 .gateway-hero-copy h1{
  font-size:clamp(48px,5vw,72px);
  max-width:620px;
}
.gateway-hero-v46 .gateway-hero-copy>p:not(.eyebrow){max-width:580px}
.gateway-hero-v46 .gateway-hero-trust{max-width:590px}

/* Mobile navigation must occupy its own fixed viewport and never move the page behind it. */
@media(max-width:600px){
  html.menu-open,body.menu-open{overflow:hidden!important;overscroll-behavior:none}
  body.menu-open{touch-action:none}
  .main-nav{
    position:fixed;
    top:74px;
    left:12px;
    right:12px;
    bottom:10px;
    max-height:none;
    height:auto;
    overflow:hidden;
    overscroll-behavior:none;
    padding:7px;
    gap:2px;
    justify-content:space-evenly;
    z-index:52;
  }
  .main-nav>a{
    min-height:0;
    padding:9px 12px!important;
    margin:0;
    line-height:1.2;
    flex:0 1 auto;
  }
  .main-nav .track-link,.main-nav .contact-cta{padding:10px 12px!important}
  .nav-arrow{width:26px;height:26px;flex:0 0 26px}

  .gateway-hero-v46{
    min-height:640px;
    padding:0;
    background:
      linear-gradient(180deg,
        rgba(5,47,77,.98) 0%,
        rgba(5,47,77,.94) 38%,
        rgba(5,47,77,.76) 58%,
        rgba(5,47,77,.32) 78%,
        rgba(5,47,77,.16) 100%),
      url('../images/hero-multiple-water-uses-v46.jpg') 68% center / cover no-repeat,
      #073b60;
  }
  .gateway-hero-v46 .gateway-hero-grid{min-height:640px}
  .gateway-hero-v46 .gateway-hero-copy{
    width:100%;
    min-height:640px;
    justify-content:flex-start;
    padding:46px 0 34px;
  }
  .gateway-hero-v46 .gateway-hero-copy h1{font-size:43px;max-width:540px}
  .gateway-hero-v46 .gateway-hero-copy>p:not(.eyebrow){max-width:520px;color:#f1f8fb}
  .gateway-hero-v46 .gateway-hero-trust{margin-top:auto;background:rgba(4,43,68,.42);border-radius:12px;padding:13px 14px;border-top:1px solid rgba(255,255,255,.22)}
}
@media(max-width:390px){
  .main-nav{top:74px;bottom:8px}
  .main-nav>a{padding:7px 10px!important;font-size:11px}
  .main-nav .track-link,.main-nav .contact-cta{padding:8px 10px!important}
  .gateway-hero-v46 .gateway-hero-copy h1{font-size:38px}
}

/* ==========================================================
   V4.7 — high-quality non-stretched integrated hero
   Keeps the V4.6 gradient and mobile navigation lock.
   Footer intentionally untouched.
   ========================================================== */
.gateway-hero-v47{
  position:relative;
  isolation:isolate;
  min-height:570px;
  padding:0;
  background-color:#073b60;
  background-image:
    linear-gradient(90deg,
      #052f4d 0%,
      #073b60 31%,
      rgba(7,59,96,.97) 39%,
      rgba(7,59,96,.82) 48%,
      rgba(7,59,96,.52) 57%,
      rgba(7,59,96,.20) 66%,
      rgba(7,59,96,.03) 76%,
      rgba(7,59,96,0) 100%),
    url('../images/hero-multiple-water-uses-v47.jpg');
  background-repeat:no-repeat,no-repeat;
  background-position:left top,right center;
  /* Keep the photograph's aspect ratio: never force width and height simultaneously. */
  background-size:100% 100%,auto 100%;
  overflow:hidden;
}
.gateway-hero-v47::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(3,34,55,0) 68%,rgba(3,34,55,.12) 100%);
}
.gateway-hero-v47 .gateway-hero-grid{min-height:570px;display:block}
.gateway-hero-v47 .gateway-hero-copy{
  width:min(610px,48vw);
  min-height:570px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:58px 0 48px;
}
.gateway-hero-v47 .gateway-hero-copy h1{font-size:clamp(48px,5vw,72px);max-width:620px}
.gateway-hero-v47 .gateway-hero-copy>p:not(.eyebrow){max-width:580px}
.gateway-hero-v47 .gateway-hero-trust{max-width:590px}

@media(max-width:820px){
  .gateway-hero-v47{
    min-height:780px;
    background-color:#073b60;
    background-image:
      linear-gradient(180deg,
        #052f4d 0%,
        #073b60 43%,
        rgba(7,59,96,.96) 54%,
        rgba(7,59,96,.70) 65%,
        rgba(7,59,96,.24) 78%,
        rgba(7,59,96,.06) 100%),
      url('../images/hero-multiple-water-uses-v47.jpg');
    background-repeat:no-repeat,no-repeat;
    background-position:center top,center bottom;
    /* Show the complete scene across the phone width instead of cropping to the glass. */
    background-size:100% 100%,100% auto;
  }
  .gateway-hero-v47 .gateway-hero-grid{min-height:780px}
  .gateway-hero-v47 .gateway-hero-copy{
    width:100%;
    min-height:780px;
    justify-content:flex-start;
    padding:42px 0 30px;
  }
  .gateway-hero-v47 .gateway-hero-copy h1{font-size:43px;max-width:540px}
  .gateway-hero-v47 .gateway-hero-copy>p:not(.eyebrow){max-width:520px;color:#f1f8fb}
  .gateway-hero-v47 .gateway-hero-trust{
    margin-top:18px;
    max-width:100%;
    background:rgba(4,43,68,.44);
    border-radius:12px;
    padding:13px 14px;
    border-top:1px solid rgba(255,255,255,.22);
  }
}
@media(max-width:600px){
  .gateway-hero-v47{min-height:760px}
  .gateway-hero-v47 .gateway-hero-grid,.gateway-hero-v47 .gateway-hero-copy{min-height:760px}
  .gateway-hero-v47 .gateway-hero-copy{padding:38px 0 28px}
  .gateway-hero-v47 .gateway-hero-copy h1{font-size:40px;line-height:1.03}
  .gateway-hero-v47 .gateway-hero-actions{gap:10px}
  .gateway-hero-v47 .gateway-hero-actions .btn{padding-left:14px;padding-right:14px}
}
@media(max-width:390px){
  .gateway-hero-v47{min-height:740px}
  .gateway-hero-v47 .gateway-hero-grid,.gateway-hero-v47 .gateway-hero-copy{min-height:740px}
  .gateway-hero-v47 .gateway-hero-copy h1{font-size:37px}
}


/* ==========================================================
   V4.8 — rebalanced hero composition
   Goal: keep the tank, pool, glass and water feature readable
   without making the photograph look like a cropped half-panel.
   The photo remains a HERO BACKGROUND, not an inserted image.
   ========================================================== */
.gateway-hero-v48{
  position:relative;
  isolation:isolate;
  min-height:600px;
  padding:0;
  overflow:hidden;
  background-color:#073b60;
  background-image:
    linear-gradient(90deg,
      #052f4d 0%,
      #073b60 31%,
      rgba(7,59,96,.98) 37%,
      rgba(7,59,96,.88) 42%,
      rgba(7,59,96,.62) 47%,
      rgba(7,59,96,.32) 52%,
      rgba(7,59,96,.10) 57%,
      rgba(7,59,96,0) 63%),
    url('../images/hero-multiple-water-uses-v47.jpg');
  background-repeat:no-repeat,no-repeat;
  background-position:left top,right center;
  /* Scale from height only. This preserves the source aspect ratio. */
  background-size:100% 100%,auto 100%;
}
.gateway-hero-v48::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(3,34,55,0) 72%,rgba(3,34,55,.10) 100%);
}
.gateway-hero-v48 .gateway-hero-grid{min-height:600px;display:block}
.gateway-hero-v48 .gateway-hero-copy{
  width:min(640px,45vw);
  min-height:600px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:58px 0 48px;
}
.gateway-hero-v48 .gateway-hero-copy h1{font-size:clamp(48px,5vw,72px);max-width:620px}
.gateway-hero-v48 .gateway-hero-copy>p:not(.eyebrow){max-width:575px}
.gateway-hero-v48 .gateway-hero-trust{max-width:590px}

/* Tablet/phone: reserve a clean text zone above and show the COMPLETE
   photograph across the lower part of the same hero background. */
@media(max-width:820px){
  .gateway-hero-v48{
    min-height:820px;
    background-color:#073b60;
    background-image:
      linear-gradient(180deg,
        #052f4d 0%,
        #073b60 48%,
        rgba(7,59,96,.98) 57%,
        rgba(7,59,96,.76) 65%,
        rgba(7,59,96,.28) 73%,
        rgba(7,59,96,.04) 81%,
        rgba(7,59,96,0) 100%),
      url('../images/hero-multiple-water-uses-v47.jpg');
    background-repeat:no-repeat,no-repeat;
    background-position:center top,center bottom;
    /* Full scene width = no left/right crop of the tank or glass. */
    background-size:100% 100%,100% auto;
  }
  .gateway-hero-v48 .gateway-hero-grid{min-height:820px}
  .gateway-hero-v48 .gateway-hero-copy{
    width:100%;
    min-height:820px;
    justify-content:flex-start;
    padding:42px 0 28px;
  }
  .gateway-hero-v48 .gateway-hero-copy h1{font-size:43px;max-width:540px}
  .gateway-hero-v48 .gateway-hero-copy>p:not(.eyebrow){max-width:520px;color:#f1f8fb}
  .gateway-hero-v48 .gateway-hero-trust{
    margin-top:18px;
    max-width:100%;
    background:rgba(4,43,68,.42);
    border-radius:12px;
    padding:13px 14px;
    border-top:1px solid rgba(255,255,255,.22);
  }
}
@media(max-width:600px){
  .gateway-hero-v48{min-height:790px}
  .gateway-hero-v48 .gateway-hero-grid,.gateway-hero-v48 .gateway-hero-copy{min-height:790px}
  .gateway-hero-v48 .gateway-hero-copy{padding:36px 0 24px}
  .gateway-hero-v48 .gateway-hero-copy h1{font-size:40px;line-height:1.03}
  .gateway-hero-v48 .gateway-hero-actions{gap:10px}
  .gateway-hero-v48 .gateway-hero-actions .btn{padding-left:14px;padding-right:14px}
}
@media(max-width:390px){
  .gateway-hero-v48{min-height:770px}
  .gateway-hero-v48 .gateway-hero-grid,.gateway-hero-v48 .gateway-hero-copy{min-height:770px}
  .gateway-hero-v48 .gateway-hero-copy h1{font-size:37px}
}


/* ===== V4.9 — SINGLE PHOTO HERO + TRUE GRADIENT BLEND =====
   Full hero photograph sits behind the copy. The navy treatment is an overlay,
   not a separate panel, so the transition is continuous on desktop and mobile. */
.gateway-hero-v49{
  position:relative;
  isolation:isolate;
  min-height:600px;
  padding:0;
  overflow:hidden;
  color:#fff;
  background-color:#073b60;
  background-image:url('../images/hero-water-pool-v49.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
}
.gateway-hero-v49::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(5,47,77,.995) 0%,
    rgba(5,47,77,.985) 24%,
    rgba(5,47,77,.94) 34%,
    rgba(5,47,77,.82) 43%,
    rgba(5,47,77,.60) 52%,
    rgba(5,47,77,.36) 61%,
    rgba(5,47,77,.16) 70%,
    rgba(5,47,77,.04) 79%,
    rgba(5,47,77,0) 88%);
}
.gateway-hero-v49::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(2,31,51,.02) 60%,rgba(2,31,51,.18) 100%);
}
.gateway-hero-v49 .gateway-hero-grid{min-height:600px;display:block}
.gateway-hero-v49 .gateway-hero-copy{
  width:min(650px,46vw);
  min-height:600px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:58px 0 48px;
}
.gateway-hero-v49 .gateway-hero-copy h1{font-size:clamp(48px,5vw,72px);max-width:620px}
.gateway-hero-v49 .gateway-hero-copy>p:not(.eyebrow){max-width:575px}
.gateway-hero-v49 .gateway-hero-trust{max-width:590px}

@media(max-width:900px){
  .gateway-hero-v49{
    min-height:810px;
    background-size:100% auto;
    background-position:center bottom;
    background-color:#073b60;
  }
  .gateway-hero-v49::before{
    background:linear-gradient(180deg,
      #052f4d 0%,
      #073b60 42%,
      rgba(7,59,96,.99) 51%,
      rgba(7,59,96,.88) 59%,
      rgba(7,59,96,.62) 67%,
      rgba(7,59,96,.34) 75%,
      rgba(7,59,96,.12) 83%,
      rgba(7,59,96,0) 92%);
  }
  .gateway-hero-v49::after{background:linear-gradient(180deg,transparent 72%,rgba(2,31,51,.10) 100%)}
  .gateway-hero-v49 .gateway-hero-grid{min-height:810px}
  .gateway-hero-v49 .gateway-hero-copy{
    width:100%;
    min-height:810px;
    justify-content:flex-start;
    padding:42px 0 28px;
  }
  .gateway-hero-v49 .gateway-hero-copy h1{font-size:43px;max-width:540px}
  .gateway-hero-v49 .gateway-hero-copy>p:not(.eyebrow){max-width:520px;color:#f1f8fb}
  .gateway-hero-v49 .gateway-hero-trust{
    margin-top:18px;
    max-width:100%;
    background:rgba(4,43,68,.40);
    border-radius:12px;
    padding:13px 14px;
    border-top:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(4px);
  }
}
@media(max-width:600px){
  .gateway-hero-v49{min-height:790px;background-size:100% auto;background-position:center bottom}
  .gateway-hero-v49 .gateway-hero-grid,.gateway-hero-v49 .gateway-hero-copy{min-height:790px}
  .gateway-hero-v49 .gateway-hero-copy{padding:36px 0 24px}
  .gateway-hero-v49 .gateway-hero-copy h1{font-size:40px;line-height:1.03}
  .gateway-hero-v49 .gateway-hero-actions{gap:10px}
  .gateway-hero-v49 .gateway-hero-actions .btn{padding-left:14px;padding-right:14px}
}
@media(max-width:390px){
  .gateway-hero-v49{min-height:770px}
  .gateway-hero-v49 .gateway-hero-grid,.gateway-hero-v49 .gateway-hero-copy{min-height:770px}
  .gateway-hero-v49 .gateway-hero-copy h1{font-size:37px}
}

/* ==========================================================
   V4.10 — PHONE HERO + VIEWPORT MENU CORRECTION
   Mobile only. Desktop and footer intentionally unchanged.
   ========================================================== */
@media (max-width: 820px){
  /* Safari: backdrop-filter on the sticky header can trap a fixed child.
     Remove that containing context so the menu uses the real viewport. */
  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none}
  html.menu-open,body.menu-open{overflow:hidden!important;overscroll-behavior:none!important}
  body.menu-open{touch-action:none}

  .main-nav{
    position:fixed!important;
    top:74px!important;
    left:12px!important;
    right:12px!important;
    bottom:12px!important;
    height:auto!important;
    max-height:none!important;
    z-index:1000!important;
    overflow:hidden!important;
    display:none;
    flex-direction:column;
    justify-content:space-evenly;
    align-items:stretch;
    padding:10px!important;
    gap:3px!important;
    background:#fff;
    border:1px solid #d8e8f0;
    border-radius:16px;
    box-shadow:0 25px 60px rgba(5,44,70,.24);
  }
  .main-nav.open{display:flex!important}
  .main-nav>a{
    flex:0 1 auto!important;
    min-height:0!important;
    padding:10px 13px!important;
    margin:0!important;
    line-height:1.15!important;
  }
  .main-nav .track-link,.main-nav .contact-cta{padding:11px 13px!important}
  .menu-toggle{position:relative;z-index:1001}
}

@media (max-width: 600px){
  /* Keep the hero concise on phones and bring the photograph up directly
     beneath the message instead of leaving a large navy dead zone. */
  .gateway-hero-v49{
    min-height:690px!important;
    background-color:#073b60;
    background-size:100% auto!important;
    background-position:center bottom!important;
  }
  .gateway-hero-v49::before{
    background:linear-gradient(180deg,
      #052f4d 0%,
      #073b60 54%,
      rgba(7,59,96,.98) 61%,
      rgba(7,59,96,.82) 68%,
      rgba(7,59,96,.52) 75%,
      rgba(7,59,96,.22) 82%,
      rgba(7,59,96,0) 90%)!important;
  }
  .gateway-hero-v49::after{
    background:linear-gradient(180deg,transparent 70%,rgba(2,31,51,.08) 100%)!important;
  }
  .gateway-hero-v49 .gateway-hero-grid,
  .gateway-hero-v49 .gateway-hero-copy{min-height:690px!important}
  .gateway-hero-v49 .gateway-hero-copy{
    padding:32px 0 18px!important;
    justify-content:flex-start!important;
  }
  .gateway-hero-v49 .gateway-hero-copy h1{
    font-size:38px!important;
    line-height:1.04!important;
    margin-bottom:18px!important;
  }
  .gateway-hero-v49 .gateway-hero-copy>p:not(.eyebrow){
    font-size:14px!important;
    line-height:1.58!important;
    margin-bottom:18px!important;
  }
  .gateway-hero-v49 .gateway-hero-actions{margin:16px 0!important;gap:9px!important}
  .gateway-hero-v49 .gateway-hero-actions .btn{min-height:48px!important}
  .gateway-hero-v49 .gateway-hero-trust{
    margin-top:14px!important;
    padding:11px 12px!important;
    gap:9px 14px!important;
  }
}

@media (max-width: 390px){
  .gateway-hero-v49{min-height:660px!important}
  .gateway-hero-v49 .gateway-hero-grid,
  .gateway-hero-v49 .gateway-hero-copy{min-height:660px!important}
  .gateway-hero-v49 .gateway-hero-copy h1{font-size:35px!important}
  .main-nav{top:74px!important;bottom:8px!important}
  .main-nav>a{padding:8px 11px!important;font-size:11px!important}
}

/* ==========================================================
   V4.11 — MOBILE HERO FLOW CORRECTION
   Removes the artificial fixed hero height on phones. The copy
   now determines its own height and the photograph follows it
   immediately inside the same hero background.
   ========================================================== */
@media (max-width: 600px){
  .gateway-hero-v49{
    min-height:0!important;
    height:auto!important;
    background-size:100% auto!important;
    background-position:center bottom!important;
    background-repeat:no-repeat!important;
  }
  .gateway-hero-v49 .gateway-hero-grid{
    min-height:0!important;
    height:auto!important;
  }
  .gateway-hero-v49 .gateway-hero-copy{
    min-height:0!important;
    height:auto!important;
    /* reserve only the actual photograph area — no empty navy spacer */
    padding:32px 0 calc(51vw + 18px)!important;
  }
  .gateway-hero-v49::before{
    background:linear-gradient(180deg,
      #052f4d 0%,
      #073b60 57%,
      rgba(7,59,96,.96) 64%,
      rgba(7,59,96,.74) 70%,
      rgba(7,59,96,.42) 76%,
      rgba(7,59,96,.14) 82%,
      rgba(7,59,96,0) 88%)!important;
  }
  .gateway-hero-v49 .gateway-hero-trust{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    align-items:center!important;
    gap:12px 14px!important;
    margin-bottom:0!important;
  }
  .gateway-hero-v49 .gateway-hero-trust span{
    min-width:0!important;
    white-space:normal!important;
  }
}
@media (max-width: 390px){
  .gateway-hero-v49,
  .gateway-hero-v49 .gateway-hero-grid,
  .gateway-hero-v49 .gateway-hero-copy{min-height:0!important}
  .gateway-hero-v49 .gateway-hero-copy{padding-bottom:calc(53vw + 16px)!important}
}

/* ==========================================================
   V5.0 LAUNCH HERO — quality-first responsive composition
   The hero photo is a real image layer, never stretched. On phones
   it flows at its natural aspect ratio below the copy to preserve detail.
   ========================================================== */
.gateway-hero-v50{
  background:#073b60!important;
  min-height:620px;
  overflow:hidden;
}
.gateway-hero-v50 .gateway-hero-visual{
  position:absolute;
  z-index:-2;
  inset:0 0 0 34%;
  overflow:hidden;
}
.gateway-hero-v50 .gateway-hero-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}
.gateway-hero-v50::before{
  z-index:-1!important;
  background:linear-gradient(90deg,
    #052f4d 0%,
    #052f4d 30%,
    rgba(5,47,77,.97) 37%,
    rgba(5,47,77,.88) 44%,
    rgba(5,47,77,.68) 51%,
    rgba(5,47,77,.42) 58%,
    rgba(5,47,77,.18) 66%,
    rgba(5,47,77,.04) 74%,
    rgba(5,47,77,0) 82%)!important;
}
.gateway-hero-v50::after{
  z-index:-1!important;
  background:linear-gradient(180deg,rgba(2,31,51,0) 65%,rgba(2,31,51,.16) 100%)!important;
}
.gateway-hero-v50 .gateway-hero-grid{min-height:620px!important}
.gateway-hero-v50 .gateway-hero-copy{
  width:min(620px,45vw)!important;
  min-height:620px!important;
  padding:54px 0 44px!important;
  justify-content:center!important;
}
.gateway-hero-v50 .gateway-hero-copy h1{
  font-size:clamp(45px,4.25vw,66px)!important;
  line-height:.98!important;
  letter-spacing:-.035em;
  margin:0 0 22px!important;
}
.gateway-hero-v50 .gateway-hero-copy h1 span{color:#67cef4}
.gateway-hero-v50 .gateway-hero-copy>p{max-width:565px!important}
.gateway-hero-v50 .gateway-hero-trust{max-width:600px!important}

@media(max-width:820px){
  .gateway-hero-v50{
    min-height:0!important;
    height:auto!important;
    display:flex;
    flex-direction:column;
    background:#073b60!important;
  }
  .gateway-hero-v50::before,.gateway-hero-v50::after{display:none!important}
  .gateway-hero-v50 .gateway-hero-grid{
    order:1;
    min-height:0!important;
    width:100%;
  }
  .gateway-hero-v50 .gateway-hero-copy{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    padding:34px 0 28px!important;
  }
  .gateway-hero-v50 .gateway-hero-copy h1{
    font-size:clamp(38px,10vw,48px)!important;
    line-height:1.02!important;
    max-width:620px!important;
  }
  .gateway-hero-v50 .gateway-hero-copy>p{
    color:#f1f8fb!important;
    font-size:15px!important;
    line-height:1.58!important;
    margin-bottom:20px!important;
  }
  .gateway-hero-v50 .gateway-hero-trust{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px 14px!important;
    margin:20px 0 0!important;
    padding:16px!important;
  }
  .gateway-hero-v50 .gateway-hero-visual{
    position:relative!important;
    order:2;
    inset:auto!important;
    width:100%;
    overflow:hidden;
    background:#073b60;
  }
  .gateway-hero-v50 .gateway-hero-visual::before{
    content:"";
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,#073b60 0%,rgba(7,59,96,.72) 7%,rgba(7,59,96,.25) 16%,rgba(7,59,96,0) 27%);
  }
  .gateway-hero-v50 .gateway-hero-visual img{
    width:100%!important;
    height:auto!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center!important;
    display:block;
  }
}
@media(max-width:600px){
  .gateway-hero-v50 .gateway-hero-copy{padding:30px 0 24px!important}
  .gateway-hero-v50 .gateway-hero-copy h1{font-size:39px!important;margin-bottom:18px!important}
  .gateway-hero-v50 .gateway-hero-actions{margin:18px 0!important;gap:10px!important}
  .gateway-hero-v50 .gateway-hero-actions .btn{min-height:52px!important}
  .gateway-hero-v50 .gateway-hero-trust{margin-top:18px!important}
}
@media(max-width:390px){
  .gateway-hero-v50 .gateway-hero-copy h1{font-size:35px!important}
  .gateway-hero-v50 .gateway-hero-trust{gap:10px!important;padding:14px!important}
}

/* FINAL LAUNCH MOBILE HERO — approved 2026-09-28
   Desktop hero intentionally unchanged. */
@media(max-width:820px){
  .gateway-hero-v50 .gateway-hero-copy{
    box-sizing:border-box!important;
    padding-left:18px!important;
    padding-right:4px!important;
  }
  .gateway-hero-v50 .gateway-hero-copy h1{
    margin-left:6px!important;
    max-width:600px!important;
  }
  .gateway-hero-v50 .gateway-hero-visual picture{
    display:block!important;
    width:100%!important;
  }
  .gateway-hero-v50 .gateway-hero-visual picture img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    object-fit:contain!important;
    object-position:center!important;
  }
}
@media(max-width:600px){
  .gateway-hero-v50 .gateway-hero-copy{
    padding-left:22px!important;
    padding-right:8px!important;
  }
  .gateway-hero-v50 .gateway-hero-copy h1{
    margin-left:8px!important;
    max-width:calc(100% - 10px)!important;
  }
}

/* Water Cleanic Digital Standard — logo sizing */
@media (min-width:821px){
  .brand img{height:auto!important;width:120px!important;max-height:68px!important;object-fit:contain!important}
  .brand span{font-size:8.5px!important;margin-top:-2px!important}
  .footer-brand img{width:160px!important;max-height:94px!important;object-fit:contain!important}
}
@media (max-width:820px){
  .brand img{height:auto!important;width:94px!important;max-height:56px!important;object-fit:contain!important}
  .brand span{font-size:8px!important}
  .footer-brand img{width:148px!important;max-height:90px!important;object-fit:contain!important}
}
@media (max-width:600px){
  .brand img{width:88px!important;max-height:54px!important}
  .footer-brand img{width:145px!important;max-height:88px!important}
}