/* HABIBCORE final case layer — controlled collision, scoped to the three
   approved case routes. Composition, motion vocabulary and responsive rules
   are translated from the approved FINAL references onto the production
   tokens; the global shell, chrome and sound system are untouched. */

.hc-case {
  --line: var(--hc-grey-2, oklch(0.8838918 0.0067633 106.5370841));
  --soft: var(--hc-grey-1, oklch(0.9573101 0.003982 106.4744337));
  --muted: var(--hc-grey-3, oklch(0.5667989 0.0120385 106.7775519));
  --warm: oklch(0.9409546 0.0156128 86.4264442);
  --acid: oklch(0.9394161 0.2173413 120.4917716);
  --signal-relay: oklch(0.7247253 0.1821763 46.0383762);
  --g: clamp(18px, 3vw, 44px);
  --max: 1500px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --chrome-top: 64px; /* clears the floating corner chips */
  background: var(--hc-paper, oklch(1 0 none));
  color: var(--hc-ink, oklch(0.1149183 0 none));
  font-family: var(--hc-font-sans, Archivo, sans-serif);
  overflow-x: clip;
}
.hc-case * { box-sizing: border-box; }
.hc-case img { display: block; width: 100%; height: auto; }
.hc-case main { display: block; }

/* Case container: mirrors the editorial shell, keeps clear of the icon dock. */
.hc-case .hc-shell {
  width: min(var(--max), calc(100vw - 168px));
  margin-inline-start: max(92px, calc((100vw - var(--max)) / 2));
  padding-inline-end: var(--g);
}
.hc-case .hc-ey {
  font: 600 9px/1.45 var(--hc-font-mono, monospace);
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.hc-case .hc-big {
  font-weight: 850; letter-spacing: -.075em; line-height: .78;
  text-transform: uppercase; margin: 0;
}
.hc-case .hc-tlink { color: inherit; }

/* ============ HERO ============ */
.hc-case .hc-hero {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px;
  align-content: start; padding-block-start: 118px; min-height: 100vh;
}
.hc-case .hc-crumb { grid-column: 1 / -1; padding-block-start: 8px; }
.hc-case .hc-hero h1 { grid-column: 1 / 10; font-size: clamp(4.5rem, calc(.25rem + 10.7222222vw), 11.875rem); margin-block: 56px 0; margin-inline: 0; }
.hc-case-4dk .hc-project-mark { inline-size: min(100%, 3em); block-size: auto; }
.hc-case-4dk { --acid: oklch(0.9397454 0.2204271 120.1239457); }
.hc-case .hc-hero-meta {
  grid-column: 10 / 13; align-self: end; margin-block-end: 12px; border-block-start: 1px solid var(--hc-ink);
}
.hc-case .hc-hero-meta > div {
  padding: 12px 0; border-block-end: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 18px;
  font: 600 9px var(--hc-font-mono, monospace); text-transform: uppercase;
}
.hc-case .hc-hero-meta b { font-weight: 600; text-align: end; }
.hc-case .hc-hero-statement {
  grid-column: 1 / 7; font-size: clamp(1.625rem, calc(.25rem + 2.7222222vw), 2.875rem); line-height: .95;
  font-weight: 750; letter-spacing: -.045em; margin-block: 38px 60px; margin-inline: 0;
}
.hc-case .hc-hero-side {
  grid-column: 9 / 13; align-self: end; margin-block-end: 60px;
  font-size: 16px; line-height: 1.45; max-width: 440px;
}

/* V5 controlled-collision stage */
.hc-case .hc-stage {
  grid-column: 1 / -1; position: relative; min-height: 920px; overflow: clip;
  background: var(--hc-paper, oklch(1 0 none)); isolation: isolate;
  border-block-start: 1px solid var(--line); border-block-end: 1px solid var(--line);
}
.hc-case .hc-gridlines {
  position: absolute; inset: 0; z-index: 0; opacity: .23; pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(25% - 1px), color-mix(in oklch, oklch(0 0 none) 8%, transparent) calc(25% - 1px), color-mix(in oklch, oklch(0 0 none) 8%, transparent) 25%, transparent 25%) 0 0 / 25% 100%,
    linear-gradient(to bottom, transparent calc(50% - 1px), color-mix(in oklch, oklch(0 0 none) 5%, transparent) calc(50% - 1px), color-mix(in oklch, oklch(0 0 none) 5%, transparent) 50%, transparent 50%) 0 0 / 100% 50%;
}
.hc-case .hc-stage-meta {
  position: absolute; inset-block-start: 18px; z-index: 8;
  font: 600 8px var(--hc-font-mono, monospace); letter-spacing: .12em; color: var(--muted);
}
.hc-case .hc-stage-meta-l { inset-inline-start: 18px; }
.hc-case .hc-stage-meta-r { inset-inline-end: 18px; }
.hc-case .hc-wordmark {
  position: absolute; z-index: 1; inset-inline-start: 7%; inset-block-start: 10%;
  font-size: clamp(8.125rem, calc(.25rem + 17.7222222vw), 18.125rem); font-weight: 850; line-height: .8;
  letter-spacing: -.085em; color: color-mix(in oklch, oklch(0 0 none) 4.5%, transparent); text-transform: uppercase;
  pointer-events: none; user-select: none;
  transform: translate3d(var(--hcw-x, 0px), var(--hcw-y, 0px), 0);
}
.hc-case .hc-shot {
  position: absolute; z-index: 4; will-change: transform;
  filter: drop-shadow(0 18px 36px color-mix(in oklch, oklch(0 0 none) 8%, transparent));
}
.hc-case .hc-shot img { border: 1px solid color-mix(in oklch, oklch(0 0 none) 8%, transparent); }
.hc-case .hc-tag {
  position: absolute; inset-block-start: -21px; inset-inline-start: 0;
  font: 700 8px var(--hc-font-mono, monospace); letter-spacing: .12em; color: oklch(0.4475738 0.0095775 106.7803391);
}
.hc-case .hc-shot-a {
  inset-inline-start: 8%; inset-block-start: 24%; width: min(28vw, 420px);
  transform: translate3d(var(--hca-x, 0px), var(--hca-y, 0px), 0) rotate(var(--hca-r, -4deg)) scale(var(--hca-s, 1));
}
.hc-case .hc-shot-b {
  inset-inline-end: 7%; inset-block-start: 16%; width: min(30vw, 450px);
  transform: translate3d(var(--hcb-x, 0px), var(--hcb-y, 0px), 0) rotate(var(--hcb-r, 4.5deg)) scale(var(--hcb-s, 1));
}
.hc-case .hc-shot-c {
  inset-inline-end: 25%; inset-block-end: 8%; width: min(18vw, 270px);
  transform: translate3d(var(--hcc-x, 0px), var(--hcc-y, 0px), 0) rotate(var(--hcc-r, -2deg)) scale(var(--hcc-s, 1));
}
.hc-case .hc-thesis {
  position: absolute; z-index: 7; inset-inline-start: 24%; inset-block-start: 48%; width: min(66vw, 1050px);
  font-size: clamp(4.5rem, calc(.25rem + 8.1222222vw), 8.875rem); font-weight: 850; line-height: .79;
  letter-spacing: -.073em; text-transform: uppercase; pointer-events: none;
  transform: translate3d(var(--hct-x, 0px), var(--hct-y, 0px), 0);
}
.hc-case .hc-thesis span, .hc-case .hc-thesis strong { display: block; }
.hc-case .hc-thesis strong { font-weight: 850; color: oklch(1 0 none); -webkit-text-stroke: 2px var(--hc-ink, oklch(0.1149183 0 none)); }
.hc-case .hc-sub {
  position: absolute; z-index: 7; inset-inline-start: 24.5%; inset-block-start: 73%;
  font: 700 9px var(--hc-font-mono, monospace); letter-spacing: .12em; color: oklch(0.4475738 0.0095775 106.7803391);
}
.hc-case .hc-scroll {
  position: absolute; z-index: 8; inset-inline-start: 50%; inset-block-end: 18px; transform: translateX(-50%);
  font: 600 8px var(--hc-font-mono, monospace); letter-spacing: .11em; color: var(--muted);
}
.hc-case .hc-scroll-hint {
  grid-column: 1 / -1; justify-self: center; padding-block: 14px 26px; padding-inline: 0;
  font: 600 9px var(--hc-font-mono, monospace); letter-spacing: .11em; color: var(--muted);
}
@media (prefers-reduced-motion: no-preference) {

  .hc-case .hc-scroll-hint {
  animation: hcHintPulse 1.8s ease-in-out infinite alternate;
  }
}
@keyframes hcHintPulse { from { opacity: .35; } to { opacity: 1; } }
@media (hover:hover) and (pointer:fine) {
  .hc-case .hc-shot { transition: filter .35s ease; }
  .hc-case .hc-shot:hover { z-index: 10; filter: drop-shadow(0 26px 60px color-mix(in oklch, oklch(0 0 none) 14%, transparent)); }
}

