/* ==========================================================================
   Real Media - HTML rate cards
   Replaces the flattened pricing images with real text, styled to match the
   original artwork: black title bar, red accent rule, grey column header,
   zebra rows, red prices, gold "best volume" badge.
   ========================================================================== */

.rm-rate {
	--rm-black:      #231f20;
	--rm-red:        #ed1c24;
	--rm-red-dark:   #c8102e;
	--rm-grey-head:  #c6c7c9;
	--rm-grey-sub:   #bcbec0;
	--rm-zebra:      #f1f1f2;
	--rm-border:     #dcdcde;
	--rm-text:       #231f20;

	max-width: 1000px;
	margin: 0 auto 34px;
	background: #fff;
	border: 1px solid var(--rm-border);
	border-radius: 10px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .14);
	overflow: hidden;
	color: var(--rm-text);
	font-family: "Roboto Condensed", "PT Sans Narrow", "Arial Narrow", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* ---------- page-level heading block (replaces the image's top banner) --- */

.rm-rate-head {
	max-width: 1000px;
	margin: 0 auto 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	flex-wrap: wrap;
	text-align: center;
}

.rm-rate-head img {
	width: 110px;
	height: auto;
	flex: none;
}

.rm-rate-head h1 {
	font-family: "Roboto Condensed", "PT Sans Narrow", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.05;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: #231f20;
	margin: 0 0 4px;
}

.rm-rate-head .rm-rate-head__sub {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 17px;
	color: #414042;
	margin: 0;
}

/* ---------- card internals --------------------------------------------- */

.rm-rate__title {
	background: var(--rm-black);
	color: #fff;
	text-align: center;
	padding: 12px 18px 13px;
}

.rm-rate__title h1,
.rm-rate__title h2,
.rm-rate__title h3 {
	font-family: inherit;
	font-weight: 700;
	font-size: 27px;
	line-height: 1.12;
	letter-spacing: .005em;
	color: #fff;
	margin: 0;
	text-transform: none;
}

.rm-rate__title p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.35;
	color: #e6e6e6;
	margin: 4px 0 0;
}

/* thin red rule that sits under the black bar in the artwork */
.rm-rate__rule {
	height: 4px;
	background: var(--rm-red);
}

.rm-rate__subbar {
	background: var(--rm-grey-sub);
	color: #231f20;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	padding: 9px 16px;
}

/* photo + table side by side, as in the source artwork */
.rm-rate__split {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
}

.rm-rate__media {
	flex: 0 0 30%;
	max-width: 30%;
	background: #efefef center/cover no-repeat;
	min-height: 190px;
}

.rm-rate__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rm-rate__panel {
	flex: 1 1 60%;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.rm-rate__tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---------- the table --------------------------------------------------- */

.rm-rate table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-variant-numeric: tabular-nums;
}

.rm-rate thead.rm-rate__group th {
	background: var(--rm-red);
	color: #fff;
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 21px;
	padding: 7px 10px;
	text-align: center;
	border: 0;
}

.rm-rate th {
	background: var(--rm-grey-head);
	color: #58595b;
	font-weight: 400;
	font-size: 19px;
	padding: 11px 14px;
	text-align: center;
	border: 0;
	white-space: nowrap;
}

.rm-rate td {
	font-size: 20px;
	color: #231f20;
	text-align: center;
	padding: 12px 14px;
	border: 0;
	background: #fff;
	white-space: nowrap;
}

.rm-rate tbody tr:nth-child(even) td {
	background: var(--rm-zebra);
}

/* price emphasis variants seen in the sign artwork */
.rm-rate td.rm-price {
	color: var(--rm-red);
	font-weight: 700;
}

.rm-rate td.rm-was {
	color: #231f20;
	font-weight: 700;
}

.rm-rate td.rm-was s {
	color: var(--rm-red);
	font-weight: 700;
	margin-right: 6px;
}

/* gold "best volume" column, matching the badge in the artwork */
.rm-rate th.rm-best {
	background: var(--rm-red);
	color: #fff;
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 21px;
}

.rm-rate td.rm-best,
.rm-rate tbody tr:nth-child(even) td.rm-best {
	background: linear-gradient(180deg, #fde14a 0%, #f6c11c 55%, #efae0d 100%);
	color: #231f20;
	font-weight: 700;
	font-size: 22px;
}

/* ---------- footnote ---------------------------------------------------- */

.rm-rate-note {
	max-width: 1000px;
	margin: 0 auto 30px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 9px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #231f20;
	text-align: center;
}

.rm-rate-note::before {
	content: "!";
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--rm-red);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
}

/* ---------- supporting copy under the rate cards ------------------------ */

.rm-rate-copy {
	max-width: 1000px;
	margin: 0 auto 30px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #333;
}

.rm-rate-copy h2 {
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 24px;
	color: #231f20;
	margin: 26px 0 8px;
}

.rm-rate-copy p {
	margin: 0 0 14px;
}

.rm-rate-cta {
	max-width: 1000px;
	margin: 0 auto 34px;
	text-align: center;
}

