/* ═══════════════════════════════════════════════════════════════════════
   LAYOUTS — Structural styles for slide presentations

   References:
   - Font sizes + slide padding → theme file (--rjs-* overrides)
   - Everything else → globals.css directly (no aliases, no middlemen)

   Architecture:
   - Every slide uses the GRID SYSTEM as its structural foundation
   - Grid → Column(s) → Content
   - Padding lives on columns, not sections
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── BASE ──────────────────────────────────────────────────────────── */

.reveal-viewport {
  background: linear-gradient(var(--motif-angle), var(--color-neutral-800), var(--color-black));
}

.reveal {
  font-family: var(--font-body);
  font-size: var(--rjs-text-base);
  color: var(--color-text-primary);
}

/* All slides: top-anchored, left-aligned by default.
   Grid slides override padding via :has(.grid). */
.reveal .slides section {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  padding: var(--rjs-pad-y) var(--rjs-pad-x);
  box-sizing: border-box;
 
}


/* ═══════════════════════════════════════════════════════════════════════
   GRID SYSTEM — Foundational layout structure for every slide.

   Pick a grid first, then populate columns with any content.
   Columns fill edge-to-edge. Padding lives on columns, not sections.

   Horizontal splits:
     .grid-1         → single column (full width)
     .grid-50-50     → equal halves
     .grid-40-60     → narrow left, wide right
     .grid-60-40     → wide left, narrow right
     .grid-30-70     → sidebar + main
     .grid-70-30     → main + sidebar
     .grid-3         → three equal columns
     .grid-4         → four equal columns

   Vertical splits:
     .grid-v-50-50   → equal top/bottom
     .grid-v-33-66   → narrow top, wide bottom
     .grid-v-66-33   → wide top, narrow bottom
     .grid-v-60-40   → 60% top, 40% bottom
     .grid-v-40-60   → 40% top, 60% bottom
   ═══════════════════════════════════════════════════════════════════════ */

/* Sections using grids: remove default section padding */
.reveal .slides section:has(.grid),
.reveal .slides section:has(.mosaic-grid) {
  padding: 0;
}

/* Base grid */
.grid {
  display: grid;
  width: 100%;
  height: 100%;
}

/* Column — the universal container inside every grid */
.grid > .col {
  padding: var(--rjs-pad-y) var(--rjs-pad-x);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Column alignment modifiers */
.col.col-center  { justify-content: center; }
.col.col-bottom  { justify-content: flex-end; }
.col.col-h-center { align-items: center; text-align: center; }

/* Column with no padding (for full-bleed images) */
.col.col-flush { padding: 0; background: transparent; }
.col.col-flush.col-transparent { background: transparent; }

/* ─── Horizontal Splits ────────────────────────────────────────────── */
.grid-1     { grid-template-columns: 1fr; }
.grid-50-50 { grid-template-columns: 1fr 1fr; }
.grid-40-60 { grid-template-columns: 2fr 3fr; }
.grid-60-40 { grid-template-columns: 3fr 2fr; }
.grid-30-70 { grid-template-columns: 3fr 7fr; }
.grid-70-30 { grid-template-columns: 7fr 3fr; }
.grid-2     { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.grid-3     { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-sm); }
.grid-4     { grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--space-sm); }

/* ─── Vertical Splits ──────────────────────────────────────────────── */
.grid-v-50-50 { grid-template-rows: 1fr 1fr; grid-template-columns: 1fr; }
.grid-v-33-66 { grid-template-rows: 1fr 2fr; grid-template-columns: 1fr; }
.grid-v-66-33 { grid-template-rows: 2fr 1fr; grid-template-columns: 1fr; }
.grid-v-60-40 { grid-template-rows: 3fr 2fr; grid-template-columns: 1fr; }
.grid-v-40-60 { grid-template-rows: 2fr 3fr; grid-template-columns: 1fr; }
.grid-v-20-80 { grid-template-rows: 1fr 4fr; grid-template-columns: 1fr; }
.grid-v-80-20 { grid-template-rows: 4fr 1fr; grid-template-columns: 1fr; }


/* ─── TYPOGRAPHY ────────────────────────────────────────────────────── */

.reveal h1, .reveal h2, .reveal h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  margin: 0;
  line-height: var(--leading-tight);
}

.reveal p {
  font-family: var(--font-body);
  margin: 0;
  line-height: var(--leading-normal);
}

.hero {
  font-size: var(--rjs-text-5xl);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
}

.hero-xl {
  font-size: var(--rjs-text-6xl);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
}

.callout {
  font-size: var(--rjs-text-5xl);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  font-family: var(--font-display);
}

.text-primary {
  color: var(--color-primary);
}

.callout-sm {
  font-size: var(--rjs-text-3xl);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  font-family: var(--font-display);
}

