/* ==========================================================================
   Riddle Brothers - Emergency / Post-Storm page   (/emergency-roof-repair/)
   Source: Figma "Riddle Brothers New Page WIREFRAMES" > Emergency / Post-Storm.

   The page is native Elementor (containers, heading, text-editor, button,
   image, accordion) so every line of copy and every photo is edited there.
   This sheet only carries the look, is loaded on this page alone, and every
   class is rb-em prefixed.

   Elementor notes that shaped the selectors:
   - containers take their padding and gap from --padding-* / --row-gap, which
     every .e-con re-declares, so nested containers are reset once below and
     each component then states its own;
   - classes land on the element wrapper, so type rules reach through to
     .elementor-heading-title / .elementor-button.
   ========================================================================== */

.rb-em {
	--em-navy: #061F35;
	--em-red: #C71310;
	--em-red-dk: #A30F0D;
	--em-bone: #F9F9F9;
	--em-ink: #393939;
	--em-body: #333333;
	--em-slate: #475467;
	--em-mute: #667085;
	--em-line: #E4E8EE;
	--em-line-2: #D0D5DD;
	--em-on-navy: #C5D2DC;
	--em-on-navy-mute: #9DB0C0;
	--em-pad: 96px;
	--em-gutter: 24px;
	font-family: "Montserrat", sans-serif;
}

/* ---- section shell ------------------------------------------------------ */

.rb-em.e-con {
	--content-width: 1200px;
	--padding-top: var(--em-pad);
	--padding-bottom: var(--em-pad);
	--padding-left: var(--em-gutter);
	--padding-right: var(--em-gutter);
	--row-gap: 22px;
	--column-gap: 22px;
}

.rb-em .e-con {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
}

.rb-em .elementor-widget-text-editor p { margin: 0; }
.rb-em .elementor-widget-text-editor p + p { margin-top: 12px; }
.rb-em .elementor-heading-title { margin: 0; letter-spacing: 0; font-family: inherit; }

.rb-em a[href^="tel:"] { color: inherit; text-decoration: none; white-space: nowrap; }
.rb-em a[href^="tel:"]:hover { text-decoration: underline; }

/* ---- type --------------------------------------------------------------- */

.rb-em .rb-em-eyebrow .elementor-heading-title,
.rb-em .rb-em-label .elementor-heading-title {
	font-weight: 700;
	font-size: 12px;
	line-height: 15px;
	text-transform: uppercase;
	color: var(--em-red);
}
.rb-em .rb-em-eyebrow .elementor-heading-title { letter-spacing: 1.8px; }
.rb-em .rb-em-label--mute .elementor-heading-title { color: var(--em-mute); }
.rb-em .rb-em-label--xs .elementor-heading-title { font-size: 10px; line-height: 12px; }

.rb-em .rb-em-h1 .elementor-heading-title {
	max-width: 860px;
	font-weight: 700;
	font-size: 58px;
	line-height: 63px;
	color: #FFFFFF;
}
.rb-em .rb-em-h2 .elementor-heading-title {
	max-width: 960px;
	font-weight: 700;
	font-size: 40px;
	line-height: 48px;
	color: var(--em-ink);
}
.rb-em .rb-em-h2--900 .elementor-heading-title { max-width: 900px; }
.rb-em .rb-em-h2--full .elementor-heading-title { max-width: none; }
.rb-em .rb-em-h3 .elementor-heading-title {
	font-weight: 700;
	font-size: 27px;
	line-height: 34px;
	color: var(--em-navy);
}
.rb-em .rb-em-h4 .elementor-heading-title {
	font-weight: 700;
	font-size: 17px;
	line-height: 24px;
	color: var(--em-ink);
}
.rb-em .rb-em-num .elementor-heading-title {
	font-weight: 800;
	font-size: 30px;
	line-height: 34px;
	color: var(--em-red);
}

/* Elementor pins max-width:100% on widget wrappers, so measure limits go on
   the paragraph inside, never on the wrapper. */
.rb-em .rb-em-lead p { max-width: 840px; }
.rb-em .rb-em-lead {
	font-weight: 400;
	font-size: 18px;
	line-height: 31px;
	color: var(--em-body);
}
.rb-em .rb-em-copy,
.rb-em .rb-em-note,
.rb-em .rb-em-bullets,
.rb-em .rb-em-quote {
	font-weight: 400;
	font-size: 15.5px;
	line-height: 26px;
	color: var(--em-slate);
}
.rb-em .rb-em-note { color: var(--em-mute); }
.rb-em .rb-em-copy--ink { color: var(--em-body); }
.rb-em .rb-em-small {
	font-weight: 400;
	font-size: 14.5px;
	line-height: 23px;
	color: var(--em-mute);
}

