.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: 2720px;
}
body {font-family: 'gopher';}body {line-height: 1.3;font-size: clamp(1.25rem, 0.223vw + 1.143rem, 1.75rem) ;font-weight: 300;color: #cccccc;}.oxy-nav-menu-hamburger-line {background-color: #cccccc;}h1, h2, h3, h4, h5, h6 {font-family: 'obviously-wide';font-size: clamp(3rem, 1.304vw + 2.452rem, 4.8rem) ;font-weight: 500;line-height: 1.2;color: #ffffff;}h2, h3, h4, h5, h6{font-size: clamp(2.4rem, 0.87vw + 2.035rem, 3.6rem) ;font-weight: 500;line-height: 1.2;color: #ffffff;}h3, h4, h5, h6{font-size: clamp(1.8rem, 0.725vw + 1.496rem, 2.8rem) ;font-weight: 400;line-height: 1.2;color: #ffffff;}h4, h5, h6{font-size: clamp(1.5rem, 0.507vw + 1.287rem, 2.2rem) ;font-weight: 400;line-height: 1.2;color: #ffffff;}h5, h6{font-size: clamp(1.3rem, 0.362vw + 1.148rem, 1.8rem) ;font-weight: 400;line-height: 1.2;color: #ffffff;}h6{font-size: clamp(1.2rem, 0.29vw + 1.078rem, 1.6rem) ;font-weight: 400;line-height: 1.2;}a {color: #ffffff;text-decoration: none;}a:hover {color: #ffffff;text-decoration: none;}.ct-link-text {color: #ffffff;text-decoration: ;}.ct-link-text:hover {color: #ffffff;}.ct-link {text-decoration: ;}.ct-link-button {border-radius: 3px;}.ct-section-inner-wrap {
}.ct-new-columns > .ct-div-block {
}.oxy-header-container {
}@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;
				}
			}
.Home_button_outline:hover{
 color:#000000;
 background-color:#ffffff;
 transition-duration:.3s;
 border-radius:5px;
}
.Home_button_outline {
background-color :#000000;
border: 1px solid #000000;
color: #ffffff;
}.Home_button_outline {
 font-family:obviously-wide;
 font-weight:400;
 text-transform:uppercase;
 -webkit-font-smoothing:subpixel-antialiased;
-moz-osx-font-smoothing:unset; border-radius:5px;
 text-align:justify;
 letter-spacing:.2rem;
 color:#ffffff;
 background-color:rgba(0,0,0,0);
 font-size:clamp(0.6rem, calc(0.6rem + ((1vw - 0.32rem) * 0.2083)), 0.8rem); min-height: 0vw; ;
 transition-duration:.3s;
 padding-top:1.5rem;
 padding-right:1.5rem;
 padding-bottom:1.5rem;
 padding-left:1.5rem;
}
@media (max-width: 2720px) {
.Home_button_outline {
 text-align:center;
}
.Home_button_outline:hover{
 text-align:center;
}
}

@media (max-width: 1099px) {
.Home_button_outline {
 border-radius:3px;
}
}

@media (max-width: 767px) {
.Home_button_outline {
 letter-spacing:.1rem;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 padding-left:1rem;
 padding-right:1rem;
 padding-top:1rem;
 padding-bottom:1rem;
}
}

@media (max-width: 479px) {
.Home_button_outline {
 top:50%;
 bottom:50%;
 visibility:hidden;
}
}

.trigger-cta-modal {
}
.linkwrapper_download_resume {
 gap:1rem;
 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;
 border-radius:5px;
 padding-top:1rem;
 padding-bottom:1rem;
 padding-left:2rem;
 padding-right:2rem;
}
.linkwrapper_download_resume:not(.ct-section):not(.oxy-easy-posts),
.linkwrapper_download_resume.oxy-easy-posts .oxy-posts,
.linkwrapper_download_resume.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
gap:1rem;
}
.subheading_callout_main {
 color:#cccccc;
 letter-spacing:.3rem;
 font-size:clamp(1rem, calc(1rem + ((1vw - 0.32rem) * 0.4167)), 1.4rem); min-height: 0vwpx;
 margin-bottom:clamp(0.25rem, calc(0.25rem + ((1vw - 0.32rem) * 0.2604)), 0.5rem); min-height: 0vw ;
 padding-bottom:0px;
}
@media (max-width: 2720px) {
.subheading_callout_main {
}
}

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

.headling_callout_main:hover{
transform:scale(1.02,1.02); transition-duration:.2s;
}
.headling_callout_main {
 transition-duration:.2s;
}
.text_block_large_obviouslywide:hover{
transform:scale(1.05,1.05); transition-duration:.2s;
}
.text_block_large_obviouslywide {
 line-height:1.5;
 font-size:clamp(1.2rem, calc(1.2rem + ((1vw - 0.32rem) * 0.4167)), 1.6rem); min-height: 0vwrem;
}
@media (max-width: 1099px) {
.text_block_large_obviouslywide {
 font-size:clamp(1.2rem, calc(1.2rem + ((1vw - 0.32rem) * 0.8333)), 2rem); min-height: 0vw ;
}
}

@media (max-width: 767px) {
.text_block_large_obviouslywide {
 text-align:center;
}
}

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

.rellax {
}
.rellax-horizontal {
 transition-timing-function:ease;
 width:clamp(10rem, calc(10rem + ((1vw - 0.32rem) * 8.3333)), 18rem); min-height: 0vw ;
}
@media (max-width: 1099px) {
.rellax-horizontal {
}
}

.headline_h3_main {
 width:100%;
}
@media (max-width: 2720px) {
.headline_h3_main {
 width:75%;
}
}

@media (max-width: 1099px) {
.headline_h3_main {
 text-align:center;
}
}

.mover {
}
.subheading_section {
 margin-bottom:clamp(1.5rem, calc(1.5rem + ((1vw - 0.32rem) * 0.5208)), 2rem); min-height: 0vw ;
}
@media (max-width: 2720px) {
.subheading_section {
}
}

