:root {
    --navy: #031923;
    --navy2: #072b37;
    --teal: #0e7c78;
    --mint: #40d8bd;
    --gold: #e7b84b;
    --cream: #f6f4ee;
    --ink: #10232b;
    --muted: #687982;
    --line: #dfe7e9;
    --white: #fff;
    --shadow: 0 18px 50px rgba(0, 28, 40, .12);
    --radius: 22px;
    --font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: #f7faf9;
    line-height: 1.55;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

button,
input,
textarea,
select {
    font: inherit;
}


/* =========================================================
   SKIP LINK
   ========================================================= */

.skip {
    position: fixed;
    left: 12px;
    top: -80px;
    z-index: 9999;
    background: #fff;
    color: #000;
    padding: 12px 18px;
    border-radius: 8px;
}

.skip:focus {
    top: 12px;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.topbar {
    height: 34px;
    background: #02131b;
    color: #d8e6e9;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3vw;
}

.topbar-inner {
    width: min(1450px, 100%);
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.topbar a {
    opacity: .9;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    position: fixed;
    z-index: 1000;
    top: 34px;
    left: 0;
    right: 0;
    height: 86px;
    display: flex;
    align-items: center;
    padding: 0 3vw;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    transition: .3s;
}

.site-header.scrolled {
    top: 0;
    background: rgba(3, 25, 35, .9);
    backdrop-filter: blur(18px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 290px;
}

.brand img {
    height: 67px;
    width: auto;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .35));
}

.brand-text b {
    font-size: 20px;
    letter-spacing: .04em;
}

.brand-text span {
    display: block;
    font-size: 10px;
    letter-spacing: .12em;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.nav {
    display: flex;
    gap: 25px;
    margin-left: auto;
    align-items: center;
}

.nav > a,
.dropdown > button {
    border: 0;
    background: none;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 31px 0;
    cursor: pointer;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 330px;
    background: #fff;
    color: var(--ink);
    padding: 14px;
    border-radius: 18px;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transition: .2s;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 11px 13px;
    border-radius: 10px;
}

.dropdown-menu a:hover {
    background: #eef6f4;
}

.header-tools {
    display: flex;
    gap: 8px;
    margin-left: 24px;
}

.icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(0, 0, 0, .2);
    color: #fff;
    cursor: pointer;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    min-height: 100vh;
    position: relative;
    display: grid;
    align-items: center;
    color: #fff;
    overflow: hidden;
    background: #031923;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/hero-city.jpg') center / cover no-repeat;
    transform: scale(1.02);
    animation: drift 18s ease-in-out infinite alternate;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(2, 16, 24, .9) 0%,
            rgba(2, 16, 24, .58) 45%,
            rgba(2, 16, 24, .26) 100%
        ),
        linear-gradient(
            0deg,
            rgba(2, 16, 24, .72),
            transparent 48%
        );
}

@keyframes drift {
    to {
        transform: scale(1.08) translateX(-1%);
    }
}

.hero-inner {
    position: relative;
    z-index: 2;
    width: min(1450px, 94%);
    margin: auto;
    padding-top: 120px;
}

.kicker {
    font-size: 13px;
    color: #f0c969;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hero h1 {
    font-size: clamp(52px, 7.2vw, 112px);
    line-height: .88;
    margin: 22px 0;
    letter-spacing: -.055em;
    max-width: 1050px;
}

.hero h1 strong {
    color: #f3c95e;
}

.slogan {
    font-size: clamp(18px, 2.1vw, 30px);
    font-weight: 700;
    letter-spacing: .03em;
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 30px;
}


/* =========================================================
   BUTTON
   ========================================================= */

.btn {
    padding: 15px 22px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .03em;
    border: 1px solid rgba(255, 255, 255, .4);
    display: inline-flex;
    gap: 9px;
    align-items: center;
}

.btn.gold {
    background: linear-gradient(135deg, #f4d478, #e3aa31);
    color: #08202a;
    border-color: transparent;
}

.btn.glass {
    background: rgba(7, 33, 44, .45);
    backdrop-filter: blur(10px);
}


/* =========================================================
   OFFICIAL MARK
   ========================================================= */

.official-mark {
    position: absolute;
    bottom: 38px;
    right: 3vw;
    z-index: 3;
    display: flex;
    gap: 16px;
    align-items: center;
    background: rgba(3, 25, 35, .7);
    backdrop-filter: blur(12px);
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 14px;
    font-size: 12px;
}


/* =========================================================
   LIVE STRIP
   ========================================================= */

.live-strip {
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 4;
}

.live-inner {
    width: min(1450px, 94%);
    margin: auto;
    display: grid;
    grid-template-columns: 210px 1fr auto;
    align-items: center;
    min-height: 92px;
    gap: 20px;
}

.live-label {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .1em;
    color: var(--teal);
}

.notice-item {
    display: none;
    align-items: center;
    gap: 14px;
}

.notice-item.active {
    display: flex;
}

.notice-item strong {
    display: block;
}

.notice-item small {
    color: var(--muted);
}

.notice-controls button {
    border: 1px solid var(--line);
    background: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
}


/* =========================================================
   GENERAL SECTION
   ========================================================= */

.section {
    padding: 92px 3vw;
}

.container {
    width: min(1450px, 100%);
    margin: auto;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 35px;
}

.section-label {
    font-size: 12px;
    color: var(--teal);
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.section h2 {
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.06;
    letter-spacing: -.04em;
    margin: 8px 0;
}


/* =========================================================
   AWARD
   ========================================================= */

.award-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 28px;
}

.award-card {
    background: linear-gradient(135deg, #042732, #0a4854);
    color: #fff;
    border-radius: var(--radius);
    padding: 36px;
    box-shadow: var(--shadow);
}

.award-card h3 {
    font-size: 30px;
    margin: 8px 0;
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.check {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 15px;
    padding: 18px;
    display: flex;
    gap: 12px;
}

.check b {
    color: var(--teal);
}


/* =========================================================
   QUICK SERVICES
   ========================================================= */

.quick-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.quick-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 25px 20px;
    min-height: 180px;
    transition: .25s;
}

.quick-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: #a4d8d0;
}

.quick-card i {
    font-style: normal;
    font-size: 32px;
    color: var(--teal);
}

.quick-card h3 {
    font-size: 17px;
}

.topic-cloud {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.topic-cloud a {
    background: #e8f4f1;
    border: 1px solid #cce6e1;
    padding: 9px 14px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 700;
}


/* =========================================================
   PRESIDENT
   ========================================================= */

.president {
    background: var(--navy);
    color: #fff;
}

.president-grid {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 40px;
    align-items: center;
}

.president-photo {
    min-height: 430px;
    border-radius: var(--radius);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .08),
            rgba(255, 255, 255, .01)
        ),
        url('../images/news-1.jpg') center / cover;
    position: relative;
}

.president-photo::after {
    content: "RUANG FOTO RASMI PRESIDEN";
    position: absolute;
    left: 24px;
    bottom: 20px;
    background: rgba(2, 15, 22, .75);
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 12px;
}

.president-copy blockquote {
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.2;
    margin: 18px 0;
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.3fr repeat(2, .55fr);
    gap: 16px;
}

.map-card,
.metric {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 10px 32px rgba(0, 25, 35, .06);
}

.map-visual {
    height: 330px;
    border-radius: 14px;
    background:
        linear-gradient(
            rgba(3, 25, 35, .15),
            rgba(3, 25, 35, .15)
        ),
        url('../images/smart-city.jpg') center / cover;
    position: relative;
}

.pin {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gold);
    border: 5px solid rgba(255, 255, 255, .9);
    box-shadow: 0 0 0 7px rgba(231, 184, 75, .2);
}

.metric strong {
    font-size: 50px;
    color: var(--teal);
    display: block;
}


/* =========================================================
   CONTENT
   ========================================================= */

.content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.content-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
}

.content-card img {
    height: 190px;
    width: 100%;
    object-fit: cover;
}

.content-card div {
    padding: 22px;
}

.content-card small {
    color: var(--teal);
    font-weight: 800;
}


/* =========================================================
   PARTICIPATION
   ========================================================= */

.participation {
    background: #eaf4f2;
}

.participation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.feedback-box,
.survey-box {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    border: 1px solid var(--line);
}

textarea,
input,
select {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #cbd9dc;
    border-radius: 10px;
    background: #fff;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.stars button {
    font-size: 27px;
    border: 0;
    background: transparent;
    color: #b5c2c5;
    cursor: pointer;
}

.stars button.active {
    color: #e9b83e;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    background: #031923;
    color: #d3e0e3;
    padding: 60px 3vw 25px;
}

.footer-grid {
    width: min(1450px, 100%);
    margin: auto;
    display: grid;
    grid-template-columns: 1.3fr repeat(4, 1fr);
    gap: 35px;
}

.footer h4 {
    color: #fff;
}

.footer a {
    display: block;
    margin: 8px 0;
    font-size: 13px;
}

.footer-logo {
    height: 150px;
}

.footer-bottom {
    width: min(1450px, 100%);
    margin: 30px auto 0;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 12px;
}

.visitor-counter {
    width: fit-content;
    max-width: calc(100% - 6vw);
    margin: 30px auto 0;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #d3e0e3;
    font-size: 13px;
}

.visitor-counter > span:first-child {
    color: #40d8bd;
}

.visitor-counter strong {
    color: #fff;
    font-size: 16px;
}

.visitor-counter small {
    color: #a9bdc2;
}

