/* ===========================================================================
   QVSE motion — the hero slider, scroll animations and hover effects.
   ---------------------------------------------------------------------------
   Shared by the theme (enqueued) and the static build (inlined), so both look
   and behave the same.

   Nothing here depends on Elementor Pro. Everything is disabled when the
   visitor asks for reduced motion.
   =========================================================================== */

:root{
  --qs-h: 560px;          /* slider height (the widget can override this)   */
  --rv-dur: .7s;          /* scroll-reveal duration                         */
  --rv-dist: 26px;        /* how far elements travel                        */
  --rv-ease: cubic-bezier(.2,.7,.3,1);
}

/* ---------------------------------------------------------------------------
   1. Hero slider
   --------------------------------------------------------------------------- */

.qvse-hero{position:relative;overflow:hidden;background:var(--navy,#002147);color:#fff;
  height:var(--qs-h);min-height:420px;isolation:isolate}
.qvse-hero .qs-track{position:absolute;inset:0}

.qs-slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .9s ease, visibility .9s ease;z-index:1}
.qs-slide.is-active{opacity:1;visibility:visible;z-index:2}

/* background photo + slow zoom while the slide is on screen */
.qs-media{position:absolute;inset:0;overflow:hidden}
.qs-media img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.03);transition:transform 7s linear;will-change:transform}
.qs-slide.is-active .qs-media img{transform:scale(1.12)}
.qs-slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(0,33,71,var(--qs-overlay,.72)) 0%,
            rgba(0,33,71,calc(var(--qs-overlay,.72) * .82)) 45%,
            rgba(0,33,71,calc(var(--qs-overlay,.72) * .45)) 100%)}

.qs-inner{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;padding-top:40px;padding-bottom:56px}

/* text rises in, one piece after another */
.qs-kicker,.qs-title,.qs-sub,.qs-ctas{opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--rv-ease), transform .6s var(--rv-ease)}
.qs-slide.is-active .qs-kicker,.qs-slide.is-active .qs-title,
.qs-slide.is-active .qs-sub,.qs-slide.is-active .qs-ctas{opacity:1;transform:none}
.qs-slide.is-active .qs-kicker{transition-delay:.15s}
.qs-slide.is-active .qs-title{transition-delay:.28s}
.qs-slide.is-active .qs-sub{transition-delay:.42s}
.qs-slide.is-active .qs-ctas{transition-delay:.55s}

