/* Maxima Hair at 555 — Ratings / Reviews page (ratings.css)
   Rebuilt: the .rv-* component styles were missing from every stylesheet,
   leaving this page as unstyled text. Matches the site palette/type system
   (site.css tokens: --gold, --charcoal, --cream, --warm-white, --mid, --fd, --fb). */

/* ---------- Hero rating (inside the dark .page-hero) ---------- */
/* The ratings hero title ("Trusted by clients across Berwyn and the Main Line")
   is longer than other page-hero titles, so the global clamp(44px,5vw,80px)
   rendered it oversized and wrapping awkwardly. Scale it down on this page —
   fits one line on desktop, wraps gracefully on smaller screens. */
.page-hero h1{font-size:clamp(28px,3.1vw,46px);line-height:1.12;text-wrap:balance}

.rv-hero-rating{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:30px}
.rv-hero-rating-score{font-family:var(--fd);font-size:clamp(40px,5vw,58px);font-weight:300;line-height:1;color:var(--gold-pale)}
.rv-hero-stars{display:inline-flex;gap:4px;font-size:20px;line-height:1}
.rv-hero-rating-cap{flex-basis:100%;font-size:12px;letter-spacing:.05em;color:rgba(255,255,255,.6);margin-top:2px}

/* partial-fill star technique: a muted base star with a clipped gold overlay (width set inline) */
.rv-swrap{position:relative;display:inline-block;white-space:nowrap}
.rv-sbase{color:rgba(255,255,255,.22)}
.rv-sfill{position:absolute;left:0;top:0;overflow:hidden;color:#E6B43C;white-space:nowrap;pointer-events:none}

/* ---------- Hero meta pills ---------- */
.hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.meta-pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.92);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 16px}
.meta-pill>span{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--gold)}
.meta-pill--google>span{background:#4285F4}
.meta-pill--yelp>span{background:#d32323}
.meta-pill--vagaro>span{background:#5b3fa8}
.meta-pill--all>span{background:var(--gold)}

/* ---------- Sections / containers ---------- */
.rv-section{padding:clamp(56px,8vw,88px) clamp(20px,5vw,72px)}
.rv-section--themes{background:linear-gradient(180deg,var(--warm-white) 0%,var(--cream) 100%);border-bottom:1px solid rgba(24,22,15,.06)}
.rv-section-tight{padding-top:clamp(36px,5vw,56px)}
.rv-wrap{max-width:1120px;margin:0 auto}
.rv-surface{background:linear-gradient(160deg,#fff 0%,var(--cream) 100%);border:1px solid rgba(24,22,15,.08);border-radius:18px;padding:clamp(32px,5vw,56px);box-shadow:0 20px 56px rgba(24,22,15,.06)}

/* ---------- Section heading ---------- */
.rv-wrap .section-head{text-align:center;max-width:620px;margin:0 auto clamp(32px,4vw,44px)}
.rv-wrap .section-head h2{font-family:var(--fd);font-size:clamp(28px,3.6vw,46px);font-weight:300;line-height:1.12;color:var(--charcoal);margin-bottom:12px}
.rv-wrap .section-head h2 em{font-style:italic;color:var(--gold-dim)}
.rv-wrap .section-head p{font-size:15px;color:var(--mid);line-height:1.7}

/* ---------- Card grids ---------- */
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.rv-grid--snap{grid-template-columns:repeat(4,1fr)}

/* ---------- Cards ---------- */
.rv-card{position:relative;background:var(--warm-white);border:1px solid rgba(24,22,15,.09);border-radius:14px;padding:28px 26px;box-shadow:0 2px 10px rgba(24,22,15,.04);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.rv-card:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(24,22,15,.08)}
.rv-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.rv-card--tone-google::before,.rv-card--plat-google::before{background:#4285F4}
.rv-card--tone-yelp::before,.rv-card--plat-yelp::before{background:#d32323}
.rv-card--tone-mix::before,.rv-card--plat-all::before{background:var(--gold)}
.rv-card--plat-vagaro::before{background:#5b3fa8}
.rv-card h3{font-family:var(--fd);font-size:clamp(19px,1.9vw,23px);font-weight:400;line-height:1.25;color:var(--charcoal);margin-bottom:10px}
.rv-card p{font-size:14px;color:var(--mid);line-height:1.7}

/* source label on the theme cards */
.rv-source{display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:12px}
.rv-source--g{color:#3367d6}
.rv-source--y{color:#c11a1a}
.rv-source--m{color:var(--gold-dim)}

/* ---------- Platform snapshot card internals ---------- */
.rv-plat-rating{display:flex;align-items:center;gap:10px;margin:4px 0 14px}
.rv-star-row{display:inline-flex;gap:3px;font-size:15px;line-height:1}
.rv-star-row .rv-sbase{color:rgba(24,22,15,.16)}
.rv-star-row .rv-sfill{color:#E0A52B}
.rv-star-row--yelp .rv-sfill{color:#d32323}
.rv-rating-num{font-family:var(--fd);font-size:24px;font-weight:400;color:var(--charcoal);line-height:1}
.rv-rating-num--yelp{color:var(--charcoal)}
.rv-mini{margin-top:14px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--light);font-weight:500}

/* ---------- CTA band ---------- */
.rv-cta{background:radial-gradient(ellipse 90% 70% at 50% 0%,rgba(196,169,107,.12),transparent 52%),linear-gradient(172deg,#242018 0%,#18160f 55%,#12100c 100%);padding:clamp(48px,7vw,72px) clamp(20px,5vw,72px)}
.rv-cta-inner{max-width:1000px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.rv-cta-inner h3{font-family:var(--fd);font-size:clamp(24px,3vw,36px);font-weight:300;line-height:1.1;color:var(--warm-white);margin-bottom:8px}
.rv-cta-inner p{font-size:14px;color:rgba(255,255,255,.62);line-height:1.65;max-width:50ch}
.rv-cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.btn-rv-google,.btn-rv-yelp,.btn-rv-vagaro{display:inline-flex;align-items:center;justify-content:center;font-family:var(--fb);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:13px 22px;border-radius:10px;border:1px solid rgba(255,255,255,.32);color:var(--warm-white);transition:background .2s,border-color .2s,color .2s}
.btn-rv-google:hover{background:#4285F4;border-color:#4285F4;color:#fff}
.btn-rv-yelp:hover{background:#d32323;border-color:#d32323;color:#fff}
.btn-rv-vagaro:hover{background:var(--gold);border-color:var(--gold);color:var(--charcoal)}

/* ---------- Responsive ---------- */
@media(max-width:900px){.rv-grid--snap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.rv-grid,.rv-grid--snap{grid-template-columns:1fr}.rv-cta-inner{flex-direction:column;align-items:flex-start}.rv-section{padding-left:clamp(20px,5vw,32px);padding-right:clamp(20px,5vw,32px)}}