.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;
				}
			}
.oxel_back_to_top_container:hover{
transform:scale(1.1,1.1) translateY(-3px); background-color:#43beef;
}
.oxel_back_to_top_container {
 width:42px;
 height:42px;
 border-radius:50px;
 background-color:#76cff2;
 position:fixed;
 z-index:1500;
 right:32px;
 bottom:32px;
 text-align:center;
 overflow:hidden;
 transition-duration:0.3s;
 transition-timing-function:ease-in-out;
 box-shadow:0px 4px 17px -10px #1e1e1e;
}
.oxel_back_to_top_container:not(.ct-section):not(.oxy-easy-posts),
.oxel_back_to_top_container.oxy-easy-posts .oxy-posts,
.oxel_back_to_top_container.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.oxel_back_to_top_icon {
color: #ffffff;}.oxel_back_to_top_icon 
>svg {width: 21px;height: 21px;}.oxel_back_to_top_icon {
 margin-bottom:-4px;
}
.grad-bar {
}
.grad-bar-dark {
}
.grad-bg-layer {
 position:absolute;
 top:0px;
 right:0px;
 bottom:0px;
 left:0px;
 z-index:0;
}
.primary-text {
 color:#ffffff;
 letter-spacing:0%;
 line-height:120%;
 font-size:28px;
 min-width:60%;
}
@media (max-width: 1360px) {
.primary-text {
 font-size:20px;
 min-width:45%;
}
}

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

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

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

.grad-accent {
}
.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;
}
}

.grow-card {
}
.ri-trigger {
}
.sub-card-inner {
}
.sub-card-top {
}
.sub-primary-text {
 max-width:150px;
}
@media (max-width: 991px) {
.sub-primary-text {
 max-width:110px;
}
}

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

.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;
 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;
 padding-bottom:8px;
}
@media (max-width: 767px) {
.solid-btn-orange {
}
}

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

.contained {
}
.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 {
}
}

.align-to-container {
}
.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-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;
}
}

.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;
}
}

.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;
 text-align:left;
}
@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 {
}
.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;
}
}

.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;
}
.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;
}
.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;
}
.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;
}
}

.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;
 text-align:center;
}
.faq-panel:not(.ct-section):not(.oxy-easy-posts),
.faq-panel.oxy-easy-posts .oxy-posts,
.faq-panel.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
}
@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;
 text-align:left;
}
.faq-a {
 color:#000000;
 text-align:left;
}
@media (max-width: 991px) {
.faq-a {
 font-weight:400;
}
}

.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 {
}
.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;
}
@media (max-width: 479px) {
.cta-subtext {
}
}

.cat-hero-sub {
}
.main-work-btn {
}
.oryx-animation {
 color:#cd734f;
}
@media (max-width: 991px) {
.oryx-animation {
 width:50%;
}
}

@media (max-width: 767px) {
.oryx-animation {
 width:100%;
}
}

.ht-number {
 border-top-color:#cd734f;
 border-right-color:#cd734f;
 border-bottom-color:#cd734f;
 border-left-color:#cd734f;
 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:14px;
 font-weight:500;
 text-align:center;
 color:#ffffff;
 background-color:#cd734f;
 min-width:25px;
 min-height:25px;
}
.ht-number:not(.ct-section):not(.oxy-easy-posts),
.ht-number.oxy-easy-posts .oxy-posts,
.ht-number.ct-section .ct-section-inner-wrap{
display:flex;
align-items:center;
justify-content:center;
}
@media (max-width: 1360px) {
.ht-number {
 font-size:12px;
 min-width:25px;
 min-height:25px;
}
}

@media (max-width: 991px) {
.ht-number {
}
}

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

@media (max-width: 479px) {
.ht-number {
}
}

.hc-text {
 color:#ffffff;
 line-height:1.6;
 font-size:16px;
}
@media (max-width: 1360px) {
.hc-text {
 font-size:12px;
 text-align:left;
}
}

.hc-arrow {
 color:#545454;
 width:8px;
 min-width:8px;
 margin-bottom:2px;
}
.hc-banner {
 gap:15px;
 width:100%;
 text-align:justify;
}
.hc-banner:not(.ct-section):not(.oxy-easy-posts),
.hc-banner.oxy-easy-posts .oxy-posts,
.hc-banner.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
gap:15px;
}
@media (max-width: 1360px) {
.hc-banner {
 text-align:justify;
 gap:5px;
}
.hc-banner:not(.ct-section):not(.oxy-easy-posts),
.hc-banner.oxy-easy-posts .oxy-posts,
.hc-banner.ct-section .ct-section-inner-wrap{
justify-content:space-around;
gap:5px;
}
}

.ht-anchor-btn:hover{
 color:#262325;
 background-color:#ffffff;
}
.ht-anchor-btn {
 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: 1360px) {
.ht-anchor-btn {
 padding-right:15px;
 padding-left:15px;
 padding-bottom:5px;
 padding-top:5px;
}
}

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

.sci-tile--fundamentals {
}
.promo-bar-wrap {
}
.footer-legal-wrap {
}
.footer-col-legal {
}
.oryx-hero-cta {
}
.oryx-quiz-cta {
}
.oryx-quiz-cta-light {
}
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;
  }
}

