/**
 * assets/css/flexible-page.css
 * Orion ΄σΟσΚΣΖ΅ – Flexible Page styles (GeneratePress child 2025)
 * Colours & fonts: blue #104AEC, black #343647, gray #1A1B24
 */

:root {
	--blue:   #104AEC;
	--black:  #343647;
	--bggray: #1A1B24;
	--max:    88vw;
}

body {background-color: white !important;}

/* ────────── Fonts ────────── */
@font-face {
	font-family: "BrownPro";
	src: url("/wp-content/themes/orionrebuild/assets/fonts/BrownPro-Regular.woff2") format("woff2"),
	     url("/wp-content/themes/orionrebuild/assets/fonts/BrownPro-Regular.woff")  format("woff");
	font-weight: 400;
	font-style:  normal;
	font-display: swap;
}
@font-face {
	font-family: "BrownPro";
	src: url("/wp-content/themes/orionrebuild/assets/fonts/BrownPro-Bold.woff2") format("woff2"),
	     url("/wp-content/themes/orionrebuild/assets/fonts/BrownPro-Bold.woff")  format("woff");
	font-weight: 700;
	font-style:  normal;
	font-display: swap;
}
@font-face {
	font-family: "Open Sans";
	src: url("/wp-content/themes/orionrebuild/assets/fonts/OpenSans-Regular.woff2") format("woff2"),
	     url("/wp-content/themes/orionrebuild/assets/fonts/OpenSans-Regular.woff")  format("woff");
	font-weight: 400;
	font-style:  normal;
	font-display: swap;
}
@font-face {
	font-family: "Open Sans";
	src: url("/wp-content/themes/orionrebuild/assets/fonts/OpenSans-Bold.woff2") format("woff2"),
	     url("/wp-content/themes/orionrebuild/assets/fonts/OpenSans-Bold.woff")  format("woff");
	font-weight: 700;
	font-style:  normal;
	font-display: swap;
}

/* Heading & body defaults */
h1,h2,h3,h4,h5,h6 { font-family: "BrownPro", sans-serif !important; color: var(--black); }
body,p,label,span,a,li,input,textarea,button { font-family: "Open Sans", sans-serif !important; }

/* ────── Updated Typography Scale (16 px base) ────── */
html { font-size: 16px; margin: 0 !important;}            /* keep your root baseline */

h1 { font-size: 4rem; }     
h2 { font-size: 2.5rem; }     
h3 { font-size: 1.75rem; }   
h4 { font-size: 1.375rem; }  
h5 { font-size: 1.125rem; }  
h6 { font-size: 1rem; }      

/* Hero headlines inherit the new h1 size */
.hero-headline { font-size: 86px; }

@media (max-width: 768px) {

    /* Maintain hierarchy but reduce sizes for mobile */
    /*h1, .hero-headline { 
        font-size: 56px;
        line-height: 1.1;
    }
    
    h2 { 
        font-size: 42px;
        line-height: 1.15;
    }
    
    h3 { 
        font-size: 34px;
        line-height: 1.2;
    }
    
    h4 { 
        font-size: 28px;
        line-height: 1.2;
    }
    
    h5 { 
        font-size: 22px;
        line-height: 1.3;
    }
    
    h6 { 
        font-size: 18px;
        line-height: 1.3;
    }
    

    .header-section .header-title {
        font-size: 42px;
        padding: 3rem 1.5rem;
    }
    
    .hero-parallax h2 {
        font-size: 42px; 
    }*/
    
}

/* ────────── Additional Mobile Improvements ────────── */
@media (max-width: 480px) {
    /* Even smaller screens */
    /*h1, .hero-headline { 
        font-size: 42px;
    }
    
    h2 { 
        font-size: 34px;
    }
    
    h3 { 
        font-size: 28px;
    }
    
    h4 { 
        font-size: 24px;
    }
    
    h5 { 
        font-size: 20px;
    }
    
    h6 { 
        font-size: 16px;
    }*/
    
    /* Ensure buttons are touch-friendly */
    .rcs-btn-base {
        min-height: 48px;
        padding: 1rem 2rem;
    }
}

/* ────────── Ensure proper stacking context ────────── */
@media (max-width: 768px) {
    .orion-section {
        position: relative;
        z-index: 1;
    }
}

/* Container */
.container { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; width: 100%; }

/* Full-bleed helper (break out to 100%) */
.full-bleed { position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100% !important; }

/* Buttons */
.rcs-btn-base {
	width: fit-content;
	height: fit-content;
	padding: 1.25rem 3rem;
	border-radius: 40px;
	background: transparent;
	font-family: "BrownPro", sans-serif;
	font-weight: 700;
	border: none;
	cursor: pointer;
	font-size: 15px;
}
.rcs-btn-blue { color: var(--blue); border: 2px solid var(--blue); transition: color .5s, background-color .5s; }
.rcs-btn-blue:hover, .rcs-btn-blue:focus { background: var(--blue); color:#fff !important; }

.rcs-btn-white {
  color: white;
  border: 2px solid white;
  transition: color 0.5s, background-color 0.5s;
}
.rcs-btn-white:hover {
  color: #104AEC !important;
  background-color: white;
}

.page-header, .sidebar .widget, .site-main > * {
  margin-bottom: 0 !important;
}

/* ────────── 1. HERO VIDEO ────────── */
.video-hero { width:100% !important; height:100vh; overflow:hidden; background:var(--bggray);}
.video-hero .video-bg { width:100%; height:100%; object-fit:cover; }
.video-hero .video-overlay { position:absolute; inset:0; background:rgba(26,27,36,.5); z-index:1; }
.hero-headlines { 
    position:absolute; 
    inset:0; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    z-index:2; 
    text-align:left; 
    perspective: 1000px; /* Enable 3D perspective for rotation effect */
}
.hero-headline { 
    position: absolute; /* Stack headlines on top of each other */
    opacity:0; 
    transform: rotateX(90deg); /* Start rotated away */
    transition: opacity 0.6s ease-in-out, transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
    color:#fff; 
    font-size:48px; 
    line-height:1.1; 
    backface-visibility: hidden; /* Prevent flickering during rotation */
    transform-style: preserve-3d;
}
.hero-headline.is-active { 
    opacity:1; 
    transform: rotateX(0deg); /* Rotate to face forward */
}

/* Alternative rotation effects - uncomment to use:

   Option 1: Rotate on Y-axis (horizontal flip)
   .hero-headline { transform: rotateY(-90deg); }
   .hero-headline.is-active { transform: rotateY(0deg); }

   Option 2: Zoom and rotate
   .hero-headline { transform: scale(0.8) rotateX(90deg); }
   .hero-headline.is-active { transform: scale(1) rotateX(0deg); }

   Option 3: Spin in from side
   .hero-headline { transform: rotateY(90deg) translateZ(100px); }
   .hero-headline.is-active { transform: rotateY(0deg) translateZ(0); }

   Option 4: Drop and rotate
   .hero-headline { transform: translateY(-50px) rotateX(45deg); opacity: 0; }
   .hero-headline.is-active { transform: translateY(0) rotateX(0deg); opacity: 1; }
*/
/* ────────── 2. HEADER SECTION ────────── */
/* ────────── 2. HEADER SECTION ────────── */
.header-section { 
    padding: 5rem 0;
    position: relative;
    overflow: hidden; /* Contain the pseudo-element */

}

/* Background image with opacity using pseudo-element */
.header-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 400px; /* Height-based sizing to achieve contain-like behavior */
    background-position: 90% 10%; /* 10% from left, 10% from top */
    opacity: var(--logo-opacity, 0.3); /* Default opacity 0.3 */
    z-index: 0; /* Behind content */
    pointer-events: none; /* Ensure it doesn't interfere with clicks */
}

/* Apply background image from data attribute */
.header-section[data-logo-url]::before {
    background-image: var(--logo-url);
}

