/* R10b — seven uniform testimonial cards; one card system, two surfaces (Google comment / studio editorial). */
.reviews-r3 {
  padding: 5.5rem 0;
  background: var(--color-sand-warm);
  isolation: isolate;
  overflow-x: clip; /* clip, not hidden: keeps the sticky stage working */
}
.reviews-r3-heading { max-width: 660px; margin: 0 auto 2.6rem; }
.reviews-r3-heading .section-lead { font-size: 1rem; }
.reviews-r3-notice {
  margin: 0 auto 2.2rem;
  padding: .8rem 1.1rem;
  max-width: 760px;
  border: 1px dashed var(--color-rose-gold-dark);
  border-radius: 10px;
  color: var(--color-terracotta-dark);
  font-size: .85rem;
  line-height: 1.6;
  background: var(--color-sand-bg);
}

/* Static list (reduced motion / no JS motion): same cards, one column. */
.reviews-r3-stage {
  --card-h: auto;
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.reviews-r3-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 2.1rem 2.4rem 1.4rem;
  border-radius: 22px;
  overflow-wrap: break-word;
}
/* Depth shading for cards pushed back in the stack (driven by --shade from JS). */
.reviews-r3-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #241612;
  opacity: var(--shade, 0);
  pointer-events: none;
}

/* Sequential 3D stack: every card sticks at the same spot; the next one rises over it. */
.reviews-r3.is-stack .reviews-r3-stage {
  --card-h: clamp(320px, calc(100vh - 300px), 430px);
  --stick: max(150px, calc(50vh - var(--card-h) / 2 + 40px));
  --gap: 34vh;
  display: block;
  padding-bottom: 4vh; /* with padding, the last card's margin stays inside the content box, so every sticky card's margin box fits */
}
/* Hold: room inside the stack for the final card to stay as protagonist before the stack leaves. */
.reviews-r3.is-stack .reviews-r3-stage::after { content: ""; display: block; height: 30vh; }
@supports (height: 100svh) {
  .reviews-r3.is-stack .reviews-r3-stage {
    --card-h: clamp(320px, calc(100svh - 300px), 430px);
    --stick: max(150px, calc(50svh - var(--card-h) / 2 + 40px));
  }
}
.reviews-r3.is-stack .reviews-r3-card {
  position: sticky;
  top: var(--stick);
  height: var(--card-h);
  margin-bottom: var(--gap);
  transform-origin: 50% 0;
  will-change: transform;
  box-shadow: 0 -10px 30px rgba(74, 35, 26, .10), 0 24px 50px rgba(74, 35, 26, .14);
}