@media (max-width: 560px) {
    .visitor-counter {
        border-radius: 18px;
        flex-wrap: wrap;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.access-btn {
    position: fixed;
    right: 22px;
    bottom: 155px;
    z-index: 1001;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 0;
    background: var(--gold);
    font-weight: 900;
    box-shadow: var(--shadow);
    cursor: pointer;
}

.access-panel {
    position: fixed;
    right: 22px;
    bottom: 220px;
    z-index: 1002;
    width: 300px;
    background: #fff;
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--shadow);
    display: none;
}

.access-panel.open {
    display: block;
}

.access-panel button {
    width: 100%;
    margin: 5px 0;
    padding: 10px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 9px;
}


/* =========================================================
   SEARCH
   ========================================================= */

.search-dialog {
    border: 0;
    border-radius: 22px;
    padding: 0;
    width: min(850px, 92vw);
    box-shadow: 0 30px 100px rgba(0, 0, 0, .4);
}

.search-dialog::backdrop {
    background: rgba(0, 15, 22, .75);
    backdrop-filter: blur(8px);
}

.search-inner {
    padding: 35px;
}

.search-results a {
    display: block;
    padding: 13px;
    border-bottom: 1px solid var(--line);
}


/* =========================================================
   INNER PAGE
   ========================================================= */

.page-hero {
    padding: 180px 3vw 80px;
    background: linear-gradient(135deg, #031923, #0a4a55);
    color: #fff;
}

.page-content {
    padding: 70px 3vw;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.info-table th,
.info-table td {
    padding: 15px;
    border: 1px solid var(--line);
    text-align: left;
}


/* =========================================================
   MOBILE
   ========================================================= */

.mobile-toggle {
    display: none;
}

@media (max-width: 1100px) {

    .nav {
        display: none;
    }

    .mobile-toggle {
        display: block;
    }

    .quick-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .dashboard-grid {
        grid-template-columns: 1fr 1fr;
    }

    .map-card {
        grid-column: 1 / -1;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .award-grid,
    .president-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {

    .topbar {
        display: none;
    }

    .site-header {
        top: 0;
        height: 74px;
    }

    .brand {
        min-width: 0;
    }

    .brand img {
        height: 55px;
    }

    .brand-text {
        display: none;
    }

    .hero-inner {
        padding-top: 90px;
    }

    .hero h1 {
        font-size: 52px;
    }

    .official-mark {
        display: none;
    }

    .live-inner {
        grid-template-columns: 1fr;
        padding: 18px 0;
    }

    .live-label {
        display: none;
    }

    .quick-grid,
    .content-grid,
    .participation-grid,
    .check-grid,
    .dashboard-grid,
    .form-row {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 65px 5vw;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        display: block;
    }

    .header-tools .desktop-only {
        display: none;
    }

    .page-hero {
        padding-top: 130px;
    }
}


/* =========================================================
   ACCESSIBILITY MODES
   ========================================================= */

body.high-contrast {
    filter: contrast(1.28);
}

body.dark-mode {
    background: #061820;
    color: #e6f0f2;
}

body.dark-mode .quick-card,
body.dark-mode .metric,
body.dark-mode .map-card,
body.dark-mode .content-card,
body.dark-mode .feedback-box,
body.dark-mode .survey-box,
body.dark-mode .check {
    background: #0d2932;
    color: #eef8fa;
    border-color: #24434d;
}

body.large-text {
    font-size: 118%;
}
/* =========================================================
   MPS V5.1 — SANDAKAN LIVE (AUTO / DAY / NIGHT)
========================================================= */
:root{
  --hero-image:url('../images/hero-city-night.jpg');
  --hero-overlay-1:rgba(2,16,24,.90);
  --hero-overlay-2:rgba(2,16,24,.58);
  --hero-overlay-3:rgba(2,16,24,.26);
  --hero-bottom:rgba(2,16,24,.74);
  --header-glass:rgba(3,25,35,.90);
  --hero-title:#ffffff;
  --hero-accent:#f3c95e;
}
html[data-city-theme="day"]{
  --hero-image:url('../images/hero-city-day.jpg');
  --hero-overlay-1:rgba(0,25,45,.72);
  --hero-overlay-2:rgba(0,35,58,.38);
  --hero-overlay-3:rgba(0,35,58,.08);
  --hero-bottom:rgba(0,28,48,.56);
  --header-glass:rgba(246,251,252,.90);
  --hero-title:#ffffff;
  --hero-accent:#ffd66f;
}
html[data-city-theme="night"]{
  --hero-image:url('../images/hero-city-night.jpg');
}
.hero:before{
  background-image:var(--hero-image);
  transition:opacity .8s ease,filter .8s ease,transform .8s ease;
}
.hero:after{
  background:linear-gradient(90deg,var(--hero-overlay-1) 0%,var(--hero-overlay-2) 45%,var(--hero-overlay-3) 100%),linear-gradient(0deg,var(--hero-bottom),transparent 48%);
  transition:background .8s ease;
}
.hero h1{color:var(--hero-title)}
.hero h1 strong{color:var(--hero-accent)}
.site-header.scrolled{background:var(--header-glass)}
html[data-city-theme="day"] .site-header.scrolled{color:#082736;border-bottom-color:rgba(8,39,54,.12);box-shadow:0 12px 40px rgba(0,45,70,.12)}
html[data-city-theme="day"] .site-header.scrolled .nav>a,
html[data-city-theme="day"] .site-header.scrolled .dropdown>button{color:#082736}
html[data-city-theme="day"] .site-header.scrolled .icon-btn{color:#082736;border-color:rgba(8,39,54,.25);background:rgba(255,255,255,.55)}
.sandakan-live{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.26);background:rgba(0,0,0,.18);border-radius:999px;backdrop-filter:blur(12px)}
.live-mode{min-width:34px;height:34px;border:0;border-radius:999px;background:transparent;color:#fff;font-size:11px;font-weight:900;cursor:pointer;padding:0 9px;transition:.2s}
.live-mode:hover,.live-mode.active{background:linear-gradient(135deg,#f4d478,#e3aa31);color:#08202a;box-shadow:0 5px 16px rgba(227,170,49,.25)}
html[data-city-theme="day"] .site-header.scrolled .sandakan-live{border-color:rgba(8,39,54,.2);background:rgba(255,255,255,.55)}
html[data-city-theme="day"] .site-header.scrolled .live-mode{color:#082736}
html[data-city-theme="day"] .site-header.scrolled .live-mode.active{color:#08202a}
.hero-status{position:absolute;right:3vw;top:50%;transform:translateY(-50%);z-index:3;display:flex;align-items:center;gap:12px;min-width:155px;padding:14px 17px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(3,25,35,.56);backdrop-filter:blur(14px);box-shadow:0 16px 42px rgba(0,0,0,.2)}
.hero-status .status-dot{width:9px;height:9px;border-radius:50%;background:#4be0b8;box-shadow:0 0 0 6px rgba(75,224,184,.15)}
.hero-status div{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:end}.hero-status small{grid-column:1/-1;color:#bcd5dc;font-size:10px;letter-spacing:.13em;text-transform:uppercase}.hero-status strong{font-size:14px}.hero-status span:last-child{font-size:13px;color:#f1cc70}
.access-theme{margin:9px 0 12px;padding:12px;border:1px solid var(--line);border-radius:12px}.access-theme>b{display:block;font-size:13px;margin-bottom:8px}.access-theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.access-panel .access-theme-grid button{margin:0;padding:8px 4px;font-size:11px}.access-theme-grid button.active{background:var(--gold);color:#08202a;border-color:var(--gold)}
body.theme-transition .hero:before{opacity:.35;filter:blur(2px)}
@media(max-width:1200px){.sandakan-live{display:none}.hero-status{right:2vw}}
@media(max-width:700px){.hero-status{top:auto;right:5vw;bottom:92px;transform:none;min-width:140px;padding:11px 13px}.hero-status small{font-size:9px}.hero-status strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){.hero:before{animation:none!important;transition:none}.live-mode{transition:none}}

/* V5.1.1 FIX — explicit day/night hero source */
html[data-city-theme="day"] .hero::before{
  background:url('../images/hero-city-day.jpg') center center / cover no-repeat !important;
}
html[data-city-theme="night"] .hero::before{
  background:url('../images/hero-city-night.jpg') center center / cover no-repeat !important;
}


/* =========================================================
   V6 MASTER MENU — complete MPS information architecture
========================================================= */
.mega-nav{position:static}.mega{height:100%;display:flex;align-items:center}.mega>button{display:flex;gap:5px;align-items:center}.mega-panel{position:absolute;left:0;right:0;top:100%;padding:0 3vw;opacity:0;visibility:hidden;transform:translateY(-10px);transition:.22s ease;pointer-events:none}.mega.open .mega-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}.mega-panel-inner{width:min(1450px,100%);margin:auto;background:rgba(249,252,252,.98);color:#0b2631;border:1px solid rgba(13,69,77,.12);border-radius:0 0 24px 24px;box-shadow:0 28px 70px rgba(0,22,30,.22);padding:28px;display:grid;grid-template-columns:1.05fr repeat(3,1fr);gap:24px;backdrop-filter:blur(22px)}.mega-intro{padding:10px 20px 10px 4px;border-right:1px solid #dce8e8}.mega-intro small,.mega-column h4{font-size:11px;letter-spacing:.13em;color:#16766f;text-transform:uppercase}.mega-intro h3{font-size:27px;margin:8px 0}.mega-intro p{font-size:13px;color:#526b72}.mega-column h4{margin:7px 0 12px}.mega-column a{display:flex;justify-content:space-between;gap:12px;padding:8px 6px;border-radius:8px;font-size:13px;font-weight:700;color:#18343d}.mega-column a:hover{background:#e5f2ef;color:#086b63}.mega-column a span{opacity:.45}.site-header:not(.scrolled) .mega-panel{top:100%}.page-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:30px;align-items:start}.content-panel,.side-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:0 12px 35px rgba(0,28,38,.06)}.lead{font-size:20px;line-height:1.65}.status-note{padding:20px;border-left:4px solid var(--gold);background:#f7faf9;border-radius:0 14px 14px 0;margin:25px 0}.side-card{position:sticky;top:120px}.side-card>small{color:var(--teal);font-weight:900;letter-spacing:.1em}.directory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.directory-grid.compact{grid-template-columns:1fr;margin-top:15px}.directory-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px;border:1px solid var(--line);border-radius:12px;background:#fff;font-weight:750;font-size:13px}.directory-card:hover{border-color:#8bc9c0;background:#eaf5f2}.sitemap-group{margin-bottom:45px}.sitemap-group h2{border-bottom:2px solid var(--gold);padding-bottom:10px}.nav.mobile-open{display:flex;position:fixed;inset:74px 0 0;background:#f8fbfb;color:#0b2631;overflow:auto;padding:18px;flex-direction:column;align-items:stretch;z-index:1200}.nav.mobile-open>a,.nav.mobile-open .mega>button{color:#0b2631;padding:14px;border-bottom:1px solid #dce6e7;width:100%;justify-content:space-between}.nav.mobile-open .mega{display:block;height:auto}.nav.mobile-open .mega-panel{position:static;padding:0;display:none;opacity:1;visibility:visible;transform:none;pointer-events:auto}.nav.mobile-open .mega.open .mega-panel{display:block}.nav.mobile-open .mega-panel-inner{grid-template-columns:1fr;border-radius:12px;box-shadow:none;padding:15px;background:#edf5f3}.nav.mobile-open .mega-intro{display:none}.nav.mobile-open .mega-column{padding-bottom:8px}.nav.mobile-open .mega-column a{padding:9px}
@media(max-width:1380px){.nav{gap:12px}.nav>a,.dropdown>button,.mega>button{font-size:12px}.brand{min-width:210px}.mega-panel-inner{grid-template-columns:.8fr repeat(3,1fr)}}
@media(max-width:1100px){.mega-nav{display:none}.page-layout{grid-template-columns:1fr}.side-card{position:static}.directory-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.directory-grid{grid-template-columns:1fr}.content-panel,.side-card{padding:20px}.page-content{padding-left:5vw;padding-right:5vw}}
html[data-city-theme="day"] .site-header.scrolled .mega>button{color:#082736}
.search-results a{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center}.search-results a small{grid-column:1;color:var(--muted);font-size:11px}.search-results a strong{font-size:14px}

/* =========================================================
   V6.1 NAVIGATION POLISH — compact, premium, no clipping
========================================================= */
.site-header{
  padding-inline:clamp(18px,2.2vw,38px);
  gap:12px;
}
.brand{
  flex:0 0 auto;
  min-width:245px;
  gap:10px;
}
.brand img{height:62px}
.brand-text b{font-size:19px}
.brand-text span{font-size:9px;letter-spacing:.10em;white-space:nowrap}

.mega-nav{
  flex:1 1 auto;
  min-width:0;
  margin-left:8px;
  gap:2px;
  justify-content:center;
}
.nav>a,
.mega>button{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font-size:14px;
  font-weight:800;
  line-height:1;
  letter-spacing:.035em;
  text-transform:uppercase;
  white-space:nowrap;
  padding:14px 9px;
  border-radius:9px;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.nav>a:hover,
.mega>button:hover,
.mega.open>button,
.mega:focus-within>button{
  background:rgba(255,255,255,.13);
  color:#f5ce6d;
}
.mega>button span{font-size:9px;opacity:.72}

.header-tools{
  flex:0 0 auto;
  gap:5px;
  margin-left:6px;
  align-items:center;
}
.header-tools .icon-btn{
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:inline-grid;
  place-items:center;
  font-size:12px;
}
.header-tools a.icon-btn{font-weight:850}
.sandakan-live{flex:0 0 auto;padding:3px}
.live-mode{height:32px;min-width:31px;padding:0 8px}

/* Keep dropdown panel within the viewport */
.mega-panel{padding-inline:clamp(14px,2vw,32px)}
.mega-panel-inner{max-height:calc(100vh - 122px);overflow:auto}

html[data-city-theme="day"] .site-header:not(.scrolled) .nav>a,
html[data-city-theme="day"] .site-header:not(.scrolled) .mega>button{color:#8edcff}
html[data-city-theme="day"] body:has(.signature-hero) .site-header:not(.scrolled) .nav>a,
html[data-city-theme="day"] body:has(.signature-hero) .site-header:not(.scrolled) .mega>button{color:#082736}
html[data-city-theme="day"] .site-header:not(.scrolled) .nav>a:hover,
html[data-city-theme="day"] .site-header:not(.scrolled) .mega>button:hover,
html[data-city-theme="day"] .site-header:not(.scrolled) .mega.open>button,
html[data-city-theme="day"] .site-header:not(.scrolled) .mega:focus-within>button{
  color:#063d48;
  background:rgba(255,255,255,.55);
}
html[data-city-theme="day"] .site-header.scrolled .mega>button,
html[data-city-theme="day"] .site-header.scrolled .nav>a{color:#082736}
html[data-city-theme="day"] .site-header.scrolled .nav>a:hover,
html[data-city-theme="day"] .site-header.scrolled .mega>button:hover,
html[data-city-theme="day"] .site-header.scrolled .mega.open>button{
  background:rgba(8,39,54,.08);
  color:#08716b;
}

@media (max-width:1500px){
  .site-header{padding-inline:18px;gap:7px}
  .brand{min-width:220px}
  .brand img{height:58px}
  .brand-text b{font-size:17px}
  .brand-text span{font-size:8px}
  .mega-nav{margin-left:2px}
  .nav>a,.mega>button{font-size:14px;padding-inline:7px;letter-spacing:.02em}
  .header-tools{margin-left:2px}
  .sandakan-live .live-mode{padding-inline:7px}
}

@media (max-width:1290px){
  .site-header{padding-inline:12px;gap:4px}
  .brand{min-width:175px}
  .brand-text span{display:none}
  .mega-nav{margin-left:0;gap:0}
  .nav>a,.mega>button{font-size:14px;padding-inline:3px;letter-spacing:0}
  .header-tools{gap:3px;margin-left:0}
  .header-tools .icon-btn{width:35px;height:35px;flex-basis:35px}
}

/* Switch to the mobile menu on tablet and phone widths. */
@media (max-width:1160px){
  .mega-nav{display:none}
  .mobile-toggle{display:inline-grid}
  .header-tools .desktop-only{display:inline-grid}
}

/* =========================================================
   V6.2 MOBILE / HAMBURGER MENU FIX
   - visible text in Day/Night mode
   - menu starts below header
   - clean accordion layout
========================================================= */
@media (max-width:1160px){
  .site-header .nav.mobile-open{
    display:flex !important;
    position:fixed !important;
    top:120px !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:18px clamp(16px,4vw,34px) 40px !important;
    background:#f8fbfb !important;
    color:#0b2631 !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    gap:4px !important;
    z-index:1400 !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  .site-header.scrolled .nav.mobile-open{top:86px !important}

  .site-header .nav.mobile-open>a,
  .site-header .nav.mobile-open .mega>button,
  html[data-city-theme="day"] .site-header:not(.scrolled) .nav.mobile-open>a,
  html[data-city-theme="day"] .site-header:not(.scrolled) .nav.mobile-open .mega>button,
  html[data-city-theme="night"] .site-header .nav.mobile-open>a,
  html[data-city-theme="night"] .site-header .nav.mobile-open .mega>button{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    min-height:48px !important;
    margin:0 !important;
    padding:13px 15px !important;
    border:0 !important;
    border-bottom:1px solid #dce6e7 !important;
    border-radius:10px !important;
    background:transparent !important;
    color:#0b2631 !important;
    text-align:left !important;
    font-size:13px !important;
    font-weight:850 !important;
    line-height:1.25 !important;
    letter-spacing:.035em !important;
    text-transform:uppercase !important;
    opacity:1 !important;
  }
  .site-header .nav.mobile-open>a:hover,
  .site-header .nav.mobile-open .mega>button:hover,
  .site-header .nav.mobile-open .mega.open>button{
    background:#e8f3f1 !important;
    color:#08716b !important;
  }
  .site-header .nav.mobile-open .mega{
    display:block !important;
    width:100% !important;
    height:auto !important;
    flex:none !important;
  }
  .site-header .nav.mobile-open .mega-panel{
    position:static !important;
    display:none !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
  }
  .site-header .nav.mobile-open .mega.open .mega-panel{display:block !important}
  .site-header .nav.mobile-open .mega-panel-inner{
    display:block !important;
    width:100% !important;
    max-height:none !important;
    margin:5px 0 10px !important;
    padding:12px !important;
    border:1px solid #d7e5e5 !important;
    border-radius:12px !important;
    background:#edf5f3 !important;
    box-shadow:none !important;
    overflow:visible !important;
    color:#0b2631 !important;
  }
  .site-header .nav.mobile-open .mega-intro{display:none !important}
  .site-header .nav.mobile-open .mega-column{padding:3px 0 8px !important}
  .site-header .nav.mobile-open .mega-column h4{
    margin:9px 5px 5px !important;
    color:#08716b !important;
    font-size:10px !important;
  }
  .site-header .nav.mobile-open .mega-column a{
    display:flex !important;
    color:#18343d !important;
    padding:10px 9px !important;
    border-radius:8px !important;
    font-size:13px !important;
    opacity:1 !important;
  }
  .site-header .nav.mobile-open .mega-column a:hover{background:#fff !important;color:#08716b !important}
  body.mobile-menu-open{overflow:hidden !important}
  #mobileToggle[aria-expanded="true"]{background:var(--gold);color:#08202a;border-color:var(--gold)}
}

/* =========================================================
   V7 PREMIUM PORTAL DRAWER — compact right-side navigation
========================================================= */
.mobile-drawer-backdrop{
  position:fixed;
  inset:0;
  z-index:1190;
  background:rgba(0,18,27,.48);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease,visibility .28s ease;
}
.mobile-drawer-backdrop.open{opacity:1;visibility:visible}

@media (max-width:1160px){
  .nav.mobile-open{
    display:flex;
    position:fixed;
    inset:12px 12px 12px auto;
    width:min(420px,calc(100vw - 24px));
    height:auto;
    max-height:calc(100dvh - 24px);
    z-index:1200;
    padding:74px 18px 22px;
    overflow-y:auto;
    overscroll-behavior:contain;
    flex-direction:column;
    align-items:stretch;
    gap:5px;
    color:#edf8f8;
    background:linear-gradient(160deg,rgba(4,31,42,.96),rgba(5,49,55,.92));
    border:1px solid rgba(255,255,255,.16);
    border-radius:24px;
    box-shadow:-22px 30px 80px rgba(0,13,21,.42);
    backdrop-filter:blur(24px) saturate(135%);
    -webkit-backdrop-filter:blur(24px) saturate(135%);
    transform:translateX(calc(100% + 30px));
    opacity:0;
    animation:mpsDrawerIn .32s cubic-bezier(.22,.8,.25,1) forwards;
  }
  @keyframes mpsDrawerIn{to{transform:translateX(0);opacity:1}}

  .nav.mobile-open::before{
    content:'PORTAL MPS';
    position:absolute;
    top:24px;
    left:24px;
    color:#f3cc6c;
    font-size:12px;
    font-weight:900;
    letter-spacing:.14em;
  }
  .nav.mobile-open::after{
    content:'Navigasi rasmi Majlis Perbandaran Sandakan';
    position:absolute;
    top:43px;
    left:24px;
    color:rgba(236,248,248,.62);
    font-size:10px;
  }

  .nav.mobile-open>a,
  .nav.mobile-open .mega>button{
    min-height:48px;
    width:100%;
    margin:0;
    padding:13px 14px;
    border:1px solid transparent;
    border-bottom:1px solid rgba(255,255,255,.09);
    border-radius:12px;
    color:#f4fbfb !important;
    background:transparent !important;
    font-size:12px;
    font-weight:850;
    letter-spacing:.055em;
    text-align:left;
    justify-content:space-between;
  }
  .nav.mobile-open>a:hover,
  .nav.mobile-open .mega>button:hover,
  .nav.mobile-open .mega.open>button{
    color:#082733 !important;
    background:linear-gradient(135deg,#f4d779,#e8af35) !important;
    border-color:rgba(255,255,255,.15);
    transform:translateX(2px);
  }
  .nav.mobile-open .mega>button span{
    display:inline-grid;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    transition:transform .22s ease;
  }
  .nav.mobile-open .mega.open>button span{transform:rotate(180deg);background:rgba(8,39,51,.12)}

  .nav.mobile-open .mega{display:block;height:auto}
  .nav.mobile-open .mega-panel{
    position:static;
    padding:0 4px;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
  }
  .nav.mobile-open .mega.open .mega-panel{display:block;animation:mpsSubmenuIn .2s ease}
  @keyframes mpsSubmenuIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
  .nav.mobile-open .mega-panel-inner{
    display:block;
    max-height:none;
    overflow:visible;
    margin:4px 0 9px;
    padding:9px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:14px;
    background:rgba(255,255,255,.075);
    box-shadow:none;
    color:#fff;
  }
  .nav.mobile-open .mega-intro{display:none}
  .nav.mobile-open .mega-column{padding:0 0 6px}
  .nav.mobile-open .mega-column:last-child{padding-bottom:0}
  .nav.mobile-open .mega-column h4{
    margin:8px 8px 5px;
    color:#f2ca69;
    font-size:9px;
    letter-spacing:.13em;
  }
  .nav.mobile-open .mega-column a{
    padding:9px 10px;
    border-radius:9px;
    color:rgba(244,251,251,.9);
    font-size:12px;
    font-weight:650;
  }
  .nav.mobile-open .mega-column a:hover{background:rgba(255,255,255,.1);color:#fff}
  .nav.mobile-open .mega-column a span{color:#f2ca69;opacity:.8}

  .mobile-toggle{
    position:relative;
    z-index:1210;
  }
  body.mobile-menu-open{overflow:hidden}
}

@media (max-width:520px){
  .nav.mobile-open{
    inset:8px 8px 8px auto;
    width:calc(100vw - 16px);
    max-height:calc(100dvh - 16px);
    padding:70px 14px 18px;
    border-radius:20px;
  }
  .nav.mobile-open::before{left:20px;top:21px}
  .nav.mobile-open::after{left:20px;top:40px}
}

@media (prefers-reduced-motion:reduce){
  .nav.mobile-open{animation:none;transform:none;opacity:1}
  .mobile-drawer-backdrop{transition:none}
}


/* =========================================================
   V7.1 DESKTOP MEGA MENU INTERACTION FIX
   - One menu at a time
   - Hover switches menu immediately
   - Click remains available for keyboard/touch accessibility
========================================================= */
@media (min-width:1161px){
  .mega-panel{
    display:block;
  }
  .mega:not(.open) .mega-panel{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px);
  }
  .mega.open .mega-panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
  .mobile-drawer-backdrop{
    display:none !important;
  }
}

@media (min-width: 1161px) {
  .site-header .mega-nav > a,
  .site-header .mega-nav > .mega > button {
    font-size: 12px !important;
  }
}

/* =========================================================
   V7.2 COMPACT DRAWER FINAL OVERRIDE
   - Hamburger click opens immediately
   - Compact right-side panel, never full-page on desktop/tablet
   - Legacy V6 full-screen rules are overridden deliberately
========================================================= */
@media (max-width:1160px){
  .site-header .nav,
  .site-header .mega-nav{
    display:flex !important;
    position:fixed !important;
    top:92px !important;
    right:16px !important;
    bottom:auto !important;
    left:auto !important;
    width:min(360px,calc(100vw - 32px)) !important;
    height:auto !important;
    max-height:calc(100dvh - 108px) !important;
    margin:0 !important;
    padding:64px 14px 16px !important;
    overflow-y:auto !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    gap:3px !important;
    z-index:1400 !important;
    color:#f4fbfb !important;
    background:linear-gradient(160deg,rgba(4,31,42,.985),rgba(5,49,55,.97)) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:20px !important;
    box-shadow:-18px 24px 68px rgba(0,13,21,.44) !important;
    backdrop-filter:blur(22px) saturate(135%) !important;
    -webkit-backdrop-filter:blur(22px) saturate(135%) !important;
    transform:translateX(calc(100% + 36px)) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:transform .28s cubic-bezier(.22,.8,.25,1),opacity .22s ease,visibility .22s ease !important;
    animation:none !important;
  }

  .site-header .nav.mobile-open,
  .site-header .mega-nav.mobile-open{
    transform:translateX(0) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .site-header.scrolled .nav,
  .site-header.scrolled .mega-nav,
  .site-header.scrolled .nav.mobile-open,
  .site-header.scrolled .mega-nav.mobile-open{
    top:76px !important;
    max-height:calc(100dvh - 92px) !important;
  }

  .site-header .nav::before,
  .site-header .mega-nav::before{
    content:'PORTAL MPS' !important;
    position:absolute !important;
    top:19px !important;
    left:20px !important;
    color:#f3cc6c !important;
    font-size:11px !important;
    font-weight:900 !important;
    letter-spacing:.14em !important;
  }
  .site-header .nav::after,
  .site-header .mega-nav::after{
    content:'Navigasi rasmi' !important;
    position:absolute !important;
    top:37px !important;
    left:20px !important;
    color:rgba(236,248,248,.58) !important;
    font-size:9px !important;
  }

  .site-header .nav>a,
  .site-header .nav .mega>button,
  .site-header .mega-nav>a,
  .site-header .mega-nav .mega>button{
    min-height:42px !important;
    padding:10px 11px !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.085) !important;
    border-radius:10px !important;
    color:#f4fbfb !important;
    background:transparent !important;
    font-size:11px !important;
    font-weight:850 !important;
    letter-spacing:.045em !important;
    line-height:1.2 !important;
    text-transform:uppercase !important;
  }
  .site-header .nav>a:hover,
  .site-header .nav .mega>button:hover,
  .site-header .nav .mega.open>button,
  .site-header .mega-nav>a:hover,
  .site-header .mega-nav .mega>button:hover,
  .site-header .mega-nav .mega.open>button{
    color:#082733 !important;
    background:linear-gradient(135deg,#f4d779,#e8af35) !important;
  }

  .site-header .nav .mega-panel,
  .site-header .mega-nav .mega-panel{
    position:static !important;
    display:none !important;
    width:100% !important;
    padding:0 3px !important;
    margin:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
  }
  .site-header .nav .mega.open .mega-panel,
  .site-header .mega-nav .mega.open .mega-panel{display:block !important}
  .site-header .nav .mega-panel-inner,
  .site-header .mega-nav .mega-panel-inner{
    display:block !important;
    margin:4px 0 8px !important;
    padding:8px !important;
    border:1px solid rgba(255,255,255,.1) !important;
    border-radius:12px !important;
    background:rgba(255,255,255,.075) !important;
    color:#fff !important;
    box-shadow:none !important;
  }
  .site-header .nav .mega-intro,
  .site-header .mega-nav .mega-intro{display:none !important}
  .site-header .nav .mega-column h4,
  .site-header .mega-nav .mega-column h4{
    margin:7px 7px 4px !important;
    color:#f2ca69 !important;
    font-size:8px !important;
  }
  .site-header .nav .mega-column a,
  .site-header .mega-nav .mega-column a{
    padding:8px 9px !important;
    color:rgba(244,251,251,.92) !important;
    font-size:11px !important;
    border-radius:8px !important;
  }
  .site-header .nav .mega-column a:hover,
  .site-header .mega-nav .mega-column a:hover{
    color:#fff !important;
    background:rgba(255,255,255,.1) !important;
  }

  .mobile-drawer-backdrop{
    z-index:1300 !important;
    background:rgba(0,18,27,.44) !important;
    backdrop-filter:blur(4px) !important;
    -webkit-backdrop-filter:blur(4px) !important;
  }
  .mobile-toggle{z-index:1410 !important}
}

@media (max-width:520px){
  .site-header .nav,
  .site-header .mega-nav{
    top:82px !important;
    right:8px !important;
    width:calc(100vw - 16px) !important;
    max-height:calc(100dvh - 90px) !important;
    padding:61px 12px 14px !important;
    border-radius:17px !important;
  }
}

/* =========================================================
   V7.3 DRAWER LABEL VISIBILITY FIX
   - All primary menu labels are visible immediately on open
   - No hover is required to reveal menu text
========================================================= */
@media (max-width:1160px){
  .site-header .nav.mobile-open > a,
  .site-header .nav.mobile-open > .mega > button,
  .site-header .mega-nav.mobile-open > a,
  .site-header .mega-nav.mobile-open > .mega > button{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    color:#f4fbfb !important;
    -webkit-text-fill-color:#f4fbfb !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    text-shadow:none !important;
  }

  .site-header .nav.mobile-open > a *,
  .site-header .nav.mobile-open > .mega > button *,
  .site-header .mega-nav.mobile-open > a *,
  .site-header .mega-nav.mobile-open > .mega > button *{
    color:inherit !important;
    -webkit-text-fill-color:inherit !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .site-header .nav.mobile-open > .mega > button > span,
  .site-header .mega-nav.mobile-open > .mega > button > span{
    display:inline-block !important;
    margin-left:auto !important;
    font-size:10px !important;
    transform:none !important;
  }

  .site-header .nav.mobile-open > a:hover,
  .site-header .nav.mobile-open > .mega > button:hover,
  .site-header .nav.mobile-open > .mega.open > button,
  .site-header .mega-nav.mobile-open > a:hover,
  .site-header .mega-nav.mobile-open > .mega > button:hover,
  .site-header .mega-nav.mobile-open > .mega.open > button{
    color:#082733 !important;
    -webkit-text-fill-color:#082733 !important;
  }
}

/* =========================================================
   V7.4 HAMBURGER DRAWER — FINAL STATE-BASED FIX
   Applied whenever JavaScript adds body.mobile-menu-open.
   This deliberately does not depend on viewport breakpoints,
   so the drawer cannot fall back to the legacy full-page menu.
========================================================= */
body.mobile-menu-open{overflow:hidden !important}
body.mobile-menu-open .site-header .nav,
body.mobile-menu-open .site-header .mega-nav{
  display:flex !important;
  position:fixed !important;
  top:92px !important;
  right:16px !important;
  bottom:auto !important;
  left:auto !important;
  inset:auto 16px auto auto !important;
  width:min(370px,calc(100vw - 32px)) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:calc(100dvh - 108px) !important;
  margin:0 !important;
  padding:64px 14px 16px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  gap:3px !important;
  z-index:1400 !important;
  color:#f4fbfb !important;
  background:linear-gradient(160deg,rgba(4,31,42,.99),rgba(5,49,55,.98)) !important;
  border:1px solid rgba(255,255,255,.17) !important;
  border-radius:20px !important;
  box-shadow:-18px 24px 68px rgba(0,13,21,.46) !important;
  backdrop-filter:blur(22px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(135%) !important;
  transform:translateX(0) !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  animation:none !important;
}
body.mobile-menu-open .site-header.scrolled .nav,
body.mobile-menu-open .site-header.scrolled .mega-nav{
  top:76px !important;
  max-height:calc(100dvh - 92px) !important;
}
body.mobile-menu-open .site-header .nav::before,
body.mobile-menu-open .site-header .mega-nav::before{
  content:'PORTAL MPS' !important;
  position:absolute !important;
  top:19px !important;
  left:20px !important;
  color:#f3cc6c !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.14em !important;
}
body.mobile-menu-open .site-header .nav::after,
body.mobile-menu-open .site-header .mega-nav::after{
  content:'Navigasi rasmi' !important;
  position:absolute !important;
  top:37px !important;
  left:20px !important;
  color:rgba(236,248,248,.62) !important;
  font-size:9px !important;
}
body.mobile-menu-open .site-header .nav > a,
body.mobile-menu-open .site-header .nav > .mega > button,
body.mobile-menu-open .site-header .mega-nav > a,
body.mobile-menu-open .site-header .mega-nav > .mega > button{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  min-height:42px !important;
  margin:0 !important;
  padding:10px 11px !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.09) !important;
  border-radius:10px !important;
  color:#f4fbfb !important;
  -webkit-text-fill-color:#f4fbfb !important;
  background:transparent !important;
  font-size:11px !important;
  font-weight:850 !important;
  letter-spacing:.045em !important;
  line-height:1.2 !important;
  text-align:left !important;
  text-transform:uppercase !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  text-shadow:none !important;
}
body.mobile-menu-open .site-header .nav > .mega,
body.mobile-menu-open .site-header .mega-nav > .mega{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
}
body.mobile-menu-open .site-header .nav > a:hover,
body.mobile-menu-open .site-header .nav > .mega > button:hover,
body.mobile-menu-open .site-header .nav > .mega.open > button,
body.mobile-menu-open .site-header .mega-nav > a:hover,
body.mobile-menu-open .site-header .mega-nav > .mega > button:hover,
body.mobile-menu-open .site-header .mega-nav > .mega.open > button{
  color:#082733 !important;
  -webkit-text-fill-color:#082733 !important;
  background:linear-gradient(135deg,#f4d779,#e8af35) !important;
}
body.mobile-menu-open .site-header .nav .mega-panel,
body.mobile-menu-open .site-header .mega-nav .mega-panel{
  position:static !important;
  inset:auto !important;
  display:none !important;
  width:100% !important;
  height:auto !important;
  padding:0 3px !important;
  margin:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  pointer-events:auto !important;
}
body.mobile-menu-open .site-header .nav .mega.open .mega-panel,
body.mobile-menu-open .site-header .mega-nav .mega.open .mega-panel{
  display:block !important;
}
body.mobile-menu-open .site-header .nav .mega-panel-inner,
body.mobile-menu-open .site-header .mega-nav .mega-panel-inner{
  display:block !important;
  width:100% !important;
  margin:4px 0 8px !important;
  padding:8px !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:12px !important;
  color:#fff !important;
  background:rgba(255,255,255,.075) !important;
  box-shadow:none !important;
}
body.mobile-menu-open .site-header .nav .mega-intro,
body.mobile-menu-open .site-header .mega-nav .mega-intro{display:none !important}
body.mobile-menu-open .site-header .nav .mega-column h4,
body.mobile-menu-open .site-header .mega-nav .mega-column h4{
  margin:7px 7px 4px !important;
  color:#f2ca69 !important;
  font-size:8px !important;
}
body.mobile-menu-open .site-header .nav .mega-column a,
body.mobile-menu-open .site-header .mega-nav .mega-column a{
  display:flex !important;
  padding:8px 9px !important;
  color:rgba(244,251,251,.94) !important;
  -webkit-text-fill-color:rgba(244,251,251,.94) !important;
  background:transparent !important;
  font-size:11px !important;
  border-radius:8px !important;
  opacity:1 !important;
  visibility:visible !important;
}
body.mobile-menu-open .mobile-drawer-backdrop{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  z-index:1300 !important;
  background:rgba(0,18,27,.46) !important;
  backdrop-filter:blur(4px) !important;
  -webkit-backdrop-filter:blur(4px) !important;
}
body.mobile-menu-open .mobile-toggle{z-index:1410 !important}
@media(max-width:520px){
  body.mobile-menu-open .site-header .nav,
  body.mobile-menu-open .site-header .mega-nav{
    top:82px !important;
    right:8px !important;
    inset:auto 8px auto auto !important;
    width:calc(100vw - 16px) !important;
    max-height:calc(100dvh - 90px) !important;
    padding:61px 12px 14px !important;
    border-radius:17px !important;
  }
}

/* =========================================================
   V7.5 CRISP DRAWER — remove page blur
========================================================= */
body.mobile-menu-open .mobile-drawer-backdrop,
.mobile-drawer-backdrop.open{
  background:rgba(0,18,27,.38) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
}
body.mobile-menu-open .site-header .nav,
body.mobile-menu-open .site-header .mega-nav{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  background:linear-gradient(160deg,#041f2a 0%,#053137 100%) !important;
  filter:none !important;
}
body.mobile-menu-open .site-header .nav *,
body.mobile-menu-open .site-header .mega-nav *{
  filter:none !important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* V7.6 drawer first-item and accordion safeguards */
body.mobile-menu-open .site-header .nav,
body.mobile-menu-open .site-header .mega-nav{
  scroll-behavior:smooth !important;
  overscroll-behavior:contain !important;
}
body.mobile-menu-open .site-header .nav > a:first-child,
body.mobile-menu-open .site-header .mega-nav > a:first-child{
  margin-top:0 !important;
}
body.mobile-menu-open .site-header .nav > .mega > button,
body.mobile-menu-open .site-header .mega-nav > .mega > button{
  cursor:pointer !important;
  pointer-events:auto !important;
}

/* =========================================================
   V7.7 INDEPENDENT PORTAL DRAWER
========================================================= */
.portal-drawer-backdrop{position:fixed;inset:0;z-index:3000;background:rgba(0,18,27,.38);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease}
.portal-drawer-backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto}
.portal-drawer{position:fixed;z-index:3010;top:86px;right:16px;width:min(390px,calc(100vw - 32px));max-height:calc(100dvh - 102px);overflow:auto;overscroll-behavior:contain;padding:18px;color:#f5fbfb;background:linear-gradient(160deg,#041f2a 0%,#053137 100%);border:1px solid rgba(255,255,255,.15);border-radius:20px;box-shadow:-18px 24px 68px rgba(0,13,21,.46);transform:translateX(calc(100% + 32px));opacity:0;visibility:hidden;pointer-events:none;transition:transform .28s ease,opacity .22s ease,visibility .22s ease}
.portal-drawer.is-open{transform:translateX(0);opacity:1;visibility:visible;pointer-events:auto}
.portal-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;padding:2px 2px 12px;border-bottom:1px solid rgba(255,255,255,.12)}
.portal-drawer-head small{display:block;color:#efca70;font-weight:900;letter-spacing:.14em;font-size:10px}.portal-drawer-head strong{display:block;margin-top:3px;font-size:18px}
.portal-drawer-close{width:38px;height:38px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.07);color:#fff;font-size:22px;cursor:pointer}
.portal-drawer-nav{display:grid;gap:5px}.portal-drawer-home,.portal-drawer summary{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:11px 12px;border:1px solid rgba(255,255,255,.08);border-radius:11px;color:#f5fbfb!important;-webkit-text-fill-color:#f5fbfb!important;background:rgba(255,255,255,.025);font-size:12px;font-weight:850;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer;list-style:none}
.portal-drawer summary::-webkit-details-marker{display:none}.portal-drawer summary::after{content:'+';font-size:17px;font-weight:500;color:#efca70}.portal-drawer details[open] summary{background:linear-gradient(135deg,#f4d779,#e8af35);color:#082733!important;-webkit-text-fill-color:#082733!important}.portal-drawer details[open] summary::after{content:'−';color:#082733}
.portal-drawer-submenu{margin:5px 0 8px;padding:8px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.055)}.portal-drawer-group+.portal-drawer-group{margin-top:9px}.portal-drawer-group h4{margin:4px 7px 5px;color:#efca70;font-size:9px;letter-spacing:.12em;text-transform:uppercase}.portal-drawer-group a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px;border-radius:8px;color:rgba(245,251,251,.94)!important;-webkit-text-fill-color:rgba(245,251,251,.94)!important;text-decoration:none;font-size:12px;line-height:1.3}.portal-drawer-group a:hover{background:rgba(255,255,255,.09)}
.portal-drawer-footer{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;color:rgba(245,251,251,.62);font-size:10px}body.portal-drawer-open{overflow:hidden}#drawerToggle{position:relative;z-index:3020}
@media(max-width:520px){.portal-drawer{top:76px;right:8px;width:calc(100vw - 16px);max-height:calc(100dvh - 84px);border-radius:17px;padding:14px}}@media(prefers-reduced-motion:reduce){.portal-drawer,.portal-drawer-backdrop{transition:none}}


/* V7.8 — official slogan artwork */
.slogan{margin:24px 0 0;max-width:min(860px,72vw)}
.slogan img{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 10px rgba(0,0,0,.42))}
@media(max-width:700px){.slogan{max-width:94vw;margin-top:18px}.slogan img{width:100%}}


/* =========================================================
   V7.8.1 — SUSUNAN TIGA LOGO RASMI DI HEADER
   Sabah (kiri) · Malaysia (tengah) · KKTP (kanan)
========================================================= */
.brand.brand-three-logos{
  min-width:255px;
  width:255px;
  height:78px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  flex-shrink:0;
}
.brand-three-logos .official-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  height:72px;
  flex:0 0 auto;
}
.brand-three-logos img{
  display:block;
  width:auto;
  max-width:none;
  object-fit:contain;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));
}
.brand-three-logos .logo-sabah{height:55px;}
.brand-three-logos .logo-malaysia{height:70px;}
.brand-three-logos .logo-kktp{height:57px;}

@media (max-width:1280px){
  .brand.brand-three-logos{min-width:218px;width:218px;gap:7px;}
  .brand-three-logos .logo-sabah{height:48px;}
  .brand-three-logos .logo-malaysia{height:61px;}
  .brand-three-logos .logo-kktp{height:50px;}
}
@media (max-width:1100px){
  .brand.brand-three-logos{min-width:190px;width:190px;gap:5px;}
  .brand-three-logos .logo-sabah{height:43px;}
  .brand-three-logos .logo-malaysia{height:55px;}
  .brand-three-logos .logo-kktp{height:45px;}
}
@media (max-width:760px){
  .brand.brand-three-logos{min-width:174px;width:174px;height:64px;gap:5px;}
  .brand-three-logos .official-logo{height:58px;}
  .brand-three-logos .logo-sabah{height:39px;}
  .brand-three-logos .logo-malaysia{height:50px;}
  .brand-three-logos .logo-kktp{height:41px;}
}
@media (max-width:390px){
  .brand.brand-three-logos{min-width:150px;width:150px;gap:4px;}
  .brand-three-logos .logo-sabah{height:34px;}
  .brand-three-logos .logo-malaysia{height:44px;}
  .brand-three-logos .logo-kktp{height:36px;}
}

/* V7.8.2 — Logo MPS pada bahagian hero */
.hero-mps-logo{
  width:auto;
  height:clamp(105px,10vw,155px);
  margin:0 0 18px 0;
  object-fit:contain;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.38));
}
@media(max-width:700px){
  .hero-mps-logo{height:100px;margin-bottom:14px;}
}


/* =========================================================
   MPS V8.0.0 — PREMIUM POLISH LAYER
   Non-destructive enhancement layer: motion, depth, focus,
   responsive refinement and reduced-motion accessibility.
========================================================= */
:root{
  --premium-ease:cubic-bezier(.22,1,.36,1);
  --premium-fast:220ms;
  --premium-normal:520ms;
  --premium-slow:900ms;
  --premium-ring:0 0 0 3px rgba(64,216,189,.28);
}
html{scroll-padding-top:100px}
body{overflow-x:hidden}
::selection{background:rgba(64,216,189,.3);color:inherit}
a,button,input,select,textarea{transition:color var(--premium-fast) ease,background-color var(--premium-fast) ease,border-color var(--premium-fast) ease,box-shadow var(--premium-fast) ease,transform var(--premium-fast) var(--premium-ease)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--premium-ring)}

/* Reading progress */
.mps-progress{position:fixed;z-index:10050;left:0;top:0;width:100%;height:3px;pointer-events:none;background:transparent}
.mps-progress>span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--mint),var(--gold));box-shadow:0 0 18px rgba(64,216,189,.5);will-change:transform}

/* Header refinement */
.site-header{transition:background-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease,transform .35s ease}
.site-header.is-scrolled{box-shadow:0 14px 40px rgba(0,25,35,.16);backdrop-filter:saturate(140%) blur(16px);-webkit-backdrop-filter:saturate(140%) blur(16px)}
.nav>a,.mega>button{position:relative}
.nav>a::after,.mega>button::after{content:"";position:absolute;left:14px;right:14px;bottom:7px;height:2px;border-radius:9px;background:linear-gradient(90deg,var(--mint),var(--gold));transform:scaleX(0);transform-origin:center;transition:transform .3s var(--premium-ease)}
.nav>a:hover::after,.mega>button:hover::after,.mega.open>button::after{transform:scaleX(1)}
.mega-panel{transform-origin:top center}
.mega.open .mega-panel{animation:mpsPanelIn .34s var(--premium-ease) both}
@keyframes mpsPanelIn{from{opacity:0;transform:translateY(-8px) scale(.99)}to{opacity:1;transform:none}}
.mega-column a span{transition:transform .25s var(--premium-ease)}
.mega-column a:hover span{transform:translateX(4px)}

/* Hero depth and atmospheric movement */
.hero{isolation:isolate;overflow:hidden}
.hero::before{animation:mpsHeroDrift 24s ease-in-out infinite alternate;will-change:transform}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 72% 24%,rgba(64,216,189,.12),transparent 31%),linear-gradient(115deg,rgba(3,25,35,.03),transparent 40%,rgba(231,184,75,.08));mix-blend-mode:screen;animation:mpsLightBreathe 8s ease-in-out infinite alternate}
@keyframes mpsHeroDrift{from{transform:scale(1.015) translate3d(-.25%,0,0)}to{transform:scale(1.055) translate3d(.5%,-.4%,0)}}
@keyframes mpsLightBreathe{from{opacity:.45}to{opacity:.9}}
.hero-inner>*{animation:mpsHeroEntry .85s var(--premium-ease) both}
.hero-inner>*:nth-child(2){animation-delay:.06s}.hero-inner>*:nth-child(3){animation-delay:.12s}.hero-inner>*:nth-child(4){animation-delay:.18s}.hero-inner>*:nth-child(5){animation-delay:.24s}
@keyframes mpsHeroEntry{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-mps-logo{filter:drop-shadow(0 14px 28px rgba(0,0,0,.25));transition:transform .5s var(--premium-ease),filter .5s ease}
.hero-mps-logo:hover{transform:translateY(-4px) scale(1.025);filter:drop-shadow(0 18px 34px rgba(0,0,0,.3))}
.hero-status,.official-mark{backdrop-filter:blur(14px) saturate(135%);-webkit-backdrop-filter:blur(14px) saturate(135%)}
.status-dot{box-shadow:0 0 0 0 rgba(64,216,189,.55);animation:mpsPulse 2.2s infinite}
@keyframes mpsPulse{0%{box-shadow:0 0 0 0 rgba(64,216,189,.48)}70%{box-shadow:0 0 0 10px rgba(64,216,189,0)}100%{box-shadow:0 0 0 0 rgba(64,216,189,0)}}

/* Buttons and cards */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.36) 45%,transparent 65%);transform:translateX(-130%);transition:transform .65s var(--premium-ease)}
.btn:hover::before{transform:translateX(130%)}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,25,35,.16)}
.btn:active{transform:translateY(-1px) scale(.99)}
.quick-card,.check,.content-card,.metric,.map-card,.feedback-box,.survey-box,.award-card{transition:transform .42s var(--premium-ease),box-shadow .42s ease,border-color .3s ease}
.quick-card:hover,.check:hover,.content-card:hover,.metric:hover,.map-card:hover{transform:translateY(-7px);box-shadow:0 22px 44px rgba(0,28,40,.13)}
.quick-card i{transition:transform .42s var(--premium-ease)}
.quick-card:hover i{transform:translateY(-3px) rotate(-3deg) scale(1.08)}
.content-card{overflow:hidden}
.content-card img{transition:transform .75s var(--premium-ease),filter .55s ease}
.content-card:hover img{transform:scale(1.045);filter:saturate(1.08) contrast(1.02)}
.metric strong{font-variant-numeric:tabular-nums}

/* Scroll reveal */
.js-reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--premium-ease),transform .8s var(--premium-ease)}
.js-reveal.reveal-visible{opacity:1;transform:none}
.js-reveal[data-reveal-delay="1"]{transition-delay:.08s}.js-reveal[data-reveal-delay="2"]{transition-delay:.16s}.js-reveal[data-reveal-delay="3"]{transition-delay:.24s}.js-reveal[data-reveal-delay="4"]{transition-delay:.32s}.js-reveal[data-reveal-delay="5"]{transition-delay:.40s}
.section-head h2{text-wrap:balance}
.section-label{letter-spacing:.13em}

/* Back to top */
.mps-back-top{position:fixed;right:22px;bottom:22px;z-index:900;width:46px;height:46px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(3,25,35,.88);color:#fff;display:grid;place-items:center;box-shadow:0 14px 35px rgba(0,20,28,.25);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transform:translateY(14px);cursor:pointer}
.mps-back-top.visible{opacity:1;visibility:visible;transform:none}
.mps-back-top:hover{transform:translateY(-4px);background:var(--teal)}

/* Form and footer refinement */
.feedback-box input,.feedback-box select,.feedback-box textarea,.survey-box input{border:1px solid var(--line);box-shadow:inset 0 1px 2px rgba(0,25,35,.035)}
.feedback-box input:focus,.feedback-box select:focus,.feedback-box textarea:focus,.survey-box input:focus{border-color:var(--teal);box-shadow:var(--premium-ring)}
.footer{position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-180px;top:-250px;background:radial-gradient(circle,rgba(64,216,189,.13),transparent 68%);pointer-events:none}
.footer a:hover{color:var(--mint);transform:translateX(3px)}

/* Mobile tuning */
@media(max-width:760px){
 .mps-back-top{right:14px;bottom:14px;width:42px;height:42px}
 .hero::before{animation-duration:32s}
 .hero-inner>*{animation-duration:.65s}
 .quick-card:hover,.check:hover,.content-card:hover,.metric:hover,.map-card:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .js-reveal{opacity:1!important;transform:none!important}
}


/* =========================================================
   MPS V9.0 SIGNATURE EDITION — REALISTIC CINEMATIC HERO
   Effects remain restrained so the original aerial photographs
   continue to look like photographs, not illustrated scenery.
========================================================= */
.signature-hero{min-height:100vh;isolation:isolate;background:#031923;display:block;position:relative;padding:0;overflow:hidden}
.signature-hero::before,.signature-hero::after{content:none!important}
.hero-photo{position:absolute;inset:0;z-index:-5;background-image:var(--city-image);background-position:center;background-size:cover;transform:scale(1.015);animation:signaturePhotoDrift 42s ease-in-out infinite alternate;will-change:transform}
.hero-atmosphere{position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
.signature-hero .hero-layout{position:relative;z-index:2;width:min(1500px,94%);min-height:100vh;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;align-items:center;padding:130px 0 38px}
.signature-hero .hero-inner{width:auto;margin:0;padding:0;max-width:1050px}
.signature-hero .hero-inner::before{content:"";position:absolute;z-index:-1;left:-8vw;top:-8vh;width:min(980px,78vw);height:96vh;background:linear-gradient(90deg,rgba(1,14,22,.72) 0%,rgba(1,14,22,.52) 43%,rgba(1,14,22,.13) 78%,transparent 100%);filter:blur(1px);pointer-events:none}
.signature-hero h1{font-size:clamp(58px,6.5vw,104px);line-height:.9;max-width:930px;margin:17px 0 20px;text-shadow:0 4px 24px rgba(0,0,0,.46);letter-spacing:-.05em}
.signature-hero h1 strong{color:#f2c65c;text-shadow:0 5px 24px rgba(0,0,0,.42)}
.signature-hero .kicker{color:#f2c65c;text-shadow:0 2px 12px rgba(0,0,0,.65)}
.signature-hero .slogan{max-width:750px;filter:drop-shadow(0 3px 9px rgba(0,0,0,.72))}
.signature-hero .hero-actions{margin-top:27px}
.hero-side{display:grid;gap:12px;align-self:center}
.live-card{border:1px solid rgba(255,255,255,.23);border-radius:17px;background:linear-gradient(145deg,rgba(4,35,53,.82),rgba(2,20,31,.69));box-shadow:0 18px 45px rgba(0,0,0,.24);backdrop-filter:blur(15px) saturate(125%);-webkit-backdrop-filter:blur(15px) saturate(125%);padding:15px;color:#fff}
.live-card-head{display:flex;justify-content:space-between;align-items:center;font-size:10px}.live-card-head span{color:#47ddb4}
.weather-main{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin:13px 0}.weather-icon{font-size:34px}.weather-main strong{display:block;font-size:28px;line-height:1}.weather-main small,.humidity small,.sun-times small,.updated,.clock-card small{display:block;color:#bfd0d7;font-size:10px}.humidity{text-align:right}.humidity b{font-size:16px}
.sun-times{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sun-times span:last-child{text-align:right}.sun-times b{font-size:14px}.updated{margin-top:13px;border-top:1px solid rgba(255,255,255,.13);padding-top:9px}
.visitor-card small{display:block}.visitor-card strong{display:block;color:#f2c65c;font-size:36px;line-height:1.15;margin:5px 0}.visitor-card span{font-size:11px;color:#47ddb4}
.clock-card{display:flex;justify-content:space-between;align-items:center}.clock-card div{display:grid;gap:2px}.clock-card strong{font-size:20px}.clock-face{font-size:38px;color:#dce8ec}
.hero-metrics{margin-top:17px;display:grid;grid-template-columns:repeat(4,1fr);max-width:760px;border:1px solid rgba(255,255,255,.18);border-radius:17px;overflow:hidden;background:rgba(3,25,35,.67);backdrop-filter:blur(13px) saturate(125%);box-shadow:0 17px 38px rgba(0,0,0,.2)}
.hero-metrics>div{padding:13px 16px;border-right:1px solid rgba(255,255,255,.15)}.hero-metrics>div:last-child{border-right:0}.hero-metrics small,.hero-metrics span{display:block}.hero-metrics small{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#d6e3e7}.hero-metrics strong{display:block;color:#f2c65c;font-size:26px;line-height:1.1;margin:3px 0;font-variant-numeric:tabular-nums}.hero-metrics span{font-size:9px;color:#bdced4}
.official-mark{z-index:5}
/* Natural atmospheric overlays: blurred gradients, never decorative particles. */
.cloud,.fog{position:absolute;display:block;border-radius:50%;filter:blur(28px);opacity:0;will-change:transform}
.cloud{height:9%;width:31%;top:9%;background:radial-gradient(ellipse,rgba(255,255,255,.18),rgba(255,255,255,.07) 47%,transparent 72%)}
.cloud-a{left:-12%;animation:cloudPassA 88s linear infinite}.cloud-b{left:55%;top:14%;width:24%;animation:cloudPassB 112s linear infinite}
.fog{height:8%;width:34%;background:radial-gradient(ellipse,rgba(235,245,244,.18),rgba(220,236,236,.07) 51%,transparent 73%);filter:blur(22px)}
.fog-a{left:7%;top:26%;animation:fogFloatA 62s ease-in-out infinite alternate}.fog-b{right:12%;top:34%;animation:fogFloatB 76s ease-in-out infinite alternate}
.sun-glow{position:absolute;left:23%;top:5%;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,rgba(255,242,192,.30),rgba(255,218,130,.09) 34%,transparent 69%);filter:blur(4px);opacity:0}
.water-shimmer{position:absolute;left:15%;right:17%;bottom:-4%;height:35%;transform:skewX(-8deg);background:linear-gradient(102deg,transparent 20%,rgba(255,233,173,.10) 43%,rgba(255,255,255,.05) 48%,transparent 62%);filter:blur(10px);mix-blend-mode:screen;opacity:.22;animation:waterShimmer 11s ease-in-out infinite alternate}
.night-city-glow{position:absolute;inset:34% 0 0;background:radial-gradient(ellipse at 54% 67%,rgba(255,170,72,.12),transparent 40%),radial-gradient(ellipse at 70% 69%,rgba(255,204,100,.08),transparent 28%);mix-blend-mode:screen;opacity:0;animation:cityBreath 7s ease-in-out infinite alternate}
html[data-city-theme="day"] .sun-glow{opacity:1;animation:sunBreathe 9s ease-in-out infinite alternate}html[data-city-theme="day"] .cloud,html[data-city-theme="day"] .fog{opacity:1}
html[data-city-theme="night"] .hero-photo{filter:saturate(1.02) contrast(1.02)}html[data-city-theme="night"] .night-city-glow{opacity:.75}html[data-city-theme="night"] .fog{opacity:.4;background:radial-gradient(ellipse,rgba(190,207,212,.11),rgba(155,178,188,.04) 52%,transparent 74%)}html[data-city-theme="night"] .cloud{opacity:.22}html[data-city-theme="night"] .water-shimmer{background:linear-gradient(102deg,transparent 23%,rgba(255,177,78,.10) 42%,rgba(70,174,195,.06) 52%,transparent 67%);opacity:.35}
html[data-city-theme="night"] .weather-icon{font-size:0}html[data-city-theme="night"] .weather-icon::before{content:"☾";font-size:36px;color:#f2c65c}html[data-city-theme="night"] .weather-main strong{color:#fff}
@keyframes signaturePhotoDrift{from{transform:scale(1.015) translate3d(-.18%,0,0)}to{transform:scale(1.04) translate3d(.32%,-.18%,0)}}
@keyframes cloudPassA{from{transform:translateX(0)}to{transform:translateX(390%)}}@keyframes cloudPassB{from{transform:translateX(0)}to{transform:translateX(-330%)}}
@keyframes fogFloatA{from{transform:translate3d(-4%,0,0) scale(.95)}to{transform:translate3d(16%,5%,0) scale(1.08)}}@keyframes fogFloatB{from{transform:translate3d(6%,0,0)}to{transform:translate3d(-18%,4%,0)}}
@keyframes sunBreathe{from{transform:scale(.96);opacity:.72}to{transform:scale(1.05);opacity:1}}@keyframes waterShimmer{from{transform:translateX(-2%) skewX(-8deg);opacity:.15}to{transform:translateX(4%) skewX(-8deg);opacity:.34}}@keyframes cityBreath{from{filter:brightness(.92);opacity:.58}to{filter:brightness(1.08);opacity:.82}}
@media(max-width:1100px){.signature-hero .hero-layout{grid-template-columns:1fr;padding-top:145px}.hero-side{display:none}.signature-hero .hero-inner{max-width:920px}.hero-metrics{max-width:720px}}
@media(max-width:760px){.signature-hero{min-height:880px}.signature-hero .hero-layout{min-height:880px;padding-top:132px;align-items:start}.signature-hero .hero-inner::before{width:110vw;height:100%;left:-8vw;top:-2vh;background:linear-gradient(90deg,rgba(1,14,22,.78),rgba(1,14,22,.35) 75%,transparent)}.signature-hero h1{font-size:clamp(46px,13vw,66px)}.hero-metrics{grid-template-columns:repeat(2,1fr)}.hero-metrics>div:nth-child(2){border-right:0}.hero-metrics>div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.15)}.signature-hero .slogan{max-width:94%}}
@media(prefers-reduced-motion:reduce){.hero-photo,.cloud,.fog,.sun-glow,.water-shimmer,.night-city-glow{animation:none!important}}

/* =========================================================
   MPS V9.0.1 HOTFIX — HERO PHOTO VISIBILITY
   Fixes the hidden photo layer caused by a negative stacking level
   and binds the correct day/night source explicitly.
========================================================= */
html[data-city-theme="day"]{--city-image:url('../images/hero-city-day.jpg')}
html[data-city-theme="night"]{--city-image:url('../images/hero-city-night.jpg')}
.signature-hero{background-color:#031923!important}
.signature-hero .hero-photo{
  z-index:0!important;
  background-image:var(--city-image)!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:cover!important;
  opacity:1!important;
  visibility:visible!important;
}
.signature-hero .hero-atmosphere{z-index:1!important}
.signature-hero .hero-layout{z-index:3!important}
.signature-hero .official-mark{z-index:4!important}
html[data-city-theme="day"] .signature-hero .hero-photo{filter:saturate(1.04) contrast(1.02) brightness(1.03)!important}
html[data-city-theme="night"] .signature-hero .hero-photo{filter:saturate(1.03) contrast(1.04) brightness(.98)!important}
/* Keep the photo bright while preserving strong text readability only on the left. */
.signature-hero .hero-inner::before{
  background:linear-gradient(90deg,rgba(1,14,22,.68) 0%,rgba(1,14,22,.47) 42%,rgba(1,14,22,.10) 76%,transparent 100%)!important;
}
html[data-city-theme="day"] .signature-hero .hero-inner::before{
  background:linear-gradient(90deg,rgba(1,14,22,.61) 0%,rgba(1,14,22,.38) 43%,rgba(1,14,22,.07) 77%,transparent 100%)!important;
}
/* Avoid stale legacy pseudo backgrounds covering the fixed photo. */
.signature-hero::before,.signature-hero::after{display:none!important;background:none!important}

/* =========================================================
   MPS v9.0.2 — Clean Hero
   Remove homepage live/stat cards; compact clock under mode switch.
========================================================= */
.signature-hero .hero-layout{
  grid-template-columns:minmax(0,1fr)!important;
  width:min(1500px,94%)!important;
}
.signature-hero .hero-inner{
  max-width:1050px!important;
}
.header-tools{
  position:relative;
  align-self:flex-start;
  flex-wrap:wrap;
  justify-content:flex-end;
  row-gap:7px;
}
.header-datetime{
  flex:0 0 100%;
  margin-left:auto;
  width:max-content;
  min-width:176px;
  padding:7px 12px 8px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:13px;
  background:rgba(3,25,35,.42);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fff;
  text-align:right;
  line-height:1.1;
}
.header-date-row{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  color:rgba(255,255,255,.78);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.header-datetime strong{
  display:block;
  margin-top:3px;
  font-size:17px;
  letter-spacing:.02em;
}
.header-datetime small{
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.67);
  font-size:9px;
}
@media(max-width:1100px){
  .header-datetime{display:none!important}
}


/* =========================================================
   MPS v9.0.3 — Header Alignment Fix
   Clock/date in top bar above the official crests; utility
   controls restored beside the Auto / Day / Night switch.
========================================================= */
.topbar-inner{
  align-items:center;
}
.topbar-datetime{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  color:rgba(255,255,255,.92);
  font-size:11px;
  font-weight:650;
  letter-spacing:.025em;
  white-space:nowrap;
}
.topbar-datetime strong{
  color:#f2c75b;
  font-size:12px;
  letter-spacing:.03em;
}
.topbar-date{
  text-transform:uppercase;
}
.topbar-separator{
  color:rgba(255,255,255,.42);
}
.topbar-links{
  white-space:nowrap;
}
.header-tools{
  position:static!important;
  align-self:center!important;
  flex-wrap:nowrap!important;
  justify-content:flex-end!important;
  row-gap:0!important;
  align-items:center!important;
}
.header-tools .sandakan-live,
.header-tools .icon-btn{
  flex:0 0 auto;
}
.header-datetime{
  display:none!important;
}
@media(max-width:1160px){
  .topbar-datetime{font-size:10px;gap:6px}
  .topbar-datetime strong{font-size:11px}
  .topbar-links{font-size:11px}
}
@media(max-width:700px){
  .topbar{display:none!important}
  .header-tools{margin-left:auto!important}
}


/* =========================================================
   MPS v9.2.0 — HEADER USABILITY STANDARD
   - Sabah crest fixed at 65px on desktop
   - Search uses a larger, crisp SVG icon
   - Hamburger appears only when the desktop menu is unavailable
========================================================= */
@media (min-width:1161px){
  .brand-three-logos .logo-sabah{
    height:65px !important;
  }
  #drawerToggle,
  .site-header .mobile-toggle{
    display:none !important;
  }
}

/* Large, high-contrast search control */
#searchOpen.search-open-btn{
  width:42px !important;
  height:42px !important;
  flex:0 0 42px !important;
  padding:0 !important;
  display:inline-grid !important;
  place-items:center !important;
}
#searchOpen .search-icon{
  width:23px !important;
  height:23px !important;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2.15;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
  transition:transform .22s ease,stroke-width .22s ease;
}
#searchOpen:hover .search-icon{
  transform:scale(1.09);
  stroke-width:2.3;
}

/* Tablet and phone: drawer remains available. */
@media (max-width:1160px){
  #drawerToggle,
  .site-header .mobile-toggle{
    display:inline-grid !important;
  }
}

/* =========================================================
   V9.4.2 — Floating accessibility button refinement
   Removes the heavy circular "ghost" shadow and improves
   mobile placement, touch target and safe-area support.
   ========================================================= */
.access-btn{
  width:54px;
  height:54px;
  right:22px;
  bottom:calc(22px + env(safe-area-inset-bottom, 0px));
  border:2px solid rgba(255,255,255,.9);
  background:var(--gold);
  color:#10232b;
  box-shadow:0 8px 20px rgba(0,28,40,.14);
  display:grid;
  place-items:center;
  line-height:1;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.access-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 11px 24px rgba(0,28,40,.17);
}
.access-btn:active{
  transform:translateY(0) scale(.97);
  box-shadow:0 5px 13px rgba(0,28,40,.13);
}
.access-btn:focus-visible{
  outline:3px solid rgba(255,255,255,.98);
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(14,124,120,.28),0 8px 20px rgba(0,28,40,.14);
}
.access-panel{
  right:22px;
  bottom:calc(90px + env(safe-area-inset-bottom, 0px));
}

@media(max-width:700px){
  .access-btn{
    width:52px;
    height:52px;
    right:14px;
    bottom:calc(14px + env(safe-area-inset-bottom, 0px));
    font-size:15px;
    box-shadow:0 7px 17px rgba(0,28,40,.14);
  }
  .access-panel{
    right:12px;
    bottom:calc(76px + env(safe-area-inset-bottom, 0px));
    width:min(310px,calc(100vw - 24px));
    max-height:calc(100dvh - 100px - env(safe-area-inset-bottom, 0px));
    overflow:auto;
    overscroll-behavior:contain;
  }
}

@media(prefers-reduced-motion:reduce){
  .access-btn{transition:none!important}
}

/* =========================================================
   MPS V9.4.4 — SANDAKAN LIVE ATMOSPHERE UPGRADE
   Restores visible, restrained cinematic movement above the
   hero photograph while preserving text clarity and performance.
   ========================================================= */
.signature-hero .hero-photo{
  z-index:0;
}
.signature-hero .hero-atmosphere{
  z-index:1!important;
  opacity:1;
}
.signature-hero .hero-layout,
.signature-hero .official-mark{
  z-index:3;
}

/* A subtle photographic veil keeps atmospheric layers natural. */
.signature-hero .hero-atmosphere::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(210,236,244,.035),transparent 36%),
    linear-gradient(0deg,rgba(2,20,29,.05),transparent 34%);
  mix-blend-mode:screen;
}

.signature-hero .cloud{
  opacity:.48;
  filter:blur(32px);
  mix-blend-mode:screen;
}
.signature-hero .cloud-a{
  top:7%;
  width:36%;
  height:11%;
  animation-duration:96s;
}
.signature-hero .cloud-b{
  top:13%;
  width:29%;
  height:10%;
  animation-duration:124s;
}
.signature-hero .fog{
  opacity:.42;
  filter:blur(25px);
  mix-blend-mode:screen;
}
.signature-hero .fog-a{top:31%;width:42%}
.signature-hero .fog-b{top:39%;width:38%}

/* Water effect is constrained to the lower photographic zone. */
.signature-hero .water-shimmer{
  left:9%;
  right:7%;
  bottom:-2%;
  height:31%;
  opacity:.42;
  background:
    repeating-linear-gradient(99deg,transparent 0 10%,rgba(255,245,210,.045) 12%,transparent 15% 23%),
    linear-gradient(103deg,transparent 18%,rgba(255,232,171,.13) 41%,rgba(255,255,255,.085) 49%,transparent 68%);
  filter:blur(7px);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 25%,#000 63%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 25%,#000 63%,transparent 100%);
  animation:waterShimmerPremium 13s ease-in-out infinite alternate;
}

/* Night-only city lights: tiny soft points rather than obvious flashing dots. */
.signature-hero .night-city-glow{
  inset:31% 0 0;
  opacity:0;
  animation:cityBreath 7.5s ease-in-out infinite alternate;
}
.signature-hero .night-city-glow::before,
.signature-hero .night-city-glow::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-repeat:no-repeat;
  mix-blend-mode:screen;
  opacity:0;
}
.signature-hero .night-city-glow::before{
  background-image:
    radial-gradient(circle at 55% 48%,rgba(255,211,112,.72) 0 1px,transparent 2.5px),
    radial-gradient(circle at 61% 53%,rgba(255,180,70,.64) 0 1px,transparent 2.4px),
    radial-gradient(circle at 67% 47%,rgba(255,227,147,.68) 0 1px,transparent 2.5px),
    radial-gradient(circle at 73% 57%,rgba(255,176,64,.6) 0 1px,transparent 2.4px),
    radial-gradient(circle at 79% 51%,rgba(255,220,132,.65) 0 1px,transparent 2.5px),
    radial-gradient(circle at 48% 58%,rgba(255,196,88,.58) 0 1px,transparent 2.4px);
  animation:cityTwinkleA 4.8s ease-in-out infinite alternate;
}
.signature-hero .night-city-glow::after{
  background-image:
    radial-gradient(circle at 58% 61%,rgba(255,220,142,.62) 0 1px,transparent 2.4px),
    radial-gradient(circle at 64% 44%,rgba(255,188,76,.58) 0 1px,transparent 2.3px),
    radial-gradient(circle at 70% 62%,rgba(255,224,136,.64) 0 1px,transparent 2.5px),
    radial-gradient(circle at 76% 46%,rgba(255,173,65,.56) 0 1px,transparent 2.3px),
    radial-gradient(circle at 83% 59%,rgba(255,215,119,.6) 0 1px,transparent 2.4px);
  animation:cityTwinkleB 6.1s ease-in-out infinite alternate;
}

html[data-city-theme="day"] .signature-hero .cloud{opacity:.52}
html[data-city-theme="day"] .signature-hero .fog{opacity:.38}
html[data-city-theme="day"] .signature-hero .water-shimmer{opacity:.4}
html[data-city-theme="night"] .signature-hero .cloud{opacity:.24}
html[data-city-theme="night"] .signature-hero .fog{opacity:.3}
html[data-city-theme="night"] .signature-hero .night-city-glow{opacity:.88}
html[data-city-theme="night"] .signature-hero .night-city-glow::before,
html[data-city-theme="night"] .signature-hero .night-city-glow::after{opacity:.82}
html[data-city-theme="night"] .signature-hero .water-shimmer{opacity:.48}

@keyframes waterShimmerPremium{
  0%{transform:translate3d(-3%,0,0) skewX(-8deg) scaleX(.98);filter:blur(8px);opacity:.28}
  55%{transform:translate3d(1.5%,-.5%,0) skewX(-8deg) scaleX(1.015);filter:blur(6px);opacity:.48}
  100%{transform:translate3d(5%,0,0) skewX(-8deg) scaleX(1.03);filter:blur(7px);opacity:.35}
}
@keyframes cityTwinkleA{from{filter:brightness(.78);transform:translateY(0)}to{filter:brightness(1.2);transform:translateY(-.3%)}}
@keyframes cityTwinkleB{from{filter:brightness(1.08);transform:translateY(-.2%)}to{filter:brightness(.74);transform:translateY(.2%)}}

@media(max-width:700px){
  .signature-hero .cloud{filter:blur(25px);opacity:.34}
  .signature-hero .fog{filter:blur(20px);opacity:.28}
  .signature-hero .water-shimmer{height:25%;left:0;right:0;animation-duration:17s}
  .signature-hero .night-city-glow::before,
  .signature-hero .night-city-glow::after{background-size:100% 100%}
}

@media(prefers-reduced-motion:reduce){
  .signature-hero .hero-photo,
  .signature-hero .cloud,
  .signature-hero .fog,
  .signature-hero .sun-glow,
  .signature-hero .water-shimmer,
  .signature-hero .night-city-glow,
  .signature-hero .night-city-glow::before,
  .signature-hero .night-city-glow::after{animation:none!important}
}


/* =========================================================
   MPS V9.4.5 — LIGHTWEIGHT MOVING CLOUDS + NIGHT STARS
   GPU-friendly transform/opacity animation only; no JS or video.
   ========================================================= */
.signature-hero .hero-atmosphere{
  contain:layout paint;
  isolation:isolate;
}

/* Clouds travel across the skyline using compositor-friendly transforms. */
.signature-hero .cloud{
  will-change:transform;
  backface-visibility:hidden;
  transform:translateZ(0);
}
.signature-hero .cloud-a{
  left:-42%;
  animation:cloudCruiseA 74s linear infinite;
}
.signature-hero .cloud-b{
  left:auto;
  right:-34%;
  animation:cloudCruiseB 96s linear infinite;
}

/* A restrained night sky made entirely from CSS gradients. */
.signature-hero .night-stars{
  position:absolute;
  inset:0 0 55% 0;
  display:block;
  pointer-events:none;
  opacity:0;
  transform:translateZ(0);
  background-image:
    radial-gradient(circle at 12% 20%,rgba(255,255,255,.82) 0 1px,transparent 1.7px),
    radial-gradient(circle at 23% 11%,rgba(236,247,255,.68) 0 1px,transparent 1.6px),
    radial-gradient(circle at 36% 24%,rgba(255,255,255,.72) 0 1px,transparent 1.8px),
    radial-gradient(circle at 49% 13%,rgba(224,241,255,.65) 0 1px,transparent 1.6px),
    radial-gradient(circle at 61% 26%,rgba(255,250,225,.72) 0 1px,transparent 1.7px),
    radial-gradient(circle at 72% 12%,rgba(255,255,255,.78) 0 1px,transparent 1.7px),
    radial-gradient(circle at 84% 22%,rgba(228,244,255,.66) 0 1px,transparent 1.6px),
    radial-gradient(circle at 93% 9%,rgba(255,250,225,.7) 0 1px,transparent 1.7px),
    radial-gradient(circle at 17% 38%,rgba(255,255,255,.58) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 43% 35%,rgba(232,246,255,.58) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 68% 39%,rgba(255,255,255,.6) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 88% 35%,rgba(255,246,215,.58) 0 .8px,transparent 1.5px);
  animation:starBreathe 8s ease-in-out infinite alternate;
}
html[data-city-theme="night"] .signature-hero .night-stars{opacity:.72}
html[data-city-theme="day"] .signature-hero .night-stars{opacity:0}

@keyframes cloudCruiseA{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(410%,1.5%,0) scale(1.04)}
}
@keyframes cloudCruiseB{
  from{transform:translate3d(0,0,0) scale(.96)}
  to{transform:translate3d(-430%,-1%,0) scale(1.03)}
}
@keyframes starBreathe{
  from{filter:brightness(.82);opacity:.48}
  to{filter:brightness(1.08);opacity:.72}
}

/* Reduce the atmospheric workload on smaller devices. */
@media(max-width:700px){
  .signature-hero .cloud-a{animation-duration:94s}
  .signature-hero .cloud-b{display:none}
  .signature-hero .night-stars{animation:none;opacity:.55}
  html[data-city-theme="day"] .signature-hero .night-stars{opacity:0}
}

@media(prefers-reduced-motion:reduce){
  .signature-hero .night-stars{animation:none!important}
  .signature-hero .cloud{animation:none!important}
}

/* =========================================================
   MPS V9.4.6 — CLEAN HERO HEADER + FASTER LIGHTWEIGHT CLOUDS
   Removes the visible separator under the crest/navigation row.
   Cloud movement remains compositor-only (transform) with no JS.
   ========================================================= */
.signature-hero + *{position:relative}
.site-header{
  border-bottom:0!important;
  box-shadow:none;
}
.site-header:not(.scrolled){
  background:transparent;
}

/* Faster but still calm; only transform/opacity reach the compositor. */
.signature-hero .cloud-a{
  animation-duration:48s!important;
}
.signature-hero .cloud-b{
  animation-duration:64s!important;
}

@media(max-width:700px){
  .signature-hero .cloud-a{animation-duration:68s!important}
  .signature-hero .cloud-b{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  .signature-hero .cloud{animation:none!important;will-change:auto}
}

/* =========================================================
   MPS V9.4.7 — SAFARI HEADER SEAM + VISIBLE CLOUD MOTION
   ========================================================= */
/* Remove every possible compositing edge beneath the transparent header. */
.site-header,
.site-header:not(.scrolled){
  border:0!important;
  border-bottom:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  background-image:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.site-header::before,
.site-header::after{
  content:none!important;
  display:none!important;
}

/* Avoid Safari paint-containment seams across the hero. */
.signature-hero .hero-atmosphere{
  contain:none!important;
  overflow:hidden;
}
.signature-hero .hero-atmosphere::after{display:none!important}

/* Clouds are deliberately clearer, while still using only transform + opacity. */
.signature-hero .cloud{
  display:block!important;
  opacity:.58!important;
  filter:blur(18px)!important;
  mix-blend-mode:screen;
  background:
    radial-gradient(ellipse at 22% 55%,rgba(255,255,255,.45) 0 20%,transparent 48%),
    radial-gradient(ellipse at 48% 40%,rgba(255,255,255,.38) 0 24%,transparent 53%),
    radial-gradient(ellipse at 74% 58%,rgba(255,255,255,.34) 0 20%,transparent 48%),
    radial-gradient(ellipse at 52% 72%,rgba(255,255,255,.20) 0 33%,transparent 67%)!important;
  will-change:transform;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.signature-hero .cloud-a{
  top:6%!important;
  left:-38%!important;
  width:38%!important;
  height:13%!important;
  animation:cloudCruiseVisibleA 30s linear infinite!important;
}
.signature-hero .cloud-b{
  top:14%!important;
  left:auto!important;
  right:-31%!important;
  width:31%!important;
  height:11%!important;
  opacity:.42!important;
  animation:cloudCruiseVisibleB 44s linear infinite!important;
}
html[data-city-theme="night"] .signature-hero .cloud{opacity:.24!important}
html[data-city-theme="night"] .signature-hero .cloud-b{opacity:.18!important}

@keyframes cloudCruiseVisibleA{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(370%,1%,0)}
}
@keyframes cloudCruiseVisibleB{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-410%,-1%,0)}
}

@media(max-width:700px){
  .signature-hero .cloud-a{
    width:55%!important;
    left:-55%!important;
    animation-duration:38s!important;
    filter:blur(15px)!important;
    opacity:.44!important;
  }
  .signature-hero .cloud-b{display:none!important}
}

/* Keep the accessibility preference respected. */
@media(prefers-reduced-motion:reduce){
  .signature-hero .cloud{animation:none!important;will-change:auto!important}
}

/* =========================================================
   MPS V9.4.8 — PNG CLOUD MOTION + SAFARI SEAM MASK
   Three lightweight transparent PNG clouds animated only with
   transform and opacity. No JavaScript, canvas or video.
   ========================================================= */
.site-header,
.site-header:not(.scrolled){
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  height:88px!important;
  overflow:visible!important;
}
/* Masks Safari's 1px compositing seam without adding a visible border. */
.site-header::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-3px!important;
  height:6px!important;
  pointer-events:none!important;
  background:linear-gradient(to bottom,rgba(255,255,255,.025),rgba(255,255,255,0))!important;
  border:0!important;
  box-shadow:none!important;
}

.signature-hero .cloud{display:none!important}
.signature-hero .cloud-png{
  position:absolute;
  z-index:2;
  display:block;
  width:auto;
  height:auto;
  max-width:none;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  opacity:.42;
  filter:blur(.2px);
  mix-blend-mode:screen;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translate3d(0,0,0);
}
.signature-hero .cloud-png-a{
  top:5.5%;
  left:-46vw;
  width:46vw;
  min-width:620px;
  animation:mpsCloudPngA 22s linear infinite;
}
.signature-hero .cloud-png-b{
  top:11.5%;
  right:-38vw;
  width:38vw;
  min-width:500px;
  opacity:.34;
  animation:mpsCloudPngB 31s linear infinite;
}
.signature-hero .cloud-png-c{
  top:18%;
  left:-28vw;
  width:28vw;
  min-width:360px;
  opacity:.22;
  animation:mpsCloudPngC 39s linear infinite;
}
html[data-city-theme="night"] .signature-hero .cloud-png-a{opacity:.18}
html[data-city-theme="night"] .signature-hero .cloud-png-b{opacity:.14}
html[data-city-theme="night"] .signature-hero .cloud-png-c{opacity:.10}

@keyframes mpsCloudPngA{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(154vw,1.2vh,0)}
}
@keyframes mpsCloudPngB{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-148vw,-.8vh,0)}
}
@keyframes mpsCloudPngC{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(138vw,.5vh,0)}
}

@media(max-width:700px){
  .signature-hero .cloud-png-a{
    top:7%;
    width:78vw;
    min-width:430px;
    left:-82vw;
    opacity:.30;
    animation-duration:30s;
  }
  .signature-hero .cloud-png-b,
  .signature-hero .cloud-png-c{display:none!important}
}

/* =========================================================
   MPS V9.5.0 — DEFINITIVE HORIZONTAL-LINE REMOVAL
   Keep the lightweight PNG clouds, but remove every full-width
   atmospheric/compositing layer capable of drawing a hard seam.
   ========================================================= */
.site-header,
.site-header:not(.scrolled),
.site-header.scrolled{
  border:0!important;
  border-top:0!important;
  border-bottom:0!important;
  outline:0!important;
  box-shadow:none!important;
}
.site-header::before,
.site-header::after,
.signature-hero::before,
.signature-hero::after,
.signature-hero .hero-atmosphere::before,
.signature-hero .hero-atmosphere::after{
  content:none!important;
  display:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}

/* Prevent Safari from exposing a compositing edge between the fixed
   transparent navigation and the hero photograph. */
.signature-hero{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  margin-top:0!important;
  transform:translateY(-1px);
  padding-top:1px;
}
.signature-hero .hero-photo{
  inset:-3px 0 0 0!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
.signature-hero .hero-atmosphere{
  inset:-3px 0 0 0!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  contain:none!important;
  isolation:auto!important;
}

/* These older rectangular layers are not needed now that PNG clouds
   provide the visible atmosphere. Removing them also eliminates the
   straight horizontal edge seen in Safari. */
.signature-hero .sun-glow,
.signature-hero .fog,
.signature-hero .water-shimmer{
  display:none!important;
}
html[data-city-theme="day"] .signature-hero .night-city-glow{
  display:none!important;
  opacity:0!important;
}
html[data-city-theme="night"] .signature-hero .night-city-glow{
  display:block!important;
}

/* Keep cloud motion compositor-only. */
.signature-hero .cloud-png{
  will-change:transform!important;
  transform:translate3d(0,0,0);
}

/* =========================================================
   MPS V9.5.1 — TRUE SAFARI HEADER-SEAM FIX
   The line was a Safari compositor boundary caused by a fixed,
   transparent header sitting over the moving hero photograph.
   Keep the header in the same visual position, but make it absolute
   while the page is at the top. It becomes fixed only after scrolling.
   ========================================================= */
.site-header,
.site-header:not(.scrolled):not(.is-scrolled){
  position:absolute!important;
  top:34px!important;
  left:0!important;
  right:0!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:none!important;
  filter:none!important;
  contain:none!important;
  isolation:auto!important;
  clip-path:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}

/* Sticky navigation is restored only after the visitor scrolls. */
.site-header.scrolled,
.site-header.is-scrolled{
  position:fixed!important;
  top:0!important;
  border:0!important;
  outline:0!important;
}

/* Ensure no child creates a full-width compositor strip. */
.site-header > *,
.site-header .brand,
.site-header .nav,
.site-header .mega-nav,
.site-header .header-tools{
  border-top:0!important;
  border-bottom:0!important;
  outline:0!important;
  box-shadow:none!important;
}

/* Restore the hero to normal geometry; no masking or overlap hacks. */
.signature-hero{
  transform:none!important;
  padding-top:0!important;
  margin-top:0!important;
  border:0!important;
}
.signature-hero .hero-photo,
.signature-hero .hero-atmosphere{
  inset:0!important;
}

/* =========================================================
   MPS V9.5.2 — HERO TEXT OVERLAY CLEANUP
   Removes the large rectangular dark veil behind the homepage
   heading. Readability is maintained with local text shadows only,
   so no horizontal or box-shaped dark edge remains visible.
   ========================================================= */
.signature-hero .hero-inner::before{
  content:none!important;
  display:none!important;
  background:none!important;
  width:0!important;
  height:0!important;
  filter:none!important;
  opacity:0!important;
}
.signature-hero .hero-inner{
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
.signature-hero .kicker{
  text-shadow:0 2px 8px rgba(0,12,18,.72),0 1px 2px rgba(0,0,0,.7)!important;
}
.signature-hero h1,
.signature-hero h1 strong{
  text-shadow:0 4px 18px rgba(0,10,16,.55),0 2px 4px rgba(0,0,0,.72)!important;
}
.signature-hero .slogan{
  filter:drop-shadow(0 3px 5px rgba(0,8,14,.82))!important;
}
.signature-hero .hero-actions{
  filter:drop-shadow(0 5px 12px rgba(0,8,14,.22));
}

/* =========================================================
   MPS V9.5.3 — LIGHTWEIGHT PREMIUM LIVE ATMOSPHERE
   Sun rays, thin hill mist, restrained night stars, city glow,
   water shimmer and two occasional birds. All motion uses only
   transform and opacity; no canvas, video or animation library.
   ========================================================= */
.signature-hero .hero-atmosphere{
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  z-index:1!important;
  contain:layout paint!important;
}

/* Daytime sun rays: local radial/conic layer, never a dark overlay. */
.signature-hero .sun-glow{
  display:block!important;
  position:absolute!important;
  width:54vw!important;
  height:54vw!important;
  min-width:620px!important;
  min-height:620px!important;
  top:-34vw!important;
  right:-8vw!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle,rgba(255,247,197,.26) 0 8%,rgba(255,235,146,.12) 20%,transparent 58%),
    conic-gradient(from 205deg,transparent 0 8deg,rgba(255,245,199,.10) 8deg 12deg,transparent 12deg 30deg,rgba(255,245,199,.075) 30deg 34deg,transparent 34deg 58deg,rgba(255,245,199,.08) 58deg 62deg,transparent 62deg 360deg)!important;
  filter:blur(2px)!important;
  mix-blend-mode:screen!important;
  opacity:0!important;
  transform:translate3d(0,0,0) rotate(-4deg) scale(.98)!important;
  animation:mpsSunPulse 12s ease-in-out infinite alternate!important;
  will-change:transform,opacity!important;
}
html[data-city-theme="day"] .signature-hero .sun-glow{opacity:.74!important}
html[data-city-theme="night"] .signature-hero .sun-glow{opacity:0!important;animation:none!important}

/* Thin localized mist near the hills, avoiding any full-width hard edge. */
.signature-hero .fog{
  display:block!important;
  position:absolute!important;
  height:12%!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse at center,rgba(238,250,248,.33),rgba(232,246,244,.14) 43%,transparent 73%)!important;
  filter:blur(18px)!important;
  opacity:.23!important;
  mix-blend-mode:screen!important;
  will-change:transform,opacity!important;
}
.signature-hero .fog-a{
  width:47%!important;left:-15%!important;top:38%!important;
  animation:mpsMistA 34s ease-in-out infinite alternate!important;
}
.signature-hero .fog-b{
  width:38%!important;right:-10%!important;left:auto!important;top:43%!important;
  animation:mpsMistB 42s ease-in-out infinite alternate!important;
}
html[data-city-theme="night"] .signature-hero .fog{opacity:.14!important}

/* Water reflection: narrow, soft and clipped to the lower sea area. */
.signature-hero .water-shimmer{
  display:block!important;
  position:absolute!important;
  left:2%!important;right:24%!important;bottom:-2%!important;height:24%!important;
  border-radius:50%!important;
  background:
    repeating-linear-gradient(101deg,transparent 0 7%,rgba(209,246,255,.11) 8%,transparent 10% 17%),
    radial-gradient(ellipse at center,rgba(144,228,238,.14),transparent 70%)!important;
  filter:blur(7px)!important;
  mix-blend-mode:screen!important;
  opacity:.30!important;
  transform:translate3d(-3%,0,0) skewX(-7deg)!important;
  animation:mpsWaterGlide 9s ease-in-out infinite alternate!important;
  will-change:transform,opacity!important;
}
html[data-city-theme="night"] .signature-hero .water-shimmer{
  opacity:.38!important;
  background:repeating-linear-gradient(101deg,transparent 0 8%,rgba(126,205,255,.13) 9%,transparent 11% 18%),radial-gradient(ellipse at center,rgba(72,163,220,.16),transparent 70%)!important;
}

/* Restrained night stars: around 24 visible points, only a few pulse. */
.signature-hero .night-stars{
  display:block!important;
  position:absolute!important;
  inset:0 0 54% 0!important;
  opacity:0!important;
  background-image:
    radial-gradient(circle at 8% 19%,#fff 0 1px,transparent 1.7px),
    radial-gradient(circle at 14% 43%,#fff 0 1px,transparent 1.7px),
    radial-gradient(circle at 20% 12%,#fff 0 1.2px,transparent 1.9px),
    radial-gradient(circle at 27% 34%,#fff 0 .9px,transparent 1.6px),
    radial-gradient(circle at 34% 18%,#fff 0 1px,transparent 1.7px),
    radial-gradient(circle at 40% 46%,#fff 0 1px,transparent 1.7px),
    radial-gradient(circle at 47% 10%,#fff 0 1.1px,transparent 1.8px),
    radial-gradient(circle at 53% 32%,#fff 0 .9px,transparent 1.6px),
    radial-gradient(circle at 59% 17%,#fff 0 1px,transparent 1.7px),
    radial-gradient(circle at 66% 41%,#fff 0 1.2px,transparent 1.9px),
    radial-gradient(circle at 73% 14%,#fff 0 .9px,transparent 1.6px),
    radial-gradient(circle at 79% 35%,#fff 0 1px,transparent 1.7px),
    radial-gradient(circle at 86% 20%,#fff 0 1.1px,transparent 1.8px),
    radial-gradient(circle at 93% 44%,#fff 0 .9px,transparent 1.6px),
    radial-gradient(circle at 11% 31%,rgba(214,235,255,.9) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 25% 48%,rgba(214,235,255,.9) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 38% 7%,rgba(214,235,255,.9) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 50% 24%,rgba(214,235,255,.9) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 63% 8%,rgba(214,235,255,.9) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 70% 29%,rgba(214,235,255,.9) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 82% 7%,rgba(214,235,255,.9) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 90% 32%,rgba(214,235,255,.9) 0 .8px,transparent 1.5px)!important;
  animation:mpsStarsBreathe 7s ease-in-out infinite alternate!important;
  will-change:opacity!important;
}
html[data-city-theme="night"] .signature-hero .night-stars{opacity:.67!important}
html[data-city-theme="day"] .signature-hero .night-stars{opacity:0!important;animation:none!important}

/* Subtle city/window warmth, localized to the lower-right urban zone. */
.signature-hero .night-city-glow{
  display:block!important;
  position:absolute!important;
  right:-3%!important;bottom:4%!important;width:58%!important;height:50%!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 62% 58%,rgba(255,184,76,.18) 0 1.5%,transparent 3%),
    radial-gradient(circle at 43% 44%,rgba(255,203,110,.15) 0 1.2%,transparent 2.8%),
    radial-gradient(circle at 76% 39%,rgba(255,171,66,.15) 0 1.3%,transparent 3%),
    radial-gradient(ellipse at center,rgba(255,160,52,.10),transparent 69%)!important;
  mix-blend-mode:screen!important;
  filter:blur(3px)!important;
  opacity:0!important;
  animation:mpsCityBreath 5.8s ease-in-out infinite alternate!important;
  will-change:opacity,transform!important;
}
html[data-city-theme="night"] .signature-hero .night-city-glow{opacity:.76!important}
html[data-city-theme="day"] .signature-hero .night-city-glow{opacity:0!important;animation:none!important}

/* Two tiny SVG birds, day only, crossing infrequently. */
.signature-hero .bird-flight{
  position:absolute!important;
  left:-90px!important;
  width:58px!important;
  height:24px!important;
  opacity:0!important;
  z-index:2!important;
  color:rgba(18,34,40,.78)!important;
  will-change:transform,opacity!important;
}
.signature-hero .bird-flight svg{width:100%;height:100%;overflow:visible}
.signature-hero .bird-flight path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.signature-hero .bird-flight-a{top:26%!important;animation:mpsBirdA 48s linear infinite!important}
.signature-hero .bird-flight-b{top:33%!important;width:42px!important;animation:mpsBirdB 61s linear 19s infinite!important}
html[data-city-theme="night"] .signature-hero .bird-flight{display:none!important}

@keyframes mpsSunPulse{
  from{transform:translate3d(0,0,0) rotate(-5deg) scale(.97);opacity:.58}
  to{transform:translate3d(-1.2%,1%,0) rotate(-2deg) scale(1.03);opacity:.78}
}
@keyframes mpsMistA{from{transform:translate3d(-8%,0,0) scale(.96);opacity:.17}to{transform:translate3d(28%,3%,0) scale(1.08);opacity:.27}}
@keyframes mpsMistB{from{transform:translate3d(12%,0,0) scale(1.02);opacity:.15}to{transform:translate3d(-28%,2%,0) scale(.95);opacity:.24}}
@keyframes mpsWaterGlide{from{transform:translate3d(-4%,0,0) skewX(-7deg);opacity:.22}to{transform:translate3d(5%,0,0) skewX(-7deg);opacity:.38}}
@keyframes mpsStarsBreathe{from{opacity:.48}to{opacity:.72}}
@keyframes mpsCityBreath{from{opacity:.52;transform:scale(.98)}to{opacity:.78;transform:scale(1.02)}}
@keyframes mpsBirdA{
  0%,12%{transform:translate3d(-100px,0,0) scale(.72);opacity:0}
  15%{opacity:.65}
  52%{transform:translate3d(58vw,-20px,0) scale(.88);opacity:.78}
  84%{opacity:.58}
  88%,100%{transform:translate3d(calc(100vw + 180px),12px,0) scale(.72);opacity:0}
}
@keyframes mpsBirdB{
  0%,26%{transform:translate3d(-100px,0,0) scale(.62);opacity:0}
  29%{opacity:.52}
  62%{transform:translate3d(61vw,15px,0) scale(.74);opacity:.64}
  88%{opacity:.42}
  92%,100%{transform:translate3d(calc(100vw + 160px),-8px,0) scale(.60);opacity:0}
}

@media(max-width:760px){
  .signature-hero .sun-glow{min-width:470px!important;min-height:470px!important;top:-280px!important;right:-210px!important;opacity:.48!important}
  .signature-hero .fog-b,.signature-hero .bird-flight-b{display:none!important}
  .signature-hero .fog-a{width:72%!important;top:39%!important;animation-duration:48s!important}
  .signature-hero .water-shimmer{right:4%!important;height:17%!important;animation-duration:14s!important}
  .signature-hero .bird-flight-a{width:42px!important;animation-duration:62s!important}
  .signature-hero .night-city-glow{width:76%!important;height:35%!important;opacity:.48!important}
  .signature-hero .night-stars{animation:none!important}
}

@media(prefers-reduced-motion:reduce){
  .signature-hero .sun-glow,
  .signature-hero .fog,
  .signature-hero .water-shimmer,
  .signature-hero .night-stars,
  .signature-hero .night-city-glow,
  .signature-hero .bird-flight{
    animation:none!important;
    will-change:auto!important;
  }
  .signature-hero .bird-flight{display:none!important}
}


/* =========================================================
   MPS V9.5.4 — VISIBLE WATER REFLECTION + DAY BIRDS FIX
   Stronger but still lightweight effects. Transform/opacity only.
   ========================================================= */
.signature-hero .water-shimmer{
  display:block!important;
  z-index:1!important;
  left:19%!important;
  right:-4%!important;
  bottom:0!important;
  height:31%!important;
  border-radius:0!important;
  opacity:.62!important;
  filter:blur(3px)!important;
  mix-blend-mode:screen!important;
  background:
    repeating-linear-gradient(96deg,
      transparent 0 4.5%,
      rgba(220,251,255,.04) 5%,
      rgba(220,251,255,.30) 5.7%,
      transparent 6.6% 11.5%),
    repeating-linear-gradient(84deg,
      transparent 0 8%,
      rgba(123,225,244,.20) 8.7%,
      transparent 9.8% 17%),
    radial-gradient(ellipse at 58% 70%,rgba(167,238,248,.24),transparent 67%)!important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.28) 20%,#000 50%,rgba(0,0,0,.88) 100%)!important;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.28) 20%,#000 50%,rgba(0,0,0,.88) 100%)!important;
  animation:mpsWaterGlideVisible 6.8s ease-in-out infinite alternate!important;
  will-change:transform,opacity!important;
}
html[data-city-theme="night"] .signature-hero .water-shimmer{
  opacity:.72!important;
  background:
    repeating-linear-gradient(96deg,transparent 0 5%,rgba(142,213,255,.28) 5.8%,transparent 6.8% 12%),
    repeating-linear-gradient(84deg,transparent 0 9%,rgba(74,165,232,.22) 9.8%,transparent 11% 18%),
    radial-gradient(ellipse at 58% 70%,rgba(77,165,224,.25),transparent 68%)!important;
}
@keyframes mpsWaterGlideVisible{
  0%{transform:translate3d(-5%,1%,0) skewX(-5deg) scaleX(.98);opacity:.46}
  50%{transform:translate3d(0,-1%,0) skewX(-2deg) scaleX(1.01);opacity:.70}
  100%{transform:translate3d(5%,1%,0) skewX(-5deg) scaleX(.98);opacity:.52}
}

/* Birds are now visible soon after load and repeat more often. */
.signature-hero .bird-flight{
  display:block!important;
  z-index:3!important;
  color:rgba(12,31,38,.88)!important;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.28))!important;
}
.signature-hero .bird-flight path{
  stroke-width:3.4!important;
}
.signature-hero .bird-flight-a{
  top:23%!important;
  width:64px!important;
  animation:mpsBirdVisibleA 20s linear 2s infinite!important;
}
.signature-hero .bird-flight-b{
  top:31%!important;
  width:48px!important;
  animation:mpsBirdVisibleB 27s linear 8s infinite!important;
}
html[data-city-theme="day"] .signature-hero .bird-flight{display:block!important}
html[data-city-theme="night"] .signature-hero .bird-flight{display:none!important}
@keyframes mpsBirdVisibleA{
  0%,8%{transform:translate3d(-110px,0,0) scale(.78);opacity:0}
  12%{opacity:.88}
  48%{transform:translate3d(52vw,-18px,0) scale(.94);opacity:.92}
  82%{opacity:.78}
  88%,100%{transform:translate3d(calc(100vw + 150px),8px,0) scale(.78);opacity:0}
}
@keyframes mpsBirdVisibleB{
  0%,15%{transform:translate3d(-100px,0,0) scale(.68);opacity:0}
  19%{opacity:.72}
  55%{transform:translate3d(58vw,12px,0) scale(.82);opacity:.82}
  83%{opacity:.64}
  89%,100%{transform:translate3d(calc(100vw + 140px),-10px,0) scale(.68);opacity:0}
}

@media(max-width:760px){
  .signature-hero .water-shimmer{
    left:14%!important;
    right:-10%!important;
    height:24%!important;
    opacity:.48!important;
    animation-duration:9s!important;
  }
  .signature-hero .bird-flight-a{
    width:46px!important;
    top:25%!important;
    animation-duration:28s!important;
  }
  .signature-hero .bird-flight-b{display:none!important}
}

/* =========================================================
   V9.5.5 — Birds moved into the open cloud/sky zone
   Keeps motion light: transform + opacity only.
   ========================================================= */
.signature-hero .bird-flight-a{
  top:10.5%!important;
  width:62px!important;
  animation:mpsBirdSkyA 20s linear 2s infinite!important;
}
.signature-hero .bird-flight-b{
  top:16.5%!important;
  width:46px!important;
  animation:mpsBirdSkyB 27s linear 8s infinite!important;
}
@keyframes mpsBirdSkyA{
  0%,8%{transform:translate3d(-110px,8px,0) scale(.76);opacity:0}
  12%{opacity:.9}
  48%{transform:translate3d(52vw,-14px,0) scale(.94);opacity:.94}
  82%{opacity:.8}
  88%,100%{transform:translate3d(calc(100vw + 150px),3px,0) scale(.78);opacity:0}
}
@keyframes mpsBirdSkyB{
  0%,15%{transform:translate3d(-100px,-3px,0) scale(.66);opacity:0}
  19%{opacity:.76}
  55%{transform:translate3d(58vw,8px,0) scale(.82);opacity:.84}
  83%{opacity:.68}
  89%,100%{transform:translate3d(calc(100vw + 140px),-8px,0) scale(.68);opacity:0}
}
@media(max-width:760px){
  .signature-hero .bird-flight-a{
    top:12.5%!important;
    width:44px!important;
    animation-duration:28s!important;
  }
}

/* =========================================================
   V9.5.6 — Single second-style gull in the open sky
   Removes the first outline bird and keeps only the fuller gull.
   ========================================================= */
.signature-hero .bird-flight-a{display:none!important}
.signature-hero .bird-flight-b.bird-gull{
  display:block!important;
  top:11.5%!important;
  left:0!important;
  width:78px!important;
  height:auto!important;
  color:rgba(30,43,49,.96)!important;
  z-index:6!important;
  opacity:0;
  filter:drop-shadow(0 2px 2px rgba(255,255,255,.34)) drop-shadow(0 2px 3px rgba(0,0,0,.24))!important;
  animation:mpsSecondGullSky 18s linear 1s infinite!important;
  pointer-events:none!important;
  will-change:transform,opacity;
}
.signature-hero .bird-gull svg{display:block;width:100%;height:auto;overflow:visible}
.signature-hero .bird-gull path{stroke:none!important}
.signature-hero .bird-gull .gull-wing-back{fill:rgba(57,67,71,.92)}
.signature-hero .bird-gull .gull-body{fill:rgba(235,238,238,.96)}
.signature-hero .bird-gull .gull-wing-front{fill:rgba(81,91,96,.95)}
.signature-hero .bird-gull .gull-tail{fill:rgba(224,228,229,.96)}
.signature-hero .bird-gull .gull-eye{fill:#111}
html[data-city-theme="day"] .signature-hero .bird-flight-b.bird-gull{display:block!important}
html[data-city-theme="night"] .signature-hero .bird-flight-b.bird-gull{display:none!important}
@keyframes mpsSecondGullSky{
  0%,4%{transform:translate3d(calc(100vw + 130px),6px,0) scale(.82) rotate(-2deg);opacity:0}
  7%{opacity:.96}
  46%{transform:translate3d(48vw,-15px,0) scale(1) rotate(1deg);opacity:1}
  82%{opacity:.94}
  91%,100%{transform:translate3d(-170px,4px,0) scale(.86) rotate(-1deg);opacity:0}
}
@media(max-width:760px){
  .signature-hero .bird-flight-b.bird-gull{
    display:block!important;
    top:13%!important;
    width:58px!important;
    animation-duration:23s!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .signature-hero .bird-flight-b.bird-gull{display:none!important;animation:none!important}
}


/* =========================================================
   V9.5.7 — Real transparent PNG seagull asset
   Uses assets/images/burung-camar.png and a robust sky path.
   ========================================================= */
.signature-hero .bird-flight-b.bird-gull{
  display:block!important;
  position:absolute!important;
  top:13%!important;
  left:0!important;
  width:96px!important;
  height:auto!important;
  z-index:18!important;
  opacity:0;
  pointer-events:none!important;
  animation:mpsGullPngFlight 16s linear 1.2s infinite!important;
  will-change:transform,opacity;
  filter:none!important;
}
.signature-hero .bird-flight-b.bird-gull img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.28));
}
html[data-city-theme="day"] .signature-hero .bird-flight-b.bird-gull{display:block!important}
html[data-city-theme="night"] .signature-hero .bird-flight-b.bird-gull{display:none!important}
@keyframes mpsGullPngFlight{
  0%{transform:translate3d(calc(100vw + 140px),0,0) scale(.78) rotate(-2deg);opacity:0}
  4%{opacity:1}
  42%{transform:translate3d(56vw,-14px,0) scale(.96) rotate(1deg);opacity:1}
  72%{transform:translate3d(22vw,8px,0) scale(.9) rotate(-1deg);opacity:1}
  93%{opacity:1}
  100%{transform:translate3d(-180px,-4px,0) scale(.8) rotate(0deg);opacity:0}
}
@media(max-width:760px){
  .signature-hero .bird-flight-b.bird-gull{
    top:15%!important;
    width:68px!important;
    animation-duration:21s!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .signature-hero .bird-flight-b.bird-gull{display:none!important;animation:none!important}
}

/* =========================================================
   MPS V9.6.0 — PREMIUM ACCESSIBILITY MENU
   ========================================================= */
.access-btn{left:22px!important;right:auto!important;bottom:calc(22px + env(safe-area-inset-bottom,0px))!important;width:58px!important;height:58px!important;border:2px solid rgba(255,255,255,.92)!important;border-radius:50%!important;background:linear-gradient(145deg,#0f8f88,#075a62)!important;color:#fff!important;box-shadow:0 12px 30px rgba(0,28,40,.24),0 0 0 5px rgba(64,216,189,.16)!important;transition:transform .2s ease,box-shadow .2s ease!important}.access-btn svg{width:31px;height:31px}.access-btn:hover{transform:translateY(-3px) scale(1.03)!important}.access-btn[aria-expanded="true"]{background:linear-gradient(145deg,#e7b84b,#c98f20)!important;color:#08202a!important}.access-tooltip{position:absolute;left:68px;white-space:nowrap;padding:8px 11px;border-radius:8px;background:#031923;color:#fff;font-size:11px;font-weight:800;opacity:0;visibility:hidden;transform:translateX(-5px);transition:.18s;pointer-events:none}.access-btn:hover .access-tooltip,.access-btn:focus-visible .access-tooltip{opacity:1;visibility:visible;transform:none}
.access-panel{display:flex!important;flex-direction:column;left:22px!important;right:auto!important;bottom:92px!important;width:min(430px,calc(100vw - 44px))!important;max-height:min(720px,calc(100dvh - 120px))!important;padding:0!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.5)!important;border-radius:24px!important;background:rgba(250,253,252,.97)!important;box-shadow:0 28px 80px rgba(0,24,34,.28)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);opacity:0;visibility:hidden;transform:translateY(18px) scale(.97);transform-origin:left bottom;transition:.22s;pointer-events:none}.access-panel.open{opacity:1;visibility:visible;transform:none;pointer-events:auto}.access-head{display:flex;justify-content:space-between;gap:18px;padding:24px 24px 20px;background:linear-gradient(135deg,#052b36,#087069);color:#fff}.access-kicker{display:block;margin-bottom:5px;color:#f1cd70;font-size:9px;font-weight:900;letter-spacing:.14em}.access-head h2{margin:0;font-size:24px}.access-head p{margin:7px 0 0;color:#d7e9e8;font-size:12px}.access-close{flex:0 0 38px;width:38px!important;height:38px;margin:0!important;padding:0!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:50%!important;background:rgba(255,255,255,.1)!important;color:#fff!important;font-size:25px!important}.access-scroll{overflow:auto;padding:20px 22px 8px}.access-section{padding-bottom:18px}.access-section+.access-section{padding-top:18px;border-top:1px solid #dce8e7}.access-section-title{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}.access-section-title h3{margin:0;font-size:14px}.access-section-title span{color:#74878d;font-size:10px}.access-profile-grid{display:grid;gap:9px}.access-profile{display:grid!important;grid-template-columns:40px 1fr 20px;align-items:center;gap:11px;width:100%;margin:0!important;padding:12px!important;text-align:left;border:1px solid #dce7e6!important;border-radius:14px!important;background:#fff!important;color:#17343c!important}.access-profile.active{border-color:#0e7c78!important;background:#e8f7f4!important;box-shadow:inset 3px 0 #0e7c78}.access-profile-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:#e9f5f3;color:#08716b;font-size:18px;font-weight:900}.access-profile b,.access-profile small{display:block}.access-profile b{font-size:12px}.access-profile small{margin-top:2px;color:#687982;font-size:10px}.access-profile i{position:relative;width:18px;height:18px;border:1.5px solid #a9babc;border-radius:50%}.access-profile.active i{border-color:#0e7c78;background:#0e7c78}.access-profile.active i::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:11px;font-style:normal}.access-control-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.access-control-grid button{display:flex!important;align-items:center;gap:9px;margin:0!important;padding:11px!important;border:1px solid #dce7e6!important;border-radius:12px!important;background:#fff!important;color:#17343c!important;text-align:left}.access-control-grid button span{display:grid;place-items:center;min-width:31px;height:31px;border-radius:9px;background:#edf6f4;color:#08716b;font-weight:900}.access-control-grid button b{font-size:11px}.access-control-grid button.active{border-color:#0e7c78!important;background:#e8f7f4!important}.access-panel .access-theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.access-panel .access-theme-grid button{margin:0!important;padding:10px 5px!important;border:1px solid #d8e4e3!important;border-radius:10px!important;background:#fff!important;color:#17343c!important;font-size:10px!important;font-weight:900}.access-panel .access-theme-grid button.active{border-color:#e7b84b!important;background:#f7df9e!important}.access-footer{display:grid;grid-template-columns:1fr 1.25fr;gap:9px;padding:15px 22px calc(15px + env(safe-area-inset-bottom,0px));border-top:1px solid #dce8e7;background:#f5f9f8}.access-footer .access-reset,.access-footer a{display:flex;align-items:center;justify-content:center;min-height:42px;margin:0!important;padding:9px!important;border-radius:11px;font-size:10px;font-weight:850;text-align:center}.access-footer .access-reset{border:1px solid #d8e3e2!important;background:#fff!important}.access-footer a{background:#073f49;color:#fff}
html.a11y-largeText{font-size:112.5%}html.a11y-reading body{letter-spacing:.035em;line-height:1.8}html.a11y-reading p,html.a11y-reading li,html.a11y-reading a{word-spacing:.09em}html.a11y-underline a:not(.btn):not(.brand){text-decoration:underline!important;text-underline-offset:3px}html.a11y-cursor,html.a11y-cursor *{cursor:crosshair!important}html.a11y-grayscale{filter:grayscale(1)}html.a11y-focus :focus-visible{outline:4px solid #ffcf33!important;outline-offset:4px!important;box-shadow:0 0 0 7px rgba(0,31,40,.85)!important}html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}html.a11y-motion .mps-bird,html.a11y-motion .bird-layer{display:none!important}
@media(max-width:700px){.access-btn{left:14px!important;right:auto!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;width:54px!important;height:54px!important}.access-tooltip{display:none}.access-panel{left:10px!important;right:10px!important;bottom:78px!important;width:auto!important;max-height:calc(100dvh - 92px)!important;border-radius:20px!important}.access-head{padding:20px 18px 17px}.access-scroll{padding:17px 16px 6px}.access-footer{padding-left:16px;padding-right:16px}}
@media(max-width:390px){.access-control-grid,.access-footer{grid-template-columns:1fr}}


/* =========================================================
   MPS V9.6.0 — ACCESSIBILITY FLOATING STACK (RIGHT)
   Accessibility stays at the lower-right corner while the
   back-to-top control sits neatly above it without overlap.
========================================================= */
.access-btn{
  left:auto!important;
  right:22px!important;
  bottom:calc(22px + env(safe-area-inset-bottom,0px))!important;
}
.access-tooltip{
  left:auto!important;
  right:68px!important;
  transform:translateX(5px)!important;
}
.access-btn:hover .access-tooltip,
.access-btn:focus-visible .access-tooltip{
  transform:none!important;
}
.access-panel{
  left:auto!important;
  right:22px!important;
  bottom:92px!important;
  transform-origin:right bottom!important;
}
.mps-back-top{
  right:28px!important;
  bottom:calc(255px + env(safe-area-inset-bottom,0px))!important;
  z-index:1000!important;
}
@media(max-width:700px){
  .access-btn{
    left:auto!important;
    right:14px!important;
    bottom:calc(235px + env(safe-area-inset-bottom,0px))!important;
    }
  .access-panel{
    left:10px!important;
    right:10px!important;
    bottom:78px!important;
    transform-origin:right bottom!important;
  }
  .mps-back-top{
    right:20px!important;
    bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;
  }
}

/* =========================================================
   MPS V9.6.1 — VISIBLE SUN RAYS + REALISTIC SEAGULL
   ========================================================= */
.signature-hero .sun-glow{
  width:780px!important;
  height:780px!important;
  min-width:780px!important;
  min-height:780px!important;
  top:-390px!important;
  left:-270px!important;
  right:auto!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,225,.72) 0 3%,rgba(255,238,164,.38) 8%,rgba(255,225,123,.14) 22%,transparent 52%),
    repeating-conic-gradient(from 8deg at 50% 50%,rgba(255,248,212,.24) 0 2.2deg,transparent 2.2deg 12deg)!important;
  filter:blur(5px)!important;
  mix-blend-mode:screen!important;
  transform:rotate(-7deg)!important;
  transform-origin:center!important;
}
html[data-city-theme="day"] .signature-hero .sun-glow{
  opacity:.92!important;
  animation:mpsSunRaysVisible 10s ease-in-out infinite alternate!important;
}
@keyframes mpsSunRaysVisible{
  from{transform:rotate(-8deg) scale(.98);opacity:.78}
  to{transform:rotate(-5deg) scale(1.04);opacity:.96}
}
.signature-hero .bird-flight-b.bird-gull{
  width:126px!important;
  top:12%!important;
  animation-duration:18s!important;
}
.signature-hero .bird-flight-b.bird-gull img{
  filter:drop-shadow(0 3px 4px rgba(0,26,42,.28))!important;
}
@media(max-width:760px){
  .signature-hero .sun-glow{
    width:520px!important;
    height:520px!important;
    min-width:520px!important;
    min-height:520px!important;
    top:-280px!important;
    left:-225px!important;
    filter:blur(4px)!important;
  }
  .signature-hero .bird-flight-b.bird-gull{
    width:86px!important;
    top:14%!important;
  }
}
@media(prefers-reduced-motion:reduce){
  html[data-city-theme="day"] .signature-hero .sun-glow{animation:none!important}
}


/* =========================================================
   MPS V9.6.2 — CLEAN HERO (NO BIRDS)
   Bird artwork and markup removed by design decision.
   All other atmosphere effects, including sun rays, remain.
   ========================================================= */
.signature-hero .bird-flight,
.signature-hero .bird-gull,
.signature-hero .mps-bird,
.signature-hero .bird-layer{display:none!important;animation:none!important;}


/* =========================================================
   MPS V9.7.0 — TOPBAR PORTAL TITLE
   Hero navy panel removed to preserve the full Sandakan view.
   The official portal title is centered in the upper information bar.
   ========================================================= */
.signature-hero .hero-inner{
  width:min(1450px,94%)!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:120px 0 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  isolation:auto!important;
}
.signature-hero .hero-inner::before,
.signature-hero .hero-inner::after{content:none!important;display:none!important;}
.topbar-inner{position:relative;align-items:center;}
.topbar-portal-title{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:3px 18px;
  border:1px solid rgba(231,184,75,.58);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:#f4d377;
  font-size:11px;
  font-weight:800;
  line-height:1;
  letter-spacing:.105em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
@media(max-width:1120px){
  .topbar-portal-title{font-size:9px;padding-inline:11px;letter-spacing:.07em;}
}
@media(max-width:900px){
  .topbar-portal-title{display:none;}
}
@media(max-width:760px){
  .signature-hero .hero-inner{
    width:94%!important;
    margin-left:auto!important;
    padding:112px 0 0!important;
  }
}


/* =========================================================
   MPS V9.7.1 — VERIFIED TOPBAR PORTAL TITLE
   Uses a real three-column grid so the title cannot hide
   behind the date/time or utility links.
   ========================================================= */
.topbar{overflow:visible!important;}
.topbar .topbar-inner{
  width:min(1450px,100%)!important;
  display:grid!important;
  grid-template-columns:minmax(250px,1fr) auto minmax(250px,1fr)!important;
  align-items:center!important;
  column-gap:22px!important;
  position:relative!important;
}
.topbar .topbar-datetime{
  justify-self:start!important;
  position:relative!important;
  z-index:2!important;
}
.topbar .topbar-links{
  justify-self:end!important;
  position:relative!important;
  z-index:2!important;
}
.topbar .topbar-portal-title{
  position:static!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  justify-self:center!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:24px!important;
  max-width:100%!important;
  padding:4px 18px!important;
  border:1px solid rgba(231,184,75,.78)!important;
  border-radius:999px!important;
  background:rgba(231,184,75,.10)!important;
  color:#f4d377!important;
  font-size:10px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.085em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  text-shadow:0 1px 8px rgba(0,0,0,.45)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 0 18px rgba(231,184,75,.08)!important;
  z-index:3!important;
}
@media(max-width:1180px){
  .topbar .topbar-inner{grid-template-columns:auto 1fr auto!important;column-gap:12px!important;}
  .topbar .topbar-portal-title{font-size:8px!important;padding:4px 10px!important;letter-spacing:.045em!important;}
  .topbar .topbar-datetime,.topbar .topbar-links{font-size:10px!important;}
}
@media(max-width:940px){
  .topbar .topbar-portal-title{display:none!important;}
  .topbar .topbar-inner{display:flex!important;justify-content:space-between!important;}
}

/* Remove any legacy official portal kicker from the hero itself. */
.signature-hero .kicker,
.signature-hero .hero-kicker,
.signature-hero [class*="portal-kicker"]{display:none!important;}


/* =========================================================
   MPS V9.7.2 — HERO CLOUD PORTAL LABEL
   Removes the portal title from the utility topbar and places
   a soft cloud-backed "Portal Rasmi" label above the hero title.
   ========================================================= */
.topbar .topbar-inner{
  display:flex!important;
  grid-template-columns:none!important;
  justify-content:space-between!important;
  gap:24px!important;
}
.topbar .topbar-portal-title{display:none!important;}

.signature-hero .hero-portal-cloud{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:clamp(250px,28vw,430px);
  min-height:82px;
  margin:2px 0 -4px -12px;
  padding:18px 52px 16px;
  isolation:isolate;
  pointer-events:none;
}
.signature-hero .hero-portal-cloud::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-34px -72px -28px -66px;
  background:url('../images/cloud-1.png') center/100% 100% no-repeat;
  opacity:.88;
  filter:drop-shadow(0 8px 18px rgba(2,24,34,.16));
}
.signature-hero .hero-portal-cloud::after{
  content:"";
  position:absolute;
  z-index:-2;
  inset:-16px -38px -16px -30px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.55) 0%,rgba(255,255,255,.20) 48%,transparent 74%);
  filter:blur(10px);
}
.signature-hero .hero-portal-cloud span{
  color:#8b5d0b;
  font-size:clamp(12px,1.05vw,16px);
  font-weight:950;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.95),0 2px 10px rgba(61,43,11,.22);
}
html[data-city-theme="night"] .signature-hero .hero-portal-cloud::before{opacity:.72;filter:brightness(.86) drop-shadow(0 8px 20px rgba(0,0,0,.28));}
html[data-city-theme="night"] .signature-hero .hero-portal-cloud span{color:#f0c969;text-shadow:0 2px 10px rgba(0,0,0,.72);}

@media(max-width:760px){
  .signature-hero .hero-portal-cloud{
    width:clamp(220px,72vw,330px);
    min-height:66px;
    margin:0 0 -2px -18px;
    padding:14px 40px 12px;
  }
  .signature-hero .hero-portal-cloud::before{inset:-26px -54px -22px -48px;}
  .signature-hero .hero-portal-cloud span{font-size:11px;letter-spacing:.14em;}
}
@media(max-width:420px){
  .signature-hero .hero-portal-cloud{width:235px;margin-left:-20px;}
}

/* v9.8.0 CMS Presiden: imej arkib dinamik */
.president-card__portrait>img{width:100%;height:100%;object-fit:cover;display:block}.president-card__portrait{overflow:hidden;position:relative}.president-card__portrait>small{position:absolute;right:14px;bottom:12px;z-index:2}


/* v10.1.0 CMS dan direktori Ahli Majlis */
.council-directory{padding:70px 0 90px;background:linear-gradient(180deg,#f6faf9,#eef5f3)}
.council-directory-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}.council-directory-head h2{font-size:clamp(2rem,4vw,3.7rem);margin:4px 0 10px}.council-directory-head p{max-width:760px;color:var(--muted)}.council-count{min-width:120px;text-align:center;padding:16px 20px;border:1px solid rgba(14,124,120,.2);border-radius:20px;background:#fff}.council-count strong{display:block;font-size:2rem;color:var(--teal)}.council-count span{font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.council-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.council-card{position:relative;display:grid;grid-template-columns:160px 1fr;min-height:290px;background:#fff;border:1px solid #dbe7e5;border-radius:24px;overflow:hidden;box-shadow:0 16px 38px rgba(0,28,40,.08)}.council-card__number{position:absolute;right:18px;top:13px;font-size:2.6rem;font-weight:950;color:#e7efee}.council-card__portrait{min-height:290px;background:linear-gradient(145deg,#deeeeb,#f7faf9);display:grid;place-items:center;overflow:hidden}.council-card__portrait img{width:100%;height:100%;object-fit:cover}.council-card__portrait span{width:118px;height:118px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(14,124,120,.2);font-size:2rem;font-weight:950;color:#35636a;background:rgba(255,255,255,.6)}.council-card__content{padding:28px 26px 24px;position:relative;z-index:1}.council-card__content h3{font-size:1.15rem;line-height:1.25;margin:0 46px 18px 0;text-transform:uppercase}.committee-group{margin-top:14px}.committee-group h4{margin:0 0 8px;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--teal)}.committee-group.chair h4{color:#9a6b0b}.committee-group ul{margin:0;padding-left:18px}.committee-group li{margin:4px 0;color:#334c54;line-height:1.35;font-size:.92rem}.committee-empty{color:var(--muted);font-style:italic}
@media(max-width:1050px){.council-grid{grid-template-columns:1fr}.council-card{grid-template-columns:180px 1fr}}
@media(max-width:650px){.council-directory{padding:45px 0 65px}.council-directory-head{align-items:flex-start;flex-direction:column}.council-card{grid-template-columns:1fr}.council-card__portrait{height:330px;min-height:0}.council-card__content{padding:23px 20px}.council-card__number{top:342px}.council-card__content h3{margin-right:50px}}

/* ===== MPS v10.3.0 Corporate Pages ===== */
.corporate-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#031923 0%,#073c48 62%,#0e7c78 100%)}
.corporate-hero:after{content:"";position:absolute;right:-8%;top:-45%;width:48%;height:160%;border:1px solid rgba(255,255,255,.12);border-radius:50%;transform:rotate(-15deg)}
.corporate-page{background:#f3f7f6;padding-block:72px 90px}
.corporate-intro{max-width:900px;margin-bottom:42px}.corporate-intro h2{font-size:clamp(2rem,4vw,4.2rem);line-height:1.04;margin:.25rem 0 1rem;color:#0b2730}.corporate-intro>p:last-child{font-size:1.08rem;color:#5e7078;max-width:760px}
.corp-section{background:#fff;border:1px solid #dce7e7;border-radius:24px;padding:34px;margin:0 0 24px;box-shadow:0 15px 45px rgba(2,38,48,.06)}
.corp-section.compact{margin:0}.corp-heading{display:flex;gap:18px;align-items:flex-start;margin-bottom:24px}.corp-heading>span{display:grid;place-items:center;min-width:52px;height:52px;border-radius:50%;background:#e6f5f1;color:#0e7c78;font-weight:800}.corp-heading small,.vision-card small{color:#92701e;font-weight:800;letter-spacing:.15em}.corp-heading h3{font-size:1.65rem;margin:.2rem 0 0;color:#102a33}.corp-copy{color:#4f626a;line-height:1.8}.corp-copy p:first-child{margin-top:0}.corp-copy p:last-child{margin-bottom:0}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat-card{background:#f3f8f7;border-radius:18px;padding:24px}.stat-card b{display:block;font-size:2.6rem;color:#0e7c78;line-height:1}.stat-card span{display:block;margin-top:9px;color:#52676f}
.committee-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.committee-grid span{padding:13px 15px;border-radius:12px;background:#f3f7f6;color:#203941;font-weight:650}.corp-note{margin:22px 0 0;padding:18px 20px;border-left:4px solid #e7b84b;background:#fffaf0;border-radius:0 12px 12px 0}.corp-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}.premium-list{margin:0;padding-left:22px;line-height:1.8;color:#4f626a}
.vision-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;margin-bottom:24px}.vision-card{position:relative;min-height:320px;padding:38px;border-radius:26px;background:#fff;border:1px solid #dce7e7;box-shadow:0 15px 45px rgba(2,38,48,.06);overflow:hidden}.vision-card.feature{background:linear-gradient(145deg,#062832,#0b545b);color:#fff}.vision-card h3{font-size:2rem;line-height:1.15;margin:.7rem 0 1rem}.vision-card:not(.feature) h3{color:#102a33}.vision-card p{font-size:1.05rem;line-height:1.75;color:#63747b}.vision-card.feature p{color:#d8e7e7}.vision-no{position:absolute;right:25px;bottom:-15px;font-size:7rem;font-weight:900;opacity:.07}.objective-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.objective-grid>div{display:grid;grid-template-columns:50px 1fr;gap:15px;align-items:start;padding:20px;border-radius:16px;background:#f4f8f7}.objective-grid b{color:#0e7c78;font-size:1.2rem}.objective-grid p{margin:0;color:#465d65}
.pledge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.pledge-card{position:relative;background:#fff;border:1px solid #dce7e7;border-radius:24px;padding:34px;min-height:310px;box-shadow:0 15px 45px rgba(2,38,48,.06)}.pledge-card>span{position:absolute;right:24px;top:20px;font-size:3.5rem;font-weight:900;color:#edf2f1}.pledge-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;background:#e7f5f1;color:#0e7c78;font-size:1.6rem;margin-bottom:28px}.pledge-card h3{font-size:1.45rem;color:#102a33}.pledge-card p{line-height:1.75;color:#5a6c73}.service-banner{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:26px;border-radius:24px;padding:32px 38px;background:linear-gradient(110deg,#0c716d,#0a303a);color:#fff}.service-banner small{color:#f1cb72;font-weight:800;letter-spacing:.14em}.service-banner h3{font-size:2rem;margin:.3rem 0 0}.service-banner p{margin:0;color:#d9e8e7}
.profile-motto .quote-close{margin-left:3px}
@media(max-width:900px){.stat-grid,.pledge-grid{grid-template-columns:1fr 1fr}.committee-grid{grid-template-columns:1fr 1fr}.corp-two,.vision-grid{grid-template-columns:1fr}.objective-grid{grid-template-columns:1fr}}
@media(max-width:600px){.corporate-page{padding-block:44px 64px}.corp-section,.vision-card,.pledge-card{padding:24px}.stat-grid,.pledge-grid,.committee-grid{grid-template-columns:1fr}.objective-grid>div{grid-template-columns:42px 1fr}.service-banner{display:block;padding:26px}.service-banner p{margin-top:14px}.corporate-intro h2{font-size:2.3rem}}


/* v10.4.0 — Unified internal-page hero and full accessibility panel */
.unified-page-hero{position:relative;min-height:460px;display:flex;align-items:center;overflow:hidden;background:
 linear-gradient(90deg,rgba(2,25,35,.96) 0%,rgba(2,31,42,.88) 38%,rgba(2,39,49,.66) 72%,rgba(3,79,82,.52) 100%),
 url('../images/hero-city-night.jpg') center 44%/cover no-repeat}
.unified-page-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.18));pointer-events:none}
.unified-page-hero .inner-hero__content{position:relative;z-index:2;padding-top:56px;padding-bottom:60px}
.unified-page-hero .breadcrumb{margin-bottom:32px;color:rgba(255,255,255,.78)}
.unified-page-hero .breadcrumb a{color:rgba(255,255,255,.78)}
.unified-page-hero .eyebrow{color:#efca70;letter-spacing:.22em;text-transform:uppercase;font-weight:800}
.unified-page-hero h1{font-size:clamp(3.25rem,6vw,6.4rem);line-height:.96;letter-spacing:-.055em;color:#fff;margin:.25rem 0 1.35rem;max-width:1050px}
.unified-page-hero h1 span{color:#efc65c}
.unified-page-hero .inner-hero__lead{max-width:850px;color:rgba(255,255,255,.9);font-size:clamp(1.08rem,1.6vw,1.5rem);line-height:1.55}
@media(max-width:760px){.unified-page-hero{min-height:390px}.unified-page-hero .inner-hero__content{padding-top:40px;padding-bottom:44px}.unified-page-hero h1{font-size:clamp(2.7rem,13vw,4.3rem)}}

/* =========================================================
   MPS v10.6.0 — CARTA ORGANISASI INTERAKTIF
   ========================================================= */
.org-hero{
  position:relative;
  min-height:460px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(2,25,35,.96) 0%,rgba(2,31,42,.88) 40%,rgba(2,39,49,.64) 75%,rgba(3,79,82,.48) 100%),
    url('../images/hero-city-night.jpg') center 44%/cover no-repeat;
}
.org-hero .profile-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.2));pointer-events:none}
.org-hero .profile-hero-inner{position:relative;z-index:2;width:min(1450px,92%);margin:auto;padding:78px 0 64px}
.org-hero .profile-breadcrumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 32px;color:rgba(255,255,255,.78);font-size:.92rem}
.org-hero .profile-breadcrumb a{color:rgba(255,255,255,.82)}
.org-hero .section-label{color:#efca70;letter-spacing:.22em;font-weight:900;margin:0 0 12px}
.org-hero h1{margin:0 0 20px;color:#fff;font-size:clamp(3.3rem,6vw,6.4rem);line-height:.96;letter-spacing:-.055em}
.org-hero h1 span{color:#efc65c}
.org-hero .profile-hero-inner>p:last-child{max-width:840px;margin:0;color:rgba(255,255,255,.9);font-size:clamp(1.05rem,1.6vw,1.42rem);line-height:1.55}

.org-public-section{padding:78px 0 100px;background:linear-gradient(180deg,#f7faf9 0%,#edf5f3 100%)}
.org-public-section>.container{width:min(1450px,92%);margin-inline:auto}
.org-heading{max-width:900px;margin:0 0 38px}
.org-heading .section-label{margin:0 0 10px;color:var(--teal);letter-spacing:.18em;font-weight:900}
.org-heading h2{margin:0 0 12px;color:#0b2730;font-size:clamp(2.1rem,4vw,4rem);line-height:1.05;letter-spacing:-.04em}
.org-heading>p:last-child{margin:0;color:#60727a;font-size:1.06rem;line-height:1.7}
.org-heading.compact{margin-top:58px;margin-bottom:24px}
.org-heading.compact h2{font-size:clamp(1.8rem,3vw,2.8rem)}

.org-leadership{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0 0 56px}
.org-leadership:after{content:"";position:absolute;left:8%;right:8%;bottom:-29px;height:1px;background:linear-gradient(90deg,transparent,#b9ceca 12%,#b9ceca 88%,transparent)}
.org-person-card{position:relative;display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;gap:20px;min-height:154px;padding:20px;border:1px solid #d7e5e2;border-radius:24px;background:#fff;box-shadow:0 18px 45px rgba(2,38,48,.08);overflow:hidden}
.org-person-card:before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--gold),var(--teal))}
.org-person-card img{width:118px;height:118px;object-fit:cover;border-radius:18px;background:#e7f0ee;border:1px solid #d6e3e0}
.org-person-card span{display:block;margin-bottom:6px;color:#8b6814;font-size:.74rem;font-weight:950;letter-spacing:.1em;text-transform:uppercase}
.org-person-card h3{margin:0;color:#102a33;font-size:1.18rem;line-height:1.3;text-transform:uppercase}
.org-person-card p{margin:7px 0 0;color:#63757b;font-size:.86rem}

.org-sector-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
.org-sector-card{overflow:hidden;border:1px solid #d6e4e1;border-radius:24px;background:#fff;box-shadow:0 16px 40px rgba(2,38,48,.07)}
.org-sector-card>header{position:relative;min-height:142px;padding:30px 28px;background:linear-gradient(135deg,#062b35,#0b716e);color:#fff;overflow:hidden}
.org-sector-card>header:after{content:"";position:absolute;width:150px;height:150px;right:-50px;top:-55px;border:1px solid rgba(255,255,255,.17);border-radius:50%}
.org-sector-card>header span{position:relative;z-index:1;display:block;margin-bottom:9px;color:#f0cb70;font-size:.7rem;font-weight:950;letter-spacing:.18em}
.org-sector-card>header h3{position:relative;z-index:1;margin:0;font-size:1.35rem;line-height:1.25;text-transform:uppercase}
.org-unit-list{padding:16px}
.org-unit{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:14px;padding:13px;border-radius:16px;transition:transform .2s ease,background .2s ease}
.org-unit+.org-unit{border-top:1px solid #e8efed}
.org-unit:hover{transform:translateY(-2px);background:#f3f8f7}
.org-unit img{width:62px;height:62px;object-fit:cover;border-radius:14px;background:#e9f1ef;border:1px solid #d8e4e1}
.org-unit small{display:block;margin-bottom:3px;color:#0e7c78;font-size:.68rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;line-height:1.3}
.org-unit b{display:block;color:#173139;font-size:.92rem;line-height:1.32;text-transform:uppercase}
.org-unit span{display:block;margin-top:4px;color:#6b7d83;font-size:.72rem}
.org-direct{margin-top:12px}
.org-direct-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.org-direct-grid .org-unit{border:1px solid #d9e6e3;border-radius:18px;background:#fff;box-shadow:0 10px 26px rgba(2,38,48,.05)}

@media(max-width:1150px){
  .org-leadership,.org-sector-grid,.org-direct-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .org-hero{min-height:390px}
  .org-hero .profile-hero-inner{padding:52px 0 48px}
  .org-hero h1{font-size:clamp(2.8rem,13vw,4.4rem)}
  .org-public-section{padding:50px 0 70px}
  .org-leadership,.org-sector-grid,.org-direct-grid{grid-template-columns:1fr}
  .org-person-card{grid-template-columns:92px minmax(0,1fr);min-height:126px;padding:16px}
  .org-person-card img{width:92px;height:92px}
  .org-person-card h3{font-size:1rem}
  .org-sector-card>header{min-height:118px;padding:24px 22px}
}
@media(max-width:420px){
  .org-person-card{grid-template-columns:76px minmax(0,1fr);gap:13px}
  .org-person-card img{width:76px;height:76px;border-radius:14px}
  .org-unit{grid-template-columns:54px minmax(0,1fr);padding:11px}
  .org-unit img{width:54px;height:54px}
}

/* =========================================================
   MPS v10.7.0 — HUBUNGAN PENYELIA & MODAL PEGAWAI
   ========================================================= */
.org-clickable{cursor:pointer}
.org-clickable:focus-visible{outline:4px solid rgba(231,184,75,.55);outline-offset:4px}
.org-flow .org-person-card:after{content:"";position:absolute;left:50%;bottom:-22px;width:2px;height:22px;background:#b7ceca}
.org-reports{display:block;margin-top:9px;color:#0e7c78;font-size:.72rem;font-weight:800}
.org-sector-card{position:relative}
.org-sector-card:before{content:"";position:absolute;left:50%;top:-22px;width:2px;height:22px;background:#b7ceca;z-index:2}
.org-supervisor{position:relative;z-index:2;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22)}
.org-supervisor:before{content:"↓ DISELIA OLEH";display:block;margin-bottom:5px;color:rgba(255,255,255,.7);font-size:.62rem;font-weight:900;letter-spacing:.14em}
.org-supervisor b,.org-supervisor small{display:block;color:#fff}
.org-supervisor b{font-size:.82rem;line-height:1.25}.org-supervisor small{margin-top:3px;font-size:.72rem;opacity:.8}
.org-profile-dialog{width:min(820px,92vw);padding:0;border:0;border-radius:28px;background:#fff;color:#102a33;box-shadow:0 35px 100px rgba(0,20,28,.35)}
.org-profile-dialog::backdrop{background:rgba(0,22,30,.68);backdrop-filter:blur(5px)}
.org-dialog-close{position:absolute;right:18px;top:18px;z-index:2;width:44px;height:44px;border:1px solid #d8e5e2;border-radius:50%;background:#fff;color:#173139;font-size:1.8rem;line-height:1;cursor:pointer}
.org-dialog-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:34px;padding:38px}
.org-dialog-grid>img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:22px;background:#edf4f2;border:1px solid #d8e5e2}
.org-dialog-grid .section-label{margin:8px 0 8px;color:#0e7c78;font-size:.75rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.org-dialog-grid h2{margin:0;color:#102a33;font-size:clamp(1.65rem,3vw,2.45rem);line-height:1.08;text-transform:uppercase}
.org-dialog-grade{margin:10px 0 24px;color:#687982;font-weight:700}
.org-dialog-grid dl{display:grid;gap:10px;margin:0 0 22px}.org-dialog-grid dl div{padding:11px 14px;border-radius:13px;background:#f1f7f5}.org-dialog-grid dt{font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#0e7c78}.org-dialog-grid dd{margin:3px 0 0;font-weight:700;color:#173139}
.org-dialog-summary{margin:0;color:#5f7279;line-height:1.7}
@media(max-width:700px){.org-dialog-grid{grid-template-columns:1fr;padding:24px}.org-dialog-grid>img{width:150px;aspect-ratio:1;margin:0 auto;border-radius:50%}.org-dialog-close{right:10px;top:10px}.org-supervisor b{font-size:.76rem}}

/* v10.8.0 — susunan 4 kepimpinan utama seperti lakaran */
.org-leadership.org-flow{
  position:relative;display:grid;grid-template-columns:minmax(250px,1fr) minmax(290px,1.15fr) minmax(250px,1fr);
  grid-template-areas:
    ". president ."
    "tp1 . tp2"
    ". secretary .";
  gap:34px 48px;align-items:center;max-width:1180px;margin:0 auto 72px;padding:0 18px;
}
.org-leadership .org-slot-president{grid-area:president}.org-leadership .org-slot-tp1{grid-area:tp1}.org-leadership .org-slot-tp2{grid-area:tp2}.org-leadership .org-slot-secretary{grid-area:secretary}.org-leadership .org-slot-other{grid-column:auto}
.org-leadership.org-flow:before{content:"";position:absolute;left:50%;top:150px;bottom:145px;width:2px;background:#b7ceca;transform:translateX(-50%);z-index:0}
.org-leadership.org-flow:after{content:"";position:absolute;left:16.5%;right:16.5%;top:202px;height:2px;background:#b7ceca;z-index:0}
.org-leadership .org-person-card{position:relative;z-index:1;width:100%;max-width:none;margin:0;background:#fff}
.org-leadership .org-person-card:after{display:none}
.org-leadership .org-slot-president:after,.org-leadership .org-slot-tp1:after,.org-leadership .org-slot-tp2:after,.org-leadership .org-slot-secretary:after{content:"";display:block;position:absolute;background:#b7ceca;z-index:-1}
.org-leadership .org-slot-president:after{left:50%;bottom:-34px;width:2px;height:34px}
.org-leadership .org-slot-tp1:after{right:-48px;top:50%;width:48px;height:2px}
.org-leadership .org-slot-tp2:after{left:-48px;top:50%;width:48px;height:2px}
.org-leadership .org-slot-secretary:after{left:50%;top:-34px;width:2px;height:34px}
@media(max-width:900px){.org-leadership.org-flow{grid-template-columns:1fr 1fr;grid-template-areas:"president president" "tp1 tp2" "secretary secretary";gap:24px}.org-leadership.org-flow:before,.org-leadership.org-flow:after,.org-leadership .org-person-card:after{display:none}.org-leadership .org-slot-president,.org-leadership .org-slot-secretary{max-width:540px;justify-self:center}}
@media(max-width:620px){.org-leadership.org-flow{grid-template-columns:1fr;grid-template-areas:"president" "tp1" "tp2" "secretary";padding:0;gap:16px}}


/* v10.8.1 — empat kepimpinan utama tanpa garisan penghubung */
.org-leadership.org-flow:before,
.org-leadership.org-flow:after,
.org-leadership .org-slot-president:after,
.org-leadership .org-slot-tp1:after,
.org-leadership .org-slot-tp2:after,
.org-leadership .org-slot-secretary:after{
  content:none !important;
  display:none !important;
}

/* v10.8.2 — Jabatan, Bahagian dan Unit terus di bawah Presiden */
.org-direct{margin-top:52px;margin-bottom:58px}
.org-direct .org-heading.compact{margin-bottom:24px}
.org-direct .org-heading.compact h2{max-width:980px;margin:0;font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;letter-spacing:-.045em;color:#102f39}
.org-section-note{max-width:820px;margin:14px 0 0;color:#687982;font-size:1rem;line-height:1.7}
@media(max-width:720px){.org-direct{margin-top:38px;margin-bottom:44px}.org-direct .org-heading.compact h2{font-size:clamp(1.75rem,8vw,2.5rem)}}

/* v10.9.0 Direktori Pegawai & Kakitangan */
.directory-section{max-width:1460px;margin:0 auto;padding:72px 46px 100px}.directory-intro{max-width:780px;margin-bottom:32px}.directory-intro h2{font-size:clamp(2rem,4vw,4rem);line-height:1.03;margin:8px 0 14px}.directory-toolbar{display:grid;grid-template-columns:1fr 260px;gap:14px;margin-bottom:28px}.directory-toolbar input,.directory-toolbar select{width:100%;border:1px solid #cadadd;border-radius:16px;background:#fff;padding:17px 18px;font:inherit;color:var(--ink);box-shadow:0 8px 24px rgba(0,28,40,.05)}.directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.directory-card{display:grid;grid-template-columns:112px 1fr;gap:18px;align-items:start;background:#fff;border:1px solid #d5e2e4;border-radius:22px;padding:18px;box-shadow:0 14px 38px rgba(0,28,40,.07)}.directory-card>img,.directory-avatar{width:112px;height:128px;border-radius:16px;object-fit:cover;background:#e8f3f2;display:grid;place-items:center;font-size:2.5rem;font-weight:800;color:#087f79}.directory-type{display:inline-block;font-size:.72rem;letter-spacing:.13em;font-weight:800;color:#087f79;margin-bottom:7px}.directory-card h3{font-size:1.2rem;margin:0 0 5px}.directory-card p{margin:3px 0;color:#64767e}.directory-role{font-weight:750;color:#102d35!important}.directory-contact{display:flex;flex-direction:column;gap:5px;margin-top:12px}.directory-contact a,.staff-table a{color:#087f79;font-weight:700;overflow-wrap:anywhere}.directory-empty{text-align:center;padding:40px;border:1px dashed #b8cdcf;border-radius:18px}.staff-table-wrap{overflow:auto;background:#fff;border:1px solid #d5e2e4;border-radius:22px;box-shadow:0 14px 38px rgba(0,28,40,.06)}.staff-table{width:100%;border-collapse:collapse;min-width:720px}.staff-table th,.staff-table td{text-align:left;padding:18px 20px;border-bottom:1px solid #e2eaeb}.staff-table th{background:#edf6f5;color:#12333b}.staff-table tr:last-child td{border-bottom:0}.staff-table .directory-type{margin:0 10px 0 0}.staff-public-row[hidden],.directory-card[hidden]{display:none!important}
@media(max-width:1050px){.directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.directory-section{padding:48px 20px 78px}.directory-toolbar{grid-template-columns:1fr}.directory-grid{grid-template-columns:1fr}.directory-card{grid-template-columns:82px 1fr}.directory-card>img,.directory-avatar{width:82px;height:96px}}


/* v10.10.0 — Penerangan Logo MPS */
.logo-hero{background-image:linear-gradient(90deg,rgba(0,28,40,.93),rgba(0,61,71,.68)),url('../images/hero-city-night.jpg')}
.logo-story{padding:86px 0 110px;background:radial-gradient(circle at 86% 10%,rgba(64,216,189,.10),transparent 26%),#f5f9f8}
.logo-intro-grid{display:grid;grid-template-columns:minmax(300px,.82fr) minmax(420px,1.18fr);gap:70px;align-items:center}
.logo-showcase{position:relative;min-height:490px;display:grid;place-items:center;border:1px solid rgba(14,124,120,.15);border-radius:34px;background:linear-gradient(145deg,#fff,#edf7f5);box-shadow:0 30px 70px rgba(0,42,53,.12);overflow:hidden}
.logo-showcase:before{content:"";position:absolute;inset:22px;border:1px solid rgba(231,184,75,.32);border-radius:25px}
.logo-showcase__glow{position:absolute;width:330px;height:330px;border-radius:50%;background:rgba(231,184,75,.17);filter:blur(20px)}
.logo-showcase img{position:relative;width:min(270px,65%);max-height:330px;object-fit:contain;filter:drop-shadow(0 24px 22px rgba(0,36,48,.18))}
.logo-showcase__caption{position:absolute;left:30px;right:30px;bottom:24px;display:flex;justify-content:space-between;gap:16px;align-items:center;padding-top:18px;border-top:1px solid rgba(16,35,43,.11)}
.logo-showcase__caption small{font-weight:800;letter-spacing:.18em;color:#0e7c78}.logo-showcase__caption strong{font-size:.92rem;text-align:right}
.logo-intro-copy h2,.logo-section-head h2,.logo-usage-note h2{margin:10px 0 20px;font-size:clamp(2.2rem,4vw,4.7rem);line-height:1.02;letter-spacing:-.055em;color:#08232d}
.logo-lead{font-size:1.18rem;line-height:1.8;color:#5f727b;max-width:720px}
.logo-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}
.logo-summary div{padding:20px;border:1px solid rgba(14,124,120,.15);border-radius:18px;background:#fff}.logo-summary b{display:block;font-size:1.8rem;color:#0e7c78}.logo-summary span{font-size:.84rem;color:#687982}
.logo-section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin:110px 0 34px}.logo-section-head h2{font-size:clamp(2.1rem,3.5vw,3.8rem);margin-bottom:0}.logo-section-head>p{max-width:470px;color:#687982;line-height:1.7}
.logo-elements-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.logo-element-card{position:relative;display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:center;min-height:230px;padding:28px;border:1px solid rgba(14,124,120,.14);border-radius:24px;background:#fff;box-shadow:0 14px 40px rgba(0,42,53,.07);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.logo-element-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px rgba(0,42,53,.12)}
.logo-element-card--wide{grid-column:1/-1;grid-template-columns:170px 1fr;min-height:250px}
.logo-element-card__number{position:absolute;right:22px;top:12px;font-size:3.2rem;font-weight:900;color:#edf3f2;line-height:1}
.logo-element-card__visual{height:150px;border-radius:20px;background:linear-gradient(145deg,#f2f8f7,#fff);display:grid;place-items:center;padding:20px}
.logo-element-card__visual img{max-width:100%;max-height:115px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,25,35,.12))}
.logo-element-card h3{margin:6px 0 9px;font-size:1.55rem;color:#092630}.logo-element-card p{margin:0;color:#687982;line-height:1.65}.logo-element-card .eyebrow{font-size:.72rem;color:#0e7c78;margin:0}.logo-element-card code{display:inline-block;margin-top:12px;padding:5px 9px;border-radius:8px;background:#eff5f4;color:#405760}
.logo-color-swatch{width:120px;height:120px;border:9px solid #fff;border-radius:24px;box-shadow:0 0 0 1px #ccd8da,0 15px 25px rgba(0,30,40,.11)}
.logo-color-swatch--blue{background:#071e67}.logo-color-swatch--gold{background:#e7b84b}
.logo-element-card--color{grid-template-columns:140px 1fr}
.logo-usage-note{margin-top:34px;display:grid;grid-template-columns:1fr 220px;gap:50px;align-items:center;padding:48px 54px;border-radius:30px;background:linear-gradient(120deg,#062b36,#0e7c78);color:#fff;box-shadow:0 25px 55px rgba(0,42,53,.18)}
.logo-usage-note h2{font-size:clamp(2rem,3vw,3.2rem);color:#fff;margin-bottom:16px}.logo-usage-note p{color:rgba(255,255,255,.78);line-height:1.75}.logo-usage-note .eyebrow{color:#efca70}.logo-usage-note img{width:190px;max-height:210px;object-fit:contain;filter:drop-shadow(0 16px 14px rgba(0,0,0,.24))}
@media(max-width:900px){.logo-story{padding:60px 0 80px}.logo-intro-grid{grid-template-columns:1fr;gap:40px}.logo-showcase{min-height:420px}.logo-section-head{display:block;margin-top:78px}.logo-section-head>p{margin-top:18px}.logo-elements-grid{grid-template-columns:1fr}.logo-element-card--wide{grid-column:auto}.logo-element-card,.logo-element-card--wide{grid-template-columns:125px 1fr}.logo-usage-note{grid-template-columns:1fr 150px;padding:38px}}
@media(max-width:600px){.logo-story{padding-top:38px}.logo-showcase{min-height:350px;border-radius:24px}.logo-showcase img{width:210px}.logo-showcase__caption{left:20px;right:20px;display:block}.logo-showcase__caption strong{display:block;text-align:left;margin-top:4px}.logo-summary{grid-template-columns:1fr}.logo-element-card,.logo-element-card--wide,.logo-element-card--color{grid-template-columns:1fr;padding:24px}.logo-element-card__visual{height:130px}.logo-color-swatch{width:100%;height:95px}.logo-usage-note{grid-template-columns:1fr;padding:30px}.logo-usage-note img{justify-self:center}.logo-section-head h2{font-size:2.3rem}}


/* v10.11.0 — Peta Lokasi MPS premium */
.location-hero{background-image:linear-gradient(90deg,rgba(0,28,40,.94),rgba(0,74,82,.65)),url('../images/hero-city-night.jpg');background-position:center 46%}
.location-section{padding:86px 0 110px;background:radial-gradient(circle at 90% 8%,rgba(64,216,189,.11),transparent 27%),#f4f8f7}
.location-heading{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.7fr);gap:55px;align-items:end;margin-bottom:35px}.location-heading h2{margin:8px 0 0;font-size:clamp(2.3rem,4.5vw,4.8rem);line-height:1;letter-spacing:-.055em;color:#082934}.location-heading>p{margin:0;color:#687982;font-size:1.05rem;line-height:1.75}
.location-shell{display:grid;grid-template-columns:minmax(330px,.72fr) minmax(520px,1.28fr);border:1px solid #d4e1e1;border-radius:32px;background:#fff;box-shadow:0 28px 75px rgba(0,38,50,.12);overflow:hidden}
.location-info-card{position:relative;padding:42px 40px;background:linear-gradient(150deg,#fff,#eef7f5)}.location-brandmark{width:92px;height:92px;display:grid;place-items:center;margin-bottom:25px;border:1px solid rgba(14,124,120,.16);border-radius:24px;background:#fff;box-shadow:0 12px 28px rgba(0,42,53,.08)}.location-brandmark img{max-width:74px;max-height:74px;object-fit:contain}.location-info-card h2{margin:7px 0 28px;font-size:clamp(2rem,3vw,3.15rem);line-height:1.02;color:#082934}.location-details{display:grid;gap:4px}.location-detail{display:grid;grid-template-columns:46px 1fr;gap:14px;padding:16px 0;border-top:1px solid rgba(16,47,57,.1)}.location-detail>span{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#dff2ef;color:#087d77;font-size:1.15rem;font-weight:900}.location-detail small{display:block;margin-bottom:4px;color:#0e7c78;font-size:.68rem;font-weight:900;letter-spacing:.14em}.location-detail p{margin:0;color:#405861;line-height:1.55}.location-detail a{color:#173942;font-weight:750}.location-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:25px}.location-btn{min-height:50px;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 15px;border:0;border-radius:14px;font:inherit;font-weight:850;cursor:pointer}.location-btn-primary{background:#087d77;color:#fff}.location-btn-secondary{background:#fff;color:#173942;border:1px solid #cbdcdb}.location-btn:hover{transform:translateY(-2px)}.location-copy-status{min-height:22px;margin:10px 0 0;color:#087d77;font-weight:750;font-size:.85rem}
.location-map-card{position:relative;min-height:680px;background:#e7efee}.location-map-card iframe{width:100%;height:100%;min-height:680px;display:block;border:0;filter:saturate(.9) contrast(.98)}.location-map-toolbar{position:absolute;z-index:3;left:22px;right:22px;top:20px;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 17px;border:1px solid rgba(255,255,255,.75);border-radius:15px;background:rgba(255,255,255,.93);box-shadow:0 12px 35px rgba(0,31,40,.16);backdrop-filter:blur(12px)}.location-map-toolbar>div{display:flex;align-items:center;gap:9px;color:#173942}.location-map-toolbar a{color:#087d77;font-size:.86rem;font-weight:850}.location-pulse{width:10px;height:10px;border-radius:50%;background:#0e7c78;box-shadow:0 0 0 7px rgba(14,124,120,.12)}
.location-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}.location-feature-grid article{display:grid;grid-template-columns:54px 1fr;gap:17px;padding:25px;border:1px solid #d6e3e2;border-radius:20px;background:#fff;box-shadow:0 12px 32px rgba(0,38,50,.055)}.location-feature-grid article>span{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:#e0f2ef;color:#087d77;font-weight:900}.location-feature-grid h3{margin:1px 0 7px;color:#12343d}.location-feature-grid p{margin:0;color:#687982;line-height:1.55}
.location-visit-note{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;margin-top:54px;padding:42px 46px;border-radius:28px;background:linear-gradient(120deg,#052b36,#0d7b76);color:#fff;box-shadow:0 24px 58px rgba(0,42,53,.17)}.location-visit-note h2{margin:8px 0 12px;font-size:clamp(2rem,3.5vw,3.6rem);line-height:1;color:#fff}.location-visit-note p{max-width:800px;margin-bottom:0;color:rgba(255,255,255,.76);line-height:1.7}.location-visit-note .eyebrow{color:#efca70}.location-visit-note>a{white-space:nowrap;padding:15px 21px;border-radius:14px;background:#fff;color:#07313b;font-weight:900}
@media(max-width:980px){.location-heading{grid-template-columns:1fr;gap:18px}.location-shell{grid-template-columns:1fr}.location-map-card,.location-map-card iframe{min-height:520px}.location-feature-grid{grid-template-columns:1fr}.location-visit-note{grid-template-columns:1fr}.location-visit-note>a{justify-self:start}}
@media(max-width:600px){.location-section{padding:48px 0 76px}.location-info-card{padding:28px 22px}.location-shell{border-radius:23px}.location-actions{grid-template-columns:1fr}.location-map-card,.location-map-card iframe{min-height:430px}.location-map-toolbar{left:12px;right:12px;top:12px;padding:12px}.location-map-toolbar a{font-size:0}.location-map-toolbar a:after{content:'Peta penuh ↗';font-size:.8rem}.location-feature-grid article{padding:20px}.location-visit-note{padding:30px 24px}}

/* =========================================================
   MPS V10.11.2 — VISIBLE CLOUD BACKGROUND FOR STICKY MENU ONLY
   Original header remains untouched before scrolling.
   ========================================================= */
.site-header.scrolled,
.site-header.is-scrolled{
  position:fixed;
  overflow:visible;
  isolation:isolate;
  background-color:#dfeff5!important;
  background-image:
    linear-gradient(180deg,rgba(224,240,247,.98) 0%,rgba(244,249,250,.94) 58%,rgba(255,255,255,.98) 100%),
    url('../images/cloud-1.png'),
    url('../images/cloud-2.png'),
    url('../images/cloud-3.png')!important;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat!important;
  background-size:100% 100%,clamp(760px,64vw,1180px) auto,clamp(580px,50vw,900px) auto,clamp(430px,38vw,680px) auto!important;
  background-position:center,left -80px 52%,58% 48%,right -20px 54%!important;
  color:#082736!important;
  -webkit-backdrop-filter:blur(10px)!important;
  backdrop-filter:blur(10px)!important;
  box-shadow:0 12px 35px rgba(0,35,48,.16)!important;
}
.site-header.scrolled::after,
.site-header.is-scrolled::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-18px;
  height:38px;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 8% 20%,rgba(255,255,255,.98) 0 24%,transparent 25%),
    radial-gradient(ellipse at 24% 18%,rgba(255,255,255,.96) 0 31%,transparent 32%),
    radial-gradient(ellipse at 43% 24%,rgba(255,255,255,.96) 0 28%,transparent 29%),
    radial-gradient(ellipse at 62% 16%,rgba(255,255,255,.98) 0 32%,transparent 33%),
    radial-gradient(ellipse at 80% 22%,rgba(255,255,255,.96) 0 29%,transparent 30%),
    radial-gradient(ellipse at 96% 16%,rgba(255,255,255,.98) 0 28%,transparent 29%);
  filter:drop-shadow(0 7px 8px rgba(28,70,86,.12));
}
.site-header.scrolled .header-inner,
.site-header.is-scrolled .header-inner{position:relative;z-index:2}
.site-header.scrolled .nav>a,
.site-header.scrolled .mega>button,
.site-header.is-scrolled .nav>a,
.site-header.is-scrolled .mega>button{
  color:#082736!important;
  text-shadow:0 1px 0 rgba(255,255,255,.82);
}
.site-header.scrolled .icon-btn,
.site-header.is-scrolled .icon-btn{
  color:#082736!important;
  border-color:rgba(8,39,54,.24)!important;
  background:rgba(255,255,255,.78)!important;
}
.site-header.scrolled .sandakan-live,
.site-header.is-scrolled .sandakan-live{
  border-color:rgba(8,39,54,.18)!important;
  background:rgba(255,255,255,.72)!important;
}
.site-header.scrolled .live-mode,
.site-header.is-scrolled .live-mode{color:#082736!important}
.site-header.scrolled .live-mode.active,
.site-header.is-scrolled .live-mode.active{color:#08202a!important}
.site-header:not(.scrolled):not(.is-scrolled){
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}
.site-header:not(.scrolled):not(.is-scrolled)::after{content:none!important}
@media(max-width:700px){
  .site-header.scrolled,
  .site-header.is-scrolled{
    background-size:100% 100%,720px auto,560px auto,430px auto!important;
    background-position:center,left -210px center,70% center,right -150px center!important;
  }
  .site-header.scrolled::after,
  .site-header.is-scrolled::after{bottom:-12px;height:28px}
}


/* V10.11.5 — STANDARD HEADER SEMUA HALAMAN */
/* Menyeragamkan tipografi, saiz, warna dan susun atur tajuk halaman
   mengikut gaya rasmi halaman Profil Presiden. */
.page-hero,
.inner-hero,
.profile-hero.location-hero,
.profile-page-hero.org-hero,
.org-page-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:460px;
  padding:190px 3vw 76px;
  display:flex;
  align-items:center;
  color:#fff;
  background:
    linear-gradient(90deg,rgba(3,25,35,.94),rgba(3,25,35,.58)),
    url('../images/hero-city-night.jpg') center 58%/cover no-repeat;
}
.page-hero::before,
.profile-hero.location-hero::before,
.profile-page-hero.org-hero::before,
.org-page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.18));
  pointer-events:none;
}
.page-hero>.container,
.inner-hero .inner-hero__content,
.profile-hero.location-hero .profile-hero-inner,
.profile-page-hero.org-hero .profile-hero-inner,
.org-page-hero>.container,
.org-page-hero .container{
  position:relative;
  z-index:2;
  width:min(1450px,100%);
  margin:auto;
  padding:0;
}
.page-hero .section-label,
.inner-hero .eyebrow,
.profile-hero.location-hero .profile-kicker,
.profile-page-hero.org-hero .section-label,
.org-page-hero .section-label,
.org-page-hero .eyebrow{
  margin:0 0 10px;
  color:#f0ca68 !important;
  font-family:var(--font);
  font-size:11px;
  line-height:1.4;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.page-hero h1,
.inner-hero h1,
.profile-hero.location-hero h1,
.profile-page-hero.org-hero h1,
.org-page-hero h1{
  max-width:1050px;
  margin:0;
  color:#fff;
  font-family:var(--font);
  font-size:clamp(48px,6.2vw,90px);
  font-weight:800;
  line-height:.94;
  letter-spacing:-.055em;
}
.page-hero h1 span,
.inner-hero h1 span,
.profile-hero.location-hero h1 span,
.profile-page-hero.org-hero h1 span,
.org-page-hero h1 span{
  color:#f1c75e;
}
.page-hero>.container>p:last-child,
.inner-hero .inner-hero__lead,
.profile-hero.location-hero .profile-hero-copy,
.profile-page-hero.org-hero .profile-hero-inner>p:last-child,
.org-page-hero .hero-copy,
.org-page-hero>.container>p:last-child,
.org-page-hero .container>p:last-child{
  max-width:850px;
  margin:24px 0 0;
  color:#d7e6e9;
  font-family:var(--font);
  font-size:clamp(17px,1.6vw,22px);
  font-weight:400;
  line-height:1.55;
}
.page-hero .breadcrumb,
.inner-hero .breadcrumb,
.profile-hero.location-hero .profile-breadcrumb,
.profile-page-hero.org-hero .profile-breadcrumb,
.org-page-hero .breadcrumb,
.org-page-hero .profile-breadcrumb{
  margin:0 0 32px;
  color:rgba(255,255,255,.72);
  font-family:var(--font);
  font-size:12px;
}
.page-hero .breadcrumb a,
.inner-hero .breadcrumb a,
.profile-hero.location-hero .profile-breadcrumb a,
.profile-page-hero.org-hero .profile-breadcrumb a,
.org-page-hero .breadcrumb a,
.org-page-hero .profile-breadcrumb a{
  color:rgba(255,255,255,.72);
}
@media(max-width:780px){
  .page-hero,
  .inner-hero,
  .profile-hero.location-hero,
  .profile-page-hero.org-hero,
  .org-page-hero{
    min-height:390px;
    padding:135px 5vw 60px;
  }
  .page-hero h1,
  .inner-hero h1,
  .profile-hero.location-hero h1,
  .profile-page-hero.org-hero h1,
  .org-page-hero h1{
    font-size:clamp(42px,12vw,64px);
  }
}
@media(max-width:480px){
  .page-hero h1,
  .inner-hero h1,
  .profile-hero.location-hero h1,
  .profile-page-hero.org-hero h1,
  .org-page-hero h1{
    font-size:48px;
  }
}

/* =========================================================
   MPS v10.11.7 — HOMEPAGE HERO CONTENT POSITION FIX
   Removes the extra 120px top padding applied inside hero-inner.
   This was stacking with hero-layout padding and pushing the
   action buttons below the first desktop viewport.
========================================================= */
@media (min-width:761px){
  .signature-hero{
    min-height:calc(100vh - 34px)!important;
    min-height:calc(100svh - 34px)!important;
  }

  .signature-hero .hero-layout{
    min-height:calc(100vh - 34px)!important;
    min-height:calc(100svh - 34px)!important;
    padding:118px 0 24px!important;
  }

  .signature-hero .hero-inner{
    padding:0!important;
  }
}


/* Penerangan Logo CMS v10.14.0 */
.logo-image-empty{font-size:.82rem;color:#829397;text-align:center}.logo-color-swatch[style]{background-image:none!important}

/* CMS Hubungi Kami v10.16.0 */
.contact-public-section{padding-top:70px;padding-bottom:80px}.contact-public-head{margin-bottom:24px}.contact-public-head h2{margin:.25rem 0 .7rem}.contact-public-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.85fr);gap:24px;align-items:stretch}.contact-info-card,.contact-map-card{border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow);overflow:hidden}.contact-info-card .info-table{margin:0;border:0}.contact-info-card .info-table th,.contact-info-card .info-table td{padding:18px}.contact-info-card a{color:var(--teal);font-weight:700}.contact-map-card iframe{display:block;width:100%;height:100%;min-height:420px;border:0}.contact-socials{padding:20px;border-top:1px solid var(--line)}.contact-socials>div{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.contact-socials a{padding:9px 13px;border-radius:999px;background:#edf7f5}.contact-public-grid:not(:has(.contact-map-card)){grid-template-columns:1fr}@media(max-width:850px){.contact-public-grid{grid-template-columns:1fr}.contact-map-card iframe{min-height:340px}}

/* Halaman Jabatan Dinamik v10.17.0 */
.department-feature-image{margin:0 0 30px;border-radius:22px;overflow:hidden;background:#eef3f3;border:1px solid var(--line)}.department-feature-image img{display:block;width:100%;max-height:520px;object-fit:cover}.department-feature-image figcaption{padding:12px 16px;color:var(--muted);font-size:.88rem}.department-managed-content h2{margin-top:30px}.department-managed-content img{max-width:100%;height:auto;border-radius:16px}.department-managed-content table{width:100%;border-collapse:collapse;margin:20px 0}.department-managed-content th,.department-managed-content td{border:1px solid var(--line);padding:12px;text-align:left}.directory-card.active{background:#e1f3ee;border-color:#a7d7cb;color:var(--teal)}


/* Enterprise Department Public Modules v11.0.0 */
.department-extra-section{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}.department-extra-section>h2{margin:0 0 20px;color:#062d37}.department-video{position:relative;padding-top:56.25%;border-radius:18px;overflow:hidden;background:#051d25}.department-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.department-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.department-gallery-item{padding:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;text-align:left;cursor:pointer}.department-gallery-item img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .25s}.department-gallery-item:hover img{transform:scale(1.035)}.department-gallery-item span{display:block;padding:10px 12px;font-weight:700}.department-documents{display:grid;gap:10px}.department-documents a{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:13px;padding:13px;border:1px solid var(--line);border-radius:13px}.department-documents a>span{display:grid;place-items:center;height:42px;border-radius:9px;background:#fff0ee;color:#a42b20;font-weight:900}.department-documents a>i{font-style:normal;color:var(--teal)}.department-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.department-contact-grid>div{padding:16px;border-radius:14px;background:#f3f8f7}.department-contact-grid .wide{grid-column:1/-1}.department-contact-grid small{display:block;margin-bottom:6px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em}.department-contact-grid a{color:var(--teal);font-weight:800}.department-contact-grid p{margin:0}.department-map-link{display:inline-flex!important;padding:10px 14px;border-radius:10px;background:var(--teal);color:#fff!important}.department-lightbox{width:min(1100px,92vw);max-height:92vh;padding:46px 18px 18px;border:0;border-radius:18px;background:#071c24;color:#fff}.department-lightbox::backdrop{background:rgba(0,10,15,.86)}.department-lightbox img{display:block;max-width:100%;max-height:72vh;margin:auto;border-radius:10px}.department-lightbox p{text-align:center;margin:12px 0 0}.department-lightbox button{position:absolute;right:12px;top:8px;border:0;background:transparent;color:#fff;font-size:32px;cursor:pointer}@media(max-width:760px){.department-gallery{grid-template-columns:1fr 1fr}.department-contact-grid{grid-template-columns:1fr}.department-contact-grid .wide{grid-column:auto}}@media(max-width:480px){.department-gallery{grid-template-columns:1fr}}

/* =========================================================
   V11.0.2 — EXTERNAL LINK SAFETY + MPS PAY LANDING
   ========================================================= */
.mpspay-landing h2{margin-top:30px}.service-status-card{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;margin:24px 0;border:1px solid #cfe4df;border-radius:18px;background:#f3fbf8}.service-status-dot{width:14px;height:14px;border-radius:50%;background:#13956f;box-shadow:0 0 0 6px rgba(19,149,111,.13);margin-top:7px;flex:0 0 auto}.service-status-card small{display:block;color:#087c70;font-weight:800;letter-spacing:.12em;margin-bottom:4px}.service-status-card strong{display:block;font-size:1.08rem}.service-status-card p{margin:5px 0 0;color:#48605f}.service-checklist{display:grid;gap:10px;padding:0;margin:18px 0 28px;list-style:none}.service-checklist li{position:relative;padding:13px 16px 13px 46px;border:1px solid #e0e8e7;border-radius:13px;background:#fff}.service-checklist li:before{content:'✓';position:absolute;left:16px;top:12px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#e6f7f2;color:#087c70;font-weight:900}.security-panel{display:flex;gap:16px;padding:22px;border-radius:18px;background:#fff9e9;border:1px solid #efd58a;margin:26px 0}.security-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#e7f7f2;color:#087c70;font-size:1.3rem;font-weight:900;flex:0 0 auto}.security-panel b{display:block;font-size:1.06rem;margin-bottom:6px}.security-panel p{margin:4px 0}.security-panel code{display:inline-block;margin:5px 0 6px;padding:7px 10px;border-radius:8px;background:#fff;border:1px solid #e7d9ad;color:#093c43;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}.security-tip{font-size:.92rem;color:#665c3d}.service-cta-group{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.primary-service-cta,.secondary-service-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:13px 20px;border-radius:999px;font-weight:800;text-decoration:none}.primary-service-cta{background:#087f78;color:#fff!important;box-shadow:0 10px 24px rgba(8,127,120,.2)}.primary-service-cta:hover{transform:translateY(-2px);background:#066f69}.secondary-service-cta{border:1px solid #cfdcdb;color:#17343a;background:#fff}.external-help-text{font-size:.92rem;color:#607073;margin-top:13px}
.external-link-dialog{width:min(560px,calc(100% - 30px));border:0;border-radius:22px;padding:0;box-shadow:0 24px 80px rgba(0,25,31,.28);color:#102c33}.external-link-dialog::backdrop{background:rgba(0,25,31,.68);backdrop-filter:blur(4px)}.external-dialog-card{padding:28px}.external-dialog-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:#e7f7f4;color:#087f78;font-size:1.5rem;font-weight:900;margin-bottom:18px}.external-dialog-kicker{margin:0 0 6px;color:#087f78;font-size:.75rem;font-weight:900;letter-spacing:.13em}.external-dialog-card h2{margin:0 0 10px;font-size:1.55rem}.external-dialog-copy{margin:0 0 18px;color:#53676c}.external-domain-box{padding:14px 16px;border:1px solid #d7e3e2;border-radius:13px;background:#f7faf9;margin-bottom:14px}.external-domain-box small{display:block;color:#697c80;margin-bottom:3px}.external-domain-box strong{word-break:break-all}.external-security-note{font-size:.9rem;color:#6b6247;background:#fff8df;border:1px solid #edd790;border-radius:12px;padding:12px 14px;margin:0 0 22px}.external-dialog-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}.external-dialog-actions button{min-height:46px;padding:10px 18px;border-radius:999px;font-weight:800;cursor:pointer}.external-cancel{border:1px solid #ccd8d7;background:#fff;color:#213d43}.external-confirm{border:1px solid #087f78;background:#087f78;color:#fff}.external-link-mark:after{content:' ↗';font-size:.8em}.external-link-dialog[open]{animation:externalDialogIn .18s ease-out}@keyframes externalDialogIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:640px){.security-panel{padding:17px}.service-cta-group{display:grid}.primary-service-cta,.secondary-service-cta{width:100%}.external-dialog-card{padding:22px}.external-dialog-actions{display:grid}.external-dialog-actions button{width:100%}}


/* V11.0.3 — MPS Digital Service Hub */
.service-hero-title{display:flex;flex-direction:column;align-items:flex-start;gap:.02em}.service-hero-title .service-hero-main,.service-hero-title .service-hero-product{display:block}.service-hero-title .service-hero-product{color:#efca70;font-size:.72em;line-height:1.05;margin-top:.04em}
.digital-hub-hero h1{max-width:980px}.digital-hub-section{background:linear-gradient(180deg,#f5f9f8 0,#fff 48%,#f5f9f8 100%)}.hub-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:28px}.hub-intro>div{max-width:760px}.hub-eyebrow,.hub-category{color:#087f78;font-size:.76rem;font-weight:900;letter-spacing:.14em}.hub-intro h2{font-size:clamp(2rem,3vw,3.25rem);line-height:1.08;margin:6px 0 14px}.hub-intro p{color:#53676c;line-height:1.7}.hub-directory-link{flex:0 0 auto;display:inline-flex;align-items:center;gap:18px;padding:14px 20px;border:1px solid #cbdcda;border-radius:999px;font-weight:850;color:#12343a;background:#fff}.hub-directory-link:hover{border-color:#087f78;transform:translateY(-2px)}.hub-summary{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #d9e5e3;border-radius:20px;background:#fff;margin:0 0 28px;overflow:hidden;box-shadow:0 16px 50px rgba(10,48,55,.06)}.hub-summary div{padding:22px 26px;border-right:1px solid #e3ecea}.hub-summary div:last-child{border-right:0}.hub-summary strong{display:block;font-size:1.4rem;color:#0a4c50}.hub-summary span{display:block;color:#627679;margin-top:3px}.hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.hub-card{display:flex;flex-direction:column;min-height:330px;padding:27px;border:1px solid #d7e3e1;border-radius:24px;background:#fff;color:#102c32;box-shadow:0 14px 45px rgba(13,50,56,.06);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.hub-card:hover,.hub-card:focus-visible{transform:translateY(-7px);border-color:#52aaa3;box-shadow:0 24px 60px rgba(13,50,56,.15);outline:none}.hub-card:hover .hub-icon,.hub-card:focus-visible .hub-icon{transform:translateY(-2px) scale(1.04);background:#dcf2ee}.hub-card:hover .hub-action b,.hub-card:focus-visible .hub-action b{transform:translateX(4px)}.hub-card-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:26px}.hub-icon{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:#e8f6f3;color:#087f78;font-weight:900;font-size:1.15rem;transition:transform .25s ease,background .25s ease}.hub-card-featured .hub-icon{background:rgba(255,255,255,.12);color:#f2cf72}.hub-status{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:#e9f8f1;color:#267557;font-size:.72rem;font-weight:850}.hub-status i{width:7px;height:7px;border-radius:50%;background:#29a66f;box-shadow:0 0 0 4px rgba(41,166,111,.12)}.hub-status-info{background:#edf4f6;color:#3c6870}.hub-status-info i{background:#5e8990;box-shadow:0 0 0 4px rgba(94,137,144,.12)}.hub-card h3{font-size:1.55rem;margin:7px 0 10px}.hub-card p:not(.hub-category){color:#5b6e72;line-height:1.65;margin:0}.hub-action{margin-top:auto;padding-top:24px;display:flex;justify-content:space-between;align-items:center;color:#087f78;font-weight:850}.hub-action b{transition:transform .25s ease}.hub-trust{display:flex;gap:20px;align-items:flex-start;margin-top:30px;padding:28px;border:1px solid #d4e4e1;border-radius:22px;background:#eef8f5}.hub-trust-icon{flex:0 0 48px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#087f78;color:#fff;font-size:1.3rem;font-weight:900}.hub-trust h2{margin:0 0 7px;font-size:1.25rem}.hub-trust p{margin:0;color:#4f686c;line-height:1.65}
@media(max-width:980px){.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-intro{align-items:flex-start;flex-direction:column}.hub-summary{grid-template-columns:1fr}}
@media(max-width:640px){.service-hero-title .service-hero-product{font-size:.78em}.hub-grid{grid-template-columns:1fr}.hub-card{min-height:290px;padding:22px}.hub-summary div{border-right:0;border-bottom:1px solid #e3ecea}.hub-summary div:last-child{border-bottom:0}.hub-directory-link{width:100%;justify-content:space-between}.hub-trust{padding:21px;flex-direction:column}}


/* MPS v11.0.4 — Digital Service Hub status indicators */
.hub-health{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 24px;margin:0 0 22px;border:1px solid #bfe2d4;border-radius:20px;background:linear-gradient(135deg,#effbf6,#fff);box-shadow:0 14px 40px rgba(13,80,62,.07)}
.hub-health-main{display:flex;align-items:center;gap:15px}.hub-health-main strong{display:block;color:#124e41;font-size:1.06rem}.hub-health-main span:not(.hub-health-dot){display:block;margin-top:3px;color:#587069;font-size:.9rem}.hub-health-dot{position:relative;width:14px;height:14px;flex:0 0 14px;border-radius:50%;background:#20a66b;box-shadow:0 0 0 6px rgba(32,166,107,.13)}
.hub-health-dot:after,.hub-status-online i:after{content:"";position:absolute;inset:-5px;border:1px solid rgba(32,166,107,.45);border-radius:50%;animation:mpsStatusPulse 3.2s ease-out infinite}
.hub-health-meta{text-align:right}.hub-health-meta b{display:block;color:#087f78;font-size:1.3rem;line-height:1}.hub-health-meta span{display:block;color:#607572;font-size:.78rem;margin-top:4px}
.hub-status i{position:relative}.hub-status-online{background:#e9f8f1;color:#267557}.hub-status-online i{background:#29a66f;box-shadow:0 0 0 4px rgba(41,166,111,.12)}
@keyframes mpsStatusPulse{0%{transform:scale(.75);opacity:.75}70%,100%{transform:scale(1.75);opacity:0}}
@media (prefers-reduced-motion:reduce){.hub-health-dot:after,.hub-status-online i:after{animation:none}}
body.access-motion .hub-health-dot:after,body.access-motion .hub-status-online i:after{animation:none}
@media(max-width:640px){.hub-health{align-items:flex-start;padding:18px}.hub-health-meta{display:none}.hub-health-main{align-items:flex-start}}
/* v11.1.0 CMS Digital Services */
.service-status-maintenance .service-status-dot{background:#d99b1d;box-shadow:0 0 0 6px rgba(217,155,29,.14)}
.service-status-offline .service-status-dot{background:#c94b4b;box-shadow:0 0 0 6px rgba(201,75,75,.14)}
.service-status-info .service-status-dot{background:#5e8990;box-shadow:0 0 0 6px rgba(94,137,144,.14)}
.service-cta-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.hub-status-maintenance{background:#fff5dc;color:#8a6111}.hub-status-maintenance i{background:#d99b1d;box-shadow:0 0 0 4px rgba(217,155,29,.14)}
.hub-status-offline{background:#fff0f0;color:#9d3333}.hub-status-offline i{background:#c94b4b;box-shadow:0 0 0 4px rgba(201,75,75,.14)}

/* MPS v11.2.3 — Jadual Kaunter Bayaran CMS */
.payment-counter-section{max-width:1440px;margin:auto;padding:72px 46px 90px}.payment-counter-intro{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:34px}.payment-counter-intro h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;margin:8px 0 14px;max-width:780px}.payment-counter-intro p{max-width:720px;font-size:1.06rem;color:#52636b}.counter-summary{min-width:155px;padding:20px 24px;border-radius:22px;background:#073f46;color:#fff;box-shadow:0 18px 45px rgba(5,45,50,.18)}.counter-summary strong{display:block;font-size:2.6rem;color:#f4c24f}.counter-summary span{font-weight:800}.payment-counter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}.payment-counter-card{position:relative;overflow:hidden;border:1px solid #dbe5e6;border-radius:28px;padding:30px;background:linear-gradient(145deg,#fff 0%,#f6faf9 100%);box-shadow:0 18px 55px rgba(11,50,55,.09)}.payment-counter-card:before{content:"";position:absolute;right:-70px;top:-70px;width:190px;height:190px;border-radius:50%;background:rgba(239,185,58,.12)}.counter-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.counter-number{font-size:1.6rem;font-weight:900;color:#0c6a67}.counter-status{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#e7f7ef;color:#187247;font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.counter-status i{width:8px;height:8px;border-radius:50%;background:#25a866;box-shadow:0 0 0 5px rgba(37,168,102,.12)}.payment-counter-card h2{font-size:1.65rem;line-height:1.18;margin:0 0 8px;color:#102d35}.counter-location{color:#5f7077;margin:0 0 25px}.counter-info-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;padding:24px 0;border-top:1px solid #dce6e6;border-bottom:1px solid #dce6e6}.counter-info-grid h3,.counter-payment span{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:#0b7772;margin:0 0 12px;font-weight:900}.counter-info-grid ul{margin:0;padding:0;list-style:none}.counter-info-grid li{position:relative;padding:0 0 9px 18px}.counter-info-grid li:before{content:"✓";position:absolute;left:0;color:#d49b1c;font-weight:900}.counter-hours{line-height:1.75;font-weight:750;color:#223c43}.counter-payment{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0 4px}.counter-payment span{margin:0}.counter-payment b{text-align:right;color:#18373e}.counter-note{margin:14px 0 0;padding:13px 15px;border-radius:14px;background:#fff8e7;color:#6f5720;font-size:.9rem}.counter-map{display:flex;justify-content:space-between;margin-top:18px;padding:14px 16px;border-radius:15px;background:#073f46;color:#fff!important;font-weight:850;text-decoration:none}.counter-empty{padding:40px;border:1px dashed #a9babb;border-radius:24px;text-align:center;background:#f7faf9}.page-hero h1 em{font-style:normal;color:#f2c34f}@media(max-width:900px){.payment-counter-grid{grid-template-columns:1fr}.payment-counter-intro{align-items:flex-start;flex-direction:column}.counter-summary{min-width:0}.counter-info-grid{grid-template-columns:1fr}.payment-counter-section{padding:48px 20px 70px}}@media(max-width:520px){.payment-counter-card{padding:22px;border-radius:22px}.counter-card-top{align-items:flex-start;gap:12px}.counter-status{font-size:.66rem}.counter-payment{align-items:flex-start;flex-direction:column}.counter-payment b{text-align:left}}

/* v11.3.0 — Jadual Pembersihan Parit Interaktif */
.drainage-schedule{margin-top:34px;padding-top:34px;border-top:1px solid #dce7e8}.drainage-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:22px}.drainage-heading h2{margin:3px 0 7px;font-size:clamp(27px,3vw,42px);line-height:1.08}.drainage-heading p{margin:0;color:#55676c}.drainage-admin-note{white-space:nowrap;font-weight:800;color:#087d79;text-decoration:none}.drainage-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}.drainage-stat{border:1px solid #d8e4e5;background:#f7fbfb;border-radius:18px;padding:17px;text-align:left;cursor:pointer;transition:.2s}.drainage-stat:hover,.drainage-stat.active{transform:translateY(-2px);background:#073d42;color:#fff;border-color:#073d42;box-shadow:0 12px 25px rgba(4,55,60,.15)}.drainage-stat span,.drainage-stat small,.drainage-stat b{display:block}.drainage-stat span{font-size:12px;letter-spacing:.13em;font-weight:900;color:#0a817d}.drainage-stat.active span,.drainage-stat:hover span{color:#efca70}.drainage-stat b{font-size:20px;margin:5px 0}.drainage-stat small{opacity:.75}.drainage-tools{display:grid;grid-template-columns:1fr 190px;gap:12px;margin:20px 0 12px}.drainage-search,.drainage-day{border:1px solid #cedcde;border-radius:14px;background:#fff;display:flex;align-items:center;padding:0 14px;min-height:52px}.drainage-search span{font-size:24px;margin-right:8px}.drainage-search input,.drainage-day select{width:100%;border:0;outline:0;background:transparent;font:inherit}.drainage-day{display:grid;grid-template-columns:auto 1fr;gap:10px}.drainage-day span{font-size:12px;font-weight:800;color:#607478}.drainage-zone-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.drainage-zone-tabs button{border:1px solid #cadbdd;background:#fff;border-radius:999px;padding:9px 18px;font-weight:850;cursor:pointer}.drainage-zone-tabs button.active{background:#0b807b;color:white;border-color:#0b807b}.drainage-result-meta{display:flex;justify-content:space-between;margin:18px 0 8px}.drainage-result-meta b{font-size:20px}.drainage-result-meta span{color:#66777b}.drainage-table-wrap{overflow:auto;border:1px solid #d3e0e1;border-radius:16px;background:#fff;max-height:650px}.drainage-table{border-collapse:separate;border-spacing:0;min-width:1120px;width:100%;font-size:13px}.drainage-table th,.drainage-table td{border-right:1px solid #e4ecec;border-bottom:1px solid #e4ecec;height:38px;text-align:center;min-width:29px}.drainage-table thead th{position:sticky;top:0;background:#073d42;color:#fff;z-index:3}.drainage-table .sticky-name{position:sticky;left:0;min-width:245px;text-align:left;padding:7px 12px;z-index:2;background:#fff}.drainage-table thead .sticky-name{z-index:5;background:#073d42}.drainage-table .sticky-length{position:sticky;left:245px;min-width:95px;background:#f7fafa;z-index:2;font-weight:800}.drainage-table thead .sticky-length{z-index:5;background:#073d42}.drainage-table .sticky-name small{display:block;color:#718287;font-weight:500;margin-top:2px}.drainage-table td.scheduled{background:linear-gradient(135deg,#0a817d,#0a6966);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}.drainage-table tbody tr:hover .sticky-name,.drainage-table tbody tr:hover .sticky-length{background:#edf8f7}.drainage-empty{text-align:center;padding:28px;background:#f7fafa;border-radius:14px}.drainage-mobile-cards{display:none}.drainage-card{border:1px solid #d4e2e3;border-radius:16px;padding:16px;background:#fff;box-shadow:0 8px 20px rgba(17,55,59,.05)}.drainage-card>div:first-child{display:flex;flex-direction:column;gap:3px}.drainage-card span{font-size:11px;font-weight:900;letter-spacing:.12em;color:#0a817d}.drainage-card b{font-size:18px}.drainage-card strong{display:block;margin:12px 0 5px}.drainage-card p{margin:0;color:#63777a}.drainage-card em{font-style:normal;font-weight:900;color:#183b3e}.mini-track{height:7px;background:#e7eeee;border-radius:999px;margin-top:13px;position:relative}.mini-track i{position:absolute;left:calc((var(--start) - 1) * 100% / 26);width:calc(var(--span) * 100% / 26);height:100%;background:#0a817d;border-radius:999px}@media(max-width:900px){.drainage-summary{grid-template-columns:repeat(2,1fr)}.drainage-table-wrap{display:none}.drainage-mobile-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}}@media(max-width:620px){.drainage-heading{display:block}.drainage-admin-note{display:inline-block;margin-top:10px}.drainage-summary{grid-template-columns:1fr 1fr}.drainage-tools{grid-template-columns:1fr}.drainage-mobile-cards{grid-template-columns:1fr}.drainage-result-meta{align-items:flex-end;gap:10px}.drainage-result-meta span{text-align:right;font-size:13px}}

/* v11.3.4 — halaman khas Jadual Pembersihan Parit */
.page-article > .managed-content-empty-safe > .drainage-schedule{margin-top:0;padding-top:0;border-top:0}

/* MPS v11.3.5 — Jadual Pembersihan Parit layout alignment */
.drainage-page .page-hero>.container{width:min(1450px,100%);margin-inline:auto}
.drainage-page-layout{grid-template-columns:minmax(0,1fr) 330px;align-items:start}
.drainage-page-layout>.page-main{min-width:0}
.drainage-content-panel{min-width:0;overflow:hidden;padding:30px}
.drainage-content-panel .managed-content-empty-safe{min-width:0}
.drainage-content-panel .drainage-schedule{min-width:0;width:100%}
.drainage-content-panel .drainage-table-wrap{max-width:100%;overflow-x:auto;overflow-y:auto}
@media(max-width:1100px){.drainage-page-layout{grid-template-columns:1fr}.drainage-content-panel{padding:24px}}
@media(max-width:620px){.drainage-content-panel{padding:18px}.drainage-page .page-content{padding-left:4vw;padding-right:4vw}}


/* MPS v11.3.6 — Jabatan Sisa Pepejal & Perkhidmatan Bandar */
.waste-dept-section{margin-top:40px;padding-top:34px;border-top:1px solid var(--line)}
.waste-dept-section:first-of-type{margin-top:0;padding-top:0;border-top:0}
.waste-section-heading{margin-bottom:22px}.waste-section-heading>span{display:block;margin-bottom:7px;color:var(--teal);font-size:.77rem;font-weight:900;letter-spacing:.16em}.waste-section-heading h2{margin:0;color:#082a34;font-size:clamp(1.65rem,3vw,2.45rem);line-height:1.08}.waste-heading-row{display:flex;align-items:end;justify-content:space-between;gap:20px}.waste-text-link{color:var(--teal);font-weight:900;white-space:nowrap}.waste-lead{margin:0;font-size:1.08rem;line-height:1.85;color:#29434b}.waste-icon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.waste-icon-grid article{padding:22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#fff,#f4f9f8)}.waste-icon-grid i{display:grid;place-items:center;width:46px;height:46px;margin-bottom:16px;border-radius:14px;background:#daf0eb;color:var(--teal);font-size:1.35rem;font-style:normal;font-weight:900}.waste-icon-grid h3,.waste-function-grid h3{margin:0 0 8px;color:#082a34}.waste-icon-grid p,.waste-function-grid p{margin:0;color:var(--muted);line-height:1.65}.waste-function-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.waste-function-grid article{display:grid;grid-template-columns:50px 1fr;gap:15px;padding:22px;border:1px solid var(--line);border-radius:18px;background:#fff}.waste-function-grid article>span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#073f45;color:#fff;font-weight:900}.waste-service-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.waste-service-grid a{position:relative;display:flex;flex-direction:column;min-height:116px;padding:21px 52px 20px 20px;border:1px solid var(--line);border-radius:17px;background:#fff;transition:transform .2s,border-color .2s,box-shadow .2s}.waste-service-grid a:hover{transform:translateY(-2px);border-color:#92cfc3;box-shadow:0 12px 28px rgba(5,45,55,.08)}.waste-service-grid b{color:#092d36;font-size:1rem}.waste-service-grid small{margin-top:7px;color:var(--muted);line-height:1.45}.waste-service-grid i{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:var(--teal);font-style:normal;font-size:1.4rem}.waste-stats{padding:30px;border:0;border-radius:22px;background:#073f45;color:#fff}.waste-stats .waste-section-heading>span{color:#efca70}.waste-stats .waste-section-heading h2{color:#fff}.waste-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.waste-stat-grid article{padding:18px 14px;border-radius:14px;background:rgba(255,255,255,.09)}.waste-stat-grid strong{display:block;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1;color:#fff}.waste-stat-grid span{display:block;margin-top:8px;color:#d6e7e5;font-size:.86rem}.waste-primary-link{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:12px 16px;border-radius:12px;background:#efca70;color:#082a34;font-weight:900}.waste-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0;padding:0;list-style:none;counter-reset:none}.waste-flow li{position:relative;padding:20px;border:1px solid var(--line);border-radius:17px;background:#f8fbfb}.waste-flow li>span{display:grid;place-items:center;width:34px;height:34px;margin-bottom:13px;border-radius:10px;background:#d9efea;color:var(--teal);font-weight:900}.waste-flow b,.waste-flow small{display:block}.waste-flow b{color:#082a34}.waste-flow small{margin-top:6px;color:var(--muted);line-height:1.45}.waste-faq{display:grid;gap:10px}.waste-faq details{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}.waste-faq summary{position:relative;padding:17px 48px 17px 18px;color:#082a34;font-weight:850;cursor:pointer;list-style:none}.waste-faq summary::-webkit-details-marker{display:none}.waste-faq summary:after{content:'+';position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--teal);font-size:1.4rem}.waste-faq details[open] summary:after{content:'−'}.waste-faq details p{margin:0;padding:0 18px 18px;color:var(--muted);line-height:1.65}
@media(max-width:900px){.waste-icon-grid{grid-template-columns:1fr 1fr}.waste-objectives article:last-child{grid-column:auto}.waste-stat-grid{grid-template-columns:1fr 1fr}.waste-flow{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.waste-heading-row{align-items:flex-start;flex-direction:column}.waste-function-grid,.waste-service-grid,.waste-icon-grid,.waste-flow{grid-template-columns:1fr}.waste-stat-grid{grid-template-columns:1fr 1fr}.waste-stats{padding:22px}.waste-text-link{white-space:normal}}
@media(max-width:420px){.waste-stat-grid{grid-template-columns:1fr}}

/* v11.3.11 Kesihatan Persekitaran: bahagian operasi + galeri */
.health-operations{display:grid;gap:28px}.health-operations>.waste-section-heading{margin-bottom:0}.health-operation-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(340px,1.1fr);gap:32px;align-items:center;padding:28px;border:1px solid rgba(7,47,58,.12);border-radius:28px;background:linear-gradient(145deg,#fff,#f7fbfa);overflow:hidden}.health-operation-card.reverse .health-operation-copy{order:2}.health-operation-card.reverse .health-operation-gallery{order:1}.health-operation-copy small{font-weight:800;letter-spacing:.18em;color:#0d857e}.health-operation-copy h3{font-size:clamp(28px,3vw,42px);line-height:1.05;margin:10px 0 18px;color:#082e39}.health-operation-body{display:grid;gap:10px}.health-operation-body p{margin:0;padding-left:20px;position:relative;line-height:1.65;color:#425b64}.health-operation-body p:before{content:'✓';position:absolute;left:0;color:#0f8f87;font-weight:900}.health-operation-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.health-operation-gallery button{border:0;padding:0;background:none;border-radius:20px;overflow:hidden;min-height:150px;cursor:zoom-in}.health-operation-gallery img{width:100%;height:100%;min-height:150px;object-fit:cover;display:block;transition:.25s transform}.health-operation-gallery button:hover img{transform:scale(1.04)}.health-operation-gallery.count-3 button:first-child{grid-row:span 2}.health-operation-gallery.count-1{grid-template-columns:1fr}.health-operation-gallery.count-1 button{min-height:320px}.health-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.health-facts article{padding:22px;border-radius:22px;background:#e9f7f5}.health-facts strong{display:block;font-size:32px;color:#073b45}.health-facts span{color:#526b73}@media(max-width:900px){.health-operation-card,.health-operation-card.reverse{grid-template-columns:1fr}.health-operation-card.reverse .health-operation-copy,.health-operation-card.reverse .health-operation-gallery{order:initial}}@media(max-width:560px){.health-operation-card{padding:18px;border-radius:22px}.health-operation-gallery{grid-template-columns:1fr}.health-operation-gallery.count-3 button:first-child{grid-row:auto}.health-operation-gallery button{min-height:210px}}
\n\n/* MPS v11.3.12 — Standard tipografi kandungan CMS Jabatan */\n.department-managed-content{color:#17313a;font-size:1rem;line-height:1.78}\n.department-managed-content> :first-child{margin-top:0}\n.department-managed-content h1,\n.department-managed-content h2,\n.department-managed-content h3,\n.department-managed-content h4{margin:42px 0 18px;color:#082a34;font-family:inherit;font-weight:850;letter-spacing:-.025em;line-height:1.12}\n.department-managed-content h1{font-size:clamp(1.8rem,3vw,2.55rem)}\n.department-managed-content h2,\n.department-managed-content h3{font-size:clamp(1.65rem,2.6vw,2.3rem)}\n.department-managed-content h4{font-size:clamp(1.25rem,2vw,1.6rem)}\n.department-managed-content p,\n.department-managed-content li{font-family:inherit;font-size:1rem;line-height:1.78;color:#233e47}\n.department-managed-content p{margin:0 0 18px}\n.department-managed-content ul,\n.department-managed-content ol{margin:14px 0 24px;padding-left:1.55rem}\n.department-managed-content li+li{margin-top:8px}\n.department-managed-content strong,\n.department-managed-content b{color:#102f38;font-weight:850}\n.department-managed-content .lead{font-size:1.08rem;line-height:1.82;color:#29434b}\n@media(max-width:650px){\n  .department-managed-content h1,\n  .department-managed-content h2,\n  .department-managed-content h3,\n  .department-managed-content h4{margin-top:34px}\n  .department-managed-content p,\n  .department-managed-content li{font-size:.98rem}\n}\n
/* MPS v11.3.13 — Jabatan Landskap: ruang visual sementara dan galeri sedia CMS */
body.department-landscape .department-content-panel{background:linear-gradient(180deg,#fff 0%,#fbfdf9 100%)}
body.department-landscape .waste-section-heading>span{color:#2f7a4f}
body.department-landscape .waste-icon-grid article{background:linear-gradient(145deg,#fff,#f2f8ef);border-color:#d9e8d6}
body.department-landscape .waste-icon-grid i{background:#e2f1df;color:#2f7a4f}
body.department-landscape .waste-function-grid article>span{background:#315f42}
body.department-landscape .waste-service-grid a:hover{border-color:#9ac5a1;box-shadow:0 12px 28px rgba(47,122,79,.10)}
body.department-landscape .waste-service-grid i,
body.department-landscape .waste-text-link,
body.department-landscape .waste-faq summary:after{color:#2f7a4f}
body.department-landscape .health-operation-card{border-color:#d7e7d3;background:linear-gradient(145deg,#fff,#f1f7ed)}
body.department-landscape .health-operation-copy small{color:#2f7a4f}
body.department-landscape .health-operation-body p:before{color:#4f9364}
.landscape-photo-placeholders{display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:1fr 1fr;gap:12px;min-height:330px}
.landscape-photo-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:150px;padding:20px;border:1.5px dashed #9fc4a5;border-radius:20px;background:linear-gradient(145deg,#edf6e9,#f9fcf7);color:#315f42;text-align:center}
.landscape-photo-placeholder.featured{grid-row:1 / span 2}
.landscape-photo-placeholder span{display:grid;place-items:center;width:54px;height:54px;border-radius:17px;background:#dcefd8;font-size:1.55rem;font-weight:900}
.landscape-photo-placeholder b{font-size:1rem}.landscape-photo-placeholder small{max-width:240px;color:#67806e;line-height:1.45}
body.department-landscape .department-gallery-item{border-color:#d5e5d2;background:#fbfdf9}
body.department-landscape .department-gallery-item span{color:#315f42}
@media(max-width:900px){.landscape-photo-placeholders{min-height:290px}}
@media(max-width:560px){.landscape-photo-placeholders{grid-template-columns:1fr;grid-template-rows:auto}.landscape-photo-placeholder.featured{grid-row:auto;min-height:230px}}
/* v11.3.16 Portal Experience Pelancongan */
.tourism-x-section{padding:42px 0;border-top:1px solid rgba(10,53,61,.12)}
.tourism-x-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tourism-x-card{overflow:hidden;border:1px solid rgba(10,53,61,.13);border-radius:24px;background:#fff;box-shadow:0 14px 36px rgba(12,45,51,.06)}
.tourism-x-card.featured{grid-column:span 2}.tourism-x-image{display:block;width:100%;height:230px;padding:0;border:0;background:#eaf4f0;cursor:pointer}.tourism-x-card.featured .tourism-x-image{height:320px}.tourism-x-image img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.tourism-x-image:hover img{transform:scale(1.035)}
.tourism-x-placeholder{height:190px;display:grid;place-items:center;font-size:48px;background:linear-gradient(135deg,#e8f6ee,#f9f4dc);color:#12877e}.tourism-x-copy{padding:22px}.tourism-x-copy>small{font-weight:800;letter-spacing:.12em;color:#11887f}.tourism-x-copy h3{font-size:clamp(22px,2vw,30px);margin:8px 0 10px}.tourism-x-copy p{color:#53666d;line-height:1.65}.tourism-x-copy dl{margin:16px 0 0}.tourism-x-copy dl div{display:grid;grid-template-columns:72px 1fr;gap:10px;padding:7px 0;border-top:1px solid #edf2f1}.tourism-x-copy dt{font-weight:800;color:#0b4f52}.tourism-x-copy dd{margin:0;color:#53666d}.tourism-x-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.tourism-x-links a{padding:10px 14px;border-radius:999px;background:#e7f4f0;color:#096e68;font-weight:800;text-decoration:none}
@media(max-width:900px){.tourism-x-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tourism-x-card.featured{grid-column:span 1}.tourism-x-card.featured .tourism-x-image{height:230px}}
@media(max-width:620px){.tourism-x-grid{grid-template-columns:1fr}.tourism-x-image,.tourism-x-card.featured .tourism-x-image{height:220px}}

/* MPS v11.3.19 - Jabatan Kawalan Pembangunan: kandungan rasmi dan peta perancangan */
body.department-kawalan-pembangunan .department-content-panel{background:linear-gradient(180deg,#fff 0%,#fbfcff 100%)}
body.department-kawalan-pembangunan .waste-section-heading>span{color:#285b8f}
body.department-kawalan-pembangunan .waste-function-grid article>span{background:#164a72}
.waste-service-grid.static-service-scope article{position:relative;display:flex;flex-direction:column;min-height:150px;padding:22px;border:1px solid #dbe5ef;border-radius:18px;background:linear-gradient(145deg,#fff,#f6f9fc)}
.waste-service-grid.static-service-scope article b{color:#103b5e;font-size:1.02rem;line-height:1.45}
.waste-service-grid.static-service-scope article small{margin-top:10px;color:#536a7a;font-size:.9rem;line-height:1.65}
body.department-kawalan-pembangunan .health-operation-card{border-color:#d8e4ee;background:linear-gradient(145deg,#fff,#f5f9fc)}
body.department-kawalan-pembangunan .health-operation-copy small{color:#285b8f}
body.department-kawalan-pembangunan .health-operation-body p:before{color:#285b8f}
body.department-kawalan-pembangunan .development-public-maps .health-operation-gallery.count-1 button{min-height:280px;background:#eef3f7}
body.department-kawalan-pembangunan .development-public-maps .health-operation-gallery img{object-fit:contain;background:#fff}
@media(max-width:650px){.waste-service-grid.static-service-scope{grid-template-columns:1fr}.waste-service-grid.static-service-scope article{min-height:0}.development-public-maps .health-operation-card{padding:18px}.development-public-maps .health-operation-gallery.count-1 button{min-height:220px}}


/* v11.3.24 — Jabatan Pengangkutan Awam & Letak Kereta / Smart Parking */
body.department-pengangkutan-awam .waste-intro{padding:30px;border:1px solid #d9e3f0;border-radius:26px;background:linear-gradient(145deg,#ffffff,#f4f7fb)}
body.department-pengangkutan-awam .waste-objectives article{background:linear-gradient(145deg,#071f52,#0b3474);border-color:#164786;box-shadow:0 16px 34px rgba(5,32,82,.12)}
body.department-pengangkutan-awam .waste-objectives i{background:#f2c84b;color:#071f52}
body.department-pengangkutan-awam .waste-objectives h3{font-size:clamp(2rem,4vw,3rem);color:#fff;line-height:1}
body.department-pengangkutan-awam .waste-objectives p{color:#dce8f7}
body.department-pengangkutan-awam .waste-function-grid article>span{background:#0b3474}
body.department-pengangkutan-awam .waste-service-grid a{background:linear-gradient(145deg,#fff,#f5f8fc);border-color:#d6e1ee}
body.department-pengangkutan-awam .waste-service-grid a:hover{border-color:#f2c84b;box-shadow:0 12px 30px rgba(10,52,116,.10)}
body.department-pengangkutan-awam .health-operation-card{border-color:#d6e1ee;background:linear-gradient(145deg,#fff,#f5f8fc)}
body.department-pengangkutan-awam .health-operation-copy small{color:#0b5fa5}
body.department-pengangkutan-awam .health-operation-body p:before{color:#d99a00}
body.department-pengangkutan-awam .health-operation-gallery.count-1 button{min-height:360px;background:#eef3f8}
body.department-pengangkutan-awam .health-operation-gallery.count-1 img{object-fit:contain;background:#fff}
@media(max-width:650px){body.department-pengangkutan-awam .waste-intro{padding:22px}body.department-pengangkutan-awam .health-operation-gallery.count-1 button{min-height:220px}}

/* v11.3.32 — Jabatan Teknologi Maklumat: interactive digital experience */
.it-experience{margin-top:28px;display:grid;gap:22px}.it-console{background:linear-gradient(145deg,#031d2b,#063948 62%,#0a5d67);border-radius:28px;padding:24px;color:#fff;box-shadow:0 28px 70px rgba(0,34,51,.18);position:relative;overflow:hidden}.it-console:after{content:"";position:absolute;inset:-60% -20% auto 45%;height:420px;background:radial-gradient(circle,rgba(88,241,216,.22),transparent 60%);pointer-events:none}.it-console-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}.it-console-head b{letter-spacing:.13em;font-size:13px}.it-console-head small{opacity:.7;margin-left:auto}.it-pulse{width:10px;height:10px;border-radius:50%;background:#66f5cf;box-shadow:0 0 0 8px rgba(102,245,207,.12);animation:itPulse 2s infinite}.it-console-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;position:relative;z-index:1}.it-console-grid button{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.065);color:#fff;border-radius:18px;padding:18px;text-align:left;display:grid;gap:5px;cursor:pointer;transition:.25s ease}.it-console-grid button:hover,.it-console-grid button.active{transform:translateY(-3px);background:#fff;color:#042734;box-shadow:0 14px 30px rgba(0,0,0,.16)}.it-console-grid button>span{font-weight:900;font-size:12px;letter-spacing:.15em;color:#63e8d0}.it-console-grid button.active>span{color:#0c7d78}.it-console-grid button b{font-size:15px}.it-console-grid button small{opacity:.7}.it-panel{border:1px solid #dce8e8;border-radius:28px;padding:30px;background:linear-gradient(180deg,#fff,#f8fbfb);animation:itReveal .35s ease}.it-panel-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}.it-panel-heading span,.it-drone-hero>div>span{font-size:12px;font-weight:900;letter-spacing:.18em;color:#0b847c}.it-panel-heading h2,.it-drone-hero h2{font-size:clamp(28px,4vw,46px);line-height:1.05;margin:8px 0 0}.it-view-plan{border:0;background:#073b49;color:#fff;padding:13px 18px;border-radius:999px;font-weight:800;cursor:pointer;text-decoration:none;white-space:nowrap}.it-pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.it-pillar-grid article{position:relative;min-height:180px;padding:22px;border-radius:22px;background:#fff;border:1px solid #d9e7e7;overflow:hidden;transition:.25s ease}.it-pillar-grid article:hover,.it-pillar-grid article:focus{transform:translateY(-5px);box-shadow:0 20px 38px rgba(4,59,73,.12);outline:none}.it-pillar-grid article>span{font-size:13px;font-weight:900;color:#07837a}.it-pillar-grid h3{font-size:20px;line-height:1.15;margin:24px 0 10px}.it-pillar-grid p{color:#597078;margin:0;line-height:1.6}.it-pillar-grid article i{position:absolute;width:110px;height:110px;border-radius:50%;right:-42px;bottom:-54px;background:radial-gradient(circle at 35% 35%,#64e1ce,#0c7080)}.it-action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.it-action-grid article{display:flex;gap:16px;padding:20px;border-radius:20px;background:#061f2a;color:#fff}.it-action-grid article>span{font-size:30px;font-weight:900;color:#5de3cf}.it-action-grid small{color:#84e9d8;font-weight:900;letter-spacing:.1em}.it-action-grid h3{margin:5px 0 6px;font-size:21px}.it-action-grid p{margin:0;color:#c8d7db;line-height:1.55}.it-drone-hero{display:grid;grid-template-columns:1.4fr .6fr;align-items:center;gap:30px;background:linear-gradient(135deg,#eafcf8,#f7fbff);border-radius:24px;padding:28px}.it-drone-hero p{font-size:18px;line-height:1.7;color:#47636b}.it-drone-orbit{width:220px;height:220px;border-radius:50%;border:1px solid #79cfc5;position:relative;display:grid;place-items:center;margin:auto;animation:itFloat 5s ease-in-out infinite}.it-drone-orbit:before,.it-drone-orbit:after{content:"";position:absolute;border-radius:50%;border:1px dashed #84d9ce}.it-drone-orbit:before{inset:24px}.it-drone-orbit:after{inset:54px}.it-drone-orbit b{font-size:25px;letter-spacing:.14em;color:#075b68}.it-drone-orbit span{position:absolute;padding:7px 10px;border-radius:999px;background:#073b49;color:#fff;font-size:11px;font-weight:800}.it-drone-orbit span:nth-of-type(1){top:4px}.it-drone-orbit span:nth-of-type(2){right:-12px;bottom:45px}.it-drone-orbit span:nth-of-type(3){left:-5px;bottom:40px}.it-benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.it-benefit-grid article{padding:20px;border-radius:20px;border:1px solid #d9e8e7;background:#fff}.it-benefit-grid i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#daf7f1;color:#057c73;font-style:normal;font-size:22px}.it-benefit-grid h3{font-size:18px;margin:14px 0 8px}.it-benefit-grid p{margin:0;color:#5d7077;line-height:1.55}.it-charter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.it-charter-grid article{padding:22px;border-radius:20px;background:linear-gradient(145deg,#052936,#0b6570);color:#fff;min-height:190px}.it-charter-grid strong{display:block;font-size:42px;color:#6ef1d6}.it-charter-grid span{font-weight:900;text-transform:uppercase;letter-spacing:.08em}.it-charter-grid p{color:#d4e3e5;line-height:1.55}.it-plan-dialog{border:0;border-radius:20px;padding:0;max-width:min(94vw,1100px);background:#071a23;box-shadow:0 30px 90px rgba(0,0,0,.45)}.it-plan-dialog::backdrop{background:rgba(0,15,25,.82);backdrop-filter:blur(5px)}.it-plan-dialog img{display:block;max-width:100%;max-height:88vh;object-fit:contain}.it-plan-dialog button{position:absolute;right:12px;top:12px;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:#041f2a;font-size:28px;cursor:pointer;z-index:2}@keyframes itPulse{50%{box-shadow:0 0 0 14px rgba(102,245,207,0)}}@keyframes itReveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes itFloat{50%{transform:translateY(-8px) rotate(2deg)}}@media(max-width:900px){.it-console-grid,.it-charter-grid{grid-template-columns:repeat(2,1fr)}.it-pillar-grid,.it-benefit-grid{grid-template-columns:repeat(2,1fr)}.it-drone-hero{grid-template-columns:1fr}.it-panel-heading{align-items:flex-start;flex-direction:column}.it-action-grid{grid-template-columns:1fr}}@media(max-width:600px){.it-console,.it-panel{padding:18px;border-radius:20px}.it-console-grid,.it-pillar-grid,.it-benefit-grid,.it-charter-grid{grid-template-columns:1fr}.it-console-head small{width:100%;margin-left:20px}.it-drone-orbit{width:180px;height:180px}.it-panel-heading h2,.it-drone-hero h2{font-size:30px}}

/* MPS v11.3.33 - Jadual Kutipan Sampah Interaktif */
.collection-panel{overflow:hidden}.collection-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:24px}.collection-heading h2{margin:.25rem 0 .5rem}.collection-status{padding:10px 14px;border-radius:999px;background:#e9f7f3;color:#0d746b;font-weight:800;white-space:nowrap}.collection-zone-tabs,.collection-category-tabs{display:flex;gap:10px;flex-wrap:wrap}.collection-zone-tabs{margin:0 0 22px}.collection-zone-tabs button,.collection-category-tabs button{border:1px solid #cbd9dc;background:#fff;color:#17313b;border-radius:999px;padding:11px 18px;font:inherit;font-weight:800;cursor:pointer}.collection-zone-tabs button.active,.collection-category-tabs button.active{background:#0a7771;color:#fff;border-color:#0a7771}.collection-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.collection-summary>div{border:1px solid #d8e3e5;border-radius:18px;padding:18px;background:#f8fbfb}.collection-summary span{display:block;color:#66777d;font-size:.88rem;font-weight:700}.collection-summary strong{display:block;font-size:1.65rem;margin-top:4px;color:#0d2c36}.collection-supervisor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px;border-radius:18px;background:#eef8f6;margin-bottom:20px}.collection-supervisor>div{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}.collection-supervisor span{color:#5c7178}.collection-supervisor strong{color:#0b514d}.collection-supervisor a{color:#0a7771;font-weight:800}.collection-filters{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(160px,1fr));gap:12px;margin:18px 0}.collection-filters label>span{display:block;font-size:.82rem;font-weight:800;color:#576b72;margin:0 0 7px}.collection-filters input,.collection-filters select{width:100%;box-sizing:border-box;border:1px solid #cfdcdf;border-radius:15px;background:#fff;padding:13px 14px;font:inherit;color:#152e37}.collection-category-tabs{margin-bottom:26px}.collection-results-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:14px 0}.collection-results-head h3{margin:.2rem 0 0}.collection-results-head>strong{color:#61757c}.collection-table-wrap{overflow-x:auto;border:1px solid #d8e3e5;border-radius:18px}.collection-table{width:100%;border-collapse:collapse;min-width:840px}.collection-table th{background:#073f42;color:#fff;padding:14px;text-align:left;font-size:.88rem}.collection-table td{padding:14px;border-bottom:1px solid #e1e9ea;vertical-align:middle}.collection-table tbody tr:last-child td{border-bottom:0}.collection-table tbody tr:hover{background:#f4fbf9}.collection-category,.collection-zone{display:inline-flex;border-radius:999px;padding:6px 10px;font-size:.78rem;font-weight:850;white-space:nowrap}.collection-category{background:#edf3f4;color:#39555e}.collection-zone{background:#e8f5f3;color:#0c7069}.collection-zone.zone-B{background:#edf0fb;color:#373a92}.collection-days{display:flex;gap:4px;flex-wrap:nowrap}.collection-day{display:grid;place-items:center;width:30px;height:27px;border-radius:7px;background:#edf1f2;color:#859297;font-size:.68rem;font-weight:850}.collection-day.on{background:#0a7771;color:#fff}.collection-unspecified{font-size:.82rem;color:#7a898e;font-style:italic}.collection-empty{text-align:center;padding:35px;border:1px dashed #bcced1;border-radius:18px;margin-top:16px}.collection-empty p{margin:.4rem 0 0;color:#687b81}.collection-note{margin-top:22px;padding:18px;border-left:4px solid #e8b83d;background:#fbf8ef;border-radius:0 14px 14px 0}.collection-note p{margin:.4rem 0 0}.directory-card.active{background:#dff3ee;border-color:#8dcfc4;color:#096a63}
@media(max-width:900px){.collection-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-filters{grid-template-columns:1fr 1fr}.collection-search{grid-column:1/-1}.collection-heading{display:block}.collection-status{display:inline-block;margin-top:10px}.collection-supervisor{grid-template-columns:1fr}}
@media(max-width:560px){.collection-summary{grid-template-columns:1fr 1fr}.collection-summary>div{padding:14px}.collection-summary strong{font-size:1.35rem}.collection-filters{grid-template-columns:1fr}.collection-search{grid-column:auto}.collection-zone-tabs button,.collection-category-tabs button{padding:9px 13px}.collection-results-head{align-items:flex-start}.collection-day{width:27px;height:25px}}


/* =========================================================
   MPS V11.3.38 — STANDARD HERO PERKHIDMATAN
   Kekalkan tajuk halaman + gunakan artwork slogan rasmi yang
   sama seperti halaman Jabatan. Terpakai kepada semua halaman
   di bawah menu Perkhidmatan tanpa mengubah kandungan utama.
   ========================================================= */
.page-hero .service-page-slogan{
  width:min(820px,72vw);
  max-width:820px;
  margin:28px 0 0!important;
  line-height:1;
  filter:drop-shadow(0 3px 6px rgba(0,8,14,.78));
}
.page-hero .service-page-slogan img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
}
.page-hero .service-page-slogan + *{margin-top:0}
/* Tajuk halaman Perkhidmatan ikut warna putih standard; warna aksen hanya label kecil. */
.page-hero .service-hero-title .service-hero-main{color:#fff!important}
.page-hero .service-hero-title .service-hero-product{color:#fff!important;font-size:.68em;margin-top:.08em}
@media(max-width:760px){
  .page-hero .service-page-slogan{width:min(94vw,720px);max-width:94vw;margin-top:22px!important}
}

/* v11.3.40 — Jadual Potong Rumput interaktif */
.grass-page .page-hero>.container{width:min(1450px,100%);margin-inline:auto}.grass-page-layout{grid-template-columns:minmax(0,1fr) 330px;align-items:start}.grass-page-layout>.page-main{min-width:0}.grass-content-panel{min-width:0;overflow:hidden;padding:30px}.grass-schedule{min-width:0;width:100%}.grass-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:22px}.grass-heading h2{margin:3px 0 7px;font-size:clamp(27px,3vw,42px);line-height:1.08}.grass-heading p{margin:0;color:#55676c}.grass-source-link{white-space:nowrap;font-weight:850;color:#087d79;text-decoration:none}.grass-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}.grass-stat{border:1px solid #d8e4e5;background:#f7fbfb;border-radius:18px;padding:17px;text-align:left;transition:.2s;color:inherit;font:inherit}.grass-stat:not(.static){cursor:pointer}.grass-stat:not(.static):hover,.grass-stat.active{transform:translateY(-2px);background:#073d42;color:#fff;border-color:#073d42;box-shadow:0 12px 25px rgba(4,55,60,.15)}.grass-stat span,.grass-stat small,.grass-stat b{display:block}.grass-stat span{font-size:12px;letter-spacing:.12em;font-weight:900;color:#0a817d}.grass-stat.active span,.grass-stat:not(.static):hover span{color:#efca70}.grass-stat b{font-size:20px;margin:5px 0}.grass-stat small{opacity:.75}.grass-tools{display:grid;grid-template-columns:1fr 190px;gap:12px;margin:20px 0 12px}.grass-search,.grass-day,.grass-operator-select-wrap{border:1px solid #cedcde;border-radius:14px;background:#fff;display:flex;align-items:center;padding:0 14px;min-height:52px}.grass-search span{font-size:24px;margin-right:8px}.grass-search input,.grass-day select,.grass-operator-select-wrap select{width:100%;border:0;outline:0;background:transparent;font:inherit}.grass-day{display:grid;grid-template-columns:auto 1fr;gap:10px}.grass-day span,.grass-operator-select-wrap label{font-size:12px;font-weight:850;color:#607478;white-space:nowrap}.grass-operator-select-wrap{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-bottom:10px}.grass-operator-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.grass-operator-tabs button{border:1px solid #cadbdd;background:#fff;border-radius:999px;padding:9px 14px;font-weight:800;cursor:pointer}.grass-operator-tabs button.active{background:#0b807b;color:white;border-color:#0b807b}.grass-note{display:flex;gap:12px;align-items:flex-start;border-left:4px solid #efca70;background:#f8faf8;padding:13px 15px;border-radius:0 12px 12px 0;margin:16px 0;color:#536568}.grass-note strong{color:#153a3d;white-space:nowrap}.grass-result-meta{display:flex;justify-content:space-between;align-items:flex-end;margin:20px 0 8px}.grass-result-meta>div{display:flex;flex-direction:column;gap:2px}.grass-result-meta>div>span{font-size:11px;letter-spacing:.12em;font-weight:900;color:#0a817d}.grass-result-meta b{font-size:20px}.grass-result-meta>span{color:#66777b}.grass-table-wrap{overflow:auto;border:1px solid #d3e0e1;border-radius:16px;background:#fff;max-height:680px}.grass-table{border-collapse:separate;border-spacing:0;min-width:1330px;width:100%;font-size:13px}.grass-table th,.grass-table td{border-right:1px solid #e4ecec;border-bottom:1px solid #e4ecec;height:38px;text-align:center;min-width:29px}.grass-table thead th{position:sticky;top:0;background:#073d42;color:#fff;z-index:3}.grass-table .grass-sticky-name{position:sticky;left:0;min-width:285px;text-align:left;padding:7px 12px;z-index:2;background:#fff}.grass-table thead .grass-sticky-name{z-index:5;background:#073d42}.grass-table .grass-sticky-operator{position:sticky;left:285px;min-width:175px;background:#f7fafa;z-index:2;text-align:left;padding:6px 10px}.grass-table thead .grass-sticky-operator{z-index:5;background:#073d42;text-align:center}.grass-table .grass-sticky-name small,.grass-table .grass-sticky-operator small{display:block;color:#718287;font-weight:500;margin-top:2px}.grass-table .grass-sticky-operator span{font-weight:800}.grass-table td.scheduled{background:linear-gradient(135deg,#0a817d,#0a6966);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}.grass-table tbody tr:hover .grass-sticky-name,.grass-table tbody tr:hover .grass-sticky-operator{background:#edf8f7}.grass-empty{text-align:center;padding:28px;background:#f7fafa;border-radius:14px;margin-top:14px}.grass-status{font-size:13px;color:#6a7a7d;margin-top:12px}.grass-mobile-cards{display:none}.grass-card{border:1px solid #d4e2e3;border-radius:16px;padding:16px;background:#fff;box-shadow:0 8px 20px rgba(17,55,59,.05)}.grass-card>div{display:flex;flex-direction:column;gap:4px}.grass-card span{font-size:11px;font-weight:900;letter-spacing:.1em;color:#0a817d}.grass-card b{font-size:17px}.grass-card p{margin:12px 0 0;color:#63777a}.grass-card strong{color:#183b3e}.grass-mini-track{height:7px;background:#e7eeee;border-radius:999px;margin-top:13px;position:relative}.grass-mini-track i{position:absolute;left:calc((var(--start) - 1) * 100% / 30);width:calc(var(--span) * 100% / 30);height:100%;background:#0a817d;border-radius:999px}@media(max-width:1100px){.grass-page-layout{grid-template-columns:1fr}.grass-content-panel{padding:24px}}@media(max-width:900px){.grass-summary{grid-template-columns:repeat(2,1fr)}.grass-table-wrap{display:none}.grass-mobile-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}}@media(max-width:620px){.grass-heading{display:block}.grass-source-link{display:inline-block;margin-top:10px}.grass-summary{grid-template-columns:1fr 1fr}.grass-tools{grid-template-columns:1fr}.grass-operator-select-wrap{grid-template-columns:1fr}.grass-mobile-cards{grid-template-columns:1fr}.grass-result-meta{gap:10px}.grass-result-meta>span{text-align:right;font-size:13px}.grass-note{display:block}.grass-note strong{display:block;margin-bottom:5px}.grass-content-panel{padding:18px}.grass-page .page-content{padding-left:4vw;padding-right:4vw}}


/* =========================================================
   MPS V12.0 — PUSAT MEDIA
   ========================================================= */
.media-center{background:linear-gradient(180deg,#f4f8f7 0,#fff 45%)}.media-center .section-head{margin-bottom:24px}.media-highlights{margin-bottom:52px}.highlight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.highlight-card{display:grid;grid-template-columns:200px 1fr;overflow:hidden;border:1px solid #dce7e6;border-radius:24px;background:#fff;box-shadow:0 18px 45px rgba(7,55,58,.08);position:relative}.highlight-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:#0b817a}.highlight-card.tone-penting:before{background:#b42318}.highlight-card.tone-program:before{background:#c28b13}.highlight-card.tone-berita:before{background:#2459a6}.highlight-card>img{width:100%;height:100%;min-height:210px;object-fit:cover}.highlight-card>div{padding:24px}.highlight-badge{display:inline-flex;border-radius:999px;background:#e8f5f3;color:#08766f;font-size:11px;font-weight:900;letter-spacing:.1em;padding:7px 10px}.tone-penting .highlight-badge{background:#fff0ee;color:#a32920}.tone-program .highlight-badge{background:#fff7dd;color:#8a6312}.tone-berita .highlight-badge{background:#edf3ff;color:#315b9d}.highlight-card h3{font-size:clamp(20px,2.2vw,28px);margin:12px 0 8px;line-height:1.15}.highlight-card p{color:#566a6d;margin:0 0 14px}.highlight-card small{display:block;color:#7a898b;margin-bottom:14px}.highlight-card a{font-weight:850;color:#087b75;text-decoration:none}.media-tools{display:grid;grid-template-columns:1fr 240px;gap:12px;margin:0 0 24px}.media-tools input,.media-tools select{min-height:50px;border:1px solid #cedcdd;border-radius:14px;background:#fff;padding:0 15px;font:inherit}.media-news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.media-news-card{background:#fff;border:1px solid #dce6e6;border-radius:22px;overflow:hidden;box-shadow:0 12px 30px rgba(7,55,58,.07);transition:.2s}.media-news-card:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(7,55,58,.12)}.media-news-card>a>img{width:100%;height:220px;object-fit:cover;display:block}.media-placeholder{height:220px;display:grid;place-items:center;background:linear-gradient(135deg,#063f43,#0a7771);text-decoration:none}.media-placeholder span{font-size:52px;font-weight:950;color:rgba(255,255,255,.16);letter-spacing:.14em}.media-news-card>div{padding:20px}.media-news-card small{font-size:11px;font-weight:850;letter-spacing:.05em;color:#0a7a74}.media-news-card h3{font-size:21px;line-height:1.2;margin:9px 0}.media-news-card h3 a{text-decoration:none;color:#173b3e}.media-news-card p{color:#617276;margin:0 0 15px}.media-read{font-weight:850;color:#087b75;text-decoration:none}.media-empty{text-align:center;border:1px dashed #b9cdcf;border-radius:20px;padding:42px;background:#fff;color:#63777a}.media-empty b{display:block;color:#193f42;font-size:20px}.media-links{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}.media-links a{display:flex;flex-direction:column;gap:6px;border-radius:18px;border:1px solid #d8e4e4;padding:20px;text-decoration:none;background:#f7fbfa;color:#173c3f}.media-links b{font-size:18px}.media-links span{color:#0b7c76;font-weight:750}.media-detail-wrap{max-width:980px}.media-back{display:inline-block;margin-bottom:20px;text-decoration:none;font-weight:850;color:#087a74}.media-article{background:#fff;border:1px solid #dbe6e6;border-radius:24px;padding:clamp(20px,4vw,42px);box-shadow:0 16px 42px rgba(7,55,58,.08)}.media-detail-cover{width:100%;max-height:520px;object-fit:cover;border-radius:18px;margin-bottom:20px}.media-article-meta{display:flex;gap:16px;flex-wrap:wrap;color:#718286;font-size:13px}.media-lead{font-size:20px;line-height:1.6;color:#37575b;border-left:4px solid #e5b83e;padding-left:18px}.media-rich{line-height:1.75;color:#334f53}.media-rich img{max-width:100%;height:auto}.media-gallery-block{margin-top:40px}.media-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.media-gallery img{width:100%;height:220px;object-fit:cover;border-radius:14px;display:block}.media-news-card[hidden]{display:none!important}@media(max-width:960px){.highlight-grid{grid-template-columns:1fr}.media-news-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:680px){.highlight-card{grid-template-columns:1fr}.highlight-card>img{height:210px}.media-tools,.media-news-grid,.media-links,.media-gallery{grid-template-columns:1fr}.media-gallery img{height:auto}}

/* v12.0.2 CMS Hero Banner overlay */
.cms-hero-banner{display:none;margin-top:26px;max-width:760px;padding:20px 22px;border:1px solid rgba(255,255,255,.24);border-radius:20px;background:rgba(2,24,32,.64);backdrop-filter:blur(12px);box-shadow:0 18px 50px rgba(0,0,0,.22);color:#fff;transition:opacity .35s ease,transform .35s ease}.cms-hero-banner.is-visible{display:block;animation:cmsHeroIn .45s ease both}.cms-hero-banner .cms-hero-kicker{display:block;margin-bottom:8px;color:#f2c65c;font-size:.76rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.cms-hero-banner h2{margin:0 0 7px;color:#fff;font-size:clamp(24px,2.6vw,38px);line-height:1.08;letter-spacing:-.025em}.cms-hero-banner p{margin:0;color:rgba(255,255,255,.86);font-size:1rem;line-height:1.6}.cms-hero-banner a{display:inline-flex;margin-top:14px;padding:10px 15px;border-radius:999px;background:#f2c65c;color:#06232c;font-weight:900;text-decoration:none}.cms-hero-dots{display:flex;gap:7px;margin-top:13px}.cms-hero-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer}.cms-hero-dots button.active{background:#f2c65c;transform:scale(1.25)}
@keyframes cmsHeroIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:760px){.cms-hero-banner{margin-top:20px;padding:17px 18px}.cms-hero-banner h2{font-size:25px}.cms-hero-banner p{font-size:.94rem}}
@media(prefers-reduced-motion:reduce){.cms-hero-banner{animation:none!important;transition:none!important}}

/* MPS v12.1.0 multilingual switcher */
.mps-language-switcher{height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;border:1px solid rgba(255,255,255,.32);border-radius:999px;background:rgba(2,24,33,.18);backdrop-filter:blur(8px);white-space:nowrap}
.mps-lang-btn{appearance:none;border:0;background:transparent;color:inherit;font:inherit;font-size:12px;font-weight:800;letter-spacing:.04em;padding:5px 1px;cursor:pointer;opacity:.68;transition:opacity .18s ease,color .18s ease,transform .18s ease}
.mps-lang-btn:hover{opacity:1;transform:translateY(-1px)}
.mps-lang-btn.active{color:#f2c75c;opacity:1}
.mps-lang-sep{opacity:.35;font-size:11px}
[data-city-theme="day"] .mps-language-switcher{border-color:rgba(7,43,52,.2);background:rgba(255,255,255,.62);color:#082b34}
@media(max-width:900px){.mps-language-switcher.desktop-only{display:none!important}}

/* MPS v12.2.0 — Global Multilingual Architecture */
.mps-translation-pending{padding:28px 30px;border:1px solid rgba(12,75,83,.14);border-radius:22px;background:linear-gradient(180deg,#fff,#f8fbfb);margin:0 0 28px}
.mps-translation-pending small{display:block;font-weight:800;letter-spacing:.16em;color:#148a88;margin-bottom:8px}
.mps-translation-pending h2{margin:0 0 10px;font-size:clamp(1.45rem,2.5vw,2rem)}
.mps-translation-pending p{margin:0;line-height:1.75;color:#53656a}
.cms-language-card{position:relative}
.cms-language-card[data-lang-state="missing"]{border-color:#d39d3f;background:#fffaf0}
.cms-language-status{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:800;border-radius:999px;padding:5px 9px;margin-left:8px;background:#eef5f5;color:#31585c}

/* =========================================================
   MPS CHAT + ACCESSIBILITY POSITION FIX — 2026-09-03
   Final override only. Keeps all existing portal styles intact.
   ========================================================= */
@media (min-width: 701px) {
  .access-btn {
    bottom: calc(190px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .access-panel {
    bottom: calc(258px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 700px) {
  .access-btn {
    bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .access-panel {
    bottom: calc(216px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* V12.2 e-Penyertaan response and submission states */
.participation-status{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:#e8f7f1;color:#075b4c;font-weight:700;line-height:1.45}.participation-status.is-error{background:#fff0ef;color:#9e2f28}.feedback-box button:disabled,.survey-box button:disabled,#notifyBtn:disabled{cursor:wait;opacity:.65}