.franchise-home-hero{position:relative;width:100%;margin:0;padding:0;overflow:hidden;background:transparent!important}
.franchise-home-hero picture{display:block;width:100%}
.franchise-home-hero-image{display:block;width:100%;height:auto;margin:0;padding:0}
.franchise-home-hero-overlay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;pointer-events:none}
.franchise-home-hero-overlay .container{width:100%}
.franchise-home-hero-text{width:min(650px,54%);margin:0;padding:18px 22px;background:rgba(255,255,255,.84);border:1px solid rgba(142,19,21,.18);border-radius:10px;color:#8e1315;pointer-events:auto}
.franchise-home-hero-text h1{margin:0 0 8px;color:#8e1315!important;-webkit-text-fill-color:#8e1315!important;font-size:clamp(30px,3vw,46px);font-weight:700;line-height:1.08}
.franchise-home-hero-text p{margin:0;color:#8e1315!important;-webkit-text-fill-color:#8e1315!important;font-size:clamp(16px,1.45vw,21px);font-weight:500;line-height:1.35}
@media(max-width:767px){
 .franchise-home-hero-image{min-height:360px;object-fit:cover;object-position:center}
 .franchise-home-hero-overlay{align-items:flex-end}
 .franchise-home-hero-text{width:calc(100% - 30px);margin:0 15px 22px;padding:14px 16px;background:rgba(255,255,255,.82);border-radius:10px}
 .franchise-home-hero-text h1{font-size:27px}
 .franchise-home-hero-text p{font-size:16px}
}/* 2.1.6: desktop keeps the explicit 1000:570 intrinsic ratio from the img
 * attributes. On mobile the <picture> selects a different source/aspect ratio;
 * overriding the desktop presentational ratio restores the stable 2.1.4 mobile
 * geometry while the existing 360px minimum still reserves first-paint space. */
@media(max-width:767px){.franchise-home-hero-image{aspect-ratio:auto}}