.logo_container_main {
 border-radius:5px;
 border-top-style:none;
 border-right-style:none;
 border-bottom-style:none;
 border-left-style:none;
}
.progress_bar_main {
 progress_bar_left_text_typography_font-family:Inherit;
 progress_bar_right_text_typography_font-family:Array;
 border-top-color:#ffffff;
 border-right-color:#ffffff;
 border-bottom-color:#ffffff;
 border-left-color:#ffffff;
 border-radius:5px;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 progress_bar_bar_color:#000000;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 progress_bar_left_text_typography_font-size:clamp(0.75rem, calc(0.75rem + ((1vw - 0.32rem) * 0.2604)), 1rem); min-height: 0vwpx;
 progress_bar_left_text_typography_text-transform:uppercase;
 progress_bar_left_text_typography_-webkit-font-smoothing:subpixel-antialiased;
 progress_bar_left_text_typography_font-weight:300;
 overflow:hidden;
 progress_bar_left_text_typography_color:#ffffff;
 progress_bar_background_color:#1e1e1e;
 progress_bar_right_text_typography_color:#ffffff;
 progress_bar_right_text_typography_font-size:clamp(0.75rem, calc(0.75rem + ((1vw - 0.32rem) * 0.2604)), 1rem); min-height: 0vwpx;
 progress_bar_right_text_typography_-webkit-font-smoothing:subpixel-antialiased;
 progress_bar_right_text_typography_text-transform:uppercase;
 margin-top:clamp(0.75rem, calc(0.75rem + ((1vw - 0.32rem) * 0.2604)), 1rem); min-height: 0vw ;
 margin-bottom:clamp(0.75rem, calc(0.75rem + ((1vw - 0.32rem) * 0.2604)), 1rem); min-height: 0vw ;
 progress_bar_progress:95%;
 progress_bar_left_text_typography_letter-spacing:2px;
}

                                .progress_bar_main .oxy-progress-bar-background {
            background-color: #1e1e1e;            background-image: none;            animation: none 0s paused;        }
                
                .progress_bar_main .oxy-progress-bar-progress-wrap {
            width: 95%;        }
        
                                                        .progress_bar_main .oxy-progress-bar-progress {
            background-color: #000000;padding: 8px;animation: none 0s paused, oxy_progress_bar_width 4s ease-out 1;            background-image: none;        
        }
                
                        .progress_bar_main .oxy-progress-bar-overlay-text {
            font-family: Inherit;
font-size: clamp(0.75rem, calc(0.75rem + ((1vw - 0.32rem) * 0.2604)), 1rem); min-height: 0vwpx;
text-transform: uppercase;
-webkit-font-smoothing: subpixel-antialiased;
font-weight: 300;
color: #ffffff;
letter-spacing: 2px;
        }
        
                        .progress_bar_main .oxy-progress-bar-overlay-percent {
            font-family: 'obviously-wide';
color: #ffffff;
font-size: clamp(0.75rem, calc(0.75rem + ((1vw - 0.32rem) * 0.2604)), 1rem); min-height: 0vwpx;
-webkit-font-smoothing: subpixel-antialiased;
text-transform: uppercase;
        }
        
        @media (max-width: 479px) {
.progress_bar_main {
}
}

.body_list_about {
 letter-spacing:.25rem;
 text-transform:uppercase;
 margin-top:.5rem;
 color:#e2e2e2;
 font-size:clamp(1rem, calc(1rem + ((1vw - 0.32rem) * 0.4167)), 1.4rem); min-height: 0vw ;
}
@media (max-width: 2720px) {
.body_list_about {
}
}

@media (max-width: 767px) {
.body_list_about {
 margin-top:.5rem;
}
}

@media (max-width: 479px) {
.body_list_about {
 text-align:center;
}
}

.headline-list-about {
 margin-bottom:2rem;
 border-bottom-style:solid;
 border-bottom-width:1px;
 padding-bottom:,2rem;
}
@media (max-width: 2720px) {
.headline-list-about {
}
}

@media (max-width: 767px) {
.headline-list-about {
}
}

.icon-list-about:hover{
transform:translateY(-5px); transition-duration:.3s;
 transition-timing-function:ease;
 transition-property:all;
}
.icon-list-about {
background-color: #f4f4f4;
border: 1px solid #f4f4f4;
padding: 10px;color: #000000;}.icon-list-about 
>svg {width: 30px;height: 30px;}.icon-list-about {
 margin-top:1rem;
 margin-bottom:1rem;
 transition-duration:.3s;
 transition-timing-function:ease;
 transition-property:all;
}
@media (max-width: 2720px) {
.icon-list-about {
}
}

@media (max-width: 1099px) {
.icon-list-about:hover{
}
.icon-list-about {
padding: 8px;}.icon-list-about 
>svg {width: 24px;height: 24px;}.icon-list-about {
}
}

@media (max-width: 479px) {
.icon-list-about:hover{
}
.icon-list-about {
padding: 7px;}.icon-list-about 
>svg {width: 21px;height: 21px;}.icon-list-about {
}
}

.image_memoji {
}
.masonry-container {
 width:100%;
--gap: 1.5rem; display: block; columns: 280px 3; gap: var(--gap)
}
.masonry-item:hover{
}
.masonry-item {
 border-radius:5px;
 overflow:hidden;
 margin-bottom:var(--gap) ;
 position:relative;
break-inside: avoid;
}
@media (max-width: 1099px) {
.masonry-item {
 border-radius:3px;
}
}

@media (max-width: 479px) {
.masonry-item {
}
.masonry-item:not(.ct-section):not(.oxy-easy-posts),
.masonry-item.oxy-easy-posts .oxy-posts,
.masonry-item.ct-section .ct-section-inner-wrap{
display:flex;
justify-content:center;
}
}

.masonry-image:hover{
 transition-duration:.25s;
 transition-timing-function:ease;
 mix-blend-mode:normal;
 opacity:.1;
 filter:saturate(0%);
}
.masonry-image {
 z-index:2;
 transition-duration:.5s;
 transition-timing-function:ease;
 border-top-color:#7fff00;
 border-right-color:#7fff00;
 border-bottom-color:#7fff00;
 border-left-color:#7fff00;
}
@media (max-width: 767px) {
.masonry-image:hover{
 opacity:1;
 filter:saturate(100%);
}
}

.masonry-container-2col {
 width:100%;
--gap: 1.5rem; display: block; columns: 280px 2; gap: var(--gap)
}
.masonry-container-2col .ct-section-inner-wrap {
padding-top: clamp(6rem, calc(6rem + ((1vw - 3.2rem) * -2.2222)), 10rem);px;
padding-bottom: clamp(8rem, calc(8remclamp(6rem, calc(6rem + ((1vw - 3.2rem) * -2.2222)), 10rem); + ((1vw - 0.32rem) * 4.1667)), 12rem); min-height: 0vwpx;
}
.masonry-container-2col:not(.ct-section):not(.oxy-easy-posts),
.masonry-container-2col.oxy-easy-posts .oxy-posts,
.masonry-container-2col.ct-section .ct-section-inner-wrap{
display:grid;
display: grid !important;align-items: center;grid-template-columns: repeat(2, minmax(40px, 1fr));grid-column-gap: clamp(0.75rem, calc(0.75rem + ((1vw - 0.32rem) * 0.7813)), 1.5rem); min-height: 0vwpx;grid-row-gap: 20px;}
@media (max-width: 767px) {
.masonry-container-2col {
--gap: clamp(0.75rem, calc(0.75rem + ((1vw - 0.32rem) * 0.7813)), 1.5rem); min-height: 0vw; display: block; columns: 200px 2; gap: var(--gap)
}
}

@media (max-width: 479px) {
.masonry-container-2col {
}
}

.masonry-container-3col {
 width:100%;
--gap: clamp(0.75rem, calc(0.75rem + ((1vw - 0.32rem) * 0.7813)), 1.5rem); display: block; columns: 50px 3; gap: var(--gap)
}
.masonry-container-3col:not(.ct-section):not(.oxy-easy-posts),
.masonry-container-3col.oxy-easy-posts .oxy-posts,
.masonry-container-3col.ct-section .ct-section-inner-wrap{
display:grid;
display: grid !important;align-items: center;grid-template-columns: repeat(3, minmax(40px, 1fr));grid-column-gap: clamp(0.75rem, calc(0.75rem + ((1vw - 0.32rem) * 0.7813)), 1.5rem); min-height: 0vw ;grid-row-gap: 20px;}
@media (max-width: 1099px) {
.masonry-container-3col {
--gap: clamp(0.75rem, calc(0.75rem + ((1vw - 0.32rem) * 0.7813)), 1.5rem); display: block; columns: 50px 3; gap: var(--gap)
}
}

@media (max-width: 767px) {
.masonry-container-3col {
}
}

@media (max-width: 479px) {
.masonry-container-3col {
--gap: clamp(0.75rem, calc(0.75rem + ((1vw - 0.32rem) * 0.7813)), 1.5rem); min-height: 0vw; display: block; columns: 50px 3; gap: var(--gap)
}
}

.masonry-container-1col {
 width:100%;
 text-align:justify;
--gap: clamp(0.75rem, calc(0.75rem + ((1vw - 0.32rem) * 0.7813)), 1.5rem); display: block; columns: 1600px 1; gap: var(--gap)
}
.masonry-container-1col:not(.ct-section):not(.oxy-easy-posts),
.masonry-container-1col.oxy-easy-posts .oxy-posts,
.masonry-container-1col.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:flex-end;
justify-content:center;
}
@media (max-width: 767px) {
.masonry-container-1col {
--gap: clamp(0.75rem, calc(0.75rem + ((1vw - 0.32rem) * 0.7813)), 1.5rem); min-height: 0vw; display: block; columns: 280px 1; gap: var(--gap)
}
}

.video-header {
}
.masontry-container_3col-1feature {
}
.masonry-container-3col-1feature {
}
.masonry-container-3col-1feature:not(.ct-section):not(.oxy-easy-posts),
.masonry-container-3col-1feature.oxy-easy-posts .oxy-posts,
.masonry-container-3col-1feature.ct-section .ct-section-inner-wrap{
display:grid;
display: grid !important;align-items: center;grid-template-columns: repeat(6, minmax(50px, 1fr));grid-column-gap: clamp(0.75rem, calc(0.75rem + ((1vw - 0.32rem) * 0.7813)), 1.5rem); min-height: 0vwpx;grid-row-gap: 20px;}
.masonry-container-3col-1feature:not(.ct-section):not(.oxy-easy-posts) > :last-child,
.masonry-container-3col-1feature.ct-section .ct-section-inner-wrap > :last-child,
.masonry-container-3col-1feature.oxy-easy-posts .oxy-posts > :last-child{
grid-column: span 4;}
.masonry-container-3col-1feature:not(.ct-section):not(.oxy-easy-posts) > :nth-child(1),
.masonry-container-3col-1feature.ct-section .ct-section-inner-wrap > :nth-child(1),
.masonry-container-3col-1feature.oxy-easy-posts .oxy-posts > :nth-child(1){
grid-column: span 2;}
.Home_button_icon_outline:hover{
 background-color:#ffffff;
 border-radius:5px;
 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;
}
.Home_button_icon_outline {
 border-radius:5px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 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;
}
.parent:hover{
 background-color:#ffffff;
 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;
}
.parent {
 transition-duration:.3s;
 padding-right:1.5rem;
 padding-left:1.5rem;
 border-radius:5px;
 padding-top:1.5rem;
 padding-bottom:1.5rem;
}
@media (max-width: 1099px) {
.parent {
 border-radius:3px;
 padding-top:1rem;
 padding-left:1rem;
 padding-right:1rem;
 padding-bottom:1rem;
}
}

@media (max-width: 479px) {
.parent {
 visibility:hidden;
}
}

.child {
 border-top-style:none;
 border-right-style:none;
 border-bottom-style:none;
 border-left-style:none;
 border-radius:5px;
}
.child:not(.ct-section):not(.oxy-easy-posts),
.child.oxy-easy-posts .oxy-posts,
.child.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
@media (max-width: 2720px) {
.child {
}
}

@media (max-width: 1099px) {
.child {
}
}

@media (max-width: 767px) {
.child {
}
.child:not(.ct-section):not(.oxy-easy-posts),
.child.oxy-easy-posts .oxy-posts,
.child.ct-section .ct-section-inner-wrap{
align-items:center;
}
}

.glightboxTest {
}
@media (max-width: 1099px) {
.glightboxTest {
}
}

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

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

.masonry-item-title {
 position:relative;
 text-align:center;
}
@media (max-width: 1099px) {
.masonry-item-title {
}
}

.masonry-item-description {
 position:relative;
 color:#cccccc;
 text-align:center;
}
.masonry-link-wrapper {
}
.masonry-link-wrapper:not(.ct-section):not(.oxy-easy-posts),
.masonry-link-wrapper.oxy-easy-posts .oxy-posts,
.masonry-link-wrapper.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
.kill {
}
@media (max-width: 2720px) {
.kill {
}
}

@media (max-width: 1099px) {
.kill {
}
}

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

.heading_media_cloud {
 line-height:1;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 padding-top:2rem;
 padding-left:2rem;
 padding-right:2rem;
 border-radius:5px;
 padding-bottom:2.1rem;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
}
@media (max-width: 1099px) {
.heading_media_cloud {
 border-radius:3px;
}
}

@media (max-width: 767px) {
.heading_media_cloud {
 padding-top:1.25rem;
 padding-right:1.25rem;
 padding-bottom:1.5rem;
 padding-left:1.25rem;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
}
}

@media (max-width: 479px) {
.heading_media_cloud {
 padding-top:1.25rem;
 padding-left:1.25rem;
 padding-right:1.25rem;
 padding-bottom:1.5rem;
}
}

.masonry-heading-caption {
 padding-left:3rem;
 padding-right:3rem;
 height:100%;
}
@media (max-width: 767px) {
.masonry-heading-caption {
 visibility:hidden;
}
}

.masonry-container-4col {
}
.masonry-container-4col:not(.ct-section):not(.oxy-easy-posts),
.masonry-container-4col.oxy-easy-posts .oxy-posts,
.masonry-container-4col.ct-section .ct-section-inner-wrap{
display:grid;
display: grid !important;align-items: stretch;grid-template-columns: repeat(4, minmax(40px, 1fr));grid-column-gap: clamp(0.75rem, calc(0.75rem + ((1vw - 0.32rem) * 0.7813)), 1.5rem); min-height: 0vwpx;grid-row-gap: 20px;}
.masonry-container-3col-1feature-right {
}
.masonry-container-3col-1feature-right:not(.ct-section):not(.oxy-easy-posts),
.masonry-container-3col-1feature-right.oxy-easy-posts .oxy-posts,
.masonry-container-3col-1feature-right.ct-section .ct-section-inner-wrap{
display:grid;
display: grid !important;align-items: center;grid-template-columns: repeat(6, minmax(50px, 1fr));grid-column-gap: clamp(0.75rem, calc(0.75rem + ((1vw - 0.32rem) * 0.7813)), 1.5rem); min-height: 0vwpx;grid-row-gap: 20px;}
.masonry-container-3col-1feature-right:not(.ct-section):not(.oxy-easy-posts) > *,
.masonry-container-3col-1feature-right.ct-section .ct-section-inner-wrap > *,
.masonry-container-3col-1feature-right.oxy-easy-posts .oxy-posts > *{
height: 100%;}
.masonry-container-3col-1feature-right:not(.ct-section):not(.oxy-easy-posts) > :last-child,
.masonry-container-3col-1feature-right.ct-section .ct-section-inner-wrap > :last-child,
.masonry-container-3col-1feature-right.oxy-easy-posts .oxy-posts > :last-child{
grid-column: span 2;}
.masonry-container-3col-1feature-right:not(.ct-section):not(.oxy-easy-posts) > :nth-child(1),
.masonry-container-3col-1feature-right.ct-section .ct-section-inner-wrap > :nth-child(1),
.masonry-container-3col-1feature-right.oxy-easy-posts .oxy-posts > :nth-child(1){
grid-column: span 4;}
.masonry-containter-3col-1feature-right {
}
.masonry-containter-3col-1feature-right:not(.ct-section):not(.oxy-easy-posts),
.masonry-containter-3col-1feature-right.oxy-easy-posts .oxy-posts,
.masonry-containter-3col-1feature-right.ct-section .ct-section-inner-wrap{
display:grid;
display: grid !important;align-items: center;grid-template-columns: repeat(6, minmax(50px, 1fr));grid-column-gap: clamp(0.75rem, calc(0.75rem + ((1vw - 0.32rem) * 0.7813)), 1.5rem); min-height: 0vwpx;grid-row-gap: 20px;}
.masonry-containter-3col-1feature-right:not(.ct-section):not(.oxy-easy-posts) > :last-child,
.masonry-containter-3col-1feature-right.ct-section .ct-section-inner-wrap > :last-child,
.masonry-containter-3col-1feature-right.oxy-easy-posts .oxy-posts > :last-child{
grid-column: span 2;}
.masonry-containter-3col-1feature-right:not(.ct-section):not(.oxy-easy-posts) > :nth-child(1),
.masonry-containter-3col-1feature-right.ct-section .ct-section-inner-wrap > :nth-child(1),
.masonry-containter-3col-1feature-right.oxy-easy-posts .oxy-posts > :nth-child(1){
grid-column: span 4;}
.lazyload {
}
.glightboxTest-16-9 {
}
.glightboxTest-4-5 {
}
.glightboxTest-4-5:not(.ct-section):not(.oxy-easy-posts),
.glightboxTest-4-5.oxy-easy-posts .oxy-posts,
.glightboxTest-4-5.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
}
.glightboxTest-16-9-1-col {
}
.glightboxTest-16-9-1col {
}
.glightboxTest-9-16-3col {
}
.glightboxTest-9-16-3col-2 {
}
.inlinevideo {
}
.image-custom {
 padding-bottom:.5rem;
 padding-top:.5rem;
}
.image-portfolio {
user-drag: none; -webkit-user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
}
@media (max-width: 2720px) {
.image-portfolio {
 border-radius:0rem;
}
}

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

