.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: 1360px;
}
body {font-family: 'DM Sans';}body {line-height: 1.6;font-size: 15px;font-weight: 400;color: #404040;}.oxy-nav-menu-hamburger-line {background-color: #404040;}h1, h2, h3, h4, h5, h6 {font-family: 'DM Sans';font-size: 56px;font-weight: 400;color: #262325;}h2, h3, h4, h5, h6{font-size: 46px;font-weight: 400;color: #262325;}h3, h4, h5, h6{font-size: 40px;font-weight: 400;color: #262325;}h4, h5, h6{font-size: 28px;font-weight: 400;color: #262325;}h5, h6{font-size: 22px;color: #262325;}h6{font-size: 16px;color: #262325;}a {color: #0074db;text-decoration: none;}a:hover {text-decoration: none;}.ct-link-text {text-decoration: ;}.ct-link {text-decoration: ;}.ct-link-button {border-radius: 3px;}.ct-section-inner-wrap {
padding-top: 75px;
padding-right: 20px;
padding-bottom: 75px;
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;
				}
			}
.mosaic-grid {
}
.mosaic-tile {
background-size: cover; width:25%;
 height:320px;
 background-position:50% 50%;
 border-top-color:#ffffff;
 border-right-color:#ffffff;
 border-bottom-color:#ffffff;
 border-left-color:#ffffff;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
}
@media (max-width: 991px) {
.mosaic-tile {
 width:50%;
 height:290px;
}
}

@media (max-width: 767px) {
.mosaic-tile {
 width:50%;
 height:200px;
}
}

@media (max-width: 479px) {
.mosaic-tile {
 height:200px;
}
}

.mosaic-text {
 background-color:#262325;
 padding-top:40px;
 padding-bottom:40px;
 padding-left:44px;
 padding-right:44px;
 gap:12px;
}
.mosaic-text:not(.ct-section):not(.oxy-easy-posts),
.mosaic-text.oxy-easy-posts .oxy-posts,
.mosaic-text.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:12px;
}
@media (max-width: 767px) {
.mosaic-text {
 padding-top:20px;
 padding-bottom:20px;
 padding-left:20px;
 padding-right:20px;
 gap:8px;
}
.mosaic-text:not(.ct-section):not(.oxy-easy-posts),
.mosaic-text.oxy-easy-posts .oxy-posts,
.mosaic-text.ct-section .ct-section-inner-wrap{
gap:8px;
}
}

.mosaic-container {
 gap:16px;
 max-width:171px;
}
.mosaic-container:not(.ct-section):not(.oxy-easy-posts),
.mosaic-container.oxy-easy-posts .oxy-posts,
.mosaic-container.ct-section .ct-section-inner-wrap{
gap:16px;
}
.mosaic-title {
 color:#ffffff;
 font-size:26px;
 font-weight:400;
 line-height:130%;
}
@media (max-width: 767px) {
.mosaic-title {
 font-size:18px;
}
}

.mosaic-body {
 color:#e5e2db;
 font-size:16px;
 line-height:1.6;
}
@media (max-width: 767px) {
.mosaic-body {
 font-size:13px;
 line-height:16px;
}
}

.oxel_icon_button__container:hover{
 background-color:#cfd3d7;
}
.oxel_icon_button__container {
 padding-top:8px;
 padding-left:16px;
 padding-right:16px;
 padding-bottom:8px;
 transition-duration:0.3s;
 border-radius:50px;
 background-color:#cd734f;
}
.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 {
}
@media (max-width: 767px) {
.oxel_icon_button_text {
 font-size:14px;
}
}

.oxel_icon_button_icon {
color: #333333;}.oxel_icon_button_icon 
>svg {width: 20px;height: 20px;}.oxel_icon_button_icon {
 margin-right:8px;
}
.grid-indent-section {
}
.parallax-section {
}
.parallax-layer {
}
.checklist-item {
 gap:8px;
}
.checklist-item:not(.ct-section):not(.oxy-easy-posts),
.checklist-item.oxy-easy-posts .oxy-posts,
.checklist-item.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
gap:8px;
}
@media (max-width: 479px) {
.checklist-item {
 gap:7px;
}
.checklist-item:not(.ct-section):not(.oxy-easy-posts),
.checklist-item.oxy-easy-posts .oxy-posts,
.checklist-item.ct-section .ct-section-inner-wrap{
gap:7px;
}
}

.checklist-icon {
 width:22px;
 height:24px;
}
@media (max-width: 767px) {
.checklist-icon {
 width:17px;
 height:20px;
}
}

@media (max-width: 479px) {
.checklist-icon {
 width:16px;
 height:20px;
}
}

.solid-btn-orange:hover{
 background-color:#ffffff;
 color:#cd734f;
 border-top-color:#cd734f;
 border-right-color:#cd734f;
 border-bottom-color:#cd734f;
 border-left-color:#cd734f;
}
.solid-btn-orange {
 color:#ffffff;
 background-color:#cd734f;
 padding-left:22px;
 padding-right:22px;
 padding-top:8px;
 padding-bottom:8px;
 border-radius:50px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-top-color:#cd734f;
 border-right-color:#cd734f;
 border-bottom-color:#cd734f;
 border-left-color:#cd734f;
 transition-duration:0.3s;
}
@media (max-width: 767px) {
.solid-btn-orange {
}
}

@media (max-width: 479px) {
.solid-btn-orange {
 padding-top:5px;
 padding-bottom:5px;
}
}

.contained {
}
.product-card {
 gap:12px;
 min-width:0px;
 width:280px;
 flex-shrink:0;
}
.product-card:not(.ct-section):not(.oxy-easy-posts),
.product-card.oxy-easy-posts .oxy-posts,
.product-card.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
gap:12px;
}
@media (max-width: 767px) {
.product-card {
 flex-grow:0;
 flex-shrink:0;
}
}

.product-media {
 background-color:#d9d8d4;
}
.product-img {
}
.product-body {
}
.product-cat {
 color:#000000;
 padding-right:0px;
}
@media (max-width: 767px) {
.product-cat {
}
}

.product-name {
 font-size:22px;
 color:#262325;
}
@media (max-width: 767px) {
.product-name {
 font-size:18px;
}
}

.product-btns {
}
.ghost-btn-black:hover{
 background-color:#858271;
 border-top-color:#858271;
 border-right-color:#858271;
 border-bottom-color:#858271;
 border-left-color:#858271;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 color:#ffffff;
}
.ghost-btn-black {
 color:#262325;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-radius:50px;
 padding-left:22px;
 padding-right:22px;
 padding-top:2px;
 padding-bottom:2px;
 border-top-color:#d9d9d9;
 border-right-color:#d9d9d9;
 border-bottom-color:#d9d9d9;
 border-left-color:#d9d9d9;
 transition-duration:0.2s;
 box-shadow:0px 0px 2px rgba(0,0,0,0.25);
}
@media (max-width: 479px) {
.ghost-btn-black {
 padding-top:5px;
 padding-bottom:5px;
}
}

.product-isi {
}
.products-pad {
}
.slider-arrows {
}
.align-right-to-container {
}
.slider-arrow {
 width:30px;
 height:30px;
 border-radius:50px;
 border-top-style:solid;
 border-top-width:1px;
 border-top-color:#262325;
 border-right-style:solid;
 border-right-width:1px;
 border-right-color:#262325;
 border-bottom-style:solid;
 border-bottom-width:1px;
 border-bottom-color:#262325;
 border-left-style:solid;
 border-left-width:1px;
 border-left-color:#262325;
 cursor:pointer;
 flex-shrink:0;
}
.slider-arrow:not(.ct-section):not(.oxy-easy-posts),
.slider-arrow.oxy-easy-posts .oxy-posts,
.slider-arrow.ct-section .ct-section-inner-wrap{
display:flex;
align-items:center;
justify-content:center;
}
.arrow-prev {
}
.arrow-next {
}
.sci-card-link {
}
.sci-card-img {
}
.sci-card-body {
}
.sci-card-title {
}
.sci-card-blurb {
 font-weight:400;
}
.sci-card-meta {
}
.sci-card-read {
 font-size:13px;
 font-weight:400;
 color:#545454;
}
.sci-card-arrow {
 color:#545454;
}
.science-pad {
}
.article-body {
}
.article-body-inner {
}
.article-featured {
}
.article-featured-img {
}
.article-content {
}
.article-hero {
}
.article-hero-inner {
}
.article-hero-main {
}
.article-crumb {
}
.article-title {
}
.article-meta {
}
.article-reviewer {
}
.cat-body {
}
.cat-body:not(.ct-section):not(.oxy-easy-posts),
.cat-body.oxy-easy-posts .oxy-posts,
.cat-body.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
.cat-intro-wrap {
}
.cat-intro {
 max-width:658px;
 color:#000000;
}
@media (max-width: 767px) {
.cat-intro {
}
}

@media (max-width: 479px) {
.cat-intro {
}
}

.cat-pagination-outer {
}
.cat-hero {
}
.cat-hero-overlay {
}
.cat-hero-inner {
}
.cat-hero-crumb {
 color:#ffffff;
 font-size:12px;
 font-weight:700;
 letter-spacing:1px;
}
@media (max-width: 479px) {
.cat-hero-crumb {
 font-size:10px;
}
}

.cat-hero-title {
 color:#ffffff;
 font-size:46px;
 font-weight:500;
 line-height:56px;
}
@media (max-width: 991px) {
.cat-hero-title {
 font-size:42px;
}
}

@media (max-width: 767px) {
.cat-hero-title {
 font-size:36px;
}
}

@media (max-width: 479px) {
.cat-hero-title {
 font-size:30px;
 line-height:130%;
}
}

.sci-pad {
}
.sci-label {
}
.sci-slider-title {
}
.sci-arrows-wrap {
}
.sci-track {
}
.slider-track {
}
.sci-pad-right {
}
.sci-tile {
background-size: cover; background-position:50% 50%;
 position:relative;
}
.sci-tile:not(.ct-section):not(.oxy-easy-posts),
.sci-tile.oxy-easy-posts .oxy-posts,
.sci-tile.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
.sci-tile-label {
 color:#ffffff;
 font-weight:500;
 padding-left:25px;
 padding-top:20px;
}
@media (max-width: 991px) {
.sci-tile-label {
}
}

@media (max-width: 479px) {
.sci-tile-label {
 padding-left:12px;
 padding-top:9px;
}
}

.sci-tile-btn {
}
.product-banner-section {
}
.product-banner-block {
}
.stepper-container {
 gap:20px;
}
.stepper-container:not(.ct-section):not(.oxy-easy-posts),
.stepper-container.oxy-easy-posts .oxy-posts,
.stepper-container.ct-section .ct-section-inner-wrap{
gap:20px;
}
.step {
 gap:15px;
 text-align:right;
}
.step:not(.ct-section):not(.oxy-easy-posts),
.step.oxy-easy-posts .oxy-posts,
.step.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
justify-content:flex-start;
gap:15px;
}
.step-indicator {
 border-top-color:#000000;
 border-right-color:#000000;
 border-bottom-color:#000000;
 border-left-color:#000000;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-radius:100px;
 font-size:18px;
 font-weight:700;
 text-align:center;
 color:#000000;
}
@media (max-width: 1360px) {
.step-indicator {
}
}

@media (max-width: 991px) {
.step-indicator {
}
}

@media (max-width: 767px) {
.step-indicator {
 font-size:15px;
 font-weight:600;
}
}

@media (max-width: 479px) {
.step-indicator {
}
}

.step-content {
 width:100%;
}
.step-content:not(.ct-section):not(.oxy-easy-posts),
.step-content.oxy-easy-posts .oxy-posts,
.step-content.ct-section .ct-section-inner-wrap{
display:flex;
}
.work-h1 {
 font-size:20px;
 font-weight:400;
 text-transform:capitalize;
}
.step-title {
 font-size:20px;
 font-weight:500;
 color:#000000;
}
@media (max-width: 479px) {
.step-title {
 font-weight:400;
 line-height:1;
 margin-bottom:6px;
}
}

.work-h2 {
 line-height:20px;
 text-align:left;
}
.step-desc {
 font-size:15px;
 color:#000000;
 max-width:420px;
}
@media (max-width: 767px) {
.step-desc {
 max-width:768px;
}
}

.error404-eyebrow {
 color:#cd734f;
 font-weight:600;
 letter-spacing:2pxpx;
 text-transform:uppercase;
 margin-bottom:16px;
 font-size:24px;
}
@media (max-width: 767px) {
.error404-eyebrow {
 font-size:20px;
}
}

@media (max-width: 479px) {
.error404-eyebrow {
 font-size:18px;
}
}

.accent-orange {
}
.docs-track {
 gap:45px;
 width:100%;
}
.docs-track:not(.ct-section):not(.oxy-easy-posts),
.docs-track.oxy-easy-posts .oxy-posts,
.docs-track.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
justify-content:center;
gap:45px;
}
@media (max-width: 991px) {
.docs-track {
 gap:32px;
}
.docs-track:not(.ct-section):not(.oxy-easy-posts),
.docs-track.oxy-easy-posts .oxy-posts,
.docs-track.ct-section .ct-section-inner-wrap{
gap:32px;
}
}

@media (max-width: 767px) {
.docs-track {
 gap:17px;
 flex-grow:0;
 flex-shrink:0;
}
.docs-track:not(.ct-section):not(.oxy-easy-posts),
.docs-track.oxy-easy-posts .oxy-posts,
.docs-track.ct-section .ct-section-inner-wrap{
justify-content:flex-start;
gap:17px;
}
}

@media (max-width: 479px) {
.docs-track {
}
}

.doctor-card {
 width:248px;
 flex-shrink:0;
}
.doctor-card:not(.ct-section):not(.oxy-easy-posts),
.doctor-card.oxy-easy-posts .oxy-posts,
.doctor-card.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
@media (max-width: 991px) {
.doctor-card {
 flex-shrink:1;
 flex-grow:1;
 max-width:248px;
}
}

