.case-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 140px 0 0 137px;
  font-family: 'Urbanist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--mid);
  text-decoration: none;
  transition: color .2s;
  position: absolute;
  top: -40px;
  left: 0;
}

.case-back-link:hover {
  color: var(--accent);
}

.case-back-link svg {
  width: 14px;
  height: 14px;
}

.case-hero {
  padding: 40px 60px 80px 137px;
}

.case-hero-grid {
  display: grid;
  grid-template-columns: 45% 50%;
  gap: 56px;
  align-items: center;
  width: 100%;

}

.case-hero-main h1 {
  margin-top: 20px;
  font-family: 'NeueMachina', sans-serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--black);
}

.case-hero-subtitle {
  margin-top: 20px;
  max-width: 420px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--mid);
}

.case-hero-link {
  color: var(--accent);
  text-decoration: none;
    display: inline-block;
  transition: all .2s;
  font-weight: 500;
    transform: scale(1);
  font-family: "NeueMachina", sans-serif;
}

.case-hero-link:hover {
  transform: scale(1.1);
  position: relative;

  color: var(--black);
}

.case-meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Urbanist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
}

.case-meta-item svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

.case-hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.case-hero-side .cta-circle {
  width: 80px;
  height: 80px;
}


/* Two-column section header used by Challenge / Solution / Results / Tech */

.case-section {
  padding: 90px 60px 90px 137px;
}

.case-section--muted {
  background: #f6f6f8;
}

.case-section-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: start;
}

.case-section-title {
  font-family: 'NeueMachina', sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--black);
}

.case-section-body > p {
  max-width: 560px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--mid);
}

.case-section-body > ul {
  margin-left: 30px;
  padding: 0;
  margin-bottom: 20px;
  margin-top: 20px;
}
.case-section-body li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--mid);
}

/* Challenge list (icon + label + divider rows) */

.case-list {
  margin-top: 20px;
  max-width: 560px;
  margin-bottom: 20px;
}

.case-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-family: 'Urbanist', sans-serif;
  font-size: 15px;
  color: var(--black);
}

.case-list-item svg {
  width: 14px;
  height: 14px;
  color: var(--mid);
  flex-shrink: 0;
}

/* Solution numbered grid */

.case-solution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}

.case-solution-num {
  margin-bottom: 10px;
  font-family: 'Urbanist', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.case-solution-item h3 {
  margin-bottom: 8px;
  font-family: 'Urbanist', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--black);
}

.case-solution-item p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mid);
}

.case-images-grid {
  position: relative;
  display: grid;
  gap: 32px;
  height: min(560px, 62vh);
}

.case-shots--scroll {
  transition: opacity .5s ease, transform .5s ease;
}

.case-shots--scroll.is-hidden {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}

/* Our Role pull-quote */

.case-role {

  margin-top: 28px;
  padding: 28px 32px;
  border-left: 3px solid var(--accent);
  background: var(--accent-light);
  border-radius: 0 12px 12px 0;
  font-family: 'Urbanist', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--black);
      grid-column-start: 1;
    grid-column-end: -1;
}


/* Technology row */

.case-tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.case-tech-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--border);
  border-radius: 30px;
  font-family: 'Urbanist', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--black);
}

.case-tech-item svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}


/* ─── CASE STUDY: PLATFORM SCREENSHOTS ─── */

.case-shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.case-shot {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

.case-shot.in-view {
  opacity: 1;
  transform: translateY(0);
}

.case-shot:nth-child(1) { transition-delay: 0s; }
.case-shot:nth-child(2) { transition-delay: .12s; }
.case-shot:nth-child(3) { transition-delay: .24s; }

@keyframes case-shot-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}


.case-shot figcaption {
  margin-top: 16px;
  font-family: 'Urbanist', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mid);
}


/* Restore base frame styling for the screenshot container (border, radius,
   shadow) and make sure the image itself fills and clips correctly. */

.case-shot-frame {
  position: relative;
  overflow: hidden;
  background: var(--card-bg);

  border-radius: 14px;

}

.case-shot-frame img {
  display: block;
  width: 100%;

  object-fit: cover;
  object-position: top;
}

/* ─── CASE STUDY: HERO SCROLL-PIN SLIDESHOW ───
   Structure: .case-hero-scroll (tall scroll track) > .hero (sticky, pinned
   for the duration of the track). While pinned, the left column stays put
   and the screenshots on the right cross-fade one at a time, driven by
   scroll position (see the scroll handler in main.js). Once all screenshots
   have shown, the booking circle fades in and the track height runs out,
   releasing the sticky pin so the page continues scrolling normally. */

.case-hero-scroll {
  position: relative;
  height: 340vh;
}

.case-hero-scroll .hero {
  position: sticky;
  padding-right: 30px;
  top: 0;
}

.case-shots--scroll {
  position: relative;
  width: 100%;
  height: 100%;
}

.case-shot.case-shot--pin {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: opacity .6s ease, transform .6s ease;
  pointer-events: none;
}

.case-shot.case-shot--pin.is-active {
  opacity: 1;
  transform: translateY(10%) scale(1);
  pointer-events: auto;
}

/* Booking circle overlay: sits inside .case-images-grid and fills the same
   box the screenshots occupy, so when it fades in it visually replaces the
   slideshow rather than floating beside it. The #id selector is needed to
   beat the site-wide .hero-cta-circle rule (right:60px; top:50%) used on
   the service pages' plain hero. */

#heroCtaCircle {
  position: absolute;
  inset: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;

  justify-content: center;
  gap: 20px;
  text-align: center;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}

#heroCtaCircle.is-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

#heroCtaCircle .hero-cta-desc {
  max-width: 280px;
  text-align: center;
}

/* Fallback for touch/small screens and reduced-motion users: the JS adds
   this class instead of driving scroll progress, so the section behaves
   like a normal, non-pinned block with everything simply visible. */

.case-hero-scroll.static-mode {
  height: auto;
}

.case-hero-scroll.static-mode .hero {
  position: relative;
  min-height: auto;
  padding-top: 160px;
  padding-bottom: 60px;
}

.case-hero-scroll.static-mode .case-images-grid {
  height: auto;
}

.case-hero-scroll.static-mode .case-shots--scroll {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.case-hero-scroll.static-mode .case-shot.case-shot--pin {
  position: relative;
  inset: auto;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.case-hero-scroll.static-mode .case-shot.case-shot--pin .case-shot-frame {
  animation: case-shot-float 6s ease-in-out infinite;
}

.case-hero-scroll.static-mode .case-shot:nth-child(2) .case-shot-frame { animation-delay: .5s; }
.case-hero-scroll.static-mode .case-shot:nth-child(3) .case-shot-frame { animation-delay: 1s; }

.case-hero-scroll.static-mode #heroCtaCircle {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  align-items: center;
  margin: 40px auto 0;
}

@media (max-width: 900px) {
  .case-hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-shot.case-shot--pin,
  #heroCtaCircle {
    transition: none;
  }
}