/* ============================================================
   CELL 6 — REVIEWS — The Beauty Suite (B-opus lane)
   Winner G4 layout · folds G1 (real HAIR-RESULT thumbnails · service tags) +
   G3 (founder-connector · Hendersonville marker). Porcelain-DOMINANT canvas,
   HONEY accents only, espresso ink — with ONE contained espresso stat seam
   (<40% of the cell height, carries its own sheen so it stays alive). Radius =
   --radius (6px) everywhere. 4 pixel-identical review cards (T2.2). Alive at t0:
   ambient hair-sheen @keyframes (no scroll-gated content). Count-up plays ONCE on
   first paint (cell-6.js). ZERO lens-flare / diagonal streak / sparkle / per-card
   hearts. Shared tokens are the ONLY color source.
   ============================================================ */

/* The mount is data-bg="champagne" (lead-locked). Push the visible ground to
   true PORCELAIN so the cell reads porcelain-DOMINANT per the hard gate; the
   champagne family remains the seam-neighbour warmth. Scoped to this cell only. */
#cell-6 {
  background: var(--marble-50);          /* Porcelain Blonde — the dominant canvas */
  overflow: hidden;                      /* contain ambient sheen bloom — never a page scrollbar */
}

.rv { width: 100%; }

/* ── HEADER ROW — eyebrow + 2-line H2A · founder-connector · one pullquote ─── */
.rv__head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) minmax(0, 0.72fr);
  gap: clamp(1.5rem, 0.8rem + 3vw, 3.5rem);
  align-items: start;
  margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
}

.rv__eyebrow {
  color: var(--eyebrow-ink);              /* honey accent */
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: var(--space-m);
}
/* the honey hairline that trails the eyebrow (winner G4 rhythm) */
.rv__eyebrow-rule {
  flex: 1 1 auto;
  height: 1px;
  max-width: 8rem;
  background: linear-gradient(90deg, var(--terracotta), transparent);
}

.rv__title {
  font-size: var(--step-section);        /* H2A */
  color: var(--stone-700);               /* espresso ink on porcelain */
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.rv__title-em {
  display: block;
  font-style: italic;                    /* Prata italic second phrase — H2A minor */
  color: var(--terracotta);              /* the single honey emphasis */
}

/* founder-connector (borrow G3) — Valla's voice, quiet on porcelain */
.rv__head-connector {
  align-self: center;
  padding-top: 0.35rem;
}
.rv__connector {
  color: var(--text-on-light);           /* espresso body */
  font-size: var(--step-0);
  line-height: 1.56;
  max-width: 34ch;
  margin-bottom: var(--space-s);
}
.rv__connector-sign { display: flex; align-items: center; gap: 0.4rem; }
.rv__connector-name {
  font-family: var(--font-display);      /* Prata italic signature */
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1;
  color: var(--terracotta);
}
.rv__connector-heart { color: var(--terracotta); }

/* one named pullquote (real reviewer, distinct from the 4 cards) */
.rv__pull {
  position: relative;
  align-self: center;
  padding-left: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  border-left: 1px solid var(--hairline-strong);
}
.rv__pull-mark {
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 0.6;
  color: var(--terracotta);
  opacity: 0.55;
  display: block;
  margin-bottom: 0.15rem;
}
.rv__pull-quote {
  font-family: var(--font-display);      /* Prata — Body-A / pullquote */
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);
  line-height: 1.18;
  color: var(--stone-700);
  font-style: italic;
  text-wrap: balance;
}
.rv__pull-em { color: var(--terracotta); }
.rv__pull-cite {
  margin-top: 0.7rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--text-on-light-muted);
}

/* ── REVIEW GRID — 4 pixel-identical cards ─────────────────────── */
.rv__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}

/* the unit — identical frame, 6px radius, fixed internal rhythm (T2.2) */
.rv__card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--cream);              /* open near-white breath card on porcelain */
  border: 1px solid var(--hairline);
  box-shadow: 0 22px 46px -38px rgba(75, 56, 47, 0.5);
  overflow: hidden;
}

/* real HAIR-RESULT thumbnail (never a face-stock avatar) — identical 4:5 frame.
   overflow:VISIBLE so the medallion can straddle the bottom seam; the image +
   sheen are clipped by an inner .rv__thumb-clip instead. */
.rv__thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--marble-100);
}
.rv__thumb-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;                      /* clip the image + drifting sheen */
  background: var(--marble-100);
}
.rv__thumb-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;             /* favour the hair ribboning over shoulders/wall */
  /* barely-perceptible ambient drift — hair looks lit and alive at t0 */
  animation: rv-thumb-drift 13s var(--ease-inout) infinite alternate;
}
/* the landscape weft crop needs a tighter centre so the install row reads */
.rv__thumb-img--weft { object-position: 50% 42%; }
@keyframes rv-thumb-drift {
  from { transform: scale(1.05) translateY(0); }
  to   { transform: scale(1.05) translateY(-1.8%); }
}

/* ambient hair-sheen — a soft specular band drifts diagonally across the real
   hair (feathered bloom, NO hard streak). Staggered per card via --rv-i. */
