/* Auto-trim s.r.o., autodíly Pohořelice */
/* Písmo Rubik (SIL OFL) je uložené na webu, nenačítá se z Google Fonts. */
@font-face {
	font-family: "Rubik";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/rubik-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
		U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Rubik";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/rubik-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;
}
:root {
	--paper: #efeee9;
	--ink: #161616;
	--ink-2: #2e2e2c;
	--muted: #5a5954;
	--line: #d6d4cb;
	--line-2: #bdbbb1;
	--yellow: #efeb0e;
	--red: #d61f13;
	--wrap: 1200px;
	--gut: clamp(16px, 4vw, 32px);
	--head: 72px;
	--font: "Rubik", "Segoe UI", Roboto, Arial, sans-serif;
	--hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--head) + 12px);
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0;
	background: #fff;
	color: var(--ink);
	font: 400 17px/1.6 var(--font);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img,
svg {
	display: block;
	max-width: 100%;
}
img {
	height: auto;
}
a {
	color: inherit;
}
h1,
h2,
h3 {
	margin: 0;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.015em;
}
h2 {
	font-size: clamp(30px, 3.4vw, 44px);
}
p {
	margin: 0 0 1em;
}
button {
	font: inherit;
	color: inherit;
}
:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 2px;
}
.wrap {
	width: min(100% - 2 * var(--gut), var(--wrap));
	margin-inline: auto;
}
.skip {
	position: absolute;
	left: -999px;
	top: 8px;
	z-index: 100;
	background: var(--yellow);
	padding: 8px 14px;
}
.skip:focus {
	left: 8px;
}
.req {
	color: var(--red);
}
.nb {
	white-space: nowrap;
}
.hex {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 34px;
	flex: none;
	clip-path: var(--hex);
	background: var(--yellow);
	color: var(--ink);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
}

/* tlačítka */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 24px;
	border-radius: 4px;
	border: 2px solid var(--ink);
	font: 500 17px/1 var(--font);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background-color 0.15s,
		color 0.15s;
}
.btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}
.btn--main {
	background: var(--yellow);
	color: var(--ink);
}
.btn--main:hover {
	background: var(--ink);
	color: var(--yellow);
}
.btn--ink {
	background: var(--ink);
	color: #fff;
}
.btn--ink:hover {
	background: #333;
}
.btn--line {
	background: transparent;
	color: var(--ink);
}
.btn--line:hover {
	background: var(--ink);
	color: #fff;
}
.btn--block {
	width: 100%;
	min-height: 56px;
	font-size: 18px;
}
.btn[disabled] {
	opacity: 0.6;
	cursor: progress;
}
.link-btn {
	background: none;
	border: 0;
	padding: 2px 0;
	cursor: pointer;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--yellow);
	text-decoration-thickness: 3px;
	text-underline-offset: 5px;
}
.link-btn:hover {
	text-decoration-color: var(--ink);
}

