/*
 * Editorial width rhythm inspired by the supplied Sander reference.
 * The colour system remains entirely Knippschild's; only the composition changes.
 */
:root {
	--kc-max: 1400px;
	--kc-page-gutter: clamp(24px, 5vw, 128px);
	--kc-space-1: 12px;
	--kc-space-2: 24px;
	--kc-space-3: 40px;
	--kc-space-4: 64px;
	--kc-space-5: 96px;
	--kc-type-eyebrow: .72rem;
	--kc-type-body: 1rem;
	--kc-type-h3: clamp(1.3rem, 1.8vw, 1.65rem);
	--kc-type-h2: clamp(2rem, 3.5vw, 3.35rem);
	--kc-type-h1: clamp(3rem, 5.4vw, 5.25rem);
}

/* Full-bleed modules may extend beyond their Elementor wrapper; clip that
 * intentional bleed so the browser never offers a horizontal page scroll. */
html,
body { max-width: 100%; overflow-x: clip; }

.kc-ref {
	--kc-flow-wide: 1400px;
	--kc-flow-main: 1240px;
	--kc-flow-narrow: 1060px;
	padding-top: clamp(52px, 5vw, 84px);
}
.kc-ref__eyebrow { font-size: var(--kc-type-eyebrow); }
.kc-ref h1 { font-size: var(--kc-type-h1); }
.kc-ref h2,
.kc-ref__services-head h2 { font-size: var(--kc-type-h2); }
.kc-ref__panel p,
.kc-ref__career-copy p,
.kc-ref__contact p { font-size: var(--kc-type-body); }

/* Keep the visual rhythm deliberate: wide production imagery, quieter text blocks. */
.kc-ref__possibility,
.kc-ref__services,
.kc-ref__career,
.kc-ref__stats { margin-inline: auto; }

.kc-ref__possibility {
	width: min(100%, var(--kc-flow-main));
	grid-template-columns: minmax(0, 1.13fr) minmax(360px, .87fr);
	align-items: start;
	min-height: 470px;
	margin-bottom: clamp(var(--kc-space-5), 9vw, 142px);
}
.kc-ref__possibility .kc-ref__image {
	min-height: 405px;
	margin-top: clamp(20px, 3vw, 48px);
}
.kc-ref__image--video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.kc-ref__possibility .kc-ref__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 470px;
	padding: clamp(42px, 5vw, 78px);
}

.kc-ref__services {
	width: min(100%, var(--kc-flow-wide));
	margin-bottom: clamp(var(--kc-space-5), 8vw, 126px);
	padding-bottom: clamp(42px, 4vw, 64px);
}
.kc-ref__services-head {
	/* Keep the type off the dotted production pattern: it reads cleaner and does
	 * not look as though the letters have been cut into the texture. */
	width: min(100%, 860px);
	padding: clamp(22px, 2.5vw, 36px) clamp(18px, 2.4vw, 36px) clamp(34px, 3.5vw, 52px) 0;
	background: #fff;
}
.kc-ref__services-head .kc-ref__eyebrow {
	margin-bottom: 14px;
	color: #557da5;
	font-size: var(--kc-type-eyebrow);
	letter-spacing: .16em;
}
.kc-ref__services-head h2 {
	max-width: none;
	font-size: var(--kc-type-h2);
	line-height: .95;
	letter-spacing: -.05em;
	text-wrap: balance;
	white-space: nowrap;
}
.kc-ref__cards { gap: clamp(18px, 2vw, 32px); }
.kc-ref__card > div b {
	font-size: var(--kc-type-h3);
	line-height: .98;
	letter-spacing: -.035em;
}
.kc-ref__card > div span {
	font-size: clamp(.78rem, .82vw, .9rem);
	line-height: 1.45;
}

.kc-ref__quality {
	/* The quality statements are a desktop anchor, so they use the same broad
	 * stage as services and facts instead of looking like a narrow insert. */
	width: min(100%, var(--kc-flow-wide));
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kc-space-2);
	margin: 0 auto clamp(var(--kc-space-5), 9vw, 132px);
	border: 0;
	background: transparent;
}
.kc-ref__quality article {
	min-height: 360px;
	padding: clamp(38px, 4.5vw, 68px);
	border: 1px solid #c4d6e4;
}
.kc-ref__quality article + article {
	border: 1px solid #c4d6e4;
	background: #e5f1f9;
}
.kc-ref__quality h2 {
	max-width: 100%;
	margin-bottom: var(--kc-space-2);
	font-size: clamp(2rem, 2.4vw, 2.75rem);
	line-height: .96;
	letter-spacing: -.055em;
	overflow-wrap: normal;
	hyphens: none;
}
.kc-ref__quality p:not(.kc-ref__eyebrow) {
	max-width: 42ch;
	font-size: .98rem;
	line-height: 1.65;
}

