/* Tomkins Motors by Pencilino */

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-normal-100-900.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-italic-100-900.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Barlow";
	src: url("../fonts/barlow-normal-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Barlow";
	src: url("../fonts/barlow-normal-500.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "Barlow";
	src: url("../fonts/barlow-normal-600.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}

:root {
	--tm-bg: #0E1115;
	--tm-surface: #161A20;
	--tm-line: #29303A;
	--tm-ink: #EEF0F2;
	--tm-muted: #9BA4AF;
	--tm-chrome: #C9CFD6;
	--tm-accent: #CF2129;
	--tm-accent-hover: #B81B22;

	--tm-font-display: "Archivo", "Arial Narrow", sans-serif;
	--tm-font-body: "Barlow", "Segoe UI", sans-serif;

	--tm-radius: 4px;
	--tm-space-sm: 8px;
	--tm-space-md: 16px;
	--tm-space-lg: 32px;
	--tm-space-xl: 64px;
	--tm-space-xxl: 112px;

	--tm-wrap: 1200px;
	--tm-gutter: clamp(20px, 5vw, 48px);
}

/* Safe resets: box sizing and margins only. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

:where(body, h1, h2, h3, p, dl, dd, address, figure) {
	margin: 0;
}

html {
	background: var(--tm-bg);
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--tm-bg);
	color: var(--tm-ink);
	font-family: var(--tm-font-body);
	font-size: 1.0625rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

:where(a) {
	color: inherit;
}

:where(a):focus-visible {
	outline: 2px solid var(--tm-chrome);
	outline-offset: 3px;
}

.tm-wrap {
	width: 100%;
	max-width: calc(var(--tm-wrap) + 2 * var(--tm-gutter));
	margin-inline: auto;
	padding-inline: var(--tm-gutter);
}

.tm-skip {
	position: absolute;
	left: var(--tm-gutter);
	top: -100px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--tm-ink);
	color: var(--tm-bg);
	border-radius: var(--tm-radius);
	font-weight: 600;
}
.tm-skip:focus {
	top: 12px;
}

/* Logo frame: fixed aspect ratio, the image never sets the size. */
.tm-logo-frame {
	display: block;
	aspect-ratio: 364 / 154;
	overflow: hidden;
}
.tm-logo-frame .tm-logo-frame__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 0% 50%;
}
.tm-logo-frame--header {
	width: clamp(140px, 18vw, 200px);
}
.tm-logo-frame--footer {
	width: 150px;
}

/* Header */
.tm-header {
	border-bottom: 1px solid var(--tm-line);
	background: var(--tm-bg);
}
.tm-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tm-space-md);
	padding-block: 14px;
}
.tm-header__brand {
	display: block;
	flex-shrink: 0;
}
.tm-header__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.2;
}
.tm-header__label {
	color: var(--tm-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.tm-header__phone {
	font-family: var(--tm-font-display);
	font-stretch: 112%;
	font-weight: 800;
	font-style: italic;
	font-size: clamp(1.05rem, 2.2vw, 1.4rem);
	text-decoration: none;
	white-space: nowrap;
}
.tm-header__phone:hover {
	color: var(--tm-chrome);
}

/* Buttons */
.tm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 14px 26px;
	border: 1px solid transparent;
	border-radius: var(--tm-radius);
	font-family: var(--tm-font-display);
	font-stretch: 112%;
	font-style: italic;
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.tm-btn:active {
	transform: translateY(1px);
}
.tm-btn--primary {
	background: var(--tm-accent);
	color: var(--tm-ink);
}
.tm-btn--primary:hover {
	background: var(--tm-accent-hover);
}
.tm-btn--ghost {
	border-color: var(--tm-chrome);
	color: var(--tm-ink);
}
.tm-btn--ghost:hover {
	background: var(--tm-ink);
	border-color: var(--tm-ink);
	color: var(--tm-bg);
}
.tm-btn__icon {
	width: 18px;
	height: 18px;
	fill: currentColor;
	flex-shrink: 0;
}

/* Hero */
.tm-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(48px, 8vw, 104px) clamp(64px, 9vw, 112px);
	background:
		radial-gradient(60% 70% at 85% 35%, rgba(201, 207, 214, 0.09), transparent 70%),
		var(--tm-bg);
}
.tm-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
	align-items: center;
	gap: clamp(32px, 6vw, 88px);
}
.tm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	color: var(--tm-chrome);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.tm-eyebrow::before {
	content: "";
	width: 28px;
	height: 3px;
	background: var(--tm-accent);
}
.tm-hero__title {
	font-family: var(--tm-font-display);
	font-stretch: 110%;
	font-style: italic;
	font-weight: 850;
	font-size: clamp(2.3rem, 4.9vw, 4.1rem);
	line-height: 1.04;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	padding-bottom: 0.06em;
}
.tm-hero__title-accent {
	display: block;
	color: var(--tm-chrome);
}
.tm-hero__text {
	max-width: 34rem;
	margin-top: 24px;
	color: var(--tm-muted);
	font-size: clamp(1.0625rem, 1.4vw, 1.2rem);
}
.tm-hero__text strong {
	color: var(--tm-ink);
	font-weight: 600;
}
.tm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 36px;
}