/* Chef4Me V7 hero legibility: keep the collision, restore hierarchy.
   THE PANTRY reads on a white editorial plate; IS THE PROMPT. on acid over ink. */
.hc-case-4dk .hc-thesis {
  inset-inline-start: 50%; inset-block-start: 43%; width: min(72vw, 1080px);
  transform: translate3d(calc(-50% + var(--hct-x, 0px)), var(--hct-y, 0px), 0);
  font-size: clamp(3.875rem, calc(.25rem + 6.9722222vw), 7.625rem); line-height: .82; letter-spacing: -.068em; z-index: 12;
}
.hc-case-4dk .hc-thesis span, .hc-case-4dk .hc-thesis strong {
  width: max-content; max-width: 100%; padding-block: .015em .04em; padding-inline: .05em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hc-case-4dk .hc-thesis span {
  color: var(--hc-ink, oklch(0.1149183 0 none)); background: oklch(1 0 none); box-shadow: 0 0 0 1px color-mix(in oklch, oklch(0.1149183 0 none) 90%, transparent);
}
.hc-case-4dk .hc-thesis strong {
  margin-block-start: .025em; color: var(--acid); background: var(--hc-ink, oklch(0.1149183 0 none));
  -webkit-text-stroke: 0; box-shadow: 0 0 0 1px var(--hc-ink, oklch(0.1149183 0 none));
}
.hc-case-4dk .hc-sub {
  inset-inline-start: 50%; inset-block-start: 68.5%; transform: translateX(-50%); z-index: 13;
  background: oklch(1 0 none); color: var(--hc-ink, oklch(0.1149183 0 none));
  border: 1px solid color-mix(in oklch, oklch(0.1149183 0 none) 85%, transparent); padding: 7px 10px;
  width: max-content; max-width: 70vw; white-space: normal; text-align: center;
}
.hc-case-4dk .hc-shot-a, .hc-case-4dk .hc-shot-b { z-index: 4; }
.hc-case-4dk .hc-shot-c { z-index: 5; }
.hc-case-4dk .hc-wordmark { opacity: .72; }

/* Hero entrance */
.hc-case .hc-enter {
  opacity: 0; transform: translate3d(0, 44px, 0);
}
@media (prefers-reduced-motion: no-preference) {

  .habibcore-loaded .hc-case .hc-enter {
  animation: hcCaseEnter .88s var(--ease) var(--hc-enter-delay, 0ms) forwards;
  }
}
@keyframes hcCaseEnter { to { opacity: 1; transform: translate3d(0, 0, 0); } }

/* ============ LOCAL NAV — a progress instrument ============ */
.hc-case .hc-localnav {
  position: sticky; inset-block-start: var(--chrome-top); z-index: 70; overflow: hidden;
  background: color-mix(in oklch, oklch(1 0 none) 96%, transparent); backdrop-filter: blur(8px);
  border-block-start: 1px solid var(--line); border-block-end: 1px solid var(--line); margin-block-start: 80px;
}
.hc-case .hc-localnav .hc-shell {
  position: relative; z-index: 2; display: flex; gap: 24px;
  overflow-x: auto; padding-block: 0;
}
.hc-case .hc-localnav button {
  flex: 0 0 auto;
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  min-block-size: var(--hc-touch-min, 44px); min-inline-size: var(--hc-touch-min, 44px);
  white-space: nowrap; font: 600 9px var(--hc-font-mono, monospace);
  letter-spacing: .08em; text-transform: uppercase; color: inherit;
  transition: opacity .3s ease; opacity: .48;
}
@media (hover: hover) and (pointer: fine) {
.hc-case .hc-localnav button:hover { text-decoration: underline; opacity: .8; }
}
.hc-case .hc-localnav button.is-active { opacity: 1; }
.hc-case .hc-nav-progress {
  position: absolute; inset-inline-start: 0; inset-block-end: 0; z-index: 4; height: 2px;
  width: calc(var(--hc-progress, 0) * 100%);
  background: var(--hc-ink, oklch(0.1149183 0 none)); transform-origin: left center; pointer-events: none;
}

/* ============ COMMON SECTIONS ============ */
.hc-case .hc-sec { padding: 110px 0; }
.hc-case [data-hc-sec] { scroll-margin-block-start: calc(var(--chrome-top) + var(--hc-touch-min, 44px) + 24px); }
.hc-case .hc-sec-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.hc-case .hc-index { grid-column: 1 / 3; }
.hc-case .hc-sec h2 { font-size: clamp(3.625rem, calc(.25rem + 6.7222222vw), 6.5625rem); margin: 0; grid-column: 3 / 11; }
.hc-case .hc-lede { grid-column: 3 / 8; font-size: 21px; line-height: 1.35; margin-block: 35px 0; margin-inline: 0; }
.hc-case .hc-caption {
  font: 600 9px/1.4 var(--hc-font-mono, monospace); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-block-start: 9px;
}

/* Overview */
.hc-case .hc-scope { grid-column: 8 / 13; margin-block-start: 35px; }
.hc-case .hc-scope-row {
  display: flex; justify-content: space-between; gap: 20px;
  border-block-start: 1px solid var(--line); padding: 11px 0;
  font: 600 9px var(--hc-font-mono, monospace); text-transform: uppercase;
}
.hc-case .hc-scope-row:last-child { border-block-end: 1px solid var(--line); }
.hc-case .hc-scope-row b { font-weight: 600; }
.hc-case .hc-echo, .hc-case .hc-echo-result {
  position: absolute; inset-inline-end: -2%; inset-block-start: 18%; z-index: 0;
  font-size: clamp(8.125rem, calc(.25rem + 17.7222222vw), 18.125rem); line-height: .75; font-weight: 850;
  letter-spacing: -.08em; color: color-mix(in oklch, oklch(0 0 none) 4.5%, transparent); pointer-events: none;
}
.hc-case .hc-echo-result { inset-inline-end: 0; inset-block-end: 0; inset-block-start: auto; font-size: clamp(8.75rem, calc(.25rem + 19.7222222vw), 20rem); }
.hc-case .hc-sec { position: relative; }
.hc-case .hc-sec > .hc-sec-grid { position: relative; z-index: 2; }

/* Challenge — dark tension plate */
.hc-case .hc-dark { background: var(--hc-ink, oklch(0.1149183 0 none)); color: oklch(1 0 none); }
.hc-case .hc-dark .hc-ey, .hc-case .hc-dark .hc-caption { color: oklch(0.6644529 0.0101442 106.6724672); }
.hc-case .hc-challenge-sentence {
  grid-column: 1 / -1; font-size: clamp(1.5625rem, calc(.25rem + 2.4222222vw), 2.75rem); line-height: .9;
  letter-spacing: -.045em; font-weight: 800; padding-block: 0 18px; padding-inline: 0; margin-block-end: 18px;
  border-block-end: 1px solid oklch(0.3210925 0 none);
}
.hc-case .hc-tensions {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr);
  margin-block-start: 78px; border-block-start: 1px solid oklch(0.3210925 0 none); border-inline-start: 1px solid oklch(0.3210925 0 none);
}
.hc-case .hc-tension {
  min-height: 325px; padding: 18px; border-inline-end: 1px solid oklch(0.3210925 0 none); border-block-end: 1px solid oklch(0.3210925 0 none);
  display: flex; flex-direction: column; justify-content: space-between;
}
.hc-case .hc-tension .n { font: 600 9px var(--hc-font-mono, monospace); color: oklch(0.5692624 0 none); }
.hc-case .hc-tension h3 {
  font-size: clamp(1.6875rem, calc(.25rem + 2.4222222vw), 2.75rem); line-height: .94; letter-spacing: -.045em;
  margin: 0; max-width: 310px; font-weight: 750;
}
.hc-case .hc-tension p { font-size: 14px; line-height: 1.5; color: oklch(0.7837425 0.0097431 106.6222425); max-width: 340px; margin: 0; }

