@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   HBMSU Smart University design tokens (shared with the Digital Transformation deck)
   Slide authors: use these tokens (or the .c-* / .icon-box.* / .pillar-N classes),
   never raw hex in slide markdown.
   ========================================================================== */
:root {
  /* --- Brand core --- */
  --hbmsu-blue: #004B87;
  --hbmsu-blue-rgb: 0, 75, 135;
  --hbmsu-blue-dark: #002855;
  --hbmsu-blue-dark-rgb: 0, 40, 85;
  --hbmsu-blue-deep: #001833;
  --hbmsu-sky: #00A3E0;
  --hbmsu-sky-rgb: 0, 163, 224;
  --hbmsu-sky-light: #E1F0FA;
  --hbmsu-sky-soft: #F0F7FF;
  --hbmsu-pink: #E61E78;
  --hbmsu-lime: #8CB811;
  --hbmsu-lime-rgb: 140, 184, 17;
  --hbmsu-orange: #FF6B35;
  --hbmsu-dark: #0B1F3A;
  --hbmsu-body: #1E293B;
  --hbmsu-muted: #556877;
  --hbmsu-muted-rgb: 85, 104, 119;
  --hbmsu-light: #FAFCFF;
  --hbmsu-surface: #FAFBFD;
  --hbmsu-white: #FFFFFF;
  --hbmsu-white-rgb: 255, 255, 255;
  --hbmsu-black-rgb: 0, 0, 0;
  --hbmsu-radius: 14px;
  --hbmsu-radius-pill: 50px;
  --hbmsu-shadow: 0 4px 16px rgba(0, 40, 85, 0.06);
  --hbmsu-shadow-hover: 0 12px 28px rgba(0, 163, 224, 0.25);

  /* --- Semantic accents --- */
  --hbmsu-danger: #B91C1C;
  --hbmsu-danger-rgb: 185, 28, 28;
  --hbmsu-danger-bright: #DC2626;
  --hbmsu-danger-bright-rgb: 220, 38, 38;
  --hbmsu-success: #2E7D32;
  --hbmsu-success-rgb: 46, 125, 50;
  --hbmsu-accent-gold: #F39200;
  --hbmsu-accent-gold-rgb: 243, 146, 0;
  --hbmsu-orange-deep: #C05600;
  --hbmsu-teal: #009688;
  --hbmsu-teal-rgb: 0, 150, 136;
  --hbmsu-teal-light: #4db6ac;
  --hbmsu-ocean: #0082A6;
  --hbmsu-link: #0072CE;
  --hbmsu-link-rgb: 0, 114, 206;
  --hbmsu-ink: #070B0E;
  --hbmsu-ink-warm: #0F0A06;
  --hbmsu-ink-warm-rgb: 15, 10, 6;
  --hbmsu-navy-overlay: #002B49;
  --hbmsu-navy-overlay-rgb: 0, 43, 73;
  --hbmsu-burgundy: #7A1F2B;
  --hbmsu-burgundy-rgb: 122, 31, 43;

  /* --- Four guiding pillars (stable icon + colour system) --- */
  --pillar-ambition: #004B87;
  --pillar-ambition-rgb: 0, 75, 135;
  --pillar-people: #00A3E0;
  --pillar-people-rgb: 0, 163, 224;
  --pillar-arsenal: #E87722;
  --pillar-arsenal-rgb: 232, 119, 34;
  --pillar-partners: #5B7B07;
  --pillar-partners-rgb: 91, 123, 7;

  /* --- Ethics badge gradients --- */
  --ethics-privacy-from: #1a73e8;
  --ethics-privacy-from-rgb: 26, 115, 232;
  --ethics-privacy-to: #0d47a1;
  --ethics-bias-from: #0288d1;
  --ethics-bias-from-rgb: 2, 136, 209;
  --ethics-bias-to: #4fc3f7;
  --ethics-accountability-from: #F5A623;
  --ethics-accountability-from-rgb: 245, 166, 35;
  --ethics-accountability-to: #e65100;
  --ethics-environment-from: #5B7B07;
  --ethics-environment-to: #8bc34a;
  --ethics-transparency-from: #009688;
  --ethics-transparency-to: #4db6ac;

  /* --- GenAI landscape greens (light to deep) --- */
  --genai-green-1: #A8C66C;
  --genai-green-2: #8FB84A;
  --genai-green-3: #5B9A3C;
  --genai-green-4: #3F7D2A;
  --genai-green-5: #2F6B28;
  --genai-green-6: #1F4F1C;
  --genai-green-7: #163E16;
  --genai-green-8: #0F2C10;

  /* --- Legacy aliases: existing SC slides keep working --- */
  --brand-primary: var(--hbmsu-blue);
  --brand-primary-rgb: var(--hbmsu-blue-rgb);
  --brand-primary-dark: var(--hbmsu-blue-dark);
  --brand-accent: var(--hbmsu-sky);
  --brand-accent-rgb: var(--hbmsu-sky-rgb);
  --brand-accent-soft: var(--hbmsu-sky-soft);
  --brand-ink: var(--hbmsu-dark);
  --brand-muted: var(--hbmsu-muted);
  --brand-surface: var(--hbmsu-surface);
  --brand-card: var(--hbmsu-white);
  --brand-radius: var(--hbmsu-radius);
  --pillar-1: var(--pillar-ambition);
  --pillar-2: var(--pillar-people);
  --pillar-3: var(--pillar-arsenal);
  --pillar-4: var(--pillar-partners);
  --pillar-1-rgb: var(--pillar-ambition-rgb);
  --pillar-2-rgb: var(--pillar-people-rgb);
  --pillar-3-rgb: var(--pillar-arsenal-rgb);
  --pillar-4-rgb: var(--pillar-partners-rgb);
  /* dt-* aliases used by the merged Digital Transformation slides */
  --dt-blue: var(--hbmsu-blue);
  --dt-blue-rgb: var(--hbmsu-blue-rgb);
  --dt-blue-dark: var(--hbmsu-blue-dark);
  --dt-sky: var(--hbmsu-sky);
  --dt-sky-rgb: var(--hbmsu-sky-rgb);
  --dt-muted: var(--hbmsu-muted);
  --dt-ink: var(--hbmsu-dark);
  --dt-white: var(--hbmsu-white);
  --dt-white-rgb: var(--hbmsu-white-rgb);
  --dt-radius: var(--hbmsu-radius);
  --dt-danger: var(--hbmsu-danger);
  --dt-danger-rgb: var(--hbmsu-danger-rgb);
  --dt-success: var(--hbmsu-success);
  --dt-success-rgb: var(--hbmsu-success-rgb);
  --dt-gold: var(--hbmsu-accent-gold);
  --dt-teal: var(--hbmsu-teal);
  --dt-teal-rgb: var(--hbmsu-teal-rgb);
  --dt-burgundy: var(--hbmsu-burgundy);
  --dt-burgundy-rgb: var(--hbmsu-burgundy-rgb);

  /* --- Type: Cairo leads (Arabic + Latin fallback); Inter for English runs --- */
  --font-ar: "Cairo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-en: "Inter", "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font: var(--font-ar);
  --animate-duration: 0.65s;
  --animate-delay: 0.08s;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--hbmsu-surface);
  color: var(--hbmsu-dark);
  font-family: var(--font);
}

.bg-blobs {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--brand-surface);
  background-image: url('assets/hbmsu-wave-bg.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.reveal-viewport {
  background: transparent;
}

.reveal { z-index: 3; font-family: var(--font); font-size: 26px; }
.reveal,
.reveal .slides,
.reveal section,
.reveal section *,
.slide-card,
.slide-card *,
.btn-slide-num {
  font-family: var(--font) !important;
}
.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  font-family: var(--font);
  text-transform: none;
  margin-top: 0;
  margin-bottom: 0;
}
/* English runs: Inter leads, Cairo stays as fallback. Arabic stays Cairo-first. */
.reveal .lang-en,
.reveal [dir="ltr"],
.reveal section.lang-en { --font: var(--font-en); }
.reveal .lang-ar,
.reveal [dir="rtl"] { --font: var(--font-ar); }
.reveal .slides section:not(.stack),
.reveal .slides section.present:not(.stack),
.reveal .slides > section.present:not(.stack),
.reveal .slides > section > section.present {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 28px 48px 20px;
  text-align: start;
  overflow: hidden;
  box-sizing: border-box;
}
.reveal .slides > section.stack {
  display: block !important;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  padding: 0;
}

.reveal .slides section.is-title-slide-section,
.reveal .slides section.is-title-slide-section.present {
  padding: 0 40px;
  justify-content: stretch;
  align-items: stretch;
  overflow: hidden;
}

/* --- Header: title + subtitle at inline-start, logo at inline-end (mirrors in RTL) --- */
.slide-header-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 4px;
  padding: 0 4px;
  flex: 0 0 auto;
  position: relative;
  z-index: 10;
}

.slide-header { min-width: 0; flex: 1 1 auto; max-width: 900px; text-align: start; }
.slide-header h2 {
  margin: 0 0 6px;
  font-size: 1.15em;
  font-weight: 700;
  color: var(--hbmsu-blue);
  line-height: 1.25;
}
.slide-header .subtitle {
  margin: 0;
  font-size: 0.62em;
  font-weight: 600;
  color: var(--hbmsu-muted);
  line-height: 1.4;
}

.logo-end,
.logo-left-wrapper {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-top: 4px;
}
.slide-logo,
.slide-logo-campus {
  height: 40px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  display: block;
}

.grid-container {
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  height: auto;
  max-height: 100%;
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 18px;   /* let soft card shadows breathe */
  display: flex;
  flex-direction: column;
  justify-content: center;      /* compact content sits centred in the content box */
  padding: 6px 0 8px;
}

/* Default: content sizes naturally (equal-height rows) and is centred.
   If it would be taller than the box it shrinks to fit (never scrolls). */
.grid-container > .row,
.grid-container > [class*="layout-"] {
  flex: 0 1 auto;
  min-height: 0;
  height: auto;
  max-height: 100%;
}
.grid-container > .title-slide,
.grid-container > .hbmsu-title-slide-wrapper {
  flex: 1 1 0%;
  min-height: 0;
  height: auto;
  max-height: 100%;
}

.grid-container .row,
.layout-profile,
.layout-los,
.layout-metrics,
.layout-workshop,
.layout-quote,
.layout-case,
.layout-demo,
.layout-roadmap,
.layout-separator,
.layout-hover {
  display: grid;
  gap: 12px;
  width: 100%;
  height: 100%;
  margin: 0;
  min-height: 0;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  align-items: stretch;
  justify-items: stretch;
}

.grid-container .row {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  max-height: 100%;
}
.grid-container .row .row {
  height: 100%;
}
.grid-container > .row,
.grid-container > [class*="layout-"] { height: auto; }

/* Comfortable minimum so a short card is never a thin strip: min-height scales with
   the number of rows (capped by the content box via max-height on shrink). */