/* ---- buttons ------------------------------------------------------------ */

.rb-em .rb-em-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 51px;
	padding: 14px 30px;
	border: 1.5px solid var(--em-red);
	border-radius: 6px;
	background-color: var(--em-red);
	color: #FFFFFF;
	fill: #FFFFFF;
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	line-height: 18px;
	letter-spacing: 0;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.rb-em .rb-em-btn .elementor-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
.rb-em .rb-em-btn--ghost-light .elementor-button {
	border-color: #FFFFFF;
	background-color: transparent;
	color: #FFFFFF;
}
.rb-em .rb-em-btn--ghost-red .elementor-button {
	background-color: transparent;
	color: var(--em-red);
}
.rb-em .rb-em-btn--white .elementor-button {
	border-color: #FFFFFF;
	background-color: #FFFFFF;
	color: var(--em-red);
}
@media (hover: hover) {
	.rb-em .rb-em-btn .elementor-button:hover {
		border-color: var(--em-red-dk);
		background-color: var(--em-red-dk);
		color: #FFFFFF;
	}
	.rb-em .rb-em-btn--ghost-light .elementor-button:hover {
		border-color: #FFFFFF;
		background-color: #FFFFFF;
		color: var(--em-navy);
	}
	.rb-em .rb-em-btn--ghost-red .elementor-button:hover {
		border-color: var(--em-red);
		background-color: var(--em-red);
		color: #FFFFFF;
	}
	.rb-em .rb-em-btn--white .elementor-button:hover {
		border-color: var(--em-bone);
		background-color: var(--em-bone);
		color: var(--em-red-dk);
	}
	.rb-em.rb-em-cta .rb-em-btn--ghost-light .elementor-button:hover { color: var(--em-red); }
}

.rb-em .rb-em-ctas.e-con {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}
.rb-em .rb-em-ctas > .elementor-widget { width: auto; flex: 0 0 auto; }

/* ---- bullets ------------------------------------------------------------ */

.rb-em .rb-em-bullets ul {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rb-em .rb-em-bullets li { position: relative; margin: 0; padding-left: 18px; }
.rb-em .rb-em-bullets li::before {
	content: "\2022";
	position: absolute;
	top: 0;
	left: 0;
	font-weight: 700;
	color: var(--em-red);
}
.rb-em .rb-em-bullets--3col ul {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 24px;
}

/* ---- 02 hero ------------------------------------------------------------ */

.rb-em-hero .rb-em-callline .elementor-heading-title {
	max-width: 860px;
	font-weight: 700;
	font-size: 24px;
	line-height: 30px;
	color: var(--em-red);
}
.rb-em-hero .rb-em-lead { color: var(--em-on-navy); }
.rb-em-hero .rb-em-lead p { max-width: 780px; }
.rb-em .rb-em-proof {
	font-weight: 600;
	font-size: 14px;
	line-height: 17px;
	color: var(--em-on-navy-mute);
}
.rb-em .rb-em-proof ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rb-em .rb-em-proof li { margin: 0; }
.rb-em .rb-em-proof li + li::before { content: "\00B7"; margin: 0 13px; }

/* ---- photo bands -------------------------------------------------------- */

.rb-em.rb-em-band.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 0px;
}
.rb-em.rb-em-band .elementor-widget-image { width: 100%; line-height: 0; }
.rb-em.rb-em-band img {
	display: block;
	width: 100%;
	height: 272px;
	object-fit: cover;
	object-position: 50% 50%;
}
.rb-em.rb-em-band--team img { object-position: 50% 41%; }
.rb-em.rb-em-band--brown img { object-position: 50% 25%; }

/* ---- 03 two paths ------------------------------------------------------- */

.rb-em .rb-em-paths.e-con,
.rb-em .rb-em-cards.e-con {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	align-items: stretch;
}
.rb-em .rb-em-path.e-con {
	--padding-top: 34px;
	--padding-right: 34px;
	--padding-bottom: 34px;
	--padding-left: 34px;
	--row-gap: 16px;
	border: 1px solid var(--em-line);
	border-radius: 12px;
	background-color: #FFFFFF;
}
.rb-em .rb-em-path--urgent.e-con { border: 1.5px solid var(--em-red); }
.rb-em .rb-em-path > .rb-em-btn { width: auto; align-self: flex-start; }

