/* Keep the heading, changing story and controls in separate content rows. */
#fleet-showcase .bus-fallback{
  inset:0;width:100%;height:100%;object-fit:contain;border-radius:0;
  mix-blend-mode:normal;opacity:1;pointer-events:none;
  filter:drop-shadow(0 22px 17px #00121a44);
  transition:opacity .35s ease;
}
#fleet-showcase .model-ready .bus-fallback{opacity:0}
#fleet-showcase .bus-fallback[hidden]{display:none!important}
/* Never fade the previous WebGL frame over a newly selected vehicle. */
#fleet-showcase #bus-canvas{transition:none}
#fleet-showcase .bus-canvas-wrap:not(.model-ready) #bus-canvas{visibility:hidden}
#fleet-showcase .bus-loading{
  display:flex;align-items:center;justify-content:center;gap:9px;
  left:50%;right:auto;bottom:9px;transform:translateX(-50%);
  width:max-content;max-width:90%;padding:8px 13px;border-radius:999px;
  background:#031b2b9c;border:1px solid #b9926c24;
  color:#d5e4eb;font-size:14px;line-height:1.5;letter-spacing:.01em;
  transition:opacity .25s;
}
#fleet-showcase .bus-loading:empty{display:none}
#fleet-showcase [data-model-state="loading"] .bus-loading::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--sun);
  animation:fleet-loading-pulse 1.3s ease-in-out infinite;
}
#fleet-showcase .model-unavailable .bus-loading{display:flex}
#fleet-showcase .vehicle-nav{
  position:absolute;top:50%;z-index:6;transform:translateY(-50%);
  display:grid;place-items:center;width:60px;height:60px;padding:0;
  border:1px solid #b9926ca6;border-radius:50%;background:#031b2bbd;color:var(--ivory);
  box-shadow:inset 0 0 0 4px #ffffff03,0 12px 30px #00121a24;
  cursor:pointer;touch-action:manipulation;transition:border-color .2s,background .2s,box-shadow .2s;
}
#fleet-showcase .vehicle-nav::before{
  content:"";width:12px;height:12px;border-top:2px solid currentColor;border-right:2px solid currentColor;
}
#fleet-showcase .vehicle-prev{left:0}
#fleet-showcase .vehicle-next{right:0}
#fleet-showcase .vehicle-prev::before{transform:translateX(3px) rotate(-135deg)}
#fleet-showcase .vehicle-next::before{transform:translateX(-3px) rotate(45deg)}
#fleet-showcase .vehicle-nav:hover,#fleet-showcase .vehicle-nav:focus-visible{
  border-color:var(--sun);background:#10364be8;box-shadow:0 0 0 4px #ff7a1a12,0 10px 28px #0003;
}
#fleet-showcase .vehicle-nav:focus-visible,#fleet-showcase .vehicle-ticks button:focus-visible{
  outline:2px solid var(--ivory);outline-offset:5px;
}
#fleet-showcase .vehicle-nav:active{background:#1b4356}
#fleet-showcase .vehicle-selector{
  position:absolute;z-index:6;bottom:-53px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
