/* ===================================================
   NHÀ MÁY NƯỚC THỦY LONG — Page-specific styles
   Theme: Blue Water
   =================================================== */

:root{
    --bg:#f5f9fd;--bg2:#eaf2fa;--bg3:#dde9f5;--bg4:#d0e2f0;
    --blue:#1a5fb5;--blue-l:#4a9dd9;--blue-d:#0d3d80;--blue-bg:rgba(26,95,181,.04);
    --teal:#1a8eaa;--teal-l:#38b2cc;
    --dark:#081e3f;--dark2:#0e2d54;--dark3:#153a68;
    --gold:#c8a85a;--gold-l:#d4b86c;
    --txt:#0e1e38;--txt-m:#4a6080;--txt-s:#7a90aa;
    --brd:rgba(26,95,181,.1);--brd2:rgba(26,95,181,.2);
    --white:#ffffff;
    --shadow:0 4px 20px rgba(10,22,40,.06);--shadow-l:0 12px 40px rgba(10,22,40,.1);
}
body{background:var(--bg);color:var(--txt)}
::-webkit-scrollbar-thumb{background:var(--blue)}
::selection{background:rgba(26,95,181,.15);color:var(--blue-d)}

/* LOADER */
.loader{background:var(--white)}
.loader-icon{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--teal));display:flex;align-items:center;justify-content:center;animation:lpulse 2s ease-in-out infinite}
.loader-icon svg{width:28px;height:28px;color:white}
.loader-txt{color:var(--blue)}


/* BREADCRUMB theme */
.breadcrumb{border-bottom-color:rgba(26,95,181,.06)}
.breadcrumb a{color:var(--blue)}
.breadcrumb a:hover{color:var(--blue-d)}

/* NAV theme */
.nav.scrolled{border-bottom:1px solid rgba(26,95,181,.06)}
.nav-brand .name{color:var(--dark)}
.nav-toggle span{background:var(--dark)}
.nav-links a:hover{color:var(--blue)}
.nav-links a::after{background:linear-gradient(90deg,var(--blue),var(--teal))}
.nav-cta{background:linear-gradient(135deg,var(--blue),var(--teal)) !important;box-shadow:0 4px 20px rgba(26,95,181,.2) !important}
.nav-cta:hover{box-shadow:0 8px 30px rgba(26,95,181,.3) !important}

/* MEGA DROPDOWN theme */

/* HERO */
.hero{background:var(--bg2)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;width:100%;min-height:100vh}
.hero-left{display:flex;flex-direction:column;justify-content:center;padding:0 clamp(30px,5vw,80px);z-index:2}
.hero-right{position:relative;overflow:hidden}
.hero-right img{width:100%;height:100%;object-fit:cover;animation:hscale 25s ease-in-out infinite alternate}
.hero-right::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--bg2) 0%,transparent 15%)}
.hero-right::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(240,246,250,.3) 0%,transparent 30%)}
.hero-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:0;background:rgba(26,95,181,.06);border:1px solid var(--brd);font-family:var(--ff-h);font-size:.68rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--blue);margin-top:40px;margin-bottom:24px;width:fit-content;opacity:0;animation:hfade .8s ease .2s forwards}
.hero-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:dotpulse 2s ease-in-out infinite}
.hero-h1{font-family:var(--ff-h);font-size:clamp(2.2rem,4.5vw,4rem);font-weight:800;line-height:1.1;color:var(--dark);margin-bottom:12px;opacity:0;animation:hfade .8s ease .4s forwards}
.hero-h1 .blue{color:var(--blue)}
.hero-h1 .teal{color:var(--teal)}
.hero-slogan{font-family:var(--ff-a);font-size:clamp(1rem,1.8vw,1.3rem);font-style:italic;color:var(--blue);margin-bottom:18px;opacity:0;animation:hfade .8s ease .6s forwards}
.hero-desc{font-size:.9rem;color:var(--txt-m);max-width:460px;line-height:1.9;margin-bottom:32px;opacity:0;animation:hfade .8s ease .8s forwards}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:hfade .8s ease 1s forwards}
.btn-blue{display:inline-flex;align-items:center;gap:10px;padding:14px 36px;border-radius:0;background:linear-gradient(135deg,var(--blue),var(--teal));color:white;font-family:var(--ff-h);font-size:.75rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;border:none;cursor:pointer;box-shadow:0 6px 25px rgba(26,95,181,.25);transition:all .4s var(--ease)}
.btn-blue:hover{transform:translateY(-3px);box-shadow:0 10px 35px rgba(26,95,181,.35)}
.btn-outline{display:inline-flex;align-items:center;gap:10px;padding:14px 36px;border-radius:0;background:transparent;border:1.5px solid var(--brd2);color:var(--dark);font-family:var(--ff-h);font-size:.75rem;font-weight:500;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .4s}
.btn-outline:hover{border-color:var(--blue);color:var(--blue)}

