/* ==========================================================================
   Components: hero, cards, bands, investor tables, footer.
   ========================================================================== */

/* Hero ------------------------------------------------------------------- */

.hero {
	position: relative;
	display: grid;
	place-items: center;
	/* Production's hero measures exactly 400px tall at 390, 768, 1024 and
	   1440 - its slider is a fixed-height module, not a fluid band. */
	min-height: 400px;
	height: 400px;
	background: var(--rilt-navy);
	color: #fff;
	overflow: hidden;
}

/* When the imported Slider Revolution slider renders, the band is the
   plugin's own `rs-module-wrap`: a fullwidth module that sizes itself from
   its own grid (1230/1024/778/480 wide, 400 tall, production's values). The
   grid centring and fixed height above are the hand-built stack's and would
   fight it, so this variant hands the band back to the plugin. The navy
   stays as a backdrop while the slide photographs lazy-load. */
.hero--slider {
	display: block;
	place-items: initial;
	height: auto;
	min-height: 400px;
	padding: 0;
}

.hero--slider rs-module-wrap {
	margin: 0 auto;
}

/* `fac fa-caret-right` is the Consultio theme's caret inside each slide
   button. Nothing in this theme defines that glyph, so the button would show
   the label and nothing after it. Production draws a small solid right-
   pointing triangle; this is that shape, built in CSS so no webfont is
   needed. */
.hero--slider .rev-btn i.fa-caret-right {
	position: relative;
	display: inline-block;
	/* Production's own `i` box measures 5x14 at 1440. */
	width: 5px;
	height: 14px;
	margin-left: 6px;
	vertical-align: middle;
}

.hero--slider .rev-btn i.fa-caret-right::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -4px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 5px solid currentColor;
}

.hero__media {
	position: absolute;
	inset: 0;
}

/* One frame per slide, stacked; only the current one is painted. Production
   changes the photograph with the words. */
.hero__media-frame {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.8s ease;
}

.hero__media-frame.is-current {
	opacity: 1;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
	.hero__media-frame {
		transition: none;
	}
}

.hero__inner {
	position: relative;
	text-align: center;
	padding-block: var(--rilt-section-y);
}

.hero__title {
	max-width: 22ch;
	margin-inline: auto;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hero__text {
	max-width: 52ch;
	margin-inline: auto;
	color: rgba(255, 255, 255, 0.9);
}

/* Interior page banner --------------------------------------------------- */

/* Measured on production at 390, 768, 1024 and 1440: 116px of padding above
   and below at every width, a 40px title, and both the title and the trail
   centred. Production's stylesheet asks for 167px on top, but a later rule
   overrides it, so 116 is what actually renders. */
/* Production's `.page-title bg-image` is 325 tall on every inner page, starting
   at y189 under the header; staging's content came to 318. The 325 is a floor
   rather than more padding, so the 116px above the title - measured on
   production at four widths - and the title's own position are untouched. */
.banner {
	padding-block: 7.25rem;
	min-height: 325px;
	background: var(--rilt-navy);
	color: #fff;
	text-align: center;
}

.banner__title {
	margin: 0;
	color: #fff;
	/* Production does not scale this down on narrow screens. */
	font-size: 2.5rem;
	line-height: 1.2;
}

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-block-start: 0.5rem;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.78);
}

.breadcrumbs a {
	color: rgba(255, 255, 255, 0.78);
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
	color: #fff;
}

.breadcrumbs__sep {
	margin-inline: 0.5rem;
	opacity: 0.6;
}

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

.card {
	/* No border and no panel behind the card: production's service and post
	   cards are a bare photograph with text under it - `item--featured` and
	   its three ancestors all compute border 0, padding 0, a transparent
	   background and no shadow, measured at 1440. A 1px border also stole two
	   pixels from every card photograph, which is why they measured 368 wide
	   against production's 370. */
	display: flex;
	flex-direction: column;
	/* Production's cards have square corners: computed border-radius 0px on
	   the card and every ancestor. */
	border-radius: 0;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover,
.card:focus-within {
	box-shadow: var(--rilt-shadow-lift);
	transform: translateY(-3px);
}

.card__media img {
	width: 100%;
	aspect-ratio: 42 / 26;
	object-fit: cover;
}

/* A service card's photograph is shallower than a post's on production:
   370x217 against 370x230, measured on its own home page at 1440. Both are
   written as the measured ratio rather than a rounded one, which 42/26 was:
   it came out a pixel short on the post card. */
.card--service .card__media img {
	aspect-ratio: 370 / 217;
}

.card--post .card__media img {
	aspect-ratio: 370 / 230;
}

/* On the blog list production's photograph is deeper: 393x271 at 1440. */
.card-grid--2 .card--post .card__media img {
	aspect-ratio: 393 / 271;
}

.card__title {
	/* Production's card title is 20px at weight 700 in near-black on a 28px
	   line. An earlier measurement caught the accent-blue copy, which is the
	   one it hides. */
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 28px;
	color: #0e0e0e;
}

.card--service .card__title,
.card--service .card__title a {
	color: #0e0e0e;
	line-height: 28px;
}

.card--post .card__title {
	/* The blog list's title is plain dark text on the page. */
	padding: 0.875rem 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.625;
	color: #0e0e0e;
	background: none;
}

/* On the home page production prints it white, 18px/700 on a 21.6px line, on
   a coloured bar across the bottom of the thumbnail - confirmed from its own
   screenshot, not just computed style. Round six removed that bar after
   pairing the home card against the blog-list one. */
.card-strip .card--post .card__title {
	padding: 0.875rem 1.125rem;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	background: linear-gradient(90deg, var(--rilt-accent), var(--rilt-green));
}

.card-strip .card--post .card__title a {
	color: #fff;
}

/* Production's home blog read-more is its blue, not white: measured on the
   one visible instance at 390 and again at 1440. The gradient bar above
   carries the title only, so this sits on transparent ground. The white came
   from reading a card production ships twice and hides one copy of. */
.card-strip .card--post .link-more {
	color: rgb(5, 175, 236);
}

/* And its service-card read-more is navy where this theme used the accent. */
.card--service .card__more {
	color: rgb(13, 34, 82);
}

.card-grid--2 .card--post .card__title {
	/* Production's blog-list title: 22px/700 in rgb(56,56,56) on a 28.6px
	   line. Its sidebar recent-post titles are the 16px/600 near-black ones,
	   set further down. */
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
	color: rgb(56, 56, 56);
}

/* Production lets a post title wrap to as many lines as it needs - measured
   at 1440, its titles run to three lines and 86px. Holding them to one line
   with an ellipsis cut the end off every title on both the home page and the
   blog index. */
.card--post .card__title a {
	color: #fff;
	display: block;
}

.card__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 1rem 1.125rem 1.25rem;
	margin-block-start: auto;
}

.card__title--icon {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.125rem;
}

.card__title--icon a {
	color: var(--rilt-navy);
}

.card__icon {
	flex: none;
	display: inline-block;
	font-size: 2rem;
	line-height: 1;
	color: var(--rilt-accent);
}

/* The service card's excerpt and link. The title above them carries its own
   1.125rem padding, so these align to the same gutter and the link sits on a
   24px line to stay a large enough target. */
.card__excerpt {
	margin: 0;
	padding: 0 1.125rem;
	color: var(--rilt-muted);
	font-size: 0.875rem;
	line-height: 1.6;
}

.card__more {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
	margin-block-start: auto;
	padding: 0.75rem 1.125rem 1.125rem;
	font-family: var(--rilt-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rilt-accent);
}

.post-meta {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--rilt-muted);
}

/* Highlights ------------------------------------------------------------- */

.highlights {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.highlight {
	display: flex;
	gap: 1rem;
	padding-block-end: 1.5rem;
	border-block-end: 1px solid var(--rilt-border);
}

.highlight:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.highlight__icon {
	flex: none;
	align-self: flex-start;
	display: inline-block;
	font-size: 2.375rem;
	line-height: 1;
	color: var(--rilt-accent);
}

.highlight__title {
	margin: 0 0 0.35rem;
	font-size: 1.0625rem;
}

.highlight__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
}

/* Bands ------------------------------------------------------------------ */

.section--services,
.section--blogs {
	background: #fff;
}

.section--experience {
	position: relative;
	background-color: var(--rilt-navy);
	background-image: var(--band-image, none);
	background-size: cover;
	background-position: center;
	color: #fff;
	isolation: isolate;
}

.section--experience::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(13, 34, 82, 0.86);
}

.section--experience .section-lede {
	color: rgba(255, 255, 255, 0.88);
}

.counters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: var(--rilt-gap);
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

/* Production's counter row is narrower than its other card rows: its cards are
   262.5 wide at x 150 / 442.5 / 735 / 1027.5, a 1140 span inside the same 1170
   container. Staging ran the full 1170 and put 270px cards at 135 / 435 / 735 /
   1035. Centring a 1140 track inside the 1170 container lands all four icons
   and numbers on production's x. The services, blog and testimonial rows DO
   span 1170 on both sides and are deliberately untouched. */
@media (min-width: 75rem) {
	.counters {
		max-width: 1140px;
		margin-inline: auto;
	}
}

.counter__icon {
	display: block;
	margin: 0 auto 0.75rem;
}

.counter__icon img {
	/* Production draws these at their own height, 74px, so the four icons
	   come out 79x74, 74x74, 87x74 and 68x74. Staging capped them at 56px.
	   The source files are identical on both sites. */
	margin-inline: auto;
	height: 74px;
	width: auto;
	max-width: 100%;
}

.counter__value,
.counter__plus {
	font-family: var(--rilt-font-heading);
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--rilt-accent);
	line-height: 1.1;
}

.counter__label {
	display: block;
	margin-block-start: 0.25rem;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.86);
}

.cta {
	position: relative;
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem);
	background-color: var(--rilt-navy-deep);
	background-image: var(--band-image, none);
	background-size: cover;
	background-position: center;
	color: #fff;
	isolation: isolate;
}

.cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(13, 34, 82, 0.6);
}

.cta__inner {
	text-align: center;
}

.cta__title {
	color: #fff;
}

.cta__text {
	max-width: 56ch;
	margin-inline: auto;
	font-style: italic;
	color: rgba(255, 255, 255, 0.9);
}

.section--partners {
	background: var(--rilt-surface-alt);
}

