@font-face {
  font-family: "DunbenSerif";
  src: url("../../assets/fonts/LibertinusSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DunbenSerif";
  src: url("../../assets/fonts/LibertinusSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DunbenSans";
  src: url("../../assets/fonts/DMSans-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

/* Noto Sans SC — CJK-only fallback for the serif display stack below.
   DunbenSerif/Libertinus Sans/Georgia have no Chinese glyphs, so any
   Chinese text inside --font-primary elements (Client heading, Challenge,
   Judgement card titles, Reflection lead) was silently falling back to
   the OS's default serif CJK font (e.g. Songti SC on macOS). This face
   is scoped to CJK code points via unicode-range, so Latin text in the
   same elements keeps using the serif stack untouched.
   The source file draws Regular-weight glyphs but is registered here at
   font-weight: 700 on purpose: every element that consumes --font-primary
   (.dv-case-display, .dv-case-h3, .dv-case-judgement-card__head h3, ...)
   has font-weight: 700 baked into its own rule, and some of those elements
   also carry Latin-only text (Hero title, "Visual Showcase") that is meant
   to stay bold serif. Matching this face to that existing 700 means the
   Chinese glyphs render at a lighter, more legible weight without having
   to touch font-weight on any selector — Latin text in the same elements
   is unaffected because unicode-range keeps this face out of the Latin fallback.
   File is a subset (~860 glyphs, see docs/component-modules.md §5.1) built
   from the actual case content; characters outside the subset fall through
   to the next font in --font-primary rather than showing tofu. Regenerate
   the subset (see docs) if new case content introduces new Chinese characters.
   The `?v=` on the font URL itself (not just this stylesheet's own `?v=`) is
   required — file:// pages disk-cache the font by URL, so re-subsetting
   without bumping this query string leaves stale glyphs showing even after a
   hard refresh of the CSS. Bump it every time the .woff2 bytes change. */
@font-face {
  font-family: "Noto Sans SC";
  src: url("../../assets/fonts/NotoSansSC-Regular-subset.woff2?v=20260819-add-ke-rao") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}

:root {
  --font-primary: "Noto Sans SC", "DunbenSerif", "Libertinus Sans", Georgia, serif;
  --font-secondary: "DunbenSans", Helvetica, Arial, sans-serif;
  --case-bg: #121314;
  --case-panel: #191919;
  --case-ink: #f7f5f2;
  --case-paper: #f7f5f2;
  --case-paper-ink: #1b1b1b;
  --case-muted: #929292;
  --case-soft: #858585;
  --case-accent: #ff8f29;
  --case-blue: #164cdf;
  --case-line: #2a2a2a;
  --case-margin: clamp(24px, 2.35vw, 42px);
  --case-max: min(100% - var(--case-margin) * 2, 1792px);
  --case-content: min(100% - var(--case-margin) * 2, 1360px);
  --case-showcase: min(100% - var(--case-margin) * 2, 1060px);
  --case-radius: 24px;
  --case-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --case-ease-out: cubic-bezier(0.26, 0.1, 0, 1);
  --ss-wheel-multiplier: 2.4;
  --ss-lerp: 0.35;
  --ss-stop-threshold: 2px;
  --ss-max-wheel-delta: 1800;
  --ss-keyboard-multiplier: 2;
  --ss-velocity-lerp: 0.6;
  --ss-velocity-decay: 0.99;
  --ss-velocity-normalizer: 180;
  --ss-native-velocity-boost: 1.2;
  --ss-velocity-stop: 0.5;
  --ss-wind-y-max: 14px;
  --ss-wind-rotate-max: 0.7deg;
  --ss-wind-blur-max: 0.8px;
  --ss-heading-y-max: 8px;
  --ss-heading-skew-max: 0.65deg;
  --ss-wind-duration: 180ms;
  --ss-reveal-trigger: 0.98;
  --ss-reveal-distance: 100px;
  --ss-reveal-duration: 1000ms;
  --ss-reveal-ease: cubic-bezier(0.26, 0.1, 0, 1);
  --ss-parallax-strength: 1.6;
  --ss-section-gap: 100px;
  --ss-card-radius: 24px;
  /* Card-stack — native position:sticky pinning (compositor-synced, no swim) */
  --case-stack-top: clamp(92px, 12vh, 132px);     /* pin line distance from viewport top */
  --case-stack-peek: 18px;                          /* visual offset between stacked card edges */
  --case-stack-travel: clamp(300px, 42vh, 520px);  /* scroll distance between card snaps — tune the pacing here */
  --case-stack-hold: 0px;                          /* release immediately once the last card has fully stacked */
  --case-stack-min-scale: 0.94;                     /* scale floor for a fully-covered card */
}

html.dv-case-page {
  background: var(--case-bg);
  scroll-behavior: auto;
}

body.dv-case-body {
  margin: 0;
  min-height: 100%;
  background: var(--case-bg);
  color: var(--case-ink);
  font-family: var(--font-secondary, Arial, sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.1;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.dv-case-body *,
.dv-case-body *::before,
.dv-case-body *::after {
  box-sizing: border-box;
}

.dv-case-body a {
  color: inherit;
  text-decoration: none;
}

.dv-case-body p,
.dv-case-body h1,
.dv-case-body h2,
.dv-case-body h3 {
  margin: 0;
}

.dv-case-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--case-bg);
  transition: opacity 0.8s var(--case-ease);
  pointer-events: none;
}

html.dv-case-ready .dv-case-loader {
  opacity: 0;
}

.dv-case-page-wrap {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  overflow: clip;
  background: var(--case-bg);
}

.dv-case-main {
  position: relative;
  z-index: 1;
  width: 100%;
}

.dv-case-display,
.dv-case-h3,
.dv-case-subhead,
.dv-case-judgement__intro,
.dv-case-judgement-card__head h3,
.dv-case-showcase__heading h2,
.dv-case-reflection__lead,
.dv-case-next__title,
.dv-case-next__name {
  font-family: var(--font-primary, Georgia, serif);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.dv-case-display {
  font-size: clamp(44px, 3.58vw, 64px);
  line-height: 1.02;
}

.dv-case-subhead {
  font-size: clamp(22px, 1.56vw, 28px);
  line-height: 1.12;
}

.dv-case-h3 {
  font-size: clamp(30px, 2.35vw, 42px);
  line-height: 1.02;
}

.dv-case-small-title,
.dv-case-scope__item,
.dv-case-judgement-card__head span,
.dv-case-judgement-card__body,
.dv-case-showcase-card h3,
.dv-case-showcase-card p,
.dv-case-reflection__body {
  font-family: var(--font-secondary, Arial, sans-serif);
}

.dv-case-small-title {
  display: block;
  margin-bottom: 24px;
  color: var(--case-ink);
  font-size: 16px;
  line-height: 1;
}

.dv-case-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--case-max);
  margin: 0 auto;
  padding: clamp(132px, 11.72vw, 210px) var(--case-margin) 20px;
  text-align: center;
}

.dv-case-hero__title {
  max-width: 800px;
  margin: 0 auto 24px;
}

.dv-case-body .dv-case-hero__title {
  margin-bottom: 24px;
}

.dv-case-hero__description {
  max-width: 560px;
  margin: 0 auto clamp(64px, 5.58vw, 100px);
  color: var(--case-muted);
}

.dv-case-body .dv-case-hero__description {
  margin-bottom: clamp(64px, 5.58vw, 100px);
}

.dv-case-media {
  width: min(100% - 80px, 1280px);
  margin: 0 auto;
  border-radius: var(--case-radius);
  overflow: clip;
  background: #1c1c1c;
  transform: translateZ(0);
}

.dv-case-media img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1.035);
  transition: transform 1.3s var(--case-ease);
}

html.dv-case-ready .dv-case-media img {
  transform: scale(1);
}

.dv-case-overview {
  display: grid;
  grid-template-columns: 592px minmax(0, 1fr);
  gap: 28px;
  width: var(--case-content);
  margin: clamp(78px, 5.8vw, 104px) auto 0;
}

.dv-case-overview__main .dv-case-h3 {
  max-width: 740px;
}

.dv-case-scope {
  display: grid;
  grid-template-columns: minmax(0, 549px) minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  width: var(--case-content);
  margin: clamp(92px, 6.7vw, 120px) auto 0;
  padding: 48px;
  border-radius: var(--case-radius);
  background: var(--case-paper);
  color: var(--case-paper-ink);
}

.dv-case-scope__items {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.dv-case-scope__item {
  color: var(--case-paper-ink);
  font-size: clamp(16px, 1.06vw, 19px);
  line-height: 1.45;
}

.dv-case-scope__item strong {
  font-weight: 700;
}

.dv-case-judgement {
  width: var(--case-content);
  margin: clamp(118px, 8.37vw, 150px) auto 0;
}

.dv-case-judgement__intro {
  max-width: 1360px;
  margin-bottom: clamp(54px, 4.46vw, 80px);
  color: var(--case-ink);
  font-size: clamp(38px, 2.9vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.012em;
}

.dv-case-body .dv-case-judgement__intro {
  margin-bottom: clamp(54px, 4.46vw, 80px);
}

.dv-case-judgement__cards {
  position: relative;
  display: block;
  --case-stack-pin-height: 446px;
  --case-stack-scroll: calc(var(--case-stack-travel) * 2 + var(--case-stack-hold));
  --case-stack-entry-y: calc(100vh - var(--case-stack-top) + 80px);
}

.dv-case-judgement__pin {
  position: sticky;
  top: var(--case-stack-top);
  z-index: 1;
  height: var(--case-stack-pin-height);
  overflow: visible;
  contain: layout;
}

.dv-case-judgement-card {
  display: grid;
  grid-template-columns: minmax(360px, 560px) minmax(0, 1fr);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  border-radius: 20px;
  background: var(--case-panel);
  opacity: 1;
  transform: translate3d(0, var(--case-stack-y, 0px), 0) scale(var(--case-stack-scale, 1));
  transform-origin: center top;
  transition: none;
  backface-visibility: hidden;
  will-change: transform;
}

.dv-case-judgement-card:nth-child(1) { z-index: 1; }
.dv-case-judgement-card:nth-child(2) { z-index: 2; }
.dv-case-judgement-card:nth-child(3) { z-index: 3; }

/* The top (last) card is never covered — it keeps full size. */
.dv-case-judgement-card:last-of-type { --case-stack-scale: 1; }

/* Real in-flow spacer: it gives the sticky stage enough scroll distance for
   card entries plus the final hold, then releases the whole stack as one group. */
.dv-case-judgement-stack-end {
  width: 100%;
  height: var(--case-stack-scroll);
  pointer-events: none;
}

.dv-case-judgement-card__head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 400px;
  padding: 48px;
  border-right: 1px solid var(--case-line);
}

.dv-case-judgement-card__head span {
  display: block;
  margin-bottom: 40px;
  color: var(--case-accent);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dv-case-judgement-card__head h3 {
  max-width: 440px;
  color: var(--case-ink);
  font-size: clamp(28px, 2vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.dv-case-judgement-card__head strong {
  display: block;
  margin-top: 60px;
  color: #252525;
  font-family: var(--font-primary, Georgia, serif);
  font-size: clamp(78px, 6.7vw, 120px);
  font-weight: 700;
  line-height: 0.9;
}

.dv-case-judgement-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 48px 48px 56px;
  color: #888;
  font-size: 16px;
  line-height: 1.65;
}

.dv-case-judgement-card__body p + p {
  margin-top: 20px;
}

.dv-case-showcase {
  width: 100%;
  max-width: var(--case-max);
  margin: 0 auto;
  padding: clamp(80px, 5.58vw, 100px) var(--case-margin) 0;
}

.dv-case-showcase__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(420px, 36.83vw, 660px);
  text-align: center;
}

.dv-case-showcase__heading h2 {
  max-width: 780px;
}

.dv-case-bending-gallery {
  --gallery-card-width: clamp(210px, 21vw, 330px);
  --gallery-card-gap: clamp(22px, 2.8vw, 48px);
  --gallery-card-radius: 20px;
  --gallery-x: 0px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(18px, 2vw, 36px) 0 clamp(78px, 7.8vw, 140px);
  opacity: 0;
  transform: translateY(var(--ss-reveal-distance));
  transition:
    transform var(--ss-reveal-duration) var(--ss-reveal-ease),
    opacity var(--ss-reveal-duration) ease-in;
}

.dv-case-bending-gallery.show {
  opacity: 1;
  transform: translateY(0);
}

.dv-case-bending-gallery__viewport {
  position: relative;
  width: 100%;
  min-height: calc(var(--gallery-card-width) * 1.91 + 80px);
  overflow: hidden;
  cursor: grab;
  perspective: 1100px;
  perspective-origin: 50% 48%;
  touch-action: pan-y;
  user-select: none;
}

.dv-case-bending-gallery.is-dragging .dv-case-bending-gallery__viewport {
  cursor: grabbing;
}

.dv-case-bending-gallery__track {
  position: absolute;
  top: 34px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--gallery-card-gap);
  width: max-content;
  transform: translate3d(calc(-50% + var(--gallery-x)), 0, 0);
  transform-style: preserve-3d;
  will-change: transform;
}

.dv-case-bending-gallery__item {
  --gallery-angle: 0deg;
  --gallery-depth: 0px;
  --gallery-lift: 0px;
  --gallery-scale: 1;
  flex: 0 0 var(--gallery-card-width);
  width: var(--gallery-card-width);
  margin: 0;
  overflow: hidden;
  border-radius: var(--gallery-card-radius);
  background: transparent;
  box-shadow: none;
  transform:
    translate3d(0, var(--gallery-lift), var(--gallery-depth))
    rotateY(var(--gallery-angle))
    scale(var(--gallery-scale));
  transform-origin: center center;
  transition: box-shadow 220ms var(--case-ease-out);
  will-change: transform;
}

.dv-case-bending-gallery.is-dragging .dv-case-bending-gallery__item {
  transition-duration: 0ms;
}

.dv-case-bending-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.dv-case-bending-gallery--single {
  --gallery-card-width: min(82vw, 1120px);
}

.dv-case-bending-gallery--single .dv-case-bending-gallery__viewport {
  min-height: clamp(520px, 52vw, 760px);
}

.dv-case-bending-gallery--single .dv-case-bending-gallery__track {
  top: 0;
}

/* One-column vertical stack — opt in via `showcaseVariant: "one-column"` in
   cases/case-data.js (currently gucci only). Values sourced from
   Playground/visual-showcase-playground/visual-showcase-params.json
   (desktop/mobile layout + entryMotion). scrollMotion from that export is a
   no-op on desktop (shift/rotate 0) and a barely-visible 18px shift on
   mobile only, so it's intentionally not reproduced here. */
.dv-case-showcase-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  width: min(100% - var(--case-margin) * 2, 1200px);
  margin: 0 auto;
  padding: clamp(18px, 2vw, 36px) 0 clamp(78px, 7.8vw, 140px);
}

.dv-case-showcase-stack__item {
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 900ms cubic-bezier(0.26, 0.1, 0, 1),
    transform 900ms cubic-bezier(0.26, 0.1, 0, 1);
}

.dv-case-showcase-stack.show .dv-case-showcase-stack__item {
  opacity: 1;
  transform: translateY(0);
}

.dv-case-showcase-stack.show .dv-case-showcase-stack__item:nth-child(2) {
  transition-delay: 90ms;
}

.dv-case-showcase-stack__item img,
.dv-case-showcase-stack__item video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 680px) {
  .dv-case-showcase-stack {
    width: min(100% - var(--case-margin) * 2, 720px);
    gap: 16px;
  }

  .dv-case-showcase-stack__item {
    transform: translateY(36px);
    transition-duration: 700ms;
  }

  .dv-case-showcase-stack.show .dv-case-showcase-stack__item:nth-child(2) {
    transition-delay: 60ms;
  }
}

