/* Poster-inspired accents on a consistently white interface. */
:root{color-scheme:light;--brand-red:#c90818;--brand-red-hover:#a50614;--brand-blue:#0752ac;--brand-navy:#061c43;--white:#fff;--ink:#102340;--muted:#59677c;--line:#dce3ed;--orange:var(--brand-red);--orange-hover:var(--brand-red-hover);--forest:#fff;--soft:#f4f7fc;--img-frame:#f4f7fc;--shadow-header:0 1px 0 #dce3ed,0 10px 30px -22px #061c4320}
::selection{background:#f9dce0;color:var(--brand-navy)}
body,.site-header,.event-section{background:#fff;color:var(--ink)}
.brand strong,.footer-brand,h1,h2,.industry-copy h3{color:var(--brand-navy)}
.site-header .brand--logo{display:flex;flex-direction:row;align-items:center;line-height:1}
.site-header .brand--logo img{display:block;width:176px;height:auto}
.js .site-header.is-stuck .brand--logo img{width:140px}
.button,.event-section .button{background:var(--brand-blue);color:#fff}
.button:hover,.event-section .button:hover{background:var(--brand-navy)}
.button--orange,.industry-copy>.button{background:var(--brand-red);color:#fff}
.button--orange:hover,.industry-copy>.button:hover{background:var(--brand-red-hover)}
.button .icon,.invitation .button .icon{color:inherit}
.button--ghost{background:#fff;color:var(--brand-blue);border-color:#b8c9e0}
.button--ghost:hover{background:var(--soft);color:var(--brand-navy);border-color:var(--brand-blue)}
.text-link,.back-top,.event-poster figcaption a,.equipment-detail a{color:var(--brand-blue);border-color:#a9bfde}
.text-link:hover,.industry-links a:hover,.equipment-detail a:hover{color:var(--brand-red);border-color:var(--brand-red)}
.industry{background:#fff;color:var(--ink);border-block:1px solid var(--line)}
.industry .section-heading>p,.industry-copy>p{color:var(--muted)}
.industry-tabs,.industry-links,.industry-links li{border-color:var(--line)}
.industry-tab{color:var(--muted)}
.industry-tab[aria-selected=true],.industry-tab:hover{color:var(--brand-blue)}
.industry-tab[aria-selected=true]{border-bottom-color:var(--brand-red)}
.js .industry-tabs::after{background:var(--brand-red)}
.industry-links .icon{color:var(--brand-blue)}
#industry .industry-photo figcaption{color:var(--muted);background:#fff}
.equipment-list{background:var(--soft);border:1px solid var(--line)}
.equipment-chip{background:#fff;color:var(--brand-blue);border-color:#b8c9e0}
.equipment-chip[aria-pressed=true]{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue)}
.equipment-dot{background:var(--brand-blue)}
.equipment-dot[aria-pressed=true]{background:var(--brand-red)}
.equipment-detail{background:#fff;color:var(--ink);border:1px solid var(--line);border-top:0}
.equipment-detail .explore-eyebrow,.role-profile .explore-eyebrow,.learning-panel .explore-eyebrow{color:var(--brand-blue)}
.equipment-dot:focus-visible,.equipment-chip:focus-visible,.pathway-select select:focus-visible{outline-color:var(--brand-red)}
.role-profile,.learning-panel{background:var(--soft);color:var(--ink)}
.learning-panel{border-left-color:var(--brand-red)}
.pathway-select select{background:#fff;color:var(--ink);border-color:#b8c9e0}
.search-box,.career-levels section,.pathway-steps,.event-facts{border-color:var(--line)}
.pathway-steps li::before,.hero-media figcaption::before{background:var(--line)}
.detail-index{color:var(--brand-blue)}
.finder-dialog,.finder-dialog-body,.finder-modal .step-actions{background:#fff}
.finder-dialog-head{background:#fff;border-top:4px solid var(--brand-red);border-bottom:1px solid var(--line);color:var(--ink)}
.finder-dialog-head #finder-modal-title{color:var(--brand-navy)}
.finder-brand-label{color:var(--brand-blue)}
.finder-head-note{color:var(--muted)}
.finder-close{background:var(--soft);color:var(--brand-blue);border-color:var(--line)}
.finder-close:hover{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue)}
.finder-backdrop{background:#061c4370}
.chip,.route,.result-card,.result-empty{background:#fff}
.chip span::before{border-color:#8d9eb7}
.chip:has(input:checked) span::before{box-shadow:inset 0 0 0 3px #fff}
.finder-modal .route-list li:first-child .route{background:#f4f7fc;border-color:var(--brand-blue)}
.finder-modal .route-list li:first-child .route-title::before{color:var(--brand-blue)}
.finder-modal .finder-progress .is-done{border-color:var(--brand-blue)}
.finder-progress .is-done span{color:var(--brand-blue)}
.event-section{border-top:1px solid var(--line)}
.event-section h2 span{color:var(--brand-red)}
.event-kicker,.event-message,.event-facts dt{color:var(--brand-blue)}
.event-journey li span{color:var(--brand-red);border-color:#c5d2e5;background:#fff}
.event-registration{color:var(--muted)}
.skip-link{background:var(--brand-blue);color:#fff}
/* Keep images and the white brand theme unchanged by OS dark mode. */
@media(prefers-color-scheme:dark){img{filter:none}}
.header-inner{column-gap:22px}.language-switch{flex-shrink:0;order:3;border:1px solid var(--line);border-radius:6px;padding:3px;gap:2px;background:#fff}.js .language-switch{display:flex}.language-switch button{border:0;background:transparent;color:var(--brand-blue);font-size:12px;font-weight:800;padding:10px 11px;border-radius:3px;min-height:40px}.language-switch button[aria-pressed=true]{background:var(--brand-blue);color:#fff}.language-switch button:hover{background:var(--soft);color:var(--brand-blue)}.language-switch button[aria-pressed=true]:hover{background:var(--brand-navy);color:#fff}
html[lang=ms] .hero h1{font-size:clamp(44px,5.6vw,84px)}html[lang=ms] .hero h1 span{white-space:normal}html[lang=ms] .primary-nav{gap:18px}
@media(min-width:701px) and (max-width:1200px){.header-inner{flex-wrap:wrap;padding-block:14px;gap:14px}.primary-nav{order:4;width:100%;justify-content:space-between}.language-switch{margin-left:auto}}
@media(max-width:700px){.language-switch{order:0;margin-left:auto}.nav-toggle{order:1}.primary-nav{order:2}.header-inner{column-gap:10px}.language-switch button{padding:8px;min-height:36px}.site-header .brand--logo img,.js .site-header.is-stuck .brand--logo img{width:136px}.brand strong{font-size:21px}.brand span{font-size:7px}html[lang=ms] .hero h1{font-size:clamp(42px,10vw,66px)}html[lang=ms] .industry-tab{font-size:14px}}
html[lang=ms] .finder-modal .route-list li:first-child .route-title::before{content:'CADANGAN PERMULAAN'}
.career-detail summary{grid-template-columns:54px 1fr 120px 26px;gap:18px}.career-thumbnail{display:block;width:120px;height:80px;object-fit:cover;border-radius:5px}.role-profile img{height:auto;min-height:0;aspect-ratio:3/2;object-fit:cover;align-self:center}.result-photo{object-position:center 42%}
@media(max-width:700px){.career-detail summary{grid-template-columns:24px 1fr 64px 20px;gap:9px;font-size:17px}.career-thumbnail{width:64px;height:56px}.role-profile img{height:auto;aspect-ratio:3/2}.career-detail .detail-index{font-size:16px}}
@media(max-width:360px){.career-detail summary{grid-template-columns:20px 1fr 48px 18px;gap:7px;font-size:15px}.career-thumbnail{width:48px;height:48px}}

/* Institution logos. Marks sit on white, so no box or border is added.
   If a logo file is absent the <img> removes itself and the text
   alignment below still holds.
   TVETMARA is a stacked two-line lockup with a smaller cap-height, so it
   is set a little shorter than MOGC to keep the pair optically even. */
.institution-brand{display:flex;align-items:center;gap:12px;min-width:0}
.institution-logo{display:block;width:auto;object-fit:contain;flex-shrink:0}
.institution-logo[src*=mogc]{height:34px}
.institution-logo[src*=tvetmara]{height:30px}
/* Heights above are the standalone-layout defaults; sections.css trims
   them so the strip fits inside the first viewport. */
.footer-institution-wrap{display:flex;align-items:center;gap:18px;min-width:0}
.footer-logos{display:flex;align-items:center;gap:16px;flex-shrink:0}
.footer-logos:empty{display:none}
.footer-logos img{display:block;width:auto;object-fit:contain}
.footer-logos img[src*=mogc]{height:38px}
.footer-logos img[src*=tvetmara]{height:33px}
@media(max-width:700px){
  .institution-brand{gap:9px}
  .institution-logo[src*=mogc]{height:27px}
  .institution-logo[src*=tvetmara]{height:24px}
  .institution-brand+.institution-brand{margin-top:12px}
  .footer-institution-wrap{gap:14px}
  .footer-logos{gap:13px}
  .footer-logos img[src*=mogc]{height:32px}
  .footer-logos img[src*=tvetmara]{height:28px}
}