/* STATS theme */
.stats{background:linear-gradient(135deg,var(--blue),var(--teal));padding:48px 5%;border-radius:0;max-width:1200px;margin:-40px auto 0;position:relative;z-index:5;box-shadow:0 16px 50px rgba(26,95,181,.25);color:white}
.stat-n{font-family:var(--ff-h);font-size:clamp(2rem,3.5vw,2.8rem);font-weight:800;color:white;line-height:1}
.stat-n span{font-size:.45em;font-weight:500;opacity:.7}
.stat-l{font-family:var(--ff-h);font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.65);margin-top:6px}

/* SECTION TOKENS */
.sec-tag{color:var(--blue);background:rgba(26,95,181,.06);border-color:var(--brd)}
.sec-h2 em{color:var(--blue)}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center;margin-top:48px}
.about-img .badge .yr{color:var(--blue)}
.about-text h3{color:var(--dark)}
.about-text p em{color:var(--blue)}
.chip:hover{border-color:var(--blue);box-shadow:0 4px 16px rgba(26,95,181,.08)}
.chip svg{color:var(--blue)}

/* FEATURES */
.feat-bg{background:var(--bg2)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.feat-card{padding:clamp(24px,3vw,36px);border-radius:0;background:var(--white);border:1px solid var(--brd);text-align:center;transition:all .5s var(--ease);position:relative;overflow:hidden;z-index:1}
.feat-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--teal));border-radius:0;transform:scaleX(0);transition:transform .5s var(--ease)}
.feat-card:hover::before{transform:scaleX(1)}
.feat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-l);border-color:var(--brd2)}
.feat-icon{width:52px;height:52px;border-radius:0;background:linear-gradient(135deg,rgba(26,95,181,.08),rgba(0,137,123,.06));display:flex;align-items:center;justify-content:center;margin:0 auto 16px;transition:all .4s var(--ease)}
.feat-icon svg{width:22px;height:22px;color:var(--blue);transition:all .4s var(--ease)}
.feat-card h3{font-family:var(--ff-h);font-size:.92rem;font-weight:700;color:var(--dark);margin-bottom:8px}
.feat-card p{font-size:.82rem;color:var(--txt-m);line-height:1.7}

/* PROCESS */
.proc-flow{margin-top:48px;position:relative}
.proc-flow::before{content:'';position:absolute;left:32px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--blue),var(--teal));border-radius:0;opacity:.15}
.proc-step{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:flex-start;padding:28px 0}
.proc-step:not(:last-child){border-bottom:1px solid var(--brd)}
.proc-num{width:64px;height:64px;border-radius:50%;border:2px solid var(--brd);display:flex;align-items:center;justify-content:center;font-family:var(--ff-h);font-size:.85rem;font-weight:700;color:var(--blue);background:var(--white);position:relative;z-index:2;transition:all .5s var(--ease)}
.proc-step:hover .proc-num{border-color:var(--blue);background:linear-gradient(135deg,var(--blue),var(--teal));color:white;box-shadow:0 6px 20px rgba(26,95,181,.25)}
.proc-body h4{font-family:var(--ff-h);font-size:1rem;font-weight:700;color:var(--dark);margin-bottom:6px}
.proc-body p{font-size:.85rem;color:var(--txt-m);line-height:1.75;max-width:600px}

