:root {
  --navy: #061a2c;
  --navy-2: #0b2c45;
  --teal: #0d8b84;
  --aqua: #64eee3;
  --cream: #fbfaf6;
  --ink: #071b2c;
  --muted: #637582;
  --line: rgba(7, 27, 44, .14);
  --shadow: 0 40px 110px rgba(0, 8, 17, .42);
  font-family: Inter, Avenir Next, Avenir, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 16%, rgba(100, 238, 227, .14), transparent 28%),
    radial-gradient(circle at 82% 86%, rgba(13, 139, 132, .18), transparent 30%),
    #020810;
}
button { font: inherit; }

.deck-shell { position: fixed; inset: 0; display: grid; place-items: center; }
.stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  overflow: hidden;
  background: var(--cream);
  box-shadow: var(--shadow);
}
.slide {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  isolation: isolate;
  background: var(--cream);
  color: var(--ink);
}
.slide.active { display: block; animation: enter .42s cubic-bezier(.22,.75,.2,1) both; }
.slide.leaving { display: block; animation: leave .22s ease both; }
@keyframes enter { from { opacity: 0; transform: scale(1.018); } to { opacity: 1; transform: none; } }
@keyframes leave { to { opacity: 0; transform: scale(.995); } }

.dark { color: #fff; background: linear-gradient(135deg, var(--navy), #020810 82%); }
.photo { background: var(--navy); }
.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.bg.contain { object-fit: contain; padding: 5.5%; }
.bg.fit-right { object-position: 68% center; }
.bg.fit-left { object-position: 32% center; }
.bg.soft { filter: saturate(.86) contrast(.96); }
.bg.kenburns { animation: kenburns 26s ease-in-out infinite alternate; will-change: transform; }
@keyframes kenburns { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.07) translate3d(-1.2%,-1%,0); } }
.scrim { position: absolute; inset: 0; z-index: -2; }
.scrim.left { background: linear-gradient(90deg, rgba(3,16,29,.96) 0%, rgba(3,16,29,.84) 42%, rgba(3,16,29,.13) 76%, transparent); }
.scrim.right { background: linear-gradient(270deg, rgba(3,16,29,.96) 0%, rgba(3,16,29,.78) 40%, rgba(3,16,29,.06) 76%, transparent); }
.scrim.bottom { background: linear-gradient(0deg, rgba(3,16,29,.97), rgba(3,16,29,.56) 42%, rgba(3,16,29,.04) 78%); }
.scrim.all { background: rgba(3,16,29,.64); }
.scrim.light-left { background: linear-gradient(90deg, rgba(251,250,246,.98) 0%, rgba(251,250,246,.84) 43%, rgba(251,250,246,.06) 78%, transparent); }

.content {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7.2% 7.5%;
}
.content.left { width: 62%; align-items: flex-start; }
.content.right { left: 42%; width: 58%; align-items: flex-end; text-align: right; }
.content.center { align-items: center; text-align: center; }
.content.bottom { justify-content: flex-end; padding-bottom: 8.5%; }
.content.top { justify-content: flex-start; padding-top: 9%; }
.content.wide { width: 76%; }
.content.narrow { width: 52%; }

.brand {
  position: absolute;
  z-index: 8;
  top: 4.2%;
  right: 4.4%;
  width: 10.8%;
  min-width: 104px;
}
.brand img { display: block; width: 100%; height: auto; }
.dark .brand img, .photo .brand img { filter: brightness(0) invert(1); }
.slide-no {
  position: absolute;
  right: 4.4%;
  bottom: 3.6%;
  z-index: 8;
  font-size: clamp(9px, .78vw, 15px);
  font-weight: 900;
  letter-spacing: .16em;
  color: rgba(7,27,44,.45);
}
.dark .slide-no, .photo .slide-no { color: rgba(255,255,255,.48); }
.act {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  width: max-content;
  margin-bottom: 1.1em;
  padding: .62em .9em;
  border: 1px solid rgba(13,139,132,.25);
  border-radius: 99px;
  color: var(--teal);
  background: rgba(13,139,132,.09);
  font-size: clamp(10px, .78vw, 15px);
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.act::before { content: ""; width: .58em; height: .58em; border-radius: 50%; background: currentColor; box-shadow: 0 0 1em currentColor; }
.dark .act, .photo .act { color: var(--aqua); border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); }