.rm-rate-cta a {
	display: inline-block;
	background: var(--rm-red, #ed1c24);
	color: #fff;
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: .02em;
	text-decoration: none;
	padding: 13px 34px;
	border-radius: 4px;
}

.rm-rate-cta a:hover,
.rm-rate-cta a:focus {
	background: #c8102e;
	color: #fff;
}

/* ---------- responsive -------------------------------------------------- */

@media (max-width: 780px) {
	.rm-rate__media {
		flex: 0 0 100%;
		max-width: 100%;
		height: 190px;
	}

	.rm-rate__panel {
		flex: 0 0 100%;
	}

	.rm-rate-head h1 {
		font-size: 30px;
	}

	.rm-rate__title h1,
	.rm-rate__title h2,
	.rm-rate__title h3 {
		font-size: 21px;
	}

	.rm-rate th {
		font-size: 15px;
		padding: 9px 10px;
	}

	.rm-rate td {
		font-size: 16px;
		padding: 10px;
	}

	.rm-rate td.rm-best {
		font-size: 17px;
	}
}

/* ==========================================================================
   Specificity overrides
   The legacy theme stylesheet carries broad rules like `.post-content h2`
   (0,2,0) that outrank the component selectors above. These re-declare the
   same properties at a higher specificity rather than reaching for
   !important, so the component still reads as normal CSS.
   ========================================================================== */

.rm-rate .rm-rate__title h1,
.rm-rate .rm-rate__title h2,
.rm-rate .rm-rate__title h3 {
	font-family: "Roboto Condensed", "PT Sans Narrow", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 27px;
	line-height: 1.12;
	color: #fff;
	background: none;
	margin: 0;
	padding: 0;
	border: 0;
	text-transform: none;
	text-align: center;
}

.rm-rate .rm-rate__title p {
	color: #e6e6e6;
	margin: 4px 0 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.35;
}

/* Row-header cells carry the quantity - they must read as data, not header */
.rm-rate table tbody th {
	background: #fff;
	color: #231f20;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 20px;
	text-align: center;
	padding: 12px 14px;
	border: 0;
}

.rm-rate table tbody tr:nth-child(even) th {
	background: var(--rm-zebra);
}

.rm-rate table thead th {
	background: var(--rm-grey-head);
	color: #58595b;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 19px;
	padding: 11px 14px;
	border: 0;
}

.rm-rate table thead.rm-rate__group th {
	background: var(--rm-red);
	color: #fff;
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 21px;
	padding: 7px 10px;
}

.rm-rate table thead th.rm-best {
	background: var(--rm-red);
	color: #fff;
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 21px;
}

.rm-rate table tbody td.rm-best,
.rm-rate table tbody tr:nth-child(even) td.rm-best {
	background: linear-gradient(180deg, #fde14a 0%, #f6c11c 55%, #efae0d 100%);
	color: #231f20;
	font-weight: 700;
	font-size: 22px;
}

.rm-rate table td {
	border: 0;
	font-family: Arial, Helvetica, sans-serif;
}

/* the media column must not inherit the theme's figure/img margins */
.rm-rate .rm-rate__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.rm-rate-head h1 {
	font-family: "Roboto Condensed", "PT Sans Narrow", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.05;
	color: #231f20;
	background: none;
	margin: 0 0 4px;
	padding: 0;
	border: 0;
	text-transform: uppercase;
}

.rm-rate-copy h2 {
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 24px;
	color: #231f20;
	background: none;
	margin: 26px 0 8px;
	padding: 0;
	border: 0;
	text-transform: none;
}

/* accessible caption hiding, in case the theme lacks the core class */
.rm-rate .screen-reader-text,
.rm-contact .screen-reader-text,
.rm-vsposter .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   The theme sets `#main h2 { color:#333 }` - an ID selector that outranks any
   class-based rule. Content always renders inside #main (see index.php), so
   the component scopes its heading colours the same way rather than escalating
   to !important.
   -------------------------------------------------------------------------- */

#main .rm-rate .rm-rate__title h1,
#main .rm-rate .rm-rate__title h2,
#main .rm-rate .rm-rate__title h3 {
	font-family: "Roboto Condensed", "PT Sans Narrow", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 27px;
	line-height: 1.12;
	color: #fff;
	background: none;
	margin: 0;
	padding: 0;
	border: 0;
	text-transform: none;
	text-align: center;
}

#main .rm-rate .rm-rate__title p {
	color: #e6e6e6;
	font-size: 14px;
	line-height: 1.35;
	margin: 4px 0 0;
	padding: 0;
}

#main .rm-rate-head h1 {
	font-family: "Roboto Condensed", "PT Sans Narrow", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.05;
	color: #231f20;
	background: none;
	margin: 0 0 4px;
	padding: 0;
	border: 0;
	text-transform: uppercase;
}

#main .rm-rate-copy h2 {
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 24px;
	color: #231f20;
	background: none;
	margin: 26px 0 8px;
	padding: 0;
	border: 0;
	text-transform: none;
}

#main .rm-rate table tbody th {
	background: #fff;
	color: #231f20;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 20px;
	text-align: center;
	padding: 12px 14px;
	border: 0;
}

#main .rm-rate table tbody tr:nth-child(even) th {
	background: #f1f1f2;
}

@media (max-width: 780px) {
	#main .rm-rate .rm-rate__title h2,
	#main .rm-rate .rm-rate__title h3 {
		font-size: 21px;
	}

	#main .rm-rate-head h1 {
		font-size: 30px;
	}
}

/* --------------------------------------------------------------------------
   Last resort. The theme ships `.post-content h2 { color:#333 !important }`,
   so the white-on-black title bars cannot be won by specificity alone. These
   are scoped as tightly as possible - only inside a rate card's title bar.
   -------------------------------------------------------------------------- */

#main .rm-rate .rm-rate__title h1,
#main .rm-rate .rm-rate__title h2,
#main .rm-rate .rm-rate__title h3 {
	color: #fff !important;
	font-family: "Roboto Condensed", "PT Sans Narrow", "Arial Narrow", Arial, sans-serif !important;
	font-size: 27px !important;
	font-weight: 700 !important;
	line-height: 1.12 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	text-align: center !important;
	text-transform: none !important;
}

#main .rm-rate .rm-rate__title p {
	color: #e6e6e6 !important;
	font-size: 14px !important;
	line-height: 1.35 !important;
	margin: 4px 0 0 !important;
	padding: 0 !important;
	text-align: center !important;
}

#main .rm-rate thead.rm-rate__group th,
#main .rm-rate thead th.rm-best {
	color: #fff !important;
}

#main .rm-rate td.rm-best {
	color: #231f20 !important;
}

#main .rm-rate td.rm-price {
	color: #ed1c24 !important;
}

#main .rm-rate-cta a {
	color: #fff !important;
}

@media (max-width: 780px) {
	#main .rm-rate .rm-rate__title h2,
	#main .rm-rate .rm-rate__title h3 {
		font-size: 21px !important;
	}
}

/* --------------------------------------------------------------------------
   Token scope. The palette was originally declared on .rm-rate only, so the
   sibling blocks (.rm-rate-note, .rm-rate-cta) resolved var() to nothing -
   custom properties inherit down, not sideways. Declared once on the content
   wrapper so every part of the component shares one palette.
   -------------------------------------------------------------------------- */

