/* Cabo Marketing Studio — Hektor capability ribbons (home only). */
.cms-capability-ribbons {
	position: relative;
	z-index: 2;
	overflow: hidden;
	padding: clamp(28px, 4.5vw, 70px) 0 clamp(38px, 5vw, 82px);
	background: var(--tt-bg-color);
}

.cms-capability-ribbons::before {
	position: absolute;
	content: "";
	inset: 0;
	background-image: linear-gradient(rgb(23 23 25 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(23 23 25 / 5%) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
}

.cms-ribbon-row {
	position: relative;
	width: calc(100% + 44px);
	margin-left: -22px;
	border: 2px solid var(--tt-dark-color);
	border-radius: 999px;
	background: var(--tt-bg-color);
	color: var(--tt-dark-color);
	overflow: hidden;
	box-shadow: 0 2px 0 var(--tt-dark-color);
}

.cms-ribbon-row + .cms-ribbon-row { margin-top: clamp(8px, 1vw, 14px); }
.cms-ribbon-row:nth-child(1) { transform: rotate(.35deg); }
.cms-ribbon-row:nth-child(2) { transform: rotate(-.45deg); }
.cms-ribbon-row:nth-child(3) { transform: rotate(.25deg); }
.cms-ribbon-row.is-dark { background: var(--tt-dark-color); color: var(--tt-light-color); }

.cms-ribbon-track {
	display: flex;
	align-items: center;
	width: max-content;
	will-change: transform;
	animation: cms-ribbon-left 52s linear infinite;
}

.cms-ribbon-row:nth-child(2) .cms-ribbon-track { animation-name: cms-ribbon-right; animation-duration: 58s; }
.cms-ribbon-row:nth-child(3) .cms-ribbon-track { animation-duration: 62s; }
.cms-ribbon-row:nth-child(4) .cms-ribbon-track { animation-name: cms-ribbon-right; animation-duration: 66s; }

.cms-ribbon-set {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.2vw, 40px);
	padding: clamp(12px, 1.35vw, 20px) clamp(20px, 2.2vw, 40px);
	white-space: nowrap;
}

.cms-ribbon-item {
	display: inline-flex;
	align-items: center;
	gap: clamp(13px, 1.2vw, 22px);
	font-size: clamp(34px, 4.65vw, 76px);
	font-weight: 600;
	line-height: .95;
	letter-spacing: -.075em;
}

.cms-ribbon-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(52px, 5.2vw, 84px);
	height: clamp(44px, 4.1vw, 66px);
	border: 2px solid currentColor;
	border-radius: 16px;
	background: var(--tt-dark-color);
	color: var(--tt-light-color);
	font-size: clamp(22px, 2.1vw, 34px);
	letter-spacing: 0;
	box-shadow: 4px 4px 0 #b43b1b;
	transform: rotate(-2deg);
}

.is-dark .cms-ribbon-icon {
	background: var(--tt-light-color);
	color: var(--tt-dark-color);
	box-shadow: 4px 4px 0 #b43b1b;
}

.cms-ribbon-dot { color: #b43b1b; font-size: .72em; letter-spacing: 0; }

@keyframes cms-ribbon-left {
	to { transform: translate3d(-50%, 0, 0); }
}

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

@media (max-width: 767px) {
	.cms-capability-ribbons { padding-top: 22px; padding-bottom: 48px; }
	.cms-capability-ribbons::before { background-size: 30px 30px; }
	.cms-ribbon-row { width: calc(100% + 22px); margin-left: -11px; }
	.cms-ribbon-row + .cms-ribbon-row { margin-top: 8px; }
	.cms-ribbon-set { gap: 16px; padding: 11px 18px; }
	.cms-ribbon-item { gap: 11px; font-size: clamp(28px, 8.5vw, 42px); }
	.cms-ribbon-icon { width: 48px; height: 40px; border-radius: 11px; font-size: 20px; box-shadow: 3px 3px 0 #b43b1b; }
	.is-dark .cms-ribbon-icon { box-shadow: 3px 3px 0 #b43b1b; }
}

@media (prefers-reduced-motion: reduce) {
	.cms-ribbon-track { animation-play-state: paused; }
}

/* Kept in the Home bundle as well so the header is corrected immediately,
   even when a returning visitor still has the base Hektor stylesheet cached. */
.tt-logo,
.tt-logo a { display: flex; align-items: center; }
.tt-logo { min-height: 48px; }
.tt-logo a,
.tt-logo img { width: 180px !important; height: auto !important; }
.tt-logo img { max-width: none; max-height: 48px !important; object-fit: contain; }
body.tt-transition #tt-page-transition { position: fixed; inset: 0; pointer-events: none; }
body.tt-transition .tt-ptr-preloader { display: grid; place-items: center; width: min(100vw, 560px); height: 180px; }
body.tt-transition .tt-ptr-prel-content { margin-top: 0; }
.tt-ptr-prel-image { width: clamp(164px, 14vw, 204px) !important; max-width: 56vw !important; max-height: 60px !important; height: auto !important; opacity: 1 !important; object-fit: contain; }

@media (max-width: 1024px) {
	.tt-logo { min-height: 44px; }
	.tt-logo a,
	.tt-logo img { width: 156px !important; max-height: 42px !important; }
}

@media (max-width: 480px) {
	.tt-logo { min-height: 40px; }
	.tt-logo a,
	.tt-logo img { width: 140px !important; max-height: 38px !important; }
	.tt-ptr-prel-image { width: 168px !important; max-width: 60vw !important; }
}