*:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert}*,*::before,*::after{box-sizing:border-box}a,button{cursor:revert}ol,ul,menu{list-style:none}img{max-width:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}::placeholder{color:unset}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable="false"])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable="true"]){-webkit-user-drag:element}

.carousel{position:relative;box-sizing:border-box}.carousel *,.carousel *:before,.carousel *:after{box-sizing:inherit}.carousel.is-draggable{cursor:move;cursor:grab}.carousel.is-dragging{cursor:move;cursor:grabbing}.carousel__viewport{position:relative;overflow:hidden;max-width:100%;max-height:100%}.carousel__track{display:flex}.carousel__slide{flex:0 0 auto;width:var(--carousel-slide-width, 60%);max-width:100%;padding:1rem;position:relative;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.has-dots{margin-bottom:calc(0.5rem + 22px)}.carousel__dots{margin:0 auto;padding:0;position:absolute;top:calc(100% + 0.5rem);left:0;right:0;display:flex;justify-content:center;list-style:none;user-select:none}.carousel__dots .carousel__dot{margin:0;padding:0;display:block;position:relative;width:22px;height:22px;cursor:pointer}.carousel__dots .carousel__dot:after{content:"";width:8px;height:8px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:currentColor;opacity:.25;transition:opacity .15s ease-in-out}.carousel__dots .carousel__dot.is-selected:after{opacity:1}.carousel__button{width:var(--carousel-button-width, 48px);height:var(--carousel-button-height, 48px);padding:0;border:0;display:flex;justify-content:center;align-items:center;pointer-events:all;cursor:pointer;color:var(--carousel-button-color, currentColor);background:var(--carousel-button-bg, transparent);border-radius:var(--carousel-button-border-radius, 50%);box-shadow:var(--carousel-button-shadow, none);transition:opacity .15s ease}.carousel__button.is-prev,.carousel__button.is-next{position:absolute;top:50%;transform:translateY(-50%)}.carousel__button.is-prev{left:10px}.carousel__button.is-next{right:10px}.carousel__button[disabled]{cursor:default;opacity:.3}.carousel__button svg{width:var(--carousel-button-svg-width, 50%);height:var(--carousel-button-svg-height, 50%);fill:none;stroke:currentColor;stroke-width:var(--carousel-button-svg-stroke-width, 1.5);stroke-linejoin:bevel;stroke-linecap:round;filter:var(--carousel-button-svg-filter, none);pointer-events:none}html.with-fancybox{scroll-behavior:auto}body.compensate-for-scrollbar{overflow:hidden !important;touch-action:none}.fancybox__container{position:fixed;top:0;left:0;bottom:0;right:0;direction:ltr;margin:0;padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);box-sizing:border-box;display:flex;flex-direction:column;color:var(--fancybox-color, #fff);-webkit-tap-highlight-color:rgba(0,0,0,0);overflow:hidden;z-index:1050;outline:none;transform-origin:top left;--carousel-button-width: 48px;--carousel-button-height: 48px;--carousel-button-svg-width: 24px;--carousel-button-svg-height: 24px;--carousel-button-svg-stroke-width: 2.5;--carousel-button-svg-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4))}.fancybox__container *,.fancybox__container *::before,.fancybox__container *::after{box-sizing:inherit}.fancybox__container :focus{outline:none}body:not(.is-using-mouse) .fancybox__container :focus{box-shadow:0 0 0 1px #fff,0 0 0 2px var(--fancybox-accent-color, rgba(1, 210, 232, 0.94))}@media all and (min-width: 1024px){.fancybox__container{--carousel-button-width:48px;--carousel-button-height:48px;--carousel-button-svg-width:27px;--carousel-button-svg-height:27px}}.fancybox__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:var(--fancybox-bg, rgba(24, 24, 27, 0.92))}.fancybox__carousel{position:relative;flex:1 1 auto;min-height:0;height:100%;z-index:10}.fancybox__carousel.has-dots{margin-bottom:calc(0.5rem + 22px)}.fancybox__viewport{position:relative;width:100%;height:100%;overflow:visible;cursor:default}.fancybox__track{display:flex;height:100%}.fancybox__slide{flex:0 0 auto;width:100%;max-width:100%;margin:0;padding:48px 8px 8px 8px;position:relative;overscroll-behavior:contain;display:flex;flex-direction:column;outline:0;overflow:auto;--carousel-button-width: 36px;--carousel-button-height: 36px;--carousel-button-svg-width: 22px;--carousel-button-svg-height: 22px}.fancybox__slide::before,.fancybox__slide::after{content:"";flex:0 0 0;margin:auto}@media all and (min-width: 1024px){.fancybox__slide{padding:64px 100px}}.fancybox__content{margin:0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);padding:36px;color:var(--fancybox-content-color, #374151);background:var(--fancybox-content-bg, #fff);position:relative;align-self:center;display:flex;flex-direction:column;z-index:20}.fancybox__content :focus:not(.carousel__button.is-close){outline:thin dotted;box-shadow:none}.fancybox__caption{align-self:center;max-width:100%;margin:0;padding:1rem 0 0 0;line-height:1.375;color:var(--fancybox-color, currentColor);visibility:visible;cursor:auto;flex-shrink:0;overflow-wrap:anywhere}.is-loading .fancybox__caption{visibility:hidden}.fancybox__container>.carousel__dots{top:100%;color:var(--fancybox-color, #fff)}.fancybox__nav .carousel__button{z-index:40}.fancybox__nav .carousel__button.is-next{right:8px}@media all and (min-width: 1024px){.fancybox__nav .carousel__button.is-next{right:40px}}.fancybox__nav .carousel__button.is-prev{left:8px}@media all and (min-width: 1024px){.fancybox__nav .carousel__button.is-prev{left:40px}}.carousel__button.is-close{position:absolute;top:8px;right:8px;top:calc(env(safe-area-inset-top, 0px) + 8px);right:calc(env(safe-area-inset-right, 0px) + 8px);z-index:40}@media all and (min-width: 1024px){.carousel__button.is-close{right:40px}}.fancybox__content>.carousel__button.is-close{position:absolute;top:-40px;right:0;color:var(--fancybox-color, #fff)}.fancybox__no-click,.fancybox__no-click button{pointer-events:none}.fancybox__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:50px;height:50px;color:var(--fancybox-color, currentColor)}.fancybox__slide .fancybox__spinner{cursor:pointer;z-index:1053}.fancybox__spinner svg{animation:fancybox-rotate 2s linear infinite;transform-origin:center center;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;height:100%}.fancybox__spinner svg circle{fill:none;stroke-width:2.75;stroke-miterlimit:10;stroke-dasharray:1,200;stroke-dashoffset:0;animation:fancybox-dash 1.5s ease-in-out infinite;stroke-linecap:round;stroke:currentColor}@keyframes fancybox-rotate{100%{transform:rotate(360deg)}}@keyframes fancybox-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.fancybox__backdrop,.fancybox__caption,.fancybox__nav,.carousel__dots,.carousel__button.is-close{opacity:var(--fancybox-opacity, 1)}.fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop,.fancybox__container.is-animated[aria-hidden=false] .fancybox__caption,.fancybox__container.is-animated[aria-hidden=false] .fancybox__nav,.fancybox__container.is-animated[aria-hidden=false] .carousel__dots,.fancybox__container.is-animated[aria-hidden=false] .carousel__button.is-close{animation:.15s ease backwards fancybox-fadeIn}.fancybox__container.is-animated.is-closing .fancybox__backdrop,.fancybox__container.is-animated.is-closing .fancybox__caption,.fancybox__container.is-animated.is-closing .fancybox__nav,.fancybox__container.is-animated.is-closing .carousel__dots,.fancybox__container.is-animated.is-closing .carousel__button.is-close{animation:.15s ease both fancybox-fadeOut}.fancybox-fadeIn{animation:.15s ease both fancybox-fadeIn}.fancybox-fadeOut{animation:.1s ease both fancybox-fadeOut}.fancybox-zoomInUp{animation:.2s ease both fancybox-zoomInUp}.fancybox-zoomOutDown{animation:.15s ease both fancybox-zoomOutDown}.fancybox-throwOutUp{animation:.15s ease both fancybox-throwOutUp}.fancybox-throwOutDown{animation:.15s ease both fancybox-throwOutDown}@keyframes fancybox-fadeIn{from{opacity:0}to{opacity:1}}@keyframes fancybox-fadeOut{to{opacity:0}}@keyframes fancybox-zoomInUp{from{transform:scale(0.97) translate3d(0, 16px, 0);opacity:0}to{transform:scale(1) translate3d(0, 0, 0);opacity:1}}@keyframes fancybox-zoomOutDown{to{transform:scale(0.97) translate3d(0, 16px, 0);opacity:0}}@keyframes fancybox-throwOutUp{to{transform:translate3d(0, -30%, 0);opacity:0}}@keyframes fancybox-throwOutDown{to{transform:translate3d(0, 30%, 0);opacity:0}}.fancybox__carousel .carousel__slide{scrollbar-width:thin;scrollbar-color:#ccc rgba(255,255,255,.1)}.fancybox__carousel .carousel__slide::-webkit-scrollbar{width:8px;height:8px}.fancybox__carousel .carousel__slide::-webkit-scrollbar-track{background-color:rgba(255,255,255,.1)}.fancybox__carousel .carousel__slide::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:2px;box-shadow:inset 0 0 4px rgba(0,0,0,.2)}.fancybox__carousel.is-draggable .fancybox__slide,.fancybox__carousel.is-draggable .fancybox__slide .fancybox__content{cursor:move;cursor:grab}.fancybox__carousel.is-dragging .fancybox__slide,.fancybox__carousel.is-dragging .fancybox__slide .fancybox__content{cursor:move;cursor:grabbing}.fancybox__carousel .fancybox__slide .fancybox__content{cursor:auto}.fancybox__carousel .fancybox__slide.can-zoom_in .fancybox__content{cursor:zoom-in}.fancybox__carousel .fancybox__slide.can-zoom_out .fancybox__content{cursor:zoom-out}.fancybox__carousel .fancybox__slide.is-draggable .fancybox__content{cursor:move;cursor:grab}.fancybox__carousel .fancybox__slide.is-dragging .fancybox__content{cursor:move;cursor:grabbing}.fancybox__image{transform-origin:0 0;user-select:none;transition:none}.has-image .fancybox__content{padding:0;background:rgba(0,0,0,0);min-height:1px}.is-closing .has-image .fancybox__content{overflow:visible}.has-image[data-image-fit=contain]{overflow:visible;touch-action:none}.has-image[data-image-fit=contain] .fancybox__content{flex-direction:row;flex-wrap:wrap}.has-image[data-image-fit=contain] .fancybox__image{max-width:100%;max-height:100%;object-fit:contain}.has-image[data-image-fit=contain-w]{overflow-x:hidden;overflow-y:auto}.has-image[data-image-fit=contain-w] .fancybox__content{min-height:auto}.has-image[data-image-fit=contain-w] .fancybox__image{max-width:100%;height:auto}.has-image[data-image-fit=cover]{overflow:visible;touch-action:none}.has-image[data-image-fit=cover] .fancybox__content{width:100%;height:100%}.has-image[data-image-fit=cover] .fancybox__image{width:100%;height:100%;object-fit:cover}.fancybox__carousel .fancybox__slide.has-iframe .fancybox__content,.fancybox__carousel .fancybox__slide.has-map .fancybox__content,.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content,.fancybox__carousel .fancybox__slide.has-video .fancybox__content,.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content{max-width:100%;flex-shrink:1;min-height:1px;overflow:visible}.fancybox__carousel .fancybox__slide.has-iframe .fancybox__content,.fancybox__carousel .fancybox__slide.has-map .fancybox__content,.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content{width:100%;height:80%}.fancybox__carousel .fancybox__slide.has-video .fancybox__content,.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content{width:960px;height:540px;max-width:100%;max-height:100%}.fancybox__carousel .fancybox__slide.has-map .fancybox__content,.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content,.fancybox__carousel .fancybox__slide.has-video .fancybox__content,.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content{padding:0;background:rgba(24,24,27,.9);color:#fff}.fancybox__carousel .fancybox__slide.has-map .fancybox__content{background:#e5e3df}.fancybox__html5video,.fancybox__iframe{border:0;display:block;height:100%;width:100%;background:rgba(0,0,0,0)}.fancybox-placeholder{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.fancybox__thumbs{flex:0 0 auto;position:relative;padding:0px 3px;opacity:var(--fancybox-opacity, 1)}.fancybox__container.is-animated[aria-hidden=false] .fancybox__thumbs{animation:.15s ease-in backwards fancybox-fadeIn}.fancybox__container.is-animated.is-closing .fancybox__thumbs{opacity:0}.fancybox__thumbs .carousel__slide{flex:0 0 auto;width:var(--fancybox-thumbs-width, 96px);margin:0;padding:8px 3px;box-sizing:content-box;display:flex;align-items:center;justify-content:center;overflow:visible;cursor:pointer}.fancybox__thumbs .carousel__slide .fancybox__thumb::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-width:5px;border-style:solid;border-color:var(--fancybox-accent-color, rgba(34, 213, 233, 0.96));opacity:0;transition:opacity .15s ease;border-radius:var(--fancybox-thumbs-border-radius, 4px)}.fancybox__thumbs .carousel__slide.is-nav-selected .fancybox__thumb::after{opacity:.92}.fancybox__thumbs .carousel__slide>*{pointer-events:none;user-select:none}.fancybox__thumb{position:relative;width:100%;padding-top:calc(100%/(var(--fancybox-thumbs-ratio, 1.5)));background-size:cover;background-position:center center;background-color:rgba(255,255,255,.1);background-repeat:no-repeat;border-radius:var(--fancybox-thumbs-border-radius, 4px)}.fancybox__toolbar{position:absolute;top:0;right:0;left:0;z-index:20;background:linear-gradient(to top, hsla(0deg, 0%, 0%, 0) 0%, hsla(0deg, 0%, 0%, 0.006) 8.1%, hsla(0deg, 0%, 0%, 0.021) 15.5%, hsla(0deg, 0%, 0%, 0.046) 22.5%, hsla(0deg, 0%, 0%, 0.077) 29%, hsla(0deg, 0%, 0%, 0.114) 35.3%, hsla(0deg, 0%, 0%, 0.155) 41.2%, hsla(0deg, 0%, 0%, 0.198) 47.1%, hsla(0deg, 0%, 0%, 0.242) 52.9%, hsla(0deg, 0%, 0%, 0.285) 58.8%, hsla(0deg, 0%, 0%, 0.326) 64.7%, hsla(0deg, 0%, 0%, 0.363) 71%, hsla(0deg, 0%, 0%, 0.394) 77.5%, hsla(0deg, 0%, 0%, 0.419) 84.5%, hsla(0deg, 0%, 0%, 0.434) 91.9%, hsla(0deg, 0%, 0%, 0.44) 100%);padding:0;touch-action:none;display:flex;justify-content:space-between;--carousel-button-svg-width: 20px;--carousel-button-svg-height: 20px;opacity:var(--fancybox-opacity, 1);text-shadow:var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0, 0, 0, 0.4))}@media all and (min-width: 1024px){.fancybox__toolbar{padding:8px}}.fancybox__container.is-animated[aria-hidden=false] .fancybox__toolbar{animation:.15s ease-in backwards fancybox-fadeIn}.fancybox__container.is-animated.is-closing .fancybox__toolbar{opacity:0}.fancybox__toolbar__items{display:flex}.fancybox__toolbar__items--left{margin-right:auto}.fancybox__toolbar__items--center{position:absolute;left:50%;transform:translateX(-50%)}.fancybox__toolbar__items--right{margin-left:auto}@media(max-width: 640px){.fancybox__toolbar__items--center:not(:last-child){display:none}}.fancybox__counter{min-width:72px;padding:0 10px;line-height:var(--carousel-button-height, 48px);text-align:center;font-size:17px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased}.fancybox__progress{background:var(--fancybox-accent-color, rgba(34, 213, 233, 0.96));height:3px;left:0;position:absolute;right:0;top:0;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;z-index:30;user-select:none}.fancybox__container:fullscreen::backdrop{opacity:0}.fancybox__button--fullscreen g:nth-child(2){display:none}.fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(1){display:none}.fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(2){display:block}.fancybox__button--slideshow g:nth-child(2){display:none}.fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(1){display:none}.fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(2){display:block}

@media screen and (width < 768px) {[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="50"],body[data-aos-mobile-duration="50"] [data-aos-mobile]{transition-duration:50ms}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="50"],body[data-aos-mobile-delay="50"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="50"].aos-mobile-animate,body[data-aos-mobile-delay="50"] [data-aos-mobile].aos-mobile-animate{transition-delay:50ms}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="100"],body[data-aos-mobile-duration="100"] [data-aos-mobile]{transition-duration:.1s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="100"],body[data-aos-mobile-delay="100"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="100"].aos-mobile-animate,body[data-aos-mobile-delay="100"] [data-aos-mobile].aos-mobile-animate{transition-delay:.1s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="150"],body[data-aos-mobile-duration="150"] [data-aos-mobile]{transition-duration:.15s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="150"],body[data-aos-mobile-delay="150"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="150"].aos-mobile-animate,body[data-aos-mobile-delay="150"] [data-aos-mobile].aos-mobile-animate{transition-delay:.15s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="200"],body[data-aos-mobile-duration="200"] [data-aos-mobile]{transition-duration:.2s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="200"],body[data-aos-mobile-delay="200"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="200"].aos-mobile-animate,body[data-aos-mobile-delay="200"] [data-aos-mobile].aos-mobile-animate{transition-delay:.2s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="250"],body[data-aos-mobile-duration="250"] [data-aos-mobile]{transition-duration:.25s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="250"],body[data-aos-mobile-delay="250"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="250"].aos-mobile-animate,body[data-aos-mobile-delay="250"] [data-aos-mobile].aos-mobile-animate{transition-delay:.25s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="300"],body[data-aos-mobile-duration="300"] [data-aos-mobile]{transition-duration:.3s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="300"],body[data-aos-mobile-delay="300"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="300"].aos-mobile-animate,body[data-aos-mobile-delay="300"] [data-aos-mobile].aos-mobile-animate{transition-delay:.3s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="350"],body[data-aos-mobile-duration="350"] [data-aos-mobile]{transition-duration:.35s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="350"],body[data-aos-mobile-delay="350"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="350"].aos-mobile-animate,body[data-aos-mobile-delay="350"] [data-aos-mobile].aos-mobile-animate{transition-delay:.35s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="400"],body[data-aos-mobile-duration="400"] [data-aos-mobile]{transition-duration:.4s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="400"],body[data-aos-mobile-delay="400"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="400"].aos-mobile-animate,body[data-aos-mobile-delay="400"] [data-aos-mobile].aos-mobile-animate{transition-delay:.4s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="450"],body[data-aos-mobile-duration="450"] [data-aos-mobile]{transition-duration:.45s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="450"],body[data-aos-mobile-delay="450"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="450"].aos-mobile-animate,body[data-aos-mobile-delay="450"] [data-aos-mobile].aos-mobile-animate{transition-delay:.45s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="500"],body[data-aos-mobile-duration="500"] [data-aos-mobile]{transition-duration:.5s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="500"],body[data-aos-mobile-delay="500"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="500"].aos-mobile-animate,body[data-aos-mobile-delay="500"] [data-aos-mobile].aos-mobile-animate{transition-delay:.5s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="550"],body[data-aos-mobile-duration="550"] [data-aos-mobile]{transition-duration:.55s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="550"],body[data-aos-mobile-delay="550"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="550"].aos-mobile-animate,body[data-aos-mobile-delay="550"] [data-aos-mobile].aos-mobile-animate{transition-delay:.55s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="600"],body[data-aos-mobile-duration="600"] [data-aos-mobile]{transition-duration:.6s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="600"],body[data-aos-mobile-delay="600"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="600"].aos-mobile-animate,body[data-aos-mobile-delay="600"] [data-aos-mobile].aos-mobile-animate{transition-delay:.6s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="650"],body[data-aos-mobile-duration="650"] [data-aos-mobile]{transition-duration:.65s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="650"],body[data-aos-mobile-delay="650"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="650"].aos-mobile-animate,body[data-aos-mobile-delay="650"] [data-aos-mobile].aos-mobile-animate{transition-delay:.65s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="700"],body[data-aos-mobile-duration="700"] [data-aos-mobile]{transition-duration:.7s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="700"],body[data-aos-mobile-delay="700"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="700"].aos-mobile-animate,body[data-aos-mobile-delay="700"] [data-aos-mobile].aos-mobile-animate{transition-delay:.7s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="750"],body[data-aos-mobile-duration="750"] [data-aos-mobile]{transition-duration:.75s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="750"],body[data-aos-mobile-delay="750"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="750"].aos-mobile-animate,body[data-aos-mobile-delay="750"] [data-aos-mobile].aos-mobile-animate{transition-delay:.75s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="800"],body[data-aos-mobile-duration="800"] [data-aos-mobile]{transition-duration:.8s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="800"],body[data-aos-mobile-delay="800"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="800"].aos-mobile-animate,body[data-aos-mobile-delay="800"] [data-aos-mobile].aos-mobile-animate{transition-delay:.8s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="850"],body[data-aos-mobile-duration="850"] [data-aos-mobile]{transition-duration:.85s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="850"],body[data-aos-mobile-delay="850"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="850"].aos-mobile-animate,body[data-aos-mobile-delay="850"] [data-aos-mobile].aos-mobile-animate{transition-delay:.85s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="900"],body[data-aos-mobile-duration="900"] [data-aos-mobile]{transition-duration:.9s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="900"],body[data-aos-mobile-delay="900"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="900"].aos-mobile-animate,body[data-aos-mobile-delay="900"] [data-aos-mobile].aos-mobile-animate{transition-delay:.9s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="950"],body[data-aos-mobile-duration="950"] [data-aos-mobile]{transition-duration:.95s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="950"],body[data-aos-mobile-delay="950"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="950"].aos-mobile-animate,body[data-aos-mobile-delay="950"] [data-aos-mobile].aos-mobile-animate{transition-delay:.95s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="1000"],body[data-aos-mobile-duration="1000"] [data-aos-mobile]{transition-duration:1s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1000"],body[data-aos-mobile-delay="1000"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1000"].aos-mobile-animate,body[data-aos-mobile-delay="1000"] [data-aos-mobile].aos-mobile-animate{transition-delay:1s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="1050"],body[data-aos-mobile-duration="1050"] [data-aos-mobile]{transition-duration:1.05s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1050"],body[data-aos-mobile-delay="1050"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1050"].aos-mobile-animate,body[data-aos-mobile-delay="1050"] [data-aos-mobile].aos-mobile-animate{transition-delay:1.05s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="1100"],body[data-aos-mobile-duration="1100"] [data-aos-mobile]{transition-duration:1.1s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1100"],body[data-aos-mobile-delay="1100"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1100"].aos-mobile-animate,body[data-aos-mobile-delay="1100"] [data-aos-mobile].aos-mobile-animate{transition-delay:1.1s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="1150"],body[data-aos-mobile-duration="1150"] [data-aos-mobile]{transition-duration:1.15s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1150"],body[data-aos-mobile-delay="1150"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1150"].aos-mobile-animate,body[data-aos-mobile-delay="1150"] [data-aos-mobile].aos-mobile-animate{transition-delay:1.15s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="1200"],body[data-aos-mobile-duration="1200"] [data-aos-mobile]{transition-duration:1.2s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1200"],body[data-aos-mobile-delay="1200"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1200"].aos-mobile-animate,body[data-aos-mobile-delay="1200"] [data-aos-mobile].aos-mobile-animate{transition-delay:1.2s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="1250"],body[data-aos-mobile-duration="1250"] [data-aos-mobile]{transition-duration:1.25s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1250"],body[data-aos-mobile-delay="1250"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1250"].aos-mobile-animate,body[data-aos-mobile-delay="1250"] [data-aos-mobile].aos-mobile-animate{transition-delay:1.25s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="1300"],body[data-aos-mobile-duration="1300"] [data-aos-mobile]{transition-duration:1.3s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1300"],body[data-aos-mobile-delay="1300"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1300"].aos-mobile-animate,body[data-aos-mobile-delay="1300"] [data-aos-mobile].aos-mobile-animate{transition-delay:1.3s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="1350"],body[data-aos-mobile-duration="1350"] [data-aos-mobile]{transition-duration:1.35s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1350"],body[data-aos-mobile-delay="1350"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1350"].aos-mobile-animate,body[data-aos-mobile-delay="1350"] [data-aos-mobile].aos-mobile-animate{transition-delay:1.35s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="1400"],body[data-aos-mobile-duration="1400"] [data-aos-mobile]{transition-duration:1.4s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1400"],body[data-aos-mobile-delay="1400"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1400"].aos-mobile-animate,body[data-aos-mobile-delay="1400"] [data-aos-mobile].aos-mobile-animate{transition-delay:1.4s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="1450"],body[data-aos-mobile-duration="1450"] [data-aos-mobile]{transition-duration:1.45s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1450"],body[data-aos-mobile-delay="1450"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1450"].aos-mobile-animate,body[data-aos-mobile-delay="1450"] [data-aos-mobile].aos-mobile-animate{transition-delay:1.45s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="1500"],body[data-aos-mobile-duration="1500"] [data-aos-mobile]{transition-duration:1.5s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1500"],body[data-aos-mobile-delay="1500"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1500"].aos-mobile-animate,body[data-aos-mobile-delay="1500"] [data-aos-mobile].aos-mobile-animate{transition-delay:1.5s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="1550"],body[data-aos-mobile-duration="1550"] [data-aos-mobile]{transition-duration:1.55s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1550"],body[data-aos-mobile-delay="1550"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1550"].aos-mobile-animate,body[data-aos-mobile-delay="1550"] [data-aos-mobile].aos-mobile-animate{transition-delay:1.55s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="1600"],body[data-aos-mobile-duration="1600"] [data-aos-mobile]{transition-duration:1.6s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1600"],body[data-aos-mobile-delay="1600"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1600"].aos-mobile-animate,body[data-aos-mobile-delay="1600"] [data-aos-mobile].aos-mobile-animate{transition-delay:1.6s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="1650"],body[data-aos-mobile-duration="1650"] [data-aos-mobile]{transition-duration:1.65s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1650"],body[data-aos-mobile-delay="1650"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1650"].aos-mobile-animate,body[data-aos-mobile-delay="1650"] [data-aos-mobile].aos-mobile-animate{transition-delay:1.65s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="1700"],body[data-aos-mobile-duration="1700"] [data-aos-mobile]{transition-duration:1.7s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1700"],body[data-aos-mobile-delay="1700"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1700"].aos-mobile-animate,body[data-aos-mobile-delay="1700"] [data-aos-mobile].aos-mobile-animate{transition-delay:1.7s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="1750"],body[data-aos-mobile-duration="1750"] [data-aos-mobile]{transition-duration:1.75s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1750"],body[data-aos-mobile-delay="1750"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1750"].aos-mobile-animate,body[data-aos-mobile-delay="1750"] [data-aos-mobile].aos-mobile-animate{transition-delay:1.75s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="1800"],body[data-aos-mobile-duration="1800"] [data-aos-mobile]{transition-duration:1.8s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1800"],body[data-aos-mobile-delay="1800"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1800"].aos-mobile-animate,body[data-aos-mobile-delay="1800"] [data-aos-mobile].aos-mobile-animate{transition-delay:1.8s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="1850"],body[data-aos-mobile-duration="1850"] [data-aos-mobile]{transition-duration:1.85s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1850"],body[data-aos-mobile-delay="1850"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1850"].aos-mobile-animate,body[data-aos-mobile-delay="1850"] [data-aos-mobile].aos-mobile-animate{transition-delay:1.85s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="1900"],body[data-aos-mobile-duration="1900"] [data-aos-mobile]{transition-duration:1.9s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1900"],body[data-aos-mobile-delay="1900"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1900"].aos-mobile-animate,body[data-aos-mobile-delay="1900"] [data-aos-mobile].aos-mobile-animate{transition-delay:1.9s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="1950"],body[data-aos-mobile-duration="1950"] [data-aos-mobile]{transition-duration:1.95s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1950"],body[data-aos-mobile-delay="1950"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="1950"].aos-mobile-animate,body[data-aos-mobile-delay="1950"] [data-aos-mobile].aos-mobile-animate{transition-delay:1.95s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="2000"],body[data-aos-mobile-duration="2000"] [data-aos-mobile]{transition-duration:2s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2000"],body[data-aos-mobile-delay="2000"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2000"].aos-mobile-animate,body[data-aos-mobile-delay="2000"] [data-aos-mobile].aos-mobile-animate{transition-delay:2s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="2050"],body[data-aos-mobile-duration="2050"] [data-aos-mobile]{transition-duration:2.05s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2050"],body[data-aos-mobile-delay="2050"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2050"].aos-mobile-animate,body[data-aos-mobile-delay="2050"] [data-aos-mobile].aos-mobile-animate{transition-delay:2.05s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="2100"],body[data-aos-mobile-duration="2100"] [data-aos-mobile]{transition-duration:2.1s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2100"],body[data-aos-mobile-delay="2100"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2100"].aos-mobile-animate,body[data-aos-mobile-delay="2100"] [data-aos-mobile].aos-mobile-animate{transition-delay:2.1s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="2150"],body[data-aos-mobile-duration="2150"] [data-aos-mobile]{transition-duration:2.15s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2150"],body[data-aos-mobile-delay="2150"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2150"].aos-mobile-animate,body[data-aos-mobile-delay="2150"] [data-aos-mobile].aos-mobile-animate{transition-delay:2.15s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="2200"],body[data-aos-mobile-duration="2200"] [data-aos-mobile]{transition-duration:2.2s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2200"],body[data-aos-mobile-delay="2200"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2200"].aos-mobile-animate,body[data-aos-mobile-delay="2200"] [data-aos-mobile].aos-mobile-animate{transition-delay:2.2s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="2250"],body[data-aos-mobile-duration="2250"] [data-aos-mobile]{transition-duration:2.25s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2250"],body[data-aos-mobile-delay="2250"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2250"].aos-mobile-animate,body[data-aos-mobile-delay="2250"] [data-aos-mobile].aos-mobile-animate{transition-delay:2.25s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="2300"],body[data-aos-mobile-duration="2300"] [data-aos-mobile]{transition-duration:2.3s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2300"],body[data-aos-mobile-delay="2300"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2300"].aos-mobile-animate,body[data-aos-mobile-delay="2300"] [data-aos-mobile].aos-mobile-animate{transition-delay:2.3s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="2350"],body[data-aos-mobile-duration="2350"] [data-aos-mobile]{transition-duration:2.35s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2350"],body[data-aos-mobile-delay="2350"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2350"].aos-mobile-animate,body[data-aos-mobile-delay="2350"] [data-aos-mobile].aos-mobile-animate{transition-delay:2.35s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="2400"],body[data-aos-mobile-duration="2400"] [data-aos-mobile]{transition-duration:2.4s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2400"],body[data-aos-mobile-delay="2400"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2400"].aos-mobile-animate,body[data-aos-mobile-delay="2400"] [data-aos-mobile].aos-mobile-animate{transition-delay:2.4s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="2450"],body[data-aos-mobile-duration="2450"] [data-aos-mobile]{transition-duration:2.45s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2450"],body[data-aos-mobile-delay="2450"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2450"].aos-mobile-animate,body[data-aos-mobile-delay="2450"] [data-aos-mobile].aos-mobile-animate{transition-delay:2.45s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="2500"],body[data-aos-mobile-duration="2500"] [data-aos-mobile]{transition-duration:2.5s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2500"],body[data-aos-mobile-delay="2500"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2500"].aos-mobile-animate,body[data-aos-mobile-delay="2500"] [data-aos-mobile].aos-mobile-animate{transition-delay:2.5s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="2550"],body[data-aos-mobile-duration="2550"] [data-aos-mobile]{transition-duration:2.55s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2550"],body[data-aos-mobile-delay="2550"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2550"].aos-mobile-animate,body[data-aos-mobile-delay="2550"] [data-aos-mobile].aos-mobile-animate{transition-delay:2.55s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="2600"],body[data-aos-mobile-duration="2600"] [data-aos-mobile]{transition-duration:2.6s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2600"],body[data-aos-mobile-delay="2600"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2600"].aos-mobile-animate,body[data-aos-mobile-delay="2600"] [data-aos-mobile].aos-mobile-animate{transition-delay:2.6s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="2650"],body[data-aos-mobile-duration="2650"] [data-aos-mobile]{transition-duration:2.65s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2650"],body[data-aos-mobile-delay="2650"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2650"].aos-mobile-animate,body[data-aos-mobile-delay="2650"] [data-aos-mobile].aos-mobile-animate{transition-delay:2.65s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="2700"],body[data-aos-mobile-duration="2700"] [data-aos-mobile]{transition-duration:2.7s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2700"],body[data-aos-mobile-delay="2700"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2700"].aos-mobile-animate,body[data-aos-mobile-delay="2700"] [data-aos-mobile].aos-mobile-animate{transition-delay:2.7s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="2750"],body[data-aos-mobile-duration="2750"] [data-aos-mobile]{transition-duration:2.75s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2750"],body[data-aos-mobile-delay="2750"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2750"].aos-mobile-animate,body[data-aos-mobile-delay="2750"] [data-aos-mobile].aos-mobile-animate{transition-delay:2.75s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="2800"],body[data-aos-mobile-duration="2800"] [data-aos-mobile]{transition-duration:2.8s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2800"],body[data-aos-mobile-delay="2800"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2800"].aos-mobile-animate,body[data-aos-mobile-delay="2800"] [data-aos-mobile].aos-mobile-animate{transition-delay:2.8s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="2850"],body[data-aos-mobile-duration="2850"] [data-aos-mobile]{transition-duration:2.85s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2850"],body[data-aos-mobile-delay="2850"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2850"].aos-mobile-animate,body[data-aos-mobile-delay="2850"] [data-aos-mobile].aos-mobile-animate{transition-delay:2.85s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="2900"],body[data-aos-mobile-duration="2900"] [data-aos-mobile]{transition-duration:2.9s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2900"],body[data-aos-mobile-delay="2900"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2900"].aos-mobile-animate,body[data-aos-mobile-delay="2900"] [data-aos-mobile].aos-mobile-animate{transition-delay:2.9s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="2950"],body[data-aos-mobile-duration="2950"] [data-aos-mobile]{transition-duration:2.95s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2950"],body[data-aos-mobile-delay="2950"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="2950"].aos-mobile-animate,body[data-aos-mobile-delay="2950"] [data-aos-mobile].aos-mobile-animate{transition-delay:2.95s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-duration="3000"],body[data-aos-mobile-duration="3000"] [data-aos-mobile]{transition-duration:3s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="3000"],body[data-aos-mobile-delay="3000"] [data-aos-mobile]{transition-delay:0}[data-aos-mobile][data-aos-mobile][data-aos-mobile-delay="3000"].aos-mobile-animate,body[data-aos-mobile-delay="3000"] [data-aos-mobile].aos-mobile-animate{transition-delay:3s}[data-aos-mobile][data-aos-mobile][data-aos-mobile-easing=linear],body[data-aos-mobile-easing=linear] [data-aos-mobile]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos-mobile][data-aos-mobile][data-aos-mobile-easing=ease],body[data-aos-mobile-easing=ease] [data-aos-mobile]{transition-timing-function:ease}[data-aos-mobile][data-aos-mobile][data-aos-mobile-easing=ease-in],body[data-aos-mobile-easing=ease-in] [data-aos-mobile]{transition-timing-function:ease-in}[data-aos-mobile][data-aos-mobile][data-aos-mobile-easing=ease-out],body[data-aos-mobile-easing=ease-out] [data-aos-mobile]{transition-timing-function:ease-out}[data-aos-mobile][data-aos-mobile][data-aos-mobile-easing=ease-in-out],body[data-aos-mobile-easing=ease-in-out] [data-aos-mobile]{transition-timing-function:ease-in-out}[data-aos-mobile][data-aos-mobile][data-aos-mobile-easing=ease-in-back],body[data-aos-mobile-easing=ease-in-back] [data-aos-mobile]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos-mobile][data-aos-mobile][data-aos-mobile-easing=ease-out-back],body[data-aos-mobile-easing=ease-out-back] [data-aos-mobile]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos-mobile][data-aos-mobile][data-aos-mobile-easing=ease-in-out-back],body[data-aos-mobile-easing=ease-in-out-back] [data-aos-mobile]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos-mobile][data-aos-mobile][data-aos-mobile-easing=ease-in-sine],body[data-aos-mobile-easing=ease-in-sine] [data-aos-mobile]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos-mobile][data-aos-mobile][data-aos-mobile-easing=ease-out-sine],body[data-aos-mobile-easing=ease-out-sine] [data-aos-mobile]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos-mobile][data-aos-mobile][data-aos-mobile-easing=ease-in-out-sine],body[data-aos-mobile-easing=ease-in-out-sine] [data-aos-mobile]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos-mobile][data-aos-mobile][data-aos-mobile-easing=ease-in-quad],body[data-aos-mobile-easing=ease-in-quad] [data-aos-mobile]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos-mobile][data-aos-mobile][data-aos-mobile-easing=ease-out-quad],body[data-aos-mobile-easing=ease-out-quad] [data-aos-mobile]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos-mobile][data-aos-mobile][data-aos-mobile-easing=ease-in-out-quad],body[data-aos-mobile-easing=ease-in-out-quad] [data-aos-mobile]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos-mobile][data-aos-mobile][data-aos-mobile-easing=ease-in-cubic],body[data-aos-mobile-easing=ease-in-cubic] [data-aos-mobile]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos-mobile][data-aos-mobile][data-aos-mobile-easing=ease-out-cubic],body[data-aos-mobile-easing=ease-out-cubic] [data-aos-mobile]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos-mobile][data-aos-mobile][data-aos-mobile-easing=ease-in-out-cubic],body[data-aos-mobile-easing=ease-in-out-cubic] [data-aos-mobile]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos-mobile][data-aos-mobile][data-aos-mobile-easing=ease-in-quart],body[data-aos-mobile-easing=ease-in-quart] [data-aos-mobile]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos-mobile][data-aos-mobile][data-aos-mobile-easing=ease-out-quart],body[data-aos-mobile-easing=ease-out-quart] [data-aos-mobile]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos-mobile][data-aos-mobile][data-aos-mobile-easing=ease-in-out-quart],body[data-aos-mobile-easing=ease-in-out-quart] [data-aos-mobile]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos-mobile^=fade][data-aos-mobile^=fade]{opacity:0;transition-property:opacity,transform}[data-aos-mobile^=fade][data-aos-mobile^=fade].aos-mobile-animate{opacity:1;transform:translateZ(0)}[data-aos-mobile=fade-up]{transform:translate3d(0,100px,0)}[data-aos-mobile=fade-down]{transform:translate3d(0,-100px,0)}[data-aos-mobile=fade-right]{transform:translate3d(-100px,0,0)}[data-aos-mobile=fade-left]{transform:translate3d(100px,0,0)}[data-aos-mobile=fade-up-right]{transform:translate3d(-100px,100px,0)}[data-aos-mobile=fade-up-left]{transform:translate3d(100px,100px,0)}[data-aos-mobile=fade-down-right]{transform:translate3d(-100px,-100px,0)}[data-aos-mobile=fade-down-left]{transform:translate3d(100px,-100px,0)}[data-aos-mobile^=zoom][data-aos-mobile^=zoom]{opacity:0;transition-property:opacity,transform}[data-aos-mobile^=zoom][data-aos-mobile^=zoom].aos-mobile-animate{opacity:1;transform:translateZ(0) scale(1)}[data-aos-mobile=zoom-in]{transform:scale(.6)}[data-aos-mobile=zoom-in-up]{transform:translate3d(0,100px,0) scale(.6)}[data-aos-mobile=zoom-in-down]{transform:translate3d(0,-100px,0) scale(.6)}[data-aos-mobile=zoom-in-right]{transform:translate3d(-100px,0,0) scale(.6)}[data-aos-mobile=zoom-in-left]{transform:translate3d(100px,0,0) scale(.6)}[data-aos-mobile=zoom-out]{transform:scale(1.2)}[data-aos-mobile=zoom-out-up]{transform:translate3d(0,100px,0) scale(1.2)}[data-aos-mobile=zoom-out-down]{transform:translate3d(0,-100px,0) scale(1.2)}[data-aos-mobile=zoom-out-right]{transform:translate3d(-100px,0,0) scale(1.2)}[data-aos-mobile=zoom-out-left]{transform:translate3d(100px,0,0) scale(1.2)}[data-aos-mobile^=slide][data-aos-mobile^=slide]{transition-property:transform}[data-aos-mobile^=slide][data-aos-mobile^=slide].aos-mobile-animate{transform:translateZ(0)}[data-aos-mobile=slide-up]{transform:translate3d(0,100%,0)}[data-aos-mobile=slide-down]{transform:translate3d(0,-100%,0)}[data-aos-mobile=slide-right]{transform:translate3d(-100%,0,0)}[data-aos-mobile=slide-left]{transform:translate3d(100%,0,0)}[data-aos-mobile^=flip][data-aos-mobile^=flip]{backface-visibility:hidden;transition-property:transform}[data-aos-mobile=flip-left]{transform:perspective(2500px) rotateY(-100deg)}[data-aos-mobile=flip-left].aos-mobile-animate{transform:perspective(2500px) rotateY(0)}[data-aos-mobile=flip-right]{transform:perspective(2500px) rotateY(100deg)}[data-aos-mobile=flip-right].aos-mobile-animate{transform:perspective(2500px) rotateY(0)}[data-aos-mobile=flip-up]{transform:perspective(2500px) rotateX(-100deg)}[data-aos-mobile=flip-up].aos-mobile-animate{transform:perspective(2500px) rotateX(0)}[data-aos-mobile=flip-down]{transform:perspective(2500px) rotateX(100deg)}[data-aos-mobile=flip-down].aos-mobile-animate{transform:perspective(2500px) rotateX(0)}}

