/**
 * Homepage — Re-Gen Labs.
 *
 * Ported from the prototype (proto/home.dc.html), which carried every rule as an
 * inline style attribute plus a `style-hover` attribute its JS runtime applied by
 * hand. Inline styles cannot express :hover or media queries, which is why the
 * prototype needed a separate responsive.css retrofit. Those are folded back in
 * here as real CSS. Breakpoints match the retrofit: 1000px and 680px.
 */

/* Tokens live at the root: the closing band renders inside the footer on every
   page, so it needs them outside the .rl-home scope. Layout and ground stay
   on .rl-home, which must not apply to the footer. */
:root {
	--rlh-bg: #F4F3EC;
	--rlh-ink: #22270E;
	--rlh-olive: #49531E;
	--rlh-olive-dk: #333A14;
	--rlh-olive-deep: #3E4718;
	--rlh-muted: #6E7845;
	--rlh-muted-2: #7A8352;
	--rlh-muted-3: #8C9560;
	--rlh-muted-4: #A8B075;
	--rlh-light: #C7D18A;
	--rlh-panel: #FAFAF4;
	--rlh-media: #EAE8DC;
	--rlh-line: rgba(34, 39, 14, .12);
	--rlh-line-2: rgba(34, 39, 14, .14);
	--rlh-line-3: rgba(34, 39, 14, .1);
	--rlh-line-4: rgba(34, 39, 14, .08);
	--rlh-mono: 'IBM Plex Mono', ui-monospace, monospace;
	--rlh-serif: 'Times New Roman', Times, serif;
	--rlh-wrap: var(--wrap, clamp(1280px, calc(100% - 56px), 1720px));
	--rlh-bleed: calc(max(0px, 100% - var(--rlh-wrap)) / 2);
}

.rl-home {

	/* Full width so section backgrounds bleed edge to edge. Content inside each
	   band is clamped to --wrap, the same measure .rl-head-in / .rl-foot-in use,
	   so every content edge still lines up with the header. */
	width: 100%;
	background: var(--rlh-bg);
	color: var(--rlh-ink);
	position: relative;
	overflow: hidden;
}

/* Shared -------------------------------------------------------------- */

.rl-home .rlh-eyebrow {
	font-family: var(--rlh-mono);
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--rlh-muted-3);
	margin-bottom: 16px;
}

.rl-home .rlh-h2 {
	font-family: var(--rlh-serif);
	font-size: 52px;
	line-height: 1.04;
	letter-spacing: -.02em;
	margin: 0;
	font-weight: 400;
}

.rl-home .rlh-sec {
	max-width: var(--rlh-wrap);
	margin-inline: auto;
	padding: 96px 28px 0;
}

.rlh-sechead {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 44px;
}

.rlh-sechead--ruled {
	margin-bottom: 36px;
	border-bottom: 1px solid var(--rlh-line-2);
	padding-bottom: 22px;
}

.rlh-sec-intro {
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--rlh-muted);
	max-width: 360px;
	margin: 0;
	text-wrap: pretty;
}

.rl-home .rlh-more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rlh-olive);
	cursor: pointer;
	border-bottom: 1px solid rgba(73, 83, 30, .4);
	padding-bottom: 3px;
	background: none;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	white-space: nowrap;
}

.rl-home .rlh-more:hover {
	color: var(--rlh-olive-dk);
	border-bottom-color: var(--rlh-olive);
}

/* Hero ---------------------------------------------------------------- */

.rlh-hero {
	display: grid;
	grid-template-columns: 1fr 640px;
	border-bottom: 1px solid var(--rlh-line);
	max-width: var(--rlh-wrap);
	margin-inline: auto;
}

.rlh-hero-copy {
	padding: 88px 28px 76px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.rlh-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 26px;
}

.rlh-kicker span:first-child {
	width: 46px;
	height: 1px;
	background: var(--rlh-olive);
}

.rlh-kicker-t {
	font-family: var(--rlh-mono);
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--rlh-olive);
}

.rlh-h1 {
	font-family: var(--rlh-serif);
	font-size: 78px;
	line-height: .98;
	letter-spacing: -.022em;
	margin: 0 0 26px;
	font-weight: 400;
	text-wrap: balance;
}

