/* One oversized, familiar Bito; the panel is a quiet place to meet. */
.about.section-pad { padding: 110px 0 100px; width: min(1200px, calc(100% - 12vw)); margin-inline: auto; }
.about-panel { position: relative; isolation: isolate; min-height: 372px; }
.about-panel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #f0f5eb; border-radius: 28px; }
.about-copy { position: relative; z-index: 1; width: 55%; padding: 56px 0 56px 56px; }
.about-copy h2 { font-size: clamp(34px, 3.5vw, 48px); line-height: 1.12; letter-spacing: -.045em; font-weight: 500; color: #202b22; }
.about-copy p { max-width: 405px; margin-top: 24px; color: #707c71; font-size: 16px; line-height: 1.8; letter-spacing: -.012em; }
.about-scene { position: absolute; top: -76px; bottom: 0; right: 0; width: 46%; overflow: clip; border-radius: 0 0 28px 0; }
.about-bito { position: absolute; width: min(470px, 96%); aspect-ratio: 482 / 508; right: 20px; bottom: -82px; padding: 0; border: 0; background: transparent; transform-origin: 50% 90%; border-radius: 42%; }
.about-bito:focus-visible { outline: 3px solid #4d9658; outline-offset: -8px; }
.about-bito-art { display: block; position: relative; width: 100%; height: 100%; transform-origin: 50% 82%; }
.about-bito-art img, .about-bito-art canvas { position: absolute; width: 212.45%; max-width: none; height: 201.57%; left: -53.53%; top: -48.43%; user-select: none; pointer-events: none; }
@media (min-width: 761px) and (max-width: 1050px) {
  .about-copy { padding: 40px 0 40px 36px; width: 54%; }
  .about-copy p { font-size: 15px; max-width: 340px; }
  .about-bito { right: 6px; width: 98%; bottom: -30px; }
}
@media (max-width: 760px) {
  .about.section-pad { width: calc(100% - 24px); padding: 40px 0 64px; }
  .about-panel::before { border-radius: 24px; }
  .about-panel { min-height: 0; }
  .about-copy { width: 100%; padding: 34px 28px 0; }
  .about-copy h2 { font-size: clamp(32px, 7.8vw, 42px); }
  .about-copy p { font-size: 15px; margin-top: 20px; max-width: 440px; }
  .about-scene { position: relative; top: auto; width: 100%; height: 300px; margin-top: 22px; border-radius: 0 0 24px 24px; }
  .about-bito { width: min(350px, 88%); right: 6%; bottom: -65px; }
}
@media (max-width: 360px) { .about-copy { padding: 30px 24px 0; } .about-scene { height: 250px; } .about-bito { bottom: -48px; } }

.about-bito-art canvas { opacity: 0; }
.about-bito-art.ready #about-bito-canvas { opacity: 1; }
.about-bito-art.ready img { opacity: 0; }
.about-bito-art #about-bito-runtime { opacity: 0!important; visibility: hidden!important; }