.rm-rate,
.rm-rate-head,
.rm-rate-note,
.rm-rate-copy,
.rm-rate-cta {
	--rm-black:     #231f20;
	--rm-red:       #ed1c24;
	--rm-red-dark:  #c8102e;
	--rm-grey-head: #c6c7c9;
	--rm-grey-sub:  #bcbec0;
	--rm-zebra:     #f1f1f2;
	--rm-border:    #dcdcde;
	--rm-text:      #231f20;
}

.rm-rate-note::before {
	background: #ed1c24;
	color: #fff;
}

/* ==========================================================================
   "All tours include" panel - replaces tours-include-image1.webp
   ========================================================================== */

.rm-include {
	max-width: 1030px;
	margin: 0 auto 34px;
	background: #fafafa;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
	display: flex;
	align-items: center;
	gap: 0;
	overflow: hidden;
	flex-wrap: wrap;
}

.rm-include__art {
	flex: 0 0 250px;
	max-width: 250px;
	align-self: stretch;
	display: flex;
	align-items: center;
	background: #fafafa;
}

.rm-include__art img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	box-shadow: none;
}

.rm-include__body {
	flex: 1 1 380px;
	min-width: 0;
	padding: 22px 20px 22px 8px;
}

#main .rm-include__body h2 {
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 26px !important;
	line-height: 1.1 !important;
	color: #231f20 !important;
	background: none !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	border: 0 !important;
	text-transform: uppercase !important;
	text-align: left !important;
	letter-spacing: .01em;
}

.rm-include__body ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rm-include__body li {
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 19px;
	line-height: 1.5;
	color: #231f20;
	padding: 3px 0 3px 20px;
	margin: 0;
}

.rm-include__body li::before {
	content: "-";
	position: absolute;
	left: 2px;
	color: #231f20;
}

.rm-include__turnaround {
	flex: 0 0 190px;
	max-width: 190px;
	align-self: center;
	text-align: center;
	padding: 16px 18px;
}

.rm-include__turnaround img {
	display: block;
	width: 118px;
	height: auto;
	margin: 0 auto 8px;
	border: 0;
	box-shadow: none;
}

.rm-include__turnaround span {
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: #231f20;
}

/* ==========================================================================
   Feature sheets & books - replaces Feature-sheets-page.jpg
   ========================================================================== */

.rm-features {
	max-width: 760px;
	margin: 0 auto 34px;
}

#main .rm-features > h2 {
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 27px !important;
	color: #9591c3 !important;
	background: none !important;
	text-align: center !important;
	text-transform: uppercase !important;
	margin: 0 0 18px !important;
	padding: 0 !important;
	border: 0 !important;
	letter-spacing: .02em;
}

.rm-feature {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	margin-bottom: 14px;
	background: #fff;
	overflow: hidden;
}

.rm-feature--reverse {
	flex-direction: row-reverse;
}

.rm-feature__panel {
	flex: 1 1 320px;
	min-width: 0;
	padding: 20px 24px 22px;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.rm-feature--teal   .rm-feature__panel { background: #58a595; }
.rm-feature--purple .rm-feature__panel { background: #9793c6; }
.rm-feature--orange .rm-feature__panel { background: #fbaa75; }

.rm-feature__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 2px solid rgba(255, 255, 255, .85);
	padding-bottom: 8px;
	margin-bottom: 12px;
}

#main .rm-feature__panel h3 {
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 22px !important;
	line-height: 1.12 !important;
	color: #fff !important;
	background: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	text-transform: none !important;
	text-align: left !important;
}

.rm-feature__price {
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
}

.rm-feature__panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rm-feature__panel li {
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	color: #fff;
	padding: 2px 0 2px 14px;
	margin: 0;
}

.rm-feature__panel li::before {
	content: "\2022";
	position: absolute;
	left: 0;
	color: #fff;
}

.rm-feature__media {
	flex: 1 1 320px;
	min-width: 0;
	background: #f4f4f4;
}

.rm-feature__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	border: 0;
	box-shadow: none;
}

/* ==========================================================================
   Virtual staging - replaces Virtual-Staging-WIDE.jpg
   ========================================================================== */

.rm-vstage {
	max-width: 900px;
	margin: 0 auto 34px;
	background: #fff;
	border: 1px solid #e2e2e2;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	overflow: hidden;
}

.rm-vstage__media {
	flex: 0 0 376px;
	max-width: 376px;
}

.rm-vstage__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	border: 0;
	box-shadow: none;
}

.rm-vstage__body {
	flex: 1 1 380px;
	min-width: 0;
	padding: 22px 26px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#main .rm-vstage__body h2,
#main .rm-vstage__body h3 {
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
	font-weight: 400 !important;
	font-size: 34px !important;
	line-height: 1.1 !important;
	color: #58595b !important;
	background: none !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	border: 0 !important;
	text-transform: uppercase !important;
	text-align: left !important;
}

.rm-vstage__body h2 b,
.rm-vstage__body h3 b {
	font-weight: 700;
	color: #231f20;
}

.rm-vstage__body ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rm-vstage__body li {
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	color: #231f20;
	padding: 4px 0 4px 26px;
	margin: 0;
	text-transform: uppercase;
}

.rm-vstage__body li::before {
	content: "\2713";
	position: absolute;
	left: 2px;
	top: 3px;
	width: 15px;
	height: 15px;
	border: 1px solid #b9b9b9;
	color: #ed1c24;
	font-size: 13px;
	line-height: 14px;
	text-align: center;
	font-weight: 700;
}

.rm-vstage__body em {
	font-style: normal;
	color: #ed1c24;
	font-weight: 700;
}

@media (max-width: 780px) {
	.rm-include__art,
	.rm-include__turnaround,
	.rm-vstage__media {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.rm-include__body {
		padding: 18px;
	}

	.rm-feature--reverse {
		flex-direction: row;
	}

	#main .rm-vstage__body h2,
#main .rm-vstage__body h3 {
		font-size: 26px !important;
	}
}

/* the virtual staging block is a whole-card link to /virtual-staging/ */
a.rm-vstage,
#main a.rm-vstage {
	text-decoration: none;
	color: inherit;
}

a.rm-vstage:hover {
	box-shadow: 0 5px 16px rgba(0, 0, 0, .2);
}

