/*
Theme Name: Kognifi GeneratePress Child
Template: generatepress
Version: 1.1
Description: Kognifi.my rebuild. Tokens and components per BB-02B Website and Digital v1.3 (B-12, B-15); home refresh pp02 v0.4 (22 Oct 2026).
*/

/* Tokens (BB-02B §4.1, §6). Colours also live in GP global colours as --k-*. */
:root {
	--k-shadow: 0 6px 24px rgba(27, 58, 92, .08);
	--k-shadow-hover: 0 10px 32px rgba(27, 58, 92, .12);
	--k-radius-control: 10px;
	--k-radius-card: 14px;
	--k-radius-pill: 20px;
	--k-truth-line: 3px;
	--k-space-1: 4px;
	--k-space-2: 8px;
	--k-space-3: 12px;
	--k-space-4: 16px;
	--k-space-5: 24px;
	--k-space-6: 32px;
	--k-space-7: 48px;
	--k-space-8: 64px;
	--k-space-9: 96px;
	--k-section: 80px;
	--k-gutter: 24px;
	--k-sidebar: 340px;
	--k-reading: 760px;
	--k-font-head: "Montserrat", sans-serif;
	--k-font-body: "DM Sans", sans-serif;
	--k-ease: 180ms ease-out;
}
@media (max-width: 768px) {
	:root { --k-section: 48px; }
}

h1, h2, h3, h4, h5, h6 { color: var(--k-navy); }
.kg-lead { font-size: 20px; line-height: 1.55; }
@media (max-width: 768px) { .kg-lead { font-size: 18px; } }
.kg-tagline { font-family: var(--k-font-head); font-weight: 600; font-size: 22px; line-height: 1.3; color: var(--k-navy); margin: -4px 0 var(--k-space-4); }
@media (max-width: 768px) { .kg-tagline { font-size: 18px; } }
.kg-small { font-size: 14px; line-height: 1.5; color: var(--k-grey); }

/* Buttons and links (BB-02B §7.1) */
.kg-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 12px 20px; border-radius: var(--k-radius-control);
	font-family: var(--k-font-body); font-weight: 500; font-size: 16px; line-height: 1;
	text-decoration: none; transition: background-color var(--k-ease), color var(--k-ease);
	border: 1.5px solid var(--k-blue); cursor: pointer;
}
.kg-btn--primary { background: var(--k-blue); color: var(--k-white); }
.kg-btn--primary:hover, .kg-btn--primary:focus { background: var(--k-navy); border-color: var(--k-navy); color: var(--k-white); }
.kg-btn--secondary { background: var(--k-white); color: var(--k-blue); }
.kg-btn--secondary:hover, .kg-btn--secondary:focus { background: var(--k-tint-blue); color: var(--k-blue); }
.kg-btn--block { display: flex; width: 100%; }
.kg-btn:focus-visible, .kg-card a:focus-visible, .kg-acc summary:focus-visible { outline: 3px solid var(--k-navy); outline-offset: 2px; }

/* Cards (BB-02B §7.3) */
.kg-card {
	background: var(--k-white); border-radius: var(--k-radius-card); box-shadow: var(--k-shadow);
	border: 1px solid transparent; padding: var(--k-space-5); transition: box-shadow var(--k-ease);
}
.kg-card--link:hover { box-shadow: var(--k-shadow-hover); }
.kg-card h3 { margin-bottom: var(--k-space-2); }
.kg-grid { display: grid; gap: var(--k-gutter); }
.kg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 768px) { .kg-grid--2, .kg-grid--3 { grid-template-columns: 1fr; } }

/* Badges and chips (BB-02B §7.4) */
.kg-chips { display: flex; flex-wrap: wrap; gap: var(--k-space-2); margin: 0 0 var(--k-space-5); padding: 0; list-style: none; }
.kg-chip {
	display: inline-block; padding: 4px 12px; border-radius: var(--k-radius-pill);
	border: 1px solid var(--k-border); color: var(--k-navy); background: var(--k-white);
	font-size: 14px; line-height: 1.5;
}
.kg-chip--hrdc { background: var(--k-tint-green); border-color: var(--k-tint-green); color: var(--k-success); font-weight: 500; }

/* Answer box and truth line (BB-02B §7.4) */
.kg-answer {
	background: var(--k-tint-blue); border-radius: var(--k-radius-card) var(--k-radius-card) 0 0;
	border-bottom: var(--k-truth-line) solid var(--k-gold); padding: var(--k-space-5) var(--k-space-6);
	margin-bottom: var(--k-space-7);
}
.kg-answer p:last-child { margin-bottom: 0; }
.kg-answer a { color: var(--k-navy); text-decoration: underline; }

/* Panels */
.kg-panel { border-radius: var(--k-radius-card); padding: var(--k-space-5) var(--k-space-6); }
.kg-panel--green { background: var(--k-tint-green); }
.kg-panel--green a { color: var(--k-navy); }

/* Checklist */
.kg-checklist { list-style: none; margin: 0; padding: 0; }
.kg-checklist li { position: relative; padding-left: 32px; margin-bottom: var(--k-space-3); }
.kg-checklist li::before {
	content: ""; position: absolute; left: 4px; top: .45em; width: 14px; height: 8px;
	border-left: 2px solid var(--k-success); border-bottom: 2px solid var(--k-success); transform: rotate(-45deg);
}

/* Accordion (FAQ, programme) */
.kg-acc { background: var(--k-white); border-radius: var(--k-radius-card); box-shadow: var(--k-shadow); margin-bottom: var(--k-space-3); }
.kg-acc summary {
	list-style: none; cursor: pointer; padding: var(--k-space-4) var(--k-space-5); padding-right: 56px; position: relative;
	font-family: var(--k-font-head); font-weight: 600; font-size: 18px; color: var(--k-navy); border-radius: var(--k-radius-card);
}
.kg-acc summary::-webkit-details-marker { display: none; }
.kg-acc summary::after {
	content: "+"; position: absolute; right: var(--k-space-5); top: 50%; transform: translateY(-50%);
	font-family: var(--k-font-body); font-weight: 400; font-size: 24px; line-height: 1;
}
.kg-acc[open] summary::after { content: "\2212"; }
.kg-acc__body { padding: 0 var(--k-space-5) var(--k-space-5); }
.kg-acc__body > :last-child { margin-bottom: 0; }
.kg-module { padding: var(--k-space-4) 0; border-top: 1px solid var(--k-border); }
.kg-module:first-child { border-top: 0; padding-top: 0; }
.kg-module h4 { margin-bottom: var(--k-space-1); }
.kg-module h3.kg-module__title { font-size: 18px; line-height: 1.35; margin-bottom: var(--k-space-1); } /* same size as the H4 it replaces */
.kg-module p { margin-bottom: var(--k-space-1); }

/* Quote */
.kg-quote { font-style: italic; color: var(--k-charcoal); margin: 0 0 var(--k-space-3); }
.kg-quote-by { font-size: 14px; color: var(--k-grey); margin: 0; }

/* Breadcrumbs (BB-02B §7.2) */
.kg-crumbs { font-size: 14px; color: var(--k-grey); margin: 0 0 var(--k-space-4); }
.kg-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kg-crumbs li + li::before { content: "\203A"; margin-right: 6px; }

/* T2 Course layout (Wireframe v2 T02) */
.kg-course { padding: var(--k-space-6) 0 var(--k-section); }
.kg-course__layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--k-sidebar); gap: var(--k-space-7); align-items: start; }
.kg-course__side { position: sticky; top: 88px; display: grid; gap: var(--k-gutter); }
.kg-course__main > section { margin-bottom: var(--k-space-8); }
.kg-course__main > section:last-child { margin-bottom: 0; }
.kg-course__main > .kg-prose, .kg-course__main > .kg-answer + .kg-prose { margin-bottom: var(--k-space-8); } /* post body before the course and related sections (gap was 0; Logga, 10 Oct 2026) */
.kg-course__main > section > h2 { font-size: 28px; }
/* Wireframe T02 mobile: the at-a-glance box moves under the hero. */
@media (max-width: 1024px) {
	.kg-course__layout { display: flex; flex-direction: column; gap: 0; }
	.kg-course__main { display: contents; }
	.kg-course__main > * { order: 1; }
	.kg-course__main > section { order: 3; }
	.kg-course__side { order: 2; position: static; margin-bottom: var(--k-space-8); }
}
@media (max-width: 768px) { .kg-course__main > section > h2 { font-size: 24px; } }

.kg-glance h3 { font-size: 18px; }
.kg-glance dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0 0 var(--k-space-5); font-size: 15px; }
.kg-glance dt { color: var(--k-grey); }
.kg-glance dd { margin: 0; text-align: right; font-weight: 500; }
.kg-glance .kg-btn + .kg-btn { margin-top: var(--k-space-3); }
.kg-glance__dates { list-style: none; margin: 0 0 var(--k-space-5); padding: 0; font-size: 15px; }
.kg-glance__dates li { padding: 6px 0; border-top: 1px solid var(--k-border); }
.kg-glance__contact { text-align: center; margin: var(--k-space-4) 0 0; font-size: 15px; }
/* Contact buttons in cards (16 Oct 2026): two outline buttons side by side, as in the share card. */
.kg-contact { display: flex; flex-wrap: wrap; gap: var(--k-space-2); margin: var(--k-space-4) 0 0; }
.kg-contact .kg-share__btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; padding-left: var(--k-space-3); padding-right: var(--k-space-3); box-shadow: none; } /* one line each; when both do not fit, each takes a full row */
.kg-card .kg-contact .kg-btn + .kg-btn { margin-top: 0; } /* the card rule that spaces stacked buttons does not apply here; the row gap does */

.kg-option h3 { font-size: 20px; }
.kg-option .kg-btn { margin-top: var(--k-space-4); }
.kg-option__dates { list-style: none; margin: 0 0 var(--k-space-2); padding: 0; }
.kg-option__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-4); }
.kg-option__links .kg-btn { margin-top: var(--k-space-4); }
.kg-option__links a:not(.kg-btn) { margin-top: var(--k-space-4); }

.kg-trainer { display: flex; gap: var(--k-space-4); align-items: center; text-decoration: none; color: inherit; }
.kg-trainer img { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; background: linear-gradient(var(--k-tint-blue), var(--k-cream)); flex: none; }
.kg-trainer strong { display: block; color: var(--k-navy); font-family: var(--k-font-head); font-weight: 600; }
.kg-trainer span { display: block; font-size: 14px; color: var(--k-grey); }

.kg-steps .kg-card h3 { font-size: 18px; }
.kg-steps .kg-card p { margin: 0; font-size: 16px; }

.kg-form .gform_wrapper input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.kg-form .gform_wrapper select, .kg-form .gform_wrapper textarea {
	min-height: 48px; border: 1px solid var(--k-grey); border-radius: var(--k-radius-control); background: var(--k-white); font-size: 16px;
}
.kg-form .gform_wrapper input:focus, .kg-form .gform_wrapper select:focus, .kg-form .gform_wrapper textarea:focus { border: 2px solid var(--k-navy); outline: 0; }
.kg-form .gform_wrapper .gform_button {
	background: var(--k-blue); color: var(--k-white); border: 0; border-radius: var(--k-radius-control);
	min-height: 44px; padding: 12px 20px; font-family: var(--k-font-body); font-weight: 500; font-size: 16px;
}
.kg-form .gform_wrapper .gform_button:hover { background: var(--k-navy); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ===== Frame (BB-02B §7.2): top line, header, menus ===== */
.kg-topline { position: sticky; top: 0; z-index: 101; isolation: isolate; overflow: hidden; background: var(--k-navy); color: var(--k-white); font-size: 14px; line-height: 36px; } /* Kognifi Aurora, sticky (23 Oct 2026) */
.kg-topline__inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 40px; text-align: right; }
.kg-topline a { color: var(--k-white); text-decoration: none; }
.kg-topline a:hover, .kg-topline a:focus { text-decoration: underline; }
.kg-topline__lang span[aria-current] { font-weight: 700; }
.kg-topline__office a { font-weight: 600; }
.kg-topline a.kg-topline__wa { display: inline-block; line-height: 24px; padding: 0 12px; border-radius: var(--k-radius-pill); background: var(--k-white); color: var(--k-green); font-weight: 600; }
.kg-topline a.kg-topline__wa:hover, .kg-topline a.kg-topline__wa:focus { background: var(--k-tint-green); text-decoration: none; }
@media (max-width: 1279px) { .kg-topline { display: none; } }

.site-header { position: sticky; top: 0; z-index: 100; background: var(--k-white); border-bottom: 1px solid var(--k-border); transition: box-shadow var(--k-ease); }
.admin-bar .site-header { top: 32px; }
.site-header.is-stuck { box-shadow: var(--k-shadow); }
.inside-header { padding-top: 14px; padding-bottom: 14px; transition: padding var(--k-ease); }
.site-header.is-stuck .inside-header { padding-top: 6px; padding-bottom: 6px; }
.kg-brand { display: flex; align-items: center; gap: 16px; }
.kg-brand .site-logo img, .kg-brand .header-image { width: 190px; height: auto; transition: width var(--k-ease); }
.site-header.is-stuck .kg-brand .header-image { width: 140px; }
.kg-marks { display: flex; gap: 8px; }
.kg-marks img { width: 52px; height: 52px; transition: width var(--k-ease), height var(--k-ease); }
.site-header.is-stuck .kg-marks img { width: 40px; height: 40px; }

.main-navigation, .main-navigation ul ul { background: var(--k-white); }
.main-navigation .main-nav ul li a { font-family: var(--k-font-head); font-weight: 600; font-size: 15px; color: var(--k-navy); padding-left: 9px; padding-right: 9px; line-height: 64px; }
.site-header.is-stuck .main-navigation .main-nav > ul > li > a { line-height: 52px; }
.main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li.current-menu-item > a, .main-navigation .main-nav ul li.current-menu-ancestor > a { color: var(--k-blue); }
.main-navigation .main-nav ul li.current-menu-item > a, .main-navigation .main-nav ul li.current-menu-ancestor > a { text-decoration: underline; text-underline-offset: 6px; }
.main-navigation .main-nav ul li .dropdown-menu-toggle { padding-left: 4px; }
.main-navigation .main-nav ul ul { border-radius: var(--k-radius-card); box-shadow: var(--k-shadow); padding: 8px 0; width: 280px; }
.main-navigation .main-nav ul ul li a { font-family: var(--k-font-body); font-weight: 400; font-size: 15px; line-height: 1.4; padding: 9px 20px; color: var(--k-black); }
.main-navigation .main-nav ul ul li:hover > a { background: var(--k-cream); color: var(--k-navy); }
.main-navigation .main-nav ul li.kg-menu-cta > a {
	background: var(--k-blue); color: var(--k-white); border-radius: var(--k-radius-control); line-height: 44px; padding: 0 20px; margin-left: 10px;
	font-family: var(--k-font-body); font-weight: 500; font-size: 16px; text-decoration: none;
}
.main-navigation .main-nav ul li.kg-menu-cta > a:hover, .main-navigation .main-nav ul li.kg-menu-cta > a:focus { background: var(--k-navy); color: var(--k-white); }
.main-navigation .main-nav > ul { align-items: center; }
.main-navigation .main-nav ul li.kg-drawer-extra { display: none; }