.rlh-h1 em {
	color: var(--rlh-olive);
}

.rlh-sub {
	font-size: 15.5px;
	line-height: 1.72;
	color: #4A5227;
	max-width: 520px;
	margin: 0 0 36px;
	text-wrap: pretty;
}

.rlh-cta {
	display: flex;
	gap: 12px;
	margin-bottom: 52px;
	flex-wrap: wrap;
}

.rl-home .rlh-btn {
	padding: 18px 34px;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 500;
	cursor: pointer;
	transition: background .18s, border-color .18s, color .18s;
	display: inline-block;
	text-align: center;
}

.rl-home .rlh-btn-primary {
	background: var(--rlh-olive);
	color: #fff;
	border: none;
}

.rl-home .rlh-btn-primary:hover {
	background: var(--rlh-olive-dk);
	color: #fff;
}

.rl-home .rlh-btn-ghost {
	background: transparent;
	color: var(--rlh-olive);
	border: 1px solid rgba(34, 39, 14, .2);
}

.rl-home .rlh-btn-ghost:hover {
	border-color: var(--rlh-olive);
	background: #fff;
	color: var(--rlh-olive);
}

.rlh-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--rlh-line-2);
}

.rlh-stat {
	padding: 22px 22px 0 26px;
	border-right: 1px solid var(--rlh-line-3);
	min-width: 0;
}

.rlh-stat:first-child {
	padding-left: 0;
	padding-right: 22px;
}

.rlh-stat:last-child {
	border-right: 0;
	padding-right: 0;
}

.rlh-stat-v {
	font-family: var(--rlh-mono);
	font-size: 34px;
	color: var(--rlh-olive);
	letter-spacing: -.02em;
}

.rlh-stat-v small {
	font-size: 18px;
	color: var(--rlh-muted-3);
}

.rlh-stat-l {
	font-family: var(--rlh-mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rlh-muted-3);
	margin-top: 7px;
}

.rlh-hero-media {
	position: relative;
	border-left: 1px solid var(--rlh-line);
	background: var(--rlh-media);
	overflow: hidden;
}

.rlh-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rlh-corner {
	position: absolute;
	background: var(--rlh-olive);
}

.rlh-corner-a { left: 0; top: 0; width: 16px; height: 1px; }
.rlh-corner-b { left: 0; top: 0; width: 1px; height: 16px; }
.rlh-corner-c { right: 0; bottom: 0; width: 16px; height: 1px; }
.rlh-corner-d { right: 0; bottom: 0; width: 1px; height: 16px; }

.rlh-batch {
	position: absolute;
	left: 32px;
	bottom: 32px;
	background: rgba(244, 243, 236, .93);
	backdrop-filter: blur(4px);
	border: 1px solid var(--rlh-line-2);
	padding: 15px 20px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.rlh-batch-dot {
	width: 7px;
	height: 7px;
	background: var(--rlh-olive);
	border-radius: 50%;
	flex: none;
}

.rlh-batch-t {
	font-family: var(--rlh-mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rlh-olive);
}

.rlh-batch-s {
	font-size: 11px;
	color: var(--rlh-muted);
	margin-top: 3px;
}

/* Trust bar ----------------------------------------------------------- */

.rlh-trust {
	background: #fff;
	border-bottom: 1px solid var(--rlh-line);
	max-width: var(--rlh-wrap);
	margin-inline: auto;
}

.rlh-trust-in {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding: 0;
}

.rlh-trust-item {
	padding: 30px 28px;
	border-right: 1px solid var(--rlh-line-3);
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.rlh-trust-item:last-child {
	border-right-color: transparent;
}

.rlh-trust-n {
	font-family: var(--rlh-mono);
	font-size: 10px;
	color: var(--rlh-muted-4);
	padding-top: 2px;
}

.rlh-trust-t {
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .02em;
	margin-bottom: 5px;
}

.rlh-trust-s {
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--rlh-muted-2);
}

/* Section 01 — standards ---------------------------------------------- */

.rlh-std-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--rlh-line);
	border: 1px solid var(--rlh-line);
}

.rlh-std {
	background: #fff;
	padding: 34px 30px 38px;
	transition: background .2s;
}

