/* =========================================================================
   LS COMPUTERSYSTEME — DESIGN SYSTEM
   The single source of design truth. Widgets ship with empty style
   controls; everything visual is decided here.

   Palette (brand sheet):  navy #15263E · white #FFFFFF · orange #EF7926
   Type: Creato Display (self-hosted, 400–900) — drop WOFF2 files into
   assets/fonts/ (see assets/fonts/README.md). Falls back to system-ui.
   Content width: 1280px. Brand motif: 15° parallelogram slash.
   Breakpoints: ≥1200 / 900–1199 / 640–899 / <640
   ========================================================================= */

/* ---- 0. Fonts ---------------------------------------------------------- */

@font-face {
	font-family: 'Creato Display';
	src: url('../fonts/CreatoDisplay-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Creato Display';
	src: url('../fonts/CreatoDisplay-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Creato Display';
	src: url('../fonts/CreatoDisplay-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Creato Display';
	src: url('../fonts/CreatoDisplay-Black.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* ---- 1. Tokens ---------------------------------------------------------- */

:root {
	--header-h: 114px;

	--ink: #15263E;          /* navy — headings, dark bands            */
	--ink-deep: #0E1A2C;     /* darker navy — panel depths             */
	--accent: #EF7926;       /* orange — one voice, used sparingly     */
	--accent-deep: #D9660F;  /* hover state                            */
	--steel: #44506A;        /* body text                              */
	--muted: #7E8CA3;        /* secondary text, labels                 */
	--line: #E4E9F0;         /* hairlines, card borders                */
	--wash: #F6F8FB;
	--dropdown-hover: rgba(255, 255, 255, 0.12);         /* alternating section background         */
	--paper: #FFFFFF;

	--font-display: 'Creato Display', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--wrap: 1280px;
	--gutter: clamp(20px, 4vw, 48px);
	--radius: 10px;
	--radius-lg: 16px;

	--skew: -15deg;

	--shadow-card: 0 1px 2px rgba(21, 38, 62, 0.04), 0 8px 24px rgba(21, 38, 62, 0.06);
	--shadow-pop: 0 2px 6px rgba(21, 38, 62, 0.08), 0 18px 48px rgba(21, 38, 62, 0.14);

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--t-fast: 160ms;
	--t-med: 320ms;

	/* Remap Elementor's global palette to brand tokens so anything the
	   editor produces lands on-brand even before this sheet's components. */
	--e-global-color-primary: var(--ink);
	--e-global-color-secondary: var(--steel);
	--e-global-color-text: var(--steel);
	--e-global-color-accent: var(--accent);
}

/* ---- 2. Reset & base ---------------------------------------------------- */

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

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

body.ls-main {
	margin: 0;
	font-family: var(--font-display);
	font-size: 17px;
	line-height: 1.65;
	color: var(--steel);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--ink);
	text-decoration-color: rgba(239, 121, 38, 0.5);
	text-underline-offset: 3px;
	transition: color var(--t-fast) ease;
}

a:hover {
	color: var(--accent-deep);
}

:where(button) {
	font-family: inherit;
}

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

::selection {
	background: var(--ink);
	color: #fff;
}

/* ---- 3. Layout primitives ----------------------------------------------- */

.ls-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.ls-wrap--narrow {
	max-width: 820px;
}

.ls-section {
	padding-block: clamp(56px, 9vw, 120px);
}

.ls-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 300;
	background: var(--ink);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 var(--radius) 0;
}

.ls-skip:focus {
	left: 0;
	color: #fff;
}

/* ---- 4. Typography ------------------------------------------------------ */

.ls-eyebrow {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.ls-eyebrow--accent {
	color: var(--accent);
}

.ls-eyebrow::before {
	content: '';
	display: inline-block;
	width: 9px;
	height: 13px;
	margin-right: 10px;
	vertical-align: -2px;
	background: var(--accent);
	transform: skewX(var(--skew));
}

.ls-title {
	margin: 0 0 18px;
	font-weight: 900;
	font-size: clamp(30px, 4vw, 50px);
	line-height: 1.12;
	letter-spacing: -0.035em;
	color: var(--ink);
	text-wrap: balance;
}

.ls-title--page {
	font-size: clamp(38px, 6vw, 76px);
}

.ls-lead {
	margin: 0 0 24px;
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.6;
	color: var(--steel);
	max-width: 60ch;
}

.ls-prose {
	max-width: 68ch;
}

.ls-prose p {
	margin: 0 0 1.1em;
}

.ls-prose ul,
.ls-prose ol {
	margin: 0 0 1.1em;
	padding-left: 1.2em;
}

.ls-prose li {
	margin-bottom: 0.4em;
}

.ls-prose h2,
.ls-prose h3 {
	color: var(--ink);
	line-height: 1.2;
	margin: 1.6em 0 0.5em;
	font-weight: 700;
}

.ls-prose h2 {
	font-size: 26px;
}

.ls-prose h3 {
	font-size: 20px;
}

.ls-textlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 2px solid var(--accent);
	padding-bottom: 2px;
	transition: gap var(--t-fast) var(--ease-out), color var(--t-fast) ease;
}

.ls-textlink:hover {
	gap: 12px;
	color: var(--accent-deep);
}

/* ---- 5. The slash — brand motif ----------------------------------------- */

.ls-slash {
	display: inline-block;
	width: 8px;
	height: 14px;
	background: var(--accent);
	transform: skewX(var(--skew));
	flex: none;
}

/* ---- 6. Buttons --------------------------------------------------------- */

.ls-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 26px;
	border: 2px solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--t-fast) ease, color var(--t-fast) ease,
		border-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out),
		box-shadow var(--t-fast) ease;
}

.ls-btn:active {
	transform: translateY(1px);
}

.ls-btn--primary {
	background: var(--btn1-bg);
	color: var(--btn1-fg);
	border-color: var(--btn1-bg);
}

.ls-btn--primary:hover {
	background: var(--btn1-bg-hover);
	color: var(--btn1-fg);
	border-color: var(--btn1-bg-hover);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.ls-btn--ghost {
	background: transparent;
	color: var(--btn2-fg);
	border-color: var(--btn2-border);
}

.ls-btn--ghost:hover {
	background: var(--btn2-border);
	color: var(--btn2-fg-hover);
}

/* On dark surfaces the outline button needs light strokes. */
.ls-band--ink .ls-btn--ghost,
.ls-footer .ls-btn--ghost,
body.ls-nav-dark .ls-header .ls-btn--ghost {
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.55);
}

.ls-band--ink .ls-btn--ghost:hover,
.ls-footer .ls-btn--ghost:hover,
body.ls-nav-dark .ls-header .ls-btn--ghost:hover {
	background: #FFFFFF;
	color: var(--ink);
}

.ls-btn--inverse {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}

.ls-btn--inverse:hover {
	background: #fff;
	color: var(--ink);
	border-color: #fff;
}

/* ---- 7. Topbar ---------------------------------------------------------- */

.ls-topbar {
	background: var(--ink);
	color: rgba(255, 255, 255, 0.88);
	font-size: 13.5px;
	transition: margin-top var(--t-med) var(--ease-out);
}

.ls-topbar__in {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 38px;
}

.ls-topbar a {
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.ls-topbar a:hover {
	color: var(--accent);
}

.ls-topbar {
	transition: margin-top var(--t-med) cubic-bezier(.16, 1, .3, 1);
}

.ls-topbar.is-hidden {
	margin-top: -38px;
}

/* ---- 8. Header / nav ---------------------------------------------------- */

.ls-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: var(--nav-bg);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
	transition: box-shadow var(--t-med) ease;
}

.ls-header.is-scrolled {
	box-shadow: 0 4px 24px rgba(21, 38, 62, 0.08);
}

.ls-header__in {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
	min-height: 76px;
}

.ls-brand {
	flex: none;
	display: inline-flex;
}

.ls-brand__img {
	height: 42px;
	width: auto;
}

.ls-nav {
	margin-left: auto;
}

.ls-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(6px, 1.4vw, 18px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ls-nav__item {
	position: relative;
}

.ls-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 10px;
	background: none;
	border: 0;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
	cursor: pointer;
	border-radius: 6px;
}

.ls-nav__link:hover {
	color: var(--accent-deep);
}

.ls-nav__chev {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--t-fast) ease;
}

.ls-nav__item--has-sub[data-open] .ls-nav__chev {
	transform: rotate(225deg) translateY(-1px);
}

.ls-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 240px;
	margin: 0;
	padding: 10px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-pop);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--t-fast) ease, transform var(--t-fast) var(--ease-out),
		visibility 0s linear var(--t-fast);
}

