.wsu-rail{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;margin-top:24px;padding:6px 3px;color:#17466a;text-align:center;border-radius:10px;transition:background .2s}
.wsu-rail img{width:66px;height:66px;object-fit:contain;mix-blend-mode:multiply}
.wsu-rail span{font:10px/1.4 Arial,sans-serif}
.wsu-rail:hover{background:#e3f0f5}
.wsu-rail:focus-visible{outline:2px solid #296b94;outline-offset:3px}
.wsu-membership{display:grid;grid-template-columns:minmax(220px,.75fr) 1.4fr;gap:clamp(32px,5vw,90px);align-items:center;margin-block:80px;padding:clamp(28px,4vw,65px);border:1px solid #d1e1e8;border-radius:24px;background:linear-gradient(120deg,#fff,#edf5f7);scroll-margin-top:100px;box-sizing:border-box}
.wsu-mark{padding:20px;background:white;border-radius:16px;box-shadow:0 16px 45px #17466a0a}
.wsu-mark img{width:100%;height:auto;display:block}
.wsu-copy h2{font:clamp(34px,3.7vw,60px)/1.08 Georgia,serif;letter-spacing:-1.5px;margin:20px 0 28px;color:#204b61}
.wsu-copy p{font-size:16px;line-height:1.8}
.wsu-copy .eyebrow{font-size:10px;letter-spacing:2px}
.wsu-copy .wsu-lead{font-size:20px;line-height:1.55;color:#234e65}
.wsu-copy .wsu-caption{font-size:12px;color:#536c78;margin:20px 0 0}
.wsu-copy .btn{margin-top:12px}
@media(min-width:801px) and (max-height:760px){.rail .rail-label{top:54%;font-size:17px}.wsu-rail{margin-top:12px}.wsu-rail img{width:54px;height:54px}}
@media(max-width:800px){.rail .wsu-rail{order:1;margin:0;width:54px;padding:3px;flex-shrink:0}.rail .wsu-rail img{width:48px;height:48px}.wsu-rail span{display:none}.rail .menu-toggle{order:2}.wsu-membership{grid-template-columns:1fr;margin-block:40px;gap:24px}.wsu-mark{width:200px;justify-self:center}.wsu-copy .wsu-lead{font-size:18px}}
@media(max-width:400px){.rail{padding-inline:12px;gap:8px}.rail .rail-brand,.rail .rail-brand img{width:120px}.rail .menu-toggle{gap:8px}}

/* A quiet photographic accent beside the membership story. */
.wsu-visual{display:grid;justify-items:center;gap:26px;min-width:0;width:100%;max-width:280px;justify-self:center}
.wsu-visual .wsu-mark{box-sizing:border-box;width:100%;max-width:100%;padding:14px;border-radius:14px}
.wsu-photo{width:100%;max-width:280px;margin:0;overflow:hidden;border-radius:16px;background:#eeeae2;border:1px solid #dce5e6;box-sizing:border-box}
.wsu-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 55%}
@media(max-width:800px){.wsu-visual{gap:22px;max-width:280px;justify-self:center}.wsu-visual .wsu-mark{width:100%}.wsu-photo{border-radius:12px}}
/* Direct access to water education beside the membership badge. */
.rail .wsu-education{gap:5px;padding:9px 4px;border:1px solid #dce5df;border-radius:12px;background:linear-gradient(145deg,#ffffff80,#eaf0e680);text-decoration:none;color:#233d32;box-sizing:border-box}.rail .wsu-education-title{font:14px/1.2 Georgia,serif}.rail .wsu-education-title span{font:12px Arial,sans-serif}.rail .wsu-education-caption{font:8px/1.5 Arial,sans-serif;letter-spacing:1.1px;color:#597260}.rail .wsu-education:hover{background:#e2ebdc;border-color:#9db69f}.rail .wsu-education:focus-visible{outline:3px solid #24556b;outline-offset:3px}@media(max-width:800px){.rail .wsu-education{width:64px;padding:3px;border-radius:8px;gap:1px}.rail .wsu-education img{width:38px;height:38px}.rail .wsu-education-title{display:block;font:9px/1.05 Arial,sans-serif}.rail .wsu-education-title br{display:none}.rail .wsu-education-title span{display:none}.rail .wsu-education-caption{display:none}}@media(min-width:801px) and (max-height:700px){.rail .rail-label{display:none}}

@media(max-width:800px){.rail .wsu-education-title br{display:block}}

.wsu-mark-education{display:block;text-decoration:none;color:#204b61;transition:box-shadow .2s}.wsu-mark-education:hover{box-shadow:0 12px 32px #17466a24}.wsu-mark-education:focus-visible{outline:3px solid #24556b;outline-offset:5px}.wsu-mark-cta{display:flex;justify-content:center;gap:12px;padding:14px 0 2px;font:15px/1.4 Georgia,serif}.wsu-mark-cta>span{font-family:Arial,sans-serif}@media(prefers-reduced-motion:reduce){.wsu-mark-education{transition:none}}

/* Crystal-glass education button: bevel, reflected light and tactile states. */
.wsu-visual .wsu-mark-education{position:relative;isolation:isolate;overflow:hidden;padding:18px;border-radius:24px;border:1px solid #91bfd0;background:linear-gradient(135deg,#fff 0%,#e3f5fc 34%,#c8e6f0 66%,#f5fcff 100%);box-shadow:inset 0 2px 2px #fff,inset 2px 0 3px #ffffffd9,inset -3px -4px 7px #619eb740,0 7px 0 #8db5c5,0 10px 0 #c6dce5,0 20px 32px #17466a30;cursor:pointer;transform:translateY(0);transition:transform .2s,box-shadow .2s,border-color .2s}
.wsu-mark-education::before{content:"";position:absolute;inset:5px;border:1px solid #ffffffc9;border-radius:19px;pointer-events:none;z-index:2;background:linear-gradient(120deg,transparent 24%,#ffffff70 25%,#ffffff12 38%,transparent 39%,transparent 74%,#ffffff65 75%,transparent 78%)}
.wsu-mark-education::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,#ffffffa6,transparent 40%,#a1d3e329);pointer-events:none;z-index:0}
.wsu-mark-education img{position:relative;z-index:1;border-radius:9px;border:1px solid #d2e4eb;box-sizing:border-box;box-shadow:0 2px 6px #17466a14}
.wsu-mark-education .wsu-mark-cta{position:relative;z-index:3;align-items:center;justify-content:space-between;gap:8px;margin-top:15px;padding:12px 14px;min-height:48px;box-sizing:border-box;border-radius:14px;border:1px solid #95bccd;background:linear-gradient(#ffffffed,#d7edf6);box-shadow:inset 0 2px 1px #fff,0 3px 0 #94b8c8,0 5px 9px #24556b1a;color:#163e55;font:17px/1.25 Georgia,serif;text-shadow:0 1px #fff}
.wsu-mark-education .wsu-mark-cta>span{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:linear-gradient(#fff,#bddfeD);border:1px solid #9ac0d0;box-shadow:inset 0 1px #fff,0 2px 3px #24556b26;font-size:20px}
@media(hover:hover){.wsu-visual .wsu-mark-education:hover{transform:translateY(-4px);border-color:#5e9fb9;box-shadow:inset 0 2px 2px #fff,inset -3px -4px 7px #619eb740,0 10px 0 #8db5c5,0 13px 0 #c6dce5,0 26px 40px #17466a3d}}
.wsu-visual .wsu-mark-education:active{transform:translateY(5px);box-shadow:inset 0 2px 5px #619eb733,0 2px 0 #8db5c5,0 7px 14px #17466a24}
.wsu-visual .wsu-mark-education:focus-visible{outline:3px solid #17557b;outline-offset:7px}
@media(prefers-reduced-motion:reduce){.wsu-visual .wsu-mark-education{transition:none}.wsu-visual .wsu-mark-education:hover,.wsu-visual .wsu-mark-education:active{transform:none}}

/* Slow glints on the crystal rim invite interaction without obscuring the logo. */
.wsu-mark-education .wsu-sparkles{position:absolute;inset:0;pointer-events:none;z-index:4}
.wsu-sparkles i{position:absolute;font-style:normal;color:#fff;text-shadow:0 0 4px #fff,0 0 10px #75c9eb;font-size:21px;opacity:.35;animation:wsu-glint 4.8s ease-in-out infinite}
.wsu-sparkles i:nth-child(1){left:5px;top:12%;animation-delay:-.7s}
.wsu-sparkles i:nth-child(2){right:4px;top:51%;font-size:26px;animation-delay:-2.4s}
.wsu-sparkles i:nth-child(3){left:15%;bottom:3px;font-size:17px;animation-delay:-3.8s}
.wsu-visual .wsu-mark-education::before{background:linear-gradient(115deg,transparent 32%,#ffffff10 40%,#ffffffa3 48%,#ffffff22 54%,transparent 62%);background-size:300% 100%;animation:wsu-crystal-sheen 7s ease-in-out infinite}
@keyframes wsu-glint{0%,100%{opacity:.25;transform:scale(.75)}50%{opacity:.95;transform:scale(1.12)}}
@keyframes wsu-crystal-sheen{0%,18%{background-position:150% 0}65%,100%{background-position:-50% 0}}
@media(hover:hover){.wsu-mark-education:hover .wsu-mark-cta{background:linear-gradient(#fff,#c3e7f6);border-color:#69a9c4}.wsu-mark-education:hover .wsu-mark-cta>span{transform:translate(2px,-2px);box-shadow:0 0 12px #ffffffd9,0 2px 4px #24556b33}}
.wsu-mark-education .wsu-mark-cta>span{transition:transform .2s,box-shadow .2s}
@media(prefers-reduced-motion:reduce){.wsu-visual .wsu-mark-education::before,.wsu-sparkles i{animation:none}.wsu-sparkles i{opacity:.65}.wsu-mark-education .wsu-mark-cta>span{transition:none}.wsu-mark-education:hover .wsu-mark-cta>span{transform:none}}
