/* Water information uses the portal's local Sarabun font, brand and navigation. */
.water-info{background:var(--paper);color:var(--ink);font-family:Sarabun,system-ui,sans-serif;line-height:1.75}
.water-info .wrap{width:min(100% - 56px,1184px);margin-inline:auto}
.water-hero{width:min(100% - 56px,1184px);margin:30px auto 0;background:var(--green);color:#fff;border-radius:24px;padding:36px 40px}
.water-hero .wrap{width:100%}
.water-hero .back{display:inline-block;color:#d6e8dc;font-size:13px;margin-bottom:24px;text-underline-offset:4px}
.water-info .eyebrow{display:block;font-size:12px;font-weight:600;letter-spacing:.3px;color:#8c7743;margin:0 0 8px}
.water-hero .eyebrow{color:var(--gold)}
.water-hero h1{font-size:38px;line-height:1.4;letter-spacing:-1px;margin:0 0 16px}
.water-hero p{color:#d3e1d9;margin:0;line-height:1.85}
.water-hero nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.water-hero nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid #ffffff50;border-radius:9px;font-size:14px;font-weight:600;color:#fff}
.water-hero nav a:first-child{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.water-hero nav a:hover{background:#ffffff20}
.water-hero nav a:first-child:hover{background:#efd096}
.water-info main.wrap{padding:24px 0 0}
.water-info .card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;margin-bottom:24px;scroll-margin-top:20px;min-width:0;overflow-wrap:anywhere}
.water-info h2{font-size:25px;line-height:1.5;margin:0 0 12px;letter-spacing:-.5px}
.water-info h3{font-size:17px;line-height:1.6;margin:0 0 8px}
.water-info .card p{margin:8px 0 16px}
.water-info .note{font-size:13px;color:#64766e;background:#f0f3eb;border-left:3px solid #b89a51;padding:14px 16px;border-radius:6px}
.water-steps{list-style:none;counter-reset:step;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}
.water-steps li{counter-increment:step;position:relative;padding-left:48px;min-width:0}
.water-steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;color:#9aaa97;font-size:25px;font-weight:600;line-height:1.4}
.water-info .water-steps p{color:var(--muted);font-size:14px;line-height:1.85;margin:0}
.water-info .checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 32px;padding-left:22px;margin:18px 0 24px;color:#64766e;font-size:14px}
.water-details{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start}
.water-info .water-table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px;margin:16px 0 20px}
.water-info table{border-collapse:collapse;width:100%;min-width:480px;font-size:14px}
.water-info caption{text-align:left;font-weight:700;padding:14px 16px;color:var(--green)}
.water-info th,.water-info td{border-bottom:1px solid var(--line);padding:12px 16px;text-align:left}
.water-info thead{background:#edf2e9;color:var(--green)}
.water-info tbody th{font-weight:400}
.water-info tbody tr:last-child>*{border-bottom:0}
.water-info td:last-child,.water-info thead th:last-child{text-align:right}
.water-info .water-table-scroll::-webkit-scrollbar{height:8px}
.water-info .water-table-scroll::-webkit-scrollbar-thumb{background:#b3c2b7;border-radius:8px}
.water-info .button{min-height:46px;background:var(--green);color:white;border-radius:9px;font-size:14px;padding:12px 20px;text-align:center}
.water-info .button:hover{background:var(--deep)}
.water-info .secondary{background:#fff;color:var(--green);border:1px solid #cbd8cf}
.water-info .secondary:hover{background:#edf2e9}
.water-info .contact{background:#edf0e6}
.water-info .contact .button{margin:6px 0 18px}
.water-info .small{font-size:12px;color:var(--muted);line-height:1.7}
.water-info .text-link{text-decoration:underline;text-underline-offset:4px;color:var(--green);display:inline-block;min-height:44px;padding-block:10px}
.water-info footer{padding:24px 0 calc(30px + env(safe-area-inset-bottom,0px));font-size:12px;color:var(--muted)}
.water-info [tabindex]:focus-visible{outline:3px solid #b7852d;outline-offset:4px}
@media(max-width:900px){.water-details{grid-template-columns:minmax(0,1fr);gap:0}.water-steps{gap:24px}.water-info .checklist{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.water-info .wrap,.water-hero{width:calc(100% - 32px)}.water-hero{margin-top:18px;padding:26px 24px;border-radius:19px}.water-hero .wrap{width:100%}.water-hero h1{font-size:30px}.water-hero nav{gap:8px}.water-hero nav a{font-size:13px;padding:9px 12px}.water-info .card{padding:24px 20px;border-radius:18px;margin-bottom:18px}.water-info h2{font-size:22px}.water-steps{grid-template-columns:minmax(0,1fr)}.water-info .header-inner{padding-top:calc(11px + env(safe-area-inset-top,0px))}.water-info .button{max-width:100%}.water-info main.wrap{padding-top:18px}}
@media(max-width:380px){.water-info .card{padding:22px 16px}.water-info .brand small{max-width:160px}.water-info .button{width:100%}}
@media print{.water-info .app-header,.water-hero nav,.water-info .button,.water-info .skip-link{display:none}.water-hero{background:#fff;color:#000;padding:0}.water-hero p,.water-hero .eyebrow{color:#000}.water-info .wrap,.water-hero{width:100%}.water-info .card{break-inside:avoid;box-shadow:none}.water-details{display:block}.water-table-scroll{overflow:visible!important}.water-info table{min-width:0}}