.header-section.variant-blue { background-color: var(--blue); }
.header-section.variant-blue h2 { color: #fff; }
.header-section.variant-white { background-color: #fff; }
.header-section.variant-white h2 { color: var(--blue); }

.header-section.full-bleed .header-title {
    max-width: var(--max);
    margin: 0 auto;
    padding: 5rem 1.5rem;
    text-align: center;
    position: relative; /* Ensure text stays above background image */
	text-align:left !important;
    z-index: 1;
}
/* ────────── 3. IMAGE SIGN-UP HERO ────────── */
.image-signup { width:100% !important; height:100vh; background-size:cover; background-position:center; display:flex; align-items:center; }
.signup-wrapper { display:flex; gap:2rem; width:100%; }
.signup-wrapper.reverse { flex-direction:row-reverse; }
.signup-copy { background:rgba(255,255,255,.9); padding:2.5rem; flex:0 0 50%; display:flex; flex-direction:column; justify-content:center; }
.signup-copy h2, .signup-copy p, .signup-form input::placeholder { color:var(--blue); }
.signup-form .form-row { display:flex; gap:1rem; align-items:flex-end; }
.signup-form input[type="email"] { flex:1 1 50%; border:none; border-bottom:2px solid var(--blue); background:transparent; padding:.75rem 0; color:var(--blue); }
/* ────────── 3. IMAGE SIGN-UP HERO - Mobile Fixes ────────── */
@media (max-width: 768px) {
    .image-signup {
        position: relative;
    }
    
    .signup-wrapper {
        flex-direction: column !important; /* Force column layout on mobile */
        height: 100%;
        gap: 0;
    }
    
    .signup-wrapper.reverse {
        flex-direction: column !important; /* Override reverse on mobile */
    }
    
    .signup-copy {
        background: rgba(255, 255, 255, 0.6); /* 33% more transparent (0.9 - 0.3 = 0.6) */
        padding: 3rem 1.5rem;
        flex: 1 1 100%; /* Full width and height */
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
    .signup-copy h2 {
        font-size: 48px; /* Reduced from 66px */
        line-height: 1.1;
        margin-bottom: 1.5rem;
    }
    
    .signup-copy p {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 2rem;
        max-width: 90%;
    }
    
    .signup-blank {
        display: none; /* Hide blank column on mobile */
    }
    
    .signup-form {
        width: 100%;
        max-width: 400px;
    }
    
    .signup-form .form-row {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .signup-form input[type="email"] {
        width: 100%;
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 1rem 0;
    }
    
    .signup-form .rcs-btn-blue {
        width: 100%;
    }
}

/* ────────── 4. GALLERY GRID ────────── */
.gallery-grid { 
    background-color: var(--blue);
    padding: 2rem 0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 0 2rem;
    max-width: 89vw;
    margin: 0 auto;
}

.grid-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: #000;

    /* New: isolate rounding + keep compositing stable */
    contain: paint;
    isolation: isolate;
}

.image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.grid-img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Limit transitions to transform only */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Hint compositing to prevent snap/flicker */
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Hover overlay with pop-in effect */
.overlay {
    position: absolute;
    inset: -0.5px; /* was: inset: 0; small bleed prevents 1px clipping on some widths */
    background: rgba(13, 67, 212, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;

    /* Only animate opacity; use visibility to remove β€œpop” at start/end */
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 300ms;
    pointer-events: none;

    /* New: stable layer */
    will-change: opacity;
}

.overlay-text {
    color: #fff;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
    margin: 0;

    /* pop-in effect */
    transform: translateY(8px) scale(0.96);
    opacity: 0.001; /* avoids layout β€œnoneβ†’block” jump without being visible */
    transition:
        transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1) 90ms,
        opacity 320ms cubic-bezier(0.34, 1.56, 0.64, 1) 90ms;

    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Hover/focus states */
.grid-item:hover .overlay,
.grid-item:focus-within .overlay {
    opacity: 1;
    visibility: visible;            /* becomes visible immediately */
    transition-delay: 0s, 0s;       /* remove the visibility delay on show */
}

.grid-item:hover .overlay-text,
.grid-item:focus-within .overlay-text {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.grid-item:hover .grid-img,
.grid-item:focus-within .grid-img {
    transform: scale(1.05);
}
/* Mobile + other existing media queries remain as-is */
@media (max-width: 768px) {
    .gallery-grid { padding: 1rem 0; }
    .grid-container { grid-template-columns: 1fr; gap: 1rem; padding: 0 1rem; }
    .overlay { padding: 1.5rem; }
    .overlay-text { font-size: 1rem; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .grid-container { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1400px) {
    .grid-container { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}


/* ────── Fixed Header & Slide-in Menu ────── */
.orion-header{
	position:fixed; top:0; left:0; width:100%; height:6rem;
	background:transparent; /* Default to transparent */
	z-index:1000;
	backdrop-filter:blur(0px); /* No blur by default */
	transition: background 0.3s ease, backdrop-filter 0.3s ease; /* Smooth transition */
	/* border-bottom: 2px solid #104AEC; */
}

/* When scrolled, apply the colored background */
.orion-header.scrolled .nav-outer {
	background:rgba(52, 54, 71, 0.75);
	backdrop-filter:blur(6px);
	margin: 0 auto;
	border-bottom: solid #343647 0.5px;
}

.orion-header .nav-outer{width:100%; height:100%;}
.orion-header .nav-inner{
	display:flex; align-items:center; justify-content:space-between;
	height:100%;
}

/* Logo animation setup */
.logo-link {
	display: block;
	text-decoration: none;
	height: 100%; /* Fill header height */
	display: flex;
	align-items: center;
}

.logo-container {
	overflow: hidden;
	position: relative;
	height: 60px; /* Reasonable height within 6rem header */
	/* Width with buffer: (561px Γ— 0.357 = 200.3px) + small buffer for rounding */
	width: 276px; /* Ensures scaled text logo displays fully with buffer */
	box-sizing: content-box; /* Ensure padding doesn't affect width */
	padding: 0; /* Explicit no padding */
	margin: 0; /* Explicit no margin */
}

.logo-track {
	display: flex;
	align-items: center; /* Center vertically */
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
	height: 100%;
	width: 725px; /* Total width: 164px + 561px = 725px */
	/* Scale and position */
	transform: scale(0.357) translateX(0); /* 60px / 168px = 0.357 to fit in header */
	transform-origin: left center;
}

.logo-o, .logo-text {
	flex-shrink: 0;
	display: block;
	object-fit: contain; /* Maintain aspect ratio */
	opacity: 1; /* Ensure both images are visible to prevent pop-in */
	max-width: none !important; /* Override any parent max-width constraints */
	margin: 0; /* No margins */
	padding: 0; /* No padding */
	border: 0; /* No border */
}

/* Use exact dimensions from source files
   logo-o: 164 x 168 px
   logo-text: 561 x 168 px
   Same height ensures seamless transition */
.logo-o {
	width: 164px;
	height: 168px;
}

.logo-text {
	width: 561px;
	height: 168px;
}

/* When scrolled - slide exactly the width of logo-o (164px) */
.orion-header.scrolled .logo-track {
	transform: scale(0.357) translateX(-164px); /* Scale first, then slide */
}

/* Optional: Hide logos until loaded to prevent flash */
.logo-track {
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.orion-header.logos-loaded .logo-track {
	opacity: 1;
}

/* Ensure logo images aren't affected by parent styles */
.logo-link img {
	max-width: none !important; /* Override GeneratePress or other parent theme constraints */
}

/*.logo-o {
	margin-right: 2rem;
}*/

/* Responsive adjustment for smaller screens */
@media (max-width: 768px) {
	.logo-container {
		width: 100% !important; /* Further reduce on mobile */
	}
	.logo-track {
		transform: scale(0.268) translateX(0); /* 0.357 * 0.75 for mobile */
	}
	.orion-header.scrolled .logo-track {
		transform: scale(0.268) translateX(-164px);
	}
}

/* Responsive adjustment for smaller screens */
@media (max-width: 768px) {
	.logo-container {
		width: 150px; /* Further reduce on mobile */
	}
	.logo-track {
		transform: scale(0.268) translateX(0); /* 0.357 * 0.75 for mobile */
	}
	.orion-header.scrolled .logo-track {
		transform: scale(0.268) translateX(-164px);
	}
}

.nav-toggle{background:none; border:none; cursor:pointer; width: 40px; height: 40px; max-width: unset !important;}
.nav-toggle img{width:40px; height:40px; max-width: unset !important;}

/* Slide-in panel */
.slide-menu{
	position:fixed; top:0; right:-30vw; width:30vw; max-width:400px;
	height:100vh;
	/*background:#104AEC;*/
	color:#fff;
	padding:2rem;
	transition:right .4s ease;
	display:flex;
	flex-direction:column;
	background: rgba(52, 54, 71, 0.75);
  	backdrop-filter: blur(6px);
	align-items:center; z-index:1100;
}
.slide-menu.open{right:0;}
.menu-close{align-self:flex-start; margin-bottom:2rem;}

.slide-nav{list-style:none; margin:0; padding:0; width:100%;
	display:flex; flex-direction:column; gap:1.5rem; text-align:center;}
.slide-nav a{color:#fff; font-size:1.5rem; text-decoration:none;
	font-family:"BrownPro",sans-serif;}

body.menu-open{overflow:hidden;}

/* ────── Make hamburger always visible on the far-right ────── */
.orion-header .nav-inner { position: relative; }

.orion-header .nav-toggle {
	top: 50%;
	right: 1.5rem;            /* matches container side-padding */
	display: block;           /* make sure the <button> isn't collapsed */
	z-index: 1010;            /* above logo but below slide-menu */
	padding: 0 0 !important;
}

.orion-header .nav-toggle img { display: block; } /* Safeguard */

/* ────────── HERO PARALLAX ────────── */
.hero-parallax {
    position: relative;
    width: 100% !important;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Parallax container with extra space for movement */
.parallax-container {
    position: absolute;
    top: -150px; /* Extra space above for parallax movement */
    left: 0;
    width: 100%;
    height: calc(100% + 500px); /* Extra 300px total for movement range */
    z-index: 1;
}

.parallax-image {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateY(0);
    will-change: transform;
}

.parallax-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    /* Ensure image fills the extra space */
    min-height: calc(100vh + 500px);
}

/* Content overlay */
.parallax-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--max);
    padding: 0 1.5rem;
    text-align: center;
}

.content-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.hero-parallax h2 {
    color: #fff;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-parallax h2 {
        font-size: 48px; /* Smaller on mobile */
    }
    
    /* Disable parallax on mobile for performance */
    .parallax-container {
        top: 0;
        height: 100%;
    }
    
    .parallax-img {
        min-height: 100vh;
    }
}

/* Optional dark overlay for better text readability */
.hero-parallax::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0.1) 100%
    );
    z-index: 1;
}

/* ────────── PORTFOLIO PREVIEW SECTION ────────── */
.portfolio-preview {
    background-color: white;
    padding: 0 0 0 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.portfolio-preview .section-heading {
    color: #104AEC;
    text-align: center;
    margin: 2rem 0;
    font-weight: 700;
}

/* Portfolio Grid - 4 cards per row */
.portfolio-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    row-gap: 3rem;
    /* max-width: calc(4 * 280px + 3 * 2rem); */
    margin: 0 auto;
}

@media (max-width: 768px) {
    .portfolio-grid {
        max-width: 100% !important; /* Allow full width on small screens */
        gap: 1.5rem;
    }

    .portfolio-card {
        width: 100% !important;
    }
}


/* Portfolio Card - Fixed dimensions */
.portfolio-card {
    width: 515px; /* Reduced from 360px */
    height: 400px; /* Reduced height */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card-inner {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 
        0 4px 20px rgba(255, 255, 255, 0.15),
        0 8px 32px rgba(255, 255, 255, 0.1),
        0 -1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

/* Hover animation */
@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.portfolio-card:hover {
    animation: gentleFloat 2s ease-in-out infinite;
}

.portfolio-card:hover .card-inner {
    box-shadow: 
        0 6px 30px rgba(255, 255, 255, 0.25),
        0 12px 48px rgba(255, 255, 255, 0.15),
        0 -1px 4px rgba(0, 0, 0, 0.08);
}

/* Card Image - Takes most of the card */
.card-image {
    position: relative;
    width: 100%;
    height: calc(100% - 60px); /* Leave 60px for content */
    overflow: hidden;
    flex-shrink: 0;
}

.portfolio-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.6s ease;
}

.portfolio-card:hover .portfolio-img {
    transform: scale(1.08);
}

/* Card Content - Takes remaining space */
.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 1rem 1.5rem;
    height: 60px; /* Thin band */
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: height 0.3s ease, padding 0.3s ease;
    overflow: hidden;
}

/* ────────── PORTFOLIO PREVIEW SECTION ────────── */
.portfolio-preview {
    background-color: white;
    padding: 0 0 0 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.portfolio-preview .section-heading {
    color: #104AEC;
    text-align: center;
    margin: 2rem 0;
    font-weight: 700;
}

/* Portfolio Grid - 4 cards per row */
.portfolio-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    row-gap: 3rem;
    /* max-width: calc(4 * 280px + 3 * 2rem); */
    margin: 0 auto;
}

/* Portfolio Card - Smaller for 4 per row */
.portfolio-card {
    width: 515px; /* Reduced from 360px */
    height: 400px; /* Reduced height */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-inner {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 
        0 4px 20px rgba(255, 255, 255, 0.15),
        0 8px 32px rgba(255, 255, 255, 0.1),
        0 -1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

/* Hover animation */
@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.portfolio-card:hover {
    animation: gentleFloat 2s ease-in-out infinite;
}

.portfolio-card:hover .card-inner {
    box-shadow: 
        0 6px 30px rgba(255, 255, 255, 0.25),
        0 12px 48px rgba(255, 255, 255, 0.15),
        0 -1px 4px rgba(0, 0, 0, 0.08);
}

/* Card Image - Takes most of the card */
.card-image {
    position: relative;
    width: 100%;
    height: calc(100% - 60px); /* Leave 60px for content */
    overflow: hidden;
    flex-shrink: 0;
}

.portfolio-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.6s ease;
}

.portfolio-card:hover .portfolio-img {
    transform: scale(1.08);
}

/* Card Content - Minimal by default, expands on hover */
.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 1rem 1.5rem;
    height: 60px; /* Thin band */
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: height 0.3s ease, padding 0.3s ease;
    overflow: hidden;
}

.portfolio-card:hover .card-content {
    height: 120px; /* Expand to show subtitle */
    padding: 1.5rem;
}
.project-title {
    font-size: 20px; /* Smaller for 4-card layout */
    font-weight: 700;
    color: var(--black);
    margin: 0;
    line-height: 1.2;
    min-height: auto;
}

.project-subtitle {
    font-size: 16px;
    font-weight: 400;
    color: #666;
    margin: 0.5rem 0 0 0;
    font-family: "Open Sans", sans-serif !important;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}

.portfolio-card:hover .project-subtitle {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .portfolio-grid {
        max-width: calc(3 * 280px + 2 * 2rem); /* 3 cards on medium screens */
    }
}

@media (max-width: 900px) {
    .portfolio-grid {
        max-width: calc(2 * 280px + 1 * 2rem); /* 2 cards on smaller screens */
    }
}

@media (max-width: 640px) {
    .portfolio-preview {
        padding: 3rem 0;
        min-height: auto;
    }
    
    .portfolio-preview .section-heading {
        margin-bottom: 3rem;
    }
    
    .portfolio-grid {
        gap: 1.5rem;
        row-gap: 2rem;
        max-width: 100%;
    }
    
    .portfolio-card {
        width: 100%;
        max-width: 400px;
        height: 300px;
    }
    
    .card-content {
        height: 80px; /* Slightly taller on mobile for touch */
    }
    
    /* Always show subtitle on mobile */
    .project-subtitle {
        opacity: 1;
        transform: translateY(0);
    }
    
    /* Disable hover animation on mobile */
    .portfolio-card:hover {
        animation: none;
        transform: none;
    }
    
    .portfolio-card:hover .card-content {
        height: 80px; /* No expansion on mobile */
    }
}

/* Ensure consistent section spacing */
.orion-section.portfolio-preview {
    margin: 0;
}

@media (min-width: 1025px) {
	.nav-outer {
		min-height: 7vh !important;
	}
	
	.hero-headline {
		width: 85vw !important;
		text-align: left !important;
	}
	
	.hero-headline h1 {
		text-align: left !important;
	}
}

/* ────────── Portfolio Preview β€” Rows Variant ────────── */
.portfolio-preview.portfolio-preview--rows {
  /* keeps your blue bg + spacing from existing .portfolio-preview */
}

.portfolio-preview.portfolio-preview--rows .section-heading {
  /* already white & bold via existing rules */
}

.portfolio-preview.portfolio-preview--rows .portfolio-rows {
  display: flex;
  flex-direction: column;
  gap: 2rem;                /* space between rows */
  margin: 0 auto;
  max-width: var(--max);
}

/* Single row β€œcard” */
.portfolio-preview.portfolio-preview--rows .portfolio-row .row-inner {
  display: flex;
  align-items: stretch;
  gap: 2rem;                /* space between image and text */
  background: #fff;         /* readable on blue section bg */
  border-radius: 12px;
  padding: 1.5rem;          /* margin β€œaround the image/text sides” */
  box-shadow:
    0 4px 20px rgba(255,255,255,0.15),
    0 8px 32px rgba(255,255,255,0.1),
    0 -1px 3px rgba(0,0,0,0.05);
}

/* Left side image */
.portfolio-preview.portfolio-preview--rows .row-image {
  flex: 1 1 50%;
  margin: .25rem;           /* subtle outer breathing room */
  overflow: hidden;
  border-radius: 10px;
}
.portfolio-preview.portfolio-preview--rows .portfolio-row-img {
  width: 100%;
  height: 100%;
  min-height: 260px;        /* reasonable row height */
  object-fit: cover;
  display: block;
  transform: translateZ(0);
  transition: transform .4s ease;
}
@media (hover:hover) {
  .portfolio-preview.portfolio-preview--rows .row-inner:hover .portfolio-row-img {
    transform: scale(1.03);
  }
}

/* Right side content */
.portfolio-preview.portfolio-preview--rows .row-content {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .75rem;
  margin: .25rem;           /* matches image side margin */
}
.portfolio-preview.portfolio-preview--rows .row-heading {
  margin: 0;
  font-weight: 700;
  color: var(--black);
  line-height: 1.2;
}
.portfolio-preview.portfolio-preview--rows .row-paragraph {
  margin: 0 0 .5rem 0;
  color: #666;
  font-family: "Open Sans", sans-serif !important;
}
.portfolio-preview.portfolio-preview--rows .load-more-btn {
  align-self: flex-start;    /* keep the button snug left */
}

/* Mobile: stack column */
@media (max-width: 768px) {
  .portfolio-preview.portfolio-preview--rows {
    padding: 3rem 0;         /* match your mobile spacing */
  }
  .portfolio-preview.portfolio-preview--rows .portfolio-row .row-inner {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  .portfolio-preview.portfolio-preview--rows .portfolio-row-img {
    min-height: 200px;
  }
  .portfolio-preview.portfolio-preview--rows .load-more-btn {
    width: 100%;             /* big touch target if you like */
  }
}

/* Optional: if the old grid markup ever appears alongside this, keep it hidden here */
.portfolio-preview.portfolio-preview--rows .portfolio-grid { display: none !important; }


/* ────────── 3. PORTFOLIO BROWSER (replaces old image-signup) ────────── */
.orion-section.portfolio-browser {
  position: relative;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.orion-section.portfolio-browser .pb-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.orion-section.portfolio-browser .pb-slide {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  opacity: 0;
  transform: translateX(6%) scale(0.985);
  transition:
    opacity 520ms ease,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  will-change: opacity, transform;
}
.orion-section.portfolio-browser .pb-slide.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

/* Directional states */
.orion-section.portfolio-browser .pb-slide.leaving-left   { transform: translateX(-6%) scale(0.985); opacity: 0; }
.orion-section.portfolio-browser .pb-slide.leaving-right  { transform: translateX( 6%) scale(0.985); opacity: 0; }
.orion-section.portfolio-browser .pb-slide.is-prep.entering-right { transform: translateX( 6%) scale(0.985); opacity: 0.01; }
.orion-section.portfolio-browser .pb-slide.is-prep.entering-left  { transform: translateX(-6%) scale(0.985); opacity: 0.01; }

/* Background layer (uses CSS var set inline on the slide) */
.orion-section.portfolio-browser .pb-slide .pb-bg {
  position: absolute;
  inset: -2%;
  background-image: var(--pb-bg);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.02);
  transition: transform 1800ms ease, opacity 520ms ease;
  z-index: 0;
}
.orion-section.portfolio-browser .pb-slide.is-active .pb-bg {
  transform: scale(1) translateZ(0);
}

/* Radial dark overlay for legibility */
.orion-section.portfolio-browser .pb-slide::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.45), rgba(0,0,0,.25) 55%, rgba(0,0,0,.2));
  z-index: 0;
}

/* Content card */
.orion-section.portfolio-browser .pb-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  background: transparent;           /* Removed background */
  backdrop-filter: none;            /* Removed backdrop filter */
  padding: 2.25rem 2.5rem;
  border-radius: 0;                 /* Removed border radius */
  box-shadow: none;                 /* Removed box shadow */
}
.orion-section.portfolio-browser .pb-title    { color: var(--blue) !important; margin: 0 0 .5rem 0; }
.orion-section.portfolio-browser .pb-category { color: #343647; margin: 0 0 1rem 0; font-weight: 700; }
.orion-section.portfolio-browser .pb-excerpt  { color: var(--black); margin: 0 0 1.5rem 0; }
.orion-section.portfolio-browser .pb-cta      { margin: 0; }

/* Controls */
.orion-section.portfolio-browser .pb-control {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #104AEC;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  cursor: pointer;
  z-index: 3;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.orion-section.portfolio-browser .pb-control:hover,
.orion-section.portfolio-browser .pb-control:focus {

  box-shadow: 0 6px 28px rgba(0,0,0,.25);
}
.orion-section.portfolio-browser .pb-prev { left: 2rem; }
.orion-section.portfolio-browser .pb-next { right: 2rem; }

/* Chevron glyphs without images */
.orion-section.portfolio-browser .pb-prev::before,
.orion-section.portfolio-browser .pb-next::before {
  content:'';
  position:absolute; inset:0;
  margin:auto;
  width: 18px; height: 18px;
  transition: background-color .2s ease;

}

.orion-section.portfolio-browser .pb-prev::before,
.orion-section.portfolio-browser .pb-next::before,
.orion-section.portfolio-browser .pb-control,
{
	font-family: Arial, Helvetica, sans-serif !important;
}

.orion-section.portfolio-browser .pb-control:hover::before,
.orion-section.portfolio-browser .pb-control:focus::before { background:#fff; }

/* Kill any old image-signup leftovers if both appear */
.orion-section.portfolio-browser .signup-wrapper,
.orion-section.portfolio-browser .signup-copy,
.orion-section.portfolio-browser .signup-form,
.orion-section.portfolio-browser .signup-blank { display: none !important; }

/* Responsive */
@media (max-width: 1024px) {
  .orion-section.portfolio-browser .pb-content { max-width: 90vw; padding: 2rem; }
  .orion-section.portfolio-browser .pb-prev { left: 1rem; }
  .orion-section.portfolio-browser .pb-next { right: 1rem; }
}
@media (max-width: 640px) {
  .orion-section.portfolio-browser { height: 90vh; }
  .orion-section.portfolio-browser .pb-control { width: 48px; height: 48px; }
  .orion-section.portfolio-browser .pb-title { font-size: 2rem; }
}

.header-section .header-inner {
  width: 85vw !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;              /* prevent unintended wrap */
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1.25rem !important;
  position: relative !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
}

.header-section .header-title {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 1 65% !important;                   /* allow shrinking */
  min-width: 0 !important;                    /* prevents overflow pushing */
  text-align: left !important;
}

.header-section .header-cta-wrap {
  flex: 0 1 auto !important;                  /* shrink to fit content */
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  white-space: nowrap !important;             /* keep button on one line */
}

.header-section .header-cta-wrap .rcs-btn-base {
  display: inline-flex !important;            /* avoid block-level full width */
  margin-left: 0 !important;
}

/* Responsive stacking on mobile */
@media (max-width: 768px) {
  .header-section .header-inner {
    flex-wrap: wrap !important;               /* allow stacking on mobile */
  }
  .header-section .header-title,
  .header-section .header-cta-wrap {
    flex: 1 1 100% !important;
    justify-content: flex-start !important;
  }
  .header-section .header-cta-wrap .rcs-btn-base {
    margin-top: 1rem !important;
  }
}


.rcs-social-media-section {
    width: 100%;
    margin: 0;
    padding: 0;
}

.rcs-social-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0;
    padding: 0;
}

.rcs-social-image,
.rcs-social-cta {
    width: 25vw;
    height: 25vw;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.rcs-social-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
}

.rcs-social-cta {
    background-color: #104AEC;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

.rcs-social-heading {
    font-size: 38px !important;
    font-weight: 500 !important;
    font-family: 'BrownPro', sans-serif !important;
    color: white;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    line-height: 1.2;
}

/* Mobile responsive - stack in column */
@media (max-width: 768px) {
    .rcs-social-container {
        flex-direction: column;
    }
    
    .rcs-social-image,
    .rcs-social-cta {
        width: 100%;
        height: 100%;
    }
    
    .rcs-social-heading {
        font-size: 28px !important;
    }
}

/* Tablet breakpoint adjustment */
@media (max-width: 1024px) and (min-width: 769px) {
    .rcs-social-heading {
        font-size: 32px !important;
    }
}

/* ────────── Simple Star Wars Portfolio Browser (Works with Original JS) ────────── */

/* Updated Portfolio Browser - Remove original content styling */
.orion-section.portfolio-browser .pb-content {
  position: relative;
  z-index: 3;
  max-width: 720px;
  background: transparent;
  backdrop-filter: none;
  padding: 2.25rem 0;
  border-radius: 0;
  box-shadow: none;
  
  /* Content sliding animation */
  transform: translateX(0);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Single overlay using clip-path for the expanding circle effect */
.orion-section.portfolio-browser .pb-slide::before {
  content: '';
  position: absolute; 
  inset: 0;
  background: rgba(26, 27, 36, 0.7);
  z-index: 1;
  
  /* Start with full coverage, expand circle to reveal on hover */
  clip-path: circle(100% at center);
  transition: clip-path 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: clip-path;
}

/* Hover States - Star Wars reveal effect */
.orion-section.portfolio-browser:hover .pb-slide::before {
  clip-path: circle(0% at center);
}

/* Content slides out to the left on hover */
.orion-section.portfolio-browser:hover .pb-content {
  transform: translateX(-110vw);
}

/* Exception: Button hover states override section hover using higher specificity */
.orion-section.portfolio-browser:hover .pb-control:hover {
  /* Button styling when hovered */
  opacity: 1 !important;
  background: #104AEC !important;
  box-shadow: 0 6px 28px rgba(0,0,0,.25) !important;
}

/* Critical: When button is hovered, keep overlay visible and content in place */
.orion-section.portfolio-browser .pb-control:hover ~ .pb-track .pb-slide::before {
  clip-path: circle(100% at center) !important;
}

.orion-section.portfolio-browser .pb-control:hover ~ .pb-track .pb-content {
  transform: translateX(0) !important;
}

/* Alternative approach using adjacent sibling selector */
.orion-section.portfolio-browser .pb-control:hover ~ .pb-track .pb-slide .pb-content,
.orion-section.portfolio-browser .pb-control:hover + * .pb-content {
  transform: translateX(0) !important;
}

/* Enhanced text styling for better contrast */
.orion-section.portfolio-browser .pb-title {
  color: var(--blue) !important; 
  margin: 0 0 .5rem 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  font-weight: 700;
}

.orion-section.portfolio-browser .pb-category {
  color: #ffffff;
  margin: 0 0 1rem 0; 
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.orion-section.portfolio-browser .pb-excerpt {
  color: #ffffff;
  margin: 0 0 1.5rem 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  line-height: 1.4;
}

/* Ensure proper z-index stacking */
.orion-section.portfolio-browser .pb-bg {
  z-index: 0;
}

/* Controls remain accessible during hover */
.orion-section.portfolio-browser .pb-control {
  z-index: 4;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, opacity 0.3s ease;
}

/* Slightly fade controls during hover for cinematic effect */
.orion-section.portfolio-browser:hover .pb-control {
  opacity: 0.7;
}

.orion-section.portfolio-browser .pb-control:hover,
.orion-section.portfolio-browser .pb-control:focus {
  opacity: 1 !important;
  background: #104AEC;
  box-shadow: 0 6px 28px rgba(0,0,0,.25);
}

/* Mobile adjustments - disable complex hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
  .orion-section.portfolio-browser:hover .pb-slide::before {
    clip-path: circle(100% at center);
  }
  
  .orion-section.portfolio-browser:hover .pb-content {
    transform: translateX(0);
  }
  
  .orion-section.portfolio-browser:hover .pb-control {
    opacity: 1;
  }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .orion-section.portfolio-browser .pb-content {
    max-width: 90vw;
    padding: 2rem;
  }
}

@media (max-width: 640px) {
  .orion-section.portfolio-browser .pb-content {
    padding: 1.5rem;
  }
  
  .orion-section.portfolio-browser .pb-title {
    font-size: 2rem;
  }
}

/* ────────── Pure CSS Button Exception Alternative ────────── */

/* Add this to your existing CSS - works without JavaScript modifications */

/* When button is hovered, override the section hover effects */
.orion-section.portfolio-browser .pb-control:hover {
  /* Ensure button itself stays visible and styled */
  opacity: 1 !important;
  background: #104AEC !important;
  box-shadow: 0 6px 28px rgba(0,0,0,.25) !important;
  z-index: 5 !important; /* Even higher z-index */
}

/* Critical: When ANY control is hovered, keep overlay and content in place */
/* Use the ~ combinator to target siblings after the hovered control */
.orion-section.portfolio-browser:hover .pb-control:hover ~ .pb-track .pb-slide::before,
.orion-section.portfolio-browser:has(.pb-control:hover) .pb-slide::before {
  clip-path: circle(100% at center) !important;
  transition: none !important; /* Instant override */
}

.orion-section.portfolio-browser:hover .pb-control:hover ~ .pb-track .pb-content,
.orion-section.portfolio-browser:has(.pb-control:hover) .pb-content {
  transform: translateX(0) !important;
  transition: none !important; /* Instant override */
}

/* Alternative approach using higher specificity */
.orion-section.portfolio-browser:hover .pb-prev:hover ~ .pb-track .pb-slide::before,
.orion-section.portfolio-browser:hover .pb-next:hover ~ .pb-track .pb-slide::before {
  clip-path: circle(100% at center) !important;
}

.orion-section.portfolio-browser:hover .pb-prev:hover ~ .pb-track .pb-content,
.orion-section.portfolio-browser:hover .pb-next:hover ~ .pb-track .pb-content {
  transform: translateX(0) !important;
}

/* Fallback using direct child combinator if structure is nested differently */
.orion-section.portfolio-browser .pb-control:hover + * .pb-slide::before,
.orion-section.portfolio-browser .pb-control:hover + * .pb-content {
  clip-path: circle(100% at center) !important;
  transform: translateX(0) !important;
}

/* Modern browsers: :has() selector for even better control */
@supports selector(:has(a)) {
  .orion-section.portfolio-browser:has(.pb-control:hover):hover .pb-slide::before {
    clip-path: circle(100% at center) !important;
  }
  
  .orion-section.portfolio-browser:has(.pb-control:hover):hover .pb-content {
    transform: translateX(0) !important;
  }
}

/* Replace your complex mask approach with: */
.orion-section.portfolio-browser .pb-prev::before,
.orion-section.portfolio-browser .pb-next::before {
  content: '';
  font-size: 20px;
  color: #104AEC;
  transition: color 0.2s ease;
  
  /* Enhanced rendering for soft edges */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* Remove all the mask properties */
}

.orion-section.portfolio-browser .pb-prev::before { content: '←' !important; }
.orion-section.portfolio-browser .pb-next::before { content: 'β†’' !important; }

.orion-section.portfolio-browser .pb-control:hover::before { color: #fff !important; }

/* Remove the transform rotations - not needed */

/* ────────── Fixed Portfolio Browser Navigation Buttons ────────── */

/* Remove the problematic original button styles */
.orion-section.portfolio-browser .pb-prev::before,
.orion-section.portfolio-browser .pb-next::before {
  /* Reset all previous styles */
  background: none !important;
  background-color: transparent !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  inset: auto !important;
  position: static !important;
  
  /* New arrow styling */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px !important;        /* Much larger arrows */
  font-weight: 900 !important;       /* Maximum weight for thicc arrows */
  color: #104AEC !important;
  line-height: 1 !important;         /* Fix line height issue */
  transition: color 0.2s ease !important;
  
  /* Enhanced rendering for crisp arrows */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* Center the arrow in the button */
  width: 100%;
  height: 100%;
}

/* Set the arrow characters */
.orion-section.portfolio-browser .pb-prev::before { 
  content: 'β€Ή' !important;  /* Using single left angle quotation mark - thicker than ← */
}

.orion-section.portfolio-browser .pb-next::before { 
  content: 'β€Ί' !important;  /* Using single right angle quotation mark - thicker than β†’ */
}

/* Alternative: Use heavier arrow characters if you prefer */
/* 
.orion-section.portfolio-browser .pb-prev::before { content: '⟨' !important; }
.orion-section.portfolio-browser .pb-next::before { content: '⟩' !important; }
*/

/* Hover state - only change color, no background */
.orion-section.portfolio-browser .pb-control:hover::before,
.orion-section.portfolio-browser .pb-control:focus::before { 
  color: #fff !important;
  background: none !important;       /* Explicitly prevent any background */
  background-color: transparent !important;
}

/* Ensure button itself has proper styling */
.orion-section.portfolio-browser .pb-control {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #104AEC;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  cursor: pointer;
  z-index: 4;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
  
  /* Ensure button is a flex container for centering */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Button hover styling */
.orion-section.portfolio-browser .pb-control:hover,
.orion-section.portfolio-browser .pb-control:focus {
  background: #104AEC !important;
  box-shadow: 0 6px 28px rgba(0,0,0,.25);
  transform: scale(1.05);
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .orion-section.portfolio-browser .pb-control { 
    width: 48px; 
    height: 48px; 
  }
  
  .orion-section.portfolio-browser .pb-prev::before,
  .orion-section.portfolio-browser .pb-next::before {
    font-size: 24px !important;      /* Slightly smaller on mobile */
  }
}

/* ────────── 2. HEADER SECTION (Updated with Custom Variant) ────────── */
.header-section { 
    padding: 6rem 0;
    position: relative;
    overflow: hidden; /* Contain the pseudo-element */
}

/* Background image with opacity using pseudo-element */
.header-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 400px; /* Height-based sizing to achieve contain-like behavior */
    background-position: 90% 10%; /* 10% from left, 10% from top */
    opacity: var(--logo-opacity, 0.3); /* Default opacity 0.3 */
    z-index: 0; /* Behind content */
    pointer-events: none; /* Ensure it doesn't interfere with clicks */
}

/* Apply background image from data attribute */
.header-section[data-logo-url]::before {
    background-image: var(--logo-url);
}

/* Existing preset variants */
.header-section.variant-blue { background-color: var(--blue); }
.header-section.variant-blue h2 { color: #fff; }
.header-section.variant-white { background-color: #fff; }
.header-section.variant-white h2 { color: var(--blue); }

/* NEW: Custom variant - inherits layout but no color overrides */
.header-section.variant-custom {
    /* Inherit all layout styles from .header-section base */
    /* Colors will be set via inline styles - don't override them */
}

/* Custom variant text inherits color from inline styles */
.header-section.variant-custom h2 {
    /* Don't set color - it comes from inline styles */
    /* All other h2 styles still apply */
}

.header-section.full-bleed .header-title {
    max-width: var(--max);
    margin: 0 auto;
    padding: 5rem 1.5rem;
    text-align: center;
    position: relative; /* Ensure text stays above background image */
    text-align:left !important;
    z-index: 1;
}

/* Header inner layout (existing styles) */
.header-section .header-inner {
  width: 85vw !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;              /* prevent unintended wrap */
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1.25rem !important;
  position: relative !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
}

.header-section .header-title {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 1 65% !important;                   /* allow shrinking */
  min-width: 0 !important;                    /* prevents overflow pushing */
  text-align: left !important;
}

.header-section .header-cta-wrap {
  flex: 0 1 auto !important;                  /* shrink to fit content */
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  white-space: nowrap !important;             /* keep button on one line */
}

.header-section .header-cta-wrap .rcs-btn-base {
  display: inline-flex !important;            /* avoid block-level full width */
  margin-left: 0 !important;
}

/* Responsive stacking on mobile */
@media (max-width: 768px) {
  .header-section .header-inner {
    flex-wrap: wrap !important;               /* allow stacking on mobile */
  }
  .header-section .header-title,
  .header-section .header-cta-wrap {
    flex: 1 1 100% !important;
    justify-content: flex-start !important;
  }
  .header-section .header-cta-wrap .rcs-btn-base {
    margin-top: 1rem !important;
  }
}


/* ==== Portfolio Browser: remove all background tints/overlays ==== */
.orion-section.portfolio-browser .pb-slide::before {
  content: none !important;         /* don’t render the pseudo-element */
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  clip-path: none !important;
}

/* Optional: if any filter was contributing to a β€œtint” feel, neutralize it */
.orion-section.portfolio-browser .pb-slide .pb-bg {
  filter: none !important;          /* remove saturate/contrast tweaks if undesired */
}

/* With headings/buttons gone, ensure content area takes no visual space */
.orion-section.portfolio-browser .pb-content {
  padding: 0 !important;
  max-width: 0 !important;
}

/* ────────── HEADER SECTION WITH FLEXIBLE WIDTH ────────── */
.header-section .header-inner {
  width: 85vw !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1.25rem !important;
  position: relative !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
}

/* Dynamic width based on data attribute */
.header-section[data-text-width="25"] .header-title {
  flex: 0 0 25% !important;
  max-width: 25% !important;
}

.header-section[data-text-width="33"] .header-title {
  flex: 0 0 33% !important;
  max-width: 33% !important;
}

.header-section[data-text-width="50"] .header-title {
  flex: 0 0 50% !important;
  max-width: 50% !important;
}

.header-section[data-text-width="65"] .header-title {
  flex: 0 0 65% !important;
  max-width: 65% !important;
}

.header-section[data-text-width="75"] .header-title {
  flex: 0 0 75% !important;
  max-width: 75% !important;
}

.header-section[data-text-width="100"] .header-title {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Base title styles */
.header-section .header-title {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  text-align: left !important;
}

/* CTA wrap when present */
.header-section .header-cta-wrap {
  flex: 0 1 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  white-space: nowrap !important;
}

.header-section .header-cta-wrap .rcs-btn-base {
  display: inline-flex !important;
  margin-left: 0 !important;
}

/* Responsive stacking on mobile */
@media (max-width: 768px) {
  .header-section .header-inner {
    flex-wrap: wrap !important;
  }
  
  /* Override all width settings on mobile */
  .header-section .header-title,
  .header-section[data-text-width="25"] .header-title,
  .header-section[data-text-width="33"] .header-title,
  .header-section[data-text-width="50"] .header-title,
  .header-section[data-text-width="65"] .header-title,
  .header-section[data-text-width="75"] .header-title,
  .header-section[data-text-width="100"] .header-title {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  .header-section .header-cta-wrap {
    flex: 1 1 100% !important;
    justify-content: flex-start !important;
  }
  
  .header-section .header-cta-wrap .rcs-btn-base {
    margin-top: 1rem !important;
  }
}

/* ────────── FLEXIBLE PORTFOLIO PREVIEW GRID ────────── */

/* Base grid container for flexible layouts */
.rcs-flex-grid {
    position: relative;
    width: 100%;
}

/* When exactly 5 items, use the original CSS Grid layout */
.rcs-flex-grid[data-item-count="5"] {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    grid-template-areas: none !important;
    margin: 0 auto;
    height: 80vh;
    min-height: 600px;
}

/* Original 5-item layout preservation */
.rcs-flex-grid[data-item-count="5"] .third1 {
    grid-column: 1 / 5 !important;
    grid-row: 1 / 2 !important;
}

.rcs-flex-grid[data-item-count="5"] .third2 {
    grid-column: 5 / 9 !important;
    grid-row: 1 / 2 !important;
}

.rcs-flex-grid[data-item-count="5"] .third3 {
    grid-column: 9 / 13 !important;
    grid-row: 1 / 2 !important;
}

.rcs-flex-grid[data-item-count="5"] .half1 {
    grid-column: 1 / 7 !important;
    grid-row: 2 / 3 !important;
}

.rcs-flex-grid[data-item-count="5"] .half2 {
    grid-column: 7 / 13 !important;
    grid-row: 2 / 3 !important;
}

/* Flexible grid items (for non-5 counts) */
.rcs-grid-item-flex {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Ensure images fill their containers */
.rcs-grid-item-flex img.rcs-featuredproject-img,
.rcs-flex-grid .rcs-featuredproject-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

/* Hover wrapper positioning for flexible items */
.rcs-grid-item-flex .rcs-featuredproject-item-hoverwrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.rcs-grid-item-flex:hover .rcs-featuredproject-item-hoverwrapper {
    opacity: 1;
}

.rcs-grid-item-flex .rcs-featuredproject-item-hoverinner {
    text-align: center;
    padding: 20px;
    color: white;
}

.rcs-grid-item-flex h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: white;
    font-weight: 700;
}

.rcs-grid-item-flex h5 {
    font-size: 1rem;
    margin: 0;
    color: white;
    font-weight: 400;
    text-transform: none;
}

/* Dynamic height adjustments based on item count */
.rcs-flex-grid[data-item-count="1"] {
    height: 60vh;
    min-height: 400px;
}

.rcs-flex-grid[data-item-count="2"] {
    height: 40vh;
    min-height: 350px;
}

.rcs-flex-grid[data-item-count="3"] {
    height: 35vh;
    min-height: 300px;
}

.rcs-flex-grid[data-item-count="4"] {
    height: 60vh;
    min-height: 500px;
}

.rcs-flex-grid[data-item-count="6"] {
    height: 60vh;
    min-height: 500px;
}

.rcs-flex-grid[data-item-count="7"],
.rcs-flex-grid[data-item-count="8"] {
    height: 65vh;
    min-height: 550px;
}

.rcs-flex-grid[data-item-count="9"] {
    height: 75vh;
    min-height: 600px;
}

.rcs-flex-grid[data-item-count="10"] {
    height: 80vh;
    min-height: 650px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .rcs-flex-grid {
        max-width: 100%;
    }
    
    .rcs-grid-item-flex {
        min-height: 250px;
    }
}

@media (max-width: 768px) {
    /* On mobile, all layouts become single column */
    .rcs-flex-grid:not([data-item-count="5"]) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas: none !important;
        gap: 1rem !important;
        height: auto !important;
    }
    
    .rcs-grid-item-flex {
        min-height: 300px;
        grid-area: unset !important;
    }
    
    /* Even the 5-item layout becomes single column on mobile */
    .rcs-flex-grid[data-item-count="5"] {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        gap: 1rem !important;
    }
    
    .rcs-flex-grid[data-item-count="5"] .rcs-featuredproject-item-anchor {
        grid-column: unset !important;
        grid-row: unset !important;
        height: 300px;
        position: relative;
    }
    
    .rcs-grid-item-flex h3 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .rcs-grid-item-flex {
        min-height: 250px;
    }
    
    .rcs-flex-grid {
        gap: 0.75rem !important;
    }
    
    .rcs-grid-item-flex h3 {
        font-size: 1.25rem;
    }
    
    .rcs-grid-item-flex h5 {
        font-size: 0.875rem;
    }
}

/* Hover effects and transitions */
.rcs-grid-item-flex {
    transform: translateZ(0);
    backface-visibility: hidden;
}

.rcs-grid-item-flex:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(16, 74, 236, 0.2);
}

/* Ensure proper stacking context */
.rcs-flex-grid {
    position: relative;
    z-index: 1;
}

/* Animation for grid items appearing */
@keyframes gridItemFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rcs-grid-item-flex {
    animation: gridItemFadeIn 0.5s ease forwards;
    animation-fill-mode: both;
}

/* Stagger animation delays */
.rcs-grid-item-flex:nth-child(1) { animation-delay: 0.05s; }
.rcs-grid-item-flex:nth-child(2) { animation-delay: 0.1s; }
.rcs-grid-item-flex:nth-child(3) { animation-delay: 0.15s; }
.rcs-grid-item-flex:nth-child(4) { animation-delay: 0.2s; }
.rcs-grid-item-flex:nth-child(5) { animation-delay: 0.25s; }
.rcs-grid-item-flex:nth-child(6) { animation-delay: 0.3s; }
.rcs-grid-item-flex:nth-child(7) { animation-delay: 0.35s; }
.rcs-grid-item-flex:nth-child(8) { animation-delay: 0.4s; }
.rcs-grid-item-flex:nth-child(9) { animation-delay: 0.45s; }
.rcs-grid-item-flex:nth-child(10) { animation-delay: 0.5s; }
     #rcs-nav-links a{ transition: border 0.5s; } #rcs-nav-links a:hover { border-bottom: 3px solid #104AEC !important; } .wpc-term-item-content-wrapper label, .wpc-term-item-content-wrapper label > span { border: none !important; border-radius: 0 !important; background-color: transparent !important; } .wpc-filter-label-wrapper a { color: #343647 !important;} .wpc-edit-filter-set, .wpc-filter-header, .wpc-term-count { display: none !important; } .wpc-filters-section, .wpc-filters-section:not(.wpc-filter-post_meta_num,.wpc-filter-layout-dropdown) .wpc-filter-content:not(.wpc-filter-has-hierarchy) ul.wpc-filters-ul-list, .wpc-label-item { max-height: unset !important; display: flex !important; align-items: center !important; } .wpc-filter-label-wrapper > a { min-width: 8rem; } body { margin: 0; -webkit-text-size-adjust: 100%; } html { scroll-behavior: smooth;  } .current-menu-item a { border-bottom: 3px solid #104AEC !important; } #sb_instagram.sbi_col_3 #sbi_images .sbi_item { width: 33.33% !important; height: 22vw !important; } #sb_instagram .sbi_photo_wrap { width: 100% !important; height: 100% !important; } #sb_instagram .sbi_photo { width: 100% !important; height: 100% !important; } #rcs-feature-project-outer-wrapper p a { color: #343647 !important; }      #rcs-footer-contact-text p { margin: 0 !important; } #rcs-footer-logo-wrapper { display: flex; justify-content: center; align-items: flex-start; margin: 0 1rem; } #rcs-footer-logo-wrapper img { height: 4rem; object-fit: scale-down; } #rcs-footer-primary { width: 100%; height: 12rem; display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center; background-color: #1A1B24; } #rcs-footer-primary > div { height: 60%; } #rcs-footer-copyright-container { width: 100%; height: 3em; display: flex; justify-content: center; align-items: center; background-color: black; } footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, footer p, footer a, footer span, footer small { color: white; } footer p, footer a, footer span { font-size: 14px; font-family: 'Open Sans', sans-serif; } footer small { font-size: 14px !important; color: dimgray; } #rcs-footer-contact-text { width: 26%; align-items: flex-start; margin: 0 2rem; } #rcs-footer-contact-text h3 { text-align: left; font-size: 30px;  } #rcs-footer-contact-text p { line-height: 24px; } #rcs-footer-address { display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; font-style: normal; margin: 0 1rem; } #rcs-footer-address p { line-height: 26px; } #rcs-footer-address a { text-decoration: none; font-style: normal; } #rcs-footer-social-icons { display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; margin: 0 1rem; } #rcs-footer-social-icons > a { margin: 0 0.5rem; } #rcs-footer-principle-page-links { display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; font-weight: 800; border-left: 1px solid #3a3c50; height: 100% !important; padding-left: 2rem; } #rcs-footer-principle-page-links a { text-decoration: none; font-size: 14px; margin: 0.25rem 0; font-family: 'Open Sans', sans-serif; } #rcs-footer-primary { justify-content: space-around !important; } #rcs-footer-contact-text h3 { margin: 0 !important; } #rcs-footer-principle-page-links { width: 14% !important; }  header {  position: absolute; top: 0; left: 0; width: 100%; } nav { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; } #rcs-nav-links { margin-right: 6vw; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } #rcs-nav-logo { margin-left: 6vw; } #rcs-nav-links a { margin: 0 1.5vw; font-size: 16px; color: white; } #rcs-nav-links li { list-style-type: none; display: inline; } body nav#rcs-mobile-nav-menu { justify-content: flex-start !important; z-index: 300; } #rcs-mobile-nav-links { margin-top: 4rem; } #rcs-nav-links { margin-right: 6vw; }  .rcs-btn-base { width: fit-content; height: fit-content; padding: 1.25rem 3rem;  border-radius: 40px; background-color: transparent; font-size: 15px;  font-family: 'BrownPro', sans-serif; font-weight: 700; letter-spacing: 0px;  text-align: center !important; text-decoration: none; } .rcs-btn-gray { color: #343647; border: 2px solid #343647; transition: color 0.5s, background-color 0.5s; } .rcs-btn-gray:visited { color: #343647; } .rcs-btn-gray:hover { color: white !important; background-color: #343647; } .rcs-btn-white { color: white; border: 2px solid white; transition: color 0.5s, background-color 0.5s; } .rcs-btn-white:hover { color: #104AEC !important; background-color: white; } .rcs-btn-white:visited { color: #104AEC; } .rcs-btn-black { color: #343647; border: 2px solid #343647; transition: color 0.5s, background-color 0.5s;  } .rcs-btn-black:hover { color: white !important; background-color: #343647; } .rcs-btn-black:visited { color: #343647; } .rcs-btn-blue { color: #104AEC; border: 2px solid #104AEC; transition: color 0.5s, background-color 0.5s; } .rcs-btn-blue:hover { background-color: #104AEC; color: white !important; } .rcs-link-button, .rcs-btn-base { font-weight: bold !important; } .rcs-link-button { font-size: 15px; padding: 1em 3em; border: solid black 2px; border-radius: 30px; background-color: white; transition-duration: 0.4s; } .rcs-link-button:hover { color: white !important; background-color: black; } .rcs-horizontal-btn-container > * { margin: 0 1rem 0 0; } .rcs-horizontal-btn-container { width: 100%; display: flex; flex-flow: row wrap; }  .rcs-text-column-container { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; } .rcs-text-column-container h3, .rcs-text-column-container h4, .rcs-text-column-container p, .rcs-text-column-container a { text-align: left; } .rcs-center-flex { justify-content: space-around; } .rcs-left-flex { justify-content: flex-start; } .rcs-input { padding: 0.5rem 0.5rem !important; line-height:30px; font-size: 18px !important; } .rcs-text-column-container > * { margin: 1.5rem 0; }  main p, main a, main small { font-family: 'Open Sans', sans-serif !important; } main h1, main h2, main h3, main h5, main h6 { font-family: 'BrownPro', sans-serif !important; }  @media screen and (max-width: 1025px) { #rcs-service-options-section {margin: 2em 0 !important; } .wpc-filters-labels { display: flex; flex-flow: column nowrap; } .single #rcs-orion-section { margin-top: 2rem !important; } #rcs-project-post-body-section > p { margin: 2rem 0; } #rcs-project-post-body-section img.rcs-icon { width: 33% !important; } .rcs-related-project-item > div { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; } #rcs-services-info-section h2 { width: 83% !important; flex: 0 1 83% !important; } .rcs-related-project-item h4 { text-align: center; min-height: 4rem; } .rcs-icon-item-text h3 { font-size: 24px !important; } .rcs-icon-item-text h4 { font-size: 19px !important; } .rcs-prefooter-item-quarter:nth-child(3) { height: 21rem; } #rcs-breadcrumbs { display: none;  } } #rcs-breadcrumbs { width: 71%;  height: 4rem; box-shadow: 10px 10px 50px #ccc; background-color: white; margin: 0 auto; position: relative; top: -2rem; z-index: 200; } #rcs-breadcrumbs-inner { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; width: 100%; height: 100%; } #rcs-breadcrumb-img { display: flex; justify-content: center; align-items: center; height: 100%; border-right: 1px solid #d3d3d3; } #rcs-breadcrumb-img img { margin: 0 1.5rem; } #rcs-breadcrumb-items-wrapper { margin: 0 2rem; font-family: 'BrownPro', 'Open Sans', sans-serif; } #rcs-breadcrumb-items-wrapper > span > span > * { margin: 0 1rem; font-family: 'Open Sans', sans-serif; }      #rcs-hero-section { background-size: cover; height: 85vh; display: flex; justify-content: center; align-items: center; flex-flow: column nowrap; } #rcs-hero-inner-container { width: 60%; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; } #rcs-hero-section h1 { font-size: 63px; color: white; flex: 0 1 fit-content; text-align: center; margin: 0 0 2rem 0;  } #rcs-hero-section .rcs-btn-base { letter-spacing: 5px; } #rcs-hero-section p { text-align: center; color: white; font-size: 24px; width: 85%; margin: 0 0 4rem 0; font-weight: 100 !important; line-height: 31px !important; }  #services { display: flex; flex-flow: row wrap; justify-content: center; } #services p { width: 80%; margin-right: 4vw; } #services > div { display: flex; align-items: center; margin: 3rem 0; } #services > div:nth-child(1) { flex: 0 1 60%; justify-content: flex-end; } #services > div:nth-child(2) { flex: 0 1 20%; justify-content: flex-start; }  #rcs-careers-section { display: flex; flex-flow: row wrap; justify-content: center; padding: 2vw 14vw; } #rcs-careers-section > div:nth-child(1) { flex: 1 1 40%; } #rcs-careers-section > div:nth-child(2) { flex: 1 1 55%; margin-left: 5%; } #rcs-careers-section h2 { color: #343647; font-size: 50px; font-weight: 100; width: 100%; } #rcs-careers-section p { font-size: 18px; line-height: 28px; } #rcs-careers-section img { width: 100%; } #rcs-careers-section a { margin: 0.5rem 1rem 0 0 !important; }#rcs-featuredprojects-section { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; } #rcs-featuredprojects-section .rcs-horizontal-btn-container { margin: 6rem 0; } #rcs-featuredprojects-section h2 { font-size: 50px; } #rcs-featuredprojects-items { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; gap: 0.5% 0.5%; width:100%; grid-template-areas: "third1 half1" "third1 half1" "third2 half1" "third2 half2" "third3 half2" "third3 half2"; } .half1 { grid-area: half1; } .half2 { grid-area: half2; } .third1 { grid-area: third1; } .third2 { grid-area: third2; } .third3 { grid-area: third3; } #rcs-featuredprojects-items > a { display: block; } .rcs-featuredproject-item-thirds, .rcs-featuredproject-item-halves, .rcs-featuredproject-item-thirds > div, .rcs-featuredproject-item-halves > div, .rcs-featuredproject-item-halves > div img, .rcs-featuredproject-item-thirds > div img { height: 100% !important; width: 100% !important; } .rcs-featuredproject-item-halves > div img, .rcs-featuredproject-item-thirds > div img { object-fit: cover; } #rcs-featuredprojects-section h2 { text-align: center; } #rcs-featuredprojects { display: flex; flex-flow: column wrap; height: 20vw; } .rcs-featuredproject-item-thirds { height: 33.33%; } .rcs-featuredproject-item-halves { height: 50%; } .rcs-featuredproject-item-thirds, .rcs-featuredproject-item-halves { position: relative; top: 0; left: 0; } .rcs-featuredproject-item-hoverwrapper { position: absolute; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; top: 0; left: 0; opacity: 0; transition: opacity 0.5s; z-index: 20; background-color:black; } .rcs-featuredproject-item-hoverwrapper h4, .rcs-featuredproject-item-hoverwrapper h3 { color: white; } .rcs-featuredproject-item-hoverwrapper h3 { font-size: 31px; font-weight: 500; } .rcs-featuredproject-item-hoverwrapper h4 { font-weight: 100; font-size:19px; } .rcs-featuredproject-item-hoverwrapper:hover { opacity: 0.8; } .rcs-featuredproject-item-hoverinner { margin: 3%; padding: 6%; text-align: center; border: 2px solid white; } .rcs-featuredproject-item-hoverinner h5 { font-size: 18px; color: white; } .rcs-featuredproject-img { z-index: 10; } .rcs-featuredproject-item-hoverinner h4 { font-family: 'Open Sans', sans-serif; }  #rcs-news-section { padding-top: 2rem; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; background-color: #F0F0F0; } #rcs-news-section > * { flex: 1 1 100%; } .rcs-news-item { flex: 0 1 30%; display: flex; justify-content: center; align-items: center; } .rcs-news-item:nth-child(2) { margin-bottom: 4rem; } .rcs-news-item:nth-child(odd) > a { order: 2; } .rcs-news-item .rcs-text-column-container > a { color: #343647 !important; font-weight: 900 !important; font-size: 18px !important; } .rcs-news-item .rcs-text-column-container > div { display: flex; flex-flow: column nowrap; } .rcs-news-item h3 { margin: 0; } .rcs-news-item h6 { font-size: 14px; margin: 0; color: #AFAFAF; } .rcs-news-item p { font-size: 16px; line-height: 24px; } .rcs-news-item > div a { font-size: 15px; text-decoration: none; font-weight: 600; } .rcs-news-item > a { flex: 0 1 44%; max-width: 44%; height: 30rem; object-fit: cover; object-position: center top; } .rcs-news-item img { width: 100%; height: 30rem; object-fit: cover; object-position: center top; } .rcs-news-item > div { flex: 0 1 30%; max-width: 30%; max-height: 80%; } .rcs-news-item:nth-child(odd) > div { margin-right: 4rem; } .rcs-news-item:nth-child(even) > div { margin-left: 4rem; } .rcs-news-item > .rcs-text-column-container { text-align: left; } .rcs-news-item > .rcs-text-column-container > * { width: 100%; } #rcs-news-section h2 { margin: 2rem 0; color: #343647; font-size: 50px; text-align: center; font-weight: 900; } #rcs-news-section h3 { font-size: 38px; margin-bottom: 2rem; } #rcs-news-section .rcs-btn-base { margin: 6rem 0; }  .rcs-client-testimonial p { color: #104AEC; font-size: 22px; line-height: 30px; } .rcs-client-testimonial h5 { color: #343647; font-weight: 800; font-size: 22px; margin: 0; } .rcs-client-testimonial h6 { color: dimgray; font-size: 13px; font-weight: 500; margin: 0.75rem 0 0 0; } #rcs-testimonial-section { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; margin: 2rem 0;  } #rcs-testimonial-section article { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: 62%; text-align: center; padding: 2rem 0; }  #rcs-prefooter-section { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; height: 22vw; } .rcs-prefooter-item-quarter { width: 25%; max-width: 25%; height: 100%; } .rcs-prefooter-item-quarter img { width: 100%; height: 100%; object-fit: cover; } #rcs-prefooter-cta-item { background-color: #104AEC; color: white; text-align: left; height: 100%; display: flex; justify-content: center; align-items: center; } #rcs-prefooter-cta-item-inner { display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; } #rcs-prefooter-cta-item h3 { font-size: 2.5vw; font-weight: 100; }     #rcs-team-intro-section { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; width: 100%; margin: 4rem 0; } #rcs-team-intro-section p { text-align: left; color: #343647; font-size: 32px; font-weight: 500; line-height: 50px; width: 65%; }  #rcs-team-section h2 { text-align: center; font-size: 50px; color: #343647; font-weight: 600; width: 100%; margin: 1rem 0 3rem 0; } #rcs-team-section { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; } #rcs-team-section-item-container { width: 80%; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; } .rcs-team-item { position: relative; top: 0; left: 0;  width: 30%;  z-index: 10; min-height: 36rem;} .rcs-team-item-img-container { width: 100%; height: 100%; min-height: 36rem; } .rcs-team-item-img-container img { width: 100%; min-height: 36rem; height: 100%; object-fit: cover; } .rcs-team-item-hover-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 20; opacity: 0; transition: opacity 0.25s; } .rcs-team-item-hover-container:hover { opacity: 1; } .rcs-team-item-hover-gray { background-color: #343647; height: 80%; } .rcs-team-item-hover-gray p { color: white; font-size: 12px; line-height: 18px; text-align: left; padding: 1.5rem; } .rcs-team-item-hover-blue { background-color: #104AEC; color: white; height: 20%; width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; } .rcs-team-item-titlename { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; padding: 0 0 0 1rem; } .rcs-team-item-titlename h3 { font-size: 18px; text-align: left; width: 100%; margin: 0 !important } .rcs-team-item-titlename h6 { font-size: 10px; text-align: left; width: 100%; margin: 0 !important; } .rcs-team-item-contactlinks { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 0 1rem 0 0; } .rcs-team-item-contactlinks a { color: white; font-size: 15px; width: 100%; padding: 0 1rem 0 0; }  #rcs-join-section { display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center; width: 100%; min-height: 20vw; background-color:#104AEC; } #rcs-join-inner { width: 80%; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; } #rcs-join-section h2 { font-size: 50px; font-weight: 100; color: white; text-align: left; width: 100%; margin: 0 0 3rem 0; } #rcs-join-section p { font-size: 16px; line-height: 26px; color: white; text-align: left; width: 100%; } #rcs-join-section .rcs-btn-base { margin-left: 30%; } #rcs-join-section > #rcs-join-inner > div:nth-child(1) { flex: 0 1 60%; } #rcs-join-section > #rcs-join-inner > div:nth-child(2) { flex: 0 1 40%; }     #rcs-projects-intro-section { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; width: 100%; margin: 0; } #rcs-projects-intro-section p { text-align: left; color: #343647; font-size: 32px; font-weight: 500; line-height: 45px; width: 63%; margin: 50px 0; }  #rcs-feature-project-section { display: flex; justify-content: center; align-items: center; background-color: #F0F0F0; padding: 4rem 0; width: 100%; } #rcs-category-featured-project { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; max-width: 60rem; } #rcs-category-featured-project img {  height: 30rem; object-fit: cover; width: 50%; } #rcs-category-featured-project-textcontainer { flex: 0 1 40%; padding: 0 3rem; height: 30rem; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; background-color: white; }  #rcs-feature-project-outer-wrapper { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; max-width: 80vw; } #rcs-feature-project-section img { width: 50%; height: 40rem; object-fit: cover; } #rcs-feature-project-inner-wrapper { flex: 0 1 40%; padding: 0 3rem; background-color: white; height: 40rem; display: flex; flex-flow: column nowrap; align-items: flex-start; justify-content: center; } #rcs-feature-project-inner-wrapper h3 { font-size: 18px; margin: 0; color: #6E98F4; } #rcs-feature-project-inner-wrapper h2 { font-size: 50px; font-weight: 100; color: #343647; margin: 0.5rem 0 1rem 0; } #rcs-feature-project-inner-wrapper p { margin-bottom: 2rem; font-size: 18px !important; color: #343647;  } #rcs-category-featured-project-textcontainer h4 { color: #6E98F4; font-size: 16px; margin: 0; } #rcs-category-featured-project-textcontainer h2 { font-weight: 100; font-size: 48px; margin: 0.5rem 0; } #rcs-category-featured-project-textcontainer p { line-height: 26px; font-size: 18px; } #rcs-category-featured-project-textcontainer a.btn-base { color: #343647; text-decoration: none; }  #rcs-projects-section { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; } #rcs-projects-section .rcs-btn-base { margin: 2rem 0 0 0; } #rcs-projects-categories-filter { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; width: 100%; margin: 2rem 0 1.25rem 0; } #rcs-projects-categories-filter a { background-color: white; font-family: 'Open Sans', sans-serif !important; color: #343647; border: none; font-size: 1em; margin: 1em 2em; padding: 0; text-align: center; } #rcs-projects-categories-filter a:nth-child(n+2) { font-weight: 400 !important; } .rcs-project-item-hover-container h5 { font-size: 18px; color: white; } #rcs-category-project-items-container { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; } #rcs-category-project-items-container a { margin: 1%; } .rcs-category-buttons { margin: 1% 3% !important; } .rcs-project-item { position: relative; top: 0; left: 0;  z-index: 10; } .rcs-project-item img { width: 41rem; height: 36rem; object-fit: cover; } .rcs-project-item-hover-container { width: 100%; height: 100%; top: 0; left: 0; z-index: 20; opacity: 0; transition: opacity 0.25s; display: flex; justify-content: center; align-items: center; background-color: black; position: absolute; } .rcs-project-item-hover-container:hover { opacity: 0.8; } .rcs-project-item-hover-container > div { width: 96%; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 1rem 4rem; margin: 1rem; border: 2px solid white; } .rcs-project-item-hover-container h3 { color: white; text-align: center; font-size: 30px; line-height: 30px; } .rcs-project-item-hover-container p { color: white; text-align: left; font-size: 18px; }     #rcs-category-section { display: flex; justify-content: center; align-items: center; margin: 3em 0; } #rcs-category-section div { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; width: 75%; } #rcs-category-section button { background-color: white; border: none; font-size: 1em; margin: 1em 2em 0 0; padding: 0; } #rcs-category-section button:active { font-weight: bold; }  #rcs-news-article-section { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; } .rcs-news-article { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: 80%; } .rcs-news-article > a img, .rcs-news-article > a { width: 100%; height: 20rem; object-fit: cover; } .rcs-news-outer-wrapper { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; position: relative; width: 100%; border-bottom: 1px solid lightgrey; margin-bottom: 3em; } .rcs-news-inner-wrapper-date { position: absolute; left: 0; top: 0; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; background-color: #343647; padding: 1em 1.5em; margin-top: 1.5em; } .rcs-news-inner-wrapper-date h3 { margin: 0 0 0.5em 0; color: lightgrey; font-size: 0.7rem; font-weight: 500; } .rcs-news-inner-wrapper-date h4 { margin: 0; color: white; font-size: 1.5em; } .rcs-news-inner-wrapper-info { display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start;  flex-basis: 60%; margin-top: 1.5em; } .rcs-news-inner-wrapper-info h3 { margin: 0; } .rcs-news-inner-wrapper-info h2 { margin: 0.2em 0; color: #343647; font-size: 36px !important; } .rcs-news-inner-wrapper-info p { line-height: 2em; margin: 2em 0; color: #343647; font-size: 18px; } .rcs-news-inner-wrapper-info h3 { color: #343647 !important; } #rcs-breadcrumbs-inner a { color: black !important; font-weight: 400 !important; font-family: 'Open Sans', sans-serif; } #rcs-breadcrumb-items-wrapper > span > span > span > a { margin-right: 0.5rem; } #rcs-breadcrumb-items-wrapper > span > span > span > span { margin-left: 0.5rem; } .rcs-news-inner-wrapper-info a { font-weight: 900 !important; font-size: 18px; margin-bottom: 3em; color: #343647 !important; }  #rcs-load-more-section { display: flex; justify-content: center; align-items: center; margin-bottom: 4em; }     #rcs-careers-info-section { display: flex; flex-flow: column; justify-content: center; align-items: center; width: 70%; margin: auto; margin-top: 3rem; margin-bottom: 3rem; } #rcs-careers-info-section h2 { font-size: 50px; font-weight: 100;  color: var(--text-black); margin-bottom: 20px; } #rcs-careers-info-section p { font-size: 32px; color: var(--text-black); line-height: 45px; }  #rcs-career-options-section { display: flex; flex-flow: column wrap; justify-content: center; align-items: flex-start; width: 70%; margin: auto; border-top: 1px solid black; border-bottom: 1px solid black; margin-bottom: 15rem; padding-bottom: 4rem; } .rcs-careers-outer-wrapper { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; width: 100%; margin-top: 3rem; } .rcs-careers-inner-wrapper { display: flex; flex-flow: column wrap; justify-content: center; align-items: flex-start; } .rcs-careers-inner-wrapper h3 { font-size: 32px; font-weight: bold; color: var(--text-black); } .rcs-careers-inner-wrapper p { font-size: 18px; margin-top: 0; line-height: 40px; } #rcs-career-options-section a { margin-top: 2rem; }     #rcs-orion-section h2 { font-size: 120px !important; margin: auto; margin-bottom: 1.5rem !important; margin-top: 2rem !important;  text-align: center;   font-weight: lighter; } #rcs-orion-section h3 { font-size: 60px; margin: auto; margin-bottom: 5rem; text-align: center; letter-spacing: 8px; color: var(--text-black); font-weight: lighter; }  #rcs-charity-info-section { display: flex; flex-flow: column; justify-content: center; align-items: center; margin: auto; width: 70%; } #rcs-charity-info-section h4 { font-size: 50px; font-weight: 100; color: var(--text-black); margin-bottom: 3rem; text-align: center; } #rcs-charity-info-section p { font-size: 32px; color: var(--text-black); } #rcs-charity-info-section > *:nth-child(5) { font-weight: bold; margin-bottom: 8rem; }     #rcs-services-info-section { display: flex; flex-flow: column; justify-content: center; align-items: center; margin: 0; } #rcs-services-info-section h2 { flex: 0 1 61%; font-weight: 100; color: #343647; width: 67%; max-width: unset !important; } #rcs-services-info-section p { color: #343647; flex: 0 1 63%; font-size: 28px;  width: 67% !important; }  #rcs-service-options-section { display: flex; justify-content: center; align-items: center; margin: 6em 0; } #rcs-service-options-outer-wrapper { display: flex; flex-flow: column wrap; justify-content: center; align-items: flex-start; width: 76% !important;  } .rcs-service-options-inner-wrapper { display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; min-height: 12rem; margin-bottom: 2em; } .rcs-service-options-inner-wrapper h2 { flex: 0 1 30%; font-size: 40px; font-weight: bold; margin: 0 0.5em 0em 0.5em; color: #343647; } .rcs-service-options-inner-wrapper p { flex: 0 1 45%; margin-top: 0; font-size: 18px;  }  #rcs-contact-us-section { display: flex; justify-content: center; align-items: center; margin-bottom: 3em; } #rcs-contact-us-outer-wrapper { display: flex; flex-flow: column nowrap; justify-content: center; width: 81%; border-top: 1px solid black; padding-top: 2em; margin: 0 1em; } #rcs-contact-us-inner-wrapper { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; } #rcs-contact-us-inner-wrapper h2 { font-size: 50px; color: #104AEC; } #rcs-contact-us-inner-wrapper a { color: #104AEC; border: solid #104AEC 2px; margin: 0 0 1em 2em; } #rcs-contact-us-inner-wrapper a:hover { color: white !important; background-color: #104AEC; } #rcs-contact-us-section p {  font-size: 18px; width: 80%; }  #rcs-client-section { display: flex; justify-content: center; align-items: center; } #rcs-client-section article { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: 60%; } #rcs-client-section p { font-size: 22px; text-align: center;  margin: 3em 0 1em 0; color: #104AEC; font-family: 'BrownPro', sans-serif; } #rcs-client-section h3 { margin: 0; } #rcs-client-section h4 { font-size: 13px; margin: 1em 0 3em 0; color: #9294AE; font-weight: 500; font-family: 'Open Sans', sans-serif; }   @media only screen and (min-width: 1026px) { #rcs-mobile-nav-menu { display: none; } #rcs-hero-inner-container { margin-top: 2.5rem; } }  @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) { .home #rcs-hero-section h1 { font-size: 57px !important; } .page-template main #rcs-contact-options-outer-wrapper { width: 86% !important; flex-flow: row nowrap !important; } .rcs-contact-options-inner-wrapper { flex-flow: column nowrap !important; height: unset !important; margin-bottom: 0 !important; } .rcs-contact-options-inner-wrapper div p { min-height: 6rem !important; } .page-template main #rcs-info-section { margin: 2rem 1rem !important; } }  @media screen and (max-width: 480px) { html body #rcs-hero-section h1:not(html body.home #rcs-hero-section h1) { font-size: 50px !important; } html body.home #rcs-hero-section h1 { font-size: 30px !important; } #rcs-team-section-item-container { width: 93% !important; } .rcs-team-item { margin: 0 0 0 0 !important; }  #rcs-featuredprojects-items { display: flex; flex-flow: column nowrap; } .rcs-news-item > a > img { height: 15rem;  margin: 1rem auto; } #rcs-featuredprojects-items a { margin: 0.25rem 0; } .rcs-featuredproject-item-hoverinner { margin: 3%; padding: 3%; } #rcs-featuredprojects-section { margin-top: 1rem !important; } #rcs-careers-section p { margin-bottom: 3rem; }  #rcs-careers-info-section h2 { font-size: 13vw; } #rcs-careers-info-section p { font-size: 5vw; } #rcs-career-options-section { margin-bottom: 5rem; }  #rcs-orion-section h2 { font-size: 15vw;  } #rcs-orion-section h3 { margin-bottom: 1em; } #rcs-charity-info-section h4 { font-size: 8vw; margin-bottom: 1em; } #rcs-charity-info-section p { font-size: 5vw; }  div#rcs-contact-us-inner-wrapper { flex-flow: column nowrap; justify-content: center; align-items: center; } div#rcs-contact-us-inner-wrapper a { margin: 1em 0 2em 0; } #rcs-contact-form-wrapper h2 { width: 88% !important; } }  @media screen and (max-width: 1025px) { .rcs-project-item img { height: 18rem !important; } .rcs-project-item-hover-container { position: static !important; background-color: transparent !important; } .rcs-project-item-hover-container p, .rcs-project-item-hover-container h3, .rcs-project-item-hover-container h5 { color: #343647 !important; } .rcs-horizontal-btn-container { width: fit-content !important; } .rcs-news-item > .rcs-text-column-container > * { width: 100%; margin: 1rem 0 !important; } #rcs-careers-section > div:nth-child(2) { flex: 1 1 55%;  margin-top: 4rem; } #rcs-projects-categories-filter a { margin: 3% 0 !important; min-width: 2rem; font-size: 24px !important; font-weight: 900 !important; } .rcs-project-item-hover-container p { width: 90% !important; } .page-template-default #rcs-orion-section { margin-bottom: 4rem !important; }  #rcs-hero-inner-container { width: 84%; padding-bottom: 2rem; } #rcs-hero-section p { font-size: 18px !important; margin: 0 0 2rem 0 !important; width: 97% !important; } #services { flex-flow: column nowrap; align-items: center; } #services p { margin: 0 0; width: 86%; font-size: 23px !important; } #services > div { justify-content: center !important; margin: 2rem 0; } #rcs-featuredprojects-section .rcs-horizontal-btn-container { margin: 0.5rem 0; } #rcs-featuredprojects-items { width: 92%; } #rcs-careers-section { align-items: center; padding: 2vw 0 !important; flex-flow: column nowrap !important; } #rcs-careers-section img { width: 100%; object-position: top; } #rcs-careers-section > div { width: 92%; flex: 1 1 92%; } #rcs-featuredprojects-section { margin-top: 0 !important; } .rcs-news-item { flex-flow: column nowrap; margin: 0 !important; } .rcs-news-item > a { flex: 0 1 92% !important; max-width: 92% !important; width: 92% !important; order: 1; } .rcs-news-item .rcs-text-column-container { order: 2; } .rcs-news-item > div { margin: 0 !important; } .rcs-news-item > div { flex: 0 1 92%; max-width: 92%; } #rcs-testimonial-section article { width: 92%;  } #rcs-prefooter-section { flex-flow: column nowrap; height: unset !important; } .rcs-prefooter-item-quarter { width: 100%; max-width: 100%; } #rcs-prefooter-cta-item h3 { font-size: 26px; } #rcs-prefooter-cta-item-inner { flex-flow: row nowrap; justify-content: space-around; align-items: center; width: 100%; } .rcs-prefooter-item-quarter:nth-child(3) { height: 21rem; }   .team #rcs-hero-section h1 { font-size: 50px; }  #rcs-team-intro-section p { width: 80%; } .rcs-team-item { width: 100%; } #rcs-team-section-item-container { flex-flow: column nowrap; margin: 2em 0; } .rcs-team-item-hover-container { position: fixed; left: 100%; } .rcs-team-item-hover-container { position: static !important; opacity: 1 !important; } .rcs-team-item-img-container { height: 30rem; } .rcs-team-item-hover-blue { height: 5rem; } #rcs-join-section { height: 35rem; } #rcs-join-inner { flex-flow: column nowrap; } #rcs-join-button-wrapper { margin: 3rem 0; } #rcs-join-section > #rcs-join-inner > div:nth-child(1) { flex: 0 1 80%; width: 100%; }    #rcs-projects-intro-section p { width: 90%; } #rcs-feature-project-section { display: flex; justify-content: center; align-items: center; background-color: #F0F0F0; padding: 4rem 0; } #rcs-feature-project-outer-wrapper { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; max-width: 70vw; } #rcs-feature-project-section img { width: 50%; height: 34vw; object-fit: cover; } #rcs-feature-project-inner-wrapper { flex: 0 1 40%; padding: 0 3rem; background-color: white; height: 34vw; display: flex; flex-flow: column nowrap; align-items: flex-start; justify-content: center; } #rcs-feature-project-inner-wrapper h3 { font-size: 12px; margin: 0; color: #104AEC; } #rcs-feature-project-inner-wrapper h2 { font-size: 2em; margin: 0.5rem 0 1rem 0; } #rcs-feature-project-inner-wrapper p { margin-bottom: 2rem;  } #rcs-feature-project-outer-wrapper { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; max-width: unset !important; } section#rcs-feature-project-section img { width: 100% !important; height: 100% !important; } div#rcs-feature-project-inner-wrapper { width: 100% !important; padding: 5%; height: unset !important; flex: 0 1 100% !important; } #rcs-feature-project-section { width: 92% !important; padding: 0 0 !important; margin: auto; } .rcs-project-item img { width: 100% !important; } .rcs-project-item-hover-container > div { padding: 0.5rem !important; width: 92% !important; height: 93%; border: none !important; } .rcs-project-item-hover-container p { margin: 0 !important; } .rcs-project-item-hover-container { opacity: 0.75 !important; } #rcs-projects-categories-filter { flex-flow: column nowrap; justify-content: center; align-items: center; width: 100%; margin-bottom: 4em; }     #rcs-category-section div { flex-flow: column nowrap; justify-content: center; align-items: center; } #rcs-category-section button { margin: 1em 0; } #rcs-category-section { display: none; } .rcs-news-outer-wrapper { flex-flow: column nowrap; justify-content: center; align-items: center; } .rcs-news-inner-wrapper-date { padding: 1em 0; position: relative; width: 100%; } .rcs-news-article { width: 92%; }    #rcs-careers-info-section { width: 90%; } #rcs-career-options-section { width: 90%; } .rcs-careers-outer-wrapper { flex-flow: column; align-items: center; width: 100%; margin: auto; margin-top: 3rem; } .rcs-careers-inner-wrapper { align-items: flex-start; margin: auto; width: 60%; } .rcs-careers-inner-wrapper h3 { text-align: left; } #rcs-career-options-section a {  margin-top: 2rem; }    #rcs-orion-section { width: 90%; margin: auto; } #rcs-orion-section h2 { font-size: 20vw;  margin-right: 0; } #rcs-orion-section h3 { font-size: 7vw; } #rcs-charity-info-section { width: 90%; }   #rcs-services-info-section p { font-size: 28px !important; width: 82% !important; } div#rcs-service-options-outer-wrapper { max-width: none; width: 100%; align-items: center; } div.rcs-service-options-inner-wrapper { flex-flow: column nowrap; justify-content: center; align-items: center; max-width: 30rem;  max-width: none; width: 95%; } div.rcs-service-options-inner-wrapper h2 {  font-size: 42px !important; margin: 1rem 0 !important; width: 100%; } #rcs-service-options-outer-wrapper, #rcs-info-section h2, #rcs-info-section p { flex: 0 1 92% !important; width: 92% !important; } section#rcs-contact-us-section p { width: 100%; } #rcs-contact-us-inner-wrapper h2 { font-size: 42px !important; } #rcs-client-section article { width: 92% !important; } #rcs-client-section p { width: 92% !important; } div.rcs-service-options-inner-wrapper h2 { width: fit-content !important; } .rcs-related-project-item { flex-flow: column nowrap !important; } .page-template main #rcs-hero-section { height: 80vh !important; } #rcs-project-post-body-section p { order: -1; width: 85% !important; } #rcs-project-post-body-section img { width: 100% !important; height: 100% !important; margin: 1rem 0 !important; } #rcs-project-post-gallery { display: flex !important; flex-flow: column nowrap !important; } #rcs-project-post-gallery > div img { height: 100% !important; width: 100% !important; margin: 0 !important; } #rcs-project-related-project-items-container { height: 100% !important; width: 100% !important; justify-content: center !important; margin: 2rem 0 2rem 0 !important; } .rcs-related-project-item > div { margin-left: 0 !important; } #rcs-project-post-gallery { gap: 0 !important; width: 100% !important; margin: 2rem 0 0 0 !important; } #rcs-project-related-section { margin: 0 !important; } #rcs-related-title { margin: 0 !important; } .rcs-related-project-item { margin: 1rem 0; } #rcs-contact-form-wrapper form { width: 86% !important; margin-top: 0 !important; } #rcs-contact-form-wrapper h2 { margin: 0 !important; } #rcs-contact-form-wrapper textarea { height: 34vw !important; } #rcs-contact-form-wrapper { width: 100% !important; }  #rcs-mobile-nav-btn { display: block !important; background-color: transparent; background-repeat: no-repeat; border: none; cursor: pointer; overflow: hidden; outline: none; background-image: none; border: 0 none; padding: 1px !important; margin: 0 0 0 8vw; } #rcs-nav-logo { margin-left: 2vw; } #rcs-hero-section h1 { margin: 4rem 0 0 0;  } #rcs-mobile-nav-menu { flex-flow: column nowrap; display: flex; position: fixed; top: 0; transition: left 1s; left: 100%; height:100vh; width: 100%; background-color:#104AEC; justify-content: center; align-items: center;  } #rcs-menu-inner { width: 100%;  } #rcs-menu-inner { display: flex; justify-content: space-around; } #rcs-mobile-nav-links { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: 50%; } #rcs-mobile-nav-links a { color: white; font-weight: 600; font-size: 20px; } #rcs-mobile-nav-links li { list-style-type: none; margin-bottom: 1rem; } #rcs-mobile-nav-links ul { padding-inline-start: 0; } nav { justify-content: space-around !important; } #rcs-nav-links { display: none; }  #rcs-footer-logo-wrapper { margin-bottom: 2rem; } #rcs-footer-logo-wrapper img { height: 5rem !important; object-fit: contain !important;  } #rcs-footer-primary { height: unset !important; align-items: center; padding: 2rem 0; } #rcs-footer-primary > * { width: 80% !important; } #rcs-footer-principle-page-links { padding-left: unset !important; border-left: none !important; } #rcs-footer-social-icons { justify-content: flex-end !important; margin: 0 1rem; }  .rcs-btn-base { margin-left: 0 !important; } .rcs-text-column-container > * { margin: 0 !important; } #rcs-careers-section img { height: 37rem; object-fit: cover; } .rcs-horizontal-btn-container { justify-content: flex-start; align-items: center; height: 12rem; } .rcs-input { padding: 0 !important; } div#rcs-input-wrapper { width: 100% !important; } #rcs-icon-item-container { flex-flow: column nowrap !important; justify-content: center !important; align-items: center !important; margin: 0 !important; width: 100% !important; } .rcs-icon-item { width: 50% !important; } .rcs-icon-item-text h3, .rcs-icon-item-text h4 { text-align: center !important; } #rcs-breadcrumbs { display: none !important;  } }


/* ===== Portfolio Preview (re-approach) =================================== */
#rcs-featuredprojects-items {
  /* no padding; ensure gaps occur only between items */
  margin: 0;
  --rcs-gap: 0.5rem;
}
#rcs-featuredprojects-items[data-gap] { --rcs-gap: attr(data-gap); }

/* Shared brick treatments (keep image/overlay/colors the same) */
#rcs-featuredprojects-items .rcs-brick {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(440px, 44vw, 760px); 
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
#rcs-featuredprojects-items .rcs-brick:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(16,74,236,.20);
}

/* Image fills, unchanged treatment */
#rcs-featuredprojects-items .rcs-featuredproject-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* Hover overlay: keep your visual language */
#rcs-featuredprojects-items .rcs-featuredproject-item-hoverwrapper {
  position: absolute; inset: -0.5px;
  background: rgba(0,0,0,0.8);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility 0s linear .28s;
  z-index: 2;
}
#rcs-featuredprojects-items .rcs-brick:hover .rcs-featuredproject-item-hoverwrapper,
#rcs-featuredprojects-items .rcs-brick:focus-within .rcs-featuredproject-item-hoverwrapper {
  opacity: 0.8; visibility: visible; transition-delay: 0s, 0s;
}
#rcs-featuredprojects-items .rcs-featuredproject-item-hoverinner { text-align:center; color:#fff; }
#rcs-featuredprojects-items .rcs-featuredproject-item-hoverinner h3 { color:#fff; margin:0 0 .25rem; }
#rcs-featuredprojects-items .rcs-featuredproject-item-hoverinner h5 { color:#fff; margin:0; }

/* ---- GRID (odd counts, auto brick wall) ---- */
#rcs-featuredprojects-items.is-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: var(--rcs-row, clamp(280px, 16vw, 440px));
  grid-auto-flow: dense;
  gap: var(--rcs-gap);
}
#rcs-featuredprojects-items.is-grid > .rcs-brick {
  min-height: var(--rcs-row);
}

/* Preserve the original 5‑item layout without outer gaps */
#rcs-featuredprojects-items.is-five {
  gap: var(--rcs-gap) !important;
}

/* ---- FLEX ROWS (even counts) ---- */
#rcs-featuredprojects-items.is-flex {
  display: flex !important;
  flex-direction: column;
  gap: var(--rcs-gap);
}
#rcs-featuredprojects-items.is-flex .rcs-flex-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--rcs-gap);
  margin: 0; padding: 0; /* no edge spaces */
}
#rcs-featuredprojects-items.is-flex .rcs-flex-row > .rcs-brick {
  /* JS sets --basis per item, accounting for gap pixels */
  flex: 0 0 var(--basis, 50%);
  min-height: clamp(440px, 56vw, 760px);
}

