/* ================= Case study pages ================= */
@font-face { font-family: "Hanken Grotesk"; font-weight: 400; font-display: swap; src: url("../fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); }

.cs-page { min-height: 100vh; }

/* close (lock screen + deck) */
.cs-close {
  position: fixed; z-index: 60;
  top: max(20px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right));
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--black); background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  transition: background .2s ease, transform .2s ease, opacity .3s ease;
}
.cs-close svg { width: 16px; height: 16px; }
.cs-close:hover { background: #fff; transform: rotate(90deg); }
.cs-close:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }

/* ---------- Lock screen ---------- */
.lock { min-height: 100vh; display: grid; place-items: center; padding: 80px 20px; }
.lock__box { width: min(520px, 100%); }
.lock__eyebrow {
  font: 600 12px/1 var(--sans); letter-spacing: var(--track); text-transform: uppercase;
  color: var(--grey); display: flex; align-items: center; gap: 10px;
}
.lock__eyebrow svg { width: 12px; height: 12px; }
.lock__title { margin-top: 24px; font: 400 clamp(40px, 5vw, 68px)/1.05 var(--serif); letter-spacing: -0.02em; }
.lock__title.is-red { color: var(--sit-red); }
.lock__text { margin-top: 20px; font: 400 15px/1.5 var(--sans); color: var(--grey-dark); }
.lock__form { margin-top: 40px; display: flex; border-bottom: 1px solid var(--black); }
.lock__form input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: 400 16px/1 var(--sans); letter-spacing: .2em; padding: 14px 0;
}
.lock__form input::placeholder { letter-spacing: var(--track); color: #b3b3b3; text-transform: uppercase; font-size: 12px; font-weight: 600; }
.lock__form button {
  border: 0; background: transparent; cursor: pointer;
  font: 600 12px/1 var(--sans); letter-spacing: var(--track); text-transform: uppercase;
  padding: 14px 0 14px 16px; display: flex; align-items: center; gap: 10px;
}
.lock__form button svg { width: 14px; height: 14px; transition: transform .3s ease; }
.lock__form button:hover svg { transform: translateX(4px); }
.lock__form button:disabled { opacity: .4; cursor: progress; }
.lock__error { min-height: 22px; margin-top: 12px; font: 400 13px/1.5 var(--sans); color: var(--sit-red); }
.lock__help { margin-top: 28px; font: 400 13px/1.5 var(--sans); color: var(--grey); }
.lock__help a { color: var(--black); border-bottom: 1px solid currentColor; }
.lock.shake .lock__form { animation: shake .4s; }
@keyframes shake { 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }

/* ---------- Deck (full-screen slideshow) ---------- */
.cs-page.is-unlocked { background: #000; overflow: hidden; height: 100vh; height: 100dvh; }
.deck { position: fixed; inset: 0; background: #000; user-select: none; -webkit-user-select: none; }
.deck__stage {
  position: absolute; left: 50%; top: 50%;
  width: min(100vw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9; transform: translate(-50%, -50%);
  cursor: pointer;
}
.slide { position: absolute; inset: 0; overflow: hidden; container-type: inline-size; background: #000; }
.slide img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.hotspot { position: absolute; display: block; border-radius: 4px; cursor: pointer; z-index: 3; }
.hotspot:hover { background: rgba(255,255,255,.15); }
.hotspot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* search-bar word ticker (rebuilt from the Figma prototype) */
.ticker { position: absolute; overflow: hidden; background: #fff; z-index: 2; }
.ticker__list { position: absolute; left: 0; top: 0; right: 0; will-change: transform; }
.ticker__list span {
  display: flex; align-items: center; height: var(--pitch);
  padding-left: var(--pad); white-space: nowrap;
  font: 400 var(--fs)/1 "Hanken Grotesk", "Roboto", sans-serif; color: #5c80de;
}
.ticker--fade .ticker__list span { transition: opacity .9s ease; opacity: 0; }
.ticker--fade .ticker__list span.is-on { opacity: 1; }
.blink { position: absolute; background: #fff; z-index: 2; opacity: 0; }
.slide.is-active .blink { animation: blink 1.06s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: 1; } }

/* controls */
.deck__ui { position: fixed; inset: 0; pointer-events: none; z-index: 50; transition: opacity .35s ease; }
.deck-idle .deck__ui, .deck-idle .cs-close { opacity: 0; pointer-events: none; }
.deck-idle .deck__stage { cursor: none; }
.deck__ui > * { pointer-events: auto; }
.deck__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  color: #000; background: rgba(255,255,255,.85);
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  transition: background .2s ease, opacity .2s ease;
}
.deck__nav svg { width: 18px; height: 18px; }
.deck__nav:hover { background: #fff; }
.deck__nav:disabled { opacity: 0; pointer-events: none; }
.deck__nav--prev { left: max(20px, env(safe-area-inset-left)); }
.deck__nav--next { right: max(20px, env(safe-area-inset-right)); }
.deck__nav:focus-visible, .deck__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.deck__bar {
  position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 6px;
  background: rgba(20,20,20,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 999px; color: #fff;
}
.deck__count { font: 600 12px/1 var(--sans); letter-spacing: .12em; padding: 0 12px; font-variant-numeric: tabular-nums; }
.deck__btn {
  display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
  height: 36px; padding: 0 14px; border-radius: 999px;
  font: 600 11px/1 var(--sans); letter-spacing: var(--track); text-transform: uppercase;
  color: #fff; background: transparent; transition: background .2s ease;
}
.deck__btn:hover { background: rgba(255,255,255,.14); }
.deck__btn svg { width: 14px; height: 14px; }
.deck__btn--next-cs { background: #fff; color: #000; }
.deck__btn--next-cs:hover { background: #e9e9e9; }
.deck__btn--next-cs[hidden] { display: none; }

/* end-of-deck card: shown over the last slide when "next" is pressed */
.deck__end {
  position: fixed; inset: 0; z-index: 55; display: grid; place-items: center;
  background: rgba(0,0,0,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; text-align: center; padding: 24px;
}
.deck__end p { font: 600 12px/1 var(--sans); letter-spacing: var(--track); text-transform: uppercase; color: rgba(255,255,255,.6); }
.deck__end h2 { margin: 18px 0 32px; font: 400 clamp(36px, 5vw, 64px)/1.05 var(--serif); letter-spacing: -0.02em; }
.deck__end .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.deck__end a, .deck__end button {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 999px; cursor: pointer;
  font: 600 12px/1 var(--sans); letter-spacing: var(--track); text-transform: uppercase;
  border: 1px solid #fff; color: #000; background: #fff;
}
.deck__end .ghost { background: transparent; color: #fff; }

.cs-page.is-unlocked .cs-close { color: #fff; background: rgba(20,20,20,.72); border-color: rgba(255,255,255,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

@media (hover: none) {
  .deck__nav { width: 44px; height: 44px; opacity: .85; }
}
@media (max-width: 700px) {
  .deck__nav { display: none; } /* tap left/right half or swipe on phones */
  .deck__btn .lbl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__list { transition: none !important; }
  .slide.is-active .blink { animation: none; }
}
.deck__end a, .deck__end button { white-space: nowrap; }
.deck__end svg { width: 14px; height: 14px; flex: none; }
.ticker__list span { transform: translateY(var(--dy, 0)); }

/* layered slides (videos + foreground layers) & loading state */
.slide__img { position: absolute; inset: 0; }
.slide__video, .slide__layer { position: absolute; display: block; z-index: 1; pointer-events: none; }
.slide__layer { z-index: 1; }
.slide__video { z-index: 0; }
.slide__img { z-index: -1; }
.slide { isolation: isolate; }
.slide__spinner { display: none; }
.slide.is-loading .slide__spinner {
  display: block; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; z-index: 5;
}
@keyframes spin { to { transform: rotate(360deg); } }