.kc-ref__stats {
	width: min(100%, var(--kc-flow-wide));
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	padding: clamp(32px, 4vw, 56px) clamp(18px, 3vw, 42px);
	background: #091d31;
	color: #fff;
	margin-bottom: clamp(var(--kc-space-5), 9vw, 140px);
}
.kc-ref__stats > div {
	padding: 0 clamp(18px, 3vw, 48px);
	text-align: center;
}
.kc-ref__stats > div + div { border-left: 1px solid rgba(185, 215, 237, .26); }
.kc-ref__stats b {
	color: #fff;
	font-size: clamp(2.8rem, 4.4vw, 4.8rem);
	line-height: .94;
	white-space: nowrap;
}
.kc-ref__stats b i { color: inherit; }
.kc-ref__stats span {
	margin-top: 13px;
	color: #b9d7ed;
	font-size: .72rem;
	line-height: 1.35;
	letter-spacing: .12em;
}

.kc-ref__career {
	width: min(100%, var(--kc-flow-main));
	grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
	align-items: start;
	min-height: 490px;
	margin-bottom: clamp(var(--kc-space-5), 9vw, 142px);
}
.kc-ref__career-copy {
	display: flex;
	min-height: 442px;
	flex-direction: column;
	justify-content: center;
	margin-bottom: clamp(20px, 3vw, 48px);
	padding: clamp(42px, 5vw, 76px);
}
.kc-ref__career-copy .kc-ref__button {
	align-self: flex-start;
	width: auto;
	margin-top: 30px;
	padding: 14px 19px;
	font-size: .6875rem;
	line-height: 1;
}
.kc-ref__career .kc-ref__image {
	min-height: 442px;
	margin-top: clamp(20px, 3vw, 48px);
}

.kc-ref__quality article {
	position: relative;
	transition: background-color .38s ease, box-shadow .38s ease;
}
.kc-ref__quality article::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: #8dbde0;
	content: "";
	opacity: 0;
	transform: scaleX(.3);
	transform-origin: left center;
	transition: opacity .32s ease, transform .42s cubic-bezier(.2,.75,.2,1);
}
@media (hover: hover) {
	.kc-ref__quality article:hover {
		transform: none;
		background: #edf6fc;
		box-shadow: inset 0 0 0 1px rgba(141, 189, 224, .34);
	}
	.kc-ref__quality article:hover::before {
		opacity: 1;
		transform: scaleX(1);
	}
}

.kc-ref__contact {
	width: min(100%, 800px);
	margin-bottom: clamp(var(--kc-space-5), 9vw, 142px);
}

/* A calm heritage interval follows the competence cards: archive images on the
 * left and a concise company story on the right. */
