/* =============================================================
   HERO — headline + photo-strip visual.
   ============================================================= */
.hero{position:relative;padding:70px 0 90px;overflow:hidden}
.hero-glow{position:absolute;top:-160px;right:-120px;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--gold) 40%,transparent) 0%, transparent 62%);
  filter:blur(20px);z-index:0;pointer-events:none}

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}

.hero h1{font-size:clamp(40px,6.4vw,74px);line-height:.98}
.hero h1 .hl{position:relative;color:var(--gold-2);font-style:italic;white-space:nowrap}
.hero h1 .hl svg{position:absolute;left:0;right:0;bottom:-14px;width:100%;height:20px}
.hero .lead{font-size:19px;color:var(--ink-2);max-width:34ch;margin:22px 0 30px}

.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

.trust-row{display:flex;align-items:center;gap:22px;margin-top:34px;flex-wrap:wrap}
.trust-row .stars{color:var(--gold);font-size:17px;letter-spacing:2px}
.trust-row b{font-weight:800;font-size:20px}
.trust-sep{width:1px;height:34px;background:var(--line)}
.mini{font-size:13px;color:var(--ink-3);line-height:1.3}
.trust-row .trust-sep:last-child{display:none}

/* Google rating (real stars, partial fill via --pct) */
.google-rating{display:flex;flex-direction:column;gap:3px;text-decoration:none}
.g-stars{position:relative;display:inline-block;font-size:16px;line-height:1;letter-spacing:2px}
.g-bg{color:rgba(28,21,18,.16)}
.g-fg{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;width:var(--pct);color:var(--gold)}
:root[data-theme="dark"] .g-bg{color:rgba(255,255,255,.2)}
.google-rating:hover .mini{color:var(--ink)}
.google-rating .mini b{color:var(--ink);font-size:14px}

/* Small text mentions next to the stars (hero.notes) */
.trust-note{display:flex;align-items:center;gap:8px;max-width:190px;
  font-size:13px;font-weight:600;color:var(--ink-2);line-height:1.25}
.trust-note svg{color:var(--gold-2);flex:none}

/* Photo strip */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:420px}
.strip{width:216px;background:#fff;padding:12px 12px 46px;border-radius:8px;
  box-shadow:0 30px 60px -20px rgba(28,21,18,.5), 0 4px 0 rgba(0,0,0,.04);
  transform:rotate(-6deg);position:relative;z-index:2}
/* square frames — the strip videos are portrait phone clips, so a square
   crop shows far more of them than a wide 4:3 frame (less "zoomed in") */
.strip .frame{aspect-ratio:1/1;border-radius:3px;margin-bottom:8px;overflow:hidden;background:#111}
.strip .frame img{width:100%;height:100%;object-fit:cover}
.strip .frame video{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.strip .frame-pink{background:linear-gradient(135deg,#e0567e,#b83f8a)}
.strip .cap{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-weight:800;font-size:12px;
  letter-spacing:.14em;color:#241322;text-transform:uppercase}

.booth-float{position:absolute;right:2%;bottom:-6%;width:230px;transform:rotate(4deg);z-index:1;
  filter:drop-shadow(0 26px 40px rgba(28,21,18,.35))}
.flash-dot{position:absolute;left:8%;top:6%;width:74px;height:74px;border-radius:50%;background:var(--pink);z-index:0;
  filter:blur(2px);opacity:.9;box-shadow:0 0 0 10px color-mix(in srgb,var(--pink) 24%,transparent)}

@media (max-width:820px){
  .hero{padding:44px 0 60px}
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .hero-visual{min-height:340px;margin-top:10px}
  .booth-float{width:150px}
}
@media (max-width:400px){
  .strip{width:180px}
  .booth-float{width:120px}
}