:root{--navy:#08224d;--navy2:#041735;--yellow:#ffcc00;--gold:#f5b700;--text:#13233f;--muted:#61708a;--line:#e7ebf1;--soft:#f6f8fb;--white:#fff;--radius:16px;--shadow:0 12px 34px rgba(7,30,67,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:#fff;line-height:1.55}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.container{width:min(1180px,calc(100% - 40px));margin:auto}.skip-link{position:absolute;left:-9999px;top:0;background:#fff;padding:10px;z-index:999}.skip-link:focus{left:10px}.gov-strip{background:var(--yellow);font-size:12px;font-weight:800;text-transform:uppercase}.gov-strip__inner{display:flex;justify-content:space-between;align-items:center;min-height:34px}.gov-strip__links{display:flex;gap:22px;text-transform:none;font-weight:700}.site-header{background:#fff;border-bottom:1px solid #eef1f5;position:sticky;top:0;z-index:50}.site-header__inner{min-height:90px;display:flex;align-items:center;gap:28px}.brand{width:230px;flex:0 0 230px;display:flex;align-items:center}.brand img{width:100%;height:auto;max-height:68px;object-fit:contain;object-position:left center}.custom-logo{max-height:68px;width:auto}.site-nav{margin-left:auto}.site-nav__list{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;font-size:14px;font-weight:750}.site-nav__list a{padding:31px 0 27px;position:relative}.site-nav__list a:hover:after,.site-nav__list .current-menu-item a:after{content:"";position:absolute;left:0;right:0;bottom:21px;height:3px;border-radius:4px;background:var(--yellow)}.header-actions{display:flex;align-items:center;gap:18px}.lang{display:flex;gap:7px;font-size:12px;font-weight:800}.lang .active{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:5px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:9px;padding:13px 20px;font-weight:800;font-size:14px;border:1px solid transparent;cursor:pointer;transition:.2s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(6,30,68,.12)}.btn--yellow{background:var(--yellow);color:#111d33}.btn--navy{background:var(--navy);color:#fff}.btn--outline{background:#fff;border-color:var(--navy);color:var(--navy)}.btn--small{padding:10px 16px;font-size:12px}.full{width:100%}.menu-toggle{display:none;background:none;border:0;padding:8px}.menu-toggle span:not(.screen-reader-text){display:block;width:26px;height:2px;background:var(--navy);margin:5px}.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#fff 0%,#fff 48%,#eff4f9 100%)}.hero:after{content:"";position:absolute;width:220px;height:220px;background:var(--yellow);right:-70px;bottom:-150px;transform:rotate(25deg)}.hero-pattern{position:absolute;left:0;top:80px;width:140px;height:170px;opacity:.22;background-image:radial-gradient(#7a879b 1.5px,transparent 1.5px);background-size:13px 13px}.hero-grid{display:grid;grid-template-columns:1.02fr 1fr;align-items:center;min-height:470px}.hero-copy{padding:60px 0 70px;position:relative;z-index:2}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:900;color:#9a7500}.eyebrow.dark{color:#475875}.hero h1{margin:9px 0 18px;font-size:52px;line-height:1.06;letter-spacing:-.035em;text-transform:uppercase;color:var(--navy)}.hero h1 em{font-style:normal;color:var(--yellow)}.hero p{max-width:600px;font-size:17px;color:#43516a;margin:0 0 26px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}.text-link{font-weight:800;font-size:13px}.hero-media{position:relative;padding:42px 0 42px 35px}.hero-media:before{content:"";position:absolute;width:90px;height:240px;background:var(--yellow);left:13px;top:115px;transform:skewX(-28deg);z-index:0}.hero-media__frame{height:360px;border-radius:28px 0 0 28px;overflow:hidden;position:relative;z-index:1;box-shadow:var(--shadow)}.hero-media__frame img{width:100%;height:100%;object-fit:cover}.hero-media__frame:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,24,58,.05),rgba(3,24,58,.02))}.hero-badge{position:absolute;z-index:3;left:6px;bottom:62px;background:#fff;padding:13px 16px;border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column}.hero-badge strong{font-size:14px}.hero-badge span{font-size:11px;color:var(--muted)}
.section{padding:70px 0}.section-tight{padding:42px 0}.section-title{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:22px}.section-title span{height:1px;width:125px;background:#ccd4df}.section-title h2,.section-head h2{font-size:23px;text-transform:uppercase;color:var(--navy);margin:0}.quick{background:#fff}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.quick-card{background:#fff;border:1px solid #edf0f4;border-radius:14px;padding:25px;text-align:center;min-height:195px;box-shadow:0 9px 25px rgba(9,32,66,.055);transition:.2s}.quick-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.quick-card .icon{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;font-style:normal;font-size:20px}.yellow{background:#fff0a1}.blue{background:#cfe3ff}.green{background:#d7f0bd}.purple{background:#e4d7ff}.quick-card h3{font-size:17px;margin:0 0 5px;color:var(--navy)}.quick-card p{font-size:13px;color:var(--muted);margin:0 auto 12px;max-width:190px}.about{background:linear-gradient(180deg,#fbfcfe,#f6f8fb)}.about-grid{display:grid;grid-template-columns:1fr 1.55fr;gap:50px;align-items:center}.about-copy h2{font-size:34px;line-height:1.12;color:var(--navy);margin:8px 0 17px}.about-copy p{color:#53627b;font-size:14px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.stat{background:#fff;border-radius:13px;padding:24px 13px;text-align:center;box-shadow:0 8px 28px rgba(9,32,66,.06);border:1px solid #edf0f4}.stat i{font-style:normal;font-size:24px;display:block;margin-bottom:11px}.stat strong{display:block;color:var(--navy);font-size:25px;line-height:1.1}.stat span{display:block;text-transform:uppercase;font-size:9px;letter-spacing:.04em;font-weight:850;color:#52627b;margin-top:8px}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:20px}.section-head .eyebrow{display:block;margin-bottom:4px}.program-layout{display:grid;grid-template-columns:1fr 260px;gap:20px}.program-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.event-card{background:#fff;border:1px solid #e8edf3;border-radius:13px;overflow:hidden;box-shadow:0 8px 25px rgba(9,32,66,.05)}.event-image{height:150px;position:relative;overflow:hidden}.event-image img{width:100%;height:100%;object-fit:cover}.date-chip{position:absolute;left:10px;top:10px;background:var(--yellow);border-radius:7px;padding:6px 9px;font-size:10px;font-weight:900}.event-body{padding:15px}.event-body small{font-size:9px;color:#63728a;font-weight:900}.event-body h3{margin:4px 0;color:var(--navy);font-size:17px}.event-body p{font-size:12px;color:#63728a;margin:4px 0 14px}.calendar-card{border:1px solid #e5eaf1;background:#fff;border-radius:13px;padding:16px;box-shadow:0 8px 25px rgba(9,32,66,.05)}.calendar-top{display:flex;justify-content:space-between;align-items:center;font-size:12px}.calendar-month{text-align:center;font-size:11px;margin:9px 0 12px;color:#596980}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;text-align:center;font-size:9px;margin-bottom:14px}.calendar-days span,.calendar-days b{height:22px;display:grid;place-items:center;border-radius:50%}.calendar-days .active{background:var(--yellow);font-weight:900}.career{background:#fafbfc}.demo-note{font-size:11px;color:#718097}.job-search{background:var(--navy);border-radius:12px;padding:17px;color:#fff}.job-search>strong{display:block;font-size:14px;margin-bottom:9px}.job-search__form{display:grid;grid-template-columns:1.6fr 1fr 1fr auto;gap:8px}.job-search input,.job-search select{height:42px;border:0;border-radius:7px;padding:0 12px;background:#fff;color:#516079;font-size:12px}.career-grid{display:grid;grid-template-columns:1fr 220px;gap:18px;margin-top:15px}.job-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.job-card{display:flex;gap:10px;background:#fff;padding:14px;border:1px solid #e6ebf2;border-radius:10px}.job-logo{width:38px;height:38px;display:grid;place-items:center;background:#f2f6fb;border-radius:10px;flex:0 0 38px}.job-card small{font-size:8px;color:#75839a}.job-card h3{font-size:13px;color:var(--navy);margin:2px 0}.job-card p{font-size:9px;color:#6e7d93;margin:0 0 8px}.job-card a{font-size:10px;font-weight:800}.talent-card{background:#fff;border-radius:12px;border:1px solid #e5eaf1;text-align:center;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center}.talent-card>span{font-size:10px}.talent-card strong{font-size:28px;line-height:.85;margin:8px 0;color:#111}.talent-card strong em{font-style:normal;color:var(--gold)}.talent-card small{margin-bottom:14px}.service-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.service-card{border-radius:13px;overflow:hidden;min-height:125px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#eef3f8,#fff);border:1px solid #e8edf3;box-shadow:0 8px 24px rgba(9,32,66,.05);text-align:center;padding:15px;transition:.2s}.service-card:hover{transform:translateY(-3px)}.service-card span{font-size:31px;margin-bottom:9px}.service-card strong{font-size:12px;color:var(--navy)}.stories{background:#fafbfc}.stories-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:32px}.story-block h2,.news-block h2{font-size:23px;color:var(--navy);text-transform:uppercase;margin:3px 0 15px}.story-content{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}.story-image{position:relative;height:205px;overflow:hidden;border-radius:12px}.story-image img{width:100%;height:100%;object-fit:cover}.story-image button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;border:0;background:#fff;color:var(--navy);font-size:20px;box-shadow:var(--shadow)}.story-content h3{font-size:24px;line-height:1.08;margin:4px 0 10px;color:var(--navy)}.story-content p{font-size:12px;color:#65738a}.section-head.mini{align-items:flex-start}.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.news-grid article{background:#fff;border:1px solid #e6ebf2;border-radius:10px;overflow:hidden;padding-bottom:11px}.news-grid img{width:100%;height:110px;object-fit:cover}.news-grid small,.news-grid h3,.news-grid time{margin-left:11px;margin-right:11px}.news-grid small{display:inline-block;background:#ffdf55;padding:3px 6px;border-radius:4px;margin-top:9px;font-size:8px;font-weight:900}.news-grid h3{font-size:12px;line-height:1.35;color:var(--navy)}.news-grid time{font-size:9px;color:#75839a}.ask{background:linear-gradient(120deg,#fff8d7,#ffefab);overflow:hidden}.ask-inner{min-height:115px;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center}.bot{font-size:55px}.ask h2{margin:0;color:var(--navy);font-size:24px}.ask p{margin:4px 0 0;color:#5e6d83;font-size:12px}.site-footer{background:var(--navy2);color:#dbe4ef;padding:48px 0 0}.footer-grid{display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:32px}.footer-logo-panel{display:inline-flex;align-items:center;background:#fff;border-radius:10px;padding:10px 12px;margin-bottom:15px}.footer-logo{width:185px;height:auto;max-height:70px;object-fit:contain}.footer-grid h3{font-size:11px;text-transform:uppercase;color:#fff;margin:0 0 13px}.footer-grid p,.footer-grid a{font-size:11px;color:#c9d3e0}.footer-grid>div:not(:first-child) a{display:block;margin:7px 0}.socials{display:flex;gap:8px;margin-top:14px}.socials a{width:27px;height:27px;border:1px solid #576983;border-radius:50%;display:grid;place-items:center}.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:34px;padding:15px 0;display:flex;justify-content:space-between;font-size:9px;color:#9facbd}.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:1050px){.site-nav{display:none;position:absolute;top:90px;left:0;right:0;background:#fff;border-top:1px solid #eee;padding:20px}.site-nav.is-open{display:block}.site-nav__list{display:block}.site-nav__list a{display:block;padding:10px 0}.menu-toggle{display:block;margin-left:auto}.header-actions .btn span{display:none}.hero-grid{grid-template-columns:1fr 1fr}.hero h1{font-size:44px}.quick-grid{grid-template-columns:repeat(2,1fr)}.about-grid{grid-template-columns:1fr}.program-layout{grid-template-columns:1fr}.calendar-card{display:none}.career-grid{grid-template-columns:1fr}.talent-card{display:none}.job-grid{grid-template-columns:repeat(2,1fr)}.service-grid{grid-template-columns:repeat(3,1fr)}.stories-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.container{width:min(100% - 28px,1180px)}.gov-strip__links{display:none}.site-header__inner{min-height:72px;gap:15px}.brand{width:172px;flex-basis:172px}.brand img{max-height:54px}.header-actions{gap:8px}.header-actions .btn{display:none}.site-nav{top:72px}.hero-grid{grid-template-columns:1fr}.hero-copy{padding:50px 0 25px}.hero h1{font-size:39px}.hero p{font-size:15px}.hero-media{padding:0 0 32px}.hero-media__frame{height:245px;border-radius:20px}.hero-media:before{display:none}.hero-badge{left:10px;bottom:45px}.section{padding:50px 0}.section-tight{padding:34px 0}.quick-grid{grid-template-columns:1fr 1fr;gap:10px}.quick-card{padding:18px 12px;min-height:175px}.about-copy h2{font-size:29px}.stats-grid{grid-template-columns:1fr 1fr}.section-head{align-items:flex-start;flex-direction:column}.program-cards{grid-template-columns:1fr}.event-image{height:190px}.job-search__form{grid-template-columns:1fr}.job-grid{grid-template-columns:1fr}.service-grid{grid-template-columns:1fr 1fr}.story-content{grid-template-columns:1fr}.story-image{height:230px}.news-grid{grid-template-columns:1fr}.ask-inner{grid-template-columns:auto 1fr;padding:20px 0}.ask-inner .btn{grid-column:1/-1}.bot{font-size:44px}.ask h2{font-size:20px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:8px}.section-title span{width:45px}.section-title h2{font-size:18px;text-align:center}}
@media(max-width:440px){.quick-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.service-grid{grid-template-columns:1fr 1fr}.hero h1{font-size:34px}.hero-actions .btn{width:100%}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}}


/* Proposal polish v1.2 */
.news-read{display:inline-block;margin-top:10px;color:var(--navy);font-size:12px;font-weight:800;text-decoration:none}
.prototype-note{background:#f7f8fb;border-top:1px solid #e7eaf0;padding:14px 0}
.prototype-note p{margin:0;color:#667085;font-size:12px;line-height:1.55;text-align:center}
.prototype-note strong{color:#26324a}
@media (max-width:700px){.prototype-note p{text-align:left;font-size:11px}}

/* =========================================================
   PASAK 2026 HOMEPAGE PROPOSAL — V1.3 UI/UX POLISH
   ========================================================= */
:root{
  --navy:#08224d;
  --navy2:#041735;
  --yellow:#ffcc00;
  --text:#13233f;
  --muted:#5d6d84;
  --soft:#f6f8fb;
  --soft-blue:#f3f7fc;
  --line:#e4e9f0;
  --radius:16px;
  --shadow:0 14px 40px rgba(7,30,67,.09);
}
body{font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(255,204,0,.65);outline-offset:3px}
.btn{min-height:44px}
.btn-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* Header */
.gov-label{display:inline-flex;align-items:center;gap:7px}
.gov-label svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.site-header{transition:box-shadow .22s ease,background .22s ease}
.site-header__inner{transition:min-height .22s ease}
.brand,.brand img,.site-nav__list a{transition:.22s ease}
.site-header.is-scrolled{box-shadow:0 8px 28px rgba(8,34,77,.08)}
.site-header.is-scrolled .site-header__inner{min-height:72px}
.site-header.is-scrolled .brand{width:205px;flex-basis:205px}
.site-header.is-scrolled .brand img{max-height:56px}
.site-header.is-scrolled .site-nav__list a{padding-top:22px;padding-bottom:20px}
.site-header.is-scrolled .site-nav__list a:hover:after,.site-header.is-scrolled .site-nav__list .current-menu-item a:after{bottom:15px}
.portal-btn svg{width:17px;height:17px}

/* Hero */
.hero-grid{grid-template-columns:.92fr 1.08fr;min-height:525px}
.hero-copy{padding:76px 0 82px}
.hero h1{font-size:56px;line-height:1.04;margin-bottom:20px}
.hero p{font-size:16px;line-height:1.7;max-width:570px}
.hero-media{padding-left:52px}
.hero-media__frame{height:405px}
.hero-media:before{height:275px;width:102px;left:20px;top:126px}
.hero-badge{bottom:74px;padding:14px 18px}

/* Section rhythm */
.section{padding:86px 0}
.section-tight{padding:58px 0}
.section-head{margin-bottom:28px}
.section-title{margin-bottom:30px}
.section-title h2,.section-head h2{font-size:25px;letter-spacing:-.015em}
.eyebrow{font-size:11px;letter-spacing:.14em}
.text-link{display:inline-flex;align-items:center;gap:4px}

/* Quick access */
.quick-card{min-height:210px;padding:28px 22px;border-color:#e8edf3;box-shadow:0 10px 28px rgba(9,32,66,.055)}
.quick-card .icon{width:52px;height:52px;border-radius:16px;margin-bottom:16px}
.quick-card .icon svg{width:27px;height:27px;fill:none;stroke:#08224d;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon--yellow{background:#fff0a1}.icon--blue{background:#dceaff}.icon--green{background:#dcf1c8}.icon--purple{background:#eadfff}
.quick-card h3{font-size:18px}.quick-card p{font-size:14px;line-height:1.55}.quick-card b{font-size:18px;color:var(--navy)}

/* About / impact */
.about{background:var(--soft)}
.about-grid{grid-template-columns:.9fr 1.1fr;gap:62px}
.about-copy h2{font-size:37px}.about-copy p{font-size:15px;line-height:1.75}
.impact-panel{display:grid;grid-template-columns:220px 1fr;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;min-height:270px}
.impact-feature{background:linear-gradient(145deg,#08224d,#0b326d);color:#fff;padding:34px 28px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.impact-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.12);margin-bottom:22px}
.impact-icon svg{width:25px;height:25px;fill:none;stroke:#ffcc00;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.impact-feature strong{font-size:48px;line-height:1;color:#ffcc00}.impact-feature span:last-child{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-top:10px}
.impact-list{display:flex;flex-direction:column;justify-content:center;padding:22px 28px}
.impact-list>div{display:flex;align-items:center;gap:16px;padding:17px 0;border-bottom:1px solid #edf0f4}.impact-list>div:last-child{border-bottom:0}
.impact-mini{width:42px;height:42px;border-radius:12px;background:#f2f6fb;display:grid;place-items:center;flex:0 0 42px}
.impact-mini svg{width:22px;height:22px;fill:none;stroke:var(--navy);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.impact-list p{margin:0}.impact-list strong{display:block;color:var(--navy);font-size:15px}.impact-list small{display:block;color:var(--muted);font-size:12px;margin-top:2px}

/* Upcoming programmes */
.programs{background:#fff}
.program-layout{grid-template-columns:1fr 275px;gap:24px}
.program-cards{gap:18px}
.event-card{border-radius:16px;transition:transform .2s ease,box-shadow .2s ease}.event-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.event-image{height:176px}.event-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,23,53,0) 45%,rgba(4,23,53,.18))}
.date-chip{display:none}
.date-badge{position:absolute;z-index:2;left:14px;top:14px;width:56px;height:61px;border-radius:12px;background:var(--yellow);color:#101b31;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.date-badge strong{font-size:24px;line-height:1}.date-badge span{font-size:10px;font-weight:900;margin-top:3px;letter-spacing:.06em}
.event-body{padding:18px}.event-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px}.event-meta small{font-size:9px;letter-spacing:.06em;color:#5f6f86}.status{font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.035em;padding:5px 7px;border-radius:999px;white-space:nowrap}.status--open{background:#e7f7e9;color:#28783a}.status--soon{background:#eef2f7;color:#57677c}
.event-body h3{font-size:18px;margin:4px 0 7px}.event-body p{font-size:12px;display:flex;align-items:center;gap:5px;margin-bottom:16px}.event-body p svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.calendar-card{border-radius:16px;padding:18px}.calendar-top{font-size:13px}.calendar-month{font-size:12px}.calendar-days{font-size:10px;gap:8px}.calendar-days span,.calendar-days b{height:25px}

/* Career Hub */
.career{background:var(--soft-blue);position:relative;overflow:hidden}.career:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(255,204,0,.08);right:-180px;top:-220px;pointer-events:none}
.career .container{position:relative;z-index:1}
.career-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-bottom:26px}.career-intro h2{margin:4px 0 7px;color:var(--navy);font-size:32px;line-height:1.15}.career-intro p{margin:0;color:var(--muted);font-size:14px}.talent-inline{text-align:right;display:flex;flex-direction:column;align-items:flex-end}.talent-inline span{font-size:10px;color:#718097;text-transform:uppercase;font-weight:800;letter-spacing:.06em}.talent-inline strong{font-size:22px;color:#111;line-height:1;margin-top:7px}.talent-inline em{font-style:normal;color:#d6a500}
.job-search{padding:22px;border-radius:16px;box-shadow:0 14px 30px rgba(8,34,77,.12)}.job-search>label{display:block;font-size:14px;font-weight:800;margin-bottom:11px}
.job-search__form{grid-template-columns:1.6fr 1fr 1fr auto;gap:10px}.job-search input,.job-search select{height:46px;font-size:13px;border:1px solid rgba(255,255,255,.2)}
.field{background:#fff;border-radius:7px;display:flex;align-items:center;padding-left:12px}.field svg{width:18px;height:18px;fill:none;stroke:#77869a;stroke-width:1.8;flex:0 0 18px}.field input{width:100%;padding-left:9px}
.job-section-head{display:flex;justify-content:space-between;align-items:center;margin:28px 0 14px}.job-section-head h3{margin:0;color:var(--navy);font-size:18px}
.job-grid--featured{grid-template-columns:repeat(4,1fr);gap:14px}.job-card{padding:18px 16px;border-radius:14px;min-height:178px;transition:.2s ease}.job-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(9,32,66,.08)}.job-logo{width:44px;height:44px;flex-basis:44px;border-radius:12px}.job-logo svg{width:23px;height:23px;fill:none;stroke:var(--navy);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.job-card small{font-size:9px;font-weight:900;letter-spacing:.05em}.job-card h3{font-size:15px;margin:3px 0 2px}.job-card p{font-size:11px;margin-bottom:9px}.job-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.job-meta span{font-size:9px;background:#f2f5f9;color:#617088;padding:4px 7px;border-radius:999px}.job-card a{font-size:11px;margin-top:auto;display:inline-block}

/* Programme explorer */
.services{background:#fff}.service-grid{gap:16px}.service-card{min-height:190px;align-items:flex-start;text-align:left;padding:24px 20px;background:#fff;border-radius:16px}.service-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}.service-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#f2f6fb;margin-bottom:17px}.service-icon svg{width:25px;height:25px;fill:none;stroke:var(--navy);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.service-card strong{font-size:15px;margin-bottom:7px}.service-card small{color:var(--muted);font-size:11px;line-height:1.5;min-height:34px}.service-card b{font-size:11px;color:var(--navy);margin-top:13px}

/* Human interest + news */
.stories{background:var(--soft)}.stories-grid{grid-template-columns:1.08fr .92fr;gap:42px}.story-block h2,.news-block h2{font-size:25px}.story-content{grid-template-columns:1.2fr .8fr;gap:24px;align-items:stretch}.story-image{height:300px;border-radius:16px}.story-image button{width:62px;height:62px;font-size:22px}.story-copy{display:flex;flex-direction:column;justify-content:center}.story-tag{font-size:9px;font-weight:900;letter-spacing:.06em;color:#9a7500;margin-bottom:8px}.story-content h3{font-size:31px}.story-content p{font-size:13px;line-height:1.65;margin-bottom:18px}
.news-grid{gap:12px}.news-grid article{border-radius:13px;padding-bottom:14px}.news-grid img{height:128px}.news-grid small,.news-grid h3,.news-grid time,.news-grid .news-read{margin-left:13px;margin-right:13px}.news-grid h3{font-size:13px;min-height:53px}.news-grid time{display:block;font-size:10px;color:#75839a;margin-top:8px}.news-read{font-size:11px;margin-top:11px}

/* Prototype note & assistant */
.prototype-note{background:#fff;border-top:1px solid var(--line);padding:14px 0}.prototype-note p{font-size:11px}
.ask{background:linear-gradient(120deg,#fff9de,#ffefac)}.ask-inner{min-height:132px}.bot{width:66px;height:66px;border-radius:20px;background:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(9,32,66,.08)}.bot svg{width:54px;height:54px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ask h2{font-size:26px}.ask p{font-size:13px}

/* White footer */
.site-footer{background:#fff;color:#46566f;padding:52px 0 0;border-top:4px solid var(--yellow)}
.footer-logo-panel{display:inline-flex;align-items:center;background:transparent;border-radius:0;padding:0;margin-bottom:18px}.footer-logo{width:190px;max-height:72px}
.footer-grid{gap:36px}.footer-grid h3{font-size:11px;color:var(--navy);font-weight:900}.footer-grid p,.footer-grid a{font-size:11px;color:#53627b;line-height:1.7}.footer-grid a:hover{color:var(--navy)}
.socials a{border:1px solid #d5dce6;color:var(--navy);transition:.2s ease}.socials a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.contact-line{display:flex;gap:8px;align-items:flex-start;margin:8px 0}.contact-line svg{width:15px;height:15px;flex:0 0 15px;margin-top:2px;fill:none;stroke:#9a7500;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.footer-bottom{border-top:1px solid #e3e8ef;color:#718096;align-items:center}.footer-bottom a,.footer-bottom p,.footer-bottom span{color:#718096}

/* Responsive */
@media(max-width:1050px){
  .site-header.is-scrolled .site-header__inner{min-height:72px}.site-header.is-scrolled .brand{width:190px;flex-basis:190px}
  .hero-grid{grid-template-columns:1fr 1fr}.hero h1{font-size:46px}.hero-media__frame{height:365px}
  .about-grid{grid-template-columns:1fr;gap:35px}.impact-panel{max-width:760px}
  .program-layout{grid-template-columns:1fr}.calendar-card{display:none}
  .job-grid--featured{grid-template-columns:repeat(2,1fr)}
  .service-grid{grid-template-columns:repeat(3,1fr)}
  .stories-grid{grid-template-columns:1fr}.story-content{grid-template-columns:1.2fr .8fr}
  .footer-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  body{font-size:14px}.section{padding:62px 0}.section-tight{padding:46px 0}
  .site-header.is-scrolled .brand{width:160px;flex-basis:160px}.site-header.is-scrolled .brand img{max-height:50px}
  .hero-grid{grid-template-columns:1fr}.hero-copy{padding:54px 0 30px}.hero h1{font-size:39px}.hero p{font-size:15px}.hero-media{padding:0 0 36px}.hero-media__frame{height:270px}.hero-badge{bottom:49px}
  .quick-grid{grid-template-columns:1fr 1fr}.quick-card{min-height:190px;padding:20px 14px}.quick-card .icon{width:48px;height:48px}.quick-card p{font-size:12px}
  .about-copy h2{font-size:30px}.impact-panel{grid-template-columns:1fr}.impact-feature{padding:28px}.impact-feature strong{font-size:42px}.impact-list{padding:10px 24px}
  .section-head h2,.section-title h2{font-size:21px}.event-image{height:210px}
  .career-intro{align-items:flex-start;flex-direction:column}.career-intro h2{font-size:28px}.talent-inline{text-align:left;align-items:flex-start}.job-search{padding:18px}.job-search__form{grid-template-columns:1fr}.field{height:46px}.job-search input{height:44px}.job-search .btn{width:100%}
  .job-section-head{align-items:flex-start;gap:10px}.job-grid--featured{grid-template-columns:1fr}.job-card{min-height:150px}
  .service-grid{grid-template-columns:1fr 1fr}.service-card{min-height:170px;padding:20px 16px}
  .story-content{grid-template-columns:1fr}.story-image{height:270px}.story-content h3{font-size:28px}.news-grid{grid-template-columns:1fr}
  .ask-inner{grid-template-columns:auto 1fr;padding:25px 0}.ask-inner .btn{grid-column:1/-1;width:100%}.ask h2{font-size:21px}.bot{width:58px;height:58px}.bot svg{width:46px;height:46px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-grid>div:first-child{grid-column:1/-1}.footer-bottom{align-items:flex-start}
}
@media(max-width:440px){
  .container{width:min(100% - 30px,1180px)}.hero h1{font-size:34px}.hero-actions .btn{width:100%}
  .quick-grid{grid-template-columns:1fr}.quick-card{min-height:auto;padding:22px}
  .service-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-right:-15px;padding-right:15px;padding-bottom:8px}.service-card{min-width:78%;scroll-snap-align:start}
  .program-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-right:-15px;padding-right:15px;padding-bottom:8px}.event-card{min-width:88%;scroll-snap-align:start}.event-image{height:200px}
  .footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}
}


/* =========================================================
   PASAK 2026 HOMEPAGE PROPOSAL — V1.4 FINAL PRESENTATION POLISH
   ========================================================= */

/* Slightly stronger hero depth without changing the approved composition */
.hero-media__frame{
  box-shadow:0 18px 45px rgba(6,26,58,.14);
}

/* Clear next step after featured job vacancies */
.jobs-all-btn{
  min-height:38px;
  padding:8px 14px;
  white-space:nowrap;
  font-size:11px;
}

/* Improve footer readability on a real display */
.footer-grid h3{
  font-size:12px;
}
.footer-grid p,
.footer-grid a{
  font-size:12px;
}
.footer-bottom{
  font-size:10px;
}

/* Clean proposal screenshot mode: /?proposal-shot=1 */
body.proposal-shot .site-header{
  position:relative !important;
  top:auto !important;
  box-shadow:none !important;
}
@media(min-width:721px){
  body.proposal-shot .site-header__inner{
    min-height:90px !important;
  }
  body.proposal-shot .brand{
    width:230px !important;
    flex-basis:230px !important;
  }
  body.proposal-shot .brand img{
    max-height:68px !important;
  }
  body.proposal-shot .site-nav__list a{
    padding-top:31px !important;
    padding-bottom:31px !important;
  }
}

/* Mobile-first refinement: programme cards become swipeable before they get cramped */
@media(max-width:720px){
  .program-cards{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px;
    margin-right:-16px;
    padding-right:16px;
    padding-bottom:10px;
    scrollbar-width:none;
  }
  .program-cards::-webkit-scrollbar{display:none}
  .event-card{
    min-width:min(84vw,360px);
    scroll-snap-align:start;
  }
  .event-image{height:215px}

  .job-section-head{
    align-items:center;
  }
  .jobs-all-btn{
    min-height:40px;
  }

  .footer-grid p,
  .footer-grid a{
    font-size:13px;
  }
}

@media(max-width:560px){
  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .hero-actions .btn{
    width:100%;
    justify-content:center;
  }
  .job-section-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .jobs-all-btn{
    width:100%;
    justify-content:center;
  }
}

/* =========================================================
   V1.4.1 — PROPOSAL SCREENSHOT RELIABILITY FIX
   Full-page browser screenshots do not always trigger
   IntersectionObserver for off-screen reveal elements.
   Force all proposal content visible in screenshot mode.
   ========================================================= */
body.proposal-shot .reveal,
body.proposal-shot .reveal.visible{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

/* Also remove smooth animation timing while capturing */
body.proposal-shot *,
body.proposal-shot *::before,
body.proposal-shot *::after{
  animation:none !important;
  scroll-behavior:auto !important;
}

/* =========================================================
   V1.4.2 — FINAL DESKTOP POLISH
   1) Keep Tanya PASAK CTA permanently visible in normal and
      proposal-shot modes (no reveal dependency).
   2) Give the AI CTA stronger hierarchy and reliable layout.
   3) Increase footer PASAK logo presence slightly.
   ========================================================= */
.ask{
  position:relative;
  display:block;
  background:linear-gradient(120deg,#fff9de 0%,#ffefac 100%);
  overflow:hidden;
  border-bottom:1px solid rgba(241,193,0,.25);
}
.ask::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-90px;
  top:-135px;
  border-radius:50%;
  background:rgba(255,255,255,.28);
  pointer-events:none;
}
.ask-inner,
body.proposal-shot .ask-inner{
  position:relative;
  z-index:2;
  min-height:132px;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:24px;
  align-items:center;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}
.ask-inner > *{
  opacity:1 !important;
  visibility:visible !important;
}
.ask .bot{
  width:66px;
  height:66px;
  flex:0 0 66px;
  border-radius:20px;
  background:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 10px 24px rgba(9,32,66,.08);
}
.ask .bot svg{
  width:54px;
  height:54px;
  fill:none;
  stroke:var(--navy);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ask h2{
  margin:0;
  color:var(--navy);
  font-size:26px;
  line-height:1.12;
}
.ask p{
  margin:6px 0 0;
  color:#5e6d83;
  font-size:13px;
  line-height:1.55;
}
.ask .btn{
  position:relative;
  z-index:3;
  min-width:158px;
  justify-content:center;
}
.footer-logo{
  width:210px;
  max-width:100%;
  max-height:78px;
}

@media(max-width:720px){
  .ask-inner,
  body.proposal-shot .ask-inner{
    grid-template-columns:auto minmax(0,1fr);
    gap:16px;
    padding:24px 0;
  }
  .ask .bot{
    width:58px;
    height:58px;
  }
  .ask .bot svg{
    width:46px;
    height:46px;
  }
  .ask h2{
    font-size:21px;
  }
  .ask p{
    font-size:12px;
  }
  .ask .btn{
    grid-column:1/-1;
    width:100%;
  }
  .footer-logo{
    width:190px;
  }
}

/* =========================================================
   V1.5.0 — MOBILE UX OVERHAUL
   Target: 360–430px phones, while preserving approved desktop.
   ========================================================= */
@media (max-width:720px){
  /* Mobile header: keep it in normal document flow so full-page
     captures do not duplicate/stitch the sticky header. */
  .gov-strip{
    font-size:9px;
    letter-spacing:.015em;
  }
  .gov-strip__inner{
    min-height:28px;
    justify-content:center;
    text-align:center;
  }
  .gov-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
  }
  .gov-label svg{
    width:12px;
    height:12px;
    flex:0 0 12px;
  }
  .gov-strip__links{display:none!important}

  .site-header{
    position:relative!important;
    top:auto!important;
    box-shadow:none!important;
  }
  .site-header__inner{
    min-height:68px;
    gap:8px;
    position:relative;
  }
  .brand,
  .site-header.is-scrolled .brand{
    width:146px;
    flex:0 0 146px;
  }
  .brand img,
  .site-header.is-scrolled .brand img{
    max-height:48px;
  }
  .header-actions{
    order:2;
    margin-left:auto;
    gap:6px;
  }
  .header-actions .btn{display:none!important}
  .lang{
    font-size:10px;
    gap:5px;
  }
  .menu-toggle{
    order:3;
    display:block;
    margin-left:2px!important;
    padding:8px 4px;
    min-width:38px;
    min-height:38px;
  }
  .menu-toggle span:not(.screen-reader-text){
    width:23px;
    margin:4px auto;
  }
  .site-nav{
    top:100%!important;
    left:0;
    right:0;
    padding:10px 15px 16px;
    border-top:1px solid var(--line);
    box-shadow:0 14px 30px rgba(8,34,77,.12);
    z-index:100;
  }
  .site-nav__list{
    font-size:13px;
  }
  .site-nav__list a{
    padding:11px 4px!important;
    border-bottom:1px solid #f0f3f7;
  }
  .site-nav__list li:last-child a{border-bottom:0}
  .site-nav__list a:after{display:none!important}

  /* Hero: retain impact but reduce vertical bulk. */
  .hero-pattern{
    width:95px;
    height:120px;
    top:42px;
  }
  .hero-grid{min-height:0}
  .hero-copy{
    padding:38px 0 22px;
  }
  .hero h1{
    font-size:clamp(31px,8.7vw,38px);
    line-height:1.02;
    margin:8px 0 15px;
    letter-spacing:-.04em;
  }
  .hero p{
    font-size:14px;
    line-height:1.6;
    margin-bottom:18px;
  }
  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
    margin-bottom:15px;
  }
  .hero-actions .btn{
    width:100%;
    min-height:46px;
    justify-content:center;
    font-size:13px;
  }
  .hero .text-link{font-size:11px}
  .hero-media{
    padding:0 0 30px;
  }
  .hero-media__frame{
    height:235px;
    border-radius:18px;
  }
  .hero-badge{
    left:12px;
    bottom:42px;
    padding:10px 12px;
    border-radius:10px;
  }
  .hero-badge strong{font-size:11px}
  .hero-badge span{font-size:9px}
  .hero:after{
    width:145px;
    height:145px;
    right:-55px;
    bottom:-102px;
  }

  /* More efficient section rhythm on phones. */
  .section{padding:48px 0}
  .section-tight{padding:34px 0}
  .section-title{
    gap:12px;
    margin-bottom:18px;
  }
  .section-title span{width:38px}
  .section-title h2{
    font-size:17px;
    white-space:nowrap;
  }
  .section-head{
    gap:8px;
    margin-bottom:16px;
  }
  .section-head h2{font-size:21px}

  /* Quick access: 2x2 instead of a very long single column. */
  .quick-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px;
  }
  .quick-card{
    min-height:160px!important;
    padding:17px 10px!important;
    border-radius:13px;
  }
  .quick-card .icon{
    width:44px!important;
    height:44px!important;
    margin-bottom:11px;
    border-radius:13px;
  }
  .quick-card .icon svg{
    width:23px;
    height:23px;
  }
  .quick-card h3{
    font-size:14px;
    line-height:1.25;
    margin-bottom:5px;
  }
  .quick-card p{
    font-size:10.5px!important;
    line-height:1.45;
    max-width:145px;
    margin-bottom:7px;
  }
  .quick-card b{font-size:15px}

  /* About: keep the strong 10+ panel, make supporting rows compact. */
  .about-grid{gap:26px}
  .about-copy h2{
    font-size:27px;
    line-height:1.08;
  }
  .about-copy p{
    font-size:13px;
    line-height:1.65;
  }
  .impact-panel{
    border-radius:16px;
    min-height:0;
  }
  .impact-feature{
    padding:22px 20px;
  }
  .impact-icon{
    width:40px;
    height:40px;
    margin-bottom:15px;
  }
  .impact-feature strong{font-size:38px}
  .impact-feature span:last-child{font-size:9px}
  .impact-list{padding:6px 18px}
  .impact-list>div{
    padding:13px 0;
    gap:11px;
  }
  .impact-mini{
    width:36px;
    height:36px;
    flex-basis:36px;
  }
  .impact-list strong{font-size:13px}
  .impact-list small{font-size:10px}

  /* Upcoming programmes: swipe cards with a clearer peek of next card. */
  .program-cards{
    display:flex!important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:0;
    gap:12px;
    margin-right:-14px;
    padding-right:14px;
    padding-bottom:9px;
    scrollbar-width:none;
  }
  .program-cards::-webkit-scrollbar{display:none}
  .event-card{
    flex:0 0 84%;
    min-width:0!important;
    scroll-snap-align:start;
  }
  .event-image{height:185px!important}
  .date-badge{
    width:50px;
    height:55px;
    left:11px;
    top:11px;
  }
  .date-badge strong{font-size:21px}
  .event-body{padding:15px}
  .event-body h3{font-size:16px}

  /* Career Hub: compact search + horizontally swipeable jobs. */
  .career:before{
    width:230px;
    height:230px;
    right:-130px;
    top:-95px;
  }
  .career-intro{
    gap:13px;
    margin-bottom:18px;
  }
  .career-intro h2{
    font-size:25px;
    line-height:1.1;
  }
  .career-intro p{
    font-size:12px;
    line-height:1.55;
  }
  .talent-inline strong{font-size:19px}
  .talent-inline span{font-size:8px}
  .job-search{
    padding:15px;
    border-radius:14px;
  }
  .job-search>label{font-size:12px}
  .job-search__form{gap:7px}
  .field,
  .job-search input,
  .job-search select{
    min-height:44px;
    height:44px;
  }
  .job-search .btn{
    min-height:44px;
    font-size:13px;
  }
  .job-section-head{
    align-items:center!important;
    flex-direction:row!important;
    margin:20px 0 12px;
    gap:8px;
  }
  .job-section-head h3{font-size:15px}
  .jobs-all-btn{
    width:auto!important;
    min-height:34px!important;
    padding:6px 9px;
    font-size:9px;
  }
  .job-grid--featured{
    display:flex!important;
    grid-template-columns:none!important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:11px;
    margin-right:-14px;
    padding-right:14px;
    padding-bottom:8px;
    scrollbar-width:none;
  }
  .job-grid--featured::-webkit-scrollbar{display:none}
  .job-grid--featured .job-card{
    flex:0 0 82%;
    min-width:0;
    min-height:155px!important;
    scroll-snap-align:start;
    padding:16px 14px;
  }
  .job-card h3{font-size:14px}
  .job-card p{font-size:10.5px}
  .job-meta span{font-size:8.5px}

  /* PASAK programme explorer: swipe, but show enough of card 2
     to signal that the row is interactive. */
  .service-grid{
    display:flex!important;
    grid-template-columns:none!important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:11px;
    margin-right:-14px;
    padding-right:14px;
    padding-bottom:8px;
    scrollbar-width:none;
  }
  .service-grid::-webkit-scrollbar{display:none}
  .service-card{
    flex:0 0 72%;
    min-width:0!important;
    min-height:160px!important;
    padding:18px 15px!important;
    scroll-snap-align:start;
  }
  .service-icon{
    width:42px;
    height:42px;
    margin-bottom:12px;
  }
  .service-card strong{font-size:13px}
  .service-card small{
    font-size:10px;
    min-height:0;
  }
  .service-card b{
    font-size:10px;
    margin-top:9px;
  }

  /* Human interest remains a strong full-width feature. */
  .stories-grid{gap:34px}
  .story-block h2,
  .news-block h2{font-size:21px}
  .story-image{
    height:225px!important;
    border-radius:14px;
  }
  .story-image button{
    width:54px;
    height:54px;
  }
  .story-content h3{
    font-size:25px!important;
    line-height:1.06;
  }
  .story-content p{
    font-size:12px;
    line-height:1.6;
  }

  /* News: horizontal carousel rather than three long stacked cards. */
  .news-grid{
    display:flex!important;
    grid-template-columns:none!important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:11px;
    margin-right:-14px;
    padding-right:14px;
    padding-bottom:8px;
    scrollbar-width:none;
  }
  .news-grid::-webkit-scrollbar{display:none}
  .news-grid article{
    flex:0 0 78%;
    min-width:0;
    scroll-snap-align:start;
  }
  .news-grid img{height:145px}
  .news-grid h3{
    font-size:12px;
    min-height:46px;
  }

  /* Prototype note: readable but unobtrusive. */
  .prototype-note{padding:10px 0}
  .prototype-note p{
    font-size:9px;
    line-height:1.45;
    margin:0;
  }

  /* AI CTA: prevent crowding and guarantee a visible action button. */
  .ask-inner,
  body.proposal-shot .ask-inner{
    min-height:0;
    grid-template-columns:48px minmax(0,1fr)!important;
    gap:12px!important;
    padding:18px 0!important;
  }
  .ask .bot{
    width:48px!important;
    height:48px!important;
    border-radius:14px;
  }
  .ask .bot svg{
    width:38px!important;
    height:38px!important;
  }
  .ask h2{
    font-size:17px!important;
    line-height:1.12;
  }
  .ask p{
    font-size:10px!important;
    line-height:1.45;
    margin-top:4px;
  }
  .ask .btn{
    grid-column:1/-1!important;
    width:100%!important;
    min-width:0!important;
    min-height:42px;
    font-size:12px;
  }

  /* Footer: retain useful links without an excessively long one-column stack. */
  .site-footer{padding-top:34px}
  .footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:24px 18px!important;
  }
  .footer-grid>div:first-child{
    grid-column:1/-1!important;
  }
  .footer-grid>div:last-child{
    grid-column:1/-1!important;
  }
  .footer-logo,
  body .footer-logo{
    width:155px!important;
    max-height:58px!important;
  }
  .footer-logo-panel{margin-bottom:12px}
  .footer-grid h3{
    font-size:10px!important;
    margin-bottom:8px;
  }
  .footer-grid p,
  .footer-grid a{
    font-size:11px!important;
    line-height:1.55;
  }
  .footer-grid div:not(:first-child) a{
    margin:5px 0;
  }
  .socials{margin-top:11px}
  .socials a{
    width:30px;
    height:30px;
  }
  .contact-line{margin:6px 0}
  .footer-bottom{
    margin-top:24px;
    padding:13px 0 16px;
    gap:6px;
    font-size:9px!important;
  }
}

@media (max-width:390px){
  .container{width:calc(100% - 24px)!important}
  .brand,
  .site-header.is-scrolled .brand{
    width:136px;
    flex-basis:136px;
  }
  .hero h1{font-size:30px}
  .quick-card{min-height:154px!important}
  .quick-card p{font-size:10px!important}
  .event-card{flex-basis:88%}
  .job-grid--featured .job-card{flex-basis:86%}
  .service-card{flex-basis:76%}
  .news-grid article{flex-basis:82%}
}

/* =========================================================
   V1.6.0 — FINAL MOBILE / CLIENT-FACING POLISH
   Builds on V1.5 without changing the approved desktop layout.
   ========================================================= */
@media (max-width:720px){
  /* Slightly improve legibility on real phones without making
     the page significantly longer. */
  .hero p{font-size:14.5px}
  .quick-card p{font-size:11.5px!important;line-height:1.5}
  .about-copy p{font-size:14px;line-height:1.65}
  .impact-list small{font-size:11px;line-height:1.4}
  .event-body small{font-size:10px}
  .event-body p{font-size:11.5px}

  /* Career Hub: make Talent Perak a supporting integration label,
     not a competing heading. */
  .career-intro{gap:10px;margin-bottom:16px}
  .career-intro p{font-size:13px;line-height:1.55}
  .talent-inline{
    width:100%;
    display:flex;
    flex-direction:row!important;
    align-items:baseline!important;
    justify-content:flex-start;
    gap:5px;
    text-align:left!important;
    white-space:nowrap;
  }
  .talent-inline span{
    font-size:9.5px!important;
    text-transform:none!important;
    letter-spacing:0!important;
    font-weight:700;
    color:#718097;
  }
  .talent-inline strong{
    font-size:13px!important;
    margin:0!important;
    letter-spacing:.015em;
  }

  .job-card p{font-size:11.5px}
  .job-meta span{font-size:9.5px}
  .job-card a{font-size:11px}

  .service-card small{font-size:11px;line-height:1.45}
  .service-card b{font-size:10.5px}

  .story-content p{font-size:13px;line-height:1.6}
  .news-grid h3{font-size:12.5px;line-height:1.4}
  .news-grid time{font-size:10px}
  .news-read{font-size:10.5px}

  .ask p{font-size:11px!important}

  .footer-grid h3{font-size:11px!important}
  .footer-grid p,
  .footer-grid a{font-size:12px!important;line-height:1.6}
  .footer-bottom{font-size:9.5px!important}

  /* All swipe rows use consistent touch momentum and always show a
     deliberate peek of the next card. */
  .program-cards,
  .job-grid--featured,
  .service-grid,
  .news-grid{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    scroll-behavior:smooth;
  }
}

@media (max-width:390px){
  .quick-card p{font-size:11px!important}
  .footer-grid p,
  .footer-grid a{font-size:11.5px!important}
}


/* =========================================================
   V1.7.0 — POLYLANG BM/EN + FINAL DATE BADGE PRESERVATION
   ========================================================= */
.date-badge{
  width:42px!important;
  height:42px!important;
  box-sizing:border-box!important;
  left:10px!important;
  top:10px!important;
  padding:0!important;
  border-radius:8px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:1px!important;
}
.date-badge strong{display:block!important;font-size:17px!important;line-height:17px!important;font-weight:900!important;margin:0!important;padding:0!important}
.date-badge span{display:block!important;font-size:7px!important;line-height:8px!important;font-weight:800!important;margin:0!important;padding:0!important;letter-spacing:.02em!important}

/* English labels are often a little longer. Keep approved card layouts stable. */
.pasak-lang-en .quick-card h3,
.pasak-lang-en .event-body h3,
.pasak-lang-en .service-card strong{hyphens:auto}
.pasak-lang-en .header-actions{flex-shrink:0}
.pasak-lang-en .site-nav__list{column-gap:20px}

@media(max-width:720px){
  .date-badge{width:38px!important;height:38px!important;left:8px!important;top:8px!important;border-radius:7px!important}
  .date-badge strong{font-size:15px!important;line-height:15px!important}
  .date-badge span{font-size:6px!important;line-height:7px!important}
  .pasak-lang-en .hero h1{font-size:31px}
  .pasak-lang-en .quick-card h3{font-size:12.5px}
}


/* =========================================================
   PASAK v1.7.1 - HERO IMAGE UPDATE
   Uses the approved talent / Perak landmark visual.
   The asset already contains the left yellow graphic accent,
   so the older generated accent behind the photo is removed.
   ========================================================= */
.hero-media:before{display:none!important}
.hero-media__frame img{object-position:center center}

/* =========================================================
   PASAK 2026 V1.7.2 - HERO VISUAL FINAL
   Match approved hero concept: clean copy left + premium Perak talent visual right
   ========================================================= */

/* Keep decorative dots subtle and closer to the outer page edge. */
.hero-pattern{
    left:-54px !important;
    top:66px !important;
    width:150px !important;
    height:170px !important;
    opacity:.16 !important;
    background-size:13px 13px !important;
}

/* The approved hero artwork already carries the yellow geometry.
   Remove the older theme decorations to prevent duplicate/off-balance shapes. */
.hero:after,
.hero-media:before{
    display:none !important;
}

.hero{
    background:linear-gradient(105deg,#ffffff 0%,#ffffff 52%,#f3f7fb 100%) !important;
}

.hero-grid{
    grid-template-columns:.92fr 1.08fr !important;
    gap:46px !important;
    min-height:560px !important;
    align-items:center !important;
}

.hero-copy{
    padding:72px 0 78px !important;
}

.hero h1{
    font-size:56px !important;
    line-height:1.03 !important;
    letter-spacing:-.04em !important;
    margin:10px 0 20px !important;
}

.hero p{
    max-width:560px !important;
    font-size:16px !important;
    line-height:1.72 !important;
    margin-bottom:26px !important;
}

.hero-media{
    padding:44px 0 44px 12px !important;
}

.hero-media__frame{
    height:430px !important;
    border-radius:26px !important;
    overflow:hidden !important;
    background:#fff !important;
    box-shadow:0 22px 52px rgba(6,26,58,.14) !important;
}

.hero-media__frame img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    image-rendering:auto !important;
}

/* No extra dark overlay on the brighter approved artwork. */
.hero-media__frame:after{
    display:none !important;
}

.hero-badge{
    left:-4px !important;
    bottom:72px !important;
    padding:13px 16px !important;
    border-radius:12px !important;
    box-shadow:0 14px 34px rgba(6,26,58,.14) !important;
}

/* Medium desktop/tablet */
@media (max-width:1180px){
    .hero-grid{
        grid-template-columns:1fr 1fr !important;
        gap:28px !important;
        min-height:510px !important;
    }
    .hero h1{font-size:46px !important;}
    .hero-media__frame{height:370px !important;}
    .hero-media{padding-left:8px !important;}
}

/* Mobile: retain the same visual language without side decorations. */
@media (max-width:820px){
    .hero-pattern{
        left:-72px !important;
        top:84px !important;
        opacity:.10 !important;
    }
    .hero-grid{
        grid-template-columns:1fr !important;
        gap:0 !important;
        min-height:0 !important;
    }
    .hero-copy{
        padding:48px 0 24px !important;
    }
    .hero h1{
        font-size:39px !important;
        line-height:1.04 !important;
    }
    .hero p{
        font-size:14px !important;
        line-height:1.65 !important;
    }
    .hero-media{
        padding:0 0 34px !important;
    }
    .hero-media__frame{
        height:290px !important;
        border-radius:20px !important;
    }
    .hero-badge{
        left:10px !important;
        bottom:48px !important;
    }
}

@media (max-width:520px){
    .hero-pattern{display:none !important;}
    .hero-copy{padding-top:38px !important;}
    .hero h1{font-size:34px !important;}
    .hero-media__frame{
        height:260px !important;
        border-radius:18px !important;
    }
    .hero-badge{
        left:8px !important;
        bottom:44px !important;
        padding:10px 12px !important;
    }
    .hero-badge strong{font-size:12px !important;}
    .hero-badge span{font-size:9px !important;}
}