:root{
  --navy:#262e63; --pink:#f2558c; --mint:#75d7c6; --yellow:#f9eb4f;
  --white:#fff; --muted:#6d7390; --shadow:0 18px 55px rgba(38,46,99,.12);
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;background:#fff;color:var(--navy);font-family:Arial,Helvetica,sans-serif}
body{overflow:hidden} button{font:inherit}.experience{width:100vw;height:100vh;position:relative;overflow:hidden;background:#fff}
.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;padding:4vw;text-align:center;background:#fff;opacity:0;transform:scale(.985)}
.screen.active{display:flex;animation:screenIn .6s ease forwards}@keyframes screenIn{to{opacity:1;transform:scale(1)}}
.setup-logo{width:min(400px,45vw);margin-bottom:24px}.setup-screen h1{font-size:clamp(34px,5vw,72px);margin:.2em 0}.setup-copy{font-size:clamp(16px,1.5vw,22px);color:var(--muted)}
.vo-options{display:grid;gap:10px;text-align:left;border:1px solid #d7d9e5;padding:18px 22px;border-radius:16px;margin:18px 0 24px;min-width:min(520px,90vw)}.vo-options legend{font-weight:700;padding:0 8px}
.primary-btn,.small-btn{border:0;border-radius:999px;cursor:pointer}.primary-btn{background:var(--navy);color:#fff;padding:16px 30px;font-weight:700;font-size:18px;box-shadow:var(--shadow)}.small-btn{margin-top:16px;background:#f1f2f6;color:var(--navy);padding:10px 18px}
.logo-button,.clickable-brand{border:0;background:transparent;cursor:pointer}.full-logo-button img{width:min(620px,62vw)}.opening-screen h2{font-size:clamp(30px,4vw,58px);letter-spacing:.08em;margin:32px 0 0}.click-hint{position:absolute;bottom:2.4vh;font-size:13px;color:#8b90a6;letter-spacing:.06em;text-transform:uppercase}
.m-centre{width:min(440px,36vw);z-index:2}.word-stage{position:absolute;inset:0;pointer-events:none}.floating-word{position:absolute;font-weight:800;color:var(--navy);font-size:clamp(22px,3vw,50px);letter-spacing:.03em;opacity:0;white-space:nowrap}.floating-word.animate{animation:floatWord 2.75s ease both}@keyframes floatWord{0%{opacity:0;transform:translateY(18px) scale(.96)}27%{opacity:1;transform:none}73%{opacity:1}100%{opacity:0;transform:translateY(-18px) scale(1.03)}}
.three-logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw;width:min(1200px,92vw);align-items:center}.brand-card{min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;position:relative}.brand-card img{max-width:100%;max-height:170px;object-fit:contain}.brand-word{font-size:clamp(20px,2.6vw,40px);letter-spacing:.08em;opacity:0;animation:fadeUp .9s ease forwards}.reveal-delay-1{animation-delay:.2s}.reveal-delay-2{animation-delay:1.45s}.reveal-delay-3{animation-delay:2.7s}@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.question-screen .m-button,.change-screen .m-button{margin-bottom:28px}.m-button img{width:min(260px,24vw)}.question-screen h2,.change-screen h2,.benefits-screen h2{font-size:clamp(34px,5.2vw,76px);max-width:1200px;line-height:1.04}
.cycle-layout{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.cycle-wrap{width:min(700px,68vh,76vw);aspect-ratio:1;position:relative;transition:transform .85s cubic-bezier(.2,.8,.2,1)}
.journey-layers{position:absolute;inset:0}.journey-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .55s ease,filter .55s ease,transform .85s cubic-bezier(.2,.8,.2,1)}.journey-image.dimmed{opacity:0}.journey-image.active-segment{opacity:1;filter:none}
.cycle-hit-areas{position:absolute;inset:0;width:100%;height:100%;z-index:3}.hit-area{fill:transparent;cursor:pointer;outline:none}.hit-area:focus-visible{fill:rgba(38,46,99,.08);stroke:var(--navy);stroke-width:3}
.cycle-center{position:absolute;inset:38%;border:0;border-radius:50%;background:#fff;box-shadow:0 8px 30px rgba(38,46,99,.13);cursor:pointer;padding:18px;z-index:6}.cycle-center img{width:100%;height:100%;object-fit:contain}.hidden{display:none!important}
.media-panel{position:absolute;width:min(720px,54vw);height:min(420px,50vh);border-radius:26px;overflow:hidden;background:#111;box-shadow:var(--shadow);z-index:5}.media-panel.right{right:5vw}.media-panel.left{left:5vw}.media-panel video{width:100%;height:100%;object-fit:cover;background:#111}.video-fallback{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff;padding:28px;background:linear-gradient(135deg,var(--navy),#121735)}.video-fallback p{font-family:monospace}
.applied-words{position:absolute;inset:0;z-index:6;pointer-events:none}.applied-word{position:absolute;font-weight:900;font-size:clamp(24px,3.4vw,58px);color:var(--navy);opacity:0}.applied-word.show{animation:appliedInOut 2.1s ease both}.applied-word.final{left:50%!important;top:50%!important;transform:translate(-50%,-50%);font-size:clamp(34px,5vw,72px);width:85vw}.applied-word.final.show{animation:finalIn .8s ease forwards}@keyframes appliedInOut{0%{opacity:0;transform:scale(.9)}20%,70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}@keyframes finalIn{to{opacity:1}}
.commitment-panel{position:absolute;left:5vw;width:min(470px,38vw);height:min(440px,52vh);display:flex;align-items:center;justify-content:center}.commitment-panel img{max-width:100%;max-height:100%;object-fit:contain}
.stage-words{display:flex;gap:clamp(24px,5vw,90px);margin-top:20px}.stage-word{font-size:clamp(30px,5.2vw,80px);font-weight:900;opacity:0;transform:translateY(25px);animation:stageReveal .7s ease forwards}.stage-word:nth-child(1){animation-delay:.25s}.stage-word:nth-child(2){animation-delay:1.05s}.stage-word:nth-child(3){animation-delay:1.85s}@keyframes stageReveal{to{opacity:1;transform:none}}
.benefits-screen{padding-top:9vh}.top-m{position:absolute;top:3vh}.top-m img{width:min(150px,13vw)}.programme-name{font-size:clamp(18px,2vw,28px);margin-top:-1.2em;color:var(--muted)}.benefit-cloud{position:relative;width:min(1100px,90vw);height:50vh;margin-top:2vh}.benefit{position:absolute;max-width:360px;opacity:0;animation:benefitIn .9s ease forwards}.benefit strong{display:block;font-size:clamp(21px,2.4vw,36px);margin-bottom:7px}.benefit span{display:block;font-size:clamp(15px,1.3vw,20px);color:#596079}.benefit-1{left:2%;top:5%;animation-delay:.3s}.benefit-2{right:3%;top:8%;animation-delay:1.5s}.benefit-3{left:9%;bottom:8%;animation-delay:2.7s}.benefit-4{right:8%;bottom:5%;animation-delay:3.9s}@keyframes benefitIn{to{opacity:1;transform:none}}
.questions-logo{width:min(330px,28vw);max-height:30vh;object-fit:contain}.close-screen h2{font-size:clamp(32px,4.3vw,64px);margin:18px 0 4px}.close-screen h3{font-size:clamp(38px,5.5vw,78px);margin:20px 0}.closing-line{font-size:clamp(15px,1.4vw,21px);color:var(--muted)}
@media(max-width:800px){.three-logo-grid{grid-template-columns:1fr;gap:14px}.brand-card{min-height:150px}.brand-card img{max-height:80px}.cycle-wrap{width:min(92vw,70vh)}.media-panel{width:88vw;height:42vh;left:6vw!important;right:auto!important}.benefit-cloud{height:56vh}.benefit{max-width:45%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


.vo-options label{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid transparent;
  border-radius:12px;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.vo-options label:has(input:checked){
  background:#f4f5fa;
  border-color:#cfd3e3;
  font-weight:700;
}
.vo-options input[type="radio"]{
  accent-color:var(--navy);
  width:18px;
  height:18px;
}

/* V4: image-based learning cycle */
#cycleSvg{display:none!important}
.journey-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  cursor:pointer;
  transition:opacity .45s ease, filter .45s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.journey-layer img{
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}
.journey-layer.dimmed{opacity:0;pointer-events:none}
.journey-layer.active-segment{opacity:1}
.journey-layer:hover:not(.dimmed){filter:brightness(1.05)}
.journey-layer:focus-visible{outline:4px solid var(--pink);outline-offset:4px;border-radius:50%}

.music-switch{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:16px;
  cursor:pointer;
  color:var(--navy);
  font-weight:700;
}
.music-switch input{
  width:19px;
  height:19px;
  accent-color:var(--navy);
}


/* ==========================================================
   VERSION 5 OVERRIDES
   ========================================================== */

/* Sentence-case transition question */
.question-screen h2{
  text-transform:none;
  letter-spacing:0;
}

/* Larger learning cycle */
.cycle-screen{
  padding:1.8vw;
}
.cycle-layout{
  width:100%;
  height:100%;
}
.cycle-wrap{
  width:min(980px,88vh,92vw);
  max-width:92vw;
  aspect-ratio:1;
}

/*
  Each supplied Journey PNG keeps its own transparent canvas.
  These tiny per-segment corrections compensate for the exported
  image alignment so the five pieces visually meet as one cycle.
*/
.journey-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  transform-origin:50% 50%;
}
.journey-layer img{
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}

/* Pink — Pre-Lab */
.journey-1 img{
  transform:translate(0%, 0%) scale(1.015);
}
/* Navy — Learning Labs */
.journey-2 img{
  transform:translate(0%, 0%) scale(1.015);
}
/* Green — Personal Growth: nudge left/down to meet navy/yellow */
.journey-3 img{
  transform:translate(-1.4%, .8%) scale(1.025);
}
/* Yellow — Coaching: nudge upward slightly and enlarge */
.journey-4 img{
  transform:translate(.1%, -1.5%) scale(1.025);
}
/* Purple — Applied Learning */
.journey-5 img{
  transform:translate(.2%, -.1%) scale(1.015);
}

.cycle-center{
  inset:40%;
}

/* Reliable start-screen music control */
.music-switch{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  margin-top:17px;
  padding:11px 18px;
  border-radius:999px;
  background:#f1f2f6;
  color:var(--navy);
  font-weight:700;
  cursor:pointer;
  user-select:none;
}
.music-switch input{
  width:20px;
  height:20px;
  accent-color:var(--navy);
  cursor:pointer;
}

@media(max-width:800px){
  .cycle-wrap{
    width:min(96vw,82vh);
  }
}


/* ==========================================================
   VERSION 6 OVERRIDES
   ========================================================== */

/* Three brands: fixed lower baseline and consistent styling */
.three-logo-grid{
  align-items:start;
}
.brand-card{
  height:390px;
  min-height:390px;
  display:grid;
  grid-template-rows:230px 1fr;
  align-items:center;
  justify-items:center;
  gap:38px;
}
.brand-card img{
  align-self:center;
  justify-self:center;
  max-height:185px;
}
.brand-word{
  align-self:start;
  margin-top:14px;
  color:var(--navy)!important;
  line-height:1;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.clickable-brand{
  height:390px;
}

/* POSSIBILITY is the closing emphasis word */
.floating-word.possibility-word{
  color:var(--pink);
  font-size:clamp(30px,4.1vw,66px);
}
.floating-word.possibility-word.animate{
  animation-duration:3.75s;
}

/* Keep the enlarged cycle, but remove all prior per-PNG nudges/scaling. */
.cycle-wrap{
  width:min(980px,88vh,92vw);
  max-width:92vw;
  aspect-ratio:1;
}
.journey-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  pointer-events:none;
  transition:opacity .45s ease, filter .45s ease;
}
.journey-layer img,
.journey-1 img,
.journey-2 img,
.journey-3 img,
.journey-4 img,
.journey-5 img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  transform:none!important;
  pointer-events:none;
  user-select:none;
}
.journey-layer.dimmed{
  opacity:0;
}
.journey-layer.active-segment{
  opacity:1;
}

/* Reliable clickable areas for each visual segment */
.journey-hotspot{
  position:absolute;
  z-index:30;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  cursor:pointer;
}
.journey-hotspot:focus-visible{
  outline:4px solid var(--pink);
  outline-offset:4px;
}

/* Approximate visible segment regions */
.hotspot-prelab{
  left:15%;
  top:7%;
  width:38%;
  height:37%;
  clip-path:polygon(5% 5%,100% 0,78% 100%,0 78%);
}
.hotspot-learninglab{
  right:14%;
  top:7%;
  width:38%;
  height:38%;
  clip-path:polygon(0 0,95% 5%,100% 78%,22% 100%);
}
.hotspot-personalgrowth{
  right:8%;
  top:39%;
  width:38%;
  height:39%;
  clip-path:polygon(20% 0,100% 18%,82% 100%,0 78%);
}
.hotspot-coaching{
  left:28%;
  bottom:4%;
  width:45%;
  height:30%;
  clip-path:polygon(15% 0,85% 0,100% 65%,50% 100%,0 65%);
}
.hotspot-applied{
  left:8%;
  top:39%;
  width:38%;
  height:39%;
  clip-path:polygon(0 18%,80% 0,100% 78%,18% 100%);
}

/* Persistent music slider on every screen */
.global-music-control{
  position:fixed;
  right:18px;
  bottom:16px;
  z-index:9999;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  box-shadow:0 6px 22px rgba(38,46,99,.14);
  color:var(--navy);
  font-size:12px;
  font-weight:700;
  backdrop-filter:blur(8px);
}
.global-music-control input[type="range"]{
  width:120px;
  accent-color:var(--navy);
}
#musicVolumeValue{
  min-width:34px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.music-volume-label{
  text-transform:uppercase;
  letter-spacing:.06em;
}

@media(max-width:800px){
  .brand-card,.clickable-brand{
    height:185px;
    min-height:185px;
    grid-template-rows:105px 1fr;
    gap:18px;
  }
  .brand-card img{max-height:90px}
  .brand-word{margin-top:6px}
  .global-music-control{
    right:8px;
    bottom:8px;
  }
  .global-music-control input[type="range"]{width:90px}
}


/* ==========================================================
   VERSION 7 OVERRIDES
   ========================================================== */

/* Navigation is available throughout the presentation. */
.global-nav{
  position:fixed;
  right:18px;
  bottom:16px;
  z-index:10000;
  display:flex;
  gap:8px;
}
.nav-btn{
  min-width:78px;
  border:1px solid #d7d9e5;
  border-radius:999px;
  padding:10px 16px;
  background:rgba(255,255,255,.96);
  color:var(--navy);
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 22px rgba(38,46,99,.12);
}
.nav-btn-primary{
  border-color:var(--navy);
  background:var(--navy);
  color:#fff;
}
.nav-btn:hover{
  transform:translateY(-1px);
}
.nav-btn:focus-visible{
  outline:3px solid var(--pink);
  outline-offset:2px;
}

/* Music control stays visible on every page and now sits beside navigation. */
.global-music-control{
  right:196px;
}

/* Slightly broader PRE-LAB clickable region for reliability. */
.hotspot-prelab{
  left:11%;
  top:3%;
  width:44%;
  height:43%;
  clip-path:polygon(0 0,100% 0,82% 100%,0 82%);
  z-index:40;
}

@media(max-width:800px){
  .global-nav{
    right:8px;
    bottom:8px;
  }
  .nav-btn{
    min-width:64px;
    padding:9px 12px;
  }
  .global-music-control{
    right:154px;
  }
}


/* ==========================================================
   VERSION 8 OVERRIDES
   ========================================================== */

/* V8 navigation is Next / Back only. Visual elements are not buttons. */
.logo-button,
.clickable-brand,
.journey-hotspot,
.journey-layer{
  cursor:default!important;
  pointer-events:none!important;
}


/* During a selected journey section all other sections vanish completely. */
.journey-layer.dimmed{
  opacity:0!important;
  visibility:hidden!important;
}

/* Current journey image stays fully visible. */
.journey-layer.active-segment{
  opacity:1!important;
  visibility:visible!important;
}

/* Keep the enlarged full cycle centred after Applied Learning. */
.cycle-wrap{
  width:min(980px,88vh,92vw);
  max-width:92vw;
}

/* Hide now-unused centre button and commitment layout. */
#cycleCenter,
#commitmentPanel{
  display:none!important;
}

/* Make navigation visibly primary in V8. */
.global-nav{
  z-index:12000;
}

/* Ensure music slider has a clear interactive track */
.global-music-control{
  z-index:12000;
}
.global-music-control input[type="range"]{
  cursor:pointer;
}


/* ==========================================================
   VERSION 9 OVERRIDES
   ========================================================== */

/* Bigger video when a single journey segment is active */
.media-panel.journey-media-large{
  width:min(900px,62vw);
  height:min(540px,62vh);
}

/* Ensure all videos stay muted visually/technically */
#featureVideo{
  object-fit:cover;
}

/* Lower-case presentation styling */
.change-screen h2,
.benefits-screen h2{
  text-transform:none!important;
  letter-spacing:0!important;
}

.stage-words{
  gap:clamp(18px,4vw,68px);
  margin-top:18px;
}
.stage-word{
  font-size:clamp(24px,3.4vw,52px)!important;
  text-transform:none!important;
  font-weight:700;
}

/* Keep the final learner-choice phrase central and prominent */
.applied-word.final{
  font-size:clamp(38px,5.2vw,76px);
  width:88vw;
}

/* Move Business Administrator, Level 3 lower on the benefits slide */
.benefits-screen .programme-name{
  margin-top:1.2em!important;
}

/* Also move it lower on the closing slide */
.close-screen .programme-name{
  margin-top:.8em!important;
}

@media(max-width:800px){
  .media-panel.journey-media-large{
    width:90vw;
    height:48vh;
  }
}

/* ==========================================================
   GLOBAL PRESENTATION CONTROLS + SETUP OPTIONS
   ========================================================== */

.presentation-options{
  display:grid;
  gap:12px;
  width:min(620px,90vw);
  margin:18px 0 24px;
  padding:18px;
  border:1px solid #d7d9e5;
  border-radius:18px;
  text-align:left;
}

.presentation-options legend{
  padding:0 8px;
  font-weight:700;
}

.option-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  min-height:58px;
  padding:12px 14px;
  border-radius:14px;
  background:#f7f8fb;
  font-weight:700;
}

.toggle-control{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.toggle-control input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.toggle-track{
  position:relative;
  width:54px;
  height:30px;
  border-radius:999px;
  background:#c8ccda;
  transition:background .2s ease;
}

.toggle-track::after{
  content:"";
  position:absolute;
  top:4px;
  left:4px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 8px rgba(38,46,99,.2);
  transition:transform .2s ease;
}

.toggle-control input:checked + .toggle-track{
  background:var(--navy);
}

.toggle-control input:checked + .toggle-track::after{
  transform:translateX(24px);
}

.toggle-control input:focus-visible + .toggle-track{
  outline:3px solid var(--pink);
  outline-offset:3px;
}

.toggle-state{
  min-width:30px;
  font-size:12px;
  letter-spacing:.05em;
}

.global-controls{
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  z-index:20000;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 28px rgba(38,46,99,.16);
  backdrop-filter:blur(10px);
}

.control-btn{
  min-width:88px;
  border:1px solid #d7d9e5;
  border-radius:999px;
  padding:10px 16px;
  background:#fff;
  color:var(--navy);
  font-weight:700;
  cursor:pointer;
}

.control-btn-primary{
  border-color:var(--navy);
  background:var(--navy);
  color:#fff;
}

.pause-btn[aria-pressed="true"]{
  border-color:var(--pink);
  background:#fff0f6;
  color:var(--navy);
}

.global-controls .global-music-control{
  position:static!important;
  right:auto!important;
  bottom:auto!important;
  z-index:auto!important;
  box-shadow:none!important;
  background:transparent!important;
  padding:6px 10px!important;
}

.global-controls .global-music-control input[type="range"]{
  width:120px;
}

/* Freeze CSS animations while the presentation is paused. */
body.presentation-paused *,
body.presentation-paused *::before,
body.presentation-paused *::after{
  animation-play-state:paused!important;
}

@media(max-width:800px){
  .global-controls{
    width:calc(100vw - 16px);
    justify-content:center;
    flex-wrap:wrap;
    border-radius:18px;
  }

  .control-btn{
    min-width:74px;
    padding:9px 12px;
  }

  .global-controls .global-music-control input[type="range"]{
    width:90px;
  }
}


/* ==========================================================
   VERSION 11 — OPENING BRAND MOTION
   ========================================================== */

.brand-motion{
  position:fixed;
  inset:0;
  z-index:25;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transition:opacity .45s ease;
}

.brand-motion-shape{
  position:absolute;
  display:block;
  will-change:transform;
  transition:transform 6s cubic-bezier(.45,0,.25,1);
}

.brand-yellow{
  width:clamp(90px,10vw,180px);
  left:8vw;
  top:39vh;
  transform:translate(0,0);
}

.brand-pink{
  width:clamp(180px,19vw,350px);
  left:10vw;
  top:6vh;
  transform:translate(0,0);
}

.brand-green{
  width:clamp(180px,19vw,350px);
  right:9vw;
  bottom:4vh;
  transform:translate(0,0);
}

body.brand-motion-opening .brand-motion,
body.brand-motion-who .brand-motion{
  opacity:1;
  visibility:visible;
}

.brand-motion.moving .brand-yellow{
  transform:translate(calc(100vw - 8vw - 50%),0);
}

.brand-motion.moving .brand-pink{
  transform:translate(0,calc(100vh - 6vh - 50%));
}

.brand-motion.moving .brand-green{
  transform:translate(0,calc(-100vh + 4vh + 50%));
}

body.presentation-paused .brand-motion-shape{
  transition-play-state:paused;
}

@media(prefers-reduced-motion:reduce){
  .brand-motion-shape{transition-duration:.01ms!important}
}


/* ==========================================================
   VERSION 12 — SIMPLIFIED OPENING / BRAND REVEAL
   ========================================================== */

/* The three colour PNGs now dissolve only; there is no movement. */
.brand-motion{
  opacity:0;
  visibility:hidden;
  transition:opacity 3s ease, visibility 0s linear 3s;
}

body.brand-motion-opening .brand-motion,
body.brand-motion-who .brand-motion{
  opacity:1;
  visibility:visible;
  transition:opacity .5s ease;
}

body.brand-colours-fading .brand-motion{
  opacity:0!important;
  visibility:visible;
  transition:opacity 3s ease!important;
}

.brand-motion-shape,
.brand-motion.moving .brand-yellow,
.brand-motion.moving .brand-pink,
.brand-motion.moving .brand-green{
  transform:none!important;
  transition:none!important;
}

/* Who / brand showcase */
.who-screen{
  overflow:hidden;
}

.brand-background{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  z-index:0;
  pointer-events:none;
  transition:opacity 4s ease;
}

.brand-showcase{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}

.word-stage{
  z-index:5;
}

.showcase-brand{
  position:absolute;
  top:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  transform:translate(-50%,-50%);
}

.showcase-brand img{
  display:block;
  max-width:100%;
  object-fit:contain;
}

/* First brand starts centred. Final size is about 20% smaller than opening logo. */
.showcase-momentous{
  left:50%;
  width:min(500px,50vw);
  transition:left 1.8s cubic-bezier(.2,.8,.2,1), transform 1.8s cubic-bezier(.2,.8,.2,1);
}

.who-screen.active .who-full-logo{
  width:100%;
  animation:whoLogoShrink 1.5s ease both;
}

@keyframes whoLogoShrink{
  from{transform:scale(1.25);opacity:.92}
  to{transform:scale(1);opacity:1}
}

.showcase-word{
  opacity:0;
  transform:translateY(14px);
  font-size:clamp(23px,2.5vw,40px);
  font-weight:900;
  letter-spacing:.08em;
  transition:opacity 1.1s ease, transform 1.1s ease;
}

.showcase-learning{color:var(--pink)}
.showcase-expertise{color:var(--navy)}
.showcase-growth{color:var(--navy)}

.showcase-skills,
.showcase-academy{
  width:min(330px,27vw);
  opacity:0;
  transition:opacity 1.5s ease, transform 1.5s ease;
}

.showcase-skills{
  left:50%;
}

.showcase-academy{
  left:82%;
}

.showcase-skills img,
.showcase-academy img{
  max-height:180px;
}

/* Once the word sequence finishes, the background fades in and Momentous moves left. */
.brand-showcase.brand-stage-1 + .word-stage{
  pointer-events:none;
}

.who-screen:has(.brand-showcase.brand-stage-1) .brand-background{
  opacity:1;
}

.brand-showcase.brand-stage-1 .showcase-momentous{
  left:18%;
}

.brand-showcase.brand-stage-1 .showcase-learning{
  opacity:1;
  transform:translateY(0);
}

.brand-showcase.brand-stage-2 .showcase-skills{
  opacity:1;
}

.brand-showcase.brand-stage-2 .showcase-expertise{
  opacity:1;
  transform:translateY(0);
}

.brand-showcase.brand-stage-3 .showcase-academy{
  opacity:1;
}

.brand-showcase.brand-stage-3 .showcase-growth{
  opacity:1;
  transform:translateY(0);
}

/* POSSIBILITY is now the same navy blue, size and timing as all other words. */
.floating-word.possibility-word{
  color:var(--navy)!important;
  font-size:clamp(22px,3vw,50px)!important;
}

.floating-word.possibility-word.animate{
  animation-duration:2.75s!important;
}

@media(max-width:800px){
  .showcase-momentous{width:min(420px,62vw)}
  .brand-showcase.brand-stage-1 .showcase-momentous{left:20%}
  .showcase-skills{left:52%;width:26vw}
  .showcase-academy{left:82%;width:26vw}
}


/* ==========================================================
   VERSION 13 — BACKGROUND CROSSFADE + REFINED BRAND SEQUENCE
   ========================================================== */

/* Retire the old three-colour image layer completely. */
.brand-motion{
  display:none!important;
}

/* A persistent background layer sits behind the opening and WHO screens. */
.sequence-background{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.sequence-bg{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.sequence-bg-opening{
  background-image:url('https://static.wixstatic.com/media/98d9ac_318aa52dec8c4a939b6b6e0aa75a43f7~mv2.png');
  opacity:1;
}

.sequence-bg-next{
  background-image:url('../https://static.wixstatic.com/media/98d9ac_7bd62faefd4e46c1b03d115023949683~mv2.png');
  opacity:0;
  transition:opacity 6s ease-in-out;
}

body.sequence-background-active .sequence-background{
  opacity:1;
  visibility:visible;
}

body.sequence-background-crossfade .sequence-bg-next{
  opacity:1;
}

/* These screens must be transparent so the background layer shows through. */
.opening-screen,
.who-screen{
  background:transparent!important;
}

/* The old image element is no longer used. */
.brand-background{
  display:none!important;
}

/* Smoother, less abrupt floating words. */
.floating-word{
  transform:translateY(22px) scale(.97);
  filter:blur(1px);
}

.floating-word.animate{
  animation:floatWordSmooth 2.55s cubic-bezier(.22,1,.36,1) both!important;
}

@keyframes floatWordSmooth{
  0%{
    opacity:0;
    transform:translateY(22px) scale(.97);
    filter:blur(1px);
  }
  22%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
  72%{
    opacity:1;
    transform:translateY(-2px) scale(1);
    filter:blur(0);
  }
  100%{
    opacity:0;
    transform:translateY(-20px) scale(1.015);
    filter:blur(.6px);
  }
}

/* POSSIBILITY now behaves exactly like the other words. */
.floating-word.possibility-word,
.floating-word.possibility-word.animate{
  color:var(--navy)!important;
  font-size:clamp(22px,3vw,50px)!important;
  animation-duration:2.55s!important;
}

/* Three-brand layout: same visual footprint and same word baseline. */
.showcase-brand{
  top:50%;
  width:min(330px,27vw)!important;
  min-width:250px;
  gap:16px;
}

.showcase-brand img{
  width:100%;
  height:145px;
  max-height:145px!important;
  object-fit:contain;
}

/* Momentous begins centred, then takes a little longer to glide left. */
.showcase-momentous{
  left:50%;
  width:min(330px,27vw)!important;
  transition:left 2.8s cubic-bezier(.22,.72,.18,1), transform 2.8s cubic-bezier(.22,.72,.18,1)!important;
}

.who-screen.active .who-full-logo{
  width:100%;
  height:145px;
  animation:whoLogoShrinkRefined 1.7s cubic-bezier(.22,1,.36,1) both!important;
}

@keyframes whoLogoShrinkRefined{
  from{transform:scale(1.20);opacity:.94}
  to{transform:scale(1);opacity:1}
}

.showcase-skills,
.showcase-academy{
  width:min(330px,27vw)!important;
}

.showcase-skills{
  left:50%;
}

.showcase-academy{
  left:82%;
}

/* Shared word baseline beneath every logo. */
.showcase-word{
  min-height:48px;
  margin-top:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  transform:translateY(24px);
  transition:opacity 1.65s ease, transform 1.65s cubic-bezier(.22,1,.36,1)!important;
}

.showcase-learning{
  color:var(--pink)!important;
}

.showcase-expertise{
  color:var(--navy)!important;
}

.showcase-growth{
  color:#2f6f61!important;
}

.brand-showcase.brand-stage-1 .showcase-momentous{
  left:18%;
}

/* LEARNING rises gently after the logo starts moving. */
.brand-showcase.brand-stage-1 .showcase-learning{
  opacity:1;
  transform:translateY(0);
  transition-delay:.55s!important;
}

.brand-showcase.brand-stage-2 .showcase-expertise,
.brand-showcase.brand-stage-3 .showcase-growth{
  opacity:1;
  transform:translateY(0);
}

/* Keep all three logos balanced vertically. */
.brand-showcase.brand-stage-2 .showcase-skills,
.brand-showcase.brand-stage-3 .showcase-academy{
  opacity:1;
}

@media(max-width:800px){
  .showcase-brand,
  .showcase-momentous,
  .showcase-skills,
  .showcase-academy{
    width:min(280px,29vw)!important;
    min-width:0;
  }

  .showcase-brand img,
  .who-screen.active .who-full-logo{
    height:110px;
    max-height:110px!important;
  }

  .brand-showcase.brand-stage-1 .showcase-momentous{left:18%}
  .showcase-skills{left:50%}
  .showcase-academy{left:82%}
}

/* ==========================================================
   OCT 2 REFINEMENTS — 12s background dissolve + staged logo move
   ========================================================== */

/* Background 1 now takes a full 12 seconds to dissolve in. */
.sequence-bg-next{
  transition:opacity 12s ease-in-out!important;
}

/*
   Keep the Momentous logo at its large central size for the entire
   floating-word sequence. It only shrinks once brand-stage-1 begins.
*/
.showcase-momentous{
  left:50%;
  width:min(620px,62vw)!important;
  transition:
    left 4s cubic-bezier(.22,.72,.18,1),
    width 4s cubic-bezier(.22,.72,.18,1),
    transform 4s cubic-bezier(.22,.72,.18,1)!important;
}

/* Remove the previous automatic shrink as soon as the WHO screen opens. */
.who-screen.active .who-full-logo{
  width:100%;
  height:auto;
  max-height:none!important;
  animation:none!important;
  transform:none!important;
  opacity:1!important;
}

/* When the words are complete, shrink and move left over 4 seconds. */
.brand-showcase.brand-stage-1 .showcase-momentous{
  left:18%;
  width:min(330px,27vw)!important;
}

/* LEARNING must wait until the logo has reached its final position. */
.showcase-learning{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity 2s ease,
    transform 2s cubic-bezier(.22,1,.36,1)!important;
}

.brand-showcase.brand-stage-1 .showcase-learning{
  opacity:1;
  transform:translateY(0);
  transition-delay:4s!important;
}

/* Final logo sizes remain visually balanced. */
.showcase-skills,
.showcase-academy{
  width:min(330px,27vw)!important;
}

/* GROWTH uses the dark Momentous green. */
.showcase-growth{
  color:#245f52!important;
}

@media(max-width:800px){
  .showcase-momentous{
    width:min(520px,76vw)!important;
  }
  .brand-showcase.brand-stage-1 .showcase-momentous,
  .showcase-skills,
  .showcase-academy{
    width:min(280px,29vw)!important;
  }
}


/* ==========================================================
   OCT 2 REFINEMENTS V3 — seamless opening transition
   ========================================================== */

/* APPRENTICESHIPS REIMAGINED fades cleanly before the word sequence. */
.opening-screen h2{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity 1.35s ease,
    transform 1.35s cubic-bezier(.22,1,.36,1),
    filter 1.35s ease;
  filter:blur(0);
}

.opening-screen.leaving h2{
  opacity:0;
  transform:translateY(-10px);
  filter:blur(1.5px);
}

/* Keep the opening logo absolutely stationary while the title fades. */
.opening-screen .full-logo-button{
  transform:none!important;
  transition:none!important;
}

.opening-screen .full-logo-button img{
  width:min(620px,62vw)!important;
  transform:none!important;
  opacity:1!important;
  transition:none!important;
}

/* Prevent the normal screenIn scale from causing a visible logo jump
   when the WHO screen replaces the opening screen. */
.who-screen.active{
  animation:none!important;
  opacity:1!important;
  transform:none!important;
}

/* WHO begins with exactly the same centred Momentous logo footprint
   as the opening screen. It remains full size until the words finish. */
.showcase-momentous{
  top:50%!important;
  left:50%;
  width:min(620px,62vw)!important;
}

.who-screen.active .who-full-logo{
  display:block;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  transform:none!important;
  animation:none!important;
  opacity:1!important;
}

/* CAREERS and WELLBEING are positioned by JS at centre-left/right;
   this keeps the overall word layer comfortably clear of the logo. */
.word-stage{
  overflow:hidden;
}


/* ==========================================================
   OCT 2 REFINEMENTS V4 — brand exit + question reveal + background2
   ========================================================== */

/* Third persistent background. It sits above background1 and fades in over 12s. */
.sequence-bg-final{
  background-image:url('../https://static.wixstatic.com/media/98d9ac_1da8d37b399d48f0a927340b9c03cb21~mv2.png');
  opacity:0;
  transition:opacity 12s ease-in-out;
}

body.sequence-background-to-final .sequence-bg-final{
  opacity:1;
}

/* Keep the persistent background visible through the question and learning-cycle
   screens so a 12-second dissolve is never interrupted by pressing Next. */
.question-screen,
.cycle-screen{
  background:transparent!important;
}

/* Fade the completed three-brand arrangement away before the question appears. */
.brand-showcase{
  transition:opacity 1.8s ease, filter 1.8s ease;
}

.brand-showcase.brand-exit{
  opacity:0;
  filter:blur(2px);
  pointer-events:none;
}

/* The new question screen begins clean and does not inherit the generic screenIn
   scale animation, which keeps the reveal smooth. */
.question-screen.active{
  animation:none!important;
  opacity:1!important;
  transform:none!important;
}

.question-screen .m-button{
  opacity:0;
  transform:translateY(-170px);
  margin-bottom:38px!important;
}

.question-screen .m-button img{
  width:min(270px,24vw)!important;
}

.question-screen h2{
  opacity:0;
  transform:translateY(130px);
  max-width:min(1120px,86vw)!important;
  font-size:clamp(34px,4.7vw,70px)!important;
  line-height:1.08!important;
  margin:0!important;
}

/* M drops from above while dissolving in. */
.question-screen.question-reveal .m-button{
  animation:questionMIn 2.35s cubic-bezier(.22,1,.36,1) forwards;
}

/* Question rises from below, slightly after the M begins. */
.question-screen.question-reveal h2{
  animation:questionTextIn 2.65s .55s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes questionMIn{
  0%{
    opacity:0;
    transform:translateY(-170px);
    filter:blur(3px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}

@keyframes questionTextIn{
  0%{
    opacity:0;
    transform:translateY(130px);
    filter:blur(2px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}

body.presentation-paused .brand-showcase,
body.presentation-paused .question-screen .m-button,
body.presentation-paused .question-screen h2,
body.presentation-paused .sequence-bg-final{
  animation-play-state:paused!important;
  transition-play-state:paused!important;
}

@media(prefers-reduced-motion:reduce){
  .brand-showcase.brand-exit{opacity:0;filter:none}
  .question-screen.question-reveal .m-button,
  .question-screen.question-reveal h2{
    animation-duration:.01ms!important;
    animation-delay:0ms!important;
  }
  .sequence-bg-final{transition-duration:.01ms!important}
}

/* ==========================================================
   OCT 2 REFINEMENTS V5 — aligned cycle + academy reveal
   ========================================================== */

/* Both background dissolves now run for 15 seconds. */
.sequence-bg-next,
.sequence-bg-final{
  transition:opacity 15s ease-in-out!important;
}

/* The original static Journey PNGs in the HTML are no longer used.
   The cycle is generated once by JavaScript, preventing the duplicated
   Personal Growth artwork visible in the previous version. */
#journeyLayers,
.journey-layers,
.journey-image{
  display:none!important;
}

/* Make the interactive cycle smaller so it sits cleanly inside the
   large circular artwork already present in background2.png. */
.cycle-screen{
  padding:0!important;
}

.cycle-layout{
  width:100%;
  height:100%;
  align-items:center!important;
  justify-content:center!important;
  padding-top:7vh;
}

.cycle-wrap{
  width:min(650px,64vh,68vw)!important;
  max-width:68vw!important;
  aspect-ratio:1;
  position:relative;
}

/* Academy circle: beneath the Journey artwork, fading in first. */
.cycle-academy-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:0;
  opacity:0;
  transform:scale(.985);
  transition:
    opacity 1.5s ease,
    transform 1.5s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}

.cycle-academy-layer.visible{
  opacity:1;
  transform:scale(1);
}

/* The Momentous M remains in the centre of the cycle at 50% opacity. */
.cycle-centre-m{
  position:absolute;
  left:50%;
  top:50%;
  width:18%;
  height:18%;
  object-fit:contain;
  transform:translate(-50%,-50%) scale(.94);
  opacity:0;
  z-index:20;
  pointer-events:none;
  transition:
    opacity 1.5s ease,
    transform 1.5s cubic-bezier(.22,1,.36,1);
}

.cycle-centre-m.visible{
  opacity:.5;
  transform:translate(-50%,-50%) scale(1);
}

/* All five generated journey pieces use the exact same canvas and centre.
   They start hidden and fade on one at a time via JS. */
.journey-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  transition:
    opacity 1.15s ease,
    filter .45s ease!important;
}

.journey-layer img,
.journey-1 img,
.journey-2 img,
.journey-3 img,
.journey-4 img,
.journey-5 img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  transform:none!important;
}

.journey-layer.intro-hidden{
  opacity:0!important;
  visibility:visible!important;
}

/* The title is moved upward to keep Journey 1 and 2 clear. */
#learningCycleTitle{
  top:3.5vh!important;
  font-size:clamp(26px,3vw,46px)!important;
  line-height:1.05!important;
}

/* Keep the hint clear of the presentation controls. */
.cycle-screen .click-hint{
  bottom:7.5vh;
}

body.presentation-paused .cycle-academy-layer,
body.presentation-paused .cycle-centre-m,
body.presentation-paused .journey-layer{
  animation-play-state:paused!important;
}

@media(max-width:800px){
  .cycle-layout{padding-top:9vh}
  .cycle-wrap{
    width:min(86vw,58vh)!important;
    max-width:86vw!important;
  }
  #learningCycleTitle{
    top:2.5vh!important;
    font-size:clamp(24px,6vw,38px)!important;
  }
}


/* ==========================================================
   OCT 2 REFINEMENTS V6 — larger cycle + continuous M move
   ========================================================== */

/* Remove the old instructional hint completely. */
.cycle-screen .click-hint{
  display:none!important;
}

/* Centre the cycle within the large circular artwork in background2. */
.cycle-layout{
  padding-top:0!important;
  align-items:center!important;
  justify-content:center!important;
}

.cycle-wrap{
  width:min(760px,72vw)!important;
  max-width:72vw!important;
  transform:translateY(1.5vh);
}

/* The exported Journey PNGs contain generous transparent canvas space.
   Scale their actual artwork up while preserving one common centre point. */
.journey-layer img,
.journey-1 img,
.journey-2 img,
.journey-3 img,
.journey-4 img,
.journey-5 img{
  transform:scale(1.34)!important;
  transform-origin:50% 50%!important;
}

/* Keep the M precisely in the visual centre of the enlarged journey circle. */
.cycle-centre-m{
  left:50%!important;
  top:50%!important;
  width:18%!important;
  height:18%!important;
  z-index:30!important;
}

.cycle-centre-m.visible{
  opacity:.5!important;
}

/* Academy badge is made larger and moved up/left so it clears the enlarged
   Journey artwork instead of overlapping it. */
.cycle-academy-layer{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  transform:translate(-18%,-16%) scale(1.22)!important;
  transform-origin:50% 50%!important;
  z-index:1!important;
}

.cycle-academy-layer.visible{
  opacity:1!important;
  transform:translate(-18%,-16%) scale(1.28)!important;
}

/* The temporary M clone flies from the question screen into the cycle. */
.flying-cycle-m{
  will-change:left,top,width,height,opacity;
}

/* Keep the title safely above the enlarged Journey 1 and Journey 2 artwork. */
#learningCycleTitle{
  top:1.6vh!important;
  font-size:clamp(26px,3vw,46px)!important;
}

@media(max-width:800px){
  .cycle-wrap{
    width:min(88vw,700px)!important;
    max-width:88vw!important;
    transform:translateY(2vh);
  }
  .journey-layer img,
  .journey-1 img,
  .journey-2 img,
  .journey-3 img,
  .journey-4 img,
  .journey-5 img{
    transform:scale(1.25)!important;
  }
  .cycle-academy-layer{
    transform:translate(-14%,-14%) scale(1.14)!important;
  }
  .cycle-academy-layer.visible{
    transform:translate(-14%,-14%) scale(1.18)!important;
  }
}

/* ==========================================================
   OCT 5 REFINEMENTS V7 — delayed journey reveal + alignment
   ========================================================== */

/* Keep every Journey graphic completely hidden until the travelling M has
   finished shrinking into the centre. JS removes this class sequentially. */
.journey-layer.intro-hidden{
  opacity:0!important;
  visibility:hidden!important;
}

/* The exported Journey artwork sits slightly low inside its transparent
   canvas. Lift the artwork itself while leaving the M at the true centre. */
.journey-layer img,
.journey-1 img,
.journey-2 img,
.journey-3 img,
.journey-4 img,
.journey-5 img{
  transform:translateY(-7%) scale(1.34)!important;
  transform-origin:50% 50%!important;
}

/* Keep the overall cycle centred; the Journey art above is what moves upward. */
.cycle-wrap{
  transform:translateY(0)!important;
}

/* Move the academy badge down a little from V6, while keeping it clear of
   the enlarged Journey artwork. */
.cycle-academy-layer{
  transform:translate(-18%,-10%) scale(1.22)!important;
}

.cycle-academy-layer.visible{
  opacity:1!important;
  transform:translate(-18%,-10%) scale(1.28)!important;
}

/* Drop the heading slightly lower than V6. */
#learningCycleTitle{
  top:3.2vh!important;
}

@media(max-width:800px){
  .journey-layer img,
  .journey-1 img,
  .journey-2 img,
  .journey-3 img,
  .journey-4 img,
  .journey-5 img{
    transform:translateY(-6%) scale(1.25)!important;
  }

  .cycle-academy-layer{
    transform:translate(-14%,-9%) scale(1.14)!important;
  }

  .cycle-academy-layer.visible{
    transform:translate(-14%,-9%) scale(1.18)!important;
  }

  #learningCycleTitle{
    top:3vh!important;
  }
}

/* ==========================================================
   OCT 5 REFINEMENTS V8 — PRE-LAB FOCUS STATE
   ========================================================== */

/* Journey pieces and academy fade smoothly out of normal state. */
.journey-layer.segment-fade-out{
  opacity:0!important;
  visibility:visible!important;
  pointer-events:none!important;
}

.cycle-academy-layer.segment-fade-out{
  opacity:0!important;
}

/* Journey 1 moves to the middle-left and grows by 20%.
   The image keeps the V7 internal alignment/scale; this transform moves
   the whole Journey 1 canvas without disturbing the other segments. */
.journey-layer.prelab-focus{
  opacity:1!important;
  visibility:visible!important;
  z-index:60!important;
  transform:translateX(-29vw) scale(1.20)!important;
  transition:
    transform 1.8s cubic-bezier(.22,1,.36,1),
    opacity 1.2s ease!important;
}

/* The video is 20% larger than the existing journey video treatment. */
.media-panel.prelab-media{
  width:min(1080px,66vw)!important;
  height:min(648px,66vh)!important;
  right:4vw!important;
  left:auto!important;
  transition:
    transform 1.35s cubic-bezier(.22,1,.36,1),
    opacity 1.1s ease!important;
}

/* Keep it mounted but fully outside the right edge until Journey 1 finishes. */
.media-panel.prelab-video-offscreen{
  transform:translateX(115%)!important;
  opacity:0!important;
}

.media-panel.prelab-video-onscreen{
  transform:translateX(0)!important;
  opacity:1!important;
}

@media(max-width:1000px){
  .journey-layer.prelab-focus{
    transform:translateX(-22vw) scale(1.14)!important;
  }

  .media-panel.prelab-media{
    width:min(60vw,760px)!important;
    height:min(54vh,520px)!important;
    right:2.5vw!important;
  }
}

@media(max-width:800px){
  .journey-layer.prelab-focus{
    transform:translate(-19vw,-10vh) scale(1.06)!important;
  }

  .media-panel.prelab-media{
    width:88vw!important;
    height:42vh!important;
    right:6vw!important;
    top:auto!important;
    bottom:9vh!important;
  }
}


/* ==========================================================
   V9 — COLOUR JOURNEY + SMOOTH RETURN TO NORMAL STATE
   ========================================================== */

/* After Pre-Lab, Journey 1 travels back across the screen before
   Journey 2-5 and the Academy badge are allowed to reappear. */
.journey-layer.prelab-returning{
  opacity:1!important;
  visibility:visible!important;
  z-index:60!important;
  transform:none!important;
  transition:
    transform 1.8s cubic-bezier(.22,1,.36,1),
    opacity 1.2s ease!important;
}

/* The hidden pieces remain mounted so their later fade-in is smooth. */
.journey-layer.segment-fade-out,
.cycle-academy-layer.segment-fade-out{
  transition:opacity 1.1s ease!important;
}

/* ==========================================================
   V10 — JOURNEY 1–4 FOCUS / RETURN STATES
   ========================================================== */

/* No completed Journey graphic is ever desaturated. */
.journey-layer,
.journey-layer.visited{
  filter:none!important;
}

/* Fade everything except the selected Journey graphic. */
.journey-layer.segment-fade-out,
.cycle-academy-layer.segment-fade-out,
.cycle-centre-m.segment-fade-out{
  opacity:0!important;
  visibility:visible!important;
  pointer-events:none!important;
  transition:opacity 1.1s ease!important;
}

/* Journey 1: middle-left, +20%. */
.journey-layer.segment-focus-left{
  opacity:1!important;
  visibility:visible!important;
  z-index:60!important;
  transform:translateX(-29vw) scale(1.20)!important;
  transition:
    transform 1.8s cubic-bezier(.22,1,.36,1),
    opacity 1.2s ease!important;
}

/* Journeys 2–4: middle-right, +20%. */
.journey-layer.segment-focus-right{
  opacity:1!important;
  visibility:visible!important;
  z-index:60!important;
  transform:translateX(29vw) scale(1.20)!important;
  transition:
    transform 1.8s cubic-bezier(.22,1,.36,1),
    opacity 1.2s ease!important;
}

/* Selected graphic travels back into its original normal-state position. */
.journey-layer.segment-returning{
  opacity:1!important;
  visibility:visible!important;
  z-index:60!important;
  transform:none!important;
  transition:
    transform 1.8s cubic-bezier(.22,1,.36,1),
    opacity 1.2s ease!important;
}

/* Focus video is 20% larger than the previous standard treatment. */
.media-panel.segment-media{
  width:min(1080px,66vw)!important;
  height:min(648px,66vh)!important;
  transition:
    transform 1.35s cubic-bezier(.22,1,.36,1),
    opacity 1.1s ease!important;
}

/* Journey 1 video ends on the right. */
.media-panel.segment-media-right{
  right:4vw!important;
  left:auto!important;
}

/* Journeys 2–4 videos end on the left, while still entering from the right edge. */
.media-panel.segment-media-left{
  left:4vw!important;
  right:auto!important;
}

/* Every focus video begins beyond the right side of the frame. */
.media-panel.segment-video-offscreen{
  transform:translateX(120vw)!important;
  opacity:0!important;
}

.media-panel.segment-video-onscreen{
  transform:translateX(0)!important;
  opacity:1!important;
}

@media(max-width:1000px){
  .journey-layer.segment-focus-left{
    transform:translateX(-22vw) scale(1.14)!important;
  }
  .journey-layer.segment-focus-right{
    transform:translateX(22vw) scale(1.14)!important;
  }
  .media-panel.segment-media{
    width:min(60vw,760px)!important;
    height:min(54vh,520px)!important;
  }
}

@media(max-width:800px){
  .journey-layer.segment-focus-left{
    transform:translate(-19vw,-10vh) scale(1.06)!important;
  }
  .journey-layer.segment-focus-right{
    transform:translate(19vw,-10vh) scale(1.06)!important;
  }
  .media-panel.segment-media{
    width:88vw!important;
    height:42vh!important;
    left:6vw!important;
    right:auto!important;
    top:auto!important;
    bottom:9vh!important;
  }
}

/* ==========================================================
   V11 — JOURNEY VIDEO DIRECTION + LEARNER CHOICE
   ========================================================== */

/* Journeys 2–4 now enter and leave from the LEFT edge. */
.media-panel.segment-media-left.segment-video-offscreen{
  transform:translateX(-120vw)!important;
  opacity:0!important;
}

/* Journey 1 keeps entering/leaving from the RIGHT edge. */
.media-panel.segment-media-right.segment-video-offscreen{
  transform:translateX(120vw)!important;
  opacity:0!important;
}

.media-panel.segment-video-onscreen{
  transform:translateX(0)!important;
  opacity:1!important;
}

/* Journey 2 and Journey 3 sit 20% nearer their video than the normal
   Journey 2–4 right-hand focus position. */
.journey-layer.segment-focus-right.segment-focus-nearer{
  transform:translateX(23.2vw) scale(1.20)!important;
}

/* Applied Learning word sequence. */
.applied-words{
  z-index:70!important;
}

.applied-word{
  font-size:clamp(26px,3.25vw,56px)!important;
  font-weight:800!important;
  letter-spacing:.01em;
}

.applied-word.show{
  animation:appliedInOut 2.15s cubic-bezier(.22,1,.36,1) both!important;
}

/* Full Learner Choice composition. */
.learner-choice-layout{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.15s ease;
  pointer-events:none;
}

.learner-choice-layout.visible{
  opacity:1;
}

.learner-choice-videos{
  position:absolute;
  left:50%;
  top:11.5vh;
  transform:translateX(-50%);
  width:min(1400px,94vw);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,30px);
  align-items:center;
}

.learner-choice-video-slot{
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  box-shadow:0 12px 34px rgba(38,46,99,.12);
  opacity:0;
  transform:translateY(24px) scale(.97);
  transition:
    opacity 1s ease,
    transform 1.15s cubic-bezier(.22,1,.36,1);
}

.learner-choice-video-slot.visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

.learner-choice-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#111;
}

.learner-choice-title{
  position:absolute;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
  width:94vw;
  text-align:center;
  color:var(--navy);
  font-size:clamp(38px,5.1vw,78px);
  line-height:1.02;
  font-weight:900;
  letter-spacing:.01em;
  white-space:nowrap;
}

.learner-choice-pink{
  color:var(--pink);
}

/* Journey 5 fades in beneath the Learner Choice heading. */
.learner-choice-journey5{
  position:absolute;
  left:50%;
  top:55.5%;
  width:min(585px,45vw);
  height:min(585px,45vw);
  object-fit:contain;
  transform:translate(-50%,12px) scale(.95);
  opacity:0;
  animation:learnerChoiceJourneyIn 1.5s .35s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes learnerChoiceJourneyIn{
  to{
    opacity:1;
    transform:translate(-50%,0) scale(1);
  }
}

/* Everything on the Learner Choice screen dissolves before normal state returns. */
.applied-words.learner-choice-exit{
  opacity:0!important;
  transition:opacity .9s ease!important;
}

/* Normal state itself fades back in as a complete composition. */
.cycle-wrap.normal-state-return{
  opacity:0!important;
  transition:opacity 1.05s ease!important;
}

.cycle-wrap.normal-state-return.normal-state-return-visible{
  opacity:1!important;
}

@media(max-width:1000px){
  .journey-layer.segment-focus-right.segment-focus-nearer{
    transform:translateX(17.6vw) scale(1.14)!important;
  }

  .learner-choice-videos{
    top:12.5vh;
    width:94vw;
    gap:12px;
  }

  .learner-choice-title{
    font-size:clamp(30px,5vw,58px);
  }

  .learner-choice-journey5{
    top:56.5%;
    width:min(510px,51vw);
    height:min(510px,51vw);
  }
}

@media(max-width:800px){
  .journey-layer.segment-focus-right.segment-focus-nearer{
    transform:translate(15vw,-10vh) scale(1.06)!important;
  }

  .learner-choice-videos{
    top:11vh;
    width:96vw;
    gap:8px;
  }

  .learner-choice-video-slot{
    border-radius:10px;
  }

  .learner-choice-title{
    top:45%;
    white-space:normal;
    font-size:clamp(28px,7vw,46px);
  }

  .learner-choice-journey5{
    top:57%;
    width:min(480px,72vw);
    height:min(480px,72vw);
  }
}

/* ==========================================================
   V13 — LEARNER CHOICE JOURNEY 5 POSITION / SCALE FIX
   Final override: centres the visible Journey 5 segment beneath
   WELCOME TO LEARNER CHOICE and makes it substantially larger.
   ========================================================== */

.learner-choice-journey5{
  left:50%!important;
  top:50%!important;
  width:min(880px,68vw)!important;
  height:min(880px,68vw)!important;
  object-fit:contain!important;
  transform:translate(-32%,-41%) scale(.96)!important;
  transform-origin:50% 50%!important;
  opacity:0;
  animation:learnerChoiceJourneyInV13 1.5s .35s cubic-bezier(.22,1,.36,1) forwards!important;
}

@keyframes learnerChoiceJourneyInV13{
  from{
    opacity:0;
    transform:translate(-32%,-37%) scale(.92);
  }
  to{
    opacity:1;
    transform:translate(-32%,-41%) scale(1);
  }
}

@media(max-width:1000px){
  .learner-choice-journey5{
    top:50%!important;
    width:min(760px,76vw)!important;
    height:min(760px,76vw)!important;
    transform:translate(-32%,-40%) scale(.96)!important;
  }

  @keyframes learnerChoiceJourneyInV13{
    from{
      opacity:0;
      transform:translate(-32%,-36%) scale(.92);
    }
    to{
      opacity:1;
      transform:translate(-32%,-40%) scale(1);
    }
  }
}

@media(max-width:800px){
  .learner-choice-journey5{
    top:51%!important;
    width:min(680px,92vw)!important;
    height:min(680px,92vw)!important;
    transform:translate(-32%,-37%) scale(.96)!important;
  }

  @keyframes learnerChoiceJourneyInV13{
    from{
      opacity:0;
      transform:translate(-32%,-33%) scale(.92);
    }
    to{
      opacity:1;
      transform:translate(-32%,-37%) scale(1);
    }
  }
}

/* ==========================================================
   V14 — WHAT'S IN IT FOR ME? + VB4 BENEFITS SEQUENCE
   ========================================================== */

/* Fourth persistent presentation background: background3.png. */
.sequence-bg-change{
  background-image:url('../https://static.wixstatic.com/media/98d9ac_074127e808354fd8ae9fad1479006c4a~mv2.png');
  opacity:0;
  transition:opacity 15s ease-in-out!important;
}

body.sequence-background-to-change .sequence-bg-change{
  opacity:1;
}

/* Keep the background dissolve alive across both new sections. */
.change-screen,
.benefits-screen{
  background:transparent!important;
}

/* The new change screen is text-led; retire the old three-column words. */
.change-screen{
  padding:5vw 4vw 8vw;
  justify-content:center;
}

.change-screen h2{
  position:absolute;
  top:16%;
  left:50%;
  transform:translateX(-50%);
  width:min(1200px,90vw);
  margin:0;
  color:var(--navy);
  font-size:clamp(42px,5.3vw,78px)!important;
  line-height:1.04;
  font-weight:800;
  text-align:center;
  z-index:4;
}

.change-stage-text{
  position:absolute;
  left:50%;
  top:52%;
  transform:translate(-50%,-50%) translateY(26px) scale(.96);
  width:min(1200px,90vw);
  text-align:center;
  color:var(--navy);
  font-size:clamp(42px,5.8vw,88px);
  line-height:1.04;
  font-weight:900;
  letter-spacing:.005em;
  opacity:0;
  filter:blur(10px);
  transition:
    opacity 1.05s ease,
    transform 1.25s cubic-bezier(.22,1,.36,1),
    filter 1.05s ease;
  z-index:4;
}

.change-stage-text.visible{
  opacity:1;
  filter:blur(0);
  transform:translate(-50%,-50%) translateY(0) scale(1);
}

.change-stage-text.blur-away{
  opacity:0;
  filter:blur(13px);
  transform:translate(-50%,-50%) translateY(-12px) scale(1.025);
}

/* New benefits page. */
.benefits-screen{
  padding:0!important;
  overflow:hidden;
  justify-content:flex-start;
}

.benefits-m-wrap{
  position:absolute;
  left:50%;
  top:-18%;
  transform:translateX(-50%);
  width:min(145px,11vw);
  opacity:0;
  z-index:6;
  transition:
    top 1.8s cubic-bezier(.22,1,.36,1),
    opacity 1.25s ease;
}

.benefits-m-logo{
  display:block;
  width:100%;
  height:auto;
}

.benefits-screen.benefits-entered .benefits-m-wrap{
  top:4.5%;
  opacity:1;
}

.benefits-content{
  position:absolute;
  left:0;
  right:0;
  top:17%;
  bottom:8%;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  align-items:center;
  gap:clamp(28px,5vw,88px);
  padding:0 clamp(32px,6vw,100px);
  z-index:5;
}

.benefits-video-wrap{
  width:100%;
  aspect-ratio:16/9;
  border-radius:24px;
  overflow:hidden;
  background:#111;
  box-shadow:0 18px 55px rgba(38,46,99,.16);
  opacity:0;
  transform:translateX(-14vw) scale(.97);
  transition:
    opacity 1.15s ease .35s,
    transform 1.65s cubic-bezier(.22,1,.36,1) .25s;
}

.benefits-screen.benefits-entered .benefits-video-wrap{
  opacity:1;
  transform:translateX(0) scale(1);
}

.benefits-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#111;
}

.benefits-words{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(10px,1.3vh,18px);
  text-align:left;
}

.benefits-word{
  color:var(--navy);
  font-size:clamp(22px,2.35vw,42px);
  line-height:1.08;
  font-weight:800;
  opacity:0;
  filter:blur(7px);
  transform:translateY(20px);
  transition:
    opacity .9s ease,
    transform 1.05s cubic-bezier(.22,1,.36,1),
    filter .9s ease;
}

.benefits-word.visible{
  opacity:1;
  filter:blur(0);
  transform:translateY(0);
}

/* Pause the new background and transitions with the global pause control. */
body.presentation-paused .sequence-bg-change,
body.presentation-paused .change-stage-text,
body.presentation-paused .benefits-m-wrap,
body.presentation-paused .benefits-video-wrap,
body.presentation-paused .benefits-word{
  animation-play-state:paused!important;
  transition-play-state:paused!important;
}

@media(max-width:900px){
  .change-screen h2{top:14%}
  .change-stage-text{top:49%}

  .benefits-m-wrap{
    width:min(125px,18vw);
  }

  .benefits-content{
    top:16%;
    bottom:10%;
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    gap:22px;
    padding:0 6vw;
  }

  .benefits-video-wrap{
    width:min(720px,88vw);
    justify-self:center;
    max-height:38vh;
  }

  .benefits-words{
    width:min(720px,88vw);
    justify-self:center;
    align-items:center;
    text-align:center;
    gap:8px;
  }

  .benefits-word{
    font-size:clamp(19px,4vw,30px);
  }
}

@media(prefers-reduced-motion:reduce){
  .sequence-bg-change,
  .change-stage-text,
  .benefits-m-wrap,
  .benefits-video-wrap,
  .benefits-word{
    transition-duration:.01ms!important;
    transition-delay:0ms!important;
  }
}
\n\n/* ==========================================================\n   V14 — BENEFITS, OUTCOMES & FINAL BACKGROUND\n   ========================================================== */\n\n/* Fourth persistent background: dissolve over 6 seconds on the closing page. */\n.sequence-bg-close{\n  background-image:url('https://static.wixstatic.com/media/98d9ac_632646dd5e1843019d009d1f30201d66~mv2.png');\n  opacity:0;\n  transition:opacity 6s ease-in-out;\n}\n\nbody.sequence-background-to-close .sequence-bg-close{\n  opacity:1;\n}\n\n/* Keep these later screens transparent so the persistent background remains visible. */\n.benefits-screen,\n.outcomes-screen,\n.close-screen{\n  background:transparent!important;\n}\n\n/* WHAT'S IN IT FOR ME? remains visible above VB4 and the staged words. */\n.benefits-question{\n  position:absolute;\n  top:15.5%;\n  left:50%;\n  transform:translateX(-50%);\n  width:min(1100px,88vw);\n  margin:0;\n  text-align:center;\n  font-size:clamp(34px,4.3vw,66px)!important;\n  line-height:1.05;\n  color:var(--navy);\n  z-index:15;\n  opacity:0;\n  filter:blur(4px);\n  transition:opacity 1.4s ease, filter 1.4s ease, transform 1.4s cubic-bezier(.22,1,.36,1);\n}\n\n.benefits-question span{\n  color:var(--pink);\n}\n\n.benefits-screen.benefits-entered .benefits-question{\n  opacity:1;\n  filter:blur(0);\n}\n\n/* Move the existing content down a little to make room for the persistent question. */\n.benefits-content{\n  top:30%!important;\n  bottom:9%!important;\n}\n\n.benefits-m-wrap{\n  top:2.4%!important;\n}\n\n/* Outcomes page */\n.outcomes-screen{\n  justify-content:flex-start;\n  padding:0 5vw 8vh;\n  text-align:center;\n}\n\n.outcomes-m-logo{\n  position:absolute;\n  top:2.6%;\n  left:50%;\n  width:min(150px,12vw);\n  transform:translateX(-50%);\n  object-fit:contain;\n}\n\n.outcomes-title{\n  position:absolute;\n  top:17%;\n  left:50%;\n  transform:translateX(-50%);\n  width:92vw;\n  margin:0;\n  color:var(--navy);\n  font-size:clamp(34px,4.5vw,68px);\n  line-height:1.08;\n}\n\n.outcomes-grid{\n  position:absolute;\n  top:31%;\n  left:50%;\n  transform:translateX(-50%);\n  width:min(1180px,88vw);\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  grid-template-rows:repeat(2,minmax(126px,1fr));\n  gap:22px;\n}\n\n.outcome-box{\n  min-height:145px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  padding:22px 28px;\n  border:1px solid rgba(38,46,99,.08);\n  border-radius:24px;\n  background:rgba(249,235,79,.30);\n  box-shadow:0 14px 34px rgba(38,46,99,.08);\n  color:var(--navy);\n  font-size:clamp(19px,1.75vw,29px);\n  line-height:1.15;\n  font-weight:800;\n  opacity:0;\n  filter:blur(13px);\n  transform:translateY(14px) scale(.985);\n  transition:\n    opacity 1.05s ease,\n    filter 1.05s ease,\n    transform 1.05s cubic-bezier(.22,1,.36,1);\n}\n\n.outcome-box.visible{\n  opacity:1;\n  filter:blur(0);\n  transform:translateY(0) scale(1);\n}\n\n.outcomes-statement{\n  position:absolute;\n  left:50%;\n  bottom:8.5%;\n  transform:translate(-50%,22px);\n  width:min(1120px,88vw);\n  opacity:0;\n  filter:blur(9px);\n  transition:opacity 1.3s ease, filter 1.3s ease, transform 1.3s cubic-bezier(.22,1,.36,1);\n  color:var(--navy);\n  pointer-events:none;\n}\n\n.outcomes-statement.visible{\n  opacity:1;\n  filter:blur(0);\n  transform:translate(-50%,0);\n}\n\n.outcomes-statement p{\n  margin:.18em 0;\n  font-size:clamp(20px,2vw,31px);\n  line-height:1.25;\n  font-weight:600;\n}\n\n.outcomes-statement p:last-child{\n  font-weight:800;\n}\n\n/* Closing page retains all existing closing content except programme name. */\n.close-screen .programme-name{\n  display:none!important;\n}\n\nbody.presentation-paused .sequence-bg-close,\nbody.presentation-paused .benefits-question,\nbody.presentation-paused .outcome-box,\nbody.presentation-paused .outcomes-statement{\n  animation-play-state:paused!important;\n}\n\n@media(max-width:900px){\n  .benefits-question{top:13%}\n  .benefits-content{top:27%!important}\n\n  .outcomes-m-logo{width:min(120px,18vw)}\n  .outcomes-title{top:15%;font-size:clamp(28px,6vw,48px)}\n  .outcomes-grid{\n    top:27%;\n    grid-template-columns:repeat(2,1fr);\n    grid-template-rows:repeat(3,minmax(92px,1fr));\n    gap:12px;\n  }\n  .outcome-box{min-height:100px;padding:15px;font-size:clamp(16px,3.3vw,23px)}\n  .outcomes-statement{bottom:8%;}\n  .outcomes-statement p{font-size:clamp(16px,3.4vw,22px)}\n}\n
/* ==========================================================
   V15 — LOCKED QUESTION / OUTCOMES CONTINUITY
   ========================================================== */

/* Keep "What's in it for me?" in exactly the same place on both screens. */
.change-screen .change-question,
.benefits-screen .benefits-question{
  position:absolute!important;
  top:15.5%!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:min(1100px,88vw)!important;
  margin:0!important;
  text-align:center!important;
  font-size:clamp(34px,4.3vw,66px)!important;
  line-height:1.05!important;
  font-weight:800!important;
  color:var(--navy)!important;
  z-index:15!important;
}

.change-screen .change-question span,
.benefits-screen .benefits-question span{
  color:var(--pink)!important;
}

/* Benefits title remains fully visible until the transition to outcomes. */
.benefits-screen .benefits-question{
  opacity:1;
  filter:blur(0);
  transition:
    opacity .9s ease,
    filter .9s ease,
    transform .9s cubic-bezier(.22,1,.36,1)!important;
}

/* Blur "What's in it for me?" away before revealing the programme title. */
.benefits-screen.benefits-leaving .benefits-question{
  opacity:0!important;
  filter:blur(14px)!important;
  transform:translateX(-50%) scale(1.02)!important;
}

/* Keep the M in the exact same position and at the exact same size on benefits and outcomes. */
.benefits-m-wrap,
.outcomes-m-wrap{
  position:absolute!important;
  left:50%!important;
  top:2.4%!important;
  transform:translateX(-50%)!important;
  width:min(145px,11vw)!important;
  opacity:1!important;
  z-index:20!important;
  transition:none!important;
}

.benefits-m-logo{
  display:block;
  width:100%;
  height:auto;
}

/* The background3 state remains visible on the outcomes page too. */
.outcomes-screen{
  background:transparent!important;
}

/* Programme title occupies the same title position, but is around 20% smaller. */
.outcomes-title{
  position:absolute!important;
  top:15.5%!important;
  left:50%!important;
  transform:translateX(-50%) scale(.985)!important;
  width:min(1100px,88vw)!important;
  margin:0!important;
  text-align:center!important;
  color:var(--navy)!important;
  font-size:clamp(28px,3.45vw,53px)!important;
  line-height:1.05!important;
  font-weight:800!important;
  z-index:15!important;
  opacity:0;
  filter:blur(14px);
  transition:
    opacity 1.1s ease,
    filter 1.1s ease,
    transform 1.1s cubic-bezier(.22,1,.36,1)!important;
}

.outcomes-screen.outcomes-entered .outcomes-title{
  opacity:1;
  filter:blur(0);
  transform:translateX(-50%) scale(1)!important;
}

/* Six equal-size faded-yellow boxes: 3 across x 2 rows. */
.outcomes-grid{
  top:30.5%!important;
  width:min(1180px,88vw)!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,145px)!important;
  gap:22px!important;
}

.outcome-box{
  height:145px!important;
  min-height:145px!important;
  background:rgba(249,235,79,.50)!important;
  border:1px solid rgba(38,46,99,.08)!important;
  border-radius:24px!important;
  box-shadow:0 14px 34px rgba(38,46,99,.08)!important;
}

/* Keep the final statement directly beneath the box grid. */
.outcomes-statement{
  bottom:7.5%!important;
}

/* Final close still fades to background4 over six seconds. */
.sequence-bg-close{
  background-image:url('https://static.wixstatic.com/media/98d9ac_632646dd5e1843019d009d1f30201d66~mv2.png')!important;
  transition:opacity 6s ease-in-out!important;
}

/* Pause support for the replacement title transition. */
body.presentation-paused .benefits-question,
body.presentation-paused .outcomes-title{
  animation-play-state:paused!important;
}

@media(max-width:900px){
  .change-screen .change-question,
  .benefits-screen .benefits-question{
    top:13%!important;
    font-size:clamp(30px,6vw,48px)!important;
  }

  .benefits-m-wrap,
  .outcomes-m-wrap{
    width:min(125px,18vw)!important;
  }

  .outcomes-title{
    top:13%!important;
    font-size:clamp(24px,4.8vw,38px)!important;
  }

  .outcomes-grid{
    top:25%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(3,100px)!important;
    gap:12px!important;
  }

  .outcome-box{
    height:100px!important;
    min-height:100px!important;
  }
}
\n\n/* ==========================================================\n   V16 — OUTCOMES LAYOUT + FINAL BACKGROUND CORRECTION\n   ========================================================== */\n\n/* background4.png is strictly the final-page overlay. It stays invisible\n   throughout Change, Benefits and Outcomes and only fades in when the\n   sequence-background-to-close body class is added. */\n.sequence-bg-close{\n  background-image:url('https://static.wixstatic.com/media/98d9ac_632646dd5e1843019d009d1f30201d66~mv2.png')!important;\n  opacity:0!important;\n  transition:opacity 6s ease-in-out!important;\n}\n\nbody.sequence-background-to-close .sequence-bg-close{\n  opacity:1!important;\n}\n\nbody:not(.sequence-background-to-close) .sequence-bg-close{\n  opacity:0!important;\n}\n\n/* Outcomes stays on background3.png until the final Next press. */\n.outcomes-screen{\n  background:transparent!important;\n}\n\n/* Six genuinely identical boxes: 3 across and 2 down. */\n.outcomes-grid{\n  position:absolute!important;\n  top:30.5%!important;\n  left:50%!important;\n  transform:translateX(-50%)!important;\n  width:min(1200px,90vw)!important;\n  display:grid!important;\n  grid-template-columns:repeat(3,minmax(0,1fr))!important;\n  grid-template-rows:repeat(2,150px)!important;\n  grid-auto-rows:150px!important;\n  gap:24px!important;\n  align-items:stretch!important;\n}\n\n.outcome-box{\n  width:100%!important;\n  height:150px!important;\n  min-height:150px!important;\n  max-height:150px!important;\n  margin:0!important;\n  padding:18px 24px!important;\n  display:flex!important;\n  align-items:center!important;\n  justify-content:center!important;\n  text-align:center!important;\n  box-sizing:border-box!important;\n\n  /* faded yellow fill with a faint Momentous pink edge */\n  background:rgba(249,235,79,.50)!important;\n  border:2px solid rgba(242,85,140,.30)!important;\n  border-radius:20px!important;\n  box-shadow:0 10px 28px rgba(38,46,99,.07)!important;\n\n  color:var(--navy)!important;\n  font-size:clamp(16px,1.45vw,24px)!important;\n  line-height:1.16!important;\n  font-weight:800!important;\n  overflow-wrap:anywhere!important;\n}\n\n/* The closing statement is absolutely hidden until the sixth box has\n   appeared AND the user presses Next once more. */\n.outcomes-statement{\n  left:50%!important;\n  bottom:6.2%!important;\n  width:min(1180px,90vw)!important;\n  opacity:0!important;\n  visibility:hidden!important;\n  filter:blur(10px)!important;\n  transform:translate(-50%,18px)!important;\n  transition:\n    opacity 1.25s ease,\n    filter 1.25s ease,\n    transform 1.25s cubic-bezier(.22,1,.36,1),\n    visibility 0s linear 1.25s!important;\n}\n\n.outcomes-statement.visible{\n  opacity:1!important;\n  visibility:visible!important;\n  filter:blur(0)!important;\n  transform:translate(-50%,0)!important;\n  transition-delay:0s!important;\n}\n\n.outcomes-statement p{\n  margin:.15em 0!important;\n  font-size:clamp(18px,1.65vw,27px)!important;\n  line-height:1.22!important;\n}\n\n@media(max-width:900px){\n  .outcomes-grid{\n    top:26%!important;\n    width:min(92vw,720px)!important;\n    grid-template-columns:repeat(2,minmax(0,1fr))!important;\n    grid-template-rows:repeat(3,105px)!important;\n    grid-auto-rows:105px!important;\n    gap:12px!important;\n  }\n\n  .outcome-box{\n    height:105px!important;\n    min-height:105px!important;\n    max-height:105px!important;\n    padding:12px 14px!important;\n    font-size:clamp(14px,3vw,20px)!important;\n  }\n\n  .outcomes-statement{\n    bottom:6.5%!important;\n  }\n}\n

/* ==========================================================
   V17 — RESTORE V14 BACKGROUND SEQUENCE EXACTLY
   ========================================================== */

/* Authoritative background stack:
   background.png  -> opening
   background1.png -> word/logo sequence
   background2.png -> question + journey cycle
   background3.png -> What's in it for me + benefits + outcomes
   background4.png -> final closing page ONLY
*/
.sequence-background{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

.sequence-bg{
  position:absolute!important;
  inset:0!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}

.sequence-bg-opening{
  background-image:url('https://static.wixstatic.com/media/98d9ac_318aa52dec8c4a939b6b6e0aa75a43f7~mv2.png')!important;
  opacity:1!important;
}

.sequence-bg-next{
  background-image:url('../https://static.wixstatic.com/media/98d9ac_7bd62faefd4e46c1b03d115023949683~mv2.png')!important;
  opacity:0!important;
  transition:opacity 12s ease-in-out!important;
}
body.sequence-background-crossfade .sequence-bg-next{opacity:1!important;}

.sequence-bg-final{
  background-image:url('../https://static.wixstatic.com/media/98d9ac_1da8d37b399d48f0a927340b9c03cb21~mv2.png')!important;
  opacity:0!important;
  transition:opacity 15s ease-in-out!important;
}
body.sequence-background-to-final .sequence-bg-final{opacity:1!important;}

.sequence-bg-change{
  background-image:url('../https://static.wixstatic.com/media/98d9ac_074127e808354fd8ae9fad1479006c4a~mv2.png')!important;
  opacity:0!important;
  transition:opacity 15s ease-in-out!important;
}
body.sequence-background-to-change .sequence-bg-change{opacity:1!important;}

.sequence-bg-close{
  background-image:url('https://static.wixstatic.com/media/98d9ac_632646dd5e1843019d009d1f30201d66~mv2.png')!important;
  opacity:0!important;
  visibility:hidden!important;
  transition:opacity 6s ease-in-out, visibility 0s linear 6s!important;
}
body.sequence-background-to-close .sequence-bg-close{
  opacity:1!important;
  visibility:visible!important;
  transition:opacity 6s ease-in-out, visibility 0s linear 0s!important;
}
body:not(.sequence-background-to-close) .sequence-bg-close{
  opacity:0!important;
  visibility:hidden!important;
}

/* Every presentation screen using the persistent background must stay transparent. */
.opening-screen,
.who-screen,
.question-screen,
.cycle-screen,
.change-screen,
.benefits-screen,
.outcomes-screen,
.close-screen{
  background:transparent!important;
}

/* ==========================================================
   V18 — CENTRED APPLIED WORDS + OUTCOMES GRID REFINEMENT
   ========================================================== */

/* Every Applied Learning phrase now animates through the exact centre
   of the screen, one sequence using the same visual anchor. */
.applied-words .applied-word:not(.final){
  left:50%!important;
  top:50%!important;
  width:min(1050px,88vw)!important;
  text-align:center!important;
  transform:translate(-50%,-50%) scale(.94)!important;
  font-size:clamp(30px,4.1vw,64px)!important;
  line-height:1.08!important;
}

.applied-words .applied-word:not(.final).show{
  animation:appliedCentreInOut 2.1s cubic-bezier(.22,1,.36,1) both!important;
}

@keyframes appliedCentreInOut{
  0%{
    opacity:0;
    filter:blur(8px);
    transform:translate(-50%,-50%) scale(.92);
  }
  22%{
    opacity:1;
    filter:blur(0);
    transform:translate(-50%,-50%) scale(1);
  }
  72%{
    opacity:1;
    filter:blur(0);
    transform:translate(-50%,-50%) scale(1);
  }
  100%{
    opacity:0;
    filter:blur(6px);
    transform:translate(-50%,-50%) scale(1.04);
  }
}

/* Outcomes: compact, even 3 x 2 grid with larger text. */
.outcomes-grid{
  position:absolute!important;
  top:31.5%!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:min(980px,78vw)!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,118px)!important;
  grid-auto-rows:118px!important;
  gap:18px 20px!important;
  align-items:stretch!important;
  justify-items:stretch!important;
}

.outcome-box{
  width:100%!important;
  height:118px!important;
  min-height:118px!important;
  max-height:118px!important;
  margin:0!important;
  padding:15px 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  box-sizing:border-box!important;
  background:rgba(249,235,79,.50)!important;
  border:2px solid rgba(242,85,140,.30)!important;
  border-radius:18px!important;
  box-shadow:0 9px 22px rgba(38,46,99,.06)!important;
  color:var(--navy)!important;
  font-size:clamp(19px,1.65vw,28px)!important;
  line-height:1.12!important;
  font-weight:800!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}

/* Statement remains completely hidden until JS adds .visible after box 6
   and the user presses Next once more. When shown, it is larger and bottom-centred. */
.outcomes-statement{
  position:absolute!important;
  left:50%!important;
  bottom:7%!important;
  width:min(1180px,90vw)!important;
  text-align:center!important;
  opacity:0!important;
  visibility:hidden!important;
  filter:blur(10px)!important;
  transform:translate(-50%,18px)!important;
  pointer-events:none!important;
}

.outcomes-statement.visible{
  opacity:1!important;
  visibility:visible!important;
  filter:blur(0)!important;
  transform:translate(-50%,0)!important;
}

.outcomes-statement p{
  margin:.14em 0!important;
  font-size:clamp(24px,2.15vw,35px)!important;
  line-height:1.18!important;
  font-weight:650!important;
}

.outcomes-statement p:last-child{
  font-weight:800!important;
}

@media(max-width:900px){
  .outcomes-grid{
    top:28%!important;
    width:min(88vw,760px)!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(3,92px)!important;
    grid-auto-rows:92px!important;
    gap:12px!important;
  }

  .outcome-box{
    height:92px!important;
    min-height:92px!important;
    max-height:92px!important;
    padding:10px 12px!important;
    font-size:clamp(16px,3.3vw,22px)!important;
  }

  .outcomes-statement{
    bottom:6%!important;
  }

  .outcomes-statement p{
    font-size:clamp(18px,3.6vw,25px)!important;
  }
}

/* ==========================================================
   V19 — OUTCOME BOX REVEAL REPAIR + STATEMENT POSITION
   ========================================================== */

/* Lock the outcomes area to a true 3 x 2 layout. */
.outcomes-grid{
  position:absolute!important;
  top:31%!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:min(990px,80vw)!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,112px)!important;
  grid-auto-rows:112px!important;
  grid-auto-flow:row!important;
  gap:18px 20px!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  overflow:visible!important;
}

/* Every box is full-size from the first animation frame.
   Only opacity / blur / a tiny vertical movement animate. */
.outcomes-grid .outcome-box,
.outcomes-grid .outcome-box.visible{
  width:100%!important;
  height:112px!important;
  min-width:0!important;
  min-height:112px!important;
  max-height:112px!important;
  margin:0!important;
  padding:14px 18px!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex:none!important;
  align-self:stretch!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  overflow:visible!important;

  background:rgba(249,235,79,.50)!important;
  border:2px solid rgba(242,85,140,.32)!important;
  border-radius:18px!important;
  box-shadow:0 9px 22px rgba(38,46,99,.06)!important;

  color:var(--navy)!important;
  font-size:clamp(20px,1.75vw,29px)!important;
  line-height:1.1!important;
  font-weight:800!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}

.outcomes-grid .outcome-box{
  opacity:0!important;
  filter:blur(11px)!important;
  transform:translateY(12px)!important;
  transition:
    opacity 1.05s ease,
    filter 1.05s ease,
    transform 1.05s cubic-bezier(.22,1,.36,1)!important;
}

.outcomes-grid .outcome-box.visible{
  opacity:1!important;
  filter:blur(0)!important;
  transform:translateY(0)!important;
}

/* Move the two-line statement well clear of the bottom controls.
   It still remains hidden until JS adds .visible after box six. */
.outcomes-statement{
  position:absolute!important;
  left:50%!important;
  bottom:17%!important;
  width:min(1120px,88vw)!important;
  text-align:center!important;
  opacity:0!important;
  visibility:hidden!important;
  filter:blur(10px)!important;
  transform:translate(-50%,16px)!important;
  pointer-events:none!important;
}

.outcomes-statement.visible{
  opacity:1!important;
  visibility:visible!important;
  filter:blur(0)!important;
  transform:translate(-50%,0)!important;
}

.outcomes-statement p{
  margin:.12em 0!important;
  font-size:clamp(25px,2.2vw,36px)!important;
  line-height:1.18!important;
}

@media(max-width:900px){
  .outcomes-grid{
    top:28%!important;
    width:min(88vw,720px)!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(3,92px)!important;
    grid-auto-rows:92px!important;
    gap:12px!important;
  }

  .outcomes-grid .outcome-box,
  .outcomes-grid .outcome-box.visible{
    height:92px!important;
    min-height:92px!important;
    max-height:92px!important;
    padding:10px 12px!important;
    font-size:clamp(17px,3.4vw,23px)!important;
  }

  .outcomes-statement{
    bottom:12%!important;
  }

  .outcomes-statement p{
    font-size:clamp(18px,3.6vw,25px)!important;
  }
}


/* ==========================================================
   V20 — APPLIED WORDS: CLEAN BLUR / FADE SEQUENCE
   ========================================================== */

/* Each phrase fully enters and leaves before the next phrase begins. */
.applied-words .applied-word:not(.final).show{
  animation:appliedCentreBlurSequence 1.65s cubic-bezier(.22,1,.36,1) both!important;
}

@keyframes appliedCentreBlurSequence{
  0%{
    opacity:0;
    filter:blur(14px);
    transform:translate(-50%,-50%) scale(.94);
  }
  20%{
    opacity:1;
    filter:blur(0);
    transform:translate(-50%,-50%) scale(1);
  }
  68%{
    opacity:1;
    filter:blur(0);
    transform:translate(-50%,-50%) scale(1);
  }
  100%{
    opacity:0;
    filter:blur(14px);
    transform:translate(-50%,-50%) scale(1.035);
  }
}


/* ==========================================================
   V22 — AUDIO OPTIONS
   ========================================================== */
.option-row-disabled{
  opacity:.45;
  filter:grayscale(1);
  cursor:not-allowed;
}
.option-row-disabled small{
  display:block;
  margin-top:3px;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
}
.option-row-disabled .toggle-track{
  background:#c8ccda!important;
}

/* ==========================================================
   V26 — BRAND BACKGROUND STEPS
   background1.png -> background1A.png -> background1B.png -> background1C.png
   Each brand-stage dissolve lasts 6 seconds.
   ========================================================== */
.sequence-bg-1a{
  background-image:url('https://static.wixstatic.com/media/98d9ac_535cf17dadb1486eb645ffb13d216df4~mv2.png')!important;
  opacity:0!important;
  transition:opacity 6s ease-in-out!important;
}
body.sequence-background-to-1a .sequence-bg-1a{opacity:1!important;}

.sequence-bg-1b{
  background-image:url('../https://static.wixstatic.com/media/98d9ac_878317771cc140cdbca32230fac205e7~mv2.png')!important;
  opacity:0!important;
  transition:opacity 6s ease-in-out!important;
}
body.sequence-background-to-1b .sequence-bg-1b{opacity:1!important;}

.sequence-bg-1c{
  background-image:url('../https://static.wixstatic.com/media/98d9ac_35cd5bbf00514ea8bd651294a52d85e1~mv2.png')!important;
  opacity:0!important;
  transition:opacity 6s ease-in-out!important;
}
body.sequence-background-to-1c .sequence-bg-1c{opacity:1!important;}


/* ==========================================================
   V27 — SCRIPT DOWNLOAD + PROGRAMME CHOICE ROUTING
   ========================================================== */
.setup-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:6px;
}

