/* ============================================================
   PRECISION NOIR · Case-study (project) detail — editorial redesign
   Loaded ONLY on /development/case-studies/{slug} (page-specific).
   Every rule is scoped under .cd-wrap--case so the shared classes
   (.ca__cover, .client-band, .facts, .cd-nav…) used by the client
   detail pages stay untouched. Tokens only, BEM, logical props.
   Accent resolves from [data-section]. New tokens (with fallbacks):
     --on-accent (#fff)  ·  --client-logo-bg (#fff)
   ============================================================ */

.cd-wrap--case {
  inline-size: 100%;
  max-inline-size: var(--max-w-content);
  margin-inline: auto;
  padding-inline: var(--gutter, clamp(var(--space-4), 5vw, var(--space-16)));
  padding-block: clamp(var(--space-6), 4vw, var(--space-12)) var(--space-24);
}

.cd-wrap--case .breadcrumbs { margin-block-end: clamp(var(--space-5), 3vw, var(--space-8)); }

/* ---- 1 · COVER — editorial hero that works without a photo ---- */
.cd-wrap--case .ca__cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  block-size: auto;
  min-block-size: clamp(380px, 58vh, 580px);
  padding: clamp(var(--space-8), 5vw, var(--space-16));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(85% 70% at 90% -12%, var(--accent-glow), transparent 60%),
    radial-gradient(75% 90% at -8% 118%, color-mix(in oklab, var(--accent) 11%, transparent), transparent 62%),
    linear-gradient(162deg, color-mix(in oklab, var(--accent) 15%, var(--color-surface)), var(--color-surface) 66%);
  box-shadow: inset 0 1px 0 color-mix(in oklab, #fff 7%, transparent);
}
.cd-wrap--case .ca__cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, color-mix(in oklab, var(--accent) 14%, transparent) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg,  color-mix(in oklab, var(--accent) 9%, transparent) 0 1px, transparent 1px 72px);
  -webkit-mask-image: radial-gradient(120% 110% at 82% 0%, #000, transparent 68%);
          mask-image: radial-gradient(120% 110% at 82% 0%, #000, transparent 68%);
  opacity: .7;
}
.cd-wrap--case .ca__cover::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 72%);
}
.cd-wrap--case .ca__cover__media {
  position: absolute; inset: 0; z-index: -1;
  inline-size: 100%; block-size: 100%; object-fit: cover;
}
.cd-wrap--case .ca__cover__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.cd-wrap--case .ca__cover__tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-light);
  padding-block: 4px; padding-inline: 10px;
  border: 1px solid color-mix(in oklab, var(--accent) 42%, var(--color-border));
  border-radius: var(--radius-full);
  background: var(--accent-faint);
}
.cd-wrap--case .ca__cover__id {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-tertiary);
}
.cd-wrap--case .ca__cover__ghost {
  position: absolute; z-index: -1;
  inset-block-start: -0.18em; inset-inline-end: 0.02em;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-black);
  font-size: clamp(11rem, 34vw, 26rem);
  line-height: 0.72; letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--accent) 32%, transparent);
  opacity: .5; pointer-events: none; user-select: none;
}
.cd-wrap--case .ca__cover__inner { display: grid; gap: var(--space-3); max-inline-size: 52ch; }
.cd-wrap--case .ca__cover .ck {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--accent-light);
}
.cd-wrap--case .ca__cover .ct {
  margin: 0;
  font-family: var(--font-heading); font-weight: var(--weight-bold);
  font-size: clamp(var(--text-5xl), 7.5vw, var(--text-7xl));
  line-height: 0.98; letter-spacing: var(--tracking-tight);
  color: var(--color-text); text-wrap: balance;
}
.cd-wrap--case .ca__cover__dek {
  margin: 0; max-inline-size: 52ch;
  font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-secondary);
}
/* photo present */
.cd-wrap--case .ca__cover--image { background: var(--color-surface); }
.cd-wrap--case .ca__cover--image::before { opacity: .22; }
.cd-wrap--case .ca__cover--image .ca__cover__overlay {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(transparent 28%, color-mix(in oklab, #000 84%, transparent));
}
.cd-wrap--case .ca__cover--image .ct { color: var(--on-accent, #fff); }
.cd-wrap--case .ca__cover--image .ca__cover__dek { color: color-mix(in oklab, var(--on-accent, #fff) 82%, transparent); }
.cd-wrap--case .ca__cover--image .ca__cover__id { color: color-mix(in oklab, var(--on-accent, #fff) 70%, transparent); }

/* ---- 2 · CLIENT BAND ---- */
.cd-wrap--case .client-band {
  display: flex; align-items: center; gap: clamp(var(--space-4), 3vw, var(--space-5)); flex-wrap: wrap;
  margin-block-start: var(--space-6);
  padding: var(--space-5) clamp(var(--space-5), 3vw, var(--space-6));
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface-raised); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.18));
}
.cd-wrap--case .client-band__logo {
  inline-size: 60px; block-size: 60px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-md); border: 1px solid var(--color-border);
  background: var(--client-logo-bg, #fff);
  color: color-mix(in oklab, var(--accent) 78%, #1a1a2e);
  font-family: var(--font-heading); font-weight: var(--weight-bold);
  font-size: var(--text-lg); letter-spacing: var(--tracking-tight); overflow: hidden;
}
.cd-wrap--case .client-band__logo img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 8px; }
.cd-wrap--case .client-band__body { display: grid; gap: 4px; min-inline-size: 0; }
.cd-wrap--case .client-band__role {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-tertiary);
}
.cd-wrap--case .client-band__name {
  font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight); color: var(--color-text);
}
.cd-wrap--case .engagement {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  margin-block-start: 2px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-tertiary);
}
.cd-wrap--case .engagement b { color: var(--color-text-secondary); font-weight: var(--weight-medium); }
.cd-wrap--case .engagement .tag-emp {
  display: inline-flex; align-items: center; gap: 6px; padding-block: 3px; padding-inline: 9px;
  border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text-secondary);
}
.cd-wrap--case .engagement .tag-emp i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent); }
.cd-wrap--case .client-band__actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cd-wrap--case .client-band__cta {
  display: inline-flex; align-items: center; gap: 7px; padding-block: 9px; padding-inline: 16px;
  border-radius: var(--radius-md); font-family: var(--font-body, inherit); font-size: var(--text-sm);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.cd-wrap--case .client-band__cta--secondary { border: 1px solid var(--accent); color: var(--accent-light); background: transparent; }
.cd-wrap--case .client-band__cta--secondary:hover,
.cd-wrap--case .client-band__cta--secondary:focus-visible { background: var(--accent); color: var(--on-accent, #fff); }
.cd-wrap--case .client-band__cta--tertiary { border: 1px solid transparent; color: var(--color-text-secondary); }
.cd-wrap--case .client-band__cta--tertiary:hover,
.cd-wrap--case .client-band__cta--tertiary:focus-visible { color: var(--accent-light); }
.cd-wrap--case .client-band__cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 3 · BODY GRID ---- */
.cd-wrap--case .ca__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 312px;
  gap: clamp(var(--space-6), 4vw, var(--space-12)); align-items: start;
  margin-block-start: clamp(var(--space-8), 5vw, var(--space-16));
}
.cd-wrap--case .ca__body {
  display: grid; gap: var(--space-4); max-inline-size: 68ch;
  color: var(--color-text-secondary); line-height: var(--leading-relaxed); font-size: var(--text-base);
}
.cd-wrap--case .ca__body > h2, .cd-wrap--case .ca__body > h3 {
  color: var(--color-text); font-family: var(--font-heading);
  letter-spacing: var(--tracking-tight); margin-block-start: var(--space-6);
}
.cd-wrap--case .ca__body > h2 { font-size: var(--text-2xl); }
.cd-wrap--case .ca__body > h3 { font-size: var(--text-xl); }
.cd-wrap--case .ca__body > p { margin: 0; }
.cd-wrap--case .ca__body > p:first-of-type { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text); }
.cd-wrap--case .ca__body ul { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-2); }
.cd-wrap--case .ca__body li { padding-inline-start: var(--space-2); }
.cd-wrap--case .ca__body li::marker { color: var(--accent-light); }
.cd-wrap--case .ca__body blockquote {
  position: relative; margin-block: var(--space-8); margin-inline: 0;
  padding-block: var(--space-2); padding-inline-start: var(--space-8);
  border-inline-start: 2px solid var(--accent);
  font-family: var(--font-heading); font-weight: var(--weight-medium);
  font-size: clamp(var(--text-xl), 2.4vw, var(--text-3xl)); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight); color: var(--color-text); text-wrap: balance;
}
.cd-wrap--case .ca__body blockquote::before {
  content: "\201C"; position: absolute; inset-block-start: -0.32em; inset-inline-start: var(--space-5);
  font-size: 3em; line-height: 1; color: color-mix(in oklab, var(--accent) 40%, transparent); pointer-events: none;
}
/* numbered section label */
.cd-wrap--case .cd-sec-h {
  display: flex; align-items: baseline; gap: var(--space-4);
  margin-block: clamp(var(--space-8), 4vw, var(--space-12)) var(--space-2);
}
.cd-wrap--case .cd-sec-h__no {
  font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: var(--weight-bold);
  line-height: 1; letter-spacing: var(--tracking-tight); color: var(--accent-light);
}
.cd-wrap--case .cd-sec-h__t {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-tertiary);
}
.cd-wrap--case .cd-sec-h > span:only-child {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--accent-light);
}
.cd-wrap--case .cd-sec-h::after { content: ""; flex: 1; block-size: 1px; background: var(--color-border-subtle); align-self: center; }
.cd-wrap--case .cd-sec-h[id] { scroll-margin-block-start: var(--space-10); }

