/**
 * Business About — frontend styles
 *
 * A heading and text on the left, images or a video on the right. Self-contained:
 * it sets its own box-sizing so it renders the same in any theme. Per-instance
 * variables are supplied inline on the .business-about element; everything here
 * has a sensible fallback.
 */

.business-about {
	--ba-accent: #e07a3f;
	--ba-heading: #0a2540;
	--ba-body: #4a5568;
	--ba-radius: 18px;
	--ba-social-size: 44px;
	--ba-button-size: 44px;
	--ba-heading-size: 42px;
	--ba-heading-ls: -0.5px;
	--ba-body-size: 17px;
	--ba-body-ls: 0px;

	width: 100%;
	margin: 0;
}

.business-about,
.business-about *,
.business-about *::before,
.business-about *::after {
	box-sizing: border-box;
}

.business-about__inner {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 3rem);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}

.business-about--no-image .business-about__inner {
	grid-template-columns: 1fr;
	max-width: 760px;
}

/* --- Content (left) --------------------------------------------------- */
.business-about__heading {
	margin: 0 0 1.35rem;
	font-family: var(--ba-font-heading, inherit);
	font-size: min(var(--ba-heading-size, 2.6rem), 10.5vw);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: var(--ba-heading-ls, -0.5px);
	color: var(--ba-heading);
	text-wrap: balance;
}
.business-about__heading::after {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	margin-top: 1rem;
	background: var(--ba-accent);
	border-radius: 3px;
}

.business-about__body {
	font-family: var(--ba-font-body, inherit);
	font-size: min(var(--ba-body-size, 1.0625rem), 4.8vw);
	line-height: 1.75;
	letter-spacing: var(--ba-body-ls, normal);
	color: var(--ba-body);
}
.business-about__body p { margin: 0 0 1.1rem; }
.business-about__body p:last-child { margin-bottom: 0; }

/* --- Actions row (icons + button on one line) ------------------------- */
.business-about__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.1rem;
	margin-top: 1.85rem;
}
.business-about__actions--btn-left .business-about__cta { order: -1; }

/* --- Social icons ----------------------------------------------------- */
/* A perfect circle with the glyph centred, at any style or size. The hover
   effect changes colour and shadow only and never moves the element's box,
   so the icons cannot flicker or "vibrate" when the pointer is over them. */
.business-about__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.business-about__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--ba-social-size, 44px);
	height: var(--ba-social-size, 44px);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	line-height: 0;
	text-decoration: none !important;
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
/* Keep the icon perfectly still on hover. Themes lift links on hover in many
   ways: the classic "transform: translateY(...)", the newer independent
   "translate:"/"scale:"/"rotate:" properties, keyframe animations, or top/left
   offsets — sometimes with !important, sometimes on a nested element or a
   glyph pseudo-element. We neutralise every one of those vectors on the link
   itself, and freeze movement on all descendants (and their ::before/::after)
   in the hover/focus/active states. Hover feedback is colour and shadow only. */
.business-about .business-about__socials a.business-about__social,
.business-about .business-about__socials a.business-about__social:hover,
.business-about .business-about__socials a.business-about__social:focus,
.business-about .business-about__socials a.business-about__social:active,
.business-about .business-about__socials a.business-about__social:focus-visible {
	transform: none !important;
	translate: none !important;
	scale: none !important;
	rotate: none !important;
	animation: none !important;
	transition-property: background-color, color, box-shadow !important;
	inset: auto !important;
	margin: 0 !important;
}
.business-about .business-about__socials a.business-about__social:hover *,
.business-about .business-about__socials a.business-about__social:focus *,
.business-about .business-about__socials a.business-about__social:active *,
.business-about .business-about__socials a.business-about__social:hover *::before,
.business-about .business-about__socials a.business-about__social:hover *::after,
.business-about .business-about__socials a.business-about__social:focus *::before,
.business-about .business-about__socials a.business-about__social:focus *::after {
	transform: none !important;
	translate: none !important;
	scale: none !important;
	rotate: none !important;
	animation: none !important;
}
/* The glyph itself never receives the pointer, so the hover target is always
   the circle. This stops the on/off flicker (and the "wiggle" it causes) on
   brand icons such as Instagram, TikTok, and LinkedIn whose glyph fills more of
   its box and a tiny shift would otherwise toggle the hover state. */
