/* Common section contract loaded after case-specific artwork. Full-width
   sections require no 100vw/negative-margin escape from a parent container. */
.case-page { padding: 0; margin: 0; max-width: none; }
.case-page .case { padding: 0; margin: 0; }
.case-page .case-section { position: relative; left: auto; right: auto; width: 100%; margin: 0; padding: 0; }
.case-page .case-section__content,
.case-page .banner-outer,
.case-page .case-context {
  width: 100%; max-width: var(--layout-max-width); margin-inline: auto;
  padding: var(--spacing-section) var(--spacing-inline);
}
.case-page .banner-inner { padding: 0; }
.case-page .case-context { display: flex; gap: var(--spacing-grid); }
.case-page :is(.plan-inner-column, .solution-inner-column, .two-layer-fill, .context-fill, .rule-fill) {
  left: 0; right: 0; width: 100%; margin-inline: 0;
}
.case-page :is(.plan-inner, .process-inner, .solution-inner, .prototype-inner, .results-inner) { width: 100%; }
.case-page :is(.plan-row, .process-row, .solution-row, .context-row, .rule-row) { gap: var(--spacing-grid); }
.case-page :is(.case-context-left, .case-context-right, .context-left, .rule-right, .process-right, .solution-left) { min-width: 0; flex: 1 1 0; max-width: 100%; }
.case-page .rule-text { width: 100%; }
.case-page .results-container, .case-page .prototype-container { padding: 0; }
.case-page .prototype-container iframe { width: 100%; max-width: 100%; }
.case-page .results-pill { white-space: normal; }
.case-page .mp-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-grid); }
.case-page .mp-banner::before { inset: 0; width: 100%; height: auto; margin: 0; }
@media (max-width: 1000px) {
  .case-page .mp-inner { grid-template-columns: minmax(0, 1fr); }
  .case-page .case-context { flex-direction: column; }
  .case-page .mp-banner::before { display: block; }
  .case-page .mp-left .mp-title { font-size: clamp(28px, 6vw, 48px); }
  .case-page .mp-left .mp-pill .pill-text { font-size: 24px; }
}
@media (max-width: 700px) {
  .case-page .case-pill-text { font-size: 22px; }
  .case-page .context-head, .case-page .rule-head { display: flex; flex-wrap: wrap; gap: var(--space-8); height: auto; margin-bottom: var(--spacing-elements); }
  .case-page :is(.context-pill, .context-de, .rule-pill-left, .rule-pill-right, .rule-de) { position: static; transform: none; font-size: 24px; }
  .case-page :is(.context-pill-text, .context-pill-text-dark) { font-size: 24px; }
}
/* Reserve space for decorative layers; absolute images cannot size a section. */
.case-page .case-context-left { position: relative; aspect-ratio: 488 / 400; flex: 1 1 0; }
.case-page .case-context-shape { position: absolute; inset: 0 auto auto 0; width: 86%; height: 85%; }
.case-page .case-context-image { position: absolute; inset: 10% 0 auto auto; width: 93%; max-width: 100%; height: auto; }
.case-page .banner--yampi .case-pill { white-space: normal; }
.case-page .plan-track { height: auto; }
.case-page .plan-steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-16); }
.case-page .plan-step { min-width: 0; }
.case-page .plan-step .step-title { font-size: 16px; overflow-wrap: anywhere; }
@media (max-width: 1000px) {
  .case-page .case-context-left { flex: auto; }
}
@media (max-width: 700px) {
  .case-page .banner--yampi .hero-line { font-size: 36px; }
  .case-page .banner--yampi .case-pill-text { font-size: 22px; }
  .case-page .plan-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .case-page .plan-step { flex-direction: row; text-align: left; align-items: center; gap: var(--space-16); }
  .case-page .plan-step .step-title { text-align: left; }
  .case-page .plan-step .dot { flex-shrink: 0; }
  .case-page .plan-track .track-line { top: 0; bottom: 0; left: 6px; width: 4px; height: auto; }
  .case-page .plan-subtitle-wrapper { padding-left: var(--space-24); }
}

/* Yampi frames supplied from Figma. Background/artwork remains page-specific. */
.case-page--yampi {
  --yampi-frame-width: 1440px;
  --yampi-section-padding: var(--Padding-150px, 150px);
  --yampi-section-gap: var(--Padding-100px, 100px);
}
.case-page--yampi .case-context,
.case-page--yampi :is(.plan-content, .process-content, .solution-content, .results-content) {
  display: flex;
  width: 100%;
  max-width: var(--yampi-frame-width);
  margin-inline: auto;
  padding: var(--yampi-section-padding);
  gap: var(--yampi-section-gap);
}
.case-page--yampi .case-context,
.case-page--yampi :is(.process-content, .solution-content) {
  flex-direction: row;
  align-items: center;
}
.case-page--yampi .plan-content { flex-direction: column; align-items: flex-start; }
.case-page--yampi .results-content {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--Padding-0px, 0px);
}
.case-page--yampi :is(.process-left, .process-right, .solution-left, .solution-right) {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 1000px) {
  .case-page--yampi {
    --yampi-section-padding: var(--spacing-section) var(--spacing-inline);
    --yampi-section-gap: var(--spacing-grid);
  }
  .case-page--yampi .case-context,
  .case-page--yampi :is(.process-content, .solution-content) { flex-direction: column; align-items: stretch; }
  .case-page--yampi :is(.process-left, .process-right, .solution-left, .solution-right) { flex: auto; width: 100%; }
}

/* Figma illustrations have fixed desktop dimensions, never equal-width columns. */
.case-page--yampi .process-right {
  flex: none;
  width: 523px;
  max-width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 523 / 373;
}
.case-page--yampi .solution-left {
  flex: none;
  width: 372px;
  max-width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
}
.case-page--yampi .process-right img {
  display: block;
  width: 523px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 523 / 373;
  object-fit: contain;
}
.case-page--yampi .solution-left img {
  display: block;
  width: 372px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
@media (max-width: 1200px) {
  .case-page--yampi :is(.process-content, .solution-content) {
    flex-direction: column;
    align-items: stretch;
  }
  .case-page--yampi :is(.process-left, .solution-right) { flex: auto; width: 100%; }
}

/* Results card: Figma padding and internal rhythm, independent of section padding. */
.case-page--yampi .results-card {
  display: flex;
  padding: var(--Padding-75px, 75px);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--Padding-32px, 32px);
  align-self: stretch;
}
.case-page--yampi .results-grid {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--Padding-100px, 100px);
  align-self: stretch;
  margin: 0;
}
.case-page--yampi .results-item { min-width: 0; }
@media (max-width: 1200px) {
  .case-page--yampi .results-grid { flex-direction: column; gap: var(--spacing-grid); }
  .case-page--yampi .results-item { align-self: stretch; }
}
@media (max-width: 900px) {
  .case-page--yampi .results-card { padding: var(--space-32); }
}