/* ==========================================================================
   ANNEX — Roofing Service Pages
   Concept: THE ASSESSMENT · v1.0.0

   The page walks the reader's own roof. Red marks the things that depend on
   them — trade-offs, variables, stages — which is the one role red does not
   have anywhere else in the system.

   Everything is rooted on .rs, the class on <main>. A page without that class
   cannot be reached by a single rule in this file, so the five service pages
   still running on the legacy markup are untouched even where the stylesheet
   loads. Palette and typeface are the locked Design System v2.
   ========================================================================== */

.rs {
	--rs-navy:       var(--annex-navy, #062452);
	--rs-navy-deep:  var(--annex-navy-deep, #071B3D);
	--rs-red:        var(--annex-red, #E52B24);
	--rs-red-dark:   var(--annex-red-dark, #C9231E);
	--rs-white:      var(--annex-white, #FFFFFF);
	--rs-light:      var(--annex-light, #F6F8FA);
	--rs-text:       var(--annex-text, #0A2148);
	--rs-text-2:     var(--annex-text-secondary, #5F6F84);
	--rs-text-light: var(--annex-text-light, #B7C1D0);
	--rs-rule:       var(--annex-divider, #DCE3EA);

	--rs-max: 1280px;
	--rs-pad: clamp(18px, 4vw, 40px);
	--rs-gap: clamp(28px, 3.2vw, 56px);

	/* one vertical rhythm for the page, in three steps */
	--rs-s: clamp(15px, 1.7vw, 22px);
	--rs-m: clamp(24px, 2.6vw, 34px);
	--rs-l: clamp(42px, 4.4vw, 62px);

	display: block;
	background: var(--rs-white);
	color: var(--rs-text);
	font-family: "Inter Tight", var(--annex-font, system-ui), sans-serif;
}

.rs .rs-wrap {
	max-width: var(--rs-max);
	margin-inline: auto;
	padding-inline: var(--rs-pad);
}

.rs img { max-width: 100%; }

/* sections carry the rhythm; no component sets its own block padding */
.rs .rs-sec { padding-block: var(--rs-l); }
.rs .rs-sec--light { background: var(--rs-light); }
.rs .rs-sec--navy { background: var(--rs-navy); color: var(--rs-text-light); }

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

.rs .rs-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font-size: clamp(11px, .9vw, 12.5px);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rs-red);
}
/* a filled mark, not a rule: this page states, it does not annotate */
.rs .rs-kicker::before {
	content: "";
	width: 9px;
	height: 9px;
	background: var(--rs-red);
	flex: none;
}

.rs .rs-meta {
	margin: 0;
	font-size: clamp(11px, .9vw, 12.5px);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rs-text-2);
}

.rs .rs-h2 {
	margin: 0;
	font-size: clamp(27px, 3.1vw, 42px);
	line-height: 1.05;
	letter-spacing: -.03em;
	font-weight: 600;
	color: var(--rs-text);
	max-width: 22ch;
}
.rs .rs-lead {
	margin: var(--rs-s) 0 0;
	max-width: 62ch;
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.6;
	color: var(--rs-text-2);
}
.rs .rs-body {
	margin: 0;
	font-size: clamp(15.5px, 1.15vw, 16.5px);
	line-height: 1.62;
	color: var(--rs-text-2);
}

.rs .rs-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--rs-gap);
	flex-wrap: wrap;
	padding-bottom: var(--rs-s);
	border-bottom: 1px solid var(--rs-rule);
}

/* on navy the scale flips and nothing else changes */
.rs .rs-sec--navy .rs-h2 { color: var(--rs-white); }
.rs .rs-sec--navy .rs-lead { color: rgba(255, 255, 255, .72); }
.rs .rs-sec--navy .rs-body { color: rgba(255, 255, 255, .76); }
.rs .rs-sec--navy .rs-meta { color: rgba(255, 255, 255, .55); }
.rs .rs-sec--navy .rs-head { border-bottom-color: rgba(255, 255, 255, .18); }

/* ---- actions ----------------------------------------------------------- */

.rs .rs-btn {
	display: inline-block;
	padding: 17px 34px;
	background: var(--rs-red-dark);
	color: var(--rs-white);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}
.rs .rs-btn:hover { background: var(--rs-red); }

.rs .rs-phone {
	color: var(--rs-white);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--rs-red);
}
.rs .rs-phone--dark { color: var(--rs-text); }
.rs .rs-phone:hover { color: var(--rs-red); }

.rs a:focus-visible {
	outline: 3px solid var(--rs-red);
	outline-offset: 3px;
}

/* ==========================================================================
   1 — HERO
   ========================================================================== */

.rs .rs-hero {
	background: var(--rs-navy-deep);
	background-image: linear-gradient(165deg, var(--rs-navy) 0%, var(--rs-navy-deep) 70%);
	color: var(--rs-white);
	/* the theme's fixed header is already cleared by body{padding-top:var(--ph-h)} */
	padding-block: clamp(40px, 4.4vw, 64px) 0;
}
.rs .rs-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
	gap: var(--rs-gap);
	align-items: center;
	min-height: 460px;
}
.rs .rs-hero--nomedia .rs-hero__grid {
	grid-template-columns: minmax(0, 760px);
	min-height: 360px;
	padding-bottom: var(--rs-l);
}
.rs .rs-hero__copy { padding-block: var(--rs-m) var(--rs-l); }
.rs .rs-hero__h1 {
	margin: 0;
	font-size: clamp(34px, 4.4vw, 60px);
	line-height: 1.0;
	letter-spacing: -.035em;
	font-weight: 600;
	color: var(--rs-white);
	max-width: 15ch;
}
.rs .rs-hero__lead {
	margin: var(--rs-s) 0 0;
	max-width: 46ch;
	font-size: clamp(16px, 1.2vw, 17.5px);
	line-height: 1.58;
	color: rgba(255, 255, 255, .78);
}
.rs .rs-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 26px;
	margin-top: var(--rs-m);
}

/* the photograph runs off the right edge of the viewport */
.rs .rs-hero__media {
	margin: 0;
	align-self: stretch;
	line-height: 0;
	margin-right: min(0px, calc((var(--rs-max) - 2 * var(--rs-pad) - 100vw) / 2));
}
.rs .rs-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 460px;
	object-fit: cover;
	object-position: var(--rs-focus, 50% 50%);
}

/* ==========================================================================
   2 — COMPARISON: paired rows, the trade-off carried on its own band
   ========================================================================== */

.rs .rs-cmp__rows { margin-top: var(--rs-s); border-top: 1px solid var(--rs-rule); }
/*
 * Three columns, not two stacked halves: claim, what it means, what it costs
 * you. .rs-cmp__body is dissolved with display:contents so its two paragraphs
 * become grid items of the row — the markup is untouched, the row reads as one
 * comparative record and the section loses roughly a third of its height.
 */
.rs .rs-cmp__row {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 5.4fr) minmax(0, 3.4fr);
	gap: clamp(20px, 2.2vw, 36px);
	align-items: start;
	padding-block: clamp(20px, 2vw, 28px);
	border-bottom: 1px solid var(--rs-rule);
}
.rs .rs-cmp__body { display: contents; }
.rs .rs-cmp__t {
	margin: 0;
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.2;
	letter-spacing: -.025em;
	font-weight: 700;
	color: var(--rs-text);
}
.rs .rs-trade {
	margin: 0;
	padding: 13px 16px;
	background: var(--rs-light);
	border-left: 3px solid var(--rs-red);
	font-size: clamp(14.5px, 1.05vw, 15.5px);
	line-height: 1.5;
	color: var(--rs-text);
}
.rs .rs-trade b { color: var(--rs-red); font-weight: 600; }

