/*
 * Relocate — theme.
 *
 * Mobile first. Every breakpoint is min-width. The phone layout is the real
 * one; the desktop layout is the phone layout with room to breathe.
 */

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--rt-paper);
	color: var(--rt-ink);
	font-family: var(--rt-body);
	font-size: var(--rt-step-0);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Reserve room for the sticky bar so nothing hides behind it. */
body.has-book-bar {
	padding-bottom: calc(var(--rt-bar-h) + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3, h4 {
	font-family: var(--rt-display);
	font-weight: 700;
	letter-spacing: -0.018em;
	line-height: 1.12;
	margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }
a { color: var(--rt-crate); }
img { max-width: 100%; height: auto; }

/* Dates and numbers are data, and data is monospaced. This is the one type
   rule the whole site hangs on. */
.rt-data {
	font-family: var(--rt-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

:focus-visible {
	outline: 2px solid var(--rt-crate);
	outline-offset: 3px;
	border-radius: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.rt-skip {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 12px 20px;
	background: var(--rt-ink);
	color: #fff;
	text-decoration: none;
}
.rt-skip:focus { left: 12px; top: 12px; }

/* ---------- Layout ---------- */

.rt-wrap {
	width: 100%;
	max-width: var(--rt-max);
	margin: 0 auto;
	padding-inline: 20px;
}

.rt-wrap--narrow { max-width: var(--rt-narrow); }

.rt-main { display: block; }

.rt-eyebrow {
	font-family: var(--rt-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rt-crate);
	margin: 0 0 12px;
}

/* ---------- Buttons ---------- */

.rt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	min-height: 48px; /* thumb target */
	background: var(--rt-crate);
	color: #fff;
	border: 1px solid var(--rt-crate);
	border-radius: 7px;
	font-family: var(--rt-body);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, transform .06s ease;
}
.rt-btn:hover { background: var(--rt-crate-deep); border-color: var(--rt-crate-deep); color: #fff; }
.rt-btn:active { transform: translateY(1px); }

.rt-btn--sm { padding: 9px 16px; min-height: 40px; font-size: 0.85rem; }
.rt-btn--lg { padding: 17px 34px; min-height: 56px; font-size: 1.05rem; }
.rt-btn--block { width: 100%; }

.rt-btn--ghost {
	background: transparent;
	color: var(--rt-ink);
	border-color: var(--rt-line);
}
.rt-btn--ghost:hover { background: var(--rt-white); color: var(--rt-ink); border-color: var(--rt-ink-3); }

/* ---------- Header ---------- */

.rt-header {
	position: sticky;
	top: 0;
	z-index: 40;
	/* White, not the page's off-white. A logo uploaded as a JPEG carries a
	   solid white background it cannot shed, and against #f6f7f5 that shows
	   as a visible box around the mark. Matching the header to it makes the
	   logo sit flush whether it is the transparent PNG or a flat JPEG. */
	background: #fff;
	border-bottom: 1px solid var(--rt-line);
}

.rt-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rt-gap);
	min-height: 76px;
}

.rt-brand__link {
	align-items: center;
	display: flex;
	gap: 10px;
	text-decoration: none;
}

.rt-brand__mark {
	/* Height-led, width auto: the mark is roughly 6:5, and constraining the
	   width instead would let a squarer replacement grow the header. */
	display: block;
	height: 54px;
	width: auto;
	flex: 0 0 auto;
}

.rt-brand__text {
	font-family: var(--rt-display);
	font-weight: 800;
	font-size: 1.1rem;
	letter-spacing: -0.02em;
	color: var(--rt-ink);
	text-decoration: none;
	white-space: nowrap;
}

/* A logo set in the Customiser. WordPress prints whatever size was uploaded,
   so it has to be constrained here or a 500px square pushes the header open. */
.custom-logo-link {
	display: inline-flex;
	align-items: center;
}

.custom-logo {
	display: block;
	height: auto;
	max-height: 54px;
	/* Both caps needed: max-height alone will not stop a very wide banner
	   logo from squeezing the nav off the row. */
	max-width: 220px;
	width: auto;
	object-fit: contain;
}

/* Phones: the mark carries the brand, the words would only wrap the header
   onto two lines. Kept in the DOM for screen readers and for search. */
@media (max-width: 720px) {
	.rt-header__inner { min-height: 68px; }
	.rt-brand__mark { height: 46px; }

	.rt-brand__text {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.custom-logo { max-height: 46px; max-width: 170px; }
}

@media (max-width: 380px) {
	.rt-header__inner { min-height: 62px; }
	.rt-brand__mark { height: 40px; }
	.custom-logo { max-height: 40px; max-width: 140px; }
}

.rt-burger {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	margin-right: -8px;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--rt-ink);
}

.rt-burger__box,
.rt-burger__box span,
.rt-burger__box::before,
.rt-burger__box::after {
	display: block;
	width: 22px; height: 2px;
	background: currentColor;
	border-radius: 2px;
}
.rt-burger__box { position: relative; background: transparent; }
.rt-burger__box span { transition: opacity .15s ease; }
.rt-burger__box::before,
.rt-burger__box::after {
	content: "";
	position: absolute; left: 0;
	transition: transform .2s ease;
}
.rt-burger__box::before { top: -7px; }
.rt-burger__box::after  { top: 7px; }

.rt-burger[aria-expanded="true"] .rt-burger__box span { opacity: 0; }
.rt-burger[aria-expanded="true"] .rt-burger__box::before { transform: translateY(7px) rotate(45deg); }
.rt-burger[aria-expanded="true"] .rt-burger__box::after  { transform: translateY(-7px) rotate(-45deg); }

.rt-nav {
	display: none;
	position: absolute;
	inset: 62px 0 auto 0;
	background: var(--rt-white);
	border-bottom: 1px solid var(--rt-line);
	padding: 16px 20px 22px;
	box-shadow: 0 18px 40px -24px rgba(20, 32, 27, .3);

	/* A menu with sub-menus expanded will run off a phone in landscape.
	   Let it scroll rather than putting the last item somewhere unreachable. */
	max-height: calc(100dvh - 62px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.rt-nav.is-open { display: block; }

/* ---- Nav, mobile first: an accordion ----
   The sub-menu is closed until something opens it. On a phone that something
   is a thumb on a button, never a hover, because hover does not exist here. */

.rt-nav__list { list-style: none; margin: 0 0 16px; padding: 0; }

.rt-nav__list > li { border-bottom: 1px solid var(--rt-line-soft); }

.rt-nav__list a,
.rt-nav__list .rt-sub-toggle--full {
	display: block;
	width: 100%;
	padding: 14px 0;
	color: var(--rt-ink);
	text-decoration: none;
	font-weight: 500;
	font-family: var(--rt-body);
	font-size: 1rem;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
}

.rt-nav__list a:hover,
.rt-nav__list .rt-sub-toggle--full:hover { color: var(--rt-crate); }

/* A parent row: label on the left, the arrow that opens it on the right. */
.rt-has-sub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.rt-has-sub > a { flex: 1; }

.rt-sub-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 44px;
	min-height: 44px;   /* thumb target, not a decoration */
	padding: 0 8px;
	margin: 0;
	background: none;
	border: 0;
	color: var(--rt-ink-2);
	cursor: pointer;
}

.rt-sub-toggle--full {
	justify-content: space-between;
	padding: 14px 0;
}

.rt-sub-toggle:hover { color: var(--rt-crate); }

.rt-chev { transition: transform .18s ease; flex: none; }
.rt-sub-toggle[aria-expanded="true"] .rt-chev { transform: rotate(180deg); }

.rt-nav__list .sub-menu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0 0 10px 14px;
	width: 100%;          /* break out of the flex row onto its own line */
	border-left: 2px solid var(--rt-line);
}

.rt-has-sub.is-open > .sub-menu { display: block; }

.rt-nav__list .sub-menu li { border: 0; }

.rt-nav__list .sub-menu a {
	padding: 10px 0 10px 12px;
	font-size: 0.94rem;
	font-weight: 400;
	color: var(--rt-ink-2);
}
.rt-nav__list .sub-menu a:hover { color: var(--rt-crate); }

.rt-nav__actions { display: flex; align-items: center; gap: 12px; }
.rt-nav__phone { color: var(--rt-ink); text-decoration: none; font-size: 0.9rem; font-weight: 500; }
.rt-nav__actions .rt-btn { flex: 1; }

/* ---------- Hero: the date field IS the pitch ---------- */

.rt-hero {
	padding: var(--rt-gap-3) 0 var(--rt-gap-4);
	background:
		linear-gradient(180deg, var(--rt-crate-soft) 0%, var(--rt-paper) 78%);
}

.rt-hero__title {
	font-size: var(--rt-step-4);
	font-weight: 800;
	margin: 0 0 16px;
	max-width: 15ch;
}

.rt-hero__sub {
	color: var(--rt-ink-2);
	font-size: var(--rt-step-1);
	line-height: 1.55;
	max-width: 44ch;
	margin: 0 0 var(--rt-gap-2);
}

.rt-datestart {
	background: var(--rt-white);
	border: 1px solid var(--rt-line);
	border-radius: var(--rt-radius);
	padding: 22px;
	box-shadow: 0 22px 50px -34px rgba(20, 32, 27, .45);
}

.rt-datestart__label {
	display: block;
	font-family: var(--rt-display);
	font-weight: 700;
	font-size: 1.15rem;
	margin-bottom: 10px;
}

.rt-datestart__input {
	width: 100%;
	padding: 15px 16px;
	margin-bottom: 12px;
	min-height: 56px;
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--rt-ink);
	background: var(--rt-paper);
	border: 1.5px solid var(--rt-line);
	border-radius: 7px;
	/* iOS renders date inputs at whatever size it likes unless told. */
	-webkit-appearance: none;
	appearance: none;
}
.rt-datestart__input:focus { border-color: var(--rt-crate); background: var(--rt-white); }

.rt-datestart__note {
	margin: 12px 0 0;
	font-size: 0.8rem;
	color: var(--rt-ink-3);
	text-align: center;
}

/* ---------- Sections ---------- */

.rt-section { padding: var(--rt-gap-4) 0; }
.rt-section--tight { padding: var(--rt-gap-3) 0; }

.rt-section__head { max-width: 46ch; margin-bottom: var(--rt-gap-3); }
.rt-section__title { font-size: var(--rt-step-3); margin: 0 0 12px; }
.rt-section__title--sm { font-size: var(--rt-step-1); margin-bottom: 16px; }
.rt-section__lede { color: var(--rt-ink-2); font-size: var(--rt-step-0); margin: 0; }

.rt-page__head { padding: var(--rt-gap-3) 0 var(--rt-gap-2); max-width: 46ch; }
.rt-page__title { font-size: var(--rt-step-3); margin: 0 0 12px; }
.rt-page__lede { color: var(--rt-ink-2); }

/* ---------- Timeline: the signature ----------
   Vertical on mobile. A horizontal timeline on a 380px screen is a lie you
   tell yourself in Figma. */

.rt-timeline {
	padding: var(--rt-gap-4) 0;
	background: var(--rt-white);
	border-block: 1px solid var(--rt-line);
}

.rt-track {
	list-style: none;
	margin: 0;
	padding: 0 0 0 26px;
	position: relative;
}

/* The rail. */
.rt-track::before {
	content: "";
	position: absolute;
	left: 5px; top: 6px; bottom: 6px;
	width: 2px;
	background: linear-gradient(180deg, var(--rt-line) 0%, var(--rt-crate) 50%, var(--rt-line) 100%);
}

.rt-track__stop {
	position: relative;
	padding-bottom: var(--rt-gap-2);
}
.rt-track__stop:last-child { padding-bottom: 0; }

.rt-track__dot {
	position: absolute;
	left: -26px; top: 5px;
	width: 12px; height: 12px;
	background: var(--rt-white);
	border: 2px solid var(--rt-crate);
	border-radius: 50%;
}

/* Moving day is the only stop that gets signal orange. It is the only stop
   with a truck outside. */
.rt-track__stop.is-move .rt-track__dot {
	background: var(--rt-signal);
	border-color: var(--rt-signal);
	box-shadow: 0 0 0 4px var(--rt-signal-soft);
}
.rt-track__stop.is-move .rt-track__offset { color: var(--rt-signal); }
.rt-track__stop.is-move .rt-track__when { color: var(--rt-ink); font-weight: 700; }

.rt-track__offset {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--rt-ink-3);
	letter-spacing: 0.04em;
}

.rt-track__when {
	margin: 0 0 6px;
	font-family: var(--rt-display);
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--rt-ink);
}

