/* v16: mobile/tablet hero composition; desktop remains unchanged. */
@media (min-width: 768px) and (max-width: 1023px) {
 .home-hero-responsive { min-height: 65vh !important; }
 .home-hero-responsive .home-hero-image { background-position: 63% center !important; }
 .home-hero-responsive .home-hero-copy { max-width: 70% !important; }
}
@media (max-width: 767px) {
 .home-hero-responsive {
   display: block !important;
   height: auto !important;
   min-height: 0 !important;
   padding: clamp(350px, 89vw, 485px) 20px 42px !important;
   overflow: hidden !important;
   background-color: #211a0b !important;
 }
 .home-hero-responsive .home-hero-image {
   background-image: url('image/home/hero-mobile-v16.webp') !important;
   background-size: 100% auto !important;
   background-position: center top !important;
   background-repeat: no-repeat !important;
   background-color: #211a0b !important;
 }
 /* Replace the desktop's left-to-right darkening with a gentle bottom fade. */
 .home-hero-responsive > .absolute.inset-0.z-0 > .absolute.inset-0.z-10 {
   background: linear-gradient(to bottom, rgba(24,18,5,.10) 0%, rgba(24,18,5,.12) 27%, rgba(24,18,5,.42) 43%, #211a0b 59%, #211a0b 100%) !important;
 }
 .home-hero-responsive .home-hero-copy {
   width: 100% !important; max-width: 100% !important; margin: 0 !important;
 }
 .home-hero-responsive .home-hero-copy span.text-\[30px\] {
   font-size: clamp(25px, 6vw, 32px) !important;
 }
 .home-hero-responsive .home-hero-copy .space-y-6 { gap: 12px !important; }
 .home-hero-responsive .home-hero-copy .pt-6 { padding-top: 10px !important; }
}
@media (max-width: 390px) {
 .home-hero-responsive { padding-top: clamp(335px, 91vw, 370px) !important; }
}