/*
 Theme Name: BoldOrange Site
 Description: Child theme for Hello Elementor
 Template: hello-elementor
 Version: 1.0.14
 Text Domain: boldorange-site
*/

/*
 * Contact page (/contact/)
 * Things Elementor 4 global classes can't express: url() backgrounds, text-box-trim, and the
 * 440px (iPhone Pro Max width) card switch, which isn't one of the kit's breakpoints.
 */
/* Only the location SVG lacks its own circle (Figma draws it on the parent frame), and it is a 13x17 pin
   inside the 32px circle, so it must beat the base class's `background-size: contain`. */
.elementor .boco-contact-icon.boco-contact-icon--location {
	background-image: url(assets/img/contact/icon-location.svg);
	background-color: rgba(255, 255, 255, 0.3);
	background-size: 13.333px 16.675px;
	border-radius: 46.667px;
}

.boco-contact-icon--email    { background-image: url(assets/img/contact/icon-email.svg); }
.boco-contact-icon--phone    { background-image: url(assets/img/contact/icon-phone.svg); }

/* Hero card: its blurred photo (filter: blur) is bled past the edges and overlaid by a flat tint. iOS Safari doesn't
   clip filtered/composited children to a rounded `overflow: clip`, so the photo spills past the bottom and the tint
   shows square top corners. A hard mask plus rounded children keep it clipped. */
