/* =========================================================
   Case pages — styles/case.css  (rich editorial version)
   ========================================================= */

.case-page { padding-top: 0; }

/* ── Full-bleed hero image ── */
.case-cover {
  width: 100%; aspect-ratio: 16/7; min-height: 21.25rem;
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl); margin-bottom: 0;
}
/* Video covers use the embed's native 16:9 ratio to avoid letterboxing */
.case-cover--video {
  aspect-ratio: 16/9; min-height: 0;
}
.case-cover img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
}
.case-cover__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}
.case-cover__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,11,11,0.7) 0%, rgba(11,11,11,0.1) 60%, transparent 100%);
}
.case-cover__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font: 500 0.875rem/1 var(--font-body); color: var(--fg-subtle);
  flex-direction: column; gap: 0.75rem;
}
.case-cover__placeholder-icon { font-size: 3rem; opacity: 0.3; }

/* ── Hero panel — brand-colour textured alternative to the cover image +
   identity strip, opt in via caseData.heroPanel. Combines the title/intro
   with a client/role/year/tools meta row, all on a brand-tinted photo. ── */
.case-hero-panel {
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: flex; flex-direction: column; gap: 2.25rem;
  position: relative; overflow: hidden;
}
.case-hero-panel__top {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(18rem, 1.12fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
}
.case-hero-panel__top-text {
  display: flex; flex-direction: column; gap: 0.875rem;
  max-width: 62ch; min-width: 0; position: relative; z-index: 2;
}
.case-hero-panel__photo {
  min-width: 0; min-height: 13.75rem;
  border-radius: var(--radius-xl); overflow: hidden; position: relative; z-index: 1;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: none;
}
.case-hero-panel__photo-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--radius-xl);
  box-shadow: none;
}
@media (max-width: 900px) {
  .case-hero-panel__top { grid-template-columns: 1fr; }
  .case-hero-panel__photo { flex: none; width: 100%; min-height: 200px; }
}
.case-hero-panel__tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.case-hero-panel__tag {
  font: 700 var(--fs-micro)/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3125rem 0.6875rem; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28);
}
.case-hero-panel__title {
  font: 800 clamp(1.875rem,4vw,3.625rem)/1.05 var(--font-display);
  letter-spacing: var(--tracking-tight); color: inherit;
  max-width: 18ch; text-wrap: balance;
  overflow-wrap: anywhere; word-break: normal; hyphens: auto;
}
.case-hero-panel__intro {
  font: 400 1.125rem/1.65 var(--font-body); opacity: 0.85; color: inherit;
  max-width: 58ch; text-wrap: pretty;
  overflow-wrap: break-word;
}
.case-hero-panel__meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem;
  padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,0.22);
  position: relative; z-index: 1;
}
.case-hero-panel__meta-col { display: flex; flex-direction: column; gap: 0.5rem; }
.case-hero-panel__meta-label {
  font: 600 var(--fs-micro)/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.65;
}
.case-hero-panel__meta-value { font: 600 0.875rem/1.4 var(--font-body); }
.case-hero-panel__meta-value span { display: block; }
.case-hero-panel__logo { display: inline-flex; align-items: center; width: fit-content; }
.case-hero-panel__logo-img { height: 6.75rem; width: auto; display: block; }
@media (max-width: 900px) {
  .case-hero-panel__meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .case-hero-panel__meta { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Challenge full-hero variant: full-bleed image + coloured text band ── */
.case-challenge-hero {
  /* Break out to true 100vw.
     margin-left: calc(50% - 50vw) offsets by (half-container - half-viewport),
     which equals the exact distance from content edge to viewport edge — works
     at every viewport width including when the page hits its max-width cap. */
  margin-left: calc(50% - 50vw);
  width: 100vw;
  border-radius: 0;
}
.case-challenge-hero__img {
  width: 100%;
  height: auto;      /* no cropping — image displays at its natural proportions */
  display: block;
}
.case-challenge__img-wrap {
  display: block;
  width: 100%;
  position: relative;
  cursor: zoom-in;
}
.case-challenge__img-wrap:focus-visible {
  outline: 2px solid var(--focus, currentColor);
  outline-offset: 4px;
}
.case-challenge__img-wrap:hover .case-gallery__zoom-hint,
.case-challenge__img-wrap:focus-visible .case-gallery__zoom-hint {
  background: rgba(0,0,0,0.32);
  color: rgba(255,255,255,0.92);
}
.case-challenge-hero__text {
  /* Re-center the text to match the page content column */
  max-width: var(--page-max, 88.75rem);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 52px) clamp(2rem, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 48px;
  align-items: start;
}
.case-challenge-hero__eyebrow {
  grid-column: 1 / -1;
  margin-bottom: -8px;
}
.case-challenge-hero__heading {
  font: 800 clamp(24px, 3vw, 42px)/1.1 var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: inherit;
  max-width: 20ch;
  text-wrap: pretty;
}
.case-challenge-hero__body {
  font: 400 16px/1.72 var(--font-body);
  color: inherit;
  opacity: 0.88;
  max-width: 60ch;
  text-wrap: pretty;
  align-self: center;
}
@media (max-width: 760px) {
  .case-challenge-hero__text { grid-template-columns: 1fr; }
}

/* ── Identity strip (below cover) ── */
.case-identity {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding: 36px 0 40px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.case-identity__left { display: flex; flex-direction: column; gap: 14px; }
.case-identity__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.case-identity__tag {
  font: 700 var(--fs-micro)/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-pill);
}
.case-identity__tag--ux   { background: var(--ux-tint);   color: var(--ux-ink);   border: 1px solid var(--ux-soft); }
.case-identity__tag--ai   { background: var(--ai-tint);   color: var(--ai-ink);   border: 1px solid var(--ai-soft); }
.case-identity__tag--play { background: var(--play-tint); color: var(--play-ink); border: 1px solid var(--play-soft); }
.case-identity__tag--neutral { background: var(--bg-elevated); color: var(--fg-muted); border: 1px solid var(--border); }
.case-identity__title {
  font: 800 clamp(30px,4vw,58px)/1.05 var(--font-display);
  letter-spacing: var(--tracking-tight); color: var(--fg);
  max-width: 18ch; text-wrap: pretty;
}
.case-identity__intro {
  font: 400 18px/1.65 var(--font-body); color: var(--fg-muted);
  max-width: 58ch; text-wrap: pretty; margin-top: 4px;
}
.case-identity__meta {
  display: flex; flex-direction: column; gap: 16px; align-items: flex-end;
  flex-shrink: 0;
}
.case-identity__meta-row {
  display: flex; flex-direction: column; gap: 4px; text-align: right;
}
.case-identity__meta-label {
  font: 600 var(--fs-micro)/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-subtle);
}
.case-identity__meta-value { font: 600 14px/1.3 var(--font-body); color: var(--fg); }

/* ── Giant outcome stats ── */
.case-outcomes {
  padding: var(--space-9) 0;
  border-bottom: 1px solid var(--border);
}
.case-outcomes__eyebrow { display: block; margin-bottom: 36px; }
.case-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2px;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--border);
}
.case-outcome-card {
  background: var(--bg-elevated);
  padding: 32px 28px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 0;
  position: relative; overflow: hidden;
  transition: background var(--dur-fast);
}
.case-outcome-card__value {
  font: 800 clamp(38px,5vw,60px)/1 var(--font-display);
  letter-spacing: var(--tracking-tight);
  flex: 1;
  display: flex; align-items: flex-start;
}
.case-outcome-card__bottom { display: flex; flex-direction: column; gap: 6px; }
.case-outcome-card--ux   .case-outcome-card__value { color: var(--stat-accent-override, var(--ux-base)); }
.case-outcome-card--ai   .case-outcome-card__value { color: var(--stat-accent-override, var(--ai-base)); }
.case-outcome-card--play .case-outcome-card__value { color: var(--stat-accent-override, var(--play-base)); }
.case-outcome-card__label { font: 600 var(--fs-body-sm)/1.3 var(--font-body); color: var(--fg); }
.case-outcome-card__delta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font: 400 12px/1.3 var(--font-body); color: var(--fg-subtle); margin-top: 4px;
}
.case-outcome-card__before { opacity: 0.6; }
.case-outcome-card__arrow  { opacity: 0.4; }