@media screen and (width >= 768px) {[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="50"],body[data-aos-non-mobile-duration="50"] [data-aos-non-mobile]{transition-duration:50ms}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="50"],body[data-aos-non-mobile-delay="50"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="50"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="50"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:50ms}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="100"],body[data-aos-non-mobile-duration="100"] [data-aos-non-mobile]{transition-duration:.1s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="100"],body[data-aos-non-mobile-delay="100"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="100"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="100"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:.1s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="150"],body[data-aos-non-mobile-duration="150"] [data-aos-non-mobile]{transition-duration:.15s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="150"],body[data-aos-non-mobile-delay="150"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="150"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="150"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:.15s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="200"],body[data-aos-non-mobile-duration="200"] [data-aos-non-mobile]{transition-duration:.2s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="200"],body[data-aos-non-mobile-delay="200"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="200"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="200"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:.2s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="250"],body[data-aos-non-mobile-duration="250"] [data-aos-non-mobile]{transition-duration:.25s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="250"],body[data-aos-non-mobile-delay="250"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="250"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="250"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:.25s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="300"],body[data-aos-non-mobile-duration="300"] [data-aos-non-mobile]{transition-duration:.3s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="300"],body[data-aos-non-mobile-delay="300"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="300"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="300"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:.3s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="350"],body[data-aos-non-mobile-duration="350"] [data-aos-non-mobile]{transition-duration:.35s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="350"],body[data-aos-non-mobile-delay="350"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="350"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="350"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:.35s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="400"],body[data-aos-non-mobile-duration="400"] [data-aos-non-mobile]{transition-duration:.4s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="400"],body[data-aos-non-mobile-delay="400"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="400"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="400"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:.4s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="450"],body[data-aos-non-mobile-duration="450"] [data-aos-non-mobile]{transition-duration:.45s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="450"],body[data-aos-non-mobile-delay="450"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="450"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="450"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:.45s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="500"],body[data-aos-non-mobile-duration="500"] [data-aos-non-mobile]{transition-duration:.5s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="500"],body[data-aos-non-mobile-delay="500"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="500"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="500"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:.5s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="550"],body[data-aos-non-mobile-duration="550"] [data-aos-non-mobile]{transition-duration:.55s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="550"],body[data-aos-non-mobile-delay="550"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="550"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="550"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:.55s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="600"],body[data-aos-non-mobile-duration="600"] [data-aos-non-mobile]{transition-duration:.6s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="600"],body[data-aos-non-mobile-delay="600"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="600"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="600"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:.6s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="650"],body[data-aos-non-mobile-duration="650"] [data-aos-non-mobile]{transition-duration:.65s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="650"],body[data-aos-non-mobile-delay="650"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="650"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="650"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:.65s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="700"],body[data-aos-non-mobile-duration="700"] [data-aos-non-mobile]{transition-duration:.7s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="700"],body[data-aos-non-mobile-delay="700"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="700"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="700"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:.7s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="750"],body[data-aos-non-mobile-duration="750"] [data-aos-non-mobile]{transition-duration:.75s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="750"],body[data-aos-non-mobile-delay="750"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="750"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="750"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:.75s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="800"],body[data-aos-non-mobile-duration="800"] [data-aos-non-mobile]{transition-duration:.8s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="800"],body[data-aos-non-mobile-delay="800"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="800"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="800"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:.8s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="850"],body[data-aos-non-mobile-duration="850"] [data-aos-non-mobile]{transition-duration:.85s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="850"],body[data-aos-non-mobile-delay="850"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="850"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="850"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:.85s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="900"],body[data-aos-non-mobile-duration="900"] [data-aos-non-mobile]{transition-duration:.9s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="900"],body[data-aos-non-mobile-delay="900"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="900"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="900"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:.9s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="950"],body[data-aos-non-mobile-duration="950"] [data-aos-non-mobile]{transition-duration:.95s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="950"],body[data-aos-non-mobile-delay="950"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="950"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="950"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:.95s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="1000"],body[data-aos-non-mobile-duration="1000"] [data-aos-non-mobile]{transition-duration:1s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1000"],body[data-aos-non-mobile-delay="1000"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1000"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="1000"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:1s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="1050"],body[data-aos-non-mobile-duration="1050"] [data-aos-non-mobile]{transition-duration:1.05s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1050"],body[data-aos-non-mobile-delay="1050"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1050"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="1050"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:1.05s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="1100"],body[data-aos-non-mobile-duration="1100"] [data-aos-non-mobile]{transition-duration:1.1s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1100"],body[data-aos-non-mobile-delay="1100"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1100"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="1100"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:1.1s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="1150"],body[data-aos-non-mobile-duration="1150"] [data-aos-non-mobile]{transition-duration:1.15s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1150"],body[data-aos-non-mobile-delay="1150"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1150"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="1150"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:1.15s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="1200"],body[data-aos-non-mobile-duration="1200"] [data-aos-non-mobile]{transition-duration:1.2s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1200"],body[data-aos-non-mobile-delay="1200"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1200"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="1200"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:1.2s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="1250"],body[data-aos-non-mobile-duration="1250"] [data-aos-non-mobile]{transition-duration:1.25s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1250"],body[data-aos-non-mobile-delay="1250"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1250"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="1250"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:1.25s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="1300"],body[data-aos-non-mobile-duration="1300"] [data-aos-non-mobile]{transition-duration:1.3s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1300"],body[data-aos-non-mobile-delay="1300"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1300"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="1300"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:1.3s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="1350"],body[data-aos-non-mobile-duration="1350"] [data-aos-non-mobile]{transition-duration:1.35s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1350"],body[data-aos-non-mobile-delay="1350"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1350"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="1350"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:1.35s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="1400"],body[data-aos-non-mobile-duration="1400"] [data-aos-non-mobile]{transition-duration:1.4s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1400"],body[data-aos-non-mobile-delay="1400"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1400"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="1400"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:1.4s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="1450"],body[data-aos-non-mobile-duration="1450"] [data-aos-non-mobile]{transition-duration:1.45s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1450"],body[data-aos-non-mobile-delay="1450"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1450"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="1450"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:1.45s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="1500"],body[data-aos-non-mobile-duration="1500"] [data-aos-non-mobile]{transition-duration:1.5s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1500"],body[data-aos-non-mobile-delay="1500"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1500"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="1500"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:1.5s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="1550"],body[data-aos-non-mobile-duration="1550"] [data-aos-non-mobile]{transition-duration:1.55s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1550"],body[data-aos-non-mobile-delay="1550"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1550"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="1550"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:1.55s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="1600"],body[data-aos-non-mobile-duration="1600"] [data-aos-non-mobile]{transition-duration:1.6s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1600"],body[data-aos-non-mobile-delay="1600"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1600"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="1600"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:1.6s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="1650"],body[data-aos-non-mobile-duration="1650"] [data-aos-non-mobile]{transition-duration:1.65s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1650"],body[data-aos-non-mobile-delay="1650"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1650"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="1650"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:1.65s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="1700"],body[data-aos-non-mobile-duration="1700"] [data-aos-non-mobile]{transition-duration:1.7s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1700"],body[data-aos-non-mobile-delay="1700"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1700"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="1700"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:1.7s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="1750"],body[data-aos-non-mobile-duration="1750"] [data-aos-non-mobile]{transition-duration:1.75s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1750"],body[data-aos-non-mobile-delay="1750"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1750"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="1750"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:1.75s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="1800"],body[data-aos-non-mobile-duration="1800"] [data-aos-non-mobile]{transition-duration:1.8s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1800"],body[data-aos-non-mobile-delay="1800"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1800"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="1800"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:1.8s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="1850"],body[data-aos-non-mobile-duration="1850"] [data-aos-non-mobile]{transition-duration:1.85s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1850"],body[data-aos-non-mobile-delay="1850"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1850"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="1850"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:1.85s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="1900"],body[data-aos-non-mobile-duration="1900"] [data-aos-non-mobile]{transition-duration:1.9s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1900"],body[data-aos-non-mobile-delay="1900"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1900"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="1900"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:1.9s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="1950"],body[data-aos-non-mobile-duration="1950"] [data-aos-non-mobile]{transition-duration:1.95s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1950"],body[data-aos-non-mobile-delay="1950"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="1950"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="1950"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:1.95s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="2000"],body[data-aos-non-mobile-duration="2000"] [data-aos-non-mobile]{transition-duration:2s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2000"],body[data-aos-non-mobile-delay="2000"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2000"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="2000"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:2s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="2050"],body[data-aos-non-mobile-duration="2050"] [data-aos-non-mobile]{transition-duration:2.05s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2050"],body[data-aos-non-mobile-delay="2050"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2050"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="2050"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:2.05s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="2100"],body[data-aos-non-mobile-duration="2100"] [data-aos-non-mobile]{transition-duration:2.1s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2100"],body[data-aos-non-mobile-delay="2100"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2100"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="2100"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:2.1s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="2150"],body[data-aos-non-mobile-duration="2150"] [data-aos-non-mobile]{transition-duration:2.15s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2150"],body[data-aos-non-mobile-delay="2150"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2150"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="2150"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:2.15s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="2200"],body[data-aos-non-mobile-duration="2200"] [data-aos-non-mobile]{transition-duration:2.2s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2200"],body[data-aos-non-mobile-delay="2200"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2200"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="2200"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:2.2s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="2250"],body[data-aos-non-mobile-duration="2250"] [data-aos-non-mobile]{transition-duration:2.25s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2250"],body[data-aos-non-mobile-delay="2250"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2250"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="2250"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:2.25s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="2300"],body[data-aos-non-mobile-duration="2300"] [data-aos-non-mobile]{transition-duration:2.3s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2300"],body[data-aos-non-mobile-delay="2300"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2300"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="2300"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:2.3s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="2350"],body[data-aos-non-mobile-duration="2350"] [data-aos-non-mobile]{transition-duration:2.35s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2350"],body[data-aos-non-mobile-delay="2350"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2350"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="2350"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:2.35s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="2400"],body[data-aos-non-mobile-duration="2400"] [data-aos-non-mobile]{transition-duration:2.4s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2400"],body[data-aos-non-mobile-delay="2400"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2400"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="2400"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:2.4s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="2450"],body[data-aos-non-mobile-duration="2450"] [data-aos-non-mobile]{transition-duration:2.45s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2450"],body[data-aos-non-mobile-delay="2450"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2450"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="2450"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:2.45s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="2500"],body[data-aos-non-mobile-duration="2500"] [data-aos-non-mobile]{transition-duration:2.5s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2500"],body[data-aos-non-mobile-delay="2500"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2500"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="2500"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:2.5s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="2550"],body[data-aos-non-mobile-duration="2550"] [data-aos-non-mobile]{transition-duration:2.55s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2550"],body[data-aos-non-mobile-delay="2550"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2550"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="2550"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:2.55s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="2600"],body[data-aos-non-mobile-duration="2600"] [data-aos-non-mobile]{transition-duration:2.6s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2600"],body[data-aos-non-mobile-delay="2600"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2600"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="2600"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:2.6s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="2650"],body[data-aos-non-mobile-duration="2650"] [data-aos-non-mobile]{transition-duration:2.65s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2650"],body[data-aos-non-mobile-delay="2650"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2650"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="2650"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:2.65s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="2700"],body[data-aos-non-mobile-duration="2700"] [data-aos-non-mobile]{transition-duration:2.7s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2700"],body[data-aos-non-mobile-delay="2700"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2700"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="2700"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:2.7s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="2750"],body[data-aos-non-mobile-duration="2750"] [data-aos-non-mobile]{transition-duration:2.75s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2750"],body[data-aos-non-mobile-delay="2750"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2750"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="2750"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:2.75s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="2800"],body[data-aos-non-mobile-duration="2800"] [data-aos-non-mobile]{transition-duration:2.8s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2800"],body[data-aos-non-mobile-delay="2800"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2800"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="2800"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:2.8s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="2850"],body[data-aos-non-mobile-duration="2850"] [data-aos-non-mobile]{transition-duration:2.85s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2850"],body[data-aos-non-mobile-delay="2850"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2850"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="2850"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:2.85s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="2900"],body[data-aos-non-mobile-duration="2900"] [data-aos-non-mobile]{transition-duration:2.9s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2900"],body[data-aos-non-mobile-delay="2900"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2900"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="2900"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:2.9s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="2950"],body[data-aos-non-mobile-duration="2950"] [data-aos-non-mobile]{transition-duration:2.95s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2950"],body[data-aos-non-mobile-delay="2950"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="2950"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="2950"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:2.95s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-duration="3000"],body[data-aos-non-mobile-duration="3000"] [data-aos-non-mobile]{transition-duration:3s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="3000"],body[data-aos-non-mobile-delay="3000"] [data-aos-non-mobile]{transition-delay:0}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-delay="3000"].aos-non-mobile-animate,body[data-aos-non-mobile-delay="3000"] [data-aos-non-mobile].aos-non-mobile-animate{transition-delay:3s}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-easing=linear],body[data-aos-non-mobile-easing=linear] [data-aos-non-mobile]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-easing=ease],body[data-aos-non-mobile-easing=ease] [data-aos-non-mobile]{transition-timing-function:ease}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-easing=ease-in],body[data-aos-non-mobile-easing=ease-in] [data-aos-non-mobile]{transition-timing-function:ease-in}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-easing=ease-out],body[data-aos-non-mobile-easing=ease-out] [data-aos-non-mobile]{transition-timing-function:ease-out}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-easing=ease-in-out],body[data-aos-non-mobile-easing=ease-in-out] [data-aos-non-mobile]{transition-timing-function:ease-in-out}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-easing=ease-in-back],body[data-aos-non-mobile-easing=ease-in-back] [data-aos-non-mobile]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-easing=ease-out-back],body[data-aos-non-mobile-easing=ease-out-back] [data-aos-non-mobile]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-easing=ease-in-out-back],body[data-aos-non-mobile-easing=ease-in-out-back] [data-aos-non-mobile]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-easing=ease-in-sine],body[data-aos-non-mobile-easing=ease-in-sine] [data-aos-non-mobile]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-easing=ease-out-sine],body[data-aos-non-mobile-easing=ease-out-sine] [data-aos-non-mobile]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-easing=ease-in-out-sine],body[data-aos-non-mobile-easing=ease-in-out-sine] [data-aos-non-mobile]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-easing=ease-in-quad],body[data-aos-non-mobile-easing=ease-in-quad] [data-aos-non-mobile]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-easing=ease-out-quad],body[data-aos-non-mobile-easing=ease-out-quad] [data-aos-non-mobile]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-easing=ease-in-out-quad],body[data-aos-non-mobile-easing=ease-in-out-quad] [data-aos-non-mobile]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-easing=ease-in-cubic],body[data-aos-non-mobile-easing=ease-in-cubic] [data-aos-non-mobile]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-easing=ease-out-cubic],body[data-aos-non-mobile-easing=ease-out-cubic] [data-aos-non-mobile]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-easing=ease-in-out-cubic],body[data-aos-non-mobile-easing=ease-in-out-cubic] [data-aos-non-mobile]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-easing=ease-in-quart],body[data-aos-non-mobile-easing=ease-in-quart] [data-aos-non-mobile]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-easing=ease-out-quart],body[data-aos-non-mobile-easing=ease-out-quart] [data-aos-non-mobile]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos-non-mobile][data-aos-non-mobile][data-aos-non-mobile-easing=ease-in-out-quart],body[data-aos-non-mobile-easing=ease-in-out-quart] [data-aos-non-mobile]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos-non-mobile^=fade][data-aos-non-mobile^=fade]{opacity:0;transition-property:opacity,transform}[data-aos-non-mobile^=fade][data-aos-non-mobile^=fade].aos-non-mobile-animate{opacity:1;transform:translateZ(0)}[data-aos-non-mobile=fade-up]{transform:translate3d(0,100px,0)}[data-aos-non-mobile=fade-down]{transform:translate3d(0,-100px,0)}[data-aos-non-mobile=fade-right]{transform:translate3d(-100px,0,0)}[data-aos-non-mobile=fade-left]{transform:translate3d(100px,0,0)}[data-aos-non-mobile=fade-up-right]{transform:translate3d(-100px,100px,0)}[data-aos-non-mobile=fade-up-left]{transform:translate3d(100px,100px,0)}[data-aos-non-mobile=fade-down-right]{transform:translate3d(-100px,-100px,0)}[data-aos-non-mobile=fade-down-left]{transform:translate3d(100px,-100px,0)}[data-aos-non-mobile^=zoom][data-aos-non-mobile^=zoom]{opacity:0;transition-property:opacity,transform}[data-aos-non-mobile^=zoom][data-aos-non-mobile^=zoom].aos-non-mobile-animate{opacity:1;transform:translateZ(0) scale(1)}[data-aos-non-mobile=zoom-in]{transform:scale(.6)}[data-aos-non-mobile=zoom-in-up]{transform:translate3d(0,100px,0) scale(.6)}[data-aos-non-mobile=zoom-in-down]{transform:translate3d(0,-100px,0) scale(.6)}[data-aos-non-mobile=zoom-in-right]{transform:translate3d(-100px,0,0) scale(.6)}[data-aos-non-mobile=zoom-in-left]{transform:translate3d(100px,0,0) scale(.6)}[data-aos-non-mobile=zoom-out]{transform:scale(1.2)}[data-aos-non-mobile=zoom-out-up]{transform:translate3d(0,100px,0) scale(1.2)}[data-aos-non-mobile=zoom-out-down]{transform:translate3d(0,-100px,0) scale(1.2)}[data-aos-non-mobile=zoom-out-right]{transform:translate3d(-100px,0,0) scale(1.2)}[data-aos-non-mobile=zoom-out-left]{transform:translate3d(100px,0,0) scale(1.2)}[data-aos-non-mobile^=slide][data-aos-non-mobile^=slide]{transition-property:transform}[data-aos-non-mobile^=slide][data-aos-non-mobile^=slide].aos-non-mobile-animate{transform:translateZ(0)}[data-aos-non-mobile=slide-up]{transform:translate3d(0,100%,0)}[data-aos-non-mobile=slide-down]{transform:translate3d(0,-100%,0)}[data-aos-non-mobile=slide-right]{transform:translate3d(-100%,0,0)}[data-aos-non-mobile=slide-left]{transform:translate3d(100%,0,0)}[data-aos-non-mobile^=flip][data-aos-non-mobile^=flip]{backface-visibility:hidden;transition-property:transform}[data-aos-non-mobile=flip-left]{transform:perspective(2500px) rotateY(-100deg)}[data-aos-non-mobile=flip-left].aos-non-mobile-animate{transform:perspective(2500px) rotateY(0)}[data-aos-non-mobile=flip-right]{transform:perspective(2500px) rotateY(100deg)}[data-aos-non-mobile=flip-right].aos-non-mobile-animate{transform:perspective(2500px) rotateY(0)}[data-aos-non-mobile=flip-up]{transform:perspective(2500px) rotateX(-100deg)}[data-aos-non-mobile=flip-up].aos-non-mobile-animate{transform:perspective(2500px) rotateX(0)}[data-aos-non-mobile=flip-down]{transform:perspective(2500px) rotateX(100deg)}[data-aos-non-mobile=flip-down].aos-non-mobile-animate{transform:perspective(2500px) rotateX(0)}}

.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-top:5px;margin-right:10px;padding:1px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid black 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:transparent;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option[role=group]{padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999}.select2-container--default .select2-results__option[aria-selected=true]{background-color:#ddd}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#5897fb;color:white}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top, #fff 50%, #eee 100%);background-image:-o-linear-gradient(top, #fff 50%, #eee 100%);background-image:linear-gradient(to bottom, #fff 50%, #eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-right:10px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:-webkit-linear-gradient(top, #eee 50%, #ccc 100%);background-image:-o-linear-gradient(top, #eee 50%, #ccc 100%);background-image:linear-gradient(to bottom, #eee 50%, #ccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:transparent;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:-webkit-linear-gradient(top, #fff 0%, #eee 50%);background-image:-o-linear-gradient(top, #fff 0%, #eee 50%);background-image:linear-gradient(to bottom, #fff 0%, #eee 50%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:-webkit-linear-gradient(top, #eee 50%, #fff 100%);background-image:-o-linear-gradient(top, #eee 50%, #fff 100%);background-image:linear-gradient(to bottom, #eee 50%, #fff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)}.select2-container--classic .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{color:#888;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{float:right;margin-left:5px;margin-right:auto}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option[role=group]{padding:0}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey}.select2-container--classic .select2-results__option--highlighted[aria-selected]{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb}

.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
      /*rtl:begin:ignore*/left:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*
      /*rtl:begin:ignore*/right:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}

html, body { height: auto; width: 100%; }
img, canvas, svg, object { display: block; max-width: 100%; }
:where(:root) { overflow-wrap: break-word; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: none; text-size-adjust: none; }
:where(iframe) { border-style: none; }
:where(table) { border-collapse: collapse; text-indent: 0; }
:where(textarea) { resize: vertical; }
input, button, textarea, select { font: inherit; }
select { appearance: revert; }
a { cursor: pointer; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
dialog { all: revert; }
input[type="checkbox"], input[type="radio"] { appearance: auto; -webkit-appearance: auto; }

:root {
    /* https://utopia.fyi/type/calculator/?c=400,16,1.2,1440,18,1.2,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
    /* Minor third type scale */
    --font-size-xs: clamp(0.69rem, calc(0.66rem + 0.13vw), 0.78rem);
    --font-size-sm: clamp(0.83rem, calc(0.79rem + 0.16vw), 0.94rem);
    --font-size-md: clamp(1rem, calc(0.95rem + 0.19vw), 1.13rem);
    --font-size-lg: clamp(1.2rem, calc(1.14rem + 0.23vw), 1.35rem);
    --font-size-xl: clamp(1.44rem, calc(1.37rem + 0.28vw), 1.62rem);
    --font-size-2xl: clamp(1.73rem, calc(1.65rem + 0.33vw), 1.94rem);
    --font-size-3xl: clamp(2.07rem, calc(1.97rem + 0.40vw), 2.33rem);
    --font-size-4xl: clamp(2.49rem, calc(2.37rem + 0.48vw), 2.8rem);
    --font-size-5xl: clamp(2.99rem, calc(2.84rem + 0.57vw), 3.36rem);
    /* https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */
    --line-height: calc(0.25rem + 2ex + 0.25rem);
    /* https://utopia.fyi/space/calculator/?c=400,16,1.2,1440,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-xl */
    --space-3xs: clamp(0.25rem, calc(0.23rem + 0.10vw), 0.31rem);
    --space-2xs: clamp(0.5rem, calc(0.48rem + 0.10vw), 0.56rem);
    --space-xs: clamp(0.75rem, calc(0.7rem + 0.19vw), 0.85rem);
    --space-sm: clamp(1rem, calc(0.95rem + 0.19vw), 1.13rem);
    --space-md: clamp(1.5rem, calc(1.43rem + 0.29vw), 1.69rem);
    --space-lg: clamp(2rem, calc(1.9rem + 0.38vw), 2.25rem);
    /* XL, 2XL and 3XL are steeper than the calculator's steps, which all grow by the same 12.5%: they keep its sizes at 1440px (54, 72 and 108px) but start at 36, 40 and 48px at 400px, so large padding and gaps suit phones too. 3XL is the calculator's xl-3xl pair. */
    --space-xl: clamp(2.25rem, calc(1.83rem + 1.73vw), 3.38rem);
    --space-2xl: clamp(2.5rem, calc(1.73rem + 3.08vw), 4.5rem);
    --space-3xl: clamp(3rem, calc(1.56rem + 5.77vw), 6.75rem);
    --page-gutter: calc(var(--space-lg) / 2);
    --column-gap: var(--space-lg);
    --stacked-column-gap: var(--space-lg);
    /* corner sizes: a column's corners and a rounded photo's Small, Medium and Large */
    --radius-sm: 6px;
    --radius-md: 14px;
    --radius-lg: 28px;
    --radius-full: 50%;
    --shadow-sm: 0 2px 3px;
    --shadow-md: 0 8px 14px;
    --shadow-lg: 0 18px 26px;
    /* the tones' colours: admin's names, the website's values (statuses, and the warning and info alerts) */
    --green-colour: #2ECC40;
    --orange-colour: #FF851B;
    --red-colour: #FF4136;
    --light-blue-colour: #59A3FC;
    /* greys: admin's names, the website's values (the neutral status, the "Filtered by" chips, the events list's switch) */
    --grey-200: #eee;
    --grey-400: #999;
    --grey-800: #333;
    /* page layers, lowest first */
    --z-index-cookie-bar: 96;
    --z-index-header: 97;
    --z-index-drawer-overlay: 98;
    --z-index-drawer-overlay-open: 99;
    --z-index-drawer: 100;
    --z-index-dropdown: 100;
    --z-index-logged-in-bar: 101;
    --z-index-processing: 1000;
}

:root,
.row-wrapper,
.column {
    --paragraph-font-size: calc(var(--font-size-md) * (1 + var(--paragraph-font-size-adjustment-percentage) / 100));
    --paragraph-font-size-xs: calc(var(--font-size-xs) * (1 + var(--paragraph-font-size-adjustment-percentage) / 100));
    --paragraph-font-size-sm: calc(var(--font-size-sm) * (1 + var(--paragraph-font-size-adjustment-percentage) / 100));
    --paragraph-font-size-lg: calc(var(--font-size-lg) * (1 + var(--paragraph-font-size-adjustment-percentage) / 100));
    --paragraph-line-height: calc(var(--line-height) * (1 + var(--paragraph-line-height-adjustment-percentage) / 100));
    --heading-1-font-size: calc(var(--font-size-3xl) * (1 + var(--heading-1-font-size-adjustment-percentage) / 100));
    --heading-1-display-font-size: calc(var(--font-size-4xl) * (1 + var(--heading-1-font-size-adjustment-percentage) / 100));
    --heading-1-line-height: calc(var(--line-height) * (1 + var(--heading-1-line-height-adjustment-percentage) / 100));
    --heading-2-font-size: calc(var(--font-size-2xl) * (1 + var(--heading-2-font-size-adjustment-percentage) / 100));
    --heading-2-line-height: calc(var(--line-height) * (1 + var(--heading-2-line-height-adjustment-percentage) / 100));
    --heading-3-font-size: calc(var(--font-size-xl) * (1 + var(--heading-3-font-size-adjustment-percentage) / 100));
    --heading-3-line-height: calc(var(--line-height) * (1 + var(--heading-3-line-height-adjustment-percentage) / 100));
    --heading-4-font-size: calc(var(--font-size-lg) * (1 + var(--heading-4-font-size-adjustment-percentage) / 100));
    --heading-4-line-height: calc(var(--line-height) * (1 + var(--heading-4-line-height-adjustment-percentage) / 100));
    --eyebrow-font-size: calc(var(--font-size-sm) * (1 + var(--eyebrow-font-size-adjustment-percentage) / 100));
    --eyebrow-line-height: calc(var(--line-height) * (1 + var(--eyebrow-line-height-adjustment-percentage) / 100));
    --badge-font-size: calc(var(--font-size-sm) * (1 + var(--badge-font-size-adjustment-percentage) / 100));
    --badge-line-height: calc(var(--line-height) * (1 + var(--badge-line-height-adjustment-percentage) / 100));
    --blockquote-font-size: calc(var(--font-size-md) * (1 + var(--blockquote-font-size-adjustment-percentage) / 100));
    --blockquote-line-height: calc(var(--line-height) * (1 + var(--blockquote-line-height-adjustment-percentage) / 100));
    --button-font-size: calc(var(--font-size-md) * (1 + var(--button-font-size-adjustment-percentage) / 100));
    --button-font-size-xs: calc(var(--font-size-xs) * (1 + var(--button-font-size-adjustment-percentage) / 100));
    --button-font-size-sm: calc(var(--font-size-sm) * (1 + var(--button-font-size-adjustment-percentage) / 100));
    --button-font-size-lg: calc(var(--font-size-lg) * (1 + var(--button-font-size-adjustment-percentage) / 100));
    --header-logo-title-font-size: calc(var(--font-size-xl) * (1 + var(--header-logo-title-font-size-adjustment-percentage) / 100));
    --header-logo-title-line-height: calc(var(--line-height) * (1 + var(--header-logo-title-line-height-adjustment-percentage) / 100));
    --header-top-navigation-font-size: calc(var(--font-size-md) * (1 + var(--header-top-navigation-font-size-adjustment-percentage) / 100));
    --header-top-navigation-font-size-sm: calc(var(--font-size-sm) * (1 + var(--header-top-navigation-font-size-adjustment-percentage) / 100));
    --header-main-navigation-font-size: calc(var(--font-size-md) * (1 + var(--header-main-navigation-font-size-adjustment-percentage) / 100));
    --header-main-navigation-2nd-level-font-size: calc(var(--font-size-md) * (1 + var(--header-main-navigation-2nd-level-font-size-adjustment-percentage) / 100));
}

body {
    font-size: var(--paragraph-font-size);
    line-height: var(--paragraph-line-height);
    font-family: var(--paragraph-font-family-name), system-ui, var(--paragraph-font-family-category);
    text-transform: var(--paragraph-text-transform);
    font-weight: var(--paragraph-font-weight);
    letter-spacing: var(--paragraph-letter-spacing);
    background: var(--background-colour);
    --row-background-primary-colour: var(--background-colour);
    --row-background-secondary-colour: var(--background-colour);
    --row-background-gradient-angle: 225deg;
    color: var(--paragraph-colour);
}

strong {
    font-weight: bolder;
}

s {
    text-decoration: line-through;
}

sub {
    vertical-align: sub;
    font-size: smaller;
}

sup {
    vertical-align: super;
    font-size: smaller;
}

em {
    font-style: italic;
}

hr {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
    border: 0px;
    height: var(--horizontal-line-height);
    background: var(--horizontal-line-colour);
    width: var(--horizontal-line-width);
    max-width: 100%;
}

.horizontal-line-underneath {
    border-bottom: 1px solid var(--horizontal-line-colour);
    padding-bottom: var(--space-2xs);
}

h1.display {
    font-size: var(--heading-1-display-font-size);
    line-height: var(--heading-1-line-height);
}

h1 {
    font-size: var(--heading-1-font-size);
    line-height: var(--heading-1-line-height);
    font-family: var(--heading-1-font-family-name), system-ui, var(--heading-1-font-family-category);
    text-transform: var(--heading-1-text-transform);
    font-weight: var(--heading-1-font-weight);
    letter-spacing: var(--heading-1-letter-spacing);
    color: var(--heading-1-colour);
}

h2 {
    font-size: var(--heading-2-font-size);
    line-height: var(--heading-2-line-height);
    font-family: var(--heading-2-font-family-name), system-ui, var(--heading-2-font-family-category);
    text-transform: var(--heading-2-text-transform);
    font-weight: var(--heading-2-font-weight);
    letter-spacing: var(--heading-2-letter-spacing);
    color: var(--heading-2-colour);
}

h3 {
    font-size: var(--heading-3-font-size);
    line-height: var(--heading-3-line-height);
    font-family: var(--heading-3-font-family-name), system-ui, var(--heading-3-font-family-category);
    text-transform: var(--heading-3-text-transform);
    font-weight: var(--heading-3-font-weight);
    letter-spacing: var(--heading-3-letter-spacing);
    color: var(--heading-3-colour);
}

h4 {
    font-size: var(--heading-4-font-size);
    line-height: var(--heading-4-line-height);
    font-family: var(--heading-4-font-family-name), system-ui, var(--heading-4-font-family-category);
    text-transform: var(--heading-4-text-transform);
    font-weight: var(--heading-4-font-weight);
    letter-spacing: var(--heading-4-letter-spacing);
    color: var(--heading-4-colour);
}

h5 {
    font-weight: 700;
    font-size: calc((var(--font-size-md) * 1.1) * (1 + var(--paragraph-font-size-adjustment-percentage) / 100));
    line-height: var(--paragraph-line-height);
}

p.lead {
    font-size: var(--paragraph-font-size-lg);
    line-height: var(--paragraph-line-height);
}

/* Text sizes (admin's, with the paragraph's sizes; xs is the website's own) and alignment. */
.text-size-sm {
    font-size: var(--paragraph-font-size-sm);
    line-height: var(--paragraph-line-height);
}

.text-size-xs {
    font-size: var(--paragraph-font-size-xs);
    line-height: var(--paragraph-line-height);
}

.text-align-right {
    text-align: right;
}

p.eyebrow,
.eyebrow {
    display: block;
    font-size: var(--eyebrow-font-size);
    line-height: var(--eyebrow-line-height);
    font-family: var(--eyebrow-font-family-name), system-ui, var(--eyebrow-font-family-category);
    text-transform: var(--eyebrow-text-transform);
    font-weight: var(--eyebrow-font-weight);
    letter-spacing: var(--eyebrow-letter-spacing);
    color: var(--eyebrow-colour);
}

p {
    color: var(--paragraph-colour);
    font-size: var(--paragraph-font-size);
    line-height: var(--paragraph-line-height);
    font-weight: var(--paragraph-font-weight);
    letter-spacing: var(--paragraph-letter-spacing);
}

blockquote {
    padding: var(--space-md);
    background: var(--blockquote-background-colour);
    border-width: var(--blockquote-border-width);
    border-radius: var(--blockquote-border-radius);
    border-style: solid;
    border-color: var(--blockquote-border-colour);
}

blockquote p {
    font-size: var(--blockquote-font-size);
    line-height: var(--blockquote-line-height);
    font-family: var(--blockquote-font-family-name), system-ui, var(--blockquote-font-family-category);
    text-transform: var(--blockquote-text-transform);
    font-weight: var(--blockquote-font-weight);
    letter-spacing: var(--blockquote-letter-spacing);
}

a {
    color: var(--link-colour);
}

a:hover {
    color: var(--link-hover-colour);
}

/* The reset takes away the browser's focus ring. Links, buttons and anything else that takes focus get it back, for the
   keyboard only; it's the browser's own, which shows on light and dark backgrounds. Form fields have their own, below. */
:is(a, button, summary, [tabindex]):focus-visible {
    outline: revert;
}

h1 i,
h2 i,
h3 i,
h4 i,
h5 i,
p i,
a i {
    margin-right: 0.5em;
}

/* The bar's own colours (its inline style) set its paragraph colour, which its words outside a paragraph take too. */
.notification-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    justify-items: center;
    background: linear-gradient(var(--row-background-gradient-angle), var(--row-background-primary-colour), var(--row-background-secondary-colour));
    margin-bottom: var(--space-3xs);
    color: var(--paragraph-colour);
}