/* Chapters */
.hc-case .hc-chapter { padding-block: 125px 60px; padding-inline: 0; }
.hc-case .hc-chapter h2 {
  grid-column: 3 / 11; font-size: clamp(3.5rem, calc(.25rem + 6.3222222vw), 6.125rem);
  line-height: .87; letter-spacing: -.06em; text-transform: uppercase;
}
.hc-case .hc-chapter-copy { grid-column: 3 / 8; font-size: 17px; line-height: 1.55; margin-block-start: 32px; }
.hc-case .hc-chapter-copy p { margin: 0; }
.hc-case .hc-chapter-note {
  grid-column: 9 / 13; margin-block-start: 35px;
  font: 600 10px/1.55 var(--hc-font-mono, monospace); text-transform: uppercase; color: var(--muted);
}

/* ============ MEDIA MODULES ============ */
.hc-case .hc-film { padding-block: clamp(2rem, 1rem + 3vw, 4rem); scroll-margin-block-start: 9rem; }
.hc-case .hc-film h2 { margin-block-end: 1rem; }
.hc-case .hc-film video {
  display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9;
  object-fit: contain; background: oklch(0% 0 none); color-scheme: dark;
}
.hc-case .hc-media-full { width: 100%; padding-block: 54px 105px; padding-inline: var(--g); position: relative; }
.hc-case .hc-frame { max-width: 1120px; margin: 0 auto; }
.hc-case .hc-media-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hc-case .hc-media-stack { display: grid; grid-template-columns: .72fr 1.28fr; gap: 24px; align-items: end; }
.hc-case .hc-media-two > figure:nth-child(2) { margin-block-start: 10vw; }
.hc-case .hc-media-stack > figure:nth-child(1) { margin-block-end: 10vw; }
.hc-case figure { margin: 0; }
.hc-case .hc-panel {
  position: relative;
  transform: translate3d(0, var(--scrub-y, 72px), 0) rotate(var(--scrub-rot, 0deg)) scale(var(--scrub-scale, .96));
  opacity: var(--scrub-opacity, 0);
  will-change: transform, opacity;
}
.hc-case .hc-image-window { overflow: clip; border: 1px solid color-mix(in oklch, oklch(0 0 none) 8%, transparent); background: var(--soft); }
.hc-case .hc-image-window img, .hc-case .hc-image-window video {
  display: block; width: 100%; height: auto;
  transform: scale(var(--image-scale, 1.08));
}
@media (prefers-reduced-motion: no-preference) {

  .hc-case .hc-image-window img, .hc-case .hc-image-window video {
  transition: transform 1100ms var(--ease);
  }
}
.hc-case .hc-image-window video { background: var(--hc-ink, oklch(0.1149183 0 none)); transform: scale(var(--image-scale, 1.035)); }
.hc-case .hc-panel.is-in .hc-image-window img,
.hc-case .hc-panel.is-in .hc-image-window video { transform: scale(1); }
.hc-case .hc-panel .hc-caption {
  opacity: 0; transform: translateY(10px);
}
@media (prefers-reduced-motion: no-preference) {

  .hc-case .hc-panel .hc-caption {
  transition: opacity 450ms ease 180ms, transform 600ms var(--ease) 180ms;
  }
}
.hc-case .hc-panel.is-in .hc-caption { opacity: 1; transform: translateY(0); }
@media (hover:hover) and (pointer:fine) {
  .hc-case .hc-image-window { }
  @media (prefers-reduced-motion: no-preference) {

    .hc-case .hc-image-window { transition: transform 450ms var(--ease), box-shadow 450ms ease;
    }
  }
  .hc-case .hc-panel:hover .hc-image-window { transform: translateY(-5px); box-shadow: 0 22px 55px color-mix(in oklch, oklch(0 0 none) 8%, transparent); }
}

