/*
 * Site-wide fixes and finishing layer (2026 refresh). Loaded after rooteam.css on every page.
 * Grouped by area; each block says what it fixes.
 */

:root {
	--rt-sky: #47c4ee;
	--rt-leaf: #3fd87d;
	--rt-sun: #ffbb00;
	--rt-coral: #f6989a;
	--rt-deep: #012e38;
	--rt-ink: #424242;
	--rt-body: #666666;
	--rt-muted: #909293;
}

/* ---------- Accessibility ---------- */

/* rooteam.css removes every focus outline (*:focus { outline: none }). Keyboard users need to see where they are. */
html body :focus-visible {
	outline: 2px solid var(--rt-sky);
	outline-offset: 3px;
}

.skip-link {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 1000;
	padding: 10px 16px;
	background: #ffffff;
	color: var(--rt-ink);
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	text-decoration: none;
}

.skip-link:focus {
	top: 16px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Header ---------- */

/* On the homepage the Contact button was white text on 10% white over the sky-blue hero (contrast ~2:1). */
.home #header:not(.fixed) #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item:last-child > a.mega-menu-link {
	color: var(--rt-ink) !important;
	background: #ffffff url(../images/button-arrow-dark.png) calc(100% - 22px) center no-repeat !important;
	border-color: #ffffff !important;
	box-shadow: 0 6px 24px rgba(1, 46, 56, 0.12);
}

.home #header:not(.fixed) #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item:last-child > a.mega-menu-link:hover {
	color: #ffffff !important;
	background: var(--rt-deep) url(../images/button-arrow.png) calc(100% - 22px) center no-repeat !important;
	border-color: var(--rt-deep) !important;
}

/* ---------- Homepage hero ---------- */

/* On phones the paragraph ran under the blue shape on the right edge. */
@media (max-width: 636px) {
	.home-top-about-us-wrapper > .wpb_column:first-child .vc_column-inner {
		padding-right: 44px !important;
	}

	.home-top-about-us .wpb_content_element p {
		max-width: 100%;
	}

	.home-top-about-us .wpcf7 input[type="email"] {
		min-width: 0;
	}
}

/* Email + button: the button was absolutely positioned at a fixed 155px, so longer labels were cut off. */
.home-top-about-us .wpcf7 {
	display: block;
	max-width: 470px;
}

.home-top-about-us .wpcf7 form > p {
	display: flex;
	align-items: center;
	margin: 0;
	max-width: none;
}

.home-top-about-us .wpcf7 .wpcf7-form-control-wrap {
	flex: 1 1 auto;
	min-width: 0;
}

.home-top-about-us .wpcf7 input[type="email"] {
	width: 100%;
	box-sizing: border-box;
}

.home-top-about-us .wpcf7 input[type="submit"] {
	position: static;
	flex: 0 0 auto;
	width: auto;
	white-space: nowrap;
	padding: 15px 40px 15px 16px;
}

.home-top-about-us .wpcf7 .wpcf7-spinner {
	position: absolute;
	right: 8px;
	top: 50%;
	margin: -12px 0 0;
}

@media (max-width: 480px) {
	.home-top-about-us .wpcf7 form > p {
		flex-direction: column;
		align-items: stretch;
	}

	.home-top-about-us .wpcf7 input[type="submit"] {
		text-align: left;
		padding-left: 20px;
		border-top: 1px solid rgba(66, 66, 66, 0.08);
	}
}

/* ---------- Homepage client logos ---------- */

/* Logos came in at different sizes and weights; give them one optical size, quiet until hovered. */
.home-top-users ul.rooteam-gallery-images {
	width: 100%;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px 40px;
	align-items: center;
	max-width: 520px;
}

.home-top-users ul.rooteam-gallery-images li {
	width: auto;
	margin: 0;
	padding: 0 !important; /* rooteam.css pads each cell 30px !important, shrinking logos to ~50px */
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
}