/* Footer legal row (issue #144). From 480px the Legal column is hidden and its links
   show as a row under the credits (Code Block "Legal Row"). At 479px and below the
   Legal column comes back as an accordion, like the other menus, and the row is hidden. */
body .footer-container .footer-col.footer-col-legal {
  display: none;
}
.footer-legal-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 24px;
  row-gap: 8px;
  font-size: 12px;
  line-height: 19.2px;
}
.footer-legal-row a {
  color: #FFFFFF;
  text-decoration: none;
}
.footer-legal-row a:hover {
  text-decoration: underline;
}
@media (max-width: 479px) {
  body .footer-container .footer-col.footer-col-legal {
    display: flex;
  }
  .footer-legal-wrap {
    display: none;
  }
}
@media (max-width: 767px) {
  /* The socials sit in the section now, not the Legal column; the section gap already
     gives them the 40px they had, so cancel the class's 16px margin here. */
  .ct-section-inner-wrap > .socials-container {
    margin-top: 0;
  }
}
/* 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: 767px) 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: 767px) 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; padding: 4px 22px; border-radius: 26px; }
.product-cat a { color: #262325!important; 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); }
  .products-track > * { width: 100%; }
  .product-card { width:100%; }
  .products-track > * { width: 100%; }
  .products-track:not(.ct-section):not(.oxy-easy-posts) { gap: 42px; margin-left:-8px; }
  .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: column; }       
  .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%;
  }
}

/* ===== Coming-soon cards, mobile: pill visible, card visibly inactive =====
   Approved design 2026-08-19 (Figma 399:2726). Mobile only — desktop unchanged.
   Scoped to #section-72-2 (Coming Soon Products) so the two LIVE verticals in
   the row above are untouched at every breakpoint.
   The section ID makes these rules (1,1,0) or better, which beats Oxygen's
   element-level (1,0,0) styles on the headings, pills and card heights — so no
   !important is needed except where one must beat an existing !important. */
@media (max-width: 767px) {

  /* The card now holds a two-line heading AND a pill, so let it grow. */
  #section-72-2 .grad-bar {
    height: auto;
    min-height: 104px;
  }

  /* Grid, so the chevron sits beside the heading and the pill drops below —
     with nothing moved in the builder. */
  #section-72-2 .sub-card-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    column-gap: 12px;
    row-gap: 10px;
    padding: 16px 20px;
  }

  /* Dissolve the two row wrappers so their children become grid items.
     Same technique as .why-row further up this file. */
  #section-72-2 .sub-card-top,
  #section-72-2 .sub-card-bottom {
    display: contents;
  }

  /* Reserve two lines of heading so every pill sits at the same height,
     whether the heading wraps or not. 2.4em = 2 × the 120% line-height on
     .primary-text, so it follows the font size at each breakpoint (22px at
     phone-landscape, 18px at phone-portrait) without hardcoding either. */
  #section-72-2 .sub-primary-text {
    grid-column: 1;
    grid-row: 1;
    min-height: 2.4em;
  }
  #section-72-2 .sub-prod-chevron { grid-column: 2; grid-row: 1; }

  /* Unhide the pill. Oxygen hides it at phone-landscape at element level on all
     four text blocks; this outranks that without touching the builder. */
  #section-72-2 .sub-card-bottom .ct-text-block {
    display: inline-flex;
    align-items: center;
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    padding: 5px 14px;
    font-size: 11px;
  }

  /* Visibly inactive. */
  #section-72-2 .sub-primary-text,
  #section-72-2 .sub-prod-chevron {
    color: #808080;
  }

  /* Touch devices can leave :hover applied after a tap, and these cards aren't
     links, so nothing navigates away to clear it. Without these, tapping a
     coming-soon card turns its heading white on light grey and leaves it. */
  #section-72-2 .grad-bar:hover .primary-text {
    color: #808080 !important;
  }
  #section-72-2 .grad-bar:hover .sub-prod-chevron svg {
    color: #808080 !important;
    fill: #808080 !important;
  }
  /* Don't reveal the orange gradient behind a card presented as inactive. */
  #section-72-2 .grad-bar:hover .grad-bg-layer {
    opacity: 0;
  }
}

/* ===== Coming-soon cards: nothing here is interactive =====
   Feedback was that the cards invite interaction they can't deliver. The
   greyed text and "Coming soon" pill handle the visual side; this removes the
   remaining physical signals — text selection, the iOS long-press callout,
   the Android/iOS tap highlight, and the I-beam cursor on desktop. */
#section-72-2 .sub-card-inner {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: default;
}

/* ===== TEMPORARY: Dr Poole removed from the homepage doctors row =====
   Added 2026-08-19. With one card display:none'd, the ≥992 rule's
   flex: 1 1 0% lets the remaining two split the whole track — 304px each
   becomes 468px. The cards stay flexible so no space is stranded, but
   max-width caps how large they get. The text column is fixed at 255px and
   cannot absorb the difference, so some trailing space is unavoidable:
   lower the cap for smaller cards and more space, raise it for the reverse.
   TO REVERT WHEN SHE'S REINSTATED: delete this entire block. */