.kc-ref__heritage,
.kc-ref__promise {
	width: min(100%, var(--kc-flow-wide));
	margin: 0 auto clamp(var(--kc-space-5), 9vw, 140px);
}
.kc-ref__heritage {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr);
	align-items: stretch;
}
.kc-ref__heritage-slider {
	position: relative;
	min-height: clamp(360px, 37vw, 560px);
	overflow: hidden;
	background: #091d31;
}
.kc-ref__heritage-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity .75s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.kc-ref__heritage-slide.is-current { opacity: 1; transform: scale(1); }
.kc-ref__heritage-slide img { width: 100%; height: 100%; object-fit: cover; }
.kc-ref__heritage-dots {
	position: absolute;
	bottom: 22px;
	left: 26px;
	display: flex;
	gap: 9px;
	z-index: 1;
}
.kc-ref__heritage-dots button {
	width: 28px;
	height: 3px;
	padding: 0;
	border: 0;
	background: rgba(255,255,255,.45);
	cursor: pointer;
	transition: background-color .25s ease, width .25s ease;
}
.kc-ref__heritage-dots button.is-current { width: 46px; background: #fff; }
.kc-ref__heritage-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(42px, 5vw, 80px);
	background: #e5f1f9;
}
.kc-ref__heritage-copy h2,
.kc-ref__promise h2 {
	max-width: 13ch;
	margin: 0 0 24px;
	font-size: clamp(2rem, 3vw, 3.25rem);
	line-height: .96;
	letter-spacing: -.055em;
}
.kc-ref__heritage-copy p:not(.kc-ref__eyebrow),
.kc-ref__promise-copy p:not(.kc-ref__eyebrow) {
	max-width: 43ch;
	margin: 0 0 16px;
	font-size: 1rem;
	line-height: 1.62;
}
.kc-ref__promise {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr);
	align-items: stretch;
	background: #091d31;
}
.kc-ref__promise-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(42px, 5vw, 78px);
	color: #fff;
}
.kc-ref__promise-copy .kc-ref__eyebrow { color: #9bc8e7; }
.kc-ref__promise h2 { color: #fff; }
.kc-ref__promise-copy p:not(.kc-ref__eyebrow) { color: #d8e8f3; }
.kc-ref__certificate {
	display: grid;
	place-items: center;
	min-height: clamp(570px, 46vw, 680px);
	margin: 0;
	padding: clamp(34px, 4vw, 68px);
	background: #e5f1f9;
}
.kc-ref__certificate img {
	display: block;
	width: min(100%, 390px);
	height: auto;
	aspect-ratio: 210 / 297;
	object-fit: contain;
	border: 6px solid #fff;
	box-shadow: 0 20px 46px rgba(9, 29, 49, .2);
}
.kc-footer-partners {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 0 28px;
	padding: 22px 0;
	border-top: 1px solid rgba(185, 215, 237, .17);
	border-bottom: 1px solid rgba(185, 215, 237, .17);
}
.kc-footer-partners img {
	display: block;
	width: auto;
	height: 36px;
	max-width: 210px;
	object-fit: contain;
	background: #fff;
	padding: 5px 8px;
}
.kc-footer-partners img + img { height: 32px; max-width: 250px; }

@media (min-width: 1500px) {
	/* A gentle left offset keeps the desktop composition lively rather than boxed in. */
	.kc-ref__possibility,
	.kc-ref__career { transform: translateX(-3vw); }
	.kc-ref__quality { transform: none; }
}

@media (max-width: 900px) {
	:root { --kc-page-gutter: clamp(20px, 5vw, 48px); }
	.kc-ref { padding-top: 42px; }
	.kc-ref__possibility,
	.kc-ref__career { min-height: 0; }
	.kc-ref__possibility .kc-ref__image,
	.kc-ref__career .kc-ref__image { min-height: 340px; }
	.kc-ref__possibility .kc-ref__panel,
	.kc-ref__career-copy { min-height: 0; }
	.kc-ref__quality { gap: 16px; }
	.kc-ref__quality article { min-height: 0; }
	.kc-ref__stats { padding-inline: 12px; }
	.kc-ref__stats > div { padding-inline: 16px; }
	.kc-ref__heritage,
	.kc-ref__promise { width: min(100%, var(--kc-flow-main)); grid-template-columns: minmax(0, 1fr); }
	.kc-ref__heritage-copy,
	.kc-ref__promise-copy { padding: clamp(38px, 6vw, 64px); }
}

@media (max-width: 700px) {
	/* Mobile uses one compact, touch-friendly rhythm rather than a scaled desktop. */
	.kc-header .kc-shell { height: 72px; }
	.kc-logo-image img { width: 164px; }
	.kc-menu-toggle {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid #c4d6e4;
		color: #173f6e;
		font-size: 1.28rem;
		line-height: 1;
	}
	.kc-nav {
		display: none;
		top: 72px;
		padding: 10px var(--kc-page-gutter) 18px;
		border-top: 1px solid #e1ebf2;
		box-shadow: 0 14px 28px rgba(9, 29, 49, .12);
		gap: 0;
	}
	.kc-nav.is-open { display: flex; }
	.kc-nav a,
	.kc-nav .kc-button {
		width: 100%;
		min-height: 48px;
		padding: 13px 0;
	}
	.kc-nav .kc-button { margin-top: 8px; padding-inline: 16px; }

	.kc-ref { padding-top: 42px; }
	.kc-ref__emotion {
		min-height: min(620px, calc(100svh - 72px));
		margin-top: -42px;
		margin-bottom: 64px;
	}
	.kc-ref__emotion-copy {
		min-height: min(620px, calc(100svh - 72px));
		padding: 42px 24px 34px;
	}
	/* Long compound words need their own mobile scale; otherwise they run into
	 * the edge of the video on narrow phones. */
	.kc-ref__emotion-copy h1 {
		max-width: 100%;
		font-size: clamp(1.95rem, 9.2vw, 2.4rem);
		line-height: .94;
		letter-spacing: -.055em;
	}
	.kc-ref__emotion-copy p:not(.kc-ref__eyebrow) { margin-top: 20px; font-size: .94rem; }
	.kc-ref__emotion-copy .kc-ref__button { min-height: 46px; margin-top: 24px; padding: 13px 16px; }

	.kc-ref__services-head h2 { white-space: normal; }
	.kc-ref__possibility .kc-ref__image,
	.kc-ref__career .kc-ref__image,
	.kc-ref__possibility .kc-ref__panel,
	.kc-ref__career-copy { margin: 0; }
	.kc-ref__possibility,
	.kc-ref__career { display: grid; grid-template-columns: minmax(0, 1fr); }
	.kc-ref__possibility .kc-ref__image,
	.kc-ref__career .kc-ref__image {
		display: block;
		width: 100%;
		min-height: 260px;
	}
	.kc-ref__possibility .kc-ref__image img,
	.kc-ref__career .kc-ref__image img,
	.kc-ref__possibility .kc-ref__image video,
	.kc-ref__career .kc-ref__image video {
		display: block;
		width: 100%;
		height: 260px;
		object-fit: cover;
	}
	.kc-ref__possibility .kc-ref__panel,
	.kc-ref__career-copy { padding: 34px 24px; }
	.kc-ref__services { margin-bottom: 64px; padding-bottom: 34px; }
	.kc-ref__services-head { width: 100%; padding: 24px 18px 30px 0; }
	.kc-ref__services-head .kc-ref__eyebrow { margin-bottom: 12px; }
	.kc-ref__services-head h2 { font-size: clamp(2.15rem, 10vw, 3rem); line-height: .93; }
	.kc-ref__cards { gap: 16px; }
	.kc-ref__card { height: 360px; }
	.kc-ref__card > div { min-height: 124px; padding: 16px 18px 18px; }
	.kc-ref__card > div b { padding-bottom: 8px; font-size: 1.42rem; }
	.kc-ref__card > div span { font-size: .84rem; }
	.kc-ref__card-icon { top: 14px; left: 14px; width: 44px; height: 44px; }
	.kc-ref__quality { grid-template-columns: 1fr; gap: 0; }
	.kc-ref__quality article,
	.kc-ref__quality article + article { border: 1px solid #c4d6e4; }
	.kc-ref__quality article + article { border-top: 0; }
	.kc-ref__quality article { padding: 34px 24px; }
	.kc-ref__quality h2 {
		font-size: clamp(1.8rem, 7.8vw, 2.25rem);
		line-height: .97;
		overflow-wrap: anywhere;
		hyphens: auto;
	}
	.kc-ref__stats { grid-template-columns: 1fr; padding-block: 10px; }
	.kc-ref__stats > div { padding-block: 28px; }
	.kc-ref__stats > div + div { border-top: 1px solid rgba(185, 215, 237, .26); border-left: 0; }
	.kc-ref__stats b { font-size: clamp(3rem, 14vw, 4.4rem); }
	.kc-ref__heritage,
	.kc-ref__promise { display: grid; grid-template-columns: minmax(0, 1fr); }
	.kc-ref__heritage-slider { min-height: 290px; }
	.kc-ref__heritage-copy,
	.kc-ref__promise-copy { padding: 38px 24px; }
	.kc-ref__heritage-copy h2,
	.kc-ref__promise h2 { max-width: 100%; font-size: clamp(2rem, 9vw, 2.75rem); }
	.kc-ref__certificate { min-height: 0; padding: 36px 24px; }
	.kc-ref__certificate img { width: min(100%, 360px); border-width: 4px; }
	.kc-ref__career { margin-bottom: 72px; }
	.kc-ref__career-copy .kc-ref__button { min-height: 46px; padding: 13px 16px; }
	.kc-ref__contact { margin-bottom: 72px; padding-inline: 0; }
	.kc-ref__contact h2 { font-size: clamp(2rem, 9vw, 2.65rem); }
	.kc-ref__contact a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: min(100%, 280px);
		min-height: 44px;
		margin: 10px auto;
	}
	.kc-footer { padding: 38px 0 max(24px, env(safe-area-inset-bottom)); }
	.kc-footer-main { gap: 24px; padding-bottom: 30px; }
	.kc-footer-partners { gap: 12px; margin-bottom: 24px; padding: 18px 0; }
	.kc-footer-partners img { height: 28px; max-width: 155px; }
	.kc-footer-partners img + img { height: 25px; max-width: 190px; }
	.kc-footer-bottom { gap: 12px; line-height: 1.5; }
}