/* Responsive editorial composition. Scene artwork retains its own coordinate space. */
html,body,#zoo-journey{background:#f5f8fd!important}
/* Keep mobile rubber-band scrolling from exposing the document behind the story. */
html,body{width:100%;height:100%;overflow:hidden!important;overscroll-behavior:none}
body{position:fixed;inset:0}
#zoo-journey{position:fixed;inset:0;height:100dvh;overflow:hidden;overscroll-behavior:none}
#zoo-journey .j-phone{border:0;border-radius:0;box-shadow:none}
#zoo-journey .story-description,#zoo-journey .story-context{display:none}
#zoo-journey .segment-name{display:none}
/* The centered tablet/in-app canvas needs the same title-relative spacing as phones. */
@media (max-width:899px) and (min-height:481px){
 #zoo-journey #zoo-activity-story .activity-status{top:var(--activity-status-top,218px);left:calc(7% + 4px);right:7%;line-height:16px}
}
#zoo-journey .j-trail{display:none}
#zoo-journey #zoo-activity-story .za-base,#zoo-journey #zoo-action-story .ac-base{filter:saturate(.75) brightness(1.04);opacity:1}
#zoo-journey #zoo-activity-story .za-walkways,#zoo-journey #zoo-action-story .ac-walkways{opacity:.12}
#zoo-journey #zoo-activity-story .za-legend{top:66%;font-size:10px;gap:10px}
#zoo-journey #zoo-activity-story .za-legend i{height:5px;background:linear-gradient(90deg,#1669df,#48bce7,#8ed8bb,#f6da64,#ff9c42,#dd3d35)}
#zoo-journey #zoo-activity-story .za-insight{border:0;border-left:2px solid #086dff;border-radius:0;box-shadow:none;background:transparent;padding:8px 0 8px 16px}
#zoo-journey #zoo-activity-story .za-insight p{font-size:5.7cqw;line-height:1.2}
#zoo-journey #zoo-activity-story .za-insight>span{font-size:9px;letter-spacing:1px}
#zoo-journey #zoo-activity-story .za-recommendation{font-size:12px}
#zoo-journey .rv-outcome-title>strong{font-size:5.1cqw;line-height:1.13}
#zoo-journey .rv-outcome p{font-size:3.2cqw}
#zoo-journey .rv-outcome-title>svg{display:none}
#zoo-journey .rv-outcomes{top:53%;bottom:58px;gap:14px}
#zoo-journey .j-controls button{min-height:44px}
#zoo-journey .j-header b{font-weight:720}
@media(max-width:699px) and (min-height:820px){
 #zoo-journey .j-phone{width:100vw;max-width:480px;height:100dvh;aspect-ratio:auto;--nav-height:calc(88px + env(safe-area-inset-bottom))}
 #zoo-journey .rv-composition{top:27%}
 #zoo-journey .j-header{top:calc(24px + env(safe-area-inset-top))}
 #zoo-journey .j-caption{top:12%}
 #zoo-journey .j-navigation{padding-bottom:env(safe-area-inset-bottom)}
}
@media(min-width:900px) and (min-height:560px){
 #zoo-journey .j-phone{width:100%;height:100dvh;aspect-ratio:auto;max-width:1800px;--content-bottom:24px}
 #zoo-journey .j-header{top:36px;left:5.5%;right:5.5%;height:36px}
 #zoo-journey .j-header b{font-size:28px;letter-spacing:-1.2px}
 #zoo-journey .story-brand svg{width:28px;height:30px}
 #zoo-journey .j-number{font-size:12px}
 #zoo-journey .j-caption{top:29%;left:5.5%;right:auto;width:37%;max-width:580px}
 #zoo-journey .j-chapter{font-size:11px;letter-spacing:2px;color:#086dff}
 #zoo-journey .j-caption h2{font-size:clamp(40px,4vw,64px);letter-spacing:-.055em;font-weight:650;line-height:1.04;margin-top:22px}
 #zoo-journey .story-description{display:block;font-size:clamp(15px,1.3vw,19px);line-height:1.65;letter-spacing:-.02em;color:#526780;max-width:360px;margin:26px 0 0}
 #zoo-journey .story-context{display:block;font-size:9px;letter-spacing:1.6px;color:#74859b;margin-top:44px}
 #zoo-journey .j-stage{inset:90px 4% 118px auto;width:min(49vw,620px)}
 #zoo-journey .j-stage>div>div{background:transparent;overflow:visible}
 #zoo-journey #ticket-record-motion .tr-stage{top:4%;height:86%;left:17%;width:66%}
 #zoo-journey #ticket-record-motion .tr-caption{bottom:0}
 #zoo-journey #ticket-record-motion .tr-row strong{font-size:22px}
 #zoo-journey #ticket-record-motion .tr-paper-top b{font-size:39px;letter-spacing:-2px}
 #zoo-journey #ticket-record-motion .tr-admission strong{font-size:24px}
 #zoo-journey #ticket-record-motion .tr-postcode{font-size:56px}
 #zoo-journey #origin-camera .oc-map{top:-4%;height:90%;width:100%}
 #zoo-journey #origin-camera .oc-payoff{font-size:25px;bottom:0}
 #zoo-journey #zoo-activity-story .za-map,#zoo-journey #zoo-action-story .ac-map{top:-4%;width:100%;mask-image:linear-gradient(transparent,#000 6%,#000 91%,transparent)}
 #zoo-journey #zoo-activity-story .za-insight{bottom:0;left:10%;right:10%;padding:8px 0 8px 18px}
 #zoo-journey #zoo-activity-story .za-insight p{font-size:26px;margin-top:8px}
 #zoo-journey #zoo-activity-story .za-insight p br{display:none}
 #zoo-journey #zoo-activity-story .za-insight>span{font-size:10px}
 #zoo-journey #zoo-activity-story .za-recommendation{font-size:14px;margin-top:8px}
 #zoo-journey #zoo-activity-story .za-legend{top:auto;bottom:130px;font-size:11px}
 #zoo-journey #zoo-action-story .ac-step{bottom:15px;left:10%;right:10%}
 #zoo-journey #zoo-action-story .ac-step p{font-size:26px}
 #zoo-journey #zoo-action-story .ac-report-flow{top:4%;bottom:0;left:12%;right:12%;gap:18px}
 #zoo-journey #zoo-action-story .ac-report{padding:24px;gap:12px;border-radius:16px}
 #zoo-journey #zoo-action-story .ac-report h3{font-size:30px}
 #zoo-journey #zoo-action-story .ac-member-values>div>strong{font-size:36px}
 #zoo-journey .rv-composition{top:3%;bottom:0;left:10%;right:10%}
 #zoo-journey .rv-sources>span{font-size:15px;height:40px}
 #zoo-journey .rv-hub>strong{font-size:35px}
 #zoo-journey .rv-hub-note{font-size:14px}
 #zoo-journey .rv-outcome-title>strong{font-size:27px}
 #zoo-journey .rv-outcome p{font-size:15px;line-height:1.5}
 #zoo-journey .rv-outcomes{top:52%;bottom:68px}
 #zoo-journey .j-navigation{left:5.5%;right:5.5%;height:100px;padding:0;border-top:1px solid #d7e2f0;background:transparent}
 #zoo-journey .j-controls{position:absolute;right:0;top:20px;width:245px;height:48px}
 #zoo-journey .j-note{display:none}
 #zoo-journey .j-controls>div{width:100%;justify-content:space-between}
 #zoo-journey .j-controls button{font-size:13px}
 #zoo-journey .j-controls .j-play{min-width:80px}
 #zoo-journey .j-segments{width:calc(100% - 310px);height:80px;gap:25px}
 #zoo-journey .j-segments button{height:70px;text-align:left}
 #zoo-journey .j-segments button:before,#zoo-journey .j-segments i{top:52px;height:2px}
 #zoo-journey .segment-name{display:block;position:absolute;top:17px;color:#74859b;font:500 11px StoryInter,sans-serif;white-space:nowrap;letter-spacing:.02em}
 #zoo-journey [aria-current] .segment-name{color:#086dff}
 #zoo-journey .j-waypoint{display:none}
}
@media(min-width:900px) and (max-height:740px){
 #zoo-journey .j-caption{top:25%}
 #zoo-journey .story-context{margin-top:20px}
 #zoo-journey .j-stage{width:min(43vw,480px);right:7%;top:88px;bottom:110px}
 #zoo-journey #zoo-activity-story .za-map,#zoo-journey #zoo-action-story .ac-map{top:-14%}
 #zoo-journey #zoo-activity-story .za-insight p{font-size:22px}
 #zoo-journey #zoo-action-story .ac-report{padding:16px;gap:5px}
 #zoo-journey .rv-outcome-title>strong{font-size:22px}
 #zoo-journey .rv-outcome p{font-size:12px}
 #zoo-journey .rv-hub-note{display:none}
}

