/* =========================================================================
   Billi rental: template-rental.php (/billi-rental/).
   Scoped to .rn, mobile first, min-width media queries only (640 / 768 /
   900 / 1200). The house recipe from the 18 Sep 2026 spec
   (docs/superpowers/specs/2026-09-18-support-and-content-pages-design.md),
   plus what this page needs. The enquiry form is styled by css/product.css
   through the .pd .pd-enquiry reuse; only namespaced overrides live here.

   Bands, top to bottom: navy hero, white intro, Green Grey benefits, the
   navy "how it works" band, white options, then the grey enquiry band
   (product.css) above the navy footer. The options band is white rather than
   tinted so that it does not run straight into the grey enquiry band.
   ========================================================================= */

.rn {
	--rn-navy: #181d46;      /* Billi Blue */
	--rn-lightblue: #90cdeb; /* primary button on dark, accents */
	--rn-grey: #eaeaea;      /* borders, rules */
	--rn-band-grey: #f5f5f5;
	--rn-band-tint: #f1f5f5; /* Green Grey */
	--rn-text: #000;
	--rn-muted: #75757b;
	--rn-gutter: 20px;

	font-family: var(--font-din);
	color: var(--rn-text);
	line-height: 1.5;
}

@media (min-width: 900px) {
	.rn { --rn-gutter: 40px; }
}

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

/* framework.css sets a global img { width: 100% }: width must be reset, not
   just max-width. Every sized image rule below carries the .rn prefix so it
   outranks this reset. */
.rn img {
	max-width: 100%;
	width: auto;
	height: auto;
	display: block;
}

.rn-container {
	width: 100%;
	max-width: 1436px; /* 1356px content + 2 x 40px */
	margin: 0 auto;
	padding-left: var(--rn-gutter);
	padding-right: var(--rn-gutter);
}


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

.rn-section { padding: 48px 0; }

@media (min-width: 900px) {
	.rn-section { padding: 80px 0; }
}

