/* ---------------------------------------------------------------
   Present mode — shared presentation system
   One deck = one HTML page of .slide sections + this CSS + present.js
   Theme per deck via custom props on <body>:
     --deck-bg / --deck-bg-deep  ground colours
     --deck-accent               accent (borders, progress)
   --------------------------------------------------------------- */

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

:root {
  --deck-bg: #1B2A4A;
  --deck-bg-deep: #121f38;
  --deck-accent: #ffffff;
  --deck-ink: #ffffff;
  --deck-ink-soft: rgba(255,255,255,0.78);
  --deck-ink-muted: rgba(255,255,255,0.5);
  --deck-hairline: rgba(255,255,255,0.14);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html, body { height: 100%; }

body {
  background: radial-gradient(120% 120% at 50% 0%, var(--deck-bg) 0%, var(--deck-bg-deep) 100%);
  color: var(--deck-ink);
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

a { color: inherit; }

/* --- Deck stage --- */
.deck {
  position: fixed;
  inset: 0;
  height: 100dvh;
  cursor: default;
}

/* --- Slides --- */
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px clamp(32px, 6vw, 96px) 88px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 640ms var(--ease-out),
    transform 640ms var(--ease-out),
    visibility 0s linear 640ms;
}
.deck.dir-fwd  .slide { transform: translateY(28px); }
.deck.dir-back .slide { transform: translateY(-28px); }
.slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
  z-index: 2;
}
.slide.is-leaving {
  opacity: 0;
  visibility: visible;
  z-index: 1;
}
.deck.dir-fwd  .slide.is-leaving { transform: translateY(-28px); }
.deck.dir-back .slide.is-leaving { transform: translateY(28px); }

.slide__inner {
  width: 100%;
  max-width: 1280px;
}

/* --- Staggered entrances within a slide ---
   Add data-rise and style="--d:N" (N = 0,1,2…) to children. --- */
.slide [data-rise] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: 0ms;
}
.slide.is-active [data-rise] {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--d, 0) * 110ms + 180ms);
}

/* --- Shared type --- */
.slide .kicker {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--deck-ink-muted);
  margin-bottom: 22px;
}
.slide h1, .slide h2 {
  font-family: 'Cooper Lt BT', serif;
  font-weight: 300;
  line-height: 1.12;
  text-wrap: balance;
}
.slide h2 { font-size: clamp(1.9rem, 3.9vw, 3.1rem); margin-bottom: 26px; }
.slide p {
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.65;
  color: var(--deck-ink-soft);
  margin-bottom: 18px;
  max-width: 60ch;
}
.slide p:last-child { margin-bottom: 0; }
.slide strong { color: var(--deck-ink); font-weight: 600; }
.slide em { font-style: italic; color: var(--deck-ink-soft); }

.slide ul {
  list-style: none;
  font-size: clamp(0.98rem, 1.3vw, 1.12rem);
  line-height: 1.6;
  color: var(--deck-ink-soft);
}
.slide ul li {
  padding: 11px 0 11px 26px;
  position: relative;
  border-bottom: 1px solid var(--deck-hairline);
}
.slide ul li:last-child { border-bottom: none; }
.slide ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.55em;
  width: 8px;
  height: 1.5px;
  background: var(--deck-ink-muted);
}

/* The "what it cost" line under a decision */
.slide .cost {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--deck-hairline);
  font-size: clamp(0.92rem, 1.15vw, 1.02rem);
  line-height: 1.6;
  color: var(--deck-ink-muted);
  max-width: 56ch;
}
.slide .cost strong {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--deck-ink-muted);
  margin-bottom: 6px;
}

/* Framed artefact images */
.slide .frame img,
.slide .frame video {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 12px;
  cursor: zoom-in;
}
.slide .frame {
  border-radius: 12px;
}
.slide .frame--card img,
.slide .frame--card video {
  object-fit: cover;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 34px 90px -30px rgba(0,0,0,0.65), 0 12px 30px -18px rgba(0,0,0,0.5);
}
/* Tall phone screenshots: never crop, sit at natural aspect in the column */
.slide .frame--phone img,
.slide .frame--phone video {
  width: auto;
  max-width: 100%;
  max-height: 64vh;
  margin: 0 auto;
  object-fit: contain;
}
.slide .frame .cap {
  font-size: 0.82rem;
  color: var(--deck-ink-muted);
  margin-top: 14px;
  text-align: center;
  max-width: none;
}