/* Mobile: single column stack, inner gaps only */
@media (max-width: 768px) {
  #rcs-featuredprojects-items.is-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: clamp(220px, 48vw, 360px);
  }
  #rcs-featuredprojects-items.is-flex .rcs-flex-row {
    display: grid;
    grid-template-columns: 1fr;
  }
  #rcs-featuredprojects-items .rcs-brick { min-height: clamp(240px, 60vw, 360px); }
}

/* === RCS Featured Projects β€” overlay repair ================================= */

/* 1) Make the anchor the positioning context */
#rcs-featuredprojects-items a.rcs-featuredproject-item-anchor {
  position: relative !important;
}

/* 2) Ensure image is below the overlay */
#rcs-featuredprojects-items a.rcs-featuredproject-item-anchor > .rcs-brick-inner > .rcs-featuredproject-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;            /* image below overlay */
}

/* 3) Base overlay state */
#rcs-featuredprojects-items a.rcs-featuredproject-item-anchor > .rcs-brick-inner > .rcs-featuredproject-item-hoverwrapper {
  position: absolute !important;
  inset: -0.5px !important;          /* bleed to avoid 1px seams */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;   /* overlay never blocks the link */
  z-index: 2 !important;
  transition: opacity .25s ease, visibility 0s linear .25s !important;
  will-change: opacity;
}