.featuredcontent {
}
.featuredcontent .ct-section-inner-wrap {
padding-top: clamp(8rem, calc(8rem + ((1vw - 0.32rem) * 4.1667)), 12rem); min-height: 0vwpx;
padding-right: 3px;
padding-bottom: clamp(8rem, calc(8rem + ((1vw - 0.32rem) * 4.1667)), 12rem); min-height: 0vwpx;
}
.Lift-hover:hover{
}
.Lift-hover {
}
.hero-section {
 background-color:#ff0000;
 height:100vh;
 position:relative;
 min-height:100vh;
}
.hero-section .ct-section-inner-wrap {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.hero-section:not(.ct-section):not(.oxy-easy-posts),
.hero-section.oxy-easy-posts .oxy-posts,
.hero-section.ct-section .ct-section-inner-wrap{
display:flex;
align-items:center;
justify-content:center;
}
.site-header {
 padding-left:4rem;
 padding-right:4rem;
 width:100%;
 z-index:9999;
}
.site-header:not(.ct-section):not(.oxy-easy-posts),
.site-header.oxy-easy-posts .oxy-posts,
.site-header.ct-section .ct-section-inner-wrap{
display:flex;
align-items:center;
align-content:center;
justify-content:space-between;
}
@media (max-width: 767px) {
.site-header {
 padding-left:2rem;
 padding-right:2rem;
}
}

.header-navigation-text {
}
.hero-content {
 margin-top:-12rem;
.hero-content font-size: 25vw; /* scales with screen width */ line-height: 1.5; letter-spacing: -0.02em; color: #FFFFFF;
}
.hero-wrapper {
 position:absolute;
.hero-wrapper position: relative width: 100% display: flex justify-content: center
}
.hero-content-blur {
 filter:blur(40px);
}
.scroll-blur {
 overflow:visible;
.scroll-blur overflow: visible; /* lets blur extend outside element */ will-change: filter; /* smooth animation on scroll */ /* fade the top edge to avoid sharp clipping */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 100%); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 100%); mask-repeat: no-repeat; mask-size: 100% 100%;
}
.fade-in {
}
.hero-container {
 bottom:10rem;
 width:100%;
 max-width:1920px;
 position:absolute;
}
.hero-container:not(.ct-section):not(.oxy-easy-posts),
.hero-container.oxy-easy-posts .oxy-posts,
.hero-container.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:flex-end;
justify-content:space-between;
}
.hero-text {
 font-size:2.5rem;
 font-weight:300;
 overflow:visible;
 color:#000000;
}
.hero-blur-overlay {
 height:20rem;
 position:fixed;
 width:100%;
 z-index:9998;
 visibility:hidden;
}
.hero-blur-fade {
.hero-blur-fade position: absolute; bottom: 0; left: 0; width: 100%; height: 8rem; /* controls feather length */ background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.2)); pointer-events: none; /* clicks still pass through */
}
.hero-blur-zone {
 position:fixed;
 width:80%;
 height:25rem;
 top:10px;
}
.top-background {
 position:absolute;
.top-background position: fixed; top: 0; left: 0; width: 100%; height: 10rem; /* same as your blur overlay */ background-color: #ff0000; /* or whatever color you want to show before blur */ z-index: 5; /* below the overlay */
}
.scroll-icon-container {
 gap:5%;
}
.scroll-icon-container:not(.ct-section):not(.oxy-easy-posts),
.scroll-icon-container.oxy-easy-posts .oxy-posts,
.scroll-icon-container.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
gap:5%;
}
.sc {
}
.scroll-icon-text {
 font-family:'transducer-extended';
 font-size:1rem;
 letter-spacing:10%;
 color:#ffffff;
}
.scroll-icon {
color: #ffffff;}.scroll-icon 
>svg {width: 15px;height: 15px;}.scroll-icon {
 visibility:visible;
}
.section-dark-gray {
}
.section-dark-gray:not(.ct-section):not(.oxy-easy-posts),
.section-dark-gray.oxy-easy-posts .oxy-posts,
.section-dark-gray.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
@media (max-width: 2720px) {
.section-dark-gray {
 height:120vh;
}
.section-dark-gray:not(.ct-section):not(.oxy-easy-posts),
.section-dark-gray.oxy-easy-posts .oxy-posts,
.section-dark-gray.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
align-content:center;
justify-content:center;
}
}

@media (max-width: 1099px) {
.section-dark-gray {
}
.section-dark-gray:not(.ct-section):not(.oxy-easy-posts),
.section-dark-gray.oxy-easy-posts .oxy-posts,
.section-dark-gray.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
}

