/* ========================================================================
   PUBLIC VALUE PRESENTATION — Modern Academic Style
   Navy / White / Gold / Soft Gray
   ======================================================================== */

:root{
  --navy: #0f2247;
  --navy-deep: #081428;
  --navy-light: #1e3a66;
  --gold: #c9a24b;
  --gold-light: #e2c778;
  --gray-soft: #f4f5f7;
  --gray-mid: #dfe2e8;
  --gray-text: #5a6472;
  --white: #ffffff;
  --ink: #16233d;
  --shadow: 0 20px 50px -20px rgba(15,34,71,0.35);
  --radius: 18px;
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Inter', sans-serif;
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; height:100%;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--navy-deep);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
h1,h2,h3,h4{ font-family: var(--font-serif); margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: var(--font-sans); cursor:pointer; }
img{ max-width:100%; display:block; }

/* ---------- Progress bar ---------- */
.progress-bar{
  position:fixed; top:0; left:0; width:100%; height:4px;
  background: rgba(255,255,255,0.08); z-index: 500;
}
.progress-fill{
  height:100%; width: 5.88%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transition: width .5s cubic-bezier(.65,0,.35,1);
}

/* ---------- Top bar ---------- */
.topbar{
  position: fixed; top:4px; left:0; right:0; height:52px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 20px; z-index: 400;
  background: linear-gradient(to bottom, rgba(8,20,40,0.85), transparent);
  pointer-events:none;
}
.topbar-left{ display:flex; align-items:center; gap:10px; color:#fff; pointer-events:auto; }
.topbar-left i{ color: var(--gold); font-size:1.1rem; }
.topbar-title{ font-size:.85rem; font-weight:600; letter-spacing:.03em; opacity:.9; }
.topbar-right{ display:flex; align-items:center; gap:10px; pointer-events:auto; }

.pill-btn{
  display:flex; align-items:center; gap:8px;
  background: rgba(255,255,255,0.12); color:#fff;
  border:1px solid rgba(255,255,255,0.25);
  border-radius: 999px; padding: 7px 14px; font-size:.8rem; font-weight:600;
  backdrop-filter: blur(6px);
  transition: background .2s ease, transform .2s ease;
}
.pill-btn:hover{ background: rgba(255,255,255,0.22); }
.pill-btn i{ color: var(--gold-light); }

.slide-counter{
  background: rgba(255,255,255,0.12); color:#fff; border:1px solid rgba(255,255,255,0.25);
  border-radius:999px; padding:7px 16px; font-size:.85rem; font-weight:700; letter-spacing:.03em;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px);
}

/* ---------- Viewport / Track ---------- */
.viewport{
  position: relative; width:100%; height:100%; overflow:hidden;
  touch-action: pan-y;
}
.track{
  display:flex; height:100%;
  transition: transform .6s cubic-bezier(.65,0,.35,1);
  will-change: transform;
}

