/* =========================================================
   OPERiONPlus — Malaysia AI Workforce Transformation Partner
   Design System: corporate training / capability-development arm
   of the OPERiON group. Deep teal + warm amber accent, leaf-green
   secondary highlight — a "learning & growth" palette distinct
   from OPERiON's navy/red. Same component system as sister sites.
   (Variable names kept as -navy-/-red-/-gold- for parity with the
   shared component CSS across the OPERiON group's sites — only the
   hex values differ per brand.)
   ========================================================= */

:root {
  /* --- Color: teal family (brand primary, was "navy") --- */
  --color-navy-900: #052423;
  --color-navy-800: #0b4f49;   /* brand primary — headings, dark sections */
  --color-navy-700: #10685f;
  --color-navy-600: #178274;
  --color-navy-100: #e2f4f0;   /* tint background */
  --color-navy-50:  #f3fbf9;

  /* --- Color: amber accent (brand CTA, was "red") --- */
  --color-red-700: #a85c0a;
  --color-red-600: #d1780f;
  --color-red-500: #f2971a;    /* primary accent — buttons, links, highlights */
  --color-red-100: #fdecd2;

  /* --- Color: leaf-green (secondary highlight — stats, awards, was "gold") --- */
  --color-gold-600: #4f7a3a;
  --color-gold-500: #75a854;
  --color-gold-100: #eaf3e2;

  /* --- Neutrals --- */
  --color-paper: #ffffff;
  --color-mist: #f7f8fa;
  --color-mist-dark: #eef1f5;
  --color-border: #e2e6ec;
  --color-ink-900: #12151c;
  --color-ink-700: #333a45;
  --color-ink-400: #6b7280;

  /* --- Semantic --- */
  --color-bg: var(--color-paper);
  --color-bg-alt: var(--color-mist);
  --color-bg-dark: var(--color-navy-800);
  --color-text: var(--color-ink-700);
  --color-text-muted: var(--color-ink-400);
  --color-text-inverse: #ffffff;
  --color-accent: var(--color-red-500);
  --color-accent-text: var(--color-red-600);
  --color-focus: var(--color-red-600);

  /* --- Typography --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --fs-display-lg: clamp(2.5rem, 1.8rem + 3vw, 4.25rem);
  --fs-display: clamp(2rem, 1.6rem + 2vw, 3rem);
  --fs-h2: clamp(1.6rem, 1.4rem + 1vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.6rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --lh-tight: 1.15;
  --lh-normal: 1.6;

  /* --- Spacing scale --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 7rem;

  /* --- Layout --- */
  --max-width: 1240px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-base: 450ms;
  --dur-slow: 800ms;

  /* --- Pillar accent layer (2026-08 two-tone branding round) ---
     A per-pillar accent applied ON TOP of the base teal/amber/leaf-green
     palette above — not a replacement for it. Leadership Development
     carries an orange accent, Digitalisation Workshops a purple accent.
     Global chrome (header/footer/body text/base CTA colour) keeps using
     the palette above unchanged. */
  --pillar-leadership-accent: #c2540a;
  --pillar-leadership-accent-dark: #9c4308;
  --pillar-leadership-tint: #fdf1e6;
  --pillar-digitalisation-accent: #6d3fb8;
  --pillar-digitalisation-accent-dark: #553091;
  --pillar-digitalisation-tint: #f2ecfa;
  /* Solid-fill variants for the homepage pillar cards (2026-08 round —
     "bold saturated color block" request). Deeper/more saturated than the
     accent above, which was tuned for text/icon/border use on a white
     card, not a full-bleed background behind white text. Contrast vs
     #ffffff: leadership 5.46:1, digitalisation 6.88:1 — both pass WCAG AA
     for body text (>=4.5:1) with margin. See main.css .pillar-card--leadership
     / .pillar-card--digitalisation below for usage. */
  --pillar-leadership-solid: #b3480a;
  --pillar-digitalisation-solid: #6d3fb8;
}

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
a { color: var(--color-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-tight); margin: 0 0 var(--space-2); color: var(--color-navy-800); overflow-wrap: break-word; hyphens: auto; }
h1 { font-size: var(--fs-display-lg); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.005em; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
p { margin: 0 0 var(--space-2); }
ul, ol { margin: 0 0 var(--space-2); padding-left: 1.25em; }
button { font-family: inherit; font-size: inherit; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: 0; z-index: 1000;
  background: var(--color-navy-900); color: #fff; padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm); transform: translateY(-120%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0.5rem); }

/* =========================================================
   Layout helpers
   ========================================================= */
.container { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-3); }
.section { padding-block: var(--space-6); }
.section--tight { padding-block: var(--space-5); }
.section--dark { background: var(--color-bg-dark); color: var(--color-text-inverse); }
.section--dark h2, .section--dark h3 { color: #fff; }
.why-choose-credentials {
  margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; gap: var(--space-3); justify-content: center; flex-wrap: wrap; text-align: left;
}
.why-choose-credentials img { height: 56px; width: auto; background: #fff; padding: 0.5rem 0.7rem; border-radius: 10px; flex-shrink: 0; }
.why-choose-credentials p { color: rgba(255,255,255,0.75); font-size: 0.92rem; max-width: 34em; margin: 0; }
.section--alt { background: var(--color-bg-alt); }
.grid { display: grid; gap: var(--space-3); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.consult-illus { text-align: center; padding: var(--space-2); }
.consult-illus-icon {
  width: 60px; height: 60px; border-radius: 18px 6px 18px 6px; margin: 0 auto 0.85rem;
  background: linear-gradient(135deg, var(--color-navy-800), var(--color-red-500));
  display: grid; place-items: center;
}
.consult-illus h3 { margin-bottom: 0.3rem; }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pillars-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .pillars-grid { grid-template-columns: 1fr; } }
.who-we-are-grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-5); }
@media (max-width: 860px) { .who-we-are-grid { grid-template-columns: 1fr; } }
.grid-3x2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) { .grid-3x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid-3x2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Trainer cards (trainers.html): 1 per row on mobile, 2 on tablet, 4 on
   desktop/wide viewports — same responsive breakpoints as .grid-3x2 above. */
.trainers-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) { .trainers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .trainers-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.eyebrow {
  display: inline-block; font-size: var(--fs-small); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-text);
  margin-bottom: var(--space-1);
}
.lead { font-size: var(--fs-lead); color: var(--color-text); max-width: 46em; }
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.85em 1.6em; border-radius: 999px; font-weight: 700;
  font-size: 1rem; border: 2px solid transparent; cursor: pointer;
  box-shadow: 0 0 0 0 rgba(0,12,61,0);
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out), background var(--dur-fast), border-color var(--dur-fast);
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(0,12,61,0.4); text-decoration: none; }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-red-700); }
.btn-outline { background: transparent; border-color: currentColor; color: inherit; }
.btn-outline:hover { background: rgba(255, 67, 56, 0.08); }
.btn-ghost { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.45); }
.btn-lg { padding: 1.05em 2.1em; font-size: 1.05rem; }
.btn-whatsapp { background: #1ea952; color: #fff; }
.btn-whatsapp:hover { background: #178a43; }

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* =========================================================
   Header / Multi-tier navigation
   ========================================================= */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: 0 8px 24px -16px rgba(0,12,61,0.3);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 78px; gap: var(--space-3);
}
.brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.15rem; color: var(--color-navy-900); flex-shrink: 0; }
.brand-logo { height: 52px; width: auto; display: block; }
.brand-logo-white { display: none; }
.brand-logo-color { display: block; }
.site-footer .brand-logo { height: 44px; }
.nav { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.nav-list { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; align-items: center; flex-wrap: nowrap; }
.nav-list > li { position: relative; display: flex; align-items: center; }
.nav-list > li > a, .has-mega {
  position: relative;
  font-weight: 600; font-size: 0.96rem; line-height: 1; color: var(--color-ink-700); padding: 0.5rem 0;
  display: inline-flex; align-items: center; border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-list > li > a:hover, .nav-list > li.is-open > .has-mega { color: var(--color-accent-text); text-decoration: none; }
/* Animated underline (::after scaleX) on plain nav links only — the
   mega-menu trigger buttons already signal state via the chevron. */
.nav-list > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform 250ms var(--ease-out);
}
.nav-list > li > a:hover::after { transform: scaleX(1); }
.has-mega { gap: 0.3em; background: none; border: 0; cursor: pointer; }
.has-mega .chev { transition: transform var(--dur-fast) var(--ease-out); font-size: 1.15em; display: inline-block; margin-left: 0.15em; }
.has-mega[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Multi-tier mega-menu: supports grouped columns with tier labels
   (About Us submenu, Software "series" groupings, etc.) */
.mega-menu {
  position: absolute; top: calc(100% + 14px); left: 0; transform: translateX(-10%);
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: 0 24px 48px -12px rgba(0,12,61,0.22);
  padding: var(--space-3); min-width: 320px;
  display: grid; gap: var(--space-3);
  grid-auto-flow: column;
  opacity: 0; visibility: hidden; translate: 0 8px;
  transition: opacity var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.mega-menu.mega-menu--wide { min-width: 900px; }
.mega-menu.mega-menu--xwide { min-width: 1040px; }
@media (min-width: 1181px) {
  .mega-menu.mega-menu--wide, .mega-menu.mega-menu--xwide { max-width: calc(100vw - 2 * var(--space-3)); }
}
.mega-col { display: grid; gap: 0.2rem; align-content: start; min-width: 200px; }
.nav-list > li.is-open > .mega-menu { opacity: 1; visibility: visible; translate: 0 0; }
.mega-menu a { color: var(--color-ink-700); padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.92rem; }
.mega-menu a:hover { background: var(--color-navy-50); color: var(--color-accent-text); text-decoration: none; }
.mega-menu .tier-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted);
  padding: 0.25rem 0.7rem; font-weight: 700;
}

/* Rich menu items: icon + title + italic description (Web Design, Mobile App) */
.mega-link-rich { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); }
.mega-link-rich:hover { background: var(--color-navy-50); text-decoration: none; }
.mega-link-icon { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; margin-top: 2px; }
.mega-link-icon--svg { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; margin-top: 2px; }
.mega-profile-avatar {
  width: 100%; aspect-ratio: 4 / 5; border-radius: 22px 6px 22px 6px; margin-bottom: var(--space-2);
  background: linear-gradient(140deg, var(--color-navy-700), var(--color-navy-900));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 2.75rem; font-weight: 800; letter-spacing: 0.02em;
}
.pillar-icon--svg, .value-icon--svg {
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  background: var(--color-navy-100); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-2);
}
.placeholder-photo {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--color-navy-100); color: var(--color-navy-700); font-size: 0.85rem; font-weight: 600;
  border: 1.5px dashed var(--color-navy-600); border-radius: var(--radius-md); padding: var(--space-3);
  min-height: 220px;
}
.mega-link-body strong { display: block; color: var(--color-navy-800); font-weight: 700; font-size: 0.92rem; }
.mega-link-body span { display: block; color: var(--color-text-muted); font-size: 0.78rem; font-style: italic; margin-top: 0.15rem; line-height: 1.35; }