.rs .rs-note {
	margin: var(--rs-m) 0 0;
	padding-top: 16px;
	border-top: 3px solid var(--rs-red);
	max-width: 74ch;
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.58;
	font-weight: 500;
	color: var(--rs-text);
}

/* ==========================================================================
   3 — SUITABILITY: statement beside the factors
   ========================================================================== */

.rs .rs-fit__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--rs-gap);
	align-items: start;
}
.rs .rs-fit__intro .rs-body { margin-top: var(--rs-s); max-width: 44ch; }
.rs .rs-fit__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--rs-gap);
}
.rs .rs-fit__item {
	border-top: 1px solid var(--rs-rule);
	padding-block: clamp(13px, 1.4vw, 17px);
}
.rs .rs-fit__item b {
	display: block;
	margin-bottom: 5px;
	font-size: clamp(16px, 1.35vw, 18px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--rs-text);
}
.rs .rs-fit__item span {
	display: block;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--rs-text-2);
}

/* ==========================================================================
   4 — SELECTED PROJECTS
   Project System v3 owns this block. Only the rhythm around it is set here.
   ========================================================================== */

.rs .pjs-svc { padding-block: var(--rs-l); }

/* ==========================================================================
   5 — ASSEMBLY: a section through the roof, drawn in rules
   ========================================================================== */

.rs .rs-asm__stack { margin-top: var(--rs-s); border-top: 1px solid rgba(255, 255, 255, .18); }
.rs .rs-layer {
	display: grid;
	grid-template-columns: 120px minmax(0, 320px) minmax(0, 1fr);
	align-items: baseline;
	gap: clamp(20px, 2.2vw, 40px);
	padding-block: clamp(13px, 1.4vw, 17px);
	border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.rs .rs-layer__n {
	margin: 0;
	font-size: clamp(11px, .9vw, 12.5px);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
	font-variant-numeric: tabular-nums;
}
.rs .rs-layer__t {
	margin: 0;
	font-size: clamp(17px, 1.5vw, 20px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--rs-white);
}
.rs .rs-layer__d {
	margin: 0;
	font-size: clamp(15px, 1.15vw, 16.5px);
	line-height: 1.6;
	color: rgba(255, 255, 255, .76);
}

/* ==========================================================================
   6 — PROCESS: a horizontal track on desktop, a timeline on mobile
   ========================================================================== */

.rs .rs-flow__track {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--rs-gap);
	margin: var(--rs-m) 0 0;
	padding: 0;
	list-style: none;
}
.rs .rs-stage {
	position: relative;
	padding-top: 20px;
	border-top: 1px solid var(--rs-rule);
}
/* the tick that turns six columns into one track */
.rs .rs-stage::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 26px;
	height: 3px;
	background: var(--rs-red);
}
.rs .rs-stage__n {
	margin: 0 0 5px;
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--rs-rule);
	font-variant-numeric: tabular-nums;
}
.rs .rs-stage__t {
	margin: 0 0 6px;
	font-size: clamp(16px, 1.35vw, 18px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--rs-text);
}
.rs .rs-stage__d {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--rs-text-2);
}

