.why { background: var(--b); }
.why-top {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8rem; align-items: end; margin-bottom: 5rem;
}
.why-g {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--br);
}
.wi {
  padding: 2.8rem 2.2rem; background: var(--b);
  position: relative; overflow: hidden; transition: background .35s; cursor: default;
}
.wi:hover { background: var(--b2); }
.wi-line {
  position: absolute; bottom: 0; left: 0; right: 0; height: 1.5px;
  background: linear-gradient(90deg, var(--g), transparent 60%);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--r);
}
.wi:hover .wi-line { transform: scaleX(1); }
.wi-n {
  font-family: var(--serif); font-size: 3rem; font-weight: 300;
  color: rgba(200,144,10,.28); line-height: 1; margin-bottom: 1.5rem; letter-spacing: -.03em;
}
.wi-ttl { font-size: .8rem; font-weight: 700; color: var(--t); margin-bottom: .5rem; line-height: 1.3; }
.wi-txt { font-size: .73rem; color: rgba(250,250,248,.65); line-height: 1.8; font-weight: 300; }