/* Multi-page additions. main.css belongs to the shell; page-only rules live here. */
.page-hero { min-height: 0; padding: 72px var(--pad) 56px; } /* clears the floating hamburger (48px at top 6px); no pill on these pages */
.page-hero .hero-inner { gap: 16px; }
.page-hero .lead { max-width: 36ch; }
.page-hero h1 { max-width: 16ch; }
@media (min-width: 900px) {
  .page-hero { padding: 140px var(--pad) 96px; }
}

.cta-band .band-head { margin-bottom: 28px; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 599px) { .cta-row { display: grid; } .cta-row .btn { width: 100%; } }

/* Card buttons sit on one line across a row: pushed to the card bottom and centred. */
.card div:has(> .btn) { display: flex; flex-direction: column; }
.card div > .btn { margin-top: auto; align-self: center; min-width: min(100%, 220px); }
.card div > :nth-last-child(2) { margin-bottom: 12px; }
/* A three-card row fills the width instead of leaving a fourth column empty. */
@media (min-width: 900px) { .cards:has(> .card:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } }

/* Home: Google reviews (data from src/data/reviews.json via tools/reviews.mjs). */
.reviews .band-head { margin-bottom: 32px; }
.rv-score { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-size: var(--fs-16); }
.rv-score b { font: 500 var(--fs-36)/1 var(--font-display); }
.rv-score span:not(.rv-stars):not(.sr) { color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.rv-stars { color: #f5b301; letter-spacing: 2px; font-size: var(--fs-20); line-height: 1; }
.rv-wrap { position: relative; }
.rv-track { list-style: none; margin: 0; padding: 4px 4px 16px; display: grid; grid-auto-flow: column; grid-auto-columns: min(85%, 360px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain; }
.rv-card { scroll-snap-align: start; display: grid; align-content: start; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--coal); }
.rv-top { display: flex; align-items: center; gap: 12px; }
.rv-top > div { display: grid; gap: 4px; min-width: 0; flex: 1; }
.rv-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--steel); color: var(--brass); font: 600 var(--fs-16)/1 var(--font-body); }
.rv-name { color: var(--ink); font-size: var(--fs-16); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-when { color: var(--muted); font-size: var(--fs-12); }
.rv-g { flex: none; width: 20px; height: 20px; }
.rv-text { color: var(--muted); font-size: var(--fs-16); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rv-text p + p { margin-top: 8px; }
.rv-card.is-open .rv-text { -webkit-line-clamp: unset; display: block; }
.rv-more { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--red-hot); font: 600 var(--fs-16)/1 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rv-nav { display: none; }
@media (min-width: 1100px) {
  .rv-track { grid-auto-columns: calc((100% - 32px) / 3); }
  .rv-nav { display: grid; place-items: center; position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px; border: 1px solid var(--line); border-radius: 50%; background: var(--black); color: var(--ink); font-size: var(--fs-28); line-height: 1; cursor: pointer; }
  .rv-prev { left: -64px; }
  .rv-next { right: -64px; }
}
@media (min-width: 1100px) and (max-width: 1199px) { .rv-nav { display: none; } }
.rv-foot { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: var(--fs-16); }
.rv-foot a { color: var(--ink); margin-left: 8px; }
@media (max-width: 699px) { .rv-foot { flex-direction: column; gap: 4px; } .rv-foot a { margin-left: 0; } }