/* Scroll-window frames — opt in via `showcaseVariant: "scroll-frame"` in
   cases/case-data.js. For tall full-page screenshots (e.g. Amway's PC page
   captures) that don't fit the standard 2002x1112 showcase ratio: each
   frame stays cropped to a fixed viewfinder and shows the top of the page
   by default. On every breakpoint the frame stays cropped — only the ratio
   changes — and the image scrolls inside it instead of the main page:
   mouse wheel on desktop/tablet, touch-drag on mobile (pointerType-gated
   in setupScrollFrame, gucci/detail.js — not a screen-size check, so a
   touch laptop still gets both). */
.dv-case-showcase-frames {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 58px;
  width: min(100% - var(--case-margin) * 2, 1200px);
  margin: 0 auto;
  padding: clamp(18px, 2vw, 36px) 0 clamp(78px, 7.8vw, 140px);
}

.dv-case-showcase-frame {
  margin: 0;
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 900ms cubic-bezier(0.26, 0.1, 0, 1),
    transform 900ms cubic-bezier(0.26, 0.1, 0, 1);
}

.dv-case-showcase-frames.show .dv-case-showcase-frame {
  opacity: 1;
  transform: translateY(0);
}

.dv-case-showcase-frames.show .dv-case-showcase-frame:nth-child(2) {
  transition-delay: 90ms;
}

