/*
 * Inner pages (body.ri-inner), on top of shell.css. Same family as the homepage, turned down:
 * a compact dark title band with breadcrumbs instead of the tall photo hero, a short red rule
 * under section headings instead of the hand-drawn underline, and flat dark bands instead of
 * the angled ones. The band is rendered in includes/design.php and by the child theme for blog
 * views, so pages, posts and archives all open the same way.
 */

/* Title band
   ========================================================================== */

.ri-titleband {
	position: relative; overflow: hidden;
	padding: 34px 20px 32px;
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 24px),
		radial-gradient(760px 320px at 88% 110%, rgba(235, 35, 41, .28), transparent 70%),
		linear-gradient(160deg, #22262d 0%, var(--rh-ink) 60%);
}
.ri-titleband__inner { max-width: 1240px; margin: 0 auto; }

/* The call to action sits beside the h1, not under it, so the title keeps the width it needs */
.ri-titleband__main {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
}
.ri-titleband__main > div:first-child { flex: 1 1 26ch; min-width: 0; }
.ri-styled .ri-titleband h1,
.ri-styled .ri-titleband .ri-titleband__title {
	margin: 0;
	font-family: var(--rh-head); font-size: clamp(30px, 2.9vw, 42px); line-height: 1.1; font-weight: 800;
	letter-spacing: -0.025em; text-transform: none; color: #fff; text-wrap: balance;
}
.ri-styled .ri-titleband h1::before,
.ri-styled .ri-titleband h1::after { display: none; }
.ri-titleband__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Thin photo banner under the band, carrying the page's supporting line
   ========================================================================== */

.ri-subbanner {
	position: relative; display: flex; align-items: center; overflow: hidden;
	min-height: 396px; padding: 32px 20px;
	background-color: var(--rh-ink); background-size: cover; background-position: center 42%;
}
/* Overall about a fifth lighter than it was, so more of the photo comes through. The weight is
   pushed into the left third, where the text sits, because some of these photos are pale there. */
.ri-subbanner::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(10, 12, 16, .8) 0%, rgba(10, 12, 16, .58) 38%, rgba(10, 12, 16, .22) 72%, rgba(10, 12, 16, .1) 100%);
}
.ri-subbanner__inner { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; }
.ri-subbanner p {
	margin: 0; max-width: 46ch;
	font-family: var(--rh-head); font-size: clamp(19px, 1.6vw, 24px); line-height: 1.4; font-weight: 600;
	letter-spacing: -0.015em; color: #fff; text-wrap: balance;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 2px 18px rgba(0, 0, 0, .7);
}