.grid-container > .row.rows-1 { min-height: 150px; }
.grid-container > .row.rows-2 { min-height: 250px; }
.grid-container > .row.rows-3 { min-height: 330px; }
.grid-container > .row.rows-4 { min-height: 400px; }
.grid-container > .row.rows-5 { min-height: 450px; }
.grid-container > .layout-los { min-height: 260px; }
.grid-container > .layout-metrics { min-height: 300px; }
.grid-container > .layout-roadmap { min-height: 300px; }

.grid-container .row > * {
  min-width: 0;
  min-height: 0;
  width: auto !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  flex: none !important;
  align-self: stretch;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
}
.grid-container .row > .lo-card,
.slide-card.lo-card {
  flex-direction: row;
}

.grid-container .row > * > .slide-card,
.grid-container .row > * > .row,
.grid-container .row > * > [class*="layout-"] {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
}

.grid-container .row.rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid-container .row.rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid-container .row.rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid-container .row.rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.grid-container .row.rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.grid-container .row.rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }
.grid-container .row.rows-auto-fill {
  grid-template-rows: auto minmax(0, 1fr);
  grid-auto-rows: minmax(0, 1fr);
}

.col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; }
.col-span-1 { grid-column: span 1; } .col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; } .col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; } .col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; } .col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; } .col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; } .col-span-12 { grid-column: span 12; }

.row-span-full { grid-row: 1 / -1; }
.row-span-2 { grid-row-end: span 2; }
.row-span-3 { grid-row-end: span 3; }

.grid-container .row.rows-2 > .slide-card:not(.bg-transparent),
.grid-container .row.rows-2 > * > .slide-card:not(.bg-transparent),
.grid-container .row.rows-auto-fill > * > .slide-card:not(.bg-transparent) {
  justify-content: center;
}

.layout-profile {
  /* DOM: photo then rails. In RTL, col1 sits on the right → photo RIGHT, rails LEFT */
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  grid-template-rows: 1fr;
  direction: inherit;
}
html[dir="rtl"] .layout-profile,
.reveal .slides section[dir="rtl"] .layout-profile {
  direction: rtl;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}
.layout-profile .profile-photo { order: 0; }
.layout-profile .profile-rails { order: 1; }
.layout-profile .profile-rails {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.layout-los {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}

.layout-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

.layout-workshop {
  grid-template-columns: 8fr 4fr;
  grid-template-rows: 1fr;
}

.layout-quote { grid-template-columns: 1fr; }
.layout-separator {
  grid-template-columns: 1fr;
  place-items: center;
  align-content: center;
  justify-content: center;
}
.layout-separator > * {
  width: 100%;
  max-width: 100%;
  text-align: center;
}
.layout-demo {
  grid-template-columns: 1fr;
  place-items: center;
}
.layout-case {
  grid-template-columns: 7fr 5fr;
  grid-template-rows: minmax(0, 1fr);
}
.layout-hover {
  grid-template-columns: repeat(4, 1fr);
}
.layout-roadmap {
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(0, 1fr);
}

/* Layouts whose content is media or a multi-column composition keep the full
   content box. Everything else stays compact and centred (see .grid-container). */
.grid-container > .row:has(.show-img, canvas, table, .video-preview-wrapper, .zoomable-table-card),
.grid-container > .row.rows-auto-fill,
.grid-container > .layout-case,
.grid-container > .layout-profile,
.grid-container > .layout-workshop,
.grid-container > .layout-demo,
.grid-container > .layout-quote,
.grid-container > .layout-separator {
  flex: 1 1 0%;
  height: 100%;
}

.layout-case > *,
.layout-workshop > *,
.layout-profile > *,
.layout-los > *,
.layout-metrics > *,
.layout-separator > *,
.layout-demo > *,
.layout-hover > *,
.layout-quote > * {
  min-width: 0;
  min-height: 0;
}

/* --- Cards: white, soft shadow, no hard border; hover lights a sky border --- */
.slide-card {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid transparent;
  border-radius: var(--hbmsu-radius);
  box-shadow: var(--hbmsu-shadow);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--hbmsu-dark);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.slide-card:not(.bg-transparent):not(.no-hover):not(.border-none):hover {
  border-color: var(--hbmsu-sky);
  box-shadow: var(--hbmsu-shadow-hover);
}

.slide-card.bg-white { background: var(--hbmsu-white); }
.slide-card.bg-soft { background: var(--hbmsu-sky-soft); }
.slide-card.bg-transparent {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.slide-card.align-center { align-items: center; text-align: center; }
.slide-card.align-start { align-items: stretch; text-align: start; }
.slide-card.justify-center { justify-content: center; }
.slide-card.justify-between { justify-content: space-between; }
.slide-card.text-center { text-align: center; }
.slide-card.text-start { text-align: start; }

/* Pillar colour lives in the tinted icon square (no side accent bars) */
.slide-card.pillar-1,
.slide-card.pillar-2,
.slide-card.pillar-3,
.slide-card.pillar-4 { border-inline-start: 2px solid transparent; }
.slide-card.accent-top { border-top: 4px solid var(--hbmsu-blue); }

/* --- Icon in a soft tinted square (default = brand blue) --- */
.icon-box {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(var(--hbmsu-blue-rgb), 0.08);
  color: var(--hbmsu-blue);
  transition: background 0.25s ease, color 0.25s ease;
}
.icon-box i, .icon-box svg { width: 28px; height: 28px; stroke-width: 2.2px; }
.slide-card:hover .icon-box { background: rgba(var(--hbmsu-sky-rgb), 0.14); color: var(--hbmsu-sky); }
.pillar-1 .icon-box, .icon-box.pillar-1 { background: rgba(var(--pillar-ambition-rgb), 0.08); color: var(--pillar-ambition); }
.pillar-2 .icon-box, .icon-box.pillar-2 { background: rgba(var(--pillar-people-rgb), 0.12); color: var(--pillar-people); }
.pillar-3 .icon-box, .icon-box.pillar-3 { background: rgba(var(--pillar-arsenal-rgb), 0.12); color: var(--pillar-arsenal); }
.pillar-4 .icon-box, .icon-box.pillar-4 { background: rgba(var(--hbmsu-lime-rgb), 0.16); color: var(--pillar-partners); }

/* bio-rail = icon square + two-line copy (agenda / outcomes rows) */
.bio-rail {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  min-height: 84px;
  overflow: hidden;
}
.bio-rail .bio-copy {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1 1 auto;
}
.bio-rail .bio-copy strong {
  display: block;
  font-size: 0.95em;
  font-weight: 800;
  color: var(--hbmsu-blue-dark);
  margin-bottom: 2px;
  line-height: 1.25;
}
.bio-rail .bio-copy span {
  font-size: 0.76em;
  line-height: 1.4;
  color: var(--hbmsu-dark);
}
/* Instructor profile rails keep DT's full-height tinted icon strip */
.profile-rails .bio-rail { padding: 0; gap: 14px; align-items: stretch; }
.profile-rails .bio-rail .icon-box { width: 75px; min-width: 75px; height: auto; border-radius: 0; }
.profile-rails .bio-rail .bio-copy { padding: 10px 18px 10px 0; padding-inline: 0 18px; }
.profile-rails .bio-rail:nth-child(1) .icon-box { background: rgba(var(--hbmsu-blue-rgb), 0.08); color: var(--hbmsu-blue); }
.profile-rails .bio-rail:nth-child(2) .icon-box { background: rgba(var(--hbmsu-sky-rgb), 0.12); color: var(--hbmsu-sky); }
.profile-rails .bio-rail:nth-child(3) .icon-box { background: rgba(var(--pillar-arsenal-rgb), 0.12); color: var(--pillar-arsenal); }

.profile-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
}
.avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--brand-accent);
  flex-shrink: 0;
}
.avatar img, .avatar .show-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-name { font-size: 1.2em; font-weight: 700; color: var(--brand-primary); line-height: 1.2; }
.profile-role { font-size: 0.82em; font-weight: 700; color: var(--brand-accent); }
.profile-org { font-size: 0.76em; color: var(--brand-muted); }
.profile-email {
  font-size: 0.72em;
  font-weight: 600;
  color: var(--brand-muted);
  direction: ltr;
  margin-top: 4px;
}

.slide-card > strong {
  font-size: 0.95em;
  color: var(--brand-primary-dark);
  display: block;
}
.lo-body {
  font-size: 0.76em;
  margin: 4px 0 0;
  color: var(--brand-ink);
  line-height: 1.35;
}
.lo-card { flex-direction: row; align-items: center; gap: 16px; text-align: start; padding: 16px 20px; min-height: 96px; }
.lo-badge {
  font-size: 0.68em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(var(--hbmsu-sky-rgb), 0.12);
  color: var(--hbmsu-blue);
}
.lo-card strong { font-size: 0.95em; color: var(--brand-primary-dark); display: block; }
.lo-card p, .lo-card .lo-body {
  font-size: 0.76em;
  margin: 4px 0 0;
  color: var(--brand-ink);
  line-height: 1.35;
}

.metric-card { align-items: center; text-align: center; justify-content: center; gap: 6px; padding: 22px 18px; }
.metric-card .icon-box { width: 60px; height: 60px; border-radius: 14px; margin-bottom: 4px; }
.metric-kicker { font-size: 0.85em; font-weight: 800; color: var(--hbmsu-blue); line-height: 1.25; }
.metric-hero {
  font-size: 2.1em;
  font-weight: 900;
  color: var(--hbmsu-sky);
  line-height: 1.1;
  direction: ltr;
  unicode-bidi: isolate;
}
.metric-hero.is-blue { color: var(--hbmsu-blue); }
.metric-label { font-size: 0.82em; font-weight: 700; color: var(--hbmsu-blue-dark); line-height: 1.4; }
.metric-note { font-size: 0.68em; color: var(--hbmsu-muted); }
/* Source footer line inside a card (divider + link) */
.card-source {
  width: 100%;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(var(--hbmsu-blue-rgb), 0.12);
  font-size: 0.62em;
  font-weight: 700;
  color: var(--hbmsu-muted);
  text-align: center;
}
.card-source a { color: var(--hbmsu-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; justify-content: center; }
.card-source i, .card-source svg { width: 13px; height: 13px; color: var(--hbmsu-sky); }

.card-kicker {
  font-size: 0.85em;
  font-weight: 700;
  color: var(--brand-primary-dark);
  display: block;
  margin-bottom: 6px;
}
.card-body { font-size: 0.78em; line-height: 1.45; margin: 0; color: var(--brand-ink); }

.workshop-prompt { text-align: start; gap: 10px; }
.workshop-role {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brand-accent);
  text-transform: uppercase;
}
.workshop-task { font-size: 0.9em; font-weight: 700; color: var(--brand-primary-dark); }
.workshop-qr {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  min-height: 0;
}
.workshop-qr > .show-img {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}
.qr-frame {
  width: 145px;
  height: 145px;
  flex: 0 0 145px;
}
.qr-frame img, .qr-frame .show-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.qr-link { font-size: 0.7em; font-weight: 700; word-break: break-all; }