.home-top-users ul.rooteam-gallery-images li img {
	width: auto;
	max-width: 100%;
	max-height: 60px;
	object-fit: contain;
	filter: grayscale(1) contrast(1.15);
	opacity: 0.9;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.home-top-users ul.rooteam-gallery-images li:hover img {
	filter: none;
	opacity: 1;
}

@media (max-width: 636px) {
	.home-top-users ul.rooteam-gallery-images {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}
}

/* Homepage services: see assets/css/home-services.css */

/* ---------- T.E.A.M. letters (were <h1>s; now styled spans, one real H1 per page) ---------- */

.team-letter {
	display: block;
	font-family: 'Cirka-Bold', serif;
	font-size: clamp(88px, 9.6vw, 138px);
	line-height: 1;
	letter-spacing: -1px;
	margin: 0;
}

.home-team-phase-a .team-letter, .team-roots-team-phase-a .team-letter { color: #47c7ef; }
.home-team-phase-b .team-letter, .team-roots-team-phase-b .team-letter { color: #ffbc00; }
.home-team-phase-c .team-letter, .team-roots-team-phase-c .team-letter { color: #f6989a; }
.home-team-phase-d .team-letter, .team-roots-team-phase-d .team-letter { color: #3fd87d; }

/* page headings that became <h1> keep the look of the <h2> they replaced */
h1.rt-page-title {
	font-size: 60px;
	line-height: 1em;
}

@media (max-width: 900px) {
	h1.rt-page-title {
		font-size: 40px;
	}
}

/* ---------- Testimonials: initials instead of placeholder silhouettes ---------- */

.clients-carousel .client-details .rt-initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	margin-right: 14px;
	border-radius: 50%;
	font-family: 'Cirka-Bold', serif;
	font-size: 20px;
	letter-spacing: 0.5px;
	color: #ffffff;
	background: var(--rt-initials, var(--rt-sky));
}

/* ---------- Page-builder entrance animations ---------- */

/* WPBakery's fadeInLeft/Right start a full screen-width away, so text flew across the page and looked cut off.
   Same effects, short distance. */
.wpb_animate_when_almost_visible.wpb_start_animation {
	animation-duration: 0.7s;
}

@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-32px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(32px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeftBig { from { opacity: 0; transform: translate3d(-48px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRightBig { from { opacity: 0; transform: translate3d(48px, 0, 0); } to { opacity: 1; transform: none; } }

/* ---------- Footer ---------- */

#footer .widget_text a.facebook,
#footer .widget_text a.twitter,
#footer .widget_text a.linkedin,
#footer .widget_text a.instagram {
	display: inline-flex;
	align-items: center;
	min-width: 32px;
	min-height: 32px;
}

/* ---------- Deep Data particle wave (pure CSS) ----------
   Rows of dots receding into the distance (back rows smaller, higher, dimmer).
   - Each row's dots sit on a sine curve (an SVG pattern) that slides sideways: the wave across.
   - Each row bobs up and down, a little later than the row in front: the wave front-to-back.
   Together that is the original's sin(x + t) + sin(y + t). Only transforms animate, so it runs
   on the compositor; content-visibility skips it while it is off-screen. */

.rt-wave {
	--rt-wave-dots: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='60' fill='%23a6ecf3'><circle cx='3.8' cy='28.5' r='1.65'/><circle cx='11.2' cy='25.6' r='1.76'/><circle cx='18.8' cy='22.9' r='1.86'/><circle cx='26.2' cy='20.5' r='1.95'/><circle cx='33.8' cy='18.4' r='2.03'/><circle cx='41.2' cy='16.8' r='2.09'/><circle cx='48.8' cy='15.6' r='2.13'/><circle cx='56.2' cy='15.1' r='2.15'/><circle cx='63.8' cy='15.1' r='2.15'/><circle cx='71.2' cy='15.6' r='2.13'/><circle cx='78.8' cy='16.8' r='2.09'/><circle cx='86.2' cy='18.4' r='2.03'/><circle cx='93.8' cy='20.5' r='1.95'/><circle cx='101.2' cy='22.9' r='1.86'/><circle cx='108.8' cy='25.6' r='1.76'/><circle cx='116.2' cy='28.5' r='1.65'/><circle cx='123.8' cy='31.5' r='1.55'/><circle cx='131.2' cy='34.4' r='1.44'/><circle cx='138.8' cy='37.1' r='1.34'/><circle cx='146.2' cy='39.5' r='1.25'/><circle cx='153.8' cy='41.6' r='1.17'/><circle cx='161.2' cy='43.2' r='1.11'/><circle cx='168.8' cy='44.4' r='1.07'/><circle cx='176.2' cy='44.9' r='1.05'/><circle cx='183.8' cy='44.9' r='1.05'/><circle cx='191.2' cy='44.4' r='1.07'/><circle cx='198.8' cy='43.2' r='1.11'/><circle cx='206.2' cy='41.6' r='1.17'/><circle cx='213.8' cy='39.5' r='1.25'/><circle cx='221.2' cy='37.1' r='1.34'/><circle cx='228.8' cy='34.4' r='1.44'/><circle cx='236.2' cy='31.5' r='1.55'/></svg>");
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	content-visibility: auto;
	contain-intrinsic-size: auto 400px;
	-webkit-mask-image: radial-gradient(110% 95% at 50% 55%, #000 40%, transparent 80%);
	mask-image: radial-gradient(110% 95% at 50% 55%, #000 40%, transparent 80%);
}

.rt-wave__field {
	position: absolute;
	inset: 8% 0 0;
}

.rt-wave__row {
	/* 0 = farthest row, 1 = nearest */
	--depth: calc(var(--k) / (var(--rows) - 1));
	position: absolute;
	left: -100%;
	width: 300%;
	height: 60px;
	/* rows bunch up towards the horizon, like a plane seen at an angle */
	top: calc(pow(var(--depth), 1.6) * 78%);
	transform: scale(calc(0.32 + 0.68 * var(--depth)));
	opacity: calc(0.25 + 0.75 * var(--depth));
}

.rt-wave__bob {
	height: 100%;
	animation: rt-wave-bob 4.6s ease-in-out infinite alternate;
	animation-delay: calc(var(--k) * -0.55s);
}

.rt-wave__strip {
	width: calc(100% + 240px);
	height: 100%;
	background: var(--rt-wave-dots) repeat-x 0 0 / 240px 60px;
	animation: rt-wave-slide 7s linear infinite;
	animation-delay: calc(var(--k) * -0.9s);
}

@keyframes rt-wave-bob {
	from { transform: translateY(-14px); }
	to   { transform: translateY(14px); }
}

@keyframes rt-wave-slide {
	from { transform: translateX(0); }
	to   { transform: translateX(-240px); }
}

@media (prefers-reduced-motion: reduce) {
	.rt-wave__bob,
	.rt-wave__strip {
		animation: none !important;
	}
}

/* <main> landmark added inside the content wrapper; it must not change layout */
main.site-main {
	display: block;
	outline: none;
}


/* ---------- Homepage guide: section rail + page progress ----------
   Built by assets/js/home-guide.js. One value, --rt-page-p (0..1 through the page), drives the rail
   fill and the small-screen progress line. CSS scroll timeline where supported, JS fallback otherwise. */

@property --rt-page-p {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

@supports (animation-timeline: scroll()) {
	html:has(.rt-progress) {
		animation: rt-page-progress linear both;
		animation-timeline: scroll(root block);
	}
}

@keyframes rt-page-progress {
	from { --rt-page-p: 0; }
	to   { --rt-page-p: 1; }
}

.rt-guided {
	scroll-margin-top: var(--rt-header-h, 80px);
}

.rt-rail {
	position: fixed;
	right: 12px;
	top: 50%;
	z-index: 60;
	display: none;
	transform: translateY(-50%);
	--rail-ink: var(--rt-muted);
	--rail-ink-strong: var(--rt-ink);
	--rail-bg: rgba(255, 255, 255, 0.92);
	--rail-line: rgba(66, 66, 66, 0.16);
}

.rt-rail.is-on-dark {
	--rail-ink: rgba(255, 255, 255, 0.6);
	--rail-ink-strong: #ffffff;
	--rail-bg: rgba(1, 46, 56, 0.85);
	--rail-line: rgba(255, 255, 255, 0.22);
}

@media (min-width: 1180px) {
	.rt-rail {
		display: block;
	}
}

.rt-rail ol {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rt-rail li {
	margin: 0;
}

.rt-rail a {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	font-size: 13px;
	line-height: 1;
	color: var(--rail-ink);
	text-decoration: none;
	transition: color 0.25s ease;
}

.rt-rail a.is-active,
.rt-rail a:hover {
	color: var(--rail-ink-strong);
}

/* labels stay quiet: only the current section's shows, all show while the rail is hovered or focused */
.rt-rail__label {
	padding: 5px 9px;
	border-radius: 6px;
	background: var(--rail-bg);
	white-space: nowrap;
	opacity: 0;
	transform: translateX(6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.rt-rail:hover .rt-rail__label,
.rt-rail:focus-within .rt-rail__label {
	opacity: 1;
	transform: none;
}

/* the current section's name stays visible only where it cannot overlap the content */
@media (min-width: 1640px) {
	.rt-rail {
		right: 28px;
	}

	.rt-rail a.is-active .rt-rail__label {
		opacity: 1;
		transform: none;
	}
}

.rt-rail__dot {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	background: var(--rail-bg);
	box-sizing: border-box;
	transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.rt-rail a.is-active .rt-rail__dot {
	background: var(--rt-sky);
	border-color: var(--rt-sky);
	transform: scale(1.35);
}

/* the line through the dots fills as you read down the page */
.rt-rail__track {
	position: absolute;
	right: 4px;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: var(--rail-line);
}

.rt-rail__fill {
	position: absolute;
	inset: 0;
	background: var(--rt-sky);
	transform-origin: top center;
	transform: scaleY(var(--rt-page-p));
}

/* small screens: a thin progress line along the bottom of the fixed header */
.rt-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--rt-sky);
	transform-origin: left center;
	transform: scaleX(var(--rt-page-p));
	pointer-events: none;
}

@media (min-width: 1180px) {
	.rt-progress {
		display: none;
	}
}

/* ---------- T.E.A.M.: the four phases light up in order as the section scrolls into view ----------
   CSS scroll-driven (view timeline). Without support, or with reduced motion, all four simply show. */

@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.home-team,
		.team-roots-team-phase {
			view-timeline: --rt-team block;
		}

		.home-team-phase-a > .vc_column-inner, .team-roots-team-phase-a > .vc_column-inner,
		.home-team-phase-b > .vc_column-inner, .team-roots-team-phase-b > .vc_column-inner,
		.home-team-phase-c > .vc_column-inner, .team-roots-team-phase-c > .vc_column-inner,
		.home-team-phase-d > .vc_column-inner, .team-roots-team-phase-d > .vc_column-inner {
			animation: rt-phase linear both;
			animation-timeline: --rt-team;
		}

		.home-team-phase-a > .vc_column-inner, .team-roots-team-phase-a > .vc_column-inner { animation-range: cover 18% cover 30%; }
		.home-team-phase-b > .vc_column-inner, .team-roots-team-phase-b > .vc_column-inner { animation-range: cover 26% cover 38%; }
		.home-team-phase-c > .vc_column-inner, .team-roots-team-phase-c > .vc_column-inner { animation-range: cover 34% cover 46%; }
		.home-team-phase-d > .vc_column-inner, .team-roots-team-phase-d > .vc_column-inner { animation-range: cover 42% cover 54%; }

		/* a line above the phases fills through the four phase colours as they light up */
		.home-team .team-slider {
			position: relative;
		}

		.home-team .team-slider::before,
		.home-team .team-slider::after {
			content: '';
			display: block;
			position: absolute;
			left: 15px;
			right: 15px;
			top: -26px;
			height: 2px;
			border-radius: 1px;
		}

		.home-team .team-slider::before {
			background: rgba(255, 255, 255, 0.1);
		}

		.home-team .team-slider::after {
			background: linear-gradient(90deg, #47c7ef 0 25%, #ffbc00 25% 50%, #f6989a 50% 75%, #3fd87d 75% 100%);
			transform-origin: left center;
			animation: rt-phase-line linear both;
			animation-timeline: --rt-team;
			animation-range: cover 18% cover 54%;
		}
	}
}

@keyframes rt-phase {
	from { opacity: 0.14; transform: translate3d(0, 28px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes rt-phase-line {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* ======================================================================
   QA round 1 fixes (independent review of staging, 2026-10-18)
   ====================================================================== */

/* Phones/tablets: the open menu lives in the fixed header and could not scroll, so with Services
   expanded the rest of the menu sat below the screen. */
@media (max-width: 1024px) {
	#mega-menu-wrap-main-menu .mega-menu-toggle.mega-menu-open + #mega-menu-main-menu {
		max-height: calc(100vh - 80px);
		max-height: calc(100dvh - 80px);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
}

/* Keyboard focus on page-builder buttons (WPBakery sets outline:0 with a stronger selector). */
/* longhands with a literal colour: WPBakery's `outline: 0` beat a shorthand that used var() */
html body .vc_general.vc_btn3.vc_btn3:focus-visible,
html body a.vc_btn3:focus-visible,
html body .mega-menu-toggle [role="button"]:focus-visible {
	outline-style: solid !important;
	outline-width: 2px !important;
	outline-color: #47c4ee !important;
	outline-offset: 3px !important;
}

/* Section rail: dots sat left of their invisible labels and formed a jagged column; invisible labels
   also caught clicks over the content. Dot first at the right edge, labels hidden for real. */
.rt-rail a {
	flex-direction: row-reverse;
	justify-content: flex-start;
}

.rt-rail__label {
	visibility: hidden;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.rt-rail:hover .rt-rail__label,
.rt-rail:focus-within .rt-rail__label {
	visibility: visible;
	transition-delay: 0s;
}

@media (min-width: 1640px) {
	.rt-rail a.is-active .rt-rail__label {
		visibility: visible;
		transition-delay: 0s;
	}
}

/* the hidden labels still took up width, so the rail's box (28px from the right edge to past the
   longest label) swallowed clicks on the content beneath it: labels now float beside the dot */
.rt-rail a {
	position: relative;
}

.rt-rail__label {
	position: absolute;
	right: 21px;
	top: 50%;
	margin-top: -11px;
}

/* active dot in ink (sky blue vanished on the sky-blue hero) */
.rt-rail a.is-active .rt-rail__dot {
	background: var(--rail-ink-strong);
	border-color: var(--rail-ink-strong);
}

/* only where there is a margin to sit in (it covered "Application" at 1180px) */
.rt-rail {
	display: none !important;
}

@media (min-width: 1360px) {
	.rt-rail {
		display: block !important;
	}
}

@media (max-width: 1359px) {
	.rt-progress {
		display: block;
	}
}

/* T.E.A.M. sequence + line only when all four phases are on screen at once (the slider shows 2-3
   of them below ~1300px and the line ran across the wrong columns). */
@media (max-width: 1299px) {
	.home-team-phase-a > .vc_column-inner, .home-team-phase-b > .vc_column-inner,
	.home-team-phase-c > .vc_column-inner, .home-team-phase-d > .vc_column-inner,
	.team-roots-team-phase-a > .vc_column-inner, .team-roots-team-phase-b > .vc_column-inner,
	.team-roots-team-phase-c > .vc_column-inner, .team-roots-team-phase-d > .vc_column-inner {
		animation: none !important;
	}

	.home-team .team-slider::before,
	.home-team .team-slider::after {
		display: none !important;
	}
}

/* T.E.A.M. slider dots were black on dark teal */
.home-team .slick-dots li button::before {
	color: #ffffff !important;
}

/* Testimonial initials: dark ink on the light brand colours (white failed contrast) */
.clients-carousel .client-details .rt-initials {
	color: var(--rt-deep);
}

/* ======================================================================
   Services menu (Max Mega Menu), after the 2020 dropdown mockup
   (PSDs desktop/Dropdown): a compact card hanging from "Services" with a caret, Web / App / Deep Data
   down the left and Logistics / Process / Cloud down the right, each with its icon in a soft tile of
   its colour. Phones/tablets: one line per service, no descriptions, Contact always in reach.
   "All services" is added by rooteam.js.
   ====================================================================== */

#mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-service-menu li.web-development {
	--mm: #47c7ef;
	--mm-bg: rgba(71,199,239,0.12);
	--mm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347c7ef' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M9 20h6M12 16v4'/%3E%3C/svg%3E");
}

#mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-service-menu li.app-development {
	--mm: #ffbb00;
	--mm-bg: rgba(255,187,0,0.13);
	--mm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffbb00' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2.2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E");
}

#mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-service-menu li.deep-data {
	--mm: #3fd87d;
	--mm-bg: rgba(63,216,125,0.13);
	--mm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233fd87d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='2.4'/%3E%3Ccircle cx='7' cy='16.5' r='2.4'/%3E%3Ccircle cx='17' cy='16.5' r='2.4'/%3E%3Cpath d='M10.8 9.1 8.2 14.4M13.2 9.1l2.6 5.3M9.4 16.5h5.2'/%3E%3C/svg%3E");
}

#mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-service-menu li.logistics-automation {
	--mm: #f6989a;
	--mm-bg: rgba(246,152,154,0.15);
	--mm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6989a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 3.5 3.5 10.6l6.8 2.6 2.6 6.8z'/%3E%3Cpath d='m10.3 13.2 10.2-9.7'/%3E%3C/svg%3E");
}

#mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-service-menu li.process-automation {
	--mm: #47c7ef;
	--mm-bg: rgba(71,199,239,0.12);
	--mm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347c7ef' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='8.5' width='10' height='7' rx='3.5'/%3E%3Crect x='11.5' y='8.5' width='10' height='7' rx='3.5'/%3E%3C/svg%3E");
}

#mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-service-menu li.cloud-computing {
	--mm: #ffbb00;
	--mm-bg: rgba(255,187,0,0.13);
	--mm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffbb00' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 18.5h9.6a4 4 0 0 0 .6-7.95 5.6 5.6 0 0 0-10.9 1.2 3.4 3.4 0 0 0 .7 6.75z'/%3E%3C/svg%3E");
}

/* the old PNG icons sat on the list items themselves */
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.mega-menu-item {
	float: none !important;
	width: auto !important;
	padding: 0 !important;
	background: none !important;
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
	position: relative;
	display: grid !important;
	grid-template-columns: 40px minmax(0, 1fr) 14px;
	column-gap: 14px;
	align-items: center;
	padding: 11px 12px !important;
	border-radius: 12px;
	text-decoration: none !important;
	transition: background-color 0.2s ease;
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link::before {
	content: "";
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--mm-bg, rgba(66, 66, 66, 0.06)) var(--mm-icon, none) center / 22px no-repeat;
	transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* an arrow slides in on hover */
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link::after {
	content: "";
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23424242' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 14px no-repeat;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus-visible {
	background: var(--mm-bg, rgba(66, 66, 66, 0.05));
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover::before,
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus-visible::before {
	background-color: #ffffff;
	transform: scale(1.06);
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover::after,
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus-visible::after {
	opacity: 1;
	transform: none;
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu .mega-description-group {
	display: block;
	min-width: 0;
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu .mega-sub-menu .mega-menu-title {
	display: block;
	color: #424242;
	font-size: 16px !important;
	line-height: 22px !important;
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu .mega-sub-menu .mega-menu-description {
	display: block;
	margin-top: 2px;
	color: #8d9092 !important;
	font-size: 13px !important;
	line-height: 18px !important;
}

/* "All services" (rooteam.js) */
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.rt-mm-all > a.mega-menu-link::before {
	display: none;
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.rt-mm-all > a.mega-menu-link {
	grid-template-columns: auto 14px;
	justify-content: start;
	column-gap: 8px;
	color: #3fd87d !important;
	font-size: 15px !important;
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.rt-mm-all > a.mega-menu-link::after {
	opacity: 1;
	transform: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233fd87d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.rt-mm-all > a.mega-menu-link:hover {
	background: rgba(63, 216, 125, 0.1);
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.rt-mm-all > a.mega-menu-link:hover::after {
	transform: translateX(3px);
}

/* ---------- Desktop: the card ---------- */

@media (min-width: 1025px) {
	#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu {
		position: relative !important;
	}

	#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto auto auto auto auto;
		grid-auto-flow: column;
		column-gap: 16px;
		row-gap: 2px;
		left: -46px !important;
		width: 720px !important;
		margin-top: 24px !important;
		padding: 26px 24px 16px !important;
		border-radius: 16px !important;
		background: #ffffff !important;
		box-shadow: 0 30px 70px -18px rgba(1, 46, 56, 0.22), 0 0 0 1px rgba(1, 46, 56, 0.05) !important;
		opacity: 0 !important;
		transform: translateY(8px) !important;
		transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.22s !important;
	}

	#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu.mega-toggle-on > ul.mega-sub-menu {
		opacity: 1 !important;
		transform: none !important;
		transition: opacity 0.18s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s !important;
	}

	/* the caret pointing at "Services", and a bridge over the gap so the card stays open */
	#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu::before {
		content: "" !important;
		display: block !important;
		position: absolute;
		top: -7px;
		left: 82px;
		width: 14px;
		height: 14px;
		border-radius: 3px 0 0 0;
		background: #ffffff;
		box-shadow: -1px -1px 0 rgba(1, 46, 56, 0.05);
		transform: rotate(45deg);
	}

	#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu::after {
		content: "" !important;
		display: block !important;
		position: absolute;
		left: 0;
		right: 0;
		top: -26px;
		height: 26px;
	}

	#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.mega-menu-item-text-6 {
		grid-column: 1 / -1;
		grid-row: 1;
		padding: 0 12px 12px !important;
	}

	#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.mega-menu-item-text-6 p {
		font-size: 26px !important;
		line-height: 32px !important;
	}

	#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.rt-mm-all {
		grid-column: 1 / -1;
		grid-row: 5;
		margin-top: 8px !important;
		padding-top: 10px !important;
		border-top: 1px solid rgba(66, 66, 66, 0.08);
	}
}

/* ---------- Phones and tablets: one line per service ---------- */

@media (max-width: 1024px) {
	/* the main items read as navigation, not footnotes */
	#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item {
		margin: 2px 0 !important;
	}

	#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item:not(:last-child) > a.mega-menu-link {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		padding: 12px 0 !important;
		border-bottom: 0 !important;
		color: #424242 !important;
		font-family: 'Cirka-Bold', serif !important;
		font-size: 26px !important;
		line-height: 1.15 !important;
		letter-spacing: -0.5px;
	}

	#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-current-menu-item:not(:last-child) > a.mega-menu-link {
		color: #47c7ef !important;
	}

	#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu.mega-toggle-on > ul.mega-sub-menu {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		margin: 0 0 8px !important;
		padding: 0 !important;
		box-shadow: none !important;
		background: none !important;
		border-radius: 0 !important;
	}

	#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.mega-menu-item-text-6,
	#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu .mega-sub-menu .mega-menu-description {
		display: none !important;
	}

	#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
		grid-template-columns: 32px minmax(0, 1fr) 14px;
		column-gap: 12px;
		margin: 0 -10px;
		padding: 7px 10px !important;
		border-radius: 10px;
	}

	#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link::before {
		width: 32px;
		height: 32px;
		border-radius: 9px;
		background-size: 18px;
	}

	/* touch: the arrow is always there */
	#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link::after {
		opacity: 0.35;
		transform: none;
	}

	#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu .mega-sub-menu .mega-menu-title {
		font-size: 16px !important;
	}

	/* "All services" leads the list on small screens */
	#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.rt-mm-all {
		order: -1;
	}

	#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-service-menu > ul.mega-sub-menu > li.rt-mm-all > a.mega-menu-link {
		grid-template-columns: auto 14px;
		padding: 6px 10px 10px !important;
	}

	/* Contact stays in reach at the bottom of the open menu */
	#mega-menu-wrap-main-menu .mega-menu-toggle.mega-menu-open + #mega-menu-main-menu > li.mega-menu-item:last-child {
		position: sticky;
		bottom: 0;
		z-index: 2;
		margin: 14px 0 0 !important;
		padding: 14px 0 22px;
		background: linear-gradient(rgba(255, 255, 255, 0), #ffffff 18px);
	}
}

/* ---------- Deep Data band: the wave edge to edge, with a slow ripple of light ----------
   (.rt-deepwave on the homepage services band and the Services page Deep Data band). The near rows
   sit low, the horizon high; the copy side stays quieter. Every few seconds a band of light rolls
   from the horizon towards the viewer: each row brightens a little after the one behind it.
   Opacity and transform only, so it stays on the compositor. */

.rt-deepwave .rt-wave {
	-webkit-mask-image: linear-gradient(180deg, transparent 34%, #000 58%, #000 90%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 34%, #000 58%, #000 90%, transparent 100%);
}

.rt-deepwave {
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75) 36%, #000 62%);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75) 36%, #000 62%);
}

.rt-deepwave .rt-wave__field {
	/* horizon a little below the middle, the swell towards the bottom edge */
	inset: 38% -6% -4%;
}

.rt-deepwave .rt-wave__strip {
	opacity: 0.55;
	animation: rt-wave-slide 7s linear infinite, rt-wave-light 6.5s ease-in-out infinite;
	animation-delay: calc(var(--k) * -0.9s), calc(var(--k) * 0.11s);
}

@keyframes rt-wave-light {
	0%, 48%, 100% { opacity: 0.55; }
	64% { opacity: 1; }
}

@media (max-width: 760px) {
	/* phones: copy runs the whole height, so the wave stays low and quiet */
	.rt-deepwave {
		-webkit-mask-image: none;
		mask-image: none;
		opacity: 0.55;
	}

	.rt-deepwave .rt-wave__field {
		inset: 52% -10% -4%;
	}
}

/* ---------- Homepage: no section rail (removed 2026-10-20); the reading progress is a hairline
   along the bottom of the header on every screen ---------- */
.rt-rail {
	display: none !important;
}

.rt-progress {
	display: block !important;
	height: 2px;
	background: linear-gradient(90deg, #47c7ef, #3fd87d);
	opacity: 0.9;
}

/* ======================================================================
   Footer (2026-10-20): the same sky-blue gradient, made calmer and more editorial.
   Brand column (logo, the homepage line, a Start a project button) beside four tidy columns with
   small uppercase labels; social links as outlined round buttons; a hairline bar with the
   copyright and Back to top. Above 767px it stays the "reveal" footer fixed under the page
   (rooteam.js keeps the page's bottom margin equal to the footer's real height).
   ====================================================================== */

#footer.rt-foot {
	padding: clamp(64px, 7vw, 104px) 0 32px;
	background:
		radial-gradient(70% 90% at 0% 0%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%),
		linear-gradient(135deg, #6ec4eb 0%, #4090f7 100%);
	color: #ffffff;
}

#footer.rt-foot .rt-foot__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 2.75fr);
	grid-template-areas:
		"brand cols"
		"bar   bar";
	column-gap: clamp(40px, 6vw, 110px);
	align-items: start;
}

/* the old layout: fixed widths and 100px gaps per widget */
#footer.rt-foot .widget-container {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---------- brand ---------- */

.rt-foot__brand {
	grid-area: brand;
}

#footer.rt-foot .rt-foot__brand .widget-container img {
	display: block;
	width: 150px !important;
	max-width: 150px !important;
	height: auto;
}

