/* ================================================================
   KnowAll.ai house style
   Palette and typography lifted from the KnowAll brand deck:
   lime #9DFE0A on charcoal #333732, Playfair Display headings,
   Mulish (Muli) body, textured green header band with chevron notch.
   ================================================================ */
:root {
  --lime: #9dfe0a;
  --lime-flat: #80db08;

  /* Surfaces — a genuinely dark, slightly cool grey scale. Each step is
     clearly lighter than the last so cards read as raised, not painted on. */
  --charcoal: #0f1216; /* slide background — near-black, cool */
  --panel: #232b34; /* raised card surface */
  --panel-lo: #1a2027; /* foot of the card gradient */
  --panel-hi: #2d3641; /* hero / KPI surface, one step brighter */

  --ink: #0d1013; /* darkest — text on lime */
  --text: #f1f5f8; /* headings */
  --mist: #b6c1cc; /* body text — 7.5:1 on --panel */
  --line: rgba(255, 255, 255, 0.09); /* hairline, replaces lime outlines */
  --line-lime: rgba(157, 254, 10, 0.42);

  --shadow-card: 0 16px 38px rgba(0, 0, 0, 0.5);
  --shadow-hi: 0 26px 60px rgba(0, 0, 0, 0.62);
  --inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.07);

  --band-h: 210px;
  /* reserved strip at the foot of every slide for the floating controls */
  --ctl-band: 92px;
  --focus-ring: 3px solid var(--lime);
}

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

html,
body {
  background: var(--charcoal);
}

.reveal {
  font-family: 'Mulish', 'Segoe UI', sans-serif;
  font-size: 30px;
  color: #f4f6ef;
}

.reveal .slides section {
  height: 1080px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  text-align: left;
  background: var(--charcoal);
}

.reveal h1,
.reveal h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: none;
  margin: 0;
}

.reveal h3,
.reveal h4 {
  font-family: 'Mulish', sans-serif;
  font-weight: 800;
  margin: 0;
}

.reveal p {
  line-height: 1.55;
  margin: 0;
}

.reveal a {
  color: var(--lime);
  text-decoration: none;
}

.reveal a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Lucide icons ------------------------------------------------ */
.ic {
  width: 1em;
  height: 1em;
  stroke: currentcolor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* --- Kicker (small uppercase lead-in) ----------------------------- */
.kicker {
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--lime);
  font-weight: 800;
  font-size: 23px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
}

.kicker::after {
  content: '';
  width: 110px;
  height: 3px;
  background: var(--lime);
  opacity: 0.7;
}

/* --- Logos --------------------------------------------------------- */
.logo-dark,
.logo-light {
  width: auto;
  z-index: 5;
}

.logo-light {
  filter: brightness(0) invert(1);
}

section > .logo-light {
  position: absolute;
  top: 54px;
  right: 80px;
  height: 132px;
}

/* Opt-in modifier, not a new default. The white logo normally sits top right,
   which works because every cover's artwork is dark in that corner — except
   the Agentic AI Solutions cover, where a bright full moon sits directly
   behind it and white-on-white reads badly (Ben, 2026-08-26). Move that one
   logo to the top left, aligned with the cover copy's 96px gutter. */
section > .logo-light--left {
  right: auto;
  left: 96px;
}

/* --- Header-band slides (house template) --------------------------- */
/* The header used to be a full-width strip with a divider and a
   drop shadow, which made every content slide look like the same
   template (Ben, 2026-07-28). Same colours, but presented like the
   cover: the title sits ON the slide, with a short green rule
   under it instead of a rule across the whole frame. */
.band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--band-h);
  background: none;
  border-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 84px 0 96px;
  box-shadow: none;
}

/* The deck already draws a short accent rule under the header —
   no second one needed now the strip is gone. */

.pill-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.pill-logo img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.partner-grid {
  /* one column per partner — five logos, five columns, no orphan row */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
}
.partner-grid .card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.logo-plate {
  background: #ffffff;
  border-radius: 14px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 22px;
}
.logo-plate img {
  max-height: 54px;
  max-width: 100%;
  object-fit: contain;
}
.plate-word {
  font-family: 'Mulish', sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: #5a5a5a;
  letter-spacing: 0.5px;
}

