/* A code-built learning studio, scoped to the About hero. */
.academy-studio {
  --spot-x: 70%; --spot-y: 15%;
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 550px; margin-left: auto; padding: 27px;
  border: 1px solid #496889; border-radius: 26px; color: #e5eefc;
  background: radial-gradient(circle at var(--spot-x) var(--spot-y), #174b6a70, transparent 48%), linear-gradient(150deg, #112a4e, #08172e 75%);
  box-shadow: 0 28px 65px #0c294a26, inset 0 1px 0 #ffffff15;
}
.academy-studio::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(#8ebdf008 1px, transparent 1px), linear-gradient(90deg, #8ebdf008 1px, transparent 1px); background-size: 28px 28px; }
.studio-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 9px; font-weight: 600; letter-spacing: .1em; color: #bed0e6; }
.studio-topbar > span:first-child { display: flex; align-items: center; gap: 7px; }
.studio-status { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: #6ae0c2; box-shadow: 0 0 0 4px #6ae0c214; }
.studio-top-tag { padding: 6px 8px; border: 1px solid #ffffff20; border-radius: 5px; font-size: 8px; white-space: nowrap; }
.studio-heading { margin: 28px 0 24px; }
.studio-kicker { font-size: 9px; letter-spacing: .13em; color: #8fa9c6; }
.about-hero .studio-heading h2 { margin: 12px 0; color: #fff; font-size: clamp(36px, 3.5vw, 50px); line-height: 1.04; font-weight: 700; letter-spacing: -.04em; }
.studio-heading h2 span { color: #75ead0; }
.about-hero .studio-heading p { margin: 0; font-size: 13px; line-height: 1.6; color: #adc0d9; }
.studio-network { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; row-gap: 44px; padding: 0 0 3px; }
.studio-connections { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.studio-connections path { fill: none; stroke: #365c79; stroke-width: 1.2; }
.studio-connections .studio-flow { stroke: #74e5d0; stroke-width: 2; stroke-dasharray: 9 65; animation: studio-signal 7s linear infinite; }
.studio-skill { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 17px 6px; background: #142e4e; border: 1px solid #39506d; border-radius: 13px; text-align: center; font-size: 10px; font-weight: 500; animation: studio-hover 6s ease-in-out infinite; }
.studio-skill:nth-of-type(2) { animation-delay: -2s; }
.studio-skill:nth-of-type(3) { animation-delay: -4s; }
.studio-skill > i { color: #79dcca; font-size: 23px; }
.studio-skill:nth-of-type(2) > i { color: #e9c07b; }
.studio-skill:nth-of-type(3) > i { color: #bba6ef; }
.studio-outcome { grid-column: 1 / -1; position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 12px; background: #183551; border: 1px solid #527b8b; border-radius: 13px; }
.studio-core-icon { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; background: #71e2c819; border-radius: 10px; color: #83e5d0; font-size: 22px; }
.studio-outcome strong { display: block; font-size: 12px; font-weight: 600; color: #f3f7ff; line-height: 1.5; }
.studio-outcome div > span { display: block; font-size: 10px; line-height: 1.6; color: #b4c7dc; }
.studio-outcome > i { margin-left: auto; color: #7ee5d3; }
.studio-journey { margin-top: 24px; }
.studio-step-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.studio-step-buttons button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 45px; border: 1px solid #304862; border-radius: 9px; background: #122840; color: #b9cbe2; font: inherit; font-size: 12px; transition: background 180ms ease, border-color 180ms ease; }
.studio-step-buttons button > span { font-size: 9px; opacity: .7; }
.studio-step-buttons button:hover { border-color: #72d7c3; }
.studio-step-buttons button[aria-pressed="true"] { color: #082b32; background: #8be6d3; border-color: #8be6d3; font-weight: 600; }
.studio-step-detail { padding: 17px 2px 0; min-height: 101px; }
.studio-step-detail strong { font-size: 13px; font-weight: 600; color: #e8f1ff; }
.about-hero .studio-step-detail p { margin: 6px 0 0; color: #aebfd5; font-size: 12px; line-height: 1.75; }
.studio-bottom { border-top: 1px solid #ffffff18; margin-top: 10px; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.studio-bottom > span { color: #a8bdd6; font-size: 10px; line-height: 1.6; }
.studio-bottom > span i { margin-right: 5px; color: #7cddc9; }
.studio-motion { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 8px; border: 1px solid #354c68; border-radius: 8px; background: transparent; font: inherit; font-size: 10px; color: #c2d1e7; flex-shrink: 0; }
.studio-motion[hidden] { display: none; }
.academy-studio button:focus-visible { outline: 3px solid #a5f5e4; outline-offset: 3px; }
.academy-studio.is-paused *, .academy-studio.is-offscreen * { animation-play-state: paused; }
@keyframes studio-signal { to { stroke-dashoffset: -148; } }
@keyframes studio-hover { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (max-width: 991px) { .academy-studio { margin: 0 auto; } }
@media (max-width: 575px) {
  .academy-studio { padding: 19px 16px; border-radius: 20px; }
  .studio-topbar { font-size: 8px; gap: 6px; letter-spacing: .04em; }
  .studio-top-tag { font-size: 7px; padding: 5px; letter-spacing: 0; }
  .studio-heading { margin: 24px 0 22px; }
  .studio-network { column-gap: 7px; row-gap: 34px; }
  .studio-skill { font-size: 9px; padding: 14px 4px; gap: 8px; }
  .studio-skill > i { font-size: 21px; }
  .studio-outcome { padding: 13px 10px; gap: 9px; }
  .studio-core-icon { width: 32px; height: 32px; font-size: 19px; }
  .studio-outcome strong { font-size: 11px; }
  .studio-outcome div > span { font-size: 9px; }
  .studio-outcome > i { display: none; }
  .studio-step-buttons button { font-size: 11px; gap: 5px; padding: 6px; }
  .studio-step-detail { min-height: 121px; }
  .studio-bottom > span { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .academy-studio *, .academy-studio *::before { animation: none !important; transition: none !important; }
}