@media (min-width: 992px) {
  .doctors-track {
    justify-content: center;
    gap: 64px !important;
  }
  .doctors-track > .doctor-container {
    flex: 1 1 0%;
    max-width: 350px;
  }
}

/* ===== doctor cards at ≤767 =====
   There was never a width rule for .doctor-container below 767px — the
   768–991 band pins them to 250px, ≥992 uses flex, and ≤767 had nothing. Pin them, matching the tablet band. */
@media (max-width: 767px) {
  .doctors-track {
    /* `safe` is load-bearing: plain `center` on a scroll container pushes the
       overflow off the LEFT edge, where it cannot be scrolled to. `safe`
       falls back to flex-start the moment the cards overflow, so two cards
       centre on a tablet and still scroll properly on a phone. */
    justify-content: safe center;
  }
  .doctors-track > .doctor-container {
    flex: 0 0 250px;
  }
  .doctors-track > .doctor-container .dr-img-home { width: 100%; }
  .doctors-track > .doctor-container .dr-content { max-width: none; }
}

/* ===== Doctors section: stays a two-column row down to 481px =====
   Added 2026-08-19. Oxygen's Section setting drops this to a column at its
   phone-landscape breakpoint (≤767). This keeps the text-beside-cards layout
   down to 481px, so it only stacks on phones.
   `body #section-174-2` is (1,2,0), which beats Oxygen's element-level
   (1,1,0) rule on the inner wrap. */
@media (min-width: 481px) and (max-width: 767px) {

  body #section-174-2 .ct-section-inner-wrap {
    flex-direction: row;
  }

  /* The ≤767 rule earlier in this file strips both gutters so the mobile
     slider can run full-bleed. A row layout needs the left one back.
     !important to match the rule it's overriding. */
  .home-doctors-section .ct-section-inner-wrap {
    padding-left: 20px !important;
    padding-right: 0 !important;
  }

  /* Cap the text column so the cards get usable width, and drop its own
     gutters since the inner wrap now supplies the left one. */
  body #div_block-175-2 {
    max-width: 300px;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Step bar: align "1" with the hero's "Get started" (same formula as .align-to-container) */
#section-950-2 > .ct-section-inner-wrap {
  max-width: 100%;
  padding-left: max(20px, 50vw - 660px);
  padding-right: max(20px, 50vw - 660px);
}

#div_block-957-2 {
  align-self: flex-start;
  padding-left: 0 !important; /* overrides the 2px set at max-width 1360px */
}

a.oryx-hero-cta {
  display: none;
}

@media (max-width: 767px) {
  #section-817-2 {
    position: relative;
  }

  #section-817-2 a.oryx-hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    width: min(240px, calc(100% - 32px));         /* centred pill; never closer than 16px to the sides */
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
    min-height: 44px;
    padding: 10px 24px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.1) 100%),
      rgba(38, 35, 37, 0.32);                     /* tint: raise the last number for darker */
    -webkit-backdrop-filter: blur(14px) saturate(180%);   /* Safari */
    backdrop-filter: blur(14px) saturate(180%);           /* Chrome, Edge, Firefox */
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.3),   /* top rim highlight */
      inset 0 -1px 1px rgba(255, 255, 255, 0.1),  /* bottom rim */
      inset 0 -8px 16px rgba(255, 255, 255, 0.06),
      0 8px 24px rgba(0, 0, 0, 0.18);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
  }

  /* Make room for the button inside both cards */
  #link-819-2,
  #div_block-1086-2 {
    padding-bottom: 76px;
  }

  /* Chevrons go on phones only */
  #code_block-825-2,
  #code_block-1090-2 {
    display: none;
  }
}

/* Browsers without backdrop-filter get a slightly stronger tint instead */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  #section-817-2 a.oryx-hero-cta {
    background: rgba(38, 35, 37, 0.55);
  }
}

a.oryx-quiz-cta {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 9990;
  display: block;
  width: max-content;
  padding: 14px 24px;                           /* 48px tall with the border */
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.1) 100%),
    rgba(38, 35, 37, 0.32);                     /* tint: raise the last number for darker */
  -webkit-backdrop-filter: blur(14px) saturate(180%);   /* Safari */
  backdrop-filter: blur(14px) saturate(180%);           /* Chrome, Edge, Firefox */
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),   /* top rim highlight */
    inset 0 -1px 1px rgba(255, 255, 255, 0.1),  /* bottom rim */
    inset 0 -8px 16px rgba(255, 255, 255, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.18);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

a.oryx-quiz-cta .oryx-quiz-cta-light {
  font-weight: 300;
}

a.oryx-quiz-cta::after {
  content: "";
  display: inline-block;
  vertical-align: -1px;
  margin-left: 10px;
  width: 7px;
  height: 11px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 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 10 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;
}

a.oryx-quiz-cta:hover {
  background-color: rgba(38, 35, 37, 0.5);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

a.oryx-quiz-cta:focus-visible {
  outline: 2px solid #CD734F;
  outline-offset: 3px;
}

html.ri-open a.oryx-quiz-cta {
  visibility: hidden;
}

@media (max-width: 767px) {
  a.oryx-quiz-cta {
    display: none;
  }
}

/* Browsers without backdrop-filter get a solid tint instead */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  a.oryx-quiz-cta {
    background: rgba(38, 35, 37, 0.85);
  }
}

