:root{--navy:#003366;--ink:#1b1a5e;--orange:#e8742c;--grey:#d9d9d9;--paper:#f4f4f4;--w:1160px}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:"Source Sans 3","Segoe UI",Arial,sans-serif;color:var(--navy);background:#fff;line-height:1.65;font-size:18px}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:"Archivo","Arial Narrow",Arial,sans-serif;line-height:1.15;color:var(--navy)}
h1{font-size:clamp(2.2rem,5.5vw,4rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:800;margin-bottom:.6em}
h3{font-size:1.25rem;font-weight:700;margin-bottom:.4em}
.wrap{max-width:var(--w);margin:auto;padding:0 20px}
section{padding:72px 0}
.alt{background:var(--grey)}
.dark{background:var(--navy);color:#fff}.dark h2,.dark h3{color:#fff}
.dark h2 em,h2 em{font-style:normal;color:var(--orange)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:4px solid var(--orange)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 20px;max-width:var(--w);margin:auto}
.bar img{height:54px;width:auto}
nav ul{display:flex;gap:6px;list-style:none;padding:0}
nav a{display:block;padding:10px 14px;text-decoration:none;font-weight:600;border-radius:4px}
nav a:hover,nav a[aria-current]{background:var(--navy);color:#fff}
nav a.cta{background:var(--orange);color:#fff}
.burger{display:none;background:var(--navy);color:#fff;border:0;padding:10px 14px;font-size:1rem;border-radius:4px;cursor:pointer}
.hero{position:relative;color:#fff;padding:120px 0 100px;background:linear-gradient(100deg,rgba(0,40,85,.95) 35%,rgba(0,40,85,.35)),url(../img/port.jpg) center/cover}
.hero h1,.hero p{color:#fff;max-width:640px}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero p{font-size:1.25rem;margin:20px 0 32px}
.page-hero{padding:64px 0;background:linear-gradient(100deg,rgba(0,40,85,.96),rgba(0,40,85,.8)),url(../img/port.jpg) center/cover}
.page-hero h1{color:#fff;font-size:clamp(2rem,4.5vw,3rem)}
.btn{display:inline-block;background:var(--orange);color:#fff;padding:14px 28px;font-weight:700;text-decoration:none;border-radius:4px;border:0;font:inherit;font-weight:700;cursor:pointer}
.btn:hover{background:#c85f1d}
.btn.line{background:none;border:2px solid #fff;margin-left:10px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split img{border-radius:6px;width:100%}
.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:#fff;padding:28px;border-top:5px solid var(--orange)}
.card p,.card li{font-size:1rem}
.card ul{padding-left:1.1em}
.dark .card{background:#0a437f;color:#fff}
.items{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.item{background:#fff;text-align:center;padding:18px 14px 20px}
.item img{height:150px;width:100%;object-fit:contain;margin-bottom:12px}
.item b{font-family:Archivo,Arial,sans-serif;font-size:.95rem}
.item span{display:block;font-size:.9rem;color:var(--orange);font-weight:700}
.stats{display:flex;flex-wrap:wrap;gap:28px 56px;margin-top:8px}
.stats b{display:block;font-family:Archivo,Arial,sans-serif;font-size:2.4rem;color:var(--orange);line-height:1}
.vm{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
form{display:grid;gap:14px}
input,textarea{font:inherit;padding:12px;border:2px solid #b8b8b8;border-radius:4px;width:100%}
label{font-weight:600}
.contact-list{list-style:none;padding:0;display:grid;gap:14px}
.contact-list b{display:block}
footer{background:var(--navy);color:#fff;padding:48px 0 24px;font-size:1rem}
footer a{color:#fff}
.fgrid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.fgrid img{height:50px;width:auto;margin-bottom:12px;border-radius:4px}
footer ul{list-style:none;padding:0}
.copy{border-top:1px solid #1f5188;margin-top:32px;padding-top:16px;font-size:.9rem}
@media(max-width:860px){
.burger{display:block}
nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:4px solid var(--orange)}
nav.open{display:block}
nav ul{flex-direction:column;padding:10px 20px}
.split{grid-template-columns:1fr;gap:28px}
section{padding:52px 0}
.hero{padding:80px 0 64px}
.btn.line{margin:12px 0 0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* slider */
.slider{position:relative;height:clamp(460px,78vh,700px);overflow:hidden;background:var(--navy);color:#fff}
.slide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .9s,visibility .9s;background:linear-gradient(100deg,rgba(0,40,85,.93) 30%,rgba(0,40,85,.25)),var(--bg) center/cover}
.slide.active{opacity:1;visibility:visible}
.slide::before{content:"";position:absolute;inset:0;background:var(--bg) center/cover;z-index:-1;transform:scale(1)}
.slide.active::before{animation:kb 7s ease-out forwards}
@keyframes kb{to{transform:scale(1.12)}}
.slide .wrap{width:100%}
.slide h1,.slide p{color:#fff;max-width:640px}
.slide h1 em{font-style:normal;color:var(--orange)}
.slide p{font-size:1.25rem;margin:18px 0 30px}
.slide h1,.slide p,.slide .btn{opacity:0;transform:translateY(28px)}
.slide.active h1,.slide.active p,.slide.active .btn{animation:up .8s forwards}
.slide.active p{animation-delay:.2s}.slide.active .btn{animation-delay:.4s}
@keyframes up{to{opacity:1;transform:none}}
.sbtn{position:absolute;top:50%;translate:0 -50%;z-index:3;background:rgba(0,0,0,.35);color:#fff;border:0;width:48px;height:48px;font-size:1.2rem;cursor:pointer;border-radius:50%}
.sbtn:hover{background:var(--orange)}.prev{left:16px}.next{right:16px}
.dots{position:absolute;bottom:22px;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:3}
.dots button{width:14px;height:14px;border-radius:50%;border:2px solid #fff;background:none;cursor:pointer;padding:0}
.dots button[aria-current=true]{background:var(--orange);border-color:var(--orange)}
.prog{position:absolute;bottom:0;left:0;height:4px;background:var(--orange);width:0;z-index:3}
.prog.run{animation:pg 5.5s linear forwards}
@keyframes pg{to{width:100%}}
/* scroll animation */
.scrollbar{position:fixed;top:0;left:0;height:4px;width:0;background:var(--orange);z-index:50}
.js .rv{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0s)}
.js .rv.l{transform:translateX(-50px)}.js .rv.r{transform:translateX(50px)}
.js .rv.in{opacity:1;transform:none}
header{transition:box-shadow .3s}header.sc{box-shadow:0 4px 16px rgba(0,0,0,.18)}
header.sc .bar img{height:44px}.bar img{transition:height .3s}
.item,.card{transition:transform .3s,box-shadow .3s}
.item:hover,.card:hover{transform:translateY(-6px);box-shadow:0 12px 24px rgba(0,40,85,.18)}
@media(max-width:860px){.sbtn{display:none}.slide p{font-size:1.1rem}}
@media(prefers-reduced-motion:reduce){.slide::before,.slide *{animation:none!important}.slide h1,.slide p,.slide .btn{opacity:1;transform:none}.js .rv{opacity:1;transform:none;transition:none}}
/* slider: make photos clearly visible */
.slide{background:none;isolation:isolate}
.slide::before{z-index:-2;transform:scale(1)}
.slide::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,35,75,.72) 0,rgba(0,35,75,.28) 45%,rgba(0,35,75,0) 75%)}
.slide .wrap>*{position:relative}
.slide .txt{max-width:600px;background:rgba(0,40,85,.55);padding:28px 30px;border-left:5px solid var(--orange);backdrop-filter:blur(3px)}
.slide .txt h1,.slide .txt p{max-width:none}
.slide .txt p{margin:14px 0 24px}
@media(max-width:860px){.slide::after{background:linear-gradient(0deg,rgba(0,35,75,.8),rgba(0,35,75,.1) 70%)}.slide{align-items:flex-end;padding-bottom:56px}.slide .txt{padding:18px}}
/* hamburger */
.burger{display:none;width:48px;height:44px;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.burger span{display:block;width:26px;height:3px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
@media(max-width:860px){.burger{display:flex}}
.slide::before{background:var(--bg) var(--pos,center)/cover}
#water{scroll-margin-top:80px}
.wcard{padding:0;overflow:hidden;scroll-margin-top:90px}
.wcard h3,.wcard p{padding:0 24px}.wcard h3{margin-top:20px}.wcard p{padding-bottom:26px}
.wcard img{width:100%;height:190px;object-fit:cover}
#water,#non-drinking,#waste{scroll-margin-top:90px}
/* whatsapp */
.wa{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.wa-btn{width:62px;height:62px;border-radius:50%;border:0;background:#25d366;cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.3);animation:pulse 2.4s infinite}
.wa-btn:hover{background:#1ebe5a}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6),0 6px 18px rgba(0,0,0,.3)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0),0 6px 18px rgba(0,0,0,.3)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0),0 6px 18px rgba(0,0,0,.3)}}
.wa-box{width:min(330px,calc(100vw - 36px));background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.3);animation:up2 .3s}
.wa-box[hidden]{display:none}
@keyframes up2{from{opacity:0;transform:translateY(16px)}}
.wa-head{background:#075e54;color:#fff;padding:14px 18px}.wa-head b{display:block;font-size:1.1rem}.wa-head span{font-size:.85rem;opacity:.85}
.wa-body{padding:14px;background:#ece5dd;max-height:55vh;overflow:auto;display:grid;gap:8px}
.wa-msg{background:#fff;padding:10px 12px;border-radius:0 10px 10px 10px;font-size:.95rem;line-height:1.4}
.wa-opt{display:block;background:#fff;border:2px solid #25d366;color:#075e54;text-decoration:none;font-weight:700;font-size:.95rem;padding:9px 12px;border-radius:20px;text-align:center}
.wa-opt:hover{background:#25d366;color:#fff}
@media(prefers-reduced-motion:reduce){.wa-btn,.wa-box{animation:none}}
.wgrid{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.wgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.wgrid{grid-template-columns:1fr}}
main,footer{overflow-x:clip}
@media(max-width:860px){
.slider{height:640px}
.slide::before{inset:0 0 auto 0;height:50%;background-position:var(--pos,center)}
.slide::after{display:none}
.slide .txt{background:var(--navy);backdrop-filter:none;border-left:0;border-top:5px solid var(--orange);padding:20px;max-width:none}
.slide .txt h1{font-size:2rem}
}
@media(max-width:860px){
.slider{height:690px}
.slide{align-items:flex-start;padding:330px 0 0}
.slide::before{height:330px}
.slide .txt{margin:0 -20px;width:calc(100% + 40px);border-top:5px solid var(--orange);padding:22px 20px 60px;min-height:360px}
}