@import url("my-bio.css");

/* --------------------------------------------------------------------------
   Selected Work landing + case studies (space schema). Reuse .work-gallery /
   .work-tile on past-work.html; Past Work adds .work-landing-section--past-runway
   for the horizontal runway layout (see .past-work-runway).
   -------------------------------------------------------------------------- */

.work-landing-section {
  position: relative;
  scroll-margin-top: 88px;
  isolation: isolate;
  padding: clamp(32px, 6vw, 56px) 0 clamp(40px, 7vw, 72px);
  color: rgba(238, 232, 220, 0.95);
  overflow: hidden;
  min-height: calc(100vh - 64px);
  background-color: #020510;
}

.work-landing-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("website%20new%20/favicon%20and%20logo/ideogram-v3.0_A_premium_cinematic_futuristic_space_environment_representing_the_mindset_of_a_h-0.jpg");
  background-size: cover;
  background-position: 50% 40%;
  filter: saturate(1.12) brightness(0.88) contrast(1.06);
  transform: scale(1.03);
}

.work-landing-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 48px,
      rgba(0, 255, 255, 0.045) 48px,
      rgba(0, 255, 255, 0.045) 49px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 48px,
      rgba(236, 72, 255, 0.038) 48px,
      rgba(236, 72, 255, 0.038) 49px
    ),
    radial-gradient(
      ellipse 100% 55% at 50% 0%,
      rgba(0, 30, 45, 0.5) 0%,
      transparent 52%
    ),
    radial-gradient(
      ellipse 85% 65% at 100% 85%,
      rgba(2, 4, 18, 0.55) 0%,
      transparent 48%
    ),
    linear-gradient(
      180deg,
      rgba(2, 4, 14, 0.55) 0%,
      rgba(4, 2, 16, 0.68) 50%,
      rgba(2, 5, 12, 0.62) 100%
    );
}

.work-landing-section--parent-gallery {
  --past-work-carousel-viewport-min: min(68vh, 560px);
  --past-work-carousel-gallery-min: min(64vh, 500px);
  /* Allow full-bleed showcase shell; base .work-landing-section uses overflow: hidden */
  overflow: visible;
}

.work-landing-section--parent-gallery::before {
  display: none;
}

.work-landing-section .container {
  position: relative;
  z-index: 1;
}

.work-landing-section--parent-gallery .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;
}

  /* Fun toy box — lab stage bleeds full width; art scales to viewport (see mytoybox.html) */
.work-landing-section.work-landing-section--fun-toybox {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  /* Lab sizes from art + viewport — avoid clipping the toy box bitmap */
  min-height: 0;
  padding-top: clamp(8px, 1.5vh, 16px);
  padding-bottom: clamp(8px, 1.5vh, 16px);
  /* No space wallpaper — only solid fill behind the toy box art */
  overflow: visible;
  background-color: #020510;
}

.work-landing-section.work-landing-section--fun-toybox::before,
.work-landing-section.work-landing-section--fun-toybox::after {
  display: none;
}

.work-page-heading {
  text-align: center;
  max-width: min(44rem, 100%);
  margin: 0 auto clamp(28px, 5vw, 40px);
}

.work-page-heading .experience-section-eyebrow,
.work-page-heading .experience-section-title,
.work-page-heading .experience-section-lede {
  margin-left: auto;
  margin-right: auto;
}

.work-page-heading .experience-section-lede {
  margin-bottom: 0;
}

/* After .work-page-heading so specificity wins over centered defaults */
.work-page-heading.work-page-heading--rail {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
  max-width: min(42rem, 100%);
}

.work-page-heading.work-page-heading--rail .experience-section-eyebrow,
.work-page-heading.work-page-heading--rail .experience-section-title,
.work-page-heading.work-page-heading--rail .experience-section-lede {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

/* --- Gallery grid (3 / 2 / 1 columns) --- */

.work-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2.5vw, 22px);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .work-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .work-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.work-tile {
  display: block;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0, 255, 255, 0.32);
  background: linear-gradient(
    145deg,
    rgba(0, 8, 18, 0.92) 0%,
    rgba(8, 0, 22, 0.88) 100%
  );
  box-shadow:
    0 0 0 1px rgba(236, 72, 255, 0.12) inset,
    0 0 28px rgba(0, 255, 255, 0.08),
    0 12px 32px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.work-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 255, 255, 0.48);
  box-shadow:
    0 0 0 1px rgba(236, 72, 255, 0.2) inset,
    0 0 36px rgba(0, 240, 255, 0.15),
    0 18px 40px rgba(0, 0, 0, 0.45);
}

.work-tile:focus-visible {
  outline: 2px solid rgba(125, 253, 254, 0.9);
  outline-offset: 3px;
}

.work-tile__media {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    rgba(0, 24, 40, 0.95) 0%,
    rgba(20, 0, 36, 0.9) 50%,
    rgba(0, 12, 32, 0.95) 100%
  );
}

.work-tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 35%,
    rgba(2, 4, 14, 0.75) 100%
  );
  z-index: 1;
}

.work-tile__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: relative;
  z-index: 0;
}

/* Dreamium tile art: focal point sits high in frame — bias crop down slightly */
.work-tile__img--dreamium-thumb {
  object-position: 50% 38%;
}

.work-tile__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(14px, 2.5vw, 20px) clamp(14px, 2vw, 18px);
}

.work-tile__title {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #fffef8;
  text-shadow:
    0 0 16px rgba(125, 253, 254, 0.35),
    0 2px 12px rgba(0, 0, 0, 0.6);
}

.work-tile__sector {
  margin: 0;
  font-size: clamp(0.68rem, 1.05vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 220, 140, 0.9);
  text-shadow: 0 0 12px rgba(255, 200, 90, 0.25);
}

.work-tile__explore {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(2, 8, 18, 0.95);
  background: linear-gradient(
    135deg,
    rgba(125, 253, 254, 0.95) 0%,
    rgba(180, 240, 255, 0.88) 100%
  );
  border: 1px solid rgba(125, 253, 254, 0.65);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.25);
}

.work-tile--parent-showcase .work-tile__label {
  padding-bottom: clamp(16px, 2.5vw, 22px);
}

.work-parent-gallery-root:not(.work-parent-gallery-root--grid)
  .work-tile--parent-showcase:hover
  .work-tile__explore,
.work-parent-gallery-root:not(.work-parent-gallery-root--grid)
  .work-tile--parent-showcase:focus-visible
  .work-tile__explore {
  background: linear-gradient(
    135deg,
    #fffef8 0%,
    rgba(125, 253, 254, 0.95) 100%
  );
}

.work-parent-gallery__progress {
  margin: 6px 0 0;
  text-align: center;
  font-family: ui-monospace, "SF Mono", "Menlo", Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(125, 253, 254, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .work-tile {
    transition: none;
  }

  .work-tile:hover {
    transform: none;
  }
}

/* --- Past Work: horizontal “mission runway” (past-work.html only) --- */

.work-landing-section--past-runway {
  overflow-x: visible;
  --past-work-carousel-viewport-min: min(68vh, 560px);
  --past-work-carousel-gallery-min: min(64vh, 500px);
}

.past-work-runway {
  position: relative;
  margin-top: clamp(8px, 2vw, 16px);
  padding-bottom: clamp(8px, 2vw, 16px);
}

/* Pills + Grid/Showcase toggle share one row (desktop); matches career intro rhythm */
.past-work-runway__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px 16px;
  margin: 0 0 clamp(10px, 1.8vw, 16px);
}

.past-work-runway__toolbar .past-work-runway__ticker {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.past-work-runway__ticker {
  display: none;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(6px, 1.2vw, 10px);
  margin: 0 0 clamp(14px, 2.2vw, 22px);
  padding-bottom: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(125, 253, 254, 0.35) rgba(0, 12, 24, 0.35);
  /* Keep pills on one track; scroll horizontally when the row exceeds width */
}

.past-work-runway__ticker::-webkit-scrollbar {
  height: 5px;
}

.past-work-runway__ticker::-webkit-scrollbar-track {
  background: rgba(0, 12, 24, 0.35);
  border-radius: 999px;
}

.past-work-runway__ticker::-webkit-scrollbar-thumb {
  background: rgba(125, 253, 254, 0.35);
  border-radius: 999px;
}

.past-work-runway__ticker-chip {
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-block;
  padding: 5px 9px;
  border-radius: 999px;
  font-family: ui-monospace, "SF Mono", "Menlo", Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 220, 140, 0.88);
  border: 1px solid rgba(125, 253, 254, 0.28);
  background: linear-gradient(
    145deg,
    rgba(0, 20, 36, 0.55) 0%,
    rgba(12, 0, 28, 0.45) 100%
  );
  box-shadow: 0 0 18px rgba(0, 255, 255, 0.08);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

.past-work-runway__ticker-chip:hover,
.past-work-runway__ticker-chip:focus-visible {
  color: #fffef8;
  border-color: rgba(125, 253, 254, 0.52);
  box-shadow: 0 0 22px rgba(0, 255, 255, 0.14);
  outline: none;
}

.past-work-runway__ticker-chip:focus-visible {
  outline: 2px solid rgba(125, 253, 254, 0.65);
  outline-offset: 2px;
}

.past-work-carousel {
  display: block;
}

.past-work-carousel__viewport {
  display: block;
}

.past-work-carousel__btn {
  display: none;
}

.past-work-carousel-shell {
  position: relative;
}

.past-work-carousel__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem 0.75rem;
  margin-bottom: clamp(6px, 1.1vw, 10px);
  padding: 0 4px;
}

.past-work-carousel__header-trailing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem 0.85rem;
  margin-left: auto;
  min-width: 0;
}

.past-work-carousel__header-toggle {
  flex: 0 0 auto;
}

.past-work-carousel__header-start {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.past-work-carousel-pager {
  display: none;
}

.past-work-view-toggle {
  display: inline-flex;
  border-radius: 999px;
  border: 1px solid rgba(125, 253, 254, 0.32);
  overflow: hidden;
  background: linear-gradient(
    145deg,
    rgba(0, 20, 36, 0.55) 0%,
    rgba(12, 0, 28, 0.45) 100%
  );
  box-shadow: 0 0 14px rgba(0, 255, 255, 0.08);
}

.past-work-view-toggle__btn {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 12px;
  margin: 0;
  border: 0;
  background: transparent;
  color: rgba(125, 253, 254, 0.58);
  cursor: pointer;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.past-work-view-toggle__btn:hover,
.past-work-view-toggle__btn:focus-visible {
  color: rgba(125, 253, 254, 0.92);
  outline: none;
}

.past-work-view-toggle__btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(125, 253, 254, 0.45) inset;
}

.past-work-view-toggle__btn.is-active {
  color: rgba(255, 220, 140, 0.95);
  background: rgba(125, 253, 254, 0.14);
  box-shadow: 0 0 12px rgba(125, 253, 254, 0.12);
}

.past-work-view-toggle__btn--grid {
  border-right: 1px solid rgba(125, 253, 254, 0.22);
}

.past-work-carousel__step {
  display: none;
  align-items: center;
  gap: 6px;
}

/* Showcase step controls — match index career timeline (.career-timeline-stepbtn) */
.past-work-carousel__step-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  border-radius: 4px;
  border: 1px solid rgba(125, 253, 254, 0.28);
  background: rgba(4, 14, 24, 0.55);
  color: rgba(200, 255, 255, 0.72);
  cursor: pointer;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.08);
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.past-work-carousel__step-btn:hover,
.past-work-carousel__step-btn:focus-visible {
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 255, 255, 0.5);
  background: rgba(0, 40, 52, 0.65);
  box-shadow:
    0 0 0 1px rgba(0, 255, 255, 0.2),
    0 0 18px rgba(0, 240, 255, 0.22);
  outline: none;
}

.past-work-carousel__step-btn:focus-visible {
  outline: 2px solid rgba(79, 209, 197, 0.9);
  outline-offset: 2px;
}