/* Brand-colour swatches — rounded chips, white "keyword" text on colour */
.case-outcome-card__swatches {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.case-outcome-card__swatch {
  font: 600 var(--fs-micro)/1 var(--font-body); color: #fff;
  padding: 5px 11px; border-radius: var(--radius-pill);
  letter-spacing: 0.01em;
}

/* ── Two-column split section ── */
.case-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center;
  padding: var(--space-9) 0;
  border-bottom: 1px solid var(--border);
}
.case-split--flip { direction: rtl; }
.case-split--flip > * { direction: ltr; }
.case-split__text { display: flex; flex-direction: column; gap: 20px; }
.case-split__eyebrow { display: block; }
.case-split__heading {
  font: 800 clamp(26px,3vw,40px)/1.1 var(--font-display);
  letter-spacing: var(--tracking-tight); color: var(--fg); text-wrap: pretty;
}
.case-split__body {
  font: 400 16px/1.72 var(--font-body); color: var(--fg-muted); text-wrap: pretty;
}
.case-split__visual {
  border-radius: var(--radius-xl); overflow: hidden;
  aspect-ratio: 4/3; position: relative;
}
.case-split__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-split__visual--method {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.case-split__img--method {
  object-fit: contain;
}
.case-split__img--illo {
  width: 154px; height: 154px;
  object-fit: contain;
  image-rendering: crisp-edges;
  margin: auto;
}
.case-split__placeholder {
  width: 100%; height: 100%; min-height: 280px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px;
  border: 1px dashed var(--border); border-radius: var(--radius-xl);
}
.case-split__placeholder-icon { font-size: 40px; opacity: 0.25; }
.case-split__placeholder-label {
  font: 500 var(--fs-body-sm)/1.3 var(--font-body); color: var(--fg-subtle); text-align: center;
}

/* ── Research data viz ── */
.case-data-viz {
  padding: var(--space-9) 0;
  border-bottom: 1px solid var(--border);
}
.case-data-viz__grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 16px; margin-top: 32px;
}
.case-data-point {
  padding: 28px 24px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--bg-elevated);
  display: flex; flex-direction: column; gap: 10px;
}
.case-data-point__bar {
  height: 4px; border-radius: 2px; background: var(--border);
  position: relative; overflow: hidden; margin-bottom: 4px;
}
.case-data-point__bar-fill {
  position: absolute; inset: 0; left: 0;
  border-radius: 2px;
  transition: width 0.8s var(--ease-out);
}
.case-data-point--ux   .case-data-point__bar-fill { background: var(--stat-accent-override, var(--ux-base)); }
.case-data-point--ai   .case-data-point__bar-fill { background: var(--stat-accent-override, var(--ai-base)); }
.case-data-point--play .case-data-point__bar-fill { background: var(--stat-accent-override, var(--play-base)); }
.case-data-point__pct {
  font: 800 36px/1 var(--font-display); letter-spacing: var(--tracking-tight);
}
.case-data-point--ux   .case-data-point__pct { color: var(--stat-accent-override, var(--ux-base)); }
.case-data-point--ai   .case-data-point__pct { color: var(--stat-accent-override, var(--ai-base)); }
.case-data-point--play .case-data-point__pct { color: var(--stat-accent-override, var(--play-base)); }
.case-data-point__label { font: 500 var(--fs-body-sm)/1.45 var(--font-body); color: var(--fg-muted); }
.case-data-point__source { font: 400 var(--fs-body-sm)/1 var(--font-body); color: var(--fg-subtle); font-style: italic; }

/* ── Pull quote ── */
.case-quote {
  margin: 0; padding: var(--space-9) 0;
  border-bottom: 1px solid var(--border);
}
.case-quote__inner {
  padding: 44px 52px;
  border-radius: var(--radius-xl);
  position: relative; overflow: hidden;
}
.case-quote--ux   .case-quote__inner { background: var(--ux-wash); border: 1px solid var(--ux-tint); }
.case-quote--ai   .case-quote__inner { background: var(--ai-wash); border: 1px solid var(--ai-tint); }
.case-quote--play .case-quote__inner { background: var(--play-wash); border: 1px solid var(--play-tint); }

/* Photo-backed quote — brand-colour tinted photo (opt-in via
   quoteBgImage + brandColor). The tint is applied as a gradient layer
   above the photo via inline style for the exact brand colour. */
.case-quote__inner--photo {
  background-repeat: no-repeat;
  border: none;
}

/* Navy "universe" quote — repeatable rounded pattern, white text on blue */
.case-quote__inner--pattern {
  border: none;
  border-radius: 28px;
}
.case-quote__inner--pattern::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: url("../assets/cases/erpsupporten/hero-shadow.svg") center/800px repeat;
  opacity: 0.6;
  pointer-events: none;
}
.case-quote__inner--pattern .case-quote__mark { z-index: 1; opacity: 0.18; }
.case-quote__mark {
  font: 800 120px/0.8 var(--font-display);
  position: absolute; top: 20px; left: 44px; opacity: 0.07;
}
.case-quote--ux   .case-quote__mark { color: var(--ux-base); }
.case-quote--ai   .case-quote__mark { color: var(--ai-base); }
.case-quote--play .case-quote__mark { color: var(--play-base); }
.case-quote__text {
  font: 500 clamp(18px,2.5vw,26px)/1.55 var(--font-display);
  letter-spacing: var(--tracking-tight); color: var(--fg);
  text-wrap: pretty; position: relative; z-index: 1;
  max-width: 28ch;
}

/* Decorative "use on dark" illustration — sits on a brand-colour quote
   background, opt-in via caseData.quoteIllustration. */
.case-quote__illustration {
  position: absolute;
  right: 28px; bottom: 28px;
  width: clamp(110px, 16vw, 190px);
  height: auto;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 860px) {
  .case-quote__illustration { display: none; }
}

/* Photo-right variant: real <img> on the left, quote card on the right.
   Opt-in via caseData.quoteCardRight + caseData.quoteBgImage. */
.case-quote__inner--photo-right {
  padding: 0;
  border: none;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--neutral-50, #f7f7f5);
}
.case-quote__bg-img {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}
.case-quote__card-right {
  flex: 0 0 38%;
  min-width: 280px;
  max-width: 420px;
  background: var(--surface, #fff);
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  box-shadow: -4px 0 32px rgba(0,0,0,0.08);
}
.case-quote__mark--card {
  position: static;
  font: 800 80px/0.8 var(--font-display);
  opacity: 0.10;
  color: var(--fg);
  display: block;
  margin-bottom: -8px;
}
.case-quote__text--card {
  font: 500 clamp(17px,2vw,23px)/1.55 var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: pretty;
  position: static;
  max-width: 26ch;
}
@media (max-width: 760px) {
  .case-quote__inner--photo-right { flex-direction: column; }
  .case-quote__bg-img { flex: none; width: 100%; height: auto; }
  .case-quote__card-right {
    flex: none; width: 100%; max-width: none;
    padding: 32px 28px;
    box-shadow: none;
    border-top: 1px solid var(--border);
  }
}
.theme-dark .case-quote__card-right {
  background: var(--ink-800, #1a1a1a);
  box-shadow: -4px 0 32px rgba(0,0,0,0.40);
}

/* ── Solution items ── */
.case-solutions { padding: var(--space-9) 0; border-bottom: 1px solid var(--border); }
.case-solution-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 32px; }
.case-solution-item {
  padding: 28px 24px; border-radius: var(--radius-lg);
  background: var(--bg-elevated); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base);
}
.case-solution-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.case-solution-item--ux:hover   { border-color: var(--ux-tint); }
.case-solution-item--ai:hover   { border-color: var(--ai-tint); }
.case-solution-item--play:hover { border-color: var(--play-tint); }
.case-solution-item__num {
  font: 800 13px/1 var(--font-display); letter-spacing: 0.04em;
  padding: 6px 10px; border-radius: var(--radius-pill);
  display: inline-flex; align-self: flex-start;
}
.case-solution-item--ux   .case-solution-item__num { background: var(--stat-accent-tint-override, var(--ux-tint));   color: var(--stat-accent-ink-override, var(--ux-ink)); }
.case-solution-item--ai   .case-solution-item__num { background: var(--stat-accent-tint-override, var(--ai-tint));   color: var(--stat-accent-ink-override, var(--ai-ink)); }
.case-solution-item--play .case-solution-item__num { background: var(--stat-accent-tint-override, var(--play-tint)); color: var(--stat-accent-ink-override, var(--play-ink)); }
.case-solution-item__heading { font: 700 17px/1.25 var(--font-body); color: var(--fg); }
.case-solution-item__body { font: 400 var(--fs-body-sm)/1.65 var(--font-body); color: var(--fg-muted); }

/* ── NDA notice ── */
.case-nda {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 28px 32px; border-radius: var(--radius-xl);
  border: 1.5px dashed var(--border); background: var(--bg-elevated);
  margin: 0 0 var(--space-9);
}
.case-nda__icon { font-size: 28px; flex-shrink: 0; line-height: 1; }
.case-nda__title { font: 700 var(--fs-body-sm)/1 var(--font-body); color: var(--fg); margin-bottom: 8px; }
.case-nda__body  { font: 400 var(--fs-body-sm)/1.6 var(--font-body); color: var(--fg-muted); margin: 0; text-wrap: pretty; }

/* ── Section heading utility ── */
.case-section-heading {
  font: 800 clamp(24px,3vw,38px)/1.1 var(--font-display);
  letter-spacing: var(--tracking-tight); color: var(--fg); margin: 0 0 8px;
}
.case-section-lead { font: 400 16px/1.65 var(--font-body); color: var(--fg-muted); margin: 0 0 32px; text-wrap: pretty; max-width: 64ch; }

