/* ==========================================================================
   Bus Brothers – additions on top of the theme.

   Everything site-specific lives here so css/style.css (the vendor theme,
   ~237 KB) stays untouched and upgradeable. Design tokens below are taken
   from the theme, not invented:

     heading   Lato 300 / #4b4e53
     body      Open Sans 14px / #7e8082 / line-height 25px
     accent bg #eeeeee    footer bg #303236    button #535961
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO — static replacement for Revolution Slider.
   Same image, same typography (.dark-light-60 / .dark-black-60 were
   Lato 55px/85px, weights 300 and 900), ~500 KB less JavaScript.
   -------------------------------------------------------------------------- */
.bb-hero {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 460px;
	overflow: hidden;
	background-color: #d9d9d9;
}
.bb-hero-bg,
.bb-hero-bg img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.bb-hero-bg img {
	object-fit: cover;
	object-position: center top;
}
.bb-hero-inner {
	position: relative;
	z-index: 2;
	height: 100%;
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 15px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
/* Desktop: caption sits right of centre, matching the old slider's x=645/1170. */
.bb-hero-cap {
	margin-left: 55%;
	max-width: 520px;
}
.bb-hero-t1,
.bb-hero-t2 {
	font-family: 'Lato', Arial, Helvetica, sans-serif;
	font-size: 55px;
	line-height: 68px;
	color: #4b4e53;
}
.bb-hero-t1 { font-weight: 300; }
.bb-hero-t2 { font-weight: 900; }
.bb-hero-sub {
	margin: 18px 0 26px;
	font-size: 15px;
	line-height: 25px;
	color: #4b4e53;
}
.bb-hero-btns { margin: 0; }
.bb-hero-btns .button { margin: 0 10px 10px 0; }
.bb-hero .local-scroll-cont { bottom: 20px; }

/* The theme only shows the white caption panel below 478px. Keep that, but
   make it a proper backdrop behind the text instead of a floating rectangle. */
@media only screen and (max-width: 991px) {
	.bb-hero-cap {
		margin-left: 0;
		max-width: none;
		text-align: center;
		background: rgba(255, 255, 255, .88);
		padding: 30px 22px;
		border-radius: 2px;
	}
	.bb-hero-t1,
	.bb-hero-t2 { font-size: 38px; line-height: 46px; }
}
@media only screen and (max-width: 480px) {
	.bb-hero { height: auto; min-height: 0; padding: 130px 0 90px; }
	.bb-hero-t1,
	.bb-hero-t2 { font-size: 28px; line-height: 36px; }
	.bb-hero-sub { font-size: 14px; }
	.bb-hero-btns .button { display: block; margin: 0 0 10px; }
}

/* Call button in the hero — filled, so it reads as the primary action. */
.bb-btn-call,
.bb-btn-call:hover,
.bb-btn-call:focus {
	background-color: #535961;
	border-color: #535961;
	color: #fff;
}

/* --------------------------------------------------------------------------
   2. Typography helpers for the content pages
   -------------------------------------------------------------------------- */
.bb-lead {
	font-size: 16px;
	line-height: 28px;
	color: #5f6165;
	margin-bottom: 30px;
}
.bb-h2 {
	font-family: 'Lato', Arial, Helvetica, sans-serif;
	font-size: 28px;
	line-height: 36px;
	font-weight: 300;
	color: #4b4e53;
	margin: 38px 0 14px;
}
.bb-h3 {
	font-family: 'Lato', Arial, Helvetica, sans-serif;
	font-size: 19px;
	line-height: 27px;
	font-weight: 400;
	color: #4b4e53;
	margin: 26px 0 10px;
}
.bb-h3 a { color: #4b4e53; }
.bb-h3 a:hover { color: #101010; }

.bb-list { padding-left: 20px; margin-bottom: 18px; }
.bb-list li { margin-bottom: 9px; }
.bb-list-tight { margin-bottom: 0; }
.bb-list-tight li { margin-bottom: 5px; }

.bb-note { font-size: 13px; color: #8d9095; line-height: 22px; }
.bb-img-fluid { max-width: 100%; height: auto; }

/* Content images must never exceed their column. The theme ships no global
   max-width rule, so on a 375px screen bus.png rendered at its intrinsic
   573px and was cut off. Scoped to .page-section so the hero (object-fit
   cover, in <section class="bb-hero">) and the two logos keep their own
   sizing. height:auto is required because the tags carry height attributes
   for CLS. */
.page-section img:not(.logo-img):not(.logo-footer) {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   3. Sidebar / callout blocks
   -------------------------------------------------------------------------- */
.bb-aside {
	background: #eee;
	padding: 26px 24px;
	margin-bottom: 24px;
	border-radius: 2px;
}
.bb-aside-title {
	font-family: 'Lato', Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #4b4e53;
	margin: 0 0 12px;
}
.bb-aside-meta { font-size: 13px; color: #8d9095; margin-bottom: 0; }
.bb-btn-block { display: block; margin-bottom: 8px; text-align: center; }

.bb-callout {
	background: #eee;
	border-left: 3px solid #4b4e53;
	padding: 24px 26px;
	margin: 30px 0;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   4. Breadcrumbs / page banner tweaks
   -------------------------------------------------------------------------- */
.breadcrumbs .bb-sep { margin: 0 4px; color: #b3b5b8; }
.page-title-cont .page-title { color: #4b4e53; }

/* Below 1025px the header sits in normal flow with `margin-bottom: -76px`
   (style.css), pulling whatever follows up underneath it — that is how the
   transparent header overlays the homepage hero. Sub-pages have no hero, so
   the banner has to undo that pull or the H1 renders on top of the logo.
   Cancelling the exact margin is height-independent; picking a padding value
   is not, which is what broke this before. */
@media only screen and (max-width: 1024px) {
	.page-title-cont { margin-top: 76px; }
	.page-title-cont.page-title-small { padding-top: 26px; padding-bottom: 30px; }
	.page-title-small .page-title { margin-top: 0; }
}

@media only screen and (max-width: 767px) {

	/* 11px breadcrumbs fall under the 12px mobile-readability threshold, and
	   15px-tall links are hard to hit. Both are navigation, so both matter. */
	.breadcrumbs {
		text-align: left;
		margin-top: 16px;
		font-size: 12px;
		line-height: 26px;
	}
	.breadcrumbs a { display: inline-block; padding: 3px 0; }
}

/* --------------------------------------------------------------------------
   5. Contact page
   -------------------------------------------------------------------------- */
.bb-contact-row { margin-bottom: 10px; }
.bb-contact-row .fa { width: 22px; color: #4b4e53; }
.bb-contact-big {
	font-family: 'Lato', Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: 300;
	color: #4b4e53;
}
.bb-contact-big:hover { color: #101010; }
.bb-address { font-style: normal; line-height: 24px; }

/* Click-to-load map: no Google request until the visitor asks for it. */
.bb-map { position: relative; width: 100%; height: 420px; background: #eee; }
.bb-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.bb-map-ph {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	width: 90%;
	max-width: 520px;
}

/* --------------------------------------------------------------------------
   6. Tables (used by the optional price table on /cennik/)
   -------------------------------------------------------------------------- */
.bb-table-wrap { overflow-x: auto; margin-bottom: 16px; }
.bb-table { width: 100%; border-collapse: collapse; }
.bb-table th,
.bb-table td { padding: 11px 14px; border-bottom: 1px solid #e2e4e7; text-align: left; }
.bb-table th { background: #eee; color: #4b4e53; font-weight: 700; }

/* --------------------------------------------------------------------------
   7. Header: phone number in the menu
   -------------------------------------------------------------------------- */
.bb-nav-tel .main-menu-title { white-space: nowrap; }
.bb-nav-tel .fa { margin-right: 5px; }

/* The logos carry width/height attributes so the browser can reserve space
   (CLS). style.css sizes them by height only, so without an explicit
   width:auto the attribute wins and the logo comes out stretched. */
.logo-img { width: auto; }
.logo-footer { width: auto; height: auto; max-height: 190px; }

/* --------------------------------------------------------------------------
   7b. Language switcher
   Sits in the logo row so it is reachable on every page and both breakpoints.
   Each link points at the SAME page in the other language, not at the other
   homepage — that is what makes a switcher useful rather than annoying.
   -------------------------------------------------------------------------- */
/* Two variants, exactly one visible at a time — see langSwitcher() in
   _src/build.mjs.

   Above 1025px .main-menu-container is position:absolute and the nav fills the
   whole right side of the header, so there is no free space for an absolutely
   positioned switcher: it lands on the phone number. The desktop variant is
   therefore an <li> inside the menu, laid out by the list itself. No
   coordinates, so no collision is possible.

   Below 1025px the menu collapses behind the hamburger, so the switcher moves
   into the logo row and is positioned there. */
.bb-logo-bar { position: relative; }

.bb-lang-switch {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* --- desktop: inside the nav list ---
   The theme puts nav labels in a 20px band using `padding: 38px 3px 5px` and
   `margin: 0 12px 17px`, then shrinks to `padding: 20px 3px 5px` once the
   header affixes on scroll. The 26px-tall switcher is centred on that same
   band in both states: 38+10-13 = 35, and 20+10-13 = 17. */
#nav-onepage > li.bb-lang-li {
	display: block;
	padding: 35px 0 5px;
	margin: 0 12px 17px 12px;
	transition: padding .4s ease 0s;
}
.affix.header-1 #nav-onepage > li.bb-lang-li {
	padding-top: 17px;
	margin-bottom: 13px;
}

/* --- mobile: absolute in the logo row --- */
.bb-lang-bar {
	position: absolute;
	top: 50%;
	right: 62px;
	transform: translateY(-50%);
	z-index: 30;
}

@media only screen and (min-width: 1025px) {
	.bb-lang-bar { display: none; }
}
@media only screen and (max-width: 1024px) {
	#nav-onepage > li.bb-lang-li { display: none; }
}

.bb-lang {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1;
	color: #7e8082;
	border: 1px solid #dcdee1;
	border-radius: 2px;
	text-decoration: none;
	transition: color .15s, border-color .15s, background-color .15s;
}
.bb-lang:hover,
.bb-lang:focus {
	color: #4b4e53;
	border-color: #b9bcc1;
	text-decoration: none;
}
.bb-lang-on {
	color: #fff;
	background: #4b4e53;
	border-color: #4b4e53;
}
.bb-lang-on:hover,
.bb-lang-on:focus { color: #fff; }

/* Flags as inline SVG data URIs — no network requests, correct at any size.
   Gradients cannot draw a Union Jack (the diagonals come out as a plain
   cross), so both flags are real vector artwork instead. */
.bb-flag {
	width: 20px;
	height: 13px;
	border-radius: 1px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
	flex: 0 0 auto;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.bb-flag-pl {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Crect width='16' height='10' fill='%23fff'/%3E%3Crect y='5' width='16' height='5' fill='%23dc143c'/%3E%3C/svg%3E");
}
.bb-flag-en {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z'/%3E%3C/clipPath%3E%3Cpath d='M0,0 v30 h60 v-30 z' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' clip-path='url(%23t)' stroke='%23c8102e' stroke-width='4'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23c8102e' stroke-width='6'/%3E%3C/svg%3E");
}

/* On phones the hamburger owns the right edge, so the switcher sits to the
   left of it. The logo row then has three things competing for width:
   logo (268px at the theme's 42px height) + switcher + hamburger. Below
   768px that does not fit on a 375px screen, so the logo steps down to 34px
   (~217px wide) and the flags drop out below 480px. Measured, not guessed. */
/* Below 1025px the hamburger takes the right edge, so the switcher steps
   inboard of it. From there the logo row has three things sharing the width
   (logo + switcher + hamburger); each step down shrinks the logo just enough
   to keep them apart. Values verified by measuring at 320/360/375/414/480. */
@media only screen and (max-width: 1024px) {
	.bb-lang { padding: 6px 8px; font-size: 11px; }
	.bb-flag { width: 18px; height: 12px; }
}
@media only screen and (max-width: 767px) {
	.logo-img { height: 34px; }
}
@media only screen and (max-width: 479px) {
	.logo-img { height: 30px; }
	.bb-lang-switch { gap: 2px; }
	.bb-lang { padding: 5px 7px; letter-spacing: 0; }
	.bb-lang .bb-flag { display: none; }
}
@media only screen and (max-width: 359px) {
	.logo-img { height: 26px; }
}

/* --------------------------------------------------------------------------
   8. Footer additions
   -------------------------------------------------------------------------- */
/* The theme's footer logo is a 250x250 square capped at 190px, which was fine
   when this column held nothing else. Now that it carries the OFERTA list it
   made column 1 (472px) nearly three times the height of the others (161-186px)
   and dragged the whole footer to 813px. Smaller logo, tighter gap. */
.logo-footer-cont { margin-bottom: 24px; }
#footer .logo-footer { max-height: 104px; }

.bb-footer-links { list-style: none; padding: 0; margin: 0; }
.bb-footer-links li { margin-bottom: 3px; }
.bb-footer-links a { color: rgba(255, 255, 255, .7); line-height: 22px; }
.bb-footer-links a:hover { color: #fff; }
#footer .widget h4 { margin-bottom: 14px; }
.footer-2-partners { padding: 4px 0 18px; }
#footer .footer-2-text-cont a { color: rgba(255, 255, 255, .7); }
#footer .footer-2-text-cont a:hover { color: #fff; }
.footer-2-partners { text-align: center; padding: 10px 0 25px; font-size: 13px; }
.footer-2-partners > span { opacity: .7; margin-right: 6px; }
.footer-2-partners .bb-dot { opacity: .5; margin: 0 8px; }
.footer-2-copy-cont a { color: inherit; text-decoration: underline; }

/* Designer credit — a normal attribution line, deliberately quieter than the
   legal links above it and separate from the partners row. */
.bb-credit { margin: 6px 0 0; font-size: 12px; opacity: .65; }
.bb-credit a { color: inherit; text-decoration: underline; }
.bb-credit a:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   9. Sticky click-to-call bar (mobile only).
   53% of impressions are mobile and a phone call is the conversion here.
   -------------------------------------------------------------------------- */
.bb-callbar { display: none; }
@media only screen and (max-width: 767px) {
	.bb-callbar {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1030;
		background: #4b4e53;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, .18);
	}
	.bb-callbar a {
		display: block;
		padding: 15px 10px;
		text-align: center;
		color: #fff;
		font-size: 16px;
		letter-spacing: 1px;
		text-decoration: none;
	}
	.bb-callbar a:hover,
	.bb-callbar a:focus { color: #fff; text-decoration: none; }
	.bb-callbar .fa { margin-right: 7px; }

	/* Keep the bar from covering the footer text and the back-to-top button. */
	#footer { padding-bottom: 110px; }
	#back-top { bottom: 66px; }

	/* Stacked, the four footer blocks run to ~1400px of scrolling. Trim the
	   generous desktop spacing without touching the link tap targets above. */
	#footer.pt-80 { padding-top: 45px; }
	#footer .logo-footer { max-height: 76px; }
	.logo-footer-cont { margin-bottom: 16px; }
	#footer .widget { margin-bottom: 22px; }
	#footer .widget h4 { margin-bottom: 10px; }
	.footer-2-partners { padding: 0 0 14px; }
}

/* --------------------------------------------------------------------------
   9b. Mobile refinements
   Applied after a tap-target / readability pass on the built pages.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
	/* Sidebar link lists are navigation, not prose — 19px rows are too tight
	   to hit reliably. Prose links inside <p> are left alone on purpose. */
	.bb-list-tight li { margin-bottom: 0; }
	.bb-list-tight a,
	.bb-footer-links a {
		display: inline-block;
		padding: 8px 0;
		line-height: 20px;
	}

	/* Phone numbers on /kontakt/ are the primary action on this page. */
	.bb-contact-big { display: inline-block; padding: 6px 0; line-height: 30px; }
	.bb-contact-row { margin-bottom: 4px; }

	/* Stack call-to-action buttons full width instead of wrapping awkwardly. */
	.bb-cta-btns { padding-top: 18px; }
	.bb-cta-btns .button,
	.bb-callout .button {
		display: block;
		width: 100%;
		margin: 0 0 10px;
		text-align: center;
	}

	.bb-aside { padding: 22px 18px; }
	.bb-callout { padding: 20px 18px; }
	.bb-lead { font-size: 15px; line-height: 26px; }
	.bb-h2 { font-size: 24px; line-height: 32px; margin-top: 30px; }

	/* A 420px map on a 375px-wide phone eats the whole screen. */
	.bb-map { height: 320px; }
}

/* --------------------------------------------------------------------------
   11. FAQ accordion
   Builds on the theme's .accordion (dl/dt/dd + chevron); only the bits the
   theme leaves undefined are set here.
   -------------------------------------------------------------------------- */
.bb-faq { margin: 18px 0 0; }
.bb-faq > dt { margin-bottom: 8px; }
.bb-faq > dt > a {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 22px;
	letter-spacing: 0;
	color: #4b4e53;
	padding: 15px 44px 15px 18px;
	background: #fff;
}
.bb-faq > dt > a:hover { background: #fafafa; }
.bb-faq > dt > a.active { background: #eee; color: #101010; }
.bb-faq > dd {
	margin: 0 0 10px;
	padding: 4px 18px 18px;
	border: 1px solid #e5e5e5;
	border-top: 0;
	color: #7e8082;
	line-height: 25px;
}
.bb-faq > dd p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. Counters
   Only verifiable figures belong here — see the content files.
   -------------------------------------------------------------------------- */
.bb-counters { text-align: center; }
.bb-counter { padding: 12px 6px; }
.bb-counter .count-number {
	font-family: 'Lato', Arial, Helvetica, sans-serif;
	margin-top: 0;
}
.bb-counter-suffix { font-size: 45px; line-height: 45px; font-weight: 100; color: #4b4e53; }
.bb-counter-label {
	margin-top: 8px;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #8d9095;
	line-height: 18px;
}
@media only screen and (max-width: 767px) {
	.bb-counter .count-number,
	.bb-counter-suffix { font-size: 34px; line-height: 34px; }
	.bb-counter { padding: 10px 4px; }
}

/* --------------------------------------------------------------------------
   13. Testimonials
   CSS scroll-snap rather than owl.carousel — same behaviour, 24 KB lighter,
   and it degrades to a plain scrollable row without JS.
   -------------------------------------------------------------------------- */
.bb-quotes {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 10px;
	scrollbar-width: thin;
}
.bb-quote {
	flex: 0 0 min(100%, 380px);
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 2px;
	padding: 26px 24px;
}
.bb-quote-text { font-style: italic; color: #5f6165; line-height: 26px; margin-bottom: 14px; }
.bb-quote-meta { font-size: 13px; color: #8d9095; }
.bb-quote-meta strong { color: #4b4e53; font-style: normal; }
.bb-quote-stars { color: #f5a623; letter-spacing: 2px; margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   14. Sticky CTAs
   -------------------------------------------------------------------------- */
/* Mobile bar: two halves when WhatsApp is on, one full-width button when off. */
@media only screen and (max-width: 767px) {
	.bb-callbar { display: flex; }
	.bb-callbar a {
		flex: 1 1 50%;
		display: block;
		padding: 15px 8px;
		text-align: center;
		color: #fff;
		font-size: 15px;
		letter-spacing: .5px;
		text-decoration: none;
	}
	.bb-callbar a:hover,
	.bb-callbar a:focus { color: #fff; text-decoration: none; }
	.bb-cb-solo { flex-basis: 100%; }
	.bb-cb-wa { background: #25d366; color: #0b3d20; }
	.bb-cb-wa:hover, .bb-cb-wa:focus { color: #0b3d20; }
	.bb-callbar .fa { margin-right: 6px; }
}

/* Desktop panel: hidden until the hero is scrolled past. */
.bb-dcta { display: none; }
@media only screen and (min-width: 768px) {
	.bb-dcta {
		display: block;
		position: fixed;
		right: 20px;
		bottom: 20px;
		z-index: 1029;
		background: #fff;
		border: 1px solid #e2e4e7;
		border-radius: 3px;
		box-shadow: 0 6px 24px rgba(0, 0, 0, .13);
		padding: 14px 16px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(14px);
		transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
	}
	.bb-dcta.is-on {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity .25s ease, transform .25s ease, visibility 0s;
	}
	.bb-dcta-title {
		font-size: 11px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: #8d9095;
		margin-bottom: 8px;
	}
	.bb-dcta a {
		display: block;
		text-align: center;
		padding: 9px 18px;
		border-radius: 2px;
		font-size: 14px;
		text-decoration: none;
	}
	.bb-dcta-tel { background: #4b4e53; color: #fff; }
	.bb-dcta-tel:hover, .bb-dcta-tel:focus { background: #35383c; color: #fff; text-decoration: none; }
	.bb-dcta-wa { background: #25d366; color: #0b3d20; margin-top: 7px; }
	.bb-dcta-wa:hover, .bb-dcta-wa:focus { background: #1fbb59; color: #0b3d20; text-decoration: none; }
	.bb-dcta .fa { margin-right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
	.bb-dcta { transition: none; }
}

/* --------------------------------------------------------------------------
   15. Desktop menu panel (hamburger beside the language switcher)
   The top nav only fits five items; the six service pages otherwise live
   only in the footer. This surfaces them without changing the main menu.
   -------------------------------------------------------------------------- */
#nav-onepage > li.bb-menu-li { display: none; }

@media only screen and (min-width: 1025px) {
	#nav-onepage > li.bb-menu-li { display: block; padding: 35px 0 5px; margin: 0 0 17px 12px; transition: padding .4s ease 0s; }
	.affix.header-1 #nav-onepage > li.bb-menu-li { padding-top: 17px; margin-bottom: 13px; }
}

/* Narrow desktop (1025-1279px).
   The theme switches from the collapsed hamburger menu to the full horizontal
   nav at 1025px, but that nav is ~840px wide and the logo ends at 298px — so
   it needs ~1170px to clear. Between 1025 and 1279 the menu therefore ran into
   the logo (true before the desktop hamburger existed; adding it made the
   squeeze worse). Reclaim the width instead of letting them collide. */
@media only screen and (min-width: 1025px) and (max-width: 1279px) {
	#nav-onepage > li.bb-menu-li { display: none; }
	.logo-img { height: 34px; }
	#main-menu .navbar .nav > li > a { margin-left: 6px; margin-right: 6px; }
	#main-menu .navbar .nav > li > a .main-menu-title { letter-spacing: 1px; }
	.bb-lang-li { margin-left: 6px; }
	.bb-lang { padding: 6px 8px; }
}

/* At the very bottom of the desktop range there is still ~30px too little.
   Drop the Facebook icon rather than the phone number — one is decorative,
   the other is the conversion. Facebook remains in the footer. */
@media only screen and (min-width: 1025px) and (max-width: 1099px) {
	#nav-onepage > li.bb-fb-li { display: none; }
}

.bb-menu-btn {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 38px;
	height: 26px;
	padding: 0 8px;
	border: 1px solid #dcdee1;
	border-radius: 2px;
	background: transparent;
	cursor: pointer;
}
.bb-menu-btn span {
	display: block;
	height: 2px;
	width: 100%;
	background: #4b4e53;
	border-radius: 1px;
	transition: transform .2s ease, opacity .2s ease;
}
.bb-menu-btn:hover { border-color: #b9bcc1; }
.bb-menu-btn[aria-expanded="true"] { background: #4b4e53; border-color: #4b4e53; }
.bb-menu-btn[aria-expanded="true"] span { background: #fff; }
.bb-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bb-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bb-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.bb-megamenu {
	display: none;
	position: absolute;
	top: 100%;
	right: 30px;
	min-width: 300px;
	background: #fff;
	border: 1px solid #e2e4e7;
	border-radius: 3px;
	box-shadow: 0 10px 34px rgba(0, 0, 0, .14);
	padding: 22px 26px;
	text-align: left;
	z-index: 40;
}
.bb-megamenu.is-open { display: block; }
.bb-megamenu h5 {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #8d9095;
	margin: 0 0 10px;
}
.bb-megamenu ul { list-style: none; margin: 0 0 18px; padding: 0; }
.bb-megamenu ul:last-child { margin-bottom: 0; }
.bb-megamenu li { margin-bottom: 2px; }
.bb-megamenu a {
	display: block;
	padding: 7px 0;
	font-size: 14px;
	line-height: 20px;
	color: #4b4e53;
	letter-spacing: 0;
	text-decoration: none;
}
.bb-megamenu a:hover,
.bb-megamenu a:focus { color: #101010; text-decoration: underline; }

/* --------------------------------------------------------------------------
   10. Misc
   -------------------------------------------------------------------------- */
.bb-cta-btns { padding-top: 12px; }
.bb-cta-btns .button { margin: 0 8px 8px 0; }
.mt-40 { margin-top: 40px; }
.bb-legal h2:first-of-type { margin-top: 0; }

/* Screen-reader-only text (used on icon-only links). */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* WOW animations are opt-in per element; if JS fails the content must still
   be visible. The theme has no such guard, so add one. */
.no-js .wow { visibility: visible !important; }