/* Courses mega menu: six columns; 2 pillars > 9 groups > 17 skill areas (regrouped 6 Oct 2026; rules below) */
@media (min-width: 1280px) {
	.inside-header { position: relative; }
	.main-navigation, .main-navigation .inside-navigation { position: static; }
	.main-navigation .main-nav .mega-menu { position: static; }
	.main-navigation .main-nav .mega-menu > ul {
		position: absolute; left: auto !important; right: 40px; width: min(1200px, calc(100% - 80px)); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); max-height: calc(100vh - 120px); overflow-y: auto;
		gap: 8px 16px; padding: 24px; border-radius: var(--k-radius-card);
	}
	.main-navigation .main-nav .mega-menu > ul > li > a { font-family: var(--k-font-head); font-weight: 600; color: var(--k-navy); padding: 0 8px 8px; }
	.main-navigation .main-nav .mega-menu > ul > li.kg-menu-all { grid-column: 1 / -1; border-top: 1px solid var(--k-border); padding-top: 8px; }
	.main-navigation .main-nav .mega-menu > ul > li.kg-menu-all > a { color: var(--k-blue); text-decoration: underline; }
	.main-navigation .main-nav .mega-menu ul ul {
		position: static; display: block; opacity: 1; visibility: visible; height: auto; width: auto; box-shadow: none;
		padding: 0; left: auto !important; pointer-events: auto; transform: none; border-radius: 0;
	}
	.main-navigation .main-nav .mega-menu ul ul li a { padding: 4px 8px; font-size: 13.5px; line-height: 1.3; }
	.main-navigation .main-nav .mega-menu > ul > li > a > .dropdown-menu-toggle { display: none; }
}

/* Drawer (below 1200 px): same seven items as accordions, top-line links at the bottom */
@media (max-width: 1279px) {
	.kg-brand .site-logo img, .kg-brand .header-image { width: 140px; } /* same weight as the 190 px rule, so the phone logo is 140 px (CI) */
	.kg-marks img { width: 40px; height: 40px; }
	.main-navigation .menu-toggle { color: var(--k-navy); }
	.main-navigation.toggled .main-nav ul li a { line-height: 48px; }
	.main-navigation.toggled .main-nav ul ul { box-shadow: none; width: 100%; padding: 0; }
	.main-navigation.toggled .main-nav ul li.kg-menu-cta > a { display: inline-block; margin: 12px 0; }
	.main-navigation.toggled .main-nav ul li.kg-drawer-extra { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 16px 20px 24px; border-top: 1px solid var(--k-border); }
	.main-navigation.toggled .main-nav ul li.kg-drawer-extra a { line-height: 1.6; padding: 0; font-family: var(--k-font-body); font-weight: 400; color: var(--k-blue); text-decoration: underline; }
}
@media (max-width: 480px) { .kg-marks { display: none; } }

/* Breadcrumbs */
.kg-crumbs, .kg-crumbs p { margin: 0 0 var(--k-space-4); font-size: 14px; color: var(--k-grey); }
.site-main > .kg-crumbs, .content-area > .kg-crumbs { padding-top: var(--k-space-6); }
.kg-crumbs .separator { margin: 0 6px; }

/* ===== Footer (Navy, 3 px Antique Gold truth line) ===== */
.kg-footer { background: var(--k-navy); color: var(--k-white); border-top: var(--k-truth-line) solid var(--k-gold); font-size: 15px; }
.kg-footer a { color: var(--k-white); }
.kg-footer__grid { max-width: 1200px; margin: 0 auto; padding: 56px 40px 40px; display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr; gap: 32px; }
.kg-footer__h { font-family: var(--k-font-head); font-weight: 600; font-size: 17px; color: var(--k-white); margin: 0 0 12px; }
.kg-footer__h--small { font-size: 15px; margin: 20px 0 8px; }
.kg-footer__links { list-style: none; margin: 0; padding: 0; }
.kg-footer__links li { margin-bottom: 6px; }
.kg-footer__links a { text-decoration: none; }
.kg-footer__links a:hover, .kg-footer__links a:focus { text-decoration: underline; }
.kg-footer__lockup { width: 180px; height: auto; margin-bottom: 16px; }
.kg-footer__facts address { font-style: normal; }
.kg-footer__facts p { margin: 0 0 10px; }
.kg-footer__marks { display: inline-flex; gap: 8px; background: var(--k-white); border-radius: var(--k-radius-control); padding: 8px; margin: 4px 0 12px; }
.kg-footer__reg { font-size: 14px; }
.kg-footer__bottom { background: var(--k-charcoal); } /* CI token, not rgba black (CI check, 10 Oct 2026) */
.kg-footer__bottom p { max-width: 1200px; margin: 0 auto; padding: 16px 40px; font-size: 14px; }
@media (max-width: 1024px) { .kg-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .kg-footer__grid { grid-template-columns: 1fr; padding: 40px 20px 24px; } .kg-footer__bottom p { padding: 16px 20px 80px; } }

/* ===== Mobile sticky bar (Navy, 56 px) ===== */
.kg-mobilebar { display: none; }
@media (max-width: 768px) {
	.kg-mobilebar { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; height: 56px; background: var(--k-navy); box-shadow: 0 -4px 16px rgba(27, 58, 92, .18); }
	.kg-mobilebar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--k-white); text-decoration: none; font-size: 13px; font-weight: 500; }
	.kg-mobilebar a + a { border-left: 1px solid rgba(255, 255, 255, .15); }
	body { padding-bottom: 56px; }
}

/* Header row runs full width: lockup, two HRD Corp marks, seven items and the button need ~1,330 px. */
.site-header .inside-header.grid-container, .site-header .inside-header { max-width: none; padding-left: 40px; padding-right: 40px; }
.main-navigation .main-nav ul li.menu-item-has-children > a { padding-right: 7px; }
.main-navigation .main-nav ul li a { padding-left: 7px; }
.main-navigation .main-nav > ul > li > a .dropdown-menu-toggle { padding: 0 0 0 4px; font-size: 11px; }

/* ===== T6 Class and T5 Calendar ===== */
.kg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: var(--k-space-7); }
.kg-fact { padding: 16px 18px; }
.kg-fact span { display: block; margin-bottom: 4px; }
.kg-fact strong { font-weight: 500; }
.kg-date-card strong { display: block; color: var(--k-navy); font-family: var(--k-font-head); font-weight: 600; }
.kg-date-card span { font-size: 15px; color: var(--k-grey); }
.kg-more { margin-top: var(--k-space-4); }
.kg-calendar, .tribe-events-pg-template .kg-calendar { max-width: 1200px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
@media (max-width: 768px) { .kg-calendar { padding-left: 20px; padding-right: 20px; } }
.kg-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.kg-pill { display: inline-block; padding: 6px 14px; border-radius: var(--k-radius-pill); border: 1px solid var(--k-border); background: var(--k-white); color: var(--k-navy); font-size: 15px; text-decoration: none; }
.kg-pill:hover, .kg-pill:focus { background: var(--k-tint-blue); }
.kg-pill.is-on { background: var(--k-navy); border-color: var(--k-navy); color: var(--k-white); }
.kg-views { margin: 12px 0 0; font-size: 15px; }
.kg-cal__month { margin: var(--k-space-6) 0 12px; }
.kg-table-wrap { overflow-x: auto; background: var(--k-white); border-radius: var(--k-radius-card); box-shadow: var(--k-shadow); }
.kg-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0; border: 0; }
.kg-table th { background: var(--k-charcoal-light); text-align: left; font-family: var(--k-font-head); font-weight: 600; color: var(--k-navy); padding: 10px 14px; border: 0; }
.kg-table td { padding: 10px 14px; border: 0; border-top: 1px solid var(--k-border); }
.kg-filters summary { list-style: none; cursor: pointer; }
.kg-filters summary::-webkit-details-marker { display: none; }
.kg-filters summary h3 { display: inline; font-size: 18px; }
.kg-filters label { display: block; font-size: 14px; color: var(--k-grey); margin: 12px 0; }
.kg-filters select { display: block; width: 100%; margin-top: 4px; min-height: 44px; border: 1px solid var(--k-grey); border-radius: var(--k-radius-control); background: var(--k-white); padding: 0 10px; font-size: 16px; color: var(--k-black); }
@media (min-width: 1025px) { .kg-filters summary { pointer-events: none; } }
.kg-calendar--month { padding-top: var(--k-space-6); }
.tribe-events .tribe-events-c-search__button, .tribe-common .tribe-common-c-btn { background-color: var(--k-blue); border-radius: var(--k-radius-control); }
.tribe-events .tribe-events-c-search__button:hover, .tribe-common .tribe-common-c-btn:hover { background-color: var(--k-navy); }
.tribe-events-view--month .tribe-events-c-view-selector { display: none; }

/* ===== Listings: T3, T3b, T4, T7 ===== */
.kg-page { padding: var(--k-space-6) 0 var(--k-section); }
.kg-page > section, .kg-topic-group { margin-top: var(--k-space-8); }
.kg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .kg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kg-grid--4, .kg-grid--3 { grid-template-columns: 1fr; } }
.kg-card--link { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--k-black); }
.kg-card--link h3 { color: var(--k-navy); font-size: 19px; margin: 0; }
.kg-card--link:focus-visible { outline: 3px solid var(--k-navy); outline-offset: 2px; }
.kg-card__meta { margin: 0; font-size: 15px; color: var(--k-grey); }
.kg-card__next { margin: 0; font-size: 15px; }
.kg-card__link { margin-top: auto; padding-top: 6px; color: var(--k-blue); font-size: 15px; text-decoration: underline; }
.kg-course-card .kg-chip--hrdc { align-self: flex-start; font-size: 13px; padding: 2px 10px; }
.kg-tag { align-self: flex-start; display: inline-block; padding: 3px 10px; border-radius: var(--k-radius-pill); font-size: 13px; font-weight: 500; background: var(--k-charcoal-light); color: var(--k-black); }
.kg-tag--terracotta { background: var(--k-terracotta); color: var(--k-white); }
.kg-tag--amber { background: var(--k-amber); color: var(--k-black); }
.kg-tag--green { background: var(--k-success); color: var(--k-white); }
.kg-tag--bahama { background: var(--k-bahama); color: var(--k-white); }
.kg-tag--grey { background: var(--k-grey); color: var(--k-white); }
.kg-tag--navy { background: var(--k-navy); color: var(--k-white); }
.kg-tag--charcoal { background: var(--k-charcoal); color: var(--k-white); }
.kg-tag--yellow { background: #EEE77A; color: var(--k-black); }
.kg-topic-group h2 a { color: var(--k-navy); text-decoration: none; }
.kg-topic-group h2 a:hover { text-decoration: underline; }
.kg-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; background: var(--k-white); border-radius: var(--k-radius-card); box-shadow: var(--k-shadow); padding: 16px 20px; }
.kg-filterbar label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--k-grey); }
.kg-filterbar select { min-height: 44px; min-width: 190px; border: 1px solid var(--k-grey); border-radius: var(--k-radius-control); background: var(--k-white); padding: 0 10px; font-size: 16px; color: var(--k-black); }
.kg-filterbar .kg-check { flex-direction: row; align-items: center; gap: 8px; min-height: 44px; color: var(--k-black); font-size: 16px; }
.kg-filterbar .kg-check input { width: 20px; height: 20px; }
.kg-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: var(--k-space-8); }
.kg-steps-list { padding-left: 1.2em; }
.kg-class-card__date { font-family: var(--k-font-head); font-weight: 600; color: var(--k-navy); }
.kg-profile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--k-gutter); align-items: stretch; }
.kg-profile__img { border-radius: var(--k-radius-card); overflow: hidden; background: linear-gradient(var(--k-tint-blue), var(--k-cream)); }
.kg-profile__img img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; object-position: top; display: block; }
.kg-profile__card h1 { font-size: 40px; margin-bottom: 8px; }
.kg-profile__proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-4); margin-top: var(--k-space-4); }
.kg-profile__badge img { width: 120px; height: auto; display: block; }
.kg-profile__badge { cursor: zoom-in; }
.kg-badge-dialog { border: 0; border-radius: var(--k-radius-card); padding: var(--k-space-5); width: min(92vw, 480px); max-height: 92vh; text-align: center; background: var(--k-white); }
.kg-badge-dialog::backdrop { background: rgba(15, 23, 42, 0.6); }
.kg-badge-dialog img { display: block; width: 100%; max-height: 70vh; height: auto; object-fit: contain; margin: 0 auto var(--k-space-4); }
@media (max-width: 768px) { .kg-profile { grid-template-columns: 1fr; } .kg-profile__card h1 { font-size: 32px; } }

/* ===== T11 / T12 section pages ===== */
.kg-section-page .kg-course__main > section { margin-top: var(--k-space-8); margin-bottom: 0; }
.kg-prose { max-width: var(--k-reading); }
.kg-prose h2 { font-size: 28px; margin-top: var(--k-space-7); }
.kg-prose h3 { margin-top: var(--k-space-6); }
.kg-source { margin-top: var(--k-space-5); }
.kg-secmenu h3 { font-size: 18px; }
.kg-secmenu ul { list-style: none; margin: 0; padding: 0; }
.kg-secmenu li { padding: 6px 0; border-top: 1px solid var(--k-border); font-size: 15px; }
.kg-secmenu li:first-child { border-top: 0; }
.kg-secmenu a { color: var(--k-black); text-decoration: none; }
.kg-secmenu a:hover { color: var(--k-blue); text-decoration: underline; }
.kg-secmenu [aria-current] { font-weight: 700; color: var(--k-navy); }
.kg-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: var(--k-space-8); padding-top: var(--k-space-5); border-top: 1px solid var(--k-border); }
.kg-pager .kg-next { margin-left: auto; }
.kg-panel--amber { background: var(--k-tint-amber); border-left: var(--k-truth-line) solid var(--k-gold); }
.kg-stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; counter-reset: kgstep; }
.kg-stepper li { padding: 14px; display: flex; flex-direction: column; gap: 4px; counter-increment: kgstep; }
.kg-stepper strong { font-family: var(--k-font-head); font-weight: 600; color: var(--k-navy); }
.kg-stepper strong::before { content: counter(kgstep) ". "; color: var(--k-gold); }
.kg-stepper span { font-size: 14px; color: var(--k-grey); }
.kg-example h3 { font-size: 18px; }

/* ===== T13 About / Contact, T8 Become a trainer ===== */
.kg-standard .entry-content > * { max-width: 100%; }
.kg-standard .entry-content > section, .kg-standard .entry-content > .wp-block-group { margin-top: var(--k-space-8); }
.kg-card__h { font-size: 20px; }
.kg-map { padding: 0; overflow: hidden; min-height: 320px; }
.kg-map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }
.wp-block-columns.kg-cards > .wp-block-column { background: var(--k-white); border-radius: var(--k-radius-card); box-shadow: var(--k-shadow); padding: var(--k-space-5); }
.wp-block-columns.kg-cards h3 { margin-top: 0; }
.wp-block-quote.kg-difference { background: var(--k-tint-blue); border-left: 0; border-bottom: var(--k-truth-line) solid var(--k-gold); border-radius: var(--k-radius-card) var(--k-radius-card) 0 0; padding: var(--k-space-5) var(--k-space-6); font-size: 20px; line-height: 1.55; font-style: normal; color: var(--k-black); margin: 0; }
.wp-block-quote.kg-difference p:last-child { margin-bottom: 0; }

