#london-map .mobile-only-marker{display:none}
#mobile-area-sheet{position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:600px;max-height:82vh;max-height:82dvh;padding:0;border:1px solid #4a5871;border-bottom:0;border-radius:16px 16px 0 0;background:#0c1323;color:#edf2fc;box-shadow:0 -12px 45px #0005;overflow:auto;overscroll-behavior:contain}
#mobile-area-sheet::backdrop{background:#03071370}
.mobile-sheet-header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px 8px 20px;background:#0c1323;border-bottom:1px solid #35435a}
.mobile-sheet-header>span{font-size:11px;color:#b4c3dc}
#close-mobile-area{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px;color:#e5ddfc;background:none;font-size:12px;border-radius:4px}
#close-mobile-area>span{font-size:23px;line-height:1}
.mobile-sheet-body{padding:0 20px max(16px,env(safe-area-inset-bottom))}
#mobile-area-sheet .selected-area{width:100%;margin:0;padding:20px 0 0;border:0;gap:16px}
#mobile-area-sheet .selected-place h3{font-size:24px}
#mobile-area-sheet .selected-place .eyebrow{display:none}
#mobile-area-sheet .selected-money>strong{font-size:34px}
#mobile-area-sheet .selected-breakdown{padding-top:16px;gap:13px}
#mobile-area-sheet .selected-actions{gap:8px 12px;padding-top:12px}
#mobile-area-sheet .selected-actions .text-button{min-height:44px;display:flex;align-items:center;font-size:11px}
#mobile-area-sheet .selected-actions .button{min-height:44px}
#mobile-area-sheet .selected-actions .field-hint{font-size:10px}
@media(max-width:600px){#london-map .map-marker{display:none}#london-map .map-marker.selected{display:block}.map-tooltip{display:none!important}}
@media(max-width:360px){.mobile-sheet-body{padding-inline:16px}#mobile-area-sheet .selected-place h3{font-size:21px}#mobile-area-sheet .selected-money>strong{font-size:30px}#mobile-area-sheet .selected-actions .text-button{justify-content:center}}

/* A shorter route from the introduction to the map on phones. */
.hero-copy{flex:1;min-width:0}
.hero-description{max-width:640px}
.hero-note{flex:none}
.hero-note p{white-space:nowrap}
.hero-source{margin-top:8px;font-size:11px;line-height:1.6;color:#a9b8d3}
.hero-source a{text-decoration-color:#62738f}
.intro-mobile,.budget-overview span.intro-mobile-label,.site-header nav a.mobile-map-jump{display:none}
@media(max-width:600px){
  .site-header{height:64px}
  .site-header nav a.active{display:none}
  .site-header nav a.mobile-map-jump{display:inline-flex;align-items:center;min-height:44px;font-size:11px;color:#d0e8f5}
  .guide-breadcrumbs,.qa-breadcrumbs{padding-top:12px;font-size:9px}
  .hero{padding-top:12px;padding-bottom:15px}
  .hero h1{font-size:36px;margin:12px 0 10px;line-height:1.08}
  .hero-description{font-size:12px;line-height:1.7}
  .hero-source{font-size:10px}
  .intro-wide,.budget-overview span.intro-wide-label{display:none}
  .intro-mobile{display:inline}
  .budget-overview span.intro-mobile-label{display:block}
  .hero .salary-shortcuts{margin-top:12px;gap:5px;flex-wrap:nowrap}
  .hero .salary-shortcuts>span{display:none}
  .hero .salary-shortcuts button{min-width:40px;min-height:40px;font-size:11px;padding:7px 8px;flex:1}
  .hero .salary-shortcuts a{min-height:40px;font-size:10px;margin:0 0 0 3px;gap:4px;white-space:nowrap}
  .hero .salary-shortcut-note{font-size:8.5px;line-height:1.6;margin-top:6px}
  #explore>.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
  #explore>.section-heading>div{min-width:0}
  #explore>.section-heading h2{font-size:18px;line-height:1.3;max-width:none;margin:0}
  #explore>.section-heading p{display:none}
  #explore>.section-heading .source-chip{font-size:8px;margin:0!important;padding:5px 7px;flex:none}
  .hub-city-switch{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:9px}
  .hub-city-switch button{min-height:44px;padding:8px 4px;justify-content:center;text-align:center;border-radius:5px}
  .hub-city-switch strong{font-size:clamp(10.5px,3.05vw,12px);white-space:nowrap}
  .hub-city-switch small,.hub-city-switch .city-indicator{display:none}
  .coverage-note{font-size:9px;line-height:1.6;margin-bottom:12px}
  .budget-overview{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:12px 0;margin-bottom:14px;align-items:start}
  .budget-overview>div,.budget-overview>div:nth-child(2),.budget-overview>div:nth-child(3){grid-column:auto;border:0;border-left:1px solid #35435a;padding:0 10px}
  .budget-overview>div:first-child{padding-left:0;border-left:0}
  .budget-overview>div:last-child{padding-right:0}
  .budget-overview>div:nth-child(3)>div{display:block}
  .budget-overview span:not(.overview-icon){font-size:10px;line-height:1.6}
  .budget-overview strong,.budget-overview>div:nth-child(2) strong,.budget-overview>div:nth-child(3) strong{font-size:clamp(18px,5.6vw,23px);line-height:1.5;letter-spacing:-.6px;overflow-wrap:anywhere}
  .budget-overview strong span{font-size:12px!important}
  .budget-overview small{font-size:9px;line-height:1.6}
  .budget-panel{padding:13px 15px}
  .map-metric-heading{padding:13px 14px 12px}
  .map-metric-heading h3{font-size:20px}
  .map-metric-heading p{font-size:10px;line-height:1.7}
}