/* ── Findings list ── */
.case-findings { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.case-finding {
  font: 400 var(--fs-body-sm)/1.55 var(--font-body); color: var(--fg-muted);
  padding: 13px 18px 13px 46px; position: relative;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.case-finding::before {
  content: "→"; position: absolute; left: 17px; top: 13px;
  font: 700 13px/1.55 var(--font-body);
}
.case-finding--ux::before   { color: var(--stat-accent-override, var(--ux-base)); }
.case-finding--ai::before   { color: var(--stat-accent-override, var(--ai-base)); }
.case-finding--play::before { color: var(--stat-accent-override, var(--play-base)); }

/* Accordion variant — collapses each finding to a single line so the
   list's total height aligns with a tall side image (e.g. circular photo) */
.case-findings--accordion {
  min-width: 0;
}
.case-findings--accordion .case-finding {
  padding: 0; cursor: pointer; min-width: 0;
}
.case-findings--accordion .case-finding > summary {
  font: 600 var(--fs-body-sm)/1.55 var(--font-body); color: var(--fg);
  list-style: none; cursor: pointer;
  padding: 13px 40px 13px 46px; display: block; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.case-findings--accordion .case-finding > summary::-webkit-details-marker,
.case-findings--accordion .case-finding > summary::marker { display: none; }
.case-findings--accordion .case-finding[open] > summary {
  white-space: normal; overflow: visible; text-overflow: initial;
}
/* Arrow icon lives on the details box; pull it down to align with the summary's first line */
.case-findings--accordion .case-finding::before { top: 13px; z-index: 1; }
.case-findings--accordion .case-finding > summary::after {
  content: "+"; position: absolute; right: 16px; top: 11px;
  font: 700 16px/1.55 var(--font-body); color: var(--fg-subtle);
}
.case-findings--accordion .case-finding[open] > summary::after { content: "–"; }

/* Expanded body copy — full sentence shown below the headline */
.case-finding__body {
  margin: -4px 0 0; padding: 0 40px 13px 46px;
  font: 400 var(--fs-body-sm)/1.6 var(--font-body); color: var(--fg-muted);
}

.case-identity__logo {
  padding: 20px 28px;
  background: var(--logo-bg-override, var(--ink-900));
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.case-identity__logo-img { height: 52px; width: auto; display: block; }

/* ── Research split: findings (1/3) + illustration (2/3) ── */
.case-research-split {
  display: grid; grid-template-columns: 1fr 2fr;
  gap: 20px; align-items: center; margin-top: 16px;
}
.case-research-illo {
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.case-research-illo img {
  width: 100%; height: auto; display: block;
  object-fit: contain;
}

/* Photo variant — give the findings list more room, the photo a tighter column */
.case-research-split--photo {
  grid-template-columns: 1.6fr 1fr;
}
/* Photo variant — circular crop, used for real photography */
.case-research-illo--photo {
  padding: 0;
  aspect-ratio: 1/1; width: 100%; max-width: 90%;
  margin: 0 auto;
  border-radius: 50%; overflow: hidden;
}
.case-research-illo--photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.case-research-illo--contain {
  aspect-ratio: auto;
  max-width: none;
  border-radius: var(--radius-xl);
  overflow: visible;
  background: var(--surface-2, var(--bg-subtle, #f4f4f5));
}
.case-research-illo--contain img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 700px) {
  .case-research-split { grid-template-columns: 1fr; }
  .case-research-illo { max-width: 320px; margin: 0 auto; }
}

/* ── Methodology full-width variant (opt-in via methodFull) ──
   Full-bleed "highlight band": white background spans the full
   viewport width, breaking out of .page's max-width/padding. The
   inner wrapper restores the page's content width and gutters. */
.case-method-full {
  margin-top: var(--space-9);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--surface-white);
  padding: var(--space-9) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-3);
}
.case-method-full__inner {
  max-width: var(--page-max, 88.75rem);
  margin: 0 auto;
  padding: 0 2rem;
}
.case-method-full__img {
  width: 100%; height: auto; display: block;
  object-fit: contain;
}
.case-method-full__img-wrap {
  display: block;
  width: 100%;
  position: relative;
  cursor: zoom-in;
}
.case-method-full__img-wrap:focus-visible {
  outline: 2px solid var(--focus, currentColor);
  outline-offset: 4px;
}
.case-method-full__img-wrap:hover .case-gallery__zoom-hint,
.case-method-full__img-wrap:focus-visible .case-gallery__zoom-hint {
  background: rgba(0,0,0,0.32);
  color: rgba(255,255,255,0.92);
}
.case-method-full__text { max-width: 760px; margin-top: 28px; }

/* ── Methodology framed-split variant (opt-in via methodImgFramed) ──
   For small/raster process images: shown at native size inside a
   white card with a drop shadow, side-by-side with the text, instead
   of stretched full-width (which causes pixelation). */
.case-method-full__inner--split {
  display: flex; align-items: center; gap: var(--space-8, 48px);
}
.case-method-full__frame {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
  padding: 32px;
}
.case-method-full--framed .case-method-full__frame .case-method-full__img {
  width: 100%; height: auto; max-width: 460px;
  object-fit: contain;
}
.case-method-full--framed .case-method-full__frame--large {
  flex: 1.45 1 0;
}
.case-method-full--framed .case-method-full__frame--large .case-method-full__img {
  max-width: 680px;
}
.case-method-full--framed .case-method-full__text {
  flex: 1 1 0; margin-top: 0;
}
@media (max-width: 860px) {
  .case-method-full__inner--split { flex-direction: column; gap: 32px; }
  .case-method-full--framed .case-method-full__frame,
  .case-method-full--framed .case-method-full__text { flex: 1 1 auto; width: 100%; }
}

/* ── Methodology process diagram (vector SVG) ──
   Replaces the raster process image for cases that set methodDiagram.
   Each stage (ring + wedge + label) and the start/end arrow accents
   animate in with a staggered fade/scale when scrolled into view. */
.case-method-svg {
  width: 100%; height: auto; display: block;
}
.case-method-svg__stage,
.case-method-svg__arrow {
  opacity: 0;
  transform: scale(0.85);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.case-method-svg.is-visible .case-method-svg__stage,
.case-method-svg.is-visible .case-method-svg__arrow {
  opacity: 1;
  transform: scale(1);
}
.case-method-svg.is-visible .case-method-svg__stage:nth-of-type(2) { transition-delay: 0.1s; }
.case-method-svg.is-visible .case-method-svg__stage:nth-of-type(3) { transition-delay: 0.2s; }
.case-method-svg.is-visible .case-method-svg__stage:nth-of-type(4) { transition-delay: 0.3s; }
.case-method-svg.is-visible .case-method-svg__arrow--start { transition-delay: 0s; }
.case-method-svg.is-visible .case-method-svg__arrow--end { transition-delay: 0.3s; }
.case-method-svg__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 34px;
  fill: #0b0b0b;
}
@media (max-width: 700px) {
  .case-method-svg__label { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .case-method-svg__stage,
  .case-method-svg__arrow {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Result gallery (optional, opt-in via c.gallery) ── */
.case-gallery { margin-top: var(--space-9); }
.case-gallery__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: 32px;
}
.case-gallery__item {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-2, var(--bg-subtle, #f4f4f5));
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.case-gallery__img {
  width: 100%; height: auto; display: block; object-fit: cover;
}
video.case-gallery__img {
  height: 320px; object-fit: cover;
}
.case-gallery__item--contain {
  background: var(--surface-2, var(--bg-subtle, #f4f4f5));
}
.case-gallery__item--contain .case-gallery__img-wrap {
  padding: 14px;
}
.case-gallery__img--contain {
  width: 100%;
  height: auto;
  max-height: min(72vh, 620px);
  object-fit: contain;
}
video.case-gallery__img--contain {
  height: auto;
  max-height: min(72vh, 620px);
  object-fit: contain;
  background: #000;
}
.case-gallery__caption {
  padding: 14px 16px; font: 500 var(--fs-body-sm)/1.45 var(--font-body);
  color: var(--fg-subtle); border-top: 1px solid var(--border);
}
.case-gallery__item--ux   { border-color: var(--ux-tint); }
.case-gallery__item--ai   { border-color: var(--ai-tint); }
.case-gallery__item--play { border-color: var(--play-tint); }

/* Masonry variant — Pinterest-style columns for galleries mixing
   portrait, square and landscape photos. Opt in via caseData.galleryMasonry. */
.case-gallery__grid--masonry {
  display: block;
  column-count: 3;
  column-gap: 20px;
}
.case-gallery__grid--masonry .case-gallery__item {
  width: 100%;
  margin: 0 0 20px;
  break-inside: avoid;
}
@media (max-width: 900px) {
  .case-gallery__grid { grid-template-columns: 1fr 1fr; }
  .case-gallery__grid--masonry { column-count: 2; }
}
@media (max-width: 600px) {
  .case-gallery__grid--masonry { column-count: 1; }
}
@media (max-width: 600px) { .case-gallery__grid { grid-template-columns: 1fr; } }

/* ── Gallery image — clickable wrapper for lightbox ── */
.case-gallery__img-wrap {
  display: block; position: relative; cursor: zoom-in;
}
.case-gallery__img-wrap .case-gallery__img { display: block; width: 100%; }
.case-gallery__zoom-hint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0); color: transparent;
  transition: background 0.2s, color 0.2s;
  pointer-events: none;
}
.case-gallery__img-wrap:hover .case-gallery__zoom-hint {
  background: rgba(0,0,0,0.32);
  color: rgba(255,255,255,0.92);
}

/* ── Lightbox overlay ── */
.lb-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.9);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: lb-in 0.18s ease;
}
@keyframes lb-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lb-close {
  position: absolute; top: 20px; right: 24px; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer; transition: background 0.15s;
}
.lb-close:hover { background: rgba(255,255,255,0.25); }
.lb-stage {
  flex: 1; width: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 56px 24px 8px;
  touch-action: none;
}
.lb-img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain; display: block;
  will-change: transform;
  pointer-events: none; user-select: none;
}
.lb-caption {
  flex-shrink: 0; text-align: center;
  color: rgba(255,255,255,0.72);
  font: 500 var(--fs-body-sm)/1.5 var(--font-body);
  padding: 12px 40px 4px; max-width: 720px;
}
.lb-hint {
  flex-shrink: 0;
  color: rgba(255,255,255,0.28);
  font: 400 var(--fs-micro)/1 var(--font-body);
  padding: 6px 0 16px; letter-spacing: 0.04em;
}

/* ── Case video (optional, opt-in via caseData.caseVideo) ── */
.case-video { margin-top: var(--space-9); }
.case-video__frame {
  margin-top: 32px;
  width: 100%; aspect-ratio: 16/9;
  border-radius: var(--radius-xl); overflow: hidden;
  background: var(--surface-2, var(--bg-subtle, #f4f4f5));
  border: 1px solid var(--border);
  position: relative;
}
.case-video__embed {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}

/* ── Brand Context ── */
.case-brand-context {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--border);
}
.case-brand-context__inner {
  max-width: 760px;
}
.case-brand-context__eyebrow {
  display: block;
  margin-bottom: var(--space-3);
}
.case-brand-context__heading {
  margin-bottom: var(--space-4);
}
.case-brand-context__lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--fg-body);
  margin-bottom: var(--space-5);
}
.case-brand-context__pillars {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.case-brand-context__pillar {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4);
  border-left: 3px solid var(--border);
  background: var(--surface-raised);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.case-brand-context__pillar-label {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--fg-heading);
  line-height: 1.4;
}
.case-brand-context__pillar-body {
  font-size: var(--fs-body-sm);
  color: var(--fg-body);
  line-height: 1.6;
}
.case-brand-context__ux-note {
  font-size: var(--fs-body-sm);
  line-height: 1.65;
  color: var(--fg-subtle);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  margin-top: var(--space-4);
}
.case-brand-context--solar {
  margin-top: var(--space-7);
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid color-mix(in srgb, #0f1b2d 18%, var(--border));
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(15,27,45,0.97), rgba(24,43,70,0.94)),
    radial-gradient(circle at 85% 18%, rgba(217,119,87,0.22), transparent 34%);
  color: #ffffff;
  overflow: hidden;
}
.case-brand-context--solar .case-brand-context__inner {
  max-width: 100%;
}
.case-brand-context--solar .case-brand-context__text {
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(18rem, 1.08fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.case-brand-context--solar .case-brand-context__eyebrow,
.case-brand-context--solar .case-brand-context__heading,
.case-brand-context--solar .case-brand-context__lead {
  grid-column: 1;
}
.case-brand-context--solar .case-brand-context__eyebrow,
.case-brand-context--solar .case-brand-context__heading,
.case-brand-context--solar .case-brand-context__lead {
  color: inherit;
}
.case-brand-context--solar .case-brand-context__lead {
  max-width: 60ch;
  opacity: 0.88;
}
.case-brand-context--solar .case-brand-context__pillars {
  grid-column: 2;
  grid-row: 1 / span 4;
  margin: 0;
}
.case-brand-context--solar .case-brand-context__pillar {
  grid-template-columns: 9.5rem 1fr;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-left: 3px solid #d97757;
  backdrop-filter: blur(8px);
}
.case-brand-context--solar .case-brand-context__pillar-label,
.case-brand-context--solar .case-brand-context__pillar-body {
  color: inherit;
}
.case-brand-context--solar .case-brand-context__pillar-label {
  color: #fed7aa;
}
.case-brand-context--solar .case-brand-context__pillar-body {
  opacity: 0.86;
}
.case-brand-context--solar .case-brand-context__ux-note {
  grid-column: 1 / -1;
  color: rgba(255,255,255,0.84);
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
}
@media (max-width: 600px) {
  .case-brand-context__pillar { grid-template-columns: 1fr; gap: var(--space-2); }
}
@media (max-width: 860px) {
  .case-brand-context--solar .case-brand-context__text { grid-template-columns: 1fr; }
  .case-brand-context--solar .case-brand-context__eyebrow,
  .case-brand-context--solar .case-brand-context__heading,
  .case-brand-context--solar .case-brand-context__lead,
  .case-brand-context--solar .case-brand-context__pillars {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ── Footer row (Back to Cases) ── */
.case-footer-row {
  padding: var(--space-7) 0 var(--space-8);
  border-top: 1px solid var(--border);
  margin-top: var(--space-9);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .case-split { grid-template-columns: 1fr; gap: 32px; }
  .case-split--flip { direction: ltr; }
  .case-data-viz__grid { grid-template-columns: 1fr 1fr; }
  .case-solution-grid { grid-template-columns: 1fr 1fr; }
  .case-identity { flex-direction: column; align-items: flex-start; }
  .case-identity__meta { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 20px; }
  .case-identity__meta-row { text-align: left; }
  .case-quote__inner { padding: 32px 28px; }
  .case-outcomes__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .case-data-viz__grid { grid-template-columns: 1fr; }
  .case-solution-grid { grid-template-columns: 1fr; }
  /* 2-up grid; if the card count is odd, the trailing card spans the
     full row instead of sitting alone as a half-width orphan. Works for
     any real stat count (cases ship 3, 5, or 6 outcome cards). */
  .case-outcomes__grid { grid-template-columns: repeat(2, 1fr); }
  .case-outcome-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .case-cover { aspect-ratio: 4/3; }
  .case-cover--video { aspect-ratio: 16/9; }
}

html.mm-print-mode {
  background: #e9e6de;
}
html.mm-print-mode body,
html.mm-print-mode .app {
  background: #e9e6de !important;
}
html.mm-print-mode .topbar,
html.mm-print-mode .mega,
html.mm-print-mode .footer,
html.mm-print-mode .breadcrumb,
html.mm-print-mode .case-footer-row,
html.mm-print-mode .case-gallery__zoom-hint,
html.mm-print-mode .lb-overlay,
html.mm-print-mode iframe {
  display: none !important;
}
html.mm-print-mode .page.case-page {
  max-width: 960px;
  margin: 32px auto;
  padding: 42px 52px;
  background: #fff !important;
  color: #151515;
  border: 1px solid #ddd5c8;
  box-shadow: 0 20px 70px rgba(0,0,0,0.12);
}

@media print {
  @page {
    size: A4;
    margin: 13mm 12mm;
  }
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  html,
  body,
  .app {
    background: #fff !important;
  }
  .topbar,
  .mega,
  .footer,
  .breadcrumb,
  .case-footer-row,
  .case-gallery__zoom-hint,
  .lb-overlay,
  iframe {
    display: none !important;
  }
  .page.case-page {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
    border: 0 !important;
  }
}

html.mm-print-mode .case-cover {
  min-height: 0 !important;
  aspect-ratio: auto !important;
  max-height: 74mm;
  margin-bottom: 18px;
  border-radius: 12px;
  background: #f4f1eb;
}

html.mm-print-mode .case-cover img {
  height: auto;
  max-height: 74mm;
  object-fit: contain;
}
html.mm-print-mode .case-cover__overlay {
  display: none;
}

@media print {
  .case-cover {
    min-height: 0 !important;
    aspect-ratio: auto !important;
    max-height: 74mm !important;
    margin-bottom: 18px !important;
    border-radius: 12px !important;
    background: #f4f1eb !important;
  }
  .case-cover img {
    height: auto !important;
    max-height: 74mm;
    object-fit: contain !important;
  }
  .case-cover__overlay {
    display: none !important;
  }
}

html.mm-print-mode .case-hero-panel {
  padding: 26px;
  border-radius: 14px;
  gap: 20px;
}
html.mm-print-mode .case-hero-panel__top {
  grid-template-columns: 1.05fr 0.95fr;
  gap: 22px;
}
html.mm-print-mode .case-hero-panel__photo {
  min-height: 0;
  max-height: 230px;
}
html.mm-print-mode .case-hero-panel__photo-img {
  max-height: 230px;
  object-fit: contain !important;
}
html.mm-print-mode .case-hero-panel__title,
html.mm-print-mode .case-identity__title {
  font-size: 34px;
  line-height: 1.04;
  max-width: 20ch;
}
html.mm-print-mode .case-hero-panel__intro,
html.mm-print-mode .case-identity__intro {
  font-size: 14px;
  line-height: 1.5;
  max-width: 70ch;
}
html.mm-print-mode .case-hero-panel__meta,
html.mm-print-mode .case-identity__meta {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding-top: 16px;
}
html.mm-print-mode .case-hero-panel__meta-value,
html.mm-print-mode .case-identity__meta-value {
  font-size: 11px;
  line-height: 1.35;
}

@media print {
  .case-hero-panel {
    padding: 22px !important;
    border-radius: 12px !important;
    gap: 16px !important;
    break-inside: avoid;
  }
  .case-hero-panel__top {
    grid-template-columns: 1fr 0.85fr !important;
    gap: 16px !important;
  }
  .case-hero-panel__photo {
    min-height: 0 !important;
    max-height: 62mm !important;
  }
  .case-hero-panel__photo-img {
    max-height: 62mm !important;
    object-fit: contain !important;
  }
  .case-hero-panel__title,
  .case-identity__title {
    font-size: 24pt !important;
    line-height: 1.04 !important;
    max-width: none !important;
  }
  .case-hero-panel__intro,
  .case-identity__intro {
    font-size: 10.5pt !important;
    line-height: 1.45 !important;
  }
  .case-hero-panel__meta {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    padding-top: 12px !important;
  }
  .case-hero-panel__meta-label,
  .case-identity__meta-label {
    font-size: 7.5pt !important;
  }
  .case-hero-panel__meta-value,
  .case-identity__meta-value {
    font-size: 8.5pt !important;
    line-height: 1.3 !important;
  }
}

html.mm-print-mode .case-identity {
  padding: 18px 0 22px;
  align-items: flex-start;
  border-bottom-color: #e6dfd2;
}
html.mm-print-mode .case-identity__left {
  gap: 9px;
}
html.mm-print-mode .case-identity__meta {
  display: grid;
  align-items: start;
  text-align: left;
}
html.mm-print-mode .case-identity__meta-row {
  text-align: left;
}

@media print {
  .case-identity {
    padding: 14px 0 18px !important;
    align-items: flex-start !important;
    break-inside: avoid;
  }
  .case-identity__left {
    gap: 7px !important;
  }
  .case-identity__meta {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }
  .case-identity__meta-row {
    text-align: left !important;
  }
}

html.mm-print-mode .case-page section,
html.mm-print-mode .case-brand-context,
html.mm-print-mode .case-outcomes,
html.mm-print-mode .case-data-viz,
html.mm-print-mode .case-solutions,
html.mm-print-mode .case-method-full,
html.mm-print-mode .case-gallery {
  margin-top: 28px;
  padding: 0;
  border-bottom: 0;
}
html.mm-print-mode .case-section-heading,
html.mm-print-mode .case-gallery h2,
html.mm-print-mode .case-split__heading {
  font-size: 24px;
  line-height: 1.12;
  max-width: 24ch;
}
html.mm-print-mode .case-section-lead,
html.mm-print-mode .case-split__body,
html.mm-print-mode .case-brand-context__lead,
html.mm-print-mode .case-brand-context__pillar-body,
html.mm-print-mode .case-brand-context__ux-note,
html.mm-print-mode .case-solution-item__body,
html.mm-print-mode .case-gallery__caption {
  font-size: 12px;
  line-height: 1.45;
}

@media print {
  .case-page section,
  .case-brand-context,
  .case-outcomes,
  .case-data-viz,
  .case-solutions,
  .case-method-full,
  .case-gallery {
    margin-top: 8mm !important;
    padding: 0 !important;
    border-bottom: 0 !important;
  }
  .case-section-heading,
  .case-gallery h2,
  .case-split__heading {
    font-size: 17pt !important;
    line-height: 1.12 !important;
    max-width: none !important;
  }
  .case-section-lead,
  .case-split__body,
  .case-brand-context__lead,
  .case-brand-context__pillar-body,
  .case-brand-context__ux-note,
  .case-solution-item__body,
  .case-gallery__caption {
    font-size: 9pt !important;
    line-height: 1.42 !important;
  }
}

html.mm-print-mode .case-brand-context,
html.mm-print-mode .case-brand-context--solar {
  background: #101b2d !important;
  color: #fff !important;
  padding: 24px !important;
  border-radius: 14px;
}
html.mm-print-mode .case-brand-context__inner {
  max-width: none;
}
html.mm-print-mode .case-brand-context--solar .case-brand-context__text {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 18px 26px;
}
html.mm-print-mode .case-brand-context__pillars {
  gap: 8px;
}

@media print {
  .case-brand-context,
  .case-brand-context--solar {
    background: #101b2d !important;
    color: #fff !important;
    padding: 7mm !important;
    border-radius: 10px !important;
    break-inside: avoid;
  }
  .case-brand-context__inner {
    max-width: none !important;
  }
  .case-brand-context--solar .case-brand-context__text {
    grid-template-columns: 0.8fr 1.2fr !important;
    gap: 4mm 7mm !important;
  }
}

html.mm-print-mode .case-outcomes__grid,
html.mm-print-mode .case-data-viz__grid,
html.mm-print-mode .case-solution-grid,
html.mm-print-mode .case-gallery__grid,
html.mm-print-mode .case-research-split,
html.mm-print-mode .case-method-full__inner--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
html.mm-print-mode .case-outcomes__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
html.mm-print-mode .case-outcome-card {
  padding: 14px;
}
html.mm-print-mode .case-outcome-card__value {
  font-size: 28px;
}
html.mm-print-mode .case-data-point,
html.mm-print-mode .case-solution-item,
html.mm-print-mode .case-gallery__item {
  box-shadow: none !important;
  transform: none !important;
  border-color: #e2dacd !important;
}
html.mm-print-mode .case-research-illo,
html.mm-print-mode .case-method-full__frame {
  max-width: none;
}
html.mm-print-mode .case-research-illo img,
html.mm-print-mode .case-method-full__img,
html.mm-print-mode .case-gallery__img {
  max-height: 250px;
  object-fit: contain !important;
}

@media print {
  .case-outcomes__grid,
  .case-data-viz__grid,
  .case-solution-grid,
  .case-gallery__grid,
  .case-research-split,
  .case-method-full__inner--split {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4mm !important;
  }
  .case-outcomes__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .case-outcome-card {
    padding: 4mm !important;
  }
  .case-outcome-card__value {
    font-size: 20pt !important;
  }
  .case-data-point,
  .case-solution-item,
  .case-gallery__item {
    box-shadow: none !important;
    transform: none !important;
    border-color: #e2dacd !important;
    break-inside: avoid;
  }
  .case-research-illo,
  .case-method-full__frame {
    max-width: none !important;
  }
  .case-research-illo img,
  .case-method-full__img,
  .case-gallery__img {
    max-height: 58mm !important;
    object-fit: contain !important;
  }
}

html.mm-print-mode .case-challenge-hero {
  margin-left: 0;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #101b2d !important;
}
html.mm-print-mode .case-challenge-hero__text {
  max-width: none;
  padding: 22px;
  grid-template-columns: 0.8fr 1.2fr;
}
html.mm-print-mode .case-challenge-hero__img {
  max-height: 250px;
  object-fit: contain;
}
html.mm-print-mode .case-split {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
html.mm-print-mode .case-split__visual {
  aspect-ratio: auto;
}

@media print {
  .case-challenge-hero {
    margin-left: 0 !important;
    width: 100% !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #101b2d !important;
    break-inside: avoid;
  }
  .case-challenge-hero__text {
    max-width: none !important;
    padding: 6mm !important;
    grid-template-columns: 0.8fr 1.2fr !important;
  }
  .case-challenge-hero__img {
    max-height: 58mm !important;
    object-fit: contain !important;
  }
  .case-split {
    grid-template-columns: 1fr 1fr !important;
    gap: 6mm !important;
    break-inside: avoid;
  }
}

html.mm-print-mode .case-quote__inner,
html.mm-print-mode .case-quote__inner--photo-right {
  padding: 24px;
  min-height: 0;
  break-inside: avoid;
}
html.mm-print-mode .case-quote__text,
html.mm-print-mode .case-quote__text--card {
  font-size: 21px;
  line-height: 1.25;
}
html.mm-print-mode .case-quote__bg-img {
  max-height: 190px;
  object-fit: cover;
}

@media print {
  .case-quote__inner,
  .case-quote__inner--photo-right {
    padding: 6mm !important;
    min-height: 0 !important;
    break-inside: avoid;
  }
  .case-quote__text,
  .case-quote__text--card {
    font-size: 15pt !important;
    line-height: 1.25 !important;
  }
  .case-quote__bg-img {
    max-height: 42mm !important;
    object-fit: cover !important;
  }
}

/* ---- dedicated case PDF view (?print=1) ---- */
.case-pdf {
  --pdf-accent: var(--stat-accent-override, var(--ux-base));
  width: min(100% - 32px, 980px);
  margin: 32px auto;
  padding: 42px;
  background: #fffdf8;
  color: #111;
  border: 1px solid #e4dac9;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(36, 28, 17, 0.12);
  font-family: var(--font-body);
}

.case-pdf--ai { --pdf-accent: var(--stat-accent-override, var(--ai-base)); }
.case-pdf--play { --pdf-accent: var(--stat-accent-override, var(--play-base)); }

.case-pdf__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.9fr);
  gap: 28px;
  align-items: center;
  padding-bottom: 28px;
  border-bottom: 1px solid #e8dfd1;
}

.case-pdf__mast,
.case-pdf__footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #8f877a;
  font: 700 10px/1.2 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.case-pdf__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
}

.case-pdf__tag {
  border: 1px solid color-mix(in srgb, var(--pdf-accent) 34%, #fff);
  border-radius: 999px;
  color: color-mix(in srgb, var(--pdf-accent) 70%, #151515);
  padding: 6px 10px;
  font: 800 10px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-pdf__title {
  margin: 18px 0 0;
  font: 900 clamp(34px, 5vw, 54px)/0.96 var(--font-display);
  letter-spacing: 0;
  max-width: 12ch;
}

.case-pdf__intro,
.case-pdf p,
.case-pdf li {
  color: #5d584f;
  font-size: 14px;
  line-height: 1.55;
}

.case-pdf__intro {
  max-width: 58ch;
  margin-top: 20px;
}

.case-pdf__hero-figure {
  margin: 0;
}

.case-pdf__image,
.case-pdf__wide-image {
  display: block;
  width: 100%;
  max-height: 310px;
  object-fit: contain;
  background: #f5f1ea;
  border: 1px solid #e8dfd1;
  border-radius: 14px;
}

.case-pdf__wide-image {
  margin-top: 16px;
  max-height: 360px;
}

.case-pdf__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.case-pdf__meta-card,
.case-pdf__card,
.case-pdf__stat,
.case-pdf__gallery-item {
  border: 1px solid #e8dfd1;
  border-radius: 12px;
  background: #fff;
}

.case-pdf__meta-card {
  padding: 12px;
}

.case-pdf__meta-card span,
.case-pdf__eyebrow {
  display: block;
  color: #8f877a;
  font: 800 10px/1.2 var(--font-body);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.case-pdf__meta-card strong {
  display: block;
  margin-top: 7px;
  font: 800 12px/1.35 var(--font-body);
}

.case-pdf__section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #eee6da;
  break-inside: avoid;
}

.case-pdf__section h2 {
  margin: 8px 0 12px;
  font: 900 25px/1.08 var(--font-display);
  letter-spacing: 0;
  max-width: 26ch;
}

.case-pdf__section h3 {
  margin: 0 0 8px;
  font: 850 15px/1.2 var(--font-display);
}

.case-pdf__section--brand {
  padding: 24px;
  border: 0;
  border-radius: 16px;
  background: #101b2d;
  color: #fff;
}

.case-pdf__section--brand p,
.case-pdf__section--brand .case-pdf__eyebrow,
.case-pdf__section--brand .case-pdf__note {
  color: rgba(255, 255, 255, 0.78);
}

.case-pdf__section--brand .case-pdf__card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

.case-pdf__section--brand .case-pdf__card h3,
.case-pdf__section--brand .case-pdf__card p {
  color: #fff;
}

.case-pdf__stats,
.case-pdf__cards,
.case-pdf__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.case-pdf__stats {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.case-pdf__stat {
  padding: 16px;
}

.case-pdf__stat-value {
  display: block;
  color: var(--pdf-accent);
  font: 900 30px/1 var(--font-display);
}

.case-pdf__stat span,
.case-pdf__stat em {
  display: block;
  margin-top: 7px;
  color: #5d584f;
  font-size: 12px;
  line-height: 1.35;
}

.case-pdf__stat em {
  color: #8f877a;
  font-style: italic;
}

.case-pdf__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.9fr);
  gap: 22px;
  align-items: center;
}

.case-pdf__cards {
  margin-top: 14px;
}

.case-pdf__card {
  padding: 16px;
}

.case-pdf__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pdf-accent) 16%, #fff);
  color: var(--pdf-accent);
  font: 900 11px/1 var(--font-body);
}

.case-pdf__findings {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.case-pdf__findings li {
  position: relative;
  padding: 10px 12px 10px 30px;
  border: 1px solid #e8dfd1;
  border-radius: 10px;
  background: #fff;
}

.case-pdf__findings li::before {
  content: "→";
  position: absolute;
  left: 12px;
  top: 10px;
  color: var(--pdf-accent);
  font-weight: 900;
}

.case-pdf__quote {
  padding: 24px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--pdf-accent) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--pdf-accent) 24%, #fff);
}

.case-pdf__quote p {
  margin: 0;
  color: #171717;
  font: 850 22px/1.24 var(--font-display);
}

.case-pdf__gallery {
  margin-top: 14px;
}

.case-pdf__gallery-item {
  margin: 0;
  overflow: hidden;
  break-inside: avoid;
}

.case-pdf__gallery-item img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: contain;
  background: #f5f1ea;
}

.case-pdf__gallery-item figcaption {
  padding: 10px 12px;
  color: #5d584f;
  font-size: 12px;
  line-height: 1.35;
}

.case-pdf__footer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #e8dfd1;
}

@media (max-width: 760px) {
  .case-pdf {
    width: min(100% - 20px, 980px);
    padding: 24px;
  }
  .case-pdf__hero,
  .case-pdf__split,
  .case-pdf__meta,
  .case-pdf__cards,
  .case-pdf__gallery {
    grid-template-columns: 1fr;
  }
}

@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  html.mm-print-mode,
  html.mm-print-mode body {
    background: #fff !important;
  }

  .case-pdf {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  .case-pdf__hero {
    grid-template-columns: 1.05fr 0.9fr !important;
    gap: 8mm !important;
    padding-bottom: 8mm !important;
  }

  .case-pdf__mast,
  .case-pdf__footer,
  .case-pdf__meta-card span,
  .case-pdf__eyebrow {
    font-size: 7.5pt !important;
    letter-spacing: 0.12em !important;
  }

  .case-pdf__title {
    font-size: 30pt !important;
    line-height: 0.98 !important;
  }

  .case-pdf__intro,
  .case-pdf p,
  .case-pdf li {
    font-size: 9.5pt !important;
    line-height: 1.45 !important;
  }

  .case-pdf__image,
  .case-pdf__wide-image {
    max-height: 70mm !important;
    border-radius: 8px !important;
    object-fit: contain !important;
  }

  .case-pdf__meta {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 3mm !important;
    margin-top: 5mm !important;
  }

  .case-pdf__meta-card,
  .case-pdf__card,
  .case-pdf__stat,
  .case-pdf__gallery-item {
    border-radius: 7px !important;
  }

  .case-pdf__meta-card,
  .case-pdf__card,
  .case-pdf__stat {
    padding: 4mm !important;
  }

  .case-pdf__section {
    margin-top: 8mm !important;
    padding-top: 6mm !important;
    break-inside: avoid !important;
  }

  .case-pdf__section h2 {
    font-size: 17pt !important;
  }

  .case-pdf__section h3 {
    font-size: 11pt !important;
  }

  .case-pdf__section--brand,
  .case-pdf__quote {
    padding: 6mm !important;
  }

  .case-pdf__stats,
  .case-pdf__cards,
  .case-pdf__gallery,
  .case-pdf__split {
    gap: 4mm !important;
  }

  .case-pdf__cards,
  .case-pdf__gallery,
  .case-pdf__split {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .case-pdf__stat-value {
    font-size: 21pt !important;
  }

  .case-pdf__quote p {
    font-size: 15pt !important;
  }

  .case-pdf__gallery-item img {
    height: 44mm !important;
    object-fit: contain !important;
  }
}

/* ---- Inline AI Assistant: cinematic case treatment ---- */
.case-page--inline-ai {
  padding-bottom: 0;
}

.inline-ai-case {
  --inline-bg: #070a12;
  --inline-panel: rgba(255, 255, 255, 0.07);
  --inline-panel-strong: rgba(255, 255, 255, 0.12);
  --inline-line: rgba(255, 255, 255, 0.22);
  --inline-text: #f8fafc;
  --inline-muted: rgba(248, 250, 252, 0.84);
  --inline-accent: var(--ai-base, #e07652);
  --inline-green: #22c55e;
  background: var(--inline-bg);
  color: var(--inline-text);
}

.inline-ai-case .eyebrow {
  color: color-mix(in srgb, var(--inline-accent) 78%, #fff);
}

.inline-ai-scroll-stage {
  --inline-progress: 0;
  --inline-portal: 0;
  --inline-material: 0;
  --inline-device-x: 0px;
  --inline-device-y: 118px;
  --inline-device-scale: 0.8;
  --inline-device-rotate-x: 5deg;
  --inline-device-rotate-y: -10deg;
  --inline-bg-shift: 0px;
  --inline-bg-shift-soft: 0px;
  --inline-bg-shift-deep: 0px;
  --inline-bg-scale: 1;
  --inline-foreground-shift: 0px;
  --inline-foreground-shift-fast: 0px;
  --inline-foreground-shift-faster: 0px;
  --inline-portal-y: 0px;
  --inline-portal-scale: 1;
  --inline-material-opacity: 0.08;
  --inline-depth-opacity: 0.08;
  --inline-foreground-opacity: 0;
  --inline-spot-1: 34%;
  --inline-spot-2: 38%;
  --inline-spot-3: 44%;
  --inline-spot-opacity: 0;
  position: relative;
  height: 165vh;
  min-height: 1180px;
  background: #070a12;
}

.inline-ai-hero {
  position: relative;
  position: sticky;
  top: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  height: 100vh;
  padding: clamp(36px, 5vw, 64px) max(24px, calc((100vw - 1320px) / 2));
  overflow: hidden;
  isolation: isolate;
}

.inline-ai-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(108deg, transparent 0 48%, rgba(224, 118, 82, 0.2) 48% 52%, transparent 52% 100%),
    linear-gradient(135deg, #070a12 0%, #0d1220 48%, #1b0f0b 100%);
  background-size: 44px 44px, 44px 44px, auto, auto;
  transform: translate3d(0, var(--inline-bg-shift), 0) scale(var(--inline-bg-scale));
  transform-origin: center;
}

.inline-ai-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 160px;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(7,10,18,0), rgba(7,10,18,0.9));
}

.inline-ai-hero__ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.inline-ai-hero__depth {
  position: absolute;
  display: block;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  transform: translate3d(0, var(--inline-bg-shift-soft), 0) rotate(-18deg);
  opacity: var(--inline-depth-opacity);
}

.inline-ai-hero__depth--one {
  width: 42vw;
  height: 24vw;
  right: -14vw;
  top: 8vh;
}

.inline-ai-hero__depth--two {
  width: 28vw;
  height: 18vw;
  left: 16vw;
  bottom: -8vh;
  transform: translate3d(0, var(--inline-bg-shift-deep), 0) rotate(19deg);
}

.inline-ai-hero__beam {
  position: absolute;
  width: 42vw;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.72), transparent);
  transform: rotate(-28deg);
  opacity: 0.42;
  animation: inlineBeam 8s linear infinite;
}

.inline-ai-hero__beam--one { top: 21%; left: -12%; }
.inline-ai-hero__beam--two { top: 64%; right: -10%; animation-delay: -3s; }

.inline-ai-hero__foreground {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.inline-ai-hero__foreground span {
  position: absolute;
  display: block;
  width: clamp(150px, 16vw, 280px);
  height: clamp(54px, 6vw, 92px);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 22px;
  background: rgba(255,255,255,0.05);
  filter: blur(14px);
  opacity: var(--inline-foreground-opacity);
  transform: translate3d(0, var(--inline-foreground-shift), 0) rotate(-24deg);
}

.inline-ai-hero__foreground span:nth-child(1) { left: -4vw; bottom: 10vh; }
.inline-ai-hero__foreground span:nth-child(2) { right: 7vw; bottom: -4vh; transform: translate3d(0, var(--inline-foreground-shift-fast), 0) rotate(18deg); }
.inline-ai-hero__foreground span:nth-child(3) { left: 46vw; top: 112vh; transform: translate3d(0, var(--inline-foreground-shift-faster), 0) rotate(7deg); }

.inline-ai-hero__media-depth {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.inline-ai-hero__media-depth img {
  position: absolute;
  display: block;
  width: clamp(120px, 13vw, 220px);
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  object-fit: cover;
  opacity: calc(var(--inline-material) * 0.34);
  box-shadow: 0 22px 70px rgba(0,0,0,0.34);
  transform: translate3d(0, var(--inline-bg-shift-soft), 0) rotate(-8deg);
  animation: inlineFloat 7s ease-in-out infinite;
  animation-delay: var(--delay);
}

.inline-ai-hero__media-depth img:nth-child(1) {
  left: max(24px, calc((100vw - 1320px) / 2));
  bottom: 15vh;
}

.inline-ai-hero__media-depth img:nth-child(2) {
  right: 4vw;
  top: 18vh;
  transform: translate3d(0, var(--inline-bg-shift-deep), 0) rotate(9deg);
}

.inline-ai-hero__media-depth img:nth-child(3) {
  width: clamp(92px, 9vw, 150px);
  right: 30vw;
  bottom: 10vh;
  object-fit: contain;
  padding: 14px;
  background: rgba(255,255,255,0.92);
}

.inline-ai-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 600px;
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  background: rgba(7, 10, 18, 0.38);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: calc(1 - var(--inline-portal));
  transform: translate3d(0, var(--inline-portal-y), 0) scale(var(--inline-portal-scale));
  pointer-events: none;
}

.inline-ai-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.inline-ai-hero__tags span {
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  padding: 7px 11px;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.09);
  font: 800 11px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inline-ai-hero h1 {
  margin: 0;
  max-width: 22ch;
  font: 950 clamp(34px, 4.6vw, 68px)/0.98 var(--font-display);
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 3px 30px rgba(0,0,0,0.48);
}

.inline-ai-hero__copy p {
  margin: 26px 0 0;
  max-width: 58ch;
  color: rgba(255,255,255,0.88);
  font: 450 clamp(16px, 1.55vw, 20px)/1.65 var(--font-body);
}

.inline-ai-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.inline-ai-hero__meta span {
  border-left: 2px solid var(--inline-accent);
  padding: 4px 14px 4px 10px;
  color: rgba(255,255,255,0.88);
  font: 800 12px/1.2 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inline-ai-device {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(760px, 92vw);
  height: fit-content;
  z-index: 3;
  min-height: 440px;
  padding: clamp(18px, 2.8vw, 34px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05)),
    rgba(7, 10, 18, 0.88);
  box-shadow: 0 34px 120px rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: var(--inline-material-opacity);
  transform:
    translate3d(var(--inline-device-x), var(--inline-device-y), 0)
    perspective(1100px)
    rotateX(var(--inline-device-rotate-x))
    rotateY(var(--inline-device-rotate-y))
    scale(var(--inline-device-scale));
  transform-origin: center;
  will-change: transform, opacity;
}

.inline-ai-device::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent var(--inline-spot-1),
    rgba(255,255,255,0.28) var(--inline-spot-2),
    transparent var(--inline-spot-3),
    transparent 100%
  );
  mix-blend-mode: screen;
  opacity: var(--inline-spot-opacity);
}

.inline-ai-device__top {
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  align-items: center;
  gap: 8px;
  padding-bottom: 20px;
}

.inline-ai-device-intro {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.inline-ai-device-intro span {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--inline-accent) 65%, transparent);
  background: color-mix(in srgb, var(--inline-accent) 34%, rgba(7,10,18,0.92));
  color: #fff;
  font: 950 14px/1 var(--font-body);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 16px 44px rgba(0,0,0,0.4);
  animation: inlineBadgePulse 2.2s ease-in-out infinite;
}

