:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body.about-page { min-height: 100vh; margin: 0; padding: 24px 16px; background: #f5f8fc; color: #172637; font: 16px/1.55 system-ui, sans-serif; }
.about-card { width: min(100%, 720px); margin: 0 auto; padding: clamp(24px, 6vw, 48px); border: 1px solid #aab6c4; border-radius: 10px; background: #fff; box-shadow: 0 5px 18px rgba(23, 38, 55, .1); }
.about-back { display: inline-block; margin-bottom: 20px; color: #0757a1; font-weight: 600; text-decoration: none; }
.about-back:hover, .about-card a:not(.about-back):hover { text-decoration: underline; }
.about-back:focus-visible, .about-card a:focus-visible { outline: 3px solid #006ed4; outline-offset: 3px; }
.about-brand { margin: 0; color: #52789e; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0 0 28px; font-size: clamp(28px, 6vw, 38px); line-height: 1.15; }
h2 { margin: 28px 0 8px; font-size: 20px; }
.contact-toggle { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; }
.contact-toggle:focus-visible { outline: 3px solid #006ed4; outline-offset: 3px; }
p { margin: 8px 0; }
ul { margin: 8px 0; padding-left: 22px; }
li + li { margin-top: 7px; }
.about-card a:not(.about-back) { color: #0757a1; }
.contact-address { display: block; max-width: 100%; height: auto; margin: 8px 0; border-radius: 4px; }
.about-note { margin-top: 32px; padding-top: 16px; border-top: 1px solid #c9d3de; color: #4c5c6b; font-size: 14px; }
@media (prefers-color-scheme: dark) {
  body.about-page { background: #07050a; color: #eee; }
  .about-card { background: #24292e; border-color: #64707c; box-shadow: none; }
  .about-back, .about-card a:not(.about-back) { color: #8cc7ff; }
  .about-brand { color: #a9c8e6; }
  .about-note { border-color: #64707c; color: #c9d1d9; }
}