/* Five coordinated scenes, with the original animated team illustration as the finale. */
html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero.brand-story-ready { isolation:isolate; overflow:clip!important; }
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-visual {
  position:absolute;
  inset:18px 12px 0 calc((100% - min(60%, 920px)) / 2 + 6px);
  z-index:2;
  pointer-events:none;
}
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-visual img {
  position:absolute!important;
  inset:auto auto 0 50%!important;
  width:min(100%,924px)!important; height:auto!important;
  max-width:none!important; max-height:none!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:translateX(-50%)!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  opacity:0!important;
  transition:opacity 1.1s ease;
  /* The assets have transparent SVG masks; no card-colour tint or rectangular backdrop. */
  mask-image:none!important;
}
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-visual img.is-current { opacity:1!important; }
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-ready .brand-hero-scene,
html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero.brand-story-ready::before,
html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero.brand-story-ready::after { transition:opacity 1.1s ease; }
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-ready:not(.brand-story-finale) .brand-hero-scene,
html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero.brand-story-ready:not(.brand-story-finale)::before,
html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero.brand-story-ready:not(.brand-story-finale)::after { opacity:0!important; }
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-ready .brand-hero-motion-toggle { display:none!important; }
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-controls { margin-top:22px; width:100%; max-width:360px; }
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-caption { display:flex; align-items:center; gap:10px; min-height:28px; font-size:15px; font-weight:650; color:#164a46; }
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-number { font-size:20px; color:#ad3a08; font-variant-numeric:tabular-nums; }
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-nav { display:flex; gap:6px; margin-top:10px; }
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-nav button {
  position:relative; overflow:hidden; flex:1; min-width:0; min-height:46px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px;
  padding:7px 4px; border:1px solid #24555025; border-radius:9px;
  background:#ffffff28; color:#245550; font:inherit; font-size:12px; cursor:pointer;
}
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-nav button > span:first-child { font-size:11px; opacity:.75; font-variant-numeric:tabular-nums; }
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-nav button[aria-pressed=true] { color:#fff; background:#204f4a; border-color:#204f4a; }
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-nav button[aria-pressed=true]::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:#ff812e; transform:scaleX(var(--story-progress,0)); transform-origin:left; transition:transform .1s linear;
}
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-nav button:hover { border-color:#245550; }
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-toggle {
  position:absolute; z-index:4; top:16px; right:18px; min-height:34px;
  border:1px solid #24555030; border-radius:18px; padding:6px 12px;
  background:#ffffff70; color:#245550; font:inherit; font-size:12px; cursor:pointer;
}
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-toggle:hover { background:#ffffffa0; }
html body :is(#bq-brand-admin, .admin-app.design-v3) :is(.brand-story-toggle,.brand-story-nav button):focus-visible { outline:2px solid #164a46; outline-offset:3px; }
html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-toggle[hidden] { display:none; }
@media(max-width:1750px) {
  html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero.brand-story-ready { min-height:660px!important; }
  html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-controls { max-width:360px; margin-top:12px; }
  html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-caption { justify-content:center; }
  html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-visual { inset:260px 12px 0; }
  html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-visual img { width:min(100%,800px)!important; }
}
@media(max-width:600px) {
  html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero.brand-story-ready { min-height:510px!important; padding-top:56px!important; }
  html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-visual { inset:314px 0 0; }
  html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-toggle { top:12px; right:12px; }
  html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-controls { margin-top:12px; }
  html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-nav { gap:5px; }
}
@media(prefers-reduced-motion:reduce) {
  html body :is(#bq-brand-admin, .admin-app.design-v3) .brand-story-ready *,
  html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero.brand-story-ready::before,
  html body :is(#bq-brand-admin, .admin-app.design-v3) .home-reference-hero.brand-story-ready::after { transition:none!important; }
}