.rn-section--grey { background: var(--rn-band-grey); }
.rn-section--tint { background: var(--rn-band-tint); }
.rn-section--navy { background: var(--rn-navy); color: #fff; }

/* Headings are real h2/h3 elements printed from plain-text fields. */
.rn .rn-section-heading {
	margin: 0 0 12px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.18;
	color: var(--rn-navy);
	text-transform: none;
	letter-spacing: normal;
}

.rn-section--navy .rn-section-heading { color: #fff; }

.rn-section-intro {
	margin: 0;
	max-width: 66ch;
	font-size: 17px;
	line-height: 1.55;
	color: var(--rn-muted);
}

.rn-section--navy .rn-section-intro { color: rgba(255, 255, 255, 0.85); }

.rn-section-head { margin-bottom: 28px; }

@media (min-width: 900px) {
	.rn .rn-section-heading { font-size: 34px; }
	.rn-section-head { margin-bottom: 40px; }
}


/* ---- WYSIWYG output --------------------------------------------------------
   Base rules sit inside :where() so band and variant overrides win. (.sg's
   unwrapped version rendered a navy subheading on the navy band.) */

:where(.rn) .rn-text > :first-child { margin-top: 0; }
:where(.rn) .rn-text > :last-child { margin-bottom: 0; }
:where(.rn) .rn-text p { margin: 0 0 0.85em; }

:where(.rn) .rn-text :is(h2, h3, h4) {
	margin: 1.4em 0 0.5em;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--rn-navy);
}

:where(.rn) .rn-text :is(ul, ol) { margin: 0 0 0.9em; padding-left: 1.15em; }
:where(.rn) .rn-text li { margin: 0 0 0.45em; }

:where(.rn) .rn-text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rn-section--navy .rn-text :is(h2, h3, h4) { color: #fff; }
.rn-section--navy .rn-text a { color: var(--rn-lightblue); }


/* ---- Buttons ---------------------------------------------------------------
   desktop.css has a global a:hover { opacity: .7 }: every button opts out. */

/* 16px on a 1.5 line with 12px padding: 48px tall, the size the homepage,
   Why Billi, Specify Billi and the sector pages use. */
.rn .rn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 28px;
	border: 0;
	border-radius: 2px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.rn .rn-btn:hover,
.rn .rn-btn:focus-visible { opacity: 1; }

.rn .rn-btn--navy { background: var(--rn-navy); color: #fff; }

.rn .rn-btn--navy:hover,
.rn .rn-btn--navy:focus-visible {
	background: #fff;
	color: var(--rn-navy);
	box-shadow: inset 0 0 0 1px var(--rn-navy);
}

.rn .rn-btn--light { background: var(--rn-lightblue); color: var(--rn-navy); }

.rn .rn-btn--light:hover,
.rn .rn-btn--light:focus-visible { background: #fff; color: var(--rn-navy); }

.rn .rn-btn--ghost {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.rn .rn-btn--ghost:hover,
.rn .rn-btn--ghost:focus-visible {
	background: #fff;
	color: var(--rn-navy);
	box-shadow: none;
}

/* framework.css removes focus outlines sitewide. Navy on light grounds
   (#90cdeb on white is 1.7:1), white on navy. */
.rn :is(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--rn-navy);
	outline-offset: 3px;
}

.rn :is(.rn-hero, .rn-section--navy) :is(a, button, summary):focus-visible { outline-color: #fff; }


/* ---- Hero ------------------------------------------------------------------
   The photograph is 1658x526, a real office with two matte black taps on the
   counter. It is wide enough to cover the band at 1440px without upscaling
   (about 0.87x). The wash is heavy where the copy sits and falls away to the
   right, so the taps stay readable instead of sinking into a flat slate
   block, which is what the old upscaled banner strip did. The title is an h1:
   typography.css gives it DM Serif Display at 400. Never set its weight or
   family here. */

.rn-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 420px;
	background: var(--rn-navy);
	color: #fff;
	overflow: hidden;
}

.rn-hero__media,
.rn .rn-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rn .rn-hero__img { object-position: 62% 50%; }

.rn-hero__media { z-index: -2; }

/* On a phone the copy covers the whole width, so the wash is even top to
   bottom rather than a left-to-right fade. */
.rn-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(24, 29, 70, 0.72) 0%, rgba(24, 29, 70, 0.9) 100%);
}

.rn-hero__inner {
	width: 100%;
	padding-top: 48px;
	padding-bottom: 48px;
}

.rn-hero__content { max-width: 640px; }

.rn-hero__eyebrow {
	margin: 0 0 12px;
	color: var(--rn-lightblue);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.rn .rn-hero__title {
	margin: 0;
	color: #fff;
	font-size: 34px;
	line-height: 1.12;
}

.rn-hero__intro {
	margin: 16px 0 0;
	max-width: 56ch;
	color: rgba(255, 255, 255, 0.9);
	font-size: 17px;
	line-height: 1.5;
}

.rn-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.rn-hero__actions:empty { display: none; }

@media (min-width: 768px) {
	.rn-hero__overlay {
		background:
			linear-gradient(90deg,
				rgba(24, 29, 70, 0.94) 0%,
				rgba(24, 29, 70, 0.84) 34%,
				rgba(24, 29, 70, 0.42) 62%,
				rgba(24, 29, 70, 0.16) 100%),
			linear-gradient(180deg, rgba(24, 29, 70, 0) 55%, rgba(24, 29, 70, 0.35) 100%);
	}
}

@media (min-width: 900px) {
	.rn-hero { min-height: 500px; }
	.rn-hero__inner { padding-top: 72px; padding-bottom: 72px; }
	.rn .rn-hero__title { font-size: 52px; }
	.rn-hero__intro { font-size: 18px; }
}


/* ---- Intro: the lede beside the terms at a glance --------------------------- */

.rn-intro__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

@media (min-width: 900px) {
	.rn-intro__inner {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
		gap: 64px;
	}

	.rn-intro--plain .rn-intro__inner { grid-template-columns: minmax(0, 1fr); }
}

.rn-intro__text,
.rn-facts { min-width: 0; }

.rn-intro__text {
	max-width: 66ch;
	font-size: 17px;
	line-height: 1.6;
}

@media (min-width: 900px) {
	.rn-intro__text { font-size: 18px; }
}

.rn-facts {
	padding: 24px;
	border-radius: 4px;
	background: var(--rn-band-tint);
}

@media (min-width: 900px) {
	.rn-facts { padding: 32px; }
}

.rn .rn-facts__heading {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--rn-navy);
}

.rn-facts__list { margin: 0; }

.rn-fact {
	padding: 14px 0;
	border-top: 1px solid rgba(24, 29, 70, 0.12);
}

.rn-fact:first-child { border-top: 0; }
.rn-fact:last-child { padding-bottom: 0; }

.rn-fact__label {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--rn-muted);
}

.rn-fact__value {
	margin: 2px 0 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--rn-navy);
}


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