.elementor .boco-contact-info {
	overflow: hidden;
	isolation: isolate;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	mask-image: linear-gradient(#000, #000);
}

.elementor .boco-contact-info .boco-contact-info-overlay {
	border-radius: inherit;
}

/* ShortPixel wraps the absolutely positioned photo in a static <picture>, which becomes a zero-height flex item in the
   card's `space-between` column and pushes the heading to the vertical middle. Take the wrapper out of the flow, sized to the
   card so the photo's negative insets still resolve against it. */
.elementor .boco-contact-info > picture {
	position: absolute;
	inset: 0;
}

/* Hero card phone/email links sit on a dark image and Elementor's link base sets no focus style (WCAG 2.4.7). */
.elementor .boco-contact-text a:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.elementor .elementor-element.boco-contact-map-heading {
	text-box: trim-both cap alphabetic;
}

/* Phones: stack heading, map and CTA card at full width minus the 16px gutter. */
@media (max-width: 440px) {
	.elementor .elementor-element.boco-contact-map-section {
		padding: 29px 16px 65px;
	}

	.elementor .elementor-element.boco-contact-map-section .boco-contact-map-heading {
		position: static;
		padding: 0;
	}

	.elementor.elementor .elementor-element.boco-contact-map-section .elementor-widget-boco_us_map {
		width: calc(100% + 32px);
		max-width: none;
		margin: -26px -16px 0;
	}

	.elementor .elementor-element.boco-contact-map-section .boco-contact-cta-card {
		position: relative;
		left: auto;
		bottom: auto;
		width: auto;
		max-width: none;
		margin-top: 0;
	}
}

/*
 * Contact page: Gravity Forms (form 1) inside the card. Overrides the Orbital theme's CSS variables
 * first, then only the pieces the variables can't express.
 */
/* GF prints an inline <style> keyed on #gform_wrapper_N, so these variables need !important to win. */
.boco-contact-form .gform_wrapper.gform-theme--framework {
	--gf-font-size-primary: 16px !important;
	--gf-ctrl-bg-color: var(--White) !important;
	--gf-ctrl-border-color: var(--Divider) !important;
	--gf-ctrl-border-color-hover: var(--Divider) !important;
	--gf-ctrl-border-color-focus: var(--Grey-900) !important;
	--gf-ctrl-radius: var(--border-radius-s) !important;
	--gf-ctrl-size: 52px !important;
	--gf-ctrl-font-size: 16px !important;
	--gf-ctrl-color: var(--primary-text) !important;
	--gf-ctrl-placeholder-color: var(--Grey-700) !important;
	--gf-ctrl-label-font-size-primary: 14px !important;
	--gf-ctrl-label-font-weight-primary: 500 !important;
	--gf-ctrl-label-color-primary: var(--primary-text) !important;
	--gf-form-gap-y: 24px !important;
	font-family: var(--primary-font-family);
}

.boco-contact-form .gform_wrapper .gfield_label {
	margin-bottom: 6px;
	line-height: 1.4;
}

/* The design has no required-fields legend either. */
.boco-contact-form .gform_wrapper .gform_required_legend {
	display: none;
}

/* The design has no "(Required)" marker; it flags optional fields instead (class boco-optional-field). */
.boco-contact-form .gform_wrapper .gfield_required {
	display: none;
}

.boco-contact-form .gform_wrapper .boco-optional-field .gfield_label::after {
	content: "Optional";
	margin-left: 8px;
	color: var(--Grey-700);
	font-weight: 400;
}

.boco-contact-form .gform_wrapper :is(input[type="text"], input[type="email"], select, textarea) {
	padding: 16px 20px 16px 16px;
	font-family: var(--primary-font-family);
	line-height: normal;
}

.boco-contact-form .gform_wrapper .gfield--type-textarea .gfield_label {
	margin-bottom: 8px;
}

.boco-contact-form .gform_wrapper textarea {
	min-height: 160px;
	padding: 24px 20px 24px 16px;
}

.boco-contact-form .gform_wrapper select {
	padding-right: 50px;
	appearance: none;
	background: var(--White) url(assets/img/contact/select-arrow.svg) no-repeat right 20px center;
}

/* Placeholder option ("Select") reads as a placeholder until a choice is made. */
.boco-contact-form .gform_wrapper select:has(option.gf_placeholder:checked) {
	color: var(--Grey-700);
}

.boco-contact-form .gform_wrapper .gform_footer {
	justify-content: center;
	margin: 40px 0 0;
	padding: 0;
}

/* GF's own button rule has the same specificity and loads later, so match it with extra classes. */
.elementor .boco-contact-form .gform_wrapper.gform-theme .gform_footer .gform_button {
	width: 257px;
	max-width: 100%;
	padding: 19px var(--scale-32);
	border: 1px solid var(--Grey-900);
	border-radius: 100px;
	background: transparent;
	color: var(--Grey-900);
	font-family: var(--primary-font-family);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.elementor .boco-contact-form .gform_wrapper.gform-theme .gform_footer .gform_button:is(:hover, :focus-visible) {
	background: transparent;
	color: var(--Grey-900);
}

.boco-contact-form .gform_confirmation_message {
	color: var(--primary-text);
	font-family: var(--primary-font-family);
	font-size: 16px;
}

@media (max-width: 767px) {
	.boco-contact-form .gform_wrapper .gform_footer {
		margin-top: 64px;
	}
}

/* [boco_menu] shortcode (footer Quick Links / Socials) — matches the former text-lg footer paragraphs */
.boco-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--scale-64);
}

.elementor .boco-menu .boco-menu__link {
	color: var(--White);
	font-family: Montserrat;
	font-size: var(--text-lg);
	text-decoration: none;
	cursor: pointer;
}

@media (max-width: 767px) {
	.boco-menu {
		flex-direction: column;
		gap: var(--gap-md);
	}
}

/* [boco_menu] hover (Quick Links / Socials) */
.elementor .boco-menu .boco-menu__link:is(:hover, :focus-visible) {
	color: var(--Orange-100);
	font-weight: 500;
}

/* Footer Privacy menu: desktop = former paragraphs (inherit colour, 12px/27px, 14px gap, right-aligned);
   mobile = centered copyright above a full-width, evenly spaced row that wraps when there are 4+ links */
.boco-menu.boco-menu--policy {
	justify-content: flex-end;
	gap: var(--gap-sm);
}

.elementor .boco-menu--policy .boco-menu__link {
	color: inherit;
	font-family: inherit;
	font-size: 12px;
	font-weight: 400;
	line-height: 27px;
	white-space: nowrap;
}

