/*
 * Services page, after the 2020 mockup (Website/wetransfer-ead877/PSDs desktop/Services_desktop-01.psd).
 * Markup: inc/shortcodes/templates/services-temp.php. Behaviour: assets/js/services.js.
 *
 * Flow (default; phones, tablets, reduced motion, no JS): the mockup's long page. One section per
 * service with its own background; each stage is the illustration beside (or above) its copy.
 *
 * Locked (.rt-services.is-locked, wide screens): the sections share one stage pinned under the
 * header. The page is one stage-height tall per stage and scrolling stays native; services.js reads
 * the position, marks the active stage and finishes each gesture on the next stage.
 *
 * Motion system: three timings used everywhere
 *   exit  220 ms  cubic-bezier(.4, 0, 1, 1)       what leaves, leaves first and fast
 *   move  600 ms  cubic-bezier(.65, 0, .35, 1)    morphs, the tab strip, the scroll itself
 *   enter 550 ms  cubic-bezier(.22, 1, .36, 1)    what arrives, top to bottom, 40 ms apart
 * Every transition is settled about 1 s after the input.
 *
 * Classes set by services.js:
 *   .rt-scene.is-active / .rt-stage.is-active   the current service / stage (locked)
 *   .rt-scene.is-live / .rt-stage.is-live       plays the entrance (locked: active and on screen;
 *                                               flow: scrolled into view)
 *   .rt-stage.is-leaving / .rt-scene.is-exiting the stage / service being left (plays its exit)
 *   .rt-scene.is-under                          a light service held under the Deep Data curtain
 *   .rt-scene.m-web-down|m-web-up|m-app-down|m-app-up   a morph between a service's two drawings
 *   .rt-r + --k                                 one unit of copy and its place in the reveal order
 *   [data-dir="down"|"up"], [data-curtain]      on .rt-services: direction, curtain movement
 */

.rt-services {
	/* the stage changes under a fixed scroll position; Chrome's scroll anchoring would "correct"
	   for that and throw the page back several stages */
	overflow-anchor: none;
	--rt-header: 87px;
	--tabs-h: 72px;
	--gutter: max(50px, calc((100vw - 1300px) / 2));
	--ink: #424242;
	--copy: #8d9092;
	--muted: #a4a7a9;
	--mist: #f4f8fa;
	--deep: #012e38;
	--deep-card: #183e4f;
	--t-exit: 180ms;
	--e-exit: cubic-bezier(0.4, 0, 1, 1);
	--t-move: 600ms;
	--e-move: cubic-bezier(0.65, 0, 0.35, 1);
	--t-enter: 550ms;
	--e-enter: cubic-bezier(0.22, 1, 0.36, 1);
	--stagger: 40ms;
	--e-back: cubic-bezier(0.34, 1.4, 0.64, 1);
	--e-gravity: cubic-bezier(0.55, 0, 1, 0.45);
	--e-curtain: cubic-bezier(0.55, 0, 0.15, 1);
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	color: var(--copy);
}

.rt-services *,
.rt-services *::before,
.rt-services *::after {
	box-sizing: border-box;
}

html:has(.rt-services),
body:has(.rt-services) {
	overflow-anchor: none;
}

/* rooteam.css makes .container a scroll box on small screens (which stops sticky elements) and its
   padding would clip the full-bleed bands; let the services run edge to edge and trim sideways
   overflow at the page instead (clip does not create a scroll box) */
.container:has(.rt-services) {
	overflow: visible !important;
}

body:has(.rt-services) {
	overflow-x: clip;
}

/* the header sits over the page the whole time here: keep it opaque so nothing slides under it */
body:has(.rt-services) #header {
	background: #ffffff;
}

.our-services,
.our-services > .wpb_column > .vc_column-inner {
	margin: 0 !important;
	padding: 0 !important;
}

/* ---------- Service tabs (mockup: sliding strip, current service at the left, edges fade) ---------- */

.rt-tabs {
	position: sticky;
	top: var(--rt-header);
	z-index: 6;
	height: var(--tabs-h);
	background: #ffffff;
	transition: background-color var(--t-move) var(--e-move);
}

.rt-services:not(.is-locked)[data-tone="mist"] .rt-tabs { background: var(--mist); }
.rt-services:not(.is-locked)[data-tone="dark"] .rt-tabs { background: var(--deep); }

.rt-tabs__viewport {
	position: relative;
	height: 100%;
	width: min(100%, calc(var(--gutter) + 640px));
	overflow: hidden;
	/* the fade on the left stays inside the gutter, so the current tab's first letter is never dimmed */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.25) calc(var(--gutter) * 0.55), #000 calc(var(--gutter) - 3px), #000 calc(100% - 170px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.25) calc(var(--gutter) * 0.55), #000 calc(var(--gutter) - 3px), #000 calc(100% - 170px), transparent 100%);
}

.rt-tabs__track {
	display: flex;
	gap: 26px;
	height: 100%;
	margin: 0 !important;
	padding: 0 0 0 var(--gutter) !important;
	list-style: none;
	align-items: center;
	white-space: nowrap;
	transform: translateX(calc(-1 * var(--tab-x, 0px)));
	transition: transform var(--t-move) var(--e-move);
}

.rt-tabs__track li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.rt-tabs__track li::before {
	display: none;
}

.rt-tabs__track a {
	position: relative;
	display: block;
	padding: 6px 0 9px;
	color: #9b9ea0;
	font-family: 'graphik_regularregular', sans-serif;
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none !important;
	transition: color var(--t-move) var(--e-move);
}

.rt-tabs__track a:hover,
.rt-tabs__track a:focus-visible,
.rt-tabs__track a[aria-current] {
	color: #424242;
}

/* one underline: it stays at the left edge where the current service lands, and takes that
   service's width while the labels slide under it */
.rt-tabs__ink {
	position: absolute;
	left: var(--gutter);
	top: var(--ink-y, 52px);
	width: var(--ink-w, 0px);
	height: 1px;
	background: #424242;
	transition: width var(--t-move) var(--e-move), background-color var(--t-move) var(--e-move);
}

