/* Luton Rentals Toolkit — base: font, tokens, shared parts. */

@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-display: swap;
	src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens are prefixed: Elementor containers define --display, --gap, --width… */
:root {
	--lr-night: #0d1624;
	--lr-dusk: #1b2a40;
	--lr-paper: #f3f5f7;
	--lr-white: #ffffff;
	--lr-line: #e1e5ea;
	--lr-steel: #6b7686;
	--lr-ink: #0d1624;
	--lr-ink-2: #364357;
	--lr-amber: #ffb020;
	--lr-amber-d: #f09c00;
	--lr-wrap: 1320px;
	--lr-gut: clamp(16px, 4vw, 48px);
	--lr-r: 16px;
	--lr-r-sm: 10px;
	--lr-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--lr-hdr: 80px;
}

html { overflow-x: hidden; }
body.lr-site { margin: 0; font-family: var(--lr-font); font-size: 17px; line-height: 1.6; color: var(--lr-ink); background: var(--lr-white); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.lr-site .site-main, body.lr-site .page-content { margin: 0; padding: 0; max-width: none; }
body.lr-site :focus-visible { outline: 3px solid var(--lr-amber); outline-offset: 3px; border-radius: 4px; }

.lr { font-family: var(--lr-font); color: inherit; box-sizing: border-box; }
.lr *, .lr *::before, .lr *::after { box-sizing: border-box; }
.lr :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; }
.lr :where(img, video) { display: block; max-width: 100%; }
.lr :where(a) { color: inherit; }
.lr :where(button) { font: inherit; color: inherit; }

.lr .wrap { max-width: var(--lr-wrap); margin: 0 auto; padding: 0 var(--lr-gut); }

.lr .h2 { font-weight: 600; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -0.03em; }
.lr .h4 { font-weight: 600; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; }
.lr .lead { color: var(--lr-steel); }
.lr .note { color: var(--lr-steel); font-size: 15px; margin-top: 20px; }
.lr .link { font-weight: 600; text-underline-offset: 5px; }

/* buttons: states at (0,3,0) so Hello's magenta hover/focus never shows */
.lr .btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border: 0; border-radius: 999px; font-family: var(--lr-font); font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s; }
.lr .btn--lg { height: 58px; padding: 0 32px; font-size: 17px; }
.lr .btn--amber, .lr .btn--amber:focus { background-color: var(--lr-amber); color: var(--lr-night); }
.lr .btn--amber:hover { background-color: var(--lr-amber-d); color: var(--lr-night); }
.lr .btn--ink, .lr .btn--ink:focus { background-color: var(--lr-night); color: var(--lr-white); }
.lr .btn--ink:hover { background-color: var(--lr-dusk); color: var(--lr-white); }
.lr .btn--line, .lr .btn--line:focus { background-color: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.lr .btn--line:hover { background-color: var(--lr-night); color: var(--lr-white); box-shadow: none; }

/* logo: the van mark (two tones via --mark-a / --mark-b) and the name */
.lr .logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.lr .logo__mark { width: 66px; height: 30px; flex: none; }
.lr .logo__word { font-weight: 600; font-size: 22px; letter-spacing: -0.02em; white-space: nowrap; }
.lr .logo--img img { max-height: 44px; width: auto; }
.lr .logo__svg { display: block; height: 30px; width: auto; aspect-ratio: 214.5 / 30; flex: none; }

/* Sections designed to follow another padded section (faq, prices) need their own
   top space when they come straight after a page hero or another tone change. */
.e-con:has(.lr.pagehero) + .e-con .lr:is(.faq, .prices) { padding-top: 96px; }
@media (max-width: 640px) {
	.e-con:has(.lr.pagehero) + .e-con .lr:is(.faq, .prices) { padding-top: 56px; }
}

@media (prefers-reduced-motion: reduce) {
	.lr *, .lr *::before, .lr *::after { transition: none !important; animation: none !important; }
}

@media (max-width: 640px) {
	body.lr-site { font-size: 16px; }
	:root { --lr-hdr: 60px; }
	.lr .logo__mark { width: 53px; height: 24px; }
	.lr .logo__word { font-size: 19px; }
	.lr .logo__svg { height: 24px; }
}