/* ==========================================================================
   S-07 THE REVIEW + S-08 MID-PAGE CTA, Financial X-Ray rebuild (2026-09-13)
   The Tooth Place pair: service cards, then the mid-page CTA strip. Here the
   five review items become cards on paper (the alternation after the navy
   team section), each with an outlined Material icon and the term in the
   display face; then a full-bleed navy band carrying s3_close and the SAME
   gold CTA component as the hero and the sticky bar (hero.css). Left on
   desktop, centred under 900. Tokens only.
   ========================================================================== */
.lp-review {
  position: relative; z-index: 0;
  background: var(--paper); color: var(--arbor-text);
  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: left;
}
/* the checkpoint's bare reset rules section/footer/div ONLY. The first build
   guarded li as well, and that guard (0,1,1) outranked .lp-review__card
   (0,1,0): every card lost its top padding and top border, which is the
   "cut off at the top" Quinten saw on 2026-09-13. Guard the div, and only
   the UA margins on p and ul. */
.lp-review div { border-top: 0; margin-block: 0; padding-top: 0; }
.lp-review p, .lp-review ul { margin-block: 0; }
.lp-review__inner { max-width: 900px; margin-inline: auto; }

/* the lead line, as the section's heading voice */
.lp-review__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(--lp-navy); max-width: 22ch;
}
.lp-review__lead::before {
  content: ""; display: block; width: 42px; height: 3px;
  background: var(--lp-gold); margin-bottom: 14px; border-radius: 3px;
}

/* five cards: three, then two, on the same column rhythm */
.lp-review .lp-review__grid {
  list-style: none; padding: 0;
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 1vw + 7px, 21px);
}
.lp-review__card {
  grid-column: span 2;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--c-white);
  /* a soft ambient shadow instead of a hard 1px line (Quinten 2026-09-13:
     "a little outline on each of them"); the hairline is now a faint ring */
  border: 1px solid color-mix(in srgb, var(--arbor-border) 60%, transparent); border-radius: 14px;
  box-shadow: 0 0 0 0 transparent, 0 7px 21px color-mix(in srgb, var(--lp-navy) 6%, transparent);
  padding: clamp(21px, 1.5vw + 10px, 28px);
  min-height: 190px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 7px;
}
/* The cards are stagger children, and ag-motion's `.reveal-stagger.in-view > *`
   (0,2,0) sits later in the cascade than `.lp-review__card:hover` (0,2,0): it
   owned `transform` AND `transition` (with the 81ms-per-child delay), so the
   first build's hover lift never moved and its shadow never eased. MEASURED
   2026-09-13 (hover transform read as identity). So: the reveal keeps
   `transform` with its stagger; the hover lives in `translate` and `scale`,
   which compose with it, at a specificity that wins the transition list. */
.lp-review .lp-review__grid > .lp-review__card {
  transition:
    opacity var(--duration-medium) var(--ease-settle),
    transform var(--duration-medium) var(--ease-settle),
    translate 0.3s ease-out, scale 0.3s ease-out,
    box-shadow 0.3s ease-out, border-color 0.3s ease-out;
  transition-delay: calc(var(--i, 0) * 81ms), calc(var(--i, 0) * 81ms), 0s, 0s, 0s, 0s;
}
/* the second row: two cards, each spanning three of the six tracks */
.lp-review__card:nth-child(4), .lp-review__card:nth-child(5) { grid-column: span 3; }
/* the icon lives in the card's BACKGROUND: large, faint, top right, and it
   drifts up and brightens on hover (Quinten 2026-09-13) */
.lp-review__ico {
  position: absolute; z-index: -1; top: 14px; right: 14px;
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal; line-height: 1; font-size: clamp(84px, 6vw + 40px, 120px);
  letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48;
  color: var(--lp-gold-dark); opacity: 0.10;
  transition: transform 0.6s ease-out, opacity 0.3s ease-out;
  pointer-events: none;
}
/* the duotone: the same glyph FILLED, fainter, set 5px down-right behind the
   outline, so the icon reads as drawn with depth rather than a single stroke
   (Quinten 2026-09-13, "more detailed, not too basic") */
