/* =========================================================================
   Remote Support Hub — Front-End Design System
   Hand-authored (no build step — Node isn't available in this environment),
   organized so it reads like a small design-token-driven system rather
   than a template stylesheet. Token *values* are injected as CSS custom
   properties by RSH\Rendering\FrontendAssets from Design Settings; the
   :root block below only supplies safe fallbacks so the site still looks
   correct even before that inline block loads.
   ========================================================================= */

:root {
	--rsh-color-primary: #0F2A43;
	--rsh-color-primary-dark: #081826;
	--rsh-color-secondary: #F4EBDD;
	--rsh-color-accent: #2F6BFF;
	--rsh-color-bg: #FFFFFF;
	--rsh-color-surface: #FFFFFF;
	--rsh-color-text: #101418;
	--rsh-color-muted: #5B6570;
	--rsh-color-border: #E4DFD6;
	--rsh-color-success: #2F7A4F;
	--rsh-color-error: #B3432B;

	--rsh-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--rsh-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--rsh-radius: 10px;
	--rsh-radius-lg: 20px;
	--rsh-container: 1240px;

	/* Fixed spacing scale — an 8px rhythm kept consistent across every section. */
	--rsh-space-1: 8px;
	--rsh-space-2: 16px;
	--rsh-space-3: 24px;
	--rsh-space-4: 32px;
	--rsh-space-5: 48px;
	--rsh-space-6: 64px;
	--rsh-space-7: 96px;
	--rsh-space-8: 128px;

	--rsh-shadow-sm: 0 1px 2px rgba(16, 24, 32, 0.06);
	--rsh-shadow-md: 0 8px 24px rgba(16, 24, 32, 0.08);
	--rsh-shadow-lg: 0 24px 64px rgba(16, 24, 32, 0.12);

	--rsh-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset / base ---------- */

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

html { scroll-behavior: smooth; }

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

body {
	margin: 0;
	background: var(--rsh-color-bg);
	color: var(--rsh-color-text);
	font-family: var(--rsh-font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Visually hides text meant only for screen readers (e.g. an icon-only
   button's accessible name) without removing it from the accessibility
   tree — the standard WordPress-recommended pattern. This theme never
   defined it before, so any .screen-reader-text was rendering visibly. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* CSS Grid/Flexbox items default to min-width:auto, which lets a child
   image's intrinsic (full-resolution) size force the whole track wider
   than the viewport regardless of `max-width:100%` on the image itself —
   the classic cause of small-screen horizontal overflow/clipped content.
   Every grid container that can hold an image slot gets its direct
   children reset to min-width:0 so they shrink with the track instead. */
.rsh-grid > *,
.rsh-split > *,
.rsh-hero__inner > *,
.rsh-bali-feature__grid > *,
.rsh-richtext__split > * {
	min-width: 0;
}

.rsh-media-slot {
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}

.rsh-media-slot img {
	min-width: 0;
	width: 100%;
}

a { color: inherit; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--rsh-font-heading);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 var(--rsh-space-2);
	color: var(--rsh-color-primary);
	letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); font-weight: 800; }
h3 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); }
h4 { font-size: 1.125rem; font-weight: 700; }

p { margin: 0 0 var(--rsh-space-2); color: var(--rsh-color-text); }

.rsh-lede {
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	color: var(--rsh-color-muted);
	max-width: 60ch;
}

.rsh-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--rsh-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--rsh-color-accent);
	margin-bottom: var(--rsh-space-3);
	padding: 7px 16px 7px 12px;
	background: color-mix(in srgb, var(--rsh-color-accent) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--rsh-color-accent) 22%, transparent);
	border-radius: 999px;
}

.rsh-eyebrow::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--rsh-color-accent);
	display: inline-block;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rsh-color-accent) 20%, transparent);
}

.rsh-section--dark .rsh-eyebrow {
	color: #fff;
	background: rgba(255,255,255,0.1);
	border-color: rgba(255,255,255,0.2);
}
.rsh-section--dark .rsh-eyebrow::before { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.2); }

/* ---------- Grain texture: subtle editorial-print noise over every
   section, barely perceptible but adds tactile, premium depth instead of
   flat digital color fields. ---------- */

body {
	position: relative;
}

body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.025;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	mix-blend-mode: overlay;
}

/* ---------- Layout primitives ---------- */

.rsh-container {
	max-width: var(--rsh-container);
	margin-inline: auto;
	padding-inline: var(--rsh-space-3);
}

@media (min-width: 640px) {
	.rsh-container { padding-inline: var(--rsh-space-4); }
}

.rsh-section {
	padding-block: var(--rsh-space-6);
}

@media (min-width: 900px) {
	.rsh-section { padding-block: var(--rsh-space-7); }
}

.rsh-section--tight { padding-block: var(--rsh-space-5); }
.rsh-section--surface { background: var(--rsh-color-surface); }
.rsh-section--dark {
	background: var(--rsh-color-primary);
	color: #fff;
}
.rsh-section--dark h1, .rsh-section--dark h2, .rsh-section--dark h3 { color: #fff; }
.rsh-section--dark p { color: rgba(255,255,255,0.78); }

.rsh-grid {
	display: grid;
	gap: var(--rsh-space-3);
}

.rsh-grid--2 { grid-template-columns: repeat(1, 1fr); }
.rsh-grid--3 { grid-template-columns: repeat(1, 1fr); }
.rsh-grid--4 { grid-template-columns: repeat(1, 1fr); }
.rsh-grid--5 { grid-template-columns: repeat(1, 1fr); }

@media (min-width: 640px) {
	.rsh-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.rsh-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.rsh-grid--5 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.rsh-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.rsh-grid--4 { grid-template-columns: repeat(4, 1fr); }
	.rsh-grid--5 { grid-template-columns: repeat(5, 1fr); }
}

.rsh-split {
	display: grid;
	gap: var(--rsh-space-4);
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.rsh-split { grid-template-columns: 1fr 1fr; gap: var(--rsh-space-6); }
	.rsh-split--reverse { direction: rtl; }
	.rsh-split--reverse > * { direction: ltr; }
}

.rsh-text-center { text-align: center; }
.rsh-max-content { max-width: 720px; margin-inline: auto; }

/* ---------- Buttons ---------- */

.rsh-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 999px;
	font-family: var(--rsh-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	overflow: hidden;
	transition: transform 0.2s var(--rsh-ease), box-shadow 0.2s var(--rsh-ease), background-color 0.2s var(--rsh-ease), color 0.2s var(--rsh-ease);
	white-space: nowrap;
}

.rsh-btn__icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	flex: none;
}

.rsh-btn__icon svg { width: 100%; height: 100%; }

.rsh-btn--primary {
	background: var(--rsh-color-accent);
	color: #fff;
	box-shadow: var(--rsh-shadow-sm);
}

.rsh-btn--primary::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
	background-size: 250% 100%;
	background-position: 150% 0;
	transition: background-position 0.7s var(--rsh-ease);
}

.rsh-btn--primary:hover::before { background-position: -50% 0; }

.rsh-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: var(--rsh-shadow-md);
	background: color-mix(in srgb, var(--rsh-color-accent) 88%, black);
}

.rsh-btn--secondary {
	background: transparent;
	color: var(--rsh-color-primary);
	border-color: var(--rsh-color-border);
}

.rsh-btn--secondary:hover {
	border-color: var(--rsh-color-primary);
	transform: translateY(-2px);
}

.rsh-section--dark .rsh-btn--secondary {
	color: #fff;
	border-color: rgba(255,255,255,0.35);
}

.rsh-section--dark .rsh-btn--secondary:hover { border-color: #fff; }

.rsh-btn--ghost {
	background: transparent;
	color: var(--rsh-color-primary);
	padding: 6px 0;
	border-radius: 0;
	font-weight: 600;
}

.rsh-btn--ghost::after {
	content: '\2192';
	transition: transform 0.2s var(--rsh-ease);
}

.rsh-btn--ghost:hover::after { transform: translateX(4px); }

/* ---------- Cards ---------- */

.rsh-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--rsh-color-border);
	border-radius: var(--rsh-radius-lg);
	padding: var(--rsh-space-4);
	box-shadow: var(--rsh-shadow-sm);
	transition: transform 0.35s var(--rsh-ease), box-shadow 0.35s var(--rsh-ease), border-color 0.35s var(--rsh-ease);
	isolation: isolate;
}

/* Premium glow: a soft accent-colored halo that fades in behind the card
   on hover, plus a gradient-tinted border — more expensive-feeling than a
   flat shadow bump alone. */
.rsh-card::before {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--rsh-color-accent) 55%, transparent), transparent 60%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.35s var(--rsh-ease);
	z-index: -1;
}

.rsh-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 4px 8px rgba(16,24,32,0.05), 0 20px 40px -8px color-mix(in srgb, var(--rsh-color-accent) 22%, rgba(16,24,32,0.12));
	border-color: transparent;
}

.rsh-card:hover::before { opacity: 1; }

.rsh-card__icon {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--rsh-color-accent) 12%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rsh-color-accent);
	margin-bottom: var(--rsh-space-2);
	transition: transform 0.35s var(--rsh-ease), background-color 0.35s var(--rsh-ease);
}

.rsh-card__icon svg { width: 24px; height: 24px; }

.rsh-card:hover .rsh-card__icon {
	transform: scale(1.1) rotate(-4deg);
	background: var(--rsh-color-accent);
	color: #fff;
}

.rsh-card h3 { margin-bottom: 8px; }
.rsh-card p { color: var(--rsh-color-muted); margin-bottom: 0; }

/* ---------- Header placeholder image / media slot ---------- */

.rsh-media-slot {
	position: relative;
	border-radius: var(--rsh-radius-lg);
	overflow: hidden;
	background: linear-gradient(135deg, var(--rsh-color-secondary), var(--rsh-color-surface));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rsh-color-accent);
	min-height: 220px;
	box-shadow: var(--rsh-shadow-sm);
}

.rsh-media-slot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--rsh-ease);
}

/* Premium image zoom on hover — applied wherever a media slot sits inside
   a hoverable card/link/split layout, not just standalone. */
a:hover .rsh-media-slot img,
.rsh-card:hover .rsh-media-slot img,
.rsh-split:hover .rsh-media-slot img,
.rsh-hero__media:hover .rsh-media-slot img {
	transform: scale(1.06);
}

.rsh-media-slot--placeholder::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(135deg, color-mix(in srgb, var(--rsh-color-accent) 6%, transparent) 0 2px, transparent 2px 24px);
}

/* Subtle animated sheen sweeping across placeholder slots — keeps
   image-less sections feeling alive and premium rather than static/flat. */
.rsh-media-slot--placeholder::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 48%, transparent 66%);
	background-size: 220% 100%;
	background-position: 120% 0;
	animation: rsh-sheen 7s ease-in-out infinite;
	pointer-events: none;
}

@keyframes rsh-sheen {
	0%, 40% { background-position: 120% 0; }
	60%, 100% { background-position: -20% 0; }
}

.rsh-media-slot__mark {
	position: relative;
	z-index: 1;
	font-family: var(--rsh-font-heading);
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rsh-color-primary);
	opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
	.rsh-media-slot--placeholder::after { animation: none; }
	.rsh-media-slot img { transition: none; }
}

/* ---------- Skip link ---------- */

.rsh-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--rsh-color-primary);
	color: #fff;
	padding: 12px 20px;
	z-index: 9999;
	border-radius: 0 0 8px 0;
}

.rsh-skip-link:focus { left: 0; }

/* ---------- Focus states (accessibility) ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--rsh-color-accent);
	outline-offset: 2px;
}

/* ---------- Scroll reveal (JS toggles .is-visible; see interactions.js) ---------- */

[data-rsh-reveal] {
	opacity: 0;
	transform: translateY(28px) scale(0.97);
	transition: opacity 0.8s var(--rsh-ease), transform 0.8s var(--rsh-ease);
	will-change: opacity, transform;
}