/* hlavička */
.head {
	position: sticky;
	top: 0;
	z-index: 40;
	background: #fff;
	border-bottom: 1px solid var(--line);
}
.head__in {
	display: flex;
	align-items: center;
	gap: 28px;
	height: var(--head);
}
.logo {
	margin-right: auto;
}
.logo img {
	height: 40px;
	width: auto;
}
.menu {
	display: flex;
	gap: 26px;
}
.menu a {
	text-decoration: none;
	font-weight: 500;
	padding: 6px 0;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
}
.menu a:hover {
	border-color: var(--yellow);
}
.head__tel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
@media (max-width: 1180px) {
	.head__in {
		gap: 18px;
	}
	.menu {
		gap: 18px;
	}
}
@media (max-width: 1100px) {
	.menu {
		gap: 12px;
		font-size: 15px;
	}
}
.head__tel svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}
.head__cta {
	min-height: 44px;
	padding: 0 18px;
	white-space: nowrap !important;
	flex: none;
}
.burger {
	display: none;
	flex: none;
	width: 44px;
	height: 44px;
	margin-right: -8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
}
.burger span {
	display: block;
	width: 24px;
	height: 3px;
	background: currentColor;
}
.burger:hover span {
	background: var(--red);
}
.burger:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 2px;
}
.is-open .burger span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.is-open .burger span:nth-child(2) {
	opacity: 0;
}
.is-open .burger span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* úvod s dodávkou */
.stage {
	position: relative;
	background: var(--paper);
}
.stage.is-live {
	height: calc((100svh - var(--head)) * 2.7);
}
.stage__pin {
	position: relative;
	height: calc(100svh - var(--head));
	min-height: 540px;
	overflow: hidden;
}
.stage.is-live .stage__pin {
	position: sticky;
	top: var(--head);
}
.stage__view {
	position: absolute;
	inset: 0;
}
.stage__canvas,
.stage__leads {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.stage__leads {
	pointer-events: none;
	fill: none;
	stroke: var(--ink);
	stroke-width: 1.2;
}
.stage__leads path {
	transition: opacity 0.3s;
}
.stage__tags {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.tag {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
	white-space: nowrap;
	font: 500 15px/1 var(--font);
}
.tag.is-on {
	opacity: 1;
	pointer-events: auto;
}
.tag__n {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 32px;
	clip-path: var(--hex);
	background: var(--ink);
	color: #fff;
	font: 700 13px/1 var(--font);
	flex: none;
}
.tag__t {
	background: #fff;
	border: 1.5px solid var(--ink);
	padding: 8px 11px;
	margin-left: 4px;
}
.tag:hover .tag__n,
.tag.is-hi .tag__n {
	background: var(--yellow);
	color: var(--ink);
}
.tag:hover .tag__t,
.tag.is-hi .tag__t {
	background: var(--yellow);
}
.stage__wrap {
	height: 100%;
	display: flex;
	align-items: center;
	pointer-events: none;
}
.stage__copy {
	position: relative;
	max-width: 520px;
	pointer-events: auto;
	will-change: opacity, transform;
}
.stage h1 {
	font-size: clamp(34px, 4.3vw, 56px);
	line-height: 1.03;
	margin-bottom: 18px;
	text-wrap: balance;
}
.stage__lead {
	font-size: clamp(17px, 1.4vw, 19px);
	color: var(--ink-2);
	max-width: 30em;
	margin-bottom: 26px;
}
.stage__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.stage__facts {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	font-size: 15px;
}
.stage__facts b {
	font-weight: 500;
}
.stage__facts a {
	text-decoration: none;
	border-bottom: 1px solid var(--line-2);
}
.status {
	font-size: 14px;
	padding: 1px 7px;
	margin-left: 6px;
}
.status.is-open {
	background: var(--yellow);
	color: var(--ink);
}
.status.is-closed {
	color: var(--muted);
	border: 1px solid var(--line-2);
}
.stage__fallback {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 46%;
}
.stage__fallback img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.stage.is-live .stage__fallback {
	display: none;
}
/* Fotka jen jako záloha, když 3D nenaběhne – při načítání neprobleskne */
.js .stage:not(.no-3d) .stage__fallback {
	visibility: hidden;
}
.stage__hint {
	position: absolute;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: var(--muted);
	transition: opacity 0.3s;
	white-space: nowrap;
}
.stage__hint.is-off,
.stage:not(.is-live) .stage__hint {
	opacity: 0;
}
.stage__arrow {
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--ink);
	border-bottom: 2px solid var(--ink);
	transform: rotate(45deg);
	animation: nudge 1.4s ease-in-out infinite;
}
@keyframes nudge {
	50% {
		transform: translateY(4px) rotate(45deg);
	}
}
.stage__end {
	position: absolute;
	left: 50%;
	bottom: 22px;
	transform: translate(-50%, 10px);
	max-width: min(560px, 92%);
	background: #fff;
	border: 1.5px solid var(--ink);
	padding: 12px 18px;
	font-size: 16px;
	opacity: 0;
	transition:
		opacity 0.35s,
		transform 0.35s;
	pointer-events: none;
}
.stage__end p {
	margin: 0;
}
.stage__end.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}
.stage__legend {
	display: none;
}
.stage.is-static {
	height: auto;
}
.stage.is-static .stage__pin {
	height: auto;
	min-height: 0;
}
.stage.is-static .stage__wrap {
	height: auto;
	padding: 56px 0 8px;
}
.stage.is-static .stage__view {
	position: relative;
	height: 72vh;
	min-height: 420px;
}
.stage.is-static .stage__end {
	position: relative;
	left: auto;
	bottom: auto;
	transform: none;
	opacity: 1;
	margin: 0 auto 32px;
}