.rt-track__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.rt-track__items li {
	font-size: 0.82rem;
	color: var(--rt-ink-2);
	background: var(--rt-crate-soft);
	border-radius: 100px;
	padding: 4px 11px;
}

/* ---------- Cards ---------- */

.rt-stage { margin-bottom: var(--rt-gap-3); }

.rt-stage__title {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: var(--rt-step-1);
	padding-bottom: 12px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--rt-line);
}

.rt-stage__mark {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--rt-crate);
	letter-spacing: 0.08em;
}

.rt-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.rt-card {
	background: var(--rt-white);
	border: 1px solid var(--rt-line);
	border-radius: var(--rt-radius);
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.rt-card:hover {
	border-color: var(--rt-crate);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -22px rgba(20, 32, 27, .5);
}

.rt-card__link {
	display: block;
	padding: 18px 20px;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.rt-card__name { font-size: 1.05rem; margin: 0 0 6px; }

.rt-card__price {
	margin: 0 0 10px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--rt-crate);
}
.rt-card__price em {
	font-family: var(--rt-body);
	font-style: normal;
	font-weight: 400;
	font-size: 0.8rem;
	color: var(--rt-ink-3);
}

.rt-card__blurb {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--rt-ink-2);
}

.rt-tag {
	display: inline-block;
	margin-top: 12px;
	padding: 3px 10px;
	border-radius: 100px;
	font-size: 0.72rem;
	font-weight: 600;
	background: var(--rt-line-soft);
	color: var(--rt-ink-2);
}
.rt-tag--own { background: var(--rt-crate-soft); color: var(--rt-crate-deep); }
.rt-tag--when { background: transparent; border: 1px solid var(--rt-line); color: var(--rt-ink-3); font-weight: 500; }

