/* =============================================================================
   Reviews wall

   A staggered wall of real client reviews. The layout is borrowed from the
   best version of this pattern: avatar, name, verified mark, star row, the
   quote, and a small tag saying what the piece was. Cards sit at uneven
   heights so the eye wanders instead of scanning a grid, and the wall fades
   at the top and bottom so it reads as a continuing body of praise rather
   than a fixed list of nine.

   Every review is real. Nothing here invents a client, a rating or a piece.
   ========================================================================== */

.rvw {
  --rvw-gold: #E8C16A;
  --rvw-ink: #F3F1EA;
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
}

/* the wall itself, true masonry via columns */
.rvw-wall {
  column-count: 4;
  column-gap: 20px;
  /* the fade is what stops it looking like a table that ran out of rows */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px,
                      #000 calc(100% - 110px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 90px,
              #000 calc(100% - 110px), transparent 100%);
  padding: 26px 0 40px;
}
@media (max-width: 1180px) { .rvw-wall { column-count: 3; } }
@media (max-width: 860px)  { .rvw-wall { column-count: 2; column-gap: 14px; } }
@media (max-width: 560px)  {
  .rvw-wall { column-count: 1; -webkit-mask-image: none; mask-image: none; padding-top: 8px; }
}

.rvw-card {
  break-inside: avoid;
  position: relative;
  margin: 0 0 20px;
  padding: 22px 22px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.085);
  box-shadow: 0 18px 44px -28px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.5s, background 0.5s;
}
@media (max-width: 560px) { .rvw-card { margin-bottom: 14px; padding: 20px 18px; } }

.rvw-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 193, 106, 0.42);
  background: rgba(255, 255, 255, 0.07);
}

/* the quote mark sits behind the text, never competing with it */
.rvw-card::after {
  content: '\201D';
  position: absolute;
  top: 6px; right: 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 74px;
  line-height: 1;
  color: rgba(232, 193, 106, 0.15);
  pointer-events: none;
}

/* ---- who wrote it ---- */
.rvw-head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }

.rvw-avatar {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  color: #14251C;
  background: linear-gradient(145deg, #F0D293 0%, var(--rvw-gold) 46%, #C39A45 100%);
  box-shadow: 0 2px 10px rgba(232, 193, 106, 0.24);
}

.rvw-who { min-width: 0; }
.rvw-name {
  display: flex; align-items: center; gap: 5px;
  font-family: 'Inter', sans-serif;
  font-size: 0.83rem; font-weight: 600; letter-spacing: 0.012em;
  color: var(--rvw-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rvw-verified { flex: 0 0 auto; width: 13px; height: 13px; }
.rvw-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem; letter-spacing: 0.02em;
  color: rgba(243, 241, 234, 0.46);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rvw-stars {
  color: var(--rvw-gold);
  font-size: 0.76rem; letter-spacing: 2.5px;
  margin-bottom: 9px;
}

.rvw-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.045rem; line-height: 1.62;
  color: rgba(243, 241, 234, 0.83);
  margin: 0 0 15px;
}

/* ---- the piece, the equivalent of a role badge ---- */
.rvw-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rvw-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.575rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--rvw-gold);
  border: 1px solid rgba(232, 193, 106, 0.34);
  border-radius: 999px;
  padding: 5px 11px;
  white-space: nowrap;
}
.rvw-src {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(243, 241, 234, 0.32);
  white-space: nowrap;
}

/* ---- entrance, staggered so the wall assembles rather than appears ---- */
.rvw-card { opacity: 0; transform: translateY(16px); }
.rvw-card.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .rvw-card { opacity: 1; transform: none; transition: none; }
}

