/* Local project-screen framing and the assessment route. Source artwork is unchanged. */
#project-showcase-a.variant-projects-c .refinement-project-device-stage{
  min-width:0;display:flex;align-items:center;justify-content:center;
}
#project-showcase-a.variant-projects-c .refinement-project-devices{
  margin-inline:auto;isolation:isolate;
}
#project-showcase-a.variant-projects-c .refinement-device-tablet .refinement-device-window,
#project-showcase-a.variant-projects-c .refinement-device-phone .refinement-device-window{
  display:flex;align-items:center;justify-content:center;aspect-ratio:auto;
}
#project-showcase-a.variant-projects-c .refinement-device-tablet .refinement-device-window img,
#project-showcase-a.variant-projects-c .refinement-device-phone .refinement-device-window img{
  display:block;width:100%;height:auto;max-width:100%;object-fit:contain;object-position:center;
}
#project-showcase-a.variant-projects-c .refinement-device-tablet .refinement-device-window{
  background:#fff;border-color:#20272d;box-shadow:0 15px 35px #0c17251c;
}
#project-showcase-a.variant-projects-c .refinement-device-phone{
  width:21%;right:0;bottom:0;z-index:4;
}
#project-showcase-a.variant-projects-c .refinement-device-phone .refinement-device-window{
  display:block;aspect-ratio:9/19.5;overflow:hidden;
  border:5px solid #151a20;border-radius:20px;background:#f6f7f8;
  box-shadow:0 0 0 1px #a9b7c2,0 2px 0 2px #ffffffbb,0 16px 34px #101b2c30;
}
#project-showcase-a.variant-projects-c .refinement-device-phone .refinement-device-window img{
  width:100%;height:auto;object-position:top center;
}
#project-showcase-a.variant-projects-c .refinement-device-phone figcaption{
  text-align:center;line-height:1.5;padding-top:9px;
}
#project-showcase-a.variant-projects-c .refinement-project-progress button{
  position:relative;border-top-color:transparent;
}
#project-showcase-a.variant-projects-c .refinement-project-progress button::before{
  content:'';position:absolute;inset:-2px 0 auto;height:2px;background:var(--refinement-rule,#c8c8c8);
}
#project-showcase-a.variant-projects-c .refinement-project-progress button[aria-pressed=true]{
  border-top-color:transparent;
}
#project-showcase-a.variant-projects-c .refinement-project-progress button[aria-pressed=true]::before{
  background:var(--grad);box-shadow:0 1px 7px #4fa3ff38;
}
@media(max-width:1000px){
  #project-showcase-a.variant-projects-c .refinement-device-phone{width:23%}
}
@media(max-width:640px){
  #project-showcase-a.variant-projects-c .refinement-project-devices{aspect-ratio:1.02}
  #project-showcase-a.variant-projects-c .refinement-device-tablet{width:53%;left:0;bottom:22px}
  #project-showcase-a.variant-projects-c .refinement-device-phone{width:27%;right:0;bottom:0}
  #project-showcase-a.variant-projects-c .refinement-device-phone .refinement-device-window{
    border-width:3px;border-radius:13px;box-shadow:0 0 0 1px #a9b7c2,0 12px 24px #101b2c25;
  }
}

/* One measured route joins the actual number centres, so it stays aligned at every width. */
.assessment-flow .unified-journey[data-flow-ready=true]::before{display:none!important}
.assessment-flow .journey-route{position:relative;display:flow-root}
.assessment-flow .journey-route .journey-progress-track{
  position:absolute;left:var(--route-left);top:var(--route-top);width:var(--route-width);
  height:var(--route-height);background:#54697966;pointer-events:none;z-index:0;
}
.assessment-flow .journey-route .journey-progress-track::after{
  content:'';position:absolute;inset:0;background:var(--grad);transform:scaleX(var(--route-progress,0));
  transform-origin:left center;box-shadow:0 0 9px #4fa3ff88;
}
.assessment-flow .journey-route[data-flow-axis=vertical] .journey-progress-track::after{
  transform:scaleY(var(--route-progress,0));transform-origin:center top;
  background:linear-gradient(180deg,#00e5cc,#4fa3ff 55%,#8b5cf6);
}
.assessment-flow .unified-journey .journey-node{z-index:1}
.assessment-flow .unified-journey .journey-node .number{
  transition:filter .3s ease,opacity .3s ease;
}
.assessment-flow .unified-journey[data-flow-ready=true] li:not([data-flow-active=true]) .number{opacity:.78}
.assessment-flow .unified-journey li[data-flow-active=true] .number{
  opacity:1;filter:drop-shadow(0 0 5px #00e5ccaa) drop-shadow(0 0 12px #4fa3ff66);
}
@media(min-width:801px){
  .assessment-flow .unified-journey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
  .assessment-flow .unified-journey>li{padding:0;min-height:0}
  .assessment-flow .unified-journey .journey-node{position:relative;inset:auto;width:55px;height:55px;margin:0 0 45px}
  .assessment-flow .unified-journey>li:not(:last-child)::after{right:-24px;left:auto;top:7px;bottom:auto;content:'→'!important}
}
@media(max-width:800px){
  .assessment-flow .unified-journey{display:block;padding:0}
  .assessment-flow .unified-journey>li{padding:0 0 35px 70px;min-height:150px;border:0}
  .assessment-flow .unified-journey>li:last-child{padding-bottom:0}
  .assessment-flow .unified-journey .journey-node{position:absolute;top:0;left:0;width:44px;height:44px;margin:0}
  .assessment-flow .unified-journey>li:not(:last-child)::after{left:8px;right:auto;top:auto;bottom:8px;content:'↓'!important}
  .assessment-flow .unified-journey>li h4{margin-top:0!important;padding-top:5px}
}
@media(prefers-reduced-motion:reduce){
  .assessment-flow .unified-journey .journey-node .number{transition:none;filter:none!important;opacity:1!important}
  .assessment-flow .journey-route .journey-progress-track::after{transform:none!important;box-shadow:none}
}