@media (max-width: 767px) {
.doctor-card {
 width:200px;
 flex-grow:0;
 flex-shrink:0;
}
}

@media (max-width: 479px) {
.doctor-card {
}
}

.doctor-photo {
 width:100%;
 object-fit:cover;
 height:auto;
}
.doctor-name {
 font-size:22px;
 color:#262325;
 margin-top:13px;
 font-weight:500;
}
@media (max-width: 479px) {
.doctor-name {
 font-size:16px;
}
}

.doctor-cred {
 font-size:15px;
 font-weight:500;
 color:#262325;
 margin-top:4px;
}
@media (max-width: 479px) {
.doctor-cred {
 font-size:13px;
 margin-top:2px;
}
}

.doctor-bio {
 font-size:14px;
 color:#262325;
 margin-top:12px;
 line-height:18px;
 margin-bottom:24px;
}
@media (max-width: 479px) {
.doctor-bio {
 font-size:13px;
 line-height:15px;
 margin-top:8px;
}
}

.btn-outline-white:hover{
 background-color:#ffffff;
 color:#858271;
}
.btn-outline-white {
 color:#ffffff;
 border-radius:26px;
 border-top-style:solid;
 border-top-width:1px;
 border-top-color:#ffffff;
 border-right-style:solid;
 border-right-width:1px;
 border-right-color:#ffffff;
 border-bottom-style:solid;
 border-bottom-width:1px;
 border-bottom-color:#ffffff;
 border-left-style:solid;
 border-left-width:1px;
 border-left-color:#ffffff;
 padding-top:8px;
 padding-bottom:8px;
 padding-left:22px;
 padding-right:22px;
 font-weight:500;
 text-align:center;
 transition-duration:0.3s;
 font-size:14px;
}
.btn-orange-pill {
 background-color:#cd734f;
 color:#ffffff;
 border-radius:26px;
 padding-top:5px;
 padding-bottom:5px;
 padding-left:22px;
 padding-right:22px;
 font-size:14px;
 font-weight:500;
 text-align:center;
}
@media (max-width: 767px) {
.btn-orange-pill {
 font-size:10px;
 padding-left:14px;
 padding-right:14px;
}
}

.story-copy {
 font-size:20px;
 line-height:30px;
 text-align:center;
 max-width:560px;
 color:#000000;
 font-weight:400;
}
@media (max-width: 767px) {
.story-copy {
 font-size:18px;
}
}

@media (max-width: 479px) {
.story-copy {
 font-size:16px;
}
}

.story-tile {
background-size: cover; width:25%;
 height:260px;
 background-position:50% 50%;
 border-top-color:#ffffff;
 border-right-color:#ffffff;
 border-bottom-color:#ffffff;
 border-left-color:#ffffff;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
}
.story-tile:not(.ct-section):not(.oxy-easy-posts),
.story-tile.oxy-easy-posts .oxy-posts,
.story-tile.ct-section .ct-section-inner-wrap{
display:flex;
align-items:flex-start;
justify-content:flex-start;
}
@media (max-width: 991px) {
.story-tile {
 width:50%;
}
}

@media (max-width: 767px) {
.story-tile {
 width:50%;
 height:199px;
 padding-top:0px;
}
}

.story-tile-label {
 font-weight:400;
 font-size:28px;
}
@media (max-width: 767px) {
.story-tile-label {
 font-size:18px;
}
}

.solid-btn-green:hover{
 background-color:#ffffff;
 color:#858271;
}
.solid-btn-green {
 color:#ffffff;
 padding-left:22px;
 padding-right:22px;
 padding-top:8px;
 padding-bottom:8px;
 border-radius:50px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 transition-duration:0.3s;
 background-color:#858271;
 border-top-color:#858271;
 border-right-color:#858271;
 border-bottom-color:#858271;
 border-left-color:#858271;
}
@media (max-width: 767px) {
.solid-btn-green {
 padding-top:5px;
 padding-bottom:5px;
}
}

@media (max-width: 479px) {
.solid-btn-green {
 padding-top:5px;
 padding-bottom:5px;
}
}

.category-gradient {
}
.cat-products-track {
}
.product-safety {
 font-size:12px;
 color:#545454;
}
@media (max-width: 767px) {
.product-safety {
 font-size:10px;
}
}

.btn-outline-pill {
 color:#262325;
 border-radius:26px;
 border-top-style:solid;
 border-top-width:1px;
 border-top-color:#ffffff;
 border-right-style:solid;
 border-right-width:1px;
 border-right-color:#ffffff;
 border-bottom-style:solid;
 border-bottom-width:1px;
 border-bottom-color:#ffffff;
 border-left-style:solid;
 border-left-width:1px;
 border-left-color:#ffffff;
 padding-top:5px;
 padding-bottom:5px;
 padding-left:22px;
 padding-right:22px;
 font-size:14px;
 font-weight:500;
 text-align:center;
}
@media (max-width: 767px) {
.btn-outline-pill {
 font-size:10px;
 padding-left:14px;
 padding-right:14px;
}
}

.step-circle {
 width:24px;
 height:24px;
 border-radius:50px;
 border-top-style:solid;
 border-top-width:1px;
 border-top-color:#262325;
 border-right-style:solid;
 border-right-width:1px;
 border-right-color:#262325;
 border-bottom-style:solid;
 border-bottom-width:1px;
 border-bottom-color:#262325;
 border-left-style:solid;
 border-left-width:1px;
 border-left-color:#262325;
 font-size:12px;
 color:#262325;
 flex-shrink:0;
 text-align:center;
}
.step-circle:not(.ct-section):not(.oxy-easy-posts),
.step-circle.oxy-easy-posts .oxy-posts,
.step-circle.ct-section .ct-section-inner-wrap{
display:flex;
align-items:center;
justify-content:center;
}
.science-track {
 width:100%;
 gap:24px;
}
.science-track:not(.ct-section):not(.oxy-easy-posts),
.science-track.oxy-easy-posts .oxy-posts,
.science-track.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
gap:24px;
}
.blog-card {
 width:287px;
 flex-shrink:0;
 background-color:#f0f0f0;
}
.blog-card:not(.ct-section):not(.oxy-easy-posts),
.blog-card.oxy-easy-posts .oxy-posts,
.blog-card.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
@media (max-width: 767px) {
.blog-card {
 width:155px;
}
}

.blog-img-box {
 background-color:#545454;
 width:100%;
 height:180px;
}
@media (max-width: 767px) {
.blog-img-box {
 height:115px;
}
}

.blog-content {
 padding-top:16px;
 padding-bottom:16px;
 padding-left:26px;
 padding-right:26px;
 gap:8px;
 flex-grow:1;
}
.blog-content:not(.ct-section):not(.oxy-easy-posts),
.blog-content.oxy-easy-posts .oxy-posts,
.blog-content.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
gap:8px;
}
@media (max-width: 767px) {
.blog-content {
 padding-left:14px;
 padding-right:14px;
 padding-top:10px;
 padding-bottom:10px;
}
}

.blog-title {
 font-size:22px;
 font-weight:400;
 color:#262325;
}
@media (max-width: 767px) {
.blog-title {
 font-size:16px;
}
}

.blog-blurb {
 font-size:12px;
 color:#262325;
}
@media (max-width: 767px) {
.blog-blurb {
 font-size:10px;
}
}

.blog-meta-row {
 margin-top:8px;
}
.blog-meta-row:not(.ct-section):not(.oxy-easy-posts),
.blog-meta-row.oxy-easy-posts .oxy-posts,
.blog-meta-row.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;
}
.blog-read {
 font-size:12px;
 font-weight:600;
 color:#545454;
}
@media (max-width: 767px) {
.blog-read {
 font-size:10px;
}
}

.products-track {
 width:100%;
 gap:24px;
}
.products-track:not(.ct-section):not(.oxy-easy-posts),
.products-track.oxy-easy-posts .oxy-posts,
.products-track.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
gap:24px;
}
.doctors-track {
}
.doctor-container {
 padding-top:20px;
 padding-right:20px;
 padding-bottom:20px;
 padding-left:20px;
 min-width:250px;
 gap:14px;
 transition-duration:0.3s;
}
.doctor-container:not(.ct-section):not(.oxy-easy-posts),
.doctor-container.oxy-easy-posts .oxy-posts,
.doctor-container.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
gap:14px;
}
@media (max-width: 767px) {
.doctor-container {
 padding-left:14px;
 padding-right:14px;
}
}

.dr-img-home {
 object-fit:cover;
}
@media (max-width: 991px) {
.dr-img-home {
}
}

@media (max-width: 767px) {
.dr-img-home {
}
}

.dr-content {
 max-width:250px;
}
.dr-name {
 color:#000000;
}
@media (max-width: 991px) {
.dr-name {
 color:#000000;
 font-weight:500;
}
}

.dr-creds {
 font-size:17px;
 margin-bottom:16px;
 color:#000000;
}
@media (max-width: 991px) {
.dr-creds {
 font-size:15px;
 color:#000000;
 font-weight:400;
}
}

.dr-bio {
 color:#000000;
}
@media (max-width: 991px) {
.dr-bio {
 color:#000000;
}
}

.info-card:hover{
 transition-duration:0.6s;
}
.info-card {
 position:relative;
 height:280px;
 width:50%;
 text-align:center;
 border-top-color:#ffffff;
 border-right-color:#ffffff;
 border-bottom-color:#ffffff;
 border-left-color:#ffffff;
 border-top-width:0.5px;
 border-right-width:0.5px;
 border-bottom-width:0.5px;
 border-left-width:0.5px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 transition-duration:0.6s;
}
.info-card:not(.ct-section):not(.oxy-easy-posts),
.info-card.oxy-easy-posts .oxy-posts,
.info-card.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
@media (max-width: 991px) {
.info-card {
}
}

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

.dark-info-card:hover{
 background-color:#858271;
}
.dark-info-card {
 background-color:#262325;
}
.primary-text {
 color:#ffffff;
 letter-spacing:0%;
 line-height:120%;
 font-size:28px;
}
@media (max-width: 991px) {
.primary-text {
 font-size:26px;
}
}

@media (max-width: 767px) {
.primary-text {
 max-width:200px;
 font-size:22px;
}
}

@media (max-width: 479px) {
.primary-text {
 font-size:18px;
}
}

.secondary-text:hover{
 transition-duration:0.3s;
}
.secondary-text {
 font-size:15px;
 font-weight:400;
 line-height:20px;
 max-width:200px;
 color:#ffffff;
 position:absolute;
 opacity:0;
 transition-duration:0.6s;
 text-align:left;
}
@media (max-width: 991px) {
.secondary-text {
 max-width:300px;
}
}

@media (max-width: 767px) {
.secondary-text {
 font-size:14px;
}
}

@media (max-width: 479px) {
.secondary-text {
 font-size:13px;
}
}

.orange-info-card:hover{
 background-color:#262325;
}
.orange-info-card {
 background-color:#cd734f;
}
.light-info-card:hover{
 background-color:#262325;
}
.light-info-card {
 background-color:#858271;
}
.grad-bar {
}
.grad-bg-layer {
 position:absolute;
 top:0px;
 right:0px;
 bottom:0px;
 left:0px;
 z-index:0;
}
.grad-bar-dark {
}
.ghost-btn-white:hover{
 color:#262325;
 background-color:#ffffff;
}
.ghost-btn-white {
 color:#ffffff;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-top-color:#ffffff;
 border-right-color:#ffffff;
 border-bottom-color:#ffffff;
 border-left-color:#ffffff;
 border-radius:50px;
 padding-left:22px;
 padding-right:22px;
 padding-top:8px;
 padding-bottom:8px;
 transition-duration:0.2s;
}
@media (max-width: 479px) {
.ghost-btn-white {
 padding-top:5px;
 padding-bottom:5px;
}
}

.footer-heading {
 font-size:14px;
 color:#d9d9d9;
 text-transform:uppercase;
 margin-bottom:8px;
}
.footer-container {
 width:100%;
 padding-top:0px;
}
.footer-container:not(.ct-section):not(.oxy-easy-posts),
.footer-container.oxy-easy-posts .oxy-posts,
.footer-container.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:stretch;
}
@media (max-width: 991px) {
.footer-container {
 gap:40px;
}
.footer-container:not(.ct-section):not(.oxy-easy-posts),
.footer-container.oxy-easy-posts .oxy-posts,
.footer-container.ct-section .ct-section-inner-wrap{
flex-wrap:wrap;
gap:40px;
}
}

@media (max-width: 767px) {
.footer-container {
 gap:16px;
}
.footer-container:not(.ct-section):not(.oxy-easy-posts),
.footer-container.oxy-easy-posts .oxy-posts,
.footer-container.ct-section .ct-section-inner-wrap{
gap:16px;
}
}

@media (max-width: 479px) {
.footer-container {
 gap:0px;
}
.footer-container:not(.ct-section):not(.oxy-easy-posts),
.footer-container.oxy-easy-posts .oxy-posts,
.footer-container.ct-section .ct-section-inner-wrap{
gap:0px;
}
}

.footer-col {
 width:25%;
}
.footer-col:not(.ct-section):not(.oxy-easy-posts),
.footer-col.oxy-easy-posts .oxy-posts,
.footer-col.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
@media (max-width: 991px) {
.footer-col {
 width:47%;
 min-height:120px;
 text-align:center;
}
.footer-col:not(.ct-section):not(.oxy-easy-posts),
.footer-col.oxy-easy-posts .oxy-posts,
.footer-col.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
}

@media (max-width: 767px) {
.footer-col {
 min-height:25px;
 width:47%;
 margin-bottom:24px;
}
}

