/* Reviews options (10-27), built by reviews-options.js behind ?rv=a|b|c|d. Same three quotes in each; only the top and
   the structure change. What he likes stays in all four: one review at a time, the face of who it is about, moved by hand. */
.reviews[data-rv]{padding-top:clamp(56px,6vw,96px)}
.rvo{max-width:1240px;margin-inline:auto}
.rvo blockquote{margin:0}
.rvo__q{margin:0;font-family:var(--serif);font-weight:300;letter-spacing:-.005em;color:var(--ink);text-wrap:pretty;hanging-punctuation:first}
.rvo__by{display:flex;align-items:center;gap:14px;margin:0;font-size:16px;line-height:1.35}
.rvo__by > span{display:grid;gap:2px}
.rvo__who{font-weight:500;color:var(--ink)}
.rvo__on{color:var(--ink-soft)}
.rvo__face{flex:none;width:64px;height:64px;object-fit:cover;border-radius:10px;background:var(--sand-1)}
.rvo__ctl{display:flex;align-items:center;gap:10px}
.rvo__btn{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--navy);border-radius:8px;background:transparent;color:var(--navy);cursor:pointer;transition:background-color .2s,color .2s,transform .16s var(--ease)}
.rvo__btn:hover{background:var(--navy);color:var(--paper)}
.rvo__btn:active{transform:scale(.94)}
.rvo__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rvo__count{min-width:4.2em;margin:0;text-align:center;font-size:15px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.rvo__rating{margin:0;font-size:15px;line-height:1.4;color:var(--ink-soft)}
.rvo__stage{display:grid;touch-action:pan-y}
.rvo__slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s}
.rvo__slide.is-on{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}

/* A · Apple: one thought, centred. A smaller title, the quote as the hero, the face in the byline, the Google line last */
.rvo--a{max-width:960px;display:grid;justify-items:center;text-align:center;gap:clamp(28px,3.6vw,52px)}
.rvo--a h2.display{font-size:clamp(30px,3.2vw,48px)}
.rvo--a .rvo__slide{display:grid;justify-items:center;align-content:center;gap:clamp(24px,3vw,40px)} /* the shorter quotes sit centred in the tallest one's space, byline right under */
.rvo--a .rvo__q{font-size:clamp(26px,2.8vw,42px);line-height:1.18;max-width:30ch;text-wrap:balance}
.rvo--a .rvo__by{text-align:left}

/* B · Luxury: the agent full height, off the left edge of the screen; the words on deep navy beside it */
[data-rv=b] .reviews{background:var(--navy-deep);--cover:var(--navy-deep);color:var(--paper);padding-bottom:0}
.rvo--b{max-width:none;display:grid;margin-inline:calc(var(--gut) * -1)}
.rvo__pics{display:grid;aspect-ratio:1;max-height:64svh;overflow:hidden;touch-action:pan-y;background:var(--navy)}
.rvo__pic{grid-area:1/1;margin:0;opacity:0;transition:opacity .6s var(--ease)}
.rvo__pic.is-on{opacity:1}
.rvo__pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.rvo__pic--wide img{object-position:50% 40%}
.rvo__side{display:grid;align-content:start;gap:clamp(32px,4vw,56px);padding:clamp(40px,5vw,72px) var(--gut) clamp(56px,6vw,96px)}
.rvo--b h2.display{font-size:clamp(30px,3vw,46px);color:var(--paper)}
.rvo--b .rvo__q{font-size:clamp(26px,2.6vw,42px);line-height:1.17;color:var(--paper);max-width:24ch}
.rvo--b .rvo__slide{display:grid;gap:clamp(20px,2.4vw,32px);align-content:start}
.rvo--b .rvo__who{color:var(--paper)}
.rvo--b .rvo__on{color:rgba(253,250,246,.72)}
.rvo--b .rvo__by > span{display:flex;align-items:center;gap:12px}
.rvo--b .rvo__by > span .rvo__on::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:12px;vertical-align:middle}
.rvo--b .rvo__btn{border-color:rgba(253,250,246,.6);color:var(--paper)}
.rvo--b .rvo__btn:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
.rvo--b .rvo__count,.rvo--b .rvo__rating{color:rgba(253,250,246,.72)}
.rvo--b :focus-visible{outline-color:var(--gold)}
@media (min-width:900px){
  .rvo--b{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch}
  .rvo__pics{aspect-ratio:auto;min-height:min(86svh,820px);max-height:none}
  .rvo__side{align-content:space-between}
  .rvo--b .rvo__slide{align-content:center}
  .rvo__side{padding:clamp(56px,6vw,96px) max(var(--gut),calc((100vw - 1240px) / 2)) clamp(56px,6vw,96px) clamp(48px,6vw,110px)}
}