.lp-review__ico--fill {
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 48;
  color: var(--lp-gold); opacity: 0.07;
  transform: translate(5px, 5px);
}
.lp-review__term {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem); line-height: 1.15; letter-spacing: -0.01em;
  color: var(--lp-navy);
}
.lp-review__desc {
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem); line-height: 1.55;
  color: var(--arbor-text); text-wrap: pretty; max-width: 100%;
}
/* hover: the card lifts and grows with light ALL AROUND it (the first build's
   shadow was offset 14px down, so the top edge never lit and read as cut
   off), the ring turns gold, the watermark icon drifts up-right and wakes */
@media (hover: hover) {
  .lp-review .lp-review__grid > .lp-review__card:hover {
    translate: 0 -6px; scale: 1.02; border-color: var(--lp-gold);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--lp-gold) 40%, transparent),
      0 0 42px color-mix(in srgb, var(--lp-navy) 16%, transparent),
      0 21px 42px color-mix(in srgb, var(--lp-navy) 12%, transparent);
  }
  .lp-review__card:hover .lp-review__ico { transform: translate(6px, -8px) rotate(-6deg) scale(1.08); opacity: 0.22; }
  /* the filled twin parts from the outline as the card wakes: more depth */
  .lp-review__card:hover .lp-review__ico--fill { transform: translate(14px, 0) rotate(-6deg) scale(1.08); opacity: 0.12; }
}
/* LIVE (Quinten 2026-09-14, "make them have live animations on the
   graphics"): each card's glyph pair moves on its own slow loop once the
   grid has revealed. A ligature is one indivisible path, so the motion is
   whole-glyph: the outline breathes, floats or tilts; the filled twin
   orbits, counter-tilts or pulses behind it, so the pair reads as drawn
   with depth in motion. Individual transform properties (translate, scale,
   rotate) so the hover's `transform` still composes on top. House clock:
   4.2s and 7s loops, 2.1s for the pulse, staggered so no two cards beat
   together. Compositor only (transform and opacity). Resting opacity up a
   step (0.10 -> 0.14 outline, 0.07 -> 0.10 fill) so the motion is seen.
   Paused under a modal with the rest of the page; off under reduced motion. */