/* ==========================================================================
   7 — ESTIMATE FACTORS: the variables, and the estimate card beside them
   ========================================================================== */

.rs .rs-cost__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--rs-gap);
	align-items: start;
}
.rs .rs-cost__list {
	margin: var(--rs-s) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rs-rule);
}
.rs .rs-cost__list li {
	position: relative;
	padding: clamp(11px, 1.2vw, 15px) 0 clamp(11px, 1.2vw, 15px) 34px;
	border-bottom: 1px solid var(--rs-rule);
	font-size: clamp(15.5px, 1.2vw, 17px);
	line-height: 1.5;
	color: var(--rs-text);
}
.rs .rs-cost__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(clamp(11px, 1.2vw, 15px) + .62em);
	width: 18px;
	height: 2px;
	background: var(--rs-red);
}

.rs .rs-est {
	position: sticky;
	top: calc(var(--ph-h, 85px) + 24px);
	background: var(--rs-white);
	padding: clamp(26px, 2.6vw, 34px);
	box-shadow: 0 18px 48px rgba(6, 36, 82, .10);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}
.rs .rs-est::before {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	background: var(--rs-red);
}
.rs .rs-est__t {
	margin: 0;
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 700;
	letter-spacing: -.025em;
	color: var(--rs-text);
}
.rs .rs-est .rs-btn { width: 100%; text-align: center; }

/* ==========================================================================
   8 — QUESTIONS: native <details>, no script
   ========================================================================== */

.rs .rs-faq__list { margin-top: var(--rs-s); border-top: 1px solid var(--rs-rule); }
.rs .rs-q { border-bottom: 1px solid var(--rs-rule); }
.rs .rs-q__s {
	position: relative;
	display: block;
	cursor: pointer;
	list-style: none;
	padding: clamp(14px, 1.7vw, 20px) 56px clamp(14px, 1.7vw, 20px) 0;
	font-size: clamp(17px, 1.5vw, 21px);
	font-weight: 600;
	letter-spacing: -.025em;
	color: var(--rs-text);
}
.rs .rs-q__s::-webkit-details-marker { display: none; }
.rs .rs-q__s::before,
.rs .rs-q__s::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 18px;
	height: 2px;
	background: var(--rs-red);
	transition: transform .22s ease;
}
.rs .rs-q__s::before { transform: translateY(-50%) rotate(90deg); }
.rs .rs-q__s::after { transform: translateY(-50%); }
.rs .rs-q[open] .rs-q__s::before { transform: translateY(-50%) rotate(0deg); }
.rs .rs-q__s:hover { color: var(--rs-red); }
.rs .rs-q__s:focus-visible { outline: 3px solid var(--rs-red); outline-offset: 2px; }
.rs .rs-q__a { padding: 0 56px clamp(20px, 2.2vw, 28px) 0; max-width: 62ch; }
.rs .rs-q__a p {
	margin: 0;
	font-size: clamp(15.5px, 1.15vw, 16.5px);
	line-height: 1.62;
	color: var(--rs-text-2);
}

/* ==========================================================================
   9 — SERVICE AREAS
   ========================================================================== */

.rs .rs-areas__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--rs-gap);
	margin-top: var(--rs-s);
}
.rs .rs-area {
	position: relative;
	display: block;
	border-top: 1px solid var(--rs-rule);
	padding-block: clamp(12px, 1.4vw, 16px);
	font-size: clamp(16px, 1.35vw, 18px);
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--rs-text);
	text-decoration: none;
}
.rs .rs-area span { display: inline-block; transition: transform .22s ease; }
.rs .rs-area::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 2px;
	background: var(--rs-red);
	transition: width .22s ease;
}
.rs .rs-area:hover span { transform: translateX(22px); }
.rs .rs-area:hover::before { width: 16px; }

/* ==========================================================================
   10 — FINAL CTA
   ========================================================================== */

.rs .rs-final__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--rs-gap);
	align-items: end;
}
.rs .rs-final__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 26px;
}

/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1080px) {
	.rs .rs-hero__grid { grid-template-columns: minmax(0, 52%) minmax(0, 1fr); min-height: 400px; }
	.rs .rs-hero__img { min-height: 400px; }
	.rs .rs-layer { grid-template-columns: 96px minmax(0, 1fr); }
	.rs .rs-layer__d { grid-column: 2; }
	.rs .rs-flow__track { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--rs-m); }
	.rs .rs-cost__grid,
	.rs .rs-final__grid { grid-template-columns: minmax(0, 1fr); }
	.rs .rs-est { position: static; }
	.rs .rs-final__actions { justify-content: flex-start; }
	.rs .rs-areas__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
	.rs .rs-cmp__row { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
	.rs .rs-trade { grid-column: 2; }
}

@media (max-width: 900px) {
	.rs .rs-fit__grid { grid-template-columns: minmax(0, 1fr); }
	.rs .rs-fit__list { margin-top: var(--rs-s); }
	.rs .rs-cmp__row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.rs .rs-trade { grid-column: auto; }
}

/* ==========================================================================
   MOBILE — a separate composition, not a stacked desktop
   ========================================================================== */

