/* area: town pages (/web-design-{town}/) and the Areas we serve hub. Rules main.css does not already have. */
.sec-head p{grid-column:8 / span 5;margin:0;color:var(--dim);max-width:46ch}
.hero .display{font-size:clamp(2.2rem,6.4vw,5.4rem)}
.contact-copy .display{font-size:clamp(2.2rem,5vw,4.4rem)}

/* Local section: copy + map panel */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.split-copy{grid-column:1 / span 6;display:flex;flex-direction:column;gap:20px;min-width:0}
.split-copy p,.split-copy .pencil-richtext p{margin:0;color:var(--dim);max-width:58ch}
.split-copy .pencil-richtext{color:var(--dim)}
.areamap{grid-column:8 / span 5;display:flex;flex-direction:column;gap:18px;padding:clamp(16px,2vw,24px);border-radius:24px;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);min-width:0}
.areamap-svg{display:block;width:100%;height:auto;border-radius:14px;background:#0a1020;border:1px solid var(--line)}
.areamap-svg .grid path{stroke:rgba(150,170,230,.07);stroke-width:1}
.areamap-svg .ln{stroke:rgba(150,170,230,.22);stroke-width:1.2;stroke-dasharray:4 6}
.areamap-svg .ln.on{stroke:var(--cyan);stroke-width:2;stroke-dasharray:none;filter:drop-shadow(0 0 6px rgba(51,217,242,.6))}
.areamap-svg .km{font:500 11px var(--mono);fill:var(--mute);letter-spacing:.06em;stroke:none}
.areamap-svg .town.on .km{fill:var(--cyan);font-size:12px;font-weight:600}
.areamap-svg .town{text-decoration:none;cursor:pointer}
.areamap-svg .town circle{fill:#3b4466;stroke:rgba(238,241,248,.5);stroke-width:1.5;transition:fill .2s}
.areamap-svg .town text{font:600 14px var(--body);fill:var(--dim);paint-order:stroke;stroke:#0a1020;stroke-width:4px;transition:fill .2s}
.areamap-svg .town:hover circle,.areamap-svg .town:focus-visible circle{fill:var(--magenta)}
.areamap-svg .town:hover text,.areamap-svg .town:focus-visible text{fill:var(--ink)}
.areamap-svg .town.on circle{fill:var(--cyan);stroke:#fff;filter:drop-shadow(0 0 10px var(--cyan))}
.areamap-svg .town.on text{fill:var(--ink);font-size:16px;font-weight:800}
.areamap-svg .studio path{fill:var(--magenta)}
.areamap-svg .studio .eye{fill:#0a1020}
.areamap-svg .studio .halo{fill:rgba(224,75,240,.14);stroke:rgba(224,75,240,.35)}
.areamap-svg .studio text{font:600 11px var(--mono);fill:var(--ink);letter-spacing:.08em;text-transform:uppercase;paint-order:stroke;stroke:#0a1020;stroke-width:4px}
.area-facts{margin:0;display:flex;flex-direction:column;gap:14px}
.area-facts div{display:flex;flex-direction:column;gap:8px}
.area-facts dd{margin:0}
.area-facts .tag{white-space:normal}

/* How it works */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.steps .card{gap:12px}
.steps .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--cyan)}
.steps .card p{font-size:14.5px}

/* Get found */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.duo .tag{align-self:flex-start}

/* Nearby towns / hub list */
.near-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.near-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:6px 12px;align-items:center;min-height:44px;padding:18px 20px;border-radius:18px;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);text-decoration:none;transition:border-color .25s,transform .25s}
.near-list a:hover,.near-list a:focus-visible{border-color:rgba(51,217,242,.45);transform:translateY(-2px)}
.near-list .nm{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em}
.near-list .hud{grid-column:1;grid-row:2;font-size:10.5px}
.near-list .rb-arrow{grid-column:2;grid-row:1 / span 2;color:var(--cyan);font-size:18px;transition:transform .2s}
.near-list a:hover .rb-arrow{transform:translateX(3px)}

/* Hub */
.hub-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.hub-grid .areamap{grid-column:1 / span 7}
.hub-list{grid-column:9 / span 4;grid-template-columns:minmax(0,1fr)}

@media (max-width:1180px){
  .near-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hub-grid .areamap{grid-column:1 / span 7}
  .hub-list{grid-column:8 / span 5;grid-template-columns:minmax(0,1fr)}
}
@media (max-width:980px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .split-copy,.areamap,.hub-grid .areamap,.hub-list{grid-column:1 / -1}
  .duo{grid-template-columns:minmax(0,1fr)}
  .near-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hub-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-copy,.sec-head .t,.sec-head p,.contact-copy,.rb-form,.faq-head,.faq-list{grid-column:1 / -1}
}
@media (max-width:560px){
  .steps,.near-list,.hub-list{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .near-list a,.near-list .rb-arrow{transition:none}
}