.rn-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

@media (min-width: 640px) {
	.rn-grid--2,
	.rn-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.rn-grid { gap: 28px; }
}

@media (min-width: 1200px) {
	.rn-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rn-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--rn-grey);
	border-radius: 4px;
	background: #fff;
}

@media (min-width: 900px) {
	.rn-card { padding: 28px; }
}

.rn-card--tint {
	border-color: transparent;
	background: var(--rn-band-tint);
}

@media (min-width: 900px) {
	.rn-card--tint { padding: 32px; }
}

.rn .rn-card__title {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--rn-navy);
}

.rn-card__text {
	margin: 8px 0 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--rn-muted);
}

.rn-card__body {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.6;
}

/* The end-of-term choices: a label and its explanation, one per line. */
.rn-card__body ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rn-card__body li {
	position: relative;
	margin: 0 0 12px;
	padding-left: 20px;
}

.rn-card__body li:last-child { margin-bottom: 0; }

.rn-card__body li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--rn-navy);
}

.rn-card__body strong { color: var(--rn-navy); font-weight: 600; }


/* ---- Why rent ------------------------------------------------------------- */

.rn-why__note {
	margin: 28px 0 0;
	max-width: 76ch;
	font-size: 16px;
	line-height: 1.55;
	color: var(--rn-text);
}

@media (min-width: 900px) {
	.rn-why__note { margin-top: 36px; }
}


/* ---- How renting works (navy) ------------------------------------------------
   Steps copied from .sg-steps: light-blue numbered circles on navy. */

.rn-how__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	align-items: center;
}

@media (min-width: 900px) {
	.rn-how__inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		gap: 64px;
	}

	.rn-how--plain .rn-how__inner { grid-template-columns: minmax(0, 1fr); }
}

.rn-how__body,
.rn-how__media { min-width: 0; }

.rn-steps {
	counter-reset: rn-step;
	list-style: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin: 28px 0 0;
	padding: 0;
}

@media (min-width: 640px) {
	.rn-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
}

.rn-step {
	counter-increment: rn-step;
	position: relative;
	min-width: 0;
	padding-left: 46px;
}

.rn-step::before {
	content: counter(rn-step);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--rn-lightblue);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	color: var(--rn-navy);
}

.rn .rn-step__title {
	margin: 5px 0 4px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
}

.rn-step__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}

.rn-how__note {
	margin: 32px 0 0;
	padding-top: 20px;
	max-width: 66ch;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}

/* 795x875 portrait. Capped and cropped so the band does not grow taller
   than the steps beside it; rendered at no more than about 0.8x. */
.rn .rn-how__img {
	width: 100%;
	max-height: 360px;
	object-fit: cover;
	object-position: 50% 45%;
	border-radius: 4px;
}

@media (min-width: 900px) {
	.rn .rn-how__img { max-height: 540px; }
}


/* ---- Options ---------------------------------------------------------------- */

.rn-options__note {
	margin: 20px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--rn-muted);
}


/* ---- Enquiry ------------------------------------------------------------------
   .pd .pd-enquiry from product.css carries the band, the aside and the form
   panel. product.css rings focus in light blue, which is 1.7:1 on the grey
   band; the aside's links get the navy ring instead. */

.rn .rn-enquiry .pd-enquiry__aside a:focus-visible {
	outline: 2px solid var(--rn-navy);
	outline-offset: 3px;
}