.ls-dropdown::before {
	content: '';
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px; /* hover bridge */
}

.ls-nav__item--has-sub[data-open] .ls-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	transition-delay: 0s;
}

.ls-dropdown a {
	display: block;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 500;
	color: var(--steel);
	text-decoration: none;
}

.ls-dropdown a:hover {
	background: var(--wash);
	color: var(--ink);
	box-shadow: inset 3px 0 0 var(--accent);
}

.ls-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ls-header__actions .ls-btn {
	padding: 11px 20px;
	font-size: 14.5px;
}

/* Burger */

.ls-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 5px;
	width: 48px;
	height: 48px;
	padding: 13px 11px;
	/* Follows the header tokens — a hardcoded white box sat wrong on the dark
	   navbar. color-mix keeps the border readable on light and dark alike. */
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--nav-fg) 35%, transparent);
	border-radius: var(--radius-sm, 6px);
	cursor: pointer;
	transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}

.ls-burger:hover,
.ls-burger[aria-expanded='true'] {
	border-color: var(--accent);
}

.ls-burger[aria-expanded='true'] {
	background: var(--accent);
}

.ls-burger[aria-expanded='true'] span {
	background: #fff;
}

.ls-burger span {
	display: block;
	height: 2.5px;
	background: var(--ink);
	border-radius: 2px;
	transition: transform var(--t-med) var(--ease-out), opacity var(--t-fast) ease;
}

.ls-burger[aria-expanded='true'] span:nth-child(1) {
	transform: translateY(7.5px) rotate(45deg);
}

.ls-burger[aria-expanded='true'] span:nth-child(2) {
	opacity: 0;
}

.ls-burger[aria-expanded='true'] span:nth-child(3) {
	transform: translateY(-7.5px) rotate(-45deg);
}

/* Mobile panel */

.ls-mobile {
	position: fixed;
	inset: 0;
	z-index: 190;
	background: var(--paper);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* Follows the real header height instead of assuming the tallest state,
	   and clears the iOS home indicator. */
	padding-top: calc(var(--header-h, 114px) + 12px);
	padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
	overscroll-behavior: contain;
}

.ls-mobile__label {
	margin: 26px 0 8px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.ls-mobile__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ls-mobile__list a {
	display: block;
	padding: 12px 0;
	font-size: 19px;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
}

.ls-mobile__list a:hover {
	color: var(--accent-deep);
	padding-left: 6px;
	transition: padding var(--t-fast) var(--ease-out);
}

.ls-mobile__ctas {
	display: grid;
	gap: 12px;
	margin-top: 28px;
}

body.ls-nav-open {
	/*
	 * No scroll lock on body.
	 *
	 * overflow:hidden here created a scroll container which, combined with the
	 * clip on <html>, killed position:sticky — the header stopped sticking once
	 * the burger had been opened. position:fixed would avoid that but jumps the
	 * page to the top on open.
	 *
	 * The menu is already position:fixed covering the viewport and carries
	 * overscroll-behavior:contain, so background scrolling is contained without
	 * touching body at all.
	 */
	overscroll-behavior: contain;
}

/* ---- 9. Footer ---------------------------------------------------------- */

.ls-footer {
	background: var(--ink);
	color: rgba(255, 255, 255, 0.82);
	font-size: 15px;
}

.ls-footer a {
	color: rgba(255, 255, 255, 0.86);
	text-decoration: none;
}

.ls-footer a:hover {
	color: var(--accent);
}

.ls-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: clamp(28px, 4vw, 56px);
	padding-block: clamp(48px, 6vw, 80px);
}

.ls-footer__logo {
	height: 40px;
	width: auto;
	margin-bottom: 16px;
}

.ls-footer__tagline {
	margin: 0 0 18px;
	font-weight: 700;
	color: #fff;
}

.ls-footer__addr {
	font-style: normal;
	line-height: 1.7;
	margin: 0 0 14px;
}

.ls-footer__since {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.ls-footer__title {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}

.ls-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.ls-footer__list--contact {
	gap: 12px;
}

.ls-footer__list--contact strong {
	color: #fff;
}

.ls-footer__hours {
	color: var(--muted);
}

.ls-footer__shoplink {
	display: inline-block;
	margin-top: 16px;
	font-weight: 700;
	color: var(--accent) !important;
}

.ls-footer__legalbar {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-block: 20px 26px;
}

.ls-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.ls-footer__copy {
	margin: 0;
	font-size: 14px;
}

.ls-footer__legallinks {
	display: flex;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
}

.ls-footer__note {
	margin: 14px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--muted);
}

/* ---- 10. Cookie notice --------------------------------------------------- */

/*
 * [hidden] is only display:none at low specificity, so any display rule beats
 * it. The JS sets hidden=true correctly; without this guard the banner simply
 * never disappears. Same trap applies to .ls-mobile below.
 */
.ls-cookie[hidden],
.ls-mobile[hidden] {
	display: none !important;
}

.ls-cookie {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 250;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.ls-cookie__box {
	pointer-events: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
	max-width: 760px;
	background: #fff;
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-pop);
	padding: 16px 20px;
}

.ls-cookie__text {
	margin: 0;
	font-size: 14.5px;
	flex: 1 1 380px;
}

.ls-cookie__ok {
	padding: 10px 20px;
	font-size: 14px;
}

/* ---- 11. Hero (photo split) ---------------------------------------------- */

.ls-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: clamp(28px, 5vw, 72px);
	padding-block: clamp(40px, 6vw, 84px);
}

.ls-hero__title {
	margin: 0 0 20px;
	font-weight: 900;
	font-size: clamp(34px, 5vw, 62px);
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-wrap: balance;
}

.ls-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
}

.ls-hero__media {
	position: relative;
}

.ls-hero__media::before {
	content: '';
	position: absolute;
	inset: 24px -18px -18px 24px;
	background: var(--wash);
	border-radius: var(--radius-lg);
	transform: skewX(-4deg);
	z-index: -1;
}

.ls-hero__media img {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

/* ---- 12. Inner hero ------------------------------------------------------ */

.ls-inner-hero {
	padding-block: clamp(36px, 6vw, 72px) clamp(8px, 2vw, 16px);
	max-width: 880px;
}

/* ---- 13. Split text ------------------------------------------------------ */

.ls-split__head {
	max-width: 760px;
	margin-bottom: clamp(24px, 4vw, 44px);
}

.ls-split__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 56px);
}

/* ---- 14. Stats band ------------------------------------------------------ */

.ls-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 3vw, 40px);
	padding-block: clamp(28px, 4vw, 44px);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.ls-stats__item {
	position: relative;
	padding-left: 18px;
}

.ls-stats__item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 6px;
	background: var(--accent);
	transform: skewX(var(--skew));
}

.ls-stats__value {
	margin: 0;
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 900;
	line-height: 1.05;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.ls-stats__label {
	margin: 6px 0 0;
	font-size: 14.5px;
	color: var(--muted);
}

/* ---- 15. Marquee --------------------------------------------------------- */

.ls-marquee {
	overflow: hidden;
	padding-block: 22px;
	border-block: 1px solid var(--line);
	background: var(--paper);
}

.ls-marquee--keywords {
	background: var(--ink);
	border-color: transparent;
}

.ls-marquee__track {
	display: flex;
	width: max-content;
	animation: ls-marquee 36s linear infinite;
}

.ls-marquee:hover .ls-marquee__track {
	animation-play-state: paused;
}

.ls-marquee__group {
	display: flex;
	align-items: center;
	gap: clamp(36px, 5vw, 72px);
	list-style: none;
	margin: 0;
	padding: 0 clamp(18px, 2.5vw, 36px);
}

.ls-marquee__item {
	display: flex;
	align-items: center;
	gap: 14px;
	white-space: nowrap;
}

.ls-marquee--brands .ls-marquee__text {
	font-size: clamp(19px, 2vw, 25px);
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
	transition: color var(--t-fast) ease;
}

.ls-marquee--brands .ls-marquee__item:hover .ls-marquee__text {
	color: var(--ink);
}

.ls-marquee--keywords .ls-marquee__text {
	font-size: clamp(15px, 1.5vw, 18px);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

@keyframes ls-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* ---- 16. Cards (shared) -------------------------------------------------- */

.ls-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(22px, 3vw, 34px);
	transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) ease,
		border-color var(--t-med) ease;
}

.ls-card::after {
	content: '';
	position: absolute;
	left: clamp(22px, 3vw, 34px);
	right: auto;
	bottom: 0;
	width: 44px;
	height: 3px;
	background: var(--accent);
	transform: skewX(var(--skew));
	opacity: 0;
	transition: opacity var(--t-med) ease, width var(--t-med) var(--ease-out);
}