.elementor .boco-menu--policy .boco-menu__link:is(:hover, :focus-visible) {
	color: #8a8a8a;
	font-weight: 400;
}

@media (max-width: 767px) {
	.elementor .boco-menu-widget {
		width: 100%;
	}

	.boco-menu.boco-menu--policy {
		flex-direction: row;
		justify-content: space-between;
		gap: 0 var(--gap-sm);
	}

	.elementor .boco-menu--policy .boco-menu__link {
		font-size: 11px;
		line-height: 21px;
	}
}

/* Privacy / Terms / California pages: H2 spacing */
.elementor .boco-legal {
	width: 100%;
	overflow-wrap: anywhere;
}

/* let the copy section shrink to the gutters instead of growing to its longest URL / table */
.elementor .blog-read-section:has(.boco-legal) {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

.elementor .boco-legal h2 {
	margin: 0;
	padding-top: 56px;
	padding-bottom: 32px;
}

/* 96px above the H1 in total (replaces the container's own top padding) */
.elementor .blog-article-read:has(.boco-legal) {
	padding-block-start: 0;
}

.elementor .boco-legal h1 {
	padding-top: 96px;
}

@media (max-width: 767px) {
	.elementor .blog-article-read:has(.boco-legal) {
		padding-inline: 10px;
	}

	/* California notice: the tables carry fixed width attributes (618–623px) that don't fit a phone */
	.elementor .boco-legal table:not([width]),
	.elementor .boco-legal table:not([width]) tbody,
	.elementor .boco-legal table:not([width]) tr,
	.elementor .boco-legal table:not([width]) td {
		display: block;
		width: 100%;
	}

	.elementor .boco-legal table[width] {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		overflow-wrap: normal;
	}

	.elementor .boco-legal table[width] tbody {
		display: table;
		width: 623px;
	}
}

/* Footer newsletter signup (Gravity Form 3) — matches the former Elementor form:
   44px pill input, 1px white border, transparent, arrow button at 92% */
.elementor .boco-footer-form {
	position: relative;
	width: 100%;
}

.elementor .boco-footer-form .gform_wrapper {
	margin: 0;
	padding: 0;
}

.elementor .boco-footer-form .gform_wrapper .gform_heading {
	display: none;
}

/* the per-field message is enough; keep the summary box for screen readers only */
.elementor .boco-footer-form .gform_wrapper .gform_validation_errors {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.elementor .boco-footer-form .gform_wrapper form {
	position: relative;
}

.elementor .boco-footer-form .gform_wrapper .gform_body,
.elementor .boco-footer-form .gform_wrapper .gform_fields,
.elementor .boco-footer-form .gform_wrapper .gfield {
	margin: 0;
	padding: 0;
	gap: 0;
}

.elementor .boco-footer-form .gform_wrapper.gform-theme input[type="email"] {
	box-sizing: border-box !important;
	width: 100% !important;
	height: 44px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 8% 0 16px !important;
	border: 1px solid #ffffff !important;
	border-radius: 999px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #ffffff !important;
	font-family: Montserrat, sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 21px !important;
	text-align: start !important;
}

.elementor .boco-footer-form .gform_wrapper.gform-theme input[type="email"]::placeholder {
	color: var(--Orange-100) !important;
	opacity: 1;
}

.elementor .boco-footer-form .gform_wrapper.gform-theme input[type="email"]:focus {
	border-color: #ffffff !important;
	outline: none !important;
	box-shadow: none !important;
}

.elementor .boco-footer-form .gform_wrapper .gform_footer {
	margin: 0;
	padding: 0;
}

.elementor .boco-footer-form .gform_wrapper.gform-theme .gform_footer .gform_button {
	position: absolute;
	top: 0;
	inset-inline-start: 92%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	max-width: 30px;
	height: 44px;
	max-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: #ffffff;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}

.elementor .boco-footer-form .gform_wrapper .gfield_validation_message {
	margin: 8px 0 0;
	padding: 0 16px;
	border: 0;
	background: transparent;
	color: #ffffff;
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	line-height: 1.4;
}

/* GF's submit spinner: small white ring just left of the arrow, inside the pill (the arrow stays visible). */
/* GF's default blue focus box doesn't suit the pill: no ring on click, a white one for keyboard focus. */
.elementor .boco-footer-form .gform_wrapper.gform-theme .gform_footer .gform_button:focus {
	outline: none;
	box-shadow: none;
}

.elementor .boco-footer-form .gform_wrapper.gform-theme .gform_footer .gform_button:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	border-radius: 999px;
}

/* GF's busy state (gform-has-spinner) switches the button to position: relative and hides its text,
   which drops the arrow below the pill and grows the footer. Keep it where it is. */
.elementor .boco-footer-form .gform_wrapper.gform-theme .gform_footer .gform_button.gform-has-spinner {
	position: absolute;
	color: #ffffff;
}

.elementor .boco-footer-form .gform_wrapper.gform-theme .gform_footer .gform_button .gform-loader {
	position: absolute;
	inset: 50% auto auto auto;
	inset-inline-end: calc(100% + 10px);
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	margin: -7px 0 0;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #ffffff;
	font-size: 0;
}

/* "Signed Up" confirmation: a white pill that wipes in over the input from the arrow side, then wipes back out.
   It is the same 44px as the input, so the footer never changes height. */
.elementor .boco-footer-form .gform_confirmation_wrapper {
	height: 44px;
	margin: 0;
	padding: 0;
}

.elementor .boco-footer-form .gform_confirmation_wrapper .gform_confirmation_message {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 44px;
	margin: 0;
	padding: 0 16px;
	border-radius: 999px;
	background: #ffffff;
	color: var(--Grey-900, #1a1a1a);
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 21px;
	clip-path: inset(0 0 0 100% round 999px);
	transition: clip-path 450ms cubic-bezier(0.65, 0, 0.35, 1);
}

.elementor .boco-footer-form .gform_confirmation_wrapper .boco-signed-up {
	opacity: 0;
	transition: opacity 250ms ease 200ms;
}

.elementor .boco-footer-form .gform_confirmation_wrapper.is-in .gform_confirmation_message {
	clip-path: inset(0 0 0 0 round 999px);
}

.elementor .boco-footer-form .gform_confirmation_wrapper.is-in .boco-signed-up {
	opacity: 1;
}

.elementor .boco-footer-form .gform_confirmation_wrapper.is-out .gform_confirmation_message {
	clip-path: inset(0 0 0 100% round 999px);
	transition-duration: 350ms;
}

.elementor .boco-footer-form .gform_confirmation_wrapper.is-out .boco-signed-up {
	opacity: 0;
	transition: opacity 150ms ease;
}

.elementor .boco-footer-form .boco-form-restored {
	animation: boco-form-restore 300ms ease both;
}

@keyframes boco-form-restore {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.elementor .boco-footer-form .gform_confirmation_wrapper .gform_confirmation_message,
	.elementor .boco-footer-form .gform_confirmation_wrapper.is-in .gform_confirmation_message,
	.elementor .boco-footer-form .gform_confirmation_wrapper.is-out .gform_confirmation_message {
		clip-path: none;
		transition: none;
	}

	.elementor .boco-footer-form .gform_confirmation_wrapper .boco-signed-up,
	.elementor .boco-footer-form .gform_confirmation_wrapper.is-out .boco-signed-up {
		transition: opacity 150ms ease;
	}

	.elementor .boco-footer-form .boco-form-restored {
		animation-duration: 1ms;
	}
}

/* ==========================================================================
   Cookiebot banner
   ========================================================================== */

/* Hold the banner back until the preroll loader has finished. Keyed off the
   loader element (present from first paint) rather than the .boco-loading class,
   which the loader script only adds after the banner could already have shown. */
html:has(#boco-preroll-loader:not(.boco-hide)) #CybotCookiebotDialog {
	display: none !important;
}

/* Re-opened banner (after changing consent): the "Do not sell" toggle was
   misaligned with the OK button and tight against it. Stacked layout (phone/tablet)
   puts the toggle above OK, so it needs space on both sides; the desktop layout
   (>=1280px) puts it below OK and insets OK by 15px. */
#CybotCookiebotDialog #CybotCookiebotDialogBodyButtons .CybotCookiebotDialogBodyLevelButtonWrapper {
	margin: 16px 0 !important;
	align-items: center;
}

@media (min-width: 1280px) {
	#CybotCookiebotDialog #CybotCookiebotDialogBodyButtons .CybotCookiebotDialogBodyLevelButtonWrapper {
		margin: 16px 0 0 15px !important;
	}
}

/* Let the long "Do not sell or share my personal information" label wrap
   inside the button border instead of overflowing it. */
#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonDecline {
	white-space: normal !important;
	height: auto !important;
	min-height: 48px;
	max-width: 100%;
	box-sizing: border-box;
	line-height: 1.3;
	word-break: break-word;
}