[data-rsh-reveal].is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	[data-rsh-reveal] { opacity: 1; transform: none; }
}

.rsh-fallback-content { padding-block: var(--rsh-space-6); }

/* =========================================================================
   Header
   ========================================================================= */

.rsh-header {
	position: relative;
	z-index: 100;
	background: rgba(255,255,255,0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: box-shadow 0.25s var(--rsh-ease), border-color 0.25s var(--rsh-ease), background-color 0.25s var(--rsh-ease);
}

.rsh-header--sticky { position: sticky; top: 0; }

.rsh-header.is-scrolled {
	border-color: var(--rsh-color-border);
	box-shadow: var(--rsh-shadow-sm);
}

.rsh-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rsh-space-3);
	padding-block: 18px;
}

.rsh-header__logo { text-decoration: none; display: flex; align-items: center; }

.rsh-header__logo-text {
	font-family: var(--rsh-font-heading);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--rsh-color-primary);
	letter-spacing: -0.01em;
}

.rsh-header__nav { display: none; }

@media (min-width: 1024px) {
	.rsh-header__nav { display: block; }
}

.rsh-header__nav-list {
	display: flex;
	align-items: center;
	gap: var(--rsh-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.rsh-header__nav-list > li { position: relative; }

.rsh-header__nav-list > li > a {
	position: relative;
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9375rem;
	color: var(--rsh-color-text);
	transition: color 0.2s var(--rsh-ease);
	padding-bottom: 2px;
}

.rsh-header__nav-list > li > a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -2px;
	height: 2px;
	background: var(--rsh-color-accent);
	transition: right 0.25s var(--rsh-ease);
}

.rsh-header__nav-list > li > a:hover { color: var(--rsh-color-accent); }
.rsh-header__nav-list > li > a:hover::after { right: 0; }

.rsh-header__nav-list > li.has-children > a::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-left: 6px;
	opacity: 0.6;
}

.rsh-header__submenu {
	list-style: none;
	margin: 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 260px;
	background: #fff;
	border: 1px solid var(--rsh-color-border);
	border-radius: var(--rsh-radius);
	box-shadow: var(--rsh-shadow-md);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s var(--rsh-ease), transform 0.18s var(--rsh-ease), visibility 0.18s;
}

.rsh-header__nav-list > li.has-children:hover .rsh-header__submenu,
.rsh-header__nav-list > li.has-children:focus-within .rsh-header__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.rsh-header__submenu a {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	text-decoration: none;
	font-size: 0.9rem;
	color: var(--rsh-color-text);
}

.rsh-header__submenu a:hover { background: var(--rsh-color-surface); color: var(--rsh-color-accent); }

.rsh-header__nav-list > li.has-mega > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.rsh-header__nav-list > li.has-mega > a::after {
	content: '';
	flex: none;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.55;
	transition: transform 0.2s var(--rsh-ease);
}

.rsh-header__nav-list > li.has-mega:hover > a::after,
.rsh-header__nav-list > li.has-mega:focus-within > a::after {
	transform: rotate(180deg);
}

.rsh-mega-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 6px);
	width: min(640px, 90vw);
	background: #fff;
	border: 1px solid var(--rsh-color-border);
	border-radius: var(--rsh-radius);
	box-shadow: var(--rsh-shadow-md);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s var(--rsh-ease), transform 0.18s var(--rsh-ease), visibility 0.18s;
}

.rsh-header__nav-list > li.has-mega:hover .rsh-mega-menu,
.rsh-header__nav-list > li.has-mega:focus-within .rsh-mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.rsh-mega-menu__inner { padding: 20px; }

.rsh-mega-menu__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 20px;
}

.rsh-mega-menu__col { list-style: none; margin: 0; padding: 0; }

.rsh-mega-menu__col a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	text-decoration: none;
	font-size: 0.9rem;
	color: var(--rsh-color-text);
	transition: background 0.15s var(--rsh-ease), color 0.15s var(--rsh-ease);
}

.rsh-mega-menu__col a:hover { background: var(--rsh-color-surface); color: var(--rsh-color-accent); }

.rsh-mega-menu__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--rsh-color-surface);
	color: var(--rsh-color-accent);
}

.rsh-mega-menu__icon svg { width: 15px; height: 15px; }

.rsh-mega-menu__all {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 14px;
	padding: 12px;
	border-top: 1px solid var(--rsh-color-border);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--rsh-color-accent);
}

.rsh-header__actions { display: flex; align-items: center; gap: var(--rsh-space-2); }

.rsh-header__cta { display: none; }

@media (min-width: 640px) {
	.rsh-header__cta { display: inline-flex; }
}

.rsh-header__burger {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 30px;
	height: 22px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

@media (min-width: 1024px) {
	.rsh-header__burger { display: none; }
}

.rsh-header__burger span {
	display: block;
	height: 2px;
	background: var(--rsh-color-primary);
	border-radius: 2px;
	transition: transform 0.25s var(--rsh-ease), opacity 0.25s var(--rsh-ease);
}

.rsh-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.rsh-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.rsh-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.rsh-mobile-nav {
	display: none;
	flex-direction: column;
	gap: var(--rsh-space-2);
	padding: var(--rsh-space-2) var(--rsh-space-3) var(--rsh-space-4);
	border-top: 1px solid var(--rsh-color-border);
}

.rsh-mobile-nav.is-open { display: flex; }

@media (min-width: 1024px) {
	.rsh-mobile-nav { display: none !important; }
}

.rsh-mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.rsh-mobile-nav__flat,
.rsh-mobile-nav__group-panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rsh-mobile-nav__flat > li > a,
.rsh-mobile-nav__group-panel a {
	display: block;
	padding: 12px 4px;
	text-decoration: none;
	font-weight: 500;
	color: var(--rsh-color-text);
	border-bottom: 1px solid var(--rsh-color-border);
}

.rsh-mobile-nav__group-panel a { padding-left: var(--rsh-space-3); font-weight: 400; font-size: 0.9375rem; }

.rsh-mobile-nav__group-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 12px 4px;
	background: none;
	border: none;
	border-bottom: 1px solid var(--rsh-color-border);
	font-family: inherit;
	font-weight: 500;
	font-size: 1rem;
	color: var(--rsh-color-text);
	cursor: pointer;
}

.rsh-mobile-nav__chevron {
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s var(--rsh-ease);
}

.rsh-mobile-nav__group.is-open .rsh-mobile-nav__chevron { transform: rotate(225deg); }

.rsh-mobile-nav__group-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s var(--rsh-ease);
}

.rsh-mobile-nav__cta { align-self: flex-start; margin-top: var(--rsh-space-2); }

/* =========================================================================
   Footer
   ========================================================================= */

.rsh-footer {
	position: relative;
	background:
		radial-gradient(760px 420px at 12% -10%, color-mix(in srgb, var(--rsh-color-accent) 10%, transparent), transparent 65%),
		linear-gradient(180deg, var(--rsh-color-primary-dark), #050f1a);
	color: rgba(255,255,255,0.82);
}

.rsh-footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rsh-color-accent) 55%, transparent), transparent);
}

.rsh-footer__inner {
	display: grid;
	gap: var(--rsh-space-5);
	grid-template-columns: 1fr;
	padding-block: var(--rsh-space-7) var(--rsh-space-6);
}

@media (min-width: 640px) {
	.rsh-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
	.rsh-footer__inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--rsh-space-4); }

	.rsh-footer__col {
		border-left: 1px solid rgba(255,255,255,0.08);
		padding-left: var(--rsh-space-4);
	}
}

.rsh-footer__brand { max-width: 340px; }

.rsh-footer__col-title {
	margin: 0 0 var(--rsh-space-3);
	display: flex;
	align-items: center;
	gap: 8px;
}

.rsh-footer__col-title::before {
	content: '';
	width: 12px;
	height: 2px;
	border-radius: 2px;
	background: var(--rsh-color-accent);
}

.rsh-footer__contact {
	margin-top: var(--rsh-space-4);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rsh-footer__logo-text {
	font-family: var(--rsh-font-heading);
	font-weight: 700;
	font-size: 1.375rem;
	letter-spacing: 0.01em;
	color: #fff;
}

.rsh-footer .rsh-footer__desc {
	color: rgba(255,255,255,0.6);
	max-width: 38ch;
	margin-top: var(--rsh-space-2);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.rsh-footer__social {
	display: flex;
	gap: var(--rsh-space-2);
	margin-top: var(--rsh-space-4);
}

.rsh-footer__social a {
	text-decoration: none;
	font-size: 0.8125rem;
	font-weight: 500;
	color: rgba(255,255,255,0.75);
	border: 1px solid rgba(255,255,255,0.18);
	padding: 6px 14px;
	border-radius: 999px;
	transition: border-color 0.2s var(--rsh-ease), color 0.2s var(--rsh-ease), background 0.2s var(--rsh-ease);
}

.rsh-footer__social a:hover { border-color: var(--rsh-color-accent); color: #fff; background: color-mix(in srgb, var(--rsh-color-accent) 16%, transparent); }

.rsh-footer__nav-list,
.rsh-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rsh-footer h4 {
	color: #fff;
	font-family: var(--rsh-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.rsh-footer__nav-list li { margin-bottom: 4px; }

.rsh-footer__nav-list a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: rgba(255,255,255,0.68);
	font-size: 0.9375rem;
	padding: 6px 0;
	transition: color 0.2s var(--rsh-ease), transform 0.2s var(--rsh-ease);
}

.rsh-footer__nav-list a::before {
	content: '';
	width: 0;
	height: 1px;
	margin-right: 0;
	background: var(--rsh-color-accent);
	transition: width 0.2s var(--rsh-ease), margin-right 0.2s var(--rsh-ease);
}

.rsh-footer__nav-list a:hover {
	color: #fff;
	transform: translateX(2px);
}

.rsh-footer__nav-list a:hover::before {
	width: 8px;
	margin-right: 6px;
}

.rsh-footer__contact p {
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(255,255,255,0.72);
	margin: 0;
	font-size: 0.9375rem;
}

.rsh-footer__contact-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: rgba(255,255,255,0.08);
	color: var(--rsh-color-accent);
}

.rsh-footer__contact-icon svg { width: 13px; height: 13px; }

.rsh-footer__contact a { color: rgba(255,255,255,0.85); text-decoration: none; transition: color 0.2s var(--rsh-ease); }
.rsh-footer__contact a:hover { color: #fff; }

.rsh-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding-block: var(--rsh-space-3);
}

.rsh-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rsh-space-3);
	flex-wrap: wrap;
}

.rsh-footer__bottom p {
	margin: 0;
	font-size: 0.8125rem;
	color: rgba(255,255,255,0.5);
}

.rsh-footer__totop {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 500;
	color: rgba(255,255,255,0.6);
	cursor: pointer;
	transition: color 0.2s var(--rsh-ease);
}

.rsh-footer__totop:hover { color: var(--rsh-color-accent); }

.rsh-footer__totop span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.25);
	font-size: 0.75rem;
	transition: border-color 0.2s var(--rsh-ease), transform 0.2s var(--rsh-ease);
}

.rsh-footer__totop:hover span {
	border-color: var(--rsh-color-accent);
	transform: translateY(-2px);
}

/* =========================================================================
   Hero
   ========================================================================= */

.rsh-hero {
	position: relative;
	padding-block: var(--rsh-space-7) var(--rsh-space-6);
	overflow: hidden;
}

.rsh-hero::before {
	content: '';
	position: absolute;
	top: -20%;
	right: -10%;
	width: 640px;
	height: 640px;
	background:
		radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--rsh-color-accent) 16%, transparent), transparent 60%),
		radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--rsh-color-primary) 10%, transparent), transparent 60%);
	filter: blur(10px);
	pointer-events: none;
	z-index: 0;
	animation: rsh-drift 22s ease-in-out infinite alternate;
}

.rsh-hero__inner { position: relative; z-index: 1; }

