.otosystem .o-sub-about .o-sub-heading{max-width:1040px;margin-bottom:40px}
.otosystem .o-about{max-width:1040px;margin:0 auto;font-family:var(--h-font);font-size:16px;line-height:1.65;color:var(--h-text);word-break:keep-all;overflow-wrap:anywhere}
.otosystem .o-about p{margin:0 0 24px;max-width:72ch}
.otosystem .o-about .o-about-intro{max-width:32ch;font-size:clamp(24px,3vw,40px);line-height:1.4;font-weight:600;letter-spacing:-.03em;color:var(--h-ink);text-wrap:balance}
.otosystem .o-about .o-about-lead{max-width:64ch;font-size:18px;line-height:1.65;margin-bottom:24px}
.otosystem .o-about-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 32px}
.otosystem .o-about section{margin-top:64px;padding-top:40px;border-top:1px solid var(--h-line)}
.otosystem .o-about h2{margin:0 0 24px;font-size:28px;line-height:1.35;letter-spacing:-.03em;color:var(--h-ink)}
.otosystem .o-about h3{margin:0 0 12px;font-size:20px;line-height:1.4;letter-spacing:-.02em;color:var(--h-ink)}
.otosystem .o-about-principles-list{display:grid;gap:32px}
.otosystem .o-about-principle-item{display:grid;grid-template-columns:1fr 2fr;gap:32px}
.otosystem .o-about-principle-item p{margin:0}
.otosystem .o-about ul.o-about-work-list{list-style:none;padding:0;margin:32px 0 24px;display:grid;grid-template-columns:1fr 1fr;gap:32px 48px}
.otosystem .o-about-work-list li{padding-top:24px;border-top:1px solid var(--h-line)}
.otosystem .o-about-work-list strong{display:block;font-size:20px;line-height:1.4;color:var(--h-ink);margin-bottom:12px}
.otosystem .o-about-work-list span{display:block;font-size:16px;line-height:1.65}
.otosystem .o-about-cases{display:grid;gap:40px;margin-top:32px}
.otosystem .o-about-case{display:grid;grid-template-columns:3fr 2fr;align-items:center;gap:32px}
.otosystem .o-about-case img{display:block;width:100%;height:auto;aspect-ratio:864/410;object-fit:contain;border-radius:16px;background:var(--h-surface);border:1px solid var(--h-line)}
.otosystem .o-about .o-about-case-type{font-size:16px;margin-bottom:8px;color:var(--h-muted)}
.otosystem .o-about-case h3{font-size:28px}
.otosystem .o-about .o-about-portfolio-ref{margin-top:32px;margin-bottom:0}
.otosystem .o-about dl{margin:0;max-width:72ch}
.otosystem .o-about dl>div{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:12px 0}
.otosystem .o-about dt{font-weight:600;color:var(--h-ink)}
.otosystem .o-about dd{margin:0}
.otosystem .o-about a{color:inherit;text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.otosystem .o-about a:focus-visible{outline:3px solid var(--h-accent-ink);outline-offset:4px}
.otosystem .o-about a:hover{text-decoration-thickness:2px}
.otosystem .o-about .o-about-cta{min-height:48px;padding:12px 24px;border-radius:32px;background:var(--h-accent);color:var(--h-on-accent);font-weight:700;text-decoration:none;box-sizing:border-box}
.otosystem .o-about .o-about-cta:hover{box-shadow:inset 0 0 0 2px var(--h-on-accent)}
@media(max-width:767px){
  .otosystem .o-sub-about .o-sub-heading{margin-bottom:32px;padding-bottom:24px}
  .otosystem .o-about section{margin-top:48px;padding-top:32px}
  .otosystem .o-about h2{font-size:24px}
  .otosystem .o-about .o-about-lead{font-size:16px}
  .otosystem .o-about-principle-item,.otosystem .o-about-case{grid-template-columns:1fr;gap:16px}
  .otosystem .o-about-principle-item h3{margin-bottom:0}
  .otosystem .o-about ul.o-about-work-list{grid-template-columns:1fr;gap:24px}
  .otosystem .o-about dl>div{grid-template-columns:1fr;gap:4px}
}