/* poptávka */
.inquiry {
	padding: clamp(44px, 5.5vw, 72px) 0;
}
.inquiry__grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
}
.inquiry__lead {
	font-size: 18px;
	color: var(--ink-2);
	margin: 16px 0 28px;
}
.steps {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: grid;
	gap: 18px;
}
.steps li {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.steps b {
	display: block;
	font-weight: 500;
	font-size: 18px;
}
.inquiry__note {
	font-size: 16px;
	border-left: 4px solid var(--yellow);
	padding-left: 14px;
	margin: 0 0 28px;
}
.inquiry__note b {
	font-weight: 500;
}
.inquiry__note a {
	font-weight: 500;
	white-space: nowrap;
}
.formcard {
	background: #fff;
	border: 2px solid var(--ink);
	padding: clamp(20px, 3vw, 36px);
}
.form fieldset {
	border: 0;
	margin: 0 0 26px;
	padding: 0;
}
.form legend {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	font-size: 20px;
	margin-bottom: 14px;
	padding: 0;
}
.form legend .hex {
	width: 26px;
	height: 30px;
	font-size: 14px;
}
.row {
	display: grid;
	gap: 14px;
}
.row--2 {
	grid-template-columns: 1fr 1fr;
}
.field {
	display: block;
	margin-bottom: 14px;
}
.row .field {
	margin-bottom: 14px;
}
.field__l {
	display: block;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 6px;
}
.field__l small {
	font-weight: 400;
	color: var(--muted);
}
.field input,
.field select,
.field textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1.5px solid var(--line-2);
	border-radius: 4px;
	background: #fff;
	font: 400 16px/1.4 var(--font);
	color: var(--ink);
}
.field textarea {
	resize: vertical;
	min-height: 90px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 3px var(--yellow);
}
.field--file input {
	padding: 10px;
}
.field.is-bad input,
.field.is-bad textarea,
.field.is-bad select {
	border-color: var(--red);
}
.field__err {
	display: block;
	color: var(--red);
	font-size: 14px;
	margin-top: 4px;
}
.seg {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 16px;
}
.seg input {
	position: absolute;
	opacity: 0;
}
.seg span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	border: 1.5px solid var(--line-2);
	border-radius: 4px;
	cursor: pointer;
	font-weight: 500;
}
.seg svg {
	width: 40px;
	height: 18px;
}
.seg input:checked + span {
	background: var(--yellow);
	border-color: var(--ink);
}
.seg input:focus-visible + span {
	outline: 3px solid var(--ink);
	outline-offset: 2px;
}
.form__legal {
	font-size: 14px;
	line-height: 1.5;
	color: var(--muted);
	margin: 0 0 18px;
}
.form__legal a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.form__msg {
	background: #fdeceb;
	border-left: 4px solid var(--red);
	padding: 10px 14px;
	margin-bottom: 14px;
}
.hp {
	position: absolute;
	left: -9999px;
}
.done {
	text-align: center;
	padding: 20px 0;
}
.done h3 {
	font-size: 28px;
	margin: 16px 0 10px;
}
.done__van {
	width: 220px;
	margin: 0 auto;
	animation: drivein 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes drivein {
	from {
		transform: translateX(-160px);
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

/* sekce */
.section {
	padding: clamp(44px, 5.5vw, 72px) 0;
}
.section--tight {
	padding: clamp(28px, 3.5vw, 44px) 0;
}
.section--paper {
	background: var(--paper);
}
.section__head {
	margin-bottom: 28px;
	max-width: 760px;
}
.section__head p {
	color: var(--ink-2);
	font-size: 18px;
	margin: 12px 0 0;
}

/* sortiment s ilustracemi dílů */
.cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1.5px solid var(--ink);
	border-left: 1px solid var(--line-2);
}
.cats li {
	border-right: 1px solid var(--line-2);
	border-bottom: 1px solid var(--line-2);
}
.cat {
	display: grid;
	grid-template-columns: 84px 1fr;
	column-gap: 16px;
	align-items: center;
	justify-items: start;
	width: 100%;
	height: 100%;
	padding: 16px 18px;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s;
}
.cat:hover {
	background: var(--paper);
}
.cat .ill {
	grid-row: span 2;
	width: 84px;
	height: 63px;
}
.cat b {
	font-size: 19px;
	font-weight: 500;
	line-height: 1.25;
	align-self: end;
}
.cat small {
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--muted);
	align-self: start;
}
.cats__more {
	margin: 20px 0 0;
}
.ill {
	width: 120px;
	height: 90px;
	overflow: visible;
}
.ill * {
	stroke: var(--ink);
	stroke-width: 2.2;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.f-w {
	fill: #fff;
}
.f-g {
	fill: #dddbd2;
}
.f-k {
	fill: var(--ink);
}
.f-y {
	fill: var(--yellow);
}
.f-r {
	fill: var(--red);
}
.f-n {
	fill: none;
}
.ill__spring-out {
	fill: none;
	stroke-width: 6.5 !important;
}
.ill__spring {
	fill: none;
	stroke: var(--red) !important;
	stroke-width: 3.2 !important;
}
.ill__belt {
	fill: none;
	stroke-width: 6 !important;
}
.ill__teeth {
	fill: none;
	stroke: #fff !important;
	stroke-width: 2 !important;
	stroke-dasharray: 3 4;
	stroke-linecap: butt !important;
}
.ill__spark {
	fill: none;
	stroke-width: 2.6 !important;
}
.ill__rays path {
	stroke-width: 3;
}
.ill__trace {
	fill: none;
	stroke: var(--line-2) !important;
	stroke-dasharray: 3 5;
}
/* ilustrace stojí v klidové poloze, hýbou se jen po najetí myší (klávesnicí) */
.ill__spin {
	transform-origin: 54px 46px;
}
.ill__coil {
	transform-origin: 60px 70px;
}
.ill__p1 {
	transform-origin: 40px 58px;
}
.ill__p2 {
	transform-origin: 84px 30px;
}
.ill__wiper {
	transform-origin: 60px 80px;
}
.ill__tri {
	transform-origin: 60px 76px;
}
.cat:is(:hover, :focus-visible) .ill__spin {
	animation: spin 1.4s linear infinite;
}
.cat:is(:hover, :focus-visible) .ill__ribs {
	animation: ribs 0.45s linear infinite;
}
.cat:is(:hover, :focus-visible) .ill__drop {
	animation: drop 1.3s ease-in infinite;
}
.cat:is(:hover, :focus-visible) .ill__spark {
	animation: spark 1.2s infinite;
}
.cat:is(:hover, :focus-visible) .ill__coil {
	animation: coil 1s ease-in-out infinite;
}
.cat:is(:hover, :focus-visible) .ill__top {
	animation: top 1s ease-in-out infinite;
}
.cat:is(:hover, :focus-visible) .ill__teeth {
	animation: belt 0.5s linear infinite;
}
.cat:is(:hover, :focus-visible) .ill__p1 {
	animation: spin 2s linear infinite;
}
.cat:is(:hover, :focus-visible) .ill__p2 {
	animation: spin 1.2s linear infinite;
}
.cat:is(:hover, :focus-visible) .ill__rays {
	animation: rays 1s ease-in-out infinite;
}
.cat:is(:hover, :focus-visible) .ill__wiper {
	animation: wipe 1.6s ease-in-out infinite;
}
.cat:is(:hover, :focus-visible) .ill__tri {
	animation: tri 1.8s ease-in-out infinite;
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
@keyframes ribs {
	to {
		transform: translateX(6px);
	}
}
@keyframes drop {
	0% {
		transform: none;
		opacity: 1;
	}
	60% {
		transform: translateY(18px);
		opacity: 0;
	}
	61% {
		transform: translateY(-8px);
		opacity: 0;
	}
	100% {
		transform: none;
		opacity: 1;
	}
}
@keyframes spark {
	0%,
	30% {
		opacity: 1;
	}
	34% {
		opacity: 0;
	}
	44%,
	52% {
		opacity: 1;
	}
	56%,
	100% {
		opacity: 0;
	}
}
@keyframes coil {
	50% {
		transform: scaleY(0.8);
	}
}
@keyframes top {
	50% {
		transform: translateY(10px);
	}
}
@keyframes belt {
	to {
		stroke-dashoffset: -14;
	}
}
@keyframes rays {
	50% {
		opacity: 0.15;
	}
}
@keyframes wipe {
	25% {
		transform: rotate(-40deg);
	}
	75% {
		transform: rotate(40deg);
	}
}
@keyframes tri {
	40% {
		transform: scaleY(0.12);
	}
	70% {
		transform: none;
	}
}

/* o nás */
.about {
	display: grid;
	grid-template-columns: 6fr 5fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}
.about__lead {
	font-size: 18px;
	color: var(--ink-2);
	margin: 14px 0 12px;
}
.about p:last-child {
	margin-bottom: 0;
}
.about__photo {
	margin: 0;
}
.about__photo img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: 100% 50%;
}

/* výdejní místo zásilek */
.pickup__in {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(20px, 4vw, 48px);
	align-items: center;
}
.pickup h2 {
	font-size: clamp(24px, 2.4vw, 30px);
}
.pickup__lead {
	color: var(--ink-2);
	margin: 8px 0 0;
}
.pickup__brands {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.pickup__brands li {
	display: grid;
	place-items: center;
	min-height: 76px;
	padding: 12px;
	background: #fff;
	border: 1.5px solid var(--ink);
}
.pickup__brands img {
	height: 30px;
	width: auto;
	max-width: 100%;
}
.pickup__brands img[alt="DPD"] {
	height: 40px;
	margin-block: -4px;
}
.pickup__brands img[alt="Balíkovna"] {
	height: auto;
	width: min(100%, 130px);
}
.pickup__brands img[alt="GLS"] {
	height: 34px;
}

/* recenze */
.reviews__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}
.score {
	display: flex;
	align-items: center;
	gap: 14px;
}
.score b {
	font-size: 60px;
	line-height: 1;
	font-weight: 700;
}
.score span {
	display: grid;
	gap: 6px;
	font-size: 15px;
	color: var(--muted);
}
.stars {
	width: 100px;
	height: 18px;
	color: var(--ink);
}
.belt {
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	cursor: grab;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.belt::-webkit-scrollbar {
	display: none;
}
.belt.is-drag {
	cursor: grabbing;
	user-select: none;
}
.belt:focus-visible {
	outline-offset: -3px;
}
.belt__track {
	display: flex;
	gap: 32px;
	width: max-content;
	padding: 0 24px;
}
.belt .quote {
	width: 360px;
	flex: none;
}
.quote {
	margin: 0;
	border-top: 2px solid var(--ink);
	padding-top: 20px;
	display: flex;
	flex-direction: column;
}
.quote blockquote {
	margin: 0 0 16px;
	font-size: 18px;
	flex: 1;
}
.quote figcaption b {
	display: block;
	font-weight: 500;
}
.quote figcaption span {
	font-size: 14px;
	color: var(--muted);
}
.reviews__lead {
	color: var(--ink-2);
	font-size: 18px;
	margin: 10px 0 0;
}
.reviews__more {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 28px 0 0;
}

/* služby */
.cats.svcs {
	grid-template-columns: repeat(4, 1fr);
}
.svcs li {
	background: #fff;
}
.svc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	padding: 20px 20px 22px;
}
.svc .ill {
	width: 84px;
	height: 63px;
}
.svc h3 {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.25;
	margin: 12px 0 8px;
}
.svc p {
	color: var(--ink-2);
	font-size: 16px;
	line-height: 1.5;
	flex: 1;
	margin-bottom: 14px;
}
.svc .link-btn {
	padding: 0;
	line-height: 1.5;
}

/* rozvoz */
.area {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}
.area__lead {
	font-size: 18px;
	color: var(--ink-2);
	margin: 14px 0 16px;
}
.area__towns {
	margin: 0 0 22px;
	display: grid;
	gap: 10px;
}
.area__towns dt {
	font-weight: 500;
}
.area__towns dd {
	margin: 0;
	color: var(--ink-2);
	font-size: 16px;
	line-height: 1.45;
}
.area__map {
	margin: 0;
	justify-self: center;
	width: 100%;
	max-width: 440px;
}
.area__map figcaption {
	font-size: 13px;
	color: var(--muted);
	padding-top: 6px;
}
.dist {
	width: 100%;
	height: auto;
	overflow: visible;
}
.dist path,
.dist use {
	stroke: var(--ink);
	stroke-width: 1.5;
	stroke-linejoin: round;
}
.dist__on {
	fill: var(--yellow);
}
.dist__off {
	fill: #fff;
}
.dist text {
	font: 500 21px var(--font);
	fill: var(--ink);
	stroke: none;
}
.dist .dist__small {
	font-size: 16px;
	font-weight: 400;
}
.dist__pin path {
	fill: var(--ink);
	stroke: #fff;
	stroke-width: 2;
}
.dist__town circle {
	fill: var(--ink);
}
.dist__pin text {
	paint-order: stroke;
	stroke: var(--yellow);
	stroke-width: 5;
	stroke-linejoin: round;
}

/* časté dotazy */
.faq {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 40px;
	border-top: 1.5px solid var(--ink);
}
.faq details {
	border-bottom: 1px solid var(--line-2);
}
.faq summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 14px 0;
	font-size: 18px;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}
.faq summary::-webkit-details-marker {
	display: none;
}
.faq summary::after {
	content: "+";
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
}
.faq details[open] summary::after {
	content: "–";
}
.faq p {
	margin: 0 0 16px;
	color: var(--ink-2);
	font-size: 16px;
}
.faq a {
	font-weight: 500;
	text-decoration-color: var(--yellow);
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}
.faq a:hover {
	text-decoration-color: var(--ink);
}

/* kariéra */
.job summary {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
	padding-right: 36px;
	cursor: pointer;
	list-style: none;
}
.job summary::-webkit-details-marker {
	display: none;
}
.job summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 0;
	font-size: 28px;
	line-height: 1.1;
}
.job[open] summary::after {
	content: "–";
}
.job h2 {
	font-size: clamp(22px, 2.2vw, 28px);
}
.job summary span {
	color: var(--ink-2);
}
.job__card {
	max-width: 760px;
	margin-top: 20px;
}