.logo-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	align-items: center;
	gap: var(--rilt-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.logo-row__img {
	margin-inline: auto;
	/* Production sizes a partner logo by width, not height: measured on its
	   own home page at 1440, all three are 220px wide and their heights
	   follow the artwork - AWS and Salesforce 83px from a 240x90 source,
	   HPTU 39px from a 512x91 one. Capping the height instead made the two
	   square-ish logos 171px wide and stretched HPTU to 360px, so the row
	   read as three logos of three different sizes. */
	width: 220px;
	max-width: 100%;
	height: auto;
	/* Production shows these in colour at half opacity, measured on its own
	   home page: filter none, opacity 0.5. Staging had desaturated them. */
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

.logo-row__item:hover .logo-row__img {
	opacity: 1;
}

/* Investor disclosures --------------------------------------------------- */

.disclosure-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.disclosure {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0.875rem 1.125rem;
	background: #fff;
}

/* Production has no zebra striping on any of its six disclosure pages: every
   one of them draws its rows with the same `ct_download` widget, which paints
   no row background at all. This was staging's own. */

.disclosure__title {
	margin: 0;
	font-family: var(--rilt-font-body);
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--rilt-ink);
}

.disclosure__date {
	font-size: 0.8125rem;
	color: var(--rilt-muted);
}

.disclosure__download {
	display: inline-flex;
	align-items: center;
	/* WCAG 2.2 AA asks for a 24px minimum target. These measured 23px tall at
	   every width: uppercase 12px text on a 1.5 line box comes to one pixel
	   short, on every download link on seven pages and on "View role" on
	   Careers. The exemption for links inside a sentence does not apply -
	   each of these is a standalone block link. */
	min-height: 1.5rem;
	gap: 0.4rem;
	font-family: var(--rilt-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* An exchange-hosted filing is linked under its own label, which can be a
   whole sentence: it keeps production's sentence case and is allowed to wrap,
   where "DOWNLOAD PDF (418 KB)" is short enough not to. Without this the
   Smart ODR row ran 21px past the viewport at 390. */
.disclosure__download:not(:has(.disclosure__size)) {
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;
	overflow-wrap: anywhere;
}

.disclosure__size {
	color: var(--rilt-muted);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

/* Pagination, notices ---------------------------------------------------- */

.pagination {
	margin-block-start: 2.5rem;
}

.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.5rem;
	border: 1px solid var(--rilt-border);
	border-radius: var(--rilt-radius);
	color: var(--rilt-navy);
	font-family: var(--rilt-font-heading);
	font-size: 0.875rem;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background: var(--rilt-accent);
	border-color: var(--rilt-accent);
	color: #fff;
	text-decoration: none;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.notice {
	padding: 1rem 1.25rem;
	background: var(--rilt-surface-alt);
	border-inline-start: 3px solid var(--rilt-accent);
	border-radius: var(--rilt-radius);
}

/* Page body -------------------------------------------------------------- */

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

/* Footer -----------------------------------------------------------------
   Production's footer is a single 47px band plus a 1px empty strip below it -
   measured on its live page at 1440, scrolled to the bottom. The band is
   #152644 and runs the full viewport width; its three columns sit on a
   1199px grid centred in the viewport (x120.5, 399.67 each), NOT on the
   1170px content grid the rest of the page uses.

   Every value here is production's own, taken from
   wp-content/uploads/elementor/css/post-20.css (the footer template) and
   consultio/assets/css/theme.css, and confirmed against the live page. */

.site-footer {
	/* The navy is on the band, not the footer: production's last 1px shows
	   the page background through. */
	background: transparent;
	color: rgba(255, 255, 255, 0.82);
	font-family: "Poppins", var(--rilt-font-body);
	font-size: 16px;
	line-height: 30px;
}

.site-footer__band {
	/* post-20.css: .elementor-element-a989515 { background-color:#152644 } */
	background: #152644;
}

.site-footer__row {
	/* post-20.css: > .elementor-container { max-width: 1199px } */
	display: flex;
	align-items: center;
	max-width: 1199px;
	margin: 0 auto;
}

.site-footer__col {
	/* Three elementor-col-33 columns, gap none. */
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
	text-align: center;
}

.site-footer p {
	margin: 0;
}

/* CIN: its widget container carries margin 1em 0, which is 16px against the
   16px block the footer sets - 16 + 13 + 16 = 45. */
.site-footer__cin-wrap {
	margin: 16px 0;
}

.site-footer__cin {
	font-family: "Roboto", var(--rilt-font-body);
	font-size: 13px;
	line-height: 13px;
	font-weight: 600;
	color: rgb(126, 182, 27);
}

/* Social: production's .ct-icon1.style2, verbatim. Its widget container
   carries margin-top 10px, and the icon's own 29px box plus its 8px bottom
   margin is what makes the band 47px tall. */
.site-footer__social-wrap {
	margin-top: 10px;
}

.ct-icon1 {
	margin: 0;
	list-style: none;
}

.ct-icon1 a {
	display: inline-block;
	/* theme.css gives every anchor `transition: all 300ms linear 0ms`, which
	   is what times the hover lift below. */
	transition: all 300ms linear 0ms;
}

.ct-icon1 a i {
	height: 29px;
	width: 29px;
	line-height: 29px;
	display: inline-block;
	border-radius: 29px;
	font-size: 17px;
	color: #05afec;
	background-color: #fff;
	text-align: center;
	margin-right: 4px;
	margin-bottom: 8px;
}

.ct-icon1 a:hover {
	transform: translateY(-4px);
}

.ct-icon1.style2 {
	margin-left: -10px;
}

.ct-icon1.style2 a i {
	background-color: transparent;
}

/* post-20.css: .elementor-element-221fe88 .ct-icon1 a i { color:#FFFFFF } -
   it beats theme.css's per-network colours, so all three render white. */
.site-footer .ct-icon1 a i {
	color: #fff;
}

/* Production's second footer section is four empty columns of 1px. Side by
   side they are 1px tall; below 768 they stack, and production's footer
   measures 97 against a 93px band there, so the strip is 4px. */
.site-footer__tail {
	height: 1px;
}

@media (max-width: 767px) {
	.site-footer__tail {
		height: 4px;
	}
}

/* post-20.css, tablet: each column takes a 32px top margin and half the
   row, so the three wrap 2 + 1. */
@media (max-width: 1024px) {
	.site-footer__row {
		flex-wrap: wrap;
	}

	.site-footer__col {
		flex-basis: 50%;
		max-width: 50%;
		margin-top: 32px;
	}
}

/* post-20.css, phone: full-width columns, 10 / 5 / 0 top margins, and every
   widget container's own margin reset to 0. */
@media (max-width: 767px) {
	.site-footer__col {
		flex-basis: 100%;
		max-width: 100%;
	}

	.site-footer__col--cin {
		margin-top: 10px;
	}

	.site-footer__col--copy {
		margin-top: 5px;
	}

	.site-footer__col--social {
		margin-top: 0;
	}

	.site-footer__cin-wrap,
	.site-footer__social-wrap {
		margin: 0;
	}
}

/* Back to top ------------------------------------------------------------
   Production ships `<a class="scroll-top"><i class="zmdi zmdi-long-arrow-up">`
   immediately after its footer, and DOES show it: consultio's main.js adds
   `.on` as soon as the page has scrolled further than one viewport height.
   An earlier round here concluded it was never visible and deleted it; that
   reading came from an unscrolled probe. Measured on production at 1440 at
   the foot of the home page: 50x50 at x1360, bottom 44px / right 30px,
   opacity 1. The rules below are theme.css's own. */

.scroll-top {
	position: fixed;
	z-index: 99;
	bottom: 24px;
	right: 30px;
	height: 50px;
	width: 50px;
	line-height: 50px;
	text-align: center;
	background-image: linear-gradient(-190deg, #05afec, #94ca36);
	border-radius: 50px;
	color: #fff;
	font-size: 22px;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
}

.scroll-top:hover,
.scroll-top:focus,
.scroll-top:active {
	color: #fff;
}

.scroll-top.on {
	bottom: 44px;
	opacity: 1;
	visibility: visible;
}

.scroll-top:hover i {
	animation: toTopFromBottom 0.3s forwards;
}

@media screen and (max-width: 767px) {
	.scroll-top {
		bottom: 0;
		right: 0;
	}

	.scroll-top.on {
		bottom: 0;
		right: 0;
		border-radius: 2px 0 0;
		height: 35px;
		width: 35px;
		line-height: 35px;
		font-size: 16px;
	}
}

@keyframes toTopFromBottom {
	49% {
		transform: translateY(-100%);
	}

	50% {
		opacity: 0;
		transform: translateY(100%);
	}

	51% {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scroll-top:hover i {
		animation: none;
	}
}

.footer-nav__list a {
	color: rgba(255, 255, 255, 0.82);
}

.footer-nav__list a:hover,
.footer-nav__list a:focus-visible {
	color: #fff;
}

/* Back to top ------------------------------------------------------------ */

.to-top {
	position: fixed;
	inset-block-end: 1.5rem;
	inset-inline-end: 1.5rem;
	z-index: 60;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--rilt-accent);
	color: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: var(--rilt-shadow);
	cursor: pointer;
}

.to-top:hover,
.to-top:focus-visible {
	background: var(--rilt-navy);
}

/* Testimonials ----------------------------------------------------------- */

.section--testimonials {
	background: var(--rilt-surface-alt);
}

/* Production shows a few quotes at a time in a carousel. A scroll-snapping
   strip gives the same shape and the same section height without a
   JavaScript carousel library. */
.quote-row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(17rem, 1fr);
	gap: var(--rilt-gap);
	margin: 2.5rem 0 0;
	padding: 0 0 1rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.quote-row > .quote {
	scroll-snap-align: start;
}

@media (max-width: 47.99rem) {
	.quote-row {
		grid-auto-columns: 100%;
	}
}

@media (min-width: 62rem) {
	/* Two to a view, which is what production's testimonial carousel
	   declares: `data-collg="2" data-slidesToScroll="2"`. Three to a view
	   gave the strip three pages of dots where production has four. */
	.quote-row {
		grid-auto-columns: calc((100% - var(--rilt-gap)) / 2);
	}
}

.quote {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.75rem 1.5rem 1.5rem;
	background: #fff;
	/* Production's `.item--description` is a 2px radius under a wide, soft,
	   un-offset halo - `rgba(148, 147, 147, 0.14) 0px 0px 27px 0px`. Staging
	   drew the theme's own 6px card with a dropped `0 2px 14px rgba(0,0,0,.08)`.
	   The shared tokens are left alone; other cards still use them. */
	border-radius: 2px;
	box-shadow: 0 0 27px 0 rgba(148, 147, 147, 0.14);
}

.quote__body {
	margin: 0;
	position: relative;
	padding-block-start: 1.25rem;
}

.quote__body::before {
	content: "\201C";
	position: absolute;
	inset-block-start: -0.75rem;
	inset-inline-start: -0.25rem;
	font-family: var(--rilt-font-heading);
	font-size: 3rem;
	line-height: 1;
	color: var(--rilt-accent);
	opacity: 0.35;
}

.quote__body p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.75;
}

.quote__source {
	margin: auto 0 0;
	display: grid;
}

.quote__name {
	font-family: var(--rilt-font-heading);
	font-weight: 700;
	color: var(--rilt-navy);
}

.quote__role {
	font-size: 0.8125rem;
	color: var(--rilt-muted);
}

/* Reveal on scroll ------------------------------------------------------- */

/* Production fades sections and cards in as they enter the viewport. The
   starting state is only applied once the script confirms it can animate, so
   content stays visible when scripting or motion is unavailable. */

.js-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	will-change: opacity, transform;
}

.js-reveal [data-reveal="fade"] {
	transform: none;
}

.js-reveal [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

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

/* Carousel dots ---------------------------------------------------------- */

.dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

/* The dot you see is 10px, but the thing you press is 24px square, which is
   the smallest target WCAG 2.2 accepts for a control that is not inline text.
   At 10px these were a third of the required area. */
.dots__button {
	display: grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.dots__button::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--rilt-border);
	transition: background-color 0.2s ease, width 0.2s ease;
}

.dots__button[aria-current="true"]::before {
	width: 24px;
	border-radius: 5px;
	background: var(--rilt-accent);
}

/* Board of directors ----------------------------------------------------- */

/* Production files the lead and the four biographies in ONE three-column
   grid: the lead in the first cell, directors one and two beside it, and
   directors three and four in the row below, leaving the first cell of that
   row empty. Measured on its served page at 1440 on 3 November 2026 - lead
   column x135 w350 (its heading box w304), cards x535 w370 and x935 w370 on
   the first row, x532 w377 and x928 w377 on the second. The two rows really
   do disagree by three pixels: production builds them as two Elementor
   sections, one with the "extended" column gap and one with the default, and
   the card widths follow. The text wraps against those widths, so the
   disagreement is reproduced rather than tidied away. */

.board-intro {
	margin: 0;
}

/* The kicker above the lead: 16px/600 on a 30px line, with production's
   50x3 gradient rule to its left. */
.board-kicker {
	position: relative;
	margin: 0;
	padding-left: 75px;
	font-family: var(--rilt-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 30px;
	color: #0e0e0e;
}

.board-kicker::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 0;
	width: 50px;
	height: 3px;
	background: linear-gradient(90deg, #05afec, #94ca36);
}

.board-lead {
	max-width: 46ch;
	margin-block: 0 2.5rem;
	font-family: var(--rilt-font-heading);
	font-weight: 600;
	color: #0e0e0e;
}

.board-grid {
	display: grid;
	gap: var(--rilt-gap, 1.5rem);
	grid-template-columns: 1fr;
}

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

@media (min-width: 62rem) {
	.board-grid {
		/* 350 + 50 + 370 + 30 + 370 = the 1170 content column. The two
		   narrow tracks are production's own unequal gutters. */
		grid-template-columns: 350px 50px 370px 30px 370px;
		column-gap: 0;
		row-gap: 25px;
	}

	.board-lead {
		max-width: none;
		margin-block: 0;
	}

	.board-intro {
		grid-column: 1;
		grid-row: 1;
		/* Production's heading box is 304 inside its 350 column, and that
		   is what makes the lead wrap to five lines. */
		width: 304px;
	}

	.director:nth-child(2) {
		grid-column: 3;
		grid-row: 1;
	}

	.director:nth-child(3) {
		grid-column: 5;
		grid-row: 1;
	}

	.director:nth-child(4) {
		grid-column: 3;
		grid-row: 2;
		margin-left: -3px;
		margin-right: -4px;
	}

	.director:nth-child(5) {
		grid-column: 5;
		grid-row: 2;
		margin-left: -7px;
	}
}

.director {
	/* No card chrome: production's director block computes border 0, a
	   transparent background, 0 radius and 0 padding, measured by walking up
	   from each director heading at 1440. */
	display: flex;
	gap: 0;
	align-items: flex-start;
}

/* The disc beside each name. Production's is EMPTY - a 63px gradient circle
   carrying no initials, no glyph and no photograph; there are no director
   photographs on either site. Its gradient runs left to right, and it clears
   the text by 38px. */
.director__avatar {
	flex: 0 0 63px;
	width: 63px;
	height: 63px;
	margin: 0 38px 0 0;
	border-radius: 63px;
	background: linear-gradient(90deg, #05afec, #94ca36);
}

.director__body {
	flex: 1 1 auto;
	min-width: 0;
}

.director__body > :last-child {
	margin-block-end: 0;
}

.director__name {
	/* Production: 24px at weight 600, near-black, on a 28.8px line, with 4px
	   above it and 7px below. */
	margin: 4px 0 7px;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	color: #0e0e0e;
}

/* Committees ------------------------------------------------------------- */

/* Production puts the three committee headings in one row and the three
   rosters in the row below, so every roster starts on the same line however
   many lines its heading takes: headings at 2060, lists at 2128 on all three
   columns at 1440. The columns sit on the 1190 Elementor grid - x135, x532,
   x928, each 377 wide - not on the 1170 content column. */

.committees {
	display: grid;
	gap: var(--rilt-gap, 1.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.committees {
		/* Three across, the way production lays this row out. */
		grid-template-columns: repeat(3, 1fr);
	}
}

.committee {
	/* Production's committee block has no panel behind it either: its
	   "AUDIT COMMITTEE:" heading sits on a transparent background with no
	   radius. */
	padding: 0;
}

.committee__name {
	/* Production writes these in capitals with a colon in its own markup, so
	   the transform is gone: "AUDIT COMMITTEE:". */
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	letter-spacing: 0.03em;
	color: var(--rilt-navy);
}

.committee__members {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Production's roster rows are 30px tall, carry no rule between them and
   open with a `fas fa-users` glyph. The rules this theme drew - 8px of
   padding and a 1px rgba rule on every row but the first - are not on
   production's page at either width. */
.committee__members li {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	height: 30px;
	padding: 0;
	border: 0;
}

.committee__members li i {
	flex: 0 0 18px;
	font-size: 14px;
	line-height: 14px;
	color: rgb(110, 193, 228);
}

/* Production's own 5px between the glyph box and the name. */
.committee__member {
	padding-left: 5px;
}

.committee__role {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rilt-accent-dark);
}

/* The headings and the rosters are two rows of their own, so the three
   rosters align whether the heading above them took one line or two. */
@media (min-width: 62rem) {
	.committees {
		width: calc(100% + 20px);
		margin-inline: -10px;
		gap: 0;
	}

	.committee {
		display: grid;
		grid-template-rows: 48px auto;
		row-gap: 20px;
		align-content: start;
		padding-inline: 10px;
	}

	.committee__name {
		margin-bottom: 0;
	}
}


/* The page's own vertical rhythm ------------------------------------------ */

/* Production has no section padding on this page: the content area opens at
   514 and the kicker sits at 563, the board grid ends at 1971 and the
   committee headings start at 2060, the divider section opens at 2228 and
   the contact boxes at 2337, and the last box clears the footer by 61px -
   set to 59 below, because the two grid rows above round up by 2px between
   them and 59 is what lands the footer on production's own 2612 and the
   document on its 2660.
   The generic 88px above and below every `.section`, plus another 88 on
   `.page-body`, put every one of those 127px or more too low. */
@media (min-width: 62rem) {
	.rilt-page-board-of-directors .page-body {
		padding-block: 0;
	}

	.rilt-page-board-of-directors .section--board {
		padding-block: 49px 10px;
	}

	.rilt-page-board-of-directors .committees {
		margin-block-start: 90px;
	}

	.rilt-page-board-of-directors .section--contacts {
		padding-block-end: 59px;
	}
}

/* Job roles -------------------------------------------------------------- */

/* Production opens a job page with a card carrying the role name on a dark
   plate, the apply button and the three share buttons. Staging had a plain
   heading and a text link, which is the whole of the height difference on
   these three pages. */
.job-hero {
	margin-block-end: 2.5rem;
	padding: 2rem 1.75rem;
	background: var(--rilt-surface-alt);
	border-radius: var(--rilt-radius-lg);
}

.job-hero__eyebrow {
	margin: 0 0 0.75rem;
	font-family: var(--rilt-font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rilt-accent-dark);
}

.job-hero__plate {
	display: inline-block;
	margin: 0 0 1.5rem;
	padding: 0.625rem 1.25rem;
	background: var(--rilt-navy);
	color: #fff;
	/* Production: 24px at weight 700 on a 28.8px line. */
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.job-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
}

.job-share {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 40px square: a share button is not inline text, so it has to clear the
   24px minimum target with room to spare. */
.job-share__link {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	color: var(--rilt-navy);
	border: 1px solid var(--rilt-border);
}

.job-share__link:hover,
.job-share__link:focus-visible {
	background: var(--rilt-navy);
	color: #fff;
}

/* The skill lists use production's blue check glyph rather than a disc. */
.prose--job ul {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.prose--job ul li {
	position: relative;
	padding-inline-start: 1.75rem;
	margin-block-end: 0.5rem;
}

.prose--job ul li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.3em;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--rilt-accent), var(--rilt-green));
	/* Same tick punched out of a disc as the service pages use, so the two
	   lists carry the same mark. */
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m-1.3 14.3-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m-1.3 14.3-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Production's section headings here are light blue, not navy. */
.prose--job h2 {
	color: var(--rilt-accent-dark);
	font-size: 1.25rem;
}

/* Company profile -------------------------------------------------------- */

/* Production sets the intro copy beside a portrait photograph; staging had
   collapsed it into one column, leaving the right half of the page empty. */
.about-split {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: 1fr;
	align-items: start;
	margin-block-end: 3rem;
}

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

.about-figure {
	position: relative;
	margin: 0;
}

.about-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--rilt-radius-lg);
}

/* Production lays this over the photograph as text rather than shipping a
   ribbon graphic, so it is text here too. */
.about-figure__ribbon {
	position: absolute;
	inset-block-end: 1.25rem;
	inset-inline-start: 0;
	padding: 0.75rem 1.5rem;
	background: linear-gradient(90deg, var(--rilt-accent), var(--rilt-green));
	color: #fff;
	font-family: var(--rilt-font-heading);
	font-size: 1rem;
	font-weight: 700;
	border-start-end-radius: var(--rilt-radius);
	border-end-end-radius: var(--rilt-radius);
}

.eyebrow {
	/* Production's kicker is `div.item--sub-title style1 show-line`: 16px,
	   weight 400, no transform, near-black (#0e0e0e) on a 30px line, 9px of
	   space under it. Staging shouted it in 13px bold blue, so "Career" read
	   as "CAREER".

	   `show-line` reveals a 50x3 gradient bar at the left (theme.css:15340,
	   opacity flipped to 1 at :15527), and the kicker clears it with 75px of
	   left padding. */
	position: relative;
	display: inline-block;
	margin: 0 0 9px;
	padding-inline-start: 75px;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.875;
	letter-spacing: normal;
	text-transform: none;
	color: #0e0e0e;
}

/* Production's own declaration list ends with `linear-gradient(left, ...)`,
   which is invalid in the modern grammar and is dropped; what actually paints
   on production is its `-webkit-linear-gradient(left, ...)` variant. The valid
   modern `to right` below renders that same left-to-right cyan-to-lime bar in
   every engine. */
.eyebrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(0, -50%);
	width: 50px;
	height: 3px;
	background-image: linear-gradient(to right, #05afec, #94ca36);
	box-shadow: 0 7px 16px rgba(12, 12, 12, 0.22);
}

.lede {
	/* Production: 20px at weight 400 in rgb(56,56,56) on a 37.5px line. */
	margin-block: 0 1.5rem;
	font-family: var(--rilt-font-heading);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.875;
	color: rgb(56, 56, 56);
}

/* A panel of prose, not the service pages' figure-and-text pair. */
.tabs__panel--text {
	display: block;
	padding-block-start: 1.75rem;
}

.tabs__panel--text h3 {
	margin-block: 0 0.5rem;
	color: var(--rilt-navy);
}

.value-cards {
	display: grid;
	gap: var(--rilt-gap, 1.5rem);
	grid-template-columns: 1fr;
	margin-block: 2rem 3rem;
}

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

/* Three across from 992, which is where production's own grid moves. */
@media (min-width: 62rem) {
	.value-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

.value-card {
	/* Production's card: 1px solid rgb(235,239,252) on rgb(249,251,253) with
	   square corners, measured by walking up from its VALUE heading. */
	padding: 2rem 1.75rem;
	background: rgb(249, 251, 253);
	border: 1px solid rgb(235, 239, 252);
	border-radius: 0;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.value-card:hover {
	box-shadow: var(--rilt-shadow-lift);
	transform: translateY(-3px);
}

.value-card__icon {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 0 1.25rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--rilt-accent), var(--rilt-green));
	color: #fff;
	font-size: 1.5rem;
}

.value-card__title {
	margin: 0 0 0.75rem;
	font-size: 1.0625rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--rilt-navy);
}

.value-card > p:last-child {
	margin-block-end: 0;
}

/* Blog layout and sidebar ------------------------------------------------ */

.blog-layout {
	/* Production's gutter here is 30px, the same as its grids elsewhere. */
	display: grid;
	gap: 30px;
	grid-template-columns: 1fr;
	align-items: start;
}

/* Production puts the sidebar beside the listing from the large breakpoint
   and stacks it underneath below that. */
@media (min-width: 62rem) {
	/* Production's sidebar is on the LEFT, not the right. `#primary` carries
	   `float-right col-xl-9` and `#secondary` `col-xl-3`, so measured at 1440
	   inside the 1170 painted row at x135: widgets 135..405 (270 wide), then
	   85px of air, then the listing 490..1305 (815 wide). Staging had the
	   listing at 135..951 and a 324-wide sidebar at 981, which put every
	   photograph 355px to the left of production's and made the sidebar 54px
	   too wide. The photographs stay 393 because 815 less a 30px gutter
	   halves to 392.5. */
	.blog-layout {
		grid-template-columns: 270px minmax(0, 815px);
		column-gap: 85px;
	}

	.blog-sidebar {
		order: -1;
	}
}

.blog-main {
	min-width: 0;
}

.blog-sidebar {
	display: grid;
	gap: var(--rilt-gap, 1.5rem);
	min-width: 0;
}

.widget {
	padding: 1.5rem 1.25rem;
	background: var(--rilt-surface-alt);
	border-radius: var(--rilt-radius-lg);
}

.widget__title {
	margin: 0 0 1rem;
	font-size: 1rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--rilt-navy);
}

.widget__text {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	color: var(--rilt-muted);
}

.widget .search-form {
	display: grid;
	gap: 0.5rem;
}

.widget-list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.widget-list li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem;
	padding-block: 0.5rem;
	border-block-start: 1px solid rgba(13, 34, 82, 0.1);
}

.widget-list li:first-child {
	border-block-start: 0;
}

.widget-list__count {
	color: var(--rilt-muted);
	font-size: 0.8125rem;
}

.recent-posts {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.recent-post {
	/* Production's sidebar thumbnail is 65x65. */
	display: grid;
	grid-template-columns: 65px 1fr;
	gap: 0.875rem;
	align-items: start;
}

/* A post with no featured image should not leave a hole in the grid. */
.recent-post:not(:has(.recent-post__media)) {
	grid-template-columns: 1fr;
}

.recent-post__media img {
	display: block;
	width: 65px;
	height: 65px;
	object-fit: cover;
	border-radius: var(--rilt-radius);
}

.recent-post__title {
	display: block;
	font-family: var(--rilt-font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--rilt-navy);
}

.recent-post__title:hover,
.recent-post__title:focus-visible {
	color: var(--rilt-accent-dark);
}

.recent-post__date {
	display: block;
	margin-block-start: 0.25rem;
	font-size: 0.75rem;
	color: var(--rilt-muted);
}

/* Contact ---------------------------------------------------------------- */

.contact-intro {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: 1fr;
	align-items: center;
	margin-block-end: 3rem;
}

@media (min-width: 62rem) {
	.contact-intro {
		grid-template-columns: 1fr 1fr;
	}
}

.contact-intro__figure {
	margin: 0;
}

.contact-intro__figure img {
	display: block;
	width: 100%;
	height: auto;
}

/* Production lays the offices two to a row; staging had stacked them in one
   column, leaving the right half of the page empty. */
.office-grid {
	display: grid;
	gap: var(--rilt-gap, 1.5rem);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.office {
	display: grid;
	/* The icon sits in its own column and spans however many lines the
	   office needs; everything else stacks in the second column. */
	grid-template-columns: 3rem 1fr;
	gap: 0.25rem 1rem;
	align-content: start;
	/* Production's office blocks are plain text on the section, with no card
	   chrome at all: no ancestor within eight levels of each heading carries
	   a border, background, shadow or radius. Staging drew each one in a
	   bordered, rounded white card. */
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.office__icon {
	grid-column: 1;
	grid-row: 1 / -1;
	margin: 0;
	font-size: 1.75rem;
	line-height: 1;
	/* The icon font is monochrome, so the gradient is painted through it. */
	background: linear-gradient(135deg, var(--rilt-accent), var(--rilt-green));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.office > *:not(.office__icon) {
	grid-column: 2;
	/* A grid item keeps its intrinsic minimum unless this is cleared, and
	   `response@responseinformaticsltd.com` has nowhere to break: at 390 it
	   pushed each box two pixels past the viewport. */
	min-width: 0;
	overflow-wrap: anywhere;
}

.office__name {
	/* Production: 24px at weight 600, black, on a 28.8px line, in its body
	   face rather than the heading one. */
	margin: 0;
	font-family: var(--rilt-font-body);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	color: #000;
}

.office__company,
.office__address {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--rilt-ink);
}

.office__phone {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--rilt-muted);
}

.section--map {
	padding-block: 0;
}

.office-map {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
}

/* Rotating hero ---------------------------------------------------------- */

/* The slides stack on one grid cell, so the container is as tall as the
   tallest of them and nothing jumps as they change. */
.hero__slides {
	display: grid;
}

.hero__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}

.hero__slide.is-current {
	opacity: 1;
	visibility: visible;
}

/* Production renders both lines at a fixed size at every width: 50px above
   18px. The heading is clamped down on narrow screens, where 50px of a
   seventy-character sentence fills a phone. */
.hero__title {
	max-width: 24ch;
	margin-inline: auto;
	margin-block: 0 1rem;
	font-size: clamp(1.75rem, 1rem + 3.2vw, 3.125rem);
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hero__tagline {
	max-width: 52ch;
	margin-inline: auto;
	margin-block: 0;
	font-size: 1.125rem;
	font-weight: 500;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

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

/* Client logo above a testimonial ---------------------------------------- */

.quote__logo {
	margin: 0 0 1rem;
}

.quote__logo img {
	/* Production draws a client logo as a 77px circle at full opacity, in a
	   carousel under "We Propel Your Growth Through Partnership" - measured
	   on its own home page: 77x77, border-radius 100px, opacity 1. Staging
	   drew a 48px square. */
	display: block;
	width: 77px;
	height: 77px;
	border-radius: 100px;
	object-fit: cover;
}

/* Careers intro ---------------------------------------------------------- */

/* Production sets the heading beside the paragraph rather than above it;
   measured at 1440 the heading occupies the left half and the paragraph the
   right. Shares the About page's proportions. */
.intro-split {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: 1fr;
	align-items: start;
	margin-block-end: 2.5rem;
}

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

/* 36px in near-black, which is what production computes here. The theme's
   own section heading is 22px in navy. */
.careers-heading {
	margin: 0;
	font-size: clamp(1.625rem, 1rem + 2vw, 2.25rem);
	font-weight: 700;
	line-height: 1.25;
	color: #0e0e0e;
}

.intro-split__body > p:last-child {
	margin-block-end: 0;
}

/* Card strips ------------------------------------------------------------ */

/* Production runs Our Services and Our Latest Blogs as carousels. This is
   the same behaviour without the plugin: the cards scroll sideways and snap,
   and initDots() in main.js gives the strip a row of dots so every card is
   reachable. Three to a view above 992, two from 576, one below - which is
   how production's own slider steps down. */
.card-strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: var(--rilt-gap);
	margin: 0;
	padding: 0 0 1rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.card-strip > * {
	scroll-snap-align: start;
	/* A card keeps its own intrinsic minimum unless this is cleared, which
	   would widen the track and break the one-card-per-view arithmetic. */
	min-width: 0;
}

@media (min-width: 36rem) {
	.card-strip {
		grid-auto-columns: calc((100% - var(--rilt-gap)) / 2);
	}
}

@media (min-width: 62rem) {
	.card-strip {
		grid-auto-columns: calc((100% - (2 * var(--rilt-gap))) / 3);
	}
}

/* Blocks production ships twice and hides one of per width ----------------
   Its board committee rows differ between the two copies - the desktop one
   chairs Stakeholders with Mr. P. Chandra Sekhar and the phone one with
   Mr. K. Prakash Babu - so each width renders production's own copy. */

.is-phone-only {
	display: none;
}

@media (max-width: 47.99rem) {
	.is-desktop-only {
		display: none;
	}

	.is-phone-only {
		display: grid;
	}
}

/* Code of conduct, as production bands it ---------------------------------
   Production prints this heading as literal capitals at 54px/700 in white,
   over theme23.jpg covering the section. Staging had it as a 32px navy
   heading on white. */

.code-band {
	position: relative;
	padding: 4rem clamp(1rem, 4vw, 3rem);
	background-image: var(--band-image);
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	color: #fff;
	isolation: isolate;
}

.code-band::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(2, 16, 43, 0.72);
}

.code-band__title {
	margin: 0 0 1.5rem;
	font-size: 3.375rem;
	font-weight: 700;
	line-height: 1.055;
	color: #fff;
}

.code-band p,
.code-band li {
	color: rgba(255, 255, 255, 0.92);
}

/* Production's own type, page by page ------------------------------------
   Each value here was read off production at 1440 and the staging value it
   replaced is named in the comment. */

/* Value cards on /about-company/: 20px/700 near-black, sentence case, 24px
   line. Staging had 17px navy uppercased. */
.value-card__title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	color: #0e0e0e;
}

/* Blog sidebar widget titles: 20px/600 near-black, sentence case. Staging had
   16px/700 navy uppercased. */
.widget__title {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	color: #0e0e0e;
}

/* "Contact us for more Info": 37px/700 near-black on a 58px line. */
.rilt-page-contact-us .section-heading {
	font-size: 2.3125rem;
	line-height: 1.568;
	color: #0e0e0e;
}

/* The experience band heading on the home page: 28px/700 white on a 33.6px
   line, against staging's 32px/42.56px. */
.section--experience .section-heading {
	font-size: 1.75rem;
	line-height: 1.2;
}

/* "Job Specification:" on a career page: 29px/600 in rgb(110,193,228) on a
   29px line, in Roboto rather than Poppins. */
.prose--job h2 {
	font-family: var(--rilt-font-body);
	font-size: 1.8125rem;
	font-weight: 600;
	line-height: 1;
	color: rgb(110, 193, 228);
}

/* The job title above the card, as production prints it: 36px/700 near-black
   on a 48px line. Its plate inside the card keeps 24px/700 white. */
.job-hero__lead {
	/* 36px/700 near-black on a 48px line, above the card. */
	margin: 0 0 1rem;
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.3333;
	color: #0e0e0e;
}

/* The plate inside the card stays production's 24px/700 white on 28.8px. */
.job-hero .job-hero__plate {
	font-size: 1.5rem;
	line-height: 1.2;
	color: #fff;
}

/* Production's type, measured context by context ------------------------
   Each rule carries the production value and the staging value it replaced.
   Production sets these per section rather than globally, which is why the
   body default is left alone. */

/* /about-company/ body copy: 17px on a 26px line in rgb(97,97,97). The page
   is built from `about-split`, not a `prose` wrapper. Its opening paragraph
   is larger on production - 18px on a 34px line in rgb(56,56,56) - so the
   first one is set separately. */
.about-split__text p,
.rilt-page-about-company .about-split p {
	font-size: 1.0625rem;
	line-height: 1.5294;
	color: rgb(97, 97, 97);
}

/* Production's first two unclassed paragraphs here are the larger ones, and
   they differ from each other: 20px on a 37.5px line, then 18px on a 34px
   line, both in rgb(56,56,56). The eyebrow and lede above them carry their
   own classes, so the count starts after those. */
/* Production's three unclassed paragraphs here are 18px on a 34px line. */
.about-split__text > p.lede ~ p:nth-of-type(3),
.about-split__text > p.lede ~ p:nth-of-type(4),
.about-split__text > p.lede ~ p:nth-of-type(5) {
	font-size: 1.125rem;
	line-height: 1.8889;
	color: rgb(56, 56, 56);
}

/* The lede above them is 20px on a 37.5px line in rgb(56,56,56). `.lede`
   alone lost to `.about-split__text p`, which is a class plus an element, so
   this one carries the same weight. */
.about-split__text > p.lede {
	font-size: 1.25rem;
	line-height: 1.875;
	color: rgb(56, 56, 56);
}

/* Director bios: 16px in rgb(56,56,56). */
.director__body p {
	font-size: 1rem;
	color: rgb(56, 56, 56);
}

/* Committee rows: 16px in rgb(84,89,95) on a 30px line. */
.committee__member {
	font-size: 1rem;
	line-height: 1.875;
	color: rgb(84, 89, 95);
}

/* Office address lines: 16px in rgb(0,0,1) on a 26px line. */
.office__company,
.office__address,
.office__line {
	font-size: 1rem;
	line-height: 1.625;
	color: rgb(0, 0, 1);
}

/* The value cards' body copy: 16px in black on a 30px line. */
.value-card p,
.value-card__text {
	font-size: 1rem;
	line-height: 1.875;
	color: #000;
}

/* The banded code-of-conduct list: 15px white on a 30px line. */
.code-band li,
.code-band p {
	font-size: 0.9375rem;
	line-height: 2;
	color: #fff;
}

/* Section ledes beside a heading: 20px in rgb(21,38,68) on a 37.5px line. */
.highlight__title {
	font-size: 1.25rem;
	line-height: 1.875;
	color: rgb(21, 38, 68);
}

/* Footer type, as production sets it -------------------------------------
   Its copyright line is Lato 14px on a 28px line, which is the only place
   either site uses that face; its CIN value is 600 weight white on a 13px
   line; its menu links are Roboto 400 on a 30px line, not the heading face
   the header navigation uses. */

.site-footer__copyright {
	font-family: "Lato", var(--rilt-font-body);
	font-size: 0.875rem;
	line-height: 2;
	color: var(--rilt-accent);
}

.site-footer__cin-value {
	font-weight: 600;
	line-height: 0.8125;
	color: #fff;
}

.footer-nav__list a {
	font-family: var(--rilt-font-body);
	font-weight: 400;
	line-height: 1.875;
	color: rgba(255, 255, 255, 0.82);
}

/* Disclosure row titles: production is 16px on a 30px line. Staging's 15px on
   a 19.95px line was the single largest type difference left, on every one of
   the six disclosure pages. */
.disclosure__title,
.disclosure__title a {
	font-size: 1rem;
	line-height: 1.875;
}

/* The CIN value sits on a 13px line on production. */
.site-footer__cin-value {
	line-height: 13px;
}

/* The banded list keeps its 30px line even against the check-list rule. */
.code-band .check-list li,
.code-band ul li {
	font-size: 0.9375rem;
	line-height: 2;
	color: #fff;
}

/* Director bios run on a 26px line. */
.director__body p {
	line-height: 1.625;
}

/* Home prose paragraphs: 17px on a 26px line in rgb(97,97,97). */
.section--services .prose p,
.rilt-page-home .prose p,
.is-front .prose p {
	font-size: 1.0625rem;
	line-height: 1.5294;
	color: rgb(97, 97, 97);
}

/* A section lede: production sets these at 16px on a 16px line in
   rgb(84,89,95), and white only where the band behind it is dark. */
.section-lede {
	font-size: 1rem;
	line-height: 1;
	color: rgb(84, 89, 95);
}

/* The experience band's lede is production's smaller one: 15px on a 26px
   line, in white. */
.section--experience .section-lede {
	font-size: 0.9375rem;
	line-height: 1.7333;
	color: #fff;
}

/* The call-to-action band's line: white on a 16px line. */
.cta__text {
	line-height: 1;
	color: #fff;
}

/* The contact page's opening paragraph: 18px black on a 34px line. */
.contact-intro__text > p:first-of-type {
	font-size: 1.125rem;
	line-height: 1.8889;
	color: #000;
}

/* Breadcrumbs: production draws them at 16px white on a 30px line, where
   staging had 14px at 78% opacity. */
.breadcrumbs,
.breadcrumbs a,
.breadcrumbs span {
	font-size: 1rem;
	line-height: 1.875;
	color: #fff;
}

/* Career pages, measured against production -----------------------------
   Its careers lede is 18px near-black on a 34px line; its job body copy is
   near-black; its "Apply Now" is 15px on a 61px line; and the line about
   sending a resume sits on a 16px line in black. */

.rilt-page-careers .section p:nth-of-type(1),
.rilt-page-careers .prose p:nth-of-type(1) {
	font-size: 1.125rem;
	line-height: 1.8889;
	color: #0e0e0e;
}

.prose--job p {
	color: #0e0e0e;
}

/* Production keeps the labelled lines inside those paragraphs at
   rgb(56,56,56). */
.prose--job p strong {
	color: rgb(56, 56, 56);
}

.prose--job p:last-of-type {
	line-height: 1;
	color: #000;
}

.job-hero__actions .btn--primary {
	font-size: 0.9375rem;
	line-height: 61px;
}

/* Blog sidebar and listing, measured against production -----------------
   Its category links are 500 weight in rgb(34,34,34) on a 24px line; its
   author byline is 14px in rgb(147,147,147) in the heading face; its recent
   post titles are 16px/600 near-black on a 26px line; and its Subscribe
   heading is 22px white on a 26.4px line. */

.widget-list a {
	font-weight: 500;
	line-height: 24px;
	color: rgb(34, 34, 34);
}

.post-meta__author {
	font-family: var(--rilt-font-heading);
	font-size: 0.875rem;
	line-height: 24px;
	color: rgb(147, 147, 147);
}

.recent-post__title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.625;
	color: #0e0e0e;
}

.widget--subscribe .widget__title {
	font-size: 1.375rem;
	line-height: 1.2;
	color: #fff;
}

/* Production mixes two paragraph styles inside one service tab panel - some
   at rgb(56,56,56) on a 30px line, some black on a 16px line - with nothing
   in the markup to tell them apart, so staging keeps the first and the
   difference on the others is recorded rather than guessed at. */

/* A post title's link takes the title's own colour rather than the link
   colour, which is what production does. */
.card--post .card__title a,
.card-grid--2 .card--post .card__title a {
	color: inherit;
}

/* Production's about-company opening paragraphs go back to 16px on a 30px
   line at phone width; the 18px/34px pair is its desktop setting. */
@media (max-width: 47.99rem) {
	.about-split__text > p.lede ~ p:nth-of-type(3),
	.about-split__text > p.lede ~ p:nth-of-type(4) {
		font-size: 1rem;
		line-height: 1.875;
	}
}

/* Production's career pages step down at phone width: its lede to 16px on a
   30px line, the title above the card to 30px on 40px, and the plate inside
   it to 18px on 21.6px. */
@media (max-width: 47.99rem) {
	.rilt-page-careers .section p:nth-of-type(1),
	.rilt-page-careers .prose p:nth-of-type(1) {
		font-size: 1rem;
		line-height: 1.875;
	}

	.job-hero__lead {
		font-size: 1.875rem;
		line-height: 1.3333;
	}

	.job-hero .job-hero__plate {
		font-size: 1.125rem;
		line-height: 1.2;
	}
}

/* Production renders its job "Apply Now" in sentence case, not capitals. */
.job-hero__actions .btn--primary {
	text-transform: none;
}

/* The hero's own call to action: 14px/700 on a 44px line, where staging had
   13px on 24.375px. */
.hero .btn,
.hero__cta {
	font-size: 0.875rem;
	line-height: 44px;
}

/* A disclosure row label drops to 14px on a 26.25px line at phone width, as
   production's does; it stays 16px/30px above that. */
@media (max-width: 47.99rem) {
	.disclosure__title,
	.disclosure__title a {
		font-size: 0.875rem;
		line-height: 1.875;
	}
}

/* Production serves these in-body photographs at a fixed width on a phone
   too - contact-v4 at 330px and the about-company photograph at 300px - where
   staging had stretched them to the 360px column. The desktop pin lives in
   the markup; this is the phone one. */
@media (max-width: 47.99rem) {
	/* The declaration has to win against the inline desktop pin, which is
	   why these carry !important: the markup holds production's 1440 width
	   and the data attribute its phone one. */
	img[data-phone-width='330'] {
		width: 330px !important;
		max-width: 100% !important;
	}

	img[data-phone-width='300'] {
		width: 300px !important;
		max-width: 100% !important;
	}
}

/* The homepage highlight accordion -------------------------------------- */

.highlight__trigger {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 2.75rem;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

/* Only once the script is running does a closed panel hide: without it every
   panel stays open and nothing is behind a dead control. */
.js-accordion .highlight:not(.is-open) .highlight__body {
	display: none;
}

/* The job card, as production builds it ---------------------------------
   A 369x279 photograph beside a 601x279 patterned panel carrying the title
   and the buttons, and a gradient on the primary button. Measured on
   production at 1440: `.ct-team-image` 369x279 cover, `.ct-team-content`
   601x279 cover, `.btn` 150x61 with
   linear-gradient(90deg, #05afec 0%, #94ca36 50%, #05afec). */

.job-hero {
	/* Production's card is 970px wide at 1440: a 369px photograph beside a
	   601px patterned panel, both 279px tall. The fixed columns have to give
	   way below that, or the panel runs past the viewport - at 768 it pushed
	   245px of horizontal overflow, which the sweep missed because it only
	   drove 390 and 1440. */
	display: grid;
	grid-template-columns: minmax(0, 369fr) minmax(0, 601fr);
	align-items: stretch;
	width: min(970px, 100%);
}

.job-hero__panel {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75rem;
	min-height: 279px;
	padding: 1.5rem 1.75rem;
	background-image: var(--job-panel);
	background-size: cover;
	background-position: 50% 50%;
}

.job-hero__photo {
	display: block;
	min-height: 279px;
	background-image: var(--job-photo);
	background-size: cover;
	background-position: 50% 50%;
}



.job-hero__actions .btn--primary {
	/* 150x61 on production, with its gradient. */
	background-image: linear-gradient(90deg, #05afec 0%, #94ca36 50%, #05afec);
	background-size: 300% auto;
	background-position: 0% 50%;
	width: 150px;
	height: 61px;
	padding-block: 0;
}

@media (max-width: 47.99rem) {
	.job-hero {
		grid-template-columns: 1fr;
		width: 100%;
	}

	.job-hero__photo {
		min-height: 220px;
	}
}

/* Production capitalises the author byline, so its link reads "Admin". */
.post-meta__author {
	text-transform: capitalize;
}

/* Production's section headings differ per section at phone width: "Our
   Services" is 32px on a 42.67px line and "Our Partners" 28px on 37.33px,
   where staging drew both at 26px. */
@media (max-width: 47.99rem) {
	.section--services .section-heading {
		font-size: 2rem;
		line-height: 1.3333;
	}

	.section--partners .section-heading {
		font-size: 1.75rem;
		line-height: 1.3333;
	}
}

/* The call-to-action heading, measured on production at both widths: 36px at
   weight 600 on a 36px line, white, and it does not step down on a phone.
   Staging drew 32px/700 on 42.56px, and 26px on a phone. */
.cta .section-heading,
.cta__title {
	/* Production's heading sits inside its band rather than spanning it:
	   measured at 1440 its box is 1086px at left 177, inside a 1170px row.
	   Staging's spanned the full 1170. */
	max-width: 1086px;
	margin-inline: auto;
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1;
}

@media (max-width: 47.99rem) {
	.cta .section-heading,
	.cta__title {
		font-size: 2.25rem;
		line-height: 1;
	}

	/* Production's banded CODE OF CONDUCT heading is 45px on a 52px line at
	   phone width, not the 54px it uses at 1440. */
	.code-band__title {
		font-size: 2.8125rem;
		line-height: 1.1556;
	}

	/* Its contact heading is 36px on a 44px line there. */
	.rilt-page-contact-us .section-heading {
		font-size: 2.25rem;
		line-height: 1.2222;
	}

	/* And its highlight titles are 16px/700 on a 30px line in rgb(21,38,68). */
	.highlight__title,
	.highlight__trigger {
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.875;
		color: rgb(21, 38, 68);
	}
}

/* Production's partner logos step down to 100px wide at phone width - AWS
   and Salesforce 100x38, HPTU 100x18 - where staging kept them at 168px.
   Measured at 390 in a mobile context, after scrolling the page in 300px
   steps and waiting for every lazy image to report complete. */
@media (max-width: 47.99rem) {
	.logo-row__img {
		width: 100px;
	}
}

/* The job description's opening paragraph is production's own black on a
   16px line - it builds that line as a heading widget, not body copy - where
   staging drew near-black on 30px. */
/* It is the third paragraph of the job prose, after the role and location
   lines - counted on the live page rather than guessed. */
.prose--job > p:nth-of-type(3) {
	color: #000;
	line-height: 1;
}

/* A service page's own headings are near-black on a 1.2 line on production,
   not the navy the rest of the site uses: its Salesforce CoE heading is
   36px/700 rgb(14,14,14) on 43.2px and its IT Staffing one 32px/700 on
   38.4px. */
.prose--service h2,
.prose--service h3,
.single-rilt_service .prose h2,
.single-rilt_service .prose h3,
.single-rilt_service .tabs h3 {
	color: #0e0e0e;
	line-height: 1.2;
}

/* Round eleven -----------------------------------------------------------
   Found after the type comparator was corrected. tools/typo.mjs keyed each
   run of text on region|TAGNAME|text; production's section headings are an
   h3 wrapping a span and this theme's are an h2, so those pairs never
   matched and were skipped rather than compared. The tag-agnostic
   tools/typo2.mjs pairs on text alone, and only where both sides hold the
   same number of visible runs. It found 123 differences at 390 and 139 at
   1440 on pages the old instrument called clean. Every value below is
   production's, read from the live page at the width named. */

/* Production's footer CIN label is weight 600 in its green on a 13px line;
   this theme drew 700 in the accent blue on 24.375px. 18 pages. */
.site-footer__cin-label {
	color: rgb(126, 182, 27);
	font-weight: 600;
	line-height: 13px;
}

/* Production's job-description bullets are rgb(84,89,95), not body ink.
   48 rows across the three role pages. */
.prose--job ul li {
	color: rgb(84, 89, 95);
}

/* Production's board committee headings are 24px/600 on a 24px line in
   Roboto, and it changes their colour with width: rgb(67,170,213) at 1440,
   rgb(110,193,228) at 390. This theme drew 15px/700 navy Poppins. */
.rilt-page-board-of-directors .committee__name {
	font-family: var(--rilt-font-body);
	font-size: 24px;
	font-weight: 600;
	line-height: 24px;
	color: rgb(67, 170, 213);
}

/* Its board intro line is a 36px near-black run on a 44px line. */
.rilt-page-board-of-directors .board-lead {
	color: rgb(14, 14, 14);
}

/* Production's office email and phone are rgb(0,0,1) plain text. This theme
   renders them as links, which is why they took the link colour; the
   linkification itself is an open decision, the colour is not. */
.rilt-page-contact-us .office__address a {
	color: rgb(0, 0, 1);
}

/* Production's mission and values paragraphs sit on a 26px line, not 30px. */
.rilt-page-about-company .value-card p {
	line-height: 26px;
}

@media (max-width: 47.99rem) {
	/* Production does not step these three headings down to 26px at phone
	   width: all three stay 32px on a 42.6666px line. */
	.section--intro .section-heading,
	.section--testimonials .section-heading,
	.section--blogs .section-heading {
		font-size: 2rem;
		line-height: 1.3333;
	}

	/* The about-company partners heading is 28px on 37.3332px there. The
	   existing .section--partners rule only reaches the home page. */
	.rilt-page-about-company .section-heading {
		font-size: 1.75rem;
		line-height: 1.3333;
	}

	.rilt-page-board-of-directors .committee__name {
		color: rgb(110, 193, 228);
	}
}

/* Production's about-company kickers are 16px in rgb(89,89,89) on a 30px line,
   and its code-band paragraph 18px on 30px - at both widths, not only on a
   phone, which is how these were first scoped.

   Both of these were scoped to `.about-split`, but only the "About us" kicker
   lives there: "Our Culture" is a direct child of `.prose`, further down the
   page, so it kept `.about-split__text p`'s 17px and this theme's own #0e0e0e.
   Scoping to the page instead reaches both, and still outranks
   `.about-split__text p`. */
.rilt-page-about-company p.eyebrow,
.rilt-page-careers .intro-split p.eyebrow {
	font-size: 1rem;
	line-height: 1.875;
}

/* Only the about-company kickers are grey on production; the careers one keeps
   the near-black the base rule already gives it. */
.rilt-page-about-company p.eyebrow {
	color: rgb(89, 89, 89);
}

.rilt-page-about-company .code-band p {
	font-size: 1.125rem;
	line-height: 30px;
}

/* Production's board lead changes size with width: 30px on a 42px line at
   1440, 36px on 44px at 390. */
.rilt-page-board-of-directors .board-lead {
	font-size: 30px;
	line-height: 42px;
}

@media (max-width: 47.99rem) {
	.rilt-page-board-of-directors .board-lead {
		font-size: 36px;
		line-height: 44px;
	}
}

/* Production's call-to-action band is Roboto, not the heading face, and its
   button sits on a 15px line. */
.cta .section-heading,
.cta__title {
	font-family: var(--rilt-font-body);
}

.cta .btn {
	font-family: var(--rilt-font-body);
	line-height: 15px;
}

/* Production's careers intro heading sits on a 48px line at 1440; this theme
   used 45px. */
.rilt-page-careers .careers-heading {
	line-height: 48px;
}

/* Production insets and re-proportions this one intro block rather than
   running it edge to edge in the container. Measured at 1440, inside the
   1170 container at x135:

     - the section it sits in carries `padding: 0 30px 0 55px`, and its
       columns eat another pixel on the right, so the block runs 190 to 1276
       rather than 135 to 1305 - 55 and 29 of inset;
     - its two columns are 528 and 508 wide with a 50px gutter, not an even
       split - the kicker and heading start at 190, the paragraph at 768;
     - the columns are vertically centred in a 213px row (Elementor's
       `section-content-middle`), each column padded 15px, which puts the
       kicker at 590 and the paragraph at 606 - the paragraph lower than the
       kicker because it is the shorter of the two;
     - the paragraph keeps its 15px bottom margin inside that centred box.

   Only the proportions are production's; none of its markup is. Below 62rem
   the block is a single column and these do not apply. */
@media (min-width: 62rem) {
	.rilt-page-careers .intro-split {
		padding-inline: 55px 29px;
		grid-template-columns: 528fr 508fr;
		column-gap: 50px;
		align-items: center;
	}

	.rilt-page-careers .intro-split__lead,
	.rilt-page-careers .intro-split__body {
		padding-block: 15px;
	}

	.rilt-page-careers .intro-split__body > p:last-child {
		margin-block-end: 15px;
	}

	/* Production's content starts 61px below the banner and ends 57px above
	   the footer: 788 to 845, the last 57 of which is an empty third-party
	   job-board embed on production, which draws nothing and which this
	   theme does not carry. The theme's own section rhythm is 88/88. */
	.rilt-page-careers .section {
		padding-block: 61px 57px;
	}
}

/* Production's home intro paragraphs are 17px on a 26px line. The 16px/24px
   measured alongside them belongs to the accordion panel text below, not to
   these three - setting it here moved all three the wrong way. */
.section--intro .intro__body .prose p {
	font-size: 1.0625rem;
	line-height: 1.5294;
}

/* The accordion panel text is production's 16px in rgb(97,97,97) on 24px. */
.highlight__text {
	font-size: 1rem;
	line-height: 1.5;
	color: rgb(97, 97, 97);
}

/* Production's about-company vision and mission block is white 22px/700
   Poppins on a 30px line over a photograph; this theme rendered it as plain
   16px body copy on nothing, because the background image had never been
   migrated. The image is handed in from inc/assets.php. */
.tabs--plain .tabs__panel--text p {
	font-family: var(--rilt-font-heading);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 30px;
	color: #fff;
}

/* The about-company vision / mission / culture band ----------------------
   Production draws this as Elementor section 1cb14388: an
   `elementor-section-stretched` full-bleed band with `padding: 40px 0`,
   carrying about-section-01.jpg at its intrinsic 1920x430, `background-size:
   auto`, `top left`, no-repeat. The widget sits in the middle of three
   columns - 15.083% / 69.583% / 14.998% of a 1140px boxed container, with
   15px `column-gap-extended` padding each side - so the content is 763px
   wide and inset from the band edges. Between 768 and 1024 the centre
   column is 90% and left-aligned; below 768 the columns stack to 100%.

   The widget is `.ct-tabs--layout2.type-vertical`: a nowrap flex row of a
   200-300px title column with a 5px right border and the panel beside it,
   wrapping only below 768. Every value below is production's own, taken
   verbatim from its served CSS; the Consultio theme's #000 is repainted
   white on this site and its #73bf43 active bar is #05afec. The client's
   instruction for this section overrides the handover's "write fresh code"
   line for CSS and for markup shape - no production PHP is reused. */

/* Full-bleed means escaping .container's 1170px box. Clipping the page body
   rather than letting the 100vw band overhang keeps the scrollbar's width
   from turning into real horizontal scroll. */
.page-body:has(.tabs--plain) {
	overflow-x: clip;
}

/* Production leaves 30px between the intro block and the band; this theme's
   own 3rem on .about-split left 48. Scoped to the one place the two meet. */
.about-split:has(+ .tabs--plain) {
	margin-block-end: 30px;
}

.tabs.tabs--plain {
	display: flex;
	flex-wrap: wrap;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	/* Production's sections carry no margin; the 40px band padding is the
	   whole gap. */
	margin-block: 0;
	/* 40px of section padding plus the 15px the populated column carries on
	   all four sides - production's band is 328px tall at 1440 against the
	   widget's own 218px. */
	padding-block: 55px;
	padding-inline: 15px;
	background-image: var(--about-band-image);
	background-size: auto;
	background-position: top left;
	background-repeat: no-repeat;
}

/* The three column widths, taken from the band edge. The unit is vw, not a
   percentage: a percentage padding resolves against the containing block -
   .container's 994px content box at 1024 - not against the 100vw band, and
   put the content 3px wide of production. Production's boxed container is
   1200px here, read off its own geometry at 1440 (titleCol x 316, panel
   right 1121): 0.69583 x 1200 - 30 = 805px of content, inset
   (1440 - 1200) / 2 + 0.15083 x 1200 + 15 = 316px from the left. */
@media (min-width: 48rem) {
	.tabs.tabs--plain {
		flex-wrap: nowrap;
		padding-inline: 15px calc(10vw + 15px);
	}
}

@media (min-width: 64.0625rem) {
	.tabs.tabs--plain {
		padding-inline: calc(15.083vw + 15px) calc(14.998vw + 15px);
	}
}

@media (min-width: 75rem) {
	.tabs.tabs--plain {
		padding-inline: calc(50vw - 404.004px) calc(50vw - 400.996px);
	}
}

/* The tab column. `display` is deliberately left alone: the bar is hidden
   until the script wires it up, so the page is complete without it. */
.tabs.tabs--plain .tabs__bar {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0;
	min-width: 100%;
	max-width: 100%;
	border: 0;
}

@media (min-width: 48rem) {
	.tabs.tabs--plain .tabs__bar {
		min-width: 200px;
		max-width: 300px;
		border-inline-end: 5px solid #fff;
	}
}

.tabs.tabs--plain .tabs__tab {
	display: block;
	position: relative;
	min-height: 0;
	padding: 15px 0;
	border: 0;
	background: none;
	font-family: var(--rilt-font-body);
	font-size: 24px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: normal;
	text-align: start;
	text-transform: none;
	color: #fff;
	cursor: pointer;
}

@media (min-width: 48rem) {
	.tabs.tabs--plain .tabs__tab {
		padding-right: 30px;
	}

	.tabs.tabs--plain .tabs__tab:first-child {
		padding-top: 37px;
	}

	.tabs.tabs--plain .tabs__tab:last-child {
		padding-bottom: 37px;
	}
}

/* Production declares no hover state here; staging's blue hover came from
   service.css and turned the label blue on the photograph. The keyboard
   ring stays - it is the only thing telling a keyboard user where they
   are, and production's plain spans are not reachable at all. */
.tabs.tabs--plain .tabs__tab:hover,
.tabs.tabs--plain .tabs__tab:focus-visible {
	color: #fff;
}

.tabs.tabs--plain .tabs__tab:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* The active marker: a 10px bar growing down the column's border, and a 1px
   rule growing under the label, both over 250ms linear. */
.tabs.tabs--plain .tabs__tab[aria-selected="true"] {
	background: none;
	color: #fff;
}

.tabs.tabs--plain .tabs__tab::before {
	content: "";
	position: absolute;
	top: 0;
	right: -7px;
	z-index: 99;
	width: 10px;
	height: 0;
	background-color: #05afec;
	transition: all 250ms linear 0ms;
}

.tabs.tabs--plain .tabs__tab[aria-selected="true"]::before {
	height: 100%;
}

.tabs.tabs--plain .tabs__tab i {
	position: relative;
	font-style: normal;
}

.tabs.tabs--plain .tabs__tab i::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background-color: #fff;
	transition: all 250ms linear 0ms;
}

.tabs.tabs--plain .tabs__tab[aria-selected="true"] i::before {
	width: 100%;
}

/* The panel is one block the full width of its flex slot, not the two-up
   grid service.css gives a service page's tabs - that rule won over the
   `display: block` written for this band in this file, because the two have
   equal specificity and service.css loads later. */
.tabs.tabs--plain .tabs__panel {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
	width: 100%;
	padding: 22px 0 0;
}

.tabs.tabs--plain .tabs__panel[hidden] {
	display: none;
}

@media (min-width: 48rem) {
	.tabs.tabs--plain .tabs__panel {
		width: auto;
		padding: 9px 0 0 35px;
	}
}

/* Production's .tab-sub carries a 25px bottom margin, which sets the band's
   height below 768 where the panel is the last thing in it. */
.tabs.tabs--plain .tabs__panel--text p {
	margin-block: 0 25px;
}

/* Without the script every panel is still shown, so the content is complete;
   keep them stacked rather than letting the nowrap row put three of them
   side by side. */
html:not(.js-tabs) .tabs.tabs--plain {
	flex-wrap: wrap;
}

html:not(.js-tabs) .tabs.tabs--plain .tabs__panel {
	width: 100%;
	padding-left: 0;
}

/* The three /about-company/ value cards, everything but their box --------
   Production draws these as the Consultio `ct-fancy-box-grid2` widget. Every
   value below was read off production live, and the hover values were
   sampled mid-transition rather than at the endpoints, so the timing is
   measured and not assumed:

     rest    background #f9fbfd, 1px solid #ebeffc, square, no shadow, z 1
     100ms   background rgb(251,253,254), z 41, halo opacity 0.407
     300ms   background #fff, z 99, halo opacity 1

   That 41 is the integer z-index a third of the way from 1 to 99, which is
   what `transition: all 300ms linear 0ms` does to it - production's own
   declaration, confirmed by the sample rather than taken from the vendor
   stylesheet.

   Production's halo is a separate `.item--shadow` element sitting behind the
   card - z -1 against the card's z 1 - so its 40px blur never falls on the
   card's own face. This theme has no such element, so the card's painted
   surface moves to `::after` and the halo goes on `::before` below it. A
   pseudo-element at z -1 inside the card's own stacking context would
   otherwise smear navy across the card.

   Neither the icon, the title nor the body copy changes on hover: all three
   compute `transition: all` on production, which is to say none, whatever
   the vendor stylesheet declares. There is no entrance animation on this
   row either - no `wow`, no `elementor-invisible`, no `data-settings`, and
   the computed `animation` is `none` on the section, the row and the cards.

   Production draws the same card at 390 as at 1440, so these rules are not
   scoped to a width; only the 30px side padding below 768 differs, which is
   production's own breakpoint.

   NOT reproduced: production wraps each card in `<a class="item-link">`
   pointing at demo.casethemes.net/consultio-corporate3/service/business-
   strategy/ - the theme vendor's demo site - so its cards compute
   `cursor: pointer`. That is the same stale vendor content as the job-card
   photograph already on the open list, and sending a visitor off this site
   was not reproduced. Staging's cards keep `cursor: auto`.

   The client's permission to copy production's CSS covers these rules; the
   markup stays this theme's own. */
/* The hovered card's z-index of 99 is production's, but production's header
   is static on this page and staging's is `position: fixed; z-index: 50`.
   Left loose, a card hovered while it sits under the sticky bar paints over
   it, halo and all. The row takes its own stacking context so the 99 stays
   inside it - which is what production's Elementor column does for it. */
.rilt-page-about-company .value-cards {
	position: relative;
	z-index: 0;
}

.rilt-page-about-company .value-card {
	position: relative;
	z-index: 1;
	/* Production's padding at every width above 768. */
	padding: 55px 40px 48px;
	text-align: center;
	/* Production's cards overlap by the 1px border they share - its items
	   carry `margin-left: -1px` over a 390px track - so the line between two
	   cards is one 1px rule, not two. This also brings the text column to
	   production's 309px from 308px. */
	width: calc(100% + 1px);
	/* The painted surface moves to ::after. The border stays declared here,
	   in the layout, so the 390x367 box does not move. */
	background: none;
	border-color: transparent;
	border-radius: 0;
	box-shadow: none;
	transition: all 300ms linear 0ms;
}

@media (max-width: 47.99rem) {
	/* Production's own narrow-width rule. */
	.rilt-page-about-company .value-card {
		padding-inline: 30px;
	}
}

.rilt-page-about-company .value-card::after {
	content: "";
	position: absolute;
	/* Absolute insets resolve against the padding box, so -1px reaches back
	   over the border this element replaces. */
	inset: -1px;
	z-index: 0;
	background-color: rgb(249, 251, 253);
	border: 1px solid rgb(235, 239, 252);
	transition: all 300ms linear 0ms;
}

/* Production's `.item--shadow`: 83% x 75% of the card, 20px off its bottom
   edge, invisible until the card is hovered. */
.rilt-page-about-company .value-card::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 20px;
	left: 0;
	z-index: -1;
	margin-inline: auto;
	width: 83%;
	height: 75%;
	opacity: 0;
	box-shadow: 0 10px 40px rgba(5, 12, 103, 0.28);
	transition: all 300ms linear 0ms;
}

/* Above the surface ::after paints. */
.rilt-page-about-company .value-card > * {
	position: relative;
	z-index: 1;
}

/* Production raises the hovered card over its neighbours so the halo falls
   on them rather than under them. It does not lift or scale the card: this
   theme's own translate and shadow are cancelled here. */
.rilt-page-about-company .value-card:hover {
	z-index: 99;
	transform: none;
	box-shadow: none;
}

.rilt-page-about-company .value-card:hover::after {
	background-color: #fff;
}

.rilt-page-about-company .value-card:hover::before {
	opacity: 1;
}

/* The icon. Production paints a 65px Flaticon-v2 glyph with the site's
   gradient through `background-clip: text` - no disc, no plate, no circle.
   The glyph box measures 65x78 inside a 67px line box that spans the whole
   309px column. Staging drew the gradient as a 67px disc with a 16px black
   glyph from the v1 Flaticon face sitting in the middle of it.

   No new font was needed and nothing is drawn by hand: assets/css/icons.css
   already embeds the Flaticon-v2 face and already defines `.flaticonv2-edit`,
   `-gear` and `-objective`, which are production's three glyphs. Only the
   glyph each card asks for is redirected, because this theme's markup names
   the v1 classes. */
/* Three classes deep, not two: `.rilt-page-about-company .value-card p` above
   sets a 26px line on every paragraph in the card, and the icon is a `p`. */
.rilt-page-about-company .value-card .value-card__icon {
	display: block;
	width: auto;
	height: auto;
	margin: 0 0 26px;
	background: none;
	border-radius: 0;
	line-height: 1;
	text-align: center;
	color: inherit;
}

/* Production's 15px below the title, at every width - the base rule's 12px
   was what left the phone cards 3px short of production's 367px. */
.rilt-page-about-company .value-card__title {
	margin-block-end: 15px;
}

.rilt-page-about-company .value-card__icon i {
	display: inline;
	font-size: 65px;
	line-height: 65px;
	/* Production's own serialisation of `linear-gradient(to right, ...)`. */
	background-image: -webkit-linear-gradient(left, #05afec, #94ca36);
	background-color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.rilt-page-about-company .value-card__icon .flaticon-award::before {
	font-family: "Flaticon-v2";
	content: "\f110";
}

.rilt-page-about-company .value-card__icon .flaticon-shield::before {
	font-family: "Flaticon-v2";
	content: "\f10b";
}

.rilt-page-about-company .value-card__icon .flaticon-group::before {
	font-family: "Flaticon-v2";
	content: "\f10d";
}

/* /about-company/ sizing, element for element against production at 1440 ---
   Every number below was read off https://www.responseinformaticsltd.com/
   about-company/ in Chrome at 1440x900, fonts settled and the page scrolled
   through, and is named in the comment beside the rule. Desktop only: the
   block is scoped to 992 and up so phone and tablet keep what they had. */

@media (min-width: 62rem) {

	/* Production's content starts 55px below the 325px banner (its column
	   carries 45px of margin plus 10px of padding), and at full scroll its
	   last logo sits 49px above the footer - measured as footer.top minus
	   logo.bottom at max scroll, because production's footer is fixed and
	   `body.scrollHeight` leaves its 47px reserve out. Staging's generic
	   88px did both ends. */
	.rilt-page-about-company .page-body {
		padding-block: 55px 49px;
	}

	/* Breadcrumb list: production's ul is 15px below the h1, not 8px, which
	   is what makes its banner inner 93px tall against staging's 86px. */
	.rilt-page-about-company .breadcrumbs {
		margin-block-start: 15px;
	}

	/* Intro row. Production's text column is 515.5px wide and its photograph
	   starts at x812.5 and is 510px wide - it overhangs its own column by
	   17.5px. Staging had split 1170 down the middle, 561/561 at x744. */
	.rilt-page-about-company .about-split {
		grid-template-columns: 515.5px minmax(0, 1fr);
		column-gap: 162px;
	}

	.rilt-page-about-company .about-figure img {
		width: 510px;
		max-width: none;
	}

	/* Paragraph rhythm inside that column, production's own: lede 31px below
	   its block, then 15px between paragraphs, and 36.1px before the third
	   because production puts it in a separate Elementor widget. */
	.rilt-page-about-company .about-split__text > p {
		margin-block-end: 15px;
	}

	/* The kicker keeps production's own 9px; the 15px above is for the body
	   paragraphs and reaches `.eyebrow` on specificity alone. */
	.rilt-page-about-company .about-split__text > p.eyebrow {
		margin-block-end: 9px;
	}

	.rilt-page-about-company .about-split__text > p.lede {
		margin-block-end: 31px;
	}

	.rilt-page-about-company .about-split__text > p.lede ~ p:nth-of-type(5) {
		margin-block-start: 36.1px;
	}

	/* The "24 Years of Experience" ribbon is a rotated bar down the left edge
	   of the photograph on production - its painted box is 75.2 x 408.8 at
	   x749.9, y853.6. Staging had it as a 231.9 x 54 label along the bottom.
	   The layout box is 408.8 x 75.2 and rotate(-90deg) puts it there. */
	.rilt-page-about-company .about-figure__ribbon {
		inset: 451.4px auto auto -229.4px;
		width: 408.8px;
		height: 75.2px;
		padding: 22px 55px;
		font-size: 26px;
		line-height: 31.2px;
		white-space: nowrap;
		border-radius: 0;
		transform: rotate(-90deg);
	}

	/* Production leaves 40px between the photograph and the vision band. */
	.rilt-page-about-company .about-split:has(+ .tabs--plain) {
		margin-block-end: 40px;
	}

	/* Culture block: 30px below the band, 1130px wide (not 1170), and its
	   lede is 24px on a 28.8px line, not 20px on 37.5px. */
	.rilt-page-about-company .tabs--plain + p.eyebrow {
		margin-block-start: 30px;
	}

	.rilt-page-about-company .prose > p.eyebrow,
	.rilt-page-about-company .prose > p.lede {
		max-width: 1130px;
	}

	.rilt-page-about-company .prose > p.lede {
		font-size: 24px;
		line-height: 28.8px;
	}

	/* Value cards. Production's three cards abut: 390px of track each, no
	   gutter, 55/40/48 padding on a 309px text column, with 44px of air above
	   and below the row. Staging had 370px cards on a 30px gutter. */
	.rilt-page-about-company .value-cards {
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
		margin-block: 44px 44px;
	}

	.rilt-page-about-company .value-card {
		/* Production centres everything in this card - its `.item--inner`
		   computes `text-align: center`, putting the VALUE cap at x298.6 and
		   the body text at x182.3 in a 309px column. Staging was left. */
		padding: 55px 40px 48px;
		text-align: center;
	}

	/* Production's icon occupies a 67px band with 26px below it; staging's
	   disc was 56px with 20px. The 67x67 disc that used to be declared here
	   is gone: the band is now the glyph's own 67px line box, set in the
	   value-card block above, and it is 309px wide like production's. */

	/* The title's 15px bottom margin is production's at every width and now
	   sits in the value-card block above, with the rest of the card. */

	/* Code of conduct. Production stretches this section the full 1440 and
	   darkens only the centred 1140 column (black at 0.6), leaving the outer
	   150px strips showing the raw photograph. Its content column is 980px
	   wide at x230, 37px below the top edge and 40px above the bottom; the
	   band is 516px tall. Staging had a boxed 1170 band, 635px tall. */
	.rilt-page-about-company .code-band {
		width: 100vw;
		margin-inline: calc(50% - 50vw);
		padding-block: 37px 40px;
		padding-inline: calc((100vw - 980px) / 2);
		/* Production's section computes `background-attachment: fixed`, so the
		   photograph is laid out against the 1440x900 viewport and covered at
		   1:1 (1920x900), not scaled down to the 516px band. Without this the
		   same file renders at 0.75 and the skyline reads a third too small
		   and 400px to the right. It also gives production's parallax. */
		background-attachment: fixed;
	}

	.rilt-page-about-company .code-band::before {
		inset: 0 auto 0 calc((100vw - 1140px) / 2);
		width: 1140px;
		background: rgba(0, 0, 0, 0.6);
	}

	.rilt-page-about-company .code-band__title {
		margin-block-end: 22px;
	}

	/* Production runs the list straight on from the intro line with no gap,
	   indented 15px, rows 12px apart and the text starting 40px in. */
	.rilt-page-about-company .code-band > p {
		margin-block-end: 0;
	}

	.rilt-page-about-company .code-band .check-list {
		margin-block: 0;
		margin-inline-start: 15px;
		gap: 12px;
	}

	.rilt-page-about-company .code-band .check-list > li {
		grid-template-columns: 24px 1fr;
		gap: 16px;
	}

	/* Partners heading: 30px below the band, 51.7px tall, 26.9px above the
	   logos. Staging had 0/54.5/32. */
	.rilt-page-about-company .section-heading--left {
		margin-block: 30px 26.9px;
		padding-block-end: 9px;
	}

	/* Production's logo row is a carousel whose two visible slides are 301px
	   wide and start at x417.6, putting the logos at x448.1 and x749.1.
	   Staging's auto-fit grid had spread them to x135 and x735. */
	.rilt-page-about-company .logo-row {
		display: flex;
		justify-content: flex-start;
		gap: 0;
		padding-inline-start: 282.6px;
	}

	.rilt-page-about-company .logo-row__item {
		flex: 0 0 301px;
		display: flex;
		justify-content: center;
	}

	.rilt-page-about-company .logo-row__item img {
		width: 240px;
		height: 90px;
	}
}

/* ==========================================================================
   Blog index: cards and sidebar, measured against production at 1440.

   Everything here is scoped to `.blog-main` / `.blog-sidebar`, which exist
   only on index.php, so the home strip's own post card is untouched. Values
   are production's served ones, read off `.grid-item-inner` and `#secondary`.
   ========================================================================== */

/* The grid ---------------------------------------------------------------
   Production's `.ct-grid-inner.row` is two `col-6` cells with a 15px gutter
   either side - cards at x490 and x912, 393 wide, 29 apart inside the 815
   column - and each `.grid-item-inner` carries `margin-bottom: 60px`, which
   is what makes the row pitch 431 against a 371 card. The gap is written as
   30 because the 815 track halves to 392.5 and the browser rounds the painted
   edges onto production's. */
.blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 48rem) {
	.blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 30px;
	}
}

.blog-card {
	margin-block-end: 60px;
}

/* The photograph ---------------------------------------------------------
   393x271 at 1440 with a 6px radius, and - the detail that changes how the
   whole page reads - `filter: grayscale(.85)` at rest, released to
   `grayscale(0)` over `.3s linear` while the card is hovered. Staging carried
   no filter at all, so every picture was full colour where production's are
   nearly monochrome. */
.blog-card__media {
	display: block;
}

.blog-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 393 / 271;
	object-fit: cover;
	border-radius: 6px;
	filter: grayscale(0.85);
	transition: filter 0.3s linear;
}