/* Blog views put the categories here instead, so the banner doubles as the way around the blog */
.ri-subbanner p.ri-topics__lead {
	margin: 0 0 18px;
	font-family: Montserrat, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.4;
	letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
.ri-topics { display: flex; flex-wrap: wrap; gap: 10px; max-width: 900px; }
.ri-topics__link {
	display: inline-flex; align-items: center; gap: .5em;
	padding: 9px 17px; border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	font-family: Montserrat, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2;
	color: #fff !important; text-decoration: none !important; white-space: nowrap;
	transition: background-color .2s var(--rh-ease), border-color .2s var(--rh-ease), transform .2s var(--rh-ease);
}
.ri-topics__link:hover { background: var(--rh-red); border-color: var(--rh-red); transform: translateY(-2px); }
.ri-topics__link.is-current { background: var(--rh-red); border-color: var(--rh-red); }
.ri-topics__count { font-size: 12px; font-weight: 700; opacity: .72; }

/* Breadcrumbs */
.ri-crumbs { margin: 0 0 18px; font-family: Montserrat, sans-serif; font-size: 13px; line-height: 1.5; }
.ri-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 0; list-style: none; }
.ri-crumbs li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .58); }
.ri-crumbs li + li::before {
	content: ""; width: 5px; height: 5px; border-right: 1.5px solid rgba(255, 255, 255, .35); border-top: 1.5px solid rgba(255, 255, 255, .35);
	transform: rotate(45deg);
}
.ri-crumbs a { color: rgba(255, 255, 255, .72); text-decoration: none; transition: color .2s ease; }
.ri-crumbs a:hover { color: #fff; }
.ri-crumbs [aria-current="page"] { color: rgba(255, 255, 255, .95); font-weight: 600; }

/* The band replaces the page's own photo hero, and any section the moved h1 leaves empty */
.ri-inner [data-elementor-type="wp-page"] > .e-con.ri-hero,
.ri-inner [data-elementor-type="wp-page"] > .e-con:not(:has(.elementor-widget)) { display: none !important; }

/* Post meta on blog views keeps the old markup, restyled */
.ri-titlebar__meta {
	display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 0 0;
	font-family: Montserrat, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}
.ri-titlebar__meta a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.ri-titlebar__meta a:hover { color: #fff; }

/* Section headings: a short red rule instead of the homepage's drawn underline
   ========================================================================== */

.ri-inner [data-elementor-type="wp-page"] .elementor-widget-heading h2.elementor-heading-title::after {
	content: ""; display: block; width: 44px; height: 3px; margin-top: 16px; border-radius: 2px;
	background: var(--rh-red);
}
.ri-inner [data-elementor-type="wp-page"] .ri-center h2.elementor-heading-title::after { margin-left: auto; margin-right: auto; }
.ri-inner [data-elementor-type="wp-page"] .ri-feature .ri-center h2.elementor-heading-title::after { margin-left: 0; }
.ri-inner [data-elementor-type="wp-page"] .ri-dark h2.elementor-heading-title::after,
.ri-inner [data-elementor-type="wp-page"] .ri-red h2.elementor-heading-title::after { background: #fff; }

.ri-inner [data-elementor-type="wp-page"] h3.elementor-heading-title {
	font-size: clamp(22px, 1.9vw, 27px) !important; line-height: 1.2 !important; font-weight: 700 !important;
	color: var(--rh-ink);
}
.ri-inner [data-elementor-type="wp-page"] .ri-dark h3.elementor-heading-title,
.ri-inner [data-elementor-type="wp-page"] .ri-red h3.elementor-heading-title { color: #fff; }

/* Body copy: a comfortable reading measure, a little larger than the old pass */
.ri-inner [data-elementor-type="wp-page"] .elementor-widget-text-editor { font-size: 17px; line-height: 1.7; }
.ri-inner [data-elementor-type="wp-page"] .elementor-widget-text-editor p { max-width: 72ch; }

/* Dark and red bands: flat, no angled edge
   ========================================================================== */

.ri-inner [data-elementor-type="wp-page"] > .e-con.ri-dark:not(.ri-hero):not(.ri-red) {
	background:
		radial-gradient(640px 300px at 10% 15%, rgba(235, 35, 41, .16), transparent 70%),
		var(--rh-ink) !important;
}
.ri-inner [data-elementor-type="wp-page"] > .e-con.ri-red {
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 22px),
		linear-gradient(120deg, var(--rh-red) 0%, #a9131a 100%) !important;
}

/* Photo rows: rounded, no offset red block
   ========================================================================== */

.ri-inner .ri-photo img {
	border-radius: var(--rh-radius);
	box-shadow: var(--rh-shadow-lg);
}
.ri-inner .ri-feature .ri-photo img { box-shadow: var(--rh-shadow-lg); }
.ri-inner .ri-feature h3.elementor-heading-title { font-size: clamp(22px, 2vw, 28px) !important; }

/* "Learn More" text buttons keep their pill siblings company without shouting */
.ri-inner .ri-text-btn .elementor-button { border-radius: 0 !important; padding: 4px 0 !important; letter-spacing: .04em !important; }
.ri-inner .ri-text-btn .elementor-button:hover { transform: none; box-shadow: none; }

/* Blog cards and post body, brought in line with the rest of the site
   ========================================================================== */

.ri-inner .ri-post-card { border: 0; border-radius: var(--rh-radius); box-shadow: var(--rh-shadow); }
.ri-inner .ri-post-card:hover { box-shadow: var(--rh-shadow-lg); }
.ri-inner .ri-post-card__meta {
	font-family: Montserrat, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--rh-red);
}
.ri-inner .ri-post-card__title {
	font-family: var(--rh-head); font-size: 21px; line-height: 1.25; font-weight: 700;
	letter-spacing: -0.015em; text-transform: none;
}
.ri-inner .ri-post-card .ri-post-card__title a { color: var(--rh-ink) !important; }
.ri-inner .ri-post-card__excerpt { font-size: 15.5px; line-height: 1.65; color: var(--rh-text); }
.ri-inner .ri-post-card__more {
	font-family: Montserrat, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .1em;
}
.ri-inner .ri-pagination .page-numbers { border-radius: 999px; }
.ri-inner .ri-blog { background: var(--rh-surface-2); }

.ri-inner .ri-single h2, .ri-inner .ri-single h3, .ri-inner .ri-single h4,
.ri-inner .ri-band h2, .ri-inner .ri-sidebar h2 {
	font-family: var(--rh-head); letter-spacing: -0.015em; text-transform: none; color: var(--rh-ink);
}
.ri-inner .ri-prose h2::after, .ri-inner .ri-band h2::after { height: 3px; border-radius: 2px; }
.ri-inner .ri-recent a { font-family: var(--rh-head); font-size: 16px; letter-spacing: -0.01em; }
.ri-inner .ri-sidebar__back {
	justify-content: center; gap: .5em; padding: 14px 22px; border-radius: 999px;
	background: var(--rh-red);
	font-family: Montserrat, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .01em; text-transform: none;
	box-shadow: 0 6px 16px rgba(235, 35, 41, .28);
	transition: transform .2s var(--rh-ease), box-shadow .2s var(--rh-ease), background-color .2s ease;
}
.ri-inner .ri-sidebar__back:hover { background: var(--rh-ink); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.ri-inner .ri-sidebar nav { border-top: 0; border-radius: var(--rh-radius); background: var(--rh-surface-2); box-shadow: var(--rh-shadow); }
.ri-inner .ri-band { background: var(--rh-surface-2); }
.ri-inner .ri-prose img, .ri-inner .ri-prose figure { border-radius: var(--rh-radius); }

/* Forms and review lists
   ========================================================================== */

.ri-inner .ri-form-section .gform_wrapper {
	border-top: 0; border-radius: var(--rh-radius); box-shadow: var(--rh-shadow-lg);
}
.ri-inner .gform_wrapper .gfield_label,
.ri-inner .gform_wrapper legend.gfield_label,
.ri-inner .gform_wrapper .gform-field-label:not(.gform-field-label--type-sub):not(.gform-field-label--type-inline) {
	font-family: Montserrat, sans-serif !important; font-size: 14px !important; font-weight: 700 !important;
	letter-spacing: .02em; text-transform: none; color: var(--rh-ink) !important;
}
.ri-inner .gform_wrapper input[type="text"],
.ri-inner .gform_wrapper input[type="email"],
.ri-inner .gform_wrapper input[type="tel"],
.ri-inner .gform_wrapper input[type="number"],
.ri-inner .gform_wrapper input[type="url"],
.ri-inner .gform_wrapper select,
.ri-inner .gform_wrapper textarea {
	border-radius: var(--rh-radius-sm) !important; border-color: var(--rh-line) !important;
}
.ri-inner .gform_wrapper .gform_footer .gform_button,
.ri-inner .gform_wrapper .gform_next_button,
.ri-inner .gform_wrapper .gform_previous_button {
	padding: 16px 40px !important; border-radius: 999px !important;
	font-family: Montserrat, sans-serif !important; font-size: 16px !important; letter-spacing: .01em; text-transform: none;
}
.ri-inner .gform_wrapper .gform_footer .gform_button:hover { background: var(--rh-ink) !important; }

.ri-inner .gv-list-view {
	border: 0 !important; border-radius: var(--rh-radius); box-shadow: var(--rh-shadow);
}
.ri-inner .gv-list-view-title h3,
.ri-inner .gv-list-view-title {
	font-family: var(--rh-head); font-size: 19px; letter-spacing: -0.01em; text-transform: none; color: var(--rh-ink);
}
.ri-inner .gv-list-view-subtitle h4 {
	font-family: Montserrat, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none;
}

/* Related links block (added by includes/design.php)
   ========================================================================== */

.ri-related { padding: 72px 20px; background: var(--rh-surface-2); }
.ri-related__wrap { max-width: 1240px; margin: 0 auto; }
.ri-styled .ri-related h2 {
	margin: 0 0 6px; font-family: var(--rh-head); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; font-weight: 700;
	letter-spacing: -0.015em; text-transform: none; color: var(--rh-ink);
}
.ri-styled .ri-related h2::after { display: none !important; }
.ri-related__lede { margin: 0 0 26px; font-size: 16px; color: var(--rh-muted); }
.ri-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.ri-related__link {
	position: relative; display: flex; align-items: center; gap: 12px;
	padding: 15px 42px 15px 18px; border: 1px solid var(--rh-line); border-radius: var(--rh-radius-sm);
	background: #fff; box-shadow: var(--rh-shadow);
	font-family: var(--rh-head); font-size: 16.5px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em;
	color: var(--rh-ink); text-decoration: none;
	transition: transform .2s var(--rh-ease), box-shadow .2s var(--rh-ease), border-color .2s ease, color .2s ease;
}
.ri-related__link::after {
	content: ""; position: absolute; right: 18px; width: 8px; height: 8px;
	border-right: 2px solid var(--rh-red); border-top: 2px solid var(--rh-red); transform: rotate(45deg);
	transition: transform .2s var(--rh-ease);
}
.ri-related__link:hover {
	transform: translateY(-2px); border-color: rgba(235, 35, 41, .45); box-shadow: var(--rh-shadow-lg); color: var(--rh-red);
}
.ri-related__link:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* Tablet
   ========================================================================== */

@media (max-width: 1024px) {
	.ri-titleband { padding: 34px 20px 30px; }
	.ri-subbanner { min-height: 330px; }
}

/* Phone
   ========================================================================== */

@media (max-width: 767px) {
	.ri-titleband { padding: 30px 16px 28px; }
	.ri-crumbs { margin-bottom: 14px; font-size: 12px; }
	.ri-styled .ri-titleband h1,
	.ri-styled .ri-titleband .ri-titleband__title { font-size: 28px; }
	.ri-titleband__actions { width: 100%; }
	.ri-titleband__actions .rh-btn { flex: 1 1 100%; }

	.ri-subbanner { min-height: 260px; padding: 24px 16px; background-position: center; }
	.ri-subbanner::before { background: linear-gradient(180deg, rgba(10, 12, 16, .42) 0%, rgba(10, 12, 16, .72) 100%); }
	.ri-subbanner p { max-width: none; font-size: 19px; }
	.ri-subbanner p.ri-topics__lead { margin-bottom: 14px; font-size: 12px; }
	.ri-topics { gap: 8px; }
	.ri-topics__link { padding: 8px 14px; font-size: 14px; }

	.ri-inner [data-elementor-type="wp-page"] .elementor-widget-text-editor { font-size: 16px; }

	.ri-related { padding: 48px 16px; }
	.ri-related__grid { grid-template-columns: 1fr; }
}

/* Lead image on posts that carry only a featured image (see single.php) */
.ri-inner .ri-prose__lead {
	display: block; width: 100%; height: auto; margin: 0 0 1.6em;
	border-radius: var(--rh-radius); box-shadow: var(--rh-shadow-lg);
}

/* Method cards on a service page: photo, name, one line on what it is for
   ========================================================================== */

.ri-inner .ri-method .ri-photo img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.ri-inner .ri-method h3.elementor-heading-title { font-size: 21px !important; }
.ri-inner .ri-method .elementor-widget-text-editor { font-size: 16px; line-height: 1.6; }
.ri-inner .ri-method .elementor-widget-text-editor p { max-width: none; }
.ri-inner .ri-method .elementor-widget-text-editor p:last-child a {
	font-family: Montserrat, sans-serif; font-size: 14.5px; font-weight: 700;
	color: var(--rh-red); text-decoration: none;
}
.ri-inner .ri-method .elementor-widget-text-editor p:last-child a::after { content: " \203A"; }

.ri-inner .ri-method--wide .ri-photo img { aspect-ratio: 16 / 9; }

/* A certification mark is not a photograph: show all of it, on its own white field */
.ri-inner .ri-method--logo .ri-photo img {
	object-fit: contain; padding: 22px; background: #fff;
	border-radius: var(--rh-radius); box-shadow: inset 0 0 0 1px var(--rh-line);
}

/* Before and after pairs
   ========================================================================== */

/* The pair reads as one thing, so it sits on one card */
.ri-inner .ri-ba {
	padding: 18px; border-radius: var(--rh-radius);
	background: #fff; box-shadow: var(--rh-shadow);
}
/* Square crops, so a portrait shot and a landscape one still pair up evenly */
.ri-inner .ri-ba__half .ri-photo img {
	display: block; aspect-ratio: 1 / 1; width: 100%; object-fit: cover;
	box-shadow: none;
}
.ri-inner .ri-ba__half { gap: 6px; }
.ri-inner .ri-ba__half .elementor-widget-text-editor { margin-bottom: 0; }
.ri-inner .ri-ba__label {
	margin: 0; font-family: Montserrat, sans-serif; font-size: 12px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase; color: var(--rh-muted);
}
.ri-inner .ri-ba .elementor-widget-text-editor p { max-width: none; font-size: 16px; }

/* A pair is only useful side by side, so it stays side by side on a phone too */
@media (max-width: 767px) {
	.ri-inner .ri-ba > .e-con:not(.ri-ba__half) { flex-direction: row; }
	.ri-inner .ri-ba__half { width: calc(50% - 5px); }
}

/* Pull quote band, for pages where one customer's words are the argument
   ========================================================================== */

.ri-inner .ri-pullquote blockquote {
	position: relative;
	max-width: 46ch; margin: 0 auto; padding: 0;
	border: 0; background: none;
	font-family: var(--rh-head); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3;
	font-weight: 700; letter-spacing: -0.015em; color: #fff; text-align: center;
}
.ri-inner .ri-pullquote blockquote::before {
	content: "\201C"; display: block; margin-bottom: -.12em;
	font-size: 2.2em; line-height: 1; color: var(--rh-red);
}
.ri-inner .ri-pullquote .ri-pullquote__cite {
	max-width: none; margin: 18px 0 0;
	font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4;
	letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62);
	text-align: center;
}