.section-light-gray {
background-size: contain; height:100vh;
 background-attachment:fixed;
}
.section-light-gray:not(.ct-section):not(.oxy-easy-posts),
.section-light-gray.oxy-easy-posts .oxy-posts,
.section-light-gray.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.fade-on-scroll {
}
.fade-in-up {
}
.large-number {
transform:; font-family:obviously-wide;
 font-weight:500;
 color:#ff0000;
 margin-top:-5rem;
 font-size:clamp(4rem, 7.246vw + 0.957rem, 14rem) ;
}
@media (max-width: 2720px) {
.large-number {
 margin-top:-4rem;
}
}

@media (max-width: 1099px) {
.large-number {
 margin-top:-3rem;
 font-size:8rem;
.large-number font-size: clamp( 8rem, calc(8rem + (16 - 8) * ((100vw - 1024px) / (1920 - 1024))), 16rem );
}
}

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

.heading-h1 {
}
.body-copy {
 text-align:left;
 font-size:clamp(1.25rem, 0.223vw + 1.143rem, 1.75rem) ;
}
@media (max-width: 767px) {
.body-copy {
}
}

@media (max-width: 479px) {
.body-copy {
}
}

.profile-picture {
 height:auto;
 border-radius:2rem;
 width:auto;
}
@media (max-width: 2720px) {
.profile-picture {
 height:auto;
 aspect-ratio:1:1;
 width:auto;
 object-fit:cover;
}
}

.stretch-effect {
}
.caption-text {
 font-family:'transducer-extended';
 letter-spacing:15%;
 font-size:clamp(0.7rem, 0.104vw + 0.65rem, 0.85rem) ;
}
.heading-h2 {
}
@media (max-width: 2720px) {
.heading-h2 {
}
}

.divider-line {
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 padding-top:0px;
 padding-bottom:0px;
 margin-top:clamp(2rem, 0.446vw + 1.786rem, 3rem) ;
 margin-bottom:clamp(2rem, 0.446vw + 1.786rem, 3rem) ;
 border-top-color:rgba(255,255,255,0.2);
 border-right-color:rgba(255,255,255,0.2);
 border-bottom-color:rgba(255,255,255,0.2);
 border-left-color:rgba(255,255,255,0.2);
 border-top-width:1px;
 border-right-width:1px;
 border-left-width:1px;
 border-bottom-width:1px;
 height:0%;
 width:100%;
}
@media (max-width: 2720px) {
.divider-line {
}
}

.project-container {
 gap:clamp(3rem, 1.515vw + 2.273rem, 5rem) ;
}
.project-container:not(.ct-section):not(.oxy-easy-posts),
.project-container.oxy-easy-posts .oxy-posts,
.project-container.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
gap:clamp(3rem, 1.515vw + 2.273rem, 5rem) ;
}
@media (max-width: 1099px) {
.project-container {
}
.project-container:not(.ct-section):not(.oxy-easy-posts),
.project-container.oxy-easy-posts .oxy-posts,
.project-container.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column-reverse;
}
}

.text-number {
 font-family:obviously-wide;
 font-size:clamp(4.25rem, 2.567vw + 3.018rem, 10rem) ;
 font-weight:500;
}
@media (max-width: 2720px) {
.text-number {
}
}

@media (max-width: 1099px) {
.text-number {
}
}

.project-image {
 border-radius:1rem;
}
.software-icon {
 opacity:.9;
 flex-grow:0;
 flex-shrink:1;
 width:100%;
 height:auto;
}
@media (max-width: 2720px) {
.software-icon {
 align-self:auto;
}
}

.home-button-dark:hover{
background-color :#1e1e1e;
border: 1px solid #1e1e1e;
color: #ffffff;
}.home-button-dark:hover{
}
.home-button-dark {
background-color :#ff0000;
border: 1px solid #ff0000;
color: #ffffff;
padding: 10px 16px;
}.home-button-dark {
}
.scale-hover:hover{
transform:scale(1.025,1.025);}
.scale-hover {
 transition-duration:.2s;
}
.ratio-box {
.ratio-box position: relative; width: 100%; padding-top: 56.25%; /* desktop 16:9 */ overflow: hidden;
}
.image-stage {
.image-stage height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; /* Image behavior */ .image-stage img height: 100%; width: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: all 0.3s ease;
}
.typewriter-reveal {
 height:auto;
}
@media (max-width: 2720px) {
.typewriter-reveal {
 height:aauto;
}
}