/* výzva: nízký žlutý panel v šířce obsahu */
.cta {
	padding: 0 0 clamp(28px, 3.5vw, 44px);
}
.cta__in {
	display: grid;
	grid-template-columns: 1fr 190px;
	gap: 24px;
	align-items: center;
	background: var(--yellow);
	padding: 20px clamp(20px, 3vw, 32px);
	overflow: hidden;
}
.cta h2 {
	font-size: clamp(22px, 2.2vw, 28px);
}
.cta p {
	font-size: 16px;
	margin: 4px 0 12px;
}
.cta__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.cta .btn {
	min-height: 44px;
	padding: 0 18px;
	font-size: 16px;
}
.road {
	position: relative;
	height: 96px;
}
.road__van {
	position: absolute;
	left: 50%;
	bottom: 12px;
	width: 150px;
	transform: translateX(-50%);
}
.road__line {
	position: absolute;
	left: -30%;
	right: -30%;
	bottom: 10px;
	height: 3px;
	background: repeating-linear-gradient(90deg, var(--ink) 0 26px, transparent 26px 46px);
	animation: road 0.5s linear infinite paused;
}
.vs * {
	stroke: var(--ink);
	stroke-width: 2.5;
	stroke-linejoin: round;
	stroke-linecap: round;
	fill: none;
}
.vs__shell {
	fill: #fff;
}
.vs__glass {
	fill: #343b42;
}
.vs__wheel circle {
	fill: var(--ink);
}
.vs__wheel .vs__rim {
	fill: #d2d2cc;
}
.vs__wheel path {
	stroke: #d2d2cc;
}
.vs__lamp {
	fill: #fff;
}
.vs__logo {
	fill: var(--yellow);
}
.vs__wheel--a {
	transform-origin: 64px 86px;
}
.vs__wheel--b {
	transform-origin: 172px 86px;
}
.road .vs__wheel {
	animation: spin 0.7s linear infinite paused;
}
.road .vs__body {
	animation: bounce 0.35s ease-in-out infinite paused;
}
.road .vs__speed {
	animation: speed 0.6s linear infinite paused;
}
.road.is-play *,
.road.is-play {
	animation-play-state: running;
}
.done__van .vs__wheel {
	animation: spin 0.7s linear 2 both;
}
@keyframes road {
	to {
		background-position: -46px 0;
	}
}
@keyframes bounce {
	50% {
		transform: translateY(-1.5px);
	}
}
@keyframes speed {
	0% {
		transform: translateX(6px);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translateX(-10px);
		opacity: 0;
	}
}