/* ---- 3b · METRICS big-numbers band ---- */
.cd-wrap--case .ca__metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-block: clamp(var(--space-12), 7vw, var(--space-24)); border-block: 1px solid var(--color-border);
}
.cd-wrap--case .ca__metric {
  display: grid; gap: var(--space-2);
  padding: clamp(var(--space-6), 4vw, var(--space-10)) clamp(var(--space-4), 2vw, var(--space-6));
  border-inline-start: 1px solid var(--color-border-subtle);
}
.cd-wrap--case .ca__metric:first-child { border-inline-start: 0; }
.cd-wrap--case .ca__metric__v {
  font-family: var(--font-heading); font-weight: var(--weight-black);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-7xl)); line-height: 0.9;
  letter-spacing: var(--tracking-tight); color: var(--color-text); font-variant-numeric: tabular-nums;
}
.cd-wrap--case .ca__metric__v em { font-style: normal; color: var(--accent-light); }
.cd-wrap--case .ca__metric__l {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-tertiary);
}
@media (max-width: 720px) {
  .cd-wrap--case .ca__metrics { grid-template-columns: 1fr 1fr; }
  .cd-wrap--case .ca__metric:nth-child(odd) { border-inline-start: 0; }
  .cd-wrap--case .ca__metric:nth-child(n+3) { border-block-start: 1px solid var(--color-border-subtle); }
}