/* PRODUCTS */
.prod-bg{background:var(--bg2)}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.prod-card{background:var(--white);border-radius:0;border:1px solid var(--brd);overflow:hidden;transition:all .55s var(--ease)}
.prod-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-l);border-color:var(--brd2)}
.prod-img{position:relative;height:220px;overflow:hidden}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.prod-card:hover .prod-img img{transform:scale(1.06)}
.prod-img .prod-tag{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--ff-h);font-size:.68rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);padding:5px 14px;border-radius:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px)}
.prod-body{padding:24px}
.prod-body h3{font-family:var(--ff-h);font-size:1rem;font-weight:700;color:var(--dark);margin-bottom:4px}
.prod-body .prod-sub{font-family:var(--ff-h);font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--blue);margin-bottom:12px;font-weight:600}
.prod-body p{font-size:.82rem;color:var(--txt-m);line-height:1.7;margin-bottom:16px}
.prod-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-h);font-size:.68rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);transition:gap .4s}
.prod-link:hover{gap:14px;color:var(--teal)}
.prod-link svg{width:14px;height:14px}

/* QUALITY */
.quality-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center;margin-top:48px}
.quality-img{border-radius:0;overflow:hidden;box-shadow:var(--shadow-l)}
.quality-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cert-list{list-style:none}
.cert-list li{display:flex;align-items:flex-start;gap:16px;padding:18px 0;border-bottom:1px solid var(--brd);transition:all .3s}
.cert-list li:first-child{padding-top:0}
.cert-list li:last-child{border-bottom:none}
.cert-list li:hover{padding-left:6px}
.cl-icon{width:42px;height:42px;min-width:42px;border-radius:0;background:linear-gradient(135deg,rgba(26,95,181,.08),rgba(0,137,123,.06));display:flex;align-items:center;justify-content:center}
.cl-icon svg{width:18px;height:18px;color:var(--blue)}
.cl-text h4{font-family:var(--ff-h);font-size:.85rem;font-weight:700;color:var(--dark);margin-bottom:4px}
.cl-text p{font-size:.78rem;color:var(--txt-m);line-height:1.6;margin:0}

/* QUOTE theme */
.quote-sec{background:var(--bg2)}
.quote-sec::before{color:rgba(26,95,181,.04)}
.quote-inner .q-tag{color:var(--blue)}
.quote-inner blockquote{color:var(--dark)}
.quote-inner cite{color:var(--blue)}
.quote-inner .q-line{background:linear-gradient(90deg,var(--blue),var(--teal))}

/* CTA theme */
.cta-sec{background:linear-gradient(135deg,var(--blue),var(--teal))}
.btn-white{color:var(--blue)}

/* FOOTER theme */
.footer{background:var(--dark)}
.ft-social a:hover{background:var(--blue);border-color:var(--blue)}
.ft-col h4{color:var(--blue-l)}
.ft-col ul a:hover{color:var(--blue-l)}

/* CONTACT FORM theme */
.contact-form{border-color:rgba(0,0,0,.07)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,95,181,.1)}
.btn-submit{background:linear-gradient(135deg,var(--blue),var(--teal));box-shadow:0 6px 25px rgba(26,95,181,.2)}
.btn-submit:hover{box-shadow:0 12px 35px rgba(26,95,181,.3)}
.info-card .info-icon{background:rgba(26,95,181,.06)}
.info-card .info-icon svg{color:var(--blue)}
.info-card a{color:var(--blue)}
.contact-hours .highlight{color:var(--blue)}

/* FLOATING CTA theme */
.float-btn.phone{background:var(--blue)}
.float-btn::after{display:none !important}

/* DEMO TAG */
.demo-tag{border-color:var(--brd2);color:var(--blue)}

/* WAVE */
.wave-divider svg{fill:var(--white)}

