/* =====================================================================
   IN THEIR WORDS: real Google reviews on a deep green band. Pass 4.

   A dark band after all the plaster, the way a Charleston house goes from
   a bright piazza into a panelled room. Each review is set large and reads
   itself in as you scroll, word by word; the name is signed underneath
   with a pen stroke. A coral honeysuckle hangs in from the edge of the
   screen, and a hummingbird works its flowers.
   ===================================================================== */
.revs-band{
  --band:#12231a;--cream:#efe7d6;--cream-dim:rgba(239,231,214,.72);--gilt:#d8bc88;
  position:relative;overflow:hidden;isolation:isolate;background:var(--band);color:var(--cream);
  padding:clamp(120px,11vw,160px) 0 clamp(80px,8vw,120px)}
/* the same limewash grain as the plaster, very low, so the green is a surface and not a fill */
.revs-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .85 0 0 0 0 .7 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:260px 260px}
/* a soft light from the upper right, like a lamp in the room */
.revs-band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 55% at 78% 18%,rgba(216,188,136,.10),rgba(216,188,136,0) 70%)}

.revs-in{position:relative;z-index:1}
.revs-head{display:grid;grid-template-columns:1fr;align-items:end;gap:34px 56px}
.revs-head .revs-foot{justify-content:flex-start}
@media(min-width:1280px){ .revs-head{grid-template-columns:minmax(0,1fr) auto} .revs-head .revs-foot{justify-content:flex-end} }
/* on a wide screen the words keep clear of the honeysuckle */
@media(min-width:901px){
  .revs-head,.revs-grid{padding-left:max(0px,calc(clamp(170px,17vw,270px) - (100vw - min(100vw,var(--container-max))) / 2 - var(--margin-desktop) + 28px))}
}
.revs-band .eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--gilt)}
.revs-band .fan{width:24px;height:13px;fill:none;stroke:currentColor;stroke-width:1.1}
.revs-h{font-family:var(--display);font-weight:600;font-size:clamp(38px,4.6vw,68px);line-height:1.04;letter-spacing:-.022em;
  color:var(--cream);margin:22px 0 0}
.revs-h span{display:block;color:var(--gilt);font-size:.5em;letter-spacing:-.01em;margin-top:14px}

/* the band opens under an arcade: plaster piers and arches along its top edge,
   as along a Charleston loggia, instead of a flat line */
.revs-arcade{position:absolute;left:0;right:0;top:-1px;height:74px;z-index:1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='74' viewBox='0 0 52 74'%3E%3Cpath fill='%23f4f0e9' d='M0 0H52V74H47V27A21 21 0 0 0 5 27V74H0Z'/%3E%3Cpath fill='none' stroke='%23d8bc88' stroke-opacity='.5' stroke-width='.8' d='M8 74V27A18 18 0 0 1 44 27V74'/%3E%3C/svg%3E") 0 0/52px 74px repeat-x;}
@media(max-width:900px){ .revs-arcade{height:52px;background-size:37px 52px} }

/* ---------- a review --------------------------------------------------- */
.revs-grid{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:40px clamp(40px,5vw,80px);
  margin-top:clamp(56px,6vw,84px)}
.rq{position:relative;margin:0;padding-top:44px;border-top:1px solid rgba(239,231,214,.16)}
.rq-mark{position:absolute;left:-.06em;top:.02em;font-family:var(--display);font-weight:600;font-size:96px;
  line-height:1;color:var(--gilt);opacity:.3;pointer-events:none}
.rq-text{position:relative;margin:0;font-family:var(--display);font-weight:600;font-size:clamp(20px,1.8vw,27px);
  line-height:1.42;letter-spacing:-.012em;color:var(--cream)}
/* each word inks in as the review scrolls into place */
.rw{transition:opacity .45s ease}
.revs-band.js .rw{opacity:.16}
.revs-band.js .rw.lit{opacity:1}
.rq-by{display:flex;flex-direction:column;gap:9px;margin-top:26px}
.rq-who{font-family:var(--display);font-weight:600;font-size:19px;color:var(--cream)}
.rq-flourish{width:180px;height:14px;overflow:visible;margin-top:-6px}
.rq-flourish path{fill:none;stroke:var(--gilt);stroke-width:1.3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;
  transition:stroke-dashoffset 1.4s cubic-bezier(.5,.1,.3,1)}
.revs-band.js .rq-flourish path{stroke-dashoffset:1}
.revs-band.js .rq.done .rq-flourish path{stroke-dashoffset:0}
.rq-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-family:var(--body);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim)}
.rq-stars{display:inline-flex;gap:4px}
.rq-stars svg{width:13px;height:12px;fill:var(--gilt)}
.revs-band.js .rq .rq-stars svg{opacity:0;transform:scale(.4);transition:opacity .4s ease,transform .5s cubic-bezier(.3,1.6,.4,1)}
.revs-band.js .rq.done .rq-stars svg{opacity:1;transform:none}
.rq.done .rq-stars svg:nth-child(2){transition-delay:.08s}
.rq.done .rq-stars svg:nth-child(3){transition-delay:.16s}
.rq.done .rq-stars svg:nth-child(4){transition-delay:.24s}
.rq.done .rq-stars svg:nth-child(5){transition-delay:.32s}