.inline-ai-device__top span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
}

.inline-ai-device__top span:nth-child(1) { background: #fb7185; }
.inline-ai-device__top span:nth-child(2) { background: #fbbf24; }
.inline-ai-device__top span:nth-child(3) { background: #22c55e; }

.inline-ai-device__top strong {
  margin-left: 10px;
  color: rgba(255,255,255,0.86);
  font: 800 12px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inline-ai-editor {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 18px;
}

.inline-ai-editor__draft,
.inline-ai-editor__assistant {
  min-height: 220px;
  border-radius: 20px;
  padding: 22px;
  border: 1px solid var(--inline-line);
  background: rgba(255,255,255,0.085);
}

.inline-ai-editor__draft {
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.9;
}

.inline-ai-editor__assistant {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(224,118,82,0.24), rgba(255,255,255,0.1) 42%, rgba(34,197,94,0.16)),
    rgba(255,255,255,0.1);
}

.inline-ai-editor__assistant::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 48%, transparent 64%);
  transform: translateX(-120%);
  animation: inlineScan 4.8s ease-in-out infinite;
}

.inline-ai-editor small {
  display: block;
  margin-bottom: 14px;
  color: rgba(255,255,255,0.82);
  font: 900 11px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.inline-ai-editor p {
  position: relative;
  margin: 0;
  color: rgba(255,255,255,0.96);
  font: 650 clamp(18px, 2vw, 26px)/1.32 var(--font-display);
}

.inline-ai-editor__draft p.is-applied {
  animation: inlineApplyFlash 0.7s ease;
}

.inline-ai-editor__pulse {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--inline-green);
  box-shadow: 0 0 0 0 rgba(34,197,94,0.58);
  animation: inlinePulse 1.8s infinite;
}

.inline-ai-editor__explain {
  position: relative;
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px dashed rgba(255,255,255,0.32);
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.88) !important;
  font: 500 13px/1.55 var(--font-body) !important;
  animation: inlineFadeIn 0.25s ease;
}