.blog-card:hover .blog-card__media img,
.blog-card:focus-within .blog-card__media img {
	filter: grayscale(0);
}

/* The white panel --------------------------------------------------------
   `.entry-body { margin-top: -60px; padding: 0 30px }` rides the panel up over
   the foot of the picture; `.entry-holder` is the panel itself. Measured:
   body 490/808/393x160, holder 520/808/333x160. */
.blog-card__body {
	position: relative;
	margin-block-start: -60px;
	padding-inline: 30px;
}

.blog-card__holder {
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 13px 29px rgba(0, 0, 0, 0.1);
	padding: 20px 20px 22px 30px;
	transition: box-shadow 0.3s linear;
}

.blog-card:hover .blog-card__holder,
.blog-card:focus-within .blog-card__holder {
	box-shadow: 0 20px 29px rgba(0, 0, 0, 0.2);
}

/* Meta, then title - production's order. Staging printed the title first and
   the date under it, which put every line of the card in the wrong place. */
.blog-card__meta {
	display: flex;
	margin: 2px 0 4px;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 24px;
	color: #939393;
	/* Production's meta is Poppins, not the body Roboto: the `<time>` came
	   back in Roboto and 99px wide against production's 110. */
	font-family: var(--rilt-font-heading);
}

.blog-card__date,
.blog-card__author {
	display: list-item;
	list-style: none;
}