#footer.rt-foot .rt-foot__tag {
	margin: 30px 0 30px !important;
	color: #ffffff;
	font-family: 'Cirka-Bold', serif;
	font-size: clamp(24px, 2.2vw, 32px) !important;
	line-height: 1.12 !important;
	letter-spacing: -0.5px;
}

#footer.rt-foot .rt-foot__cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 15px 20px;
	border-radius: 13px;
	background: #ffffff;
	color: #2f7fe6 !important;
	font-size: 15px;
	line-height: 1;
	text-decoration: none !important;
	box-shadow: 0 10px 30px -12px rgba(17, 60, 140, 0.45);
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

#footer.rt-foot .rt-foot__cta svg {
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

#footer.rt-foot .rt-foot__cta:hover,
#footer.rt-foot .rt-foot__cta:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 16px 36px -14px rgba(17, 60, 140, 0.55);
}

#footer.rt-foot .rt-foot__cta:hover svg,
#footer.rt-foot .rt-foot__cta:focus-visible svg {
	transform: translateX(3px);
}

/* ---------- columns ---------- */

.rt-foot__cols {
	grid-area: cols;
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
	grid-template-areas:
		"company services contact"
		"company services connect";
	column-gap: clamp(24px, 3vw, 56px);
	align-content: start;
	padding-top: 6px;
}

