/*
 * Shared, site-wide gallery lightbox component.
 * Generic class names (.gallery-item / .gallery-lightbox) so this same
 * stylesheet works on any page — just add more .gallery-item markup.
 * Layout is controlled entirely by this stylesheet (not by Elementor's
 * per-widget "local" styles), since those only compile when a page is
 * saved through the Elementor editor itself.
 */

/* Wrapping grid: 4 cards per row on desktop, wraps as more cards are added. */
.gallery-grid {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 24px !important;
	width: 100% !important;
	/* Elementor's outer section can be flex-direction:row with several
	   siblings sharing one line; flex-basis:100% forces this grid onto
	   its own full-width row regardless of that parent's layout. */
	flex-basis: 100% !important;
	flex-grow: 1 !important;
}

/*
 * !important here is deliberate: Elementor's own ".e-con" utility CSS
 * (width: var(--width), defaulting to 100%) loads after this stylesheet
 * and otherwise wins on equal selector specificity, stretching every card
 * to full width instead of the fixed 276x400 size.
 */
.gallery-grid-item {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	width: 276px !important;
	flex: 0 0 276px !important;
}

/* Card hover preview (Flowcandy-style) — fixed size, image always fills it. */
.gallery-item {
	position: relative;
	width: 276px !important;
	height: 400px !important;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
}

.gallery-item__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery-item__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0);
	transition: background 0.25s ease;
}

.gallery-item__btn {
	appearance: none;
	border: 0;
	margin: 0;
	padding: 12px 22px;
	border-radius: 4px;
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: #b5604a;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
	cursor: pointer;
}

.gallery-item:hover .gallery-item__overlay,
.gallery-item:focus-within .gallery-item__overlay {
	background: rgba(0, 0, 0, 0.45);
}

.gallery-item:hover .gallery-item__btn,
.gallery-item:focus-within .gallery-item__btn {
	opacity: 1;
	transform: translateY(0);
}

.gallery-item__btn:hover,
.gallery-item__btn:focus-visible {
	background: #9a4f3d;
}

.gallery-item__heading {
	margin: 0;
}

/*
 * Narrow screens: cards stay on one row and shrink together instead of
 * dropping to 100% width and stacking. A small flex-basis (90px) is what
 * keeps a pair on the same line even on a 320px phone; max-width holds them
 * at the designed 276px once there is room, and aspect-ratio preserves the
 * 276x400 card proportions now that the height is no longer fixed.
 */
/*
 * Homepage hero (post 8): layout + vertical scroll on native Elementor Image
 * widgets (Trust Bar exception — flex + animation live in shared CSS/JS).
 */
.elementor .e-container_ettiydsra-c792122 {
	width: 100% !important;
	max-width: none !important;
}

.elementor .e-container_hero_inner-c0ffee0 {
	margin-inline: auto;
	width: 100%;
}

/*
 * e-flexbox-base defaults to flex-direction: row — force hero copy column + 4-up gallery.
 * Elementor save can drop local styles on nested containers; these rules keep layout stable.
 */
.elementor .e-container_hero_inner-c0ffee0 > .e-container_c01uyqx4i-6343c6c {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	flex: 1 1 0;
	max-width: 48%;
	min-width: 0;
	width: auto;
	padding: 0 !important;
}

.elementor .e-container_hero_inner-c0ffee0 > .e-container_h3roglry-8f4a2b1,
.elementor .accent-hero-vcols {
	display: flex;
	flex-direction: row;
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	gap: 10px;
	justify-content: center;
	align-items: stretch;
	overflow: hidden;
	padding: 0 !important;
	min-height: 520px;
	max-height: 640px;
}

.accent-hero-vcol {
	flex: 1 1 0;
	min-width: 0;
	max-width: 168px;
	padding: 0 !important;
	/*
	 * No fade mask: with a fixed-height mask + fixed-height slides, the old
	 * top/bottom 10% fade zone covered the seam between two images, so both
	 * the tail of the outgoing image and the head of the incoming one sat in
	 * partially-transparent territory at the same time — that hazy blend is
	 * exactly what read as "overlap". A hard-edged clip keeps every image
	 * fully opaque within its own slide and the gap between slides fully
	 * visible as plain background, with no ambiguity at the edges.
	 */
	/*
	 * Elementor's own `.elementor .e-flexbox-base{display:flex;flex-direction:row}`
	 * base rule has higher specificity (.elementor + .e-flexbox-base = 2 classes)
	 * than a plain `.accent-hero-vcol` selector, so it silently wins and resets
	 * this container back to a row with visible overflow — which stretches the
	 * track to the mask's own height instead of letting it hold its full,
	 * scrollable content. !important forces our intended column + clip.
	 */
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
}