.notification-bar-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--space-2xs);
    column-gap: var(--space-sm);
    justify-content: center;
    position: relative;
    padding: var(--space-xs) var(--space-xs);
}

.notification-bar-content p {
    text-align: center;
    font-size: var(--paragraph-font-size-sm);
    line-height: var(--paragraph-line-height);
}

.notification-bar-close button {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    color: var(--link-colour);
    cursor: pointer;
}

.notification-bar-close button:hover {
    color: var(--link-hover-colour);
}

.notification-bar-close button i {
    margin: 0;
}

.header {
    user-select: none;
    position: sticky;
    z-index: var(--z-index-header);
    top: 0;
    width: 100%;
    display: block;
    background: linear-gradient(var(--header-background-gradient-angle), var(--header-background-primary-colour), var(--header-background-secondary-colour));
    border-bottom-style: solid;
    border-bottom-width: var(--header-border-bottom-width);
    border-bottom-color: var(--header-border-bottom-colour);
}

.header.headroom {
    transition: transform 0.2s ease-in;
    will-change: transform;
}

.header.headroom--unpinned {
    transform: translateY(-100%);
}

.header.headroom--pinned {
    transform: translateY(0);
}

/* When scrolling back up (Website > Settings > Header): the logo and menu bar comes back on its own, what's above it
   (the admin toolbar, the notification bar, the top bar) sliding out of sight, measured by the header's script; at the top
   of the page the whole header shows. Nothing: the header stays at the top of the page and scrolls away with it. */
.header[data-on-scroll-up="logo_and_menu"].headroom--pinned.headroom--not-top {
    transform: translateY(calc(-1 * var(--header-above-bar-height, 0px)));
}

.header[data-on-scroll-up="nothing"] {
    position: relative;
}

body.content-goes-underneath-header {
    --header-height: 6.875rem;
}

body.content-goes-underneath-header .header {
    position: fixed;
}

body.content-goes-underneath-header .header[data-on-scroll-up="nothing"] {
    position: absolute;
}

/* At the top of the page the header is see-through over the hero, and its words are white over a dark hero and black over
   a light one (the hero image's or page's colour scheme, data-hero-colour-scheme), whatever the header's own colours are,
   as those are chosen for its own background. */
body.content-goes-underneath-header .header.headroom--top {
    --header-background-primary-colour: transparent;
    --header-background-secondary-colour: transparent;
    --header-background-gradient-angle: 180deg;
    border-bottom-width: 0;
}

body.content-goes-underneath-header .header.headroom--top[data-hero-colour-scheme="dark"] {
    --header-logo-title-colour: white;
    --header-mobile-navigation-colour: white;
    --header-top-navigation-link-colour: white;
    --header-top-navigation-link-hover-colour: rgba(255,255,255,0.9);
    --header-main-navigation-link-colour: white;
    --header-main-navigation-link-selected-colour: white;
    --header-main-navigation-link-hover-colour: rgba(255,255,255,0.9);
}

body.content-goes-underneath-header .header.headroom--top[data-hero-colour-scheme="light"] {
    --header-logo-title-colour: black;
    --header-mobile-navigation-colour: black;
    --header-top-navigation-link-colour: black;
    --header-top-navigation-link-hover-colour: rgba(0,0,0,0.9);
    --header-main-navigation-link-colour: black;
    --header-main-navigation-link-selected-colour: black;
    --header-main-navigation-link-hover-colour: rgba(0,0,0,0.9);
}

body.content-goes-underneath-header .header.headroom--top .header-bottom-logo img.not-hero-row-logo {
    display: none;
}

body.content-goes-underneath-header .header.headroom--not-top .header-bottom-logo img.hero-row-logo {
    display: none;
}

.header-top-wrapper {
    display: none;
}

.header-bottom-layout-left-right-column,
.header-bottom-layout-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--page-gutter);
    /* Pull the right-hand icons out by their links' padding, so the icons line up with the page gutter. */
    margin-right: -0.9375rem;
}

.header-main-navigation {
    display: none;
}

.header-bottom-logo a {
    display: block;
    padding: 1.09375rem 0;
    font-size: var(--header-logo-title-font-size);
    line-height: var(--header-logo-title-line-height);
    color: var(--header-logo-title-colour);
    font-family: var(--header-logo-title-font-family-name), system-ui, var(--header-logo-title-font-family-category);
    text-transform: var(--header-logo-title-text-transform);
    font-weight: var(--header-logo-title-font-weight);
    letter-spacing: var(--header-logo-title-letter-spacing);
}

.header-bottom-logo img {
    max-height: clamp(2.5rem, calc(4.6875rem * (1 + var(--header-logo-size-adjustment-percentage) / 100)), 4.6875rem);
    max-width: 100%;
}

.header-mobile-navigation {
    font-size: var(--font-size-lg);
    line-height: var(--line-height);
    white-space: nowrap;
    margin-right: 0.1875rem;
}

.header-mobile-navigation :is(a, button) {
    padding: 0.625rem 0.9375rem;
    color: var(--header-mobile-navigation-colour);
}

/* A button is laid out as an inline block, so its padding would make the line taller: its margins take that back out, so
   it sits as the cart link beside it does. */
.header-mobile-navigation button {
    margin-block: -0.625rem;
    cursor: pointer;
}

.header-mobile-navigation :is(a, button) i {
    margin: 0;
}

/* Drawers, the mobile menu and, on mobile, the listing filters: a modal dialog sliding in from the end of the screen
   (data-side="start": from the start), its backdrop fading in behind it. The page behind doesn't scroll while one is open. */
dialog.drawer {
    --drawer-closed-transform: translate3d(100%, 0, 0);
    inset: 0 0 0 auto;
    width: 300px;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    overscroll-behavior: contain;
    overflow-y: scroll;
    scrollbar-width: none;
    transform: var(--drawer-closed-transform);
    transition: transform 0.3s, overlay 0.3s allow-discrete, display 0.3s allow-discrete;
}

dialog.drawer[data-side="start"] {
    --drawer-closed-transform: translate3d(-100%, 0, 0);
    inset: 0 auto 0 0;
}

dialog.drawer[open] {
    display: flex;
    flex-direction: column;
    transform: translate3d(0, 0, 0);
}

@starting-style {
    dialog.drawer[open] {
        transform: var(--drawer-closed-transform);
    }
}

@media (prefers-reduced-motion: reduce) {
    dialog.drawer {
        transition: none;
    }
}

dialog.drawer::backdrop {
    background: rgba(40, 40, 40, 0);
    transition: background 0.3s, overlay 0.3s allow-discrete, display 0.3s allow-discrete;
}

dialog.drawer[open]::backdrop {
    background: rgba(40, 40, 40, 0.75);
}

@starting-style {
    dialog.drawer[open]::backdrop {
        background: rgba(40, 40, 40, 0);
    }
}

dialog.drawer::-webkit-scrollbar {
    display: none;
}

html:has(dialog.drawer[open]) {
    overflow: hidden;
}

/* A drawer's last part fills the rest of it, so a click on an empty part isn't taken for a click on the backdrop. */
dialog.drawer > :last-child {
    flex-grow: 1;
}

.mobile-menu {
    background: linear-gradient(var(--mobile-menu-background-gradient-angle), var(--mobile-menu-background-primary-colour), var(--mobile-menu-background-secondary-colour));
}

.mobile-menu a {
    font-size: 1.125rem;
    color: var(--mobile-menu-link-colour);
    line-height: var(--line-height);
}

.mobile-menu a[href]:hover {
    color: var(--mobile-menu-link-hover-colour);
    background: var(--mobile-menu-link-hover-background-colour);
}

.mobile-menu a:not([href]) {
    cursor: initial;
}

.mobile-menu a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.mobile-menu-close {
    text-align: right;
}

.mobile-menu-close button {
    display: inline-block;
    padding: 0.9375rem 1.25rem;
    font-size: 1.25rem;
    line-height: var(--line-height);
    color: var(--mobile-menu-link-colour);
    cursor: pointer;
}

.mobile-menu-close button i {
    margin: 0;
}

/* The mobile menu's link groups (.navigation-group, the group in data-group), in the top bar's type; the main navigation's
   group is in its own type, with its dropdowns' pages indented under their page and arrows in front of them. */
.mobile-menu .navigation-group {
    padding-bottom: 1.875rem;
    font-family: var(--header-top-navigation-font-family-name), system-ui, var(--header-top-navigation-font-family-category);
    text-transform: var(--header-top-navigation-text-transform);
    font-weight: var(--header-top-navigation-font-weight);
    letter-spacing: var(--header-top-navigation-letter-spacing);
}

.mobile-menu .navigation-group ul li a {
    display: block;
    padding: 0.625rem 1.875rem;
}

.mobile-menu .navigation-group ul li a i {
    margin-right: 0.78125rem;
}

.mobile-menu .navigation-group[data-group="main"] {
    font-family: var(--header-main-navigation-font-family-name), system-ui, var(--header-main-navigation-font-family-category);
    text-transform: var(--header-main-navigation-text-transform);
    font-weight: var(--header-main-navigation-font-weight);
    letter-spacing: var(--header-main-navigation-letter-spacing);
}

.mobile-menu .navigation-group[data-group="main"] ul li a {
    display: flex;
}

.mobile-menu .navigation-group[data-group="main"] ul li ul li a {
    padding-left: 3.125rem;
    text-transform: var(--header-main-navigation-2nd-level-text-transform);
    font-weight: var(--header-main-navigation-2nd-level-font-weight);
    letter-spacing: var(--header-main-navigation-2nd-level-letter-spacing);
}

.mobile-menu .navigation-group[data-group="main"] ul li ul li a i {
    margin-right: 0.625rem;
}

.dot-wrapper {
    position: relative;
}

.dot {
    border-radius: 0.5em;
    width: 0.5em;
    height: 0.5em;
    position: absolute;
    top: -0.2em;
    right: -0.2em;
    background: var(--header-top-navigation-dot-colour);
}

.cart-item-count {
    margin-left: 0.3125rem;
}

.cart-item-count::before {
    content: '(';
}

.cart-item-count::after {
    content: ')';
}

body.content-goes-underneath-header main .row.first {
    margin-top: var(--header-height);
}

@media screen and (width >= 1024px) {
    body.content-goes-underneath-header.header-bottom-layout-left-right {
        --header-height: 9.375rem;
    }

    body.content-goes-underneath-header.header-bottom-layout-top-bottom {
        --header-height: 15rem;
    }

    body.content-goes-underneath-header .header.headroom--top {
        --header-top-navigation-border-bottom-colour: transparent;
        --header-top-navigation-background-primary-colour: transparent;
        --header-top-navigation-background-secondary-colour: transparent;
        --header-main-navigation-border-top-colour: transparent;
        --header-main-navigation-background-primary-colour: transparent;
        --header-main-navigation-background-secondary-colour: transparent;
    }

    .header-top-wrapper {
        display: block;
        background: linear-gradient(var(--header-top-navigation-background-gradient-angle), var(--header-top-navigation-background-primary-colour), var(--header-top-navigation-background-secondary-colour));
        border-bottom-style: solid;
        border-bottom-width: var(--header-top-navigation-border-bottom-width);
        border-bottom-color: var(--header-top-navigation-border-bottom-colour);
    }

    /* Pull the top bar out by its links' padding, so the link text lines up with the page gutter. */
    .header-top.column {
        margin-left: calc(-1 * var(--header-top-column-horizontal-padding-reduction));
        margin-right: calc(-1 * var(--header-top-column-horizontal-padding-reduction));
    }

    .header-top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: var(--column-gap);
        font-family: var(--header-top-navigation-font-family-name), system-ui, var(--header-top-navigation-font-family-category);
        text-transform: var(--header-top-navigation-text-transform);
        font-weight: var(--header-top-navigation-font-weight);
        letter-spacing: var(--header-top-navigation-letter-spacing);
    }

    .header-top ul {
        display: flex;
        flex-direction: row;
    }

    .header-top ul li {
        white-space: nowrap;
    }

    .header-top ul li a {
        display: block;
        padding: 0.46875rem 0.78125rem;
        color: var(--header-top-navigation-link-colour);
    }

    .header-top ul li a:hover {
        color: var(--header-top-navigation-link-hover-colour);
        background: var(--header-top-navigation-link-hover-background-colour);
    }

    .header-top ul li a[aria-current] {
        color: var(--header-top-navigation-link-selected-colour);
        background: var(--header-top-navigation-link-selected-background-colour);
    }

    .header-top-left {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        column-gap: 1.875rem;
    }

    .header-top-right {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        column-gap: 1.875rem;
    }

    .header-top-left ul {
        justify-content: flex-start;
    }

    .header-top-right ul {
        justify-content: flex-end;
    }

    .header-top .navigation-group[data-group="social_media"] ul {
        font-size: var(--header-top-navigation-font-size);
    }

    .header-top .navigation-group[data-group="social_media"] ul li a {
        padding: 0.46875rem 0.625rem;
    }

    .header-top .navigation-group[data-group="social_media"] ul li a i {
        margin: 0;
    }

    /* The icons' names, kept for screen readers. */
    .header-top .navigation-group[data-group="social_media"] ul li a span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .header-top .navigation-group:is([data-group="contact"], [data-group="utility"], [data-group="custom"]) ul {
        flex-wrap: wrap;
        font-size: var(--header-top-navigation-font-size-sm);
    }

    /* Pull the main navigation out by its links' padding, so the last link's text lines up with the page gutter. */
    .header-bottom-layout-left-right-column {
        gap: var(--column-gap);
        margin-right: calc(-1 * var(--header-bottom-layout-left-right-column-horizontal-padding-reduction));
    }

    /* The logo's size in each layout (the body's class says which). */
    .header-bottom-layout-left-right .header-bottom-logo a {
        padding: 1.25rem 0;
        max-width: clamp(12.5rem, calc(18.75rem * (1 + var(--header-logo-size-adjustment-percentage) / 100)), 33vw) ;
    }

    .header-bottom-layout-left-right .header-bottom-logo img {
        max-width: clamp(12.5rem, calc(18.75rem * (1 + var(--header-logo-size-adjustment-percentage) / 100)), 33vw);
        max-height: clamp(4.6875rem, calc(6.25rem * (1 + var(--header-logo-size-adjustment-percentage) / 100)), 9.375rem);
    }

    .header-bottom-layout-top-bottom .header-bottom-logo a {
        padding: 1.875rem 0;
        max-width: clamp(12.5rem, calc(25rem * (1 + var(--header-logo-size-adjustment-percentage) / 100)), 50vw);
    }

    .header-bottom-layout-top-bottom .header-bottom-logo img {
        max-width: clamp(12.5rem, calc(25rem * (1 + var(--header-logo-size-adjustment-percentage) / 100)), 50vw);
        max-height: clamp(4.6875rem, calc(6.25rem * (1 + var(--header-logo-size-adjustment-percentage) / 100)), 9.375rem);
    }

    .header-bottom-layout-top,
    .header-bottom-layout-bottom {
        justify-content: center;
    }

    .header-mobile-navigation {
        display: none;
    }

    .header-bottom-layout-bottom-wrapper {
        border-top-style: solid;
        border-top-width: var(--header-main-navigation-border-top-width);
        border-top-color: var(--header-main-navigation-border-top-colour);
        background: linear-gradient(var(--header-main-navigation-background-gradient-angle), var(--header-main-navigation-background-primary-colour), var(--header-main-navigation-background-secondary-colour));
    }

    .header-main-navigation {
        font-size: var(--header-main-navigation-font-size);
        line-height: var(--line-height);
        display: block;
        font-family: var(--header-main-navigation-font-family-name), system-ui, var(--header-main-navigation-font-family-category);
        text-transform: var(--header-main-navigation-text-transform);
        font-weight: var(--header-main-navigation-font-weight);
        letter-spacing: var(--header-main-navigation-letter-spacing);
    }

    .header-main-navigation ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .header-bottom-layout-left-right .header-main-navigation ul {
        justify-content: flex-end;
    }

    .header-bottom-layout-bottom .header-main-navigation ul {
        justify-content: center;
    }

    .header-main-navigation ul li {
        position: relative;
    }

    .header-main-navigation ul li :is(a, button) {
        display: block;
        padding: 0.625rem 0.9375rem;
        color: var(--header-main-navigation-link-colour);
    }

    .header-main-navigation ul li a:not([href]) {
        cursor: initial;
    }

    .header-main-navigation ul li button {
        cursor: pointer;
    }

    /* Only the top level shows where you are (its page, or a page under it, is current: aria-current), the words and the
       arrow: inside a dropdown, the current page looks like the dropdown's other pages. */
    .header-main-navigation > ul > li:has(> [aria-current]) > :is(a, button) {
        color: var(--header-main-navigation-link-selected-colour);
        background: var(--header-main-navigation-link-selected-background-colour);
    }

    .header-main-navigation ul li :is(a, button) i {
        margin-left: 0.3125rem;
        margin-right: 0;
    }

    /* A page with a dropdown: its words are a link to the page, and its arrow a button beside them that opens the dropdown,
       so a finger, which can't hover, can open it too. Together they look as one item, as the link with its arrow did. */
    .header-main-navigation > ul > li {
        display: flex;
    }

    .header-main-navigation > ul > li > a:has(+ .header-main-navigation-dropdown-toggle) {
        padding-right: 0;
    }

    .header-main-navigation ul li .header-main-navigation-dropdown-toggle {
        padding-left: 0;
    }

    /* A dropdown opens on focus anywhere in it, when a button opens it (.open), or on hover with a mouse (below); Escape or
       a second click shuts it (.closed) until focus leaves it. :focus-within, not :has(:focus-visible): moving focus from
       the item into its dropdown leaves nothing focused for a moment, which hides the dropdown under :has() and loses the
       focus. */
    .header-main-navigation > ul > li:is(:focus-within, .open):not(.closed) > :is(a, button) {
        color: var(--header-main-navigation-link-hover-colour);
        background: var(--header-main-navigation-link-hover-background-colour);
    }

    /* A dropdown is as wide as its longest page, from 200px up to 320px, where longer names wrap. */
    .header-main-navigation ul li ul {
        display: none;
        background: var(--header-main-navigation-dropdown-background-colour);
        position: absolute;
        top: 100%;
        left: var(--header-main-navigation-dropdown-offset);
        width: max-content;
        min-width: 12.5rem;
        max-width: 20rem;
        text-transform: var(--header-main-navigation-2nd-level-text-transform);
        font-weight: var(--header-main-navigation-2nd-level-font-weight);
        letter-spacing: var(--header-main-navigation-2nd-level-letter-spacing);
    }

    /* Without anchor positioning, the last item's dropdown ends under the item's right edge, to stay inside the window. */
    @supports not ((anchor-scope: all) and (position-try-fallbacks: flip-inline)) {
        .header-bottom-layout-left-right .header-main-navigation ul li:last-of-type ul {
            left: unset;
            right: calc(0.9375rem - var(--header-main-navigation-dropdown-offset));
        }
    }

    /* A dropdown that would run past the window's side opens the other way, ending under its item's right edge. Each
       item is its dropdown's anchor, and the dropdown is placed in the header's box, as wide as the window, rather than
       the item's, so the browser can test it against the window's sides; the room it's tested in reaches well below the
       header, so only the sides decide. */
    @supports (anchor-scope: all) and (position-try-fallbacks: flip-inline) {
        .header-main-navigation > ul > li {
            position: static;
            anchor-name: --header-main-navigation-item;
            anchor-scope: --header-main-navigation-item;
        }

        .header-main-navigation > ul > li > ul {
            position-anchor: --header-main-navigation-item;
            position-area: bottom span-right;
            inset: 0 0 -100vh var(--header-main-navigation-dropdown-offset);
            position-try-fallbacks: flip-inline;
        }
    }

    .header-main-navigation > ul > li:is(:focus-within, .open):not(.closed) > ul {
        z-index: var(--z-index-dropdown);
        visibility: visible;
        opacity: 1;
        display: block;
    }

    /* Hover opens a dropdown only for a mouse (or anything else that hovers). A tap leaves hover on what it touched, so on
       a touch screen a tap on the words would open the dropdown (an iPad then doesn't follow the link), and one would stay
       open after a tap elsewhere. A finger opens it with its arrow. */
    @media (hover: hover) {
        .header-main-navigation > ul > li:hover:not(.closed) > :is(a, button) {
            color: var(--header-main-navigation-link-hover-colour);
            background: var(--header-main-navigation-link-hover-background-colour);
        }

        .header-main-navigation > ul > li:hover:not(.closed) > ul {
            z-index: var(--z-index-dropdown);
            visibility: visible;
            opacity: 1;
            display: block;
        }
    }

    .header-main-navigation ul li ul li {
        font-size: var(--header-main-navigation-2nd-level-font-size);
        line-height: var(--line-height);
        border-style: solid;
        border-width: var(--header-main-navigation-dropdown-border-width);
        border-color: var(--header-main-navigation-dropdown-border-colour);
    }

    .header-main-navigation ul li ul li a {
        padding: 0.625rem 0.9375rem;
        color: var(--header-main-navigation-dropdown-link-colour);
    }

    .header-main-navigation ul li ul li:not(:last-child) {
        border-bottom: 0;
    }

    .header-main-navigation ul li ul li:is(:hover, :focus-within) a {
        color: var(--header-main-navigation-dropdown-link-hover-colour);
        background: var(--header-main-navigation-dropdown-link-hover-background-colour);
    }
}

@media screen and (width >= 1600px) {
    @supports not ((anchor-scope: all) and (position-try-fallbacks: flip-inline)) {
        .header-bottom-layout-left-right .header-main-navigation ul li:last-of-type ul {
            left: calc(0.9375rem - var(--header-main-navigation-dropdown-offset));
            right: unset;
        }
    }
}

.footer {
    position: relative;
    isolation: isolate;
    background: linear-gradient(var(--footer-background-gradient-angle), var(--footer-background-primary-colour), var(--footer-background-secondary-colour));
}

.footer {
    --row-background-primary-colour: transparent;
    --row-background-secondary-colour: transparent;
}

.footer-attribution {
    text-align: var(--footer-attribution-text-align);
    padding: var(--space-sm) 0;
    background: var(--footer-attribution-background-colour);
    border-top-width: var(--footer-attribution-border-top-width);
    border-top-style: solid;
    border-top-color: var(--footer-attribution-border-top-colour);
}

.footer-attribution p {
    color: var(--footer-attribution-paragraph-colour);
    font-size: var(--paragraph-font-size-xs);
    line-height: var(--paragraph-line-height);
}

.footer-attribution a {
    color: var(--footer-attribution-link-colour);
}

.footer-attribution a:hover {
    color: var(--footer-attribution-link-hover-colour);
}

/* The bar's own colours (its inline style) set its paragraph colour, which its words outside a paragraph, such as the "or"
   before "choose cookies", take too. */
.cookie-consent-bar {
    z-index: var(--z-index-cookie-bar);
    width: 100%;
    position: fixed;
    bottom: 0;
    padding: var(--space-lg);
    background: linear-gradient(var(--row-background-gradient-angle), var(--row-background-primary-colour), var(--row-background-secondary-colour));
    color: var(--paragraph-colour);
}

/* The bar waits for the web fonts (the script after it in wrapper.xsl), as its words gaining a line when they arrive would
   move the whole bar, which counts against the page's Google score. It shows by itself after 6 seconds if they haven't come,
   or there's no script. */
.cookie-consent-bar:not([data-fonts-arrived]) {
    visibility: hidden;
    animation: cookie-consent-bar-waited 0s 6s forwards;
}

@keyframes cookie-consent-bar-waited {
    to {
        visibility: visible;
    }
}

/* "choose cookies" is a button (it shows the choices), drawn as the bar's links. */
.cookie-consent-bar-choose-cookies-link {
    color: var(--link-colour);
    cursor: pointer;
}

.cookie-consent-bar-choose-cookies-link:hover {
    color: var(--link-hover-colour);
}

.logged-in-bar {
    opacity: 0;
    transition: all .75s ease;
    position: fixed;
    bottom: 0;
    padding: var(--space-xs) var(--space-xs);
    background-color: var(--form-success-colour);
    color: #fff;
    text-align: center;
    z-index: var(--z-index-logged-in-bar);
    width: 100%;
}

.logged-in-bar.show {
    opacity: 1;
}

/* A row band runs the full width of the page and holds the background, media and shape dividers. It's a grid of three tracks, [top divider] [row] [bottom divider], with the media and overlay spanning all three. It's its own layering context: media 1, overlay 2, shape dividers 3, the row 4, in-front dividers 5. It clips with overflow: clip, which unlike hidden isn't a scroll container, so the scroll timelines of the column backgrounds inside it follow the page. Its words outside a paragraph take its paragraph colour, which its Colours page can set. */
.row-wrapper {
    display: grid;
    grid-template-rows: auto 1fr auto;
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: linear-gradient(var(--row-background-gradient-angle), var(--row-background-primary-colour), var(--row-background-secondary-colour));
    color: var(--paragraph-colour);
}

.row-wrapper > * {
    grid-row: 1;
    grid-column: 1;
    z-index: 3;
}

.row-wrapper > .row {
    grid-row: 2;
    z-index: 4;
}

.row-wrapper > .row ~ * {
    grid-row: 3;
}

/* Where a band's shape divider meets the next band on a fraction of a pixel, Chrome shows a hairline of the band's own background or photo through the divider's soft edge. So a band with a top or bottom divider overlaps the band beside that edge by a pixel, and its own background, photo and overlay stop a pixel short of it, leaving only the divider and the colour it matches at the seam. */
.row-wrapper:has(> .shape-divider.top) {
    margin-top: -1px;
    background-position: 0 1px;
    background-size: 100% calc(100% - 1px);
    background-repeat: no-repeat;
}

.row-wrapper:has(> .shape-divider.bottom) {
    margin-bottom: -1px;
    background-size: 100% calc(100% - 1px);
    background-repeat: no-repeat;
}

.row-wrapper:has(> .shape-divider.top):has(> .shape-divider.bottom) {
    background-size: 100% calc(100% - 2px);
}

.row-wrapper:has(> .shape-divider.top) > :is(.image, .video, .overlay) {
    margin-top: 1px;
}

.row-wrapper:has(> .shape-divider.bottom) > :is(.image, .video, .overlay) {
    margin-bottom: 1px;
}

