/* Flexipack Motion, part 2 (see motion2.js) */

/* green word underline */
.fp-u{background-image:linear-gradient(#7FBE1B,#7FBE1B);background-repeat:no-repeat;background-position:0 94%;background-size:calc(var(--u,0) * 100%) .13em;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.02em}

/* section tracker (desktop) */
.fp-trk{position:fixed;right:12px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:2px;opacity:0;visibility:hidden;transition:opacity .35s cubic-bezier(.22,.61,.36,1),visibility .35s}
.fp-trk.fp-show{opacity:1;visibility:visible}
.fp-trk-cur{writing-mode:vertical-rl;transform:rotate(180deg);font-family:inherit;font-weight:600;font-size:10px;line-height:1;letter-spacing:.18em;text-transform:uppercase;color:#4E7A0C;margin:0 1px 12px 0;white-space:nowrap}
.fp-trk-b{position:relative;display:flex;flex-direction:row-reverse;align-items:center;gap:10px;border:0!important;background:none!important;padding:5px 0!important;margin:0;cursor:pointer;color:#242829;box-shadow:none!important;min-height:0;line-height:1}
.fp-trk-b i{display:block;height:2px;width:12px;background:#C9CDCE;border-radius:2px;transition:width .35s cubic-bezier(.22,.61,.36,1),background-color .35s}
.fp-trk-b span{font-family:inherit;font-weight:600;font-size:11px;line-height:1;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:#242829;background:#FFFFFF;border:1px solid #D9DCDC;border-radius:999px;padding:5px 10px;position:absolute;right:calc(100% + 10px);top:50%;opacity:0;transform:translate(6px,-50%);transition:opacity .3s,transform .3s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.fp-trk-b.fp-act i{width:24px;background:#7FBE1B}
.fp-trk-b:hover span,.fp-trk-b:focus-visible span{opacity:1;transform:translate(0,-50%)}
.fp-trk-b:focus-visible{outline:2px solid #7FBE1B;outline-offset:2px}
@media (max-width:1024px){.fp-trk{display:none}}

/* mobile/tablet menu: the dropdown starts exactly at the header's bottom edge (--fp-hdr-h is kept live by motion.js) */
@media (max-width:1024px){.fp-header .elementor-nav-menu--dropdown.elementor-nav-menu__container{position:fixed!important;top:var(--fp-hdr-h,47px)!important;left:0!important;right:0!important;width:100%!important;margin-top:0!important}}

/* desktop Products dropdown (1 Oct): soft shadow, green top line, tighter rows */
@media (min-width:1025px){.fp-header .elementor-nav-menu--main .sub-menu{min-width:220px!important;border-top:2px solid #7FBE1B;box-shadow:0 14px 32px rgba(36,40,41,.14)}.fp-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item{padding:13px 22px!important;font-size:15px!important;letter-spacing:.2px}}

/* product-name band */
.fp-band{overflow:hidden;border-top:4px solid #7FBE1B;border-bottom:4px solid #7FBE1B}
.fp-band .fp-band-row{width:max-content!important;max-width:none!important;flex-wrap:nowrap!important;will-change:transform;padding-top:16px!important;padding-bottom:16px!important}
@media(max-width:767px){.fp-band .fp-band-row{padding-top:12px!important;padding-bottom:12px!important}}
.fp-band .fp-band-row > .elementor-widget{flex:none!important;width:auto!important;max-width:none!important;margin:0!important}
.fp-band .fp-band-row .elementor-heading-title{display:inline-flex;align-items:center;gap:.5em;padding-right:.5em;white-space:nowrap;font-size:clamp(16px,1.5vw,22px)!important;font-weight:700!important;line-height:1.12!important;letter-spacing:-.02em!important;text-transform:none!important;color:#242829!important}
.fp-band .fp-band-row .elementor-heading-title::after{content:"";width:.22em;height:.22em;border-radius:50%;background:#7FBE1B;display:inline-block;flex:none}
.fp-band .fp-band-outline .elementor-heading-title{color:#7FBE1B!important;-webkit-text-stroke:0}
.fp-band .fp-band-outline .elementor-heading-title::after{background:#7FBE1B;border:0}

/* About Us: image shrinks into place (desktop pin) */
.fp-shrink-fly{display:none;position:absolute;z-index:3;left:0;top:0;overflow:hidden;pointer-events:none}
.fp-shrink-fly .fp-shrink-pic{width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 50%;max-width:none}
.fp-shrink-fly .fp-shrink-veil{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(255,255,255,.8);pointer-events:none}
.fp-shrink-fly .fp-shrink-logo{position:absolute;left:50%;top:50%;width:34%;max-width:560px;height:auto;transform:translate(-50%,-50%);pointer-events:none}
.fp-shrink.fp-shrink-pin{height:185vh;padding-top:0!important;padding-bottom:0!important;justify-content:flex-start!important}
.fp-shrink.fp-shrink-pin > .e-con:first-child{position:sticky;top:var(--fp-hdr-h,54px);height:calc(100vh - var(--fp-hdr-h,54px));justify-content:center!important;overflow:visible;flex-shrink:0}
.fp-shrink.fp-shrink-pin > .e-con:first-child > .e-con-inner{justify-content:center!important}
.fp-shrink.fp-shrink-pin .fp-shrink-slot,.fp-shrink.fp-shrink-pin .fp-shrink-slot img{transition:none!important}
.fp-shrink-slot.fp-shrink-hide img{visibility:hidden}
.fp-shrink.fp-shrink-pin > .e-con:first-child .e-con{transition-property:background,border,border-radius,box-shadow!important}
.fp-shrink .fp-shrink-slot img{will-change:scale}

/* Why Choose: fixed left column with film roll, list lights up in turn (desktop) */
@media (min-width:1025px){
  .fp-roll-grid .fp-roll-head{position:sticky;top:calc(var(--fp-hdr-h,54px) + 32px);height:auto;padding-bottom:0!important;align-self:flex-start;flex-wrap:nowrap!important}
  .fp-roll-grid .fp-roller{position:relative;flex:none!important;min-height:200px;margin-top:24px}
  .fp-roll-grid .fp-roller > .elementor-widget{transition:none!important;position:absolute!important;left:0;top:0;margin:0!important;max-width:none!important}
  .fp-roll-grid .fp-r-sheet{clip-path:inset(0 0 100% 0);will-change:clip-path}
  .fp-roll-grid .fp-r-sheet img{width:100%!important;height:100%!important;max-width:none!important;object-fit:fill;display:block}
  .fp-roll-grid .fp-r-roll{z-index:2;will-change:transform}
  .fp-roll-grid .fp-r-roll img{width:100%!important;height:auto!important;max-width:none!important;display:block}
  .fp-roll-grid .fp-roll-list{gap:12vh!important;padding-top:10vh!important;padding-bottom:30vh!important}
}

/* Why Choose: green line segments between the item icons (desktop) */
.fp-roll-seg{display:none;position:absolute;width:2px;background:rgba(127,190,27,.22);border-radius:2px;pointer-events:none;overflow:hidden}
.fp-roll-seg span{position:absolute;left:0;top:0;right:0;bottom:0;background:#7FBE1B;transform-origin:50% 0;transform:scaleY(0)}
@media (min-width:1025px){.fp-roll-seg{display:block}}

/* About 4Cs: the pinned block fills the screen under the header so its content sits vertically centred (29 Sep) */
@media(min-width:768px){.fp-4cs.fp-stack > .e-con{padding-block:80px 80px!important}}
@media(min-width:1025px){.fp-4cs.fp-stack > .e-con{min-height:calc(100vh - var(--fp-hdr-h,80px))}}
/* About 4Cs on tablet (stacked layout): cards use the full content width and are only as tall as their content */
@media(min-width:768px) and (max-width:1024px){.fp-4cs.fp-stack .fp-stack-stage{max-width:none}.fp-4cs.fp-stack .fp-stack-card{min-height:0}}

/* About 4Cs title list icons (29 Sep) */
.fp-4c-list button{align-items:center}
.fp-4c-list .fp-4c-ico{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#7FBE1B;display:inline-flex;align-items:center;justify-content:center;margin-right:12px;transition:opacity .3s ease}
.fp-4c-list .fp-4c-ico svg{width:14px;height:14px;fill:#FFFFFF}
.fp-4c-list .fp-4c-ico i{font-size:14px;color:#FFFFFF}
.fp-4c-list button:not(.is-active) .fp-4c-ico{opacity:.55}

/* CTA bands: the dark overlay reaches 2px past every edge so no sliver of the photo shows where the zoom layer and the overlay
   are rasterised separately (seen on tablet); the band clips the overflow */
.fp-cta{overflow:hidden}
.fp-cta::before{top:-2px!important;left:-2px!important;width:calc(100% + 4px)!important;height:calc(100% + 4px)!important}

/* footer overlaps the band above it by 2px: at fractional section heights (tablet) the boundary pixel row was left half-covered and the
   light page background showed through as a thin bright line between the dark CTA band and the footer */
.elementor-location-footer .fp-footer{margin-top:-2px}

/* phone header is taller since 29 Sep (14px top / 14px bottom padding, ~63px): the first section slides up under it by that much */
@media(max-width:767px){:root{--fp-hdr0:63px}}

/* phones: no scroll fade-out on the About Flexipack (About) and intro (Quality Assurance) sections */
@media(max-width:767px){.fp-exit > .e-con,.fp-exit > .e-con-inner > .e-con{opacity:1!important}}

/* QA certificate flip */
.fp-flip{perspective:1100px;cursor:pointer;background-color:transparent!important;border-color:transparent!important;transition:none!important;-webkit-tap-highlight-color:transparent}
.fp-flip-in{position:relative;flex:1 1 auto;display:flex;flex-direction:column;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.22,.61,.36,1)}
.fp-face{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.fp-front{position:relative;flex:1 1 auto;display:flex;flex-direction:column;background:#FFFFFF;border:1px dashed rgba(36,40,41,.22)}
.fp-front > .e-con:last-child{flex:1 1 auto;justify-content:flex-end}
.fp-front .elementor-widget-text-editor{display:none}
.fp-back{position:absolute;inset:0;background:#242829;color:#FFFFFF;transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:26px 24px}
.fp-back small{font-family:inherit;font-weight:600;font-size:12px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:#7FBE1B}
.fp-back p{margin:0;font-size:16px;line-height:1.5;color:#E5E8E6}
.fp-flip-hint{position:absolute;right:14px;top:14px;width:30px;height:30px;border-radius:50%;border:1px solid #D9DCDC;display:grid;place-items:center;color:#63676A;z-index:2}
.fp-flip-hint svg{width:15px;height:15px}
.fp-flip:focus-visible{outline:2px solid #7FBE1B;outline-offset:3px}
@media (hover:hover){.fp-flip:hover .fp-flip-in{transform:rotateY(180deg)}}
.fp-flip.fp-flipped .fp-flip-in{transform:rotateY(180deg)}

@media (prefers-reduced-motion:reduce){
  .fp-flip-in,.fp-roll-list > .e-con,.fp-trk,.fp-trk-b i,.fp-trk-b span{transition:none!important}
}