/* ---------- the rating, and the way to the rest ------------------------ */
.revs-foot{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;justify-content:flex-end}
.revs-score{font-family:var(--display);font-weight:600;font-size:clamp(52px,4.6vw,72px);line-height:1;color:var(--gilt);letter-spacing:-.02em}
.revs-score-t{display:flex;flex-direction:column;gap:8px;font-family:var(--body);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim)}
.more.more-light{color:var(--cream);border-color:rgba(239,231,214,.45)}
.more.more-light:hover{background:var(--cream);border-color:var(--cream);color:var(--band)}

/* ---------- the honeysuckle and the hummingbird ------------------------- */
.revs-vine{position:absolute;left:0;top:0;width:clamp(170px,17vw,270px);z-index:0;pointer-events:none;
  transform-origin:40% 0;animation:vine 12s ease-in-out infinite}
.revs-vine-img{width:100%;height:auto;display:block;
  transition:opacity 1.6s ease,translate 2.2s cubic-bezier(.2,.7,.2,1)}
.revs-band.js .revs-vine-img{opacity:0;translate:0 -40px}
.revs-band.js.seen .revs-vine-img{opacity:1;translate:0 0}
@keyframes vine{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(.9deg)}}
.hummer{all:unset;position:absolute;left:0;top:0;z-index:2;width:clamp(58px,5vw,78px);cursor:pointer;opacity:0;
  transition:transform .9s cubic-bezier(.25,.8,.25,1),opacity .8s ease}
.hummer.here{opacity:1}
.hummer.dart{transition:transform .5s cubic-bezier(.6,0,.2,1),opacity .4s ease}
.hummer img{display:block;width:100%;height:auto;animation:hover .42s ease-in-out infinite alternate}
@keyframes hover{from{translate:0 0;rotate:-2deg}to{translate:0 -4px;rotate:1deg}}
.hummer:focus-visible{outline:1px solid var(--gilt);outline-offset:4px}

@media(max-width:900px){
  .revs-band{padding-top:clamp(170px,38vw,220px)}
  .revs-head{grid-template-columns:1fr}
  .revs-foot{justify-content:flex-start;order:2}
  .revs-grid{grid-template-columns:1fr;gap:48px}
  .revs-vine{left:auto;right:0;width:clamp(120px,30vw,190px)}
  .revs-vine-img{transform:scaleX(-1)}
}
@media (prefers-reduced-motion: reduce){
  .rw{opacity:1;transition:none}
  .rq-flourish path{stroke-dashoffset:0;transition:none}
  .rq .rq-stars svg{opacity:1;transform:none}
  .revs-vine,.hummer img{animation:none}
  .revs-vine-img{opacity:1;translate:0 0}
}

/* a deeper floor, so the green can dissolve into the plaster below (seams.js) */
.revs-band{padding-bottom:clamp(130px,13vw,210px)}