/* Bar items: red accent bar + title + italic description (Software, Resources) */
.mega-col--bars a { border-left: 3px solid var(--color-red-500); padding: 0.1rem 0 0.1rem 0.7rem; margin-bottom: 0.85rem; display: block; border-radius: 0; }
.mega-col--bars a:last-child { margin-bottom: 0; }
.mega-col--bars a:hover { background: none; }
.mega-col--bars a strong { display: block; color: var(--color-navy-800); font-weight: 700; }
.mega-col--bars a span { display: block; font-style: italic; color: var(--color-text-muted); font-size: 0.78rem; margin-top: 0.15rem; line-height: 1.35; }

/* Grouped-column title with icon (IoT menu subgroups) */
.mega-group-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--color-navy-800); padding: 0.25rem 0.7rem 0.6rem; }

/* Full-card image-overlay promo at the end of a mega-menu: the photo IS
   the card, text sits on a dark gradient over it, zooms gently on hover. */
.mega-promo-card {
  position: relative; width: 340px; min-height: 320px; flex-shrink: 0;
  border-radius: 22px; overflow: hidden; margin-left: var(--space-2);
}
.mega-promo-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.mega-promo-card:hover img { transform: scale(1.05); }
.mega-promo-card-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-3); z-index: 1;
  background: linear-gradient(to top, rgba(0,12,61,0.92) 0%, rgba(0,12,61,0.6) 45%, rgba(0,12,61,0.05) 80%);
  transition: transform 0.35s var(--ease-out);
}
.mega-promo-card:hover .mega-promo-card-overlay { transform: translateY(-8px); }
.mega-promo-card-overlay h4 { color: #fff; font-size: 1.15rem; margin-bottom: 0.4rem; line-height: 1.25; }
.mega-promo-card-overlay p { color: rgba(255,255,255,0.85); font-size: 0.85rem; margin-bottom: 0.7rem; line-height: 1.4; }
.mega-promo-card-overlay a { color: #fff; font-weight: 700; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.3em; }
.mega-promo-card-overlay a:hover { color: var(--color-gold-500); text-decoration: none; }

/* About Us menu: Lukas's profile card — photo up top, credentials on a
   plain panel below (distinct from the dark-overlay treatment above,
   since this is meant to read as personal/trustworthy, not promotional). */
.mega-profile-card { width: 260px; flex-shrink: 0; margin-left: var(--space-2); }
.mega-profile-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px 6px 22px 6px; margin-bottom: var(--space-2); }
.mega-profile-card h4 { font-size: 1.05rem; margin-bottom: 0.15rem; color: var(--color-navy-800); }
.mega-profile-card .mega-profile-role { color: var(--color-accent-text); font-size: 0.82rem; font-weight: 700; margin-bottom: 0.6rem; }
.mega-profile-card ul { list-style: none; padding: 0; margin: 0 0 0.85rem; display: grid; gap: 0.35rem; }
.mega-profile-card ul li { font-size: 0.8rem; color: var(--color-text-muted); padding-left: 1.1em; position: relative; }
.mega-profile-card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; }
.mega-profile-card a.btn { font-size: 0.82rem; padding: 0.5em 1.1em; }

/* Testimonial/quote panel (About Us) */
.mega-quote { width: 240px; flex-shrink: 0; border-left: 1px solid var(--color-border); padding-left: var(--space-3); }
.mega-quote .mega-quote-stars { color: var(--color-gold-500); margin-bottom: 0.5rem; letter-spacing: 0.1em; }
.mega-quote blockquote { font-style: italic; color: var(--color-ink-700); font-size: 0.88rem; margin: 0 0 0.75rem; line-height: 1.4; }
.mega-quote cite { font-style: normal; font-weight: 700; color: var(--color-navy-800); display: block; font-size: 0.82rem; }
.mega-quote .mega-quote-role { color: var(--color-text-muted); font-size: 0.76rem; }