.past-work-carousel__step-svg {
  display: block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

@media (min-width: 960px) {
  .past-work-runway__ticker {
    display: flex;
  }

  .past-work-carousel-shell {
    width: 100%;
    max-width: min(1320px, 100%);
    margin-left: auto;
    margin-right: auto;
  }

  /* Full-bleed carousel stage (Selected + Past parent gallery, showcase only) */
  .work-landing-section--parent-gallery
    .work-parent-gallery-root:not(.work-parent-gallery-root--grid)
    .past-work-carousel-shell {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: clamp(16px, 4vw, 48px);
    padding-right: clamp(16px, 4vw, 48px);
    box-sizing: border-box;
  }

  .work-landing-section--parent-gallery
    .work-parent-gallery-root:not(.work-parent-gallery-root--grid)
    .past-work-carousel {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .past-work-runway__toolbar {
    display: flex;
  }

  .past-work-runway__toolbar .past-work-runway__ticker {
    margin-bottom: 0;
  }

  /* Grid/Showcase + showcase arrows grouped on the right (toggle immediately left of arrows) */
  .past-work-carousel__header {
    justify-content: flex-end;
    margin-bottom: clamp(4px, 1.2vw, 10px);
  }

  .past-work-carousel__header-start {
    min-height: 0;
  }

  .past-work-carousel__step {
    display: inline-flex;
  }

  .work-parent-gallery-root.work-parent-gallery-root--grid .past-work-carousel__step {
    display: none;
  }

  .past-work-carousel {
    margin-top: clamp(4px, 1.5vw, 12px);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: min(1320px, 100%);
    padding: 0;
    box-sizing: border-box;
  }

  .work-parent-gallery-root:not(.work-parent-gallery-root--grid)
    .past-work-carousel__viewport {
    position: relative;
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    perspective: none;
    min-height: min(58vh, 540px);
    overflow: hidden;
    touch-action: auto;
    cursor: default;
    /* Room for pager row + scaled dots / glow (active dot uses transform + shadow) */
    padding-bottom: clamp(20px, 3vw, 36px);
    overscroll-behavior-y: auto;
  }

  .work-parent-gallery-root:not(.work-parent-gallery-root--grid)
    .past-work-carousel__viewport:active {
    cursor: default;
  }

  .work-parent-gallery-root:not(.work-parent-gallery-root--grid)
    .past-work-carousel
    .work-gallery {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    width: max-content;
    max-width: none;
    min-height: min(50vh, 460px);
    margin: 0;
    padding: clamp(10px, 2vw, 20px) 0 clamp(8px, 1.5vw, 14px);
    list-style: none;
    gap: clamp(12px, 2vw, 20px);
    grid-template-columns: unset;
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  /* Showcase strip: narrower active card vs stage = stronger peek (Tesla-like). */
  .work-parent-gallery-root:not(.work-parent-gallery-root--grid)
    .past-work-carousel
    .work-gallery
    > li {
    position: relative;
    left: auto;
    top: auto;
    flex: 0 0 min(58vw, 720px);
    width: min(58vw, 720px);
    max-width: 720px;
    margin: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    filter: none;
    list-style: none;
  }

  .work-parent-gallery-root:not(.work-parent-gallery-root--grid)
    .past-work-carousel
    .work-tile {
    height: 100%;
    min-height: min(46vh, 420px);
    border-radius: 6px;
    transition:
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.32s ease,
      border-color 0.32s ease;
    transform: none;
    /* Viewport uses cursor: default; cursor inherits — restore link affordance */
    cursor: pointer;
  }

  .work-parent-gallery-root:not(.work-parent-gallery-root--grid)
    .past-work-carousel
    .work-tile:hover,
  .work-parent-gallery-root:not(.work-parent-gallery-root--grid)
    .past-work-carousel
    .work-tile:focus-visible {
    transform: none;
    border-color: rgba(125, 253, 254, 0.52);
    box-shadow:
      0 0 0 1px rgba(236, 72, 255, 0.22) inset,
      0 0 40px rgba(0, 240, 255, 0.14),
      0 20px 44px rgba(0, 0, 0, 0.48);
  }

  .work-parent-gallery-root:not(.work-parent-gallery-root--grid)
    .past-work-carousel
    .work-tile--parent-showcase {
    overscroll-behavior: auto;
    touch-action: auto;
  }

  .work-parent-gallery-root:not(.work-parent-gallery-root--grid)
    .past-work-carousel
    .work-tile__media {
    aspect-ratio: 16 / 9;
    min-height: clamp(200px, 36vh, 380px);
  }

  .work-parent-gallery-root:not(.work-parent-gallery-root--grid)
    .past-work-carousel
    .work-tile__title {
    font-size: clamp(1.05rem, 1.75vw, 1.35rem);
  }

  /* Pager rail: stay inside viewport (full-bleed shell already handles edge padding; 100vw + neg margin was clipped by overflow:hidden on viewport). */
  .work-parent-gallery-root:not(.work-parent-gallery-root--grid)
    .past-work-carousel__viewport
    .past-work-carousel-pager {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5px;
    justify-content: flex-start;
    align-items: center;
    padding: 12px 12px 14px;
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    z-index: 4;
    pointer-events: auto;
  }

  .work-parent-gallery-root:not(.work-parent-gallery-root--grid)
    .past-work-carousel__viewport
    .work-parent-gallery__progress {
    margin: 8px 20px 0;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    min-height: 1.2em;
  }

  /* Clones keep real hrefs; allow click + pointer so the infinite-loop “bookend”
     slides (e.g. Applied Minds) remain usable — tabindex stays -1 from JS. */
  .work-gallery__strip-clone a.work-tile,
  .work-gallery__strip-clone .work-tile {
    pointer-events: auto;
    cursor: pointer;
  }

  .past-work-carousel-pager::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .past-work-carousel-pager-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid rgba(125, 253, 254, 0.4);
    background: rgba(6, 28, 42, 0.9);
    cursor: pointer;
    box-shadow: 0 0 6px rgba(125, 253, 254, 0.12);
    transition:
      transform 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.25s ease,
      background 0.25s ease;
  }

  .past-work-carousel-pager-dot:hover,
  .past-work-carousel-pager-dot:focus-visible {
    border-color: rgba(255, 220, 150, 0.75);
    box-shadow: 0 0 12px rgba(125, 253, 254, 0.35);
    outline: none;
  }

  .past-work-carousel-pager-dot:focus-visible {
    outline: 2px solid rgba(125, 253, 254, 0.65);
    outline-offset: 2px;
  }

  .past-work-carousel-pager-dot.is-active {
    transform: scale(1.35);
    border-color: rgba(255, 220, 150, 0.95);
    background: radial-gradient(
      circle at 35% 30%,
      #fff8e0 0%,
      #ffd98a 45%,
      #0e5564 100%
    );
    box-shadow:
      0 0 14px rgba(255, 210, 130, 0.75),
      0 0 22px rgba(125, 253, 254, 0.4);
  }

  .past-work-carousel-pager-dot[data-near="1"]:not(.is-active) {
    transform: scale(1.12);
    border-color: rgba(125, 253, 254, 0.58);
    opacity: 0.95;
  }

  .past-work-carousel-pager-dot[data-near="2"]:not(.is-active) {
    border-color: rgba(125, 253, 254, 0.38);
    opacity: 0.82;
  }

  .past-work-carousel-pager-dot[data-near="3"]:not(.is-active) {
    opacity: 0.62;
  }

  .work-parent-gallery-root.work-parent-gallery-root--grid .past-work-carousel-pager,
  .work-parent-gallery-root.work-parent-gallery-root--grid .work-parent-gallery__progress {
    display: none;
  }

  .work-parent-gallery-root.work-parent-gallery-root--grid .past-work-carousel__viewport {
    perspective: none;
    min-height: var(--past-work-carousel-viewport-min);
    overflow-x: visible;
    overflow-y: visible;
    touch-action: auto;
    cursor: default;
  }

  .work-parent-gallery-root.work-parent-gallery-root--grid
    .past-work-carousel__viewport:active {
    cursor: default;
  }

  .work-parent-gallery-root.work-parent-gallery-root--grid
    .past-work-carousel
    .work-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2.5vw, 22px);
    min-height: min-content;
    padding: clamp(8px, 1.5vw, 16px) 0 clamp(16px, 3vw, 32px);
  }

  .work-parent-gallery-root.work-parent-gallery-root--grid
    .past-work-carousel
    .work-gallery
    > li {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    margin: 0;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    filter: none;
    transform-style: flat;
    transition: none;
  }

  .work-parent-gallery-root.work-parent-gallery-root--grid .past-work-carousel .work-tile {
    min-height: 0;
    transform: none;
    transition:
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.28s ease,
      border-color 0.28s ease;
    cursor: pointer;
  }

  .work-parent-gallery-root.work-parent-gallery-root--grid
    .past-work-carousel
    .work-tile:hover,
  .work-parent-gallery-root.work-parent-gallery-root--grid
    .past-work-carousel
    .work-tile:focus-visible {
    transform: translateY(-4px);
  }

  .work-parent-gallery-root.work-parent-gallery-root--grid
    .work-gallery
    > li.past-work-grid-tile--sector-hover
    .work-tile,
  .work-parent-gallery-root.work-parent-gallery-root--grid
    .work-gallery
    > li.past-work-grid-tile--sector-active
    .work-tile {
    transform: translateY(-4px);
    border-color: rgba(125, 253, 254, 0.52);
    box-shadow:
      0 0 0 1px rgba(236, 72, 255, 0.22) inset,
      0 0 40px rgba(0, 240, 255, 0.14),
      0 20px 44px rgba(0, 0, 0, 0.48);
  }

  .work-parent-gallery-root.work-parent-gallery-root--grid
    .work-gallery
    > li.past-work-grid-tile--sector-active
    .work-tile {
    border-color: rgba(125, 253, 254, 0.62);
    box-shadow:
      0 0 0 1px rgba(236, 72, 255, 0.28) inset,
      0 0 48px rgba(0, 240, 255, 0.2),
      0 22px 50px rgba(0, 0, 0, 0.52);
  }

  .work-parent-gallery-root.work-parent-gallery-root--grid .past-work-carousel .work-tile__media {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }

  .work-parent-gallery-root:focus-visible {
    outline: 2px solid rgba(125, 253, 254, 0.85);
    outline-offset: 4px;
    border-radius: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-parent-gallery-root:not(.work-parent-gallery-root--grid)
    .past-work-carousel
    .work-gallery {
    transition: none;
  }

  .work-parent-gallery-root:not(.work-parent-gallery-root--grid)
    .past-work-carousel
    .work-tile {
    transition: none;
  }

  .work-parent-gallery-root:not(.work-parent-gallery-root--grid)
    .past-work-carousel
    .work-tile:hover,
  .work-parent-gallery-root:not(.work-parent-gallery-root--grid)
    .past-work-carousel
    .work-tile:focus-visible {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Case study child pages
   -------------------------------------------------------------------------- */

.case-study-page {
  background-color: #020510;
  color: rgba(255, 255, 255, 0.88);
}

/* Premium case study space theme — add class `case-study-page--space-theme` on <body>
   Optional: `data-case-space-pointer="true"` for subtle cursor-linked star drift (JS sets
   --case-space-pointer-x/y on :root; respects prefers-reduced-motion).
   Optional: `data-case-space-preset` for future per-client tuning.
   Stack: .case-space-bg__nebula, __void, __debris (edge debris/slivers), __grid, __planet, __moon,
   __stars--far/mid/near, __meteor, __sparkle (see Hilton case page markup).
   Parallax: --case-space-scroll-y; sparkle: --case-space-twinkle; hero dim layer: --case-hero-scrim-extra (0–1). */
.case-study-page--space-theme {
  --case-space-scroll-y: 0px;
  --case-space-twinkle: 0.65;
  --case-space-pointer-x: 0px;
  --case-space-pointer-y: 0px;
  --case-hero-scrim-extra: 0;
  background-color: #020411;
}

.case-study-page--space-theme .page {
  position: relative;
  z-index: 1;
}

.case-space-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 125% 68% at 50% -9%,
      rgba(10, 42, 62, 0.34) 0%,
      transparent 56%
    ),
    radial-gradient(
      ellipse 78% 52% at 100% 102%,
      rgba(42, 16, 58, 0.2) 0%,
      transparent 51%
    ),
    radial-gradient(
      ellipse 68% 50% at 0% 92%,
      rgba(6, 32, 52, 0.22) 0%,
      transparent 47%
    ),
    linear-gradient(180deg, #030818 0%, #020411 40%, #010308 100%);
}

.case-space-bg__nebula {
  position: absolute;
  inset: -8%;
  animation: case-space-nebula-breathe 100s ease-in-out infinite alternate;
  background:
    radial-gradient(
      circle at 22% 28%,
      rgba(0, 165, 188, 0.055) 0%,
      transparent 43%
    ),
    radial-gradient(
      circle at 78% 18%,
      rgba(130, 80, 175, 0.042) 0%,
      transparent 39%
    ),
    radial-gradient(
      circle at 65% 72%,
      rgba(0, 105, 150, 0.04) 0%,
      transparent 41%
    );
  transform: translate3d(
    0,
    calc(var(--case-space-scroll-y, 0px) * 0.048),
    0
  );
}

/* Deep void / fine grain — slowest parallax stratum */
.case-space-bg__void {
  position: absolute;
  inset: -6%;
  z-index: 0;
  opacity: 0.07;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      -18deg,
      transparent 0,
      transparent 3px,
      rgba(120, 200, 255, 0.04) 3px,
      rgba(120, 200, 255, 0.04) 4px
    ),
    repeating-linear-gradient(
      92deg,
      transparent 0,
      transparent 5px,
      rgba(255, 255, 255, 0.025) 5px,
      rgba(255, 255, 255, 0.025) 6px
    );
  mask-image: radial-gradient(
    ellipse 92% 82% at 50% 44%,
    #000 0%,
    transparent 78%
  );
  transform: translate3d(
    0,
    calc(var(--case-space-scroll-y, 0px) * 0.026),
    0
  );
}

/* Distant debris — soft slivers + foil hints; masked to edges; parallax between void and grid */
.case-space-bg__debris {
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    linear-gradient(
      156deg,
      transparent 47.8%,
      rgba(185, 225, 255, 0.07) 49.1%,
      rgba(140, 190, 230, 0.05) 50.9%,
      transparent 52.2%
    ),
    linear-gradient(
      128deg,
      transparent 58%,
      rgba(160, 200, 240, 0.055) 59.4%,
      transparent 60.8%
    ),
    linear-gradient(
      168deg,
      transparent 71%,
      rgba(120, 175, 215, 0.045) 72.2%,
      transparent 73.4%
    ),
    linear-gradient(
      84deg,
      transparent 24%,
      rgba(90, 130, 175, 0.05) 25.8%,
      rgba(110, 155, 200, 0.04) 27.2%,
      transparent 29%
    ),
    linear-gradient(
      96deg,
      transparent 78%,
      rgba(100, 145, 190, 0.045) 79.5%,
      transparent 81%
    ),
    radial-gradient(
      ellipse 22% 18% at 4% 38%,
      rgba(70, 110, 160, 0.07) 0%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 18% 20% at 96% 62%,
      rgba(80, 120, 170, 0.065) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 14% 16% at 8% 88%,
      rgba(60, 95, 140, 0.055) 0%,
      transparent 68%
    );
  background-size: 100% 100%;
  background-repeat: no-repeat;
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 10%,
    rgba(0, 0, 0, 0.45) 24%,
    transparent 40%,
    transparent 60%,
    rgba(0, 0, 0, 0.45) 76%,
    #000 90%,
    #000 100%
  );
  mask-size: 100% 100%;
  transform: translate3d(
    calc(var(--case-space-pointer-x, 0px) * 0.12),
    calc(var(--case-space-scroll-y, 0px) * 0.048),
    0
  );
}

.case-space-bg__grid {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 56px,
      rgba(0, 220, 240, 0.032) 56px,
      rgba(0, 220, 240, 0.032) 57px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 56px,
      rgba(200, 120, 255, 0.024) 56px,
      rgba(200, 120, 255, 0.024) 57px
    );
  mask-image: radial-gradient(
    ellipse 85% 75% at 50% 45%,
    #000 0%,
    transparent 72%
  );
  transform: translate3d(
    0,
    calc(var(--case-space-scroll-y, 0px) * 0.072),
    0
  );
}

.case-space-bg__planet {
  position: absolute;
  right: -12%;
  bottom: -18%;
  width: min(52vw, 520px);
  height: min(52vw, 520px);
  border-radius: 50%;
  opacity: 0.095;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(175, 205, 255, 0.2) 0%,
    rgba(28, 48, 92, 0.1) 44%,
    rgba(4, 8, 18, 0.07) 62%,
    transparent 74%
  );
  box-shadow:
    inset -18px -18px 55px rgba(0, 20, 40, 0.38),
    0 0 65px rgba(60, 120, 200, 0.06);
  transform: translate3d(
    0,
    calc(var(--case-space-scroll-y, 0px) * 0.084),
    0
  );
}

/* Distant ringed silhouette — separate scroll depth from main planet */
.case-space-bg__moon {
  position: absolute;
  left: -7%;
  top: 6%;
  width: min(30vw, 240px);
  height: min(30vw, 240px);
  border-radius: 50%;
  opacity: 0.06;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 38% 40%,
      rgba(140, 175, 230, 0.22) 0%,
      transparent 52%
    ),
    radial-gradient(
      circle at 55% 55%,
      rgba(20, 35, 72, 0.18) 0%,
      transparent 48%
    );
  box-shadow:
    inset -8px -6px 28px rgba(0, 8, 24, 0.55),
    0 0 0 1px rgba(100, 160, 255, 0.1),
    min(11vw, 88px) 0 0 min(-4.5vw, -36px) rgba(60, 90, 140, 0.07),
    min(11vw, 88px) 0 0 min(-4.2vw, -34px) rgba(160, 200, 255, 0.06);
  transform: translate3d(
    0,
    calc(var(--case-space-scroll-y, 0px) * 0.102),
    0
  );
}

.case-space-bg__stars {
  position: absolute;
  left: 0;
  right: 0;
  top: -10vh;
  height: calc(100% + 35vh);
  background-repeat: repeat;
}