.sticky-track {
}
.sticky-frame {
 width:100%;
 height:100vh;
}
.sticky-frame:not(.ct-section):not(.oxy-easy-posts),
.sticky-frame.oxy-easy-posts .oxy-posts,
.sticky-frame.ct-section .ct-section-inner-wrap{
display:flex;
align-items:center;
}
.section-after-sticky {
}
.fixed-reveal-section {
}
.curtain-section {
}
.stationary-frame {
}
.reveal-section {
 height:100vh;
}
.section-after {
 z-index:10;
}
.scroll-track {
 height:200vh;
 overflow:hidden;
}
.scroll-track .ct-section-inner-wrap {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.scroll-track:not(.ct-section):not(.oxy-easy-posts),
.scroll-track.oxy-easy-posts .oxy-posts,
.scroll-track.ct-section .ct-section-inner-wrap{
display:flex;
align-items:flex-start;
justify-content:flex-start;
}
.sticky-stage {
 height:100vh;
 top:0px;
 overflow:hidden;
element position: -webkit-sticky; /* For Safari */ position: sticky; top: 0; z-index: 10;
}
.sticky-stage:not(.ct-section):not(.oxy-easy-posts),
.sticky-stage.oxy-easy-posts .oxy-posts,
.sticky-stage.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.static-reveal-text {
}
.sticky-wrapper {
 width:100%;
 position:absolute;
 z-index:3;
}
.reveal-text-a {
 position:absolute;
 z-index:1;
}
.reveal-about-me {
 z-index:2;
 position:absolute;
 margin-top:-10rem;
}
.reveal-about-me:not(.ct-section):not(.oxy-easy-posts),
.reveal-about-me.oxy-easy-posts .oxy-posts,
.reveal-about-me.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
.reveal-portfolio-item {
 position:absolute;
 z-index:2;
}
.portfolio-section {
}
.hero-blur-overlay-bottom {
}
.image-container {
}
.hero-blue-overlay-not-fixed {
}
.blur-mask-container {
}
.hero-blur-overlay-not-fixed {
}
.hero-frame-wrapper {
 width:100%;
 height:100vh;
 overflow:hidden;
}
.hero-frame-wrapper .ct-section-inner-wrap {
padding-right: 0;
padding-left: 0;
}
.hero-frame-wrapper:not(.ct-section):not(.oxy-easy-posts),
.hero-frame-wrapper.oxy-easy-posts .oxy-posts,
.hero-frame-wrapper.ct-section .ct-section-inner-wrap{
display:flex;
align-items:center;
align-content:center;
justify-content:center;
}
@media (max-width: 1099px) {
.hero-frame-wrapper {
}
}

.hero-media {
background-image:url(https://www.joshdcloud.com/wp-content/uploads/2026/03/Zearo_ZR-01_Front_1_NewLivery_4K_Optimized.jpg);background-size: cover; width:100%;
 height:100%;
 background-repeat:no-repeat;
 border-top-color:#000000;
 border-right-color:#000000;
 border-bottom-color:#000000;
 border-left-color:#000000;
 border-radius:2rem;
 background-position:50% 50%;
}
.hero-media-block {
}
.hero-image-container {
 width:100%;
 height:100%;
 border-top-color:#000000;
 border-right-color:#000000;
 border-bottom-color:#000000;
 border-left-color:#000000;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-width:clamp(1rem, 1.116vw + 0.464rem, 3.5rem); ;
 border-right-width:clamp(1rem, 1.116vw + 0.464rem, 3.5rem); ;
 border-bottom-width:clamp(1rem, 1.116vw + 0.464rem, 3.5rem); ;
 border-left-width:clamp(1rem, 1.116vw + 0.464rem, 3.5rem); ;
 border-radius:2rem;
}
.hero-footer-bar {
 width:100%;
}
.footer-col-left {
}
.footer-col-center {
}
.footer-col-right {
}
@media (max-width: 767px) {
.footer-col-right {
}
}

.label {
}
.global-rounded-frame {
 position:fixed;
 z-index:9999;
}
.global-rounded-frame .ct-section-inner-wrap {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.section-header-fixed {
}
.header-left {
}
.header-center {
}
.header-center:not(.ct-section):not(.oxy-easy-posts),
.header-center.oxy-easy-posts .oxy-posts,
.header-center.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
.header-right {
}
.site-header-fixed {
 position:fixed;
 background-color:#000000;
}
.site-header-fixed:not(.ct-section):not(.oxy-easy-posts),
.site-header-fixed.oxy-easy-posts .oxy-posts,
.site-header-fixed.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
}
@media (max-width: 767px) {
.site-header-fixed {
}
}

.button-hover:hover{
}
.button-hover {
}
.header-nav-link {
}
.button-hover-icon {
}
.reveal-mask {
}
.reveal-delay-1 {
}
.hero-reveal {
}
.project-stack-section {
 width:100%;
 height:100vh;
}
.project-stack-section .ct-section-inner-wrap {
padding-right: 0;
padding-left: 0;
}
@media (max-width: 1099px) {
.project-stack-section {
}
.project-stack-section .ct-section-inner-wrap {
padding-left: 0;
}
}

.stack-inner-sync {
 width:100%;
 padding-top:0px;
 padding-right:0px;
 padding-bottom:0px;
 padding-left:0px;
}
@media (max-width: 767px) {
.stack-inner-sync {
}
.stack-inner-sync:not(.ct-section):not(.oxy-easy-posts),
.stack-inner-sync.oxy-easy-posts .oxy-posts,
.stack-inner-sync.ct-section .ct-section-inner-wrap{
display:flex;
}
}

.project-details {
 padding-top:clamp(2rem, 1.339vw + 1.357rem, 5rem) ;
 padding-right:clamp(2rem, 1.339vw + 1.357rem, 5rem) ;
 padding-bottom:clamp(2rem, 1.339vw + 1.357rem, 5rem) ;
 margin-top:1rem;
 padding-left:clamp(2rem, 1.339vw + 1.357rem, 5rem) ;
}
.project-details:not(.ct-section):not(.oxy-easy-posts),
.project-details.oxy-easy-posts .oxy-posts,
.project-details.ct-section .ct-section-inner-wrap{
display:flex;
}
@media (max-width: 2720px) {
.project-details {
}
}

@media (max-width: 1099px) {
.project-details {
 z-index:100;
}
}

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

.project-visual {
 border-top-style:none;
 border-right-style:none;
 border-bottom-style:none;
 border-left-style:none;
 z-index:99;
}
@media (max-width: 2720px) {
.project-visual {
}
}

@media (max-width: 1099px) {
.project-visual {
 z-index:99;
}
}

.project-columns {
 z-index:3;
}
@media (max-width: 2720px) {
.project-columns {
}
}

@media (max-width: 1099px) {
.project-columns {
}
}

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

.software-box {
 width:clamp(1.75rem, 0.335vw + 1.589rem, 2.5rem) ;
 max-width:30px;
}
.project-details-container {
 overflow:visible;
 position:relative;
 background-color:#000000;
.project-details-container will-change: transform, opacity;
}
@media (max-width: 2720px) {
.project-details-container {
}
}

@media (max-width: 1099px) {
.project-details-container {
 z-index:1001;
 padding-left:calc(var(--h-frame) * .75) ;
 padding-right:calc(var(--h-frame) * .75) ;
}
}

@media (max-width: 767px) {
.project-details-container {
 padding-left:calc(var(--h-frame) * .75)0 ;
 padding-right:calc(var(--h-frame) * .75)0 ;
 padding-top:calc(var(--h-frame) * .75)0 ;
 padding-bottom:calc(var(--h-frame) * .75)0 ;
}
}

@media (max-width: 479px) {
.project-details-container {
 padding-left:0 ;
 padding-right:0 ;
}
}

.project-body-copy-short {
}
.project-body-copy-long {
}
.frame-bar-top {
}
.frame-bar-bottom {
}
.frame-bar-left {
}
.frame-bar-right {
}
.frame-corners {
}
.frame-deep-floor {
}
.frame-corners-upper {
}
.frame-corners-lower {
}
.hero-media-vertical {
background-image:url(https://www.joshdcloud.com/wp-content/uploads/2026/03/Zearo_ZR-01_Vertical_4_NewLivery_4K_RS.jpg); border-top-color:#000000;
 border-right-color:#000000;
 border-bottom-color:#000000;
 border-left-color:#000000;
 border-radius:2rem;
}
.brand-title {
 font-family:obviously-wide;
 color:#cccccc;
 font-size:clamp(0.7rem, 0.104vw + 0.65rem, 0.85rem); ;
 letter-spacing:15%;
}
.icon-container {
}
.button-icon-container {
}
.view-project-button {
background-color :#ff0000;
border: 1px solid #ff0000;
color: #ffffff;
}.view-project-button {
}
.placeholder-div {
}
.viewport-ceiling-fade {
 position:fixed;
}
.about-me {
}
.about-me-section {
 text-align:left;
 background-color:#000000;
}
.about-me-section .ct-section-inner-wrap {
padding-top: 0;
padding-right: clamp(8rem, calc(8rem + ((1vw - 0.32rem) * 4.1667)), 12rem); min-height: 0vwrem;
padding-bottom: 0;
padding-left: clamp(8rem, calc(8rem + ((1vw - 0.32rem) * 4.1667)), 12rem); min-height: 0vwrem;
}
.about-me-section:not(.ct-section):not(.oxy-easy-posts),
.about-me-section.oxy-easy-posts .oxy-posts,
.about-me-section.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
.accordion-container {
 align-self:flex-start;
}
.accordion-container:not(.ct-section):not(.oxy-easy-posts),
.accordion-container.oxy-easy-posts .oxy-posts,
.accordion-container.ct-section .ct-section-inner-wrap{
display:flex;
}
.accordion-row {
 padding-left:clamp(2rem, 1.339vw + 1.357rem, 5rem) ;
 padding-right:clamp(2rem, 1.339vw + 1.357rem, 5rem) ;
}
.accordion-header {
}
.accordion-header:not(.ct-section):not(.oxy-easy-posts),
.accordion-header.oxy-easy-posts .oxy-posts,
.accordion-header.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
}
.accordion-title {
}
.accordion-content {
}
.accordion-snippet-visible {
}
.accordion-reveal {
}
.accordion-reveal-inner {
 overflow:hidden;
}
.accordion-reveal-inner:not(.ct-section):not(.oxy-easy-posts),
.accordion-reveal-inner.oxy-easy-posts .oxy-posts,
.accordion-reveal-inner.ct-section .ct-section-inner-wrap{
display:block;
}
.row-border-svg {
}
.last-card {
}
.fullwidth-divider-line {
/* Subtracts the gap from both the left and right */ width: calc(100% - (2 * var(--h-gap))) !important; /* Centers the element horizontally */ margin-left: auto !important; margin-right: auto !important;
}
.software-interface {
 width:100%;
 max-width:100%;
 padding-left:clamp(1rem, 1.116vw + 0.464rem, 3.5rem) ;
 padding-right:clamp(1rem, 1.116vw + 0.464rem, 3.5rem) ;
 padding-bottom:clamp(4rem, 2.679vw + 2.714rem, 10rem) ;
}
.software-interface:not(.ct-section):not(.oxy-easy-posts),
.software-interface.oxy-easy-posts .oxy-posts,
.software-interface.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:stretch;
}
.panel-overlay {
}
.main-name {
}
.bio-reveal-wrapper {
 overflow:hidden;
 padding-left:clamp(2rem, 1.339vw + 1.357rem, 5rem) ;
 padding-right:clamp(2rem, 1.339vw + 1.357rem, 5rem) ;
}
.bio-reveal-wrapper:not(.ct-section):not(.oxy-easy-posts),
.bio-reveal-wrapper.oxy-easy-posts .oxy-posts,
.bio-reveal-wrapper.ct-section .ct-section-inner-wrap{
display:flex;
}
.bio-col-right {
}
.bio-col-left {
 padding-right:60px;
}
@media (max-width: 767px) {
.bio-col-left {
 padding-right:0px;
}
}

.bio-content-inner {
}
.bio-content-inner:not(.ct-section):not(.oxy-easy-posts),
.bio-content-inner.oxy-easy-posts .oxy-posts,
.bio-content-inner.ct-section .ct-section-inner-wrap{
display:grid;
display: grid !important;align-items: stretch;grid-template-columns: repeat(2, minmax(200px, 1fr));grid-column-gap: 0px;grid-row-gap: 0px;}
.bio-trigger {
}
.case-study-section {
 width:100%;
 background-color:#000000;
}
.case-study-section .ct-section-inner-wrap {
padding-right: clamp(1rem, 1.116vw + 0.464rem, 3.5rem) ;
padding-left: clamp(1rem, 1.116vw + 0.464rem, 3.5rem) ;
}
@media (max-width: 767px) {
.case-study-section {
 width:100%;
}
.case-study-section .ct-section-inner-wrap {
padding-right: 1.25rem;
padding-left: 1.25rem;
}
}

.case-study-codeblock {
 width:100%;
 margin-top:clamp(3.5rem, 1.339vw + 2.857rem, 6.5rem) ;
}
.case-study-details-wrapper {
}
.project-details-codeblock {
}
.case-study-details {
}
.case-study-wrapper {
}
.case-study {
}
.hero-video {
}
/* 1. RESET PARENT CONSTRAINTS */
/* Ensure the section containing the wrapper doesn't push it down */
.ct-section-inner-wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 2. SHARED STICKY WRAPPER */
.sticky-wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 0 !important; /* Forces instant lock at the very top */
  margin-top: 0 !important;
  min-height: 100vh;
  height: 100vh; /* Helps Safari define the 'sticky' window */
  display: grid !important;
  place-items: center !important; 
  grid-template-areas: "main-stack" !important;
  width: 100%;
  overflow: visible !important;
  align-self: start; /* Prevents flex/grid centering from the parent */
}

/* 3. PORTFOLIO ITEMS */
.reveal-portfolio-item {
  grid-area: main-stack !important;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.98);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); /* Cinematic smoothing */
  will-change: transform, opacity;
}

