/* ═══════════════════════════════════════════════════════════
   corporatetraining.my — site shell, 2026 design
   Same tokens as /Home and /ai-training so every page reads as one site.
   Shell classes are prefixed ct- so they never collide with Bootstrap,
   which still loads on legacy pages (Training-detail, Privacy-Policy …).
   ═══════════════════════════════════════════════════════════ */
:root{
  --paper:#FBFAF8; --paper-2:#F3F1ED; --card:#FFFFFF;
  --rule:#E4E0D9;  --rule-soft:#EFECE6;
  --ink:#17191D;   --ink-2:#4C525C;   --ink-3:#6E747E;
  --red:#E51313;   --red-ink:#B70F0F; --red-wash:#FDF0EF;
  --teal:#0E7A8C;  --teal-wash:#EAF5F7;
  --green:#1C7550; --green-wash:#EAF5F0;
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
.ct-skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:8px 14px;border-radius:6px}
.ct-skip:focus{left:12px}

.ct-wide{max-width:1120px;margin-inline:auto;padding-inline:22px}
.ct-read{max-width:720px}
.ct-eyebrow{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.ct h1,.ct h2,.ct h3,.ct-pagehead h1{font-family:var(--f-display);margin:0;line-height:1.16;letter-spacing:-.015em;text-wrap:balance;color:var(--ink)}
.ct p{margin:0}

/* ── Buttons ── */
.ct-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1.2 var(--f-body);
  padding:13px 22px;min-height:46px;border-radius:8px;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .15s ease,border-color .15s ease}
.ct-btn svg{flex:none}
.ct-btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.ct-btn-primary:hover{background:#C61010;color:#fff}
.ct-btn-wa{background:var(--green);color:#fff;border-color:var(--green)}
.ct-btn-wa:hover{background:#155C3E;color:#fff}
.ct-btn-quiet{background:var(--card);color:var(--ink);border-color:var(--rule)}
.ct-btn-quiet:hover{border-color:var(--ink-3);color:var(--ink)}
.ct-btn-sm{font-size:14px;padding:10px 16px;min-height:42px}
.ct-btn-icon{width:46px;padding:0}

/* ── Header + nav (same as /Home) ── */
.ct-topbar{position:sticky;top:0;z-index:40;background:rgba(251,250,248,.95);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule-soft);font-family:var(--f-body)}
.ct-topbar .ct-wide{display:flex;align-items:center;gap:20px;min-height:72px}
.ct-brand{margin-right:auto;line-height:0;text-decoration:none}
.ct-brand img{width:158px;height:auto;display:block}
.ct-nav{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.ct-nav > li{position:relative}
.ct-nav > li > a,.ct-nav > li > button{display:flex;align-items:center;gap:6px;font:500 15px var(--f-body);
  color:var(--ink-2);text-decoration:none;background:none;border:0;padding:10px 12px;border-radius:6px;cursor:pointer;line-height:1.3}
.ct-nav > li > a:hover,.ct-nav > li > button:hover,.ct-nav > li > a[aria-current]{color:var(--ink);background:var(--paper-2)}
.ct-nav .is-ai > button{color:var(--ink);font-weight:600}
.ct-caret{font-size:10px;color:var(--ink-3);transition:transform .15s ease}
.ct-nav li.open > button .ct-caret{transform:rotate(180deg)}
.ct-nav li.open > button{color:var(--ink);background:var(--paper-2)}
.ct-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:280px;background:var(--card);
  border:1px solid var(--rule);border-radius:12px;padding:10px;box-shadow:0 12px 34px rgba(23,25,29,.10);display:none}
.ct-nav li.open > .ct-menu{display:block}
.ct-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.ct-menu.two{grid-template-columns:1fr 1fr;gap:4px 14px;min-width:560px}
.ct-nav li.open > .ct-menu.two{display:grid}
.ct-nav li:not(.open) > .ct-menu{display:none!important}
.ct-menu-h{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:8px 10px 4px}
.ct-menu a{display:block;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;padding:9px 12px;border-radius:8px;line-height:1.35}
.ct-menu a:hover{background:var(--paper-2);color:var(--ink)}
.ct-menu a small{display:block;font-size:12.5px;font-weight:400;color:var(--ink-3);margin-top:1px}
.ct-menu .all{grid-column:1/-1;border-top:1px solid var(--rule-soft);margin-top:6px;padding-top:10px;font-weight:600;color:var(--red-ink)}
.ct-nav-toggle{display:none;background:none;border:1px solid var(--rule);border-radius:8px;padding:8px 12px;
  font:500 14px var(--f-body);cursor:pointer;color:var(--ink)}
@media (max-width:900px){
  .ct-nav-toggle{display:block}
  .ct-topbar .ct-btn-sm{display:none}
  .ct-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--card);border-bottom:1px solid var(--rule);padding:10px 16px 18px;max-height:80vh;overflow:auto}
  .ct-topbar.nav-open .ct-nav{display:flex}
  .ct-menu,.ct-menu.two{position:static;box-shadow:none;border:0;padding:0 0 8px 10px;min-width:0}
  .ct-nav li.open > .ct-menu.two{grid-template-columns:1fr}
}