.inline-ai-editor__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.inline-ai-editor__actions button {
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  padding: 9px 13px;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font: 850 12px/1 var(--font-body);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

.inline-ai-editor__actions button:first-child {
  background: var(--inline-accent);
  border-color: transparent;
}

.inline-ai-editor__actions button:hover:not(:disabled) {
  background: rgba(255,255,255,0.28);
  transform: translateY(-1px);
}

.inline-ai-editor__actions button:first-child:hover:not(:disabled) {
  background: color-mix(in srgb, var(--inline-accent) 85%, #fff);
}

.inline-ai-editor__actions button[aria-pressed="true"] {
  background: rgba(255,255,255,0.34);
  border-color: rgba(255,255,255,0.5);
}

.inline-ai-editor__actions button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.inline-ai-angle-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.inline-ai-angle-rail button {
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.92);
  font: 900 13px/1 var(--font-body);
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.inline-ai-angle-rail button:hover {
  background: rgba(255,255,255,0.18);
  transform: translateY(-2px);
}

.inline-ai-angle-rail button.is-selected {
  background: var(--inline-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 30px rgba(224,118,82,0.35);
}

.inline-ai-callout {
  background: #070a12;
}

.inline-ai-callout h2,
.inline-ai-rules h2,
.inline-ai-outcomes h2 {
  color: #fff;
}

.inline-ai-media-story {
  padding: clamp(76px, 9vw, 132px) max(24px, calc((100vw - 1240px) / 2));
  background: #f5f0e8;
  color: #111827;
}

.inline-ai-media-story__intro {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(280px, 0.9fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(28px, 5vw, 58px);
}

.inline-ai-media-story__intro .eyebrow {
  color: #8b4a34;
}

.inline-ai-media-story__intro h2 {
  grid-column: 1;
  margin: 10px 0 0;
  max-width: 12ch;
  color: #0f172a;
  font: 950 clamp(38px, 6vw, 84px)/0.9 var(--font-display);
  letter-spacing: 0;
}

.inline-ai-media-story__intro p {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  max-width: 54ch;
  color: #4b5563;
  font: 450 clamp(17px, 1.7vw, 22px)/1.65 var(--font-body);
}

.inline-ai-media-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.72fr);
  gap: 18px;
  align-items: stretch;
}

.inline-ai-media-story__video,
.inline-ai-media-story__collage figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid #ded3c2;
  border-radius: 24px;
  background: #fffaf2;
  box-shadow: 0 24px 80px rgba(31, 26, 20, 0.1);
}

.inline-ai-media-story__video {
  min-height: 520px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.inline-ai-media-story__video video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 450px;
  object-fit: cover;
  background: #111827;
}

.inline-ai-media-story__video figcaption {
  padding: 18px 20px;
  color: #5d584f;
  font: 650 15px/1.45 var(--font-body);
}

.inline-ai-media-story__collage {
  display: grid;
  gap: 18px;
}

.inline-ai-media-story__collage figure {
  min-height: 155px;
}

.inline-ai-media-story__collage figure:nth-child(2) {
  min-height: 250px;
}

.inline-ai-media-story__collage img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

.inline-ai-media-story__collage figure:nth-child(3) img {
  object-fit: contain;
  padding: 28px;
  background: #fff;
}

.inline-ai-tool-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(22px, 4vw, 38px);
}