@media (max-width: 479px) {
.footer-col {
 width:100%;
 margin-bottom:0px;
}
}

.footer-link {
 color:#ffffff;
 font-size:18px;
}
.socials-container {
 gap:16px;
}
.socials-container:not(.ct-section):not(.oxy-easy-posts),
.socials-container.oxy-easy-posts .oxy-posts,
.socials-container.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
gap:16px;
}
@media (max-width: 767px) {
.socials-container {
 margin-top:16px;
}
}

@media (max-width: 479px) {
.socials-container {
}
}

.social-icon:hover{
color: #cd734f;}.social-icon:hover{
}
.social-icon {
color: #ffffff;}.social-icon 
>svg {width: 28px;height: 28px;}.social-icon {
 transition-duration:0.2s;
}
.oryx-header {
}
.oryx-header .ct-section-inner-wrap {
padding-top: 16px;
padding-bottom: 16px;
}
.oryx-header:not(.ct-section):not(.oxy-easy-posts),
.oryx-header.oxy-easy-posts .oxy-posts,
.oryx-header.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;
}
.grow-card {
}
.h2-l {
 font-weight:400;
 line-height:120%;
 text-align:left;
 font-size:56px;
}
@media (max-width: 991px) {
.h2-l {
 font-size:50px;
}
}

@media (max-width: 767px) {
.h2-l {
 font-size:40px;
}
}

@media (max-width: 479px) {
.h2-l {
 font-size:32px;
}
}

.hide-text:hover{
 transition-duration:0.6s;
}
.hide-text {
 color:#ffffff;
 max-width:200px;
 font-weight:400;
 transition-duration:0.3s;
}
@media (max-width: 991px) {
.hide-text {
 max-width:300px;
}
}

@media (max-width: 767px) {
.hide-text {
 max-width:200px;
}
}

@media (max-width: 479px) {
.hide-text {
 max-width:200px;
}
}

.solid-btn-grey:hover{
 background-color:#ffffff;
 color:#cd734f;
}
.solid-btn-grey {
 color:#ffffff;
 padding-left:22px;
 padding-right:22px;
 padding-top:8px;
 padding-bottom:8px;
 border-radius:50px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-top-color:#858271;
 border-right-color:#858271;
 border-bottom-color:#858271;
 border-left-color:#858271;
 transition-duration:0.3s;
 background-color:#858271;
}
@media (max-width: 479px) {
.solid-btn-grey {
 padding-top:5px;
 padding-bottom:5px;
}
}

.align-to-container {
}
.cat-row {
}
.cat-word {
}
.solid-btn-white:hover{
 background-color:#262325;
 color:#ffffff;
 border-top-color:#262325;
 border-right-color:#262325;
 border-bottom-color:#262325;
 border-left-color:#262325;
}
.solid-btn-white {
 color:#000000;
 padding-left:22px;
 padding-right:22px;
 padding-top:8px;
 padding-bottom:8px;
 border-radius:50px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 transition-duration:0.3s;
 background-color:#ffffff;
 border-top-color:#ffffff;
 border-right-color:#ffffff;
 border-bottom-color:#ffffff;
 border-left-color:#ffffff;
}
.cat-tagline {
 font-weight:400;
}
.story-tile--grow {
}
.story-tile--first {
}
.story-tile--fixed {
}
.story-tile--last {
}
.tile-scrim-dark {
}
.cat-video-section {
}
.product-hero {
}
.product-hero-media {
}
.product-hero-img {
}
.product-info-block {
}
.product-hero-info {
}
.product-hero-info:not(.ct-section):not(.oxy-easy-posts),
.product-hero-info.oxy-easy-posts .oxy-posts,
.product-hero-info.ct-section .ct-section-inner-wrap{
display:flex;
}
@media (max-width: 479px) {
.product-hero-info {
 padding-top:16px;
}
}

.product-hero-section {
}
.product-hero-section .ct-section-inner-wrap {
padding-top: 60px;
padding-bottom: 60px;
}
@media (max-width: 991px) {
.product-hero-section {
}
.product-hero-section .ct-section-inner-wrap {
padding-top: 50px;
padding-bottom: 50px;
}
}

@media (max-width: 767px) {
.product-hero-section {
}
.product-hero-section .ct-section-inner-wrap {
padding-top: 24px;
padding-bottom: 48px;
}
}

.error404-heading {
}
.error404-wrap {
 text-align:center;
}
.error404-wrap:not(.ct-section):not(.oxy-easy-posts),
.error404-wrap.oxy-easy-posts .oxy-posts,
.error404-wrap.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
.error404-text {
 margin-bottom:32px;
 max-width:440px;
}
.sci-tile--hair {
}
.sci-tile--sex {
}
.sci-tile--weight {
}
.sci-tile--performance {
}
.sci-tile--testosterone {
}
.sci-tile--sleep {
}
.cat-grid {
}
.oxy-stock-content-styles {
}
.legal-page {
}
.legal-page .ct-section-inner-wrap {
padding-top: 120px;
}
@media (max-width: 767px) {
.legal-page {
}
.legal-page .ct-section-inner-wrap {
padding-top: 60px;
}
}

@media (max-width: 479px) {
.legal-page {
}
.legal-page .ct-section-inner-wrap {
padding-top: 50px;
}
}

.tabs-8869-tab {
}
.tabs-8869-tab-active {
}
.tabs-contents-8869-tab {
}
.tabs-5628-tab {
}
.tabs-5628-tab-active {
}
.tabs-contents-5628-tab {
}
.faq-tabs {
}
@media (max-width: 767px) {
.faq-tabs {
}
.faq-tabs:not(.ct-section):not(.oxy-easy-posts),
.faq-tabs.oxy-easy-posts .oxy-posts,
.faq-tabs.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
}

.faq-tabs-list {
}
@media (max-width: 767px) {
.faq-tabs-list {
 padding-left:20px;
}
}

.faq-tab {
}
.faq-tabs-content-wrap {
}
.faq-panel {
 padding-top:0px;
}
@media (max-width: 767px) {
.faq-panel {
}
}

.faq-panel-title {
}
.tabs-9216-tab {
}
.tabs-9216-tab-active {
}
.tabs-contents-9216-tab {
}
.faq-item {
}
.faq-q {
 font-weight:400;
}
.faq-a {
 color:#000000;
}
@media (max-width: 991px) {
.faq-a {
 font-weight:400;
}
}

.main-prod-chevron {
 height:18px;
 width:10px;
 color:#262325;
 min-width:10px;
}
@media (max-width: 767px) {
.main-prod-chevron {
 min-width:8px;
 width:8px;
 height:20px;
}
}

.sub-prod-chevron {
 height:18px;
 width:10px;
 min-width:10px;
}
@media (max-width: 767px) {
.sub-prod-chevron {
 min-width:8px;
 width:8px;
 height:20px;
}
}

.sub-primary-text {
 max-width:150px;
}
@media (max-width: 991px) {
.sub-primary-text {
 max-width:110px;
}
}

.sub-card-inner {
}
.sub-card-top {
}
.sub-card-bottom {
}
.home-video-section {
}
.home-video-content {
}
.home-doctors {
}
.why-heading {
}
.why-section {
}
.why-row {
}
.why-pair {
}
.why-pair-a {
}
.why-pair-b {
}
.why-pair-c {
}
.why-pair-d {
}
.home-doctors-section {
}
.prod-slider-ghost-btn:hover{
 background-color:#858271;
 border-top-color:#858271;
 border-right-color:#858271;
 border-bottom-color:#858271;
 border-left-color:#858271;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 color:#ffffff;
}
.prod-slider-ghost-btn {
 color:#262325;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-radius:50px;
 padding-left:22px;
 padding-right:22px;
 padding-top:2px;
 padding-bottom:2px;
 border-top-color:#d9d9d9;
 border-right-color:#d9d9d9;
 border-bottom-color:#d9d9d9;
 border-left-color:#d9d9d9;
 transition-duration:0.2s;
 box-shadow:0px 0px 2px rgba(0,0,0,0.25);
}
@media (max-width: 479px) {
.prod-slider-ghost-btn {
 padding-top:5px;
 padding-bottom:5px;
}
}

.grid-indent {
}
.grad-accent {
}
.cat-hero-heading {
}
.ghost-btn-black-thick:hover{
 background-color:#858271;
 border-top-color:#858271;
 border-right-color:#858271;
 border-bottom-color:#858271;
 border-left-color:#858271;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 color:#ffffff;
}
.ghost-btn-black-thick {
 color:#262325;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-radius:50px;
 padding-left:22px;
 padding-right:22px;
 padding-top:8px;
 padding-bottom:8px;
 border-top-color:#d9d9d9;
 border-right-color:#d9d9d9;
 border-bottom-color:#d9d9d9;
 border-left-color:#d9d9d9;
 transition-duration:0.2s;
 box-shadow:0px 0px 2px rgba(0,0,0,0.25);
}
@media (max-width: 479px) {
.ghost-btn-black-thick {
 padding-top:5px;
 padding-bottom:5px;
}
}

.product-hero-media-col {
}
.product-hero-media-col:not(.ct-section):not(.oxy-easy-posts),
.product-hero-media-col.oxy-easy-posts .oxy-posts,
.product-hero-media-col.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
.product-fineprint {
}
.cat-sub-tagline {
 font-size:20px;
}
@media (max-width: 991px) {
.cat-sub-tagline {
 font-size:18px;
}
}

@media (max-width: 767px) {
.cat-sub-tagline {
 font-size:16px;
}
}

.cta-subtext {
 font-size:13px;
 color:#858271;
}
html {
  text-wrap: pretty;
}

.oxy-pro-menu,
.oxy-pro-menu .oxy-pro-menu-container,
.oxy-pro-menu .oxy-pro-menu-off-canvas-container,
.oxy-pro-menu .oxy-pro-menu-open-container {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  display: block !important;
}

.oxy-pro-menu .oxy-pro-menu-list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oxy-pro-menu .oxy-pro-menu-list > li {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 36px; 
}

.oxy-pro-menu .menu-item .sub-menu {
  z-index: 0 !important;
}

.oxy-pro-menu .menu-item.menu-item-has-children {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100%;
}

/* Hide the native mobile open/close icons — we use our own accordion */
.oxy-pro-menu .oxy-pro-menu-mobile-open-icon,
.oxy-pro-menu .oxy-pro-menu-mobile-close-icon {
  display: none !important;
}

/* Hide the native dropdown chevron everywhere; we draw our own on mobile */
.oxy-pro-menu .oxy-pro-menu-dropdown-icon,
.oxy-pro-menu .oxy-pro-menu-dropdown-icon-click-area {
  display: none !important;
}

/* ---- Parent item = column heading ("Popular", "About", ...) ---- */
.oxy-pro-menu .menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px !important;
  font-weight: 500;
  line-height: 1.2;
  color: #d9d9d9;
  text-transform: uppercase;
  text-decoration: none;
  width: 100%;
  /* 8px heading margin + 16px column gap from the static build = 24px */
  margin: 0 0 24px 0;
  padding: 0;
  cursor: default; /* it's a heading on desktop, not a link */
}

/* No hover recolour on the heading (matches static) */
.oxy-pro-menu .menu-item-has-children > a:hover,
.oxy-pro-menu .menu-item-has-children > a:focus {
  color: #d9d9d9;
}

/* ---- Child items = the actual links ---- */
.oxy-pro-menu .sub-menu {
  display: flex !important;      /* force open on desktop/tablet */
  flex-direction: column;
  gap: 24px;                     /* matches static 16px gap */
  position: static !important;   /* not an absolute dropdown */
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  width: auto;
}

.oxy-pro-menu .sub-menu li {
  margin: 0;
  padding: 0;
  border: 0;
}

.oxy-pro-menu .sub-menu a {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color: #ffffff;
  text-decoration: none;
  padding: 0;
  transition: 0.2s ease; 
}

.oxy-pro-menu .sub-menu a:hover,
.oxy-pro-menu .sub-menu a:focus {
  color: #CD734F; /* keep the static look; change here if you want a hover state */
}

@media (max-width: 479px) {

  .oxy-pro-menu [class*="-container"],
  .oxy-pro-menu .oxy-pro-menu-list,
  .oxy-pro-menu .menu-item.menu-item-has-children,
  .oxy-pro-menu .menu-item-has-children > a {
    width: 100% !important;
    min-width: 0 !important;
  }

  .oxy-pro-menu .menu-item.menu-item-has-children {
    align-items: stretch !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35); 
  }

  .oxy-pro-menu .menu-item-has-children > a {
    box-sizing: border-box;
    justify-content: space-between !important;
    cursor: pointer;
    margin-bottom: 0;
    padding: 18px 0;  
  }
  .oxy-pro-menu .oxy-pro-menu-list .sub-menu a {
    font-size: 16px;
  }

  /* Custom chevron, pushed to the right edge by the heading's space-between */
  .oxy-pro-menu .menu-item-has-children > a::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    margin-left: 12px;
    border-right: 2px solid #d9d9d9;
    border-bottom: 2px solid #d9d9d9;
    transform: rotate(45deg);          
    transition: transform 0.25s ease;
  }

  .oxy-pro-menu .menu-item-has-children.is-open > a::after {
    transform: rotate(-135deg);        
  }

  /* Links collapsed by default */
  .oxy-pro-menu .sub-menu {
    max-height: 0;
    overflow: hidden;
    opacity: 0 !important;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
  }

  /* Links revealed, with a gap below before the divider */
  .oxy-pro-menu .menu-item-has-children.is-open > .sub-menu {
    max-height: 1000px;
    opacity: 1 !important;
    padding-bottom: 18px;
  }
}/* Gradient layer fades in on hover */
.grad-bg-layer {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}
.grad-bar:hover .grad-bg-layer {
  opacity: 1;
}