/* ---- rail: sticky spec sheet ---- */
.cd-wrap--case .ca__rail { position: sticky; inset-block-start: var(--space-8); align-self: start; display: grid; gap: var(--space-4); }
.cd-wrap--case .ca__rail__h {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-tertiary);
}
.cd-wrap--case .ca__rail .facts {
  display: block; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface-raised); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.18)); overflow: hidden;
}
.cd-wrap--case .ca__rail .facts .fact {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); background: transparent;
}
.cd-wrap--case .ca__rail .facts .fact + .fact { border-block-start: 1px solid var(--color-border-subtle); }
.cd-wrap--case .ca__rail .facts .fact span {
  order: 1; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-tertiary);
}
.cd-wrap--case .ca__rail .facts .fact b {
  order: 2; text-align: end; font-family: var(--font-heading); font-size: var(--text-lg);
  font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--color-text);
}
.cd-wrap--case .ca__spec {
  display: grid; gap: var(--space-3); padding: var(--space-5);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface);
}
.cd-wrap--case .ca__spec__label {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-tertiary);
}
.cd-wrap--case .ca__spec__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-wrap--case .ca__spec__chips span {
  font-family: var(--font-mono); font-size: var(--text-xs); padding-block: 4px; padding-inline: 10px;
  border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text-secondary);
}

