/* V20 — homepage hero photo/card alignment
   Keep the utility card away from the photo caption and fit the gold frame to the photo itself. */
.hero-visual{
  position:relative;
  max-width:555px;
  padding:0!important;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:20px;
}

.hero-media{
  position:relative;
  width:100%;
  padding:0;
}

.hero-media .hero-photo{
  position:relative;
  width:100%;
  min-height:465px;
  margin:0;
}

/* Frame follows the actual photo instead of the full hero-visual container. */
.hero-media .gold-frame{
  position:absolute;
  z-index:0;
  inset:-12px;
  width:auto;
  height:auto;
  transform:none!important;
  pointer-events:none;
}

.hero-media .hero-photo{
  z-index:1;
}

/* Put the service-area card in normal flow below the photo. */
.hero-visual .route-card{
  position:relative!important;
  z-index:3;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  top:auto!important;
  width:min(320px,calc(100% - 24px));
  margin:2px 0 0 18px;
  padding:18px 22px;
}

/* Caption remains fully readable inside the photo. */
.hero-media .hero-photo figcaption{
  left:22px;
  right:22px;
  bottom:18px;
  padding-right:0;
}

@media(max-width:1180px){
  .hero-visual{max-width:530px;gap:18px}
  .hero-media .hero-photo{min-height:435px}
  .hero-media .gold-frame{inset:-10px}
}

@media(max-width:1000px){
  .hero-visual{max-width:540px;margin-inline:auto}
  .hero-media .hero-photo{min-height:405px}
  .hero-visual .route-card{margin-left:12px}
}

@media(max-width:520px){
  .hero-visual{gap:15px}
  .hero-media .hero-photo{min-height:310px}
  .hero-media .gold-frame{inset:-7px}
  .hero-visual .route-card{
    width:calc(100% - 20px);
    margin:0 10px;
    padding:16px 18px;
  }
  .hero-media .hero-photo figcaption{
    left:16px;
    right:16px;
    bottom:13px;
  }
}