.case-space-bg__stars--far {
  opacity: 0.35;
  animation: case-space-far-drift 140s ease-in-out infinite alternate;
  background-size: 380px 380px;
  background-image:
    radial-gradient(1px 1px at 40px 60px, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 180px 20px, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 220px 140px, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 320px 90px, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 90px 200px, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 280px 240px, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(0.6px 0.6px at 150px 300px, rgba(200, 240, 255, 0.5), transparent),
    radial-gradient(0.6px 0.6px at 350px 320px, rgba(255, 255, 255, 0.35), transparent);
  transform: translate3d(
    0,
    calc(var(--case-space-scroll-y, 0px) * 0.06),
    0
  );
}

.case-space-bg__stars--mid {
  opacity: 0.42;
  background-size: 260px 260px;
  background-image:
    radial-gradient(1.2px 1.2px at 30px 40px, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1px 1px at 120px 100px, rgba(200, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 200px 30px, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 80px 180px, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(0.8px 0.8px at 220px 200px, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.2px 1.2px at 160px 220px, rgba(180, 230, 255, 0.5), transparent);
  transform: translate3d(
    calc(var(--case-space-pointer-x, 0px) * 0.5),
    calc(
      var(--case-space-scroll-y, 0px) * 0.132 +
        var(--case-space-pointer-y, 0px) * 0.42
    ),
    0
  );
}

.case-space-bg__stars--near {
  opacity: 0.38;
  background-size: 180px 180px;
  background-image:
    radial-gradient(1.4px 1.4px at 20px 25px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1px 1px at 90px 70px, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.2px 1.2px at 140px 40px, rgba(200, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 50px 120px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.3px 1.3px at 160px 130px, rgba(255, 240, 220, 0.65), transparent);
  transform: translate3d(
    calc(var(--case-space-pointer-x, 0px) * 0.72),
    calc(
      var(--case-space-scroll-y, 0px) * 0.204 +
        var(--case-space-pointer-y, 0px) * 0.55
    ),
    0
  );
}

/* Occasional meteor streak (pure CSS; disabled under reduced motion) */
.case-space-bg__meteor {
  position: absolute;
  inset: -15%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.case-space-bg__meteor::before {
  content: "";
  position: absolute;
  width: 140%;
  height: 2px;
  top: 26%;
  left: -20%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 235, 255, 0) 38%,
    rgba(230, 248, 255, 0.55) 50%,
    rgba(200, 235, 255, 0) 62%,
    transparent 100%
  );
  filter: blur(0.5px);
  transform: rotate(-31deg) translateX(-60%);
  opacity: 0;
  animation: case-space-meteor 26s linear infinite;
}

/* Brighter accent stars — opacity / glow pulse with scroll via --case-space-twinkle */
.case-space-bg__sparkle {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(circle 2.5px at 9% 14%, rgba(255, 255, 255, 0.98), transparent 62%),
    radial-gradient(circle 1.6px at 86% 11%, rgba(255, 248, 235, 0.95), transparent 58%),
    radial-gradient(circle 2px at 71% 36%, rgba(255, 255, 255, 0.94), transparent 60%),
    radial-gradient(circle 1.3px at 16% 52%, rgba(255, 245, 230, 0.9), transparent 55%),
    radial-gradient(circle 2.2px at 44% 20%, rgba(255, 255, 255, 0.96), transparent 64%),
    radial-gradient(circle 1.7px at 91% 58%, rgba(255, 252, 248, 0.93), transparent 60%),
    radial-gradient(circle 1.4px at 32% 74%, rgba(255, 255, 255, 0.88), transparent 56%),
    radial-gradient(circle 2px at 59% 86%, rgba(255, 248, 242, 0.92), transparent 62%),
    radial-gradient(circle 1.2px at 52% 48%, rgba(255, 255, 255, 0.85), transparent 54%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: calc(0.36 + 0.48 * var(--case-space-twinkle, 0.65));
  filter: drop-shadow(
    0 0 calc(1px + 2.5px * var(--case-space-twinkle, 0.65)) rgba(220, 235, 255, 0.38)
  );
  mix-blend-mode: screen;
  transform: translate3d(
    calc(var(--case-space-pointer-x, 0px) * 0.62),
    calc(
      var(--case-space-scroll-y, 0px) * 0.118 +
        var(--case-space-pointer-y, 0px) * 0.48
    ),
    0
  );
}

@keyframes case-space-nebula-breathe {
  0% {
    opacity: 0.3;
  }

  100% {
    opacity: 0.42;
  }
}

@keyframes case-space-far-drift {
  0% {
    opacity: 0.3;
  }

  100% {
    opacity: 0.39;
  }
}

@keyframes case-space-meteor {
  0%,
  88% {
    opacity: 0;
    transform: rotate(-31deg) translateX(-55%);
  }

  90% {
    opacity: 0.95;
  }

  94% {
    opacity: 0.85;
  }

  97% {
    opacity: 0;
    transform: rotate(-31deg) translateX(55%);
  }

  100% {
    opacity: 0;
    transform: rotate(-31deg) translateX(55%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-space-bg__nebula,
  .case-space-bg__void,
  .case-space-bg__debris,
  .case-space-bg__grid,
  .case-space-bg__planet,
  .case-space-bg__moon,
  .case-space-bg__stars--far,
  .case-space-bg__stars--mid,
  .case-space-bg__stars--near,
  .case-space-bg__sparkle {
    transform: none;
    animation: none;
  }

  .case-space-bg__nebula {
    opacity: 0.36;
  }

  .case-space-bg__void {
    opacity: 0.05;
  }

  .case-space-bg__debris {
    opacity: 0.42;
  }

  .case-space-bg__stars--far {
    opacity: 0.35;
  }

  .case-space-bg__meteor::before {
    animation: none;
    opacity: 0;
  }

  .case-space-bg__sparkle {
    opacity: 0.48;
    filter: drop-shadow(0 0 2.5px rgba(210, 225, 255, 0.32));
  }
}

.case-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: clamp(10px, 1.8vw, 16px) 0 clamp(20px, 3vw, 28px);
  padding: 10px 18px;
  border-radius: 4px;
  font-family: "Barlow", var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 255, 255, 0.95);
  text-decoration: none;
  background: linear-gradient(
    165deg,
    rgba(0, 30, 40, 0.92) 0%,
    rgba(10, 0, 28, 0.94) 100%
  );
  border: none;
  box-shadow:
    0 0 0 1px rgba(0, 255, 255, 0.45),
    0 0 18px rgba(0, 240, 255, 0.18),
    0 0 0 1px rgba(236, 72, 255, 0.14) inset;
  cursor: pointer;
  transition:
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.case-back:hover {
  color: #ffffff;
  box-shadow:
    0 0 0 1px rgba(0, 255, 255, 0.85),
    0 0 28px rgba(0, 240, 255, 0.4),
    0 0 24px rgba(236, 72, 255, 0.22);
  transform: translateY(-1px);
}

.case-back:active {
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgba(0, 255, 255, 0.5),
    0 0 10px rgba(0, 240, 255, 0.14),
    0 0 0 1px rgba(236, 72, 255, 0.12) inset;
}

.case-back:focus-visible {
  outline: 2px solid rgba(79, 209, 197, 0.9);
  outline-offset: 3px;
}

.case-back-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: clamp(10px, 2vw, 16px);
  margin: clamp(10px, 1.8vw, 16px) 0 clamp(20px, 3vw, 28px);
}

.case-back-bar .case-back {
  margin: 0;
}

/* Single CTA (no “back” link): keep the external action on the right like the old two-column bar. */
.case-back-bar > :only-child {
  margin-inline-start: auto;
}

.case-back-bar .case-view-case-study {
  text-transform: none;
  letter-spacing: 0.06em;
  font-size: 12px;
  color: rgba(255, 235, 190, 0.98);
  box-shadow:
    0 0 0 1px rgba(255, 200, 120, 0.45),
    0 0 18px rgba(255, 180, 90, 0.16),
    0 0 0 1px rgba(236, 72, 255, 0.12) inset;
}

.case-back-bar .case-view-case-study:hover {
  color: #fffef8;
  box-shadow:
    0 0 0 1px rgba(255, 220, 150, 0.75),
    0 0 26px rgba(255, 190, 100, 0.28),
    0 0 24px rgba(236, 72, 255, 0.2);
}

.case-back-bar .case-view-case-study:active {
  box-shadow:
    0 0 0 1px rgba(255, 200, 120, 0.5),
    0 0 12px rgba(255, 180, 90, 0.14),
    0 0 0 1px rgba(236, 72, 255, 0.1) inset;
}

/* Prev / next case links — same pill treatment as .case-back (Hilton omits pager; other case pages use this). */
.case-pager {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: clamp(10px, 2vw, 20px);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: clamp(24px, 4vw, 40px);
  margin-bottom: clamp(6px, 1.2vw, 12px);
}

.case-pager .case-back {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
}

/* Middle dot is redundant when prev/next are split to opposite edges */
.case-pager__sep {
  display: none;
}

@media (max-width: 520px) {
  .case-pager .case-back {
    padding-inline: 12px;
    font-size: 10px;
    letter-spacing: 0.07em;
  }
}

/* --------------------------------------------------------------------------
   Past Work — Hilton rail + tile rhythm (body.case-study-page--past-work on past-work/*.html)
   -------------------------------------------------------------------------- */
.case-study-page--past-work .case-narrative .case-media-grid--split {
  max-width: min(1040px, 100%);
  margin-inline: auto;
  box-sizing: border-box;
}

.case-study-page--past-work .case-narrative nav.case-pager {
  max-width: min(1040px, 100%);
  margin-inline: auto;
}

.case-study-page--past-work .case-narrative .case-video-block {
  max-width: min(1040px, 100%);
  margin-inline: auto;
}

/* Past work: lead figure or deck hero sitting directly under .case-narrative (e.g. before §01, between chapters). */
.case-study-page--past-work .case-narrative > .case-figure.case-figure--past-narrative-rail {
  max-width: min(1040px, 100%);
  margin-inline: auto;
  box-sizing: border-box;
  margin-top: clamp(20px, 3vw, 36px);
}

.case-study-page--past-work .case-narrative > .case-figure.case-figure--past-narrative-rail:first-of-type {
  margin-top: clamp(12px, 2.5vw, 24px);
}

/* Past work: lead mockup matches .case-intro-panel width (full narrative column, not 1040 rail). */
.case-study-page--past-work
  .case-narrative
  > .case-figure.case-figure--past-narrative-rail.case-figure--kff-lead-match-intro,
.case-study-page--past-work
  .case-narrative
  > .case-figure.case-figure--past-narrative-rail.case-figure--gf-lead-match-intro {
  max-width: 100%;
  width: 100%;
}

.case-study-page--past-work
  .case-narrative
  > .case-figure.case-figure--past-narrative-rail
  + .case-figure.case-figure--past-narrative-rail {
  margin-top: clamp(16px, 2.5vw, 28px);
}

/* GE Digital · MyTech — extra air between figures, peek carousel, walkthrough, and §01–§04 */
.case-study-page--past-work .case-narrative--ge-mytech.case-narrative > .case-figure.case-figure--past-narrative-rail {
  margin-top: clamp(28px, 4vw, 52px);
  margin-bottom: clamp(48px, 7vw, 88px);
}

.case-study-page--past-work
  .case-narrative--ge-mytech.case-narrative
  > .case-section.case-chapter
  + .case-section.case-chapter {
  margin-top: clamp(52px, 7vw, 96px);
}

.case-study-page--past-work
  .case-narrative--ge-mytech.case-narrative
  > .case-section.case-chapter
  + .case-figure-slider {
  margin-top: clamp(44px, 6vw, 88px);
}

.case-study-page--past-work
  .case-narrative--ge-mytech.case-narrative
  > .case-figure-slider
  + .case-section.case-chapter {
  margin-top: clamp(44px, 6vw, 88px);
}

.case-study-page--past-work
  .case-narrative--ge-mytech.case-narrative
  > .case-section.case-chapter
  + .case-video-block {
  margin-top: clamp(44px, 6vw, 88px);
}

.case-study-page--past-work
  .case-narrative--ge-mytech
  .case-section.case-chapter
  > .case-prose.case-prose--measure
  + .case-figure.case-figure--zoomable {
  margin-top: clamp(40px, 5.5vw, 72px);
  margin-bottom: clamp(40px, 5.5vw, 68px);
}

.case-study-page--past-work.case-study-page--space-theme .case-narrative--ge-mytech.case-narrative > .case-video-block {
  margin-top: clamp(48px, 7vw, 96px);
  margin-bottom: clamp(48px, 7vw, 96px);
}

.case-study-page--past-work.case-study-page--space-theme
  .case-narrative--ge-mytech.case-narrative
  > .case-video-block
  + .case-section.case-chapter {
  margin-top: clamp(40px, 5.5vw, 72px);
}

/* GE · MyTech walkthrough: +20% width vs default past-work video rail (1040 × 1.2) */
.case-study-page--past-work.case-study-page--space-theme
  .case-narrative--ge-mytech.case-narrative
  > .case-video-block.case-video-block--compact.case-video-block--ge-mytech-wide {
  max-width: min(1248px, 96%);
}

.case-study-page--past-work
  .case-narrative--ge-mytech
  .case-section.case-chapter
  > .case-figure.case-figure--ge-mytech-provisioning.case-figure--borderless.case-figure--zoomable {
  max-width: min(1040px, 100%);
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.case-study-page--past-work
  .case-narrative--ge-mytech
  .case-section.case-chapter
  > .case-figure.case-figure--ge-mytech-provisioning.case-figure--borderless.case-figure--zoomable:hover,
.case-study-page--past-work
  .case-narrative--ge-mytech
  .case-section.case-chapter
  > .case-figure.case-figure--ge-mytech-provisioning.case-figure--borderless.case-figure--zoomable:has(
    .case-figure__zoom:focus-visible
  ) {
  border-color: transparent;
  box-shadow: none;
}

.case-study-page--past-work
  .case-narrative--ge-mytech
  .case-figure--ge-mytech-provisioning.case-figure--borderless figcaption {
  margin-top: 10px;
  padding-top: 0;
}

@media (min-width: 720px) {
  .case-study-page--past-work
    .case-narrative--ge-mytech
    .case-section.case-chapter
    > .case-figure.case-figure--ge-mytech-provisioning.case-figure--borderless.case-figure--zoomable
    .case-figure__zoom {
    aspect-ratio: auto;
    overflow: visible;
  }

  .case-study-page--past-work
    .case-narrative--ge-mytech
    .case-section.case-chapter
    > .case-figure.case-figure--ge-mytech-provisioning.case-figure--borderless.case-figure--zoomable
    .case-figure__zoom
    img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }
}

/* --------------------------------------------------------------------------
   GloriFi — Tesla-style trading focus strip (auto-play; minimal chrome variant)
   -------------------------------------------------------------------------- */
.case-study-page--past-work .case-narrative .case-focus-strip {
  max-width: min(680px, 86%);
  margin-inline: auto;
  margin-top: clamp(24px, 4vw, 40px);
  padding: 0 clamp(12px, 4vw, 36px);
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
  box-sizing: border-box;
}

.case-study-page--past-work .case-narrative .case-focus-strip--minimal {
  padding: 0;
}

/* Extra air below Trading experiences (or other) lede before the focus strip */
.case-study-page--past-work
  .case-narrative
  .case-media-lede.case-media-lede--spaced
  + .case-focus-strip {
  margin-top: clamp(36px, 6vw, 64px);
}

/* Shared motion tokens — long ease, no overshoot, item + device + type move as one */
.case-focus-strip {
  --case-focus-strip-dur: 1.2s;
  --case-focus-strip-ease: cubic-bezier(0.45, 0.02, 0.2, 1);
}

.case-focus-strip__strip {
  display: flex;
  flex-direction: row;
  /* Top-align so phone mocks share one horizontal line (flex-end made shorter columns start lower) */
  align-items: flex-start;
  justify-content: center;
  gap: clamp(10px, 1.8vw, 18px);
}

.case-focus-strip__item {
  flex: 1 1 0;
  min-width: 0;
  max-width: 33.333%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: pointer;
  transition:
    opacity var(--case-focus-strip-dur) var(--case-focus-strip-ease),
    transform var(--case-focus-strip-dur) var(--case-focus-strip-ease),
    filter var(--case-focus-strip-dur) var(--case-focus-strip-ease);
  transform-origin: 50% 92%;
  filter: brightness(0.78) saturate(0.92);
}

.case-focus-strip__item--active {
  opacity: 1;
  transform: scale(1.045);
  z-index: 2;
  filter: brightness(1) saturate(1);
}

.case-focus-strip__item:not(.case-focus-strip__item--active) {
  opacity: 0.58;
  transform: scale(0.955);
}

/* Phone mock: active panel lifts and reads bright; inactive sits lower like a muted secondary chart */
.case-focus-strip__item--active .case-focus-strip__device {
  transform: translateY(-4px) scale(1);
  filter: brightness(1.07) saturate(1.04) contrast(1.01);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.case-focus-strip__item:not(.case-focus-strip__item--active) .case-focus-strip__device {
  transform: translateY(3px) scale(0.985);
  filter: brightness(0.78) saturate(0.88) contrast(0.98);
  box-shadow: none;
}

.case-focus-strip__progress-track {
  display: none;
}

/* Used when markup includes .case-focus-strip__progress-bar (optional) */
@keyframes case-focus-strip-progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.case-focus-strip__device {
  align-self: center;
  aspect-ratio: 9 / 19.5;
  border-radius: clamp(18px, 3vw, 26px);
  overflow: hidden;
  border: none;
  background: transparent;
  margin-inline: auto;
  width: 80%;
  max-width: 220px;
  transition:
    transform var(--case-focus-strip-dur) var(--case-focus-strip-ease),
    filter var(--case-focus-strip-dur) var(--case-focus-strip-ease),
    box-shadow var(--case-focus-strip-dur) var(--case-focus-strip-ease);
}

.case-focus-strip__device img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Pin screenshot tops so varying PNG canvas padding does not stagger mocks vertically */
  object-position: top center;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .case-focus-strip {
    --case-focus-strip-dur: 0.28s;
    --case-focus-strip-ease: ease;
  }

  .case-focus-strip__item {
    transition:
      opacity var(--case-focus-strip-dur) var(--case-focus-strip-ease),
      transform var(--case-focus-strip-dur) var(--case-focus-strip-ease),
      filter var(--case-focus-strip-dur) var(--case-focus-strip-ease);
  }

  .case-focus-strip__device {
    transition:
      transform var(--case-focus-strip-dur) var(--case-focus-strip-ease),
      filter var(--case-focus-strip-dur) var(--case-focus-strip-ease),
      box-shadow var(--case-focus-strip-dur) var(--case-focus-strip-ease);
  }

  .case-focus-strip__item--active .case-focus-strip__device {
    transform: translateY(-2px) scale(1);
  }

  .case-focus-strip__item:not(.case-focus-strip__item--active) .case-focus-strip__device {
    transform: translateY(2px) scale(0.99);
  }
}

.case-focus-strip__title {
  width: 100%;
  margin: 14px 0 6px;
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.35;
  transition: color var(--case-focus-strip-dur) var(--case-focus-strip-ease);
}

.case-focus-strip__item--active .case-focus-strip__title {
  color: rgba(255, 255, 255, 0.95);
}

.case-focus-strip__desc {
  width: 100%;
  margin: 0;
  font-size: clamp(11px, 0.85vw, 13px);
  line-height: 1.45;
  max-width: 28ch;
  margin-inline: 0;
  text-align: left;
  color: rgba(255, 255, 255, 0.42);
  transition: color var(--case-focus-strip-dur) var(--case-focus-strip-ease);
}

.case-focus-strip__item--active .case-focus-strip__desc {
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 719px) {
  .case-focus-strip__strip {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .case-focus-strip__item {
    max-width: none;
    flex: none;
  }

  /* Strong active vs inactive so autoplay reads like desktop (avoid flattening both to opacity: 1). */
  .case-focus-strip__item--active {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1) saturate(1);
    z-index: 2;
  }

  .case-focus-strip__item:not(.case-focus-strip__item--active) {
    opacity: 0.56;
    transform: scale(0.97);
    filter: brightness(0.78) saturate(0.9);
  }

  .case-focus-strip__item--active .case-focus-strip__device {
    box-shadow: none;
  }
}

/* GloriFi — banking lead: full intro width, full bitmap (no crop), air before §01. */
.case-study-page--past-work
  .case-narrative
  > .case-figure.case-figure--gf-lead-spacing.case-figure--past-narrative-rail {
  margin-bottom: clamp(36px, 6vw, 72px);
}

.case-study-page--past-work
  .case-narrative
  > .case-figure.case-figure--gf-banking-flow-contain.case-figure--zoomable
  .case-figure__zoom {
  aspect-ratio: auto;
  overflow: visible;
}

@media (min-width: 720px) {
  .case-study-page--past-work
    .case-narrative
    > .case-figure.case-figure--gf-banking-flow-contain.case-figure--zoomable
    .case-figure__zoom
    img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }
}

/* GloriFi — income row + narrative PNGs: larger rail / full width, no crop on zoom. */
.case-study-page--past-work
  .case-narrative
  > .case-figure.case-figure--gf-income-larger.case-figure--zoomable {
  max-width: min(1120px, 100%);
}

.case-study-page--past-work
  .case-narrative
  > .case-figure.case-figure--gf-contain.case-figure--zoomable
  .case-figure__zoom,
.case-study-page--past-work
  .case-section.case-chapter
  > .case-figure.case-figure--gf-full-rail.case-figure--gf-contain.case-figure--zoomable
  .case-figure__zoom {
  aspect-ratio: auto;
  overflow: visible;
}

@media (min-width: 720px) {
  .case-study-page--past-work
    .case-narrative
    > .case-figure.case-figure--gf-contain.case-figure--zoomable
    .case-figure__zoom
    img,
  .case-study-page--past-work
    .case-section.case-chapter
    > .case-figure.case-figure--gf-full-rail.case-figure--gf-contain.case-figure--zoomable
    .case-figure__zoom
    img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }
}

.case-study-page--past-work
  .case-section.case-chapter
  > .case-figure.case-figure--gf-full-rail.case-figure--zoomable {
  max-width: 100%;
  width: 100%;
}

/* GloriFi — mortgage checklist: explicit small rail (must beat .past-narrative-rail max-width: 1040px). */
.case-study-page--past-work
  .case-narrative
  > .case-figure.case-figure--past-narrative-rail.case-figure--gf-contain.case-figure--gf-mortgage-checklist-narrow.case-figure--zoomable {
  width: min(588px, 94vw);
  max-width: min(588px, 94vw);
  margin-inline: auto;
  box-sizing: border-box;
}

.case-study-page--past-work
  .case-narrative
  > .case-figure.case-figure--past-narrative-rail.case-figure--gf-contain.case-figure--gf-mortgage-checklist-narrow.case-figure--zoomable
  .case-figure__zoom {
  max-width: 100%;
}

.case-study-page--past-work
  .case-narrative
  > .case-figure.case-figure--past-narrative-rail.case-figure--gf-contain.case-figure--gf-mortgage-checklist-narrow
  figcaption {
  font-size: 11px;
}

/* GloriFi — extra air between mortgage application figure and §04 */
.case-study-page--past-work
  .case-narrative
  > .case-section.case-chapter[aria-labelledby="gf-s4"] {
  margin-top: clamp(48px, 9vw, 104px);
}

/* Method Studios · Justice League VR — intro meta, wearables strip, platform matrix, hero video, §04 outcome + partnership split */
.case-narrative--method-jlvr.case-narrative .case-meta-row--jlvr-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.5vw, 22px);
  align-items: start;
}

