/* =========================================================
   SeDidik Sarawak — laman satu halaman (scroll story) v2
   Identiti diambil dari logo & maskot SeDidik:
   merah logo, hitam, kuning bintang 12 bucu, merah jambu Fera,
   kuning-oren Fero, hijau bukit Borneo.
   ========================================================= */
:root{
  color-scheme:light;
  --bg:#FCFBF8; --bg-2:#F4F1EA; --white:#FFFFFF;
  --ink:#1D1D1F; --muted:#5A5A62; --line:#E7E3DA;
  --red:#D7262C; --red-deep:#A81B20;
  --star:#FFC72C; --fera:#E5317A; --fero:#F7A81B;
  --leaf:#2F8F4E; --forest:#163A28; --sky:#DFF1FB; --blue:#2E6FE8; --plum:#6B3FA0;
  --rule:#E3ECF6; --margin:#F3B6B6;
  --display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --gutter:clamp(16px,4vw,48px);
  --max:1180px;
  --bar:86px;
  --shadow:0 2px 4px rgba(29,29,31,.04),0 18px 40px -18px rgba(29,29,31,.28);
  --star-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 59.3,15.2 75,6.7 75.5,24.5 93.3,25 84.8,40.7 100,50 84.8,59.3 93.3,75 75.5,75.5 75,93.3 59.3,84.8 50,100 40.7,84.8 25,93.3 24.5,75.5 6.7,75 15.2,59.3 0,50 15.2,40.7 6.7,25 24.5,24.5 25,6.7 40.7,15.2'/%3E%3C/svg%3E");
  --squiggle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11 C 30 3, 58 15, 88 7 S 148 13, 197 5' fill='none' stroke='%23FFC72C' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
  --motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 6 L42 24 L24 42 L6 24 Z' fill='none' stroke='%23D7262C' stroke-opacity='.06' stroke-width='2'/%3E%3Cpath d='M24 16 L32 24 L24 32 L16 24 Z' fill='%23FFC72C' fill-opacity='.10'/%3E%3C/svg%3E");
}

/* ---------- Asas ---------- */
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--bar) + 16px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.06rem;line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:clamp(2.2rem,5.4vw,4rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:600}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700}
.skip:focus{top:12px}

/* Label kecil: pil dengan bintang logo */
.tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);background:var(--white);padding:7px 14px 7px 10px;border-radius:999px;box-shadow:0 0 0 1.5px var(--line)}
.tag::before{content:"";width:14px;height:14px;background:var(--star);-webkit-mask:var(--star-shape) center/contain no-repeat;mask:var(--star-shape) center/contain no-repeat}
/* Perkataan diserlahkan dengan coretan krayon */
.mark{background:var(--squiggle) left 100%/100% .32em no-repeat;padding-bottom:.08em;color:var(--red)}
.star{display:inline-block;width:1em;height:1em;background:currentColor;-webkit-mask:var(--star-shape) center/contain no-repeat;mask:var(--star-shape) center/contain no-repeat}

/* Butang: pil bulat */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:600;font-size:1.05rem;text-decoration:none;padding:.85em 1.5em;border-radius:999px;background:var(--red);color:#fff;border:0;cursor:pointer;box-shadow:0 10px 20px -10px rgba(215,38,44,.7);transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-3px);background:var(--red-deep);box-shadow:0 14px 24px -10px rgba(215,38,44,.7)}
.btn-light{background:var(--white);color:var(--ink);box-shadow:0 0 0 1.5px var(--line),0 10px 20px -12px rgba(0,0,0,.25)}
.btn-light:hover{background:var(--white);color:var(--red)}