/* Hero For Men / For Women labels as glass pills (the cards already link to the quiz) */
#headline-820-2,
#headline-1087-2 {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 10px 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.1) 100%);
  -webkit-backdrop-filter: blur(4px) saturate(180%);    /* Safari */
  backdrop-filter: blur(4px) saturate(180%);            /* Chrome, Edge, Firefox */
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),   /* top rim highlight */
    inset 0 -1px 1px rgba(255, 255, 255, 0.1),  /* bottom rim */
    inset 0 -8px 16px rgba(255, 255, 255, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.08);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 22px;
  white-space: nowrap;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

/* Hovering anywhere on the card lifts the pill slightly; mouse only so taps don't stick */
@media (hover: hover) and (pointer: fine) {
  #link-819-2:hover #headline-820-2,
  #div_block-826-2:hover #headline-1087-2 {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.4);
  }
}

@media (max-width: 991px) {
  #headline-820-2,
  #headline-1087-2 {
    font-size: 20px;
  }
}

/* Mobile: smaller pill text and tighter card padding so For Women fits at 320 */
@media (max-width: 480px) {
  #headline-820-2,
  #headline-1087-2 {
    padding: 6px 12px;
    font-size: 16px;
  }

  #link-819-2,
  #div_block-1086-2 {
    padding-left: 16px;
  }
}
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: 860px;
}

.cat-sub-tagline {
  text-wrap: wrap;
}

@media (max-width: 991px) {
  .cat-sub-tagline {
    text-wrap: pretty;
  }
}

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

.cat-hero-heading .ct-span {
  display: inline;
}
.cat-hero-sub { 
  color: white; 
}   /* false */
.hero-dark .cat-hero-sub{ 
  color: black;
}   /* true */
.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);
}

.cat-tagline {
  text-wrap: wrap;
}

.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;
}

/* Overlay: dark layer between the video and the text */
.product-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000000;
  opacity: var(--banner-overlay, 0);
  pointer-events: none;
}

/* ===== Vertical programme cards: homepage card style (#158) ===== */
/* Radius on the image only; the hover image swaps inside it */
.category-gradient .product-media {
  border-radius: 16px;
  margin-bottom: 4px;
}
.category-gradient .product-body {
  box-sizing: border-box;
  padding: 0 6px;
}

/* Full-width Get started with the Explore link under it */
.category-gradient .product-btns {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
.category-gradient .product-btns > * {
  flex: 0 0 auto;
}
.category-gradient .product-btns .solid-btn-orange {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 22px;
  line-height: 1.6;
}

/* Same hit area as Get started; follows the vertical's text colour */
.category-gradient .product-explore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  padding: 8px 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cat-ink, #ffffff);
  text-decoration: none;
}
.category-gradient .product-explore:hover {
  color: var(--cat-ink, #ffffff);
}
.category-gradient .product-explore:hover .product-explore-text {
  text-decoration: underline;
}
.category-gradient .product-explore svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  transition: translate 0.2s;
}
.category-gradient .product-explore:hover svg {
  translate: 3px 0;
}

/* Dragging the slider must not select text or drag images and links */
.category-gradient .slider-track {
  -webkit-user-select: none;
  user-select: none;
}
.category-gradient .slider-track img,
.category-gradient .slider-track a {
  -webkit-user-drag: none;
}
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;
  text-transform: capitalize;
}

.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;
  }
}

.product-name .product-name-link {
    color: inherit; /* Pulls the color from the h3 */
    text-decoration: none; /* Removes the default link underline */
}

/* Optional: Add a hover effect so users know it's a link */
/* .product-name .product-name-link:hover {
    text-decoration:underline; 
} */.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)); }

/* Seven tiles: 4 + 3 above 480px, 2-col at 480px and below (the odd one out
   spans the full row). An 8th tile: delete the three nth-child(n+5) rules
   and it becomes 4 + 4.

   Breakpoints are max-width only, desktop first, so each layer overrides the
   one above and no width (fractional ones included) can fall between them.
   767 and 480 match the rest of the site: 480 is where the mobile type
   switches.

   The row gap is set in every layer, next to the width calcs that depend on
   it. Don't leave it to the template: 286.css changes it at 479px, which
   puts it out of step with these calcs.

   The tile row is the size container, so every tile takes its height from
   the row-1 tile width and both rows stay level even though row 2 is wider.
   `body` beats the ID rules in 286.css. If the tile row is ever rebuilt in
   Oxygen its ID changes; update it here. */
body #div_block-4-286 { container-type: inline-size; gap: 12px; }

.sci-tile {
  width: calc((100% - 36px) / 4); height: calc((100cqw - 36px) / 4 * 120 / 169);
  container-type: inline-size;
  align-items: flex-start; justify-content: flex-start; text-align: left; color: #262325;
}
.sci-tile:nth-child(n+5) { width: calc((100% - 24px) / 3); }

/* Labels may wrap: "Oryx fundamentals" needs two lines on narrower tiles.
   Single-word labels can't wrap, so they're unaffected. */