.case-narrative--method-jlvr.case-narrative .case-meta-row--jlvr-trio .case-meta-item {
  min-width: 0;
}

@media (min-width: 880px) {
  .case-narrative--method-jlvr.case-narrative
    .case-meta-row--jlvr-trio
    .case-meta-item:first-child
    dd {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 639px) {
  .case-narrative--method-jlvr.case-narrative .case-meta-row--jlvr-trio {
    grid-template-columns: 1fr;
  }
}

.case-narrative--method-jlvr.case-narrative .case-media-lede--jlvr-wearables {
  margin-top: clamp(8px, 2vw, 18px);
  margin-bottom: clamp(6px, 1.5vw, 14px);
}

.case-narrative--method-jlvr.case-narrative .case-jlvr-device-strip {
  max-width: min(1040px, 100%);
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: clamp(16px, 3vw, 28px);
  box-sizing: border-box;
}

.case-narrative--method-jlvr.case-narrative .case-jlvr-device-strip .case-figure {
  margin: 0;
}

.case-narrative--method-jlvr.case-narrative
  .case-jlvr-device-strip
  .case-figure--jlvr-device.case-figure--zoomable
  .case-figure__zoom {
  aspect-ratio: auto;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.case-narrative--method-jlvr.case-narrative
  .case-jlvr-device-strip
  .case-figure--jlvr-device.case-figure--zoomable
  .case-figure__zoom
  img {
  width: 100%;
  max-height: min(168px, 30vw);
  height: auto;
  object-fit: contain;
  object-position: center;
}

.case-narrative--method-jlvr.case-narrative .case-jlvr-device-strip figcaption {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  color: rgba(255, 255, 255, 0.52);
}

.case-narrative--method-jlvr.case-narrative .case-media-lede--jlvr-hud-readability .case-jlvr-hud-goal-note {
  margin-top: clamp(12px, 2vw, 18px);
  margin-bottom: 0;
  max-width: min(52ch, 100%);
  font-size: clamp(0.86rem, 1.25vw, 0.95rem);
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.62);
}

/* Batmobile + Cyborg HUD rows: same rail, stacked spacing, identical tile geometry */
.case-narrative--method-jlvr.case-narrative .case-media-grid--jlvr-batmobile-hud,
.case-narrative--method-jlvr.case-narrative .case-media-grid--jlvr-cyborg-hud {
  max-width: min(1040px, 100%);
  margin-inline: auto;
  box-sizing: border-box;
}

.case-narrative--method-jlvr.case-narrative .case-media-grid--jlvr-cyborg-hud {
  margin-top: clamp(18px, 3vw, 32px);
}

/*
 * Uniform 16:10 tiles + contain — matches other case-study still rails; less vertical
 * letterboxing than 3:4 while keeping both HUD rows column-aligned (3 + 3).
 */
.case-narrative--method-jlvr.case-narrative
  .case-media-grid--jlvr-batmobile-hud
  > .case-figure--zoomable
  .case-figure__zoom,
.case-narrative--method-jlvr.case-narrative
  .case-media-grid--jlvr-cyborg-hud
  > .case-figure--zoomable
  .case-figure__zoom {
  flex: 0 0 auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 4, 14, 0.55);
  border-radius: 4px;
}

.case-narrative--method-jlvr.case-narrative
  .case-media-grid--jlvr-batmobile-hud
  > .case-figure--zoomable
  .case-figure__zoom
  img,
.case-narrative--method-jlvr.case-narrative
  .case-media-grid--jlvr-cyborg-hud
  > .case-figure--zoomable
  .case-figure__zoom
  img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

.case-narrative--method-jlvr.case-narrative
  .case-media-grid--jlvr-batmobile-hud
  > .case-figure
  figcaption,
.case-narrative--method-jlvr.case-narrative
  .case-media-grid--jlvr-cyborg-hud
  > .case-figure
  figcaption {
  margin-top: 0;
  padding-top: 10px;
}

.case-study-page--past-work
  .case-narrative--method-jlvr.case-narrative
  > .case-video-block--jlvr-feature {
  max-width: 100%;
  width: 100%;
  margin-top: clamp(20px, 3.5vw, 36px);
  margin-bottom: clamp(28px, 5vw, 52px);
}

.case-narrative--method-jlvr.case-narrative
  > .case-video-block--jlvr-feature
  .case-video-embed--jlvr-feature {
  margin-top: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.case-study-page--past-work
  .case-narrative--method-jlvr.case-narrative
  > .case-figure.case-figure--jlvr-platform-matrix {
  max-width: min(1040px, 100%);
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: clamp(12px, 2.5vw, 22px);
  box-sizing: border-box;
}

.case-narrative--method-jlvr.case-narrative
  > .case-figure.case-figure--jlvr-platform-matrix.case-figure--zoomable
  .case-figure__zoom {
  aspect-ratio: auto;
  overflow: visible;
  min-height: 0;
}

.case-narrative--method-jlvr.case-narrative
  > .case-figure.case-figure--jlvr-platform-matrix.case-figure--zoomable
  .case-figure__zoom
  img {
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

/* §04 — outcome copy (left) + partnership creative (right) */
.case-section.case-chapter .case-jlvr-s4-outcome-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 40px);
  margin-top: clamp(28px, 4.5vw, 44px);
  align-items: start;
}

.case-section.case-chapter .case-jlvr-s4-outcome-split__text .case-pull {
  margin-top: 0;
}

.case-section.case-chapter .case-jlvr-s4-outcome-split__text .case-prose--jlvr-s4-outcome {
  max-width: none;
  margin-inline: 0;
}

.case-section.case-chapter
  .case-jlvr-s4-outcome-split__text
  .case-pull
  + .case-prose--jlvr-s4-outcome {
  margin-top: clamp(22px, 3.5vw, 40px);
}

.case-section.case-chapter
  .case-jlvr-s4-outcome-split
  .case-figure--jlvr-partnership-outcome {
  margin: 0;
}

.case-section.case-chapter
  .case-jlvr-s4-outcome-split
  .case-figure--jlvr-partnership-outcome.case-figure--zoomable
  .case-figure__zoom {
  aspect-ratio: auto;
  overflow: visible;
  min-height: 0;
}

.case-section.case-chapter
  .case-jlvr-s4-outcome-split
  .case-figure--jlvr-partnership-outcome.case-figure--zoomable
  .case-figure__zoom
  img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

@media (min-width: 880px) {
  .case-section.case-chapter .case-jlvr-s4-outcome-split {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.46fr);
    gap: clamp(28px, 4vw, 52px);
    align-items: center;
  }
}

.case-study-page--past-work
  .case-narrative--method-jlvr.case-narrative
  > .case-section.case-chapter[aria-labelledby="jl-s1"] {
  margin-top: clamp(20px, 3vw, 32px);
}

.case-study-page--past-work
  .case-narrative--method-jlvr.case-narrative
  .case-section.case-chapter[aria-labelledby="jl-s1"]
  + .case-video-block--jlvr-feature {
  margin-top: clamp(28px, 4.5vw, 48px);
}

.case-study-page--past-work
  .case-narrative--method-jlvr.case-narrative
  .case-media-grid--jlvr-hud-stack
  + .case-section.case-chapter[aria-labelledby="jl-s2"] {
  margin-top: clamp(40px, 6vw, 72px);
}

.case-study-page--past-work
  .case-narrative--method-jlvr.case-narrative
  > .case-section.case-chapter[aria-labelledby="jl-s4"] {
  margin-top: clamp(44px, 7vw, 96px);
}

/* KFF: extra air before §01 (Dell lead) and before §04 (deck hero). */
.case-study-page--past-work .case-narrative > .case-figure.case-figure--kff-space-before-s1 {
  margin-bottom: clamp(40px, 6.5vw, 80px);
}

.case-study-page--past-work .case-narrative > .case-figure.case-figure--kff-space-before-s4 {
  margin-bottom: clamp(40px, 6.5vw, 80px);
}

@media (min-width: 720px) {
  /* Full-rail PNGs; GloriFi uses --gf-contain / --gf-banking-flow-contain for full bitmap (no 16×10 crop). */
  .case-study-page--past-work
    .case-narrative
    > .case-figure.case-figure--past-narrative-rail.case-figure--zoomable:not(
      .case-figure--gf-contain,
      .case-figure--gf-banking-flow-contain,
      .case-figure--od-feature-overview,
      .case-figure--di-pre01
    )
    .case-figure__zoom {
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }

  .case-study-page--past-work
    .case-narrative
    > .case-figure.case-figure--past-narrative-rail.case-figure--zoomable:not(
      .case-figure--gf-contain,
      .case-figure--gf-banking-flow-contain,
      .case-figure--od-feature-overview,
      .case-figure--di-pre01
    )
    .case-figure__zoom
    img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: top center;
  }
}

/* Narrower in-page embed (reference clip), keeps 16×9. */
.case-narrative .case-video-block.case-video-block--compact {
  max-width: min(680px, 92%);
}

/* work/*.html space theme: align YouTube with .case-media-stack / .case-media-mosaic (1040). */
.case-study-page--space-theme
  .case-narrative
  .case-video-block:not(.case-video-block--dfend-prototype) {
  max-width: min(1040px, 100%);
  margin-inline: auto;
  box-sizing: border-box;
}

.case-study-page--space-theme
  .case-narrative
  .case-video-block.case-video-block--compact:not(.case-video-block--dfend-prototype) {
  max-width: min(680px, 92%);
}

/* KFF §02: rarity — full narrative rail + gutters, full image visible (no 16×10 crop). */
.case-study-page--past-work
  .case-narrative
  .case-section.case-chapter
  > .case-figure.case-figure--kff-rarity-contain.case-figure--zoomable {
  max-width: min(1040px, 100%);
}

@media (min-width: 720px) {
  .case-study-page--past-work
    .case-narrative
    .case-section.case-chapter
    > .case-figure.case-figure--kff-rarity-contain.case-figure--zoomable
    .case-figure__zoom {
    aspect-ratio: auto;
    overflow: visible;
  }

  .case-study-page--past-work
    .case-narrative
    .case-section.case-chapter
    > .case-figure.case-figure--kff-rarity-contain.case-figure--zoomable
    .case-figure__zoom
    img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }
}

/* KFF §02: token — full rail, full image visible (no 16×10 crop). */
.case-study-page--past-work
  .case-narrative
  .case-section.case-chapter
  > .case-figure.case-figure--kff-token-contain.case-figure--zoomable {
  max-width: min(1040px, 100%);
}

@media (min-width: 720px) {
  .case-study-page--past-work
    .case-narrative
    .case-section.case-chapter
    > .case-figure.case-figure--kff-token-contain.case-figure--zoomable
    .case-figure__zoom {
    aspect-ratio: auto;
    overflow: visible;
  }

  .case-study-page--past-work
    .case-narrative
    .case-section.case-chapter
    > .case-figure.case-figure--kff-token-contain.case-figure--zoomable
    .case-figure__zoom
    img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }
}

/* Deep Intent — pre-§01 still + §03 prototype: full image visible (no 16×10 crop). */
.case-study-page--past-work
  .case-narrative--deep-intent
  > .case-figure.case-figure--di-pre01.case-figure--zoomable {
  /* hero2.png: ~57.5% of narrative column (50% + 15%); excluded from rail 16×10 crop. */
  width: 57.5%;
  max-width: 57.5%;
  margin-inline: auto;
  margin-bottom: clamp(40px, 6vw, 72px);
  padding-block: clamp(16px, 2.5vw, 28px);
  box-sizing: border-box;
  overflow: visible;
  border-radius: 0;
}

@media (min-width: 720px) {
  .case-study-page--past-work
    .case-narrative--deep-intent
    > .case-figure.case-figure--di-pre01.case-figure--zoomable
    .case-figure__zoom {
    aspect-ratio: auto;
    overflow: visible;
    height: auto;
  }

  .case-study-page--past-work
    .case-narrative--deep-intent
    > .case-figure.case-figure--di-pre01.case-figure--zoomable
    .case-figure__zoom
    img {
    width: 100%;
    height: auto;
    max-height: none;
    min-height: 0;
    object-fit: contain;
    object-position: center;
  }
}

.case-study-page--past-work
  .case-narrative--deep-intent
  .case-section.case-chapter
  > .case-figure.case-figure--di-prototype-natural.case-figure--zoomable {
  max-width: min(1040px, 100%);
}

@media (min-width: 720px) {
  .case-study-page--past-work
    .case-narrative--deep-intent
    .case-section.case-chapter
    > .case-figure.case-figure--di-prototype-natural.case-figure--zoomable
    .case-figure__zoom {
    aspect-ratio: auto;
    overflow: visible;
    height: auto;
  }

  .case-study-page--past-work
    .case-narrative--deep-intent
    .case-section.case-chapter
    > .case-figure.case-figure--di-prototype-natural.case-figure--zoomable
    .case-figure__zoom
    img {
    width: 100%;
    height: auto;
    max-height: none;
    min-height: 0;
    object-fit: contain;
    object-position: center;
  }
}

/* KFF deck hero between §03–§04: a touch wider than the default rail when borderless. */
.case-study-page--past-work
  .case-narrative
  > .case-figure.case-figure--past-narrative-rail.case-figure--borderless {
  max-width: min(1100px, 100%);
}

/* Solo figures still direct under a chapter (e.g. YouTube between images) */
.case-study-page--past-work
  .case-narrative
  .case-section.case-chapter
  > .case-figure.case-figure--zoomable {
  max-width: min(1040px, 100%);
  margin-inline: auto;
  box-sizing: border-box;
  margin-top: clamp(20px, 3vw, 32px);
}

.case-study-page--past-work
  .case-narrative
  .case-prose.case-prose--measure
  + .case-media-grid.case-media-grid--split {
  margin-top: clamp(28px, 4vw, 44px);
}

@media (min-width: 720px) {
  .case-study-page--past-work
    .case-narrative
    .case-section.case-chapter
    > .case-figure.case-figure--zoomable
    .case-figure__zoom {
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }

  .case-study-page--past-work
    .case-narrative
    .case-section.case-chapter
    > .case-figure.case-figure--zoomable
    .case-figure__zoom
    img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: top center;
  }

  .case-study-page--past-work .case-media-grid--split:has(> .case-figure:only-child) {
    grid-template-columns: minmax(0, 1fr);
    max-width: min(720px, 100%);
  }
}

.case-prose.case-prose--footnote {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

.case-prose.case-prose--footnote a {
  color: rgba(125, 253, 254, 0.88);
}

.case-study-main {
  padding-bottom: clamp(48px, 8vw, 88px);
}

.case-study-main .case-hero {
  margin-bottom: 0;
}

.case-hero {
  position: relative;
  width: 100%;
  min-height: min(52vh, 520px);
  max-height: min(70vh, 640px);
  display: flex;
  align-items: flex-end;
  margin: 0 0 clamp(28px, 5vw, 40px);
  background: linear-gradient(
    145deg,
    rgba(0, 20, 36, 0.98) 0%,
    rgba(12, 0, 28, 0.95) 100%
  );
  overflow: hidden;
}

.case-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    145deg,
    rgba(0, 20, 36, 0.98) 0%,
    rgba(12, 0, 28, 0.95) 100%
  );
}

.case-hero__media img,
.case-hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.case-hero__media video {
  z-index: 1;
}

.case-hero__media .case-hero__fallback {
  z-index: 0;
}

/* DFend hero: bias object-fit cover — lower % shifts visible slice down vs prior 62%. */
.case-hero.case-hero--dfend-hero-frame .case-hero__media .case-hero__fallback {
  object-position: 72% 38%;
}

.case-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(2, 4, 12, 0.2) 0%,
    rgba(2, 4, 14, 0.75) 55%,
    rgba(2, 3, 10, 0.92) 100%
  );
}

/* Extra legibility while scrolling through hero; JS sets --case-hero-scrim-extra (0–1). */
.case-study-page--space-theme .case-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(2, 8, 22, 0.42) 58%,
    rgba(0, 4, 14, 0.78) 100%
  );
  opacity: var(--case-hero-scrim-extra, 0);
  transition: opacity 0.45s ease-out;
}

.case-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 48px) 20px;
  box-sizing: border-box;
}

.case-hero__eyebrow {
  margin: 0 0 8px;
  font-family: ui-monospace, "SF Mono", "Menlo", Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 220, 140, 0.88);
}

.case-hero__title {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: clamp(1.35rem, 4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.12;
  text-transform: uppercase;
  color: #fffef8;
  text-shadow:
    0 0 24px rgba(125, 253, 254, 0.3),
    0 0 48px rgba(14, 85, 100, 0.35);
  max-width: 22ch;
}

.case-hero__tagline {
  margin: 0;
  max-width: 36rem;
  font-size: clamp(0.95rem, 1.65vw, 1.1rem);
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

@media (prefers-reduced-motion: reduce) {
  .case-hero__media video {
    display: none;
  }

  .case-study-page--space-theme .case-hero::after {
    opacity: 0;
    transition: none;
  }
}

.case-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 28px);
  margin: 0 0 clamp(28px, 4vw, 36px);
  padding: clamp(18px, 2.5vw, 22px) clamp(18px, 2.5vw, 24px);
  border-radius: 6px;
  border: 1px solid rgba(0, 255, 255, 0.28);
  background: linear-gradient(
    145deg,
    rgba(0, 8, 18, 0.88) 0%,
    rgba(6, 0, 20, 0.82) 100%
  );
  box-shadow:
    0 0 0 1px rgba(236, 72, 255, 0.1) inset,
    0 8px 28px rgba(0, 0, 0, 0.35);
}