/* ANIMATIONS */
@keyframes hscale{0%{transform:scale(1)}100%{transform:scale(1.06)}}
@keyframes dotpulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes hfade{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fpulse{0%,100%{box-shadow:0 4px 20px rgba(0,0,0,.15)}50%{box-shadow:0 4px 20px rgba(0,0,0,.3),0 0 0 8px rgba(26,95,181,.12)}}

/* FAQ OVERRIDE */
.faq-item summary { color: var(--blue-d); }
.faq-item summary:hover, .faq-item details[open] summary { color: var(--blue); }

/* AREA SECTION UX REDESIGN */
.area-block {
    background: linear-gradient(145deg, var(--white), var(--bg2));
    border-radius:0;
    padding: 40px;
    box-shadow: var(--shadow);
    border: 1px solid var(--brd);
}
.area-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.area-card {
    background: var(--white);
    padding: 24px;
    border-radius:0;
    border: 1px solid var(--brd);
    transition: all 0.4s var(--ease);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.area-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--teal));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease);
}
.area-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-l);
    border-color: var(--brd2);
}
.area-card:hover::before {
    transform: scaleX(1);
}
.area-card .area-icon {
    width: 48px;
    height: 48px;
    border-radius:0;
    background: linear-gradient(135deg, rgba(26,95,181,.1), rgba(56,178,204,.1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: all 0.4s var(--ease);
}
.area-card:hover .area-icon {
    background: linear-gradient(135deg, var(--blue), var(--teal));
}
.area-card .area-icon svg {
    width: 24px;
    height: 24px;
    color: var(--blue);
    transition: all 0.4s var(--ease);
}
.area-card:hover .area-icon svg {
    color: var(--white);
    transform: scale(1.1);
}
.area-card h4 {
    font-family: var(--ff-h);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}
.area-card p {
    font-size: 0.85rem;
    color: var(--txt-m);
    line-height: 1.6;
}

@media(max-width: 768px) {
    .area-grid {
        grid-template-columns: 1fr;
    }
    .area-block {
        padding: 24px;
    }
}

/* ===== PIPELINE VISUAL FLOW ===== */
.pipeline-flow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-top: 56px;
    flex-wrap: wrap;
}
.pipeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 16px;
    flex: 1;
    min-width: 140px;
    max-width: 180px;
    position: relative;
    transition: all .4s var(--ease);
}
.pipeline-step:hover {
    transform: translateY(-6px);
}
.pipeline-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(26,95,181,.1), rgba(56,178,204,.08));
    border: 2px solid var(--brd);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: all .5s var(--ease);
    position: relative;
    z-index: 2;
}
.pipeline-step:hover .pipeline-icon {
    background: linear-gradient(135deg, var(--blue), var(--teal));
    border-color: var(--blue);
    box-shadow: 0 8px 28px rgba(26,95,181,.3);
}
.pipeline-icon svg {
    width: 24px;
    height: 24px;
    color: var(--blue);
    transition: all .4s var(--ease);
}
.pipeline-step:hover .pipeline-icon svg {
    color: white;
    transform: scale(1.1);
}
.pipeline-num {
    font-family: var(--ff-h);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--teal);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.pipeline-step h4 {
    font-family: var(--ff-h);
    font-size: .85rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
    line-height: 1.3;
}
.pipeline-step p {
    font-size: .75rem;
    color: var(--txt-m);
    line-height: 1.5;
    margin: 0;
}
.pipeline-arrow {
    display: flex;
    align-items: center;
    padding-top: 32px;
    flex-shrink: 0;
}
.pipeline-arrow svg {
    width: 20px;
    height: 20px;
    color: var(--blue);
    opacity: .4;
}
@media(max-width: 900px) {
    .pipeline-flow { flex-direction: column; align-items: center; }
    .pipeline-step { max-width: 100%; flex-direction: row; text-align: left; gap: 16px; padding: 16px 0; }
    .pipeline-step h4, .pipeline-step p { text-align: left; }
    .pipeline-arrow { padding-top: 0; transform: rotate(90deg); }
}