@media (max-width: 760px) {
	.rs { --rs-pad: 18px; }

	.rs .rs-hero { padding-block: 30px 0; }
	.rs .rs-hero__grid,
	.rs .rs-hero--nomedia .rs-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		gap: var(--rs-m);
	}
	.rs .rs-hero__copy { padding-block: 0 0; }
	.rs .rs-hero__actions { gap: 18px; flex-direction: column; align-items: stretch; }
	.rs .rs-hero__actions .rs-btn { text-align: center; }
	.rs .rs-hero__actions .rs-phone { align-self: flex-start; }
	.rs .rs-hero__media { margin-right: calc(-1 * var(--rs-pad)); margin-left: calc(-1 * var(--rs-pad)); }
	.rs .rs-hero__img { min-height: 0; height: clamp(210px, 52vw, 270px); }

	.rs .rs-fit__list { grid-template-columns: minmax(0, 1fr); }
	.rs .rs-cmp__row { gap: 10px; padding-block: 18px; }
	.rs .rs-cmp__t { margin-bottom: 0; }

	/* the track becomes a timeline: one continuous line, six marks */
	.rs .rs-flow__track {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
		position: relative;
		padding-left: 26px;
	}
	.rs .rs-flow__track::before {
		content: "";
		position: absolute;
		left: 3px;
		top: 10px;
		bottom: 10px;
		width: 1px;
		background: var(--rs-rule);
	}
	.rs .rs-stage {
		border-top: 0;
		padding: 0 0 var(--rs-s);
	}
	.rs .rs-stage:last-child { padding-bottom: 0; }
	.rs .rs-stage::before {
		left: -26px;
		top: 9px;
		width: 9px;
		height: 9px;
	}
	.rs .rs-stage__n { display: inline-block; margin-right: 10px; }
	.rs .rs-stage__t { display: inline; }

	.rs .rs-areas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.rs .rs-q__s { padding-right: 44px; min-height: 48px; }
	.rs .rs-q__a { padding-right: 0; }

	.rs .rs-final__actions { flex-direction: column; align-items: stretch; gap: 20px; }
	.rs .rs-final__actions .rs-btn { text-align: center; }
	.rs .rs-final__actions .rs-phone { align-self: flex-start; }
}

/* A long area name must never be squeezed. */
@media (max-width: 360px) {
	.rs .rs-areas__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.rs * { transition: none !important; }
}

/* ==========================================================================
   FLAT ROOFING — diagnostic adaptation
   Additions only: new classes and modifiers. Nothing above this line changes,
   so Metal Roofing, which carries none of these, is untouched.
   ========================================================================== */

/* ---- hero: a third register of copy, and the photograph's caption ------- */
.rs .rs-hero__muted {
	margin: 14px 0 0;
	max-width: 52ch;
	font-size: clamp(15px, 1.1vw, 16px);
	line-height: 1.58;
	color: rgba(255, 255, 255, .62);
}
.rs .rs-hero__note {
	margin: var(--rs-s) 0 0;
	max-width: 52ch;
	padding-left: 16px;
	border-left: 2px solid var(--rs-red);
	font-size: clamp(14.5px, 1.05vw, 15.5px);
	line-height: 1.55;
	color: rgba(255, 255, 255, .72);
}
.rs .rs-hero__cap {
	margin: 10px 0 0;
	padding-inline: 2px;
	font-size: clamp(11px, .9vw, 12.5px);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}

/* ---- a text link in the page's own voice ------------------------------- */
.rs .rs-link {
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	color: var(--rs-text);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 2px solid var(--rs-red);
}
.rs .rs-link:hover { color: var(--rs-red); }
.rs .rs-link--light { color: var(--rs-white); }
.rs .rs-q__a .rs-link,
.rs .rs-fork__foot .rs-link { font-size: inherit; font-weight: 600; }

.rs .rs-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 26px;
	margin-top: var(--rs-m);
}

/* ---- 2 — SYMPTOMS: eight observations across three columns ------------- */
.rs .rs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.rs .rs-note--ask {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 18px;
	max-width: none;
	font-weight: 400;
}
.rs .rs-note--ask h3 {
	margin: 0;
	font-size: clamp(16px, 1.35vw, 18px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--rs-text);
}
.rs .rs-note--ask p {
	margin: 0;
	flex: 1 1 26ch;
	font-size: clamp(15px, 1.15vw, 16.5px);
	line-height: 1.55;
	color: var(--rs-text-2);
}

/* ---- 4 — WATER PATH: the assembly stack, on light ---------------------- */
.rs .rs-stack--light { border-top-color: var(--rs-rule); }
.rs .rs-stack--light .rs-layer { border-bottom-color: var(--rs-rule); }
.rs .rs-stack--light .rs-layer__n { color: var(--rs-text-2); }
.rs .rs-stack--light .rs-layer__t { color: var(--rs-text); }
.rs .rs-stack--light .rs-layer__d { color: var(--rs-text-2); }

/* the assembly list has no step numbers of its own, so the rail is dropped */
.rs .rs-stack--noindex .rs-layer { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.rs .rs-asm__note { margin-top: var(--rs-s); max-width: 82ch; }

/* ---- 5 — SCOPE: the answer sits in the head, opposite the question ----- */
.rs .rs-answer {
	margin: 0;
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--rs-red);
	white-space: nowrap;
}

/* ---- variables in two columns ----------------------------------------- */
.rs .rs-cost__list--2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--rs-gap);
	border-top: 0;
}
.rs .rs-cost__list--2 li { border-top: 1px solid var(--rs-rule); border-bottom: 0; }