.script-btn{
  min-width:150px;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 24px;
  border:2px solid var(--pink);
  border-radius:999px;
  background:rgba(255,255,255,.82);
  color:var(--navy);
  text-decoration:none;
  font-weight:800;
  font-size:16px;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.script-btn:hover,
.script-btn:focus-visible{
  transform:translateY(-1px);
  background:#fff;
  box-shadow:0 8px 22px rgba(38,46,99,.10);
}

.programme-choices{
  position:absolute;
  left:50%;
  top:34%;
  transform:translate(-50%,20px);
  width:min(860px,84vw);
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  opacity:0;
  visibility:hidden;
  filter:blur(10px);
  transition:opacity .8s ease, filter .8s ease, transform .8s cubic-bezier(.22,1,.36,1), visibility 0s linear .8s;
  z-index:30;
}

.programme-choices.visible{
  opacity:1;
  visibility:visible;
  filter:blur(0);
  transform:translate(-50%,0);
  transition-delay:0s;
}

.programme-choice-btn{
  width:100%;
  min-height:62px;
  padding:14px 24px;
  border:2px solid rgba(242,85,140,.32);
  border-radius:18px;
  background:rgba(255,255,255,.78);
  color:var(--navy);
  font:inherit;
  font-size:clamp(18px,1.65vw,26px);
  line-height:1.15;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 9px 24px rgba(38,46,99,.07);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}

.programme-choice-btn:hover,
.programme-choice-btn:focus-visible{
  transform:translateY(-2px);
  background:rgba(249,235,79,.52);
  border-color:rgba(242,85,140,.55);
}

.benefits-screen.programme-choice-mode .benefits-content{
  opacity:0;
  filter:blur(10px);
  pointer-events:none;
  transition:opacity .65s ease, filter .65s ease;
}

.programme-screen{
  background:transparent!important;
  text-align:center;
}

.programme-m-wrap{
  position:absolute!important;
  left:50%!important;
  top:2.4%!important;
  transform:translateX(-50%)!important;
  width:min(145px,11vw)!important;
}

.programme-title{
  position:absolute;
  top:39%;
  left:50%;
  width:min(1180px,90vw);
  margin:0;
  transform:translate(-50%,22px);
  color:var(--navy);
  font-size:clamp(38px,5vw,76px);
  line-height:1.08;
  opacity:0;
  filter:blur(12px);
  transition:opacity 1.1s ease, filter 1.1s ease, transform 1.1s cubic-bezier(.22,1,.36,1);
}

.programme-screen.programme-entered .programme-title{
  opacity:1;
  filter:blur(0);
  transform:translate(-50%,0);
}

@media(max-width:700px){
  .programme-choices{
    top:29%;
    width:88vw;
    gap:10px;
  }
  .programme-choice-btn{
    min-height:54px;
    padding:11px 14px;
    font-size:clamp(16px,4vw,20px);
  }
  .programme-title{
    top:36%;
    font-size:clamp(32px,8vw,54px);
  }
}


/* ==========================================================
   V29 — RESPONSIVE MEDIA, ACADEMY POSITION & PROGRAMME ROUTING
   ========================================================== */

/* Learning Academy brand enters 15% lower than its former 50% vertical position. */
.showcase-academy{
  top:57.5%!important;
}

/* Keep every presentation video genuinely 16:9 and show the entire frame. */
.media-panel.segment-media,
.media-panel.prelab-media{
  width:min(56vw, 980px, calc(62vh * 16 / 9))!important;
  height:auto!important;
  max-height:62vh!important;
  aspect-ratio:16 / 9!important;
  overflow:hidden!important;
}

.media-panel video,
#featureVideo,
.benefits-video,
.learner-choice-video{
  width:100%!important;
  height:100%!important;
  aspect-ratio:16 / 9!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#111!important;
}

.benefits-video-wrap,
.learner-choice-video-slot{
  aspect-ratio:16 / 9!important;
}

/* Normal-state Journey artwork always fits within the available viewport. */
.cycle-wrap{
  width:min(720px, 64vw, 72vh)!important;
  max-width:64vw!important;
  max-height:72vh!important;
}

.journey-layer img,
.journey-1 img,
.journey-2 img,
.journey-3 img,
.journey-4 img,
.journey-5 img{
  object-fit:contain!important;
}

/* Focus states leave enough room for both the Journey artwork and the 16:9 video. */
.journey-layer.prelab-focus,
.journey-layer.segment-focus-left{
  transform:translateX(-17vw) scale(1.02)!important;
}

.journey-layer.segment-focus-right,
.journey-layer.segment-focus-right.segment-focus-nearer{
  transform:translateX(17vw) scale(1.02)!important;
}

/* On narrower/taller browser windows, stack the selected Journey above the video
   rather than allowing either item to be cropped off-screen. */
@media (max-width:1000px), (max-aspect-ratio:4/3){
  .cycle-wrap{
    width:min(640px, 82vw, 58vh)!important;
    max-width:82vw!important;
    max-height:58vh!important;
  }

  .media-panel.segment-media,
  .media-panel.prelab-media{
    width:min(82vw, 820px, calc(43vh * 16 / 9))!important;
    height:auto!important;
    max-height:43vh!important;
    aspect-ratio:16 / 9!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:7.5vh!important;
    margin:0!important;
  }

  .media-panel.segment-video-onscreen,
  .media-panel.prelab-video-onscreen{
    transform:translateX(-50%)!important;
  }

  .media-panel.segment-media-left.segment-video-offscreen,
  .media-panel.segment-media-right.segment-video-offscreen,
  .media-panel.prelab-video-offscreen{
    transform:translate(-50%, 110vh)!important;
  }

  .journey-layer.prelab-focus,
  .journey-layer.segment-focus-left,
  .journey-layer.segment-focus-right,
  .journey-layer.segment-focus-right.segment-focus-nearer{
    transform:translateY(-24vh) scale(.80)!important;
  }
}

@media (max-width:700px){
  .cycle-wrap{
    width:min(88vw, 54vh)!important;
    max-width:88vw!important;
  }

  .media-panel.segment-media,
  .media-panel.prelab-media{
    width:min(90vw, calc(38vh * 16 / 9))!important;
    max-height:38vh!important;
    bottom:8vh!important;
  }

  .journey-layer.prelab-focus,
  .journey-layer.segment-focus-left,
  .journey-layer.segment-focus-right,
  .journey-layer.segment-focus-right.segment-focus-nearer{
    transform:translateY(-25vh) scale(.70)!important;
  }
}

/* Every selected programme has a direct route to the final Any Questions page. */
.outcomes-questions-btn{
  position:absolute;
  right:clamp(18px,3vw,50px);
  bottom:clamp(18px,2.3vh,34px);
  z-index:40;
  min-width:160px;
  min-height:48px;
  padding:12px 24px;
  border:2px solid rgba(242,85,140,.45);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:var(--navy);
  font:inherit;
  font-size:clamp(15px,1.2vw,19px);
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(38,46,99,.10);
}

.outcomes-questions-btn:hover,
.outcomes-questions-btn:focus-visible{
  background:rgba(249,235,79,.92);
  border-color:rgba(242,85,140,.75);
  outline:none;
}

@media(max-width:900px){
  .outcomes-questions-btn{
    right:16px;
    bottom:16px;
    min-width:138px;
    min-height:44px;
    padding:10px 18px;
  }
}

/* ==========================================================
   V30 — ACADEMY POSITIONS + LONG OUTCOME FIT
   ========================================================== */

/* Restore the Momentous Learning Academy brand logo to its pre-V29 position. */
.showcase-academy{
  top:50%!important;
}

/* Instead, lower academy.png inside the learning-cycle composition by 10 percentage points. */
.cycle-academy-layer{
  transform:translate(-18%,0%) scale(1.22)!important;
}

.cycle-academy-layer.visible{
  opacity:1!important;
  transform:translate(-18%,0%) scale(1.28)!important;
}

/* The fifth Business Administrator outcome is longer than the others.
   Keep it comfortably inside the fixed yellow box at every common size. */
.outcomes-grid .outcome-box:nth-child(5){
  padding:14px 18px!important;
  font-size:clamp(15px,1.28vw,21px)!important;
  line-height:1.10!important;
  text-wrap:balance;
}

@media(max-width:800px){
  .cycle-academy-layer{
    transform:translate(-14%,1%) scale(1.14)!important;
  }

  .cycle-academy-layer.visible{
    transform:translate(-14%,1%) scale(1.18)!important;
  }
}

@media(max-width:900px){
  .outcomes-grid .outcome-box:nth-child(5){
    padding:10px 11px!important;
    font-size:clamp(13px,2.55vw,18px)!important;
    line-height:1.08!important;
  }
}

/* ==========================================================
   V31 — RESTORE V29 ACADEMY POSITION + ALIGN LEARNING WORD
   ========================================================== */

/* Put academy.png back at the effective V29 position. */
.cycle-academy-layer{
  transform:translate(-18%,-10%) scale(1.22)!important;
}

.cycle-academy-layer.visible{
  opacity:1!important;
  transform:translate(-18%,-10%) scale(1.28)!important;
}

/* Keep the LEARNING label on the exact same baseline as EXPERTISE and GROWTH
   once the three-brand arrangement is established. */
.brand-showcase.brand-stage-1 .showcase-learning,
.brand-showcase.brand-stage-2 .showcase-learning,
.brand-showcase.brand-stage-3 .showcase-learning{
  position:absolute!important;
  left:0!important;
  top:151px!important;
  width:100%!important;
  margin-top:0!important;
}

@media(max-width:800px){
  .cycle-academy-layer{
    transform:translate(-14%,-9%) scale(1.14)!important;
  }

  .cycle-academy-layer.visible{
    transform:translate(-14%,-9%) scale(1.18)!important;
  }

  .brand-showcase.brand-stage-1 .showcase-learning,
  .brand-showcase.brand-stage-2 .showcase-learning,
  .brand-showcase.brand-stage-3 .showcase-learning{
    top:116px!important;
  }
}


/* ==========================================================
   V32 — LEARNING CLEARANCE + ACADEMY NORMAL-STATE VISIBILITY
   ========================================================== */

/* Move LEARNING down so it clears the Momentous logo rather than sitting over it. */
.brand-showcase.brand-stage-1 .showcase-learning,
.brand-showcase.brand-stage-2 .showcase-learning,
.brand-showcase.brand-stage-3 .showcase-learning{
  top:174px!important;
}

@media(max-width:800px){
  .brand-showcase.brand-stage-1 .showcase-learning,
  .brand-showcase.brand-stage-2 .showcase-learning,
  .brand-showcase.brand-stage-3 .showcase-learning{
    top:134px!important;
  }
}