/* ===== T1 Home ===== */
.home .site-content .content-area, .home .inside-article { padding-top: 0; }
.kg-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--k-space-7); align-items: center; padding: var(--k-space-8) 0 var(--k-section); }
.kg-hero h1 { font-size: 54px; line-height: 1.1; }
.kg-hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: var(--k-space-5) 0 0; }
.kg-hero__media { position: relative; background: linear-gradient(var(--k-tint-blue), var(--k-cream)); border-radius: var(--k-radius-card); padding: 24px 24px 0; }
.kg-hero__media img { display: block; width: 100%; height: auto; }
.kg-hero__next { position: absolute; left: 16px; right: 16px; bottom: 16px; background: var(--k-white); border-radius: var(--k-radius-control); box-shadow: var(--k-shadow); border-bottom: var(--k-truth-line) solid var(--k-gold); padding: 12px 16px; font-size: 14px; color: var(--k-black); text-decoration: none; }
.kg-search { display: flex; max-width: 520px; margin-top: var(--k-space-5); box-shadow: var(--k-shadow); border-radius: var(--k-radius-control); }
.kg-search input { flex: 1; min-height: 48px; border: 1px solid var(--k-grey); border-right: 0; border-radius: var(--k-radius-control) 0 0 var(--k-radius-control); background: var(--k-white); padding: 0 16px; font-size: 16px; }
.kg-search button { border: 0; background: var(--k-navy); color: var(--k-white); padding: 0 20px; border-radius: 0 var(--k-radius-control) var(--k-radius-control) 0; font-family: var(--k-font-body); font-weight: 500; }
@media (max-width: 900px) { .kg-hero { grid-template-columns: 1fr; padding-top: var(--k-space-6); } .kg-hero h1 { font-size: 34px; } }
.kg-band { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: var(--k-section) 0; }
.kg-band__inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 768px) { .kg-band__inner { padding: 0 20px; } }
.kg-band--blue { background: var(--k-tint-blue); }
.kg-band--green { background: var(--k-tint-green); }
.kg-band--amber { background: var(--k-tint-amber); }
.kg-band--blue a:not(.kg-btn):not(.kg-card), .kg-band--green .kg-more a, .kg-band--amber .kg-more a { color: var(--k-navy); }
.kg-num { display: block; font-family: var(--k-font-head); font-weight: 600; font-size: 14px; color: var(--k-gold); margin-bottom: 6px; }
.kg-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) { .kg-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) { .kg-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .kg-grid--5 { grid-template-columns: 1fr; } }
.kg-stepper--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 768px) { .kg-stepper--3 { grid-template-columns: 1fr; } }
.kg-final__card { text-align: center; padding: var(--k-space-7); }
.kg-final__card h2 { margin-bottom: var(--k-space-5); }

/* ===== T9 / T10 Work Tips ===== */
.kg-tip-meta { margin-top: -8px; }
.kg-inline-course { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.kg-inline-course strong { color: var(--k-navy); font-family: var(--k-font-head); font-weight: 600; }
.kg-side-h { font-size: 18px; margin-bottom: 12px; }
.kg-side-sub .gform_wrapper { margin: 0; }
.kg-featured { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--k-gutter); padding: 0; overflow: hidden; }
.kg-featured__img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; }
.kg-featured__body { display: flex; flex-direction: column; gap: 8px; padding: var(--k-space-5); }
@media (max-width: 768px) { .kg-featured { grid-template-columns: 1fr; } }
.kg-pagination { margin-top: var(--k-space-6); display: flex; gap: 8px; flex-wrap: wrap; }
.kg-pagination .page-numbers { padding: 6px 12px; border-radius: var(--k-radius-control); background: var(--k-white); box-shadow: var(--k-shadow); text-decoration: none; }
.kg-pagination .current { background: var(--k-navy); color: var(--k-white); }

/* ===== T14 Campaign ===== */
.kg-campaign .main-navigation, .kg-campaign .kg-topline, .kg-campaign .kg-footer__grid { display: none; }

/* Trainer cards: small round portraits (30 Sep 2026) */
.kg-grid--trainers { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.kg-trainer-card { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: inherit; padding: var(--k-space-5) var(--k-space-4); }
.kg-trainer-card__img { display: block; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: linear-gradient(var(--k-tint-blue), var(--k-cream)); margin-bottom: var(--k-space-3); flex: none; }
.kg-trainer-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.kg-trainer-card h3 { font-size: 17px; margin-bottom: var(--k-space-1); }
.kg-trainer-card__cred { font-size: 14px; font-weight: 600; color: var(--k-charcoal); margin: 0 0 var(--k-space-2); }
.kg-trainer-card .kg-small { margin: 0 0 var(--k-space-3); }
.kg-trainer-card .kg-card__link { margin-top: auto; }

/* Quote slider (30 Sep 2026) */
.kg-slider { position: relative; }
.kg-slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--k-gutter)) / 3); gap: var(--k-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px var(--k-space-4); }
.kg-slider__track::-webkit-scrollbar { display: none; }
.kg-slide { scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; justify-content: space-between; }
.kg-slider__nav { display: flex; justify-content: flex-end; gap: var(--k-space-2); }
.kg-slider__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--k-navy); background: var(--k-white); color: var(--k-navy); font-size: 18px; cursor: pointer; }
.kg-slider__btn:hover, .kg-slider__btn:focus-visible { background: var(--k-tint-blue); }
@media (max-width: 768px) { .kg-slider__track { grid-auto-columns: 85%; } }
@media (max-width: 600px) {
	.kg-grid--trainers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k-space-3); }
	.kg-trainer-card { padding: var(--k-space-4) var(--k-space-3); }
	.kg-trainer-card__img { width: 72px; height: 72px; }
	.kg-trainer-card h3 { font-size: 15px; }
	.kg-trainer-card__cred, .kg-trainer-card .kg-small { font-size: 13px; }
}

/* Logga's rules (30 Sep 2026): course code on class cards; trainer credentials line. */
.kg-code { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid var(--k-navy); border-radius: 4px; font-family: var(--k-font-body); font-weight: 600; font-size: 12px; line-height: 1.5; color: var(--k-navy); vertical-align: middle; white-space: nowrap; }
.kg-block { display: block; }
.kg-trainer-card__cred, .kg-profile__creds { font-family: var(--k-font-body); font-weight: 600; color: var(--k-navy); }
/* Roundel outline so white-background portraits keep their circle on white cards (1 Oct 2026). */
.kg-trainer-card__img, .kg-trainer img { box-shadow: 0 0 0 1px rgba(31, 78, 121, 0.18); }

/* Course code chips in the category colours (Logga, 1 Oct 2026; BB-02B §7.4 pairs) */
.kg-code--navy { background: var(--k-navy); border-color: var(--k-navy); color: var(--k-white); }
.kg-code--terracotta { background: var(--k-terracotta); border-color: var(--k-terracotta); color: var(--k-white); }
.kg-code--amber { background: var(--k-amber); border-color: var(--k-amber); color: var(--k-black); }
.kg-code--bahama { background: var(--k-bahama); border-color: var(--k-bahama); color: var(--k-white); }
.kg-code--yellow { background: #EEE77A; border-color: #EEE77A; color: var(--k-black); }
.kg-code--grey { background: var(--k-grey); border-color: var(--k-grey); color: var(--k-white); }
.kg-code--charcoal { background: var(--k-charcoal); border-color: var(--k-charcoal); color: var(--k-white); }
.kg-code--green { background: var(--k-success); border-color: var(--k-success); color: var(--k-white); }
.kg-chip.kg-code--navy, .kg-chip.kg-code--terracotta, .kg-chip.kg-code--bahama, .kg-chip.kg-code--grey, .kg-chip.kg-code--charcoal, .kg-chip.kg-code--green { font-weight: 600; }
.kg-chip.kg-code--amber, .kg-chip.kg-code--yellow { font-weight: 600; }
/* Topic cards lead with the category tag */
.kg-topic-card h3 { margin-bottom: var(--k-space-3); }
.kg-topic-card h3 .kg-tag { display: block; border-radius: var(--k-radius-control); padding: 10px 14px; font-size: 17px; line-height: 1.3; font-family: var(--k-font-head); font-weight: 600; }
/* Testimonial: course line above the participant */
.kg-slide figcaption { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.kg-quote-course { display: flex; align-items: center; gap: 8px; color: var(--k-navy); font-weight: 600; font-size: 14px; text-decoration: none; }
.kg-quote-course .kg-code { margin-left: 0; }
.kg-quote-course:hover span, .kg-quote-course:focus span { text-decoration: underline; }

/* ===== Spacing system (Logga, 1 Oct 2026): one rhythm everywhere =====
 * Page end: every page except home stops 80 px (--k-section) above the footer; wrappers no longer add their own.
 * Between sections: 64 px (--k-space-8). After a filter bar: 32 px. After a grid, stepper or form block: 24 px. */
body:not(.home) .site-main { padding-bottom: var(--k-section); }
.kg-page, .kg-course { padding-bottom: 0; }
body:not(.home) .site-main .inside-article, body:not(.home) .site-main .entry-content { padding-bottom: 0; margin-bottom: 0; }
.site-main .entry-content > :last-child, .kg-page > :last-child, .kg-course__main > :last-child, .kg-course__layout:last-child, .kg-prose > :last-child { margin-bottom: 0; }
.kg-standard .entry-content > section + section, .kg-standard .entry-content > * + section, .kg-contact + section, .entry-content > section + .wp-block-heading { margin-top: var(--k-space-8); }
.kg-filterbar + * { margin-top: var(--k-space-6); }
.kg-grid + p, .kg-grid + .kg-small, .kg-grid + .kg-more, .kg-stepper + p, .kg-stepper + .kg-more, .kg-steps-list + p { margin-top: var(--k-space-5); }
.kg-profile__card h1 + .kg-profile__creds, h1 + .kg-tip-meta { margin-top: var(--k-space-3); }
.site-footer { margin-top: 0; }
.entry-content p:empty, .kg-prose p:empty { display: none; }
.entry-content > section + section, .entry-content > * + section, .kg-page > * + section, .entry-content > section + .wp-block-heading { margin-top: var(--k-space-8); } /* every page section 64 px below the block above it, not only .kg-standard pages (contact page gap was 27 px; 10 Oct 2026) */

/* ===== Home hero, dark full-width (Logga, 1 Oct 2026) ===== */
.kg-hero.kg-hero--dark { display: block; padding: 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: radial-gradient(120% 140% at 85% 30%, var(--k-bahama) 0%, var(--k-navy) 55%, #102640 100%); color: var(--k-white); overflow: hidden; }
.kg-hero--dark .kg-hero__inner { max-width: 1200px; margin: 0 auto; padding: 72px 40px 0; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--k-space-6); align-items: end; min-height: min(640px, calc(100vh - 140px)); }
.kg-hero--dark .kg-hero__text { align-self: center; padding-bottom: 72px; }
.kg-hero__eyebrow { display: inline-block; margin-bottom: var(--k-space-4); padding: 4px 12px; border-radius: var(--k-radius-pill); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.kg-hero--dark h1 { color: var(--k-white); font-size: 56px; line-height: 1.08; margin-bottom: var(--k-space-4); }
.kg-hero--dark .kg-lead { color: rgba(255, 255, 255, .88); max-width: 34em; }
.kg-hero--dark .kg-search { max-width: 520px; margin-top: var(--k-space-5); box-shadow: 0 8px 28px rgba(0, 0, 0, .25); }
.kg-btn--light { background: var(--k-white); border-color: var(--k-white); color: var(--k-navy); }
.kg-btn--light:hover, .kg-btn--light:focus { background: var(--k-tint-blue); border-color: var(--k-tint-blue); color: var(--k-navy); }
.kg-hero--dark .kg-btn:focus-visible { outline-color: var(--k-white); }
.kg-hero--dark .kg-hero__media { position: relative; background: none; padding: 0; border-radius: 0; align-self: end; min-height: 520px; }
.kg-hero--dark .kg-hero__people { position: absolute; right: -150px; bottom: 0; width: 112%; max-width: none; height: auto; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .35)); }
.kg-hero__pills { position: absolute; left: -36px; top: 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; z-index: 2; }
.kg-hero__pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; background: rgba(27, 58, 92, .9); border: 1px solid rgba(255, 255, 255, .22); color: var(--k-white); font-size: 14px; font-weight: 500; text-decoration: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); transition: transform var(--k-ease), background-color var(--k-ease); }
.kg-hero__pill:hover, .kg-hero__pill:focus { transform: translateX(4px); background: var(--k-navy); color: var(--k-white); }
.kg-hero__pill--main { padding: 14px 20px; font-size: 16px; font-weight: 600; background: var(--k-white); color: var(--k-navy); border-color: var(--k-white); }
.kg-hero__pill--main:hover, .kg-hero__pill--main:focus { background: var(--k-white); color: var(--k-navy); }
.kg-hero__pill--main small { display: block; font-size: 12px; font-weight: 500; color: var(--k-grey); text-transform: uppercase; letter-spacing: .04em; }
.kg-hero__pill:focus-visible { outline: 3px solid var(--k-white); outline-offset: 2px; }
@media (max-width: 1100px) { .kg-hero--dark h1 { font-size: 44px; } .kg-hero--dark .kg-hero__people { width: 112%; right: -20px; } }
@media (max-width: 900px) {
	.kg-hero--dark .kg-hero__inner { grid-template-columns: 1fr; padding: 40px 20px 0; min-height: 0; }
	.kg-hero--dark .kg-hero__text { padding-bottom: 8px; }
	.kg-hero--dark h1 { font-size: 34px; }
	.kg-hero--dark .kg-hero__media { min-height: 0; display: flex; flex-direction: column; }
	.kg-hero--dark .kg-hero__people { position: static; width: 100%; order: 2; }
	.kg-hero__pills { position: static; order: 1; flex-direction: row; overflow-x: auto; padding: 12px 0; margin: 0 -20px; padding-left: 20px; scrollbar-width: none; }
	.kg-hero__pill { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .kg-hero__pill { transition: none; } .kg-hero__pill:hover { transform: none; } }
.kg-hero--dark .kg-hero__inner > * { min-width: 0; }
@media (max-width: 900px) { .kg-hero--dark .kg-search { max-width: 100%; } .kg-hero--dark .kg-hero__buttons .kg-btn { flex: 1 1 140px; justify-content: center; } }
.kg-hero--dark .kg-hero__buttons .kg-btn { white-space: nowrap; }

/* HRD Corp Claimable mark on registered course and class pages: full-colour logo, never altered (Guideline 2022 §4.4) */
.kg-chip--claimable { display: inline-flex; align-items: center; gap: 8px; padding: 2px 12px 2px 4px; background: var(--k-white); border-color: var(--k-border); color: var(--k-navy); }
.kg-chip--claimable img { width: 28px; height: 28px; display: block; }
.kg-course-card .kg-chip--claimable { padding: 2px 12px 2px 4px; text-align: left; line-height: 1.3; }
.kg-course-card .kg-chip--claimable img { flex: none; }

/* Home, 1 Oct 2026 (homepage study): proof strip under the hero (BB-02B T1), truth line under the hero takeaway,
 * section intros, topic card "covers" line. */
.kg-truth { display: block; width: 72px; height: var(--k-truth-line); background: var(--k-gold); margin: var(--k-space-4) 0 0; }
.kg-proof { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--k-white); border-bottom: 1px solid var(--k-border, #E0E0D8); }
.kg-proof { padding: 28px 0 32px; }
.kg-proof .kg-band__inner { padding-bottom: 16px; }
.kg-proof__label { margin: 0; font-family: var(--k-font-body, inherit); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--k-grey); }
.kg-logos { display: grid; gap: 20px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.kg-logos__row { display: flex; width: max-content; animation: kg-logos calc(var(--kg-logos-n) * 2.4s) linear infinite; }
.kg-logos__row--rev { animation-direction: reverse; }
.kg-logos:hover .kg-logos__row, .kg-logos:focus-within .kg-logos__row { animation-play-state: paused; }
.kg-logos__track { display: flex; align-items: center; gap: 48px; margin: 0; padding: 0 24px; list-style: none; }
.kg-logos__track li { flex: 0 0 auto; display: flex; align-items: center; height: 72px; }
.kg-logos__track img { display: block; max-width: none; }
@keyframes kg-logos { to { transform: translateX(-50%); } }
@media (max-width: 768px) { .kg-logos__track { zoom: .72; } }
@media (prefers-reduced-motion: reduce) { .kg-logos { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .kg-logos__row { animation: none; } .kg-logos__track[aria-hidden="true"] { display: none; } }
.kg-intro { max-width: 62ch; margin: 0 0 var(--k-space-5); font-size: 18px; color: var(--k-black); }
.kg-topic-card__covers { margin: 0 0 var(--k-space-3); font-size: 15px; line-height: 1.5; color: var(--k-black); }
@media (min-width: 901px) { .kg-hero--dark .kg-hero__text { padding-right: 48px; } }

/* Course programme (2 Oct 2026): module time, activities tagged by type, lunch row; "What is included" */
.kg-acc__meta { font-family: var(--k-font-body); font-weight: 400; font-size: 15px; color: var(--k-grey); margin-left: var(--k-space-2); }
.kg-module__time { font-size: 14px; font-weight: 600; color: var(--k-bahama); text-transform: none; margin-bottom: var(--k-space-1); }
.kg-activities { list-style: none; margin: var(--k-space-3) 0 0; padding: 0; }
.kg-activities li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--k-space-2); padding: var(--k-space-2) 0; border-top: 1px dashed var(--k-border); }
.kg-activities li:first-child { border-top: 0; }
.kg-act { flex: none; font-size: 13px; line-height: 1.4; padding: 2px 10px; border-radius: var(--k-radius-pill); background: var(--k-tint-blue); color: var(--k-navy); white-space: nowrap; }
.kg-act--workshop { background: var(--k-tint-green); color: var(--k-black); }
.kg-act--group { background: var(--k-cream); color: var(--k-black); }
.kg-module__break { margin: 0; padding: var(--k-space-3) var(--k-space-4); background: var(--k-cream); border-radius: var(--k-radius-control); font-size: 14px; color: var(--k-charcoal); }
.kg-runs__h { margin-top: var(--k-space-6); }
.kg-form .kg-required-note { margin: 0; font-size: 14px; color: var(--k-grey); }

/* Class pages (2 Oct 2026): upcoming dates table */
.kg-dates td { vertical-align: middle; }
.kg-dates td:last-child { text-align: right; white-space: nowrap; }
.kg-dates tr.is-selected td { background: var(--k-tint-blue); }
.kg-dates tr:target td { background: var(--k-tint-blue); }
@media (max-width: 640px) {
	/* Class dates on phones (16 Oct 2026): each date is a stacked block, so long Malay buttons ("Tempah Tempat") do not push the page sideways.
	 * Row 1: date | code. Row 2: trainer. Row 3: full-width button. The column headings stay for screen readers. */
	.kg-dates thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.kg-dates, .kg-dates tbody { display: block; width: 100%; }
	.kg-dates tr { display: grid; grid-template-columns: 1fr auto; gap: var(--k-space-2) var(--k-space-3); align-items: center; padding: var(--k-space-3) var(--k-space-4); border-top: 1px solid var(--k-border); }
	.kg-dates tbody tr:first-child { border-top: 0; }
	.kg-dates td { display: block; padding: 0; border: 0; background: none; }
	.kg-dates td:nth-child(1) { grid-column: 1; grid-row: 1; }
	.kg-dates td:nth-child(3) { grid-column: 2; grid-row: 1; justify-self: end; }
	.kg-dates td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
	.kg-dates td:last-child { grid-column: 1 / -1; grid-row: 3; text-align: left; white-space: normal; }
	.kg-dates td:last-child .kg-btn { display: flex; width: 100%; justify-content: center; }
	.kg-dates tr.is-selected, .kg-dates tr:target { background: var(--k-tint-blue); }
	.kg-dates tr.is-selected td, .kg-dates tr:target td { background: none; }
}

/* Class/course pages (2 Oct 2026): hero image, venue map, class photos, dates note spacing */
.kg-hero-img { margin: 0; border-radius: var(--k-radius-card); overflow: hidden; box-shadow: var(--k-shadow); background: var(--k-white); }
.kg-hero-img img { display: block; width: 100%; height: auto; }
.kg-venue { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--k-gutter); align-items: start; }
.kg-venue__text p { margin-bottom: var(--k-space-4); }
.kg-venue__map { position: relative; aspect-ratio: 4 / 3; border-radius: var(--k-radius-card); overflow: hidden; background: var(--k-tint-blue); box-shadow: var(--k-shadow); }
.kg-venue__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) { .kg-venue { grid-template-columns: 1fr; } }
.kg-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--k-space-3); }
.kg-photo { margin: 0; border-radius: var(--k-radius-control); overflow: hidden; aspect-ratio: 4 / 3; background: var(--k-tint-blue); }
.kg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .kg-photos { grid-template-columns: repeat(2, 1fr); } }
/* Photo strip placed in page content (group block; the classic theme adds an inner container): the grid sits on the container,
 * no flow margins, and an odd last photo spans the row on phones. */