/* ---------- Honesty ---------- */

.rt-honesty {
	padding: var(--rt-gap-4) 0;
	background: var(--rt-ink);
	color: var(--rt-paper);
}
.rt-honesty__title { color: #fff; font-size: var(--rt-step-2); margin-bottom: var(--rt-gap-2); }
.rt-honesty__grid { display: grid; gap: var(--rt-gap-2); }
.rt-honesty__item h3 { color: #fff; font-size: 1.05rem; margin: 6px 0 8px; }
.rt-honesty__item p { color: rgba(246, 247, 245, 0.72); font-size: 0.9rem; margin: 0; line-height: 1.6; }
.rt-honesty__mark {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: #6fbfa6;
}

/* ---------- The alarm. Signal orange lives here and on moving day. Nowhere else. ---------- */

.rt-alarm {
	margin: var(--rt-gap-2) 0;
	padding: 18px 20px;
	background: var(--rt-signal-soft);
	border-left: 3px solid var(--rt-signal);
	border-radius: 0 8px 8px 0;
}
.rt-alarm__label {
	margin: 0 0 6px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rt-signal);
}
.rt-alarm__body { margin: 0; font-size: 0.92rem; line-height: 1.6; }

/* ---------- Documents ---------- */

.rt-doc { padding: var(--rt-gap-2) 0 var(--rt-gap-4); }

.rt-crumbs {
	font-family: var(--rt-mono);
	font-size: 0.75rem;
	color: var(--rt-ink-3);
	padding: var(--rt-gap) 0 var(--rt-gap-2);
}
.rt-crumbs a { color: var(--rt-ink-3); text-decoration: none; }
.rt-crumbs a:hover { color: var(--rt-crate); }
.rt-crumbs span { margin: 0 6px; }

.rt-doc__head { margin-bottom: var(--rt-gap-2); }
.rt-doc__title { font-size: var(--rt-step-3); margin: 0 0 14px; }

.rt-doc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rt-doc__price { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--rt-crate); }
.rt-doc__price em {
	font-family: var(--rt-body);
	font-style: normal;
	font-weight: 400;
	font-size: 0.82rem;
	color: var(--rt-ink-3);
}
.rt-doc__meta .rt-tag { margin-top: 0; }

