/* =====================================================================
   EICR Remedial Works: motion system
   ---------------------------------------------------------------------
   Effects are switched on with CSS classes in Elementor
   (Advanced > CSS Classes). Remove a class to switch its effect off.

     rv          reveal when scrolled into view (rise + fade)
     m-still     with rv: the element stays put, only its children animate
     m-stagger   with rv: direct children enter one after another
     m-seq       inside an m-stagger child: sub-items that follow their parent
     m-words     heading: words rise from a mask; <em> energises / highlights
     m-count     heading: leading number counts up when it appears
     m-cta       primary button: press + glint
     m-press     secondary button: press
     m-magnetic  button drifts toward the cursor (desktop only)
     m-ring      phone number wiggles on hover
     m-spot      card: torch spotlight follows the cursor (desktop only)

   Component choreography (hero rail, ticket, papers, steps, code board,
   blog cards...) hangs off the classes those components already carry.
   Everything below only runs when html.m-js is set by motion.js, so
   content is never hidden without the script, in the Elementor editor,
   or for visitors who prefer reduced motion.
   ===================================================================== */

:root{
  --m-out:cubic-bezier(.16,1,.3,1);       /* long, calm settle: content */
  --m-snap:cubic-bezier(.34,1.56,.64,1);  /* overshoot: stamps, pins, pops */
  --m-ease:cubic-bezier(.2,.9,.25,1);     /* the site's existing ease */
}