.inline-ai-tool-strip span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  border: 1px solid #ded3c2;
  border-radius: 999px;
  padding: 8px 14px 8px 9px;
  background: rgba(255,255,255,0.72);
  color: #1f2937;
  font: 850 13px/1 var(--font-body);
  box-shadow: 0 12px 30px rgba(31, 26, 20, 0.06);
}

.inline-ai-tool-strip img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 8px;
}

.inline-ai-marquee {
  border-block: 1px solid rgba(255,255,255,0.12);
  background: #111827;
  overflow: hidden;
}

.inline-ai-marquee div {
  display: flex;
  width: max-content;
  gap: 44px;
  padding: 22px 0;
  animation: inlineMarquee 18s linear infinite;
}

.inline-ai-marquee span {
  color: rgba(255,255,255,0.82);
  -webkit-text-stroke: 0;
  font: 950 clamp(42px, 7vw, 92px)/0.9 var(--font-display);
  letter-spacing: 0;
}

.inline-ai-split,
.inline-ai-rules,
.inline-ai-flow,
.inline-ai-integrations,
.inline-ai-outcomes,
.inline-ai-callout {
  padding: clamp(70px, 9vw, 130px) max(24px, calc((100vw - 1240px) / 2));
}

.inline-ai-split {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 86px);
  align-items: start;
  background: #f7f2ea;
  color: var(--ink-900);
}