@keyframes rsh-drift {
	0%   { transform: translate(0, 0) scale(1); }
	100% { transform: translate(-30px, 30px) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
	.rsh-hero::before { animation: none; }
}

.rsh-hero__inner {
	display: grid;
	gap: var(--rsh-space-5);
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.rsh-hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--rsh-space-6); }
}

.rsh-hero--center .rsh-hero__inner { grid-template-columns: 1fr; max-width: 780px; margin-inline: auto; text-align: center; }
.rsh-hero--center .rsh-hero__actions { justify-content: center; }
.rsh-hero--center .rsh-lede { margin-inline: auto; }

.rsh-hero__actions { display: flex; flex-wrap: wrap; gap: var(--rsh-space-2); margin-top: var(--rsh-space-3); }

.rsh-media-slot--hero { aspect-ratio: 16 / 11; }
.rsh-media-slot--avatar { aspect-ratio: 1 / 1; border-radius: 999px; margin-bottom: var(--rsh-space-2); }

/* =========================================================================
   Value props / feature grid / stats
   ========================================================================= */

.rsh-value-props__grid,
.rsh-feature-grid__grid { margin-top: var(--rsh-space-5); }

/* Keeps a 2-tile row from sprawling across the full container width when
   the bento only has 2 supporting items left after the featured tile —
   centers them at a width that matches the featured tile above. */
.rsh-value-props__grid.rsh-grid--2 { max-width: 760px; margin-inline: auto; }

/* Same fix, generalized: a related-services strip with fewer than 3 cards
   used a fixed 3-column grid, leaving an empty column of blank space next
   to the last card — center a fixed-width row instead. */
.rsh-related-services__row {
	margin-top: var(--rsh-space-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--rsh-space-3);
}

.rsh-related-services__row > .rsh-card { flex: 1 1 380px; max-width: 420px; }

/* Bento layout: one wide featured tile + a row of smaller tiles below —
   deliberately asymmetric so this section doesn't read as another
   uniform card grid identical to Process/Industries. */
.rsh-value-props__bento {
	margin-top: var(--rsh-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--rsh-space-3);
}

.rsh-value-props__featured {
	display: flex;
	align-items: center;
	gap: var(--rsh-space-4);
	padding: var(--rsh-space-4) var(--rsh-space-5);
	border-radius: var(--rsh-radius-lg);
	background: linear-gradient(120deg, var(--rsh-color-primary), var(--rsh-color-primary-dark));
	color: #fff;
	position: relative;
	overflow: hidden;
}

.rsh-value-props__featured::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--rsh-color-accent) 35%, transparent), transparent 55%);
	pointer-events: none;
}

.rsh-value-props__featured > * { position: relative; z-index: 1; }

.rsh-value-props__featured .rsh-card__icon {
	background: rgba(255,255,255,0.14);
	color: #fff;
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	margin-bottom: 0;
}

.rsh-value-props__featured .rsh-card__icon svg { width: 30px; height: 30px; }
.rsh-value-props__featured h3 { color: #fff; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
.rsh-value-props__featured p { color: rgba(255,255,255,0.75); margin-bottom: 0; }

@media (max-width: 640px) {
	.rsh-value-props__featured { flex-direction: column; text-align: center; padding: var(--rsh-space-4); }
}

/* Alternating numbered-row layout (FeatureGrid layout:'rows') — a
   distinct rhythm from the card grids, used for sections that would
   otherwise sit right next to another grid on the same page. */
.rsh-feature-rows__list {
	margin-top: var(--rsh-space-5);
	max-width: 900px;
	margin-inline: auto;
	border-top: 1px solid var(--rsh-color-border);
}

.rsh-feature-rows__row {
	display: flex;
	align-items: center;
	gap: var(--rsh-space-3);
	padding: var(--rsh-space-3) var(--rsh-space-2);
	border-bottom: 1px solid var(--rsh-color-border);
	transition: background-color 0.3s var(--rsh-ease), padding-inline 0.3s var(--rsh-ease);
}

.rsh-feature-rows__row:hover {
	background: var(--rsh-color-surface);
	padding-inline: var(--rsh-space-3);
	border-radius: var(--rsh-radius);
}

.rsh-feature-rows__num {
	font-family: var(--rsh-font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--rsh-color-border);
	width: 44px;
	flex-shrink: 0;
	transition: color 0.3s var(--rsh-ease);
}

.rsh-feature-rows__row:hover .rsh-feature-rows__num { color: var(--rsh-color-accent); }

.rsh-feature-rows__row .rsh-card__icon {
	margin-bottom: 0;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
}

.rsh-feature-rows__row .rsh-card__icon svg { width: 20px; height: 20px; }

.rsh-feature-rows__body { flex: 1; display: flex; align-items: baseline; gap: var(--rsh-space-2); flex-wrap: wrap; }
.rsh-feature-rows__body h4 { margin-bottom: 0; flex-shrink: 0; min-width: 220px; }
.rsh-feature-rows__body p { color: var(--rsh-color-muted); margin-bottom: 0; font-size: 0.9375rem; }

@media (max-width: 720px) {
	.rsh-feature-rows__body { flex-direction: column; align-items: flex-start; gap: 4px; }
	.rsh-feature-rows__body h4 { min-width: 0; }
	.rsh-feature-rows__row .rsh-card__icon { display: none; }
}

/* Alternating vertical timeline (FeatureGrid layout:'timeline') — a
   center spine that fills with accent color as you scroll, numbered
   nodes that permanently light up when reached, and cards alternating
   left/right — a genuine "one step at a time" scroll experience,
   distinct from any grid elsewhere on the page. */

.rsh-feature-timeline {
	position: relative;
	max-width: 880px;
	margin: var(--rsh-space-6) auto 0;
}

.rsh-feature-timeline__list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--rsh-space-5);
}

.rsh-feature-timeline__list::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 4px;
	bottom: 4px;
	width: 3px;
	border-radius: 3px;
	background: linear-gradient(to bottom, transparent, var(--rsh-color-border) 4%, var(--rsh-color-border) 96%, transparent);
	transform: translateX(-50%);
}

/* The accent-colored fill that grows downward as steps are reached —
   this is the core "progress" feel, driven by interactions.js measuring
   scroll position against each step's node. */
.rsh-feature-timeline__progress {
	position: absolute;
	left: 50%;
	top: 4px;
	width: 3px;
	height: 0;
	border-radius: 3px;
	/* Flat, not a gradient — must read as the exact same blue as the
	   active node's solid accent fill, not a darker blend further down. */
	background: var(--rsh-color-accent);
	transform: translateX(-50%);
	/* No transition here — height is updated every animation frame while
	   scrolling (see initTimelines() in interactions.js), so it must track
	   the scroll position 1:1. A CSS transition would make the fill lag
	   behind the cursor instead of scrubbing smoothly with it. */
	z-index: 1;
	box-shadow: 0 0 12px color-mix(in srgb, var(--rsh-color-accent) 55%, transparent);
}

.rsh-feature-timeline__item {
	display: grid;
	grid-template-columns: 1fr 64px 1fr;
	grid-auto-flow: dense;
	align-items: center;
	position: relative;
}

.rsh-feature-timeline__node {
	grid-column: 2;
	justify-self: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--rsh-color-bg);
	border: 2.5px solid var(--rsh-color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--rsh-font-heading);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--rsh-color-muted);
	/* z-index only takes effect on a positioned element — without this,
	   the node stayed in normal flow (position: static) and the spine
	   line (position: absolute) painted over it instead of behind it. */
	position: relative;
	z-index: 2;
	transition: border-color 0.4s var(--rsh-ease), background-color 0.4s var(--rsh-ease), color 0.4s var(--rsh-ease), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s var(--rsh-ease);
}

/* Permanent "reached" state — set by JS once the step has crossed the
   viewport center, not just on hover — this is what makes each node
   visibly light up one at a time while scrolling. */
.rsh-feature-timeline__item.is-active .rsh-feature-timeline__node {
	border-color: var(--rsh-color-accent);
	background: var(--rsh-color-accent);
	color: #fff;
	transform: scale(1.08);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--rsh-color-accent) 16%, transparent);
}

.rsh-feature-timeline__item:hover .rsh-feature-timeline__node {
	transform: scale(1.16);
}

.rsh-feature-timeline__card {
	position: relative;
	background: #fff;
	border: 1px solid var(--rsh-color-border);
	border-radius: var(--rsh-radius-lg);
	padding: 20px 24px;
	box-shadow: var(--rsh-shadow-sm);
	transition: box-shadow 0.4s var(--rsh-ease), transform 0.4s var(--rsh-ease), border-color 0.4s var(--rsh-ease);
}

.rsh-feature-timeline__card .rsh-card__icon { margin-bottom: 10px; }
.rsh-feature-timeline__card h4 { margin-bottom: 4px; }
.rsh-feature-timeline__card p { color: var(--rsh-color-muted); margin-bottom: 0; font-size: 0.9375rem; }

.rsh-feature-timeline__item.is-active .rsh-feature-timeline__card {
	border-color: color-mix(in srgb, var(--rsh-color-accent) 35%, var(--rsh-color-border));
	box-shadow: var(--rsh-shadow-md);
}

.rsh-feature-timeline__item:hover .rsh-feature-timeline__card {
	box-shadow: var(--rsh-shadow-lg);
	border-color: transparent;
	transform: translateY(-3px);
}

/* Horizontal connector tick linking each node to its card, so the whole
   thing reads as one connected diagram rather than floating pieces. */
.rsh-feature-timeline__card::after,
.rsh-feature-timeline__card::before {
	content: '';
	position: absolute;
	top: 50%;
	width: 22px;
	height: 2px;
	background: var(--rsh-color-border);
	transform: translateY(-50%);
	transition: background-color 0.4s var(--rsh-ease);
	z-index: 1;
}

.rsh-feature-timeline__item--left .rsh-feature-timeline__card {
	grid-column: 1;
	margin-right: 22px;
	text-align: right;
}

.rsh-feature-timeline__item--left .rsh-feature-timeline__card::after { right: -22px; }
.rsh-feature-timeline__item--left .rsh-feature-timeline__card::before { display: none; }
.rsh-feature-timeline__item--left .rsh-card__icon { margin-left: auto; }

.rsh-feature-timeline__item--right .rsh-feature-timeline__card {
	grid-column: 3;
	margin-left: 22px;
	text-align: left;
}

.rsh-feature-timeline__item--right .rsh-feature-timeline__card::before { left: -22px; }
.rsh-feature-timeline__item--right .rsh-feature-timeline__card::after { display: none; }

.rsh-feature-timeline__item.is-active .rsh-feature-timeline__card::after,
.rsh-feature-timeline__item.is-active .rsh-feature-timeline__card::before,
.rsh-feature-timeline__item:hover .rsh-feature-timeline__card::after,
.rsh-feature-timeline__item:hover .rsh-feature-timeline__card::before {
	background: var(--rsh-color-accent);
}

/* Directional "pop into place" reveal — left items slide in from the
   left, right items from the right, with a slight overshoot easing for a
   more premium, tactile arrival than the generic rise-and-fade used
   elsewhere. Independent of the .is-active scroll-progress state above. */