/* 4) Hover/focus-on anchor β†’ reveal overlay (high specificity + !important) */
#rcs-featuredprojects-items a.rcs-featuredproject-item-anchor:hover > .rcs-brick-inner > .rcs-featuredproject-item-hoverwrapper,
#rcs-featuredprojects-items a.rcs-featuredproject-item-anchor:focus-within > .rcs-brick-inner > .rcs-featuredproject-item-hoverwrapper,
#rcs-featuredprojects-items a.rcs-featuredproject-item-anchor.is-hover > .rcs-brick-inner > .rcs-featuredproject-item-hoverwrapper {
  opacity: 0.8 !important;
  visibility: visible !important;
  transition-delay: 0s, 0s !important;
}

.slide-menu {
	margin: 0 !important;
}

/* ---- Slide menu layout tweaks ---- */
.slide-menu {
  /* existing styles remain */
  padding: 1.25rem 1.25rem; /* slightly tighter to pull content up */
}

.slide-menu__inner{
  display: flex;
  flex-direction: column;
  align-items: center;     /* center the column horizontally */
  width: 100%;
  max-width: 22rem;        /* keeps column narrow and centered */
  margin: 0 auto;          /* center within panel */
}

/* Close button sits at the top-right of the inner column */
.menu-close{
  align-self: flex-end; 
  margin: 0 0 0.75rem 0;   /* minimal gap above the links */
}