.rt-doc__image { margin: 0 0 var(--rt-gap-2); }
.rt-doc__image img { border-radius: var(--rt-radius); display: block; width: 100%; }

.rt-doc__body { font-size: 1.03rem; line-height: 1.72; }
.rt-doc__body h2 { font-size: var(--rt-step-1); margin-top: 1.8em; }
.rt-doc__body h3 { font-size: 1.1rem; margin-top: 1.5em; }
.rt-doc__body ul, .rt-doc__body ol { padding-left: 1.2em; }
.rt-doc__body li { margin-bottom: 0.4em; }
.rt-doc__body blockquote {
	margin: 1.5em 0;
	padding-left: 18px;
	border-left: 3px solid var(--rt-crate);
	color: var(--rt-ink-2);
	font-style: normal;
}

/* The local block. The only reason a suburb page deserves to exist, so it
   looks like it. */
.rt-local {
	margin: 0 0 var(--rt-gap-2);
	padding: 20px 22px;
	background: var(--rt-crate-soft);
	border-left: 3px solid var(--rt-crate);
	border-radius: 0 8px 8px 0;
}
.rt-local__label {
	margin: 0 0 6px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rt-crate-deep);
}
.rt-local p:last-child { margin-bottom: 0; }

.rt-inline-cta {
	display: grid;
	gap: 16px;
	margin: var(--rt-gap-3) 0;
	padding: 24px;
	background: var(--rt-white);
	border: 1px solid var(--rt-line);
	border-radius: var(--rt-radius);
}
.rt-inline-cta h2 { font-size: 1.2rem; margin: 0 0 4px; }
.rt-inline-cta p { margin: 0; color: var(--rt-ink-2); font-size: 0.9rem; }
.rt-inline-cta .rt-btn { width: 100%; }