/* Heading and chevron transition to white on hover */
.grad-bar .primary-text,
.grad-bar svg {
  transition: color 0.3s ease-in-out, fill 0.3s ease-in-out;
}
.grad-bar:hover .primary-text {
  color: #ffffff !important;
}
.grad-bar:hover svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.grad-bar .grad-accent {
  color: #CD734F;
  transition: color 0.3s ease-in-out;
}
.grad-bar:hover .grad-accent {
  color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
  .grad-bar .grad-accent { transition: none; }
}

/* ===== Gradient cards: responsive behavior ===== */

/* ≥1360px: outer cards absorb the extra viewport (contained-grid trick) */
@media (min-width: 1360px) {
  .grow-card { flex: 1 1 0%; }
}

/* 769–1359px: no container margin to absorb — four equal flexible cards */
@media (min-width: 768px) and (max-width: 1359.98px) {
  .cat-row > .grad-bar {
    flex: 1 1 0% !important;   /* !important: must beat Oxygen's ID-level width:340 */
    width: auto !important;
    min-width: 0;
  }
}

/* Below 1200px the cards are too narrow for the product shots */
@media (max-width: 991px) {
  .cat-row .ct-image { display: none; }
}

/* The pill must never wrap, at any width */
.grad-bar .ct-text-block { white-space: nowrap; }

.align-to-container {
  padding-left: max(20px, calc((100vw - 1360px) / 2 + 20px));
}



/* ===== Coming-soon cards: two-row desktop, single-row mobile ===== */
.sub-card-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding-top: 24px;
  padding-bottom: 28px;
}

.sub-card-top {
  flex: 1 1 auto;            
  min-height: 0;
  align-items: flex-start;  
}

.sub-card-top,
.sub-card-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}
.sub-card-bottom { margin-top: auto; }  

.cat-row .sub-card-top .ct-image {
  align-self: stretch;       /* image matches the row height → all four identical */
  height: auto !important;   /* beats Oxygen's per-image ID heights (110/100/120) */
  max-height: 100%;
  width: auto;
  max-width: 45%;
  object-fit: contain;       /* letterboxes any aspect ratio, no distortion */
}

/* Phone: image and pill are hidden, so the two rows collapse into
   one centred row = heading left, chevron right (matches mobile design) */