/* --- Meet the team (agents) ------------------------------------------- */
.agent-row {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}
.agent {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.agent-av {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 32% 26%, #c4ff5e, #7cc400);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
  transition: transform 0.16s ease;
}
.agent:hover .agent-av {
  transform: translateY(-4px);
}
.agent-av .ic {
  width: 42px;
  height: 42px;
  color: #16230a;
}

/* Portrait art replaces the flat icon circles (Ben, 2026-08-11) */
.agent-av--photo {
  width: 118px;
  height: 118px;
  background: #0b0d10;
  border: 2px solid rgba(157, 254, 10, 0.45);
  overflow: hidden;
}

.agent-av--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* --- Who you're working with: humans + the agents that augment them ---- */
.human-row {
  display: flex;
  gap: 20px;
}

.human {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.human img {
  width: 158px;
  height: 158px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(157, 254, 10, 0.6);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
}

.human .agent-name {
  font-size: 26px;
}

.human .agent-role {
  font-size: 16px;
}

/* thin lime rule with a centred label, joining the two rows */
.augment-rule {
  display: flex;
  align-items: center;
  gap: 28px;
  color: var(--lime);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
}

.augment-rule::before,
.augment-rule::after {
  content: '';
  flex: 1;
  height: 2px;
}

.augment-rule::before {
  background: linear-gradient(90deg, transparent, rgba(157, 254, 10, 0.55));
}

.augment-rule::after {
  background: linear-gradient(270deg, transparent, rgba(157, 254, 10, 0.55));
}
.agent-name {
  font-weight: 800;
  color: #fff;
  font-size: 22px;
}
.agent-role {
  color: var(--lime);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 2px;
}
.agent-skills {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  width: 214px;
  transform: translateX(-50%) translateY(8px);
  background: #14140f;
  border: 1px solid var(--lime);
  border-radius: 14px;
  padding: 14px 16px;
  opacity: 0;
  pointer-events: none;
  transition: 0.18s ease;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.65);
  z-index: 6;
}
.agent-skills::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--lime);
}
.agent:hover .agent-skills,
.agent:focus-visible .agent-skills,
.agent:focus-within .agent-skills {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.agent-skills h5 {
  color: #fff;
  font-size: 15px;
  margin-bottom: 8px;
  font-weight: 800;
}
.agent-skills span {
  display: block;
  color: var(--mist);
  font-size: 15px;
  line-height: 1.75;
}
.team-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 64px;
  margin-top: 60px;
}
.team-note {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: none;
  border: 0;
  border-left: 3px solid var(--lime);
  border-radius: 0;
  box-shadow: none;
  padding: 6px 0 6px 28px;
}
.team-note .ic {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--lime);
  margin-top: 4px;
}
.team-note p {
  color: var(--mist);
  font-size: 20px;
  line-height: 1.5;
}
.team-note strong {
  color: #fff;
  display: block;
  font-size: 21px;
  margin-bottom: 4px;
}

/* thin lime accent rule where the lime chevron notch used to be */
.band::after {
  content: '';
  position: absolute;
  top: calc(var(--band-h) - 3px);
  left: 96px;
  width: 112px;
  height: 3px;
  background: var(--lime);
  box-shadow: 0 0 20px rgba(157, 254, 10, 0.55);
  z-index: 2;
}

.band h2 {
  font-size: 66px;
  line-height: 1.04;
  color: var(--text);
}

.band .band-sub {
  margin-top: 12px;
  font-size: 26px;
  font-weight: 600;
  color: var(--mist);
}