.rlh-std:hover {
	background: var(--rlh-panel);
}

.rlh-std-n {
	font-family: var(--rlh-mono);
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--rlh-muted-4);
	margin-bottom: 60px;
}

.rlh-std h3 {
	font-family: var(--rlh-serif);
	font-size: 25px;
	line-height: 1.16;
	margin: 0 0 14px;
	font-weight: 400;
}

.rlh-std p {
	font-size: 12.5px;
	line-height: 1.68;
	color: var(--rlh-muted);
	margin: 0;
	text-wrap: pretty;
}

/* Section 02 — catalog rail ------------------------------------------- */

.rlh-railwrap {
	position: relative;
}

.rlh-rail {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-behavior: smooth;
	padding-bottom: 6px;
	scrollbar-width: none;
}

.rlh-rail::-webkit-scrollbar {
	display: none;
}

.rl-home .rlh-card {
	flex: none;
	width: 322px;
	background: #fff;
	border: 1px solid var(--rlh-line);
	transition: border-color .2s, transform .2s;
	display: flex;
	flex-direction: column;
	color: inherit;
}

.rl-home .rlh-card:hover {
	border-color: var(--rlh-olive);
	transform: translateY(-3px);
	color: inherit;
}

.rlh-card-media {
	position: relative;
	height: 230px;
	overflow: hidden;
}

.rlh-card-media img {
	height: 100%;
	width: 100%;
	object-fit: contain;
	padding: 20px;
	display: block;
}

.rlh-chip {
	position: absolute;
	top: 12px;
	font-family: var(--rlh-mono);
	font-size: 9px;
	padding: 4px 8px;
}

.rlh-chip-code {
	left: 12px;
	letter-spacing: .14em;
	background: rgba(244, 243, 236, .9);
	color: var(--rlh-olive);
}

.rlh-chip-purity {
	right: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	background: rgba(73, 83, 30, .9);
	color: #fff;
}

.rlh-card-body {
	padding: 20px;
	border-top: 1px solid var(--rlh-line-3);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.rlh-card-cat {
	font-family: var(--rlh-mono);
	font-size: 9.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rlh-muted-4);
	margin-bottom: 9px;
}

.rlh-card-title {
	font-family: var(--rlh-serif);
	font-size: 23px;
	line-height: 1.12;
	margin: 0 0 7px;
	font-weight: 400;
}

.rlh-card-rate {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 11px;
}

.rlh-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--rlh-olive);
	line-height: 1;
}

.rlh-card-rate-v {
	font-family: var(--rlh-mono);
	font-size: 10.5px;
	color: var(--rlh-ink);
}

.rlh-card-rate-n {
	font-family: var(--rlh-mono);
	font-size: 10px;
	color: var(--rlh-muted-4);
}

.rlh-card-meta {
	font-family: var(--rlh-mono);
	font-size: 10.5px;
	color: var(--rlh-muted-3);
	margin-bottom: 14px;
}

.rlh-card-blurb {
	font-size: 12px;
	line-height: 1.6;
	color: var(--rlh-muted);
	margin: 0 0 18px;
	text-wrap: pretty;
}

.rlh-card-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--rlh-line-3);
}

.rlh-price-wrap {
	display: flex;
	align-items: baseline;
	gap: 9px;
}

.rlh-price {
	font-family: var(--rlh-mono);
	font-size: 16px;
}

.rlh-price-was {
	font-family: var(--rlh-mono);
	font-size: 11px;
	color: var(--rlh-muted-4);
	text-decoration: line-through;
}

.rlh-view {
	background: transparent;
	border: 1px solid rgba(34, 39, 14, .2);
	color: var(--rlh-olive);
	padding: 10px 18px;
	font-family: var(--rlh-mono);
	font-size: 9.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	flex: none;
	transition: all .16s;
}

.rl-home .rlh-card:hover .rlh-view {
	background: var(--rlh-olive);
	color: #fff;
	border-color: var(--rlh-olive);
}

.rlh-railfoot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
}

.rlh-railhint {
	font-family: var(--rlh-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rlh-muted-4);
}

.rlh-railnav {
	display: flex;
	gap: 8px;
}