/* Cookiebot re-open widget (lower left): 32x32, slightly transparent. */
#CookiebotWidget .CookiebotWidget-logo {
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	opacity: 0.8;
}

#CookiebotWidget .CookiebotWidget-logo svg {
	width: 32px !important;
	height: 32px !important;
}

/* The widget's own wrapper is 48x48 with a shadow, which read as a larger circle around the 32px button.
   Only while collapsed: when opened, Cookiebot grows this wrapper into the settings panel, and a forced 32px box hides it. */
#CookiebotWidget:not(.CookiebotWidget-open) {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	min-height: 32px !important;
	border-radius: 50% !important;
}

/*
 * Case study detail pages ("See other case studies"): the slider wrapper there is classed DUP_case-study-slider, so the
 * .case-study-slider bleed rules (Elementor global class) never apply and the first card sits inset with the next one
 * pushed off-screen. Same rules as .case-study-slider, which is what the homepage carousel gets; the selector is bumped to outrank Elementor's .e-con width.
 */
.elementor .e-con.DUP_case-study-slider {
	padding-block: 0;
	padding-inline-start: 0;
	padding-inline-end: var(--site-width-main);
	display: block;
	width: calc(50% + 50vw);
	max-width: none;
	margin-right: calc(50% - 50vw);
}