.reviews-r3-card-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; }
.reviews-r3-card-count { margin-left: auto; align-self: flex-start; white-space: nowrap; flex-shrink: 0; font-size: .75rem; font-weight: 600; letter-spacing: .1em; opacity: .7; font-variant-numeric: tabular-nums; }
.reviews-r3-avatar {
  width: 48px; height: 48px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1;
}
.reviews-r3-avatar--photo { object-fit: cover; object-position: 50% 40%; }
.reviews-r3-card-labels { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.reviews-r3-card-label { font-style: normal; font-weight: 600; font-size: .92rem; }
.reviews-r3-card-sub { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: .15rem; }
.reviews-r3-quote { margin: 0; flex: 1 1 auto; }
.reviews-r3-card-text { font-family: var(--font-serif); font-size: clamp(1.45rem, 2.3vw, 1.95rem); line-height: 1.38; }
.reviews-r3-card-foot { margin-top: 1rem; padding-top: .75rem; min-height: 44px; display: flex; align-items: center; border-top: 1px solid; }
.reviews-r3-card-note { font-size: .75rem; font-style: italic; letter-spacing: .02em; }

/* Google comment: light surface, quote mark, link to the source. */
.reviews-r3-card--review {
  border: 1px solid rgba(158, 107, 90, .4);
  background: var(--color-sand-bg);
  color: var(--color-espresso);
  box-shadow: 0 14px 34px rgba(74, 35, 26, .08);
}
.reviews-r3-card--review .reviews-r3-avatar { border: 1px solid var(--color-rose-gold); background: var(--color-sand-warm); color: var(--color-rose-gold-dark); }
.reviews-r3-card--review .reviews-r3-card-label { color: var(--color-espresso); }
.reviews-r3-card--review .reviews-r3-card-sub { color: var(--color-terracotta-light); }
.reviews-r3-card--review .reviews-r3-quote::before {
  content: "“";
  display: block;
  height: 1.6rem;
  color: var(--color-rose-gold);
  font-family: var(--font-serif);
  font-size: 2.8rem;
  line-height: 1;
}
.reviews-r3-card--review .reviews-r3-card-foot { border-color: rgba(158, 107, 90, .22); }
.reviews-r3-source {
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--color-terracotta);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Studio editorial: deep brand surface, italic text, no quote mark, author or rating. */
.reviews-r3-card--studio {
  border: 1px solid rgba(74, 35, 26, .6);
  background: var(--color-terracotta);
  background-image: radial-gradient(120% 90% at 100% 0%, rgba(197, 143, 124, .3) 0%, rgba(197, 143, 124, 0) 60%);
  color: var(--color-sand-bg);
  box-shadow: 0 14px 34px rgba(74, 35, 26, .16);
}
.reviews-r3-card--studio .reviews-r3-avatar--brand { border: 1px solid rgba(228, 190, 176, .6); color: var(--color-rose-gold-light); background: rgba(36, 22, 18, .25); }
.reviews-r3-card--studio .reviews-r3-avatar--photo { box-shadow: 0 0 0 2px rgba(228, 190, 176, .7); }
.reviews-r3-card--studio .reviews-r3-card-label { color: var(--color-sand-bg); }
.reviews-r3-card--studio .reviews-r3-card-sub { color: var(--color-rose-gold-light); }
.reviews-r3-studio-text { flex: 1 1 auto; font-style: italic; font-size: clamp(1.5rem, 2.4vw, 2rem); padding-top: 1.5rem; }
.reviews-r3-card--studio .reviews-r3-card-foot { border-color: rgba(228, 190, 176, .28); color: rgba(250, 246, 242, .82); }

.reviews-r3-footnote {
  margin: 2.2rem auto 0;
  max-width: 760px;
  text-align: center;
  color: var(--color-espresso-muted);
  font-size: .82rem;
  line-height: 1.6;
}
.reviews-r3-profile-link {
  display: inline-flex; align-items: center;
  min-height: 44px;
  margin-left: .35rem;
  color: var(--color-terracotta);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.reviews-r3-source:focus-visible,
.reviews-r3-profile-link:focus-visible { outline: 3px solid var(--color-terracotta); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 767px) {
  .reviews-r3 { padding: 4rem 0; }
  .reviews-r3-heading { margin-bottom: 1.9rem; }
  .reviews-r3-stage { gap: 1rem; }
  .reviews-r3-card { padding: 1.4rem 1.35rem 1rem; border-radius: 18px; }
  .reviews-r3-card-head { gap: .65rem; }
  .reviews-r3-card-label { font-size: .84rem; }
  .reviews-r3-card-sub { font-size: .62rem; letter-spacing: .06em; }
  .reviews-r3-card-text { font-size: 1.32rem; }
  .reviews-r3-studio-text { font-size: 1.36rem; padding-top: 1rem; }
  .reviews-r3-notice { font-size: .8rem; margin-bottom: 1.6rem; }
  .reviews-r3.is-stack .reviews-r3-stage {
    --card-h: clamp(300px, calc(100vh - 250px), 400px);
    --stick: max(118px, calc(50vh - var(--card-h) / 2 + 36px));
  }
  @supports (height: 100svh) {
    .reviews-r3.is-stack .reviews-r3-stage {
      --card-h: clamp(300px, calc(100svh - 250px), 400px);
      --stick: max(118px, calc(50svh - var(--card-h) / 2 + 36px));
    }
  }
  .reviews-r3.is-stack .reviews-r3-stage { --gap: 30vh; }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-r3-card { transform: none !important; opacity: 1 !important; }
  .reviews-r3-card::after { opacity: 0 !important; }
}