.case-meta-item {
  min-width: min(100%, 200px);
}

.case-meta-item dt {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(220, 160, 255, 0.9);
}

.case-meta-item dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.case-section {
  margin: 0 0 clamp(32px, 5vw, 48px);
}

.case-section:last-child {
  margin-bottom: 0;
}

/* Past work — title + subcopy between figures (GloriFi and reusable elsewhere) */
.case-study-page--past-work .case-narrative .case-media-lede {
  max-width: min(720px, 100%);
  margin-inline: auto;
  padding: 0 clamp(12px, 3vw, 20px);
  box-sizing: border-box;
}

.case-study-page--past-work .case-narrative .case-media-lede--spaced {
  margin-top: clamp(28px, 5vw, 56px);
  margin-bottom: clamp(22px, 4vw, 44px);
}

.case-media-lede__title {
  margin: 0 0 12px;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 250, 242, 0.96);
  line-height: 1.28;
}

.case-media-lede__desc {
  margin: 0;
  font-size: clamp(0.9rem, 1.45vw, 1.02rem);
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.68);
  max-width: 52ch;
}

/* Space theme — interstitial headings align with chapter chrome (left rail, gold label + white title). */
.case-study-page--space-theme.case-study-page--past-work .case-narrative .case-media-lede {
  margin-inline: 0;
  max-width: none;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  text-align: left;
}

.case-study-page--space-theme.case-study-page--past-work .case-media-lede::before {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin-bottom: 14px;
  border-radius: 1px;
  background: linear-gradient(
    90deg,
    rgba(125, 253, 254, 0.65),
    rgba(255, 210, 130, 0.45)
  );
  box-shadow: 0 0 12px rgba(125, 253, 254, 0.25);
}

.case-study-page--space-theme.case-study-page--past-work .case-media-lede__title {
  margin: 0 0 12px;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #ffffff;
  text-shadow: 0 0 14px rgba(0, 255, 255, 0.12);
  line-height: 1.28;
}

.case-study-page--space-theme.case-study-page--past-work .case-media-lede__desc {
  max-width: min(42rem, 100%);
  margin: 0;
  font-size: clamp(0.95rem, 1.65vw, 1.05rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  text-align: left;
}

.case-study-page--space-theme.case-study-page--past-work .case-focus-strip__title {
  text-align: left;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: clamp(0.72rem, 1.05vw, 0.88rem);
  font-weight: 700;
  color: rgba(255, 250, 242, 0.96);
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.1);
}

.case-study-page--space-theme.case-study-page--past-work .case-focus-strip__item--active .case-focus-strip__title {
  color: #ffffff;
  text-shadow: 0 0 14px rgba(0, 255, 255, 0.14);
}

.case-study-page--space-theme.case-study-page--past-work .case-focus-strip__desc {
  text-align: left;
  margin-inline: 0;
  max-width: none;
  font-size: clamp(10px, 0.82vw, 12px);
  line-height: 1.48;
  color: rgba(255, 255, 255, 0.55);
}

.case-study-page--space-theme.case-study-page--past-work
  .case-focus-strip__item--active
  .case-focus-strip__desc {
  color: rgba(255, 255, 255, 0.82);
}

/* Scroll reveals — html gets .js-case-reveal-init when motion is allowed (see case study page script) */
html.js-case-reveal-init .case-study-main .case-narrative .case-intro-panel:not(.case-inview),
html.js-case-reveal-init .case-study-main .case-narrative .case-section:not(.case-inview),
html.js-case-reveal-init .case-study-main .case-narrative .case-pull:not(.case-inview),
html.js-case-reveal-init .case-study-main .case-narrative .case-figure:not(.case-inview),
html.js-case-reveal-init .case-study-main .case-narrative .case-figure-slider:not(.case-inview),
html.js-case-reveal-init .case-study-main .case-narrative .case-focus-strip:not(.case-inview),
html.js-case-reveal-init .case-study-main .case-narrative .case-media-lede:not(.case-inview),
html.js-case-reveal-init .case-study-main .case-narrative .case-video-block:not(.case-inview) {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}

.case-study-main .case-narrative .case-inview {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  html.js-case-reveal-init .case-study-main .case-narrative .case-intro-panel:not(.case-inview),
  html.js-case-reveal-init .case-study-main .case-narrative .case-section:not(.case-inview),
  html.js-case-reveal-init .case-study-main .case-narrative .case-pull:not(.case-inview),
  html.js-case-reveal-init .case-study-main .case-narrative .case-figure:not(.case-inview),
  html.js-case-reveal-init .case-study-main .case-narrative .case-figure-slider:not(.case-inview),
  html.js-case-reveal-init .case-study-main .case-narrative .case-focus-strip:not(.case-inview),
  html.js-case-reveal-init .case-study-main .case-narrative .case-media-lede:not(.case-inview),
  html.js-case-reveal-init .case-study-main .case-narrative .case-video-block:not(.case-inview) {
    opacity: 1;
    transform: none;
  }

  .case-study-main .case-narrative .case-inview {
    transition: none;
  }
}

/* Sticky toolbar: reading meter + optional chapter TOC.
 * Glass layer is ::before at 50% opacity so page/space scrolls through; labels stay opaque.
 * Other case pages: copy the toolbar markup, point links at section ids, and set
 * --case-read-pct on :root from scroll progress through main.case-study-main (see Hilton page script). */
.case-study-toolbar {
  position: sticky;
  /* Set from JS --case-toolbar-sticky-top to match real header height (see Hilton scroll script). */
  top: var(--case-toolbar-sticky-top, 88px);
  z-index: 20;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: clamp(10px, 2vw, 16px);
  padding: 10px calc(50vw - 50% + 20px) 12px;
  box-sizing: border-box;
  isolation: isolate;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}

.case-study-toolbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
  -webkit-backdrop-filter: blur(18px) saturate(1.06);
  backdrop-filter: blur(18px) saturate(1.06);
  background: linear-gradient(
    180deg,
    rgba(6, 8, 18, 0.92) 0%,
    rgba(4, 6, 14, 0.88) 100%
  );
  border-bottom: 1px solid rgba(201, 162, 39, 0.28);
  box-shadow:
    0 1px 0 rgba(79, 209, 197, 0.12),
    0 12px 40px rgba(0, 0, 0, 0.35);
}

.case-study-toolbar > * {
  position: relative;
  z-index: 1;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .case-study-toolbar::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(
      180deg,
      rgba(8, 10, 22, 0.94) 0%,
      rgba(5, 7, 16, 0.9) 100%
    );
  }
}

@media (max-width: 1024px) {
  /* Drop 100vw sticky breakout (scrollbar / tablet edge overflow). */
  .case-study-toolbar {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 10px max(16px, env(safe-area-inset-left, 0px)) 12px
      max(16px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }
}

@media (max-width: 720px) {
  .case-study-page .container {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }

  .case-hero__inner {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 719px) {
  .case-media-grid--split,
  .case-media-grid--triple {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-media-grid > .case-figure {
    min-width: 0;
  }

  .case-narrative .case-prose--measure img {
    max-width: 100%;
    height: auto;
  }
}

.case-reading-progress {
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 12px;
}

.case-reading-progress__bar {
  display: block;
  height: 100%;
  width: var(--case-read-pct, 0%);
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(125, 253, 254, 0.95) 0%,
    rgba(255, 210, 130, 0.85) 100%
  );
  transition: width 0.2s ease-out;
}

.case-toc__label {
  margin: 0 0 6px;
  font-family: ui-monospace, "SF Mono", "Menlo", Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 220, 140, 0.75);
}

.case-toc__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-toc__link {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 4px;
  font-family: "Barlow", var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(200, 255, 255, 0.88);
  border: 1px solid rgba(0, 255, 255, 0.28);
  background: linear-gradient(
    165deg,
    rgba(0, 22, 32, 0.75) 0%,
    rgba(8, 0, 22, 0.65) 100%
  );
  box-shadow: 0 0 0 1px rgba(236, 72, 255, 0.08) inset;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

.case-toc__link:hover {
  color: #ffffff;
  border-color: rgba(0, 255, 255, 0.55);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.18);
}

/* Scroll-spy: JS sets aria-current on the chapter in view (Hilton TOC pattern). */
.case-toc__link[aria-current="true"] {
  color: #fffef8;
  border-color: rgba(0, 255, 255, 0.72);
  background: linear-gradient(
    165deg,
    rgba(0, 52, 66, 0.94) 0%,
    rgba(28, 14, 52, 0.92) 100%
  );
  box-shadow:
    0 0 0 2px rgba(125, 253, 254, 0.48),
    0 0 22px rgba(0, 240, 255, 0.26),
    0 0 0 1px rgba(236, 72, 255, 0.12) inset;
}

.case-toc__link[aria-current="true"]:hover {
  color: #ffffff;
  border-color: rgba(0, 255, 255, 0.88);
  box-shadow:
    0 0 0 2px rgba(125, 253, 254, 0.62),
    0 0 28px rgba(0, 240, 255, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.case-toc__link:focus-visible {
  outline: 2px solid rgba(125, 253, 254, 0.9);
  outline-offset: 2px;
}

/* Presentational TOC pills — scroll-spy only; no in-page jump on click */
.case-toc__link--static {
  cursor: default;
  user-select: none;
}

.case-toc__link--static:not([aria-current="true"]):hover {
  color: rgba(200, 255, 255, 0.88);
  border-color: rgba(0, 255, 255, 0.28);
  box-shadow: 0 0 0 1px rgba(236, 72, 255, 0.08) inset;
}

/* Clamped hero parallax — --case-hero-parallax set via JS on space-theme pages */
.case-study-page--space-theme .case-hero__media .case-hero__fallback {
  transform: translate3d(0, var(--case-hero-parallax, 0px), 0);
}

/* Deloitte: COIN hero — nudge cover image down 50px to show more of the frame */
.case-study-page--space-theme
  .case-hero--deloitte-coin-hero
  .case-hero__media
  .case-hero__fallback {
  transform: translate3d(
    0,
    calc(var(--case-hero-parallax, 0px) + 50px),
    0
  );
}

/* GloriFi hero — bias object-fit cover so the mockup handset stays in frame (no hero height change; parallax stays on base fallback rule). */
.case-study-page--space-theme
  .case-hero--glorifi-art
  .case-hero__media
  .case-hero__fallback {
  object-position: 56% 25%;
}

@media (max-width: 719px) {
  .case-study-page--space-theme
    .case-hero--glorifi-art
    .case-hero__media
    .case-hero__fallback {
    object-position: 56% 25%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-study-page--space-theme .case-hero__media .case-hero__fallback {
    transform: none;
  }

  .case-study-page--space-theme
    .case-hero--deloitte-coin-hero
    .case-hero__media
    .case-hero__fallback {
    transform: translate3d(0, 50px, 0);
  }
}

/* Applied Minds — Zoic-style meta row (context / role / timeline) */
.case-narrative--applied-minds .case-meta-row--ami-one-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 clamp(14px, 2.5vw, 28px);
  row-gap: clamp(6px, 1.2vw, 10px);
}

.case-narrative--applied-minds .case-meta-row--ami-one-line .case-meta-item {
  flex: 1 1 auto;
  min-width: min(280px, 100%);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: baseline;
}

@media (min-width: 900px) {
  .case-narrative--applied-minds .case-meta-row--ami-one-line .case-meta-item {
    min-width: 0;
    flex: 1 1 0;
  }

  .case-narrative--applied-minds
    .case-meta-row--ami-one-line
    .case-meta-item:not(:last-child) {
    border-right: 1px solid rgba(125, 253, 254, 0.22);
    padding-right: clamp(14px, 2.2vw, 24px);
    margin-right: 0;
  }
}

.case-narrative--applied-minds .case-meta-row--ami-one-line .case-meta-item dt {
  margin: 0;
  white-space: nowrap;
}

.case-narrative--applied-minds .case-meta-row--ami-one-line .case-meta-item dd {
  margin: 0;
  font-size: clamp(13px, 1.35vw, 14px);
  line-height: 1.45;
}

.case-narrative--applied-minds .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;
}

/* Applied Minds — pager: Disney left; Past Work archive (first tile) right */
.case-narrative--applied-minds nav.case-pager--past-hub {
  flex-wrap: wrap;
  row-gap: clamp(10px, 2vw, 14px);
}

.case-narrative--applied-minds nav.case-pager--past-hub .case-pager__glorifi {
  margin-inline-start: auto;
}

/* ~30% smaller than prior 50% rail (50% × 0.7) */
.case-narrative--applied-minds .case-figure--ami-terrain-lede {
  max-width: 35%;
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 639px) {
  .case-narrative--applied-minds .case-figure--ami-terrain-lede {
    max-width: min(100%, 364px);
  }
}

.case-narrative--applied-minds .case-figure--ami-terrain-lede .case-figure__zoom,
.case-narrative--applied-minds .case-figure--ami-terrain-lede .case-figure__zoom img {
  width: 100%;
}

/* §03 — GM automotive: Super IC–style brief cards (headline + subtitle + // Full brief) */
.case-narrative--applied-minds .case-ami-delivery-auto {
  margin-top: clamp(20px, 3vw, 32px);
}

.case-narrative--applied-minds .case-ami-delivery-auto__eyebrow {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 210, 130, 0.88);
  text-shadow:
    0 0 10px rgba(255, 200, 90, 0.28),
    0 0 18px rgba(0, 255, 255, 0.1);
}

.case-narrative--applied-minds .case-ami-brief-grid {
  display: grid;
  gap: clamp(14px, 2vw, 18px);
  grid-template-columns: 1fr;
  width: 100%;
  margin-top: clamp(14px, 2.2vw, 22px);
  align-items: stretch;
}

@media (min-width: 720px) {
  .case-narrative--applied-minds .case-ami-brief-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.case-narrative--applied-minds .case-ami-brief-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  padding: 16px 16px 14px;
  border-radius: 6px;
  border: 1px solid rgba(0, 255, 255, 0.22);
  background: linear-gradient(
    160deg,
    rgba(0, 10, 24, 0.72) 0%,
    rgba(8, 0, 22, 0.65) 100%
  );
  box-shadow:
    0 0 0 1px rgba(236, 72, 255, 0.08) inset,
    0 8px 24px rgba(0, 0, 0, 0.25);
  scroll-margin-top: clamp(96px, 15vh, 140px);
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

.case-narrative--applied-minds .case-ami-brief-card::before {
  content: attr(data-ami-node);
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: ui-monospace, "SF Mono", "Menlo", Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(0, 255, 255, 0.35);
  pointer-events: none;
}

.case-narrative--applied-minds .case-ami-brief-card:hover,
.case-narrative--applied-minds .case-ami-brief-card:focus-within {
  border-color: rgba(0, 255, 255, 0.48);
  box-shadow:
    0 0 0 1px rgba(236, 72, 255, 0.18) inset,
    0 0 28px rgba(0, 255, 255, 0.14),
    0 12px 32px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.case-narrative--applied-minds .case-ami-brief-card__top {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding-right: 3.25rem;
}

.case-narrative--applied-minds .case-ami-brief-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: rgba(125, 253, 254, 0.9);
  filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.25));
}

.case-narrative--applied-minds .case-ami-brief-card__icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

.case-narrative--applied-minds .case-ami-brief-card__title {
  margin: 0 0 6px;
  font-size: clamp(0.92rem, 1.25vw, 1.02rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #ffffff;
  text-shadow: 0 0 14px rgba(0, 255, 255, 0.18);
}

.case-narrative--applied-minds .case-ami-brief-card__subtitle {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
}

.case-narrative--applied-minds .case-ami-brief-details {
  margin-top: auto;
  border-top: 1px solid rgba(0, 255, 255, 0.12);
  padding-top: 10px;
  overflow-anchor: none;
}

.case-narrative--applied-minds .case-ami-brief-details__summary {
  font-family: ui-monospace, "SF Mono", "Menlo", Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 255, 255, 0.72);
  cursor: pointer;
  list-style: none;
  transition:
    color 0.2s ease,
    text-shadow 0.2s ease;
}

.case-narrative--applied-minds .case-ami-brief-details__summary::-webkit-details-marker {
  display: none;
}

.case-narrative--applied-minds .case-ami-brief-details__summary::before {
  content: "// ";
  color: rgba(236, 72, 255, 0.5);
}

.case-narrative--applied-minds .case-ami-brief-details__summary:hover {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.22);
}

.case-narrative--applied-minds .case-ami-brief-details__summary:focus-visible {
  outline: 2px solid rgba(79, 209, 197, 0.85);
  outline-offset: 3px;
  border-radius: 2px;
}

.case-narrative--applied-minds .case-ami-brief-details__body {
  margin-top: 10px;
}

.case-narrative--applied-minds .case-ami-brief-details__body p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.6;
}

.case-narrative--applied-minds .case-ami-outcome-columns__title {
  margin-top: clamp(28px, 4vw, 40px);
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .case-narrative--applied-minds .case-ami-brief-card:hover,
  .case-narrative--applied-minds .case-ami-brief-card:focus-within {
    transform: none;
  }
}

/* §03 — three-column delivery digest */
.case-narrative--applied-minds .case-ami-outcome-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
  width: 100%;
  margin-top: clamp(18px, 2.8vw, 28px);
}

@media (max-width: 900px) {
  .case-narrative--applied-minds .case-ami-outcome-columns {
    grid-template-columns: 1fr;
  }
}

.case-narrative--applied-minds .case-ami-outcome-col {
  margin: 0;
  padding: clamp(16px, 2.2vw, 22px);
  border-radius: 6px;
  border: 1px solid rgba(0, 255, 255, 0.24);
  background:
    radial-gradient(
      ellipse 110% 70% at 10% 0%,
      rgba(0, 60, 80, 0.14) 0%,
      transparent 52%
    ),
    linear-gradient(
      160deg,
      rgba(0, 8, 20, 0.92) 0%,
      rgba(6, 0, 22, 0.86) 100%
    );
  box-shadow:
    0 0 0 1px rgba(236, 72, 255, 0.08) inset,
    0 8px 26px rgba(0, 0, 0, 0.28);
}