.elementor .accent-hero-vtrack {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	/* 10px breathing room between stacked images as they slide past — matches
	 * the reference site. Real and visible (not just numeric) because the
	 * image element itself now clips with overflow:hidden and the mask no
	 * longer fades its edges, so nothing bleeds into this gap. !important
	 * because each track also carries its own Elementor-generated
	 * per-instance class (e.g. .e-container_hvcol1_track-*) with the same
	 * 2-class specificity and a baked-in gap:10px, which otherwise wins or
	 * loses on source order unpredictably. */
	gap: 10px !important;
	width: 100%;
	padding: 0 !important;
}

.accent-hero-vtrack {
	will-change: transform;
	/* The track must keep its full (doubled) content height so the
	 * translateY(-50%) loop travels exactly one image-set per cycle.
	 * Without this it gets flex-shrunk down to the mask's height,
	 * which desyncs the loop and hides images. Elementor's own
	 * `.elementor-element{flex-shrink:var(--flex-shrink)}` base rule
	 * (same specificity, loaded after ours) otherwise wins and resets
	 * it back to 1, so this needs !important. */
	flex-shrink: 0 !important;
}

.accent-hero-vcol--up .accent-hero-vtrack {
	animation: accentHeroMarqueeUp 110s linear infinite;
}

.accent-hero-vcol--down .accent-hero-vtrack {
	animation: accentHeroMarqueeDown 110s linear infinite;
}

.accent-hero-vcols > .accent-hero-vcol:nth-child(2) .accent-hero-vtrack {
	animation-duration: 110s;
}

.accent-hero-vcols > .accent-hero-vcol:nth-child(3) .accent-hero-vtrack {
	animation-duration: 110s;
}

.accent-hero-vcols > .accent-hero-vcol:nth-child(4) .accent-hero-vtrack {
	animation-duration: 110s;
}

@keyframes accentHeroMarqueeUp {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-50%);
	}
}

@keyframes accentHeroMarqueeDown {
	from {
		transform: translateY(-50%);
	}
	to {
		transform: translateY(0);
	}
}

/* Match dev.accentstudio.se: full column width, natural height, Elementor cover. */
.accent-hero-vtrack .elementor-widget-image,
.accent-hero-vtrack .elementor-widget-e-image,
.accent-hero-vtrack > .e-image-base {
	width: 100%;
	max-width: 168px;
	flex-shrink: 0;
	height: auto;
}

.accent-hero-vtrack img {
	display: block;
	width: 100%;
	max-width: 168px;
	height: auto;
	object-fit: cover;
	object-position: top center;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(26, 22, 18, 0.08);
}

@media (max-width: 1024px) {
	.accent-hero-vcols {
		min-height: 420px;
		max-height: 480px;
	}
}

@media (max-width: 767px) {
	.elementor .e-container_hero_inner-c0ffee0 > .e-container_c01uyqx4i-6343c6c {
		max-width: 100%;
	}

	.accent-hero-vcols,
	.elementor .e-container_hero_inner-c0ffee0 > .e-container_h3roglry-8f4a2b1 {
		min-height: 360px;
		max-height: 400px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.accent-hero-vtrack {
		animation: none !important;
	}

	.accent-logo-marquee--ready .swiper-wrapper {
		animation: none !important;
	}
}

/*
 * Homepage "Trusted by" logo rows — continuous horizontal marquee on native
 * Elementor Image Carousel widgets (accentstudio.se-style). JS duplicates slides
 * and disables Swiper; motion is pure CSS (no pause between slides).
 *
 * Add class "accent-logo-marquee" on each carousel in Elementor → Advanced →
 * CSS Classes, or rely on the homepage widget IDs below.
 */
.accent-logo-marquee--ready.elementor-widget-image-carousel,
.elementor-8 .elementor-element-42bdf62.accent-logo-marquee--ready,
.elementor-8 .elementor-element-49c0cf9.accent-logo-marquee--ready,
.elementor-8 .elementor-element-c12575e.accent-logo-marquee--ready {
	overflow: hidden;
	width: 100%;
	mask-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 0%,
		rgb(0, 0, 0) 12.5%,
		rgb(0, 0, 0) 87.5%,
		rgba(0, 0, 0, 0) 100%
	);
	-webkit-mask-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 0%,
		rgb(0, 0, 0) 12.5%,
		rgb(0, 0, 0) 87.5%,
		rgba(0, 0, 0, 0) 100%
	);
}