a.rm-vstage:focus-visible {
	outline: 3px solid #ed1c24;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Feature panel arrow + icon.
   The source artwork gives each coloured panel a triangular tab pointing at
   its photo, and an outlined glyph beside the title. Both are rebuilt here so
   they stay sharp and recolour with the panel variant.
   -------------------------------------------------------------------------- */

.rm-feature {
	overflow: visible;
}

.rm-feature__panel {
	position: relative;
}

.rm-feature__panel::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -18px;
	width: 0;
	height: 0;
	margin-top: -24px;
	border-top: 24px solid transparent;
	border-bottom: 24px solid transparent;
	border-left: 18px solid currentColor;
	z-index: 2;
	pointer-events: none;
}

.rm-feature--reverse .rm-feature__panel::after {
	right: auto;
	left: -18px;
	border-left: 0;
	border-right: 18px solid currentColor;
}

.rm-feature--teal   .rm-feature__panel::after { color: #58a595; }
.rm-feature--purple .rm-feature__panel::after { color: #9793c6; }
.rm-feature--orange .rm-feature__panel::after { color: #fbaa75; }

.rm-feature__icon {
	flex: none;
	width: 42px;
	height: 42px;
	margin-right: 12px;
	align-self: center;
}

.rm-feature__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.rm-feature__head {
	align-items: center;
}

.rm-feature__titlewrap {
	display: flex;
	align-items: center;
	min-width: 0;
}

@media (max-width: 780px) {
	.rm-feature__panel::after,
	.rm-feature--reverse .rm-feature__panel::after {
		display: none;
	}

	.rm-feature__icon {
		width: 32px;
		height: 32px;
		margin-right: 9px;
	}
}

/* --------------------------------------------------------------------------
   Panel icons as CSS backgrounds.
   WordPress strips inline <svg> from post content through KSES, so the glyphs
   live here instead. The markup only needs an empty, KSES-safe <span>.
   -------------------------------------------------------------------------- */

.rm-feature__icon {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.rm-feature__icon--sheet {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Ccircle cx='24' cy='24' r='21'/%3E%3Crect x='15' y='14' width='18' height='20' rx='2'/%3E%3C/svg%3E");
}

.rm-feature__icon--book {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='21'/%3E%3Cpath d='M24 16.5c-2.6-1.7-5.6-2.4-9-2.2v17c3.4-.2 6.4.5 9 2.2 2.6-1.7 5.6-2.4 9-2.2v-17c-3.4-.2-6.4.5-9 2.2z'/%3E%3Cline x1='24' y1='16.5' x2='24' y2='33.5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Section titles ("Digital Print" / "Volume Print") and the split
   two-finish table used by the door hanger rate card.
   ========================================================================== */

#main .rm-section-title,
.rm-section-title {
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 40px !important;
	line-height: 1.05 !important;
	color: #ed1c24 !important;
	background: none !important;
	text-align: center !important;
	text-transform: none !important;
	margin: 34px auto 14px !important;
	padding: 0 !important;
	border: 0 !important;
	max-width: 1000px;
}

/* a hairline between the two finishes in a side-by-side rate table */
.rm-rate table td.rm-split-edge,
.rm-rate table th.rm-split-edge,
#main .rm-rate table tbody th.rm-split-edge {
	border-left: 1px solid #d8d8da;
}

@media (max-width: 780px) {
	#main .rm-section-title,
	.rm-section-title {
		font-size: 28px !important;
	}
}

/* ==========================================================================
   Service chip grid - replaces cover-1.jpg, which had the whole service list
   baked into a photograph. Same blue pill language, but every chip is now a
   real link with real text.
   ========================================================================== */

.rm-servicegrid {
	position: relative;
	max-width: 900px;
	margin: 0 auto 34px;
	padding: 26px 24px 30px;
	border-radius: 8px;
	overflow: hidden;
	background-color: #dfeef6;
	background-image: url("https://realmedia.ca/wp-content/uploads/2013/01/cover-1.jpg");
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
}

/* wash the photo back so the chips stay legible over it */
.rm-servicegrid::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(226, 243, 251, .96) 0%, rgba(226, 243, 251, .93) 55%, rgba(226, 243, 251, .62) 100%);
}

.rm-servicegrid > * {
	position: relative;
	z-index: 1;
}

.rm-servicegrid__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-bottom: 16px;
}

.rm-servicegrid__contact a,
.rm-servicegrid__contact span {
	display: inline-block;
	background: rgba(255, 255, 255, .9);
	border: 2px solid #55c4ee;
	border-radius: 10px;
	padding: 8px 22px;
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 21px;
	color: #1d7fa8;
	text-decoration: none;
	line-height: 1.2;
}

.rm-servicegrid__contact a:hover {
	background: #fff;
	color: #0f5f80;
}

.rm-servicegrid ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
	gap: 8px;
}

.rm-servicegrid li {
	margin: 0;
	padding: 0;
}

.rm-servicegrid li a,
.rm-servicegrid li span {
	display: block;
	text-align: center;
	background: rgba(255, 255, 255, .82);
	border: 2px solid #6fcdf0;
	border-radius: 10px;
	padding: 10px 8px;
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.2;
	color: #1d7fa8;
	text-decoration: none;
}

.rm-servicegrid li a:hover,
.rm-servicegrid li a:focus {
	background: #1d7fa8;
	border-color: #1d7fa8;
	color: #fff;
}

@media (max-width: 780px) {
	.rm-servicegrid {
		background-image: none;
		padding: 20px 16px 24px;
	}

	.rm-servicegrid__contact a,
	.rm-servicegrid__contact span {
		font-size: 17px;
		padding: 7px 16px;
	}

	.rm-servicegrid ul {
		grid-template-columns: repeat(auto-fit, minmax(134px, 1fr));
	}

	.rm-servicegrid li a,
	.rm-servicegrid li span {
		font-size: 15px;
	}
}

/* The source photo has the old service list baked into it, which ghosted
   through behind the real chips. A flat gradient in the same blue family
   keeps the look without the double image. */
.rm-servicegrid {
	background-image: none;
	background: linear-gradient(135deg, #eaf6fc 0%, #d8edf8 55%, #cbe6f5 100%);
}

.rm-servicegrid::before {
	display: none;
}

/* the leading cell of a group header row sits over the black title bar */
.rm-rate table thead.rm-rate__group th.rm-group-blank,
#main .rm-rate table thead.rm-rate__group th.rm-group-blank {
	background: #231f20;
	border: 0;
}