/* ===== SERVICE CARDS ===== */
.svc-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 48px;
}
.svc-card {
    flex: 0 1 calc(33.333% - 14px);
    min-width: 260px;
    background: var(--white);
    border-radius:0;
    border: 1px solid var(--brd);
    padding: clamp(24px, 3vw, 32px);
    transition: all .5s var(--ease);
    position: relative;
    overflow: hidden;
}
.svc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--teal));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease);
}
.svc-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-l);
    border-color: var(--brd2);
}
.svc-card:hover::before {
    transform: scaleX(1);
}
.svc-icon {
    width: 48px;
    height: 48px;
    border-radius:0;
    background: linear-gradient(135deg, rgba(26,95,181,.1), rgba(56,178,204,.08));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: all .4s var(--ease);
}
.svc-card:hover .svc-icon {
    background: linear-gradient(135deg, var(--blue), var(--teal));
}
.svc-icon svg {
    width: 22px;
    height: 22px;
    color: var(--blue);
    transition: all .4s var(--ease);
}
.svc-card:hover .svc-icon svg {
    color: white;
}
.svc-card h3 {
    font-family: var(--ff-h);
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}
.svc-card p {
    font-size: .85rem;
    color: var(--txt-m);
    line-height: 1.7;
    margin-bottom: 16px;
}
.svc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ff-h);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--blue);
    transition: gap .4s, color .3s;
}
.svc-link:hover {
    gap: 12px;
    color: var(--teal);
}

/* ===== WATER NEWS CARDS ===== */
.water-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 0 5%;
}
.water-news-card {
    background: var(--white);
    border-radius:0;
    border: 1px solid var(--brd);
    overflow: hidden;
    transition: all .5s var(--ease);
}
.water-news-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-l);
    border-color: var(--brd2);
}
.wnc-img {
    position: relative;
    height: 200px;
    overflow: hidden;
}
.wnc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}
.water-news-card:hover .wnc-img img {
    transform: scale(1.06);
}
.wnc-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    padding: 4px 12px;
    border-radius:0;
    font-family: var(--ff-h);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--blue);
}
.wnc-body {
    padding: 24px;
}
.wnc-date {
    display: none !important;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    color: var(--txt-s);
    margin-bottom: 10px;
}
.wnc-body h3 {
    font-family: var(--ff-h);
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 10px;
    line-height: 1.4;
}
.wnc-body p {
    font-size: .82rem;
    color: var(--txt-m);
    line-height: 1.7;
    margin-bottom: 16px;
}
@media(max-width: 900px) {
    .water-news-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width: 600px) {
    .water-news-grid { grid-template-columns: 1fr; }
}

/* ===== WATER GALLERY ===== */
.water-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 0 5%;
}
.wg-item {
    position: relative;
    border-radius:0;
    overflow: hidden;
    cursor: pointer;
}
.wg-item.wg-large {
    grid-row: 1 / 3;
}
.wg-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 200px;
    transition: transform .7s var(--ease);
}
.wg-item:hover img {
    transform: scale(1.06);
}
.wg-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(0deg, rgba(8,30,63,.8) 0%, transparent 100%);
    color: white;
    opacity: 0;
    transform: translateY(10px);
    transition: all .4s var(--ease);
}
.wg-item:hover .wg-caption {
    opacity: 1;
    transform: translateY(0);
}
.wg-caption h4 {
    font-family: var(--ff-h);
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.wg-caption p {
    font-size: .75rem;
    opacity: .8;
    margin: 0;
    line-height: 1.4;
}
@media(max-width: 768px) {
    .water-gallery {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .wg-item.wg-large {
        grid-row: auto;
        grid-column: 1 / -1;
    }
}

.svc-more-btn:hover, .doc-view-btn:hover { background: var(--blue) !important; border-color: var(--blue) !important; color: white !important; }

.hero .btn-outline { color: white; border-color: rgba(255,255,255,0.4); }
.hero .btn-outline:hover { background: white; color: var(--blue); border-color: white; }