#fleet-showcase .vehicle-count{font-size:18px;line-height:1.4;font-variant-numeric:tabular-nums;color:#dce8ec;white-space:nowrap}
#fleet-showcase .vehicle-count>span{font-weight:800;color:var(--ivory)}
#fleet-showcase .vehicle-count>small{font-size:inherit;color:#829fae}
#fleet-showcase .vehicle-ticks{display:flex;align-items:center;gap:8px}
#fleet-showcase .vehicle-ticks button{display:grid;place-items:center;width:32px;height:24px;padding:0;border:0;background:transparent;cursor:pointer}
#fleet-showcase .vehicle-ticks button::after{content:"";display:block;width:28px;height:4px;border-radius:3px;background:#486879;transition:background .2s}
#fleet-showcase .vehicle-ticks button[aria-pressed="true"]::after{background:var(--sun)}
#fleet-showcase .vehicle-nav[hidden],#fleet-showcase .vehicle-selector[hidden],#bus-enter[hidden]{display:none!important}
@keyframes fleet-loading-pulse{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){
  #fleet-showcase .bus-fallback,#fleet-showcase .bus-loading{transition:none}
  #fleet-showcase .bus-loading::before{animation:none!important}
}
@media(min-width:741px){
  #fleet-showcase .fleet-pin{
    display:grid;
    grid-template-columns:minmax(0,32%) minmax(0,1fr);
    grid-template-rows:auto minmax(min-content,1fr) auto;
    column-gap:clamp(24px,3vw,48px);
    row-gap:32px;
    height:auto;
    min-height:calc(100vh - var(--fleet-sticky-top,80px));
    min-height:calc(100svh - var(--fleet-sticky-top,80px));
    top:var(--fleet-sticky-top,80px);
    padding:clamp(32px,4vh,47px) 6vw 35px;
  }
  #fleet-showcase .fleet-product-heading{
    position:relative;inset:auto;grid-column:1/-1;grid-row:1;
    min-width:0;
  }
  #fleet-showcase .fleet-story{
    position:relative;inset:auto;grid-column:1;grid-row:2;
    align-self:center;min-width:0;max-width:360px;margin:0;
  }
  #fleet-showcase .bus-canvas-wrap{
    position:relative;inset:auto;grid-column:2;grid-row:2;
    align-self:stretch;min-width:0;min-height:340px;height:auto;margin-bottom:40px;
  }
  #fleet-showcase .bus-enter{
    position:relative;inset:auto;grid-column:2;grid-row:2;
    align-self:end;justify-self:end;margin:0;max-width:100%;
  }
  #fleet-showcase .bus-detail{
    position:relative;inset:auto;grid-column:2;grid-row:2;
    align-self:start;justify-self:start;width:max-content;max-width:100%;
  }
  #fleet-showcase .detail-care{margin:24px 0 0 24px}
  #fleet-showcase .detail-gps{align-self:center;justify-self:end;margin-right:24px}
  #fleet-showcase .fleet-product-bottom{
    position:relative;inset:auto;grid-column:1/-1;grid-row:3;
    min-width:0;align-self:end;flex-wrap:wrap;
  }
  #fleet-showcase .fleet-view-controls{max-width:100%;flex-wrap:wrap}
  #fleet-showcase[data-fleet-layout="flow"]{height:auto;min-height:0}
  #fleet-showcase[data-fleet-layout="flow"] .fleet-pin{position:relative;top:auto}
}
@media(max-width:740px){
  /* Fixed stage, then counter, entry action and story in separate rows. */
  #fleet-showcase .fleet-pin{
    display:grid;grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto 380px auto auto auto;row-gap:24px;
    min-height:0;padding-bottom:40px;
  }
  #fleet-showcase .fleet-product-heading{grid-row:1;min-width:0}
  #fleet-showcase .bus-canvas-wrap{
    position:relative;inset:auto;grid-row:2;
    width:calc(100% + 48px);margin-left:-24px;height:380px;
  }
  #fleet-showcase .bus-enter{
    position:relative;inset:auto;grid-row:3;justify-self:center;
    margin:0;max-width:100%;
  }
  #fleet-showcase .fleet-story{grid-row:4;margin:0;min-width:0}
  #fleet-showcase .fleet-product-bottom{
    position:relative;inset:auto;grid-row:5;min-width:0;margin:0;
  }
  #fleet-showcase .vehicle-nav{width:44px;height:44px;top:46%}
  #fleet-showcase .vehicle-prev{left:18px}
  #fleet-showcase .vehicle-next{right:18px}
  #fleet-showcase .vehicle-nav::before{width:9px;height:9px}
  #fleet-showcase .vehicle-selector{bottom:0}
  #fleet-showcase .vehicle-count{font-size:16px}
  #fleet-showcase .vehicle-ticks button{width:26px;height:26px}
  #fleet-showcase .vehicle-ticks button::after{width:23px}
  #fleet-showcase .bus-loading{bottom:72px;font-size:14px}
}
@media(min-width:741px) and (max-width:1100px){
  #fleet-showcase .fleet-pin{grid-template-rows:auto minmax(min-content,1fr) auto auto}
  #fleet-showcase .bus-enter{grid-row:3}
  #fleet-showcase .fleet-product-bottom{grid-row:4}
}