/* Version 2: copy and compact controls on the left; unboxed map on the right. */
.variant-two .hero-network .hero-network-grid{display:grid;grid-template-columns:minmax(0,.43fr) minmax(0,.57fr);grid-template-areas:"intro map" "panel map";gap:32px 64px;align-items:start}
.variant-two .hero-network .franchise-hero{grid-area:intro}
.variant-two .hero-network .hero-introduction>p{max-width:480px}
.variant-two .hero-network .market-info{grid-area:panel;padding:32px;border-radius:24px;align-self:start}
.variant-two .hero-network .market-info>.eyebrow{margin:0 0 12px}
.variant-two .hero-network .market-info>h2{font-size:clamp(28px,2.3vw,36px);line-height:1.14;letter-spacing:-.035em;margin:0 0 16px;max-width:none}
.variant-two #network-title .motion-word{color:var(--ink)}
.variant-two .hero-network .market-info>.network-description{font-size:15px;line-height:1.55}
.variant-two .network-filters{gap:16px;margin-top:24px}
.variant-two .market-info>.market-cta{margin-top:24px}
.variant-two .hero-network .map-stage{grid-area:map;position:sticky;top:136px;align-self:start;width:100%;margin:0;padding:0;min-width:0}
.variant-two .hero-network .map-canvas{width:100%;height:clamp(440px,36vw,680px);min-height:0;margin:0;left:auto;overflow:visible;max-width:none}
.variant-two .hero-network .map-controls{width:100%;padding:24px 0 0;align-items:flex-start;flex-direction:row}
.variant-two .hero-network .hero-x{right:auto;left:calc(var(--gutter) - 220px)}
.variant-two .market-detail{padding-top:24px;margin-top:24px}
.variant-two .market-detail>h3{font-size:26px;margin:12px 0}
@media(min-width:1700px){.variant-two .hero-network .hero-network-grid{gap:40px 80px}.variant-two .hero-network .market-info{padding:36px}.variant-two .hero-network .map-canvas{height:680px}}
@media(max-width:1200px) and (min-width:1100px){.variant-two .hero-network .hero-network-grid{gap:32px 40px}.variant-two .hero-network .market-info{padding:28px}.variant-two .network-filters{gap:12px}.variant-two .hero-network h1{font-size:76px}}
@media(max-width:1099px){
 .variant-two .hero-network .hero-network-grid{grid-template-columns:minmax(0,.48fr) minmax(0,.52fr);grid-template-areas:"intro map" "panel panel";gap:32px}
 .variant-two .hero-network .map-stage{position:relative;top:auto;align-self:center}
 .variant-two .hero-network .map-canvas{height:420px}
 .variant-two .hero-network .market-info{width:100%;padding:32px}
 .variant-two .hero-network .hero-x{left:-220px}
}
@media(max-width:760px){
 .variant-two .hero-network .hero-network-grid{display:flex;flex-direction:column;gap:32px}
 .variant-two .hero-network .market-info{order:2;padding:24px;width:100%;margin:0}
 .variant-two .hero-network .map-stage{order:1;position:relative;width:calc(100% + 48px);margin-left:-24px;align-self:start}
 .variant-two .hero-network .map-canvas{height:320px;width:100%}
 .variant-two .hero-network .map-controls{padding:20px 24px 0;width:100%;flex-direction:column}
 .variant-two .hero-network .market-info>h2{font-size:28px}
 .variant-two .hero-network .hero-x{left:-220px;right:auto}
}

.variant-two .hero-network .map-canvas>svg{overflow:hidden}
@media(min-width:1100px){.variant-two .hero-network .map-stage{width:calc(100% + var(--gutter) - 16px)}}

/* Version 2 desktop: a large map extends past the viewport to the east. */
.variant-two{overflow-x:clip}
@media(min-width:1100px){
 .variant-two .hero-network .map-canvas{width:220%;height:clamp(580px,45vw,860px)}
}

/* Bring the geography closer and use the same eastern bleed on tablets. */
@media(min-width:1100px){
 .variant-two .hero-network .map-stage{--map-pull:clamp(160px,15vw,300px);margin-left:calc(-1 * var(--map-pull));margin-top:-24px;width:calc(100% + var(--gutter) - 16px + var(--map-pull))}
 .variant-two .hero-network .map-controls{padding-left:var(--map-pull)}
}
@media(min-width:1100px) and (max-width:1200px){.variant-two .hero-network .map-stage{--map-pull:96px}}
@media(min-width:761px) and (max-width:1099px){
 .variant-two .hero-network .map-stage{--map-pull:40px;width:calc(100% + var(--gutter) - 16px + var(--map-pull));margin-left:calc(-1 * var(--map-pull))}
 .variant-two .hero-network .map-canvas{width:220%;height:440px}
 .variant-two .hero-network .map-controls{padding-left:var(--map-pull)}
}

/* Phone: larger free map, bleeding on both sides with active markets in frame. */
@media(max-width:760px){.variant-two .hero-network .map-canvas{width:200%;margin-left:-50%}}

/* Desktop legend follows the lower edge of the network card. */
@media(min-width:1100px){.variant-two .hero-network .map-controls{position:absolute;top:var(--legend-top,100%);padding-top:0}}

/* Version two map interactions; version one remains a visualisation. */
.variant-two .map-canvas,.variant-two .map-canvas svg{pointer-events:auto}
.variant-two .map-canvas .country.on,
.variant-two .map-canvas .island-country,.variant-two .map-canvas .island-country *,
.variant-two .map-canvas .branch-pin,.variant-two .map-canvas .branch-pin *{pointer-events:auto;cursor:pointer}
.variant-two .map-canvas .country-view .country.on:not(.selected-country),.variant-two .map-canvas .country.outside-region{pointer-events:none}
.variant-two .map-canvas .country.on:focus-visible{filter:brightness(1.18);outline:none}
.variant-two .map-canvas .island-country:focus-visible .branch-marker,
.variant-two .map-canvas .branch-pin:focus-visible .branch-marker{stroke:var(--ink);stroke-width:2.5}
.variant-two .map-canvas .pin-hit-area{fill:transparent;stroke:none;pointer-events:all}
.map-location-popover{position:fixed;z-index:1200;width:280px;max-width:calc(100vw - 32px);padding:24px;border-radius:24px;background:#fff;box-shadow:0 12px 40px #0a0a0a1a;color:var(--ink);text-align:left}
.map-location-popover[hidden]{display:none}
.map-location-popover:after{content:"";position:absolute;left:var(--pin-tip,50%);bottom:-7px;width:14px;height:14px;background:#fff;transform:translateX(-50%) rotate(45deg)}
.map-location-popover.below-pin:after{top:-7px;bottom:auto}
.map-location-popover .eyebrow{font-size:9px;letter-spacing:.12em;margin:0 18px 12px 0;color:var(--muted)}
.map-location-popover h3{font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-.025em;margin:0 0 8px;padding-right:8px}
.map-location-popover .pin-card-market{font-size:14px;line-height:1.5;color:var(--muted);margin:0}
.pin-card-close{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--paper);color:var(--ink);font-size:20px;line-height:1}
.pin-card-close:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

.variant-two .map-canvas svg.is-zooming .country,.variant-two .map-canvas svg.is-zooming .branch-pin,.variant-two .map-canvas svg.is-zooming .branch-pin *,.variant-two .map-canvas svg.is-zooming .island-country,.variant-two .map-canvas svg.is-zooming .island-country *{pointer-events:none!important}