/* kontakt */
.contact {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(24px, 4vw, 48px);
}
.contact__big {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3;
	margin-bottom: 12px;
}
.contact__tels {
	display: grid;
	gap: 4px;
	margin: 0 0 14px;
	font-size: 18px;
}
.contact__tels div {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
}
.contact__tels dt {
	min-width: 104px;
	color: var(--muted);
}
.contact__tels dd {
	margin: 0;
	font-weight: 500;
}
.contact__tels a {
	text-decoration: none;
	white-space: nowrap;
}
.foot address a[href^="tel"] {
	white-space: nowrap;
}
.contact__tels a:hover {
	text-decoration: underline;
}
.contact__wait {
	font-size: 16px;
	border-left: 4px solid var(--yellow);
	padding-left: 14px;
	margin: 18px 0;
}
.contact__wait b {
	font-weight: 500;
}
.contact__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.contact__big a,
.contact__mail a {
	text-decoration: none;
}
.contact__big a:hover,
.contact__mail a:hover {
	text-decoration: underline;
	text-decoration-color: var(--yellow);
	text-decoration-thickness: 3px;
}
.hours {
	width: 100%;
	border-collapse: collapse;
	margin: 14px 0 20px;
	font-size: 16px;
}
.hours caption {
	text-align: left;
	font-weight: 700;
	padding-bottom: 8px;
}
.hours th,
.hours td {
	text-align: left;
	padding: 8px 0;
	border-bottom: 1px solid var(--line);
	font-weight: 400;
}
.hours td {
	text-align: right;
}
.hours .off {
	color: var(--muted);
}
.map iframe,
.map__off {
	width: 100%;
	height: 100%;
	min-height: 380px;
	border: 1.5px solid var(--ink);
	display: block;
}
.map__off {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 14px;
	padding: 28px;
	background: var(--paper);
}
.map__off[hidden] {
	display: none;
}
.map__off p {
	max-width: 38ch;
	font-size: 15px;
	line-height: 1.5;
}
.map__off a {
	font-size: 15px;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* patička */
.foot {
	background: var(--ink);
	color: #e9e8e2;
	padding: 56px 0 24px;
}
.foot__in {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 32px;
}
.foot__brand img {
	height: 36px;
	width: auto;
	margin-bottom: 14px;
}
.foot__brands {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}
.foot__brands img {
	height: 40px;
	width: auto;
	margin: 0;
	padding: 8px 12px;
	background: #fff;
	border-radius: 4px;
}
.foot__brands img[alt="DPD"] {
	padding: 4px 14px;
}
.foot__brands img[alt="Balíkovna"] {
	height: auto;
	width: 150px;
	padding: 14px 12px;
}
.foot__brands img[alt="GLS"] {
	padding: 4px 14px;
}
.foot address {
	font-style: normal;
	line-height: 1.8;
}
.foot a {
	text-decoration: none;
}
.foot a:hover {
	color: var(--yellow);
}
.foot nav {
	display: grid;
	gap: 6px;
	align-content: start;
}
.foot__bar {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	border-top: 1px solid #383836;
	margin-top: 40px;
	padding-top: 20px;
	font-size: 14px;
	color: #a9a8a2;
}
.foot__bar p {
	margin: 0;
}
.foot__legal {
	display: grid;
	gap: 4px;
}
.foot__legal p + p {
	font-size: 13px;
	color: #8c8b85;
}
.foot__bar {
	align-items: center;
}
.credit {
	font-size: 16px;
	color: #d4d3cd;
}
.credit b {
	font-size: 18px;
	color: #fff;
}

/* okno s firemními podmínkami */
.dlg {
	width: min(100% - 32px, 500px);
	padding: clamp(20px, 4vw, 32px);
	border: 2px solid var(--ink);
	background: #fff;
	color: var(--ink);
}
.dlg::backdrop {
	background: rgba(22, 22, 22, 0.6);
}
.dlg h2 {
	font-size: 28px;
	margin: 0 36px 12px 0;
}
.dlg p {
	color: var(--ink-2);
}
.dlg__x {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}
.dlg__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}
.dlg__btns .btn {
	flex: 1 1 auto;
}
.dlg .dlg__small {
	font-size: 14px;
	color: var(--muted);
	margin: 0;
}

