/* Rich content — the long-form body, optionally beside an image. */

/* Constrain the measure of the text, not the container — otherwise the block
   centres itself and the section's left edge no longer lines up with every
   other section on the page. */
.rich--single{max-width:var(--max)}
.rich--single .rich__text{max-width:78ch}
/* The photo is a framed panel of its own height, top-aligned with the text —
   the same treatment as the Why Us photo and the Image + Text rows, so a page
   using all three reads as one system.

   This previously centred a natural-height image against a tall column of
   copy, which left dead space above and below the photo and made the two
   halves look like unrelated things sitting near each other. */
.rich--split{display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(32px,4vw,64px);align-items:stretch;max-width:var(--max)}
.rich--image-left .rich__text{order:2}
.rich--image-left .rich__media{order:1}

.rich__text h2{margin-top:14px}
.rich__body{margin-top:20px;font-size:17px}
.rich__body > *:last-child{margin-bottom:0}
.rich__body h3{font-size:24px;margin:34px 0 12px}
.rich__body h4{font-family:var(--display);font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin:28px 0 10px}
.rich__body p{margin-bottom:1.1em}
.rich__body ul,.rich__body ol{margin:0 0 1.2em 1.3em}
.rich__body ul{list-style:disc}
.rich__body ol{list-style:decimal}
.rich__body li{margin-bottom:.5em;padding-left:.2em}
.rich__body a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.rich__body a:hover{color:var(--red-dark)}
.rich__body strong{font-weight:600}
.rich__body blockquote{border-left:4px solid var(--red);padding-left:22px;margin:26px 0;font-size:18px}
.rich__body table{width:100%;border-collapse:collapse;margin:24px 0}
.rich__body th,.rich__body td{border:1px solid var(--line);padding:11px 14px;text-align:left;font-size:15px}
.rich__body th{background:var(--paper);font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-weight:600}

/* Stretch, not a fixed height. Capping it meant that on a section with a lot
   of copy — which is most of them — the photo stopped hundreds of pixels short
   of the text and left the block looking unfinished. Matching the column
   height is what makes the two halves read as one thing. */
.rich__media{position:relative;overflow:hidden;min-height:360px;
  background:linear-gradient(160deg,#2B2F37,#1A1D23)}
.rich__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-height:none}
.rich__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

.section--bg-navy .rich__body a,
.section--bg-asphalt .rich__body a{color:var(--sand)}
.section--bg-navy .rich__body th,
.section--bg-asphalt .rich__body th{background:rgba(255,255,255,.06)}
.section--bg-navy .rich__body th,.section--bg-navy .rich__body td,
.section--bg-asphalt .rich__body th,.section--bg-asphalt .rich__body td{border-color:rgba(255,255,255,.16)}

@media(max-width:1020px){
  .rich--split{grid-template-columns:1fr;gap:32px}
  .rich--image-left .rich__text,.rich--image-left .rich__media{order:initial}
  .rich__media{height:clamp(260px,52vw,380px)}
}