/*
 * hero.css (GLOBAL)
 * Consolidated 2026-08-20 per Monika's request to have one stylesheet
 * for the "hero" component wherever it's used. This file just
 * combines the two existing implementations as-is (Home V2 and
 * Services) -- NOT forcing shared class names or values between them,
 * since their layouts genuinely differ (column vs row padding, no
 * eyebrow on Home, different spacing). Each page keeps its own
 * classes; only the FILE LOCATION is unified so there's one place to
 * look, per Monika. If a future page reuses the exact same layout as
 * one of these, it can reuse that section's classes directly instead
 * of duplicating rules.
 */


/* ================================================================
   HOME V2 ("Pioneering access to expert insight...")
   ================================================================ */

/*-----Hero Option 1-----*/

/*--Fixes spacing between images and above/below carousel on large monitors--*/

@media (min-width: 1800px) {
    
    .hero-carousel div.wpex-carousel__item.owl-item{
        margin-right: 500px !important;
    }
    
    .hero-carousel .wpex-carousel__stage.owl-stage{
    margin-left: 2.5vw !important;
    }
}


@media (min-width: 2200px) {
    
.hero-carousel div.wpex-carousel__item.owl-item {
    margin-right: 600px !important;
}

.hero-carousel .wpex-carousel__stage.owl-stage{
    margin-left: 4vw !important;
    margin-top: 2vw !important;
    margin-bottom: 2vw !important;
}
}




/*--Gradient, opacity, scale, and transitions - laptop and desktop only--*/

/*Left and right images*/

@media (min-width: 1025px) {
    
.hero-carousel .wpex-carousel__item.owl-item.cloned,
.hero-carousel .wpex-carousel__item.owl-item.active,
.hero-carousel div.wpex-carousel__item.owl-item {
    opacity: .3 !important;
    transform: scale(1.45);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}


/*Gradient overlay left image*/

.hero-carousel .wpex-carousel__item.owl-item.cloned::after,
.hero-carousel div.wpex-carousel__item.owl-item::after {
    content: "";  /* Adds the pseudo-element */
    position: absolute;  /* Positions it over the image */
    top: 0; left: 0; right: 0; bottom: 0;  /* Full-size overlay */
    background: linear-gradient(270deg, rgba(235,234,227,0) 0%, rgba(235,234,227,.5) 0%, rgba(235,234,227,1) 25%);
}


/* Gradient overlay right image */

.hero-carousel .wpex-carousel__item.owl-item.active::after {
    content: "";  /* Adds the pseudo-element */
    position: absolute;  /* Positions it over the image */
    top: 0; left: 0; right: 0; bottom: 0;  /* Full-size overlay */
    background: linear-gradient(90deg, rgba(235,234,227,0) 0%, rgba(235,234,227,.5) 0%, rgba(235,234,227,1) 25%);
}


/*Exclude the gradient for the center image*/
.hero-carousel .wpex-carousel__item.owl-item.active.center::after {
    content: none;  /* Removes the overlay */
}


/* Main Centered Image */
.hero-carousel .wpex-carousel__item.owl-item.active.center {
    opacity: 1 !important;
    transform: scale(1.6) !important;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
}


/*--Additional Styling--*/

.hero-carousel .wpex-carousel__stage-outer {
    overflow: visible !important;
}

.hero-carousel figure.wpex-carousel-entry-media {
    border-radius: 10px !important;
}


/*Arrows*/

.hero-carousel button.wpex-carousel__arrow {
    color: var(--wpex-palette-1276-color) !important;
    width: 2vw;
    height: 2vw;
    min-width: 30px !important;
    min-height: 30px !important;
}

.hero-carousel button.wpex-carousel__arrow > span > svg {
    font-size: clamp(14px, 1vw, 1vw);;
}


.wpex-carousel__arrow:where(:not(.theme-button)) {
    background-color: var(--wpex-palette-1268-color) !important;
}

.wpex-carousel__arrow:where(:not(.theme-button)):hover {
    background-color: var(--wpex-palette-1270-color) !important;
}



/*Hover Overlay*/

.hero-carousel .overlay-bg.wpex-bg-black.wpex-absolute.wpex-inset-0.wpex-opacity-70 {
    background-color: var(--wpex-palette-1280-color);
    border-radius: 10px;
}

.hero-carousel div.overlay-title {
    font-size: 30px;
    font-weight: 600;
		line-height: 1.2;
    margin-bottom: 10px;
}

.hero-carousel div.overlay-excerpt {
    opacity: 1;
    font-style: normal;
    font-size: 12px !important;
    font-weight: 500;
    padding: 9px 25px;
    background: var(--wpex-palette-1268-color);
    border-radius: 3px;
	width: fit-content !important;
    margin: 0 auto !important;
}

.hero-carousel div.overlay-excerpt:hover {
    background: var(--wpex-palette-1270-color);
}

/*-----end Hero Option 1-----*/




/*-----Hero Option 2-----*/


@media (min-width: 768px) {

#hero-2 .wpex-bg-overlay{
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5004595588235294) 40%, rgba(0,0,0,0) 70%) !important;
}
}