.rt-suburbs, .rt-related { margin-top: var(--rt-gap-3); padding-top: var(--rt-gap-2); border-top: 1px solid var(--rt-line); }

.rt-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rt-chips a {
	display: inline-block;
	padding: 7px 14px;
	background: var(--rt-white);
	border: 1px solid var(--rt-line);
	border-radius: 100px;
	font-size: 0.85rem;
	text-decoration: none;
	color: var(--rt-ink);
}
.rt-chips a:hover { border-color: var(--rt-crate); background: var(--rt-crate-soft); color: var(--rt-crate-deep); }

/* ---------- Close ---------- */

.rt-close {
	padding: var(--rt-gap-4) 0;
	background: var(--rt-crate);
	color: #fff;
	text-align: center;
}
.rt-close__title { color: #fff; font-size: var(--rt-step-2); margin: 0 0 22px; }
.rt-close .rt-btn {
	background: #fff;
	color: var(--rt-crate-deep);
	border-color: #fff;
}
.rt-close .rt-btn:hover { background: var(--rt-paper); color: var(--rt-crate-deep); }

/* ---------- Empty ---------- */

.rt-none { padding: var(--rt-gap-4) 0; }
.rt-none__title { font-size: var(--rt-step-2); }
.rt-none .rt-btn { margin-right: 8px; margin-top: 8px; }

/* ---------- Search & pagination ---------- */

.rt-search { display: flex; gap: 8px; margin: 16px 0; }
.rt-search input {
	flex: 1;
	padding: 12px 14px;
	min-height: 48px;
	border: 1px solid var(--rt-line);
	border-radius: 7px;
	font: inherit;
	background: var(--rt-white);
}

.rt-pagination { margin: var(--rt-gap-3) 0; }
.rt-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	margin-right: 4px;
	border: 1px solid var(--rt-line);
	border-radius: 6px;
	text-decoration: none;
	color: var(--rt-ink);
	font-family: var(--rt-mono);
	font-size: 0.85rem;
}
.rt-pagination .page-numbers.current { background: var(--rt-ink); color: #fff; border-color: var(--rt-ink); }

/* ---------- Footer ---------- */

.rt-footer {
	padding: var(--rt-gap-4) 0 var(--rt-gap-3);
	background: var(--rt-white);
	border-top: 1px solid var(--rt-line);
}
.rt-footer__grid { display: grid; gap: var(--rt-gap-2); }
.rt-footer__name { font-family: var(--rt-display); font-weight: 800; font-size: 1.1rem; margin: 0 0 4px; }
.rt-footer__desc { color: var(--rt-ink-2); font-size: 0.9rem; margin: 0 0 10px; }
.rt-footer__phone { font-weight: 600; text-decoration: none; }
.rt-footer__heading {
	font-family: var(--rt-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rt-ink-3);
	margin: 0 0 10px;
}
.rt-footer__list { list-style: none; margin: 0; padding: 0; }
.rt-footer__list li { margin-bottom: 7px; }
.rt-footer__list a { color: var(--rt-ink-2); text-decoration: none; font-size: 0.88rem; }
.rt-footer__list a:hover { color: var(--rt-crate); }
.rt-footer__legal {
	margin: var(--rt-gap-3) 0 0;
	padding-top: var(--rt-gap);
	border-top: 1px solid var(--rt-line-soft);
	font-size: 0.8rem;
	color: var(--rt-ink-3);
	max-width: 70ch;
}

/* ---------- The sticky book bar ----------
   On mobile this is the navigation model. Whatever page you land on, the
   booking is one thumb-reach away. */

.rt-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 50;
	display: flex;
	gap: 10px;
	align-items: stretch;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(1.4) blur(10px);
	border-top: 1px solid var(--rt-line);
	transform: translateY(0);
	transition: transform .25s ease;
}

