/* Compact bathroom before/after hero — loaded after the core brand stylesheet. */
.hero {
  grid-template-columns: minmax(150px, 210px) minmax(420px, 720px) minmax(150px, 210px);
  justify-content: center;
  min-height: 475px;
  padding: 52px clamp(22px, 5vw, 76px) 42px;
  column-gap: clamp(20px, 3.2vw, 48px);
  row-gap: 22px;
}
/* Keep the real Collinson showroom clearly visible behind the hero wording. */
.hero::before {
  background: linear-gradient(rgba(249,249,241,.58), rgba(249,249,241,.68)), url("/collinson-showroom-hero.png") center 46% / cover no-repeat;
  opacity: 1;
  filter: saturate(.78);
}
.hero-transform { width: 100%; max-width: 205px; justify-self: center; }
.transform-image {
  aspect-ratio: .72;
  max-height: 285px;
  border-radius: 15px;
  border: 5px solid rgba(255,255,255,.82);
  box-shadow: 0 18px 42px rgba(0,41,70,.18);
}
.hero-after .transform-image { border-radius: 15px; }
.transform-image img { object-position: center; }
.hero-before .transform-image img { filter: saturate(.67) contrast(.93); }
.hero-copy h1 { font-size: clamp(51px, 6vw, 84px); }
.hero-copy > p:not(.eyebrow) { font-size: 16px; max-width: 570px; }
.ai-bridge { bottom: 70px; }
.hero .trust { margin-top: 2px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 135px 1fr 135px; min-height: 440px; padding-inline: 18px; }
  .hero-transform { max-width: 135px; }
  .transform-image { max-height: 210px; border-width: 3px; }
}
@media (max-width: 700px) {
  .hero { grid-template-columns: 1fr 1fr; padding: 42px 18px 30px; min-height: 0; }
  .hero-copy { grid-column: 1/-1; }
  .hero-transform { width: 100%; max-width: 150px; }
  .transform-image { aspect-ratio: .75; max-height: 205px; }
  .ai-bridge { bottom: 74px; }
}