.rlh-railbtn {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .16s;
}

.rlh-railbtn-prev {
	background: transparent;
	border: 1px solid rgba(34, 39, 14, .18);
	color: var(--rlh-olive);
}

.rlh-railbtn-prev:hover {
	border-color: var(--rlh-olive);
	background: #fff;
}

.rlh-railbtn-next {
	background: var(--rlh-olive);
	border: none;
	color: #fff;
}

.rlh-railbtn-next:hover {
	background: var(--rlh-olive-dk);
}

/* Section 03 — calculator --------------------------------------------- */

.rlh-calcsec {
	padding: 96px 0 0;
}

.rlh-calc {
	background: var(--rlh-olive);
	color: #fff;
	display: grid;
	grid-template-columns: 1fr 620px;
	max-width: var(--rlh-wrap);
	margin-inline: auto;
}

.rlh-calc-copy {
	padding: 66px 28px 70px;
}

.rlh-calc .rlh-eyebrow {
	color: var(--rlh-light);
}

.rlh-calc-h {
	font-family: var(--rlh-serif);
	font-size: 50px;
	line-height: 1.04;
	letter-spacing: -.02em;
	margin: 0 0 20px;
	font-weight: 400;
	max-width: 460px;
}

.rlh-calc-body {
	font-size: 14px;
	line-height: 1.75;
	color: rgba(255, 255, 255, .72);
	max-width: 430px;
	margin: 0 0 34px;
	text-wrap: pretty;
}

.rl-home .rlh-btn-light {
	background: #fff;
	color: var(--rlh-olive);
	border: none;
}

.rl-home .rlh-btn-light:hover {
	background: #E8EBD6;
	color: var(--rlh-olive);
}

.rlh-calc-panel {
	background: var(--rlh-olive-deep);
	border-left: 1px solid rgba(255, 255, 255, .14);
	padding: 48px 56px 52px;
}

.rlh-calc-panel .rlh-eyebrow {
	letter-spacing: .18em;
	margin-bottom: 26px;
}

.rlh-field {
	margin-bottom: 26px;
}

.rlh-field:nth-of-type(3) {
	margin-bottom: 30px;
}

.rlh-field-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 10px;
}

.rlh-field-l {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .8);
}

.rlh-field-v {
	font-family: var(--rlh-mono);
	font-size: 17px;
}

.rlh-range {
	width: 100%;
	accent-color: var(--rlh-light);
	height: 3px;
}

.rlh-out {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .16);
}

.rlh-out-cell {
	padding: 20px 22px;
}

.rlh-out-a {
	background: var(--rlh-olive-deep);
}

.rlh-out-b {
	background: #fff;
	color: var(--rlh-ink);
}

.rlh-out-l {
	font-family: var(--rlh-mono);
	font-size: 9.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rlh-muted-4);
	margin-bottom: 9px;
}

.rlh-out-b .rlh-out-l {
	color: var(--rlh-muted-3);
}

.rlh-out-v {
	font-family: var(--rlh-mono);
	font-size: 26px;
}

.rlh-out-b .rlh-out-v {
	color: var(--rlh-olive);
}

.rlh-out-v small {
	font-size: 12px;
	color: var(--rlh-muted-4);
}

.rlh-out-b .rlh-out-v small {
	color: var(--rlh-muted-3);
}

/* Section 04 — verification table -------------------------------------- */

.rlh-table {
	border: 1px solid var(--rlh-line-2);
	background: #fff;
}

.rlh-thead,
.rl-home .rlh-trow {
	display: grid;
	grid-template-columns: 90px 1.6fr 1fr 1fr 1.2fr .9fr;
	align-items: center;
}

.rlh-thead {
	padding: 14px 24px;
	border-bottom: 1px solid var(--rlh-line-2);
	background: var(--rlh-panel);
	font-family: var(--rlh-mono);
	font-size: 9.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rlh-muted-3);
}

.rl-home .rlh-trow {
	padding: 17px 24px;
	border-bottom: 1px solid var(--rlh-line-4);
	transition: background .16s;
	color: inherit;
}

.rlh-trow:last-child {
	border-bottom: 0;
}

.rl-home .rlh-trow:hover {
	background: var(--rlh-panel);
	color: inherit;
}