.rt-services:not(.is-locked)[data-tone="dark"] .rt-tabs__track a,
.rt-tabs--dark .rt-tabs__track a { color: #2f7586; }
.rt-services:not(.is-locked)[data-tone="dark"] .rt-tabs__track a[aria-current],
.rt-services:not(.is-locked)[data-tone="dark"] .rt-tabs__track a:hover,
.rt-tabs--dark .rt-tabs__track a[aria-current],
.rt-tabs--dark .rt-tabs__track a:hover { color: #47c7ef; }
.rt-services:not(.is-locked)[data-tone="dark"] .rt-tabs__ink,
.rt-tabs--dark .rt-tabs__ink { background: #47c7ef; }

/* the dark copy only exists for the locked curtain */
.rt-services:not(.is-locked) .rt-tabs--dark {
	display: none;
}

/* ---------- Scenes and stages (flow layout = the mockup's long page) ---------- */

.rt-scene {
	position: relative;
	padding: 40px var(--gutter) 90px;
	background: #ffffff;
	color: var(--copy);
}

.rt-scene.rt-tone--mist { background: var(--mist); }

.rt-scene.rt-tone--dark {
	--ink: #ffffff;
	--copy: #d2d4d6;
	background: var(--deep);
}

.rt-anchor {
	position: absolute;
	top: 0;
	left: 0;
	scroll-margin-top: calc(var(--rt-header) + var(--tabs-h));
}

.rt-stage {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	padding: 50px 0;
}

.rt-stage__art {
	position: relative;
	grid-column: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 360px;
}

.rt-stage__text {
	grid-column: 2;
	/* mockup: the copy column starts at 56% of the width and is ~350px wide */
	max-width: 450px;
	padding-left: 100px;
}

.rt-stage__art.is-shared {
	align-self: start;
}

/* ---------- Copy (sizes from rooteam.css, as the mockup sets them) ---------- */

.rt-services .rt-h {
	margin: 0 0 28px !important;
	color: var(--ink) !important;
	font-family: 'Cirka-Bold', serif !important;
	font-weight: normal !important;
	letter-spacing: -1px;
}

.rt-services h4.rt-h {
	font-size: 36px !important;
	line-height: 1.1 !important;
}

.rt-services h5.rt-h {
	margin-bottom: 22px !important;
	font-size: 28px !important;
	line-height: 30px !important;
}

.rt-lede {
	margin: 0 0 26px !important;
	color: var(--accent) !important;
	font-family: 'graphik_regularregular', sans-serif;
	font-size: 22px !important;
	line-height: 30px !important;
}

.rt-copy p {
	margin: 0 0 22px !important;
	color: var(--copy) !important;
	font-size: 16px !important;
	line-height: 24px !important;
}

.rt-copy + .rt-h {
	margin-top: 46px !important;
}

.rt-list .icon-with-text-group {
	margin: 4px 0 0 !important;
}

/* the list template prints a bullet image and rooteam.css draws the same bullet: keep one */
.rt-list .icon-with-text-group li > img {
	display: none;
}

.rt-list .icon-with-text-group li {
	color: var(--copy);
	margin-bottom: 14px !important;
}

.rt-tools {
	position: relative;
	margin-top: 34px;
	padding-top: 40px;
}

.rt-tools::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 330px;
	height: 1px;
	background: rgba(144, 146, 147, 0.25);
	transform-origin: 0 50%;
}

/* a stage that is only the tools (App) has no separator above them, as in the mockup */
.rt-stage__text > .rt-tools:first-child {
	margin-top: 0;
	padding-top: 0;
}

.rt-stage__text > .rt-tools:first-child::before,
.rt-cards__closing .rt-tools::before {
	display: none;
}

.rt-tools .rooteam-gallery-images {
	margin-bottom: 10px !important;
}

.rt-tools .rooteam-gallery-images li {
	margin-bottom: 24px !important;
}

.rt-tools .rooteam-gallery-images img {
	max-height: 44px;
	width: auto !important;
	max-width: calc(100% - 25px);
}

.rt-cta .vc_btn3-container {
	margin-bottom: 0 !important;
}

.rt-tone--dark .rt-tools .rooteam-gallery-images img {
	filter: brightness(0) invert(1);
	opacity: 0.85;
}

/* ---------- Illustrations ---------- */

.rt-art {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rt-art > img,
.rt-svg {
	display: block;
	max-width: 100%;
	height: auto;
	overflow: visible;
}

.rt-art--browser .rt-svg,
.rt-art--dashboard .rt-svg { width: 84%; }
.rt-art--phone .rt-svg { width: auto; height: min(390px, 52vh); }
.rt-art--planes .rt-svg { width: 94%; }
.rt-art--clouds .rt-svg { width: 84%; }
.rt-art--bars { justify-content: flex-end; }
.rt-art--bars .rt-svg { width: 118%; max-width: none; margin-left: -18%; }

/* pink half-pill behind the dashboard, running off the left edge (mockup, Web: Employee Access) */
.rt-shape--pink {
	position: absolute;
	left: -100vw;
	right: 35%;
	top: 47%;
	height: 280px;
	border-radius: 0 280px 280px 0;
	background: #f6989a;
}

/* green pill behind the phone (mockup, App) */
.rt-shape--pill {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(82%, 460px);
	height: 235px;
	border-radius: 235px;
	background: #3fd87d;
	transform: translate(-50%, -50%);
}

/* the empty phone that holds the mobile-first copy (mockup, App) */
.rt-stage__art--phone {
	min-height: 0;
}

.rt-phone {
	position: relative;
	width: min(270px, 70%);
	min-height: min(520px, 64vh);
	padding: 64px 34px 40px;
	border: 3px solid #0b1215;
	border-radius: 46px;
	background: var(--mist);
	display: flex;
	align-items: center;
}

.rt-phone .rt-h {
	font-size: 26px !important;
	line-height: 30px !important;
	margin-bottom: 18px !important;
}

.rt-phone .rt-copy p {
	font-size: 14px !important;
	line-height: 22px !important;
	margin-bottom: 16px !important;
}

/* ---------- Deep Data band: intro, stepping cards, wave, tools ---------- */

.rt-cards {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	grid-template-areas:
		"intro rail"
		"wave  dots"
		"wave  closing";
	column-gap: 40px;
	align-items: start;
	padding: 30px 0 0;
}

.rt-cards__intro {
	grid-area: intro;
	position: relative;
	z-index: 2;
	padding: 34px 40px 0 10%;
	min-height: 320px;
}

.rt-cards__intro .rt-copy {
	max-width: 330px;
}

.rt-cards__rail {
	grid-area: rail;
	position: relative;
	height: 320px;
	--card-w: 236px;
	--card-gap: 22px;
	/* the neighbours fade, as in the mockup */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 70%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 70%, transparent 100%);
}

.rt-cards__track {
	position: absolute;
	inset: 0;
}

.rt-card {
	display: block;
	position: absolute;
	top: 0;
	left: 30%;
	width: var(--card-w);
	height: 100%;
	padding: 34px 30px;
	border-radius: 15px;
	background: var(--deep-card);
	opacity: 0.6;
	/* moved with transforms only: no layout change while the page is pinned */
	transform: translateX(calc((var(--n) - var(--state, 0)) * (var(--card-w) + var(--card-gap)))) scale(0.94);
	transition:
		opacity 0.3s ease,
		transform var(--t-enter) var(--e-enter),
		background-color 0.3s ease;
}

/* the neighbours are blank shells, as in the mockup */
.rt-card > * {
	opacity: 0;
	transition: opacity 0.2s ease;
}

.rt-card.is-active,
.rt-card.is-held {
	opacity: 1;
	transform: translateX(calc((var(--n) - var(--state, 0)) * (var(--card-w) + var(--card-gap))));
	background: #1d4a5d;
}

.rt-card.is-held > * {
	opacity: 1;
}

.rt-card.is-active > * {
	opacity: 1;
	transition: opacity 0.35s ease 0.15s;
}

.rt-card--ghost {
	background: linear-gradient(to right, var(--deep-card), var(--deep));
}

/* no fifth card waiting after the last one */
.rt-scene[data-state="3"] .rt-card--ghost {
	opacity: 0;
}

.rt-card__count {
	display: flex;
	gap: 12px;
	margin: 0 0 30px !important;
	color: #ffffff !important;
	font-size: 14px !important;
	line-height: 1 !important;
	letter-spacing: 0.04em;
}

.rt-card__title {
	margin: 0 0 22px !important;
	color: #ffffff !important;
	font-family: 'Cirka-Bold', serif !important;
	font-weight: normal !important;
	font-size: 24px !important;
	line-height: 1.1 !important;
}

.rt-card .rt-copy p {
	font-size: 14px !important;
	line-height: 22px !important;
}

.rt-cards__dots {
	grid-area: dots;
	display: flex;
	gap: 6px;
	padding: 22px 0 0 calc(30% + 4px);
}

.rt-cards__dots i {
	width: 6px;
	height: 6px;
	border-radius: 6px;
	background-color: #80979c;
	transition: width var(--t-enter) var(--e-enter), background-color var(--t-enter) var(--e-enter);
}

.rt-scene[data-state="0"] .rt-cards__dots i:nth-child(1),
.rt-scene[data-state="1"] .rt-cards__dots i:nth-child(2),
.rt-scene[data-state="2"] .rt-cards__dots i:nth-child(3),
.rt-scene[data-state="3"] .rt-cards__dots i:nth-child(4) {
	width: 20px;
	background-color: #47c7ef;
}

.rt-cards__wave {
	grid-area: wave;
	position: relative;
	height: 320px;
	margin-left: -4%;
	-webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 55%, #000 30%, transparent 75%);
	mask-image: radial-gradient(ellipse 60% 70% at 50% 55%, #000 30%, transparent 75%);
}

.rt-cards__wave .rt-wave {
	position: absolute;
	inset: 0;
	height: auto;
	opacity: 1;
}

.rt-cards__wave .rt-wave__field {
	transition: transform 0.9s var(--e-move);
	transform: translateX(calc(var(--state, 0) * -4%));
}

.rt-cards__closing {
	grid-area: closing;
	padding: 6px 0 0 30%;
}

.rt-cards__closing .rt-tools {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	max-width: 360px;
}

/* ---------- Motion: copy ----------
   Every unit of copy (.rt-r: heading, lede, paragraph, bullet, tools heading, logo, button) gets its
   place in the stage's reading order (--k, set by services.js) and rises in that order. */

.rt-services.has-motion .rt-stage:not(.is-live) .rt-r,
.rt-services.has-motion .rt-scene--cards:not(.is-live) .rt-r {
	opacity: 0;
}

.rt-services.has-motion.is-locked .rt-stage:not(.is-live) .rt-stage__art:not(.is-shared),
.rt-services.has-motion.is-locked .rt-scene:not(.is-live) .rt-stage__art.is-shared {
	opacity: 0;
}

.rt-services.has-motion .rt-stage:not(.is-live) .rt-tools::before {
	transform: scaleX(0);
}

.rt-stage.is-live .rt-r,
.rt-scene--cards.is-live .rt-r {
	animation: rt-enter var(--t-enter) var(--e-enter) calc(var(--lead, 120ms) + min(var(--k, 0) * var(--stagger), 640ms)) backwards;
}

.rt-stage.is-live .rooteam-gallery-images > .rt-r,
.rt-scene--cards.is-live .rooteam-gallery-images > .rt-r {
	animation-name: rt-enter-pop;
}

.rt-stage.is-live .rt-tools::before {
	animation: rt-line var(--t-enter) var(--e-enter) calc(var(--lead, 120ms) + min(var(--k, 0) * var(--stagger), 640ms)) backwards;
}

.rt-services { --rise: 16px; --fall: -12px; }
.rt-services[data-dir="up"] { --rise: -16px; --fall: 12px; }

@keyframes rt-enter {
	from { opacity: 0; transform: translateY(var(--rise)); }
}

@keyframes rt-enter-pop {
	from { opacity: 0; transform: translateY(8px) scale(0.92); }
}

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

@keyframes rt-exit {
	to { opacity: 0; transform: translateY(var(--fall)); }
}

@keyframes rt-fade-in {
	from { opacity: 0; }
}

@keyframes rt-fade-out {
	to { opacity: 0; }
}

/* ---------- Motion: illustrations arriving (the 2020 build order, compressed) ---------- */

.rt-spin,
.rt-pop,
.rt-drop,
.rt-pr-dot,
.rt-w1-tile,
.rt-w2-box,
.rt-w2-foot {
	transform-box: fill-box;
	transform-origin: center;
}

.rt-grow {
	transform-box: fill-box;
	transform-origin: 0% 50%;
}

.rt-stage.is-live .rt-stage__art:not(.is-shared) .rt-a,
.rt-stage.is-live .rt-stage__art.is-shared .rt-a {
	animation: rt-in var(--t-enter) var(--e-enter) calc(var(--art-lead, var(--lead, 120ms)) + var(--d, 0ms) * 0.6) backwards;
}

.rt-stage.is-live .rt-pop {
	animation-timing-function: var(--e-back);
}

.rt-stage.is-live .rt-spin {
	animation: rt-spin 0.7s var(--e-enter) calc(var(--art-lead, var(--lead, 120ms)) + var(--d, 0ms) * 0.6) backwards;
}

.rt-stage.is-live .rt-grow {
	animation: rt-grow 0.65s var(--e-enter) calc(var(--art-lead, var(--lead, 120ms)) + var(--d, 0ms) * 0.8) backwards;
}

@keyframes rt-in {
	from { opacity: 0; translate: var(--dx, 0px) var(--dy, 0px); }
}

@keyframes rt-spin {
	from { rotate: var(--r, 360deg); }
}

@keyframes rt-grow {
	from { scale: 0 1; }
}

/* a stage's own drawing arriving with its service fades up as a whole while its parts build, so
   parts without their own entrance (the phone body) never pop in */
.rt-services.is-locked .rt-stage.is-live.is-first .rt-stage__art:not(.is-shared) {
	animation: rt-fade-in 0.32s ease var(--art-lead, var(--lead, 120ms)) backwards;
}

/* a shared illustration fades up whenever its service arrives (its parts build only on the way
   down into the first stage) */
.rt-scene.is-live .rt-stage__art.is-shared {
	animation: rt-fade-in 0.35s ease var(--art-lead, 0ms) backwards;
}

/* on the way back up, drawings return quietly instead of building again */
.rt-services[data-dir="up"] .rt-stage.is-live .rt-stage__art .rt-a,
.rt-services[data-dir="up"] .rt-stage.is-live .rt-stage__art .rt-spin,
.rt-services[data-dir="up"] .rt-stage.is-live .rt-stage__art .rt-grow {
	animation: rt-fade-in 0.4s ease var(--art-lead, var(--lead, 120ms)) backwards;
}

.rt-stage.is-live .rt-shape--pink {
	animation: rt-sweep var(--t-move) var(--e-enter) calc(var(--art-lead, var(--lead, 120ms)) + 40ms) backwards;
}

@keyframes rt-sweep {
	from { transform: translateX(-55%); opacity: 0; }
}

.rt-stage.is-live .rt-shape--pill {
	animation: rt-pill 0.5s var(--e-back) calc(var(--art-lead, var(--lead, 120ms)) + 40ms) backwards;
}

@keyframes rt-pill {
	from { transform: translate(-50%, -50%) scale(0, 0.6); opacity: 0; }
}

.rt-stage.is-live .rt-phone {
	animation: rt-phone-in var(--t-enter) var(--e-enter) var(--art-lead, var(--lead, 120ms)) backwards;
}

@keyframes rt-phone-in {
	from { transform: scale(0.94); opacity: 0; }
}

/* ---------- Motion: what each service does once it has arrived ---------- */

/* Logistics: the planes cruise; on "Our key services" their routes draw in and packets travel them */
.rt-route,
.rt-route-dot {
	fill: none;
	stroke-linecap: round;
	opacity: 0;
}

.rt-route {
	stroke-width: 2.5;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	transition: stroke-dashoffset 0.45s var(--e-exit), opacity 0.2s linear 0.25s;
}

.rt-scene[data-state="1"] .rt-route {
	opacity: 0.55;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset var(--t-move) var(--e-move) calc(150ms + var(--i) * 80ms), opacity 0.1s linear calc(150ms + var(--i) * 80ms);
}

.rt-route-dot {
	stroke-width: 7;
	stroke-dasharray: 0.1 99.9;
	stroke-dashoffset: 100;
	transition: opacity 0.2s ease;
}

.rt-scene.is-live[data-state="1"] .rt-route-dot {
	opacity: 1;
	transition: opacity 0.3s ease calc(700ms + var(--i) * 80ms);
	animation: rt-travel 2.6s linear calc(700ms + var(--i) * -0.65s) infinite;
}

@keyframes rt-travel {
	from { stroke-dashoffset: 100; }
	to { stroke-dashoffset: 0; }
}

.rt-services .rt-scene.is-live .rt-stage__art.is-shared .rt-plane {
	animation: rt-in 0.8s var(--e-enter) calc(var(--art-lead, 0ms) + var(--d, 0ms) * 0.6) backwards, rt-cruise 3.4s ease-in-out calc(1.4s + var(--i) * -0.9s) infinite alternate;
}

.rt-services[data-dir="up"] .rt-scene.is-live .rt-stage__art.is-shared .rt-plane {
	animation: rt-cruise 3.4s ease-in-out calc(var(--i) * -0.9s) infinite alternate;
}

@keyframes rt-cruise {
	from { translate: -5px 5px; }
	to { translate: 7px -7px; }
}

/* Process: the bars build, then the work keeps flowing along them; on "Principles" each row's dot
   ticks as its principle appears (services.js sets --tick to that bullet's moment) */
.rt-services .rt-scene.is-live .rt-stage__art.is-shared .rt-pr-pill {
	animation: rt-grow 0.65s var(--e-enter) calc(var(--art-lead, 0ms) + var(--d, 0ms) * 0.8) backwards, rt-flow 2.6s ease-in-out calc(1s + var(--i) * -0.45s) infinite alternate;
}

.rt-services .rt-scene.is-live .rt-stage__art.is-shared .rt-pr-rail,
.rt-services .rt-scene.is-live .rt-stage__art.is-shared .rt-pr-dot {
	animation: rt-grow 0.65s var(--e-enter) calc(var(--art-lead, 0ms) + var(--d, 0ms) * 0.8) backwards;
}

.rt-services[data-dir="up"] .rt-scene.is-live .rt-stage__art.is-shared .rt-pr-pill {
	animation: rt-flow 2.6s ease-in-out calc(var(--i) * -0.45s) infinite alternate;
}

.rt-services[data-dir="up"] .rt-scene.is-live .rt-stage__art.is-shared .rt-pr-rail,
.rt-services[data-dir="up"] .rt-scene.is-live .rt-stage__art.is-shared .rt-pr-dot {
	animation: none;
}

@keyframes rt-flow {
	from { translate: -14px 0; }
	to { translate: 14px 0; }
}

.rt-services .rt-scene.is-live[data-state="1"] .rt-stage__art.is-shared .rt-pr-dot {
	animation: rt-check 0.5s var(--e-back) var(--tick, 400ms) both;
}

@keyframes rt-check {
	50% { scale: 1.55; }
	100% { scale: 1.2; }
}

/* Cloud: the clouds drift and the green dot keeps a steady pulse ("here as long as you are");
   on "Our key services" small packets of data rise into the cloud */
.rt-services .rt-scene.is-live .rt-stage__art.is-shared .rt-float {
	animation: rt-in 0.8s var(--e-enter) calc(var(--art-lead, 0ms) + var(--d, 0ms) * 0.6) backwards, rt-drift calc(3.2s + var(--i) * 0.7s) ease-in-out calc(1.2s + var(--i) * -1.1s) infinite alternate;
}

.rt-services[data-dir="up"] .rt-scene.is-live .rt-stage__art.is-shared .rt-float {
	animation: rt-drift calc(3.2s + var(--i) * 0.7s) ease-in-out calc(var(--i) * -1.1s) infinite alternate;
}

@keyframes rt-drift {
	from { translate: 0 -6px; }
	to { translate: 0 8px; }
}

.rt-art--clouds [id$="green-circle"] {
	transform-box: fill-box;
	transform-origin: center;
}

.rt-services .rt-scene.is-live .rt-stage__art.is-shared [id$="green-circle"] {
	animation: rt-in 0.8s var(--e-back) calc(var(--art-lead, 0ms) + var(--d, 0ms) * 0.6) backwards, rt-pulse 2.4s ease-in-out 1.4s infinite;
}

@keyframes rt-pulse {
	0%, 100% { scale: 1; }
	12% { scale: 1.16; }
	24% { scale: 1; }
	36% { scale: 1.08; }
	48% { scale: 1; }
}

.rt-packet {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

.rt-scene.is-live[data-state="1"] .rt-packet {
	animation: rt-packet 2.4s var(--e-move) calc(400ms + var(--i) * 0.42s) infinite;
}

@keyframes rt-packet {
	0% { opacity: 0; translate: 0 0; }
	15% { opacity: 1; }
	70% { opacity: 1; translate: 0 -150px; scale: 1; }
	100% { opacity: 0; translate: 0 -175px; scale: 0.4; }
}

/* ---------- Motion: one service handing over to the next (locked) ---------- */

/* the outgoing copy goes first and fast */
.rt-services.is-locked .rt-stage.is-leaving .rt-stage__text,
.rt-services.is-locked .rt-stage.is-leaving .rt-phone__screen {
	animation: rt-exit var(--t-exit) var(--e-exit) forwards;
}

/* a stage's own drawing leaves with it; a shared drawing stays for the whole service */
.rt-services.is-locked .rt-stage.is-leaving .rt-stage__art:not(.is-shared) {
	animation: rt-fade-out var(--t-exit) var(--e-exit) forwards;
}

/* a service leaving for another drifts the way the reader is going; its drawing exits in character */
.rt-services.is-locked .rt-scene.is-exiting {
	opacity: 0;
	transform: translateY(calc(var(--fall) * 2));
	transition: opacity 0.26s var(--e-exit), transform 0.4s var(--e-exit);
}

/* its copy leaves first, as it does within a service (the stage is "held": still shown, not active) */
.rt-services.is-locked .rt-scene.is-exiting .rt-stage.is-held .rt-stage__text {
	animation: rt-exit var(--t-exit) var(--e-exit) forwards;
}

.rt-scene.is-exiting .rt-pr-pill,
.rt-scene.is-exiting .rt-pr-rail,
.rt-scene.is-exiting .rt-pr-dot {
	transform-origin: 100% 50%;
	animation: rt-collapse 0.28s var(--e-exit) calc(var(--i, 0) * 15ms) forwards !important;
}

@keyframes rt-collapse {
	to { scale: 0 1; }
}

.rt-scene.is-exiting .rt-float,
.rt-scene.is-exiting .rt-packet,
.rt-scene.is-exiting [id$="green-circle"] {
	animation: rt-float-out 0.3s var(--e-exit) forwards !important;
}

@keyframes rt-float-out {
	to { translate: 0 -30px; opacity: 0; }
}

.rt-scene.is-exiting .rt-plane,
.rt-scene.is-exiting .rt-route-dot {
	animation: rt-fly-out 0.3s var(--e-exit) calc(var(--i, 0) * 25ms) forwards !important;
}

@keyframes rt-fly-out {
	to { translate: 110px -110px; opacity: 0; }
}

/* ---------- Motion: a service's two drawings morph into each other (locked) ----------
   services.js moves one element between the two shapes (the blue card <-> the dashboard sidebar,
   the small phone <-> the empty phone); these rules hide/hand over the parts around it.
   Hand-over at 560-600 ms. */

/* Web, down: the tiles drop out, the card becomes the sidebar, then the dashboard fills in */
.rt-scene.m-web-down .rt-stage--0 .rt-w1-card,
.rt-scene.m-web-up .rt-stage--0 .rt-w1-card {
	opacity: 0;
	animation: none !important;
}

.rt-scene.m-web-down .rt-stage--0 .rt-w1-line {
	animation: rt-fade-out 0.16s ease forwards !important;
}

.rt-scene.m-web-down .rt-stage--0 .rt-w1-tile {
	animation: rt-drop 0.45s var(--e-gravity) calc(var(--i, 0) * 50ms) forwards !important;
}

@keyframes rt-drop {
	to { translate: 0 var(--fy, 300px); rotate: var(--fr, 8deg); opacity: 0; }
}

.rt-services.is-locked .rt-scene.m-web-down .rt-stage--0 .rt-stage__art,
.rt-services.is-locked .rt-scene.m-app-down .rt-stage--0 .rt-stage__art {
	opacity: 1;
	animation: rt-fade-out 0.06s linear 0.58s forwards !important;
}

.rt-scene.m-web-down .rt-stage--1 .rt-art--dashboard {
	animation: rt-fade-in 0.06s linear 0.56s backwards;
}

.rt-scene.m-web-down .rt-stage--1 .rt-w2-side,
.rt-scene.m-web-down .rt-stage--1 .rt-w2-bar {
	animation: none !important;
}

.rt-scene.m-web-down .rt-stage--1 .rt-w2-bar {
	animation: rt-fade-in 0.35s ease calc(600ms + var(--i, 0) * 30ms) backwards !important;
}

.rt-scene.m-web-down .rt-stage--1 .rt-w2-box,
.rt-scene.m-web-down .rt-stage--1 .rt-w2-foot {
	animation: rt-box-in 0.5s var(--e-back) calc(620ms + var(--i, 0) * 55ms) backwards !important;
}

@keyframes rt-box-in {
	from { opacity: 0; scale: 0.8; }
}

.rt-scene.m-web-down .rt-stage--1 .rt-shape--pink {
	animation: rt-sweep var(--t-move) var(--e-enter) 120ms backwards !important;
}

/* Web, up: the dashboard empties, the sidebar opens back into the card, the tiles fly back up */
.rt-services.is-locked .rt-scene.m-web-up .rt-stage--1 .rt-stage__art {
	opacity: 1;
	animation: none !important;
}

.rt-scene.m-web-up .rt-stage--1 .rt-art--dashboard {
	animation: rt-fade-out 0.15s linear forwards !important;
}

.rt-scene.m-web-up .rt-stage--1 .rt-shape--pink {
	animation: rt-sweep-out 0.35s var(--e-exit) forwards !important;
}

@keyframes rt-sweep-out {
	to { transform: translateX(-55%); opacity: 0; }
}

.rt-scene.m-web-up .rt-stage--0 .rt-a:not(.rt-w1-card) {
	animation: none !important;
}

.rt-scene.m-web-up .rt-stage--0 .rt-w1-card {
	animation: rt-fade-in 0.01s linear 0.58s backwards !important;
	opacity: 1;
}

.rt-scene.m-web-up .rt-stage--0 .rt-w1-line {
	animation: rt-fade-in 0.3s ease calc(600ms + var(--i, 0) * 30ms) backwards !important;
}

.rt-scene.m-web-up .rt-stage--0 .rt-w1-tile {
	animation: rt-undrop 0.5s var(--e-enter) calc(150ms + var(--i, 0) * 60ms) backwards !important;
}

@keyframes rt-undrop {
	from { translate: 0 var(--fy, 300px); rotate: var(--fr, 8deg); opacity: 0; }
}

/* App, down: the phone body hands over to the empty phone, which grows into place; the tiles fall */
.rt-scene.m-app-down .rt-stage--0 .rt-a1-body {
	opacity: 0;
}

.rt-scene.m-app-down .rt-stage--0 .rt-drop {
	animation: rt-drop 0.45s var(--e-gravity) calc(var(--fd, 0ms) * 0.5) forwards !important;
}

.rt-scene.m-app-down .rt-stage--0 .rt-shape--pill {
	animation: rt-pill-out 0.35s var(--e-move) 80ms forwards !important;
}

@keyframes rt-pill-out {
	to { transform: translate(-50%, -50%) scale(0, 0.5); opacity: 0; }
}

.rt-scene.m-app-down .rt-phone,
.rt-scene.m-app-up .rt-phone {
	background: transparent;
	animation: none !important;
}

.rt-scene.m-app-down .rt-stage--1 {
	--lead: 480ms;
}

.rt-scene.m-app-down .rt-stage--1 .rt-stage__text {
	--lead: 260ms;
}

/* App, up: the empty phone shrinks back into the small one, the tiles return, the pill opens */
.rt-services.is-locked .rt-scene.m-app-up .rt-stage--1 .rt-stage__art {
	opacity: 1;
	animation: rt-fade-out 0.06s linear 0.58s forwards !important;
}

.rt-scene.m-app-up .rt-stage--1 .rt-phone__screen {
	animation: rt-fade-out 0.15s linear forwards !important;
}

.rt-scene.m-app-up .rt-stage--0 .rt-a1-body {
	animation: rt-fade-in 0.06s linear 0.58s backwards !important;
}

.rt-scene.m-app-up .rt-stage--0 .rt-a:not(.rt-drop) {
	animation: none !important;
}

.rt-scene.m-app-up .rt-stage--0 .rt-drop {
	animation: rt-undrop 0.5s var(--e-enter) calc(450ms + var(--i, 0) * 60ms) backwards !important;
}

.rt-scene.m-app-up .rt-stage--0 .rt-shape--pill {
	animation: rt-pill 0.45s var(--e-back) 0.5s backwards !important;
}

/* once a morph has finished, the drawing it built simply stays: nothing replays when the m- class goes */
.rt-services.is-locked .rt-stage.is-settled:not(.is-leaving) .rt-stage__art,
.rt-services.is-locked .rt-stage.is-settled:not(.is-leaving) .rt-stage__art * {
	animation: none;
}

/* the moving piece the morphs fly (created by services.js) */
.rt-flight {
	position: absolute;
	z-index: 5;
	pointer-events: none;
	background: #47c7ef;
	border-radius: 7px;
}

/* ---------- Locked stage ---------- */

.rt-services.is-locked {
	--stage-h: calc(100vh - var(--rt-header));
	height: calc(var(--stages) * var(--stage-h));
}

.rt-services.is-locked .rt-services__marks {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.rt-services.is-locked .rt-anchor {
	scroll-margin-top: var(--rt-header);
}

.rt-services.is-locked .rt-services__stage {
	position: sticky;
	top: var(--rt-header);
	height: var(--stage-h);
	overflow: hidden;
	background: #ffffff;
	transition: background-color var(--t-move) var(--e-move);
}

.rt-services.is-locked[data-tone="mist"] .rt-services__stage {
	background: var(--mist);
}

.rt-services.is-locked .rt-tabs {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
}

.rt-services.is-locked .rt-scene {
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: var(--tabs-h) var(--gutter) 30px;
	background: transparent;
	opacity: 0;
	pointer-events: none;
}

/* inactive services and stages are transparent, not hidden: keyboard and screen reader users can
   still reach every one, and services.js scrolls the stage to whatever gets focus */
.rt-services.is-locked .rt-scene.is-active,
.rt-services.is-locked .rt-scene.is-under {
	opacity: 1;
	pointer-events: auto;
}

.rt-services.is-locked .rt-scene:not(.rt-scene--cards) .rt-stage {
	position: absolute;
	inset: var(--tabs-h) var(--gutter) 30px;
	/* every stage of a service shares one top line (services.js sets --top so the tallest
	   stage is centred); as in the mockup, the heading lines up with the top of the art */
	padding: var(--top, 40px) 0 0;
	grid-template-rows: auto;
	align-items: start;
	align-content: start;
	pointer-events: none;
}

.rt-services.is-locked .rt-stage.is-active {
	pointer-events: auto;
}

.rt-services.is-locked .rt-scene:not(.rt-scene--cards) .rt-stage__art {
	grid-row: 1;
	min-height: 0;
	align-self: start;
}

.rt-services.is-locked .rt-scene:not(.rt-scene--cards) .rt-stage__text {
	grid-row: 1;
	align-self: start;
}

/* App, second stage: the tools sit against the middle of the tall phone, as in the mockup */
.rt-services.is-locked .rt-scene--app-development .rt-stage--1 .rt-stage__text {
	align-self: center;
}

/* inactive stages: copy gone, their own drawing gone; a shared drawing stays for the whole service */
.rt-services.is-locked .rt-scene:not(.rt-scene--cards) .rt-stage:not(.is-active):not(.is-leaving):not(.is-held) .rt-stage__text,
.rt-services.is-locked .rt-scene:not(.rt-scene--cards) .rt-stage:not(.is-active):not(.is-leaving):not(.is-held) .rt-stage__art:not(.is-shared) {
	opacity: 0;
}

/* The Deep Data band is a curtain with a softly bowed edge: it rises over the light page on the way
   down and lifts away upward when the reader carries on (the reverse on the way back). It carries
   its own dark tab strip, so nothing light ever shows through it. */
.rt-services.is-locked .rt-scene--cards {
	z-index: 8;
	display: flex;
	align-items: center;
	opacity: 1;
	background: var(--deep);
	clip-path: ellipse(170% 0% at 50% 100%);
	pointer-events: none;
}

.rt-services.is-locked .rt-scene--cards.is-active {
	clip-path: none;
	pointer-events: auto;
}

.rt-services.is-locked[data-curtain="in-down"] .rt-scene--cards { animation: rt-curtain-rise 0.65s var(--e-curtain) both; }
.rt-services.is-locked[data-curtain="in-up"] .rt-scene--cards { animation: rt-curtain-fall 0.65s var(--e-curtain) both; }
.rt-services.is-locked[data-curtain="out-down"] .rt-scene--cards { animation: rt-curtain-lift 0.65s var(--e-curtain) both; }
.rt-services.is-locked[data-curtain="out-up"] .rt-scene--cards { animation: rt-curtain-drop 0.65s var(--e-curtain) both; }

@keyframes rt-curtain-rise { from { clip-path: ellipse(170% 0% at 50% 100%); } to { clip-path: ellipse(170% 116% at 50% 100%); } }
@keyframes rt-curtain-fall { from { clip-path: ellipse(170% 0% at 50% 0%); } to { clip-path: ellipse(170% 116% at 50% 0%); } }
@keyframes rt-curtain-lift { from { clip-path: ellipse(170% 116% at 50% 0%); } to { clip-path: ellipse(170% 0% at 50% 0%); } }
@keyframes rt-curtain-drop { from { clip-path: ellipse(170% 116% at 50% 100%); } to { clip-path: ellipse(170% 0% at 50% 100%); } }

.rt-services.is-locked .rt-tabs--dark {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
}

.rt-services.is-locked .rt-cards {
	width: 100%;
	padding: 0;
}

/* Deep Data: its particle wave fills the whole band behind the content (the original wave, from
   the cards' corner to edge to edge) */
.rt-scene--cards > .rt-deepwave {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* while the band is hidden under the light services, its wave stands still */
.rt-services.is-locked .rt-scene--cards:not(.is-active):not(.is-live) .rt-deepwave * {
	animation-play-state: paused !important;
}

.rt-scene--cards .rt-cards {
	position: relative;
	z-index: 1;
}

.rt-services .rt-cards__wave {
	display: none !important;
}

.rt-services.is-locked .rt-scene--cards .rt-stage {
	position: absolute;
	padding: 34px 30px;
}

/* compact type for short windows */
.rt-services.is-locked.is-compact h4.rt-h { font-size: 32px !important; margin-bottom: 20px !important; }
.rt-services.is-locked.is-compact h5.rt-h { font-size: 24px !important; line-height: 27px !important; margin-bottom: 16px !important; }
.rt-services.is-locked.is-compact .rt-lede { font-size: 19px !important; line-height: 26px !important; margin-bottom: 18px !important; }
.rt-services.is-locked.is-compact .rt-copy p { font-size: 15px !important; line-height: 22px !important; margin-bottom: 14px !important; }
.rt-services.is-locked.is-compact .rt-copy + .rt-h { margin-top: 26px !important; }
.rt-services.is-locked.is-compact .rt-tools { margin-top: 20px; padding-top: 22px; }
.rt-services.is-locked.is-compact .rt-tools .rooteam-gallery-images li { margin-bottom: 14px !important; }
.rt-services.is-locked.is-compact .rt-tools .rooteam-gallery-images li { width: 30%; margin-right: 3%; }
.rt-services.is-locked.is-compact .rt-tools .rooteam-gallery-images img { max-height: 30px; }
.rt-services.is-locked.is-compact .rt-list .icon-with-text-group li { margin-bottom: 8px !important; }
.rt-services.is-locked.is-compact .rt-phone { min-height: min(470px, 62vh); padding: 48px 28px 30px; }
.rt-services.is-locked.is-compact .rt-cards__rail,
.rt-services.is-locked.is-compact .rt-cards__intro { height: 290px; min-height: 290px; }
.rt-services.is-locked.is-compact .rt-cards__wave { height: 220px; }

/* a tab jump cuts straight to the service: nothing in between animates */
.rt-services.is-locked.is-jumping .rt-scene,
.rt-services.is-locked.is-jumping .rt-scene * {
	transition: none !important;
}

.rt-services.is-locked.is-jumping .rt-scene--cards {
	animation: none !important;
}

/* ---------- Deep Data cards whenever the page is not locked: a swipeable row ---------- */

.rt-services:not(.is-locked) .rt-cards {
	grid-template-columns: minmax(0, 1fr);
	/* the mobile mockup's order: intro, the particle wave, the cards to swipe, their dots, tools */
	grid-template-areas: "intro" "wave" "rail" "dots" "closing";
}

.rt-services:not(.is-locked) .rt-cards__wave {
	height: 190px;
	margin: -20px calc(var(--gutter) * -1) 6px;
}

.rt-services:not(.is-locked) .rt-cards__intro {
	min-height: 0;
	padding: 20px 0 30px;
}

.rt-services:not(.is-locked) .rt-cards__rail {
	height: auto;
	margin: 0 calc(var(--gutter) * -1);
	padding: 0 var(--gutter) 6px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--gutter);
	scrollbar-width: none;
	-webkit-mask-image: none;
	mask-image: none;
}

.rt-services:not(.is-locked) .rt-cards__track {
	position: static;
	display: flex;
	gap: 16px;
}

.rt-services:not(.is-locked) .rt-card {
	position: relative;
	left: auto;
	flex: 0 0 auto;
	width: min(78vw, 300px);
	min-height: 280px;
	padding: 30px 28px 34px;
	opacity: 1;
	transform: none;
	background: #1d4a5d;
	scroll-snap-align: start;
}

/* a single nudge the first time the cards come into view: there is more to swipe */
.rt-services:not(.is-locked) .rt-cards__rail.is-hinting .rt-cards__track {
	animation: rt-nudge 1.1s var(--e-move) 0.25s both;
}

@keyframes rt-nudge {
	0%, 100% { transform: none; }
	45% { transform: translateX(-46px); }
}

/* every card shows its text in the long page (the blank neighbours are a locked-stage effect) */
.rt-services:not(.is-locked) .rt-card > * {
	opacity: 1;
}

.rt-services:not(.is-locked) .rt-card--ghost {
	display: none;
}

/* the dots follow the swipe and take a tap */
.rt-services:not(.is-locked) .rt-cards__dots {
	gap: 0;
	padding: 6px 0 0;
	margin-left: -10px;
}

.rt-services:not(.is-locked) .rt-cards__dots i {
	box-sizing: content-box;
	padding: 12px 5px;
	background-clip: content-box;
	cursor: pointer;
}

.rt-services:not(.is-locked) .rt-cards__closing {
	padding: 30px 0 0;
}

/* ---------- Flow: tablets ---------- */

@media (max-width: 999px) {
	.rt-services {
		--gutter: 32px;
	}

	.rt-stage__text {
		max-width: 400px;
		padding-left: 30px;
	}

}

/* ---------- Flow: phones (illustration above its copy, as in the mobile mockup) ---------- */

@media (max-width: 767px) {
	.rt-services {
		--gutter: 22px;
		--tabs-h: 58px;
	}

	.rt-tabs__track {
		gap: 20px;
	}

	.rt-tabs__track a {
		font-size: 14px;
	}

	.rt-scene {
		padding: 10px var(--gutter) 50px;
	}

	.rt-stage {
		grid-template-columns: minmax(0, 1fr);
		padding: 30px 0;
	}

	.rt-stage__art,
	.rt-stage__text {
		grid-column: 1;
	}

	.rt-stage__art {
		min-height: 0;
		margin-bottom: 34px;
	}

	.rt-stage__text {
		max-width: none;
		padding-left: 0;
	}

	.rt-shape--pink {
		top: 30%;
		height: 150px;
		right: 18%;
	}

	.rt-shape--pill {
		height: 150px;
	}

	.rt-art--phone .rt-svg {
		height: 320px;
	}

	.rt-phone {
		width: min(300px, 86%);
		min-height: 0;
	}

	.rt-cards__wave {
		height: 200px;
	}
}

/* ---------- Reduced motion: no movement; everything in its final place ---------- */

@media (prefers-reduced-motion: reduce) {
	.rt-services *,
	.rt-services *::before,
	.rt-services *::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}

	.rt-services .rt-r {
		opacity: 1 !important;
	}

	.rt-services .rt-tools::before {
		transform: none !important;
	}
}


/* ---------- Service tabs, desktop: the whole row, numbered, with a gliding marker ----------
   (Services page and homepage.) All six services sit evenly across the width on a hairline track;
   a 2px marker in the current service's colour glides along it. Below 1000px the tabs stay the
   swipeable strip that brings the current service to the left edge. */

.rt-tabs__n {
	display: inline-block;
	margin-right: 9px;
	font-size: 11px;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
	opacity: 0.55;
	transform: translateY(-1px);
	transition: opacity var(--t-move, 600ms) var(--e-move, ease), color var(--t-move, 600ms) var(--e-move, ease);
}

.rt-tabs__track a[aria-current] .rt-tabs__n {
	opacity: 1;
	color: var(--ink-c, currentColor);
}

@media (min-width: 1000px) {
	.rt-tabs__viewport {
		width: 100%;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.rt-tabs__track {
		justify-content: space-between;
		padding: 0 var(--gutter) !important;
		transform: none !important;
	}

	/* the track the marker runs on */
	.rt-tabs__viewport::before {
		content: "";
		position: absolute;
		left: var(--gutter);
		right: var(--gutter);
		top: var(--ink-y, 52px);
		height: 1px;
		background: rgba(66, 66, 66, 0.1);
	}

	.rt-tabs--dark .rt-tabs__viewport::before,
	.rt-hs.is-dark .rt-tabs__viewport::before,
	.rt-services:not(.is-locked)[data-tone="dark"] .rt-tabs__viewport::before {
		background: rgba(255, 255, 255, 0.12);
	}

	.rt-tabs__ink {
		left: 0;
		top: calc(var(--ink-y, 52px) - 0.5px);
		height: 2px;
		border-radius: 2px;
		background: var(--ink-c, #424242);
		transform: translateX(var(--ink-x, var(--gutter)));
		transition: transform var(--t-move) var(--e-move), width var(--t-move) var(--e-move), background-color 0.4s ease;
	}

	.rt-tabs--dark .rt-tabs__ink,
	.rt-hs.is-dark .rt-tabs__ink {
		background: var(--ink-c, #47c7ef);
	}
}