.dv-case-showcase-frame__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 2002 / 1112;
  overflow: hidden;
  border-radius: 12px;
  background: #1c1c1c;
  /* JS drives the vertical drag on touch; without this the browser's own
     touch-scroll grabs the gesture before pointermove ever fires. */
  touch-action: none;
}

.dv-case-showcase-frame.has-overflow .dv-case-showcase-frame__viewport {
  cursor: ns-resize;
}

.dv-case-showcase-frame__viewport img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
}

/* Thin progress rail, right edge — only shown once the frame actually has
   room to scroll, as a quiet hint that wheel-scrolling here moves the
   image rather than the page. */
.dv-case-showcase-frame__viewport::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: calc(var(--frame-scroll-progress, 0) * 100%);
  background: rgba(255, 255, 255, 0.55);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}

.dv-case-showcase-frame.has-overflow .dv-case-showcase-frame__viewport:hover::after {
  opacity: 1;
}

/* Native scroll window (opt in: `scrollFrameNative` in case-data.js).
   The viewport stays the rounded, clipped window (and hosts the progress
   rail, which therefore doesn't scroll away); the inner __scroller is the
   real overflow:auto element. touch-action stays default (pan-y allowed) so
   the browser owns the gesture: finger-follow, inertia and chaining to the
   page at either end. */
