/* BEC Quote Carousel
   Performance: all slides share one grid cell (no height jump); changing slide animates only
   opacity and transform. The progress bar is a transform animation. */
.bec-qc {
	--bec-qc-photo-col: 28%;
	--bec-qc-gap: 72px;
	--bec-qc-photo: 280px;
	--bec-qc-cols: var(--bec-qc-photo-col) minmax(0, 1fr);
	--bec-qc-areas: "photo text";
	--bec-qc-photo-display: flex;
	--bec-qc-nav-offset: calc(var(--bec-qc-photo-col) + var(--bec-qc-gap));
	--bec-qc-valign: center;
	--bec-qc-justify: flex-start;
	--bec-qc-dur: 700ms;
	--bec-qc-nav-space: 36px;
	--bec-qc-dot: 10px;
	--bec-qc-ease: cubic-bezier(.22, .8, .2, 1);
	position: relative;
	color: #073D30;
	text-align: left;
}
.bec-qc, .bec-qc *, .bec-qc *::before, .bec-qc *::after { box-sizing: border-box; }

.bec-qc__slides { display: grid; touch-action: pan-y; }
.bec-qc__slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: var(--bec-qc-cols);
	grid-template-areas: var(--bec-qc-areas);
	column-gap: var(--bec-qc-gap);
	row-gap: var(--bec-qc-gap);
	align-items: var(--bec-qc-valign);
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(var(--bec-qc-from-x, 0), var(--bec-qc-from-y, 0), 0);
	transition: opacity var(--bec-qc-dur) ease, transform var(--bec-qc-dur) var(--bec-qc-ease), visibility 0s linear var(--bec-qc-dur);
}
.bec-qc__slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity var(--bec-qc-dur) ease, transform var(--bec-qc-dur) var(--bec-qc-ease), visibility 0s; }
.bec-qc-fx-fade-up .bec-qc__slide { --bec-qc-from-y: 16px; }
.bec-qc-fx-slide .bec-qc__slide { --bec-qc-from-x: 32px; }
.bec-qc-fx-slide .bec-qc.is-back .bec-qc__slide { --bec-qc-from-x: -32px; }