/* ---------- keyframes ---------- */
@keyframes m-rise{from{opacity:0;translate:0 var(--m-dist,22px)}}
@keyframes m-fade{from{opacity:0}}
@keyframes m-word{from{translate:0 108%}}
@keyframes m-energise{from{color:#fff}}
@keyframes m-mark{from{background-size:0% 100%}to{background-size:100% 100%}}
@keyframes m-roll{from{translate:0 110%;opacity:0}}
@keyframes m-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes m-stamp{0%{opacity:0;scale:1.9}55%{opacity:1;scale:.92}100%{scale:1}}
@keyframes m-pop{0%{scale:.6;opacity:0}60%{scale:1.08;opacity:1}100%{scale:1}}
@keyframes m-pin{from{opacity:0;translate:0 -16px;rotate:-3deg}}
@keyframes m-deal{from{opacity:0;translate:70px 140px;rotate:9deg}}
@keyframes m-grow-x{from{scale:0 1}}
@keyframes m-grow-y{from{scale:1 0}to{scale:1 1}}
@keyframes m-drop{0%{opacity:0;translate:0 -160px}55%{opacity:1;translate:0 10px}78%{translate:0 -4px}100%{translate:0 0}}
@keyframes m-slam{0%{opacity:0;scale:1.45;rotate:-9deg}60%{opacity:1;scale:.96;rotate:1deg}100%{scale:1;rotate:0deg}}
@keyframes m-power{0%{opacity:0}18%{opacity:.75}26%{opacity:.2}44%{opacity:.9}52%{opacity:.55}100%{opacity:1}}
@keyframes m-flicker{0%,100%{opacity:1}12%{opacity:.25}20%{opacity:1}34%{opacity:.45}46%{opacity:1}}
@keyframes m-shake{0%,100%{rotate:0deg}20%{rotate:-12deg}40%{rotate:10deg}60%{rotate:-6deg}80%{rotate:3deg}}
@keyframes m-ring{0%,100%{rotate:0deg}15%{rotate:-4deg}30%{rotate:4deg}45%{rotate:-3deg}60%{rotate:2deg}}
@keyframes m-swing-once{0%{rotate:0deg}25%{rotate:9deg}50%{rotate:-6deg}75%{rotate:3deg}100%{rotate:0deg}}
@keyframes m-sheen{from{translate:-130% 0}to{translate:130% 0}}
@keyframes m-ripple{from{box-shadow:0 0 0 0 var(--m-ring,rgba(44,154,98,.55))}to{box-shadow:0 0 0 16px rgba(0,0,0,0)}}
@keyframes m-flash{0%,100%{box-shadow:0 0 0 0 rgba(255,210,63,0)}35%{box-shadow:0 0 0 5px rgba(255,210,63,.7)}}
@keyframes m-print{from{clip-path:inset(-40px -40px 100% -40px)}to{clip-path:inset(-40px -40px -60px -40px)}}
@keyframes m-tilt{from{opacity:0;translate:0 50px;rotate:x 12deg}}
@keyframes m-slide-up{from{translate:0 110%}}
@keyframes m-slide-in{from{opacity:0;translate:28px 0}}
@keyframes m-unmask{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes m-settle{from{scale:1.14}}
@keyframes m-lift-away{to{translate:0 -70px;opacity:.35}}
@keyframes m-drift{to{translate:0 -40px;opacity:.5}}
@keyframes m-progress{from{scale:0 1}to{scale:1 1}}

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

/* =====================================================================
   1. Generic reveal, stagger, sequences
   ===================================================================== */
.m-js .rv:not(.in):not(.m-still):not(.m-stagger){opacity:0}
.m-js .rv.in:not(.m-still):not(.m-stagger){animation:m-rise .9s var(--m-out) var(--d,0s) backwards}

.m-js .rv.m-stagger:not(.in)>*{opacity:0}
.m-js .rv.m-stagger.in>*{animation:m-rise .8s var(--m-out) backwards;animation-delay:calc(var(--i,0) * var(--st,85ms) + var(--d,0s))}
.m-js .rv.m-stagger:not(.in) .m-seq{opacity:0}
.m-js .rv.m-stagger.in .m-seq{animation:m-rise .6s var(--m-out) backwards;--m-dist:12px;
  animation-delay:calc(var(--i,0) * var(--st,85ms) + var(--d,0s) + .28s + var(--j,0) * 70ms)}

/* =====================================================================
   2. Typography: masked word rise, highlighter, energise, count, eyebrow
   ===================================================================== */
.m-w{display:inline-block;overflow:hidden;padding:.08em .05em .16em;margin:-.08em -.05em -.16em;vertical-align:baseline}
.m-wi{display:inline-block}
.m-js .m-words.m-split:not(.in) .m-wi{opacity:0}
.m-js .m-words.m-split.in .m-wi{animation:m-word .95s var(--m-out) backwards;animation-delay:calc(var(--d,0s) + var(--w,0) * var(--ws,45ms))}
/* light sections: the yellow marker is drawn after the words land */
.m-js .eicr-h2.m-split em{background-repeat:no-repeat;background-size:0% 100%}
.m-js .eicr-h2.m-split.in em{animation:m-mark .8s var(--m-ease) forwards;animation-delay:calc(var(--d,0s) + var(--wn,6) * var(--ws,45ms) + .35s)}
/* dark sections and the hero: words in <em> energise from white to yellow, left to right */
.m-js .eicr-dark .eicr-h2.m-split em,.m-js .hero-h1.m-split em{animation:none!important;background-size:auto}
.m-js .eicr-dark .eicr-h2.m-split.in em .m-wi,.m-js .hero-h1.m-split.in em .m-wi{
  animation-name:m-word,m-energise;animation-duration:.95s,.5s;animation-timing-function:var(--m-out),var(--m-ease);animation-fill-mode:backwards,backwards;
  animation-delay:calc(var(--d,0s) + var(--w,0) * var(--ws,45ms)),calc(var(--d,0s) + var(--wn,6) * var(--ws,45ms) + .35s + var(--k,0) * 110ms)}

/* eyebrow: the number rolls like a meter digit, the label wipes in */
.eb-num{overflow:hidden}
.m-js .rv:not(.in) .eb-num .elementor-heading-title,.m-js .rv:not(.in) .eb-label{opacity:0}
.m-js .rv.in .eb-num .elementor-heading-title{animation:m-roll .6s var(--m-snap) var(--d,0s) backwards}
.m-js .rv.in .eb-label{animation:m-wipe .7s var(--m-ease) calc(var(--d,0s) + .15s) backwards}
.m-js .rv:not(.in) .sh-p{opacity:0}
.m-js .rv.in .sh-p{animation:m-rise .9s var(--m-out) calc(var(--d,0s) + .45s) backwards}

/* =====================================================================
   3. Buttons & links
   ===================================================================== */
.m-cta .elementor-button,.eicr-form button.wpforms-submit{position:relative;overflow:hidden;isolation:isolate}
.m-cta .elementor-button::after,.eicr-form button.wpforms-submit::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);translate:-130% 0}
@media (hover:hover){
  .m-cta .elementor-button:hover::after,.eicr-form button.wpforms-submit:hover::after{animation:m-sheen .75s var(--m-ease)}
}
.m-cta .elementor-button:active,.m-press .elementor-button:active{translate:0 3px;box-shadow:0 0 0 #B8920F!important;transition:translate .08s,box-shadow .08s}
.m-press .elementor-button:active{box-shadow:0 0 0 #000!important}
.eicr-form button.wpforms-submit:active{translate:0 3px;box-shadow:0 0 0 #B8920F!important}
.m-magnetic{transition:translate .45s var(--m-out)}
.m-ring:hover .elementor-heading-title{display:inline-block;animation:m-ring .6s var(--m-ease)}

/* =====================================================================
   4. Header, navigation, dock
   ===================================================================== */
.hdr-logo img{transform-origin:50% 14%}
.m-js .hdr-logo img{animation:m-swing-once 1.1s var(--m-ease) .25s backwards}
@media (hover:hover){.hdr-logo:hover img{animation:m-swing-once .9s var(--m-ease)}}
.hz{transform-origin:50% 0;transition:scale .4s var(--m-out)}
.hdr-root{transition:box-shadow .4s var(--m-out)}
.m-scrolled .hz{scale:1 .62}
.m-scrolled .hdr-root{box-shadow:0 14px 30px -18px rgba(0,0,0,.65)}
@media (min-width:1025px){
  .hdr-nav .xpro-elementor-horizontal-navbar-nav>li>a::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:3px;background:var(--e-global-color-secondary);
    transform-origin:0 50%;scale:0 1;opacity:.5;transition:scale .35s var(--m-out),opacity .35s}
  .hdr-nav .xpro-elementor-horizontal-navbar-nav>li>a:hover::after,.hdr-nav .xpro-elementor-horizontal-navbar-nav>li>a:focus-visible::after{scale:1 1}
  .hdr-nav .xpro-elementor-horizontal-navbar-nav>li.current-menu-item>a::after,body.single-post .hdr-nav li.menu-blogs>a::after{scale:1 1;opacity:1}
  .m-js .hdr-nav li.current-menu-item>a::after,.m-js.single-post .hdr-nav li.menu-blogs>a::after,.m-js body.single-post .hdr-nav li.menu-blogs>a::after{animation:m-grow-x .7s var(--m-out) .55s backwards}
}
/* mobile menu panel: links slide in one after another */
.xpro-elementor-horizontal-navbar-wrapper.active .xpro-elementor-horizontal-navbar-nav>li{animation:m-slide-in .5s var(--m-out) backwards}
.xpro-elementor-horizontal-navbar-wrapper.active .xpro-elementor-horizontal-navbar-nav>li:nth-child(1){animation-delay:.12s}
.xpro-elementor-horizontal-navbar-wrapper.active .xpro-elementor-horizontal-navbar-nav>li:nth-child(2){animation-delay:.18s}
.xpro-elementor-horizontal-navbar-wrapper.active .xpro-elementor-horizontal-navbar-nav>li:nth-child(3){animation-delay:.24s}
.xpro-elementor-horizontal-navbar-wrapper.active .xpro-elementor-horizontal-navbar-nav>li:nth-child(4){animation-delay:.30s}
.m-js .dock{animation:m-slide-up .7s var(--m-out) .9s backwards}
.dock .elementor-button{transition:scale .12s}
.dock .elementor-button:active{scale:.96}

/* =====================================================================
   5. Hero (Home): power-on, kicker, headline, chips, rail, clock
   ===================================================================== */
.m-js .hero-sec.in::before,.m-js .sub-hero.in::before{animation:m-power 1.2s linear backwards}
.m-js .hero-sec:not(.in) .kick{opacity:0}
.m-js .hero-sec.in .kick{animation:m-wipe .7s var(--m-ease) .15s backwards}
.m-js .hero-sec.in .blink{animation:eicrBlink 1.6s 1s infinite}
.hero-h1{--d:.25s;--ws:55ms}
.m-js .hero-h1.m-split:not(.in) .codes>span{opacity:0}
.m-js .hero-h1.m-split.in .codes>span{animation:m-stamp .55s var(--m-snap) backwards}
.m-js .hero-h1.m-split.in .codes>span:nth-child(1){animation-delay:.85s}
.m-js .hero-h1.m-split.in .codes>span:nth-child(2){animation-delay:.97s}
.m-js .hero-h1.m-split.in .codes>span:nth-child(3){animation-delay:1.09s}
.m-js .hero-sec:not(.in) :is(.hero-lede,.hero-cta>*,.hs){opacity:0}
.m-js .hero-sec.in .hero-lede{animation:m-rise 1s var(--m-out) .7s backwards}
.m-js .hero-sec.in .hero-cta>*{animation:m-rise .8s var(--m-out) backwards}
.m-js .hero-sec.in .hero-cta>:nth-child(1){animation-delay:.85s}
.m-js .hero-sec.in .hero-cta>:nth-child(2){animation-delay:.95s}
.m-js .hero-sec.in .hero-cta .m-cta .elementor-button::after{animation:m-sheen 1s var(--m-ease) 1.7s}
.m-js .hero-sec.in .hs{animation:m-rise .8s var(--m-out) backwards}
.m-js .hero-sec.in .hs:nth-child(1){animation-delay:1s}
.m-js .hero-sec.in .hs:nth-child(2){animation-delay:1.08s}
.m-js .hero-sec.in .hs:nth-child(3){animation-delay:1.16s}

/* rail: the bar extends, tags drop onto it and settle into their swing, the clock slams down */
.rail-bar{transform-origin:0 50%}
.m-js .hero-sec:not(.in) :is(.rail-bar,.htag,.clock){opacity:0}
.m-js .hero-sec.in .rail-bar{animation:m-grow-x .8s var(--m-out) .3s backwards}
.m-js .hero-sec.in .htag.t1{animation:m-drop .95s var(--m-ease) .6s backwards,eicrSwing 5s ease-in-out -1s infinite}
.m-js .hero-sec.in .htag.t2{animation:m-drop .95s var(--m-ease) .78s backwards,eicrSwing 6s ease-in-out -2.6s infinite}
.m-js .hero-sec.in .htag.t3{animation:m-drop .95s var(--m-ease) .96s backwards,eicrSwing 5.6s ease-in-out -.2s infinite}
.m-js .hero-sec.in .clock{animation:m-slam .65s var(--m-snap) 1.45s backwards}
/* depth: tags follow the cursor at different depths (desktop, set by motion.js) */
.hero-sec .htag,.hero-sec .clock,.hero-sec .rail-bar{transition:translate .9s var(--m-out)}
.hero-sec.m-depth .htag.t1{translate:calc(var(--px,0) * 10px) calc(var(--py,0) * 6px)}
.hero-sec.m-depth .htag.t2{translate:calc(var(--px,0) * 18px) calc(var(--py,0) * 10px)}
.hero-sec.m-depth .htag.t3{translate:calc(var(--px,0) * 7px) calc(var(--py,0) * 4px)}
.hero-sec.m-depth .clock{translate:calc(var(--px,0) * 26px) calc(var(--py,0) * 16px)}
.hero-sec.m-depth .rail-bar{translate:calc(var(--px,0) * 4px) 0}
/* nothing loops while the hero is off screen */
.m-off .htag,.m-off .blink{animation-play-state:paused!important}

/* =====================================================================
   6. Inner page heroes, about/contact/blog
   ===================================================================== */
.sub-hero .eicr-h2{--d:.2s;--ws:50ms}
.m-js .sub-hero:not(.in) :is(.sub-lede,.sub-cta>*,.post-back){opacity:0}
.m-js .sub-hero.in .sub-lede{animation:m-rise 1s var(--m-out) .65s backwards}
.m-js .sub-hero.in .sub-cta>*{animation:m-rise .8s var(--m-out) backwards}
.m-js .sub-hero.in .sub-cta>:nth-child(1){animation-delay:.8s}
.m-js .sub-hero.in .sub-cta>:nth-child(2){animation-delay:.9s}
.m-js .sub-hero.in .post-back{animation:m-wipe .7s var(--m-ease) .1s backwards}

/* =====================================================================
   7. Triage tool
   ===================================================================== */
.obs-list{--st:38ms}
.m-js .ticket.rv:not(.in){opacity:0}
.m-js .ticket.rv.in{animation:m-print 1.1s var(--m-ease) .2s backwards}
.ob .bx svg{clip-path:inset(0 100% 0 0);transition:clip-path .28s var(--m-ease) .05s,opacity .15s}
.ob.is-checked .bx svg{clip-path:inset(0 0 0 0)}
.ob.is-checked .bx{animation:m-pop .35s var(--m-snap)}
.tk-chip.new{animation:m-pop .4s var(--m-snap) backwards}
.tk-chip.new:nth-child(2){animation-delay:.06s}.tk-chip.new:nth-child(3){animation-delay:.12s}.tk-chip.new:nth-child(4){animation-delay:.18s}
#dlD.m-bump .elementor-heading-title,#dlV.m-bump .elementor-heading-title{animation:m-pop .4s var(--m-snap)}
/* filters: a pill slides to the active filter */
.flt{position:relative;isolation:isolate}
.flt-pill{position:absolute;left:0;top:0;z-index:-1;border-radius:6px;background:var(--e-global-color-primary);pointer-events:none;
  transition:translate .45s var(--m-out),width .45s var(--m-out),height .45s var(--m-out)}
.flt.has-pill .flt-btn.is-on .elementor-button{background:transparent!important;border-color:var(--e-global-color-primary)!important}
.ob:not([hidden]).m-show{animation:m-rise .45s var(--m-out) backwards;--m-dist:8px;animation-delay:calc(var(--i,0) * 30ms)}
/* quote form fields light up after "Get a fixed quote for this" fills them */
.eicr-form .m-flash{animation:m-flash 1.4s var(--m-ease) 2}

/* =====================================================================
   8. Code board
   ===================================================================== */
.kb{--st:95ms}
.m-js .kb.rv.in .kc.m-seq{animation-name:m-pin;animation-timing-function:var(--m-snap);animation-duration:.6s}
.m-js .kb.rv.in .lane-c1 .lane-code .elementor-heading-title{animation:m-flicker .9s linear .55s}
@media (hover:hover){
  .lane .act .arw{display:inline-block;transition:translate .35s var(--m-out)}
  .lane:hover .act .arw{translate:5px 0}
}

/* =====================================================================
   9. Path to a pass: steps and paperwork
   ===================================================================== */
.steps{--st:120ms}
.e-con.step::after{transform-origin:50% 0}
.m-js .steps.rv:not(.in) .step-num{opacity:0}
.m-js .steps.rv.in .step-num{animation:m-pop .55s var(--m-snap) backwards;animation-delay:calc(var(--i,0) * 120ms + .15s)}
.m-js .steps.rv.in .step::after{animation:m-grow-y .7s var(--m-out) backwards;animation-delay:calc(var(--i,0) * 120ms + .35s)}
.m-js .steps.rv.in .step:last-child .step-num{--m-ring:rgba(44,154,98,.6);animation:m-stamp .6s var(--m-snap) backwards,m-ripple 1s var(--m-ease) forwards;animation-delay:.75s,1.3s}
@supports (animation-timeline:view()){
  /* the connector draws as the step scrolls through the viewport */
  .m-js .steps.rv.in .step::after{animation:m-grow-y linear both;animation-timeline:view();animation-range:entry 70% cover 55%;animation-delay:0s}
}
.papers{--st:150ms}
.m-js .papers.rv.in>.pp{animation:m-deal .85s var(--m-out) backwards;animation-delay:calc(var(--i,0) * 150ms + .1s)}
.pp .ln{transform-origin:0 50%}
.m-js .papers.rv:not(.in) :is(.ln,.seal){opacity:0}
.m-js .papers.rv.in .ln{animation:m-grow-x .55s var(--m-out) backwards;animation-delay:calc(var(--i,0) * 150ms + .55s + var(--j,0) * 70ms)}
.m-js .papers.rv.in .seal{--m-ring:rgba(44,154,98,.45);animation:m-stamp .55s var(--m-snap) backwards,m-ripple .9s var(--m-ease);animation-delay:calc(var(--i,0) * 150ms + 1s),calc(var(--i,0) * 150ms + 1.3s)}

/* =====================================================================
   10. Price list, advice, audience, FAQ
   ===================================================================== */
.plist{--st:42ms;--m-dist:16px}
.e-con.pi{isolation:isolate}
.e-con.pi::before{content:"";display:block;position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:1;mix-blend-mode:normal;
  background:var(--pc,var(--e-global-color-c2));scale:0 1;transform-origin:0 50%;transition:scale .5s var(--m-out);
  -webkit-mask:linear-gradient(90deg,rgba(0,0,0,.14),rgba(0,0,0,.03));mask:linear-gradient(90deg,rgba(0,0,0,.14),rgba(0,0,0,.03))}
.pi-c1{--pc:var(--e-global-color-accent)}.pi-c2{--pc:var(--e-global-color-c2)}.pi-fi{--pc:var(--e-global-color-fi)}.pi-c3{--pc:var(--e-global-color-c3)}
.pi .pi-price{transition:translate .4s var(--m-out)}
@media (hover:hover){
  .e-con.pi:hover::before{scale:1 1}
  .pi:hover .pi-price{translate:-4px 0}
}

.adv-grid{--st:160ms}
.m-js .rv.in .adv-glyph{animation:m-stamp .5s var(--m-snap) backwards;animation-delay:calc(var(--i,0) * 160ms + .3s)}
.m-js .rv.in .advc-bad .adv-glyph{animation:m-stamp .5s var(--m-snap) backwards,m-shake .6s var(--m-ease);animation-delay:calc(var(--i,0) * 160ms + .3s),calc(var(--i,0) * 160ms + .9s)}

.aud{--st:110ms}
.m-spot{isolation:isolate}
.e-con.m-spot::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,210,63,.13),transparent 70%);opacity:0;transition:opacity .35s}
@media (hover:hover){
  .e-con.m-spot:hover::after{opacity:1}
  .m-spot{transition:border-color .35s}
  .m-spot:hover{border-color:rgba(255,210,63,.35)!important}
  .m-spot .elementor-icon-list-icon{transition:translate .35s var(--m-out)}
  .m-spot:hover .elementor-icon-list-item:nth-child(1) .elementor-icon-list-icon{translate:4px 0}
  .m-spot:hover .elementor-icon-list-item:nth-child(2) .elementor-icon-list-icon{translate:4px 0;transition-delay:.05s}
  .m-spot:hover .elementor-icon-list-item:nth-child(3) .elementor-icon-list-icon{translate:4px 0;transition-delay:.1s}
}