/* the mark is dark-on-light artwork — invert it for the dark header */
.band .logo-dark {
  height: 112px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.content {
  position: absolute;
  top: var(--band-h);
  left: 0;
  right: 0;
  bottom: 0;
  padding: 100px 96px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
}

/* --- Dark statement slides ----------------------------------------- */
.dark-inner {
  position: absolute;
  inset: 0;
  padding: 108px 130px calc(52px + var(--ctl-band));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 44px;
  background:
    radial-gradient(1100px 550px at 88% -10%, rgba(157, 254, 10, 0.09), transparent 60%),
    var(--charcoal);
}

.dark-inner h2 {
  font-size: 88px;
  color: #ffffff;
}

.dark-inner .lead {
  font-size: 33px;
  color: var(--mist);
  max-width: 1250px;
}

/* --- Cards ------------------------------------------------------------
   De-boxed (Ben, 2026-08-11: "too boxy"). Items are open editorial
   blocks — a thin lime rule on the left, no fill, no border, no shadow —
   so the typography, not the container, does the work. */
.cards-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px 72px;
}

.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 56px;
}

.cards-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px 36px;
}

.card {
  background: none;
  border: 0;
  border-left: 3px solid var(--lime);
  border-radius: 0;
  padding: 6px 0 6px 32px;
  display: flex;
  gap: 26px;
  align-items: flex-start;
  box-shadow: none;
  transition: background-color 0.25s ease;
}

.card:hover,
.card:focus-visible,
.card:focus-within {
  background-color: rgba(255, 255, 255, 0.03);
}

.card:focus-visible,
.card:focus-within {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.card h4 {
  color: var(--text);
  font-size: 34px;
  margin-bottom: 12px;
}

.card p {
  font-size: 26px;
  color: var(--mist);
}

/* Chips are bare lime icons now — the boxed plate went with the cards.
   The fixed width keeps text columns aligned across sibling cards. */
.chip {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 0;
  border: 0;
  background: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lime);
  font-size: 52px;
}

/* logo artwork still needs a white plate to sit on */
.chip-white {
  width: 78px;
  height: 78px;
  border-radius: 20px;
  background: #ffffff;
}

/* stacked (icon above text) card variant */
.card.stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

/* --- Stage cards (T-Minus-15) ----------------------------------------
   Open columns under a thin lime top rule, like a magazine process
   spread, instead of five filled boxes. */
.stage {
  position: relative;
  background: none;
  border: 0;
  border-top: 3px solid var(--lime);
  border-radius: 0;
  padding: 104px 18px 0 2px;
  box-shadow: none;
}

.stage .step {
  position: absolute;
  top: 16px;
  left: 2px;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 58px;
  /* solid lime — the low-opacity version read as faded/blurred (Ben, 2026-08-11) */
  color: var(--lime);
}

.stage .chip {
  position: absolute;
  top: 26px;
  right: 6px;
  width: 64px;
  height: 64px;
  font-size: 42px;
}

.stage h4 {
  color: #ffffff;
  font-size: 34px;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}

.stage p {
  font-size: 23px;
  color: var(--mist);
}

/* --- T-Minus-15 lifecycle ribbon (brand asset) --------------------------
   The faceted lime infinity ribbon from the T-Minus-15 book artwork,
   with the five stage descriptions stacked beside it. */
.lifecycle-split {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 72px;
  align-items: center;
}

.lifecycle-art {
  width: 100%;
  height: auto;
  display: block;
}

.lifecycle-stages {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lifecycle-stages .ls {
  display: flex;
  gap: 20px;
  align-items: baseline;
  border-left: 3px solid var(--lime);
  padding: 4px 0 4px 24px;
}

.lifecycle-stages .number {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  color: var(--lime);
  flex: none;
}

.lifecycle-stages h4 {
  color: #ffffff;
  font-size: 24px;
  letter-spacing: 0.12em;
}

.lifecycle-stages p {
  margin-top: 6px;
  font-size: 19px;
  line-height: 1.35;
  color: var(--mist);
}

/* --- Check lists -------------------------------------------------------
   Open rows — the lime check mark is enough structure on its own. */
.checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 72px;
}

.check {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 4px 0;
  font-size: 26px;
  color: #eef1e7;
  line-height: 1.5;
}

.check .ic {
  color: var(--lime);
  font-size: 40px;
  margin-top: 3px;
}

.check strong {
  color: var(--lime);
}

