.mhero{position:relative;height:clamp(440px,38vw,700px);overflow:hidden;background:linear-gradient(180deg,#E6ECF4,#EEF1F5)}
.mhero .map{position:absolute;inset:0;width:100%;height:100%}
.mhero .land{fill:#EEECE6}
.mhero .nb path{fill:#EEECE6;stroke:#fff;stroke-width:.8}
.mhero .restbase path{fill:#C9D2E1}
.mhero .restlines path{fill:none;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.mhero .bac path{fill:#0B2560;stroke:#5C7BC0;stroke-width:.9;stroke-linejoin:round}
.mhero .zoom{animation:zin 3s cubic-bezier(.2,.7,.2,1) both}
@keyframes zin{from{transform:scale(.55)}to{transform:scale(1)}}
.mhero .spoke{fill:none;stroke:#F6C431;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.1s ease-out forwards;animation-delay:var(--d)}
.mhero .co{fill:#F6C431;stroke:#071A4A;stroke-width:1.1;opacity:0;animation:pop .4s ease-out forwards;animation-delay:var(--d)}
.mhero .sl{font-family:Archivo,sans-serif;font-weight:700;letter-spacing:.06em;fill:#fff;opacity:0;animation:pop .5s ease-out forwards;animation-delay:var(--d)}
.mhero .bru{fill:none;stroke:url(#tri);stroke-width:3;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.8s ease-in-out .4s forwards}
.mhero .atl{font-family:Archivo,sans-serif;font-weight:800;letter-spacing:.12em;fill:#fff}
.mhero .pulse{fill:none;stroke:#E1001A;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out infinite}
.mhero .p2{animation-delay:1.2s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0}to{opacity:1}}
@keyframes pulse{from{transform:scale(1);opacity:1}to{transform:scale(5);opacity:0}}
.mhero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(243,241,236,.98) 0%,rgba(243,241,236,.92) 28%,rgba(243,241,236,0) 46%);pointer-events:none}
.mhero .mtext{position:absolute;z-index:2;left:max(20px,calc((100vw - 1280px)/2));top:50%;transform:translateY(-50%);max-width:470px}
.mhero .mono{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.mhero .mtext h1{font-size:clamp(32px,3.4vw,56px);line-height:.98;letter-spacing:-.035em;color:var(--navy);margin-top:16px}
.mhero .mtext p{margin-top:16px;font-size:clamp(16px,1.25vw,20px);color:var(--muted)}
.mhero .tri{display:block;width:120px;height:4px;margin-top:22px;background:linear-gradient(90deg,#111 0 33.3%,#F6C431 33.3% 66.6%,#E1001A 66.6%)}
.mhero .legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font:500 12px "IBM Plex Mono",monospace;color:#071A4A}
.mhero .legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.mhero .legend i.tl{width:22px;height:4px;border-radius:2px;vertical-align:2px;background:linear-gradient(90deg,#111 0 33%,#F6C431 33% 66%,#E1001A 66%)}
.mhero .bac path{fill:#F6C431;stroke:#111;stroke-width:.7}
.mhero .restlines path{stroke-width:.9}
.mhero .spoke{stroke:#071A4A;stroke-width:1.2}
.mhero .co{fill:#fff;stroke:#071A4A}
.mhero .sl{fill:#111;paint-order:stroke;stroke:#F6C431;stroke-width:2px}
.mhero .atl{fill:#111;paint-order:stroke;stroke:#F6C431;stroke-width:2.4px}
.mhero .restlines path{stroke-width:.45}
.mhero .bac path{stroke-width:.35}
.mhero::after{display:none}
.mhero .mtext h1{text-shadow:0 0 18px rgba(255,255,255,.9)}
.mhero .mtext p{color:#33405e}
.mhero .legend i[style*='#0B2560']{background:#F6C431!important;box-shadow:inset 0 0 0 1px #111}
.mhero{background:#F3F1EC}
.mhero .zoom{animation:none!important}
.mhero .spin{}
@media (prefers-reduced-motion:reduce){.mhero .spin{animation:none}}
.mhero{background:#F3F1EC}
.mhero .land{fill:#E4E0D6}
.mhero .nb path{fill:#E4E0D6;stroke:#fff}
.mhero .ggrat{fill:none;stroke:#B9B3A6;stroke-width:.6;opacity:.8}
.mhero .eu path{fill:#E4E0D6;stroke:#fff;stroke-width:.6}
.mhero .legend{display:none}
.mhero .sl{font-size:6.65px!important}
.mhero .atldot{display:none}
.mhero .spoke{stroke-width:.8!important}
.mhero .mtext{top:auto;bottom:112px;transform:none}
.mhero:not(.ready) .spoke,.mhero:not(.ready) .co,.mhero:not(.ready) .sl,.mhero:not(.ready) .bru{animation-play-state:paused}
.mhero .mtext{z-index:2;max-width:min(540px,calc(100vw - 40px))}
.mhero svg.map{overflow:visible}
.mhero .spoke,.mhero .co,.mhero .sl{animation-delay:calc(var(--d) + .2s)}
@media (max-width:760px){.mhero{height:auto;display:flex;flex-direction:column}.mhero .map{position:relative;height:300px}.mhero .mtext{position:relative;left:auto;top:auto;bottom:auto;transform:none;max-width:none;padding:22px 20px 6px}.mhero .mtext h1{font-size:clamp(23px,7.6vw,34px)}}

/* discreet Atlanta marker: thin black and red rings, slow and faint */
.mhero .glow{display:none}
.mhero .pulse{stroke:#111;stroke-width:.8;animation:pulse2 3.6s ease-out infinite}
.mhero .p2{stroke:#E1001A;animation-delay:1.8s}
@keyframes pulse2{0%{transform:scale(1.3);opacity:.55}100%{transform:scale(3.2);opacity:0}}
/* tagline: never more than 3 lines */
.mhero .mtext{max-width:min(600px,calc(100vw - 40px))}
.mhero .mtext h1{font-size:clamp(28px,3.4vw,56px)}
@media (max-width:1100px) and (min-width:761px){.mhero .mtext h1{font-size:clamp(28px,3.9vw,44px)}}
@media (max-width:760px){.mhero .mtext h1{font-size:clamp(20px,7vw,34px)}}

/* intro: fade the globe in while it turns, then reveal the tagline and let the globe dissolve */
.mhero .map{opacity:0;transition:opacity 1.4s ease}
.mhero.in .map{opacity:1}
.mhero .mtext{opacity:0;transform:translateY(14px);transition:opacity 1s ease,transform 1s ease}
.mhero.ready .mtext{opacity:1;transform:none}
.mhero .gfx{transition:opacity 1.4s ease}
.mhero.ready .gfx{opacity:0}
@media (prefers-reduced-motion:reduce){.mhero .map,.mhero .mtext{opacity:1;transform:none;transition:none}.mhero .gfx{opacity:0}}
/* tagline: stand out from the photo with a crisp white edge and soft halo */
.mhero .mtext{max-width:min(520px,calc(100vw - 40px))}
.mhero .mtext h1{color:#071A4A;text-shadow:0 0 1px #fff,1px 1px 0 #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,0 2px 0 #fff,0 -2px 0 #fff,2px 0 0 #fff,-2px 0 0 #fff,0 0 22px rgba(255,255,255,.95),0 0 44px rgba(255,255,255,.8)}
.mhero .mtext p{color:#0E1B3D;font-weight:600;text-shadow:0 0 1px #fff,1px 1px 0 #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,0 0 14px rgba(255,255,255,.95)}
@media (max-width:760px){.mhero .mtext h1,.mhero .mtext p{text-shadow:none}}
@media (min-width:1700px){.mhero .mtext{max-width:640px}}

/* Brussels line: drawn from Belgium toward Atlanta while the globe turns */
.mhero .bru{stroke-dasharray:1000;stroke-dashoffset:1000;animation:none}
.mhero.in .bru{animation:none}
@media (prefers-reduced-motion:reduce){.mhero .bru{stroke-dashoffset:0;animation:none}}

/* patrons under the tagline */
.mhero .heropat{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:20px}
.mhero .heropat>span{font:600 11.5px/1.35 "IBM Plex Mono",monospace;letter-spacing:.05em;text-transform:uppercase;color:#0E1B3D;max-width:190px;text-shadow:0 0 1px #fff,1px 1px 0 #fff,-1px -1px 0 #fff,0 0 10px #fff}
.mhero .hplogos{display:flex;gap:8px}
.mhero .hplogos a{display:flex;align-items:center;justify-content:center;width:96px;height:42px;padding:7px 10px;background:rgba(255,255,255,.92);border-radius:6px;box-shadow:0 2px 10px rgba(7,26,74,.12);transition:transform .2s ease}
.mhero .hplogos a:hover{transform:translateY(-2px)}
.mhero .hplogos img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1) contrast(1.3) brightness(.8)}
@media (max-width:760px){.mhero .heropat>span{text-shadow:none;max-width:none}.mhero .hplogos a{width:84px;height:38px}}
/* patron logos: larger, no tiles, black with a soft white halo */
.mhero .heropat{gap:12px 22px;margin-top:22px}
.mhero .hplogos{gap:26px;align-items:center}
.mhero .hplogos a{width:auto;height:auto;padding:0;background:none;box-shadow:none;border-radius:0}
.mhero .hplogos img{display:block;height:46px;width:auto;max-width:none;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px rgba(255,255,255,.95))}
.mhero .hplogos a[title="International Flooring Company"] img{height:34px}
.mhero .hplogos a[title="Syensqo"] img{height:40px}
@media (max-width:760px){.mhero .hplogos{gap:18px}.mhero .hplogos img{height:38px}.mhero .hplogos a[title="International Flooring Company"] img,.mhero .hplogos a[title="Syensqo"] img{height:28px}}
/* small dot between the patron logos */
.mhero .hplogos a+a{position:relative}
.mhero .hplogos a+a::before{content:"";position:absolute;left:-15px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#111;box-shadow:0 0 0 1.5px #fff}
@media (max-width:760px){.mhero .hplogos a+a::before{left:-11px;width:4px;height:4px;margin-top:-2px}}
/* state dots black, state names a touch smaller */
.mhero .co{fill:#111!important;stroke:#fff!important;stroke-width:.8!important}
.mhero .sl{font-size:6px!important}

/* tagline and logos arrive as the globe settles */
.mhero .mtext{transition:opacity 1.3s ease,transform 1.3s cubic-bezier(.2,.7,.2,1)}
.mhero.reveal .mtext{opacity:1;transform:none}

/* returning visitors: show the finished hero straight away */
.mhero.instant .map,.mhero.instant .mtext,.mhero.instant .gfx{transition:none!important}
.mhero.instant .spoke,.mhero.instant .co,.mhero.instant .sl{animation-delay:0s!important;animation-duration:.01s!important}
/* the Brussels line fades away once the South is in place */
.mhero .bru{transition:opacity 1.4s ease .2s}
.mhero.ready .bru{opacity:0}
.mhero.instant .bru{transition:none!important;opacity:0}
/* banner-size hero: wide and short, tagline only */
.mhero{height:clamp(260px,23.7vw,520px)!important}
.mhero .mtext{top:auto!important;bottom:clamp(18px,1.6vw,34px)!important;transform:none!important}
.mhero .mtext p,.mhero .tri,.mhero .heropat{display:none!important}
.mhero .mtext h1{font-size:clamp(26px,3.15vw,60px)!important;line-height:1}
@media (max-width:760px){.mhero{height:auto!important}.mhero .mtext{bottom:auto!important}}

/* banner-size hero: map clipped to the banner, only Florida hangs below */
@media (min-width:761px){
 .mhero{height:25vw!important;min-height:0!important;max-height:none!important;overflow:visible!important;z-index:6}
 .mhero svg.map{position:absolute;inset:0 0 auto 0!important;width:100%!important;height:38.4348vw!important;overflow:visible!important}
 .mhero .mtext{top:auto!important;bottom:9%!important;transform:none!important;max-width:min(560px,46vw)!important}
 .mhero .mtext h1{font-size:clamp(24px,2.85vw,52px)!important;line-height:1}
 .mhero .heropat,.mhero .legend{display:none!important}
 .mhero + .wrap .rail{padding-top:calc(12.1vw - 34px)}
}
.mhero .fl-over{opacity:0;transition:opacity .9s ease}
.mhero.ready .fl-over{opacity:1}
.mhero.instant .fl-over{transition:none!important}
/* v60: Florida spoke, dot and label below the banner draw in sync with the others */
@media (max-width:760px){.mhero .fl-over{display:none}}
@media (max-width:760px){.mhero .bancl{clip-path:none}.mhero .mtext{padding-top:16px}}
/* v57: banner bottom on the Mississippi line, whole South visible while turning */
@media (min-width:761px){
 .mhero{height:24.643vw!important}
 .mhero .mtext{bottom:7%!important;max-width:min(520px,44vw)!important}
 .mhero .mtext h1{font-size:clamp(20px,2.3vw,42px)!important}
 .mhero .mtext p{display:block!important;margin-top:.5em;font-size:clamp(12px,1vw,17px)!important}
 .mhero + .wrap .rail{padding-top:66px!important}
 .mhero + .wrap .rail .rail-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:calc(57vw - max(20px,(100vw - 1280px)/2))}
 .mhero + .wrap .rail .rail-grid>*:nth-child(n+3){display:none!important}
}
.mhero .fl-extra{opacity:0;transition:opacity .9s ease .6s}
.mhero.ready .fl-extra{opacity:1}
.mhero.instant .fl-extra{transition:none!important}
/* v58: the South is part of the photo while the globe turns; gold South appears after the final shake */
.mhero .bancl .bac,.mhero .fl-over,.mhero .atlflag,.mhero .atl{opacity:0;transition:opacity 1s ease}
.mhero.ready .bancl .bac,.mhero.ready .fl-over,.mhero.ready .atlflag,.mhero.ready .atl{opacity:1!important}
.mhero:not(.ready) .pulse{visibility:hidden}
.mhero.instant .bancl .bac,.mhero.instant .fl-over,.mhero.instant .atlflag,.mhero.instant .atl{transition:none!important}
.mhero .fl-extra{opacity:1!important;transition:none!important}

/* v64: map sits higher so the South protrudes less below the banner */
@media (min-width:761px){.mhero svg.map{inset:auto 0 auto 0!important;top:calc(-26/442*38.4348vw)!important}}
/* v92: quicker finish, the state lines, dots and names land faster once the South settles */
.mhero .spoke{animation-duration:.75s!important;animation-delay:calc(var(--d) * .55)!important}
.mhero .co,.mhero .sl{animation-duration:.3s!important;animation-delay:calc(var(--d) * .55)!important}
.mhero.instant .spoke,.mhero.instant .co,.mhero.instant .sl{animation-delay:0s!important;animation-duration:.01s!important}