@font-face {
  font-family: "PP Neue Montreal";
  src: url("assets/fonts/PPNeueMontreal-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Montreal";
  src: url("assets/fonts/PPNeueMontreal-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

.msc-reel {
  color-scheme: dark;
  --msc-primary: #fff;
  --msc-secondary: rgba(255, 255, 255, 0.78);
  --msc-alternative: rgba(255, 255, 255, 0.5);
  --msc-background: #000;
  --msc-highlight: #c9fbc6;
}

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

.msc-reel {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  outline: none;
  background: var(--msc-background);
  color: var(--msc-secondary);
  font-family: "PP Neue Montreal", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  touch-action: none;
  contain: layout paint size style;
}

.msc-reel .selected-container {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  transform-origin: center;
  will-change: transform;
  contain: layout paint size style;
}

.msc-reel .selected-content {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  justify-content: center;
  width: max-content;
  height: 100svh;
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: 0;
  transform: translateZ(0);
  transform-style: preserve-3d;
  will-change: transform;
  contain: layout paint;
}

.msc-reel .selected-item-outer {
  --pad: 0px;
  display: block;
  flex: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.msc-reel .selected-item-inner {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  justify-content: flex-end;
  width: 100%;
  min-width: 0;
  gap: 1.5rem;
  color: inherit;
  text-decoration: none;
}

.msc-reel .selected-item-header {
  display: flex;
  flex: none;
  flex-flow: column;
  min-width: 24vw;
  max-width: 24vw;
  gap: 1rem;
}

.msc-reel .selected-title {
  display: -webkit-box;
  width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--msc-primary);
  font: 500 19.2px/24px "Syne", "PP Neue Montreal", Arial, sans-serif;
  letter-spacing: 0;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.msc-reel .selected-item-details {
  display: flex;
  flex-flow: column;
  width: 65%;
  gap: 0.125rem;
}

/* Red Hat Text, not PP Neue Montreal. The client and discipline lines are the
   site's own voice rather than the captured template's, and Red Hat Text is what
   every other surface sets body copy in — it is self-hosted, so no extra request.
   The `font` shorthand is kept because it also carries size and line-height;
   changing only font-family here would have left the shorthand overriding it. */
.msc-reel .body-sm {
  color: var(--msc-secondary);
  font: 400 12px/16px "Red Hat Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.msc-reel .body-sm.selected-subtitle {
  color: var(--msc-secondary);
  font-size: 14px;
  line-height: 18px;
  white-space: pre-wrap;
}

.msc-reel .body-sm.disabled {
  color: var(--msc-alternative);
}

/* The "Case-study →" affordance that stood here is gone — markup, reveal tween
   and styles together. It was the captured template's, and it promised a
   destination none of these cards have: every href in PROJECTS is still "#".
   It only ever showed below 991px, so this is a mobile-only change.
   Restoring it means putting back cardMarkup's <span class="case-study-url-
   selected">, the ARROW_ICON constant, and the cta tweens in
   revealVisibleCards — not just these rules. */

.msc-reel .selected-visual {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  margin-inline: calc(var(--pad, 0px) * -1);
  aspect-ratio: 3.5 / 4;
  overflow: clip;
}

.msc-reel .selected-item-visual {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%) translateX(var(--drift, 0px));
  will-change: transform;
}

.msc-reel .selected-item-outer,
.msc-reel .selected-item-inner,
.msc-reel .selected-visual,
.msc-reel .selected-item-visual {
  transition: none !important;
}

.msc-reel .text-mask {
  display: block;
  width: 100%;
  overflow: hidden;
}

.msc-reel .split-line {
  display: block;
  white-space: inherit;
}

.msc-reel .split-line.is-truncated {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msc-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, opacity;
  mix-blend-mode: normal;
  background: transparent;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: background-color 180ms ease, backdrop-filter 180ms ease,
    -webkit-backdrop-filter 180ms ease;
}

.msc-cursor.is-card {
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(24px) saturate(0.9);
  backdrop-filter: blur(24px) saturate(0.9);
}

.msc-cursor__dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
  border: 0;
  box-shadow: none;
  transform: scale(0.28);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.msc-cursor__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0.12em;
  border-radius: 50%;
  color: #fff;
  background: transparent;
  font-family: "Red Hat Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 160ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.msc-cursor.is-card .msc-cursor__dot {
  transform: scale(1);
}

.msc-cursor.is-card .msc-cursor__label {
  opacity: 1;
  transform: scale(1);
}

@media (pointer: fine) {
  .msc-reel,
  .msc-reel * {
    cursor: none;
  }

  .msc-cursor {
    display: flex;
  }
}

@media screen and (max-width: 991px) {
  .msc-reel .selected-item-header {
    min-width: 68vw;
    max-width: 68vw;
  }

  .msc-reel .selected-item-details {
    width: 40%;
  }
}

@media screen and (max-width: 767px) {
  .msc-reel .selected-visual {
    aspect-ratio: 3 / 4;
  }

  .msc-reel .selected-item-details {
    width: 100%;
  }
}

@media screen and (min-width: 1600px) {
  .msc-reel .selected-title {
    font-size: 25.6px;
    line-height: 30.4px;
  }

  .msc-reel .body-sm {
    font-size: 14px;
    line-height: 20px;
  }
}

@media screen and (min-width: 1920px) {
  .msc-reel .selected-title {
    font-size: 32px;
    line-height: 36.8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .msc-reel .selected-item-visual {
    transform: translate(-50%, -50%);
  }
}