/* A row's or column's background is a layer behind the overlay: an image (a picture, or tiles) or a video, with data-fit from its Fit setting and its focal point as the object or background position (inline). A row's layers are in its band; a column's are in div.column-background, which covers the column behind its content. Every fit but aspect_ratio takes the band's or column's size: cover crops to fill it, fill stretches to it, and repeat, repeat_x and repeat_y tile the original image. aspect_ratio has the media's shape: a band's layer has it (--aspect-ratio, inline), so the band is at least that tall, and with a maximum height a slice of it shows; a column has it itself (--column-background-aspect-ratio, inline), and columns have no maximum height. */
:is(.row-wrapper, .column-background) > :is(.image, .video) {
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.row-wrapper > :is(.image, .video) {
    grid-row: 1 / -1;
}

.row-wrapper > :is(.image, .video):not([data-fit="aspect_ratio"]),
.column-background > :is(.image, .video, .overlay) {
    position: absolute;
    inset: 0;
}

.row-wrapper > :is(.image, .video)[data-fit="aspect_ratio"] {
    aspect-ratio: var(--aspect-ratio);
    width: 100%;
    height: 100%;
}

:is(.row-wrapper, .column-background, .header, .footer) > .image img,
:is(.row-wrapper, .column-background, .header, .footer) > .image .tiles,
:is(.row-wrapper, .column-background) > .video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:is(.row-wrapper, .column-background, .header, .footer) > :is(.image, .video)[data-fit="fill"] :is(img, video) {
    object-fit: fill;
}

:is(.row-wrapper, .column-background, .header, .footer) > .image[data-fit="repeat"] .tiles {
    background-repeat: repeat;
}

:is(.row-wrapper, .column-background, .header, .footer) > .image[data-fit="repeat_x"] .tiles {
    background-repeat: repeat-x;
}

:is(.row-wrapper, .column-background, .header, .footer) > .image[data-fit="repeat_y"] .tiles {
    background-repeat: repeat-y;
}

.row-wrapper > .overlay {
    grid-row: 1 / -1;
    z-index: 2;
    width: 100%;
}

.column-background > .overlay {
    z-index: 2;
}

/* The header's and footer's background image is behind all their rows, and behind the attribution when that has no colour of its own. It fills them, as their content sets their height, on its own layer so the header's dropdowns aren't cut off. */
:is(.header, .footer) > :is(.image, .overlay) {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* Over a hero the header is see-through, so its image waits until it turns solid, and it's only loaded then. */
body.content-goes-underneath-header .header.headroom--top > :is(.image, .overlay) {
    display: none;
}

/* A header row with no colour of its own lets the image show. */
body:not(.content-goes-underneath-header) .header:has(> .image),
body.content-goes-underneath-header .header.headroom--not-top:has(> .image) {
    --row-background-primary-colour: transparent;
    --row-background-secondary-colour: transparent;
}

/* An overlay's style shapes it, in its colour (--overlay-colour, inline; black by default), at its opacity (inline): flat is the colour all over, a fade is strongest on its side and clear on the other, and a vignette is strongest at the edges. Rows, columns, heroes, image lists and category cards all draw theirs this way. */
.overlay[data-style="flat"] {
    background: var(--overlay-colour, #000);
}

.overlay[data-style="fade_from_bottom"] {
    background: linear-gradient(to top, var(--overlay-colour, #000), transparent);
}

.overlay[data-style="fade_from_top"] {
    background: linear-gradient(to bottom, var(--overlay-colour, #000), transparent);
}

.overlay[data-style="fade_from_left"] {
    background: linear-gradient(to right, var(--overlay-colour, #000), transparent);
}

.overlay[data-style="fade_from_right"] {
    background: linear-gradient(to left, var(--overlay-colour, #000), transparent);
}

.overlay[data-style="vignette"] {
    background: radial-gradient(ellipse at center, transparent 35%, var(--overlay-colour, #000));
}

/* A column with a background or a shape divider is its own layering context, with the background (and dividers behind the content) behind its content and following its corners. They come after the content, so they never change the content's spacing. */
.column:has(> :is(.column-background, .shape-divider)) {
    position: relative;
    isolation: isolate;
}

/* The whole image makes the column at least its shape. A grid item with an aspect ratio isn't stretched across its track, so without justify-self its width would follow its height when the row stretches it (Fill the row, beside a taller column). */
.column:has(> .column-background > [data-fit="aspect_ratio"]) {
    aspect-ratio: var(--column-background-aspect-ratio);
    justify-self: stretch;
}

.column > .column-background {
    position: absolute;
    inset: 0;
    z-index: -1;
    margin: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

/* Maximum content width: a column's content, not its background, is no wider than the column's setting in pixels (--column-content-max-width, from rows.xsl), and its horizontal alignment places it. Each block of the content gets the width, so the blocks line up. It's a maximum, so a column narrower than it, as on mobile, is unchanged. */
.column[data-content-max-width] > :not(.column-background, .shape-divider) {
    max-width: var(--column-content-max-width);
}

.column[data-horizontal-alignment="centre"] > :not(.column-background, .shape-divider) {
    margin-inline: auto;
}

.column[data-horizontal-alignment="right"] > :not(.column-background, .shape-divider) {
    margin-inline-start: auto;
}

/* Column backgrounds edge to edge: in a row with a gutter (page or full width), the colours and photos of the columns at its ends (data-edge, from rows.xsl) run out to the screen's edges, while their content stays lined up with the page. --bleed is the distance from the row's content to the screen's edge: the gutter, and in a page width row the space beside it too (100vw counts a scrollbar; the band's clip trims what's over). Stacked, every column reaches both edges. A column's own background can't reach out, so its colour moves to a layer behind it; a column with rounded corners clips it, so it doesn't reach. */
.row[data-column-backgrounds-edge-to-edge] {
    --bleed: var(--page-gutter);
}

.row[data-column-backgrounds-edge-to-edge] > .column {
    --bleed-start: var(--bleed);
    --bleed-end: var(--bleed);
    position: relative;
    isolation: isolate;
    background: none;
}

.row[data-column-backgrounds-edge-to-edge] > .column::before {
    content: "";
    position: absolute;
    inset: 0 calc(-1 * var(--bleed-end)) 0 calc(-1 * var(--bleed-start));
    z-index: -2;
    background: linear-gradient(var(--column-background-gradient-angle), var(--column-background-primary-colour), var(--column-background-secondary-colour));
    pointer-events: none;
}

.row[data-column-backgrounds-edge-to-edge] > .column > .column-background {
    inset: 0 calc(-1 * var(--bleed-end)) 0 calc(-1 * var(--bleed-start));
}

@media screen and (width >= 768px) {
    .row[data-column-backgrounds-edge-to-edge]:not([data-width="full"]) {
        --bleed: calc(max(0px, (100vw - var(--page-width)) / 2) + var(--page-gutter));
    }

    /* side by side, only the columns at the row's ends reach out, each on its outer side */
    .row[data-column-backgrounds-edge-to-edge] > .column {
        --bleed-start: 0px;
        --bleed-end: 0px;
    }

    .row[data-column-backgrounds-edge-to-edge] > .column:is([data-edge="start"], [data-edge="both"]) {
        --bleed-start: var(--bleed);
    }

    .row[data-column-backgrounds-edge-to-edge] > .column:is([data-edge="end"], [data-edge="both"]) {
        --bleed-end: var(--bleed);
    }
}

/* Stays still: the media is pinned to the window and its layer clips it to the band or column, so the band or column slides over it. It covers the whole window, so on a phone a landscape picture is enlarged to the window's height. A column's clip follows its rounded corners (--column-border-radius), as its own corners can't clip media pinned to the window. */
.row-wrapper[data-scroll-behaviour="stays_still"] > :is(.image, .video) {
    clip-path: inset(0);
}

.column-background[data-scroll-behaviour="stays_still"] > :is(.image, .video) {
    clip-path: inset(0 round var(--column-border-radius, 0px));
}

:is(.row-wrapper, .column-background)[data-scroll-behaviour="stays_still"] > :is(.image, .video) :is(img, video, .tiles) {
    position: fixed;
    inset: 0;
}

/* Moves slowly: the media moves down through the band or column while it crosses the window, so it moves slower than the page. It's taller than the band or column by --background-travel. The whole image or video in a band (aspect_ratio, which only moves in a band with a maximum height) keeps its shape instead, and pans from its bottom to its top. Without scroll-driven animations, or for people who reduce motion, it moves with the row. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        :is(.row-wrapper, .column-background)[data-scroll-behaviour="moves_slowly"] {
            view-timeline: --background-scroll block;
        }

        :is(.row-wrapper, .column-background)[data-scroll-behaviour="moves_slowly"] > :is(.image, .video) :is(img, video, .tiles) {
            --background-travel: 20vh;
            height: calc(100% + var(--background-travel));
            animation: background-moves-slowly linear both;
            animation-timeline: --background-scroll;
            animation-range: cover;
        }

        .row-wrapper[data-scroll-behaviour="moves_slowly"] > :is(.image, .video)[data-fit="aspect_ratio"] {
            container-type: size;
        }

        .row-wrapper[data-scroll-behaviour="moves_slowly"] > :is(.image, .video)[data-fit="aspect_ratio"] :is(img, video) {
            aspect-ratio: var(--aspect-ratio);
            height: auto;
            min-height: 100%;
            animation-name: background-pans;
        }
    }
}

@keyframes background-moves-slowly {
    from {
        translate: 0 calc(-1 * var(--background-travel));
    }
    to {
        translate: 0 0;
    }
}

@keyframes background-pans {
    from {
        translate: 0 calc(100cqh - 100%);
    }
    to {
        translate: 0 0;
    }
}

.row.vertical-align-content-top {
    place-self: start center;
}

.row.vertical-align-content-centre {
    place-self: center center;
}

.row.vertical-align-content-bottom {
    place-self: end center;
}

.row.vertical-align-content-fill {
    place-self: stretch center;
}

/* Rows have the page gutter as side padding, except edge to edge ones. Below tablet width they're one column, so columns stack; from tablet width they're 12 tracks and columns span data-size of them. (Twelve tracks need room for eleven gaps, which a phone doesn't have.) The eleven gaps are there whatever the layout, so a gap is never more than a twelfth of the row: a large one (3XL is 11 × 100px) would otherwise make the row wider than a tablet's screen. */
.row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: min(var(--column-gap), 100% / 12);
    row-gap: var(--stacked-column-gap);
    align-items: start;
    align-content: start;
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.row[data-width="edge_to_edge"] {
    padding-left: 0;
    padding-right: 0;
}

/* One of our own rows' padding (an app page's, the hero's): top and bottom, or one side. A row from rows.xsl has its settings in its style. */
.row[data-padding="md"] {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

.row[data-padding="lg"] {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

.row[data-padding="xl"] {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.row[data-padding-top="lg"] {
    padding-top: var(--space-lg);
}

.row[data-padding-bottom="lg"] {
    padding-bottom: var(--space-lg);
}

/* A column's background and border colour come from its Colour settings, written inline by rows.xsl. Without them it's transparent, so the row's background shows through; with only one background colour it's solid; its borders default to the row's border colour. Its words outside a paragraph take its paragraph colour (the row's, unless it sets its own), as a row's and a bar's do. */
.column {
    --column-background-primary-colour: transparent;
    --column-background-secondary-colour: var(--column-background-primary-colour);
    --column-background-gradient-angle: 225deg;
    --column-border-colour: var(--row-border-colour);
    grid-column: 1 / -1;
    background: linear-gradient(var(--column-background-gradient-angle), var(--column-background-primary-colour), var(--column-background-secondary-colour));
    color: var(--paragraph-colour);
}

/* A column's padding comes from its Layout settings, which rows.xsl writes as custom properties. Below tablet width, where the columns stack, it's the mobile padding, which is the padding unless it's set. A shape divider beside the content adds its own room (--column-divider-space-*): on its side, and on the edge it moves to when stacked. They're declared on every column, so a column inside another doesn't inherit them, and with no specificity, so a template's own padding wins. */
:where(.column) {
    --column-padding-top: 0px;
    --column-padding-right: 0px;
    --column-padding-bottom: 0px;
    --column-padding-left: 0px;
    --column-mobile-padding-top: var(--column-padding-top);
    --column-mobile-padding-right: var(--column-padding-right);
    --column-mobile-padding-bottom: var(--column-padding-bottom);
    --column-mobile-padding-left: var(--column-padding-left);
    --column-divider-space-top: 0px;
    --column-divider-space-right: 0px;
    --column-divider-space-bottom: 0px;
    --column-divider-space-left: 0px;
    padding: calc(var(--column-mobile-padding-top) + var(--column-divider-space-top)) var(--column-mobile-padding-right) calc(var(--column-mobile-padding-bottom) + var(--column-divider-space-bottom)) var(--column-mobile-padding-left);
}

/* A divider's height narrows on small screens, to a quarter of it at the least; the zigzag's tooth is sized from it. */
.shape-divider {
    --shape-divider-size: clamp(calc(var(--height)/4), 20vw, var(--height));
    height: var(--shape-divider-size);
    width: 100%;
    -webkit-mask-image: var(--shape-divider-mask, none);
    mask-image: var(--shape-divider-mask, none);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}

.shape-divider.custom svg {
    fill: var(--colour);
    width: 100%;
    height: 100%;
}

/* Dividers behind or in front of the row are positioned against the whole band. */
.shape-divider.top.behind {
    position: absolute;
    top: 0;
    grid-row: 1 / -1;
    z-index: 3;
}

.shape-divider.bottom.behind {
    position: absolute;
    bottom: 0;
    grid-row: 1 / -1;
    z-index: 3;
}

.shape-divider.top.in-front {
    position: absolute;
    top: 0;
    grid-row: 1 / -1;
    z-index: 5;
}

.shape-divider.bottom.in-front {
    position: absolute;
    bottom: 0;
    grid-row: 1 / -1;
    z-index: 5;
}

/* Fade is eased (a smoothstep curve), so it has no hard start or sudden end; it fades from the edge it's on. */
.shape-divider.fade {
    --shape-divider-fade-direction: 180deg;
    background: linear-gradient(var(--shape-divider-fade-direction),
        var(--colour) 0%,
        color-mix(in srgb, var(--colour) 97.2%, transparent) 10%,
        color-mix(in srgb, var(--colour) 89.6%, transparent) 20%,
        color-mix(in srgb, var(--colour) 78.4%, transparent) 30%,
        color-mix(in srgb, var(--colour) 64.8%, transparent) 40%,
        color-mix(in srgb, var(--colour) 50%, transparent) 50%,
        color-mix(in srgb, var(--colour) 35.2%, transparent) 60%,
        color-mix(in srgb, var(--colour) 21.6%, transparent) 70%,
        color-mix(in srgb, var(--colour) 10.4%, transparent) 80%,
        color-mix(in srgb, var(--colour) 2.8%, transparent) 90%,
        transparent 100%);
}

.shape-divider.bottom.fade {
    --shape-divider-fade-direction: 0deg;
}

/* Each shape's drawing is written once, as --shape-divider-mask on the dividers that use it; a divider at the other edge, or the other way up, turns or flips it. */

.shape-divider.top.curve-up,
.shape-divider.bottom.curve-down {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100,0v100C60,0,40,0,0,100V0H100z'/%3E%3C/svg%3E%0A");
    background-color: var(--colour);
}

.shape-divider.bottom.curve-up,
.shape-divider.top.curve-down {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 C40 0 60 0 100 100 Z'/%3E%3C/svg%3E");
    background-color: var(--colour);
}

.shape-divider.top.curve-down,
.shape-divider.bottom.curve-down {
    transform: rotate(180deg);
}

.shape-divider.top.waves-1,
.shape-divider.bottom.waves-2 {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z'/%3E%3C/svg%3E");
    background-color: var(--colour);
}

.shape-divider.bottom.waves-1,
.shape-divider.top.waves-2 {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z'/%3E%3C/svg%3E");
    background-color: var(--colour);
}

.shape-divider.top.waves-1,
.shape-divider.bottom.waves-1 {
    transform: rotateY(180deg);
}

.shape-divider.top.waves-2,
.shape-divider.bottom.waves-2 {
    transform: rotateX(180deg);
}

.shape-divider.top.slant-up,
.shape-divider.bottom.slant-up,
.shape-divider.top.slant-down,
.shape-divider.bottom.slant-down {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M1200 120L0 16.48 0 0 1200 0 1200 120z'/%3E%3C/svg%3E");
    background-color: var(--colour);
}

.shape-divider.top.slant-up {
    transform: rotateY(180deg);
}

.shape-divider.bottom.slant-up {
    transform: rotateX(180deg);
}

.shape-divider.bottom.slant-down {
    transform: rotate(180deg);
}

.shape-divider.top.triangle-up,
.shape-divider.bottom.triangle-down {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M598.97 114.72L0 0 0 120 1200 120 1200 0 598.97 114.72z'/%3E%3C/svg%3E");
    background-color: var(--colour);
}

.shape-divider.bottom.triangle-up,
.shape-divider.top.triangle-down {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M1200 0L0 0 598.97 114.72 1200 0z'/%3E%3C/svg%3E");
    background-color: var(--colour);
}

.shape-divider.top.triangle-up,
.shape-divider.bottom.triangle-up {
    transform: rotate(180deg);
}

.shape-divider.top.waves-opacity,
.shape-divider.bottom.waves-opacity {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.28 2.17' preserveAspectRatio='none'%3E%3Cpath d='M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z'/%3E%3Cpath d='M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z' opacity='.5'/%3E%3Cpath d='M0 1.85c2.56-.83 7.68-.3 11.79-.42 4.1-.12 6.86-.61 9.58-.28 2.73.33 5.61 1.17 8.61 1 3-.19 4.73-.82 5.3-.84V.1H0z' opacity='.5'/%3E%3C/svg%3E");
    background-color: var(--colour);
}

.shape-divider.bottom.waves-opacity {
    transform: rotate(180deg);
}

/* Zigzag is a pattern: one tooth, as wide as it is deep, repeated along the edge and rounded to a whole number of teeth, so a longer edge gets more teeth, not wider ones. */
.shape-divider.zigzag {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 11' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10V1L5 11L0 1Z'/%3E%3C/svg%3E");
    --shape-divider-side-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 10' preserveAspectRatio='none'%3E%3Cg transform='matrix(0 -1 1 0 0 10)'%3E%3Cpath d='M0 0H10V1L5 11L0 1Z'/%3E%3C/g%3E%3C/svg%3E");
    background-color: var(--colour);
    -webkit-mask-repeat: round no-repeat;
    mask-repeat: round no-repeat;
    -webkit-mask-size: calc(var(--shape-divider-size) * 10 / 11) 100%;
    mask-size: calc(var(--shape-divider-size) * 10 / 11) 100%;
}

.shape-divider.bottom.zigzag {
    transform: rotate(180deg);
}

.shape-divider.top.pyramids-up,
.shape-divider.bottom.pyramids-down {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M761.9,40.6L643.1,24L333.9,93.8L0.1,1H0v99h1000V1'/%3E%3C/svg%3E");
    background-color: var(--colour);
}

.shape-divider.bottom.pyramids-up,
.shape-divider.top.pyramids-down {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M761.9,44.1L643.1,27.2L333.8,98L0,3.8V0l1000,0v3.9'/%3E%3C/svg%3E");
    background-color: var(--colour);
}

.shape-divider.top.pyramids-up,
.shape-divider.bottom.pyramids-up {
    transform: rotate(180deg);
}

.shape-divider.top.fan,
.shape-divider.bottom.fan {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 283.5 19.6' preserveAspectRatio='none'%3E%3Cpath style='opacity:0.33' d='M0 0L0 18.8 141.8 4.1 283.5 18.8 283.5 0z'/%3E%3Cpath style='opacity:0.33' d='M0 0L0 12.6 141.8 4 283.5 12.6 283.5 0z'/%3E%3Cpath style='opacity:0.33' d='M0 0L0 6.4 141.8 4 283.5 6.4 283.5 0z'/%3E%3Cpath d='M0 0L0 1.2 141.8 4 283.5 1.2 283.5 0z'/%3E%3C/svg%3E");
    background-color: var(--colour);
}

.shape-divider.bottom.fan {
    transform: rotate(180deg);
}

.shape-divider.top.half-fan-right,
.shape-divider.bottom.half-fan-right,
.shape-divider.top.half-fan-left,
.shape-divider.bottom.half-fan-left {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2600 131.1' preserveAspectRatio='none'%3E%3Cpath d='M0 0L2600 0 2600 69.1 0 0z'/%3E%3Cpath style='opacity:0.5' d='M0 0L2600 0 2600 69.1 0 69.1z'/%3E%3Cpath style='opacity:0.25' d='M2600 0L0 0 0 130.1 2600 69.1z'/%3E%3C/svg%3E");
    background-color: var(--colour);
}

.shape-divider.top.half-fan-right {
    transform: rotateY(180deg);
}

.shape-divider.bottom.half-fan-right {
    transform: rotate(180deg);
}

.shape-divider.bottom.half-fan-left {
    transform: rotateX(180deg);
}

.shape-divider.top.triangle-asymmetrical-right-down,
.shape-divider.top.triangle-asymmetrical-left-down,
.shape-divider.bottom.triangle-asymmetrical-right-up,
.shape-divider.bottom.triangle-asymmetrical-left-up {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M1200 0L0 0 892.25 114.72 1200 0z'/%3E%3C/svg%3E");
    background-color: var(--colour);
}

.shape-divider.bottom.triangle-asymmetrical-right-down,
.shape-divider.bottom.triangle-asymmetrical-left-down,
.shape-divider.top.triangle-asymmetrical-right-up,
.shape-divider.top.triangle-asymmetrical-left-up {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M892.25 114.72L0 0 0 120 1200 120 1200 0 892.25 114.72z'/%3E%3C/svg%3E");
    background-color: var(--colour);
}

.shape-divider.top.triangle-asymmetrical-left-down,
.shape-divider.bottom.triangle-asymmetrical-left-down {
    transform: rotateY(180deg);
}

.shape-divider.top.triangle-asymmetrical-right-up,
.shape-divider.bottom.triangle-asymmetrical-right-up {
    transform: rotateX(180deg);
}

.shape-divider.top.triangle-asymmetrical-left-up,
.shape-divider.bottom.triangle-asymmetrical-left-up {
    transform: rotate(180deg);
}

/* Shape dividers on a column's left and right edges (rows.xsl): drawn over the column, beside its content (which the column's padding keeps clear of it), behind its content (above its background) or in front of it, in the colour of the column beside it unless they have their own (--colour). Each type is drawn once as on a column's top edge (--shape-divider-mask), and turned to the edge it's on, never mirrored, so Out always points out of the column: side by side, the left edge's drawing is the top's turned anticlockwise (--shape-divider-side-mask) and the right edge turns the left's round. Stacked on mobile, a divider moves to the top or bottom edge (data-stacked), whichever faces the column it's beside, and the bottom turns the top's round. Its width (--width) narrows on small screens as a row divider's height does. */
.column > .shape-divider {
    --shape-divider-size: clamp(calc(var(--width) / 4), 20vw, var(--width));
    position: absolute;
    z-index: -1;
    margin: 0;
    pointer-events: none;
}

.column > .shape-divider.in-front {
    z-index: 1;
}

.column > .shape-divider:not(.fade, .custom) {
    background-color: var(--colour);
}

/* A custom divider's SVG is drawn as a row's top divider; side by side it's turned anticlockwise into the divider (sized from it as a container). */
.column > .shape-divider.custom {
    container-type: size;
}

.column > .shape-divider.curve-out {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100,0v100C60,0,40,0,0,100V0H100z'/%3E%3C/svg%3E");
    --shape-divider-side-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg transform='matrix(0 -1 1 0 0 100)'%3E%3Cpath d='M100,0v100C60,0,40,0,0,100V0H100z'/%3E%3C/g%3E%3C/svg%3E");
}

.column > .shape-divider.curve-in {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg transform='translate(100 100) scale(-1 -1)'%3E%3Cpath d='M0 100 C40 0 60 0 100 100 Z'/%3E%3C/g%3E%3C/svg%3E");
    --shape-divider-side-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg transform='matrix(0 -1 1 0 0 100)'%3E%3Cg transform='translate(100 100) scale(-1 -1)'%3E%3Cpath d='M0 100 C40 0 60 0 100 100 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.column > .shape-divider.slant-up {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform='translate(1200 0) scale(-1 1)'%3E%3Cpath d='M1200 120L0 16.48 0 0 1200 0 1200 120z'/%3E%3C/g%3E%3C/svg%3E");
    --shape-divider-side-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 1200' preserveAspectRatio='none'%3E%3Cg transform='matrix(0 -1 1 0 0 1200)'%3E%3Cg transform='translate(1200 0) scale(-1 1)'%3E%3Cpath d='M1200 120L0 16.48 0 0 1200 0 1200 120z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.column > .shape-divider.slant-down {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M1200 120L0 16.48 0 0 1200 0 1200 120z'/%3E%3C/svg%3E");
    --shape-divider-side-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 1200' preserveAspectRatio='none'%3E%3Cg transform='matrix(0 -1 1 0 0 1200)'%3E%3Cpath d='M1200 120L0 16.48 0 0 1200 0 1200 120z'/%3E%3C/g%3E%3C/svg%3E");
}

.column > .shape-divider.waves-1 {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform='translate(1200 0) scale(-1 1)'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z'/%3E%3C/g%3E%3C/svg%3E");
    --shape-divider-side-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 1200' preserveAspectRatio='none'%3E%3Cg transform='matrix(0 -1 1 0 0 1200)'%3E%3Cg transform='translate(1200 0) scale(-1 1)'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.column > .shape-divider.waves-2 {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform='translate(0 120) scale(1 -1)'%3E%3Cpath d='M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z'/%3E%3C/g%3E%3C/svg%3E");
    --shape-divider-side-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 1200' preserveAspectRatio='none'%3E%3Cg transform='matrix(0 -1 1 0 0 1200)'%3E%3Cg transform='translate(0 120) scale(1 -1)'%3E%3Cpath d='M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.column > .shape-divider.waves-opacity {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.28 2.17' preserveAspectRatio='none'%3E%3Cpath d='M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z'/%3E%3Cpath d='M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z' opacity='.5'/%3E%3Cpath d='M0 1.85c2.56-.83 7.68-.3 11.79-.42 4.1-.12 6.86-.61 9.58-.28 2.73.33 5.61 1.17 8.61 1 3-.19 4.73-.82 5.3-.84V.1H0z' opacity='.5'/%3E%3C/svg%3E");
    --shape-divider-side-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2.17 35.28' preserveAspectRatio='none'%3E%3Cg transform='matrix(0 -1 1 0 0 35.28)'%3E%3Cpath d='M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z'/%3E%3Cpath d='M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z' opacity='.5'/%3E%3Cpath d='M0 1.85c2.56-.83 7.68-.3 11.79-.42 4.1-.12 6.86-.61 9.58-.28 2.73.33 5.61 1.17 8.61 1 3-.19 4.73-.82 5.3-.84V.1H0z' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
}

.column > .shape-divider.triangle-out {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform='translate(1200 120) scale(-1 -1)'%3E%3Cpath d='M598.97 114.72L0 0 0 120 1200 120 1200 0 598.97 114.72z'/%3E%3C/g%3E%3C/svg%3E");
    --shape-divider-side-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 1200' preserveAspectRatio='none'%3E%3Cg transform='matrix(0 -1 1 0 0 1200)'%3E%3Cg transform='translate(1200 120) scale(-1 -1)'%3E%3Cpath d='M598.97 114.72L0 0 0 120 1200 120 1200 0 598.97 114.72z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.column > .shape-divider.triangle-in {
    --shape-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M1200 0L0 0 598.97 114.72 1200 0z'/%3E%3C/svg%3E");
    --shape-divider-side-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 1200' preserveAspectRatio='none'%3E%3Cg transform='matrix(0 -1 1 0 0 1200)'%3E%3Cpath d='M1200 0L0 0 598.97 114.72 1200 0z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Stacked: across the column's top or bottom edge. Each divider reaches a pixel past its edge, under the colour it matches: where the edge falls on a fraction of a pixel, Chrome otherwise shows a hairline of the column through the divider's soft edge. */
@media screen and (width < 768px) {
    .column > .shape-divider {
        top: -1px;
        right: 0;
        left: 0;
        width: auto;
        height: calc(var(--shape-divider-size) + 1px);
    }

    .column > .shape-divider[data-stacked="bottom"] {
        top: auto;
        bottom: -1px;
        transform: rotate(180deg);
    }
}

/* Side by side: down the column's left or right edge, again reaching a pixel past it. */
@media screen and (width >= 768px) {
    .column > .shape-divider {
        top: 0;
        bottom: 0;
        left: -1px;
        width: calc(var(--shape-divider-size) + 1px);
        height: auto;
        -webkit-mask-image: var(--shape-divider-side-mask, none);
        mask-image: var(--shape-divider-side-mask, none);
    }

    .column > .shape-divider.right {
        right: -1px;
        left: auto;
        transform: rotate(180deg);
    }

    .column > .shape-divider.fade {
        --shape-divider-fade-direction: 90deg;
    }

    .column > .shape-divider.zigzag {
        -webkit-mask-repeat: no-repeat round;
        mask-repeat: no-repeat round;
        -webkit-mask-size: 100% calc(var(--shape-divider-size) * 10 / 11);
        mask-size: 100% calc(var(--shape-divider-size) * 10 / 11);
    }

    /* the reset's max-width would keep the turned drawing to the divider's width */
    .column > .shape-divider.custom svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100cqh;
        max-width: none;
        height: 100cqw;
        transform-origin: 0 0;
        transform: translateY(100cqh) rotate(-90deg);
    }
}

/* Nesting columns in columns
.column { display: flex; flex-direction: row; justify-content:start; align-items: flex-start; align-content: flex-start; }
.column .column:first-of-type { padding-left: 0; }
.column .column:last-of-type { padding-right: 0; }
*/

.grid {
    --grid-layout-gap: var(--space-lg);
    --grid-column-count: 4;
    --grid-item--min-width: 160px;
    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
}

.gallery {
    display: grid;
    column-gap: var(--space-md);
    row-gap: var(--space-md);
}

/* The layouts that keep each photo's own shape work out its box from the size stored: the photo fills it exactly, as a resized
   file's shape can be a pixel out, which would put a row's photos out of line and move the page when the file comes. */
.gallery[data-layout]:not([data-layout="tilted_wall"]) img {
    object-fit: cover;
    height: 100%;
}

/* Heights are two-thirds on mobile. */
.gallery[data-layout] {
    --gallery-row-height-scale: calc(2 / 3);
    --gallery-photo-frame-reach: 0px;
}

@media screen and (width >= 768px) {
    .gallery[data-layout] {
        --gallery-row-height-scale: 1;
    }
}

/* Masonry: every photo in one grid row, in the column its script gives it and pushed down by its margin, so the columns still
   come from the minimum width and maximum per row, and the height from the tallest. With no script it's a plain grid. */
.gallery:is([data-layout="masonry"], [data-layout="parallax_columns"], [data-layout="drifting_columns"]) > * {
    align-self: start;
}

.gallery:is([data-layout="masonry"], [data-layout="parallax_columns"], [data-layout="drifting_columns"])[data-placed] > * {
    grid-row: 1;
}

/* Parallax columns and Drifting columns have at least two columns on mobile, whatever the minimum width. */
.gallery:is([data-layout="parallax_columns"], [data-layout="drifting_columns"]) {
    grid-template-columns: repeat(auto-fill, minmax(max(min(var(--grid-item--min-width), calc(50% - var(--grid-layout-gap) / 2)), var(--grid-item--max-width)), 1fr));
}

/* Justified rows: each photo grows by its own shape, so the photos in a row share a height and fill the width, none cropped.
   The shape is multiplied up as a line whose grows add up to less than 1 doesn't use all its room, which would leave a tall photo
   alone on a line short of the edge. The empty item at the end takes the room left on the last line, keeping it at the row height,
   its negative margin cancelling the gap before it so that it can't wrap to a line of its own. A photo too wide for the column fills it. */
.gallery[data-layout="justified_rows"] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.gallery[data-layout="justified_rows"]::after {
    content: "";
    flex-grow: 100000000;
    margin-left: calc(-1 * var(--grid-layout-gap));
}

.gallery[data-layout="justified_rows"] > * {
    flex-grow: calc(var(--photo-ratio) * 100);
    flex-basis: min(100%, calc(var(--photo-ratio) * var(--gallery-row-height) * var(--gallery-row-height-scale) + 2 * var(--gallery-photo-frame-reach)));
    min-width: 0;
}

/* Filmstrip and Marquee: rows at the row height, each photo its own shape (an Instagram post the Aspect ratio's), that you scroll. Marquee's script takes over and moves them,
   but not with no script or for people who reduce motion. The room above and below is for a shadow, as a row that scrolls clips what reaches out. */
.gallery[data-layout="filmstrip"],
.gallery[data-layout="marquee"] {
    padding-block: var(--space-md);
    margin-block: calc(-1 * var(--space-md));
}

.gallery[data-layout="filmstrip"],
.gallery-row {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
}

.gallery[data-layout="filmstrip"] > *,
.gallery-row > * {
    flex: 0 0 auto;
    width: calc(var(--photo-ratio) * var(--gallery-row-height) * var(--gallery-row-height-scale) + 2 * var(--gallery-photo-frame-reach));
}

.gallery[data-layout="marquee"] {
    display: flex;
    flex-direction: column;
}

.gallery-row {
    column-gap: var(--grid-layout-gap);
}

/* A filmstrip's arrows have no box, and fade in when you point at it or the keyboard is in it, as a slideshow's do. A touch screen swipes. */
.widget:is(.image-gallery, .instagram-gallery):has(> .gallery[data-layout="filmstrip"]) {
    position: relative;
}

.gallery-arrow {
    position: absolute;
    top: 50%;
    width: 3rem;
    height: 3rem;
    padding: var(--space-xs);
    translate: 0 -50%;
    color: white;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
}

.gallery-arrow[data-direction="previous"] {
    left: 0;
}

.gallery-arrow[data-direction="next"] {
    right: 0;
}

.gallery-arrow svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

.widget:is(.image-gallery, .instagram-gallery):has(> .gallery[data-layout="filmstrip"]):has(:focus-visible) .gallery-arrow {
    opacity: 0.75;
}

@media (hover: hover) {
    .widget:is(.image-gallery, .instagram-gallery):has(> .gallery[data-layout="filmstrip"]):hover .gallery-arrow {
        opacity: 0.75;
    }

    .gallery-arrow:hover {
        opacity: 1 !important;
    }
}

@media (hover: none) {
    .gallery-arrow {
        display: none;
    }
}

/* Moving: Marquee's rows and Drifting's columns are their photos and copies of them, moved by exactly half, so they run on without a join.
   Pointing at them or the keyboard in them stops them. A row's photos have their gap as a margin, as the half has to include the last one's. */
.gallery[data-layout="marquee"][data-moving] {
    overflow: clip;
}

.gallery[data-moving] .gallery-row {
    width: max-content;
    overflow: visible;
    column-gap: 0;
    animation: gallery-across var(--gallery-move-duration) linear infinite;
}

.gallery[data-moving] .gallery-row > * {
    margin-right: var(--grid-layout-gap);
}

.gallery[data-layout="drifting_columns"][data-moving] {
    overflow: clip;
    height: calc(var(--gallery-height) * var(--gallery-row-height-scale));
}

.gallery-column {
    position: relative;
    align-self: start;
    grid-row: 1;
    animation: gallery-down var(--gallery-move-duration) linear infinite;
}

.gallery[data-moving] > :nth-child(even) {
    animation-direction: reverse;
}

.gallery[data-moving]:focus-within > * {
    animation-play-state: paused;
}

@media (hover: hover) {
    .gallery[data-moving]:hover > * {
        animation-play-state: paused;
    }
}

@keyframes gallery-across {
    to {
        translate: -50% 0;
    }
}

@keyframes gallery-down {
    to {
        translate: 0 -50%;
    }
}

/* Parallax columns: Masonry, whose columns move their own distance as the gallery crosses the window, all on the gallery's one timeline, so a
   column's photos keep together. The room above and below is for that. Without scroll-driven animations, or for people who reduce motion, it's Masonry. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .gallery[data-layout="parallax_columns"] {
            --gallery-travel: 40px;
            view-timeline: --gallery-parallax block;
            overflow: clip;
            padding-block: calc(1.4 * var(--gallery-travel));
        }

        .gallery[data-layout="parallax_columns"] > * {
            animation: gallery-parallax linear both;
            animation-timeline: --gallery-parallax;
            animation-range: cover;
        }
    }
}

@media screen and (width >= 768px) {
    .gallery[data-layout="parallax_columns"] {
        --gallery-travel: 70px;
    }
}

@keyframes gallery-parallax {
    from {
        translate: 0 calc(var(--gallery-photo-travel, 0) * var(--gallery-travel));
    }

    to {
        translate: 0 calc(var(--gallery-photo-travel, 0) * var(--gallery-travel) * -1);
    }
}

/* Tilted wall: a grid turned and wider than its box, so that it runs past it on every side, with its script repeating the photos to fill it. The columns
   come from the minimum width and maximum per row, as a grid's do, at least two on mobile. */
.gallery[data-layout="tilted_wall"] {
    display: block;
    position: relative;
    overflow: clip;
    height: calc(var(--gallery-height) * var(--gallery-row-height-scale));
}

.gallery-wall {
    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
    position: absolute;
    top: 50%;
    left: -20%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(min(var(--grid-item--min-width), calc(50% - var(--grid-layout-gap) / 2)), var(--grid-item--max-width)), 1fr));
    column-gap: inherit;
    row-gap: inherit;
    align-items: start;
    width: 140%;
    translate: 0 -50%;
    rotate: var(--gallery-tilt);
}

/* Tilted wall and Drifting columns have no natural end, so they have a Height. Alone in a column set to Fill the row, they fill it, at that height at least. */
@media screen and (width >= 768px) {
    :is(.row[data-column-height="fill"] > .column:not([data-height="fit"]), .column[data-height="fill"]) > div:only-child:has(> .widget:is(.image-gallery, .instagram-gallery) > :is([data-layout="tilted_wall"], [data-layout="drifting_columns"])),
    :is(.row[data-column-height="fill"] > .column:not([data-height="fit"]), .column[data-height="fill"]) > div:only-child > .widget:is(.image-gallery, .instagram-gallery):has(> :is([data-layout="tilted_wall"], [data-layout="drifting_columns"])) {
        height: 100%;
    }

    :is(.row[data-column-height="fill"] > .column:not([data-height="fit"]), .column[data-height="fill"]) > div:only-child > .widget:is(.image-gallery, .instagram-gallery) > .gallery:is([data-layout="tilted_wall"], [data-layout="drifting_columns"][data-moving]) {
        min-height: var(--gallery-height);
        height: 100%;
    }
}

/* Running off the screen: a filmstrip, marquee or tilted wall in a column at the row's end (data-edge, from rows.xsl) reaches out past the row's gutter, and the space beside
   a page width row, to the screen's edge, on that column's outer side (100vw counts a scrollbar; the band's clip trims what's over). Stacked, every column reaches
   both edges. A filmstrip's first and last photos still line up with the column, by padding, and it clips no sooner than the screen as it scrolls. */
.widget:is(.image-gallery, .instagram-gallery)[data-run-off-screen] {
    --gallery-bleed: var(--page-gutter);
    --gallery-bleed-start: calc(var(--gallery-bleed) + var(--column-mobile-padding-left, 0px));
    --gallery-bleed-end: calc(var(--gallery-bleed) + var(--column-mobile-padding-right, 0px));
    margin-left: calc(-1 * var(--gallery-bleed-start));
    margin-right: calc(-1 * var(--gallery-bleed-end));
}

.row[data-width="edge_to_edge"] .widget:is(.image-gallery, .instagram-gallery)[data-run-off-screen] {
    --gallery-bleed: 0px;
}

.widget:is(.image-gallery, .instagram-gallery)[data-run-off-screen] > .gallery[data-layout="filmstrip"] {
    padding-left: var(--gallery-bleed-start);
    padding-right: var(--gallery-bleed-end);
    scroll-padding-left: var(--gallery-bleed-start);
    scroll-padding-right: var(--gallery-bleed-end);
}

@media screen and (width >= 768px) {
    .row:not([data-width]) .widget:is(.image-gallery, .instagram-gallery)[data-run-off-screen] {
        --gallery-bleed: calc(max(0px, (100vw - var(--page-width)) / 2) + var(--page-gutter));
    }

    .column .widget:is(.image-gallery, .instagram-gallery)[data-run-off-screen] {
        --gallery-bleed-start: 0px;
        --gallery-bleed-end: 0px;
    }

    .column:is([data-edge="start"], [data-edge="both"]) .widget:is(.image-gallery, .instagram-gallery)[data-run-off-screen] {
        --gallery-bleed-start: calc(var(--gallery-bleed) + var(--column-padding-left, 0px));
    }

    .column:is([data-edge="end"], [data-edge="both"]) .widget:is(.image-gallery, .instagram-gallery)[data-run-off-screen] {
        --gallery-bleed-end: calc(var(--gallery-bleed) + var(--column-padding-right, 0px));
    }
}

/* A caption over the photo: white words on a dark fade, inside a shape that cuts in. When pointed at is the mouse or the keyboard;
   a touch screen can't point, so there it's in the lightbox alone, and the focus a lightbox gives back on closing doesn't show it.
   With no lightbox a touch screen has nowhere else to show it, so it stays on the photo. */
.image-frame > div:has(> .gallery-caption) {
    position: relative;
}

.gallery-caption {
    position: absolute;
    inset: auto 0 0;
    z-index: 101;
    padding: var(--space-lg) max(var(--space-sm), var(--photo-content-inset, 0px)) max(var(--space-sm), var(--photo-content-inset, 0px));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: #fff;
    font-size: var(--paragraph-font-size-sm);
    line-height: var(--paragraph-line-height);
    pointer-events: none;
}

/* The words keep to the widest part of a shape that cuts in. A No crop photo has bars round it, which a fade would show on, so it's a band. */
.image-frame:is([data-shape="circle"], [data-shape="squircle"], [data-shape="pebble"], [data-shape="bean"], [data-shape="blob"], [data-shape="custom"]) .gallery-caption {
    text-align: center;
}

[data-crop="false"] > .gallery-caption {
    padding-top: var(--space-2xs);
    padding-bottom: var(--space-2xs);
    background: rgba(0, 0, 0, 0.7);
}

.gallery-caption[data-show="hover"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

@media (hover: hover) {
    .image-frame:hover .gallery-caption[data-show="hover"],
    a:focus-visible .gallery-caption[data-show="hover"] {
        opacity: 1;
    }
}

@media (hover: none) {
    .gallery[data-click-to-enlarge="false"] .gallery-caption[data-show="hover"] {
        opacity: 1;
    }
}

/* Image collage: one designed picture of a set number of images, in the collage's aspect ratio (model/widget/image_collage.cfc
   works out where each goes). Slanted's places are tiles placed by percentages, each cut out by its own outline as a custom
   shape; Arc and Wave's are boxes placed by percentages; the others' are areas of a grid of tracks; Fanned and Arc's are
   turned and layered (inline). Every place but Slanted's holds the images, square or rounded, with their border and shadow,
   Staggered and Bento's apart by their gap, a share of the collage's width, so the picture keeps its look at every size.
   Each image fills its place, round its focal point. A place with no image yet is its shape in a muted grey, the words'
   colour in the website's background, solid, as places can overlap. */
.collage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--collage-columns, 12), minmax(0, 1fr));
    grid-template-rows: repeat(var(--collage-rows, 12), minmax(0, 1fr));
    container-type: inline-size;
}

.collage-place {
    display: grid;
    min-width: 0;
    min-height: 0;
}

.collage:is([data-arrangement="slanted"], [data-arrangement="arc"], [data-arrangement="wave"]) > .collage-place {
    position: absolute;
}

.collage:is([data-arrangement="staggered"], [data-arrangement="bento"]) > .collage-place {
    padding: calc(var(--collage-gap, 0) * 0.5cqw);
}

.collage-place > .image-frame,
.collage-place > .image-frame > div {
    display: grid;
    min-width: 0;
    min-height: 0;
}

/* a photo taller than its place is cropped round its focal point, rather than growing past the place */
.collage-place picture {
    min-width: 0;
    min-height: 0;
}

.collage-place[data-empty] .image-frame > div {
    background: color-mix(in oklab, var(--paragraph-colour) 12%, var(--background-colour));
}

/* swapping: the next image is drawn over the one in its place, in the same cut, and fades in */
.collage-place [data-crop] > picture {
    grid-area: 1 / 1;
}

.collage-place picture[data-swapping] {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.collage-place picture[data-swapping="shown"] {
    opacity: 1;
}

.logos {
    display: grid;
    column-gap: var(--space-lg);
    row-gap: var(--space-lg);
}

.logos picture {
    place-self: center center;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-md));
}

.stack[data-gap="3xs"] {
    gap: var(--space-3xs);
}

.stack[data-gap="2xs"] {
    gap: var(--space-2xs);
}

.stack[data-gap="xs"] {
    gap: var(--space-xs);
}

.stack[data-gap="sm"] {
    gap: var(--space-sm);
}

.stack[data-gap="lg"] {
    gap: var(--space-lg);
}

.stack[data-gap="xl"] {
    gap: var(--space-xl);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--cluster-gap, var(--space-lg));
    row-gap: calc(var(--cluster-gap, var(--space-lg)) / 2);
}

/* Gap-based containers space their own children, so the base rhythm's sibling margins don't add to their gaps. */
:is(.stack, .cluster, .icon-group-cluster, .form-field-stack, .form-field-cluster, .form-field, .form-field-checkbox-stack, .form-field-radio-stack, .alert-box, .button-cluster, .button-stack, .status-cluster) > * {
    margin-block: 0;
}

/* Hide on: anything with data-hide isn't shown on the screens it names (a row's band, a column or a background from rows.xsl; in our templates, table cells, the lines that replace them on mobile, and the like): mobile below 768px, where the columns stack, tablet from 768 to 1023px and desktop from 1024px. A hidden background leaves the row's or column's own colours, and a column showing the whole image no longer keeps its shape. */
@media screen and (width < 768px) {
    [data-hide~="mobile"] {
        display: none !important;
    }

    .column:has(> .column-background[data-hide~="mobile"]) {
        aspect-ratio: auto;
    }
}

@media screen and (768px <= width < 1024px) {
    [data-hide~="tablet"] {
        display: none !important;
    }

    .column:has(> .column-background[data-hide~="tablet"]) {
        aspect-ratio: auto;
    }
}

@media screen and (width >= 1024px) {
    [data-hide~="desktop"] {
        display: none !important;
    }

    .column:has(> .column-background[data-hide~="desktop"]) {
        aspect-ratio: auto;
    }
}

@media screen and (width < 768px) {
    .column {
        order: 1 !important;
    }

    .column.empty {
        display: none;
    }
}

/* Where a column's content sits inside it, at every width. With Fill the row, the column alignment moves the content inside each column: side by side the columns are as tall as the row, and stacked a column is taller than its content when it has a minimum height or the whole image's shape, so its content still goes where the alignment says. Fit content columns keep their content at the top, as they're moved instead (below, from tablet width). */
:where(.row[data-column-height="fill"].vertical-align-columns-centre) > .column {
    align-content: center;
}

:where(.row[data-column-height="fill"].vertical-align-columns-bottom) > .column {
    align-content: end;
}

.column[data-height="fill"][data-vertical-alignment="top"] {
    align-content: start;
}

.column[data-height="fill"][data-vertical-alignment="centre"] {
    align-content: center;
}

.column[data-height="fill"][data-vertical-alignment="bottom"] {
    align-content: end;
}

.column[data-height="fit"] {
    align-content: normal;
}

@media screen and (width >= 768px) {
    /* One line of columns, so the line fills the row's height and column alignment works across all of it. */
    .row {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-content: normal;
        max-width: var(--page-width);
    }

    .row:is([data-width="full"], [data-width="edge_to_edge"]) {
        max-width: none;
    }

    /* A listing page's row with its filters beside the listings (sidebar-start; sidebar-end has them after): the filters
       take what three of the twelve tracks would, as a column of 3 does, but never more than on a page-width row, so a
       page-width page is as it was, and on a full-width page everything past that goes to the listings. */
    .row:is([data-layout="sidebar-start"], [data-layout="sidebar-end"]) {
        --row-sidebar-width: min(
            calc((100% - 11 * min(var(--column-gap), 100% / 12)) / 4 + 2 * min(var(--column-gap), 100% / 12)),
            calc((var(--page-width) - 2 * var(--page-gutter) - 11 * var(--column-gap)) / 4 + 2 * var(--column-gap))
        );
    }

    .row[data-layout="sidebar-start"] {
        grid-template-columns: var(--row-sidebar-width) minmax(0, 1fr);
    }

    .row[data-layout="sidebar-end"] {
        grid-template-columns: minmax(0, 1fr) var(--row-sidebar-width);
    }

    .row:is([data-layout="sidebar-start"], [data-layout="sidebar-end"]) > .column {
        grid-column: auto;
    }

    :where(.column) {
        padding: var(--column-padding-top) calc(var(--column-padding-right) + var(--column-divider-space-right)) var(--column-padding-bottom) calc(var(--column-padding-left) + var(--column-divider-space-left));
    }

    .row.vertical-align-columns-top {
        align-items: start;
    }

    .row.vertical-align-columns-centre {
        align-items: center;
    }

    .row.vertical-align-columns-bottom {
        align-items: end;
    }

    /* Column height. Fit content (the default) leaves each column as tall as its content, and the column alignment above moves the columns. Fill the row stretches every column to the tallest, and the alignment moves their content instead (the rules before this block, which apply at every width). A column with its own alignment or height carries both (rows.xsl works out "same as row"), so it doesn't depend on the row's. */
    .row[data-column-height="fill"] {
        align-items: stretch;
    }

    .column[data-height="fill"] {
        align-self: stretch;
    }

    .column[data-height="fit"][data-vertical-alignment="top"] {
        align-self: start;
    }

    .column[data-height="fit"][data-vertical-alignment="centre"] {
        align-self: center;
    }

    .column[data-height="fit"][data-vertical-alignment="bottom"] {
        align-self: end;
    }

    .column[data-size="1"] {
        grid-column: span 1;
    }

    .column[data-size="2"] {
        grid-column: span 2;
    }

    .column[data-size="3"] {
        grid-column: span 3;
    }

    .column[data-size="4"] {
        grid-column: span 4;
    }

    .column[data-size="5"] {
        grid-column: span 5;
    }

    .column[data-size="6"] {
        grid-column: span 6;
    }

    .column[data-size="7"] {
        grid-column: span 7;
    }

    .column[data-size="8"] {
        grid-column: span 8;
    }

    .column[data-size="9"] {
        grid-column: span 9;
    }

    .column[data-size="10"] {
        grid-column: span 10;
    }

    .column[data-size="11"] {
        grid-column: span 11;
    }

    .column[data-size="12"] {
        grid-column: span 12;
    }
}

.user-defined-content .widget img {
    display: block;
}

/* Rich text written in the editor. The scope stops at a widget's children, so a widget placed in the content keeps its own styles, while rich text inside a widget (such as a description) is its own .user-defined-content and is styled again. It also stops at a column's background and shape dividers, which aren't content. */
@scope (.user-defined-content) to (.widget > *, .column-background, .shape-divider) {
    .no-gap {
        margin-top: 0;
    }

    /* Two or more buttons together in a paragraph are a row: the same gap between them and between the lines they wrap onto, none at the edges, and the editor's alignment places the row. */
    p:has(> a.button + a.button) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-sm);
    }

    p:has(> a.button + a.button):is([style*="text-align: center"], [style*="text-align:center"]) {
        justify-content: center;
    }

    p:has(> a.button + a.button):is([style*="text-align: right"], [style*="text-align:right"]) {
        justify-content: flex-end;
    }

    * + h1 {
        margin-top: var(--space-2xl);
    }

    * + h2 {
        margin-top: var(--space-xl);
    }

    * + h3 {
        margin-top: var(--space-lg);
    }

    * + h4 {
        margin-top: var(--space-md);
    }

    * + h5 {
        margin-top: var(--space-sm);
    }

    h1 + * {
        margin-top: var(--space-md);
    }

    h2 + * {
        margin-top: var(--space-sm);
    }

    h3 + * {
        margin-top: var(--space-sm);
    }

    h4 + * {
        margin-top: var(--space-xs);
    }

    h5 + * {
        margin-top: var(--space-2xs);
    }

    p + p,
    p + ul,
    p + ol,
    ul + p,
    ol + p,
    ul + ul,
    ol + ol,
    ul + ol,
    ol + ul {
        margin-top: var(--space-sm);
    }

    *:not(h1):not(h2):not(h3):not(h4):not(h5):not(hr) + blockquote {
        margin-top: var(--space-md);
    }

    blockquote + *:not(h1):not(h2):not(h3):not(hr) {
        margin-top: var(--space-md);
    }

    *:not(h1):not(h2):not(h3):not(h4):not(h5):not(hr) + table {
        margin-top: var(--space-md);
    }

    table + *:not(h1):not(h2):not(h3):not(hr) {
        margin-top: var(--space-md);
    }

    *:not(h1):not(h2):not(h3):not(h4):not(h5):not(hr) + .widget {
        margin-top: var(--space-lg);
    }

    .widget + *:not(h1):not(h2):not(h3):not(hr) {
        margin-top: var(--space-lg);
    }

    *:not(h1):not(h2):not(h3):not(h4):not(h5):not(hr) + .block {
        margin-top: var(--space-lg);
    }

    .block + *:not(h1):not(h2):not(h3):not(hr) {
        margin-top: var(--space-lg);
    }

    *:not(h1):not(h2):not(h3):not(h4):not(h5):not(hr) + .small-block {
        margin-top: var(--space-sm);
    }

    .small-block + *:not(h1):not(h2):not(h3):not(hr) {
        margin-top: var(--space-sm);
    }

    h1 + .breadcrumbs {
        margin-top: var(--space-xs);
    }

    .breadcrumbs + h1 {
        margin-top: var(--space-3xs);
    }

    .eyebrow + h1,
    .eyebrow + h2,
    .eyebrow + h3,
    .eyebrow + h4 {
        margin-top: var(--space-3xs);
    }

    hr {
        margin-top: var(--space-lg);
        margin-bottom: var(--space-lg);
        border: 0px;
        height: var(--horizontal-line-height);
        background: var(--horizontal-line-colour);
        width: var(--horizontal-line-width);
        max-width: 100%;
    }

    ol {
        list-style: decimal;
        padding-left: var(--space-lg);
        color: var(--paragraph-colour);
        font-weight: var(--paragraph-font-weight);
        font-size: var(--paragraph-font-size);
        line-height: var(--paragraph-line-height);
    }

    ol li ol {
        margin-top: var(--space-2xs);
    }

    ol li {
        padding-left: var(--space-xs);
    }

    ol li + li {
        margin-top: var(--space-2xs);
    }

    ul {
        text-align: left;
        padding-left: var(--space-lg);
        font-weight: var(--paragraph-font-weight);
        font-size: var(--paragraph-font-size);
        line-height: var(--paragraph-line-height);
        color: var(--paragraph-colour);
    }

    ul li {
        padding-left: var(--space-xs);
        list-style-type: "\e122";
    }

    ul li::marker {
        font-family: "Font Awesome 6 Pro";
        font-size: 0.75em;
        font-weight: 700;
    }

    ul li + li {
        margin-top: var(--space-2xs);
    }

    ul li ul {
        margin-top: var(--space-2xs);
    }

    ul li ul li::marker {
        font-weight: 400;
    }

    ul.tick li {
        list-style-type: "\f00c";
    }

    ul.tick li::marker {
        font-size: 1em;
        font-weight: 400;
    }

    /* A link with an icon before or after its words, from the editor's styles: the words are whatever the link says. Arrows and the external link icon point onwards, so they come after. */
    a.link-icon::before,
    a.link-icon-after::after {
        content: var(--link-icon);
        display: inline-block;
        font-family: "Font Awesome 6 Pro";
        font-weight: 400;
    }

    a.link-icon::before {
        margin-right: var(--space-2xs);
    }

    a.link-icon-after::after {
        margin-left: var(--space-2xs);
    }

    a.link-icon.location-pin {
        --link-icon: "\f3c5";
    }

    a.link-icon.map-location-pin {
        --link-icon: "\f5a0";
    }

    a.link-icon.email {
        --link-icon: "\f0e0";
    }

    a.link-icon.phone {
        --link-icon: "\f095";
    }

    a.link-icon.calendar {
        --link-icon: "\f783";
    }

    a.link-icon.clock {
        --link-icon: "\f017";
    }

    a.link-icon.ticket {
        --link-icon: "\f145";
    }

    a.link-icon.cart {
        --link-icon: "\f07a";
    }

    a.link-icon.download {
        --link-icon: "\f019";
    }

    a.link-icon.file {
        --link-icon: "\f15b";
    }

    a.link-icon-after.chevron-right {
        --link-icon: "\f054";
    }

    a.link-icon-after.arrow-right {
        --link-icon: "\f061";
    }

    a.link-icon-after.external-link {
        --link-icon: "\f08e";
    }

    img {
        display: inline-block;
        vertical-align: top;
        height: auto !important;
    }

    a {
        word-break: break-word;
    }
}

img:not([src]) {
    visibility: hidden;
}

img[data-sizes="auto"] {
    display: block;
    width: 100%;
}

img.right {
    float: right;
    margin-left: var(--space-lg);
    margin-bottom: var(--space-md);
}

img.left {
    float: left;
    margin-right: var(--space-lg);
    margin-bottom: var(--space-md);
}

.video-wrapper.centred {
    margin: 0 auto;
}

.video-wrapper .video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-wrapper .video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* A Google map's info box: the title shares Google's header row with a smaller close button, and the box takes the website's type and spacing. Google sets the box's padding and the button's size inline, hence the !important. */
.widget:is(.google-map, .google-map-multi) .gm-style .gm-style-iw-c {
    padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-sm) !important;
    border-radius: var(--radius-sm);
    font-family: var(--paragraph-font-family-name), var(--paragraph-font-family-category);
    color: var(--paragraph-colour);
}

.widget:is(.google-map, .google-map-multi) .gm-style .gm-style-iw-chr {
    align-items: flex-start;
    gap: var(--space-2xs);
}

.widget:is(.google-map, .google-map-multi) .gm-style .gm-style-iw-ch {
    padding-top: 0;
}

.widget:is(.google-map, .google-map-multi) .gm-style .gm-style-iw-d {
    overflow: auto !important;
}

.widget:is(.google-map, .google-map-multi) .gm-style .gm-ui-hover-effect {
    flex-shrink: 0;
    width: 28px !important;
    height: 28px !important;
    opacity: 0.6;
}

.widget:is(.google-map, .google-map-multi) .gm-style .gm-ui-hover-effect:hover {
    opacity: 1;
}

.widget:is(.google-map, .google-map-multi) .gm-style .gm-ui-hover-effect > span {
    width: 20px !important;
    height: 20px !important;
    margin: 4px !important;
}

.google-map-info-title {
    font-size: var(--paragraph-font-size-sm);
    line-height: var(--paragraph-line-height);
    color: var(--heading-4-colour);
}

/* a location's title, or the first line of its address, on a map of several */
.google-map-info-title strong {
    font-weight: 600;
}

.google-map-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding-right: var(--space-2xs);
    font-size: var(--paragraph-font-size-xs);
    line-height: var(--paragraph-line-height);
}

/* sized here, as the website's p sets its own size */
.google-map-info-address {
    margin: 0;
    font-size: var(--paragraph-font-size-xs);
    line-height: var(--paragraph-line-height);
}

.google-map-info-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.google-map-info-links a {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--space-3xs) / 2);
    text-decoration: none;
}

/* An icon and its words, a link or not (admin's .icon-group): the icon's span and the words' span 2XS apart. The spans
   stretch rather than centre (admin centres), so when the words wrap the icon stays on their first line. A list of them
   is a stack (data-gap="2xs"). */
.icon-group {
    display: inline-flex;
    gap: var(--space-2xs);
}

.icon-group i {
    margin: 0;
}

/* a brand's logo in place of an icon, centred on its line */
.icon-group img {
    height: 1.25em;
    width: 1.25em;
}

.icon-group > img {
    align-self: center;
}

/* Icon groups in a row (an event's dates and actions, an article's author and date), wrapping onto rows the same gap
   apart, as admin's status and chip clusters do. */
.icon-group-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

table {
    max-width: 100%;
    color: var(--paragraph-colour);
}

th,
td {
    text-align: left;
    vertical-align: top;
    border-width: 1px;
    border-style: solid;
    border-color: var(--horizontal-line-colour);
    padding: var(--space-xs) var(--space-xs);
    border-left-width: 0;
    border-right-width: 0;
    border-top-width: 0;
}

th {
    font-weight: 700;
}

thead th {
    padding-top: 0;
}

table .text-align-right .price {
    justify-content: end;
}

table th:first-child,
table td:first-child {
    padding-left: 0;
}

table th:last-child,
table td:last-child {
    padding-right: 0;
}

table tbody td.if-empty-na:empty::before {
    opacity: 0.5;
    content: "n/a";
}

table td .options {
    display: flex;
    flex-direction: row;
    gap: var(--space-2xs);
    flex-wrap: wrap;
}

table tr[data-border="none"] td {
    border: 0 !important;
}

table td[data-border="none"] {
    border: 0 !important;
}

.status-cluster {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2xs);
}

.status {
    white-space: nowrap;
    display: block;
    text-transform: uppercase;
    font-size: var(--paragraph-font-size-xs);
    line-height: 1.5em;
    border-radius: var(--button-border-radius);
    padding: var(--space-3xs) var(--space-2xs);
}

/* A status's tone (admin's five) colours its words and border. */
.status[data-tone="positive"] {
    --status-colour: var(--green-colour);
}

.status[data-tone="warning"] {
    --status-colour: var(--orange-colour);
}

.status[data-tone="negative"] {
    --status-colour: var(--red-colour);
}

.status[data-tone="neutral"] {
    --status-colour: var(--grey-400);
}

.status[data-tone="info"] {
    --status-colour: var(--light-blue-colour);
}

.status[data-tone] {
    border: 1px solid var(--status-colour);
    color: var(--status-colour);
}

/* Alerts (admin's .alert-box and data-tone) in the website's own look: the form settings' error colour and corners, and
   white words; a positive one the success colour and corners with a tick before it; a warning or info one (admin's
   tones) the tone's colour with its icon, its words dark or white for that colour as a badge's are. */
.alert-box {
    --alert-colour: var(--form-error-colour);
    --alert-border-radius: var(--form-error-box-border-radius);
    --alert-text-colour: #fff;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    background-color: var(--alert-colour);
    border-radius: var(--alert-border-radius);
    color: var(--alert-text-colour);
}

.alert-box[data-tone="positive"] {
    --alert-colour: var(--form-success-colour);
    --alert-border-radius: var(--form-success-box-border-radius);
    --alert-icon: "\f00c";
}

.alert-box[data-tone="warning"] {
    --alert-colour: var(--orange-colour);
    --alert-icon: "\21";
}

.alert-box[data-tone="info"] {
    --alert-colour: var(--light-blue-colour);
    --alert-icon: "\f129";
}

@supports (color: oklch(from red l c h)) {
    .alert-box:is([data-tone="warning"], [data-tone="info"]) {
        --alert-text-colour: oklch(from var(--alert-colour) clamp(0.22, (0.65 - l) * 1000, 1) 0 0);
    }
}

.alert-box:is([data-tone="positive"], [data-tone="warning"], [data-tone="info"]) {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 0;
    row-gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
}

.alert-box:is([data-tone="positive"], [data-tone="warning"], [data-tone="info"]) > * {
    grid-column: 2;
}

.alert-box:is([data-tone="positive"], [data-tone="warning"], [data-tone="info"])::before {
    content: var(--alert-icon);
    grid-column: 1;
    grid-row: 1;
    position: relative;
    top: 0.075em;
    margin-right: 0.5em;
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-size: 1.25em;
    line-height: 0.05em;
}

.alert-box :is(p, li) {
    color: var(--alert-text-colour);
}

.alert-box ul {
    padding-left: var(--space-sm);
    list-style-type: disc;
}

.alert-box li + li {
    margin-top: var(--space-2xs);
}

.alert-box ul:has(li:only-child) {
    padding-left: 0;
    list-style-type: none;
}

.alert-box a {
    color: var(--alert-text-colour);
    text-decoration: underline;
}

.alert-box a:hover {
    color: var(--alert-text-colour);
    text-decoration: none;
}

/* An optional tag in a heading, for a part of a form that can be left empty (a membership's second person, a
   recurring order's shipping address); a field's optional tag is drawn with the fields below. */
:is(h1, h2, h3, h4, h5, h6) > .optional {
    border: 1px solid var(--paragraph-colour);
    border-radius: var(--form-field-border-radius);
    padding: var(--space-3xs) var(--space-2xs);
    margin-left: var(--space-2xs);
    text-transform: uppercase;
    font-size: var(--paragraph-font-size-xs);
    line-height: 1em;
    vertical-align: middle;
    font-family: var(--paragraph-font-family-name), system-ui, var(--paragraph-font-family-category);
    color: var(--paragraph-colour);
    font-weight: 400;
}

input,
select,
textarea,
.stripe-card-element {
    text-align: left;
    background: var(--form-field-background-colour);
    color: var(--form-field-text-colour);
    padding: var(--space-xs);
    border-color: var(--form-field-border-colour);
    border-width: var(--form-field-border-width);
    border-radius: var(--form-field-border-radius);
    border-style: solid;
}

input:focus,
select:focus,
textarea:focus,
.stripe-card-element:focus {
    outline: revert;
    outline-color: var(--form-field-focus-border-colour);
}

/* Checkboxes and radio buttons are ticked in the Field selected colour: the website's, a row's or a column's. */
input[type="checkbox"],
input[type="radio"] {
    height: 1.4em;
    min-width: 1.4em;
    margin: 2px 0 0 0;
    accent-color: var(--form-field-selected-colour);
}

input[type="date"]::-webkit-calendar-picker-indicator {
    margin: auto;
}

input[type="text"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="email"],
select,
textarea {
    width: 100%;
}

:is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--form-error-colour);
    border-width: max(2px, var(--form-field-border-width));
}

textarea {
    width: 100%;
}

input::placeholder {
    opacity: 0.5;
}

*:focus::placeholder {
    opacity: 0;
}

.h-captcha iframe {
    max-width: 100%;
}

/* A label's words take the paragraph colour where they are, as paragraphs do, so a bar's or row's own text colour reaches
   the words beside its checkboxes; otherwise they kept the page's. */
label {
    cursor: pointer;
    color: var(--paragraph-colour);
}

/* Forms: admin's form-field vocabulary (admin.css), drawn with the website's form settings. A form's fields sit in a card,
   which looks as a fieldset did; a field is its label (in heading 4's type, as the h4 labels were), any help and its
   input. The inputs keep the element rules above (input, select, textarea), and an error is aria-invalid="true".
   A card's words take the form paragraph colour (the website's, a row's or a column's), made the paragraph colour inside
   its body, so help, radio and checkbox labels and paragraphs follow it. */
.card {
    --card-padding: var(--form-card-padding);
    background: var(--form-card-background-colour);
    border-style: solid;
    border-width: var(--form-card-border-width);
    border-color: var(--form-card-border-colour);
    border-radius: var(--form-card-border-radius);
    box-shadow: var(--form-card-shadow) var(--form-card-shadow-colour);
}

.card-body {
    --paragraph-colour: var(--form-paragraph-colour);
    padding: var(--card-padding);
    color: var(--paragraph-colour);
}

.form-field-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.form-field-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--form-field-cluster-gap, var(--space-md));
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    align-items: flex-start;
}

.form-field-label {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--heading-4-font-size);
    line-height: var(--heading-4-line-height);
    font-family: var(--heading-4-font-family-name), system-ui, var(--heading-4-font-family-category);
    text-transform: var(--heading-4-text-transform);
    font-weight: var(--heading-4-font-weight);
    letter-spacing: var(--heading-4-letter-spacing);
    color: var(--form-field-label-colour);
    cursor: default;
}

/* The optional tag is a shade of the label it sits beside: the label colour at 60%. */
:is(.form-field, .form-field-checkbox) .optional {
    --optional-colour: color-mix(in srgb, var(--form-field-label-colour) 60%, transparent);
    border: 1px solid var(--optional-colour);
    border-radius: var(--form-field-border-radius);
    padding: var(--space-3xs) var(--space-2xs);
    margin-left: 0;
    text-transform: uppercase;
    font-size: var(--paragraph-font-size-xs);
    line-height: 1em;
    font-family: var(--paragraph-font-family-name), system-ui, var(--paragraph-font-family-category);
    color: var(--optional-colour);
    font-weight: 400;
}

.form-field-help {
    font-size: var(--paragraph-font-size-sm);
    line-height: var(--paragraph-line-height);
}

.form-field-value {
    font-size: var(--paragraph-font-size);
    line-height: var(--paragraph-line-height);
}

/* A picture in a field (the Gift Aid logo) takes the field's width, as a block did, so an image with no width of its own,
   an SVG, keeps its size instead of shrinking with its box to nothing; its own max-width still caps it. So do the payment
   options' cards and Stripe's card box (its max-width caps it), which were blocks in their fieldsets. */
.form-field > :is(picture, .form-field-radio-stack[data-variant="card"], .stripe-card-element) {
    align-self: stretch;
}

/* A field in checkout's payment step (the discount code applied, the gift vouchers, the store credit) keeps its h4, drawn as
   fieldsets drew theirs: its words and optional tag in a row, in the label colour. */
.form-field > h4 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--form-field-label-colour);
}