/* StickyStory — one deliberate scroll choreography */
.hc-case .hc-stack-scene {
  height: 180vh; padding: 0; border-block-start: 1px solid var(--line); border-block-end: 1px solid var(--line);
}
.hc-case .hc-stack-frame {
  position: sticky; inset-block-start: 110px; height: calc(100vh - 155px);
  max-width: 1220px; display: block; overflow: visible;
}
.hc-case .hc-stack-scene .hc-panel { position: absolute; inset-block-start: 6%; width: min(51%, 590px); opacity: 1; }
.hc-case .hc-stack-card-1 {
  inset-inline-start: 6%; z-index: 2;
  transform: translate3d(var(--st1-x, 0px), var(--st1-y, 0px), 0) rotate(var(--st1-r, -3deg)) scale(var(--st1-s, 1));
}
.hc-case .hc-stack-card-2 {
  inset-inline-end: 5%; inset-block-start: 15%; z-index: 3;
  transform: translate3d(var(--st2-x, 80px), var(--st2-y, 45px), 0) rotate(var(--st2-r, 4deg)) scale(var(--st2-s, .92));
}
.hc-case .hc-stack-scene .hc-caption { opacity: 1; transform: none; }

/* ============ MULTIMODAL STORY ============ */
.hc-case .hc-mm-story {
  position: relative; height: var(--story-height, 340vh);
  border-block-start: 1px solid var(--line); border-block-end: 1px solid var(--line); background: oklch(1 0 none);
}
.hc-case .hc-mm-sticky {
  position: sticky; inset-block-start: calc(var(--chrome-top) + 46px); height: calc(100svh - var(--chrome-top) - 46px);
  overflow: clip; isolation: isolate; background: oklch(1 0 none);
}
.hc-case .hc-mm-bg-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .28;
  background:
    linear-gradient(to right, transparent calc(25% - 1px), var(--line) calc(25% - 1px), var(--line) 25%, transparent 25%) 0 0 / 25% 100%,
    linear-gradient(to bottom, transparent calc(50% - 1px), oklch(0.9174687 0.0067013 106.5308646) calc(50% - 1px), oklch(0.9174687 0.0067013 106.5308646) 50%, transparent 50%) 0 0 / 100% 50%;
}
.hc-case .hc-mm-index {
  position: absolute; z-index: 12; inset-inline-start: var(--g); inset-inline-end: var(--g); inset-block-start: 23px;
  display: flex; justify-content: space-between;
  font: 600 9px var(--hc-font-mono, monospace); letter-spacing: .12em; color: var(--muted);
}
.hc-case .hc-mm-input {
  position: absolute; z-index: 4; width: min(28vw, 420px);
  will-change: transform, opacity; filter: drop-shadow(0 18px 34px color-mix(in oklch, oklch(0 0 none) 8%, transparent));
}
.hc-case .hc-mm-input img { border: 1px solid color-mix(in oklch, oklch(0 0 none) 8%, transparent); }
.hc-case .hc-mm-tag {
  position: absolute; z-index: 3; inset-block-start: -23px; inset-inline-start: 0;
  font: 700 8px var(--hc-font-mono, monospace); letter-spacing: .11em;
  white-space: nowrap; color: oklch(0.4475738 0.0095775 106.7803391);
}
.hc-case .hc-mm-voice {
  inset-inline-start: 9%; inset-block-start: 24%;
  transform: translate3d(var(--mv-x, -80px), var(--mv-y, 95px), 0) rotate(var(--mv-r, -8deg)) scale(var(--mv-s, .92));
  opacity: var(--mv-o, 0);
}
.hc-case .hc-mm-image {
  inset-inline-end: 7%; inset-block-start: 12%;
  transform: translate3d(var(--mi-x, 90px), var(--mi-y, 75px), 0) rotate(var(--mi-r, 7deg)) scale(var(--mi-s, .9));
  opacity: var(--mi-o, 0);
}
.hc-case .hc-mm-document {
  inset-inline-end: 16%; inset-block-start: 51%; width: min(24vw, 355px);
  transform: translate3d(var(--md-x, 100px), var(--md-y, 85px), 0) rotate(var(--md-r, 9deg)) scale(var(--md-s, .88));
  opacity: var(--md-o, 0);
}
.hc-case .hc-mm-text {
  inset-inline-start: 29%; inset-block-start: 55%; width: min(29vw, 430px); filter: none;
  transform: translate3d(var(--mt-x, -55px), var(--mt-y, 95px), 0) rotate(var(--mt-r, -4deg)) scale(var(--mt-s, .95));
  opacity: var(--mt-o, 0);
}
.hc-case .hc-mm-fragment {
  background: var(--hc-ink, oklch(0.1149183 0 none)); color: oklch(1 0 none); padding: 20px 22px;
  display: grid; gap: 7px; font-size: clamp(1.0625rem, calc(.25rem + 1.4222222vw), 1.625rem);
  line-height: 1.04; font-weight: 750; letter-spacing: -.03em;
}
.hc-case .hc-mm-fragment span:nth-child(2) { opacity: .6; }
.hc-case .hc-mm-fragment span:nth-child(3) { opacity: .35; }
.hc-case .hc-mm-statement {
  position: absolute; z-index: 9; inset-inline-start: 24%; inset-block-start: 37%; width: min(68vw, 1100px);
  pointer-events: none; font-size: clamp(3.75rem, calc(.25rem + 7.3222222vw), 8rem); font-weight: 850;
  line-height: .77; letter-spacing: -.073em; text-transform: uppercase;
  transform: translate3d(var(--ms-x, 0px), var(--ms-y, 65px), 0) scale(var(--ms-s, .96));
  opacity: var(--ms-o, 0);
}
.hc-case .hc-mm-statement span, .hc-case .hc-mm-statement strong { display: block; }
.hc-case .hc-mm-statement strong { color: oklch(1 0 none); -webkit-text-stroke: 2px var(--hc-ink, oklch(0.1149183 0 none)); }
.hc-case .hc-mm-axis {
  position: absolute; z-index: 7; inset-inline-start: 50%; inset-block-start: 18%; inset-block-end: 12%; width: 1px;
  opacity: var(--ma-o, 0); transform: scaleY(var(--ma-s, .1)); transform-origin: top;
  background: var(--hc-ink, oklch(0.1149183 0 none));
}
.hc-case .hc-mm-axis-label {
  position: absolute; inset-inline-start: 12px; inset-block-start: 0; white-space: nowrap;
  font: 700 8px var(--hc-font-mono, monospace); letter-spacing: .11em;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.hc-case .hc-mm-axis i {
  position: absolute; inset-inline-start: -4px; inset-block-start: var(--ma-dot, 45%);
  width: 9px; height: 9px; background: var(--hc-ink, oklch(0.1149183 0 none)); border-radius: 50%;
}
.hc-case .hc-mm-resolution { position: absolute; z-index: 8; inset: 0; pointer-events: none; opacity: var(--mr-o, 0); }
.hc-case .hc-mm-resolution-screen {
  position: absolute; inset-inline-start: 50%; inset-block-start: 48%; width: min(34vw, 500px);
  transform: translate3d(-50%, calc(-50% + var(--mr-y, 85px)), 0) scale(var(--mr-s, .9));
  filter: drop-shadow(0 18px 40px color-mix(in oklch, oklch(0 0 none) 10%, transparent));
}
.hc-case .hc-mm-resolution-screen img { border: 1px solid color-mix(in oklch, oklch(0 0 none) 8%, transparent); }
.hc-case .hc-mm-resolution-label {
  position: absolute; inset-inline-start: 50%; inset-block-start: 20%; transform: translateX(-50%);
  display: flex; gap: 22px; white-space: nowrap;
  font: 700 9px var(--hc-font-mono, monospace); letter-spacing: .1em;
}
.hc-case .hc-mm-resolution-label span::after { content: " \21B5"; color: oklch(0.6267535 0 none); }
.hc-case .hc-mm-resolution-label span:last-child::after { content: " \2193"; }
.hc-case .hc-mm-resolution p {
  position: absolute; inset-inline-start: calc(50% + min(19vw, 285px)); inset-block-start: 51%;
  width: min(25vw, 380px); margin: 0;
  font-size: clamp(0.9375rem, calc(.25rem + 1.0722222vw), 1.3125rem); line-height: 1.4; transform: translateY(-50%);
}
.hc-case .hc-mm-scroll-note {
  position: absolute; inset-inline-start: 50%; inset-block-end: 16px; transform: translateX(-50%); z-index: 13;
  font: 600 8px var(--hc-font-mono, monospace); letter-spacing: .1em; color: var(--muted);
}
.hc-case .hc-mm-story.is-resolving .hc-mm-input { z-index: 5; }
.hc-case .hc-mm-story.is-resolving .hc-mm-tag { opacity: .8; }

/* Chef4Me kitchen loop variant */
.hc-case .hc-mm-story.hc-mm-chef { --story-height: 325vh; }
.hc-case .hc-mm-chef .hc-mm-index span:last-child,
.hc-case .hc-mm-chef .hc-mm-tag { color: oklch(0.4415923 0.1030757 118.2972318); }
.hc-case .hc-mm-chef .hc-mm-axis { background: var(--acid); width: 2px; }
.hc-case .hc-mm-chef .hc-mm-axis i { background: var(--hc-ink, oklch(0.1149183 0 none)); border: 3px solid var(--acid); width: 12px; height: 12px; inset-inline-start: -5px; }
.hc-case .hc-mm-chef .hc-mm-voice { inset-inline-start: 5%; inset-block-start: 21%; width: min(29vw, 430px); }
.hc-case .hc-mm-chef .hc-mm-image { inset-inline-end: 5%; inset-block-start: 12%; width: min(29vw, 430px); }
.hc-case .hc-mm-chef .hc-mm-document { inset-inline-end: 14%; inset-block-start: 55%; width: min(25vw, 380px); }
.hc-case .hc-mm-chef .hc-mm-text { inset-inline-start: 27%; inset-block-start: 58%; width: min(25vw, 380px); filter: drop-shadow(0 20px 36px color-mix(in oklch, oklch(0 0 none) 10%, transparent)); }
.hc-case .hc-mm-chef .hc-mm-statement { inset-inline-start: 18%; inset-block-start: 36%; width: min(74vw, 1180px); font-size: clamp(4.125rem, calc(.25rem + 7.9222222vw), 8.625rem); line-height: .76; }
.hc-case .hc-mm-chef .hc-mm-resolution-screen { inset-inline-start: 42%; inset-block-start: 51%; width: min(60vw, 930px); }
.hc-case .hc-mm-chef .hc-mm-resolution-screen img { border: 0; filter: drop-shadow(0 20px 46px color-mix(in oklch, oklch(0 0 none) 10%, transparent)); }
@media (min-width: 721px) and (min-height: 501px) and (prefers-reduced-motion: no-preference) {
  .hc-case .hc-mm-chef .hc-mm-resolution-screen img { max-block-size: min(60svh, calc(100svh - var(--chrome-top) - 246px)); inline-size: auto; margin-inline: auto; object-fit: contain; }
}
.hc-case .hc-mm-chef .hc-mm-resolution p {
  inset-inline-start: 73%; inset-block-start: 51%; width: min(22vw, 340px);
  font-size: clamp(1rem, calc(.25rem + 1.2222222vw), 1.5rem); line-height: 1.32; font-weight: 650; letter-spacing: -.02em;
}
.hc-case .hc-mm-chef .hc-mm-resolution-label { inset-inline-start: 42%; inset-block-start: 72px; gap: 16px; }
.hc-case .hc-mm-chef .hc-mm-resolution-label span { background: var(--hc-ink, oklch(0.1149183 0 none)); color: oklch(1 0 none); padding: 6px 8px; }
.hc-case .hc-mm-chef .hc-mm-resolution-label span:nth-child(2) { background: var(--acid); color: var(--hc-ink, oklch(0.1149183 0 none)); }
.hc-case .hc-mm-chef .hc-mm-resolution-label span::after { content: " \2192"; color: inherit; }
.hc-case .hc-mm-chef .hc-mm-resolution-label span:last-child::after { content: ""; }
.hc-case .hc-mm-chef::after {
  content: "PANTRY STATE IS CONTEXT"; position: absolute; inset-inline-start: var(--g); inset-block-end: 14px;
  font: 700 8px var(--hc-font-mono, monospace); letter-spacing: .12em; color: oklch(0.532968 0.1208011 115.0303813);
}

/* RELAY operating-memory variant — landscape interfaces stay legible */
.hc-case .hc-mm-story.hc-mm-relay { --story-height: 330vh; }
.hc-case .hc-mm-relay .hc-mm-index span:last-child { color: oklch(0.4865584 0.1364517 42.0351845); }
.hc-case .hc-mm-relay .hc-mm-input img { border: 1px solid color-mix(in oklch, oklch(0 0 none) 10%, transparent); }
.hc-case .hc-mm-relay .hc-mm-voice { inset-inline-start: 4%; inset-block-start: 18%; width: min(47vw, 720px); }
.hc-case .hc-mm-relay .hc-mm-image { inset-inline-end: 4%; inset-block-start: 18%; width: min(43vw, 670px); }
.hc-case .hc-mm-relay .hc-mm-document { inset-inline-end: 11%; inset-block-start: 56%; width: min(40vw, 620px); }
.hc-case .hc-mm-relay .hc-mm-text { inset-inline-start: 12%; inset-block-start: 58%; width: min(34vw, 520px); }
.hc-case .hc-mm-relay .hc-mm-fragment { padding: 22px 26px; font-size: clamp(1.375rem, calc(.25rem + 1.7222222vw), 2.125rem); }
.hc-case .hc-mm-relay .hc-mm-statement { inset-inline-start: 18%; inset-block-start: 35%; width: min(72vw, 1120px); font-size: clamp(3.875rem, calc(.25rem + 6.9222222vw), 7.625rem); line-height: .76; }
.hc-case .hc-mm-relay .hc-mm-axis {
  inset-inline-start: 12%; inset-inline-end: 12%; inset-block-start: 54%; inset-block-end: auto; width: auto; height: 2px;
  transform: scaleX(var(--ma-s, .1)); transform-origin: left center;
}
.hc-case .hc-mm-relay .hc-mm-axis-label {
  inset-inline-start: 0; inset-block-start: -24px; writing-mode: horizontal-tb; transform: none; letter-spacing: .14em;
}
.hc-case .hc-mm-relay .hc-mm-axis i {
  inset-block-start: -5px; inset-inline-start: var(--relay-dot, 20%); width: 12px; height: 12px;
  border-radius: 50%; background: var(--signal-relay); transform: translateX(-50%);
}
.hc-case .hc-mm-relay .hc-mm-resolution-screen { inset-inline-start: 43%; inset-block-start: 51%; width: min(64vw, 1020px); }
.hc-case .hc-mm-relay .hc-mm-resolution-screen img { filter: drop-shadow(0 22px 50px color-mix(in oklch, oklch(0 0 none) 10%, transparent)); }
.hc-case .hc-mm-relay .hc-mm-resolution p {
  inset-inline-start: 74%; inset-block-start: 50%; width: min(22vw, 340px);
  font-size: clamp(1rem, calc(.25rem + 1.1722222vw), 1.4375rem); line-height: 1.32; font-weight: 650; letter-spacing: -.02em;
}
.hc-case .hc-mm-relay .hc-mm-resolution-label { inset-inline-start: 43%; inset-block-start: 18%; gap: 14px; }
.hc-case .hc-mm-relay .hc-mm-resolution-label span { border: 1px solid var(--hc-ink, oklch(0.1149183 0 none)); padding: 5px 7px; background: oklch(1 0 none); }
.hc-case .hc-mm-relay .hc-mm-resolution-label span:last-child { background: var(--hc-ink, oklch(0.1149183 0 none)); color: oklch(1 0 none); }
.hc-case .hc-mm-relay .hc-mm-resolution-label span::after { content: " \2192"; color: oklch(0.5692624 0 none); }
.hc-case .hc-mm-relay .hc-mm-resolution-label span:last-child::after { content: ""; }
.hc-case .hc-mm-relay::after {
  content: "THE SYSTEM KEEPS THE RECEIPTS"; position: absolute; inset-inline-start: var(--g); inset-block-end: 14px;
  font: 700 8px var(--hc-font-mono, monospace); letter-spacing: .12em; color: oklch(0.4865584 0.1364517 42.0351845);
}

/* ============ TECHNICAL PLATE ============ */
.hc-case .hc-tech { background: var(--warm); }
.hc-case .hc-arch {
  grid-column: 1 / -1; margin-block-start: 65px; display: grid; grid-template-columns: repeat(4, 1fr);
  border-block-start: 1px solid var(--hc-ink, oklch(0.1149183 0 none)); border-inline-start: 1px solid var(--hc-ink, oklch(0.1149183 0 none));
}
.hc-case .hc-arch > div {
  min-height: 240px; padding: 16px;
  border-inline-end: 1px solid var(--hc-ink, oklch(0.1149183 0 none)); border-block-end: 1px solid var(--hc-ink, oklch(0.1149183 0 none));
}
.hc-case .hc-arch b {
  display: block; font: 700 10px var(--hc-font-mono, monospace);
  letter-spacing: .08em; text-transform: uppercase; margin-block-end: 58px;
}
.hc-case .hc-arch span { font-size: 22px; line-height: 1.05; letter-spacing: -.035em; font-weight: 720; }
.hc-case-4dk .hc-arch > div:nth-child(2) { background: color-mix(in oklch, oklch(0.9394161 0.2173413 120.4917716) 16%, transparent); }
.hc-case-relay .hc-arch > div:nth-child(4) { background: color-mix(in oklch, oklch(0.7247253 0.1821763 46.0383762) 10%, transparent); }

/* ============ DELIVERABLES MANIFEST ============ */
.hc-case .hc-manifest { grid-column: 3 / 13; margin-block-start: 55px; }
.hc-case .hc-manifest-row {
  display: grid; grid-template-columns: 80px 1.4fr 1fr; gap: 20px;
  border-block-start: 1px solid var(--line); padding: 15px 0;
}
.hc-case .hc-manifest-row:last-child { border-block-end: 1px solid var(--line); }
.hc-case .hc-manifest-row span:first-child, .hc-case .hc-manifest-row span:last-child {
  font: 600 9px var(--hc-font-mono, monospace); text-transform: uppercase; color: var(--muted);
}
.hc-case .hc-manifest-row b { font-size: 20px; letter-spacing: -.025em; font-weight: 650; }

/* ============ RESULT ============ */
.hc-case .hc-result-big {
  grid-column: 3 / 12; font-size: clamp(3.5rem, calc(.25rem + 6.7222222vw), 6.875rem); font-weight: 850;
  line-height: .84; letter-spacing: -.065em; text-transform: uppercase; margin: 0;
}
.hc-case .hc-result-copy { grid-column: 7 / 12; font-size: 18px; line-height: 1.5; margin-block-start: 40px; }
.hc-case .hc-factbar {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr);
  margin-block-start: 70px; border-block-start: 1px solid var(--line); border-inline-start: 1px solid var(--line);
}
.hc-case .hc-fact {
  padding: 16px; min-height: 140px; border-inline-end: 1px solid var(--line); border-block-end: 1px solid var(--line);
}
.hc-case .hc-fact b {
  display: block; font: 700 9px var(--hc-font-mono, monospace); text-transform: uppercase; margin-block-end: 50px;
}
.hc-case .hc-fact span { font-size: 16px; line-height: 1.35; }