.layout-quote blockquote,
blockquote.slide-card {
  margin: 0;
}
.quote-card {
  margin: 0;
  background: var(--brand-primary-dark);
  color: #fff;
  justify-content: center;
  padding: 24px 28px;
  border: none;
  min-height: 0;
  text-align: start;
  gap: 0;
}
.quote-mark { font-size: 2.4em; line-height: 1; color: var(--brand-accent); }
.quote-text { font-size: 1.05em; font-weight: 700; line-height: 1.4; margin: 8px 0 16px; }
.quote-text em { color: #F5C16C; font-style: normal; }
.quote-by { font-size: 0.78em; opacity: 0.85; }
.quote-card.quote-hero {
  position: relative;
  overflow: hidden;
  padding: 26px 36px;
  background: #0B1F3A url('assets/sheikh-mohammed-portrait-bg.jpeg') right center / auto 100% no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.quote-card.quote-hero .quote-mark {
  position: absolute;
  inset-inline-start: 16px;
  top: 8px;
  font-size: 8.5em;
  font-family: Georgia, serif;
  color: rgba(255, 255, 255, 0.06);
  line-height: 0.75;
  pointer-events: none;
  z-index: 1;
}
.quote-card.quote-hero .quote-text {
  position: relative;
  z-index: 2;
  max-width: 560px;
  font-size: 1.35em;
  font-weight: 800;
  margin-bottom: 16px;
}
.quote-card.quote-hero .quote-by {
  position: relative;
  z-index: 2;
  max-width: 560px;
  font-size: 0.76em;
  opacity: 0.9;
  line-height: 1.35;
}
.quote-card.quote-hero .quote-by strong {
  color: #fff;
  font-size: 1.2em;
  display: block;
  margin-bottom: 2px;
}
.quote-card .dt-em-gold,
.quote-text .dt-em-gold { color: var(--dt-gold, #F39200); font-style: normal; }

/* DT mosaic title (basaeed.com/dt) — brand tokens, no inline styles */
.title-slide,
.hbmsu-title-slide-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  text-align: center;
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
}
.reveal .slides section.is-title-slide-section .grid-container {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: auto;
  justify-content: center;
  align-items: stretch;
}
.hbmsu-title-top {
  flex: 1 1 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title-slide-logo,
.hbmsu-title-logo,
.hbmsu-title-logo.show-img {
  max-height: 65px;
  max-width: 380px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.hbmsu-title-center-mosaic {
  flex: 0 0 160px;
  width: 100%;
  height: 160px;
  min-height: 150px;
  background-image: url('assets/hbmsu-title-mosaic-banner.png');
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  border-radius: var(--brand-radius);
  display: flex;
  justify-content: center;
  align-items: center;
}
.title-slide-box,
.hbmsu-title-box {
  background: var(--brand-primary-dark);
  color: #fff;
  border: 1.5px solid rgba(var(--brand-accent-rgb), 0.45);
  border-radius: var(--brand-radius);
  padding: 12px 36px;
  max-width: 88%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title-slide-box h1,
.hbmsu-title-box h1 {
  margin: 0;
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  white-space: normal;
  font-family: var(--font);
}
.hbmsu-title-bottom {
  flex: 1 1 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
}
.title-slide-speaker,
.hbmsu-speaker-name {
  font-size: 0.95em;
  font-weight: 700;
  color: var(--brand-primary-dark);
  font-family: var(--font);
}
.hbmsu-speaker-org {
  font-size: 0.78em;
  font-weight: 700;
  color: var(--brand-primary);
  font-family: var(--font);
}
.title-slide-email,
.hbmsu-speaker-email {
  font-size: 0.72em;
  font-weight: 600;
  color: var(--brand-muted);
  direction: ltr;
  font-family: var(--font);
}

.bg-footer-banner-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 75px;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.95;
}
.bg-footer-banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  display: block;
}
html.print-pdf .bg-footer-banner-wrapper,
html.print-pdf .bg-blobs { display: none !important; }
html.print-pdf .reveal-viewport {
  background-color: var(--brand-surface);
}

.break-slide {
  place-items: center;
  text-align: center;
}
.break-slide .separator-title { font-size: 2.2em; }
.break-slide .separator-kicker { font-size: 1.05em; }

.q-prompt-hero {
  font-size: 1.35em;
  font-weight: 700;
  color: var(--brand-primary-dark);
  line-height: 1.45;
  text-align: center;
  margin: 0;
}

.separator-kicker {
  font-size: 1em;
  font-weight: 700;
  color: var(--brand-accent);
  letter-spacing: 0.12em;
}
.separator-title {
  font-size: 2em;
  font-weight: 700;
  color: var(--brand-primary-dark);
  margin: 10px 0 0;
  line-height: 1.3;
  max-width: 100%;
  padding-inline: 12px;
}

.hover-reveal-card { cursor: pointer; position: relative; }
.hover-reveal-card .card-reveal-body,
.hover-reveal-card .card-reveal-footer {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}
.hover-reveal-card:hover,
.hover-reveal-card.is-revealed,
.hover-reveal-card.is-active {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 40, 85, 0.16);
}
.hover-reveal-card:hover .card-reveal-body,
.hover-reveal-card:hover .card-reveal-footer,
.hover-reveal-card.is-revealed .card-reveal-body,
.hover-reveal-card.is-revealed .card-reveal-footer,
.hover-reveal-card.is-active .card-reveal-body,
.hover-reveal-card.is-active .card-reveal-footer {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.md-list {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline-start: 0;
  text-align: start;
}
.md-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.8em;
}
.md-list-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--brand-primary); margin-top: 4px; }
section[dir="rtl"] .md-list-icon { transform: scaleX(-1); }

.grid-container img:not(.show-img):not(.slide-logo):not(.title-slide-logo):not(.hbmsu-title-logo):not(.slide-logo-campus) {
  display: none;
}
.show-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.slide-card > .show-img,
.slide-card.bg-transparent > .show-img,
.slide-card.align-center.justify-center > .show-img {
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  object-fit: contain;
}

.slide-reference,
.slide-reference-container {
  flex: 0 0 auto;
  width: 100%;
  font-size: 0.52em;
  font-weight: 700;
  color: var(--brand-muted);
  margin-top: 2px;
  padding: 0 10px;
  line-height: 1.35;
  opacity: 0.9;
}
.slide-reference a,
.slide-reference-container a { color: var(--brand-primary); }
.slide-footer-divider {
  border: none;
  border-top: 1px solid rgba(var(--hbmsu-blue-rgb), 0.12);
  margin: 4px auto;
  width: calc(100% - 20px);
  display: block;
  box-sizing: border-box;
}
.slide-footer {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 0;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 1em;
  color: var(--brand-muted);
  flex: 0 0 auto;
  z-index: 4;
}
.footer-date-container,
.footer-page-num-container,
.reveal section .footer-slogan,
.footer-slogan {
  flex: 1;
  position: static;
  left: auto;
  top: auto;
  transform: none;
  width: auto;
  max-width: none;
  display: flex;
  align-items: center;
}
.footer-date-container {
  justify-content: flex-start;
  text-align: start;
}
.footer-page-num-container {
  justify-content: flex-end;
  text-align: end;
}
.reveal section .footer-slogan,
.footer-slogan {
  display: block;
  text-align: center;
  font-size: 0.52em;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.35;
  opacity: 0.8;
  color: var(--brand-muted);
  pointer-events: none;
  z-index: 1;
}
.btn-slide-num {
  background: var(--hbmsu-sky-soft);
  color: var(--hbmsu-blue);
  border: 1px solid rgba(var(--hbmsu-blue-rgb), 0.18);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 0.52em;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(var(--hbmsu-blue-rgb), 0.04);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-slide-num:hover { background: var(--hbmsu-blue); color: var(--hbmsu-white); border-color: var(--hbmsu-blue); }

/* Reveal arrows: small, lifted above the footer mosaic (as in the DT deck) */
.reveal .controls { font-size: 5px; bottom: 75px; right: 20px; }
.footer-date {
  direction: ltr;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.52em;
  font-weight: 700;
  opacity: 0.8;
}
.footer-date svg { width: 14px; height: 14px; }

section[dir="rtl"] .slide-card.text-start,
section[dir="rtl"] .slide-card.align-start { text-align: start; }
section[dir="ltr"] .slide-card.text-start,
section[dir="ltr"] .slide-card.align-start { text-align: start; }

.lang-en .lo-card,
.lang-en .bio-rail,
.lang-en .workshop-prompt { direction: inherit; text-align: start; }

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(7, 16, 32, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-overlay.active { display: flex; }
.modal-dialog {
  background: #fff;
  border-radius: 16px;
  max-width: min(920px, 92vw);
  max-height: 88vh;
  overflow: auto;
  padding: 28px;
  position: relative;
}
.modal-dialog-wide { max-width: min(1100px, 94vw); }
.modal-close {
  position: absolute;
  top: 8px;
  inset-inline-end: 10px;
  border: none;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
  color: var(--brand-muted);
}
.modal-caption { margin-top: 10px; font-size: 0.8em; color: var(--brand-muted); }
#image-modal-img { max-width: 100%; max-height: 70vh; object-fit: contain; }
#video-modal-player, #youtube-modal-iframe { width: min(860px, 90vw); height: 480px; border: 0; }
.video-preview-wrapper { position: relative; cursor: pointer; height: 100%; }
.video-play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 75, 135, 0.88);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4em;
}

html.print-pdf,
html.print-pdf * {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}
html.print-pdf,
html.print-pdf body {
  overflow: visible !important;
  height: auto !important;
  width: auto !important;
}
html.print-pdf .reveal,
html.print-pdf .reveal-viewport {
  overflow: visible !important;
  background: var(--brand-surface) !important;
}
html.print-pdf .reveal .controls,
html.print-pdf .reveal .progress,
html.print-pdf .bg-blobs,
html.print-pdf .bg-footer-banner-wrapper {
  display: none !important;
}
html.print-pdf .reveal .slides > section.stack {
  display: block !important;
  position: relative !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}
html.print-pdf .reveal .slides > section.stack > section,
html.print-pdf .reveal .slides > section:not(.stack) {
  display: flex !important;
  flex-direction: column !important;
  width: 1280px !important;
  height: 720px !important;
  max-height: 720px !important;
  min-height: 720px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background-color: var(--brand-surface);
  background-image: url('assets/hbmsu-footer-mosaic.png'), url('assets/hbmsu-wave-bg.svg');
  background-repeat: no-repeat, no-repeat;
  background-position: center bottom, center center;
  background-size: 100% 75px, cover;
}
html.print-pdf .hover-reveal-card,
html.print-pdf .hover-reveal-card .card-reveal-body,
html.print-pdf .hover-reveal-card .card-reveal-footer,
html.print-pdf .hover-reveal-card > * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