#footer.rt-foot .footer-col-2 { grid-area: company; }
#footer.rt-foot .footer-col-3 { grid-area: services; }
#footer.rt-foot .footer-col-4 { grid-area: contact; }
#footer.rt-foot .footer-col-5 { grid-area: connect; margin-top: 30px !important; }

#footer.rt-foot .widget-title {
	margin: 0 0 20px !important;
	color: rgba(255, 255, 255, 0.72) !important;
	font-family: 'graphik_regularregular', sans-serif !important;
	font-size: 12px !important;
	line-height: 1 !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

#footer.rt-foot .widget-container ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

#footer.rt-foot .widget-container li {
	margin: 0 0 12px !important;
	padding: 0 !important;
	list-style: none;
}

#footer.rt-foot .widget-container li::before {
	display: none;
}

#footer.rt-foot .widget-container a:not([class]),
#footer.rt-foot .widget-container li a {
	color: #ffffff !important;
	font-size: 15px !important;
	line-height: 1.4;
	text-decoration: none !important;
	/* an underline that draws in on hover */
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
	opacity: 0.9;
}

#footer.rt-foot .widget-container a:not([class]):hover,
#footer.rt-foot .widget-container li a:hover,
#footer.rt-foot .widget-container li a:focus-visible {
	background-size: 100% 1px;
	opacity: 1;
}