@media (max-width: 767px) {
  .sub-card-inner {
    flex-direction: row;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  .sub-card-top    { flex: 1 1 auto; width: auto; gap: 0; height: auto; }
  .sub-card-bottom { flex: 0 0 auto; width: auto; gap: 0; margin-top: 0; }
}

/* ===== ≤991: 2-column checkerboard (per mobile design) ===== */
@media (max-width: 991.98px) {
  .why-section .ct-section-inner-wrap {
    display: flex;
    flex-direction: column;
  }
  /* dissolve the row wrappers so all four pairs share one flow */
  .why-row { display: contents !important; }

  .why-heading { order: 0; }

  .why-pair {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
  }
  .why-pair > .info-card { 
    width: 50% !important;
    padding: 20px;             /* inner gutter — matches the mobile design */
    align-items: flex-start;   /* text sits against the left padding, per design */
    text-align: left;
  }

  .why-pair > .info-card .hide-text,
  .why-pair > .info-card .secondary-text {
    max-width: 100%;           
  }

  /* mobile reading order: hands/Discreet → Trusted/box → doctor/Clinically → Platform/gym */
  .why-pair-a { order: 1; }
  .why-pair-c { order: 2; }
  .why-pair-b { order: 3; }
  .why-pair-d { order: 4; }
}

/* ===== ≤767: square-ish cards to match the mobile frame ===== */
@media (max-width: 767px) {
  .why-pair > .info-card {
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
}
/* When the info-card is hovered, hide the primary text */
.info-card:hover .hide-text {
  opacity: 0 !important;
}

/* When the info-card is hovered, show the hover text */
.info-card:hover .secondary-text {
  opacity: 1;
}

.grad-bar:hover .hide-text {
  opacity: 0;
}

/* When the info-card is hovered, show the hover text */
.grad-bar:hover .secondary-text {
  opacity: 1;
}

.oxy-stock-content-styles {
  max-width: 100%;
}
a {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ===== Doctors: flexible row (desktop) ===== */
/* Doctor portraits: fixed design ratio, width-driven */
/* Doctors section aligns to the same grid line as the Science slider */
.home-doctors-section .ct-section-inner-wrap {
  padding-left: max(20px, calc((100vw - 1360px) / 2 + 140px)) !important;
  padding-right: 20px !important;
}

@media (max-width: 767px) {
  .home-doctors-section .ct-section-inner-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.dr-img-home {
  width: 100%;
  height: auto;
  aspect-ratio: 248 / 297;
  object-fit: cover;
}

@media (min-width: 992px) {
  .doctors-track { gap: 24px; justify-content: space-between; }
  .doctors-track > .doctor-container { flex: 1 1 0%; min-width: 0; padding: 0; }
  .doctors-track > .doctor-container .dr-img-home { width: 100%; }
  .doctors-track > .doctor-container .dr-content { max-width: none; }
}

/* ===== 768–991: keep the two-column layout, cards swipe at fixed width ===== */
@media (min-width: 768px) and (max-width: 991.98px) {
  .doctors-track {
    min-width: 0;                 /* lets this flex child shrink so it can scroll */
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 24px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .doctors-track::-webkit-scrollbar { display: none; }
  .doctors-track > .doctor-container { flex: 0 0 250px; padding: 0; }   /* fixed → no squish */
  .doctors-track > .doctor-container .dr-img-home { width: 100%; }
  .doctors-track > .doctor-container .dr-content { max-width: none; }
}

/* ===== ≤767: stacked + swipe slider ===== */
@media (max-width: 767px) {
  .doctors-track {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .doctors-track::-webkit-scrollbar { display: none; }
}

.doctor-container { scroll-snap-align: start; }

/* ---- Doctors: equal-height cards + bottom-aligned LinkedIn buttons ----
   Same pattern as .products-track below. `margin-top: auto` only absorbs the
   leftover space in the column, so no element's own size or height changes.
   `align-self` on the child always beats `align-items` on the parent, so this
   works even if the track's alignment is set at element level in the builder.
   `flex` is deliberately NOT set on .doctor-container — the ≥992 rule above
   gives it flex: 1 1 0% for equal widths and this block must not outrank it. */
.doctors-track > .doctor-container {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.doctors-track > .doctor-container > .dr-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* Flex items shrink on the main axis, which is vertical in a column — without
   this the portrait would absorb the height difference and crop. */
.doctors-track .dr-img-home { flex: 0 0 auto; }
/* Keyed to the href, not a class, so a class rename can't break it. */
.doctors-track a[href*="linkedin.com"] { margin-top: auto; }

/* Products slider — scrolls at all widths, aligned to the 1360 grid */
/* ===== Products slider ===== */
.products-track {
  display: flex;
  flex-direction: row;
  gap: 45px;
  padding-left: max(20px, calc((100vw - 1360px) / 2 + 200px));
  scroll-padding-left: max(20px, calc((100vw - 1360px) / 2 + 200px));
  padding-right: 20px;
}
.products-track::-webkit-scrollbar { display: none; }
.products-pad { padding-left: max(20px, calc((100vw - 1360px) / 2 + 200px)); }  /* heading aligns with first card */

/* ---- Homepage product slider: equal height + aligned buttons ---- */
.products-track > * {
  align-self: stretch;        /* each card slot grows to the tallest in the row */
  display: flex;
  flex-direction: column;
  flex-shrink: 0;             /* keep card width fixed, don't let it grow/shrink */
}
.products-track > * > .product-card {
  flex: 1 1 auto;             /* if there's a wrapper div, let the card fill its height */
}
.products-track .product-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;             /* body fills the card */
}
.products-track .product-name {
  min-height: 2.4em;          /* reserve ~2 lines so names align (tune to font size) */
}
.products-track .product-btns {
  margin-top: auto;           /* pin buttons + safety line to the bottom */
}

/* Product card */
.product-card { width: 278px; flex-shrink: 0; display: flex; flex-direction: column; scroll-snap-align: start; }
.product-media { position: relative; width: 280px; height: 248px; background-color: #F5F5F3; overflow: hidden; margin-bottom: 24px; }
.product-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.product-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; }
.product-cat { display: inline-flex; align-items: center; background-color: #F0F0F0; padding: 4px 22px; border-radius: 26px; }
.product-cat a { color: #262325; font-size: 12px; font-weight: 500; }
.product-name { font-weight: 500; color: #262325; margin: 0; }
.product-card-descriptor { font-size: 12px; margin: 0; }
.product-btns { display: flex; flex-direction: row; gap: 8px; width: 100%; margin-top: 4px; }
.product-btns > * { flex: 1 1 0; }
.product-btns .solid-btn-orange, .product-btns .ghost-btn-black { font-size: 14px; padding: 5px 22px; border-radius: 26px; text-align: center; }
.product-isi { font-size: 12px; color: #545454; margin-top: 4px; }
.product-isi a,
.product-isi-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.product-isi a:hover,
.product-isi-link:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .products-track { gap: 17px; padding-left: 40px; scroll-padding-left: 40px; }
  .products-pad { padding-left: 40px; }
  .product-card { width: clamp(175px, 46vw, 240px); }
  .product-media {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-bottom: 4px;
  }

  .product-cat a { font-size: 10px; }
  .product-cat {padding: 4px 14px;}
  .product-name { font-size: 18px; }
  .product-card-descriptor { font-size: 12px; }   
  .product-btns { flex-direction: row; }       
  .product-btns .solid-btn-orange,
  .product-btns .ghost-btn-black { font-size: 12px; padding: 5px 8px; }
  .product-isi { font-size: 10px; }
}

/* Arrows row stays aligned to the container's right edge */
.align-right-to-container {
  padding-right: max(20px, calc((100vw - 1360px) / 2 + 20px));
}

/* Shared slider mechanics (products, science, any future slider) */
.slider-track {
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-right: 20px;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track > div { scroll-snap-align: start; }

/* Science slider: heading and first card share the design's indent (~180px at 1440) */
.science-pad,
.science-track {
  padding-left: max(20px, calc((100vw - 1360px) / 2 + 140px));
}
.science-track {
  scroll-padding-left: max(20px, calc((100vw - 1360px) / 2 + 140px));
}


.slider-track.science-track { gap: 31px; }

@media (max-width: 767px) {
  .science-pad { padding-left: 40px; }
  .science-track { padding-left: 40px; scroll-padding-left: 40px; }
}

/* ===== Global slider arrows (ALL sliders site-wide) ===== */
.slider-arrows.is-static { display: none !important; }
.slider-track, .docs-track { cursor: default; }
.slider-track.is-scrollable, .docs-track.is-scrollable { cursor: grab; }
.slider-arrows { display: flex; flex-direction: row; gap: 13px; }
.slider-arrows .slider-arrow {
  width: 30px; height: 30px; border-radius: 50%;
  background-color: #F0F0F0; border: none; color: #1D1B20;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.slider-arrows, .slider-arrow { user-select: none; -webkit-user-select: none; }
.slider-arrows .slider-arrow svg { width: 9px; height: 13px; display: block; }
.slider-arrows .arrow-prev svg { transform: rotate(180deg); }

/* ===== Slider cards fade in sequentially when the slider scrolls into view =====
   Uses `translate`, not transform, so the hover `scale` composes with it
   instead of being outranked. NOTE: `scale` MUST stay in the transition list
   below — this rule is (0,2,0) and beats the hover block's transition, so a
   scale omitted here would silently never animate. */
.slider-track.animate > *,
.docs-track.animate > * {
  opacity: 0;
  translate: 0 16px;
  transition: opacity 1.4s ease, translate 0.9s ease, scale 0.3s ease;
}
.slider-track.animate > *.slide-in,
.docs-track.animate > *.slide-in {
  opacity: 1;
  translate: none;
}
@media (prefers-reduced-motion: reduce) {
  .slider-track.animate > *,
  .docs-track.animate > * {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }
}

/* ===== Card hover tuning — edit these three values, not the selectors ===== */
:root {
  --card-hover-scale: 1.03;      /* how much every card grows on hover */
  --dr-reveal-duration: 1s;      /* TODO: homepage doctors' real AOS entrance duration */
  --dr-stagger: 0.1s;            /* TODO: homepage doctors' per-card entrance delay step */
}

/* ===== Card hover grow — products, blog posts, doctor bios =====
   Selectors verified against the live DOM 2026-08-03. Uses the independent
   `scale` property so it composes with the reveal `translate` above. */
@media (hover: hover) and (pointer: fine) {

  /* Cards that ARE their own outermost element. */
  .product-card,                /* homepage + product category sliders */
  .doctor-card {                /* meet-your-doctors */
    transition: scale 0.3s ease;
  }
  .product-card:hover,
  .doctor-card:hover {
    scale: var(--card-hover-scale);
  }

  /* Science / blog cards — homepage slider, /the-science/ sliders, and the
     blog category archive grid. `a.sci-card-link` is INSIDE a .ct-div-block
     item, and the card's outer box belongs to that item — scaling the link
     only zoomed the image and body. Scale the item so the whole card moves
     as one. Bonus: items honour z-index even when static, so no :has() here. */
  .science-track > *,
  .sci-track > *,
  .cat-grid > * {
    transition: scale 0.3s ease;
    z-index: 0;
  }
  .science-track > *:hover,
  .sci-track > *:hover,
  .cat-grid > *:hover {
    scale: var(--card-hover-scale);
    z-index: 2;
  }

  /* ===== Homepage doctors =====
     AOS applied by hand in the builder, so the entrance delay is declared at
     ID level. An ID selector is (1,0,0) and outranks anything class-based, and
     a single `transition-delay` value applies to EVERY property in the list —
     `scale` included. That is why the shrink stayed delayed no matter how the
     class selectors were escalated.
     Fix: re-declare the stagger as a per-property LIST with 0s in the scale
     slot, !important to beat the ID rules, keyed to position rather than ID so
     it survives an element rebuild. Three doctors → nth-child 2 and 3.
     The entrance and the hover-out destination are the same computed state, so
     a per-property list is the only way to delay one and not the other. */
  body .doctors-track > .doctor-container.aos-init {
    transition-property: opacity, transform, scale !important;
    transition-duration: var(--dr-reveal-duration), var(--dr-reveal-duration), 0.3s !important;
    transition-delay: 0s, 0s, 0s !important;
  }
  body .doctors-track > .doctor-container.aos-init:nth-child(2) {
    transition-delay: var(--dr-stagger), var(--dr-stagger), 0s !important;
  }
  body .doctors-track > .doctor-container.aos-init:nth-child(3) {
    transition-delay: calc(var(--dr-stagger) * 2), calc(var(--dr-stagger) * 2), 0s !important;
  }
  .doctor-container:hover {
    scale: var(--card-hover-scale);
    z-index: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card:hover,
  .doctor-card:hover,
  .doctor-container:hover,
  .science-track > *:hover,
  .sci-track > *:hover,
  .cat-grid > *:hover { scale: none; }
}

/* ===== Lift grown product cards above their neighbours =====
   OPTIONAL, and needed for product cards only: they sit inside a .slide-in
   wrapper, and the wrapper is the flex item, so z-index on the card itself
   is inert. Delete this block if you don't want the lift. */
@media (hover: hover) and (pointer: fine) {
  .slider-track > * { z-index: 0; }
  .slider-track > *:has(.product-card:hover) { z-index: 2; }
}

/* Scroll containers compute overflow-y to auto when overflow-x is auto, so a
   scaled card gets clipped top and bottom by its own track. Overflow clips at
   the padding box, so vertical padding buys visible room; the negative margins
   cancel the added height so no layout shifts.
   Longhands only — these tracks' left/right padding does containment work. */
.slider-track,
.sci-track,
.docs-track,
.doctors-track {
  padding-top: 16px;
  padding-bottom: 16px;
  margin-top: -16px;
  margin-bottom: -16px;
}

#gform_confirmation_message_2 {
  color: #fff; 
}

/* ===== Homepage hero video ===== */
.home-video-section {
  position: relative;
  overflow: hidden;
  height: 650px;
  background-color: #262325;
}

/* Let the inner wrap span the full width so the video can fill it */
.home-video-section .ct-section-inner-wrap {
  position: relative;          /* containing block for the video */
  width: 100%;
  max-width: none;
  height: 100%;
  padding: 0;                  /* kills Oxygen's default 75px 20px */
  display: flex;
  align-items: center;         /* vertically centres the text block */
}

.home-video {
  display: block;
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  object-position: 65% 50%;    /* ESTIMATE — your positioning dial */
  z-index: 0;
}

/* Scrim for text legibility */
.home-video-section .ct-section-inner-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
  pointer-events: none;
}

/* Text + button above video and scrim */
.home-video-content {
  position: relative;
  z-index: 2;
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 767px) {
  .home-video-section { height: 400px; }   /* ESTIMATE — check the mobile frame */
}
/* Parallax */
/* ===== Shared homepage grid indent (matches Science slider + doctors) ===== */
.grid-indent-section .ct-section-inner-wrap {
  max-width: 100% !important;
  padding-left: max(20px, calc((100vw - 1360px) / 2 + 140px)) !important;
  padding-right: 20px !important;
}
@media (max-width: 767px) {
  .grid-indent-section .ct-section-inner-wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* "Your prime" content no longer supplies its own gutter */
.home-video-content { padding-left: 0; padding-right: 0; }

/* ===== Product card image swap on hover =====
   The hover <img> is only printed when ACF hover_image is set, so :has()
   guards the base image — a card with no hover image must not fade out to
   the empty grey media box. 0.3s matches the card scale exactly. */
.product-img { transition: opacity 0.3s ease-in-out; }
.product-img-hover { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-img-hover { opacity: 1; }
  .product-card:has(.product-img-hover):hover .product-img:not(.product-img-hover) { opacity: 0; }
}

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

/* ===== Suppress the hover grow while click-dragging a slider =====
   The Slider Logic script adds .is-dragging to the track (same convention as
   the nav's .oryx-cards.is-dragging). (0,3,0) beats the plain hover rules. */
@media (hover: hover) and (pointer: fine) {
  .slider-track.is-dragging .product-card:hover,
  .docs-track.is-dragging .doctor-card:hover,
  .science-track.is-dragging > *:hover,
  .sci-track.is-dragging > *:hover { scale: none; }
}

@media (min-width: 1600px) {
  body #div_block-33-2 {
    background-image:
      linear-gradient(rgba(38, 35, 37, 0.3), rgba(38, 35, 37, 0.3)),
      url("https://oryx.cdns.co.za/wp-content/uploads/2026/08/banner-for-men-flipped-wide.webp");
    background-position: 30% 50%;
  }
}body .gform_wrapper.gform-theme--framework .gform-field-label--type-inline {
      color:white;
      max-width:360px;
}

/* Target all Gravity Forms Inputs, Textareas, and Selects */
body .gform_wrapper.gform-theme--framework input:not([type="hidden"]),
body .gform_wrapper.gform-theme--framework textarea,
body .gform_wrapper.gform-theme--framework select,
body .gform_wrapper.gform-theme--framework .chosen-container {
    color: white;
    border: 0.5px solid #ccc;
    background:#FFFFFF4D; 
    border-radius: 0 !important;
}

/* Target all Gravity Forms Buttons and Submit Inputs */
body .gform_wrapper.gform-theme.gform-theme--framework .button,
.gform-theme--foundation .chosen-container-single .chosen-single,
body .gform_wrapper.gform-theme.gform-theme--framework .gform-theme-button,
body .gform_wrapper.gform-theme.gform-theme--framework button.gform_button.button,
body .gform_wrapper.gform-theme.gform-theme--framework input[type="submit"].button.gform_button {
    background-color: transparent;
    color: white;
    border-radius: 26px !important;
    border: 1px solid white;
    padding: 1px 22px;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
    cursor: pointer;
}
.gform_wrapper.gform-theme--framework input:focus,
.gform_wrapper.gform-theme--framework textarea:focus,
.gform_wrapper.gform-theme--framework select:focus {
  border: 0.5px solid #CD734F;
}
body .gform_wrapper.gform-theme--framework select.gfield_select {
    /* The new, ultra-thin sleek white "V" chevron */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center; /* Pushes the arrow slightly off the right edge */
    background-size: 16px auto; /* Adjust this number to make the arrow bigger or smaller */
    
    /* Ensure text doesn't overlap the arrow */
    padding-right: 40px; 
    
    /* Ensure the native browser arrow stays hidden */
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
}
body .gform_wrapper.gform-theme--framework input[type="checkbox"] {
     background: white;
}
body .gform_wrapper.gform-theme--framework input[type="checkbox"]::before {
  color: #262325;
}

body .gform_wrapper.gform-theme--framework .gfield_label.gform-field-label,
.gfield_label.gform-field-label.gfield_label_before_complex,
.gform_title {
  display:none;
}
/* Hide the placeholder name from the dropdown list options */
body .gform_wrapper.gform-theme--framework select.gfield_select option.gf_placeholder {
    display: none;
}
/* Style the dropdown list items */
body .gform_wrapper.gform-theme--framework select.gfield_select option {
    background-color: #262325;
    color: #ffffff; 
    padding: 10px;
}

/* Style the placeholder specifically ("Primary Interest") */
body .gform_wrapper.gform-theme--framework select.gfield_select option.gf_placeholder {
    color: #aaaaaa; 
}

#input_2_1 {
  width: 400px !important;
}

/* ---- Form 2 submit: white fill / black text on hover ---- */
body .gform_wrapper.gform-theme.gform-theme--framework #gform_submit_button_2:hover,
body .gform_wrapper.gform-theme.gform-theme--framework #gform_submit_button_2:active {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

/* ---- GLOBAL: orange focus state on all Gravity Forms buttons ---- */
body .gform_wrapper.gform-theme.gform-theme--framework input[type="submit"].button.gform_button:focus,
body .gform_wrapper.gform-theme.gform-theme--framework button.button:focus,
body .gform_wrapper.gform-theme.gform-theme--framework .gform-theme-button:focus,
body .gform_wrapper.gform-theme.gform-theme--framework .button:focus {
    background-color: transparent;
    color: #CD734F;
    border-color: #CD734F;
}

/* ---- GLOBAL: brand tokens — loading spinner + focus rings ---- */
body .gform_wrapper.gform-theme,
body .gform_wrapper.gform-theme--framework,
body .gform_wrapper.gform-theme--api {
    --gf-form-spinner-fg-color: #CD734F;
    --gf-form-spinner-bg-color: rgba(205, 115, 79, 0.15);
    --gf-ctrl-outline-color-focus: rgba(205, 115, 79, 0.65);
    --gf-ctrl-border-color-focus: #CD734F;
    --gf-ctrl-btn-border-color-focus-primary: #CD734F;
    --gf-ctrl-btn-border-color-focus-secondary: #CD734F;
}

/* Fallback for the foundation-only theme, which hardcodes the ring colours */
body .gform_wrapper .gform-loader {
    border-block-start-color: rgba(205, 115, 79, 0.15);
    border-inline-end-color: rgba(205, 115, 79, 0.15);
    border-block-end-color: #CD734F;
    border-inline-start-color: #CD734F;
}

/* Newsletter form sits on a dark photo — placeholder must be light.
   opacity:1 because Firefox dims placeholders by default. */
body #gform_wrapper_2 input::placeholder,
body #gform_wrapper_2 textarea::placeholder {
  color: #ffffff;
  opacity: 1;
}.cat-sub-tagline {
  line-height: 24px;
  max-width: 800px;
}

.cat-hero-heading {
  text-wrap: balance;
}

.cat-hero-heading .ct-span {
  display: inline;
}

.category-gradient {
  background: linear-gradient(180deg, var(--cat-accent, #87806E) 25%, #CD734F 100%);
}

/* ---- Category products slider ---- */
.category-gradient .slider-track.products-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 24px;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-left: max(20px, calc((100vw - 1360px) / 2 + 120px));
  scroll-padding-left: max(20px, calc((100vw - 1360px) / 2 + 120px));
  padding-right: 20px;
  scrollbar-width: none;
}
.category-gradient .slider-track.products-track::-webkit-scrollbar { display: none; }

/* Cards: equal height + bottom-aligned buttons */
.category-gradient .product-card {
  scroll-snap-align: start;
  align-self: stretch;              /* all cards match the tallest in the row */
}
.category-gradient .product-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;                   /* body fills the card height */
}
.category-gradient .product-name {
  min-height: 2.4em;                /* reserve ~2 lines so single/double-line names align (tune to name font size) */
}
.category-gradient .product-btns {
  margin-top: auto;                 /* pin buttons + safety line to the bottom, aligned across cards */
}

.category-gradient .slider-arrows {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
  max-width: 1360px;
  margin: 24px auto 0;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.category-gradient .btn-outline-pill:hover {
  background-color: #ffffff;
  color: #262325;
  border-color: #ffffff;
}

@media (max-width: 767px) {
  .category-gradient .slider-arrows { display: none; }
}

.category-gradient .products-coming-soon {
  padding: 20px max(20px, calc((100vw - 1360px) / 2 + 20px));
  font-size: 18px;
  color: var(--cat-ink, #ffffff);
}

.cat-word {
  color: #cd734f;
}

/* Hero darkening overlay — strength comes from ACF via --hero-overlay */
.cat-hero .parallax-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(38, 35, 37, var(--hero-overlay, 0));
  pointer-events: none;
}

/* ===== Symptom cards ===== */
.symptom-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: fit-content;
  min-width: 420px;
  max-width: 680px;
}

/* Row: [ title + caption ] [ chevron ].
   align-items:center is what vertically centres the chevron against the whole
   card rather than against the title line. */
.symptom-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: auto;
  padding: 14px 20px;
  color: #000;
  font-weight: 400;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.7);
  opacity: 0;
  animation: symptom-flip 600ms ease both;
}

.symptom-card + .symptom-card { margin-top: 0; }

/* flex:1 so the caption wraps at the full card width rather than only at the
   title's width. min-width:0 lets it shrink instead of overflowing. */
.symptom-card-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.symptom-card-title {
  font-size: 28px;
  line-height: 1.25;
  white-space: nowrap;   /* desktop only — it overflows once the card narrows */
}

/* `contain: inline-size` is what makes the CARD WIDTH FOLLOW THE TITLE.
   Every flex child normally contributes to its parent's intrinsic width, so a
   long caption stretched the group to its 680px cap no matter how short the
   title was. Size containment makes this box's inline size independent of its
   own contents, so it contributes 0 to that calculation — the widest TITLE sets
   the group width, and the caption wraps inside whatever results.
   Measured on /testosterone-therapy/: without it, all three cards sat at 680px;
   with it, 674px = widest title (591) + gap + chevron + padding. */
.symptom-body {
  contain: inline-size;
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #000;
}

/* Entrance flip. A CSS animation (not a transition) so it plays on
   cached refreshes too. Per-card delay is inline from the PHP loop. */
@keyframes symptom-flip {
  from { opacity: 0; transform: perspective(2500px) rotateX(100deg); }
  25%  { opacity: 1; }
  to   { opacity: 1; transform: perspective(2500px) rotateX(0deg); }
}

.symptom-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: background 0.3s ease;
}

.symptom-card:hover::before {
  background: rgba(255, 255, 255, 0.65);
}

.symptom-card svg {
  flex: 0 0 auto;
  width: 9px;
  height: 15px;
}

/* ===== Tablet (768–991) — new midpoint ===== */
@media (max-width: 991px) {
  .symptom-cards {
    gap: 20px;
    width: 100%;
    min-width: 0;        /* the 420px floor overflows narrow columns */
    max-width: 480px;
  }
  .symptom-card { gap: 24px; padding: 12px 18px; }
  .symptom-card-title {
    font-size: 22px;
    white-space: normal;  /* nowrap starts overflowing the card here */
  }
  .symptom-body { font-size: 14px; }
}

/* ===== Phone (≤479) ===== */
@media (max-width: 479px) {
  .symptom-cards {
    gap: 14px;
    max-width: min(320px, calc(100vw - 40px));
    align-items: stretch;
  }
  .symptom-cards:has(.symptom-card:nth-child(5)) { gap: 10px; }
  .symptom-card { gap: 16px; padding: 12px 16px; }
  .symptom-card-title { font-size: 18px; }
  .symptom-body { font-size: 13px; }
  .symptom-card svg { width: 8px; height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .symptom-card { animation: none; opacity: 1; transform: none; }
}

/* Fallback for the few browsers without backdrop-filter: go more opaque */
@supports not ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))) {
  .symptom-card::before { background: rgba(245, 245, 243, 0.92); }
}

.contained {
  width: 100%;
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
}

/* Category gradient: product card + slider text colour (values from the design) */
.category-gradient .product-name,
.category-gradient .product-card-descriptor,
.category-gradient .product-isi,
.cat-tagline, .cat-sub-tagline { color: var(--cat-ink, #ffffff); }

.category-gradient .btn-outline-pill {
  color: var(--cat-ink, #ffffff);
  border-color: var(--cat-ink, #ffffff);
}

.category-gradient .slider-arrow {
  background-color: #ffffff;
  border: none;
  width: 36px;
  height: 36px;
}


/* Step animation for How Oryx Works section */
.step { opacity: 1; transition: opacity 0.4s ease; }
.step.active { opacity: 1; }
.step.active .step-indicator {
  background-color: #cd734f;
  border-color: #cd734f;
  color: #ffffff;
}

/* Category video */
.cat-video-section {
  position: relative;
  overflow: hidden;
  height: 685px;
  background-color: #f2f2f0;
}

.cat-video {
  display: block;
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);    /* 1px overdraw each side — hairline belt */
  height: calc(100% + 2px);
  object-fit: cover;
  object-position: 50% 50%;   /* tune per category if needed */
  z-index: 0;
}

@media (max-width: 767px) {
  .cat-video-section { height: 430px; }
}

.oxy-video-container video,
video.bg-video,
video.cat-video {
  rotate: 0.02deg;
}

/* category page product slider */
.category-gradient .slider-arrow svg {
  color: #262325;
  fill: none;
}
.category-gradient .slider-arrow svg path {
  fill: currentColor;
}

.cost-note {
  font-size: 15px;
  line-height: 20px;
  color: #000000;
  max-width: 490px;
  margin-top: 24px;
}h1 {font-size: 56px;}
h2 {font-size: 46px;}
h3 {font-size: 40px;}
h4 {font-size: 28px;}
h5 {font-size: 22px;}

@media (max-width:992px) {
    h1 {font-size: 48px;}
    h2 {font-size: 40px;}
    h3 {font-size: 34px;}
    h4 {font-size: 24px;}
    h5 {font-size: 20px;}
}

@media (max-width:768px) {
    h1 {font-size: 36px;}
    h2 {font-size: 32px;}
    h3 {font-size: 28px;}
    h4 {font-size: 20px;}
    h5 {font-size: 18px;}
}

@media (max-width:480px) {
    h1 {font-size: 26px;}
    h2 {font-size: 26px;}
    h3 {font-size: 24px;}
    h4 {font-size: 18px;}
    h5 {font-size: 18px;}

    p,
    li,
    ul,
    div {
        font-size: 15px;
    }
}/* Story tiles: labels per-tile, clamped to the 1360 boundary */
.story-tile .story-tile-label {
  margin-top: 45px;
  margin-left: 57px;
  margin-right: auto;      /* pins left (cross-axis) */
  width: auto;
  max-width: none;
  text-align: left;
}
.story-tile--last .story-tile-label {
  margin-left: auto;       /* Presence pins right — desktop only, see below */
  margin-right: 57px;
}

@media (min-width: 1360px) {
  .story-tile--first .story-tile-label {
    /* 1440 content basis: matches the design frame exactly at 1440 viewport */
    margin-left: min(calc((100vw - 1440px) / 2 + 132px), calc(25vw - 200px));
  }
  .story-tile--last .story-tile-label {
    margin-right: min(calc((100vw - 1440px) / 2 + 156px), calc(25vw - 200px));
  }
}

/* Below the desktop grid: all four labels left-aligned (incl. Presence) */
@media (max-width: 1359px) {
  .story-tile .story-tile-label,
  .story-tile--last .story-tile-label {
    margin-left: 24px;
    margin-right: auto;
  }
}

@media (max-width: 991px) {
  .story-tile .story-tile-label,
  .story-tile--last .story-tile-label {
    margin-top: 28px;
    margin-left: 20px;
  }
}
/* Optional scrims — contrast insurance for the labels */
.story-tile { position: relative; }
.story-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  pointer-events: none;
}
.tile-scrim-dark::before  { background: linear-gradient(180deg, rgba(38,35,37,0.45), rgba(38,35,37,0)); }
.tile-scrim-light::before { background: linear-gradient(180deg, rgba(242,242,240,0.55), rgba(242,242,240,0)); }
.story-tile .story-tile-label { position: relative; z-index: 1; }.bg-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Mosaic: true checkerboard when 2-across */
@media (max-width: 991px) {
  .mosaic-grid > :nth-child(3) { order: 4; }   /* row 2 becomes text | image */
  .mosaic-grid > :nth-child(4) { order: 3; }
  .mosaic-grid > :nth-child(5) { order: 6; }   /* row 3 becomes image | text */
  .mosaic-grid > :nth-child(6) { order: 5; }
  .mosaic-grid > :nth-child(1) { order: 1; }
  .mosaic-grid > :nth-child(2) { order: 2; }
  .mosaic-grid > :nth-child(7) { order: 7; }
  .mosaic-grid > :nth-child(8) { order: 8; }
}/* Meet the Doctors — slider + photo crop */
.doctor-photo { 
  aspect-ratio: 248 / 297; 
  object-position: 50% 90%; 
}
.docs-track { 
  scrollbar-width: none; 
}
.docs-track::-webkit-scrollbar { 
  display: none; 
}
@media (max-width: 767px) {
  .docs-track { 
    overflow-x: auto; 
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch; 
  }
  .doctor-card { 
    scroll-snap-align: start; 
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .doctor-card { 
    flex-basis: 0; 
  }
}

/* ---- Equal-height cards + bottom-aligned LinkedIn buttons ----
   `flex` is deliberately not set on a direct-child .doctor-card, because the
   768–991 rule above depends on flex-basis: 0 for its column widths. */
.docs-track > * {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.docs-track > .doctor-card {
  display: flex;
  flex-direction: column;
}
/* Only matches if Oxygen wrapped each card in a repeater div. */
.docs-track > * > .doctor-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.docs-track .doctor-photo { flex: 0 0 auto; }
.docs-track a[href*="linkedin.com"] { margin-top: auto; }.search-page { width: 100%; }

.search-eyebrow {
  font-size: 12px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: #858271; margin-bottom: 8px;
}
.search-heading { color: #262325; margin-bottom: 8px; }
.search-count { font-size: 14px; color: #545454; margin-bottom: 40px; }

.search-result-titlerow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.search-results { display: flex; flex-direction: column; }
.search-result {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(38, 35, 37, 0.2);
  text-decoration: none;
}
.search-result:first-child { border-top: 1px solid rgba(38, 35, 37, 0.2); }

.search-result-main { display: flex; flex-direction: column; gap: 6px; }
.search-result-title {
  font-size: 20px; font-weight: 500; color: #262325;
  transition: color 0.25s ease;
}
.search-result:hover .search-result-title { color: #cd734f; }
.search-result-excerpt { font-size: 14px; line-height: 21px; color: #545454; max-width: 640px; }

.search-result-type {
  flex-shrink: 0;
  font-size: 12px; font-weight: 500; color: #262325;
  background: #fff; border: 0.5px solid #ddd; border-radius: 26px; padding: 4px 14px;
}
.search-result svg { width: 9px; height: 13px; flex-shrink: 0; color: #262325; }

.search-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

.search-pagination { margin-top: 40px; }
.search-pagination .nav-links { display: flex; gap: 8px; }
.search-pagination .page-numbers {
  display: flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 6px;
  border: 1px solid #262325; border-radius: 50%;
  color: #262325; font-size: 14px; text-decoration: none;
}
.search-pagination .page-numbers.current { background: #262325; color: #ffffff; }

@media (max-width: 767px) {
  .search-result { gap: 14px; padding: 16px 0; }
  .search-result-title { font-size: 16px; }
  .search-result-excerpt { font-size: 13px; }
  .search-result-type { display: none; }   /* keep rows clean on phones */
}/* ===== Product hero ===== */
.product-hero {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 130px;
  width: 100%;
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
}

/* Media column wraps the grey panel + the caption, so the caption sits BELOW the
   panel rather than on top of its background. The panel's own sizing moved up
   here; .product-hero-media is now just the grey box. */
.product-hero-media-col {
  flex: 1 1 auto;
  max-width: 669px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.product-hero-media {
  width: 100%;
  min-height: 0;
  max-height: 675px;
  background-color: #F5F5F3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;      /* positioning context for the hover image */
}

.product-hero-img {
  max-width: 85%;
  max-height: 92%;
  object-fit: contain;
  transition: opacity 0.3s ease-in-out;
}

/* Hover image (ACF hover_image). The Code Block prints it only when the field is
   set, so the element's absence is the fallback — no empty-src guards needed. */
.product-hero-img-hover {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  max-width: 85%;
  max-height: 92%;
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .product-hero-media:hover .product-hero-img-hover { opacity: 1; }
  .product-hero-media:has(.product-hero-img-hover):hover
    .product-hero-img:not(.product-hero-img-hover) { opacity: 0; }
}

.product-hero-info {
  width: 402px;
  flex-shrink: 0;
}

.product-info-block {
  width: 100%;
}

/* Pill pulls the vertical's accent and uses the same light/dark ink decision as
   the gradient bar. Falls back to the original gold + white when the accent
   snippet prints nothing — e.g. a programme whose term has no vertical page. */
.product-pill {
  display: inline-block;
  background-color: var(--cat-accent, #c9b567);
  color: var(--cat-ink, #ffffff);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 22px;
  border-radius: 26px;
  margin-bottom: 20px;
}

.product-title {
  font-size: 36px;
  font-weight: 500;
  color: #000000;
  max-width: 417px;
  margin-bottom: 16px;
}

.product-descriptor {
  font-size: 14px;
  line-height: 20px;
  color: #000000;
  max-width: 372px;
  margin-bottom: 16px;
}

/* Price line — one sentence from ACF price_line. Replaces the old .product-price
   big orange number. */
.product-price-line {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: #000000;
  margin-bottom: 16px;
}

.product-cta {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 0;      /* the old 48px now lives on .product-fineprint */
}

.product-coming-soon {
  display: inline-block;
  background-color: #f0f0f0;
  color: #262325;
  font-weight: 500;
  padding: 8px 22px;
  border-radius: 26px;
  margin-bottom: 0;
}

/* Fine print — used by BOTH the image caption and the disclaimer under the CTA.
   Same treatment in the design, so one class. */
.product-fineprint {
  font-size: 11px;
  font-style: italic;
  line-height: 16px;
  color: #545454;
  margin: 14px 0 0;
}

.product-cta + .product-fineprint,
.product-coming-soon + .product-fineprint {
  margin-top: 17px;
  margin-bottom: 24px;
}

/* ===== Accordions ===== */
.product-accordions {
  width: 100%;
}

.product-acc {
  border-bottom: 1px solid #000;
}

.product-acc:last-child {
  border-bottom: none !important;
}

.product-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 20px;
  font-weight: 400;
  color: #000000;
  text-align: left;
  padding: 24px 0;
}

/* Oryx chevron, rotated. NOT the design's icon — that comes through as a Material
   3 Design Kit placeholder, so the brand chevron is the correct choice here.
   The SVG has a viewBox and no intrinsic size, so the px sizing below is
   load-bearing: remove it and it fills its parent.
   Sized 7x10 to match the FAQ chevron (.oxel_accordion__row svg) on the same page. */
.product-acc-chevron {
  display: inline-flex;
  flex-shrink: 0;
  margin-right: 5px;
}

.product-acc-chevron svg {
  width: 7px;
  height: 10px;
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

.product-acc.open .product-acc-chevron svg {
  transform: rotate(-90deg);
}

.product-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.product-acc.open .product-acc-body {
  max-height: 1200px;
}

.product-acc-inner {
  padding: 0 0 24px;
}

.product-acc-inner h4 {
  font-size: 16px;
  font-weight: 600;
  color: #262325;
  margin: 16px 0 8px;
}

.product-acc-inner h4:first-child {
  margin-top: 0;
}

.product-acc-row,
.product-acc-richtext p {
  font-size: 14px;
  line-height: 20px;
  color: #262325;
  margin-bottom: 8px;
}

.product-acc-richtext ul {
  padding-left: 18px;
  margin-bottom: 8px;
}

.product-acc-richtext li {
  font-size: 14px;
  line-height: 20px;
  color: #262325;
}

/* ===== Category video banner ===== */
.product-banner-section {
  padding: 0;
}

.product-banner-section .ct-section-inner-wrap {
  padding: 0;
  max-width: none;
  width: 100%;
}

.product-banner-block {
  width: 100%;
}

.product-banner {
  position: relative;
  overflow: hidden;
  min-height: 550px;
  background-color: #262325;
}

.product-banner .cat-video {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
}

.product-banner-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: max(20px, calc((100vw - 1360px) / 2 + 132px));
  padding-right: 20px;
}

.product-banner-heading {
  color: #ffffff;
  font-size: 46px;
  line-height: 56px;
  font-weight: 500;
  max-width: 582px;
  margin-bottom: 36px;
}

/* Desktop only. The panel's height is auto and established BY the base image,
   so max-height: 92% never resolves for the base (indefinite container) but
   does for the absolutely positioned hover image — capping it at 92% of a
   height the base image itself set. Dropping the cap leaves both
   width-constrained, so they render identically. */
@media (min-width: 992px) {
  .product-hero-img-hover { max-height: none; }
}

@media (max-width: 991px) {
  .product-banner-heading {
    font-size: 36px;
    line-height: 44px;
  }
}

@media (max-width: 767px) {
  .product-banner {
    min-height: 350px;
  }
  .product-banner-heading {
    font-size: 28px;
    line-height: 34px;
    max-width: 320px;
    margin-bottom: 24px;
  }
}

/* --- Video banner body copy (ACF banner_body on the oryx_category term) --- */
.product-banner-body {
  color: #ffffff;
  font-size: 17px;
  line-height: 26px;
  max-width: 582px;
  margin-bottom: 36px;
}

/* With body copy present the heading's gap tightens. Without it the heading keeps
   its original 36px, so the button never crowds up against the heading. */
.product-banner-heading:has(+ .product-banner-body) { margin-bottom: 16px; }

/* The VERTICAL template's section already provides the banner's positioning
   context, height and clipping (.cat-video-section: position:relative;
   overflow:hidden; height:685px / 430px). Neutralise the .product-banner wrapper
   there so the video and the overlay position against the SECTION — this is what
   keeps the video full-bleed, since .cat-video-section's inner wrap still carries
   Oxygen's padding and max-width. Do NOT give this a height or min-height. */
.cat-video-section .product-banner {
  position: static;
  min-height: 0;
}

@media (max-width: 991px) {
  .product-banner-body { font-size: 16px; line-height: 24px; }
}

@media (max-width: 768px) {
  .product-banner-body { font-size: 15px; line-height: 22px; max-width: 320px; margin-bottom: 24px; }
  .product-banner-heading:has(+ .product-banner-body) { margin-bottom: 12px; }
}

/* ===== Tablet ===== */
@media (max-width: 1240px) {
  .product-hero {
    gap: 60px;
  }
}

/* ===== Medium (768–991): info column shrinks so the image keeps room ===== */
@media (max-width: 991px) {
  .product-hero {
    gap: 40px;
  }
  .product-hero-media {
    height: 480px;
  }
  .product-hero-info {
    width: 320px;
  }
  .product-title {
    font-size: 30px;
  }
  .product-cta + .product-fineprint,
  .product-coming-soon + .product-fineprint {
    margin-bottom: 16px;
  }
  .product-acc-head {
    font-size: 18px;
    padding: 20px 0;
  }
}

/* ===== Phone (mobile frame values; 768 = Oxygen phone-landscape) ===== */
@media (max-width: 767px) {
  .product-hero {
    flex-direction: column;
    gap: 24px;
  }
  .product-hero-media-col {
    width: 100%;
    max-width: none;
  }
  .product-hero-media {
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 420px;
  }
  .product-hero-info {
    width: 100%;
  }
  .product-title {
    font-size: 26px;
    max-width: none;
  }
  .product-descriptor {
    max-width: none;
  }
  .product-acc-head {
    font-size: 14px;
    padding: 18px 0;
  }
}.oxel_accordion { width: 100%; }

button.oxel_accordion__row {
  width: 100%;
  display: flex; flex-direction: row;
  justify-content: space-between; align-items: center;
  padding: 24px 0px 24px 0px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit; font-weight: 400;
  text-align: left;
}

.oxel_accordion__row_left { display: flex; flex-direction: row; align-items: center; }

.oxel_accordion__row__label { color: #000; font-size: 22px; text-align: left; }


.accordion-icon {
  display: flex;
  margin-right: 0px;
}

.oxel_accordion__row svg {
  width: 10px !important;
  height: 15px !important;
  flex-shrink: 0;
  transform: rotate(90deg);
  transition: transform 0.3s ease;
  margin-right: 8px;
  margin-left: 8px;
  color: #1D1B20;
}
.oxel_accordion__row--active svg {
  transform: rotate(-90deg);        
}

.oxel_accordion__content {
  width: 100%;
  display: flex; flex-direction: column;
  align-items: flex-start; text-align: left;
  overflow: hidden;
  max-height: 600px;
  padding: 4px 8px 8px 8px;
  transition: max-height 0.5s ease, padding 0.5s ease;
}
.oxel_accordion__content__hidden {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.accordion-text {
  max-width: 90%;
  margin-bottom: 20px;
  color: #262325;
  font-size: 15px;
  line-height: 21px;
}

.faq-divider {
  width: 100%;
  height: 1px;
  background-color: #000;
}

@media (max-width: 991px) { 
  .oxel_accordion__row__label { 
    font-size: 20px; 
  } 
}
@media (max-width: 767px) { 
  .oxel_accordion__row__label { 
    font-size: 18px; } 
}
@media (max-width: 479px) { 
  .oxel_accordion__row__label { 
    font-size: 16px; } 
  .oxel_accordion__row svg {
  width: 7px !important;
  height: 10px !important;
}
}
@media (min-resolution: 1.01dppx) and (max-resolution: 1.99dppx) {
  .faq-divider {
    height: 2px;
    transform: scaleY(0.5);
    transform-origin: 50% 0;
  }
}/* ============================================================
   DESIGN-MATCH VERSION  (active — matches the approved Figma)
   ============================================================ */

.legal-page { max-width: 820px; margin-left: auto; margin-right: auto; }

.legal-page h1 {
  font-size: 54px;
  font-weight: 400;
  color: #000;
  margin-bottom: 4px;
}

.legal-page h2 {
  font-size: 18px;
  font-weight: 400;
  color: #000;
  margin: 32px 0 10px;
}

.legal-page h3 {
  font-size: 15px;
  font-weight: 400;
  color: #000;
  margin: 20px 0 8px;
}

.legal-page p,
.legal-page li {
  font-size: 15px;
  line-height: 22px;
  color: #000;
}

/* Flatten emphasis to match the design (no bold defined-terms) */
.legal-page strong {
  font-weight: 400;
}

/* FLAG: link treatment — design appears to use plain dark links.
   Confirm against Figma: underlined or not? black or dark grey?
   Defaulting to black + underline (accessible, non-brand). */
.legal-page a {
  color: #000;
  text-decoration: underline;
}

/* Anchor jumps clear the sticky header */
.legal-page [id] {
  scroll-margin-top: 120px;
}

.legal-page .legal-part {
  font-size: 26px;
  font-weight: 400;
  margin-top: 56px;
  margin-bottom: 8px;
}

/* first Part shouldn't have a big gap above it */
.legal-page .legal-part:first-of-type {
  margin-top: 32px;
}

@media (max-width:992px) {
   .legal-page h1 {font-size: 42px;}
   .legal-page h2 {font-size: 18px;}
}
@media (max-width:767px) {
    .legal-page h1 {font-size: 32px;}
}
@media (max-width:479px) {
    .legal-page h1 {font-size: 22px;}
}

/* ============================================================
   BRAND / SEMANTIC VERSION  (commented — un-comment to swap)
   Same layout, but brand-orange links and bold defined-terms.
   To switch: comment out the block above, un-comment this.
   ============================================================ */

/*
.legal-page a { color: #cd734f; }
.legal-page strong { font-weight: 700; }
*/:root { --sci-col: 1200px; --cat-hero-col: 1090px; }

/* ---------- Shared: article cards ---------- */
.sci-card-link {
  display: flex; flex-direction: column; height: 100%; width: 100%;
  align-items: stretch; text-align: left; color: #262325;
}
.sci-card-img { width: 100%; height: auto; aspect-ratio: 287 / 180; object-fit: cover; display: block; }
.sci-card-body { display: flex; flex-direction: column; flex-grow: 1; padding: 19px 26px 24px; }
.sci-card-title { font-size: 22px; font-weight: 400; color: #262325; text-align: left; margin: 0; }
.sci-card-blurb { font-size: 13px; color: #262325; text-align: left; margin: 6px 0 0; }
.sci-card-body .sci-card-blurb {
  line-height: 1.5;
  max-height: 3em;    
  overflow: hidden;
}
.sci-card-meta { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 12px; }
.sci-card-arrow { color: #545454; }
.sci-card-arrow svg { display: block; width: 10px; height: 10px; }

/* ---------- Shared: slider track ---------- */
.sci-track {
  flex: 1 1 0%; min-width: 0; display: flex; flex-direction: row; gap: 31px;
  align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.sci-track::-webkit-scrollbar { display: none; }
.sci-track > div, .science-track > div { width: 287px; flex-shrink: 0; scroll-snap-align: start; background-color: #F0F0F0; display: flex; }
.slider-track .oxy-repeater-pages-wrap,
.sci-track .oxy-repeater-pages-wrap,
.docs-track .oxy-repeater-pages-wrap { display: none !important; }   /* sliders never paginate */
@media (max-width: 767px) {
  .sci-track { gap: 14px; } 
  .sci-track > div,
  .science-track > div { width: clamp(175px, 46vw, 240px); }
  .sci-card-blurb { display: none; }
  .sci-card-img { aspect-ratio: 155 / 115; }
}

@media (max-width: 479px) {
  /* .sci-track > div width removed — the clamp's 175px floor covers small phones,
     exactly as it does for the product cards. */
  .sci-card-title { font-size: 16px; }
  .sci-card-body { padding: 12px 14px; }
  .sci-card-read { font-size: 10px; }
}

/* ---------- Blog archive: layout + category tiles ---------- */
.sci-pad       { padding-left:  max(20px, calc((100vw - var(--sci-col)) / 2)); }
.sci-pad-right { padding-right: max(20px, calc((100vw - var(--sci-col)) / 2)); }
.sci-tile {
  width: calc((100% - 60px) / 6); aspect-ratio: 169 / 120; container-type: inline-size;
  align-items: flex-start; justify-content: flex-start; text-align: left; color: #262325;
}
@media (max-width: 767px) { .sci-tile { width: calc((100% - 24px) / 3); } }
@media (max-width: 479px) { .sci-tile { width: calc((100% - 14px) / 3); } }
.sci-tile .sci-tile-label {
  margin: 0; font-size: clamp(12px, 12.5cqw, 22px);
  padding-left: min(11.8cqw, 20px); padding-top: min(9.5cqw, 16px); white-space: nowrap;
}
.sci-tile-btn {
  position: absolute; width: min(17.8cqw, 30px); height: min(17.8cqw, 30px);
  right: min(7.1cqw, 12px); bottom: min(7.1cqw, 12px);
  background-color: #EFEFEF; border-radius: 50%; color: #262325;
  display: flex; align-items: center; justify-content: center;
}
.sci-tile-btn svg { display: block; width: 30%; height: auto; }
.sci-tile--hair         { background: linear-gradient(180deg, #858070, #AD795D); }
.sci-tile--sex          { background: linear-gradient(180deg, #966574, #B56D5F); }
.sci-tile--weight       { background: linear-gradient(180deg, #A4BBC1, #BA9483); }
.sci-tile--performance  { background: linear-gradient(180deg, #CAB567, #CC9259); }
.sci-tile--testosterone { background: linear-gradient(180deg, #3C5669, #8B665A); }
.sci-tile--sleep        { background: linear-gradient(180deg, #D3B49D, #D09172); }

/* ---------- Category archive: hero ---------- */
.cat-hero { position: relative; }
.cat-hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.2); pointer-events: none; }
.cat-hero-inner { position: relative; z-index: 1; padding: 48px max(20px, calc((100vw - var(--cat-hero-col)) / 2)) 63px; }
.cat-hero-crumb a { color: inherit; text-decoration: none; }
.cat-hero-crumb a:hover { text-decoration: underline; }
@media (max-width: 767px) { .cat-hero-inner { padding-top: 30px; padding-bottom: 47px; } }

/* ---------- Category archive: body ---------- */
.cat-body { padding-left: max(20px, calc((100vw - 1240px) / 2)); padding-right: max(20px, calc((100vw - 1240px) / 2)); }
.cat-intro-wrap { max-width: 1090px; margin: 0 auto; }
.cat-intro, .cat-intro p { font-size: 20px; color: #262325; text-align: left; margin: 0; }   /* added: intro is now a code block, needs its font in CSS */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 30px; }
.cat-grid > div:not(.oxy-repeater-pages-wrap) { display: flex; background-color: #F0F0F0; }
@media (max-width: 991px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 14px; }
  .cat-body { padding-left: 20px; padding-right: 20px; }
  .cat-intro, .cat-intro p { font-size: 16px; }

}

/* ---------- Category archive: pagination + empty state ---------- */
.oxy-repeater-pages-wrap { grid-column: 1 / -1; margin-top: 64px; background: transparent; }
.oxy-repeater-pages { display: flex; justify-content: center; align-items: center; gap: 6px; width: 100%; }
.oxy-repeater-pages .page-numbers {
  display: flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 4px;
  font-size: 12px; font-weight: 600; color: #545454; text-decoration: none; border-radius: 50%; background: transparent;
}
.oxy-repeater-pages a.page-numbers:hover { color: #262325; }
.oxy-repeater-pages .page-numbers.current { background: #262325; color: #fff; width: 20px; min-width: 20px; padding: 0; }
.oxy-repeater-pages .page-numbers.dots { color: #545454; }
.oxy-repeater-pages .prev, .oxy-repeater-pages .next {
  width: 32px; height: 32px; min-width: 32px; padding: 0;
  font-size: 0; background: #EFEFEF; border-radius: 50%; position: relative;
}
.oxy-repeater-pages .prev:hover, .oxy-repeater-pages .next:hover { background: #e3e3e1; }
.oxy-repeater-pages .prev::before, .oxy-repeater-pages .next::before {
  content: ""; width: 8px; height: 12px; background-color: #262325;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.25 15'%3E%3Cpath d='M5.75 7.5L0 1.75L1.75 0L9.25 7.5L1.75 15L0 13.25Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.25 15'%3E%3Cpath d='M5.75 7.5L0 1.75L1.75 0L9.25 7.5L1.75 15L0 13.25Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.oxy-repeater-pages .prev::before { transform: rotate(180deg); }
.oxy-repeater-pages .prev.disabled, .oxy-repeater-pages .next.disabled { opacity: 0.35; pointer-events: none; }
.cat-empty { text-align: center; padding: 20px 0 60px; }
.cat-empty h3 { margin-bottom: 42px; }
.cat-empty p { max-width: 480px; margin: 0 auto 24px; color: #262325; }

/* ---------- Single article: hero ---------- */
.article-hero { position: relative; }
.article-hero .ct-section-inner-wrap { padding: 0; }
.article-hero-inner { max-width: 1090px; margin: 0 auto; padding: 64px 20px 72px; }
.article-hero-main { max-width: 820px; color: var(--cat-ink, #fff); }
.article-crumb { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--cat-ink, #fff); }
.article-crumb a { color: inherit; text-decoration: none; }
.article-crumb a:hover { text-decoration: underline; }
.article-title { color: var(--cat-ink, #fff); margin: 0; }
.article-meta { display: flex; flex-direction: column; gap: 4px; }
.article-meta-line, .article-meta-dates { font-size: 13px; color: var(--cat-ink, #fff); opacity: 0.9; }
.article-reviewer { flex-shrink: 0; }
.reviewer-card { background: #fff; padding: 24px; max-width: 320px; }
.reviewer-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #858271; margin-bottom: 14px; }
.reviewer-body { display: flex; flex-direction: row; gap: 16px; align-items: flex-start; }
.reviewer-photo { width: 80px; height: 80px; object-fit: cover; flex-shrink: 0; background: #d9d9d9; }
.reviewer-text { display: flex; flex-direction: column; }
.reviewer-name { font-size: 18px; font-weight: 500; color: #262325; }
.reviewer-role { font-size: 12px; color: #858271; margin-bottom: 8px; }
.reviewer-bio { font-size: 11px; line-height: 1.5; color: #262325; margin: 0; }
@media (max-width: 767px) {
  .article-hero-inner { padding: 40px; gap: 24px; }
  .article-title { font-size: 22px; }
  .article-meta-line, .article-meta-dates { font-size: 11px; }
  .reviewer-card { max-width: 320px; padding: 18px; }
  .reviewer-name { font-size: 15px; }
  .reviewer-role { font-size: 11px; }
  .reviewer-bio  { font-size: 11px; }
  .reviewer-photo { width: 72px; height: 72px; }
}

/* ---------- Single article: body ---------- */
.article-body .ct-section-inner-wrap { padding: 0; }
.article-body-inner { max-width: 780px; margin: 0 auto; padding: 0 20px; }
.article-featured { margin-bottom: 40px; }
.article-featured-img { display: block; width: 100%; height: auto; }
.article-content { font-size: 16px; line-height: 1.6; color: #262325; }
.article-content p { margin: 0 0 1.1em; }
.article-content h2 { margin: 1.4em 0 0.5em; }
.article-content h3 { margin: 1.2em 0 0.4em; }
.article-content em, .article-content i { color: #CD734F; }
.article-content a { color: #CD734F; text-decoration: underline; }
.article-content img { width: 100%; height: auto; display: block; margin: 24px 0; }
.article-content figure, .article-content .wp-caption { width: 100% !important; max-width: 100% !important; margin: 24px 0; }
.article-content figure img { margin: 0; }
.article-content figcaption, .article-content .wp-caption-text { font-size: 13px; color: #858271; margin-top: 8px; }
.article-content ul, .article-content ol { margin: 0 0 1.1em 1.2em; }
@media (max-width: 767px) {
  .article-body-inner { padding: 0 40px; }
  .article-featured { margin-left: -40px; margin-right: -40px; }
  .article-content { font-size: 15px; }
}

/* ---------- Single article: related articles slider ---------- */
.related-section { padding: 70px 0 80px; background: #fff; }
.related-heading { margin: 0 0 32px; padding-left: max(20px, calc((100vw - 1090px) / 2)); }
.related-track {
  padding-left: max(20px, calc((100vw - 1090px) / 2));         /* start position (aligns first card with heading) */
  scroll-padding-left: max(20px, calc((100vw - 1090px) / 2));  /* KEY: keeps the offset on load, lets cards scroll off-left */
  padding-right: 20px;                                         /* small trailing space */
}
.related-arrows-wrap {
  margin-top: 24px;
  padding-right: max(20px, calc((100vw - 1090px) / 2));        /* arrows pinned to the column's right edge */
  display: flex; justify-content: flex-end;
}

/* arrows — copied from the Science slider's computed values (grey fill, no border) */
.related-arrows-wrap .slider-arrows { display: flex; flex-direction: row; gap: 13px; }
.related-arrows-wrap .slider-arrow {
  width: 30px; height: 30px; border-radius: 50%;
  background-color: #D9D9D9; border: none; color: #404040;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.related-arrows-wrap .slider-arrow svg { width: 9px; height: 13px; display: block; }
.related-arrows-wrap .arrow-prev svg { transform: rotate(180deg); }

@media (max-width: 767px) {
  .related-heading { padding-left: 40px; }
  .related-track { padding-left: 40px; scroll-padding-left: 40px; }
  .related-arrows-wrap { display: none; }
}

/* ===== Single blog article — WYSIWYG content headings only ===== */
.article-content h2 {
  font-size: 22px;
  font-weight: 400;
}

.article-content h3 {
  font-size: 20px;
  font-weight: 400;
}

.article-content h4 {
  font-size: 18px;
  font-weight: 400;
}

/* ===== MOBILE: unbox the category label on the blog archive =====
   REVERSIBLE: delete this whole block to restore the grey boxes. No markup,
   builder or JSON changes are involved.
   !important is required, not lazy: the box is styled at ID level in the
   template's page CSS (#div_block-25-286 etc.), which loads after universal.css.
   Targeted by class via :has() so new category rows are covered automatically —
   the row wrapper has no class of its own and every row has a different ID. */
@media (max-width: 480px) {
  /* stack: label above the slider instead of beside it */
  .ct-div-block:has(> .sci-label) {
    flex-direction: column !important;
    gap: 8px !important;
  }
  /* strip the grey box, let the title be just a title */
  .sci-label {
    background-color: transparent !important;
    width: auto !important;
    padding: 0 !important;
  }
}/* ===== FAQs page — tabs layout ===== */
/* .faq-tabs goes on the SECTION (#101) — it's the flex parent of the
   tabs wrapper and the contents wrapper. If the columns stack instead
   of sitting side by side, move this class to the Section's inner
   container instead. */
.faq-tabs .ct-section-inner-wrap{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  max-width: 1090px;              
  margin: 0 auto;
}

.faq-tabs-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;                      
  flex: 0 0 300px;                
}

.faq-tab {
  font-size: 24px;                
  font-weight: 500;
  line-height: 1.3;
  color: #262325;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.2s ease;
}
.faq-tab:hover { color: #CD734F; }

/* Oxygen adds "oxy-active" to the active tab automatically.
   If the colour doesn't change, inspect the active tab and tell me
   the real class — swap it in here. */
.faq-tab.tabs-9216-tab-active { color: #CD734F; }

.faq-tabs-content-wrap {
  flex: 1 1 0%;
  min-width: 0;
}

.faq-panel { width: 100%; }

.faq-panel-title { margin: 0 0 40px; } /* size comes from the typography stylesheet */

.faq-item {
  width: 100%;
  padding: 32px 0;                /* estimate */
  border-bottom: 1px solid #262325;
}
.faq-item:first-of-type { padding-top: 0; }
.faq-item:last-of-type { border-bottom: none; }

.faq-q {
  font-size: 20px;                /* estimate */
  font-weight: 400;
  margin: 0 0 16px;
  color: #262325;
}

.faq-a {
  font-size: 15px;                /* estimate */
  line-height: 1.55;
  color: #262325;
}

/* ===== Tablet ===== */
@media (max-width: 991px) {
  .faq-tabs { gap: 48px; }
  .faq-tabs-list { flex-basis: 220px; }
  .faq-tab { font-size: 22px; }
}


/* ===== Phone: horizontal pill navigation =====
   DELIBERATE departure from the design, per client instruction: the tab list
   becomes a wrapping row of pills instead of a vertical list. */
@media (max-width: 767px) {

  /* Stack list above content. Declared on the inner wrap as well as the section
     because the inner wrap is the actual flex container (see the desktop rule). */
  .faq-tabs .ct-section-inner-wrap {
    flex-direction: column;
    gap: 32px;
  }
  .faq-tabs {
    flex-direction: column;
    gap: 32px;
  }

  /* The list: a row that wraps onto as many lines as it needs */
  .faq-tabs-list {
    flex: none;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
  }

  /* Pills. 44px min-height is the iOS comfortable-tap minimum; the 10px gap
     stops adjacent pills being mis-tapped. */
  .faq-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 26px;
    background-color: #F0F0F0;
    color: #262325;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  /* The label is a Text Block child of the tab, not the tab itself */
  .faq-tab > * { margin: 0; }

  /* Cancel the desktop orange-text hover — the pill communicates state now */
  .faq-tab:hover { color: #262325; }

  .faq-tab.tabs-9216-tab-active {
    background-color: #CD734F;
    color: #fff;
  }

  .faq-item { padding: 24px 0; }
}/* Element-level grid indent — use when the section itself must stay full-bleed */
.grid-indent {
  width: 100%;
  padding-left: max(20px, calc((100vw - 1360px) / 2 + 140px));
  padding-right: 20px;
}
@media (max-width: 767px) {
  .grid-indent { padding-left: 20px; padding-right: 20px; }
}

/* ===== Parallax background layer ===== */
.parallax-section { overflow: clip; }
.parallax-section .ct-section-inner-wrap { 
  position: relative;
  max-width: none;      /* was capped at 1360 — layer couldn't reach full width */
  width: 100%;
  min-height: inherit;  /* picks up the section's min-height so the layer has real height */
}

.parallax-section .ct-section-inner-wrap > .cat-hero-overlay {
  position: absolute;
  inset: 0;
}
.parallax-layer {
  position: absolute;
  top: -50%;
  left: 0;
  right: 0;
  height: 200%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.parallax-section .ct-section-inner-wrap > *:not(.parallax-layer) {
  position: relative;
  z-index: 1;               
}

@supports (animation-timeline: view()) {
  .parallax-layer {
    animation: parallax-rise linear both;
    animation-timeline: view();
  }
  @keyframes parallax-rise {
    from { transform: translateY(-22%); }
    to   { transform: translateY(22%); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .parallax-layer { animation: none; transform: none; }
}

/* ===== MOBILE: smaller parallax overscan, motion retained =====
   Zoom comes entirely from the overscan — background-size:cover must fill a box
   `height`% of the section, so 200% renders the image at 2x scale. Measured on
   /the-science/ at 480px: section 480x400, layer 480x800.
   Travel does not affect zoom, but it is capped by the overscan:
   safe travel = (k-1)/2k of the layer height, k = height/100.
   k=1.3 -> max 11.5%; using 10% for a little margin.
   Result at a 400px section: layer 520px, 60px slack each side, 52px of travel,
   zoom down from 2.0x to 1.3x. */
@keyframes parallax-rise-sm {
  from { transform: translateY(-10%); }
  to   { transform: translateY(10%); }
}

@media (max-width: 767px) {
  .parallax-layer {
    top: -15%;
    height: 130%;
    animation-name: parallax-rise-sm;
  }
}

/* Step number circles — shared by the vertical pages and the programme pages.
   flex-shrink:0 is load-bearing: .step-content is width:100%, so the flex row
   always overflows and without this the circle loses ~4px of width and renders
   as an oval — by an amount that changes with the container width, which is why
   it used to need re-tuning at every breakpoint. */
.step-indicator {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding-top: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-content { min-width: 0; }   /* lets the text column absorb the row's width */

@media (max-width: 767px) {
  .step-indicator { width: 30px; height: 30px; font-size: 15px; }
}

.cat-hero-title .cat-hero-h1 {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  margin: 0;
}

/* These are the linkedin buttons for the doctors */

/* Default State */
.oxel_icon_button__container {
  background-color: #CD734F !important;
  transition: background-color 0.3s ease-in-out !important;
  border: 1px solid #CD734F !important;
}

.oxel_icon_button__container .oxel_icon_button_text,
.oxel_icon_button__container .oxel_icon_button_icon {
  color: #FFFFFF !important;
  fill: #FFFFFF !important; /* Ensures SVG icons respond correctly */
  transition: color 0.3s ease-in-out, fill 0.3s ease-in-out !important;
}

/* Hover State */
.oxel_icon_button__container:hover {
  background-color: #FFFFFF !important;
  border: 1px solid #CD734F !important;
}

.oxel_icon_button__container:hover .oxel_icon_button_text,
.oxel_icon_button__container:hover .oxel_icon_button_icon {
  color: #CD734F !important;
  fill: #CD734F !important;
}