.sub {
  font-size: var(--rjs-text-lg);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-normal);
  max-width: 700px;
  line-height: var(--leading-relaxed);
}

.label {
  font-family: var(--font-body);
  font-size: var(--rjs-text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-xl);
  display: block;
}

/* ─── LAYOUT-CONTEXTUAL COLORS ─────────────────────────────────────── */
/* Colors are set per layout context — no utility classes in HTML. */

.slide-statement .hero:last-child         { color: var(--color-primary); }
.slide-stat .stat-number                  { color: var(--color-primary); }
.slide-fullbleed-caption .sub             { color: var(--color-text-secondary); }
.slide-title-body .sub:last-child         { color: var(--color-primary-light); }
.slide-img-text .content .sub:last-child  { color: var(--color-primary); }
.slide-thankyou .hero-xl                  { color: var(--color-primary); }

/* Two-column comparison headers */
.slide-two-col .col:first-child .col-header  { color: var(--color-text-secondary); }
.slide-two-col .col:nth-child(2) .col-header { color: var(--color-primary); }

/* ─── COMPOSABILITY UTILITIES ──────────────────────────────────────── */
/* Use these when composing custom slides from grid + components,
   where there's no parent .slide-* class to provide context colors.
   These allow components to look correct outside their native template. */

.text-accent         { color: var(--color-primary); }
.text-accent-light   { color: var(--color-primary-light); }
.text-secondary      { color: var(--color-text-secondary); }
.text-mint           { color: var(--color-mint, #A8E6CF); }

/* ─── FRAGMENTS ─────────────────────────────────────────────────────── */

.reveal .fragment {
  transition: opacity var(--duration-moderate) var(--ease-default),
              transform var(--duration-moderate) var(--ease-default),
              filter var(--duration-moderate) var(--ease-default);
}

.reveal .fragment.visible {
  opacity: 1;
}

/* Fade-up — body text, list items */
.reveal .fragment.fade-up {
  transform: translateY(var(--space-lg));
  opacity: 0;
}
.reveal .fragment.fade-up.visible {
  transform: translateY(0);
  opacity: 1;
}

/* Slide-in from left — headlines, section text */
.reveal .fragment.slide-in-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal .fragment.slide-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Blur-to-clear with zoom — images */
.reveal .fragment.blur-in {
  opacity: 0;
  filter: blur(12px);
  transform: scale(1.08);
  transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s ease;
}
.reveal .fragment.blur-in.visible {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

/* Blur-in as child effect (inside a fragment, not a fragment itself) —
   triggers when parent fragment becomes .visible */
.reveal .fragment.visible .blur-in {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.blur-in {
  opacity: 0;
  filter: blur(12px);
  transform: scale(1.08);
  transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s ease;
}

/* Slide-in-left-delayed — text that follows an image blur-in.
   Starts after the blur-in finishes (0.8s delay). */
.slide-in-left-delayed {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
}
.reveal .fragment.visible .slide-in-left-delayed {
  opacity: 1;
  transform: translateX(0);
}

/* Pop-in — stat numbers, impact figures */
.reveal .fragment.pop-in {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal .fragment.pop-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* ─── STAGGERED FRAGMENT DELAYS ────────────────────────────────────── */

.fragment:nth-child(2) { transition-delay: 0.1s; }
.fragment:nth-child(3) { transition-delay: 0.2s; }
.fragment:nth-child(4) { transition-delay: 0.3s; }
.fragment:nth-child(5) { transition-delay: 0.4s; }

/* Reset delay once visible so reverse navigation isn't delayed */
.fragment.visible { transition-delay: 0s; }

/* ─── AUTO ENTRANCE ANIMATIONS ─────────────────────────────────────── */
/* CSS transitions triggered by .present on the parent <section>.
   No click needed — plays automatically when you land on the slide. */

.entrance-slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: 0.5s;
}
.entrance-fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: 0.5s;
}
.entrance-blur-in {
  opacity: 0;
  filter: blur(12px);
  transform: scale(1.08);
  transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s ease;
  transition-delay: 0.5s;
}
.entrance-pop {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: 0.5s;
}

/* When slide is .present, transition to visible.
   .is-active is added by JS as a reliable fallback. */
.reveal .slides section.present .entrance-slide-left,
.reveal .slides section.present .entrance-fade-up,
.entrance-slide-left.is-active,
.entrance-fade-up.is-active {
  opacity: 1;
  transform: none;
}
.reveal .slides section.present .entrance-blur-in,
.entrance-blur-in.is-active {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.reveal .slides section.present .entrance-pop,
.entrance-pop.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Stagger entrance children via transition-delay
   (base 0.5s + stagger increment so animations start after slide transition) */
.entrance-delay-1 { transition-delay: 0.65s; }
.entrance-delay-2 { transition-delay: 0.8s; }
.entrance-delay-3 { transition-delay: 0.95s; }
.entrance-delay-4 { transition-delay: 1.1s; }
.entrance-delay-5 { transition-delay: 1.25s; }

/* Instant exit — no delay when leaving a slide */
.reveal .slides section:not(.present) .entrance-slide-left,
.reveal .slides section:not(.present) .entrance-fade-up,
.reveal .slides section:not(.present) .entrance-blur-in,
.reveal .slides section:not(.present) .entrance-pop,
.reveal .slides section:not(.present) .fragment.slide-in-left,
.reveal .slides section:not(.present) .fragment.fade-up,
.reveal .slides section:not(.present) .fragment.blur-in,
.reveal .slides section:not(.present) .fragment.pop-in {
  transition-delay: 0s;
}

/* ─── DECORATIVE ELEMENTS ───────────────────────────────────────────── */

.rule {
  display: block;
  width: 64px;
  height: var(--border-thin);
  background: var(--color-primary);
  opacity: var(--opacity-subtle);
  margin-bottom: var(--space-2xl);
}

.rule-mint {
  display: block;
  width: 64px;
  height: var(--border-thin);
  background: var(--color-secondary);
  opacity: var(--opacity-subtle);
}

/* ─── LAYOUT: COVER ─────────────────────────────────────────────────── */

.slide-cover {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}

.slide-cover .top {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.slide-cover .slide-logo {
  height: 20px;
  width: auto;
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: var(--rjs-text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
}

/* ─── LAYOUT: SECTION BREAK ─────────────────────────────────────────── */

.slide-section-break {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 800px;
}

.section-number {
  font-family: var(--font-body);
  font-size: var(--rjs-text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
  color: var(--color-primary);
}

/* ─── LAYOUT: STATEMENT ─────────────────────────────────────────────── */

.slide-statement {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 1400px;
}

/* ─── LAYOUT: TITLE + BODY ──────────────────────────────────────────── */

.slide-title-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  max-width: 1200px;
}

/* ─── LAYOUT: TWO COLUMNS ──────────────────────────────────────────── */
/* Semantic marker on section. Structure via grid-50-50. */

.slide-two-col .col {
  gap: var(--space-lg);
}

.col-header {
  font-family: var(--font-display);
  font-size: var(--rjs-text-2xl);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
}

/* ─── LAYOUT: QUOTE ─────────────────────────────────────────────────── */

.slide-quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  max-width: 900px;
}

.quote-text-large {
  font-size: var(--rjs-text-3xl);
  color: var(--color-text-primary);
  font-family: var(--font-display);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  margin: 0;
}

.quote-attribution {
  font-family: var(--font-body);
  font-size: var(--rjs-text-base);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-normal);
}

/* ─── LAYOUT: STEPS / PROCESS ───────────────────────────────────────── */

.step-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: var(--space-sm);
  width: 100%;
  height: 100%;
  flex: 1;
}

/* Step card — matches image card proportions (4fr top, 1fr bottom) */
.step-item {
  display: grid;
  grid-template-rows: 4fr 1fr;
  gap: 0;
  padding: 0;
  background: var(--color-surface-raised);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.step-item-top {
  padding: var(--space-xl) var(--space-xl) 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.step-item-bottom {
  padding: 0 var(--space-xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space-sm);
}

.step-item .step-desc {
  max-width: 85%;
}

.step-number {
  font-family: var(--font-display);
  font-size: var(--rjs-text-5xl);
  font-weight: var(--weight-regular);
  color: var(--color-text-tertiary);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-wide);
}

.step-label {
  font-family: var(--font-display);
  font-size: var(--rjs-text-2xl);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
}

.step-icon {
  color: var(--color-primary);
  display: flex;
}

.step-icon svg {
  width: 100px;
  height: 100px;
}

.step-desc {
  font-size: var(--rjs-text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.step-col-card .step-desc {
  max-width: 70%;
}

/* Image card variant — background image with gradient overlay.
   Wrapped in a clipping container to prevent scale overflow during animations. */
.step-img-clip {
  overflow: hidden;
  border-radius: var(--radius-md);
  min-height: 0;
  background: var(--color-surface-raised);
}

.step-img-clip .step-item-img {
  height: 100%;
}

.step-item-img {
  display: grid;
  grid-template-rows: 4fr 1fr;
  gap: 0;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.step-item-img::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0) 50%);
  pointer-events: none;
}

.step-item-img > * {
  position: relative;
  z-index: 2;
}

.step-item-img .step-item-top {
  padding: var(--space-xl) var(--space-xl) 0;
}

.step-item-img .step-item-bottom {
  padding: 0 var(--space-xl) var(--space-xl);
  justify-content: flex-end;
  gap: var(--space-xs);
}

/* Full-bleed column variant — mirrors .step-item-img pattern exactly */
.step-col-card {
  display: grid;
  grid-template-rows: 3fr 1fr;
  gap: 0;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}

.step-col-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 70%);
  pointer-events: none;
}
.step-col-card.step-col-card--flat::after {
  display: none;
}

.step-col-card > * {
  position: relative;
  z-index: 2;
}

.step-col-content {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-sm);
}

/* ─── LAYOUT: LIST / BULLETS ────────────────────────────────────────── */

.slide-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  max-width: 860px;
  width: 100%;
}

.bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.bullet-list li {
  flex: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--rjs-text-lg);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  line-height: var(--leading-normal);
}

.bullet-list li:first-child {
  border-top: none;
}

.bullet-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--color-primary);
}

/* ─── LAYOUT: BIG NUMBER / STAT ─────────────────────────────────────── */

.slide-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.stat-number {
  font-family: var(--font-display);
  font-size: var(--rjs-text-stat);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.stat-unit {
  font-size: 0.5em;
  vertical-align: baseline;
}

.stat-label {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--rjs-text-2xl);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
}

.stat-context {
  font-size: var(--rjs-text-md);
  color: var(--color-text-secondary);
  max-width: 500px;
  line-height: var(--leading-normal);
}

/* ─── LAYOUT: IMAGE FULL BLEED ──────────────────────────────────────── */

.slide-fullbleed-caption {
  position: relative;
  z-index: 1;
}

/* Gradient overlay for full-bleed background-image slides.
   Reveal mirrors section classes onto .slide-background elements. */
.reveal .backgrounds .slide-background.slide-fullbleed::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0) 60%);
  pointer-events: none;
}

/* ─── LAYOUT: IMAGE FULL BLEED + TITLE ─────────────────────────────── */
/* Full-bleed background image with motif-angle gradient overlay.
   Title content sits on the left, protected by the dark gradient. */