.wp-block-group.kg-photos { display: block; margin-bottom: var(--k-space-5); }
.wp-block-group.kg-photos > .wp-block-group__inner-container { padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--k-space-3); }
.wp-block-group.kg-photos .kg-photo { margin: 0; }
@media (max-width: 640px) {
	.wp-block-group.kg-photos > .wp-block-group__inner-container { grid-template-columns: repeat(2, 1fr); }
	.wp-block-group.kg-photos .kg-photo:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Person beside a profile text in page content (media-text block): round portrait, as on trainer cards. */
.kg-person { gap: var(--k-space-5); margin-bottom: var(--k-space-5); }
.kg-person .wp-block-media-text__media img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; max-width: 200px; }
.kg-person .wp-block-media-text__content { padding: 0; }
@media (max-width: 600px) { .kg-person .wp-block-media-text__media img { max-width: 160px; } }
#dates .kg-table-wrap { margin-bottom: var(--k-space-4); }
.kg-dates__note { margin-top: var(--k-space-4); }
/* Quote slider inside the main column (course and class pages): two cards across, not three */
@media (min-width: 769px) { .kg-course__main .kg-slider__track { grid-auto-columns: calc((100% - var(--k-gutter)) / 2); } }

/* Subject word cloud (blog sidebar and subject pages) */
.kg-cloud ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; line-height: 1.3; }
.kg-cloud a { color: var(--k-navy); text-decoration: none; font-family: var(--k-font-head); font-weight: 600; }
.kg-cloud a:hover, .kg-cloud a:focus-visible { color: var(--k-blue); text-decoration: underline; }
.kg-cloud a[aria-current="page"] { color: var(--k-blue); text-decoration: underline; }

/* Tip hero image; sidebar not sticky when taller than the window */
.kg-tip-cta { display: flex; flex-wrap: wrap; gap: var(--k-space-3); margin: 0 0 var(--k-space-6); } /* above-the-fold step to the enquiry on posts (10 Oct 2026) */
.kg-tip-hero { margin: 0 0 var(--k-space-6); border-radius: var(--k-radius-card); overflow: hidden; box-shadow: var(--k-shadow); }
.kg-tip-hero img { display: block; width: 100%; height: auto; }
.kg-course__side.kg-side--static { position: static; }

/* 13 categories (2 Oct 2026): five new tag/code pairs (pending CI decision; all pass AA) */
.kg-tag--terracotta-tint, .kg-code--terracotta-tint { background: var(--k-tint-terracotta); border-color: var(--k-terracotta); color: var(--k-terracotta); }
.kg-tag--red, .kg-code--red { background: var(--k-red); border-color: var(--k-red); color: var(--k-white); }
.kg-tag--amber-tint, .kg-code--amber-tint { background: var(--k-tint-amber); border-color: var(--k-amber); color: var(--k-black); }
.kg-tag--blue, .kg-code--blue { background: var(--k-blue); border-color: var(--k-blue); color: var(--k-white); }
.kg-tag--green-tint, .kg-code--green-tint { background: var(--k-tint-green); border-color: var(--k-green); color: var(--k-green); }
.kg-chip.kg-code--terracotta-tint, .kg-chip.kg-code--red, .kg-chip.kg-code--amber-tint, .kg-chip.kg-code--blue, .kg-chip.kg-code--green-tint { font-weight: 600; }

/* Legacy content blocks after rationalisation (3 Oct 2026, scripts/kg_blocks_rationalise.php):
 * Genesis accordions -> core Details (.kg-acc), testimonials -> core Quote (.kg-quote), one-column sections -> Group (.kg-panel). */
.wp-block-details.kg-acc > :not(summary) { padding-left: var(--k-space-5); padding-right: var(--k-space-5); }
.wp-block-details.kg-acc > :last-child { padding-bottom: var(--k-space-5); margin-bottom: 0; }
.wp-block-quote.kg-quote { border-left: 0; margin: 0 0 var(--k-space-4); padding: var(--k-space-5); background: var(--k-white); border-radius: var(--k-radius-card); box-shadow: var(--k-shadow); }
.wp-block-quote.kg-quote p { margin-bottom: var(--k-space-3); font-size: 16px; line-height: 1.5; }
.wp-block-quote.kg-quote cite { display: block; font-style: normal; font-size: 14px; color: var(--k-grey); }
.wp-block-group.kg-panel { background: var(--k-tint-blue); border-radius: var(--k-radius-card); padding: var(--k-space-5); margin: var(--k-space-6) 0; }
.wp-block-group.kg-panel > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
.entry-content .wp-block-gallery.has-nested-images { gap: 8px; }

/* Training Calendar month grid (inc/classdates.php, 3 Oct 2026) */
.kg-month__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: var(--k-space-4) 0; }
.kg-month__nav h2 { margin: 0; }
.kg-month { border: 1px solid var(--k-border); border-radius: var(--k-radius-card); overflow: hidden; }
.kg-month__head, .kg-month__body { display: grid; grid-template-columns: 44px repeat(7, 1fr); }
.kg-month__head span { padding: 8px; font-weight: 600; font-size: 14px; background: var(--k-tint-blue); text-align: center; }
.kg-month__day { min-height: 110px; padding: 6px; border-top: 1px solid var(--k-border); border-left: 1px solid var(--k-border); display: flex; flex-direction: column; gap: 4px; }
/* ISO week column (4 Oct 2026). */
.kg-month__wk { padding: 6px 4px; border-top: 1px solid var(--k-border); background: var(--k-tint-blue); font-size: 12px; font-weight: 600; color: var(--k-navy); text-align: center; }
.kg-month__wkn { display: none; font-weight: 400; color: var(--k-grey); }
.kg-month__day.is-out { background: var(--k-cream); color: var(--k-grey); }
.kg-month__day.is-today .kg-month__date { font-weight: 700; text-decoration: underline; }
.kg-month__date { font-size: 13px; }
.kg-month__wd { display: none; }
.kg-month__class { display: block; font-size: 13px; line-height: 1.3; text-decoration: none; }
.kg-month__class > span:not(.kg-code) { display: block; }
@media (max-width: 768px) {
	.kg-month__head { display: none; }
	.kg-month__body { display: block; }
	.kg-month__day { min-height: 0; border-left: 0; }
	.kg-month__day:not(.has-class) { display: none; }
	.kg-month__wd { display: inline; }
	.kg-month__wk { display: none; }
	.kg-month__wkn { display: inline; }
	.kg-month__date { font-weight: 600; }
}

/* How the course runs: a step with several items (After, 3 Oct 2026) */
.kg-steps .kg-steps__items { margin: 0; padding-left: 1.1em; font-size: 16px; }
.kg-steps .kg-steps__items li { margin: 0 0 4px; }

/* Bunny Stream videos ([kg_video], inc/video.php) */
.kg-video-figure { margin: 0 0 var(--k-space-6); }
.kg-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--k-radius-card); overflow: hidden; background: var(--k-navy); box-shadow: var(--k-shadow); }
.kg-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kg-video-figure figcaption { margin-top: var(--k-space-2); font-size: 0.9em; text-align: center; }

/* Work Tips post cards with image, and compact course chips (Logga, 4 Oct 2026). */
.kg-tip-card--img { padding-top: 0; overflow: hidden; }
.kg-tip-card__img { display: block; margin: 0 calc(-1 * var(--k-space-5)) var(--k-space-3); aspect-ratio: 16 / 9; overflow: hidden; background: var(--k-cream); }
.kg-tip-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--k-ease); }
.kg-tip-card--img:hover .kg-tip-card__img img { transform: scale(1.03); }
.kg-tip-card--img .kg-tag { align-self: flex-start; }
.kg-tip-card__img--none { background: linear-gradient(135deg, var(--k-tint-blue), var(--k-cream)); }
.kg-course-chips { display: flex; flex-wrap: wrap; gap: var(--k-space-2); margin: 0; padding: 0; list-style: none; }
.kg-course-chips li { margin: 0; }
.kg-course-chips a { display: inline-flex; align-items: center; gap: var(--k-space-2); min-height: 44px; padding: var(--k-space-2) var(--k-space-4); background: var(--k-white); border-radius: var(--k-radius-pill); box-shadow: var(--k-shadow); color: var(--k-navy); font-weight: 600; font-size: 15px; line-height: 1.3; text-decoration: none; transition: box-shadow var(--k-ease); }
.kg-course-chips a:hover { box-shadow: var(--k-shadow-hover); }
.kg-course-chips a:focus-visible { outline: 3px solid var(--k-navy); outline-offset: 2px; }
.kg-course-chips .kg-code { margin-left: 0; }
@media (prefers-reduced-motion: reduce) { .kg-tip-card__img img { transition: none; } .kg-tip-card--img:hover .kg-tip-card__img img { transform: none; } }
/* Phones: the topic pills on a Work Tips topic view sit in one row that scrolls sideways, so the courses and posts show sooner. */
@media (max-width: 600px) {
	.kg-tips-hub #by-topic { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(-1 * var(--k-space-4)); padding: var(--k-space-1) var(--k-space-4) var(--k-space-3); scrollbar-width: thin; }
	.kg-tips-hub #by-topic .kg-pill { flex: none; scroll-snap-align: start; }
}

/* Calendar: course code in its own column (Logga, 4 Oct 2026). Full-width buttons and filter selects stay inside their card (border-box). */
.kg-table td.kg-cal__code { white-space: nowrap; }
.kg-table td.kg-cal__code .kg-code { margin-left: 0; }
.kg-btn, .kg-filters select { box-sizing: border-box; }
.kg-btn--block { justify-content: center; }
.kg-calendar .kg-table td:nth-child(2), .kg-calendar .kg-table td:nth-child(5) { white-space: nowrap; }
.kg-table .kg-cal__wk { width: 1%; padding-left: 8px; padding-right: 4px; text-align: center; color: var(--k-grey); font-variant-numeric: tabular-nums; }
/* List view course image with the course name as a caption on hover or focus (4 Oct 2026). */
.kg-table td.kg-cal__course { width: auto; }
.kg-calendar .kg-table th, .kg-calendar .kg-table td { padding-left: 10px; padding-right: 10px; }
.kg-cal__img { position: relative; display: block; width: 128px; border-radius: var(--k-radius-control); overflow: hidden; text-decoration: none; }
.kg-cal__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--k-tint-blue); }
.kg-cal__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; background: var(--k-navy); color: var(--k-white); font-size: 13px; line-height: 1.3; opacity: 0; transform: translateY(4px); transition: opacity var(--k-ease), transform var(--k-ease); }
.kg-cal__img:hover .kg-cal__cap, .kg-cal__img:focus-visible .kg-cal__cap { opacity: 1; transform: none; }
@media (hover: none) {
	.kg-cal__img { overflow: visible; }
	.kg-cal__img img { border-radius: var(--k-radius-control); }
	.kg-cal__cap { position: static; padding: 4px 0 0; background: none; color: var(--k-blue); opacity: 1; transform: none; text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce) { .kg-cal__cap { transition: none; } }
/* Phones: .kg-course__main is display:contents, so its sections are flex items; min-width 0 keeps wide content (tables, sliders)
 * inside the screen. position:relative keeps the absolutely placed screen-reader header inside the scrolling table box. (4 Oct 2026) */
.kg-course__main > *, .kg-course__side > * { min-width: 0; max-width: 100%; }
.kg-table-wrap { position: relative; }

/* Pictures on class, course and topic cards, and the topic page picture (Logga, 4 Oct 2026). Same look as the post cards. */
.kg-card--img { padding-top: 0; overflow: hidden; }
.kg-card__img { display: block; margin: 0 calc(-1 * var(--k-space-5)) var(--k-space-3); aspect-ratio: 16 / 9; overflow: hidden; background: var(--k-cream); }
.kg-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--k-ease); }
.kg-card--img:hover .kg-card__img img { transform: scale(1.03); }
.kg-card__img--none { background: linear-gradient(135deg, var(--k-tint-blue), var(--k-cream)); }
.kg-card--img > .kg-tag { align-self: flex-start; }
.kg-topic-hero { margin: 0 0 var(--k-space-8); border-radius: var(--k-radius-card); overflow: hidden; box-shadow: var(--k-shadow); aspect-ratio: 21 / 9; }
.kg-topic-hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; } /* keep the bottom-right watermark tab in view */
@media (max-width: 600px) { .kg-topic-hero { aspect-ratio: 16 / 9; margin-bottom: var(--k-space-7); } }
@media (prefers-reduced-motion: reduce) { .kg-card__img img { transition: none; } .kg-card--img:hover .kg-card__img img { transform: none; } }