.ls-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card);
	border-color: transparent;
}

.ls-card:hover::after {
	opacity: 1;
	width: 72px;
}

.ls-card__title {
	margin: 0 0 10px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ink);
}

.ls-card__text {
	margin: 0 0 18px;
	font-size: 15.5px;
	line-height: 1.65;
}

/* ---- 17. Services grid --------------------------------------------------- */

.ls-services__featured {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(24px, 4vw, 48px);
	margin-bottom: clamp(20px, 3vw, 28px);
	overflow: hidden;
}

.ls-services__featured-media {
	position: relative;
	min-height: 300px;
	border-radius: var(--radius);
	background:
		linear-gradient(160deg, rgba(21, 38, 62, 0.03), rgba(21, 38, 62, 0.08)),
		var(--wash);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ls-services__featured-media canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
}

.ls-services__fallback {
	max-height: 320px;
	width: auto;
	object-fit: contain;
}

.ls-services__hotspots {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: grid;
	gap: 9px;
	font-size: 15px;
	font-weight: 500;
	color: var(--steel);
}

.ls-services__hotspots li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ls-services__hotspots .ls-slash {
	width: 6px;
	height: 12px;
}

.ls-services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2.4vw, 26px);
}

/* ---- 18. Category grid --------------------------------------------------- */

.ls-categories__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(14px, 2vw, 22px);
	counter-reset: none;
}

.ls-categories__tile {
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 26px;
	min-height: 170px;
	padding: 20px 22px;
	background: var(--wash);
	border: 1px solid transparent;
	border-radius: var(--radius-lg);
	text-decoration: none;
	transition: background var(--t-med) ease, transform var(--t-med) var(--ease-out),
		border-color var(--t-med) ease, box-shadow var(--t-med) ease;
}

.ls-categories__num {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.ls-categories__title {
	align-self: end;
	font-size: 19px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.25;
}

.ls-categories__arrow {
	justify-self: end;
	font-size: 20px;
	color: var(--accent);
	transform: translateX(-6px);
	opacity: 0;
	transition: transform var(--t-med) var(--ease-out), opacity var(--t-med) ease;
}

.ls-categories__tile:hover {
	background: #fff;
	border-color: var(--line);
	box-shadow: var(--shadow-card);
	transform: translateY(-4px);
}

.ls-categories__tile:hover .ls-categories__arrow {
	transform: translateX(0);
	opacity: 1;
}

.ls-categories__all {
	margin: 26px 0 0;
}

/* ---- 19. Advisors -------------------------------------------------------- */

.ls-advisors__head {
	max-width: 720px;
	margin-bottom: clamp(24px, 4vw, 44px);
}

.ls-advisors__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(16px, 2.4vw, 26px);
}

.ls-advisor {
	display: grid;
	grid-template-columns: 128px 1fr;
	gap: 22px;
	align-items: center;
}

.ls-advisor__media {
	align-self: end;
	margin: -22px 0 -1px -6px;
}

.ls-advisor__media img {
	filter: drop-shadow(0 10px 18px rgba(21, 38, 62, 0.18));
}

.ls-advisor__role {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--muted);
}

.ls-advisor__contacts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
	font-size: 15px;
	font-weight: 500;
}

.ls-advisor__contacts a {
	text-decoration: none;
}

.ls-advisors__note {
	margin: 22px 0 0;
	font-size: 14.5px;
	color: var(--muted);
}

/* ---- 20. Process strip --------------------------------------------------- */

.ls-process {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: start;
}

.ls-process__railsticky {
	position: sticky;
	/* Follows the header rather than assuming its tallest state. */
	top: calc(var(--header-h, 76px) + 32px);
}

.ls-process__nav {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.ls-process__navitem {
	display: flex;
	align-items: baseline;
	gap: 14px;
	font-size: 15px;
	font-weight: 500;
	color: var(--muted);
	transition: color var(--t-fast) ease;
}

.ls-process__navitem.is-active {
	color: var(--ink);
	font-weight: 700;
}

.ls-process__navnum {
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

.ls-process__navitem.is-active .ls-process__navnum {
	color: var(--accent);
}

.ls-process__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(20px, 3vw, 32px);
}

.ls-process__step {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 18px;
	padding: clamp(20px, 2.6vw, 28px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.ls-process__num {
	margin: 0;
	font-size: 28px;
	font-weight: 900;
	line-height: 1;
	color: var(--line);
	font-variant-numeric: tabular-nums;
	transition: color var(--t-med) ease;
}

.ls-process__step.is-active .ls-process__num {
	color: var(--accent);
}

/* ---- 21. QA / spec panel (dark) ------------------------------------------ */

.ls-qa {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
	background: var(--ink);
	border-radius: var(--radius-lg);
	padding: clamp(28px, 5vw, 72px);
	color: rgba(255, 255, 255, 0.85);
}

.ls-qa .ls-title {
	color: #fff;
}

.ls-qa__text {
	margin: 0 0 28px;
	line-height: 1.7;
}

.ls-qa__figures {
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: start;
	gap: clamp(20px, 3vw, 44px);
	margin: 0;
}

.ls-qa__figure {
	display: flex;
	flex-direction: column-reverse;
}

.ls-qa__figvalue {
	margin: 0;
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 900;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.ls-qa__figlabel {
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 4px;
}

.ls-qa__panel {
	background: var(--ink-deep);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-lg);
	padding: clamp(20px, 2.6vw, 30px);
	font-variant-numeric: tabular-nums;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 48px rgba(0, 0, 0, 0.35);
}

.ls-qa__panelhead {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ls-qa__paneltitle {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.ls-qa__panelstatus {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: #6BD98A;
}

.ls-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #6BD98A;
	animation: ls-pulse 2s ease-in-out infinite;
}

@keyframes ls-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.35;
	}
}

.ls-qa__rows {
	margin: 0;
	display: grid;
	gap: 13px;
}

.ls-qa__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	font-size: 15px;
}

.ls-qa__row dt {
	color: rgba(255, 255, 255, 0.6);
}

.ls-qa__row dd {
	margin: 0;
	color: #fff;
	font-weight: 700;
}

.ls-qa__unit {
	color: rgba(255, 255, 255, 0.5);
	font-weight: 400;
	font-size: 13px;
	margin-left: 2px;
}

/* ---- 22. FAQ ------------------------------------------------------------- */

.ls-faq__list {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--line);
}

.ls-faq__item {
	border-bottom: 1px solid var(--line);
}

.ls-faq__q {
	margin: 0;
}

.ls-faq__toggle {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 20px 4px;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
	cursor: pointer;
	transition: color var(--t-fast) ease;
}

.ls-faq__toggle:hover {
	color: var(--accent-deep);
}

.ls-faq__icon {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
}

.ls-faq__icon::before,
.ls-faq__icon::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	background: var(--accent);
	transition: transform var(--t-med) var(--ease-out);
}

.ls-faq__icon::before {
	width: 16px;
	height: 2.5px;
}

.ls-faq__icon::after {
	width: 2.5px;
	height: 16px;
}

.ls-faq__toggle[aria-expanded='true'] .ls-faq__icon::after {
	transform: rotate(90deg);
}

.ls-faq__a {
	overflow: hidden;
}

.ls-faq__a .ls-prose {
	padding: 0 4px 22px;
	max-width: 62ch;
}

/* ---- 23. Card grid ------------------------------------------------------- */

.ls-cardgrid__head {
	max-width: 760px;
	margin-bottom: clamp(24px, 4vw, 44px);
}

.ls-cardgrid__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2.4vw, 26px);
}

/* ---- 24. CTA band (dark) ------------------------------------------------- */

.ls-cta {
	position: relative;
	overflow: hidden;
	background: var(--ink);
	border-radius: var(--radius-lg);
	padding: clamp(40px, 6vw, 84px) clamp(24px, 5vw, 84px);
	text-align: center;
	color: rgba(255, 255, 255, 0.85);
}

.ls-cta__slashes {
	position: absolute;
	top: -30px;
	right: -20px;
	display: flex;
	gap: 22px;
	opacity: 0.14;
	pointer-events: none;
}

.ls-cta__slashes .ls-slash {
	width: 46px;
	height: 220px;
}

.ls-cta__title {
	margin: 0 0 12px;
	font-size: clamp(28px, 3.6vw, 44px);
	font-weight: 900;
	letter-spacing: -0.035em;
	color: #fff;
	text-wrap: balance;
}

.ls-cta__text {
	margin: 0 auto 28px;
	max-width: 52ch;
}

.ls-cta__btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

/* ---- 25. Leasing calculator ---------------------------------------------- */

