/* Image-led case stage. Vertical page movement advances a horizontal sequence without card overlap. */
.case-gallery {
  --case-nav-height: 80px;
  --case-stage: calc(100svh - var(--case-nav-height));
  --case-petrol: #073944;
  --case-petrol-deep: #052d36;
  --case-paper: #f5f2eb;
  position: relative;
  padding: 0 !important;
  overflow: clip;
  color: var(--case-paper);
  background: var(--case-petrol);
}

.case-gallery::before {
  content: "CASE";
  position: absolute;
  top: 9vh;
  left: 15vw;
  z-index: 0;
  color: rgba(29, 111, 104, 0.22);
  font-size: min(29vw, 440px);
  font-weight: 300;
  line-height: 0.8;
  letter-spacing: -0.08em;
  pointer-events: none;
  user-select: none;
}

.case-gallery .case-layout {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.case-gallery .case-sidebar,
.case-gallery .case-scroll-runway {
  grid-area: 1 / 1;
  min-width: 0;
}

.case-gallery .case-sidebar {
  position: sticky !important;
  top: var(--case-nav-height) !important;
  z-index: 2;
  height: var(--case-stage);
  margin: 0 !important;
  color: var(--case-paper);
  pointer-events: none;
}

.case-gallery .case-sidebar .label,
.case-gallery .case-sidebar .section-title,
.case-gallery .case-sidebar .gallery-intro,
.case-gallery .case-index,
.case-scroll-reading {
  position: absolute;
  margin: 0;
}

.case-gallery .case-sidebar .label {
  top: 13.5%;
  left: 5.5%;
  color: #8db0a9;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.case-gallery .case-sidebar .section-title {
  top: 32%;
  left: 5.5%;
  max-width: 330px;
  color: rgba(244, 242, 235, 0.93);
  font-size: clamp(34px, 3.1vw, 50px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.035em;
  white-space: nowrap;
  opacity: var(--case-heading-opacity, 1);
  transition: opacity 0.18s linear;
}

.case-gallery .case-sidebar .gallery-intro {
  top: 55%;
  left: 5.5%;
  max-width: 310px;
  color: rgba(209, 224, 218, 0.72);
  font-size: 15px;
  line-height: 1.75;
  opacity: var(--case-heading-opacity, 1);
  transition: opacity 0.18s linear;
}

.case-gallery .case-index {
  right: 2.25%;
  bottom: 6.5%;
  z-index: 30;
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  width: 156px;
  max-width: none;
  border: 0 !important;
  pointer-events: auto;
}

.case-gallery .case-index a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: max-content;
  max-width: 156px;
  min-height: 32px;
  padding: 6px 14px !important;
  overflow: hidden;
  border: 1px solid rgba(196, 220, 211, 0.22) !important;
  border-radius: 999px;
  color: rgba(213, 228, 222, 0.55) !important;
  background: rgba(8, 42, 41, 0.34);
  font-size: 11px !important;
  line-height: 1.25 !important;
  white-space: nowrap;
  text-overflow: ellipsis;
  backdrop-filter: blur(8px);
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}

.case-gallery .case-index a::after { display: none !important; }
.case-gallery .case-index a span { order: 2; font-size: 9px; opacity: 0.55; }
.case-gallery .case-index a:hover { color: #fff !important; border-color: rgba(236, 242, 235, 0.58) !important; transform: translateX(-4px); }
.case-gallery .case-index a[aria-current="true"] { color: var(--case-petrol-deep) !important; border-color: var(--case-paper) !important; background: var(--case-paper); }
.case-gallery .case-index a[aria-current="true"] span { opacity: 1; }

.case-scroll-reading {
  left: 5.5%;
  bottom: 7.5%;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(196, 217, 210, 0.68);
  font-size: 9px;
  letter-spacing: 0.18em;
  pointer-events: none;
}

.case-scroll-reading-count { color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.case-scroll-reading i { position: relative; display: block; width: 92px; height: 1px; overflow: hidden; background: rgba(192, 218, 208, 0.22); }
.case-scroll-reading i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--case-progress, 0) * 100%); background: #c7ddd4; }

.case-scroll-runway { position: relative; z-index: 3; min-width: 0; pointer-events: none; }

.case-scroll-deck {
  position: sticky !important;
  top: var(--case-nav-height) !important;
  z-index: 4;
  width: 100vw !important;
  height: var(--case-stage) !important;
  min-height: 580px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  isolation: isolate;
  pointer-events: none;
}

.case-scroll-deck::before,
.case-scroll-deck::after { display: none !important; }

.case-scroll-deck .case-slide {
  position: absolute !important;
  inset: 50% auto auto 58% !important;
  z-index: var(--case-z, 1);
  display: block;
  width: min(860px, 60vw) !important;
  height: min(650px, 74vh) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 18px !important;
  color: #172725;
  background: transparent !important;
  box-shadow: none !important;
  opacity: var(--case-opacity, 0) !important;
  visibility: var(--case-visibility, hidden) !important;
  pointer-events: var(--case-pointer, none) !important;
  translate: -50% -50%;
  transform: var(--case-transform, scale(0.34)) !important;
  transform-origin: 50% 50%;
  transition: none;
}

/* Outrank the legacy .is-current transform: state classes only mark navigation. */
.case-gallery.case-cinema .case-scroll-deck .case-slide {
  transform: var(--case-transform, scale(.36)) !important;
  opacity: var(--case-opacity, 0) !important;
  transition: none !important;
}

.case-scroll-deck .case-slide::before,
.case-scroll-deck .case-slide::after { display: none !important; }

/* Keep the arrow outside the clipped paper surface. The cut opens as a card
   becomes the central reading card; neighbouring cards retain a full corner. */
.case-card-surface {
  position: relative;
  display: grid;
  grid-template-columns: 46% 54%;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 10px;
  overflow: hidden;
  border-radius: 18px;
  background: #f7f5ef;
  box-shadow: 0 26px 36px rgba(0, 16, 15, 0.26);
}

.case-cinema .case-card-surface {
  clip-path: none;
}

/* Paint the missing corner above the card instead of clipping the live text.
   This preserves the Longstone-style cut without forcing every glyph through
   an animated clip/filter layer while the card scales. */
.case-card-surface::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  z-index: 6;
  width: var(--case-cut, 0px);
  height: var(--case-cut, 0px);
  background: var(--case-petrol);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.case-visual {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 11px;
  background: #0d2928;
}

.case-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgba(3, 24, 23, 0.24));
  pointer-events: none;
}

