/* About page only. */

/* In-page section links. */
.mg-about-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.mg-about-jump a { display: inline-block; padding: .4rem .9rem; border: 1px solid var(--mg-line); border-radius: 999px; background: #fff; color: inherit; font-size: .9rem; font-weight: 700; text-decoration: none; }
.mg-about-jump a:hover, .mg-about-jump a:focus-visible { border-color: var(--mg-gold); }

/* "Three roles" columns and "what each group keeps" tiles share one numbered-tile look. */
.mg-role-label { display: inline-block; margin-bottom: .75rem; padding: .2rem .65rem; border-radius: 999px; background: #efe7d6; color: #6b5420; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mg-keeps { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .mg-keeps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .mg-keeps { grid-template-columns: repeat(4, 1fr); } }
.mg-keeps > div { padding: 1.25rem; border: 1px solid var(--mg-line); border-top: 3px solid var(--mg-gold); border-radius: 1rem; background: #fff; }
.mg-keeps h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.mg-keeps p { margin: 0; color: var(--mg-muted); font-size: .95rem; }

/* Mission principles as a four-up grid. */
.mg-values { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .mg-values { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .mg-values { grid-template-columns: repeat(4, 1fr); } }
.mg-values > div { padding: 1.5rem; border-radius: 1rem; background: #26241f; color: #efe9df; }
.mg-values h3 { margin: 0 0 .6rem; color: #e2c67a; font-size: 1.25rem; font-weight: 800; }
.mg-values p { margin: 0; font-size: .98rem; line-height: 1.6; }

/* Section rhythm: more air on wide screens. */
@media (min-width: 992px) { .mg-about-section { padding-bottom: 4.5rem !important; } }

/* Two-up variant when the tiles sit beside an intro column. */
@media (min-width: 576px) { .mg-keeps.mg-keeps-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .mg-keeps.mg-keeps-2 { grid-template-columns: 1fr 1fr; } }

/* Physician card beside the intro. Portrait photo is cropped to a banner tall enough to keep the whole face (forehead to chin) in view. */
.mg-about-doc { overflow: hidden; }
.mg-about-doc img { display: block; width: 100%; height: 24rem; object-fit: cover; object-position: center 28%; }
@media (max-width: 575.98px) { .mg-about-doc img { height: 20rem; } }