/* Town landing pages (/senior-foot-care-*). Loaded only by lib/town-template.html,
   on top of base.css + style.css, so everything here is either a town-page-only
   component (the stat band, the visit-day list, the map card) or a deliberate
   override of a site style the town hero needs. */

/* Hero: give the headline real presence and let the sky through. */
.hero__title{font-size:clamp(2.9rem,6.4vw,5.1rem)!important;line-height:1.02!important;
  letter-spacing:-.022em;text-wrap:balance;}
.hero__desc{font-size:clamp(1.05rem,1.55vw,1.28rem)!important;line-height:1.65!important;max-width:34ch;}
.hero__badge{letter-spacing:.14em!important;}
.hero__overlay{background:
  linear-gradient(90deg,rgba(12,26,48,.90) 0%,rgba(12,26,48,.66) 40%,rgba(12,26,48,.24) 70%,rgba(12,26,48,.14) 100%),
  linear-gradient(0deg,rgba(12,26,48,.42) 0%,rgba(12,26,48,0) 42%)!important;}
.hero__bg img{transform:scale(1.045);animation:heroSettle 1400ms cubic-bezier(.16,.84,.44,1) both;}
@keyframes heroSettle{from{transform:scale(1.10)}to{transform:scale(1.045)}}

/* Stat band: the one loud moment on the page. */
.statband{background:var(--color-primary);color:#fff;padding-block:clamp(2.6rem,5vw,4.2rem);}
.statband__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.2rem 1.5rem;}
@media(min-width:860px){.statband__grid{grid-template-columns:repeat(4,1fr);gap:2rem;}}
.stat{display:flex;flex-direction:column;gap:.45rem;align-items:flex-start;}
@media(min-width:860px){.stat{align-items:center;text-align:center;}}
.stat__n{font-family:var(--font-display);font-size:clamp(3.1rem,5.4vw,4.3rem);line-height:1;
  color:var(--color-accent-light,#e8c56a);font-variant-numeric:tabular-nums;}
.stat__n--word{font-size:clamp(2.5rem,4.2vw,3.4rem);}
.stat__l{font-size:.95rem;line-height:1.45;color:rgba(255,255,255,.74);}

/* Map: promote it to a card that feels like an object on the page. */
.home-map{background:#fff;border-radius:20px;padding:clamp(1.1rem,2.4vw,2rem);
  box-shadow:0 1px 2px rgba(16,32,58,.05),0 18px 44px -20px rgba(16,32,58,.28);
  border:1px solid rgba(30,51,86,.07);}
.mp-dot{animation:dotIn 460ms cubic-bezier(.2,.9,.3,1) both;}
.mp-lbl{animation:dotIn 520ms cubic-bezier(.2,.9,.3,1) both;}
@keyframes dotIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.mp-here-halo{transform-origin:center;transform-box:fill-box;
  animation:halo 2600ms cubic-bezier(.4,0,.2,1) 900ms infinite;}
@keyframes halo{0%,72%{opacity:.18;transform:scale(1)}86%{opacity:.05;transform:scale(1.55)}100%{opacity:.18;transform:scale(1)}}

/* Route list: bigger dates, a lift on hover, clear month rhythm. */
.rt-list{box-shadow:0 1px 2px rgba(16,32,58,.05),0 14px 36px -22px rgba(16,32,58,.3);}
.rt-day{padding:clamp(.95rem,1.6vw,1.25rem) clamp(1.1rem,2vw,1.6rem);
  transition:background 160ms ease-out;}
.rt-day:hover{background:#fdfaf3;}
.rt-date{font-size:clamp(1.22rem,1.7vw,1.5rem)!important;}
.rt-dow{font-size:13px!important;}
.rt-book{padding:10px 20px!important;}

/* Care cards: give them a surface so the section stops reading as loose text. */
.care-card{background:#fff;border:1px solid rgba(30,51,86,.08);border-radius:16px;
  padding:clamp(1.4rem,2.4vw,1.9rem);
  box-shadow:0 1px 2px rgba(16,32,58,.04);
  transition:transform 200ms cubic-bezier(.2,.9,.3,1),box-shadow 200ms ease-out;}
.care-card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(16,32,58,.05),0 16px 34px -20px rgba(16,32,58,.34);}

/* Testimonial as an editorial pull quote. */
.pullquote .testimonial{border:0;padding:0;}
.pullquote blockquote{font-family:var(--font-display);font-size:clamp(1.4rem,2.7vw,2.05rem)!important;
  line-height:1.36!important;color:var(--color-primary)!important;max-width:22ch;}
@media(min-width:900px){.pullquote blockquote{max-width:none;}}
.pullquote .testimonial__ask{font-size:var(--text-lg);}

/* Section headings a touch larger and tighter across the page. */
.section__title{font-size:clamp(1.95rem,3.5vw,2.9rem)!important;letter-spacing:-.014em;text-wrap:balance;}
.section__eyebrow{letter-spacing:.15em!important;}

@media (prefers-reduced-motion: reduce){
  .hero__bg img,.mp-dot,.mp-lbl,.mp-here-halo{animation:none!important;transform:none!important;}
  .care-card{transition:none;}
}

/* ---------- Intro block ---------- */
.home-block { background:#fbf8f1; }
.home-grid { display:grid; gap:var(--space-8); grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){ .home-grid{ grid-template-columns:1fr minmax(300px,380px); gap:4rem; } }
.home-copy p { color:var(--color-text-muted); line-height:1.8; margin-bottom:var(--space-4); max-width:60ch; }
.home-lede { font-size:var(--text-lg); color:var(--color-text) !important; }
.home-copy .section__title { margin-bottom:var(--space-5); }
.home-map { margin:0; }
.home-map figcaption { margin-top:var(--space-3); text-align:center; font-size:var(--text-sm);
  color:var(--color-text-muted); font-style:italic; }
/* Her route is a tall, narrow strip, so the map is portrait. Capping and
   centring it keeps the card from becoming a wide box with a thin column of
   dots stranded in the middle. */
.mp { width:100%; max-width:290px; height:auto; display:block; margin:0 auto; }
.mp-radius { fill:rgba(30,51,86,.045); stroke:rgba(30,51,86,.22); stroke-width:1.5; stroke-dasharray:4 7; }
.mp-dot { fill:rgba(30,51,86,.34); }
.mp-lbl { fill:rgba(30,51,86,.62); font-size:14px; text-anchor:middle; }
.mp-here-halo { fill:rgba(212,160,23,.18); }
.mp-here-dot { fill:var(--color-accent); }
.mp-here-lbl { fill:var(--color-primary); font-size:21px; font-weight:600; text-anchor:middle;
  font-family:var(--font-display); }

/* ---------- Route days: her paper calendar ---------- */
.route { background:var(--color-bg); }
.route-grid { display:grid; gap:var(--space-8); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .route-grid{ grid-template-columns:1fr 1fr; gap:4rem; } }
.route-intro p { color:var(--color-text-muted); line-height:1.8; margin-bottom:var(--space-4); max-width:52ch; }
.route-intro strong { color:var(--color-primary); }
.route-hint { font-size:var(--text-sm); }
.rt-list { list-style:none; display:flex; flex-direction:column; gap:0;
  border:1px solid rgba(30,51,86,.14); border-radius:14px; overflow:hidden; background:#fff; }
.rt-day { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-4) var(--space-5);
  border-bottom:1px solid rgba(30,51,86,.09); }
.rt-day:last-child { border-bottom:0; }
.rt-dow { font-family:var(--font-display); font-size:15px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--color-accent); width:3.2rem; flex:none; }
.rt-date { font-family:var(--font-display); font-size:var(--text-lg); color:var(--color-primary); flex:1; }
.rt-book { flex:none; font-size:var(--text-sm); font-weight:600; color:var(--color-primary);
  text-decoration:none; padding:8px 16px; border:1px solid rgba(30,51,86,.2); border-radius:999px;
  transition:background 160ms ease-out, border-color 160ms ease-out; }
.rt-book:hover { background:var(--color-accent); border-color:var(--color-accent); color:#fff; }
.rt-book:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }

/* ---------- Care cards ---------- */
.care-grid { display:grid; gap:var(--space-6); grid-template-columns:1fr; margin-top:var(--space-8); }
@media (min-width:900px){ .care-grid{ grid-template-columns:repeat(3,1fr); } }
.care-card h3 { font-family:var(--font-display); font-size:var(--text-xl); color:var(--color-primary);
  margin-bottom:var(--space-3); }
.care-card p { color:var(--color-text-muted); line-height:1.8; }

.nearby-list { list-style:none; display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6); }
.nearby-list a { display:inline-block; padding:10px 18px; border-radius:999px; background:rgba(255,255,255,.08);
  color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.18); font-size:var(--text-sm); }
.nearby-list a:hover { background:rgba(255,255,255,.16); }
.mp-note { margin-top:var(--space-6); line-height:1.7; }
.mp-note a { color:var(--color-primary); font-weight:500; }

/* CC BY requires attribution, so the credit ships with the photo. */
.hero{position:relative;}
.hero .photo-credit{position:absolute;right:16px;bottom:12px;z-index:5;margin:0;
  font-size:11px;color:rgba(255,255,255,.66);text-shadow:0 1px 2px rgba(0,0,0,.55);}
.rt-empty{background:#fff;border:1px solid rgba(30,51,86,.14);border-radius:14px;
  padding:var(--space-5);}
.rt-empty p{color:var(--color-text-muted);line-height:1.7;margin:0;}