.nav-cta { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.nav-cta .btn-lg { padding: 0.8em 1.4em; font-size: 0.92rem; white-space: nowrap; }
.mobile-toggle { display: none; }

@media (max-width: 1180px) {
  .brand-logo { height: 38px; }
  .site-header .container { gap: var(--space-2); }
  .nav-list { display: none; }
  .nav-list > li { flex-direction: column; align-items: stretch; }
  .mobile-toggle {
    display: inline-flex; background: none; border: 2px solid var(--color-ink-700); border-radius: 10px;
    width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
    color: var(--color-ink-700);
  }
  .nav.is-mobile-open .nav-list {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; padding: var(--space-3); border-bottom: 1px solid var(--color-border);
    box-shadow: 0 24px 32px -16px rgba(0,0,0,0.15); max-height: calc(100vh - 78px); overflow-y: auto;
  }
  .nav.is-mobile-open .mega-menu {
    position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0;
    padding-left: var(--space-2); display: none; grid-auto-flow: row; min-width: 0;
  }
  .nav.is-mobile-open .mega-menu.mega-menu--wide,
  .nav.is-mobile-open .mega-menu.mega-menu--xwide { min-width: 0; }
  .nav.is-mobile-open li.is-open .mega-menu { display: grid; }
  .nav-cta .btn-lg { display: none; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, #ffffff 0%, var(--color-navy-50) 55%, #ffffff 100%);
  color: var(--color-ink-700); padding-block: var(--space-6);
  padding-top: calc(var(--space-6) + 78px);
}
/* Any section that follows the header directly on pages with a light hero
   (or no hero at all) needs the same offset, since the header is fixed. */
main > section:first-child:not(.hero) { padding-top: 78px; }
.hero-bg-shape {
  position: absolute; inset: -25% -10% auto auto; width: 55vw; height: 55vw; max-width: 820px; max-height: 820px;
  background: radial-gradient(circle at 30% 30%, rgba(255,67,56,0.16), transparent 65%);
  filter: blur(10px); pointer-events: none;
  animation: hero-blob-drift 14s ease-in-out infinite;
}
.hero-bg-shape--gold {
  position: absolute; inset: auto auto -20% -10%; width: 40vw; height: 40vw; max-width: 560px; max-height: 560px;
  background: radial-gradient(circle at 60% 60%, rgba(242,176,30,0.22), transparent 65%);
  filter: blur(10px); pointer-events: none;
  animation: hero-blob-drift 18s ease-in-out infinite reverse;
}
@keyframes hero-blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-3%, 4%) scale(1.08); }
}
.hero-content { position: relative; z-index: 2; }
.hero-headline { font-size: var(--fs-display-lg); font-weight: 800; letter-spacing: -0.01em; line-height: var(--lh-tight); margin: 0 0 var(--space-2); color: var(--color-navy-900); }
.hero .lead { color: var(--color-ink-700); }
.hero-actions { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hero-media { position: relative; z-index: 2; border-radius: 48px 12px 48px 12px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,12,61,0.3); animation: hero-media-float 6s ease-in-out infinite; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
@keyframes hero-media-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-shape, .hero-bg-shape--gold, .hero-media { animation: none; }
}
.hero-stats {
  margin-top: var(--space-6); display: grid; gap: var(--space-3);
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--color-border); padding-top: var(--space-4);
  position: relative; z-index: 2;
}
@media (max-width: 860px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
}
.stat-num { font-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.6rem); font-weight: 800; color: var(--color-navy-800); font-variant-numeric: tabular-nums; }
.stat-label { color: var(--color-text-muted); font-size: var(--fs-small); }

/* Hero photo collage: real trainer photography arranged as an
   "achievement" mosaic (offset tiles + success badge overlay), used in
   place of an abstract illustration per client request for real-human,
   success/achievement hero imagery. */
.hero-collage {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: 1fr 1fr; gap: var(--space-2);
  animation: hero-media-float 6s ease-in-out infinite;
}
.hero-collage-tile {
  border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 4;
  box-shadow: 0 20px 40px -18px rgba(0,12,61,0.28);
  transition: box-shadow 400ms var(--ease-out);
  /* Ambient float — always on (gated off under reduced-motion below).
     Per-tile speed/offset/amplitude come from custom properties set
     inline per tile in index.html, so one keyframe block covers all
     four instead of four near-duplicate ones. */
  animation: hero-tile-float var(--tile-dur, 5s) ease-in-out infinite;
  animation-delay: var(--tile-delay, 0s);
}
@keyframes hero-tile-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--tile-amp, -5px)); }
}
.hero-collage-tile:hover { box-shadow: 0 28px 52px -16px rgba(0,12,61,0.4); }
/* Desktop mouse-parallax (main.js initHeroParallax) targets this inner
   wrapper, never the outer tile — the outer tile owns the CSS float
   keyframe, and a CSS animation always wins the cascade over an inline
   style on the same property, so the two transforms need separate
   elements to combine instead of fighting over one. Scaled up slightly
   so the parallax shift never uncovers the tile's clipped edge. */
.hero-collage-tile-parallax {
  width: 100%; height: 100%;
  transform: scale(1.08);
  transition: transform 200ms var(--ease-out);
  will-change: transform;
}
.hero-collage-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms var(--ease-out); }
.hero-collage-tile:hover img { transform: scale(1.03); }
.hero-collage-tile--offset { transform: translateY(var(--space-4)); }
@media (prefers-reduced-motion: reduce) {
  .hero-collage-tile { animation: none; }
  .hero-collage-tile-parallax { transition: none; }
}
.hero-collage-badge {
  position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%);
  z-index: 3; background: #fff; border-radius: 999px; padding: 0.6em 1.2em;
  box-shadow: 0 16px 30px -12px rgba(0,12,61,0.35);
  display: flex; align-items: center; gap: 0.5em; white-space: nowrap;
}
.hero-collage-badge svg { flex-shrink: 0; color: var(--color-red-500); }
.hero-collage-badge strong { font-size: 1rem; color: var(--color-navy-900); font-weight: 800; }
.hero-collage-badge span { font-size: 0.72rem; color: var(--color-text-muted); display: block; }
@media (prefers-reduced-motion: reduce) {
  .hero-collage { animation: none; }
}

/* Hero slideshow: slides are stacked absolutely and cross-fade; the
   currently-active slide's photo drifts slowly (a subtle "Ken Burns"
   parallax feel) while its copy fades/lifts in. Autoplay + dots + drag
   are wired in main.js; with JS disabled only slide 1 shows, which is
   already a complete, readable hero on its own. */
.hero-slides { position: relative; min-height: 460px; touch-action: pan-y; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.7s var(--ease-out), visibility 0.7s;
}
.hero-slide.is-active { position: relative; opacity: 1; visibility: visible; pointer-events: auto; }
.hero-slide-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-5); align-items: center; }
@media (max-width: 900px) {
  .hero-slide-inner { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-height: 320px; }
}
.hero-slide .hero-media img { transition: transform 8s linear; transform: scale(1); }
.hero-slide.is-active .hero-media img { transform: scale(1.07); }
.hero-slide .hero-content > * { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.hero-slide.is-active .hero-content > * { opacity: 1; transform: none; }
.hero-slide.is-active .hero-content > *:nth-child(1) { transition-delay: 0.05s; }
.hero-slide.is-active .hero-content > *:nth-child(2) { transition-delay: 0.12s; }
.hero-slide.is-active .hero-content > *:nth-child(3) { transition-delay: 0.19s; }
.hero-slide.is-active .hero-content > *:nth-child(4) { transition-delay: 0.26s; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide .hero-media img { transition: none; transform: none; }
  .hero-slide .hero-content > * { transition: none; opacity: 1; transform: none; }
}

.hero-dots { position: relative; z-index: 2; display: flex; gap: 0.5rem; justify-content: center; margin-top: var(--space-4); }
.hero-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-navy-100); border: 0; cursor: pointer; padding: 0; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.hero-dot.is-active { background: var(--color-red-500); transform: scale(1.3); }

/* Slide 3's "connected ecosystem" illustration — an SVG-free, pure-CSS
   hub-and-spoke layout since a stock photo can't represent an abstract
   concept like "one connected ecosystem" as clearly as a diagram can. */
