/* ============================================
   SPRUCED — AREA / LOCAL SEO PAGES
   Shared styles for /areas/** pages
   Relies on CSS variables defined in main.css
   ============================================ */

.crumb { max-width:1080px; margin:0 auto; padding:1.25rem 2rem 0; font-size:13px; color:var(--muted); }
.crumb a { color:var(--muted); text-decoration:none; }
.crumb a:hover { color:var(--pine2); }
.crumb span { margin:0 7px; opacity:0.5; }

.a-hero { max-width:1080px; margin:0 auto; padding:2rem 2rem 1rem; }
.a-label { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; letter-spacing:.04em; color:var(--pine2); background:rgba(33,66,45,0.07); padding:6px 13px; border-radius:50px; margin-bottom:18px; }
.a-hero h1 { font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:clamp(34px,5vw,54px); line-height:1.04; letter-spacing:-1.5px; }
.a-hero h1 em { font-style:normal; position:relative; white-space:nowrap; }
.a-hero h1 em::before { content:''; position:absolute; inset:auto -6px 4px -6px; height:0.42em; background:var(--lime); border-radius:5px; transform:rotate(-1deg); z-index:-1; }
.a-sub { font-size:17px; color:var(--muted); line-height:1.65; max-width:560px; margin:20px 0 26px; }
.a-cta { display:inline-flex; align-items:center; gap:8px; }

.a-tiles { display:flex; gap:14px; flex-wrap:wrap; margin:30px 0 8px; }
.a-tile { flex:1; min-width:150px; background:var(--card); border:1px solid var(--line); border-radius:15px; padding:18px 20px; }
.a-tile .t-val { font-family:'Fraunces',Georgia,serif; font-size:24px; font-weight:600; color:var(--pine); letter-spacing:-0.5px; }
.a-tile .t-lbl { font-size:13px; color:var(--muted); margin-top:3px; }

.a-sec { max-width:1080px; margin:0 auto; padding:2.5rem 2rem; }
.a-sec.alt { background:var(--paper2); max-width:none; }
.a-sec.alt .a-sec-inner { max-width:1080px; margin:0 auto; }
.a-sec h2 { font-family:'Fraunces',Georgia,serif; font-size:clamp(24px,3vw,32px); font-weight:600; letter-spacing:-0.8px; margin-bottom:1rem; }
.a-prose p { font-size:16px; color:var(--ink); opacity:0.85; line-height:1.75; max-width:680px; margin-bottom:1rem; }
.a-prose strong { color:var(--pine2); }
.a-note { font-size:12px; color:var(--muted); margin-top:10px; max-width:680px; }

.a-newcard { background:var(--pine); border-radius:18px; padding:2.4rem 2rem; text-align:center; color:#F5F4EC; }
.a-newcard h3 { font-family:'Fraunces',Georgia,serif; font-size:23px; font-weight:600; margin-bottom:0.5rem; color:#F5F4EC; }
.a-newcard p { color:rgba(245,244,236,0.72); font-size:15px; max-width:520px; margin:0 auto 1.4rem; line-height:1.6; }
.a-newcard .btn { background:var(--lime); }

.a-faq { max-width:760px; }
.faq-item { border-bottom:1px solid var(--line); padding:1.1rem 0; }
.faq-q { font-weight:600; font-size:16px; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; gap:1rem; }
.faq-q::after { content:'+'; color:var(--pine2); font-size:20px; line-height:1; }
.faq-item.open .faq-q::after { content:'\2013'; }
.faq-a { font-size:15px; color:var(--muted); line-height:1.7; max-height:0; overflow:hidden; transition:max-height .25s ease, margin .25s ease; }
.faq-item.open .faq-a { max-height:260px; margin-top:0.7rem; }

.nearby { display:flex; gap:10px; flex-wrap:wrap; }
.nearby a { font-size:14px; color:var(--pine); background:var(--card); border:1px solid var(--line); padding:9px 16px; border-radius:50px; text-decoration:none; transition:border-color .15s; }
.nearby a:hover { border-color:var(--pine2); }
.svc-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.svc-row a { font-size:14px; color:var(--ink); background:transparent; border:1px solid var(--line); padding:9px 16px; border-radius:50px; text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
.svc-row a:hover { border-color:var(--pine2); color:var(--pine2); }

/* Area hub / town hub grids */
.hub-hero { max-width:1080px; margin:0 auto; padding:2.5rem 2rem 1rem; }
.hub-grid { max-width:1080px; margin:0 auto; padding:1rem 2rem 3rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.hub-card { background:var(--card); border:1px solid var(--line); border-radius:15px; padding:18px 20px; text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s; }
.hub-card:hover { border-color:var(--pine2); transform:translateY(-2px); }
.hub-card .hc-name { font-family:'Fraunces',Georgia,serif; font-size:19px; font-weight:600; }
.hub-card .hc-meta { font-size:13px; color:var(--muted); margin-top:4px; }
.hub-county { font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--pine2); margin:1.5rem 0 0.25rem; }

@media (max-width:720px){
  .a-sec { padding:2rem 1.25rem; }
  .a-hero { padding:1.5rem 1.25rem 0.5rem; }
  .crumb { padding:1rem 1.25rem 0; }
}