.blog-card__date {
	margin-inline-end: 20px;
}

.blog-card__meta i {
	margin-inline-end: 4px;
	font-size: 14px;
}

.blog-card__meta a {
	color: #939393;
	text-transform: capitalize;
	text-decoration: none;
}

.blog-card__title {
	margin: 0 0 2px;
	font-size: 22px;
	font-weight: 700;
	line-height: 28.6px;
	color: rgb(56, 56, 56);
}

.blog-card__title a {
	color: inherit;
	text-decoration: none;
}

/* The swap. At rest the meta row shows and the read-more is out of flow; on
   hover they trade, so the title rises exactly 30px (24 + 4 + 2 out, 30 in)
   and the panel's own box never moves. Measured on production: title at 858
   at rest, 828 hovered, holder 808@h160 in both. */
.blog-card__more {
	display: none;
	line-height: 30px;
	font-size: 15px;
	font-weight: 700;
}

.blog-card__more a {
	color: rgb(5, 175, 236);
	text-decoration: none;
}

.blog-card:hover .blog-card__meta,
.blog-card:focus-within .blog-card__meta {
	display: none;
}

.blog-card:hover .blog-card__more,
.blog-card:focus-within .blog-card__more {
	display: block;
}

/* The sidebar ------------------------------------------------------------
   Production's widgets carry no panel: `#secondary .widget` is transparent
   with no padding and `margin-bottom: 42px`, and the last one has none.
   Staging drew each on a #eaeff2 card with a 6px radius and 24/20 padding. */
