/* Client reviews section outside the Home template (section/reviews.php).
   Rules copied from home.css and scoped under .hp-reviews so nothing leaks
   into inner templates. Home keeps its own copy in home.css. */
.hp-reviews.hp-el-div { padding: 56px clamp(20px,3vw,40px); position: relative; isolation: isolate; }
/* Full-width paper band behind the container, like the inner pages' .in-paper sections. */
.hp-reviews.hp-el-div::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--dd-bg-warm); border-top: 1px solid var(--dd-ink-a08, rgba(15,42,36,.08)); border-bottom: 1px solid var(--dd-ink-a08, rgba(15,42,36,.08)); z-index: -1; }
.hp-reviews .hp-el-p { font-size: 0.8125rem; font-weight: 600; color: var(--dd-green-accent); margin: 0 0 12px; }
.hp-reviews .hp-sechead-h2 { font-weight: 500; font-size: clamp(1.875rem,3vw,3.75rem); line-height: 1; letter-spacing: -.04em; margin: 0 0 clamp(32px,4vw,48px); max-width: 16ch; }
.hp-reviews .hp-g4 { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,250px),1fr)); gap: 12px; }
.hp-reviews .hp-ratingcard { background: var(--dd-green); color: var(--dd-white); border-radius: 10px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 260px; }
.hp-reviews .hp-ratingtop { display: flex; flex-direction: column; gap: 24px; }
.hp-reviews .hp-ratinglabel { font-size: 0.875rem; font-weight: 500; color: var(--dd-green-pale); }
.hp-reviews .hp-ratingnum { font-size: 5.25rem; font-weight: 500; letter-spacing: -.05em; line-height: .9; }
.hp-reviews .hp-ratingstars { color: var(--dd-gold); letter-spacing: 3px; font-size: 1.125rem; margin-top: -14px; }
.hp-reviews .hp-ratingcard-a { color: var(--dd-white); font-size: 0.90625rem; font-weight: 600; text-underline-offset: 4px; }
.hp-reviews .hp-revslider { display: contents; }
.hp-reviews .hp-revslider-span { color: var(--dd-gold); font-size: 0.9375rem; letter-spacing: 2px; }
.hp-reviews .hp-revslider-figure { margin: 0; background: var(--dd-white); border: 1px solid var(--dd-hairline-card); border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.hp-reviews .hp-revslider-blockquote { margin: 0; font-size: 0.96875rem; line-height: 1.6; flex: 1; }
.hp-reviews .hp-revslider-figcaption { font-size: 0.90625rem; font-weight: 600; padding-top: 14px; border-top: 1px solid var(--dd-hairline-card); }
.hp-reviews .hp-revarrows { display: none; gap: 8px; margin-top: 16px; justify-content: center; }
.hp-reviews .hp-teamarrows-button { width: 48px; height: 48px; border-radius: 8px; border: 1px solid var(--dd-ink-a18, rgba(15,42,36,.18)); background: var(--dd-white); color: var(--dd-ink, #0f2a24); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
@media (max-width:1100px) {
  .hp-reviews .hp-g4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .hp-reviews .hp-revslider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; margin-inline: calc(-1 * var(--dd-gutter)); padding-inline: var(--dd-gutter); scroll-padding-inline: var(--dd-gutter); }
  .hp-reviews .hp-ratingcard-a { display: inline-block; padding-block: 10px; margin-block: -10px; }
  .hp-reviews .hp-revslider::-webkit-scrollbar { display: none; }
  .hp-reviews .hp-revslider > figure { flex: 0 0 100%; scroll-snap-align: start; box-sizing: border-box; }
  .hp-reviews .hp-revarrows { display: flex; }
  .hp-reviews .hp-ratingcard { min-height: 0; padding: 22px; gap: 18px; }
  .hp-reviews .hp-ratingtop { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 8px 16px; align-items: start; }
  .hp-reviews .hp-ratinglabel { grid-column: 1; grid-row: 1; }
  .hp-reviews .hp-ratingstars { grid-column: 1; grid-row: 2; margin-top: 0; }
  .hp-reviews .hp-ratingnum { grid-column: 2; grid-row: 1/3; font-size: 3.5rem; line-height: .8; }
}
@media (max-width:560px) {
  .hp-reviews .hp-g4 { grid-template-columns: minmax(0,1fr); }
}