.brokkr-opening { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; padding-bottom: 72px; }
.case-copy .brokkr-result { display: flex; align-items: center; gap: 24px; margin-top: 28px; color: var(--ink); font-size: 16px; line-height: 1.55; }
.brokkr-result strong { flex-shrink: 0; font-size: 46px; font-weight: 500; line-height: 1.15; letter-spacing: -.045em; }
.brokkr-research { gap: 64px; }
.brokkr-research .case-role { justify-self: end; }
.brokkr-dashboard { max-width: 980px; margin-inline: auto; padding-bottom: 80px; }
.brokkr-dashboard .screen-intro { max-width: 740px; margin-bottom: 28px; }
.brokkr-mobile { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); gap: 64px; align-items: start; padding-bottom: 72px; }
.brokkr-mobile > .case-copy { padding-top: 8px; }
.brokkr-mobile-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

@media (max-width: 1000px) {
  .brokkr-opening, .brokkr-research, .brokkr-mobile { gap: 40px; }
  .brokkr-mobile { grid-template-columns: 1fr; }
  .brokkr-mobile > .case-copy { max-width: 660px; padding-top: 0; }
  .brokkr-mobile-screens { max-width: 640px; }
}
@media (max-width: 360px) {
  .case-hero h1 { font-size: 23px; }
}
@media (max-width: 700px) {
  .brokkr-opening { grid-template-columns: 1fr; gap: 28px; padding-bottom: 52px; }
  .case-copy .brokkr-result { gap: 18px; margin-top: 24px; font-size: 15px; }
  .brokkr-result strong { font-size: 38px; }
  .brokkr-research { gap: 34px; }
  .brokkr-research .case-role { justify-self: start; }
  .brokkr-dashboard { padding-bottom: 52px; }
  .brokkr-dashboard .screen-intro { margin-bottom: 24px; }
  .brokkr-mobile { gap: 26px; padding-bottom: 52px; }
  .brokkr-mobile-screens { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; gap: 28px; }
}