/* ---- Link column positioning ---- */
.slide-nav{
  /* reset and constrain */
  list-style: none;
  margin: 0.25rem auto 0;  /* small top margin = closer to top */
  padding: 0;
  width: 100%;
  max-width: 9rem;        /* visually nice line length */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;            /* tighter vertical rhythm */
  text-align: left;        /* readable rag left even though column is centered */
	    justify-content: space-between;
    min-height: 26rem !important;
}

/* Top-level links */
.slide-nav > li > a{
  color:#fff;
  font-size:1.5rem;
  text-decoration:none;
  font-family:"BrownPro",sans-serif;
  line-height:1.2;
}

/* Provide a clear parent style when it has children */
.slide-nav > li.menu-item-has-children > a{
  position: relative;
  padding-right: 1.25rem;
}

/* Optional caret indicator (pure CSS) */
.slide-nav > li.menu-item-has-children > a::after{
  content: "β€Ί";
  position: absolute;
  right: 0;
  top: 0;
  transform: rotate(90deg); /* points down */
  font-size: 1.25rem;
  opacity: 0.8;
}

/* ---- Nested (depth-2) rendering ---- */
.slide-nav .sub-menu{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.35rem 0 0.25rem;
  padding-left: 1rem;                    /* visual indent */
  border-left: 2px solid rgba(255,255,255,0.25); /* vertical guide */
}

