.real-case-collection {
  position: relative;
  overflow: hidden;
  padding: 112px 0;
}

.real-case-collection::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(24, 69, 90, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 69, 90, .07) 1px, transparent 1px);
  background-size: 72px 72px;
  content: "";
  pointer-events: none;
}

.real-case-collection > .page-width { position: relative; }
.real-case-heading { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 72px; align-items: end; margin-bottom: 46px; }
.real-case-heading h2 { max-width: 780px; margin: 15px 0 0; font-size: clamp(46px, 5.4vw, 78px); line-height: .98; }
.real-case-heading > p { margin: 0 0 5px; color: #526d80; font-size: 16px; line-height: 1.9; }
.real-case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.real-case-card { display: grid; min-height: 440px; overflow: hidden; border: 1px solid rgba(23, 72, 96, .22); color: #15334d; background: rgba(249, 252, 252, .88); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.real-case-card-featured { grid-column: span 2; grid-template-columns: minmax(0, 1.22fr) minmax(360px, .78fr); }
.real-case-card:hover, .real-case-card:focus-visible { transform: translateY(-4px); border-color: #078b98; box-shadow: 0 22px 58px rgba(12, 47, 67, .16); outline: none; }
.real-case-media { position: relative; min-height: 270px; overflow: hidden; background: #071b2f; }
.real-case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.real-case-card:hover .real-case-media img { transform: scale(1.025); }
.real-case-media > span { position: absolute; left: 20px; bottom: 20px; padding: 8px 10px; color: #dffbff; background: rgba(4, 22, 37, .82); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.real-case-body { display: flex; flex-direction: column; padding: 28px; }
.real-case-meta { display: flex; justify-content: space-between; gap: 12px; color: #087f92; font-size: 11px; font-weight: 800; }
.real-case-meta span:last-child { color: #718696; font-weight: 500; }
.real-case-body h3 { margin: 22px 0 12px; font-size: clamp(27px, 2.8vw, 42px); line-height: 1.12; }
.real-case-body p { margin: 0; color: #526d80; font-size: 15px; line-height: 1.85; }
.real-case-services { display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0; }
.real-case-services span { padding: 7px 9px; border: 1px solid rgba(7, 127, 146, .25); color: #126276; font-size: 11px; }
.real-case-body > b { margin-top: auto; color: #087f92; font-size: 13px; }
.real-case-body > b i { margin-left: 5px; font-style: normal; }

.case-study-page { overflow: hidden; background: #eaf1f3; }
.case-study-hero { position: relative; min-height: 780px; color: #f6fbff; background: #06162a; }
.case-study-hero-backdrop, .case-study-hero-shade { position: absolute; inset: 0; }
.case-study-hero-backdrop img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.case-study-hero-shade { background: linear-gradient(90deg, rgba(3, 16, 32, .96) 0%, rgba(4, 23, 43, .82) 48%, rgba(4, 23, 43, .4) 100%), linear-gradient(0deg, rgba(4, 20, 37, .64), transparent 55%); }
.case-study-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 100px; align-items: end; min-height: 780px; padding-top: 160px; padding-bottom: 96px; }
.case-study-hero-grid > div > p:not(.section-kicker) { max-width: 720px; margin: 26px 0 32px; color: rgba(235, 246, 251, .77); font-size: 18px; line-height: 1.85; }
.case-study-hero h1 { max-width: 900px; margin: 20px 0 0; font-size: clamp(58px, 7.4vw, 112px); line-height: .94; }
.case-study-hero aside { display: grid; gap: 12px; padding: 24px; border: 1px solid rgba(132, 223, 232, .3); background: rgba(3, 20, 36, .66); backdrop-filter: blur(14px); }
.case-study-hero aside > span { color: #74e4e7; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.case-study-hero aside > strong { font-size: 25px; }
.case-study-hero aside > small { color: rgba(235, 246, 251, .62); }
.case-study-hero aside > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.case-study-hero aside b { padding: 6px 8px; border: 1px solid rgba(132, 223, 232, .24); color: #dffbff; font-size: 10px; }
.case-study-context, .case-study-challenge, .case-study-scope, .case-study-delivery, .case-study-evidence, .case-study-reading, .case-study-related { padding: 108px 0; }
.case-study-context-grid { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(0, 1.25fr); gap: 110px; }
.case-study-context h2, .case-study-evidence h2, .case-study-related h2 { margin: 16px 0 0; font-size: clamp(38px, 4.5vw, 64px); line-height: 1.05; }
.case-study-context-grid > div:last-child > p { margin: 0; color: #425f73; font-size: 19px; line-height: 2; }
.case-study-conditions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 34px; }
.case-study-conditions > span { width: 100%; margin-bottom: 4px; color: #087f92; font-size: 11px; font-weight: 800; }
.case-study-conditions b { padding: 9px 11px; border: 1px solid rgba(15, 79, 104, .2); font-size: 12px; }
.case-study-card-grid, .case-study-scope-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(19, 71, 92, .22); border-left: 1px solid rgba(19, 71, 92, .22); }
.case-study-card-grid article, .case-study-scope-grid article { min-height: 270px; padding: 30px; border-right: 1px solid rgba(19, 71, 92, .22); border-bottom: 1px solid rgba(19, 71, 92, .22); }
.case-study-card-grid article > span, .case-study-scope-grid article > span, .case-study-delivery article > span { color: #08a5af; font-size: 11px; font-weight: 800; }
.case-study-card-grid h3, .case-study-scope-grid h3, .case-study-delivery h3 { margin: 48px 0 12px; font-size: 25px; line-height: 1.2; }
.case-study-card-grid p, .case-study-scope-grid p, .case-study-delivery p { margin: 0; color: #526d80; line-height: 1.8; }
.case-study-scope-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); border-color: rgba(113, 226, 225, .25); }
.case-study-scope-grid article { min-height: 310px; border-color: rgba(113, 226, 225, .25); }
.case-study-scope-grid h3 { color: #f5fbff; }
.case-study-scope-grid p { color: rgba(232, 245, 249, .65); }
.case-study-delivery-grid { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr); gap: 105px; }
.case-study-delivery h2 { margin: 18px 0 0; font-size: clamp(48px, 5vw, 72px); line-height: .98; }
.case-study-usage { display: grid; gap: 9px; margin-top: 38px; }
.case-study-usage span { margin-bottom: 4px; color: #087f92; font-size: 11px; font-weight: 800; }
.case-study-usage b { color: #36576c; font-size: 13px; }
.case-study-delivery-grid > div:last-child { border-top: 1px solid rgba(19, 71, 92, .22); }
.case-study-delivery article { display: grid; grid-template-columns: 50px 1fr; padding: 26px 0; border-bottom: 1px solid rgba(19, 71, 92, .22); }
.case-study-delivery h3 { margin: 0 0 8px; }
.case-study-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 38px; }
.case-study-media-grid figure { margin: 0; overflow: hidden; border: 1px solid rgba(19, 71, 92, .22); background: rgba(255, 255, 255, .58); }
.case-study-media-grid figure:only-child { grid-column: 1 / -1; }
.case-study-media-grid img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.case-study-media-grid figcaption { display: flex; justify-content: space-between; gap: 22px; padding: 18px 20px; }
.case-study-media-grid figcaption strong { color: #173850; }
.case-study-media-grid figcaption span { color: #6c8190; font-size: 12px; }
.case-study-related > .page-width { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1fr) auto; gap: 64px; align-items: center; }
.case-study-related > .page-width > div:nth-child(2) { display: grid; border-top: 1px solid rgba(117, 224, 226, .24); }
.case-study-related > .page-width > div:nth-child(2) a { display: flex; justify-content: space-between; padding: 16px 2px; border-bottom: 1px solid rgba(117, 224, 226, .24); color: #e7f8fa; }
.case-study-related > .page-width > div:nth-child(2) a span { color: #70dfe2; }

@media (max-width: 1500px) {
  .case-study-hero-grid { gap: 56px; }
  .case-study-hero h1 { font-size: 88px; }
}

@media (max-width: 960px) {
  .real-case-heading, .case-study-context-grid, .case-study-delivery-grid { grid-template-columns: 1fr; gap: 34px; }
  .real-case-card-featured { grid-template-columns: 1fr; }
  .case-study-hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .case-study-hero aside { max-width: 420px; }
  .case-study-scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-study-related > .page-width { grid-template-columns: 1fr; gap: 32px; }
  .case-study-related .button { justify-self: start; }
}

@media (max-width: 680px) {
  .real-case-collection, .case-study-context, .case-study-challenge, .case-study-scope, .case-study-delivery, .case-study-evidence, .case-study-reading, .case-study-related { padding: 72px 0; }
  .real-case-heading h2 { font-size: 43px; }
  .real-case-grid { grid-template-columns: 1fr; }
  .real-case-card-featured { grid-column: auto; }
  .real-case-card { min-height: 0; }
  .real-case-media { min-height: 220px; }
  .real-case-body { padding: 22px; }
  .real-case-meta { flex-direction: column; gap: 5px; }
  .case-study-hero, .case-study-hero-grid { min-height: 720px; }
  .case-study-hero-grid { padding-top: 120px; padding-bottom: 64px; }
  .case-study-hero h1 { font-size: 38px; }
  .case-study-hero-grid > div > p:not(.section-kicker) { font-size: 16px; }
  .case-study-card-grid, .case-study-scope-grid { grid-template-columns: 1fr; }
  .case-study-card-grid article, .case-study-scope-grid article { min-height: 0; padding: 24px; }
  .case-study-card-grid h3, .case-study-scope-grid h3 { margin-top: 28px; }
  .case-study-media-grid { grid-template-columns: 1fr; }
  .case-study-media-grid img { aspect-ratio: 4 / 3; }
  .case-study-media-grid figcaption { flex-direction: column; gap: 6px; }
}