.sci-tile .sci-tile-label {
  margin: 0; font-size: clamp(12px, 12.5cqw, 22px);
  padding-left: min(11.8cqw, 20px); padding-right: min(11.8cqw, 20px); padding-top: min(9.5cqw, 16px);
}
/* 24px floor: on the narrowest 4-across tiles the button would otherwise
   shrink to 18px. */
.sci-tile-btn {
  position: absolute; width: clamp(24px, 17.8cqw, 30px); height: clamp(24px, 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; }

/* Row 2 tiles are wider than row 1 but share its height, so their label and
   button are scaled by ~0.74 (the row-1/row-2 width ratio) to match row 1.
   Without this, "Oryx fundamentals" runs into the button on narrow tablets. */
.sci-tile:nth-child(n+5) .sci-tile-label {
  font-size: clamp(12px, 9.25cqw, 22px);
  padding-left: min(8.7cqw, 20px); padding-right: min(8.7cqw, 20px); padding-top: min(7cqw, 16px);
}
.sci-tile:nth-child(n+5) .sci-tile-btn {
  width: clamp(24px, 13.2cqw, 30px); height: clamp(24px, 13.2cqw, 30px);
  right: min(5.3cqw, 12px); bottom: min(5.3cqw, 12px);
}

@media (max-width: 767px) {
  body #div_block-4-286 { gap: 7px; }
  .sci-tile { width: calc((100% - 21px) / 4); height: calc((100cqw - 21px) / 4 * 120 / 169); }
  .sci-tile:nth-child(n+5) { width: calc((100% - 14px) / 3); }
}

/* Phone: all tiles equal width, so row 2 goes back to the normal sizing. */
@media (max-width: 480px) {
  .sci-tile, .sci-tile:nth-child(n+5) { width: calc((100% - 7px) / 2); height: calc((100cqw - 7px) / 2 * 120 / 169); }
  .sci-tile:last-child:nth-child(odd) { width: 100%; }
  .sci-tile:nth-child(n+5) .sci-tile-label {
    font-size: clamp(12px, 12.5cqw, 22px);
    padding-left: min(11.8cqw, 20px); padding-right: min(11.8cqw, 20px); padding-top: min(9.5cqw, 16px);
  }
  .sci-tile:nth-child(n+5) .sci-tile-btn {
    width: clamp(24px, 17.8cqw, 30px); height: clamp(24px, 17.8cqw, 30px);
    right: min(7.1cqw, 12px); bottom: min(7.1cqw, 12px);
  }
}

.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); }
.sci-tile--fundamentals { background: linear-gradient(180deg, #DF835E, #cd734f); }

/* ---------- 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;
}/* =====================================================================
   HEALTH CARDS
   Vertical pages (Oxygen template 127), inside the parallax hero
   #section-12-127. Markup is printed by the Code Block inside
   #div_block-13-127, fed by the ACF fields health_cards_heading and
   the repeater health_cards.

   Every value is written out in full, with no custom properties, so
   whatever you see in the inspector is the value to change here.

   Paste this whole file into a NEW Oxygen stylesheet called
   "health-cards", then regenerate the Oxygen CSS cache.
   ===================================================================== */


/* ---------- 1. Headline (sits directly on the photo) ----------
   Light ink by default. Pages with "hero_dark_text" ticked get the
   --dark-ink class from the Code Block. */

.health-cards-section {
  width: 100%;
}

.health-cards-heading {
  max-width: 700px;
  margin: 0 0 36px;
  font-size: 56px;
  line-height: 125%;
  font-weight: 400;
  letter-spacing: -0.1px;
  text-wrap: balance;
  color: #ffffff;
}

.health-cards-section--dark-ink .health-cards-heading {
  color: black;
}


/* ---------- 2. The row of cards ---------- */

.health-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;        /* all three cards match the tallest */
  max-width: 1100px;
  
}


/* ---------- 3. The card, including the frosted glass ----------
   The blur MUST live on the card itself, not on a ::before layer.
   The entrance animation fades opacity, and while an element's opacity
   is animated, a child's backdrop-filter can only see inside that
   element, so a ::before layer blurs nothing.

   BLUR: change the number on BOTH backdrop-filter lines.
   Chrome ignores the -webkit- line and shows a warning on it. That is
   expected: the -webkit- line is for Safari. */

.health-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 0px;
  background: rgba(255, 255, 255, 0.6);          /* tint: raise the last number for a whiter card */
  -webkit-backdrop-filter: blur(3px);            /* Safari */
  backdrop-filter: blur(3px);                    /* Chrome, Edge, Firefox */
  color: black;
  text-decoration: none;
  opacity: 0;
  animation: health-card-flip 600ms ease both;   /* delay is set inline per card by the Code Block */
  transition: background 0.3s;
}

a.health-card:hover {
  background: rgba(255, 255, 255, 0.75);
}

/* Browsers without backdrop-filter get a solid panel instead */
@supports not ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))) {
  .health-card {
    background: rgba(245, 245, 243, 0.92);
  }
}


/* ---------- 4. Stat row: number on the left, graphic on the right ---------- */

.health-card-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  margin-bottom: 18px;
}