/* a full-width product photograph sitting under a rate card's table */
.rm-rate__photo {
	display: block;
	width: 100%;
	background: #fff;
	padding: 14px;
}

.rm-rate__photo img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 4px;
	box-shadow: none;
}

/* ==========================================================================
   3D tour price pills - replaces prices.png
   ========================================================================== */

.rm-3d {
	max-width: 900px;
	margin: 0 auto 34px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.rm-3d__panel {
	flex: 1 1 380px;
	min-width: 0;
}

#main .rm-3d__panel h2 {
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 38px !important;
	line-height: 1 !important;
	color: #231f20 !important;
	background: none !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	border: 0 !important;
	text-transform: uppercase !important;
	text-align: left !important;
}

#main .rm-3d__panel h2 b {
	color: #0099d9;
	font-weight: 700;
}

.rm-3d__pills {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.rm-3d__pill {
	flex: 1 1 150px;
	min-width: 0;
	border-radius: 18px 18px 18px 4px;
	padding: 12px 14px 16px;
	text-align: center;
	color: #fff;
}

.rm-3d__pill--condo { background: #0099d9; }
.rm-3d__pill--house { background: #e70072; }

.rm-3d__pill .rm-3d__type {
	display: block;
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 27px;
	line-height: 1.05;
	color: #fff;
}

.rm-3d__pill .rm-3d__limit {
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #fff;
	padding-bottom: 6px;
	border-bottom: 2px solid rgba(255, 255, 255, .9);
	margin-bottom: 6px;
}

.rm-3d__pill .rm-3d__amount {
	display: block;
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 42px;
	line-height: 1;
	color: #fff;
}

.rm-3d__extras {
	background: #eaeaea;
	border-radius: 4px 4px 18px 18px;
	padding: 14px 16px 12px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}

.rm-3d__extras ul {
	list-style: none;
	margin: 0 0 6px;
	padding: 0;
}

.rm-3d__extras li {
	margin: 0 0 3px;
	font-size: 17px;
	color: #58595b;
}

.rm-3d__extras li strong {
	color: #414042;
	font-weight: 700;
}

.rm-3d__extras small {
	display: block;
	font-size: 12px;
	color: #808285;
}

.rm-3d__media {
	flex: 1 1 320px;
	min-width: 0;
}

.rm-3d__media img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	box-shadow: none;
}

/* ==========================================================================
   Just Listed / Sold postcards - replaces Listed-Sold-Postcards-2020.jpg
   ========================================================================== */

.rm-postcards {
	max-width: 900px;
	margin: 0 auto 34px;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
	padding: 20px 22px 24px;
}

#main .rm-postcards h2 {
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 36px !important;
	line-height: 1.05 !important;
	color: #f03139 !important;
	background: none !important;
	text-align: center !important;
	text-transform: uppercase !important;
	margin: 0 0 4px !important;
	padding: 0 !important;
	border: 0 !important;
}

.rm-postcards__sub {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #231f20;
	margin: 0 0 4px;
}

.rm-postcards__sub strong {
	display: block;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 17px;
}

.rm-postcards__meta {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	margin: 14px 0 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #231f20;
}

.rm-postcards__meta div {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 260px;
}

.rm-postcards__meta img {
	width: 46px;
	height: auto;
	margin: 0;
	border: 0;
	box-shadow: none;
	flex: none;
}

.rm-postcards__warn::before {
	content: "!";
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #f7941d;
	color: #fff;
	font-weight: 700;
	font-size: 17px;
	line-height: 26px;
	text-align: center;
}

.rm-postcards__cols {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	align-items: flex-start;
}

.rm-postcards__callout {
	flex: 1 1 190px;
	min-width: 0;
}

.rm-postcards__callout p {
	background: #ff6400;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
	text-align: center;
	padding: 12px 14px;
	margin: 0;
	border-radius: 3px;
}

.rm-postcards__callout p u {
	text-decoration: underline;
}

.rm-postcards__callout img {
	display: block;
	width: 100%;
	max-width: 220px;
	height: auto;
	margin: 10px auto 0;
	border: 0;
	box-shadow: none;
}

.rm-postcards__size {
	flex: 1 1 210px;
	min-width: 0;
}

.rm-postcards__size h3 {
	border-radius: 16px 16px 4px 4px;
	color: #fff;
	text-align: center;
	padding: 10px 8px 12px;
	margin: 0;
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	line-height: 1.1;
}

#main .rm-postcards__size h3 {
	color: #fff !important;
	background: none;
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
	font-weight: 700 !important;
	margin: 0 !important;
	padding: 10px 8px 12px !important;
	border: 0 !important;
	text-align: center !important;
	text-transform: none !important;
	font-size: 22px !important;
}

#main .rm-postcards__size--blue h3  { background: #3e4095 !important; }
#main .rm-postcards__size--green h3 { background: #538c19 !important; }

.rm-postcards__size h3 span {
	display: block;
	font-size: 27px;
	border-top: 2px solid rgba(255, 255, 255, .9);
	margin-top: 5px;
	padding-top: 5px;
}

.rm-postcards__size table {
	width: 100%;
	border-collapse: collapse;
	background: #ebebeb;
	border-radius: 0 0 16px 16px;
	overflow: hidden;
	font-family: Arial, Helvetica, sans-serif;
}

.rm-postcards__size td,
#main .rm-postcards__size table th {
	background: transparent;
	border: 0;
	border-bottom: 1px dashed #c9c9c9;
	padding: 7px 12px;
	font-size: 16px;
	color: #6d6e71;
	text-align: left;
	font-weight: 400;
}

.rm-postcards__size td.rm-postcards__ea {
	text-align: right;
	font-weight: 700;
	font-size: 20px;
	color: #414042;
	white-space: nowrap;
}

.rm-postcards__size tr:last-child td,
#main .rm-postcards__size tr:last-child th {
	border-bottom: 0;
}

.rm-postcards__samples {
	flex: 0 1 150px;
	min-width: 0;
}

.rm-postcards__samples img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	box-shadow: none;
}

@media (max-width: 780px) {
	#main .rm-3d__panel h2 { font-size: 28px !important; }
	.rm-3d__pill .rm-3d__amount { font-size: 34px; }
	#main .rm-postcards h2 { font-size: 25px !important; }
	.rm-postcards__samples { display: none; }
}

