/* Adier: "What clients say" (EN) / "Asiakkaidemme kokemuksia" (FI).
   A client's own words next to the ads we made for them. Built on the tokens in site.css; no prices here.
   Videos are native <video preload="none"> with a poster; reviews.js only adds the big play button. */
.rvw{padding-bottom:0}
.rvw .sec-head{margin-bottom:clamp(30px,5vw,52px)}
.rvw-list{display:grid;gap:clamp(18px,2.6vw,30px)}

.rvw-card{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(22px,3.6vw,52px);align-items:center;
  padding:clamp(20px,3vw,38px);border-radius:var(--r);background:var(--card);box-shadow:0 0 0 1px var(--line),var(--lift)}
.rvw-card.flip{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
.rvw-card.flip .rvw-media{order:-1}
.rvw-txt{min-width:0}
.rvw-media{min-width:0}

/* who: logo chip */
.rvw-logo{display:block;width:auto;height:64px;margin:0 0 clamp(16px,2vw,22px)}
.rvw-logo.chip{height:44px;border-radius:9px;box-shadow:0 0 0 1px var(--line)}

/* the quote itself: plain sans (the serif is for headline emphasis only) */
.rvw-q{position:relative;margin:0;padding:0;font:700 clamp(18.5px,1.85vw,22.5px)/1.4 var(--sans);letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
.rvw-q p{margin:0}
.rvw-q::before{content:"";display:block;width:44px;height:6px;margin:0 0 clamp(14px,1.8vw,20px);border-radius:3px;background:var(--sig)}
.rvw-q.big p{font:900 clamp(30px,4vw,46px)/1.02 var(--sans);letter-spacing:-.035em}
.rvw-q.sm{margin-top:clamp(18px,2.4vw,26px);padding-top:clamp(16px,2vw,22px);border-top:1.5px solid var(--line-2);font-weight:600;font-size:clamp(17px,1.6vw,19.5px);color:var(--ink-2)}
.rvw-q.sm::before{content:none}
.rvw-on{margin:0 0 6px;font:600 clamp(14.5px,1.4vw,16.5px)/1.3 var(--hand);letter-spacing:0;color:var(--sig-deep);text-wrap:balance}
.rvw-by{display:grid;gap:1px;margin:clamp(16px,2.2vw,24px) 0 0;font-size:15px;line-height:1.35;color:var(--mute)}
.rvw-by b{font:800 17px/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.rvw-by .rvw-note{margin-top:6px;font-size:13px;font-style:italic;color:var(--mute)}

/* media: one 16:9 video, or a strip of three 9:16 tiles */
.rvw-vid{position:relative;margin:0;overflow:hidden;isolation:isolate;border-radius:calc(var(--r) - 10px);background:var(--ink);box-shadow:0 0 0 1px var(--line),var(--lift-2)}
.rvw-vid.r169{aspect-ratio:16/9}
.rvw-vid.r916{aspect-ratio:9/16;border-radius:18px}
.rvw-vid video,.rvw-vid img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:var(--ink)}
.rvw-vid.r169 video{object-fit:contain}
.rvw-play{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;color:var(--ink);-webkit-tap-highlight-color:transparent}
.rvw-play i{display:grid;place-items:center;width:clamp(54px,6vw,70px);height:clamp(54px,6vw,70px);border-radius:50%;background:var(--sig);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 12px 26px -8px rgba(14,14,18,.65);transition:transform 240ms var(--ease-pop),background-color 200ms ease}
.rvw-vid.r916 .rvw-play i{width:clamp(44px,4.6vw,56px);height:clamp(44px,4.6vw,56px)}
.rvw-play svg{margin-left:3px}
@media (hover:hover){.rvw-play:hover i{background:var(--sig-hover);transform:scale(1.07)}}
.rvw-play:active i{transform:scale(.94)}
.rvw-play:focus-visible{outline:3px solid var(--paper);outline-offset:-8px;box-shadow:inset 0 0 0 6px var(--ink)}
.rvw-vid[data-on] .rvw-play,.rvw-vid[data-on] .rvw-l3{display:none}
.no-js .rvw-play{display:none}

/* lower third on the big video, same device as the work gallery */
.rvw-l3{position:absolute;left:12px;top:12px;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-width:calc(100% - 24px);pointer-events:none}
.rvw-l3 span,.rvw-l3 b{max-width:100%;border-radius:6px;box-shadow:0 6px 16px -6px rgba(0,0,0,.6)}
.rvw-l3 span{padding:5px 8px;background:var(--sig);color:var(--ink);font:800 9.5px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.rvw-l3 b{padding:5px 8px;background:var(--card);color:var(--ink);font:800 10px/1.1 var(--sans);letter-spacing:.07em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.rvw-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.2vw,14px);align-items:start;margin:0;padding:0;list-style:none}
.rvw-strip>li{min-width:0}
.rvw-cap{margin:9px 2px 0;font:800 13.5px/1.25 var(--sans);letter-spacing:-.005em;color:var(--ink)}
.rvw-cap small{display:block;margin-top:2px;font-weight:600;font-size:12.5px;color:var(--mute)}
.rvw-cap.wide{margin:12px 4px 0;font-size:14.5px}
.rvw-cap.wide small{display:inline;margin:0 0 0 6px;font-size:13.5px}
.rvw-nojs{position:absolute;left:8px;right:8px;bottom:8px;z-index:6;padding:8px 10px;border-radius:8px;background:var(--card);color:var(--ink);font-size:12.5px;font-weight:800;text-align:center}

/* stack under 880px; the three tiles become a swipe rail instead of shrinking */
@media (max-width:880px){
  .rvw-card,.rvw-card.flip{grid-template-columns:minmax(0,1fr);gap:22px;padding:clamp(18px,4vw,26px)}
  .rvw-card.flip .rvw-media{order:0}
  .rvw-strip{--pad:clamp(18px,4vw,26px);grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(56vw,224px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    margin:0 calc(-1*var(--pad));padding:2px var(--pad) 8px;scroll-padding:0 var(--pad);scrollbar-width:thin}
  .rvw-strip>li{scroll-snap-align:start}
}
@media (max-width:560px){
  .rvw-logo{height:54px}.rvw-logo.chip{height:40px}
  .rvw-l3 b{display:none}
}
@media (prefers-reduced-motion:reduce){.rvw-play i{transition:none}.rvw-play:hover i{transform:none}}