.hero-media--ecosystem {
  aspect-ratio: 4 / 3; background: linear-gradient(155deg, var(--color-navy-800), var(--color-navy-900));
  display: grid; place-items: center; position: relative;
}
.ecosystem-hub { position: relative; width: 78%; height: 78%; }
.ecosystem-core {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--color-red-500); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 0.8rem; text-align: center;
  box-shadow: 0 0 0 10px rgba(255,67,56,0.15);
}
.ecosystem-node {
  position: absolute; top: 50%; left: 50%;
  width: 74px; height: 74px; border-radius: 18px; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  color: #fff; font-size: 0.68rem; font-weight: 600;
  animation: ecosystem-float 4s ease-in-out infinite;
}
/* Fixed pentagon positions (72° apart, r=130px) — explicit per-node
   offsets instead of CSS trig functions, for reliable cross-browser
   support rather than depending on cos()/sin() in calc(). */
.ecosystem-node:nth-child(1) { translate: calc(130px - 50%) calc(0px - 50%); animation-delay: 0s; }
.ecosystem-node:nth-child(2) { translate: calc(40px - 50%) calc(124px - 50%); animation-delay: 0.3s; }
.ecosystem-node:nth-child(3) { translate: calc(-105px - 50%) calc(76px - 50%); animation-delay: 0.6s; }
.ecosystem-node:nth-child(4) { translate: calc(-105px - 50%) calc(-76px - 50%); animation-delay: 0.9s; }
.ecosystem-node:nth-child(5) { translate: calc(40px - 50%) calc(-124px - 50%); animation-delay: 1.2s; }
@keyframes ecosystem-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }
@media (prefers-reduced-motion: reduce) { .ecosystem-node { animation: none; } }
@media (max-width: 900px) {
  .ecosystem-node { width: 62px; height: 62px; }
  .ecosystem-node:nth-child(1) { translate: calc(105px - 50%) calc(0px - 50%); }
  .ecosystem-node:nth-child(2) { translate: calc(32px - 50%) calc(100px - 50%); }
  .ecosystem-node:nth-child(3) { translate: calc(-85px - 50%) calc(62px - 50%); }
  .ecosystem-node:nth-child(4) { translate: calc(-85px - 50%) calc(-62px - 50%); }
  .ecosystem-node:nth-child(5) { translate: calc(32px - 50%) calc(-100px - 50%); }
}
@media (max-width: 480px) {
  .hero-media--ecosystem { aspect-ratio: 1 / 1; }
  .ecosystem-hub { width: 88%; height: 88%; }
  .ecosystem-node { width: 50px; height: 50px; font-size: 0.58rem; gap: 0.15rem; }
  .ecosystem-node svg { width: 20px; height: 20px; }
  .ecosystem-node:nth-child(1) { translate: calc(78px - 50%) calc(0px - 50%); }
  .ecosystem-node:nth-child(2) { translate: calc(24px - 50%) calc(74px - 50%); }
  .ecosystem-node:nth-child(3) { translate: calc(-63px - 50%) calc(46px - 50%); }
  .ecosystem-node:nth-child(4) { translate: calc(-63px - 50%) calc(-46px - 50%); }
  .ecosystem-node:nth-child(5) { translate: calc(24px - 50%) calc(-74px - 50%); }
}

/* =========================================================
   Organic accents — hand-drawn underline squiggles + a curved
   section divider, so the page reads as OPERiON's current site
   does (soft, sketchy accents) rather than stacked flat blocks.
   ========================================================= */
.squiggle { display: block; margin-top: 0.35rem; }
.squiggle--center { margin-inline: auto; }

/* Asymmetric corners on card-like surfaces — a small, consistent
   deviation from uniform rectangles used across pillar cards, the
   founder quote block, and grant banners. */
.card-organic { border-radius: 28px 10px 28px 10px; }

/* =========================================================
   Service pillar cards
   ========================================================= */
.pillar-card {
  position: relative;
  background: #fff; border: 1px solid var(--color-border); border-radius: 28px 10px 28px 10px;
  padding: var(--space-3); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  height: 100%;
}
/* "Pillar 1"/"Pillar 2" badge moved to the top-right corner and enlarged
   (2026-08) so the two-pillar structure itself is the memorable, at-a-
   glance signal — not just the card colour. */
.pillar-card .pill--leadership,
.pillar-card .pill--digitalisation {
  position: absolute; top: var(--space-3); right: var(--space-3);
  font-size: 1.05rem; font-weight: 800; padding: 0.45em 1.1em;
}
.pillar-card:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -20px rgba(0,12,61,0.2); transition-duration: 300ms; }
.pillar-icon {
  width: 52px; height: 52px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--color-navy-100); margin-bottom: var(--space-2);
}
.pillar-icon img { width: 28px; height: 28px; object-fit: contain; }
.pillar-card ul { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: 0.4rem; }
.pillar-card ul li { font-size: 0.92rem; padding-left: 1.2em; position: relative; color: var(--color-text-muted); }
.pillar-card ul li::before { content: "→"; position: absolute; left: 0; color: var(--color-accent); }
.pillar-card .card-link { display: inline-block; margin-top: var(--space-2); font-weight: 700; }

/* Animated underline on inline text links (card-link, nav links) —
   ::after scaleX transition instead of animating text-decoration
   (which most browsers can't tween smoothly). Suppressed on the
   solid-fill pillar cards below, since .card-link is styled as an
   outlined pill/button there, not an inline text link. */
.card-link {
  position: relative; text-decoration: none !important;
}
.card-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 250ms var(--ease-out);
}
.card-link:hover::after { transform: scaleX(1); }
.pillar-card--leadership .card-link::after,
.pillar-card--digitalisation .card-link::after { content: none; }

/* Pillar titles ("Leadership Development" / "Digitalisation Workshops")
   made the memorable focal point of the pillar cards — bigger and bolder
   than a standard h3, replacing the previous 1.5rem inline-styled size. */
.pillar-card-title { font-size: clamp(1.7rem, 1.5rem + 0.8vw, 2.1rem); font-weight: 800; letter-spacing: -0.01em; margin-top: 0.2rem; }

/* Bold saturated color-block treatment — homepage pillar cards only
   (2026-08 round). `.pillar-card--leadership` / `.pillar-card--digitalisation`
   are used exclusively on index.html; the pillar HUB pages
   (leadership-development.html / digitalisation-workshops.html) use a
   different selector (`.pillar-page--leadership .card` etc., below) and are
   deliberately NOT touched by this block — their longer curriculum-card
   content stays on the light/tinted treatment.
   Each card is filled with a strong, saturated solid background (orange for
   Leadership Development = "bright, future"; purple for Digitalisation
   Workshops = "technology") so the two pillars read as instantly distinct,
   memorable blocks rather than subtly accented cards. All text/icons inside
   switch to white/near-white — see contrast notes on the
   --pillar-*-solid custom properties in :root above. */
.pillar-card--leadership,
.pillar-card--digitalisation {
  border-color: transparent;
  color: #fff;
}
.pillar-card--leadership { background: var(--pillar-leadership-solid); }
.pillar-card--digitalisation { background: var(--pillar-digitalisation-solid); }

