.degree-advancement{
  --degree-accent:#32c5ff;
  --degree-ink:#f5f8fc;
  --degree-muted:rgba(220,231,243,.76);
  --degree-radius:24px;
  position:relative;
  padding:64px 0;
  overflow:hidden;
  background:#071b31!important;
  color:var(--degree-ink)
}
.degree-advancement:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 84% 18%,rgba(50,197,255,.055),transparent 32%);
  opacity:.8
}
.degree-section-label{
  position:relative;
  z-index:1;
  max-width:min(var(--ui-content-width,1520px),calc(100% - 48px));
  margin-bottom:28px
}
.degree-section-label p{
  margin:0;
  color:var(--degree-accent);
  font-size:15px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.08em
}
.degree-section-label span{
  display:block;
  width:44px;
  height:2px;
  margin-top:12px;
  background:var(--degree-accent)
}
.degree-pair{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,40%) minmax(0,60%);
  gap:22px;
  align-items:stretch;
  max-width:min(var(--ui-content-width,1520px),calc(100% - 48px));
  height:clamp(540px,37vw,580px)
}
.degree-visual,.degree-content-card{
  min-width:0;
  min-height:0;
  height:100%;
  border-radius:var(--degree-radius);
  overflow:hidden
}
.degree-visual{
  position:relative;
  margin:0;
  border:1px solid rgba(132,175,218,.4);
  background:#0b284a;
  box-shadow:0 28px 72px rgba(0,10,26,.24)
}
.degree-visual picture,.degree-visual img{display:block;width:100%;height:100%}
.degree-visual img{
  object-fit:cover;
  transform:scale(1.01);
  transition:transform 900ms cubic-bezier(.16,1,.3,1)
}
.degree-visual-scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(4,19,37,.05),rgba(4,19,37,.26));
  pointer-events:none
}
.degree-visual:hover img{transform:scale(1.025)}
.degree-glass-card{
  position:absolute;
  top:50%;
  left:50%;
  bottom:auto;
  display:flex;
  width:66%;
  height:clamp(210px,15vw,230px);
  min-height:0;
  padding:28px 30px;
  flex-direction:column;
  justify-content:center;
  border:1px solid rgba(194,220,247,.34);
  border-radius:20px;
  background:rgba(7,27,49,.74);
  box-shadow:0 24px 70px rgba(0,10,26,.28);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transform:translate(-50%,-50%);
  transition:transform 350ms cubic-bezier(.16,1,.3,1),border-color 350ms ease,background-color 350ms ease
}
.degree-visual:hover .degree-glass-card{
  transform:translate(-50%,-50%) translateY(-3px);
  border-color:rgba(194,220,247,.48);
  background:rgba(10,33,58,.77)
}
.degree-glass-card span,.degree-glass-card small{
  color:var(--degree-accent);
  font-size:15px;
  font-weight:600;
  line-height:1.45;
  letter-spacing:.06em
}
.degree-glass-card strong{
  margin:12px 0 10px;
  color:var(--degree-ink);
  font-size:clamp(42px,3.5vw,56px);
  font-weight:620;
  line-height:1.05;
  letter-spacing:-.035em
}
.degree-glass-card small{letter-spacing:.04em}