/* Nested links slightly smaller & lighter */
.slide-nav .sub-menu a{
  font-size: 1.125rem;
  color: rgba(255,255,255,0.95);
  text-decoration: none;
  line-height: 1.25;
}

/* Improve hit area & focus */
.slide-nav a{
  padding: 0.125rem 0;
}
.slide-nav a:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Keep column centered on very narrow viewports */

/* --- Nested list cleanup --- */
.slide-nav li,
.slide-nav .sub-menu li {
  list-style: none;           /* kill bullets everywhere, including nested */
}

.slide-nav .sub-menu{
  border-left: none;          /* remove the guide line */
  padding-left: 0;            /* remove indent */
  margin-left: 0;             /* keep column tidy */
}

/* If you still want a subtle indent without the border, use this instead: */
/* .slide-nav .sub-menu { padding-left: .75rem; } */

/* --- Current-page underline logic (fix bleed to children) --- */
/* Reset any underline on parents/ancestors */
.slide-nav li.current-menu-ancestor > a,
.slide-nav li.current-menu-parent > a,
.slide-nav li.current_page_parent > a,
.slide-nav li.current_page_ancestor > a {
  text-decoration: none !important;
}

/* Underline ONLY the real current item */
.slide-nav li.current-menu-item > a,
.slide-nav li.current_page_item > a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Also ensure nested links under an open parent don't inherit underline */
.slide-nav li.current-menu-ancestor .sub-menu a,
.slide-nav li.current_page_ancestor .sub-menu a {
  text-decoration: none;
}

