/* VLC Circle - motion and Elementor overrides.
   Reveal is gated on .vlc-js so content is never hidden when JS cannot reveal it. */

/* ---- Elementor widget wrappers: reassert VLC typography ---- */
.elementor-heading-title{color:var(--vlc-ink);font-family:Poppins,sans-serif;font-weight:600;line-height:1.1}
.vlc-hero .elementor-heading-title{font-size:clamp(2.2rem,5vw,3.4rem)}
.vlc-sec__head .elementor-heading-title{font-size:clamp(1.8rem,3.6vw,2.6rem)}
.vlc-panel .elementor-heading-title{color:#fff;font-size:clamp(1.4rem,2.6vw,2rem)}
.vlc-stage .elementor-heading-title{font-size:1.15rem}
.vlc-value .elementor-heading-title{font-size:1rem}
.elementor-widget-text-editor{color:var(--vlc-ink);font-family:Poppins,sans-serif;line-height:1.65}
.vlc-panel .elementor-widget-text-editor{color:#fff}
.vlc-stage .elementor-widget-text-editor,
.vlc-value .elementor-widget-text-editor{color:var(--vlc-muted);font-size:.8rem}
.vlc-sec__head .elementor-widget-text-editor{color:var(--vlc-muted);font-size:.92rem}

/* Elementor's own button chrome must not round or recolour ours */




.elementor-widget:not(:last-child){margin-block-end:0}

@media (prefers-reduced-motion: no-preference) {

  .vlc-js .vlc-reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .55s cubic-bezier(.22,.61,.36,1),
               transform .55s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--vlc-delay,0ms);
  }
  .vlc-js .vlc-reveal.is-in{opacity:1;transform:none}

  .vlc-js .vlc-hero__strip>.vlc-reveal{transform:translateY(26px)}
  .vlc-js .vlc-hero__strip>.vlc-reveal.is-in{transform:none}
  .vlc-js .vlc-hero__strip>*:nth-child(odd).is-in{transform:translateY(-18px)}

  .vlc-stage img,
  .vlc-mosaic img,
  .vlc-close img,
  .vlc-quote img{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
  .vlc-stage:hover img,
  .vlc-mosaic .elementor-widget-image:hover img{transform:scale(1.03)}

  

  .vlc-js .vlc-value .vlc-value__mark{transition:transform .5s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--vlc-delay,0ms);transform:scale(.82)}
  .vlc-js .vlc-value.is-in .vlc-value__mark{transform:none}

  .vlc-nav__list a{transition:color .18s ease}
  .vlc-cityswitch__opt{transition:background-color .2s ease,color .2s ease}
}

@media (prefers-reduced-motion: reduce) {
  .vlc-js .vlc-reveal{opacity:1;transform:none}
}