.form-field-input-group {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.form-field-input-prefix,
.form-field-input-suffix {
    flex-shrink: 0;
}

/* form-field-checkbox: as the radios below */
.form-field-checkbox-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.form-field-checkbox-stack:empty {
    display: none;
}

.form-field-checkbox-cluster {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-sm);
}

.form-field-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
}

input.form-field-checkbox-input {
    flex-shrink: 0;
    cursor: pointer;
    display: block;
}

input.form-field-checkbox-input:disabled {
    cursor: not-allowed;
}

input.form-field-checkbox-input:focus-visible {
    outline: 1px solid var(--form-field-focus-border-colour);
    outline-offset: 2px;
}

input.form-field-checkbox-input[aria-invalid="true"] {
    outline: 2px solid var(--form-error-colour);
    outline-offset: 2px;
}

.form-field-checkbox-label {
    cursor: pointer;
    user-select: none;
}

.form-field-checkbox-label:has(.optional) {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.form-field-checkbox-input:disabled ~ * .form-field-checkbox-label,
.form-field-checkbox-input:disabled + .form-field-checkbox-label {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-field-checkbox-help {
    font-size: var(--paragraph-font-size-sm);
    line-height: 1.5;
    margin-top: 2px;
    color: color-mix(in srgb, var(--paragraph-colour) 75%, transparent);
}

/* form-field-radio: same markup + class names as admin.css, mapped onto website tokens */
.form-field-radio-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.form-field-radio-stack:empty {
    display: none;
}

.form-field-radio-cluster {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-sm);
}

.form-field-radio-stack div,
.form-field-radio-cluster div {
    margin-top: 0;
}

.form-field-radio {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
}

input.form-field-radio-input {
    flex-shrink: 0;
    cursor: pointer;
    display: block;
}

input.form-field-radio-input:disabled {
    cursor: not-allowed;
}

input.form-field-radio-input:focus-visible {
    outline: 1px solid var(--form-field-focus-border-colour);
    outline-offset: 2px;
}

input.form-field-radio-input[aria-invalid="true"] {
    outline: 2px solid var(--form-error-colour);
    outline-offset: 2px;
}

.form-field-radio-label {
    cursor: pointer;
    user-select: none;
}

.form-field-radio-input:disabled ~ * .form-field-radio-label,
.form-field-radio-input:disabled + .form-field-radio-label {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-field-radio-help {
    font-size: var(--paragraph-font-size-sm);
    line-height: 1.5;
    margin-top: 2px;
    color: color-mix(in srgb, var(--paragraph-colour) 75%, transparent);
}

/* form-field-radio card variant: whole card is clickable via the stretched label, brand logos/icons sit on the right */
.form-field-radio-stack[data-variant="card"] > .form-field-radio {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    column-gap: var(--space-xs);
    position: relative;
    padding: var(--space-sm);
    background: var(--form-field-background-colour);
    border: max(1px, var(--form-field-border-width)) solid var(--form-field-border-colour);
    border-radius: var(--form-field-border-radius);
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.form-field-radio-stack[data-variant="card"] > .form-field-radio:hover {
    border-color: color-mix(in srgb, var(--form-field-border-colour), var(--form-field-text-colour) 35%);
}

.form-field-radio-stack[data-variant="card"] > .form-field-radio:has(.form-field-radio-input:checked) {
    border-color: var(--form-field-selected-colour);
    box-shadow: 0 0 0 1px var(--form-field-selected-colour);
    background: color-mix(in srgb, var(--form-field-selected-colour) 6%, var(--form-field-background-colour));
}

.form-field-radio-stack[data-variant="card"] > .form-field-radio:has(.form-field-radio-input:focus-visible) {
    outline: 2px solid var(--form-field-focus-border-colour);
    outline-offset: 2px;
}

.form-field-radio-stack[data-variant="card"] > .form-field-radio:has(.form-field-radio-input[aria-invalid="true"]) {
    border-color: var(--form-error-colour);
}

.form-field-radio-stack[data-variant="card"] > .form-field-radio:has(.form-field-radio-input:disabled) {
    opacity: 0.6;
}

.form-field-radio-stack[data-variant="card"] input.form-field-radio-input:focus-visible {
    outline: none;
}

.form-field-radio-stack[data-variant="card"] .form-field-radio-label {
    font-weight: 600;
    line-height: 1.5;
}

.form-field-radio-stack[data-variant="card"] .form-field-radio-label::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.form-field-radio-brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-xs);
    min-height: 1.5em;
}

.form-field-radio-brand > * {
    margin: 0;
}

.form-field-radio-brand img {
    display: block;
    height: 18px;
    width: auto;
}

select[disabled] {
    cursor: not-allowed;
    opacity: 0.7;
}

@media screen and (width < 480px) {
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    input[type="password"],
    input[type="email"],
    select,
    textarea {
        max-width: none !important;
    }

    .form-field-radio-stack[data-variant="card"] > .form-field-radio {
        grid-template-columns: auto 1fr;
    }

    .form-field-radio-stack[data-variant="card"] > .form-field-radio > .form-field-radio-brand {
        grid-column: 2;
        justify-content: flex-start;
        margin-top: var(--space-2xs);
    }
}

.select2-container {
    max-width: 100%;
}

.select2-container .select2-selection--single[aria-invalid="true"] {
    border-color: var(--form-error-colour);
    border-width: max(2px, var(--form-field-border-width));
}

.select2-container .select2-selection--single {
    height: inherit;
    background: var(--form-field-background-colour);
    border-color: var(--form-field-border-colour);
    border-width: var(--form-field-border-width);
    border-radius: var(--form-field-border-radius);
    border-style: solid;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs);
    line-height: inherit;
    color: var(--form-field-text-colour);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    height: inherit;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--form-field-text-colour) transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--form-field-text-colour) transparent !important;
}

