/* ==========================================================================
   Components - loaded after style.css, uses the same design tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Sticky header + navigation
   -------------------------------------------------------------------------- */

.site-header {


	z-index: 200;
	background: rgba(10, 12, 16, 0.86);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--ad-line, rgba(255,255,255,0.08));
	transition: background 0.25s ease, box-shadow 0.25s ease;
}

.site-header .header-inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.site-header .site-branding img,
.site-header .custom-logo-link img {
	max-height: 46px;
	width: auto;
}

.site-header .site-title a {
	color: var(--ad-text, #F4F7FA);
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: -0.01em;
}

/* Menu */
.site-header .site-navigation ul,
.site-header .menu {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.site-header .site-navigation li,
.site-header .menu li { margin: 0; }

.site-header .site-navigation a,
.site-header .menu a {
	display: inline-block;
	padding: 9px 14px;
	border-radius: 8px;
	color: var(--ad-muted, #9AA7B4);
	font-size: 0.93rem;
	font-weight: 500;
	transition: color 0.18s ease, background 0.18s ease;
}

.site-header .site-navigation a:hover,
.site-header .menu a:hover {
	color: var(--ad-text, #F4F7FA);
	background: rgba(255, 255, 255, 0.06);
}

.site-header .current-menu-item > a {
	color: var(--ad-accent, #C1121F);
}

/* Mobile toggle (Hello Elementor markup) */
.site-header .site-navigation-toggle {
	color: var(--ad-text, #F4F7FA);
	background: transparent;
	border: 1px solid var(--ad-line-strong, rgba(255,255,255,0.16));
	border-radius: 8px;
}

.site-header .site-navigation-dropdown {
	background: #0F131A;
	border-top: 1px solid var(--ad-line, rgba(255,255,255,0.08));
}

.site-header .site-navigation-dropdown a { color: var(--ad-text, #F4F7FA); }

@media (max-width: 767px) {
	.site-header .header-inner { padding: 12px 16px; }
	.site-header .site-branding img { max-height: 38px; }
}

/* --------------------------------------------------------------------------
   2. Before / after comparison
   -------------------------------------------------------------------------- */

.ad-compare {
	--ad-compare-pos: 50%;
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--ad-radius, 14px);
	border: 1px solid var(--ad-line, rgba(255,255,255,0.08));
	background: #0F1318;
	touch-action: pan-y;
	user-select: none;
	line-height: 0;
	cursor: ew-resize;
}

.ad-compare__base,
.ad-compare__reveal img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
}

.ad-compare__reveal {
	position: absolute;
	inset: 0 auto 0 0;
	width: 50%;
	overflow: hidden;
	will-change: width;
}

/* Inner image must stay the full component width so it does not squash */
.ad-compare__reveal img {
	width: var(--ad-compare-width, 100%);
	max-width: none;
}

/* Divider line */
.ad-compare__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: var(--ad-accent, #C1121F);
	pointer-events: none;
	z-index: 3;
}

.ad-compare__handle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 42px;
	height: 42px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--ad-accent, #C1121F);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* The real control - visually hidden but fully operable */
.ad-compare__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	z-index: 4;
}

.ad-compare__range:focus-visible + .ad-compare__handle::after {
	outline: 3px solid #FFFFFF;
	outline-offset: 3px;
}

/* Corner labels */
.ad-compare__tag {
	position: absolute;
	bottom: 14px;
	z-index: 2;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	background: rgba(10, 12, 16, 0.72);
	backdrop-filter: blur(6px);
	border: 1px solid var(--ad-line, rgba(255,255,255,0.08));
}

.ad-compare__tag--before { left: 14px;  color: var(--ad-muted, #9AA7B4); }
.ad-compare__tag--after  { right: 14px; color: var(--ad-accent, #C1121F); }

/* --------------------------------------------------------------------------
   3. Review cards
   -------------------------------------------------------------------------- */

.ad-review {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--ad-surface, #141922);
	border: 1px solid var(--ad-line, rgba(255,255,255,0.08));
	border-radius: var(--ad-radius, 14px);
	padding: 26px;
	height: 100%;
	transition: transform 0.25s ease, border-color 0.25s ease;
}

.ad-review:hover {
	transform: translateY(-4px);
	border-color: var(--ad-line-strong, rgba(255,255,255,0.16));
}

.ad-review__stars {
	color: var(--ad-accent, #C1121F);
	font-size: 1rem;
	letter-spacing: 0.14em;
	line-height: 1;
}

.ad-review__text {
	color: var(--ad-muted, #9AA7B4);
	font-size: 0.97rem;
	line-height: 1.7;
	margin: 0;
	flex: 1;
}

.ad-review__who {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 4px;
	border-top: 1px solid var(--ad-line, rgba(255,255,255,0.08));
	margin-top: 4px;
}

.ad-review__avatar {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(193, 18, 31, 0.16);
	color: var(--ad-accent, #C1121F);
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1;
	margin-top: 12px;
}

.ad-review__name {
	color: var(--ad-text, #F4F7FA);
	font-weight: 600;
	font-size: 0.95rem;
	margin: 12px 0 0;
	line-height: 1.3;
}

.ad-review__meta {
	color: var(--ad-dim, #6B7885);
	font-size: 0.82rem;
	margin: 2px 0 0;
	line-height: 1.3;
}

/* --------------------------------------------------------------------------
   4. Service media tiles
   -------------------------------------------------------------------------- */

.ad-service-media {
	position: relative;
	border-radius: var(--ad-radius, 14px);
	overflow: hidden;
	border: 1px solid var(--ad-line, rgba(255,255,255,0.08));
	background: #10151B;
	aspect-ratio: 16 / 10;
	display: grid;
	place-items: center;
}

.ad-service-media img { width: 100%; height: 100%; object-fit: cover; }

/* Dashed slot shown until a real photo is uploaded */
.ad-photo-slot {
	border: 2px dashed rgba(255, 255, 255, 0.14);
	border-radius: var(--ad-radius, 14px);
	background: var(--ad-surface-2, #1C232E);
	min-height: 220px;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 24px;
	color: var(--ad-dim, #6B7885);
	font-size: 0.92rem;
}

/* --------------------------------------------------------------------------
   5. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ad-review:hover { transform: none; }
	.ad-compare__reveal { will-change: auto; }
}

/* --------------------------------------------------------------------------
   Interior page hero.
   Set here rather than via Elementor's background_image, which expects a
   media-library attachment and silently ignores a bare URL.
   -------------------------------------------------------------------------- */

.ad-page-hero,
.elementor-element-abHero {
	background-color: var(--ad-on-accent, #FFFFFF);
	background-image:
		linear-gradient(180deg, rgba(10, 12, 16, 0.68) 0%, rgba(10, 12, 16, 0.90) 100%),
		url("slide-coating.svg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* ==========================================================================
   Products page
   ========================================================================== */

.ad-prod {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	padding: 28px 26px;
	background: var(--ad-bg, #0A0C10);
	border: 1px solid var(--ad-line, rgba(255,255,255,0.08));
	border-radius: var(--ad-radius, 14px);
	transition: transform 0.25s ease, border-color 0.25s ease;
}

.ad-prod:hover {
	transform: translateY(-4px);
	border-color: var(--ad-line-strong, rgba(255,255,255,0.16));
}

.ad-prod--featured {
	border-color: rgba(193, 18, 31, 0.45);
	box-shadow: 0 0 0 1px rgba(193, 18, 31, 0.16);
}

.ad-prod__tag {
	align-self: flex-start;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(193, 18, 31, 0.14);
	color: var(--ad-accent, #C1121F);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
}

.ad-prod__name {
	margin: 4px 0 0;
	font-size: 1.32rem;
	font-weight: 700;
	color: var(--ad-text, #F4F7FA);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.ad-prod__who {
	margin: 0;
	font-size: 0.93rem;
	font-weight: 600;
	color: var(--ad-accent, #C1121F);
	line-height: 1.5;
}

.ad-prod__body {
	margin: 0;
	font-size: 0.95rem;
	color: var(--ad-muted, #9AA7B4);
	line-height: 1.7;
	flex: 1;
}

/* Spec rows */
.ad-spec-list {
	list-style: none;
	margin: 6px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--ad-line, rgba(255,255,255,0.08));
}

.ad-spec {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 7px 0;
	font-size: 0.88rem;
	line-height: 1.5;
}

.ad-spec__k { color: var(--ad-dim, #6B7885); }

.ad-spec__v {
	color: var(--ad-text, #F4F7FA);
	font-weight: 600;
	text-align: right;
}

.ad-prod__cta {
	margin-top: 10px;
	padding: 12px 18px;
	border-radius: var(--ad-radius-sm, 8px);
	border: 1px solid var(--ad-line-strong, rgba(255,255,255,0.16));
	color: var(--ad-text, #F4F7FA);
	font-size: 0.9rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.ad-prod__cta:hover {
	border-color: var(--ad-accent, #C1121F);
	color: var(--ad-accent, #C1121F);
	background: rgba(193, 18, 31, 0.06);
}

/* --------------------------------------------------------- choosing guide */

.ad-choose {
	border: 1px solid var(--ad-line, rgba(255,255,255,0.08));
	border-radius: var(--ad-radius, 14px);
	overflow: hidden;
	background: var(--ad-bg, #0A0C10);
}

.ad-choose__row {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--ad-line, rgba(255,255,255,0.08));
}

.ad-choose__row:last-child { border-bottom: 0; }

.ad-choose__q {
	flex: 1 1 55%;
	color: var(--ad-muted, #9AA7B4);
	font-size: 0.97rem;
	line-height: 1.6;
}

.ad-choose__a {
	flex: 1 1 45%;
	color: var(--ad-text, #F4F7FA);
	font-size: 0.97rem;
	font-weight: 600;
	line-height: 1.6;
}

.ad-choose__a::before {
	content: "\2192";
	color: var(--ad-accent, #C1121F);
	margin-right: 9px;
	font-weight: 400;
}

/* ------------------------------------------------------------- mobile */

@media (max-width: 767px) {

	.ad-prod {
		padding: 22px 20px;
	}

	.ad-prod__name { font-size: 1.2rem; }

	/* Question above answer, so neither is squeezed into a narrow column */
	.ad-choose__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		padding: 16px 18px;
	}

	.ad-choose__q,
	.ad-choose__a {
		flex: 1 1 100%;
		font-size: 0.93rem;
	}

	.ad-spec {
		font-size: 0.85rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ad-prod:hover { transform: none; }
}

/* ==========================================================================
   Facebook page embed
   ========================================================================== */

.ad-fb {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* The plugin renders at a fixed pixel width; cap and centre it so it never
   forces horizontal scroll on a narrow screen. */
.ad-fb iframe {
	width: 100% !important;
	max-width: 500px;
	border: 0;
	border-radius: var(--ad-radius, 14px);
	overflow: hidden;
	background: #FFFFFF;
}

.ad-fb__fallback {
	color: var(--ad-muted, #9AA7B4);
	text-align: center;
}

/* ------------------------------------------------------------- follow card */

.ad-fbcta {
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 30px;
	background: var(--ad-surface, #141922);
	border: 1px solid var(--ad-line, rgba(255,255,255,0.08));
	border-radius: var(--ad-radius, 14px);
}

.ad-fbcta__icon {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(24, 119, 242, 0.14);
	color: #4C90F5;
}

.ad-fbcta__icon svg { width: 32px; height: 32px; }

.ad-fbcta__body { flex: 1 1 auto; min-width: 0; }

.ad-fbcta__title {
	margin: 0 0 6px;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--ad-text, #F4F7FA);
	line-height: 1.3;
}

.ad-fbcta__text {
	margin: 0;
	font-size: 0.95rem;
	color: var(--ad-muted, #9AA7B4);
	line-height: 1.7;
}

.ad-fbcta__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 0 0 auto;
}

.ad-fbcta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 22px;
	border-radius: var(--ad-radius-sm, 8px);
	border: 1px solid var(--ad-line-strong, rgba(255,255,255,0.16));
	color: var(--ad-text, #F4F7FA);
	font-size: 0.92rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ad-fbcta__btn:hover {
	border-color: var(--ad-accent, #C1121F);
	color: var(--ad-accent, #C1121F);
}

.ad-fbcta__btn--primary {
	background: #1877F2;
	border-color: #1877F2;
	color: #FFFFFF;
}

.ad-fbcta__btn--primary:hover {
	background: #3B8BF5;
	border-color: #3B8BF5;
	color: #FFFFFF;
}

@media (max-width: 900px) {
	.ad-fbcta {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		padding: 24px 20px;
	}

	.ad-fbcta__actions {
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
	}

	.ad-fbcta__btn {
		flex: 1 1 auto;
	}
}

@media (max-width: 480px) {
	.ad-fbcta__actions { flex-direction: column; }
	.ad-fbcta__btn { width: 100%; }
}

/* ==========================================================================
   Photo grid + lightbox + video cards
   ========================================================================== */

.ad-gal {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
	width: 100%;
}

.ad-gal__item {
	position: relative;
	display: block;
	padding: 0;
	border: 1px solid var(--ad-line, rgba(255,255,255,0.08));
	border-radius: var(--ad-radius-sm, 8px);
	overflow: hidden;
	background: #10151B;
	cursor: zoom-in;
	aspect-ratio: 4 / 3;
	transition: transform 0.22s ease, border-color 0.22s ease;
}

.ad-gal__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.ad-gal__item:hover { border-color: var(--ad-accent, #C1121F); }
.ad-gal__item:hover img { transform: scale(1.05); }

.ad-gal__item:focus-visible {
	outline: 3px solid var(--ad-accent, #C1121F);
	outline-offset: 2px;
}

/* --------------------------------------------------------------- lightbox */

.ad-lb {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 30px 60px;
	background: rgba(6, 8, 11, 0.94);
	backdrop-filter: blur(6px);
}

.ad-lb__figure {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.ad-lb__img {
	max-width: 100%;
	max-height: 78vh;
	object-fit: contain;
	border-radius: var(--ad-radius-sm, 8px);
}

.ad-lb__cap {
	color: var(--ad-muted, #9AA7B4);
	font-size: 0.92rem;
	text-align: center;
	max-width: 60ch;
	line-height: 1.6;
}

.ad-lb__close,
.ad-lb__nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: #F4F7FA;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.ad-lb__close:hover,
.ad-lb__nav:hover {
	background: var(--ad-accent, #C1121F);
	border-color: var(--ad-accent, #C1121F);
	color: var(--ad-on-accent, #FFFFFF);
}

.ad-lb__close { top: 20px; right: 20px; font-size: 1.9rem; }
.ad-lb__prev  { left: 16px; }
.ad-lb__next  { right: 16px; }

.ad-lb__close:focus-visible,
.ad-lb__nav:focus-visible {
	outline: 3px solid var(--ad-accent, #C1121F);
	outline-offset: 3px;
}

/* ------------------------------------------------------------ video cards */

.ad-vid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
	width: 100%;
}

.ad-vid__item {
	position: relative;
	display: block;
	border-radius: var(--ad-radius, 14px);
	overflow: hidden;
	border: 1px solid var(--ad-line, rgba(255,255,255,0.08));
	background: #10151B;
	aspect-ratio: 16 / 10;
	text-decoration: none;
	transition: transform 0.22s ease, border-color 0.22s ease;
}

.ad-vid__item:hover {
	transform: translateY(-3px);
	border-color: var(--ad-accent, #C1121F);
}

.ad-vid__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ad-vid__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(193, 18, 31, 0.92);
	color: var(--ad-on-accent, #FFFFFF);
}

.ad-vid__play svg { width: 30px; height: 30px; }

.ad-vid__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30px 14px 12px;
	background: linear-gradient(180deg, transparent, rgba(6, 8, 11, 0.92));
	color: #F4F7FA;
	font-size: 0.88rem;
	line-height: 1.45;
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 767px) {
	.ad-gal { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
	.ad-vid { grid-template-columns: 1fr; }
	.ad-lb  { padding: 16px; }
	.ad-lb__img { max-height: 68vh; }
	.ad-lb__prev { left: 8px; }
	.ad-lb__next { right: 8px; }
	.ad-lb__close { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.ad-gal__item:hover img,
	.ad-vid__item:hover { transform: none; }
}

/* ==========================================================================
   Media masonry - photos and videos in one grid
   CSS multi-column gives varied tile heights without a JS masonry library.
   ========================================================================== */

.ad-gal-head { margin-bottom: 26px; }

.ad-gal-head__eyebrow {
	margin: 0 0 10px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ad-accent, #C1121F);
}

.ad-gal-head__title {
	margin: 0 0 10px;
	font-size: clamp(1.7rem, 4vw, 2.4rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ad-text, #F4F7FA);
	line-height: 1.15;
}

.ad-gal-head__intro {
	margin: 0;
	max-width: 62ch;
	color: var(--ad-muted, #9AA7B4);
	font-size: 1rem;
	line-height: 1.7;
}

.ad-media {
	column-count: 4;
	column-gap: 14px;
	width: 100%;
}

.ad-media__item {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 0 14px;
	padding: 0;
	break-inside: avoid;
	border: 1px solid var(--ad-line, rgba(255,255,255,0.08));
	border-radius: var(--ad-radius-sm, 8px);
	overflow: hidden;
	background: #10151B;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.22s ease, border-color 0.22s ease;
}

.ad-media__item img {
	display: block;
	width: 100%;
	height: auto;
}

.ad-media__blank {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	background: linear-gradient(160deg, #1C232E, #10151B);
}

.ad-media__item:hover {
	transform: translateY(-3px);
	border-color: var(--ad-accent, #C1121F);
}

.ad-media__item:focus-visible {
	outline: 3px solid var(--ad-accent, #C1121F);
	outline-offset: 2px;
}

/* Play badge marks video tiles */
.ad-media__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 62px;
	height: 62px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ad-accent, #C1121F);
	color: var(--ad-on-accent, #FFFFFF);
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
	pointer-events: none;
	transition: transform 0.22s ease;
}

.ad-media__play svg { width: 32px; height: 32px; margin-left: 3px; }

.ad-media__item--video:hover .ad-media__play { transform: translate(-50%, -50%) scale(1.08); }

.ad-media__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 34px 13px 12px;
	background: linear-gradient(180deg, transparent, rgba(6, 8, 11, 0.94));
	color: #F4F7FA;
	font-size: 0.85rem;
	line-height: 1.45;
	text-align: left;
	pointer-events: none;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1200px) { .ad-media { column-count: 3; } }

@media (max-width: 767px) {
	.ad-media { column-count: 2; column-gap: 10px; }
	.ad-media__item { margin-bottom: 10px; }
	.ad-media__play { width: 48px; height: 48px; }
	.ad-media__play svg { width: 24px; height: 24px; }
	.ad-media__label { font-size: 0.76rem; padding: 26px 10px 9px; }
	.ad-gal-head { margin-bottom: 20px; }
}

@media (max-width: 380px) {
	.ad-media { column-count: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.ad-media__item:hover { transform: none; }
	.ad-media__item--video:hover .ad-media__play { transform: translate(-50%, -50%); }
}

/* ==========================================================================
   Page hero backgrounds
   Elementor discards programmatic custom classes, so these target the
   element-id class, which it always emits and which we control via the id.
   ========================================================================== */

.elementor-element-prHero {
	background-color: var(--ad-on-accent, #FFFFFF);
	background-image:
		linear-gradient(180deg, rgba(10, 12, 16, 0.70) 0%, rgba(10, 12, 16, 0.92) 100%),
		url("slide-ppf.svg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.elementor-element-gHero {
	background-color: var(--ad-on-accent, #FFFFFF);
	background-image:
		linear-gradient(180deg, rgba(10, 12, 16, 0.70) 0%, rgba(10, 12, 16, 0.92) 100%),
		url("slide-detailing.svg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.elementor-element-cHead {
	background-color: var(--ad-on-accent, #FFFFFF);
	background-image:
		linear-gradient(180deg, rgba(10, 12, 16, 0.74) 0%, rgba(10, 12, 16, 0.94) 100%),
		url("slide-glass.svg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* ==========================================================================
   Service cards with artwork
   ========================================================================== */

.ad-svc {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ad-surface, #141922);
	border: 1px solid var(--ad-line, rgba(255,255,255,0.08));
	border-radius: var(--ad-radius, 14px);
	overflow: hidden;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.ad-svc:hover {
	transform: translateY(-4px);
	border-color: var(--ad-line-strong, rgba(255,255,255,0.16));
	box-shadow: var(--ad-shadow, 0 10px 30px rgba(0,0,0,0.45));
}

.ad-svc__media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	border-bottom: 1px solid var(--ad-line, rgba(255,255,255,0.08));
}

.ad-svc__body {
	display: block;
	padding: 22px 24px 26px;
}

.ad-svc__title {
	display: block;
	margin-bottom: 8px;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--ad-text, #F4F7FA);
	letter-spacing: -0.015em;
	line-height: 1.3;
}

.ad-svc__text {
	display: block;
	font-size: 0.95rem;
	color: var(--ad-muted, #9AA7B4);
	line-height: 1.7;
}

/* Wide section banner */
.ad-banner {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 6;
	border-radius: var(--ad-radius, 14px);
	border: 1px solid var(--ad-line, rgba(255,255,255,0.08));
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

@media (max-width: 767px) {
	.ad-svc__body { padding: 18px 18px 22px; }
	.ad-svc__title { font-size: 1.1rem; }
	.ad-banner { aspect-ratio: 16 / 8; }
}

@media (prefers-reduced-motion: reduce) {
	.ad-svc:hover { transform: none; }
}

/* ==========================================================================
   Five-star review highlight
   ========================================================================== */

.ad-review { position: relative; }

.ad-review--top {
	border-color: rgba(193, 18, 31, 0.45);
	background:
		linear-gradient(180deg, rgba(193, 18, 31, 0.07), rgba(193, 18, 31, 0) 60%),
		var(--ad-surface, #141922);
	box-shadow: 0 0 0 1px rgba(193, 18, 31, 0.18);
}

.ad-review--top:hover {
	border-color: var(--ad-accent, #C1121F);
}

.ad-review--top .ad-review__stars {
	color: var(--ad-accent-hi, #E8323F);
	text-shadow: 0 0 14px rgba(232, 50, 63, 0.35);
}

.ad-review__badge {
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--ad-accent, #C1121F);
	color: var(--ad-on-accent, #FFFFFF);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	line-height: 1;
}

/* Keep the badge clear of the stars */
.ad-review--top .ad-review__stars { padding-right: 88px; }

/* ==========================================================================
   Social handles - icon plus the account name
   ========================================================================== */

.ad-handles__head {
	margin: 0 0 10px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ad-accent-hi, #E8323F);
}

.ad-handles {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ad-handles__item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 12px;
	border-radius: var(--ad-radius-sm, 8px);
	border: 1px solid var(--ad-line, rgba(255,255,255,0.08));
	background: var(--ad-bg, #0A0C10);
	text-decoration: none;
	transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.ad-handles__item:hover {
	border-color: var(--ad-accent, #C1121F);
	background: rgba(193, 18, 31, 0.06);
	transform: translateX(2px);
}

.ad-handles__item:focus-visible {
	outline: 2px solid var(--ad-accent-hi, #E8323F);
	outline-offset: 2px;
}

.ad-handles__icon {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	color: var(--ad-muted, #9AA7B4);
	transition: color 0.18s ease, background 0.18s ease;
}

.ad-handles__icon svg { width: 15px; height: 15px; }

.ad-handles__item--facebook:hover  .ad-handles__icon { color: #4C90F5; background: rgba(24, 119, 242, 0.14); }
.ad-handles__item--tiktok:hover    .ad-handles__icon { color: #FFFFFF; background: rgba(255, 255, 255, 0.12); }
.ad-handles__item--instagram:hover .ad-handles__icon { color: #E4638F; background: rgba(228, 99, 143, 0.14); }
.ad-handles__item--youtube:hover   .ad-handles__icon { color: #FF4E45; background: rgba(255, 78, 69, 0.14); }
.ad-handles__item--whatsapp:hover  .ad-handles__icon { color: #35D46F; background: rgba(37, 211, 102, 0.14); }

.ad-handles__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.35;
}

.ad-handles__net {
	color: var(--ad-muted, #9AA7B4);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ad-handles__handle {
	color: var(--ad-text, #F4F7FA);
	font-size: 0.9rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}

@media (pointer: coarse) {
	.ad-handles__item { padding: 11px 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.ad-handles__item:hover { transform: none; }
}

/* ==========================================================================
   Services page - alternating image / text rows
   ========================================================================== */

.ad-srv-media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--ad-radius, 14px);
	border: 1px solid var(--ad-line, rgba(255, 255, 255, 0.08));
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

@media (max-width: 767px) {
	.ad-srv-media {
		aspect-ratio: 16 / 10;
	}
}

/* ==========================================================================
   Services page - hero, linked overview cards, alternating rows
   ========================================================================== */

.elementor-element-svHero {
	background-color: var(--ad-on-accent, #FFFFFF);
	background-image:
		linear-gradient(180deg, rgba(10, 12, 16, 0.70) 0%, rgba(10, 12, 16, 0.92) 100%),
		url("slide-wrap.svg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* The overview cards double as jump links to the detail rows below. */
a.ad-svc--link {
	text-decoration: none;
	color: inherit;
}

a.ad-svc--link:hover {
	border-color: var(--ad-accent, #C1121F);
}

a.ad-svc--link:focus-visible {
	outline: 3px solid var(--ad-accent-hi, #E8323F);
	outline-offset: 3px;
}

.ad-svc__more {
	display: block;
	margin-top: 14px;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ad-accent-hi, #E8323F);
}

.ad-svc__more::after {
	content: "\2192";
	margin-left: 7px;
	transition: margin-left 0.2s ease;
}

a.ad-svc--link:hover .ad-svc__more::after { margin-left: 12px; }

/* The detail rows alternate with row-reverse on desktop. Left alone that would
   stack text above image on half of them; force a plain column so the artwork
   always leads on a phone. Matched on the element-id class prefix as well as
   the custom class, because Elementor does not always keep custom classes. */
@media (max-width: 767px) {

	.ad-srv-row.e-con,
	.e-con[class*="elementor-element-svRow"] {
		flex-direction: column !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ad-svc__more::after,
	a.ad-svc--link:hover .ad-svc__more::after { margin-left: 7px; }
}