/* Scoped to the Designer page; the Builders and homepage heroes stay unchanged. */
.designer-page .hero {
  background-image: linear-gradient(90deg, rgba(5,20,21,.88) 0%, rgba(5,20,21,.76) 42%, rgba(5,20,21,.14) 78%), url("designer/living-room.jpg");
  background-position: center, center 54%;
  background-size: cover;
  background-repeat: no-repeat;
}
.designer-page .hero h1 { max-width: 760px; }
.designer-page .hero p:not(.eyebrow) { max-width: 640px; }
.designer-page .hero-route { max-width: 760px; }
.design-reference-pair { display: grid; grid-template-columns: 1.12fr 1fr; gap: 32px; margin: 38px 0 0; }
.design-reference { margin: 0; min-width: 0; }
.design-reference a { display: block; background: #fff; aspect-ratio: 4 / 3; }
.design-reference img { width: 100%; height: 100%; object-fit: cover; }
.design-reference-plan img { object-fit: contain; }
.design-reference figcaption { padding: 18px 0 0; font-size: .9rem; color: var(--muted); }
.design-reference figcaption strong { display: block; margin-bottom: 6px; font-size: 1.05rem; color: var(--ink); }
.design-reference figcaption span { display: block; max-width: 480px; }
.design-reference-note { font-size: .78rem; color: var(--muted); margin: 18px 0 36px; }
@media (max-width: 900px) {
  .designer-page .hero {
    background-image: linear-gradient(90deg, rgba(5,20,21,.86), rgba(5,20,21,.65)), url("designer/living-room.jpg");
  }
}
@media (max-width: 620px) {
  .designer-page .hero { background-position: center, 58% center; }
  .design-reference-pair { grid-template-columns: 1fr; gap: 28px; margin-top: 24px; }
  .design-reference a { aspect-ratio: auto; }
  .design-reference img { height: auto; object-fit: contain; }
}
@media print {
  .designer-page .hero { background: none; }
  .design-reference-pair { grid-template-columns: 1fr 1fr; }
  .design-reference { break-inside: avoid; }
}