.reveal .backgrounds .slide-background.slide-fullbleed-title::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    var(--motif-angle),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.85) 25%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0) 75%
  );
  pointer-events: none;
}

.slide-fullbleed-title .col {
  position: relative;
  z-index: 2;
}

/* ─── LAYOUT: ARTICLE / SOURCE ─────────────────────────────────────── */
/* Article mockup card for referencing source material. */

.article-card {
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--color-surface-raised);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
}

.article-card-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 14px;
  background: var(--color-surface-page);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.article-card-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
}

.article-card-url {
  flex: 1;
  height: 22px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  margin-left: var(--space-sm);
}

.article-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-page);
}

.article-card-image img,
.article-card-image svg,
.article-card-image [data-image-slot] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-card-body {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.article-card-source {
  font-family: var(--font-body);
  font-size: var(--rjs-text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary);
}

.article-card-title {
  font-family: var(--font-display);
  font-size: var(--rjs-text-xl);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
}

.article-card-excerpt {
  font-size: var(--rjs-text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.source-caption {
  font-size: var(--rjs-text-sm);
  color: var(--color-text-tertiary);
  font-style: italic;
}

.source-caption a,
.source-caption span {
  color: var(--color-primary);
  font-style: normal;
  text-decoration: none;
}

/* ── Browser bleed — extends down and right past slide edge ────────── */
.device-browser-bleed {
  position: relative;
  width: 130%;
  padding-top: var(--rjs-pad-y);
  height: 100%;
}

.device-browser-bleed .device-laptop {
  border-radius: 12px 0 0 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.device-browser-bleed .device-laptop-screen {
  aspect-ratio: auto;
  flex: 1;
  position: relative;
}

.device-browser-bleed .device-laptop-screen img,
.device-browser-bleed .device-laptop-screen svg,
.device-browser-bleed .device-laptop-screen [data-image-slot] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

/* ─── LAYOUT: IMAGE + TEXT SPLIT ────────────────────────────────────── */
/* Semantic marker on section. Structure via grid-50-50. */

.slide-img-text .col-flush {
  position: relative;
  overflow: hidden;
}

.slide-img-text .col-flush img,
.slide-img-text .col-flush svg,
.slide-img-text .col-flush [data-image-slot] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-img-text .content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.slide-img-text .content .callout-sm {
  font-size: var(--rjs-text-4xl);
  line-height: var(--leading-tight);
}

/* ─── LAYOUT: GRID / MOSAIC ─────────────────────────────────────────── */

.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  grid-template-rows: repeat(var(--rows, 2), 1fr);
  gap: var(--space-sm);
  width: 100%;
  height: 100%;
}

.mosaic-cell {
  background: var(--color-surface-raised);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: 0;
  position: relative;
  overflow: hidden;
}

.mosaic-cell img,
.mosaic-cell svg,
.mosaic-cell [data-image-slot] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mosaic-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0) 70%);
  pointer-events: none;
}

