/* ==========================================================================
   S-10 REVIEWS, Financial X-Ray rebuild (2026-09-13)
   Navy ground. One Google review at a time on a CURVED SCREEN: the panel's
   top edge arcs out and its bottom edge arcs in (a cylinder seen from just
   above), a gold bezel with an inner line, the navy face lit at the centre
   so the middle comes forward, the tree mark faint behind the words. Name
   top centre, a centred gold rule, the review, then the stars and the
   Google mark at the bottom middle. TESTI-03 carousel, adapted: slides
   stack in one cell and crossfade. Tokens only.
   ========================================================================== */
.lp-reviews {
  position: relative; z-index: 0; overflow: clip;
  background: var(--lp-navy); color: var(--c-white);
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  padding-inline: clamp(21px, 2vw + 7px, 42px);
  margin-block: 0; border-top: 0;
  font-family: var(--font-body);
  text-align: center;
}
.lp-reviews div, .lp-reviews figure, .lp-reviews blockquote { border-top: 0; margin-block: 0; padding-top: 0; }
.lp-reviews p, .lp-reviews h2, .lp-reviews ul, .lp-reviews blockquote { margin-block: 0; }
.lp-reviews__inner { max-width: 900px; margin-inline: auto; }

/* the eyebrow: the Google mark and five stars, then the lead line */
.lp-reviews__eyebrow {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin-bottom: 14px;
}
.lp-reviews__eyebrow .lp-rv__g { width: 28px; height: 28px; }
.lp-rv__stars { height: 20px; width: auto; fill: var(--lp-gold); }
.lp-rv__stars--lead { height: 22px; }
.lp-reviews__lead {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.625rem);
  line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance;
  color: var(--c-white); max-width: 22ch; margin-inline: auto;
}

/* ---- the carousel: one cell, the slides stacked, the active one shown ---- */
.lp-reviews .lp-reviews__carousel {
  position: relative;
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  padding-inline: 63px;               /* room for the arrows either side */
  outline: none;
}
.lp-reviews .lp-reviews__carousel:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 6px; border-radius: 14px; }
.lp-reviews .lp-reviews__track {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
  perspective: 1400px;
}
.lp-reviews .lp-reviews__slide {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transform: scale(0.97);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, visibility 0s linear 0.6s;
}
.lp-reviews .lp-reviews__slide.is-active {
  opacity: 1; visibility: visible;
  transform: scale(1);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, visibility 0s;
}

/* ---- the curved screen ------------------------------------------------- */
.lp-reviews .lp-rv {   /* .lp-reviews figure zeroes padding-top (the bare-reset guard); this wins on specificity */
  position: relative; isolation: isolate;
  margin: 0; padding: clamp(42px, 3vw + 24px, 63px) clamp(28px, 3vw + 10px, 63px) clamp(49px, 3vw + 30px, 70px);
  min-height: 420px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  /* the tilt that sells the curve: the face leans back a touch under perspective */
  transform: rotateX(2deg);
  transform-origin: 50% 100%;
}
.lp-rv__frame {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
  overflow: visible;
  filter: drop-shadow(0 21px 42px color-mix(in srgb, var(--arbor-navy-deep) 80%, transparent)) drop-shadow(0 0 28px color-mix(in srgb, var(--lp-gold) 22%, transparent));
}
.lp-rv__face {
  /* lit at the centre, darker toward both sides: the middle comes forward */
  fill: url(#lp-rv-face);
}
.lp-rv__bezel { fill: none; stroke: url(#lp-rv-gold); stroke-width: 3; vector-effect: non-scaling-stroke; }
.lp-rv__inner { fill: none; stroke: color-mix(in srgb, var(--lp-gold) 42%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* the mark behind the words, gold and faint */
.lp-rv__wm {
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; width: min(300px, 46%); height: auto;
  transform: translate(-50%, -50%);
  fill: var(--lp-gold); fill-opacity: 0.07;
  stroke: var(--lp-gold); stroke-opacity: 0.16; stroke-width: 1px;
}
.lp-rv__wm path { vector-effect: non-scaling-stroke; }

.lp-rv__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); line-height: 1.15; letter-spacing: -0.01em;
  color: var(--lp-gold);
}
.lp-rv__rule { display: block; width: 42px; height: 2px; border-radius: 2px; background: var(--lp-gold); }
.lp-reviews .lp-rv__text {
  max-width: 58ch; margin-inline: auto; padding: 0;
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.1875rem); line-height: 1.6;
  color: color-mix(in srgb, var(--c-white) 92%, var(--lp-gold));
  text-wrap: pretty;
}
.lp-rv__text p { margin: 0; }
.lp-rv__src { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 7px; }
.lp-rv__src .lp-rv__g { width: 24px; height: 24px; }

/* ---- the controls ------------------------------------------------------ */
.lp-reviews .lp-reviews__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 49px; height: 49px; border-radius: 50%; padding: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--lp-gold);
  border: 2px solid var(--lp-gold);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s ease-out, color 0.3s ease-out, border-color 0.3s ease-out;
}
.lp-reviews .lp-reviews__btn svg { width: 24px; height: 24px; max-width: none; flex: 0 0 auto; }
.lp-reviews .ag-carousel-prev { left: 0; }
.lp-reviews .ag-carousel-next { right: 0; }
.lp-reviews .lp-reviews__btn:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 3px; }
@media (hover: hover) {
  .lp-reviews .lp-reviews__btn:hover { background: var(--lp-gold); color: var(--lp-navy); border-color: var(--lp-gold); }
}
.lp-reviews .lp-reviews__dots {
  display: flex; justify-content: center; gap: 4px; margin-top: 21px;
  /* the marks stand apart from the star sky (Quinten 2026-09-14): a quiet
     navy pill behind the row, a gold hairline, brighter marks */
  width: fit-content; margin-inline: auto; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--arbor-navy-deep) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--lp-gold) 26%, transparent);
  position: relative; z-index: 1;
}
.lp-reviews .ag-carousel-dot {
  width: 49px; height: 49px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: inline-grid; place-items: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* the dots are the tree mark (Quinten 2026-09-13): faint gold, the current one full gold and larger */
.lp-reviews .ag-carousel-dot::before {
  content: ""; width: 16px; height: 16px;
  background-color: color-mix(in srgb, var(--lp-gold) 62%, transparent);
  -webkit-mask: url(_img/mark.svg) center / contain no-repeat;
          mask: url(_img/mark.svg) center / contain no-repeat;
  transition: background-color 0.3s ease-out, transform 0.3s ease-out;
}
.lp-reviews .ag-carousel-dot--active::before { background-color: var(--lp-gold-light); transform: scale(1.4); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--lp-gold) 90%, transparent)); }
.lp-reviews .ag-carousel-dot:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: -6px; border-radius: 50%; }
.ag-carousel-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 900px) {
  .lp-reviews .lp-reviews__carousel { padding-inline: 0; padding-bottom: 70px; }
  .lp-reviews .lp-reviews__btn { top: auto; bottom: 0; transform: none; }
  .lp-reviews .ag-carousel-prev { left: calc(50% - 63px); }
  .lp-reviews .ag-carousel-next { right: calc(50% - 63px); }
  /* the pill shrinks to the phone and stays centred (Quinten 2026-09-14: it
     sat off-centre and ran off the right edge). Seven 49px marks are 389px
     with the pill's own padding, wider than any phone; the marks keep the
     49px tap HEIGHT and take a width the row can afford: 30px at 350
     (254px pill), 37px at 430 (291px). The 49px prev/next stay primary. */
  .lp-reviews .lp-reviews__dots { margin-top: 14px; gap: 2px; padding-inline: 8px; max-width: 100%; }
  .lp-reviews .ag-carousel-dot { width: clamp(30px, 8.6vw, 49px); }
  .lp-reviews .lp-rv { min-height: 0; padding-top: 63px; padding-bottom: 70px; }   /* the arcs scale with the taller panel: keep the name and the stars clear of them */
}
@media (prefers-reduced-motion: reduce) {
  .lp-reviews .lp-reviews__slide, .lp-reviews .lp-reviews__slide.is-active { transition: none; }
  .lp-reviews .lp-reviews__btn, .lp-reviews .ag-carousel-dot::before { transition: none; }
}

