/* Homepage reviews (A147). Froxen's testimonial section sets the look: a centred head, then dark rounded cards with the
   client's initials, name and five stars on top, their words, and what we built for them as lime pills at the bottom.
   Amotax's testimonials set the motion: the cards drift sideways in one endless row (pages/home-reviews.js) that never
   stops (Ryan: no pause button, no stop on hover). Only the outer 9% of each side blurs, fading in gradually toward the
   edge, so every card inside that is fully sharp. With reduced motion the row holds still and scrolls sideways by hand. The words are real Google reviews, quoted exactly; "…" marks where a long review was shortened. */
.hr { position: relative; isolation: isolate; overflow: hidden; }
/* Our two glows, as Froxen lights its reviews: green pooled under the middle card, amber low on the right */
.hr::before, .hr::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; }
.hr::before { left: 50%; bottom: 2%; width: min(1200px, 96vw); height: 720px; translate: -50% 0;
  background: radial-gradient(closest-side, rgb(var(--glow-green, 44 221 127) / .2), rgb(var(--glow-green, 44 221 127) / .07) 55%, transparent); }
.hr::after { right: -10%; bottom: 0; width: 760px; height: 680px;
  background: radial-gradient(closest-side, rgb(var(--glow-amber, 249 164 58) / .13), transparent); }
#reviews .hr-head { flex-direction: column; align-items: center; gap: 0; text-align: center; }   /* gap 0: the eyebrow, name, line and link keep their own spacing (they doubled up with the row gap) */
.hr-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: #fff; font: 600 15px/1.4 Inter, system-ui, sans-serif; }
.hr-link svg { width: 16px; height: 16px; fill: none; stroke: var(--detail); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.hr-link:hover svg { transform: translateX(4px); }
.hr-link:focus-visible { outline: 2px solid var(--detail); outline-offset: 4px; border-radius: 4px; }

/* The row runs the full width of the screen and fades into the page at both ends, like the logo band */
.hr-viewport { position: relative; overflow: hidden; }
.hr-viewport::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, var(--bg, #0a0a0a), transparent 6%, transparent 94%, var(--bg, #0a0a0a)); }
.hr-track { display: flex; width: max-content; }
.hr-row { display: flex; align-items: stretch; gap: 24px; margin: 0; padding: 0 24px 0 0; list-style: none; }
.hr-row > li { display: flex; }
/* The blur lives in two strips over the outer 9% of the row, not on the cards: a 4px blur whose mask fades it in from
   nothing at the inner edge of the strip to full at the screen edge, so a card sharpens gradually as it drifts in. */
.hr-blur { position: absolute; top: 0; bottom: 0; z-index: 1; width: 9%; pointer-events: none;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hr-blur--l { left: 0; -webkit-mask-image: linear-gradient(to left, transparent, #000); mask-image: linear-gradient(to left, transparent, #000); }
.hr-blur--r { right: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000); mask-image: linear-gradient(to right, transparent, #000); }   /* every card as tall as the tallest, pills on one line along the bottom */

.hr-card { display: flex; flex-direction: column; flex: none; width: clamp(320px, 32vw, 460px); margin: 0; padding: clamp(28px, 2.8vw, 40px);
  border: 1px solid #2d2d38; border-radius: 24px; background: #111115; container-type: inline-size;
  /* Froxen's focus: the card passing the middle of the screen takes a Pine edge, fading in and out as it drifts
     (home-reviews.js sets --f from 0 in the middle to 1 half a screen away) */
  box-shadow: inset 0 0 0 1px rgb(62 138 99 / calc(1 - var(--f, 1) * 3)); }
.hr-top { display: flex; align-items: center; gap: 14px; }
.hr-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid #2d2d38; border-radius: 50%;
  background: #19191f; color: #fff; font: 600 14px/1 Inter, system-ui, sans-serif; letter-spacing: .04em; }
.hr-who { min-width: 0; }
.hr-name { display: block; color: #fff; font: 800 26px/1 "Sofia Sans Extra Condensed", "Satoshi", sans-serif; font-style: normal; letter-spacing: .02em; text-transform: uppercase; }
.hr-role { display: block; margin-top: 6px; color: #a3a3ae; font: 500 14px/1.2 Inter, system-ui, sans-serif; }
.hr-stars { display: flex; flex: none; gap: 3px; margin-left: auto; color: var(--detail); }
.hr-stars svg { width: 15px; height: 15px; fill: currentColor; }
/* a narrow card (phones, tablets): the stars drop under the avatar and name so the name never wraps */
@container (max-width: 380px) { .hr-top { flex-wrap: wrap; row-gap: 16px; } .hr-stars { order: 3; flex-basis: 100%; margin-left: 0; } }
.hr-quote { margin: 24px 0 0; }
.hr-quote p { margin: 0; color: #d0d0d6; font: 400 18px/1.6 Inter, system-ui, sans-serif; text-wrap: pretty; }
.hr-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 24px 0 0; border-top: 1px solid #2d2d38; list-style: none; }
.hr-quote { margin-bottom: 28px; }
.hr-tags li { padding: 8px 16px; border: 1px solid rgb(158 240 79 / .35); border-radius: 999px; background: rgb(158 240 79 / .07);
  color: var(--detail); font: 600 12px/1.6 Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }


/* Still: reduced motion or no script. The row scrolls sideways by hand and snaps to each card. */
.hr.is-static .hr-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hr.is-static .hr-viewport::-webkit-scrollbar { display: none; }
.hr.is-static .hr-viewport::after, .hr.is-static .hr-blur { display: none; }
.hr.is-static .hr-row { padding-inline: var(--gutter); }
.hr.is-static .hr-card { scroll-snap-align: start; scroll-margin-inline: var(--gutter); }
.hr.is-static .hr-card { box-shadow: none; }

@media (max-width: 600px) {
  .hr-card { width: min(86vw, 340px); }
  .hr-quote p { font-size: 16px; }
  .hr-name { font-size: 24px; }
  .hr-row { gap: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hr-link svg { transition: none; }
}