/* ---- 9 — THE FORK: two scopes facing each other ------------------------ */
.rs .rs-fork {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin-top: var(--rs-m);
	border-top: 1px solid var(--rs-rule);
}
.rs .rs-fork__col { padding: var(--rs-s) 0; }
/* the red line between them is the choice itself */
.rs .rs-fork__col:first-child { padding-right: var(--rs-gap); border-right: 2px solid var(--rs-red); }
.rs .rs-fork__col:last-child { padding-left: var(--rs-gap); }
.rs .rs-fork__t {
	margin: 0 0 12px;
	font-size: clamp(16px, 1.4vw, 19px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--rs-text);
}
.rs .rs-fork__col ul { margin: 0; padding: 0; list-style: none; }
.rs .rs-fork__col li {
	padding: 10px 0;
	border-top: 1px solid var(--rs-rule);
	font-size: clamp(15px, 1.15vw, 16.5px);
	line-height: 1.5;
	color: var(--rs-text-2);
}
.rs .rs-fork__foot { margin-top: var(--rs-m); max-width: 70ch; }

/* ---- 8 — PROCESS without numerals: the tick carries the sequence ------- */
.rs .rs-flow--nonum .rs-stage { padding-top: 22px; }

/* ==========================================================================
   FLAT ROOFING — tablet and mobile
   ========================================================================== */

@media (max-width: 1080px) {
	.rs .rs-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rs .rs-stack--noindex .rs-layer { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
	/* .rs-layer__d is pinned to grid-column 2 for the numbered stacks. A stack
	   without an index rail has no column to spare: the pin re-creates a second
	   track and squeezes the title to zero width once the row narrows. Release
	   it and the description auto-places — beside the title while there are two
	   tracks, below it once there is one. */
	.rs .rs-stack--noindex .rs-layer__d { grid-column: auto; }
}

@media (max-width: 900px) {
	.rs .rs-fork { grid-template-columns: minmax(0, 1fr); border-top: 0; }
	.rs .rs-fork__col:first-child,
	.rs .rs-fork__col:last-child {
		padding: var(--rs-s) 0 var(--rs-s) 18px;
		border-right: 0;
		border-left: 2px solid var(--rs-red);
	}
}

@media (max-width: 760px) {
	.rs .rs-grid--3 { grid-template-columns: minmax(0, 1fr); }
	.rs .rs-cost__list--2 { grid-template-columns: minmax(0, 1fr); }
	.rs .rs-stack--noindex .rs-layer { grid-template-columns: minmax(0, 1fr); }
	.rs .rs-hero__note { margin-top: 18px; }
	.rs .rs-note--ask { display: block; }
	.rs .rs-note--ask p { margin: 6px 0 12px; }
	.rs .rs-answer { white-space: normal; }
	.rs .rs-actions { gap: 18px; flex-direction: column; align-items: stretch; }
	.rs .rs-actions .rs-btn { text-align: center; }
	.rs .rs-actions .rs-phone,
	.rs .rs-actions .rs-link { align-self: flex-start; }
}

/* ---- a denser setting for the long pages of the direction -------------
   Flat Roofing carries twice the discrete items Metal Roofing does, so the
   page opts into a tighter rhythm rather than each item becoming a card.
   Applied per page through the class on <main>; Metal Roofing does not
   carry it and is unaffected. */
.rs--dense { --rs-l: clamp(36px, 3.6vw, 50px); }
.rs--dense .rs-layer,
.rs--dense .rs-fit__item { padding-block: clamp(11px, 1.2vw, 15px); }
.rs--dense .rs-q__s { padding-block: clamp(12px, 1.5vw, 18px); }
.rs--dense .rs-fork__col li { padding-block: 9px; }

@media (max-width: 760px) {
	.rs--dense { --rs-l: clamp(30px, 8vw, 40px); }
	.rs--dense .rs-head { padding-bottom: 14px; }
	.rs--dense .rs-lead { margin-top: 14px; }
	/* the step label sits on the title's line rather than above it */
	.rs--dense .rs-stack--light .rs-layer { grid-template-columns: minmax(0, 1fr); }
	.rs--dense .rs-stack--light .rs-layer__n { display: inline-block; margin-right: 10px; }
	.rs--dense .rs-stack--light .rs-layer__t { display: inline; }
	.rs--dense .rs-stack--light .rs-layer__d { margin-top: 6px; }
	.rs--dense .rs-asm__note { margin-top: 12px; }
}

/* ==========================================================================
   ROOF REPLACEMENT — additions only
   New classes and one modifier. Metal Roofing and Flat Roofing carry neither,
   so nothing above this line is touched.
   ========================================================================== */

/* ---- the fork, with a label and an exit on each side ------------------- */
.rs .rs-fork--labelled .rs-fork__col { display: flex; flex-direction: column; align-items: flex-start; }
.rs .rs-fork__k {
	margin: 0 0 10px;
	font-size: clamp(11px, .9vw, 12.5px);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rs-red);
}
.rs .rs-fork--labelled .rs-fork__col ul { width: 100%; }
.rs .rs-fork--labelled .rs-link { margin-top: var(--rs-s); }

/* ==========================================================================
   rs-routes — moving between the directions of the service.
   A systemic component: the same three doors appear on more than one page of
   the direction. Editorial rows, not full-bleed cards.
   ========================================================================== */