.mosaic-cell .cell-label {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--rjs-text-lg);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-normal);
  text-align: left;
  align-self: flex-start;
  max-width: 90%;
  padding: var(--space-md) var(--space-lg) 0;
}

.mosaic-cell .cell-desc {
  position: relative;
  z-index: 2;
  font-size: var(--rjs-text-sm);
  color: var(--color-text-secondary);
  text-align: left;
  align-self: flex-start;
  max-width: 90%;
  padding: 0 var(--space-lg) var(--space-md);
  line-height: var(--leading-normal);
}

/* ─── LAYOUT: TESTIMONIAL ───────────────────────────────────────────── */

.slide-testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: 800px;
}

.testimonial-photo {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.testimonial-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.testimonial-name {
  font-family: var(--font-body);
  font-size: var(--rjs-text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.testimonial-role {
  font-family: var(--font-body);
  font-size: var(--rjs-text-base);
  color: var(--color-text-secondary);
}

/* ─── LAYOUT: TIMELINE ──────────────────────────────────────────────── */

.slide-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  width: 100%;
}

.timeline-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  position: relative;
}

.timeline-track::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: var(--border-thin);
  background: var(--color-border-default);
}

.milestone {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-xl);
  position: relative;
}

.milestone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

.milestone-year {
  font-family: var(--font-body);
  font-size: var(--rjs-text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  letter-spacing: var(--tracking-normal);
}

.milestone-label {
  font-family: var(--font-display);
  font-size: var(--rjs-text-lg);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
}

.milestone-desc {
  font-size: var(--rjs-text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  max-width: 200px;
}

/* ─── LAYOUT: COMPARISON TABLE ──────────────────────────────────────── */

.slide-comparison {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  width: 100%;
  height: 100%;
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: var(--space-sm);
  width: 100%;
  flex: 1;
}

.tier-card {
  background: transparent;
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tier-card.featured {
  background: var(--color-primary-dark);
}

.tier-label {
  font-size: var(--rjs-text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.tier-card.featured .tier-label { color: var(--color-primary); }
.tier-card.top      .tier-label { color: var(--color-primary); }

.tier-name {
  font-family: var(--font-display);
  font-size: var(--rjs-text-4xl);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-primary);
  line-height: var(--leading-none);
}

.tier-price {
  font-size: var(--rjs-text-2xl);
  font-weight: var(--weight-light);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wide);
}

.tier-card.featured .tier-price { color: var(--color-primary-light); }
.tier-card.top      .tier-price { color: var(--color-primary); }

.tier-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  flex: 1;
  border-top: 1px solid var(--color-border-default);
  padding-top: var(--space-md);
}

.tier-features li {
  font-size: var(--rjs-text-base);
  color: var(--color-text-secondary);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-default);
  line-height: var(--leading-snug);
}

.tier-cta {
  margin-top: auto;
  padding-top: var(--space-md);
  font-size: var(--rjs-text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border-default);
}

.tier-card.featured .tier-cta { color: var(--color-primary-light); }
.tier-card.top      .tier-cta { color: var(--color-primary); }

/* ─── LAYOUT: ABOUT ME ─────────────────────────────────────────────── */
/* Reuses slide-img-text split pattern. Right col: bio stack. */

.slide-about .bio {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.bio-name {
  font-family: var(--font-display);
  font-size: var(--rjs-text-4xl);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
}

.bio-role {
  font-family: var(--font-body);
  font-size: var(--rjs-text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.bio-links {
  display: flex;
  gap: var(--space-xl);
  font-size: var(--rjs-text-base);
  color: var(--color-text-secondary);
}

.bio-link-primary  { color: var(--color-primary); }
.bio-link-secondary { color: var(--color-secondary); }

/* ─── LAYOUT: TEAM / PEOPLE ────────────────────────────────────────── */

.team-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: var(--space-sm);
  width: 100%;
  height: 100%;
  flex: 1;
}

.person-card {
  display: grid;
  grid-template-rows: 4fr 1fr;
  gap: 0;
  background: var(--color-surface-raised);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.person-card-top {
  overflow: hidden;
  position: relative;
}

.person-card-top img,
.person-card-top [data-image-slot] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-card-top::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%);
  pointer-events: none;
}

.person-card-bottom {
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-xs);
}

.person-name {
  font-family: var(--font-display);
  font-size: var(--rjs-text-lg);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wide);
}

.person-role {
  font-size: var(--rjs-text-base);
  color: var(--color-text-secondary);
}

/* ─── LAYOUT: LOGO WALL ───────────────────────────────────────────── */

.logo-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  grid-template-rows: repeat(var(--rows, 2), 1fr);
  gap: 0;
  width: 100%;
  flex: 1;
}

.logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
}

.logo-cell img,
.logo-cell svg {
  max-width: 160px;
  max-height: 60px;
  opacity: 0.4;
}