/*-----end Hero Option 2-----*/

/*----- New Hero theme starts below -----*/
.hero{
	background:var(--color-beige-bg);
}
.hero--home {
	display: flex;
	align-items: stretch;
	overflow: hidden;
}
.home-hero__copy{
	/*padding-top:138px;*/
	padding: 90px clamp(16px, 4.17vw, 80px) 60px;
	padding: 90px clamp(16px, 4.17vw, 80px) 60px 0;
}
.hero.hero--home .home-hero__title{
	margin-bottom:40px;
}
.home-hero__text{
	margin-bottom:60px;
}
.home-hero__stats {
    display: flex;
    gap: 48px;
    margin-left: 0 !important;
    margin-right: 0 !important;
	margin-bottom:100px;
}
.home-hero__stats::before,
.home-hero__stats::after {
    display: none !important;
    content: none !important;
}

.home-hero__stats > .wpb_column {
    flex: 1;
}

.home-hero__stats > .wpb_column > .vc_column-inner {
    padding-left: 0;
    padding-right: 0;
}

.home-hero__divider{
	border:0.75px solid var(--color-black);
	margin-bottom:24px;
}
.home-hero__stat-number{
	font-size: 48px;
	font-weight:var(--font-weight-regular);
	letter-spacing: -1px;
	margin-bottom:18px;
}
.home-hero__stat-label{
	font-size: var(--text-sm);
	font-weight:var(--font-weight-regular);
	line-height:150%;
}
.home-hero__media{
	position:relative;
	align-self:stretch;
	overflow:visible;
}

.home-hero__media > .vc_column-inner{
	position:absolute;
	inset:0;
	padding:0 !important;
}

.home-hero__media .wpb_wrapper,
.home-hero__media .wpb_raw_code,
.home-hero__media .wpb_raw_html,
.home-hero__media .wpb_content_element{
	height:100%;
	margin:0 !important;
}

.home-hero__video{
	display:block;
	width:auto;
	height:100%;
	max-width:none;
	margin:0;
	object-fit:contain;
	object-position:left center;
}

@media (max-width:1280px) {
	.hero--home > .home-hero__copy {
		width: 60% !important;
		padding:90px 0 0;
	}

	.hero--home > .home-hero__media {
		width: 40% !important;
	}

	.home-hero__stats{
		flex-wrap:wrap;
		column-gap:48px;
		row-gap:32px;

		width:68%;
		max-width:620px;
		margin-right:auto !important;
	}

	.home-hero__stats > .wpb_column{
		flex:0 0 calc(50% - 24px);
		width:calc(50% - 24px) !important;
		max-width:calc(50% - 24px) !important;
	}
	/* keep media filling full hero height */
	.home-hero__media > .vc_column-inner{
		position:absolute;
		inset:0;
		padding:0 !important;
	}

	.home-hero__video{
		width:auto;
		height:100%;
		max-width:none;
		object-fit:contain;
		object-position:left center;
	}
}
@media (max-width:1024px) {

	.hero--home > .home-hero__copy{
		width:50% !important;
	}

	.hero--home > .home-hero__media{
		width:50% !important;
	}
	.home-hero__stats{
		width:100%;
		max-width:none;
	}
}

