/* Homepage achievements + giving back (round 17, 2026-10-12). Relies on .mdx-kicker / .mdx-btn from home-sections.css. */
.mdimpact { --ink: #0a2540; --text: #33465b; --muted: #5b6f85; --blue: #0073ad; --line: #dfe8f0; position: relative; padding: 112px 0 120px; background: #f5f8fb; font-family: var(--font-body, "Manrope", sans-serif); overflow: hidden; }
.mdimpact::before { content: ""; position: absolute; top: 120px; right: -240px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 128, 192, .08), rgba(0, 128, 192, 0)); pointer-events: none; }
.mdimpact-head { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.mdimpact-head .mdx-kicker { justify-content: center; }
.mdimpact-head h2 { margin: 0 0 16px !important; padding: 0 !important; font-size: clamp(34px, 4.2vw, 56px) !important; font-weight: 800 !important; line-height: 1.05 !important; letter-spacing: -.035em !important; color: var(--ink) !important; }
.mdimpact-head h2 span { color: var(--blue); }
.mdimpact-head p { margin: 0 auto !important; max-width: 600px; font-size: 18px !important; line-height: 1.65 !important; font-weight: 500; color: var(--text) !important; }

/* awards: photo deck + timeline */
.mdimpact-awards { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; align-items: center; }
.mdimpact-deck { position: relative; height: 540px; }
.mdimpact-card { position: absolute; top: 40px; left: 12%; width: 66%; aspect-ratio: 4 / 5; margin: 0; border-radius: 22px; overflow: hidden; background: #fff; border: 9px solid #fff; box-shadow: 0 30px 60px -30px rgba(10, 37, 64, .55); transition: transform .8s cubic-bezier(.2, .75, .2, 1), opacity .6s, box-shadow .6s; transform-origin: 50% 90%; }
.mdimpact-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; }
.mdimpact-card figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 8px 12px; border-radius: 10px; background: rgba(10, 37, 64, .72); color: #fff; font-size: 12.5px; font-weight: 700; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transform: translateY(6px); transition: opacity .4s .3s, transform .4s .3s; }
.mdimpact-card.pos-0 { z-index: 3; transform: rotate(-3deg); }
.mdimpact-card.pos-0 figcaption { opacity: 1; transform: none; }
.mdimpact-card.pos-1 { z-index: 2; transform: translate(26%, 4%) rotate(6deg) scale(.92); box-shadow: 0 20px 40px -26px rgba(10, 37, 64, .5); }
.mdimpact-card.pos-2 { z-index: 1; transform: translate(-22%, 7%) rotate(-10deg) scale(.86); box-shadow: 0 16px 30px -24px rgba(10, 37, 64, .45); }
.mdimpact-card.pos-2 img, .mdimpact-card.pos-1 img { filter: saturate(.85); }
.mdimpact-deck-next { position: absolute; z-index: 4; right: 8%; bottom: 18px; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--blue); color: #fff; font-size: 17px; cursor: pointer; box-shadow: 0 14px 28px -12px rgba(0, 128, 192, .9); transition: transform .3s; }
.mdimpact-deck-next:hover { transform: rotate(90deg); }
.mdimpact-deck-next:focus-visible { outline: 3px solid rgba(0, 128, 192, .35); outline-offset: 3px; }

.mdimpact-timeline { position: relative; margin: 0 !important; padding: 0 !important; list-style: none; }
.mdimpact-timeline::before { content: ""; position: absolute; left: 95px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(var(--blue), rgba(0, 128, 192, .15)); transform: scaleY(0); transform-origin: top; transition: transform 1.6s cubic-bezier(.65, 0, .35, 1); }
.mdimpact.is-in .mdimpact-timeline::before { transform: scaleY(1); }
.mdimpact-timeline li { position: relative; display: grid !important; grid-template-columns: 64px 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px 16px 14px 0 !important; border-radius: 16px; opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s, background .25s; transition-delay: calc(var(--d) * 110ms + .2s); }
.mdimpact.is-in .mdimpact-timeline li { opacity: 1; transform: none; }
.mdimpact-timeline li:hover { background: #fff; box-shadow: 0 14px 30px -24px rgba(10, 37, 64, .45); }
.mdimpact-year { padding-top: 8px; font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--blue); font-variant-numeric: tabular-nums; text-align: right; }
.mdimpact-medal { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); color: var(--blue); font-size: 17px; transition: background .25s, color .25s, transform .25s; }
.mdimpact-timeline li:hover .mdimpact-medal { background: var(--blue); color: #fff; transform: scale(1.06); }
.mdimpact-timeline b { display: block; font-size: 17.5px; font-weight: 800; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
.mdimpact-timeline small { display: block; margin: 2px 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mdimpact-timeline p { margin: 0 !important; font-size: 14.5px !important; line-height: 1.55 !important; font-weight: 500; color: var(--text) !important; }
.mdimpact-more { margin: 36px 0 0 !important; text-align: center; }

/* giving back: mosaic + navy story card */
.mdx-btn--white { background: #fff; border-color: #fff; color: #0a2540 !important; box-shadow: none; }
.mdx-btn--white:hover { background: #eaf5fb; border-color: #eaf5fb; }

@media (max-width: 991.98px) {
    .mdimpact { padding: 76px 0 84px; }
    .mdimpact-head { margin-bottom: 36px; }
    .mdimpact-awards { grid-template-columns: 1fr; gap: 30px; }
    .mdimpact-deck { height: 420px; max-width: 460px; margin: 0 auto; width: 100%; }
    .mdimpact-card { top: 20px; left: 17%; }
    .mdimpact-card.pos-1 { transform: translate(14%, 4%) rotate(5deg) scale(.92); }
    .mdimpact-card.pos-2 { transform: translate(-14%, 6%) rotate(-7deg) scale(.88); }
    .mdimpact-timeline::before { left: 79px; }
    .mdimpact-timeline li { grid-template-columns: 48px 44px minmax(0, 1fr); gap: 12px; }
    .mdimpact-year { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .mdimpact-card, .mdimpact-timeline li, .mdimpact-timeline::before { transition: none !important; }
    .mdimpact-timeline li { opacity: 1; transform: none; }
    .mdimpact-timeline::before { transform: none; }
}

/* round 20: deck follows the timeline: one card per award; the hovered / current year is highlighted */
.mdimpact-card.pos-x { z-index: 0; opacity: 0; transform: translate(0, 6%) rotate(0deg) scale(.8); pointer-events: none; }
.mdimpact-card figcaption b { margin-right: 6px; color: #7cc4ea; font-weight: 800; }
.mdimpact-timeline li { cursor: pointer; }
.mdimpact-timeline li.is-active { background: #fff; box-shadow: 0 14px 30px -24px rgba(10, 37, 64, .45); }
.mdimpact-timeline li.is-active .mdimpact-medal { background: var(--blue); color: #fff; transform: scale(1.06); }
.mdimpact-timeline li:focus-visible { outline: 3px solid rgba(0, 128, 192, .35); outline-offset: 2px; }
/* the stacked cards stay inside the column on narrower desktops (1200 clipped the back card off-screen) */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .mdimpact-awards { gap: 56px; }
    .mdimpact-deck { height: 470px; }
    .mdimpact-card { top: 30px; left: 17%; width: 62%; }
    .mdimpact-card.pos-1 { transform: translate(20%, 4%) rotate(5deg) scale(.92); }
    .mdimpact-card.pos-2 { transform: translate(-18%, 6%) rotate(-8deg) scale(.88); }
}

/* ---------- Round 33 (2026-10-30): giving back as a family field journal (.mdgv) ----------
   Warm paper instead of the navy card; the five community photos are pinned prints with handwritten (Caveat) notes;
   a "where it goes" note card; the years from 2004 to today along a dotted trail. */
.mdgv { --ink: #0a2540; --blue: #0073ad; --earth: #a4492a; --paper: #f7f0e4; --pencil: #4a3f33; --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  position: relative; padding: 110px 0 100px; font-family: var(--font-body, "Manrope", sans-serif); color: var(--pencil);
  background-color: var(--paper);
  background-image: radial-gradient(rgba(120, 90, 50, .07) 1px, transparent 1.2px), radial-gradient(rgba(120, 90, 50, .05) 1px, transparent 1.2px);
  background-size: 22px 22px, 31px 31px; background-position: 0 0, 11px 7px; overflow: hidden; }
.mdgv::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60px; background: linear-gradient(#f5f8fb, rgba(245, 248, 251, 0)); pointer-events: none; }
.mdgv .mdx-kicker { color: var(--earth) !important; }
.mdgv-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.mdgv-story h2 { margin: 0 0 20px !important; padding: 0 !important; font-size: clamp(32px, 3.6vw, 48px) !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -.03em !important; color: var(--ink) !important; }
.mdgv-text p { margin: 0 0 14px !important; font-size: 16.5px !important; line-height: 1.7 !important; font-weight: 500; color: var(--pencil) !important; }
.mdgv-text b { color: var(--ink); }
.mdgv-note { position: relative; margin: 26px 0 0; padding: 22px 24px 18px; background-color: #fffdf8;
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(0, 128, 192, .14) 31px 32px); background-position: 0 46px;
  border-radius: 4px; box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 18px 30px -22px rgba(74, 63, 51, .55); transform: rotate(-1.2deg); }
.mdgv-note::before { content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 24px; margin-left: -48px; background: rgba(214, 196, 160, .72); transform: rotate(2deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.mdgv-note-h { margin: 0 0 6px !important; font-family: var(--hand); font-size: 27px !important; font-weight: 700; line-height: 1.1 !important; color: var(--earth) !important; }
.mdgv-note ul { margin: 0 !important; padding: 0 !important; list-style: none; }
.mdgv-note li { position: relative; padding: 0 0 0 26px !important; font-size: 15.5px; font-weight: 600; line-height: 32px; color: var(--ink); }
.mdgv-note li::before { content: "\2713"; position: absolute; left: 2px; top: 0; font-family: var(--hand); font-size: 22px; font-weight: 700; color: var(--earth); }
.mdgv-sign { margin: 22px 0 0 !important; font-family: var(--hand); font-size: 26px !important; line-height: 1.2 !important; color: #6b4f2a !important; }
.mdgv-sign::before { content: "\2014  "; }
.mdgv-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.mdgv .mdx-btn--ghost { border-color: rgba(74, 63, 51, .25); }

.mdgv-board { position: relative; height: 640px; }
.mdgv-print { position: absolute; margin: 0; padding: 10px 10px 0; background: #fff; border-radius: 3px; box-shadow: 0 2px 3px rgba(0, 0, 0, .06), 0 22px 40px -24px rgba(60, 40, 20, .55); transform: rotate(var(--r, 0deg)); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.mdgv-print::before { content: ""; position: absolute; z-index: 1; top: -11px; left: 50%; width: 78px; height: 22px; margin-left: -39px; background: rgba(214, 196, 160, .7); transform: rotate(var(--t, -3deg)); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.mdgv-print img { display: block; width: 100%; aspect-ratio: var(--ar, 1); object-fit: cover; background: #e9e1d2; }
.mdgv-print figcaption { padding: 6px 4px 8px; font-family: var(--hand); font-size: 22px; font-weight: 600; line-height: 1.15; text-align: center; color: var(--pencil); }
.mdgv-print:hover { z-index: 9; transform: rotate(0deg) scale(1.04); box-shadow: 0 3px 4px rgba(0, 0, 0, .06), 0 34px 50px -26px rgba(60, 40, 20, .6); }
.mdgv-print--1 { --r: -4deg; --t: 4deg; --ar: 4 / 5; left: 0; top: 18px; width: 40%; z-index: 2; }
.mdgv-print--2 { --r: 3deg; --t: -2deg; left: 37%; top: 0; width: 37%; z-index: 1; }
.mdgv-print--3 { --r: -2deg; --t: 3deg; right: 0; top: 160px; width: 33%; z-index: 3; }
.mdgv-print--4 { --r: 5deg; --t: -5deg; --ar: 4 / 5; left: 8%; top: 380px; width: 27%; z-index: 3; }
.mdgv-print--5 { --r: -5deg; --t: 2deg; --ar: 4 / 5; left: 40%; top: 330px; width: 28%; z-index: 4; }

.mdgv-years { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 70px 0 0 !important; padding: 34px 0 0 !important; list-style: none; }
.mdgv-years::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; border-top: 2px dashed rgba(164, 73, 42, .35); }
.mdgv-years li { position: relative; display: block !important; padding: 0 !important; }
.mdgv-years li::before { content: ""; position: absolute; top: -32px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 3px solid var(--earth); }
.mdgv-years b { display: block; font-family: var(--hand); font-size: 34px; font-weight: 700; line-height: 1; color: var(--earth); }
.mdgv-years span { display: block; margin-top: 6px; font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--pencil); }

@media (min-width: 992px) and (max-width: 1199.98px) { .mdgv-grid { gap: 40px; } .mdgv-board { height: 560px; } .mdgv-print--4 { top: 330px; } .mdgv-print--5 { top: 290px; } }
@media (max-width: 991.98px) {
  .mdgv { padding: 76px 0 72px; }
  .mdgv-grid { grid-template-columns: 1fr; gap: 44px; }
  .mdgv-board { height: auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 14px; padding-top: 12px; }
  .mdgv-print { position: relative; left: auto !important; right: auto !important; top: auto !important; width: auto !important; }
  .mdgv-print--1 { grid-column: 1 / 4; } .mdgv-print--2 { grid-column: 4 / 7; align-self: center; }
  .mdgv-print--3 { grid-column: 1 / 3; } .mdgv-print--4 { grid-column: 3 / 5; } .mdgv-print--5 { grid-column: 5 / 7; }
  .mdgv-print--3, .mdgv-print--4, .mdgv-print--5 { --ar: 1; padding: 6px 6px 0; }
  .mdgv-print--3 figcaption, .mdgv-print--4 figcaption, .mdgv-print--5 figcaption { font-size: 17px; }
  .mdgv-years { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; margin-top: 48px !important; }
}
@media (max-width: 575.98px) {
  .mdgv-years { grid-template-columns: 1fr; gap: 18px; padding: 0 0 0 30px !important; }
  .mdgv-years::before { top: 6px; bottom: 6px; left: 6px; right: auto; border-top: 0; border-left: 2px dashed rgba(164, 73, 42, .35); }
  .mdgv-years li::before { top: 8px; left: -30px; }
  .mdgv-years b { font-size: 30px; }
  .mdgv-note { padding: 20px 18px 16px; }
}
@media (prefers-reduced-motion: reduce) { .mdgv-print { transition: none; } }