@media (max-width: 767px) {
	.elementor .e-con.DUP_case-study-slider {
		display: flex;
		align-self: center;
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
}

/* Case study tile media ([boco_tile]): the poster shows until the video is actually playing. */
.case-study-video .tile-media {
	position: absolute;
	inset: 0;
}

.tile-poster,
.tile-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--pos, center);
}

.tile-video {
	opacity: 0;
	transition: opacity 0.3s;
}

.tile-video.is-playing {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.tile-video {
		display: none;
	}
}

/* Braze "How we help" tab image: ShortPixel WebP delivery wraps the <img> in a
   <picture>, which then becomes the flex item and ignores the image's flex/width
   rules (the image grows past its panel). Let the <img> be the flex item again. */
.how-we-help-panel picture {
	display: contents;
}

/* Partner Credibility badges share the .logo-grid class with the industry logo
   grid, whose kit CSS sets container-type: inline-size. Size containment collapses
   the shrink-to-fit grid to ~30px wide, stacking the badges in one tiny column. */
.elementor .logo-grid.credibility-grid {
	container-type: normal;
}

/* Strategy and Technology capability heroes: .capabilities-hero is 92vh, so the
   orbiting icons are clipped 8vh above the viewport bottom. Fill the viewport like
   the Creative hero. Their bottom orbit fade also stops 100px above the hero edge,
   so the icons reappear below it and look like they pass behind a bar; run it to
   the edge, as on the Creative page. */
@media (min-width: 768px) {
	.elementor .capabilities-hero.capabilities-orbit-hero {
		min-height: 100vh;
	}

	.elementor .capabilities-orbit-hero .capabilities-orbit-fade-bottom {
		inset-block-start: auto;
		inset-block-end: 0;
		height: 254px;
	}
}