.ls-calc {
	max-width: 880px;
}

.ls-calc:hover {
	transform: none;
	box-shadow: var(--shadow-card);
}

.ls-calc__title {
	font-size: clamp(24px, 2.6vw, 32px);
}

.ls-calc__io {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(22px, 3vw, 40px);
	align-items: start;
	margin-top: 10px;
}

.ls-calc__results {
	display: grid;
	gap: 12px;
}

.ls-calc__result {
	display: grid;
	grid-template-columns: 110px 1fr auto;
	align-items: baseline;
	gap: 14px;
	padding: 14px 18px;
	background: var(--wash);
	border-radius: var(--radius);
	border-left: 4px solid var(--accent);
}

.ls-calc__months {
	margin: 0;
	font-weight: 700;
	color: var(--ink);
}

.ls-calc__rate {
	margin: 0;
	font-size: 22px;
	font-weight: 900;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.ls-calc__permonth {
	font-size: 14px;
	font-weight: 400;
	color: var(--muted);
}

.ls-calc__factor {
	margin: 0;
	font-size: 13px;
	color: var(--muted);
}

.ls-calc__partners {
	margin: 22px 0 0;
	font-size: 14.5px;
	font-weight: 500;
}

.ls-calc__disclaimer {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--muted);
}

/* ---- 26. Forms ----------------------------------------------------------- */

.ls-form {
	max-width: 780px;
}

.ls-form:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--line);
}

.ls-form::after {
	display: none;
}

.ls-form__intro {
	margin: -6px 0 24px;
	color: var(--muted);
}

.ls-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.ls-form__grid--narrow {
	grid-template-columns: 1fr;
	max-width: 420px;
}

.ls-field--full {
	grid-column: 1 / -1;
}

.ls-field__label {
	display: block;
	margin-bottom: 7px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
}

.ls-field__input {
	width: 100%;
	padding: 13px 15px;
	font-family: var(--font-display);
	font-size: 16px;
	color: var(--ink);
	background: var(--wash);
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
	transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}

.ls-field__input:focus {
	outline: none;
	border-color: var(--accent);
	background: #fff;
}

.ls-field__input--area {
	resize: vertical;
	min-height: 140px;
}

.ls-field__hint {
	margin: 7px 0 0;
	font-size: 13px;
	color: var(--muted);
}

.ls-form__hp {
	position: absolute;
	left: -9999px;
	top: auto;
}

.ls-form__status {
	min-height: 1.4em;
	margin: 16px 0 4px;
	font-size: 15px;
	font-weight: 500;
}

.ls-form__status.is-ok {
	color: #1E7C43;
}

.ls-form__status.is-err {
	color: #C62828;
}

.ls-form__submit[disabled] {
	opacity: 0.6;
	cursor: wait;
}

.ls-form__privacy {
	margin: 18px 0 0;
	font-size: 12.5px;
	color: var(--muted);
}

/* ---- 27. Blog ------------------------------------------------------------ */

.ls-blog__head {
	margin-bottom: clamp(24px, 4vw, 44px);
}

.ls-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(18px, 2.6vw, 28px);
}

.ls-post-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) ease;
}

.ls-post-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card);
}

.ls-post-card--featured {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.ls-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

.ls-post-card--featured .ls-post-card__media img {
	aspect-ratio: auto;
	min-height: 100%;
}

.ls-post-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: clamp(18px, 2.4vw, 30px);
}