.business-about__social svg,
.business-about__social i,
.business-about__social .svg-inline--fa {
	pointer-events: none !important;
}
.business-about__social svg {
	display: block;
	width: 44%;
	height: 44%;
	fill: currentColor;
}
/* Lock the Font Awesome inline SVG so differing brand aspect ratios cannot
   nudge the layout on hover. */
.business-about__social .svg-inline--fa {
	width: 44%;
	height: 44%;
	vertical-align: middle;
}
.business-about__social i {
	font-size: calc(var(--ba-social-size, 44px) * 0.44);
	line-height: 1;
}
.business-about__social:focus-visible {
	outline: 3px solid var(--ba-accent);
	outline-offset: 3px;
}

/* Soft tint (default) */
.business-about__socials--soft .business-about__social {
	background: color-mix(in srgb, var(--ba-social, var(--ba-heading)) 9%, transparent);
	color: var(--ba-social, var(--ba-heading));
}
.business-about__socials--soft .business-about__social:hover,
.business-about__socials--soft .business-about__social:focus-visible {
	background: var(--ba-accent);
	color: #fff;
	box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--ba-accent) 80%, #000);
}

/* Solid */
.business-about__socials--solid .business-about__social {
	background: var(--ba-social, var(--ba-accent));
	color: #fff;
}
.business-about__socials--solid .business-about__social:hover,
.business-about__socials--solid .business-about__social:focus-visible {
	background: color-mix(in srgb, var(--ba-social, var(--ba-accent)) 88%, #fff);
	box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--ba-social, var(--ba-accent)) 80%, #000);
}

/* Outline */
.business-about__socials--outline .business-about__social {
	background: transparent;
	color: var(--ba-social, var(--ba-heading));
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ba-social, var(--ba-heading)) 32%, transparent);
}
.business-about__socials--outline .business-about__social:hover,
.business-about__socials--outline .business-about__social:focus-visible {
	background: var(--ba-accent);
	color: #fff;
	box-shadow: inset 0 0 0 2px var(--ba-accent);
}