/* galerie */
.gal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.gal a {
	display: block;
	overflow: hidden;
	background: var(--line);
}
.gal img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.gal a:hover img {
	transform: scale(1.04);
}
.gal a:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}
.gal--top {
	grid-template-columns: repeat(4, 1fr);
}
.gal--top li:first-child {
	grid-column: span 2;
	grid-row: span 2;
}
.gal--top li:first-child a,
.gal--top li:first-child img {
	height: 100%;
}
.gal--top li:first-child img {
	aspect-ratio: auto;
}
.galpage {
	padding: clamp(28px, 4vw, 48px) 0 clamp(44px, 6vw, 72px);
}
.galpage h1 {
	font-size: clamp(32px, 4vw, 44px);
	margin-bottom: 8px;
}
.gal__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}
.gal__tabs button {
	min-height: 44px;
	padding: 0 20px;
	border: 2px solid var(--ink);
	border-radius: 4px;
	background: transparent;
	color: var(--ink);
	font: 500 17px var(--font);
	cursor: pointer;
}
.gal__tabs button:hover {
	background: var(--paper);
}
.gal__tabs button[aria-pressed="true"] {
	background: var(--ink);
	color: #fff;
}
.gal li[hidden] {
	display: none;
}
.galpage__lead {
	color: var(--ink-2);
	font-size: 18px;
	margin: 0 0 24px;
}
.gal__more {
	margin: 20px 0 0;
	text-align: center;
}
.lb {
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(22, 22, 22, 0.94);
	color: #fff;
	overflow: hidden;
}
.lb::backdrop {
	background: #161616;
}
.lb__fig {
	margin: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 56px 12px 16px;
}
.lb__fig img {
	display: block;
	max-width: 100%;
	max-height: calc(100dvh - 130px);
	width: auto;
	height: auto;
	object-fit: contain;
	background: #2e2e2c;
}
.lb__fig figcaption {
	max-width: 760px;
	text-align: center;
	font-size: 16px;
	color: #e4e3dd;
}
.lb__fig figcaption b {
	color: var(--yellow);
	font-weight: 500;
}
.lb__btn {
	position: absolute;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: var(--yellow);
	color: var(--ink);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.lb__btn:hover {
	background: #fff;
}
.lb__btn svg {
	width: 24px;
	height: 24px;
}
.lb__x {
	top: 8px;
	right: 8px;
}
.lb__prev {
	left: 8px;
	top: 50%;
	margin-top: -24px;
}
.lb__next {
	right: 8px;
	top: 50%;
	margin-top: -24px;
}

/* právní stránky */
.legal {
	max-width: 800px;
	padding: clamp(28px, 4vw, 48px) 0 clamp(44px, 6vw, 72px);
}
.legal h1 {
	font-size: clamp(32px, 4vw, 44px);
	margin-bottom: 8px;
}
.legal h2 {
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.25;
	margin: 30px 0 8px;
}
.legal p,
.legal li {
	color: var(--ink-2);
}
.legal ul {
	margin: 0 0 1em;
	padding-left: 20px;
}
.legal li {
	margin-bottom: 6px;
}
.legal a {
	text-decoration-color: var(--yellow);
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}
.legal a:hover {
	text-decoration-color: var(--ink);
}
.legal__back {
	font-size: 15px;
	margin-bottom: 18px;
}
.legal__date {
	font-size: 15px;
	color: var(--muted);
}
.legal__box {
	background: var(--paper);
	padding: 14px 16px;
	font-size: 16px;
}
.legal__box b {
	font-weight: 500;
}
.legal__scroll {
	overflow-x: auto;
	margin-bottom: 1em;
}
.legal table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.45;
}
.legal th,
.legal td {
	text-align: left;
	vertical-align: top;
	padding: 10px 12px 10px 0;
	border-bottom: 1px solid var(--line-2);
	color: var(--ink-2);
}
.legal th {
	font-weight: 500;
	color: var(--ink);
	border-bottom: 1.5px solid var(--ink);
}
.foot__docs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
}
.foot__legal .foot__docs {
	font-size: 14px;
	color: #d4d3cd;
}
.foot__docs a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.foot--legal {
	padding-top: 4px;
}
.foot--legal .foot__bar {
	border-top: 0;
}