.ls-post-card__meta {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.ls-post-card__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.ls-post-card--featured .ls-post-card__title {
	font-size: clamp(22px, 2.4vw, 30px);
}

.ls-post-card__title a {
	color: var(--ink);
	text-decoration: none;
}

.ls-post-card__title a:hover {
	color: var(--accent-deep);
}

.ls-post-card__excerpt {
	margin: 0;
	font-size: 15px;
}

.ls-blog__pagination {
	margin-top: clamp(28px, 4vw, 44px);
	display: flex;
	justify-content: center;
	gap: 6px;
}

.ls-blog__pagination .page-numbers {
	display: inline-flex;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-weight: 700;
	text-decoration: none;
	color: var(--ink);
}

.ls-blog__pagination .page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

.ls-blog__pagination .page-numbers:hover:not(.current) {
	border-color: var(--accent);
	color: var(--accent-deep);
}

/* ---- 28. Single post ----------------------------------------------------- */

.ls-single__head {
	margin-bottom: clamp(20px, 3vw, 32px);
}

.ls-single__media {
	margin: 0 0 clamp(24px, 3vw, 40px);
}

.ls-single__media img {
	border-radius: var(--radius-lg);
}

.ls-single__foot {
	margin-top: clamp(28px, 4vw, 48px);
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

/* ---- 29. 404 ------------------------------------------------------------- */

.ls-404__in {
	text-align: center;
	max-width: 640px;
}

.ls-404__code {
	margin: 0 0 8px;
	font-size: clamp(80px, 14vw, 150px);
	font-weight: 900;
	line-height: 1;
	color: var(--line);
	letter-spacing: -0.03em;
}

.ls-404__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 26px;
}

/* ---- 30. Reveal animation ------------------------------------------------ */

[data-ls-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
	transition-delay: var(--ls-reveal-delay, 0ms);
}

[data-ls-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* No-JS and editor safety: never hide content when the observer can't run. */

.no-js [data-ls-reveal],
.elementor-editor-active [data-ls-reveal] {
	opacity: 1;
	transform: none;
}

/* ---- 31. Elementor guardrails -------------------------------------------- */

/*
 * Elementor's default widget gap fights the section rhythm of the LS blocks,
 * so it is removed — but ONLY on LS blocks.
 *
 * Applying it to every widget would also beat any margin an editor sets in
 * Elementor's Advanced tab, because main.css loads last. Native widgets keep
 * their normal spacing behaviour so they stay fully editable.
 */
.elementor-widget[class*="elementor-widget-ls-"]:not(:last-child) {
	margin-bottom: 0;
}

/*
 * Layout fallback — IMPORTANT.
 *
 * The 1280px measure used to come only from the .ls-wrap class set in the page
 * JSON. Elementor discards unknown setting keys when an editor saves a page, so
 * a single visit to the editor could strip that class and send every section
 * full-bleed. The measure is therefore applied to the containers themselves as
 * well; .ls-wrap now refines rather than provides it.
 *
 * The selector must NOT use a direct-child combinator from body. On the front
 * end the containers are direct children, but the Elementor editor wraps the
 * whole page in div.elementor inside the preview iframe — so a `>` selector
 * silently stops matching and every section goes full-bleed the moment an
 * editor opens the page. That is what made Impressum, AGB and FAQ look broken
 * in the editor while the live pages were correct.
 */
/*
 * Our top-level containers are content_width:"full", which Elementor renders as
 * .e-con.e-con-full with the widgets as DIRECT children — there is no
 * .e-con-inner wrapper (that only exists for boxed containers). Selectors
 * written against .e-con-inner therefore never matched anything.
 */
.ls-main > .e-con.e-con-full,
.ls-main .elementor > .e-con.e-con-full {
	padding-inline: var(--gutter);
}

.ls-main .e-con.e-con-boxed > .e-con-inner {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/*
 * Deliberately NOT styling native Elementor widgets here.
 *
 * main.css is forced to load last so it wins over Elementor's per-post CSS.
 * That is correct for the LS blocks, but any rule set here on a native widget
 * would also override what an editor sets in Elementor's Style tab — their
 * colour or font choice would silently do nothing. Native text already
 * inherits Creato Display and the body colour from body.ls-main, so no rule is
 * needed and adding one would only take control away from the editor.
 */

/* ---- 32. Reduced motion -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.ls-marquee__track {
		animation: none;
		flex-wrap: wrap;
	}

	[data-ls-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* ---- 33. Breakpoints ----------------------------------------------------- */

@media (max-width: 1199px) {
	.ls-nav {
		display: none;
	}

	.ls-burger {
		display: flex;
	}

	.ls-header__actions .ls-btn--ghost {
		display: none;
	}

	/* The primary CTA stays; only the secondary is dropped. */
	.ls-header__actions .ls-btn--primary {
		padding-inline: 14px;
		font-size: 13px;
	}

	.ls-services__grid,
	.ls-cardgrid__grid,
	.ls-blog__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ls-categories__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.ls-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 899px) {
	.ls-hero,
	.ls-services__featured,
	.ls-qa,
	.ls-process,
	.ls-split__cols,
	.ls-calc__io {
		grid-template-columns: 1fr;
	}

	.ls-process__railsticky {
		position: static;
	}

	.ls-process__nav {
		display: none;
	}

	.ls-stats {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 28px;
	}

	.ls-categories__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ls-advisors__grid {
		grid-template-columns: 1fr;
	}

	.ls-post-card--featured {
		grid-template-columns: 1fr;
	}

	.ls-topbar__hours {
		display: none;
	}
}

@media (max-width: 639px) {
	body.ls-main {
		font-size: 16px;
	}

	.ls-services__grid,
	.ls-cardgrid__grid,
	.ls-blog__grid,
	.ls-categories__grid,
	.ls-form__grid {
		grid-template-columns: 1fr;
	}

	.ls-header__actions .ls-btn--primary {
		display: none;
	}

	.ls-header__in {
		min-height: 64px;
	}

	.ls-brand__img {
		height: 34px;
	}

	.ls-advisor {
		grid-template-columns: 96px 1fr;
		gap: 16px;
	}

	.ls-calc__result {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.ls-cta__btns .ls-btn {
		width: 100%;
	}

	.ls-hero__ctas .ls-btn {
		width: 100%;
	}
}

/* ---- 34. 3D hero (session 2) --------------------------------------------- */

.ls-hero3d {
	display: grid;
	/* The 3D gets the larger share — it is the reason to stop scrolling. */
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	align-items: center;
	gap: clamp(28px, 4vw, 64px);
	padding-block: clamp(36px, 4vw, 64px);
	min-height: min(88vh, 900px);
	min-height: min(88svh, 900px);
}

.ls-hero3d__chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 26px 0 0;
	padding: 0;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--steel);
}

.ls-hero3d__chips li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ls-hero3d__chips .ls-slash {
	width: 6px;
	height: 12px;
}

.ls-hero3d__stage {
	position: relative;
	min-height: clamp(420px, 58vw, 780px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ls-hero3d__stage::before {
	content: '';
	position: absolute;
	inset: 8% -4% 4% 12%;
	background: var(--wash);
	border-radius: var(--radius-lg);
	transform: skewX(-4deg);
	z-index: 0;
}

.ls-hero3d__stage canvas {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	z-index: 1;
	touch-action: pan-y;
}

.ls-hero3d__fallback {
	position: relative;
	z-index: 1;
	max-height: 480px;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 18px 32px rgba(21, 38, 62, 0.2));
}

@media (max-width: 899px) {
	.ls-hero3d {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.ls-hero3d__stage {
		min-height: 380px;
		order: -1;
	}
}


/* ---- Scroll behaviour ---------------------------------------------------- */

/*
 * Anchor targets must clear the sticky header, otherwise every in-page link
 * lands with its heading hidden behind the nav.
 */
[id] {
	scroll-margin-top: calc(var(--header-h, 76px) + 24px);
}

.ls-header.is-scrolled ~ * {
	--header-h: 76px;
}


/* ---- 3D stage: controls, cursor affordance ------------------------------- */

.ls-hero3d__scope {
	position: relative;
}

/*
 * touch-action keeps vertical page scrolling with the browser while horizontal
 * drag rotates the model. Without it, dragging on a phone either scrolls the
 * page or traps the gesture entirely — both feel broken.
 */
[data-ls-3d] {
	cursor: grab;
	touch-action: pan-y;
}

[data-ls-3d].is-grabbing {
	cursor: grabbing;
}

[data-ls-3d].is-hot {
	cursor: pointer;
}

[data-ls-3d] canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.ls-hero3d__hint {
	position: absolute;
	top: 18px;
	left: 20px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	color: var(--muted);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	pointer-events: none;
}

.ls-hero3d__controls {
	position: absolute;
	top: 14px;
	right: 16px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.ls-3dbtn {
	padding: 10px 16px;
	border: 1px solid var(--line-strong, #c6d0de);
	background: rgba(255, 255, 255, .92);
	color: var(--ink);
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--t-fast, .2s) ease, border-color var(--t-fast, .2s) ease, color var(--t-fast, .2s) ease;
}

.ls-3dbtn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.ls-3dbtn[aria-pressed="true"] {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

.ls-3dbtn--ghost {
	background: transparent;
	color: var(--muted);
}

.ls-3dbtn--ghost:hover {
	background: rgba(255, 255, 255, .92);
}

.ls-3dbtn[hidden] {
	display: none;
}

@media (max-width: 640px) {
	.ls-hero3d__controls {
		top: auto;
		bottom: 14px;
		right: 14px;
		flex-direction: row;
	}
	.ls-3dbtn {
		padding: 9px 12px;
		font-size: 10px;
	}
	.ls-hero3d__hint {
		font-size: 9.5px;
	}
}


/* =========================================================================
   VISUAL DEPTH LAYER
   Added after the base system so it overrides without editing the originals.
   Everything here is additive: remove this block and the site still works.
   ========================================================================= */

/* ---- Display type: use the full weight of the brand face ---------------- */

.ls-hero3d__title,
.ls-ihero__title,
.ls-section__title,
h1, h2 {
	font-weight: 900;
	letter-spacing: -0.038em;
	line-height: 0.98;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.ls-hero3d__title,
	.ls-ihero__title {
		background-image: linear-gradient(178deg, var(--ink) 0%, #24405f 62%, #2c4a6d 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		padding-bottom: 0.06em;
	}

	.ls-band--ink .ls-hero3d__title,
	.ls-band--ink .ls-ihero__title {
		background-image: linear-gradient(178deg, #ffffff 0%, #cfd9e6 100%);
	}

	.ls-hero3d__title em,
	.ls-ihero__title em {
		-webkit-text-fill-color: var(--accent);
	}
}


.ls-hero3d__title em,
.ls-ihero__title em {
	font-style: normal;
	color: var(--accent);
}

/* Oversized ghost numeral / word behind a section heading. */
.ls-ghost {
	position: relative;
}

.ls-ghost::before {
	content: attr(data-ghost);
	position: absolute;
	top: -0.42em;
	left: -0.04em;
	z-index: 0;
	color: transparent;
	-webkit-text-stroke: 1px rgba(21, 38, 62, 0.09);
	font-size: 2.4em;
	font-weight: 900;
	letter-spacing: -0.05em;
	line-height: 1;
	pointer-events: none;
	user-select: none;
}

.ls-ghost > * {
	position: relative;
	z-index: 1;
}

/* ---- Glass surfaces ------------------------------------------------------
   Used only where something sits over a busy or dark backdrop — the 3D stage
   controls and panels on the navy bands. Glass over flat white reads as noise,
   so it is deliberately not applied to ordinary cards.
   ------------------------------------------------------------------------- */

.ls-glass {
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		0 20px 48px -28px rgba(4, 12, 24, 0.7);
}

.ls-band--ink .ls-panel,
.ls-band--ink .ls-qa__panel {
	background: rgba(255, 255, 255, 0.055);
	backdrop-filter: blur(12px) saturate(130%);
	-webkit-backdrop-filter: blur(12px) saturate(130%);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.ls-3dbtn {
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(10px) saturate(150%);
	-webkit-backdrop-filter: blur(10px) saturate(150%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 24px -18px rgba(21, 38, 62, 0.7);
}

/* ---- Cards: lift, sheen, accent edge ------------------------------------ */

.ls-card,
.ls-svc,
.ls-teaser__item,
.ls-advisor-card,
.ls-cat {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition:
		transform 0.45s cubic-bezier(.16, 1, .3, 1),
		box-shadow 0.45s cubic-bezier(.16, 1, .3, 1),
		border-color 0.45s cubic-bezier(.16, 1, .3, 1);
}

/* Diagonal sheen that sweeps once on hover. */
.ls-card::after,
.ls-svc::after,
.ls-teaser__item::after,
.ls-advisor-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(104deg,
		transparent 38%,
		rgba(255, 255, 255, 0.42) 50%,
		transparent 62%);
	transform: translateX(-120%);
	transition: transform 0.8s cubic-bezier(.16, 1, .3, 1);
	pointer-events: none;
	opacity: 0;
}

.ls-card:hover::after,
.ls-svc:hover::after,
.ls-teaser__item:hover::after,
.ls-advisor-card:hover::after {
	transform: translateX(120%);
	opacity: 1;
}

/* Accent rule that grows along the top edge. */
.ls-card::before,
.ls-svc::before,
.ls-advisor-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 0;
	height: 3px;
	background: var(--accent);
	transition: width 0.5s cubic-bezier(.16, 1, .3, 1);
}

.ls-card:hover::before,
.ls-svc:hover::before,
.ls-advisor-card:hover::before {
	width: 100%;
}

.ls-card:hover,
.ls-svc:hover,
.ls-teaser__item:hover,
.ls-advisor-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 30px 60px -34px rgba(21, 38, 62, 0.55);
}

/* ---- Pointer-tracked tilt (set by JS, degrades to nothing) --------------- */

[data-ls-tilt] {
	transform:
		perspective(900px)
		rotateX(var(--tilt-x, 0deg))
		rotateY(var(--tilt-y, 0deg))
		translateY(var(--tilt-lift, 0px));
	transform-style: preserve-3d;
	transition: transform 0.5s cubic-bezier(.16, 1, .3, 1);
}

[data-ls-tilt].is-tilting {
	transition: transform 0.12s linear;
}

/* ---- Section rhythm: brand slash divider -------------------------------- */

.ls-rule {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 22px;
}

.ls-rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--line-strong, #c6d0de), transparent);
}

.ls-band--ink .ls-rule::after {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent);
}

/* ---- Staggered reveal ---------------------------------------------------
   The reveal system is driven by [data-ls-reveal] in interactions.js. Do not
   add rules that hide content behind a different attribute name — anything the
   JS never sees stays invisible forever.
   ------------------------------------------------------------------------- */

/* ---- Ambient grid on dark bands ----------------------------------------- */

.ls-band--ink {
	position: relative;
	isolation: isolate;
}

.ls-band--ink::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.ls-card,
	.ls-svc,
	.ls-teaser__item,
	.ls-advisor-card,
	[data-ls-tilt] {
		transition: none;
		transform: none;
	}
	.ls-card::after,
	.ls-svc::after,
	.ls-teaser__item::after,
	.ls-advisor-card::after {
		display: none;
	}
}


/* ---- Leasing slider ------------------------------------------------------ */

.ls-calc__range {
	--fill: 0%;
	width: 100%;
	height: 4px;
	margin: 22px 0 0;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: linear-gradient(90deg, var(--accent) var(--fill), var(--line, #e4e9f0) var(--fill));
	cursor: pointer;
	touch-action: pan-y;
}

.ls-calc__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 26px;
	height: 26px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--ink);
	box-shadow: 0 4px 14px -4px rgba(21, 38, 62, 0.6);
	cursor: grab;
	transition: transform 0.2s cubic-bezier(.16, 1, .3, 1);
}

.ls-calc__range:active::-webkit-slider-thumb {
	transform: scale(1.15);
	cursor: grabbing;
}

.ls-calc__range::-moz-range-thumb {
	width: 26px;
	height: 26px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--ink);
	box-shadow: 0 4px 14px -4px rgba(21, 38, 62, 0.6);
	cursor: grab;
}

.ls-calc__range:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 6px;
}

.ls-calc__bounds {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
}


/* =========================================================================
   COLOUR LAYER
   Tints derived from the three brand colours only — navy or orange at reduced
   alpha. No new hues, so the palette stays compliant.

   Selectors here were checked against the classes the widgets actually emit.
   A rule targeting a class that does not exist is dead weight at best; if it
   also hides something, it takes the page down.
   ========================================================================= */

:root {
	--tint-navy:     rgba(21, 38, 62, 0.045);
	--tint-accent:   rgba(239, 121, 38, 0.07);
	--tint-accent-2: rgba(239, 121, 38, 0.14);
}

/* ---- Section grounds ----------------------------------------------------
   Sections get a flat background_color from the page JSON. These overlays sit
   on top of whichever colour Elementor set, so both the white and the wash
   sections gain depth without the JSON changing.
   ------------------------------------------------------------------------- */

.ls-main > .e-con,
.ls-main > .elementor-element > .e-con {
	position: relative;
}

.ls-main > .e-con::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(80% 60% at 88% 0%, var(--tint-navy) 0%, transparent 58%);
}

.ls-main > .e-con:nth-of-type(odd)::before {
	background: radial-gradient(90% 70% at 10% 0%, var(--tint-accent) 0%, transparent 55%);
}

/* ---- Eyebrows and labels ------------------------------------------------ */

.ls-eyebrow {
	color: var(--accent-deep);
}

/* ---- Titles get an accent rule ----------------------------------------- */

.ls-hero__title::after,
.ls-card__title::after,
.ls-cta__title::after {
	content: none; /* keep small titles clean */
}

.ls-section__title::after,
.ls-cardgrid__head .ls-title::after,
.ls-advisors__head .ls-title::after,
.ls-split__head .ls-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin-top: 18px;
	background: linear-gradient(90deg, var(--accent) 0%, rgba(239, 121, 38, 0.15) 100%);
}