/* ---- 4 · SCREENS ---- */
.cd-wrap--case .cd-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-block-start: clamp(var(--space-8), 5vw, var(--space-12)); }
.cd-wrap--case .cd-shots .ph { aspect-ratio: 4 / 3; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); overflow: hidden; transition: transform var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out); }
.cd-wrap--case .cd-shots .ph.is-wide { grid-column: span 2; aspect-ratio: 21 / 9; }
.cd-wrap--case .cd-shots .ph:hover { transform: translateY(-3px); border-color: var(--accent); }
.cd-wrap--case .cd-shots .cd-shot { aspect-ratio: 4/3; border-radius: var(--radius-md); overflow: hidden; position: relative; }
.cd-wrap--case .cd-shots .cd-shot.is-wide { grid-column: span 2; aspect-ratio: 21/9; }

/* ---- 5 · RELATED ---- */
.cd-wrap--case .pd-related { margin-block-start: clamp(var(--space-12), 6vw, var(--space-20)); }
.cd-wrap--case .pd-related__h {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-tertiary); margin-block-end: var(--space-5);
}
.cd-wrap--case .cd-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.cd-wrap--case .cd-rel {
  display: grid; gap: var(--space-3); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg);
  background: var(--color-surface-raised); overflow: hidden; text-decoration: none;
  transition: transform var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
}
.cd-wrap--case .cd-rel:hover { transform: translateY(-4px); border-color: var(--accent); }
.cd-wrap--case .cd-rel .ph, .cd-wrap--case .cd-rel__img { aspect-ratio: 16 / 10; }
.cd-wrap--case .cd-rel__b { padding: 0 var(--space-4) var(--space-4); display: grid; gap: 6px; }
.cd-wrap--case .cd-rel .ck { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-light); }
.cd-wrap--case .cd-rel__t {
  font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--weight-semibold);
  line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--color-text); margin: 0;
  transition: color var(--duration-fast) var(--ease-out);
}
.cd-wrap--case .cd-rel:hover .cd-rel__t { color: var(--accent-light); }

/* ---- 6 · PREV / NEXT ---- */
.cd-wrap--case .cd-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin-block-start: clamp(var(--space-12), 6vw, var(--space-20));
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface-raised);
}
.cd-wrap--case .cd-nav a {
  display: flex; align-items: center; gap: var(--space-4); padding: clamp(var(--space-5), 3vw, var(--space-6));
  text-decoration: none; background: transparent; border: 0; border-radius: 0;
  transition: background var(--duration-fast) var(--ease-out);
}
.cd-wrap--case .cd-nav a.is-next { justify-content: flex-end; text-align: end; border-inline-start: 1px solid var(--color-border); }
.cd-wrap--case .cd-nav a:hover { background: color-mix(in oklab, var(--accent) 8%, var(--color-surface-raised)); }
.cd-wrap--case .cd-nav__txt { display: grid; gap: 4px; min-inline-size: 0; }
.cd-wrap--case .cd-nav__d {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--color-text-tertiary); transition: color var(--duration-fast) var(--ease-out);
}
.cd-wrap--case .cd-nav a:hover .cd-nav__d { color: var(--accent-light); }
.cd-wrap--case .cd-nav__t {
  font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight); color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--duration-fast) var(--ease-out);
}
.cd-wrap--case .cd-nav a:hover .cd-nav__t { color: var(--accent-light); }
.cd-wrap--case .cd-nav__arrow {
  flex: none; display: grid; place-items: center; inline-size: 38px; block-size: 38px;
  border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--accent-light);
  font-size: var(--text-base); transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.cd-wrap--case .cd-nav a:hover .cd-nav__arrow { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.cd-wrap--case .cd-nav a.is-prev:hover .cd-nav__arrow { transform: translateX(-3px); }
.cd-wrap--case .cd-nav a.is-next:hover .cd-nav__arrow { transform: translateX(3px); }

/* ---- placeholder fill ---- */
.cd-wrap--case .ph {
  position: relative; display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg, color-mix(in oklab, var(--color-text) 4%, transparent) 0 2px, transparent 2px 12px),
    radial-gradient(ellipse 90% 80% at 60% 12%, var(--accent-glow), transparent 60%),
    var(--color-bg-alt, var(--color-surface));
}
.cd-wrap--case .ph > span {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-text-tertiary);
}