.blog-sidebar {
	gap: 0;
}

.blog-sidebar .widget {
	padding: 0;
	background: none;
	border-radius: 0;
	margin-block-end: 42px;
}

.blog-sidebar .widget:last-child {
	margin-block-end: 0;
}

/* `.widget-title { font-size: 20px; font-weight: 600; margin-bottom: 30px;
   padding-bottom: 11px; position: relative }` with a 40x3 gradient bar pinned
   to its foot - the same kicker the section headings use, at 40 rather than
   50. */
.blog-sidebar .widget__title {
	position: relative;
	margin: 0 0 30px;
	padding-block-end: 11px;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: normal;
	text-transform: none;
	color: #0e0e0e;
}

.blog-sidebar .widget__title::before {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	width: 40px;
	height: 3px;
	background-image: linear-gradient(to right, #05afec, #94ca36);
}

/* Category and archive rows. The link is the painted row, not the `li`:
   `color: #222; display: block; font-size: 15px; font-weight: 500;
   line-height: 24px; padding: 13px 12px 13px 16px;
   border-bottom: 1px solid #ececf0`, opened by a `\f105` angle 8px clear of
   the label - 51px a row against staging's 40. */
.blog-sidebar .widget-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-sidebar .widget-list li {
	display: block;
	font-size: 0;
	padding: 0;
	border: 0;
}

.blog-sidebar .widget-list li a {
	position: relative;
	display: block;
	padding: 13px 12px 13px 16px;
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
	color: #222;
	text-decoration: none;
	border-block-end: 1px solid #ececf0;
}

.blog-sidebar .widget-list li a::before {
	content: "\f105";
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	margin-inline-end: 8px;
}

/* `span.count`: a 27x27 #eee chip, centred, 12px #222. */
.blog-sidebar .widget-list__count {
	float: inline-end;
	width: 27px;
	height: 27px;
	background-color: #eee;
	text-align: center;
	line-height: 27px;
	font-size: 12px;
	color: #222;
}

/* Subscribe. `.ct-newsletter.widget` is a
   `linear-gradient(90deg, #152644 0%, #3c6cc1 50%, #152644)` panel with
   `padding: 32px 25px 42px`; its heading is 22px #fff with `padding-bottom:
   22px; margin-bottom: 0` and a `\f2b6` envelope 14px clear of the word. */
.blog-sidebar .widget--subscribe {
	padding: 32px 25px 42px;
	background-image: linear-gradient(90deg, #152644 0%, #3c6cc1 50%, #152644);
}

.blog-sidebar .widget--subscribe .widget__title {
	display: flex;
	align-items: center;
	margin-block-end: 0;
	padding-block-end: 22px;
	font-size: 22px;
	color: #fff;
}

.blog-sidebar .widget--subscribe .widget__title::before {
	content: "\f2b6";
	position: static;
	width: auto;
	height: auto;
	margin-inline-end: 14px;
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	font-size: 20px;
	background-image: none;
}

/* Search widget ----------------------------------------------------------
   Production: `.searchform-wrap` is the 270x51 field itself with the button
   pinned inside its right-hand end, transparent and 53x50, so the whole
   widget is 51 tall. */
/* Scoped to the form, not to the sidebar: `searchform.php` is the only search
   form the theme has and 404.php and the blog index's no-results branch render
   it too, so a sidebar-only rule would have left those two with an unstyled
   native input. Production styles `.search-field` / `.searchform-wrap`
   theme-wide for the same reason. */
.search-form {
	display: block;
	gap: 0;
}

.searchform-wrap {
	position: relative;
}

.search-form .search-field {
	width: 100%;
	height: 51px;
	padding: 0 22px;
	border: 1px solid #ececf0;
	border-radius: 0;
	background: #fff;
	font-size: 15px;
	color: #222;
}

.search-form .search-submit {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	width: 53px;
	height: 50px;
	padding: 0;
	border: 0;
	background: none;
	color: #222;
	font-size: 15px;
	cursor: pointer;
}

/* Recent-news rows -------------------------------------------------------
   `.entry-brief { padding: 0 0 17px; margin: 0 0 24px;
   border-bottom: 1px solid #e2e2e7 }` with the last row carrying none;
   `.entry-media { width: 65px; margin-right: 25px }` and its photograph a
   65px circle; title 16/600 #0e0e0e on 26 with `margin: -2px 0 4px`; date
   15px #999. Staging drew a 3px-radius square, a 14px gap, a 12px grey date
   and no rules, and came to 105 a row against production's 152. */
.blog-sidebar .recent-post {
	display: flex;
	gap: 0;
	align-items: flex-start;
	padding: 0 0 17px;
	margin: 0 0 24px;
	border-block-end: 1px solid #e2e2e7;
}

.blog-sidebar .recent-post:last-child {
	padding: 0;
	margin: 0;
	border-block-end: 0;
}

.blog-sidebar .recent-post__media {
	flex: 0 0 65px;
	width: 65px;
	margin-inline-end: 25px;
}

.blog-sidebar .recent-post__media img {
	width: 65px;
	height: 65px;
	object-fit: cover;
	border-radius: 65px;
}

.blog-sidebar .recent-post__title {
	display: block;
	margin: -2px 0 4px;
	font-size: 16px;
	font-weight: 600;
	line-height: 26px;
	color: #0e0e0e;
	text-decoration: none;
}

.blog-sidebar .recent-post__date {
	display: block;
	margin: 0;
	font-size: 15px;
	line-height: 28px;
	color: #999;
}

/* The list itself carried a 1rem grid gap on top of the rows' own 24px
   margin, which put production's 176px row pitch at 192. */
.blog-sidebar .recent-posts {
	display: block;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The Newsletter plugin's own fields, dressed as production dresses them.
   Measured on production at 1440 inside `.ct-newsletter.widget`: the email
   input is 58px tall with a 6px radius, a 1px #ececec rule, 13px type centred
   in the box and `.tnp-field-email { margin-bottom: 15px }`; the submit keeps
   the plugin's own box but takes a 5px radius and weight 700. Staging drew a
   40px borderless field with 16px left-aligned type. */
.blog-sidebar .widget--subscribe .widget__title {
	line-height: 26px;
}

.blog-sidebar .widget--subscribe .tnp-field-email {
	margin-block-end: 15px;
}

.blog-sidebar .widget--subscribe .tnp-email {
	height: 58px;
	padding: 0.7em;
	border: 1px solid #ececec;
	border-radius: 6px;
	font-size: 13px;
	text-align: center;
}

.blog-sidebar .widget--subscribe .tnp-submit {
	border-radius: 5px;
	font-weight: 700;
	/* The plugin's button inherits no face, so it fell back to Arial and came
	   out 40.375 tall against production's 47.375 - production renders it in
	   Poppins, which is the whole of that 7px. */
	font-family: var(--rilt-font-heading);
}