/* ==========================================================================
   Real estate signs page: note bars, the "NEW / best value" flag, and a
   description column beside the product photography.
   ========================================================================== */

.rm-note-bar {
	max-width: 1030px;
	margin: 0 auto 26px;
	background: #fff;
	border: 1px solid #e4e4e6;
	border-radius: 6px;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .12);
	padding: 12px 20px;
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: #231f20;
	text-align: center;
	justify-content: center;
}

.rm-note-bar::before {
	content: "";
	flex: none;
	width: 22px;
	height: 24px;
	background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26' fill='%23ed1c24'%3E%3Cpath d='M12 0a2 2 0 0 1 2 2v.6a8 8 0 0 1 6 7.7v5.3l2 3.4v1.5H2v-1.5l2-3.4v-5.3a8 8 0 0 1 6-7.7V2a2 2 0 0 1 2-2zm0 26a3.5 3.5 0 0 1-3.4-2.8h6.8A3.5 3.5 0 0 1 12 26z'/%3E%3C/svg%3E");
}

.rm-note-bar p {
	margin: 0;
	max-width: none;
}

/* photo strip across the top of a rate card */
.rm-rate__photo--top {
	padding: 0;
}

.rm-rate__photo--top img {
	border-radius: 0;
}

/* "NEW ... Best Value" flag above a card */
.rm-flag {
	max-width: 1000px;
	margin: 26px auto 0;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 0;
}

.rm-flag__new {
	flex: none;
	background: #e01b22;
	color: #fff;
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
	padding: 12px 24px;
	border-radius: 8px 0 0 8px;
	display: flex;
	align-items: center;
}

.rm-flag__value {
	flex: 1 1 200px;
	min-width: 0;
	background: linear-gradient(180deg, #fde14a 0%, #f6c11c 55%, #efae0d 100%);
	color: #231f20;
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.1;
	padding: 12px 18px;
	border-radius: 0 8px 8px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
}

.rm-flag__value em {
	font-style: normal;
	color: #c8102e;
}

/* description column that sits beside sandwich board photography */
.rm-rate__desc {
	flex: 1 1 260px;
	min-width: 0;
	padding: 18px 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #231f20;
	background: #fff;
	display: flex;
	align-items: center;
}

.rm-rate__desc p {
	margin: 0;
	max-width: none;
}

.rm-rate__photos {
	flex: 2 1 420px;
	min-width: 0;
}

.rm-rate__photos img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	box-shadow: none;
}

@media (max-width: 780px) {
	.rm-flag__new { font-size: 22px; padding: 9px 16px; }
	.rm-flag__value { font-size: 18px; padding: 9px 12px; }
	.rm-note-bar { font-size: 14px; }
}

/* injected page title for pages whose content carried no <h1> */
#main .rm-page-title,
.rm-page-title {
	font-family: "PT Sans", Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 1.2;
	color: #333;
	background: none;
	text-align: center;
	margin: 0 0 22px;
	padding: 0;
	border: 0;
}

@media (max-width: 780px) {
	#main .rm-page-title,
	.rm-page-title { font-size: 24px; }
}

/* ---------------------------------------------------------------------------
   Home page service tiles.

   The five thumbnails on the home page had their caption baked into the JPEG
   as a coloured bar with white type, so the words "Virtual Tours", "HD Video
   Tours", "Volume Print", "Premium Signs" and "Business Cards" were invisible
   to search engines and to anything reading the page as text. The bar is now
   cropped off the artwork (the images are 250x157 instead of 250x200) and
   rebuilt here as a real caption. Colours and metrics are sampled from the
   original files: bar height 43px, cap height 19px, text baseline 13px below
   the top of the bar.
   --------------------------------------------------------------------------- */
.rm-tile {
	display: block;
	max-width: 250px;
	margin: 0 auto;
	text-decoration: none;
	border: 0;
	box-shadow: none;
}