/* Stacked variant — deliverable checks that live under the Delivery card in a
   Purpose/Delivery pair, so every deliverable reads as part of Delivery.
   Single column, tighter rhythm, a little air below the card above. */
.checks-stacked {
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 28px;
}

/* --- Feature rows (Meet Pennie) ---------------------------------------- */
.rows {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.row {
  display: flex;
  gap: 26px;
  align-items: center;
}

.row .chip {
  width: 64px;
  height: 64px;
  font-size: 44px;
}

.row p {
  font-size: 26px;
  color: var(--mist);
}

.row p strong {
  display: block;
  color: #ffffff;
  font-size: 28px;
  font-weight: 800;
}

/* --- Stats -------------------------------------------------------------- */
.stat {
  text-align: left;
}

.stat .stat-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 108px;
  line-height: 1;
  color: var(--lime);
  margin-bottom: 18px;
}

.stat h4 {
  color: #ffffff;
}

/* --- Timeline ------------------------------------------------------------ */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  margin-top: 30px;
}

.timeline::before {
  content: '';
  position: absolute;
  top: -34px;
  left: 2%;
  right: 2%;
  height: 4px;
  background: linear-gradient(90deg, var(--lime) 0%, rgba(157, 254, 10, 0.15) 100%);
}

.timeline-point {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 26px 10px 0 2px;
  box-shadow: none;
}

.timeline-point::before {
  content: '';
  position: absolute;
  top: -46px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 8px rgba(157, 254, 10, 0.18);
}

.timeline-point h4 {
  color: var(--text);
  font-size: 34px;
  margin-bottom: 12px;
}

.timeline-point p {
  font-size: 26px;
  color: var(--mist);
}

/* --- Quote slide ----------------------------------------------------------- */
.quote-mark {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 190px;
  line-height: 0.5;
  color: var(--lime);
  opacity: 0.3;
}

.quote {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 62px;
  line-height: 1.3;
  color: #ffffff;
  max-width: 1180px;
}

.quote em {
  font-style: italic;
  color: var(--lime);
}

/* --- Cover and CTA slides ---------------------------------------------------- */
.cover-hero {
  position: absolute;
  inset: 0;
  background: var(--deck-cover) center / cover no-repeat;
}

.cover-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 22, 17, 0.28) 0%, rgba(20, 22, 17, 0.05) 40%),
    linear-gradient(8deg, rgba(20, 22, 17, 0.94) 12%, rgba(20, 22, 17, 0.35) 55%, transparent 78%);
}

.cover-copy {
  position: absolute;
  left: 96px;
  right: 96px;
  bottom: 92px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.cover-copy h1 {
  font-size: 128px;
  line-height: 1.06;
  color: #ffffff;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.55);
}

.cover-copy h1 em {
  font-style: italic;
  color: var(--lime);
}

.cover-copy .lead {
  font-size: 34px;
  color: #e6e9de;
  max-width: 1150px;
}

/* CTA slide: green top, charcoal bottom — mirrors the house cover */
.cta-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  bottom: 0;
  background: var(--charcoal);
  overflow: hidden;
  padding: 96px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.cta-top::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      90deg,
      rgba(15, 18, 22, 0.94) 0%,
      rgba(15, 18, 22, 0.72) 46%,
      rgba(15, 18, 22, 0.16) 100%
    ),
    var(--deck-hero) center 10% / cover no-repeat;
}

.cta-top > h2 {
  position: relative;
  z-index: 1;
}

.cta-top::after {
  content: '';
  position: absolute;
  top: 430px;
  left: 96px;
  width: 150px;
  height: 4px;
  background: var(--lime);
  box-shadow: 0 0 24px rgba(157, 254, 10, 0.6);
  z-index: 2;
}

.cta-top h2 {
  font-size: 104px;
  line-height: 1.08;
  color: var(--text);
  text-shadow: 0 8px 34px rgba(0, 0, 0, 0.6);
  max-width: 1250px;
  padding-bottom: 30px;
}