.case-narrative--applied-minds .case-ami-outcome-col__head {
  margin: 0 0 4px;
  font-size: clamp(0.95rem, 1.35vw, 1.08rem);
  font-weight: 700;
  line-height: 1.25;
  color: #fffef8;
  letter-spacing: 0.03em;
}

.case-narrative--applied-minds .case-ami-outcome-col__sub {
  margin: 0 0 clamp(12px, 1.8vw, 16px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 210, 130, 0.88);
}

.case-narrative--applied-minds .case-ami-outcome-dl {
  margin: 0;
}

.case-narrative--applied-minds .case-ami-outcome-dl__row {
  margin: 0 0 clamp(14px, 2vw, 18px);
  padding-bottom: clamp(12px, 1.6vw, 16px);
  border-bottom: 1px solid rgba(0, 255, 255, 0.1);
}

.case-narrative--applied-minds .case-ami-outcome-dl__row:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.case-narrative--applied-minds .case-ami-outcome-dl__row dt {
  margin: 0 0 6px;
  font-size: clamp(0.82rem, 1.15vw, 0.92rem);
  font-weight: 700;
  line-height: 1.35;
  color: rgba(125, 253, 254, 0.92);
}

.case-narrative--applied-minds .case-ami-outcome-dl__row dd {
  margin: 0;
  font-size: clamp(0.84rem, 1.2vw, 0.94rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.case-section__index {
  margin: 0 0 8px;
  font-family: ui-monospace, "SF Mono", "Menlo", Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(125, 253, 254, 0.85);
}

/* When chapter TOC anchors use id on .case-section__index (above the h2), keep
   hash scroll + scrollspy aligned with the sticky header + in-page toolbar. */
.case-study-main .case-section__index[id] {
  scroll-margin-top: clamp(88px, 14vh, 160px);
}

.case-section__kicker {
  margin: 0 0 10px;
  font-size: clamp(0.65rem, 1vw, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 210, 130, 0.92);
}

.case-section__title {
  margin: 0 0 16px;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: #ffffff;
  text-shadow: 0 0 14px rgba(0, 255, 255, 0.12);
}

.case-section > .case-figure:first-child {
  margin-bottom: clamp(20px, 3vw, 32px);
}

/* Deloitte Digital — COIN mark above chapter 01 (no frame; modest centered scale). */
.case-figure--deloitte-coin-mark.case-figure--borderless {
  overflow: visible;
}

.case-figure--deloitte-coin-mark.case-figure--borderless img {
  width: min(720px, 94vw);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.case-figure--deloitte-coin-mark.case-figure--zoomable .case-figure__zoom {
  display: block;
  width: 100%;
  max-width: min(720px, 94vw);
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

/* Third Floor — Cyclops: callout block after 4-up grid in §03 */
.case-narrative .case-prose--cyclops-post-figure {
  margin-top: clamp(32px, 5vw, 56px);
}

/* Dreamium Labs — chapter lead figures above 01 (mirrors Deloitte coin scale). */
.case-figure--dreamium-chapter-lead.case-figure--borderless,
.case-figure--dreamium-chapter-sublead.case-figure--borderless {
  overflow: visible;
}

.case-figure--dreamium-chapter-lead.case-figure--borderless img {
  width: min(300px, 72vw);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.case-figure--dreamium-chapter-sublead.case-figure--borderless img {
  width: min(260px, 62vw);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  margin-top: clamp(0.35rem, 1vw, 0.65rem);
}

.case-narrative .case-figure--dreamium-lead-2648 {
  max-width: min(1040px, 100%);
  margin-inline: auto;
  margin-bottom: clamp(12px, 2vw, 20px);
}

.case-narrative .case-figure--dreamium-rev8 {
  max-width: min(1040px, 100%);
  margin-inline: auto;
  margin-bottom: clamp(16px, 2.5vw, 28px);
}

.case-narrative .case-figure--dreamium-process {
  max-width: min(1040px, 100%);
  margin-inline: auto;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.case-narrative .case-media-stack--dreamium-triptych {
  margin-bottom: clamp(12px, 2vw, 20px);
}

.case-narrative .case-media-stack--dreamium-thumbs {
  margin-top: clamp(16px, 2.5vw, 24px);
  margin-bottom: clamp(20px, 3vw, 32px);
}

.case-narrative .case-figure-slider--dreamium {
  margin-top: clamp(16px, 2.5vw, 24px);
}

.case-study-page--dreamium .case-dreamium-appendix-figures {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: clamp(1.25rem, 3.5vw, 2.25rem);
}

/* Compact award / logo lockup between intro and first chapter (e.g. Cyclops Lumiere) */
.case-narrative > .case-figure--narrow-lockup {
  max-width: min(420px, 88%);
  margin-top: clamp(8px, 1.5vw, 16px);
  margin-bottom: clamp(22px, 3.5vw, 36px);
  margin-inline: auto;
}

.case-figure--narrow-lockup .case-figure__zoom img {
  width: 100%;
  height: auto;
}

.case-study-page--dreamium .case-figure--dreamium-cell-compact {
  max-width: min(240px, 58vw);
}

.case-prose {
  font-size: 15px;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.82);
}

.case-prose p {
  margin: 0 0 1rem;
}

.case-prose p:last-child {
  margin-bottom: 0;
}

/*
 * Premium narrative blocks (Hilton reference: work/hilton-grand-vacations.html):
 * - Chapter: .case-section.case-chapter → .case-section__index, __kicker, .case-section__title
 * - Body copy: .case-prose.case-prose--measure (flow: p, optional ul.case-callout-list)
 * - Pull / key lines: .case-pull as a sibling after .case-prose (do not nest .case-pull inside .case-prose)
 * - Subheads inside a chapter: h3.case-chapter__title as a sibling, then .case-prose again
 */
.case-prose.case-prose--measure > ul.case-callout-list {
  margin-top: 0.35rem;
}

.case-prose.case-prose--measure > ul.case-callout-list + p {
  margin-top: 1rem;
}

.case-prose--after-media {
  margin-top: 1.5rem;
}

/* Generic lists in prose only — avoid overriding .case-callout-list (selected + past work). */
.case-prose ul:not(.case-callout-list) {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
}

.case-prose ul:not(.case-callout-list) li {
  margin-bottom: 8px;
}

.case-prose ul:not(.case-callout-list) li:last-child {
  margin-bottom: 0;
}

.case-prose strong {
  color: #7dfdfe;
  font-weight: 600;
}

/* Match Hilton narrative lists: typography only — no per-row bordered “bars”. */
.case-callout-list {
  list-style: disc;
  margin: 14px 0 0;
  padding: 0 0 0 1.25rem;
  display: block;
}

.case-callout-list li {
  margin: 0 0 10px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-size: 15px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.82);
}

.case-callout-list li:last-child {
  margin-bottom: 0;
}

.case-callout-list li strong {
  color: #7dfdfe;
  font-weight: 600;
}

.case-media-placeholder {
  margin-top: 20px;
  border-radius: 6px;
  border: 1px dashed rgba(0, 255, 255, 0.35);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(125, 253, 254, 0.45);
  background: rgba(0, 8, 20, 0.4);
}

.case-media-grid {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

/*
 * Mosaic row below split grids: same max-width, gap, and 50/50 columns as
 * .case-media-grid--split so gutters line up with the row above.
 */
.case-media-mosaic {
  display: grid;
  gap: 16px;
  margin-top: clamp(28px, 4vw, 40px);
  max-width: min(1040px, 100%);
  margin-inline: auto;
  box-sizing: border-box;
}

.case-media-mosaic .case-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.case-media-mosaic .case-figure--zoomable .case-figure__zoom {
  flex: 1 1 auto;
  min-height: 200px;
  overflow: hidden;
}

.case-media-mosaic .case-figure--zoomable .case-figure__zoom img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
  object-position: top center;
}

.case-media-mosaic .case-figure figcaption {
  flex-shrink: 0;
}

@media (min-width: 720px) {
  .case-media-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .case-media-mosaic__item--wide,
  .case-media-mosaic__item--tall {
    min-width: 0;
  }

  .case-media-mosaic .case-figure--zoomable .case-figure__zoom {
    aspect-ratio: 16 / 10;
    flex: 0 0 auto;
    min-height: 0;
  }

  .case-media-mosaic .case-figure--zoomable .case-figure__zoom img {
    min-height: 0;
  }
}

@media (max-width: 719px) {
  .case-media-mosaic .case-figure--zoomable .case-figure__zoom {
    min-height: 220px;
  }
}

/* DFend §03: mobile prototype Short — 16×10 media area; chrome is parent .case-figure (same as image tiles). */
.case-media-stack--uniform-tiles
  .case-media-grid--split
  > .case-figure--dfend-scout-video
  .case-video-embed--dfend-scout-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  padding-bottom: 0;
  margin-top: 0;
  overflow: hidden;
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}

.case-media-stack--uniform-tiles
  .case-media-grid--split
  > .case-figure--dfend-scout-video
  .case-video-embed--dfend-scout-tile
  iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 720px) {
  /* Slightly wider right column (e.g. DFend tile 2) while keeping uniform tile height */
  .case-media-stack--uniform-tiles
    .case-media-grid--split.case-media-grid--split-emphasis-secondary {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  }

  .case-media-grid--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  /* Same visual height for image tiles so captions line up across columns */
  .case-media-grid--split > .case-figure {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }

  .case-media-grid--split > .case-figure--zoomable .case-figure__zoom {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .case-media-grid--split > .case-figure--zoomable .case-figure__zoom img {
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
    object-position: center;
  }

  .case-media-grid--split > .case-figure figcaption {
    flex-shrink: 0;
  }

  .case-media-grid--triple {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 18px);
    align-items: stretch;
  }

  .case-media-grid--triple > .case-figure {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }

  .case-media-grid--triple > .case-figure--zoomable .case-figure__zoom {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .case-media-grid--triple > .case-figure--zoomable .case-figure__zoom img {
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
    object-position: center;
  }

  .case-media-grid--triple > .case-figure figcaption {
    flex-shrink: 0;
  }

  /*
   * Single 2×2 flow grid + desk/phone grids: same 16:10 image frame on every
   * tile so rows 1–2 match and stills 3–4 align with 1–2 and mockup tiles.
   */
  .case-media-stack--uniform-tiles .case-media-grid--split > .case-figure--zoomable .case-figure__zoom {
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
  }

  .case-media-stack--uniform-tiles .case-media-grid--split > .case-figure--zoomable .case-figure__zoom img {
    min-height: 0;
  }

  .case-media-stack--uniform-tiles .case-media-grid--triple > .case-figure--zoomable .case-figure__zoom {
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
  }

  .case-media-stack--uniform-tiles .case-media-grid--triple > .case-figure--zoomable .case-figure__zoom img {
    min-height: 0;
  }

  /* DFend §03: mobile prototype tile — same 16×10 flex slot as .case-figure--zoomable .case-figure__zoom */
  .case-media-stack--uniform-tiles
    .case-media-grid--split
    > .case-figure--dfend-scout-video
    .case-video-embed--dfend-scout-tile {
    flex: 0 0 auto;
  }

  /* Compact mockup inside a uniform tile (e.g. DFend “Prototype in context”) */
  .case-media-stack--uniform-tiles
    .case-figure--grid-thumb.case-figure--zoomable
    .case-figure__zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(
      ellipse at 50% 28%,
      rgba(0, 80, 100, 0.38) 0%,
      rgba(0, 6, 16, 0.82) 65%
    );
  }

  .case-media-stack--uniform-tiles
    .case-figure--grid-thumb.case-figure--zoomable
    .case-figure__zoom
    img {
    width: auto;
    max-width: 78%;
    max-height: 78%;
    object-fit: contain;
    object-position: center;
  }
}

@media (max-width: 719px) {
  .case-media-grid--triple {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-media-stack--uniform-tiles
    .case-figure--grid-thumb.case-figure--zoomable
    .case-figure__zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
  }

  .case-media-stack--uniform-tiles
    .case-figure--grid-thumb.case-figure--zoomable
    .case-figure__zoom
    img {
    width: auto;
    max-width: 85%;
    max-height: 240px;
    object-fit: contain;
  }
}

/* Case study: horizontal image slider (e.g. Syro Mockuuups series) */
.case-narrative .case-figure-slider {
  margin-top: clamp(20px, 3vw, 28px);
  max-width: min(1040px, 100%);
  margin-inline: auto;
  box-sizing: border-box;
}

.case-narrative .case-figure-slider--syro {
  margin-top: clamp(16px, 2.5vw, 24px);
}

.case-narrative .case-figure-slider--kff {
  margin-top: clamp(20px, 3vw, 32px);
}

/* KFF (and reuse): Tesla-like peek strip — narrower cards, neighbors visible (cf. past-work runway). */
.case-narrative .case-figure-slider--kff.case-figure-slider--tesla-peek {
  max-width: min(1320px, 100%);
}

.case-narrative .case-figure-slider--ge-mytech.case-figure-slider--tesla-peek {
  max-width: min(1320px, 100%);
}

/* GE MyTech carousel: no cyan viewport frame; full screenshots (no fixed-ratio crop) */
.case-figure-slider.case-figure-slider--ge-mytech.case-figure-slider--tesla-peek .case-figure-slider__viewport {
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.case-figure-slider.case-figure-slider--ge-mytech.case-figure-slider--tesla-peek .case-figure-slider__slide .case-figure__zoom {
  aspect-ratio: auto;
  overflow: visible;
}

.case-figure-slider.case-figure-slider--ge-mytech.case-figure-slider--tesla-peek .case-figure-slider__slide .case-figure__zoom img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  background: transparent;
}

.case-figure-slider.case-figure-slider--ge-mytech .case-figure-slider__slide.case-figure.case-figure--zoomable {
  border: none;
  background: transparent;
  overflow: visible;
}

.case-figure-slider.case-figure-slider--ge-mytech
  .case-figure-slider__slide.case-figure.case-figure--zoomable:hover,
.case-figure-slider.case-figure-slider--ge-mytech
  .case-figure-slider__slide.case-figure.case-figure--zoomable:has(.case-figure__zoom:focus-visible) {
  border-color: transparent;
  box-shadow: none;
}

/* Office Depot marketplace — hero: focal point 100px down from center (hero4) */
.case-hero--office-depot-hero .case-hero__media .case-hero__fallback {
  object-position: center calc(50% + 100px);
}

.case-narrative--office-depot .case-figure--od-feature-overview {
  max-width: min(832px, 80%);
  margin-inline: auto;
  margin-bottom: clamp(10px, 2vw, 18px);
}

.case-study-page--past-work
  .case-narrative--office-depot
  .case-figure--od-feature-overview.case-figure--zoomable
  .case-figure__zoom {
  aspect-ratio: auto;
  overflow: visible;
  height: auto;
}

.case-study-page--past-work
  .case-narrative--office-depot
  .case-figure--od-feature-overview.case-figure--zoomable
  .case-figure__zoom
  img {
  width: 100%;
  height: auto;
  max-height: none;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

.case-narrative--office-depot
  > .case-section.case-chapter[aria-labelledby="od-s1"] {
  margin-top: clamp(48px, 8vw, 96px);
}

.case-narrative--office-depot .case-figure-slider--od-marketplace {
  max-width: min(832px, 80vw);
  margin-inline: auto;
}

.case-narrative--office-depot
  .case-figure-slider--od-marketplace.case-figure-slider--tesla-peek
  .case-figure-slider__slide.case-figure {
  flex: 0 0 min(46.4vw, 576px);
  width: min(46.4vw, 576px);
  max-width: 576px;
}

.case-narrative--office-depot
  .case-figure-slider--od-marketplace
  .case-figure-slider__slide
  .case-figure__zoom {
  aspect-ratio: auto;
  overflow: visible;
  display: block;
  background: rgba(0, 6, 16, 0.65);
  border-radius: 6px;
}

.case-narrative--office-depot
  .case-figure-slider--od-marketplace
  .case-figure-slider__slide
  .case-figure__zoom
  img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center top;
  display: block;
}

/* OD carousel: horizontal scroll only in the viewport (no nested vertical scroll) */
.case-narrative--office-depot .case-figure-slider--od-marketplace .case-figure-slider__viewport {
  overflow-y: hidden;
}

.case-narrative--office-depot .case-figure--od-hero2-bridge {
  margin-top: clamp(28px, 5vw, 52px);
  margin-bottom: clamp(20px, 4vw, 40px);
}

/* Fiat · 72&Sunny — hero + car-flow carousel + landing-variant strip */
.case-hero--fiat-72 .case-hero__fallback {
  object-fit: cover;
  object-position: center;
}

.case-narrative--fiat .case-figure--fiat-lead-still {
  max-width: min(1040px, 100%);
  margin-inline: auto;
  margin-bottom: clamp(20px, 4vw, 40px);
}

.case-narrative--fiat .case-figure-slider--fiat-car-flow {
  max-width: min(960px, 92vw);
  margin-inline: auto;
}

.case-narrative--fiat
  .case-figure-slider--fiat-car-flow.case-figure-slider--tesla-peek
  .case-figure-slider__slide.case-figure {
  flex: 0 0 min(52vw, 640px);
  width: min(52vw, 640px);
  max-width: 640px;
}

.case-narrative--fiat .case-figure-slider--fiat-car-flow .case-figure-slider__viewport {
  overflow-y: hidden;
}

.case-narrative--fiat .case-media-grid--fiat-landing-variants {
  max-width: min(1040px, 100%);
  margin-inline: auto;
  margin-bottom: 0;
  box-sizing: border-box;
}

/* Extra air between landing variants strip and ch.04 copy */
.case-narrative--fiat .case-chapter--fiat-after-variants {
  padding-top: clamp(40px, 9vw, 96px);
  margin-top: 0;
}

.case-narrative--fiat .case-media-grid--fiat-landing-variants > .case-figure--zoomable .case-figure__zoom {
  flex: 0 0 auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 4, 14, 0.55);
  border-radius: 4px;
}

.case-narrative--fiat .case-media-grid--fiat-landing-variants > .case-figure--zoomable .case-figure__zoom img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

.case-narrative--fiat .case-media-grid--fiat-landing-variants > .case-figure figcaption {
  margin-top: 0;
  padding-top: 10px;
}

.case-narrative--fiat .case-media-grid--fiat-side-by-side {
  margin-top: clamp(16px, 2.5vw, 28px);
}

/* Zoic Labs — bridge still above ch.01; carousels: horizontal scroll only in viewport */
.case-narrative--zoic .case-figure--zoic-hero-bridge,
.case-narrative--zoic .case-figure--zoic-screenshare-lede {
  max-width: min(1040px, 100%);
  margin-inline: auto;
  margin-bottom: clamp(20px, 4vw, 40px);
}

.case-study-page--past-work
  .case-narrative--zoic
  .case-figure--zoic-hero-bridge.case-figure--zoomable
  .case-figure__zoom,
.case-study-page--past-work
  .case-narrative--zoic
  .case-figure--zoic-screenshare-lede.case-figure--zoomable
  .case-figure__zoom {
  aspect-ratio: auto;
  overflow: visible;
  height: auto;
}

.case-study-page--past-work
  .case-narrative--zoic
  .case-figure--zoic-hero-bridge.case-figure--zoomable
  .case-figure__zoom
  img,
.case-study-page--past-work
  .case-narrative--zoic
  .case-figure--zoic-screenshare-lede.case-figure--zoomable
  .case-figure__zoom
  img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  display: block;
}

