/* Consolidated UI (Nov 2026): governmental maroon / gold / ivory palette that matches the Singappen + TN Police logos,
   subtle kolam textures, motto + intro video hero, step icons, Contact Us, Get-help departments, centred sign-in. */
:root,:root.maroon{--brand:#6d1424;--brand-d:#4a0d18;--gold:#6d1424;--slate:#6d1424;--teal:#6d1424;--teal-d:#4a0d18;--sage:#6d1424;--lav:#6d1424;--ok:#6d1424;
 --bg:#fbf8f2;--brandsoft:#f3ead8;--goldsoft:#f8f1e1;--slatesoft:#f3ead8;--oksoft:#f3ead8;--tealsoft:#f3ead8;--sagesoft:#f3ead8;--lavsoft:#f8f1e1;
 --line:#e7dcc4;--line2:#c9a35a;--ink:#2a1f1f;--muted:#5e524d;--cxgold:#b8892b;--cxgold-l:#e3c47a;--cxgreen:#1d5e46;
 --kolam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23b8892b' stroke-width='1' opacity='.55'%3E%3Cpath d='M32 6c8 8 8 18 0 26-8-8-8-18 0-26zM32 58c-8-8-8-18 0-26 8 8 8 18 0 26zM6 32c8-8 18-8 26 0-8 8-18 8-26 0zM58 32c-8 8-18 8-26 0 8-8 18-8 26 0z'/%3E%3Ccircle cx='32' cy='32' r='3'/%3E%3C/g%3E%3Cg fill='%23b8892b' opacity='.5'%3E%3Ccircle cx='0' cy='0' r='1.6'/%3E%3Ccircle cx='64' cy='0' r='1.6'/%3E%3Ccircle cx='0' cy='64' r='1.6'/%3E%3Ccircle cx='64' cy='64' r='1.6'/%3E%3Ccircle cx='16' cy='16' r='1.2'/%3E%3Ccircle cx='48' cy='16' r='1.2'/%3E%3Ccircle cx='16' cy='48' r='1.2'/%3E%3Ccircle cx='48' cy='48' r='1.2'/%3E%3C/g%3E%3C/svg%3E")}
body{background:var(--bg)}
.th{background:linear-gradient(90deg,#4a0d18,#6d1424 45%,#7a1a2c);border-bottom:3px solid var(--cxgold);position:sticky}
.th::after{content:"";position:absolute;inset:0;background:var(--kolam);background-size:56px;opacity:.12;pointer-events:none}
.th .in{position:relative;z-index:1}
.brand2 img{background:#fff;border:2px solid var(--cxgold-l)}
.brand2 img.tnp{border-radius:50%;padding:2px;object-fit:contain;width:42px;height:42px}
.mnav{border-top:0;border-bottom:1px solid var(--line)}
.band{position:relative}
.band:nth-of-type(even){background:linear-gradient(180deg,rgba(243,234,216,.55),rgba(251,248,242,0))}
footer{background:#2b1418!important;border-top:4px solid var(--cxgold);position:relative}
footer::before{content:"";position:absolute;inset:0;background:var(--kolam);background-size:72px;opacity:.07;pointer-events:none}
/* home hero: motto + intro video */
.cxhero{background:linear-gradient(115deg,rgba(251,248,242,.96),rgba(243,234,216,.9)),var(--kolam);background-size:auto,64px;border-bottom:1px solid var(--line)}
.cxhero .in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(22px,4vw,48px);align-items:center;padding-top:48px;padding-bottom:52px}
.cxmotto .cxm-en{font-family:var(--serif);font-size:clamp(1.1875rem,calc(2.1vw * var(--fsk,1)),1.4375rem);line-height:1.5;color:var(--brand-d);margin:6px 0 10px;border-left:4px solid var(--cxgold);padding-left:16px}
.cxmotto .cxm-ta{font-size:1rem;line-height:1.75;color:var(--muted);margin:0 0 20px;padding-left:20px}
.cxacts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cxacts .act{margin:0}
.cxlines{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.cxlines a{display:inline-flex;gap:8px;align-items:baseline;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;text-decoration:none;color:var(--ink);font-size:0.875rem}.cxlines a:is(:link,:visited,:hover,:focus,:focus-visible,:active){text-decoration:none}.cxlines a:focus-visible{outline:3px solid var(--cxgold,#c9a03a);outline-offset:2px}.cxlines b{color:var(--brand);font-size:1.0625rem}
.cxright .eyebrow{margin-bottom:8px}
.cxvid{position:relative;border-radius:16px;overflow:hidden;background:#1d1012;box-shadow:0 10px 30px rgba(74,13,24,.18);border:3px solid #fff;outline:1px solid var(--line2);aspect-ratio:16/9}
.cxvid iframe,.cxvid video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.cxvid-ph{display:grid;place-items:center;text-align:center;color:#f7ead0;background:linear-gradient(135deg,#4a0d18,#6d1424),var(--kolam)}
.cxvid-ph>div{display:grid;gap:8px;justify-items:center;padding:20px}.cxvid-ph b{font-size:1.125rem}.cxvid-ph small{opacity:.8;font-size:0.7812rem;max-width:340px}
.cxi{width:22px;height:22px}.cxi.big{width:44px;height:44px}
/* steps with icons */
.cxhow>div{position:relative;padding-top:18px}
.cxstep{display:inline-grid;place-items:center;width:50px;height:50px;border-radius:14px;background:var(--brandsoft);color:var(--brand);border:1px solid var(--line2);margin-bottom:10px;position:relative}
.cxstep .cxi{width:26px;height:26px}.cxstep em{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font:600 0.75rem/1.375rem var(--sans);font-style:normal;text-align:center;border:2px solid #fff}
.cxhow>div::before{display:none!important}
.how>div>b:first-child::before{display:none}
/* contact */
.cxhot{display:flex;align-items:center;gap:16px;margin:22px 0;padding:18px 22px;border-radius:16px;background:linear-gradient(90deg,#6d1424,#8a1f33);color:#fff;text-decoration:none;box-shadow:0 8px 22px rgba(74,13,24,.2)}.cxhot:is(:link,:visited,:hover,:focus,:focus-visible,:active){text-decoration:none}.cxhot:focus-visible{outline:3px solid #e3c47a;outline-offset:2px}
.cxhot b{font-size:2.125rem;font-family:var(--serif);display:block;line-height:1}.cxhot small{opacity:.9;font-size:0.875rem}
.cxcgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cxc,.cxaddr{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.cxaddr{margin-top:12px}.cxc small,.cxaddr small{display:block;color:var(--muted);font-size:0.8125rem;text-transform:uppercase;letter-spacing:.04em}.cxc b{font-size:1.0625rem;word-break:break-word}.cxaddr p{margin:2px 0 0;font-weight:600}
.cxbadge{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--brandsoft);color:var(--brand);border:1px solid var(--line)}
.cxbadge.lg{width:54px;height:54px;border-radius:16px}.cxbadge.lg .cxi{width:28px;height:28px}
.ph{display:inline-block;background:#fff4d6;color:#7a5200;border:1px dashed #d8a93a;border-radius:6px;padding:1px 8px;font-size:.86em;font-weight:500}
/* Get help departments */
.cxdepts{display:grid;gap:10px}.cxdgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:6px}
.cxd{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;gap:8px;align-content:start;border-top:4px solid var(--brand)}
.cxd h3{margin:4px 0 0;font-size:1.1875rem}.cxd p{margin:0;color:var(--muted);font-size:0.9375rem}
.cxd ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}.cxd li{display:flex;justify-content:space-between;gap:10px;align-items:center;border-top:1px dashed var(--line);padding-top:6px;font-size:0.9375rem}
.cxd li a{font-weight:700;color:var(--brand);font-size:1.0625rem;text-decoration:none}
.cxd-police{border-top-color:#1f3a68}.cxd-police .cxbadge{color:#1f3a68;background:#e9eef7}
.cxd-child{border-top-color:#b8892b}.cxd-child .cxbadge{color:#8a6414;background:#fbf1d8}
.cxd-social{border-top-color:#1d5e46}.cxd-social .cxbadge{color:#1d5e46;background:#e4f1ea}
.cxd-health{border-top-color:#a3243b}.cxd-health .cxbadge{color:#a3243b;background:#fbe8ec}
/* e-learning */
.gbanner{display:flex;gap:14px;align-items:flex-start;margin:16px 0;padding:16px 18px;border-radius:14px;background:#fff7e3;border:1px solid #e3c47a;border-left:5px solid var(--cxgold)}
.gbi{font-size:1.5rem;line-height:1}.lwait{display:flex;gap:14px;align-items:flex-start}
.lvgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 26px;align-items:start;margin-top:6px}
.lvgrid>h1{grid-column:1;grid-row:1;margin:0}.lvgrid>.lvdesc{grid-column:1;grid-row:2;margin:0;color:var(--muted)}
.lvgrid>.lsum{grid-column:1;grid-row:3;margin-top:4px}
.lvgrid>.lplayer{grid-column:2;grid-row:1/span 4;max-width:640px;width:100%;justify-self:end;border-radius:14px;overflow:hidden}
.lvgrid>.lplayer video,.lvgrid>.lplayer iframe{width:100%;max-height:360px;aspect-ratio:16/9;display:block;background:#000}
.cxconf{position:fixed;inset:0;pointer-events:none;z-index:9999}
@media (max-width:860px){.cxhero .in,.lvgrid{grid-template-columns:1fr}.lvgrid>*{grid-column:1!important;grid-row:auto!important}.cxacts,.cxcgrid,.cxdgrid{grid-template-columns:1fr}}
/* centred sign-in (no left panel) */
.authc{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 16px;background:linear-gradient(180deg,rgba(251,248,242,.94),rgba(243,234,216,.94)),var(--kolam);background-size:auto,64px}
.authc-top{margin-bottom:14px}.authc-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#4a0d18}.authc-brand img{border-radius:50%;background:#fff;border:2px solid #e3c47a;object-fit:contain}
.authc-brand b{display:block;font-size:1.25rem}.authc-brand small{color:#6a5a52;font-size:0.7812rem}
.authc .formp{width:100%;max-width:520px;background:#fff;border:1px solid #e7dcc4;border-top:4px solid #6d1424;border-radius:18px;box-shadow:0 12px 36px rgba(74,13,24,.12);padding:26px clamp(18px,4vw,34px)}
.authc .box{width:100%}.authc .box h2{font-size:1.5625rem;margin:0}.authc .box .sub{color:#6a5a52;margin:.25rem 0 1.2rem}
.authc-foot{margin-top:16px;font-size:0.8438rem;color:#6a5a52;text-align:center}.authc-foot a{color:#6d1424;text-decoration:none}
.catgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.catc{position:relative;margin:0;cursor:pointer}.catc input{position:absolute;opacity:0}
.catc span{display:block;border:1.5px solid #e1d4b8;border-radius:11px;padding:.55rem .75rem;background:#fffdf8;min-height:56px}.catc b{display:block;font-size:0.875rem}.catc small{font-size:0.75rem;color:#7a6a63}
.catc input:checked+span{border-color:#6d1424;background:#f8ecee;box-shadow:0 0 0 2px rgba(109,20,36,.15)}.catc input:focus-visible+span{outline:2px solid #b8892b}
.young{background:#fff8e6;border:1px dashed #d8b45e;border-radius:12px;padding:10px 12px}.young .note{margin:0 0 8px;font-size:0.8125rem}
@media (max-width:520px){.catgrid{grid-template-columns:1fr}}
.gbanner .row{gap:10px;flex-wrap:wrap}
.cxhero{background:linear-gradient(rgba(255,253,248,.7),rgba(255,253,248,.7)),url(/assets/home-banner.webp?v=2) center bottom/100% auto no-repeat,#fffdf8;background-size:auto,100% auto,auto}
.cxhero .in{padding-bottom:clamp(60px,22vw,320px)}
@media(max-width:760px){.cxhero{background-image:linear-gradient(rgba(255,253,248,.7),rgba(255,253,248,.7)),url(/assets/home-banner-m.webp?v=2);background-size:auto,170% auto;background-position:0 0,center bottom}.cxhero .in{padding-bottom:clamp(90px,45vw,220px)}}