.pillar-card--leadership .pillar-card-title,
.pillar-card--digitalisation .pillar-card-title { color: #fff; }

.pillar-card--leadership p.text-muted,
.pillar-card--digitalisation p.text-muted { color: rgba(255,255,255,0.94); }

.pillar-card--leadership ul li,
.pillar-card--digitalisation ul li { color: rgba(255,255,255,0.94); }
.pillar-card--leadership ul li::before,
.pillar-card--digitalisation ul li::before { color: #fff; }

/* CTA link restyled as an outlined white button so it stays an obvious,
   >=3:1-contrast interactive element against the saturated fill, matching
   the WCAG AA "large text / UI component" threshold. */
.pillar-card--leadership .card-link,
.pillar-card--digitalisation .card-link {
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.7);
  border-radius: var(--radius-sm);
  padding: 0.5em 0.9em;
}
.pillar-card--leadership .card-link:hover,
.pillar-card--digitalisation .card-link:hover {
  background: rgba(255,255,255,0.14);
  border-color: #fff;
}

/* Icon chip: translucent white circle + white stroke (overrides the
   inline stroke="var(--pillar-*-accent)" presentation attribute — SVG
   presentation attributes sit below stylesheet rules in the cascade, so
   no !important is needed). Pill badge flips to a solid white chip with
   the dark accent text so "Pillar 1 / Pillar 2" stays legible and reads
   as a clean label against the color block. */
.pillar-icon--leadership,
.pillar-icon--digitalisation { background: rgba(255,255,255,0.18); }
.pillar-icon--leadership svg { stroke: #fff; }
.pillar-icon--digitalisation svg { stroke: #fff; }
/* Bigger, topic-specific medallion icon on the homepage pillar cards
   (2026-08) — a growth-chart mark for Leadership, a chip/circuit mark
   for Digitalisation — sized up from the site-wide 52px icon-chip
   default so the vector graphic reads clearly on the bold colour block. */
.pillar-card .pillar-icon--svg {
  width: 76px; height: 76px; border-radius: 50%; margin-bottom: var(--space-3);
}
.pillar-card .pillar-icon--svg svg { width: 42px; height: 42px; }
.pill--leadership { background: #fff; color: var(--pillar-leadership-accent-dark); }
.pill--digitalisation { background: #fff; color: var(--pillar-digitalisation-accent-dark); }

/* Pillar-hub pages (leadership-development.html / digitalisation-workshops.html):
   accent applied to eyebrow labels, H1, curriculum-card top border and CTA
   buttons, without touching global header/footer/body chrome. */
.pillar-page--leadership .eyebrow,
.pillar-page--leadership .pill { color: var(--pillar-leadership-accent-dark); }
.pillar-page--leadership .pill { background: var(--pillar-leadership-tint); }
.pillar-page--leadership h1 { color: var(--pillar-leadership-accent-dark); }
.pillar-page--leadership .card { border-top: 4px solid var(--pillar-leadership-accent); }
.pillar-page--leadership .btn-primary { background: var(--pillar-leadership-accent); }
.pillar-page--leadership .btn-primary:hover { background: var(--pillar-leadership-accent-dark); }
.pillar-page--leadership .squiggle path { stroke: var(--pillar-leadership-accent) !important; }
.pillar-page--leadership .pillar-eyebrow { color: var(--pillar-leadership-accent-dark); }
.pillar-page--leadership .advisory-strip { border-left: 4px solid var(--pillar-leadership-accent); }

.pillar-page--digitalisation .eyebrow,
.pillar-page--digitalisation .pill { color: var(--pillar-digitalisation-accent-dark); }
.pillar-page--digitalisation .pill { background: var(--pillar-digitalisation-tint); }
.pillar-page--digitalisation h1 { color: var(--pillar-digitalisation-accent-dark); }
.pillar-page--digitalisation .card { border-top: 4px solid var(--pillar-digitalisation-accent); }
.pillar-page--digitalisation .btn-primary { background: var(--pillar-digitalisation-accent); }
.pillar-page--digitalisation .btn-primary:hover { background: var(--pillar-digitalisation-accent-dark); }
.pillar-page--digitalisation .squiggle path { stroke: var(--pillar-digitalisation-accent) !important; }
.pillar-page--digitalisation .pillar-eyebrow { color: var(--pillar-digitalisation-accent-dark); }
.pillar-page--digitalisation .advisory-strip { border-left: 4px solid var(--pillar-digitalisation-accent); }

.pillar-clients { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-border); display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.pillar-clients span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); font-weight: 700; }
.pillar-clients img { height: 34px; width: auto; max-width: 84px; object-fit: contain; opacity: 0.8; filter: grayscale(40%); }

.card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 10px 28px 10px 28px;
  padding: var(--space-3); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  display: block;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 20px 36px -18px rgba(0,12,61,0.22); transition-duration: 300ms; }

/* Premium review rating badge + platform cards */
.review-rating-badge {
  display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4);
  background: var(--color-navy-50); border-radius: 20px 6px 20px 6px; padding: var(--space-3) var(--space-4);
  text-align: left;
}
.review-rating-num { font-size: 3rem; font-weight: 800; color: var(--color-navy-800); line-height: 1; }
.review-rating-stars { color: var(--color-gold-500); font-size: 1.1rem; letter-spacing: 0.1em; margin-bottom: 0.2rem; }
.review-platform-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 14px 4px 14px 4px;
  padding: var(--space-3); text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.review-platform-card:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -18px rgba(0,12,61,0.22); text-decoration: none; }
.review-platform-card h3 { font-size: 1rem; margin-bottom: 0; }

/* Featured Work cards */
.work-card {
  position: relative; background: #fff; border: 1px solid var(--color-border); border-radius: 14px 4px 14px 4px;
  padding: var(--space-3); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.work-card:hover { transform: translateY(-5px); box-shadow: 0 20px 36px -18px rgba(0,12,61,0.25); }
.work-card-num { position: absolute; top: var(--space-3); right: var(--space-3); font-size: 1.6rem; font-weight: 800; color: var(--color-navy-100); }
.work-card img { height: 42px; width: auto; max-width: 65%; object-fit: contain; margin-bottom: var(--space-2); }
.work-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.work-card p { font-size: 0.9rem; margin: 0; }
.work-card-cta { display: inline-flex; align-items: center; gap: 0.3em; margin-top: 0.8rem; font-size: 0.85rem; font-weight: 700; color: var(--color-accent-text); }

/* Pain-point cards */
.pain-card {
  background: var(--color-bg-alt); border-radius: 14px 4px 14px 4px; overflow: hidden; height: 100%; display: flex; flex-direction: column;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.pain-card:hover { box-shadow: 0 24px 40px -18px rgba(0,12,61,0.28); transform: translateY(-6px); transition-duration: 300ms; }
/* Pain-point cards get a specific 700ms/30px reveal (per the 6-card
   stagger spec below) instead of the site-wide 800ms/32px default —
   scoped override, doesn't touch the shared [data-reveal] system. */
.js-reveal-ready .pain-card[data-reveal] {
  transform: translateY(30px);
  transition-duration: 700ms;
}
.pain-card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.pain-card:hover .pain-card-img { transform: scale(1.05); }
.pain-card > *:not(.pain-card-img) { padding-inline: var(--space-3); }
.pain-card .pain-icon { color: var(--color-red-500); margin-top: var(--space-3); margin-bottom: 0.6rem; }
.pain-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; line-height: 1.3; }
.pain-card p { font-size: 0.92rem; padding-bottom: var(--space-3); }

/* How-we-work: connected flow of gradient icon tiles with a large number
   badge — a distinct graphic language from the photo-based sections above
   and the framework's outlined circles below, so each section feels
   different rather than repeating the same treatment. */
.hww-flow { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: var(--space-4); margin-top: var(--space-5); }
.hww-flow::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 44px; height: 0;
  border-top: 2px dashed rgba(255,67,56,0.35); z-index: 0;
}
@media (max-width: 780px) { .hww-flow::before { display: none; } .hww-flow { flex-direction: column; } }
.hww-step { text-align: center; padding: var(--space-2); position: relative; z-index: 1; flex: 1 1 0; max-width: 220px; }
@media (max-width: 780px) { .hww-step { max-width: none; } }
.hww-tile {
  position: relative; width: 88px; height: 88px; margin: 0 auto 1.1rem; border-radius: 28px 8px 28px 8px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--color-red-500), var(--color-navy-800));
  box-shadow: 0 14px 28px -14px rgba(0,12,61,0.4);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-radius var(--dur-base) var(--ease-out);
}
.hww-num {
  position: absolute; bottom: -8px; right: -8px;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-gold-500); color: var(--color-navy-900); font-weight: 800; font-size: 0.95rem;
  border: 3px solid #fff; transition: transform var(--dur-base) var(--ease-out);
}
.hww-step:hover .hww-tile { transform: translateY(-6px) rotate(-3deg); border-radius: 8px 28px 8px 28px; box-shadow: 0 20px 36px -14px rgba(255,67,56,0.45); }
.hww-step:hover .hww-num { transform: scale(1.15); }
.hww-step h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.hww-step p { font-size: 0.9rem; color: var(--color-text-muted); }

