/* ==========================================================================
   Response Informatics — design tokens and component styles.
   Tokens below were measured from the live site so the rebuild matches it:
   container 1200px, body Roboto 16/30, headings Poppins 700 in navy.
   ========================================================================== */

:root {
	/* Brand */
	--rilt-navy: #0d2252;
	--rilt-navy-deep: #152644;
	--rilt-accent: #05afec;
	--rilt-accent-dark: #048dbe;
	--rilt-green: #94ca36;

	/* Neutrals */
	/* Production's body default is 16px on a 30px line in rgb(56,56,56).
	   Its /about-company/ prose is 17px/26px in rgb(97,97,97) - a
	   per-section setting, not the page default - so that one is scoped
	   below rather than moved here. Changing the global pulled every
	   disclosure row title and committee row with it. */
	--rilt-ink: #383838;
	--rilt-ink-strong: #0e0e0e;
	--rilt-muted: #6b7280;
	--rilt-surface: #ffffff;
	--rilt-surface-alt: #eaeff2;
	--rilt-border: rgba(12, 12, 12, 0.1);

	/* Type */
	--rilt-font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	--rilt-font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--rilt-text: 1rem;
	--rilt-leading: 1.875;
	--rilt-h1: clamp(2rem, 1.3rem + 2.6vw, 3rem);
	--rilt-h2: clamp(1.625rem, 1.25rem + 1.3vw, 2rem);
	--rilt-h3: 1.375rem;
	--rilt-h4: 1.25rem;

	/* Space */
	--rilt-gutter: 15px;
	/* 1170px of content plus the 15px gutter either side: production's row is
	   1170px wide, which is what makes its three service cards 370px. */
	--rilt-container: 1200px;
	--rilt-content: 1170px;
	--rilt-container-narrow: 900px;
	--rilt-section-y: clamp(3rem, 1.5rem + 5vw, 5.5rem);
	/* Production's grid gap is 30px: its three service cards measure 370px
	   each inside a 1170px row, which is 3x370 + 2x30. A 40px gap made the
	   same row give 363px cards. */
	--rilt-gap: clamp(1.5rem, 1rem + 2vw, 1.875rem);

	/* Shape */
	--rilt-radius: 3px;
	--rilt-radius-lg: 6px;
	--rilt-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
	--rilt-shadow-lift: 0 10px 28px rgba(21, 38, 68, 0.16);

	--rilt-header-h: 72px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	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;
	}
}

body {
	margin: 0;
	background: var(--rilt-surface);
	color: var(--rilt-ink);
	font-family: var(--rilt-font-body);
	font-size: var(--rilt-text);
	line-height: var(--rilt-leading);
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--rilt-accent);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--rilt-accent-dark);
	text-decoration: underline;
}

:focus-visible {
	outline: 3px solid var(--rilt-accent);
	outline-offset: 2px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.6em;
	color: var(--rilt-navy);
	font-family: var(--rilt-font-heading);
	font-weight: 700;
	line-height: 1.33;
}

h1 { font-size: var(--rilt-h1); }
h2 { font-size: var(--rilt-h2); }
h3 { font-size: var(--rilt-h3); }
h4 { font-size: var(--rilt-h4); }

p {
	margin: 0 0 1.25rem;
}

ul,
ol {
	padding-inline-start: 1.25rem;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	z-index: 999;
	width: auto;
	height: auto;
	clip-path: none;
	padding: 0.75rem 1.25rem;
	background: var(--rilt-navy);
	color: #fff;
	border-radius: var(--rilt-radius);
}

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

.container {
	width: 100%;
	max-width: calc(var(--rilt-content) + (2 * var(--rilt-gutter)));
	margin-inline: auto;
	padding-inline: var(--rilt-gutter);
}

.container--narrow {
	max-width: var(--rilt-container-narrow);
}

.section {
	padding-block: var(--rilt-section-y);
}

.grid {
	display: grid;
	gap: var(--rilt-gap);
}

.grid--split {
	grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
	.grid--split {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.card-grid {
	display: grid;
	gap: var(--rilt-gap);
	grid-template-columns: 1fr;
}

/* Breakpoints follow the grid the production site uses (Bootstrap 4):
   576px, 768px, 992px, 1200px. Keeping them aligned means a layout
   difference between the two sites is a real difference, not a different
   column count at the same width. */

@media (min-width: 36rem) {
	.card-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 48rem) {
	.card-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* The blog list is two to a row beside its sidebar, which is what production
   renders: its post photograph measures 393x271 at 1440, 311x215 at 1024,
   354x244 at 768 and 360x248 at 390 - two columns from 768 and one below.
   Three columns made staging's 250x155. */
@media (min-width: 48rem) {
	.card-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Headings and prose
   -------------------------------------------------------------------------- */

.section-heading {
	position: relative;
	margin-bottom: 2rem;
	padding-bottom: 0.75rem;
}

.section-heading::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	width: 46px;
	height: 3px;
	background: linear-gradient(90deg, var(--rilt-accent), var(--rilt-green));
}

.section-heading--center {
	text-align: center;
}

.section-heading--center::after {
	inset-inline-start: 50%;
	transform: translateX(-50%);
}

.section-heading--invert {
	color: #fff;
}

.section-lede {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.prose > :last-child {
	margin-bottom: 0;
}

.prose img {
	border-radius: var(--rilt-radius-lg);
}

.prose table {
	width: 100%;
	border-collapse: collapse;
}

.prose th,
.prose td {
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--rilt-border);
	text-align: start;
}

.prose th {
	background: var(--rilt-surface-alt);
	font-family: var(--rilt-font-heading);
	color: var(--rilt-navy);
}

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

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--rilt-radius);
	font-family: var(--rilt-font-heading);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--primary {
	background: var(--rilt-accent);
	border-color: var(--rilt-accent);
	color: #fff;
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--rilt-navy);
	border-color: var(--rilt-navy);
	color: #fff;
	text-decoration: none;
}

.btn--ghost {
	background: transparent;
	border-color: #fff;
	color: #fff;
	text-transform: none;
	font-size: 0.9375rem;
	font-weight: 500;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	background: #fff;
	color: var(--rilt-navy);
	text-decoration: none;
}

.link-more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--rilt-font-heading);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ==========================================================================
   Page loader
   Every value below was measured on production's own loader element
   (www.responseinformaticsltd.com, live computed styles and its served
   theme.css), identically at 390 and 1440.
   ========================================================================== */