.reveal-portfolio-item.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/* 4. PROGRESS DOTS CONTAINER */
.portfolio-dots {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 100;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2); 
  transition: all 0.4s ease;
  border: 1px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.dot.active {
  background: #ffffff;
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* 5. WORDPRESS ADMIN BAR OFFSET FIX */
/* This stops the '20px-32px jump' specifically when logged in */
body.admin-bar .sticky-wrapper {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar .sticky-wrapper {
    top: 46px !important;
  }
}/* ============================================================ 
   1. WRAPPER & ADMIN BAR FIX (DYNAMIC HEIGHT)
   ============================================================ */ 
.hero-frame-wrapper {
    width: 100%;
    height: 100dvh; /* Using dvh for better mobile viewport accuracy */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* Adjusts height for WordPress Admin Bar */
body.admin-bar .hero-frame-wrapper { 
    height: calc(100dvh - 32px); 
}
@media screen and (max-width: 782px) {
    body.admin-bar .hero-frame-wrapper { height: calc(100dvh - 46px); }
}

/* Force Oxygen's inner-wrap to be invisible/full-size */
.hero-frame-wrapper > .ct-section-inner-wrap {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
}

/* ============================================================ 
   2. SHARED HERO BASE (SYMMETRIC CENTER-LOCK)
   ============================================================ */ 
.hero-media, 
.hero-media-vertical {
    position: absolute !important;
    top: var(--h-top) !important;
    left: 50% !important;
    transform: translateX(-50%) translateZ(0) !important;
    
    /* DYNAMIC SYNC: 
       We take the smaller of:
       1. The fluid width (100% minus frames)
       2. The static width (2720px minus frames)
    */
    width: min(calc(100% - (var(--h-frame) * 2)), calc(2720px - (var(--h-frame) * 2))) !important;
    
    min-width: 0 !important; 
    border-radius: var(--global-radius) !important;
    overflow: hidden !important;
    z-index: 1;
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ============================================================ 
   3. DESKTOP LOGIC (Above 768px)
   ============================================================ */ 
@media screen and (min-width: 769px) {
    .hero-media { 
        display: block !important; 
        height: calc(100% - var(--h-top) - var(--h-bottom)) !important;
    }
    .hero-media-vertical { 
        display: none !important; 
    }
}

/* ============================================================ 
   4. MOBILE LOGIC (768px and Below)
   ============================================================ */ 
@media screen and (max-width: 768px) {
    .hero-media { 
        display: none !important; 
    }
    
    .hero-media-vertical { 
        display: block !important; 
        
        /* RESTORED: Floating card with 2rem corners */
        height: calc(100% - var(--h-top)) !important;
        border-radius: var(--global-radius) !important;
        
        /* Anchored to top frame */
        top: var(--h-top) !important;
    }
}/* ============================================================
   THE MASTER HERO FOOTER
   ============================================================ */

:root {
    /* 1. FRAME & SPACING VARIABLES */
    --hero-frame-width: clamp(1rem, 1.116vw + 0.464rem, 3.5rem); 
    --hero-inner-gap: clamp(2rem, 1.339vw + 1.357rem, 5rem);
    --hero-total-offset: calc(var(--hero-inner-gap) + var(--hero-frame-width));
}

.hero-footer-bar {
    /* 1. SYNC CONSTANTS */
    --max-width-limit: 2720px;

    /* 2. POSITIONING & CENTERING */
    position: absolute !important;
    bottom: var(--hero-total-offset) !important;
    
    /* THE FIX: Center-Push Logic */
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    /* 3. WIDTH & CONSTRAINTS */
    width: 100% !important;
    max-width: var(--max-width-limit) !important;
    height: auto !important;
    z-index: 50;

    /* 4. DESKTOP LAYOUT (3-COLUMN GRID) */
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important; 
    align-items: end !important; 
    
    /* 5. SAFE ZONE PADDING */
    /* Preserving your original offsets for internal spacing */
    padding-left: var(--hero-total-offset) !important;
    padding-right: var(--hero-total-offset) !important;
    
    box-sizing: border-box !important;
    pointer-events: none; 
}

/* --- THE 3-COLUMN STRUCTURE --- */

.footer-col-left, 
.footer-col-center, 
.footer-col-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0;
}

/* LEFT: Pinned to left frame */
.footer-col-left { 
    align-items: flex-start; 
    text-align: left; 
}

/* CENTER: Mathematically locked to 50% of the screen */
.footer-col-center { 
    align-items: center; 
    text-align: center; 
    pointer-events: auto; 
}

/* RIGHT: Pinned to right frame */
.footer-col-right { 
    align-items: flex-end; 
    text-align: right; 
}

/* --- TYPOGRAPHY --- */

.hero-footer-bar span, 
.hero-footer-bar p {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.4;
    white-space: nowrap; 
}

/* --- SCROLL UNIT (INLINE & BOTTOM-ALIGNED) --- */

.scroll-icon-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important; 
    gap: 1.5rem;
    cursor: pointer;
    animation: hero-bounce 2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes hero-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(12px); }
}

/* ANIMATED VERTICAL LINE */
.hero-scroll-line {
    width: 1px;
    height: 40px; 
    background-color: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.hero-scroll-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    animation: scrollSlide 2.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes scrollSlide {
    0% { transform: translateY(-100%); }
    50% { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

/* ============================================================
   RESPONSIVE MODE: < 768PX (MOBILE 2-COLUMN SHIFT)
   ============================================================ */

@media screen and (max-width: 768px) {
    .hero-footer-bar {
        /* Drop to two 50% columns */
        grid-template-columns: 1fr 1fr !important;
    }

    /* 1. Hide the right-most info column */
    .footer-col-right {
        display: none !important;
    }

    /* 2. Snap the Scroll unit to the right edge */
    .footer-col-center {
        /* Force to the right edge of the grid cell */
        justify-self: end !important; 
        align-items: flex-end !important;
        text-align: right !important;
        
        /* Reset positioning for the mobile grid flow */
        position: static !important;
        transform: none !important;
    }
}/* ============================================================
   SITE HEADER - TOTAL RESET & MARGIN SYNC
   ============================================================ */

.site-header-fixed {
    --h-frame: clamp(1rem, 1.116vw + 0.464rem, 3.5rem); 
    --h-gap: clamp(2rem, 1.339vw + 1.357rem, 5rem);
    --h-total: calc(var(--h-frame) + var(--h-gap));
    --max-width-limit: 2720px;

    /* THE POSITIONING FIX */
    position: fixed !important; 
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    /* WIDTH LOGIC */
    width: 100% !important; 
    max-width: var(--max-width-limit) !important;
    
    box-sizing: border-box !important;
    height: clamp(3.5rem, 1.339vw + 2.857rem, 6.5rem) !important;
    padding: 0 var(--h-total) !important;
    
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    z-index: 10000 !important;

    /* THE BACKGROUND FIX */
    /* On Desktop, we stay transparent for the Hero */
    background-color: transparent !important;
}

/* --- THE MOBILE CEILING (Fixes the bleed) --- */
@media screen and (max-width: 1024px) { /* Trigger this earlier at your breakpoint */
    .site-header-fixed {
        /* Force a solid black background so content can't be seen behind it */
        background-color: #000000 !important; 
        
        /* Optional: Add this to handle the "iPhone Notch" area better */
        padding-top: env(safe-area-inset-top) !important; 
        height: auto !important;
        min-height: 4rem !important;
    }
}

/* --- THE SCROLL STATE (Desktop fallback) --- */
.site-header-fixed.is-scrolled {
    background-color: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
}

/* 2. OXYGEN INNER-WRAP OVERRIDE */
.site-header-fixed .ct-section-inner-wrap {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important; 
    padding: 0 !important;
    margin: 0 !important;
}

/* THE BUTTONS & ICONS */
.site-header-fixed a { display: flex !important; align-items: center !important; text-decoration: none !important; padding: 0 !important; margin: 0 !important; }
.site-header-fixed a span, .site-header-fixed a p { margin: 0 !important; padding: 0 !important; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.25em; color: rgba(255, 255, 255, 0.6); margin-right: -0.25em !important; }

/* THE ICON RESET */
.button-hover-icon {
    opacity: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: scale(0.6);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
    display: flex !important;
    overflow: hidden;
}

.site-header-fixed a:hover .button-hover-icon {
    opacity: 1 !important;
    width: 1rem !important;
    transform: scale(1);
}

/* Admin Bar */
.admin-bar .site-header-fixed { top: 32px !important; }
/* ============================================================
   1. SHARED / GLOBAL RESET (FLUID CLAMPS)
   ============================================================ */
:root {
    --h-top: clamp(3.5rem, 1.339vw + 2.857rem, 6.5rem);
    --h-frame: clamp(1rem, 1.116vw + 0.464rem, 3.5rem); 
    --h-bottom: clamp(1rem, 1.116vw + 0.464rem, 3.5rem); 
    --h-gap: clamp(2rem, 1.339vw + 1.357rem, 5rem);
}

/* ============================================================
   2. PROJECT STACK: DESKTOP ENGINE (1100px and Up)
   ============================================================ */
@media screen and (min-width: 1100px) {
    .project-stack-section {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important; 
        height: 125dvh; 
        width: 100% !important;
        background-color: transparent !important; 
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        z-index: 1;
    }

    .stack-inner-sync {
        display: block !important;
        width: 100% !important;
        height: 100dvh !important;
        box-sizing: border-box !important;
        padding: var(--h-top) var(--h-frame) var(--h-bottom) var(--h-frame) !important;
    }

    .project-columns {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        height: 100% !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
    }

    .project-details {
        flex: 0 0 30% !important;
        min-width: 30% !important; /* Re-enforced width */
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        padding-right: var(--h-gap) !important; 
        box-sizing: border-box !important;
    }

    .project-details-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        will-change: transform, opacity;
        transform: translate3d(0, 0, 0);
    }

    .project-visual {
        flex: 0 0 70% !important;
        min-width: 70% !important; /* Re-enforced width */
        height: 100% !important;
        min-height: 500px !important; /* Safety height for rendering */
        border-radius: 2rem !important;
        overflow: hidden !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        box-sizing: border-box !important;
    }

    .last-card {
        height: 125dvh !important;
        margin-bottom: 25vh !important;
    }
}

/* ============================================================
   VISIBILITY ENGINE (768px & 1100px Logic)
   ============================================================ */

/* 1. WIDE DESKTOP (1100px and Up) */
@media screen and (min-width: 1100px) {
    /* Show the Number only on the biggest screens */
    .text-number { 
        display: block !important; 
    }
    .project-body-copy-long { 
        display: block !important; 
    }
    .project-body-copy-short { 
        display: none !important; 
    }
}

/* 2. LAPTOP / LARGE TABLET (769px to 1099px) */
@media screen and (min-width: 769px) and (max-width: 1099px) {
    /* Number is hidden now */
    .text-number { 
        display: none !important; 
    }
    /* Long copy still shows until we hit 768px */
    .project-body-copy-long { 
        display: block !important; 
    }
    .project-body-copy-short { 
        display: none !important; 
    }
}

/* 3. MOBILE & TABLET (768px and Below) */
@media screen and (max-width: 768px) {
    /* Number stays hidden */
    .text-number { 
        display: none !important; 
    }
    /* Swap to Short Copy */
    .project-body-copy-long { 
        display: none !important; 
    }
    .project-body-copy-short { 
        display: block !important; 
    }
}

/* ============================================================
   3. PROJECT STACK: MOBILE & TABLET (100vh Dynamic Filling)
   ============================================================ */
@media screen and (max-width: 1099px) {
    .project-stack-section { 
        position: relative !important; 
        height: 100vh !important; /* Force each project to be a full screen */
        margin-bottom: 0 !important; 
        display: block !important;
        overflow: hidden !important;
    }

    .stack-inner-sync {
        height: 100vh !important;
        width: 100% !important;
        padding: var(--h-top) var(--h-frame) var(--h-bottom) var(--h-frame) !important;
        display: flex !important;
        flex-direction: column !important; /* Stack them */
        box-sizing: border-box !important;
    }

    .project-columns { 
        display: flex !important;
        flex-direction: column !important; 
        height: 100% !important; /* Fill the inner sync */
        width: 100% !important;
        gap: clamp(1rem, 1.116vw + 0.464rem, 3.5rem) !important; 
    }

    .project-visual { 
        order: 1 !important; 
        width: 100% !important;
        /* FLEX MAGIC: */
        flex: 1 1 auto !important; /* Grows to fill space, shrinks if text is long */
        height: auto !important;    /* Remove the hard 45vh cap */
        min-height: 20vh !important; /* Safety floor so image doesn't disappear */
        
        border-radius: 2rem !important;
        background-size: cover !important;
        background-position: center !important;
    }

    .project-details { 
        order: 2 !important; 
        width: 100% !important;
        flex: 0 0 auto !important; /* Takes only the space the text needs */
        
        background-color: #000000 !important; 
        padding: clamp(1rem, 1.116vw + 0.464rem, 3.5rem) !important; /* Slightly tighter padding for mobile space */
        border-radius: 2rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; 
    }

    .project-details-container { 
        width: 100% !important;
        transform: none !important; 
        opacity: 1 !important; 
    }
}/* ============================================================
   0. SECTION & PINNING STABILITY
   ============================================================ */
#section-601-571 {
    position: relative !important;
    z-index: 100;
    background-color: #000000;
    margin-top: 0 !important; 
    padding: 0 !important;
    overflow: visible !important;
    min-height: 100vh;
}

#section-601-571 > .ct-section-inner-wrap {
    height: auto !important;
    min-height: 100% !important;
    display: flex;
    flex-direction: column;
    padding-top: 8rem !important; 
    padding-bottom: 8rem !important;
    transform: none !important;
}