.rsh-feature-timeline__item--left[data-rsh-reveal] { transform: translateX(-44px) scale(0.94); transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
.rsh-feature-timeline__item--right[data-rsh-reveal] { transform: translateX(44px) scale(0.94); transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
.rsh-feature-timeline__item[data-rsh-reveal].is-visible { transform: translateX(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
	.rsh-feature-timeline__progress { transition: none; }
	.rsh-feature-timeline__node { transition: none; }
}

@media (max-width: 720px) {
	.rsh-feature-timeline { margin-top: var(--rsh-space-5); }
	.rsh-feature-timeline__list { gap: var(--rsh-space-4); }

	.rsh-feature-timeline__list::before,
	.rsh-feature-timeline__progress { left: 25px; width: 3px; }

	.rsh-feature-timeline__item,
	.rsh-feature-timeline__item--left,
	.rsh-feature-timeline__item--right {
		grid-template-columns: 50px 1fr;
	}

	.rsh-feature-timeline__node { grid-column: 1; width: 44px; height: 44px; font-size: 0.875rem; }

	.rsh-feature-timeline__item--left .rsh-feature-timeline__card,
	.rsh-feature-timeline__item--right .rsh-feature-timeline__card {
		grid-column: 2;
		margin-left: 18px;
		margin-right: 0;
		text-align: left;
		padding: 16px 18px;
	}

	.rsh-feature-timeline__item--left .rsh-feature-timeline__card::after { display: none; }
	.rsh-feature-timeline__item--left .rsh-feature-timeline__card::before,
	.rsh-feature-timeline__item--right .rsh-feature-timeline__card::before {
		display: block;
		left: -18px;
		width: 18px;
	}

	.rsh-feature-timeline__item--left .rsh-card__icon { margin-left: 0; }

	.rsh-feature-timeline__item--left[data-rsh-reveal],
	.rsh-feature-timeline__item--right[data-rsh-reveal] { transform: translateY(28px) scale(0.96); }
	.rsh-feature-timeline__item[data-rsh-reveal].is-visible { transform: translateY(0) scale(1); }
}

.rsh-feature-item {
	display: flex;
	gap: 14px;
	padding: var(--rsh-space-2) 0;
}

.rsh-feature-item__check {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--rsh-color-secondary);
	color: var(--rsh-color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s var(--rsh-ease), background-color 0.3s var(--rsh-ease), color 0.3s var(--rsh-ease);
}

.rsh-feature-item__check svg { width: 18px; height: 18px; }

.rsh-feature-item:hover .rsh-feature-item__check {
	background: var(--rsh-color-accent);
	color: #fff;
	transform: scale(1.08);
}

.rsh-feature-item h4 { margin-bottom: 2px; font-family: var(--rsh-font-body); }
.rsh-feature-item p { color: var(--rsh-color-muted); margin-bottom: 0; font-size: 0.9375rem; }

/* Badge variant — heavier-weight centered tile for short audience/segment
   lists (large tinted circular icon) rather than the compact checkmark
   row used for longer checklists. */
.rsh-feature-grid__grid--badge { gap: var(--rsh-space-4); }

.rsh-feature-item--badge {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--rsh-space-2);
	padding: var(--rsh-space-4) var(--rsh-space-2);
	border-radius: var(--rsh-radius-lg);
	background: var(--rsh-color-surface);
	transition: transform 0.3s var(--rsh-ease), box-shadow 0.3s var(--rsh-ease);
}

.rsh-feature-item--badge:hover { transform: translateY(-4px); box-shadow: var(--rsh-shadow-sm); }

.rsh-feature-item--badge .rsh-feature-item__check {
	width: 60px;
	height: 60px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--rsh-color-accent) 14%, transparent);
	color: var(--rsh-color-accent);
}

.rsh-feature-item--badge .rsh-feature-item__check svg { width: 26px; height: 26px; }
.rsh-feature-item--badge h4 { font-size: 0.9375rem; }

/* =========================================================================
   Split feature — large image paired with a compact checklist, an
   image-driven storytelling alternative to a plain card grid.
   ========================================================================= */

.rsh-media-slot--split-feature { aspect-ratio: 4 / 3; }

.rsh-split-feature__list {
	list-style: none;
	margin: var(--rsh-space-4) 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--rsh-space-2);
}

.rsh-split-feature__list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.9375rem;
	color: var(--rsh-color-muted);
}

.rsh-split-feature__list strong { color: var(--rsh-color-primary); font-family: var(--rsh-font-body); }

.rsh-split-feature__icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--rsh-color-secondary);
	color: var(--rsh-color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}

.rsh-split-feature__icon svg { width: 15px; height: 15px; }

/* =========================================================================
   Hero trust-strip badges
   ========================================================================= */

.rsh-hero__badges {
	list-style: none;
	margin: var(--rsh-space-4) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--rsh-space-2) var(--rsh-space-4);
}

.rsh-hero__badges li {
	position: relative;
	padding-left: 18px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--rsh-color-muted);
}

.rsh-hero__badges li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--rsh-color-accent);
}

.rsh-hero--center .rsh-hero__badges { justify-content: center; }

.rsh-stats { padding-block: var(--rsh-space-5); }

.rsh-stat { text-align: center; padding: var(--rsh-space-2); }

.rsh-stat__value {
	display: block;
	font-family: var(--rsh-font-heading);
	font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem);
	font-weight: 700;
	color: var(--rsh-color-primary);
}

.rsh-stat__label { color: var(--rsh-color-muted); font-size: 0.875rem; }

/* =========================================================================
   Services grid / cards
   ========================================================================= */

.rsh-services-grid__grid { margin-top: var(--rsh-space-5); }

.rsh-service-card { text-decoration: none; display: flex; flex-direction: column; color: var(--rsh-color-text); }
.rsh-service-card__thumb { border-radius: var(--rsh-radius); overflow: hidden; margin-bottom: var(--rsh-space-2); aspect-ratio: 4/3; }
.rsh-service-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rsh-service-card__link { margin-top: auto; padding-top: 10px; font-weight: 600; font-size: 0.875rem; color: var(--rsh-color-accent); }

/* =========================================================================
   Process / How It Works
   ========================================================================= */

.rsh-process__grid { margin-top: var(--rsh-space-6); }

.rsh-process__card {
	position: relative;
	padding: var(--rsh-space-4) var(--rsh-space-4) var(--rsh-space-3);
	overflow: hidden;
}

/* Large translucent numeral in the corner — a common premium "process
   flow" motif that reads as deliberate design rather than a plain
   connected-dot timeline, without needing fragile connector lines that
   break across wrapped grid rows. */
.rsh-process__ghost {
	position: absolute;
	top: -0.35em;
	right: 0.1em;
	font-family: var(--rsh-font-heading);
	font-size: 5.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--rsh-color-primary);
	opacity: 0.06;
	pointer-events: none;
	transition: opacity 0.35s var(--rsh-ease), transform 0.35s var(--rsh-ease);
}

.rsh-process__card:hover .rsh-process__ghost {
	opacity: 0.1;
	transform: scale(1.06);
}

.rsh-process__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 22px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--rsh-color-primary);
	color: #fff;
	font-family: var(--rsh-font-body);
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.03em;
	margin-bottom: var(--rsh-space-3);
	position: relative;
	z-index: 1;
}

.rsh-process__card .rsh-card__icon { position: relative; z-index: 1; }
.rsh-process__card h3 { margin-bottom: 6px; position: relative; z-index: 1; }
.rsh-process__card p { color: var(--rsh-color-muted); margin-bottom: 0; position: relative; z-index: 1; }

/* Connects consecutive cards on wide screens with a short accent tick
   between them, reinforcing the step-by-step flow without a fragile
   full-width line that would break across wrapped rows. */
@media (min-width: 900px) {
	.rsh-process__card:not(:last-child)::after {
		content: '';
		position: absolute;
		top: 50%;
		right: -13px;
		width: 26px;
		height: 2px;
		background: repeating-linear-gradient(90deg, var(--rsh-color-border) 0 6px, transparent 6px 10px);
		z-index: 2;
	}

	.rsh-grid--3 > .rsh-process__card:nth-child(3n)::after { display: none; }
}

/* =========================================================================
   CTA band
   ========================================================================= */

.rsh-cta {
	position: relative;
	overflow: hidden;
}

.rsh-cta::before {
	content: '';
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--rsh-color-accent) 22%, transparent), transparent 55%),
		radial-gradient(circle at 85% 70%, rgba(255,255,255,0.08), transparent 50%);
	pointer-events: none;
	animation: rsh-drift 26s ease-in-out infinite alternate-reverse;
}

.rsh-cta > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
	.rsh-cta::before { animation: none; }
}

.rsh-cta__actions { margin-top: var(--rsh-space-3); display: flex; justify-content: center; }

/* =========================================================================
   FAQ accordion
   ========================================================================= */

.rsh-faq__list { margin-top: var(--rsh-space-5); display: flex; flex-direction: column; gap: 10px; }

.rsh-faq__item { border: 1px solid var(--rsh-color-border); border-radius: var(--rsh-radius); overflow: hidden; }

.rsh-faq__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rsh-space-2);
	padding: 18px 20px;
	background: #fff;
	border: none;
	text-align: left;
	font-family: var(--rsh-font-body);
	font-weight: 600;
	font-size: 1rem;
	color: var(--rsh-color-text);
	cursor: pointer;
}

.rsh-faq__icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.rsh-faq__icon::before, .rsh-faq__icon::after {
	content: '';
	position: absolute;
	background: var(--rsh-color-accent);
	transition: transform 0.25s var(--rsh-ease);
}
.rsh-faq__icon::before { left: 0; top: 7px; width: 16px; height: 2px; }
.rsh-faq__icon::after { left: 7px; top: 0; width: 2px; height: 16px; }
.rsh-faq__item.is-open .rsh-faq__icon::after { transform: rotate(90deg); opacity: 0; }

.rsh-faq__panel { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--rsh-ease); }
.rsh-faq__panel-inner { padding: 0 20px 18px; color: var(--rsh-color-muted); }
.rsh-faq__panel-inner p:last-child { margin-bottom: 0; }

/* =========================================================================
   Industries / Team / Testimonials / Pricing
   ========================================================================= */

.rsh-industries__grid, .rsh-team .rsh-grid, .rsh-testimonials .rsh-grid, .rsh-pricing .rsh-grid {
	margin-top: var(--rsh-space-5);
}

/* Used when a pricing group has only 1-2 plans — a fixed 3-col grid would
   leave a large empty gap next to a lone card, so these render as a
   centered row of fixed-width cards instead of stretching to fill columns
   that have no content. */
.rsh-pricing__row {
	margin-top: var(--rsh-space-5);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rsh-space-4, 24px);
}

.rsh-pricing__row > .rsh-pricing-card {
	flex: 0 1 360px;
	max-width: 360px;
}

/* Chip cloud — a compact, flex-wrapped tag treatment (not a fixed-column
   grid) so Industries reads as its own distinct rhythm rather than a
   sixth copy of the card-grid pattern used elsewhere on the page. */