/* Slide it away while the user is scrolling up to read, bring it back the
   moment they stop or head back down. It should never be in the way of the
   thing it is selling. */
.rt-bar.is-hidden { transform: translateY(120%); }

.rt-bar__phone {
	display: grid;
	place-items: center;
	width: 48px;
	flex: none;
	border: 1px solid var(--rt-line);
	border-radius: 7px;
	color: var(--rt-ink);
	text-decoration: none;
	background: var(--rt-white);
}
.rt-bar__phone:hover { border-color: var(--rt-crate); color: var(--rt-crate); }

.rt-bar__cta {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 6px 16px;
	background: var(--rt-crate);
	color: #fff;
	border-radius: 7px;
	text-decoration: none;
	font-weight: 600;
	line-height: 1.2;
}
.rt-bar__cta:hover { background: var(--rt-crate-deep); color: #fff; }

.rt-bar__hint {
	font-family: var(--rt-mono);
	font-size: 0.66rem;
	font-weight: 400;
	opacity: 0.75;
	margin-top: 1px;
}

/* =========================================================================
   Breakpoints. Min-width only.
   ====================================================================== */

@media (min-width: 40em) {

	.rt-cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.rt-inline-cta { grid-template-columns: 1fr auto; align-items: center; }
	.rt-inline-cta .rt-btn { width: auto; }
	.rt-honesty__grid { grid-template-columns: repeat(3, 1fr); gap: var(--rt-gap-2); }
	.rt-honesty__grid--two { grid-template-columns: repeat(2, 1fr); }
	.rt-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 60em) {

	/* The bar is a mobile device. On desktop the header CTA is always visible,
	   so the bar would just be a second, redundant one. */
	.rt-bar { display: none; }
	body.has-book-bar { padding-bottom: 0; }

	.rt-burger { display: none; }

	.rt-nav {
		display: flex !important;
		position: static;
		align-items: center;
		gap: var(--rt-gap-2);
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
		max-height: none;
		overflow: visible;   /* or the dropdown panels get clipped */
	}
	/* ---- Nav, desktop: dropdown panels ----
	   The button still does the work. Hover is added on top as a convenience,
	   never as the mechanism — a keyboard user gets the same menu by the same
	   button, and focus-within keeps it open while they Tab through it. */

	.rt-nav__list { display: flex; gap: 2px; margin: 0; align-items: center; }
	.rt-nav__list > li { border: 0; }

	.rt-nav__list a,
	.rt-nav__list .rt-sub-toggle--full {
		padding: 8px 12px;
		font-size: 0.92rem;
		width: auto;
		white-space: nowrap;
	}

	.rt-has-sub {
		position: relative;
		flex-wrap: nowrap;
		gap: 0;
	}

	.rt-has-sub > a { flex: none; padding-right: 2px; }

	.rt-sub-toggle {
		min-width: 0;
		min-height: 0;
		padding: 8px 8px 8px 2px;
	}

	.rt-sub-toggle--full {
		gap: 4px;
		padding: 8px 10px;
	}

	.rt-nav__list .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 60;
		display: block;          /* present, but not visible */
		min-width: 230px;
		padding: 8px;
		width: auto;
		background: var(--rt-white);
		border: 1px solid var(--rt-line);
		border-left: 1px solid var(--rt-line);
		border-radius: 10px;
		box-shadow: 0 20px 40px -22px rgba(20, 32, 27, .35);

		/* Hidden without display:none, so it can animate and so the browser
		   still knows where it is for focus management. */
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity .16s ease, transform .16s ease, visibility .16s;
	}

	.rt-has-sub:hover > .sub-menu,
	.rt-has-sub:focus-within > .sub-menu,
	.rt-has-sub.is-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.rt-nav__list .sub-menu a {
		padding: 9px 12px;
		border-radius: 6px;
		font-size: 0.9rem;
		color: var(--rt-ink);
		white-space: nowrap;
	}
	.rt-nav__list .sub-menu a:hover {
		background: var(--rt-crate-soft);
		color: var(--rt-crate-deep);
	}

	/* Last item's panel would run off the right edge. Anchor it right. */
	.rt-nav__list > li:last-of-type .sub-menu { left: auto; right: 0; }
	.rt-nav__actions { gap: 16px; }
	.rt-nav__actions .rt-btn { flex: none; }

	/* Hero: copy left, the date field right and raised. The form is not an
	   afterthought below the fold — it is half the hero. */
	.rt-hero__inner {
		display: grid;
		grid-template-columns: 1.15fr 0.85fr;
		gap: var(--rt-gap-4);
		align-items: center;
	}
	.rt-hero { padding: var(--rt-gap-5) 0; }
	.rt-datestart { padding: 28px; }

	/* Timeline goes horizontal. Only here, where there is room for it to be
	   true. */
	.rt-track {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 18px;
		padding: 30px 0 0;
	}
	.rt-track::before {
		left: 0; right: 0; top: 5px; bottom: auto;
		width: auto; height: 2px;
		background: linear-gradient(90deg, var(--rt-line) 0%, var(--rt-crate) 50%, var(--rt-line) 100%);
	}
	.rt-track__stop { padding: 0 8px 0 0; }
	.rt-track__dot { left: 0; top: -30px; }
	.rt-track__items { flex-direction: column; align-items: flex-start; }

	.rt-cards { grid-template-columns: repeat(3, 1fr); }
	.rt-cards--3 { grid-template-columns: repeat(3, 1fr); }

	.rt-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--rt-gap-3); }
}