.cta-top .logo-dark {
  position: absolute;
  top: 70px;
  right: 96px;
  height: 150px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.cta-bottom {
  position: absolute;
  top: 560px;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 18, 22, 0) 0%,
    rgba(15, 18, 22, 0.88) 22%,
    var(--charcoal) 52%
  );
  padding: 150px 96px 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.cta-button {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 14px;
  padding: 19px 36px;
  background: var(--lime);
  color: var(--ink);
  font-size: 25px;
  font-weight: 800;
  border-radius: 999px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  box-shadow: 0 12px 40px rgba(157, 254, 10, 0.25);
}

.reveal a.cta-button {
  color: var(--ink);
}

.cta-button:hover,
.cta-button:focus-visible {
  transform: scale(1.05);
  box-shadow: 0 18px 56px rgba(157, 254, 10, 0.4);
}

.cta-button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 4px;
}

.cta-button .ic {
  font-size: 28px;
}

.contact-row {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.contact-item {
  display: flex;
  flex: none;
  gap: 18px;
  align-items: center;
  font-size: 25px;
  white-space: nowrap;
  color: var(--mist);
}

.contact-item .ic {
  color: var(--lime);
  font-size: 42px;
}

/* --- Badges / pills -----------------------------------------------------------
   Pills are plain footnote text with a lime dot marker — no capsules. */
.pill-row {
  display: flex;
  gap: 14px 44px;
  flex-wrap: wrap;
  align-items: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  font-size: 21px;
  font-weight: 700;
  color: var(--mist);
  background: none;
  box-shadow: none;
}

.pill::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  opacity: 0.85;
}

.github-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 15px 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 26px;
  font-weight: 700;
  background: none;
  box-shadow: none;
  width: max-content;
}

.github-link .ic {
  font-size: 36px;
}

/* --- Reveal chrome ------------------------------------------------------------ */
.reveal .slide-number {
  font-family: 'Mulish', sans-serif;
  color: var(--lime);
  font-weight: 800;
  font-size: 20px;
  background: rgba(29, 32, 26, 0.75);
  padding: 8px 14px;
  border-radius: 6px;
  /* bottom-left, clear of the nav chevrons that own the bottom-right corner */
  right: auto;
  left: 24px;
  bottom: 18px;
}

.reveal .progress {
  color: var(--lime);
  height: 5px;
}

.reveal .controls {
  color: var(--lime);
  /* Reveal's default puts these hard against the viewport edge, so
     they were clipped half off the slide (Ben, 2026-07-28). */
  right: 24px;
  bottom: 18px;
}

/* --- Small screens -------------------------------------------------------------- */
@media (max-width: 768px) {
  .cards-2,
  .cards-3,
  .cards-5,
  .checks,
  .timeline {
    grid-template-columns: 1fr;
  }
}

/* --- KPI blocks ---------------------------------------------------------------
   Price and duration facts are the headline commercial numbers on a slide,
   so they get a raised surface and real size rather than a row of small
   pills at the bottom. */
.kpi-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: stretch;
}

.kpi {
  flex: 1 1 0;
  min-width: 250px;
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  border-left: 3px solid var(--lime);
  border-radius: 0;
  padding: 18px 26px;
  box-shadow: none;
}

.kpi-val {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 42px;
  line-height: 1.02;
  color: var(--lime);
  white-space: nowrap;
}

.kpi-label {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
}

/* second, sentence-case line under a KPI — day rates, small print */
.kpi-sub {
  margin-top: 8px;
  font-size: 19px;
  font-weight: 600;
  color: var(--mist);
}

/* Hero variant: the price IS the message on this slide, so it gets
   headline scale rather than a small grid chip (Ben, 2026-08-11:
   "We don't do all our engagements for £2,000?!"). */
.kpi-row.kpi-hero .kpi {
  padding: 28px 36px 24px;
}

.kpi-row.kpi-hero .kpi-val {
  font-size: 80px;
}

.kpi-row.kpi-hero .kpi-label {
  margin-top: 12px;
  font-size: 21px;
}