.rsh-industries__cloud {
	margin-top: var(--rsh-space-5);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

.rsh-industries__chip {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 22px 14px 14px;
	border-radius: 999px;
	border: 1px solid var(--rsh-color-border);
	background: #fff;
	transition: border-color 0.3s var(--rsh-ease), box-shadow 0.3s var(--rsh-ease), transform 0.3s var(--rsh-ease);
	max-width: 340px;
}

.rsh-industries__chip:hover {
	border-color: transparent;
	box-shadow: var(--rsh-shadow-md);
	transform: translateY(-3px);
}

.rsh-industries__chip-icon {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--rsh-color-secondary);
	color: var(--rsh-color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.rsh-industries__chip-icon svg { width: 18px; height: 18px; }

.rsh-industries__chip-body { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.rsh-industries__chip-body strong { font-family: var(--rsh-font-heading); font-size: 1rem; color: var(--rsh-color-primary); }
.rsh-industries__chip-body span { font-size: 0.8125rem; color: var(--rsh-color-muted); line-height: 1.4; }

.rsh-team-card { text-align: center; }
.rsh-team-card h3 { margin-bottom: 2px; }
.rsh-team-card__role { color: var(--rsh-color-accent); font-size: 0.875rem; font-weight: 600; margin-bottom: 8px; }

.rsh-testimonial { border: none; }
.rsh-testimonial p { font-family: var(--rsh-font-heading); font-size: 1.0625rem; color: var(--rsh-color-text); }
.rsh-testimonial footer { display: flex; flex-direction: column; margin-top: var(--rsh-space-2); }
.rsh-testimonial footer strong { color: var(--rsh-color-primary); }
.rsh-testimonial footer span { color: var(--rsh-color-muted); font-size: 0.875rem; }

.rsh-pricing-card { display: flex; flex-direction: column; }
.rsh-pricing-card__for { color: var(--rsh-color-accent); font-weight: 600; font-size: 0.875rem; }
.rsh-pricing-card__features { list-style: none; margin: var(--rsh-space-2) 0 0; padding: 0; }
.rsh-pricing-card__features li {
	padding: 8px 0 8px 24px;
	position: relative;
	font-size: 0.9375rem;
	border-top: 1px solid var(--rsh-color-border);
}
.rsh-pricing-card__features li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	color: var(--rsh-color-success);
	font-weight: 700;
}
.rsh-pricing__note { color: var(--rsh-color-muted); font-size: 0.875rem; margin-top: var(--rsh-space-4); max-width: 60ch; margin-inline: auto; }

/* =========================================================================
   Bali dual-track feature
   ========================================================================= */

.rsh-bali-feature__banner {
	border-radius: var(--rsh-radius-lg);
	overflow: hidden;
	margin-bottom: var(--rsh-space-5);
}

.rsh-media-slot--banner { aspect-ratio: 21 / 9; }

.rsh-bali-feature__grid {
	display: grid;
	gap: var(--rsh-space-3);
	grid-template-columns: 1fr;
	margin-top: var(--rsh-space-5);
}

@media (min-width: 780px) {
	.rsh-bali-feature__grid { grid-template-columns: 1fr 1fr; }
}

.rsh-bali-feature__col {
	border-radius: var(--rsh-radius-lg);
	padding: var(--rsh-space-4);
}

.rsh-bali-feature__col--global { background: var(--rsh-color-surface); border: 1px solid var(--rsh-color-border); }
.rsh-bali-feature__col--bali { background: var(--rsh-color-primary); color: #fff; }
.rsh-bali-feature__col--bali h3 { color: #fff; }

.rsh-bali-feature__col ul { list-style: none; margin: var(--rsh-space-2) 0 0; padding: 0; }
.rsh-bali-feature__col li {
	padding: 10px 0 10px 26px;
	position: relative;
	border-top: 1px solid rgba(0,0,0,0.06);
	font-size: 0.9375rem;
}
.rsh-bali-feature__col--bali li { border-top-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.85); }
.rsh-bali-feature__col li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 16px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rsh-color-accent);
}

/* Bali cards — two premium photo tiles teasing the dedicated Bali pages,
   used instead of the list grid above when the section has `cards` data. */

/* On the homepage this section has no heading above the cards (it follows
   Services directly) — no top padding, so it reads as a continuation of
   that section rather than a separate block with a visible gap. */
.rsh-bali-feature.rsh-section--tight { padding-top: 0; }

.rsh-bali-cards {
	display: grid;
	gap: var(--rsh-space-3);
	grid-template-columns: 1fr;
	margin-top: 0;
}

.rsh-bali-feature .rsh-text-center + .rsh-bali-cards {
	margin-top: var(--rsh-space-5);
}

@media (min-width: 780px) {
	.rsh-bali-cards { grid-template-columns: 1fr 1fr; }
}

.rsh-bali-card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--rsh-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	box-shadow: var(--rsh-shadow-md);
	transition: transform 0.35s var(--rsh-ease), box-shadow 0.35s var(--rsh-ease);
}

@media (min-width: 780px) {
	.rsh-bali-card { aspect-ratio: 16 / 10; }
}

.rsh-bali-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--rsh-shadow-lg);
}

.rsh-bali-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rsh-bali-card__tint {
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, var(--rsh-color-primary) 0%, color-mix(in srgb, var(--rsh-color-primary) 78%, transparent) 34%, transparent 62%),
		linear-gradient(0deg, rgba(6, 14, 26, 0.55) 0%, transparent 42%);
}

.rsh-bali-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--rsh-space-4);
}

.rsh-bali-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--rsh-color-accent) 55%, var(--rsh-color-primary) 45%);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.rsh-bali-card__icon svg { width: 22px; height: 22px; }

.rsh-bali-card__text {
	display: block;
	margin-top: var(--rsh-space-2);
	max-width: 320px;
}

.rsh-bali-card__text strong {
	display: block;
	font-family: var(--rsh-font-heading);
	font-weight: 800;
	font-size: 1.375rem;
	line-height: 1.2;
	color: #fff;
}

.rsh-bali-card__desc {
	display: block;
	margin-top: 6px;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.85);
}

.rsh-bali-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	align-self: flex-start;
	padding: 11px 18px;
	border-radius: 999px;
	background: #fff;
	color: var(--rsh-color-primary);
	font-weight: 700;
	font-size: 0.875rem;
	transition: transform 0.25s var(--rsh-ease);
}

.rsh-bali-card:hover .rsh-bali-card__cta { transform: translateX(3px); }

/* =========================================================================
   Related services / logo strip / rich text
   ========================================================================= */

.rsh-related-services h3 { margin-bottom: var(--rsh-space-3); }
.rsh-related-services .rsh-card:hover .rsh-btn--ghost::after { transform: translateX(4px); }

/* Distinct card treatment for related-service links — a colored top
   accent bar and a horizontal icon+title row, so this doesn't read as
   just another instance of the generic .rsh-card grid used everywhere
   else on the page (Process, trust cards, capability groups...). */
.rsh-related-services .rsh-card {
	display: flex;
	align-items: center;
	gap: var(--rsh-space-3);
	position: relative;
	overflow: hidden;
	padding: var(--rsh-space-3) var(--rsh-space-4);
}

.rsh-related-services .rsh-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--rsh-color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--rsh-ease);
}

.rsh-related-services .rsh-card:hover::after { transform: scaleX(1); }
.rsh-related-services .rsh-card .rsh-card__icon { margin-bottom: 0; flex-shrink: 0; }
.rsh-related-services .rsh-card h4 { margin-bottom: 2px; }
.rsh-related-services .rsh-card .rsh-btn--ghost { display: inline-block; margin-top: 2px; }

.rsh-logo-strip__label {
	text-align: center;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rsh-color-muted);
	margin-bottom: var(--rsh-space-3);
}

.rsh-logo-strip__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--rsh-space-5);
}

/* Marquee variant: an infinite, seamless horizontal drift — a small,
   very deliberate motion detail that reads as premium/SaaS-grade rather
   than a static badge row. Pauses on hover so it never fights reading.
   Label sits beside the scrolling row (not stacked above it) — a fixed-
   width column + divider on the left, scrolling names filling the rest,
   matching the "TRUSTED BY... | logo logo logo" reference layout. */
.rsh-logo-strip--marquee .rsh-logo-strip__inner {
	display: flex;
	align-items: center;
	gap: var(--rsh-space-4);
}

.rsh-logo-strip--marquee .rsh-logo-strip__label {
	flex: none;
	width: 150px;
	text-align: left;
	margin: 0;
	padding-right: var(--rsh-space-4);
	border-right: 1px solid var(--rsh-color-border);
	line-height: 1.45;
}

.rsh-logo-strip__viewport {
	position: relative;
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.rsh-logo-strip__viewport::before,
.rsh-logo-strip__viewport::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 60px;
	z-index: 2;
	pointer-events: none;
}

.rsh-logo-strip__viewport::before {
	left: 0;
	background: linear-gradient(90deg, var(--rsh-color-bg), transparent);
}

.rsh-logo-strip__viewport::after {
	right: 0;
	background: linear-gradient(270deg, var(--rsh-color-bg), transparent);
}

.rsh-logo-strip--marquee.rsh-section--surface .rsh-logo-strip__viewport::before { background: linear-gradient(90deg, var(--rsh-color-surface), transparent); }
.rsh-logo-strip--marquee.rsh-section--surface .rsh-logo-strip__viewport::after { background: linear-gradient(270deg, var(--rsh-color-surface), transparent); }

.rsh-logo-strip--marquee .rsh-logo-strip__track { width: max-content; }

@media (max-width: 640px) {
	.rsh-logo-strip--marquee .rsh-logo-strip__inner { flex-direction: column; align-items: stretch; gap: 10px; }
	.rsh-logo-strip--marquee .rsh-logo-strip__label {
		width: auto;
		text-align: center;
		border-right: none;
		border-bottom: 1px solid var(--rsh-color-border);
		padding-right: 0;
		padding-bottom: 10px;
	}
	.rsh-logo-strip__viewport::before,
	.rsh-logo-strip__viewport::after { width: 28px; }
}

.rsh-logo-strip--marquee .rsh-logo-strip__row {
	flex-wrap: nowrap;
	width: max-content;
	animation: rsh-marquee 32s linear infinite;
}

.rsh-logo-strip--marquee:hover .rsh-logo-strip__row {
	animation-play-state: paused;
}

@keyframes rsh-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.rsh-logo-strip--marquee .rsh-logo-strip__row { animation: none; flex-wrap: wrap; }
	.rsh-logo-strip__viewport { overflow: visible; }
}

.rsh-logo-strip__item {
	font-family: var(--rsh-font-heading);
	font-weight: 600;
	color: var(--rsh-color-muted);
	font-size: 1.05rem;
	flex-shrink: 0;
}

.rsh-logo-strip--marquee .rsh-logo-strip__item {
	padding: 10px 22px;
	border: 1px solid var(--rsh-color-border);
	border-radius: 999px;
	font-family: var(--rsh-font-body);
	font-size: 0.9375rem;
	background: var(--rsh-color-bg);
	transition: border-color 0.25s var(--rsh-ease), color 0.25s var(--rsh-ease);
}

.rsh-logo-strip--marquee.rsh-section--surface .rsh-logo-strip__item { background: var(--rsh-color-surface); }

.rsh-richtext__content { color: var(--rsh-color-text); }
.rsh-richtext__content p:last-child { margin-bottom: 0; }

/* Split layout — large statement heading in one column, supporting copy
   in the other, with a faint decorative icon watermark behind the
   heading. An editorial alternative to a single centered text block. */
.rsh-richtext__split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rsh-space-4);
	align-items: start;
}

@media (min-width: 860px) {
	.rsh-richtext__split { grid-template-columns: 0.85fr 1fr; gap: var(--rsh-space-6); }
}

.rsh-richtext__split-heading { position: relative; padding-top: 8px; }
.rsh-richtext__split-heading .rsh-eyebrow { position: relative; z-index: 1; }
.rsh-richtext__split-heading h2 { position: relative; z-index: 1; font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem); margin: var(--rsh-space-2) 0 0; }

.rsh-richtext__watermark {
	position: absolute;
	top: -22px;
	left: -16px;
	width: 108px;
	height: 108px;
	color: color-mix(in srgb, var(--rsh-color-accent) 20%, transparent);
	pointer-events: none;
	z-index: 0;
}

.rsh-richtext__watermark svg { width: 100%; height: 100%; stroke-width: 1; }

.rsh-richtext__split-rule {
	display: block;
	margin-top: var(--rsh-space-3);
	width: 56px;
	height: 3px;
	border-radius: 999px;
	background: var(--rsh-color-accent);
	position: relative;
	z-index: 1;
}

.rsh-richtext--split .rsh-richtext__content { padding-top: 10px; }
.rsh-richtext--split .rsh-richtext__content p { font-size: 1.0625rem; line-height: 1.75; }

@media (max-width: 640px) {
	.rsh-richtext__watermark { width: 72px; height: 72px; top: -12px; left: -10px; }
}

/* =========================================================================
   Pull Quote — full-bleed typographic statement
   ========================================================================= */

.rsh-pullquote {
	position: relative;
	overflow: hidden;
	text-align: center;
}

.rsh-pullquote::before {
	content: '';
	position: absolute;
	inset: -20%;
	background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--rsh-color-accent) 16%, transparent), transparent 55%);
	pointer-events: none;
}

.rsh-pullquote__inner { position: relative; z-index: 1; max-width: 900px; }

.rsh-pullquote__mark {
	display: block;
	font-family: var(--rsh-font-heading);
	font-size: 6rem;
	line-height: 1;
	color: var(--rsh-color-accent);
	opacity: 0.55;
	margin-bottom: -1.2rem;
}

