/* ============================================================================
   reviews.css — Google reviews section
   ----------------------------------------------------------------------------
   Rating header, one featured review beside a healed-result photo, then two
   rows of review cards drifting in opposite directions (pause on hover,
   static and scrollable under reduced motion). Uses the site's own type:
   Big Shoulders Display + Archivo, gold accent from tokens.css.
   html is 62.5% (1rem = 10px), so sizes are px.
   ========================================================================== */

.er-reviews {
  --er-gold: var(--c-accent, #8C5F54);
  --er-gold-l: var(--c-accent-light, #B9877A);
  --er-paper: #3B2E29;
  --er-soft: rgb(59 46 41 / 0.7);
  --er-line: rgb(59 46 41 / 0.12);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 140px 0 120px;
  background: #F1E6DF;
  color: var(--er-paper);
  font-family: var(--font-text);
  font-size: 16px;
}
.er-reviews *, .er-reviews *::before, .er-reviews *::after { box-sizing: border-box; }
:where(.er-reviews) :where(p, h2, ul, li, figure, blockquote) { margin: 0; padding: 0; text-transform: none; letter-spacing: normal; }
/* warm glow behind the feature */
.er-reviews::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 60%;
  top: 46%;
  width: min(1200px, 110vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgb(140 95 84 / 0.12) 0%, rgb(140 95 84 / 0.03) 40%, transparent 66%);
}

.er-head, .er-feature { width: min(1280px, calc(100% - 2 * clamp(20px, 5vw, 80px))); margin: 0 auto; }

/* ---- header ---- */
.er-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px 60px; }
.er-kicker { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--er-gold-l); }
.er-kicker::before { content: ""; width: 34px; height: 1px; background: var(--er-gold); }
.er-title { margin-top: 18px; font-family: var(--font-display); font-weight: 200; font-size: clamp(64px, 9vw, 150px); line-height: .86; text-transform: uppercase; letter-spacing: .005em; }
.er-title__a { color: var(--er-gold-l); }
.er-title__b { color: var(--er-paper); padding-left: .55em; }

.er-score { display: flex; align-items: center; gap: 26px; padding: 26px 30px; border: 1px solid var(--er-line); background: linear-gradient(150deg, rgb(255 255 255 / 0.65), rgb(255 255 255 / 0.49)); }
.er-score__num { font-family: var(--font-display); font-weight: 200; font-size: 104px; line-height: .8; color: var(--er-paper); }
.er-score__meta { display: flex; flex-direction: column; gap: 10px; }
.er-score__meta p { font-size: 14px; color: var(--er-soft); max-width: 22ch; line-height: 1.5; }
.er-score__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.er-score__links a { font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--er-paper); text-decoration: none; border-bottom: 1px solid var(--er-gold); padding-bottom: 3px; }
.er-score__links a:hover { color: var(--er-gold-l); }

.er-stars { display: inline-flex; gap: 3px; color: var(--er-gold-l); }
.er-stars svg { width: 15px; height: 15px; fill: currentColor; }

/* ---- featured review ---- */
.er-feature { margin-top: 90px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.er-feature__media { position: relative; }
.er-feature__media::before { content: ""; position: absolute; inset: -18px 18px 18px -18px; border: 1px solid rgb(140 95 84 / 0.45); pointer-events: none; }
.er-feature__media img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.92); }
.er-feature__tag { position: absolute; left: 18px; bottom: 18px; padding: 8px 14px; background: rgba(5, 5, 5, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.er-feature__quote { position: relative; }
.er-mark { position: absolute; left: -.06em; top: -.42em; font-family: Georgia, 'Times New Roman', serif; font-size: 220px; line-height: 1; color: var(--er-gold); opacity: .32; pointer-events: none; }
.er-feature__lead { position: relative; font-family: var(--font-display); font-weight: 200; font-size: clamp(40px, 4.2vw, 72px); line-height: 1; text-transform: uppercase; letter-spacing: .005em; color: var(--er-paper); }
.er-feature__more { margin-top: 26px; max-width: 46ch; font-size: 17px; line-height: 1.7; color: var(--er-soft); }
.er-feature__who { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--er-line); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--er-soft); }
.er-feature__who b { color: var(--er-paper); font-weight: 500; }

/* ---- drifting review rows ---- */
.er-row { margin-top: 80px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.er-row + .er-row { margin-top: 22px; }
.er-track { list-style: none; display: flex; gap: 22px; width: max-content; padding: 4px 0; }
.er-card {
  flex: 0 0 auto;
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px 30px 26px;
  border: 1px solid var(--er-line);
  background: linear-gradient(160deg, rgb(255 255 255 / 0.67), rgb(255 255 255 / 0.498));
  transition: border-color .4s, transform .4s;
}
.er-card:hover { border-color: rgb(140 95 84 / 0.55); transform: translateY(-4px); }
.er-card__text { flex: 1; font-size: 16px; line-height: 1.65; color: rgb(59 46 41 / 0.88); }
.er-who { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--er-line); }
.er-avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--er-gold); font-family: var(--font-display); font-weight: 200; font-size: 22px; color: var(--er-gold-l); }
.er-who > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.er-who b { font-weight: 500; font-size: 15px; color: var(--er-paper); }
.er-who small { font-size: 12px; letter-spacing: .06em; color: var(--er-soft); }
.er-src { margin-left: auto; font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--er-soft); }

@media (prefers-reduced-motion: no-preference) {
  .er-row--a .er-track { animation: er-left 70s linear infinite; }
  .er-row--b .er-track { animation: er-right 64s linear infinite; }
  .er-row:hover .er-track, .er-row:focus-within .er-track { animation-play-state: paused; }
  @keyframes er-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes er-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
}
@media (prefers-reduced-motion: reduce) {
  .er-row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding: 0 clamp(20px, 5vw, 80px); }
  .er-track > [aria-hidden="true"] { display: none; }
}

/* ---- tablet / phone ---- */
@media (max-width: 1024px) {
  .er-feature { grid-template-columns: 1fr; }
  .er-feature__media { max-width: 520px; }
}
@media (max-width: 767px) {
  .er-reviews { padding: 96px 0 90px; }
  .er-title__b { padding-left: .3em; }
  .er-score { width: 100%; gap: 20px; padding: 22px; }
  .er-score__num { font-size: 84px; }
  .er-feature { margin-top: 64px; gap: 44px; }
  .er-feature__media::before { inset: -12px 12px 12px -12px; }
  .er-mark { font-size: 150px; }
  .er-feature__lead { font-size: clamp(36px, 10vw, 48px); }
  .er-feature__more { font-size: 16px; }
  .er-row { margin-top: 60px; }
  .er-card { width: 300px; padding: 24px 22px 22px; }
  .er-card__text { font-size: 15px; }
}

/* square collage in the featured review (client photo, Oct 2026) */
.er-feature__media img.er-feature__img--square { aspect-ratio: 1 / 1; }