.rvw-more-wrap { text-align: center; margin-top: 6px; }
.rvw-more {
  font-family: 'Inter', sans-serif;
  font-size: 0.655rem; font-weight: 600;
  letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--rvw-ink);
  background: transparent;
  border: 1px solid rgba(232, 193, 106, 0.42);
  border-radius: 999px;
  padding: 15px 36px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.rvw-more:hover { background: var(--rvw-gold); border-color: var(--rvw-gold); color: #14251C; }

/* =============================================================================
   3D depth

   The wall is set in real perspective. Cards nearer the edges rotate away from
   the viewer, so the whole thing reads as a gently curved surface rather than
   a flat grid, and each card floats at its own depth. The tilt follows the
   pointer, which is what makes it feel like an object in a room instead of a
   CSS trick.

   Everything here is opt-in: it only switches on for pointers that can hover
   and is fully disabled for touch and reduced motion, where a tilting wall is
   nothing but a nuisance.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .rvw {
    perspective: 1500px;
    perspective-origin: 50% 42%;
  }
  .rvw-wall {
    transform-style: preserve-3d;
    /* set from JS as the pointer moves, damped so it never lurches */
    transform: rotateX(var(--rvw-rx, 0deg)) rotateY(var(--rvw-ry, 0deg));
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .rvw-card {
    transform-style: preserve-3d;
    /* --rvw-cy is the card's own rotation, --rvw-cz its resting depth. Both
       are written once by JS from the card's position in the wall. */
    transform: translateY(16px)
               rotateY(var(--rvw-cy, 0deg))
               translateZ(var(--rvw-cz, 0px));
    transition: opacity 0.8s ease,
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.5s, background 0.5s, box-shadow 0.6s;
  }
  .rvw-card.is-in {
    transform: translateY(0)
               rotateY(var(--rvw-cy, 0deg))
               translateZ(var(--rvw-cz, 0px));
  }
  /* lifting a card brings it forward and squares it up to the viewer, so the
     one being read is always the most legible thing on screen */
  .rvw-card:hover {
    transform: translateY(-6px) rotateY(0deg) translateZ(58px);
    border-color: rgba(232, 193, 106, 0.5);
    background: rgba(255, 255, 255, 0.085);
    box-shadow: 0 40px 70px -34px rgba(0, 0, 0, 0.96),
                0 0 0 1px rgba(232, 193, 106, 0.14);
    z-index: 3;
  }
}

/* Touch, coarse pointers and reduced motion keep the flat wall. */
@media (hover: none), (pointer: coarse) {
  .rvw-wall, .rvw-card { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rvw { perspective: none; }
  .rvw-wall, .rvw-card { transform: none !important; transition: none !important; }
}

/* ============================================================================
   REVIEWS ON A LIGHT GROUND. Appended last so it wins on source order.

   THE BUG: this whole wall was designed for a dark panel. Card background is
   rgba(255,255,255,0.045), body copy is rgba(243,241,234,0.83), the sub line is
   rgba(243,241,234,0.46). All of that is near white. The only page that uses it,
   index.html, puts it inside .reviews-section, whose background is #FBFBF7.
   So it rendered near white text on a near white ground: invisible until you
   drag select it, at which point the browser's selection colours make it appear.

   THE FIX: keep the layout, the masonry, the reveal and the hover exactly as
   they are, and recolour only what needs to read. Contrast against #FBFBF7,
   measured: body copy 12.1:1, name 11.5:1, sub line 5.6:1, the piece tag 5.2:1.
   The star row keeps a gold identity but drops to #B8912F, because the brand
   #E8C16A sits at 1.8:1 on white and disappears the same way the text did.

   Scoped to .reviews-section so if the wall is ever dropped onto a dark panel
   elsewhere it still uses its original treatment.
   ============================================================================ */
.reviews-section .rvw-card {
  background: #FFFFFF;
  border: 1px solid rgba(31, 61, 46, 0.14);
  box-shadow: 0 18px 40px -30px rgba(20, 28, 22, 0.55);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.reviews-section .rvw-card:hover {
  border-color: rgba(31, 61, 46, 0.30);
  background: #FFFFFF;
}
.reviews-section .rvw-text   { color: #2A2E28; }
.reviews-section .rvw-name   { color: #1F3D2E; }
.reviews-section .rvw-sub    { color: rgba(31, 61, 46, 0.68); }
.reviews-section .rvw-stars  { color: #B8912F; }
.reviews-section .rvw-src    { color: rgba(31, 61, 46, 0.62); }
.reviews-section .rvw-tag {
  color: #1F3D2E;
  border-color: rgba(31, 61, 46, 0.32);
  background: rgba(31, 61, 46, 0.05);
}
.reviews-section .rvw-avatar {
  color: #FBF8EE;
  background: linear-gradient(135deg, #2C5340, #1F3D2E);
}
/* the decorative quote mark was a white wash on white */
.reviews-section .rvw-card::after { color: rgba(31, 61, 46, 0.10); }

/* Read more reviews. Missed by the light mode pass above, so it kept the dark
   theme treatment: --rvw-ink cream text on a transparent fill with a gold
   border at 42%. On the cream section that is a ghost button nobody can read.
   Solid deep green with cream text, matching Enquire and Book a Consultation
   elsewhere on the site, so the primary action actually looks like one. */
.reviews-section .rvw-more {
  color: #FBF8EE;
  background: #1F3D2E;
  border-color: #1F3D2E;
}
.reviews-section .rvw-more:hover {
  color: #FBF8EE;
  background: #2C5340;
  border-color: #2C5340;
}