.accent-logo-marquee--ready .elementor-image-carousel-wrapper {
	overflow: hidden;
	width: 100%;
	/* Elementor "Left" = ltr; rtl reverses perceived marquee direction. */
	direction: ltr;
}

.accent-logo-marquee--ready .swiper-wrapper {
	display: flex !important;
	align-items: center !important;
	width: max-content !important;
	flex-wrap: nowrap !important;
	gap: 56px;
	direction: ltr;
	animation: accentLogoMarquee 40s linear infinite;
	animation-direction: normal;
	will-change: transform;
	transition: none !important;
}

.accent-logo-marquee--ready .swiper-slide {
	width: auto !important;
	flex: 0 0 auto !important;
	height: auto !important;
}

.accent-logo-marquee--ready .swiper-slide-inner {
	margin: 0;
}

.accent-logo-marquee--ready .swiper-slide-image {
	display: block;
	width: auto;
	max-width: 200px;
	max-height: 64px;
	height: auto;
	object-fit: contain;
}

.elementor-8 .elementor-element-49c0cf9.accent-logo-marquee--ready .swiper-wrapper {
	animation-duration: 45s;
}

.elementor-8 .elementor-element-c12575e.accent-logo-marquee--ready .swiper-wrapper {
	animation-duration: 50s;
}

@keyframes accentLogoMarquee {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (max-width: 700px) {
	.gallery-grid {
		gap: 16px !important;
	}

	.gallery-grid-item {
		width: auto !important;
		flex: 1 1 72px !important;
		max-width: 276px !important;
		min-width: 0 !important;
	}

	.gallery-item {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 276 / 400;
	}
}

/*
 * Lightbox — a large, readable preview card centered over a dimmed (not
 * opaque) backdrop, so the rest of the page stays visible and scrollable
 * behind it. The close button sits top-right of the viewport; the prev/next
 * arrows are attached to the card's own left and right edges (see the nav
 * rail below).
 */
.gallery-lightbox[hidden] {
	display: none !important;
}

.gallery-lightbox {
	/* Half the preview card's width. Shared by the card (via __stage) and by
	   the nav rail, so the arrows always land exactly on the card's edges. */
	--gallery-stage-half: min(320px, calc(50vw - 24px));
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 96px 24px 48px;
	overflow-y: auto;
}

.gallery-lightbox__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(20, 16, 14, 0.72);
}

.gallery-lightbox__controls {
	position: fixed;
	top: 24px;
	right: 24px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 12px;
}

/*
 * Nav rail: a card-width strip holding the two arrows, so each one sits on the
 * preview card's left/right edge at the vertical centre instead of floating in
 * a top corner beside the close button. Each arrow is pulled half its own width
 * outwards so it straddles the edge.
 *
 * --gallery-rail-left / --gallery-rail-width are written by the script from the
 * card's measured rect, because the overlay's own scrollbar narrows the card by
 * an amount CSS cannot know; the values below are the pre-script fallback.
 *
 * The rail is click-through so clicks between the arrows still reach the image
 * (or, past the card's edges, the backdrop that closes the lightbox).
 */
.gallery-lightbox__nav-rail {
	position: fixed;
	top: 50%;
	left: var(--gallery-rail-left, calc(50% - var(--gallery-stage-half)));
	z-index: 3;
	width: var(--gallery-rail-width, calc(var(--gallery-stage-half) * 2));
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
}

.gallery-lightbox__nav {
	pointer-events: auto;
}

.gallery-lightbox__nav--prev {
	transform: translateX(-50%);
}

.gallery-lightbox__nav--next {
	transform: translateX(50%);
}

.gallery-lightbox__nav,
.gallery-lightbox__close {
	position: static;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	color: #1a1612;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
}

.gallery-lightbox__close {
	font-size: 24px;
}

.gallery-lightbox__nav:hover,
.gallery-lightbox__nav:focus-visible,
.gallery-lightbox__close:hover,
.gallery-lightbox__close:focus-visible {
	background: #b5604a;
	color: #fff;
}

.gallery-lightbox__stage {
	position: relative;
	z-index: 1;
	width: calc(var(--gallery-stage-half) * 2);
}