@media (max-width: 767px) {

	.hero--home {
        display: block;
    }

    .hero--home > .wpb_column {
        width: 100% !important;
        float: none !important;
    }

    .home-hero__copy,
    .home-hero__media {
        width: 100% !important;
    }
	.hero--home > .home-hero__copy{
		padding:90px 0;
	}
	.hero.hero--home .home-hero__title{
		letter-spacing: -1.08px;
		line-height:140%;
		text-align:left;
		font-size:var(--heading-h1);
	}
	.home-hero__text{
		margin-bottom:20px;
	}
	.home-hero__text p{
		font-size:var(--text-md);
		line-height:180%;
		text-align:left !important;
		margin-bottom:40px;
	}

    .home-hero__stats {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
		margin-bottom:0px
    }

    .home-hero__stats > .wpb_column {
        flex: 0 0 calc(25% - 9px);
        width: calc(25% - 9px) !important;
        max-width: calc(25% - 9px) !important;
        min-width: 0;
    }
    .home-hero__stat-number {
        display: block;
        padding: 0 !important;
		font-size:38px;
		line-height:80%;
		letter-spacing:-1px;
		text-align:left !important;
		white-space: nowrap;
    }

    .home-hero__stat-label {
        margin: 0 !important;
        padding: 0 !important;
    }
	.home-hero__stat-label p{
		font-size:14px;
		line-height:150%;
		text-align:left !important;
    }
	.home-hero__media {
		display: none !important;
	}
	/* reset desktop media behavior */
	/*.home-hero__media {
		position:relative;
		display:block;
		overflow:hidden;
		height:520px;
	}

	.home-hero__media > .vc_column-inner {
		position:static;
		width:100%;
		height:100%;
		padding:0 !important;
	}

	.home-hero__media .wpb_wrapper,
	.home-hero__media .wpb_raw_code,
	.home-hero__media .wpb_raw_html,
	.home-hero__media .wpb_content_element {
		width:100%;
		height:100%;
		margin:0 !important;
	}

	.home-hero__video {
		display:block;
		width:100%;
		height:100%;
		max-width:none;
		object-fit:cover;
		object-position:top center;
	}*/
}
@media (max-width: 600px) {

    .home-hero__copy {
		padding-left:32px;
		padding-right:32px;
	}

	.home-hero__stats {
		column-gap:24px;
		row-gap:32px;
	}

	.home-hero__stats > .wpb_column {
		flex:0 0 calc(50% - 12px);
		width:calc(50% - 12px) !important;
		max-width:calc(50% - 12px) !important;
	}

	.home-hero__media {
		height:420px;
	}
}
@media (max-width: 439px) {
	.hero--home > .home-hero__copy{
		padding:46px 0;

	}
	.hero.hero--home .home-hero__title{
		letter-spacing: -1.08px;
		line-height:140%;
		text-align:center;
		font-size:36px !important;
	}
	.home-hero__text p{
		font-size:16px;
		line-height:200%;
	}
	.home-hero__media{
		width:100vw !important;
		max-width:100vw !important;
		margin-left:calc(50% - 50vw);
		overflow:hidden;
		height:360px;
	}

	.home-hero__media > .vc_column-inner,
	.home-hero__media .wpb_wrapper,
	.home-hero__media .wpb_raw_code,
	.home-hero__media .wpb_content_element{
		width:100%;
		height:100%;
		padding:0 !important;
		margin:0 !important;
	}

	.home-hero__video{
	width:120%;
	height:100%;
	max-width:none;
	object-fit:cover;
	object-position:top center;
	display:block;

	position:relative;
	left:50%;
	transform:translateX(-50%);
}
}


/* ================================================================
   SERVICES ("Delivering confidence through expert insights...")
   ================================================================ */

/*
 * services-hero.css
 * "Delivering confidence through expert insights" hero section
 * (Services page)
 * Rewritten 2026-08-19 per Monika's request: use only clean, explicit
 * el_class names ("hero", "hero__copy", "eyebrow") controlled entirely
 * via CSS -- no WPBakery inline style attributes, no auto-generated
 * .vc_custom_XXXX selectors (those break if the module is duplicated
 * to another page, since WPBakery regenerates a new hash each time).
 */

.hero {
	background-color: var(--color-beige-bg);
	/*padding: 60px clamp(16px, 4.17vw, 80px); removed due to home hero special width setup*/
	box-sizing: border-box;
}

.hero__copy{
	padding:90px 0 140px;
}

.hero .eyebrow {
	color: var(--color-gray-dark-text);
	font-family: var(--font-primary);
	font-weight: var(--font-weight-semibold);
	font-size: var(--text-md);
	text-transform: uppercase;
	display: block;
}

.hero h1 {
	color: var(--color-off-black-text);
	line-height: 120%;
	margin:40px 0;
}

.hero p {
	color: var(--color-gray-dark-text);
	margin: 0;
}