/* accent selection + focus rings */
.cd-wrap--case ::selection { background: color-mix(in oklab, var(--accent) 75%, transparent); color: #fff; }
.cd-wrap--case a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ---- reading progress (fixed, page-only) ---- */
.cs-progress {
  position: fixed; inset-block-start: 0; inset-inline: 0; block-size: 2px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, var(--accent), var(--accent-light)); transform: scaleX(0); transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .cs-progress { animation: cs-progress 1s linear both; animation-timeline: scroll(root); }
  }
}
@keyframes cs-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- side TOC scroll-spy (wide only) ---- */
.cs-toc { position: fixed; inset-block-start: 50%; inset-inline-start: var(--space-6); transform: translateY(-50%); display: grid; gap: var(--space-3); z-index: 40; }
@media (max-width: 1499px) { .cs-toc { display: none; } }
.cs-toc a { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.cs-toc a::before { content: ""; inline-size: 16px; block-size: 1px; background: var(--color-border); transition: background var(--duration-fast) var(--ease-out), inline-size var(--duration-normal) var(--ease-out); }
.cs-toc i { font-style: normal; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-tertiary); transition: color var(--duration-fast) var(--ease-out); }
.cs-toc span { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-tertiary); opacity: 0; transform: translateX(-4px); transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.cs-toc a.is-active::before { background: var(--accent-light); inline-size: 26px; }
.cs-toc a.is-active i, .cs-toc a:hover i { color: var(--accent-light); }
.cs-toc a.is-active span, .cs-toc a:hover span { opacity: 1; transform: none; color: var(--color-text-secondary); }
.cs-toc a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .cd-wrap--case .ca__grid { grid-template-columns: 1fr; }
  .cd-wrap--case .ca__rail { position: static; }
}
@media (max-width: 680px) {
  .cd-wrap--case .cd-shots { grid-template-columns: 1fr 1fr; }
  .cd-wrap--case .cd-shots .ph.is-wide, .cd-wrap--case .cd-shots .cd-shot.is-wide { grid-column: span 2; }
  .cd-wrap--case .cd-rel-grid { grid-template-columns: 1fr; }
  .cd-wrap--case .client-band__actions { margin-inline-start: 0; inline-size: 100%; }
}
@media (max-width: 560px) {
  .cd-wrap--case .cd-nav { grid-template-columns: 1fr; }
  .cd-wrap--case .cd-nav a.is-next { justify-content: flex-start; text-align: start; border-inline-start: 0; border-block-start: 1px solid var(--color-border); flex-direction: row-reverse; }
}

/* ---- motion: hero entrance + scroll reveal ---- */
@media (prefers-reduced-motion: no-preference) {
  .cd-wrap--case .ca__cover__top,
  .cd-wrap--case .ca__cover__inner > * { animation: cs-rise 0.7s var(--ease-out, cubic-bezier(0.22,0.61,0.36,1)) backwards; }
  .cd-wrap--case .ca__cover__top { animation-delay: 0.02s; }
  .cd-wrap--case .ca__cover .ck { animation-delay: 0.08s; }
  .cd-wrap--case .ca__cover .ct { animation-delay: 0.16s; }
  .cd-wrap--case .ca__cover__dek { animation-delay: 0.26s; }
  @supports (animation-timeline: view()) {
    .cd-wrap--case .client-band,
    .cd-wrap--case .ca__body > :is(h2, h3, p, blockquote),
    .cd-wrap--case .ca__rail,
    .cd-wrap--case .ca__metrics,
    .cd-wrap--case .cd-shots .ph,
    .cd-wrap--case .cd-rel,
    .cd-wrap--case .cd-nav {
      animation: cs-rise 0.8s var(--ease-out, cubic-bezier(0.22,0.61,0.36,1)) both;
      animation-timeline: view(); animation-range: entry 0% entry 30%;
    }
    .cd-wrap--case .ca__cover__ghost { animation: cs-ghost 1s linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
}
@keyframes cs-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cs-ghost { to { transform: translateY(34px); } }

@media (prefers-reduced-motion: reduce) {
  .cd-wrap--case .cd-rel, .cd-wrap--case .cd-shots .ph, .cd-wrap--case .cd-nav a, .cd-wrap--case .cd-nav__arrow,
  .cd-wrap--case .client-band__cta, .cd-wrap--case .breadcrumbs a { transition: none; }
  .cd-wrap--case .cd-rel:hover, .cd-wrap--case .cd-shots .ph:hover { transform: none; }
}