.about-heading, .about-grid { width: min(1180px, 100%); margin-inline: auto; }
.about-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; }
.about-page .about-card { min-width: 0; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--cafe-border); border-radius: 24px; background: linear-gradient(145deg, rgb(21 23 37 / 97%), rgb(9 11 19 / 97%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 16px 42px rgb(0 0 0 / 16%); }
.about-page .about-card-title { margin: 0; color: #fff; font-size: 23px; font-weight: 800; letter-spacing: -.015em; }
.about-card p, .about-contact-row a { margin: 0; color: #cec9dd; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.about-card .mud-divider { margin-block: 6px; border-color: var(--cafe-border); }
.about-contact-row { display: flex; min-width: 0; align-items: center; gap: 12px; }
.about-contact-row .mud-icon-root { flex-shrink: 0; color: #ae83ff; }
.about-contact-row a { text-decoration-color: rgb(174 131 255 / 50%); text-underline-offset: 4px; }
.about-contact-row a:hover { color: #fff; }
.about-map { width: 100%; height: 300px; border: 1px solid var(--cafe-border); border-radius: 16px; background: #111321; }
.about-card .mud-typography-caption { color: #aba5bd; font-size: 16px; overflow-wrap: anywhere; }
.about-card .mud-link { color: #c6aaff; font-size: 16px; }
.about-page .about-management { grid-column: 1 / -1; background: rgb(12 14 24 / 96%); }
.about-management .about-card-title { margin-bottom: 8px; font-size: 19px; }
.about-management .mud-typography-body2 { margin-top: 6px; color: #aba5bd; font-size: 16px; }
@media (max-width: 800px) { .about-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } .about-map { height: 260px; } }