@media (max-width: 480px){
  .slide-menu{
    padding: 1rem; /* tighter on small screens */
  }
  .slide-menu__inner{ max-width: 20rem; }
  .slide-nav{ max-width: 100%; }
}

/* Ensure panel sits above header blur on all screens */
.slide-menu{ z-index: 1100; }
/* ---- Indent nested links a bit more to the right ---- */
/* Base indent variable (tweak as desired) */
:root { --slide-sub-indent: 1.125rem; }

/* Depth-2 (WordPress default sub-menu) */
.slide-nav .sub-menu{
  padding-left: var(--slide-sub-indent);   /* visual indent */
  margin-left: 0;                          /* stay aligned within column */
  border-left: none;                       /* ensure no vertical line */
}

/* If you ever add deeper levels, increase indent progressively */
.slide-nav .sub-menu .sub-menu{
  padding-left: calc(var(--slide-sub-indent) + 0.75rem);
}

/* Keep bullets off at all depths */
.slide-nav li,
.slide-nav .sub-menu li { list-style: none; }

/* Preserve β€œunderline only on the actual current page” */
.slide-nav li.current-menu-ancestor > a,
.slide-nav li.current-menu-parent > a,
.slide-nav li.current_page_parent > a,
.slide-nav li.current_page_ancestor > a { text-decoration: none !important; }