/* souhlas s měřením */
.consent {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 70;
	width: min(100% - 32px, 420px);
	padding: 16px;
	background: #fff;
	border: 2px solid var(--ink);
}
.consent p {
	font-size: 15px;
	line-height: 1.45;
	margin-bottom: 12px;
}
.consent__opts {
	display: grid;
	gap: 8px;
	margin-bottom: 14px;
	font-size: 15px;
}
.consent__opts label {
	display: flex;
	align-items: center;
	gap: 10px;
}
.consent__opts input {
	width: 20px;
	height: 20px;
	accent-color: var(--ink);
}
.consent__save {
	display: block;
	margin: 10px auto 0;
	padding: 4px 8px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.consent__btns {
	display: flex;
	gap: 10px;
}
.consent .btn {
	flex: 1;
	min-height: 44px;
	padding: 0 12px;
	font-size: 16px;
}
.foot__consent {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* mobilní lišta */

/* vstup prvků */
.js [data-rise] {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 0.6s ease,
		transform 0.6s ease;
}
.js [data-rise].is-in {
	opacity: 1;
	transform: none;
}

@media (max-width: 999px) {
	.menu {
		display: none;
	}
	.js .burger {
		display: inline-flex;
	}
	.js .head.is-open .menu {
		display: flex;
		flex-direction: column;
		gap: 0;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100svh - var(--head));
		overflow-y: auto;
		padding: 8px var(--gut) 20px;
		background: #fff;
		border-bottom: 1px solid var(--line-2);
	}
	.js .head.is-open .menu a {
		display: flex;
		align-items: center;
		min-height: 54px;
		padding: 0;
		font-size: 18px;
		border-bottom: 1px solid var(--line);
		border-left: 4px solid transparent;
		padding-left: 12px;
	}
	.js .head.is-open .menu a:last-child {
		border-bottom: 0;
	}
	.js .head.is-open .menu a:hover,
	.js .head.is-open .menu a[aria-current="page"] {
		border-left-color: var(--yellow);
		background: var(--paper);
	}
	.inquiry__grid,
	.contact,
	.area,
	.about,
	.pickup__in {
		grid-template-columns: 1fr;
	}
	.cats,
	.cats.svcs {
		grid-template-columns: 1fr 1fr;
	}
	.foot__in {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 759px) {
	.belt__track {
		gap: 22px;
		padding: 0 16px;
	}
	.belt .quote {
		width: 280px;
	}
	.belt .quote blockquote {
		font-size: 17px;
	}
	:root {
		--head: 60px;
	}
	.logo img {
		height: 30px;
	}
	.head__in {
		gap: 14px;
	}
	.head__tel span {
		display: none;
	}
	.head__cta {
		min-height: 40px;
		padding: 0 14px;
		font-size: 16px;
	}
	.head__tel svg {
		width: 20px;
		height: 20px;
	}
	.stage__wrap {
		align-items: flex-start;
		padding-top: 40px;
	}
	.stage h1 {
		font-size: clamp(31px, 8.6vw, 40px);
	}
	.stage__lead {
		margin-bottom: 18px;
	}
	.stage__btns {
		display: grid;
		grid-template-columns: 1.25fr 1fr;
		gap: 10px;
	}
	.stage__btns .btn {
		padding: 0 8px;
		gap: 8px;
		font-size: 16px;
	}
	.stage__facts {
		margin-top: 14px;
		font-size: 14px;
	}
	.stage__fallback {
		top: auto;
		height: 38%;
		width: 100%;
	}
	.tag__t,
	.stage__leads {
		display: none;
	}
	.tag__n {
		width: 24px;
		height: 27px;
		font-size: 12px;
	}
	.stage__hint {
		bottom: 14px;
		font-size: 14px;
	}
	.stage__end {
		top: 14px;
		bottom: auto;
		font-size: 15px;
	}
	.stage__legend {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 6px 8px;
		position: absolute;
		left: 12px;
		right: 12px;
		bottom: 12px;
		margin: 0;
		padding: 10px;
		list-style: none;
		background: #fff;
		border: 1.5px solid var(--ink);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s;
	}
	.stage__legend.is-on,
	.stage.is-static .stage__legend {
		opacity: 1;
		pointer-events: auto;
	}
	.stage.is-static .stage__legend {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		margin: 0 12px 24px;
	}
	.stage__legend button {
		display: flex;
		align-items: center;
		gap: 6px;
		width: 100%;
		padding: 2px 0;
		background: none;
		border: 0;
		text-align: left;
		font-size: 12.5px;
		line-height: 1.15;
		cursor: pointer;
	}
	.stage__legend .tag__n {
		width: 20px;
		height: 23px;
		font-size: 11px;
	}
	.gal,
	.gal--top {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
	.gal--top li:first-child {
		grid-row: auto;
	}
	.gal--top li:first-child img {
		height: auto;
		aspect-ratio: 3 / 2;
	}
	.lb__prev,
	.lb__next {
		top: auto;
		bottom: 8px;
		margin: 0;
	}
	.lb__fig {
		padding-bottom: 64px;
	}
	.lb__fig img {
		max-height: calc(100dvh - 190px);
	}
	.steps {
		margin-bottom: 4px;
	}
	.inquiry__note {
		margin: 16px 0 0;
	}
	.row--2 {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.row--keep {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.seg span {
		min-height: 48px;
		gap: 6px;
		padding: 4px 6px;
		font-size: 15px;
		line-height: 1.2;
		text-align: center;
	}
	.seg svg {
		width: 30px;
		flex: none;
	}
	.cats,
	.cats.svcs,
	.faq {
		grid-template-columns: 1fr;
	}
	.svc {
		display: grid;
		grid-template-columns: 64px 1fr;
		column-gap: 14px;
		align-items: center;
		padding: 14px;
	}
	.svc .ill {
		width: 64px;
		height: 48px;
	}
	.svc h3 {
		margin: 0;
		font-size: 18px;
	}
	.svc p {
		grid-column: 1 / -1;
		margin: 8px 0 8px;
	}
	.svc .link-btn {
		grid-column: 1 / -1;
		justify-self: start;
	}
	.contact__btns .btn {
		flex: 1 1 auto;
	}
	.cta__in {
		grid-template-columns: 1fr;
		padding: 18px 16px;
	}
	.road {
		display: none;
	}
	.cta__btns {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.cta .btn {
		padding: 0 8px;
		font-size: 15px;
	}
	.btn {
		white-space: normal;
		text-align: center;
		line-height: 1.2;
	}
	.cat {
		padding: 12px 14px;
	}
	.pickup__brands {
		grid-template-columns: 1fr 1fr;
	}
	.pickup__brands li {
		min-height: 64px;
		padding: 10px;
	}
	.foot__in {
		grid-template-columns: 1fr;
	}
	.foot nav {
		grid-template-columns: 1fr 1fr;
		gap: 6px 16px;
	}
	.map iframe,
	.map__off {
		min-height: 320px;
	}
}
@media (max-width: 359px) {
	.logo img {
		height: 24px;
	}
	.head__in {
		gap: 10px;
	}
	.head__cta {
		padding: 0 10px;
		font-size: 15px;
	}
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.js [data-rise] {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.ill *,
	.vs *,
	.road__line,
	.stage__arrow,
	.done__van {
		animation: none !important;
	}
}