.case-narrative--zoic .case-figure-slider--zoic-btc .case-figure-slider__viewport,
.case-narrative--zoic .case-figure-slider--zoic-screenshare .case-figure-slider__viewport,
.case-narrative--zoic .case-figure-slider--zoic-timepath .case-figure-slider__viewport {
  overflow-y: hidden;
}

.case-narrative--disney .case-figure--disney-penguin-half {
  max-width: min(50%, 720px);
  margin-inline: auto;
}

.case-narrative--disney > .case-media-grid,
.case-narrative--disney > .case-media-lede,
.case-narrative--disney > .case-figure-slider,
.case-narrative--disney > .case-figure,
.case-narrative--disney > .case-section.case-chapter {
  margin-top: clamp(20px, 3.5vw, 42px);
}

/* Disney hero — bias art focal point for title legibility */
.case-hero--disney .case-hero__media .case-hero__fallback {
  object-position: center 38%;
}

.case-study-page--space-theme.case-study-page--past-work .case-narrative--disney .case-media-lede::before {
  background: linear-gradient(
    90deg,
    rgba(125, 253, 254, 0.72),
    rgba(255, 210, 130, 0.38)
  );
}

.case-narrative--disney .case-media-grid--triple > .case-figure > figcaption {
  margin-top: clamp(10px, 1.8vw, 14px);
  font-size: clamp(0.78rem, 1.35vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(125, 253, 254, 0.88);
  line-height: 1.35;
  text-align: center;
  max-width: 36ch;
  margin-inline: auto;
}

.case-narrative--disney .case-figure--disney-penguin-half,
.case-narrative--disney .case-figure--disney-penguin-half:hover,
.case-narrative--disney .case-figure--disney-penguin-half:has(.case-figure__zoom:focus-visible) {
  border: none;
  box-shadow: none;
  background: transparent;
}

.case-narrative--disney .case-figure--disney-penguin-half .case-figure__zoom {
  aspect-ratio: auto;
  overflow: visible;
  height: auto;
}

.case-narrative--disney .case-figure--disney-penguin-half .case-figure__zoom img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.case-narrative--disney .case-video-block--disney-bridge {
  margin-inline: auto;
}

.case-narrative--disney .case-video-block--disney-bridge .case-video-embed {
  aspect-ratio: 16 / 9;
}

.case-narrative--disney .case-video-block--disney-bridge .case-video-embed iframe {
  width: 100%;
  height: 100%;
}

.case-narrative--disney .case-figure-slider--disney-slide-frame .case-figure-slider__slide .case-figure__zoom {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.case-narrative--disney .case-figure-slider--disney-slide-frame .case-figure-slider__slide .case-figure__zoom img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.case-narrative--disney .case-meta-row--disney-one-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 clamp(14px, 2.5vw, 28px);
  row-gap: clamp(6px, 1.2vw, 10px);
}

.case-narrative--disney .case-meta-row--disney-one-line .case-meta-item {
  flex: 1 1 auto;
  min-width: min(220px, 100%);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: baseline;
}

@media (max-width: 900px) {
  .case-narrative--disney .case-meta-row--disney-one-line .case-meta-item {
    min-width: min(280px, 100%);
  }
}

/* Zoic — context / role / timeline on one scannable row */
.case-narrative--zoic .case-meta-row--zoic-one-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 clamp(14px, 2.5vw, 28px);
  row-gap: clamp(6px, 1.2vw, 10px);
}

.case-narrative--zoic .case-meta-row--zoic-one-line .case-meta-item {
  flex: 1 1 auto;
  min-width: min(280px, 100%);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: baseline;
}

@media (min-width: 900px) {
  .case-narrative--zoic .case-meta-row--zoic-one-line .case-meta-item {
    min-width: 0;
    flex: 1 1 0;
  }

  .case-narrative--zoic .case-meta-row--zoic-one-line .case-meta-item:not(:last-child) {
    border-right: 1px solid rgba(125, 253, 254, 0.22);
    padding-right: clamp(14px, 2.2vw, 24px);
    margin-right: 0;
  }
}

.case-narrative--zoic .case-meta-row--zoic-one-line .case-meta-item dt {
  margin: 0;
  white-space: nowrap;
}

.case-narrative--zoic .case-meta-row--zoic-one-line .case-meta-item dd {
  margin: 0;
  font-size: clamp(13px, 1.35vw, 14px);
  line-height: 1.45;
}

.case-narrative--zoic .case-prose--zoic-outcome {
  margin-top: clamp(22px, 3.5vw, 36px);
}

.case-narrative--zoic .case-prose--zoic-outcome p {
  margin: 0;
  font-size: clamp(0.92rem, 1.4vw, 1.02rem);
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.78);
}

.case-narrative--zoic .case-prose--zoic-outcome strong {
  color: rgba(255, 245, 220, 0.95);
  font-weight: 700;
}

/* Zoic — extra air after opening suite paragraph in drawer (before inclusive participation blurb) */
.case-narrative--zoic .case-intro-panel__lede--zoic-drawer > p:first-of-type {
  margin-bottom: clamp(1rem, 2.2vw, 1.35rem);
}

.case-narrative--zoic .case-intro-panel__lede--zoic-drawer > p + p {
  margin-top: clamp(0.75rem, 1.8vw, 1.1rem);
}

.case-figure-slider--tesla-peek .case-figure-slider__viewport {
  scroll-snap-type: x mandatory;
}

.case-figure-slider--tesla-peek .case-figure-slider__track {
  display: flex;
  width: max-content;
  min-width: 100%;
  gap: clamp(12px, 2vw, 20px);
  padding: clamp(6px, 1.2vw, 14px) 0;
  box-sizing: border-box;
}

.case-figure-slider--tesla-peek .case-figure-slider__slide.case-figure {
  flex: 0 0 min(58vw, 720px);
  width: min(58vw, 720px);
  max-width: 720px;
  scroll-snap-align: center;
}

.case-figure-slider--tesla-peek .case-figure-slider__slide .case-figure__zoom {
  aspect-ratio: 16 / 9;
}

.case-narrative .case-media-stack--syro-extra {
  margin-top: clamp(20px, 3.5vw, 32px);
}

.case-narrative .case-figure--syro-dashboard-solo {
  max-width: min(920px, 100%);
  margin-inline: auto;
}

.case-figure-slider:focus-visible {
  outline: 2px solid rgba(79, 209, 197, 0.9);
  outline-offset: 4px;
  border-radius: 8px;
}

.case-figure-slider__chrome {
  display: grid;
  grid-template-columns: minmax(36px, 44px) minmax(0, 1fr) minmax(36px, 44px);
  gap: 10px;
  align-items: stretch;
}

.case-figure-slider__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbars (trackpad, arrows, dots still work; Firefox / WebKit / legacy Edge) */
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: 6px;
  border: 1px solid rgba(0, 255, 255, 0.25);
  background: rgba(0, 6, 16, 0.6);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

.case-figure-slider__viewport::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.case-figure-slider__track {
  display: flex;
  width: 100%;
}

.case-figure-slider__slide.case-figure {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.case-figure-slider__slide .case-figure__zoom {
  flex: 0 0 auto;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 0;
  margin: 0;
}

.case-figure-slider__slide .case-figure__zoom img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: rgba(0, 4, 12, 0.55);
}

/* Carousel slide labels — cyan “chrome” bar; sentence case (still grids use grey figcaption) */
.case-figure-slider__slide-caption {
  margin: 0;
  padding: 8px 12px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(125, 253, 254, 0.88);
  border-top: 1px solid rgba(0, 255, 255, 0.22);
  background: rgba(0, 8, 18, 0.88);
}

.case-figure-slider__btn {
  align-self: center;
  width: 100%;
  max-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(0, 255, 255, 0.45);
  background: linear-gradient(
    165deg,
    rgba(0, 30, 40, 0.92) 0%,
    rgba(10, 0, 28, 0.94) 100%
  );
  color: rgba(200, 255, 255, 0.95);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(236, 72, 255, 0.12) inset,
    0 0 14px rgba(0, 240, 255, 0.15);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

.case-figure-slider__btn:hover:not(:disabled) {
  border-color: rgba(125, 253, 254, 0.75);
  color: #ffffff;
  box-shadow:
    0 0 0 1px rgba(125, 253, 254, 0.4),
    0 0 22px rgba(0, 240, 255, 0.28);
}

.case-figure-slider__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.case-figure-slider__btn:focus-visible {
  outline: 2px solid rgba(79, 209, 197, 0.9);
  outline-offset: 2px;
}

.case-figure-slider__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

/* Case figure slider dots — shared “career timeline” glow (all past-work / selectedwork carousels) */
.case-figure-slider__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid rgba(125, 253, 254, 0.4);
  background: rgba(6, 28, 42, 0.9);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(125, 253, 254, 0.12);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.case-figure-slider__dot:hover,
.case-figure-slider__dot:focus-visible {
  border-color: rgba(125, 253, 254, 0.75);
  box-shadow: 0 0 12px rgba(125, 253, 254, 0.35);
}

.case-figure-slider__dot:focus-visible {
  outline: 2px solid rgba(125, 253, 254, 0.65);
  outline-offset: 2px;
}

.case-figure-slider__dot--active {
  transform: scale(1.35);
  border-color: rgba(125, 253, 254, 0.95);
  background: rgba(125, 253, 254, 0.92);
  box-shadow:
    0 0 0 1px rgba(125, 253, 254, 0.26),
    0 0 16px rgba(125, 253, 254, 0.55);
}

.case-figure-slider__status {
  text-align: center;
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
}

.case-figure-slider__hint {
  text-align: center;
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.42);
}

@media (prefers-reduced-motion: reduce) {
  .case-figure-slider__viewport {
    scroll-behavior: auto;
  }
}

@media (max-width: 719px) {
  .case-figure-slider__chrome {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
  }

  .case-figure-slider__viewport {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  .case-figure-slider__btn--prev,
  .case-figure-slider__btn--next {
    flex: 1 1 calc(50% - 5px);
    max-width: none;
    width: auto;
    min-height: 48px;
  }
}

/* Air after dense callout lists before the next media block (flow diagram, carousel, etc.). */
.case-narrative ul.case-callout-list + .case-figure,
.case-narrative ul.case-callout-list + .case-figure-slider,
.case-narrative ul.case-callout-list + .case-media-grid,
.case-narrative ul.case-callout-list + .case-media-stack {
  margin-top: clamp(32px, 5.5vw, 56px);
}

.case-figure {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(0, 255, 255, 0.25);
  background: rgba(0, 6, 16, 0.6);
}

.case-figure img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.case-figure figcaption {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.56);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Full-bleed mock / art: drop default cyan frame + caption rule (e.g. Cyclops tablet overview). */
.case-figure--borderless {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.case-figure--borderless figcaption {
  border-top: 0;
}

/* Dreamium: captions on borderless lead figures still need readable spacing */
.case-figure--dreamium-lead-2648 figcaption,
.case-figure--dreamium-rev8 figcaption,
.case-figure--dreamium-process figcaption {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

/* YTK §01: wallpaper/illustration at half width, no frame, centered */
.case-narrative .case-figure--ytk-illustration {
  max-width: 50%;
  margin-inline: auto;
  box-shadow: none;
}

.case-figure--borderless.case-figure--zoomable:hover,
.case-figure--borderless.case-figure--zoomable:has(.case-figure__zoom:focus-visible) {
  border-color: transparent;
  box-shadow: none;
}

.case-figure__footnote {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 255, 255, 0.08);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.42);
}

/*
 * Video embed shell (YouTube iframe + self-hosted MP4).
 * Hilton contract for both: .case-video-block > .case-video-embed (video or iframe only).
 * YouTube: case-study-premium.js sets iframe src to youtube.com/embed/… (muted autoplay in-page).
 * <head>: meta referrer + youtube preconnect; deploy: Referrer-Policy in _headers (not same-origin).
 */
.case-video-embed {
  margin-top: 20px;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(0, 255, 255, 0.25);
  background: rgba(0, 6, 16, 0.85);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.case-video-embed iframe,
.case-video-embed video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
}

/* YouTube: legacy facade (unused if JS only sets src); .case-youtube-embed--deferred kept for older HTML. */
.case-video-embed.case-video-embed--youtube-facade {
  cursor: pointer;
}

iframe.case-youtube-embed.case-youtube-embed--deferred {
  visibility: hidden;
}

.case-video-youtube-facade {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  cursor: pointer;
  background-color: #060a12;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.case-video-youtube-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 42%,
    transparent 0%,
    transparent 38%,
    rgba(0, 4, 14, 0.55) 100%
  );
}

.case-video-youtube-facade:hover .case-video-youtube-facade__play-icon,
.case-video-youtube-facade:focus-visible .case-video-youtube-facade__play-icon {
  transform: translate(-50%, -50%) scale(1.06);
}

.case-video-youtube-facade:focus-visible {
  outline: 2px solid rgba(125, 253, 254, 0.95);
  outline-offset: 3px;
}

.case-video-youtube-facade__play-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 0 16px 26px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.55));
  transition: transform 0.18s ease;
}

.case-video-embed.case-video-embed--youtube-active iframe.case-youtube-embed {
  visibility: visible;
}

.case-video-embed video {
  object-fit: contain;
  background: #000;
}

.case-video-block {
  margin-top: 20px;
}

/* Standalone embed between case chapters (e.g. Cyclops before §04) */
.case-narrative > .case-video-block {
  margin-bottom: clamp(24px, 4vw, 40px);
}

.case-video-block .case-video-embed {
  margin-top: 0;
}

.case-video-block__footnote {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 255, 255, 0.08);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.42);
}

.case-video-block__footnote a {
  color: rgba(125, 253, 254, 0.88);
  text-decoration: none;
  border-bottom: 1px solid rgba(125, 253, 254, 0.35);
}

.case-video-block__footnote a:hover {
  color: #fff;
  border-bottom-color: rgba(125, 253, 254, 0.55);
}

/* Extra air below walkthrough embed before dense callouts (Hilton uses same block; YouTube matches that shell). */
.case-narrative .case-video-block + .case-prose.case-prose--measure {
  margin-top: clamp(40px, 6.5vw, 88px);
}

/* DFend: wider prototype embed than body copy measure */
.case-narrative .case-video-block--dfend-prototype {
  max-width: min(960px, 100%);
  width: 100%;
  margin-inline: auto;
}

.case-narrative .case-video-block--dfend-prototype .case-video-embed {
  margin-top: 0;
}

/* DFend: extra space between inter-chapter figure and the next chapter */
.case-narrative .case-figure--inter-chapter-gap {
  margin-bottom: clamp(48px, 7vw, 96px);
}

.case-prose.case-prose--after-video-callouts .case-callout-list li {
  margin-bottom: 14px;
}

.case-prose.case-prose--after-video-callouts .case-callout-list li:last-child {
  margin-bottom: 0;
}

/* Cyclops §04: left copy column + award lockup on the right */
.case-results-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 34%);
  gap: clamp(18px, 3.5vw, 36px);
  align-items: start;
  margin-top: clamp(10px, 2vw, 20px);
}

/* Beat later .case-prose--measure max-width/margin so split copy stays left-aligned in the grid. */
.case-prose.case-prose--measure.case-prose--split-start {
  text-align: start;
  margin-inline: 0;
  max-width: min(38rem, 100%);
}

.case-results-split__award {
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: min(300px, 100%);
}

.case-results-split__award .case-figure__zoom {
  display: block;
  width: 100%;
}

.case-results-split__award img {
  width: 100%;
  height: auto;
  display: block;
}

.case-results-split__award figcaption {
  text-align: center;
  margin-top: 8px;
  font-size: 11px;
}

@media (max-width: 720px) {
  .case-results-split {
    grid-template-columns: 1fr;
  }

  .case-results-split__award {
    justify-self: center;
    max-width: min(260px, 88vw);
  }

  .case-prose.case-prose--measure.case-prose--split-start {
    max-width: none;
  }
}

.case-video-embed__meta {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.5);
}