.rv__thumb-sheen {
  position: absolute;
  inset: -12% -30%;
  pointer-events: none;
  background: linear-gradient(
    102deg,
    transparent 40%,
    rgba(255, 249, 240, 0.14) 49%,
    rgba(255, 249, 240, 0.24) 52%,
    rgba(255, 249, 240, 0.14) 55%,
    transparent 64%
  );
  mix-blend-mode: screen;
  animation: rv-sheen-travel 8s var(--ease-inout) infinite;
  animation-delay: calc(var(--rv-i, 0) * 1.4s);
  will-change: transform, opacity;
}
@keyframes rv-sheen-travel {
  0%   { transform: translateX(-40%) translateY(3%); opacity: 0; }
  18%  { opacity: 1; }
  50%  { opacity: 0.85; }
  82%  { opacity: 1; }
  100% { transform: translateX(40%) translateY(-3%); opacity: 0; }
}

/* honey quote medallion straddling the thumb→quote seam (winner G4).
   Child of .rv__thumb (overflow:visible); anchored to its BOTTOM edge (top:100%)
   so it sits exactly on the seam regardless of quote length (T2.2). */
.rv__medallion {
  position: absolute;
  top: 100%;                             /* the thumb's bottom edge = the seam */
  left: 50%;
  transform: translate(-50%, -50%);      /* centre the disc ON the seam */
  z-index: 3;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--terracotta);         /* honey ground */
  color: #3a2b23;                        /* espresso mark */
  box-shadow: 0 8px 20px -10px rgba(75, 56, 47, 0.7);
}
/* one gentle gloss pass on hover (cell-6.js adds .is-lit) — feathered, not a streak */
.rv__medallion::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 35%, rgba(255, 250, 243, 0.7) 50%, transparent 65%);
  background-size: 240% 100%;
  background-position: 160% 0;
  opacity: 0;
}
.rv__medallion.is-lit::before {
  animation: rv-medallion-gloss 0.55s var(--ease-out) 1 both;
}
@keyframes rv-medallion-gloss {
  0%   { background-position: 160% 0; opacity: 0; }
  25%  { opacity: 1; }
  100% { background-position: -60% 0; opacity: 0; }
}

/* quote body — min-height reserves ~4 lines so ALL four footers align on one
   baseline across the row (T2.2 identical units), despite quote-length variance. */
.rv__quote {
  position: relative;
  font-family: var(--font-display);      /* Prata — italic pullquote per card */
  font-style: italic;
  font-size: clamp(0.98rem, 0.92rem + 0.28vw, 1.12rem);
  line-height: 1.34;
  color: var(--stone-700);
  text-align: center;
  padding: 2.15rem clamp(1rem, 0.7rem + 0.8vw, 1.4rem) 0;
  flex: 1 1 auto;
  min-height: calc(2.15rem + 4 * 1.34em); /* intro pad + 4 quote lines */
}
.rv__quote em { font-style: italic; color: var(--terracotta); }

.rv__foot {
  text-align: center;
  padding: var(--space-m) clamp(1rem, 0.7rem + 0.8vw, 1.4rem) clamp(1.15rem, 0.9rem + 0.7vw, 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.32rem;
}
.rv__rule {
  width: 1.8rem; height: 1.5px;
  background: var(--terracotta);         /* honey underline seam */
  border-radius: 2px;
  margin-bottom: 0.35rem;
  transform-origin: center;
}
.rv__name {
  font-family: var(--font-body);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--stone-700);
  position: relative;
  display: inline-block;
}
/* honey underline-travel beneath the client name (cell-6.js gates hover) */
.rv__name::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.rv__tag {
  font-family: var(--font-body);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  /* muted espresso-taupe, NOT pure honey: at 0.66rem caps the honey #c7a17e only
     hit 2.21:1 on cream (fails AA); --stone-500 gives 4.97:1 and reads as a warm
     neutral service label. The honey accent lives in the rule + medallion. */
  color: var(--stone-500);               /* service tag (borrow G1) — AA-legible */
}
@media (hover: hover) {
  .rv__card:hover .rv__name::after { transform: scaleX(1); }
}

/* ── ONE contained ESPRESSO STAT SEAM (verified markers only) ──────
   Bounded band, NOT a full section. Carries its own sheen so a flat brown fill
   never goes dead (WOW fragility watch). Dark area is only this band (<40%). */
