/* Shared Kolangkaling theme. No dependency on a new Vite build. */
:root { --brand:#214d35; --brand-2:#143927; --ink:#193428; --muted:#647269; --line:#dce5dc; --soft:#f6f7f2; --fresh:#d2ee93; --ease:cubic-bezier(.22,1,.36,1); }
body { background:var(--soft); -webkit-font-smoothing:antialiased; }
::selection { background:#d2ee93; color:#193428; }
.container { width:min(1280px,calc(100% - 64px)); }
main { min-height:60vh; }
main:focus { outline:none; }
section { padding:88px 0; scroll-margin-top:100px; }
h1,h2,h3 { font-weight:600; letter-spacing:-.045em; text-wrap:balance; }
h1 { font-size:clamp(40px,4.6vw,66px); line-height:1.08; margin:20px 0 24px; }
h2 { font-size:clamp(29px,3.2vw,44px); line-height:1.15; }
h3 { line-height:1.3; letter-spacing:-.025em; }
p { line-height:1.75; }
.lead { font-size:16px; line-height:1.8; }
.eyebrow { font-size:11px; letter-spacing:.2em; font-weight:800; }
.section-head { gap:40px; margin-bottom:36px; }
.section-head > * { min-width:0; }
.section-head > .lead { max-width:400px; }
.badge { background:#eef4e6; border:1px solid #e0e9d5; padding:7px 12px; font-size:10px; letter-spacing:.12em; }
.site-header { background:rgba(250,251,247,.96); border-color:rgba(33,77,53,.1); transition:box-shadow .25s,background .25s; }
.site-header.is-scrolled { background:rgba(250,251,247,.98); box-shadow:0 5px 24px #1934280c; }
.nav { min-height:88px; gap:24px; }
.brand { min-width:0; font-size:18px; letter-spacing:-.025em; }
.brand-mark { box-shadow:none; border:1px solid var(--line); border-radius:50%; }
.brand small { font-size:9px; letter-spacing:.14em; font-weight:700; }
.nav-links { gap:22px; font-size:13px; font-weight:700; }
.nav-links a { position:relative; padding:14px 0; }
.nav-links a::after { content:""; position:absolute; bottom:6px; left:0; width:100%; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
.nav-links a:hover::after,.nav-links a[aria-current=page]::after { transform:scaleX(1); }
.button { min-height:48px; padding:12px 22px; border-radius:12px; font-size:13px; font-weight:800; cursor:pointer; transition:transform .25s var(--ease),box-shadow .25s,background .25s; }
.button.primary { box-shadow:0 5px 12px #19342812; }
.button.primary:hover { background:var(--brand-2); box-shadow:0 8px 20px #19342822; }
.button:hover { transform:translateY(-2px); }
.button:active { transform:translateY(0); }
.button:disabled { opacity:.6; cursor:not-allowed; transform:none; }
:where(a,button,input,textarea,select,summary):focus-visible { outline:3px solid #72a24a; outline-offset:4px; }
.skip-link { position:fixed; left:20px; top:-90px; z-index:150; background:#fff; color:var(--brand); padding:14px 22px; border-radius:8px; }
.skip-link:focus { top:12px; }
.hamburger summary { border-radius:12px; }
.hamburger-lines span { transition:transform .2s,opacity .2s; }
.hamburger[open] .hamburger-lines span:first-child { transform:translateY(7px) rotate(45deg); }
.hamburger[open] .hamburger-lines span:nth-child(2) { opacity:0; }
.hamburger[open] .hamburger-lines span:last-child { transform:translateY(-7px) rotate(-45deg); }
.mobile-menu { border-radius:16px; padding:8px; }
.mobile-menu a,.mobile-menu button { border-radius:8px; }
.mobile-menu [aria-current=page] { background:#eef4e6; color:var(--brand); }
/* A clear editorial hero, keeping the administrator's image and copy. */
.hero { background:#173e2a; padding:0; color:#fff; }
.hero::before { background:radial-gradient(ellipse at 0 0,#32624566,transparent 65%); }
.hero::after { display:none; }
.hero-grid { display:grid; grid-template-columns:1.12fr 1fr; gap:64px; align-items:center; min-height:650px; padding:64px 0 54px; }
.hero-content { min-width:0; }
.hero .eyebrow { color:var(--fresh); text-shadow:none; line-height:1.8; }
.hero h1 { font-size:clamp(44px,4.8vw,70px); line-height:1.06; letter-spacing:-.05em; max-width:660px; margin:24px 0; }
.hero-copy { color:#d3dfd6; font-size:16px; line-height:1.85; max-width:520px; }
.hero-actions { gap:12px; margin-top:30px; }
.hero .button.primary { background:var(--fresh); color:#173e2a; box-shadow:none; }
.hero .button.primary:hover { background:#e0f7b6; }
.hero .button.light { border-color:#ffffff50; background:#ffffff05; }
.hero .button.light:hover { background:#ffffff15; }
.hero-explore { display:inline-flex; gap:20px; align-items:center; margin-top:30px; color:#d3dfd6; font-size:12px; }
.hero-explore span { display:grid; place-items:center; width:28px; height:28px; border:1px solid #ffffff35; border-radius:50%; }
.hero-visual { position:relative; min-width:0; padding-bottom:38px; }
.hero-photo { position:relative; width:100%; height:480px; object-fit:cover; border-radius:140px 24px 24px 24px; background:#2d513c; }
.hero-photo-fallback { position:absolute; inset:0 0 38px; display:flex; flex-direction:column; justify-content:center; padding:50px; gap:28px; overflow:hidden; border-radius:140px 24px 24px 24px; background:radial-gradient(ellipse at 90% 0,#b9d98a50,transparent 60%),#2d513c; }
.hero-photo-fallback::after { content:""; position:absolute; width:220px; height:330px; border:1px solid #d2ee9340; border-radius:100% 0 100% 0; right:-30px; bottom:-70px; transform:rotate(-20deg); }
.hero-photo-fallback strong { font-size:32px; line-height:1.2; letter-spacing:-.04em; color:#e9f2dd; }
.hero-photo-fallback span { font-size:11px; letter-spacing:.14em; color:#d2ee93; }
.hero-photo.is-unavailable { opacity:0; }
.hero-photo-label { position:absolute; top:28px; right:24px; color:#fff; background:#143927e6; border:1px solid #ffffff30; border-radius:30px; padding:9px 12px; font-size:9px; font-weight:800; letter-spacing:.1em; }
.hero-note { position:absolute; bottom:0; left:-22px; right:30px; display:flex; gap:16px; align-items:center; padding:22px; background:#f2f5e9; color:var(--ink); border:1px solid #fff; border-radius:18px; box-shadow:0 15px 35px #0c281e22; }
.hero-note-icon { flex:0 0 44px; height:44px; display:grid; place-items:center; background:#d2ee93; border-radius:50%; font-size:26px; }
.hero-note strong { font-size:16px; letter-spacing:-.02em; }
.hero-note p { margin:4px 0 0; font-size:12px; line-height:1.6; color:var(--muted); }
.hero-path { position:relative; display:flex; justify-content:space-between; gap:20px; padding:24px 0; border-top:1px solid #ffffff24; font-size:12px; color:#d3dfd6; }
.hero-path span { display:flex; align-items:center; gap:14px; }
.hero-path b { font-size:10px; color:var(--fresh); letter-spacing:.05em; }
/* Public pages and operational overview. */
.operation-dashboard-section { padding:58px 0 72px; background:var(--soft); }
.operation-dashboard-section .dashboard-board { border:1px solid var(--line); border-radius:24px; box-shadow:0 14px 50px #19342809; }
.dashboard-head { padding:28px; background:#fff; align-items:center; }
.dashboard-title { font-size:clamp(22px,2.4vw,32px); line-height:1.2; letter-spacing:-.035em; text-transform:none; }
.dashboard-subtitle { font-size:13px; font-weight:500; }
.dashboard-date { background:#eef4e6; color:var(--brand); border:1px solid #dfe8d6; min-width:190px; font-size:12px; }
.dashboard-date span { color:#45602f; font-size:9px; letter-spacing:.12em; }
.dashboard-section { padding:22px 28px; }
.dashboard-label { background:#eef4e6; color:var(--brand); font-size:10px; font-weight:800; padding:8px 12px; }
.status-card { border-color:var(--line); border-radius:16px; padding:16px; background:#fafbf7; }
.status-card small { font-weight:700; color:var(--muted); }
.status-icon { background:#e9f0df; border-radius:50%; }
.card,.service { border-radius:20px; border-color:var(--line); box-shadow:0 4px 18px #19342805; transition:box-shadow .3s,border-color .3s; }
.card:hover,.service:hover { border-color:#afc4a8; box-shadow:0 16px 35px #19342810; }
.card-body { padding:28px; }
.card h3 { overflow-wrap:anywhere; }
.card img { transition:filter .4s; }
.card:hover img { filter:saturate(1.1); }
.service { padding:30px; }
.service.feature { background:var(--brand); }
.service.feature p { color:#d7e3d9; }
.service.feature .icon { color:var(--fresh); }
.photo-stack img { border-radius:22px; }
.footer { padding:58px 0 24px; background:#153726; }
.footer h3 { font-size:26px; margin-top:0; }
.footer p,.footer a { color:#c3d1c6; font-size:14px; }
.footer strong { font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.footer-bottom { display:flex; justify-content:space-between; gap:16px; border-top:1px solid #ffffff20; margin-top:32px; padding-top:22px; color:#b4c8b9; font-size:11px; }
.whatsapp-float { width:52px; height:52px; background:#248747; box-shadow:0 6px 24px #19342825; border:3px solid #fff; }
/* EMS forms: compact hierarchy, generous controls, readable tables. */
.ems-page,.login-shell { background:radial-gradient(ellipse at 0 0,#e8efdf,transparent 55%),var(--soft); padding:54px 0 80px; }
.ems-page h1,.login-shell h1 { font-size:clamp(32px,3.6vw,48px); max-width:800px; }
.ems-layout { grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:start; }
.ems-menu { position:sticky; top:112px; padding:12px; border-radius:18px; box-shadow:none; }
.ems-menu a,.ems-menu form button { font-size:13px; font-weight:700; }
.ems-menu form button:hover { background:#f0f4eb; }
.ems-panel { min-width:0; border-radius:22px; padding:30px; box-shadow:0 8px 35px #19342806; }
.ems-panel h2 { font-size:clamp(25px,2.6vw,34px); margin:14px 0; }
.ems-panel h3 { font-size:23px; }
.ems-panel .lead { margin-top:10px; font-size:14px; }
.waste-form,.maintenance-card { background:#f7f9f4; padding:24px; border-radius:18px; }
.input,textarea,.period-field input { border-color:#ccd8ca; border-radius:10px; min-height:48px; background:#fff; color:var(--ink); font-size:14px; transition:border-color .2s,box-shadow .2s; }
.input:focus,textarea:focus,.period-field input:focus { border-color:#608551; box-shadow:0 0 0 3px #b7d69a35; outline:none; }
input::placeholder,textarea::placeholder { color:#778379; font-weight:400; opacity:1; }
input[type=checkbox],input[type=radio] { accent-color:var(--brand); }
.field,.label { font-size:12px; color:#43564a; font-weight:700; }
.upload { background:#f7f9f4; border-color:#b8c8af; padding:18px; font-size:13px; }
input[type=file] { font-size:12px; width:100%; }
input[type=file]::file-selector-button { border:1px solid #ccdac4; border-radius:8px; background:#eaf1e2; color:var(--brand); padding:9px 10px; margin:8px 8px 8px 0; cursor:pointer; font:inherit; font-weight:700; }
.table { font-size:13px; }
.table th { background:#f0f4eb; color:#43564a; font-size:11px; font-weight:800; }
.table th,.table td { padding:15px 12px; }
.table tbody tr:hover { background:#f8faf4; }
.table-wrap { max-width:100%; border-radius:12px; }
.table-wrap:focus-visible { outline:2px solid #72a24a; outline-offset:3px; }
.report-photos { grid-template-columns:repeat(2,88px); }
.login-grid { align-items:stretch; }
.login-card { border-radius:22px; padding:30px; box-shadow:0 10px 35px #19342808; display:flex; flex-direction:column; }
.login-card h2 { font-size:27px; margin-top:16px; }
.login-card > .badge { align-self:flex-start; }
.login-form { margin-top:auto; padding-top:20px; }
.photo-choice:has(input:checked) { border-radius:12px; outline:2px solid #54793c; outline-offset:4px; background:#f0f5e9; }
.maintenance-notification { bottom:92px; border-radius:18px; box-shadow:0 12px 48px #19342820; }
.report-lightbox { z-index:120; }
@keyframes site-reveal { from { opacity:.15; transform:translateY(18px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:no-preference) {
    .hero-content { animation:site-reveal .8s var(--ease) both; }
    .hero-visual { animation:site-reveal 1s var(--ease) .1s both; }
    .reveal-in { animation:site-reveal .65s var(--ease) both; }
    .maintenance-notification,.hamburger[open] .mobile-menu { animation:site-reveal .35s var(--ease); }
}
@media (max-width:1100px) {
    .brand small { max-width:225px; font-size:8px; }
    .nav-links { gap:15px; }
    .hero-grid { gap:36px; }
    .hero-photo { height:450px; }
}
@media (max-width:920px) {
    .container { width:calc(100% - 40px); }
    .nav { min-height:76px; }
    .hero-grid { grid-template-columns:1fr 1fr; gap:28px; min-height:0; padding:48px 0; }
    .hero h1 { font-size:44px; }
    .hero-photo { height:410px; border-top-left-radius:90px; }
    .hero-note { left:-12px; right:12px; padding:16px; }
    .hero-photo-label { right:12px; font-size:8px; }
    .hero-path { font-size:10px; gap:12px; }
    .ems-layout { grid-template-columns:1fr; }
    .ems-menu { position:static; display:flex; gap:8px; align-items:center; }
    .ems-menu a,.ems-menu form { flex:1; }
    .section-head > .lead { max-width:none; }
    .footer-grid { display:grid; grid-template-columns:1fr 1fr; }
    .footer-grid > :first-child { grid-column:1/-1; }
}
@media (max-width:640px) {
    .container { width:calc(100% - 32px); }
    section { padding:48px 0; }
    .brand { font-size:16px; gap:9px; }
    .brand-mark { width:40px; height:40px; }
    .brand small { max-width:215px; font-size:7px; letter-spacing:.07em; }
    .nav { gap:12px; min-height:72px; }
    .hero-grid { grid-template-columns:1fr; gap:34px; padding:40px 0 28px; }
    .hero h1 { font-size:clamp(38px,10.5vw,52px); }
    .hero-copy { font-size:14px; }
    .hero-photo { height:310px; border-radius:80px 18px 18px; }
    .hero-photo-fallback { border-radius:80px 18px 18px; padding:36px; gap:22px; }
    .hero-photo-fallback strong { font-size:28px; }
    .hero-note { left:12px; right:12px; }
    .hero-path { flex-direction:column; gap:12px; padding:20px 0 26px; font-size:12px; }
    .button { white-space:normal; text-align:center; padding:12px 16px; }
    .hero-actions .button { flex:1; }
    .hero-explore { margin-top:22px; }
    .dashboard-head,.dashboard-section { padding:20px 16px; }
    .dashboard-date { min-width:0; }
    .section-head { margin-bottom:24px; }
    .ems-page,.login-shell { padding:32px 0 48px; }
    .ems-panel,.login-card { padding:20px 16px; border-radius:18px; }
    .waste-form,.maintenance-card { padding:16px; }
    .maintenance-fields { grid-template-columns:minmax(0,1fr); }
    .maintenance-notification { right:16px; bottom:84px; }
    .whatsapp-float { right:16px; bottom:18px; width:48px; height:48px; }
    .footer-grid { gap:20px; }
    .footer-bottom { flex-direction:column; gap:6px; }
    .photo-stack img,.photo-stack img:first-child { height:180px; }
}
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { animation:none!important; transition:none!important; }
}