.rm-tile img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.rm-tile__label {
	display: block;
	padding: 13px 6px 10px;
	background: #fe0000;
	color: #fff;
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.rm-tile--red .rm-tile__label    { background: #fe0000; }
.rm-tile--blue .rm-tile__label   { background: #4e93bc; }
.rm-tile--orange .rm-tile__label { background: #ea923b; }
.rm-tile--pink .rm-tile__label   { background: #e63e93; }

.rm-tile:hover img,
.rm-tile:focus img {
	opacity: 0.92;
}

.rm-tile:hover .rm-tile__label,
.rm-tile:focus .rm-tile__label {
	filter: brightness(1.08);
}

/* The theme colours every link inside #main, which would cascade into the
   caption. A rule set directly on the span beats that inheritance, but the
   theme also has blanket !important colours on .post-content descendants. */
#main .rm-tile .rm-tile__label,
.post-content .rm-tile .rm-tile__label {
	color: #fff !important;
	text-decoration: none !important;
}

@media (max-width: 360px) {
	.rm-tile__label {
		font-size: 23px;
		padding: 11px 4px 9px;
		line-height: 17px;
	}
}

/* The caption is sized for a 250px tile. Where container queries are supported
   it tracks the tile width instead, so the type shrinks with the artwork when
   the three-column row collapses on a narrow screen. 11.2cqw == 28px at 250px. */
@supports (container-type: inline-size) {
	.rm-tile {
		container-type: inline-size;
	}

	.rm-tile__label {
		font-size: 11.2cqw;
		line-height: 8cqw;
		padding: 5.2cqw 2.4cqw 4cqw;
	}
}

/* ---------------------------------------------------------------------------
   Virtual staging poster (/virtual-staging/).

   Was a single 446x552 JPEG carrying the price, the turnaround and the whole
   feature list as pixels. The four photographs are now separate files and
   everything else is markup. Geometry is sampled from the original artwork and
   expressed in --u, one per cent of the poster width, so the whole thing scales
   as one piece: 1u = 4.46px at the artwork's native size.
   --------------------------------------------------------------------------- */
.rm-vsposter {
	--u: 4.46px;
	--vs-red: #ec3237;
	--vs-ink: #434343;
	--vs-panel: #4d4d4d;
	max-width: 446px;
	margin: 0 auto;
	/* --u is 1cqw, which on the container element itself resolves against an
	   outer container (or the viewport), not against this box. Percentage
	   padding is relative to this element's own width, so it scales correctly. */
	padding-bottom: 1.79%;
	color: var(--vs-ink);
	font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 1;
	text-align: left;
}

@supports (container-type: inline-size) {
	.rm-vsposter {
		container-type: inline-size;
		--u: 1cqw;
	}
}

/* --- the four photographs ------------------------------------------------ */
.rm-vsposter__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(1.12 * var(--u)) calc(0.9 * var(--u));
}

.rm-vsposter__shot {
	position: relative;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.rm-vsposter__shot img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.rm-vsposter__shot figcaption {
	position: absolute;
	top: calc(0.7 * var(--u));
	right: calc(1.8 * var(--u));
	color: #fff;
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: calc(3.2 * var(--u));
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: calc(0.02 * var(--u));
	text-transform: uppercase;
	white-space: nowrap;
}

/* The lower pair are shot against a white ceiling, so the label flips to ink. */
.rm-vsposter__shot--ink figcaption {
	top: calc(1.3 * var(--u));
	color: #2f2f2f;
}

/* --- red band and the Virtual Staging plaque ----------------------------- */
.rm-vsposter__band {
	position: relative;
	height: calc(16.14 * var(--u));
	background: var(--vs-red);
}

.rm-vsposter__plaque {
	position: absolute;
	top: calc(-4.48 * var(--u));
	left: 50%;
	width: calc(46.19 * var(--u));
	height: calc(15.92 * var(--u));
	box-sizing: border-box;
	margin: 0;
	padding: calc(1.4 * var(--u)) 0 0;
	transform: translateX(-50%);
	background: var(--vs-panel);
	border: calc(0.45 * var(--u)) solid #fff;
	color: #fff;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: calc(6.4 * var(--u));
	font-weight: 500;
	line-height: calc(6.5 * var(--u));
	letter-spacing: calc(0.42 * var(--u));
	text-align: center;
	text-transform: uppercase;
}

.rm-vsposter__plaque span {
	display: block;
}

/* --- the price panel ----------------------------------------------------- */
.rm-vsposter__price {
	position: relative;
	z-index: 2;
	width: calc(61.88 * var(--u));
	height: calc(10.09 * var(--u));
	box-sizing: border-box;
	margin: calc(-2.47 * var(--u)) auto 0;
	padding-top: calc(1.1 * var(--u));
	background: #fff;
	border: 1px solid var(--vs-red);
	color: #2f2f2f;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: calc(8.5 * var(--u));
	font-weight: 500;
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
	line-height: 1;
	letter-spacing: calc(0.1 * var(--u));
	text-align: center;
	text-transform: uppercase;
}

/* --- the feature checklist ----------------------------------------------- */
.rm-vsposter__list {
	margin: calc(3.6 * var(--u)) 0 0;
	padding: 0;
	list-style: none;
	font-size: calc(3.76 * var(--u));
	line-height: calc(5.6 * var(--u));
	text-transform: uppercase;
}

.rm-vsposter__list > li {
	position: relative;
	margin: 0;
	padding-left: calc(9.2 * var(--u));
	list-style: none;
}

.rm-vsposter__list > li::before,
.rm-vsposter__list > li::after {
	content: "";
	position: absolute;
	left: calc(2.7 * var(--u));
}

/* the empty grey square */
.rm-vsposter__list > li::before {
	top: 0;
	width: calc(4.04 * var(--u));
	height: calc(4.04 * var(--u));
	box-sizing: border-box;
	border: 1px solid #8b8b8b;
}

/* The red tick is drawn from two borders on a rotated box so its long arm
   overshoots the top-right corner of the square, as it does in the artwork. */
.rm-vsposter__list > li::after {
	top: calc(-1.35 * var(--u));
	left: calc(3.6 * var(--u));
	width: calc(2.3 * var(--u));
	height: calc(4.7 * var(--u));
	box-sizing: border-box;
	border: solid var(--vs-red);
	border-width: 0 calc(0.9 * var(--u)) calc(0.9 * var(--u)) 0;
	transform: rotate(25deg);
}

/* the price comparison sits under item two with no tick of its own */
.rm-vsposter__vs {
	display: block;
	color: var(--vs-ink);
	text-transform: none;
}

.rm-vsposter__vs b {
	color: var(--vs-red);
	font-weight: 700;
}

.rm-vsposter__vs sup {
	font-size: 0.68em;
	top: -0.45em;
	vertical-align: baseline;
	position: relative;
}

/* The theme paints every paragraph and list item inside .post-content, and
   colours h2 with !important. Keep the poster's own palette. */
#main .rm-vsposter,
#main .rm-vsposter p,
#main .rm-vsposter li,
.post-content .rm-vsposter,
.post-content .rm-vsposter p,
.post-content .rm-vsposter li {
	color: var(--vs-ink);
}

#main .rm-vsposter .rm-vsposter__list,
.post-content .rm-vsposter .rm-vsposter__list {
	margin: calc(3.6 * var(--u)) 0 0 !important;
	padding: 0 !important;
}

#main .rm-vsposter .rm-vsposter__price,
.post-content .rm-vsposter .rm-vsposter__price {
	margin: calc(-2.47 * var(--u)) auto 0 !important;
	padding: calc(1.1 * var(--u)) 0 0 !important;
}

#main .rm-vsposter .rm-vsposter__plaque,
.post-content .rm-vsposter .rm-vsposter__plaque {
	color: #fff !important;
}

#main .rm-vsposter .rm-vsposter__shot figcaption,
.post-content .rm-vsposter .rm-vsposter__shot figcaption {
	color: #fff;
}

#main .rm-vsposter .rm-vsposter__shot--ink figcaption,
.post-content .rm-vsposter .rm-vsposter__shot--ink figcaption {
	color: #2f2f2f;
}

/* ---------------------------------------------------------------------------
   Contact page.

   Replaces a stack of bare <span> tags with inline font sizes. Two cards side
   by side (reach us / when we are open), then wayfinding: the annotated aerial
   with the entrance callouts written out as text, and the interactive map.
   --------------------------------------------------------------------------- */
.rm-contact {
	--c-ink: #231f20;
	--c-red: #ed1c24;
	--c-rule: #e2e2e4;
	--c-zebra: #f7f7f8;
	--c-muted: #6b6b70;
	max-width: 980px;
	margin: 0 auto;
	text-align: left;
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.rm-contact__lead {
	margin: 0 0 30px;
	font-size: 17px;
	line-height: 1.6;
	color: #333;
}

.rm-contact__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	margin-bottom: 36px;
}

.rm-card {
	border: 1px solid var(--c-rule);
	border-top: 4px solid var(--c-red);
	background: #fff;
	padding: 24px 26px 26px;
}

.rm-card__title {
	margin: 0 0 18px;
	padding: 0;
	font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* --- labelled contact rows ---------------------------------------------- */
.rm-deflist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rm-deflist > li {
	position: relative;
	margin: 0;
	padding: 12px 0 12px 38px;
	border-top: 1px solid var(--c-rule);
	list-style: none;
	line-height: 1.45;
}

.rm-deflist > li:first-child {
	border-top: 0;
	padding-top: 0;
}

.rm-deflist > li:first-child::before {
	top: 2px;
}

.rm-deflist__label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.rm-deflist__value,
.rm-deflist__value a {
	font-size: 19px;
	font-weight: 500;
	color: var(--c-ink);
	text-decoration: none;
}

.rm-deflist__value a:hover,
.rm-deflist__value a:focus {
	color: var(--c-red);
	text-decoration: underline;
}

/* Icons are CSS backgrounds because KSES strips inline <svg> from post
   content on save, the same way it strips <iframe>. */
.rm-deflist > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
}

.rm-icon--phone::before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ed1c24' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
}

.rm-icon--tollfree::before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ed1c24' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M2.5 12h19M12 2.5a15 15 0 0 1 0 19 15 15 0 0 1 0-19z'/%3E%3C/svg%3E");
}

.rm-icon--email::before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ed1c24' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2'/%3E%3Cpath d='m3 6 9 6.5L21 6'/%3E%3C/svg%3E");
}

.rm-icon--pin::before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ed1c24' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* --- opening hours ------------------------------------------------------- */
.rm-hours {
	width: 100%;
	margin: 0 0 16px;
	border-collapse: collapse;
	font-size: 17px;
}

.rm-hours th,
.rm-hours td {
	padding: 11px 0;
	border: 0;
	border-top: 1px solid var(--c-rule);
	background: none;
	text-align: left;
	font-weight: 400;
	color: var(--c-ink);
}

.rm-hours tr:first-child th,
.rm-hours tr:first-child td {
	border-top: 0;
}

.rm-hours th {
	width: 45%;
	font-weight: 700;
}

.rm-hours td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.rm-hours .rm-hours__closed {
	color: var(--c-muted);
}

.rm-hours__note {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-muted);
}

/* --- wayfinding ---------------------------------------------------------- */
.rm-contact__wayfind {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin-bottom: 36px;
}

.rm-contact__wayfind img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border: 1px solid var(--c-rule);
}

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