.gallery-lightbox__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	border-radius: 6px;
	background: #f6f3ee;
}

@media (max-width: 780px) {
	.gallery-lightbox {
		--gallery-stage-half: min(320px, calc(50vw - 16px));
		padding: 80px 16px 32px;
	}

	.gallery-lightbox__controls {
		top: 12px;
		right: 12px;
	}

	.gallery-lightbox__nav,
	.gallery-lightbox__close {
		width: 38px;
		height: 38px;
	}
}

/* Too little room to straddle the edge - tuck the arrows just inside it. */
@media (max-width: 480px) {
	.gallery-lightbox__nav--prev,
	.gallery-lightbox__nav--next {
		transform: translateX(0);
	}
}

/* Site-wide responsive: clip horizontal overflow without affecting vertical scroll. */
html {
	overflow-x: clip;
}

body.elementor-page {
	overflow-x: clip;
	max-width: 100%;
}

.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: min(100%, var(--container-max-width, 100%));
}

/* Never show mobile-only CTA as a link in the horizontal (desktop) menu. */
.elementor-location-header .elementor-nav-menu--main > ul > li.accent-header-cta-menu,
.elementor-location-header .elementor-nav-menu--main li.accent-header-cta-menu {
	display: none !important;
}

/* Mobile/tablet nav: caret on Solutions only; sub-links white text, no hover fill (reference-style). */
.elementor-location-header .elementor-nav-menu--dropdown ul.sub-menu .sub-arrow {
	display: none !important;
}

.elementor-location-header .elementor-nav-menu--dropdown > ul > li.menu-item-has-children > a.elementor-item .sub-arrow {
	display: inline-flex;
}

.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item.highlighted + ul.sub-menu {
	background-color: #B5604A;
}

.elementor-location-header .elementor-nav-menu--dropdown ul.sub-menu .elementor-sub-item:hover,
.elementor-location-header .elementor-nav-menu--dropdown ul.sub-menu .elementor-sub-item:focus,
.elementor-location-header .elementor-nav-menu--dropdown ul.sub-menu .elementor-sub-item.highlighted {
	background-color: #B5604A !important;
	color: #FFFFFF !important;
}

.elementor-location-header .elementor-nav-menu--dropdown li.accent-header-cta-menu {
	display: none !important;
}

@media (max-width: 767px) {
	.elementor-location-header .elementor-nav-menu--dropdown li.accent-header-cta-menu {
		display: block !important;
		margin: 20px 16px 24px;
	}

	.elementor-location-header .elementor-nav-menu--dropdown li.accent-header-cta-menu > a {
		display: block;
		text-align: center;
		background-color: #1A1612 !important;
		color: #FFFFFF !important;
		text-transform: uppercase;
		font-weight: 700;
		padding: 14px 20px !important;
		border-radius: 4px;
	}
}

.elementor-location-header .elementor-nav-menu--dropdown ul.sub-menu .elementor-sub-item {
	color: #FFFFFF;
}

.elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container > ul > li > a.elementor-item:hover,
.elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container > ul > li > a.elementor-item.highlighted {
	background-color: #B5604A;
	color: #FFFFFF;
}

.elementor-location-header .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--close,
.elementor-location-header .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--close path {
	fill: #FFFFFF;
}

/* Our Programs + similar card grids: equal-width columns at intermediate widths. */
@media (max-width: 767px) {
	.elementor .e-container_vvv7vpmnm-84455b3 {
		grid-template-columns: 1fr !important;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.elementor .e-container_vvv7vpmnm-84455b3 {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		align-items: stretch !important;
	}

	.elementor .e-container_x2wmocj0c-a3cbe47,
	.elementor .e-container_q95h0l4ce-706090c,
	.elementor .e-container_5678s02nx-ec10c18 {
		height: 100%;
		min-height: 100%;
	}
}

/* Our Programs: align Learn More buttons to card foot (Elementor omits margin:auto in compiled CSS). */
.elementor .e-container_vvv7vpmnm-84455b3 > .e-con {
	height: 100%;
}

.elementor .e-container_x2wmocj0c-a3cbe47 .e-widget_oykwynmmi-0504391,
.elementor .e-container_q95h0l4ce-706090c .e-widget_i2khp91ru-c77a0a8,
.elementor .e-container_5678s02nx-ec10c18 .e-widget_wgkw6ozk6-a2c0934 {
	margin-block-start: auto;
}