.bg-story-popup{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;font-family:Arial,sans-serif}
.bg-story-popup.is-open{display:flex!important}
.bg-story-backdrop{position:absolute;inset:0;background:rgba(8,10,14,calc(var(--bg-story-backdrop)/100));backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.bg-story-modal{position:relative;z-index:2;width:min(94vw,1200px);height:94vh;max-height:94vh;overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 24px 80px rgba(0,0,0,.55);isolation:isolate}
.bg-story-stage{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden;background:#fff}
.bg-story-pdf{position:relative;z-index:2;display:block;width:100%;height:100%;border:0;background:#fff}
.bg-story-close{position:absolute;z-index:10;right:10px;top:10px;width:42px;height:30px;padding:0 7px;border:0!important;outline:0!important;background:#c9152b!important;color:#fff!important;font-size:27px;font-weight:700;line-height:25px;text-align:center;border-radius:0 0 7px 7px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.28)!important;-webkit-tap-highlight-color:transparent;transition:height .18s ease,filter .18s ease}
.bg-story-close:hover{height:34px;filter:brightness(1.08)}
.bg-story-close:focus,.bg-story-close:focus-visible,.bg-story-close:active{outline:0!important;border:0!important;box-shadow:0 4px 12px rgba(0,0,0,.28)!important}
.bg-story-trigger{position:fixed;right:auto;bottom:auto;top:0;left:0;z-index:999990;
display:flex;align-items:center;justify-content:center;width:54px;height:4px;padding:0;
border:0!important;border-radius:3px;background:#c9152b!important;color:#fff!important;
box-shadow:0 2px 8px rgba(0,0,0,.20)!important;cursor:pointer;
transition:width .18s ease,height .18s ease,filter .18s ease;
-webkit-tap-highlight-color:transparent}
.bg-story-trigger-icon,.bg-story-trigger-text{display:none!important}
.bg-story-trigger:hover{height:6px;filter:brightness(1.08)}
.bg-story-trigger:focus,.bg-story-trigger:focus-visible,.bg-story-trigger:active{outline:0!important}
.bg-story-trigger.is-hidden{display:none}
.bg-story-trigger-icon,.bg-story-trigger-text{display:none!important}
@media(max-width:600px){
 .bg-story-modal{width:96vw;height:92dvh;max-height:92dvh;border-radius:10px}
 .bg-story-close{right:7px;top:7px;width:40px;height:29px;font-size:25px;line-height:24px}
 .bg-story-trigger{top:63px;right:18%;width:70px;height:5px}
 .bg-story-trigger:hover{width:82px;height:7px}
}

@media(max-width:600px){.bg-story-trigger{width:46px;height:4px}.bg-story-trigger:hover{height:6px}}

/* v2.8 - Mobile PDF: fit the popup to the phone viewport, no horizontal panning */
@media (max-width: 600px){
  .bg-story-popup{
    padding:0!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .bg-story-modal{
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    aspect-ratio:auto!important;
    border-radius:0!important;
    overflow:hidden!important;
    margin:0!important;
  }
  .bg-story-stage{
    inset:0!important;
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
  }
  .bg-story-stage iframe,
  .bg-story-stage embed,
  .bg-story-stage object{
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    border:0!important;
    margin:0!important;
    display:block!important;
  }
  .bg-story-close{
    position:fixed!important;
    top:8px!important;
    right:8px!important;
    z-index:1000002!important;
  }
}

/* v2.9 - mobile viewport containment + minimal line close control */
html, body { overflow-x: hidden!important; }
@media (max-width:600px){
  .bg-story-popup{
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    padding:0!important;
  }
  .bg-story-modal{
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    max-height:100%!important;
    min-width:0!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    border-radius:0!important;
    overflow:hidden!important;
    box-shadow:none!important;
  }
  .bg-story-stage{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .bg-story-stage iframe,
  .bg-story-stage embed,
  .bg-story-stage object{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    border:0!important;
  }
  .bg-story-close{
    top:12px!important;
    right:10px!important;
    width:58px!important;
    height:5px!important;
    min-width:58px!important;
    padding:0!important;
    border-radius:4px!important;
    font-size:0!important;
    line-height:0!important;
    background:#c9152b!important;
    box-shadow:0 2px 8px rgba(0,0,0,.28)!important;
    transition:height .18s ease,width .18s ease,filter .18s ease!important;
  }
  .bg-story-close:hover,
  .bg-story-close:focus{
    width:66px!important;
    height:7px!important;
    filter:brightness(1.08);
  }
}

@media (min-width:601px){
  .bg-story-close{
    width:58px!important;
    height:5px!important;
    padding:0!important;
    border-radius:4px!important;
    font-size:0!important;
    line-height:0!important;
    background:#c9152b!important;
    box-shadow:0 2px 8px rgba(0,0,0,.28)!important;
  }
  .bg-story-close:hover,
  .bg-story-close:focus{
    width:66px!important;
    height:7px!important;
    filter:brightness(1.08);
  }
}

/* v3.0 - mobile: comfortable PDF popup size, no edge-to-edge oversized viewer */
@media (max-width:600px){
  .bg-story-popup{
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .bg-story-modal{
    width:92vw!important;
    max-width:92vw!important;
    height:88dvh!important;
    max-height:88dvh!important;
    min-width:0!important;
    min-height:0!important;
    margin:auto!important;
    border-radius:14px!important;
    overflow:hidden!important;
    box-shadow:0 18px 55px rgba(0,0,0,.48)!important;
  }
  .bg-story-stage{
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  .bg-story-stage iframe,
  .bg-story-stage embed,
  .bg-story-stage object{
    position:absolute!important;
    left:0!important;
    top:0!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    min-width:0!important;
    min-height:0!important;
    border:0!important;
    display:block!important;
  }
  .bg-story-close{
    top:8px!important;
    right:8px!important;
    width:48px!important;
    height:5px!important;
    min-width:48px!important;
    border-radius:4px!important;
  }
  .bg-story-close:hover,
  .bg-story-close:focus{
    width:56px!important;
    height:7px!important;
  }
}

/* v3.1 - mobile PDF is deliberately smaller; close line has a clear slide-away interaction */
@media (max-width:600px){
  .bg-story-modal{
    width:86vw!important;
    max-width:86vw!important;
    height:78dvh!important;
    max-height:78dvh!important;
    border-radius:14px!important;
  }
  .bg-story-stage,
  .bg-story-stage iframe,
  .bg-story-stage embed,
  .bg-story-stage object{
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    max-height:100%!important;
  }
  .bg-story-close{
    right:7px!important;
    top:7px!important;
    width:46px!important;
    height:5px!important;
    transform-origin:right center;
    transition:width .22s ease, height .22s ease, transform .22s ease, opacity .22s ease!important;
  }
  .bg-story-close:hover,
  .bg-story-close:focus-visible{
    width:64px!important;
    height:7px!important;
    transform:translateX(-3px)!important;
  }
}
@media (min-width:601px){
  .bg-story-close{
    transition:width .22s ease,height .22s ease,transform .22s ease,opacity .22s ease!important;
  }
  .bg-story-close:hover,
  .bg-story-close:focus-visible{
    width:70px!important;
    height:7px!important;
    transform:translateX(-4px)!important;
  }
}
/* The persistent trigger line visibly slides when the popup is opened/closed. */
.bg-story-trigger{
  transform-origin:right center;
  transition:width .22s ease,height .18s ease,transform .22s ease,filter .18s ease,opacity .22s ease!important;
}
.bg-story-trigger:hover{
  width:calc(100% + 10px);
  transform:translateX(-5px);
}
.bg-story-trigger.is-opening{
  transform:translateX(8px);
  width:calc(100% + 14px);
}

/* v3.2 - controlled PDF rendering: no browser PDF iframe horizontal overflow */
.bg-story-modal{
  transition:transform .34s cubic-bezier(.22,.7,.2,1),opacity .28s ease!important;
}
.bg-story-popup:not(.is-open) .bg-story-modal{
  transform:translateY(18px) scale(.985);
  opacity:0;
}
.bg-story-popup.is-open .bg-story-modal{
  transform:translateY(0) scale(1);
  opacity:1;
}
.bg-story-pdf-viewer{
  position:absolute;
  inset:0;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:#fff;
  text-align:center;
  padding:12px 0 18px;
}
.bg-story-pdf-viewer canvas{
  display:block;
  width:min(100%,1100px);
  height:auto;
  margin:0 auto 10px;
  background:#fff;
  box-shadow:0 1px 5px rgba(0,0,0,.12);
}
.bg-story-pdf-loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font:500 14px/1 Arial,sans-serif;
  color:#555;
}
@media(max-width:600px){
  .bg-story-modal{
    width:88vw!important;
    max-width:88vw!important;
    height:82dvh!important;
    max-height:82dvh!important;
    border-radius:14px!important;
  }
  .bg-story-pdf-viewer{
    padding:6px 0 12px!important;
    overflow-x:hidden!important;
  }
  .bg-story-pdf-viewer canvas{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    margin:0 auto 7px!important;
    box-shadow:none!important;
  }
  .bg-story-close{
    transition:width .22s ease,height .18s ease,transform .34s cubic-bezier(.22,.7,.2,1),opacity .22s ease!important;
  }
  .bg-story-close:hover,.bg-story-close:focus-visible{
    transform:translateY(2px)!important;
  }
}

/* v3.4 - image popup: no PDF viewer, no horizontal overflow */
.bg-story-image{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
  max-width:100%!important;
  max-height:100%!important;
  background:transparent!important;
}
@media(max-width:600px){
  .bg-story-modal{
    width:92vw!important;
    max-width:92vw!important;
    height:88dvh!important;
    max-height:88dvh!important;
  }
  .bg-story-stage{
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:transparent!important;
  }
  .bg-story-image{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    max-width:100%!important;
    max-height:100%!important;
  }
}

/* v3.5 - close control is attached to the popup, never the page */
.bg-story-close{
  position:absolute!important;
  top:10px!important;
  right:10px!important;
  left:auto!important;
  bottom:auto!important;
  z-index:1000002!important;
}
@media(max-width:600px){
  .bg-story-close{
    position:absolute!important;
    top:8px!important;
    right:8px!important;
    left:auto!important;
    bottom:auto!important;
  }
}

/* v3.6 - elegant persistent campaign tab */
.bg-story-trigger{
  position:fixed!important;
  top:50%!important;
  right:0!important;
  left:auto!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  width:7px!important;
  min-width:7px!important;
  height:72px!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:7px 0 0 7px!important;
  background:#c9152b!important;
  color:#fff!important;
  box-shadow:0 5px 18px rgba(0,0,0,.22)!important;
  cursor:pointer!important;
  transition:width .28s cubic-bezier(.22,.7,.2,1),height .2s ease,box-shadow .2s ease,transform .28s cubic-bezier(.22,.7,.2,1)!important;
  z-index:999990!important;
}
.bg-story-trigger .bg-story-trigger-icon{
  display:block!important;
  font-size:16px!important;
  line-height:1!important;
  opacity:0!important;
  transition:opacity .18s ease!important;
}
.bg-story-trigger .bg-story-trigger-text{
  display:block!important;
  writing-mode:vertical-rl!important;
  transform:rotate(180deg)!important;
  white-space:nowrap!important;
  font:700 10px/1 Arial,sans-serif!important;
  letter-spacing:1.2px!important;
  opacity:0!important;
  transition:opacity .18s ease!important;
}
.bg-story-trigger:hover,
.bg-story-trigger:focus-visible{
  width:30px!important;
  min-width:30px!important;
  height:110px!important;
  transform:translateY(-50%)!important;
  box-shadow:0 7px 24px rgba(0,0,0,.28)!important;
}
.bg-story-trigger:hover .bg-story-trigger-icon,
.bg-story-trigger:hover .bg-story-trigger-text,
.bg-story-trigger:focus-visible .bg-story-trigger-icon,
.bg-story-trigger:focus-visible .bg-story-trigger-text{
  opacity:1!important;
}
.bg-story-trigger.is-opening{
  width:38px!important;
  min-width:38px!important;
  height:120px!important;
  transform:translateY(-50%) translateX(-3px)!important;
}
@media(max-width:600px){
  .bg-story-trigger{
    width:6px!important;
    min-width:6px!important;
    height:62px!important;
    border-radius:6px 0 0 6px!important;
  }
  .bg-story-trigger:hover,
  .bg-story-trigger:focus-visible{
    width:26px!important;
    min-width:26px!important;
    height:92px!important;
  }
  .bg-story-trigger .bg-story-trigger-text{font-size:8px!important;letter-spacing:1px!important}
  .bg-story-trigger .bg-story-trigger-icon{font-size:13px!important}
}

/* v3.7 - pure minimal trigger tab, no text */
.bg-story-trigger .bg-story-trigger-text,
.bg-story-trigger .bg-story-trigger-icon{display:none!important}

/* Popup close handle: absolutely attached to modal, matching the same slim tab language. */
.bg-story-modal .bg-story-close{
  position:absolute!important;
  top:0!important;
  right:14px!important;
  left:auto!important;
  bottom:auto!important;
  width:58px!important;
  min-width:58px!important;
  height:6px!important;
  min-height:6px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0 0 5px 5px!important;
  background:#c9152b!important;
  box-shadow:0 2px 9px rgba(0,0,0,.30)!important;
  transform:none!important;
  font-size:0!important;
  line-height:0!important;
  z-index:1000002!important;
  cursor:pointer!important;
}
.bg-story-modal .bg-story-close:hover,
.bg-story-modal .bg-story-close:focus-visible{
  width:72px!important;
  height:8px!important;
  transform:none!important;
  filter:brightness(1.08);
}
@media(max-width:600px){
 .bg-story-modal .bg-story-close{
   top:0!important;
   right:10px!important;
   width:48px!important;
   min-width:48px!important;
   height:5px!important;
   min-height:5px!important;
   border-radius:0 0 5px 5px!important;
 }
 .bg-story-modal .bg-story-close:hover,
 .bg-story-modal .bg-story-close:focus-visible{
   width:60px!important;
   height:7px!important;
 }
}

/* v3.8 - close handle is structurally attached to modal top-right */
.bg-story-modal{position:relative!important;}
.bg-story-modal .bg-story-close{
  position:absolute!important;
  top:0!important;
  right:12px!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  z-index:1000003!important;
  pointer-events:auto!important;
}
.bg-story-popup.is-open .bg-story-modal{
  animation:bgStoryPanelIn .34s cubic-bezier(.22,.7,.2,1) both;
}
.bg-story-popup.bg-story-closing .bg-story-modal{
  animation:bgStoryPanelOut .30s cubic-bezier(.55,.05,.67,.19) both;
}
@keyframes bgStoryPanelIn{
  from{opacity:0;transform:translateY(26px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes bgStoryPanelOut{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(90px) scale(.985)}
}

/* v3.9 - modal follows the portrait campaign artwork, eliminating white side bands */
.bg-story-modal{
  width:auto!important;
  height:min(94vh,920px)!important;
  max-height:94vh!important;
  max-width:94vw!important;
  aspect-ratio:835/1280!important;
  background:transparent!important;
  overflow:hidden!important;
}
.bg-story-stage{
  background:transparent!important;
}
.bg-story-image{
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  object-position:center!important;
  background:transparent!important;
}
.bg-story-modal .bg-story-close{
  top:0!important;
  right:12px!important;
  width:64px!important;
  min-width:64px!important;
  height:8px!important;
  min-height:8px!important;
  border-radius:0 0 6px 6px!important;
  background:#c9152b!important;
  box-shadow:0 2px 10px rgba(0,0,0,.30)!important;
}
.bg-story-modal .bg-story-close:hover,
.bg-story-modal .bg-story-close:focus-visible{
  width:76px!important;
  min-width:76px!important;
  height:10px!important;
}
@media(max-width:600px){
  .bg-story-modal{
    width:min(92vw,520px)!important;
    max-width:92vw!important;
    height:auto!important;
    max-height:90dvh!important;
    aspect-ratio:835/1280!important;
  }
  .bg-story-image{
    width:100%!important;
    height:100%!important;
    object-fit:fill!important;
  }
  .bg-story-modal .bg-story-close{
    top:0!important;
    right:8px!important;
    width:54px!important;
    min-width:54px!important;
    height:7px!important;
    min-height:7px!important;
  }
  .bg-story-modal .bg-story-close:hover,
  .bg-story-modal .bg-story-close:focus-visible{
    width:66px!important;
    min-width:66px!important;
    height:9px!important;
  }
}

/* v4.0 - persistent reopen tab: always visible on mobile after popup closes */
.bg-story-trigger{
  position:fixed!important;
  right:0!important;
  left:auto!important;
  top:50%!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  z-index:2147483000!important;
  pointer-events:auto!important;
  visibility:visible!important;
  opacity:1!important;
}
.bg-story-trigger.is-hidden{
  display:none!important;
}
@media(max-width:600px){
  .bg-story-trigger{
    right:0!important;
    top:50%!important;
    width:7px!important;
    min-width:7px!important;
    height:74px!important;
    transform:translateY(-50%)!important;
    border-radius:7px 0 0 7px!important;
    z-index:2147483000!important;
  }
  .bg-story-trigger:hover,
  .bg-story-trigger:focus-visible{
    width:24px!important;
    min-width:24px!important;
    height:92px!important;
    transform:translateY(-50%)!important;
  }
}

/* v4.1 - mobile trigger: force a visible fixed edge tab */
.bg-story-trigger{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
}
@media(max-width:600px){
  .bg-story-trigger{
    display:flex!important;
    position:fixed!important;
    top:50%!important;
    right:0!important;
    left:auto!important;
    bottom:auto!important;
    width:10px!important;
    min-width:10px!important;
    height:84px!important;
    margin:0!important;
    padding:0!important;
    transform:translateY(-50%)!important;
    background:#c9152b!important;
    border:0!important;
    border-radius:8px 0 0 8px!important;
    box-shadow:0 3px 14px rgba(0,0,0,.30)!important;
    z-index:2147483647!important;
    visibility:visible!important;
    opacity:1!important;
  }
  .bg-story-trigger.is-hidden{
    display:none!important;
  }
}

/* v4.2 - easier mobile tap target */
@media(max-width:600px){
  .bg-story-trigger{
    width:16px!important;
    min-width:16px!important;
    height:90px!important;
  }
  .bg-story-trigger:hover,
  .bg-story-trigger:focus-visible{
    width:30px!important;
    min-width:30px!important;
    height:102px!important;
  }
}
