#projects.studio-overview {background:#101c2d;color:#f4f6fa;padding:40px 24px 52px;border-block:1px solid #35465a}
.studio-overview-inner {max-width:1152px;margin:auto}
.studio-overview-kicker {font:10px 'JetBrains Mono',monospace;letter-spacing:.13em;color:#b9d591;text-transform:uppercase;margin-bottom:14px}
#projects .studio-overview-heading h2 {font-size:clamp(28px,3.2vw,42px);line-height:1.17;font-weight:700;letter-spacing:-.035em;color:#f4f6fa;max-width:760px}
.studio-overview-heading>p:last-child {font-size:16px;color:#b8c6d7;line-height:1.6;margin-top:16px}
.studio-services {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:36px 0 0;padding:0;list-style:none}
.studio-service {position:relative;min-width:0;display:flex;flex-direction:column}
.service-step {display:flex;align-items:center;gap:18px;margin-bottom:22px}
.service-step span {display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;background:#b1d47a;color:#15251a;border-radius:50%;font:12px 'JetBrains Mono',monospace}
.service-step::after {content:'';height:1px;background:#627a4d;flex:1}
.studio-service:not(:last-child) .service-step::before {content:'→';position:absolute;right:-25px;top:6px;color:#b1d47a;font-size:18px}
#projects .studio-service h3 {font-size:25px;line-height:1.23;font-weight:700;letter-spacing:-.025em;color:#f4f6fa;margin:0 0 14px}
#projects .studio-service h3 span {display:block;color:#b9d591}
.studio-service>p {font-size:16px;line-height:1.65;color:#c1ccda;max-width:34ch;margin:0;flex:1}
.service-result {border-top:1px solid #35465a;margin-top:24px;padding-top:16px;font-size:13px;color:#d5e5c0;line-height:1.5;display:flex;align-items:baseline;gap:8px}
.service-result::before {content:'✓';color:#b1d47a}
.studio-overview-footer {margin-top:34px;padding-top:22px;border-top:1px solid #35465a;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:14px}
.studio-overview-footer p {color:#aebdce}
.studio-overview-footer a {color:#c1df96;font-weight:600;padding:10px 0;display:flex;gap:18px}
.studio-overview-footer a:hover {text-decoration:underline;text-underline-offset:5px}
@media(min-width:768px){#projects .studio-service h3 {min-height:2.46em}}
@media(min-width:768px) and (max-width:1023px){#projects .studio-service h3 {min-height:3.69em}}
@media(max-width:767px){
#projects.studio-overview {padding:30px 20px 36px}
.studio-overview-heading>p:last-child {font-size:15px}
.studio-services {grid-template-columns:1fr;gap:28px;margin-top:30px}
.studio-service {padding-left:53px}
.service-step {position:absolute;left:0;top:0;bottom:-28px;margin:0;display:block}
.service-step span {width:34px;height:34px}
.service-step::after {position:absolute;top:44px;bottom:7px;left:16px;width:1px;height:auto}
.studio-service:last-child .service-step::after {display:none}
.studio-service:not(:last-child) .service-step::before {display:none}
#projects .studio-service h3 {font-size:23px;margin-bottom:10px}
.studio-service>p {font-size:15px}
.service-result {border:0;padding-top:0;margin-top:12px}
.studio-overview-footer {align-items:flex-start;flex-direction:column;gap:6px;margin-top:28px}
}


.services-flow {position:relative;margin-top:36px;--rail-length:0px;--rail-angle:0deg}
.services-flow .studio-services {margin-top:0;position:relative}
.service-step {height:46px;margin-bottom:16px}
.service-step span {position:relative;z-index:1;display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;background:#142133;color:#b5c4a5;border:1px solid #62764e;border-radius:50%;font:11px 'JetBrains Mono',monospace;transition:background .3s,color .3s,border-color .3s,box-shadow .3s}
.service-step::after,.studio-service:not(:last-child) .service-step::before {display:none}
.services-rail {position:absolute;left:var(--rail-x,0px);top:var(--rail-y,23px);width:var(--rail-length);height:1px;background:#526444;transform:rotate(var(--rail-angle));transform-origin:0 50%;pointer-events:none}
.services-spark {position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:#e1f5b9;box-shadow:0 0 6px #b7e276,0 0 15px #96bf4880;opacity:0;will-change:transform;transition:opacity .3s ease}
.services-spark::before {content:'';position:absolute;right:3px;top:2px;width:35px;height:3px;border-radius:50%;background:linear-gradient(90deg,transparent,#b7df7880)}
.studio-service.is-reached .service-step span {background:#2a3e26;border-color:#a0c768;color:#d8edb9}
.studio-service.is-active .service-step span {background:#b1d47a;color:#15251a;border-color:#c9e89b;box-shadow:0 0 0 5px #aace7214,0 0 22px #aace7255}
#projects .studio-service h3 span {transition:color .3s}
#projects .studio-service.is-active h3 span {color:#deefc4}
@media(max-width:767px){
 .services-flow {margin-top:30px}
 .service-step {height:auto;margin:0}
 .service-step span {margin:0;width:34px;height:34px;padding:0;font-size:10px}
 .services-spark::before {width:25px}
}

@media(min-width:768px){
 .studio-overview-heading {text-align:center}
 #projects .studio-overview-heading h2 {max-width:1000px;margin-inline:auto;text-wrap:balance}
 .studio-overview-heading>p:last-child {max-width:800px;margin-inline:auto}
 .service-step {justify-content:center;margin-bottom:20px}
 .studio-service {text-align:center}
 #projects .studio-service h3 {font-size:24px;text-wrap:balance}
 .studio-service>p {max-width:32ch;margin-inline:auto}
 .service-result {justify-content:center;text-wrap:balance}
 .services-flow {margin-top:42px}
}
.studio-service {cursor:pointer;border-radius:6px}
.studio-service:focus-visible {outline:2px solid #b1d47a;outline-offset:8px}
.services-spark.is-reversing::before {right:auto;left:3px;transform:scaleX(-1)}
@media(prefers-reduced-motion:reduce){.services-spark {display:none}.service-step span {transition:none}}