/* Core Mission Initiatives: flip cards (Option A) */
.mflip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.mflip{perspective:1400px;height:430px;cursor:pointer;outline:none;border-radius:16px}
.mflip:focus-visible{box-shadow:0 0 0 3px rgba(201,168,76,.7)}
.mflip-in{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.22,.7,.2,1);transform-style:preserve-3d}
.mflip:hover .mflip-in,.mflip.on .mflip-in{transform:rotateY(180deg)}
.mflip-front,.mflip-back{position:absolute;inset:0;border-radius:16px;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
/* Front: hidden outright once the card is flipped, so its text can never show on the back */
.mflip-front{transform:rotateY(0deg) translateZ(1px);background:linear-gradient(145deg,var(--sapphire-800),var(--sapphire-600));
  background-size:cover;background-position:center;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;
  visibility:visible;transition:visibility 0s linear 0s}
.mflip:hover .mflip-front,.mflip.on .mflip-front{visibility:hidden;transition:visibility 0s linear .35s}
.mflip-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,29,48,.05) 25%,rgba(10,29,48,.88) 100%)}
.mflip-front h3,.mflip-hint{position:relative;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.mflip-front h3{font-family:var(--serif);font-size:1.9rem;line-height:1.15;color:#fff;margin:0 0 10px;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.mflip-hint{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#E3C877}
/* Back: heading only (no number), text 1px larger than the earlier mockup */
.mflip-back{transform:rotateY(180deg) translateZ(1px);background:#FDFCF9;border:1px solid rgba(20,30,40,.12);padding:26px 28px;
  display:flex;flex-direction:column;visibility:hidden;transition:visibility 0s linear .35s}
.mflip:hover .mflip-back,.mflip.on .mflip-back{visibility:visible;transition:visibility 0s linear 0s}
.mflip-back::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--sapphire-600))}
.mflip-back h3{font-family:var(--serif);font-size:24.2px;line-height:1.15;color:var(--sapphire-950);margin:0 0 10px}
.mflip-back p{font-size:16.5px;line-height:1.55;color:#4b5158;margin:0;text-align:left}
.mflip-back .tltm-help{margin-top:auto;padding-top:12px;font-size:15px;border-top:1px solid rgba(201,168,76,.45)}
.mflip-back .tltm-help a{color:var(--sapphire-800);font-weight:600;text-decoration:none;white-space:nowrap}
.mflip-back .tltm-help a:hover{text-decoration:underline}
@media(max-width:1120px){.mflip{height:500px}}
@media(max-width:900px){.mflip-grid{grid-template-columns:1fr}.mflip{height:460px}}
@media(max-width:460px){.mflip{height:640px}.mflip-front h3{font-size:1.65rem}}
@media(prefers-reduced-motion:reduce){.mflip-in{transition:none}}
@media(hover:none){.mflip:hover .mflip-in{transform:none}.mflip:hover .mflip-front{visibility:visible}.mflip:hover .mflip-back{visibility:hidden}
  .mflip.on .mflip-in{transform:rotateY(180deg)}.mflip.on .mflip-front{visibility:hidden}.mflip.on .mflip-back{visibility:visible}}
@media(max-width:360px){.mflip{height:740px}}