/* Denser content rhythm so KPI-heavy slides stay inside the frame. */
.content {
  padding: 62px 96px calc(16px + var(--ctl-band));
  gap: 26px;
}

/* Sparse slides: centring short content mid-frame left a dead band of
   150–200px under the title (review, 2026-08). These slides top-align
   instead, with a slightly looser rhythm so they still fill the frame. */
.content.content-top {
  justify-content: flex-start;
  padding-top: 56px;
  gap: 52px;
}

/* --- Slide lead statement ------------------------------------------------------
   One statement per slide, given real size, so the eye has somewhere to land. */
.content .lead {
  font-size: 34px;
  line-height: 1.45;
  color: #dbe3ea;
  max-width: 1500px;
}

/* --- Scene backgrounds ----------------------------------------------------------
   Every content slide carries a unique futuristic scene, uniformly treated:
   a heavy dark scrim so the image registers as depth rather than a picture,
   plus the same subtle lime glow at the foot of the frame as the cover
   (Ben, 2026-08-11 — scene-atrium's subtlety is the bar).
   Full-bleed: the scene covers the whole slide, header included. */
.reveal .slides > section.scene {
  isolation: isolate;
}

.reveal .slides > section.scene::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(
      0deg,
      rgba(157, 254, 10, 0.1) 0%,
      rgba(157, 254, 10, 0.03) 16%,
      transparent 32%
    ),
    linear-gradient(
      180deg,
      rgba(11, 13, 16, 0.8) 0%,
      rgba(11, 13, 16, 0.48) 50%,
      rgba(11, 13, 16, 0.86) 100%
    ),
    var(--scene);
  background-size: cover, cover, cover;
  background-position: center, center, center;
}

/* Statement slides paint their own charcoal; drop it so the scene shows. */
.reveal .slides > section.scene .dark-inner {
  background: none;
}

/* --- Full-bleed deck hero slide -------------------------------------------------- */
.hero-bleed {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(15, 18, 22, 0.94) 0%,
      rgba(15, 18, 22, 0.72) 46%,
      rgba(15, 18, 22, 0.2) 100%
    ),
    var(--deck-hero) center 10% / cover no-repeat;
}

/* Sequenced auto-reveal: items arrive one at a time when the slide
   does, with no clicking. Reduced-motion users get them at once. */
.reveal .slides > section .seq {
  opacity: 0;
}
.reveal .slides > section.present .seq {
  animation: seq-in 0.52s cubic-bezier(0.22, 0.68, 0.32, 1) both;
  animation-delay: calc(var(--seq-i, 0) * 0.16s);
}
@keyframes seq-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal .slides > section .seq,
  .reveal .slides > section.present .seq {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

/* --- Floating per-slide CTA (injected by knowall-deck.js) ---------------------- */
.reveal .slides > section .slide-cta {
  position: absolute;
  right: 204px;
  bottom: 24px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border: 1px solid rgba(157, 254, 10, 0.72);
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink) !important;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

/* knowall-deck.js hides the pill on slides whose content needs the room */
.slide-cta.is-clashing {
  display: none;
}

.slide-cta:hover,
.slide-cta:focus-visible {
  background: #b4ff3d;
  color: var(--ink) !important;
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

/* --- Barely-there drift on full-bleed agent imagery ----------------------------
   Enough that the picture breathes under the words; not enough to read as an
   effect. Off entirely for prefers-reduced-motion. */
@keyframes deck-drift {
  from {
    transform: scale(1.001);
  }
  to {
    transform: scale(1.055);
  }
}

.reveal .slides > section.present .cover-hero,
.reveal .slides > section.present .cta-top::before,
.reveal .slides > section.present .dark-inner.with-agent::before {
  animation: deck-drift 30s ease-out both;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .reveal .slides > section.present .cover-hero,
  .reveal .slides > section.present .cta-top::before,
  .reveal .slides > section.present .dark-inner.with-agent::before {
    animation: none;
  }
}

/* eir business supplies a cream-on-teal lockup; give it its brand plate. */
.logo-plate--eir {
  background: #005c63;
}
.logo-plate--eir img {
  max-height: 64px;
}