.rs .rs-routes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--rs-gap);
	margin-top: var(--rs-m);
}
.rs .rs-route {
	display: block;
	text-decoration: none;
	color: inherit;
	border-top: 1px solid var(--rs-rule);
	padding-top: var(--rs-s);
}
/* one frame, one ratio: a portrait source is cropped by the container and is
   never distorted */
.rs .rs-route__frame {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--rs-light);
}
.rs .rs-route__frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
	transition: transform .4s ease;
}
.rs .rs-route:hover .rs-route__frame img { transform: scale(1.03); }

.rs .rs-route__body { display: block; padding-top: 16px; }
.rs .rs-route__t {
	display: block;
	margin-bottom: 7px;
	font-size: clamp(17px, 1.5vw, 20px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--rs-text);
}
.rs .rs-route__d {
	display: block;
	font-size: clamp(15px, 1.15vw, 16px);
	line-height: 1.55;
	color: var(--rs-text-2);
}
.rs .rs-route__go {
	display: inline-block;
	margin-top: 14px;
	padding-bottom: 3px;
	font-size: 15px;
	font-weight: 600;
	color: var(--rs-text);
	border-bottom: 2px solid var(--rs-red);
}
.rs .rs-route:hover .rs-route__go { color: var(--rs-red); }
.rs .rs-route:focus-visible { outline: 3px solid var(--rs-red); outline-offset: 3px; }

@media (max-width: 1080px) {
	.rs .rs-routes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
}

@media (max-width: 760px) {
	/* the three doors become rows: a compact frame beside the copy, so the
	   section reads as a short index rather than three full screens */
	.rs .rs-routes { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--rs-s); }
	.rs .rs-route {
		display: grid;
		grid-template-columns: 116px minmax(0, 1fr);
		gap: 16px;
		align-items: start;
		padding-block: 16px;
	}
	.rs .rs-route__frame { aspect-ratio: 1 / 1; }
	.rs .rs-route__body { padding-top: 0; }
	.rs .rs-route__go { margin-top: 10px; font-size: 14px; }
	.rs .rs-fork--labelled .rs-link { margin-top: 14px; }
}

/* ==========================================================================
   ROOF REPAIR — additions only
   New classes and two modifiers. Metal Roofing, Flat Roofing and Roof
   Replacement carry none of them, so nothing above this line is touched.
   ========================================================================== */

/* ---- 2 — SYMPTOMS: a diagnostic matrix, not eight cards ----------------
   Rows on rules, four across. The index is the ordering device and the red
   mark is the only ornament; there is no icon set and no panel. */
.rs .rs-diagnostic {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--rs-gap);
	margin-top: var(--rs-m);
}
.rs .rs-diagnostic__item {
	position: relative;
	display: block;
	border-top: 1px solid var(--rs-rule);
	padding: clamp(14px, 1.5vw, 18px) 22px clamp(16px, 1.7vw, 20px) 0;
	text-decoration: none;
	color: inherit;
}
.rs .rs-diagnostic__index {
	display: block;
	margin-bottom: 6px;
	font-size: clamp(11px, .9vw, 12.5px);
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--rs-rule);
	font-variant-numeric: tabular-nums;
}
.rs .rs-diagnostic__title {
	display: block;
	margin-bottom: 5px;
	font-size: clamp(16px, 1.35vw, 18px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--rs-text);
}
.rs .rs-diagnostic__desc {
	display: block;
	font-size: 15px;
	line-height: 1.5;
	color: var(--rs-text-2);
}
.rs .rs-diagnostic__mark {
	position: absolute;
	right: 0;
	top: clamp(14px, 1.5vw, 18px);
	width: 14px;
	height: 2px;
	background: var(--rs-rule);
	transition: width .22s ease, background-color .22s ease;
}
.rs .rs-diagnostic__item:hover .rs-diagnostic__mark { width: 22px; background: var(--rs-red); }
.rs .rs-diagnostic__item:hover .rs-diagnostic__title { color: var(--rs-red); }
.rs .rs-diagnostic__item:focus-visible { outline: 3px solid var(--rs-red); outline-offset: 3px; }
/* the eighth entry is the one that leads to a person, not to the diagnosis */
.rs .rs-diagnostic__item--ask { border-top-color: var(--rs-red); }
.rs .rs-diagnostic__item--ask .rs-diagnostic__index { color: var(--rs-red); }
.rs .rs-diagnostic__item--ask .rs-diagnostic__mark { background: var(--rs-red); }

/* ---- 3 — DIAGNOSIS: entry -> travel -> appearance ----------------------
   One continuous rule with three marks on it: cause moving to symptom, read
   left to right on desktop and top to bottom on a phone. */
.rs .rs-diagflow {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--rs-gap);
	margin: var(--rs-m) 0 0;
	padding: 0;
	list-style: none;
}
.rs .rs-diagflow::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: var(--rs-rule);
}
.rs .rs-diagflow__step { position: relative; padding-top: 26px; }
.rs .rs-diagflow__step::before {
	content: "";
	position: absolute;
	left: 0;
	top: -3px;
	width: 7px;
	height: 7px;
	background: var(--rs-red);
}
/* the direction of travel, drawn once between the marks */
.rs .rs-diagflow__step:not(:last-child)::after {
	content: "";
	position: absolute;
	right: calc(-1 * var(--rs-gap) / 2 - 4px);
	top: 0;
	width: 8px;
	height: 8px;
	border-top: 1px solid var(--rs-red);
	border-right: 1px solid var(--rs-red);
	transform: translateY(-50%) rotate(45deg);
}
.rs .rs-diagflow__k {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 8px;
	font-size: clamp(11px, .9vw, 12.5px);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rs-red);
}
.rs .rs-diagflow__k span { color: var(--rs-text-2); font-variant-numeric: tabular-nums; }
.rs .rs-diagflow__t {
	margin: 0 0 8px;
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 700;
	letter-spacing: -.025em;
	color: var(--rs-text);
}
.rs .rs-diagflow__d {
	margin: 0;
	font-size: clamp(15px, 1.15vw, 16.5px);
	line-height: 1.6;
	color: var(--rs-text-2);
}

