/* Town (local SEO) pages: north-palm-beach, palm-beach-gardens, jupiter, juno-beach, lake-park,
   singer-island, west-palm-beach. Built by _design/build_towns.py. Uses lpb.css tokens only. */

/* ---- intro ---- */
.town-head{padding:48px 0 72px;background:var(--surface)}
.town-head .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,80px);align-items:center}
.town-head h1{font-size:clamp(40px,5vw,76px);letter-spacing:-.03em;text-wrap:balance}
.town-head h1 em{font-style:normal;color:var(--btn)}
.town-head .lead{font-size:clamp(18px,1.5vw,20px);color:var(--ink-2);max-width:38em;margin:20px 0 28px}
.th-areas{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2);max-width:40em}
.th-areas b{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.th-photo{position:relative;border-radius:var(--r-lg);background:var(--surface-2);aspect-ratio:4/5;max-height:620px;justify-self:end;width:100%}
.th-photo img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg)}
.th-photo .tag-wrap{left:28px;top:0}
.th-photo .tag-wrap::before{top:-4px}
.th-photo .tag-wrap .string{top:0;height:40px}
.th-photo .tag{width:156px;margin-top:34px;padding:36px 12px 24px}
.th-photo .tag .p{font-size:44px}
.th-photo .tag .n{font-size:13px;margin-top:8px}
.th-photo .tag .s{font-size:10px;margin-top:6px}
.th-photo .tag.sale .was{font-size:13px;margin-bottom:4px}

/* ---- ride weather (filled by the inline script, hidden until it has data) ---- */
.rw{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:22px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);max-width:40em}
.rw[hidden]{display:none}
.rw-label{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.rw-temp{font-stretch:125%;font-weight:800;font-size:26px;line-height:1}
.rw-cond{font-size:15px;color:var(--ink-2);margin-left:6px}
.rw-air{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2)}
.rw-dot{width:10px;height:10px;border-radius:50%;background:var(--detail)}
.rw-verdict{flex-basis:100%;font-weight:600;font-size:15px}

/* ---- repairs ---- */
.town-svc .sec-head,.town-eb .sec-head{align-items:start}
.town-svc .sec-head p{font-size:17px}
.town-svc .sec-head p+p{margin-top:12px}
.svc-more{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.svc-more p{flex:1 1 30em;font-size:15px;color:var(--ink-2)}
.svc-more p b{color:var(--ink)}

/* ---- e-bikes ---- */
.town-eb .grid{margin-bottom:26px}
.town-eb .copy p{color:var(--ink-2);font-size:17px}
.town-eb .copy p+p{margin-top:12px}
.eb-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px}
.eb-foot p{color:var(--ink-2);font-size:15px;max-width:44em}

/* ---- rentals ---- */
.town-rent .split{align-items:center}
.town-rent img{width:100%;border-radius:var(--r-lg);aspect-ratio:1200/669;object-fit:cover}
.town-rent p{color:var(--ink-2);font-size:17px;margin-bottom:24px}

/* ---- rides ---- */
.ride-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ride{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:24px 22px 26px;position:relative}
.ride::before{content:"";display:block;width:28px;height:4px;border-radius:2px;background:var(--detail);margin-bottom:18px}
.ride small{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.ride h3{font-size:21px;line-height:1.15;margin-bottom:10px}
.ride p{font-size:15px;color:var(--ink-2)}

/* ---- promise + faq ---- */
.town-promise h2{font-size:clamp(26px,2.4vw,36px);margin-bottom:8px}
.town-promise h2 span{color:var(--hi)}
.town-promise>div>p{color:var(--on-dark-2);max-width:40em}
.town-faq{margin-top:84px}

/* ---- closing band ---- */
.town-cta{background:var(--dark);color:#fff;border-radius:var(--r-lg);padding:clamp(34px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center}
.town-cta h2{font-size:clamp(32px,4vw,58px)}
.town-cta p{color:var(--on-dark-2);margin-top:12px;max-width:34em}

@media (max-width:1180px){
  .ride-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .town-head .wrap,.town-cta{grid-template-columns:1fr}
  .th-photo{justify-self:stretch;aspect-ratio:4/3;max-height:none}
  .th-photo img{object-position:50% 35%}
}
@media (max-width:640px){
  .town-head{padding:28px 0 52px}
  .ride-grid{grid-template-columns:1fr;gap:12px}
  .town-faq{margin-top:60px}
  .town-cta h2 br{display:none}
  .town-cta .ctas{flex-direction:column}
  .town-cta .ctas .btn{justify-content:center}
}