.dv-case-showcase-frame--native .dv-case-showcase-frame__viewport {
  touch-action: auto;
  isolation: isolate;
}

.dv-case-showcase-frame--native.has-overflow .dv-case-showcase-frame__viewport {
  cursor: auto;
}

.dv-case-showcase-frame__scroller {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  /* Edge hand-off to the page is done per-event in JS
     (setupNativeScrollFrame) — the browser's own chaining is turned off so
     it can't double-scroll the page or rubber-band the frame meanwhile. */
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  outline: none;
}

.dv-case-showcase-frame__scroller::-webkit-scrollbar {
  display: none;
}

.dv-case-showcase-frame__scroller:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
  border-radius: inherit;
}

.dv-case-showcase-frame--native .dv-case-showcase-frame__viewport img {
  position: static;
  width: 100%;
  height: auto;
  will-change: auto;
}

.dv-case-showcase-frame--native .dv-case-showcase-frame__viewport::after {
  z-index: 1;
}

/* No hover on touch — show the rail while the frame is actually moving. */
.dv-case-showcase-frame--native.has-overflow.is-scrolling .dv-case-showcase-frame__viewport::after {
  opacity: 1;
}

/* Quiet English affordance label under each frame — small, muted, doesn't
   compete with the frame itself. Covers both input styles ("scroll" reads
   fine for wheel and for a touch swipe). */