/* ============================================================
   1. ACCORDION ROW STRUCTURE
   ============================================================ */
.accordion-row {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    padding: clamp(2rem, 1.339vw + 1.357rem, 5rem);
    margin-bottom: 2rem;
    cursor: pointer;
    position: relative;
    border-radius: 20px;
    
    /* Hardware Acceleration & Layer Isolation */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    isolation: isolate;
    overflow: hidden; 
    backface-visibility: hidden;
}

/* THE HOVER FILL */
.accordion-row::before {
    content: "";
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    border-radius: 20px; 
    background-color: #111111;
    opacity: 0;
    z-index: 0; 
    transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
    will-change: opacity;
}

.accordion-row:hover::before { 
    opacity: 1; 
}

/* ============================================================
   2. SVG BORDER ENGINE
   ============================================================ */
.row-border-svg {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    pointer-events: none;
    z-index: 1; 
}

.border-path {
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 1.5px;
    fill: none;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision; 
}

/* ============================================================
   3. CONTENT & REVEAL ENGINE
   ============================================================ */
.accordion-header {
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
    align-items: flex-start; 
    width: 100%;
    position: relative;
    z-index: 2; 
}

.accordion-title {
    flex: 0 0 30%;
    padding-right: 4rem; 
    margin: 0;
    color: #ffffff;
    opacity: 0; /* Handled by GSAP entrance */
    transform: translateY(20px);
}

.accordion-content {
    flex: 0 0 50%;
    margin: 0;
    display: flex;
    flex-direction: column;
    opacity: 0; /* Handled by GSAP entrance */
    transform: translateY(20px);
}

.accordion-reveal {
    display: grid;
    grid-template-rows: 0fr; 
    transition: grid-template-rows 0.7s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden; 
    position: relative;
    z-index: 2;
    will-change: grid-template-rows;
}

.accordion-row:hover .accordion-reveal { 
    grid-template-rows: 1fr; 
}

.accordion-reveal-inner {
    min-height: 0; 
    width: 100%;
}

.accordion-full-body {
    margin-top: 1.5rem; 
    color: rgba(255, 255, 255, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease; 
    line-height: 1.6;
}

.accordion-row:hover .accordion-full-body {
    opacity: 1;
    transition-delay: 0.2s;
}

/* ============================================================
   4. MOBILE RESPONSIVE (REPAIRED)
   ============================================================ */
@media screen and (max-width: 768px) {
    .accordion-row {
        /* If you want to keep the rounded look on mobile, 
           change '0' to '1.5rem' or similar */
        border-radius: 1rem; 
        margin-bottom: 1rem;
    }

    /* REMOVED .row-border-svg and .accordion-reveal from here */
    .accordion-row::before {
        display: none !important; /* Keeps the hover effect off on touch devices */
    }

    .accordion-header { 
        flex-direction: column !important; 
    }

    .accordion-title { 
        flex: 0 0 100%;
        padding-right: 0;
        margin-bottom: 1rem !important; 
        font-size: 1.2rem; /* Optional: Scale down for mobile */
    }

    .accordion-content {
        flex: 0 0 100%;
    }
}/* ============================================================ 
   1. GLOBAL DEFAULTS & ROOT DNA
   ============================================================ */ 

html {
    /* Sets 1rem = 10px for easier math (e.g., 1.6rem = 16px) */
    font-size: 62.5%; 
    background-color: #000000 !important;
    /* Prevents horizontal scroll "jiggle" during transitions */
    overflow-x: hidden; 
}

body {
    margin: 0;
    padding: 0;
    background-color: #000000 !important;
    min-height: 100vh;
    /* Smooths out font rendering on macOS/iOS */
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================ 
   2. MASTER ROOTS (FLUID CLAMPS)
   ============================================================ */ 
:root { 
    --h-top: clamp(3.5rem, 1.339vw + 2.857rem, 6.5rem);
    --h-frame: clamp(1rem, 1.116vw + 0.464rem, 3.5rem);  
    --h-bottom: clamp(1rem, 1.116vw + 0.464rem, 3.5rem); 
    --global-radius: 2rem; 
} 

@media screen and (max-width: 768px) { 
    :root { 
        --h-frame: 1.25rem !important;  
        --h-bottom: 1.25rem !important;
        --h-top: 4rem !important;  
        --global-radius: 2rem !important; 
    } 
}

/* ============================================================ 
   3. THE WINDOW (2720px MAX-WIDTH LOCK)
   ============================================================ */ 
.global-rounded-frame { 
    position: fixed !important; 
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) translate3d(0,0,0);
    
    width: 100% !important;
    max-width: 2720px !important;
    height: 100dvh !important; 
    
    z-index: 9999; 
    pointer-events: none; 
    background: transparent !important;
    overflow: visible; 
}

/* THE INFINITE WINGS (Blackout for Ultrawide) */
.global-rounded-frame::before,
.global-rounded-frame::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100vw; 
    height: 100%;
    background: #000000;
    z-index: 1;
}

.global-rounded-frame::before { right: 100%; }
.global-rounded-frame::after { left: 100%; }

@media screen and (max-width: 768px) {
    .global-rounded-frame {
        height: 115dvh !important; 
        left: 0 !important;
        transform: none !important;
        max-width: 100% !important;
    }
}

/* ============================================================ 
   4. FRAME BARS (THE SHADOW BOX)
   ============================================================ */ 
.frame-bar-top, .frame-bar-bottom, .frame-bar-left, .frame-bar-right {
    position: absolute;
    background: #000000;
    z-index: 10;
}

.frame-bar-top { 
    top: 0; 
    left: 50%;
    width: 100vw; 
    transform: translateX(-50%);
    height: var(--h-top); 
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.frame-bar-left  { top: 0; left: 0; width: var(--h-frame); height: 100%; }
.frame-bar-right { top: 0; right: 0; width: var(--h-frame); height: 100%; }

.frame-bar-bottom { 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: var(--h-bottom); 
}

/* THE CORNER MASK (THE REVEAL WINDOW) */
.frame-corners {
    position: absolute;
    inset: var(--h-top) var(--h-frame) var(--h-bottom) var(--h-frame);
    z-index: 5;
    border-radius: var(--global-radius);
    box-shadow: 0 0 0 100vw #000000; 
}

@media screen and (max-width: 768px) {
    .frame-corners {
        bottom: 0 !important;
        inset: var(--h-top) var(--h-frame) 0 var(--h-frame) !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-top-left-radius: var(--global-radius) !important;
        border-top-right-radius: var(--global-radius) !important;
    }
}

/* ============================================================ 
   5. IMAGES NOT DRAGGABLE
   ============================================================ */ 
/* Prevent images from being dragged or highlighted */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    user-select: none;
    pointer-events: none; /* This makes the image 'invisible' to mouse clicks */
}