.health-card-stat {
  display: block;
  margin: 0;
  font-size: 48px;
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -2px;
  color: #cd734f;
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}

.health-card-unit {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
  color: black;
}


/* ---------- 5. The graphic (SVG pasted into ACF) ----------
   `color` on the wrapper is the accent: every stroke or fill that uses
   currentColor follows it. The other parts have their own class.
   Keep the `>` in the svg rule: without it, a width/height rule can reach
   inside the SVG. */

.health-card-graphic {
  width: 60px;
  height: 60px;
  color: #476c84;              /* ring, icon lines, the "on" dot */
}

.health-card-graphic > svg {
  display: block;
  width: 60px;
  height: 60px;
  overflow: visible;
}

.health-card-graphic .hc-track {
  stroke: #dfe8ee;             /* the empty part of the ring */
}

.health-card-graphic .hc-range {
  stroke-opacity: 0.3;         /* the lighter "up to" arc on 80-90% and 10-15% */
}

.health-card-graphic .hc-marker {
  fill: #ffffff;               /* the small dot at the end of the ring */
}

.health-card-graphic .hc-halo {
  fill: #eef3f6;               /* the circle behind stand-alone icons */
}

.health-card-graphic .hc-dot {
  fill: #dfe8ee;               /* "1 in 5" bars, off */
}

.health-card-graphic .hc-dot-on {
  fill: #476c84;               /* "1 in 5" bars, on */
}


/* ---------- 6. Text ---------- */

.health-card-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.52;
  letter-spacing: -0.15px;
  color: black;
}

.health-card-aside {
  display: block;
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.5;
  color: black;
}

  .page-id-24 .health-cards-heading .hc-heading-wrap { 
    display: block;
    width: 100%;
    min-width:900px;
  }

/* ---------- 7. Tablet (768 to 991): still three across, everything smaller ---------- */

@media (max-width: 991px) {
  .health-cards-heading {
    font-size: 48px!important;
    letter-spacing: -0.1px;
    margin-bottom: 28px;
  }
  .health-cards {
    gap: 14px;
  }
  .health-card {
    padding: 20px 18px;
    border-radius: 0px;
  }
  .health-card-visual {
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 8px;
    min-height: 56px;
    margin-bottom: 14px;
  }
  .health-card-graphic,
  .health-card-graphic > svg {
    width: 46px;
    height: 46px;
  }
  .health-card-stat {
    font-size: 32px;
    letter-spacing: -1.2px;
  }
  .health-card-unit {
    font-size: 12px;
  }
  .health-card-body {
    font-size: 14px;
  }
  .health-card-aside {
    font-size: 12px;
  }
}


/* ---------- 8. Phone (767 and below): one column ---------- */

@media (max-width: 767px) {
  .health-cards-heading {
    font-size: 36px!important;
    letter-spacing: -0.1px;
    margin-bottom: 22px;
    max-width: 415px;
  }
  .page-id-24 .health-cards-heading .hc-heading-wrap { 
    display: block;
    width: 100%;
    min-width: 475px;
  }
  .health-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .health-card {
    padding: 20px;
  }
  .health-card-visual {
    grid-template-columns: minmax(0, 1fr) 56px;
    gap: 10px;
  }
  .health-card-graphic,
  .health-card-graphic > svg {
    width: 56px;
    height: 56px;
  }
  .health-card-stat {
    font-size: 38px;
  }
}

@media (max-width: 515px) {
  .page-id-24 .health-cards-heading .hc-alone { 
    display: block;
    width: 100%;
/*     min-width: 475px; */
  }
}
/* ---------- 9. Small phone (479 and below) ---------- */

@media (max-width: 479px) {
  .health-cards-heading {
    font-size: 26px!important;
  }
  .health-card {
    padding: 18px;
  }
  .health-card-stat {
    font-size: 34px;
  }
  .health-card-body {
    font-size: 13px;
  }
  .page-id-24 .health-cards-heading .hc-alone { 
    display: block;
    width: 100%;
/*     min-width: 475px; */
  }
  .page-id-24 .health-cards-heading .hc-heading-wrap { 
    display: block;
    width: 100%;
    min-width: 100%;
  }
}


/* ---------- 10. Entrance animation ----------
   A copy of the symptom-card flip under its own name, so the old
   symptom-card CSS can be deleted later without breaking this. */