/* ---------- Bar atas & menu panel ---------- */
.topbar{position:fixed;inset:0 0 auto;z-index:100;height:var(--bar);display:flex;align-items:center;justify-content:space-between;gap:16px;padding-inline:var(--gutter);transition:background-color .3s,box-shadow .3s}
.topbar.solid{background:rgba(252,251,248,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.brand{display:inline-block;flex:none;height:72px;line-height:0;border-radius:8px}
.brand .logo-svg{display:block;height:100%;width:auto;overflow:visible}
/* Warna logo: asal (merah & hitam) pada latar terang */
.logo-svg .lg-red,.logo-svg .lg-so,.logo-svg .lg-sub{fill:var(--lg-red,#E8202A);transition:fill .35s ease}
.logo-svg .lg-sub{fill:var(--lg-sub,#E8202A)}
.logo-svg .lg-so{fill:var(--lg-so,#E8202A)}
.logo-svg .lg-blk,.logo-svg .lg-word{fill:var(--lg-blk,#111111);transition:fill .35s ease}
.logo-svg .lg-word{fill:var(--lg-word,#111111)}
.logo-svg .lg-si{fill:var(--lg-si,#FFE21A);transition:fill .35s ease}
/* Logo terbalik (krim & kuning) pada latar merah */
.logo-reversed{--lg-red:#FFF6E3;--lg-blk:#FFF6E3;--lg-word:#FFF6E3;--lg-so:#FFC72C;--lg-si:#FFE27A;--lg-sub:#FFC72C}
.top-actions{display:flex;align-items:center;gap:10px}
.top-actions .btn{padding:.7em 1.2em;font-size:.95rem}
.topbar:not(.solid):not(.on-light) .top-actions .btn{background:#FFF6E3;color:var(--red);box-shadow:0 6px 16px -8px rgba(0,0,0,.35)}
.topbar:not(.solid):not(.on-light) .menu-btn{background:transparent;color:#FFF6E3;box-shadow:none}
.topbar:not(.solid):not(.on-light) .brand{--lg-red:#FFF6E3;--lg-blk:#FFF6E3;--lg-word:#FFF6E3;--lg-so:#FFC72C;--lg-si:#FFE27A;--lg-sub:#FFC72C;filter:drop-shadow(0 2px 6px rgba(60,0,0,.35))}
.menu-btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 16px;font-family:var(--display);font-weight:600;font-size:1rem;color:var(--ink);background:var(--white);border:0;border-radius:999px;box-shadow:0 6px 16px -8px rgba(0,0,0,.35);cursor:pointer}
.menu-btn span{display:block;width:18px;height:2.5px;background:currentColor;border-radius:2px;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;transition:transform .2s}
.menu-btn[aria-expanded="true"] span{box-shadow:none;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{content:"";display:block;width:18px;height:2.5px;background:currentColor;transform:rotate(-90deg)}
.menu{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(420px,100%);background:var(--white);padding:calc(var(--bar) + 24px) 32px 32px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;transform:translateX(105%);visibility:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),visibility .45s;box-shadow:-30px 0 60px -30px rgba(0,0,0,.4)}
.menu.open{transform:none;visibility:visible}
body.menu-open::after{content:"";position:fixed;inset:0;z-index:80;background:rgba(29,29,31,.35)}
.menu-title{font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.menu ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.menu a:not(.btn){display:flex;align-items:center;gap:14px;font-family:var(--display);font-weight:600;font-size:1.55rem;text-decoration:none;padding:10px 12px;border-radius:16px;transition:background-color .2s}
.menu a:not(.btn):hover{background:var(--bg-2)}
.menu .dot{width:14px;height:14px;background:var(--c);-webkit-mask:var(--star-shape) center/contain no-repeat;mask:var(--star-shape) center/contain no-repeat;flex:none}
.menu-cta{align-self:flex-start;margin-top:auto}
body.menu-open{overflow:hidden}

/* ---------- 1. Pembuka: bintang SeDidik bersinar ---------- */
.intro{position:relative;height:230vh;background:var(--bg)}
.intro-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:#FFF6E3;display:grid;place-items:center;--p:0;
  background-color:#A3141A;background-image:url("../images/hero/damask.svg"),radial-gradient(ellipse 75% 70% at 50% 42%,#CB2129 0%,#A3141A 52%,#7A0C11 100%);background-size:180px 180px,100% 100%}
.intro-pin::before{content:"";position:absolute;inset:0;z-index:1;background:var(--bg);opacity:var(--fade,0)}
.intro-inner{position:relative;z-index:2;text-align:center;padding-inline:var(--gutter);transform:translateY(calc(var(--p) * -14vh)) scale(calc(1 - var(--p) * .3));opacity:calc(1 - var(--p) * 5)}
.intro .tag{margin-bottom:24px;background:#FFF6E3;color:#8E1016;box-shadow:0 8px 20px -10px rgba(0,0,0,.4)}
.intro h1{font-size:clamp(3rem,9.4vw,8rem);line-height:1;letter-spacing:-.02em;color:#FFF6E3;text-shadow:0 4px 18px rgba(80,0,0,.25)}
.intro h1 .script{font-family:"Pacifico","Brush Script MT",cursive;font-weight:400;letter-spacing:0;color:#FFC72C;font-size:1.02em;line-height:1.1;display:inline-block;transform:rotate(-3deg);padding:0 .08em}
.intro .lede{max-width:46ch;margin:26px auto 0;font-size:clamp(1rem,1.6vw,1.2rem);color:rgba(255,246,227,.92)}
.scroll-hint{display:inline-flex;align-items:center;gap:10px;margin-top:34px;font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#F2C76E}
.scroll-hint i{width:22px;height:34px;border:2.5px solid currentColor;border-radius:12px;position:relative}
.scroll-hint i::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:currentColor;animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{60%{transform:translateY(9px);opacity:0}}
/* Logo SeDidik: muncul, kemudian zum masuk ke bintang 12 bucu */
.reveal-logo{position:absolute;left:50%;top:50%;z-index:3;width:clamp(220px,46vmin,520px);pointer-events:none;opacity:var(--lo,0);
  transform-origin:27.77% 47.06%;transform:translate(-27.77%,-47.06%) scale(var(--ls,1))}
.reveal-logo svg{display:block;width:100%;height:auto;overflow:visible}
.reveal-logo .cream-star{opacity:var(--cs,0)}
.intro .sticker.squeezed{display:none}
.intro-pin.zoom-done .reveal-logo,.intro-pin.zoom-done .intro-stars,.intro-pin.zoom-done .florals{visibility:hidden}
.sticker{position:absolute;z-index:2;filter:drop-shadow(0 10px 12px rgba(0,0,0,.25))}
.intro .sticker.fera{width:min(clamp(100px,13vw,210px),26vh);left:max(3%,calc(50% - 46vw));bottom:6%;opacity:calc(1 - var(--fade,0));transform:rotate(-6deg) translateY(calc(var(--p) * -40vh));animation:bob 4s ease-in-out infinite;filter:drop-shadow(0 16px 18px rgba(60,0,0,.4))}
.intro .sticker.medal{right:max(3%,calc(50% - 46vw));bottom:10%;width:min(clamp(100px,13vw,190px),24vh);opacity:calc(1 - var(--fade,0));transform:rotate(6deg) translateY(calc(var(--p) * -30vh));filter:drop-shadow(0 16px 18px rgba(60,0,0,.45))}
.intro .sticker.medal img{display:block;width:100%;height:auto}

.intro .sticker.medal b{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-family:var(--display);font-weight:700;color:#7A5530;font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:.9;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.intro .sticker.medal b small{display:block;font-size:.42em;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
@keyframes bob{50%{translate:0 -10px}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:640px){.intro .sticker.fera{left:4%;bottom:3%;width:92px}.intro .sticker.medal{right:4%;bottom:5%;width:104px}}

/* Bintang rawak di pembuka: muncul satu demi satu, kemudian berputar & terapung.
   Semasa skrol (--p), bintang berselerak keluar dan pudar. Nilai rawak dijana oleh JS. */
.intro-stars{position:absolute;inset:0;z-index:1;pointer-events:none}
.intro-stars .is{position:absolute;left:var(--x);top:var(--y);width:var(--sz);aspect-ratio:1;margin:calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);
  transform:translate(calc(var(--dx) * var(--p) * 1vw),calc(var(--dy) * var(--p) * 1vh));opacity:calc(1 - var(--p) * 2.2)}
.intro-stars .is b{display:block;width:100%;height:100%;background:var(--c);opacity:var(--o);
  -webkit-mask:var(--star-shape) center/contain no-repeat;mask:var(--star-shape) center/contain no-repeat;
  transform:scale(0) rotate(var(--r0));animation:isPop var(--dur) cubic-bezier(.34,1.45,.55,1) var(--d) forwards,isSpin var(--spin) linear calc(var(--d) + var(--dur)) infinite}
.intro-stars .is i{position:absolute;inset:0;animation:isFloat var(--float) ease-in-out calc(var(--d) + var(--dur)) infinite alternate}
@keyframes isPop{to{transform:scale(1) rotate(var(--r1))}}
@keyframes isSpin{from{transform:scale(1) rotate(var(--r1))}to{transform:scale(1) rotate(calc(var(--r1) + 360deg * var(--dir)))}}
@keyframes isFloat{to{translate:0 var(--fy)}}
/* Bunga & daun di pembuka: muncul perlahan & rawak, terapung, berselerak keluar semasa skrol */
.florals{position:absolute;inset:0;z-index:1;pointer-events:none}
.fl{position:absolute;left:var(--x);top:var(--y);width:var(--w);
  transform:translate(-50%,-50%) translate(calc(var(--dx,0) * var(--p) * 1vw),calc(var(--dy,0) * var(--p) * 1vh)) rotate(var(--r)) scaleX(var(--sx,1));
  opacity:calc(1 - var(--p) * 2.2);filter:drop-shadow(0 14px 16px rgba(60,0,0,.38))}
.fl.flip{--sx:-1}
.fl img{display:block;width:100%;height:auto;transform:scale(0) rotate(-25deg);
  animation:flPop var(--dur,1.4s) cubic-bezier(.34,1.4,.55,1) var(--d,0s) forwards,flFloat var(--float,5s) ease-in-out calc(var(--d,0s) + var(--dur,1.4s)) infinite alternate}
@keyframes flPop{to{transform:scale(1) rotate(0)}}
@keyframes flFloat{from{transform:scale(1) rotate(0)}to{transform:scale(1) rotate(var(--sway,3deg)) translateY(var(--fy,-8px))}}
@media (max-width:640px){.fl.m-hide{display:none}.fl{width:calc(var(--w) * 1.25)}}
/* Tajuk muncul selepas bintang */
.js .intro [data-in]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.9,.3,1.2)}
.intro.ready [data-in]{opacity:1;transform:none}
.intro.ready h1[data-in]{transition-delay:.12s}
.intro.ready .lede[data-in]{transition-delay:.26s}
.intro.ready .scroll-hint[data-in]{transition-delay:.42s}

/* ---------- Tajuk bahagian ---------- */
/* ===== Zum logo versi cerah: pentas lutsinar dipin di atas hero ===== */
.intro.intro-light{height:auto;background:var(--bg)}
.intro-light .hero{opacity:calc(1 - var(--hp,0))}
.intro-light .intro-pin{position:sticky;top:0;z-index:3;height:100vh;height:100svh;margin-top:-100vh;margin-top:-100svh;display:block;background:none;pointer-events:none;overflow:hidden}
.intro-light .intro-pin::before{display:none}
.intro-spacer{height:150vh}
.intro-light .reveal-logo{filter:drop-shadow(0 18px 30px rgba(120,60,0,calc(.18 * (1 - var(--cs,0)))))}
@media (prefers-reduced-motion:reduce){.intro-light .intro-pin,.intro-spacer{display:none}.intro-light .hero{opacity:1}}
/* ===== Hero (cerah, sepadan dengan seluruh laman) ===== */
.hero{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;display:grid;align-items:center;padding:calc(var(--bar) + 24px) 0 88px;background:
  radial-gradient(60vmax 60vmax at 92% 8%,rgba(255,199,44,.22),transparent 60%),
  radial-gradient(38vmax 38vmax at -8% 62%,rgba(229,49,122,.09),transparent 65%),var(--bg)}
.intro-light h1{color:var(--ink);text-shadow:none}
.intro-light .tag{margin:0;background:var(--white);color:var(--red);box-shadow:0 0 0 1.5px var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center;width:100%}
.hero-copy{display:grid;justify-items:start;gap:22px}
.hero h1{font-size:clamp(3rem,7.4vw,6.4rem);line-height:.98;letter-spacing:-.025em}
.hero h1 .mark{white-space:nowrap}
/* huruf melompat bila kursor melaluinya */
.jumpy .w{display:inline-block;white-space:nowrap}
.jumpy .ch{display:inline-block;transform-origin:50% 100%}
.jumpy .ch.jump{animation:chJump .62s cubic-bezier(.3,1.6,.45,1)}
@keyframes chJump{0%{transform:none}30%{transform:translateY(-.28em) rotate(var(--jr,-8deg)) scale(1.08);color:var(--jc)}60%{transform:translateY(.04em) scale(1.04,.94)}100%{transform:none}}
.hero-tagline{margin:-8px 0 0;display:inline-flex;align-items:center;gap:10px;font-family:"Pacifico",cursive;font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.3;color:var(--fera)}
.hero-tagline .star{width:.8em;height:.8em;color:var(--star);flex:none;animation:tagStar 4s ease-in-out infinite}
@keyframes tagStar{0%,100%{rotate:0deg;scale:1}50%{rotate:72deg;scale:1.15}}
.hero.ready .hero-tagline[data-in]{transition-delay:.15s}
.footer .footer-tagline{margin:4px 0 0;font-family:"Pacifico",cursive;font-size:1.05rem;color:var(--fera)}
@media (prefers-reduced-motion:reduce){.hero-tagline .star{animation:none}}
.hero-lede{margin:0;max-width:44ch;font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--muted)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-chips{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.hero-chips li{font-size:.9rem;color:var(--muted);background:var(--white);border-radius:999px;padding:8px 14px;box-shadow:0 0 0 1.5px var(--line)}
.hero-chips b{font-family:var(--display);font-weight:600;color:var(--ink);margin-right:4px}
.hero-chips li:nth-child(1) b{color:var(--fera)}.hero-chips li:nth-child(2) b{color:var(--red)}.hero-chips li:nth-child(3) b{color:var(--leaf)}
.hero-art{position:relative;aspect-ratio:1/1.02;width:min(100%,560px);justify-self:end}
.hp{position:absolute;margin:0;border-radius:999px 999px 28px 28px;overflow:hidden;background:var(--c);padding:10px;box-shadow:0 24px 40px -24px rgba(29,29,31,.45);rotate:var(--r);animation:hpFloat var(--fd,6s) ease-in-out infinite alternate}
.hp img{display:block;width:100%;height:100%;object-fit:cover;border-radius:999px 999px 20px 20px}
.hp1{--c:#FFC72C;--r:-5deg;left:2%;top:14%;width:40%;height:62%;--fd:6.4s}
.hp2{--c:#F7A6C6;--r:4deg;left:36%;top:0;width:36%;height:56%;z-index:2;--fd:7.2s}
.hp3{--c:#9ED6B4;--r:-2deg;right:0;top:34%;width:38%;height:60%;z-index:1;--fd:5.8s}
@keyframes hpFloat{from{translate:0 0}to{translate:0 -12px}}
.hero-badge{position:absolute;left:26%;bottom:2%;z-index:3;width:clamp(96px,10vw,132px);aspect-ratio:1;display:grid;place-items:center;background:var(--star);-webkit-mask:var(--star-shape) center/contain no-repeat;mask:var(--star-shape) center/contain no-repeat;animation:badgeSpin 24s linear infinite}
.hero-badge span{font-family:var(--display);font-weight:700;color:#7A3E00;font-size:clamp(1.3rem,2vw,1.7rem);line-height:.9;text-align:center;animation:badgeSpin 24s linear infinite reverse}
.hero-badge small{display:block;font-size:.5em;letter-spacing:.14em;text-transform:uppercase}
@keyframes badgeSpin{to{rotate:360deg}}
.hero-note{position:absolute;right:4%;top:6%;z-index:3;font-family:"Pacifico",cursive;font-size:clamp(1rem,1.5vw,1.25rem);color:var(--red);background:var(--white);padding:8px 16px 10px;border-radius:16px;box-shadow:var(--shadow);rotate:6deg}
.hero-note::after{content:"";position:absolute;left:18px;bottom:-9px;width:16px;height:12px;background:var(--white);clip-path:polygon(0 0,100% 0,20% 100%)}
.hero-deco{position:absolute;inset:0;pointer-events:none}
.hd{position:absolute;display:block;color:var(--star);opacity:.55;animation:hdTwinkle 5s ease-in-out infinite alternate}
.hd1{left:6%;top:16%;font-size:26px}.hd2{left:46%;top:12%;font-size:16px;color:var(--red);opacity:.35;animation-delay:-2s}
.hd3{left:52%;bottom:14%;font-size:22px;color:var(--fera);opacity:.35;animation-delay:-1s}.hd4{right:5%;bottom:10%;font-size:30px;animation-delay:-3s}
@keyframes hdTwinkle{from{scale:.8;rotate:0deg}to{scale:1.1;rotate:30deg}}
.hd-squig{position:absolute;left:3%;bottom:8%;width:120px;color:var(--leaf);opacity:.35}
.hero-scroll{position:absolute;left:50%;bottom:22px;translate:-50% 0;display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:800;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.hero-scroll i{width:20px;height:30px;border:2px solid currentColor;border-radius:12px;position:relative}
.hero-scroll i::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:6px;margin-left:-2px;border-radius:2px;background:var(--red);animation:scrollDot 1.6s ease-in-out infinite}
@keyframes scrollDot{0%{opacity:0;translate:0 0}40%{opacity:1}100%{opacity:0;translate:0 9px}}
.js .hero [data-in]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.9,.3,1.2)}
.hero.ready [data-in]{opacity:1;transform:none}
.hero.ready h1[data-in]{transition-delay:.1s}.hero.ready .hero-lede[data-in]{transition-delay:.2s}
.hero.ready .hero-cta[data-in]{transition-delay:.3s}.hero.ready .hero-chips[data-in]{transition-delay:.4s}
.js .hero .hp{opacity:0;scale:.9;transition:opacity .8s ease,scale .9s cubic-bezier(.2,.9,.3,1.3)}
.hero.ready .hp{opacity:1;scale:1}.hero.ready .hp2{transition-delay:.15s}.hero.ready .hp3{transition-delay:.3s}
@media (max-width:900px){
  .hero{min-height:auto;padding-bottom:72px}
  .hero-grid{grid-template-columns:1fr}
  .hero-art{justify-self:center;width:min(100%,440px);margin-top:8px}
  .hero-scroll{display:none}
  .hd1,.hd2{display:none}
}
@media (max-width:420px){.hero h1 .mark{white-space:normal}}
.section{position:relative;padding-block:clamp(72px,10vw,140px)}
.head{text-align:center;display:grid;justify-items:center;gap:18px;margin-bottom:clamp(40px,6vw,72px)}
.head p{max-width:52ch;color:var(--muted);font-size:1.1rem}
.motif-bg{background-image:var(--motif);background-size:48px 48px}

/* ---------- 2. Kad bertindan: muka surat buku latihan ---------- */
.stack{display:grid;gap:clamp(40px,8vh,90px);padding-bottom:6vh}
.card{--c:var(--red);position:sticky;top:calc(var(--bar) + 28px + var(--i) * 16px);margin-top:20px;border-radius:22px;border-top:6px solid var(--c);padding:clamp(26px,3vw,40px) clamp(18px,3vw,40px) clamp(18px,3vw,36px) clamp(64px,7vw,96px);
  background:linear-gradient(90deg,transparent 0 clamp(44px,5vw,72px),var(--margin) clamp(44px,5vw,72px) calc(clamp(44px,5vw,72px) + 2px),transparent calc(clamp(44px,5vw,72px) + 2px)),repeating-linear-gradient(180deg,transparent 0 31px,var(--rule) 31px 32px),var(--white);
  box-shadow:var(--shadow);transform-origin:50% 0;transform:scale(var(--s,1));transition:transform .1s linear}
.card:nth-child(2){--c:var(--fera)}.card:nth-child(3){--c:var(--leaf)}.card:nth-child(4){--c:var(--blue)}.card:nth-child(5){--c:var(--plum)}.card-enrich{--c:var(--fero)}
/* spiral logam: gelung perak + lubang tebukan; gelung condong sedikit bila kad ditimpa */
.card::before{content:"";position:absolute;z-index:3;left:30px;right:30px;top:-20px;height:44px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='44' viewBox='0 0 26 44'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23808089'/%3E%3Cstop offset='.32' stop-color='%23F7F7FA'/%3E%3Cstop offset='.58' stop-color='%23B7B7C0'/%3E%3Cstop offset='1' stop-color='%2366666F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='8.6' y='2' width='8.8' height='36' rx='4.4' fill='none' stroke='url(%23g)' stroke-width='3.4'/%3E%3Crect x='8.6' y='2' width='8.8' height='36' rx='4.4' fill='none' stroke='rgba(0,0,0,.2)' stroke-width='.5'/%3E%3C/svg%3E") 0 0/26px 44px repeat-x;filter:drop-shadow(0 2px 1.5px rgba(29,29,31,.28));
  transform-origin:50% 100%;transform:skewX(calc((1 - var(--s,1)) * -70deg));transition:transform .2s ease}
.card::after{content:"";position:absolute;z-index:2;left:30px;right:30px;top:8px;height:16px;pointer-events:none;
  background:radial-gradient(circle at 13px 8px,#5d5249 0 2.5px,rgba(93,82,73,.75) 3.5px,rgba(93,82,73,.28) 5px,rgba(255,255,255,.9) 6px,transparent 7px) 0 0/26px 16px repeat-x}
.card-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(18px,3vw,40px);align-items:center;min-height:min(56vh,520px)}
.card-art{display:grid;place-items:center;align-self:stretch}
.card-art img{width:min(100%,420px);filter:drop-shadow(0 16px 20px rgba(0,0,0,.15))}
/* Polaroid + pita washi */
.snap{position:relative;margin:0;width:min(100%,430px);padding:14px 14px 0;background:#fff;border-radius:10px;box-shadow:0 2px 3px rgba(29,29,31,.08),0 26px 40px -24px rgba(29,29,31,.5);rotate:-2.5deg;transition:rotate .5s cubic-bezier(.3,1.5,.5,1)}
.card:nth-child(2) .snap{rotate:2deg}
.snap:hover{rotate:0deg}
.card-art .snap img.card-photo{display:block;width:100%;aspect-ratio:642/554;object-fit:cover;border-radius:4px;filter:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.snap figcaption{font-family:"Pacifico",cursive;font-size:clamp(1.15rem,1.9vw,1.5rem);color:var(--ink);text-align:center;padding:12px 8px 16px;line-height:1.3}
.tape{position:absolute;z-index:2;top:-14px;width:clamp(86px,9vw,112px);height:32px;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--c) 62%,#fff) 0 6px,color-mix(in srgb,var(--c) 48%,#fff) 6px 12px);opacity:.82;
  box-shadow:0 2px 4px rgba(0,0,0,.12);
  clip-path:polygon(0 8%,6% 0,12% 10%,18% 0,24% 8%,30% 0,70% 0,76% 8%,82% 0,88% 10%,94% 0,100% 8%,100% 92%,94% 100%,88% 90%,82% 100%,76% 92%,70% 100%,30% 100%,24% 92%,18% 100%,12% 90%,6% 100%,0 92%)}
.tape-l{left:-22px;rotate:-38deg}
.tape-r{right:-22px;rotate:38deg}
.pol-star{position:absolute;z-index:2;right:-14px;bottom:30px;font-size:44px;color:var(--star);rotate:14deg;filter:drop-shadow(0 3px 3px rgba(0,0,0,.18))}
.js .snap{opacity:0;translate:0 -26px;scale:1.04}
.js .snap .tape{scale:0 1;transition:scale .35s ease}
.js .snap .pol-star{scale:0;transition:scale .45s cubic-bezier(.3,1.7,.5,1)}
.snap.stuck{opacity:1;translate:0 0;scale:1;transition:opacity .4s ease,translate .55s cubic-bezier(.3,1.4,.5,1),scale .55s ease,rotate .5s cubic-bezier(.3,1.5,.5,1)}
.snap.stuck .tape{scale:1 1}
.snap.stuck .tape-l{transition-delay:.45s}.snap.stuck .tape-r{transition-delay:.6s}
.snap.stuck .pol-star{scale:1;transition-delay:.8s}
@media (max-width:760px){.snap{width:min(84%,340px);padding:10px 10px 0}.tape{width:78px;height:26px;top:-11px}.pol-star{font-size:34px;right:-10px}}
@media (prefers-reduced-motion:reduce){.js .snap,.js .snap .tape,.js .snap .pol-star{opacity:1;translate:none;scale:none}}

.card .age{display:inline-block;font-weight:800;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;background:var(--c);color:#fff;padding:6px 14px;border-radius:999px;margin-bottom:16px}
.card-enrich .age{color:var(--ink)}
.card h3{font-size:clamp(2.2rem,5vw,4rem);font-weight:700;color:var(--ink);margin-bottom:14px}
.card p{color:var(--muted);max-width:48ch}
.pills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:18px 0 0}
.pills li{font-weight:700;font-size:.88rem;padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--ink)}
/* Enrichment: pelekat + panel butiran */
.stickers{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px);width:100%;padding:8px}
.stk{position:relative;display:grid;justify-items:center;align-content:end;gap:8px;padding:14px 8px 12px;border:0;border-radius:22px;background:var(--sc);cursor:pointer;font:inherit;color:var(--ink);
  box-shadow:0 0 0 5px #fff,0 10px 18px -10px rgba(29,29,31,.4);rotate:var(--r);transition:rotate .35s cubic-bezier(.3,1.5,.5,1),translate .35s cubic-bezier(.3,1.5,.5,1),box-shadow .3s,scale .35s cubic-bezier(.3,1.5,.5,1)}
.stk::after{content:"";position:absolute;top:0;right:0;width:22px;height:22px;border-radius:0 22px 0 0;background:linear-gradient(225deg,var(--bg) 50%,rgba(0,0,0,.12) 50%,#fff 62%);transition:width .3s,height .3s}
.stickers .stk img{height:clamp(70px,7.6vw,104px);width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.15));transform-origin:50% 100%}
.stk span{font-family:var(--display);font-weight:600;font-size:.8rem;line-height:1.1;text-align:center}
.stk:hover,.stk:focus-visible{rotate:0deg;translate:0 -6px;box-shadow:0 0 0 5px #fff,0 18px 26px -12px rgba(29,29,31,.45)}
.stk:hover::after,.stk[aria-selected="true"]::after{width:32px;height:32px}
.stk[aria-selected="true"]{rotate:0deg;translate:0 -8px;scale:1.06;box-shadow:0 0 0 5px #fff,0 0 0 8px var(--c),0 20px 30px -14px rgba(29,29,31,.5);z-index:1}
.stk[aria-selected="true"] img{animation:stkJump .7s cubic-bezier(.3,1.6,.45,1)}
@keyframes stkJump{0%{transform:none}30%{transform:translateY(-14%) scale(1.05,.96) rotate(-4deg)}60%{transform:translateY(2%) scale(1.03,.97)}100%{transform:none}}
.enrich-intro{margin-bottom:12px;font-size:.96rem;line-height:1.5}
.enrich-panel{position:relative;display:grid}
.ep{grid-area:1/1;align-self:start;background:#fff;border-radius:22px;padding:16px 20px;box-shadow:0 0 0 1.5px var(--line),0 14px 28px -20px rgba(29,29,31,.45);border-left:8px solid var(--c);animation:epIn .45s cubic-bezier(.2,.9,.3,1.1)}
.ep[hidden]{display:block!important;visibility:hidden;pointer-events:none;animation:none}
.ep h4{margin:0 0 8px;font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2vw,1.55rem);color:var(--ink)}
.ep-chips{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ep-chips li{font-size:.75rem;font-weight:800;letter-spacing:.03em;color:var(--ink);background:color-mix(in srgb,var(--c) 22%,#fff);padding:4px 10px;border-radius:999px}
.card-enrich .age{margin-bottom:10px}
.card-enrich h3{font-size:clamp(1.85rem,3.4vw,2.75rem);margin-bottom:8px}
.card-enrich .ep p{margin:0;color:var(--muted);max-width:46ch;font-size:.94rem;line-height:1.5}
@keyframes epIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.enrich-dots{display:flex;gap:8px;margin-top:10px}
.enrich-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background-color .3s,width .3s}
.enrich-dots i.on{width:22px;border-radius:8px;background:var(--c)}
@media (max-width:760px){
  .card-enrich .card-body > div:last-child{display:contents}
  .card-enrich .age{order:1;justify-self:start}.card-enrich h3{order:2}.card-enrich .enrich-intro{order:3;margin-bottom:0}
  .card-enrich .card-art{order:4}.card-enrich .enrich-panel{order:5}.card-enrich .enrich-dots{order:6;margin-top:0}
  .card-enrich .card-body{gap:12px}
  .stickers{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:14px 10px 18px;margin-inline:-6px;scrollbar-width:none}
  .stickers::-webkit-scrollbar{display:none}
  .stk{flex:0 0 112px;scroll-snap-align:center}
}
@media (prefers-reduced-motion:reduce){.stk,.stk img,.ep{animation:none!important;transition:none}}
@media (max-width:820px){
  .card{padding-left:clamp(52px,12vw,64px)}
  .card-body{grid-template-columns:1fr;min-height:0}
  .card-art img{width:min(70%,300px)}
}

/* FLIP:START — buku selak (kalendar meja) */
.fb-nav{display:none}
.fb-on{position:relative;height:calc(100svh + (var(--n) - 1) * 70vh)}
.fb-on .fb-pin{position:sticky;top:0;height:100svh;display:grid;align-content:center;justify-items:center;gap:22px;padding-top:calc(var(--bar) + 26px);perspective:2400px;perspective-origin:50% 0}
.fb-measure .card-body{min-height:0}
.fb-on .stack{display:grid;gap:0;padding:0;width:100%;height:var(--fbh);transform-style:preserve-3d;scale:var(--fbs,1);transform-origin:50% 0;margin-bottom:calc(var(--fbh) * (var(--fbs,1) - 1))}
.fb-on .card{grid-area:1/1;position:relative;top:0;margin:0;height:var(--fbh);transform-origin:50% 0;transition:none;will-change:transform}
.fb-on .card-body{min-height:0;height:100%}
.fb-on .card::before{transform:none}
.fb-on .card.fb-back .card-body{visibility:hidden}
.fb-on .card.fb-gone{visibility:hidden}
.fb-on .fb-nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.fb-nav button{font:inherit;font-weight:800;font-size:.85rem;padding:8px 16px;border-radius:999px;border:0;cursor:pointer;background:#fff;color:var(--muted);box-shadow:0 0 0 1.5px var(--line);transition:background .25s,color .25s,box-shadow .25s}
.fb-nav button.on{background:var(--c,var(--red));color:#fff;box-shadow:none}
.fb-nav button:nth-child(1){--c:var(--red)}.fb-nav button:nth-child(2){--c:var(--fera)}.fb-nav button:nth-child(3){--c:var(--leaf)}.fb-nav button:nth-child(4){--c:#D98A00}
.fb-nav button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.fb-light,.fb-cast{display:none}
.fb-on .fb-light,.fb-on .fb-cast{display:block;position:absolute;inset:-6px 0 0;border-radius:inherit;pointer-events:none;opacity:0;z-index:5}
/* kertas melentur: jalur cahaya di lengkung, gelap dekat spiral dan di hujung */
.fb-on .fb-light{background:linear-gradient(180deg,rgba(70,45,20,.30) 0%,rgba(70,45,20,.06) calc(var(--lp,40%) - 22%),rgba(255,255,255,.6) var(--lp,40%),rgba(255,255,255,0) calc(var(--lp,40%) + 20%),rgba(70,45,20,.2) 100%)}
.fb-on .fb-back .fb-light{background:linear-gradient(0deg,rgba(70,45,20,.34) 0%,rgba(255,255,255,.3) var(--lp,40%),rgba(70,45,20,.14) 100%)}
/* bayang halaman yang sedang diselak, jatuh ke halaman di bawah */
.fb-on .fb-cast{background:linear-gradient(180deg,rgba(45,28,10,.45) 0%,rgba(45,28,10,.2) calc(var(--cr,50%) * .7),rgba(45,28,10,0) var(--cr,50%))}
.fb-on .card{backface-visibility:visible}
/* telefon: halaman buku versi padat */
.fb-compact .card{padding:20px 14px 14px clamp(46px,12vw,58px);border-top-width:5px}
.fb-compact .card-body{gap:10px}
.fb-compact .snap{width:min(66%,250px);padding:8px 8px 0}
.fb-compact .snap figcaption{font-size:1rem;padding:6px 6px 8px}
.fb-compact .tape{width:62px;height:22px;top:-9px}
.fb-compact .card .age{font-size:.72rem;padding:4px 11px;margin-bottom:8px}
.fb-compact .card h3{font-size:clamp(1.7rem,8vw,2.2rem);margin-bottom:8px}
.fb-compact .card p{font-size:.92rem;line-height:1.5}
.fb-compact .pills{margin-top:10px;gap:6px}
.fb-compact .pills li{font-size:.76rem;padding:4px 10px}
.fb-compact .card-enrich .enrich-intro{display:none}
.fb-compact .stickers{padding:10px 8px 12px}
.fb-compact .stk{flex-basis:96px}
.fb-compact .stickers .stk img{height:64px}
.fb-compact .enrich-panel{min-height:150px}
.fb-compact .ep{padding:14px 16px}
.fb-compact .ep h4{font-size:1.3rem}
.fb-compact .fb-nav{gap:6px;margin-top:14px}
.fb-compact .fb-nav button{font-size:.78rem;padding:7px 12px}
.fb-compact.fb-on .fb-pin{gap:16px;padding-top:calc(var(--bar) + 18px)}
/* FLIP:END */
/* ---------- 3. Petikan Premier: gambar berbingkai + kad ---------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.premier{padding-block:clamp(40px,6vw,80px) clamp(72px,9vw,120px)}
.photo-band{position:relative;margin:0;aspect-ratio:3/2;max-height:78vh;width:100%;overflow:hidden;border-radius:clamp(24px,3vw,40px);background:var(--bg-2);box-shadow:var(--shadow)}
.photo-band img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;object-position:50% 45%;transform:translateY(var(--py,0)) scale(var(--zoom,1));will-change:transform}
.photo-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(29,29,31,.35) 100%);pointer-events:none}
.photo-band figcaption{position:absolute;left:clamp(16px,2.4vw,28px);top:clamp(16px,2.4vw,28px);z-index:1;font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--ink);padding:7px 14px;border-radius:999px}
.premier-quote{position:relative;z-index:2;max-width:920px;margin:calc(-1*clamp(70px,9vw,130px)) auto 0;background:var(--red);color:#fff;border-radius:clamp(24px,3vw,36px);padding:clamp(28px,4vw,52px) clamp(24px,5vw,64px) clamp(26px,3.6vw,44px);box-shadow:0 30px 60px -30px rgba(168,27,32,.6)}
.quote-mark{position:absolute;top:-.42em;left:clamp(20px,4vw,52px);font-family:var(--display);font-weight:700;font-size:clamp(5rem,9vw,8rem);line-height:1;color:var(--star)}
.premier-quote blockquote{margin:0}
.premier-quote blockquote p{font-family:var(--display);font-weight:600;font-size:clamp(1.35rem,2.6vw,2.15rem);line-height:1.28;letter-spacing:-.01em;text-wrap:pretty}
.premier-quote blockquote .mark{color:var(--star)}
.premier-quote .qw{transition:opacity .15s linear}
.premier-quote{will-change:transform}
.premier-cite{margin-top:clamp(18px,2.4vw,26px);padding-top:clamp(14px,2vw,20px);border-top:1.5px solid rgba(255,255,255,.25);display:grid;gap:4px;font-size:.95rem}
.premier-cite b{font-weight:800}
.premier-cite span{color:rgba(255,255,255,.85)}
@media (max-width:640px){.photo-band{aspect-ratio:4/3}.premier-quote{margin-top:-40px}}

/* ---------- 4. Tatal mendatar: cara belajar ---------- */
.hscroll{position:relative;height:var(--h,300vh)}
.hscroll-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:100%;align-content:center;gap:clamp(24px,4vh,44px);padding-top:var(--bar)}
.hscroll-pin .head{width:100%;margin-bottom:0}
.track{display:flex;gap:clamp(18px,2.4vw,32px);padding-inline:var(--gutter);width:max-content;justify-self:start;transform:translateX(var(--x,0));will-change:transform}
.learn{--c:var(--red);position:relative;flex:none;width:clamp(280px,32vw,400px);background:var(--white);border-radius:28px;padding:14px;box-shadow:var(--shadow)}
.learn:nth-child(1){--c:var(--leaf)}.learn:nth-child(2){--c:var(--fera)}.learn:nth-child(3){--c:var(--red)}.learn:nth-child(4){--c:var(--blue)}
.learn figure{margin:0;aspect-ratio:4/4.4;border-radius:20px;overflow:hidden;background:var(--bg-2)}
.learn figure img{width:100%;height:100%;object-fit:cover}
.learn .txt{padding:18px 8px 8px;display:grid;gap:8px}
.learn h3{color:var(--c)}
.learn p{color:var(--muted);font-size:.97rem}
.learn .num{position:absolute;top:26px;left:26px;z-index:1;font-weight:800;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;background:var(--c);color:#fff;border-radius:999px;padding:5px 12px}
.learn.end{display:grid;align-content:center;justify-items:start;gap:18px;padding:32px;background:var(--red);color:#fff;box-shadow:none}
.learn.end h3{color:#fff;font-size:clamp(1.8rem,3vw,2.6rem)}
.learn.end p{color:rgba(255,255,255,.9)}
.learn.end .btn{background:var(--star);color:var(--ink);box-shadow:none}
@media (max-width:760px){
  .hscroll{height:auto}
  .hscroll-pin{position:static;height:auto;overflow:visible;padding-block:72px}
  .track{width:100%;justify-self:stretch;overflow-x:auto;scroll-snap-type:x mandatory;padding-block:20px 30px;transform:none!important}
  .learn{scroll-snap-align:center;width:78vw}
}

/* DAY:START — Sehari di SeDidik */
.hscroll.day .hscroll-pin{background:var(--sky-now,#FFF6DA);transition:background-color .3s linear;gap:clamp(14px,2.4vh,28px)}
.day-head{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,30px);text-align:left}
.day-title{display:grid;justify-items:start;gap:8px}
.day-sub{margin:0;color:var(--muted);font-weight:700;font-size:.95rem}
.day-clock{flex:none;display:grid;justify-items:center;gap:6px}
.day-clock svg{width:clamp(60px,6.4vw,86px);height:auto;filter:drop-shadow(0 8px 14px rgba(120,60,0,.18))}
.dc-face{fill:#fff;stroke:var(--red);stroke-width:5}
.dc-ticks line{stroke:#C9B48A;stroke-width:2.4;stroke-linecap:round}
.dc-h,.dc-m{stroke-linecap:round;transform-origin:50px 50px}
.dc-h{stroke:var(--ink);stroke-width:5.5}
.dc-m{stroke:var(--red);stroke-width:3.5}
.dc-dot{fill:var(--star);stroke:var(--ink);stroke-width:1.5}
.dc-time{font-family:var(--display);font-weight:700;font-size:.95rem;background:var(--ink);color:#fff;border-radius:999px;padding:3px 11px;font-variant-numeric:tabular-nums}
.day .learn .num{font-family:var(--display);font-size:.85rem;letter-spacing:.02em;text-transform:none;padding:6px 13px 6px 30px;background:var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") no-repeat 10px 50%/14px}
.day .learn:nth-child(1){--c:#E08A00}.day .learn:nth-child(2){--c:var(--leaf)}.day .learn:nth-child(3){--c:var(--fera)}.day .learn:nth-child(4){--c:var(--red)}.day .learn:nth-child(5){--c:var(--blue)}.day .learn:nth-child(6){--c:var(--plum)}
/* kad aktif membesar, yang lain senget macam polaroid */
.day .learn{transition:transform .5s cubic-bezier(.3,1.3,.5,1),opacity .4s,box-shadow .4s}
.day.go .learn:not(.on){transform:scale(.9) rotate(var(--tilt,-2deg));opacity:.78}
.day .learn:nth-child(even){--tilt:2deg}
.day .learn.on{box-shadow:0 0 0 3px var(--c),0 30px 50px -28px rgba(29,29,31,.5)}
.day .learn.end.on{box-shadow:0 30px 50px -28px rgba(215,38,44,.7)}
/* kad daftar */
.learn.end{position:relative;overflow:hidden;padding-right:clamp(120px,12vw,160px)}
.end-dates{list-style:none;margin:0;padding:0;display:grid;gap:6px;color:rgba(255,255,255,.95);font-size:.95rem}
.end-dates li{padding-left:22px;position:relative}
.end-dates li::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:14px;background:var(--star);-webkit-mask:var(--star-shape) center/contain no-repeat;mask:var(--star-shape) center/contain no-repeat}
.end-fera{position:absolute;right:8px;bottom:-6px;--mh:clamp(150px,18vw,210px);height:var(--mh)}
.end-fera .rig{height:var(--mh)}
.learn.end:hover .rig .rig-wave{animation:waveFast .5s ease-in-out infinite alternate}
/* bar kemajuan + titik */
.day-nav{display:flex;align-items:center;justify-content:center;gap:16px;padding-inline:var(--gutter)}
.dn-count{font-family:var(--display);font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;min-width:62px}
.dn-count b{color:var(--ink);font-size:1.15rem}
.dn-bar{position:relative;width:min(320px,34vw);height:6px;border-radius:99px;background:rgba(29,29,31,.1);overflow:hidden}
.dn-bar i{position:absolute;inset:0;background:linear-gradient(90deg,var(--star),var(--red));transform-origin:0 50%;transform:scaleX(var(--p,0))}
.dn-dots{display:flex;gap:8px}
.dn-dots button{width:12px;height:12px;padding:0;border:0;border-radius:50%;background:rgba(29,29,31,.18);cursor:pointer;transition:transform .25s,background .25s}
.dn-dots button.on{background:var(--red);transform:scale(1.35)}
.dn-dots button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
@media (min-width:761px){.day{--cw:clamp(250px,min(30vw,calc((100svh - 400px) / .95)),400px)}.day .learn{width:var(--cw)}.day .learn figure{aspect-ratio:4/3.3}.day .learn .txt{padding-top:14px}.day .track{padding-inline:calc(50vw - var(--cw) / 2)}.day .hscroll-pin{padding-bottom:12px}}
@media (max-width:760px){
  .day-head{flex-direction:column;text-align:center}
  .day-title{justify-items:center}
  .dn-bar{width:34vw}
  .learn.end{padding-right:32px;padding-bottom:clamp(150px,40vw,190px)}
}
@media (prefers-reduced-motion:reduce){.day .learn{transition:none}.hscroll.day .hscroll-pin{transition:none}}
/* skrin rendah: padatkan tajuk & kad */
.day-tight .day-sub{display:none}
.day-tight .learn figure{aspect-ratio:auto!important;height:var(--fh,220px)}
.day-tight .day-clock svg{width:52px}
.day-tight .dc-time{font-size:.8rem;padding:2px 9px}
.day-tight .day-title{gap:4px}
.day-tight .day-title h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
.day-tight .learn .txt{padding:10px 6px 4px;gap:4px}
.day-tight .learn h3{font-size:1.15rem}
.day-tight .learn p{font-size:.86rem;line-height:1.45}
.day-tight.hscroll .hscroll-pin{gap:12px}
.day-tight .learn.end{padding:22px 84px 22px 22px;gap:12px}
.day-tight .learn.end h3{font-size:clamp(1.4rem,2.2vw,1.8rem)}
.day-tight .end-dates{font-size:.84rem}
.day-tight .end-fera{--mh:130px;right:2px}

/* DAY:END */
/* ---------- 5. Garis masa: tahun melekat ---------- */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px)}
.story-year{position:sticky;top:calc(var(--bar) + 24px);align-self:start;height:calc(100vh - var(--bar) - 48px);display:grid;align-content:center;justify-items:start}
.story-year .big{font-family:var(--display);font-weight:700;font-size:clamp(5rem,15vw,12.5rem);line-height:.85;color:var(--red);letter-spacing:-.04em;display:block}
.story-year .big.flip{animation:flip .45s cubic-bezier(.2,.8,.2,1)}
@keyframes flip{from{transform:translateY(30%);opacity:0}}
.story-year .label{font-weight:800;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;margin-top:18px;padding:6px 14px;border-radius:999px;background:var(--star)}
.story-items{list-style:none;margin:0;padding:0}
.story-items>li{min-height:44vh;display:grid;align-content:center;gap:14px;opacity:.3;transition:opacity .4s}
.story-items>li.active{opacity:1}
.story-items .when{font-weight:800;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.story-items h3{font-size:clamp(1.7rem,3vw,2.4rem)}
.story-items p{color:var(--muted);max-width:44ch;font-size:1.08rem}
.sdgs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:8px 0 0}
.sdgs li{display:flex;align-items:center;gap:8px;background:var(--white);border-radius:999px;padding:4px 12px 4px 4px;font-size:.88rem;box-shadow:0 0 0 1.5px var(--line);min-height:0;opacity:1}
.sdgs b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#fff;font-size:.8rem}
@media (max-width:760px){
  .story{grid-template-columns:1fr}
  .story-year{position:sticky;top:var(--bar);height:auto;z-index:2;background:var(--bg);padding-block:10px;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);box-shadow:0 1px 0 var(--line)}
  .story-year .big{font-size:4rem}
  .story-year .label{margin-top:8px}
  .story-items>li{min-height:auto;padding-block:40px;opacity:1}
}

/* carta ketinggian: Fero membesar ikut skrol, tanda pensel setiap tahun (desktop) */
.hc{display:none}
@media (min-width:761px){
  .story-year{justify-items:stretch;align-content:stretch;grid-template-rows:auto minmax(0,1fr)}
  .story-year .big,.story-year .label{display:none}
  .hc{display:block;position:relative;width:100%;height:100%;--rx:128px;--rw:110px;--rh:90%}
  .hc::before{content:"";position:absolute;left:calc(var(--rx) - 30px);right:4%;bottom:-6px;height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(80,50,20,.18),transparent)}
  .hc-ruler{position:absolute;left:var(--rx);bottom:0;width:var(--rw);height:var(--rh);filter:drop-shadow(0 10px 14px rgba(60,35,10,.18))}
  .hc-ruler img{display:block;width:100%;height:100%}
  .hc-marks{position:absolute;inset:0;pointer-events:none}
  .hc-mark{position:absolute;left:0;top:var(--y);width:calc(var(--rx) + var(--rw) * .62);height:0;opacity:0;transform:translateX(-10px);transition:opacity .35s,transform .35s}
  .hc-mark.on{opacity:1;transform:none}
  .hc-mark::after{content:"";position:absolute;right:0;top:-1.5px;width:calc(var(--rw) * .62 + 10px);height:3px;border-radius:3px;background:#4A3524;opacity:.75;transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s cubic-bezier(.5,0,.3,1)}
  .hc-mark.drawn::after{transform:scaleX(1)}
  .hc-mark b{position:absolute;right:calc(var(--rw) * .62 + 20px);top:-.62em;font-weight:800;font-size:.9rem;line-height:1.2;color:var(--muted);white-space:nowrap;transition:font-size .3s,color .3s}
  .hc-mark small{position:absolute;right:calc(var(--rw) * .62 + 20px);top:1.3em;width:118px;text-align:right;font-weight:800;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .3s}
  .hc-mark.cur b{font-family:var(--display);font-size:2.3rem;line-height:1;top:-.55em;color:var(--red)}
  .hc-mark.cur small{opacity:1}
  .hc-mark.cur::after{background:var(--red);opacity:1}
  .hc-mark.under b{opacity:0}
  .hc-dense .hc-mark:not(.cur) b{opacity:0}
  .hc-level{position:absolute;height:0;border-top:2px dashed rgba(230,57,70,.55);pointer-events:none}
  .hc-fero{position:absolute;bottom:0;left:0;z-index:2;filter:drop-shadow(0 12px 14px rgba(60,35,10,.22))}
  .hc-fero img{position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:0}
  .hc-fero img:first-child{opacity:1}
}
/* ---------- 6. Acara: polaroid ---------- */
.polaroids{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,30px);align-items:start}
.polaroid{display:block;text-decoration:none;background:var(--white);padding:12px 12px 18px;border-radius:8px;box-shadow:var(--shadow);transform:rotate(var(--r,0deg));transition:transform .25s ease}
.polaroid:nth-child(1){--r:-3deg}.polaroid:nth-child(2){--r:2deg;margin-top:40px}.polaroid:nth-child(3){--r:-1.5deg;margin-top:10px}.polaroid:nth-child(4){--r:3deg;margin-top:50px}
.polaroid:hover{transform:rotate(0) translateY(-6px)}
.polaroid figure{margin:0;aspect-ratio:1;overflow:hidden;border-radius:4px;background:var(--bg-2)}
.polaroid img{width:100%;height:100%;object-fit:cover}
.polaroid .date{display:inline-block;margin-top:14px;font-weight:800;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;background:var(--sky);color:var(--ink);padding:4px 10px;border-radius:999px}
.polaroid h3{font-family:var(--body);font-weight:800;font-size:1.02rem;line-height:1.3;margin-top:10px;letter-spacing:0}
.polaroid .meta{font-size:.85rem;color:var(--muted);margin-top:6px}
.video-row{display:flex;justify-content:center;margin-top:clamp(36px,5vw,56px)}
/* kamera polaroid ajaib: Fero mengambil gambar, gambar keluar dari celah kamera, "dicuci", lalu terbang ke papan gabus (desktop) */
.ev-cam{display:none}
.ev-stage.pinned{height:440vh}
.ev-stage.pinned .ev-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-content:center;padding-top:var(--bar)}
.ev-fit{transform-origin:50% 0;transform:scale(var(--fit,1));margin-bottom:var(--fitmb,0px)}
.ev-stage.pinned .ev-head{margin-bottom:clamp(14px,2.4vh,28px)}
.ev-stage.tight .ev-head .tag{display:none}
.ev-stage.pinned .ev-scene{position:relative;display:grid;grid-template-columns:clamp(170px,20%,240px) minmax(0,1fr);gap:clamp(14px,2.6vw,36px);align-items:center}
.ev-stage.pinned .ev-cam{display:block;position:relative;z-index:1;filter:drop-shadow(0 14px 16px rgba(60,35,10,.22))}
.ev-cam img{display:block;width:100%;height:auto}
.ev-glow{position:absolute;left:54.1%;top:16.1%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,#fff 0,rgba(255,255,255,.85) 18%,rgba(255,244,200,.35) 45%,transparent 70%);opacity:var(--fl,0);pointer-events:none;mix-blend-mode:screen}
.ev-stage.pinned .ev-board{position:relative;z-index:2;border-style:solid;border-color:transparent;border-width:clamp(30px,3.2vw,42px) clamp(28px,2.9vw,38px);border-image:url(../images/corkboard.webp) 10% 5.6% fill / 1 stretch;padding:clamp(10px,1.6vw,20px) clamp(8px,1.2vw,16px);filter:drop-shadow(0 16px 22px rgba(60,35,10,.18))}
.ev-stage.pinned .polaroids{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.ev-stage.pinned .polaroid{position:relative;z-index:2;padding:9px 9px 12px;margin-top:0;transition:none;transform-origin:50% 0;will-change:transform;visibility:hidden}
.ev-stage.pinned .polaroid.out{visibility:visible}
.ev-stage.pinned .polaroid:hover{transform:var(--tf)}
.ev-stage.pinned .polaroid figure{aspect-ratio:4/3;position:relative}
.ev-stage.pinned .polaroid figure img{filter:saturate(var(--dev,1)) brightness(calc(1.45 - .45 * var(--dev,1)))}
.ev-stage.pinned .polaroid figure::after{content:"";position:absolute;inset:0;background:#3a3631;opacity:calc((1 - var(--dev,1)) * .92);mix-blend-mode:multiply}
.ev-stage.pinned .polaroid .date{margin-top:9px;font-size:.66rem;padding:3px 8px}
.ev-stage.pinned .polaroid h3{font-size:.84rem;margin-top:6px}
.ev-stage.pinned .polaroid .meta{display:none}
.ev-stage.pinned .polaroid::before{content:"";position:absolute;z-index:3;top:-7px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#fff6 0 18%,transparent 22%),var(--pc,#E63946);box-shadow:0 3px 5px rgba(0,0,0,.35);opacity:0;scale:.3;transition:opacity .2s,scale .25s cubic-bezier(.3,1.6,.5,1)}
.ev-stage.pinned .polaroid.tacked::before{opacity:1;scale:1}
.ev-stage.pinned .polaroid:nth-child(2){--pc:#2D8CFF}.ev-stage.pinned .polaroid:nth-child(3){--pc:#F4B400}.ev-stage.pinned .polaroid:nth-child(4){--pc:#2BAE66}
@media (max-width:900px){.polaroids{grid-template-columns:repeat(2,1fr)}.polaroid:nth-child(n){margin-top:0}}
@media (max-width:460px){.polaroids{grid-template-columns:1fr}}

/* ---------- 7. Orang ---------- */
.vmm{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:clamp(48px,7vw,80px)}
.vmm div{border-radius:26px;padding:26px;display:grid;gap:12px;align-content:start}
.vmm div:nth-child(1){background:var(--sky)}.vmm div:nth-child(2){background:#FFF2CC}.vmm div:nth-child(3){background:#FCE3EC}
.vmm .tag{justify-self:start}
.vmm p{font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.2}
@media (max-width:820px){.vmm{grid-template-columns:1fr}}
/* Kad pemimpin: potret gerbang + petikan, mesej penuh dalam dialog */
.leaders{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px);margin-bottom:clamp(48px,7vw,80px)}
.leader{--c:var(--red);display:grid;grid-template-columns:minmax(150px,.85fr) 1.15fr;gap:clamp(18px,2.4vw,28px);align-items:stretch;background:var(--white);border-radius:32px;padding:clamp(16px,2vw,22px);box-shadow:var(--shadow)}
.leader-photo{margin:0;border-radius:999px 999px 22px 22px;overflow:hidden;background:color-mix(in srgb,var(--c) 14%,#fff);aspect-ratio:3/4;align-self:start;position:relative}
.leader-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--c) 22%,transparent);pointer-events:none}
.leader-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.leader-text{display:flex;flex-direction:column;gap:14px;padding-block:clamp(4px,1vw,12px)}
.leader-label{align-self:flex-start;font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--c);padding:6px 12px;border-radius:999px}
.leader-quote{margin:0;position:relative;padding-top:.35em}
.leader-quote::before{content:"\201C";position:absolute;top:-.32em;left:-.04em;font-family:var(--display);font-weight:700;font-size:4.2rem;line-height:1;color:var(--star)}
.leader-quote p{position:relative;font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,1.9vw,1.65rem);line-height:1.22;color:var(--ink);text-wrap:balance}
.leader-sign{margin-top:auto;padding-top:14px;border-top:1.5px dashed var(--line);display:grid;gap:2px}
.leader-sign b{font-weight:800;line-height:1.3}
.leader-sign span{font-size:.86rem;color:var(--muted);line-height:1.4}
.leader-btn{align-self:flex-start;font-size:.95rem;padding:.65em 1.15em}
.leader-btn:hover{color:var(--c)}
@media (max-width:980px){.leaders{grid-template-columns:1fr}}
@media (max-width:520px){.leader{grid-template-columns:1fr}.leader-photo{width:min(62%,220px);justify-self:center}}

.msg-dialog{width:min(760px,calc(100vw - 32px));max-height:min(86vh,900px);padding:0;border:0;border-radius:28px;background:var(--white);color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.5);overflow:hidden}
.msg-dialog[open]{display:flex;flex-direction:column;animation:dlgIn .35s cubic-bezier(.2,.9,.3,1.1)}
.msg-dialog::backdrop{background:rgba(29,29,31,.55);backdrop-filter:blur(3px)}
@keyframes dlgIn{from{opacity:0;transform:translateY(24px) scale(.97)}}
.msg-head{--c:var(--red);position:relative;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:22px 64px 22px 24px;background:color-mix(in srgb,var(--c) 10%,#fff);border-bottom:1.5px solid var(--line)}
.msg-head img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 12%;box-shadow:0 0 0 4px #fff}
.msg-head h3{font-size:1.2rem;line-height:1.25;margin-top:6px}
.msg-role{font-size:.85rem;color:var(--muted)}
.msg-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:1.05rem;cursor:pointer;box-shadow:0 4px 12px -6px rgba(0,0,0,.3)}
.msg-close:hover{background:var(--ink);color:#fff}
.msg-body{overflow-y:auto;padding:clamp(20px,3vw,32px) clamp(20px,3.4vw,40px) clamp(24px,3vw,36px);display:grid;gap:14px;font-size:1.05rem;line-height:1.75;color:#33333A}
body.dialog-open{overflow:hidden}
.team-title{font-size:clamp(1.6rem,3.2vw,2.4rem);margin-bottom:24px}
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:24px 16px;list-style:none;padding:0;margin:0 0 clamp(48px,7vw,72px)}
.team li{display:grid;justify-items:center;text-align:center;gap:6px}
.team img{width:120px;height:120px;border-radius:50%;object-fit:cover;object-position:50% 20%;background:var(--bg-2);box-shadow:0 0 0 4px var(--white),0 0 0 6px var(--line);transition:transform .25s,box-shadow .25s}
.team li:hover img{transform:scale(1.05);box-shadow:0 0 0 4px var(--white),0 0 0 6px var(--star)}
.team b{font-size:.92rem;line-height:1.25;margin-top:8px}
.team span{font-size:.82rem;color:var(--muted)}
.team a{font-size:.78rem;color:var(--blue);word-break:break-all}
.meaning{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;background:var(--white);border-radius:32px;padding:clamp(20px,4vw,48px);box-shadow:var(--shadow)}
/* logo interaktif: bahagian yang dipilih menyala, yang lain pudar */
.meaning-logo{position:relative;display:grid;place-items:center;aspect-ratio:5/4;border-radius:24px;background:radial-gradient(circle at 50% 45%,#FFFFFF 0,#FFF6E3 70%);padding:8% 8% 12%}
.meaning-logo .logo-svg{width:100%;height:auto;overflow:visible}
.meaning-logo .logo-svg :is(path,polygon){transition:opacity .35s ease,filter .35s ease,transform .45s cubic-bezier(.3,.7,.3,1);transform-box:fill-box;transform-origin:center}
.meaning-logo[data-hl="curve"] :is(path,polygon):not(.lg-red):not(.lg-blk),
.meaning-logo[data-hl="word"] :is(path,polygon):not(.lg-word),
.meaning-logo[data-hl="colour"] :is(path,polygon):is(.lg-so,.lg-si),
.meaning-logo[data-hl="star"] :is(path,polygon):not(.lg-so):not(.lg-si){opacity:.12}
.meaning-logo[data-hl="star"] :is(path,polygon):is(.lg-so,.lg-si){transform:scale(1.7) rotate(30deg);filter:drop-shadow(0 0 8px rgba(255,180,20,.9))}
.meaning-logo[data-hl="curve"] :is(path,polygon):is(.lg-red,.lg-blk){filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.meaning-cap{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-family:var(--display);font-size:.85rem;color:var(--muted);opacity:.8}
.meaning-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.meaning-list li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;color:var(--muted);font-size:.95rem;padding:12px 14px;border-radius:18px;cursor:pointer;outline:none;transition:background-color .25s,box-shadow .25s}
.meaning-list li.on,.meaning-list li:focus-visible{background:#FFF6E3;box-shadow:inset 4px 0 0 var(--red)}
.meaning-list li i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-style:normal;font-family:var(--display);font-weight:700;color:#fff;transition:transform .3s}
.meaning-list li.on i{transform:rotate(-6deg) scale(1.08)}
.meaning-list li i.duo{background:linear-gradient(135deg,#D7262C 50%,#1D1D1F 50%)}
.meaning-list li b{color:var(--ink);display:block;font-family:var(--display);font-weight:600;font-size:1.08rem;margin-bottom:2px}
/* Fera & Fero */
.mascots{display:grid;grid-template-columns:1fr minmax(0,1.1fr) 1fr;gap:clamp(16px,3vw,40px);align-items:end;margin-top:clamp(28px,4vw,48px)}
.mascots-intro{align-self:center;text-align:center;display:grid;justify-items:center;gap:12px;padding-bottom:20px}
.mascots-intro h3{margin:0;font-size:clamp(1.8rem,3.4vw,2.6rem)}
.mascots-intro .script{font-family:"Pacifico",cursive;font-weight:400;color:var(--red)}
.mascots-intro p{margin:0;color:var(--muted);max-width:36ch}
.mascot{margin:0;display:grid;justify-items:center;gap:14px;min-width:0}
.mascot-stage{--mh:clamp(220px,25vw,330px);position:relative;width:100%;max-width:300px;min-height:calc(var(--mh) + 10px);display:grid;place-items:end center}
.mascot-stage::before{content:"";position:absolute;left:6%;right:6%;bottom:4%;aspect-ratio:1;border-radius:50%;background:var(--mc)}
.mascot-stage::after{content:"";position:absolute;bottom:0;left:22%;right:22%;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(90,40,10,.25),transparent)}
.mascot-fera{--mc:radial-gradient(circle at 35% 30%,#FFD3E4,#F7A6C6 75%)}
.mascot-fero{--mc:radial-gradient(circle at 35% 30%,#FFE6A6,#FFC72C 75%)}
.mascot figcaption{text-align:center;display:grid;gap:2px;color:var(--muted);font-size:.95rem}
.mascot figcaption b{font-family:var(--display);font-weight:700;font-size:1.4rem;color:var(--ink)}
.mascot-fera figcaption b{color:var(--fera)}
.mascot-fero figcaption b{color:#D9870A}
/* POST:START — poskad bertindan (#contact) */
.sc-post{height:240vh}
.sc-post .sc-pin{padding-top:calc(var(--bar) + 6px)}
/* kandungan di atas (bukan tengah) supaya tiada ruang kosong besar di bawah tajuk */
.sc-post:not(.sc-flat){margin-top:calc(-1 * var(--bar))}
.sc-post:not(.sc-flat) .sc-pin{align-content:start;padding-top:calc(var(--bar) + 18px);height:auto;padding-bottom:8px}
#contact{padding-bottom:clamp(20px,3vw,40px)}
.post-desk{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:center;width:100%}
/* sampul surat HQ */
.envelope{position:relative;background:var(--red);color:#fff;border-radius:18px;padding:clamp(108px,10vw,132px) clamp(22px,3vw,34px) clamp(24px,3vw,34px);box-shadow:0 30px 50px -30px rgba(122,12,17,.7);overflow:hidden}
.envelope::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 49.6%,rgba(0,0,0,.08) 50%) 0 100%/50% 46% no-repeat,linear-gradient(225deg,transparent 49.6%,rgba(0,0,0,.08) 50%) 100% 100%/50% 46% no-repeat;pointer-events:none}
.env-flap{position:absolute;left:0;right:0;top:0;height:clamp(70px,8vw,96px);background:#B81D23;clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 4px 2px rgba(0,0,0,.2))}
.env-seal{position:absolute;left:50%;top:calc(clamp(70px,8vw,96px) - 27px);translate:-50% 0;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE27A,#E8A714);display:grid;place-items:center;box-shadow:0 4px 8px rgba(0,0,0,.3),inset 0 -3px 0 rgba(0,0,0,.15)}
.env-seal .star{color:var(--red);font-size:28px}
.env-body{position:relative;display:grid;gap:14px}
.env-to{font-family:"Pacifico",cursive;font-size:1.1rem;color:var(--star)}
.env-body h3{font-size:clamp(1.5rem,2.6vw,2rem);color:#fff}
.env-body dl{margin:0;display:grid;gap:10px}
.env-body dt{font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--star)}
.env-body dd{margin:2px 0 0}
.env-body a{color:#fff}
.env-body .btn{justify-self:start;background:var(--star);color:var(--ink);box-shadow:none}
/* poskad */
.post-side{display:grid;gap:40px;justify-items:center}
.post-stack{position:relative;display:grid;width:min(100%,560px)}
.postcard{grid-area:1/1;position:relative;display:grid;grid-template-columns:1fr 1.15fr;min-height:280px;background:#FFFDF6;border-radius:10px;padding:22px;box-shadow:0 2px 3px rgba(0,0,0,.08),0 22px 40px -24px rgba(29,29,31,.55);
  background-image:repeating-linear-gradient(135deg,var(--red) 0 12px,transparent 12px 24px,var(--star) 24px 36px,transparent 36px 48px);background-size:100% 8px;background-repeat:no-repeat;background-position:0 0}
.postcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;border-radius:0 0 10px 10px;background:repeating-linear-gradient(135deg,var(--red) 0 12px,transparent 12px 24px,var(--star) 24px 36px,transparent 36px 48px)}
.pc-msg{display:grid;align-content:center;gap:6px;padding-right:18px;border-right:2px dashed #E6DCC6}
.pc-hello{font-family:"Pacifico",cursive;font-size:1.05rem;color:var(--muted)}
.pc-msg h3{font-family:"Pacifico",cursive;font-weight:400;font-size:clamp(1.7rem,2.8vw,2.4rem);line-height:1.15;color:var(--red)}
.pc-msg p{margin:0;font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pc-addr{position:relative;padding:62px 0 0 18px}
.pc-addr ul{list-style:none;margin:0;padding:0;display:grid}
.pc-addr li{font-size:.86rem;line-height:1.35;color:var(--ink);padding:5px 0;border-bottom:1.5px solid #EDE5D3}
.pc-addr li b{font-family:var(--display);font-weight:600;font-size:1rem}
.pc-addr a{color:var(--blue);word-break:break-all;text-decoration:none}
.pc-addr a:hover{text-decoration:underline}
.pc-stamp{position:absolute;right:0;top:0;width:52px;height:60px;background:var(--fera);display:grid;place-items:center;
  -webkit-mask:radial-gradient(circle at 4px 4px,transparent 3px,#000 3.5px) -4px -4px/8px 8px;mask:radial-gradient(circle at 4px 4px,transparent 3px,#000 3.5px) -4px -4px/8px 8px}
.pc-stamp::before{content:"";position:absolute;inset:6px;background:#FFE6F0;border-radius:2px}
.pc-stamp .star{position:relative;color:var(--star);font-size:30px;filter:drop-shadow(0 1px 0 #C9661A)}
.pc-mark{position:absolute;right:34px;top:8px;width:66px;height:66px;border-radius:50%;border:2.5px solid rgba(120,60,140,.55);display:grid;place-content:center;text-align:center;rotate:-14deg;color:rgba(120,60,140,.7);line-height:1}
.pc-mark span{font-size:.5rem;font-weight:800;letter-spacing:.12em}
.pc-mark b{font-size:.62rem;font-weight:800;letter-spacing:.04em;margin-top:2px}
.post-index{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.post-index button{font:inherit;font-weight:700;font-size:.82rem;color:var(--ink);background:var(--white);border:0;border-radius:999px;padding:7px 14px;cursor:pointer;box-shadow:0 0 0 1.5px var(--line);transition:background-color .25s,color .25s}
.post-index button:hover{color:var(--red)}
.post-index button.on{background:var(--red);color:#fff;box-shadow:none}
/* susunan dipin: poskad terbang masuk & bertindan */
.sc-post:not(.sc-flat) .postcard{will-change:transform,opacity}
/* mod rata */
.sc-post.sc-flat{height:auto}
.sc-post.sc-flat .post-desk{grid-template-columns:1fr}
.sc-post.sc-flat .post-stack{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;width:100%}
.sc-post.sc-flat .postcard{grid-area:auto;rotate:var(--r)}
.sc-post.sc-flat .post-index{display:none}
@media (max-width:560px){.postcard{grid-template-columns:1fr;padding:18px}.pc-msg{border-right:0;border-bottom:2px dashed #E6DCC6;padding:0 128px 12px 0}.pc-addr{padding:12px 0 0}.pc-stamp{top:-96px}.pc-mark{top:-92px;right:40px}}
/* peta + kapal terbang */
.sc-post{height:270vh}
.post-desk{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr)!important}
.map-stage{position:relative;border-radius:28px;box-shadow:0 0 0 1.5px var(--line),var(--shadow);background:#BEE0EA}
.map-img{display:block;width:100%;height:auto;border-radius:28px}
.map-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map-svg .trail{fill:none;stroke:var(--red);stroke-width:3;stroke-dasharray:1 9;stroke-linecap:round;vector-effect:non-scaling-stroke}
.map-svg .trail-reveal{stroke-dasharray:var(--tl,2000);stroke-dashoffset:calc(var(--tl,2000) * (1 - var(--tt,0)))}
.map-svg .pin{cursor:pointer}
.map-svg .pin-star{fill:var(--star);stroke:#B5590F;stroke-width:1.4;transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.3,1.7,.5,1)}
.map-svg .pin.hq .pin-star{fill:var(--red);stroke:#7A0C11}
.map-svg .pin-ring{fill:none;stroke:var(--red);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.map-svg text{font-family:var(--display);font-weight:600;font-size:15px;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round;opacity:0;transition:opacity .35s}
.map-svg .pin.lit .pin-star{transform:scale(1)}.map-svg .pin.lit text{opacity:1}
.map-svg .pin.cur .pin-star{transform:scale(1.4)}
.map-svg .pin.cur .pin-ring{opacity:1;animation:pinPulse 1.6s ease-out infinite}
@keyframes pinPulse{from{transform:scale(.7);opacity:.9}to{transform:scale(2.2);opacity:0}}
.plane{position:absolute;left:0;top:0;width:clamp(120px,15vw,210px);height:auto;pointer-events:none;z-index:2;
  transform:translate(calc(var(--px,0) * 1px - 58%),calc(var(--py,0) * 1px - 82%)) rotate(var(--pr,0deg));transition:transform .12s linear;filter:drop-shadow(0 12px 10px rgba(20,60,90,.28))}
.plane{animation:planeBob 2.4s ease-in-out infinite}
@keyframes planeBob{50%{translate:0 -6px}}
.post-stack .envelope{grid-area:1/1;align-self:start}
.post-stack .postcard{align-self:center}
.sc-post:not(.sc-flat) .post-stack{min-height:min(470px,62svh)}
.sc-post:not(.sc-flat) .envelope{padding-top:clamp(92px,8vw,112px)}
.sc-post.sc-flat .post-desk{grid-template-columns:1fr!important}
.sc-post.sc-flat .map-svg .pin-star{transform:scale(.55);opacity:.55;transition:transform .45s cubic-bezier(.3,1.7,.5,1),opacity .3s}.sc-post.sc-flat .map-svg .pin.lit .pin-star{transform:scale(1);opacity:1}.sc-post.sc-flat .map-svg .pin.cur .pin-star{transform:scale(1.4)}.sc-post.sc-flat .map-svg .pin.lit text{opacity:1}
.sc-post.sc-flat .plane{transform:translate(calc(var(--px,0) * 1px - 58%),calc(var(--py,0) * 1px - 82%)) rotate(-8deg)}
@media (max-width:560px){.map-svg text{font-size:24px;stroke-width:6px}.plane{width:110px}}
/* van SeDidik (Fera memandu, Fero melambai) menggantikan kapal terbang; laluan = jalan raya */
.plane.van{width:clamp(66px,6.8vw,98px);aspect-ratio:900/514;transform:translate(calc(var(--px,0) * 1px - 50%),calc(var(--py,0) * 1px - 86%)) rotate(var(--pr,0deg));animation:vanBump .5s ease-in-out infinite;filter:drop-shadow(0 8px 6px rgba(20,60,90,.3))}
.sc-post.sc-flat .plane.van{transform:translate(calc(var(--px,0) * 1px - 50%),calc(var(--py,0) * 1px - 86%)) rotate(var(--pr,0deg))}
@keyframes vanBump{50%{translate:0 -1.5px}}
.van-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;transform:scaleX(var(--vf,1));transition:transform .25s}
.van-logo{position:absolute;top:44.5%;width:10.5%;height:auto;max-width:none;left:var(--vl,14.5%);transition:left .25s}
.stage-right .van-img{--vf:-1}.stage-right .van-logo{--vl:75%}   /* bergerak ke kanan: van dicermin, logo kekal betul */
.map-svg .trail{stroke:#8E8A84;stroke-width:7;stroke-dasharray:none;stroke-linecap:round;opacity:.9}
.map-svg .trail-reveal{stroke-width:24}
.map-svg .trail-dash{fill:none;stroke:#fff;stroke-width:1.6;stroke-dasharray:7 8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.map-col{display:grid;gap:18px;justify-items:center;min-width:0}
.map-col .map-stage{width:100%}
.post-desk{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr)!important;align-items:center}
/* sampul HQ dipadatkan: saiz sama dengan poskad supaya timbunan kemas */
.sc-post:not(.sc-flat) .post-stack{min-height:0}
.sc-post:not(.sc-flat) .postcard{height:clamp(320px,50svh,390px);min-height:0;align-self:center}
.sc-post:not(.sc-flat) .envelope{height:auto;min-height:clamp(320px,50svh,390px);align-self:center}
.sc-post:not(.sc-flat) .envelope{padding:clamp(66px,6vw,80px) 20px 18px;font-size:.88rem;border-radius:12px}
.sc-post:not(.sc-flat) .env-flap{height:clamp(52px,5vw,64px)}
.sc-post:not(.sc-flat) .env-seal{top:calc(clamp(52px,5vw,64px) - 24px);width:46px;height:46px}
.sc-post:not(.sc-flat) .env-body{gap:8px}
.sc-post:not(.sc-flat) .env-body h3{font-size:1.25rem}
.sc-post:not(.sc-flat) .env-body dl{grid-template-columns:1fr 1fr;gap:6px 14px}
.sc-post:not(.sc-flat) .env-body dl > div:first-child{grid-column:1/-1}
.sc-post:not(.sc-flat) .env-body dt{font-size:.62rem}
.sc-post:not(.sc-flat) .env-body .btn{padding:.55em 1.1em;font-size:.88rem}
.sc-post:not(.sc-flat) .postcard{padding:18px;grid-template-columns:.9fr 1.1fr}
.sc-post:not(.sc-flat) .pc-addr li{font-size:.8rem;padding:4px 0}
.sc-post:not(.sc-flat) .pc-msg h3{font-size:clamp(1.4rem,2.2vw,2rem)}
.drop-card{position:absolute;left:0;top:0;width:clamp(34px,3.6vw,52px);height:auto;margin:-20px 0 0 -20px;z-index:3;pointer-events:none;filter:drop-shadow(0 4px 4px rgba(0,0,0,.2))}
.map-svg .pin.pop .pin-star{animation:pinPop .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes pinPop{0%{transform:scale(1.4)}40%{transform:scale(2.1)}100%{transform:scale(1.4)}}
/* POST:END */
/* angka besar (slaid 35 tahun) */
.bignums{list-style:none;margin:0 auto clamp(30px,5vw,56px);padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,22px);max-width:1040px}
.bignums li{background:var(--white);border-radius:26px;padding:clamp(18px,2.4vw,28px) 16px;text-align:center;box-shadow:0 0 0 1.5px var(--line),0 18px 34px -26px rgba(29,29,31,.45);display:grid;gap:4px}
.bignums b{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,5vw,3.8rem);line-height:1;color:var(--c)}
.bignums span{font-weight:700;font-size:.9rem;color:var(--muted)}
@media (max-width:700px){.bignums{grid-template-columns:repeat(2,1fr)}}
.footer-35{margin:6px 0 0;font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.hero-badge small{font-size:.42em}
/* EXTRAS:START — Program tambah nilai */
#extras .head{text-align:center;display:grid;justify-items:center;gap:14px;margin-bottom:clamp(28px,4vw,48px)}
#extras .lede{margin:0;max-width:56ch;color:var(--muted)}
.xgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.xcard{position:relative;display:grid;align-content:start;gap:8px;background:var(--white);border-radius:24px;padding:22px 22px 20px;box-shadow:0 0 0 1.5px var(--line),0 16px 30px -22px rgba(29,29,31,.45);transition:transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.xcard:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 0 0 2px var(--c),0 22px 36px -20px rgba(29,29,31,.45)}
.xicon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--c,var(--red)) 15%,#fff);color:var(--c,var(--red))}
.xicon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.xcard:hover .xicon{animation:xWiggle .5s ease}
@keyframes xWiggle{30%{rotate:-10deg}60%{rotate:8deg}}
.xyear{position:absolute;top:22px;right:20px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--bg-2);padding:4px 10px;border-radius:999px}
.xcard h3{margin-top:6px;font-size:1.2rem;line-height:1.2}
.xcard p{margin:0;color:var(--muted);font-size:.93rem}
.xs-stat{margin-top:4px!important;color:var(--ink)!important;font-weight:700}
.xs-stat b{font-family:var(--display);font-size:1.6rem;color:var(--c,var(--red));margin-right:4px}
.xquote{margin:clamp(36px,5vw,56px) auto;max-width:880px;text-align:center;background:#FFF6E3;border-radius:32px;padding:clamp(26px,4vw,44px);position:relative}
.xquote::before{content:"\201C";position:absolute;left:24px;top:-18px;font-family:var(--display);font-size:6rem;line-height:1;color:var(--star)}
.xquote blockquote{margin:0}
.xquote p{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.35;text-wrap:balance}
.xquote figcaption{margin-top:16px;display:grid;gap:2px;color:var(--muted);font-size:.9rem}
.xquote figcaption b{color:var(--ink)}
/* beg sekolah ajaib */
.xbag-wrap{position:relative;display:grid;grid-template-columns:1fr clamp(240px,26vw,320px) 1fr;column-gap:clamp(18px,2.4vw,32px);grid-auto-rows:minmax(90px,auto);max-width:1180px;margin:0 auto}
.xbag-wrap>.xcard:nth-of-type(1){grid-row:1/span 2}.xbag-wrap>.xcard:nth-of-type(2){grid-row:2/span 2}.xbag-wrap>.xcard:nth-of-type(3){grid-row:3/span 2}.xbag-wrap>.xcard:nth-of-type(4){grid-row:4/span 2}.xbag-wrap>.xcard:nth-of-type(5){grid-row:5/span 2}.xbag-wrap>.xcard:nth-of-type(6){grid-row:6/span 2}.xbag-wrap>.xcard:nth-of-type(7){grid-row:7/span 2}.xbag-wrap>.xcard:nth-of-type(8){grid-row:8/span 2}.xbag-wrap>.xcard:nth-of-type(9){grid-row:9/span 2}.xbag-wrap>.xcard:nth-of-type(10){grid-row:10/span 2}.xbag-wrap>.xcard:nth-of-type(11){grid-row:11/span 2}
.xbag-wrap>.xl{grid-column:1}.xbag-wrap>.xr{grid-column:3}
.xbag-wrap .xcard{align-self:center;margin:8px 0}
.xbag-col{grid-column:2;grid-row:1/span 13;position:relative}
.xbag{position:sticky;top:calc(50vh - clamp(130px,15vw,175px));width:100%;aspect-ratio:900/1042;margin:0 auto;transform-origin:50% 100%}
.xbag img{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none}
.xbag-back{filter:drop-shadow(0 22px 22px rgba(120,40,0,.18))}
/* zip beg: tertutup -> separuh -> terbuka sebelum kad pertama keluar */
.xbag-zip{opacity:0;filter:drop-shadow(0 22px 22px rgba(120,40,0,.18))}
.xbag[data-zip="closed"] .xbag-closed,.xbag[data-zip="half"] .xbag-half{opacity:1}
.xbag[data-zip="closed"] .xbag-back,.xbag[data-zip="closed"] .xbag-front,.xbag[data-zip="half"] .xbag-back,.xbag[data-zip="half"] .xbag-front{opacity:0}
.xbag-items{position:absolute;inset:0}
.xmini{position:absolute;left:54%;top:36%;width:84px;height:100px;margin:-50px 0 0 -42px;border-radius:14px;background:#fff;color:var(--c);display:grid;place-items:center;box-shadow:0 0 0 3px var(--c),0 10px 18px -8px rgba(0,0,0,.45)}
.xmini svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.xmini img{width:86%;height:auto;max-width:none}
.xbag-count{position:absolute;left:50%;bottom:-6px;transform:translate(-50%,100%);margin:0;white-space:nowrap;font-weight:800;font-size:.9rem;color:var(--muted);background:#fff;padding:6px 14px;border-radius:999px;box-shadow:0 0 0 1.5px var(--line)}
.xbag-count b{font-family:var(--display);font-size:1.15rem;color:var(--red)}
/* kad menunggu di dalam beg: tempat kosong bertitik */
.xbag-wrap.go .xcard:not(.lit):not(.fly){visibility:hidden}
.xbag-wrap.go .xcard:not(.lit):not(.fly)::after{content:"";visibility:visible;position:absolute;inset:0;border-radius:inherit;border:2.5px dashed #E8D7AE;background:rgba(255,255,255,.35)}
.xcard.fly{z-index:6;transform-origin:0 0}
.xbag-wrap .xcard:not(.lit) .count{visibility:hidden}
.xcard.lit{box-shadow:0 0 0 2.5px var(--c),0 22px 40px -24px var(--c)}
@keyframes xPop{0%{transform:scale(.5) rotate(-14deg)}100%{transform:none}}
@media (max-width:759px){
  .xbag-wrap{grid-template-columns:1fr;grid-auto-rows:auto}
  .xbag-wrap>.xcard:nth-of-type(n){grid-row:auto;grid-column:1}
  .xbag-col{grid-column:1;grid-row:auto;height:0;position:sticky;bottom:14px;z-index:5}
  .xbag{position:relative;top:auto;width:92px;margin:0 0 0 auto;transform:translateY(-100%)}
  .xbag-count{display:none}
  .xmini{width:46px;height:56px;margin:-28px 0 0 -23px;border-radius:9px}
}
@media (prefers-reduced-motion:reduce){.sc-post.sc-flat .map-svg .pin-star{transform:scale(1);opacity:1}.sc-post.sc-flat .map-svg text{opacity:1}}
@media (prefers-reduced-motion:reduce){.xbag-wrap .xcard{transition:none!important;animation:none!important}}
/* gambar premium kad */
.xbag-wrap .xcard{padding-top:0;overflow:visible}
.xart{display:block;margin:0 -22px 0;border-radius:24px 24px 0 0;overflow:hidden;aspect-ratio:1/1;background:var(--bg-2)}
.xart img{width:100%;height:100%;object-fit:cover;max-width:none;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.xcard:hover .xart img{transform:scale(1.05)}
.xart + .xicon{margin-top:-30px;position:relative;z-index:1;width:56px;height:56px;border-radius:18px;background:#fff;box-shadow:0 0 0 3px #fff,0 8px 16px -8px rgba(0,0,0,.35)}
.xcard .xart ~ .xyear{top:14px;right:14px;background:rgba(255,255,255,.92);box-shadow:0 4px 10px -6px rgba(0,0,0,.3)}
.xbag-wrap.go .xcard:not(.lit):not(.fly) .xart{visibility:hidden}
.xmini{overflow:hidden;align-content:start}
.xmini img{width:100%;height:62%;object-fit:cover}
/* PQ:START — rakan kongsi & kualiti: cop getah ikut skrol */
.pq{margin-top:clamp(40px,6vw,72px)}
.pq-head{display:grid;justify-items:center;text-align:center;gap:10px;margin-bottom:clamp(26px,4vw,44px)}
.pq-title{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.pq-head p{margin:0;max-width:56ch;color:var(--muted)}
.pq-row{position:relative;overflow-x:clip;overflow-clip-margin:24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);max-width:1180px;margin:0 auto}
.pcard{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--white);border-radius:24px;padding:24px 22px 22px;box-shadow:0 0 0 1.5px var(--line),0 16px 30px -24px rgba(29,29,31,.45)}
.pcard .xicon{background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c)}
.pcard h3{font-size:1.2rem;line-height:1.2;margin-top:8px}
.pcard p{margin:0;color:var(--muted);font-size:.93rem}
.pcard .xs-stat{margin-top:auto!important;padding-top:12px;display:flex;align-items:baseline;gap:6px}
.pcard .xs-stat b{font-size:2.2rem;line-height:1;color:var(--c)}
/* ampaian dengan penyepit */
.pq-row{padding-top:90px}
.pq-rope{position:absolute;left:0;top:0;width:100%;height:160px;overflow:visible;pointer-events:none;z-index:0}
.pq-rope path{fill:none;stroke-linecap:round}
.pr-shade{stroke:rgba(80,50,20,.18);stroke-width:5;transform:translateY(4px)}
.pr-line{stroke:#B98A55;stroke-width:4}
.pr-twist{stroke:#E4C08F;stroke-width:4;stroke-dasharray:3 6}
.pcard{z-index:1;transform-origin:50% -30px;transform:translateY(var(--hy,0px)) rotate(var(--ha,0deg));opacity:var(--ho,1);will-change:transform}
.ppin{position:absolute;left:50%;top:-56px;width:16px;margin-left:-8px;z-index:2;filter:drop-shadow(0 3px 3px rgba(60,35,10,.3));transition:opacity .2s,scale .3s cubic-bezier(.3,1.7,.5,1)}
.pq-row:not(.multi) .pcard:not(.pinned-on) .ppin{opacity:0;scale:.6}
.ppin img{display:block;width:100%;height:auto;max-width:none}
.pcard.hung{animation:hangIdle 5s ease-in-out infinite}
.pcard.hung:nth-child(odd){animation-delay:-2.5s}
@keyframes hangIdle{0%,100%{rotate:-.6deg}50%{rotate:.6deg}}
/* tali sendiri untuk setiap kad bila kad tidak sebaris (telefon / tablet) */
.pq-row.multi .pq-rope{display:none}
.pq-row.multi .pcard::before{content:"";position:absolute;left:-18px;right:-18px;top:-9px;height:4px;border-radius:4px;background:repeating-linear-gradient(90deg,#B98A55 0 6px,#E4C08F 6px 9px)}
.pq-row.multi{row-gap:100px}
.pyear{position:absolute;top:22px;right:20px}
/* desktop: ampaian melekat supaya kad digantung perlahan */
.pq-stage.pinned{height:580vh}
.pq-fit{transform-origin:50% 0;transform:scale(var(--fit,1));margin-bottom:var(--fitmb,0px)}   /* kecilkan supaya sentiasa muat & melekat pada skrin laptop rendah */
.pq-stage.pinned .pq-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-content:center;padding-top:var(--bar)}
.pq-stage.pinned .pq-head{margin-bottom:clamp(26px,3vw,36px)}
.pq-stage.tight .pq-head .tag,.pq-stage.tight .pq-head p{display:none}
.pq-stage.tight .pq-head{margin-bottom:26px}
/* Fera berjalan di lantai, pasang tangga, panjat & sepit kad pada tali */
.pq-row:not(.multi){padding-bottom:34px;overflow:visible}   /* Fera di hujung tali tidak terpotong */
.pq-ladder{position:absolute;left:0;top:0;z-index:3;width:var(--lw,60px);height:var(--lh,400px);max-width:none;pointer-events:none;transform:translate(var(--lx,0px),var(--ly,0px)) scaleY(var(--ls,0));transform-origin:50% 100%;filter:drop-shadow(0 8px 10px rgba(60,35,10,.25))}
.pq-fera{position:absolute;left:0;top:0;z-index:4;pointer-events:none;transform:translate(var(--fx,0px),var(--fy,0px));opacity:var(--fo,0)}
.pf-flip{position:relative;width:var(--fw,112px);height:var(--fh,195px);transform:scaleX(var(--dir,1))}
.pq-fera img{position:absolute;left:0;bottom:0;width:100%;height:auto;max-width:none;opacity:0;filter:drop-shadow(0 8px 10px rgba(60,35,10,.22))}
.pq-fera[data-pose="a"] .pf-a,.pq-fera[data-pose="b"] .pf-b,.pq-fera[data-pose="c"] .pf-c,.pq-fera[data-pose="d"] .pf-d,.pq-fera[data-pose="climb"] .pf-climb,.pq-fera[data-pose="top"] .pf-top,.pq-fera[data-pose="done"] .pf-done{opacity:1}
.pq-fera[data-pose="done"] .pf-done{animation:feraHop 1.4s ease-in-out infinite}
@keyframes feraHop{0%,100%{translate:0 0}40%{translate:0 -8px}}
.pq-row.multi .pq-fera,.pq-row.multi .pq-ladder{display:none}
/* jalur rakan kongsi */
.pq-strip{margin-top:clamp(28px,4vw,44px);display:grid;justify-items:center;gap:12px}
.pq-strip-lbl{font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pq-marquee{width:100%;overflow:hidden;display:flex;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.pq-marquee ul{list-style:none;margin:0;padding:0;display:flex;flex:none;gap:14px;padding-right:14px;animation:pqScroll 34s linear infinite}
.pq-marquee:hover ul{animation-play-state:paused}
.pq-marquee li{flex:none;display:flex;align-items:center;gap:10px;height:76px;font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--ink);background:var(--white);padding:0 24px;border-radius:20px;box-shadow:0 0 0 1.5px var(--line)}
.pq-marquee li img{height:52px;width:auto;max-width:none}
.pq-marquee .pq-logo span{font-size:.92rem;line-height:1.1;max-width:9ch}
.pq-marquee li{transition:transform .25s}
.pq-marquee li:hover{transform:translateY(-3px)}
/* jalur rakan sebelum footer */
.partners-band{padding-block:clamp(36px,5vw,64px);background:linear-gradient(180deg,transparent,rgba(255,236,190,.35))}
.partners-band .pq-strip{margin-top:0;gap:18px}
.partners-band .pq-strip-lbl{margin:0;font-family:var(--body);font-size:.82rem}
/* satu baris logo: kad sama saiz, logo diseimbangkan (saiz diset per logo dalam HTML) */
.pq-marquee ul{animation-duration:70s}
.pq-marquee li{width:172px;height:88px;padding:0 14px;justify-content:center;box-sizing:border-box}
.pq-marquee li img{max-width:none}
.pq-marquee .pq-tuv{padding:0 14px;background:var(--white)}
.pq-marquee .pq-tuv img{border-radius:8px}
.pq-marquee .pq-jata-sarawak span{font-size:.86rem}
.pq-marquee .pq-text{font-size:.98rem}
@keyframes pqScroll{to{transform:translateX(-100%)}}
@media (max-width:1000px){.pq-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pq-row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.pcard{transform:none!important;opacity:1!important;animation:none!important}.pq-marquee ul{animation:none;flex-wrap:wrap;justify-content:center}.pq-marquee ul[aria-hidden]{display:none}.pq-marquee{-webkit-mask:none;mask:none}}
/* PQ:END */
/* EXTRAS:END */
/* PEOPLE:START — pengalaman skrol bahagian Our people */
.sc{position:relative}
.sc-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;align-content:center;overflow:hidden}
/* A. Visi · Misi · Moto */
.sc-vmm{height:220vh;margin-bottom:clamp(20px,4vw,40px)}
.vmm-stage{position:relative;display:grid;width:min(100%,980px)}
.vmm-slide{grid-area:1/1;display:grid;justify-items:center;align-content:center;text-align:center;gap:24px;min-height:min(56vh,460px);padding:clamp(36px,6vw,80px) clamp(22px,6vw,90px);border-radius:40px;background:var(--bgc);opacity:0;will-change:transform,opacity}
.vmm-slide .tag{font-size:.85rem}
.vmm-text{margin:0;max-width:22ch;font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,4.2vw,3.4rem);line-height:1.15;text-wrap:balance}
.qw2{opacity:.16}
.vmm-ul{background:var(--squiggle) left 100%/calc(var(--ul,0) * 100%) .3em no-repeat;padding-bottom:.08em;color:var(--red)}
.vmm-dots{position:absolute;right:clamp(10px,3vw,40px);top:50%;translate:0 -50%;display:grid;gap:12px}
.vmm-dots i{width:10px;height:10px;border-radius:50%;background:var(--line);transition:background-color .3s,scale .3s}
.vmm-dots i.on{background:var(--red);scale:1.35}
/* B. Pemimpin: pentas sorotan */
.sc-leaders{height:300vh;margin-bottom:clamp(20px,4vw,40px)}
.sc-leaders .leaders{display:grid;grid-template-columns:minmax(0,1fr);width:min(100%,920px);margin:0}
.sc-leaders .leader{grid-area:1/1;will-change:transform,opacity}
.sc-leaders .leader-photo{will-change:transform,opacity}
.sc-leaders .leader-sign,.sc-leaders .leader-btn,.sc-leaders .leader-label{transition:opacity .3s}
/* C. Lembaga Pengarah: dek kad -> kipas -> grid */
.sc-board{height:180vh;margin-bottom:clamp(30px,5vw,60px)}
.sc-board .sc-pin{padding-top:calc(var(--bar) + 8px)}
.sc-board .team-title{text-align:center;margin-bottom:20px}
.board{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:18px;width:min(100%,1000px)}
.board li{position:relative;width:200px;display:grid;justify-items:center;align-content:start;text-align:center;gap:12px;padding:20px 14px 18px;background:var(--white);border-radius:24px;box-shadow:0 14px 30px -18px rgba(29,29,31,.45),0 0 0 1.5px var(--line);will-change:transform}
.board li::before{content:"";position:absolute;top:10px;right:12px;width:14px;height:14px;background:var(--star);-webkit-mask:var(--star-shape) center/contain no-repeat;mask:var(--star-shape) center/contain no-repeat}
.board img{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:50% 20%;background:var(--bg-2);box-shadow:0 0 0 4px var(--white),0 0 0 6px var(--star)}
.board b{font-size:.9rem;line-height:1.3}
/* D. Pasukan Pengurusan: pokok yang tumbuh */
.tree{position:relative;max-width:1040px;margin:0 auto clamp(48px,7vw,80px);--tx:50%}
.tree-trunk{position:absolute;left:var(--tx);top:var(--t0,60px);width:12px;margin-left:-6px;height:var(--th,0px);border-radius:12px;background:linear-gradient(90deg,#3E9450,#5DB466 50%,#3E9450)}
.tree-trunk::after{content:"";position:absolute;left:50%;bottom:-10px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:#7CC46F;box-shadow:0 0 0 5px rgba(124,196,111,.25);opacity:var(--bud,0)}
.tree-root{position:relative;z-index:1;display:grid;justify-items:center;margin-bottom:46px}
.tree-root .person{flex-direction:column;text-align:center}
.tree-root img{width:130px;height:130px}
.person{display:flex;align-items:center;gap:16px}
.person img{flex:none;width:104px;height:104px;border-radius:50%;object-fit:cover;object-position:50% 20%;background:var(--bg-2);box-shadow:0 0 0 5px var(--white),0 0 0 8px #7CC46F;transform:scale(0);transition:transform .6s cubic-bezier(.3,1.5,.5,1) .2s}
.pc{display:grid;gap:2px;background:var(--white);border-radius:18px;padding:12px 16px;box-shadow:0 12px 26px -18px rgba(29,29,31,.5),0 0 0 1.5px var(--line);opacity:0;transform:translateY(10px);transition:opacity .5s ease .35s,transform .5s ease .35s}
.pc b{font-size:.95rem;line-height:1.25}
.pc span{font-size:.82rem;color:var(--muted)}
.pc a{font-size:.78rem;color:var(--blue);word-break:break-all}
.grown .person img,.tree-root.grown img{transform:scale(1)}
.grown .pc{opacity:1;transform:none}
.tree-node{position:relative;z-index:1;display:grid;justify-items:center;margin-bottom:40px}
.tree-node .person{flex-direction:column;text-align:center}
.tree-node img{width:116px;height:116px}
.tree-level{position:relative;z-index:1;display:grid;justify-items:center;margin:0 0 30px}
.tree-level span{font-family:var(--body);font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--leaf);padding:7px 14px;border-radius:999px;box-shadow:0 0 0 4px var(--bg);transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.tree-level.grown span{transform:scale(1)}
.tree-row{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:130px;margin-bottom:40px}
.branch{position:relative;display:flex}
.branch.l{justify-content:flex-end}
.branch.l .person{flex-direction:row-reverse;text-align:right}
.branch::before{content:"";position:absolute;top:52px;height:7px;margin-top:-3px;width:65px;border-radius:7px;background:#4FA65A;transform:scaleX(0);transition:transform .45s ease}
.branch.l::before{right:-65px;transform-origin:right}
.branch.r::before{left:-65px;transform-origin:left}
.branch::after{content:"";position:absolute;top:30px;width:20px;height:11px;background:#7CC46F;border-radius:0 100% 0 100%;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1) .3s}
.branch.l::after{right:-40px;rotate:-25deg}
.branch.r::after{left:-42px;rotate:205deg}
.branch.grown::before{transform:scaleX(1)}
.branch.grown::after{transform:scale(1)}
@media (max-width:760px){
  .tree{--tx:46px}
  .tree-root{justify-items:start;margin-bottom:34px}
  .tree-node{justify-items:start;padding-left:84px;margin-bottom:30px}
  .tree-node .person{flex-direction:row;text-align:left}
  .tree-node img{width:84px;height:84px}
  .tree-level{justify-items:start;padding-left:22px;margin-bottom:24px}
  .tree-root .person{flex-direction:row;text-align:left}
  .tree-root img{width:92px;height:92px}
  .tree-row{grid-template-columns:1fr;row-gap:30px;margin-bottom:30px}
  .branch,.branch.l{justify-content:flex-start;padding-left:84px}
  .branch.l .person{flex-direction:row;text-align:left}
  .person img{width:80px;height:80px}
  .branch::before,.branch.l::before,.branch.r::before{left:46px;right:auto;width:38px;top:40px;transform-origin:left}
  .branch::after,.branch.l::after,.branch.r::after{left:58px;right:auto;top:20px;rotate:-25deg}
}
/* Mod rata: tanpa pin (telefon / kurangkan animasi) */
.sc.sc-flat{height:auto}
.sc.sc-flat .sc-pin{position:static;height:auto;display:block;overflow:visible}
.sc-flat .vmm-stage{gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));width:100%}
.sc-flat .vmm-slide{grid-area:auto;opacity:1;min-height:0;padding:28px;border-radius:26px;justify-items:start;text-align:left;gap:14px}
.sc-flat .vmm-text{font-size:clamp(1.25rem,2.2vw,1.6rem)}
.sc-flat .vmm-dots{display:none}
.sc-flat.sc-leaders .leaders{gap:22px;width:100%}
.sc-flat.sc-leaders .leader{grid-area:auto}
.sc-flat .board li{width:calc(50% - 9px);max-width:220px}
@media (prefers-reduced-motion:reduce){.qw2{opacity:1!important}.vmm-ul{--ul:1}.person img{transform:none}.pc{opacity:1;transform:none}.branch::before,.branch::after{transform:none}}
/* gabungan pemimpin + lembaga dalam satu babak */
.lead-board.sc-board{height:auto;margin:0}
.sc-leaders:not(.sc-flat) .sc-pin > *{grid-area:1/1}
.sc-leaders:not(.sc-flat) .lead-board{width:100%;opacity:0;pointer-events:none;will-change:transform,opacity}
.sc-leaders.sc-flat .lead-board{margin-top:clamp(36px,6vw,64px)}
.lead-board .team-title{text-align:center;margin-bottom:20px}
/* pokok lebih menarik */
.tree-trunk{width:16px;margin-left:-8px;background:repeating-linear-gradient(172deg,transparent 0 16px,rgba(40,25,10,.14) 16px 18px),linear-gradient(90deg,#6B4A2B,#9A6B3F 40%,#7A5432 70%,#5E3F24);box-shadow:inset -3px 0 0 rgba(0,0,0,.12),0 6px 14px -8px rgba(60,35,10,.5)}
.tree-trunk::after{background:radial-gradient(circle at 40% 35%,#B7E59A,#6DBA5E);box-shadow:0 0 0 6px rgba(124,196,111,.25),0 0 18px 4px rgba(255,214,90,.55)}
.tree-leaves{position:absolute;inset:0;pointer-events:none;z-index:0}
.tleaf{position:absolute;left:var(--tx);width:30px;height:15px;margin-top:-8px;border-radius:0 100% 0 100%;background:linear-gradient(135deg,var(--lc,#7CC46F),color-mix(in srgb,var(--lc,#7CC46F) 70%,#1f5c2a));transform-origin:0 50%;scale:0;transition:scale .45s cubic-bezier(.3,1.7,.5,1)}
.tleaf::after{content:"";position:absolute;left:2px;right:6px;top:50%;height:1.5px;background:rgba(255,255,255,.45);rotate:-12deg}
.tleaf.r{rotate:-28deg;margin-left:8px}
.tleaf.l{rotate:208deg;margin-left:-8px}
.tleaf.on{scale:1;animation:leafSway 3.6s ease-in-out infinite;animation-delay:var(--ld,0s)}
@keyframes leafSway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(9deg)}}
.tree-ant{position:absolute;z-index:3;left:var(--tx);top:0;width:40px;margin:-14px 0 0 -20px;transform:translateY(var(--ay,0px)) rotate(var(--ar,180deg));transition:opacity .3s;opacity:0;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
.tree-ant svg{display:block;width:100%;height:auto}
.tree-ant.on{opacity:1}
.tree-ant.walk .ta-l1{animation:antLeg .28s linear infinite alternate}
.tree-ant.walk .ta-l2{animation:antLeg .28s linear infinite alternate-reverse}
@keyframes antLeg{from{transform:translateY(-1.5px)}to{transform:translateY(1.5px)}}
.tree-fly{position:absolute;z-index:2;width:46px;pointer-events:none;opacity:0;transition:opacity .6s}
.tree-fly svg{display:block;width:100%;height:auto;overflow:visible}
.tree-fly .tf-w{transform-origin:20px 16px;animation:flap .32s ease-in-out infinite alternate}
.tree-fly .tf-r{animation-name:flapR}
@keyframes flap{to{transform:scaleX(.35)}}
@keyframes flapR{to{transform:scaleX(.35)}}
.tree.live .tree-fly{opacity:1}
.tree-fly.tf1{left:14%;top:12%;animation:fly1 14s ease-in-out infinite}
.tree-fly.tf2{right:12%;top:46%;width:38px;animation:fly2 17s ease-in-out infinite}
@keyframes fly1{0%,100%{translate:0 0;rotate:-8deg}25%{translate:90px -40px;rotate:10deg}50%{translate:160px 60px;rotate:-4deg}75%{translate:40px 120px;rotate:12deg}}
@keyframes fly2{0%,100%{translate:0 0;rotate:8deg}30%{translate:-110px 50px;rotate:-10deg}60%{translate:-40px 160px;rotate:6deg}80%{translate:-140px 90px;rotate:-6deg}}
/* papan tanda kayu untuk label peringkat */
.tree-level span{position:relative;font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.06em;color:#FFF6E3;background:repeating-linear-gradient(0deg,transparent 0 7px,rgba(0,0,0,.07) 7px 8px),linear-gradient(180deg,#B57A43,#8E5A2C);border:2px solid #6E431E;border-radius:10px;padding:8px 22px;box-shadow:0 0 0 4px var(--bg),0 8px 14px -8px rgba(60,35,10,.6);rotate:-2deg}
.tree-level span::before,.tree-level span::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#eee,#888)}
.tree-level span::before{left:7px}.tree-level span::after{right:7px}
.tree-level:nth-of-type(odd) span{rotate:2deg}
/* bingkai ikut peringkat */
.tree .person img{box-shadow:0 0 0 5px var(--white),0 0 0 9px var(--ring,#7CC46F)}
.tree-root .person{position:relative}
.tree-root .person::before{content:"";position:absolute;top:-12px;left:50%;margin-left:28px;width:34px;height:34px;background:var(--star);-webkit-mask:var(--star-shape) center/contain no-repeat;mask:var(--star-shape) center/contain no-repeat;scale:0;transition:scale .5s cubic-bezier(.3,1.7,.5,1) .5s;z-index:2}
.tree-root.grown .person::before{scale:1;animation:starSpin 6s linear infinite .9s}
@keyframes starSpin{to{rotate:360deg}}
.tree .person{transition:translate .3s}
.tree .person:hover{translate:0 -4px}
.tree .person:hover img{rotate:-4deg;transition:transform .6s cubic-bezier(.3,1.5,.5,1),rotate .3s}
@media (max-width:760px){.tleaf.r{display:none}.tree-fly{display:none}.tree-root .person::before{left:70px;margin-left:0}}
@media (prefers-reduced-motion:reduce){.tleaf.on,.tree-fly,.tree-fly .tf-w,.tree-root.grown .person::before{animation:none}.tree-fly{display:none}}
/* v5: buah yang masak */
.fwrap{position:relative;flex:none;display:block;line-height:0;border-radius:50%}
.tree .person .fwrap img{transition:transform .5s cubic-bezier(.3,1.5,.5,1) 0s}
.tree .grown .fwrap img,.tree-root.grown .fwrap img{transition-delay:.62s}
.fruit{position:absolute;inset:6%;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.75) 0 9%,rgba(255,255,255,0) 10%),radial-gradient(circle at 60% 70%,rgba(0,0,0,.18),rgba(0,0,0,0) 60%);background-color:#8BCB6A;box-shadow:inset -6px -8px 0 rgba(0,0,0,.08),0 8px 14px -8px rgba(30,70,20,.5);transform:scale(.42);transform-origin:50% 0;pointer-events:none;animation:budSway 2.6s ease-in-out infinite}
.fruit::before{content:"";position:absolute;left:50%;top:-14%;width:6%;height:20%;margin-left:-3%;border-radius:3px;background:#6B4A2B}
.fruit::after{content:"";position:absolute;left:52%;top:-16%;width:34%;height:18%;border-radius:0 100% 0 100%;background:linear-gradient(135deg,#7CC46F,#3E8A45);rotate:-18deg}
@keyframes budSway{0%,100%{rotate:-6deg}50%{rotate:6deg}}
.tree .grown .fruit,.tree-root.grown .fruit{animation:ripen .95s cubic-bezier(.3,.8,.4,1) forwards}
@keyframes ripen{0%{transform:scale(.42);background-color:#8BCB6A;opacity:1;rotate:0deg}45%{transform:scale(.95);background-color:var(--ripe,#FF7A1A);rotate:0deg}58%{transform:scale(1.08,.94);opacity:1}100%{transform:scale(1.55);background-color:var(--ripe,#FF7A1A);opacity:0}}
/* gelang percikan bila buah pecah */
.fwrap::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:4px dotted var(--ripe,#FF7A1A);opacity:0;pointer-events:none}
.tree .grown .fwrap::after,.tree-root.grown .fwrap::after{animation:popRing .6s ease-out .55s}
@keyframes popRing{0%{opacity:1;transform:scale(.7)}100%{opacity:0;transform:scale(1.45) rotate(30deg)}}
@media (prefers-reduced-motion:reduce){.fruit{display:none}.fwrap::after{display:none}}
/* PEOPLE:END */
/* RIG:START */
/* ===== Rig maskot hidup (Fera & Fero) ===== */
.rig{position:relative;z-index:1;height:var(--mh);cursor:pointer;-webkit-tap-highlight-color:transparent}
.rig-in{position:absolute;inset:0;transform-origin:50% 100%;animation:rigBreathe var(--br,3.6s) ease-in-out infinite,rigSway var(--sw,7s) ease-in-out infinite}
.rig-in > *{position:absolute;display:block}
.rig-body{inset:0;width:100%;height:100%;filter:drop-shadow(0 10px 12px rgba(29,29,31,.18))}
.rig-eye{overflow:hidden;border-radius:50%}
.rig-eye img{position:absolute;display:block}
.rig-eye img:first-child{inset:0;width:100%;height:100%}
.rig-iris{height:auto;--x:var(--ex,0);--y:var(--ey,0);translate:calc(max(var(--x),0) * var(--r) + min(var(--x),0) * var(--l)) calc(max(var(--y),0) * var(--d) + min(var(--y),0) * var(--u));transition:translate .22s cubic-bezier(.3,.7,.3,1)}
.rig-lid{border-radius:50%;transform:scaleY(0);transform-origin:50% 0;box-shadow:inset 0 -2px 0 rgba(90,30,8,.5)}
.rig.blink .rig-lid{animation:blink .18s ease-in-out}
.rig-ant{animation:rigAnt var(--ad,2.9s) ease-in-out infinite}
.rig-ant1{--ad:3.4s;animation-delay:-1.1s;animation-direction:reverse}
.rig-limb{transition:rotate .4s ease;height:auto}   /* width/height pada <img> hanya untuk nisbah; saiz sebenar ikut % */
/* Fera melambai sekali-sekala; laju bila disentuh / dihover */
.rig-fera .rig-wave{animation:feraWave 6.5s ease-in-out infinite}
.rig-fera{--br:3.4s;--sw:6.4s}
/* Fero: tangan kanan melambai lembut, tangan kiri "mengajak" */
.rig-fero .rig-wave{animation:feroWave 7.4s ease-in-out -2s infinite}
.rig-fero .rig-hand{animation:feroHand 4.2s ease-in-out infinite}
.rig-fero{--br:3.9s;--sw:7.6s}
.mascot:hover .rig .rig-wave,.rig.excited .rig-wave{animation:waveFast .5s ease-in-out infinite alternate}
.mascot:hover .rig .rig-ant,.rig.excited .rig-ant{animation-duration:.6s}
.rig.hop{animation:rigHop .7s cubic-bezier(.3,.7,.4,1)}
@keyframes rigBreathe{0%,100%{scale:1 1}50%{scale:1.006 1.016}}
@keyframes rigSway{0%,100%{rotate:-.7deg}50%{rotate:.7deg}}
@keyframes rigAnt{0%,100%{rotate:-5deg}50%{rotate:6deg}}
@keyframes feraWave{0%,52%,100%{rotate:0deg}58%{rotate:-14deg}64%{rotate:10deg}70%{rotate:-14deg}76%{rotate:10deg}82%{rotate:-8deg}90%{rotate:0deg}}
@keyframes feroWave{0%,60%,100%{rotate:0deg}66%{rotate:12deg}72%{rotate:-6deg}78%{rotate:12deg}84%{rotate:-4deg}92%{rotate:0deg}}
@keyframes feroHand{0%,100%{rotate:0deg}50%{rotate:-6deg}}
@keyframes waveFast{from{rotate:-16deg}to{rotate:12deg}}
@keyframes rigHop{0%{translate:0 0;scale:1}20%{scale:1.05 .94}45%{translate:0 -12%;scale:.97 1.04}75%{translate:0 0;scale:1.03 .97}100%{translate:0 0;scale:1}}
.rig-fera{aspect-ratio:331/637}
.rig-fera .rig-ant0{left:31.72%;top:0.0%;width:18.13%;transform-origin:88.33% 90.0%}
.rig-fera .rig-ant1{left:69.79%;top:0.0%;width:18.13%;transform-origin:10.0% 90.14%}
.rig-fera .rig-wave{left:0.0%;top:22.29%;width:40.48%;transform-origin:83.58% 86.59%}
.rig-fera .rig-eye0,.rig-fera .rig-lid0{left:29.91%;top:19.31%;width:23.87%;height:11.46%}
.rig-fera .rig-eye0 .rig-iris{left:27.85%;top:16.44%;width:64.56%;--l:40%;--r:25.9%;--u:39.0%;--d:34.3%}
.rig-fera .rig-lid0{background:radial-gradient(ellipse at 50% 35%,#DC8A4C,color-mix(in srgb,#DC8A4C 78%,#5a2208))}
.rig-fera .rig-eye1,.rig-fera .rig-lid1{left:66.16%;top:19.31%;width:24.77%;height:11.3%}
.rig-fera .rig-eye1 .rig-iris{left:4.88%;top:16.67%;width:62.2%;--l:23.3%;--r:40%;--u:39.2%;--d:31.7%}
.rig-fera .rig-lid1{background:radial-gradient(ellipse at 50% 35%,#DC8A4C,color-mix(in srgb,#DC8A4C 78%,#5a2208))}
.rig-fero{aspect-ratio:352/469}
.rig-fero .rig-ant0{left:28.12%;top:0.64%;width:16.48%;transform-origin:89.66% 89.86%}
.rig-fero .rig-ant1{left:56.25%;top:0.0%;width:15.91%;transform-origin:8.93% 90.0%}
.rig-fero .rig-wave{left:66.76%;top:29.42%;width:33.24%;transform-origin:17.95% 78.79%}
.rig-fero .rig-hand{left:0.0%;top:40.51%;width:37.5%;transform-origin:83.33% 63.64%}
.rig-fero .rig-eye0,.rig-fero .rig-lid0{left:32.39%;top:19.4%;width:14.49%;height:12.37%}
.rig-fero .rig-eye0 .rig-iris{left:19.61%;top:18.97%;width:78.43%;--l:40%;--r:15.6%;--u:40%;--d:32.1%}
.rig-fero .rig-lid0{background:radial-gradient(ellipse at 50% 35%,#E1853E,color-mix(in srgb,#E1853E 78%,#5a2208))}
.rig-fero .rig-eye1,.rig-fero .rig-lid1{left:53.98%;top:18.98%;width:15.34%;height:11.94%}
.rig-fero .rig-eye1 .rig-iris{left:7.41%;top:19.64%;width:74.07%;--l:24.8%;--r:39.3%;--u:40%;--d:26.4%}
.rig-fero .rig-lid1{background:radial-gradient(ellipse at 50% 35%,#E1853E,color-mix(in srgb,#E1853E 78%,#5a2208))}
/* RIG:END */
@media (max-width:820px){
  .meaning{grid-template-columns:1fr}
  .mascots{grid-template-columns:1fr 1fr;gap:12px}
  .mascot-stage{--mh:min(230px,56vw)}
  .mascots-intro{grid-column:1/-1;order:-1;padding-bottom:0}
}
@media (max-width:820px){.meaning{grid-template-columns:1fr}}

/* ---------- 8. Kerjaya ---------- */
.career{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(20px,4vw,48px);align-items:center;background:var(--sky);border-radius:36px;padding:clamp(24px,5vw,56px);overflow:hidden}
.career h2{font-size:clamp(2rem,4.6vw,3.4rem)}
.career p{margin-block:18px 24px;max-width:50ch;color:var(--muted)}
.career img{width:min(100%,320px);margin-inline:auto;margin-bottom:calc(-1*clamp(24px,5vw,56px))}
@media (max-width:760px){.career{grid-template-columns:1fr}}
/* papan hitam "Cikgu Fera": babak kelas 3D (classroom.webp); Fera menulis tajuk dengan kapur ikut skrol */
.cb-scene{position:relative}
.cb-room,.cb-fera{display:none}
.cb-surface{position:relative;border-radius:22px;background:#2F4A3B;box-shadow:inset 0 0 0 12px #D9B07A,0 18px 30px -18px rgba(40,25,10,.45);padding:clamp(34px,6vw,56px) clamp(26px,5vw,48px)}
.cb-tag{display:inline-block;font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#F4E7A1;border:2px dashed rgba(244,231,161,.6);border-radius:999px;padding:3px 12px}
.cb-surface h2{font-family:"Pacifico",var(--display);font-weight:400;color:#F7F5EE;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.3;margin-top:14px;letter-spacing:.01em;text-shadow:0 0 1px rgba(255,255,255,.55),0 0 10px rgba(255,255,255,.12);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2.1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2.1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.cb-hl{color:#FFE27A}
.cb-w{display:block;width:fit-content;white-space:nowrap}
.cb-note{position:relative;margin-top:22px;background:#FFF3A8;color:var(--ink);border-radius:4px 4px 18px 4px;padding:24px 22px 22px;box-shadow:0 14px 22px -12px rgba(0,0,0,.45);rotate:-1.5deg;max-width:380px}
.cb-note::before{content:"";position:absolute;top:-8px;left:50%;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#fff7 0 18%,transparent 22%),#E63946;box-shadow:0 3px 5px rgba(0,0,0,.35)}
.cb-note h3{font-family:"Pacifico",var(--display);font-weight:400;font-size:1.35rem;color:var(--red);margin:0 0 8px}
.cb-note p{font-size:.95rem;line-height:1.55;margin:0 0 16px;color:#3b3a36}
/* desktop: babak berskala tetap 1100x614 (ikut gambar kelas) supaya kapur Fera tepat pada baris tulisan */
@media (min-width:1000px){
  .cb-fitbox{width:calc(1100px * var(--k,1));height:calc(614px * var(--k,1));margin:0 auto}
  .cb-scene{width:1100px;height:614px;transform:scale(var(--k,1));transform-origin:0 0;border-radius:30px;overflow:hidden;box-shadow:0 30px 60px -40px rgba(40,25,10,.55)}
  .cb-room{display:block;position:absolute;inset:0;width:100%;height:100%}
  .cb-surface{position:absolute;left:506px;top:184px;width:422px;height:220px;padding:0;border-radius:0;background:none;box-shadow:none}
  .cb-tag{position:absolute;left:26px;top:14px;font-size:10px;padding:2px 9px}
  .cb-surface h2{position:absolute;left:26px;top:41px;margin:0;font-size:32px;line-height:41px}
  .cb-note{position:absolute;left:48px;top:58px;width:262px;margin:0;padding:22px 18px 18px}
  .cb-note h3{font-size:1.15rem}
  .cb-note p{font-size:.8rem;line-height:1.5;margin-bottom:12px}
  .cb-note .btn{font-size:.82rem;padding:10px 14px;width:100%;justify-content:center}
  .cb-fera{display:block;position:absolute;left:0;top:98.5px;z-index:3;width:260px;height:472px;transform:translate(var(--fx,0px),var(--fy,0px));filter:drop-shadow(0 8px 8px rgba(40,25,10,.2));pointer-events:none}
  .cb-fera::after{content:"";position:absolute;left:26%;right:22%;bottom:-5px;height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(60,35,10,.3),transparent)}
  .cb-fera img{position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:0}
  .cb-fera img.on{opacity:1}
  .cb-fera img.flip{transform:scaleX(-1);transform-origin:36.4% 50%}   /* cermin pada paksi badan Fera */
}
.cb-stage.pinned{height:420vh}
.cb-stage.pinned .cb-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-content:center;padding-top:var(--bar)}
.cb-stage.pinned .cb-w{clip-path:inset(-30% calc((1 - var(--w,1)) * 100%) -40% -6%)}
.cb-stage.pinned .cb-tag{opacity:var(--tg,1)}
.cb-stage.pinned .cb-note{opacity:var(--no,1);transform:translateY(calc((1 - var(--no,1)) * -40px)) scale(calc(1.15 - .15 * var(--no,1)))}
.cb-stage.pinned .cb-note::before{opacity:var(--np,1);scale:calc(.3 + .7 * var(--np,1))}


/* ---------- 9. Soalan lazim ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,64px);align-items:center;background:#FFF6E3;border-radius:40px;padding:clamp(28px,4.5vw,64px);position:relative;overflow:hidden}
.faq::before{content:"";position:absolute;right:-120px;top:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(255,199,44,.22),transparent 70%);pointer-events:none}
.faq-side{display:grid;gap:14px;justify-items:start}
.faq-lede{margin:0;color:var(--muted);max-width:32ch;font-size:1.05rem}
/* pentas Fero: bulatan matahari + bayang lantai supaya dia "berdiri" */
.faq-buddy{position:relative;margin-top:8px;width:min(100%,380px);display:grid;justify-items:start}
.faq-buddy::before{content:"";position:absolute;left:2%;top:9%;width:min(74%,280px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE08A,#FFC72C 70%);box-shadow:inset 0 -10px 0 rgba(229,150,20,.18)}
.faq-buddy::after{content:"";position:absolute;left:8%;bottom:-4px;width:min(56%,210px);height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(120,70,10,.28),transparent);z-index:0}
.faq-buddy .fero{position:relative;z-index:1;margin-left:9%;width:min(62%,230px);aspect-ratio:541/889;cursor:pointer;filter:drop-shadow(0 10px 10px rgba(29,29,31,.15));animation:bob 4s ease-in-out infinite;-webkit-tap-highlight-color:transparent}
/* rig: condong ke kiri/kanan dari kaki; bahagian atas (pinggang ke atas) tunduk ke depan bila kursor di bawah */
.fero-rig{position:absolute;inset:0;transform-origin:50% 96%;transform:rotate(calc(var(--lx,0) * 2.5deg));transition:transform .55s cubic-bezier(.3,.7,.3,1)}
.fero-rig > *,.fero-up > *{position:absolute;display:block}
.fero-up{inset:0;transform-origin:50% 63%;transform:perspective(520px) rotateX(calc(var(--ly,0) * -24deg)) rotate(calc(var(--lx,0) * 2deg));transition:transform .55s cubic-bezier(.3,.7,.3,1)}
.fero-low{clip-path:inset(63% 0 0 0)}
.fero-up > .fero-body{clip-path:inset(0 0 calc(37% - 1px) 0)}
.fero-body{inset:0;width:100%;height:100%}
/* sesungut bergoyang dari pangkal */
.fero-ant{transition:rotate .3s}
.fero-ant-l{left:-.37%;top:2.59%;width:21.81%;transform-origin:87.3% 95.4%;animation:antL 2.8s ease-in-out infinite}
.fero-ant-r{left:35.49%;top:-.22%;width:17.74%;transform-origin:12.5% 95.9%;animation:antR 3.3s ease-in-out -.9s infinite}
@keyframes antL{0%,100%{rotate:-4deg}50%{rotate:5deg}}
@keyframes antR{0%,100%{rotate:4deg}50%{rotate:-5deg}}
/* tanda soal berayun di tapak tangan */
.fero-hook{left:57.86%;top:10.46%;width:42.51%;transform-origin:49.6% 98.8%;animation:hookSway 3.6s ease-in-out infinite}
@keyframes hookSway{0%,100%{rotate:-5deg}50%{rotate:6deg}}
/* anak mata ikut kursor: lapisan mata di BAWAH badan; badan ada lubang mata yang jadi bingkai */
.fero-eye{overflow:hidden;border-radius:50%;clip-path:ellipse(50% 50% at 50% 50%)}
.fero-eye img{position:absolute;display:block;height:auto}
.fero-eye img:first-child{inset:0;width:100%;height:100%}
.fero-eye-l{left:7.58%;top:21.6%;width:17.38%;height:11.7%}
.fero-eye-r{left:34.57%;top:20.02%;width:18.3%;height:11.02%}
/* julat gerakan ikut ruang sebenar dalam soket: --l kiri, --r kanan, --u atas, --d bawah (% saiz iris) */
.fero-iris{--x:var(--ex,0);--y:var(--ey,0);translate:calc(max(var(--x),0) * var(--r) + min(var(--x),0) * var(--l)) calc(max(var(--y),0) * var(--d) + min(var(--y),0) * var(--u));transition:translate .18s ease-out}
.fero-eye-l .fero-iris{--l:24%;--r:7%;--u:5%;--d:34%}
.fero-eye-r .fero-iris{--l:9%;--r:18%;--u:4%;--d:28%}
.fero-eye-l .fero-iris{left:19.15%;top:2.88%;width:81.91%}
.fero-eye-r .fero-iris{left:5.05%;top:2.04%;width:77.78%}
/* kelopak mata berkelip */
.fero-lid{border-radius:50%;transform:scaleY(0);transform-origin:50% 0;box-shadow:inset 0 -2px 0 rgba(110,48,14,.55)}
.fero-lid-l{left:7.3%;top:21.3%;width:17.8%;height:12%;background:linear-gradient(#F2A24C,#E3893A)}
.fero-lid-r{left:34.3%;top:19.7%;width:18.9%;height:11.4%;background:linear-gradient(#DA7E3E,#C9692F)}
.fero.blink .fero-lid{animation:blink .19s ease-in-out}
@keyframes blink{50%{transform:scaleY(1)}}
/* reaksi: lompat bila diklik / FAQ dibuka */
.fero.hop{animation:bob 4s ease-in-out infinite,hop .6s cubic-bezier(.3,.7,.4,1)}
@keyframes hop{0%{transform:none}20%{transform:scale(1.04,.95)}45%{transform:translateY(-16%) scale(.97,1.04)}75%{transform:translateY(0) scale(1.03,.97)}100%{transform:none}}
.fero.hop .fero-hook{animation:hookSway 3.6s ease-in-out infinite,hookSpin .7s cubic-bezier(.3,.7,.4,1)}
@keyframes hookSpin{0%{transform:none}60%{transform:rotate(360deg) scale(1.15)}100%{transform:rotate(360deg)}}
.fero.hop .fero-ant-l{animation-duration:.35s}.fero.hop .fero-ant-r{animation-duration:.4s}
.faq-buddy .bubble-txt{display:block;transition:opacity .2s,translate .2s}
.faq-buddy .bubble.swap .bubble-txt{opacity:0;translate:0 4px}
.faq-buddy .bubble{position:absolute;top:30%;left:66%;z-index:2;font-family:var(--display);font-weight:600;font-size:1.1rem;line-height:1.25;color:var(--ink);background:var(--white);padding:14px 18px;border-radius:22px 22px 22px 22px;box-shadow:var(--shadow);white-space:nowrap}
.faq-buddy .bubble b{display:block;color:var(--red);font-weight:700}
.faq-buddy .bubble::after{content:"";position:absolute;left:-11px;top:50%;margin-top:-9px;width:14px;height:18px;background:var(--white);clip-path:polygon(100% 0,100% 100%,0 50%)}
@media (max-width:820px){.faq-buddy{width:min(100%,330px)}.faq-buddy .fero{width:170px}.faq-buddy::before{width:200px}.faq-buddy::after{width:150px}.faq-buddy .bubble{font-size:.95rem;left:58%;top:24%;padding:11px 14px}}
@keyframes bob{50%{translate:0 -10px}}
.faq-list{display:grid;gap:12px;position:relative}
.faq-more{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:8px;padding:18px 22px;border-radius:22px;border:2px dashed rgba(215,38,44,.28)}
.faq-more p{margin:0;color:var(--muted)}
.faq-more b{color:var(--ink);font-family:var(--display);font-weight:600;font-size:1.1rem}
.faq-list details{background:var(--white);border-radius:22px;box-shadow:0 0 0 1.5px var(--line);overflow:hidden;transition:box-shadow .2s}
.faq-list details[open]{box-shadow:var(--shadow)}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-family:var(--display);font-weight:600;font-size:1.15rem}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%231D1D1F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .25s}
.faq-list details[open] summary::after{transform:rotate(180deg);background-color:var(--star)}
.faq-list .answer{padding:0 22px 22px;color:var(--muted);display:grid;gap:10px}
.faq-list .answer ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.faq-list .answer a{color:var(--blue)}
@media (max-width:820px){.faq{grid-template-columns:1fr;width:auto;margin-inline:12px;border-radius:28px;padding:30px 18px 22px}.faq-side{position:static}.faq-more{padding:16px 18px}}

/* ---------- 10. Hubungi ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px;align-items:stretch}
.hq{background:var(--red);color:#fff;border-radius:28px;padding:clamp(22px,3vw,34px);display:grid;gap:18px;align-content:start}
.hq h3{font-size:clamp(1.5rem,2.6vw,2rem)}
.hq dl{margin:0;display:grid;gap:12px}
.hq dt{font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--star)}
.hq dd{margin:2px 0 0}
.hq a{color:#fff}
.hq .btn{justify-self:start;background:var(--star);color:var(--ink);box-shadow:none}
.zones{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.zone{background:var(--white);border-radius:20px;padding:16px 18px;display:grid;gap:4px;font-size:.88rem;box-shadow:0 0 0 1.5px var(--line)}
.zone h3{font-size:1.1rem;color:var(--ink);display:flex;align-items:center;gap:8px}
.zone h3 .star{color:var(--star);font-size:.95em}
.zone b{font-size:.92rem}
.zone span{color:var(--muted)}
.zone a{color:var(--blue);word-break:break-all}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
@media (max-width:520px){.zones{grid-template-columns:1fr}}

/* ---------- 11. Footer: penutup merah damask, sepadan dengan hero ---------- */
.footer{position:relative;margin-top:clamp(60px,8vw,110px);color:var(--ink);background:var(--bg)}
.footer > .wrap{position:relative;z-index:2}
/* pemandangan Sarawak di atas footer: langit siang -> senja ikut skrol; Fera & Fero muncul dari belakang bukit & melambai */
.footer:has(.foot-scene){margin-top:0}
.foot-scene{position:relative;height:calc(max(38.17vw,290px) + 40px);overflow:hidden}
.fs-sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0,var(--sk1,#D3ECFF) 34%,var(--sk2,#FFF2D6) 100%)}
.fs-sun{position:absolute;left:70%;top:calc(18% + var(--sun,0) * 52%);width:clamp(44px,5.5vw,80px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 38%,#FFF7C6,#FFCF4D 58%,#FFA94D);box-shadow:0 0 50px 14px rgba(255,190,80,.4)}
.fs-stage{position:absolute;left:50%;bottom:0;width:max(100%,760px);height:max(38.17vw,290px);translate:-50% 0}
.fs-land{position:absolute;left:0;bottom:0;width:100%;height:auto;z-index:2;max-width:none}
.fs-kid{position:absolute;bottom:11%;height:25%;width:auto;z-index:4;filter:drop-shadow(0 5px 3px rgba(60,45,25,.28));max-width:none;transform-origin:50% 100%;
  translate:0 calc((1 - var(--rise,0)) * 70%);rotate:0deg}
.fs-fera{left:9%;bottom:12.66%;height:17%}.fs-fero{left:12.96%;bottom:13.76%;height:16.5%}
.foot-scene.waving .fs-fera{animation:fsWave 1.5s ease-in-out infinite}
.foot-scene.waving .fs-fero{animation:fsWave 1.5s .25s ease-in-out infinite}
@keyframes fsWave{0%,100%{rotate:-2.5deg}50%{rotate:2.5deg}}
.fs-bubble{position:absolute;left:12.5%;bottom:calc(31% + 8px);translate:-50% 0;z-index:5;white-space:nowrap;font-family:"Pacifico",var(--display);font-size:clamp(.95rem,1.6vw,1.25rem);
  color:var(--red);background:#fff;padding:6px 16px 8px;border-radius:999px;box-shadow:0 10px 20px -12px rgba(60,40,10,.45);opacity:var(--bub,0);scale:calc(.7 + .3 * var(--bub,0))}
.fs-bubble::after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:#fff}
.foot-scene + .wrap{margin-top:-58px}
@media (prefers-reduced-motion:reduce){.fs-kid{translate:none;animation:none!important}.fs-bubble{opacity:1;scale:1}}
/* kad ajakan */
.footer-cta{position:relative;max-width:1080px;margin-inline:auto;text-align:center;display:grid;justify-items:center;gap:18px;
  padding:clamp(40px,5.5vw,70px) clamp(24px,6vw,80px);border-radius:40px;background:radial-gradient(120% 90% at 50% 0%,#FFFFFF 0,#FFF6E3 60%);box-shadow:var(--shadow),0 0 0 1.5px var(--line)}
.footer-cta h2{font-size:clamp(2.1rem,4.6vw,3.8rem);line-height:1.08;max-width:20ch}
.footer-cta h2 .mark{white-space:normal}
.footer-lede{margin:0;max-width:46ch;color:var(--muted);font-size:1.08rem}
.footer-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}
/* badan footer: jalur krim */
.footer-main{position:relative;margin-top:-70px;padding-top:110px;background:#FFF6E3;border-radius:48px 48px 0 0}
.footer-main::before{content:"";position:absolute;left:0;right:0;top:0;height:100%;border-radius:inherit;background:radial-gradient(40vmax 30vmax at 100% 100%,rgba(255,199,44,.18),transparent 60%);pointer-events:none}
.footer-main .wrap{position:relative}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:28px 40px;padding-block:20px 40px}
.footer-grid h4,.footer-grid h3.fh{margin:0 0 12px;font-weight:800;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.footer-grid p,.footer-grid address{font-style:normal;font-size:.95rem;color:var(--muted)}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.95rem}
.footer-grid a{text-decoration:none;color:var(--ink)}
.footer-grid a:hover{color:var(--red)}
.footer .brand{height:96px}
.footer-motto{font-family:var(--display);font-weight:600;font-size:1.3rem;line-height:1.15;margin-top:16px;max-width:20ch;color:var(--ink)}
.social{display:flex;gap:10px;margin-top:16px}
.social a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--white);color:var(--ink);box-shadow:0 0 0 1.5px var(--line)}
.social a:hover{background:var(--red);color:#fff}
.social svg{width:18px;height:18px;fill:currentColor}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-block:20px 28px;border-top:1.5px dashed rgba(215,38,44,.25);font-size:.82rem;color:var(--muted)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}}
@media (max-width:700px){.footer-cta{padding:36px 20px;border-radius:32px}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ---------- Halaman berita ---------- */
.page{padding-top:calc(var(--bar) + clamp(32px,5vw,64px))}
.page-head{display:grid;justify-items:center;text-align:center;gap:18px;margin-bottom:clamp(36px,5vw,64px)}
.page-head h1{font-size:clamp(2.6rem,6.4vw,5rem);letter-spacing:-.03em}
.page-head .mark,.article-head .mark{color:var(--red)}
.page-head p{max-width:56ch;color:var(--muted);font-size:1.1rem}
.page-head a{color:var(--red)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
.news-card{display:flex;flex-direction:column;text-decoration:none;background:var(--white);border-radius:28px;overflow:hidden;box-shadow:var(--shadow);transition:transform .25s ease}
.news-card:hover{transform:translateY(-6px)}
.news-card figure{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--bg-2)}
.news-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.news-card:hover img{transform:scale(1.05)}
.news-card .txt{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:20px 22px 24px;align-items:start}
.news-card h3{font-size:1.25rem;line-height:1.2;margin-bottom:6px}
.news-card .meta{font-size:.85rem;color:var(--muted);margin-bottom:8px}
.news-card .excerpt{font-size:.95rem;color:var(--muted)}
.news-card .read{display:inline-block;margin-top:12px;font-weight:800;color:var(--red)}
.news-card.big{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr}
.news-card.big figure{aspect-ratio:auto;min-height:100%}
.news-card.big .txt{align-self:center;padding:clamp(24px,4vw,44px)}
.news-card.big h3{font-size:clamp(1.6rem,3vw,2.3rem)}
.cal{display:grid;justify-items:center;width:62px;padding:8px 0 9px;border-radius:16px;background:var(--red);color:#fff;line-height:1}
.cal b{font-family:var(--display);font-size:1.7rem;font-weight:700}
.cal small{font-weight:800;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;margin-top:4px;text-align:center}
@media (max-width:900px){.news-grid{grid-template-columns:repeat(2,1fr)}.news-card.big{grid-template-columns:1fr}.news-card.big figure{aspect-ratio:3/2}}
@media (max-width:560px){.news-grid{grid-template-columns:1fr}}

.article{max-width:1000px}
.crumbs{display:flex;gap:10px;align-items:center;font-size:.9rem;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--muted);text-decoration:none;font-weight:700}
.crumbs a:hover{color:var(--red)}
.article-head{display:grid;gap:18px;justify-items:start;margin-bottom:clamp(24px,3vw,36px)}
.article-head h1{font-size:clamp(2.2rem,5vw,3.8rem);letter-spacing:-.025em;max-width:22ch}
.article-meta{margin:0;display:flex;flex-wrap:wrap;gap:10px}
.article-meta div{background:var(--white);border-radius:16px;padding:10px 16px;box-shadow:0 0 0 1.5px var(--line)}
.article-meta dt{font-weight:800;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.article-meta dd{margin:2px 0 0;font-weight:700}
.article-photo{margin:0 0 clamp(28px,4vw,48px);border-radius:clamp(24px,3vw,36px);overflow:hidden;box-shadow:var(--shadow);background:var(--bg-2)}
.article-photo img{width:100%;height:auto;max-height:620px;object-fit:cover}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(24px,4vw,56px);align-items:start}
.article-body{display:grid;gap:18px;font-size:1.12rem;line-height:1.75;color:#2E2E33}
.article-body h2{font-size:clamp(1.4rem,2.4vw,1.8rem);line-height:1.2;color:var(--ink)}
.article-body p:first-of-type::first-letter{font-family:var(--display);font-weight:700;float:left;font-size:3.4em;line-height:.85;padding:6px 10px 0 0;color:var(--red)}
.loc-box{position:sticky;top:calc(var(--bar) + 24px);display:grid;gap:12px;background:var(--sky);border-radius:24px;padding:22px}
.loc-box h2{font-size:.78rem;font-family:var(--body);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.loc-box p{font-family:var(--display);font-weight:600;font-size:1.2rem;line-height:1.25}
.loc-box .btn{justify-self:start;font-size:.95rem;padding:.7em 1.2em}
.loc-box .back{font-weight:800;text-decoration:none;color:var(--ink);margin-top:4px}
.loc-box .back:hover{color:var(--red)}
@media (max-width:820px){.article-layout{grid-template-columns:1fr}.loc-box{position:static}}
.more-news{padding-top:clamp(56px,8vw,96px)}
.more-news h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-bottom:26px}
.menu a[aria-current="page"]{background:var(--bg-2)}

/* ---------- Animasi masuk (kandungan sentiasa kelihatan) ---------- */
.js [data-pop]{transition:transform .7s cubic-bezier(.2,.9,.25,1.15)}
.js [data-pop]:not(.in){transform:translateY(30px)}

/* ---------- Kurang animasi ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .intro{height:auto}
  .intro-pin{position:relative;height:auto;min-height:100vh;padding-block:120px}
  .intro-inner{transform:none;opacity:1}
  .reveal-logo,.intro-pin::before{display:none}
  .js .intro [data-in]{opacity:1;transform:none}
  .intro-stars .is b{transform:scale(1) rotate(var(--r1))}
  .fl img{transform:none}
  .card{position:relative;top:0;transform:none}
  .hscroll{height:auto}
  .hscroll-pin{position:static;height:auto;overflow:visible;padding-block:72px}
  .track{width:100%;justify-self:stretch;overflow-x:auto;transform:none!important;padding-block:20px 30px}
  .photo-band img{transform:none;top:0;height:100%}
  .photo-band{clip-path:none!important}
  .premier-quote{transform:none!important}
  .story-items>li{opacity:1}
  .js [data-pop]:not(.in){transform:none}
}
/* UX:START — bar kemajuan, butang ke atas, sasaran sentuh */
.page-progress{position:fixed;inset:0 0 auto;z-index:101;height:4px;pointer-events:none}
.page-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--star),var(--red));transform-origin:0 50%;transform:scaleX(var(--pp,0));border-radius:0 4px 4px 0}
.to-top{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:90;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:#fff;box-shadow:0 12px 24px -10px rgba(215,38,44,.7);opacity:0;translate:0 16px;pointer-events:none;transition:opacity .3s,translate .3s cubic-bezier(.3,1.4,.5,1),background-color .2s}
.to-top svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.to-top.show{opacity:1;translate:0 0;pointer-events:auto}
.to-top:hover{background:var(--red-deep)}
.to-top:hover svg{animation:topHop .5s ease}
@keyframes topHop{40%{transform:translateY(-4px)}}
/* titik kecil: kawasan sentuh sekurang-kurangnya 32px tanpa ubah rupa */
.dn-dots button,.fb-nav button{position:relative}
.dn-dots button::after{content:"";position:absolute;inset:-10px}
.dn-dots{gap:12px}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}.page-progress{display:none}}
/* UX:END */
/* MOBILE:START — telefon: bar tindakan pantas (Enrol / Call / Find us) & "More ways kids shine" sebagai karusel leret */
.m-actions{display:none}
@media (max-width:760px){
  .m-actions{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:95;
    padding:8px;border-radius:22px;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    box-shadow:0 0 0 1.5px var(--line),0 16px 34px -14px rgba(60,40,10,.45);transform:translateY(150%);transition:transform .35s cubic-bezier(.3,.9,.3,1)}
  .m-actions.show{transform:none}
  .menu-open .m-actions{transform:translateY(150%)}
  .m-actions a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;border-radius:15px;font-family:var(--display);font-weight:600;font-size:.98rem;
    color:var(--ink);text-decoration:none;background:var(--bg-2,#FFF6E3)}
  .m-actions a svg{width:20px;height:20px;flex:none}
  .m-actions .ma-enrol{background:var(--red);color:#fff;box-shadow:0 8px 16px -8px rgba(215,38,44,.7)}
  .m-actions a:active{transform:scale(.97)}
  body.ma-on .to-top{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:84px}

  /* More ways kids shine (telefon): 11 jubin bergambar dalam satu skrin; sentuh = lembaran butiran dari bawah */
  .xbag-wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:8px;max-width:none}
  #extras .head{margin-bottom:14px}#extras .head p{font-size:.92rem;margin-top:6px}
  .xbag-wrap>.xcard:nth-of-type(n){grid-row:auto;grid-column:auto}
  .xbag-col{display:none}
  .xbag-wrap .xcard,.xbag-wrap.go .xcard:not(.lit):not(.fly){visibility:visible;margin:0;padding:0 0 8px;gap:0;border-radius:16px;cursor:pointer;animation:none;transform:none;
    box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c,var(--red)) 45%,#fff),0 10px 18px -14px rgba(29,29,31,.5);-webkit-tap-highlight-color:transparent}
  .xbag-wrap.go .xcard:not(.lit):not(.fly)::after{display:none}
  .xbag-wrap .xcard>:not(.xart):not(h3){display:none}
  .xbag-wrap .xart{margin:0;border-radius:16px 16px 0 0;aspect-ratio:3/2}
  .xbag-wrap .xart,.xbag-wrap.go .xcard:not(.lit):not(.fly) .xart{visibility:visible}
  .xbag-wrap .xcard h3{margin:6px 5px 0;font-size:.78rem;line-height:1.18;text-align:center}
  .xbag-wrap .xcard:active{transform:scale(.96)}
  .xbag-wrap .xcard:focus-visible{outline:3px solid var(--red);outline-offset:2px}
}
/* lembaran butiran (telefon) */
.x-sheet{position:fixed;inset:0;z-index:120;display:none}
.x-sheet.open{display:block}
.x-sheet-bg{position:absolute;inset:0;background:rgba(29,29,31,.45);opacity:0;transition:opacity .3s}
.x-sheet.show .x-sheet-bg{opacity:1}
.x-sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;max-height:88svh;overflow:auto;background:var(--bg,#FFFCF5);border-radius:26px 26px 0 0;
  padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));transform:translateY(105%);transition:transform .38s cubic-bezier(.3,.9,.3,1);box-shadow:0 -20px 40px -20px rgba(0,0,0,.35)}
.x-sheet.show .x-sheet-panel{transform:translateY(var(--drag,0px))}
.x-sheet.dragging .x-sheet-panel{transition:none}
.x-grab{display:block;width:44px;height:5px;border-radius:5px;background:#D9CBAA;margin:0 auto 10px}
.x-sheet-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.x-sheet-bar .x-pos{font-weight:800;font-size:.85rem;color:var(--muted)}
.x-sheet-bar button{width:44px;height:44px;border:0;border-radius:50%;background:var(--white);box-shadow:0 0 0 1.5px var(--line);font-size:1.25rem;font-weight:800;color:var(--ink);cursor:pointer}
.x-sheet-nav{display:flex;gap:8px}
.x-sheet .xcard{visibility:visible!important;margin:0;transform:none!important;animation:none!important}
.x-sheet .xcard::after{display:none!important}
.x-sheet .xcard .count{visibility:visible!important}
body.x-sheet-on{overflow:hidden}
/* MOBILE:END */
/* halaman notis privasi (draf) */
.draft-banner{margin:0 0 24px;padding:14px 18px;border-radius:16px;background:#FFF1C9;border:2px dashed #E0A400;color:#5A4300;font-size:.95rem;line-height:1.5}
.draft-banner b{display:inline-block;margin-right:8px;padding:2px 10px;border-radius:999px;background:#E0A400;color:#fff;font-size:.78rem;letter-spacing:.08em}
.draft-banner span{display:block;margin-top:6px}
.privacy-lang{margin:0;font-weight:700}
.privacy-lang a{color:var(--blue)}
.privacy-body{max-width:72ch;margin-bottom:clamp(40px,6vw,72px)}
.privacy-body h3{margin:10px 0 0;font-size:1.15rem;color:var(--ink)}
.privacy-body p{margin:0}
.privacy-body p:first-of-type::first-letter{all:unset}
.privacy-body a{color:var(--blue)}
.privacy-body ul{margin:0;padding-left:1.3em;display:grid;gap:8px}
.privacy-body li::marker{color:var(--red)}
.privacy-body + .privacy-body{padding-top:clamp(28px,4vw,44px);border-top:1.5px dashed var(--line)}

/* PERF:START — prestasi: animasi berulang berhenti bila section di luar skrin (kelas .sd-off dari JS PAUSE);
   telefon/skrin sentuh: tiada blur di belakang bar atas & bar tindakan (blur dikira semula setiap frame skrol) */
.sd-off,.sd-off *,.sd-off *::before,.sd-off *::after{animation-play-state:paused!important}
@media (max-width:760px),(hover:none){
  .topbar.solid{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(252,251,248,.98)}
  .m-actions{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#fff!important}
}
/* PERF:END */

/* A11Y:START — kontras teks kecil (WCAG AA 4.5:1 / teks besar 3:1): warna jenama digelapkan sedikit untuk teks sahaja */
:root{--fera-ink:#C41F66;--leaf-ink:#26773F;--fero-ink:#B86A00}
.hero-chips li:nth-child(1) b{color:var(--fera-ink)}.hero-chips li:nth-child(3) b{color:var(--leaf-ink)}
.hero-tagline,.footer .footer-tagline{color:var(--fera-ink)}
.card:not(.card-enrich) .age,.leader-label{background:color-mix(in srgb,var(--c) 84%,#000)}
.learn h3{color:color-mix(in srgb,var(--c) 80%,#000)}
.mascot-fero figcaption b{color:var(--fero-ink)}
.env-to{color:#FFF4D6}.env-body dt{color:#fff}
/* A11Y:END */

/* NF:START — halaman 404 */
.nf{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,56px);align-items:center;min-height:62vh;padding-block:clamp(110px,14vw,160px) 60px}
.nf-fera{width:clamp(150px,22vw,260px);height:auto;animation:bob 3.2s ease-in-out infinite}
.nf-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.nf-actions .btn{color:#fff;text-decoration:none}.nf-actions .btn-light{color:var(--red)}
.nf-bm{margin-top:18px;font-size:.92rem;color:var(--muted)}
@media (max-width:700px){.nf{grid-template-columns:1fr;justify-items:center;text-align:center}.nf-actions{justify-content:center}.nf-fera{width:150px}}
/* NF:END */

/* CORP:START — skrin pembuka korporat Konsep A: Jata Sarawak -> garis emas -> logo SeDidik dipasang -> terbang ke bar atas */
@property --ci-r{syntax:'<length-percentage>';inherits:false;initial-value:0%}
.corp-intro{display:none}
.ci-on{overflow:hidden}
.ci-on .corp-intro{display:block;position:fixed;inset:0;z-index:10000;cursor:pointer;animation:ciSafety 0s 9s forwards}
@keyframes ciSafety{to{opacity:0;visibility:hidden;pointer-events:none}}
.ci-bg{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 42%,#FFFDF8 0%,#FCF6EA 65%,#F6EAD3 100%);
  -webkit-mask-image:radial-gradient(circle at 50% 62%,transparent var(--ci-r),#000 calc(var(--ci-r) + 1px));
          mask-image:radial-gradient(circle at 50% 62%,transparent var(--ci-r),#000 calc(var(--ci-r) + 1px))}
.ci-stage{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;padding:24px 20px}
/* 1. Jata + cahaya keemasan */
.ci-gov{position:relative;display:grid;justify-items:center;margin-bottom:clamp(34px,7vh,64px)}
/* medallion Jata: gelang emas berganda, sinar berputar perlahan, kilauan sekali */
.ci-seal{position:relative;width:clamp(112px,min(15vw,19vh),156px);aspect-ratio:1;display:grid;place-items:center}
/* lampu sorot: dewan gelap -> lampu sorot menyala (berkelip) dari atas tepat ke Jata -> lampu dewan menyala */
.ci-dim{position:absolute;left:50%;top:50%;width:400vmax;height:400vmax;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(24,17,8,0) 0,rgba(24,17,8,.18) 4.5vmax,rgba(24,17,8,.8) 15vmax);animation:ciDimOut .9s 1.55s ease-in-out forwards}
@keyframes ciDimOut{to{opacity:0}}
.ci-spot{position:absolute;left:50%;bottom:-40%;width:260vh;height:120vh;translate:-50% 0;pointer-events:none;
  background:conic-gradient(from 166deg at 50% 0%,rgba(255,244,214,0) 0deg,rgba(255,244,214,.55) 9deg,rgba(255,248,226,.75) 14deg,rgba(255,244,214,.55) 19deg,rgba(255,244,214,0) 28deg,rgba(255,244,214,0) 360deg);
  -webkit-mask:linear-gradient(to bottom,transparent 0%,#000 50%,#000 78%,transparent 100%);mask:linear-gradient(to bottom,transparent 0%,#000 50%,#000 78%,transparent 100%);
  opacity:0;animation:ciSpotOn .7s .15s linear forwards,ciDimOut 1s 1.6s ease-in-out forwards}
@keyframes ciSpotOn{0%{opacity:0}18%{opacity:.85}28%{opacity:.25}42%{opacity:1}55%{opacity:.7}70%,100%{opacity:1}}
.ci-pool{position:absolute;left:50%;top:50%;width:260%;height:260%;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,250,232,.95) 0%,rgba(255,240,196,.55) 30%,rgba(255,236,180,0) 62%);
  opacity:0;animation:ciSpotOn .7s .15s linear forwards}
.ci-ring{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#FFFFFF 0%,#FFFDF6 55%,#FCEFC9 100%);
  box-shadow:inset 0 0 0 1px rgba(201,150,30,.35),0 0 0 4px #E2AE2D,0 0 0 8px #FFF8E6,0 0 0 10px rgba(226,174,45,.6),0 18px 34px -12px rgba(140,95,15,.5);
  opacity:0;transform:scale(.55);animation:ciPop .75s .45s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes ciPop{to{opacity:1;transform:none}}
.ci-jata{position:relative;width:70%;height:auto;opacity:0;transform:scale(.8);animation:ciPop .6s .65s cubic-bezier(.3,1.4,.5,1) forwards;filter:drop-shadow(0 3px 4px rgba(90,60,10,.18))}
.ci-shine{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none}
.ci-shine::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:45%;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);opacity:0;animation:ciShine 1s 1.2s ease-in-out forwards}
@keyframes ciShine{0%{opacity:0;left:-60%}15%{opacity:1}100%{opacity:0;left:120%}}
/* 2. garis emas turun */
@keyframes ciDraw{to{stroke-dashoffset:0}}
/* 3. logo SeDidik dipasang bahagian demi bahagian */
.ci-logo{width:clamp(130px,min(22vw,27vh),240px);height:auto;overflow:visible;transform-origin:50% 50%}
.ci-logo .ci-p-red,.ci-logo .ci-p-blk,.ci-logo .ci-star,.ci-logo .ci-p-word,.ci-logo .ci-p-sub{transform-box:fill-box;opacity:0}
.ci-p-red{transform-origin:100% 0;transform:rotate(-28deg) translateX(-30px);animation:ciPart .65s 1.45s cubic-bezier(.2,.9,.3,1) forwards}
.ci-p-blk{transform-origin:0 100%;transform:rotate(28deg) translateX(30px);animation:ciPart .65s 1.6s cubic-bezier(.2,.9,.3,1) forwards}
.ci-star{transform-origin:50% 50%;transform:scale(0) rotate(-180deg);animation:ciStar .7s 2s cubic-bezier(.3,1.6,.5,1) forwards}
.ci-p-word{transform:translateX(18px);animation:ciPart .5s 2.15s ease-out forwards}
.ci-p-sub{transform:translateX(18px);animation:ciPart .5s 2.27s ease-out forwards}
@keyframes ciPart{to{opacity:1;transform:none}}
@keyframes ciStar{60%{opacity:1;transform:scale(1.35) rotate(20deg)}100%{opacity:1;transform:none}}
/* 4. kapsyen */
.ci-cap{margin:clamp(8px,2vh,18px) 0 0;width:min(940px,92vw);justify-items:center;gap:8px!important;display:grid;gap:3px;opacity:0;animation:ciUp .55s 2.55s ease-out forwards}
.ci-cap b{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2.3vw,1.7rem);color:var(--ink);letter-spacing:.01em}
.ci-cap .ci-mwrap{display:block;text-align:center;line-height:1.75;text-wrap:balance}
.ci-cap .ci-mark{-webkit-box-decoration-break:clone;box-decoration-break:clone;font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.7vw,1.25rem);color:var(--ink);padding:1px 8px;
  background:linear-gradient(transparent 56%,rgba(255,199,44,.8) 56%,rgba(255,199,44,.8) 92%,transparent 92%) no-repeat 0 0/0% 100%;animation:ciMark .7s 3s cubic-bezier(.4,0,.2,1) forwards}
.ci-cap .ci-mark em{font-style:normal;color:var(--red)}
@keyframes ciMark{to{background-size:100% 100%}}
.ci-cap i{font-size:.82rem;line-height:1.55;color:var(--muted);text-wrap:balance}
@keyframes ciUp{to{opacity:1;transform:none}}
/* 5. keluar: teks pudar, logo terbang ke bar atas (JS), latar terbuka dari tengah */
.corp-intro.ci-exit{pointer-events:none}
.ci-exit .ci-gov,.ci-exit .ci-line,.ci-exit .ci-cap,.ci-exit .ci-skip{opacity:0!important;transition:opacity .3s}
.ci-exit .ci-logo{transition:transform .85s cubic-bezier(.6,0,.2,1)}
.ci-exit .ci-bg{--ci-r:150%;transition:--ci-r 1s cubic-bezier(.5,0,.3,1) .1s,opacity .4s .75s;opacity:0}
.corp-intro.ci-fast{opacity:0;transition:opacity .3s;pointer-events:none}
.ci-on .m-actions,.ci-on .to-top{visibility:hidden}
@media (prefers-reduced-motion:reduce){
  .ci-dim,.ci-spot{display:none}
  .ci-on .corp-intro *{animation:none!important;opacity:1!important;transform:none!important}
    .ci-exit .ci-logo,.ci-exit .ci-bg{transition:none}
}
@media (max-height:640px){.ci-cap i{display:none}}
@media (max-width:640px) and (min-height:641px){.ci-seal{width:132px}.ci-logo{width:190px}}
.ci-dot{display:none}
@media (max-width:640px){.ci-cap .ci-mark{font-size:.9rem;padding:1px 5px}.ci-cap .ci-mwrap{line-height:1.7}.ci-cap i{font-size:.74rem}.ci-cap b{font-size:1.2rem}}
/* CORP:END */
.card-where{margin:10px 0 0;font-size:.86rem;color:var(--muted)}

/* HORNBILL:START — kenyalang terbang meluncur merentasi langit footer (kanan -> kiri), beralun & condong; berhenti bila footer di luar skrin (.sd-off) */
.fs-fly{position:absolute;inset:0;z-index:3;pointer-events:none;animation:fsFly 24s linear -9s infinite}
@keyframes fsFly{0%{transform:translateX(102%)}72%{transform:translateX(-14%)}100%{transform:translateX(-14%)}}
.fs-bob{position:absolute;left:0;top:clamp(14px,3vw,46px);animation:fsBob 3.6s ease-in-out infinite alternate}
@keyframes fsBob{0%{transform:translateY(0) rotate(-4deg)}100%{transform:translateY(clamp(18px,2.4vw,34px)) rotate(5deg)}}
.fs-bird{display:block;width:max(8vw,62px);aspect-ratio:291/260;background:url("../images/hornbill-flap.webp") 0 0/400% 100% no-repeat;filter:drop-shadow(0 8px 6px rgba(40,30,70,.16));animation:hbFlap 5s steps(1,end) infinite}
@keyframes hbFlap{0%{background-position:0% 0}3%{background-position:33.333% 0}6%{background-position:66.667% 0}9%{background-position:100% 0}12%{background-position:0% 0}15%{background-position:33.333% 0}18%{background-position:66.667% 0}21%{background-position:100% 0}24%{background-position:0% 0}27%{background-position:33.333% 0}30%{background-position:66.667% 0}33%{background-position:100% 0}36%{background-position:0% 0}39%{background-position:33.333% 0}42%{background-position:66.667% 0}45%{background-position:100% 0}48%,100%{background-position:33.333% 0}}
@media (prefers-reduced-motion:reduce){.fs-fly,.fs-bob,.fs-bird{animation:none}.fs-fly{transform:translateX(58%)}.fs-bird{background-position:33.333% 0}}
@media (max-width:760px){.foot-scene{height:calc(max(38.17vw,229px) + 30px)}.fs-stage{width:max(100%,600px);height:max(38.17vw,229px);translate:-38% 0}.fs-fera{height:21%}.fs-fero{height:20.4%}.fs-bubble{bottom:calc(36% + 6px)}.foot-scene + .wrap{margin-top:-22px}}
/* HORNBILL:END */
/* BOATS:START — perahu tambang ulang-alik: belayar ke jeti, berhenti, berpusing, balik ke tempat asal (tidak hilang); terumbang-ambing */
.fs-boat{position:absolute;z-index:3;pointer-events:none}
.fs-boat-turn{display:block;transform-origin:50% 60%}
.fs-boat img{display:block;width:100%;height:auto;max-width:none;transform-origin:50% 70%;animation:boatBob 2.6s ease-in-out infinite alternate}
.fs-boat-b img{animation-duration:3.2s;animation-delay:-1.1s}
/* perahu kecil: menyeberang ke tebing DUN dan balik */
.fs-boat-a{left:35.96%;bottom:33.19%;width:5.125%;animation:boatGoA 32s ease-in-out infinite}
.fs-boat-a .fs-boat-turn{animation:boatTurn 32s infinite}
@keyframes boatGoA{0%,6%{transform:translate(0,0)}44%,56%{transform:translate(190%,-70%)}94%,100%{transform:translate(0,0)}}
/* perahu besar: ke jeti kayu DUN dan balik */
.fs-boat-b{left:63.58%;bottom:19.43%;width:9.125%;animation:boatGoB 38s ease-in-out -14s infinite}
.fs-boat-b .fs-boat-turn{animation:boatTurn 38s -14s infinite}
@keyframes boatGoB{0%,6%{transform:translate(0,0)}44%,56%{transform:translate(105%,-14%)}94%,100%{transform:translate(0,0)}}
/* berpusing semasa berhenti di jeti (pergi: haluan ke kanan; balik: dicermin ke kiri) */
@keyframes boatTurn{0%,47%{transform:scaleX(1)}53%,97%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
@keyframes boatBob{0%{transform:translateY(0) rotate(-1.3deg)}100%{transform:translateY(3%) rotate(1.3deg)}}
@media (prefers-reduced-motion:reduce){.fs-boat,.fs-boat img,.fs-boat-turn{animation:none}}
/* BOATS:END */

/* CERT: sijil anugerah dalam kad pencapaian */
.pcert{display:flex;align-items:center;gap:10px;margin-top:10px;padding:6px 12px 6px 6px;border:0;border-radius:14px;background:color-mix(in srgb,var(--c) 9%,#fff);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c) 30%,transparent);color:var(--c);font:inherit;font-weight:700;font-size:.85rem;cursor:pointer;text-align:left;transition:transform .2s,box-shadow .2s}
.pcert img{width:54px;height:auto;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.18);rotate:-4deg;transition:rotate .2s}
.pcert:hover{transform:translateY(-2px);box-shadow:0 0 0 2px var(--c)}
.pcert:hover img{rotate:0deg}
.pcert:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.cert-dialog{width:min(560px,calc(100vw - 32px));max-height:92vh;background:#fff}
.cert-dialog[open]{display:block}
.cert-dialog img{display:block;width:100%;height:auto;max-height:92vh;object-fit:contain}
.cert-dialog .msg-close{position:absolute;top:12px;right:12px;z-index:2}
.card .pills-lbl{margin:12px 0 0;font-weight:700;font-size:.9rem;color:var(--ink)}
.card .pills-lbl + .pills{margin-top:8px}

/* Poskad zon: alamat = pautan Google Maps (gambar & nama pengurus kini di blok "Zone operations managers") */
.pc-addr a.pc-map{color:var(--ink);word-break:normal;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--blue) 45%,transparent);text-underline-offset:3px}
.pc-addr a.pc-map span{color:var(--blue);font-weight:800}
.pc-addr a.pc-map:hover{color:var(--blue)}
.postcard .pc-addr a[href^="mailto:"]{word-break:normal;overflow-wrap:anywhere}
/* ACH6:START — 5 kad pencapaian (Service Excellence dibuang 23 Okt 2026; asal 6 kad 20 Okt): ampaian lebih lebar, kad lebih ramping; galeri sijil konvensyen */
.pq-row{grid-template-columns:repeat(5,minmax(0,1fr));width:min(1400px,calc(100vw - 2 * var(--gutter)));max-width:none;margin-inline:auto;position:relative;left:50%;translate:-50% 0}
.pq-row .pcard{padding:22px 16px 18px}
.pq-row .pcard h3{font-size:1.08rem;padding-right:4px}
.pq-row .pcard p{font-size:.88rem}
.pq-row .pcard .xs-stat b{font-size:1.9rem}
.pq-row .pyear{top:18px;right:14px}
.pq-row .pcert{padding:5px 10px 5px 5px;font-size:.8rem}
.pq-row .pcert img{width:48px}
.pq-stage.pinned{height:700vh}
.pq-stage.pinned .pq-pin{grid-template-columns:minmax(0,1fr)}
.pq-fit{min-width:0}
@media (max-width:1200px){.pq-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.pq-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pq-row{grid-template-columns:1fr}}
.cert-gallery{width:min(600px,calc(100vw - 24px));background:#1b1022;color:#fff}
.cg-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.cg-track::-webkit-scrollbar{display:none}
.cg-track:focus-visible{outline:3px solid #f5c542;outline-offset:-3px}
.cg-slide{flex:0 0 100%;margin:0;scroll-snap-align:center;display:grid;justify-items:center}
.cg-slide img{width:100%;height:auto;max-height:calc(92vh - 96px);object-fit:contain}
.cg-slide figcaption{padding:8px 16px 0;font-weight:700;font-size:.92rem;text-align:center}
.cg-nav{display:flex;align-items:center;justify-content:center;gap:18px;padding:10px 0 14px}
.cg-nav button{width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;transition:background .2s}
.cg-nav button:hover{background:rgba(255,255,255,.28)}
.cg-nav button:disabled{opacity:.35;cursor:default}
.cg-nav button:focus-visible{outline:3px solid #f5c542;outline-offset:2px}
.cg-count{min-width:5ch;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.cert-gallery .msg-close{background:rgba(255,255,255,.9)}
.footer-bottom .foot-privacy{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.footer-bottom .foot-privacy:hover{color:var(--red)}
/* ACH6:END */

/* JUSTIFY:START — perenggan & keterangan kad disusun rata kiri-kanan (justify) supaya kemas */
.hero-lede,
.card p:not(.pills-lbl):not(.card-where),
.card-enrich .ep p,
.learn p,
.xcard p:not(.xs-stat),
.story-items p,
.meaning-list li > div,
.premier-quote blockquote p,
.pcard p:not(.xs-stat),
.msg-body p,
.faq-lede,
.faq-list .answer p,
.faq-list .answer li,
.cb-note p,
.career p,
.news-card .excerpt,
.article-body p,
.article-body li,
.privacy-body p,
.privacy-body li{
  text-align:justify;
  text-align-last:left;
  -webkit-hyphens:none;
  hyphens:none;
}
.head p,
.pq-head p,
.mascots-intro p,
.xquote p,
.footer-lede,
.page-head > p{
  text-align:justify;
  text-align-last:center;
  -webkit-hyphens:none;
  hyphens:none;
}
/* kad pencapaian sempit (6 lajur): justify mewujudkan jarak besar antara perkataan, jadi susun ke kiri */
.pcard p:not(.xs-stat){text-align:left}
/* JUSTIFY:END */
/* imej maskot ada width/height (elak anjakan susun atur); saiz sebenar ikut % lebar sahaja */
.rig-ant,.fero-ant,.fero-hook{height:auto}

/* ENRICH-SEC:START — Enrichment dipisahkan dari servis utama; dikaitkan dengan TASKA/TADIKA melalui lencana & pautan.
   Pentas aksi: maskot beraksi bingkai demi bingkai ikut skrol (images/enrich/<program>/NNN.webp) */
.enrich-sec{--c:var(--fero)}
.for-badge{display:inline-block;font-size:.85em;font-weight:800;letter-spacing:.04em;color:#fff;padding:1px 10px;border-radius:999px;vertical-align:.08em}
.for-badge.for-taska{background:var(--red)}
.for-badge.for-tadika{background:color-mix(in srgb,var(--fera) 84%,#000)}
.ep-chips li.for-taska{background:var(--red);color:#fff}
.ep-chips li.for-tadika{background:color-mix(in srgb,var(--fera) 84%,#000);color:#fff}
.ep-chips li.fee{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.card .card-more{margin:16px 0 0}
.card-more a,.pills a{color:var(--ink);font-weight:800;text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:2px;text-underline-offset:3px}
.card-more a:hover,.pills a:hover{color:var(--red)}

.ea{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(12px,2.4vh,32px)}
.ea-stage{--sc:#FFE4CC;position:relative;height:clamp(300px,50vh,540px);display:grid;place-items:center}
.ea-blob{position:absolute;inset:4% 8% 8%;border-radius:46% 54% 52% 48%/55% 45% 55% 45%;background:var(--sc);transition:background-color .6s ease;animation:eaBlob 9s ease-in-out infinite alternate}
.ea-blob::after{content:"";position:absolute;inset:-14px;border-radius:inherit;border:3px dashed color-mix(in srgb,var(--sc) 70%,#000 12%);opacity:.5}
@keyframes eaBlob{to{border-radius:56% 44% 42% 58%/45% 58% 42% 55%;rotate:8deg}}
.ea-floor{position:absolute;bottom:5%;left:50%;width:42%;height:7%;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(29,29,31,.22),transparent)}
.ea-still,.ea-canvas{position:absolute;z-index:1;left:50%;bottom:6%;translate:-50% 0;height:88%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 14px 14px rgba(29,29,31,.16))}
.ea-canvas{display:none}
.ea-stage.has-frames .ea-canvas{display:block}
.ea-stage.has-frames .ea-still{display:none}
.ea-still{animation:eaBob 2.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes eaBob{50%{transform:translateY(-3%) scale(1.02,.98)}}
.ea-stage.swap .ea-still,.ea-stage.swap .ea-canvas{animation:eaIn .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes eaIn{from{opacity:.4;transform:translateY(5%) scale(.9)}to{opacity:1;transform:none}}

.ea-info .enrich-panel{position:relative;display:grid}
.ea-info .ep{padding:clamp(18px,2.4vw,28px) clamp(18px,2.4vw,30px)}
.ea-info .ep h3{margin:0 0 10px;font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.1;color:var(--ink)}
.ea-info .ep p{margin:0;color:var(--muted);font-size:1rem;line-height:1.55;max-width:46ch}
.ea-info .ep-chips{margin-bottom:12px}
.enrich-fee{margin:14px 0 0;font-size:.8rem;line-height:1.45;color:var(--muted);max-width:52ch}

.ea-tabs.stickers{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(8px,1.2vw,14px);padding:10px 4px 4px;margin-top:clamp(8px,2vh,22px)}
.ea-tabs .stk{width:clamp(62px,6.4vw,84px);padding:8px 4px 6px;gap:4px;border-radius:16px}
.ea-tabs .stk::after{width:14px;height:14px;border-radius:0 16px 0 0}
.ea-tabs.stickers .stk img{height:clamp(36px,5vh,54px)}
.ea-tabs .stk span{font-size:.62rem}
.ea-tabs .stk[aria-selected="true"]{scale:1.08}

/* mod pin: seksyen melekat; satu segmen skrol bagi setiap program */
.enrich-sec.ew-on{padding-block:0!important}
/* butang ke atas disorok semasa pentas dipin: ia menindih panel butiran di telefon */
.ea-pinned .to-top.show{opacity:0;translate:0 16px;pointer-events:none}
.ew-on .ew{height:calc(100svh + var(--n,8) * 60vh)}
.ew-on .ew-pin{position:sticky;top:0;height:100svh;display:grid;align-content:center;padding-top:var(--bar);padding-bottom:var(--ewb,12px);overflow:hidden}
.ew-on .head{margin-bottom:0}
.ew-on .head .tag{margin-bottom:6px}
.ew-on .ea{margin-top:clamp(8px,1.6vh,18px)}
.ew-on .ea-tabs.stickers{margin-top:clamp(4px,1.2vh,14px)}
.ew-on .head h2{margin-bottom:6px}
.ew-on .head p{margin-bottom:0;max-width:none}
.ew-on .ea-stage{height:var(--eah,50vh)}
.ew-tight .head .tag,.ew-tight .enrich-fee{display:none}
.ew-tighter .head h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.ew-tighter .head p{font-size:.86rem}
@media (max-width:760px){
  .ea{grid-template-columns:1fr;gap:14px}
  .ew-on .head .tag{display:none}
  .ew-on .head h2{font-size:clamp(1.7rem,8vw,2.2rem)}
  .ew-on .head p{font-size:.86rem;line-height:1.45;text-align:center}
  .ew-on .ea-tabs,.ew-on .enrich-fee{display:none}
  .ew-on .ea-info .ep{padding:14px 16px}
  .ew-on .ea-info .ep h3{font-size:1.4rem;margin-bottom:6px}
  .ew-on .ea-info .ep p{font-size:.84rem;line-height:1.45}
  .ew-on .ep-chips{gap:4px;margin-bottom:8px}
  .ew-on .ep-chips li{font-size:.66rem;padding:3px 8px}
  /* telefon rendah: Fero diberi ruang; cip deskriptif & ayat kepala disorok (TASKA/TADIKA/bayaran kekal pada cip) */
  .ew-tighter .ep-chips li:not([class]),.ew-tighter .head p{display:none}
  .ea-tabs.stickers{flex-wrap:nowrap;justify-content:flex-start}
  .ea-tabs .stk{flex:0 0 76px}
}
@media (prefers-reduced-motion:reduce){.ea-blob,.ea-still{animation:none!important}}
/* ENRICH-SEC:END */

/* GROWPLUS:START — pensel melukis tanda ketinggian; kaunter pusat/kanak-kanak/staf (angka yang dinyatakan sahaja) */
.hc-stats{display:none}
@media (min-width:761px){
  .hc-stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding:0 0 10px;font-weight:700;font-size:.85rem;color:var(--muted);opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s}
  .hc-stats.on{opacity:1;transform:none}
  .hc-stats .hs-asat{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
  .hc-stats .hs b{font-family:var(--display);font-size:1.45rem;color:var(--ink);font-variant-numeric:tabular-nums}
  .hc-stats .hs i{font-style:normal}
  .hc-stats .hs[hidden]{display:none}
  .hc-stats.bump .hs b{animation:hsBump .5s cubic-bezier(.3,1.6,.45,1)}
  @keyframes hsBump{40%{transform:translateY(-4px) scale(1.12);color:var(--red)}}
  .hc-pencil{position:absolute;z-index:3;left:0;top:0;width:96px;height:20px;opacity:0;pointer-events:none;transform-origin:0 50%;filter:drop-shadow(0 4px 4px rgba(60,35,10,.25))}
  .hc-pencil svg{display:block;width:100%;height:100%}
}
@media (prefers-reduced-motion:reduce){.hc-mark::after{transform:none!important;transition:none}.hc-pencil{display:none}}
  .hc-fero img{transition:opacity .12s}
  .hc-fero.spurt img{animation:feroSpurt .75s cubic-bezier(.3,1.2,.5,1)}
  @keyframes feroSpurt{0%{transform:none}22%{transform:scale(1.08,.86)}55%{transform:translateY(-12%) scale(.94,1.1)}80%{transform:translateY(1%) scale(1.04,.96)}100%{transform:none}}
  .hc-fero img{transform-origin:55% 100%}
  .hc-spark{position:absolute;inset:0;z-index:3;pointer-events:none}
  .hc-spark i{position:absolute;left:55%;top:30%;width:14px;height:14px;opacity:0;background:var(--star,#F7B21B);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
  .hc-fero.spurt .hc-spark i{animation:sparkOut .8s ease-out .2s both}
  .hc-spark i:nth-child(1){--a:0deg}.hc-spark i:nth-child(2){--a:45deg;background:#E5317A}.hc-spark i:nth-child(3){--a:90deg}.hc-spark i:nth-child(4){--a:135deg;background:#2E6FE8}
  .hc-spark i:nth-child(5){--a:180deg}.hc-spark i:nth-child(6){--a:225deg;background:#2F8F4E}.hc-spark i:nth-child(7){--a:270deg}.hc-spark i:nth-child(8){--a:315deg;background:#E5317A}
  @keyframes sparkOut{0%{opacity:0;transform:rotate(var(--a)) translateX(0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(90px) scale(1.1) rotate(90deg)}}
/* GROWPLUS:END */

/* MERGE:START — peristiwa pada tahun yang sama digabung: senarai kecil dalam satu tahun */
.story-sub{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:14px;max-width:46ch}
.story-sub li{padding-left:16px;border-left:3px solid color-mix(in srgb,var(--red) 35%,transparent);display:grid;gap:2px}
.story-sub .ss-when{font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.story-sub b{font-family:var(--display);font-weight:700;font-size:1.15rem;line-height:1.2;color:var(--ink)}
.story-sub li>span:last-child{color:var(--muted);font-size:.98rem;line-height:1.55}
/* MERGE:END */

/* ZONE:START — pengurus operasi zon: blok berasingan di bawah carta Management team */
.zone-lede{margin:-12px 0 24px;max-width:60ch;color:var(--muted)}
.zone-team{list-style:none;margin:0 0 clamp(48px,7vw,90px);padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.zcard{flex:0 1 250px;display:grid;justify-items:center;align-content:start;gap:4px;padding:24px 16px 20px;text-align:center;background:var(--white);border-radius:22px;border-top:6px solid #F39A1E;box-shadow:0 0 0 1.5px var(--line),0 18px 30px -24px rgba(29,29,31,.45);transition:translate .3s,box-shadow .3s}
.zcard:hover{translate:0 -4px;box-shadow:0 0 0 1.5px var(--line),0 24px 34px -22px rgba(29,29,31,.5)}
.zcard img{width:104px;height:104px;margin-bottom:10px;border-radius:50%;object-fit:cover;object-position:50% 20%;box-shadow:0 0 0 5px var(--white),0 0 0 8px #F39A1E}
.zc-zone{padding:3px 10px;border-radius:999px;background:#FFE9CC;color:#B45309;font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.zcard b{margin-top:6px;font-family:var(--display);font-size:1.1rem;line-height:1.2;color:var(--ink)}
.zc-role{font-size:.85rem;color:var(--muted)}
.zcard a{font-size:.82rem;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.zcard a:hover{color:var(--red)}
@media (max-width:560px){.zone-team{gap:12px}.zcard{flex-basis:calc(50% - 6px)}.zcard{padding:18px 10px 16px}.zcard img{width:84px;height:84px}.zcard a{font-size:.72rem}}
/* ZONE:END */

/* MGNET:START — Management team: rangkaian bulatan; orang badan penuh berdiri di atas cakera, garisan bersudut dilukis
   ikut skrol (JS menetapkan kedudukan dalam % viewBox: --h tinggi orang, --tc warna tingkat) */
.mn{position:relative;z-index:0;isolation:isolate;width:min(1200px,100%);margin:0 auto clamp(48px,7vw,90px);overflow-x:clip;overflow-y:visible}  /* isolate: z-index orang (ikut y) tidak menutup bar menu */
.mn-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mn-ln-o,.mn-ln-i{fill:none;stroke-linejoin:round;stroke-linecap:round}
.mn-ln-o{stroke:#CDD0D6;stroke-width:6;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 3px 2px rgba(30,20,10,.12))}
/* titik mengalir: hanya pada laluan menyala, bergerak dari orang itu ke arah GM (arah laporan) */
.mn-ln-i{stroke:#fff;stroke-width:3.2;stroke-dasharray:0 16;opacity:0;transition:opacity .3s}
.mn-ln-i.lit{opacity:.95;animation:mnFlow .7s linear infinite}
@keyframes mnFlow{to{stroke-dashoffset:16}}
.mn-d{transform-box:view-box;scale:0;transition:scale .5s cubic-bezier(.3,1.6,.5,1)}
.mn-d.on{scale:1}
.mn-d-o{fill:#F7F6F2;stroke:#C4C7CE;stroke-width:11;transition:stroke .3s,filter .3s}
.mn-d.hot .mn-d-o{stroke:var(--tc);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--tc) 60%,transparent))}
.mn-d-s{fill:rgba(30,20,10,.22);filter:blur(2px);transform-box:fill-box;transform-origin:50% 50%;scale:.3;transition:scale .6s ease-out .1s}
.mn-d.on .mn-d-s{scale:1}
/* riak: gelang mengembang & pudar sekali bila orang tiba di cakera */
.mn-d-r{fill:none;stroke:var(--tc);stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.mn-d.on .mn-d-r{animation:mnRipple .9s ease-out .05s}
@keyframes mnRipple{0%{opacity:.75;scale:.6}100%{opacity:0;scale:1.9}}
/* laluan pelaporan menyala (hover/tap): garisan rantai berwarna tingkat, orang lain dipudarkan */
.mn-ln-o{transition:stroke .3s,stroke-width .3s,opacity .3s}
.mn-ln-o.lit{stroke:var(--lc);stroke-width:7;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--lc) 55%,transparent))}
.mn.lit .mn-ln-o:not(.lit){opacity:.45}
.mn-p img,.mn-l{transition-property:opacity,transform,filter}
.mn.lit .mn-p:not(.chain) img{opacity:.38;filter:grayscale(.6)}
.mn.lit .mn-p:not(.chain) .mn-l{opacity:.45}
.mn.lit .mn-d:not(.hot){opacity:.55}
.mn-d{transition:scale .5s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.mn-p{position:absolute;width:0;height:0}
.mn-p img{position:absolute;left:0;bottom:-.4%;max-width:none;max-height:none;width:auto;translate:-50% 0;pointer-events:none;
  height:calc(var(--ph) * 1px * var(--k,1));opacity:0;transform:translateY(22px);transition:opacity .45s,transform .55s cubic-bezier(.3,1.4,.5,1)}
.mn-p.on img{opacity:1;transform:none}
.mn-p.hov img,.mn-p.open img{transform:translateY(-6px)}
.mn-p.half img{border-radius:50%;aspect-ratio:1;object-fit:cover}
/* video aksi hover: ganti gambar pegun bila sudah mula main; kembali ke gambar bila kursor beredar */
.mn-v{position:absolute;left:0;bottom:-.4%;width:auto;max-width:none;height:calc(var(--ph) * 1px * var(--k,1) * var(--vr,1));translate:-50% 0;pointer-events:none;
  opacity:0;transform:translateY(-6px);transition:opacity .25s}
.mn-p.play .mn-v{opacity:1}
.mn-p.play img{opacity:0 !important;transition-duration:.25s}
.mn-l{position:absolute;left:0;bottom:calc(var(--ph) * 1px * var(--k,1) + 6px);translate:-50% 0;display:grid;justify-items:center;gap:1px;width:max-content;max-width:min(150px,12.5vw);
  padding:0;border:0;background:none;font:inherit;color:var(--ink);text-align:center;cursor:pointer;opacity:0;transition:opacity .4s .15s}
.mn-p.on .mn-l{opacity:1}
.mn-l b{font-family:var(--display);font-size:clamp(.78rem,1.05vw,.98rem);line-height:1.2;color:var(--tc);
  text-shadow:0 0 2px var(--bg),0 0 4px var(--bg),0 0 6px var(--bg),0 0 8px var(--bg)}   /* halo: garisan di belakang tidak mengganggu nama */
/* nama sentiasa kelihatan; jawatan dalam cip di bawah cakera bila hover / tap / fokus papan kekunci */
.mn-l:focus-visible{outline:2px solid var(--tc);outline-offset:4px;border-radius:6px}
.mn-role{position:absolute;left:0;top:calc(var(--k,1) * 34px);translate:-50% 4px;width:max-content;max-width:min(200px,17vw);padding:5px 12px;border-radius:12px;
  background:var(--white);border-top:3px solid var(--tc);font-size:clamp(.64rem,.78vw,.74rem);line-height:1.3;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  text-align:center;color:var(--ink);box-shadow:0 0 0 1.5px var(--line),0 10px 18px -10px rgba(29,29,31,.5);opacity:0;pointer-events:none;transition:opacity .25s,translate .3s;z-index:1}
.mn-p.hov .mn-role,.mn-p.open .mn-role,.mn-p:focus-within .mn-role{opacity:1;translate:-50% 0}
.mn-p::before{content:"";position:absolute;left:0;bottom:0;width:calc(var(--ph) * .42px * var(--k,1));height:calc(var(--ph) * 1px * var(--k,1));translate:-50% 0;cursor:pointer}   /* kawasan tap = badan */
.mn-tl{font-family:var(--display);font-size:15px;fill:var(--muted);letter-spacing:.04em}
@media (max-width:760px){
  .mn{overflow-x:clip}
  .mn-l{max-width:30vw}
  .mn.lit .mn-p:not(.chain) img{opacity:.75;filter:grayscale(.3)}
  .mn.lit .mn-p:not(.chain) .mn-l{opacity:.7}
  .mn-l b{font-size:.8rem}
  .mn-role{max-width:34vw;font-size:.6rem;top:16px}
}
.mn-p.hov,.mn-p.open{z-index:2000 !important}   /* cip jawatan tidak dilindungi orang di barisan depan */
@media (prefers-reduced-motion:reduce){.mn-d,.mn-p img,.mn-l{transition:none}.mn-d.on .mn-d-r,.mn-ln-i.lit{animation:none}}
/* MGNET:END */
/* PINBOARD:START — Zone operations managers: papan gabus dengan polaroid (gaya thomasgertenbach.com). JS membina polaroid
   daripada senarai .zone-team: jatuh & dipin bila papan masuk skrin, boleh diseret (tetikus), seret/klik ke bingkai
   "Meet our zone manager" -> butiran di bawah bingkai. Telefon: tap polaroid -> butiran di bawah. Tanpa JS: kad grid
   biasa di atas papan. Saiz polaroid --cw (JS). */
.pb{margin:clamp(24px,4vw,48px) 0 clamp(48px,7vw,90px)}
.pb-board{position:relative;width:min(1240px,100%);margin-inline:auto;border-radius:clamp(18px,2.4vw,30px);overflow:hidden;
  background:#C99A63 url(../images/pinboard/gabus-s.webp?v=20261027) center/cover;
  box-shadow:inset 0 0 0 9px rgba(92,58,24,.14),inset 0 24px 40px -22px rgba(60,35,10,.5),0 30px 50px -36px rgba(60,35,10,.55)}
@media (min-width:1001px){.pb-board{background-image:url(../images/pinboard/gabus.webp?v=20261027)}}
.pb-head{position:relative;z-index:3;padding:clamp(22px,3vw,40px) clamp(20px,3vw,44px) 0;max-width:660px}
.pb .pb-head .team-title{margin:0;color:#FFF8EC;text-shadow:0 2px 0 rgba(90,55,20,.35),0 8px 24px rgba(60,35,10,.35)}
.pb .zone-lede{margin:10px 0 0;max-width:46ch;color:#FFF3E0;text-shadow:0 1px 3px rgba(60,35,10,.6)}
.pb .zone-team{margin:0;padding:24px}
.pb-frame,.pb-info{display:none}

/* papan aktif (JS) */
.pb-on .pb-board{aspect-ratio:16/9;min-height:560px;perspective:1600px}
.pb-on .zone-team{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pb-on .pb-head{position:absolute;z-index:0;left:0;bottom:0;padding:0 0 clamp(22px,3.2vw,44px) clamp(22px,3.4vw,48px);pointer-events:none}
.pb-on .pb-head .team-title{font-size:clamp(2.3rem,4.7vw,4.5rem);line-height:.92;letter-spacing:.01em;text-transform:uppercase}
.pb-on .pb-head .zone-lede{pointer-events:auto}
/* bingkai "Meet our zone manager" (tenggelam ke dalam papan, seperti bingkai di laman rujukan) */
.pb-on .pb-frame{display:block;position:absolute;left:73%;top:7%;width:22.5%;height:54%;border-radius:22px;background:rgba(110,70,30,.08);
  box-shadow:inset 0 0 0 2px rgba(80,48,18,.28),inset 0 12px 22px rgba(60,35,10,.28),0 1px 0 rgba(255,250,240,.4)}
.pb-on .pb-frame::before{content:attr(data-label);position:absolute;left:50%;top:-12px;translate:-50% 0;white-space:nowrap;padding:3px 12px;border-radius:999px;
  background:#FFF8EC;color:#7A4A1C;font-weight:800;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 4px 10px -6px rgba(60,35,10,.6)}
.pb-frame-hint{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-family:"Gochi Hand",var(--display);font-size:clamp(1rem,1.5vw,1.35rem);
  line-height:1.2;color:rgba(70,40,15,.62);transition:opacity .3s}
.pb-has .pb-frame-hint{opacity:0}
.pb-frame.hot{box-shadow:inset 0 0 0 3px #FFF8EC,inset 0 12px 22px rgba(60,35,10,.28),0 0 0 6px rgba(255,248,236,.35)}
.pb-on .pb-info{display:grid;position:absolute;left:72%;top:66%;width:24.5%;z-index:2;justify-items:center;gap:3px;padding:14px 16px;border-radius:16px;
  background:#FFFDF7;text-align:center;rotate:-1.5deg;box-shadow:0 18px 30px -18px rgba(40,20,0,.6);transition:opacity .3s,translate .45s cubic-bezier(.3,1.4,.5,1)}
.pb-on .pb-info:empty{opacity:0;translate:0 14px;pointer-events:none}
.pb-info .zc-zone{padding:2px 10px;border-radius:999px;background:var(--zc,#E8840E);color:#fff;font-weight:800;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.pb-info b{font-family:var(--display);font-size:clamp(.95rem,1.3vw,1.12rem);line-height:1.2;color:var(--ink)}
.pb-info span.zc-role{font-size:.8rem;color:var(--muted)}
.pb-info a{font-size:.8rem;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.pb-info a:hover{color:var(--red)}
/* polaroid */
.pb-card{--cw:150px;position:absolute;left:0;top:0;z-index:1;width:var(--cw);margin:0;padding:calc(var(--cw) * .07) calc(var(--cw) * .07) 0;border:0;border-radius:3px;
  background:linear-gradient(160deg,#FFFDF6,#F4EEDD);color:#262626;font:inherit;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;
  box-shadow:0 1px 1px rgba(40,20,0,.18),0 2px 4px -1px rgba(40,20,0,.2);
  will-change:transform;transform-origin:50% 50%;backface-visibility:hidden}
.pb-card.wait{visibility:hidden}
/* bayang di papan (elemen berasingan; JS gerakkan dengan transform & opacity sahaja supaya licin) */
/* WebGL: kanvas lutsinar di atas papan (tajuk & bingkai di bawahnya kelihatan); butang DOM tersembunyi untuk papan kekunci */
.pb-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;touch-action:pan-y}
.pb-gl .pb-info{z-index:3}
.pb-key{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);border:0;white-space:nowrap}
.pb-sh{position:absolute;left:0;top:0;border-radius:6px;background:rgba(48,24,4,.55);filter:blur(9px);opacity:0;pointer-events:none;will-change:transform,opacity;transform-origin:50% 50%}
.pb-card.lift{cursor:grabbing}
.pb-card:focus-visible{outline:3px solid #FFF8EC;outline-offset:4px}
.pb-ph{display:block;width:100%;aspect-ratio:1/1.08;object-fit:cover;object-position:50% 16%;background:#D9D2C4;pointer-events:none}
.pb-lbl{display:block;padding:.3em 0 .55em;font-family:"Gochi Hand",var(--display);font-size:calc(var(--cw) * .135);line-height:1.1;text-align:center;color:#2A2A2A;white-space:nowrap}
.pb-lbl.long{font-size:calc(var(--cw) * .105)}
.pb-pin{position:absolute;z-index:1;left:50%;top:calc(var(--cw) * -.17);width:calc(var(--cw) * .15);height:auto;translate:-50% 0;rotate:var(--pr,8deg);transform-origin:50% 100%;
  pointer-events:none;filter:drop-shadow(4px 6px 3px rgba(40,20,0,.35));scale:0;opacity:0;transition:scale .3s cubic-bezier(.3,1.8,.5,1),opacity .2s}
.pb-card.pinned:not(.lift):not(.infr) .pb-pin{scale:1;opacity:1}
.pb-card.sel{outline:3px solid #FFF8EC;outline-offset:0}

/* telefon / tablet: tiada bingkai; tap polaroid -> butiran di bawah */
@media (max-width:899px){
  .pb-on .pb-board{aspect-ratio:10/20.5;min-height:0}
  .pb-on .pb-head{top:0;bottom:auto;padding:22px 20px 0}
  .pb-on .pb-head .team-title{font-size:clamp(1.8rem,8vw,2.6rem)}
  .pb-on .zone-lede{font-size:.88rem}
  .pb-on .pb-frame{display:none}
  .pb-on .pb-info{left:5%;width:90%;top:auto;bottom:3.5%;rotate:-1deg}
  .pb-on .pb-info:empty{display:none}
}
/* Management team: papan kedua (lebih tinggi), tajuk di kiri atas, bingkai kanan atas, kad butiran di kiri tengah */
.pb-mg{margin-top:0}
.pb-mg.pb-on .pb-board{aspect-ratio:16/11}
.pb-mg.pb-on .pb-head{top:0;bottom:auto;padding:clamp(22px,3vw,40px) 0 0 clamp(22px,3.4vw,48px);max-width:34%}
.pb-mg.pb-on .pb-head .team-title{font-size:clamp(2rem,3.9vw,3.8rem)}
.pb-mg.pb-on .pb-frame{left:75%;top:7%;width:20%;height:36%}
.pb-mg.pb-on .pb-info{left:3.5%;top:31%;width:24%}
@media (max-width:899px){
  .pb-mg.pb-on .pb-board{aspect-ratio:10/30}
  .pb-mg.pb-on .pb-head{max-width:none;padding:22px 20px 0}
  .pb-mg.pb-on .pb-info{left:5%;width:90%;top:auto;bottom:1.5%}
}
@media (prefers-reduced-motion:reduce){.pb-pin,.pb-info{transition:none}}
/* PINBOARD:END */

/* HQTEAM:START — Our HQ team "Bangunan HQ" (gambar bangunan, bilik boleh diklik, zum + kad staff) */
.hqt{margin:clamp(56px,8vw,110px) 0 clamp(40px,6vw,80px)}
.hqt[hidden]{display:none}
.hq-head{text-align:center;max-width:640px;margin:0 auto}
.hq-head .team-title{margin-bottom:8px}
.hq-lede{color:var(--muted);margin:0 0 18px}
.hq-demo{display:table;margin:0 auto 18px;padding:6px 14px;border-radius:999px;background:#FFF2CC;border:1.5px dashed #E0A800;font-weight:800;font-size:.85rem;color:#7A5A00}
.hq-demo[hidden]{display:none}
.hq-wrap{position:relative;max-width:max(320px,calc((100svh - 130px) * 1.678));margin-inline:auto}   /* seluruh bangunan muat dalam satu skrin */
.hq-view{position:relative;overflow:hidden;border-radius:32px;background:#FAF7F2;box-shadow:inset 0 0 0 1px var(--line)}
.hq-scene{position:relative;transform-origin:0 0;transition:transform 1s cubic-bezier(.65,0,.25,1);container-type:inline-size}
.hq-img{display:block;width:100%;height:auto}
.hq-rooms{position:absolute;inset:0}
/* bilik */
.hq-room{position:absolute;padding:0;margin:0;border:0;background:transparent;cursor:pointer;border-radius:.4cqw;transition:box-shadow .45s,background .3s;outline:none}
.hq-room:hover,.hq-room:focus-visible{box-shadow:0 0 0 .3cqw #fff,0 0 0 .6cqw var(--c);background:rgba(255,255,255,.12)}
.hq-room.on{cursor:zoom-out}
.hq-room.hq-place{pointer-events:none;cursor:default}
.hq-rl[hidden]{display:none}
.hq-spot{position:absolute;z-index:3;pointer-events:none;border-radius:.4cqw;box-shadow:0 0 0 .3cqw #fff,0 0 0 300vmax rgba(24,22,30,.55);opacity:0;transition:opacity .45s}
.hq-spot.on{opacity:1}
.hq-room.hinted{box-shadow:0 0 0 .3cqw #fff,0 0 0 .6cqw var(--c);animation:hqPing 1.6s ease-out infinite}
.hq-hint{position:absolute;z-index:4;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.7cqw;pointer-events:none;animation:hqFadeIn .5s both;transition:opacity .35s}
.hq-hint.out{opacity:0}
.hq-hint i{width:3.4cqw;height:3.4cqw;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 0 0 0 rgba(255,255,255,.8);animation:hqTap 1.4s ease-out infinite}
.hq-hint b{font:800 max(12px,1.15cqw)/1.2 var(--body);color:#fff;background:var(--ink);padding:.6cqw 1.2cqw;border-radius:99px;white-space:nowrap;box-shadow:0 .4cqw 1cqw rgba(0,0,0,.3)}
@keyframes hqTap{0%{box-shadow:0 0 0 0 rgba(255,255,255,.85);scale:1}50%{scale:.85}100%{box-shadow:0 0 0 2.4cqw rgba(255,255,255,0);scale:1}}
@keyframes hqFadeIn{from{opacity:0;transform:translate(-50%,-30%)}}
.hq-toon.hl,.hq-toon.hq-flash{z-index:4}
.hq-toon.hl img,.hq-toon.hq-flash img{filter:drop-shadow(0 0 .2cqw #fff) drop-shadow(0 0 .6cqw #FFC72C)}
.hq-toon.hq-flash{animation:hqHop .5s ease-in-out 3}
@keyframes hqHop{50%{translate:0 -10%}}
.hq-c{cursor:pointer;transition:box-shadow .2s,border-color .2s}
.hq-c.hl,.hq-c.hq-flash{border-color:var(--c);box-shadow:0 0 0 2px var(--c)}
.hq-nav{position:absolute;right:52px;top:13px;display:flex;align-items:center;gap:4px}
.hq-nav button{width:34px;height:34px;border-radius:50%;border:0;background:var(--bg-2);font:700 1.15rem/1 var(--body);color:var(--ink);cursor:pointer}
.hq-nav button:hover:not(:disabled){background:var(--c);color:#fff}
.hq-nav button:disabled{opacity:.35;cursor:default}
.hq-nav button:focus-visible{outline:3px solid var(--star);outline-offset:2px}
.hq-nav small{font:800 .72rem var(--body);color:var(--muted);min-width:34px;text-align:center}
.hq-rl{position:absolute;left:50%;top:5%;transform:translateX(-50%);z-index:1;white-space:nowrap;font:800 max(9px,1.05cqw)/1 var(--body);color:var(--ink);background:#fff;padding:.42cqw .85cqw .42cqw .7cqw;border-radius:99px;box-shadow:0 .15cqw .5cqw rgba(0,0,0,.2);pointer-events:none}
.hq-rl::before{content:"";display:inline-block;width:.62em;height:.62em;border-radius:50%;background:var(--c);margin-right:.4em;vertical-align:.02em}
.hq-place .hq-rl{background:rgba(255,255,255,.62);color:#5A5A62;box-shadow:none;font-weight:700}
.hq-place .hq-rl::before{display:none}
.hq-room.hq-glbl{pointer-events:none}
.hq-gline{position:absolute;left:4%;right:4%;top:calc(5% + .55cqw);height:1.1cqw;border:.22cqw solid var(--c);border-bottom:0;border-radius:.5cqw .5cqw 0 0;opacity:.9}
.hq-ppl{position:absolute;left:50%;transform:translate(-50%,-92%);display:flex;pointer-events:none;z-index:2}
.hq-ppl .hq-av{width:3.1cqw;height:3.1cqw;margin-left:-.75cqw;border:.22cqw solid #fff;box-shadow:0 .3cqw .7cqw -.2cqw rgba(0,0,0,.45);font-size:1.15cqw;position:relative;pointer-events:auto}
.hq-ppl .hq-av:first-child{margin-left:0}
.hq-ppl .hq-av.ph{width:3.6cqw;height:3.6cqw;border-color:var(--star)}
.hq-ppl .hq-av.more{background:#fff;color:var(--ink);font-weight:800}
.hq-ppl .hq-av[data-n]:hover::after{content:attr(data-n);position:absolute;left:50%;bottom:calc(100% + .5cqw);transform:translateX(-50%);white-space:nowrap;font:700 max(10px,1cqw) var(--body);background:var(--ink);color:#fff;padding:.4cqw .8cqw;border-radius:.6cqw;z-index:3}
.hq-ppl .hq-av:hover{z-index:2}
.hq-ppl{align-items:flex-end;width:max-content}
.hq-ppl>*{flex:none}
.hq-toon img{max-width:none}
.hq-toon{position:relative;z-index:1;display:block;height:var(--th);margin:0 var(--m,-.35cqw);pointer-events:auto;transform-origin:50% 100%;font-style:normal}
.hq-toon img{display:block;height:100%;width:auto;filter:drop-shadow(0 .25cqw .3cqw rgba(0,0,0,.3))}
.hq-toon+.hq-av{margin-left:.4cqw}
.hq-toon:hover{z-index:3}
.hq-out{position:absolute;transform:translate(-50%,-100%);z-index:2;cursor:pointer}
.hq-toon.ld{z-index:2;height:calc(var(--th) * 1.1)}
.hq-ppl.bkrow{z-index:1}
.bkrow .hq-toon{height:calc(var(--th) * .86)}
.hq-av img.tn{object-fit:cover;object-position:50% 0;transform:scale(1.55);transform-origin:50% 10%}   /* kepala kartun penuh dalam bulatan */
.hq-toon:hover img{filter:drop-shadow(0 0 .25cqw #fff) drop-shadow(0 .25cqw .3cqw rgba(0,0,0,.3))}
.hq-toon[data-n]:hover::after{content:attr(data-n);position:absolute;left:50%;bottom:calc(100% + .4cqw);transform:translateX(-50%);white-space:nowrap;font:700 max(10px,1cqw) var(--body);background:var(--ink);color:#fff;padding:.4cqw .8cqw;border-radius:.6cqw;z-index:3}
.hq-toon[data-al=l]:hover::after,.hq-av[data-al=l]:hover::after{left:0;transform:none}
.hq-toon[data-al=r]:hover::after,.hq-av[data-al=r]:hover::after{left:auto;right:0;transform:none}
.hq-room.hit{animation:hqPing 1.4s ease-out infinite}
@keyframes hqPing{0%{box-shadow:0 0 0 0 var(--c)}70%{box-shadow:0 0 0 1.4cqw transparent}100%{box-shadow:0 0 0 0 transparent}}
/* masuk skrin: bangunan naik dari tanah, staff muncul tingkat demi tingkat */
.hq-wrap.pre .hq-img{clip-path:inset(100% 0 0 0)}
.hq-wrap.pre .hq-rl,.hq-wrap.pre .hq-ppl .hq-av,.hq-wrap.pre .hq-toon{opacity:0;scale:0}
.hq-wrap.pre .hq-gline{opacity:0}
.hq-wrap.pre.in .hq-gline{opacity:.9;transition:opacity .4s calc(1.3s + var(--f)*.3s)}
.hq-wrap.pre.in .hq-img{clip-path:inset(0 0 0 0);transition:clip-path 1.5s cubic-bezier(.65,0,.25,1)}
.hq-wrap.pre.in .hq-rl,.hq-wrap.pre.in .hq-ppl .hq-av,.hq-wrap.pre.in .hq-toon{opacity:1;scale:1;transition:opacity .3s,scale .5s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(1.1s + var(--f)*.3s + var(--i,0)*.07s)}
.hq-wrap.pre.in .hq-rl{transition-delay:calc(1.3s + var(--f)*.3s)}
.hq-ppl .hq-av{transform-origin:50% 100%}
.hq-back{position:absolute;left:14px;top:14px;z-index:3;font:800 .9rem var(--body);padding:9px 16px;border-radius:999px;border:0;background:#fff;color:var(--ink);box-shadow:var(--shadow);cursor:pointer}
.hq-back[hidden]{display:none}
/* direktori & carian */
.hq-bar{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-start;justify-content:space-between;margin-top:18px}
.hq-dir{display:grid;gap:8px;flex:1 1 560px}
.hq-fl{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hq-fl>span{width:96px;font:800 .72rem var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.hq-chip{font:700 .85rem var(--body);padding:6px 12px;border-radius:999px;border:2px solid var(--c);background:var(--white);color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.hq-chip:hover,.hq-chip[aria-pressed=true]{background:var(--c);color:#fff}
.hq-chip:focus-visible,.hq-find input:focus-visible,.hq-back:focus-visible,.hq-x:focus-visible{outline:3px solid var(--star);outline-offset:2px}
.hq-find input{font:600 .95rem var(--body);width:min(260px,100%);padding:10px 16px;border-radius:999px;border:2px solid var(--line);background:var(--white);color:var(--ink)}
/* kad bilik (desktop: di sebelah kanan atas gambar) & senarai carian */
.hq-panel:empty{display:none}
.hq-panel.hq-open{position:absolute;right:16px;top:16px;bottom:16px;width:min(40%,430px);overflow:auto;z-index:4;background:var(--white);border-radius:24px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);padding:0 18px 18px;animation:hqIn .5s .45s both;overscroll-behavior:contain}
.hq-panel.hq-open.top{bottom:auto;max-height:66%}
.hq-panel.list{margin-top:20px}
.hq-ph{position:sticky;top:0;z-index:1;background:var(--white);margin:0 -18px 6px;padding:16px 170px 12px 18px;border-bottom:4px solid var(--c)}
.hq-ph span{font:800 .7rem var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--c)}
.hq-ph h4{font:600 1.3rem var(--display);margin:2px 0 0}
.hq-x{position:absolute;right:12px;top:14px;width:34px;height:34px;border-radius:50%;border:0;background:var(--bg-2);cursor:pointer;font-size:.9rem}
.hq-pl{color:var(--muted);margin:10px 0}
.hq-u{margin:14px 0 18px}
.hq-u h5{font:600 1.02rem var(--display);color:var(--c);margin:0 0 10px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.hq-u h5 a,.hq-u h5 small{font:700 .78rem var(--body);color:var(--muted)}
.hq-u h6{font:800 .78rem var(--body);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:12px 0 8px}
.hq-u h6 small{font-weight:800;opacity:.7}
.hq-u ul{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.hq-c{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:16px;background:var(--white);border:1.5px solid var(--line)}
.hq-lead .hq-c{border-color:var(--c);background:color-mix(in srgb,var(--c) 7%,#fff)}
.hq-u ul.hq-lead{grid-template-columns:1fr}   /* kad ketua selebar kad */
.hq-c.hq-hd{border-color:var(--c)}
.hq-av{display:grid;place-items:center;flex:none;border-radius:50%;overflow:hidden;background:var(--c);color:#fff;font:600 1rem var(--display);font-style:normal}
.hq-av img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hq-c .hq-av{width:44px;height:44px}
.hq-c div{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hq-c b{font-size:.92rem;line-height:1.25}
.hq-c div span{font-size:.8rem;color:var(--muted);line-height:1.3}
.hq-c em{margin-top:3px;font:800 .62rem var(--body);font-style:normal;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--c);border-radius:999px;padding:2px 8px}
.hq-c mark{background:#FFE58A;color:inherit;border-radius:3px}
.hq-none{text-align:center;color:var(--muted);padding:24px 0}
@keyframes hqIn{from{opacity:0;transform:translateX(30px)}}
@media (max-width:760px){
  .hq-view{border-radius:20px;margin:0 calc(var(--gutter)*-.5)}
  .hq-view{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .hq-view::-webkit-scrollbar{display:none}
  .hq-scene{width:170%;transition:none}   /* telefon: bangunan 170% lebar, dileret */
  .hq-panel.hq-open{position:static;width:auto;max-height:none;margin-top:14px;padding:0 14px 14px;box-shadow:var(--shadow);animation:hqUp .45s both}
  .hq-panel.hq-open.top{max-height:none}
  .hq-ph{margin:0 -14px 6px;padding:14px 160px 10px 14px}
  .hq-back{left:8px;top:8px;font-size:.8rem;padding:7px 12px}
  .hq-fl>span{width:100%}
  .hq-find,.hq-find input{width:100%}
  .hq-u ul{grid-template-columns:1fr}
  @keyframes hqUp{from{opacity:0;transform:translateY(16px)}}
}
@media (prefers-reduced-motion:reduce){
  .hq-scene,.hq-room{transition:none}
  .hq-ppl .hq-av,.hq-toon,.hq-room.hit,.hq-room.hinted,.hq-hint,.hq-hint i,.hq-panel.hq-open{animation:none}
}
@media (min-width:761px) and (max-width:899px){
  .hq-panel.hq-open,.hq-panel.hq-open.top{position:static;width:auto;max-height:none;margin-top:14px;box-shadow:var(--shadow);animation:none}
}
/* HQTEAM:END */