.select2-selection__clear {
    padding-left: var(--space-xs);
}

.select2-dropdown {
    margin-top: -1px;
    background: var(--form-field-background-colour);
    border-radius: var(--form-field-border-radius);
    border: var(--form-field-border-width) solid var(--form-field-border-colour) !important;
}

.select2-dropdown .select2-search--dropdown {
    padding: var(--space-2xs);
}

.select2-results__option {
    padding: var(--space-2xs);
    color: var(--form-field-text-colour);
}

.select2-container--default .select2-results__option[aria-selected] {
    background: inherit;
}

.select2-results__option.loading-results {
    color: var(--form-field-text-colour) !important;
    opacity: .5;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--form-field-text-colour);
    opacity: .5;
}

/* A searchable dropdown's highlighted option and the date picker's chosen day take the Field selected colour, with their
   words dark or white for it, as a badge's are. Their pop-ups sit outside the row, so it's always the website's. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected]:hover,
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:is(:hover, :focus, .prevMonthDay, .nextMonthDay) {
    background: var(--form-field-selected-colour);
    border-color: var(--form-field-selected-colour);
    color: #fff;
}

@supports (color: oklch(from red l c h)) {
    .select2-container--default .select2-results__option--highlighted[aria-selected],
    .select2-container--default .select2-results__option--highlighted[aria-selected]:hover,
    .flatpickr-calendar .flatpickr-day.selected,
    .flatpickr-calendar .flatpickr-day.selected:is(:hover, :focus, .prevMonthDay, .nextMonthDay) {
        color: oklch(from var(--form-field-selected-colour) clamp(0.22, (0.65 - l) * 1000, 1) 0 0);
    }
}

.button {
    text-align: center;
    padding: var(--space-xs) var(--space-sm);
    cursor: pointer;
    user-select: none;
    display: inline-block;
    background: linear-gradient(var(--button-background-gradient-angle), var(--button-background-primary-colour), var(--button-background-secondary-colour));
    border-radius: var(--button-border-radius);
    border-style: solid;
    border-width: var(--button-border-width);
    border-color: var(--button-border-colour);
    color: var(--button-text-colour);
    font-family: var(--button-font-family-name), system-ui, var(--button-font-family-category);
    text-transform: var(--button-text-transform);
    font-weight: var(--button-font-weight);
    letter-spacing: var(--button-letter-spacing);
    font-size: var(--button-font-size);
    line-height: var(--line-height);
}

.button i {
    margin-right: var(--space-2xs);
}

.button i.right {
    margin-right: 0;
    margin-left: var(--space-2xs);
}

.button:hover {
    background: var(--button-hover-background-colour);
    color: var(--button-hover-text-colour);
    border-color: var(--button-hover-border-colour);
}

/* A button that can't be pressed (admin's): its form sending, with "Adding ..." and a spinner. */
.button.disabled,
.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* The secondary variant: the editor's .secondary class and templates' data-variant="secondary" are the same rule, which points the button's colours at the secondary button's; shape and type stay the button's. */
.button:is([data-variant="secondary"], .secondary) {
    --button-background-primary-colour: var(--secondary-button-background-primary-colour);
    --button-background-secondary-colour: var(--secondary-button-background-secondary-colour);
    --button-background-gradient-angle: var(--secondary-button-background-gradient-angle);
    --button-text-colour: var(--secondary-button-text-colour);
    --button-border-colour: var(--secondary-button-border-colour);
    --button-hover-text-colour: var(--secondary-button-hover-text-colour);
    --button-hover-background-colour: var(--secondary-button-hover-background-colour);
    --button-hover-border-colour: var(--secondary-button-hover-border-colour);
}

.button[data-width="full"] {
    width: 100%;
    text-align: center;
}

/* Sizes: data-size (sm, lg, xs; medium is the default), and the editor's .small and .large, which are the same rules. */
.button:is([data-size="lg"], .large) {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--button-font-size-lg);
    line-height: var(--line-height);
}

.button:is([data-size="sm"], .small) {
    padding: var(--space-2xs) var(--space-xs);
    font-size: var(--button-font-size-sm);
    line-height: var(--line-height);
}

.button[data-size="xs"] {
    padding: var(--space-3xs) var(--space-2xs);
    font-size: var(--button-font-size-xs);
    line-height: var(--line-height);
}

/* Buttons together (admin's .button-cluster): stacked and full width on phones, a row from 480px; or always stacked
   (.button-stack). */
.button-cluster {
    display: flex;
    flex-direction: column;
    row-gap: var(--space-xs);
    width: 100%;
    align-items: center;
}

.button-cluster[data-align="right"] {
    justify-content: end;
}

.button-stack {
    display: flex;
    flex-direction: column;
    row-gap: var(--space-xs);
    align-items: center;
}

:is(.button-cluster, .button-stack) .button {
    width: 100%;
}

@media screen and (width >= 480px) {
    .button-cluster {
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: var(--space-sm);
    }

    .button-cluster .button {
        width: auto;
    }

    .button-cluster span :is(a, button) {
        margin-left: var(--space-3xs);
    }
}

/* A photo's box, in the aspect ratio it's set to (the image-aspect-ratio template in image-shape.xsl writes data-crop and --aspect-ratio): a cropped ratio's photo fills the box, and a No crop ratio's shows whole inside it. A natural photo's box has neither, and takes the photo's own shape. */
[data-crop] {
    aspect-ratio: var(--aspect-ratio);
}

[data-crop] img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

[data-crop="false"] img {
    object-fit: contain;
}

/* Until a natural photo's file comes, the lazy loader's 1px placeholder, drawn at the box's width, would make its box square, and the page move when the file does. */
.image-frame > :not([data-crop], .badge) img:is(.lazyload, .lazyloading) {
    height: 100%;
}

/* Photo shapes and frames: set beside an image's aspect ratio, on the div.image-frame round the photo's box
   (image-shape.xsl). The frame carries the shape, and the box inside cuts the photo to it: Rounded's corners from the
   radius tokens, Full being half the side, for leaves and teardrops (on a No crop ratio the photo itself, sized to fit inside its box, as contain fits it), a round box for
   Circle, and for the squircle, the pebbles, beans and blobs (six of each) and a custom SVG a mask stretched to the box (a custom SVG keeps its own
   proportions, unless it says otherwise). Round the shape, the frame draws what reaches past the photo: a backdrop, the
   same shape in a colour, moved or turned; a border, an outline round the round shapes and a ring cut from two copies of
   the mask round the masked ones (a mask would cut a border off); and a shadow, which follows all of it. The backdrop's
   colour starts as a translucent grey and the shadow's as a soft grey; a border is drawn only with a colour. The frame takes the room they reach in its margins, so the
   photo is that much smaller and nothing runs into the next card or is clipped. */
.image-frame {
    --photo-border-width: 0px;
    --photo-border-gap: 0px;
    --photo-backdrop-distance: var(--space-sm);
    --photo-frame-reach: 0px;
    --photo-backdrop-reach: 0px;
    --photo-turn-reach: 0px;
    position: relative;
    isolation: isolate;
    margin: calc(var(--photo-frame-reach) + var(--photo-turn-reach)) calc(var(--photo-frame-reach) + var(--photo-backdrop-reach) + var(--photo-turn-reach)) calc(var(--photo-frame-reach) + var(--photo-backdrop-reach) + var(--photo-turn-reach)) calc(var(--photo-frame-reach) + var(--photo-turn-reach));
}

.image-frame[data-shape] > :not(.badge) {
    overflow: clip;
}

.image-frame[data-shape="rounded"] > :not(.badge),
.image-frame[data-shape="rounded"] > :not(.badge) img {
    border-radius: var(--photo-border-radius);
}