/* ---- Cards: tinted ground, warmer on hover ----------------------------- */

.ls-card {
	background:
		linear-gradient(160deg, rgba(239, 121, 38, 0.05) 0%, transparent 42%),
		#fff;
}

.ls-card:hover {
	background:
		linear-gradient(160deg, var(--tint-accent-2) 0%, transparent 52%),
		#fff;
}

/* ---- Stats: alternate so the row is not one flat colour ---------------- */

.ls-stats__item:nth-child(odd) .ls-stats__value,
.ls-stats__item:nth-child(odd) .ls-stats__num {
	color: var(--accent-deep);
}

.ls-stats__item:nth-child(even) .ls-stats__value,
.ls-stats__item:nth-child(even) .ls-stats__num {
	color: var(--ink);
}

/* ---- Process and category numerals ------------------------------------- */

.ls-process__num,
.ls-process__navnum,
.ls-categories__num {
	color: var(--accent);
	font-weight: 900;
}

.ls-categories__tile:hover .ls-categories__num {
	color: #fff;
}

.ls-categories__arrow {
	color: var(--accent);
}

/* ---- Footer: lift it off flat navy ------------------------------------- */

.ls-footer {
	background:
		radial-gradient(80% 90% at 88% 0%, rgba(239, 121, 38, 0.10) 0%, transparent 55%),
		var(--ink);
}

.ls-footer__title {
	color: var(--accent);
}

.ls-footer__shoplink {
	color: var(--accent);
}

/* ---- Prose links -------------------------------------------------------- */

.ls-prose a {
	color: var(--accent-deep);
	text-decoration-color: rgba(239, 121, 38, 0.4);
	text-underline-offset: 3px;
}

.ls-prose a:hover {
	text-decoration-color: var(--accent);
}

/* ---- Advisor photo ------------------------------------------------------ */

.ls-advisor__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background:
		radial-gradient(70% 70% at 50% 12%, rgba(239, 121, 38, 0.16) 0%, transparent 62%),
		var(--tint-navy);
}

.ls-advisor__media img {
	display: block;
	width: 100%;
	height: auto;
	/* The supplied cutout is trimmed hard at chest height, so it must sit flush
	   on the bottom edge or a cut line shows across both subjects. */
	margin-bottom: -1px;
	object-fit: contain;
	object-position: bottom center;
}


/* =========================================================================
   PAGE HEADER BANDS + DARKER CHROME
   Requested centrally so no page has to be edited individually.
   ========================================================================= */

/*
 * Darker navy for the chrome (topbar, nav, footer) than the body navy, so the
 * frame reads as heavier than the content. Separate token rather than changing
 * --ink, which would repaint every dark band on the site at once.
 */
:root {
	/* One token per surface. Each controls exactly what its name says — no
	   token drives more than one part of the page. */
	--topbar-bg: #F7F8FB;
	--topbar-fg: #44506A;

	--nav-bg: #031022;
	--nav-fg: rgba(255, 255, 255, 0.90);

	--footer-bg: #031022;
	--footer-fg: rgba(255, 255, 255, 0.82);

	--band-bg: #031022;
	--band-fg: #FFFFFF;

	--btn1-bg: #EF7926;
	--btn1-bg-hover: #D9660F;
	--btn1-fg: #FFFFFF;
	--btn2-fg: #15263E;
	--btn2-fg-hover: #FFFFFF;
	--btn2-border: #15263E;

	--chrome: #0B1626;
	/* Derived: a lighter step of --chrome for gradient tops. Kept as its own
	   token so the Customizer only needs to expose one navy for the chrome. */
	--chrome-2: color-mix(in srgb, var(--chrome) 82%, #2E5C9E 18%);
}

.ls-topbar {
	background: var(--topbar-bg);
	color: var(--topbar-fg);
}

.ls-topbar a,
.ls-topbar .ls-topbar__item {
	color: var(--topbar-fg);
}

.ls-topbar a:hover {
	color: var(--accent);
}

/*
 * The header bar reads --nav-bg / --nav-fg rather than hardcoded white, so the
 * Customizer can darken it. Logo, links and burger all follow --nav-fg, which
 * is what stops a dark header ending up with invisible dark text.
 */
.ls-nav {
	background: transparent;
}

.ls-header .ls-nav__link,
.ls-header .ls-brand,
.ls-header .ls-burger span {
	color: var(--nav-fg);
}

.ls-header .ls-burger span {
	background: var(--nav-fg);
}

.ls-header .ls-nav__link:hover {
	color: var(--accent);
}

/* Dark header: swap to the light logo and lighten the hairline. */
body.ls-nav-dark .ls-header {
	border-bottom-color: rgba(255, 255, 255, 0.14);
}

body.ls-nav-dark .ls-brand__img {
	content: var(--nav-logo);
}

body.ls-nav-dark .ls-dropdown {
	background: var(--chrome);
	border-color: rgba(255, 255, 255, 0.14);
}

body.ls-nav-dark .ls-dropdown a {
	color: rgba(255, 255, 255, 0.86);
}

body.ls-nav-dark .ls-dropdown a:hover {
	color: var(--accent);
}

.ls-footer {
	background:
		radial-gradient(90% 100% at 88% 0%, rgba(239, 121, 38, 0.13) 0%, transparent 58%),
		var(--footer-bg);
	color: var(--footer-fg);
}

/*
 * The automatic dark gradient band on page headers was removed on request —
 * section backgrounds are now set per page in Elementor instead.
 *
 * Background AND text colour were removed together. Removing only the
 * background would leave white text on a white section, which is exactly the
 * failure this pair caused before. If a section is given a dark background in
 * Elementor, add the class "ls-on-dark" to that section (Erweitert ->
 * CSS-Klassen) to switch its text to light.
 */
.ls-inner-hero {
	padding-block: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 40px);
}




