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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--text-on-light);
	background: var(--bg-light);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

ul {
	list-style: none;
	padding: 0;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

::selection {
	background: var(--accent);
	color: var(--c-white);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Иконка из SVG-файла через маску: цвет = currentColor */
.icon {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.icon--chevron-down { --icon: url("../img/icons/chevron-down.svg"); }
.icon--chevron-right { --icon: url("../img/icons/chevron-right.svg"); }
.icon--arrow-up-right { --icon: url("../img/icons/arrow-up-right.svg"); }
.icon--user { --icon: url("../img/icons/user-focus.svg"); } /* Phosphor user-focus: человек в уголках видоискателя */

/* Кнопки: прямоугольные, капс; на наведении — уголки видоискателя, как у плиток грузов */
.btn {
	--vf: 8px;
	--vf-w: 1.5px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 98px;
	min-height: 42px;
	padding: 8px 20px;
	border: 1px solid transparent; /* taste-skill-ignore: контур кнопки */
	border-radius: 0;
	font-size: 11px;
	font-weight: var(--fw-bold);
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.btn:active {
	transform: scale(0.97);
}

/* Основная: фирменный оранжевый */
.btn--accent {
	background: var(--accent);
	color: var(--c-white);
}

.btn--accent:hover {
	background: #d4472a;
}

/* Вторая на тёмном: контур тонкой линией */
.btn--light {
	border-color: var(--c-white-16);
	color: var(--c-white);
}

.btn--light:hover {
	border-color: transparent;
	background: var(--c-white-08);
}

/* Третья: текстом, без рамки */
.btn--muted {
	color: var(--text-muted-dark);
}

.btn--muted:hover {
	color: var(--c-white);
}

/* Вторая на светлом: контур графитом */
.btn--line {
	border-color: var(--grid-line);
	color: var(--c-graphite);
}

.btn--line:hover {
	border-color: transparent;
	background: var(--c-graphite-06);
}

/* Уголки видоискателя: четыре угла рисуются градиентами, разметка не нужна */
.btn::before,
.vf::before {
	content: "";
	position: absolute;
	inset: -1px;
	--c: var(--vf-color);
	background: /* taste-skill-ignore: уголки видоискателя — фирменный приём */
		linear-gradient(var(--c), var(--c)) left top / var(--vf) var(--vf-w) no-repeat, /* taste-skill-ignore */
		linear-gradient(var(--c), var(--c)) left top / var(--vf-w) var(--vf) no-repeat, /* taste-skill-ignore */
		linear-gradient(var(--c), var(--c)) right top / var(--vf) var(--vf-w) no-repeat, /* taste-skill-ignore */
		linear-gradient(var(--c), var(--c)) right top / var(--vf-w) var(--vf) no-repeat, /* taste-skill-ignore */
		linear-gradient(var(--c), var(--c)) left bottom / var(--vf) var(--vf-w) no-repeat, /* taste-skill-ignore */
		linear-gradient(var(--c), var(--c)) left bottom / var(--vf-w) var(--vf) no-repeat, /* taste-skill-ignore */
		linear-gradient(var(--c), var(--c)) right bottom / var(--vf) var(--vf-w) no-repeat, /* taste-skill-ignore */
		linear-gradient(var(--c), var(--c)) right bottom / var(--vf-w) var(--vf) no-repeat; /* taste-skill-ignore */
	opacity: 0;
	scale: 1.08;
	pointer-events: none;
	transition: opacity var(--dur-base) var(--ease-out), scale var(--dur-base) var(--ease-out);
}

.btn:not(.btn--accent):hover::before,
.btn:not(.btn--accent):focus-visible::before,
.vf:hover::before,
.vf:focus-visible::before,
.vf.is-active::before {
	opacity: 1;
	scale: 1;
}

.vf {
	--vf: 10px;
	--vf-w: 1.5px;
	position: relative;
}

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

/* Крестики сетки на внешнем крае таблиц не выступают наружу: таблица обрезается по своей рамке,
	поэтому в углах остаётся уголок, на сторонах — Т-образный стык, внутри — полный крестик */
.cargo__grid,
.svc__grid,
.partners__grid,
.footer__grid,
.contact__inner,
.cpage__grid,
.legal__grid,
.spage__grid,
.calc__body,
.smodal__panel,
.cookie {
	clip-path: inset(0);
}

/* Висячие строки: абзацы без одинокого слова в последней строке, заголовки — ровными строками.
	Короткие слова (в, с, и, на, по…) привязаны к следующему неразрывным пробелом прямо в разметке */
p,
li,
dd,
summary,
figcaption,
blockquote {
	text-wrap: pretty;
}

h1,
h2,
h3 {
	text-wrap: balance;
}