/* ============ QUESTIONS ============ */
.hc-case .hc-faq { grid-column: 3 / 13; margin-block-start: 60px; }
.hc-case .hc-qa { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; border-block-start: 1px solid var(--line); padding: 23px 0; }
.hc-case .hc-qa:last-child { border-block-end: 1px solid var(--line); }
.hc-case .hc-qa h3 { font-size: 26px; line-height: 1.05; letter-spacing: -.035em; margin: 0; font-weight: 700; }
.hc-case .hc-qa p { font-size: 15px; line-height: 1.55; margin: 0; color: oklch(0.3773918 0.0083269 106.7919911); }

/* ============ NEXT CASE ============ */
.hc-case .hc-next {
  display: block; padding-block: 110px 190px; padding-inline: 0; border-block-start: 1px solid var(--line);
  overflow: clip; text-decoration: none; color: inherit; position: relative;
}
.hc-case .hc-next::before {
  content: "KEEP SCROLLING / NEXT SYSTEM"; position: absolute; inset-block-start: 26px; inset-inline-end: var(--g);
  font: 600 9px var(--hc-font-mono, monospace); letter-spacing: .1em; color: var(--muted);
}
.hc-case .hc-next .hc-ey { display: block; margin-block: 0 18px; margin-inline: 0; }
.hc-case .hc-next h2 {
  font-size: clamp(5rem, calc(.25rem + 11.7222222vw), 11.875rem); margin: 0;
  transform: translate3d(calc(-6px + var(--nx-x, 0px)), 0, 0);
}
.hc-case .hc-next-preview {
  position: relative; margin-block-start: 40px; width: min(560px, 60vw);
  background: oklch(0.1730423 0 none); overflow: clip;
  border: 1px solid color-mix(in oklch, oklch(0 0 none) 8%, transparent);
  filter: drop-shadow(0 22px 44px color-mix(in oklch, oklch(0 0 none) 14%, transparent));
  transform: translate3d(var(--nxc-x, 0px), var(--nxc-y, 0px), 0) rotate(calc(4deg + var(--nxc-r, 0deg))) scale(var(--nxc-s, 1));
  will-change: transform;
}
.hc-case .hc-next-preview img { display: block; width: 100%; height: auto; }
.hc-case .hc-next-preview .hc-tag { inset-block-start: 10px; inset-inline-start: 12px; color: oklch(0.6841405 0.0100723 106.6628393); }