/* Public holidays on the Training Calendar (inc/holidays.php) */
.kg-table tr.kg-cal__holiday td { background: var(--k-cream); color: var(--k-navy); font-size: 14px; }
.kg-cal__scope { display: inline-block; margin-left: 8px; padding: 0 8px; border: 1px solid var(--k-border); border-radius: 20px; font-size: 12px; line-height: 20px; color: var(--k-grey); }
.kg-cal__est { font-size: 12px; font-style: italic; color: var(--k-grey); }
.kg-cal__holnote { margin-top: var(--k-space-3); color: var(--k-grey); }
.kg-month__day.is-holiday { background: var(--k-cream); }
.kg-month__hol { font-size: 12px; line-height: 1.3; color: var(--k-navy); font-weight: 600; }
.kg-month__hol .kg-cal__scope { margin-left: 4px; padding: 0 6px; font-size: 11px; line-height: 16px; font-weight: 400; }

/* In-house learning paths: one card for each path; a picture, then the course categories of the path in order (Logga, 4 Oct 2026) */
.kg-paths { display: grid; gap: var(--k-gutter); }
.kg-path { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); padding: 0; overflow: hidden; }
.kg-path .kg-card__img { margin: 0; aspect-ratio: auto; height: 100%; min-height: 220px; }
.kg-path__body { padding: var(--k-space-5); }
.kg-path__body h3 { margin-top: 0; }
.kg-path__stages { list-style: none; margin: var(--k-space-3) 0 0; padding: 0; counter-reset: kg-path; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--k-space-5); }
.kg-path__stages li { counter-increment: kg-path; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--k-space-3); align-content: start; padding: var(--k-space-3) 0; border-top: 1px solid var(--k-border); }
.kg-path__stages li::before { content: counter(kg-path); grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--k-navy); color: var(--k-white); font-family: var(--k-font-head); font-weight: 600; font-size: 14px; line-height: 28px; text-align: center; margin-top: 8px; }
.kg-path__stages a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; justify-self: start; }
.kg-path__stages a .kg-tag { font-size: 14px; padding: 5px 10px; }
.kg-path__stages a:hover .kg-tag, .kg-path__stages a:focus-visible .kg-tag { text-decoration: underline; }
.kg-path__stages a:focus-visible { outline: 3px solid var(--k-navy); outline-offset: 2px; }
.kg-path__covers { grid-column: 2; font-size: 15px; line-height: 1.5; color: var(--k-black); }
/* On the course catalogue the cards take the full page width: narrower picture, categories in as many columns as fit. */
.kg-paths-intro { margin-bottom: var(--k-space-6); }
.kg-paths--wide .kg-path { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
.kg-paths--wide .kg-path .kg-card__img { min-height: 180px; }
.kg-paths--wide .kg-path__stages { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.kg-topic-group { scroll-margin-top: 96px; }
@media (min-width: 1280px) { .kg-topic-group { scroll-margin-top: 132px; } }
@media (max-width: 768px) {
	.kg-path, .kg-paths--wide .kg-path { grid-template-columns: 1fr; }
	.kg-path .kg-card__img, .kg-paths--wide .kg-path .kg-card__img { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
	.kg-path__stages, .kg-paths--wide .kg-path__stages { grid-template-columns: 1fr; }
}

/* Training Calendar hint for the course images (4 Oct 2026): only where a mouse can hover. */
.kg-cal__hint { margin: 0 0 var(--k-space-3); font-size: 14px; color: var(--k-grey); }
.kg-cal__hint + .kg-cal__month { margin-top: var(--k-space-3); }
@media (hover: none) { .kg-cal__hint { display: none; } }

/* Training Calendar list on phones (4 Oct 2026): each class is a card (image, date and week, code and fee, Reserve). */
@media (max-width: 768px) {
	.kg-calendar .kg-table-wrap { overflow: visible; background: none; border-radius: 0; box-shadow: none; }
	.kg-calendar .kg-table, .kg-calendar .kg-table tbody { display: block; }
	.kg-calendar .kg-table thead { display: none; }
	.kg-calendar .kg-table tr { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--k-space-2) var(--k-space-3); margin: 0 0 var(--k-space-3); padding: var(--k-space-4); background: var(--k-white); border-radius: var(--k-radius-card); box-shadow: var(--k-shadow); }
	.kg-calendar .kg-table td { display: block; width: auto; padding: 0; border: 0; white-space: normal; font-size: 15px; }
	.kg-calendar .kg-table td.kg-cal__course { grid-column: 1 / -1; order: -1; }
	.kg-calendar .kg-cal__img { width: 100%; }
	.kg-calendar .kg-cal__cap { font-size: 15px; font-weight: 600; }
	.kg-calendar .kg-table td.kg-cal__date { order: 0; font-weight: 600; color: var(--k-navy); }
	.kg-calendar .kg-table td.kg-cal__wk { order: 1; text-align: right; }
	.kg-calendar .kg-table td.kg-cal__wk::before { content: attr(data-label) " "; }
	.kg-calendar .kg-table td.kg-cal__code { order: 2; }
	.kg-calendar .kg-table td.kg-cal__fee { order: 3; text-align: right; }
	.kg-calendar .kg-table td.kg-cal__go { grid-column: 1 / -1; order: 4; }
	.kg-calendar .kg-cal__go a { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--k-radius-control); background: var(--k-tint-blue); color: var(--k-blue); font-weight: 600; text-decoration: none; }
	.kg-calendar .kg-table tr.kg-cal__holiday { padding: var(--k-space-3) var(--k-space-4); background: var(--k-cream); box-shadow: none; border: 1px solid var(--k-border); }
	.kg-calendar .kg-table tr.kg-cal__holiday td { background: none; }
	.kg-calendar .kg-table tr.kg-cal__holiday td[colspan] { grid-column: 1 / -1; order: 2; }
}

/* Share bar above the footer on every page (4 Oct 2026): WhatsApp and Email. */
.kg-share { padding: 0 40px var(--k-space-7); }
@media (max-width: 768px) { .kg-share { padding-left: 20px; padding-right: 20px; } }
.kg-share__inner { max-width: 1200px; margin: 0 auto; padding-top: var(--k-space-5); border-top: 1px solid var(--k-border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--k-space-3) var(--k-space-5); }
.kg-share__label { margin: 0; font-family: var(--k-font-head); font-weight: 600; color: var(--k-navy); }
.kg-share__links { display: flex; flex-wrap: wrap; gap: var(--k-space-3); margin: 0; }
.kg-share__btn { display: inline-flex; align-items: center; gap: var(--k-space-2); min-height: 44px; box-shadow: var(--k-shadow); }
.kg-share__btn svg { flex: 0 0 auto; }

/* Home, in-house section: picture beside the text and card (Logga, 4 Oct 2026) */
.kg-inhouse { align-items: center; }
.kg-inhouse .kg-card { margin-top: var(--k-space-5); }
/* Share card at the end of the sidebar (4 Oct 2026): WhatsApp and Email side by side; "Ask HR to Enrol Me" full width. */
.kg-share-card .kg-share__links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-space-2); }
.kg-share-card .kg-share__btn { justify-content: center; padding-left: var(--k-space-3); padding-right: var(--k-space-3); box-shadow: none; }
.kg-share-card .kg-share__ask, .kg-share .kg-share__ask { grid-column: 1 / -1; }

/* Launch Spine set (6 Oct 2026): audience line in the hero, proof strip, in-house offer. */
.kg-hero--dark .kg-hero__for { color: rgba(255, 255, 255, .88); font-size: 15px; max-width: 34em; margin: var(--k-space-3) 0 0; }
.kg-proofstrip { padding-top: var(--k-space-6); padding-bottom: var(--k-space-5); }
.kg-proofstrip .kg-card h3 { margin-top: 0; }
.kg-offer { background: var(--k-white); border-radius: var(--k-radius-card); box-shadow: var(--k-shadow); padding: var(--k-space-5); margin: var(--k-space-5) 0; }
.kg-offer h2 { margin-top: 0; }
.kg-offer dl { display: grid; grid-template-columns: minmax(110px, 1fr) 4fr; gap: 10px 20px; margin: 0 0 var(--k-space-4); }
.kg-offer dt { font-weight: 700; }
.kg-offer dd { margin: 0; }
.kg-offer__fee { font-weight: 700; }
.kg-offer__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
@media (max-width: 600px) { .kg-offer dl { grid-template-columns: 1fr; gap: 2px 0; } .kg-offer dd { margin-bottom: 10px; } }

/* Learning Paths (Logga, 6 Oct 2026): tracks have no step numbers; course cards under each step of a path page. */
.kg-path__stages--tracks li::before { content: ""; width: 12px; height: 12px; margin: 16px 8px 0; background: var(--k-bahama); }
.kg-path-courses { margin: var(--k-space-4) 0 var(--k-space-6); }
@media (min-width: 1280px) {
	/* Courses mega menu, first row: the full course list and its PDF */
	.main-navigation .main-nav .mega-menu > ul > li.kg-menu-top { grid-column: span 2; border-bottom: 1px solid var(--k-border); padding-bottom: 8px; margin-bottom: 8px; }
	.main-navigation .main-nav .mega-menu > ul > li.kg-menu-pdf { text-align: right; }
	.main-navigation .main-nav .mega-menu > ul > li.kg-menu-top > a { color: var(--k-blue); text-decoration: underline; }
}

/* Wireframe fixes (6 Oct 2026) */
/* A path area with one course (or an odd last course): the card spans the row, picture left, text right. The picture
   and the text are centred on the card height (Logga, 6 Oct 2026). Rows: spacer, five text items, spacer. */
@media (min-width: 769px) {
	.kg-path-courses > .kg-card--img:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr repeat(5, auto) 1fr; column-gap: var(--k-space-5); padding: var(--k-space-5); }
	.kg-path-courses > .kg-card--img:last-child:nth-child(odd) > * { grid-column: 2; }
	.kg-path-courses > .kg-card--img:last-child:nth-child(odd) > .kg-card__img { grid-column: 1; grid-row: 1 / -1; align-self: center; margin: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; }
	.kg-path-courses > .kg-card--img:last-child:nth-child(odd) > :nth-child(2) { grid-row: 2; margin-top: 0; }
	.kg-path-courses > .kg-card--img:last-child:nth-child(odd) > :nth-child(3) { grid-row: 3; }
	.kg-path-courses > .kg-card--img:last-child:nth-child(odd) > :nth-child(4) { grid-row: 4; }
	.kg-path-courses > .kg-card--img:last-child:nth-child(odd) > :nth-child(5) { grid-row: 5; }
	.kg-path-courses > .kg-card--img:last-child:nth-child(odd) > :nth-child(6) { grid-row: 6; margin-bottom: 0; }
	.kg-path-courses > .kg-card--img:last-child:nth-child(odd) > .kg-chip { justify-self: start; }
}
/* Link to the Learning Paths page on /courses/ and In-house Training (the cards show only on /learning-paths/). */
.kg-paths-link p { margin: 0; }
.kg-paths-link .kg-paths-link__btn { margin-top: var(--k-space-4); }
/* 404 next steps */
.kg-404-links { margin: var(--k-space-6) 0 var(--k-space-7); }
/* Friendly 404 (27 Oct 2026): People Library cut-outs either side point in at the links; one above the links on a phone */
.kg-404 { display: grid; grid-template-columns: 170px minmax(0, 1fr) 170px; gap: var(--k-space-6); align-items: end; margin: var(--k-space-5) 0 var(--k-space-7); }
.kg-404__person { display: block; width: 100%; height: auto; }
.kg-404__person--m { display: none; }
.kg-404__label { font-family: var(--k-font-head); font-weight: 600; font-size: 18px; color: var(--k-navy); margin: var(--k-space-5) 0 var(--k-space-3); }
.kg-404__mid > .kg-404__label:first-of-type { margin-top: 0; }
.kg-404 .kg-404-links { margin: 0 0 var(--k-space-5); }
.kg-404__courses { margin-bottom: 0; }
.kg-404__courses .kg-chip { text-decoration: none; color: var(--k-navy); }
.kg-404__courses .kg-chip:hover, .kg-404__courses .kg-chip:focus { border-color: var(--k-navy); }
@media (max-width: 1100px) { .kg-404 { grid-template-columns: 120px minmax(0, 1fr) 120px; gap: var(--k-space-5); } }
@media (max-width: 900px) {
	.kg-404 { grid-template-columns: minmax(0, 1fr); }
	.kg-404__person--l, .kg-404__person--r { display: none; }
	.kg-404__person--m { display: block; width: auto; height: 230px; margin: 0 auto var(--k-space-4); }
}
.kg-404-links .kg-404-links__h { font-size: 20px; margin: 0 0 var(--k-space-2); }
.kg-404-links p { margin: 0 0 var(--k-space-3); }

/* Training Calendar (Logga, 6 Oct 2026): course names as text, no pictures; months after the first three fold into a bar. */
.kg-calendar .kg-table td.kg-cal__course a { font-weight: 600; }
.kg-cal__fold { margin: var(--k-space-3) 0; background: var(--k-white); border-radius: var(--k-radius-card); box-shadow: var(--k-shadow); }
.kg-cal__fold > summary { display: flex; align-items: center; min-height: 56px; padding: 0 var(--k-space-5); cursor: pointer; list-style: none; }
.kg-cal__fold > summary::-webkit-details-marker { display: none; }
.kg-cal__fold > summary::after { content: ""; width: 10px; height: 10px; margin-left: auto; border-right: 2px solid var(--k-navy); border-bottom: 2px solid var(--k-navy); transform: rotate(-45deg); transition: transform var(--k-ease); }
.kg-cal__fold[open] > summary::after { transform: rotate(45deg); }
.kg-cal__fold > summary:focus-visible { outline: 2px solid var(--k-navy); outline-offset: 2px; border-radius: var(--k-radius-card); }
.kg-cal__fold > summary .kg-cal__month { margin: 0; font-size: 20px; }
.kg-cal__count { font-family: var(--k-font-body); font-weight: 400; font-size: 16px; color: var(--k-grey); }
.kg-cal__fold > .kg-table-wrap { margin: 0 var(--k-space-4) var(--k-space-4); }
@media (max-width: 768px) {
	.kg-calendar .kg-table td.kg-cal__course { font-size: 16px; }
	.kg-cal__fold > summary { padding: 0 var(--k-space-4); }
	.kg-cal__fold > .kg-table-wrap { margin: 0 var(--k-space-3) var(--k-space-3); }
	.kg-cal__fold .kg-table tr { box-shadow: none; border: 1px solid var(--k-border); }
	/* Phone card: name; date and week; code, fee and Reserve on one row */
	.kg-calendar .kg-table tr:not(.kg-cal__holiday) { grid-template-columns: auto 1fr auto; grid-template-areas: "course course course" "date date wk" "code fee go"; }
	.kg-calendar .kg-table tr:not(.kg-cal__holiday) td.kg-cal__course { grid-area: course; }
	.kg-calendar .kg-table tr:not(.kg-cal__holiday) td.kg-cal__date { grid-area: date; }
	.kg-calendar .kg-table tr:not(.kg-cal__holiday) td.kg-cal__wk { grid-area: wk; }
	.kg-calendar .kg-table tr:not(.kg-cal__holiday) td.kg-cal__code { grid-area: code; }
	.kg-calendar .kg-table tr:not(.kg-cal__holiday) td.kg-cal__fee { grid-area: fee; text-align: left; }
	.kg-calendar .kg-table tr:not(.kg-cal__holiday) td.kg-cal__go { grid-area: go; }
	.kg-calendar .kg-table tr:not(.kg-cal__holiday) td.kg-cal__go a { padding: 0 20px; }
}