.hero__copy__button,
.hero__copy__button:hover{
	color: var(--color-gray-dark-text);
	background:var(--color-yellow-bg);
	
	font-size: var(--text-sm);

	font-weight:var(--font-weight-regular);
	line-height: 180%; /* 25.2px */
	padding:16px 32px;
	margin-top:40px;
}

@media (max-width: 1200px) {
	.hero__copy{
		max-width:100%;
		width:100%;
	}
	.hero__copy > .vc_column-inner {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Mobile: center text, reduce vertical padding */
@media (max-width: 767px) {
	.hero {
		padding: 0px;
	}
	.hero__copy {
		width: 100% !important;
		padding:90px 0;
	}
	.hero .eyebrow,
	.hero h1,
	.hero p {
		text-align: center;
	}
	.hero h1{
		margin:24px 0 45px;
	}
	
	.hero__copy__button,
	.hero__copy__button:hover {
		display: block;
		width: 100%;
		text-align: center;
	}
}
@media (max-width: 439px) {
	.hero__copy{
		padding:46px 0;

	}
}


/* ================================================================
   Shared typography (title + paragraph), Home + Services
   Both pages use identical font-size/weight for the hero title and
   paragraph, and both center-align on mobile. Kept as one shared rule
   so there's a single place to change it; page-specific bits (color,
   margins, line-height nuances that genuinely differ) stay in each
   page's own section above.
   Merged 2026-08-20.
   ================================================================ */
.hero.hero--home .home-hero__title,
.hero__copy h1 {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-size: var(--heading-h1);
	letter-spacing: var(--heading-letter-spacing);
}

.home-hero__text,
.hero__copy p {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-medium);
	font-size: var(--text-xl);
	line-height: 180%;
}

@media (max-width: 767px) {
	.hero__copy h1 {
		font-size: var(--heading-h1-mobile);
	}
	.hero__copy p {
		font-size: var(--text-md);
	}
	.hero .eyebrow,
	.hero__copy h1,
	.hero__copy p {
		text-align: center;
	}
}


/* ================================================================
   PLATFORM ("Differentiated technology...") hero, mobile padding
   override. Shares the same .hero / .hero__copy classes as Services,
   scoped via the hero--platform modifier so this doesn't affect
   Services' mobile padding.
   Added 2026-08-20 per feedback.
   ================================================================ */
@media (max-width: 767px) {
	.hero.hero--platform {
		padding: 30px 16px !important;
	}
}


/* ================================================================
   CLIENTS page (page-id-8354): stats numbers wrapping mid-number
   (e.g. "5,0" / "00+") at some widths -- force single line, matching
   Home's hero stats which never wrap.
   Added 2026-08-25.
   ================================================================ */
.page-id-8354 .wpex-h2.vcex-heading,
.page-id-8354 .wpex-h2 .vcex-heading-inner {
	white-space: nowrap !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
	width: auto !important;
}

/* Stats row: force top-alignment instead of the theme's default
   vertical-centering per column, so the divider + number line up
   across all 4 columns regardless of how many lines each label
   wraps to at narrower widths. */
.page-id-8354 .vc_row-o-content-middle.vc_row-flex {
	align-items: flex-start !important;
}


/* Remove Total theme's default left padding on the column-inner
   wrapper for the Clients stats section, at all breakpoints, so
   nothing pushes the divider/numbers off their intended alignment. */
@media (max-width: 766px) {
	.page-id-8354 .vc_column_container > .vc_column-inner {
		padding-left: 15px !important;
	}
}
@media (min-width: 767px) {
	.page-id-8354 .vc_column_container > .vc_column-inner {
		padding-left: 0 !important;
	}
}


@media (max-width: 766px) {
	.vc_custom_1777323505978 {
		padding-left: 15px !important;
	}
}


/* Hide the (duplicate/leftover) stats container on Clients mobile
   view per feedback. */
@media (max-width: 768px) {
	.vc_custom_1787928819689,
	.vc_custom_1777324934749 {
		display: none !important;
	}
	/* Robust fallback: these vc_custom_XXXXX class names are
	   auto-generated by WPBakery and can regenerate/change when the
	   row's CSS box is re-saved, so also target it by its stable
	   marker classes (this exact combination is unique to the
	   Clients page's empty duplicate stats row). */
	.page-id-8354 .vc_row-o-content-top.wpex-vc-full-width-row--no-padding {
		display: none !important;
	}
}