@media print {
  @page { size: 1280px 720px; margin: 0; }
  html, body {
    overflow: visible !important;
    height: auto !important;
  }
  .bg-blobs,
  .bg-footer-banner-wrapper,
  .reveal .controls,
  .reveal .progress { display: none !important; }
  .hover-reveal-card .card-reveal-body,
  .hover-reveal-card .card-reveal-footer,
  .hover-reveal-card > * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .animate__animated,
  .motion-assemble {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* RTL card copy — always start-aligned (right in Arabic) */
.reveal .slides section .slide-card,
.reveal .slides section .slide-card .bio-copy,
.reveal .slides section .slide-card .lo-body,
.reveal .slides section .slide-card .card-kicker,
.reveal .slides section .slide-card strong,
.reveal .slides section .slide-card span {
  text-align: start !important;
}
.reveal .slides section .slide-card.text-center,
.reveal .slides section .slide-card.justify-center.text-center {
  text-align: start !important;
}

/* House motion — ≤1s total on slide view (Animate.css + assemble) */
.animate__animated {
  --animate-duration: 0.65s;
  --animate-delay: 0.08s;
  animation-duration: var(--animate-duration, 0.65s) !important;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation-fill-mode: both !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.animate__delay-100ms { animation-delay: 0.08s !important; }
.animate__delay-200ms { animation-delay: 0.16s !important; }
.animate__delay-1s { animation-delay: 0.08s !important; }
.animate__delay-2s { animation-delay: 0.16s !important; }
.animate__delay-3s { animation-delay: 0.24s !important; }
.animate__delay-4s { animation-delay: 0.32s !important; }

@keyframes motionAssemble {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.96); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.motion-assemble {
  animation-name: motionAssemble !important;
  animation-duration: 0.65s !important;
  animation-delay: var(--assemble-delay, 0s) !important;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation-fill-mode: both !important;
}
/* Icon lists (rails) inside grids */
.row > [class*="col-"] > .bio-rail { height: 100%; }

@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-16px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate__fadeInLeft { animation-name: fadeInLeft !important; }

@keyframes fadeInRight {
  from { opacity: 0; transform: translate3d(16px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate__fadeInRight { animation-name: fadeInRight !important; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate__fadeInUp { animation-name: fadeInUp !important; }

@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0, -14px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate__fadeInDown { animation-name: fadeInDown !important; }

@keyframes zoomIn {
  from { opacity: 0; transform: scale3d(0.97, 0.97, 0.97); }
  to { opacity: 1; transform: scale3d(1, 1, 1); }
}
.animate__zoomIn { animation-name: zoomIn !important; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate__fadeIn { animation-name: fadeIn !important; }

@media (prefers-reduced-motion: reduce) {
  /* Keep a short assemble so slide entrance still reads; print/PDF already disable */
  .animate__animated,
  .motion-assemble {
    animation-duration: 0.35s !important;
  }
}
@media print {
  .animate__animated,
  .motion-assemble {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* === dt-from-* slide-specific (tokens now live in :root) === */
.reveal .slides section:has(.lang-en) {
  direction: inherit;
  text-align: start;
}
.reveal .slides section:has(.lang-en) .lang-en,
.reveal .slides section .lang-en { direction: inherit; text-align: start; }
.reveal .slides section .lang-en [dir="ltr"],
.reveal .slides section [dir="ltr"].profile-email,
.reveal .slides section .profile-email,
.reveal .slides section .hbmsu-speaker-email,
.reveal .slides section a[href^="http"],
.reveal .slides section a[href^="mailto"] { direction: ltr; unicode-bidi: isolate; }

.dt-panel { height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; text-align: start; }
.dt-accent-primary { border-top: 4px solid var(--brand-primary); }
.dt-accent-accent { border-top: 4px solid var(--brand-accent); }
.dt-accent-arsenal { border-top: 4px solid var(--pillar-3); }
.dt-accent-partners { border-top: 4px solid var(--pillar-4); }
.dt-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.dt-panel-head strong { font-size: 0.95em; color: var(--brand-primary-dark); line-height: 1.2; }
.dt-panel-body { font-size: 0.82em; color: var(--brand-ink); line-height: 1.4; margin: 0; }
.icon-box.accent { background: rgba(var(--brand-accent-rgb), 0.12); color: var(--brand-accent); }
.icon-box.dark { background: rgba(0, 40, 85, 0.08); color: var(--brand-primary-dark); }
.icon-box.arsenal { background: rgba(232, 119, 34, 0.12); color: var(--pillar-3); }
.icon-box.partners { background: rgba(91, 123, 7, 0.16); color: var(--pillar-4); }
.slide-card.no-hover:hover,
.slide-card.bg-transparent:hover {
  background: transparent !important; border-color: transparent !important;
  transform: none !important; box-shadow: none !important;
}

.dt-stat-card { position: relative; height: 100%; gap: 8px; padding: 22px 18px; }
.dt-stat-head { width: 100%; display: flex; flex-direction: column; align-items: center; }
.dt-stat-title { font-size: 1.05em; font-weight: 800; color: var(--brand-primary); line-height: 1.25; margin: 6px 0 2px; }
.dt-stat-value { font-size: 2em; font-weight: 900; color: var(--brand-primary); line-height: 1.1; }
.dt-stat-value.accent { color: var(--brand-accent); }
.dt-stat-body { font-size: 0.80em; color: var(--brand-ink); line-height: 1.45; text-align: center; margin: 0; }
.dt-stat-source { border-top: 1px solid rgba(var(--brand-primary-rgb), 0.12); width: 100%; padding-top: 8px; font-size: 0.72em; font-weight: 700; text-align: center; }
.dt-stat-source a { color: var(--brand-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; justify-content: center; }
.dt-stat-source i, .dt-stat-source svg { width: 13px; height: 13px; color: var(--brand-accent); }
.clickable-study-card { cursor: pointer; position: relative; }
.clickable-study-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(var(--brand-primary-rgb), 0.18); }
.card-preview-icon {
  position: absolute; top: 14px; left: 14px; width: 28px; height: 28px; border-radius: 8px;
  background: rgba(var(--brand-primary-rgb), 0.08); color: var(--brand-primary);
  display: flex; align-items: center; justify-content: center; z-index: 3; pointer-events: none;
}
.card-preview-icon.top-right { left: auto; right: 14px; top: 12px; width: auto; height: auto; padding: 2px 7px; border-radius: 12px; font-size: 0.58em; font-weight: 700; gap: 4px; }
.card-preview-icon i, .card-preview-icon svg { width: 14px; height: 14px; }

.dt-bullet-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; font-size: 1.1em; color: var(--brand-ink); }
.dt-bullet-list li { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.dt-bullet-list li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-primary); flex-shrink: 0; }
.dt-bullet-list.accent li::before { background: var(--brand-accent); }
.dt-arrow-col { border: none !important; box-shadow: none !important; background: transparent !important; }
.dt-arrow-circle {
  background: rgba(var(--brand-accent-rgb), 0.1); width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--brand-accent);
}
.dt-arrow-circle i, .dt-arrow-circle svg { width: 36px; height: 36px; }

.dt-journey-map { padding: 8px 12px; overflow: hidden; }
.dt-jm-meta {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  margin-bottom: 6px; padding: 4px 12px; background: rgba(var(--brand-primary-rgb), 0.04);
  border: 1px solid rgba(var(--brand-primary-rgb), 0.12); border-radius: 6px; font-size: 0.65em; flex-shrink: 0;
}
.dt-jm-meta strong { color: var(--brand-primary); }
.dt-jm-wrap { width: 100%; flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.dt-jm-table { width: 100%; height: 100%; border-collapse: collapse; font-size: 0.57em; line-height: 1.25; color: var(--brand-ink); table-layout: fixed; }
.dt-jm-table th {
  border: 1px solid rgba(var(--brand-primary-rgb), 0.15); padding: 4px 6px; text-align: start; font-weight: 800;
  background: var(--brand-accent-soft); color: var(--brand-primary-dark);
}
.dt-jm-table td { border: 1px solid rgba(var(--brand-primary-rgb), 0.12); padding: 4px 6px; vertical-align: middle; }
.dt-jm-stage { background: rgba(var(--brand-primary-rgb), 0.02); }
.dt-jm-stage strong { color: var(--brand-primary-dark); }
.dt-jm-num {
  background: var(--brand-primary); color: #fff; width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.85em; font-weight: 800; margin-inline-end: 5px;
}
.dt-jm-sub { font-size: 0.82em; font-weight: 600; opacity: 0.85; }
.zoomable-table-card { cursor: zoom-in; }

.dt-tech-blurb { height: 100%; padding: 10px 18px 8px 8px; display: flex; flex-direction: column; justify-content: center; text-align: start; overflow: hidden; }
.dt-kicker { font-size: 0.72em; font-weight: 800; color: var(--brand-primary); letter-spacing: 0.2px; margin-bottom: 8px; }
.dt-tech-blurb p { font-size: 0.98em; color: var(--brand-primary-dark); line-height: 1.4; margin: 0; font-weight: 700; }
.dt-tech-media { height: 100%; overflow: hidden; border-radius: var(--brand-radius); position: relative; }
.dt-tech-media .show-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--brand-radius); }
.rpa-download-chip {
  position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(0, 120, 212, 0.22); border-radius: 10px;
  padding: 6px 10px 6px 6px; box-shadow: 0 8px 18px rgba(0, 20, 50, 0.18); z-index: 3; pointer-events: none;
}
.rpa-download-chip img { width: 28px; height: 28px; object-fit: contain; border-radius: 7px; display: block; }
.rpa-download-chip span { font-size: 0.68em; font-weight: 800; color: var(--brand-primary-dark); line-height: 1.15; white-space: nowrap; }

.dt-quote-card { padding: 28px 40px; gap: 14px; }
.dt-quote-text { font-size: 1.35em; font-weight: 800; color: var(--brand-primary-dark); line-height: 1.4; max-width: 820px; }
.dt-em-accent { color: var(--brand-accent); }
.dt-quote-attr { margin-top: 8px; font-size: 0.80em; color: var(--brand-muted); font-weight: 700; }
.dt-capability-card { padding: 22px; gap: 10px; }
.dt-capability-icon { width: 36px; height: 36px; margin-bottom: 10px; }
.dt-capability-icon.primary { color: var(--brand-primary); }
.dt-capability-icon.accent { color: var(--brand-accent); }
.dt-capability-icon.arsenal { color: var(--pillar-3); }
.dt-capability-card strong { font-size: 1.1em; color: var(--brand-primary-dark); }

.dt-stack { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; height: 100%; }
.dt-factor-card { flex: 1 1 0; display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 10px 18px; text-align: start; }
.dt-factor-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dt-factor-icon .show-img { max-height: 50px; max-width: 50px; object-fit: contain; }
.dt-factor-card strong { font-size: 1.1em; color: var(--brand-primary-dark); display: block; margin-bottom: 2px; }
.dt-factor-card span { font-size: 0.72em; color: var(--brand-muted); line-height: 1.35; display: block; }
.dt-converge-arrow { display: flex; align-items: center; justify-content: center; height: 100%; }
.dt-converge-arrow svg { width: 100%; height: 85%; overflow: visible; }
.dt-ai-feature { padding: 24px 20px; gap: 12px; }
.dt-ai-feature-icon { width: 115px; height: 115px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 6px 16px rgba(var(--brand-primary-rgb), 0.12)); }
.dt-ai-feature-icon .show-img { max-height: 105px; max-width: 105px; object-fit: contain; }
.dt-ai-feature-title { font-size: 2.2em; font-weight: 900; color: var(--brand-primary-dark); letter-spacing: 2px; line-height: 1; }
.dt-pill {
  background: rgba(var(--brand-accent-rgb), 0.12); color: var(--brand-primary); font-size: 0.72em; font-weight: 800;
  padding: 3px 14px; border-radius: 20px; border: 1px solid rgba(var(--brand-accent-rgb), 0.25);
}
.dt-ai-feature p { font-size: 0.78em; color: var(--brand-muted); line-height: 1.4; margin: 0; max-width: 270px; }

.dt-genai-card { padding: 18px 22px 14px; gap: 8px; align-items: stretch; justify-content: center; overflow: hidden; }
.dt-genai-landscape { position: relative; width: 100%; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.dt-genai-bands { position: relative; height: 76%; width: 100%; }
.dt-genai-band {
  position: absolute; border-radius: 10px; padding: 10px 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); color: #fff;
}
.dt-genai-band-title { font-weight: 800; letter-spacing: 0.3px; }
.dt-genai-band-note { color: rgba(255, 255, 255, 0.92); font-size: 0.60em; margin-top: 2px; line-height: 1.3; }
.dt-genai-ai { left: 2%; right: 2%; top: 0; bottom: 0; background: linear-gradient(135deg, var(--genai-green-1), var(--genai-green-2)); }
.dt-genai-ai .dt-genai-band-title { font-size: 0.92em; }
.dt-genai-ai .dt-genai-band-note { max-width: 34%; font-size: 0.62em; }
.dt-genai-ml { left: 38%; right: 2%; top: 26%; bottom: 0; background: linear-gradient(135deg, var(--genai-green-3), var(--genai-green-4)); }
.dt-genai-ml .dt-genai-band-title { font-size: 0.88em; }
.dt-genai-ml .dt-genai-band-note { max-width: 48%; }
.dt-genai-dl { left: 74%; right: 2%; top: 48%; bottom: 0; background: linear-gradient(135deg, var(--genai-green-5), var(--genai-green-6)); padding: 10px 12px; }
.dt-genai-dl .dt-genai-band-title { font-size: 0.78em; line-height: 1.15; }
.dt-genai-dl .dt-genai-band-note { font-size: 0.52em; max-width: 92%; color: rgba(255, 255, 255, 0.9); }
.dt-genai-gen {
  left: 86%; right: 2%; top: 68%; bottom: 0;
  background: linear-gradient(135deg, var(--genai-green-7), var(--genai-green-8));
  display: flex; align-items: center; justify-content: center; padding: 6px;
}
.dt-genai-gen .dt-genai-band-title { font-size: 0.88em; text-align: center; }
.dt-genai-guide { position: absolute; width: 0; bottom: -6px; border-left: 1.5px dashed rgba(255, 255, 255, 0.45); }
.dt-genai-guide-ai { left: 2%; top: 0; }
.dt-genai-guide-ml { left: 38%; top: 26%; }
.dt-genai-guide-dl { left: 74%; top: 48%; }
.dt-genai-guide-gen { left: 86%; top: 68%; }
.dt-genai-timeline { position: relative; width: 100%; height: 28px; margin-top: 4px; }
.dt-genai-timeline-line { position: absolute; left: 2%; right: 2%; top: 0; border-top: 2px solid rgba(var(--brand-primary-rgb), 0.22); }
.dt-genai-tick { position: absolute; top: 6px; font-size: 0.56em; font-weight: 700; color: var(--brand-muted); }
.dt-genai-tick.emphasize { color: var(--brand-primary-dark); }
.dt-genai-tick.t1950 { left: 2%; }
.dt-genai-tick.t1960 { left: 14%; transform: translateX(-50%); }
.dt-genai-tick.t1970 { left: 26%; transform: translateX(-50%); }
.dt-genai-tick.t1980 { left: 38%; transform: translateX(-50%); }
.dt-genai-tick.t1990 { left: 50%; transform: translateX(-50%); }
.dt-genai-tick.t2000 { left: 62%; transform: translateX(-50%); }
.dt-genai-tick.t2010 { left: 74%; transform: translateX(-50%); }
.dt-genai-tick.t2020 { left: 86%; transform: translateX(-50%); }
.dt-genai-caption { font-size: 0.62em; color: var(--brand-muted); line-height: 1.35; text-align: start; max-width: 96%; }

.dt-ethics-card { height: 100%; padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; text-align: start; position: relative; }
.dt-ethics-badge { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.dt-ethics-badge i, .dt-ethics-badge svg { width: 19px; height: 19px; }
.dt-ethics-claim { font-size: 0.92em; color: var(--brand-primary-dark); font-weight: 800; line-height: 1.3; margin: 0; }
.dt-ethics-foot { font-size: 0.65em; font-weight: 700; padding-top: 6px; border-top: 1px solid rgba(var(--brand-primary-rgb), 0.08); width: 100%; }
.dt-ethics-transparency { border-top: 4px solid var(--dt-teal); }
.dt-ethics-transparency .dt-ethics-badge { background: linear-gradient(135deg, var(--dt-teal), #4db6ac); }
.dt-ethics-transparency .dt-ethics-foot { color: var(--dt-teal); }
.dt-ethics-accountability { border-top: 4px solid var(--ethics-accountability-from); }
.dt-ethics-accountability .dt-ethics-badge { background: linear-gradient(135deg, var(--ethics-accountability-from), var(--ethics-accountability-to)); }
.dt-ethics-accountability .dt-ethics-foot { color: var(--ethics-accountability-from); }
.dt-ethics-bias { border-top: 4px solid var(--ethics-bias-from); }
.dt-ethics-bias .dt-ethics-badge { background: linear-gradient(135deg, var(--ethics-bias-from), var(--ethics-bias-to)); }
.dt-ethics-bias .dt-ethics-foot { color: var(--ethics-bias-from); }
.dt-ethics-privacy { border-top: 4px solid var(--ethics-privacy-from); }
.dt-ethics-privacy .dt-ethics-badge { background: linear-gradient(135deg, var(--ethics-privacy-from), var(--ethics-privacy-to)); }
.dt-ethics-privacy .dt-ethics-foot { color: var(--ethics-privacy-from); }
.dt-ethics-environment { border-top: 4px solid var(--pillar-4); }
.dt-ethics-environment .dt-ethics-badge { background: linear-gradient(135deg, var(--pillar-4), var(--ethics-environment-to)); }
.dt-ethics-environment .dt-ethics-foot { color: var(--pillar-4); }
.dt-fact-chip.danger { background: rgba(220, 38, 38, 0.10); color: #dc2626; border: 1px solid rgba(220, 38, 38, 0.25); }
.dt-fact-chip.partners { background: rgba(91, 123, 7, 0.10); color: var(--pillar-4); border: 1px solid rgba(91, 123, 7, 0.25); }
.dt-fact-chip.light { background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); }
.clickable-fact-card { cursor: pointer; }

.dt-case-card { gap: 6px; padding: 16px 20px; }
.dt-case-badge {
  background: rgba(var(--brand-primary-rgb), 0.08); color: var(--brand-primary); font-size: 0.65em; font-weight: 700;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.2); padding: 2px 10px; border-radius: 12px; display: inline-flex; align-items: center; gap: 5px; width: fit-content;
}
.dt-case-badge i, .dt-case-badge svg { width: 12px; height: 12px; }
.dt-case-title { font-size: 0.96em; color: var(--brand-primary-dark); display: block; line-height: 1.25; margin-bottom: 4px; }
.dt-case-block { border-inline-start: none; border-radius: 6px; padding: 6px 10px; margin-bottom: 6px; border: 1px solid rgba(var(--brand-primary-rgb), 0.10); }
.dt-case-block.problem { background: rgba(232, 119, 34, 0.04); }
.dt-case-block.solution { background: rgba(var(--brand-accent-rgb), 0.04); }
.dt-case-block.impact { background: rgba(var(--dt-success-rgb), 0.04); }
.dt-case-label { font-size: 0.66em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.dt-case-block.problem .dt-case-label { color: var(--pillar-3); }
.dt-case-block.solution .dt-case-label { color: var(--brand-primary); }
.dt-case-block.impact .dt-case-label { color: var(--dt-success); }
.dt-case-block p { font-size: 0.70em; color: var(--brand-ink); line-height: 1.35; margin: 0; }
.dt-case-label i, .dt-case-label svg { width: 12px; height: 12px; }
.dt-check-list { list-style: none; padding: 0; margin: 0; font-size: 0.70em; color: var(--brand-ink); line-height: 1.35; }
.dt-check-list li { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 3px; }
.dt-check-list i, .dt-check-list svg { width: 13px; height: 13px; color: var(--dt-success); flex-shrink: 0; margin-top: 2px; }

.dt-quote-hero {
  height: 100%; padding: 26px 36px; position: relative; overflow: hidden; text-align: start; cursor: pointer;
  background: #0B1F3A url('assets/sheikh-mohammed-portrait-bg.jpeg') right center / auto 100% no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--brand-radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; justify-content: center;
}
.dt-quote-hero-mark { position: absolute; left: 16px; top: 8px; font-size: 8.5em; font-family: Georgia, serif; color: rgba(255, 255, 255, 0.06); line-height: 0.75; pointer-events: none; z-index: 1; }
.dt-quote-hero-body { position: relative; z-index: 2; max-width: 560px; }
.dt-quote-hero-text { font-size: 1.35em; font-weight: 800; color: #fff; line-height: 1.4; margin-bottom: 16px; }
.dt-em-gold { color: var(--dt-gold); }
.dt-quote-hero-attr { font-size: 0.76em; color: rgba(255, 255, 255, 0.9); line-height: 1.35; }
.dt-quote-hero-attr strong { color: #fff; font-size: 1.2em; display: block; margin-bottom: 2px; }

.dt-partner-card { height: 100%; padding: 16px 14px; display: flex; flex-direction: column; justify-content: space-between; text-align: start; gap: 6px; }
.dt-partner-card strong { font-size: 0.92em; color: var(--brand-primary-dark); display: block; margin-bottom: 4px; }
.dt-partner-card p { font-size: 0.74em; color: var(--brand-ink); line-height: 1.4; margin: 0; }
.dt-partner-foot { font-size: 0.68em; font-weight: 700; padding-top: 8px; border-top: 1px solid rgba(var(--brand-primary-rgb), 0.08); width: 100%; }
.dt-partner-foot.primary { color: var(--brand-primary); }
.dt-partner-foot.accent { color: var(--brand-accent); }
.dt-partner-foot.arsenal { color: var(--pillar-3); }
.dt-partner-foot.partners { color: var(--pillar-4); }

.dt-roadmap { padding: 24px 22px; justify-content: center; align-items: center; overflow: hidden; }
.dt-roadmap-spine { position: relative; display: flex; align-items: stretch; justify-content: space-between; gap: 12px; width: 100%; }
.dt-roadmap-bar {
  position: absolute; left: 10%; right: 9%; top: 16px; height: 4px; border-radius: 4px; z-index: 0;
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--dt-danger) 25%, var(--pillar-4) 50%, var(--pillar-3) 75%, var(--dt-burgundy) 100%);
}
.dt-roadmap-arrow {
  position: absolute; right: 7.5%; top: 11px; width: 0; height: 0; z-index: 1;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 13px solid var(--dt-burgundy);
}
.dt-roadmap-step { flex: 1 1 0; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.dt-roadmap-num {
  width: 36px; height: 36px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 0.95em;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #fff, 0 4px 12px rgba(0, 0, 0, 0.15);
}
.dt-roadmap-step.s1 .dt-roadmap-num { background: var(--brand-primary); }
.dt-roadmap-step.s2 .dt-roadmap-num { background: var(--dt-danger); }
.dt-roadmap-step.s3 .dt-roadmap-num { background: var(--pillar-4); }
.dt-roadmap-step.s4 .dt-roadmap-num { background: var(--pillar-3); }
.dt-roadmap-step.s5 .dt-roadmap-num { background: var(--dt-burgundy); }
.dt-roadmap-card {
  width: 100%; border-radius: 12px; padding: 14px 10px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 180px; flex: 1 1 auto;
  border: 1.5px solid rgba(var(--brand-primary-rgb), 0.18); background: rgba(var(--brand-primary-rgb), 0.05);
}
.dt-roadmap-step.s2 .dt-roadmap-card { background: rgba(var(--dt-danger-rgb), 0.05); border-color: rgba(var(--dt-danger-rgb), 0.18); }
.dt-roadmap-step.s3 .dt-roadmap-card { background: rgba(91, 123, 7, 0.10); border-color: rgba(91, 123, 7, 0.22); }
.dt-roadmap-step.s4 .dt-roadmap-card { background: rgba(232, 119, 34, 0.08); border-color: rgba(232, 119, 34, 0.22); }
.dt-roadmap-step.s5 .dt-roadmap-card { background: rgba(var(--dt-burgundy-rgb), 0.06); border-color: rgba(var(--dt-burgundy-rgb), 0.18); }
.dt-roadmap-card strong { font-size: 0.78em; color: var(--brand-primary-dark); line-height: 1.25; }
.dt-roadmap-card span { font-size: 0.66em; color: var(--brand-ink); line-height: 1.35; }
.dt-roadmap-card em { font-size: 0.60em; font-style: normal; font-weight: 700; margin-top: auto; }
.dt-roadmap-step.s1 .dt-roadmap-card em { color: var(--brand-primary); }
.dt-roadmap-step.s2 .dt-roadmap-card em { color: var(--dt-danger); }
.dt-roadmap-step.s3 .dt-roadmap-card em { color: var(--pillar-4); }
.dt-roadmap-step.s4 .dt-roadmap-card em { color: var(--pillar-3); }
.dt-roadmap-step.s5 .dt-roadmap-card em { color: var(--dt-burgundy); }

.dt-mini-pillar { height: 100%; padding: 8px 10px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; }
.dt-mini-pillar strong { font-size: 0.88em; color: var(--brand-primary-dark); }
.dt-closing-line { height: 100%; padding: 8px 24px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.dt-closing-line i, .dt-closing-line svg { width: 20px; height: 20px; color: var(--brand-primary); flex-shrink: 0; }
.dt-closing-line div { font-size: 0.9em; line-height: 1.45; color: var(--brand-ink); }
.c-ambition { color: var(--pillar-1); }
.c-people { color: var(--pillar-2); }
.c-arsenal { color: var(--pillar-3); }
.c-partners { color: var(--pillar-4); }
.dt-sprint-card { height: 100%; justify-content: space-between; overflow: hidden; }
.dt-pillar-label { font-size: 0.65em; font-weight: 800; letter-spacing: 0.3px; display: block; }
.dt-pillar-label.primary { color: var(--pillar-1); }
.dt-pillar-label.accent { color: var(--pillar-2); }
.dt-pillar-label.arsenal { color: var(--pillar-3); }
.dt-pillar-label.partners { color: var(--pillar-4); }
.dt-sprint-foot { font-size: 0.70em; font-weight: 700; padding-top: 8px; border-top: 1px solid rgba(var(--brand-primary-rgb), 0.08); width: 100%; }
.dt-sprint-foot.primary { color: var(--pillar-1); }
.dt-sprint-foot.accent { color: var(--pillar-2); }
.dt-sprint-foot.arsenal { color: var(--pillar-3); }
.dt-sprint-foot.partners { color: var(--pillar-4); }
.dt-thanks { padding: 36px 48px; gap: 24px; }
.dt-thanks-title { font-size: 2.4em; font-weight: 900; color: var(--brand-primary-dark); letter-spacing: -0.5px; line-height: 1.1; margin-bottom: 8px; }
.dt-thanks-sub { font-size: 1.05em; font-weight: 700; color: var(--brand-accent); }
.dt-thanks-person { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dt-thanks-person strong { font-size: 1.05em; color: var(--brand-primary-dark); }
.dt-thanks-person span { font-size: 0.82em; color: var(--brand-muted); }

/* ==========================================================================
   Spine components added in the HBMSU theme port
   ========================================================================== */

/* --- .loop-model : sense -> analyze -> act cycle (HTML/CSS, no SVG, no images) ---
   Physical layout is fixed (direction:ltr on the grid) so the cycle reads the same in RTL;
   text inside nodes stays RTL. Focus modifiers: is-focus-sense | is-focus-analyze | is-focus-act */
.loop-model {
  --loop-c1: var(--hbmsu-blue);
  --loop-c2: var(--hbmsu-sky);
  --loop-c3: var(--pillar-arsenal);
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas:
    ". n1 ."
    "a3 ctr a1"
    "n3 a2 n2";
  align-items: center;
  justify-items: center;
  gap: 14px 18px;
  width: 100%;
  max-width: 900px;
  max-height: 520px;
  margin: 0 auto;
  align-self: center;
}
.loop-node {
  direction: rtl;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 230px;
  padding: 14px 22px;
  background: var(--hbmsu-white);
  border: 2px solid transparent;
  border-radius: var(--hbmsu-radius);
  box-shadow: var(--hbmsu-shadow);
  transition: opacity 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.loop-node .loop-num {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 0.95em; flex-shrink: 0;
}
.loop-node strong { font-size: 1.1em; font-weight: 800; color: var(--hbmsu-blue-dark); }
.loop-node small { display: block; font-size: 0.66em; font-weight: 600; color: var(--hbmsu-muted); line-height: 1.3; }
.loop-n1 { grid-area: n1; } .loop-n2 { grid-area: n2; } .loop-n3 { grid-area: n3; }
.loop-n1 .loop-num { background: var(--loop-c1); }
.loop-n2 .loop-num { background: var(--loop-c2); }
.loop-n3 .loop-num { background: var(--loop-c3); }
.loop-n1 { border-top: 4px solid var(--loop-c1); }
.loop-n2 { border-top: 4px solid var(--loop-c2); }
.loop-n3 { border-top: 4px solid var(--loop-c3); }
.loop-arrow {
  direction: rtl;
  display: flex; align-items: center; gap: 8px;
  color: var(--hbmsu-muted); font-weight: 800; font-size: 0.8em;
  transition: opacity 0.25s ease;
}
.loop-arrow i, .loop-arrow svg { width: 38px; height: 38px; stroke-width: 2.2px; color: var(--hbmsu-sky); }
.loop-arrow span {
  background: var(--hbmsu-sky-soft); color: var(--hbmsu-blue);
  border: 1px solid rgba(var(--hbmsu-blue-rgb), 0.18);
  border-radius: var(--hbmsu-radius-pill); padding: 3px 14px;
}
.loop-a1 { grid-area: a1; } .loop-a2 { grid-area: a2; } .loop-a3 { grid-area: a3; }
.loop-center {
  grid-area: ctr; direction: rtl; text-align: center;
  width: 180px; height: 180px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--hbmsu-sky-soft);
  border: 2px dashed rgba(var(--hbmsu-sky-rgb), 0.55);
  color: var(--hbmsu-blue-dark); font-weight: 800; font-size: 1.15em; line-height: 1.25;
  transition: opacity 0.25s ease;
}
.loop-center small { font-size: 0.6em; font-weight: 700; color: var(--hbmsu-muted); }
/* Focus: one node lit, everything else dimmed */
.loop-model[class*="is-focus-"] .loop-node,
.loop-model[class*="is-focus-"] .loop-arrow,
.loop-model[class*="is-focus-"] .loop-center { opacity: 0.32; }
.loop-model.is-focus-sense .loop-n1,
.loop-model.is-focus-analyze .loop-n2,
.loop-model.is-focus-act .loop-n3 {
  opacity: 1; border-color: var(--hbmsu-sky); box-shadow: var(--hbmsu-shadow-hover);
}

/* --- .layout-pause : full-image "road sign" pause slide --- */
.layout-pause {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: 100%; min-height: 0;
}
.layout-pause .pause-title {
  margin: 0; font-size: 1.2em; font-weight: 800; color: var(--hbmsu-blue-dark); text-align: center;
}
.layout-pause > .show-img, .layout-pause .pause-media {
  flex: 1 1 0%; min-height: 0; width: 100%; height: 100%; object-fit: contain; border-radius: var(--hbmsu-radius);
}
.grid-container > .layout-pause { flex: 1 1 0%; height: 100%; }

/* --- .layout-table / .data-table : clean real HTML table --- */
.layout-table { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 0; }
.layout-table .slide-card { height: auto; padding: 0; overflow: hidden; }
.data-table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-size: 0.72em; line-height: 1.4; color: var(--hbmsu-dark); text-align: start;
}
.data-table th {
  background: var(--hbmsu-blue); color: #fff; font-weight: 800;
  padding: 12px 16px; text-align: start;
}
.data-table td {
  padding: 12px 16px; vertical-align: middle; text-align: start;
  border-bottom: 1px solid rgba(var(--hbmsu-blue-rgb), 0.1);
}
.data-table tbody tr:nth-child(even) td { background: var(--hbmsu-sky-soft); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table td:first-child { font-weight: 800; color: var(--hbmsu-blue-dark); }

/* --- Roadmap phase card (DT) --- */
.roadmap-phase-card {
  height: 100%; background: var(--hbmsu-white); border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--hbmsu-shadow); border: 2px solid transparent; text-align: start;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.roadmap-phase-card:hover { border-color: var(--hbmsu-sky); box-shadow: var(--hbmsu-shadow-hover); }

/* --- Colour utilities --- */
.text-hbmsu-blue { color: var(--hbmsu-blue); }
.text-hbmsu-sky { color: var(--hbmsu-sky); }
.text-hbmsu-muted { color: var(--hbmsu-muted); }

/* Case-study stat cards: tighter padding so figures never clip */
.layout-case .slide-card { padding: 12px 16px; }
.layout-case .slide-card .card-kicker { margin-bottom: 4px; }

/* ==========================================================================
   Consistency pass — one visual grammar for every slide, taken from the
   author's own decks (SmartCities - DP.pdf, HBMSU Digital Transformation,
   RPA): section-prefixed title ("القسم: الموضوع") with the claim as
   subtitle, content that fills the stage, white outlined cards with a
   coloured icon, leader quotes on a dark portrait card, centred slogan
   footer with a page pill.
   ========================================================================== */
:root {
  --card-border: #D8E1EA;
  --card-shadow: 0 2px 10px rgba(0, 40, 85, 0.05);
}

/* Header: section title + claim subtitle, logo at the inline-end */
.slide-header-container {
  align-items: center;
  padding: 0 4px;
  margin-bottom: 14px;
}
.slide-header h2 { font-size: 1.32em; font-weight: 800; color: var(--hbmsu-blue-dark); margin-bottom: 2px; }
.slide-header .subtitle { font-size: 0.66em; color: var(--hbmsu-muted); }
.slide-logo, .slide-logo-campus { height: 46px; }

/* Content fills the box under the header instead of floating mid-slide */
.grid-container { justify-content: stretch; padding: 4px 0 6px; }
.grid-container > .row,
.grid-container > [class*="layout-"] { flex: 1 1 0%; height: 100%; min-height: 0 !important; }
.grid-container .row.rows-auto-fill { grid-auto-rows: minmax(0, 1fr); }

/* Cards: one outline, one radius, one shadow; colour lives in the icon */
.slide-card:not(.bg-transparent):not(.border-none) {
  background: var(--hbmsu-white);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}
.slide-card:not(.bg-transparent):not(.no-hover):not(.border-none):hover {
  border-color: var(--hbmsu-sky);
  box-shadow: var(--hbmsu-shadow-hover);
}
.slide-card { justify-content: center; }
.slide-card.accent-top,
.dt-accent-primary, .dt-accent-accent, .dt-accent-arsenal, .dt-accent-partners {
  border-top: 1px solid var(--card-border) !important;
}
.icon-box { width: 56px; height: 56px; border-radius: 14px; }
.icon-box i, .icon-box svg { width: 30px; height: 30px; }

/* Card copy: bold headline, readable body (PDF reads from the back of the room) */
.lo-card strong, .slide-card > strong, .card-kicker { font-size: 1em; font-weight: 800; color: var(--hbmsu-blue-dark); }
.lo-card p, .lo-card .lo-body, .lo-body, .card-body { font-size: 0.8em; line-height: 1.45; }
.slide-card.align-center > .lo-body { font-size: 0.92em; font-weight: 700; color: var(--hbmsu-blue-dark); }
.slide-card.align-center > .icon-box { width: 76px; height: 76px; border-radius: 18px; margin-bottom: 12px; }
.slide-card.align-center > .icon-box i, .slide-card.align-center > .icon-box svg { width: 40px; height: 40px; }

/* Question / prompt: big centred question in one white card */
.dt-quote-text, .q-prompt-hero { font-size: 1.6em; font-weight: 800; color: var(--hbmsu-blue-dark); line-height: 1.45; max-width: 960px; margin: 0; }

/* Quotes and definitions: white card, brand bar on the inline-start edge */
.quote-card:not(.quote-hero) {
  background: var(--hbmsu-white) !important;
  color: var(--hbmsu-blue-dark) !important;
  border: 1px solid var(--card-border) !important;
  border-inline-start: 8px solid var(--hbmsu-blue) !important;
  box-shadow: var(--card-shadow) !important;
  padding: 28px 44px;
}
.quote-card:not(.quote-hero) .quote-mark { color: var(--hbmsu-sky) !important; opacity: 1 !important; }
.quote-card:not(.quote-hero) .quote-text { font-size: 1.32em; color: var(--hbmsu-blue-dark) !important; line-height: 1.6; }
.quote-card:not(.quote-hero) .quote-text em { color: var(--hbmsu-sky) !important; }
.quote-card:not(.quote-hero) .quote-by,
.quote-card:not(.quote-hero) .quote-by strong { color: var(--hbmsu-muted) !important; opacity: 1 !important; }

/* Leader quotes: dark card with the leader's portrait (DT deck pattern); the photo keeps
   its face on the right, so the quote sits in the left half */
.quote-card.quote-hero {
  background: var(--hbmsu-dark) url('assets/sheikh-mohammed-portrait-bg.jpeg') right center / cover no-repeat !important;
  border: none !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
  padding: 36px 48px !important;
  justify-content: center;
}
.quote-card.quote-hero > * { width: 52%; margin-inline-start: auto; }
.quote-card.quote-hero .quote-mark { display: none; }
.quote-card.quote-hero .quote-text { font-size: 1.55em; font-weight: 800; color: #fff !important; line-height: 1.45; margin-bottom: 22px; }
.quote-card.quote-hero .quote-text em, .quote-card.quote-hero .quote-text .dt-em-gold { color: var(--hbmsu-accent-gold) !important; }
.quote-card.quote-hero .quote-by { color: rgba(255, 255, 255, 0.88) !important; font-size: 0.78em; line-height: 1.5; opacity: 1 !important; }
.quote-card.quote-hero .quote-by strong { color: #fff !important; font-size: 1.2em; }

/* Pictures: always centred in the content box, never pinned to one side */
.layout-pause { height: 100%; }
.slide-card.bg-transparent { align-items: center; justify-content: center; }
.slide-card.bg-transparent > .show-img { margin-inline: auto; }

/* Footer: date + centred slogan + page pill, as in the DT deck */

/* Dense layouts keep the same grammar at a smaller step so nothing clips */
.col-3 .dt-quote-text, .col-4 .dt-quote-text, .col-5 .dt-quote-text, .col-6 .dt-quote-text,
.layout-case .dt-quote-text { font-size: 1.12em; }
.row.rows-3 .lo-card, .row.rows-4 .lo-card, .row.rows-5 .lo-card { padding: 10px 18px; min-height: 0; }
.row.rows-3 .lo-card .lo-body, .row.rows-4 .lo-card .lo-body, .row.rows-5 .lo-card .lo-body,
.row.rows-3 .lo-card p, .row.rows-4 .lo-card p, .row.rows-5 .lo-card p { font-size: 0.72em; line-height: 1.38; }
.row.rows-4 .lo-card strong, .row.rows-5 .lo-card strong, .row.rows-4 .card-kicker { font-size: 0.9em; margin-bottom: 2px; }
.row.rows-4 .lo-card .icon-box, .row.rows-5 .lo-card .icon-box { width: 44px; height: 44px; border-radius: 12px; }
.row.rows-4 .lo-card .icon-box svg, .row.rows-5 .lo-card .icon-box svg { width: 24px; height: 24px; }
.dt-panel-body { font-size: 0.76em; }

/* Sparse layouts: tall cards carry bigger copy so they never look empty */
.row.rows-1 .lo-card { padding: 22px 28px; gap: 20px; }
.row.rows-1 .lo-card strong { font-size: 1.18em; }
.row.rows-1 .lo-card .lo-body, .row.rows-1 .lo-card p { font-size: 0.9em; }
.row.rows-2 .lo-card strong { font-size: 1.06em; }
.row.rows-2 .lo-card .lo-body, .row.rows-2 .lo-card p { font-size: 0.84em; }
/* Multiple-choice slides: the question and options read at a distance */
.row.rows-auto-fill .lo-card { padding: 12px 24px; gap: 18px; }
.row.rows-auto-fill .lo-card strong { font-size: 1.2em; }
.row.rows-auto-fill .lo-card .lo-body, .row.rows-auto-fill .lo-card p { font-size: 0.86em; }
.row.rows-auto-fill .col-12 .lo-card .lo-body, .row.rows-auto-fill .col-12 .lo-card p { font-size: 0.9em; line-height: 1.5; }
.row.rows-auto-fill .col-12 .lo-card .lo-body strong { font-size: 1em; }
.quiz-letter { font-size: 1.1em; font-weight: 800; }
.layout-case .row.rows-4 .lo-card .lo-body, .layout-case .row.rows-4 .lo-card p { font-size: 0.68em; line-height: 1.34; }
.dt-panel { padding: 12px 16px; gap: 4px; }
.dt-panel .dt-panel-body, .dt-panel p, .dt-panel li { font-size: 0.72em; line-height: 1.38; }
.row.rows-3 .col-4 .lo-card .lo-body { font-size: 0.7em; }
.layout-case .row.rows-4 .lo-card { padding: 6px 16px; }
.row.rows-3 .col-4 > .slide-card:not(.lo-card) { padding: 10px 16px; }

/* Demo / video: picture at the start, QR card at the end (one layout for all) */
.layout-demo { grid-template-columns: 8fr 4fr; grid-template-rows: minmax(0, 1fr); place-items: stretch; }
.layout-demo .card-kicker, .workshop-qr .card-kicker { margin-top: 14px; font-size: 0.82em; }
.qr-frame { width: 190px; height: 190px; flex: 0 0 190px; }

/* Brainstorm prompts: the task reads as a headline, the questions as a list */
.workshop-prompt { padding: 28px 36px; }
.workshop-role { font-size: 0.78em; margin-bottom: 4px; }
.workshop-task { font-size: 1.3em; font-weight: 800; color: var(--hbmsu-blue-dark); margin-bottom: 10px; line-height: 1.35; }
.workshop-prompt .md-list li { font-size: 0.95em; margin-bottom: 10px; }
.workshop-prompt .md-list-icon { width: 18px; height: 18px; margin-top: 8px; }

/* Title slide: Welcome & Warmup banner (mirrors the Digital Transformation deck, RTL) */
.warmup-banner {
  position: relative;
  margin: 14px auto 0 auto;
  width: min(880px, 92%);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(0, 168, 150, 0.4);
  border-radius: 14px;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  box-shadow: 0 8px 24px rgba(0, 40, 85, 0.12);
  z-index: 50;
  text-align: start;
  box-sizing: border-box;
}
.warmup-badge {
  background: linear-gradient(135deg, #00A896, #0284c7);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font);
}
.warmup-text {
  font-size: 0.88rem;
  color: var(--brand-primary-dark);
  line-height: 1.4;
  font-family: var(--font);
}
.warmup-text strong { color: var(--brand-primary); font-weight: 800; }

/* Instructor slide: DT-style proportions (compact, vertically centred, larger glowing avatar) */
.grid-container > .layout-profile {
  flex: 0 0 auto;
  height: 450px;
  margin-block: auto;
}
.layout-profile .profile-photo { gap: 6px; padding: 24px 20px; }
.layout-profile .avatar {
  width: 170px;
  height: 170px;
  border-color: var(--hbmsu-sky);
  box-shadow: 0 6px 20px rgba(var(--hbmsu-blue-rgb), 0.15);
  margin-bottom: 6px;
}
.layout-profile .profile-name { font-size: 1.25em; font-weight: 800; color: var(--hbmsu-blue-dark); }
.layout-profile .profile-role { font-size: 0.85em; color: var(--hbmsu-sky); }
.layout-profile .profile-org { font-size: 0.78em; }
.layout-profile .profile-email {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(var(--hbmsu-blue-rgb), 0.12);
  font-size: 0.78em;
  color: var(--hbmsu-dark);
}
.layout-profile .profile-email svg { width: 14px; height: 14px; color: var(--hbmsu-sky); }
.layout-profile .profile-rails { justify-content: space-between; }
.layout-profile .bio-rail { flex: 1 1 0; min-height: 0; }
.layout-profile .bio-rail .bio-copy strong { font-size: 1.02em; margin-bottom: 3px; }
.layout-profile .bio-rail .bio-copy span { font-size: 0.7em; }
.layout-profile .profile-rails .bio-rail .bio-copy { padding-block: 10px; }

/* Outcomes slide: icon strip spans the full card height (as DT's Ministry of Identity slide) */
.outcomes-rails .bio-rail { padding: 0; gap: 14px; align-items: stretch; }
.outcomes-rails .bio-rail .icon-box { width: 75px; min-width: 75px; height: auto; border-radius: 0; }
.outcomes-rails .bio-rail .bio-copy { padding: 10px 0; padding-inline: 0 16px; }
.outcomes-rails > div:nth-child(3n+1) .icon-box { background: rgba(var(--hbmsu-blue-rgb), 0.08); color: var(--hbmsu-blue); }
.outcomes-rails > div:nth-child(3n+2) .icon-box { background: rgba(var(--hbmsu-sky-rgb), 0.12); color: var(--hbmsu-sky); }
.outcomes-rails > div:nth-child(3n) .icon-box { background: rgba(var(--pillar-arsenal-rgb), 0.12); color: var(--pillar-arsenal); }

/* --- .loop-model drawn by loop-diagram.js (D3 SVG): ring + three nodes + double-headed arrows --- */
.loop-model.is-d3 { display: block; max-width: 900px; max-height: 100%; height: 100%; }
.loop-svg { width: 100%; height: 100%; display: block; direction: ltr; font-family: var(--font); }
.lm-ring { fill: rgba(var(--hbmsu-sky-rgb), 0.04); stroke: var(--hbmsu-blue); stroke-width: 3; }
.lm-arrow polygon { fill: rgba(var(--hbmsu-sky-rgb), 0.38); }
.lm-pill { fill: var(--hbmsu-white); stroke: rgba(var(--hbmsu-blue-rgb), 0.22); stroke-width: 1.5; }
.lm-pill-text { fill: var(--hbmsu-blue); font-size: 20px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; }
.lm-box { fill: var(--hbmsu-white); stroke: rgba(var(--hbmsu-blue-rgb), 0.1); stroke-width: 1.5; filter: drop-shadow(0 6px 12px rgba(var(--hbmsu-blue-rgb), 0.14)); }
.lm-accent { stroke-width: 5; stroke-linecap: round; fill: none; }
.lm-num { fill: #fff; font-size: 20px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; }
.lm-label { fill: var(--hbmsu-blue-dark); font-size: 23px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; }
.lm-center circle { fill: var(--hbmsu-sky-soft); stroke: rgba(var(--hbmsu-sky-rgb), 0.55); stroke-width: 2; stroke-dasharray: 6 6; }
.lm-center-main { fill: var(--hbmsu-blue-dark); font-size: 28px; font-weight: 800; text-anchor: middle; }
.lm-center-sub { fill: var(--hbmsu-muted); font-size: 18px; font-weight: 700; text-anchor: middle; }
.lm-node, .lm-arrow, .lm-center { transition: opacity 0.25s ease; }
.loop-model[class*="is-focus-"] .lm-node,
.loop-model[class*="is-focus-"] .lm-arrow,
.loop-model[class*="is-focus-"] .lm-center { opacity: 0.32; }
.loop-model.is-focus-sense .lm-sense,
.loop-model.is-focus-analyze .lm-analyze,
.loop-model.is-focus-act .lm-act { opacity: 1; }
.loop-model.is-focus-sense .lm-sense .lm-box,
.loop-model.is-focus-analyze .lm-analyze .lm-box,
.loop-model.is-focus-act .lm-act .lm-box { stroke: var(--hbmsu-sky); stroke-width: 3; }

/* Loop slide with a discussion question under the chart */
.layout-loop-ask { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; height: 100%; min-height: 0; }
.layout-loop-ask .loop-model { flex: 1 1 0; min-height: 0; width: 100%; }
.loop-question {
  margin: 0; padding: 8px 28px; text-align: center;
  background: var(--hbmsu-blue-dark); color: #fff;
  border: 1.5px solid rgba(var(--hbmsu-sky-rgb), 0.45); border-radius: var(--hbmsu-radius-pill);
  font-size: 1.05em; font-weight: 800;
}

/* Icon + copy cards: the tinted icon strip spans the full card height (as DT's Ministry of Identity slide) */
.slide-card.lo-card:has(> .icon-box:first-child),
.slide-card.bio-rail:has(> .icon-box:first-child) {
  padding: 0 !important;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
}
.slide-card.lo-card > .icon-box:first-child,
.slide-card.bio-rail > .icon-box:first-child {
  width: 75px;
  min-width: 75px;
  height: auto;
  align-self: stretch;
  border-radius: 0;
  margin-inline-end: 16px;
}
.row.rows-4 .lo-card > .icon-box:first-child,
.row.rows-5 .lo-card > .icon-box:first-child { width: 60px; min-width: 60px; height: auto; border-radius: 0; margin-inline-end: 12px; }
.slide-card.lo-card:has(> .icon-box:first-child) > :not(.icon-box),
.slide-card.bio-rail:has(> .icon-box:first-child) > :not(.icon-box) {
  align-self: center;
  padding-block: 8px;
  padding-inline-end: 16px;
}

/* Quote attribution pinned to the physical left edge of the card */
.quote-card .quote-by.quote-by-left { align-self: stretch; width: 100%; text-align: left; }

/* Full-height icon strip cards: strip pinned to the start edge, copy follows it (right in RTL) */
.slide-card.lo-card:has(> .icon-box:first-child),
.slide-card.bio-rail:has(> .icon-box:first-child),
.row .slide-card.lo-card:has(> .icon-box:first-child) {
  justify-content: flex-start !important;
  text-align: start;
}
.slide-card.lo-card:has(> .icon-box:first-child) > :not(.icon-box) { flex: 1 1 auto; min-width: 0; text-align: start; }

/* Short bullet list inside a bio-rail card */
.bio-rail .bio-copy .bio-bullets { margin: 0; padding: 0; padding-inline-start: 2.2em; list-style: disc; font-size: 0.85em; line-height: 1.5; color: var(--hbmsu-dark); }
.bio-rail .bio-copy .bio-bullets li::marker { color: var(--hbmsu-sky); }

/* English term tag inside Arabic cards: small, accent colour, aligned with the Arabic copy */
.reveal .slides section .bio-copy .card-kicker[dir="ltr"],
.reveal .slides section .lo-card .card-kicker[dir="ltr"] {
  display: block;
  align-self: stretch;
  width: 100%;
  text-align: right !important;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hbmsu-sky);
  margin-bottom: 2px;
}

/* Section label between rows of cards (no card) */
.grid-container .row.row-label-mid { grid-template-rows: minmax(0, 1fr) auto minmax(0, 1.2fr); }
.examples-label { margin: 0; font-size: 1.15em; font-weight: 800; color: var(--hbmsu-blue-dark); text-align: start; padding-inline: 4px; }

/* Example cards: copy starts at the top of the card */
.row-label-mid .col-4 .slide-card.bio-rail:has(> .icon-box:first-child) > .bio-copy { align-self: flex-start; padding-top: 18px; }
.row-label-mid .col-4 .slide-card.bio-rail > .icon-box:first-child { align-items: flex-start; padding-top: 22px; box-sizing: border-box; }

/* Explicit-sensing layout: roomy cards, consistent inner padding, label row with breathing space */
.grid-container .row.row-label-mid { row-gap: 10px; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1.15fr); }
.row-label-mid .slide-card.bio-rail:has(> .icon-box:first-child) > .bio-copy { padding: 24px 28px 24px 8px; padding-inline: 8px 28px; gap: 6px; }
.row-label-mid .col-4 .slide-card.bio-rail:has(> .icon-box:first-child) > .bio-copy { align-self: flex-start; padding-top: 26px; }
.row-label-mid .bio-copy strong { font-size: 1.15em; margin-bottom: 4px; }
.row-label-mid .bio-copy span:not(.card-kicker) { font-size: 0.9em; line-height: 1.6; }
.row-label-mid .col-4 .slide-card.bio-rail > .icon-box:first-child { padding-top: 30px; }
.examples-label { padding-block: 6px 2px; padding-inline: 6px; }

/* IoT architecture (iot-architecture.js) */
.grid-container .row.row-iot { grid-template-rows: minmax(0, 1fr) auto minmax(0, 0.55fr); }
.iot-arch { width: 100%; height: 100%; min-height: 0; }
.iot-svg { width: 100%; height: 100%; display: block; direction: ltr; font-family: var(--font); }
.iot-link { stroke: rgba(var(--hbmsu-sky-rgb), 0.7); stroke-width: 6; stroke-linecap: round; }
.iot-arrowhead { fill: rgba(var(--hbmsu-sky-rgb), 0.9); }
.iot-node { stroke-width: 3; }
.iot-badge-text { fill: #fff; font-size: 16px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; }
.iot-name { fill: var(--hbmsu-blue-dark); font-size: 21px; font-weight: 800; text-anchor: middle; }
.iot-pill { fill: var(--hbmsu-sky-soft); stroke: rgba(var(--hbmsu-blue-rgb), 0.2); stroke-width: 1.5; }
.iot-pill-text { fill: var(--hbmsu-blue); font-size: 18px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; }
.iot-back { fill: none; stroke: rgba(var(--pillar-arsenal-rgb), 0.75); stroke-width: 3; stroke-dasharray: 8 7; stroke-linecap: round; }
.iot-back-text { fill: var(--hbmsu-muted); font-size: 18px; font-weight: 700; text-anchor: middle; }

/* Chart.js slide: chart card fills the stage above the discussion card */
.grid-container .row.row-chart { grid-template-rows: minmax(0, 1fr) auto; }
.chart-card { position: relative; padding: 16px 24px 8px; min-height: 0; }
.chart-card canvas { width: 100% !important; height: 100% !important; }

/* Question slides: icon and question text centred in the card */
.slide-card.text-center.justify-center .dt-quote-text { align-self: center; width: 100%; max-width: 90%; text-align: center; margin-inline: auto; }

/* Concept hierarchy tree (concept-tree.js) */
.concept-card { padding: 12px 16px; min-height: 0; }
.concept-tree { width: 100%; height: 100%; min-height: 0; }
.ct-svg { width: 100%; height: 100%; display: block; direction: ltr; font-family: var(--font); }
.ct-link { fill: none; stroke: rgba(var(--hbmsu-blue-rgb), 0.28); stroke-width: 2.5; }
.ct-text { font-weight: 800; text-anchor: middle; dominant-baseline: central; }