.rlh-t-code { font-family: var(--rlh-mono); font-size: 11px; color: var(--rlh-muted-3); }
.rlh-t-name { font-size: 13.5px; font-weight: 500; }
.rlh-t-lot  { font-family: var(--rlh-mono); font-size: 12px; }
.rlh-t-pur  { font-family: var(--rlh-mono); font-size: 12px; color: var(--rlh-olive); }
.rlh-t-fac  { font-size: 12px; color: var(--rlh-muted); }
.rlh-t-date { font-family: var(--rlh-mono); font-size: 11px; color: var(--rlh-muted-3); }

.rlh-empty {
	padding: 44px 24px;
	text-align: center;
	font-size: 13px;
	line-height: 1.7;
	color: var(--rlh-muted);
}

/* Section 05 — handling ------------------------------------------------ */

.rlh-ship {
	display: grid;
	grid-template-columns: 620px 1fr;
	border: 1px solid var(--rlh-line-2);
}

.rlh-ship-media {
	overflow: hidden;
	background: var(--rlh-media);
}

.rlh-ship-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rlh-ship-copy {
	padding: 56px 56px 60px;
	background: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.rlh-ship-h {
	font-family: var(--rlh-serif);
	font-size: 46px;
	line-height: 1.05;
	letter-spacing: -.02em;
	margin: 0 0 20px;
	font-weight: 400;
}

.rlh-ship-body {
	font-size: 14px;
	line-height: 1.78;
	color: #4A5227;
	margin: 0 0 32px;
	max-width: 460px;
	text-wrap: pretty;
}

.rlh-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--rlh-line);
	border: 1px solid var(--rlh-line);
}

.rlh-tile {
	background: #fff;
	padding: 20px 22px;
}

.rlh-tile-v {
	font-family: var(--rlh-mono);
	font-size: 22px;
	color: var(--rlh-olive);
	margin-bottom: 7px;
}

.rlh-tile-l {
	font-size: 11px;
	color: var(--rlh-muted-2);
	line-height: 1.5;
}

/* Section 06 — field notes -------------------------------------------- */

.rlh-notes-count {
	font-family: var(--rlh-mono);
	font-size: 11px;
	color: var(--rlh-muted-3);
	letter-spacing: .08em;
	white-space: nowrap;
}

.rlh-notes-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.rlh-note {
	background: #fff;
	border: 1px solid var(--rlh-line);
	padding: 30px 32px 32px;
}

.rlh-note-stars {
	margin-bottom: 20px;
	color: var(--rlh-olive);
}

.rlh-note-quote {
	font-family: var(--rlh-serif);
	font-size: 21px;
	line-height: 1.42;
	margin: 0 0 24px;
	text-wrap: pretty;
}

.rlh-note-foot {
	padding-top: 18px;
	border-top: 1px solid var(--rlh-line-3);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.rlh-note-name {
	font-size: 12px;
	color: #4A5227;
}

.rlh-note-loc {
	font-family: var(--rlh-mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rlh-muted-4);
}

/* Closing band --------------------------------------------------------- */

/* Lives inside the footer now, so it carries no ground of its own: it sits on
   the footer's #333A14 and is separated by a hairline instead of a colour
   change. */
















/* Tablet --------------------------------------------------------------- */

@media (max-width: 1000px) {
	.rl-home .rlh-sec { padding: 64px 28px 0; }
	.rl-home .rlh-h2 { font-size: 38px; }

	.rlh-hero { grid-template-columns: 1fr; }
	.rlh-hero-copy { padding: 56px 28px 48px; }
	.rlh-h1 { font-size: 52px; }
	.rlh-hero-media { border-left: 0; border-top: 1px solid var(--rlh-line); min-height: 380px; }

	.rlh-trust-in { grid-template-columns: repeat(2, 1fr); padding: 0; }
	.rlh-trust-item:nth-child(2n) { border-right-color: transparent; }
	.rlh-trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--rlh-line-3); }

	.rlh-std-grid { grid-template-columns: repeat(2, 1fr); }
	.rlh-std-n { margin-bottom: 28px; }

	.rlh-sechead { flex-direction: column; align-items: flex-start; gap: 18px; }

	.rlh-calcsec { padding: 64px 0 0; }
	.rlh-calc { grid-template-columns: 1fr; }
	.rlh-calc-copy { padding: 48px 28px 40px; }
	.rlh-calc-h { font-size: 36px; }
	.rlh-calc-panel { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); padding: 36px 28px 40px; }

	.rlh-ship { grid-template-columns: 1fr; }
	.rlh-ship-media { min-height: 320px; }
	.rlh-ship-copy { padding: 40px 28px 44px; }
	.rlh-ship-h { font-size: 34px; }

	.rlh-notes-grid { grid-template-columns: 1fr; }


	/* The lot table stops being a grid and becomes stacked records. */
	.rlh-thead { display: none; }
	.rlh-trow {
		grid-template-columns: 1fr;
		gap: 4px;
		padding: 18px 20px;
	}
	.rlh-trow > span::before {
		content: attr(data-label) ": ";
		font-family: var(--rlh-mono);
		font-size: 9px;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--rlh-muted-4);
	}
}