.rsh-pullquote__text {
	font-family: var(--rsh-font-heading);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.5rem);
	line-height: 1.35;
	color: #fff;
	margin-bottom: var(--rsh-space-3);
}

.rsh-pullquote__attribution {
	position: relative;
	display: inline-block;
	padding-top: var(--rsh-space-2);
	font-family: var(--rsh-font-body);
	font-style: normal;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--rsh-color-accent) 70%, white);
}

.rsh-pullquote__attribution::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 32px;
	height: 1px;
	background: color-mix(in srgb, var(--rsh-color-accent) 70%, white);
	opacity: 0.6;
}

.rsh-pullquote__cta { margin-top: var(--rsh-space-4); display: flex; justify-content: center; }

/* Light variant — warm cream background, dark serif text, for pages that
   already use the full-bleed dark treatment elsewhere and need a
   lighter-weight punctuation moment instead of a second dark band. */
.rsh-pullquote--light::before { background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--rsh-color-accent) 12%, transparent), transparent 55%); }
.rsh-pullquote--light .rsh-pullquote__text { color: var(--rsh-color-primary); }
.rsh-pullquote--light .rsh-pullquote__attribution { color: var(--rsh-color-accent); }
.rsh-pullquote--light .rsh-pullquote__attribution::before { background: var(--rsh-color-accent); }

/* =========================================================================
   Contact form
   ========================================================================= */

/* Semantically an h1 (page heading), sized to match the visual weight of
   an h2 to suit its half-width column layout — see Sections\ContactForm. */
.rsh-contact-form h1 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); }

.rsh-contact-details { margin-top: var(--rsh-space-4); }
.rsh-contact-details p { margin-bottom: var(--rsh-space-2); }
.rsh-contact-details strong { display: block; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rsh-color-muted); margin-bottom: 2px; }
.rsh-contact-details a { color: var(--rsh-color-primary); text-decoration: none; font-weight: 600; }

.rsh-form {
	display: flex;
	flex-direction: column;
	gap: var(--rsh-space-2);
	background: var(--rsh-color-surface);
	border: 1px solid var(--rsh-color-border);
	border-radius: var(--rsh-radius-lg);
	padding: var(--rsh-space-4);
}

/* display:none (not just off-screen positioning) is deliberate: a
   position-based "visually hidden" honeypot is still a real, rendered,
   focusable-adjacent field, and browser/extension autofill (password
   managers, Chrome's own form-fill) can and does populate fields like
   that even when a human never sees or touches them — which silently
   fails every real submission (the honeypot check treats any non-empty
   value as a bot and skips saving). A script-scraping bot reads raw HTML
   and fills every named input regardless of CSS, so display:none doesn't
   weaken the honeypot's actual purpose at all. */
.rsh-form__honeypot {
	display: none !important;
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.rsh-form__row { display: flex; flex-direction: column; gap: 6px; }

.rsh-form__row--half {
	flex-direction: row;
	gap: var(--rsh-space-2);
}

.rsh-form__row--half > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 560px) {
	.rsh-form__row--half { flex-direction: column; }
}

.rsh-form label { font-size: 0.875rem; font-weight: 600; color: var(--rsh-color-text); }

.rsh-form input[type="text"],
.rsh-form input[type="email"],
.rsh-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--rsh-color-border);
	border-radius: 8px;
	font-family: var(--rsh-font-body);
	font-size: 0.9375rem;
	background: #fff;
	transition: border-color 0.2s var(--rsh-ease);
}

.rsh-form input:focus, .rsh-form textarea:focus {
	border-color: var(--rsh-color-accent);
	outline: none;
}

.rsh-form button { align-self: flex-start; margin-top: 6px; }

.rsh-form-success {
	background: var(--rsh-color-surface);
	border: 1px solid var(--rsh-color-success);
	border-radius: var(--rsh-radius-lg);
	padding: var(--rsh-space-4);
}

.rsh-form-success h3 { color: var(--rsh-color-success); }

.rsh-form-error {
	background: color-mix(in srgb, var(--rsh-color-error) 8%, var(--rsh-color-surface));
	border: 1px solid var(--rsh-color-error);
	border-radius: var(--rsh-radius);
	padding: var(--rsh-space-2) var(--rsh-space-3);
	margin-bottom: var(--rsh-space-3);
	color: var(--rsh-color-error);
	font-size: 0.9375rem;
}

/* =========================================================================
   Success modal — animated confirmation shown after a consultation form
   submission. Rendered only when present (?rsh_submitted=1), so unlike a
   toggle-by-attribute modal there's no [hidden] state to fight with — its
   existence in the DOM *is* the visible state; JS only adds the close
   interactions and cleans the URL.
   ========================================================================= */

.rsh-success-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--rsh-space-3);
}

.rsh-success-modal.is-closing { display: none; }

.rsh-success-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(8, 24, 38, 0.55);
	backdrop-filter: blur(2px);
}

.rsh-success-modal__panel {
	position: relative;
	width: 100%;
	max-width: 440px;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: var(--rsh-radius-lg);
	box-shadow: var(--rsh-shadow-lg);
	padding: var(--rsh-space-5) var(--rsh-space-4) var(--rsh-space-4);
	text-align: center;
	animation: rsh-success-panel-in 0.4s var(--rsh-ease);
}

@keyframes rsh-success-panel-in {
	from { opacity: 0; transform: translateY(16px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.rsh-success-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	border: none;
	background: var(--rsh-color-surface);
	border-radius: 999px;
	font-size: 20px;
	line-height: 1;
	color: var(--rsh-color-muted);
	cursor: pointer;
}

.rsh-success-modal__check {
	width: 76px;
	height: 76px;
	margin: 0 auto var(--rsh-space-3);
}

.rsh-success-modal__check-circle {
	fill: none;
	stroke: var(--rsh-color-success);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 214;
	stroke-dashoffset: 214;
	animation: rsh-success-circle 0.6s var(--rsh-ease) forwards;
}

.rsh-success-modal__check-mark {
	fill: none;
	stroke: var(--rsh-color-success);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: rsh-success-mark 0.35s var(--rsh-ease) 0.55s forwards;
}

@keyframes rsh-success-circle { to { stroke-dashoffset: 0; } }
@keyframes rsh-success-mark { to { stroke-dashoffset: 0; } }

.rsh-success-modal__panel h2 { margin-bottom: var(--rsh-space-2); }
.rsh-success-modal__panel > p { color: var(--rsh-color-muted); margin-bottom: var(--rsh-space-3); }

.rsh-success-modal__list {
	list-style: none;
	margin: 0 0 var(--rsh-space-4);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--rsh-space-2);
	text-align: left;
}

.rsh-success-modal__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.9375rem;
	color: var(--rsh-color-text);
}

.rsh-success-modal__list-icon {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: var(--rsh-color-secondary);
	color: var(--rsh-color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.rsh-success-modal__list-icon svg { width: 16px; height: 16px; }

body.rsh-success-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.rsh-success-modal__panel { animation: none; }
	.rsh-success-modal__check-circle,
	.rsh-success-modal__check-mark {
		animation: none;
		stroke-dashoffset: 0;
	}
}

/* =========================================================================
   Resources / Blog
   ========================================================================= */

.rsh-resources-index__grid { margin-top: var(--rsh-space-5); }

.rsh-resource-card { text-decoration: none; color: var(--rsh-color-text); display: flex; flex-direction: column; }
.rsh-resource-card__thumb { border-radius: var(--rsh-radius); overflow: hidden; margin-bottom: var(--rsh-space-2); aspect-ratio: 16/10; }
.rsh-resource-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rsh-resource-card__cat { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rsh-color-accent); margin-bottom: 6px; }
.rsh-resource-card p { color: var(--rsh-color-muted); font-size: 0.9375rem; }

.rsh-resources-index__pagination { margin-top: var(--rsh-space-6); display: flex; justify-content: center; gap: 8px; }
.rsh-resources-index__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 8px;
	border: 1px solid var(--rsh-color-border);
	text-decoration: none;
	color: var(--rsh-color-text);
	font-size: 0.875rem;
}
.rsh-resources-index__pagination .page-numbers.current { background: var(--rsh-color-primary); color: #fff; border-color: var(--rsh-color-primary); }

.rsh-article__meta { color: var(--rsh-color-muted); font-size: 0.875rem; }
.rsh-article__thumb { border-radius: var(--rsh-radius-lg); overflow: hidden; margin: var(--rsh-space-4) 0; aspect-ratio: 16/9; }
.rsh-article__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rsh-article__content { font-size: 1.0625rem; line-height: 1.75; }
.rsh-article__content p:last-child { margin-bottom: 0; }

/* =========================================================================
   Hero flow visual — floating stage chips, used in place of a photo/
   placeholder when the hero should visualize a process (e.g. a pipeline)
   rather than show imagery.
   ========================================================================= */

.rsh-hero-flow {
	position: relative;
	aspect-ratio: 16 / 11;
	border-radius: var(--rsh-radius-lg);
	background: linear-gradient(135deg, var(--rsh-color-secondary), var(--rsh-color-surface));
	border: 1px solid var(--rsh-color-border);
	box-shadow: var(--rsh-shadow-md);
	overflow: hidden;
}

.rsh-hero-flow::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--rsh-color-accent) 5%, transparent) 0 2px, transparent 2px 24px);
}

.rsh-hero-flow__line {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Dashboard variant — coordinated data points over a visible ledger-line
   backdrop, no connecting path (used for finance-style heroes where the
   chips represent independent records rather than a single journey). */
.rsh-hero-flow--dashboard {
	background: linear-gradient(135deg, var(--rsh-color-secondary), #fff 65%);
}

.rsh-hero-flow--dashboard .rsh-hero-flow__ledger {
	position: absolute;
	inset: 10% 8%;
	background-image: repeating-linear-gradient(
		to bottom,
		color-mix(in srgb, var(--rsh-color-primary) 14%, transparent) 0,
		color-mix(in srgb, var(--rsh-color-primary) 14%, transparent) 1px,
		transparent 1px,
		transparent 34px
	);
}

.rsh-hero-flow__line path {
	fill: none;
	stroke: color-mix(in srgb, var(--rsh-color-accent) 45%, transparent);
	stroke-width: 0.6;
	stroke-dasharray: 3 2.5;
}

.rsh-hero-flow__chip {
	position: absolute;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--rsh-color-border);
	color: var(--rsh-color-primary);
	font-family: var(--rsh-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	box-shadow: var(--rsh-shadow-md);
	animation: rsh-float 6s ease-in-out infinite;
}

.rsh-hero-flow__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--rsh-color-accent); flex-shrink: 0; }

.rsh-hero-flow__chip--1 { top: 12%;  left: 6%;   animation-delay: 0s; }
.rsh-hero-flow__chip--2 { top: 38%;  left: 46%;  animation-delay: 1.3s; }
.rsh-hero-flow__chip--3 { top: 64%;  left: 14%;  animation-delay: 2.6s; }
.rsh-hero-flow__chip--4 { top: 80%;  left: 52%;  animation-delay: 3.9s; }
.rsh-hero-flow__chip--5 { top: 6%;   left: 58%;  animation-delay: 0.7s; }

@keyframes rsh-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