/* FAQ accordion (native <details>/<summary>, no JS needed) */
.faq-group-label {
  display: inline-block; font-size: 2rem; font-weight: 800; line-height: 1.15;
  color: #fff; background: var(--color-red-500); padding: 0.4em 0.7em;
  border-radius: 16px 4px 16px 4px; box-shadow: 0 12px 24px -12px rgba(255,67,56,0.5);
}
.faq-group-label--b { background: var(--color-navy-800); box-shadow: 0 12px 24px -12px rgba(0,12,61,0.5); }
.faq-item { border-bottom: 1px solid var(--color-border); padding: var(--space-2) 0; }
.faq-item summary {
  cursor: pointer; font-weight: 700; color: var(--color-navy-800); list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.3rem; color: var(--color-red-500); flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin-top: 0.6rem; color: var(--color-text-muted); font-size: 0.92rem; }

/* Self-assessment quiz */
.assessment-form { display: grid; gap: var(--space-3); }
.assessment-q {
  background: var(--color-bg-alt); border-radius: 14px 4px 14px 4px; padding: var(--space-3);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.assessment-q:focus-within { box-shadow: 0 0 0 2px var(--color-red-500); }
.assessment-q p { margin-bottom: 0.6rem; }
.assessment-q label {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; font-size: 0.94rem; cursor: pointer;
  border-radius: 10px; transition: background var(--dur-fast) var(--ease-out);
}
.assessment-q label:hover { background: rgba(255,67,56,0.06); }
.assessment-q input[type="radio"] { accent-color: var(--color-red-500); width: 18px; height: 18px; flex-shrink: 0; }
.assessment-result {
  margin-top: var(--space-4); background: var(--color-navy-800); color: #fff; border-radius: 20px 6px 20px 6px;
  padding: var(--space-4); text-align: center;
}
.assessment-result h3 { color: #fff; font-size: 1.3rem; }
.assessment-result p { color: rgba(255,255,255,0.82); margin-bottom: var(--space-3); }

.pill {
  display: inline-flex; align-items: center; padding: 0.3em 0.9em; border-radius: 999px;
  font-size: 0.85rem; font-weight: 700; background: var(--color-navy-100); color: var(--color-navy-700);
}

/* Culture cards — four values given real visual weight (icon + gradient
   tile) instead of sitting as plain text pills. */
.culture-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-navy-900);
  position: relative; overflow: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.culture-card::before {
  content: ""; position: absolute; inset: 0; opacity: 0.12; background: linear-gradient(140deg, var(--color-red-500), var(--color-gold-500));
}
.culture-card:hover { transform: translateY(-6px); box-shadow: 0 20px 36px -16px rgba(0,12,61,0.35); }
.culture-icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--color-red-500), var(--color-red-700)); color: #fff; position: relative; z-index: 1;
}
.culture-card h4 { color: #fff; font-size: 1rem; margin: 0; position: relative; z-index: 1; }
.culture-card p { color: rgba(255,255,255,0.68); font-size: 0.85rem; margin: 0; position: relative; z-index: 1; }

/* =========================================================
   Consulting framework diagram — numbered steps + dashed
   connector, same visual language used for the 7-step
   consulting approach.
   ========================================================= */
.framework {
  position: relative; display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; row-gap: var(--space-4);
}
/* Keep all 7 steps on one row above tablet width so the connector line
   and traveling dot read as one continuous process, not a broken line
   that stops at the row wrap. */
@media (min-width: 901px) {
  .framework { flex-wrap: nowrap; }
  .framework-step { flex: 1 1 0; max-width: none; padding-inline: 0.4rem; }
}
.framework::before {
  content: ""; position: absolute; left: 2%; right: 2%; top: 26px; height: 0;
  border-top: 2px dashed rgba(255, 67, 56, 0.35); z-index: 0;
}
.framework::after {
  content: ""; position: absolute; left: 2%; top: 22px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-red-500); box-shadow: 0 0 0 4px rgba(255,67,56,0.18); z-index: 0;
  animation: framework-travel 4.5s linear infinite;
}
@keyframes framework-travel {
  0% { left: 2%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: 96%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .framework::after { animation: none; opacity: 0; }
}
.framework-step {
  flex: 1 1 120px; max-width: 160px; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--space-2) var(--space-1); position: relative; z-index: 1;
  border-radius: var(--radius-md); transition: background var(--dur-base) var(--ease-out);
}
.framework-step:hover { background: var(--color-navy-50); }
.framework-step .step-num {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-navy-50); border: 2px solid var(--color-red-500);
  color: var(--color-red-600); font-weight: 800; margin-bottom: var(--space-2); flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base);
}
.framework-step:hover .step-num { background: var(--color-red-500); color: #fff; transform: scale(1.1); }
.step-text { display: flex; flex-direction: column; align-items: center; }
.framework-step .step-label { font-weight: 700; font-size: 0.92rem; color: var(--color-navy-800); }
.step-desc { font-size: 0.78rem; line-height: 1.4; color: var(--color-text-muted); margin-top: 0.3rem; }
@media (max-width: 900px) {
  .framework::before, .framework::after { display: none; }
  .framework { flex-direction: column; row-gap: var(--space-2); }
  .framework-step { flex-direction: row; align-items: flex-start; text-align: left; gap: var(--space-2); max-width: none; width: 100%; }
  .step-text { align-items: flex-start; }
  .framework-step .step-num { margin-bottom: 0; }
}

/* =========================================================
   Credibility: client logos, awards, stats, reviews
   ========================================================= */
.logo-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-2);
  max-width: 56em; margin-inline: auto;
}
.logo-strip a, .logo-strip .logo-tile {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1;
  background: var(--color-navy-50); border-radius: var(--radius-md); padding: var(--space-2);
}
.logo-strip img { height: 100%; width: 100%; object-fit: contain; }
@media (max-width: 640px) {
  .logo-strip { grid-template-columns: repeat(3, 1fr); gap: var(--space-1); }
}
.logo-tile--text {
  flex-direction: column; gap: 0.2rem; text-align: center; aspect-ratio: auto !important;
  min-height: 96px; padding: var(--space-2) var(--space-1);
}
.logo-tile--text strong { font-size: 0.85rem; color: var(--color-navy-800); line-height: 1.2; }
.logo-tile--text span { font-size: 0.68rem; color: var(--color-text-muted); }
.logo-placeholder {
  width: 100px; height: 100px; flex: 0 0 auto; aspect-ratio: 1 / 1 !important;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--color-navy-300, var(--color-border)); border-radius: var(--radius-sm);
  background: var(--color-navy-50); color: var(--color-text-muted);
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.award-grid { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: stretch; justify-content: center; }
.award-tile {
  background: #fff; border: 1px solid var(--color-border); border-radius: 14px 4px 14px 4px;
  padding: var(--space-2); display: grid; place-items: center;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.award-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -18px rgba(0,12,61,0.22); }
