/* ==========================================================================
   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 {
	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; }
}