/* Related model cards (model pages and news articles), SEO review 28 Sep 2026. Mirrors the Our Range tiles. */
.related-models{padding-block:24px 96px}
.related-models .section-heading{margin-bottom:40px}
.related-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.related-tile{display:block;position:relative;overflow:hidden;text-decoration:none;background:var(--original-navy,#073453);color:#fff}
.related-tile:focus-visible{outline:3px solid #397a8a;outline-offset:3px}
.related-tile img{width:100%;aspect-ratio:1.65;object-fit:cover;display:block;transition:transform .35s;filter:brightness(1.08) saturate(1.03)}
.related-tile:hover img{transform:scale(1.025)}
.related-tile-label{position:absolute;inset:auto 0 0;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:56px 24px 22px;background:linear-gradient(transparent,rgba(3,25,38,.82))}
.related-tile-type{display:block;font-size:.875rem;line-height:1.4;margin-bottom:6px;color:#e6eef3}
.related-tile-name{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(1.35rem,1.8vw,1.85rem);text-transform:uppercase;letter-spacing:.025em;line-height:1.15;color:#fff}
.related-tile-arrow{font-size:1.5rem;flex:none}
@media(max-width:1023px){
  .related-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .related-tiles li:nth-child(3){display:none}
  .related-tile-label{padding:44px 20px 20px}
}
@media(max-width:600px){
  .related-models{padding-block:16px 56px}
  .related-tiles{grid-template-columns:minmax(0,1fr);gap:16px}
  .related-tiles li:nth-child(3){display:block}
  .related-tile img{aspect-ratio:1.6}
}
/* Buyer's guides: tiles fill the available width (Mark, 28 Sep 2026). */
.related-models--fill .related-tiles{gap:24px}
.related-models--fill .related-tile img{aspect-ratio:1.3}
.related-models--fill[data-count="1"] .related-tiles{grid-template-columns:minmax(0,1fr)}
.related-models--fill[data-count="1"] .related-tile img{aspect-ratio:2.4}
.related-models--fill[data-count="2"] .related-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.related-models--fill[data-count="2"] .related-tile img{aspect-ratio:1.5}
.related-models--fill .related-tile-name{font-size:clamp(1.5rem,2.2vw,2.25rem)}
@media(max-width:1023px){
  .related-models--fill .related-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .related-models--fill .related-tiles li:nth-child(3){display:block}
  .related-models--fill .related-tiles li:last-child:nth-child(odd){grid-column:1 / -1}
  .related-models--fill .related-tiles li:last-child:nth-child(odd) img{aspect-ratio:2.2}
  .related-models--fill .related-tile img{aspect-ratio:1.3}
}
@media(max-width:600px){
  .related-models--fill .related-tiles,.related-models--fill[data-count] .related-tiles{grid-template-columns:minmax(0,1fr);gap:16px}
  .related-models--fill .related-tiles li:last-child:nth-child(odd){grid-column:auto}
  .related-models--fill .related-tile img,.related-models--fill[data-count] .related-tile img,.related-models--fill .related-tiles li:last-child:nth-child(odd) img{aspect-ratio:1.45}
}
@media(prefers-reduced-motion:reduce){.related-tile img{transition:none}.related-tile:hover img{transform:none}}