/* =========================================================================
   BKL Spedition — industrial corporate design system
   Navy / steel / signal-orange. System font stack only: no Google Fonts,
   nothing loaded from a third party (GDPR + PageSpeed).
   ========================================================================= */

:root {
	--ink:        #0b1d33;
	--ink-2:      #10294a;
	--ink-3:      #17385f;
	--steel:      #1e4a78;
	--steel-soft: #dbe6f0;
	--accent:     #f5751f;
	--accent-2:   #ff9247;
	--accent-ink: #7a3202;
	--ice:        #f4f7fa;
	--ice-2:      #eaf0f6;
	--line:       #dde5ec;
	--line-dark:  rgba(255, 255, 255, .14);
	--text:       #16232f;
	--muted:      #5b6b7c;
	--muted-dark: #9db2c7;
	--white:      #fff;
	--ok:         #1f8a5b;
	--err:        #c0392b;

	--radius:   4px;
	--radius-l: 8px;
	--shadow:   0 1px 2px rgba(11, 29, 51, .06), 0 8px 24px rgba(11, 29, 51, .08);
	--shadow-l: 0 2px 4px rgba(11, 29, 51, .08), 0 24px 56px rgba(11, 29, 51, .16);

	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--wrap: 1240px;
	--gap:  clamp(1.5rem, 4vw, 3rem);
}

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

/* The step buttons are flex items; without this, hidden ones still show. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	overflow-x: clip;
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--text);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }
a { color: var(--steel); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 {
	margin: 0 0 .6em;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--ink);
	font-weight: 750;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }
p  { margin: 0 0 1.1em; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--accent); color: #fff; padding: .75rem 1.25rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ── layout ───────────────────────────────────────────────────────────── */

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--text { width: min(100% - 2.5rem, 820px); }

