/* The dashboard owns the content and its order; this sheet styles its presentation. */
.vision-page {
    background: #f4f7f3;
    padding: 40px 24px 64px;
    color: #304438;
}
.vision-document {
    max-width: 960px;
    margin: 0 auto;
    padding: 48px 64px;
    background: #fff;
    border: 1px solid #e2e9df;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(35, 62, 43, .035);
}
.vision-content {
    font-size: 1.05rem;
    line-height: 1.85;
    overflow-wrap: anywhere;
    overflow-x: auto;
}
.vision-content h1, .vision-content h2, .vision-content h3, .vision-content h4 {
    color: #284a35;
    line-height: 1.3;
    letter-spacing: -.025em;
    font-weight: 800;
    margin-top: 1.6em;
    margin-bottom: .75em;
}
.vision-content > :first-child {
    margin-top: 0 !important;
}
.vision-content > h1:first-child, .vision-content > h1:first-child, .vision-content > h2:first-child {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: 22px !important;
    line-height: 1.15;
    letter-spacing: -.04em;
}
.vision-content h2 { font-size: 1.8rem; }
.vision-content h3 { font-size: 1.4rem; }
.vision-content p { margin-bottom: 1.3em; }
.vision-content ul, .vision-content ol { padding-left: 1.5em; }
.vision-content li { padding-left: 6px; margin: .65em 0; }
.vision-content li::marker { color: #799767; }
.vision-content img {
    max-width: 100%;
    max-height: 220px;
    height: auto;
    width: auto;
    object-fit: contain;
    border-radius: 12px;
}
.vision-content video, .vision-content iframe { max-width: 100%; }
.vision-content hr {
    height: 0;
    border: 0;
    border-top: 1px solid #e5ebe2;
    margin: 30px 0 !important;
}
.vision-content a { color: #34734c; text-underline-offset: 4px; }
.vision-content a:focus-visible { outline: 3px solid #a47b39; outline-offset: 4px; }
.vision-content blockquote {
    border-left: 3px solid #9cb98b;
    margin: 24px 0;
    padding: 16px 24px;
    background: #f3f7ef;
    border-radius: 0 12px 12px 0;
}
.vision-content table { border-collapse: collapse; max-width: 100%; }
.vision-content td, .vision-content th { padding: 10px 14px; border: 1px solid #dfe7db; }
@media (max-width: 600px) {
    .vision-page { padding: 20px 12px 36px; }
    .vision-document { padding: 30px 20px; border-radius: 14px; }
    .vision-content { font-size: 1rem; line-height: 1.8; }
    .vision-content h3 { font-size: 1.25rem; }
    .vision-content img { max-height: 180px; }
}

.principles-section { max-width: 1100px; margin: 0 auto 36px; }
.principles-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0 0 20px; }
.principles-heading h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.035em; margin: 0; color: #284a35; }
.principles-window { overflow-x: auto; border-radius: 20px; padding: 6px 0 18px; }
.principles-window.is-moving { overflow: hidden; }
.principles-track { display: flex; width: max-content; }
.principles-group { display: flex; gap: 18px; padding-right: 18px; }
.is-moving .principles-track { animation: principles-drift 65s linear infinite; }
.principle-card { width: 280px; padding: 26px; border-radius: 20px; border: 1px solid #dce6d4; background: #e9f0df; box-sizing: border-box; transition: transform .25s, box-shadow .25s; overflow-wrap: anywhere; }
.principle-card:nth-child(3n+2) { background: #fbf0da; border-color: #eee1c7; }
.principle-card:nth-child(3n) { background: #e4efed; border-color: #d2e4df; }
.principle-number { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #ffffffb3; border-radius: 12px; background: #ffffff70; color: #546448; font-size: .8rem; font-weight: 800; margin-bottom: 22px; }
.principle-card h2 { color: #2b4735; font-size: 1.15rem; line-height: 1.4; letter-spacing: -.02em; margin: 0; }
.principle-card p { font-size: .9rem; line-height: 1.7; color: #53634f; margin: 12px 0 0; }
.principles-window:hover .principles-track { animation-play-state: paused; }
.principle-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px #324d3510; }
@keyframes principles-drift { to { transform: translateX(-50%); } }
@media (max-width: 600px) { .principles-heading { gap: 10px; } .principle-card { width: 250px; padding: 22px; } }
@media (prefers-reduced-motion: reduce) { .is-moving .principles-track { animation: none; } .principles-window.is-moving { overflow-x: auto; } .principles-group[aria-hidden] { display: none; } .principle-card { transition: none; } }

/* Institutional text remains editable in admin, with consistent public formatting. */
.vision-document { max-width: 1000px; padding: 44px 64px; }
.vision-content { max-width: 780px; margin: auto; color: #425248; }
.vision-content > h1:first-child, .vision-content > h2:first-child { text-align: center; margin-bottom: 28px !important; }
.vision-content h3 { font-size: 1.3rem; padding: 16px 20px; border-radius: 12px; background: #eff4e8; }
.vision-content p { line-height: 1.85; }
.vision-content img { display: block; margin: 26px auto !important; border-radius: 16px; }
.vision-building { margin: 0 auto 34px; max-width: 660px; }
.vision-building a { display: block; border-radius: 16px; overflow: hidden; background: #edf2e6; }
.vision-content .vision-building img { width: 100%; height: 260px; max-height: 260px; object-fit: cover; margin: 0 auto !important; }
.vision-building figcaption { text-align: center; font-size: .77rem; color: #7a8870; margin-top: 10px; }
@media (max-width: 600px) { .vision-document { padding: 28px 20px; } .vision-content h3 { padding: 14px 16px; font-size: 1.15rem; } .vision-content .vision-building img { height: 190px; } }