/* wf-testi: the Testimonials block of kora.framer.media, measured 10 Sep 2026 and ported for world 1.
   A full-bleed photo card (r40, 1320x758) with the 120px heading, a frosted quote card over it and the
   score bottom-right; then a cream box (#F5F5E9, r40, p10) with three white cards in a row, the open
   one twice as wide (20px type), the others at 65 percent (15px type), a plus that turns into a minus.
   Phone: the photo becomes a band with the heading at its foot, the quote a cream panel under it, and
   the three cards stack, all open. Source of truth: products/_wf-nav/wf-testi.css */
.wft{--t-ink:#242424;--t-grey:#616161;--t-cream:#F5F5E9;--t-paper:#FFFFFA;--t-ease:cubic-bezier(.2,.7,.2,1);
  position:relative;z-index:4;background:var(--bg,#FCFCFA);color:var(--t-ink);padding:clamp(72px,9vw,120px) clamp(20px,4.2vw,60px) 0;font-family:var(--font,"Inter",system-ui,sans-serif)}
.wft *{box-sizing:border-box}
.wft-in{width:100%;max-width:1320px;margin:0 auto;display:flex;flex-direction:column;gap:20px}

/* the photo card (the quote sits on a dark glass plate, like the menu captions: the photo is bright) */
.wft-hero{position:relative;border-radius:40px;overflow:hidden;background:var(--t-cream);color:#FCFCFA;isolation:isolate}
.wft-film{position:relative;min-height:clamp(420px,52.6vw,758px)}
.wft-film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 30%}
.wft-film::after{display:none}
.wft-h{position:absolute;left:40px;top:105px;margin:0;font-weight:400;font-size:clamp(56px,8.3vw,120px);line-height:1;letter-spacing:-.04em;color:var(--t-ink);z-index:2}   /* dark on the bright photo: 6 to 11:1 on the yellow, white sat at 1.4 */
.wft-quote{position:absolute;left:40px;top:clamp(150px,13.2vw,190px);width:375px;max-width:calc(100% - 80px);z-index:3;
  border-radius:30px;padding:30px;background:rgba(12,12,14,.62);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.wft-quote blockquote{margin:0}
.wft-big{margin:0;font-size:clamp(20px,1.8vw,25px);font-weight:600;letter-spacing:-.03em;line-height:1.28;color:#FCFCFA}
.wft-line{height:1px;margin:24px 0;background:rgba(255,255,255,.22)}
.wft-sub{margin:0;font-size:15px;font-weight:600;letter-spacing:-.03em;line-height:1.5;color:#EDEDED}
.wft-who{display:flex;align-items:center;gap:15px;margin-top:24px}
.wft-av{flex:none;display:grid;place-items:center;width:45px;height:45px;border-radius:50%;background:var(--accent,#3157E5);color:#fff;font-size:14px;font-weight:700;letter-spacing:-.02em}
.wft-who b{display:block;font-size:15px;font-weight:600;letter-spacing:-.03em;line-height:1.5}
.wft-who div>span{display:block;font-size:13px;font-weight:600;letter-spacing:-.025em;line-height:1.5;color:#E6E6E6}
.wft-rate{position:absolute;right:60px;bottom:60px;z-index:2;text-align:right;color:var(--t-ink)}
.wft-num{display:flex;align-items:baseline;justify-content:flex-end;font-size:clamp(72px,8.3vw,120px);line-height:1;letter-spacing:-.04em;font-weight:400}
.wft-num i{font-style:normal;color:var(--accent,#3157E5)}
.wft-num small{font-size:clamp(20px,2.1vw,30px);font-weight:600;letter-spacing:-.04em;color:rgba(36,36,36,.75);margin-left:2px}
.wft-rate p{margin:4px 0 0;font-size:13px;font-weight:600;letter-spacing:-.025em;line-height:1.5}

/* the row of cards */
.wft-grid{background:var(--t-cream);border-radius:40px;padding:10px;display:flex;gap:10px}
.wft-card{position:relative;flex:1 1 0;min-width:0;min-height:352px;background:var(--t-paper);border-radius:30px;overflow:hidden;opacity:.65;
  display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;
  transition:flex-grow .6s var(--t-ease),opacity .5s var(--t-ease)}
.wft-card.is-open{flex-grow:2.06;opacity:1;cursor:default}
.wft-card:has(.wft-tog:focus-visible){outline:2px solid var(--t-ink);outline-offset:-4px}
.wft-tog:focus-visible{outline:2px solid var(--t-ink);outline-offset:2px}
.wft-tog{position:absolute;right:15px;top:15px;width:20px;height:20px;border-radius:50%;background:var(--t-cream);border:0;padding:0;margin:0;cursor:pointer;
  display:grid;place-items:center;transition:transform .45s var(--t-ease)}
.wft-tog b{position:absolute;left:4px;top:9px;width:12px;height:2px;border-radius:30px;background:var(--t-ink);transition:transform .45s var(--t-ease),opacity .45s var(--t-ease)}
.wft-tog b+b{transform:rotate(90deg)}
.wft-card.is-open .wft-tog{transform:rotate(180deg)}
.wft-card.is-open .wft-tog b+b{transform:rotate(0);opacity:0}
.wft-head{padding:30px;display:flex;flex-direction:column;gap:20px}
.wft-dots{display:flex;gap:5px;height:9px}
.wft-dots i{width:9px;height:9px;border-radius:50%;background:var(--accent,#3157E5)}
.wft-text{margin:0;font-size:15px;font-weight:600;letter-spacing:-.03em;line-height:1.5;color:var(--t-ink);transition:font-size .45s var(--t-ease)}
.wft-card.is-open .wft-text{font-size:20px;letter-spacing:-.03em;line-height:1.35}
.wft-foot{padding:30px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.wft-foot .wft-who{margin:0;flex:1 1 auto;min-width:0}
.wft-foot .wft-av{background:var(--t-ink)}   /* ink, not blue: a closed card sits at 65 percent and blue faded to 3.1:1 under the white initials; ink keeps 5.2 */
.wft-foot .wft-who div{min-width:0}
.wft-foot .wft-who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wft-foot .wft-who b{color:var(--t-ink)}
.wft-foot .wft-who div>span{color:var(--t-grey)}
.wft-brand{flex:none;width:0;overflow:hidden;font-size:13px;font-weight:700;letter-spacing:-.02em;color:var(--t-ink);white-space:nowrap;opacity:0;transform:translateX(10px);transition:opacity .4s var(--t-ease),transform .4s var(--t-ease)}
.wft-card.is-open .wft-brand{width:auto;opacity:1;transform:none;transition-delay:.15s}

/* entrance */
.wft-hero,.wft-grid{opacity:0;transform:translateY(28px);transition:opacity .9s var(--t-ease),transform .9s var(--t-ease)}
.wft-grid{transition-delay:.12s}
.wft.is-in .wft-hero,.wft.is-in .wft-grid,html.pt-arrived .wft-hero,html.pt-arrived .wft-grid{opacity:1;transform:none}

@media (max-width:1100px){
  .wft-card.is-open .wft-text{font-size:17px}
  .wft-quote{width:340px;padding:25px}
  .wft-rate{right:40px;bottom:40px}
}
@media (max-width:900px){
  .wft{padding-left:20px;padding-right:20px}
  .wft-hero{border-radius:30px}
  .wft-film{min-height:0;height:clamp(300px,58vw,420px)}
  .wft-film img{object-position:44% 25%}   /* more of the plain yellow on the left, under the score */
  .wft-h{left:24px;top:auto;bottom:22px;font-size:clamp(44px,12.5vw,64px);color:#FCFCFA}   /* on phones the heading runs onto the shirt: white on a dark scrim (5:1 on the yellow, more on the shirt) */
  .wft-film::after{content:"";display:block;position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.66) 100%)}
  .wft-quote{position:static;width:auto;max-width:none;border-radius:0;padding:30px 24px 26px;background:var(--t-cream);color:var(--t-ink);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  .wft-big{color:var(--t-ink);font-size:21px}
  .wft-line{background:rgba(36,36,36,.12)}
  .wft-sub,.wft-who div>span{color:var(--t-grey)}
  .wft-quote .wft-who b{color:var(--t-ink)}
  .wft-rate{left:24px;right:auto;bottom:auto;top:22px;text-align:left;max-width:170px}   /* on the yellow, clear of the face */
  .wft-num{justify-content:flex-start}
  .wft-num{font-size:64px}
  .wft-num small{font-size:20px}
  .wft-rate p{font-size:12px}
  .wft-grid{flex-direction:column;border-radius:30px}
  .wft-card,.wft-card.is-open{flex:none;min-height:0;opacity:1;cursor:default}
  .wft-text,.wft-card.is-open .wft-text{font-size:16px;line-height:1.5}
  .wft-tog{display:none}
  .wft-head{padding:26px 24px 10px}
  .wft-foot{padding:24px}
  .wft-brand{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wft-card,.wft-tog,.wft-tog b,.wft-text,.wft-brand,.wft-hero,.wft-grid{transition:none}
  .wft-hero,.wft-grid{opacity:1;transform:none}
}