h1, h2, p { margin: 0; }
h1, h2 {
  max-width: 11.5em;
  font-weight: 950;
  line-height: .91;
  letter-spacing: -.072em;
  text-wrap: balance;
}
h1 { font-size: clamp(54px, 6.9vw, 132px); }
h2 { font-size: clamp(42px, 5.4vw, 104px); }
.mega { font-size: clamp(64px, 8.1vw, 156px); max-width: 10.2em; }
.small-title { font-size: clamp(38px, 4.6vw, 88px); }
.accent { color: var(--teal); }
.dark .accent, .photo .accent { color: var(--aqua); }
.kicker {
  max-width: 31em;
  margin-top: 1.15em;
  font-size: clamp(16px, 1.35vw, 26px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--muted);
}
.dark .kicker, .photo .kicker { color: rgba(255,255,255,.73); }
.micro {
  position: absolute;
  left: 4.5%;
  bottom: 3.4%;
  z-index: 7;
  color: rgba(255,255,255,.55);
  font-size: clamp(8px, .65vw, 12px);
  font-weight: 700;
}

.chapter-number {
  position: absolute;
  left: 7.4%;
  top: 8.2%;
  font-size: clamp(88px, 15vw, 288px);
  line-height: .8;
  font-weight: 950;
  letter-spacing: -.09em;
  color: rgba(100,238,227,.13);
}