/* --- Layout: canvas: one artefact, as big as the screen allows --- */
.slide--canvas .slide__inner { max-width: min(1720px, 94vw); }
.slide--canvas .frame img,
.slide--canvas .frame video {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  box-shadow: 0 34px 90px -30px rgba(0,0,0,0.65), 0 12px 30px -18px rgba(0,0,0,0.5);
}
.slide--canvas .kicker { margin-bottom: 14px; }
.slide--canvas .frame .cap { max-width: 110ch; margin-left: auto; margin-right: auto; }

/* --- Layout: title --- */
.slide--title { text-align: center; }
.slide--title .slide__inner { max-width: 980px; }
.slide--title h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  margin-bottom: 28px;
}
.slide--title .subtitle {
  margin: 0 auto 44px;
  max-width: 58ch;
  font-size: clamp(1.02rem, 1.5vw, 1.25rem);
  color: var(--deck-ink-soft);
}
.slide--title .meta-row {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
}
.slide--title .meta-row .meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.slide--title .meta-row .meta-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--deck-ink-muted);
}
.slide--title .meta-row .meta-value {
  font-size: 0.95rem;
  font-weight: 500;
}

/* --- Layout: full-bleed statement --- */
.slide--statement { text-align: center; }
.slide--statement .slide__inner { max-width: 1020px; }
.slide--statement h2 {
  font-size: clamp(2.1rem, 5vw, 3.9rem);
  line-height: 1.18;
  margin-bottom: 0;
}
.slide--statement h2 em { color: var(--deck-ink-muted); }
.slide--statement .kicker { margin-bottom: 30px; }
.slide--statement .after {
  margin: 34px auto 0;
  max-width: 52ch;
  color: var(--deck-ink-muted);
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
}

/* --- Layout: text + image split ---
   Media takes the larger share: the artefact is the point of the slide. */
.slide--split .slide__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
}
.slide--split.slide--media-left .slide__inner {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
}
.slide--split.slide--media-left .slide__text { order: 2; }
.slide--split.slide--media-left .slide__media { order: 1; }

/* --- Layout: stat --- */
.slide--stat { text-align: center; }
.slide--stat .stat {
  font-family: 'Cooper Lt BT', serif;
  font-weight: 300;
  font-size: clamp(4.6rem, 13vw, 10.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 30px;
}
.slide--stat .stat-caption {
  margin: 0 auto;
  max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--deck-ink-soft);
}

/* --- Layout: quote --- */
.slide--quote .slide__inner { max-width: 900px; }
.slide--quote blockquote {
  font-family: 'Cooper Lt BT', serif;
  font-weight: 300;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.4;
  border-left: 3px solid rgba(255,255,255,0.35);
  padding-left: clamp(24px, 3vw, 40px);
}

/* --- Layout: cards --- */
.slide--cards .slide__inner { max-width: 1220px; }
.slide--cards .cards-head { margin-bottom: clamp(28px, 4vh, 48px); max-width: 820px; }
.slide--cards .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.slide--cards .cards--4 { grid-template-columns: repeat(4, 1fr); }
.slide--cards .cards--2 { grid-template-columns: repeat(2, 1fr); }
.slide--cards .card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  padding: clamp(20px, 2.4vw, 32px);
}
.slide--cards .card .context-illo {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
  margin-bottom: 18px;
}
.slide--cards .card .eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--deck-ink-muted);
  margin-bottom: 12px;
}
/* Quote cards: a voice from the research, with the speaker beneath */
.slide--cards .card .quote {
  font-family: 'Cooper Lt BT', serif;
  font-weight: 300;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  line-height: 1.45;
  margin-bottom: 16px;
}
.slide--cards .card .quote::before { content: "\201C"; }
.slide--cards .card .quote::after { content: "\201D"; }
.slide--cards .card .attribution {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--deck-ink-muted);
}