/* Phone ---------------------------------------------------------------- */

@media (max-width: 680px) {
	.rl-home .rlh-sec { padding: 48px 28px 0; }
	.rl-home .rlh-h2 { font-size: 30px; }

	.rlh-hero-copy { padding: 40px 28px 36px; }
	.rlh-h1 { font-size: 38px; }
	.rlh-sub { font-size: 14.5px; }
	.rlh-cta { gap: 10px; }
	.rlh-btn { padding: 15px 22px; flex: 1 1 100%; }
	.rlh-hero-media { min-height: 300px; }

	.rlh-stats { grid-template-columns: 1fr; }
	.rlh-stat,
	.rlh-stat:first-child,
	.rlh-stat:last-child {
		padding: 16px 0;
		border-right: 0;
		border-bottom: 1px solid var(--rlh-line-3);
	}
	.rlh-stat:last-child { border-bottom: 0; }
	.rlh-stat-v { font-size: 28px; }

	.rlh-batch { left: 16px; right: 16px; bottom: 16px; padding: 12px 14px; }

	.rlh-trust-in { grid-template-columns: 1fr; padding: 0; }
	.rlh-trust-item { border-right-color: transparent; border-bottom: 1px solid var(--rlh-line-3); padding: 22px 28px; }
	.rlh-trust-item:last-child { border-bottom: 0; }

	.rlh-std-grid { grid-template-columns: 1fr; }
	.rlh-std { padding: 26px 22px 30px; }

	.rlh-card { width: 268px; }

	.rlh-calc-copy { padding: 36px 28px 32px; }
	.rlh-calc-h { font-size: 28px; }
	.rlh-calc-panel { padding: 28px 28px 32px; }
	.rlh-out { grid-template-columns: 1fr; }

	.rlh-ship-copy { padding: 30px 28px 34px; }
	.rlh-ship-h { font-size: 27px; }
	.rlh-tiles { grid-template-columns: 1fr; }

	.rlh-note { padding: 24px 22px 26px; }
	.rlh-note-quote { font-size: 28px; }


	.rlh-railfoot { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Theme gutter step: .rl-head-in, .rl-foot-in and .rl-sec all drop to 16px here. */
@media (max-width: 560px) {
	.rl-home .rlh-sec { padding-left: 16px; padding-right: 16px; }
	.rlh-hero-copy,
	.rlh-calc-copy,
	.rlh-calc-panel,
	.rlh-ship-copy,
	.rlh-trust-item { padding-left: 16px; padding-right: 16px; }
}

/* Header nav links to #reviews; offset the landing point past the sticky bar. */
#reviews { scroll-margin-top: 92px; }

/* ============================================================
 * Page frame, measured against the prototype: the homepage runs
 * edge to edge with 60px gutters, not inside the site's centred
 * wrap. Inset by the wrap, every section lost ~70px and the hero
 * copy column came out 729px against the design's 800.
 * ============================================================ */
.rlh-hero { max-width: none; margin-inline: 0; grid-template-columns: minmax(0, 1fr) 640px; }
.rlh-hero-copy { padding: 88px 60px 76px; }
.rlh-trust { max-width: none; margin-inline: 0; }
/* The design insets the row 32px and keeps 28px inside each item, not a
   60px gutter: 60px made the bar 19px taller than the design. */
.rlh-trust-in { padding: 0 32px; }
.rl-home .rlh-sec { max-width: none; margin-inline: 0; padding: 96px 60px 0; }

@media (max-width: 1100px) {
	.rlh-hero { grid-template-columns: minmax(0, 1fr); }
	.rlh-hero-copy { padding: 64px 28px 56px; }
	.rlh-trust-in { padding: 0; }
	.rl-home .rlh-sec { padding: 64px 28px 0; }
}
@media (max-width: 820px) {
	.rlh-hero-copy { padding: 44px 16px 40px; }
	.rlh-trust-in { padding: 0; }
	.rl-home .rlh-sec { padding: 48px 16px 0; }
}

/* ============================================================
 * Phone: the lot table reads as stacked records, and the field
 * notes become a swipeable carousel rather than a tall stack.
 * ============================================================ */
@media (max-width: 640px) {
	/* Each lot is its own card, swiped sideways: stacked end to end the table
	   ran several screens deep. */
	.rlh-table {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 82%;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		border: 0;
		margin-inline: -16px;
		padding-inline: 16px;
		padding-bottom: 4px;
	}
	.rlh-table::-webkit-scrollbar { display: none; }

	/* Label and value on one line, so a record stays compact. */
	.rl-home .rlh-trow {
		grid-template-columns: 1fr; gap: 7px; padding: 18px 20px; min-width: 0;
		scroll-snap-align: start;
		border: 1px solid var(--rlh-line, rgba(34, 39, 14, .14));
		background: #fff;
		align-content: start;
	}
	.rl-home .rlh-trow > span {
		display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
		min-width: 0; word-break: break-word;
	}
	.rl-home .rlh-trow > span::before { content: attr(data-label); flex: none; }
	.rl-home .rlh-trow > span:not(:last-child) { padding-bottom: 7px; border-bottom: 1px solid var(--rlh-line-3, rgba(34, 39, 14, .08)); }
	.rlh-tablehint {
		display: block; margin-top: 12px;
		font-family: var(--rlh-mono); font-size: 9.5px; letter-spacing: .16em;
		text-transform: uppercase; color: var(--rlh-muted-4, #A8B075);
	}

	/* Field notes carousel: native scroll-snap, no script needed. */
	.rlh-notes-grid {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 82%;
		grid-template-columns: none;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Bleed to the screen edges so a card can sit flush while scrolling. */
		margin-inline: -16px;
		padding-inline: 16px;
		padding-bottom: 4px;
	}
	.rlh-notes-grid::-webkit-scrollbar { display: none; }
	.rlh-note { scroll-snap-align: start; height: auto; }
	.rlh-notes-hint {
		display: block; margin-top: 12px;
		font-family: var(--rlh-mono); font-size: 9.5px; letter-spacing: .16em;
		text-transform: uppercase; color: var(--rlh-muted-4, #A8B075);
	}
}
@media (min-width: 821px) { .rlh-notes-hint { display: none; } }

@media (min-width: 821px) { .rlh-tablehint { display: none; } }

/* Homepage sections cap to the same wrap token as the rest of the site. */
.rlh-hero,
.rlh-trust,
.rl-home .rlh-sec,
.rlh-calcsec { max-width: var(--rlh-wrap, clamp(1280px, calc(100% - 56px), 1720px)); margin-inline: auto; }

/* Tablet portrait keeps the real table and a two-up notes grid; the carousels
   above are a phone treatment. */
@media (min-width: 641px) and (max-width: 820px) {
	.rlh-notes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
 * Homepage headings, dialled down from the design's own scale
 * (78px hero, 52px sections) at the client's request. Fluid so
 * they keep shrinking on smaller screens rather than stepping.
 * ============================================================ */
.rlh-h1 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.02; }
.rl-home .rlh-h2 { font-size: clamp(26px, 2.9vw, 38px); line-height: 1.08; }
.rlh-sub { font-size: 15px; }

@media (max-width: 1100px) {
	.rl-home .rlh-h2 { font-size: clamp(24px, 3.4vw, 32px); }
}