/* ---- Helper classes an editor can type into CSS-Klassen ------------------ */

/*
 * ls-bleed — run a section edge to edge, ignoring the 1280px measure.
 * For the keyword strip, stats band and full-width hero images.
 */
.ls-main .e-con.ls-bleed,
.ls-main .ls-bleed {
	max-width: none;
	padding-inline: 0;
	/* No 100vw here either — see the note on .ls-marquee--bleed. */
	margin-inline: 0;
}

.ls-main .e-con.ls-bleed > .e-con-inner {
	max-width: none;
	padding-inline: 0;
}

/*
 * ls-on-dark — light text for a section given a dark background in Elementor.
 * Pairs with removing the automatic band: the editor sets the background, this
 * makes the text readable on it.
 */
.ls-on-dark,
.ls-on-dark p,
.ls-on-dark li {
	color: rgba(255, 255, 255, 0.82);
}

.ls-on-dark .ls-title,
.ls-on-dark h1,
.ls-on-dark h2,
.ls-on-dark h3,
.ls-on-dark .elementor-heading-title {
	color: #FFFFFF;
}

.ls-on-dark .ls-eyebrow {
	color: var(--accent);
}

.ls-on-dark .ls-btn--ghost {
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.55);
}

.ls-on-dark .ls-btn--ghost:hover {
	background: #FFFFFF;
	color: var(--ink);
}

.ls-on-dark .ls-card {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
}


/* ---- One-column text block ---------------------------------------------- */

.ls-textblock__head {
	max-width: 760px;
	margin-bottom: clamp(18px, 3vw, 32px);
}

.ls-textblock .ls-prose {
	max-width: 70ch;
}

.ls-textblock--full .ls-prose,
.ls-textblock--full .ls-textblock__head {
	max-width: none;
}


/* =========================================================================
   COLOUR SCHEMES ON CONTENT BLOCKS
   The modifier class is emitted by the widget on its own root element, so the
   text colour can never apply without the class that triggers it. This is the
   pattern that replaced the earlier :has() approach, which could set white
   text while the matching background rule failed to apply.
   ========================================================================= */

:root {
	--on-dark-title: #FFFFFF;
	--on-dark-text: #F7F8FB;
}

.ls-textblock--dark .ls-title,
.ls-textblock--dark h2,
.ls-textblock--dark h3,
.ls-split--dark .ls-title,
.ls-split--dark h2,
.ls-inner-hero--dark .ls-title,
.ls-inner-hero--dark h1 {
	color: var(--on-dark-title);
}

.ls-textblock--dark .ls-prose,
.ls-textblock--dark .ls-prose p,
.ls-textblock--dark .ls-prose li,
.ls-split--dark .ls-prose,
.ls-split--dark .ls-prose p,
.ls-split--dark .ls-prose li,
.ls-inner-hero--dark .ls-lead,
.ls-inner-hero--dark p {
	color: var(--on-dark-text);
}

/* Links inside dark prose need to stay distinguishable from body text. */
.ls-textblock--dark .ls-prose a,
.ls-split--dark .ls-prose a {
	color: var(--accent);
	text-decoration-color: rgba(239, 121, 38, 0.5);
}

/* ---- Text alignment on the one-column block ----------------------------- */

/*
 * Centring has to move the block as well as the lines. Without margin-inline
 * the 70ch measure stays left-aligned and only the text inside it centres,
 * which reads as a mistake.
 */
.ls-textblock--center {
	text-align: center;
}

.ls-textblock--center .ls-textblock__head,
.ls-textblock--center .ls-prose {
	margin-inline: auto;
}

.ls-textblock--center .ls-eyebrow {
	justify-content: center;
}

/* ---- Marquee full bleed -------------------------------------------------- */

/*
 * Full bleed without 100vw.
 *
 * 100vw includes the scrollbar width, so it is wider than the usable viewport
 * whenever a scrollbar exists — which produces exactly the few pixels of
 * horizontal scroll this was meant to avoid. Negative margins against the
 * parent's own width achieve the same result and can never exceed it.
 */
.ls-marquee--bleed {
	margin-inline: calc( var(--gutter) * -1 );
}

/* ---- Dropdown hover ------------------------------------------------------ */

/*
 * --wash is the light section background; on the dark header it produced a
 * near-white block behind the hovered item. On a dark menu the hover is a
 * translucent white instead, which keeps the contrast readable without the
 * hard block.
 */
/*
 * Glass dropdown.
 *
 * backdrop-filter blurs whatever sits behind the panel, so the menu reads as
 * frosted glass over the page rather than a solid block. Requires a
 * translucent background — a fully opaque one has nothing to blur through.
 */
body.ls-nav-dark .ls-dropdown {
	background: rgba(11, 22, 38, 0.72);
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.10),
		0 24px 48px -20px rgba(3, 16, 34, 0.7);
}

body.ls-nav-dark .ls-dropdown a:hover {
	background: var(--dropdown-hover);
	color: var(--accent);
	box-shadow: inset 3px 0 0 var(--accent);
}

/*
 * Browsers without backdrop-filter get a solid panel instead of a transparent
 * one with nothing behind it — otherwise the menu would be unreadable.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.ls-nav-dark .ls-dropdown {
		background: #0B1626;
	}
}


/* =========================================================================
   GENERIC BLOCK APPEARANCE — Farbschema + Größe
   One block of rules for all 17 widgets. The modifier is emitted by each
   widget on its own root element, so a colour can never apply without the
   class that triggers it.
   ========================================================================= */

/* ---- Dark scheme -------------------------------------------------------- */

.ls-scheme--dark .ls-title,
.ls-scheme--dark h1,
.ls-scheme--dark h2,
.ls-scheme--dark h3,
.ls-scheme--dark h4,
.ls-scheme--dark .elementor-heading-title {
	color: var(--on-dark-title);
}

.ls-scheme--dark,
.ls-scheme--dark p,
.ls-scheme--dark li,
.ls-scheme--dark dd,
.ls-scheme--dark .ls-prose,
.ls-scheme--dark .ls-lead {
	color: var(--on-dark-text);
}

/* Small print stays quieter than body text rather than matching it. */
.ls-scheme--dark .ls-eyebrow,
.ls-scheme--dark .ls-meta,
.ls-scheme--dark small {
	color: var(--accent);
}

/* Structural lines have to lighten too, or they vanish on a dark ground. */
.ls-scheme--dark hr,
.ls-scheme--dark .ls-card,
.ls-scheme--dark .ls-faq__row,
.ls-scheme--dark .ls-stats__item,
.ls-scheme--dark .ls-process__step {
	border-color: rgba(255, 255, 255, 0.16);
}

.ls-scheme--dark .ls-card {
	background: rgba(255, 255, 255, 0.06);
}

/* Outline buttons need light strokes on a dark ground. */
.ls-scheme--dark .ls-btn--ghost {
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.55);
}

.ls-scheme--dark .ls-btn--ghost:hover {
	background: #FFFFFF;
	color: var(--ink);
}

.ls-scheme--dark .ls-prose a {
	color: var(--accent);
	text-decoration-color: rgba(239, 121, 38, 0.5);
}

