/* ==========================================================================
   Beton Factory — main stylesheet
   ========================================================================== */

:root {
	--c-bg: #f3f2ef;
	--c-surface: #ffffff;
	--c-muted: #e8e6e1;
	--c-dark: #111214;
	--c-dark-2: #1d1f22;
	--c-text: #17181a;
	--c-text-soft: #5b5f64;
	--c-line: #d9d6d0;
	--c-accent: #f7b500;
	--c-accent-dark: #7a5800;
	--c-on-accent: #111214;
	--c-success: #1f7a4a;
	--c-error: #b3261e;
	--radius: 10px;
	--shadow: 0 8px 24px rgba(20, 24, 28, .08);
	--font-head: "Oswald", "Arial Narrow", Impact, sans-serif;
	--font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--container: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font: 16px/1.6 var(--font);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--c-accent-dark); }
a:hover { color: var(--c-accent); }

h1, h2, h3 { line-height: 1.15; margin: 0 0 .6em; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.accent { color: var(--c-accent); }
h3 { font-size: 1.2rem; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 860px; }
.center { text-align: center; }

.screen-reader-text, .hp {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 10px; top: 10px; z-index: 100; background: #fff; padding: 8px 12px; }

/* Buttons ---------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	padding: 14px 26px; border-radius: var(--radius); border: 2px solid transparent;
	font: 700 1rem/1.2 var(--font); text-decoration: none; cursor: pointer;
	transition: background .2s, color .2s, border-color .2s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn--accent { background: var(--c-accent); color: var(--c-on-accent); }
.btn--accent:hover { background: #ffc933; color: var(--c-on-accent); }
.btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }
.btn--outline { border-color: var(--c-accent); color: var(--c-text); background: transparent; }
.btn--outline:hover { background: var(--c-accent); color: var(--c-on-accent); }
.btn--sm { padding: 9px 16px; font-size: .9rem; }
.btn--block { display: flex; width: 100%; }

/* Top bar & header -------------------------------------------------------- */
.topbar { background: var(--c-dark); color: #b9c0c7; font-size: .85rem; }
.topbar__inner { display: flex; gap: 24px; padding-top: 6px; padding-bottom: 6px; flex-wrap: wrap; }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: #fff; }

.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(17,18,20,.97); backdrop-filter: blur(8px);
	border-bottom: 3px solid var(--c-accent); color: #fff;
}
.site-header__inner { display: flex; align-items: center; gap: 28px; min-height: 76px; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.brand:hover { color: #fff; }
.brand__mark { display: block; width: 52px; height: 52px; border-radius: 8px; }
.brand__logo { max-height: 52px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font-size: 1.5rem; font-weight: 700; letter-spacing: .01em; }
.brand__text small { color: #a7acb2; font-size: .8rem; }

.site-nav { margin-left: auto; }
.site-nav .menu { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: #e9eaec; text-decoration: none; font-weight: 600; font-size: .95rem; }
.site-nav a:hover { color: var(--c-accent); }
.site-nav__phones { display: none; }
.site-nav .sub-menu { display: none; }

.site-header__cta { display: flex; align-items: center; gap: 18px; }
.header-phone { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; color: #fff; text-decoration: none; white-space: nowrap; line-height: 1.1; display: flex; flex-direction: column; }
.header-phone small { font-family: var(--font); font-size: .75rem; color: var(--c-accent); font-weight: 600; }
.header-phone:hover { color: var(--c-accent); }

.nav-toggle {
	display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent;
	flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; padding: 10px;
}
.nav-toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero -------------------------------------------------------------------- */
.hero {
	position: relative; color: #fff; overflow: hidden;
	background:
		radial-gradient(ellipse at 80% 40%, rgba(247,181,0,.10), transparent 60%),
		repeating-linear-gradient(135deg, #16171a 0 2px, #121315 2px 14px);
}
.hero__inner {
	display: grid; grid-template-columns: 1.25fr 1fr; gap: 50px; align-items: center;
	padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(48px, 8vw, 96px);
}
.eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; font-weight: 700; color: var(--c-accent); margin: 0 0 16px; }
.hero h1 .accent { display: block; }
.hero__offer {
	display: flex; align-items: center; gap: 16px; max-width: 560px;
	background: var(--c-accent); color: var(--c-on-accent); border-radius: var(--radius);
	padding: 16px 22px; font-weight: 700; font-size: 1.1rem; line-height: 1.35; margin: 26px 0;
}
.hero__offer svg { flex: none; }
.hero__slogan { font-family: var(--font-head); text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.15; margin: 0 0 28px; }
.hero__slogan .accent { display: block; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__phones { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 32px; }
.hero__phones a { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; color: #fff; text-decoration: none; }
.hero__phones a:hover { color: var(--c-accent); }
.hero__phones span { color: var(--c-accent); font-weight: 600; margin-left: 4px; }
.hero__media { position: relative; }
.hero__media img {
	display: block; width: 100%; aspect-ratio: 9 / 10; object-fit: cover;
	border-radius: 48% 12px 12px 12px / 30% 12px 12px 12px; border: 6px solid var(--c-accent);
}
.badge {
	position: absolute; left: -36px; top: 8%; width: 150px; height: 150px; border-radius: 50%;
	background: var(--c-dark); border: 4px solid var(--c-accent); color: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px;
	box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.badge strong { font-family: var(--font-head); text-transform: uppercase; font-size: 1.05rem; line-height: 1.1; }
.badge small { font-size: .78rem; }

/* Product directions --------------------------------------------------- */
.directions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.direction {
	display: flex; flex-direction: column; background: var(--c-dark); color: #fff; text-decoration: none;
	border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s;
}
.direction:hover { transform: translateY(-3px); color: #fff; }
.direction__img { display: block; aspect-ratio: 16 / 9; background: #222; overflow: hidden; }
.direction__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.direction__img--gravel {
	background:
		radial-gradient(ellipse 10% 7% at 41% 19%, #4c4842 0 70%, transparent 100%),
		radial-gradient(ellipse 7% 6% at 9% 68%, #908c86 0 70%, transparent 100%),
		radial-gradient(ellipse 8% 6% at 7% 64%, #514d47 0 70%, transparent 100%),
		radial-gradient(ellipse 7% 5% at 55% 53%, #514d47 0 70%, transparent 100%),
		radial-gradient(ellipse 7% 5% at 70% 54%, #8e8a84 0 70%, transparent 100%),
		radial-gradient(ellipse 11% 9% at 15% 28%, #908c86 0 70%, transparent 100%),
		radial-gradient(ellipse 11% 9% at 7% 73%, #4c4842 0 70%, transparent 100%),
		radial-gradient(ellipse 11% 8% at 28% 5%, #57534d 0 70%, transparent 100%),
		radial-gradient(ellipse 8% 6% at 37% 53%, #55514b 0 70%, transparent 100%),
		radial-gradient(ellipse 11% 8% at 73% 39%, #5d5953 0 70%, transparent 100%),
		radial-gradient(ellipse 11% 8% at 13% 74%, #5e5a54 0 70%, transparent 100%),
		radial-gradient(ellipse 11% 8% at 47% 12%, #4e4a44 0 70%, transparent 100%),
		radial-gradient(ellipse 11% 9% at 72% 7%, #85817b 0 70%, transparent 100%),
		radial-gradient(ellipse 10% 8% at 87% 68%, #6e6a64 0 70%, transparent 100%),
		radial-gradient(ellipse 14% 11% at 59% 74%, #74706a 0 70%, transparent 100%),
		radial-gradient(ellipse 13% 10% at 38% 31%, #65615b 0 70%, transparent 100%),
		radial-gradient(ellipse 9% 7% at 10% 73%, #85817b 0 70%, transparent 100%),
		radial-gradient(ellipse 10% 8% at 43% 93%, #938f89 0 70%, transparent 100%),
		radial-gradient(ellipse 10% 8% at 9% 15%, #5b5751 0 70%, transparent 100%),
		radial-gradient(ellipse 8% 6% at 96% 43%, #84807a 0 70%, transparent 100%),
		radial-gradient(ellipse 14% 11% at 53% 5%, #4f4b45 0 70%, transparent 100%),
		radial-gradient(ellipse 11% 8% at 97% 71%, #6e6a64 0 70%, transparent 100%),
		radial-gradient(ellipse 9% 7% at 43% 88%, #85817b 0 70%, transparent 100%),
		radial-gradient(ellipse 7% 5% at 74% 58%, #514d47 0 70%, transparent 100%),
		radial-gradient(ellipse 12% 9% at 34% 60%, #4e4a44 0 70%, transparent 100%),
		radial-gradient(ellipse 12% 9% at 7% 93%, #8f8b85 0 70%, transparent 100%),
		radial-gradient(ellipse 9% 7% at 87% 57%, #77736d 0 70%, transparent 100%),
		radial-gradient(ellipse 7% 5% at 85% 44%, #817d77 0 70%, transparent 100%),
		radial-gradient(ellipse 11% 9% at 45% 21%, #85817b 0 70%, transparent 100%),
		radial-gradient(ellipse 12% 10% at 7% 27%, #56524c 0 70%, transparent 100%),
		radial-gradient(ellipse 10% 7% at 94% 31%, #85817b 0 70%, transparent 100%),
		radial-gradient(ellipse 10% 8% at 10% 21%, #8c8882 0 70%, transparent 100%),
		#2d2c29;
	background-size: 90px 90px, 90px 90px, 90px 90px, 90px 90px, 90px 90px, 90px 90px, 90px 90px, 90px 90px, 90px 90px, 90px 90px, 90px 90px, 90px 90px, 90px 90px, 90px 90px, 57px 57px, 57px 57px, 57px 57px, 57px 57px, 57px 57px, 57px 57px, 57px 57px, 57px 57px, 57px 57px, 57px 57px, 37px 37px, 37px 37px, 37px 37px, 37px 37px, 37px 37px, 37px 37px, 37px 37px, 37px 37px, auto;
}
.direction__body { padding: 20px 22px 24px; border-top: 4px solid var(--c-accent); }
.direction__body strong { display: block; font-family: var(--font-head); text-transform: uppercase; font-size: 1.35rem; font-weight: 600; margin-bottom: 4px; }
.direction__body span { color: #b5babf; font-size: .95rem; }

/* Sections ---------------------------------------------------------------- */
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section--muted { background: var(--c-muted); }
.section--dark { background: var(--c-dark); color: #e6e9ec; }
.section__head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.section__head p { color: var(--c-text-soft); margin: 0; }
.section--dark .section__head p { color: #aab2ba; }
.section__head--left { text-align: left; margin-left: 0; }

.page-hero { background: var(--c-dark); color: #fff; padding: 48px 0 40px; }
.section--flush-top { padding-top: 0; }
.page-hero h1 { margin: 0; }
.page-hero p { color: #b9c0c7; margin: 10px 0 0; }
.breadcrumbs { font-size: .9rem; margin: 0 0 10px !important; }
.breadcrumbs a { color: #b9c0c7; }

/* Price table ------------------------------------------------------------- */
.price-group + .price-group { margin-top: 40px; }
.price-group__title { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-soft); }
.table-wrap { background: var(--c-surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--c-muted); }
.price-table thead th { background: var(--c-dark-2); color: #fff; font-size: .85rem; font-weight: 700; }
.price-table tbody tr:last-child > * { border-bottom: 0; }
.price-table tbody tr:hover { background: #fbfaf8; }
.price-table tbody th a { color: var(--c-text); text-decoration: none; font-weight: 800; }
.price-table tbody th a:hover { color: var(--c-accent-dark); }
.price-request { color: var(--c-text-soft); font-weight: 600; }
.price-table__price { font-weight: 800; white-space: nowrap; }
.price-table__price small { font-weight: 400; color: var(--c-text-soft); }
.price-table__action { text-align: right !important; }

/* Calculator -------------------------------------------------------------- */
.calc { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: start; }
.calc__form, .calc__result { background: var(--c-dark-2); border-radius: var(--radius); padding: 30px; }
.calc__sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.calc__mode { border: 0; padding: 0; margin: 0 0 18px; display: flex; gap: 22px; flex-wrap: wrap; }
.calc__mode label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.calc__result { background: var(--c-surface); color: var(--c-text); position: sticky; top: 100px; }
.calc__result dl { margin: 0; }
.calc__result dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--c-line); }
.calc__result dt { color: var(--c-text-soft); }
.calc__result dd { margin: 0; font-weight: 700; text-align: right; }
.calc__total { display: flex; justify-content: space-between; align-items: baseline; margin: 20px 0 6px; }
.calc__total strong { font-size: 2rem; color: var(--c-text); font-family: var(--font-head); }
.calc__total strong.is-request { font-size: 1.3rem; color: var(--c-text-soft); }
.calc__note { font-size: .85rem; color: var(--c-text-soft); margin: 0 0 20px; }

/* Forms ------------------------------------------------------------------- */
.field { display: block; margin-bottom: 18px; }
.field > span { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.field input, .field select, .field textarea {
	width: 100%; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 8px;
	background: #fff; color: var(--c-text); font: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus {
	outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(247,181,0,.25);
}
.section--dark .field input, .section--dark .field select { background: #1b1f23; border-color: #444b53; color: #fff; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; font-size: .9rem; cursor: pointer; }
.check input { margin-top: 4px; accent-color: var(--c-accent); width: 18px; height: 18px; flex: none; }
input[type="radio"] { accent-color: var(--c-accent); }

.lead-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.lead-form__calc { background: #fff7db; border-left: 3px solid var(--c-accent); padding: 12px 14px; font-size: .9rem; white-space: pre-line; border-radius: 0 8px 8px 0; }

.notice { padding: 14px 18px; border-radius: 8px; margin-bottom: 20px; font-weight: 600; }
.notice--success { background: #e3f4ea; color: var(--c-success); }
.notice--error { background: #fbe6e4; color: var(--c-error); }

/* Cards ------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: var(--c-surface); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); border-top: 4px solid var(--c-accent); }
.card__num { font-family: var(--font-head); font-weight: 700; color: var(--c-accent-dark); font-size: 1rem; }
.card h3 { margin-top: 8px; }
.card p { margin: 0; color: var(--c-text-soft); }

/* Delivery ---------------------------------------------------------------- */
.delivery { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { position: relative; padding: 8px 0 8px 34px; }
.checklist li::before {
	content: ""; position: absolute; left: 0; top: 11px; width: 20px; height: 20px; border-radius: 50%;
	background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' stroke='%23111214' stroke-width='2.2' fill='none'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps li { counter-increment: step; background: var(--c-surface); border-radius: var(--radius); padding: 18px 20px 18px 72px; position: relative; box-shadow: var(--shadow); }
.steps li::before {
	content: counter(step); position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
	width: 36px; height: 36px; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent);
	display: grid; place-items: center; font-weight: 800;
}
.steps strong { display: block; }
.steps span { color: var(--c-text-soft); font-size: .95rem; }

/* FAQ --------------------------------------------------------------------- */
.faq__item { background: var(--c-surface); border-radius: var(--radius); margin-bottom: 12px; box-shadow: var(--shadow); }
.faq__item summary { padding: 20px 56px 20px 24px; font-weight: 700; cursor: pointer; list-style: none; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--c-accent); }
.faq__item[open] summary::after { content: "−"; }
.faq__item p { margin: 0; padding: 0 24px 20px; color: var(--c-text-soft); }

/* Contacts ---------------------------------------------------------------- */
.contacts { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }
.contacts__form { background: var(--c-surface); padding: 36px; border-radius: var(--radius); box-shadow: var(--shadow); }
.contacts__form > p { color: var(--c-text-soft); }
.contact-list { list-style: none; margin: 0 0 20px; padding: 0; }
.contact-list li { padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.contact-list span { display: block; font-size: .8rem; color: var(--c-text-soft); text-transform: uppercase; letter-spacing: .05em; }
.contact-list a { color: var(--c-text); font-weight: 700; text-decoration: none; }
.messengers { display: flex; gap: 10px; margin-bottom: 20px; }
.map { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-surface); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map__placeholder { height: 100%; display: grid; place-content: center; text-align: center; color: var(--c-text-soft); padding: 20px; }

/* Product page ------------------------------------------------------------ */
.product { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
.product__image { border-radius: var(--radius); margin-bottom: 20px; }
.product__card { background: var(--c-surface); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); position: sticky; top: 100px; display: grid; gap: 12px; }
.product__price { font-size: 2rem; font-weight: 700; margin: 0; font-family: var(--font-head); }
.product__price small { font-size: 1rem; color: var(--c-text-soft); font-weight: 400; }
.specs { margin: 0 0 8px; }
.specs div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--c-muted); }
.specs dt { color: var(--c-text-soft); }
.specs dd { margin: 0; font-weight: 700; }

.entry-content { font-size: 1.05rem; }
.post-item { padding: 24px 0; border-bottom: 1px solid var(--c-line); }
.post-item h2 { font-size: 1.4rem; }
.post-item h2 a { color: var(--c-text); text-decoration: none; }
.post-item__meta { color: var(--c-text-soft); font-size: .9rem; margin: 0; }

/* Footer ------------------------------------------------------------------ */
.site-footer { background: var(--c-dark); color: #aab2ba; padding: 56px 0 0; font-size: .95rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; }
.site-footer__brand { color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.site-footer__brand img { border-radius: 6px; }
.site-footer__slogan { color: var(--c-accent); font-family: var(--font-head); text-transform: uppercase; font-size: 1.05rem; }
.site-footer__title { color: #fff; font-weight: 700; margin: 0 0 12px; }
.site-footer .menu { list-style: none; margin: 0; padding: 0; }
.site-footer .menu li { padding: 4px 0; }
.site-footer a { color: #aab2ba; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: space-between; border-top: 1px solid #353b42; margin-top: 40px; padding-top: 20px; padding-bottom: 24px; font-size: .85rem; }

.float-call {
	display: none; position: fixed; right: 18px; bottom: 18px; z-index: 60;
	width: 58px; height: 58px; border-radius: 50%; background: var(--c-accent); color: #fff;
	place-items: center; box-shadow: 0 8px 20px rgba(247,181,0,.45); color: var(--c-on-accent);
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1080px) {
	.site-nav .menu { gap: 14px; }
	.site-nav a { font-size: .88rem; }
}

@media (max-width: 900px) {
	.nav-toggle { display: flex; }
	.site-header__cta { display: none; }
	.site-nav {
		position: absolute; left: 0; right: 0; top: 100%; background: #fff;
		border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow);
		display: none; padding: 10px 20px 20px;
	}
	.nav-open .site-nav { display: block; }
	.site-nav .menu { flex-direction: column; gap: 0; }
	.site-nav .menu a { display: block; padding: 12px 0; border-bottom: 1px solid var(--c-muted); }
	.float-call { display: grid; }

	.hero__inner { grid-template-columns: 1fr; }
	.hero__media { max-width: 420px; margin-left: 36px; }
	.directions { grid-template-columns: 1fr; }
	.direction { flex-direction: row; }
	.direction__img { width: 38%; aspect-ratio: auto; flex: none; }
	.direction__body { border-top: 0; border-left: 4px solid var(--c-accent); }
	.site-nav { background: var(--c-dark-2); border-bottom-color: #000; }
	.site-nav .menu a { border-bottom-color: #2c2f33; }
	.site-nav__phones { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; }
	.site-nav__phones a { font-family: var(--font-head); font-size: 1.3rem; color: #fff; border: 0 !important; padding: 0 !important; }
	.site-nav__phones small { color: var(--c-accent); font-family: var(--font); font-size: .85rem; }
	.calc, .contacts, .delivery, .product { grid-template-columns: 1fr; }
	.calc__result, .product__card { position: static; }
	.cards { grid-template-columns: repeat(2, 1fr); }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
	.topbar__inner span:nth-child(1) { display: none; }
	.cards, .lead-form__grid, .site-footer__grid { grid-template-columns: 1fr; }
	.calc__sizes { grid-template-columns: 1fr; }
	.calc__form, .calc__result, .contacts__form { padding: 22px; }
	.hero__actions .btn { flex: 1 1 100%; }
	.hero__offer { font-size: 1rem; padding: 14px 16px; }
	.hero__media { margin-left: 24px; }
	.badge { width: 116px; height: 116px; left: -24px; }
	.badge strong { font-size: .85rem; }
	.badge svg { width: 22px; height: 22px; }
	.direction { flex-direction: column; }
	.direction__img { width: 100%; aspect-ratio: 16 / 9; }
	.direction__body { border-left: 0; border-top: 4px solid var(--c-accent); }

	/* Price table becomes cards */
	.price-table thead { display: none; }
	.price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td { display: block; width: 100%; }
	.price-table tr { padding: 14px 18px; border-bottom: 1px solid var(--c-muted); }
	.price-table th, .price-table td { padding: 4px 0; border: 0; }
	.price-table tbody th { font-size: 1.1rem; margin-bottom: 4px; }
	.price-table td[data-label] { display: flex; gap: 4px; align-items: baseline; }
	.price-table td[data-label]::before { content: attr(data-label); color: var(--c-text-soft); font-weight: 400; margin-right: auto; }
	.price-table__action { text-align: left !important; margin-top: 8px; }
	.price-table__action .btn { width: 100%; }
}
.topbar__slogan { color: var(--c-accent); font-weight: 600; }