/* ============ REVEALS ============ */
.hc-case .hc-title, .hc-case .hc-copy {
  opacity: 0; transform: translate3d(0, 56px, 0);
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: no-preference) {

  .hc-case .hc-title, .hc-case .hc-copy {
  transition: opacity 620ms ease, transform 900ms var(--ease);
  }
}
.hc-case .hc-copy { transform: translate3d(0, 32px, 0); }
.hc-case .hc-title.is-in, .hc-case .hc-copy.is-in { opacity: 1; transform: translate3d(0, 0, 0); }
.hc-case .hc-card {
  opacity: 0; transform: translate3d(0, 65px, 0) rotate(1.2deg);
}
@media (prefers-reduced-motion: no-preference) {

  .hc-case .hc-card {
  transition: opacity 520ms ease, transform 860ms var(--ease);
  transition-delay: var(--hc-card-delay, 0ms);
  }
}
.hc-case .hc-card.is-in { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1000px) {
  .hc-case .hc-shell { width: calc(100% - 48px); margin: 0 24px; padding: 0; }
  .hc-case .hc-hero h1 { grid-column: 1 / -1; }
  .hc-case .hc-hero-meta { grid-column: 1 / 6; margin-block-start: 25px; }
  .hc-case .hc-hero-statement { grid-column: 1 / 9; }
  .hc-case .hc-hero-side { grid-column: 9 / 13; }
  .hc-case .hc-stage { min-height: 820px; }
  .hc-case .hc-shot-a { inset-inline-start: 2%; width: 34vw; }
  .hc-case .hc-shot-b { inset-inline-end: 2%; width: 35vw; }
  .hc-case .hc-shot-c { inset-inline-end: 19%; width: 23vw; }
  .hc-case .hc-thesis { inset-inline-start: 15%; width: 77vw; }
  .hc-case .hc-sub { inset-inline-start: 15.5%; }
  .hc-case-4dk .hc-thesis { width: min(82vw, 930px); font-size: clamp(3.625rem, calc(.25rem + 8.2222222vw), 6.5625rem); inset-block-start: 44%; }
  .hc-case-4dk .hc-sub { inset-block-start: 69.5%; max-width: 80vw; }
  .hc-case .hc-mm-story { height: 300vh; }
  .hc-case .hc-mm-input { width: 38vw; }
  .hc-case .hc-mm-voice { inset-inline-start: 3%; }
  .hc-case .hc-mm-image { inset-inline-end: 3%; }
  .hc-case .hc-mm-document { inset-inline-end: 5%; width: 34vw; }
  .hc-case .hc-mm-text { inset-inline-start: 9%; width: 40vw; }
  .hc-case .hc-mm-statement { inset-inline-start: 12%; width: 82vw; font-size: clamp(3.25rem, calc(.25rem + 9.7222222vw), 6.25rem); }
  .hc-case .hc-mm-resolution-screen { width: min(52vw, 500px); }
  .hc-case .hc-mm-resolution p { inset-inline-start: 68%; width: 27vw; }
  .hc-case .hc-mm-chef .hc-mm-resolution-screen { inset-inline-start: 38%; width: 58vw; }
  .hc-case .hc-mm-chef .hc-mm-resolution p { inset-inline-start: 69%; width: 27vw; }
  .hc-case .hc-mm-relay .hc-mm-voice { width: 55vw; inset-inline-start: 1%; }
  .hc-case .hc-mm-relay .hc-mm-image { width: 52vw; inset-inline-end: 1%; }
  .hc-case .hc-mm-relay .hc-mm-document { width: 48vw; }
  .hc-case .hc-mm-relay .hc-mm-resolution-screen { inset-inline-start: 39%; width: 62vw; }
  .hc-case .hc-mm-relay .hc-mm-resolution p { inset-inline-start: 70%; width: 27vw; }
}