.rs .rs-diag__foot {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--rs-gap);
	align-items: start;
	margin-top: var(--rs-l);
}
.rs .rs-diag__sub {
	margin: 0 0 var(--rs-s);
	font-size: clamp(17px, 1.5vw, 19px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--rs-text);
}

/* a short vocabulary list, set on rules rather than in pills */
.rs .rs-tags {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--rs-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.rs .rs-tags li {
	border-top: 1px solid var(--rs-rule);
	padding: 11px 0;
	font-size: clamp(15px, 1.2vw, 16.5px);
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--rs-text);
}

/* the estimate panel, used here as a conclusion rather than a sticky aside */
.rs .rs-est--static { position: static; }

/* ---- crosslink and the compact evidence band --------------------------- */
.rs .rs-cross { margin-top: var(--rs-s); max-width: 70ch; }
.rs .rs-evidence__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--rs-gap);
	align-items: start;
	padding-block: var(--rs-s);
	border-top: 1px solid var(--rs-rule);
	border-bottom: 1px solid var(--rs-rule);
}
.rs .rs-evidence__body .rs-link { margin-top: var(--rs-s); }
.rs .rs-evidence__body .rs-body { max-width: 62ch; }

/* ==========================================================================
   ROOF REPAIR — tablet and mobile
   ========================================================================== */

@media (max-width: 1080px) {
	.rs .rs-diagnostic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rs .rs-diag__foot { grid-template-columns: minmax(0, 1fr); }
	.rs .rs-evidence__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
	/* the flow turns vertical: the rule runs down the left, the arrows with it */
	.rs .rs-diagflow { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 26px; }
	.rs .rs-diagflow::before { left: 3px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
	.rs .rs-diagflow__step { padding: 0 0 var(--rs-m); }
	.rs .rs-diagflow__step:last-child { padding-bottom: 0; }
	.rs .rs-diagflow__step::before { left: -26px; top: 7px; }
	.rs .rs-diagflow__step:not(:last-child)::after {
		right: auto;
		left: -26px;
		top: auto;
		bottom: 14px;
		transform: rotate(135deg);
	}
}

@media (max-width: 760px) {
	.rs .rs-diagnostic { grid-template-columns: minmax(0, 1fr); margin-top: var(--rs-s); }
	.rs .rs-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rs .rs-cross { margin-top: 14px; }
}

/* ==========================================================================
   EMERGENCY ROOF REPAIR — additions only
   New classes and modifiers. The four frozen service pages carry none of them,
   and no declaration above this line is rewritten.
   ========================================================================== */

/* ---- the phone, read first, without shouting ---------------------------
   A red rule under a large number rather than a red button: the action is
   unmistakable and the palette stays where the rest of the system left it. */
.rs .rs-call {
	display: inline-block;
	text-decoration: none;
	padding-bottom: 8px;
	border-bottom: 3px solid var(--rs-red);
}
.rs .rs-call__k {
	display: block;
	margin-bottom: 4px;
	font-size: clamp(11px, .9vw, 12.5px);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rs-red);
}
.rs .rs-call__n {
	display: block;
	font-size: clamp(26px, 2.6vw, 34px);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1;
	color: var(--rs-white);
	font-variant-numeric: tabular-nums;
}
.rs .rs-call:hover .rs-call__n { color: var(--rs-red); }
.rs .rs-call:focus-visible { outline: 3px solid var(--rs-red); outline-offset: 4px; }
.rs .rs-call--compact .rs-call__n { font-size: clamp(22px, 2vw, 27px); }
.rs .rs-call--dark .rs-call__n { color: var(--rs-text); }

/* on this page the hero actions stack so the number leads the eye */
.rs .rs-hero__actions--call { align-items: flex-start; gap: 22px; }

/* ---- the response strip: problem -> contact, in one band --------------- */
.rs .rs-response { background: var(--rs-navy); color: var(--rs-white); }
.rs .rs-response__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--rs-gap);
	align-items: center;
	padding-block: clamp(22px, 2.4vw, 32px);
	border-top: 3px solid var(--rs-red);
}
.rs .rs-response__t {
	margin: 0 0 6px;
	font-size: clamp(19px, 1.9vw, 25px);
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--rs-white);
}
.rs .rs-response__d {
	margin: 0;
	font-size: clamp(15px, 1.15vw, 16.5px);
	line-height: 1.5;
	color: rgba(255, 255, 255, .76);
}
.rs .rs-response__act {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 18px 28px;
}
.rs .rs-response__act .rs-link { color: var(--rs-white); }

/* ---- six conditions: the diagnostic matrix at three across ------------- */
.rs .rs-diagnostic--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* these are statements, not links: no mark, no hover target */
.rs .rs-diagnostic--6 .rs-diagnostic__item { padding-right: 0; }