.award-tile img { height: 165px; width: auto; object-fit: contain; }
.stat-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); text-align: center; }
.stat-band .stat-num { color: var(--color-navy-800); }
.stat-band .stat-label { color: var(--color-text-muted); }

.testimonial-card {
  background: var(--color-bg-alt); border-radius: 10px 28px 10px 28px; padding: var(--space-3);
  height: 100%; display: flex; flex-direction: column; gap: var(--space-2);
}
.testimonial-stars { color: var(--color-gold-500); letter-spacing: 0.1em; font-size: 1rem; }
.testimonial-name { font-weight: 700; color: var(--color-navy-800); }
.testimonial-role { font-size: var(--fs-small); color: var(--color-text-muted); }

/* =========================================================
   Grant promo banners
   ========================================================= */
.grant-banner {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center;
  background: var(--color-navy-50); border: 1px solid var(--color-navy-100); border-radius: 10px 28px 10px 28px;
  padding: var(--space-3);
}
.grant-banner img { height: 48px; width: auto; }
.grant-banner + .grant-banner { margin-top: var(--space-2); }
@media (max-width: 640px) { .grant-banner { grid-template-columns: 1fr; text-align: center; } .grant-banner img { margin-inline: auto; } }

/* =========================================================
   Partner strip
   ========================================================= */
.partner-strip { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; justify-content: center; }
.partner-strip img { height: 56px; width: auto; object-fit: contain; }

/* =========================================================
   Reveal-on-scroll (progressive enhancement)
   ========================================================= */