.degree-content-card{
  display:flex;
  padding:26px 38px 24px;
  flex-direction:column;
  border:1px solid rgba(132,175,218,.4);
  background:linear-gradient(145deg,rgba(11,34,59,.96),rgba(15,43,75,.92));
  box-shadow:0 28px 72px rgba(0,10,26,.22)
}
.degree-copy h2{
  max-width:22ch;
  margin:0;
  color:var(--degree-ink);
  font-size:clamp(32px,2.3vw,40px);
  font-weight:620;
  line-height:1.22;
  letter-spacing:-.03em
}
.degree-copy>p:last-child{
  max-width:70ch;
  margin:16px 0 0;
  color:var(--degree-muted);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.65
}
.degree-path{
  position:relative;
  margin-top:18px;
  padding-left:0
}
.degree-path-line{
  position:absolute;
  top:21px;
  bottom:21px;
  left:20px;
  width:2px;
  height:calc(100% - 42px);
  overflow:visible
}
.degree-path-line{display:none!important}
.degree-path-line path{fill:none;stroke-linecap:round;stroke-width:1.5}
.degree-path-base{
  stroke:rgba(91,164,210,.4);
  stroke-dasharray:1;
  stroke-dashoffset:0
}
.degree-path-progress{
  stroke:var(--degree-accent);
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 360ms cubic-bezier(.16,1,.3,1)
}
.degree-path ol{display:grid;margin:0;padding:0;gap:0;list-style:none}
.degree-path li{margin:0;padding:0}
.degree-step{
  position:relative;
  display:grid;
  width:100%;
  min-height:56px;
  padding:6px 0;
  grid-template-columns:42px minmax(0,1fr);
  gap:26px;
  align-items:center;
  border:0;
  border-bottom:1px solid rgba(91,164,210,.2);
  border-radius:0;
  background:transparent;
  color:rgba(218,229,241,.7);
  text-align:left;
  cursor:pointer
}
.degree-path li:last-child .degree-step{border-bottom-color:transparent}
.degree-step>span{
  position:relative;
  z-index:2;
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border:1px solid rgba(184,209,235,.55);
  border-radius:50%;
  background:rgba(7,27,49,.72);
  color:rgba(238,245,252,.88);
  font-size:15px;
  font-variant-numeric:tabular-nums;
  transition:color 220ms ease,background-color 220ms ease,border-color 220ms ease,box-shadow 260ms ease
}
.degree-step>b{
  color:inherit;
  font-size:clamp(17px,1.1vw,19px);
  font-weight:500;
  line-height:1.4;
  transition:color 220ms ease,font-weight 220ms ease
}
.degree-step:hover,.degree-step.is-active{color:var(--degree-ink)}
.degree-step:hover>span,.degree-step.is-active>span{
  border-color:var(--degree-accent);
  background:var(--degree-accent);
  color:#fff;
  box-shadow:0 0 0 7px rgba(50,197,255,.1),0 0 26px rgba(50,197,255,.28)
}
.degree-step:hover>b,.degree-step.is-active>b{font-weight:620}
.degree-step:focus-visible{
  outline:2px solid var(--degree-accent);
  outline-offset:5px;
  border-radius:8px
}
.degree-link{
  display:inline-flex;
  width:max-content;
  margin-top:12px;
  padding:0 0 3px;
  align-items:center;
  gap:8px;
  border-bottom:1px solid rgba(50,197,255,.55);
  color:var(--degree-accent);
  font-size:16px;
  font-weight:600;
  text-decoration:none
}
.degree-link:after{
  content:"";
  position:absolute;
  right:0;
  bottom:-1px;
  left:0;
  height:1px;
  background:#8ae9ff;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 220ms ease
}
.degree-link{position:relative}
.degree-link i{font-style:normal;transition:transform 220ms ease}
.degree-link:hover{color:#8ae9ff}
.degree-link:hover:after{transform:scaleX(1)}
.degree-link:hover i{transform:translateX(4px)}
.degree-link:focus-visible{outline:2px solid var(--degree-accent);outline-offset:7px;border-radius:3px}

.degree-motion-ready:not(.is-inview) .degree-visual{clip-path:inset(0 100% 0 0)}
.degree-motion-ready .degree-visual{transition:clip-path 700ms cubic-bezier(.16,1,.3,1)}
.degree-motion-ready:not(.is-inview) .degree-glass-card,
.degree-motion-ready:not(.is-inview) .degree-path,
.degree-motion-ready:not(.is-inview) .degree-link{opacity:0;transform:translateY(12px)}
.degree-motion-ready:not(.is-inview) .degree-glass-card{transform:translate(-50%,calc(-50% + 12px))}
.degree-motion-ready:not(.is-inview) .degree-section-label,
.degree-motion-ready:not(.is-inview) .degree-copy h2,
.degree-motion-ready:not(.is-inview) .degree-copy>p:last-child{opacity:0;transform:translateY(12px)}
.degree-motion-ready .degree-glass-card{transition:opacity 550ms ease,transform 550ms cubic-bezier(.16,1,.3,1),border-color 350ms ease,background-color 350ms ease}
.degree-motion-ready .degree-section-label{transition:opacity 450ms ease,transform 450ms cubic-bezier(.16,1,.3,1)}
.degree-motion-ready .degree-copy h2{transition:opacity 500ms ease 150ms,transform 500ms cubic-bezier(.16,1,.3,1) 150ms}
.degree-motion-ready .degree-copy>p:last-child{transition:opacity 500ms ease 210ms,transform 500ms cubic-bezier(.16,1,.3,1) 210ms}
.degree-motion-ready .degree-path{transition:opacity 520ms ease 220ms,transform 520ms cubic-bezier(.16,1,.3,1) 220ms}
.degree-motion-ready .degree-link{transition:opacity 450ms ease 330ms,transform 450ms cubic-bezier(.16,1,.3,1) 330ms,color 220ms ease}
.degree-motion-ready:not(.is-inview) .degree-path-base{stroke-dashoffset:1}
.degree-motion-ready.is-inview .degree-path-base{transition:stroke-dashoffset 700ms cubic-bezier(.16,1,.3,1) 260ms}
.degree-motion-ready:not(.is-inview) .degree-step>span{opacity:.42;transform:scale(.84)}
.degree-motion-ready.is-inview .degree-step>span{transition-property:opacity,transform,color,background-color,border-color,box-shadow}
.degree-motion-ready.is-inview .degree-path li:nth-child(1) .degree-step>span{transition-delay:360ms}
.degree-motion-ready.is-inview .degree-path li:nth-child(2) .degree-step>span{transition-delay:430ms}
.degree-motion-ready.is-inview .degree-path li:nth-child(3) .degree-step>span{transition-delay:500ms}
.degree-motion-ready.is-inview .degree-path li:nth-child(4) .degree-step>span{transition-delay:570ms}
.degree-motion-ready.is-inview .degree-path li:nth-child(5) .degree-step>span{transition-delay:640ms}

@media(max-width:1023px){
  .degree-section-label{max-width:var(--shell)}
  .degree-pair{height:auto;grid-template-columns:1fr;max-width:var(--shell)}
  .degree-visual,.degree-content-card{min-height:0}
  .degree-visual{height:clamp(360px,42vw,420px)}
  .degree-content-card{height:auto;min-height:0}
  .degree-glass-card{top:50%;bottom:auto}
}
@media(max-width:1279px) and (min-width:1024px){
  .degree-content-card{padding:26px 34px 24px}
  .degree-step{min-height:56px;gap:22px}
}
@media(max-width:767px){
  .degree-advancement{padding:56px 0}
  .degree-section-label{max-width:calc(100% - 40px);margin-bottom:28px}
  .degree-section-label p{font-size:14px}
  .degree-section-label span{width:40px;margin-top:10px}
  .degree-pair{max-width:calc(100% - 40px);gap:18px}
  .degree-visual{height:clamp(340px,105vw,400px);border-radius:20px}
  .degree-glass-card{
    top:50%;
    right:auto;
    bottom:auto;
    left:50%;
    width:calc(100% - 40px);
    height:auto;
    min-height:210px;
    padding:28px 30px;
    border-radius:18px
  }
  .degree-glass-card strong{font-size:clamp(42px,13vw,52px)}
  .degree-glass-card span,.degree-glass-card small{font-size:14px}
  .degree-content-card{min-height:0;padding:32px 28px 34px;border-radius:20px}
  .degree-copy h2{max-width:none;font-size:clamp(28px,8.5vw,34px)}
  .degree-copy>p:last-child{margin-top:18px;font-size:16px;line-height:1.72}
  .degree-path{margin-top:24px}
  .degree-step{min-height:62px;grid-template-columns:42px minmax(0,1fr);gap:20px}
  .degree-step>span{width:40px;height:40px;font-size:14px}
  .degree-step>b{font-size:17px}
  .degree-path-line{top:21px;bottom:21px;left:20px;height:calc(100% - 42px)}
  .degree-link{margin-top:22px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .degree-visual img,.degree-visual:hover img{transform:none!important;transition:none!important}
  .degree-visual:hover .degree-glass-card{transform:translate(-50%,-50%)}
  .degree-motion-ready:not(.is-inview) .degree-visual{clip-path:none}
  .degree-motion-ready:not(.is-inview) .degree-glass-card,
  .degree-motion-ready:not(.is-inview) .degree-path,
  .degree-motion-ready:not(.is-inview) .degree-link{opacity:1;transform:none}
  .degree-motion-ready:not(.is-inview) .degree-glass-card{transform:translate(-50%,-50%)}
  .degree-motion-ready:not(.is-inview) .degree-section-label,
  .degree-motion-ready:not(.is-inview) .degree-copy h2,
  .degree-motion-ready:not(.is-inview) .degree-copy>p:last-child,
  .degree-motion-ready:not(.is-inview) .degree-step>span{opacity:1;transform:none}
  .degree-motion-ready:not(.is-inview) .degree-path-base{stroke-dashoffset:0}
  .degree-path-progress,.degree-step,.degree-step>span,.degree-step>b,.degree-link,.degree-link:after,.degree-link i{transition-duration:.01ms!important}
}