/* ── Page head (replaces the old wave banner) ── */
.ct-pagehead{padding-block:56px 40px;border-bottom:1px solid var(--rule-soft);background:var(--paper)}
.ct-pagehead .ct-eyebrow{margin-bottom:12px}
.ct-pagehead h1{font-size:clamp(30px,4.6vw,46px);font-weight:700}
.ct-lede{font-size:19px;color:var(--ink-2);margin-top:14px;max-width:680px}
.ct-pagehead .ct-actions{margin-top:24px}

/* ── Sections ── */
.ct-section{padding-block:56px}
.ct-band{background:var(--paper-2);border-block:1px solid var(--rule-soft)}
.ct-dark{background:var(--ink);color:#fff}
.ct-dark h2,.ct-dark h3{color:#fff}
.ct-dark p{color:#C9CDD3}
.ct-h2{font-size:clamp(24px,3.4vw,32px);font-weight:700}
.ct-sub{color:var(--ink-2);margin-top:8px;max-width:640px}
.ct-head{margin-bottom:28px}
.ct-actions{display:flex;flex-wrap:wrap;gap:10px}
.ct-split{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.ct-split > div{flex:1 1 480px}

/* ── Grids & cards ── */
.ct-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.ct-grid-sm{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.ct-card{background:var(--card);border:1px solid var(--rule);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;color:var(--ink);transition:border-color .15s ease,transform .15s ease}
a.ct-card:hover{border-color:var(--ink-3);transform:translateY(-2px);color:var(--ink)}
.ct-media{position:relative;background:var(--paper-2);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ct-media.poster{aspect-ratio:4/5}
.ct-media img{width:100%;height:100%;object-fit:contain;display:block}
.ct-media.cover img{object-fit:cover}
.ct-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.ct-body h3{font-size:19px;font-weight:600;line-height:1.3}
.ct-meta{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.ct-note{font-size:14.5px;color:var(--ink-2)}
.ct-card .ct-actions{margin-top:auto;padding-top:8px}
.ct-card .ct-actions .ct-btn-wa{flex:1}
.ct-go{font-size:14.5px;font-weight:600;color:var(--red-ink);margin-top:auto;white-space:nowrap}

.ct-datebadge{position:absolute;top:12px;left:12px;background:var(--red);color:#fff;border-radius:10px;padding:7px 11px;
  display:flex;flex-direction:column;align-items:center;line-height:1.05}
.ct-datebadge b{font-family:var(--f-display);font-size:24px}
.ct-datebadge span{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em}
.ct-pill{position:absolute;top:12px;right:12px;background:var(--ink);color:#fff;border-radius:999px;padding:5px 11px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.05em}
.ct-ran{position:absolute;left:0;right:0;bottom:0;background:rgba(23,25,29,.86);color:#fff;padding:7px 10px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.ct-past .ct-media img{filter:grayscale(.85);opacity:.8}
.ct-tag{display:inline-block;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--green);background:var(--green-wash);border-radius:4px;padding:2px 7px;align-self:flex-start}

.ct-empty{background:var(--card);border:1px dashed var(--rule);border-radius:14px;padding:32px;text-align:left}
.ct-empty h3{font-size:22px;font-weight:700;margin-bottom:8px}
.ct-empty p{color:var(--ink-2);margin-bottom:18px}

/* ── Lists, info cards ── */
.ct-ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ct-ticks li{padding-left:28px;position:relative;color:var(--ink-2)}
.ct-ticks li::before{content:"→";position:absolute;left:0;color:var(--red-ink);font-family:var(--f-mono)}
.ct-info{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:6px}
.ct-info h3{font-size:20px;font-weight:600}
.ct-info a:not(.ct-btn){color:var(--red-ink);font-weight:600;text-decoration:none}
.ct-logos{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.ct-logos div{background:var(--card);border:1px solid var(--rule);border-radius:10px;aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;padding:14px}
.ct-logos img{max-height:100%;object-fit:contain}

/* ── Gallery + lightbox ── */
.ct-gallery{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.ct-gallery a{display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--paper-2)}
.ct-gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease}
.ct-gallery a:hover img{transform:scale(1.03)}
.ct-lightbox{border:0;padding:0;background:transparent;max-width:min(1100px,94vw);max-height:92vh}
.ct-lightbox::backdrop{background:rgba(10,11,13,.86)}
.ct-lightbox img{max-width:100%;max-height:86vh;display:block;border-radius:8px}
.ct-lightbox button{position:fixed;top:14px;right:14px;background:#fff;border:0;border-radius:999px;width:44px;height:44px;font-size:20px;cursor:pointer}
.ct-video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.ct-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── Forms ── */
.ct-form{display:grid;gap:16px}
.ct-form .row2{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media (max-width:600px){.ct-form .row2{grid-template-columns:1fr}}
.ct-field{display:flex;flex-direction:column;gap:6px}
.ct-field label{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.ct-field input,.ct-field textarea,.ct-field select{font:16px var(--f-body);color:var(--ink);background:var(--card);
  border:1px solid var(--rule);border-radius:8px;padding:12px 14px;min-height:48px}
.ct-field input:focus,.ct-field textarea:focus{outline:2px solid var(--red);outline-offset:0;border-color:transparent}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Prose (DB descriptions on detail pages) ── */
.ct-prose{color:var(--ink-2)}
.ct-prose h1,.ct-prose h2,.ct-prose h3,.ct-prose h4{font-family:var(--f-display);color:var(--ink);margin:1.4em 0 .5em;line-height:1.25}
.ct-prose p{margin:0 0 1em}
.ct-prose ul,.ct-prose ol{padding-left:1.3em;margin:0 0 1em}
.ct-prose table{border-collapse:collapse;width:100%;margin:0 0 1em;font-size:15px}
.ct-prose td,.ct-prose th{border:1px solid var(--rule);padding:8px 10px;vertical-align:top}

/* ── Floating WhatsApp ── */
.ct-float{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;align-items:center;gap:8px;background:var(--green);color:#fff;
  text-decoration:none;font:600 15px var(--f-body);padding:12px 16px;border-radius:999px;box-shadow:0 8px 24px rgba(23,25,29,.22)}
.ct-float:hover{background:#155C3E;color:#fff}
@media (max-width:640px){.ct-float span{display:none}.ct-float{padding:14px}}

/* ── Footer (same as /Home, no address by policy) ── */
.ct-footer{border-top:1px solid var(--rule);padding-block:38px;background:var(--paper-2);font-family:var(--f-body)}
.ct-footer .ct-wide{display:flex;justify-content:space-between;align-items:flex-start;gap:24px 28px;flex-wrap:wrap;
  font-size:14.5px;color:var(--ink-3);line-height:1.6}
.ct-footer-logo{width:180px;height:auto;display:block}
.ct-footer-cred{flex:1 1 560px;min-width:0}
.ct-footer-links{display:flex;gap:6px 18px;flex-wrap:wrap;margin-top:10px}
.ct-footer-links a{color:var(--ink-2);text-decoration:none;font-size:14px}
.ct-footer-links a:hover{text-decoration:underline;color:var(--ink)}
.ct-tm{display:block;margin-top:10px;max-width:40em;font-size:12px;line-height:1.55}
@media (max-width:760px){.ct-footer-brand{order:-1}}

@media (max-width:640px){
  body{font-size:16.5px}
  .ct-section{padding-block:44px}
  .ct-pagehead{padding-block:40px 30px}
  .ct-brand img{width:136px}
  .ct-topbar .ct-wide{min-height:62px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── Legacy pages that still use Bootstrap markup (Training-detail, Privacy-Policy …)
      — bring their type and buttons in line with the new shell. ── */
.ct-legacy{font-family:var(--f-body);color:var(--ink)}
.ct-legacy h1,.ct-legacy h2,.ct-legacy h3,.ct-legacy h4,.ct-legacy h5,.ct-legacy h6{font-family:var(--f-display);color:var(--ink)}
.ct-legacy .btn-main{background:var(--red);border:1px solid var(--red);color:#fff;border-radius:8px;font:600 15px var(--f-body);padding:12px 22px}
.ct-legacy .btn-main:hover{background:#C61010;color:#fff}
.ct-legacy .card{border-color:var(--rule);border-radius:14px}
.ct-legacy .text-danger{color:var(--red-ink)!important}
.ct-legacy .border-danger{border-color:var(--rule)!important}
.ct-legacy .bg-biz-focus{background:var(--ink)!important}
.ct-legacy .form-control{border-color:var(--rule);border-radius:8px;min-height:46px;font-family:var(--f-body)}

/* ── Neutralise old corp_training.css globals on legacy pages ── */
html,body{height:auto}
.ct-topbar a,.ct-footer a,.ct-float{font-family:inherit}
.ct-topbar a:hover,.ct-topbar a:focus,.ct-footer a:focus,.ct-btn:hover,.ct-btn:focus,.ct a.ct-card:hover{text-decoration:none}
.ct-topbar li,.ct-footer li{font:inherit;color:inherit}
.ct-footer{color:var(--ink-3)}
.ct p,.ct li{font-family:inherit}