/* the two gradients the panel paints with (defined once in the section's
   hidden <defs>; the stops take tokens through these classes) */
.lp-rv__s-edge { stop-color: var(--arbor-navy-mid); }
.lp-rv__s-mid  { stop-color: color-mix(in srgb, var(--arbor-navy-mid) 72%, var(--lp-gold)); }
.lp-rv__s-gl   { stop-color: var(--lp-gold-light); }
.lp-rv__s-g    { stop-color: var(--lp-gold); }
.lp-rv__s-gd   { stop-color: var(--lp-gold-dark); }

/* the foot of the section: the band below glows up into it (review.css) */
/* (the wide bloom at the foot was removed 2026-09-13: the band's own edge carries the light) */
.lp-reviews__inner { position: relative; z-index: 1; }

/* the last slide: the Google mark, five stars, the gold link out (2026-09-13) */
.lp-reviews .lp-rv--more { gap: 21px; justify-content: center; }
.lp-rv__gbig .lp-rv__g { width: 56px; height: 56px; }
.lp-rv__stars--big { height: 28px; }
.lp-reviews .lp-rv__more { margin-top: 7px; }

/* ---- life on the ground (2026-09-13): a sky of small gold stars, the
   review's own motif, each twinkling on its own phase behind the panel ---- */
.lp-reviews__sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lp-reviews__star {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s);
  fill: var(--lp-gold); opacity: 0.1;
  animation: lp-star var(--d) ease-in-out var(--o) infinite;
}
@keyframes lp-star {
  0%, 100% { opacity: 0.08; transform: scale(0.85); }
  50%      { opacity: 0.42; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) { .lp-reviews__star { animation: none; opacity: 0.18; } }
/* shooting stars (2026-09-14): a short light-gold streak that crosses a
   corner of the sky in 2.1s and rests for the remainder of its cycle */
.lp-reviews__shoot {
  position: absolute; left: var(--x); top: var(--y); width: 220px; height: 2.5px;
  transform-origin: 0 50%; transform: rotate(var(--a)) translateX(-40px);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lp-gold-light) 95%, transparent) 60%, var(--c-white));
  border-radius: 2px; opacity: 0;
  animation: lp-shoot var(--d) linear var(--o) infinite;
}
@keyframes lp-shoot {
  0%   { opacity: 0; transform: rotate(var(--a)) translateX(-40px) scaleX(0.4); }
  2%   { opacity: 1; }
  10%  { opacity: 0; transform: rotate(var(--a)) translateX(520px) scaleX(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(520px) scaleX(1); }
}
@media (prefers-reduced-motion: reduce) { .lp-reviews__shoot { display: none; } }

/* under 900 the frame swaps to the shallow pair (PANEL_M): the arcs cut far
   less into the padding, so nothing ever touches the inner line; 7px of air
   is kept between the content and that line (Quinten 2026-09-14) */
.lp-rv__set--m { display: none; }
@media (max-width: 900px) {
  .lp-rv__set--d { display: none; }
  .lp-rv__set--m { display: initial; }
  .lp-reviews .lp-rv { padding-top: 42px; padding-bottom: 70px; padding-inline: 24px; }
  .lp-reviews .lp-rv--more { padding-inline: 16px; }
}