:root { --vision-green:#164e3f; --vision-pink:#9b0b62; --vision-gold:#d2a94f; --vision-ink:#1e293b; --vision-muted:#64748b; --vision-line:#e2e8f0; }
.vision-page { padding:.5rem 0 1rem; }.vision-page #vision,.vision-page #mission,.vision-page #identity,.vision-page #philosophy { scroll-margin-top:170px; }
.vision-hero { display:grid; overflow:hidden; grid-template-columns:1.2fr .8fr; background:var(--vision-green); }.vision-hero-image { display:flex; align-items:center; background:#e8eeec; }.vision-hero-image img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }.vision-hero-copy { display:flex; padding:clamp(2rem,5vw,4rem); justify-content:center; flex-direction:column; color:#fff; }.vision-hero-copy > span,.vision-heading > span,.vision-statement span,.principle-card span,.vision-contact span { font-size:.7rem; font-weight:700; letter-spacing:.16em; }.vision-hero h1 { margin:.75rem 0; color:#fff; font-size:clamp(2rem,4vw,3.4rem); }.vision-hero p { margin:0; color:rgba(255,255,255,.72); }
.vision-jump-nav { display:grid; margin:1.25rem 0 5rem; padding:1rem; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; background:#eef3f1; border:1px solid #dce7e3; }.vision-jump-nav a { display:grid; min-width:0; min-height:76px; padding:.8rem 1rem; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:.7rem; color:var(--vision-ink); background:#fff; border:1px solid var(--vision-line); border-radius:.75rem; font-size:.86rem; font-weight:600; text-decoration:none; }.vision-jump-nav a:hover { color:var(--vision-green); border-color:#9ebeb3; }.vision-jump-nav i { display:grid; width:38px; height:38px; color:#fff; background:var(--vision-green); border-radius:.65rem; place-items:center; }
.vision-statement { display:grid; max-width:1080px; margin:0 auto 6rem; padding:clamp(2rem,5vw,4rem); grid-template-columns:90px 1fr; gap:2rem; background:#fff; border:1px solid var(--vision-line); border-left:5px solid var(--vision-pink); }.vision-statement-icon { display:grid; width:82px; height:82px; color:#fff; background:var(--vision-green); border-radius:.75rem; place-items:center; font-size:2rem; }.vision-statement span,.vision-heading span,.principle-card span,.vision-contact span { color:var(--vision-pink); }.vision-statement h2 { margin:.45rem 0 1rem; color:var(--vision-green); font-size:clamp(1.6rem,3vw,2.25rem); }.vision-statement blockquote { margin:0; color:var(--vision-ink); font-size:clamp(1.1rem,2.2vw,1.45rem); line-height:1.9; }
.vision-section { margin-bottom:6rem; }.vision-heading { margin-bottom:1.75rem; }.vision-heading h2 { margin:.45rem 0; color:var(--vision-green); font-size:clamp(1.7rem,3vw,2.35rem); }.vision-heading p { margin:0; color:var(--vision-muted); }.mission-layout { display:grid; grid-template-columns:.85fr 1.15fr; align-items:start; gap:1.5rem; }.mission-image { position:sticky; top:170px; overflow:hidden; margin:0; background:#fff; border:1px solid var(--vision-line); }.mission-image img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }.mission-image figcaption { padding:1rem; color:var(--vision-muted); font-size:.78rem; text-align:center; }.vision-mission-list { display:grid; margin:0; padding:0; gap:.9rem; list-style:none; }.vision-mission-list li { display:grid; min-height:94px; padding:1rem 1.2rem; grid-template-columns:42px 46px 1fr; align-items:center; gap:.75rem; background:#fff; border:1px solid var(--vision-line); }.mission-number { color:#cbd7d3; font-size:1.1rem; font-weight:700; }.vision-mission-list li > i { display:grid; width:42px; height:42px; color:#fff; background:var(--vision-green); border-radius:.75rem; place-items:center; }.vision-mission-list p { margin:0; color:var(--vision-muted); font-size:.88rem; line-height:1.7; }
.principles-grid { display:grid; margin-bottom:5rem; grid-template-columns:repeat(2,1fr); gap:1.25rem; }.principle-card { display:grid; min-height:270px; padding:2.5rem; grid-template-columns:58px 1fr; align-items:start; gap:1.25rem; background:#fff; border:1px solid var(--vision-line); }.principle-icon { display:grid; width:58px; height:58px; color:#fff; background:var(--vision-pink); border-radius:.75rem; place-items:center; font-size:1.35rem; }.principle-card h2 { margin:.5rem 0 .85rem; color:var(--vision-green); font-size:1.4rem; }.principle-card p { margin:0; color:var(--vision-muted); line-height:1.85; }
.vision-contact { display:flex; padding:2rem 2.5rem; align-items:center; justify-content:space-between; gap:2rem; color:#fff; background:var(--vision-green); }.vision-contact span { color:var(--vision-gold); }.vision-contact h2 { margin:.35rem 0 0; color:#fff; font-size:1.5rem; }.vision-contact > div:last-child { display:flex; gap:.75rem; }.vision-contact a { padding:.7rem 1rem; color:var(--vision-green); background:#fff; border:1px solid #fff; font-size:.85rem; font-weight:700; text-decoration:none; }
@media(max-width:991.98px){.vision-page #vision,.vision-page #mission,.vision-page #identity,.vision-page #philosophy{scroll-margin-top:110px}.vision-hero{grid-template-columns:1fr}.vision-hero-image{height:auto}.mission-layout{grid-template-columns:1fr}.mission-image{position:static}.principles-grid{grid-template-columns:1fr}.vision-contact{align-items:flex-start;flex-direction:column}}
@media(max-width:767.98px){.vision-jump-nav{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:4rem}.vision-statement{grid-template-columns:1fr}.vision-statement-icon{width:64px;height:64px}.vision-contact>div:last-child{width:100%;flex-direction:column}.vision-contact a{text-align:center}}
@media(max-width:575.98px){.vision-hero-copy{padding:2rem}.vision-jump-nav{padding:.75rem;gap:.65rem}.vision-jump-nav a{min-height:68px;padding:.6rem;grid-template-columns:32px minmax(0,1fr);gap:.5rem;font-size:.77rem}.vision-jump-nav i{width:32px;height:32px}.vision-statement{padding:1.5rem}.vision-mission-list li{padding:.9rem;grid-template-columns:34px 38px 1fr;gap:.55rem}.vision-mission-list li>i{width:38px;height:38px}.vision-mission-list p{font-size:.8rem}.principle-card{padding:1.5rem;grid-template-columns:1fr}.vision-contact{padding:1.5rem}}

.vision-hero h1 > span { white-space:nowrap; }
.vision-statement { border-left-width:1px; border-left-color:var(--vision-line); }
@media(min-width:992px){.vision-hero{grid-template-columns:1.1fr .9fr}.vision-hero h1{font-size:clamp(2rem,3vw,3rem)}}