/* Street number plate */
.tm-plate {
	justify-self: end;
	width: min(100%, 400px);
	transform: rotate(-4deg);
}
.tm-plate__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 28px 36px 32px;
	background: linear-gradient(160deg, #1D222A 0%, var(--tm-surface) 55%, #12161B 100%);
	border: 1px solid var(--tm-line);
	border-top: 4px solid var(--tm-accent);
	border-radius: var(--tm-radius);
	box-shadow: 0 30px 60px -30px rgba(5, 7, 10, 0.9), inset 0 1px 0 rgba(238, 240, 242, 0.06);
}
.tm-plate__inner::before,
.tm-plate__inner::after {
	content: "";
	position: absolute;
	top: 16px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #EEF0F2, #6F7883 70%);
}
.tm-plate__inner::before {
	left: 16px;
}
.tm-plate__inner::after {
	right: 16px;
}
.tm-plate__number {
	display: block;
	margin: -8px 0 -6px -6px;
	font-family: var(--tm-font-display);
	font-stretch: 125%;
	font-style: italic;
	font-weight: 900;
	font-size: clamp(8rem, 15vw, 13rem);
	line-height: 1;
	background: linear-gradient(180deg, #F4F6F8 0%, #C9CFD6 38%, #6F7883 52%, #DDE1E5 64%, #9BA4AF 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.tm-plate__street {
	font-family: var(--tm-font-display);
	font-stretch: 118%;
	font-style: italic;
	font-weight: 850;
	font-size: clamp(1.4rem, 2.3vw, 1.95rem);
	line-height: 1.05;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}
.tm-plate__suburb {
	margin-top: 6px;
	color: var(--tm-muted);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.875rem;
}
.tm-plate__old {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--tm-line);
	color: var(--tm-muted);
	font-size: 0.9375rem;
}
.tm-plate__old-label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.tm-plate__old-address {
	text-decoration-color: var(--tm-accent);
	text-decoration-thickness: 2px;
}

/* Services */
.tm-services {
	position: relative;
	padding-block: clamp(64px, 9vw, 112px) clamp(112px, 13vw, 160px);
	border-top: 1px solid var(--tm-line);
	background: linear-gradient(180deg, var(--tm-surface) 0%, var(--tm-bg) 100%);
}
.tm-services__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: start;
}
.tm-services__title {
	font-family: var(--tm-font-display);
	font-stretch: 110%;
	font-style: italic;
	font-weight: 850;
	font-size: clamp(1.9rem, 3.4vw, 2.8rem);
	line-height: 1.06;
	text-transform: uppercase;
	padding-bottom: 0.06em;
}
.tm-services__note {
	max-width: 26rem;
	margin-top: 20px;
	color: var(--tm-muted);
}
.tm-services__note a {
	color: var(--tm-ink);
}
.tm-services__list ul,
.tm-services__list ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(24px, 4vw, 48px);
	border-top: 1px solid var(--tm-line);
}
.tm-services__list li {
	position: relative;
	padding: 22px 0 22px 34px;
	border-bottom: 1px solid var(--tm-line);
	font-family: var(--tm-font-display);
	font-stretch: 112%;
	font-style: italic;
	font-weight: 800;
	font-size: clamp(1.15rem, 1.8vw, 1.45rem);
	line-height: 1.15;
	text-transform: uppercase;
}
.tm-services__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(22px + 0.5em);
	width: 18px;
	height: 4px;
	background: var(--tm-accent);
	transform: skewX(-20deg);
}
.tm-services__list p {
	margin-top: 20px;
	color: var(--tm-muted);
}
.tm-panel__email {
	font-weight: 500;
	overflow-wrap: anywhere;
	text-decoration-color: var(--tm-line);
	text-underline-offset: 4px;
}
.tm-panel__email:hover {
	color: var(--tm-chrome);
	text-decoration-color: var(--tm-chrome);
}