.m-js .faqs.rv:not(.in) details{opacity:0}
.m-js .faqs.rv.in details{animation:m-rise .7s var(--m-out) backwards;--m-dist:14px;animation-delay:calc(var(--i,0) * 55ms + .1s)}
.faqs details[open]>.e-con{animation:m-rise .45s var(--m-out);--m-dist:-6px}

/* =====================================================================
   11. Quote / contact form
   ===================================================================== */
.quote-layout{perspective:1400px}
.m-js .qcard.rv:not(.in){opacity:0}
.m-js .qcard.rv.in{animation:m-tilt 1.1s var(--m-out) .15s backwards;transform-origin:50% 100%}
.eicr-form .wpforms-confirmation-container-full{animation:m-stamp .6s var(--m-snap)}
.eicr-form .cnt input{transition:scale .2s}

/* =====================================================================
   12. Blog cards, blog post
   ===================================================================== */
.m-js .blog-grid.rv:not(.in) .xpro-post-grid-item{opacity:0}
.m-js .blog-grid.rv.in .xpro-post-grid-item{animation:m-rise .85s var(--m-out) backwards;animation-delay:calc(var(--i,0) * 90ms)}
.blog-grid .xpro-post-grid-item{transition:translate .45s var(--m-out),box-shadow .45s var(--m-out)}
.blog-grid .xpro-post-grid-image{overflow:hidden}
.blog-grid .xpro-post-grid-image img{transition:scale .9s var(--m-out)}
.blog-grid .xpro-post-grid-title{background:linear-gradient(transparent 62%,rgba(255,210,63,.75) 62% 92%,transparent 92%) no-repeat 0 0/0% 100%;transition:background-size .55s var(--m-ease);display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.blog-grid .xpro-post-grid-content>a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.4em;margin-bottom:8px}
.blog-grid .xpro-post-grid-content>a .xpro-post-grid-title{min-height:0;-webkit-line-clamp:unset}
@media (hover:hover){
  .blog-grid .xpro-post-grid-item:hover{translate:0 -5px;box-shadow:0 2px 3px rgba(27,29,32,.08),0 26px 40px -20px rgba(27,29,32,.45)!important}
  .blog-grid .xpro-post-grid-item:hover .xpro-post-grid-image img{scale:1.06}
  .blog-grid .xpro-post-grid-item:hover .xpro-post-grid-title{background-size:100% 100%}
}
.blog-grid .xpro-post-grid-item:focus-within .xpro-post-grid-title{background-size:100% 100%}

.m-js .post-hero-img:not(.in){opacity:0}
.m-js .post-hero-img.in img{animation:m-unmask 1.2s var(--m-ease) .2s backwards,m-settle 1.8s var(--m-out) .2s backwards}
.m-js .post-hero-img.in{animation:m-fade .2s linear backwards}

/* =====================================================================
   13. Scroll-linked depth (browsers with scroll-driven animations, desktop)
   ===================================================================== */
@supports (animation-timeline:view()){
  @media (min-width:1025px){
    .m-js .hero-sec.in .rail{animation:m-lift-away linear both;animation-timeline:view();animation-range:exit 0% exit 90%}
    .m-js .hero-sec.in .hero-copy{animation:m-drift linear both;animation-timeline:view();animation-range:exit 15% exit 100%}
  }
  /* reading progress on blog posts, drawn under the header stripe */
  .single-post .hz{position:relative}
  .single-post .hz::after{content:"";position:absolute;left:0;right:0;top:100%;height:3px;background:var(--e-global-color-secondary);
    transform-origin:0 50%;animation:m-progress linear both;animation-timeline:scroll(root)}
}

} /* end prefers-reduced-motion: no-preference */