/* What clients say (r26j, r26k), moved off the dark Results band to the cream How ground, under the receipt, set apart by space and one rule.
   Pat 9 Nov: "a bit more sperate… in the white box… just under the reecipt", "automaticlly scrools through like the propertys below", "stands out a
   little better", then "have the testmonials have 5 stars, and a left and right navigater". Dark green cards (the How panel's green) on cream so they
   stand out; the strip drifts like the homes strip, driven by quotes-r26j.js so the arrows can step it. */
.how .hqw{max-width:1356px;margin:72px auto 0;padding-top:56px;border-top:1px solid rgba(17,65,54,.16);position:relative;z-index:1}
.how .hqw .lbl{color:var(--muted)}
.how .hqw h2{margin-top:12px}

/* the strip runs edge to edge of the screen, soft fades at both ends; the arrows sit over the two ends */
.how .q26-wrap{position:relative;margin:40px calc(50% - 50vw) 0}
.how .q26-strip{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.how .q26-track{display:flex;align-items:stretch;gap:24px;width:max-content;padding:4px 0;will-change:transform}
.how .q26-dup{display:flex;align-items:stretch;gap:24px}

.how .q26-card{flex:0 0 440px;display:flex;flex-direction:column;margin:0;padding:28px 32px 28px;background:#114136;color:#F6F4EE;border-radius:16px;box-shadow:none}
.how .q26-card.q26-l{flex-basis:620px}
.how .q26-card.q26-s{flex-basis:380px}
.how .q26-st{display:flex;gap:4px;color:#8FCBB0}
.how .q26-st svg{width:20px;height:20px;fill:currentColor;display:block}
.how .q26-card blockquote{margin:20px 0 0;font:300 22px/1.4 var(--f-disp);letter-spacing:-.005em;color:#F6F4EE;quotes:none}
.how .q26-card figcaption{margin-top:auto;padding-top:24px;font:400 14px/1.4 var(--f-text);color:rgba(246,244,238,.78)}
.how .q26-card figcaption strong{display:block;margin-bottom:2px;font:600 17px/1.4 var(--f-text);color:#F6F4EE}

/* left and right arrows: cream rounds with the green arrow, so they read on the cream ground and over a dark card */
.how .q26-arr{position:absolute;top:50%;z-index:2;width:56px;height:56px;margin-top:-28px;padding:0;border:0;border-radius:50%;background:#F6F4EE;color:#114136;
  display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 14px rgba(17,65,54,.22);transition:transform .2s var(--ease),background .2s var(--ease)}
.how .q26-prev{left:max(16px,calc(50vw - 678px - 28px))}
.how .q26-next{right:max(16px,calc(50vw - 678px - 28px))}
.how .q26-arr:hover{background:#fff;transform:scale(1.06)}
.how .q26-arr:active{transform:scale(.96)}
.how .q26-arr:focus-visible{outline:2px solid #114136;outline-offset:3px}
.how .q26-arr svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.how .q26-ctl{display:flex;justify-content:flex-end;margin-top:8px}
.how .q26-pause{min-height:44px;padding:0 4px;background:none;border:0;cursor:pointer;font:400 14px/1 var(--f-text);color:#3F5F54;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.how .q26-pause:focus-visible{outline:2px solid #114136;outline-offset:2px}

/* before the script runs (or without it): the one quote from the live site, plain */
.how .hq{margin:40px 0 0;max-width:880px}
.how .hq blockquote{font:300 var(--t2)/1.3 var(--f-disp);color:var(--ink);quotes:none}
.how .hq figcaption{margin-top:16px;color:var(--muted)}
.how .hq figcaption strong{display:block;font-weight:600;color:var(--ink)}

@media (max-width:860px){.how .hqw{margin-top:56px;padding-top:44px}}
@media (max-width:700px){
  .how .q26-wrap{margin-top:28px}
  .how .q26-track,.how .q26-dup{gap:16px}
  .how .q26-card,.how .q26-card.q26-s{flex-basis:300px;padding:24px 24px 24px}
  .how .q26-card.q26-l{flex-basis:340px}
  .how .q26-card blockquote{font-size:20px}
  .how .q26-arr{width:44px;height:44px;margin-top:-22px}
  .how .q26-prev{left:8px}.how .q26-next{right:8px}
}

/* r26k (Pat 9 Nov, "theres a empty space underneith fix so the end is done"): the glossy glow layers are drawn bigger than their band and
   drift; they are clipped to the band so they can never stretch the page past the footer */
footer .gl-f{position:absolute;inset:0;overflow:hidden;pointer-events:none}