/* 1.11.0 — vocational education service system */
.service-system{
  --service-card-h:296px;
  --service-card-gap:22px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:112px 0 120px;
  background:
    radial-gradient(circle at 74% 34%,rgba(32,128,210,.12),transparent 34%),
    radial-gradient(circle at 24% 68%,rgba(50,197,255,.055),transparent 28%),
    #071b31!important;
  color:#f5f8fc;
}
.service-system-grid{position:absolute;inset:0;z-index:-1;opacity:.035;background-image:linear-gradient(rgba(118,177,226,.65) 1px,transparent 1px),linear-gradient(90deg,rgba(118,177,226,.65) 1px,transparent 1px);background-size:56px 56px;pointer-events:none}
.service-system .shell{max-width:min(var(--ui-content-width,1480px),calc(100% - 64px))}
.service-system-heading{max-width:1020px;margin-bottom:68px;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.service-system.is-entered .service-system-heading{opacity:1;transform:none}
.service-system-heading .eyebrow{display:block!important;margin:0 0 20px;color:#32c5ff!important;font-size:15px!important;font-weight:600;letter-spacing:.13em}
.service-system-heading h2{max-width:1000px;margin:0;color:#f5f8fc!important;font-size:clamp(38px,4vw,62px)!important;font-weight:650;line-height:1.16;letter-spacing:-.035em}
.challenge .section-heading .eyebrow,.method .section-heading .eyebrow,.industries .section-heading .eyebrow,.degree .section-heading .eyebrow,.news .section-heading .eyebrow{display:block!important;margin:0 0 20px;color:#32c5ff!important;font-size:15px!important;font-weight:600;line-height:1.5;letter-spacing:.13em;text-transform:uppercase}
.challenge .section-heading h2,.method .section-heading h2,.industries .section-heading h2,.degree .section-heading h2,.news .section-heading h2{font-size:clamp(38px,4vw,62px)!important;font-weight:650;line-height:1.16;letter-spacing:-.035em}
.inner-hero .eyebrow,.page-section .eyebrow,.cta .eyebrow{display:block!important;margin:0 0 20px;color:#32c5ff!important;font-size:15px!important;font-weight:600;line-height:1.5;letter-spacing:.13em;text-transform:uppercase}
.service-system-layout{display:grid;grid-template-columns:minmax(320px,30%) minmax(0,1fr);gap:clamp(64px,6vw,96px);align-items:start}
.service-tabs-wrap{position:sticky;top:112px;align-self:start}
.service-tabs{position:relative;display:flex;flex-direction:column;padding:9px 0}
.service-tabs::before{content:"";position:absolute;left:8px;top:30px;bottom:30px;width:1px;background:rgba(91,164,210,.35);transform:scaleY(0);transform-origin:top;transition:transform .65s .18s cubic-bezier(.16,1,.3,1)}
.service-system.is-entered .service-tabs::before{transform:scaleY(1)}
.service-tab{position:relative;display:grid;grid-template-columns:18px 48px minmax(0,1fr);align-items:center;gap:14px;min-height:88px;width:100%;padding:0;border:0;background:transparent;color:rgba(181,205,232,.55);font:inherit;text-align:left;cursor:pointer;transition:color .24s ease}
.service-tab-number{grid-column:2;color:rgba(83,136,204,.75);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:20px;font-weight:650;letter-spacing:-.03em;transition:color .24s ease}
.service-tab-title{grid-column:3;font-size:18px;font-weight:540;line-height:1.3;transition:color .24s ease}
.service-tab i{position:relative;z-index:1;grid-column:1;grid-row:1;width:17px;height:17px;border:1px solid #32c5ff;border-radius:50%;background:#071b31;box-shadow:0 0 0 0 rgba(50,197,255,0);transition:background-color .24s ease,box-shadow .24s ease,border-color .24s ease}
.service-tab.is-active{color:#f5f8fc}
.service-tab.is-active .service-tab-number{color:#32c5ff}
.service-tab.is-active i{border:4px solid #32c5ff;background:#f5f8fc;box-shadow:0 0 0 5px rgba(50,197,255,.11),0 0 18px rgba(50,197,255,.26)}
.service-tab:focus-visible{outline:2px solid #f5f8fc;outline-offset:5px;border-radius:8px}
.service-card-viewport{position:relative;height:690px;overflow:hidden;mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%)}
.service-card-track{display:flex;flex-direction:column;gap:var(--service-card-gap);will-change:transform;transform:translate3d(0,var(--track-y,0),0);transition:transform 760ms cubic-bezier(.22,1,.36,1)}
.service-system-card{position:relative;flex:0 0 var(--service-card-h);min-height:var(--service-card-h)!important;width:100%;padding:34px 40px 30px!important;border:1px solid rgba(91,164,210,.30)!important;border-radius:19px;background:rgba(10,37,66,.82)!important;box-shadow:0 18px 50px rgba(0,8,20,.16)!important;color:#f5f8fc;overflow:hidden;transition:border-color .24s ease,background-color .24s ease,box-shadow .24s ease!important}
.service-system-card::before,.service-system-card::after{display:none!important}
.service-system-card>header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;padding-bottom:17px}
.service-system-card>header::after{content:"";position:absolute;right:0;bottom:0;width:min(48%,420px);height:1px;background:rgba(91,164,210,.28)}
.service-card-number{color:rgba(83,136,204,.85);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:36px;font-weight:700;line-height:1;letter-spacing:-.06em;transition:color .24s ease}
.service-card-category{color:rgba(79,145,220,.85);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:650;letter-spacing:.08em;text-align:right;transition:color .24s ease}
.service-card-body{padding:22px 0 20px}
.service-system-card h3{position:relative;margin:0 0 12px!important;color:#f5f8fc!important;font-size:clamp(30px,2.5vw,36px)!important;font-weight:600!important;line-height:1.22;letter-spacing:-.025em}
.service-system-card h3::before{display:none!important}
.service-system-card p{max-width:760px!important;margin:0!important;color:rgba(213,226,241,.72)!important;font-size:17px!important;line-height:1.7!important}
.service-system-card>footer{display:flex;flex-wrap:wrap;gap:10px;padding-top:18px;border-top:1px solid rgba(91,164,210,.24)}
.service-system-card>footer span{padding:7px 13px;border:1px solid rgba(50,197,255,.45);border-radius:7px;color:#32c5ff;font-size:14px;line-height:1.3}
.service-system-card>b{position:absolute;right:24px;bottom:-28px;color:rgba(245,248,252,.025);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:148px;font-weight:750;line-height:1;letter-spacing:-.09em;pointer-events:none}
.service-system-card.is-active{border-color:rgba(50,197,255,.90)!important;box-shadow:0 0 0 1px rgba(50,197,255,.18),0 20px 60px rgba(0,14,32,.30)!important}
.service-system-card.is-active .service-card-number{color:#32c5ff}
.service-system-card.is-active .service-card-category{color:#55d6ff}
.service-system.is-motion-ready:not(.is-entered) .service-system-card:first-child{opacity:0;transform:translateY(16px)}
.service-system.is-motion-ready .service-system-card:first-child{transition:opacity .45s .28s ease,transform .45s .28s cubic-bezier(.16,1,.3,1),border-color .24s ease,box-shadow .24s ease!important}
.service-system.is-entered .service-system-card:first-child{opacity:1;transform:none}
.service-system.is-motion-ready:not(.is-entered) .service-tab i{opacity:0}
.service-system.is-entered .service-tab i{animation:service-node-in .28s ease both}
.service-system.is-entered .service-tab:nth-child(2) i{animation-delay:.08s}.service-system.is-entered .service-tab:nth-child(3) i{animation-delay:.16s}.service-system.is-entered .service-tab:nth-child(4) i{animation-delay:.24s}.service-system.is-entered .service-tab:nth-child(5) i{animation-delay:.32s}.service-system.is-entered .service-tab:nth-child(6) i{animation-delay:.4s}
@keyframes service-node-in{from{opacity:0;transform:scale(.65)}to{opacity:1;transform:scale(1)}}

@media(max-width:900px){
  .service-system{padding:86px 0 92px}
  .service-system .shell{max-width:calc(100% - 36px)}
  .service-system-heading{margin-bottom:42px}
  .service-system-heading h2{font-size:clamp(34px,8vw,48px)!important}
  .service-system-layout{display:block}
  .service-tabs-wrap{position:relative;top:auto;margin:0 -18px 28px;padding:0 18px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
  .service-tabs-wrap::-webkit-scrollbar{display:none}
  .service-tabs{display:flex;flex-direction:row;width:max-content;padding:2px 0 8px}
  .service-tabs::before,.service-tab::before,.service-tab i{display:none}
  .service-tab{display:flex;grid-template-columns:none;min-height:48px;width:auto;padding:0 18px;border:1px solid rgba(91,164,210,.28);border-radius:8px;gap:9px;scroll-snap-align:start;white-space:nowrap}
  .service-tab+.service-tab{margin-left:10px}
  .service-tab.is-active{border-color:#32c5ff;background:rgba(50,197,255,.08)}
  .service-tab-number{font-size:15px}.service-tab-title{font-size:15px}
  .service-card-viewport{height:auto;overflow:visible;mask-image:none;-webkit-mask-image:none}
  .service-card-track{gap:18px;transform:none!important;transition:none}
  .service-system-card{flex-basis:auto;min-height:0!important;height:auto;padding:28px 24px 24px!important;scroll-margin-top:88px}
  .service-system-card h3{font-size:28px!important}
  .service-system-card p{font-size:16px!important}
  .service-system-card>b{font-size:112px}
}
@media(max-width:520px){
  .service-system{padding:72px 0 78px}
  .service-system-heading .eyebrow{font-size:13px!important;line-height:1.5}
  .service-system-heading h2{font-size:34px!important}
  .service-system-card>header{align-items:flex-start;gap:16px}
  .service-card-number{font-size:30px}.service-card-category{max-width:55%;font-size:11px;line-height:1.45}
  .service-system-card h3{font-size:26px!important}
  .service-system-card>footer span{font-size:13px;padding:7px 10px}
  .challenge .section-heading .eyebrow,.method .section-heading .eyebrow,.industries .section-heading .eyebrow,.degree .section-heading .eyebrow,.news .section-heading .eyebrow{font-size:13px!important}
  .challenge .section-heading h2,.method .section-heading h2,.industries .section-heading h2,.degree .section-heading h2,.news .section-heading h2{font-size:34px!important}
  .inner-hero .eyebrow,.page-section .eyebrow,.cta .eyebrow{font-size:13px!important}
}
@media(prefers-reduced-motion:reduce){
  .service-system-heading,.service-tabs::before,.service-card-track,.service-system-card:first-child,.service-tab i{animation:none!important;transition-duration:.08s!important}
  .service-system-heading,.service-system.is-motion-ready:not(.is-entered) .service-system-card:first-child{opacity:1;transform:none}
  .service-tabs::before{transform:scaleY(1)}
  .service-system.is-motion-ready:not(.is-entered) .service-tab i{opacity:1}
}