.image-frame[data-shape="rounded"] > [data-crop="false"] picture {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.image-frame[data-shape="rounded"] > [data-crop="false"] img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.image-frame[data-shape="circle"] {
    --photo-border-radius: 50%;
}

.image-frame[data-shape="circle"] > :not(.badge) {
    border-radius: 50%;
}

.image-frame:is([data-shape="squircle"], [data-shape="pebble"], [data-shape="bean"], [data-shape="blob"], [data-shape="custom"]) > :not(.badge) {
    -webkit-mask-image: var(--shape-mask);
    mask-image: var(--shape-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.image-frame[data-shape="squircle"] {
    --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 0C88 0 100 12 100 50C100 88 88 100 50 100C12 100 0 88 0 50C0 12 12 0 50 0Z'/%3E%3C/svg%3E");
}

.image-frame[data-shape="pebble"][data-shape-variant="1"] {
    --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M96.7 48.4C96.3 51.4 95.5 54.4 94.5 57.2C93.6 60.0 92.3 62.7 91.0 65.2C89.6 67.6 88.1 70.0 86.5 72.1C84.9 74.3 83.2 76.3 81.4 78.2C79.7 80.1 77.9 81.9 76.0 83.6C74.1 85.3 72.2 86.8 70.1 88.3C68.1 89.7 65.9 91.1 63.7 92.3C61.5 93.4 59.2 94.5 56.8 95.3C54.3 96.0 51.8 96.6 49.3 96.9C46.7 97.2 44.1 97.3 41.5 97.0C39.0 96.7 36.3 96.2 33.8 95.3C31.4 94.5 28.9 93.3 26.6 91.9C24.3 90.5 22.1 88.8 20.0 86.9C18.0 85.1 16.1 83.0 14.4 80.8C12.7 78.5 11.1 76.1 9.8 73.6C8.4 71.1 7.3 68.4 6.3 65.7C5.3 62.9 4.5 60.1 4.0 57.2C3.4 54.3 3.1 51.3 3.0 48.4C2.9 45.4 3.1 42.4 3.6 39.4C4.0 36.5 4.7 33.6 5.7 30.8C6.7 28.1 8.0 25.4 9.5 23.0C11.0 20.5 12.8 18.3 14.8 16.3C16.7 14.3 18.8 12.5 21.0 11.1C23.2 9.6 25.6 8.4 27.9 7.3C30.2 6.3 32.6 5.6 35.0 4.9C37.4 4.3 39.8 3.9 42.2 3.6C44.5 3.3 46.9 3.1 49.3 3.0C51.7 2.9 54.1 2.9 56.5 3.1C58.9 3.2 61.4 3.5 63.9 3.9C66.4 4.4 68.9 5.0 71.4 5.9C73.9 6.8 76.5 7.9 78.8 9.4C81.2 10.8 83.6 12.5 85.7 14.6C87.7 16.6 89.7 19.0 91.3 21.5C92.9 24.1 94.2 26.9 95.2 29.9C96.1 32.8 96.7 36.0 97.0 39.0C97.3 42.1 97.1 45.3 96.7 48.4Z'/%3E%3C/svg%3E");
}

.image-frame[data-shape="pebble"][data-shape-variant="2"] {
    --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M96.4 50.0C96.9 52.7 97.1 55.5 97.0 58.2C96.9 60.8 96.6 63.5 96.0 66.1C95.4 68.6 94.6 71.1 93.4 73.5C92.3 75.9 90.9 78.1 89.2 80.2C87.6 82.3 85.6 84.3 83.5 86.0C81.4 87.8 79.0 89.3 76.4 90.7C73.9 92.1 71.1 93.2 68.3 94.2C65.4 95.1 62.4 95.8 59.3 96.3C56.3 96.8 53.1 97.0 50.0 97.0C46.9 97.0 43.7 96.8 40.7 96.3C37.6 95.8 34.6 95.1 31.7 94.2C28.9 93.2 26.1 92.1 23.6 90.7C21.0 89.3 18.6 87.8 16.5 86.0C14.4 84.3 12.4 82.3 10.8 80.2C9.1 78.1 7.7 75.9 6.6 73.5C5.4 71.1 4.6 68.6 4.0 66.1C3.4 63.5 3.1 60.8 3.0 58.2C2.9 55.5 3.1 52.7 3.6 50.0C4.0 47.3 4.7 44.5 5.5 41.8C6.4 39.2 7.5 36.5 8.8 33.9C10.0 31.4 11.4 28.9 13.0 26.5C14.6 24.1 16.3 21.9 18.1 19.8C19.9 17.7 21.8 15.7 23.8 14.0C25.8 12.2 27.9 10.7 30.0 9.3C32.1 7.9 34.3 6.8 36.5 5.8C38.7 4.9 41.0 4.2 43.2 3.7C45.5 3.2 47.7 3.0 50.0 3.0C52.3 3.0 54.5 3.2 56.8 3.7C59.0 4.2 61.3 4.9 63.5 5.8C65.7 6.8 67.9 7.9 70.0 9.3C72.1 10.7 74.2 12.2 76.2 14.0C78.2 15.7 80.1 17.7 81.9 19.8C83.7 21.9 85.4 24.1 87.0 26.5C88.6 28.9 90.0 31.4 91.2 33.9C92.5 36.5 93.6 39.2 94.5 41.8C95.3 44.5 96.0 47.3 96.4 50.0Z'/%3E%3C/svg%3E");
}

.image-frame[data-shape="pebble"][data-shape-variant="3"] {
    --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M95.4 50.5C94.7 53.2 93.6 55.7 92.5 58.1C91.5 60.5 90.2 62.7 89.0 64.8C87.8 67.0 86.7 69.0 85.5 71.0C84.3 72.9 83.2 74.9 82.0 76.8C80.8 78.7 79.7 80.7 78.3 82.5C77.0 84.3 75.6 86.2 74.0 87.7C72.4 89.3 70.6 90.8 68.8 92.0C66.9 93.2 64.9 94.2 62.9 94.9C60.9 95.7 58.7 96.1 56.6 96.5C54.5 96.8 52.3 96.9 50.2 97.0C48.0 97.1 45.9 97.0 43.7 96.9C41.6 96.7 39.4 96.5 37.1 96.1C34.9 95.8 32.7 95.3 30.4 94.6C28.2 93.9 25.9 93.0 23.8 91.8C21.7 90.6 19.6 89.1 17.7 87.4C15.9 85.7 14.1 83.7 12.6 81.6C11.0 79.5 9.7 77.1 8.5 74.6C7.4 72.2 6.4 69.6 5.6 67.0C4.8 64.4 4.1 61.6 3.7 58.9C3.3 56.1 3.0 53.3 3.0 50.5C3.0 47.7 3.2 44.8 3.8 42.1C4.3 39.4 5.2 36.7 6.3 34.3C7.5 31.9 9.0 29.6 10.7 27.6C12.3 25.6 14.3 23.9 16.3 22.5C18.2 21.0 20.4 19.9 22.4 18.9C24.4 17.9 26.5 17.2 28.4 16.4C30.3 15.5 32.1 14.8 33.8 14.0C35.6 13.1 37.2 12.2 39.0 11.3C40.7 10.3 42.4 9.2 44.3 8.2C46.2 7.2 48.1 6.1 50.2 5.3C52.3 4.5 54.5 3.8 56.7 3.4C59.0 3.0 61.4 2.8 63.8 3.0C66.1 3.2 68.5 3.6 70.9 4.3C73.2 5.0 75.6 6.1 77.8 7.3C80.0 8.6 82.2 10.1 84.2 11.8C86.2 13.6 88.1 15.6 89.8 17.8C91.4 20.0 93.0 22.5 94.1 25.1C95.2 27.7 96.1 30.5 96.6 33.4C97.1 36.2 97.2 39.2 97.0 42.1C96.8 44.9 96.2 47.8 95.4 50.5Z'/%3E%3C/svg%3E");
}

.image-frame[data-shape="pebble"][data-shape-variant="4"] {
    --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M96.4 48.3C95.9 51.4 95.0 54.4 94.0 57.2C93.0 60.1 91.7 62.7 90.5 65.3C89.2 67.8 87.8 70.2 86.4 72.5C84.9 74.8 83.4 76.9 81.9 79.0C80.3 81.1 78.7 83.2 77.0 85.1C75.2 87.0 73.4 88.8 71.3 90.4C69.3 92.0 67.2 93.4 64.9 94.4C62.7 95.5 60.3 96.3 57.9 96.7C55.5 97.1 53.0 97.2 50.6 97.0C48.2 96.8 45.8 96.2 43.5 95.5C41.1 94.8 38.9 93.8 36.7 92.8C34.6 91.7 32.5 90.5 30.4 89.2C28.3 88.0 26.2 86.6 24.2 85.1C22.1 83.6 20.0 82.1 18.0 80.2C16.0 78.4 14.0 76.4 12.3 74.2C10.5 71.9 8.7 69.4 7.4 66.7C6.0 64.0 4.8 60.9 4.1 57.9C3.4 54.8 3.0 51.5 3.0 48.3C3.0 45.1 3.5 41.8 4.2 38.7C4.9 35.6 6.1 32.6 7.4 29.9C8.8 27.2 10.5 24.6 12.2 22.4C14.0 20.1 16.0 18.1 17.9 16.2C19.9 14.4 22.1 12.9 24.2 11.5C26.3 10.1 28.5 8.9 30.7 7.9C32.8 6.9 35.0 6.1 37.2 5.4C39.4 4.7 41.6 4.2 43.9 3.8C46.1 3.4 48.3 3.2 50.6 3.0C52.8 2.9 55.1 2.9 57.4 3.0C59.7 3.1 62.0 3.3 64.4 3.8C66.8 4.2 69.2 4.7 71.6 5.6C74.1 6.4 76.6 7.4 78.9 8.8C81.2 10.1 83.6 11.8 85.7 13.7C87.8 15.7 89.8 18.1 91.4 20.7C93.1 23.2 94.4 26.2 95.4 29.2C96.3 32.2 96.8 35.5 97.0 38.7C97.2 41.9 96.9 45.2 96.4 48.3Z'/%3E%3C/svg%3E");
}

.image-frame[data-shape="pebble"][data-shape-variant="5"] {
    --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M96.2 49.5C95.6 52.0 94.7 54.4 93.6 56.7C92.6 59.0 91.3 61.1 90.0 63.2C88.8 65.2 87.3 67.1 85.9 69.0C84.5 70.9 83.1 72.7 81.6 74.6C80.1 76.4 78.6 78.3 76.9 80.1C75.2 81.9 73.4 83.7 71.4 85.4C69.4 87.2 67.3 88.9 64.9 90.4C62.5 91.8 59.9 93.2 57.2 94.3C54.4 95.3 51.4 96.2 48.4 96.6C45.4 97.1 42.2 97.2 39.1 97.0C36.0 96.8 32.9 96.2 29.9 95.3C27.0 94.4 24.1 93.1 21.5 91.6C18.8 90.1 16.4 88.2 14.2 86.2C12.1 84.2 10.2 81.9 8.7 79.5C7.2 77.2 5.9 74.6 5.0 72.1C4.1 69.6 3.5 66.9 3.2 64.3C2.9 61.8 2.9 59.2 3.0 56.7C3.1 54.2 3.5 51.8 4.0 49.5C4.4 47.2 5.1 44.9 5.7 42.7C6.3 40.5 7.0 38.4 7.8 36.2C8.6 34.0 9.4 31.9 10.3 29.7C11.3 27.5 12.3 25.3 13.5 23.1C14.8 21.0 16.2 18.7 17.9 16.7C19.6 14.7 21.5 12.7 23.7 11.0C25.9 9.3 28.4 7.7 31.0 6.5C33.7 5.3 36.6 4.4 39.5 3.8C42.4 3.2 45.4 3.0 48.4 3.0C51.4 3.0 54.4 3.4 57.3 4.0C60.2 4.6 63.1 5.5 65.8 6.5C68.5 7.5 71.2 8.7 73.7 10.0C76.2 11.4 78.7 12.9 80.9 14.6C83.2 16.2 85.4 18.1 87.3 20.1C89.2 22.1 91.0 24.3 92.4 26.6C93.8 28.9 95.0 31.4 95.7 34.0C96.5 36.5 96.9 39.2 97.0 41.8C97.1 44.4 96.7 47.0 96.2 49.5Z'/%3E%3C/svg%3E");
}

.image-frame[data-shape="pebble"][data-shape-variant="6"] {
    --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M96.2 57.7C95.7 60.7 95.0 63.8 94.1 66.6C93.1 69.5 91.9 72.3 90.6 74.9C89.2 77.5 87.6 80.0 85.8 82.2C84.1 84.4 82.1 86.5 80.1 88.3C78.0 90.0 75.8 91.6 73.4 92.8C71.1 94.1 68.6 95.0 66.1 95.7C63.6 96.4 61.0 96.9 58.4 97.0C55.7 97.1 53.0 97.0 50.4 96.6C47.7 96.2 45.0 95.5 42.4 94.7C39.8 93.8 37.1 92.6 34.6 91.3C32.1 90.0 29.6 88.5 27.3 86.8C25.0 85.1 22.7 83.3 20.6 81.3C18.5 79.3 16.6 77.2 14.8 75.1C13.0 72.9 11.4 70.6 10.0 68.3C8.6 66.0 7.4 63.6 6.4 61.3C5.4 58.9 4.6 56.5 4.0 54.1C3.4 51.7 3.1 49.3 3.0 46.9C2.9 44.6 3.0 42.2 3.4 39.9C3.8 37.7 4.4 35.4 5.2 33.2C6.1 31.0 7.1 28.9 8.4 26.9C9.7 24.8 11.2 22.9 12.9 21.0C14.6 19.1 16.5 17.4 18.5 15.7C20.6 14.1 22.8 12.5 25.2 11.2C27.5 9.8 30.0 8.5 32.6 7.5C35.2 6.4 37.9 5.5 40.6 4.8C43.3 4.1 46.1 3.5 48.9 3.2C51.7 3.0 54.5 2.9 57.3 3.0C60.0 3.1 62.8 3.5 65.4 4.1C68.0 4.8 70.6 5.6 73.0 6.7C75.4 7.9 77.8 9.2 79.9 10.8C82.1 12.4 84.1 14.2 85.9 16.3C87.7 18.3 89.3 20.6 90.7 23.0C92.1 25.4 93.2 28.1 94.2 30.8C95.1 33.6 95.8 36.5 96.3 39.4C96.8 42.4 97.0 45.5 97.0 48.5C97.0 51.6 96.7 54.7 96.2 57.7Z'/%3E%3C/svg%3E");
}

.image-frame[data-shape="bean"][data-shape-variant="1"] {
    --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M94.0 20.5C95.0 22.9 95.7 25.6 96.2 28.3C96.7 30.9 97.0 33.8 97.0 36.5C97.0 39.2 96.8 42.0 96.4 44.7C96.1 47.4 95.4 50.0 94.7 52.5C93.9 55.0 93.0 57.4 92.0 59.6C90.9 61.8 89.7 63.9 88.5 65.8C87.3 67.7 85.9 69.4 84.6 71.0C83.2 72.6 81.8 74.0 80.4 75.3C79.0 76.7 77.5 77.8 76.1 78.9C74.7 80.0 73.3 81.0 71.9 81.9C70.5 82.9 69.2 83.7 67.8 84.6C66.5 85.4 65.1 86.2 63.8 87.0C62.4 87.8 61.1 88.6 59.7 89.3C58.3 90.1 56.9 90.9 55.5 91.6C54.0 92.3 52.5 93.0 51.0 93.7C49.4 94.3 47.8 95.0 46.1 95.4C44.4 95.9 42.7 96.4 40.9 96.6C39.1 96.9 37.2 97.1 35.3 97.0C33.4 96.9 31.4 96.7 29.5 96.2C27.5 95.8 25.5 95.1 23.6 94.2C21.7 93.3 19.8 92.1 18.1 90.7C16.3 89.3 14.6 87.7 13.0 85.8C11.5 84.0 10.0 81.8 8.8 79.6C7.6 77.4 6.5 74.9 5.6 72.4C4.8 69.8 4.1 67.1 3.7 64.4C3.2 61.7 3.0 58.9 3.0 56.1C3.0 53.4 3.2 50.6 3.6 47.9C4.0 45.2 4.6 42.6 5.4 40.1C6.1 37.6 7.1 35.3 8.1 33.0C9.2 30.8 10.4 28.8 11.7 26.9C12.9 25.0 14.3 23.3 15.7 21.7C17.1 20.2 18.6 18.8 20.1 17.6C21.5 16.4 23.1 15.4 24.6 14.5C26.1 13.6 27.6 12.8 29.1 12.2C30.6 11.6 32.1 11.2 33.5 10.8C35.0 10.5 36.4 10.3 37.8 10.1C39.2 9.9 40.5 9.9 41.8 9.8C43.1 9.7 44.4 9.7 45.6 9.5C46.9 9.4 48.0 9.3 49.3 9.0C50.5 8.8 51.8 8.4 53.1 8.0C54.4 7.5 55.8 6.9 57.3 6.3C58.8 5.7 60.5 5.0 62.2 4.5C64.0 4.0 65.9 3.4 67.8 3.1C69.8 2.9 71.9 2.8 73.9 3.0C75.9 3.2 78.1 3.8 80.0 4.6C82.0 5.5 84.0 6.7 85.7 8.2C87.5 9.7 89.1 11.6 90.5 13.6C91.9 15.7 93.1 18.0 94.0 20.5Z'/%3E%3C/svg%3E");
}

.image-frame[data-shape="bean"][data-shape-variant="2"] {
    --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M95.4 70.1C94.6 72.7 93.7 75.3 92.6 77.7C91.5 80.1 90.1 82.3 88.7 84.3C87.2 86.3 85.5 88.1 83.8 89.7C82.1 91.2 80.3 92.5 78.4 93.5C76.6 94.6 74.6 95.4 72.7 96.0C70.8 96.5 68.9 96.8 67.0 97.0C65.1 97.2 63.3 97.1 61.5 96.9C59.7 96.7 57.9 96.3 56.3 95.9C54.6 95.5 53.0 94.9 51.5 94.4C50.0 93.8 48.5 93.1 47.1 92.5C45.7 91.9 44.3 91.2 43.0 90.6C41.6 89.9 40.3 89.3 39.0 88.6C37.7 88.0 36.4 87.3 35.0 86.7C33.7 86.0 32.3 85.3 30.9 84.6C29.5 83.8 28.1 83.1 26.7 82.2C25.2 81.3 23.7 80.3 22.3 79.2C20.8 78.1 19.3 76.9 17.8 75.5C16.4 74.0 14.9 72.5 13.5 70.7C12.2 69.0 10.8 67.1 9.6 65.0C8.5 62.9 7.3 60.6 6.4 58.2C5.5 55.8 4.7 53.2 4.1 50.5C3.6 47.9 3.2 45.0 3.0 42.3C2.8 39.5 2.9 36.6 3.2 33.8C3.5 31.0 4.0 28.2 4.7 25.6C5.5 22.9 6.5 20.4 7.7 18.1C8.8 15.7 10.3 13.6 11.8 11.7C13.3 9.8 15.1 8.2 16.9 6.9C18.8 5.6 20.8 4.7 22.8 4.0C24.7 3.3 26.8 3.0 28.8 3.0C30.8 3.0 32.9 3.3 34.8 3.7C36.6 4.2 38.5 4.9 40.1 5.6C41.8 6.4 43.4 7.3 44.8 8.1C46.2 8.8 47.5 9.7 48.8 10.3C50.0 11.0 51.2 11.6 52.3 12.0C53.5 12.4 54.6 12.7 55.7 12.9C56.9 13.2 58.0 13.2 59.3 13.3C60.5 13.5 61.8 13.5 63.2 13.6C64.6 13.7 66.0 13.8 67.5 14.1C69.0 14.4 70.5 14.7 72.1 15.2C73.7 15.8 75.3 16.5 76.9 17.4C78.5 18.2 80.1 19.3 81.7 20.6C83.2 21.9 84.7 23.3 86.2 25.0C87.6 26.7 89.0 28.6 90.2 30.7C91.4 32.8 92.6 35.0 93.5 37.4C94.5 39.8 95.3 42.4 95.8 45.1C96.4 47.8 96.8 50.6 97.0 53.4C97.2 56.1 97.1 59.0 96.9 61.8C96.6 64.6 96.1 67.4 95.4 70.1Z'/%3E%3C/svg%3E");
}

.image-frame[data-shape="bean"][data-shape-variant="3"] {
    --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M87.3 9.0C89.0 10.6 90.5 12.5 91.7 14.5C93.0 16.5 94.0 18.7 94.8 21.0C95.6 23.2 96.2 25.6 96.5 28.0C96.9 30.4 97.0 32.8 97.0 35.2C97.0 37.6 96.7 40.0 96.3 42.2C95.9 44.5 95.3 46.8 94.7 48.9C94.0 51.0 93.2 53.0 92.3 55.0C91.4 56.9 90.4 58.7 89.3 60.5C88.3 62.2 87.2 63.8 86.1 65.4C85.0 66.9 83.8 68.4 82.6 69.8C81.5 71.2 80.3 72.5 79.1 73.8C77.9 75.1 76.7 76.4 75.4 77.6C74.2 78.9 73.0 80.1 71.7 81.2C70.4 82.4 69.1 83.6 67.7 84.7C66.3 85.9 64.9 87.0 63.4 88.1C61.8 89.2 60.3 90.2 58.6 91.2C56.9 92.1 55.2 93.0 53.4 93.8C51.6 94.6 49.6 95.3 47.7 95.8C45.7 96.3 43.6 96.8 41.5 97.0C39.5 97.1 37.3 97.2 35.2 97.0C33.0 96.8 30.8 96.4 28.7 95.8C26.6 95.2 24.5 94.3 22.5 93.3C20.5 92.2 18.5 90.9 16.8 89.5C15.0 88.0 13.3 86.3 11.8 84.5C10.3 82.6 9.0 80.6 7.8 78.5C6.7 76.3 5.7 74.0 5.0 71.7C4.3 69.4 3.7 67.0 3.4 64.6C3.1 62.2 2.9 59.7 3.0 57.4C3.1 55.0 3.3 52.6 3.7 50.3C4.1 48.0 4.7 45.8 5.4 43.7C6.1 41.6 7.0 39.5 7.9 37.6C8.9 35.7 9.9 33.9 11.1 32.2C12.2 30.6 13.4 29.0 14.7 27.6C16.0 26.2 17.3 24.9 18.7 23.7C20.1 22.6 21.6 21.6 23.0 20.7C24.5 19.9 26.1 19.2 27.6 18.6C29.1 18.1 30.6 17.7 32.1 17.4C33.6 17.1 35.1 17.0 36.5 16.8C37.9 16.6 39.2 16.6 40.5 16.4C41.7 16.1 42.9 16.0 44.1 15.5C45.3 15.1 46.5 14.6 47.7 13.8C49.0 13.1 50.2 12.1 51.7 11.2C53.1 10.2 54.7 8.9 56.4 7.9C58.2 6.8 60.1 5.7 62.1 4.9C64.2 4.1 66.4 3.3 68.6 3.0C70.8 2.7 73.2 2.7 75.3 3.0C77.5 3.3 79.8 4.0 81.8 5.0C83.8 6.0 85.7 7.4 87.3 9.0Z'/%3E%3C/svg%3E");
}

.image-frame[data-shape="bean"][data-shape-variant="4"] {
    --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M96.4 38.6C96.8 41.6 97.0 44.9 97.0 48.0C97.0 51.1 96.7 54.4 96.2 57.4C95.8 60.4 95.0 63.4 94.2 66.2C93.3 69.0 92.2 71.7 91.0 74.1C89.8 76.5 88.5 78.7 87.0 80.7C85.6 82.7 84.0 84.5 82.5 86.0C80.9 87.5 79.2 88.8 77.6 89.8C76.0 90.9 74.3 91.7 72.7 92.3C71.1 93.0 69.5 93.4 67.9 93.7C66.4 94.0 64.9 94.0 63.4 94.1C62.0 94.1 60.6 94.0 59.3 93.8C57.9 93.7 56.7 93.5 55.5 93.3C54.2 93.1 53.1 92.9 52.0 92.8C50.8 92.7 49.8 92.6 48.6 92.7C47.5 92.8 46.4 92.9 45.2 93.2C43.9 93.5 42.7 94.0 41.3 94.4C39.9 94.9 38.4 95.5 36.8 95.9C35.2 96.3 33.4 96.8 31.6 97.0C29.7 97.2 27.7 97.3 25.8 97.0C23.8 96.7 21.8 96.1 19.9 95.1C17.9 94.2 16.0 92.9 14.3 91.2C12.5 89.5 10.9 87.5 9.5 85.2C8.1 82.9 6.9 80.3 5.9 77.5C5.0 74.8 4.2 71.7 3.7 68.7C3.2 65.7 3.0 62.5 3.0 59.3C3.0 56.2 3.3 53.0 3.7 50.0C4.2 46.9 4.9 43.9 5.7 41.1C6.6 38.4 7.7 35.7 8.9 33.3C10.1 30.8 11.4 28.6 12.8 26.6C14.2 24.6 15.8 22.8 17.3 21.3C18.9 19.7 20.5 18.4 22.0 17.2C23.6 16.1 25.2 15.1 26.8 14.3C28.3 13.5 29.9 12.8 31.3 12.2C32.8 11.7 34.3 11.2 35.7 10.7C37.1 10.3 38.4 9.9 39.7 9.5C41.1 9.1 42.3 8.7 43.6 8.3C45.0 7.8 46.2 7.4 47.6 6.9C48.9 6.5 50.2 6.0 51.6 5.5C53.0 5.1 54.4 4.6 55.9 4.2C57.5 3.9 59.0 3.5 60.7 3.3C62.3 3.1 64.0 2.9 65.8 3.0C67.5 3.1 69.3 3.3 71.2 3.7C73.0 4.2 74.9 4.9 76.7 5.8C78.5 6.8 80.3 8.0 82.1 9.5C83.8 10.9 85.5 12.7 87.0 14.7C88.6 16.7 90.0 19.0 91.2 21.5C92.5 24.0 93.6 26.7 94.4 29.6C95.3 32.4 96.0 35.5 96.4 38.6Z'/%3E%3C/svg%3E");
}

.image-frame[data-shape="bean"][data-shape-variant="5"] {
    --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M86.3 88.5C84.6 90.0 82.7 91.4 80.7 92.5C78.7 93.6 76.5 94.6 74.3 95.3C72.1 96.0 69.8 96.5 67.6 96.8C65.3 97.1 63.0 97.1 60.8 97.0C58.5 96.9 56.3 96.6 54.2 96.1C52.0 95.6 50.0 95.0 48.0 94.2C46.0 93.5 44.2 92.6 42.4 91.6C40.6 90.7 39.0 89.6 37.4 88.5C35.8 87.5 34.4 86.3 33.0 85.2C31.6 84.0 30.3 82.8 29.1 81.7C27.8 80.5 26.6 79.3 25.5 78.1C24.3 77.0 23.2 75.8 22.1 74.6C20.9 73.4 19.9 72.2 18.8 71.0C17.7 69.7 16.6 68.5 15.5 67.1C14.4 65.8 13.3 64.4 12.3 63.0C11.3 61.5 10.2 60.0 9.3 58.4C8.3 56.8 7.4 55.1 6.6 53.3C5.8 51.5 5.1 49.6 4.5 47.7C4.0 45.7 3.5 43.6 3.2 41.5C3.0 39.5 2.9 37.3 3.0 35.1C3.1 33.0 3.4 30.7 4.0 28.6C4.5 26.5 5.2 24.3 6.2 22.3C7.2 20.3 8.4 18.3 9.7 16.5C11.1 14.7 12.7 13.0 14.4 11.4C16.2 9.9 18.1 8.6 20.1 7.5C22.1 6.3 24.3 5.4 26.5 4.7C28.7 4.0 31.0 3.5 33.2 3.2C35.5 2.9 37.8 2.9 40.0 3.0C42.3 3.1 44.5 3.5 46.6 4.0C48.8 4.5 50.8 5.2 52.8 6.0C54.7 6.9 56.6 7.9 58.3 9.0C60.0 10.1 61.5 11.3 63.0 12.6C64.4 13.9 65.7 15.4 66.8 16.8C68.0 18.2 68.9 19.7 69.8 21.1C70.7 22.5 71.5 24.0 72.2 25.3C72.9 26.7 73.6 28.0 74.3 29.2C75.0 30.5 75.6 31.6 76.4 32.7C77.2 33.8 78.1 34.8 79.1 35.9C80.1 36.9 81.2 37.9 82.4 39.0C83.6 40.2 85.0 41.3 86.3 42.6C87.6 43.9 89.0 45.4 90.2 47.0C91.4 48.5 92.6 50.3 93.6 52.2C94.6 54.0 95.4 56.1 96.0 58.1C96.6 60.2 96.9 62.4 97.0 64.6C97.1 66.8 96.9 69.0 96.5 71.2C96.1 73.3 95.4 75.5 94.5 77.6C93.5 79.6 92.4 81.6 91.0 83.4C89.7 85.3 88.1 87.0 86.3 88.5Z'/%3E%3C/svg%3E");
}

.image-frame[data-shape="bean"][data-shape-variant="6"] {
    --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M71.1 4.3C73.6 4.9 76.1 5.9 78.4 7.0C80.7 8.1 82.9 9.4 84.8 10.9C86.7 12.3 88.5 14.0 89.9 15.7C91.4 17.4 92.7 19.3 93.7 21.1C94.7 23.0 95.4 25.0 96.0 26.9C96.5 28.8 96.8 30.8 97.0 32.6C97.2 34.5 97.1 36.4 96.9 38.2C96.7 40.0 96.4 41.7 96.0 43.4C95.6 45.1 95.0 46.7 94.5 48.2C93.9 49.8 93.3 51.2 92.7 52.6C92.1 54.1 91.4 55.4 90.8 56.8C90.2 58.2 89.6 59.5 88.9 60.8C88.3 62.1 87.7 63.4 87.1 64.8C86.4 66.2 85.8 67.5 85.1 68.9C84.3 70.3 83.6 71.7 82.7 73.2C81.9 74.6 81.0 76.1 79.9 77.6C78.8 79.1 77.7 80.6 76.3 82.1C74.9 83.5 73.5 85.0 71.8 86.4C70.1 87.8 68.2 89.1 66.2 90.3C64.2 91.5 62.0 92.6 59.7 93.5C57.4 94.5 54.9 95.3 52.3 95.9C49.8 96.4 47.1 96.8 44.4 97.0C41.7 97.2 38.9 97.1 36.3 96.8C33.6 96.6 30.9 96.1 28.3 95.3C25.8 94.6 23.3 93.7 21.0 92.5C18.7 91.4 16.6 90.1 14.6 88.6C12.7 87.1 11.0 85.5 9.5 83.7C8.1 82.0 6.8 80.2 5.9 78.3C4.9 76.4 4.2 74.4 3.7 72.5C3.2 70.5 3.0 68.5 3.0 66.6C3.0 64.7 3.3 62.8 3.7 61.0C4.1 59.2 4.8 57.4 5.6 55.8C6.4 54.1 7.4 52.6 8.5 51.1C9.6 49.7 10.9 48.4 12.1 47.2C13.4 46.0 14.7 44.9 16.0 43.9C17.3 42.9 18.6 42.1 19.7 41.3C20.8 40.4 21.9 39.7 22.7 38.8C23.6 38.0 24.4 37.2 25.0 36.3C25.6 35.3 26.0 34.3 26.4 33.1C26.8 32.0 27.0 30.6 27.4 29.1C27.8 27.6 28.2 26.0 28.8 24.2C29.4 22.5 30.1 20.6 31.1 18.8C32.2 17.0 33.4 15.1 35.0 13.4C36.5 11.7 38.4 10.1 40.4 8.7C42.4 7.3 44.8 6.1 47.2 5.2C49.7 4.3 52.3 3.7 55.0 3.3C57.6 2.9 60.4 2.8 63.1 3.0C65.8 3.2 68.5 3.6 71.1 4.3Z'/%3E%3C/svg%3E");
}

.image-frame[data-shape="blob"][data-shape-variant="1"] {
    --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M34.8 13.7Q57.7 3.0 74.2 21.4L80.5 28.4Q97.0 46.7 85.0 67.8L80.5 75.9Q68.5 97.0 42.5 92.4L32.6 90.6Q6.6 86.0 5.1 61.9L4.5 52.7Q3.0 28.6 26.0 17.8Z'/%3E%3C/svg%3E");
}

.image-frame[data-shape="blob"][data-shape-variant="2"] {
    --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M27.2 19.9Q44.8 3.0 66.7 16.3L75.1 21.3Q97.0 34.6 93.2 56.8L91.7 65.2Q87.9 87.5 62.0 91.5L52.1 93.0Q26.2 97.0 16.4 74.4L12.7 65.8Q3.0 43.3 20.6 26.4Z'/%3E%3C/svg%3E");
}

.image-frame[data-shape="blob"][data-shape-variant="3"] {
    --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M39.3 14.4Q63.6 3.0 76.9 20.4L83.6 29.1Q97.0 46.5 85.8 66.7L80.1 76.8Q68.9 97.0 45.7 92.0L34.1 89.5Q10.8 84.6 7.7 63.3L6.1 52.7Q3.0 31.4 27.2 20.0Z'/%3E%3C/svg%3E");
}

.image-frame[data-shape="blob"][data-shape-variant="4"] {
    --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M38.1 12.3Q57.8 3.0 71.9 12.5L82.9 19.9Q97.0 29.4 96.4 45.5L95.9 58.0Q95.3 74.1 80.4 82.3L68.7 88.7Q53.7 97.0 37.3 90.6L24.5 85.6Q8.1 79.2 6.3 61.1L4.8 47.0Q3.0 28.9 22.7 19.6Z'/%3E%3C/svg%3E");
}

.image-frame[data-shape="blob"][data-shape-variant="5"] {
    --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M15.8 27.8Q25.9 3.0 51.5 4.8L58.5 5.3Q84.0 7.1 89.7 33.0L91.3 40.1Q97.0 65.9 73.2 79.6L66.7 83.3Q42.9 97.0 25.3 80.4L20.6 75.9Q3.0 59.4 13.1 34.6Z'/%3E%3C/svg%3E");
}

.image-frame[data-shape="blob"][data-shape-variant="6"] {
    --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M32.9 13.4Q49.7 3.0 66.4 11.4L79.4 18.0Q96.1 26.4 96.4 42.6L96.7 55.1Q97.0 71.3 81.9 80.6L70.1 87.8Q54.9 97.0 38.9 91.9L26.4 87.9Q10.3 82.8 7.7 64.4L5.6 50.2Q3.0 31.8 19.8 21.4Z'/%3E%3C/svg%3E");
}

.image-frame[data-backdrop]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--photo-backdrop-colour, rgb(0 0 0 / 0.1));
    border-radius: var(--photo-border-radius, 0);
    -webkit-mask-image: var(--shape-mask, none);
    mask-image: var(--shape-mask, none);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.image-frame[data-backdrop="moved"] {
    --photo-backdrop-reach: var(--photo-backdrop-distance);
}

.image-frame[data-backdrop="moved"]::before {
    transform: translate(var(--photo-backdrop-distance), var(--photo-backdrop-distance));
}

.image-frame[data-backdrop="turned"] {
    --photo-turn-reach: 3%;
}

.image-frame[data-backdrop="turned"]::before {
    transform: rotate(6deg);
}

.image-frame[data-border] {
    --photo-frame-reach: calc(var(--photo-border-width) + var(--photo-border-gap));
}

.image-frame[data-border]:not([data-shape="squircle"], [data-shape="pebble"], [data-shape="bean"], [data-shape="blob"], [data-shape="custom"]) > :not(.badge) {
    outline: var(--photo-border-width) solid var(--photo-border-colour);
    outline-offset: var(--photo-border-gap);
}

.image-frame[data-border]:is([data-shape="squircle"], [data-shape="pebble"], [data-shape="bean"], [data-shape="blob"], [data-shape="custom"])::after {
    content: "";
    position: absolute;
    inset: calc(-1 * (var(--photo-border-gap) + var(--photo-border-width)));
    z-index: 1;
    pointer-events: none;
    background: var(--photo-border-colour);
    -webkit-mask-image: var(--shape-mask), var(--shape-mask);
    mask-image: var(--shape-mask), var(--shape-mask);
    -webkit-mask-size: 100% 100%, calc(100% - 2 * var(--photo-border-width)) calc(100% - 2 * var(--photo-border-width));
    mask-size: 100% 100%, calc(100% - 2 * var(--photo-border-width)) calc(100% - 2 * var(--photo-border-width));
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.image-frame[data-shadow="sm"] {
    filter: drop-shadow(var(--shadow-sm) var(--photo-shadow-colour, rgb(0 0 0 / 0.25)));
}

.image-frame[data-shadow="md"] {
    filter: drop-shadow(var(--shadow-md) var(--photo-shadow-colour, rgb(0 0 0 / 0.25)));
}

.image-frame[data-shadow="lg"] {
    filter: drop-shadow(var(--shadow-lg) var(--photo-shadow-colour, rgb(0 0 0 / 0.25)));
}

.image-link-hover-effect-fade img {
    transition: .3s ease-in-out;
}

.image-link-hover-effect-fade:hover img {
    opacity: 0.75;
    transition: .3s ease-in-out;
}

.image-link-hover-effect-zoom img {
    transition: .3s ease-in-out;
}

.image-link-hover-effect-zoom:hover img {
    transform: scale(1.3);
    transition: .3s ease-in-out;
}

.image-link-hover-effect-grayscale img {
    filter: grayscale(100%);
    transition: .3s ease-in-out;
}

.image-link-hover-effect-grayscale:hover img {
    filter: grayscale(0%);
    transition: .3s ease-in-out;
}

.image-link-hover-effect-pop picture {
    position: relative;
}

.image-link-hover-effect-pop picture::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background: rgba(255,255,255,.2);
    border-radius: 100%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.image-link-hover-effect-pop picture:hover::before {
    animation: pop .75s;
}

@keyframes pop {
    0% {
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}

/* The hover effects that move stay still for people who reduce motion; the others only change colour. */
@media (prefers-reduced-motion: reduce) {
    .image-link-hover-effect-zoom:hover img {
        transform: none;
    }

    .image-link-hover-effect-pop picture:hover::before {
        animation: none;
    }
}

.image-link-hover-effect-darken picture {
    position: relative;
}

.image-link-hover-effect-darken picture::before {
    z-index: 100;
    transition: .3s ease-in-out;
    font-size: var(--font-size-xl);
    color: white;
    content: "\f06e";
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.image-link-hover-effect-darken picture:hover::before {
    opacity: 1;
    transition: .3s ease-in-out;
}

.image-link-hover-effect-darken picture img {
    transition: .3s ease-in-out;
}

.image-link-hover-effect-darken picture:hover img {
    filter: brightness(0.5);
    transition: .3s ease-in-out;
}

.fade-in.lazyload,
.fade-in.lazyloading {
    opacity: 0;
}

.fade-in.lazyloaded {
    opacity: 1;
    transition: opacity 0.5s;
}

/* Breadcrumbs are a <nav>, so they take the paragraph's text here (the checkout's steps are a paragraph anyway). */
.breadcrumbs {
    color: var(--paragraph-colour);
    font-size: var(--paragraph-font-size-sm);
    line-height: var(--paragraph-line-height);
    font-weight: var(--paragraph-font-weight);
    letter-spacing: var(--paragraph-letter-spacing);
}

.breadcrumbs i {
    margin: 0 0.5em;
    opacity: 0.5;
}

.breadcrumbs [aria-current] {
    font-weight: 700;
}

.listing-filters h5 {
    text-transform: uppercase;
}

.listing-filter-form-field-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
}

.listing-filter-form-field-checkbox-label {
    cursor: pointer;
    user-select: none;
}

.listing-filter-form-field-checkbox-quantity {
    opacity: 0.5;
    padding-left: var(--space-3xs);
    white-space: nowrap;
}

.listing-filter-form-field-checkbox-swatch {
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.15);
    margin-right: var(--space-3xs);
    vertical-align: -0.15em;
}

.listing-filter-form-field-price-inputs {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.listing-filter-form-field-price-input {
    flex: 1 1 0%;
    min-width: 0;
    width: auto;
}

.listing-filter-form-field-price-separator {
    opacity: 0.5;
    flex-shrink: 0;
}

.filters {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.filters-heading {
    opacity: 0.6;
    font-weight: 500;
    font-size: var(--font-size-sm);
}

.filter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: var(--space-3xs) var(--space-2xs);
    background: var(--grey-200);
    border-radius: var(--form-field-border-radius);
    font-size: var(--font-size-sm);
    line-height: 1.2;
}

.filter-name {
    opacity: 0.6;
}

.filter-name::after {
    content: ":";
    opacity: 0.6;
}

.filter-value {
    font-weight: 500;
}

.filter a {
    display: inline-flex;
    align-items: center;
    color: var(--grey-400);
    text-decoration: none;
    user-select: none;
}

.filter a:hover {
    color: var(--grey-800);
}

.filter a i {
    font-size: var(--font-size-xs);
    margin-right: 0;
}

.filters-clear-all {
    color: var(--grey-400);
    font-size: var(--font-size-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    text-decoration: none;
    user-select: none;
}

.filters-clear-all i {
    font-size: var(--font-size-xs);
    margin-right: 0;
}

.filters-clear-all:hover {
    color: var(--grey-800);
}

@media screen and (width < 768px) {
    /* Below 768px the panel is hidden in its column, and its button opens it in a drawer (.listing-filters-dialog), which
       it's moved into while it's open. */
    .listing-filters-menu-wrapper {
        display: none;
    }

    .listing-filters-dialog > .listing-filters-menu-wrapper {
        display: block;
    }

    .listing-filters-menu {
        display: flex;
        flex-direction: column;
        padding-bottom: var(--space-lg);
    }

    .listing-filters-menu-close-link {
        text-align: right;
    }

    .listing-filters-menu-close-link button {
        display: inline-block;
        padding: 0.9375rem 1.25rem;
        font-size: 1.25rem;
        color: var(--link-colour);
        cursor: pointer;
    }

    .listing-filters-menu-close-link button:hover {
        color: var(--link-hover-colour);
    }

    .listing-filters-menu-close-link button i {
        margin: 0;
    }

    .listing-filters h5 {
        padding: 0 var(--space-md);
    }

    .listing-filters li a {
        display: flex;
        padding: var(--space-2xs) var(--space-md);
    }

    .listing-filters .listing-filter-form li {
        padding: var(--space-2xs) var(--space-md);
    }

    .listing-filters ul li ul {
        padding-left: var(--space-lg);
    }

    .listing-filters ul li ul li a {
        padding: var(--space-2xs) var(--space-lg) var(--space-2xs) var(--space-sm);
    }

    .listing-filters .listing-filter-form-field-price {
        padding: 0 var(--space-md);
    }

    .listing-filters .listing-filter-form-field-price h5 {
        padding: 0;
    }
}

@media screen and (width >= 768px) {
    .listing-filters-menu-open-link {
        display: none;
    }

    .listing-filters-menu-close-link {
        display: none;
    }

    .listing-filters ul li + li {
        margin-top: var(--space-2xs);
    }

    .listing-filters li > ul {
        margin-top: var(--space-2xs);
    }

    .listing-filters ul li ul {
        padding-left: var(--space-sm);
    }

    .listing-filters li a {
        display: flex;
    }
}

.listings-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    justify-items: center;
    column-gap: var(--space-md);
    row-gap: var(--space-xs);
}

.listings-header-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-gap: var(--space-md);
}

.listing-filters-menu-open-link i {
    margin-right: var(--space-2xs);
}

.listings-sort {
    font-size: var(--paragraph-font-size-sm);
    line-height: var(--paragraph-line-height);
}

.listings-sort label {
    margin-right: var(--space-2xs);
}

.listings-sort select {
    padding: var(--space-2xs);
}

.listings-view-mode {
    display: flex;
    flex-direction: row;
}

/* The view switch's buttons, the view showing pressed (aria-pressed). */
.listings-view-mode button {
    padding: var(--space-3xs) var(--space-xs);
    border: 1px solid var(--grey-200);
    color: var(--grey-800);
    cursor: pointer;
} /* same as secondary button colours */

.listings-view-mode button i {
    margin-right: 0.5em;
}

.listings-view-mode [aria-pressed="true"] {
    background: var(--grey-200);
} /* same as secondary button colours */

/* Listings are a container, so their cards lay out by the space the listings have, not the screen's width. */
.listings {
    display: grid;
    column-gap: var(--space-lg);
    row-gap: var(--space-xl);
    container: listings / inline-size;
}

.listing {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.listing.centred {
    text-align: center;
}

.listing.centred .image {
    margin: 0 auto;
}

.listing.centred .info p {
    justify-content: center;
}

.listing.centred .info .button-cluster {
    justify-content: center;
}

.listing.centred .info .icon-group {
    justify-content: center;
}

.listing .image {
    position: relative;
    display: grid;
    grid-template: "container" 1fr;
    overflow: hidden;
}

.listing .image picture {
    grid-area: container;
    z-index: 1;
    overflow: hidden;
}

.listing .image .overlay {
    grid-area: container;
    z-index: 2;
}

.listing .image .content {
    grid-area: container;
    z-index: 3;
    --heading-3-colour: #fff;
    --heading-4-colour: #fff;
    /* inset further on a photo whose shape cuts in (--photo-content-inset, from image-shape.xsl), to keep inside it */
    padding: max(var(--space-xs), var(--photo-content-inset, 0px)) max(var(--space-sm), var(--photo-content-inset, 0px));
    width: 100%;
}

/* on the frame round the photo, above everything, at a corner of the photo (the bottom right unless the listing settings choose another): a shape that clips the photo leaves it whole. In from the edge, it keeps inside a shape that cuts in (--photo-content-inset, from image-shape.xsl), as titles over the photo do */
.listing .image-frame > .badge {
    --badge-offset: 0px;
    position: absolute;
    right: var(--badge-offset);
    bottom: var(--badge-offset);
    z-index: 4;
}

.listing .image-frame > .badge[data-distance-from-edge] {
    --badge-offset: max(var(--badge-distance-from-edge), var(--photo-content-inset, 0px));
}

.listing .image-frame > .badge[data-position="top_left"] {
    top: var(--badge-offset);
    right: auto;
    bottom: auto;
    left: var(--badge-offset);
}

.listing .image-frame > .badge[data-position="top_right"] {
    top: var(--badge-offset);
    bottom: auto;
}

.listing .image-frame > .badge[data-position="bottom_left"] {
    right: auto;
    left: var(--badge-offset);
}

/* On a corner, a ribbon reaches past the photo's side edge, with a fold under the overhang; the distance from the edge moves
   it along that edge. On the right-hand corners it reaches past the right edge, its tail pointing left. */
.listing .image-frame > .badge[data-style="ribbon"] {
    --ribbon-overhang: 0.4em;
    margin-inline-end: 0;
    right: auto;
    left: calc(-1 * var(--ribbon-overhang));
}

.listing .image-frame > .badge[data-style="ribbon"]::before {
    content: "";
    position: absolute;
    /* 1px up under the badge, for the same reason */
    top: calc(100% - 1px);
    left: 0;
    width: var(--ribbon-overhang);
    height: calc(var(--ribbon-overhang) + 1px);
    background: color-mix(in oklab, var(--badge-colour), black 40%);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.listing .image-frame > .badge[data-style="ribbon"]:is(:not([data-position]), [data-position="top_right"]) {
    left: auto;
    right: calc(-1 * var(--ribbon-overhang));
}

.listing .image-frame > .badge[data-style="ribbon"]:is(:not([data-position]), [data-position="top_right"])::after {
    left: auto;
    right: calc(100% - 1px);
    clip-path: polygon(100% 0, 0 0, 75% 50%, 0 100%, 100% 100%);
}

.listing .image-frame > .badge[data-style="ribbon"]:is(:not([data-position]), [data-position="top_right"])::before {
    left: auto;
    right: 0;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* A corner sash: a band across a corner of the photo (the bottom right unless the listing settings choose another), inside
   the photo's box, so the box clips it at the photo's edges and rounded corner. Its middle meets the photo's edges
   --sash-reach from the corner, and the badge is as long as that middle line, so longer words end in an ellipsis where the
   edge cuts it; two flat copies of it (box shadows, which its own overflow doesn't clip) carry the band on past both edges,
   so it runs edge to edge. */
.listing .image > .badge[data-style="corner_sash"] {
    --sash-reach: 5em;
    position: absolute;
    z-index: 4;
    box-sizing: border-box;
    width: calc(var(--sash-reach) * 1.4142);
    padding-inline: 0.8em;
    box-shadow: calc(-1 * var(--sash-reach)) 0 0 var(--badge-colour), var(--sash-reach) 0 0 var(--badge-colour);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    bottom: calc(var(--sash-reach) / 2);
    right: calc(var(--sash-reach) * -0.2071);
    transform: translateY(50%) rotate(-45deg);
}

.listing .image > .badge[data-style="corner_sash"][data-position="top_left"] {
    top: calc(var(--sash-reach) / 2);
    right: auto;
    bottom: auto;
    left: calc(var(--sash-reach) * -0.2071);
    transform: translateY(-50%) rotate(-45deg);
}

.listing .image > .badge[data-style="corner_sash"][data-position="top_right"] {
    top: calc(var(--sash-reach) / 2);
    bottom: auto;
    transform: translateY(-50%) rotate(45deg);
}

.listing .image > .badge[data-style="corner_sash"][data-position="bottom_left"] {
    right: auto;
    left: calc(var(--sash-reach) * -0.2071);
    transform: translateY(50%) rotate(45deg);
}

/* NOTE: these no crop sizes only work vertically as otherwise there's huge gaps in the rows */
.listing.horizontal .image[data-crop="false"] {
    aspect-ratio: inherit;
}

.listing.horizontal .image[data-crop="false"] img {
    object-fit: inherit;
}

/* an event card's per-session icon lists, in their stack (XS), a dashed line between */
.listing .info ul + ul {
    padding-top: var(--space-xs);
    border-top: 1px dashed var(--horizontal-line-colour);
}

.price {
    font-size: calc((var(--font-size-md) * 1.1) * (1 + var(--paragraph-font-size-adjustment-percentage) / 100));
    line-height: var(--paragraph-line-height);
    font-weight: 700;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: var(--space-2xs);
}

.price span {
    white-space: nowrap;
}

.price .comparison {
    text-decoration: line-through;
}

.price .sale {
    color: var(--sale-price-colour);
}

.volume-discounts p {
    font-size: var(--paragraph-font-size-sm);
    line-height: var(--paragraph-line-height);
}

/* Its lines 2XS apart, as the fieldsets they sat in gave them. */
.volume-discounts > * + * {
    margin-top: var(--space-2xs);
}

.price-measurement-unit {
    font-weight: 400;
    font-size: 0.6em;
    line-height: var(--line-height);
}

.tax-inclusivity {
    margin-left: 0.3em;
    font-weight: 400;
    font-size: 0.6em;
    line-height: var(--line-height);
}

.afterpay {
    margin-top: 0;
    font-size: var(--paragraph-font-size-sm);
    line-height: var(--paragraph-line-height);
}

.afterpay .logo {
    display: inline;
    vertical-align: middle;
    height: 24px;
}

.measurement-unit {
    margin-left: 0.5em;
    font-size: var(--paragraph-font-size-sm);
    line-height: var(--paragraph-line-height);
}

/* As an input's suffix, the group's gap is its space. */
.form-field-input-group > .measurement-unit {
    margin-left: 0;
}

.favourite-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

/* The product page's actions are buttons (they open a dialog or change the favourites), drawn as links. */
:is(.back-in-stock-alert-link, .size-guide-link, .favourite-options, .afterpay) button {
    color: var(--link-colour);
    cursor: pointer;
}

:is(.back-in-stock-alert-link, .size-guide-link, .favourite-options, .afterpay) button:hover {
    color: var(--link-hover-colour);
}

/* A badge (Sale, New, Sold out) in the colour set on it, in the Badge type from the Fonts settings. Its words are worked out
   from its colour: dark on a light badge, white on a dark one (a browser without relative colours keeps them white). Each
   area's listing settings give it a style for its listings and its product or event page. */
.badge {
    display: inline-block;
    color: #fff;
    background: var(--badge-colour);
    padding: var(--space-3xs) var(--space-2xs);
    font-family: var(--badge-font-family-name), system-ui, var(--badge-font-family-category);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    font-size: var(--badge-font-size);
    line-height: var(--badge-line-height);
    letter-spacing: var(--badge-letter-spacing);
}

@supports (color: oklch(from red l c h)) {
    .badge {
        color: oklch(from var(--badge-colour) clamp(0.22, (0.65 - l) * 1000, 1) 0 0);
    }
}

.badge[data-style="rounded"] {
    border-radius: var(--radius-sm);
}

.badge[data-style="pill"] {
    border-radius: 999px;
    padding-inline: var(--space-xs);
}

/* A ribbon has a forked tail at its inner end; under the title it's a tag */
.badge[data-style="ribbon"] {
    --ribbon-tail: 0.6em;
    position: relative;
    margin-inline-end: var(--ribbon-tail);
}

.badge[data-style="ribbon"]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    /* 1px over the badge, so no hairline shows where they meet, as with the shape dividers */
    left: calc(100% - 1px);
    width: calc(var(--ribbon-tail) + 1px);
    background: var(--badge-colour);
    clip-path: polygon(0 0, 100% 0, 25% 50%, 100% 100%, 0 100%);
}

/* A horizontal card puts its image beside its words once its listings are 448px wide, which full-width listings are on a 480px screen, where cards switched when this went by the screen; narrower, in a narrow column as on a phone, it stacks them. */
@container listings (width >= 448px) {
    .listing.horizontal {
        flex-direction: row;
        gap: var(--space-md);
    }

    .listing.horizontal .image-wrapper {
        flex: 1;
    }

    .listing.horizontal .video-wrapper {
        flex: 1;
    }

    .listing.horizontal.layout-25-75 .info {
        flex: 3;
    }

    .listing.horizontal.layout-33-66 .info {
        flex: 2;
    }

    .listing.horizontal.layout-50-50 .info {
        flex: 1;
    }

    .listing.horizontal.vertical-align-columns-top {
        align-items: flex-start;
    }

    .listing.horizontal.vertical-align-columns-centre {
        align-items: center;
    }

    .listing.horizontal.vertical-align-columns-bottom {
        align-items: flex-end;
    }
}

.carousel,
.carousel__viewport,
.carousel__track {
    touch-action: pan-y;
}

.carousel__slide {
    padding: 0;
    overflow: hidden;
    overscroll-behavior: auto;
}

.carousel__slide.has-video::after {
    content: "";
    opacity: 0.85;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    bottom: 0;
    background-position: center center;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24.38"><path d="M35.46 3.81A4.58 4.36 0 0032.24.75C29.37 0 17.93 0 17.93 0S6.48 0 3.63.72c-1.54.4-2.8 1.6-3.23 3.1-.75 2.72-.75 8.37-.75 8.37s0 5.68.75 8.37a4.58 4.36 0 003.22 3.07c2.9.75 14.3.75 14.3.75s11.45 0 14.32-.72a4.58 4.36 0 003.22-3.07c.75-2.72.75-8.37.75-8.37s.03-5.68-.75-8.4zm0 0" fill="black"/><path d="M14.29 17.4l9.51-5.21-9.51-5.22zm0 0" fill="white"/></svg>');
}

.carousel__slide.has-video:hover::after {
    opacity: 1;
}

.fancybox__container {
    --fancybox-bg: var(--gallery-zoom-background-colour);
    --fancybox-color: var(--gallery-zoom-foreground-colour);
    --fancybox-accent-color: var(--gallery-zoom-highlight-colour);
}

.fancybox__caption {
    text-align: center;
}

.fancybox__caption .instagram-post-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.fancybox__caption .instagram-post-link:hover {
    color: var(--gallery-zoom-highlight-colour);
}

.fancybox__caption .instagram-post-link i {
    margin-right: var(--space-2xs);
}

a[data-fancybox] {
    cursor: zoom-in;
}

.media-gallery .carousel__slide {
    display: grid;
    align-items: center;
    justify-items: center;
    padding: 0;
}

.media-gallery .main-carousel .carousel__slide {
    width: 100%;
}

.media-gallery .main-carousel .carousel__slide img {
    width: 100%;
}

.media-gallery .main-carousel .carousel__slide[data-fancybox].has-video {
    cursor: pointer;
}

.media-gallery .main-carousel .carousel__slide.has-video::after {
    background-size: 30% 30%;
}

.media-gallery .main-carousel .carousel__slide.has-video:hover::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24.38"><path d="M35.46 3.81A4.58 4.36 0 0032.24.75C29.37 0 17.93 0 17.93 0S6.48 0 3.63.72c-1.54.4-2.8 1.6-3.23 3.1-.75 2.72-.75 8.37-.75 8.37s0 5.68.75 8.37a4.58 4.36 0 003.22 3.07c2.9.75 14.3.75 14.3.75s11.45 0 14.32-.72a4.58 4.36 0 003.22-3.07c.75-2.72.75-8.37.75-8.37s.03-5.68-.75-8.4zm0 0" fill="red"/><path d="M14.29 17.4l9.51-5.21-9.51-5.22zm0 0" fill="white"/></svg>');
}

.media-gallery .main-carousel .carousel__nav {
    visibility: hidden;
}

.media-gallery .main-carousel:hover .carousel__nav {
    visibility: visible;
}

.media-gallery .main-carousel {
    --carousel-button-bg: rgba(255,255,255,0.5);
    --carousel-button-svg-width: 1.25rem;
    --carousel-button-svg-height: 1.25rem;
    --carousel-button-svg-stroke-width: 2.5;
    --carousel-button-border-radius: 0;
}

.media-gallery .main-carousel .carousel__button.is-prev {
    left: 0;
}

.media-gallery .main-carousel .carousel__button.is-next {
    right: 0;
}

.media-gallery .main-carousel .carousel__button {
    opacity: 0.75;
}

.media-gallery .main-carousel .carousel__button:hover {
    opacity: 1;
}

.media-gallery .thumbnail-carousel {
    margin: var(--space-sm) var(--space-md) 0;
}

/* The carousels place their slides with a transform, so focus mustn't scroll the viewport they're clipped to, which
   overflow: clip prevents; setUpPhotoCarouselKeyboard (website-low-priority.js) brings a focused thumbnail into view instead. */
.media-gallery .carousel__viewport {
    overflow: clip;
}

/* A main photo fills its viewport, so its focus ring goes inside it. */
.media-gallery .main-carousel .carousel__slide:focus-visible {
    outline-offset: -2px;
}

/* The thumbnails are buttons, so the keyboard reaches them; a press moves the main carousel. */
.media-gallery .thumbnail-carousel .carousel__slide {
    width: clamp(60px, 25%, 100px);
    border: 2px solid var(--background-colour);
    padding: 0 var(--space-3xs);
    cursor: pointer;
}

.media-gallery .thumbnail-carousel .carousel__slide:hover {
    opacity: 1;
}

.media-gallery .thumbnail-carousel .carousel__slide.is-nav-selected {
    border-color: var(--paragraph-colour);
}

.media-gallery .thumbnail-carousel .carousel__button.is-prev {
    left: -2.5rem;
}

.media-gallery .thumbnail-carousel .carousel__button.is-next {
    right: -2.5rem;
}

.media-gallery .hint {
    margin-top: var(--space-3xs);
    font-size: var(--paragraph-font-size-xs);
    line-height: var(--paragraph-line-height);
    text-align: center;
}

.media-gallery .hint i {
    margin-right: var(--space-3xs);
}

.media-gallery-fancybox-container {
    --fancybox-thumbs-ratio: 1;
    --fancybox-thumbs-border-radius: 0;
}

.media-gallery-fancybox-container .fancybox__thumb {
    background-size: contain;
}

.media-gallery-fancybox-container .carousel__slide {
    outline-width: 1px;
}

.media-gallery-fancybox-container .fancybox__thumbs .carousel__slide .fancybox__thumb::after {
    border-width: 3px;
}

.slideshow {
    position: relative;
    --carousel-button-color: white;
    --carousel-button-svg-width: 1.5rem;
    --carousel-button-svg-height: 1.5rem;
    --carousel-button-svg-stroke-width: 2.5;
    --carousel-button-svg-filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}

.slideshow .carousel__slide {
    width: 100%;
}

/* Until the carousel starts, once the page has loaded, a slideshow shows only its first slide, already as tall as its tallest, as
   the carousel's track makes them, rather than every slide one under the other and then moving what's below; the carousel moves
   its slides into the track, out of these rules' reach. */
.slideshow:has(> .carousel__slide) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.slideshow > .carousel__slide {
    grid-area: 1 / 1;
}

.slideshow > .carousel__slide + .carousel__slide {
    visibility: hidden;
}

.slideshow .carousel__button.is-prev {
    left: 0;
}

.slideshow .carousel__button.is-next {
    right: 0;
}

.slideshow .carousel__button {
    opacity: 0.75;
}

.slideshow .carousel__button:hover {
    opacity: 1;
}

/* The arrows fade in when you point at the slideshow or the keyboard is in it. */
.slideshow .carousel__nav {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.7s ease-in-out, visibility 0.7s;
}

.slideshow:hover .carousel__nav,
.slideshow:has(:focus-visible) .carousel__nav {
    visibility: visible;
    opacity: 1;
}

.slideshow .carousel__dots {
    top: unset;
    bottom: var(--space-2xs);
    color: white;
}

/* The arrows and dots follow the dark or light of the slide showing (setUpSlideshow in website-low-priority.js). */
.slideshow[data-colour-scheme="light"] {
    --carousel-button-color: black;
    --carousel-button-svg-filter: drop-shadow(0 0 2px rgba(255,255,255,0.6));
}

.slideshow[data-colour-scheme="light"] .carousel__dots {
    color: black;
}

/* The dots sit on the photo, so the room the carousel's stylesheet leaves for them under it isn't used. */
.slideshow.has-dots {
    margin-bottom: 0;
}

/* The carousel places its slides with a transform, so focus mustn't scroll the viewport they're clipped to. */
.slideshow .carousel__viewport {
    overflow: clip;
}

/* A slide: the photo's box and the content share one cell, so a slide is at least the photo's shape (with its minimum and
   maximum height) and taller if its content needs, and the photo, its link and the overlay fill it. Slides of a set shape
   are all as tall as the tallest; natural ones keep their own shape. */
.slideshow-slide {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.slideshow-slide:has(> [data-crop]) {
    height: 100%;
}

.slideshow-slide-photo {
    grid-area: 1 / 1;
}

.slideshow-slide-photo :is(a, picture) {
    position: absolute;
    inset: 0;
}

/* The keyboard's ring goes over everything on the slide, as the photo and overlay would cover a link's or a strip's own outline. */
.slideshow-slide:has(.slideshow-slide-photo a:focus-visible)::after,
.slideshow-strip:focus-visible .slideshow-slide::after {
    content: "";
    position: absolute;
    inset: 4px;
    outline: 2px solid var(--paragraph-colour);
    border-radius: max(0px, var(--slideshow-border-radius, 0px) - 4px);
    pointer-events: none;
}

.slideshow-slide-photo img {
    display: block;
}

/* A set shape's photo fills or fits its box by data-crop; a natural one fills it, cropped only by a maximum height. */
.slideshow-slide-photo:not([data-crop]) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slideshow-slide > .overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* The content, the slideshow's Content padding in from the slide's edges (at most M at the sides on mobile), and clear of the
   arrows where they can show; clicks on it reach the slide's link, but for its own links. */
.slideshow-slide-content {
    position: relative;
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-block: var(--slideshow-content-padding);
    padding-inline: max(var(--slideshow-arrow-room, 0px), min(var(--slideshow-content-padding), var(--space-md)));
    color: var(--paragraph-colour);
    pointer-events: none;
}

@media screen and (width >= 768px) {
    .slideshow-slide-content {
        padding-inline: max(var(--slideshow-arrow-room, 0px), var(--slideshow-content-padding));
    }
}

@media (hover: hover) {
    .slideshow[data-arrows] {
        --slideshow-arrow-room: 3rem;
    }
}

/* In an edge to edge row the sides line up with the header instead: on the page's line, or at the gutter if the header is Full width. */
.row[data-width="edge_to_edge"] .slideshow-slide-content {
    padding-inline: max(var(--slideshow-arrow-room, 0px), var(--page-gutter), (100% - var(--page-width)) / 2 + var(--page-gutter));
}

body[data-header-width="full"] .row[data-width="edge_to_edge"] .slideshow-slide-content {
    padding-inline: max(var(--slideshow-arrow-room, 0px), var(--page-gutter));
}

.slideshow.has-dots .slideshow-slide-content {
    padding-bottom: calc(var(--slideshow-content-padding) + 22px);
}

.slideshow-slide-content a {
    pointer-events: auto;
}

.slideshow-slide-content > .user-defined-content {
    max-width: min(100%, 36 * var(--paragraph-font-size));
}

.slideshow-slide-content[data-position^="top_"] {
    justify-content: flex-start;
}

.slideshow-slide-content[data-position^="bottom_"] {
    justify-content: flex-end;
}

.slideshow-slide-content[data-position$="_centre"] {
    align-items: center;
    text-align: center;
}

.slideshow-slide-content[data-position$="_right"] {
    align-items: flex-end;
    text-align: right;
}

.slideshow-slide-content[data-position$="_centre"] p:has(> a.button + a.button) {
    justify-content: center;
}

.slideshow-slide-content[data-position$="_right"] p:has(> a.button + a.button) {
    justify-content: flex-end;
}

/* Dark or light: the words and links on a slide are white over a dark photo and black over a light one, whatever the column
   says. Fonts and buttons come from the column, as they do for anything in it. */
.slideshow-slide[data-colour-scheme="dark"] {
    --eyebrow-colour: white;
    --heading-1-colour: white;
    --heading-2-colour: white;
    --heading-3-colour: white;
    --heading-4-colour: white;
    --paragraph-colour: white;
    --link-colour: white;
    --link-hover-colour: rgba(255,255,255,0.9);
}

.slideshow-slide[data-colour-scheme="light"] {
    --eyebrow-colour: black;
    --heading-1-colour: black;
    --heading-2-colour: black;
    --heading-3-colour: black;
    --heading-4-colour: black;
    --paragraph-colour: black;
    --link-colour: black;
    --link-hover-colour: rgba(0,0,0,0.9);
}

/* An expanding slideshow (data-style="expanding", with no carousel): every slide is on show as a strip and one is open
   (setUpExpandingSlideshow in website-low-priority.js). Every slide is always the open one's size, all of them in one grid
   cell, so the tallest slide's content sets the height of them all and its words never wrap differently. A strip opens by
   transforms alone: never by changing size, which would count as a layout shift against the page's Google score, or by
   clip-path, which repaints every photo on every frame and judders. Its two ends are two clips, one inside the other, both
   the slide's size: the strip is the near end, and .slideshow-strip-end, moved back by what's hidden, is the far end, so only
   what's in both shows. The slide moves forward again inside them, so that it's the part round its focal point that shows.
   The compositor does all of that, with nothing painted, as long as they're layers from the start (will-change). Closed strips
   are as wide as the setting says, narrowing if they need to so that the open one keeps at least half. */
.image-slideshow:has(> .slideshow[data-style="expanding"]) {
    container: slideshow / inline-size;
}

.slideshow[data-style="expanding"] {
    --strip-closed-width: min(var(--slideshow-closed-strip-width), (100cqw - (var(--slideshow-strips) - 1) * var(--slideshow-strip-gap)) / 2 / max(var(--slideshow-strips) - 1, 1));
    --strip-open-width: calc(100cqw - (var(--slideshow-strips) - 1) * (var(--strip-closed-width) + var(--slideshow-strip-gap)));
    /* with no gap, closed strips reach a pixel under or over the next, as edges that aren't on a whole pixel would otherwise leave a hairline */
    --strip-seam-cover: max(0px, 1px - var(--slideshow-strip-gap));
    display: grid;
    grid-template-columns: var(--strip-open-width);
    overflow: clip;
}

/* Where it starts when open, how much of it is hidden when closed, and where the part showing starts when closed: further
   along if the open strip comes before it. Only the slide takes the pointer, as the strip's own box reaches past what shows. */
.slideshow-strip {
    --strip-start: calc(var(--strip-index) * (var(--strip-closed-width) + var(--slideshow-strip-gap)));
    --strip-hidden-size: calc(var(--strip-open-width) - var(--strip-closed-width));
    --strip-closed-start: var(--strip-start);
    grid-area: 1 / 1;
    min-width: 0;
    overflow: clip;
    pointer-events: none;
    will-change: transform;
    transform: translateX(calc(var(--strip-closed-start) - var(--strip-seam-cover)));
}

.slideshow-strip.is-open ~ .slideshow-strip {
    --strip-closed-start: calc(var(--strip-start) + var(--strip-hidden-size));
}

.slideshow-strip:not(.is-open) {
    cursor: pointer;
}

.slideshow-strip.is-open {
    transform: translateX(var(--strip-start));
}

/* its ring is drawn on the slide */
.slideshow-strip:focus-visible {
    outline: none;
}

.slideshow-strip-end {
    height: 100%;
    overflow: clip;
    will-change: transform;
    transform: translateX(calc(2 * var(--strip-seam-cover) - var(--strip-hidden-size)));
}

.slideshow-strip.is-open > .slideshow-strip-end {
    transform: none;
}

.slideshow[data-style="expanding"] .slideshow-slide {
    pointer-events: auto;
    will-change: transform;
    transform: translateX(calc(var(--strip-hidden-size) * (1 - var(--strip-focal-x)) - var(--strip-seam-cover)));
}

.slideshow[data-style="expanding"] .slideshow-strip.is-open .slideshow-slide {
    transform: none;
}

.slideshow[data-style="expanding"] .slideshow-slide-photo {
    aspect-ratio: auto;
    height: calc(100cqw / (var(--aspect-ratio)));
}

.slideshow[data-style="expanding"] .slideshow-slide-content {
    padding-inline: var(--slideshow-content-padding);
    transition: opacity 0.4s ease-in-out 0.3s;
}

/* In an edge to edge row the words line up with the header: on the page's line, or at the gutter if the header is Full width.
   The strips at the ends keep them on that line, and those between keep them inside it, the Content padding in from their own
   edges if that's further in. */
.row[data-width="edge_to_edge"] .slideshow[data-style="expanding"] {
    --strip-header-line: calc(max(0px, (100cqw - var(--page-width)) / 2) + var(--page-gutter));
}

body[data-header-width="full"] .row[data-width="edge_to_edge"] .slideshow[data-style="expanding"] {
    --strip-header-line: var(--page-gutter);
}

.row[data-width="edge_to_edge"] .slideshow[data-style="expanding"] .slideshow-slide-content {
    --strip-distance-from-end: calc(100cqw - var(--strip-start) - var(--strip-open-width));
    padding-inline-start: max(var(--strip-header-line) - var(--strip-start), min(var(--slideshow-content-padding), var(--strip-start)));
    padding-inline-end: max(var(--strip-header-line) - var(--strip-distance-from-end), min(var(--slideshow-content-padding), var(--strip-distance-from-end)));
}

.slideshow-strip:not(.is-open) .slideshow-slide-content {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease-in-out, visibility 0s linear 0.15s;
}

/* In a narrow place, the strips lie flat as bands, 3.5rem tall when closed, and the room under the grid cell is what the
   closed ones take, so the height is right before any script arrives. */
@container slideshow (width < 600px) {
    .slideshow[data-style="expanding"] {
        --strip-open-width: 100cqw;
        padding-bottom: calc((var(--slideshow-strips) - 1) * (3.5rem + var(--slideshow-strip-gap)));
    }

    .slideshow-strip {
        --strip-start: calc(var(--strip-index) * (3.5rem + var(--slideshow-strip-gap)));
        --strip-hidden-size: calc(100% - 3.5rem);
        transform: translateY(calc(var(--strip-closed-start) - var(--strip-seam-cover)));
    }

    .slideshow-strip.is-open {
        transform: translateY(var(--strip-start));
    }

    .slideshow-strip-end {
        transform: translateY(calc(2 * var(--strip-seam-cover) - var(--strip-hidden-size)));
    }

    .slideshow-strip.is-open > .slideshow-strip-end {
        transform: none;
    }

    .slideshow[data-style="expanding"] .slideshow-slide {
        transform: translateY(calc(var(--strip-hidden-size) * (1 - var(--strip-focal-y)) - var(--strip-seam-cover)));
    }

    .slideshow[data-style="expanding"] .slideshow-strip.is-open .slideshow-slide {
        transform: none;
    }

    .slideshow[data-style="expanding"] .slideshow-slide-content {
        padding-inline: min(var(--slideshow-content-padding), var(--space-md));
    }

    .row[data-width="edge_to_edge"] .slideshow[data-style="expanding"] .slideshow-slide-content {
        padding-inline: var(--page-gutter);
    }
}

@media (prefers-reduced-motion: reduce) {
    .slideshow[data-style="expanding"] .slideshow-slide-content {
        transition: none;
    }
}

/* Corner rounding, on either style: the carousel's window and each slide (natural slides can be shorter than the window), or
   each strip, whose two clips round its two ends. A No crop photo sits inside its box, so it rounds itself, sized to its own shape. */
.slideshow[data-border-radius="sm"] {
    --slideshow-border-radius: var(--radius-sm);
}

.slideshow[data-border-radius="md"] {
    --slideshow-border-radius: var(--radius-md);
}

.slideshow[data-border-radius="lg"] {
    --slideshow-border-radius: var(--radius-lg);
}

.slideshow[data-border-radius] .carousel__viewport {
    border-radius: var(--slideshow-border-radius);
}

.slideshow[data-border-radius] .slideshow-strip {
    border-radius: var(--slideshow-border-radius) 0 0 var(--slideshow-border-radius);
}

.slideshow[data-border-radius] .slideshow-strip-end {
    border-radius: 0 var(--slideshow-border-radius) var(--slideshow-border-radius) 0;
}

@container slideshow (width < 600px) {
    .slideshow[data-border-radius] .slideshow-strip {
        border-radius: var(--slideshow-border-radius) var(--slideshow-border-radius) 0 0;
    }

    .slideshow[data-border-radius] .slideshow-strip-end {
        border-radius: 0 0 var(--slideshow-border-radius) var(--slideshow-border-radius);
    }
}

.slideshow[data-border-radius] .carousel__slide .slideshow-slide {
    border-radius: var(--slideshow-border-radius);
    overflow: clip;
}

.slideshow[data-border-radius] .slideshow-slide-photo[data-crop="false"] picture {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slideshow[data-border-radius] .slideshow-slide-photo[data-crop="false"] img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--slideshow-border-radius);
}

@media (hover: none) {
    .media-gallery .main-carousel .carousel__nav {
        display: none;
    }
}

.cart table {
    width: 100%;
}

.cart table tbody td.image {
    width: 120px;
}

.cart table tfoot tr:last-child.total td {
    border-bottom-style: double;
    border-bottom-width: 5px;
}

.cart input.quantity {
    width: 95px;
}

/* Checkout's order summary, in 3 of the 12 columns: its words and amounts keep only a small gap, so it fits its column from 768px, where the column is 159px wide. */
.column[data-size="3"] .cart table td:first-child {
    padding-right: 0;
}

.column[data-size="3"] .cart table td:last-child {
    padding-left: var(--space-3xs);
}

@media screen and (width < 768px) {
    .cart table {
        display: block;
    }

    .cart table thead {
        display: block;
    }

    .cart table thead tr {
        display: block;
    }

    .cart table thead tr th:nth-child(1) {
        width: 100%;
    }

    .cart table tbody {
        display: block;
    }

    .cart table tbody tr {
        display: block;
    }

    .cart table tbody tr td.info {
        padding-left: 0;
        width: 100%;
    }

    .cart table tfoot {
        display: block;
    }

    .cart table tfoot tr td:nth-child(1) {
        width: 100%;
    }
}

@media screen and (width >= 768px) {
    .cart input.quantity {
        width: 120px;
    }
}

.instagram-gallery .image-link-hover-effect-darken picture::before {
    content: "\f16d";
    font-family: "Font Awesome 6 Brands";
}

.testimonial-panel .listing .info .quote {
    font-style: italic;
}

.testimonial-panel .listing .info .customer {
    display: flex;
    align-items: center;
    column-gap: var(--space-xs);
}

.testimonial-panel .listing .info .customer img {
    width: 48px;
    height: 48px;
}

.testimonial-panel .listing.centred .info .customer {
    flex-direction: column;
    row-gap: var(--space-xs);
    justify-content: center;
}

.full-screen-processing {
    position: fixed;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    background: rgba(40, 40, 40, 0.75);
    z-index: var(--z-index-processing);
}

.full-screen-processing > div {
    padding: var(--space-lg);
}

.full-screen-processing .spinner {
    display: block;
    margin: 0 auto;
    padding-bottom: var(--space-lg);
}

.full-screen-processing .spinner i {
    font-size: 6.25rem;
    color: white !important;
}

.full-screen-processing h3 {
    color: white !important;
}

dialog::backdrop {
    background: rgba(40, 40, 40, 0.75);
}

dialog {
    border: 0;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    padding: 0;
    background: var(--background-colour);
    border-radius: var(--dialog-border-radius);
}

/* A dialog's parts (admin's): its header, for its title, and its body, L in from the edges, or with no padding
   (data-padding="none") for a picture that fills it. The close sits in the dialog's corner, header or not, so the
   header holds only the title, as a block. */
.dialog-header {
    padding: var(--space-lg);
}

.dialog-header + .dialog-body {
    padding-top: 0;
}

.dialog-body {
    padding: var(--space-lg);
}

.dialog-body[data-padding="none"] {
    padding: 0;
}

.dialog-close {
    position: absolute;
    top: 0;
    right: 0;
}

/* A dialog's close: a button in the templates moved over, a link in the rest, in the link colour either way. */
.dialog-close :is(a, button) {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    color: var(--link-colour);
}

.dialog-close :is(a, button) i {
    margin: 0;
}

@media screen and (width < 480px) {
    dialog.full-screen-mobile {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        width: 100%;
    }
}

.add-to-calendar {
    position: relative;
}

/* Its button, drawn as a link. */
.add-to-calendar > button {
    color: var(--link-colour);
    cursor: pointer;
}

.add-to-calendar > button:hover {
    color: var(--link-hover-colour);
}

.add-to-calendar ul {
    display: none;
    position: absolute;
    background: var(--background-colour);
    top: 100%;
    box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.10);
    border-radius: var(--dialog-border-radius);
}

.add-to-calendar ul li a {
    white-space: nowrap;
    padding: var(--space-2xs) var(--space-xs);
    display: flex;
    flex-direction: row;
    column-gap: var(--space-2xs);
}

/* Its list opens on focus anywhere in it, when its button opens it (.open), or on hover with a mouse (below); Escape or a
   second press shuts it (.closed) until focus leaves it, as the header's dropdowns do. */
.add-to-calendar:is(:focus-within, .open):not(.closed) ul {
    z-index: var(--z-index-dropdown);
    visibility: visible;
    opacity: 1;
    display: block;
}

/* Hover opens it only for a mouse: a tap leaves hover on what it touched, so on a touch screen it would stay open after a
   tap elsewhere. */
@media (hover: hover) {
    .add-to-calendar:hover:not(.closed) ul {
        z-index: var(--z-index-dropdown);
        visibility: visible;
        opacity: 1;
        display: block;
    }
}

.add-to-calendar ul li a span:first-of-type {
    width: var(--font-size-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-to-calendar ul li a span img {
    max-height: var(--font-size-lg);
}

/* Tabs that switch what the page shows (admin's in-page tabs, as buttons so the keyboard reaches them): the current one
   and the one under the mouse underlined in the link's hover colour. A button stretched by the underlined tab would
   centre its words, so the tabs keep to their own height. */
.page-tab-navigation {
    display: flex;
    align-items: flex-start;
    column-gap: var(--space-md);
    border-bottom: 1px solid var(--horizontal-line-colour);
}

.page-tab-navigation-link {
    color: var(--link-colour);
    margin-bottom: -1px;
    cursor: pointer;
    padding: 0 0 var(--space-2xs) 0;
}

.page-tab-navigation-link:is([aria-current], :hover) {
    border-bottom: 3px solid var(--link-hover-colour);
    color: var(--link-hover-colour);
}

.page-tab-navigation-link .count {
    margin-left: var(--space-2xs);
    opacity: 0.5;
    color: var(--paragraph-colour);
    font-size: var(--font-size-sm);
}

[hidden] {
    display: none !important;
}

.invisible {
    visibility: hidden !important;
}

.no-wrap {
    white-space: nowrap;
}

@media screen and (width < 768px) {
    .min-width-768 {
        display: none !important;
    }
}

@media screen and (width < 1024px) {
    .min-width-1024 {
        display: none !important;
    }
}

@media screen and (width < 1280px) {
    .min-width-1280 {
        display: none !important;
    }
}

@media screen and (width < 1440px) {
    .min-width-1440 {
        display: none !important;
    }
}

@media screen and (width < 1920px) {
    .min-width-1920 {
        display: none !important;
    }
}


@charset "utf-8";.fa{font-family:var(--fa-style-family,"Font Awesome 6 Pro");font-weight:var(--fa-style,900)}.fas,.fass,.far,.fasr,.fal,.fasl,.fat,.fast,.fad,.fadr,.fadl,.fadt,.fasds,.fasdr,.fasdl,.fasdt,.fab,.fa-solid,.fa-regular,.fa-light,.fa-thin,.fa-brands,.fa-classic,.fa-duotone,.fa-sharp,.fa-sharp-duotone,.fa{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.fas:before,.fass:before,.far:before,.fasr:before,.fal:before,.fasl:before,.fat:before,.fast:before,.fad:before,.fadr:before,.fadl:before,.fadt:before,.fasds:before,.fasdr:before,.fasdl:before,.fasdt:before,.fab:before,.fa-solid:before,.fa-regular:before,.fa-light:before,.fa-thin:before,.fa-brands:before,.fa-classic:before,.fa-duotone:before,.fa-sharp:before,.fa-sharp-duotone:before,.fa:before{content:var(--fa)}.fad:after,.fa-duotone.fa-solid:after,.fa-duotone:after,.fadr:after,.fa-duotone.fa-regular:after,.fadl:after,.fa-duotone.fa-light:after,.fadt:after,.fa-duotone.fa-thin:after,.fasds:after,.fa-sharp-duotone.fa-solid:after,.fa-sharp-duotone:after,.fasdr:after,.fa-sharp-duotone.fa-regular:after,.fasdl:after,.fa-sharp-duotone.fa-light:after,.fasdt:after,.fa-sharp-duotone.fa-thin:after{content:var(--fa--fa)}.fa-classic.fa-duotone{font-family:"Font Awesome 6 Duotone"}.fass,.fa-sharp{font-weight:900}.fad,.fa-duotone{font-weight:900}.fasds,.fa-sharp-duotone{font-weight:900}.fa-classic,.fas,.fa-solid,.far,.fa-regular,.fal,.fa-light,.fat,.fa-thin{font-family:"Font Awesome 6 Pro"}.fa-duotone,.fad,.fadr,.fadl,.fadt{font-family:"Font Awesome 6 Duotone"}.fa-brands,.fab{font-family:"Font Awesome 6 Brands"}.fa-sharp,.fass,.fasr,.fasl,.fast{font-family:"Font Awesome 6 Sharp"}.fa-sharp-duotone,.fasds,.fasdr,.fasdl,.fasdt{font-family:"Font Awesome 6 Sharp Duotone"}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:var(--fa-li-margin,2.5em);padding-left:0}.fa-ul>li{position:relative}.fa-li{left:calc(-1 * var(--fa-li-width,2em));position:absolute;text-align:center;width:var(--fa-li-width,2em);line-height:inherit}.fa-border{border-color:var(--fa-border-color,#eee);border-radius:var(--fa-border-radius,.1em);border-style:var(--fa-border-style,solid);border-width:var(--fa-border-width,.08em);padding:var(--fa-border-padding,.2em .25em .15em)}.fa-pull-left{float:left;margin-right:var(--fa-pull-margin,.3em)}.fa-pull-right{float:right;margin-left:var(--fa-pull-margin,.3em)}.fa-beat{animation-name:fa-beat;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{animation-name:fa-bounce;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28, .84, .42, 1))}.fa-fade{animation-name:fa-fade;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4, 0, .6, 1))}.fa-beat-fade{animation-name:fa-beat-fade;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4, 0, .6, 1))}.fa-flip{animation-name:fa-flip;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{animation-name:fa-shake;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin{animation-name:fa-spin;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,2s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{animation-name:fa-spin;animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-bounce,.fa-fade,.fa-beat-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{animation-delay:-1ms;animation-duration:1ms;animation-iteration-count:1;transition-delay:0s;transition-duration:0s}}@keyframes fa-beat{0%,90%{transform:scale(1)}45%{transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-bounce{0%{transform:scale(1)translateY(0)}10%{transform:scale(var(--fa-bounce-start-scale-x,1.1), var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{transform:scale(var(--fa-bounce-jump-scale-x,.9), var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{transform:scale(var(--fa-bounce-land-scale-x,1.05), var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{transform:scale(1, 1) translateY(var(--fa-bounce-rebound,-.125em))}64%{transform:scale(1)translateY(0)}to{transform:scale(1)translateY(0)}}@keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);transform:scale(1)}50%{opacity:1;transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-flip{50%{transform:rotate3d(var(--fa-flip-x,0), var(--fa-flip-y,1), var(--fa-flip-z,0), var(--fa-flip-angle,-180deg))}}@keyframes fa-shake{0%{transform:rotate(-15deg)}4%{transform:rotate(15deg)}8%,24%{transform:rotate(-18deg)}12%,28%{transform:rotate(18deg)}16%{transform:rotate(-22deg)}20%{transform:rotate(22deg)}32%{transform:rotate(-12deg)}36%{transform:rotate(12deg)}40%,to{transform:rotate(0)}}@keyframes fa-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fa-rotate-90{transform:rotate(90deg)}.fa-rotate-180{transform:rotate(180deg)}.fa-rotate-270{transform:rotate(270deg)}.fa-flip-horizontal{transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}.fa-rotate-by{transform:rotate(var(--fa-rotate-angle,0))}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%;z-index:var(--fa-stack-z-index,auto)}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:var(--fa-inverse,#fff)}.fa-add{--fa:"+";--fa--fa:"++"}.fa-address-card{--fa:"";--fa--fa:""}.fa-angle-down{--fa:"";--fa--fa:""}.fa-angle-left{--fa:"";--fa--fa:""}.fa-angle-right{--fa:"";--fa--fa:""}.fa-arrow-right{--fa:"";--fa--fa:""}.fa-arrow-right-from-bracket{--fa:"";--fa--fa:""}.fa-arrow-right-to-bracket{--fa:"";--fa--fa:""}.fa-arrow-up-right-from-square{--fa:"";--fa--fa:""}.fa-arrows-rotate{--fa:"";--fa--fa:""}.fa-ban{--fa:"";--fa--fa:""}.fa-bank{--fa:"";--fa--fa:""}.fa-barcode{--fa:"";--fa--fa:""}.fa-bars{--fa:"";--fa--fa:""}.fa-box{--fa:"";--fa--fa:""}.fa-building{--fa:"";--fa--fa:""}.fa-building-columns{--fa:"";--fa--fa:""}.fa-calendar-day{--fa:"";--fa--fa:""}.fa-calendar-plus{--fa:"";--fa--fa:""}.fa-cancel{--fa:"";--fa--fa:""}.fa-caret-up{--fa:"";--fa--fa:""}.fa-cart-shopping{--fa:"";--fa--fa:""}.fa-cart-shopping-fast{--fa:"";--fa--fa:""}.fa-check{--fa:"";--fa--fa:""}.fa-chevron-left{--fa:"";--fa--fa:""}.fa-chevron-right{--fa:"";--fa--fa:""}.fa-circle-exclamation{--fa:"";--fa--fa:""}.fa-circle-info{--fa:"";--fa--fa:""}.fa-circle-question{--fa:"";--fa--fa:""}.fa-circle-small{--fa:"";--fa--fa:""}.fa-circle-user{--fa:"";--fa--fa:""}.fa-clipboard-list-check{--fa:"";--fa--fa:""}.fa-clock{--fa:"";--fa--fa:""}.fa-clock-four{--fa:"";--fa--fa:""}.fa-close{--fa:"";--fa--fa:""}.fa-coins{--fa:"";--fa--fa:""}.fa-comment-alt-lines{--fa:"";--fa--fa:""}.fa-contact-card{--fa:"";--fa--fa:""}.fa-cookie{--fa:"";--fa--fa:""}.fa-credit-card{--fa:"";--fa--fa:""}.fa-credit-card-alt{--fa:"";--fa--fa:""}.fa-dashboard{--fa:"";--fa--fa:""}.fa-download{--fa:"";--fa--fa:""}.fa-earth{--fa:"";--fa--fa:""}.fa-earth-america{--fa:"";--fa--fa:""}.fa-earth-americas{--fa:"";--fa--fa:""}.fa-envelope{--fa:"";--fa--fa:""}.fa-exclamation{--fa:"!";--fa--fa:"!!"}.fa-exclamation-circle{--fa:"";--fa--fa:""}.fa-external-link{--fa:"";--fa--fa:""}.fa-eye{--fa:"";--fa--fa:""}.fa-file{--fa:"";--fa--fa:""}.fa-file-invoice{--fa:"";--fa--fa:""}.fa-gauge{--fa:"";--fa--fa:""}.fa-gauge-med{--fa:"";--fa--fa:""}.fa-gift{--fa:"";--fa--fa:""}.fa-gift-card{--fa:"";--fa--fa:""}.fa-globe{--fa:"";--fa--fa:""}.fa-globe-americas{--fa:"";--fa--fa:""}.fa-grid-2{--fa:"";--fa--fa:""}.fa-hand-holding-box{--fa:"";--fa--fa:""}.fa-heart{--fa:"";--fa--fa:""}.fa-info{--fa:"";--fa--fa:""}.fa-info-circle{--fa:"";--fa--fa:""}.fa-institution{--fa:"";--fa--fa:""}.fa-key{--fa:"";--fa--fa:""}.fa-leaf{--fa:"";--fa--fa:""}.fa-lightbulb{--fa:"";--fa--fa:""}.fa-list{--fa:"";--fa--fa:""}.fa-list-squares{--fa:"";--fa--fa:""}.fa-location-dot{--fa:"";--fa--fa:""}.fa-lock{--fa:"";--fa--fa:""}.fa-magic-wand-sparkles{--fa:"";--fa--fa:""}.fa-magnifying-glass{--fa:"";--fa--fa:""}.fa-magnifying-glass-plus{--fa:"";--fa--fa:""}.fa-map-location-dot{--fa:"";--fa--fa:""}.fa-map-marked-alt{--fa:"";--fa--fa:""}.fa-map-marker-alt{--fa:"";--fa--fa:""}.fa-message-lines{--fa:"";--fa--fa:""}.fa-mobile-alt{--fa:"";--fa--fa:""}.fa-mobile-screen-button{--fa:"";--fa--fa:""}.fa-money-bill-1{--fa:"";--fa--fa:""}.fa-money-bill-alt{--fa:"";--fa--fa:""}.fa-money-check-alt{--fa:"";--fa--fa:""}.fa-money-check-dollar{--fa:"";--fa--fa:""}.fa-multiply{--fa:"";--fa--fa:""}.fa-museum{--fa:"";--fa--fa:""}.fa-navicon{--fa:"";--fa--fa:""}.fa-pause{--fa:"";--fa--fa:""}.fa-pencil{--fa:"";--fa--fa:""}.fa-pencil-alt{--fa:"";--fa--fa:""}.fa-person-running-fast{--fa:"";--fa--fa:""}.fa-phone{--fa:"";--fa--fa:""}.fa-play{--fa:"";--fa--fa:""}.fa-plus{--fa:"+";--fa--fa:"++"}.fa-question-circle{--fa:"";--fa--fa:""}.fa-refresh{--fa:"";--fa--fa:""}.fa-remove{--fa:"";--fa--fa:""}.fa-repeat{--fa:"";--fa--fa:""}.fa-right-from-bracket{--fa:"";--fa--fa:""}.fa-right-to-bracket{--fa:"";--fa--fa:""}.fa-rocket{--fa:"";--fa--fa:""}.fa-ruler{--fa:"";--fa--fa:""}.fa-sack-dollar{--fa:"";--fa--fa:""}.fa-search{--fa:"";--fa--fa:""}.fa-search-plus{--fa:"";--fa--fa:""}.fa-share-alt{--fa:"";--fa--fa:""}.fa-share-nodes{--fa:"";--fa--fa:""}.fa-shopping-cart{--fa:"";--fa--fa:""}.fa-sign-in{--fa:"";--fa--fa:""}.fa-sign-in-alt{--fa:"";--fa--fa:""}.fa-sign-out{--fa:"";--fa--fa:""}.fa-sign-out-alt{--fa:"";--fa--fa:""}.fa-sliders{--fa:"";--fa--fa:""}.fa-sliders-h{--fa:"";--fa--fa:""}.fa-spinner-third{--fa:"";--fa--fa:""}.fa-star{--fa:"";--fa--fa:""}.fa-store{--fa:"";--fa--fa:""}.fa-sync{--fa:"";--fa--fa:""}.fa-tachometer-alt-average{--fa:"";--fa--fa:""}.fa-tag{--fa:"";--fa--fa:""}.fa-ticket{--fa:"";--fa--fa:""}.fa-times{--fa:"";--fa--fa:""}.fa-truck{--fa:"";--fa--fa:""}.fa-university{--fa:"";--fa--fa:""}.fa-user{--fa:"";--fa--fa:""}.fa-user-circle{--fa:"";--fa--fa:""}.fa-user-plus{--fa:"";--fa--fa:""}.fa-user-shield{--fa:"";--fa--fa:""}.fa-vcard{--fa:"";--fa--fa:""}.fa-video{--fa:"";--fa--fa:""}.fa-video-camera{--fa:"";--fa--fa:""}.fa-wallet{--fa:"";--fa--fa:""}.fa-wand-magic-sparkles{--fa:"";--fa--fa:""}.fa-xmark{--fa:"";--fa--fa:""}.sr-only,.fa-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.sr-only-focusable:not(:focus),.fa-sr-only-focusable:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.fab,.fa-brands{font-weight:400}:root,:host{--fa-style-family-brands:"Font Awesome 6 Brands";--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../../asset/font/fontawesome-website/fa-brands-400.woff2)format("woff2"),url(../../asset/font/fontawesome-website/fa-brands-400.ttf)format("truetype")}.fa-apple{--fa:"";--fa--fa:""}.fa-cc-amex{--fa:"";--fa--fa:""}.fa-cc-jcb{--fa:"";--fa--fa:""}.fa-cc-mastercard{--fa:"";--fa--fa:""}.fa-cc-visa{--fa:"";--fa--fa:""}.fa-facebook{--fa:"";--fa--fa:""}.fa-google{--fa:"";--fa--fa:""}.fa-instagram{--fa:"";--fa--fa:""}.fa-linkedin{--fa:"";--fa--fa:""}.fa-paypal{--fa:"";--fa--fa:""}.fa-pinterest{--fa:"";--fa--fa:""}.fa-tiktok{--fa:"";--fa--fa:""}.fa-whatsapp{--fa:"";--fa--fa:""}.fa-x-twitter{--fa:"";--fa--fa:""}.fa-youtube{--fa:"";--fa--fa:""}:root,:host{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-light:normal 300 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:300;font-display:block;src:url(../../asset/font/fontawesome-website/fa-light-300.woff2)format("woff2"),url(../../asset/font/fontawesome-website/fa-light-300.ttf)format("truetype")}.fal,.fa-light{font-weight:300}:root,:host{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:400;font-display:block;src:url(../../asset/font/fontawesome-website/fa-regular-400.woff2)format("woff2"),url(../../asset/font/fontawesome-website/fa-regular-400.ttf)format("truetype")}.far,.fa-regular{font-weight:400}:root,:host{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:900;font-display:block;src:url(../../asset/font/fontawesome-website/fa-solid-900.woff2)format("woff2"),url(../../asset/font/fontawesome-website/fa-solid-900.ttf)format("truetype")}.fas,.fa-solid{font-weight:900}