.slide-nav li.current-menu-item > a,
.slide-nav li.current_page_item > a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.slide-nav li.current-menu-ancestor .sub-menu a,
.slide-nav li.current_page_ancestor .sub-menu a { text-decoration: none; }

/* ==========================================================================
   Header: tablet portrait and below (<= 1050px)
   Fix container width, logo sizing, and ensure hamburger stays in-canvas
   ========================================================================== */
@media (max-width: 1050px) {

  /* 1) Make ONLY the header container truly full width (do not change global .container) */
  .orion-header .nav-outer > .container.nav-inner {
    max-width: 100% !important;   /* override var(--max)=88vw for header only */
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* 2) Use absolute-positioned toggle (reliable), and reserve space so logo cannot push it off */
  .orion-header .nav-inner {
    position: relative;           /* anchor abs-positioned toggle */
    align-items: center;
    justify-content: flex-start;  /* logo can grow; toggle is pinned */
    gap: 0.75rem;
  }

  .orion-header .nav-toggle.nav-toggle--main {
    position: absolute !important;
    top: 50% !important;
    right: 1rem !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 1010;
    width: 44px;                  /* better tap target */
    height: 44px;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;

    /* neutralize any theme transforms/positioning that might be bleeding in */
    left: auto !important;
    bottom: auto !important;
  }

  .orion-header .nav-toggle.nav-toggle--main img {
    width: 40px;
    height: 40px;
    display: block;
  }

  /* Reserve horizontal space for the pinned toggle */
  .orion-header .logo-link {
    flex: 1 1 auto;
    min-width: 0;                 /* allow shrink without overflow pushing */
    padding-right: 56px;          /* 44px toggle + breathing room */
    overflow: hidden;             /* ensure nothing leaks into the toggle area */
  }

  /* 3) Reduce logo footprint on tablet/mobile while keeping your scroll animation intact */
  .orion-header .logo-container {
    height: 52px !important;
    width: clamp(160px, 55vw, 240px) !important;
    overflow: hidden;
  }

  /* Scale down the track to match the new container height */
  .orion-header .logo-track {
    transform: scale(0.31) translateX(0) !important; /* tuned for 52px container height */
    transform-origin: left center;
  }

  .orion-header.scrolled .logo-track {
    transform: scale(0.31) translateX(-164px) !important; /* keep your exact slide distance */
  }

  /* Override the inline margin-left on the text logo that inflates total width */
  .orion-header .logo-text {
    margin-left: 1.5rem !important; /* inline style is 3rem; this prevents overflow pressure */
  }
}

/* Slightly tighter on smaller phones */
@media (max-width: 480px) {
  .orion-header .nav-outer > .container.nav-inner {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .orion-header .nav-toggle.nav-toggle--main {
    right: 0.75rem !important;
  }

  .orion-header .logo-container {
    height: 44px !important;
    width: clamp(140px, 58vw, 210px) !important;
  }

  .orion-header .logo-track {
    transform: scale(0.262) translateX(0) !important; /* tuned for 44px height */
  }

  .orion-header.scrolled .logo-track {
    transform: scale(0.262) translateX(-164px) !important;
  }

  .orion-header .logo-text {
    margin-left: 1.1rem !important;
  }
}

/* ==========================================================================
   Slide menu: tablet portrait and below (<= 1050px)
   Make panel slide fully in; use transform so off-canvas distance matches width
   ========================================================================== */
@media (max-width: 1050px) {
	footer #rcs-footer-logo-wrapper img {
    height: 5rem !important;
    width: fit-content;
    object-fit: contain !important;
}
	footer #rcs-footer-primary {
		height: unset !important;
	}
	footer #rcs-footer-primary > *:not(#rcs-footer-principle-page-links) {
    height: unset !important;
}
	footer #rcs-footer-social-icons {
    justify-content: flex-start !important;

}
	
	footer .rcs-text-column-container > * {
    margin: 1rem 0 !important;
}
	
	footer #rcs-footer-primary > * {
    width: 80% !important;
    margin: 1rem 0 !important;
}
	
	.hero-headlines {
		width: 85vw !important;
		margin: 0 auto !important;
	}
	
	.header-inner h2{
		font-size: 2rem !important;
	}
	.portfolio-preview {
		padding: 0 0 0 0 !important;
	}
	@media screen and (min-width: 481px and max-width: 1050px) {
					.home #primary .rcs-social-image, .rcs-social-cta {
				margin: 0 0 !important;}
	}
		@media screen and (max-width: 480px) {
			.home #primary .rcs-social-image, .rcs-social-cta {
				margin: 0 0 !important;}
	}
	.home #primary .rcs-social-image, .rcs-social-cta {

    height: 20rem !important;
}
	
	#rcs-featuredprojects-items {
		margin-top: 0.25rem !important;
	}
	
	.home #primary #rcs-featuredprojects-items.is-flex .rcs-flex-row > .rcs-brick {
     min-height: clamp(240px, 60vw, 360px) !important;
}
	
	.home #primary .rcs-flex-grid:not([data-item-count="5"]) {
    gap: 0.05rem !important;
}
  /* Override the desktop/right:-30vw approach on smaller viewports */
  #slide-menu.slide-menu {
    right: 0 !important;                  /* anchor to right edge */
    left: auto !important;

    /* Choose a sensible responsive width */
    width: min(92vw, 420px) !important;   /* big on mobile, capped on tablets */
    max-width: none !important;

    /* Ensure it is truly off-canvas when closed */
    transform: translateX(100%) !important;
    transition: transform 0.4s ease !important;

    /* Neutralize the old "right" animation to avoid mixed behaviors */
    will-change: transform;
  }

  #slide-menu.slide-menu.open {
    transform: translateX(0) !important;
  }
}

/* Phone-tight: go full width */
@media (max-width: 480px) {
  #slide-menu.slide-menu {
    width: 100vw !important;
    transform: translateX(100%) !important;
  }
}
/* ==========================================================================
   Slide menu + nav alignment: <= 1025px only
   ========================================================================== */
@media (max-width: 1025px) {

  /* If you meant the nav element inside the slide panel, target it explicitly */
  #slide-menu .slide-nav {
    justify-content: flex-start !important;
  }

  /* Center text in the slide menu list */
  #slide-menu .slide-nav {
    text-align: center !important;
  }

  /* Darken slide panel background */
  #slide-menu.slide-menu {
    background: rgba(52, 54, 71, 0.90) !important;
  }
}
@media (max-width: 1025px) {
  nav { justify-content: flex-start !important; }
	.hero-headline {
		font-size: 34px !important;
	}
	
	.page-id-1274 #primary .variant-white {
    margin: 0 0 0 0 !important;
}
	
	.header-section.variant-blue p {
		margin-top: 2rem !important;
	}
	
		.hero-headlines {
		justify-content: flex-start !important;
	}
	
	#primary .rcs-team-item-hover-blue {
    height: 12rem;
}
	
	#primary .rcs-team-item-img-container img, .rcs-team-item-img-container, .rcs-team-item {
    /* height: 730px !important; */
    height: 48rem !important;
}
	
	#primary .rcs-team-item--third, #primary .rcs-team-item--quarter, #primary .rcs-team-item-img-container img, #primary .rcs-team-item-img-container,#primary  .rcs-team-item {
		width: 100% !important;
	}
	
	
	
	#rcs-footer-logo-wrapper {
		justify-content: flex-start !important;
	}
	
	
}
@media screen and (max-width: 1025px){
#rcs-project-post-body-section p {
    order: -1;
    width: 85% !important;
}
}

/* ==========================================================================
   Header: TABLET-only overrides (after phone, up to 1050px)
   Forces full-width inner container + 3rem side padding + hamburger right offset
   ========================================================================== */
@media (min-width: 481px) and (max-width: 1050px) {
	.rcs-btn-base {
		padding: 1.25rem 2rem !important;
	}
  .orion-header .nav-outer > .container.nav-inner {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }

  .orion-header .nav-toggle.nav-toggle--main {
    right: 3rem !important;
  }
}
@media screen and (max-width: 1050px) {
    #rcs-featuredprojects-items a {
        margin: 0.25rem 0;
    }
}


/* ==========================================================================
   Slide menu: LANDSCAPE mobile/tablet (<=1050px)
   Full-screen overlay + wrapping menu items (no vertical overflow)
   ========================================================================== */
@media (max-width: 1050px) and (orientation: landscape) {

  /* Full-screen panel in landscape (override the 92vw/420px behavior) */
  #slide-menu.slide-menu {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: none !important;

    /* Use "real" viewport height (see JS below for iOS accuracy) */
    height: calc(var(--vh, 1vh) * 100) !important;
    max-height: calc(var(--vh, 1vh) * 100) !important;

    /* Keep your existing off-canvas transform approach */
    transform: translateX(100%) !important;
  }

  #slide-menu.slide-menu.open {
    transform: translateX(0) !important;
  }

  /* Make inner area usable on short heights */
  #slide-menu .slide-menu__inner {
    width: 100% !important;
    max-width: none !important;

    /* Start content from the left edge of the inner container */
    align-items: stretch !important;

    /* Allow scrolling if needed (close button stays accessible below) */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;

    /* Better spacing on devices with safe areas */
    padding-top: max(1rem, env(safe-area-inset-top)) !important;
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  }

  /* Keep close button visible while scrolling */
  #slide-menu .menu-close {
    position: sticky;
    top: 0;
    z-index: 2;
    align-self: flex-end;
    margin: 0 0 0.75rem 0 !important;
  }

  /* IMPORTANT: remove the forced min-height that causes overflow in landscape */
  #slide-menu .slide-nav {
    min-height: 0 !important;
    height: auto !important;
    justify-content: flex-start !important;

    /* Start at left of container */
    text-align: left !important;
    max-width: none !important;
    width: 100% !important;

    /* Wrap behavior: flow into columns instead of overflowing bottom */
    display: block !important;             /* columns work best on block containers */
    column-width: 12rem;                   /* tweak if you want wider/narrower columns */
    column-gap: 2rem;
    column-fill: auto;                     /* fill down then wrap to next column */
  }

  /* Keep list items from splitting across columns */
  #slide-menu .slide-nav > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 0.75rem 0;                 /* replace your flex gap */
  }

  /* Nested sub-menus should not become their own columns */
  #slide-menu .slide-nav .sub-menu {
    column-count: 1;
    column-width: auto;
    margin: 0.35rem 0 0.25rem 0 !important;
    padding-left: 1rem !important;         /* optional: small indent in landscape */
  }
}


/* ==========================================================
   Footer: landscape touch devices
   Keep the desktop/footer row layout, but top-align columns
   (does NOT affect desktop/laptops)
   ========================================================== */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1050px) {

  footer #rcs-footer-primary {
    /* This is the core fix: align all direct children to the same top edge */
    align-items: flex-start !important;
  }

  /* Belt-and-suspenders in case any child has its own align-self */
  footer #rcs-footer-primary > * {
    align-self: flex-start !important;
  }

  /* Optional: remove the β€œbuilt-in” top whitespace that can still make
     columns *look* misaligned even when the boxes are top-aligned */
  footer #rcs-footer-primary p:first-child,
  footer #rcs-footer-primary address p:first-child {
    margin-top: 0 !important;
  }
}

/* ============================
   Slide menu must win z + clicks ONLY when open
   Put this at the END of your CSS
   ============================ */

/* 1) Closed menu should not catch clicks at all */
#slide-menu.slide-menu {
  pointer-events: none;            /* prevents off-canvas panel from trapping clicks */
}

/* 2) When open, menu becomes the topmost interactive layer */
#slide-menu.slide-menu.open {
  pointer-events: auto;
}

/* 3) While menu is open, the header bar should not steal clicks */
body.menu-open #site-header .nav-outer {
  pointer-events: none !important; /* header becomes "unclickable" while menu is open */
}

/* If anything in the header has its own pointer-events, belt-and-suspenders */
body.menu-open #site-header .nav-outer * {
  pointer-events: none !important;
}

/* 4) Explicitly re-enable interaction inside the slide menu subtree */
body.menu-open #slide-menu,
body.menu-open #slide-menu * {
  pointer-events: auto !important;
}

/* 5) Ensure the slide menu is always above the header visually when open */
body.menu-open #slide-menu.slide-menu {
  z-index: 99999 !important;
}

/* Optional: keep the header itself below the menu when open (visual clarity) */
body.menu-open #site-header.orion-header {
  z-index: 500; /* can remain as-is; menu is forced higher */
}