/* ---- the safety note: an editorial callout, not a warning panel -------- */
.rs .rs-safety {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	gap: var(--rs-gap);
	margin-top: var(--rs-m);
	padding-top: var(--rs-s);
	border-top: 3px solid var(--rs-red);
}
.rs .rs-safety__k {
	margin: 0;
	font-size: clamp(11px, .9vw, 12.5px);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rs-red);
}
.rs .rs-safety__d {
	margin: 0;
	max-width: 74ch;
	font-size: clamp(15.5px, 1.2vw, 17px);
	line-height: 1.6;
	color: var(--rs-text);
}

/* ---- four things to mention on the call -------------------------------- */
.rs .rs-src__note { margin-top: var(--rs-s); max-width: 74ch; }
.rs .rs-callinfo__k {
	margin: var(--rs-m) 0 var(--rs-s);
	font-size: clamp(11px, .9vw, 12.5px);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rs-red);
}
.rs .rs-callinfo {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--rs-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.rs .rs-callinfo__item {
	position: relative;
	border-top: 1px solid var(--rs-rule);
	padding-top: 22px;
}
.rs .rs-callinfo__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 26px;
	height: 3px;
	background: var(--rs-red);
}
.rs .rs-callinfo__n {
	display: block;
	margin-bottom: 6px;
	font-size: clamp(11px, .9vw, 12.5px);
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--rs-rule);
	font-variant-numeric: tabular-nums;
}
.rs .rs-callinfo__label {
	display: block;
	margin-bottom: 5px;
	font-size: clamp(16px, 1.35vw, 18px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--rs-text);
}
.rs .rs-callinfo__d {
	display: block;
	font-size: 15px;
	line-height: 1.5;
	color: var(--rs-text-2);
}

/* the next-step links sit inside the navy stack's own copy */
.rs .rs-layer__d .rs-link { margin-left: 8px; }

/* the final band leads with the number */
.rs .rs-final--call .rs-final__actions { align-items: flex-start; gap: 18px 30px; }

/* ==========================================================================
   EMERGENCY — tablet and mobile
   ========================================================================== */

@media (max-width: 1080px) {
	.rs .rs-diagnostic--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rs .rs-callinfo { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--rs-m); }
	.rs .rs-response__grid { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--rs-s); }
	.rs .rs-response__act { justify-content: flex-start; }
}

@media (max-width: 760px) {
	.rs .rs-diagnostic--6 { grid-template-columns: minmax(0, 1fr); }
	.rs .rs-callinfo { grid-template-columns: minmax(0, 1fr); row-gap: var(--rs-s); }
	.rs .rs-safety { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.rs .rs-response__act { flex-direction: column; align-items: flex-start; gap: 16px; }
	.rs .rs-final--call .rs-final__actions { flex-direction: column; align-items: flex-start; }
	.rs .rs-layer__d .rs-link { display: inline-block; margin: 8px 0 0; }
}

/* A two-column stack row collapses its title track to 0 on a narrow screen,
   so this variant drops to one column early. Scoped as a modifier: the same
   condition exists on two frozen pages and is reported rather than changed
   here. */
@media (max-width: 1080px) {
	.rs .rs-stack--rows .rs-layer { grid-template-columns: minmax(0, 1fr); }
	/* the single-column rule alone is not enough: .rs-layer__d is pinned to
	   grid-column 2 higher up, which re-creates a second track and squeezes the
	   title to zero. The placement has to be released with it. */
	.rs .rs-stack--rows .rs-layer__d { grid-column: auto; margin-top: 6px; }
}

/* ==========================================================================
   SHINGLE ROOFING — additions only.
   Two doors instead of three, a route that is the page you are already on,
   and the tag list on navy. Nothing above this line changes.
   ========================================================================== */

.rs .rs-routes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* the current direction is a state, not a link: same frame, no affordance */
.rs .rs-route--current { cursor: default; }
.rs .rs-route__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.rs .rs-route__list li {
	border-top: 1px solid var(--rs-rule);
	padding: 9px 0;
	font-size: clamp(14.5px, 1.1vw, 15.5px);
	line-height: 1.5;
	color: var(--rs-text-2);
}
.rs .rs-route__here {
	display: inline-block;
	margin-top: 14px;
	padding: 5px 12px;
	background: var(--rs-rule);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rs-text-2);
}

/* the detail vocabulary sits on navy here */
.rs .rs-sec--navy .rs-tags li,
.rs .rs-tags--light li {
	border-top-color: rgba(255, 255, 255, .18);
	color: var(--rs-white);
}
.rs .rs-sec--navy .rs-callinfo__k { margin-top: var(--rs-m); }

@media (max-width: 760px) {
	.rs .rs-routes--2 { grid-template-columns: minmax(0, 1fr); }
	.rs .rs-route--current .rs-route__here { margin-top: 10px; }
}

/* ==========================================================================
   SIDING — additions only. Four doors instead of two or three, and the frame
   honours the project's own focal point. Nothing above this line changes.
   ========================================================================== */

.rs .rs-routes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rs .rs-route__frame img { object-position: var(--rs-focus, 50% 45%); }

@media (max-width: 1080px) {
	.rs .rs-routes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--rs-m); }
}

@media (max-width: 760px) {
	/* the same editorial rows the other route sets fall back to */
	.rs .rs-routes--4 { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
}