/* Forms (Logga, 6 Oct 2026; form 24 sample approved, then forms 25 to 27). Field widths are set in the form editor (half width = two columns).
 * kg-gf-inline: radio choices in one row. kg-gf-2col: checkbox choices in two columns. kg-gf-fixed: a select with one known value. */
.kg-form .gform_wrapper .kg-gf-inline .gfield_radio { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.kg-form .gform_wrapper .kg-gf-inline .gchoice { width: auto; flex: 0 1 auto; min-width: 0; max-width: 100%; display: flex; align-items: flex-start; gap: 8px; }
.kg-form .gform_wrapper .kg-gf-inline .gchoice input { flex: 0 0 auto; margin-top: 3px; } /* may shrink and wrap: long Malay options pushed phones sideways (16 Oct 2026) */
.kg-form .gform_wrapper .kg-gf-inline .gchoice label { max-width: none; width: auto; min-width: 0; flex: 1 1 auto; margin: 0; white-space: normal; overflow-wrap: anywhere; }
.kg-form .gform_wrapper .gform_fields .gfield--width-half select, .kg-form .gform_wrapper .gform_fields .gfield--width-half .ginput_container input.small { width: 100%; max-width: none; }
.kg-form .gform_wrapper .ginput_counter { display: none; }
@media (min-width: 769px) { .kg-form .gform_wrapper .kg-gf-2col .gfield_checkbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; } }
.kg-form .gform_wrapper textarea.small { height: 120px; min-height: 120px; }
.kg-form .gform_wrapper .gfield.kg-gf-fixed { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.kg-form .gform_wrapper .gfield.kg-gf-fixed .gfield_label { margin: 0; }
.kg-form .gform_wrapper .gfield.kg-gf-fixed .ginput_container { margin: 0; }
.kg-form .gform_wrapper .gfield.kg-gf-fixed select { appearance: none; -webkit-appearance: none; min-height: 0; height: auto; padding: 0; border: 0; background: none; font-weight: 600; color: var(--k-navy); pointer-events: none; }
.kg-form .gform_wrapper .gfield--type-number .gfield_description.instruction:not(.validation_message) { display: none; }
@media (max-width: 768px) { .kg-form .gform_wrapper .gform_fields { grid-template-columns: 1fr; } .kg-form .gform_wrapper .gfield { grid-column: 1 / -1; } }

/* No cut-off heads (Logga, 6 Oct 2026): a picture shows at its own ratio, or a frame crops only from the bottom.
 * Never anchor a crop to the bottom or the middle, never crop the sides of a people photo. */
.kg-card__img img, .kg-tip-card__img img, .kg-featured__img img, .kg-trainer-card__img img, .kg-cal__img img { object-position: 50% 0; }
.kg-topic-hero, .kg-topic-hero img { aspect-ratio: 16 / 9; }
.kg-topic-hero img { object-position: 50% 0; }
.kg-featured__img img { aspect-ratio: 16 / 9; height: auto; }
.kg-photo { aspect-ratio: auto; }
.kg-photo img { height: auto; object-fit: initial; }
.kg-path .kg-card__img, .kg-paths--wide .kg-path .kg-card__img { height: auto; min-height: 0; aspect-ratio: auto; align-self: start; }
.kg-path .kg-card__img img { height: auto; }
img.kg-img--contain { object-fit: contain !important; background: var(--k-cream); }

/* Career path cards (index /career-paths/, 6 Oct 2026): role areas as plain text in the track list. */
.kg-path__area { grid-column: 2; align-self: center; min-height: 44px; display: flex; align-items: center; font-family: var(--k-font-head); font-weight: 600; font-size: 15px; color: var(--k-navy); }
/* Career path pages on phones: course cards without the picture, to halve the page length (Logga, 6 Oct 2026). */
@media (max-width: 768px) { .kg-path-courses .kg-card__img { display: none; } }

/* Courses mega menu regrouped (Logga, 6 Oct 2026; Career Paths and Skills v6). Row 1: Full Course List, Courses by
   Career Path, PDF. Business Functions: Corporate Planning | Sales & Marketing (two inner columns) | Product with HR
   below | Governance, Risk & Compliance | Operational Excellence. Workplace Skills: Leadership | Communication | Personal
   Effectiveness. The menu order stays CP, S&M, Product, HR, ...; "order" moves HR under Product on desktop only. */
@media (min-width: 1280px) {
	/* Row 4 is 1fr: the tall columns grow into it, so HR sits right under Product. Padding 16 px: fits a 900 px screen. */
	.main-navigation .main-nav .mega-menu > ul { grid-template-rows: auto auto auto 1fr; padding: 16px 24px; }
	.main-navigation .main-nav .mega-menu > ul > li.kg-menu-label { grid-column: 1 / -1; border-bottom: 1px solid var(--k-border); }
	.main-navigation .main-nav .mega-menu > ul > li.kg-menu-label > a { font-family: var(--k-font-body); font-size: 13px; font-weight: 600; color: var(--k-grey); padding: 0 8px 6px; }
	.main-navigation .main-nav .mega-menu > ul > li.kg-mm-tall { grid-row: span 2; }
	.main-navigation .main-nav .mega-menu > ul > li.kg-mm-wide, .main-navigation .main-nav .mega-menu > ul > li.kg-mm-ws { grid-column: span 2; }
	.main-navigation .main-nav .mega-menu > ul > li.kg-mm-wide > ul { column-count: 2; column-gap: 16px; }
	.main-navigation .main-nav .mega-menu > ul > li.kg-mm-wide > ul > li { break-inside: avoid; }
	.main-navigation .main-nav .mega-menu li.kg-menu-colbreak { break-before: column; }
	.main-navigation .main-nav .mega-menu > ul > li.kg-mm-late { order: 1; }
	.main-navigation .main-nav .mega-menu > ul > li.kg-menu-label--ws, .main-navigation .main-nav .mega-menu > ul > li.kg-mm-ws { order: 2; }
	.main-navigation .main-nav .mega-menu > ul > li.kg-menu-all { order: 3; }
	.main-navigation .main-nav .mega-menu li.kg-menu-area > a { font-family: var(--k-font-head); font-weight: 600; color: var(--k-navy); padding-top: 10px; }
	.main-navigation .main-nav .mega-menu li.kg-menu-area:first-child > a, .main-navigation .main-nav .mega-menu li.kg-menu-colbreak > a { padding-top: 4px; }
}
.main-navigation .main-nav li.kg-menu-label > a, .main-navigation .main-nav li.kg-menu-nolink > a { cursor: default; }
/* Skill Areas dropdown (C-96, Logga 25 Oct 2026): Business Functions and Workplace Skills as headings in a plain dropdown. */
@media (min-width: 1280px) {
	.main-navigation .main-nav > ul > li:not(.mega-menu) > ul li.kg-menu-label > a { font-family: var(--k-font-body); font-size: 13px; font-weight: 600; color: var(--k-grey); background: none; padding-top: 10px; padding-bottom: 4px; }
	.main-navigation .main-nav > ul > li:not(.mega-menu) > ul li.kg-menu-label--ws { border-top: 1px solid var(--k-border); margin-top: 6px; }
	.main-navigation .main-nav > ul > li:not(.mega-menu) > ul li.kg-menu-all { border-top: 1px solid var(--k-border); margin-top: 6px; }
}
@media (max-width: 1279px) {
	.main-navigation.toggled .main-nav li.kg-menu-label > a { font-size: 13px; font-weight: 600; color: var(--k-grey); line-height: 36px; }
	.main-navigation.toggled .main-nav li.kg-menu-area > a { font-weight: 600; color: var(--k-navy); }
}
/* /courses/ catalogue in groups and skill areas (6 Oct 2026): a skill-area heading above its cards. */
.kg-area-group { margin-top: var(--k-space-5); }
.kg-area-group h3 { margin: 0 0 var(--k-space-3); font-size: 20px; }
.kg-area-group h3 a { color: var(--k-navy); text-decoration: none; }
.kg-area-group h3 a:hover, .kg-area-group h3 a:focus-visible { text-decoration: underline; }
.kg-cat-group > h2 + .kg-area-group { margin-top: var(--k-space-4); }
/* Trainer card: HRD Corp Accredited Trainer chip, same form as the Claimable chip (Logga, 7 Oct 2026). */
.kg-trainer-card .kg-chip--trainer { align-self: center; margin: 0 0 var(--k-space-3); font-size: 13px; line-height: 1.3; }
.kg-chip--trainer img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
/* The trainer's own HRD Corp badge instead of the words (Logga, 28 Oct 2026): 56 px on trainer cards, 40 px in trainer blocks. */
.kg-trainer-badge { display: block; width: 40px; height: 40px; margin: var(--k-space-2) 0; }
.kg-trainer-badge--56 { width: 56px; height: 56px; }
.kg-trainer-badge img { display: block; width: 100%; height: 100%; object-fit: contain; }
.kg-trainer-card .kg-trainer-badge { align-self: center; margin: 0 0 var(--k-space-3); }
/* Trainer profile: courses by skill area; career paths line. */
.kg-trainer-paths { margin: 0 0 var(--k-space-4); }
/* Skill Areas index (/topics/, 6 Oct 2026): hub links inside each skill-area card. */
.kg-topic-card__hubs { margin: 0 0 var(--k-space-3); font-size: 15px; }
.kg-topic-card .kg-card__link { margin-top: auto; }
.kg-chip--trainer:not(.kg-chip--claimable) { background: var(--k-white); border-color: var(--k-border); color: var(--k-navy); padding: 6px 12px; }
/* Gravity Forms required mark in the CI red, not the plugin red #C02B0A (CI check, 10 Oct 2026) */
.gform_wrapper { --gf-color-danger: var(--k-red); }
.gform_wrapper.gravity-theme .gfield_required.gfield_required_asterisk, .gform_wrapper .gfield_required.gfield_required_asterisk, .gform_wrapper .gfield_required { color: var(--k-red); }
/* Block-editor colour preset "theme-primary" (GeneratePress default #32373C) mapped to the CI navy: old posts use it on buttons (CI check, 10 Oct 2026) */
body { --wp--preset--color--theme-primary: #1B3A5C; }
body .has-theme-primary-background-color { background-color: var(--k-navy) !important; }
body .has-theme-primary-color { color: var(--k-navy) !important; }
/* Course and class side card (.kg-glance): label style in use since 10 Oct 2026; values stay right-aligned (rule above). */
.kg-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--k-space-4); margin: 0 0 var(--k-space-5); }
.kg-glance dt { font-family: var(--k-font-head); font-weight: 600; font-size: 13px; color: var(--k-grey); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 4px; }
.kg-glance dd { margin: 0; font-weight: 500; }
/* Trainer profile at-a-glance box: its own class, so course-card rules cannot reach it (13 Oct 2026: the shared .kg-glance class
   right-aligned the values). Label above, value below, both from the left edge. */
.kg-profile-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--k-space-4); margin: 0 0 var(--k-space-5); }
.kg-profile-glance dt { font-family: var(--k-font-head); font-weight: 600; font-size: 13px; color: var(--k-grey); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 4px; }
.kg-profile-glance dd { margin: 0; font-weight: 500; text-align: left; }
/* Trainer profile career table (10 Oct 2026) */
.kg-career td:first-child { white-space: nowrap; }
/* Block separator in a CI token (the block default is black at 20% opacity; CI check, 10 Oct 2026) */
.wp-block-separator, .wp-block-separator.has-alpha-channel-opacity, hr.wp-block-separator:not(.is-style-dots) { color: var(--k-charcoal-light); border-color: var(--k-charcoal-light); background-color: var(--k-charcoal-light); opacity: 1; }

/* Skill Areas index (Logga, 14 Oct 2026): a contextual picture on each skill-area card, title links to the area hub,
   "View the Courses" at the card foot, a full gap above "HRD Corp Funding". A lone last card (10 cards in 3 columns)
   spans the row: picture left, text right, both centred (same pattern as the career-path cards). */
.kg-area-card h3 a { color: inherit; text-decoration: none; }
.kg-area-card h3 a:hover, .kg-area-card h3 a:focus-visible { color: var(--k-blue); text-decoration: underline; }
.kg-area-card .kg-card__meta { margin: 0 0 var(--k-space-3); }
.kg-area-card__more { margin: auto 0 0; padding-top: var(--k-space-2); }
.kg-area-next { margin-top: var(--k-space-8); }
@media (min-width: 769px) {
	.kg-area-grid > .kg-area-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: 1fr repeat(4, auto) 1fr; column-gap: var(--k-space-6); padding: var(--k-space-5); }
	.kg-area-grid > .kg-area-card:last-child:nth-child(3n+1) > * { grid-column: 2; }
	.kg-area-grid > .kg-area-card:last-child:nth-child(3n+1) > .kg-card__img { grid-column: 1; grid-row: 1 / -1; align-self: center; margin: 0; border-radius: 10px; }
	.kg-area-grid > .kg-area-card:last-child:nth-child(3n+1) > :nth-child(2) { grid-row: 2; margin-top: 0; }
	.kg-area-grid > .kg-area-card:last-child:nth-child(3n+1) > :nth-child(3) { grid-row: 3; }
	.kg-area-grid > .kg-area-card:last-child:nth-child(3n+1) > :nth-child(4) { grid-row: 4; }
	.kg-area-grid > .kg-area-card:last-child:nth-child(3n+1) > :nth-child(5) { grid-row: 5; margin-top: 0; }
}

/* Courses mega menu (14 Oct 2026): "Courses by Skill Area" joins the first row. The first row keeps three links of two columns
   each (one line, so the columns below keep their rows); "Download the PDF" moves to the foot row, right, opposite "All Courses". */
@media (min-width: 1280px) {
	.main-navigation .main-nav .mega-menu > ul > li.kg-menu-all { grid-column: 1 / span 3; }
	/* Rows size to their content: with the height cap (100vh - 120px) the old 'auto auto auto 1fr' rows shrank and the longer Malay
	   columns ran into the Workplace Skills row. A menu taller than the window now scrolls inside instead. */
	.main-navigation .main-nav .mega-menu > ul { grid-template-rows: none; grid-auto-rows: auto; align-content: start; }
	.main-navigation .main-nav .mega-menu > ul > li.kg-menu-top.kg-menu-pdf { order: 4; grid-column: 4 / span 3; border-bottom: 0; margin-bottom: 0; padding-bottom: 0; border-top: 1px solid var(--k-border); padding-top: 8px; text-align: right; }
}

/* Courses mega menu scrolls when taller than the window (Logga, 25 Oct 2026: "the courses mega menu cannot scroll down"). The
   GeneratePress open state (.main-navigation:not(.toggled) ul li:hover > ul { overflow: visible }) beat our overflow-y: auto,
   so the menu ran past the window foot and the sticky header kept it out of reach. Same specificity here; the cap runs from the
   panel top (header bottom) to 16 px above the window foot; the wheel stays inside the menu. */
@media (min-width: 1280px) {
	.main-navigation:not(.toggled) .main-nav .mega-menu.sfHover > ul,
	.main-navigation:not(.toggled) .main-nav .mega-menu:hover > ul,
	.main-navigation:not(.toggled) .main-nav .mega-menu:focus-within > ul { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; max-height: calc(100vh - 136px); }
	.admin-bar .main-navigation:not(.toggled) .main-nav .mega-menu.sfHover > ul,
	.admin-bar .main-navigation:not(.toggled) .main-nav .mega-menu:hover > ul,
	.admin-bar .main-navigation:not(.toggled) .main-nav .mega-menu:focus-within > ul { max-height: calc(100vh - 168px); }
}

/* Laptops (Logga, 14 Oct 2026: "menu on laptop appearing as hamburger ... must be regular nav"; "hero ... do not resize to fit
   laptop screen sizes"). The full menu shows from 1280 px (was 1366 px; at 1200 px the Malay menu does not fit); from 1280 to 1439 px the items, gaps and logo are tighter
   so seven items and the button fit in EN and MS. The dark home hero scales with the screen height when the screen is under
   900 px tall, so the headline, text, search and both buttons are above the fold on 1280 x 720 and 1366 x 768. */