/* C · His Gertenbach clip: panels on a curved band, the open one facing you; drag either way or use the arrows */
[data-rv=c] .reviews{background:var(--sand-2);--cover:var(--sand-2);overflow-x:clip} /* the band runs to the screen edges */
.rvo--c .rvo__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px;margin-bottom:clamp(32px,4vw,56px)}
.rvo--c h2.display{font-size:clamp(40px,4.8vw,80px)}
.rvo--c .rvo__view{position:relative;margin-inline:calc(50% - 50vw);padding:12px 0 8px;overflow:hidden;perspective:1300px;perspective-origin:50% 50%;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.rvo--c .rvo__view.is-drag{cursor:grabbing}
.rvo--c .rvo__track{display:grid;justify-items:center;align-items:center;transform-style:preserve-3d}
.rvo--c .rvo__card{grid-area:1/1;width:min(80vw,640px);margin:0;display:grid;align-content:space-between;gap:28px;min-height:clamp(300px,30vw,380px);padding:clamp(24px,3vw,40px);background:var(--paper);border-radius:20px;backface-visibility:hidden;will-change:transform,opacity}
.rvo--c .rvo__card .rvo__q{font-size:clamp(22px,2.1vw,30px);line-height:1.24}
.rvo--c .rvo__card .rvo__face{border-radius:50%} /* round: a square face in the card's corner would need a radius of 20 minus the padding, i.e. none */
.rvo--c .rvo__card:not(.is-on){cursor:pointer}
.rvo--c .rvo__card img{-webkit-user-drag:none;pointer-events:none}
.rvo--c .rvo__rating{margin-top:clamp(24px,3vw,36px)}
@media (max-width:599px){.rvo--c .rvo__ctl--head{display:none}} /* on a phone the hand moves the band; arrows stay under it */
.rvo--c .rvo__ctl--foot{display:none;justify-content:center;margin-top:20px}
@media (max-width:599px){.rvo--c .rvo__ctl--foot{display:flex}}

/* D · Quiet editorial: the faces are the buttons. Pick a person, read what a client said about them */
.rvo--d{display:grid;gap:clamp(32px,4vw,56px)}
.rvo--d h2.display{font-size:clamp(40px,4.4vw,72px)}
.rvo--d .rvo__lead{display:grid;gap:clamp(24px,3vw,40px);align-content:start}
.rvo__tabs{display:flex;flex-wrap:wrap;gap:16px}
.rvo__tab{all:unset;box-sizing:border-box;display:grid;gap:10px;justify-items:start;cursor:pointer;border-radius:10px;-webkit-tap-highlight-color:transparent}
.rvo__tab img{display:block;width:76px;height:76px;object-fit:cover;border-radius:10px;filter:grayscale(1);opacity:.5;transition:filter .35s var(--ease),opacity .35s var(--ease),transform .16s var(--ease)}
.rvo__tab span{font-size:15px;color:var(--ink-soft);padding-bottom:4px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.rvo__tab:hover img{opacity:.85}
.rvo__tab:active img{transform:scale(.96)}
.rvo__tab[aria-selected=true] img{filter:none;opacity:1}
.rvo__tab[aria-selected=true] span{color:var(--ink);border-bottom-color:var(--gold)}
.rvo__tab:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.rvo--d .rvo__slide{display:grid;gap:clamp(20px,2.4vw,32px);align-content:start}
.rvo--d .rvo__q{font-size:clamp(26px,2.8vw,44px);line-height:1.17;max-width:28ch}
@media (min-width:900px){.rvo--d{grid-template-columns:minmax(0,.75fr) minmax(0,1.4fr);column-gap:clamp(48px,6vw,112px);align-items:start}}

@media (prefers-reduced-motion:reduce){
  .rvo__slide,.rvo__slide.is-on,.rvo__pic,.rvo__btn,.rvo__tab img,.rvo__tab span{transition:none}
  .rvo__btn:active,.rvo__tab:active img{transform:none}
}