/* =========================================================
   Pitch deck — viewer styles
   ========================================================= */
:root {
  --u: min(1vw, 1.7778vh);               /* 1% of a 16:9 stage that fits the screen */
  --pad: max(20px, calc(var(--u) * 3.3));
  --page: #fff;
  --ink: #000;
  --muted: #7d7d7d;
  --accent: #b3202a;
  --hfont: "DM Sans", system-ui, sans-serif;
  --bfont: "DM Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { font-family: var(--bfont); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---------- slides ---------- */
.deck { position: fixed; inset: 0; overflow: hidden; touch-action: pan-y; }
.slide {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--page); color: var(--ink);
  opacity: 0; visibility: hidden;
  transition: opacity .7s ease, transform .8s var(--ease), visibility 0s linear .8s;
}
.slide.is-active { opacity: 1; visibility: visible; z-index: 2; transition: opacity .7s ease, transform .8s var(--ease), visibility 0s; }
.deck[data-transition="slide"] .slide { transform: translateX(6%); }
.deck[data-transition="slide"] .slide.is-past { transform: translateX(-6%); }
.deck[data-transition="slide"] .slide.is-active { transform: none; }
.deck[data-transition="none"] .slide { transition: none; }

.on-dark { color: #fff; --muted: rgba(255, 255, 255, .72); }
.on-light-media { color: #000; --muted: rgba(0, 0, 0, .62); }

/* ---------- entrance animation ---------- */
.a {
  opacity: 0; transform: translateY(calc(var(--u) * 2.2));
  transition: opacity .8s ease, transform 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms + 180ms);
}
.is-active .a { opacity: 1; transform: none; }
.deck[data-transition="none"] .a { transition-duration: .5s; }

.deck.static .slide, .deck.static .a, .deck.static .media-img { transition: none !important; }

/* ---------- media (image or colour block) ---------- */
.media { position: absolute; overflow: hidden; background-color: #000; }
.media-img {
  position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; background-position: center;
  transform: scale(1.08); transition: transform 1.8s var(--ease);
}
.is-active .media-img { transform: scale(1); }
.media::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--ov, 0); pointer-events: none; }

/* ---------- logo ---------- */
.logo { position: absolute; left: var(--pad); top: var(--pad); z-index: 3; display: flex; align-items: center; }
.logo img { display: block; height: max(30px, calc(var(--u) * 3.6)); width: auto; max-width: 40vw; object-fit: contain; }
.logo.lg img { height: max(48px, calc(var(--u) * 7.4)); }
.wordmark {
  font-family: var(--hfont); font-weight: 600; font-size: max(11px, calc(var(--u) * .95)); line-height: 1.1;
  letter-spacing: .01em; color: var(--accent); max-width: 12em;
  border-left: 1px solid currentColor; padding-left: .7em;
}
.on-dark .wordmark { color: #fff; }
.logo.lg .wordmark { font-size: max(13px, calc(var(--u) * 1.4)); }

/* ---------- type ---------- */
.body { position: absolute; z-index: 3; }
h1, h2 { font-family: var(--hfont); font-weight: 500; margin: 0; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: max(34px, calc(var(--u) * 4.7)); line-height: 1.06; }
h2 { font-size: max(24px, calc(var(--u) * 3.1)); line-height: 1.13; }
.sub { margin-top: calc(var(--u) * 1.6); font-size: max(16px, calc(var(--u) * 1.8)); font-weight: 300; color: var(--muted); }
.txt { margin-top: calc(var(--u) * 1.4); font-size: max(15px, calc(var(--u) * 1.7)); line-height: 1.38; font-weight: 300; color: var(--muted); text-wrap: pretty; }
.txt p { margin: 0 0 .85em; }
.txt p:last-child { margin-bottom: 0; }
.txt strong { font-weight: 500; color: var(--ink); }
.on-dark .txt strong { color: #fff; }
.txt a { color: inherit; }

/* ---------- footer ---------- */
.foot {
  position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) * .8); z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  font-size: max(10px, calc(var(--u) * .78)); line-height: 1.2; pointer-events: none;
}
.foot-l, .foot-r { display: flex; align-items: center; gap: calc(var(--u) * 7); }
.foot .f1 { font-weight: 500; }
.foot .f2 { color: var(--muted); }
.foot .pg { font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--muted); }
.foot .foot-logo img { height: max(26px, calc(var(--u) * 3.4)); width: auto; display: block; }
.foot .foot-logo .wordmark { font-size: max(10px, calc(var(--u) * .8)); }
.foot .tone-dark { color: #fff; --muted: rgba(255, 255, 255, .7); }

/* =========================================================
   LAYOUTS (desktop / landscape)
   ========================================================= */

/* 1 — Front cover */
.l-cover .body { left: var(--pad); right: var(--pad); top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; }
.l-cover h1 { max-width: 72%; }

/* 2 — Media box left, text right */
.l-media-left .media { left: var(--pad); top: var(--pad); width: 56.3%; bottom: 16%; border-radius: max(6px, calc(var(--u) * .6)); }
.l-media-left .body { left: 64.6%; right: var(--pad); top: var(--pad); }
.l-media-left .logo { display: none; }

/* 3 — Centered statement on full media */
.l-centered .media, .l-full-right .media, .l-back .media { inset: 0; }
.l-centered .body { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(66%, calc(var(--u) * 66)); text-align: center; }
.l-centered h2 { font-size: max(26px, calc(var(--u) * 3.6)); }

/* 4 — Full media, text right */
.l-full-right .body { left: 59%; right: var(--pad); top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; padding-top: 4%; }

/* 5 — Split: text left, media right */
.l-split .media { top: 0; bottom: 0; right: 0; width: 49.6%; }
.l-split .body { left: var(--pad); width: 37%; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; padding-top: 4%; }

/* 6 — Two-column text */
.l-twocol .body { left: var(--pad); right: var(--pad); top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; }
.l-twocol h2 { max-width: 62%; }
.l-twocol .cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 3.4); max-width: 88%; }
.l-twocol .cols .txt { margin-top: 0; }