/* Stat cards: the number is the point, so it gets display type, not a label */
.slide--cards .card .figure {
  font-family: 'Cooper Lt BT', serif;
  font-weight: 300;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.slide--cards .card h3 {
  font-family: 'Cooper Lt BT', serif;
  font-weight: 300;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  margin-bottom: 12px;
  line-height: 1.25;
}
.slide--cards .card p {
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.6;
  color: var(--deck-ink-soft);
  margin: 0;
}
.slide--cards .cards-foot {
  margin: clamp(24px, 4vh, 40px) auto 0;
  text-align: center;
  max-width: 68ch;
  color: var(--deck-ink-soft);
  font-size: clamp(0.98rem, 1.25vw, 1.12rem);
}

/* --- Layout: full image --- */
.slide--image .slide__inner { max-width: 1080px; }
.slide--image h2 {
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: 22px;
}
.slide--image .frame img { max-height: 56vh; margin: 0 auto; width: auto; max-width: 100%; }

/* White card for dark-ink diagrams that vanish on the navy ground */
.slide .frame--light {
  background: #ffffff;
  padding: clamp(24px, 3.5vw, 48px);
  border-radius: 16px;
  box-shadow: 0 34px 90px -30px rgba(0,0,0,0.65), 0 12px 30px -18px rgba(0,0,0,0.5);
}
.slide--image .frame--light img { max-height: 54vh; }

/* --- Layout: text-only (kicker + headline + bullets) --- */
.slide--single .slide__inner { max-width: 800px; }

/* --- Layout: data table --- */
.slide--table .slide__inner { max-width: 980px; }
.deck-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.92rem, 1.2vw, 1.05rem);
}
.deck-table th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--deck-ink-muted);
  padding: 0 20px 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.28);
}
.deck-table td {
  padding: 13px 20px 13px 0;
  border-bottom: 1px solid var(--deck-hairline);
  color: var(--deck-ink-soft);
  line-height: 1.4;
}
.deck-table td:first-child {
  color: var(--deck-ink);
  font-weight: 500;
  white-space: nowrap;
}
.deck-table .tag {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border: 1px solid;
}
.deck-table .tag--live { color: #A5E6B8; border-color: rgba(165,230,184,0.45); }
.deck-table .tag--training { color: #F3D492; border-color: rgba(243,212,146,0.45); }
.deck-table .tag--rules { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.25); }
.slide--table .table-foot {
  margin-top: 26px;
  max-width: 72ch;
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  color: var(--deck-ink-soft);
}
@media (max-width: 860px) {
  .deck-table td:first-child { white-space: normal; }
}

/* --- Layout: award --- */
.slide--award { text-align: center; }
.slide--award .slide__inner { max-width: 900px; }
.slide--award h2 {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  margin-bottom: 14px;
}
.slide--award .award-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: var(--deck-ink-soft);
  max-width: none;
  margin: 0 auto;
}
.slide--award .award-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  margin: clamp(32px, 6vh, 56px) 0 0;
  flex-wrap: wrap;
}
.slide--award .award-badges img {
  display: block;
  height: clamp(110px, 20vh, 170px);
  width: auto;
}
.slide--award .award-foot {
  margin: 30px auto 0;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  color: var(--deck-ink-muted);
  max-width: 54ch;
}

/* --- Layout: closing --- */
.slide--close { text-align: center; }
.slide--close .close-logo {
  height: clamp(64px, 9vw, 110px);
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 40px;
}
.slide--close h2 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  margin-bottom: 18px;
}
.slide--close p { margin: 0 auto 8px; }
.slide--close .close-links {
  margin-top: 44px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.slide--close .close-links a {
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--deck-ink-soft);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  padding: 11px 24px;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.slide--close .close-links a:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
  color: #ffffff;
}

/* --- Layout: showcase — the final product shot, side screens peeking ---
   The deck version of the case page's hero carousel. */
.slide--showcase .slide__inner { max-width: min(1600px, 96vw); }
.slide--showcase .kicker { text-align: center; }
.slide--showcase .showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide--showcase .showcase img {
  display: block;
  border-radius: 14px;
}
.slide--showcase .showcase__center {
  position: relative;
  z-index: 2;
  width: clamp(420px, 58%, 920px);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 44px 110px -28px rgba(0,0,0,0.75), 0 16px 40px -18px rgba(0,0,0,0.5);
  cursor: zoom-in;
}
.slide--showcase .showcase__side {
  position: absolute;
  top: 50%;
  width: 38%;
  max-width: 560px;
  transform: translateY(-50%);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
  opacity: 0.5;
  z-index: 1;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 22px 50px -28px rgba(0,0,0,0.5);
}
.slide--showcase .showcase__side--left { left: 0; }
.slide--showcase .showcase__side--right { right: 0; }
.slide--showcase .cap {
  text-align: center;
  margin-top: 20px;
  font-size: 0.82rem;
  color: var(--deck-ink-muted);
  max-width: none;
}
@media (max-width: 860px) {
  .slide--showcase .showcase__side { display: none; }
  .slide--showcase .showcase__center { width: 100%; }
}

