/* Services page: who we serve (image + list) and the risk board's closing line. Components come from system.css. */
.serve { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(56px, 7vw, 120px); align-items: center; }
.serve-media { position: relative; margin: 0; aspect-ratio: 4 / 4.6; overflow: hidden; background: #6b7f86; isolation: isolate; }
.serve-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 47% 60%; }
.serve-media::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgb(9 28 43 / .7)); }
.serve-media .image-caption { left: 36px; bottom: 38px; z-index: 1; font-size: 14px; line-height: 1.9; }
.serve-media .image-caption .short-rule { color: #dbe3e7; margin-top: 22px; }
.serve-copy h2 { font-size: clamp(42px, 4.2vw, 66px); line-height: 1.08; margin-bottom: 30px; }
.serve-intro { font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--ink); margin-bottom: 14px; }
.risk-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px 60px; margin-top: 54px; padding-top: 40px; border-top: 1px solid rgb(255 255 255 / .16); }
.risk-cta .serif-lead { color: #fff; margin: 0; max-width: 720px; }
.risk-cta .button { flex: none; }
#problems { padding-top: clamp(40px, 5vw, 72px); }
@media (max-width: 1100px) {
  .serve { grid-template-columns: 1fr; }
  .serve-media { min-height: 0; aspect-ratio: 4 / 3; }
  .risk-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 740px) {
  .serve-copy h2 { font-size: clamp(36px, 9.6vw, 46px); }
  .serve-media { margin: 0 calc(var(--gutter) * -1); aspect-ratio: 1 / .9; }
  .serve-media .image-caption { left: var(--gutter); bottom: 26px; font-size: 12px; }
  .risk-cta { margin-top: 40px; padding-top: 30px; }
}