/* Visual Pixel brand: rice-paper surfaces, teal accents, and accessible contrast. */
:root { --site-accent: #4ed9c4; --site-accent-strong: #2ed3ba; --site-sand: #fff; --site-cream: #f3fcfb; --site-ink: #153732; }
.app-toggle:not(.app-toggle--ghost), .pj-btn--sun, .pj-btn--city { background: #4ed9c4; color: #fff; }
.app-toggle:not(.app-toggle--ghost):hover, .pj-btn--sun:hover, .pj-btn--city:hover { background: #2ed3ba; color: #fff; }
.bottom-menu-item.active, .bottom-menu-item.city-hover { background: #ecfbf9; color: #2ed3ba; }
.pj-brand { color: #153732; }
/* The header logo follows the header's day/night text colour; it was fixed dark plum and disappeared at night. */
.pj-header .pj-brand { color: inherit; }
/* The footer is always dark, so its monogram is white. */
.pj-footer-brand .pj-brand { color: #fff; }
.app-chip { color: #fff; }
::selection { background: #dcf8f4; color: #13584e; }
.app-chip .pj-logox--city { height: 29px; }
/* Connected Kampung: timber, rice-paper, forest green and circuit teal. */
:root{--site-accent:#187565;--site-accent-strong:#125748;--site-sand:#faf7ec;--site-cream:#edf2e3;--site-ink:#213e35}
.kampung-vignette{width:100%;height:100%;min-height:240px;position:relative;display:grid;place-items:center;overflow:hidden;border-radius:18px;background:#e8f0df}
.kampung-vignette>img{width:100%;height:100%;max-height:650px;object-fit:contain}
.kampung-vignette-controls{position:absolute;bottom:16px;display:flex;gap:10px}.kampung-vignette-controls button{border:1px solid #187565;border-radius:50%;width:44px;height:44px;background:#fffdf2;color:#174f45;cursor:pointer}.kampung-vignette-controls button[aria-pressed=true]{background:#187565;color:#fff}
#boot-sky{background:#edf2e3!important;color:#214e43!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
#boot-sky .kampung-boot-art{width:min(360px,75vw);border-radius:30px;overflow:hidden;box-shadow:0 24px 70px #214e4318}
#boot-sky .kampung-boot-art img{display:block;width:100%;height:auto}
#boot-sky .site-preloader-word{position:static!important;transform:none!important;font:700 clamp(20px,5vw,32px)/1.3 Arial,sans-serif;letter-spacing:5px;text-align:center}
#boot-sky .site-preloader-word span{display:block;font:11px/2.4 monospace;letter-spacing:3px}
#boot-sky .site-preloader-status{position:static!important;color:#187565!important;letter-spacing:2px;font:11px monospace}
.pj-site{--site-cream:#edf2e3;--site-sand:#faf7ec;background-color:#faf7ec}
.pj-plaque{letter-spacing:.12em}.pj-inner-cta-box{background:#e6eddb}
@media(prefers-reduced-motion:reduce){#boot-sky *{animation:none!important;transition:none!important}}
#boot-sky .site-preloader-word{display:block!important;color:#214e43!important;opacity:1!important;filter:none!important}
#boot-sky .site-preloader-word span{display:block!important}
/* One village control palette across normal, selected, hover and keyboard states. */
:is(body, body.night) .app-shell{--village-control:#187565;--village-control-hover:#125748;--village-control-active:#71e1d0;--village-control-ink:#123e35}
:is(body, body.night) .app-shell .app-toggle,:is(body, body.night) .app-shell .weather-control__button{background:#187565;color:#fffdf2;border-color:#67b5a3}
:is(body, body.night) .app-shell .app-toggle:hover,:is(body, body.night) .app-shell .weather-control__button:hover{background:#125748;color:#fffdf2;border-color:#71e1d0}
:is(body, body.night) .app-shell .app-toggle[aria-pressed=true],:is(body, body.night) .app-shell .weather-control__button[aria-pressed=true],:is(body, body.night) .app-shell .bottom-menu-item.active,:is(body, body.night) .app-shell .bottom-menu-item.city-hover{background:#71e1d0;color:#123e35;border-color:#187565;box-shadow:0 6px 20px #18756533}
:is(body, body.night) .app-shell .night-mode-toggle-3d .toggle-track{background:linear-gradient(135deg,#e8f1d9,#bde8d8);border-color:#499c86}
:is(body, body.night) .app-shell .night-mode-toggle-3d[data-mode=night] .toggle-track{background:linear-gradient(135deg,#215b50,#102e29);border-color:#71e1d0}
:is(body, body.night) .app-shell button:focus-visible,.cm-btn:focus-visible,.cm-nav__btn:focus-visible,.cm-close:focus-visible{outline:2px solid #71e1d0;outline-offset:3px}
/* Work footer: the same connected kampung as the homepage. */
.pj-footer{background:#173d37;margin-top:3rem;color:#f3f2e8}
.ls-work-village{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;background:#e9ede2;color:#263f40;overflow:hidden}
.ls-work-village>img{display:block;width:100%;height:360px;object-fit:contain;background:#b9dee5}
.ls-work-village-copy{padding:40px clamp(24px,5vw,80px)}
.ls-work-village-copy h2{font-family:var(--pj-font-display);font-size:clamp(28px,3.3vw,48px);line-height:1.1;letter-spacing:-.035em;margin:18px 0}
.ls-work-village-copy p{color:#4d6460;line-height:1.7;max-width:440px;margin-bottom:24px}
.ls-work-village-copy .pj-plaque{color:#8f3d27}
.pj-footer .pj-footer-col-title{color:#fcb325}
@media(max-width:767px){.ls-work-village{grid-template-columns:1fr}.ls-work-village>img{height:280px}.ls-work-village-copy{padding:28px 24px 36px}.ls-work-village-copy .pj-btn{white-space:normal}}

/* Shared Classic Site footer and loading screen palette. */
.pj-footer{background:#173d37!important;color:#f3f2e8}
.pj-footer .pj-footer-col-title{color:#fcb325!important}
.ls-work-village-copy .pj-plaque{color:#187565}
#boot-sky{background:#173d37!important;color:#f3f2e8!important}
#boot-sky .kampung-boot-art{background:#edf2e3;box-shadow:0 24px 70px #081a1740}
#boot-sky .site-preloader-word{color:#f3f2e8!important}
#boot-sky .site-preloader-word span{color:#fcb325}
#boot-sky .site-preloader-status{color:#71e1d0!important}