.qs-kicker{display:inline-block;background:var(--gold,#fdc800);color:var(--navy,#002147);
  font-weight:800;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 12px;border-radius:6px;margin-bottom:16px}
.qs-title{color:#fff;font-size:clamp(1.6rem,3.8vw,2.9rem);line-height:1.16;
  max-width:22ch;margin:0 0 14px;text-wrap:balance}
.qs-sub{color:#e2e9f3;font-size:clamp(.98rem,1.5vw,1.12rem);max-width:60ch;margin:0 0 8px}
.qs-ctas{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}

.qs-btn{display:inline-block;padding:14px 24px;border-radius:8px;font-weight:700;
  background:var(--gold,#fdc800);color:var(--navy,#002147);border:2px solid var(--gold,#fdc800);
  text-decoration:none;transition:transform .25s var(--rv-ease), box-shadow .25s var(--rv-ease),
  background .25s ease, color .25s ease}
.qs-btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.28);text-decoration:none}
.qs-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.qs-btn.ghost:hover{background:#fff;color:var(--navy,#002147);border-color:#fff}

/* controls */
.qs-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;font-size:1.5rem;line-height:1;
  display:grid;place-items:center;backdrop-filter:blur(2px);
  opacity:0;transition:opacity .3s ease, background .25s ease, transform .25s var(--rv-ease)}
.qvse-hero:hover .qs-nav,.qvse-hero:focus-within .qs-nav{opacity:1}
.qs-nav:hover{background:var(--gold,#fdc800);color:var(--navy,#002147)}
.qs-prev{left:18px} .qs-next{right:18px}
.qs-nav:focus-visible{outline:3px solid var(--gold,#fdc800);outline-offset:2px;opacity:1}

.qs-dots{position:absolute;left:0;right:0;bottom:22px;z-index:5;
  display:flex;gap:10px;justify-content:center}
.qs-dot{width:34px;height:5px;border-radius:99px;border:0;cursor:pointer;padding:0;
  background:rgba(255,255,255,.38);transition:background .25s ease, transform .25s ease}
.qs-dot:hover{background:rgba(255,255,255,.7)}
.qs-dot.is-active{background:var(--gold,#fdc800);transform:scaleY(1.4)}
.qs-dot:focus-visible{outline:3px solid var(--gold,#fdc800);outline-offset:3px}

/* autoplay progress bar */
.qs-progress{position:absolute;left:0;bottom:0;height:3px;width:100%;z-index:6;
  background:transparent;pointer-events:none}
.qs-progress i{display:block;height:100%;width:0;background:var(--gold,#fdc800)}
.qvse-hero.is-playing .qs-progress i{animation:qs-bar var(--qs-delay,6000ms) linear forwards}
@keyframes qs-bar{from{width:0}to{width:100%}}
.qvse-hero.is-paused .qs-progress i{animation-play-state:paused}

/* ---------------------------------------------------------------------------
   2. Scroll reveal
   ---------------------------------------------------------------------------
   Elements start hidden ONLY when JavaScript is available (html.qvse-js), so a
   visitor without JS sees a complete page rather than blank space.
   --------------------------------------------------------------------------- */

html.qvse-js [data-reveal]{opacity:0}
html.qvse-js [data-reveal]{transition:opacity var(--rv-dur) var(--rv-ease),
  transform var(--rv-dur) var(--rv-ease);transition-delay:var(--rv-delay,0ms)}
html.qvse-js [data-reveal="up"]{transform:translateY(var(--rv-dist))}
html.qvse-js [data-reveal="left"]{transform:translateX(calc(var(--rv-dist) * -1))}
html.qvse-js [data-reveal="right"]{transform:translateX(var(--rv-dist))}
html.qvse-js [data-reveal="zoom"]{transform:scale(.955)}
html.qvse-js [data-reveal].in{opacity:1;transform:none}

/* the slider manages its own entrance; never double-animate it */
html.qvse-js .qs-slide [data-reveal]{opacity:1 !important;transform:none !important}

/* ---------------------------------------------------------------------------
   3. Hover motion — cards lift, images breathe, buttons respond
   --------------------------------------------------------------------------- */

.elementor-widget-image-box .elementor-image-box-wrapper,
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.card,.centre,.doc{
  transition:transform .3s var(--rv-ease), box-shadow .3s var(--rv-ease)}
.elementor-widget-image-box:hover .elementor-image-box-wrapper,
.elementor-widget-icon-box:hover .elementor-icon-box-wrapper,
.card:hover,.centre:hover,.doc:hover{
  transform:translateY(-6px);box-shadow:0 16px 34px rgba(16,24,40,.14)}

.elementor-widget-image-box .elementor-image-box-img{overflow:hidden;border-radius:10px}
.elementor-widget-image-box .elementor-image-box-img img{transition:transform .5s var(--rv-ease)}
.elementor-widget-image-box:hover .elementor-image-box-img img{transform:scale(1.06)}

.elementor-button,.elementor-widget-button .elementor-button,
a.btn,.button{
  transition:transform .25s var(--rv-ease), box-shadow .25s var(--rv-ease),
  background-color .25s ease, color .25s ease}
.elementor-button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,24,40,.18)}
.elementor-widget-button{transform:none}

/* the callout strips and CTA bands should not jump on hover */
.elementor-widget-alert:hover,.cta:hover{transform:none;box-shadow:none}

nav.main .sub{transform:translateY(-6px);opacity:0;pointer-events:none;
  transition:opacity .22s ease, transform .22s var(--rv-ease)}
nav.main .item:hover .sub,nav.main .item:focus-within .sub,
nav.main .item.open .sub{transform:none;opacity:1;pointer-events:auto}
nav.main .sub.wide{transition:opacity .22s ease, transform .22s var(--rv-ease)}
nav.main .item:hover .sub.wide,nav.main .item:focus-within .sub.wide,
nav.main .item.open .sub.wide{transform:none}

/* the counter figure settles with a small pop */
.elementor-counter-number-suffix,.elementor-counter-number{transition:transform .3s var(--rv-ease)}
.elementor-widget-counter:hover .elementor-counter-number{transform:scale(1.04)}

/* ---------------------------------------------------------------------------
   4. Reduced motion: everything static, immediately visible
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  html.qvse-js [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
  .qs-slide{transition:opacity .2s linear}
  .qs-media img,.qs-slide.is-active .qs-media img{transform:none;transition:none}
  .qs-kicker,.qs-title,.qs-sub,.qs-ctas{opacity:1;transform:none;transition:none}
  .qs-nav,.qs-dot,.qs-btn,.elementor-button,
  .elementor-widget-image-box .elementor-image-box-wrapper,
  .elementor-widget-icon-box .elementor-icon-box-wrapper,
  .card,.centre,.doc{transition:none !important}
  .qs-progress{display:none}
  .qvse-hero.is-playing .qs-progress i{animation:none}
}

/* ---------------------------------------------------------------------------
   5. Small screens
   --------------------------------------------------------------------------- */

@media (max-width:900px){
  .qvse-hero{--qs-h:520px}
  .qs-title{max-width:26ch}
  .qs-nav{display:none}                 /* swipe/dots are enough on touch */
  .qs-dots{bottom:16px}
}
@media (max-width:600px){
  /* Let the box breathe instead of squashing five slides into a phone screen,
     but never let it collapse: the slides are absolutely positioned, so the
     hero needs a floor of its own. */
  .qvse-hero{height:auto;min-height:560px}
  .qs-inner{padding-top:76px;padding-bottom:104px}
  .qs-title{font-size:1.5rem;max-width:none}
  .qs-sub{font-size:.95rem}
  .qs-btn{width:100%;text-align:center}
}

/* ---------------------------------------------------------------------------
   6. Stagger for the static build's card rows (Elementor pages get the
      same effect from motion.js, which sets --rv-delay inline).
   --------------------------------------------------------------------------- */
.stats > [data-reveal],.grid > [data-reveal],.centres > [data-reveal],.docs > [data-reveal],.fgrid > [data-reveal],.steps > [data-reveal],.ticks > [data-reveal],.cols > [data-reveal],.cards > [data-reveal]{--rv-delay:0ms}
.stats > [data-reveal]:nth-child(2),.grid > [data-reveal]:nth-child(2),.centres > [data-reveal]:nth-child(2),.docs > [data-reveal]:nth-child(2),.fgrid > [data-reveal]:nth-child(2),.steps > [data-reveal]:nth-child(2),.ticks > [data-reveal]:nth-child(2),.cols > [data-reveal]:nth-child(2),.cards > [data-reveal]:nth-child(2){--rv-delay:90ms}
.stats > [data-reveal]:nth-child(3),.grid > [data-reveal]:nth-child(3),.centres > [data-reveal]:nth-child(3),.docs > [data-reveal]:nth-child(3),.fgrid > [data-reveal]:nth-child(3),.steps > [data-reveal]:nth-child(3),.ticks > [data-reveal]:nth-child(3),.cols > [data-reveal]:nth-child(3),.cards > [data-reveal]:nth-child(3){--rv-delay:180ms}
.stats > [data-reveal]:nth-child(4),.grid > [data-reveal]:nth-child(4),.centres > [data-reveal]:nth-child(4),.docs > [data-reveal]:nth-child(4),.fgrid > [data-reveal]:nth-child(4),.steps > [data-reveal]:nth-child(4),.ticks > [data-reveal]:nth-child(4),.cols > [data-reveal]:nth-child(4),.cards > [data-reveal]:nth-child(4){--rv-delay:270ms}
.stats > [data-reveal]:nth-child(5),.grid > [data-reveal]:nth-child(5),.centres > [data-reveal]:nth-child(5),.docs > [data-reveal]:nth-child(5),.fgrid > [data-reveal]:nth-child(5),.steps > [data-reveal]:nth-child(5),.ticks > [data-reveal]:nth-child(5),.cols > [data-reveal]:nth-child(5),.cards > [data-reveal]:nth-child(5){--rv-delay:360ms}
.stats > [data-reveal]:nth-child(6),.grid > [data-reveal]:nth-child(6),.centres > [data-reveal]:nth-child(6),.docs > [data-reveal]:nth-child(6),.fgrid > [data-reveal]:nth-child(6),.steps > [data-reveal]:nth-child(6),.ticks > [data-reveal]:nth-child(6),.cols > [data-reveal]:nth-child(6),.cards > [data-reveal]:nth-child(6){--rv-delay:450ms}
.stats > [data-reveal]:nth-child(7),.grid > [data-reveal]:nth-child(7),.centres > [data-reveal]:nth-child(7),.docs > [data-reveal]:nth-child(7),.fgrid > [data-reveal]:nth-child(7),.steps > [data-reveal]:nth-child(7),.ticks > [data-reveal]:nth-child(7),.cols > [data-reveal]:nth-child(7),.cards > [data-reveal]:nth-child(7){--rv-delay:540ms}