.dv-case-showcase-frame__hint {
  margin: 14px 0 0;
  text-align: center;
  font-family: var(--font-secondary, Arial, sans-serif);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

@media (max-width: 1100px) and (min-width: 681px) {
  .dv-case-showcase-frames {
    gap: 48px;
  }
}

@media (max-width: 680px) {
  .dv-case-showcase-frames {
    width: min(100% - var(--case-margin) * 2, 720px);
    gap: 46px;
  }

  .dv-case-showcase-frame {
    transform: translateY(36px);
    transition-duration: 700ms;
  }

  .dv-case-showcase-frames.show .dv-case-showcase-frame:nth-child(2) {
    transition-delay: 60ms;
  }

  /* Phones keep the cropped-viewfinder pattern too — just a taller, more
     portrait-friendly ratio than desktop's wide 2002:1112 window, since the
     source is a narrow PC page shrunk to phone width (tall and thin, not
     wide and short). This is an estimate from the reference screenshot;
     nudge the ratio here if it should show noticeably more or less per
     screenful. */
  .dv-case-showcase-frame__viewport {
    aspect-ratio: 3 / 4;
  }

  .dv-case-showcase-frame__hint {
    margin-top: 10px;
    font-size: 11px;
  }
}

/* Mixed showcase — plain screenshots followed by scroll-frame viewfinders
   in one vertical column (opt in via `showcaseVariant: "stack-with-frames"`
   in cases/case-data.js, e.g. Deloitte: two flat images then two scrollable
   full-page captures). Reuses .dv-case-showcase-stack__item and
   .dv-case-showcase-frame markup/behavior unchanged — both already carry
   their own hidden/opacity/transform base styles — this container just
   gives both a single unified grid + reveal stagger instead of splitting
   them into two separately-padded sections. */
.dv-case-showcase-mixed {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 58px;
  width: min(100% - var(--case-margin) * 2, 1200px);
  margin: 0 auto;
  padding: clamp(18px, 2vw, 36px) 0 clamp(78px, 7.8vw, 140px);
}

.dv-case-showcase-mixed.show > .dv-case-showcase-stack__item,
.dv-case-showcase-mixed.show > .dv-case-showcase-frame {
  opacity: 1;
  transform: translateY(0);
}

.dv-case-showcase-mixed.show > :nth-child(2) {
  transition-delay: 90ms;
}

.dv-case-showcase-mixed.show > :nth-child(3) {
  transition-delay: 150ms;
}

.dv-case-showcase-mixed.show > :nth-child(4) {
  transition-delay: 210ms;
}

@media (max-width: 1100px) and (min-width: 681px) {
  .dv-case-showcase-mixed {
    gap: 48px;
  }
}

@media (max-width: 680px) {
  .dv-case-showcase-mixed {
    width: min(100% - var(--case-margin) * 2, 720px);
    gap: 46px;
  }

  .dv-case-showcase-mixed > .dv-case-showcase-stack__item,
  .dv-case-showcase-mixed > .dv-case-showcase-frame {
    transform: translateY(36px);
    transition-duration: 700ms;
  }

  .dv-case-showcase-mixed .dv-case-showcase-frame__viewport {
    aspect-ratio: 3 / 4;
  }
}

.dv-case-showcase__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 450px));
  justify-content: space-between;
  gap: 160px;
  width: var(--case-showcase);
  min-height: 1600px;
  margin: 0 auto;
}

