.regions-section { background:#fafafa; padding:72px 0 82px; }
.regions-layout { display:grid; grid-template-columns: .92fr 1.25fr; gap:64px; align-items:center; }
.regions-intro { position:relative; min-height:470px; display:grid; place-items:center; text-align:center; }
.regions-map { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.regions-intro-copy { position:relative; padding:28px 0; }
.regions-eyebrow { display:block; color:var(--signal); font-size:13px; font-weight:500; letter-spacing:.25em; text-transform:uppercase; margin-bottom:12px; }
.regions-intro h2 { font-size:clamp(28px,3vw,43px); line-height:1.16; letter-spacing:-.045em; text-transform:none; font-weight:650; }
.regions-intro h2 em { color:var(--signal); font-style:normal; }
.regions-intro p { margin:26px 0 0; color:var(--ink-soft); font-size:19px; line-height:1.7; }
.regions-intro p span { color:var(--signal); }
.regions-card { background:#fffafb; border:1px solid color-mix(in srgb,var(--signal) 24%,white); border-radius:34px; padding:34px; box-shadow:0 18px 32px -26px #171b1930; }
.regions-card-head { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.regions-card h3 { font-size:clamp(26px,3vw,38px); font-weight:600; line-height:1.2; letter-spacing:-.035em; }
.regions-arrows { display:flex; gap:9px; flex-shrink:0; }
.regions-arrows button { width:46px; height:46px; border:1px solid color-mix(in srgb,var(--signal) 28%,white); border-radius:50%; background:white; font-size:27px; font-weight:300; color:var(--ink); }
.regions-description { color:var(--ink-soft); font-size:17px; line-height:1.75; margin:24px 0 28px; }
.regions-states { display:flex; gap:12px; flex-wrap:wrap; min-height:114px; align-content:flex-start; }
.regions-states button,.regions-cities a { display:inline-flex; align-items:center; justify-content:center; padding:13px 20px; border:1px solid color-mix(in srgb,var(--signal) 28%,white); border-radius:999px; background:white; color:var(--signal); font-size:15px; text-align:center; }
.regions-states button:hover,.regions-states button[aria-expanded="true"],.regions-cities a:hover,.regions-arrows button:hover { background:var(--signal); color:white; }
.regions-dots { display:flex; gap:9px; margin-top:30px; }
.regions-dots button { width:12px; height:12px; border-radius:99px; background:color-mix(in srgb,var(--signal) 28%,white); position:relative; }
.regions-dots button::after { content:''; position:absolute; inset:-7px -3px; }
.regions-dots button[aria-current="true"] { width:36px; background:var(--signal); }
.regions-cities { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:14px; }
.regions-cities strong { display:block; color:var(--ink); margin-bottom:12px; }
.regions-city-links { display:flex; gap:8px; flex-wrap:wrap; max-height:220px; overflow:auto; }
.regions-cities a { padding:9px 14px; font-size:14px; }
.regions-card button:focus-visible,.regions-card a:focus-visible { outline:3px solid var(--signal); outline-offset:4px; }
@media(max-width:1000px) { .regions-layout { gap:28px; } .regions-card { padding:26px; } .regions-intro { min-height:390px; } }
@media(max-width:760px) { .regions-section { padding:36px 0 48px; } .regions-layout { grid-template-columns:1fr; gap:20px; } .regions-intro { min-height:330px; } .regions-map { max-width:360px; left:50%; transform:translateX(-50%); } .regions-intro h2 { font-size:34px; } .regions-card { border-radius:26px; padding:24px; } .regions-description { font-size:16px; } .regions-states { min-height:0; } .regions-states button { font-size:14px; padding:11px 15px; } .regions-arrows button { width:40px; height:40px; } .regions-card h3 { font-size:27px; } }