/* ---------- Slide base ---------- */
.slide{
  flex: 0 0 100%; width:100%; height:100%;
  position: relative; overflow:hidden;
  display:flex; align-items:center;
}
.slide-inner{
  position: relative; z-index: 2;
  width:100%; max-width: 1200px; margin: 0 auto;
  padding: 90px 60px 90px;
  max-height: 100%;
  overflow-y: auto;
}
.slide-light{ background: var(--gray-soft); }
.slide-navy{ background: linear-gradient(135deg, var(--navy-deep), var(--navy)); }
.text-white{ color:#fff !important; }

/* ---------- Badges ---------- */
.slide-badge{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(15,34,71,0.08); color: var(--navy);
  border: 1px solid rgba(15,34,71,0.15);
  padding: 6px 16px; border-radius: 999px;
  font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  margin-bottom: 18px;
}
.badge-gold{ background: rgba(201,162,75,0.15); color: var(--gold-light); border-color: rgba(201,162,75,0.4); }

.slide-title{
  font-size: 2.6rem; font-weight:700; color: var(--navy); line-height:1.15;
  margin-bottom: 20px;
}
.slide-title .vs-text{ color: var(--gold); font-style: italic; font-size:.7em; margin: 0 8px; }
.slide-title .subtle-text{ color: var(--gray-text); font-weight:400; font-size:.7em; }
.slide-lead{ font-size: 1.25rem; color: var(--gray-text); margin-bottom: 30px; max-width: 760px; }

/* ---------- COVER SLIDES ---------- */
.slide-cover{ background: var(--navy-deep); }
.cover-bg{
  position:absolute; inset:0; background-size: cover; background-position: center;
  filter: saturate(0.9);
}
.cover-overlay{
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(8,20,40,0.92) 10%, rgba(15,34,71,0.75) 55%, rgba(8,20,40,0.55));
}
.overlay-dark{ background: linear-gradient(180deg, rgba(6,14,28,0.55) 0%, rgba(6,14,28,0.88) 65%, rgba(6,14,28,0.96) 100%); }
.cover-inner{ text-align:left; color:#fff; padding: 60px 8vw; max-width: 1100px; }
.cover-kicker{
  color: var(--gold-light); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.85rem;
  margin-bottom: 22px; display:flex; align-items:center; gap:10px;
}
.cover-title{ font-size: 3.6rem; line-height:1.1; font-weight:800; margin-bottom: 22px; }
.gold-text{ color: var(--gold-light); }
.cover-divider{ width:90px; height:4px; background: var(--gold); border-radius:2px; margin-bottom: 22px; }
.cover-subtitle{ font-size:1.2rem; color: rgba(255,255,255,0.85); max-width: 640px; margin-bottom: 34px; }
.cover-meta{ display:flex; flex-direction:column; gap:12px; }
.cover-meta-item{ display:flex; align-items:center; gap:12px; font-size:1rem; color: rgba(255,255,255,0.9); }
.cover-meta-item i{ color: var(--gold-light); width:20px; text-align:center; }

/* ---------- Reflection slides (big quote) ---------- */
.reflection-inner{ max-width: 900px; text-align:left; }
.big-quote{
  font-family: var(--font-serif); font-size: 2rem; line-height:1.5; font-weight:600;
  margin: 0 0 26px 0; color: #fff; border-left: 4px solid var(--gold); padding-left: 26px;
}
.reflection-lead{ font-size:1.15rem; color: rgba(255,255,255,0.88); }
.closing-cta{
  margin-top: 30px; display:inline-flex; align-items:center; gap:12px;
  font-size:1.3rem; font-weight:700; color: var(--gold-light);
  border: 2px solid var(--gold); border-radius:999px; padding: 12px 30px;
}

/* ---------- Objectives grid (slide 3) ---------- */
.objectives-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:22px; margin-top: 10px; }
.obj-card{
  background:#fff; border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow);
  border-top: 4px solid var(--gold); position:relative;
}
.obj-num{ position:absolute; top:16px; right:20px; font-family: var(--font-serif); font-size:1.6rem; color: var(--gray-mid); font-weight:700; }
.obj-icon{ font-size:1.8rem; color: var(--navy); margin-bottom:14px; display:block; }
.obj-card p{ font-size:1.05rem; color: var(--ink); line-height:1.5; }

/* ---------- Two column layout ---------- */
.two-col{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items:center; margin-top: 10px; }
.two-col-top{ align-items:start; margin-top: 26px; }
.col-text p{ font-size:1.1rem; line-height:1.6; color: var(--ink); margin-bottom: 16px; }
.inline-quote{
  font-family: var(--font-serif); font-style: italic; font-size:1.3rem; color: var(--navy);
  border-left: 4px solid var(--gold); padding-left: 20px; margin: 10px 0 30px;
}
.inline-quote cite{ display:block; font-style:normal; font-size:.85rem; color: var(--gray-text); margin-top:8px; font-family: var(--font-sans); font-weight:600; }