@media (max-width: 720px) {
  .hc-case { --chrome-top: 56px; }
  .hc-case .hc-hero { padding-block-start: 96px; }
  .hc-case .hc-hero h1 { font-size: clamp(3.5rem, .25rem + 21.888889vw, 11.25rem); margin-block-start: 45px; }
  .hc-case .hc-hero-meta, .hc-case .hc-hero-statement, .hc-case .hc-hero-side,
  .hc-case .hc-index, .hc-case .hc-sec h2, .hc-case .hc-lede, .hc-case .hc-scope,
  .hc-case .hc-chapter h2, .hc-case .hc-chapter-copy, .hc-case .hc-chapter-note,
  .hc-case .hc-manifest, .hc-case .hc-result-big, .hc-case .hc-result-copy, .hc-case .hc-faq { grid-column: 1 / -1; }
  .hc-case .hc-hero-side { margin-block-end: 40px; }
  .hc-case .hc-scroll-hint { display: none; }
  /* The collision stage becomes an intentional editorial stack. */
  .hc-case .hc-stage { min-height: auto; padding-block: 76px 65px; padding-inline: 24px; }
  .hc-case .hc-gridlines, .hc-case .hc-wordmark { display: none; }
  .hc-case .hc-stage-meta { position: static; display: inline-block; margin-block: 0 42px; margin-inline: 16px 0; }
  .hc-case .hc-stage-meta-r { float: right; }
  .hc-case .hc-thesis { position: static; width: auto; transform: none !important; font-size: clamp(3.4375rem, calc(.25rem + 14.7222222vw), 5.75rem); margin-block-end: 52px; }
  .hc-case .hc-sub { position: static; margin-block: -30px 55px; margin-inline: 0; }
  .hc-case-4dk .hc-thesis span, .hc-case-4dk .hc-thesis strong { width: auto; display: block; }
  .hc-case-4dk .hc-sub { margin-block: 0 52px; margin-inline: 0; text-align: start; }
  .hc-case .hc-shot { position: relative; inset: auto; width: min(88vw, 520px); margin-block: 0 54px; margin-inline: auto; transform: none !important; }
  .hc-case .hc-tag { position: static; display: block; margin-block-end: 8px; }
  .hc-case .hc-scroll { position: static; transform: none; text-align: center; margin-block-start: 6px; }
  .hc-case .hc-tensions { grid-template-columns: 1fr; }
  .hc-case .hc-media-two, .hc-case .hc-media-stack { grid-template-columns: 1fr; }
  .hc-case .hc-media-two > figure:nth-child(2),
  .hc-case .hc-media-stack > figure:nth-child(1) { margin: 0; }
  .hc-case .hc-panel { transform: translate3d(0, var(--scrub-y, 30px), 0) scale(var(--scrub-scale, .98)); }
  .hc-case .hc-stack-scene { height: auto; padding-block: 45px 85px; padding-inline: 24px; }
  .hc-case .hc-stack-frame { position: static; height: auto; display: grid !important; grid-template-columns: 1fr !important; gap: 38px !important; }
  .hc-case .hc-stack-scene .hc-panel { position: static; width: auto; transform: none !important; }
  .hc-case .hc-arch { grid-template-columns: 1fr 1fr; }
  .hc-case .hc-arch > div { min-height: 190px; }
  .hc-case .hc-manifest-row { grid-template-columns: 45px 1fr; }
  .hc-case .hc-manifest-row span:last-child { grid-column: 2; }
  .hc-case .hc-factbar { grid-template-columns: 1fr; }
  .hc-case .hc-qa { grid-template-columns: 1fr; gap: 12px; }
  .hc-case .hc-echo, .hc-case .hc-echo-result { display: none; }
  .hc-case .hc-next-preview { width: min(560px, 86vw); }
}
@media (max-width: 720px), (max-height: 500px) {
  /* Multimodal story: static editorial stack. */
  .hc-case .hc-mm-story { height: auto; padding-block: 84px 90px; padding-inline: 24px; }
  .hc-case .hc-mm-sticky { position: static; height: auto; overflow: visible; }
  .hc-case .hc-mm-bg-grid, .hc-case .hc-mm-axis, .hc-case .hc-mm-scroll-note { display: none; }
  .hc-case .hc-mm-index { position: static; margin-block-end: 42px; }
  .hc-case .hc-mm-statement {
    position: static; opacity: 1 !important; transform: none !important;
    width: auto; font-size: clamp(3.375rem, calc(.25rem + 14.7222222vw), 5.75rem); margin-block-end: 55px;
  }
  .hc-case .hc-mm-input {
    position: relative; inset: auto !important; width: 100% !important;
    max-width: 520px; margin-block: 0 58px; margin-inline: auto; opacity: 1 !important; transform: none !important;
  }
  .hc-case .hc-mm-tag { position: static; display: block; margin-block-end: 8px; }
  .hc-case .hc-mm-text { max-width: 520px; }
  .hc-case .hc-mm-resolution { position: static; opacity: 1 !important; }
  .hc-case .hc-mm-resolution-label { position: static; transform: none; flex-wrap: wrap; margin-block: 0 20px; margin-inline: 0; }
  .hc-case .hc-mm-resolution-screen { position: static; width: 100%; transform: none !important; max-width: 520px; margin: 0 auto; }
  .hc-case .hc-mm-resolution-screen img { width: 100%; }
  .hc-case .hc-mm-resolution p { position: static; width: auto; transform: none; max-width: 520px; margin-block: 24px 0; margin-inline: auto; }
  .hc-case .hc-mm-chef::after, .hc-case .hc-mm-relay::after { display: none; }
  /* reduced-motion safety for sticky frames */
  .hc-case .hc-next { padding-block-end: 130px; }
}