@media (max-width: 640px) {
	.rsh-hero-flow__chip { font-size: 0.75rem; padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.rsh-hero-flow__chip { animation: none; }
}

/* =========================================================================
   Process — flow layout (horizontal connected journey)
   ========================================================================= */

/* No top padding on this section — the card should sit flush against
   whatever comes before it, on every device, not leave a dead gap. */
.rsh-process-flow.rsh-section--tight { padding-top: 0; }

.rsh-process-flow__card {
	background: var(--rsh-color-surface);
	border-radius: var(--rsh-radius-lg);
	box-shadow: var(--rsh-shadow-md);
	padding: var(--rsh-space-4) var(--rsh-space-4);
}

@media (min-width: 900px) {
	.rsh-process-flow__card { padding: var(--rsh-space-4) var(--rsh-space-5); }
}

.rsh-process-flow__track {
	position: relative;
	margin-top: 0;
	display: flex;
	flex-direction: column;
	gap: var(--rsh-space-2);
}

.rsh-process-flow__card > .rsh-text-center + .rsh-process-flow__track {
	margin-top: var(--rsh-space-4);
}

/* Mobile: a small vertical dashed arrow between stacked steps, aligned
   under the number badge — reuses the same connector SVG as desktop
   (a horizontal dashed line + arrowhead), just rotated 90deg, so the
   step-to-step progression reads clearly even in a single column. */
.rsh-process-flow__connector {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: 36px;
	height: 28px;
	color: var(--rsh-color-border);
}

.rsh-process-flow__connector svg {
	width: 34px;
	height: 10px;
	transform: rotate(90deg);
}

.rsh-process-flow__track.is-visible .rsh-process-flow__connector {
	color: var(--rsh-color-accent);
}

@media (min-width: 900px) {
	.rsh-process-flow__track {
		flex-direction: row;
		align-items: flex-start;
		gap: 0;
	}

	.rsh-process-flow__stage { flex: 1 1 0; min-width: 0; }

	.rsh-process-flow__connector {
		flex: 0 0 auto;
		width: 48px;
		height: 36px;
		margin-inline: 6px;
	}

	.rsh-process-flow__connector svg {
		width: 100%;
		height: 12px;
		transform: none;
	}
}

.rsh-process-flow__stage { position: relative; text-align: left; }

.rsh-process-flow__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: var(--rsh-space-3);
}

.rsh-process-flow__node {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--rsh-color-accent);
	color: #fff;
	font-family: var(--rsh-font-heading);
	font-weight: 700;
	font-size: 0.9375rem;
}

.rsh-process-flow__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--rsh-color-accent) 14%, transparent);
	color: var(--rsh-color-accent);
}

.rsh-process-flow__icon svg { width: 18px; height: 18px; }

.rsh-process-flow__stage h3 { font-size: 1.1875rem; margin-bottom: 6px; }
.rsh-process-flow__stage p { color: var(--rsh-color-muted); font-size: 0.9375rem; margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.rsh-process-flow__connector { transition: none; }
}

/* =========================================================================
   Pipeline funnel — dark vertical narrowing-stage diagram
   ========================================================================= */

.rsh-pipeline-funnel__inner { text-align: center; }
.rsh-pipeline-funnel__intro { max-width: 640px; margin: 0 auto var(--rsh-space-6); }

.rsh-pipeline-funnel__stages {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	max-width: 420px;
	margin: 0 auto;
}

.rsh-pipeline-funnel__stage {
	width: calc(100% - (var(--rsh-stage-i, 0) * 28px));
	padding: 16px var(--rsh-space-4);
	border-radius: 999px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.14);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.6s var(--rsh-ease), transform 0.6s var(--rsh-ease);
	transition-delay: calc(var(--rsh-stage-i, 0) * 120ms);
}

.rsh-pipeline-funnel__stages.is-visible .rsh-pipeline-funnel__stage { opacity: 1; transform: translateY(0); }

.rsh-pipeline-funnel__label {
	font-family: var(--rsh-font-heading);
	font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #fff;
}

.rsh-pipeline-funnel__arrow {
	width: 2px;
	height: 22px;
	background: linear-gradient(var(--rsh-color-accent), transparent);
	opacity: 0;
	transition: opacity 0.6s var(--rsh-ease);
	transition-delay: calc(var(--rsh-stage-i, 0) * 120ms + 200ms);
}

.rsh-pipeline-funnel__stages.is-visible .rsh-pipeline-funnel__arrow { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.rsh-pipeline-funnel__stage, .rsh-pipeline-funnel__arrow { transition: none; opacity: 1; transform: none; }
}

/* =========================================================================
   Grouped checklist — categorized "what we handle" columns
   ========================================================================= */

.rsh-grouped-checklist__grid { margin-top: var(--rsh-space-5); }

.rsh-grouped-checklist__group {
	padding: var(--rsh-space-4);
	border-radius: var(--rsh-radius-lg);
	background: var(--rsh-color-surface);
	border: 1px solid var(--rsh-color-border);
	transition: transform 0.3s var(--rsh-ease), box-shadow 0.3s var(--rsh-ease), border-color 0.3s var(--rsh-ease);
}

.rsh-grouped-checklist__group:hover {
	transform: translateY(-4px);
	box-shadow: var(--rsh-shadow-md);
	border-color: transparent;
}

.rsh-grouped-checklist__group .rsh-card__icon { margin-bottom: var(--rsh-space-2); }
.rsh-grouped-checklist__group:hover .rsh-card__icon { transform: scale(1.08) rotate(-3deg); background: var(--rsh-color-accent); color: #fff; }

.rsh-grouped-checklist__group h3 {
	font-size: 1.0625rem;
	padding-bottom: var(--rsh-space-2);
	margin-bottom: var(--rsh-space-2);
	border-bottom: 1px solid var(--rsh-color-border);
}

.rsh-grouped-checklist__group ul { list-style: none; margin: 0; padding: 0; }

.rsh-grouped-checklist__group li {
	position: relative;
	padding: 7px 0 7px 22px;
	font-size: 0.9375rem;
	color: var(--rsh-color-muted);
}

.rsh-grouped-checklist__group li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 15px;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--rsh-color-accent);
}

/* Pills variant — lighter editorial rhythm: a row per category with
   flex-wrapped tag pills instead of a bordered card + bullet list. */
.rsh-grouped-checklist__pill-rows {
	margin-top: var(--rsh-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--rsh-space-3);
}

.rsh-grouped-checklist__pill-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rsh-space-2);
	padding-bottom: var(--rsh-space-3);
	border-bottom: 1px solid var(--rsh-color-border);
}

.rsh-grouped-checklist__pill-row:last-child { border-bottom: none; padding-bottom: 0; }

@media (min-width: 720px) {
	.rsh-grouped-checklist__pill-row { grid-template-columns: 200px 1fr; align-items: center; gap: var(--rsh-space-4); }
}

.rsh-grouped-checklist__pill-label {
	font-family: var(--rsh-font-heading);
	font-size: 1.0625rem;
	color: var(--rsh-color-primary);
}

.rsh-grouped-checklist__pills { display: flex; flex-wrap: wrap; gap: 8px; }

.rsh-grouped-checklist__pill {
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--rsh-color-surface);
	border: 1px solid var(--rsh-color-border);
	font-size: 0.875rem;
	color: var(--rsh-color-muted);
	transition: background-color 0.25s var(--rsh-ease), color 0.25s var(--rsh-ease), border-color 0.25s var(--rsh-ease);
}

.rsh-grouped-checklist__pill:hover {
	background: var(--rsh-color-accent);
	border-color: var(--rsh-color-accent);
	color: #fff;
}

/* =========================================================================
   Hero image overlay card — floating UI-style badge over a corner of the
   hero image, for services where the photo alone doesn't read as the
   service (e.g. a "content scheduled" preview on a marketing hero).
   ========================================================================= */

.rsh-hero__media { position: relative; }

.rsh-hero-overlay-card {
	position: absolute;
	left: -18px;
	bottom: -18px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 240px;
	padding: 12px 18px;
	border-radius: var(--rsh-radius);
	background: #fff;
	box-shadow: var(--rsh-shadow-lg);
	animation: rsh-float 6s ease-in-out infinite;
}

.rsh-hero-overlay-card__dot { width: 9px; height: 9px; border-radius: 999px; background: var(--rsh-color-success); flex-shrink: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--rsh-color-success) 18%, transparent); }
.rsh-hero-overlay-card strong { display: block; font-family: var(--rsh-font-body); font-size: 0.8125rem; color: var(--rsh-color-primary); }
.rsh-hero-overlay-card em { display: block; font-style: normal; font-size: 0.75rem; color: var(--rsh-color-muted); }

@media (max-width: 640px) {
	.rsh-hero-overlay-card { left: -8px; bottom: -14px; padding: 10px 14px; max-width: 190px; }
}

@media (prefers-reduced-motion: reduce) {
	.rsh-hero-overlay-card { animation: none; }
}

/* =========================================================================
   Visual spread — full-bleed editorial image with a caption overlay,
   distinct from every split (50/50) image section in the library.
   ========================================================================= */

.rsh-visual-spread__frame { position: relative; border-radius: var(--rsh-radius-lg); overflow: hidden; }

.rsh-media-slot--spread { aspect-ratio: 21 / 9; border-radius: 0; box-shadow: none; }

@media (max-width: 780px) {
	.rsh-media-slot--spread { aspect-ratio: 4 / 5; }
}

.rsh-visual-spread__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--rsh-space-5) var(--rsh-space-5) var(--rsh-space-4);
	background: linear-gradient(0deg, rgba(8,24,38,0.88) 0%, rgba(8,24,38,0.35) 60%, transparent 100%);
}

.rsh-visual-spread__caption .rsh-eyebrow { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); color: #fff; }
.rsh-visual-spread__caption .rsh-eyebrow::before { background: #fff; }
.rsh-visual-spread__caption h2 { color: #fff; max-width: 640px; }
.rsh-visual-spread__caption p { color: rgba(255,255,255,0.82); max-width: 560px; margin-bottom: 0; }

/* =========================================================================
   Hero trust points — icon-topped badge row (richer alternative to the
   plain dot-list badges used elsewhere).
   ========================================================================= */

.rsh-hero__trust-points {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rsh-space-4);
	margin-top: var(--rsh-space-4);
}

.rsh-hero__trust-point {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 96px;
}

.rsh-hero__trust-icon {
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: var(--rsh-color-secondary);
	color: var(--rsh-color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.rsh-hero__trust-icon svg { width: 18px; height: 18px; }

.rsh-hero__trust-point span:last-child {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--rsh-color-muted);
	line-height: 1.3;
}

.rsh-hero--center .rsh-hero__trust-points { justify-content: center; }

@media (max-width: 640px) {
	.rsh-hero__trust-points { gap: var(--rsh-space-3); }
	.rsh-hero__trust-point { min-width: 76px; }
}

/* =========================================================================
   Hero slider — full-bleed dark hero with a rotating tinted photo, used by
   Hero::render_slider() when a section's data has visual='slider'. Its own
   local blue accent (--hs-blue) is scoped to this hero only via the
   .rsh-hero--slider selector — it does NOT touch --rsh-color-accent, so
   the rest of the site (buttons, badges, admin panel) keeps the existing
   copper/navy palette until asked to change it everywhere.
   ========================================================================= */

.rsh-hero--slider {
	--hs-blue: #2F6BFF;
	--hs-blue-dark: #1D4ED8;
	--hs-navy: #0A1526;
	position: relative;
	overflow: hidden;
	padding: 0;
	background: var(--hs-navy);
	min-height: 620px;
	display: flex;
	align-items: center;
}

/* Subtle dot-grid texture, evoking the reference's connected-network motif
   without a literal (and harder to keep accurate) world-map graphic. */
.rsh-hero--slider::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 24px 24px;
	pointer-events: none;
}

.rsh-hero-slider__track {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.rsh-hero-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.1s var(--rsh-ease);
}

.rsh-hero-slider__slide.is-active { opacity: 1; }

.rsh-hero-slider__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Bias the crop toward the right side of the photo — the side that
	   actually stays visible past the text tint — instead of a plain
	   center crop that often centers the subject under the tinted zone. */
	object-position: 68% center;
	display: block;
}

.rsh-hero-slider__tint {
	position: absolute;
	inset: 0;
	/* The text column sits at a FIXED left offset (96px padding) with a
	   FIXED max-width (600px) — not a percentage of the hero's width — so
	   its right edge is always ~696px from the left edge regardless of
	   viewport size. A plain percentage stop only clears that on wide
	   screens; max() keeps a fixed minimum reach so the solid zone still
	   fully covers the text column on an 900–1280px browser window, while
	   still scaling up proportionally on very wide monitors. The fade then
	   closes quickly after that so most of the right column stays clearly
	   visible instead of staying tinted almost to the edge. */
	background: linear-gradient(
		90deg,
		var(--hs-navy) 0%,
		var(--hs-navy) max(40%, 720px),
		color-mix(in srgb, var(--hs-navy) 45%, transparent) max(50%, 820px),
		color-mix(in srgb, var(--hs-navy) 12%, transparent) max(60%, 900px),
		transparent max(72%, 980px)
	);
}