[data-reveal] { opacity: 1; transform: none; }
.js-reveal-ready [data-reveal] {
  opacity: 0; transform: translateY(32px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], .js-reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Progressive list reveal (initProgressiveList in main.js) — condensed
   10-item programme lists (homepage) fade/slide up in batches of 3 as
   the whole list enters view. Each item's transition-delay is written
   inline by the JS (batch index × step), this just supplies the
   opacity/transform to animate. */
.js-list-ready [data-progressive-item] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.js-list-ready [data-progressive-list].is-list-visible [data-progressive-item] {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-progressive-item] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* HRDC certificate delayed reveal (initHrdcCertReveal) — the certificate
   image stays invisible until the section is in view, then waits a beat
   before animating in. */
.js-cert-ready [data-hrdc-cert-reveal] {
  opacity: 0; transform: translateX(40px) scale(0.96);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.js-cert-ready [data-hrdc-cert-reveal].is-cert-visible {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-hrdc-cert-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Hosting-capability cards (initHostingReveal) — PDX2025 + PDX2026 (first
   two cards) reveal together on section entry; the two capability cards
   follow 500ms later, offset slightly from each other so they don't land
   in perfect unison. */
.js-hosting-ready [data-hosting-reveal] .card {
  opacity: 0; transform: translateY(28px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.js-hosting-ready [data-hosting-reveal] .card:nth-child(1),
.js-hosting-ready [data-hosting-reveal] .card:nth-child(2) { transition-delay: 0ms; }
.js-hosting-ready [data-hosting-reveal] .card:nth-child(3) { transition-delay: 500ms; }
.js-hosting-ready [data-hosting-reveal] .card:nth-child(4) { transition-delay: 580ms; }
.js-hosting-ready [data-hosting-reveal].is-hosting-visible .card {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-hosting-reveal] .card { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* FAQ second column delayed reveal (initFaqColumnReveal) — column A reads
   immediately as normal content; column B stays hidden for 2000ms after
   the section enters view, then slides/fades in. */
.js-faq-ready [data-faq-delayed-reveal] {
  opacity: 0; transform: translateX(40px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.js-faq-ready [data-faq-delayed-reveal].is-faq-visible {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-faq-delayed-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Image fade-in on load (initImageFadeIn) — complementary to loading="lazy",
   doesn't change when an image loads, only how it appears once it has.
   Scoped behind a JS-added ready class so images stay visible by default
   with JS disabled. */
.js-img-fade-ready img:not([fetchpriority="high"]) {
  opacity: 0; transition: opacity 500ms ease;
}
.js-img-fade-ready img.is-loaded {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  img { opacity: 1 !important; transition: none !important; }
}

.section-shape {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 50%; filter: blur(50px);
}
.section-shape--navy { background: radial-gradient(circle at 35% 35%, rgba(0,24,111,0.14), transparent 70%); }
.section-shape--red { background: radial-gradient(circle at 35% 35%, rgba(255,67,56,0.18), transparent 70%); }
.section > .container { position: relative; z-index: 1; }

/* =========================================================
   Footer
   ========================================================= */
/* Two-tier footer: a bright functional link area, then a bold dark brand
   band with a giant wordmark, social icons and a trust badge (pattern
   borrowed from veecotech.com.my / exabytes.my style agency footers). */
.footer-top { background: var(--color-mist); padding-block: var(--space-7) var(--space-5); border-top: 1px solid var(--color-border); }
/* Trimmed to a brand column + 3 link sections (Company / Resources /
   Contact) — a prior round expanded this to 6 columns; simplified back
   down per client feedback. */
.footer-grid { display: grid; gap: var(--space-4); grid-template-columns: 1.3fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-top h4 { color: var(--color-navy-800); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-2); position: relative; display: inline-block; }
.footer-top h4::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 28px; height: 3px; border-radius: 999px;
  background: var(--color-red-500);
}
.footer-top a { color: var(--color-text-muted); transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out); }
.footer-top a:hover { color: var(--color-accent-text); padding-left: 4px; }
.footer-top ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }

.footer-brand-band { position: relative; overflow: hidden; background: var(--color-navy-900); padding-block: var(--space-5) var(--space-3); }
/* Giant faint OPERiON wordmark bleeding off the footer edge — the "not a
   straight line" brand motif, echoed from the squiggles/organic shapes
   used earlier on the page. */
.footer-wordmark {
  position: absolute; left: 50%; bottom: -0.14em; translate: -50% 0; z-index: 0;
  font-size: clamp(5rem, 4rem + 9vw, 13rem); font-weight: 800; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.1);
  white-space: nowrap; pointer-events: none; user-select: none; line-height: 1;
}
.footer-bottom {
  position: relative; z-index: 2; margin-top: var(--space-4); padding-top: var(--space-3);
  display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; color: rgba(255,255,255,0.55); font-size: var(--fs-small);
}
.footer-bottom::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background-image: radial-gradient(circle, rgba(255,255,255,0.18) 1.5px, transparent 1.5px);
  background-size: 14px 6px; background-repeat: repeat-x;
}

/* =========================================================
   WhatsApp floating button
   ========================================================= */
.whatsapp-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 900;
  width: 60px; height: 60px; border-radius: 50%; background: #1ea952; color: #fff;
  display: grid; place-items: center; box-shadow: 0 12px 28px -8px rgba(30,169,82,0.6);
  transition: transform var(--dur-fast) var(--ease-out);
  animation: whatsapp-pulse 2.6s ease-out infinite;
}
.whatsapp-float:hover { transform: scale(1.08); }
@keyframes whatsapp-pulse {
  0% { box-shadow: 0 12px 28px -8px rgba(30,169,82,0.6), 0 0 0 0 rgba(30,169,82,0.5); }
  70% { box-shadow: 0 12px 28px -8px rgba(30,169,82,0.6), 0 0 0 16px rgba(30,169,82,0); }
  100% { box-shadow: 0 12px 28px -8px rgba(30,169,82,0.6), 0 0 0 0 rgba(30,169,82,0); }
}
@media (prefers-reduced-motion: reduce) { .whatsapp-float { animation: none; } }

.consult-float {
  position: fixed; bottom: 96px; right: 24px; z-index: 899;
  display: flex; align-items: center; gap: 0.5rem; background: var(--color-red-500); color: #fff;
  padding: 0.6em 1em; border-radius: 999px; font-weight: 700; font-size: 0.85rem;
  box-shadow: 0 12px 24px -10px rgba(255,67,56,0.6);
  transition: transform var(--dur-fast) var(--ease-out);
}
.consult-float:hover { transform: translateY(-3px); color: #fff; text-decoration: none; }
@media (max-width: 640px) { .consult-float { display: none; } }

/* =========================================================
   Compact programme list (homepage condensed 10+10 catalogue)
   ========================================================= */
.course-compact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
.course-compact-item {
  display: flex; align-items: baseline; gap: 0.7em; padding: 0.75em 0.9em;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.course-compact-item:hover { border-color: var(--color-accent); transform: translateX(3px); text-decoration: none; }
.course-compact-num {
  flex: 0 0 auto; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--color-navy-100);
  color: var(--color-navy-800); font-weight: 800; font-size: 0.78rem; display: grid; place-items: center;
}
.course-compact-body strong { display: block; color: var(--color-navy-900); font-size: 0.95rem; }
.course-compact-body span { display: block; color: var(--color-text-muted); font-size: 0.82rem; margin-top: 0.15em; }

/* =========================================================
   HRD Corp credential — real certificate image (2026-08)
   ========================================================= */
/* The homepage HRDC strip's right column shows the client's actual HRD
   Corp Training Provider Registration Certificate (the client's own
   HRD TP_Renewal_Certificate PNG), fixed at 350px tall (2026-08) and
   linking out to the full PDF in a new tab for the large/legible view —
   replaces the earlier badge-icon approach and the broken illustrated
   "certificate" SVG before that. */
.hrdc-strip-grid { align-items: center; gap: var(--space-5); }
.hrdc-cert-frame {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); text-decoration: none;
}
.hrdc-cert-image {
  height: 350px; width: auto; max-width: 100%;
  object-fit: contain; border-radius: var(--radius-md);
  box-shadow: 0 12px 32px -12px rgba(15,23,42,0.25);
  border: 1px solid var(--color-border);
}
.hrdc-cert-frame-label {
  font-size: 0.92rem; font-weight: 700; color: var(--color-accent-text);
}
.hrdc-cert-frame:hover .hrdc-cert-frame-label { text-decoration: underline; }
@media (max-width: 860px) {
  .hrdc-cert-image { height: 280px; }
}
/* =========================================================
   Hosting-at-scale showcase (homepage, 2026-08) — replaces the earlier
   anonymised "Trusted by" logo wall with proof of hosting capability:
   PDX2025/PDX2026 plus conference/exhibition/team-building capability.
   ========================================================= */
.hosting-grid .card { text-align: left; }
.hosting-grid .card .eyebrow { display: block; margin-bottom: 0.3rem; }

/* =========================================================
   Ecosystem hierarchy diagram (ecosystem.html): OPERiON on top,
   OPERiONPlus bottom-left, PDX bottom-right, connected by dashed
   lines — a simple CSS/SVG relationship graphic, no photo needed.
   ========================================================= */
.org-hierarchy { position: relative; padding: var(--space-2) 0; }
.org-hierarchy-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.org-row { position: relative; z-index: 1; display: flex; }
.org-row--top { justify-content: center; }
.org-row--bottom { justify-content: space-between; margin-top: var(--space-5); gap: var(--space-2); }
.org-node {
  background: #fff; border: 2px solid var(--color-border); border-radius: 18px 6px 18px 6px;
  padding: var(--space-2) var(--space-3); text-align: center; display: flex; flex-direction: column; gap: 0.25rem;
  box-shadow: 0 16px 32px -18px rgba(0,12,61,0.25); min-width: 160px;
}
.org-node-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.org-node strong { font-size: 1.3rem; color: var(--color-navy-900); font-weight: 800; }
.org-node-sub { font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.35; }
.org-node--top { border-color: var(--color-navy-800); }
.org-node--left, .org-node--right { flex: 1 1 0; min-width: 0; border-color: var(--color-red-500); }
.org-node-logo { height: 22px; width: auto; margin: 0.15rem auto; }
@media (max-width: 480px) {
  .org-row--bottom { flex-direction: column; align-items: center; gap: var(--space-3); }
  .org-node { min-width: 220px; }
  .org-hierarchy-lines { display: none; }
}

.breadcrumbs { font-size: var(--fs-small); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-accent-text); }

/* =========================================================
   Sticky mobile CTA bar (small screens only)
   The desktop `.consult-float` pill is hidden below 640px, so mobile
   visitors get a persistent two-action bar instead.
   ========================================================= */
.mobile-cta-bar { display: none; }
@media (max-width: 640px) {
  .mobile-cta-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    gap: 1px; background: var(--color-border, rgba(0,0,0,0.1));
    box-shadow: 0 -6px 20px -10px rgba(0,0,0,0.35);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-cta-bar a {
    display: flex; align-items: center; justify-content: center; gap: 0.45em;
    padding: 0.95em 0.6em; font-weight: 700; font-size: 0.95rem; text-decoration: none;
  }
  .mobile-cta-bar a:hover, .mobile-cta-bar a:focus { text-decoration: none; }
  .mobile-cta-bar__primary { flex: 1 1 auto; background: #1ea952; color: #fff; }
  .mobile-cta-bar__secondary { flex: 0 0 34%; background: var(--color-surface, #fff); color: var(--color-text, #14241f); }
  /* keep the floating WhatsApp bubble clear of the bar */
  .whatsapp-float { bottom: 76px; }
  body { padding-bottom: 60px; }
}

/* Contact form confirmation state (mailto flow) */
.form-confirmation {
  margin-top: var(--space-3); padding: 1em 1.15em;
  border: 1px solid #1ea952; border-left-width: 4px;
  border-radius: var(--radius-sm); background: rgba(30,169,82,0.08);
}
.form-confirmation h3 { font-size: 1.05rem; margin: 0 0 0.35rem; }
.form-confirmation p { margin: 0 0 0.4rem; font-size: 0.92rem; }
.form-confirmation p:last-child { margin-bottom: 0; }
/* Error variant — same block, red instead of green (PDX2027 form failure state) */
.form-confirmation--error { border-color: var(--color-accent); background: rgba(242,151,26,0.1); }

/* Submit buttons show a loading state while a fetch is in flight (PDX2027
   interest form) — disabled + reduced opacity + no hover-lift, so it can't
   be double-submitted while the Mailblast/Formspree calls are pending. */
.btn[disabled] { opacity: 0.65; cursor: progress; }
.btn[disabled]:hover { transform: none; }

/* =========================================================
   PDX ecosystem stat row + PDX2027 interest form (homepage, 2026-08)
   ========================================================= */
.pdx-stats-row { margin-top: var(--space-4); }
.pdx-stat-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 14px 4px 14px 4px;
  padding: var(--space-3); text-align: center;
}
.pdx-stat-num { display: block; font-size: 1.7rem; font-weight: 800; color: var(--color-navy-800); line-height: 1.1; }
.pdx-stat-label { display: block; margin-top: 0.3rem; font-size: 0.82rem; color: var(--color-text-muted); }

.pdx2027-panel {
  margin-top: var(--space-6); padding: var(--space-4); background: var(--color-navy-50);
  border: 1px solid var(--color-navy-100); border-radius: var(--radius-lg);
}
.pdx2027-panel h3 { margin-bottom: 0.4rem; }
@media (max-width: 640px) { .pdx2027-panel { padding: var(--space-3); } }

.interest-checklist {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.5rem 1rem;
}
.interest-checklist label {
  display: flex; align-items: center; gap: 0.5em; font-size: 0.92rem; font-weight: 500;
  cursor: pointer;
}
.interest-checklist input[type="checkbox"] { accent-color: var(--color-accent); width: 17px; height: 17px; flex-shrink: 0; }