.dv-case-showcase__column {
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.dv-case-showcase__column--offset {
  padding-top: 0;
  transform: translateY(-120px);
}

.dv-case-showcase-card {
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: 40px;
  border-radius: var(--case-radius);
  background: var(--case-paper);
  color: var(--case-paper-ink);
  will-change: transform;
}

.dv-case-showcase-card h3 {
  max-width: 360px;
  margin-bottom: 24px;
  color: var(--case-blue);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
}

.dv-case-showcase-card p {
  max-width: 340px;
  color: var(--case-paper-ink);
  font-family: var(--font-primary, Georgia, serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}

.dv-case-reflection {
  width: var(--case-content);
  margin: clamp(96px, 6.7vw, 120px) auto 0;
  padding-bottom: 60px;
}

.dv-case-reflection__rule {
  height: 1px;
  margin-bottom: 48px;
  background: var(--case-ink);
}

.dv-case-reflection .dv-case-small-title {
  margin-bottom: 48px;
}

.dv-case-reflection__lead {
  max-width: 1100px;
  margin-bottom: 40px;
  color: var(--case-ink);
  font-size: clamp(28px, calc(2.46vw - 6px), 38px);
  line-height: 1.12;
}

.dv-case-reflection__body {
  max-width: 860px;
  color: var(--case-muted);
  font-size: clamp(16px, 1vw, 18px);
  line-height: 1.65;
}

.dv-case-reflection__body p + p {
  margin-top: 24px;
}

.dv-case-next {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 914px;
  text-align: center;
}

.dv-case-next__title,
.dv-case-next__name {
  max-width: 820px;
  font-family: var(--font-primary, Georgia, serif);
  font-size: clamp(34px, 2.68vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.dv-case-next__name {
  margin-top: 4px;
  color: var(--case-muted);
}

[data-case-reveal],
[data-fade-in],
[data-fade-in-y] {
  will-change: opacity, transform;
}

[data-case-reveal] {
  opacity: 0;
  transform: translateY(var(--ss-reveal-distance));
  transition:
    transform var(--ss-reveal-duration) var(--ss-reveal-ease),
    opacity var(--ss-reveal-duration) ease-in;
}

[data-fade-in] {
  opacity: 0;
  transition: opacity var(--ss-reveal-duration) ease-in;
}

[data-fade-in-y] {
  opacity: 0;
  transform: translateY(var(--ss-reveal-distance));
  transition:
    transform var(--ss-reveal-duration) var(--ss-reveal-ease),
    opacity var(--ss-reveal-duration) ease-in;
}

.show[data-case-reveal],
.show[data-fade-in],
.show[data-fade-in-y] {
  opacity: 1;
  transform: translateY(0);
}

.dv-case-hero [data-case-reveal]:nth-child(1) { transition-delay: 0.16s; }
.dv-case-hero [data-case-reveal]:nth-child(2) { transition-delay: 0.26s; }
.dv-case-scope__item:nth-child(1),
.dv-case-showcase-card:nth-child(1) { transition-delay: 0.2s; }
.dv-case-scope__item:nth-child(2),
.dv-case-showcase-card:nth-child(2) { transition-delay: 0.4s; }
.dv-case-scope__item:nth-child(3),
.dv-case-showcase-card:nth-child(3) { transition-delay: 0.6s; }

@media (max-width: 1100px) {
  .dv-case-overview,
  .dv-case-scope,
  .dv-case-judgement-card {
    grid-template-columns: 1fr;
  }

  .dv-case-overview {
    gap: 56px;
  }

  .dv-case-scope,
  .dv-case-judgement-card__head,
  .dv-case-judgement-card__body {
    padding: 32px;
  }

  /* Stacked single-column layout — heading sits directly above the paragraph
     now that the "What I owned." kicker is gone, so the gap between them can
     be tighter than the desktop side-by-side gap. */
  .dv-case-scope {
    gap: 16px;
  }

  /* Below this width the sticky stack would feel cramped — flow the cards normally instead */
  .dv-case-judgement__pin {
    position: static;
    height: auto !important;
    contain: none;
  }

  .dv-case-judgement-card {
    position: static;
    top: auto;
    margin-bottom: 20px;
    transform: none !important;
  }

  .dv-case-judgement-card:last-child {
    margin-bottom: 0;
  }

  .dv-case-judgement-stack-end {
    display: none;
  }

  .dv-case-judgement-card__head {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--case-line);
  }

  .dv-case-bending-gallery {
    --gallery-card-width: clamp(190px, 34vw, 300px);
    padding-bottom: 96px;
  }

  .dv-case-bending-gallery--single {
    --gallery-card-width: min(86vw, 900px);
  }

  .dv-case-bending-gallery--single .dv-case-bending-gallery__viewport {
    min-height: clamp(420px, 64vw, 680px);
  }

  .dv-case-showcase__cards {
    grid-template-columns: 1fr;
    gap: 32px;
    min-height: auto;
  }

  .dv-case-showcase__column,
  .dv-case-showcase__column--offset {
    gap: 32px;
    transform: none;
  }

  .dv-case-showcase-card {
    min-height: 300px;
    transform: none !important;
  }
}

@media (max-width: 680px) {
  .dv-case-display {
    font-size: clamp(34px, 10.2vw, 40px);
  }

  .dv-case-subhead {
    font-size: 20px;
    line-height: 1.16;
  }

  .dv-case-media {
    width: 100%;
  }

  .dv-case-hero {
    padding-top: 126px;
  }

  .dv-case-hero__title {
    margin-bottom: 18px;
  }

  .dv-case-body .dv-case-hero__title {
    margin-bottom: 18px;
  }

  .dv-case-hero__description {
    margin-bottom: 56px;
  }

  .dv-case-body .dv-case-hero__description {
    margin-bottom: 56px;
  }

  .dv-case-scope,
  .dv-case-judgement-card__head,
  .dv-case-judgement-card__body,
  .dv-case-showcase-card {
    padding: 24px;
  }

  .dv-case-scope__item {
    font-size: 15px;
  }

  .dv-case-judgement__cards {
    gap: 18px;
  }

  .dv-case-judgement-stack-end {
    height: 160px;
  }

  .dv-case-next {
    min-height: 620px;
  }

  .dv-case-bending-gallery {
    --gallery-card-width: min(64vw, 250px);
    --gallery-card-gap: 18px;
    --gallery-card-radius: 16px;
    padding-top: 8px;
    padding-bottom: 72px;
  }

  .dv-case-bending-gallery--single {
    --gallery-card-width: min(88vw, 520px);
  }

  .dv-case-bending-gallery__viewport {
    min-height: calc(var(--gallery-card-width) * 1.91 + 48px);
    perspective: none;
  }

  .dv-case-bending-gallery--single .dv-case-bending-gallery__viewport {
    min-height: clamp(320px, 72vw, 480px);
  }

  .dv-case-bending-gallery__track {
    top: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  [data-case-reveal],
  [data-fade-in],
  [data-fade-in-y] {
    opacity: 1 !important;
    transform: none !important;
  }

  .dv-case-judgement__pin {
    position: static;
    height: auto !important;
    contain: none;
  }

  .dv-case-judgement-card {
    position: static;
    margin-bottom: 20px;
    transform: none !important;
  }

  .dv-case-judgement-card:last-child {
    margin-bottom: 0;
  }

  .dv-case-judgement-stack-end {
    display: none;
  }

  .dv-case-bending-gallery {
    opacity: 1 !important;
    transform: none !important;
  }

  .dv-case-bending-gallery__item {
    transform: translate3d(0, 0, 0) !important;
    transition: none !important;
  }
}

/* Applied AI detail-page handoff: keep the old case rhythm, but use the
   current shared footer and the current site's responsive type scale. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10050;
  padding: 10px 14px;
  color: #121314;
  background: #f7f5f2;
  transform: translateY(-160%);
  transition: transform .25s var(--case-ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.dv-case-hero__description {
  font-family: var(--font-secondary, Arial, sans-serif);
  font-size: clamp(18px, 1.42vw, 24px);
  line-height: 1.45;
}

.dv-case-scope__item,
.dv-case-judgement-card__body,
.dv-case-reflection__lead {
  text-wrap: pretty;
}

.dv-case-judgement-card__body {
  font-size: clamp(15px, 1.06vw, 18px);
}

.dv-case-reflection__lead {
  max-width: 1120px;
}

/* Gucci detail typography tuning from the playground. Desktop values are
   intentionally explicit; the compact breakpoint below keeps the same
   hierarchy without allowing the tuned desktop scale to crowd small screens. */
.dv-case-hero__title {
  max-width: 940px;
  font-size: 64px;
  line-height: 1.02;
}

.dv-case-overview__main .dv-case-h3 {
  font-size: 23px;
  line-height: 1.55;
}

.dv-case-judgement__intro {
  font-size: 36px;
  line-height: 1.35;
}

.dv-case-judgement-card__head h3 {
  font-size: 30px;
  line-height: 1.38;
}

.dv-case-judgement-card__body {
  font-size: 18px;
  line-height: 1.66;
}

.dv-case-reflection__lead {
  font-size: 30px;
  line-height: 1.5;
}

@media (max-width: 680px) {
  .dv-case-hero__title {
    max-width: 100%;
    font-size: clamp(34px, 10.2vw, 40px);
    line-height: 1.02;
  }

  .dv-case-overview__main .dv-case-h3 {
    font-size: 23px;
    line-height: 1.55;
  }

  .dv-case-judgement__intro {
    font-size: 30px;
    line-height: 1.35;
  }

  .dv-case-judgement-card__head h3 {
    font-size: 26px;
    line-height: 1.38;
  }

  .dv-case-judgement-card__body {
    font-size: 18px;
    line-height: 1.66;
  }

  .dv-case-reflection__lead {
    font-size: 26px;
    line-height: 1.5;
  }
}

.dv-footer {
  position: relative;
  min-height: min(88svh, 920px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(96px, 12vw, 170px) clamp(22px, 7vw, 100px) clamp(72px, 9vw, 120px);
  overflow: hidden;
  background: #121314;
  color: #fff;
  text-align: center;
}

.dv-footer__inner {
  position: relative;
  z-index: 2;
  width: min(780px, 100%);
  margin: 0 auto;
}

.dv-footer__label {
  margin: 0 0 clamp(28px, 4vw, 54px);
  font-family: var(--font-secondary, Arial, sans-serif);
  font-size: 13px;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.dv-footer__title {
  margin: 0;
  font-family: var(--font-primary, Georgia, serif);
  font-size: clamp(58px, 8vw, 138px);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.045em;
}

.dv-footer__title strong {
  color: #164cdf;
  font-weight: 400;
}

.dv-footer__body {
  max-width: 630px;
  margin: clamp(34px, 4vw, 60px) auto 0;
  color: #858585;
  font-family: var(--font-secondary, Arial, sans-serif);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.48;
}

.dv-footer__icp {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: clamp(22px, 3vw, 44px);
  left: 0;
  margin: 0;
  color: #858585;
  font-family: var(--font-secondary, Arial, sans-serif);
  font-size: 11px;
}

.dv-footer__icp a {
  color: inherit;
  text-decoration: none;
}

.dv-footer__icp a:hover,
.dv-footer__icp a:focus-visible {
  color: #fff;
}

@media (max-width: 680px) {
  .dv-case-overview__main .dv-case-h3 {
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.14;
  }

  .dv-case-judgement__intro {
    font-size: clamp(29px, 8.5vw, 38px);
    line-height: 1.12;
  }

  .dv-case-judgement-card__head h3 {
    font-size: clamp(25px, 7.4vw, 32px);
    line-height: 1.14;
  }

  .dv-footer {
    min-height: 76svh;
    padding: 84px 20px 74px;
  }

  .dv-footer__title {
    font-size: clamp(56px, 15vw, 92px);
  }

  .dv-footer__body {
    margin-top: 31px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skip-link,
  .dv-footer__icp a {
    transition: none;
  }
}