/* ---- Size scale ---------------------------------------------------------
   Multiplies the existing clamp() sizes rather than replacing them, so the
   responsive behaviour and the type scale both survive. Bounded to two steps
   either side of normal — no arbitrary font sizes.
   ------------------------------------------------------------------------- */

.ls-scale--s {
	--ls-scale: 0.85;
}

.ls-scale--l {
	--ls-scale: 1.18;
}

.ls-scale--s .ls-title,
.ls-scale--s h1,
.ls-scale--s h2,
.ls-scale--s h3,
.ls-scale--l .ls-title,
.ls-scale--l h1,
.ls-scale--l h2,
.ls-scale--l h3 {
	font-size: calc(1em * var(--ls-scale, 1));
}

.ls-scale--s .ls-prose,
.ls-scale--s .ls-lead,
.ls-scale--l .ls-prose,
.ls-scale--l .ls-lead {
	font-size: calc(1rem * var(--ls-scale, 1));
}

/* ---- Dropdown: glass ----------------------------------------------------- */

/*
 * backdrop-filter needs a translucent background to blur through — an opaque
 * colour would render the filter invisible. The solid fallback below runs
 * first so browsers without backdrop-filter still get a readable panel.
 */
.ls-dropdown {
	background: var(--chrome);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ls-dropdown {
		background: color-mix(in srgb, var(--chrome) 62%, transparent);
		backdrop-filter: blur(18px) saturate(160%);
		-webkit-backdrop-filter: blur(18px) saturate(160%);
		border: 1px solid rgba(255, 255, 255, 0.14);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.16),
			0 24px 48px -24px rgba(4, 12, 24, 0.55);
	}
}

/*
 * Glass dropdown.
 *
 * backdrop-filter blurs whatever sits behind the panel, so the menu reads as
 * frosted glass over the page rather than a solid block. Requires a
 * translucent background — a fully opaque one has nothing to blur through.
 */
body.ls-nav-dark .ls-dropdown {
	background: rgba(11, 22, 38, 0.72);
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.10),
		0 24px 48px -20px rgba(3, 16, 34, 0.7);
}

body.ls-nav-dark .ls-dropdown a:hover {
	background: var(--dropdown-hover);
	color: var(--accent);
	box-shadow: inset 3px 0 0 var(--accent);
}

/*
 * Browsers without backdrop-filter get a solid panel instead of a transparent
 * one with nothing behind it — otherwise the menu would be unreadable.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.ls-nav-dark .ls-dropdown {
		background: #0B1626;
	}
}


/* =========================================================================
   MOBILE FIXES + STICKY CONTACT RAIL
   ========================================================================= */

/* ---- 1. Burger must sit right ------------------------------------------
   margin-left:auto lived on .ls-nav, which is display:none below 1199px —
   so on mobile nothing pushed the actions across and the burger ended up
   beside the logo. Moving the auto margin onto the actions fixes it at every
   width, since .ls-nav sits before it and keeps its own position anyway.
   ------------------------------------------------------------------------ */

@media (max-width: 1199px) {
	.ls-header__actions {
		margin-left: auto;
	}
}

/* ---- 2. Quality panel figures ------------------------------------------
   repeat(3, auto) forced three columns at any width, so on a phone the row
   ran past the screen edge. auto-fit lets them wrap.
   ------------------------------------------------------------------------ */

@media (max-width: 600px) {
	.ls-qa__figures {
		grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
		justify-content: stretch;
		gap: 18px 14px;
	}

	.ls-qa__figvalue {
		font-size: clamp(22px, 7vw, 30px);
	}

	.ls-qa__figlabel {
		font-size: 11px;
		letter-spacing: 0.06em;
	}

	/* Long unbroken strings in the telemetry panel were another overflow
	   source on narrow screens. */
	.ls-qa__panel {
		overflow-x: auto;
	}
}

/* ---- 3. Mobile menu: glass, matching the desktop dropdown --------------- */

.ls-mobile {
	background: rgba(11, 22, 38, 0.94);
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
}

.ls-mobile a,
.ls-mobile__link,
.ls-mobile button {
	color: rgba(255, 255, 255, 0.90);
}

.ls-mobile a:hover,
.ls-mobile__link:hover {
	color: var(--accent);
}

.ls-mobile li,
.ls-mobile__item {
	border-color: rgba(255, 255, 255, 0.10);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ls-mobile {
		background: #0B1626;
	}
}

/* ---- 4. Kill the horizontal scroll --------------------------------------
   Applied to the wrapper rather than <body>, because overflow-x on body
   breaks position:sticky on the header in several browsers.
   ------------------------------------------------------------------------ */

/*
 * Clip on <html>, not on body.
 *
 * .ls-main IS the body class, so the previous rule landed on body — where
 * overflow propagates to the viewport in a way browsers handle inconsistently.
 *
 * "clip" is deliberate and must not be swapped for "hidden": clip does not
 * create a scroll container, so position:sticky on the header keeps working.
 * overflow-x:hidden here would silently kill the sticky header.
 */
html {
	overflow-x: clip;
}

@supports not (overflow: clip) {
	html {
		overflow-x: hidden;
	}
}

/* Anything wider than the viewport gets reined in rather than scrolling it. */
.ls-main img,
.ls-main video,
.ls-main iframe,
.ls-main table {
	max-width: 100%;
}

/* Visually hidden but readable by screen readers. Used for the icon-only
   contact button, which otherwise announces as an empty link. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- 5. Floating action buttons -----------------------------------------
   Two separate floating controls in the lower-right corner:
   a round phone icon, and a rounded orange pill for the configurator.
   Fixed position, so they stay visible on every page and while scrolling.
   -------------------------------------------------------------------------- */

.ls-rail {
	position: fixed;
	right: clamp(16px, 2.5vw, 32px);
	bottom: clamp(16px, 2.5vw, 32px);
	z-index: 240;
	display: flex;
	flex-direction: column;
	/* Right-aligned so the round button lines up with the pill's right edge
	   rather than floating centred above a wider element. */
	align-items: flex-end;
	gap: 12px;
}

.ls-rail__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition:
		transform var(--t-fast) ease,
		box-shadow var(--t-fast) ease,
		background-color var(--t-fast) ease;
}

.ls-rail__btn:hover {
	transform: translateY(-2px);
}

/* --- The configurator pill --- */

.ls-rail__btn--shop {
	gap: 10px;
	/* Fully rounded ends regardless of label length. */
	border-radius: 999px;
	padding: 16px 26px;
	background: var(--btn1-bg);
	color: var(--btn1-fg);
	box-shadow: 0 12px 28px -10px rgba(239, 121, 38, 0.55);
}

.ls-rail__btn--shop:hover {
	background: var(--btn1-bg-hover);
	color: var(--btn1-fg);
	box-shadow: 0 16px 34px -10px rgba(239, 121, 38, 0.65);
}

/* --- The round phone button --- */

.ls-rail__btn--call {
	/* Fixed square box plus a 50% radius keeps it a true circle; a padding-based
	   size would go oval as soon as the icon or font metrics changed. */
	width: 56px;
	height: 56px;
	flex: none;
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--ink);
	box-shadow: 0 10px 26px -10px rgba(3, 16, 34, 0.45);
}

.ls-rail__btn--call:hover {
	background: #FFFFFF;
	color: var(--accent);
	box-shadow: 0 14px 32px -10px rgba(3, 16, 34, 0.6);
}

.ls-rail__icon {
	width: 22px;
	height: 22px;
	flex: none;
	display: block;
}

.ls-rail__label {
	white-space: nowrap;
}

.ls-rail__arrow {
	width: 17px;
	height: 17px;
	flex: none;
	display: block;
	transition: transform var(--t-fast) ease;
}

.ls-rail__btn--shop:hover .ls-rail__arrow {
	transform: translateX(3px);
}

/* Phone: keep both buttons, shrink them so they take less of the screen. */
@media (max-width: 640px) {
	.ls-rail {
		right: 14px;
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
		gap: 10px;
	}

	/* Two stacked buttons are taller than one row, so the cookie notice needs
	   more clearance than before. */
	.ls-cookie {
		bottom: calc(140px + env(safe-area-inset-bottom, 0px));
	}

	.ls-rail__btn--shop {
		padding: 14px 20px;
		font-size: 14px;
	}

	.ls-rail__btn--call {
		width: 50px;
		height: 50px;
	}

	.ls-rail__icon {
		width: 20px;
		height: 20px;
	}

	.ls-rail__arrow {
		width: 15px;
		height: 15px;
	}

}

@media (prefers-reduced-motion: reduce) {
	.ls-rail__btn,
	.ls-rail__btn:hover {
		transition: none;
		transform: none;
	}
}