#footer.rt-foot .widget-container li a[aria-current] {
	opacity: 1;
}

#footer.rt-foot .widget-container p {
	margin: 0 !important;
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
}

/* social links: outlined round buttons in a row */
#footer.rt-foot .footer-col-5 p {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

#footer.rt-foot .footer-col-5 br {
	display: none;
}

#footer.rt-foot .footer-col-5 a.facebook,
#footer.rt-foot .footer-col-5 a.twitter,
#footer.rt-foot .footer-col-5 a.linkedin,
#footer.rt-foot .footer-col-5 a.instagram {
	display: inline-block;
	width: 40px;
	height: 40px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 15px 15px;
	text-indent: -9999px;
	overflow: hidden;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

#footer.rt-foot .footer-col-5 a:hover,
#footer.rt-foot .footer-col-5 a:focus-visible {
	background-color: rgba(255, 255, 255, 0.16);
	border-color: #ffffff;
	transform: translateY(-2px);
}

/* ---------- bottom bar ---------- */

#footer.rt-foot .rt-foot__bar {
	grid-area: bar;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: clamp(48px, 6vw, 84px);
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, 0.24);
	font-size: 13px;
}

#footer.rt-foot .copyright {
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
}

#footer.rt-foot .rt-foot__top {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 13px;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

