/* Client reviews, Spotlight style (Shair, 20 Oct): slow moving row of review cards in the site's palette.
   Card: white, offset gold shadow, two rounded corners. Stars: outline draws itself, fills with gold, twinkles.
   Quote text is one plain weight (no bold line). Classes prefixed sp- (avoid site classes like .pop, .front, .rv). */
#testimonials{overflow-x:clip;--sp-ready:1}
#testimonials .sp-lead{margin:14px auto 0;max-width:52ch;color:var(--muted);font-size:18px}
.sp-view{margin-top:40px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);padding-block:16px 34px}
.sp-track{display:flex;align-items:stretch;gap:30px;width:max-content;animation:spMove 170s linear infinite}
.sp-view:hover .sp-track,.sp-view:focus-within .sp-track,.sp-view.sp-hold .sp-track{animation-play-state:paused}
@keyframes spMove{to{transform:translateX(calc(-50% - 15px))}}
.sp-card{position:relative;flex:none;width:min(410px,80vw);margin:0;display:flex;flex-direction:column;gap:18px;background:#fff;border:1px solid var(--soft-line,rgba(14,35,71,.1));border-radius:6px 32px 6px 32px;padding:28px 28px 22px;
  box-shadow:12px 12px 0 -1px #f4efe1,12px 12px 0 0 #e2cf9c;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sp-card:hover{transform:translate(-3px,-3px)}
.sp-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sp-stars{display:inline-flex;gap:6px}
/* Stars (perf pass 21 Oct): an outline star with a gold star on top. The gold layer fades in once when the row is first
   seen, then each star twinkles. Only opacity and transform animate, on the svg boxes, so it stays on the compositor. */
.sp-st{position:relative;display:block;width:20px;height:20px}
.sp-st svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sp-st .o path{fill:none;stroke:#bf9d47;stroke-width:1.6;stroke-linejoin:round}
.sp-st .f path{fill:#bf9d47;stroke:#bf9d47;stroke-width:1.6;stroke-linejoin:round}
.sp-view:not(.sp-in) .sp-st .f{opacity:0;transform:scale(.6)}
.sp-in .sp-st .f{animation:spFill .7s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(.25s + var(--i) * .12s)}
.sp-in .sp-st{animation:spTwinkle 5.2s ease-in-out infinite;animation-delay:calc(2s + var(--i) * .12s)}
@keyframes spFill{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes spTwinkle{0%,82%{transform:none}88%{transform:scale(1.25) rotate(12deg)}94%,100%{transform:none}}
.sp-ver{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text,#8a6210)}
.sp-ver i{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;background:var(--gold-text,#8a6210);color:#fff}
.sp-q{margin:0;font-size:17px;line-height:1.6;letter-spacing:-.005em;font-weight:400;color:var(--ink,#0e2347)}
.sp-chips{display:flex;flex-wrap:wrap;gap:6px}
.sp-chips span{font-size:12.5px;font-weight:500;color:var(--muted,#56627c);border:1px solid var(--soft-line,rgba(14,35,71,.12));border-radius:99px;padding:4px 11px}
.sp-by{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--soft-line,rgba(14,35,71,.1))}
.sp-av{width:42px;height:42px;border-radius:50%;background:var(--ink,#0e2347);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;letter-spacing:.02em;flex:none}
.sp-by b{display:block;font-size:15px;color:var(--ink,#0e2347)}
.sp-by b em{font-style:normal;color:var(--gold-text,#8a6210)}
.sp-by small{display:block;font-size:13px;color:var(--muted,#56627c)}
/* Same size cards (22 Oct). reviews.js adds .sp-fixed; a long quote is clamped to the lines that fit and shows
   "Read more", which opens the full review in a dialog. Without JS the cards keep their natural height. */
.sp-fixed .sp-card{height:430px}
.sp-fixed .sp-q{flex:1 1 auto;min-height:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--cl,999);line-clamp:var(--cl,999)}
.sp-fixed .sp-chips{margin-top:auto}
.sp-more{display:none;align-self:flex-start;margin:-10px 0 0;padding:0;border:0;background:none;font:inherit;font-size:14.5px;font-weight:600;color:var(--gold-text,#8a6210);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sp-more:hover{color:var(--ink,#0e2347)}
.sp-clip .sp-more{display:inline-block}
.sp-dlg{border:0;padding:0;background:transparent;max-width:min(560px,calc(100vw - 32px));width:100%;overflow:visible}
.sp-dlg::backdrop{background:rgba(14,35,71,.45)}
.sp-dlg .sp-card{width:auto;height:auto;margin:0 12px 12px 0;cursor:auto}
.sp-dlg .sp-card:hover{transform:none}
.sp-dlg .sp-q{display:block;overflow:visible;-webkit-line-clamp:none}
.sp-dlg .sp-chips{margin-top:0}
.sp-x{position:absolute;top:12px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--soft-line,rgba(14,35,71,.12));background:#fff;color:var(--ink,#0e2347);font-size:22px;line-height:1;cursor:pointer}
.sp-x:hover{background:#f4efe1}
.sp-dlg .sp-top{padding-right:44px}
@media (max-width:767px){
  .sp-view{-webkit-mask-image:none;mask-image:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-inline:max(16px,env(safe-area-inset-left,0px));scroll-padding-inline:max(16px,env(safe-area-inset-left,0px))}
  .sp-view::-webkit-scrollbar{display:none}
  .sp-track{animation:none;gap:16px;padding-right:16px}
  .sp-track>[aria-hidden="true"]{display:none}
  .sp-card{scroll-snap-align:start;width:min(340px,84vw)}
  .sp-card:hover{transform:none}
}
@media (max-width:734px){.sp-fixed .sp-card{height:420px}.sp-card{padding:24px 22px 20px;box-shadow:8px 8px 0 -1px #f4efe1,8px 8px 0 0 #e2cf9c}.sp-q{font-size:16px}.sp-track{gap:22px}}
@media (prefers-reduced-motion:reduce){
  .sp-view{-webkit-mask-image:none;mask-image:none;overflow:visible}
  .sp-track{animation:none;width:auto;max-width:1320px;margin-inline:auto;flex-wrap:wrap;justify-content:center;align-items:flex-start}
  /* Static grid (22 Oct fix): each card takes its own natural height so short quotes leave no empty block, and chips sit right under the quote. */
  .sp-fixed .sp-chips{margin-top:0}
  .sp-track>[aria-hidden="true"]{display:none}
  .sp-in .sp-st,.sp-in .sp-st .f,.sp-card{animation:none;transition:none}
  .sp-fixed .sp-card{height:auto}.sp-fixed .sp-q{-webkit-line-clamp:none;display:block}.sp-more{display:none!important}
  .sp-view:not(.sp-in) .sp-st .f{opacity:1;transform:none}
}

/* Read more: 96x44 button box; negative margins keep the text where it was (22 Oct critique) */
.sp-clip .sp-more{display:inline-flex;align-items:center;justify-content:flex-start;box-sizing:border-box;min-width:96px;min-height:44px;padding:0 8px;margin:-21.5px 0 -11.5px -8px}