@keyframes health-card-flip {
  0%   { opacity: 0; transform: perspective(2500px) rotateX(100deg); }
  25%  { opacity: 1; }
  100% { opacity: 1; transform: perspective(2500px) rotateX(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .health-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}html.ri-open{overflow:hidden}

/* Pop-up: centred box on desktop */
.ri-scrim{position:fixed;inset:0;z-index:9999;background:rgba(38,35,37,.55)}
.ri{position:fixed;z-index:10000;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,calc(100% - 32px));
  max-height:calc(100% - 32px);overflow-y:auto;overscroll-behavior:contain;background:#fff;color:#262325;border-radius:18px;
  padding:0 22px;text-align:left;box-shadow:0 24px 60px rgba(0,0,0,.25);animation:riPop .3s ease-out}
.ri[hidden],.ri-scrim[hidden],.ri [hidden]{display:none!important}
.ri .ri-back[hidden]{display:flex!important;visibility:hidden}
.ri-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:10px 0 4px;background:#fff}
.ri-back,.ri-close{width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;color:#262325;font-family:inherit;
  font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ri-back:hover,.ri-close:hover{background:#F5F3F0}
.ri-dots{display:flex;gap:6px}
.ri-dots i{display:block;width:22px;height:4px;border-radius:2px;background:#E2DED7;transition:background .2s}
.ri-dots i.on{background:#CD734F}
.ri button:focus-visible{outline:2px solid #CD734F;outline-offset:2px}

.ri-panel{padding-bottom:22px}
.ri-panel:focus{outline:none}
.ri .ri-eyebrow{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#B25F3E;margin:6px 0}
.ri h2{font-size:26px;font-weight:500;line-height:1.15;letter-spacing:-.01em;margin:0 0 6px;color:#262325}
.ri .ri-sub{color:#5A5557;margin:0 0 18px;font-size:15px;line-height:1.5}
.ri-panel.is-done .ri-head{display:none}

/* Men / Women tiles (Option A) */
.ri-who{display:grid;grid-template-columns:1fr 1fr;gap:12px;height:clamp(200px,40vh,300px)}
.ri-who button{border:0;border-radius:16px;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  padding:18px;color:#fff;font-family:inherit;font-size:24px;font-weight:500;line-height:1.15;text-align:left;transition:transform .15s}
.ri-who button small{font-size:13px;font-weight:400;opacity:.85}
.ri-who button:hover{transform:translateY(-2px)}
.ri-who .m{background:linear-gradient(170deg,#7E8A90,#3F4A50)}
.ri-who .w{background:linear-gradient(170deg,#D69A6A,#6E5F86)}

/* Oryx X-mark peeking out of the top-right corner of each tile */
.ri-who button{position:relative;overflow:hidden}
.ri-who button::before{content:"";position:absolute;right:-26px;top:-22px;width:124px;height:169px;opacity:.16;pointer-events:none;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='329.47 188.69 160.34 217.9'%3E%3Cg fill='%23fff'%3E%3Cpolygon points='457.87 188.69 412.01 248.46 407.58 248.46 361.41 188.69 331.37 188.69 391.45 264.91 329.47 343.34 360.14 343.34 407.58 281.67 412.01 281.67 459.45 343.34 489.81 343.34 427.82 264.91 488.23 188.69 457.87 188.69'/%3E%3Crect x='329.47' y='384.45' width='160.34' height='22.14'/%3E%3C/g%3E%3C/svg%3E")}

/* Gravity Forms (Orbital theme) in Oryx colours.
   !important is needed: Gravity Forms prints its own colours per form with an ID selector. */
.ri .gform_wrapper.gform-theme{--gf-color-primary:#CD734F!important;--gf-color-primary-rgb:205,115,79!important;
  --gf-color-primary-darker:#B25F3E!important;--gf-color-primary-lighter:#E08A63!important;--gf-color-primary-contrast:#fff!important;
  --gf-ctrl-border-color:#E2DED7!important;--gf-ctrl-border-color-hover:#C9C3BB!important;--gf-ctrl-border-color-focus:#262325!important;
  --gf-radius:12px!important;--gf-ctrl-size:48px!important;margin:0}
.ri .gform_heading{display:none}
.ri .gform_wrapper .gform_fields{row-gap:16px}
.ri .gform_wrapper .gfield_required{display:none!important}
.ri .gform_wrapper .gfield_label{font-size:14px;font-weight:500;color:#262325}
.ri .gform_wrapper .gfield_description{font-size:13px;color:#5A5557;padding-top:0}
.ri .gform_wrapper input[type=text],.ri .gform_wrapper input[type=email],.ri .gform_wrapper textarea{border-width:1.5px;font-size:16px;color:#262325}
.ri .gform_wrapper textarea{min-block-size:56px;block-size:56px;resize:vertical}
/* Undo the site-wide form styles (written for the dark footer form): hidden labels, white text, square boxes */
body .ri .gform_wrapper.gform-theme--framework .gfield_label.gform-field-label{display:block}
body .ri .gform_wrapper.gform-theme--framework input:not([type=hidden]):not([type=checkbox]),
body .ri .gform_wrapper.gform-theme--framework textarea{color:#262325;background:#fff;border:1.5px solid #E2DED7;border-radius:12px!important}
body .ri .gform_wrapper.gform-theme--framework input:not([type=checkbox]):focus,
body .ri .gform_wrapper.gform-theme--framework textarea:focus{border-color:#262325}
body .ri .gform_wrapper.gform-theme--framework input::placeholder,
body .ri .gform_wrapper.gform-theme--framework textarea::placeholder{color:#8A8487}
body .ri .gform_wrapper.gform-theme--framework input[type=checkbox]{border:1.5px solid #C9C3BB;border-radius:4px!important}
body .ri .gform_wrapper.gform-theme--framework .gform-field-label--type-inline{max-width:none}
body .ri .gform_wrapper.gform-theme--framework .ri-consent .gfield_consent_label{color:#5A5557}

/* Interests as pills: black outline = not picked, black fill = picked */
.ri .gfield_checkbox{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:8px}
.ri .gfield_checkbox .gchoice{position:relative;margin:0;padding:0;display:block}
.ri .gfield_checkbox .gchoice input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0}
.ri .gfield_checkbox .gchoice label{display:inline-flex;align-items:center;gap:6px;margin:0;padding:7px 14px;max-width:none;
  border:1.5px solid #262325;border-radius:20px;background:#fff;color:#262325;font-size:15px;font-weight:400;line-height:1.2;
  cursor:pointer;transition:background .15s,color .15s}
.ri .gfield_checkbox .gchoice label::before{content:"+";content:"+" / ""}
.ri .gfield_checkbox .gchoice:has(input:checked) label{background:#262325;color:#fff}
.ri .gfield_checkbox .gchoice:has(input:checked) label::before{content:"\2713";content:"\2713" / ""}
.ri .gfield_checkbox .gchoice:has(input:focus-visible) label{outline:2px solid #CD734F;outline-offset:2px}

/* Consent */
.ri .ri-consent .gfield_consent_label{font-size:13px;line-height:1.45;color:#5A5557}

/* Register button stays reachable on long forms */
.ri .gform_footer{position:sticky;bottom:0;z-index:1;background:#fff;margin:0 0 -22px!important;padding:12px 0 22px!important}
.ri .gform_footer .gform_button,.ri .ri-finish{width:100%!important;height:54px!important;border:0!important;border-radius:30px!important;
  background:#CD734F!important;color:#fff!important;font-family:inherit;font-size:17px!important;font-weight:500!important;cursor:pointer}
.ri .gform_footer .gform_button:hover,.ri .ri-finish:hover{background:#B25F3E!important}

/* Thank-you */
.ri .ri-done{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding-top:24px}
.ri .ri-tick{width:64px;height:64px;border-radius:50%;background:#CD734F;color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:14px}
.ri .ri-done ul{margin:4px 0 8px;padding-left:18px;color:#5A5557}
.ri .ri-done .ri-picked{margin:0 0 4px;font-weight:500;color:#262325}
.ri .ri-done .ri-other-echo{margin:0 0 8px;color:#5A5557}
.ri .ri-done .ri-finish{margin-top:12px}

/* Panel slide */
.ri .from-right{animation:riIn .3s ease-out}
.ri .from-left{animation:riOut .3s ease-out}
@keyframes riIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes riOut{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes riPop{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes riUp{from{transform:translateY(100%)}to{transform:none}}

/* Phone: bottom sheet */
@media (max-width:767px){
  .ri{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-height:90vh;max-height:90dvh;border-radius:22px 22px 0 0;
    animation:riUp .35s ease-out}
  .ri-panel{padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}
  .ri .gform_footer{margin-bottom:calc(-22px - env(safe-area-inset-bottom,0px))!important;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))!important}
}
@media (prefers-reduced-motion:reduce){.ri,.ri .from-right,.ri .from-left{animation:none}}

/* Things that open the pop-up: "Coming soon" menu rows and any element with .ri-trigger */
.oryx-soon[data-ri-bound],.ri-trigger{cursor:pointer}
.oryx-soon[data-ri-bound]:focus-visible,.ri-trigger:focus-visible{outline:2px solid #CD734F;outline-offset:3px}

/* Validation errors in red, not the grey helper-text colour */
body .ri .gform_wrapper .gfield_validation_message{color:#C02B0A;font-size:13px;font-weight:500;padding-top:6px}
body .ri .gform_wrapper.gform-theme--framework .gfield_error input[type=checkbox]{border-color:#C02B0A}

/* Hide the WhatsApp bubble while the pop-up is open */
html.ri-open #fancy_icon-132-31{visibility:hidden}

/* #148: phones only. Shrink the WhatsApp bubble */
@media (max-width:480px){
  #fancy_icon-132-31{padding:8px}
  #fancy_icon-132-31>svg{width:32px;height:32px}
}
/* GETCHECKED promo banner (November 2026) */
.promo-bar-wrap {
  position: sticky;
  top: 0;
  z-index: 101;
}
.promo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 16px;
  row-gap: 6px;
  padding: 8px 20px;
  background-color: #CD734F;
  color: #FFFFFF;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}
.promo-bar__text {
  margin: 0;
  font-size: inherit;
}
.promo-bar__mobile {
  display: none;
}
.promo-bar__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: inherit;
}
.promo-bar .promo-bar__cta {
  padding: 3px 14px;
  font-size: 13px;
  line-height: 20px;
}
.promo-bar__details {
  color: #FFFFFF;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body .oryx-header {
  top: var(--promo-h, 0px);
}
@media (max-width: 991px) {
  .promo-bar {
    column-gap: 12px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 13px;
  }
  .promo-bar__actions {
    gap: 12px;
  }
}
@media (max-width: 767px) {
  .promo-bar {
    row-gap: 4px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12px;
  }
  .promo-bar__desktop {
    display: none;
  }
  .promo-bar__mobile {
    display: inline;
  }
  .promo-bar .promo-bar__cta {
    padding: 2px 12px;
    font-size: 12px;
    line-height: 18px;
  }
  .promo-bar__details {
    font-size: 12px;
  }
}