.rm-doors > li {
	margin: 0 0 14px;
	padding: 14px 16px;
	border-left: 4px solid var(--c-red);
	background: var(--c-zebra);
	list-style: none;
	font-size: 16px;
	line-height: 1.5;
}

.rm-doors strong {
	display: block;
	font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@media (max-width: 700px) {
	.rm-contact__wayfind {
		grid-template-columns: 1fr;
	}
}

/* The theme colours headings and paragraphs inside the content column with
   blanket rules, some of them !important. Keep the card palette. */
#main .rm-contact .rm-card__title,
.post-content .rm-contact .rm-card__title {
	color: var(--c-ink) !important;
}

#main .rm-contact p,
#main .rm-contact li,
#main .rm-contact th,
#main .rm-contact td,
.post-content .rm-contact p,
.post-content .rm-contact li,
.post-content .rm-contact th,
.post-content .rm-contact td {
	color: var(--c-ink);
}

#main .rm-contact .rm-deflist__label,
#main .rm-contact .rm-hours__note,
#main .rm-contact .rm-hours__closed,
.post-content .rm-contact .rm-deflist__label,
.post-content .rm-contact .rm-hours__note,
.post-content .rm-contact .rm-hours__closed {
	color: var(--c-muted);
}

/* Action inside the Reach us card. Sits at the foot of the card so the two
   cards in the row finish level. */
.rm-card {
	display: flex;
	flex-direction: column;
}

.rm-card__cta {
	margin: 22px 0 0 !important;
	padding-top: 20px;
	border-top: 1px solid var(--c-rule);
}

.rm-card__cta a {
	display: block;
	padding: 13px 20px;
	background: var(--c-red);
	border-radius: 4px;
	color: #fff !important;
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

.rm-card__cta a:hover,
.rm-card__cta a:focus {
	background: #c8102e;
}

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

.rm-card .rm-deflist,
.rm-card .rm-hours {
	flex: 1 0 auto;
}

/* The theme paints every link in the content column #333 with no underline, so
   an inline link is indistinguishable from the sentence around it. Give the
   copy blocks real link affordance. */
#main .rm-rate-copy a,
#main .rm-contact__lead a,
#main .rm-doors a,
.post-content .rm-rate-copy a,
.post-content .rm-contact__lead a,
.post-content .rm-doors a {
	color: #c8102e;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

#main .rm-rate-copy a:hover,
#main .rm-contact__lead a:hover,
#main .rm-rate-copy a:focus,
#main .rm-contact__lead a:focus,
.post-content .rm-rate-copy a:hover,
.post-content .rm-contact__lead a:hover {
	color: #ed1c24;
	text-decoration-thickness: 2px;
}

/* ...but not the buttons, which are already unmistakable. */
#main .rm-rate-copy .rm-rate-cta a,
#main .rm-contact .rm-card__cta a,
.post-content .rm-contact .rm-card__cta a {
	text-decoration: none;
}

/* Directions action under the wayfinding notes. */
.rm-card__cta--plain {
	margin: 4px 0 0 !important;
	padding-top: 0;
	border-top: 0;
}

#main .rm-contact .rm-card__cta--plain a,
.post-content .rm-contact .rm-card__cta--plain a {
	display: inline-block;
	padding: 12px 26px;
	text-decoration: none;
}