/* --- Lightbox: click a framed artefact to see it near-fullscreen --- */
.deck-lightbox {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 56px);
  background: rgba(5, 7, 13, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}
.deck-lightbox.is-open { opacity: 1; }
.deck-lightbox img,
.deck-lightbox video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 44px 130px -30px rgba(0,0,0,0.85);
  transform: scale(0.965);
  transition: transform 240ms var(--ease-out);
  cursor: zoom-out;
}
.deck-lightbox.is-open img,
.deck-lightbox.is-open video { transform: none; }
.deck-lightbox__hint {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
}
@media (prefers-reduced-motion: reduce) {
  .deck-lightbox,
  .deck-lightbox img,
  .deck-lightbox video { transition: none; transform: none; }
}

/* --- Presenter chrome --- */
.deck-chrome { position: fixed; inset: 0; pointer-events: none; z-index: 20; }

.deck-logo {
  position: fixed;
  top: 28px;
  left: clamp(24px, 4vw, 48px);
  pointer-events: auto;
}
.deck-logo img {
  height: 38px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.deck-exit {
  position: fixed;
  top: 30px;
  right: clamp(24px, 4vw, 48px);
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--deck-ink-muted);
  text-decoration: none;
  transition: color 200ms ease;
}
.deck-exit:hover { color: var(--deck-ink); }
.deck-exit .kbd {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--deck-hairline);
  border-radius: 5px;
  padding: 3px 7px;
  color: var(--deck-ink-muted);
}

.deck-count {
  position: fixed;
  bottom: 26px;
  left: clamp(24px, 4vw, 48px);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--deck-ink-muted);
}

.deck-hint {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.78rem;
  color: var(--deck-ink-muted);
  transition: opacity 500ms ease;
  white-space: nowrap;
}
.deck-hint.is-hidden { opacity: 0; }

.deck-arrows {
  position: fixed;
  bottom: 18px;
  right: clamp(24px, 4vw, 48px);
  display: flex;
  gap: 10px;
  pointer-events: auto;
}
.deck-arrows button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--deck-ink-soft);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease;
}
.deck-arrows button:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.55);
  color: #ffffff;
}
.deck-arrows button:disabled {
  opacity: 0.25;
  cursor: default;
  background: transparent;
}

.deck-progress {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,0.08);
}
.deck-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: rgba(255,255,255,0.45);
  transition: width 500ms var(--ease-out);
}

/* --- Responsive --- */
@media (max-width: 860px) {
  .slide {
    padding: 84px 24px 96px;
    align-items: flex-start;
  }
  .slide__inner {
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .slide--title, .slide--statement, .slide--stat, .slide--close {
    align-items: center;
  }
  .slide--title .slide__inner,
  .slide--statement .slide__inner,
  .slide--stat .slide__inner,
  .slide--close .slide__inner { overflow-y: visible; }
  .slide--split .slide__inner,
  .slide--split.slide--media-left .slide__inner {
    display: block;
  }
  .slide--split .slide__media { margin-top: 24px; }
  .slide--split.slide--media-left .slide__media { margin-top: 24px; }
  .slide .frame img, .slide .frame video { max-height: 38vh; }
  .slide--cards .cards,
  .slide--cards .cards--4,
  .slide--cards .cards--2 { grid-template-columns: 1fr; }
  .deck-logo img { height: 30px; }
  .deck-hint { display: none; }
  .deck-arrows { bottom: 20px; }
}

/* --- Motion preferences --- */
@media (prefers-reduced-motion: reduce) {
  .slide,
  .deck.dir-fwd .slide,
  .deck.dir-back .slide,
  .deck.dir-fwd .slide.is-leaving,
  .deck.dir-back .slide.is-leaving {
    transition: none;
    transform: none;
  }
  .slide [data-rise],
  .slide.is-active [data-rise] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .deck-progress span { transition: none; }
}