/* Sticky, compressing case-study header — see js/case-header.js.
   The script sets this block's height and a negative top so only its
   bottom strip (--case-header-h) stays in view once stuck, and drives
   the morph with transforms. Without the script, the header simply
   scrolls away as before. */
.port-bodycon.porttop.is-sticky-header {
  position: sticky;
  z-index: 50;
  justify-content: flex-end;
}

/* Full-bleed backdrop behind the compact strip, fading in as the
   header finishes compressing so content scrolling underneath stays
   out of the way. */
.port-bodycon.porttop.is-sticky-header::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: var(--case-header-bleed-left, 0);
  width: var(--case-header-bleed-width, 100%);
  height: var(--case-header-h, 76px);
  background-color: rgba(18, 18, 18, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  opacity: var(--case-header-bg, 0);
  z-index: -1;
  pointer-events: none;
}

/* Once compressed, the bento icon sits over the title block's box
   (which comes later in the DOM and is transformed, so it paints on
   top). Lift the icon above it so it stays clickable in the bar. */
.port-bodycon.porttop.is-sticky-header .case-switcher-trigger {
  position: relative;
  z-index: 2;
}

/* Compact title for stacked (tablet/mobile) headers: the big title only
   scales, so it keeps its narrow multi-line wrap. This copy fills the
   bar between the bento icon and the link icon, two lines at most. */
.case-header-mini-title {
  display: none;
  position: absolute;
  bottom: 0;
  height: var(--case-header-h, 60px);
  align-items: center;
  color: var(--_main-style---white, #fff);
  font-family: Parkinsans, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 125%;
  opacity: 0;
  pointer-events: none;
}

.port-bodycon.porttop.is-sticky-header .case-header-mini-title {
  display: flex;
}

.case-header-mini-title span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}