.inline-ai-split__sticky {
  position: sticky;
  top: 120px;
}

.inline-ai-split h2,
.inline-ai-section-head h2,
.inline-ai-flow__text h2 {
  margin: 12px 0 0;
  max-width: 12ch;
  font: 950 clamp(38px, 5vw, 72px)/0.94 var(--font-display);
  letter-spacing: 0;
}

.inline-ai-split__body p {
  margin: 0;
  max-width: 64ch;
  color: #5f5a52;
  font: 450 clamp(17px, 1.7vw, 22px)/1.72 var(--font-body);
}

.inline-ai-split blockquote {
  margin: clamp(30px, 4vw, 52px) 0 0;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid #e0d6c6;
  border-left: 4px solid var(--inline-accent);
  border-radius: 18px;
  background: #fffaf2;
  color: #111;
  font: 900 clamp(24px, 3vw, 42px)/1.12 var(--font-display);
}

.inline-ai-rules {
  background: #070a12;
}

.inline-ai-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(280px, 0.9fr);
  gap: 32px;
  align-items: end;
  margin-bottom: clamp(30px, 5vw, 58px);
}

.inline-ai-section-head .eyebrow {
  grid-column: 1;
}

.inline-ai-section-head h2 {
  grid-column: 1;
}

.inline-ai-section-head p {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  color: var(--inline-muted);
  font: 450 17px/1.68 var(--font-body);
}