/* ---- 04 steps + "have these handy" -------------------------------------- */

.rb-em .rb-em-steps.e-con {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}
.rb-em .rb-em-step.e-con {
	--padding-top: 28px;
	--padding-right: 26px;
	--padding-bottom: 28px;
	--padding-left: 26px;
	--row-gap: 12px;
	border: 1px solid var(--em-line);
	border-radius: 10px;
	background-color: #FFFFFF;
}
.rb-em .rb-em-handy.e-con {
	--padding-top: 30px;
	--padding-right: 34px;
	--padding-bottom: 30px;
	--padding-left: 34px;
	--row-gap: 18px;
	border: 1px solid var(--em-line);
	border-radius: 12px;
	background-color: #FFFFFF;
}

/* ---- 05 actions + TDI note ---------------------------------------------- */

.rb-em .rb-em-actions.e-con {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 48px;
	align-items: start;
}
.rb-em .rb-em-action.e-con {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 6px 20px;
	align-items: start;
}
.rb-em .rb-em-action > .rb-em-num { grid-column: 1; grid-row: 1 / span 2; }
.rb-em .rb-em-action > .rb-em-h4,
.rb-em .rb-em-action > .rb-em-note { grid-column: 2; }

.rb-em .rb-em-callout.e-con {
	--padding-top: 22px;
	--padding-right: 26px;
	--padding-bottom: 22px;
	--padding-left: 26px;
	--row-gap: 8px;
	border: 1px solid var(--em-line);
	border-radius: 10px;
	background-color: var(--em-bone);
}

/* ---- 06 reviews (navy) -------------------------------------------------- */