/* Testimonial carousel */
.vlc-quotes{position:relative}
.vlc-quotes__track>.vlc-quote{display:none}
.vlc-quotes__track>.vlc-quote.is-active{display:grid}
.vlc-quotes__nav{display:flex;gap:10px;justify-content:flex-end;margin-top:var(--vlc-sm)}
.vlc-quotes__btn{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--vlc-accent);
  background:transparent;color:var(--vlc-accent);cursor:pointer;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.vlc-quotes__btn:hover{background:var(--vlc-accent);color:#fff}

/* ---------------------------------------------------------------
   Footer. The kit sets h2{color:#363636} at element level, which beats
   colour inherited from .vlc-footer, so every footer colour is explicit.
   --------------------------------------------------------------- */
.vlc-footer{background:var(--vlc-accent);color:#fff}
.vlc-footer__inner{max-width:1180px;margin:0 auto;
  grid-template-columns:1.25fr .85fr 1.1fr 1.3fr;
  gap:clamp(24px,3vw,48px);align-items:start}
.vlc-footer h2,
.vlc-footer .vlc-footer__h{color:#fff;font-size:1.05rem;font-weight:600;margin:0 0 14px}
.vlc-footer p,
.vlc-footer li,
.vlc-footer a,
.vlc-footer .vlc-footer__list a{color:#fff;opacity:1;text-decoration:none}
.vlc-footer .vlc-footer__list{display:grid;gap:9px;font-size:.82rem;margin:0;padding:0;list-style:none}
.vlc-footer .vlc-footer__list a:hover{text-decoration:underline;text-underline-offset:4px}
.vlc-footer__tag{font-size:.76rem;opacity:.9;margin-top:18px;max-width:22ch}
.vlc-logo__img--rev{height:78px;width:auto}
.vlc-footer__col--news .wpcf7-form{max-width:320px}
@media (max-width:1024px){
  .vlc-footer__inner{grid-template-columns:1fr 1fr}
  .vlc-logo__img--rev{height:66px}
}
@media (max-width:600px){.vlc-footer__inner{grid-template-columns:1fr}}

/* ---------------------------------------------------------------
   Buttons. Elementor puts our vlc-btn classes on the WIDGET WRAPPER,
   not on the anchor. The wrapper must stay transparent and hug its
   content; the anchor inside carries the button styling.
   --------------------------------------------------------------- */
.elementor-widget-button.vlc-btn{background:none;border:0;padding:0;
  width:auto;max-width:100%;align-self:flex-start;transform:none}
.elementor-widget-button.vlc-btn .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:0;padding:12px 26px;font-family:Poppins,sans-serif;
  font-weight:500;font-size:.9rem;line-height:1.2;text-decoration:none;
  width:auto;transition:background-color .18s ease,transform .18s ease}
.elementor-widget-button.vlc-btn--primary .elementor-button{background-color:var(--vlc-accent);color:#fff}
.elementor-widget-button.vlc-btn--primary .elementor-button:hover{background-color:#47A342}
.elementor-widget-button.vlc-btn--secondary .elementor-button{background-color:var(--vlc-yellow);color:var(--vlc-ink)}
.elementor-widget-button.vlc-btn--secondary .elementor-button:hover{background-color:#E5DE45}
@media (prefers-reduced-motion: no-preference){
  .elementor-widget-button.vlc-btn .elementor-button:hover{transform:translateY(-2px)}
}
/* Centred button rows */
.vlc-hero__cta .elementor-widget-button.vlc-btn,
.vlc-sec__cta .elementor-widget-button.vlc-btn{align-self:center}


/* Tertiary action: underlined text link, per the comps */
.elementor-widget-button.vlc-btn--ghost .elementor-button{background:none;color:var(--vlc-ink);
  padding:12px 4px;text-decoration:underline;text-underline-offset:6px}
.elementor-widget-button.vlc-btn--ghost .elementor-button:hover{background:none;color:var(--vlc-accent)}


/* ================================================================
   Interaction pass. All of it sits inside prefers-reduced-motion so
   the static composition stays exactly as approved for anyone who
   opts out. Transforms and opacity only \u2014 nothing that reflows.
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Parallax targets are scaled so the drift cannot expose an arc edge. */
  .vlc-parallax{will-change:transform;transform:scale(1.06)}

  /* ---- Card hover: a small lift, a softer shadow, a slow image push. ---- */
  .vlc-prop,.vlc-jcard,.vlc-post,.vlc-campus,.vlc-leader,
  .vlc-unicard,.vlc-event,.vlc-stage{
    transition:transform .38s cubic-bezier(.22,.61,.36,1),
               box-shadow .38s cubic-bezier(.22,.61,.36,1)}
  .vlc-prop:hover,.vlc-jcard:hover,.vlc-post:hover,.vlc-campus:hover,
  .vlc-leader:hover,.vlc-unicard:hover,.vlc-event:hover,.vlc-stage:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 42px rgba(54,54,54,.10)}

  .vlc-prop img,.vlc-jcard img,.vlc-post img,.vlc-campus img,
  .vlc-leader img,.vlc-event img{
    transition:transform .6s cubic-bezier(.22,.61,.36,1)}
  .vlc-prop:hover img,.vlc-jcard:hover img,.vlc-post:hover img,
  .vlc-campus:hover img,.vlc-leader:hover img,.vlc-event:hover img{
    transform:scale(1.045)}

  /* Subject panels have no photograph, so they respond in colour depth. */
  .vlc-subject{transition:transform .35s cubic-bezier(.22,.61,.36,1),filter .35s ease}
  .vlc-subject:hover{transform:translateY(-4px);filter:saturate(1.12)}

  /* Process markers fill on hover of their step. */
  .vlc-step__mark{transition:background-color .3s ease,color .3s ease,transform .35s cubic-bezier(.22,.61,.36,1)}
  .vlc-step:hover .vlc-step__mark{background:var(--vlc-accent);color:#fff;transform:scale(1.08)}

  /* Reasons lists tick in one after another. */
  .vlc-reasons__item::before{transition:transform .4s cubic-bezier(.22,.61,.36,1)}
  .vlc-reasons__item:hover::before{transform:rotate(45deg) scale(1.25)}

  /* Gallery mosaic keeps its existing zoom but gains depth. */
  .vlc-mosaic .elementor-widget-image{transition:transform .4s cubic-bezier(.22,.61,.36,1)}
  .vlc-mosaic .elementor-widget-image:hover{transform:translateY(-4px)}

  /* Insight modal enters rather than appears. */
  .vlc-modal__panel{animation:vlc-modal-in .32s cubic-bezier(.22,.61,.36,1)}
  @keyframes vlc-modal-in{
    from{opacity:0;transform:translateY(16px) scale(.985)}
    to{opacity:1;transform:none}
  }

  /* Leaf panels lean in from their arc side. */
  .vlc-js .vlc-leaf--belief{transform:translateX(-16px)}
  .vlc-js .vlc-leaf--history{transform:translateX(16px)}
  .vlc-js .vlc-leaf.is-in{transform:none}
}

@media (prefers-reduced-motion: reduce) {
  .vlc-parallax{transform:none}
}