/* photo */
.bec-qc__photo-wrap { grid-area: photo; display: var(--bec-qc-photo-display); justify-content: var(--bec-qc-justify); min-width: 0; }
.bec-qc__photo {
	width: var(--bec-qc-photo);
	max-width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	display: grid;
	place-items: center;
	background-color: #FBF6EE;
	flex: none;
}
.bec-qc__photo img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: var(--bec-qc-focus, center top); display: block; }
.bec-qc__ph { display: inline-flex; font-size: calc(var(--bec-qc-photo) * .4); line-height: 1; color: #073D30; }
.bec-qc__ph svg { width: 1em; height: 1em; fill: currentColor; }

/* text */
.bec-qc__body { grid-area: text; margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: var(--bec-qc-justify); }
.bec-qc__mark { display: block; font-size: 96px; line-height: .7; height: .45em; color: #FF662F; font-family: Georgia, serif; }
.bec-qc__quote { margin: 0 0 28px; padding: 0; border: 0; font-style: normal; color: inherit; max-width: 32ch; text-wrap: balance; quotes: none; }
.bec-qc__quote::before, .bec-qc__quote::after { content: none; }
.bec-qc__person { display: flex; flex-direction: column; gap: 2px; font-style: normal; }
.bec-qc__name { font-weight: 500; color: inherit; text-decoration: none; }
a.bec-qc__name:hover { text-decoration: underline; }

/* navigation */
.bec-qc__nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: var(--bec-qc-nav-space); }
.bec-qc-nav-below-center .bec-qc__nav { justify-content: center; }
.bec-qc-nav-below-text .bec-qc__nav { padding-left: var(--bec-qc-nav-offset); }
.bec-qc-nav-sides .bec-qc__nav { justify-content: center; }
.bec-qc-nav-sides .bec-qc__prev, .bec-qc-nav-sides .bec-qc__next { position: absolute; top: calc(50% - var(--bec-qc-nav-space)); transform: translateY(-50%); z-index: 2; }
.bec-qc-nav-sides .bec-qc__prev { left: 0; }
.bec-qc-nav-sides .bec-qc__next { right: 0; }
.bec-qc-nav-sides .bec-qc__slides { padding-inline: 64px; }
/* arrangement: only the visual order changes; the reading order stays prev, next, pause, indicator */
.bec-qc-navl-between .bec-qc__prev { order: 1; }
.bec-qc-navl-between .bec-qc__dots, .bec-qc-navl-between .bec-qc__count { order: 2; margin-inline: 4px; }
.bec-qc-navl-between .bec-qc__next { order: 3; }
.bec-qc-navl-between .bec-qc__pause { order: 4; }
.bec-qc-navl-split .bec-qc__dots, .bec-qc-navl-split .bec-qc__count { margin-left: auto; }
.bec-qc-navl-split-reverse .bec-qc__dots, .bec-qc-navl-split-reverse .bec-qc__count { order: -1; margin-left: 0; margin-right: auto; }

.bec-qc .bec-qc__btn {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	font-size: 16px;
	line-height: 1;
	color: inherit;
	background: transparent;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.bec-qc .bec-qc__btn svg { width: 16px; height: 16px; fill: currentColor; }
.bec-qc .bec-qc__btn:hover { background-color: rgba(7, 61, 48, .1); }
.bec-qc .bec-qc__btn:focus-visible, .bec-qc .bec-qc__dot:focus-visible { outline: 3px solid #FF662F; outline-offset: 3px; }
.bec-qc .bec-qc__btn:disabled { opacity: .35; cursor: default; }
.bec-qc__pause-i { display: block; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.bec-qc__pause[aria-pressed="true"] .bec-qc__pause-i { width: 0; height: 0; border: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }

.bec-qc__dots { display: flex; align-items: center; gap: 8px; margin-left: 4px; color: inherit; }
.bec-qc .bec-qc__dot { position: relative; padding: 8px 0; margin: 0; background: none; border: 0; cursor: pointer; color: inherit; line-height: 0; }
.bec-qc .bec-qc__dot span { display: block; width: var(--bec-qc-dot); height: var(--bec-qc-dot); border-radius: 999px; border: 1.5px solid currentColor; transition: width .35s var(--bec-qc-ease), background-color .2s; }
.bec-qc .bec-qc__dot[aria-current="true"] span { background-color: currentColor; width: calc(var(--bec-qc-dot) * 2.8); }
/* bars with progress */
.bec-qc .bec-qc__dots.is-bars .bec-qc__dot span { width: calc(var(--bec-qc-dot) * 3.2); height: 3px; border: 0; border-radius: 2px; background-color: currentColor; opacity: .3; overflow: hidden; position: relative; }
.bec-qc .bec-qc__dots.is-bars .bec-qc__dot[aria-current="true"] span { opacity: 1; background-color: transparent; width: calc(var(--bec-qc-dot) * 3.2); }
.bec-qc .bec-qc__dots.is-bars .bec-qc__dot[aria-current="true"] span::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .3; }
.bec-qc .bec-qc__dots.is-bars .bec-qc__dot[aria-current="true"] span::after { content: ""; position: absolute; inset: 0; background: currentColor; transform-origin: 0 50%; transform: scaleX(1); }
.bec-qc.is-auto .bec-qc__dots.is-bars .bec-qc__dot[aria-current="true"] span::after { animation: bec-qc-progress var(--bec-qc-delay) linear forwards; }
.bec-qc.is-paused .bec-qc__dots.is-bars .bec-qc__dot[aria-current="true"] span::after { animation-play-state: paused; }
@keyframes bec-qc-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bec-qc__count { font-variant-numeric: tabular-nums; margin-left: 4px; }

@media (prefers-reduced-motion: reduce) {
	.bec-qc__slide, .bec-qc .bec-qc__dot span, .bec-qc .bec-qc__btn { transition: none !important; }
	.bec-qc__slide { transform: none !important; }
	.bec-qc .bec-qc__dots.is-bars span::after { animation: none !important; transform: scaleX(1); }
}

/* Neutralise theme button resets (e.g. Hello Elementor reset.css loads after this file) */
.bec-qc .bec-qc__btn, .bec-qc .bec-qc__dot {
	-webkit-appearance: none; appearance: none;
	font: inherit; letter-spacing: inherit; text-transform: none; text-decoration: none; text-shadow: none;
	box-shadow: none; white-space: nowrap;
}
.bec-qc .bec-qc__btn { display: inline-grid; color: inherit; }
.bec-qc :where(.bec-qc__btn):focus { color: inherit; background-color: transparent; }
.bec-qc .bec-qc__dot { display: inline-block; background: none; border: 0; color: inherit; border-radius: 0; }
.bec-qc :where(.bec-qc__dot):hover, .bec-qc :where(.bec-qc__dot):focus { background: none; color: inherit; }
/* the theme turns hovered buttons white and figcaptions grey italic; keep the widget colours unless set in Elementor */
/* arrow colours come from variables set in Elementor; the high specificity keeps the theme's button:hover/:focus from repainting them */
.bec-qc button.bec-qc__btn, .bec-qc button.bec-qc__btn:focus { color: var(--bec-qc-arrow-c, inherit); background-color: var(--bec-qc-arrow-bg, transparent); border-color: var(--bec-qc-arrow-bd, currentColor); }
.bec-qc button.bec-qc__btn:hover { color: var(--bec-qc-arrow-c-h, var(--bec-qc-arrow-c, inherit)); background-color: var(--bec-qc-arrow-bg-h, var(--bec-qc-arrow-bg, rgba(7, 61, 48, .1))); border-color: var(--bec-qc-arrow-bd-h, var(--bec-qc-arrow-bd, currentColor)); }
.bec-qc button.bec-qc__btn:disabled { background-color: var(--bec-qc-arrow-bg, transparent); }
.bec-qc button.bec-qc__dot, .bec-qc button.bec-qc__dot:hover, .bec-qc button.bec-qc__dot:focus { color: inherit; background: none; }
.bec-qc button.bec-qc__dot[aria-current="true"], .bec-qc button.bec-qc__dot[aria-current="true"]:hover, .bec-qc button.bec-qc__dot[aria-current="true"]:focus { color: var(--bec-qc-dot-on, inherit); }
.bec-qc .bec-qc__person { color: inherit; font-size: inherit; font-style: normal; font-weight: inherit; line-height: inherit; }
.bec-qc :where(a.bec-qc__name), .bec-qc :where(a.bec-qc__name):hover, .bec-qc :where(a.bec-qc__name):focus { color: inherit; }
.bec-qc .bec-qc__btn:focus:not(:focus-visible), .bec-qc .bec-qc__dot:focus:not(:focus-visible) { outline: none; }