#footer.rt-foot .rt-foot__top svg {
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

#footer.rt-foot .rt-foot__top:hover {
	color: #ffffff !important;
}

#footer.rt-foot .rt-foot__top:hover svg {
	transform: translateY(-3px);
}

/* the reveal footer: the page's bottom margin follows the footer's real height */
@media (min-width: 768px) {
	.hfeed #wrapper {
		margin-bottom: var(--rt-footer-h, 550px);
	}
}

/* ---------- tablets: brand on its own row ---------- */

@media (max-width: 1099px) {
	#footer.rt-foot .rt-foot__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"brand"
			"cols"
			"bar";
		row-gap: 48px;
	}

	.rt-foot__brand {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		column-gap: 32px;
	}

	#footer.rt-foot .rt-foot__tag {
		margin: 0 !important;
		font-size: 24px !important;
	}

	#footer.rt-foot .rt-foot__bar {
		margin-top: 0;
	}
}

/* ---------- phones ---------- */

@media (max-width: 767px) {
	#footer.rt-foot {
		padding: 56px 0 28px;
	}

	#footer.rt-foot .rt-foot__inner {
		row-gap: 40px;
	}

	.rt-foot__brand {
		display: block;
	}

	#footer.rt-foot .rt-foot__tag {
		margin: 24px 0 24px !important;
		font-size: 26px !important;
	}

	.rt-foot__cols {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"company services"
			"contact contact"
			"connect connect";
		row-gap: 34px;
		column-gap: 20px;
	}

	#footer.rt-foot .footer-col-5 {
		margin-top: 0 !important;
	}

	#footer.rt-foot .rt-foot__bar {
		padding-top: 22px;
	}
}