/* Three voices, three textile letters. All content is readable before JS. */
.reviews.reviews-wool {
  width:calc(100% - 96px);
  max-width:1280px;
  margin-inline:auto;
  padding:100px 0 90px;
  border:0;
}
.reviews-wool .review-heading {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.reviews-wool .review-heading .eyebrow {
  margin:0 0 20px;
  font-size:11px;
  letter-spacing:.15em;
  color:#52715c;
}
.reviews-wool .review-heading h2 {
  max-width:850px;
  font-size:clamp(34px,3.6vw,52px);
  font-weight:550;
  line-height:1.12;
  letter-spacing:-.045em;
}
.reviews-wool .review-heading h2 span { color:#52765e; }
.review-wool-note {
  position:relative;
  flex:0 0 186px;
  align-self:stretch;
  min-height:150px;
}
.reviews-wool .wool-review {
  position:absolute;
  top:6px;
  right:14px;
  width:150px;
  height:150px;
  object-fit:contain;
  transform:none;
  transition:none;
}
.review-wool-note svg {
  position:absolute;
  inset:auto 0 -15px auto;
  width:190px;
  height:52px;
  fill:none;
  stroke-linecap:round;
}
.review-wool-note .review-yarn-shadow { stroke:#b5c1a8; stroke-width:6; }
.review-wool-note .review-yarn-light { stroke:#e0e6d3; stroke-width:2; stroke-dasharray:2 5; }
.review-letters {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:50px;
  align-items:start;
}
.review-letter {
  --letter-paper:#efefe3;
  --letter-edge:#dde0cf;
  --letter-stitch:#b5c0a6;
  position:relative;
  min-width:0;
  margin:0;
  padding:32px 30px 38px;
  border:1px solid var(--letter-edge);
  border-radius:7px 7px 30px 7px;
  background:var(--letter-paper);
  box-shadow:0 5px 0 var(--letter-edge);
}
.review-letter::before {
  content:"";
  position:absolute;
  inset:10px;
  border:1px dashed var(--letter-stitch);
  border-radius:3px 3px 23px 3px;
  pointer-events:none;
}
.review-letter::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:0 12px 24px -12px rgb(36 57 42 / 24%);
  opacity:0;
  pointer-events:none;
}
/* Fine-pointer feedback stays separate from the one-time entrance transform. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  body[data-motion="on"] .review-letter {
    transition:transform 240ms cubic-bezier(.23,1,.32,1);
  }
  body[data-motion="on"] .review-letter::after { transition:opacity 240ms ease; }
  body[data-motion="on"] .review-letter:hover { transform:translateY(-4px); }
  body[data-motion="on"] .review-letter:hover::after { opacity:1; }
}
.review-letter--swann {
  --letter-paper:#e8eee7;
  --letter-edge:#d8e2d5;
  --letter-stitch:#b0c1ac;
  margin-top:32px;
}
.review-letter--samuel {
  --letter-paper:#f1ece4;
  --letter-edge:#e4ddd1;
  --letter-stitch:#c9bda9;
}
.review-person {
  display:flex;
  align-items:center;
  gap:20px;
  margin:0 0 28px;
}
.review-portrait {
  display:block;
  flex:0 0 112px;
  padding:4px;
  border:1px solid var(--letter-stitch);
  border-radius:62px 62px 9px 9px;
  background:#fcfbf7;
}
.review-portrait img {
  display:block;
  width:102px;
  height:120px;
  object-fit:cover;
  border-radius:56px 56px 5px 5px;
}
.review-identity { display:block; min-width:0; }
.review-identity b {
  display:block;
  font-size:17px;
  font-weight:650;
  line-height:1.3;
  color:#202b26;
}
.review-identity span {
  display:block;
  margin-top:6px;
  font-size:13px;
  line-height:1.4;
  color:#536958;
}
.review-letter blockquote {
  margin:0;
  font-size:clamp(21px,1.7vw,24px);
  font-weight:450;
  line-height:1.43;
  letter-spacing:-.025em;
  color:#27372d;
  text-wrap:pretty;
}
.review-letter blockquote strong {
  font-weight:650;
  color:#284b36;
  background:linear-gradient(transparent 69%,#d3dfc5 69%,#d3dfc5 95%,transparent 95%);
  background-size:100% 100%;
  background-repeat:no-repeat;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
@media(min-width:1101px) {
  .review-letter { min-height:394px; }
}
@media(max-width:1100px) and (min-width:801px) {
  .reviews.reviews-wool { width:calc(100% - 64px); }
  .review-letters { gap:18px; }
  .review-letter { padding:25px 24px 32px; }
  .review-person { display:block; margin-bottom:22px; }
  .review-portrait { width:96px; margin-bottom:18px; }
  .review-portrait img { width:86px; height:99px; }
  .review-wool-note { flex-basis:130px; }
  .reviews-wool .wool-review { width:125px; height:125px; right:0; }
  .review-wool-note svg { width:142px; }
}
@media(max-width:800px) {
  .reviews.reviews-wool { width:calc(100% - 48px); padding:65px 0 64px; }
  .review-letters { grid-template-columns:1fr; gap:24px; margin-top:32px; }
  .review-letter { padding:28px 30px 34px; margin:0; }
  .review-person { margin-bottom:23px; }
  .review-letter blockquote { font-size:25px; }
  .review-wool-note { flex-basis:104px; min-height:110px; }
  .reviews-wool .wool-review { width:110px; height:110px; right:0; top:0; }
  .review-wool-note svg { display:none; }
}
@media(max-width:540px) {
  .reviews.reviews-wool { width:calc(100% - 40px); padding:56px 0 58px; }
  .reviews-wool .review-heading { display:block; }
  .reviews-wool .review-heading .eyebrow { padding:10px 74px 10px 0; margin-bottom:19px; font-size:10px; letter-spacing:.1em; }
  .reviews-wool .review-heading h2 { font-size:clamp(29px,8.2vw,39px); line-height:1.14; }
  .review-wool-note { position:absolute; top:-19px; right:0; width:78px; height:78px; min-height:0; }
  .reviews-wool .wool-review { width:78px; height:78px; }
  .review-letter { padding:26px 25px 33px; }
  .review-person { gap:17px; }
  .review-portrait { flex-basis:94px; }
  .review-portrait img { width:84px; height:98px; }
  .review-identity b { font-size:17px; }
  .review-letter blockquote { font-size:23px; line-height:1.43; }
}
@media(max-width:350px) {
  .review-person { gap:14px; }
  .review-portrait { flex-basis:80px; }
  .review-portrait img { width:70px; height:82px; }
  .review-identity b { font-size:16px; }
  .review-letter blockquote { font-size:21px; }
}