/* 7 — Back cover */
.l-back .body { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(70%, calc(var(--u) * 70)); text-align: center; display: flex; flex-direction: column; align-items: center; }
.l-back .back-logo img { height: max(60px, calc(var(--u) * 10)); width: auto; max-width: 60vw; display: block; }
.l-back .back-logo .wordmark { font-size: max(16px, calc(var(--u) * 2)); border-left: 0; padding: 0; text-align: center; }
.l-back h2 { margin-top: calc(var(--u) * 4); font-size: max(26px, calc(var(--u) * 3.6)); }
.l-back .logo { display: none; }

/* ---------- navigation ---------- */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 20; pointer-events: none; }
.progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .6s var(--ease); }
.nav-btn {
  position: fixed; z-index: 20; width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: #111; background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .18); transition: opacity .35s ease, transform .2s ease, background .2s;
  -webkit-tap-highlight-color: transparent;
}
.nav-btn svg { width: 22px; height: 22px; }
.nav-btn:hover { transform: scale(1.06); background: #fff; }
.nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nav-btn[disabled] { opacity: .25 !important; cursor: default; transform: none; }
.nav-prev { left: 16px; top: 50%; margin-top: -23px; }
.nav-next { right: 16px; top: 50%; margin-top: -23px; }
.nav-fs { right: 16px; top: 16px; width: 38px; height: 38px; }
.nav-fs svg { width: 18px; height: 18px; }
body.idle .nav-btn { opacity: 0; pointer-events: none; }
body.embed .nav-fs { display: none; }
.empty { position: fixed; inset: 0; display: grid; place-items: center; color: #999; font: 16px system-ui; }

/* =========================================================
   MOBILE / PORTRAIT — layouts reflow into a vertical stack
   ========================================================= */
@media screen and (max-width: 760px), screen and (max-aspect-ratio: 4/5) {
  :root { --u: 1vw; --pad: 22px; }
  .slide { display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: calc(var(--pad) + env(safe-area-inset-top)); }
  .slide > .logo, .slide > .body, .slide > .foot { position: relative; inset: auto; transform: none; }
  .slide > .logo { left: auto; top: auto; margin: 0 var(--pad); }
  .slide > .body { width: auto; margin: 28px var(--pad) 0; flex: 1 0 auto; padding-top: 0; }
  .slide > .foot { left: auto; right: auto; bottom: auto; margin: 24px var(--pad) calc(18px + env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 6px 14px; }
  .foot-l { gap: 14px; flex-wrap: wrap; }
  .logo img { height: 34px; max-width: 60vw; }
  .logo.lg img { height: 52px; }
  h1 { font-size: clamp(32px, 9.6vw, 46px); }
  h2 { font-size: clamp(25px, 7.4vw, 36px); }
  .l-centered h2, .l-back h2 { font-size: clamp(26px, 8vw, 38px); }
  .txt { font-size: 16px; }

  .l-cover .body, .l-full-right .body, .l-split .body, .l-twocol .body { display: flex; flex-direction: column; justify-content: center; }
  .l-cover h1, .l-twocol h2 { max-width: none; }

  .l-media-left { padding-top: 0; }
  .l-media-left .media { position: relative; inset: auto; width: auto; height: 46vh; flex: 0 0 auto; margin: calc(var(--pad) + env(safe-area-inset-top)) var(--pad) 0; }
  .l-media-left .body { flex: 1 0 auto; }
  .foot .foot-logo { display: none; }

  .l-centered .media, .l-full-right .media, .l-back .media { position: absolute; inset: 0; }
  .l-centered .body, .l-back .body { display: flex; flex-direction: column; justify-content: center; width: auto; }
  .l-full-right .body { justify-content: flex-end; }

  .l-split .media { position: relative; inset: auto; width: 100%; height: auto; min-height: 42vh; flex: 1 0 42vh; margin-top: 28px; order: 3; }
  .l-split .body { order: 2; flex: 0 0 auto; }
  .l-split .foot { order: 4; }
  .l-split .foot .tone-dark { color: inherit; --muted: #7d7d7d; }

  .l-twocol .cols { grid-template-columns: 1fr; gap: 0; max-width: none; margin-top: 18px; }
  .l-twocol .cols .txt + .txt { margin-top: .85em; }

  .nav-prev, .nav-next { top: calc(12px + env(safe-area-inset-top)); margin-top: 0; width: 40px; height: 40px; }
  .nav-prev { left: auto; right: 60px; }
  .nav-next { right: 14px; }
  .nav-fs { display: none; }
}
@media (hover: none) { body.idle .nav-btn { opacity: 1; pointer-events: auto; } }

@media (prefers-reduced-motion: reduce) {
  .slide, .a, .media-img { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .a, .media-img { transform: none !important; }
}

/* ---------- print / save as PDF (one slide per page) ---------- */
@media print {
  @page { size: 1920px 1080px; margin: 0; }
  html, body { height: auto; overflow: visible; background: #fff; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .deck { position: static; overflow: visible; }
  .slide { --u: 19.2px; --pad: 63px; position: relative; width: 1920px; height: 1080px; opacity: 1 !important; visibility: visible !important; transform: none !important; break-after: page; page-break-after: always; }
  .slide.is-hidden { display: none; }
  .a, .media-img { opacity: 1 !important; transform: none !important; transition: none !important; }
  .nav, .progress { display: none !important; }
}