/* 
   IMPORTANT: Since pointer-events are disabled on images, 
   ensure your slider containers have a background color 
   so they can still receive the clicks/drags.
*/
.ds-visual-frame, .ds-comparison-wrapper {
    background-color: #111;
}

/* ============================================================
   MOUSE HIDE (MOBILE & TOUCH)
   ============================================================ */

/* Hide custom cursor on screens smaller than 768px */
@media screen and (max-width: 768px) {
    .custom-cursor, 
    .cursor-crosshair, 
    .cursor-ring {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Hide on any device without a 'fine' pointer (Tablets/Touch) */
@media (pointer: coarse) {
    .custom-cursor, 
    .cursor-crosshair, 
    .cursor-ring {
        display: none !important;
    }
}

/* ============================================================
   GLOBAL SCROLLBAR UTILITIES
   ============================================================ */

/* 1. Modern Standard (Firefox) */
* {
    scrollbar-width: thin;
    scrollbar-color: #333333 #1a1a1a;
}

/* 2. Webkit Engine (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px; 
}

::-webkit-scrollbar-track {
    background: #1a1a1a; 
}

::-webkit-scrollbar-thumb {
    background: #333333; 
    border-radius: 10px;
    border: 0px solid #1a1a1a; 
}

::-webkit-scrollbar-thumb:hover {
    background: #444444; 
}

/* ============================================================
   ANIMATION UTILITIES: CINEMATIC REVEALS
   ============================================================ */

/* 1. HERO REVEAL (Scale & Blur) */
.hero-reveal { 
    opacity: 0 !important; 
    transform: scale(1.08) !important; 
    filter: blur(15px) !important; 
    visibility: hidden !important; 
    transition: 
        opacity 1.6s ease-out, 
        transform 1.8s cubic-bezier(0.19, 1, 0.22, 1), 
        filter 1.6s ease-out, 
        visibility 1.6s !important; 
    will-change: transform, opacity, filter; 
}

.hero-reveal.is-active { 
    opacity: 1 !important; 
    transform: scale(1) !important; 
    filter: blur(0px) !important; 
    visibility: visible !important; 
}

/* 2. MASKED REVEAL (Slide & Clip) */
.reveal-mask {
    display: block;
    margin: 0;
    padding: 0;
    clip-path: inset(0 0 100% 0); 
    transform: translateY(110%);
    opacity: 0;
    transition: 
        clip-path 1.2s cubic-bezier(0.23, 1, 0.32, 1),
        transform 1.2s cubic-bezier(0.23, 1, 0.32, 1),
        opacity 0.8s ease;
}

.reveal-mask.is-active {
    clip-path: inset(0 0 0% 0);
    transform: translateY(0);
    opacity: 1;
}

/* STAGGER DELAYS */
.reveal-delay-1 { transition-delay: 0.2s; }
.reveal-delay-2 { transition-delay: 0.4s; }
.reveal-delay-3 { transition-delay: 0.6s; }

/* ============================================================
   VIEWPORT & UI UTILITIES
   ============================================================ */

/* 1. SCROLL INDICATOR: BOUNCE */
.scroll-icon-container {
    animation: hero-bounce 2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    will-change: transform;
}

@keyframes hero-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

.scroll-icon-container:hover { animation-play-state: paused; }

/* 2. CEILING FADE (Mobile/Tablet Only) */
/* Hides content bleed behind the status bar on mobile */
.viewport-ceiling-fade {
    display: none;
}

@media screen and (max-width: 768px) {
    .viewport-ceiling-fade {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 10vh; 
        background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 999; 
        pointer-events: none; /* Crucial: ensures nav links remain clickable */
    }
}/* ============================================================
   HUD TOOLTIP: DIV-BASED ANCHOR
   ============================================================ */

/* The Parent Div */
.software-box {
    position: relative !important;
    display: inline-flex !important; /* Keeps boxes side-by-side */
    justify-content: center;
    align-items: center;
    cursor: help;
}

/* The Tooltip Box */
.software-box::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 12px); /* Space above the icon */
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    
    /* STYLING */
    background: #000000;
    color: #ffffff;
    padding: 3px 3px;
    font-family: inherit; 
    font-size: 9px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    
    /* ANIMATION */
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 99;
}

/* HOVER STATE */
.software-box:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   ABOUT ME: LAYOUT & OVERLAP SYNC
   ============================================================ */

.about-me-section {
    position: relative; 
    z-index: 100;
    min-height: 100vh;
    height: auto !important;
    
    /* Transparent to prevent clipping against the global site background */
    background-color: transparent !important; 
    
    /* Creating the "runway" to prevent card collision */
    padding-top: 10dvh !important; 
    margin-top: 0 !important;
    overflow: visible !important;
}

/* Force Inner Wrap transparency */
.about-me-section > .ct-section-inner-wrap {
    background-color: transparent !important;
}

/* DESKTOP SPACING SYNC */
@media screen and (min-width: 1100px) {
    .about-me-section {
        /* Larger gap to account for the sticky 125dvh portfolio cards */
        padding-top: 50vh !important;
    }
}

/* ============================================================ 
   EMERGENCY STICKY RECOVERY: SPECIFICITY OVERRIDE
   ============================================================ */ 

/* 4. Disable any hidden parent high up in the Oxygen Template */
.oxygen-body, #inner_content {
    overflow: visible !important;
}





/* ============================================================
   IDENTITY: MAIN-NAME BOOT-UP & HOVER REVEAL
   ============================================================ */
.main-name {
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    cursor: crosshair;
}

.main-name::after {
    content: '_';
    margin-left: 5px;
    color: #ffffff; /* Your tech accent color */
    
    /* Plays 3 times then stops at the final frame (opacity: 0) */
    animation: blink-and-vanish 0.8s step-end 3 forwards;
}

/* 100% is set to 0 so 'forwards' hides it after the 3rd blink */
@keyframes blink-and-vanish {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* THE HOVER TRIGGER: Wake the cursor back up */
.main-name:hover::after {
    animation: none; /* Kill the initial animation */
    opacity: 1;      /* Force visibility */
    color: #ffffff;  /* Optional: change color on hover to show interaction */
}

/* ============================================================
   INTERFACE BUTTON: INTEGRATED ROTATION
   ============================================================ */

.interface-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    /* Spacing: Uses your custom clamp for responsive padding */
    padding-left: clamp(2rem, 1.339vw + 1.357rem, 5rem);
    padding-top: clamp(2rem, 1.339vw + 1.357rem, 5rem);
    background: transparent;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-text {
    font-family: obviously-wide;
    font-size: clamp(0.8rem, 0.089vw + 0.757rem, 1rem); 
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-right: 0.8rem;
    transition: color 0.4s ease;
}

.btn-icon {
    font-family: monospace;
    font-size: 1.4rem;
    color: #FF0000; /* ALWAYS RED */
    display: inline-block; /* Required for rotation */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* HOVER STATE: Text fades to Red */
.interface-btn:hover .btn-text {
    color: #FF0000;
}

/* THE ROTATION: Arrow rotates 90deg when active */
.is-open-trigger .btn-icon {
    transform: rotate(90deg) !important;
}

/* ============================================================
   COMPONENT: BIO-REVEAL (PUSH-DOWN)
   ============================================================ */

/* 1. The Outer Wrapper */
.bio-reveal-wrapper {
    display: grid !important;
    /* Grid-row expansion for smooth 1-stage motion */
    grid-template-rows: 0fr !important; 
    transition: grid-template-rows 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    overflow: hidden;
    
    /* Ensuring Oxygen doesn't reserve 'ghost' space */
    min-height: 0 !important;
}

.bio-reveal-wrapper.is-open {
    grid-template-rows: 1fr !important;
}

/* 2. The Inner Content */
.bio-content-inner {
    min-height: 0 !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    /* Fixed padding to prevent transition snapping */
    padding: 0 0 0 0; 
    
    /* DEFAULT STATE (Closing) */
    opacity: 0 !important;
    transform: translateY(-0px);
    transition: 
        opacity 0.3s ease-out, 
        transform 0.3s ease-out;
}

/* OPEN STATE (Revealing) */
.bio-reveal-wrapper.is-open .bio-content-inner {
    opacity: 1 !important;
    transform: translateY(0);
    transition: 
        opacity 0.6s ease-out, 
        transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    /* Momentum delay */
    transition-delay: 0.2s; 
}

/* 3. Mobile Stacking */
@media (max-width: 768px) {
    .bio-content-inner {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }
}/* ============================================================
   TYPEWRITER REVEAL
   ============================================================ */

.typewriter-reveal {
  color: transparent !important;
  display: block !important;
}

/* The 'Off' State: Dimmed out words */
.reveal-word {
  display: inline-block !important;
  color: var(--dim-color, #1a1a1a) !important;
  opacity: var(--dim-opacity, 0.2) !important;
  
  /* 0.6s is the sweet spot for a 'gradual' but responsive feel */
  transition: color 0.6s ease, opacity 0.6s ease !important;
  margin-right: 0.25em;
  white-space: pre;
}

/* The 'On' State: Lit up words */
.reveal-word.is-visible {
  color: var(--bright-color, #ffffff) !important;
  opacity: 1 !important;
}.oxy-header-center{
 display:flex;
 flex-direction:column;
 align-items:flex-end;
}
@media (max-width: 2720px) {
.oxy-header-center{
 display:flex;
 flex-direction:column;
 align-items:flex-end;
}
}

@media (max-width: 1099px) {
.oxy-header-center{
 display:flex;
 flex-direction:column;
 align-items:flex-end;
}
}