.rsh-hero-slider__inner {
	/* Overrides .rsh-container's max-width + margin-inline:auto — this hero
	   is full-bleed and the tint gradient's solid zone is a % of that full
	   width measured from the true left edge, so the text column must also
	   hug the true left edge (not sit centered inside a narrower, inset
	   container) or it runs past the solid zone and onto the photo. */
	max-width: none;
	margin-inline: 0;
	padding-inline: var(--rsh-space-4);
	position: relative;
	z-index: 1;
	padding-block: 90px 56px;
}

@media (min-width: 900px) {
	.rsh-hero-slider__inner { padding-block: 130px 150px; padding-inline: var(--rsh-space-7); }
}

.rsh-hero-slider__content { max-width: 600px; }

.rsh-hero-slider__content h1 {
	font-family: var(--rsh-font-body);
	font-weight: 800;
	font-size: clamp(2.25rem, 1.65rem + 2.3vw, 3.5rem);
	line-height: 1.14;
	letter-spacing: -0.01em;
	color: #fff;
}

.rsh-hero-slider__accent {
	display: block;
	color: var(--hs-blue);
}

.rsh-hero--slider .rsh-lede {
	color: rgba(255, 255, 255, 0.78);
	max-width: 46ch;
	margin-top: var(--rsh-space-2);
}

.rsh-hero--slider .rsh-btn--primary {
	background: var(--hs-blue);
}

.rsh-hero--slider .rsh-btn--primary::before { display: none; }
.rsh-hero--slider .rsh-btn--primary:hover { background: var(--hs-blue-dark); transform: translateY(-2px); }

.rsh-hero--slider .rsh-hero__trust-points {
	gap: var(--rsh-space-4);
}

.rsh-hero--slider .rsh-hero__trust-point {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.rsh-hero--slider .rsh-hero__trust-icon {
	width: 26px;
	height: 26px;
	background: rgba(47, 107, 255, 0.18);
	color: var(--hs-blue);
}

.rsh-hero--slider .rsh-hero__trust-icon svg { width: 14px; height: 14px; }

.rsh-hero--slider .rsh-hero__trust-point span:last-child {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.8125rem;
}

.rsh-hero-slider__controls {
	/* Sits mid-right, not pinned to the bottom edge — the trust-strip card
	   overlaps the bottom of the hero (see the adjacent-sibling rule
	   below), and arrows anchored to the bottom would end up hidden under
	   it and unclickable. */
	position: absolute;
	z-index: 3;
	right: var(--rsh-space-4);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 16px;
}

.rsh-hero-slider__arrows { display: flex; gap: 8px; }

.rsh-hero-slider__arrows button {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s var(--rsh-ease), border-color 0.2s var(--rsh-ease);
}

.rsh-hero-slider__arrows button svg { width: 18px; height: 18px; }
.rsh-hero-slider__arrows button:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }

/* When the "Supporting Businesses Across" strip immediately follows this
   hero, pull it up so it reads as one attached card rather than a floating
   gap — matches the reference's overlapping trust-strip treatment. Purely
   an adjacent-sibling bonus: if the client reorders sections so something
   else follows the hero instead, this simply never applies. */
.rsh-hero--slider + .rsh-logo-strip {
	position: relative;
	z-index: 2;
	margin-top: -110px;
	padding-block: var(--rsh-space-5);
	background: transparent;
}

.rsh-hero--slider + .rsh-logo-strip .rsh-logo-strip__inner {
	background: var(--rsh-color-bg);
	border-radius: var(--rsh-radius-lg);
	box-shadow: var(--rsh-shadow-lg);
	padding: var(--rsh-space-4) var(--rsh-space-5);
}

@media (max-width: 767px) {
	/* Mobile gets its own layout, not just a narrower version of the
	   desktop side-by-side one: a clean, unobstructed image band across
	   the top, fading vertically into the solid navy background, with
	   the text flowing normally below it (not centered/overlaid across
	   the full section height like desktop). */
	.rsh-hero--slider {
		display: block;
		min-height: auto;
	}

	.rsh-hero-slider__track {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: auto;
		height: 260px;
	}

	.rsh-hero-slider__tint {
		background: linear-gradient(
			180deg,
			transparent 0%,
			transparent 32%,
			var(--hs-navy) 90%,
			var(--hs-navy) 100%
		);
	}

	.rsh-hero-slider__inner {
		position: relative;
		padding-top: 280px;
		padding-bottom: var(--rsh-space-4);
	}

	.rsh-hero-slider__content { max-width: 100%; }

	.rsh-hero-slider__controls {
		position: absolute;
		top: 208px;
		right: var(--rsh-space-3);
		bottom: auto;
		transform: none;
		margin-top: 0;
		padding-bottom: 0;
	}

	.rsh-hero-slider__arrows button {
		width: 34px;
		height: 34px;
	}

	.rsh-hero-slider__arrows button svg { width: 15px; height: 15px; }

	.rsh-hero--slider + .rsh-logo-strip { margin-top: 0; }

	.rsh-hero--slider + .rsh-logo-strip .rsh-logo-strip__inner {
		padding: var(--rsh-space-3);
		border-radius: var(--rsh-radius);
	}
}

/* =========================================================================
   Hero app-dashboard visual — a premium "SaaS window" mockup. Every value
   rendered is a label only (no numbers/percentages), so this can never
   read as a real business figure — the KPI bars, sparkline and donut are
   purely decorative shapes indicating "there is data here."
   ========================================================================= */

.rsh-hero-dash { position: relative; }

.rsh-hero-dash__window {
	display: flex;
	border-radius: var(--rsh-radius-lg);
	background: #fff;
	border: 1px solid var(--rsh-color-border);
	box-shadow: var(--rsh-shadow-lg);
	overflow: hidden;
}

.rsh-hero-dash__sidebar {
	flex-shrink: 0;
	width: 44px;
	background: var(--rsh-color-primary);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
}

.rsh-hero-dash__sidebar span {
	width: 16px;
	height: 16px;
	border-radius: 5px;
	background: rgba(255,255,255,0.14);
}

.rsh-hero-dash__sidebar span:first-child { background: var(--rsh-color-accent); }

.rsh-hero-dash__body { flex: 1; padding: var(--rsh-space-4); min-width: 0; }

.rsh-hero-dash__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--rsh-space-3);
}

.rsh-hero-dash__header span:first-child {
	font-family: var(--rsh-font-heading);
	font-weight: 600;
	font-size: 1rem;
	color: var(--rsh-color-primary);
}

.rsh-hero-dash__header-dots { display: flex; gap: 6px; }
.rsh-hero-dash__header-dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--rsh-color-border); display: block; }

.rsh-hero-dash__kpis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: var(--rsh-space-3);
}

.rsh-hero-dash__kpi {
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--rsh-color-surface);
	border: 1px solid var(--rsh-color-border);
}

.rsh-hero-dash__kpi-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--rsh-color-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 8px;
}

.rsh-hero-dash__kpi-bar { display: block; height: 5px; border-radius: 999px; background: var(--rsh-color-border); overflow: hidden; }
.rsh-hero-dash__kpi-bar em { display: block; height: 100%; border-radius: 999px; background: var(--rsh-color-accent); font-style: normal; }

.rsh-hero-dash__charts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.rsh-hero-dash__panel {
	padding: 10px 12px 12px;
	border-radius: 10px;
	background: var(--rsh-color-surface);
	border: 1px solid var(--rsh-color-border);
}

.rsh-hero-dash__panel-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--rsh-color-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 8px;
}

.rsh-hero-dash__sparkline { width: 100%; height: 34px; }
.rsh-hero-dash__sparkline path { fill: none; stroke: var(--rsh-color-accent); stroke-width: 2.2; stroke-linecap: round; }

.rsh-hero-dash__donut-row { display: flex; align-items: center; gap: 10px; }

.rsh-hero-dash__donut {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: conic-gradient(
		var(--rsh-color-primary) 0deg 160deg,
		var(--rsh-color-accent) 160deg 260deg,
		color-mix(in srgb, var(--rsh-color-accent) 50%, var(--rsh-color-primary)) 260deg 320deg,
		var(--rsh-color-border) 320deg 360deg
	);
	position: relative;
}

.rsh-hero-dash__donut::after {
	content: '';
	position: absolute;
	inset: 8px;
	border-radius: 999px;
	background: var(--rsh-color-surface);
}

.rsh-hero-dash__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.rsh-hero-dash__legend li { display: flex; align-items: center; gap: 6px; font-size: 0.6875rem; color: var(--rsh-color-muted); }

.rsh-hero-dash__legend-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.rsh-hero-dash__legend-dot--1 { background: var(--rsh-color-primary); }
.rsh-hero-dash__legend-dot--2 { background: var(--rsh-color-accent); }
.rsh-hero-dash__legend-dot--3 { background: color-mix(in srgb, var(--rsh-color-accent) 50%, var(--rsh-color-primary)); }
.rsh-hero-dash__legend-dot--4 { background: var(--rsh-color-border); }

.rsh-hero-dash__status {
	position: absolute;
	right: -14px;
	bottom: -18px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 220px;
	padding: 12px 16px;
	border-radius: var(--rsh-radius);
	background: #fff;
	border: 1px solid var(--rsh-color-border);
	box-shadow: var(--rsh-shadow-lg);
	animation: rsh-float 6s ease-in-out infinite;
}

.rsh-hero-dash__status-dot {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--rsh-color-success) 16%, transparent);
	position: relative;
}

.rsh-hero-dash__status-dot::after {
	content: '';
	position: absolute;
	inset: 5px;
	border-radius: 999px;
	background: var(--rsh-color-success);
}

.rsh-hero-dash__status strong { display: block; font-family: var(--rsh-font-body); font-size: 0.8125rem; color: var(--rsh-color-primary); }
.rsh-hero-dash__status em { display: block; font-style: normal; font-size: 0.75rem; color: var(--rsh-color-muted); }

@media (max-width: 640px) {
	.rsh-hero-dash__kpis { grid-template-columns: 1fr 1fr; }
	.rsh-hero-dash__kpi:last-child { grid-column: span 2; }
	.rsh-hero-dash__charts { grid-template-columns: 1fr; }
	.rsh-hero-dash__status { right: 4px; bottom: -14px; max-width: 180px; padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.rsh-hero-dash__status { animation: none; }
}

/* =========================================================================
   Value props — flat layout (equal-width dark trust cards)
   ========================================================================= */

.rsh-value-props--flat .rsh-eyebrow { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); color: #fff; }
.rsh-value-props--flat .rsh-eyebrow::before { background: #fff; }

.rsh-value-props__flat-grid { margin-top: var(--rsh-space-5); }

.rsh-value-props__flat-card {
	padding: var(--rsh-space-4);
	border-radius: var(--rsh-radius-lg);
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.12);
	transition: transform 0.3s var(--rsh-ease), background-color 0.3s var(--rsh-ease), border-color 0.3s var(--rsh-ease);
}

.rsh-value-props__flat-card:hover {
	transform: translateY(-4px);
	background: rgba(255,255,255,0.08);
	border-color: rgba(255,255,255,0.22);
}

.rsh-value-props__flat-card .rsh-card__icon { background: rgba(255,255,255,0.1); color: var(--rsh-color-accent); }
.rsh-value-props__flat-card:hover .rsh-card__icon { background: var(--rsh-color-accent); color: #fff; }
.rsh-value-props__flat-card h3 { color: #fff; font-size: 1.0625rem; }
.rsh-value-props__flat-card p { color: rgba(255,255,255,0.72); margin-bottom: 0; font-size: 0.9375rem; }