.inline-ai-rule-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.inline-ai-rule {
  position: relative;
  min-height: 260px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035));
  overflow: hidden;
}

.inline-ai-rule::after {
  content: "";
  position: absolute;
  inset: auto 20px 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--inline-accent), transparent);
  transform-origin: left;
  animation: inlineRuleLine 4.2s ease-in-out infinite;
}

.inline-ai-rule span {
  color: var(--inline-accent);
  font: 950 13px/1 var(--font-body);
  letter-spacing: 0.12em;
}

.inline-ai-rule h3 {
  margin: 28px 0 12px;
  color: #fff;
  font: 900 24px/1.05 var(--font-display);
}

.inline-ai-rule p {
  margin: 0;
  color: var(--inline-muted);
  font: 450 14px/1.55 var(--font-body);
}

.inline-ai-flow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.6fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: clamp(28px, 5vw, 70px);
  align-items: start;
  background: #f5f0e8;
  color: #0f172a;
}

.inline-ai-flow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(15,23,42,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.8;
}

.inline-ai-flow__media,
.inline-ai-flow__text,
.inline-ai-flow__stage {
  position: relative;
  z-index: 1;
}

.inline-ai-flow__media {
  grid-column: 1;
  grid-row: 1 / 3;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
  height: 100%;
}

.inline-ai-flow__media img {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #ded3c2;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(31, 26, 20, 0.1);
  object-fit: cover;
}

.inline-ai-flow__text {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.inline-ai-flow__text .eyebrow {
  color: #9a553d;
}

.inline-ai-flow__text p {
  max-width: 46ch;
  color: #4b5563;
  font: 450 17px/1.68 var(--font-body);
}

.inline-ai-flow__text h2 {
  color: #0f172a;
  text-shadow: none;
}

.inline-ai-flow__stage {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  display: grid;
  align-content: start;
  gap: 18px;
}

.inline-ai-flow__thread {
  position: absolute;
  top: 52px;
  bottom: 52px;
  left: 36px;
  width: 2px;
  background: linear-gradient(var(--inline-accent), #1f8f4b);
  transform-origin: top;
  animation: inlineThread 4.6s ease-in-out infinite;
}

.inline-ai-flow__card {
  position: relative;
  z-index: 1;
  margin-left: var(--offset);
  padding: 24px 24px 24px 86px;
  border: 1px solid #d7cbbb;
  border-radius: 22px;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 20px 60px rgba(31, 26, 20, 0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.inline-ai-flow__card span {
  position: absolute;
  left: 22px;
  top: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--inline-accent);
  color: #fff;
  font: 950 12px/1 var(--font-body);
}

.inline-ai-flow__card h3,
.inline-ai-integration-map h3 {
  margin: 0 0 8px;
  color: #0f172a;
  font: 900 24px/1.1 var(--font-display);
}

.inline-ai-flow__card p,
.inline-ai-integration-map p {
  margin: 0;
  color: #4b5563;
  font: 450 14px/1.6 var(--font-body);
}

.inline-ai-integrations {
  background: #f8fafc;
  color: #0f172a;
}

.inline-ai-integrations .inline-ai-section-head p {
  color: #5f6674;
}

.inline-ai-integration-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.inline-ai-integration-map article {
  position: relative;
  min-height: 250px;
  padding: 24px;
  border: 1px solid #dbe3ef;
  border-radius: 22px;
  background: #fff;
  overflow: hidden;
}

.inline-ai-integration-map article::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px);
  background-size: 22px 22px;
}

.inline-ai-integration-map small,
.inline-ai-integration-map h3,
.inline-ai-integration-map p {
  position: relative;
}

.inline-ai-integration-map small {
  color: var(--inline-accent);
  font: 950 12px/1 var(--font-body);
  letter-spacing: 0.12em;
}

.inline-ai-integration-map h3 {
  margin-top: 72px;
  color: #0f172a;
}

.inline-ai-integration-map p {
  color: #5f6674;
}

.inline-ai-outcomes {
  background: #070a12;
}

.inline-ai-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.inline-ai-outcomes__grid article {
  min-height: 190px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  background: rgba(255,255,255,0.07);
}

.inline-ai-outcomes__grid strong {
  display: block;
  color: var(--inline-accent);
  font: 950 clamp(30px, 4vw, 54px)/0.9 var(--font-display);
}

.inline-ai-outcomes__grid span {
  display: block;
  margin-top: 14px;
  color: var(--inline-muted);
  font: 650 14px/1.45 var(--font-body);
}

@keyframes inlineBeam {
  0% { transform: translateX(-24vw) rotate(-28deg); opacity: 0; }
  18%, 72% { opacity: 0.44; }
  100% { transform: translateX(90vw) rotate(-28deg); opacity: 0; }
}

@keyframes inlineScan {
  0%, 30% { transform: translateX(-120%); }
  62%, 100% { transform: translateX(120%); }
}

@keyframes inlinePulse {
  70% { box-shadow: 0 0 0 14px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

@keyframes inlineFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes inlineMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes inlineRuleLine {
  0%, 100% { transform: scaleX(0.18); opacity: 0.45; }
  48% { transform: scaleX(1); opacity: 1; }
}

@keyframes inlineThread {
  0%, 100% { transform: scaleY(0.16); opacity: 0.42; }
  45%, 70% { transform: scaleY(1); opacity: 1; }
}

@keyframes inlineFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes inlineApplyFlash {
  0% { color: var(--inline-green); }
  100% { color: rgba(255,255,255,0.96); }
}

@keyframes inlineBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--inline-accent) 45%, transparent); }
  50% { box-shadow: 0 0 0 7px transparent; }
}

@media (max-width: 1080px) {
  .inline-ai-hero,
  .inline-ai-split,
  .inline-ai-flow,
  .inline-ai-section-head,
  .inline-ai-media-story__intro,
  .inline-ai-media-story__grid {
    grid-template-columns: 1fr;
  }

  .inline-ai-hero {
    min-height: 0;
  }

  .inline-ai-device {
    min-height: 0;
  }

  .inline-ai-split__sticky {
    position: static;
  }

  .inline-ai-rule-grid,
  .inline-ai-outcomes__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inline-ai-integration-map {
    grid-template-columns: 1fr;
  }

  .inline-ai-media-story__intro h2,
  .inline-ai-media-story__intro p {
    grid-column: auto;
    grid-row: auto;
  }

  .inline-ai-media-story__video {
    min-height: 420px;
  }

  .inline-ai-media-story__video video {
    min-height: 340px;
  }
}

@media (max-width: 720px) {
  .inline-ai-hero,
  .inline-ai-split,
  .inline-ai-media-story,
  .inline-ai-rules,
  .inline-ai-flow,
  .inline-ai-integrations,
  .inline-ai-outcomes,
  .inline-ai-callout {
    padding-inline: 18px;
  }

  .inline-ai-hero h1 {
    font-size: clamp(42px, 16vw, 68px);
  }

  .inline-ai-editor,
  .inline-ai-rule-grid,
  .inline-ai-outcomes__grid {
    grid-template-columns: 1fr;
  }

  .inline-ai-editor__draft,
  .inline-ai-editor__assistant {
    min-height: 220px;
  }

  .inline-ai-angle-rail {
    grid-template-columns: 1fr;
  }

  .inline-ai-hero__media-depth {
    display: none;
  }

  .inline-ai-media-story__video {
    min-height: 0;
  }

  .inline-ai-media-story__video video {
    min-height: 240px;
  }

  .inline-ai-flow__card {
    margin-left: 0;
    padding-left: 78px;
  }

  .inline-ai-flow__thread {
    left: 32px;
  }
}

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