/* ============ REDUCED MOTION — keep every fact, remove the choreography ============ */
@media (prefers-reduced-motion: reduce) {
  .hc-case .hc-enter, .hc-case .hc-title, .hc-case .hc-copy,
  .hc-case .hc-card, .hc-case .hc-panel { opacity: 1 !important; transform: none !important; }
  .hc-case .hc-scroll-hint { animation: none; }
  .hc-case .hc-stack-scene { height: auto; padding-block: 54px 90px; padding-inline: var(--g); }
  .hc-case .hc-stack-frame {
    position: static; height: auto; display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important; gap: 24px !important;
  }
  .hc-case .hc-stack-scene .hc-panel { position: static; width: auto; }
  .hc-case .hc-wordmark, .hc-case .hc-shot, .hc-case .hc-thesis,
  .hc-case .hc-next h2, .hc-case .hc-next-preview { transform: none !important; }
  .hc-case .hc-mm-story { height: auto; padding: 90px var(--g); }
  .hc-case .hc-mm-sticky { position: static; height: auto; overflow: visible; }
  .hc-case .hc-mm-bg-grid, .hc-case .hc-mm-axis, .hc-case .hc-mm-scroll-note { display: none; }
  .hc-case .hc-mm-index { position: static; margin-block-end: 45px; }
  .hc-case .hc-mm-statement { position: static; width: auto; opacity: 1 !important; transform: none !important; margin-block: 0 60px; margin-inline: 0; }
  .hc-case .hc-mm-input {
    position: relative; inset: auto !important;
    width: min(650px, 100%) !important; margin-block: 0 50px; margin-inline: auto; opacity: 1 !important; transform: none !important;
  }
  .hc-case .hc-mm-resolution { position: static; opacity: 1 !important; }
  .hc-case .hc-mm-resolution-label, .hc-case .hc-mm-resolution-screen, .hc-case .hc-mm-resolution p {
    position: static; transform: none !important; width: auto; max-width: 650px; margin: 20px auto;
  }
}