/* The title occupies the centre of the free area to the left of the illustration. */
html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero {
  align-items:center!important;
}
html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero-copy {
  flex:0 0 auto!important;
  width:calc((100% - min(60%, 920px)) / 2 - 28px)!important;
  max-width:none!important;
  align-items:center!important;
  text-align:left!important;
  justify-content:center!important;
}
html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero-copy h2 {
  font-size:clamp(25px,1.5vw,32px)!important;
}
html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero-copy > :is(h2,p) { width:100%; max-width:360px; }
html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero.brand-motion-ready::before {
  display:none!important;
}
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-hero-scene {
  position:absolute;
  inset:auto auto 0 50%;
  width:60%;
  max-width:920px;
  aspect-ratio:2 / 1;
  transform:translate(-50%,6.54%);
  filter:none;
  pointer-events:none;
  z-index:1;
}
.brand-hero-scene svg { display:block; width:100%; height:auto; overflow:visible; }
.brand-motion-keyed { filter:url('/assets/brand-cyan-soft-8acc28780e65.svg#brand-cyan-soft'); }
.brand-motion-leg-left { transform-origin:1380px 307px; animation:bq-leg-left 3.8s ease-in-out infinite; }
.brand-motion-leg-right { transform-origin:1512px 307px; animation:bq-leg-right 4.3s ease-in-out infinite; }
.brand-motion-sling { transform-origin:1246px 489px; animation:bq-sling 4.8s ease-in-out infinite; }
.brand-motion-laser { animation:bq-laser 3.6s ease-in-out infinite; }
.brand-motion-page-front { transform-origin:0 0; animation:bq-page-front 8s ease-in-out .6s infinite both; }
.brand-motion-page-back { transform-origin:0 0; animation:bq-page-back 8s ease-in-out .6s infinite both; }
.brand-motion-page-shadow { animation:bq-page-shadow 8s ease-in-out .6s infinite both; }
.brand-hero-scene.is-paused * { animation-play-state:paused!important; }
@keyframes bq-leg-left { 0%,100% {transform:rotate(-2.8deg)} 50% {transform:rotate(3.2deg)} }
@keyframes bq-leg-right { 0%,100% {transform:rotate(2.4deg)} 50% {transform:rotate(-3.4deg)} }
@keyframes bq-sling { 0%,100% {transform:rotate(-2.6deg)} 50% {transform:rotate(3.4deg)} }
@keyframes bq-laser { 0%,12%,72%,100% {opacity:.12} 32%,46% {opacity:1} }
/* A breeze lifts one thin page past its spine, then lets it settle back onto the stack. */
@keyframes bq-page-front {
  0%,16%,77%,100% {opacity:0;transform:scaleX(1);}
  18%,73% {opacity:1;transform:scaleX(1);}
  32% {opacity:1;transform:scaleX(.74) skewY(-6deg);}
  42%,60% {opacity:1;transform:scaleX(.03) skewY(-9deg);}
  45%,57% {opacity:0;transform:scaleX(.02) skewY(-9deg);}
}
@keyframes bq-page-back {
  0%,42%,60%,100% {opacity:0;transform:scaleX(.01);}
  45%,57% {opacity:1;transform:scaleX(.08);}
  51% {opacity:1;transform:scaleX(.64) skewY(4deg);}
}
@keyframes bq-page-shadow {
  0%,18%,76%,100% {opacity:0;}
  42%,56% {opacity:.16;}
}
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-hero-motion-toggle {
  position:absolute;
  right:18px;
  bottom:16px;
  z-index:3;
  padding:6px 10px;
  min-height:32px;
  border:1px solid #24555030;
  border-radius:18px;
  color:#245550;
  background:#ffffff30;
  font-family:inherit;
  font-size:12px;
  line-height:1.4;
  cursor:pointer;
}
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-hero-motion-toggle:hover { background:#ffffff60; }
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-hero-motion-toggle:focus-visible { outline:2px solid #245550; outline-offset:3px; }
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-hero-motion-toggle[hidden] { display:none; }
@media (max-width:1750px) {
  html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero { align-items:flex-start!important; }
  html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero-copy {
    width:100%!important;
    max-width:none!important;
    text-align:center!important;
    align-items:center!important;
  }
  html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero-copy > :is(h2,p) { max-width:680px; }
  html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-hero-scene { width:calc(100% - 48px); max-width:800px; }
}
@media (max-width:600px) {
  html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero { min-height:430px!important; }
  html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-hero-scene { width:calc(100% - 24px); }
  html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-hero-motion-toggle {
    top:12px; bottom:auto; right:10px; width:32px; height:32px; padding:0; font-size:0;
  }
  html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-hero-motion-toggle::before { content:'Ⅱ'; font-size:14px; }
  html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-hero-motion-toggle[aria-pressed=true]::before { content:'▶'; font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  .brand-hero-scene * { animation:none!important; }
  .brand-motion-laser { opacity:0; }
  html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero.brand-motion-ready::before { display:block!important; }
  html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-hero-scene { display:none; }
}

/* A separate delivery-vehicle insert keeps the approved people and motion rig intact. */
html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero::after {
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:auto auto 0 calc(50% + min(30%, 460px) - 6px)!important;
  width:min(20%, 360px)!important;
  height:auto!important;
  aspect-ratio:3 / 2;
  background:url('/assets/brand-delivery-van-blue-7a2d3d40ffd3.svg') center / 100% 100% no-repeat!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  /* The SVG reuses the approved cutout alpha; do not key out the blue body or glass. */
  filter:none!important;
  transform:translateY(10.65%)!important;
  opacity:1!important;
  pointer-events:none!important;
  z-index:0!important;
}
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-hero-motion-toggle { top:16px; bottom:auto; }
@media (max-width:1750px) {
  html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero::before,
  html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-hero-scene {
    left:40%!important;
    width:calc((100% - 48px) * .77)!important;
    max-width:800px!important;
  }
  html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero::after {
    left:calc(40% + min((100% - 48px) * .385, 400px) - 2px)!important;
    width:min(22%, 280px)!important;
  }
}
@media (max-width:600px) {
  html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-hero-motion-toggle { top:12px; }
  html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero::before,
  html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-hero-scene {
    width:calc((100% - 24px) * .77)!important;
  }
  html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero::after {
    left:calc(40% + (100% - 24px) * .385 - 2px)!important;
  }
}