/* home.css — homepage only (linked from index.html). The site-wide motion (hero entrance, scroll reveals,
   CTA shine, count-ups) lives in chrome.css + script.js; this file holds the home-only pieces:
   the "Boaters Say It Best" Google reviews band (built 1:1 to the "Boaters Say It Best Reviews" comp,
   2026-11-04; comp px / 1.414 = CSS px at 1536) and the rotating "Trusted by Boaters" card. home.js drives both. */

[data-g-controls][hidden],[data-gr-nav][hidden],.gr-arrow[hidden]{display:none!important;}

/* small touches */
.stat-icon{transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.stat-item:hover .stat-icon{transform:translateY(-3px) rotate(-8deg);}
.results-soon svg{animation:hm-bob 2.8s ease-in-out infinite;}
@keyframes hm-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}

/* ---------- "Boaters Say It Best" Google reviews band ---------- */
.g-reviews{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#F2F7FD 0%,#F7FAFE 55%,#F4F8FD 100%);
  padding:52px 0 52px;
}
.gr-bg{
  position:absolute;top:0;right:0;z-index:-1;
  width:min(843px,60vw);height:auto;aspect-ratio:1192/294;object-fit:cover;object-position:right top;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%),linear-gradient(180deg,#000 58%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0,#000 34%),linear-gradient(180deg,#000 58%,transparent 100%);
          mask-composite:intersect;
  pointer-events:none;
}
.gr-wave{position:absolute;left:0;right:0;bottom:0;z-index:-1;width:100%;height:116px;display:block;pointer-events:none;}
.gr-inner{max-width:1536px;margin-inline:auto;}
.gr-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:20px 40px;padding-inline:clamp(20px,4.75vw,96px);}
.gr-copy{min-width:0;}
.gr-eyebrow{display:flex;align-items:center;gap:15px;font-family:var(--font-head);font-weight:700;font-size:.8125rem;letter-spacing:.3em;color:#1A80CF;}
.gr-eyebrow i{display:block;width:45px;height:2px;border-radius:2px;background:linear-gradient(90deg,#1C94DC,#3CC3F2);}
.g-reviews h2{
  font-family:var(--font-head);font-style:italic;font-weight:800;
  font-size:clamp(2.125rem,3.6vw,3.45rem);line-height:1.04;letter-spacing:-.02em;
  margin:15px 0 2px;color:var(--navy);
}
.gr-accent{
  background:linear-gradient(95deg,#0A72CF 0%,#1BA7EA 55%,#2ACBF2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.08em; /* keep the italic period inside the clip */
}
.gr-copy p{margin:0;font-size:1.1875rem;line-height:1.45;color:#5B6676;}

.g-score{
  display:inline-flex;align-items:center;gap:14px;flex-shrink:0;
  margin-top:36px;padding:14px 26px 14px 22px;min-height:76px;
  background:rgba(255,255,255,.93);border:1px solid rgba(255,255,255,.9);border-radius:22px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 18px 40px -20px rgba(0,38,75,.45),0 2px 6px rgba(0,38,75,.06);
  transition:transform .25s ease,box-shadow .25s ease;
}
.g-score:hover{transform:translateY(-2px);box-shadow:0 24px 46px -20px rgba(0,38,75,.5),0 2px 6px rgba(0,38,75,.06);}
.g-score-logo{display:block;flex-shrink:0;width:42px;height:42px;}
.g-score-num{font-family:var(--font-head);font-weight:800;font-size:2.875rem;line-height:1;letter-spacing:-.02em;color:var(--navy);font-variant-numeric:tabular-nums;min-width:2.05ch;}
.g-score-div{width:1.5px;height:40px;background:#C9D3DE;margin:0 4px;}
.g-score-meta{display:flex;flex-direction:column;gap:5px;}
.g-score-stars{color:#F5B400;font-size:1.25rem;letter-spacing:3px;line-height:1;}
.g-score-meta small{font-size:1.0625rem;font-weight:500;color:var(--navy);white-space:nowrap;}

/* carousel */
.gr-carousel{position:relative;margin-top:42px;padding-inline:clamp(16px,5.5vw,85px) clamp(16px,5.1vw,78px);}
.gr-viewport{overflow:hidden;padding:10px 0 30px;margin:-10px 0 -30px;touch-action:pan-y;}
.gr-track{display:flex;gap:11px;will-change:transform;transition:transform .7s cubic-bezier(.22,.8,.24,1);}
.gr-track.is-dragging{transition:none;cursor:grabbing;}
.gr-card{
  flex:0 0 var(--gr-card,266px);min-width:0;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid rgba(0,38,75,.07);border-radius:16px;
  padding:12px 15px 10px 19px;
  box-shadow:0 12px 26px -18px rgba(0,38,75,.45),0 1px 2px rgba(0,38,75,.05);
  transition:transform .3s ease,box-shadow .3s ease;
  user-select:none;
}
.gr-card:hover{transform:translateY(-4px);box-shadow:0 22px 36px -22px rgba(0,38,75,.55),0 1px 2px rgba(0,38,75,.05);}
.gr-card-top{display:flex;align-items:center;gap:16px;}
.gr-avatar{
  width:41px;height:41px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.38),transparent 62%),var(--a,#1A73E8);
  color:#fff;font-family:var(--font-body);font-weight:500;font-size:1.25rem;
}
.gr-who{display:flex;flex-direction:column;flex:1;min-width:0;gap:1px;}
.gr-who strong{font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gr-who small{font-size:.84375rem;color:#5D6B7B;}
.gr-g{display:block;flex-shrink:0;width:22px;height:22px;align-self:flex-start;margin-top:6px;}
.gr-stars{margin-top:7px;color:#F5B400;font-size:.9375rem;letter-spacing:2px;line-height:1;}
.gr-text{
  margin:9px 0 0;font-size:1.03125rem;line-height:1.25;color:#1D2633;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.gr-arrow{
  position:absolute;top:50%;z-index:2;width:42px;height:42px;margin-top:-21px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:#fff;color:var(--navy);border:1px solid rgba(0,38,75,.08);
  box-shadow:0 8px 20px -10px rgba(0,38,75,.45);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.gr-arrow:hover{transform:scale(1.08);box-shadow:0 12px 24px -10px rgba(0,38,75,.5);}
.gr-prev{left:clamp(4px,1.4vw,21px);}
.gr-next{right:clamp(4px,1.25vw,19px);}

.gr-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin-top:22px;min-height:22px;}
.gr-nav .gr-pause{justify-self:start;}
.gr-dots{grid-column:2;display:flex;align-items:center;gap:15px;}
.gr-dot{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:#AAB8C6;cursor:pointer;transition:background .3s ease,transform .3s ease;}
.gr-dot[aria-current="true"]{background:#22B5EC;transform:scale(1.27);}
.gr-dot:focus-visible{outline-offset:4px;}
.gr-pause{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;padding:0;border:1px solid #C9D3DE;background:#fff;color:#5D6B7B;cursor:pointer;}
.gr-pause:hover{color:var(--navy);border-color:#9FB0C2;}
.g-play-icon{display:none;}
[aria-pressed="true"] .g-pause-icon{display:none;}
[aria-pressed="true"] .g-play-icon{display:inline;}

.gr-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px;margin-top:17px;padding-inline:20px;}
.gr-read{min-height:50px;padding:0 30px 0 40px;gap:16px;font-size:1.125rem;}
.gr-write{
  display:inline-flex;align-items:center;gap:14px;min-height:50px;padding:0 30px 0 26px;
  border-radius:999px;border:1.5px solid #B8CCE0;background:rgba(255,255,255,.72);
  font-family:var(--font-head);font-weight:700;font-size:1.125rem;color:var(--navy);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.gr-write:hover{background:#fff;border-color:#8FB0D0;transform:translateY(-2px);}
.gr-write-g{display:block;width:26px;height:26px;flex-shrink:0;}

@media (max-width:900px){
  .g-score{margin-top:0;}
  .gr-bg{width:90vw;opacity:.55;}
}
@media (max-width:640px){
  .g-reviews{padding:40px 0 44px;}
  .gr-eyebrow{font-size:.75rem;gap:12px;}
  .gr-eyebrow i{width:32px;}
  .gr-copy p{font-size:1.0625rem;}
  .g-score{padding:12px 18px 12px 14px;gap:10px;min-height:0;border-radius:18px;}
  .g-score-logo{width:34px;height:34px;}
  .g-score-num{font-size:2.25rem;}
  .g-score-div{height:32px;}
  .g-score-meta small{font-size:.9375rem;}
  .gr-carousel{margin-top:22px;}
  .gr-arrow{display:none;}
  .gr-actions{gap:12px;}
  .gr-read,.gr-write{font-size:1rem;min-height:48px;}
  .gr-read{padding:0 24px 0 28px;}
  .gr-write{padding:0 26px 0 22px;}
}

/* ---------- rotating testimonial card ---------- */
.tc-quote{position:relative;transition:opacity .28s ease,transform .28s ease;}
.tc-quote.is-out{opacity:0;transform:translateY(10px);}
.testimonial-card .carousel-controls{gap:14px;}
.testimonial-card .tc-pause{width:34px;height:34px;flex-shrink:0;cursor:pointer;background:none;}
.tc-progress{flex:1;min-width:60px;height:4px;border-radius:4px;background:#DCE7F0;overflow:hidden;}
.tc-progress span{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--icon-blue));transform:scaleX(0);transform-origin:left center;}
.tc-progress.run span{animation:tc-fill var(--tc-dur,6s) linear forwards;}
.testimonial-card:hover .tc-progress span,.testimonial-card:focus-within .tc-progress span,
.testimonial-card.is-paused .tc-progress span,.testimonial-card.is-off .tc-progress span{animation-play-state:paused;}
@keyframes tc-fill{to{transform:scaleX(1);}}

@media (prefers-reduced-motion:reduce){
  .results-soon svg{animation:none;}
  .gr-track{transition:none;}
}