/* Shared controls and a phone layout with the same three type roles. */
.header{position:relative;z-index:20}
.draft-badge{letter-spacing:0;font-weight:500}
.project-card-heading:empty{display:none}
.project-tabs,.town-view-tabs{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.project-tabs a,.town-view-tabs button{flex-shrink:0}
dialog{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
.close-dialog{width:44px;height:44px;display:grid;place-items:center;top:8px;right:8px}
.map-window{min-width:0}
.map-gesture{display:none}
.town-road-steps{list-style:decimal;padding-left:20px}
.town-road-steps li{display:list-item;padding-left:4px}
.town-road-steps li:before{content:none}

@media(max-width:800px){
  html{scroll-padding-top:72px}
  .wrap,.home .wrap{width:calc(100% - 40px)}
  .header,.home .header{height:80px;padding:0 20px;gap:16px}
  .header nav,.home .header nav{top:80px;padding:12px 20px;gap:0}
  .header nav a{min-height:48px;display:flex;align-items:center}
  .menu-toggle{width:44px;height:44px;flex:0 0 44px;padding:0;line-height:1}
  .header>.button{display:none}
  .header .brand img{width:38px;height:38px}
  .home .portfolio-hero-v2{height:auto;min-height:max(700px,100svh);display:flex;flex-direction:column}
  .portfolio-hero-v2 .portfolio-hero-copy{padding-top:140px;padding-bottom:60px}
  .home .portfolio-hero-v2 h1,.project-page-title h1{font-size:48px;line-height:1.06;letter-spacing:-.05em}
  .portfolio-hero-v2 .portfolio-hero-copy p{max-width:260px;margin:22px 0 28px}
  .hero-bottom-row{position:relative;bottom:auto;margin-top:auto;padding-bottom:22px;gap:12px}
  .hero-feature-link{width:100%;min-width:0;min-height:70px;gap:12px;padding-top:16px}
  .hero-feature-link strong{font-size:24px;line-height:1.3}
  .hero-caption{max-width:none;font-size:14px}
  .hero-motion{margin-left:auto;min-height:44px;display:flex;align-items:center}
  .home .portfolio-feature-image{min-height:0;height:auto;aspect-ratio:4/3}
  .home .portfolio-feature-copy{padding:24px}
  .project-image-foot{flex-wrap:wrap;gap:4px;left:16px;right:16px;bottom:16px}
  .project-image-foot span:first-child{max-width:none;text-transform:none;letter-spacing:0}
  .home .coming-copy{grid-template-columns:minmax(0,1fr) auto}
  .home .coming-copy h3{overflow-wrap:anywhere}
  .home .about,.overview-grid,.faq-grid,.documents{gap:24px}
  .project-top{padding-top:20px;padding-bottom:28px}
  .project-page-title{display:block;margin:20px 0 24px}
  .project-page-title p{font-size:24px;line-height:1.4;margin-top:12px}
  .project-page-title>.button{margin-top:18px}
  .project-top-grid{gap:20px}
  .project-photo img{aspect-ratio:4/3;object-fit:cover}
  .photo-caption{padding:14px 16px;gap:8px;line-height:1.6}
  .project-top-grid .compact-invest{padding:24px}
  .ticket-buttons{gap:8px;flex-wrap:nowrap}
  .ticket-buttons button{min-height:48px;flex:1;padding:10px 4px}
  .button{min-height:48px}
  .button.full{gap:8px}
  .project-tabs-wrap{top:0}
  .project-tabs{gap:24px}
  .project-tabs a{padding:17px 0;min-height:56px}
  .section,.numbers-section,.faq-section,.structure-section,.location-section{padding:36px 0}
  .section-heading{margin-bottom:24px}
  .section-heading>p{margin-top:14px}
  .model-notice{display:block;padding:16px}
  .model-notice strong{display:block;margin-bottom:8px}
  .forecast-card{padding:20px 16px}
  .bar-chart{gap:10px;padding-left:4px;padding-right:4px}
  .metric-row{gap:12px;align-items:start}
  .metric-row>div{min-width:0}
  .metric-row strong{font-size:24px}
  .documents,.faq-grid,.forecast-layout,.invest-grid{min-width:0}
  .documents>*,.faq-grid>*,.forecast-layout>*,.invest-grid>*{min-width:0}
  .document-list>a{min-height:76px;gap:12px}
  .document-list a>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
  .doc-icon{flex-shrink:0}
  .faq-list details{padding:12px 0}
  .faq-list summary{min-height:44px;display:flex;align-items:center;line-height:1.6;padding-right:30px}
  .faq-list summary:after{top:3px}
  .faq-list p{margin-top:8px;line-height:1.8}
  .footer-top{flex-wrap:wrap;gap:20px;align-items:center}
  .footer-top>a:last-child{min-height:44px;display:flex;align-items:center}
  footer{padding-bottom:24px}
  dialog{padding:48px 24px 24px}
  dialog select{font-size:16px;min-height:48px}
  #copy-interest{min-height:44px}
  .town-controls{flex-wrap:wrap;gap:12px}
  .town-controls button{min-height:44px}
  .town-view-tabs button{min-height:48px}
  .town-filters button{min-height:44px;padding:8px 12px}
  .town-place{min-height:56px}
  .catchment-period button,.traffic-switch button{min-height:44px}
  .competition-pin,.town-pin{min-width:44px;min-height:44px;justify-content:center}
  .competition-pin>i{width:28px;height:28px;flex-shrink:0}
  .town-pin .pin-label,.competition-pin>span{pointer-events:none}
}

@media(max-width:520px){
  .neighborhood-section>.wrap{width:calc(100% - 40px)}
  .demand-strip article,.demand-strip article:first-child,.demand-strip article:last-child{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .demand-strip strong{grid-column:auto;grid-row:auto;text-align:left;margin:0}
  .demand-strip strong small{display:inline}
  .demand-strip p{grid-column:auto}
  .town-title{margin-top:28px}
  .town-controls{justify-content:space-between}
  .town-controls button:first-child{padding:8px 12px;gap:12px}
  .catchment-canvas,.town-view[data-town-canvas="nearby"]{min-width:0}
  .map-gesture{display:block;grid-column:1/-1;font-size:14px;color:#bed0ac;padding:12px 16px;border-bottom:1px solid #40583a}
  .map-window{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#789463 #173225}
  .map-window:focus-visible{outline:3px solid #d6ee91;outline-offset:-3px}
  .map-window .town-view{min-width:640px;width:640px}
  .map-window .traffic-canvas{min-width:0;width:100%}
  .catchment-legend{position:sticky;left:0;width:calc(100vw - 42px);min-height:48px;gap:8px;padding:12px;justify-content:flex-start}
  .catchment-canvas{aspect-ratio:auto!important}
  .catchment-canvas>svg{aspect-ratio:800/660;width:100%;height:auto}
  .competition-pins{inset:0 0 auto;aspect-ratio:800/660}
  .catchment-side,.town-directory #town-info,.town-directory #town-narrative,.town-selection{padding:20px}
  .catchment-volume{flex-wrap:wrap;gap:6px 16px}
  .town-place-list{height:280px}
  .forecast-details>label{gap:12px}
  .metric-row{flex-wrap:wrap}
  .metric-row>div{flex:1 1 160px}
  .metric-row strong{margin-left:auto}
  .capital-card,.ticket-card{padding:20px}
  .capital-key{gap:20px}
  .capital-key strong{font-size:24px}
  .ownership-flow{gap:12px}
  .ownership-flow>div{padding:20px 16px}
  .structure-bottom{gap:20px}
  .home .company-proof{grid-template-columns:1fr;gap:14px}
  .home .company-proof>.fine{grid-column:auto}
  .home .coming-copy{display:block}
  .coming-status{margin-top:10px}
}