.lp-review__ico { opacity: 0.14; }
.lp-review__ico--fill { opacity: 0.10; }
@keyframes lp-ico-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@keyframes lp-ico-float   { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes lp-ico-tilt    { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes lp-ico-orbit   { 0% { translate: 0 0; } 25% { translate: 4px -3px; } 50% { translate: 2px 4px; } 75% { translate: -3px 2px; } 100% { translate: 0 0; } }
@keyframes lp-ico-pulse   { 0%, 100% { opacity: 0.10; } 50% { opacity: 0.2; } }
.lp-review__grid.in-view .lp-review__card:nth-child(1) .lp-review__ico { animation: lp-ico-breathe 4.2s ease-in-out infinite; }
.lp-review__grid.in-view .lp-review__card:nth-child(1) .lp-review__ico--fill { animation: lp-ico-orbit 7s ease-in-out infinite; }
.lp-review__grid.in-view .lp-review__card:nth-child(2) .lp-review__ico { animation: lp-ico-float 4.2s ease-in-out 0.7s infinite; }
.lp-review__grid.in-view .lp-review__card:nth-child(2) .lp-review__ico--fill { animation: lp-ico-pulse 2.1s ease-in-out infinite; }
.lp-review__grid.in-view .lp-review__card:nth-child(3) .lp-review__ico { animation: lp-ico-tilt 7s ease-in-out infinite; }
.lp-review__grid.in-view .lp-review__card:nth-child(3) .lp-review__ico--fill { animation: lp-ico-tilt 7s ease-in-out 3.5s infinite; }
.lp-review__grid.in-view .lp-review__card:nth-child(4) .lp-review__ico { animation: lp-ico-float 4.2s ease-in-out 1.4s infinite; }
.lp-review__grid.in-view .lp-review__card:nth-child(4) .lp-review__ico--fill { animation: lp-ico-orbit 7s ease-in-out 2.1s infinite; }
.lp-review__grid.in-view .lp-review__card:nth-child(5) .lp-review__ico { animation: lp-ico-breathe 4.2s ease-in-out 2.1s infinite; }
.lp-review__grid.in-view .lp-review__card:nth-child(5) .lp-review__ico--fill { animation: lp-ico-pulse 2.1s ease-in-out 1.05s infinite; }
body.has-modal .lp-review__ico { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .lp-review__ico { animation: none; } }

/* the corner mark, as the gap has it, but top LEFT and upside down */
.lp-review { overflow: clip; }
.lp-review__wm {
  position: absolute; z-index: 0; pointer-events: none;
  left: -3%; top: -6%;
  width: min(520px, 44%); height: auto;
  transform: rotate(180deg);
  fill: var(--lp-gold); fill-opacity: 0.10;
  stroke: var(--lp-gold-dark); stroke-opacity: 0.42; stroke-width: 1.5px; stroke-linejoin: round;
}
.lp-review__wm path { vector-effect: non-scaling-stroke; }
.lp-review__inner { position: relative; z-index: 1; }
@media (max-width: 900px) { .lp-review__wm { width: 62%; left: -12%; } }

/* ---- S-08: the mid-page CTA band ---------------------------------------
   Full-bleed navy, the closing line in the display face, the gold CTA
   (identical component to the hero's), and a slow gold light that crosses
   the band every 7s, the Tooth Place strip's glare. */
.lp-midcta {
  position: relative; overflow: hidden; z-index: 0;
  background: var(--lp-navy); color: var(--c-white);
  padding-block: clamp(2.5rem, 1.8rem + 2.6vw, 4.5rem);
  padding-inline: clamp(21px, 2vw + 7px, 42px);
  margin-block: 0; border-top: 0;
  font-family: var(--font-body);
}
.lp-midcta div, .lp-midcta p { border-top: 0; margin-block: 0; padding-top: 0; }
/* THE X-RAY (Quinten 2026-09-13, "some type of X-ray graphic effect" on the
   band's flanks). The glare that already crosses the band every 7s is the
   scanner beam: ::before is its soft gold wash, ::after the thin bright core.
   Both run the same 7s ease-in-out so they stay locked. The flanks hold the
   hero's finance glyphs as unexposed film (faint white outlines on navy, a
   radiograph); each one develops bright as the beam passes over it and fades
   back. Delay per glyph is derived from its x across the band (--gx). */
.lp-midcta::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; z-index: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--lp-gold) 16%, transparent), transparent);
  transform: skewX(-14deg);
}
/* the core of the beam: a SOFT brightening, 48px wide, that fades out on
   both sides and at the top and bottom, so there is no distinct line in the
   glare (Quinten 2026-09-14: "a white line in the center of the glare, that
   looks off"; the first build was a 2px white hairline) */
.lp-midcta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -20%; width: 48px; z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--c-white) 22%, transparent) 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
          mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
  transform: skewX(-14deg);
}
/* The scan is ONE sweep, 2.1s, fired when the CTA is hovered, focused or
   tapped (xray.js adds is-scanning, animationend removes it), no loop
   (Quinten 2026-09-13: "when they hit the button or at least hover over it",
   "a bit faster"). The three parts share duration and easing: locked. */
.lp-midcta.is-scanning::before { animation: lp-midcta-glare 2.1s ease-in-out 1; }
.lp-midcta.is-scanning::after { animation: lp-midcta-beam 2.1s ease-in-out 1; }
.lp-midcta.is-scanning .lp-midcta__xray { animation: lp-xray-dev 2.1s ease-in-out 1; }
@keyframes lp-midcta-glare {
  0%   { left: -40%; }
  100% { left: 140%; }
}
@keyframes lp-midcta-beam {
  0%   { left: -20%; }
  100% { left: 160%; }
}
/* One band-wide film layer holds every glyph (x in band %, flanks only). A
   MASK does the developing: the layer is drawn bright, the mask leaves 12%
   showing everywhere except a window that travels with the beam (same 7s
   keyframes and easing as ::before/::after, so the sync is exact by
   construction: the mask is 3 band-widths wide, its window at its centre,
   and mask-position 85% -> -5% carries that centre from -0.2W to 1.6W, the
   beam's own path). A sharp leading edge, a long trailing fade: film. */
