.clarity-why {
  --why-ink: #26212b;
  --why-plum: #563653;
  --why-muted: #5b535c;
  margin: 38px 0 43px;
  color: var(--why-ink);
}
.clarity-why, .clarity-why * { box-sizing: border-box; }
.clarity-why__heading {
  margin: 0 0 19px;
  font-size: clamp(27px, 2.55vw, 35px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.035em;
}
.clarity-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.83fr) minmax(0, 1fr);
  gap: 14px;
}
.clarity-why__origin, .clarity-why__club, .clarity-why__dispatch { min-width: 0; overflow: hidden; border-radius: 27px; }
.clarity-why__origin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  min-height: 332px;
  background: #f7f2ef;
}
.clarity-why__origin-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 36px 10px 38px clamp(26px, 3vw, 40px);
}
.clarity-why__eyebrow {
  display: block;
  color: var(--why-plum);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.clarity-why__origin h3 {
  max-width: 370px;
  margin: 18px 0 11px;
  font-size: clamp(32px, 3.55vw, 50px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.052em;
}
.clarity-why__origin p {
  max-width: 320px;
  margin: 0;
  color: var(--why-muted);
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.5;
}
.clarity-why__art { min-width: 0; overflow: hidden; }
.clarity-why__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.clarity-why__club {
  position: relative;
  display: flex;
  min-height: 332px;
  background: #eee3ec;
}
.clarity-why__club-copy { position: relative; z-index: 1; width: 100%; padding: 29px 24px 28px 27px; }
.clarity-why__club strong {
  display: block;
  margin: 28px 0 10px;
  color: var(--why-plum);
  font-size: clamp(42px, 4.1vw, 59px);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.067em;
  white-space: nowrap;
}
.clarity-why__club h3 { max-width: 260px; margin: 0 0 8px; font-size: 18px; font-weight: 700; line-height: 1.23; }
.clarity-why__club p { max-width: 235px; margin: 0 0 11px; color: var(--why-muted); font-size: 13px; line-height: 1.42; }
.clarity-why__link {
  display: inline-flex;
  min-height: 39px;
  align-items: center;
  gap: 6px;
  color: var(--why-plum);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.clarity-why__link:hover { color: #7c5275; }
.clarity-why__link span { font-size: 18px; font-weight: 400; line-height: 1; transition: transform .2s ease; }
.clarity-why__link:hover span { transform: translateX(3px); }
.clarity-why a:focus-visible { outline: 2px solid var(--why-plum); outline-offset: 3px; }
.clarity-why__mascot, .clarity-why__mascot-static { position: absolute; z-index: 2; right: 8px; bottom: 4px; display: block; width: 36%; max-width: 145px; }
.clarity-why__mascot img, .clarity-why__mascot-static { display: block; width: 100%; height: auto; object-fit: contain; }
.clarity-why__mascot img { transition: transform .25s ease; }
.clarity-why__mascot:hover img, .clarity-why__mascot:focus-visible img { transform: translateY(-5px) rotate(3deg); }
.clarity-why__dispatch {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 63px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-height: 111px;
  padding: 16px 30px;
  background: #f7f5f3;
}
.clarity-why__dispatch-number { color: var(--why-plum); font-size: 68px; font-weight: 700; line-height: .9; letter-spacing: -.08em; }
.clarity-why__dispatch h3 { margin: 0 0 5px; font-size: 18px; font-weight: 700; line-height: 1.25; }
.clarity-why__dispatch p { margin: 0; color: var(--why-muted); font-size: 13px; line-height: 1.4; }
.clarity-why__dispatch .clarity-why__link { margin-left: 20px; white-space: nowrap; }
@media (min-width: 701px) and (max-width: 1120px) {
  .clarity-why__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .clarity-why__origin { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 300px; }
  .clarity-why__origin-copy { padding-left: 28px; }
  .clarity-why__club { min-height: 190px; }
  .clarity-why__club-copy { padding: 20px 18px 16px 22px; }
  .clarity-why__club strong { margin: 10px 0 5px; font-size: 43px; }
  .clarity-why__club h3 { margin-bottom: 5px; font-size: 16px; }
  .clarity-why__club p { max-width: 64%; margin-bottom: 1px; font-size: 12px; }
  .clarity-why__mascot, .clarity-why__mascot-static { width: 24%; max-width: 125px; }
  .clarity-why__dispatch { grid-column: auto; grid-template-columns: 54px minmax(0, 1fr); align-content: center; min-height: 190px; padding: 18px 20px; }
  .clarity-why__dispatch-number { font-size: 62px; }
  .clarity-why__dispatch h3 { font-size: 16px; }
  .clarity-why__dispatch p { font-size: 12px; }
  .clarity-why__dispatch .clarity-why__link { grid-column: 2; margin: 0; }
}
@media (max-width: 700px) {
  body:has(.clarity-why) #back-top { display: none !important; }
  .clarity-why { margin: 26px 0 33px; }
  .clarity-why__heading { margin-bottom: 14px; font-size: 28px; }
  .clarity-why__grid { display: flex; flex-direction: column; gap: 11px; }
  .clarity-why__origin, .clarity-why__club, .clarity-why__dispatch { border-radius: 22px; }
  .clarity-why__origin { display: flex; flex-direction: column; min-height: 0; }
  .clarity-why__origin-copy { min-height: 157px; padding: 23px 21px 18px; }
  .clarity-why__origin h3 { margin: 10px 0 7px; font-size: 35px; }
  .clarity-why__origin p { max-width: 450px; font-size: 14px; }
  .clarity-why__art { height: 205px; }
  .clarity-why__art img { object-position: center 54%; transform: translateY(9px) scale(1.16); }
  .clarity-why__dispatch { order: 2; grid-template-columns: 41px minmax(0, 1fr); gap: 12px; min-height: 0; padding: 17px 19px 14px; }
  .clarity-why__dispatch-number { align-self: start; padding-top: 3px; font-size: 51px; }
  .clarity-why__dispatch h3 { font-size: 17px; }
  .clarity-why__dispatch p { font-size: 12.5px; }
  .clarity-why__dispatch .clarity-why__link { grid-column: 2; margin: -2px 0 0; }
  .clarity-why__club { order: 3; min-height: 188px; }
  .clarity-why__club-copy { padding: 20px 15px 15px 20px; }
  .clarity-why__club strong { margin: 13px 0 5px; font-size: 42px; }
  .clarity-why__club h3 { margin-bottom: 4px; font-size: 16px; }
  .clarity-why__club p { max-width: 63%; margin-bottom: 3px; font-size: 12.5px; }
  .clarity-why__mascot, .clarity-why__mascot-static { right: 7px; bottom: 4px; width: 33%; }
}
@media (max-width: 350px) {
  .clarity-why__origin h3 { font-size: 32px; }
  .clarity-why__art { height: 190px; }
  .clarity-why__club strong { font-size: 38px; }
  .clarity-why__club p { max-width: 65%; }
}
@media (prefers-reduced-motion: reduce) {
  .clarity-why__link span, .clarity-why__mascot img { transition: none; }
  .clarity-why__link:hover span, .clarity-why__mascot:hover img, .clarity-why__mascot:focus-visible img { transform: none; }
}