/* ---------- Quality floor ---------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.rt-bar { transition: none; }
}

@media print {
	.rt-bar, .rt-header, .rt-footer, .rt-close, .rt-inline-cta { display: none !important; }
	body { background: #fff; padding: 0; }
}

/* Quiet sign-in. Findable, never sold. */
.rt-nav__login {
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--rt-ink-2);
	text-decoration: none;
	white-space: nowrap;
}
.rt-nav__login:hover { color: var(--rt-crate); }

.rt-footer__login { margin: var(--rt-gap-2) 0 0; }
.rt-footer__login a { font-size: 0.85rem; color: var(--rt-ink-2); text-decoration: none; }
.rt-footer__login a:hover { color: var(--rt-crate); }

/* The magic-link form is one field. Let it be one field. */
.reloc-form--login { max-width: 30rem; }

/* Owner-only setup warning. Never shown to a visitor. */
.rt-setup {
	margin-bottom: 14px;
	padding: 16px 18px;
	background: var(--rt-signal-soft);
	border: 1px solid var(--rt-signal);
	border-radius: var(--rt-radius);
	font-size: 0.88rem;
	line-height: 1.55;
}
.rt-setup p { margin: 0 0 6px; }
.rt-setup p:last-child { margin-bottom: 0; }
.rt-setup__label {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rt-signal);
}

/* Unpriced services. Quiet, not broken. */
.rt-doc__price--quoted,
.rt-card__price em:only-child {
	color: var(--rt-ink-3);
	font-weight: 400;
}

/* The price ladder in service content. It is the only table on the site and
   the only published price, so it should read like a price list, not a spec
   sheet — numbers in mono, right-aligned, so they line up and compare. */
.rt-doc__body table {
	width: 100%;
	max-width: 22rem;
	margin: 1.5em 0;
	border-collapse: collapse;
	font-family: var(--rt-mono);
	font-variant-numeric: tabular-nums;
}
.rt-doc__body th {
	text-align: left;
	font-family: var(--rt-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rt-ink-3);
	padding: 0 0 8px;
	border-bottom: 1px solid var(--rt-line);
}
.rt-doc__body th:last-child,
.rt-doc__body td:last-child { text-align: right; }
.rt-doc__body td {
	padding: 11px 0;
	border-bottom: 1px solid var(--rt-line-soft);
	font-size: 0.95rem;
}
.rt-doc__body tbody tr:last-child td {
	border-bottom: 0;
	font-weight: 600;
}


.rt-honesty__grid--two { grid-template-columns: 1fr; }

@media (min-width: 40em) {
	.rt-honesty__grid--two { grid-template-columns: repeat(2, 1fr); }
}