/* Brand colours (per platform) */
.business-about__socials--brand .business-about__social {
	background: var(--ba-brand, #333);
	color: #fff;
}
.business-about__socials--brand .business-about__social:hover,
.business-about__socials--brand .business-about__social:focus-visible {
	background: color-mix(in srgb, var(--ba-brand, #333) 90%, #fff);
	box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.5);
}

/* Minimal (no fill, larger glyph) */
.business-about__socials--minimal .business-about__social {
	background: transparent;
	color: var(--ba-social, var(--ba-heading));
}
.business-about__socials--minimal .business-about__social svg {
	width: 66%;
	height: 66%;
}
.business-about__socials--minimal .business-about__social i {
	font-size: calc(var(--ba-social-size, 44px) * 0.62);
}
.business-about__socials--minimal .business-about__social:hover,
.business-about__socials--minimal .business-about__social:focus-visible {
	color: var(--ba-accent);
}

/* --- Call-to-action button -------------------------------------------- */
/* Height tracks the button size variable so it sits level with the icons.
   Hover changes colour and shadow only; no box movement, so no jitter. */
.business-about__cta {
	/* Master colour and the optional outline width (0 = no outline unless a
	   border colour is set). Individual styles read the bg/text/border vars. */
	--ba-btn: var(--ba-button, var(--ba-accent));
	--ba-bborder-w: 0px;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	height: var(--ba-button-size, 44px);
	padding: 0 calc(var(--ba-button-size, 44px) * 0.42);
	font-family: var(--ba-font-body, inherit);
	font-size: clamp(14px, calc(var(--ba-button-size, 44px) * 0.34), 19px);
	font-weight: 600;
	line-height: 1;
	border-radius: 999px;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.business-about__cta,
.business-about__cta:hover,
.business-about__cta:focus,
.business-about__cta:active,
.business-about__cta:focus-visible {
	transform: none !important;
}
.business-about__cta-arrow {
	width: 1.1em;
	height: 1.1em;
	flex: 0 0 auto;
	transition: transform 0.18s ease;
}
.business-about__cta:hover .business-about__cta-arrow,
.business-about__cta:focus-visible .business-about__cta-arrow {
	transform: translateX(3px);
}
.business-about__cta:focus-visible {
	outline: 3px solid var(--ba-accent);
	outline-offset: 3px;
}

/* Solid */
.business-about__cta--solid {
	background: var(--ba-button-bg, var(--ba-btn));
	color: var(--ba-button-text, #fff);
	box-shadow:
		0 12px 24px -14px color-mix(in srgb, var(--ba-button-bg, var(--ba-btn)) 85%, #000),
		inset 0 0 0 var(--ba-bborder-w, 0px) var(--ba-button-border, transparent);
}
.business-about__cta--solid:hover,
.business-about__cta--solid:focus-visible {
	color: var(--ba-button-text, #fff);
	filter: brightness(1.05);
	box-shadow:
		0 16px 30px -14px color-mix(in srgb, var(--ba-button-bg, var(--ba-btn)) 85%, #000),
		inset 0 0 0 var(--ba-bborder-w, 0px) var(--ba-button-border, transparent);
}

/* Outline */
.business-about__cta--outline {
	background: var(--ba-button-bg, transparent);
	color: var(--ba-button-text, var(--ba-button-border, var(--ba-btn)));
	box-shadow: inset 0 0 0 2px var(--ba-button-border, var(--ba-btn));
}
.business-about__cta--outline:hover,
.business-about__cta--outline:focus-visible {
	background: var(--ba-button-border, var(--ba-btn));
	color: var(--ba-button-text, #fff);
	box-shadow: inset 0 0 0 2px var(--ba-button-border, var(--ba-btn));
}

/* Soft */
.business-about__cta--soft {
	background: var(--ba-button-bg, color-mix(in srgb, var(--ba-btn) 14%, transparent));
	color: var(--ba-button-text, var(--ba-btn));
	box-shadow: inset 0 0 0 var(--ba-bborder-w, 0px) var(--ba-button-border, transparent);
}
.business-about__cta--soft:hover,
.business-about__cta--soft:focus-visible {
	filter: brightness(0.96);
}

/* Underlined text (no box) */
.business-about__cta--underline {
	background: transparent;
	padding: 0;
	border-radius: 0;
	color: var(--ba-button-text, var(--ba-btn));
}
.business-about__cta--underline .business-about__cta-label {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}
.business-about__cta--underline:hover,
.business-about__cta--underline:focus-visible {
	color: var(--ba-button-text, var(--ba-btn));
	filter: brightness(1.08);
}
.business-about__cta--underline:hover .business-about__cta-label,
.business-about__cta--underline:focus-visible .business-about__cta-label {
	text-decoration-thickness: 3px;
}

/* --- Media (right) ---------------------------------------------------- */
.business-about__media {
	position: relative;
	isolation: isolate;
}
.business-about__frame {
	position: relative;
	width: 100%;
}
.business-about__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--ba-radius);
	box-shadow: 0 30px 60px -32px rgba(10, 37, 64, 0.5);
}

/* Media label badge. */
.business-about__label {
	position: absolute;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	max-width: calc(100% - 1.4rem);
	padding: 0.4rem 0.75rem;
	font-family: var(--ba-font-body, inherit);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	background: var(--ba-accent);
	border-radius: 999px;
	box-shadow: 0 8px 20px -10px rgba(10, 37, 64, 0.7);
}
.business-about__label--top-left     { top: 0.9rem; left: 0.9rem; }
.business-about__label--top-right    { top: 0.9rem; right: 0.9rem; }
.business-about__label--bottom-left  { bottom: 0.9rem; left: 0.9rem; }
.business-about__label--bottom-right { bottom: 0.9rem; right: 0.9rem; }
.business-about__label--on-secondary { left: 0.6rem; bottom: 0.6rem; }
/* Below the image: not overlaid, flows underneath. */
.business-about__label--below {
	position: static;
	max-width: 100%;
	margin-top: 0.85rem;
}
/* Text-only style: drop the pill entirely, just the words. */
.business-about__label--style-text {
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
}
/* Overlaid on the photo, text needs contrast. */
.business-about__label--style-text:not(.business-about__label--below) {
	color: #fff;
	text-shadow: 0 1px 3px rgba(10, 37, 64, 0.85), 0 0 1px rgba(0, 0, 0, 0.6);
}
/* Underneath the image, text uses the heading colour. */
.business-about__label--below.business-about__label--style-text {
	color: var(--ba-heading);
	font-size: 0.9rem;
}
.business-about__label-pin {
	width: 0.9rem;
	height: 0.9rem;
	flex: 0 0 auto;
}
.business-about__label span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Second image: a small card overlapping the corner. The label can sit on it. */
.business-about__media--stacked { padding-bottom: 2.5rem; padding-right: 2.5rem; }
.business-about__secondary {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	width: 48%;
}
.business-about__image--secondary {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 6px solid #fff;
	border-radius: var(--ba-radius);
	box-shadow: 0 18px 40px -18px rgba(10, 37, 64, 0.55);
}

/* --- Video: poster + play button, opens a lightbox -------------------- */
.business-about__media--video .business-about__frame {
	border-radius: var(--ba-radius);
	overflow: hidden;
	box-shadow: 0 30px 60px -32px rgba(10, 37, 64, 0.5);
}
/* Ratio classes are scoped to the video frame so they keep enough specificity
   to actually win over the base rule above. The frame always carries one. */
.business-about__media--video .business-about__frame--r16-9 { aspect-ratio: 16 / 9; }
.business-about__media--video .business-about__frame--r4-3  { aspect-ratio: 4 / 3; }
.business-about__media--video .business-about__frame--r1-1  { aspect-ratio: 1 / 1; }
.business-about__media--video .business-about__frame--r4-5  { aspect-ratio: 4 / 5; }

/* Optional: no drop shadow behind the poster. */
.business-about__media--video .business-about__frame--flat { box-shadow: none; }

.business-about__video-trigger {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: #0a2540;
	overflow: hidden;
}
.business-about__video-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease, filter 0.3s ease;
}
.business-about__video-poster--empty {
	display: block;
	background: linear-gradient(135deg, var(--ba-accent), color-mix(in srgb, var(--ba-accent) 50%, #0a2540));
}
.business-about__video-trigger:hover .business-about__video-poster {
	transform: scale(1.04);
	filter: brightness(0.92);
}

/* Frosted-glass play button: a translucent disc that blurs the poster behind
   it, with a fine light edge and a larger triangle. Centred; hover scales the
   button only, so the click target never moves. */
.business-about__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	--ba-play-size: clamp(66px, 21%, 96px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ba-play-size);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	-webkit-backdrop-filter: blur(11px) saturate(150%);
	backdrop-filter: blur(11px) saturate(150%);
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	box-shadow:
		0 10px 34px -8px rgba(0, 0, 0, 0.5),
		inset 0 1px 1px rgba(255, 255, 255, 0.65),
		inset 0 -8px 18px -10px rgba(0, 0, 0, 0.35);
	transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.business-about__play svg {
	width: 58%;
	height: 58%;
	margin-left: 7%;
	fill: currentColor;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.business-about__play i {
	font-size: calc(var(--ba-play-size) * 0.5);
	line-height: 1;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
/* Where backdrop blur is unsupported, fall back to a more opaque frost so the
   button stays legible. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.business-about__play { background: rgba(20, 30, 48, 0.55); }
}
/* Optional animated play button: a soft ring that pulses outward. It rides on
   a pseudo-element ring (box-shadow only), so it never shifts the layout or the
   click target. The ring sits behind the button face. */
.business-about__play--animated::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
	animation: ba-play-pulse 2.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes ba-play-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
	70%  { box-shadow: 0 0 0 22px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.business-about__video-trigger:hover .business-about__play,
.business-about__video-trigger:focus-visible .business-about__play {
	transform: translate(-50%, -50%) scale(1.07);
	background: rgba(255, 255, 255, 0.28);
}
.business-about__video-trigger:focus-visible {
	outline: 3px solid var(--ba-accent);
	outline-offset: 3px;
}

/* --- Lightbox --------------------------------------------------------- */
.business-about__lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s ease, visibility 0.22s ease;
}
.business-about__lightbox.is-open {
	opacity: 1;
	visibility: visible;
}
.business-about__lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 15, 30, 0.82);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.business-about__lightbox-dialog {
	position: relative;
	width: min(1080px, 92vw);
	transform: scale(0.96);
	transition: transform 0.22s ease;
}
.business-about__lightbox.is-open .business-about__lightbox-dialog {
	transform: scale(1);
}
.business-about__lightbox-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 84vh;
	background: #000;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.85);
}
.business-about__lightbox-stage iframe,
.business-about__lightbox-stage video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}
.business-about__lightbox-close {
	position: absolute;
	top: -3rem;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.18s ease;
}
.business-about__lightbox-close svg { width: 1.25rem; height: 1.25rem; }
.business-about__lightbox-close:hover,
.business-about__lightbox-close:focus-visible { background: rgba(255, 255, 255, 0.28); }
@media (max-width: 600px) {
	.business-about__lightbox-close { top: -2.9rem; right: 50%; transform: translateX(50%); }
}

/* --- Tablet: stack to one column, media first ------------------------- */
@media (max-width: 860px) {
	.business-about__inner {
		grid-template-columns: 1fr;
		gap: clamp(2rem, 7vw, 3rem);
	}
	.business-about__media {
		order: 1;
		width: 100%;
		max-width: 440px;
		margin: 0 auto;
	}
	.business-about__media--video { max-width: 620px; }
	.business-about__content { order: 2; }
}

/* --- Phone: one clean image ------------------------------------------- */
@media (max-width: 540px) {
	.business-about__media--stacked { padding-bottom: 0; padding-right: 0; }
	.business-about__secondary { display: none; }
	.business-about__image { aspect-ratio: 16 / 11; }
	.business-about__media { max-width: 100%; }
}

/* --- Older browsers without color-mix --------------------------------- */
@supports not (background: color-mix(in srgb, red, blue)) {
	.business-about__socials--soft .business-about__social { background: rgba(10, 37, 64, 0.08); }
	.business-about__socials--outline .business-about__social { box-shadow: inset 0 0 0 2px rgba(10, 37, 64, 0.32); }
	.business-about__cta--solid { box-shadow: 0 12px 24px -14px rgba(10, 37, 64, 0.6); }
	.business-about__cta--soft { background: rgba(224, 122, 63, 0.14); }
	.business-about__video-poster--empty { background: linear-gradient(135deg, #e07a3f, #15324d); }
}

@media (prefers-reduced-motion: reduce) {
	.business-about__social,
	.business-about__social svg,
	.business-about__cta,
	.business-about__cta-arrow,
	.business-about__video-poster,
	.business-about__play,
	.business-about__lightbox,
	.business-about__lightbox-dialog { transition: none; }
	.business-about__play--animated::before { animation: none; }
}