/* Shared introduction for the Agent and Opera case studies. */
.case-header { line-height: normal; }
.case-header .header-note { display: flex; color: var(--green); font: 700 10px/1.6 var(--mono); }
.case-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(220px, .45fr); gap: 75px; padding-top: 89px; padding-bottom: 82px; font-size: 15px; line-height: normal; }
.case-hero.section-wrap, .opera-hero.section-wrap { width: min(1160px, calc(100% - 96px)); }
.case-hero-main { min-width: 0; }
.case-hero .eyebrow { margin-bottom: 39px; font: 10px/1.6 var(--mono); }
.case-context { margin-bottom: 13px; color: var(--green); font-size: 15px; font-weight: 700; }
.case-hero h1 { margin-bottom: 28px; font-size: 48px; font-weight: 700; line-height: 1.35; }
.case-hero h1 em { color: var(--coral); font: italic 400 1em var(--serif); white-space: nowrap; }
.case-lead { max-width: 690px; margin-bottom: 24px; color: #5b5e55; font-size: 14px; line-height: 2; }
.case-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.case-chips span { padding: 7px 10px; border: 1px solid var(--line); color: #555c4f; font-size: 12px; }
.case-hero-side { align-self: stretch; display: flex; flex-direction: column; margin: 0; padding: 5px 0 0 28px; border-left: 1px solid var(--line); }
.case-hero-side > div { display: flex; flex-direction: column; gap: 5px; flex: 1; padding: 18px 0; border-bottom: 1px solid var(--line); }
.case-hero-side strong { color: var(--coral); font: 600 25px var(--sans); }
.case-hero-side span { color: var(--muted); font-size: 13px; line-height: 1.6; }
.case-hero-side-product strong { font-size: 20px; line-height: 1.5; }
.case-intro-actions { display: flex; flex-wrap: wrap; gap: 25px; margin-top: 24px; }
.case-intro-actions a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--line); color: var(--green); font-size: 14px; }
.case-intro-actions a:hover { border-color: var(--coral); color: var(--coral); }
.case-return-link { font-size: 14px; }
.opera-hero { padding-top: 0; }
.opera-hero .hero-prototype { margin-top: 0; }
@media (max-width: 950px) {
  .case-hero { gap: 35px; padding-block: 60px; }
  .case-hero.section-wrap, .opera-hero.section-wrap { width: min(760px, calc(100% - 56px)); }
  .case-hero h1 { font-size: 38px; }
}
@media (max-width: 680px) {
  .case-header .header-note { font-size: 11px; }
  .case-hero { display: block; padding-top: 47px; padding-bottom: 45px; }
  .case-hero.section-wrap, .opera-hero.section-wrap { width: calc(100% - 36px); }
  .case-hero .eyebrow { margin-bottom: 24px; }
  .case-context { font-size: 13px; line-height: 1.7; }
  .case-hero h1 { margin-bottom: 17px; font-size: clamp(24px, 7vw, 32px); }
  .case-lead { font-size: 15px; }
  .case-hero-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 16px; margin-top: 31px; padding: 0; border: 0; }
  .case-hero-side > div { min-width: 0; padding: 14px 6px 0 0; border-top: 1px solid var(--line); border-bottom: 0; }
  .case-hero-side strong { font-size: 20px; }
  .case-hero-side span { font-size: 12px; }
  .case-hero-side-product { grid-template-columns: 1fr; }
  .case-hero-side-product span { font-size: 13px; }
}