.section { padding: clamp(3rem, 7vw, 6rem) 0; }
.section--ice { background: var(--ice); }
.section--ink { background: var(--ink); color: #cfe0ef; }
.section--ink h2, .section--ink h3 { color: #fff; }

.section__head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head--center { margin-inline: auto; text-align: center; }

.eyebrow {
	display: inline-flex; align-items: center; gap: .55rem;
	margin: 0 0 .9rem;
	font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--accent);
}
.eyebrow::before {
	content: ""; width: 1.75rem; height: 2px; background: var(--accent); flex: none;
}
.section--ink .eyebrow { color: var(--accent-2); }
.section--ink .eyebrow::before { background: var(--accent-2); }

.lede { font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem); color: var(--muted); }
.section--ink .lede { color: #a9c2d8; }

/* ── buttons ──────────────────────────────────────────────────────────── */

.btn, .wp-block-button__link {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .85rem 1.6rem;
	border: 2px solid transparent; border-radius: var(--radius);
	font: inherit; font-weight: 650; line-height: 1.2;
	text-decoration: none; cursor: pointer;
	transition: background-color .16s, border-color .16s, color .16s, transform .16s;
}
.btn:active, .wp-block-button__link:active { transform: translateY(1px); }

.btn--accent, .wp-block-button__link {
	background: var(--accent); color: #fff; border-color: var(--accent);
}
.btn--accent:hover, .wp-block-button__link:hover { background: #e0620f; border-color: #e0620f; color: #fff; }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }

.btn .bkl-icon { width: 1.15em; height: 1.15em; }

.bkl-icon { width: 1.5rem; height: 1.5rem; flex: none; vertical-align: middle; }

/* ── header ───────────────────────────────────────────────────────────── */

.site-header { position: relative; z-index: 30; }

.topbar {
	background: var(--ink);
	color: #9db2c7;
	font-size: .84rem;
	border-bottom: 1px solid var(--line-dark);
}
.topbar__inner { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; min-height: 2.75rem; }
.topbar__claim { margin: 0; letter-spacing: .01em; }
.topbar__contacts { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.topbar__link { display: inline-flex; align-items: center; gap: .4rem; color: #cfe0ef; text-decoration: none; }
.topbar__link:hover { color: var(--accent-2); }
.topbar__link .bkl-icon { width: 1rem; height: 1rem; opacity: .7; }

.lang-switch { display: inline-flex; border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; }
.lang-switch__item {
	padding: .2rem .6rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
	color: #9db2c7; text-decoration: none;
}
.lang-switch__item + .lang-switch__item { border-left: 1px solid var(--line-dark); }
.lang-switch__item:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.lang-switch__item.is-current { background: var(--accent); color: #fff; }

.navbar { background: var(--white); border-bottom: 1px solid var(--line); }
.navbar__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 4.75rem; }

.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; margin-right: auto; }
.brand__mark { display: block; width: 2.5rem; color: var(--ink); }
.brand__mark svg { display: block; width: 100%; }
.brand__text { display: grid; line-height: 1.15; }
.brand__text strong { font-size: 1.12rem; font-weight: 800; letter-spacing: .01em; color: var(--ink); }
.brand__text em { font-style: normal; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.custom-logo-link { display: block; margin-right: auto; line-height: 0; }
.custom-logo { display: block; max-height: 3.9rem; width: auto; }

.nav { display: flex; align-items: center; gap: 1.75rem; order: 2; }

.navbar__cta { order: 3; flex: none; white-space: nowrap; }
.navbar__cta-short { display: none; }
.nav__list { display: flex; align-items: center; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.nav__list a {
	position: relative; display: block; padding: .35rem 0;
	font-weight: 600; font-size: .97rem; color: var(--ink); text-decoration: none;
}
.nav__list a::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
	background: var(--accent); transition: right .18s;
}
.nav__list a:hover::after,
.nav__list .current-menu-item > a::after { right: 0; }
.nav__list .current-menu-item > a { color: var(--accent); }

/* dropdowns */
.nav__list .sub-menu {
	position: absolute; top: 100%; left: 0; z-index: 40;
	min-width: 15rem; margin: 0; padding: .5rem 0; list-style: none;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .15s, transform .15s, visibility .15s;
}
.nav__list > li { position: relative; }
.nav__list > li:hover > .sub-menu,
.nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.sub-menu a { padding: .5rem 1rem; }
.sub-menu a::after { display: none; }

.nav-toggle {
	display: none; align-items: center; justify-content: center;
	width: 2.9rem; height: 2.9rem; padding: 0;
	background: var(--ice); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; width: 20px; }
.nav-toggle__bars i { display: block; height: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1023px) {
	/* the claim is hidden here, so the remaining items align right rather than
	   drifting to the left edge under space-between */
	.topbar__claim { display: none; }
	.topbar__inner { justify-content: flex-end; gap: .5rem 1rem; }
	.navbar__inner { gap: .75rem; }
	.custom-logo { max-height: 3.2rem; }
	.nav-toggle { display: inline-flex; order: 3; flex: none; width: 2.75rem; height: 2.75rem; }

	/* left of the burger, and short enough to fit next to the logo.
	   Both controls share one height so they read as a pair. */
	.navbar__cta {
		order: 2; margin-left: auto;
		height: 2.75rem; padding: 0 1rem; font-size: .92rem;
	}
	.navbar__cta-full { display: none; }
	.navbar__cta-short { display: inline; }
	.nav {
		position: absolute; left: 0; right: 0; top: 100%;
		display: none; flex-direction: column; align-items: stretch; gap: 0;
		padding: .25rem 1.25rem .35rem;
		background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
	}
	.nav.is-open { display: flex; }
	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__list > li { border-bottom: 1px solid var(--line); }
	.nav__list > li:last-child { border-bottom: 0; }
	.nav__list > li:last-child a { padding-bottom: .55rem; }
	.nav__list a { padding: .9rem 0; }
	.nav__list a::after { display: none; }
	.nav__list .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		border: 0; box-shadow: none; padding: 0 0 .5rem 1rem;
	}
}

/* ── hero ─────────────────────────────────────────────────────────────── */

.hero {
	position: relative;
	padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem);
	background:
		radial-gradient(120% 90% at 15% 0%, #17385f 0%, transparent 60%),
		radial-gradient(90% 80% at 95% 100%, #1e4a78 0%, transparent 55%),
		var(--ink);
	color: #cfe0ef;
	overflow: hidden;
}
/* faint engineering grid + a route line running Lübeck → Riga */
.hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}
.hero::after {
	content: ""; position: absolute; right: -6%; top: 12%; width: 46%; aspect-ratio: 1;
	border: 1px solid rgba(245, 117, 31, .18); border-radius: 50%;
	pointer-events: none;
}
.hero > .wrap { position: relative; }

.hero__grid {
	display: grid; gap: clamp(2rem, 4vw, 3.5rem);
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	align-items: start;
}
@media (max-width: 979px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__title { color: #fff; font-size: clamp(2.15rem, 1.3rem + 3.4vw, 3.7rem); text-wrap: balance; }
.hero__title .accent { color: var(--accent-2); }
.hero__sub { font-size: clamp(1.05rem, 1rem + .35vw, 1.28rem); color: #a9c2d8; max-width: 46ch; }

.hero__points { display: grid; gap: .9rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.hero__points li { display: flex; gap: .75rem; align-items: flex-start; color: #cfe0ef; }
.hero__points .bkl-icon { width: 1.35rem; height: 1.35rem; color: var(--accent-2); margin-top: .15rem; }

.hero__strip {
	display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
	margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line-dark);
}
.hero__stat { display: grid; gap: .1rem; }
.hero__stat b { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: #fff; letter-spacing: -.02em; line-height: 1; }
.hero__stat span { font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; color: #7f9bb5; }

/* ── facts / advantages ───────────────────────────────────────────────── */

.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.card {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l);
	transition: border-color .18s, box-shadow .18s, transform .18s;
}
.card:hover { border-color: var(--steel-soft); box-shadow: var(--shadow); transform: translateY(-2px); }
.card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 3rem; height: 3rem; margin-bottom: 1.1rem;
	background: var(--ice); color: var(--steel); border-radius: var(--radius);
}
.card__icon .bkl-icon { width: 1.6rem; height: 1.6rem; }
.card h3 { margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }
.card__num {
	position: absolute; top: 1.25rem; right: 1.4rem;
	font: 700 .8rem/1 var(--mono); letter-spacing: .1em; color: var(--line);
}
.card--accent { border-top: 3px solid var(--accent); }

.section--ink .card {
	background: rgba(255, 255, 255, .04); border-color: var(--line-dark); color: #bed2e4;
}
.section--ink .card:hover { border-color: rgba(245, 117, 31, .45); }
.section--ink .card__icon { background: rgba(255, 255, 255, .07); color: var(--accent-2); }

.stats { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
.stat { background: #fff; padding: clamp(1.4rem, 3vw, 2rem); }
.stat b { display: block; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.stat span { display: block; margin-top: .5rem; color: var(--muted); font-size: .95rem; }

/* ── page hero (interior pages) ───────────────────────────────────────── */

.page-hero {
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	background: linear-gradient(120deg, var(--ink) 0%, var(--ink-3) 100%);
	color: #a9c2d8;
}
.page-hero--tall { padding: clamp(4rem, 9vw, 7rem) 0; }
.page-hero__title { color: #fff; margin-bottom: .35rem; }
.page-hero__sub { max-width: 62ch; color: #a9c2d8; font-size: 1.08rem; margin: .75rem 0 0; }
.page-hero__eyebrow { font: 800 .85rem/1 var(--mono); letter-spacing: .3em; color: var(--accent-2); margin: 0 0 1rem; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.breadcrumbs { margin: 0 0 1rem; font-size: .85rem; color: #7f9bb5; }
.breadcrumbs a { color: #a9c2d8; text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent-2); }
.breadcrumbs span + span::before { content: "/"; margin: 0 .5rem; color: #4d6b8a; }
.breadcrumbs span + span::before { color: #4d6b8a; }

/* ── editor content ───────────────────────────────────────────────────── */

.entry { padding-bottom: clamp(3rem, 6vw, 5rem); }
.entry--front { padding-bottom: 0; }
.entry > .wrap--text { padding-top: clamp(2.5rem, 5vw, 4rem); }
.entry h2 { margin-top: 2em; }
.entry h3 { margin-top: 1.6em; }
.entry ul, .entry ol { padding-left: 1.35rem; }
.entry li { margin-bottom: .45rem; }
.entry .wp-block-table { overflow-x: auto; margin: 1.5rem 0; }
.entry table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.entry .wp-block-table table { margin: 0; min-width: 32rem; }
.entry th, .entry td { padding: .7rem .9rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.entry th { background: var(--ice); font-weight: 650; }
.entry blockquote {
	margin: 1.75rem 0; padding: .25rem 0 .25rem 1.4rem;
	border-left: 3px solid var(--accent); color: var(--muted); font-size: 1.08rem;
}
.entry .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.entry .alignwide { width: min(100% - 2.5rem, calc(var(--wrap) + 120px)); margin-inline: auto; }
.wp-block-columns { display: flex; flex-wrap: wrap; gap: var(--gap); }
.wp-block-column { flex: 1 1 16rem; min-width: 0; }
.wp-block-image img { border-radius: var(--radius); }

/* ── footer ───────────────────────────────────────────────────────────── */

.site-footer { background: var(--ink); color: #9db2c7; font-size: .95rem; }
.footer__grid {
	display: grid; gap: clamp(2rem, 4vw, 3rem);
	grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
	padding: clamp(2.75rem, 6vw, 4.5rem) 0;
}
@media (max-width: 899px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 539px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__logo { display: block; width: auto; height: 3.9rem; margin-bottom: 1.5rem; }
.footer__lede { max-width: 40ch; color: #8ba5bd; }
.footer__title { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.footer__address { font-style: normal; line-height: 1.8; }
.footer__list { margin: 0; padding: 0; list-style: none; line-height: 1.9; }
.footer__list a { color: #cfe0ef; text-decoration: none; }
.footer__list a:hover { color: var(--accent-2); }
.footer__muted { color: #7f9bb5; }
.footer__reg { margin: 1.25rem 0 0; font-size: .82rem; color: #6f8aa5; line-height: 1.7; }
.footer__bar { border-top: 1px solid var(--line-dark); }
.footer__bar-inner { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; padding: 1.15rem 0; font-size: .84rem; color: #6f8aa5; }
.footer__bar p { margin: 0; }

/* =========================================================================
   Quote calculator — the conversion centrepiece
   ========================================================================= */

.quote {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-l);
	overflow: hidden;
}
.hero .quote { box-shadow: 0 30px 70px rgba(0, 0, 0, .35); border-color: transparent; }

.quote__head {
	padding: 1.35rem clamp(1.25rem, 3vw, 1.85rem) 1.1rem;
	background: linear-gradient(120deg, var(--ink) 0%, var(--ink-3) 100%);
	color: #fff;
}
.quote__title { margin: 0; font-size: 1.22rem; color: #fff; letter-spacing: -.01em; }
.quote__note { margin: .3rem 0 0; font-size: .87rem; color: #a9c2d8; }

.quote__steps { display: flex; gap: .4rem; margin-top: 1.1rem; }
.quote__step {
	flex: 1; display: grid; gap: .4rem; font-size: .7rem; letter-spacing: .08em;
	text-transform: uppercase; color: #7f9bb5;
}
.quote__step::before { content: ""; display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
.quote__step.is-done { color: #cfe0ef; }
.quote__step.is-done::before { background: var(--accent); }
.quote__step.is-current { color: #fff; }
.quote__step.is-current::before { background: var(--accent-2); }

.quote__body { padding: clamp(1.25rem, 3vw, 1.85rem); }

.quote__panel { display: none; }
.quote__panel.is-active { display: block; animation: bkl-fade .2s ease-out; }
@keyframes bkl-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.field { display: grid; gap: .4rem; margin-bottom: 1.05rem; }
.field__label { font-size: .84rem; font-weight: 650; color: var(--ink); letter-spacing: .01em; }
.field__label .req { color: var(--accent); }
.field__hint { font-size: .78rem; color: var(--muted); }
.field-row { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }

.input, .select, .textarea {
	width: 100%; padding: .7rem .85rem;
	font: inherit; font-size: .95rem; color: var(--text);
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
	border-color: var(--steel); box-shadow: 0 0 0 3px rgba(30, 74, 120, .12); outline: none;
}
.input:disabled { background: var(--ice); color: var(--muted); }
.textarea { min-height: 6.5rem; resize: vertical; }
.select { appearance: none; padding-right: 2.25rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right .7rem center; background-size: 1.1rem;
}
.input.has-error, .select.has-error, .textarea.has-error { border-color: var(--err); box-shadow: 0 0 0 3px rgba(192, 57, 43, .12); }

/* segmented choice buttons */
.choice { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .6rem .9rem;
	font-size: .9rem; font-weight: 600; color: var(--ink);
	background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
	cursor: pointer; transition: border-color .15s, background-color .15s, color .15s;
}
.choice label:hover { border-color: var(--steel-soft); }
.choice input:checked + label {
	border-color: var(--accent); background: rgba(245, 117, 31, .08); color: var(--accent-ink);
}
.choice input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.choice label .bkl-icon { width: 1.2rem; height: 1.2rem; opacity: .75; }
.choice--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.75rem), 1fr)); }
/* Long labels — "Thermotransport", "Не имеет значения" — were breaking mid-word:
   the columns block sets word-break:break-word and it inherits down to here.
   Reset it, and give every option the same height so the grid stays even. */
.choice label {
	hyphens: none;
	word-break: normal;
	overflow-wrap: normal;
	text-wrap: balance;
}
.choice--grid label {
	min-height: 3rem;
	padding-inline: .65rem;
	font-size: .88rem;
	text-align: center;
}
@media (max-width: 560px) {
	.choice--grid label { font-size: .82rem; padding-inline: .5rem; }
}
.choice--grid label { justify-content: center; text-align: center; }

/* slider + numeric readout */
.slider { display: grid; gap: .55rem; }
.slider__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.slider__value {
	display: inline-flex; align-items: baseline; gap: .3rem;
	font: 800 1.35rem/1 var(--font); letter-spacing: -.02em; color: var(--ink);
}
.slider__value small { font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.slider__value input {
	width: 6.5ch; padding: .15rem .3rem; font: inherit; color: inherit;
	border: 1px solid transparent; border-radius: var(--radius); background: var(--ice); text-align: right;
}
.slider__value input:focus { border-color: var(--steel); outline: none; background: #fff; }

.slider input[type="range"] {
	-webkit-appearance: none; appearance: none;
	width: 100%; height: 1.5rem; margin: 0; background: transparent; cursor: pointer;
}
.slider input[type="range"]::-webkit-slider-runnable-track {
	height: 6px; border-radius: 3px;
	background: linear-gradient(90deg, var(--accent) var(--fill, 0%), var(--ice-2) var(--fill, 0%));
}
.slider input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--ice-2); }
.slider input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
.slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 1.35rem; height: 1.35rem; margin-top: -.42rem;
	background: #fff; border: 3px solid var(--accent); border-radius: 50%;
	box-shadow: 0 1px 4px rgba(11, 29, 51, .25);
}
.slider input[type="range"]::-moz-range-thumb {
	width: 1.15rem; height: 1.15rem;
	background: #fff; border: 3px solid var(--accent); border-radius: 50%;
	box-shadow: 0 1px 4px rgba(11, 29, 51, .25);
}
.slider__scale { display: flex; justify-content: space-between; font-size: .74rem; color: var(--muted); }

.quote__conditional { display: none; }
.quote__conditional.is-visible { display: block; }

.quote__consent { display: flex; gap: .6rem; align-items: flex-start; margin: 1.25rem 0 .5rem; font-size: .87rem; color: var(--muted); }
.quote__consent input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); flex: none; }

.quote__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.quote__actions .btn { flex: 0 0 auto; }
.quote__back { background: none; border: 0; padding: .5rem .25rem; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.quote__back:hover { color: var(--accent); }
.quote__spacer { flex: 1 1 auto; }

.quote__summary { margin: 0 0 1rem; padding: .85rem 1rem; background: var(--ice); border-radius: var(--radius); font-size: .87rem; color: var(--muted); }
.quote__summary b { color: var(--ink); font-weight: 650; }
.quote__summary-row + .quote__summary-row { margin-top: .3rem; }

.quote__msg { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--radius); font-size: .9rem; display: none; }
.quote__msg.is-error { display: block; background: rgba(192, 57, 43, .08); color: var(--err); border: 1px solid rgba(192, 57, 43, .25); }
.quote__msg.is-ok { display: block; background: rgba(31, 138, 91, .08); color: var(--ok); border: 1px solid rgba(31, 138, 91, .25); }

.quote__done { display: none; text-align: center; padding: 1rem .5rem 1.5rem; }
.quote__done.is-active { display: block; }
.quote__done .bkl-icon { width: 3.25rem; height: 3.25rem; color: var(--ok); margin-bottom: 1rem; }
.quote__done h3 { margin-bottom: .5rem; }
.quote__done p { color: var(--muted); }

.quote.is-busy { position: relative; }
.quote.is-busy::after {
	content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .6); cursor: progress;
}

.quote__file { display: grid; gap: .35rem; }
.quote__file input[type="file"] { font-size: .87rem; }
.quote__hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* compact variant used inside the hero */
.quote--compact .quote__body { padding: 1.15rem clamp(1.15rem, 3vw, 1.65rem) 1.5rem; }

/* =========================================================================
   Coverage map
   ========================================================================= */

.map { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 899px) { .map { grid-template-columns: 1fr; } }

.map__canvas { position: relative; }
.map__svg { display: block; width: 100%; height: auto; }
.map__country { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .18); stroke-width: .8; transition: fill .2s; }
.map__country--active { fill: rgba(30, 74, 120, .85); stroke: rgba(160, 200, 235, .5); }
.map__country--active:hover { fill: var(--steel); }
.map__country--hub { fill: rgba(245, 117, 31, .8); stroke: var(--accent-2); }
.map__link { stroke: var(--accent-2); stroke-width: 1.6; stroke-dasharray: 4 3; fill: none; opacity: .9; }
.map__hub circle { fill: var(--accent); stroke: #fff; stroke-width: 1.5; }
.map__hub text { fill: #fff; font: 700 8px/1 var(--font); letter-spacing: .02em; }
.map__hub .halo { fill: none; stroke: var(--accent); stroke-opacity: .35; }

.map__legend { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.map__legend li { display: flex; gap: .75rem; align-items: flex-start; }
.map__swatch { width: 1rem; height: 1rem; margin-top: .3rem; border-radius: 3px; flex: none; }
.map__swatch--country { background: #2c6099; border: 1px solid rgba(160, 200, 235, .6); }
.map__swatch--hub { background: var(--accent); }
.map__countries { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.map__countries li {
	padding: .35rem .7rem; font-size: .85rem; font-weight: 600;
	background: rgba(255, 255, 255, .06); border: 1px solid var(--line-dark); border-radius: 100px; color: #cfe0ef;
}
.map__countries li.is-hub { background: rgba(245, 117, 31, .16); border-color: rgba(245, 117, 31, .5); color: #ffd0ac; }

/* =========================================================================
   Cookie banner (GDPR)
   ========================================================================= */

.cookie {
	position: fixed; inset: auto 1rem 1rem; z-index: 90;
	max-width: 40rem; margin-inline: auto;
	padding: 1.25rem 1.4rem;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l);
	box-shadow: var(--shadow-l);
	font-size: .9rem;
}
.cookie[hidden] { display: none; }
.cookie h2 { font-size: 1.05rem; margin-bottom: .4rem; }
.cookie p { color: var(--muted); margin-bottom: 1rem; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookie__actions .btn { padding: .6rem 1.1rem; font-size: .9rem; }

/* =========================================================================
   Contact blocks
   ========================================================================= */

.contact-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.contact-card { padding: clamp(1.5rem, 3vw, 2rem); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); }
.contact-card h3 { display: flex; align-items: center; gap: .6rem; }
.contact-card h3 .bkl-icon { color: var(--accent); }
.contact-card ul { margin: 0; padding: 0; list-style: none; line-height: 1.9; }
.contact-card a { text-decoration: none; }

.split { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 899px) { .split { grid-template-columns: 1fr; } }

.checklist { display: grid; gap: .75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; }
.checklist .bkl-icon { width: 1.25rem; height: 1.25rem; color: var(--accent); margin-top: .25rem; flex: none; }

/* =========================================================================
   Editor-built sections
   Full-bleed bands whose inner blocks stay on the site grid, so the client can
   rearrange the home page in the block editor without breaking the layout.
   ========================================================================= */

.bkl-band {
	position: relative;
	padding: clamp(3rem, 7vw, 6rem) 0;
	margin-block: 0;
}
.bkl-band > * { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.bkl-band > .alignfull { width: 100%; }

.bkl-band--ice  { background: var(--ice); }
.bkl-band--ink  { background: var(--ink); color: #bed2e4; }
.bkl-band--ink :where(h2, h3, h4, strong) { color: #fff; }
.bkl-band--ink a { color: var(--accent-2); }

.bkl-band--hero {
	padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
	background:
		radial-gradient(120% 90% at 15% 0%, #17385f 0%, transparent 60%),
		radial-gradient(90% 80% at 95% 100%, #1e4a78 0%, transparent 55%),
		var(--ink);
	color: #cfe0ef;
	overflow: hidden;
}
.bkl-band--hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}
.bkl-band--hero > * { position: relative; }
.bkl-band--hero :where(h1, h2, strong) { color: #fff; }
.bkl-band--hero .wp-block-columns { align-items: start; gap: clamp(2rem, 4vw, 3.5rem); }
.bkl-band--hero .wp-block-column:last-child { flex-basis: 30rem; }

.bkl-title { font-size: clamp(2.15rem, 1.3rem + 3.4vw, 3.7rem); text-wrap: balance; margin-bottom: .5em; }
.bkl-lede { font-size: clamp(1.05rem, 1rem + .35vw, 1.28rem); color: #a9c2d8; max-width: 46ch; }
.bkl-band--ice .bkl-lede, .bkl-band:not(.bkl-band--ink):not(.bkl-band--hero) .bkl-lede { color: var(--muted); }

/* checklist rendered from a plain core/list block */
.bkl-check { list-style: none; padding: 0; display: grid; gap: .85rem; margin: 1.75rem 0 0; }
.bkl-check li { position: relative; padding-left: 2rem; }
.bkl-check li::before {
	content: ""; position: absolute; left: 0; top: .35em;
	width: 1.15rem; height: 1.15rem;
	background: no-repeat center/contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5751f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5L20 7'/%3E%3C/svg%3E");
}

/* stat row built from core/columns */
/* Stats strip.
   Not a card: a thin band that sits on whatever background it lands on, with
   hairline rules between the figures. On the hero that means the numbers read
   as part of the image rather than as a white box pasted over it. */
.bkl-stats {
	gap: 0 !important;
	flex-wrap: nowrap;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: none;
}
.bkl-stats > .wp-block-column {
	flex: 1 1 0;
	min-width: 0;
	background: none;
	padding: clamp(1rem, 2.5vw, 1.5rem) clamp(.75rem, 2vw, 1.75rem);
	margin: 0;
}
.bkl-stats > .wp-block-column + .wp-block-column { border-left: 1px solid var(--line); }
.bkl-stats > .wp-block-column:first-child { padding-left: 0; }
.bkl-stats > .wp-block-column:last-child { padding-right: 0; }

.bkl-stats p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.35; text-wrap: balance; }
.bkl-stats p strong {
	display: block; margin-bottom: .3rem;
	font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.4rem); font-weight: 800;
	letter-spacing: -.03em; line-height: 1; color: var(--ink);
}

/* on the dark hero and ink bands */
.bkl-band--hero .bkl-stats,
.bkl-band--ink .bkl-stats {
	border-color: var(--line-dark);
	margin-top: clamp(2rem, 5vw, 3.25rem);
}
.bkl-band--hero .bkl-stats > .wp-block-column + .wp-block-column,
.bkl-band--ink .bkl-stats > .wp-block-column + .wp-block-column { border-left-color: var(--line-dark); }
.bkl-band--hero .bkl-stats p,
.bkl-band--ink .bkl-stats p { color: #8ba5bd; }
.bkl-band--hero .bkl-stats p strong,
.bkl-band--ink .bkl-stats p strong { color: #fff; }
/* the accent tick above each figure ties the strip to the rest of the page */
.bkl-band--hero .bkl-stats > .wp-block-column { position: relative; }
.bkl-band--hero .bkl-stats > .wp-block-column::before {
	content: ""; position: absolute; top: -1px; left: 0; width: 1.75rem; height: 2px;
	background: var(--accent);
}
.bkl-band--hero .bkl-stats > .wp-block-column:not(:first-child)::before { left: clamp(.75rem, 2vw, 1.75rem); }

/* service / advantage cards built from core/columns */
.bkl-cards { gap: 1.25rem !important; }
.bkl-cards > .wp-block-column {
	padding: clamp(1.5rem, 3vw, 2rem);
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l);
	transition: border-color .18s, box-shadow .18s, transform .18s;
}
.bkl-cards > .wp-block-column:hover { border-color: var(--steel-soft); box-shadow: var(--shadow); transform: translateY(-2px); }
.bkl-cards > .wp-block-column > :last-child { margin-bottom: 0; }
.bkl-cards h3 { margin-top: 0; display: flex; align-items: center; gap: .6rem; }
.bkl-cards h3 .bkl-icon { color: var(--accent); width: 1.6rem; height: 1.6rem; }
.bkl-band--ink .bkl-cards > .wp-block-column {
	background: rgba(255, 255, 255, .04); border-color: var(--line-dark);
}
.bkl-band--ink .bkl-cards > .wp-block-column:hover { border-color: rgba(245, 117, 31, .45); }

.bkl-head { max-width: 54rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.bkl-head .bkl-lede { max-width: 62ch; }
.bkl-eyebrow {
	display: flex; align-items: center; gap: .55rem;
	font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--accent); margin-bottom: .9rem;
}
.bkl-eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: currentColor; flex: none; }

.bkl-cta { text-align: center; }
.bkl-cta .wp-block-buttons { justify-content: center; }

@media (max-width: 781px) {
	.bkl-stats p { font-size: .78rem; }
	.bkl-stats > .wp-block-column { padding: .9rem .7rem; }
	.bkl-band--hero .bkl-stats > .wp-block-column:not(:first-child)::before { left: .7rem; }
}

@media (max-width: 419px) {
	.bkl-stats p { font-size: .7rem; }
	.bkl-stats > .wp-block-column { padding: .8rem .5rem; }
}

@media (max-width: 419px) {
	.custom-logo { max-height: 2.7rem; }
	.navbar__cta { height: 2.5rem; padding: 0 .8rem; font-size: .85rem; }
	.nav-toggle { width: 2.5rem; height: 2.5rem; }
	.navbar__inner { gap: .5rem; }
}