.site-loader {
	position: fixed; /* prod: position fixed */
	top: 0; /* prod: top 0px */
	left: 0; /* prod: left 0px */
	width: 100%; /* prod: width 100% - measured 390px / 1440px */
	height: 100%; /* prod: height 100% - measured 844px / 900px */
	z-index: 999999; /* prod: z-index 999999 */
	background-color: #fff; /* prod: background-color rgb(255, 255, 255) */
	/* Fail-safe: production has none, so a page whose `load` never fires
	   keeps its loader forever. This clears the overlay with no JavaScript
	   at all, 15s after first paint. The JS path below normally wins by a
	   wide margin, so this never renders in practice. */
	animation: rilt-loader-failsafe 1ms linear 15s forwards;
}

/* Set by the script once the fade has finished - production's loader also
   stays in the DOM at display:none rather than being removed. */
.site-loader.is-done {
	display: none;
}

.site-loader__spinner {
	position: absolute; /* prod: position absolute */
	top: 50%; /* prod: top 50% */
	left: 0;
	right: 0;
	margin: auto; /* prod: left 0 / right 0 / margin auto - centred horizontally */
	transform: translate(0, -50%); /* prod: transform translate(0px, -50%) */
	width: 70px; /* prod: width 70px */
	height: 30px; /* prod: measured box 70 x 30 */
	display: flex;
	justify-content: center;
	/* Production's dots are baseline-aligned inline-blocks inside a 30px line
	   box, which puts their centres 4px above the box centre: measured dot
	   centre y = 446 inside a spinner spanning 435-465 at 1440. Pinning them
	   from the top reproduces that exactly without depending on font metrics. */
	align-items: flex-start;
	padding-top: 2px; /* prod: dot top edge 2px below the spinner's top edge */
	gap: 4.5px; /* prod: dot centres 22.5px apart across an 18px dot */
}

.site-loader__dot {
	width: 18px; /* prod: width 18px */
	height: 18px; /* prod: height 18px */
	background-color: #05afec; /* prod: background-color rgb(5, 175, 236) */
	border-radius: 100%; /* prod: border-radius 100% */
	/* prod: animation 1.4s ease-in-out 0s infinite normal both ct-bouncedelay */
	animation: rilt-loader-bounce 1.4s ease-in-out infinite both;
}

.site-loader__dot:nth-child(1) {
	animation-delay: -0.32s; /* prod: animation-delay -0.32s */
}

.site-loader__dot:nth-child(2) {
	animation-delay: -0.16s; /* prod: animation-delay -0.16s */
}

.site-loader__dot:nth-child(3) {
	animation-delay: 0s; /* prod: animation-delay 0s */
}

/* prod keyframes, read from its theme.css:
   @keyframes ct-bouncedelay { 0%, 80%, 100% { transform: scale(0); }
                               40% { transform: scale(1); } } */
@keyframes rilt-loader-bounce {
	0%,
	80%,
	100% {
		transform: scale(0);
	}

	40% {
		transform: scale(1);
	}
}

@keyframes rilt-loader-failsafe {
	to {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

/* ==========================================================================
   Mouse-cursor follower
   Every value below was read from production's own served theme.css
   (www.responseinformaticsltd.com, rules at theme.css:13088-13131) and
   confirmed against its live computed styles. Production declares these at
   the top level, inside no media query, so there is none here either.
   ========================================================================== */

.cursor-follower {
	position: fixed; /* prod: position fixed */
	z-index: 9999; /* prod: z-index 9999 */
	/* No top/left: production declares none. The script sets them on this
	   wrapper from the pointer position, and both circles inherit them. */
}

.cursor-follower__ring,
.cursor-follower__dot {
	position: fixed; /* prod: position fixed */
	top: inherit; /* prod: top inherit - takes the wrapper's top */
	left: inherit; /* prod: left inherit - takes the wrapper's left */
	pointer-events: none; /* prod: pointer-events none - must never take a click */
}

.cursor-follower__dot {
	width: 6px; /* prod: width 6px */
	height: 6px; /* prod: height 6px */
	background-color: #05afec; /* prod: background-color rgb(5, 175, 236) */
	border-radius: 6px; /* prod: border-radius 6px */
	margin-top: -5px; /* prod: margin-top -5px */
	margin-left: -4px; /* prod: margin-left -4px */
	/* prod declares NO transition on the inner dot - it is pinned to the
	   pointer with no lag at all. Do not add one. */
}

.cursor-follower__ring {
	width: 30px; /* prod: width 30px */
	height: 30px; /* prod: height 30px */
	border: 1px solid rgba(5, 175, 236, 0.5); /* prod: 1px solid rgba(5, 175, 236, 0.5) */
	border-radius: 30px; /* prod: border-radius 30px */
	margin-top: -17px; /* prod: margin-top -17px */
	margin-left: -16px; /* prod: margin-left -16px */
	transition: all 50ms linear 0ms; /* prod: transition all 50ms linear 0ms - the only lag in the effect */
}