.rb-em-onnavy .rb-em-h2 .elementor-heading-title { color: #FFFFFF; }
.rb-em-onnavy .rb-em-lead { line-height: 25px; color: var(--em-on-navy); }
.rb-em-onnavy .rb-em-lead p { max-width: 900px; }
.rb-em .rb-em-reviews.e-con {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}
.rb-em .rb-em-review.e-con {
	--padding-top: 30px;
	--padding-right: 30px;
	--padding-bottom: 30px;
	--padding-left: 30px;
	--row-gap: 14px;
	border-radius: 12px;
	background-color: #FFFFFF;
}
.rb-em .rb-em-name .elementor-heading-title {
	font-weight: 700;
	font-size: 17px;
	line-height: 24px;
	color: var(--em-navy);
}
.rb-em-onnavy > .e-con-inner > .rb-em-btn { width: auto; align-self: flex-start; }

/* ---- 07 more than shingles ---------------------------------------------- */

.rb-em .rb-em-card.e-con {
	--padding-top: 34px;
	--padding-right: 34px;
	--padding-bottom: 34px;
	--padding-left: 34px;
	--row-gap: 12px;
	border: 1px solid var(--em-line);
	border-radius: 12px;
	background-color: var(--em-bone);
}

/* ---- 09 where we respond ------------------------------------------------ */

.rb-em-where .rb-em-lead p { max-width: 860px; }
.rb-em .rb-em-chips ul {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 762px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rb-em .rb-em-chips li {
	position: relative;
	margin: 0;
	padding: 11px 20px;
	border: 1px solid var(--em-line-2);
	border-radius: 999px;
	font-weight: 500;
	font-size: 15px;
	line-height: 18px;
	color: var(--em-ink);
	transition: border-color .18s ease, color .18s ease;
}
.rb-em .rb-em-chips li a { color: inherit; text-decoration: none; }
.rb-em .rb-em-chips li a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rb-em .rb-em-chips li a:focus-visible { outline: none; }
.rb-em .rb-em-chips li:has(a:focus-visible) { outline: 2px solid var(--em-navy); outline-offset: 2px; }
@media (hover: hover) {
	.rb-em .rb-em-chips li:has(a):hover { border-color: var(--em-red); color: var(--em-red); }
}

.rb-em .rb-em-trust.e-con {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}
.rb-em .rb-em-trust > .elementor-element { width: auto; flex: 0 0 auto; }
.rb-em .rb-em-stat.e-con {
	--width: auto;
	--padding-top: 18px;
	--padding-right: 26px;
	--padding-bottom: 18px;
	--padding-left: 26px;
	--row-gap: 2px;
	border: 1px solid var(--em-line);
	border-radius: 10px;
	background-color: var(--em-bone);
}
.rb-em .rb-em-stat-label .elementor-heading-title {
	font-weight: 500;
	font-size: 14px;
	line-height: 17px;
	color: var(--em-mute);
}
.rb-em .rb-em-trust .elementor-widget-image img {
	display: block;
	width: 135px;
	height: auto;
}

/* ---- 10 closing CTA (red) ----------------------------------------------- */

.rb-em.rb-em-cta.e-con {
	--padding-top: 88px;
	--padding-bottom: 88px;
	--row-gap: 24px;
}
.rb-em.rb-em-cta.e-con > .e-con-inner { align-items: center; text-align: center; }
.rb-em.rb-em-cta .rb-em-eyebrow .elementor-heading-title { color: #FFD9D8; }
.rb-em.rb-em-cta .rb-em-h2 .elementor-heading-title {
	max-width: 900px;
	font-size: 42px;
	line-height: 50px;
	color: #FFFFFF;
}
.rb-em.rb-em-cta .rb-em-lead { line-height: 30px; color: #FFE3E2; }
.rb-em.rb-em-cta .rb-em-lead p { max-width: 780px; margin-inline: auto; }
.rb-em.rb-em-cta .rb-em-ctas.e-con { justify-content: center; }

/* ---- 08 FAQ ------------------------------------------------------------- */

.rb-em .rb-em-faq .elementor-accordion .elementor-accordion-item {
	border: 0;
	border-bottom: 1px solid var(--em-line);
}
.rb-em .rb-em-faq .elementor-accordion .elementor-tab-title {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin: 0;
	padding: 24px 0;
	font-family: inherit;
	font-weight: 600;
	font-size: 17.5px;
	line-height: 26px;
	color: var(--em-ink);
}
.rb-em .rb-em-faq .elementor-accordion .elementor-tab-title.elementor-active { padding-bottom: 14px; }
.rb-em .rb-em-faq .elementor-accordion .elementor-accordion-title,
.rb-em .rb-em-faq .elementor-accordion .elementor-active .elementor-accordion-title {
	flex: 1 1 auto;
	color: var(--em-ink);
	text-decoration: none;
}
.rb-em .rb-em-faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-end;
	float: none;
	width: 16px;
	height: 26px;
	color: var(--em-red);
}
.rb-em .rb-em-faq .elementor-accordion .elementor-accordion-icon svg {
	width: 14px;
	height: 14px;
	fill: var(--em-red);
}
.rb-em .rb-em-faq .elementor-accordion .elementor-tab-content {
	max-width: 940px;
	padding: 0 0 24px;
	border: 0;
	font-family: inherit;
	font-weight: 400;
	font-size: 15.5px;
	line-height: 26px;
	color: var(--em-mute);
}
.rb-em .rb-em-faq .elementor-accordion .elementor-tab-content p { margin: 0; }
.rb-em .rb-em-faq .elementor-accordion .elementor-tab-title:focus-visible {
	outline: 2px solid var(--em-navy);
	outline-offset: 2px;
}

/* ---- sticky call bar (phones only) -------------------------------------- */

.rb-em.rb-em-callbar.e-con { display: none; }
body.elementor-editor-active .rb-em.rb-em-callbar.e-con {
	display: block;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}

/* ---- tablet ------------------------------------------------------------- */

@media (max-width: 1024px) {
	.rb-em { --em-pad: 72px; --em-gutter: 32px; }
	.rb-em .rb-em-h1 .elementor-heading-title { font-size: 46px; line-height: 52px; }
	.rb-em .rb-em-h2 .elementor-heading-title { font-size: 34px; line-height: 42px; }
	.rb-em.rb-em-cta .rb-em-h2 .elementor-heading-title { font-size: 36px; line-height: 44px; }
	.rb-em .rb-em-h3 .elementor-heading-title { font-size: 24px; line-height: 31px; }
	.rb-em .rb-em-steps.e-con { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rb-em .rb-em-reviews.e-con { grid-template-columns: minmax(0, 1fr); }
	.rb-em .rb-em-bullets--3col ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rb-em .rb-em-path.e-con,
	.rb-em .rb-em-card.e-con {
		--padding-top: 28px;
		--padding-right: 28px;
		--padding-bottom: 28px;
		--padding-left: 28px;
	}
	.rb-em .rb-em-actions.e-con { column-gap: 32px; }
	.rb-em.rb-em-band img { height: 240px; }
}

/* ---- phone -------------------------------------------------------------- */

@media (max-width: 767px) {
	.rb-em { --em-pad: 48px; --em-gutter: 20px; }
	.rb-em.e-con { --row-gap: 16px; }

	.rb-em.rb-em-hero.e-con { --padding-top: 36px; --padding-bottom: 40px; }
	.rb-em .rb-em-h1 .elementor-heading-title { font-size: 32px; line-height: 38px; }
	.rb-em-hero .rb-em-callline .elementor-heading-title { font-size: 18px; line-height: 24px; }
	.rb-em-hero .rb-em-callline a[href^="tel:"] { white-space: normal; }
	.rb-em .rb-em-lead,
	.rb-em.rb-em-cta .rb-em-lead,
	.rb-em-onnavy .rb-em-lead { font-size: 16px; line-height: 27px; }
	.rb-em .rb-em-proof { display: none; }

	.rb-em .rb-em-h2 .elementor-heading-title,
	.rb-em.rb-em-cta .rb-em-h2 .elementor-heading-title { font-size: 26px; line-height: 32px; }
	.rb-em .rb-em-h3 .elementor-heading-title { font-size: 21px; line-height: 28px; }

	.rb-em .rb-em-ctas.e-con { flex-direction: column; align-items: stretch; gap: 16px; }
	.rb-em .rb-em-ctas > .elementor-widget,
	.rb-em .rb-em-path > .rb-em-btn,
	.rb-em-onnavy > .e-con-inner > .rb-em-btn { width: 100%; align-self: stretch; }
	.rb-em .rb-em-btn .elementor-button { display: flex; width: 100%; padding: 14px 20px; }

	.rb-em .rb-em-paths.e-con,
	.rb-em .rb-em-cards.e-con,
	.rb-em .rb-em-actions.e-con { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.rb-em .rb-em-steps.e-con { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.rb-em .rb-em-bullets--3col ul { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.rb-em .rb-em-path.e-con,
	.rb-em .rb-em-card.e-con,
	.rb-em .rb-em-review.e-con,
	.rb-em .rb-em-handy.e-con,
	.rb-em .rb-em-step.e-con {
		--padding-top: 24px;
		--padding-right: 22px;
		--padding-bottom: 24px;
		--padding-left: 22px;
	}
	.rb-em .rb-em-callout.e-con { --padding-right: 20px; --padding-left: 20px; }
	.rb-em .rb-em-action.e-con { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
	.rb-em.rb-em-band img { height: 200px; }

	.rb-em .rb-em-chips ul { gap: 10px; }
	.rb-em .rb-em-chips li { padding: 10px 16px; }
	/* Two stat tiles share the first row, the three badges share the second. */
	.rb-em .rb-em-trust.e-con { gap: 12px; }
	.rb-em .rb-em-trust > .rb-em-stat { flex: 1 1 calc(50% - 6px); }
	.rb-em .rb-em-stat.e-con { --padding-right: 14px; --padding-left: 16px; }
	.rb-em .rb-em-stat-label .elementor-heading-title { font-size: 13px; }
	.rb-em .rb-em-trust .elementor-widget-image img { width: 100px; }

	.rb-em.rb-em-cta.e-con { --padding-top: 56px; --padding-bottom: 56px; --row-gap: 18px; }
	.rb-em .rb-em-faq .elementor-accordion .elementor-tab-title { padding: 20px 0; font-size: 16.5px; gap: 16px; }
	.rb-em .rb-em-faq .elementor-accordion .elementor-tab-content { padding-bottom: 20px; }

	/* The red call bar: pinned to the bottom at every scroll position. */
	.rb-em.rb-em-callbar.e-con {
		display: block;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 900;
		width: 100%;
		--padding-top: 0px;
		--padding-bottom: 0px;
		--padding-left: 0px;
		--padding-right: 0px;
		background-color: var(--em-red);
		box-shadow: 0 -6px 20px rgba(6, 31, 53, .22);
	}
	.rb-em.rb-em-callbar .elementor-widget-button { width: 100%; }
	.rb-em.rb-em-callbar .rb-em-btn .elementor-button {
		display: block;
		width: 100%;
		min-height: 0;
		padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
		border: 0;
		border-radius: 0;
		background-color: transparent;
		font-weight: 700;
		font-size: 16px;
		line-height: 20px;
		text-align: center;
	}
	body.rb-em-page { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
	body.elementor-editor-active .rb-em.rb-em-callbar.e-con { position: static; }
}

@media (prefers-reduced-motion: reduce) {
	.rb-em .rb-em-btn .elementor-button,
	.rb-em .rb-em-chips li { transition: none; }
}