.case-video-embed__meta a {
  color: rgba(125, 253, 254, 0.88);
  text-decoration: none;
  border-bottom: 1px solid rgba(125, 253, 254, 0.35);
}

.case-video-embed__meta a:hover {
  color: #fff;
  border-bottom-color: rgba(125, 253, 254, 0.65);
}

/* Caption row sits inside the 16×9 frame (bottom overlay) — needs .case-video-embed--with-caption on the wrapper */
.case-video-embed.case-video-embed--with-caption {
  position: relative;
}

.case-video-embed.case-video-embed--with-caption > .case-video-embed__meta--inframe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 10px 14px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(235, 248, 255, 0.92);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(2, 6, 18, 0.55) 35%,
    rgba(2, 6, 18, 0.88) 100%
  );
  z-index: 2;
  pointer-events: auto;
}

.case-video-embed.case-video-embed--with-caption > .case-video-embed__meta--inframe a {
  color: rgba(160, 245, 255, 0.98);
  border-bottom-color: rgba(125, 253, 254, 0.5);
}

.case-stub-note {
  padding: clamp(20px, 3vw, 28px);
  border-radius: 6px;
  border: 1px solid rgba(255, 200, 120, 0.35);
  background: rgba(40, 28, 0, 0.25);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 230, 190, 0.9);
}

.case-stub-note code {
  font-family: ui-monospace, "SF Mono", "Menlo", Monaco, Consolas, monospace;
  font-size: 0.88em;
  color: rgba(255, 245, 210, 0.98);
  word-break: break-all;
}

.case-stub-note--narrow {
  max-width: 42rem;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Case study — narrative template (optional; HGV and future client pages)
   -------------------------------------------------------------------------- */

.case-narrative {
  --case-text-measure: 42rem;
}

/* Anchor targets clear sticky site header + case toolbar when using in-page TOC */
.case-intro-panel#case-overview,
.case-narrative .case-section__title[id],
.case-narrative .case-chapter__title[id] {
  scroll-margin-top: clamp(104px, 16vh, 148px);
}

.case-prose--measure {
  max-width: var(--case-text-measure, 42rem);
  margin-inline: auto;
}

/* Breathing room after body copy (last <p> has margin-bottom: 0) */
.case-narrative .case-prose--measure + .case-figure,
.case-narrative .case-prose--measure + .case-media-grid,
.case-narrative .case-prose--measure + .case-media-stack,
.case-narrative .case-prose--measure + .case-video-block {
  margin-top: clamp(28px, 4vw, 44px);
}

.case-narrative .case-meta-row {
  max-width: none;
}

/* Intro panel: context / role / timeline + lede (space schema; not part of 01–04 chapters) */
.case-intro-panel {
  position: relative;
  isolation: isolate;
  margin: 0 0 clamp(32px, 5vw, 48px);
  padding: clamp(20px, 3vw, 28px) clamp(18px, 2.5vw, 26px);
  border-radius: 6px;
  border: 1px solid rgba(0, 255, 255, 0.3);
  background:
    radial-gradient(
      ellipse 120% 80% at 10% 0%,
      rgba(0, 60, 80, 0.22) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 90% 70% at 100% 100%,
      rgba(80, 20, 120, 0.18) 0%,
      transparent 50%
    ),
    linear-gradient(
      155deg,
      rgba(0, 10, 26, 0.97) 0%,
      rgba(4, 0, 22, 0.94) 48%,
      rgba(0, 8, 20, 0.96) 100%
    );
  box-shadow:
    0 0 0 1px rgba(236, 72, 255, 0.12) inset,
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(0, 255, 255, 0.06);
  overflow: hidden;
}

.case-intro-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 47px,
      rgba(0, 255, 255, 0.042) 47px,
      rgba(0, 255, 255, 0.042) 48px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 47px,
      rgba(236, 72, 255, 0.032) 47px,
      rgba(236, 72, 255, 0.032) 48px
    );
}

.case-intro-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(2, 4, 14, 0.15) 0%,
    transparent 35%,
    transparent 65%,
    rgba(2, 3, 12, 0.35) 100%
  );
}

.case-intro-panel > * {
  position: relative;
  z-index: 1;
}

.case-meta-row--in-intro {
  margin: 0 0 0;
  padding: clamp(4px, 1vw, 8px) 0 clamp(18px, 2.5vw, 22px);
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid rgba(0, 255, 255, 0.16);
}

.case-intro-panel__lede {
  margin: 0;
  padding-top: clamp(18px, 2.5vw, 24px);
  max-width: min(42rem, 100%);
}

.case-intro-panel__lede p {
  margin: 0;
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
}

.case-intro-panel__lede p:last-child {
  margin-bottom: 0;
}

/* Softer intro lede (e.g. Hilton) — supporting copy vs. meta row + chapter body */
.case-intro-panel__lede--muted p {
  font-size: clamp(12px, 0.82vw, 14px);
  line-height: 1.65;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.68);
}

/* Optional intro copy — native details; collapsed by default (see Hilton case). */
.case-intro-panel__drawer {
  margin: 0;
  padding-top: clamp(10px, 1.8vw, 16px);
}

.case-intro-panel__drawer-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  min-width: min(100%, 9.5rem);
  margin: 0;
  padding: 8px 14px 8px 12px;
  list-style: none;
  cursor: pointer;
  font-family: ui-monospace, "SF Mono", "Menlo", Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 210, 140, 0.88);
  border: 1px solid rgba(0, 255, 255, 0.28);
  border-radius: 6px;
  background: rgba(0, 12, 28, 0.55);
  box-shadow: 0 0 0 1px rgba(236, 72, 255, 0.08) inset;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.case-intro-panel__drawer-summary::-webkit-details-marker {
  display: none;
}

.case-intro-panel__drawer-summary::marker {
  content: "";
}

.case-intro-panel__drawer-summary::after {
  content: "";
  flex-shrink: 0;
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(125, 253, 254, 0.75);
  transform: translateY(1px);
  transition: transform 0.2s ease;
}

.case-intro-panel__drawer[open] > .case-intro-panel__drawer-summary::after {
  transform: translateY(1px) rotate(180deg);
}

.case-intro-panel__drawer-summary:hover {
  border-color: rgba(0, 255, 255, 0.45);
  background: rgba(0, 18, 36, 0.65);
  color: rgba(255, 228, 180, 0.95);
}

.case-intro-panel__drawer-summary:focus {
  outline: none;
}

.case-intro-panel__drawer-summary:focus-visible {
  outline: 2px solid rgba(125, 253, 254, 0.9);
  outline-offset: 3px;
}

.case-intro-panel__drawer .case-intro-panel__lede {
  padding-top: clamp(14px, 2vw, 18px);
  margin-top: clamp(10px, 1.5vw, 14px);
  padding-left: 2px;
  border-left: 2px solid rgba(125, 253, 254, 0.22);
}

.case-chapter {
  margin: 0 0 clamp(36px, 6vw, 56px);
}

.case-chapter:last-child {
  margin-bottom: 0;
}

.case-chapter__title {
  margin: clamp(28px, 4vw, 44px) 0 10px;
  font-size: clamp(1rem, 1.85vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.95);
}

.case-chapter > .case-chapter__title:first-of-type {
  margin-top: clamp(20px, 3vw, 28px);
}

.case-chapter .case-section__title {
  margin-bottom: 12px;
}

.case-pull {
  margin: 18px 0 0;
  padding: 0 0 0 1.1rem;
  border-left: 3px solid rgba(125, 253, 254, 0.45);
  font-size: 15px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.82);
}

.case-pull p {
  margin: 0 0 12px;
}

.case-pull p:last-child {
  margin-bottom: 0;
}

.case-pull strong {
  color: #7dfdfe;
  font-weight: 600;
}

/* Space after a chapter-level pull (e.g. DFend) before the next prose / list block */
.case-chapter > .case-pull + .case-prose {
  margin-top: clamp(22px, 3.5vw, 36px);
}

.case-media-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vw, 24px);
  margin-top: clamp(20px, 3vw, 28px);
  max-width: min(1040px, 100%);
  margin-inline: auto;
}

.case-media-stack .case-figure {
  margin: 0;
}

.case-media-stack .case-video-embed {
  margin-top: 0;
}

/* One stack, multiple split grids: drop per-grid top margin so columns line up */
.case-media-stack--uniform-tiles > .case-media-grid {
  margin-top: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Case figure opt-ins (template): .case-figure--tilt-hover + .case-figure--loop-hover
   (poster + .case-figure__hover-loop); .case-figure--borderless removes frame chrome;
   lightbox uses .case-figure__poster when present. */

.case-figure--zoomable .case-figure__zoom {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: inherit;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  text-align: left;
  position: relative;
  overflow: hidden;
}

/* Specular sweep on hover / focus (no extra assets) */
.case-figure--zoomable .case-figure__zoom::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    transparent 36%,
    rgba(255, 255, 255, 0.14) 48%,
    rgba(200, 255, 255, 0.08) 52%,
    transparent 64%
  );
  opacity: 0;
  transform: translateX(-120%) skewX(-12deg);
  transition:
    opacity 0.35s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-figure--zoomable:hover .case-figure__zoom::after,
.case-figure--zoomable:has(.case-figure__zoom:focus-visible) .case-figure__zoom::after {
  opacity: 1;
  transform: translateX(120%) skewX(-12deg);
}

.case-figure--tilt-hover {
  perspective: 880px;
}

.case-figure--tilt-hover .case-figure__zoom {
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out;
}

.case-figure--loop-hover .case-figure__hover-loop {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.case-figure--loop-hover .case-figure__poster {
  position: relative;
  z-index: 0;
  transition:
    opacity 0.4s ease,
    transform 0.28s ease;
}

.case-figure--loop-hover:hover .case-figure__hover-loop,
.case-figure--loop-hover:has(.case-figure__zoom:focus-visible) .case-figure__hover-loop {
  opacity: 1;
}

.case-figure--loop-hover:hover .case-figure__poster,
.case-figure--loop-hover:has(.case-figure__zoom:focus-visible) .case-figure__poster {
  opacity: 0;
}

.case-figure--zoomable .case-figure__zoom:focus-visible {
  outline: 2px solid rgba(125, 253, 254, 0.9);
  outline-offset: 3px;
}

.case-figure--zoomable .case-figure__zoom img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
  transition: transform 0.28s ease;
}

.case-figure--zoomable {
  transition:
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

.case-figure--zoomable:hover,
.case-figure--zoomable:has(.case-figure__zoom:focus-visible) {
  border-color: rgba(0, 255, 255, 0.48);
  box-shadow:
    0 0 0 1px rgba(125, 253, 254, 0.22) inset,
    0 12px 36px rgba(0, 0, 0, 0.4);
}

.case-figure--zoomable:hover .case-figure__zoom img,
.case-figure--zoomable:has(.case-figure__zoom:focus-visible) .case-figure__zoom img {
  transform: scale(1.01);
}

@media (prefers-reduced-motion: reduce) {
  .case-figure--zoomable,
  .case-figure--zoomable .case-figure__zoom img {
    transition: none;
  }

  .case-figure--zoomable:hover .case-figure__zoom img,
  .case-figure--zoomable:has(.case-figure__zoom:focus-visible) .case-figure__zoom img {
    transform: none;
  }

  .case-figure--zoomable .case-figure__zoom::after {
    display: none;
  }

  .case-figure--loop-hover .case-figure__hover-loop {
    display: none;
  }

  .case-figure--loop-hover .case-figure__poster {
    opacity: 1 !important;
  }
}

.case-figure__hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(125, 253, 254, 0.5);
}

/* Lightbox (native dialog) */
.case-lightbox {
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  background: transparent;
  box-shadow: none;
}

.case-lightbox::backdrop {
  background: rgba(2, 4, 14, 0.88);
  backdrop-filter: blur(4px);
}

.case-lightbox__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: 100%;
  width: 100%;
  padding: clamp(12px, 2.5vw, 28px);
  pointer-events: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.case-lightbox__img {
  display: block;
  /* Use almost the full viewport so wide UI screenshots stay legible */
  max-width: min(96vw, 2800px);
  max-height: min(94vh, 2200px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}

.case-lightbox__close {
  position: absolute;
  top: clamp(8px, 2vw, 16px);
  right: clamp(8px, 2vw, 16px);
  z-index: 2;
  pointer-events: auto;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 12, 28, 0.85);
  border: 1px solid rgba(0, 255, 255, 0.35);
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.case-lightbox__close:hover {
  background: rgba(0, 24, 48, 0.95);
  border-color: rgba(125, 253, 254, 0.55);
}

.case-lightbox__close:focus-visible {
  outline: 2px solid rgba(125, 253, 254, 0.9);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .case-lightbox::backdrop {
    backdrop-filter: none;
  }
}

/* --------------------------------------------------------------------------
   Arcane header — narrow phones/tablets (standalone pages only had index inline
   rules before; case studies + selectedwork.html load this sheet only).
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  html {
    scroll-padding-top: 112px;
  }

  .site-header--arcane .header-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .site-header--arcane .header-left {
    flex-direction: column;
    align-items: center;
    align-self: center;
    width: 100%;
  }

  .site-header--arcane .header-site-nav {
    width: 100%;
  }

  .site-header--arcane .header-nav {
    align-self: stretch;
    width: 100%;
    justify-content: center;
    flex: 0 1 auto;
  }

  .site-header--arcane .nav-links {
    justify-content: center;
    width: 100%;
    row-gap: 10px;
    column-gap: 8px;
  }

  .site-header--arcane .nav-links__trailing {
    display: contents;
  }

  .site-header--arcane .nav-links .theme-mode {
    flex: 0 0 100%;
    width: 100%;
    justify-content: center;
    margin-left: 0;
    margin-top: 2px;
    padding-top: 4px;
    border-top: 1px solid rgba(201, 162, 39, 0.22);
  }
}

/* ── Mobile burger nav: row layout (overrides column layout above) ─── */
@media (max-width: 768px) {
  html {
    scroll-padding-top: 72px;
  }

  .site-header--arcane .header-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
    height: 52px;
    box-sizing: border-box;
  }

  .site-header--arcane .header-left {
    flex-direction: row;
    align-items: center;
    align-self: center;
    width: auto;
  }

  .logo-wordmark {
    height: 30px;
  }

  /* Hide icon nav — drawer handles mobile navigation */
  .site-header--arcane .header-nav {
    display: none;
  }

  .site-header--arcane .header-site-nav {
    display: none;
  }

  /* Burger button */
  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 10px;
    cursor: pointer;
    background: none;
    border: none;
    color: rgba(238, 232, 220, 0.95);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    order: 999;
  }

  .nav-burger__bar {
    display: block;
    width: 24px;
    height: 2px;
    background: rgba(238, 232, 220, 0.95);
    border-radius: 2px;
  }
}

/* ── Mobile nav drawer (global — shared by all pages using selectedwork.css) ── */
/* Hide burger on desktop — shown via @media (max-width: 768px) above */
@media (min-width: 769px) {
  .nav-burger {
    display: none;
  }
}
.nav-mobile-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  z-index: 199;
}
.nav-mobile-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}
.nav-mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(280px, 82vw);
  background: #04141e;
  border-left: 1px solid rgba(201, 162, 39, 0.22);
  padding: 68px 8px 40px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 200;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-mobile-drawer.is-open {
  transform: translateX(0);
}
.nav-mobile-drawer__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: rgba(238, 232, 220, 0.9);
  font-size: 1.5rem;
  line-height: 1;
  padding: 8px;
  cursor: pointer;
  opacity: 0.7;
}
.nav-mobile-drawer .nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
.nav-mobile-drawer .nav-pill {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  width: 100%;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(238, 232, 220, 0.9);
  transition: background 0.15s ease;
}
.nav-mobile-drawer .nav-pill:hover,
.nav-mobile-drawer .nav-pill:focus-visible {
  background: rgba(255, 255, 255, 0.07);
}
.nav-mobile-drawer .nav-pill img {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.nav-mobile-drawer .nav-pill__hover-label {
  display: block !important;
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(238, 232, 220, 0.9);
}
.nav-mobile-drawer .nav-pill__fun-burst { display: flex; align-items: center; }
.nav-mobile-drawer .nav-pill__fun-pop { display: none !important; }
.nav-mobile-drawer .nav-links__trailing { display: contents; }
.nav-mobile-drawer .theme-mode {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-top: 1px solid rgba(201, 162, 39, 0.15);
  margin-top: 6px;
}
.nav-mobile-drawer .theme-mode__label {
  font-family: "Barlow", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  user-select: none;
  color: rgba(238, 232, 220, 0.85);
}
.nav-mobile-drawer .theme-mode__label--on { color: #fff; }
.nav-mobile-drawer .theme-mode__label--off { color: rgba(160, 200, 210, 0.6); }
.nav-mobile-drawer .theme-mode__switch {
  margin: 0; padding: 0; border: 0;
  background: transparent;
  cursor: not-allowed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-mobile-drawer .theme-mode__track {
  position: relative;
  display: block;
  width: 38px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,255,255,0.35) 0%, rgba(0,40,60,0.6) 55%, rgba(8,0,22,0.9) 100%);
  box-shadow: 0 0 0 1px rgba(0, 255, 255, 0.55);
}
.nav-mobile-drawer .theme-mode__thumb {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  background: #fff;
}

/* ── Mobile-only UX improvements ────────────────────────────────────── */
@media (max-width: 768px) {
  /* Explore button: larger tap target + distinct pill treatment */
  .work-tile__explore {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    padding: 9px 18px;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    border-radius: 999px;
    border: 1.5px solid rgba(125, 253, 254, 0.7);
    box-shadow:
      0 0 18px rgba(0, 240, 255, 0.28),
      0 0 0 3px rgba(125, 253, 254, 0.08);
    min-height: 40px;
  }

  /* Carousel step arrows: keep hidden on mobile — tiles are stacked vertically */
  .past-work-carousel__step {
    display: none;
  }
}