.ct-section {
width:100%;
background-size:cover;
background-repeat:repeat;
}
.ct-section>.ct-section-inner-wrap {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.ct-div-block {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.ct-new-columns {
display:flex;
width:100%;
flex-direction:row;
align-items:stretch;
justify-content:center;
flex-wrap:wrap;
}
.ct-link-text {
display:inline-block;
}
.ct-link {
display:flex;
flex-wrap:wrap;
text-align:center;
text-decoration:none;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-link-button {
display:inline-block;
text-align:center;
text-decoration:none;
}
.ct-link-button {
background-color: #1e73be;
border: 1px solid #1e73be;
color: #ffffff;
padding: 10px 16px;
}
.ct-image {
max-width:100%;
}
.ct-fancy-icon>svg {
width:55px;height:55px;}
.ct-inner-content {
width:100%;
}
.ct-slide {
display:flex;
flex-wrap:wrap;
text-align:center;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-nestable-shortcode {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-comments {
width:100%;
text-align:left;
}
.oxy-comment-form {
width:100%;
}
.oxy-login-form {
width:100%;
}
.oxy-search-form {
width:100%;
}
.oxy-tabs-contents {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab-content {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-testimonial {
width:100%;
}
.oxy-icon-box {
width:100%;
}
.oxy-pricing-box {
width:100%;
}
.oxy-posts-grid {
width:100%;
}
.oxy-gallery {
width:100%;
}
.ct-slider {
width:100%;
}
.oxy-tabs {
display:flex;
flex-wrap:nowrap;
flex-direction:row;
align-items:stretch;
}
.ct-modal {
flex-direction:column;
align-items:flex-start;
}
.ct-span {
display:inline-block;
text-decoration:inherit;
}
.ct-widget {
width:100%;
}
.oxy-dynamic-list {
width:100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
			.ct-div-block,
			.oxy-post-content,
			.ct-text-block,
			.ct-headline,
			.oxy-rich-text,
			.ct-link-text { max-width: 100%; }
			img { flex-shrink: 0; }
			body * { min-height: 1px; }
		}            .oxy-testimonial {
                flex-direction: row;
                align-items: center;
            }
                        .oxy-testimonial .oxy-testimonial-photo-wrap {
                order: 1;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo {
                width: 125px;                height: 125px;                margin-right: 20px;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo-wrap, 
            .oxy-testimonial .oxy-testimonial-author-wrap, 
            .oxy-testimonial .oxy-testimonial-content-wrap {
                align-items: flex-start;                text-align: left;            }
            
                                                            .oxy-testimonial .oxy-testimonial-text {
                margin-bottom:8px;font-size: 21px;
line-height: 1.4;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
                                    .oxy-testimonial .oxy-testimonial-author {
                font-size: 18px;
-webkit-font-smoothing: subpixel-antialiased;
            }
                            

                                                .oxy-testimonial .oxy-testimonial-author-info {
                font-size: 12px;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
             
            
                        .oxy-icon-box {
                text-align: left;                flex-direction: column;            }
            
                        .oxy-icon-box .oxy-icon-box-icon {
                margin-bottom: 12px;
                align-self: flex-start;            }
            
                                                                        .oxy-icon-box .oxy-icon-box-heading {
                font-size: 21px;
margin-bottom: 12px;            }
            
                                                                                    .oxy-icon-box .oxy-icon-box-text {
                font-size: 16px;
margin-bottom: 12px;align-self: flex-start;            }
            
                        .oxy-icon-box .oxy-icon-box-link {
                margin-top: 20px;                            }
            
            
            /* GLOBALS */

                                                            .oxy-pricing-box .oxy-pricing-box-section {
                padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: center;            }
                        
                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                justify-content: center;            }
            
            /* IMAGE */
                                                                                    .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-graphic {
                justify-content: center;            }
            
            /* TITLE */
                                                            
                                    .oxy-pricing-box .oxy-pricing-box-title-title {
                font-size: 48px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-title-subtitle {
                font-size: 24px;
            }
            

            /* PRICE */
                                                .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                                                flex-direction: row;                                            }
            
                                    .oxy-pricing-box .oxy-pricing-box-currency {
                font-size: 28px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-main {
                font-size: 80px;
line-height: 0.7;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-decimal {
                font-size: 13px;
            }
                        
                                    .oxy-pricing-box .oxy-pricing-box-term {
                font-size: 16px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-sale-price {
                font-size: 12px;
color: rgba(0,0,0,0.5);
                margin-bottom: 20px;            }
            
            /* CONTENT */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-content {
                font-size: 16px;
color: rgba(0,0,0,0.5);
            }
            
            /* CTA */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-cta {
                justify-content: center;            }
            
        
                                .oxy-progress-bar .oxy-progress-bar-background {
            background-color: #000000;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);            animation: none 0s paused;        }
                
                .oxy-progress-bar .oxy-progress-bar-progress-wrap {
            width: 85%;        }
        
                                                        .oxy-progress-bar .oxy-progress-bar-progress {
            background-color: #66aaff;padding: 40px;animation: none 0s paused, none 0s paused;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);        
        }
                
                        .oxy-progress-bar .oxy-progress-bar-overlay-text {
            font-size: 30px;
font-weight: 900;
-webkit-font-smoothing: subpixel-antialiased;
        }
        
                        .oxy-progress-bar .oxy-progress-bar-overlay-percent {
            font-size: 12px;
        }
        
        .ct-slider .unslider-nav ol li {border-color: #ffffff; }.ct-slider .unslider-nav ol li.unslider-active {background-color: #ffffff; }.ct-slider .ct-slide {
				padding: 0px;			}
		
                        .oxy-superbox .oxy-superbox-secondary, 
            .oxy-superbox .oxy-superbox-primary {
                transition-duration: 0.5s;            }
            
            
            
            
            
        
        
        
        
            .oxy-shape-divider {
                width: 0px;
                height: 0px;
                
            }
            
            .oxy_shape_divider svg {
                width: 100%;
            }
            .oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu{
box-shadow:px px px px ;}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a div{
margin-left:0px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
width:30px;
height:30px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon{
padding-top:15px;
padding-right:15px;
padding-bottom:15px;
padding-left:15px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon, .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon{
top:20px;
left:20px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
width:24px;
height:24px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon, .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{
background-color:#ffffff;
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-open-container{
background-image:url();
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item-has-children > a svg, .oxy-pro-menu .oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item-has-children > a svg{
font-size:24px;
}

.oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-open-container .menu-item-has-children ul, .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-off-canvas-container .menu-item-has-children ul{
background-color:rgba(0,0,0,0.2);
border-top-style:solid;
}

.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .oxy-pro-menu-list{
                    flex-direction: row;
               }
.oxy-pro-menu .oxy-pro-menu-container .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item{
                    align-items: flex-start;
                }

            .oxy-pro-menu .oxy-pro-menu-off-canvas-container{
                    top: 0;
                    bottom: 0;
                    right: auto;
                    left: 0;
               }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }

            .oxy-site-navigation {
--oxynav-brand-color:#4831B0;
--oxynav-neutral-color:#FFFFFF;
--oxynav-activehover-color:#EFEDF4;
--oxynav-background-color:#4831B0;
--oxynav-border-radius:0px;
--oxynav-other-spacing:8px;
--oxynav-transition-duration:0.3s;
--oxynav-transition-timing-function:cubic-bezier(.84,.05,.31,.93);
}

.oxy-site-navigation .oxy-site-navigation__mobile-close-wrapper{
text-align:left;
}

.oxy-site-navigation > ul{ left: 0; }
.oxy-site-navigation {
                        --oxynav-animation-name: none; 
                    }

                .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1){ 
                    background-color: var(--oxynav-brand-color);
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                    border: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2){ 
                    background: transparent;
                    border: 1px solid currentColor;
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2):not(:hover) > img{
                    filter: invert(0) !important;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover{
                    background-color: var(--oxynav-activehover-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a{
                    color: var(--oxynav-neutral-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a::after{
                    color: var(--oxynav-neutral-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > button, .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }

                .ct-section-inner-wrap, .oxy-header-container{
  max-width: 1200px;
}
body {font-family: 'Space Grotesk';}body {line-height: 1.4;font-size: 18px;font-weight: 400;color: #3f3f3f;}.oxy-nav-menu-hamburger-line {background-color: #3f3f3f;}h1, h2, h3, h4, h5, h6 {font-family: 'Space Grotesk';font-size: clamp(44px, 32px + 2.5vw, 60px) ;font-weight: 400;line-height: 1;}h2, h3, h4, h5, h6{font-size: clamp(36px, 27px + 1.875vw, 48px) ;font-weight: 400;line-height: 1;}h3, h4, h5, h6{font-size: clamp(28px, 20.5px + 1.563vw, 38px) ;font-weight: 400;line-height: 1;}h4, h5, h6{font-size: clamp(22px, 16px + 1.25vw, 30px) ;font-weight: 400;line-height: 1;}h5, h6{font-size: 12px;font-weight: 400;}h6{font-size: 16px;}a {color: #0074db;text-decoration: none;}a:hover {text-decoration: none;}.ct-link-text {color: #3f3f3f;text-decoration: underline;}.ct-link-text:hover {color: #b9b9b9;text-decoration: underline;}.ct-link {text-decoration: ;}.ct-link-button {border-radius: 3px;}.ct-section-inner-wrap {
padding-top: clamp(54px, 1.5px + 10.938vw, 124px) ;
padding-right: 20px;
padding-bottom: clamp(54px, 1.5px + 10.938vw, 124px) ;
padding-left: 20px;
}.ct-new-columns > .ct-div-block {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}.oxy-header-container {
padding-right: 20px;
padding-left: 20px;
}@media (max-width: 992px) {
				.ct-columns-inner-wrap {
					display: block !important;
				}
				.ct-columns-inner-wrap:after {
					display: table;
					clear: both;
					content: "";
				}
				.ct-column {
					width: 100% !important;
					margin: 0 !important;
				}
				.ct-columns-inner-wrap {
					margin: 0 !important;
				}
			}
.reveal {
}
.eyebrow {
 text-transform:uppercase;
 font-weight:400;
 font-size:12px;
 margin-bottom:clamp(8px, 5px + 0.625vw, 12px) ;
}
.img-reveal {
}
.display {
 line-height:1;
}
.btn {
background-color :#1e73be;
border: 1px solid #1e73be;
padding: 14px 22.4px;
}.btn {
 text-transform:uppercase;
 padding-top:clamp(12px, 10.5px + 0.313vw, 14px) ;
 padding-bottom:clamp(12px, 10.5px + 0.313vw, 14px) ;
 padding-left:clamp(24px, 19.5px + 0.938vw, 30px) ;
 padding-right:clamp(14px, 9.5px + 0.938vw, 20px) ;
 border-radius:2px;
}
.btn:not(.ct-section):not(.oxy-easy-posts),
.btn.oxy-easy-posts .oxy-posts,
.btn.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.btn_primary {
background-color :#3f3f3f;
border: 1px solid #3f3f3f;
}.btn_primary {
 color:#ffffff;
}
.lightmode {
}
.darkmode {
}
.share-container {
 background-color:#3f3f3f;
}
.share-text {
 color:#ffffff;
}
.share-icon-box {
 gap:10px;
 text-align:center;
}
.share-icon-box:not(.ct-section):not(.oxy-easy-posts),
.share-icon-box.oxy-easy-posts .oxy-posts,
.share-icon-box.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
gap:10px;
}
.news-card {
}
.display_l {
 font-weight:400;
 line-height:1;
}
.site-modal-inner {
 width:100%;
 max-width:1200px;
 margin-top:0px;
 margin-bottom:0px;
 margin-right:auto;
 margin-left:auto;
}
.site-modal-inner:not(.ct-section):not(.oxy-easy-posts),
.site-modal-inner.oxy-easy-posts .oxy-posts,
.site-modal-inner.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
}
@media (max-width: 991px) {
.site-modal-inner {
}
}

.mobile-menu-toggle {
 width:40px;
 height:40px;
 color:#ffffff;
}
.mobile-menu-toggle:not(.ct-section):not(.oxy-easy-posts),
.mobile-menu-toggle.oxy-easy-posts .oxy-posts,
.mobile-menu-toggle.ct-section .ct-section-inner-wrap{
display:none;
align-items:center;
justify-content:center;
}
@media (max-width: 991px) {
.mobile-menu-toggle {
}
.mobile-menu-toggle:not(.ct-section):not(.oxy-easy-posts),
.mobile-menu-toggle.oxy-easy-posts .oxy-posts,
.mobile-menu-toggle.ct-section .ct-section-inner-wrap{
display:flex;
}
}

.mobile-menu-toggle-icon {
}
.mobile-menu-toggle-bar {
}
.mobile-menu-panel {
 background-color:#fff091;
 padding-top:156px;
 padding-right:20px;
 padding-bottom:20px;
 padding-left:40px;
}
@media (max-width: 767px) {
.mobile-menu-panel {
 padding-left:20px;
}
}

.mobile-menu-list {
 width:100%;
 height:100%;
}
.mobile-menu-list:not(.ct-section):not(.oxy-easy-posts),
.mobile-menu-list.oxy-easy-posts .oxy-posts,
.mobile-menu-list.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
justify-content:space-between;
}
.menu-item {
}
.display_xl {
 line-height:1;
 text-align:center;
}
.card-carousel-section {
}
.card-carousel-section .ct-section-inner-wrap {
padding-bottom: 0;
}
.card-carousel {
 margin-bottom:clamp(20px, 5px + 3.125vw, 40px) ;
}
.card-carousel-track {
}
.testimonial-card {
 background-color:#fafafa;
 border-radius:2px;
 padding-top:clamp(70px, 47.5px + 4.688vw, 100px) ;
 padding-right:clamp(20px, 12.5px + 1.563vw, 30px) ;
 padding-bottom:clamp(20px, 12.5px + 1.563vw, 30px) ;
 padding-left:clamp(20px, 12.5px + 1.563vw, 30px) ;
 position:relative;
}
.testimonial-card:not(.ct-section):not(.oxy-easy-posts),
.testimonial-card.oxy-easy-posts .oxy-posts,
.testimonial-card.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
justify-content:space-between;
}
.testimonial-quote-icon {
 position:absolute;
 top:-6px;
 left:clamp(-23px, -0.25px + -2.031vw, -10px) ;
 height:clamp(60px, 37.5px + 4.688vw, 90px) ;
}
.testimonial-top {
 margin-bottom:clamp(18px, 12px + 1.25vw, 26px) ;
}
.testimonial-quote {
 font-size:clamp(18px, 13.5px + 0.938vw, 24px) ;
}
.testimonial-author {
}
.testimonial-author-name {
 font-size:clamp(16px, 14.5px + 0.313vw, 18px) ;
 font-weight:600;
}
.testimonial-author-role {
 font-size:clamp(14px, 12.5px + 0.313vw, 16px) ;
}
.card-carousel-dots {
}
.oxel_iconlist {
 max-width:100%;
}
.oxel_iconlist__row {
 padding-top:10px;
 padding-left:0px;
 padding-right:8px;
 padding-bottom:10px;
 width:100%;
 margin-top:0px;
}
.oxel_iconlist__row:not(.ct-section):not(.oxy-easy-posts),
.oxel_iconlist__row.oxy-easy-posts .oxy-posts,
.oxel_iconlist__row.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.oxel_iconlist__row__icon {
background-color: #3f3f3f;
border: 1px solid #3f3f3f;
padding: 5px;color: #fff091;}.oxel_iconlist__row__icon 
>svg {width: 24px;height: 24px;}.oxel_iconlist__row__icon {
 margin-right:10px;
}
.oxel_iconlist__row__label {
 font-size:clamp(16px, 14.5px + 0.313vw, 18px) ;
 line-height:1.4;
}
.parallax-item {
}
.accordion {
 gap:10px;
}
.accordion:not(.ct-section):not(.oxy-easy-posts),
.accordion.oxy-easy-posts .oxy-posts,
.accordion.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
gap:10px;
}
.accordion-item {
 background-color:#fafafa;
 width:100%;
 border-radius:2px;
}
.accordion-header {
 width:100%;
 padding-top:20px;
 padding-right:20px;
 padding-bottom:20px;
 padding-left:20px;
 gap:20px;
}
.accordion-header:not(.ct-section):not(.oxy-easy-posts),
.accordion-header.oxy-easy-posts .oxy-posts,
.accordion-header.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;
gap:20px;
}
.accordion-title {
}
.accordion-icon {
color: #3f3f3f;}.accordion-icon 
>svg {width: 36px;height: 36px;}.accordion-icon {
}
.accordion-body {
}
.accordion-body-inner {
 padding-right:60px;
 padding-left:20px;
 padding-bottom:20px;
 padding-top:0px;
 width:100%;
}
@media (max-width: 767px) {
.accordion-body-inner {
 padding-right:20px;
}
}

.oxel_iconlist__row--dark {
 background-color:color(7);
}
.oxel_icon_button__container:hover{
 background-color:color(8);
}
.oxel_icon_button__container {
 background-color:color(7);
 padding-top:8px;
 padding-left:16px;
 padding-right:16px;
 padding-bottom:8px;
 transition-duration:0.3s;
}
.oxel_icon_button__container:not(.ct-section):not(.oxy-easy-posts),
.oxel_icon_button__container.oxy-easy-posts .oxy-posts,
.oxel_icon_button__container.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.oxel_icon_button_text {
}
.oxel_icon_button_icon {
color: #ffffff;}.oxel_icon_button_icon 
>svg {width: 36px;height: 36px;}.oxel_icon_button_icon {
 margin-right:8px;
}
.hero {
}
.hero__inner {
}
.js-parallax {
}
.hero__img {
}
.hero__img--back {
}
.hero__img--front {
}
.hero__title-wrap {
}
.hero__title {
 color:#fff091;
 font-size:clamp(52px, -2px + 11.25vw, 124px) ;
}
@media (max-width: 767px) {
.hero__title {
}
}

.hero__cross {
}
@media (max-width: 991px) {
.hero__cross {
}
.hero__cross:not(.ct-section):not(.oxy-easy-posts),
.hero__cross.oxy-easy-posts .oxy-posts,
.hero__cross.ct-section .ct-section-inner-wrap{
display:none;
}
}

@media (max-width: 767px) {
.hero__cross {
}
}

.hero__plus {
}
@media (max-width: 991px) {
.hero__plus {
}
.hero__plus:not(.ct-section):not(.oxy-easy-posts),
.hero__plus.oxy-easy-posts .oxy-posts,
.hero__plus.ct-section .ct-section-inner-wrap{
display:none;
}
}

@media (max-width: 767px) {
.hero__plus {
 padding-bottom:0px;
}
}

.split {
}
.split .ct-section-inner-wrap {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.split__panel {
}
.split__panel--junior {
}
.split__label {
}
.split__mark {
}
.split__name {
}
.split__reveal {
}
.split__reveal-inner {
}
.split__option {
}
.split__option-head {
}
.split__option-title {
}
.split__arrow {
}
.split__option-desc {
}
.split__panel--senior {
}
.hero__underlay {
}
.animate {
}
.hero__subtitle {
}
.count-up {
}
.logo-row {
 width:100%;
 gap:clamp(8px, 2px + 1.25vw, 16px) ;
}
.logo-row:not(.ct-section):not(.oxy-easy-posts),
.logo-row.oxy-easy-posts .oxy-posts,
.logo-row.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
align-items:center;
justify-content:center;
gap:clamp(8px, 2px + 1.25vw, 16px) ;
}
.logo-row-left {
}
.logo-card {
 width:23vw;
 background-color:#fafafa;
 border-radius:2px;
 flex-shrink:0;
 padding-top:14px;
 padding-bottom:14px;
 padding-right:clamp(10px, -5px + 3.125vw, 30px) ;
 padding-left:clamp(10px, -5px + 3.125vw, 30px) ;
 min-width:120px;
 max-height:200px;
aspect-ratio: 2 / 1;
}
.logo-card:not(.ct-section):not(.oxy-easy-posts),
.logo-card.oxy-easy-posts .oxy-posts,
.logo-card.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.logo-row-right {
}
.quote-slider-section {
}
.quote-slider {
 width:100%;
}
.quote-slider-track {
}
.site-modal {
 width:100%;
}
.site-modal .ct-section-inner-wrap {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.site-modal:not(.ct-section):not(.oxy-easy-posts),
.site-modal.oxy-easy-posts .oxy-posts,
.site-modal.ct-section .ct-section-inner-wrap{
display:flex;
justify-content:flex-end;
}
.site-modal-overla {
}
.site-modal-overlay {
 background-color:rgba(20,20,20,0.6);
 color:#fff091;
}
.site-modal-panel {
color: #fff091;}.site-modal-panel 
>svg {width: 55px;height: 55px;}.site-modal-panel {
 background-color:#ffffff;
 border-top-left-radius:24px;
 border-top-right-radius:24px;
 border-bottom-left-radius:0px;
 border-bottom-right-radius:0px;
 width:100%;
 box-shadow:0px -24px 60px rgba(0,0,0,0.18);
}
.site-modal-grab-pill {
 width:44px;
 height:4px;
 border-radius:4px;
 background-color:#e3e3e3;
}
@media (max-width: 767px) {
.site-modal-grab-pill {
 align-self:center;
}
}

.site-modal-grab {
 width:100%;
 height:28px;
 padding-top:10px;
}
.site-modal-grab:not(.ct-section):not(.oxy-easy-posts),
.site-modal-grab.oxy-easy-posts .oxy-posts,
.site-modal-grab.ct-section .ct-section-inner-wrap{
display:none;
justify-content:center;
}
@media (max-width: 767px) {
.site-modal-grab {
}
.site-modal-grab:not(.ct-section):not(.oxy-easy-posts),
.site-modal-grab.oxy-easy-posts .oxy-posts,
.site-modal-grab.ct-section .ct-section-inner-wrap{
display:flex;
align-content:center;
justify-content:center;
}
}

.site-modal-head {
 width:100%;
 padding-top:16px;
 padding-right:24px;
 padding-left:24px;
}
.site-modal-head:not(.ct-section):not(.oxy-easy-posts),
.site-modal-head.oxy-easy-posts .oxy-posts,
.site-modal-head.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
justify-content:flex-end;
}
.site-modal-close {
 width:44px;
 height:44px;
 border-radius:100px;
}
.site-modal-close:not(.ct-section):not(.oxy-easy-posts),
.site-modal-close.oxy-easy-posts .oxy-posts,
.site-modal-close.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.site-modal-body {
 width:100%;
 padding-top:8px;
 padding-right:20px;
 padding-bottom:56px;
 padding-left:20px;
}
.city-card:hover{
 background-color:#ededed;
}
.city-card {
 width:100%;
 border-radius:2px;
 background-color:#fafafa;
 padding-top:28px;
 padding-right:36px;
 padding-bottom:28px;
 padding-left:36px;
 transition-duration:0.15s;
 transition-timing-function:ease;
 transition-property:background-color;
}
.city-card:not(.ct-section):not(.oxy-easy-posts),
.city-card.oxy-easy-posts .oxy-posts,
.city-card.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;
}
.city-card__icon {
 transition-duration:0.2s;
 transition-timing-function:ease;
 transition-property:transform;
}
.timeline {
}
.timeline-rail {
 width:100%;
}
.timeline-rail-inner {
}
.timeline-years {
 gap:12px;
 margin-bottom:20px;
}
.timeline-years:not(.ct-section):not(.oxy-easy-posts),
.timeline-years.oxy-easy-posts .oxy-posts,
.timeline-years.ct-section .ct-section-inner-wrap{
gap:12px;
}
.timeline-year {
 font-size:clamp(17px, 20.5px + 1.563vw, 21px) ;
}
.timeline-line {
}
.timeline-line-fill {
}
.timeline-dot {
}
.timeline-panels {
 width:100%;
 margin-top:clamp(40px, 20.5px + 1.563vw, 72px) ;
}
.timeline-panel {
 background-color:#fafafa;
 border-radius:2px;
 padding-top:clamp(20px, 20.5px + 1.563vw, 80px) ;
 padding-right:clamp(20px, 20.5px + 1.563vw, 80px) ;
 padding-bottom:clamp(20px, 20.5px + 1.563vw, 80px) ;
 padding-left:clamp(20px, 20.5px + 1.563vw, 80px) ;
}
@media (max-width: 767px) {
.timeline-panel {
}
.timeline-panel:not(.ct-section):not(.oxy-easy-posts),
.timeline-panel.oxy-easy-posts .oxy-posts,
.timeline-panel.ct-section .ct-section-inner-wrap{
display:flex;
}
}

.arkiv-sektion {
}
.arkiv-filter-rad {
 width:100%;
 margin-bottom:clamp(20px, 12.5px + 1.5625vw, 30px) ;
}
.arkiv-filter-rad:not(.ct-section):not(.oxy-easy-posts),
.arkiv-filter-rad.oxy-easy-posts .oxy-posts,
.arkiv-filter-rad.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
justify-content:flex-end;
}
.post-grid {
}
.logo-card__image {
 height:100%;
 width:100%;
 max-width:300px;
 opacity:0.6;
 filter:grayscale(100%);
 object-fit:contain;
}
.btn-ghost {
 text-align:left;
}
.btn-ghost:not(.ct-section):not(.oxy-easy-posts),
.btn-ghost.oxy-easy-posts .oxy-posts,
.btn-ghost.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.oxy-stock-content-styles {
}
.text-content {
}
.site-header {
}
.copy-item {
}
.copy-value {
}
.copy-btn {
}
.hero-video-section {
}
.hero-media {
background-image:url(http://xamera.se/wp-content/uploads/2026/08/xamera-hero-poster.webp);background-size: cover; background-repeat:no-repeat;
 background-position:-50% -50%;
}
.hero-content {
 position:relative;
 z-index:2;
}
.hero-overlay {
 background-color:rgba(0,0,0,0.6);
}
.screen-reader-text {
}
.hero {
  position: relative;
  overflow-x: clip;
  min-height: 70vh;
}
.hero__inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  min-height: inherit;
}
.js-parallax {
  --mx: 0;
  --my: 0;
  --sy: 0;
  --iy: 0;
  transform: translate3d(
    calc(var(--mx) * 1px),
    calc((var(--sy) + var(--my) + var(--iy)) * 1px),
    0
  );
  will-change: transform;
}
.hero__img {
  position: absolute;
  display: block;
  object-fit: cover;
  box-shadow: 0 30px 60px rgba(0,0,0,.25);
  width: clamp(430px, 95.942px + 42.718vw, 694px);
  max-height: 60vh;
  filter: brightness(0.5);
  aspect-ratio: 1;
}
.hero__img--back {
  top: 6%;
  left: 2%;
  z-index: 1;
}
.hero__img--front {
  top: 12%;
  right: 2%;
  z-index: 2;
}
.hero__title-wrap {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: min(90%, 980px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: flex;
  align-items: center;
}
.hero__title-wrap.js-parallax {
  transform: translate(-50%, -50%)
    translate3d(
      calc(var(--mx) * 1px),
      calc((var(--sy) + var(--my) + var(--iy)) * 1px),
      0
    );
}
.hero__title {
  margin: 0;
  width: 100%;
  text-align: center;
  line-height: 0.9;
  letter-spacing: -0.05em;
  pointer-events: none;
}
.hero__title.is-typing::after {
  content: '';
  display: inline-block;
  width: .06em;
  height: .9em;
  margin-left: .06em;
  background: #F2E96B;
  vertical-align: -0.08em;
  animation: hero-blink .7s steps(1) infinite;
}
@keyframes hero-blink {
  50% { opacity: 0 }
}
.hero__subtitle {
  margin: .5em 0 0;
  text-align: center;
  color: #fff;
  font-size: clamp(1rem, 2.4vw, 1.8rem);
  opacity: 0;
}
.hero__plus,
.hero__cross {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}
.hero__plus {
  top: 8%;
  left: 4%;
  width: clamp(70px, 9vw, 130px);
}
.hero__cross {
  bottom: 6%;
  right: 6%;
  width: clamp(80px, 11vw, 150px);
}
.hero__plus svg,
.hero__cross svg {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .hero__img--back { 
    left: -4%; width: 70vw; 
  }
  .hero__img--front { 
    right: -4%; 
    top: 36%; 
    width: 72vw; 
  }

  .hero__inner img {
    display: none;
  }
  .hero__underlay {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-parallax { 
    transform: none !important; 
  }
  .hero__subtitle { 
    opacity: 1; 
  }
}:root {
  --color-yellow: #FFF091;
  --color-white: #FFFFFF;
  --color-grey-50: #FDFDFD;
  --color-grey-100: #FAFAFA;
  --color-grey-300: #E3E3E3;
  --color-grey-600: #B9B9B9;
  --color-grey-900: #3F3F3F;
}

@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: 120ms ease out fade-out;
}
::view-transition-new(root) {
  animation: 150ms ease in fade-in;
}

::selection {
  color: var(--color-yellow);
  background-color: var(--color-grey-900);
}
.darkmode ::selection {
  color: var(--color-grey-900);
  background-color: var(--color-yellow);
}
body {
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: clamp(16px, 14.5px + 0.313vw, 18px);
  line-height: 1.5;
  scroll-behavior: smooth;
}
.oxygen-builder-body .reveal {
  opacity: 1;
}

/* Anchortext i loggan */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* FONT SIZES */
.display {
  font-size: clamp(38px, 12.5px + 5.313vw, 72px);
}
.display_l {
  font-size: clamp(48px, -12px + 12.5vw, 128px);
}
.display_xl {
  font-size: clamp(52px, 5.043px + 9.783vw, 142px);
}
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
h5 {
  text-transform: uppercase;
  margin-bottom: clamp(8px, 5px + 0.625vw, 12px);
}
p {
  margin-bottom: clamp(20px, 12.5px + 1.5625vw, 30px);
}
a {
  color: var(--color-grey-900);
  text-decoration: underline;
}
a:hover {
  color: var(--color-grey-600);
}
.excerpt {
  font-size: 14px;
  display: none;
  color: var(--color-grey-900);
  text-align: left;
}
.lightmode .ct-section-inner-wrap {
  padding-left: 20px;
  padding-right: 20px;
}

/* RAM RUNT SIDORNA */
@media (min-width: 769px) {
  body section.ct-section,
  footer.ct-section {
    width: calc(100% - 40px);
    margin: 0 20px;
  }
  footer.ct-section {
    margin-bottom: 20px;
  }
  .excerpt {
    display: block;
  }
  .lightmode .ct-section-inner-wrap {
    padding-left: 0;
    padding-right: 0;
  }
  body {
    margin-top: 20px;
  }
}

/* FOOTER */
footer a {
  color: var(--color-yellow);
}

/* KNAPPAR */
.btn, .btn svg {
  transition: all 0.1s ease-out;
}
.btn svg {
  transition: all 0.1s ease-out;
  height: clamp(30px, 22.5px + 1.563vw, 40px);
  width: clamp(30px, 22.5px + 1.563vw, 40px);
}
.btn span {
  margin: 0;
}
.btn:hover svg {
  transform: translateX(5px);
}
.btn:hover {
  opacity: 0.95;
}
.btn-ghost .ct-fancy-icon {
  transition: transform 0.1s ease-out;
}
.btn-ghost:hover .ct-fancy-icon {
  transform: translateX(5px);
}

/* ANIMATION */
.reveal { 
  opacity: 0; 
}
@media (prefers-reduced-motion: reduce) {
  .reveal { 
    opacity: 1 !important; 
    transform: none !important; 
  }
}

/* NEWS CARD */
.news-card:hover img {
  transform: scale(1.05);
}

/* STADSKORT (För arbetsgivare) */
.city-card:hover .city-card__icon {
  transform: translateX(5px);
}

/* Dölj pagineringen på bloggdelen på startsidan */
#section-318-8 .oxy-repeater-pages-wrap {
  display: none;
}

/* Blog singlesida */
.text-content h1 {
  margin-bottom: clamp(28px, 22px + 1.25vw, 36px);
  display: inline-block;
}
.text-content h2 {
  font-size: clamp(26px, 20px + 1.25vw, 34px);
  display: inline-block;
  margin: 10px 0;
}
.text-content h3 {
  font-size: clamp(22px, 17.5px + 0.9375vw, 28px);
  display: inline-block;
  margin: 10px 0;
}
.text-content h4 {
  font-size: clamp(18px, 13.5px + 0.9375vw, 24px);
  display: inline-block;
  margin: 10px 0;
}
.text-content p {
  margin: 0 0 clamp(14px, 9.5px + 0.9375vw, 20px);
}
.text-content em {
  font-size: clamp(14px, 12.5px + 0.3125vw, 16px);
}
.text-content blockquote {
  margin: clamp(20px, 5px + 3.125vw, 40px) 0;
  text-align: center;
}
.text-content blockquote p {
  font-size: clamp(20px, 14px + 1.25vw, 28px);
}
.text-content blockquote cite {
  margin-top: 10px;
  font-size: clamp(14px, 12.5px + 0.3125vw, 16px);
}
.text-content a {
  text-decoration: underline;
  color: var(--color-grey-900);
}
.text-content a:hover {
  color: var(--color-grey-600);
}
.text-content figure {
  margin: 0;
}
.text-content ul {
  padding-left: clamp(25px, 21.25px + 0.78125vw, 30px);
}
.post-cat {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0 !important;
}
.post-cat li {
  background: var(--color-grey-900);
  padding: 10px 20px;
  border-radius: 2px;
}
.post-cat li a {
  color: var(--color-yellow);
  text-decoration: none;
}
.post-cat li:hover a {
  color: var(--color-white);
}
.wp-block-cover {
  margin-bottom: 20px;
}

/* STADSKONTAKT KARTA */
.xa-map {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 2px;
  overflow: hidden;
  background: var(--color--grey-100);
}
.xa-map__frame { 
  display: block; 
  width: 100%; 
  height: 100%; 
  border: 0; 
}
/* Klick-för-att-aktivera: stoppar att hjulscroll fastnar i kartan */
.xa-map__unlock {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.xa-map.is-active .xa-map__unlock { 
  display: none; 
}
.xa-map__sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}.split {
  --ease: cubic-bezier(.66, 0, .2, 1);
  display: flex;
  min-height: clamp(440px, 58vh, 640px);
  padding: 0;
  overflow: hidden;
}
.split > .ct-section-inner-wrap {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-height: inherit;
  margin: 0;
  padding: 0;
  align-items: stretch;  
}

@media (min-width: 769px) {
  .split{
    aspect-ratio: 2 / 1;
    min-height: 0;
    max-height: 900px;
  }
}

.split__panel {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; 
  gap: clamp(20px, -55px + 15.625vw, 120px);
  padding: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: flex-grow .6s var(--ease), background-color .6s var(--ease);
}
.split__panel--junior { 
  background: var(--color-yellow); 
  color: var(--color-grey-900); 
}
.split__panel--junior a:hover {
  color: var(--color-grey-900);
}
.split__panel--senior { 
  background: var(--color-grey-900); 
  color: var(--color-yellow); 
}
.split__panel--senior a:hover {
  color: var(--color-yellow);
}
.split__label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex: none;
}
.split__mark {
  width: clamp(40px, 5vw, 84px);
  height: auto;
  flex: none;
}
.split__mark svg { 
  width: 100%; 
  height: auto; 
  display: block; 
}
.split__name {
  font-size: clamp(24px, 10.5px + 2.813vw, 42px);
  line-height: 1.05;
  font-weight: 300;
}
.split__reveal {
  display: grid;
  grid-template-columns: 0fr;
  opacity: 0;
  transition: grid-template-columns .6s var(--ease), opacity .45s ease;
}
.split__reveal-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 80px);
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}
.split__option {
  position: relative;
  width: clamp(260px, 30vw, 520px);
  flex: none;
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  justify-content: start;
}
.split__option-head {
  display: flex;
  flex-direction: column;
  width: clamp(180px, 56.154px + 13.462vw, 250px);
}
.split__option-title {
  font-size: clamp(1.8rem, 3vw, 3.4rem);
  font-weight: 300;
  line-height: 1;
}
.split__arrow {
  width: clamp(70px, -124.615px + 21.154vw, 180px);
  height: auto;
  transition: transform .35s var(--ease);
}
.split__arrow svg { 
  width: 100%; 
  height: auto; 
  display: block; 
}
.split__option-desc {
  margin: .8em 0 0;
  font-size: clamp(.82rem, 1.05vw, 1.1rem);
  line-height: 1.35;
  max-width: 250px;
  opacity: .9;
  text-align: left;
}

@media (hover: hover) and (min-width: 769px){
  .split__panel:hover { 
    flex-grow: 3; 
  }
  .split__panel:hover .split__reveal {
    grid-template-columns: 1fr;
    opacity: 1;
  }
  .split__panel:hover .split__reveal-inner { 
    pointer-events: auto; 
  }
  .split__option:hover .split__arrow { 
    transform: translateX(10px); 
  }
}

@media (min-width: 769px){
  .split__panel.is-active {
    flex-grow: 3;
  }
  .split__panel.is-active .split__reveal {
    grid-template-columns: 1fr;
    opacity: 1;
  }
  .split__panel.is-active .split__reveal-inner {
    pointer-events: auto;
  }
}

@media (max-width: 768px){
  .split, .split > .ct-section-inner-wrap { 
    flex-direction: column; 
  }
  .split { 
    min-height: 0; 
  }
  .split__panel {
    flex: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0px;
    padding: clamp(30px, 0px + 6.25vw, 48px) clamp(20px, -26.667px + 9.722vw, 48px);
    transition: background-color .4s var(--ease);
  }
  .split__reveal {
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s var(--ease), opacity .4s ease;
  }
  .split__reveal-inner { 
    flex-direction: column; 
    width: 100%; 
  }
  .split__option { 
    width: 100%;
    justify-content: space-between;
  }
  .split__panel.is-active .split__reveal {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .split__panel.is-active .split__reveal-inner { 
    pointer-events: auto; 
  }

  .is-active .split__reveal { 
    margin-top: 40px;
  }
}
 
@media (prefers-reduced-motion: reduce){
  .split__panel,
  .split__reveal,
  .split__arrow { 
    transition: none; 
  }
}body:not(.oxygen-builder-body) .accordion-body {
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
body:not(.oxygen-builder-body) .accordion-item.is-open .accordion-body {
  height: auto;
  visibility: visible;
}
.accordion-header {
  cursor: pointer;
}
.accordion-icon {
  flex-shrink: 0;
}

/* Hover: tona ner de andra punkterna */
.accordion-item {
  transition: opacity 0.25s ease;
}

@media (hover: hover) {
  .accordion:has(.accordion-item:hover) .accordion-item:not(:hover) {
    opacity: 0.6;
  }
}/* ============================================================
   Xamera – dragbar kortkarusell  ·  ENDAST MEKANIK
   Stylesheet: "xamera-card-carousel" (Oxygen → Manage → Stylesheets)

   All kosmetik (bakgrund, padding, typografi, ikonens marginaler,
   dots-divens margin) sätts i Oxygen UI på respektive klass.
   Här ligger bara det UI:t inte kan uttrycka:
   - full-bleed + clipping, overflow-/snäpplägen
   - trackens flexrad (dubbel selektor = vinner över Oxygens div-defaults)
   - kortbreddens formel (JS-mätt variabel + calc per breakpoint)
   - punkterna, som skapas av JS och inte finns som Oxygen-element
   Breakpoints 992/768 = samma som i Oxygen UI.
   ============================================================ */

.card-carousel-section {
  overflow-x: hidden; /* äldre webbläsare */
  overflow-x: clip;   /* full-bleed-wrappern får inte skapa sidscroll */
}

.card-carousel {
  /* Fallback innan/utan JS – Oxygens sidbredd (uppmätt inner-wrap: 1400px).
     JS mäter den exakta innehållskanten → --carousel-measured. */
  --carousel-content: 1400px;
  /* Minsta indrag från skärmkanten när den mätta kanten är mindre (t.ex. under
     1400px där inner-wrappen saknar sidopadding) – Lucas fluid-värde 20→45px.
     JUSTERA INDRAGET HÄR, inte i trackens padding. */
  --carousel-min-inset: clamp(20px, -21.667px + 8.681vw, 45px);
  /* Effektiv offset = det största av mätt innehållskant och fluid-golvet.
     Styr startläge, slutläge, snäpp och kortbredd – allt hålls i synk. */
  --carousel-offset: max(
    var(--carousel-measured, calc((100vw - var(--carousel-content)) / 2)),
    var(--carousel-min-inset)
  );
  --carousel-gap: 48px; /* kortens mellanrum – ingår även i breddformeln */

  /* Explicit bredd krävs: Oxygens inner-wrap är flex column, och utan definit
     bredd växer diven till trackens max-content → maxTravel = 0 (drag låses). */
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);  /* full-bleed: klipp vid skärmkanterna */
  margin-right: calc(50% - 50vw);
  overflow-x: auto;               /* utan JS = nativ scroll */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--carousel-offset);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.card-carousel::-webkit-scrollbar { display: none; }

/* JS med GSAP tar över – stäng av nativ scroll/snäpp */
.card-carousel.is-enhanced {
  overflow: hidden;
  scroll-snap-type: none;
}

.card-carousel .card-carousel-track {
  display: flex;
  flex-direction: row;    /* slår Oxygens kolumn-default */
  align-items: stretch;   /* alla kort lika höga som det högsta */
  width: max-content;
  gap: var(--carousel-gap);
  /* topp = utrymme för citat-ikonens överhäng (får justeras i UI:t) */
  padding-top: 24px;
  padding-bottom: 0;
  /* vänster/höger = start-/slutläge vid innehållskanterna. !important för att
     UI-satta värden på ELEMENTET skrivs som id-regel och vinner annars över
     klass-CSS – geometrin här får aldrig slås ut (gav kort vid fönsterkanten). */
  padding-left: var(--carousel-offset) !important;
  padding-right: var(--carousel-offset) !important;
}

.card-carousel .card-carousel-track > * {
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* Kortbredd ≈ 2,3 synliga mellan innehållskanten och skärmens högerkant.
   Formel: (synlig bredd − antal hela gap) / antal synliga kort.
   Ändra siffrorna här om antalet synliga kort ska justeras. */
.card-carousel .testimonial-card {
  width: calc((100vw - var(--carousel-offset) - 2 * var(--carousel-gap)) / 2.3);
  box-sizing: border-box;
}

/* ---------- punkterna – JS-genererade, kan inte stylas i UI:t ---------- */

.card-carousel-section .card-carousel-dots {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.card-carousel-dots:empty { display: none; }

.card-carousel-dot {
  width: 24px;  /* generös klickyta – själva punkten ritas av ::before */
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.card-carousel-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D8D8D8;   /* inaktiv punkt */
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.card-carousel-dot:hover::before { background: #B5B5B5; }
.card-carousel-dot.is-active::before {
  background: #1C1C1C;   /* aktiv punkt */
  transform: scale(1.25);
}
.card-carousel-dot:focus-visible {
  outline: 2px solid #1C1C1C;
  outline-offset: 2px;
  border-radius: 50%;
}

/* ---------- breakpoints (samma som Oxygen UI) ---------- */

@media (max-width: 992px) {
  .card-carousel { --carousel-gap: 32px; }
  .card-carousel .testimonial-card {
    width: calc((100vw - var(--carousel-offset) - var(--carousel-gap)) / 1.8);
  }
}
@media (max-width: 768px) {
  .card-carousel { --carousel-gap: 20px; }
  .card-carousel .testimonial-card {
    width: calc((100vw - var(--carousel-offset) - var(--carousel-gap)) / 1.15);
  }
}
html.mm-lock {
  overflow: hidden;
}

/* ------------------------------------------------------------
   Hamburgarknappen  .mobile-menu-toggle
   Storlek/bakgrund/färg sätts i UI. Strecken ärver knappens
   textfärg (currentColor) – byt färg via Typography → Color.
   ------------------------------------------------------------ */
.mobile-menu-toggle {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
  z-index: 1001;   /* alltid klickbar ovanpå panelen (999) */
}

.mobile-menu-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Ikonytan: 18×18 med två streck */
.mobile-menu-toggle .mobile-menu-toggle-icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.mobile-menu-toggle .mobile-menu-toggle-bar {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
}

/* Stängt läge: övre strecket långt (högerställt), nedre kort (vänsterställt) */
.mobile-menu-toggle .mobile-menu-toggle-bar:first-child {
  top: 4px;
  right: 0;
  width: 18px;
}

.mobile-menu-toggle .mobile-menu-toggle-bar:last-child {
  top: 12px;
  left: 0;
  width: 9px;
}

/* Fallback utan GSAP: kryssläget via klass (inline-styles från GSAP vinner annars) */
.mobile-menu-toggle.is-open .mobile-menu-toggle-bar:first-child {
  top: 8px;
  width: 18px;
  transform: rotate(45deg);
}

.mobile-menu-toggle.is-open .mobile-menu-toggle-bar:last-child {
  top: 8px;
  left: 0;
  width: 18px;
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------
   Menypanelen  .mobile-menu-panel
   Bakgrundsfärg (rgba!), padding och innehållslayout sätts i UI.

   OBS: mekaniken gatas med :not(.oxygen-builder-body) så att
   panelen är SYNLIG och redigerbar som vanligt block inne i
   Oxygen-buildern – dold/fixed enbart på frontend.
   ------------------------------------------------------------ */
body:not(.oxygen-builder-body) .mobile-menu-panel {
  display: none;                        /* JS växlar till flex */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;                         /* headern läggs på 1000 i UI */
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Fallback utan GSAP: ren klassväxling */
body:not(.oxygen-builder-body) .mobile-menu-panel.is-open {
  display: flex;
}

/* ------------------------------------------------------------
   Valfritt: expanderbar grupp (chevron-rad som Orionix
   "Services"/"Pages"). Raden och typografin stylas i UI.
   ------------------------------------------------------------ */
.mobile-menu-group .mobile-menu-group-head {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body:not(.oxygen-builder-body) .mobile-menu-group .mobile-menu-sub {
  overflow: clip;
  height: 0;                            /* JS animerar till auto */
}

body:not(.oxygen-builder-body) .mobile-menu-group.is-open .mobile-menu-sub {
  height: auto;                         /* fallback utan GSAP */
}

/* Chevronen roteras av GSAP; ingen transition här */
.mobile-menu-group .mobile-menu-group-chevron {
  flex-shrink: 0;
}
/* Xamera knapp-animation (Radian-stil hover) – ENDAST mekanik.
   Stylesheet: "xamera-btn-anim" (Oxygen → Manage → Stylesheets).
   All övrig knappstyling ligger kvar i Oxygens UI på .btn/.btn_primary.
   .btn-anim-ready sätts av xamera-btn-anim.js först när GSAP initierat –
   utan JS/GSAP förblir knappen exakt som idag (CSS-hovern som fallback). */

/* Masker: text klipps vertikalt, ikon horisontellt */
body:not(.oxygen-builder-body) .btn-anim-ready .ct-text-block,
body:not(.oxygen-builder-body) .btn-anim-ready .ct-fancy-icon {
  overflow: hidden !important;
}

/* Textens animerade inner-span (skapas av JS) */
body:not(.oxygen-builder-body) .btn-anim-text {
  display: inline-block;
  will-change: transform;
}

/* Neutralisera UI-transitionen (0.1s ease-out) på de GSAP-animerade elementen –
   annars släpar CSS-transition efter GSAP:s inline-transform varje frame */
body:not(.oxygen-builder-body) .btn-anim-ready svg,
body:not(.oxygen-builder-body) .btn-anim-text {
  transition: none !important;
}
/* ============================================================
   Xamera – citat-slider, dragbar ENDAST på mobil  ·  ENDAST MEKANIK
   Stylesheet: "xamera-quote-slider" (Oxygen → Manage → Stylesheets)

   Ovanför brytpunkten (769px och uppåt) gör den här filen INGENTING –
   raden ligger kvar precis som du byggt den i Oxygens UI.
   Under brytpunkten tar mekaniken över: full-bleed, en flexrad i nowrap,
   fast kortbredd så nästa kort skymtar, drag/svep via JS.

   All kosmetik (bakgrund, padding, typografi, ikonens marginaler) sätts
   i Oxygen UI på klasserna. Här ligger bara det UI:t inte kan uttrycka.
   ============================================================ */

/* Sektionen får aldrig skapa sidscroll av full-bleed-wrappern.
   Gäller alla breakpoints – ofarligt på desktop. */


/* ============================================================
   MOBIL – här bor hela mekaniken
   Brytpunkt 768px = Oxygens "Phone Landscape"/mobil-brytpunkt.
   ============================================================ */
@media (max-width: 768px) {

  .quote-slider {
    /* ---------- JUSTERA HÄR ---------- */

    /* Hur mycket av nästa kort som skymtar. 1 = exakt ett kort fyller ytan,
       1.15 = ~15 % av nästa kort syns i högerkanten. Höj för mer peek. */
    --qs-visible: 1.15;

    /* Mellanrum mellan korten på mobil (ingår i breddformeln). */
    --qs-gap: 20px;

    /* Kortens indrag från skärmkanten = sidans fluid-marginal (fluid.style,
       20→45px mellan 480→768). Ändra INTE trackens padding – ändra den här. */
    --qs-min-inset: clamp(20px, -21.667px + 8.681vw, 45px);

    /* ---------- härledd geometri (rör helst inte) ---------- */

    /* Effektiv innehållskant: JS mäter .ct-section-inner-wrap → --qs-measured.
       Under 1400px saknar wrappen sidopadding → mätta kanten blir 0, då
       gäller fluid-golvet. Styr startläge, slutläge, snäpp och kortbredd. */
    --qs-offset: max(var(--qs-measured, 0px), var(--qs-min-inset));

    /* Explicit bredd krävs: Oxygens inner-wrap är flex column, och utan
       definit bredd växer diven till trackens max-content → drag låses. */
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    /* Utan JS/GSAP = nativ scroll med snäpp (innehållet är alltid nåbart). */
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--qs-offset);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .quote-slider::-webkit-scrollbar { display: none; }

  /* JS med GSAP tar över dragandet – stäng av nativ scroll/snäpp. */
  .quote-slider.is-enhanced {
    scroll-snap-type: none;
  }

  /* Dubbel selektor + !important: UI-värden på ELEMENT skrivs som id-regler
     och vinner annars över klass-CSS. Geometrin får aldrig slås ut. */
  .quote-slider .quote-slider-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;          /* alla kort lika höga som det högsta */
    width: max-content !important;
    gap: var(--qs-gap) !important;
    /* vänster/höger = start-/slutläge vid innehållskanten */
    padding-left: var(--qs-offset) !important;
    padding-right: var(--qs-offset) !important;
    /* topp = luft för citat-ikonens överhäng, fri att sätta i UI:t */
  }

  /* Kortbredd: (synlig yta från innehållskanten till skärmkanten − ett gap)
     delat på antalet synliga kort. Justeras via --qs-visible ovan. */
  .quote-slider .quote-slider-track > * {
    flex: 0 0 auto !important;
    width: calc(
      (100vw - var(--qs-offset) - var(--qs-gap)) / var(--qs-visible)
    ) !important;
    box-sizing: border-box;
    scroll-snap-align: start;
  }

  /* Bilder/ikoner ska inte kunna dras ut ur kortet under svep. */
  .quote-slider img {
    -webkit-user-drag: none;
    user-select: none;
  }
}
/* ============================================================
   Xamera – Slide-up modal (mekanik)
   Panel som slajdar upp från nederkanten (90 % av höjden) med
   mörk overlay ovanför. Generisk: flera modaler på samma sajt,
   en per data-modal-id.

   All kosmetik (färger, radier, padding, typografi) sätts i
   Oxygen UI på KLASSERNA. Här ligger BARA det UI:t inte kan
   uttrycka: fast positionering, panelens höjd, scrollytan,
   scroll-lås och fallback utan GSAP.

   Brytpunkt för draghandtaget: 768px (Oxygens phone-landscape),
   samma värde som DRAG_QUERY i xamera-modal.js.
   JS: xamera-modal.js
   ============================================================ */

:root {
  --modal-height: 90dvh;      /* JUSTERA HÄR – panelens höjd (90 % av viewporten) */
  --modal-max-width: 100%;    /* JUSTERA HÄR – t.ex. 900px för en centrerad panel */
  --modal-z: 10000;           /* JUSTERA HÄR – över headern (som ligger på 1000) */
}

/* --- Scroll-lås när en modal är öppen (JS sätter klassen på <html>) --- */
html.modal-lock {
  overflow: hidden;
}

html.modal-lock body {
  overflow: hidden;
  padding-right: var(--modal-scrollbar, 0px); /* ingen hoppande layout när scrollbaren försvinner */
}

/* ------------------------------------------------------------
   Roten  .site-modal
   Täcker hela viewporten och lägger panelen mot nederkanten.

   OBS: mekaniken gatas med :not(.oxygen-builder-body) så att
   modalen ligger kvar som ett vanligt, redigerbart block inne i
   buildern – dold/fixed enbart på frontend.
   OBS 2: sätt ALDRIG display på .site-modal i Oxygens UI – JS
   äger den växlingen.
   ------------------------------------------------------------ */
body:not(.oxygen-builder-body) .site-modal.site-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--modal-z);
  display: none;                 /* JS växlar till flex */
  flex-direction: column;        /* Oxygens .ct-div-block är redan kolumn – var explicit */
  justify-content: flex-end;     /* panelen mot nederkanten */
  align-items: center;           /* centrerad i sidled (spelar roll först vid --modal-max-width) */
  margin: 0 !important;
  width: 100% !important;
}

/* Fallback utan GSAP: ren klassväxling – modalen får aldrig dö */
body:not(.oxygen-builder-body) .site-modal.site-modal.is-open {
  display: flex;
}

/* ------------------------------------------------------------
   Overlayn  .site-modal-overlay
   Bakgrundsfärg (t.ex. rgba(20,20,20,0.55)) sätts i UI.
   ------------------------------------------------------------ */
body:not(.oxygen-builder-body) .site-modal-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0;
  cursor: pointer;               /* klick utanför stänger */
}

/* ------------------------------------------------------------
   Panelen  .site-modal-panel
   Bakgrund, radie, skugga och padding sätts i UI.
   Dubbel klass = vinner över Oxygens .ct-div-block-defaults.
   ------------------------------------------------------------ */
body:not(.oxygen-builder-body) .site-modal-panel.site-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--modal-max-width);
  height: 90vh;                  /* fallback för äldre webbläsare */
  height: var(--modal-height);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* radien ska klippa innehållet */
  will-change: transform;
}

body:not(.oxygen-builder-body) .site-modal-panel:focus {
  outline: none;                 /* panelen tar fokus vid öppning – ingen ring på det */
}

/* ------------------------------------------------------------
   Scrollytan  .site-modal-body
   Allt innehåll (formuläret) ligger här. Padding sätts i UI.
   ------------------------------------------------------------ */
body:not(.oxygen-builder-body) .site-modal-body.site-modal-body {
  flex: 1 1 auto;
  min-height: 0;                 /* annars växer den ur panelen istället för att scrolla */
  overflow-y: auto;
  overscroll-behavior: contain;  /* scrollen ska inte "läcka" ut till sidan bakom */
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------
   Draghandtaget  .site-modal-grab (mobil)
   Storlek/utseende sätts i UI. Visas bara ≤768px eftersom det är
   där dra-för-att-stänga är aktiverat i JS:et.
   ------------------------------------------------------------ */
.site-modal-grab {
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;            /* krävs för att Draggable ska få fånga touch */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.site-modal-grab:active {
  cursor: grabbing;
}

@media (min-width: 769px) {
  body:not(.oxygen-builder-body) .site-modal-grab {
    display: none;
  }
}

/* ------------------------------------------------------------
   Stängknappen  .site-modal-close
   (attributet data-modal-close fungerar likadant på vilket
   element som helst, t.ex. en "Avbryt"-knapp i formuläret)
   ------------------------------------------------------------ */
.site-modal-close {
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.site-modal-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   Tack-läge efter lyckad submit
   JS lägger .is-submitted på roten (window.xameraModal.onSubmitSuccess).
   Bygg två divar i panelen: .site-modal-form och .site-modal-thanks.
   I buildern syns båda – där ska de vara redigerbara.
   ------------------------------------------------------------ */
body:not(.oxygen-builder-body) .site-modal-thanks {
  display: none;
}

body:not(.oxygen-builder-body) .site-modal.is-submitted .site-modal-thanks {
  display: flex;
}

body:not(.oxygen-builder-body) .site-modal.is-submitted .site-modal-form {
  display: none;
}

.site-modal .ct-section-inner-wrap {
  width: 100%;
}
/* ============================================================================
   Xamera – tidslinje ("Vår historia")

   Stylesheet-namn i Oxygen: xamera-timeline
   JS: xamera-timeline.js

   Innehåller ENDAST mekanik + de få utseendevärden som inte går att uttrycka i
   Oxygens UI (aktivt/inaktivt årtal, plupp, linje). All annan kosmetik –
   typsnitt, storlekar, textfärg, avstånd, paddingar – sätts i UI:t på
   KLASSERNA. Ändra aldrig klassnamnen: de är JS-hookar.

   Geometrikritiska deklarationer har !important eftersom Oxygen skriver
   id-regler (#div_block-…) så fort man rör Layout på ett ELEMENT. Egenskaper
   som JS sätter inline (bredd på rail-inner, plupp, fyllnad, panelhöjd) har
   medvetet INGET !important – då hade stylesheetet vunnit över animationen.

   Brytpunkt för svep: 768px, samma värde som SWIPE_MAX i xamera-timeline.js.
   ============================================================================ */

:root {
  /* ----- JUSTERA HÄR ------------------------------------------------------ */
  --timeline-dot-size: 14px;              /* pluppens diameter                */
  --timeline-dot-color: var(--color-grey-900);          /* pluppens färg                    */
  --timeline-line-color: var(--color-grey-300);         /* linjen, ofylld del               */
  --timeline-line-fill-color: var(--color-grey-900);    /* linjen fram till pluppen         */
  --timeline-line-thickness: 1px;         /* linjens tjocklek                 */
  --timeline-year-min-width: 90px;        /* minsta bredd per årtal           */
  --timeline-year-opacity: 0.4;           /* inaktivt årtal                   */
  --timeline-year-active-opacity: 1;      /* aktivt årtal                     */
  --timeline-line-hit: 14px;              /* klickyta ovanför/under linjen    */
  /* ------------------------------------------------------------------------ */
}

/* ----------------------------------------------------------------- rot ---- */
.timeline.timeline {
  width: 100%;
}

/* ---------------------------------------------------------------- rail ---- */
/* Fönstret som årtalsraden ligger i. Klipper i sidled när årtalen inte får
   plats – då blir raden dragbar (GSAP) eller scrollbar (utan GSAP). */
.timeline-rail.timeline-rail {
  position: relative !important;
  width: 100% !important;
  max-width: 100%;
  overflow: hidden !important;
}

/* Fallback utan GSAP/Draggable: nativ horisontell scroll, dold scrollbar. */
.timeline-rail.is-scrollable {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.timeline-rail.is-scrollable::-webkit-scrollbar { display: none; }

/* Det som förflyttas vid drag. Bredden sätts av JS när årtalen inte får plats
   (därför inget !important på width). Padding i botten så att pluppen aldrig
   klipps bort av rail-ens overflow. */
.timeline-rail-inner.timeline-rail-inner {
  position: relative !important;
  display: block !important;
  width: 100%;
  padding-bottom: calc(var(--timeline-dot-size) / 2);
}

/* --------------------------------------------------------- årtalsraden ---- */
.timeline-years.timeline-years {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end;
  width: 100% !important;
}

.timeline-year.timeline-year {
  flex: 1 1 0 !important;
  min-width: var(--timeline-year-min-width);
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Årtal utan matchande innehållsblock döljs hellre än att bli en död knapp.
   (JS varnar i konsolen när det inträffar.) */
.timeline-year.is-unpaired { display: none !important; }

body:not(.oxygen-builder-body) .timeline-year {
  opacity: var(--timeline-year-opacity);
  transition: opacity 0.3s ease, color 0.3s ease;
}
body:not(.oxygen-builder-body) .timeline-year.is-active {
  opacity: var(--timeline-year-active-opacity);
}
@media (hover: hover) {
  body:not(.oxygen-builder-body) .timeline-year:hover { opacity: 1; }
}
.timeline-year:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}

/* -------------------------------------------------------------- linjen ---- */
.timeline-line.timeline-line {
  position: relative !important;
  width: 100% !important;
  height: var(--timeline-line-thickness);
  flex: 0 0 auto;
  background-color: var(--timeline-line-color);
  cursor: pointer;
}

/* Osynlig, större klickyta – linjen är 1px hög men ska gå att träffa. */
.timeline-line::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--timeline-line-hit) * -1);
  bottom: calc(var(--timeline-line-hit) * -1);
}

/* width sätts av JS/GSAP – inget !important. */
.timeline-line-fill.timeline-line-fill {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 0;
  background-color: var(--timeline-line-fill-color);
  pointer-events: none;
}

/* left sätts av JS i fallback-läget utan GSAP – inget !important där. */
.timeline-dot.timeline-dot {
  position: absolute !important;
  top: 50% !important;
  left: 0;
  width: var(--timeline-dot-size) !important;
  height: var(--timeline-dot-size) !important;
  margin: 0 !important;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: var(--timeline-dot-color);
  transform: translate(-50%, -50%); /* fallback – med GSAP ägs transformen av JS */
  pointer-events: none;
}

/* ----------------------------------------------------------- panelerna ---- */
.timeline-panels.timeline-panels {
  position: relative !important;
  width: 100% !important;
}

/* Bara under själva växlingen – annars ska inget kunna klippas. */
.timeline-panels.is-animating {
  overflow: hidden !important;
}

/* Frontend: ett år i taget. I buildern ligger alla paneler kvar synliga så att
   kunden kan redigera dem – det är meningen. */
body:not(.oxygen-builder-body) .timeline-panel:not(.is-active) {
  display: none !important;
}

.timeline-panel.timeline-panel {
  width: 100% !important;
}
/* ===========================================================================
   Xamera – bloggarkiv "Aktuellt"
   Bara mekanik + det som inte går att nå från Oxygens UI (kategoriväljaren
   ligger i ett Code Block). Rutnät, kort, typografi och pagineringens utseende
   sätts i UI:t på klasser.
   =========================================================================== */

/* --- Kategoriväljaren ---------------------------------------------------- */

.kategori-filter {
	/* JUSTERA HÄR */
	--filter-ram: #D8D8D8;
	--filter-ram-hover: #1A1A1A;
	--filter-text: #1A1A1A;
	--filter-bakgrund: #FFFFFF;
	--filter-radie: 2px;
	--filter-padding-y: 11px;
	--filter-padding-x: 16px;
	--filter-textstorlek: 14px;

	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.kategori-filter__select {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	font: inherit;
	font-size: var(--filter-textstorlek);
	line-height: 1.2;
	color: var(--filter-text);
	background-color: var(--filter-bakgrund);
	border: 1px solid var(--filter-ram);
	border-radius: var(--filter-radie);
	padding: var(--filter-padding-y) calc(var(--filter-padding-x) + 20px) var(--filter-padding-y) var(--filter-padding-x);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--filter-padding-x) center;
	cursor: pointer;
	transition: border-color .2s ease;
}

.kategori-filter__select:hover {
	border-color: var(--filter-ram-hover);
}

.kategori-filter__select:focus-visible {
	outline: 2px solid var(--filter-text);
	outline-offset: 2px;
}

/* Dold etikett – finns för skärmläsare och tangentbord, syns aldrig. */
.kategori-filter__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Syns bara i <noscript>, dvs. när JS är avstängt. */
.kategori-filter__knapp {
	font: inherit;
	font-size: var(--filter-textstorlek);
	color: var(--filter-text);
	background: var(--filter-bakgrund);
	border: 1px solid var(--filter-ram);
	border-radius: var(--filter-radie);
	padding: var(--filter-padding-y) var(--filter-padding-x);
	cursor: pointer;
}

/* --- Bytet av innehåll (sömlös filtrering) -------------------------------- */

/* Rutnätet tonas ner medan nästa uppsättning kort hämtas. Höjden ändras först
   när det nya innehållet är på plats, så sidan hoppar inte under hämtningen.
   JUSTERA HÄR: opaciteten styr hur tydlig laddningen känns. */
.post-grid {
	transition: opacity .18s ease;
}

.post-grid.is-laddar {
	opacity: .4;
	pointer-events: none;
}

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

/* Väljaren låses inte under bytet, men markören visar att något händer. */
.post-grid.is-laddar ~ * .kategori-filter__select,
.kategori-filter__select[disabled] {
	cursor: progress;
}

/* --- Pagineringen -------------------------------------------------------- */

/* Oxygen renderar pagineringen som SISTA BARNET i repeaterns lista. Utan den
   här raden blir den en rutnätscell bredvid korten i stället för en egen rad
   under dem. Geometrikritiskt → !important. */
.post-grid .oxy-repeater-pages-wrap {
	grid-column: 1 / -1 !important;
	flex-basis: 100% !important;
	width: 100% !important;
}

/* "…" är en <span>, inte en länk – Oxygens "Links Style" når den inte.
   Neutraliseras så att den inte ser ut som en klickbar sida. */
.post-grid .oxy-repeater-pages .page-numbers.dots {
	background: none;
	border: 0;
	pointer-events: none;
}

/* Pilarna ska bara vara tecken, utan ram/platta. Ta bort blocket om du hellre
   vill styla dem som vanliga sidnummer i UI:t. */
.post-grid .oxy-repeater-pages .page-numbers.prev,
.post-grid .oxy-repeater-pages .page-numbers.next {
	background: none;
	border: 0;
}

.arkiv-sektion .oxy-repeater-pages {
  gap: 20px;
}
.arkiv-sektion .page-numbers.current {
  display: flex;
  align-content: center;
  justify-content: center;
  border-radius: 2px;
  height: clamp(30px, 20.25px + 2.03125vw, 43px);
  width: clamp(30px, 20.25px + 2.03125vw, 43px);
}
.arkiv-sektion .page-numbers.dots {
  color: var(--color-grey-900);
}

/* --- Fallback: rutnätet -------------------------------------------------- */

/* Saknar din Oxygen-version grid-kontrollerna i Style → Layout? Avkommentera
   blocket nedan och hoppa över steg 8b i guiden. Annars: rör inte. */
/*
.post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

@media (max-width: 991px) {
	.post-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.post-grid { grid-template-columns: 1fr; }
}
*/.relativt-form {
	--xf-accent: #f7ea8f;        /* Xameras gula */
	--xf-accent-text: #2b2a28;   /* mörk text på gult */
	--xf-active-bg: #3a3835;     /* vald val-knapp */
	--xf-focus-ring: #3a3835;
}
.relativt-form .xf-buttons .xf-choice-label {
  min-height: 64px;
}
.relativt-form .xf-submit {
  width: 100%;
}/* =========================================================
   xamera-header-scroll.css  (v2)
   Mekanik för headerns scroll-läge: bakgrund tonas in och
   höjden krymper när sidan scrollas, och animeras tillbaka
   när man är uppe i toppen igen.

   v2: @property-regeln borttagen – Oxygens stylesheet-parser
   sväljer inte okända at-regler och kastade hela filen.
   Fallbacken utan GSAP animerar i stället height och opacity
   direkt, vilket ger samma resultat med vanlig CSS.

   Variablerna märkta JUSTERA HÄR är till för att skruva på.
   ========================================================= */

.site-header {
  /* 0 = toppläge, 1 = scrollat läge. Animeras av xamera-header-scroll.js */
  --header-shrink: 0;

  /* JUSTERA HÄR – headerns höjd i scrollat läge (topphöjden 100 → 80) */
  --header-h-scrolled: 80px;

  /* JUSTERA HÄR – bakgrunden i scrollat läge. Antracit #3F3F3F som RGB-trippel */
  --header-scroll-bg: 63, 63, 63;
  --header-scroll-alpha: 0.85;
  --header-scroll-blur: 12px;

  /* JUSTERA HÄR – hårfin linje under headern. Sätt none för att ta bort */
  --header-scroll-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);

  /* JUSTERA HÄR – hur långt headern flyttas upp i scrollat läge.
     Bara över 768px – på mobil ligger den kvar mot toppen. */
  --header-scroll-offset: -20px;
}

@media (max-width: 768px) {
  .site-header { --header-scroll-offset: 0px; }
}

/* Höjden går från --header-h-top till --header-h-scrolled.
   --header-h-top sätts av JS från headerns egen höjd i Oxygen-UI:t, så UI:t
   förblir sanningen för topphöjden – ändra den där, inte här. Topphöjden är
   fluid (clamp 80–100), så under ca 480px är den redan 80 och då krymper
   headern inte alls – bakgrunden tonas fortfarande in.
   !important eftersom Oxygens UI-höjd skrivs som en id-regel. */
html.header-scroll-ready .site-header {
  height: calc(
    var(--header-h-top, 100px) +
    (var(--header-h-scrolled) - var(--header-h-top, 100px)) * var(--header-shrink)
  ) !important;
  /* Lyftet uppåt i scrollat läge – samma variabel, så det sker i takt med resten. */
  margin-top: calc(var(--header-scroll-offset) * var(--header-shrink)) !important;
}

/* Bakgrundslagret ligger i en pseudo så att headern själv kan vara
   helt transparent i UI:t och bakgrunden bara är ett scroll-läge. */
html.header-scroll-ready .site-header::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--header-shrink);
  background: rgba(var(--header-scroll-bg), var(--header-scroll-alpha));
  -webkit-backdrop-filter: blur(var(--header-scroll-blur));
  backdrop-filter: blur(var(--header-scroll-blur));
  box-shadow: var(--header-scroll-shadow);
}

/* Innehållet ska ligga ovanför bakgrundslagret. */
html.header-scroll-ready .site-header > .ct-section-inner-wrap {
  position: relative;
  z-index: 1;
}

/* Fallback utan GSAP: klassen is-scrolled ställer om variabeln och
   höjd + opacitet animeras av vanliga CSS-transitions.
   Gatad på :not(.header-scroll-gsap) så att den aldrig kan
   slåss med GSAP:s inline-värden. */
html:not(.header-scroll-gsap) .site-header {
  transition:
    height 0.4s cubic-bezier(0.33, 1, 0.68, 1),
    margin-top 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

html:not(.header-scroll-gsap) .site-header::before {
  transition: opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

html:not(.header-scroll-gsap) .site-header.is-scrolled {
  --header-shrink: 1;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.header-scroll-gsap) .site-header,
  html:not(.header-scroll-gsap) .site-header::before {
    transition: none;
  }
}/* Xamera – kopiera till urklipp – ENDAST mekanik.
   Stylesheet: "xamera-copy" (Oxygen → Manage → Stylesheets).
   All utseendestyling (bakgrund, radie, padding, ikonfärg, storlek) ligger
   kvar i Oxygens UI på .copy-item / .copy-btn.
   Bocken (.copy-check) injiceras av xamera-copy.js – finns alltså inte i buildern. */

/* Klickytan */
body:not(.oxygen-builder-body) .copy-btn {
  position: relative !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Tangentbordsfokus – JUSTERA HÄR om du vill ha annan färg/offset */
body:not(.oxygen-builder-body) .copy-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

/* Bocken centreras ovanpå kopiera-ikonen utan transform
   (transform lämnas fri åt GSAP) */
body:not(.oxygen-builder-body) .copy-btn .copy-check {
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  opacity: 0;
  pointer-events: none;
}

/* Fallback utan GSAP: ren CSS-övergång.
   JS sätter .copy-anim-gsap när GSAP finns – då styr GSAP i stället. */
body:not(.oxygen-builder-body) .copy-btn:not(.copy-anim-gsap) .copy-check,
body:not(.oxygen-builder-body) .copy-btn:not(.copy-anim-gsap) .copy-icon {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body:not(.oxygen-builder-body) .copy-btn:not(.copy-anim-gsap) .copy-check {
  transform: scale(0.6);
}

body:not(.oxygen-builder-body) .copy-btn.is-copied:not(.copy-anim-gsap) .copy-check {
  opacity: 1;
  transform: scale(1);
}

body:not(.oxygen-builder-body) .copy-btn.is-copied:not(.copy-anim-gsap) .copy-icon {
  opacity: 0;
  transform: scale(0.6);
}

@media (prefers-reduced-motion: reduce) {
  body:not(.oxygen-builder-body) .copy-btn:not(.copy-anim-gsap) .copy-check,
  body:not(.oxygen-builder-body) .copy-btn.is-copied:not(.copy-anim-gsap) .copy-check,
  body:not(.oxygen-builder-body) .copy-btn.is-copied:not(.copy-anim-gsap) .copy-icon {
    transform: none;
  }
}/* ==========================================================================
   Xamera - Hjältevideo
   Mekanik-CSS. All styling som GÅR att sätta i Oxygens UI sätts där, på klasser.
   Den här filen håller bara geometrin som UI:t inte klarar.

   Fungerar för båda varianterna:
   - egen fil i ett <video> (det vi kör nu)
   - Vimeo i en <iframe> (reservvägen, reglerna ligger kvar längre ned)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Designvärden - JUSTERA HÄR
   -------------------------------------------------------------------------- */
.hero-video-section {
  /* Overlayens färg. Kan även sättas i Oxygens UI på klassen .hero-overlay,
     UI-värdet vinner då över det här. */
  --hero-overlay-color: rgba(0, 0, 0, 0.6);

  /* Videons bildförhållande. 56.25 = 100 / (16/9), 177.78 = (16/9) * 100.
     Är källfilmen 21:9: sätt 42.857 respektive 233.33. */
  --hero-video-ratio-h: 56.25;
  --hero-video-ratio-w: 177.78;

  /* Bakgrund bakom videon medan den laddar. Ligger under overlayen. */
  --hero-video-bg: #1a1a1a;
}

/* --------------------------------------------------------------------------
   Sektionen - skyddsnät. Sätt hellre position och overflow i Oxygens UI.
   -------------------------------------------------------------------------- */
.hero-video-section.hero-video-section {
  position: relative;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Videolagret
   Absolut mot SEKTIONEN, inte mot .ct-section-inner-wrap (den är statisk).
   Ligger utanför flödet, så inner-wrappens flex column påverkar den inte.
   -------------------------------------------------------------------------- */
.hero-media.hero-media {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 0;

  overflow: hidden;
  pointer-events: none;

  background-color: var(--hero-video-bg, #1a1a1a);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  /* Gör lagret till en storleks-container så iframen kan räkna cover
     mot sektionen i stället för mot viewporten. */
  container-type: size;
}

/* Oxygens Code Block-wrapper ska inte lägga sig i geometrin. */
.hero-media .oxy-code-block {
  position: static;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Videon - egen fil
   Ett riktigt <video> klarar object-fit, så här behövs ingen räknekonst.
   -------------------------------------------------------------------------- */
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  pointer-events: none;
  display: block;
}

/* --------------------------------------------------------------------------
   Iframen - cover-beskärning (bara om vi går tillbaka till Vimeo)
   object-fit fungerar inte på iframe, därför den här räknekonsten.
   Två uppsättningar: viewport-baserad som fallback, container-baserad som
   vinner i webbläsare som kan cq-enheter. Den senare är exakt även när
   sektionen inte är lika hög som fönstret.
   -------------------------------------------------------------------------- */
.hero-media iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;

  /* Fallback */
  width: 100vw;
  height: calc(var(--hero-video-ratio-h, 56.25) * 1vw);
  min-width: calc(var(--hero-video-ratio-w, 177.78) * 1vh);
  min-height: 100vh;

  /* Exakt mot sektionen */
  width: 100cqw;
  height: calc(var(--hero-video-ratio-h, 56.25) * 1cqw);
  min-width: calc(var(--hero-video-ratio-w, 177.78) * 1cqh);
  min-height: 100cqh;
}

/* --------------------------------------------------------------------------
   Overlayen
   -------------------------------------------------------------------------- */
.hero-overlay.hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1;

  pointer-events: none;
  background-color: var(--hero-overlay-color, rgba(0, 0, 0, 0.6));
}

/* --------------------------------------------------------------------------
   Innehållet ovanpå
   Kan lika gärna sättas i Oxygens UI på .hero-content (Position relative,
   z-index 2). Ligger här som skyddsnät.
   -------------------------------------------------------------------------- */
.hero-content.hero-content {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Mobil
   Under 768 laddas ingen video. Kvar blir .hero-media:s bakgrundsbild
   (sätts i Oxygens UI på klassen) plus overlayen.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .hero-media video,
  .hero-media iframe {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Reducerad rörelse
   Postern på .hero-media visas i stället.
   OBS: display:none stoppar INTE nedladdningen av filen. Det gör i stället
   snutten i Code Blocket, som bara sätter source-src när villkoren håller.
   Reglerna här är andra lagret, se guiden.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-media video,
  .hero-media iframe {
    display: none;
  }
}