.vector-scene { background: radial-gradient(circle at 70% 28%, rgba(100,238,227,.17), transparent 31%), linear-gradient(135deg,#071c2e,#020810 80%); }
.vector-art { position: absolute; inset: 5% 2% 2% 36%; width: 62%; height: 91%; overflow: visible; }
.vector-art .main { fill: rgba(255,255,255,.035); stroke: #fff; stroke-width: 3.5; }
.vector-art .twin { fill: none; stroke: var(--aqua); stroke-width: 2.5; stroke-dasharray: 10 9; filter: drop-shadow(0 0 8px rgba(100,238,227,.6)); }
.vector-art .fine { fill: none; stroke: rgba(255,255,255,.26); stroke-width: 1.5; }
.vector-art .pulse { fill: var(--aqua); filter: drop-shadow(0 0 9px var(--aqua)); }
.vector-art text { fill: rgba(255,255,255,.55); font: 700 18px "Segoe UI", sans-serif; letter-spacing: .1em; }
.stars { position: absolute; inset: 0; z-index: -1; opacity: .68; background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.5px); background-size: 89px 89px; mask-image: linear-gradient(90deg, transparent 10%, #000 55%); }

.process {
  width: min(88%, 1460px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4%;
  align-items: center;
  margin-top: 5%;
}
.process-step { position: relative; display: grid; justify-items: center; gap: 1.1em; }
.process-step:not(:last-child)::after { content: ""; position: absolute; top: 35%; left: 68%; width: 72%; height: 2px; background: linear-gradient(90deg,var(--aqua),rgba(100,238,227,.18)); }
.process-icon { width: clamp(92px, 9vw, 174px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(100,238,227,.48); background: radial-gradient(circle,rgba(100,238,227,.15),rgba(255,255,255,.03)); box-shadow: 0 0 60px rgba(100,238,227,.12); color: var(--aqua); font-size: clamp(36px, 4vw, 76px); font-weight: 300; }
.process-step b { color: #fff; font-size: clamp(16px, 1.35vw, 26px); letter-spacing: -.035em; }

.split-frame { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.split-frame figure { position: relative; margin: 0; overflow: hidden; }
.split-frame img { width: 100%; height: 100%; object-fit: cover; }
.split-frame figure:first-child { border-right: 2px solid rgba(255,255,255,.65); }
.center-label {
  position: absolute;
  z-index: 4;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 64%;
  padding: .38em .55em .48em;
  border-radius: .22em;
  color: #fff;
  background: rgba(3,16,29,.76);
  backdrop-filter: blur(12px);
  text-align: center;
  font-size: clamp(40px, 5.5vw, 106px);
  font-weight: 950;
  line-height: .94;
  letter-spacing: -.07em;
}

.collage { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; background: #fff; }
.collage img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.04); }
.collage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle,rgba(3,16,29,.1) 0%,rgba(3,16,29,.28) 78%); }
.collage-label {
  position: absolute;
  z-index: 3;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  padding: .65em .85em .72em;
  border-radius: .28em;
  color: #fff;
  background: rgba(3,16,29,.82);
  box-shadow: 0 22px 70px rgba(0,0,0,.33);
  text-align: center;
  font-size: clamp(32px, 4.4vw, 84px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.06em;
}

.glass-card {
  position: absolute;
  z-index: 3;
  width: 30%;
  min-width: 300px;
  padding: 2.2%;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 1.4vw;
  color: #fff;
  background: rgba(3,16,29,.68);
  box-shadow: 0 28px 80px rgba(0,0,0,.3);
  backdrop-filter: blur(16px);
}
.glass-card.left-card { left: 7%; bottom: 9%; }
.glass-card.right-card { right: 7%; top: 20%; }
.glass-card strong { display: block; color: var(--aqua); font-size: clamp(13px, 1vw, 20px); text-transform: uppercase; letter-spacing: .13em; }
.glass-card span { display: block; margin-top: .45em; font-size: clamp(24px, 2.4vw, 46px); line-height: 1; font-weight: 950; letter-spacing: -.05em; }
.research-badge { display: inline-flex; width: max-content; margin-bottom: 1.1em; padding: .62em .9em; border: 1px solid rgba(255,255,255,.24); border-radius: 99px; color: #fff; background: rgba(2,8,16,.62); backdrop-filter: blur(10px); font-size: clamp(10px,.78vw,15px); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

.guardrails { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6%; width: 84%; margin-top: 4.5%; }
.guardrail { padding: 3.2% 2.4%; border-radius: 1.3vw; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); }
.guardrail i { display: grid; place-items: center; width: 3.2em; height: 3.2em; margin: 0 auto .9em; border-radius: 50%; color: var(--aqua); background: rgba(100,238,227,.1); border: 1px solid rgba(100,238,227,.35); font-size: clamp(18px, 1.8vw, 34px); font-style: normal; }
.guardrail b { display: block; color: #fff; font-size: clamp(16px, 1.35vw, 26px); text-align: center; line-height: 1.15; }

.composer-grid { display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(2,1fr); gap: 1.3%; width: 94%; margin-top: 3.6%; }
.composer-item { padding: 2.1% 1.5%; border-radius: 1vw; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.055); text-align: left; }
.composer-item i { display: grid; place-items: center; width: 2.5em; height: 2.5em; margin-bottom: .55em; border-radius: 50%; color: var(--aqua); background: rgba(100,238,227,.11); border: 1px solid rgba(100,238,227,.32); font-size: clamp(15px, 1.25vw, 24px); font-style: normal; }
.composer-item b { display: block; color: #fff; font-size: clamp(13px, 1.05vw, 19px); letter-spacing: -.02em; line-height: 1.15; margin-bottom: .32em; }
.composer-item span { display: block; color: rgba(255,255,255,.62); font-size: clamp(10px, .8vw, 14px); line-height: 1.3; }

.progress { position: fixed; z-index: 50; left: 0; right: 0; top: 0; height: 4px; background: rgba(255,255,255,.1); }
.progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--teal),var(--aqua)); transition: width .35s ease; }
.act-nav {
  position: fixed;
  z-index: 58;
  top: 18px;
  left: 50%;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  transform: translateX(-50%);
}
.act-nav button {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  color: rgba(255,255,255,.48);
  background: transparent;
  cursor: pointer;
}
.act-nav button span { width: clamp(30px,4.2vw,70px); height: 3px; border-radius: 99px; background: rgba(255,255,255,.2); transition: background .2s ease; }
.act-nav button b { max-width: 0; overflow: hidden; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: max-width .2s ease, opacity .2s ease; }
.act-nav button:hover b, .act-nav button:focus-visible b, .act-nav button.active b { max-width: 240px; opacity: 1; }
.act-nav button.active { color: var(--aqua); }
.act-nav button.active span { background: var(--aqua); box-shadow: 0 0 14px rgba(100,238,227,.45); }
.site-return {
  position: fixed;
  z-index: 58;
  top: 18px;
  left: 22px;
  right: auto;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: #fff;
  background: rgba(2,8,16,.68);
  box-shadow: 0 12px 36px rgba(0,0,0,.25);
  backdrop-filter: blur(14px);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  opacity: .7;
  transition: opacity .2s ease, background .2s ease;
}
.site-return:hover,
.site-return:focus-visible { opacity: 1; background: rgba(13,115,119,.92); outline: none; }
.controls {
  position: fixed;
  z-index: 55;
  left: 50%; bottom: 17px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: #fff;
  background: rgba(2,8,16,.72);
  box-shadow: 0 16px 50px rgba(0,0,0,.32);
  backdrop-filter: blur(16px);
  opacity: .28;
  transition: opacity .2s ease;
}
.controls:hover, .controls:focus-within { opacity: 1; }
.controls button { width: 38px; height: 38px; border: 0; border-radius: 50%; color: #fff; background: transparent; cursor: pointer; font-size: 18px; }
.controls button:hover, .controls button:focus-visible { outline: none; background: rgba(100,238,227,.17); color: var(--aqua); }
.controls .notes-button { width: auto; padding: 0 12px; font-size: 11px; font-weight: 850; }
.counter { min-width: 78px; text-align: center; font-size: 13px; font-weight: 850; letter-spacing: .08em; }
.rotate-hint { display: none; }
.deck-cta-row { display: flex; justify-content: center; flex-wrap: wrap; gap: .7vw; margin-top: 1.6vw; }
.deck-cta { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: .68em 1.15em; border: 1px solid rgba(255,255,255,.42); border-radius: 999px; color: #fff; background: rgba(2,8,16,.44); backdrop-filter: blur(12px); font-size: clamp(10px,.82vw,16px); font-weight: 850; text-decoration: none; }
.deck-cta-primary { color: #052331; border-color: var(--aqua); background: var(--aqua); }
.slide:last-of-type .mega { font-size: clamp(52px,6.5vw,124px); }

.notes-panel, .help-panel {
  position: fixed;
  z-index: 80;
  right: 18px; bottom: 76px;
  width: min(520px, calc(100vw - 36px));
  max-height: 42vh;
  overflow: auto;
  padding: 22px 24px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 22px;
  color: #fff;
  background: rgba(2,8,16,.93);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  backdrop-filter: blur(18px);
}
.notes-panel[hidden], .help-panel[hidden] { display: none; }
.notes-panel h3, .help-panel h3 { margin: 0 0 10px; color: var(--aqua); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.notes-panel p, .help-panel p { margin: 0; color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.46; }
.help-panel { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%,-50%); }
.help-panel p + p { margin-top: 8px; }
.speaker-note { display: none; }

body.clean .controls, body.clean .progress, body.clean .site-return { opacity: 0; pointer-events: none; }

@media (max-aspect-ratio: 1/1) {
  .controls { bottom: 8px; }
  .act-nav { display: none; }
  .site-return { top: 12px; left: 12px; right: auto; min-height: 38px; padding: 8px 12px; font-size: 11px; }
  .rotate-hint { position: fixed; z-index: 54; left: 50%; bottom: 62px; display: block; width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 8px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: rgba(255,255,255,.8); background: rgba(2,8,16,.76); font-size: 10px; font-weight: 750; text-align: center; transform: translateX(-50%); }
  .deck-cta { min-height: 32px; padding: .5em .85em; font-size: clamp(10px,2.6vw,13px); }
  .slide-no { font-size: .78vw; }
  .act { font-size: .78vw; }
  h1 { font-size: 6.9vw; }
  h2 { font-size: 5.4vw; }
  .mega { font-size: 8.1vw; }
  .small-title { font-size: 4.6vw; }
  .kicker { font-size: 1.35vw; }
  .micro { font-size: .65vw; }
  .chapter-number { font-size: 15vw; }
  .brand { min-width: 0; }
  .vector-art text { font-size: .94vw; }
  .process-icon { width: 9vw; font-size: 4vw; }
  .process-step b { font-size: 1.35vw; }
  .center-label { font-size: 5.5vw; }
  .collage-label { font-size: 4.4vw; }
  .glass-card { min-width: 0; }
  .glass-card strong { font-size: 1vw; }
  .glass-card span { font-size: 2.4vw; }
  .guardrail i { font-size: 1.8vw; }
  .guardrail b { font-size: 1.35vw; }
  .composer-grid { grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(4,1fr); width: 88%; gap: 2.2%; }
  .composer-item i { font-size: 1.25vw; }
  .composer-item b { font-size: 1.05vw; }
  .composer-item span { font-size: .8vw; }
}

@media print {
  html, body { overflow: visible; background: #fff; }
  .deck-shell { position: static; display: block; }
  .stage { width: 16in; height: auto; overflow: visible; box-shadow: none; }
  .slide, .slide.active { position: relative; display: block; width: 16in; height: 9in; page-break-after: always; break-after: page; animation: none; }
  .controls, .progress, .notes-panel, .help-panel, .site-return, .act-nav, .rotate-hint { display: none !important; }
}


/* Final accessibility refinements */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-aspect-ratio: 1/1), (pointer: coarse) {
  .controls { opacity: .92; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .slide,
  .slide.leaving { animation: none !important; }
}