/* ── Boardroom backdrop ──
   Beige panelled wall, tan wainscot under a gold rail, navy carpet.
   Everything is anchored to --floor, the line the presenter stands on. */
:root {
  --floor: 150px;
  --wall:       #E8DCC8;
  --wall-shade: #DCCDB2;
  --wainscot:   #CDBB98;
  --carpet:     #1F2A44;
}

.office {
  position: fixed; inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Wall: panel grooves every 160px over a soft top-to-bottom shade */
  background:
    repeating-linear-gradient(90deg,
      transparent 0 158px,
      rgba(31, 42, 68, 0.05) 158px 159px,
      rgba(255, 255, 255, 0.35) 159px 160px),
    linear-gradient(to bottom, #EFE6D6 0%, var(--wall) 45%, var(--wall-shade) 100%);
}

/* Ceiling band with recessed downlights; each light washes the wall below it */
.office-ceiling {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 34px;
  background: #D6C7AB;
  box-shadow: 0 1px 0 rgba(31, 42, 68, 0.12), 0 6px 18px rgba(31, 42, 68, 0.08);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
.office-ceiling i {
  position: relative;
  width: 46px; height: 6px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: #FFF9EE;
  box-shadow: 0 0 10px 2px rgba(255, 246, 225, 0.9);
}
.office-ceiling i::after {
  content: '';
  position: absolute;
  top: 8px; left: 50%;
  width: 280px; height: 380px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 60% at 50% 0%,
    rgba(255, 248, 232, 0.55), rgba(255, 248, 232, 0) 70%);
  pointer-events: none;
}

/* Company plaque on the wall, upper left */
.office-brand {
  position: absolute;
  top: 70px; left: 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--surface-card);
}
.brand-mark { width: 40px; height: 40px; color: #A88B45; }
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--surface-card);
}
.brand-sub {
  font: var(--caption-sm);
  letter-spacing: 0.08em;
  color: #7D6F58;
}

/* Floor-to-ceiling window, right side */
.office-window {
  position: absolute;
  top: 100px;
  right: 4vw;
  bottom: calc(var(--floor) + 110px);
  width: 15vw;
  max-width: 260px;
  box-shadow: 0 10px 30px rgba(31, 42, 68, 0.15);
}
.office-window svg { width: 100%; height: 100%; display: block; }

/* Wainscot: lower wall panelling, capped by a gold chair rail */
.office-wainscot {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--floor);
  height: 110px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 14px,
      rgba(31, 42, 68, 0.10) 14px 15px,
      transparent 15px 146px,
      rgba(255, 255, 255, 0.25) 146px 147px,
      transparent 147px 160px),
    linear-gradient(to bottom, #D5C4A3, var(--wainscot));
  border-top: 3px solid #B8954A;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.25);
}

/* Navy carpet with a skirting board and a faint weave */
.office-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--floor);
  background:
    repeating-linear-gradient(135deg,
      rgba(232, 220, 200, 0.025) 0 2px, transparent 2px 6px),
    linear-gradient(to bottom, #2A3656 0 8px, var(--carpet) 8px, #151D30 100%);
  box-shadow: 0 -1px 0 rgba(31, 42, 68, 0.4);
}

/* Plant in front of the window */
.office-plant {
  position: absolute;
  right: calc(4vw + 7.5vw - 85px);
  bottom: calc(var(--floor) - 34px);
  width: 170px; height: 283px;
  filter: drop-shadow(0 8px 10px rgba(21, 29, 48, 0.35));
}

/* ── Simulation container ── */
.sim {
  position: fixed; inset: 0;
  overflow: hidden;
  z-index: 1;
}
.sim[aria-hidden="true"] { visibility: hidden; }
.sim.active { visibility: visible; }

/* ── World: slides move across the screen like a deck advancing ── */
.world {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  transition: transform var(--t-crawl) var(--ease-out);
  will-change: transform;
  z-index: 2;
}

/* ── Zones ── */
.zone {
  flex: none;
  width: 100vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Top band keeps the tallest card clear of the progress pill */
  padding: 84px var(--sp-lg) 0;
  position: relative;
  z-index: 5;
}

/* Presenter's mark on the carpet */
.zone-marker {
  position: fixed;
  bottom: calc(var(--floor) - 44px);
  left: max(24px, calc(50% - 488px));
  margin-left: 22px;
  z-index: 4;
}
.marker-dot {
  width: 70px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(198, 167, 94, 0.45), rgba(198, 167, 94, 0) 70%);
}
.marker-pulse { display: none; }