/* ─── LAYOUT: MULTI-STAT ROW ──────────────────────────────────────── */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: 0;
  width: 100%;
  flex: 1;
}

.stat-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--space-2xl) var(--space-xl);
  gap: var(--space-md);
}

.stat-cell .stat-number {
  font-size: var(--rjs-text-5xl);
  color: var(--color-primary);
}

.stat-cell .stat-label {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--rjs-text-lg);
}

.stat-cell .stat-source {
  font-family: var(--font-body);
  font-size: var(--rjs-text-xs);
  color: var(--color-text-tertiary);
  font-style: italic;
}

/* ─── LAYOUT: AGENDA ───────────────────────────────────────────────── */

.agenda-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.agenda-list li {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--rjs-text-xl);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}

.agenda-list li:last-child {
  border-bottom: none;
}

.agenda-number {
  font-family: var(--font-body);
  font-size: var(--rjs-text-lg);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  min-width: 40px;
}

/* ─── LAYOUT: CASE STUDY ───────────────────────────────────────────── */

.case-study {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  height: 100%;
}

.case-label {
  font-family: var(--font-body);
  font-size: var(--rjs-text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary);
}

.case-stats {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: 0;
  margin-top: auto;
}

.case-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
  padding: var(--space-lg) 0;
}

.case-stat-number {
  font-family: var(--font-display);
  font-size: var(--rjs-text-3xl);
  color: var(--color-primary);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-none);
}

.case-stat-label {
  font-size: var(--rjs-text-sm);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-normal);
}

/* ─── LAYOUT: CTA ───────────────────────────────────────────────────── */

.slide-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: 900px;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-2xl);
  background: var(--color-primary);
  color: var(--color-surface-page);
  font-family: var(--font-body);
  font-size: var(--rjs-text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  width: fit-content;
}

.cta-button:hover {
  background: var(--color-primary-light);
}

/* ─── LAYOUT: THANK YOU / CONTACT ───────────────────────────────────── */

.slide-thankyou {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}

.thankyou-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.thankyou-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--rjs-text-md);
  color: var(--color-text-secondary);
}

.thankyou-links a {
  color: var(--color-primary);
  text-decoration: none;
}

.thankyou-bottom {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.thankyou-bottom .slide-logo {
  height: 20px;
  width: auto;
}

.thankyou-bottom .brand-name {
  font-family: var(--font-body);
  font-size: var(--rjs-text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* ─── LAYOUT: DEVICE MOCKUPS ───────────────────────────────────────── */
/* Phone + laptop mockup slide. Phone is fully visible on the left
   with content. Laptop bleeds off the right edge of the slide —
   the column's overflow:hidden clips it for a cinematic feel. */

.slide-device-mockup .col {
  gap: var(--space-2xl);
}

.slide-device-mockup .content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.slide-device-mockup .callout-sm {
  font-size: var(--rjs-text-4xl);
}

/* ── Phone Frame ──────────────────────────────────────────────────── */
.device-phone {
  width: 240px;
  aspect-ratio: 9 / 19.5;
  border-radius: 40px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  background: var(--color-surface-raised);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* Dynamic island */
.device-phone::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 28px;
  background: var(--color-black);
  border-radius: 20px;
  z-index: 3;
}

.device-phone-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 37px;
}

.device-phone-screen img,
.device-phone-screen svg,
.device-phone-screen [data-image-slot] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Larger phone for standalone phone slide */
.device-phone-lg {
  width: 380px;
}

/* ── Laptop / Browser Frame ───────────────────────────────────────── */
/* Oversized so it bleeds off the right column edge.
   The col's overflow:hidden handles the clip. */
.device-laptop-wrap {
  position: relative;
  width: 130%;
  min-height: 100%;
  display: flex;
  align-items: center;
}

/* Let laptop bleed right past the column; transparent bg so it floats */
.slide-device-mockup .col-flush {
  overflow: visible;
  background: transparent;
}

.device-laptop {
  width: 100%;
  border-radius: 12px 0 0 12px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-right: none;
  background: var(--color-surface-raised);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Browser top bar */
.device-laptop-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px 16px;
  background: var(--color-surface-page);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.device-laptop-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
}

.device-laptop-url {
  flex: 1;
  height: 26px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  margin-left: var(--space-sm);
}

/* Screen area */
.device-laptop-screen {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}

.device-laptop-screen img,
.device-laptop-screen svg,
.device-laptop-screen [data-image-slot] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

/* ─── 72° CONSTRUCTION LINE MOTIF ──────────────────────────────────── */
/* Subtle brand-signature accent on section divider slides.
   Uses the .slide-section-break as the positioning context,
   not the <section>, to avoid breaking Reveal.js layout. */

.slide-section-break {
  position: relative;
}

.slide-section-break::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -5%;
  width: var(--motif-weight-atmospheric);
  height: 160%;
  background: var(--color-primary);
  opacity: var(--motif-opacity-atmospheric);
  transform: rotate(var(--motif-angle));
  pointer-events: none;
}

.slide-section-break::after {
  content: '';
  position: absolute;
  top: -20%;
  right: 5%;
  width: var(--motif-weight-atmospheric);
  height: 160%;
  background: var(--color-primary);
  opacity: calc(var(--motif-opacity-atmospheric) * 0.5);
  transform: rotate(var(--motif-angle));
  pointer-events: none;
}

/* ─── LAYOUT: TABLE ────────────────────────────────────────────────── */

.slide-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  width: 100%;
  height: 100%;
}

