.purpose-card{margin:20px 0;border:1px solid #bddfeb;border-radius:16px;overflow:hidden;background:linear-gradient(130deg,#effaff,#fff 65%,#f1f9f3);box-shadow:0 5px 20px #075b8808}.purpose-card>summary{display:flex;align-items:center;gap:18px;padding:20px;cursor:pointer;list-style:none}.purpose-card>summary::-webkit-details-marker{display:none}.purpose-heading{font-size:21px;line-height:1.35;font-weight:800;color:#173e52;flex:1}.purpose-icons{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.purpose-item{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:120px;color:#075b88}.purpose-icon{display:grid;place-items:center;position:relative;isolation:isolate;width:74px;height:74px;border-radius:22px;background:linear-gradient(145deg,#dff5ff,#e9f6ed);border:1px solid #a3d9e9;color:#087da7}.purpose-icon:before{content:"";position:absolute;inset:6px;border:1px dashed #3c987455;border-radius:17px;z-index:-1}.purpose-icon svg{width:54px;height:54px;overflow:visible}.purpose-label{font-size:12px;font-weight:700;text-align:center;line-height:1.3}.purpose-icon .purpose-ray,.purpose-icon .purpose-arrow,.purpose-icon .purpose-heart,.purpose-icon .purpose-key{stroke:#22734f}.purpose-expand{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:#e0f1fa;color:#075b88;font-size:24px}.purpose-card[open] .purpose-expand{transform:rotate(45deg)}.purpose-body{padding:0 24px 24px;color:#274953}.purpose-card summary:focus-visible{outline:3px solid #075b88;outline-offset:-5px}.purpose-page-icons{padding:18px;margin:18px 0;background:linear-gradient(110deg,#eef9ff,#f2faf4);border:1px solid #bddfeb;border-radius:14px}.purpose-page-icons .purpose-icons{gap:24px}@media(prefers-reduced-motion:no-preference){.purpose-icon,.purpose-expand,.purpose-icon svg{transition:transform .25s ease,box-shadow .25s ease}.purpose-card summary:hover .purpose-icon,.purpose-card summary:focus-visible .purpose-icon{transform:translateY(-4px);box-shadow:0 8px 15px #075b8820}.purpose-card summary:hover .purpose-mission svg,.purpose-card summary:focus-visible .purpose-mission svg{transform:rotate(12deg)}.purpose-card summary:hover .purpose-goal svg,.purpose-card summary:focus-visible .purpose-goal svg{transform:scale(1.08)}.purpose-card summary:hover .purpose-values svg,.purpose-card summary:focus-visible .purpose-values svg{transform:scale(1.06)}}@media(max-width:650px){.purpose-card>summary{flex-wrap:wrap;padding:16px;gap:12px}.purpose-card .purpose-icons{width:100%;gap:14px}.purpose-heading{font-size:18px}.purpose-icon{width:60px;height:60px;border-radius:18px}.purpose-icon svg{width:44px;height:44px}.purpose-body{padding:0 16px 18px}}

.purpose-card.purpose-link{display:flex;align-items:center;gap:20px;padding:22px;text-decoration:none}.purpose-link:hover,.purpose-link:focus-visible{border-color:#35b5e5;box-shadow:0 8px 24px #075b881a}.purpose-link:focus-visible{outline:3px solid #075b88;outline-offset:3px}.submenu-hero>.purpose-icons{flex:0 0 auto}@media(prefers-reduced-motion:no-preference){.purpose-link .purpose-icon{transition:transform .2s ease}.purpose-link:hover .purpose-icon,.purpose-link:focus-visible .purpose-icon{transform:translateY(-4px)}}@media(max-width:650px){.purpose-card.purpose-link{flex-wrap:wrap;padding:16px}.purpose-link>.purpose-icons{width:100%}.submenu-hero>.purpose-icons{width:100%}}

.article-page .about-interactive-header{position:relative;isolation:isolate;overflow:hidden;min-height:120px;padding:28px;background:linear-gradient(115deg,#e1f4ff,#f4fbff 58%,#e6f6ee);border:1px solid #b5ddeb;box-shadow:0 6px 24px #075b880c;--about-x:0px;--about-y:0px}
.about-interactive-header>.zssf-icon,.about-interactive-header>div{position:relative;z-index:1}.article-page .about-interactive-header h1{margin:0;color:#075b88}.about-header-pattern{position:absolute;z-index:0;inset:-60px -120px -60px 32%;background:url('assets/about-pattern.svg') repeat;background-size:220px 150px;opacity:.14;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 35%);transform:translate(var(--about-x),var(--about-y))}.purpose-link{position:relative;isolation:isolate;overflow:hidden}.purpose-link:after{content:"";position:absolute;right:-40px;top:-40px;bottom:-40px;width:38%;background:url('assets/about-pattern.svg') repeat;background-size:180px 123px;opacity:.06;z-index:-1;pointer-events:none}.purpose-link:hover:after,.purpose-link:focus-visible:after{opacity:.13}
@media(prefers-reduced-motion:no-preference){.about-header-pattern{animation:about-pattern-drift 28s linear infinite;transition:transform .5s ease,opacity .3s ease}.about-interactive-header:hover .about-header-pattern{opacity:.22}.about-interactive-header{transition:box-shadow .25s ease,border-color .25s ease}.about-interactive-header:hover{border-color:#35b5e5;box-shadow:0 10px 30px #075b881a}.purpose-link:after{animation:about-pattern-drift 35s linear infinite;transition:opacity .3s ease}@keyframes about-pattern-drift{to{background-position:220px -150px}}}
@media(prefers-reduced-motion:reduce){.about-header-pattern{transform:none}}
@media(max-width:600px){.article-page .about-interactive-header{min-height:90px;padding:20px}.about-header-pattern{inset:-30px -80px -30px 15%}}

/* Approved compact About ZSSF link-card sample. */
.article-page .about-interactive-header{min-height:132px;padding:26px;gap:18px;border-radius:14px}
.article-page .about-interactive-header>.about-institution-icon{width:62px;height:62px}
.purpose-card.purpose-link{min-height:88px;margin:14px 0;padding:18px;gap:16px;border-radius:13px}
.purpose-link .purpose-label{display:none}.purpose-link .purpose-icon{width:52px;height:52px;border-radius:16px}.purpose-link .purpose-icon svg{width:38px;height:38px}.purpose-link .purpose-heading{font-size:16px;line-height:1.4;font-weight:700}.purpose-link .purpose-expand{background:transparent;color:#268159}
@media(max-width:650px){.purpose-card.purpose-link{flex-wrap:nowrap}.purpose-link>.purpose-icons{width:auto;flex:0 0 auto}.article-page .about-interactive-header{padding:20px;min-height:120px}.article-page .about-interactive-header>.about-institution-icon{width:50px;height:50px}}