/* Compact composition stays inside the viewport; never introduce a scroller. */
@media(max-width:899px) and (max-height:819px){
 #zoo-journey{height:100dvh;min-height:0;overflow:clip;overscroll-behavior:none}
 #zoo-journey .j-phone{width:min(100vw,420px);height:100dvh;aspect-ratio:auto;--nav-height:76px;--content-bottom:92px}
 #zoo-journey .j-header{top:18px}
 #zoo-journey .j-caption{top:68px}
 #zoo-journey .j-caption h2{font-size:clamp(22px,6.7vw,28px);margin-top:7px}
 #zoo-journey .j-controls{height:40px}
 #zoo-journey .j-segments{height:28px}
 #zoo-journey .rv-composition{top:29%;bottom:92px}
 #zoo-journey .rv-sources>span{height:25px;font-size:11px}
 #zoo-journey .rv-sources{gap:5px 12px}
 #zoo-journey .rv-hub{top:22%;padding:4px 0}
 #zoo-journey .rv-hub>strong{font-size:25px}
 #zoo-journey .rv-hub-note{display:none}
 #zoo-journey .rv-outcomes{top:44%;bottom:44px;gap:8px}
 #zoo-journey .rv-outcome-title>strong{font-size:17px}
 #zoo-journey .rv-outcome p{font-size:11px;line-height:1.3;margin-top:4px}
 #zoo-journey .story-finish-link{min-height:34px;padding:7px 12px;font-size:11px}
 #zoo-journey #zoo-action-story .ac-report-flow{top:29%;gap:6px}
 #zoo-journey #zoo-action-story .ac-request{display:none}
 #zoo-journey #zoo-action-story .ac-report{padding:12px;gap:5px}
 #zoo-journey #zoo-action-story .ac-report h3{font-size:21px}
 #zoo-journey #zoo-action-story .ac-ready{font-size:11px;flex-basis:18px}
 #zoo-journey #zoo-activity-story .za-map,#zoo-journey #zoo-action-story .ac-map{width:80%;left:10%;top:23%}
 #zoo-journey #zoo-activity-story .za-legend{top:60.5%;font-size:9px}
 #zoo-journey #zoo-activity-story .za-insight p{font-size:20px;margin-top:6px}
 #zoo-journey #zoo-activity-story .za-recommendation{font-size:11px;margin-top:6px}
 #zoo-journey #zoo-action-story .ac-step p{font-size:20px}
}