.slide-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--rjs-text-base);
}

.slide-table thead th {
  font-size: var(--rjs-text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary);
  text-align: left;
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--border-thin) solid var(--color-primary);
}

.slide-table tbody td {
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  line-height: var(--leading-normal);
  vertical-align: top;
}

.slide-table tbody tr:last-child td {
  border-bottom: none;
}

.slide-table tbody td:first-child {
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}

/* ─── LAYOUT: CODE ─────────────────────────────────────────────────── */

.slide-code {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
  height: 100%;
}

.code-block {
  background: var(--color-surface-raised);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.code-block-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px 16px;
  background: var(--color-surface-page);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.code-block-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
}

.code-block-filename,
.device-laptop-bar .code-block-filename {
  font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
  font-size: var(--rjs-text-sm);
  color: var(--color-text-tertiary);
  margin-left: var(--space-sm);
}

.code-block pre {
  margin: 0;
  padding: var(--space-xl);
  overflow: auto;
  flex: 1;
}

.code-block code {
  font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
  font-size: var(--rjs-text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  tab-size: 2;
}

/* Syntax highlighting — brand-mapped */
.code-block .token-keyword  { color: var(--color-primary); }
.code-block .token-string   { color: var(--color-secondary, #86E8C5); }
.code-block .token-comment  { color: var(--color-text-tertiary); font-style: italic; }
.code-block .token-function { color: var(--color-primary-light); }
.code-block .token-number   { color: var(--color-secondary, #86E8C5); }
.code-block .token-punct    { color: var(--color-text-secondary); }

/* Code inside laptop mockup */
.code-in-laptop {
  margin: 0;
  padding: var(--space-xl);
  background: var(--color-surface-raised);
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}

.code-in-laptop code {
  font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
  font-size: var(--rjs-text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  tab-size: 2;
}

/* Token classes work inside laptop too */
.code-in-laptop .token-keyword  { color: var(--color-primary); }
.code-in-laptop .token-string   { color: var(--color-secondary, #86E8C5); }
.code-in-laptop .token-comment  { color: var(--color-text-tertiary); font-style: italic; }
.code-in-laptop .token-function { color: var(--color-primary-light); }
.code-in-laptop .token-number   { color: var(--color-secondary, #86E8C5); }
.code-in-laptop .token-punct    { color: var(--color-text-secondary); }

/* ─── LAYOUT: BLOCKQUOTE ───────────────────────────────────────────── */

.slide-blockquote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2xl);
  max-width: 1100px;
  height: 100%;
}

.slide-blockquote blockquote {
  margin: 0;
  padding-left: var(--space-2xl);
  border-left: var(--border-thin) solid var(--color-primary);
}

.slide-blockquote blockquote p {
  font-family: var(--font-body);
  font-size: var(--rjs-text-xl);
  color: var(--color-text-primary);
  line-height: var(--leading-relaxed);
  font-style: italic;
  margin: 0;
}

.slide-blockquote .blockquote-cite {
  padding-left: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.slide-blockquote .cite-author {
  font-family: var(--font-display);
  font-size: var(--rjs-text-lg);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wide);
}

.slide-blockquote .cite-source {
  font-size: var(--rjs-text-base);
  color: var(--color-text-secondary);
}

/* ─── LAYOUT: VISUAL + TEXT ────────────────────────────────────────── */
/* Centered image (transparent BG, illustrations, renders, diagrams)
   paired with text. Image breathes in padded space — dark canvas
   shows through transparency. Contrast with slide-img-text which
   uses col-flush for edge-to-edge photos. */

.slide-visual img,
.slide-visual svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Visual-only: large centered image with optional heading/caption */
.slide-visual-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: var(--space-lg);
}

.slide-visual-centered img,
.slide-visual-centered svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.slide-visual-centered .visual-caption {
  font-size: var(--rjs-text-sm);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* ─── ILLUSTRATION CONTAINER ───────────────────────────────────────── */
/* Reusable wrapper for SVG illustrations in slides. Drop into any col. */

.illust-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.deck-illust {
  width: 100%;
  height: 100%;
  display: block;
}

.deck-illust path {
  opacity: 0;
}

/* ─── CHART BAR ────────────────────────────────────────────────────── */
/* Horizontal bar chart component. Each bar row has a label and fill. */

.chart-bar-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
}

.chart-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.chart-bar-track {
  flex: 1;
  height: 48px;
  background: var(--color-overlay-subtle, rgba(255, 255, 255, 0.06));
  border-radius: var(--radius-sm, 4px);
  overflow: hidden;
}

.chart-bar-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-sm, 4px);
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--space-sm);
  overflow: hidden;
}

.chart-bar-fill .bar-label {
  font-family: var(--font-body);
  font-size: var(--rjs-text-sm);
  color: var(--color-surface-page);
  font-weight: 600;
  opacity: 0;
}

.chart-bar-fill--mint { background: var(--color-secondary); }
.chart-bar-fill--tertiary { background: var(--color-tertiary); }

.chart-bar-label {
  font-family: var(--font-body);
  font-size: var(--rjs-text-base);
  color: var(--color-text-secondary);
  white-space: nowrap;
  min-width: 100px;
  text-align: right;
}

.chart-bar-value {
  font-family: var(--font-display);
  font-size: var(--rjs-text-base);
  color: var(--color-text-primary);
  font-weight: 700;
}

.chart-caption {
  font-family: var(--font-body);
  font-size: var(--rjs-text-sm);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-top: var(--space-xl);
  text-align: center;
}

/* ─── SOURCE ATTRIBUTION ───────────────────────────────────────────── */

a.stat-source {
  font-size: var(--rjs-text-xs);
  color: inherit;
  text-decoration-color: var(--color-text-tertiary);
  text-underline-offset: 0.15em;
}

a.stat-source:hover {
  text-decoration-color: var(--color-primary);
}

/* ─── SURFACE UTILITIES ────────────────────────────────────────────── */
/* For composed slides outside native template context. */

.bg-surface        { background: var(--color-surface-raised); }
.bg-surface-dark   { background: var(--color-neutral-900, #1a1a1a); }
.bg-surface-darker { background: var(--color-neutral-950, #111); }
.bg-transparent    { background: transparent; }

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

/* ─── SLIDE MOSAIC (portfolio grid) ───────────────────────────────── */

.slide-mosaic {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  grid-template-rows: repeat(var(--rows, 2), 1fr);
  gap: var(--space-md);
  width: 100%;
  height: 100%;
  padding: 2.5rem;
}

.slide-mosaic-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-raised);
  border-radius: var(--radius-sm, 4px);
  overflow: hidden;
  padding: 1.5rem;
}

.slide-mosaic-card img {
  width: 85%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.slide-mosaic-card span {
  position: absolute;
  bottom: 0.8rem;
  left: 1rem;
  font-family: var(--font-display);
  font-size: var(--rjs-text-lg);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
  text-transform: uppercase;
}

/* ─── REDUCED MOTION ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .reveal .fragment,
  .reveal .fragment.slide-in-left,
  .reveal .fragment.blur-in,
  .reveal .fragment.pop-in,
  .reveal .fragment.fade-up {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .reveal .slides section {
    transition-duration: 0.01ms !important;
  }
  .entrance-slide-left,
  .entrance-fade-up,
  .entrance-blur-in,
  .entrance-pop,
  .blur-in,
  .slide-in-left-delayed {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* ─── PRINT-PDF MODE (browser layout for ?print-pdf) ──────────────── */
/* Reveal.js adds class="print-pdf" to <body> when ?print-pdf is in URL.
   This lays slides out vertically for Cmd+P → Save as PDF.
   Must serve over HTTP (file:// doesn't pass query strings). */

body.print-pdf {
  background: var(--color-surface-page) !important;
}

body.print-pdf .reveal .slides section,
body.print-pdf .reveal .slides section .slide-background {
  background: var(--color-surface-page) !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  color-adjust: exact;
}

/* Reset all entrance animations to visible end state */
body.print-pdf [class*="entrance-"] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Show all fragments */
body.print-pdf .reveal .fragment {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Kill all motion */
body.print-pdf * {
  animation: none !important;
  transition: none !important;
  transition-delay: 0s !important;
}

/* SVG illustrations: show all paths */
body.print-pdf .deck-illust path {
  opacity: 1 !important;
}

/* Chart bars: show at full width */
body.print-pdf .chart-bar-fill {
  width: attr(data-width %) !important;
}

body.print-pdf .chart-bar-fill .bar-label,
body.print-pdf .chart-caption {
  opacity: 1 !important;
}

/* ─── @MEDIA PRINT (actual print dialog) ──────────────────────────── */
/* Enable "Background graphics" in Chrome print dialog. */

@media print {
  body,
  .reveal,
  .reveal .slide-background {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
  }
}