.lp-midcta__xray {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* the mask is FOUR band-widths so it never slides off the band: the first
     build's 300% image at -5% left the band's first 10% uncovered at the end
     of the sweep, and no-repeat masks to nothing there, so the left glyphs
     vanished ("masks over the icons", Quinten 2026-09-13). With 400% the
     image spans -2.2W..1.8W at rest and -0.4W..3.6W at the end: covered. */
  -webkit-mask-image: linear-gradient(100deg,
    rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.12) 42.5%, rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0.12) 51.5%, rgba(0, 0, 0, 0.12) 100%);
  mask-image: linear-gradient(100deg,
    rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.12) 42.5%, rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0.12) 51.5%, rgba(0, 0, 0, 0.12) 100%);
  -webkit-mask-size: 400% 100%; mask-size: 400% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 73.333% 0; mask-position: 73.333% 0;
}
/* window centre = 2W - 3W * p: 73.333% puts it at -0.2W, 13.333% at 1.6W,
   the beam's own path (::after runs -20% to 160%) */
@keyframes lp-xray-dev {
  0%   { -webkit-mask-position: 73.333% 0; mask-position: 73.333% 0; }
  100% { -webkit-mask-position: 13.333% 0; mask-position: 13.333% 0; }
}
.lp-xray__g {
  position: absolute; left: var(--x); top: var(--y);
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal; line-height: 1; font-size: var(--s);
  letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48;
  color: var(--c-white);
  text-shadow: 0 0 14px color-mix(in srgb, var(--lp-gold-light) 70%, transparent);
  transform: translate(-50%, -50%) rotate(var(--r));
}
@media (max-width: 1200px) { .lp-midcta__xray { display: none; } }
.lp-midcta__inner {
  position: relative; z-index: 1;
  max-width: 900px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: clamp(21px, 2vw + 7px, 42px);
}
.lp-midcta__line {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2.125rem);
  line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance;
  color: var(--c-white); max-width: 24ch;
}
.lp-midcta__line b { color: var(--lp-gold); font-weight: 600; }
.lp-midcta .ag-button--gold { flex: 0 0 auto; }

/* under 900 the cards keep their rows (Quinten 2026-09-14: "3 or 2 in a row,
   not one column"): the 3 + 2 rhythm holds to 601, then two per row with
   the fifth across both; the lead centres, the cards stay left-set inside */
@media (max-width: 900px) {
  .lp-review { text-align: center; }
  .lp-review__lead { margin-inline: auto; }
  .lp-review__lead::before { margin-inline: auto; }
  .lp-review__card { text-align: left; min-height: 160px; }
  .lp-midcta { text-align: center; }
  .lp-midcta__inner { flex-direction: column; align-items: center; }
  .lp-midcta__line { margin-inline: auto; }
}
@media (max-width: 700px) {   /* two per row from 700 down: a 3-up card under 700 is too narrow for its lines (orphan sweep 2026-09-14) */
  .lp-review .lp-review__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .lp-review__card, .lp-review__card:nth-child(4) { grid-column: auto; padding: 18px 16px; min-height: 150px; }
  .lp-review__card:nth-child(5) { grid-column: 1 / -1; }
  .lp-review__ico { font-size: 72px; top: 10px; right: 10px; }
  .lp-review__term { font-size: 1.0625rem; }
  .lp-review__desc { font-size: 0.875rem; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-review .lp-review__grid > .lp-review__card, .lp-review__ico { transition: none; }
  .lp-midcta.is-scanning::before { animation: none; left: -40%; }
  .lp-midcta.is-scanning::after { animation: none; display: none; }
  .lp-midcta.is-scanning .lp-midcta__xray { animation: none; }
}

/* the second band, under the navy reviews: the same band, a gold hairline
   parts it from the navy above (Quinten 2026-09-13) */
/* (the hairline itself is set below, with its glow) */
/* its top edge GLOWS UP into the reviews section above (Quinten 2026-09-13):
   the hairline carries a soft gold shadow that paints over the section
   before it (a later sibling's shadow is not clipped by that section), and
   reviews.css adds a wider bloom at that section's foot */
/* 2026-09-13 second pass (Quinten: "remove the elongated shade, more on the
   actual strip outline"): the edge itself is the light, a gold hairline that
   brightens to light gold at the centre and fades out at the ends, with a
   tight 10px glow, nothing wider */
.lp-midcta--2 {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent 0%, var(--lp-gold) 22%, var(--lp-gold-light) 50%, var(--lp-gold) 78%, transparent 100%) 1;
  box-shadow: 0 -1px 10px color-mix(in srgb, var(--lp-gold) 42%, transparent);
}