@font-face { font-family: BannerManrope; src: url('../font/manrope/Manrope-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: BannerManrope; src: url('../font/manrope/Manrope-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }
.mf-banner-stage { position: relative; width: 100%; aspect-ratio: 2.56; background: #f3f3f3; overflow: hidden; container-type: inline-size; font-family: BannerManrope,Arial,sans-serif; isolation: isolate; }
.mf-banner-stage * { box-sizing: border-box; }
.mf-banner-stage [hidden],.mf-carousel [hidden] { display: none !important; }
.mf-banner-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.mf-banner-shade { position: absolute; inset: 0; background: rgba(0,0,0,var(--banner-overlay,0)); }
.mf-banner-content { position: absolute; inset: 0; display: flex; align-items: var(--banner-vertical,center); justify-content: var(--banner-horizontal,flex-start); padding: 4% 6%; color: var(--banner-color,#fff); text-align: var(--banner-align,left); }
.mf-banner-copy { width: var(--banner-width,48%); min-width: 0; overflow-wrap: anywhere; }
.mf-banner-title { color: inherit; font-family: inherit; font-size: clamp(10px,var(--banner-title-size,4cqw),90px); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; white-space: pre-line; margin: 0; }
.mf-banner-kicker { color: inherit; font-family: inherit; font-size: clamp(7px,1.1cqw,20px); font-weight: 800; letter-spacing: .1em; white-space: pre-line; margin: 0 0 .65em; }
.mf-banner-subtitle { color: inherit; font-family: inherit; font-size: clamp(8px,1.5cqw,28px); line-height: 1.4; white-space: pre-line; margin: .65em 0 0; }
.mf-banner-cta { display: inline-flex; align-items: center; justify-content: center; border-radius: .4em; background: #df1521; color: #fff; font-family: inherit; font-size: clamp(8px,1.2cqw,22px); font-weight: 800; line-height: 1.3; margin-top: 1.1em; padding: .75em 1.3em; text-decoration: none; max-width: 100%; }
.mf-banner-cta:hover { background: #b60e18; }
.mf-carousel { position: relative; }
.mf-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 48px; background: #fff; }
.mf-carousel-controls button { font: inherit; cursor: pointer; border: 0; background: #f1f2f3; color: #272b2f; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.mf-carousel-controls button:hover { background: #e8e8e8; }
.mf-carousel-controls button:focus-visible,.mf-banner-cta:focus-visible { outline: 3px solid #2368ad; outline-offset: 3px; }
.mf-carousel-dots { display: flex; gap: 8px; }
.mf-carousel-dots button { width: 24px; height: 30px; background: transparent; position: relative; }
.mf-carousel-dots button::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #c1c5c9; }
.mf-carousel-dots [aria-current="true"]::before { background: #df1521; width: 10px; height: 10px; }
.mf-carousel-status,.banner-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(prefers-reduced-motion:reduce) { .mf-carousel * { scroll-behavior: auto; } }