@media (max-width: 900px) {
	.tm-services__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 560px) {
	.tm-services__list ul,
	.tm-services__list ol {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Location */
.tm-location {
	position: relative;
	border-top: 1px solid var(--tm-line);
}
.tm-location__wrap {
	position: relative;
	z-index: 2;
	pointer-events: none;
}
.tm-panel {
	position: absolute;
	top: -56px;
	left: var(--tm-gutter);
	width: min(420px, calc(100% - 2 * var(--tm-gutter)));
	padding: 32px 32px 36px;
	background: var(--tm-surface);
	border: 1px solid var(--tm-line);
	border-top: 4px solid var(--tm-accent);
	border-radius: var(--tm-radius);
	box-shadow: 0 30px 60px -24px rgba(5, 7, 10, 0.85);
	pointer-events: auto;
}
.tm-panel__title {
	font-family: var(--tm-font-display);
	font-stretch: 118%;
	font-style: italic;
	font-weight: 850;
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	line-height: 1.08;
	text-transform: uppercase;
}
.tm-panel__text {
	margin-top: 14px;
	color: var(--tm-muted);
}
.tm-panel__list {
	margin-top: 24px;
	border-top: 1px solid var(--tm-line);
}
.tm-panel__row {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 12px;
	padding-block: 14px;
	border-bottom: 1px solid var(--tm-line);
}
.tm-panel__row dt {
	padding-top: 3px;
	color: var(--tm-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.tm-panel__row dd {
	font-weight: 500;
}
.tm-panel__phone {
	font-family: var(--tm-font-display);
	font-stretch: 112%;
	font-style: italic;
	font-weight: 800;
	font-size: 1.25rem;
	text-decoration: none;
}
.tm-panel__phone:hover {
	color: var(--tm-chrome);
}
.tm-panel__cta {
	width: 100%;
	margin-top: 24px;
}

.tm-map {
	position: relative;
	height: clamp(600px, 72vh, 700px);
	background: #1A1F26;
}
.tm-map .tm-map__frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	filter: invert(92%) hue-rotate(180deg) saturate(0.55) brightness(0.92) contrast(0.92);
}

/* Footer */
.tm-footer {
	border-top: 1px solid var(--tm-line);
	background: var(--tm-bg);
}
.tm-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	padding-block: 36px;
}
.tm-footer__details {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 28px;
	color: var(--tm-muted);
	font-style: normal;
}
.tm-footer__phone {
	color: var(--tm-ink);
	font-weight: 600;
	text-decoration: none;
}
.tm-footer__phone:hover {
	color: var(--tm-chrome);
}
.tm-footer__legal {
	color: var(--tm-muted);
	font-size: 0.875rem;
}

/* Website credit */
.tm-credit {
	padding-block: 14px 18px;
	border-top: 1px solid var(--tm-line);
}
.tm-credit__text {
	color: var(--tm-muted);
	font-size: 0.8125rem;
}
.tm-credit__link {
	color: var(--tm-chrome);
	text-decoration: underline;
	text-decoration-color: var(--tm-line);
	text-underline-offset: 3px;
}
.tm-credit__link:hover {
	color: var(--tm-ink);
	text-decoration-color: var(--tm-chrome);
}

/* Fallback pages */
.tm-fallback__inner {
	max-width: 760px;
	padding-block: 80px;
}
.tm-entry {
	margin-bottom: 40px;
}
.tm-entry__title {
	margin-bottom: 24px;
	font-family: var(--tm-font-display);
	font-stretch: 118%;
	font-style: italic;
	font-weight: 850;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.08;
	text-transform: uppercase;
}
.tm-entry__content {
	color: var(--tm-muted);
}
.tm-entry__content > * + * {
	margin-top: 1em;
}

/* Tablet and below */
@media (max-width: 900px) {
	.tm-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.tm-plate {
		justify-self: start;
		width: min(100%, 380px);
		transform: rotate(-3deg);
		margin-left: 8px;
	}
	.tm-location__wrap {
		pointer-events: auto;
	}
	.tm-panel {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		margin-top: -48px;
	}
	.tm-map {
		margin-top: 32px;
		height: 380px;
	}
}

/* Phones */
@media (max-width: 560px) {
	.tm-header__label {
		display: none;
	}
	.tm-hero__actions .tm-btn {
		width: 100%;
	}
	.tm-plate__inner {
		padding: 24px 24px 26px;
	}
	.tm-panel {
		padding: 26px 22px 28px;
	}
	.tm-panel__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}
	.tm-footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tm-btn {
		transition: none;
	}
}