.rv__seam {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(120% 160% at 12% 0%, rgba(199, 161, 126, 0.16), transparent 55%),
    linear-gradient(180deg, var(--ink-850), var(--ink-900));  /* espresso ground, subtle depth */
  box-shadow: 0 30px 60px -44px rgba(58, 43, 35, 0.85);
}
/* slow ambient champagne sheen across the seam — keeps the brown alive at t0 */
.rv__seam-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 42%,
    rgba(214, 198, 176, 0.10) 49%,
    rgba(214, 198, 176, 0.16) 52%,
    rgba(214, 198, 176, 0.10) 55%,
    transparent 62%
  );
  background-size: 240% 100%;
  animation: rv-seam-sheen 11s var(--ease-inout) infinite;
  mix-blend-mode: screen;
  will-change: background-position;
}
@keyframes rv-seam-sheen {
  0%   { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}
.rv__stats {
  position: relative;
  z-index: 1;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}
.rv__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem) var(--space-s);
  text-align: center;
  position: relative;
}
/* fine porcelain-hairline dividers between stats (rules inside espresso) */
.rv__stat:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0; top: 22%;
  height: 56%;
  width: 1px;
  background: var(--hairline-dark);      /* porcelain @0.14 — reads on espresso */
}
.rv__stat-num {
  font-family: var(--font-display);      /* Prata numerals — editorial weight */
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem);
  line-height: 1;
  color: var(--text-on-dark);            /* porcelain-tinted light on espresso */
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: baseline;
}
.rv__stat-num--place {
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.7rem);
  letter-spacing: 0.005em;
}
.rv__stat-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--terracotta);              /* honey stars */
  line-height: 0;
  margin-top: 0.15rem;
}
.rv__stat-label {
  font-family: var(--font-body);
  font-size: var(--step-mini);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
  /* --slate-400 sat at 4.09:1 on #4b382f (borderline for a small cap); --slate-300
     gives 6.6–8.2:1 across the seam gradient — crisp + comfortably AA. */
  color: var(--slate-300);               /* muted porcelain-taupe on espresso — AA-clear */
}

/* ── ambient / reduced-motion safety: everything alive-at-t0, nothing gated ── */
@media (prefers-reduced-motion: reduce) {
  .rv__thumb-img { animation: none; transform: scale(1.05); }
  .rv__thumb-sheen,
  .rv__seam-sheen { animation: none; opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE RECOMPOSITION (≤760px) — per DESIGN mobile plan cell 6:
   carousel/grid → stacked review cards; most outcome-specific quote first
   (Karen S. blonding → Kay H. dark-to-platinum → Ashley L. extensions →
   Carissa G. intimacy); names visible without tap; seam stacks to a 2×2.
   Recomposed, not squished.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* intermediate: 4-up → 2-up so cards never crush before the phone stack */
  .rv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv__head {
    grid-template-columns: 1fr 1fr;
  }
  .rv__pull { grid-column: 1 / -1; border-left: 0; padding-left: 0; padding-top: var(--space-m); border-top: 1px solid var(--hairline-strong); }
  .rv__pull-mark { display: inline; margin-bottom: 0; }
}

@media (max-width: 760px) {
  .rv__head {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .rv__head-connector { padding-top: 0; }
  .rv__connector { max-width: none; }
  .rv__pull { padding-top: var(--space-m); }
  .rv__pull-quote { font-size: clamp(1.35rem, 6vw, 1.7rem); }

  /* stacked review cards — horizontal unit (thumb left, quote right) reads
     tighter on a phone than a tall portrait card, and keeps names visible. */
  .rv__grid {
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }
  /* horizontal card: thumb spans BOTH rows in col 1; quote (row1) + foot (row2)
     stack in col 2. Explicit areas so the name/tag land UNDER the quote, not
     under the thumb (the auto-placement bug the 2-col-4-child grid produced). */
  .rv__card {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "thumb quote"
      "thumb foot";
    align-items: stretch;
  }
  .rv__thumb { grid-area: thumb; aspect-ratio: auto; height: 100%; min-height: 100%; }
  .rv__quote { grid-area: quote; }
  .rv__foot  { grid-area: foot; }
  /* the seam medallion is a vertical-card device; on the horizontal phone card it
     would sit over the hair — drop it, the honey rule + tag carry the accent. */
  .rv__medallion { display: none; }
  .rv__quote {
    text-align: left;
    padding: var(--space-m) var(--space-m) var(--space-xs) calc(var(--space-m) + 0.6rem);
    font-size: 1.02rem;
    min-height: 0;                         /* horizontal cards size to content, no reserved lines */
  }
  .rv__foot {
    text-align: left;
    align-items: flex-start;
    padding: 0 var(--space-m) var(--space-m) calc(var(--space-m) + 0.6rem);
  }
  .rv__rule { margin-bottom: 0.3rem; }

  /* stat seam → 2×2 so numbers stay legible on narrow */
  .rv__stats { grid-template-columns: repeat(2, 1fr); }
  .rv__stat:nth-child(2)::after { display: none; }         /* kill the mid-row vertical rule */
  .rv__stat:nth-child(1)::after,
  .rv__stat:nth-child(3)::after {
    top: auto; bottom: 0; right: 8%;
    height: 1px; width: 84%;
    background: var(--hairline-dark);
  }
  .rv__stat:nth-child(3)::after,
  .rv__stat:nth-child(4)::after { display: none; }
}

/* very narrow (≤390px) — mobile-order the stacked cards by outcome specificity
   and keep the pullquote to ≤3 controlled lines */
@media (max-width: 430px) {
  .rv__card { grid-template-columns: 6rem 1fr; }
  .rv__quote { padding-left: calc(var(--space-s) + 0.5rem); font-size: 0.98rem; }
  .rv__foot { padding-left: calc(var(--space-s) + 0.5rem); }
}