/* Footer bar: sign-in on one side, the legal links on the other. */
.rt-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: var(--rt-gap-2);
}

.rt-footer__login { margin: 0; }

.rt-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.rt-footer__legal-links a {
	font-size: 0.85rem;
	color: var(--rt-ink-2);
	text-decoration: none;
}
.rt-footer__legal-links a:hover { color: var(--rt-crate); }

/* Legal pages. Long text nobody wants to read, so make it readable. */
.reloc-legal {
	max-width: 40rem;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--rt-ink);
}

.reloc-legal__meta {
	font-family: var(--rt-mono);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--rt-ink-3);
	padding-bottom: 14px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--rt-line);
}

.reloc-legal h2 {
	margin: 2.2em 0 0.6em;
	font-size: 1.25rem;
}

.reloc-legal h3 { margin: 0 0 0.4em; font-size: 1.02rem; }
.reloc-legal ul { padding-left: 1.2em; }
.reloc-legal li { margin-bottom: 0.4em; }

/* The Consumer Guarantees Act carve-out. It is the most important block on
   the page and it is the one a reader is least likely to reach, so it does
   not get to look like the rest of the page. */
.reloc-legal__callout {
	margin: 1.6em 0;
	padding: 20px 22px;
	background: var(--rt-crate-soft);
	border-left: 3px solid var(--rt-crate);
	border-radius: 0 8px 8px 0;
}
.reloc-legal__callout p:last-child { margin-bottom: 0; }

/* Owner-only warning when a legal page is missing. */
.reloc-setup-warn {
	margin: 0 0 14px;
	padding: 14px 16px;
	background: var(--rt-signal-soft);
	border: 1px solid var(--rt-signal);
	border-radius: 8px;
	font-size: 0.85rem;
	line-height: 1.55;
}

/* ---- The account section ---- */

.rt-portal {
	padding: var(--rt-gap-4) 0;
	background: var(--rt-white);
	border-block: 1px solid var(--rt-line);
}

.rt-portal__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--rt-gap-2);
}

.rt-portal__item {
	padding: 22px;
	background: var(--rt-paper);
	border-radius: var(--rt-radius);
}

.rt-portal__mark {
	display: block;
	margin-bottom: 8px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--rt-crate);
}

.rt-portal__item h3 {
	margin: 0 0 8px;
	font-size: 1.05rem;
}

.rt-portal__item p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--rt-ink-2);
}

.rt-portal__cta { margin: var(--rt-gap-2) 0 0; }

@media (min-width: 40em) {
	.rt-portal__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- The portal shell. No site header, no footer, no sticky bar. ---- */

.rt-app-body {
	background: var(--rt-paper);
	padding-bottom: 0;
}

.rt-appbar {
	background: var(--rt-white);
	border-bottom: 1px solid var(--rt-line);
}

.rt-appbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 100rem;
	margin: 0 auto;
	padding: 14px 24px;
	min-height: 60px;
}

.rt-appbar__brand {
	font-family: var(--rt-display);
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: -0.02em;
	color: var(--rt-ink);
	text-decoration: none;
}

.rt-appbar__logo { max-height: 34px; width: auto; display: block; }

.rt-appbar__actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

.rt-appbar__phone {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--rt-ink);
	text-decoration: none;
}
.rt-appbar__phone:hover { color: var(--rt-crate); }

.rt-appbar__back {
	font-size: 0.85rem;
	color: var(--rt-ink-2);
	text-decoration: none;
	white-space: nowrap;
}
.rt-appbar__back:hover { color: var(--rt-crate); }

/* The portal, not the marketing site. It gets the width it needs.
 *
 * Capping this at 68rem while the plugin's own shell was also capped at 68rem
 * meant the wider shell was just a wider div inside a narrower one — the outer
 * limit wins, and the inner change does nothing. Both have to move. */
.rt-app {
	max-width: 100rem;
	margin: 0 auto;
	padding: 24px 24px 40px;
}

@media (max-width: 560px) {
	.rt-appbar__phone { display: none; }
	.rt-app { padding: 18px 16px 24px; }
}

/* Footer brand */

.rt-footer__name {
	align-items: center;
	display: flex;
	gap: 10px;
}

.rt-footer__mark {
	display: block;
	flex: 0 0 auto;
	height: 32px;
	width: auto;
}