/* Flow diagram (slide 4) */
.flow-diagram{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.flow-step{
  background:#fff; border: 2px solid var(--navy); border-radius: 14px; padding: 14px 26px;
  display:flex; align-items:center; gap:12px; font-weight:700; color: var(--navy);
  min-width: 200px; justify-content:center; box-shadow: 0 8px 20px -8px rgba(15,34,71,.25);
}
.flow-step i{ color: var(--gold); font-size:1.2rem; }
.flow-final{ background: var(--navy); color:#fff; border-color: var(--gold); }
.flow-final i{ color: var(--gold-light); }
.flow-arrow{ color: var(--gold); font-size:1.1rem; }

/* ---------- Compare grid (slide 5, 11) ---------- */
.compare-grid{ display:grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items:center; margin-top:10px; }
.compare-card{
  background:#fff; border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow);
  border: 1px solid var(--gray-mid);
}
.compare-icon{ font-size:2rem; color: var(--navy); margin-bottom: 14px; }
.compare-card h3{ font-size:1.4rem; color: var(--navy); margin-bottom:10px; }
.compare-def{ color: var(--gray-text); font-size:.98rem; margin-bottom:14px; line-height:1.5; }
.compare-list li{ padding: 6px 0; font-size:.95rem; border-top:1px solid var(--gray-mid); }
.compare-list li:first-child{ border-top:none; }
.compare-gold{ border-color: var(--gold); background: linear-gradient(180deg,#fff, #fdf8ec); }
.compare-gold .compare-icon{ color: var(--gold); }
.compare-danger{ border-color:#c95b4b; background: linear-gradient(180deg,#fff,#fdf1ef); }
.compare-danger .compare-icon{ color:#c95b4b; }
.compare-vs{ font-size:1.6rem; color: var(--gold); background:#fff; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow); }

/* ---------- Pillars (slide 6) ---------- */
.pillars-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; margin: 20px 0 30px; }
.pillar-card{
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius);
  padding: 34px 20px; text-align:center; backdrop-filter: blur(4px);
  transition: transform .3s ease;
}
.pillar-card:hover{ transform: translateY(-6px); }
.pillar-icon{ width:70px; height:70px; border-radius:50%; background: linear-gradient(135deg, var(--gold), var(--gold-light)); display:flex; align-items:center; justify-content:center; margin: 0 auto 18px; font-size:1.8rem; color: var(--navy-deep); }
.pillar-card h3{ color:#fff; font-size:1.3rem; margin-bottom:8px; }
.pillar-card p{ color: rgba(255,255,255,0.7); font-size:.95rem; }
.pillars-note{ color: rgba(255,255,255,0.85); font-size:1.05rem; text-align:center; }
.slide-navy .pillars-note{ color: rgba(255,255,255,0.85); }
.slide-light .pillars-note{ color: var(--gray-text); text-align:left; margin-top:24px; }
.pillars-note i{ color: var(--gold); margin-right:8px; }

/* ---------- Wash background ---------- */
.wash-bg{
  position:absolute; inset:0; z-index:0;
  background-size: cover; background-position:center;
  opacity: .5;
}
.wash-bg::after{ content:''; position:absolute; inset:0; }
.slide-light .wash-bg{ filter: saturate(.85); opacity: 0.5; }
.slide-light .wash-bg::after{ background: var(--gray-soft); opacity: 0.4; }
.slide-navy .wash-bg,
.slide-divider .wash-bg{ filter: saturate(.8); opacity:.28; }
.slide-navy .wash-bg::after{ background: linear-gradient(135deg, var(--navy-deep), var(--navy)); opacity:.72; }
.slide-divider .wash-bg::after{ background: var(--navy-deep); opacity:.72; }

/* ---------- Split layout (slides 7, 9) ---------- */
.slide-split{ display:flex; padding:0; }
.split-media{ flex: 0 0 42%; height:100%; background-size:cover; background-position:center; position:relative; }
.split-media::after{ content:''; position:absolute; inset:0; background: linear-gradient(90deg, rgba(15,34,71,0.0), rgba(244,245,247,0.0)); }
.split-content{ flex: 1 1 58%; background: var(--gray-soft); padding: 80px 60px; overflow-y:auto; height:100%; }
.slide-split-reverse{ flex-direction: row-reverse; }

.chip-row{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom: 26px; }
.chip{
  background:#fff; border:1px solid var(--gray-mid); border-radius:999px; padding:9px 18px;
  font-size:.9rem; font-weight:600; color: var(--navy); display:inline-flex; align-items:center; gap:8px;
  box-shadow: 0 6px 14px -8px rgba(15,34,71,.15);
}
.chip i{ color: var(--gold); }
.dilg-note{
  background: rgba(15,34,71,0.06); border-left: 4px solid var(--navy); padding: 16px 20px; border-radius: 10px;
  font-size: .98rem; color: var(--ink); line-height:1.5;
}
.dilg-note i{ color: var(--gold); margin-right:6px; }

/* ---------- Value chain (slide 8) ---------- */
.valuechain{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin: 10px 0 20px; flex-wrap: wrap; }
.vc-step{
  flex:1; min-width:130px; background:#fff; border-radius:14px; padding:18px 12px; text-align:center;
  box-shadow: var(--shadow); border-bottom: 4px solid var(--gold);
}
.vc-step i{ font-size:1.6rem; color: var(--navy); display:block; margin-bottom:10px; }
.vc-step span{ font-size:.85rem; font-weight:700; color: var(--ink); }
.vc-final{ border-bottom-color: var(--navy); background: var(--navy); }
.vc-final i, .vc-final span{ color:#fff; }
.vc-final i{ color: var(--gold-light); }
.vc-arrow{ color: var(--gold); font-size:1.2rem; }
.bullet-list li{ font-size:1.02rem; padding: 8px 0; color: var(--ink); display:flex; align-items:center; gap:10px; }
.bullet-list i{ color: var(--gold); }

/* ---------- Trust diagram (slide 9) ---------- */
.trust-diagram{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin: 20px 0 26px; }
.trust-node{
  background:#fff; border-radius:14px; padding:20px 10px; text-align:center; box-shadow: var(--shadow);
  border: 1px solid var(--gray-mid);
}
.trust-node i{ font-size:1.5rem; color: var(--navy); display:block; margin-bottom:10px; }
.trust-node span{ font-size:.85rem; font-weight:700; color:var(--ink); }
.trust-center{ background: linear-gradient(135deg, var(--gold), var(--gold-light)); border:none; grid-row: 1/3; grid-column: 2; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.trust-center i, .trust-center span{ color: var(--navy-deep); }
.trust-center i{ font-size:2rem; }

/* ---------- Callout ---------- */
.callout-banner{
  margin-top: 26px; background: var(--navy); color:#fff; border-radius: 14px; padding: 20px 26px;
  display:flex; align-items:center; gap:16px; font-size:1.1rem;
}
.callout-banner i{ color: var(--gold-light); font-size:1.6rem; }

/* ---------- Triangle (slide 12) ---------- */
.triangle-wrap{ position:relative; height: 340px; max-width:600px; margin: 30px auto 26px; }
.tri-node{
  position:absolute; width: 170px; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2);
  border-radius: 16px; padding: 20px; text-align:center; backdrop-filter: blur(4px);
}
.tri-node i{ font-size:1.8rem; color: var(--gold-light); margin-bottom:10px; display:block; }
.tri-node h4{ color:#fff; font-size:1.15rem; margin-bottom:4px; }
.tri-node span{ color: rgba(255,255,255,0.75); font-size:.85rem; }
.tri-top{ top:0; left:50%; transform: translateX(-50%); }
.tri-left{ bottom:0; left: 5%; }
.tri-right{ bottom:0; right: 5%; }
.reflective-question{
  text-align:center; color: var(--gold-light); font-family: var(--font-serif); font-size:1.4rem; font-style:italic;
  margin-top: 10px;
}
.reflective-question i{ margin-right: 10px; }

/* ---------- Wisdom icons (slide 13) ---------- */
.wisdom-icons{ display:flex; flex-direction:column; gap:16px; }
.wisdom-item{
  display:flex; align-items:center; gap:18px; background:#fff; border-radius:14px; padding:18px 22px;
  box-shadow: var(--shadow); border: 1px solid var(--gray-mid);
}
.wisdom-item i{ font-size:1.7rem; color: var(--navy); width:40px; text-align:center; }
.wisdom-item span{ font-size:.98rem; font-weight:700; color: var(--ink); }
.wisdom-item small{ font-weight:400; color: var(--gray-text); }
.wisdom-highlight{ border-color: var(--gold); background: linear-gradient(90deg,#fff,#fdf8ec); }
.wisdom-highlight i{ color: var(--gold); }

/* ---------- Table (slide 14) ---------- */
.table-wrap{ margin: 10px 0 26px; }
.lm-table{ width:100%; border-collapse: collapse; background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.lm-table thead th{
  background: var(--navy); color:#fff; font-family: var(--font-serif); font-size:1.1rem; padding: 16px 24px; text-align:left;
}
.lm-table thead th i{ color: var(--gold-light); margin-right:10px; }
.lm-table tbody td{ padding: 14px 24px; font-size:1.02rem; color: var(--ink); border-bottom:1px solid var(--gray-mid); }
.lm-table tbody tr:last-child td{ border-bottom:none; }
.lm-table tbody tr:nth-child(even){ background: var(--gray-soft); }

/* ---------- Discussion grid (slide 15) ---------- */
.discuss-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px; margin-top: 20px; }
.discuss-card{
  background: rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18); border-radius: var(--radius);
  padding: 24px; display:flex; gap:16px; align-items:flex-start;
}
.discuss-card i{ color: var(--gold); font-size:1.3rem; background: rgba(201,162,75,0.15); border-radius:50%; width:38px; height:38px; min-width:38px; display:flex; align-items:center; justify-content:center; }
.discuss-card p{ color: #fff; font-size:1.05rem; line-height:1.5; }

/* ---------- Takeaways (slide 16) ---------- */
.takeaway-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top: 10px; }
.takeaway-item{
  background:#fff; border-radius:14px; padding:20px; display:flex; align-items:center; gap:14px;
  box-shadow: var(--shadow); border-left: 4px solid var(--gold);
}
.takeaway-item i{ color: #3f9c58; font-size:1.4rem; }
.takeaway-item span{ font-weight:700; color: var(--navy); font-size:1.02rem; }

/* ---------- Bottom nav ---------- */
.bottom-nav{
  position: fixed; bottom: 18px; left:0; right:0; z-index: 400;
  display:flex; align-items:center; justify-content:center; gap: 26px;
  pointer-events:none;
}
.nav-btn{
  pointer-events:auto;
  display:flex; align-items:center; gap:10px;
  background: rgba(15,34,71,0.85); color:#fff; border: 1px solid rgba(201,162,75,0.5);
  padding: 12px 22px; border-radius: 999px; font-weight:600; font-size:.92rem;
  backdrop-filter: blur(8px); transition: transform .2s ease, background .2s ease;
  box-shadow: 0 10px 25px -10px rgba(0,0,0,0.5);
}
.nav-btn:hover{ background: var(--navy); transform: translateY(-2px); }
.nav-btn:disabled{ opacity: .35; cursor: not-allowed; transform:none; }
.nav-btn i{ color: var(--gold-light); }

.dots-wrap{ display:flex; gap:7px; align-items:center; pointer-events:auto; }
.dot{
  width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,0.35); transition: all .25s ease;
  cursor:pointer;
}
.dot.active{ background: var(--gold); width:22px; border-radius:5px; }

/* ---------- Speaker notes panel ---------- */
.notes-panel{
  position: fixed; top:0; right: -420px; width: 400px; height:100%;
  background: #fff; box-shadow: -10px 0 40px rgba(0,0,0,0.25);
  z-index: 600; transition: right .35s cubic-bezier(.65,0,.35,1);
  display:flex; flex-direction:column;
}
.notes-panel.open{ right:0; }
.notes-header{
  display:flex; align-items:center; justify-content:space-between; padding: 22px 24px;
  background: var(--navy); color:#fff;
}
.notes-header h3{ font-size:1.1rem; display:flex; align-items:center; gap:10px; font-family: var(--font-sans); font-weight:700; }
.notes-header i{ color: var(--gold-light); }
.icon-btn{ background: rgba(255,255,255,0.15); border:none; color:#fff; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.notes-body{ padding: 26px 24px; overflow-y:auto; flex:1; font-size: 1rem; line-height:1.7; color: var(--ink); }
.notes-body p{ margin-bottom:14px; }
.notes-body strong{ color: var(--navy); }
.notes-overlay{
  position: fixed; inset:0; background: rgba(0,0,0,0.35); z-index:550;
}

/* ---------- Swipe hint ---------- */
.swipe-hint{
  position: fixed; bottom: 80px; left:50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.6); color:#fff; padding: 8px 18px; border-radius:999px; font-size:.8rem;
  display:none; align-items:center; gap:8px; z-index: 450; opacity:0; transition: opacity .3s ease;
}
.swipe-hint.show{ display:flex; opacity:1; }
.swipe-hint i{ color: var(--gold-light); }

/* ---------- Slide transitions / animation ---------- */
.slide-inner, .cover-inner, .split-content{
  opacity: 0; transform: translateY(18px);
  animation: none;
}
.slide.active .slide-inner,
.slide.active .cover-inner,
.slide.active .split-content{
  animation: fadeUp .7s ease forwards;
  animation-delay: .15s;
}
@keyframes fadeUp{
  to{ opacity:1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .track{ transition: none; }
  .slide-inner, .cover-inner, .split-content{ animation: none !important; opacity:1; transform:none; }
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 1024px){
  .slide-inner{ padding: 90px 40px 100px; }
  .cover-title{ font-size: 2.8rem; }
  .slide-title{ font-size: 2.1rem; }
  .pillars-grid, .objectives-grid{ gap:16px; }
  .two-col{ grid-template-columns: 1fr; }
  .slide-split{ flex-direction: column; }
  .slide-split-reverse{ flex-direction: column; }
  .split-media{ flex: 0 0 220px; width:100%; }
  .split-content{ flex: 1; padding: 40px 34px 100px; }
}

@media (max-width: 720px){
  .topbar{ padding: 0 12px; }
  .topbar-title{ display:none; }
  .pill-label{ display:none; }
  .slide-inner{ padding: 80px 22px 110px; max-width:100%; }
  .cover-inner{ padding: 40px 6vw; }
  .cover-title{ font-size: 2rem; }
  .big-quote{ font-size: 1.4rem; }
  .slide-title{ font-size: 1.6rem; }
  .slide-lead{ font-size: 1.02rem; }
  .objectives-grid{ grid-template-columns: 1fr; }
  .pillars-grid{ grid-template-columns: 1fr; }
  .compare-grid{ grid-template-columns: 1fr; }
  .compare-vs{ margin: 0 auto; transform: rotate(90deg); }
  .trust-diagram{ grid-template-columns: repeat(2,1fr); }
  .trust-center{ grid-column: 1/3; grid-row:auto; }
  .valuechain{ flex-direction: column; }
  .vc-arrow{ transform: rotate(90deg); }
  .discuss-grid{ grid-template-columns: 1fr; }
  .takeaway-grid{ grid-template-columns: 1fr 1fr; }
  .triangle-wrap{ height: 420px; }
  .tri-node{ width: 130px; padding:14px; }
  .notes-panel{ width: 88%; }
  .bottom-nav{ bottom: 10px; gap: 14px; }
  .nav-btn span{ display:none; }
  .nav-btn{ padding: 12px 16px; }
  .dilg-note, .callout-banner{ font-size:.92rem; }
}

@media (max-width: 480px){
  .takeaway-grid{ grid-template-columns: 1fr; }
  .wisdom-item{ flex-direction:column; text-align:center; }
}

/* ========================================================================
   AUDIENCE MODE
   ======================================================================== */
body.audience-mode .topbar,
body.audience-mode .bottom-nav,
body.audience-mode .progress-bar,
body.audience-mode .swipe-hint,
body.audience-mode #notesToggle,
body.audience-mode #presenterBtn{
  display: none !important;
}

/* ========================================================================
   MODULE EXPANSION — Lesson dividers, roadmap, L1/L2/L4/L5 components
   ======================================================================== */

.lesson-tag{
  background: rgba(201,162,75,0.18); color: var(--gold-light);
  border: 1px solid rgba(201,162,75,0.45); border-radius: 999px;
  padding: 4px 12px; font-size:.72rem; font-weight:700; letter-spacing:.04em;
  text-transform: uppercase; margin-left: 10px;
}

.slide-divider{ background: var(--navy-deep); }
.divider-inner{ text-align:center; max-width: 780px; margin:0 auto; }
.divider-num{
  font-family: var(--font-serif); font-size: 5.5rem; font-weight:800;
  color: rgba(201,162,75,0.28); line-height:1; margin-bottom: 6px;
}
.divider-title{ font-size: 3rem; color:#fff; margin-bottom: 16px; }
.divider-sub{ font-size: 1.15rem; color: rgba(255,255,255,0.75); max-width: 620px; margin: 0 auto; }
.divider-icon{ font-size: 2.2rem; color: var(--gold); margin-bottom: 20px; display:block; }

.presenter-row{
  display:flex; justify-content:center; align-items:flex-start; gap:56px;
  margin-top: 34px; flex-wrap: wrap;
}
.presenter-card{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  opacity:0; transform: translateY(14px);
}
.slide.active .presenter-card{
  animation: fadeUp .7s ease forwards;
}
.slide.active .presenter-card:nth-child(2){ animation-delay: .12s; }
.presenter-pic{
  width: 128px; height:128px; border-radius: 16px; overflow:hidden;
  background: rgba(255,255,255,0.08); border: 2px solid rgba(201,162,75,0.55);
  display:flex; align-items:center; justify-content:center; position:relative;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,0.5);
}
.presenter-pic img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.presenter-pic .presenter-pic-fallback{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color: rgba(255,255,255,0.55); font-size:.68rem; font-weight:600; text-align:center;
  letter-spacing:.03em; text-transform:uppercase; padding: 0 8px;
}
.presenter-pic .presenter-pic-fallback i{ font-size:1.9rem; color: rgba(201,162,75,0.65); }
.presenter-pic img.img-error{ display:none; }
.presenter-pic:not(.img-error) .presenter-pic-fallback{ display:none; }
.presenter-pic.img-error .presenter-pic-fallback{ display:flex; }
.presenter-name{ font-family: var(--font-serif); font-size:1.15rem; font-weight:700; color:#fff; text-align:center; }
.presenter-role{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-light); text-align:center; }

.roadmap-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top: 26px; }
.roadmap-chip{
  flex: 1; min-width: 150px; background:#fff; border-radius: 14px; padding: 18px 16px;
  box-shadow: var(--shadow); border-top: 4px solid var(--gold); text-align:center;
}
.roadmap-chip .rc-num{ font-family: var(--font-serif); font-weight:800; font-size:1.3rem; color: var(--navy); display:block; margin-bottom:6px; }
.roadmap-chip .rc-label{ font-size:.85rem; color: var(--gray-text); font-weight:600; }

.loop-diagram{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin: 20px 0; }
.loop-step{
  background:#fff; border:2px solid var(--navy); border-radius:14px; padding:16px 20px;
  display:flex; flex-direction:column; align-items:center; gap:8px; font-weight:700; color:var(--navy);
  min-width:140px; text-align:center; box-shadow: 0 8px 20px -8px rgba(15,34,71,.25);
}
.loop-step i{ color: var(--gold); font-size:1.4rem; }
.loop-step span{ font-size:.9rem; }
.loop-final{ background: var(--navy); color:#fff; border-color: var(--gold); }
.loop-final i{ color: var(--gold-light); }
.loop-arrow{ color: var(--gold); font-size:1.3rem; }

.lens-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:14px; margin-top: 18px; }
.lens-card{
  background:#fff; border-radius:14px; padding:18px 12px; text-align:center;
  box-shadow: var(--shadow); border-bottom: 4px solid var(--gold);
}
.lens-card i{ font-size:1.5rem; color: var(--navy); display:block; margin-bottom:10px; }
.lens-card h4{ font-size:.98rem; color: var(--navy); margin-bottom:6px; }
.lens-card p{ font-size:.82rem; color: var(--gray-text); line-height:1.35; }

.essential-list{ display:flex; flex-direction:column; gap:14px; margin-top:18px; }
.essential-item{
  display:flex; gap:16px; align-items:flex-start; background:#fff; border-radius:14px;
  padding:16px 20px; box-shadow: var(--shadow); border-left: 4px solid var(--gold);
}
.essential-item i{ font-size:1.3rem; color: var(--navy); margin-top:2px; }
.essential-item p{ font-size:1.02rem; color: var(--ink); line-height:1.5; }

/* ========================================================================
   FIXED SEQUENCE STEPS (Slide 7 / Five Marks of a Public Leader)
   ======================================================================== */
.split-content .sequence-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 2rem;
  width: 100%;
}

.split-content .seq-step {
  background: #ffffff;
  border: 1px solid var(--gray-mid);
  border-radius: 12px;
  padding: 1rem 0.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 12px rgba(15, 34, 71, 0.08);
}

.split-content .seq-step .seq-num {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-text);
  margin-bottom: 0.25rem;
  font-family: var(--font-sans);
}

.split-content .seq-step i {
  font-size: 1.25rem;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.split-content .seq-step h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.25rem 0;
  font-family: var(--font-serif);
}

.split-content .seq-step .seq-desc {
  font-size: 0.75rem;
  color: var(--gray-text);
  line-height: 1.2;
}

.split-content .seq-connector {
  color: var(--gold);
  font-size: 0.85rem;
  flex-shrink: 0;
}
/* ======================================================================== */

.reflect-box{
  margin-top: 24px; background: rgba(15,34,71,0.06); border-left:4px solid var(--gold);
  border-radius: 10px; padding: 18px 22px; font-size:1.02rem; color: var(--ink); line-height:1.55;
}
.reflect-box i{ color: var(--gold); margin-right:8px; }

.elements-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:16px; margin-top: 18px; }
.element-card{
  background:#fff; border-radius:14px; padding: 18px 20px; box-shadow: var(--shadow);
  border: 1px solid var(--gray-mid); display:flex; gap:14px; align-items:flex-start;
}
.element-card i{ color: var(--gold); font-size:1.3rem; margin-top:2px; }
.element-card p{ font-size:.98rem; color: var(--ink); line-height:1.45; }
.char-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.char-pill{
  background: var(--navy); color:#fff; border-radius:999px; padding:10px 18px;
  font-size:.88rem; font-weight:600; display:flex; align-items:center; gap:8px;
}
.char-pill i{ color: var(--gold-light); }

.classify-wrap{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.classify-chip{
  background:#fff; border:1px solid var(--gray-mid); border-radius:999px; padding:8px 16px;
  font-size:.85rem; font-weight:600; color: var(--navy); box-shadow: 0 6px 14px -8px rgba(15,34,71,.15);
}

.trio-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top: 18px; }
.trio-card{
  background:#fff; border-radius: var(--radius); padding: 22px 18px; box-shadow: var(--shadow);
  border-top: 4px solid var(--gray-mid); text-align:center;
}
.trio-card.trio-gold{ border-top-color: var(--gold); }
.trio-card.trio-navy{ border-top-color: var(--navy); }
.trio-card i{ font-size:1.6rem; color: var(--navy); margin-bottom:10px; display:block; }
.trio-card h4{ font-size:1.05rem; color: var(--navy); margin-bottom:8px; }
.trio-card p{ font-size:.85rem; color: var(--gray-text); line-height:1.45; }

.appoint-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:12px; margin-top:18px; }
.appoint-card{
  background:#fff; border-radius:12px; padding:16px 10px; text-align:center; box-shadow: var(--shadow);
  border-bottom: 3px solid var(--gold);
}
.appoint-card i{ font-size:1.3rem; color: var(--navy); display:block; margin-bottom:8px; }
.appoint-card h5{ font-family: var(--font-sans); font-size:.85rem; color: var(--navy); font-weight:700; margin-bottom:4px; }
.appoint-card span{ font-size:.74rem; color: var(--gray-text); }

.vacancy-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:16px; margin-top:18px; }
.vacancy-card{
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:14px;
  padding: 18px 20px;
}
.vacancy-card h4{ color: var(--gold-light); font-size:1rem; margin-bottom:6px; }
.vacancy-card p{ color: rgba(255,255,255,0.82); font-size:.9rem; line-height:1.45; }

.power-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:22px; margin-top:18px; }
.power-card{
  background:#fff; border-radius: var(--radius); padding:24px; box-shadow: var(--shadow);
  border: 1px solid var(--gray-mid);
}
.power-card i{ font-size:1.6rem; color: var(--navy); margin-bottom:10px; display:block; }
.power-card h3{ font-size:1.15rem; color: var(--navy); margin-bottom:8px; }
.power-card p{ font-size:.92rem; color: var(--gray-text); line-height:1.5; }

.liability-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:18px; }
.liability-card{
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:14px;
  padding:18px 16px; text-align:center;
}
.liability-card h4{ color:#fff; font-size:1rem; margin-bottom:8px; }
.liability-card p{ color: rgba(255,255,255,0.75); font-size:.82rem; line-height:1.4; }

.rights-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin-top:18px; }
.right-item{
  background:#fff; border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:10px;
  box-shadow: var(--shadow); border-left: 3px solid var(--gold);
}
.right-item i{ color: #3f9c58; font-size:1.1rem; }
.right-item span{ font-size:.88rem; font-weight:600; color: var(--navy); }

.term-cloud{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 18px; }
.term-chip{
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); color:#fff;
  border-radius:999px; padding:9px 16px; font-size:.85rem; font-weight:600;
}
.term-chip.term-highlight{ background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }

.synthesis-list{ display:flex; flex-direction:column; gap:14px; margin-top: 20px; }
.synthesis-item{
  display:flex; gap:16px; align-items:flex-start; background: rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.16); border-radius:14px; padding:16px 20px;
}
.synthesis-item .syn-num{
  font-family: var(--font-serif); font-weight:800; font-size:1.2rem; color: var(--gold-light);
  min-width: 30px;
}
.synthesis-item p{ color:#fff; font-size:1rem; line-height:1.5; }
.synthesis-item strong{ color: var(--gold-light); }

@media (max-width: 1024px){
  .lens-grid{ grid-template-columns: repeat(3,1fr); }
  .appoint-grid{ grid-template-columns: repeat(3,1fr); }
  .rights-grid{ grid-template-columns: repeat(2,1fr); }
  .power-grid{ grid-template-columns: 1fr; }
  .divider-title{ font-size: 2.4rem; }
  .divider-num{ font-size: 4.2rem; }
}
@media (max-width: 720px){
  .presenter-row{ gap:30px; }
  .presenter-pic{ width:96px; height:96px; }
  .presenter-name{ font-size:1rem; }
  .roadmap-row{ flex-direction:column; }
  .lens-grid{ grid-template-columns: repeat(2,1fr); }
  .elements-grid{ grid-template-columns: 1fr; }
  .trio-grid{ grid-template-columns: 1fr; }
  .appoint-grid{ grid-template-columns: repeat(2,1fr); }
  .vacancy-grid{ grid-template-columns: 1fr; }
  .liability-grid{ grid-template-columns: 1fr; }
  .rights-grid{ grid-template-columns: 1fr; }
  .sequence-row{ flex-direction:column; }
  .seq-connector{ transform: rotate(90deg); }
  .divider-title{ font-size: 1.9rem; }
  .divider-num{ font-size: 3.2rem; }
  .lesson-tag{ display:none; }
}