@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. */
@font-face {
  font-family: "Noto Sans SC";
  src: url("../../assets/fonts/NotoSansSC-Regular-subset.woff2") 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__heading p,
.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);
  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__heading p {
  max-width: 440px;
  margin-top: 20px;
  color: var(--case-soft);
  font-size: 16px;
  line-height: 1.5;
}

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

.dv-case-scope__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  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-list__icon {
  display: block;
  width: 14px;
  height: 14px;
  margin-top: 5px;
  border-radius: 4px;
  background: currentColor;
}

.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;
}

.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;
  }

  /* 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-list__icon {
    width: 10px;
    height: 10px;
    border-radius: 3px;
  }

  .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__heading p,
.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;
  }
}