.case-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate3d(var(--case-image-shift, 0), 0, 0) scale(1.045);
  filter: saturate(0.88) contrast(1.03);
  will-change: transform;
  transition: none;
}

.case-visual-meta {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 9px;
  letter-spacing: 0.16em;
}

.case-visual-meta::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #dc765d; }

.case-card-copy {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 24px 24px 62px 28px;
  overflow: auto;
  scrollbar-width: thin;
  border-radius: 0 11px 11px 0;
  background: #f7f5ef;
}

.case-card-arrow {
  position: absolute;
  right: -5px;
  bottom: -5px;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: #d46553;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-10px, 10px, 0) scale(.82);
  transition: opacity .3s ease, transform .68s cubic-bezier(.16, 1, .3, 1);
}

.case-card-arrow > svg {
  display: block;
  width: 38px;
  height: 38px;
}

.case-cinema .case-card-arrow {
  opacity: var(--case-arrow-opacity, 0);
  transform: var(--case-arrow-transform, translate3d(-12px, 12px, 0) scale(.72));
  transition: none;
}

.case-scroll-deck .case-slide-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 !important;
  border: 0 !important;
  color: #64766e;
  font-size: 11px;
  letter-spacing: 0.02em;
}

.case-scroll-deck .case-slide-top span:last-child { color: #285f5a; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }

.case-scroll-deck .case-slide h3 {
  max-width: 420px;
  margin: 14px 0 9px !important;
  color: #182321;
  font-size: clamp(23px, 1.85vw, 28px) !important;
  font-weight: 500;
  line-height: 1.3 !important;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.case-card-result { margin: 0 0 14px; color: #64716c; font-size: 13px; line-height: 1.55; }

.case-scroll-deck .case-story {
  position: static !important;
  display: grid;
  gap: 10px;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  border: 0 !important;
}

.case-story > div { padding: 11px 0 10px; border-top: 1px solid #d7d9d2; }
.case-story h4 { margin: 0 0 5px; color: #1e6071; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.case-story p { margin: 0; color: #596762; font-size: 12.5px; line-height: 1.55; }
.case-story .case-outcome { padding-bottom: 0; }

.case-scroll-deck .case-story p { font-size: 15px; line-height: 1.7; }
.case-scroll-deck .case-story h4 { font-size: 12px; }

@media (min-width: 801px) and (max-height: 800px) {
  .case-card-copy { padding: 18px 24px 48px; }
  .case-scroll-deck .case-slide h3 { font-size: 23px !important; margin-top: 10px !important; }
  .case-scroll-deck .case-story { gap: 4px; }
  .case-scroll-deck .case-story p { font-size: 13px; line-height: 1.65; }
  .case-scroll-deck .case-story > div { padding: 8px 0; }
  .case-card-result { font-size: 12px; margin-bottom: 10px; }
}

.case-scroll-deck .case-slide.is-current { box-shadow: none !important; }
.case-gallery > .wrap:last-child { position: relative; z-index: 6; padding-bottom: 28px; }
.case-gallery .case-note { max-width: 720px; margin: 0 !important; color: rgba(192, 211, 204, 0.54) !important; font-size: 11px !important; line-height: 1.7; }
.case-scroll-deck:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.9); outline-offset: -8px; }

@media (max-width: 1100px) and (min-width: 801px) {
  .case-scroll-deck .case-slide { inset-inline-start: 59% !important; width: min(760px, 68vw) !important; }
  .case-card-copy { padding: 22px 20px 18px 24px; }
  .case-story > div { padding-block: 9px; }
  .case-story p { font-size: 12px; }
  .case-gallery .case-sidebar .section-title { max-width: 280px; font-size: 38px; }
}

@media (max-width: 800px) {
  .case-gallery { --case-nav-height: 65px; padding: 72px 0 54px !important; overflow: hidden; }
  .case-gallery::before { top: 122px; left: -3vw; font-size: 39vw; }
  .case-gallery .case-layout { display: block !important; width: calc(100% - 36px) !important; margin: auto !important; }
  .case-gallery .case-sidebar { position: relative !important; top: auto !important; height: auto; min-height: 280px; margin-bottom: 20px !important; }
  .case-gallery .case-sidebar .label,
  .case-gallery .case-sidebar .section-title,
  .case-gallery .case-sidebar .gallery-intro { position: relative; top: auto; left: auto; opacity: 1; }
  .case-gallery .case-sidebar .label { margin-bottom: 24px; }
  .case-gallery .case-sidebar .section-title { max-width: 350px; font-size: 35px; }
  .case-gallery .case-sidebar .gallery-intro { max-width: 310px; margin-top: 23px; font-size: 15px; }
  .case-gallery .case-index,
  .case-scroll-reading { display: none !important; }
  .case-scroll-runway { height: auto !important; pointer-events: auto; }
  .case-scroll-deck { position: relative !important; top: auto !important; display: flex !important; flex-direction: column; gap: 22px; width: 100% !important; height: auto !important; min-height: 0 !important; overflow: visible !important; pointer-events: auto; }
  .case-scroll-deck .case-slide { position: relative !important; inset: auto !important; display: block; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; translate: none !important; transform: none !important; box-shadow: none !important; }
  .case-card-surface { height: auto; grid-template-columns: 1fr; grid-template-rows: 245px auto; padding: 8px; clip-path: none; }
  .case-card-copy { min-height: 0; padding: 20px 16px 18px; }
  .case-scroll-deck .case-slide h3 { margin-top: 10px !important; font-size: 24px !important; }
  .case-card-result { margin-bottom: 12px; }
  .case-story > div { padding-block: 11px; }
  .case-story p { font-size: 13px; }
  .case-visual img { transform: scale(1.04) !important; }
  .case-card-arrow { display: none; }
  .case-gallery > .wrap:last-child { width: calc(100% - 36px) !important; padding-top: 28px; padding-bottom: 0; }
}

@media (max-width: 420px) {
  .case-card-surface { grid-template-rows: 220px auto; }
}

@media (prefers-reduced-motion: reduce) and (min-width: 801px) {
  .case-gallery { padding: 100px 0 !important; }
  .case-gallery .case-layout { display: grid !important; grid-template-columns: minmax(240px, 0.55fr) minmax(0, 1.45fr) !important; gap: 5% !important; width: min(1320px, calc(100% - 80px)) !important; margin: auto !important; }
  .case-gallery .case-sidebar { position: sticky !important; top: 110px !important; height: auto; min-height: 620px; }
  .case-gallery .case-sidebar .label,
  .case-gallery .case-sidebar .section-title,
  .case-gallery .case-sidebar .gallery-intro { position: relative; top: auto; left: auto; opacity: 1; }
  .case-gallery .case-sidebar .section-title { margin-top: 28px; }
  .case-gallery .case-sidebar .gallery-intro { margin-top: 24px; }
  .case-gallery .case-index,
  .case-scroll-reading { display: none !important; }
  .case-scroll-runway { height: auto !important; }
  .case-scroll-deck { position: relative !important; top: auto !important; display: grid !important; grid-template-columns: 1fr; gap: 24px; width: 100% !important; height: auto !important; }
  .case-scroll-deck .case-slide { position: relative !important; inset: auto !important; grid-template-columns: 42% 58%; width: 100% !important; height: 560px !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; translate: none !important; transform: none !important; }
  .case-card-arrow { display: none; }
  .case-card-surface { transition: none; clip-path: none; }
}