@media (min-width: 1280px) and (max-width: 1439px) {
	.main-navigation .main-nav ul li a { font-size: 14px; padding-left: 6px; padding-right: 6px; }
	.main-navigation .main-nav ul li .dropdown-menu-toggle { padding-left: 2px; }
	.main-navigation .main-nav ul li.kg-menu-cta > a { padding: 0 14px; margin-left: 6px; font-size: 15px; }
	.kg-brand .site-logo img, .kg-brand .header-image { width: 150px; }
	.main-navigation .main-nav ul ul li a { font-size: 14px; }
}
@media (min-width: 901px) and (max-height: 899px) {
	.kg-hero--dark .kg-hero__inner { padding-top: clamp(20px, 4.5vh, 72px); min-height: 0; }
	.kg-hero--dark .kg-hero__text { padding-bottom: clamp(20px, 4.5vh, 72px); }
	.kg-hero__eyebrow { margin-bottom: clamp(8px, 1.5vh, 16px); }
	.kg-hero--dark h1 { font-size: clamp(36px, 6.4vh, 56px); margin-bottom: clamp(8px, 1.5vh, 16px); }
	.kg-hero--dark .kg-lead { font-size: clamp(15px, 2.2vh, 18px); line-height: 1.5; }
	.kg-hero--dark .kg-search { margin-top: clamp(10px, 2vh, 24px); }
	.kg-hero--dark .kg-hero__buttons { margin-top: clamp(10px, 2vh, 24px); }
	.kg-hero--dark .kg-hero__media { min-height: 0; height: calc(100vh - 170px); max-height: 640px; }
	.kg-hero--dark .kg-hero__people { width: auto; height: 100%; right: -40px; }
	.kg-hero__pills { top: clamp(16px, 5vh, 56px); gap: clamp(6px, 1.1vh, 10px); }
	.kg-hero__pill { padding-top: clamp(6px, 1.1vh, 10px); padding-bottom: clamp(6px, 1.1vh, 10px); }
}

/* Checklist (Logga, 16 Oct 2026): an icon above each HRD Corp step title; pictures on the proof and "different" cards. */
.kg-step-icon { display: block; color: var(--k-gold); margin: 0 0 var(--k-space-2); line-height: 0; }
#hrdcorp .kg-card strong { display: block; }
.kg-proofstrip .kg-card--img h3, #difference .kg-card--img h3 { margin-top: var(--k-space-2); }
#difference .kg-card--img .kg-num { display: block; margin-top: var(--k-space-2); }

/* Class photos ("Class in action"; checklist, 16 Oct 2026: "some pictures appear half"). Every tile is 16:9 and full: a 16:9
 * photo fits exactly; an older 4:3 photo is cropped from the bottom only (top anchored), never from the sides or the top, so
 * heads stay whole (no-cut-heads rule above). */
.kg-photo { aspect-ratio: 16 / 9; }
.kg-photo img { height: 100%; object-fit: cover; object-position: 50% 0; }

/* Home Work Tips: one card per skill area in a row that scrolls sideways (19 Oct 2026) */
.kg-tips-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, calc((100% - 2 * var(--kg-gap, 24px)) / 3)); gap: var(--kg-gap, 24px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; overscroll-behavior-x: contain; }
.kg-tips-row > * { scroll-snap-align: start; }
@media (max-width: 768px) { .kg-tips-row { grid-auto-columns: 82%; } }

/* Home refresh pp02 v0.4 (Logga, 22 Oct 2026; BB-02B: heading weight, section eyebrow, hero aurora). */
h1, h2, h3 { font-family: var(--k-font-head); font-weight: 600; letter-spacing: -.02em; }
h1 { letter-spacing: -.03em; }
h3 { letter-spacing: -.01em; }
.kg-eyebrow { display: block; font-family: var(--k-font-body); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--k-success); margin: 0 0 10px; }
.kg-proofstrip h2 { margin-bottom: var(--k-space-5); }
/* Hero aurora: CI colours only (Bahama Blue, Mid-Green, Amber) at low opacity. No blur filter, no blend mode:
   the layers are soft gradients that move by transform and opacity only (smooth). Stops under reduced motion. */
.kg-hero.kg-hero--dark { position: relative; isolation: isolate; }
.kg-hero--dark .kg-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.kg-aurora i { position: absolute; display: block; border-radius: 50%; will-change: transform, opacity; backface-visibility: hidden; transform: translate3d(0, 0, 0); }
.kg-aurora .a1 { width: 75%; height: 90%; left: 30%; top: -15%; background: radial-gradient(closest-side, rgba(31, 78, 121, .85), rgba(31, 78, 121, 0)); animation: kgA1 28s ease-in-out infinite alternate; }
.kg-aurora .a2 { width: 65%; height: 75%; left: 45%; top: 25%; background: radial-gradient(closest-side, rgba(26, 107, 60, .7), rgba(26, 107, 60, 0)); animation: kgA2 34s ease-in-out infinite alternate; }
.kg-aurora .a3 { width: 45%; height: 45%; left: 58%; top: 0; background: radial-gradient(closest-side, rgba(255, 192, 0, .2), rgba(255, 192, 0, 0)); animation: kgA3 24s ease-in-out infinite alternate; }
.kg-aurora .a4 { width: 55%; height: 60%; left: -5%; top: 50%; background: radial-gradient(closest-side, rgba(31, 78, 121, .5), rgba(31, 78, 121, 0)); animation: kgA2 40s ease-in-out infinite alternate-reverse; }
.kg-aurora .a5 { width: 90%; height: 40%; left: 20%; top: 18%; background: radial-gradient(closest-side, rgba(26, 107, 60, .5), rgba(31, 78, 121, .3) 60%, rgba(31, 78, 121, 0)); animation: kgRib 30s ease-in-out infinite alternate; }
.kg-aurora .sh { width: 60%; height: 160%; left: 0; top: -30%; border-radius: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .05) 35%, rgba(255, 192, 0, .07) 50%, rgba(255, 255, 255, .05) 65%, rgba(255, 255, 255, 0) 100%); animation: kgShim 16s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes kgA1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-14%, 8%, 0) scale(1.12); } }
@keyframes kgA2 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(12%, -12%, 0) scale(.92); } }
@keyframes kgA3 { from { transform: translate3d(0, 0, 0) scale(1); opacity: .6; } to { transform: translate3d(-24%, 20%, 0) scale(1.25); opacity: 1; } }
@keyframes kgRib { from { transform: translate3d(-6%, 0, 0) rotate(-12deg) scaleY(1); } to { transform: translate3d(8%, 4%, 0) rotate(-4deg) scaleY(1.3); } }
@keyframes kgShim { 0% { transform: translate3d(-110%, 0, 0) skewX(-12deg); opacity: 0; } 10% { opacity: 1; } 55% { transform: translate3d(190%, 0, 0) skewX(-12deg); opacity: 1; } 62%, 100% { transform: translate3d(190%, 0, 0) skewX(-12deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kg-aurora i { animation: none !important; } .kg-aurora .sh { display: none; } }
.kg-hero--dark .kg-hero__inner { position: relative; z-index: 1; }
/* Hero boxes over the moving aurora: no backdrop blur (it re-renders each frame and flickers); solid fill on its own layer. */
.kg-hero--dark .kg-hero__pill { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(27, 58, 92, .96); transform: translateZ(0); backface-visibility: hidden; }
.kg-hero--dark .kg-hero__pill--main { background: var(--k-white); }
.kg-hero--dark .kg-hero__pill:hover, .kg-hero--dark .kg-hero__pill:focus { transform: translate3d(4px, 0, 0); background: var(--k-navy); }
.kg-hero--dark .kg-hero__pill--main:hover, .kg-hero--dark .kg-hero__pill--main:focus { background: var(--k-white); }
.kg-hero--dark .kg-search { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Career path scene hero (pp03-C, Logga 22 Oct 2026; inc/sections.php kg_scene_hero). Navy panel with the aurora on the left,
   the scene on the right (58%); no text or colour layer over the picture (CI-01C §7, §9.1). */
.kg-scene { position: relative; isolation: isolate; background: var(--k-navy); color: var(--k-white); overflow: hidden; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.kg-scene .kg-aurora { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* full width: on wide screens the picture is narrower than 58% (25 Oct 2026) */
/* No cut heads (Logga, 25 Oct 2026: "why does this cut off head still occur? ... a rule for any images"): the picture keeps its own
   shape at the band's full height, so its top and bottom are never cut on any screen width. It is never wider than 58% of the
   window; past that only the left side is trimmed, which every scene keeps empty for the title (CI-01C §14.1). */
.kg-scene__img { position: absolute; top: 0; right: 0; bottom: 0; width: auto; z-index: 1; }
.kg-scene__img img { height: 100%; width: auto; max-width: 58vw; object-fit: cover; object-position: 100% 50%; display: block; }
.kg-scene__img::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 120px; z-index: 1; background: linear-gradient(90deg, var(--k-navy), rgba(27, 58, 92, 0)); }
.kg-scene__inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 72px 40px; min-height: min(520px, calc(100vh - 140px)); display: flex; align-items: center; }
.kg-scene__text { width: 40%; max-width: 480px; }
.kg-scene h1 { color: var(--k-white); font-size: 46px; line-height: 1.08; margin: 0 0 var(--k-space-4); }
.kg-scene .kg-lead { color: rgba(255, 255, 255, .88); font-size: 18px; margin: 0; }
.kg-scene .kg-eyebrow { color: var(--k-tint-green, #E8F0EB); }
.kg-scene .kg-hero__buttons { display: flex; gap: 12px; flex-wrap: wrap; margin: var(--k-space-5) 0 0; }
.kg-section-page .kg-crumbs { margin-top: var(--k-space-5); }
@media (max-width: 1100px) { .kg-scene h1 { font-size: 40px; } }
@media (max-width: 900px) {
	.kg-scene .kg-aurora { right: 0; }
	.kg-scene__img { position: relative; width: 100%; aspect-ratio: 3 / 2; }
	.kg-scene__img img { width: 100%; max-width: none; }
	.kg-scene__img::before { inset: auto 0 0 0; width: auto; height: 60px; background: linear-gradient(0deg, var(--k-navy), rgba(27, 58, 92, 0)); }
	.kg-scene__inner { padding: 24px 20px 40px; min-height: 0; }
	.kg-scene__text { width: 100%; }
	.kg-scene h1 { font-size: 34px; }
}
/* Career Paths index cards (Logga, 22 Oct 2026): the path's scene on top, a Navy band with the aurora shimmer below it.
   The aurora stays in the band, never over the picture (CI-01C §7; BB-02B §9.1). Each card starts at a different moment. */
.kg-path--scene .kg-path__media { display: flex; flex-direction: column; background: var(--k-navy); }
.kg-path--scene .kg-path__scene { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.kg-path--scene .kg-path__scene img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 40%; display: block; }
.kg-path__band { position: relative; isolation: isolate; flex: 1; min-height: 96px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: var(--k-space-4) var(--k-space-5); overflow: hidden; color: var(--k-white); }
.kg-path__band .kg-aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.kg-path__band-name { font-family: var(--k-font-head); font-weight: 600; font-size: 20px; letter-spacing: -.01em; line-height: 1.2; }
.kg-path__band-meta { font-size: 14px; color: var(--k-tint-green); }
.kg-path--scene:nth-child(2) .kg-aurora i { animation-delay: -6s; }
.kg-path--scene:nth-child(3) .kg-aurora i { animation-delay: -11s; }
.kg-path--scene:nth-child(4) .kg-aurora i { animation-delay: -3s; }
.kg-path--scene:nth-child(5) .kg-aurora i { animation-delay: -9s; }
.kg-path--scene:nth-child(6) .kg-aurora i { animation-delay: -14s; }

.kg-scene + .kg-crumbs { margin-top: var(--k-space-5); }
/* Skill-area cards with the area's scene (home band and /skill-areas/): crop from the left so the people stay in frame. */
.kg-card__img--scene img { object-fit: cover; object-position: 100% 40%; }
/* Kognifi Aurora on the top line (Logga, 23 Oct 2026). The top line sticks above the sticky white header from 1280 px. On a page
   with a hero the top line and the hero share one aurora field (inc/frame.php sets --k-aur-off and --k-aur-h); elsewhere the top
   line carries its own slice. White header between them: the logo stays on white (CI-01). */
.kg-topline .kg-aurora--top { position: absolute; left: 0; right: 0; top: 0; height: 420px; z-index: 0; pointer-events: none; overflow: hidden; }
.kg-aur-linked .kg-topline .kg-aurora--top { height: var(--k-aur-h); }
.kg-aur-linked .kg-hero--dark .kg-aurora, .kg-aur-linked .kg-scene .kg-aurora { top: calc(-1 * var(--k-aur-off)); bottom: auto; height: var(--k-aur-h); }
.kg-aur-home .kg-topline .kg-aurora--top, .kg-aur-home .kg-hero--dark .kg-aurora { background: radial-gradient(120% 140% at 85% 30%, var(--k-bahama) 0%, var(--k-navy) 55%, #102640 100%); }
@media (min-width: 1280px) {
	.site-header { top: 36px; }
	.admin-bar .kg-topline { top: 32px; }
	.admin-bar .site-header { top: 68px; }
	.kg-course__side { top: 124px; }
}

/* Course page Aurora band (Logga, 24 Oct 2026; all courses; inc/course.php kg_course_aurora_band). Aurora behind the text, the course image
   whole on the right (16:9, rounded, no colour over it). Reuses .kg-scene (full-bleed Navy + aurora). */
.kg-scene--course .kg-aurora { right: 0; }
.kg-scene--course .kg-scene__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--k-space-7); align-items: center; padding: 56px 40px; min-height: 0; }
.kg-scene--course .kg-scene__text { width: auto; max-width: none; }
.kg-scene--course h1 { font-size: 42px; }
.kg-scene--course .kg-tagline { color: var(--k-white); margin: 0 0 var(--k-space-4); }
.kg-scene--course .kg-chips { margin-bottom: var(--k-space-4); }
.kg-scene--course .kg-lead { margin-bottom: 0; }
.kg-scene__pic { margin: 0; border-radius: var(--k-radius-card); overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); background: var(--k-white); }
.kg-scene__pic img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
	.kg-scene--course .kg-scene__inner { grid-template-columns: 1fr; gap: var(--k-space-5); padding: 28px 20px 36px; }
	.kg-scene--course .kg-scene__pic { order: -1; }
	.kg-scene--course h1 { font-size: 32px; }
}
/* Class page band (24 Oct 2026; all class pages): the four class facts under the lead, light on the Navy. */
.kg-scene__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k-space-3) var(--k-space-5); margin: var(--k-space-5) 0 0; }
.kg-scene__facts div { margin: 0; }
.kg-scene__facts dt { font-size: 13px; color: rgba(255, 255, 255, .72); margin: 0; }
.kg-scene__facts dd { margin: 0; font-weight: 600; color: var(--k-white); }
.kg-scene__facts a { color: var(--k-white); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) { .kg-scene__facts { grid-template-columns: 1fr; } }

/* Aurora band on Work Tips posts and trainer pages (Logga, 24 Oct 2026): same band as the course page. */
.kg-scene--tip .kg-tip-meta { font-size: 15px; color: rgba(255, 255, 255, .8); margin: 0 0 var(--k-space-4); }
.kg-scene--tip h1 { font-size: 38px; }
.kg-scene--trainer .kg-lead--small { font-size: 16px; margin: 0 0 var(--k-space-2); }
.kg-scene--trainer .kg-scene__pic { max-width: 380px; justify-self: end; width: 100%; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.kg-scene--trainer .kg-scene__pic img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .4)); } /* round portrait, no square behind it */
.kg-scene--trainer .kg-profile__proof { margin-top: var(--k-space-5); }
.kg-scene--trainer .kg-profile__badge { background: var(--k-white); border-radius: 12px; padding: 6px; line-height: 0; }
.kg-scene--trainer .kg-profile__badge img { width: 96px; }
.kg-profile__li { display: inline-flex; align-items: center; gap: 8px; }
.kg-li-mark { flex: none; }
@media (max-width: 900px) { .kg-scene--tip h1 { font-size: 30px; } .kg-scene--trainer .kg-scene__pic { justify-self: center; max-width: 300px; } }

