html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.sp{--ink:#1c2733;--navy:#1f3a5f;--text:#3d4752;--muted:#6b7480;--rule:#dfe3e8;--wash:#f3f5f8;--open:#2e7d4f;--closed:#8a9199;color:var(--text)}
.sp .lead{font-size:1.1rem;line-height:1.7;max-width:40em;margin:0 0 2rem}
.sp h2{font-size:1.45rem;color:var(--ink);margin:0 0 .6rem;padding:0;scroll-margin-top:1.25rem}
.sp p,.sp li,.sp dd{line-height:1.7}
.sp a:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* Position tiles */

.rs-glance{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:0 0 34px;position:relative;z-index:2}
.rs-g{display:block;background:#fff;border-radius:10px;padding:14px 6px 12px;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.12);border-top:3px solid var(--c);text-decoration:none!important;transition:transform .15s ease,box-shadow .15s ease}
.rs-g:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.16)}
.rs-g i{display:block;font-size:20px;color:var(--c);margin-bottom:6px}.rs-g b{display:block;font-size:14px;color:#1f3a5f}
.rs-g span{display:block;margin-top:3px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--s)}

/* Openings table */
.sp-open{width:100%;border-collapse:collapse;margin:0 0 2.75rem;font-size:.95rem;border-top:2px solid var(--navy)}
.sp-open th{text-align:left;font-weight:700;color:var(--ink);padding:.7rem .75rem .7rem 0;border-bottom:1px solid var(--rule)}
.sp-open td{padding:.8rem .75rem .8rem 0;border-bottom:1px solid var(--rule);vertical-align:top}
.sp-open td:first-child a{font-weight:700;color:var(--navy);border-bottom:0}
.sp-open tr.is-closed td{color:var(--muted)}
.sp-st{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;font-weight:700}
.sp-st:before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--open)}
.sp-st.open{color:var(--open)}
.sp-st.closed{color:var(--closed)}.sp-st.closed:before{background:var(--closed)}
.sp-when{display:block;font-size:.85rem;color:var(--muted);margin-top:.15rem}
.sp-routes dd.sp-rs{margin:0 0 .45rem;font-size:.9rem;color:var(--muted)}
.sp-routes dd.sp-rs .sp-st{margin-right:.35rem}

/* Position sections */
.sp-sec{padding:1.75rem 0 1.5rem;border-top:1px solid var(--rule)}
.sp-sec.is-closed h2,.sp-sec.is-closed p{color:var(--muted)}
.sp-sec ul{margin:.25rem 0 1rem 1.2rem}
.sp-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin:1.25rem 0 1rem}
.sp-routes dt{font-weight:700;color:var(--ink);margin:0 0 .3rem}
.sp-routes dd{margin:0;font-size:.95rem}
.sp-routes div{border-left:3px solid var(--navy);padding-left:.9rem;scroll-margin-top:1.25rem}
.sp-routes div#phd-international{border-left-color:var(--closed)}
.sp-ext{font-weight:700}

/* How to apply */
.sp-steps{counter-reset:s;list-style:none;margin:.75rem 0 0;padding:0}
.sp-steps li{counter-increment:s;position:relative;padding:0 0 1rem 2.6rem}
.sp-steps li:before{content:counter(s);position:absolute;left:0;top:.05rem;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--wash);color:var(--navy);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.9rem}

/* Contact */
.sp-contact{margin:2rem 0 1rem;background:var(--navy);color:#fff;border-radius:6px;padding:1.75rem 2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem}
.sp-contact h2{color:#fff;margin:0 0 .25rem}
.sp-contact p{margin:0;opacity:.9}
.sp-btn{display:inline-block;background:#fff;color:var(--navy)!important;font-weight:700;padding:.75rem 1.5rem;border-radius:4px;border-bottom:0!important;text-decoration:none!important}
.sp-btn:hover{background:var(--wash)}
.sp-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media only screen and (max-width:37.5em){
 .rs-glance{grid-template-columns:repeat(2,1fr);margin:0 0 28px}
 .sp-routes{grid-template-columns:1fr}
 .sp-open thead{position:absolute;left:-9999px}
 .sp-open,.sp-open tbody,.sp-open tr,.sp-open td{display:block;width:100%}
 .sp-open tr{padding:.75rem 0;border-bottom:1px solid var(--rule)}
 .sp-open td{border:0;padding:.15rem 0}
 .sp-open td[data-l]:before{content:attr(data-l) ": ";color:var(--muted)}
 .sp-contact{padding:1.5rem}
}