@media(min-width:900px) and (min-height:560px){#zoo-journey .j-controls{left:auto;bottom:auto;z-index:30}}
/* A shared mobile grid keeps the artwork and takeaways anchored across chapters. */
@media(max-width:699px) and (min-height:820px){
 #zoo-journey .j-phone{--activity-map-top:max(19%,calc(var(--activity-status-top,218px) + 32px - 18.5vw));--nav-height:calc(80px + env(safe-area-inset-bottom));--content-bottom:calc(var(--nav-height) + 24px)}
 #zoo-journey .j-header,#zoo-journey .j-caption{left:24px;right:24px}
 #zoo-journey .j-caption{top:88px}
 #zoo-journey .j-navigation{padding-left:24px;padding-right:24px}
 #zoo-journey .j-controls{height:40px}
 #zoo-journey .j-segments{height:28px}
 #zoo-journey #zoo-activity-story .za-map,#zoo-journey #zoo-action-story .ac-map{top:var(--activity-map-top)}
 #zoo-journey #zoo-activity-story .za-legend{top:calc(var(--activity-map-top) + 84vw + 24px);left:24px;right:24px}
 #zoo-journey #zoo-activity-story .za-insight,#zoo-journey #zoo-action-story .ac-step{top:calc(var(--activity-map-top) + 84vw + 60px);bottom:auto;left:24px;right:24px;max-width:none}
 #zoo-journey #zoo-activity-story .activity-status{top:var(--activity-status-top,218px);left:28px;right:24px;line-height:16px}
 #zoo-journey #ticket-record-motion .tr-stage{left:24px;right:24px;width:auto}
 #zoo-journey #zoo-action-story .ac-report-flow{left:24px;right:24px}
 #zoo-journey .rv-composition{top:220px;left:24px;right:24px}
}
@media(max-width:899px) and (max-height:480px) and (orientation:landscape){
 #zoo-journey .j-phone{width:100%;max-width:none}
 #zoo-journey .j-header b{font-size:22px;letter-spacing:-1px}
 #zoo-journey .j-header{top:16px;left:5%;right:5%}
 #zoo-journey .j-caption{left:5%;top:30%;width:40%;right:auto}
 #zoo-journey .j-caption h2{font-size:28px;letter-spacing:-1px}
 #zoo-journey .j-stage{inset:0 7% auto auto;width:380px;height:640px}
 #zoo-journey .j-stage>div{width:380px;height:640px;transform:scale(var(--landscape-scale,.5));transform-origin:top right}
 #zoo-journey .j-stage>div>div{height:640px}
 #zoo-journey .j-waypoint{display:none}
 #zoo-journey .j-navigation{left:5%;right:5%;padding:0;height:68px}
}

@media(max-width:899px) and (min-height:481px) and (max-height:819px){#zoo-journey #zoo-activity-story .activity-status{top:var(--activity-status-top,170px);left:calc(7% + 4px);line-height:12px}#zoo-journey #zoo-activity-story .za-map,#zoo-journey #zoo-action-story .ac-map{top:calc(23% + 16px);width:72%;left:14%}}

@media(min-width:700px) and (max-width:899px) and (min-height:820px){#zoo-journey #zoo-activity-story .za-legend{top:69%;color:#526780}}
@media(min-width:700px) and (max-width:899px) and (min-height:820px){#zoo-journey .rv-composition{top:30%}}

/* Presentation typography: information should be readable while the story moves. */

/* Give the zoo demonstration more of the frame; both chapters share the crop. */
@media(min-width:900px) and (min-height:560px){
 #zoo-journey #zoo-activity-story .za-map,#zoo-journey #zoo-action-story .ac-map{width:122%;left:-15%;top:-15%}
 #zoo-journey #zoo-activity-story .za-legend{bottom:112px}
}
@media(min-width:900px) and (min-height:560px) and (max-height:740px){
 #zoo-journey #zoo-activity-story .za-map,#zoo-journey #zoo-action-story .ac-map{top:-20%}
 #zoo-journey #zoo-activity-story .activity-status{top:-30px}
}
@media(max-width:699px) and (min-height:820px){
 #zoo-journey #zoo-activity-story .za-map,#zoo-journey #zoo-action-story .ac-map{width:112%;left:-6%}
 #zoo-journey #zoo-activity-story .za-legend{top:calc(var(--activity-map-top) + 94vw + 24px)}
 #zoo-journey #zoo-activity-story .za-insight,#zoo-journey #zoo-action-story .ac-step{top:calc(var(--activity-map-top) + 94vw + 60px)}
}
@media(min-width:700px) and (max-width:899px) and (min-height:820px){
 #zoo-journey #zoo-activity-story .za-map,#zoo-journey #zoo-action-story .ac-map{width:108%;left:-4%;top:20%}
}
@media(max-width:899px) and (min-height:481px) and (max-height:819px){
 #zoo-journey #zoo-activity-story .za-map,#zoo-journey #zoo-action-story .ac-map{width:82%;left:9%;top:calc(23% + 16px)}
 #zoo-journey #zoo-activity-story .za-legend{top:65.5%}
 #zoo-journey #zoo-activity-story .za-insight>span{display:none}
}
#zoo-journey .rv-outcomes{justify-content:flex-start;gap:24px}
#zoo-journey .rv-finish{position:static;margin-top:4px;text-align:left}
#zoo-journey .rv-lines path:last-of-type{display:none}
#zoo-journey .story-context{display:none}
#zoo-journey .j-chapter{font-size:12px;letter-spacing:1.5px}
#zoo-journey .j-note{font-size:11px;color:#526780}
#zoo-journey .segment-name{font-size:12px;color:#526780}
#zoo-journey #zoo-activity-story .activity-status{font-size:12px;line-height:18px;color:#3e5874}
#zoo-journey #zoo-activity-story .za-legend{font-size:12px;gap:10px;color:#3e5874}
#zoo-journey #zoo-activity-story .za-legend{white-space:nowrap;align-items:center}
#zoo-journey #origin-camera .oc-state-name{display:none}
#zoo-journey #zoo-activity-story .za-insight>span{font-size:11px;letter-spacing:.6px}
#zoo-journey #zoo-activity-story .za-recommendation{font-size:14px;line-height:1.4;color:#3e5874}
#zoo-journey #zoo-action-story .ac-step>span{font-size:12px;letter-spacing:.8px;color:#526780}
#zoo-journey #zoo-action-story .ac-report-top{font-size:12px;letter-spacing:.3px}
#zoo-journey #zoo-action-story .ac-section-title{font-size:13px;color:#264566}
#zoo-journey #zoo-action-story .ac-bar-row{font-size:14px;color:#3e5874}
#zoo-journey #zoo-action-story .ac-zone-summary{font-size:15px}
#zoo-journey #zoo-action-story .ac-member-values span{font-size:13px;color:#3e5874}
#zoo-journey #zoo-action-story .ac-report-foot{font-size:12px;color:#526780}
#zoo-journey #zoo-action-story .ac-ready{font-size:13px;color:#456426}
#zoo-journey .rv-sources>span{font-size:14px}
#zoo-journey .rv-hub-label{font-size:11px;letter-spacing:1px;color:#526780}
#zoo-journey .rv-hub>strong{font-size:34px}
#zoo-journey .rv-outcome p{font-size:14px;line-height:1.45;color:#3e5874}
#zoo-journey .story-finish-link{font-size:14px;min-height:44px;padding:12px 20px;border-radius:10px}
#zoo-journey #ticket-record-motion .tr-origin-label{font-size:12px;letter-spacing:1px}
#zoo-journey #ticket-record-motion .tr-row{font-size:14px}
#zoo-journey #ticket-record-motion .tr-caption{font-size:14px}
#zoo-journey #zoo-activity-story .za-base,#zoo-journey #zoo-action-story .ac-base{filter:saturate(.48) brightness(1.08)}
@media(min-width:900px) and (min-height:560px){
 #zoo-journey .j-caption{top:27%}
 #zoo-journey .story-description{max-width:390px;line-height:1.55}
 #zoo-journey .rv-hub>strong{font-size:42px}
 #zoo-journey .rv-hub-note{font-size:15px}
 #zoo-journey .rv-outcome p{font-size:16px}
 #zoo-journey #zoo-action-story .ac-bar-row{font-size:16px}
 #zoo-journey #zoo-action-story .ac-section-title{font-size:14px}
 #zoo-journey #zoo-action-story .ac-zone-summary{font-size:16px}
 #zoo-journey #zoo-activity-story .activity-status{font-size:13px}
 #zoo-journey #zoo-activity-story .za-insight>span{font-size:12px}
}
@media(max-width:899px) and (min-height:481px) and (max-height:819px){
 #zoo-journey .rv-sources>span{font-size:13px}
 #zoo-journey .rv-hub>strong{font-size:28px}
 #zoo-journey .rv-outcome p{font-size:13px;line-height:1.35}
 #zoo-journey .rv-outcome-title>strong{font-size:18px}
 #zoo-journey .rv-outcomes{bottom:54px}
 #zoo-journey .rv-outcomes{gap:16px;bottom:0}
 #zoo-journey #zoo-activity-story .za-recommendation{font-size:13px}
 #zoo-journey #zoo-action-story .ac-report-top{font-size:11px}
 #zoo-journey #zoo-action-story .ac-report-foot{font-size:11px}
 #zoo-journey #zoo-action-story .ac-report-block{flex:0 1 auto}
 #zoo-journey #zoo-action-story .ac-report h3{margin:0}
}

@media(max-width:699px) and (min-height:820px) and (max-height:879px) and (min-aspect-ratio:1/2){
 #zoo-journey #zoo-activity-story .za-map,#zoo-journey #zoo-action-story .ac-map{width:106%;left:-3%}
 #zoo-journey #zoo-activity-story .za-legend{top:calc(var(--activity-map-top) + 89vw + 20px)}
 #zoo-journey #zoo-activity-story .za-insight,#zoo-journey #zoo-action-story .ac-step{top:calc(var(--activity-map-top) + 89vw + 50px)}
 #zoo-journey #zoo-activity-story .za-insight>span{display:none}
}

/* Keep the final CTA interactive inside the non-interactive animation stage. */
#zoo-journey .j-stage:not([inert]) .story-finish-link{pointer-events:auto}