/* Aurora band on the other pages (Logga, 24 Oct 2026; inc/bands.php): picture on the right, or a text-only band for legal pages. */
.kg-scene--page .kg-scene__inner { min-height: min(470px, calc(100vh - 140px)); padding: 56px 40px; } /* 58% x 470 px = 16:9: class photos keep their heads */
.kg-scene--page .kg-scene__img img { object-position: 100% 50%; } /* sides only, never the top (25 Oct 2026) */
.kg-scene--page .kg-scene__text { width: 40%; max-width: 520px; }
.kg-scene--page h1 { font-size: 40px; }
.kg-scene--text .kg-aurora { right: 0; }
.kg-scene--text .kg-scene__inner { min-height: 0; padding: 44px 40px; }
.kg-scene--text .kg-scene__text { width: 100%; max-width: 760px; }
.kg-scene--text h1 { font-size: 38px; margin-bottom: 0; }
@media (max-width: 900px) { .kg-scene--page .kg-scene__inner { min-height: 0; padding: 24px 20px 32px; } .kg-scene--page .kg-scene__text { width: 100%; } .kg-scene--page h1, .kg-scene--text h1 { font-size: 30px; } .kg-scene--text .kg-scene__inner { padding: 28px 20px; } }

/* Home hero alignment (Logga, 24 Oct 2026: "no design thinking"; follows the laptop fix the same day). Three columns on one top line:
   the H1, the Next Public Class pill and the heads of the team start at the same height, just below the SBL-KHAS eyebrow chip.
   The text column starts at the top; the pills sit in their own 208 px strip (nothing over a person, CI-01C); the team picture
   starts right of the strip, its top (the heads: the file has no space above them) on the same line, its feet on the band's
   bottom edge. When the space to the right is too narrow (below about 1200 px) the picture gets smaller and keeps the top line. */
@media (min-width: 901px) {
	.kg-hero--dark { --kg-eyebrow-gap: 16px; --kg-align: calc(29px + var(--kg-eyebrow-gap)); --kg-edge: max(32px, 50vw - 568px); }
	.kg-hero--dark .kg-hero__eyebrow { line-height: 19px; margin-bottom: var(--kg-eyebrow-gap); }
	.kg-hero--dark .kg-hero__inner { align-items: stretch; }
	.kg-hero--dark .kg-hero__text { align-self: start; }
	.kg-hero--dark .kg-hero__media { align-self: stretch; container-type: inline-size; }
	.kg-hero__pills { left: -56px; top: var(--kg-align); width: 208px; } /* into the column gap, at least 24 px clear of the text */
	.kg-hero__pill { white-space: normal; max-width: 100%; }
	.kg-hero--dark .kg-hero__people { top: var(--kg-align); bottom: auto; left: 162px; right: auto; width: auto; max-width: none; height: min(calc(100% - var(--kg-align)), calc((100cqw + var(--kg-edge) - 162px) / 1.023)); }
}
/* The band takes its height from the text, so the team picture (heads on the top line) can reach the bottom edge. On laptops up to 1679 px
   the H1 and lead scale with the window: a three-line Malay H1 and a six-line lead made the band taller than the picture can fill. */
@media (min-width: 901px) { .kg-hero--dark .kg-hero__inner { min-height: 0; } }
@media (min-width: 901px) and (max-width: 1679px) {
	.kg-hero--dark h1 { font-size: min(clamp(36px, 6.4vh, 56px), 3.3vw); }
	.kg-hero--dark .kg-lead { font-size: min(18px, max(15px, 1.15vw)); line-height: 1.5; }
	.kg-hero--dark .kg-hero__text { padding-bottom: min(clamp(20px, 4.5vh, 72px), 32px); }
	.kg-hero--dark .kg-hero__inner { padding-top: min(clamp(20px, 4.5vh, 72px), 48px); }
}
@media (min-width: 901px) and (max-height: 899px) {
	.kg-hero--dark { --kg-eyebrow-gap: clamp(8px, 1.5vh, 16px); }
	.kg-hero--dark .kg-hero__media { height: auto; max-height: none; }
}
/* Narrow windows (901 to 1199 px, tablets in landscape): the picture cannot reach both lines, so it stands on the band's bottom edge. */
@media (min-width: 901px) and (max-width: 1199px) { .kg-hero--dark .kg-hero__people { top: auto; bottom: 0; } }
/* Pill text: the class date on its own line and "1-to-1" kept whole (24 Oct 2026). */
.kg-hero__pill-date { display: block; white-space: nowrap; font-weight: 500; }
.kg-nowrap { white-space: nowrap; }
/* Search results page, grouped (24 Oct 2026; inc/search.php). */
.kg-search-page h1 { margin-top: var(--k-space-5); }
.kg-search--page { max-width: 640px; margin: var(--k-space-4) 0 var(--k-space-6); }
.kg-search-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kg-search-list li { display: flex; gap: 12px; align-items: baseline; }
.kg-search-type { flex: none; min-width: 72px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--k-grey); }
/* Full-screen hero on laptops and desktops (Logga, 24 Oct 2026): from 1280 px the band fills the window below the header (131 px:
   top line 36 + header 95), so the first screen is the hero only. The team picture can only grow as wide as the space right of the
   pills (--kg-hmax), so the extra height goes above the content: the eyebrow, H1, pill and heads move down together, keep their one
   top line, and the feet stay on the band's bottom edge. Phones and tablets keep their layout. */
@media (min-width: 1280px) {
	.kg-hero.kg-hero--dark { --kg-hmax: calc((544px + var(--kg-edge) - 162px) / 1.023); display: flex; flex-direction: column; min-height: calc(100svh - 131px); }
	.kg-hero--dark .kg-hero__inner { flex: 1 0 auto; width: 100%; box-sizing: border-box; padding-top: max(min(clamp(20px, 4.5vh, 72px), 48px), calc(100svh - 131px - var(--kg-align) - var(--kg-hmax))); }
}
@media (min-width: 1680px) {
	.kg-hero--dark .kg-hero__inner { padding-top: max(clamp(20px, 4.5vh, 72px), calc(100svh - 131px - var(--kg-align) - var(--kg-hmax))); }
}

/* Aurora band standard (24 Oct 2026; inc/bandstd.php): every page except home carries .kg-band-std (approved after the SA-KAM sample). */
@media (min-width: 901px) {
	.kg-band-std .kg-scene .kg-scene__inner { min-height: 480px; padding-top: 56px; padding-bottom: 56px; align-items: start; box-sizing: border-box; }
	.kg-band-std .kg-scene h1 { font-size: 42px; line-height: 1.1; margin-top: 0; }
	.kg-band-std .kg-scene .kg-eyebrow { display: block; width: fit-content; margin: 0 0 16px; line-height: 19px; }
	.kg-band-std .kg-scene__pic { align-self: start; margin-top: 35px; } /* level with the H1, below the eyebrow (19 px + 16 px), as on the home page (Logga, 24 Oct 2026) */
}
@media (min-width: 901px) and (max-width: 1279px) { .kg-band-std .kg-scene h1 { font-size: 34px; } }
@media (max-width: 900px) { .kg-band-std .kg-scene h1 { font-size: 30px; } }
/* Sticky course bar */
.kg-coursebar { position: fixed; left: 0; right: 0; top: 0; z-index: 90; background: var(--k-white); border-bottom: 1px solid var(--k-border, #E0E0D8); box-shadow: 0 6px 18px rgba(17, 17, 17, .08); transform: translateY(-120%); transition: transform .25s ease; }
.kg-coursebar.is-on { transform: none; }
.kg-coursebar__inner { max-width: 1200px; margin: 0 auto; padding: 8px 40px; height: 64px; box-sizing: border-box; display: flex; align-items: center; gap: 16px; }
.kg-coursebar__img { width: auto; height: 48px; max-width: 96px; object-fit: contain; border-radius: 6px; flex: none; } /* the whole picture at its own shape: no crop, so no cut heads (Logga, 25 Oct 2026) */
.kg-coursebar__name { font-family: var(--k-font-head); font-weight: 600; font-size: 16px; color: var(--k-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kg-coursebar__code { font-weight: 500; color: var(--k-grey); }
.kg-coursebar__next { font-size: 14px; color: var(--k-black, #111); white-space: nowrap; margin-left: auto; }
.kg-coursebar__cta { flex: none; padding: 8px 18px; }
/* Trainer bar (C-86, 25 Oct 2026): the round portrait in a cream circle, as in the trainer band */
.kg-coursebar__roundel { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--k-cream, #FAFAF5); box-shadow: 0 2px 8px rgba(17, 17, 17, .18); overflow: hidden; }
.kg-coursebar__roundel .kg-coursebar__img { width: 86%; height: 86%; border-radius: 50%; object-fit: cover; }
.kg-coursebar--trainer .kg-coursebar__code { font-size: 14px; }
.kg-coursebar--trainer .kg-coursebar__name { flex: none; }
/* Badge, LinkedIn pill and next class (Logga, 25 Oct 2026: a trainer page is middle of the funnel, so no Get a Quote) */
.kg-tbar__badge { flex: none; display: block; line-height: 0; }
.kg-tbar__badge img { width: 40px; height: 40px; object-fit: contain; }
.kg-tbar__areas { min-width: 0; font-size: 13px; line-height: 1.3; color: var(--k-grey); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* all skill areas on up to two lines (25 Oct 2026) */
.kg-tbar__next { margin-left: auto; flex: none; max-width: 48%; /* room for the longest course name with its code at 1280 px (OSHA, 25 Oct 2026) */ display: flex; align-items: center; gap: 12px; color: var(--k-navy); text-decoration: none; padding: 4px 8px; border-radius: 8px; transition: background var(--k-ease); }
.kg-tbar__next:hover, .kg-tbar__next:focus-visible { background: var(--k-cream, #FAFAF5); }
.kg-tbar__class { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.kg-tbar__eyebrow { font-size: 12px; color: var(--k-grey); white-space: nowrap; }
.kg-tbar__class strong { font-family: var(--k-font-head); font-weight: 600; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* a long course name wraps; its code stays visible */
@media (max-width: 1023px) { .kg-coursebar { display: none; } }
@media (prefers-reduced-motion: reduce) { .kg-coursebar { transition: none; } }
/* Band standard rollout (24 Oct 2026): text-only bands are shorter; a band that opens a page wrapper sits right under the menu. */
@media (min-width: 901px) { .kg-band-std .kg-scene--text .kg-scene__inner { min-height: 0; } }
.kg-page:has(> .kg-scene:first-child) { padding-top: 0; }
.kg-page > .kg-scene:first-child { margin-top: 0; }
/* With the band carrying the H1 and the answer, the first section of a course or class page follows the breadcrumbs directly: 32 px above it (CI spacing rule, 24 Oct 2026). */
.kg-course__main > .kg-crumbs + section { margin-top: 32px; }
/* About page team (24 Oct 2026): two operations team members side by side, smaller roundels than the Principal Consultant; the Trainers
   teaser picture links to the trainer directory. */
.kg-team { gap: var(--k-gutter); }
.kg-person--team .wp-block-media-text__media img { border-radius: 50%; max-width: 140px; }
/* G6 (28 Oct 2026): an article's author link opens the card (/about/#alaa-rosli); keep the name clear of the sticky header and page bar */
.kg-person--team[id] { scroll-margin-top: 96px; }
@media (min-width: 1280px) { .kg-person--team[id] { scroll-margin-top: 140px; } }
.kg-trainers-teaser .wp-block-media-text__media img { border-radius: var(--k-radius-card); }
.kg-trainers-teaser { margin-bottom: var(--k-space-8); }
/* Trainer portrait (Logga, 24 Oct 2026: "look very big"): a cream roundel from the H1 line down to the middle of the LinkedIn button
   (size set by the script in inc/listings.php; 260 px until it runs), the portrait centred inside it at 86 %. */
.kg-scene--trainer .kg-scene__pic { --kg-roundel: 260px; width: var(--kg-roundel); height: var(--kg-roundel); max-width: none; justify-self: end; align-self: start; display: grid; place-items: center; border-radius: 50%; background: var(--k-cream, #FAFAF5); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); overflow: hidden; }
.kg-scene--trainer .kg-scene__pic img { width: 86%; height: 86%; filter: none; }
@media (max-width: 900px) { .kg-scene--trainer .kg-scene__pic { --kg-roundel: 220px !important; justify-self: start; } }
/* By Course page (C-73, 25 Oct 2026): class pages by skill area, one row per course: name, code chip, next date. */
.kg-bycourse__jumps { margin: var(--k-space-4) 0 var(--k-space-5); }
.kg-bycourse__area { margin-top: var(--k-space-7); scroll-margin-top: 140px; }
.kg-bycourse__area h2 a { color: var(--k-navy); text-decoration: none; }
.kg-bycourse__area h2 a:hover, .kg-bycourse__area h2 a:focus-visible { text-decoration: underline; }
.kg-bycourse { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--k-border); }
.kg-bycourse__row { display: grid; grid-template-columns: 1fr auto 240px; gap: 8px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--k-border); }
.kg-bycourse__name { font-family: var(--k-font-head); font-weight: 600; color: var(--k-navy); text-decoration: none; }
.kg-bycourse__name:hover, .kg-bycourse__name:focus-visible { text-decoration: underline; }
.kg-bycourse__date { font-size: 15px; color: var(--k-black); }
.kg-bycourse__date.is-none { color: var(--k-grey); }
@media (max-width: 768px) {
	.kg-bycourse__row { grid-template-columns: 1fr auto; }
	.kg-bycourse__date { grid-column: 1 / -1; }
}

/* Training Calendar > By Course > skill area > course (Logga, 27 Oct 2026): every course list opens level with the top of the
 * skill-area list, so a long list low in the menu (Communication, 8 courses) stays on a 1280 x 720 laptop screen. */
@media (min-width: 1280px) {
	.main-navigation .kg-menu-bycourse > ul > li { position: static; }
	.main-navigation .kg-menu-bycourse > ul > li > ul { top: 0; }
}

/* Space above a heading that follows a block with no bottom margin: section, card, form, table, picture, grid, container (29 Oct 2026).
   Paragraphs and lists have their own margin; vertical margins collapse, so their spacing does not change. A hidden script between the two does not stop the rule. */
:is(section, .kg-card, .kg-form-embed, .kg-grid, figure, table, .wp-block-table, .wp-block-image, .wp-block-group, .wp-block-columns, .gb-container, .gb-element, .gb-grid-wrapper, details, iframe, video, .kg-video, .kg-logos, .kg-quote, blockquote) + :is(h2, h3, h4),
:is(section, .kg-card, .kg-form-embed, .kg-grid, figure, table, .wp-block-table, .wp-block-image, .wp-block-group, .wp-block-columns, .gb-container, .gb-element, .gb-grid-wrapper, details, iframe, video, .kg-video, .kg-logos, .kg-quote, blockquote) + :is(script, style, template) + :is(h2, h3, h4) { margin-top: var(--k-space-7); }
:is(section, .kg-card, .kg-form-embed, .kg-grid, figure, table, .wp-block-table, .wp-block-image, .wp-block-group, .wp-block-columns, .gb-container, .gb-element, .gb-grid-wrapper, details, iframe, video, .kg-video, .kg-logos, .kg-quote, blockquote) + :is(h3, h4),
:is(section, .kg-card, .kg-form-embed, .kg-grid, figure, table, .wp-block-table, .wp-block-image, .wp-block-group, .wp-block-columns, .gb-container, .gb-element, .gb-grid-wrapper, details, iframe, video, .kg-video, .kg-logos, .kg-quote, blockquote) + :is(script, style, template) + :is(h3, h4) { margin-top: var(--k-space-6); }