/* Keep the About page typography and spacing in step with the rest of MIKA. */
.about-intro{padding:clamp(40px,5.5vw,68px) 0;background:var(--paper);border-bottom:1px solid var(--line)}
.about-intro .breadcrumb{margin-bottom:24px;font-size:.8125rem}
.about-intro h1{margin:12px 0 18px;font-size:clamp(2.15rem,4vw,3.35rem);line-height:1.12;letter-spacing:-.045em}
.about-intro p{max-width:760px;font-size:1rem;line-height:1.7;color:var(--muted)}
.about-page>.section{padding:clamp(56px,7vw,84px) 0}
.company-story{grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,64px)}
.company-story h2{font-size:clamp(1.75rem,2.8vw,2.45rem);line-height:1.16;letter-spacing:-.035em}
.story-text p{font-size:1rem;line-height:1.7}
.story-text p+p{margin-top:16px}
.product-section>div>p{max-width:780px;font-size:1rem;line-height:1.7}
.product-list{gap:0 32px;margin-top:26px}
.product-list li{padding:15px 0;font-size:.9375rem;line-height:1.55}
.purpose-grid{gap:18px}
.purpose-card{padding:28px;border-top-width:3px}
.purpose-card h2{font-size:1.5rem;line-height:1.25;margin-bottom:12px;letter-spacing:-.025em}
.purpose-card p{font-size:.9375rem;line-height:1.65}
@media(max-width:800px){
  .about-intro{padding:40px 0 44px}
  .about-intro .breadcrumb{margin-bottom:20px}
  .about-page>.section{padding:56px 0}
  .company-story{gap:22px}
  .product-list{grid-template-columns:1fr;margin-top:20px}
  .purpose-card{padding:24px}
}
@media(max-width:620px){
  .about-intro{padding:32px 0 36px}
  .about-intro h1{font-size:2rem;margin:10px 0 14px}
  .about-intro p,.story-text p,.product-section>div>p{font-size:.9375rem}
  .about-page>.section{padding:44px 0}
  .company-story h2{font-size:1.7rem}
  .product-list li{padding:13px 0}
  .purpose-grid{gap:14px}
  .purpose-card{padding:20px}
  .purpose-card h2{font-size:1.35rem}
}