/* Knapphus 1:1 styles — desktop-first, pixel-tracked to Figma file y7ZntHshL3SGsF3B8OEkPz */

:root {
	--kn-blue: #014244;
	--kn-muted: #f7faf9;
	--kn-orange: #ff8024;
	--kn-grey: #939598;
	--kn-border: #d7d6d6;
	--kn-overlay: #21202e;
	--kn-text: #42454a;
}

body {
	color: var(--kn-text);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 18px;
	line-height: 1.55;
}

/* === Hero (HOME) =================================================== */
.kn-hero {
	position: relative;
	/* Always span the full viewport width, even when nested inside a
	   layout-constrained .entry-content wrapper (subpages). The vw trick
	   ignores the parent's max-width so the home + subpage hero render
	   identically edge-to-edge. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: none;
	/* Full-screen hero: fill the entire viewport so image / video media
	   fills the screen. Header is position:fixed so it overlays the hero
	   instead of taking flow space; no need to subtract the header height. */
	height: 100vh;
	height: 100dvh;
	min-height: 480px;
	background: var(--kn-blue);
	color: #fff;
	overflow: hidden;
	margin-block-start: 0 !important;
	/* Vertically centre the content (eyebrow + headline + body + CTA) inside
	   the hero band, kept left-aligned. */
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* Subpage hero sits inside main > .entry-content; WP applies a 24px
   block-gap to <main> as a child of .wp-site-blocks. Zero it so the
   header band butts against the hero like on home. */
.wp-site-blocks > main,
main.wp-block-group { margin-block-start: 0 !important; }
.kn-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	border: 0;
}
.kn-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--kn-overlay);
	opacity: 0.4;
	pointer-events: none;
	z-index: 1;
}
.kn-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	/* No top/bottom padding — the hero flex parent vertically centres us. */
	padding: 0 60px;
	box-sizing: border-box;
}
.kn-hero__eyebrow {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.12px;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 24px 0;
}
.kn-hero__headline {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 44px;
	line-height: 52px;
	color: #fff;
	margin: 0;
	max-width: 650px;
}
.kn-hero__headline .kn-hero__accent {
	color: var(--kn-orange);
}
.kn-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 40px;
	background: var(--kn-orange);
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 18px;
	/* Let the button hug its label with generous side padding rather than
	   a fixed width — keeps "Be om prisforespørsel" comfortably bounded. */
	padding: 0 32px;
	width: auto;
	min-width: 220px;
	height: 52px;
	/* Include padding in the declared width so `width: 100%` on mobile
	   doesn't add 48px of padding past the container edge (which made the
	   button bleed off the right of the phone viewport). */
	box-sizing: border-box;
	border-radius: 10px;
	text-decoration: none;
	transition: background 0.15s;
}
.kn-hero__cta:hover { background: #e8731f; color: #fff; }
.kn-hero__cta::after {
	content: "";
	width: 26px;
	height: 12px;
	margin-left: auto;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M19.5 1L25 6L19.5 11M25 6H1'/></svg>") no-repeat center / contain;
	        mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M19.5 1L25 6L19.5 11M25 6H1'/></svg>") no-repeat center / contain;
}

/* === Header (transparent overlay variant, used on home) ============= */
.kn-header-over {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 10;
	padding: 21px 53px;
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
}
.kn-header-over__logo { width: 144px; height: 45px; display: block; }
.kn-header-over__nav {
	display: flex;
	align-self: stretch;
	align-items: stretch;
	gap: 36px;
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	color: #fff;
}
/* Each top-level item is a full-height, positioned wrapper so its dropdown can
   anchor directly beneath the label. */
.kn-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}
.kn-header-over__nav a {
	color: #fff;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.kn-header-over__nav a:hover { color: var(--kn-orange); }
.kn-nav__icon, .kn-nav__caret {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	display: block;
}

/* === Header dropdown overlay (Figma node 295:214 / Group 28) ======== */
.kn-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: auto;
	/* 21px == the header's vertical padding, so the panel clears the header bar
	   and hangs just beneath its label (+3px breathing room). */
	margin-top: 24px;
	min-width: 232px;
	width: max-content;
	max-width: 360px;
	background: #fff;
	color: var(--kn-blue);
	border: 1px solid var(--kn-border);
	border-radius: 14px;
	z-index: 50;
	box-shadow: 0 16px 40px rgba(20, 20, 30, 0.16);
	animation: kn-dropdown-in 0.18s ease-out;
}
.kn-dropdown[hidden] { display: none; }
@keyframes kn-dropdown-in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}
/* Right-most item's panel opens leftward so it never spills off-screen. */
.kn-header__nav .kn-nav__item:last-child .kn-dropdown,
.kn-header-over__nav .kn-nav__item:last-child .kn-dropdown {
	left: auto;
	right: 0;
}
.kn-dropdown__inner {
	padding: 8px;
}
.kn-dropdown__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.kn-dropdown__menu .kn-dropdown__link,
.kn-dropdown__menu > li > a {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--kn-blue);
	text-decoration: none;
	padding: 10px 12px;
	border-radius: 8px;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s;
}
.kn-dropdown__menu a:hover,
.kn-dropdown__link:hover { background: var(--kn-muted); color: var(--kn-orange); }

/* Nested submenu inside a dropdown — chevron toggle + indented sub-list */
.kn-dropdown__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
}
.kn-dropdown__row .kn-dropdown__link { flex: 1 1 auto; }
.kn-dropdown__nested-toggle {
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--kn-blue);
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease;
}
.kn-dropdown__nested-toggle:hover { background: rgba(1, 66, 68, 0.08); color: var(--kn-orange); }
.kn-dropdown__nested-caret { transition: transform 0.18s ease; }
.kn-dropdown__nested-toggle[aria-expanded="true"] .kn-dropdown__nested-caret {
	transform: rotate(180deg);
	color: var(--kn-orange);
}
.kn-dropdown__submenu {
	list-style: none;
	margin: 2px 0 4px 12px;
	padding: 4px 0 4px 12px;
	border-left: 2px solid var(--kn-border);
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.kn-dropdown__submenu[hidden] { display: none; }
.kn-dropdown__submenu a {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	color: var(--kn-blue);
	text-decoration: none;
	padding: 7px 10px;
	border-radius: 7px;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}
.kn-dropdown__submenu a:hover { background: var(--kn-muted); color: var(--kn-orange); }

/* Caret rotation when the trigger is in the open state */
[data-kn-dropdown-trigger][aria-expanded="true"] .kn-nav__caret {
	transform: rotate(180deg);
}
.kn-nav__caret { transition: transform 0.18s ease; }

/* Mobile: nested items shown as indented bullets */
.kn-mobile-panel__nested {
	padding-left: 8px;
	font-size: 16px !important;
	color: var(--kn-grey) !important;
}

/* Header containers must be positioning context for the absolute dropdown */
/* .kn-header is now position:fixed (see the main rule below); the in-page
   header containers are positioning context for the absolute dropdown panels. */

/* ==================================================================
   Subpage block extensions + new block styles (Sprint 2)
   ================================================================== */

/* ---------- Hero — secondary CTA, body, short variant ---------- */
.kn-hero--short { min-height: 360px; }
.kn-hero--short .kn-hero__inner { padding-top: 120px; padding-bottom: 64px; }
.kn-hero__body {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	line-height: 28px;
	max-width: 650px;
	color: #fff;
	margin: 24px 0 0;
}
.kn-hero__ctas { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 32px; }

/* Scroll-down anchor: centred at the bottom of the hero band, with a small
   label + animated chevron. Hidden when the hero block doesn't set anchor
   attributes — fully opt-in per block instance. */
.kn-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 3;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: #fff;
	text-decoration: none;
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.15s ease;
}
.kn-hero__scroll:hover,
.kn-hero__scroll:focus-visible { color: var(--kn-orange); }
.kn-hero__scroll-icon {
	width: 22px;
	height: 22px;
	animation: kn-hero-scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes kn-hero-scroll-bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40%                    { transform: translateY(6px); }
	60%                    { transform: translateY(3px); }
}

/* Smooth-scroll for in-page anchors (skip if user prefers reduced motion). */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
.kn-hero__ctas .kn-hero__cta { margin-top: 0; }
.kn-hero__cta--secondary {
	background: transparent;
	border: 2px solid #fff;
}
.kn-hero__cta--secondary:hover { background: rgba(255, 255, 255, 0.12); }

/* ---------- CTA banner — secondary CTA, checklist, full-width ---------- */
.kn-cta--full .kn-cta__inner { grid-template-columns: 1fr; max-width: 1200px; }
.kn-cta__buttons { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.kn-cta__btn--secondary {
	background: transparent;
	border: 2px solid #fff;
	padding: 12px 22px;
}
.kn-cta__btn--secondary:hover { background: rgba(255, 255, 255, 0.12); }
.kn-cta__checklist {
	list-style: none;
	padding: 0;
	margin: 16px 0 28px;
	display: grid;
	gap: 10px;
}
.kn-cta__checklist li {
	position: relative;
	padding-left: 32px;
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-size: 17px;
	line-height: 1.4;
}
.kn-cta__checklist li::before {
	content: "";
	position: absolute;
	left: 0; top: 3px;
	width: 20px;
	height: 20px;
	background-color: var(--kn-orange);
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
	        mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}

/* ---------- Document list (block: knapphus/document-list) ---------- */
.kn-block-documents .kn-docs__inner,
section.kn-docs .kn-docs__inner {
	max-width: 980px;
	margin: 0 auto;
	padding: 80px 60px;
}
.kn-docs__list {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	border-top: 1px solid var(--kn-border);
}
.kn-docs__list li {
	border-bottom: 1px solid var(--kn-border);
}
.kn-docs__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	color: var(--kn-blue);
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 18px;
	text-decoration: none;
	transition: color 0.15s;
}
.kn-docs__list a:hover { color: var(--kn-orange); }
.kn-docs__icon { width: 22px; height: 22px; flex-shrink: 0; }

/* ---------- Contact info (block: knapphus/contact-info) ---------- */
.kn-cinfo {
	background: #fff;
	padding: 80px 60px;
}
.kn-cinfo__inner {
	max-width: 1080px;
	margin: 0 auto;
}
.kn-cinfo__head { margin-bottom: 40px; }
.kn-cinfo__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.1;
	color: var(--kn-blue);
	margin: 0 0 16px 0;
}
.kn-cinfo__intro {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: var(--kn-blue);
	max-width: 640px;
	margin: 0;
}
.kn-cinfo__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, 1fr);
}
.kn-cinfo--cols-1 .kn-cinfo__grid { grid-template-columns: 1fr; }
.kn-cinfo--cols-3 .kn-cinfo__grid { grid-template-columns: repeat(3, 1fr); }
.kn-cinfo__card {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 24px;
	background: var(--kn-muted);
	border: 1px solid var(--kn-border);
	border-radius: 12px;
}
.kn-cinfo__icon-wrap {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(255, 128, 36, 0.12);
	color: var(--kn-orange);
}
.kn-cinfo__icon { width: 24px; height: 24px; }
.kn-cinfo__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.kn-cinfo__label {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--kn-orange);
}
.kn-cinfo__value {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--kn-blue);
	word-break: break-word;
}
.kn-cinfo__value a {
	color: var(--kn-blue);
	text-decoration: none;
	transition: color 0.15s;
}
.kn-cinfo__value a:hover { color: var(--kn-orange); }

@media (max-width: 720px) {
	.kn-cinfo { padding: 56px 24px; }
	.kn-cinfo__title { font-size: 30px; }
	.kn-cinfo__grid { grid-template-columns: 1fr; }
	.kn-cinfo--cols-2 .kn-cinfo__grid,
	.kn-cinfo--cols-3 .kn-cinfo__grid { grid-template-columns: 1fr; }
}

/* ---------- Category tabs (block: knapphus/category-tabs) ---------- */
.kn-cat-tabs {
	background: #fff;
	border-bottom: 1px solid var(--kn-border);
}
.kn-cat-tabs__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 16px 60px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.kn-cat-tabs__tab {
	padding: 10px 20px;
	border-radius: 999px;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--kn-blue);
	text-decoration: none;
	border: 1px solid var(--kn-border);
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.kn-cat-tabs__tab:hover { color: var(--kn-orange); border-color: var(--kn-orange); }
.kn-cat-tabs__tab.is-active {
	background: var(--kn-orange);
	color: #fff;
	border-color: var(--kn-orange);
}

/* ---------- Comparison cards (block: knapphus/comparison-cards) ---------- */
.kn-compare__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 80px 60px;
}
.kn-compare__head { text-align: center; margin-bottom: 40px; }
.kn-compare__head .kn-eyebrow {
	justify-content: center;
	display: inline-block;
	color: var(--kn-orange);
}
.kn-compare__head h2 {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 32px;
	color: var(--kn-blue);
	margin: 8px 0 0;
}
.kn-compare__grid { display: grid; gap: 24px; }
.kn-compare__card {
	background: #fff;
	border: 1px solid var(--kn-border);
	border-radius: 12px;
	padding: 40px;
	display: flex;
	flex-direction: column;
}
.kn-compare__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 28px;
	color: var(--kn-blue);
	margin: 0 0 6px;
}
.kn-compare__subtitle {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	color: var(--kn-grey);
	margin: 0 0 24px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.kn-compare__features {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	display: grid;
	gap: 12px;
}
.kn-compare__features li {
	position: relative;
	padding-left: 32px;
	font-family: 'Inter', sans-serif;
	font-size: 17px;
	color: var(--kn-blue);
	line-height: 1.45;
}
.kn-compare__features li::before {
	content: "";
	position: absolute;
	left: 0; top: 3px;
	width: 20px;
	height: 20px;
	background-color: var(--kn-orange);
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
	        mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}
.kn-compare__cta {
	margin-top: auto;
	background: var(--kn-orange);
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 17px;
	padding: 14px 24px;
	border-radius: 10px;
	text-decoration: none;
	text-align: center;
	transition: background 0.15s;
}
.kn-compare__cta:hover { background: #e8731f; }

/* ---------- Contact persons (block: knapphus/contact-persons) ---------- */
section.kn-persons { padding: 80px 60px; }
.kn-persons .kn-persons__inner { max-width: 1320px; padding: 0; }
.kn-persons__head { text-align: center; margin-bottom: 40px; }
.kn-persons__head h2 {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 32px;
	color: var(--kn-blue);
	margin: 8px 0 12px;
}
.kn-persons__head p {
	max-width: 720px;
	margin: 0 auto;
	font-family: 'Inter', sans-serif;
	color: var(--kn-blue);
}
.kn-persons__grid {
	display: grid;
	gap: 24px;
	/* minmax(0, 1fr) so cards shrink with viewport instead of forcing the page wider. */
	grid-template-columns: repeat(var(--kn-cols, 3), minmax(0, 1fr));
}
/* Centered variant — center the cards instead of left-aligning the grid.
   Nicer when there are only 1–2 people (no empty trailing columns). */
.kn-persons--centered .kn-persons__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.kn-persons--centered .kn-person {
	flex: 1 1 300px;
	max-width: 440px;
}
.kn-person {
	background: #fff;
	border: 1px solid var(--kn-border);
	border-radius: 12px;
	padding: 28px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.kn-person__avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.kn-person__body { flex: 1; }
.kn-person__name {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--kn-blue);
	margin: 0 0 4px;
}
.kn-person__role {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: var(--kn-grey);
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.kn-person__region,
.kn-person__phone,
.kn-person__email {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	color: var(--kn-blue);
	margin: 4px 0;
}
.kn-person__phone a,
.kn-person__email a { color: var(--kn-blue); text-decoration: none; }
.kn-person__phone a:hover,
.kn-person__email a:hover { color: var(--kn-orange); }

/* ---------- App feature (block: knapphus/app-feature) ---------- */
section.kn-app { padding: 80px 60px; background: transparent; }
.kn-app .kn-app__inner {
	max-width: 1320px;
	margin: 0 auto;
	background: var(--kn-blue);
	color: #fff;
	border-radius: 16px;
	padding: 60px;
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 60px;
	align-items: center;
}
.kn-app__eyebrow {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.12px;
	text-transform: uppercase;
	color: var(--kn-orange);
	margin: 0 0 16px;
}
.kn-app__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 36px;
	margin: 0 0 16px;
	color: #fff;
}
.kn-app__body {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	line-height: 1.5;
	color: #fff;
	margin: 0 0 24px;
}
.kn-app__checklist {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: grid;
	gap: 10px;
}
.kn-app__checklist li {
	position: relative;
	padding-left: 32px;
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
}
.kn-app__checklist li::before {
	content: "";
	position: absolute;
	left: 0; top: 3px;
	width: 20px;
	height: 20px;
	background-color: var(--kn-orange);
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
	        mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}
.kn-app__badges { display: flex; gap: 12px; flex-wrap: wrap; }
.kn-app__badges img { height: 48px; width: auto; }
.kn-app__image { width: 100%; height: auto; display: block; border-radius: 12px; }

/* ---------- Accordion split (block: knapphus/accordion-split) ---------- */
.kn-acc__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 80px 60px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
}
.kn-acc__text h2 {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 32px;
	color: var(--kn-blue);
	margin: 8px 0 16px;
}
.kn-acc__text p {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	color: var(--kn-blue);
	margin: 0 0 24px;
}
.kn-acc__image {
	width: 100%;
	border-radius: 12px;
	display: block;
}
.kn-acc__list { display: flex; flex-direction: column; gap: 0; }
.kn-acc__item {
	border-bottom: 1px solid var(--kn-border);
	padding: 0;
}
.kn-acc__item summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 32px 18px 0;
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: var(--kn-blue);
	position: relative;
	transition: color 0.15s;
}
.kn-acc__item summary::-webkit-details-marker { display: none; }
.kn-acc__item summary::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>") no-repeat center / contain;
	        mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>") no-repeat center / contain;
	transition: transform 0.18s;
}
.kn-acc__item[open] summary::after {
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/></svg>") no-repeat center / contain;
	        mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/></svg>") no-repeat center / contain;
}
.kn-acc__item:hover summary { color: var(--kn-orange); }
.kn-acc__item-body {
	padding: 0 0 18px;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	line-height: 1.55;
	color: var(--kn-blue);
	margin: 0;
}

/* ---------- Fluent Forms — adopt theme look ---------- */
.kn-form--fluent .fluentform .ff-el-input--label label,
.kn-form--fluent .fluentform legend {
	font-family: 'Inter', sans-serif;
	color: var(--kn-blue);
	font-weight: 500;
}
.kn-form--fluent .fluentform .ff-el-form-control,
.kn-form--fluent .fluentform input[type="text"],
.kn-form--fluent .fluentform input[type="email"],
.kn-form--fluent .fluentform input[type="tel"],
.kn-form--fluent .fluentform input[type="date"],
.kn-form--fluent .fluentform textarea,
.kn-form--fluent .fluentform select {
	border: 1px solid var(--kn-border);
	border-radius: 8px;
	padding: 12px 16px;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	color: var(--kn-blue);
	width: 100%;
}
.kn-form--fluent .fluentform .ff-btn-submit,
.kn-form--fluent .fluentform button[type="submit"] {
	background: var(--kn-orange);
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 17px;
	padding: 14px 28px;
	border-radius: 10px;
	border: 0;
	cursor: pointer;
	transition: background 0.15s;
}
.kn-form--fluent .fluentform .ff-btn-submit:hover,
.kn-form--fluent .fluentform button[type="submit"]:hover { background: #e8731f; }

/* Fluent Forms wraps checkbox/radio groups in ff_list_buttons + photo-holder
 * markup that hides the actual checkbox and renders each option as a wide pill.
 * Override to a plain stacked checkbox list matching the theme. */
.kn-form--fluent .fluentform .ff_list_buttons,
.kn-form--fluent .fluentform .ff_el_checkable_photo_holders {
	display: flex !important;
	flex-direction: column;
	gap: 8px;
	background: none !important;
}
.kn-form--fluent .fluentform .ff-el-image-holder {
	display: block !important;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	width: auto !important;
	height: auto !important;
}
.kn-form--fluent .fluentform .ff-el-image-input-src {
	display: none !important;
}
.kn-form--fluent .fluentform .ff-el-form-check-label {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	color: var(--kn-blue);
	cursor: pointer;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	text-align: left;
	width: auto;
	font-weight: 400;
}
.kn-form--fluent .fluentform .ff-el-form-check-input {
	display: inline-block !important;
	position: static !important;
	opacity: 1 !important;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--kn-orange);
	flex-shrink: 0;
	visibility: visible !important;
	clip: auto !important;
}
.kn-form--fluent .fluentform .ff-el-form-check-label span {
	flex: 1;
	background: none !important;
}
.kn-form-bound {
	border: 1px dashed var(--kn-orange);
	background: #fff5ec;
	padding: 12px 16px;
	border-radius: 6px;
	margin: 16px 0;
	font-family: 'Inter', sans-serif;
}
.kn-form-bound p { margin: 4px 0 0; font-size: 13px; }

/* ---------- Order form (block: knapphus/order-form, placeholder) ---------- */
.kn-orderform { padding: 80px 60px; }
.kn-orderform__inner { max-width: 880px; margin: 0 auto; }
.kn-orderform__head { text-align: center; margin-bottom: 40px; }
.kn-orderform__head .kn-eyebrow { color: var(--kn-orange); display: inline-block; }
.kn-orderform__head h2 {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 32px;
	color: var(--kn-blue);
	margin: 8px 0 12px;
}
.kn-orderform__head p {
	font-family: 'Inter', sans-serif;
	color: var(--kn-blue);
	margin: 0;
}
.kn-orderform__note {
	margin-top: 24px;
	font-size: 13px;
	color: var(--kn-grey);
	text-align: center;
	font-style: italic;
}

/* Anchor that lets the hero sit at top:0 with overlay header on top */
.kn-hero-wrap { position: relative; }

/* === Header (light variant, used on subpages) ====================== */
.kn-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 21px 53px;
	/* Transparent by default — sits over the hero. */
	background: transparent;
	color: #fff;
	border-bottom: 1px solid transparent;
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Scrolled past the threshold OR a page that opts into permanent white. */
.kn-header.is-scrolled,
.kn-header--white,
html.kn-force-white-header .kn-header,
body.kn-no-hero .kn-header {
	background: #fff;
	color: var(--kn-blue);
	border-bottom-color: var(--kn-border);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.kn-header__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.kn-header__logo { width: 144px; height: 45px; display: block; }
.kn-header__logo--light { display: block; }
.kn-header__logo--dark  { display: none; }
.kn-header.is-scrolled .kn-header__logo--light,
.kn-header--white .kn-header__logo--light,
html.kn-force-white-header .kn-header__logo--light,
body.kn-no-hero .kn-header__logo--light { display: none; }
.kn-header.is-scrolled .kn-header__logo--dark,
.kn-header--white .kn-header__logo--dark,
html.kn-force-white-header .kn-header__logo--dark,
body.kn-no-hero .kn-header__logo--dark { display: block; }

/* No-hero pages: push content below the fixed header (heroes do this via their
   own top padding; a bare content page starts at top:0 under the header). */
body.kn-no-hero .wp-site-blocks { padding-top: 112px; }
.kn-header__nav {
	display: flex;
	align-self: stretch;
	align-items: stretch;
	gap: 36px;
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	/* Inherit from .kn-header so the whole chain (.kn-header → .kn-header__nav
	   → a) follows the header's white-over-transparent / teal-over-white
	   state. */
	color: inherit;
}
.kn-header__nav a {
	/* Inherit from .kn-header so links are white over the transparent default
	   state and teal once .is-scrolled / .kn-header--white kicks in. */
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.kn-header__nav a:hover { color: var(--kn-orange); }

/* === Section eyebrow =============================================== */
.kn-eyebrow {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.12px;
	text-transform: uppercase;
	color: var(--kn-orange);
	margin: 0 0 16px 0;
}

/* === Section: "Alt du trenger – på ett sted" ======================= */
.kn-section {
	max-width: 1440px;
	margin: 0 auto;
	padding: 80px 60px;
}
.kn-section__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 32px;
	color: var(--kn-blue);
	margin: 0 0 24px 0;
}
.kn-section__lede {
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	line-height: 28px;
	color: var(--kn-blue);
	max-width: 874px;
	margin: 0 0 48px 0;
}

/* === Service tiles grid (5 + top-left header) ====================== */
.kn-services {
	display: grid;
	/* minmax(0, 1fr) lets tiles shrink below their min-content so the grid
	   never forces the page wider than the viewport. --kn-cols is set inline. */
	grid-template-columns: repeat(var(--kn-cols, 3), minmax(0, 1fr));
	gap: 19px;
	margin-top: 16px;
}
/* "Separate" header layout: header sits above the grid as a full-width section
   header so all tiles can fill the row evenly. Used on pages where tile count
   matches column count (e.g. Teknikk with 4 tiles in 4 columns). */
.kn-services-section--separate .kn-services__header {
	max-width: 720px;
	margin: 0 0 32px 0;
	padding: 0;
}
.kn-services-section--separate .kn-services {
	margin-top: 0;
}
.kn-services__header {
	padding: 0 16px 0 0;
}
.kn-services__header .kn-eyebrow { margin-bottom: 12px; }
.kn-services__header .kn-section__title { margin: 0 0 16px 0; }
.kn-services__header p {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	line-height: 26px;
	color: var(--kn-blue);
	margin: 0;
}
.kn-tile {
	position: relative;
	background: #fff;
	border: 1px solid var(--kn-border);
	border-radius: 10px;
	padding: 27px;
	height: 234px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
/* Make the whole tile clickable when it contains a link — both the simple
   kn-tile__link and the rich-tile kn-tile__cta ("Les mer"). ::before stretches
   the link's hit area to the full card. */
.kn-tile:has(.kn-tile__link),
.kn-tile:has(.kn-tile__cta) { cursor: pointer; }
.kn-tile:has(.kn-tile__link):hover,
.kn-tile:has(.kn-tile__cta):hover {
	border-color: var(--kn-orange);
	box-shadow: 0 8px 24px rgba(1, 66, 68, 0.08);
	transform: translateY(-2px);
}
.kn-tile__link::before,
.kn-tile__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Above the tile's positioned copy (z-index:1) and its photo, so a click
	   anywhere on the card hits the link. */
	z-index: 2;
	border-radius: inherit;
}

/* Leaflet gives its panes/controls a z-index up to 1000, which would render the
   map on top of the fixed header (z-index:100) while scrolling. Isolating each
   map into its own stacking context at z-index:0 keeps all of Leaflet's internal
   layering contained below the header. */
.kn-branches__map-wrap,
.kn-branches__map,
.kn-stations__map {
	position: relative;
	z-index: 0;
	isolation: isolate;
}

/* Green service-grid variant — dark-green cards with a small image badge, white
   copy and an orange link (matches the app/feature green cards). Pair with the
   icon media style so the small image sits in a badge above the heading. */
.kn-services-section--green .kn-tile {
	background: var(--kn-blue);
	border-color: transparent;
}
.kn-services-section--green .kn-tile:has(.kn-tile__link):hover,
.kn-services-section--green .kn-tile:has(.kn-tile__cta):hover {
	border-color: var(--kn-orange);
}
.kn-services-section--green .kn-tile__title { color: #fff; }
.kn-services-section--green .kn-tile__body { color: rgba(255, 255, 255, 0.82); }
.kn-services-section--green .kn-tile__link,
.kn-services-section--green .kn-tile__cta { color: var(--kn-orange); }
.kn-services-section--green .kn-tile__icon { background: rgba(255, 255, 255, 0.10); }
.kn-services-section--green .kn-tile__features span { color: rgba(255, 255, 255, 0.9); }
.kn-services-section--green .kn-tile__check { color: var(--kn-orange); }
.kn-tile__icon {
	width: 76px;
	height: 76px;
	border-radius: 12px;
	background: var(--kn-muted);
	overflow: hidden;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
.kn-tile__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Default tiles: the image fills the full-height right third of the card and
   fades out along its left edge into the white card; text is capped to the
   left region so it never runs under the photo. Scoped to non-rich tiles so
   the Produkter/Teknikk rich cards keep their stacked glyph-above-title layout. */
.kn-tile:not(.kn-tile--rich) .kn-tile__head {
	display: block;
	margin-bottom: 10px;
}
.kn-tile:not(.kn-tile--rich) .kn-tile__icon {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 34%;
	height: auto;
	margin: 0;
	border-radius: 0;
	background: none;
	overflow: hidden;
	pointer-events: none;
}
.kn-tile:not(.kn-tile--rich) .kn-tile__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Keep the copy in the left column, above the photo, and cap it so tiles stay
   uniform (body truncates rather than colliding with the image). */
.kn-tile:not(.kn-tile--rich) .kn-tile__title,
.kn-tile:not(.kn-tile--rich) .kn-tile__body {
	position: relative;
	z-index: 1;
	max-width: 62%;
}
/* The link must NOT be a positioning context, or its stretched ::before (the
   whole-tile click target) would only cover the link, not the card. */
.kn-tile:not(.kn-tile--rich) .kn-tile__link {
	position: static;
	max-width: 62%;
}
.kn-tile:not(.kn-tile--rich) .kn-tile__body {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Icon (badge) variant — for uploading glyph icons instead of photos. The icon
   sits in a compact rounded badge above the heading and is contained (never
   blown up / cropped like the full-bleed photo variant). Text runs full width. */
.kn-services-section--media-icon .kn-tile {
	/* Badge + full-width copy needs more room than the fixed photo-tile height;
	   grow to fit and let the grid equalise heights per row. */
	height: auto;
	min-height: 234px;
}
.kn-services-section--media-icon .kn-tile:not(.kn-tile--rich) .kn-tile__head {
	display: block;
	margin-bottom: 16px;
}
.kn-services-section--media-icon .kn-tile:not(.kn-tile--rich) .kn-tile__icon {
	position: static;
	width: 64px;
	height: 64px;
	border-radius: 12px;
	background: var(--kn-muted);
	margin: 0 0 16px;
	-webkit-mask-image: none;
	        mask-image: none;
}
.kn-services-section--media-icon .kn-tile:not(.kn-tile--rich) .kn-tile__icon img {
	width: 56%;
	height: 56%;
	object-fit: contain;
}
.kn-services-section--media-icon .kn-tile:not(.kn-tile--rich) .kn-tile__title,
.kn-services-section--media-icon .kn-tile:not(.kn-tile--rich) .kn-tile__body,
.kn-services-section--media-icon .kn-tile:not(.kn-tile--rich) .kn-tile__link {
	max-width: none;
}
.kn-services-section--media-icon .kn-tile:not(.kn-tile--rich) .kn-tile__body {
	display: block;
	overflow: visible;
}
.kn-tile__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 28px;
	color: var(--kn-blue);
	margin: 0 0 12px 0;
}
.kn-tile__body {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	line-height: 26px;
	color: var(--kn-blue);
	margin: 0 0 auto 0;
}
.kn-tile__link {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--kn-blue);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
}
.kn-tile__link:hover { color: var(--kn-orange); }
.kn-tile__link::after {
	content: "";
	width: 22px;
	height: 10px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M16 1l5 4-5 4M21 5H1'/></svg>") no-repeat center / contain;
	        mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M16 1l5 4-5 4M21 5H1'/></svg>") no-repeat center / contain;
}

/* === CTA banner (left text / right image)
   Section wrapper is transparent; the .kn-cta__inner is the actual card
   so rounded corners + variant background apply to the card while the
   section gets outer horizontal padding when needed.
   Variants:
     .kn-cta--dark  (default) teal background, white text
     .kn-cta--light           white background, teal text
   Modifier:
     .is-rounded              16px corner radius on the card
   ================================================================== */
.kn-cta {
	background: transparent;
	overflow: visible;
	padding: 48px 60px;
}
.kn-cta.alignfull { padding: 48px 60px; }
.kn-cta__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 659px;
	gap: 60px;
	align-items: center;
	min-height: 569px;
	padding-left: 60px;
	overflow: hidden;
}
.kn-cta--dark .kn-cta__inner { background: var(--kn-blue); color: #fff; }
.kn-cta--light .kn-cta__inner { background: var(--kn-muted); color: var(--kn-blue); }
.kn-cta.is-rounded .kn-cta__inner { border-radius: 16px; }
.kn-cta__text { padding: 60px 0; }
.kn-cta__eyebrow {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.12px;
	text-transform: uppercase;
	color: var(--kn-orange);
	margin: 0 0 12px 0;
}
.kn-cta__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 1.13;
	margin: 0 0 16px 0;
	color: inherit;
}
.kn-cta__body {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	line-height: 26px;
	margin: 0 0 32px 0;
	color: inherit;
}
.kn-cta--light .kn-cta__btn--secondary {
	background: transparent;
	color: var(--kn-blue);
	border: 1px solid var(--kn-border);
}
.kn-cta--light .kn-cta__btn--secondary:hover {
	background: rgba(1, 66, 68, 0.06);
	border-color: var(--kn-blue);
}
.kn-cta--light .kn-cta__checklist li { color: var(--kn-blue); }
.kn-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--kn-orange);
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 20px;
	padding: 16px 28px;
	border-radius: 10px;
	text-decoration: none;
}
.kn-cta__btn:hover { background: #e8731f; color: #fff; }
.kn-cta__btn::after {
	content: "";
	width: 22px;
	height: 10px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M16 1l5 4-5 4M21 5H1'/></svg>") no-repeat center / contain;
	        mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M16 1l5 4-5 4M21 5H1'/></svg>") no-repeat center / contain;
}
.kn-cta__image {
	height: 569px;
	width: 100%;
	max-width: 659px;
	object-fit: cover;
	display: block;
	justify-self: end;
}
/* When the card itself is rounded, the image needs to inherit only the right corners.
   The card's overflow:hidden on __inner already masks the image, so no per-corner radius needed. */

/* === Contact form section ("Hva kan vi hjelpe deg med i dag?") ===== */
.kn-contact {
	background: #fff;
	padding: 80px 60px;
}
.kn-contact__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 480px 1fr;
	gap: 80px;
}
.kn-contact__intro .kn-eyebrow { color: var(--kn-orange); }
.kn-contact__intro h2 {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 48px;
	color: var(--kn-blue);
	margin: 0 0 16px 0;
	line-height: 1.1;
}
.kn-contact__intro p {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	color: var(--kn-blue);
	margin: 0 0 32px 0;
}
.kn-contact__details {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	color: var(--kn-blue);
	line-height: 1.8;
}
.kn-contact__details a { color: var(--kn-blue); text-decoration: none; }
.kn-contact__details strong {
	display: block;
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--kn-orange);
	margin-top: 16px;
}
.kn-form { display: grid; gap: 16px; }
.kn-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.kn-form input[type="text"],
.kn-form input[type="email"],
.kn-form input[type="tel"],
.kn-form textarea {
	width: 100%;
	background: var(--kn-muted);
	border: 1px solid var(--kn-border);
	border-radius: 6px;
	padding: 14px 16px;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	color: var(--kn-blue);
}
.kn-form input:focus, .kn-form textarea:focus {
	outline: none;
	border-color: var(--kn-orange);
}
.kn-form fieldset {
	border: 0;
	padding: 0;
	margin: 8px 0 0 0;
}
.kn-form fieldset legend {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--kn-blue);
	margin-bottom: 12px;
}
.kn-form__checks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 16px;
	font-size: 15px;
}
.kn-form__checks label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--kn-blue);
}
.kn-form__submit {
	background: var(--kn-orange);
	color: #fff;
	border: 0;
	padding: 16px 28px;
	border-radius: 10px;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 18px;
	cursor: pointer;
	justify-self: start;
}
.kn-form__submit:hover { background: #e8731f; }

/* === Nettbutikk (product showcase) ================================ */
.kn-shop {
	background: #fff;
	padding: 80px 60px;
}
.kn-shop__inner { max-width: 1440px; margin: 0 auto; }
.kn-shop__head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: 32px;
}
.kn-shop h2 {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 32px;
	color: var(--kn-blue);
	margin: 0;
}
.kn-shop__all {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	color: var(--kn-orange);
	text-decoration: none;
	font-size: 16px;
}
.kn-shop__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.kn-product {
	background: #fff;
	border: 1px solid var(--kn-border);
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.kn-product__img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; background: var(--kn-muted); }
.kn-product__body { padding: 16px 20px; flex: 1; display: flex; flex-direction: column; }
.kn-product__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--kn-blue);
	margin: 0 0 4px 0;
}
.kn-product__cat {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: var(--kn-grey);
	margin: 0 0 12px 0;
}
.kn-product__cta {
	margin-top: auto;
	background: var(--kn-orange);
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
	padding: 10px 16px;
	border-radius: 6px;
	text-align: center;
	display: block;
}
.kn-product__cta:hover { background: #e8731f; color: #fff; }

/* === Nærmeste avdeling (map + branches) ============================ */
.kn-branches {
	background: var(--kn-muted);
	padding: 80px 60px;
}
.kn-branches__inner { max-width: 1440px; margin: 0 auto; }
.kn-branches__head .kn-eyebrow { color: var(--kn-orange); }
.kn-branches__head .kn-branches__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 48px;
	color: var(--kn-blue);
	margin: 0 0 16px 0;
	line-height: 1.1;
}
.kn-branches__head .kn-branches__intro {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	color: var(--kn-blue);
	max-width: 720px;
	margin: 0 0 32px 0;
}
.kn-branches__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 32px;
}

/* Left column: search + list (card) */
.kn-branches__list {
	background: #fff;
	border: 1px solid var(--kn-border);
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
}
.kn-branches__search {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--kn-muted);
	border: 1px solid var(--kn-border);
	border-radius: 999px;
	padding: 0 18px;
	margin-bottom: 12px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kn-branches__search:focus-within {
	border-color: var(--kn-orange);
	box-shadow: 0 0 0 3px rgba(255, 128, 36, 0.15);
}
.kn-branches__search-icon { color: var(--kn-blue); opacity: 0.65; flex-shrink: 0; }
.kn-branches__search-input {
	flex: 1;
	height: 44px;
	border: 0;
	background: transparent;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	color: var(--kn-blue);
	outline: none;
}
.kn-branches__search-input::placeholder { color: var(--kn-grey); }
.kn-branches__items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.kn-branch {
	border-bottom: 1px solid var(--kn-border);
}
.kn-branch:last-child { border-bottom: 0; }
.kn-branch__head {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: transparent;
	border: 0;
	padding: 18px 6px;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
	border-radius: 8px;
	transition: background 0.15s ease;
}
.kn-branch__head:hover,
.kn-branch.is-active .kn-branch__head { background: var(--kn-muted); }
.kn-branch__heading { display: flex; flex-direction: column; gap: 4px; }
.kn-branch__name {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--kn-blue);
	margin: 0;
}
.kn-branch__area {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: var(--kn-grey);
	margin: 0;
	line-height: 1.4;
}
.kn-branch__plus {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--kn-orange);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.18s ease, background 0.18s ease;
}
.kn-branch__head[aria-expanded="true"] .kn-branch__plus {
	transform: rotate(45deg);
	background: var(--kn-blue);
}
.kn-branch__details {
	padding: 0 6px 18px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: var(--kn-blue);
	line-height: 1.55;
}
.kn-branch__details a { color: var(--kn-orange); text-decoration: none; }
.kn-branch__details a:hover { text-decoration: underline; }
.kn-branch__detail { margin: 4px 0; }

/* Right column: Leaflet map */
.kn-branches__map-wrap {
	background: #fff;
	border: 1px solid var(--kn-border);
	border-radius: 12px;
	padding: 0;
	overflow: hidden;
	min-height: 520px;
	display: flex;
}
.kn-branches__map {
	width: 100%;
	min-height: 520px;
	height: 100%;
	border-radius: 12px;
	background: #e8eef1;
}
.kn-branches__marker svg { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22)); transition: transform 0.15s ease; }
.kn-branches__marker.is-hover svg,
.kn-branches__marker:hover svg { transform: translateY(-3px) scale(1.08); }

/* Leaflet overrides — keep the OSM look but use Knapphus chrome */
.leaflet-popup-content-wrapper { border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.leaflet-popup-content { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.5; color: var(--kn-blue); margin: 12px 16px; }
.leaflet-popup-content strong { font-family: 'Outfit', sans-serif; color: var(--kn-blue); }
.leaflet-popup-content a { color: var(--kn-orange); text-decoration: none; }

/* === Feature split — left text + right image ======================
   Each half is independently styled via CSS variables so the block can
   render any color pair without touching CSS. The `variant` attribute
   sets the default pair; bgLeft/bgRight/textColor override per-instance.
   --kn-fs-bg-left, --kn-fs-bg-right, --kn-fs-text — see render.php.
   ================================================================== */
.kn-feature-split {
	background: var(--kn-muted);
	padding: 80px 60px;
	/* Variant defaults — overridden by inline style when bg* attributes set */
	--kn-fs-bg-left:  var(--kn-blue);
	--kn-fs-bg-right: var(--kn-blue);
	--kn-fs-text:     #ffffff;
}
.kn-feature-split.is-light {
	--kn-fs-bg-left:  #ffffff;
	--kn-fs-bg-right: var(--kn-muted);
	--kn-fs-text:     var(--kn-blue);
}
.kn-feature-split__inner {
	max-width: 1440px;
	margin: 0 auto;
	border-radius: 12px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	overflow: hidden;
}
.kn-feature-split__text  { padding: 60px; background: var(--kn-fs-bg-left); color: var(--kn-fs-text); }
.kn-feature-split__media { background: var(--kn-fs-bg-right); display: flex; align-items: stretch; justify-content: stretch; min-height: 100%; }
.kn-feature-split__eyebrow {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.12px;
	text-transform: uppercase;
	color: var(--kn-orange);
	margin: 0 0 12px 0;
}
.kn-feature-split__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.13;
	margin: 0 0 16px 0;
	color: inherit;
}
.kn-feature-split__body {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	line-height: 26px;
	margin: 0 0 28px 0;
	color: inherit;
}
.kn-feature-split__cta {
	display: inline-flex;
	gap: 10px;
	background: var(--kn-orange);
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 18px;
	padding: 14px 24px;
	border-radius: 10px;
	text-decoration: none;
}
.kn-feature-split__image {
	width: 100%;
	height: 100%;
	min-height: 460px;
	object-fit: cover;
	display: block;
}

/* === Stats banner (bottom of every page) =========================== */
.kn-stats {
	background: var(--kn-blue);
	color: #fff;
	padding: 48px 0;
}
.kn-stats__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 60px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	text-align: center;
}
.kn-stats__num {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 1.1;
	margin: 0 0 8px 0;
}
/* The ISO cell carries two full standard designations, not a short number —
   scale it down so both lines fit the stat column cleanly. */
.kn-stats__num--iso {
	font-size: 22px;
	line-height: 1.35;
}
.kn-stats__label {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	margin: 0;
	opacity: 0.9;
}

/* === Footer ========================================================= */
.kn-footer {
	background: var(--kn-muted);
	padding: 64px 0 32px 0;
	color: var(--kn-blue);
}
.kn-footer__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 60px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 48px;
}
.kn-footer__col h4 {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--kn-blue);
	margin: 0 0 16px 0;
}
.kn-footer__col ul { list-style: none; padding: 0; margin: 0; }
.kn-footer__col li { margin-bottom: 8px; font-size: 15px; }
.kn-footer__col a { color: var(--kn-blue); text-decoration: none; }
.kn-footer__col a:hover { color: var(--kn-orange); }
.kn-footer__brand img { width: 180px; height: auto; margin-bottom: 16px; }
.kn-footer__brand p { font-size: 15px; line-height: 1.6; margin: 0; }
.kn-footer__legal {
	max-width: 1440px;
	margin: 32px auto 0 auto;
	padding: 16px 60px 0 60px;
	border-top: 1px solid rgba(1, 66, 68, 0.15);
	font-size: 13px;
	display: flex;
	gap: 24px;
}
.kn-footer__legal a { color: var(--kn-blue); text-decoration: none; }

/* === Responsive: scale gracefully below 1440px ===================== */
@media (max-width: 1200px) {
	.kn-hero { height: 100vh; height: 100dvh; min-height: 420px; }
	.kn-hero__inner { padding-left: 32px; padding-right: 32px; }
	.kn-hero__headline { font-size: 44px; line-height: 50px; }
	.kn-section { padding: 56px 32px; }
	.kn-services { grid-template-columns: repeat(2, 1fr); }
	.kn-tile { height: auto; }
	.kn-footer__inner { grid-template-columns: 1fr 1fr; padding: 0 32px; }
}
@media (max-width: 720px) {
	.kn-hero { height: 100vh; height: 100dvh; min-height: 360px; }
	.kn-hero__inner { padding-left: 24px; padding-right: 24px; }
	/* Shrink the headline on a phone so it fits inside the clamped hero
	   without crowding the CTA. */
	.kn-hero__headline { font-size: 28px; line-height: 34px; }
	.kn-hero__body { margin-top: 12px; }
	.kn-hero__ctas { margin-top: 24px; }
	.kn-hero__headline { font-size: 32px; line-height: 38px; }
	.kn-hero__cta { width: auto; padding: 0 20px; }
	.kn-services { grid-template-columns: 1fr; }
	.kn-stats__inner { grid-template-columns: 1fr; }
	.kn-footer__inner { grid-template-columns: 1fr; }
	.kn-header__inner, .kn-header-over { padding: 16px 20px; }
}

/* ==================================================================
   Mobile navigation (hamburger + slide-down panel)

   Below 960px the inline desktop nav exceeds viewport width and the
   page would refuse to fit a phone screen at all. Hide it, swap in
   the hamburger button, and reveal a full-screen overlay menu when
   it's tapped. Above 960px the inline nav and chevron dropdowns
   work as before — hamburger is hidden.
   ================================================================== */

.kn-mobile-toggle {
	display: none;
	/* Float above the .kn-mobile-panel (z-index: 1000) so the animated X
	   stays tappable when the panel is open. Otherwise the panel covers
	   the button and there's no way to close the menu. */
	position: relative;
	z-index: 1001;
	background: transparent;
	border: 0;
	padding: 8px;
	width: 44px;
	height: 44px;
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	color: inherit;
	flex-shrink: 0;
}
/* Force the X to render white over the dark teal panel regardless of which
   header variant we started in. */
.kn-mobile-toggle[aria-expanded="true"] { color: #fff !important; }
.kn-mobile-toggle__bar {
	display: block;
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.18s ease, opacity 0.18s ease;
}
.kn-mobile-toggle[aria-expanded="true"] .kn-mobile-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kn-mobile-toggle[aria-expanded="true"] .kn-mobile-toggle__bar:nth-child(2) { opacity: 0; }
.kn-mobile-toggle[aria-expanded="true"] .kn-mobile-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Light variant on white header */
.kn-mobile-toggle--light { color: var(--kn-blue); }

.kn-mobile-panel { display: none; }
.kn-mobile-panel[hidden] { display: none; }

@media (max-width: 960px) {
	/* Hide inline desktop nav + chevron-triggered dropdown panels */
	.kn-header-over__nav,
	.kn-header__nav { display: none !important; }
	.kn-dropdown { display: none !important; }

	/* Show hamburger */
	.kn-mobile-toggle { display: flex; }

	/* Logo must sit at the SAME (x, y) on every page. The over-hero header
	   is a single flex row, but .kn-header has TWO nested padded wrappers
	   (.kn-header outer + .kn-header__inner inner) — that double-padding
	   pushed the subpage logo 53px to the right of the home one.
	   Flatten by zeroing the outer .kn-header padding on mobile so only
	   the inner one applies; both headers then have identical layout. */
	.kn-header { padding: 0; }
	.kn-header-over,
	.kn-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 20px;
		gap: 12px;
		max-width: 100%;
	}
	.kn-header-over__logo,
	.kn-header__logo { width: 128px; height: auto; }
	.kn-header-over__logo-link,
	.kn-header__logo-link { display: block; flex-shrink: 0; }

	/* The mobile slide-down panel */
	.kn-mobile-panel:not([hidden]) {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		background: var(--kn-blue);
		color: #fff;
		overflow-y: auto;
		padding: 84px 24px 32px;
		animation: kn-mobile-panel-in 0.18s ease-out;
	}
	.kn-mobile-panel__inner {
		display: flex;
		flex-direction: column;
		max-width: 480px;
		margin: 0 auto;
	}
	.kn-mobile-panel__inner a {
		display: block;
		padding: 18px 4px;
		color: #fff;
		text-decoration: none;
		font-family: 'Outfit', sans-serif;
		font-size: 20px;
		font-weight: 600;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}
	.kn-mobile-panel__inner a:hover,
	.kn-mobile-panel__inner a:focus-visible {
		color: var(--kn-orange);
	}
	.kn-mobile-panel__divider {
		height: 1px;
		background: rgba(255, 255, 255, 0.2);
		margin: 16px 0;
	}
}
@keyframes kn-mobile-panel-in {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ==================================================================
   Responsive block rules (Sprint 3) — all custom blocks
   ================================================================== */

/* ---------- Tablet (≤ 1024px) ---------- */
@media (max-width: 1024px) {
	.kn-section { padding: 56px 32px; }
	.kn-cta__inner,
	.kn-feature-split__inner,
	.kn-app .kn-app__inner,
	.kn-acc__inner,
	.kn-branches__inner > .kn-branches__grid,
	.kn-contact__inner,
	.kn-compare__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.kn-app .kn-app__inner { padding: 40px; }
	.kn-app__image { max-width: 380px; margin: 0 auto; }
	.kn-cta__image,
	.kn-feature-split__image,
	.kn-acc__image { width: 100%; max-height: 420px; object-fit: cover; }
	.kn-shop__grid { grid-template-columns: repeat(2, 1fr) !important; }
	.kn-persons__grid { grid-template-columns: repeat(2, 1fr) !important; }
	.kn-compare__grid { grid-template-columns: 1fr !important; }
	.kn-branches__map { max-height: 360px; object-fit: cover; }
	.kn-dropdown__inner {
		padding: 32px 32px 40px;
	}
}

/* ---------- Phone (≤ 720px) ---------- */
@media (max-width: 720px) {
	.kn-section { padding: 48px 20px; }
	.kn-hero__inner { padding-left: 20px; padding-right: 20px; }
	.kn-hero__body { font-size: 16px; line-height: 24px; }
	.kn-hero__ctas { flex-direction: column; gap: 12px; align-items: stretch; margin-top: 32px; }
	.kn-hero__ctas .kn-hero__cta { width: 100%; justify-content: center; }
	.kn-shop__grid { grid-template-columns: 1fr !important; }
	.kn-persons__grid { grid-template-columns: 1fr !important; }
	.kn-app { padding: 48px 20px; }
	.kn-app .kn-app__inner {
		padding: 32px 24px;
		border-radius: 12px;
	}
	.kn-app__title { font-size: 28px; }
	.kn-app__body, .kn-app__checklist li { font-size: 15px; }
	.kn-app__badges img { height: 42px; }
	.kn-cta {
		padding: 48px 20px;
	}
	.kn-cta__inner {
		padding: 32px 24px;
		border-radius: 12px;
	}
	.kn-cta__title { font-size: 28px; }
	.kn-cta__buttons { flex-direction: column; align-items: stretch; }
	.kn-cta__btn { justify-content: center; }
	.kn-feature-split { padding: 48px 20px; }
	.kn-feature-split__inner {
		padding: 32px 24px;
		border-radius: 12px;
	}
	.kn-feature-split__title { font-size: 28px; }
	.kn-acc__inner { padding: 48px 20px; }
	.kn-acc__text h2 { font-size: 26px; }
	.kn-acc__item summary { font-size: 17px; padding-right: 28px; }
	.kn-compare__inner { padding: 48px 20px; }
	.kn-compare__head h2 { font-size: 26px; }
	.kn-compare__card { padding: 28px; }
	.kn-compare__title { font-size: 24px; }
	section.kn-persons { padding: 48px 20px; }
	.kn-persons__head h2 { font-size: 26px; }
	.kn-person { padding: 20px; gap: 16px; }
	.kn-person__avatar { width: 64px; height: 64px; }
	.kn-person__name { font-size: 18px; }
	.kn-branches__inner > .kn-branches__head h2 { font-size: 28px; }
	.kn-contact__inner h2 { font-size: 28px; }
	.kn-contact .kn-form__row { grid-template-columns: 1fr; }
	.kn-orderform { padding: 48px 20px; }
	.kn-orderform__head h2 { font-size: 26px; }
	.kn-docs .kn-docs__inner,
	section.kn-docs .kn-docs__inner { padding: 48px 20px; }
	.kn-docs__list a { font-size: 16px; padding: 14px 0; }
	.kn-cat-tabs__inner {
		padding: 12px 20px;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.kn-cat-tabs__inner::-webkit-scrollbar { display: none; }
	.kn-cat-tabs__tab { white-space: nowrap; flex-shrink: 0; padding: 8px 16px; font-size: 14px; }
	.kn-dropdown__inner { padding: 24px 20px 32px; }
	.kn-dropdown__menu { gap: 22px; }
	.kn-dropdown__menu a { font-size: 20px; }
	.kn-eyebrow { font-size: 14px; }
}

/* ==================================================================
   A11y — focus-visible states for keyboard navigation
   Single orange outline + offset across every interactive element.
   ================================================================== */
.kn-header-over__nav a:focus-visible,
.kn-header__nav a:focus-visible,
[data-kn-dropdown-trigger]:focus-visible,
.kn-dropdown__menu a:focus-visible,
.kn-hero__cta:focus-visible,
.kn-cta__btn:focus-visible,
.kn-feature-split__cta:focus-visible,
.kn-tile__link:focus-visible,
.kn-product__cta:focus-visible,
.kn-shop__all:focus-visible,
.kn-compare__cta:focus-visible,
.kn-docs__list a:focus-visible,
.kn-cat-tabs__tab:focus-visible,
.kn-acc__item summary:focus-visible,
.kn-person__phone a:focus-visible,
.kn-person__email a:focus-visible,
.kn-footer a:focus-visible,
.kn-form__submit:focus-visible,
.kn-form--fluent button:focus-visible {
	outline: 2px solid var(--kn-orange);
	outline-offset: 3px;
	border-radius: 4px;
}
.kn-form input:focus-visible,
.kn-form textarea:focus-visible,
.kn-form--fluent input:focus-visible,
.kn-form--fluent textarea:focus-visible,
.kn-form--fluent select:focus-visible,
.kn-search:focus-visible {
	outline: 2px solid var(--kn-orange);
	outline-offset: 1px;
	border-color: var(--kn-orange);
}
/* Skip the default browser dotted outline on the marker we hide */
.kn-acc__item summary:focus { outline: none; }

/* Screen-reader-only utility */
.kn-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* ---------- Small phone (≤ 480px) ---------- */
@media (max-width: 480px) {
	.kn-hero__headline { font-size: 28px; line-height: 34px; }
	.kn-cta__title,
	.kn-feature-split__title,
	.kn-app__title,
	.kn-compare__head h2,
	.kn-persons__head h2,
	.kn-acc__text h2,
	.kn-orderform__head h2 { font-size: 24px; }
	.kn-app__badges { flex-direction: column; gap: 8px; }
	.kn-app__badges img { height: 44px; width: auto; }
	.kn-shop__inner,
	.kn-compare__inner,
	.kn-acc__inner { padding: 40px 16px; }
	.kn-person { flex-direction: column; text-align: center; align-items: center; }
}

/* === Subpage hero (used on Drivstoff, Teknikk, Tanker, Produkter, Kort) === */
.kn-subhero {
	position: relative;
	width: 100%;
	min-height: 1024px;
	background-size: cover;
	background-position: center;
	color: #fff;
}
.kn-subhero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--kn-overlay);
	opacity: 0.4;
	pointer-events: none;
}
.kn-subhero__inner {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	padding: 596px 60px 0 60px;
}
.kn-subhero__eyebrow {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.12px;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 24px 0;
}
.kn-subhero__headline {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 60px;
	line-height: 68px;
	color: #fff;
	margin: 0;
	max-width: 720px;
}
.kn-subhero__headline .kn-accent { color: var(--kn-orange); }
.kn-subhero__lede {
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	line-height: 28px;
	color: #fff;
	max-width: 640px;
	margin: 24px 0 0 0;
}
.kn-subhero__ctas {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-top: 40px;
}
.kn-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--kn-orange);
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 20px;
	padding: 16px 24px;
	border-radius: 10px;
	text-decoration: none;
	transition: background 0.15s;
}
.kn-btn-primary:hover { background: #e8731f; color: #fff; }
.kn-btn-primary svg { width: 22px; height: 10px; }
.kn-btn-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 20px;
	text-decoration: none;
}
.kn-btn-link:hover { color: var(--kn-orange); }

/* === App showcase (dark teal w/ phone/tablet mockup + checklist + badges) === */
.kn-app {
	background: var(--kn-blue);
	color: #fff;
	overflow: hidden;
}
.kn-app__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 580px;
	gap: 60px;
	align-items: center;
	min-height: 540px;
	padding: 60px;
}
.kn-app__eyebrow {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.12px;
	text-transform: uppercase;
	color: var(--kn-orange);
	margin: 0 0 12px 0;
}
.kn-app__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 1.13;
	margin: 0 0 16px 0;
	color: #fff;
}
.kn-app__body {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	line-height: 26px;
	margin: 0 0 24px 0;
	color: #fff;
}
.kn-app__checklist {
	list-style: none;
	padding: 0;
	margin: 0 0 28px 0;
	display: grid;
	gap: 12px;
}
.kn-app__checklist li {
	display: flex;
	align-items: start;
	gap: 12px;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
}
.kn-app__checklist li::before {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border: 2px solid var(--kn-orange);
	border-radius: 50%;
	background: #fff;
	margin-top: 2px;
}
.kn-app__badges {
	display: flex;
	gap: 12px;
	align-items: center;
}
.kn-app__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #000;
	color: #fff;
	border-radius: 8px;
	padding: 8px 14px;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	text-decoration: none;
}
.kn-app__badge svg { width: 20px; height: 24px; }
.kn-app__badge small { display: block; font-size: 10px; opacity: 0.8; }
.kn-app__badge strong { display: block; font-size: 15px; font-weight: 600; }
.kn-app__image {
	width: 100%;
	max-width: 580px;
	height: auto;
	justify-self: end;
}
.kn-app__image-placeholder {
	width: 100%;
	height: 460px;
	background: rgba(255,255,255,0.05);
	border: 1px dashed rgba(255,255,255,0.2);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.5);
	font-style: italic;
}

/* === Contact persons grid (real named contacts grouped by region) === */
.kn-persons {
	background: #fff;
	padding: 80px 60px;
}
.kn-persons__inner { max-width: 1440px; margin: 0 auto; }
.kn-persons__head .kn-eyebrow { color: var(--kn-orange); }
.kn-persons__head h2 {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 48px;
	color: var(--kn-blue);
	margin: 0 0 32px 0;
	line-height: 1.1;
}
.kn-persons__group {
	margin-top: 40px;
}
.kn-persons__region {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1.12px;
	text-transform: uppercase;
	color: var(--kn-orange);
	margin: 0 0 20px 0;
}
.kn-persons__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.kn-person {
	text-align: center;
	background: var(--kn-muted);
	border-radius: 10px;
	padding: 24px 16px;
}
.kn-person__avatar {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--kn-border);
	margin: 0 auto 12px;
	object-fit: cover;
	display: block;
}
.kn-person__name {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--kn-blue);
	margin: 0;
}
.kn-person__role {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: var(--kn-grey);
	margin: 2px 0 8px;
}
.kn-person__phone {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--kn-blue);
	margin: 0 0 2px;
	display: block;
}
.kn-person__email {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: var(--kn-grey);
	margin: 0;
	text-decoration: none;
}

/* === Tank CTA card (Trenger du en tank?) ============================ */
.kn-tank-cta {
	background: var(--kn-muted);
	padding: 80px 60px;
}
.kn-tank-cta__inner {
	max-width: 1440px;
	margin: 0 auto;
	background: var(--kn-blue);
	color: #fff;
	border-radius: 12px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	min-height: 380px;
}
.kn-tank-cta__text { padding: 60px; }
.kn-tank-cta__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 40px;
	margin: 0 0 16px 0;
	color: #fff;
}
.kn-tank-cta__body {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	line-height: 26px;
	margin: 0 0 24px 0;
	color: #fff;
}
.kn-tank-cta__img {
	width: 100%;
	height: 100%;
	min-height: 380px;
	object-fit: contain;
	padding: 32px;
}

/* === Related cards ("Se også") ==================================== */
.kn-related {
	background: #fff;
	padding: 60px;
}
.kn-related__inner { max-width: 1440px; margin: 0 auto; }
.kn-related__head h2 {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 32px;
	color: var(--kn-blue);
	margin: 0 0 24px 0;
}
.kn-related__eyebrow {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.12px;
	text-transform: uppercase;
	color: var(--kn-orange);
	margin: 0 0 12px 0;
}
.kn-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.kn-related__card {
	border: 1px solid var(--kn-border);
	border-radius: 10px;
	padding: 32px;
	display: flex;
	flex-direction: column;
}
.kn-related__card h3 {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 24px;
	color: var(--kn-blue);
	margin: 0 0 12px 0;
}
.kn-related__card p {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: var(--kn-blue);
	margin: 0 0 16px 0;
}
.kn-related__card a {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	color: var(--kn-orange);
	text-decoration: none;
	margin-top: auto;
}

/* === Order form section (Bestill drivstoff) ======================= */
.kn-orderform {
	background: var(--kn-muted);
	padding: 80px 60px;
}
.kn-orderform__inner {
	max-width: 1100px;
	margin: 0 auto;
}
.kn-orderform__head {
	text-align: center;
	margin-bottom: 40px;
}
.kn-orderform__head .kn-eyebrow { color: var(--kn-orange); justify-content: center; display: block; }
.kn-orderform__head h2 {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 40px;
	color: var(--kn-blue);
	margin: 0 0 12px;
}
.kn-orderform__head p {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	color: var(--kn-blue);
	max-width: 720px;
	margin: 0 auto;
}
.kn-orderform__box {
	background: #fff;
	border-radius: 12px;
	padding: 40px;
	display: grid;
	gap: 16px;
}
.kn-orderform__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.kn-orderform label {
	display: grid;
	gap: 6px;
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.5px;
	color: var(--kn-blue);
}
.kn-orderform input, .kn-orderform select, .kn-orderform textarea {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 16px;
	padding: 12px 14px;
	border: 1px solid var(--kn-border);
	border-radius: 6px;
	color: var(--kn-blue);
	background: #fff;
}
.kn-orderform input:focus, .kn-orderform select:focus, .kn-orderform textarea:focus {
	outline: none;
	border-color: var(--kn-orange);
}
.kn-orderform__submit {
	background: var(--kn-orange);
	color: #fff;
	border: 0;
	padding: 16px 28px;
	border-radius: 10px;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 18px;
	cursor: pointer;
	justify-self: start;
}
.kn-orderform__submit:hover { background: #e8731f; }

/* === Teknikk: category cards row (4 small cards) =================== */
.kn-tk-cats {
	background: #fff;
	padding: 60px;
}
.kn-tk-cats__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.kn-tk-cat {
	background: #fff;
	border: 1px solid var(--kn-border);
	border-radius: 10px;
	padding: 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 95px;
}
.kn-tk-cat__icon {
	flex-shrink: 0;
	width: 62px;
	height: 62px;
	border-radius: 10px;
	background: var(--kn-muted);
	display: flex;
	align-items: center;
	justify-content: center;
}
.kn-tk-cat__icon img { width: 43px; height: 43px; }
.kn-tk-cat__title {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--kn-blue);
	margin: 0;
}

/* === Teknikk: feature card (lys blå card with text + image + list) === */
.kn-tk-feature {
	background: var(--kn-muted);
	padding: 80px 60px;
}
.kn-tk-feature__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
}
.kn-tk-feature__text .kn-eyebrow { color: var(--kn-orange); }
.kn-tk-feature__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 52px;
	line-height: 60px;
	color: var(--kn-blue);
	margin: 0 0 16px 0;
}
.kn-tk-feature__body {
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	line-height: 28px;
	color: var(--kn-blue);
	margin: 0;
}
.kn-tk-feature__img {
	width: 100%;
	height: 100%;
	max-height: 470px;
	object-fit: cover;
	border-radius: 10px;
}
.kn-tk-feature__accordion {
	display: grid;
	gap: 16px;
	margin-top: 24px;
}
.kn-tk-feature__row {
	background: #fff;
	border-radius: 10px;
	padding: 22px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--kn-blue);
	cursor: pointer;
	border: 0;
	text-align: left;
}
.kn-tk-feature__row::after {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: var(--kn-muted);
	border-radius: 5px;
	font-weight: 400;
	font-size: 20px;
	color: var(--kn-blue);
}

/* === Teknikk: dark teal Automat block with checklist + 2 CTAs ====== */
.kn-tk-automat {
	background: #fff;
	padding: 0 60px 80px;
}
.kn-tk-automat__inner {
	max-width: 1440px;
	margin: 0 auto;
	background: var(--kn-blue);
	color: #fff;
	border-radius: 12px;
	padding: 60px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
}
.kn-tk-automat__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 52px;
	line-height: 60px;
	color: #fff;
	margin: 0 0 16px 0;
}
.kn-tk-automat__body {
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	line-height: 28px;
	color: #fff;
	margin: 0 0 24px 0;
}
.kn-tk-automat__buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.kn-tk-automat__checks {
	display: grid;
	gap: 24px;
}
.kn-tk-automat__check {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: 16px;
	align-items: start;
}
.kn-tk-automat__check img { width: 24px; height: 24px; margin-top: 4px; }
.kn-tk-automat__check h4 {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: #fff;
	margin: 0 0 4px 0;
}
.kn-tk-automat__check p {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #fff;
	margin: 0;
}

/* === Teknikk: Fjernpeiling lys blå card with Soolo app image ======= */
.kn-tk-soolo {
	background: #fff;
	padding: 60px;
}
.kn-tk-soolo__inner {
	max-width: 1440px;
	margin: 0 auto;
	background: var(--kn-muted);
	border-radius: 12px;
	padding: 60px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
.kn-tk-soolo__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 52px;
	line-height: 60px;
	color: var(--kn-blue);
	margin: 0 0 16px;
}
.kn-tk-soolo__body {
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	line-height: 28px;
	color: var(--kn-blue);
	margin: 0 0 24px;
}
.kn-tk-soolo__link {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	color: var(--kn-orange);
	font-size: 16px;
	text-decoration: none;
	display: inline-flex;
	gap: 8px;
	align-items: center;
}
.kn-tk-soolo__img {
	width: 100%;
	height: auto;
	max-height: 410px;
	object-fit: contain;
}

/* === Teknikk: contact form section with person card ================ */
.kn-tk-contact {
	background: #fff;
	padding: 80px 60px;
}
.kn-tk-contact__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 427px 1fr;
	gap: 24px;
}
.kn-tk-contact__head {
	grid-column: 1 / -1;
	margin-bottom: 16px;
}
.kn-tk-contact__head .kn-eyebrow { color: var(--kn-orange); }
.kn-tk-contact__head h2 {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 52px;
	line-height: 60px;
	color: var(--kn-blue);
	margin: 0 0 16px;
}
.kn-tk-contact__head p {
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	color: var(--kn-blue);
	margin: 0;
}
.kn-tk-contact__person {
	background: var(--kn-muted);
	border-radius: 10px;
	padding: 28px;
	text-align: left;
}
.kn-tk-contact__avatar {
	width: 121px;
	height: 121px;
	border-radius: 50%;
	background: var(--kn-border);
	margin-bottom: 24px;
	display: block;
	object-fit: cover;
}
.kn-tk-contact__person h3 {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 24px;
	color: var(--kn-blue);
	margin: 0 0 6px 0;
}
.kn-tk-contact__person p {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	color: var(--kn-blue);
	margin: 0;
	line-height: 28px;
}
.kn-tk-contact__person a {
	color: var(--kn-blue);
	text-decoration: none;
}
.kn-tk-contact__form {
	background: var(--kn-muted);
	border-radius: 10px;
	padding: 40px;
	display: grid;
	gap: 20px;
}
.kn-tk-contact__form label {
	display: grid;
	gap: 6px;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--kn-blue);
}
.kn-tk-contact__form label .req { color: var(--kn-orange); }
.kn-tk-contact__form input, .kn-tk-contact__form textarea {
	background: #fff;
	border: 0;
	border-radius: 10px;
	padding: 14px 16px;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	color: var(--kn-blue);
}
.kn-tk-contact__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.kn-tk-contact__submit {
	background: var(--kn-orange);
	color: #fff;
	border: 0;
	padding: 18px 28px;
	border-radius: 10px;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 20px;
	cursor: pointer;
	justify-self: start;
}

/* === Kort: 2-card comparison (Knapphus Kortet vs St1 Business) ===== */
.kn-kort-compare {
	background: var(--kn-muted);
	padding: 0 60px 80px;
}
.kn-kort-compare__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: -550px;
	position: relative;
	z-index: 5;
}
.kn-kort-card {
	background: #fff;
	border: 1px solid var(--kn-border);
	border-radius: 10px;
	padding: 40px;
}
.kn-kort-card__icon {
	width: 79px;
	height: 79px;
	border-radius: 10px;
	background: var(--kn-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
}
.kn-kort-card__icon img { max-width: 54px; max-height: 54px; }
.kn-kort-card__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 28px;
	color: var(--kn-blue);
	margin: 0 0 16px 0;
}
.kn-kort-card__body {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	line-height: 28px;
	color: var(--kn-blue);
	margin: 0 0 20px 0;
}
.kn-kort-card__bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 24px 0;
	display: grid;
	gap: 8px;
}
.kn-kort-card__bullets li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	color: var(--kn-blue);
}
.kn-kort-card__bullets li img { width: 20px; height: 20px; }
.kn-kort-card__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--kn-orange);
	color: var(--kn-blue);
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 16px;
	padding: 10px 20px;
	border-radius: 10px;
	text-decoration: none;
	background: transparent;
}
.kn-kort-card__btn:hover { background: var(--kn-orange); color: #fff; }

/* === Kort: KE Fast Fuel app (big dark teal panel with phone mockup) === */
.kn-kort-app {
	background: var(--kn-muted);
	padding: 0 60px 80px;
}
.kn-kort-app__inner {
	max-width: 1440px;
	margin: 0 auto;
	background: var(--kn-blue);
	color: #fff;
	border-radius: 12px;
	display: grid;
	grid-template-columns: 1fr 647px;
	gap: 0;
	overflow: hidden;
	min-height: 699px;
}
.kn-kort-app__text { padding: 88px 60px; }
.kn-kort-app__eyebrow {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.12px;
	text-transform: uppercase;
	color: var(--kn-orange);
	margin: 0 0 12px 0;
}
.kn-kort-app__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 52px;
	line-height: 60px;
	color: #fff;
	margin: 0 0 16px 0;
}
.kn-kort-app__body {
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	line-height: 28px;
	color: #fff;
	margin: 0 0 28px 0;
}
.kn-kort-app__checks {
	list-style: none;
	padding: 0;
	margin: 0 0 32px 0;
	display: grid;
	gap: 12px;
}
.kn-kort-app__checks li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	color: #fff;
}
.kn-kort-app__checks li img { width: 24px; height: 24px; }
.kn-kort-app__badges { display: flex; gap: 16px; }
.kn-kort-app__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: #000;
	border-radius: 6px;
	padding: 8px 12px;
	font-family: 'Inter', sans-serif;
	font-size: 9px;
	text-decoration: none;
	min-width: 120px;
}
.kn-kort-app__badge svg { width: 20px; height: 24px; flex-shrink: 0; fill: #000; }
.kn-kort-app__badge small { display: block; font-size: 9px; line-height: 1.2; }
.kn-kort-app__badge strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.kn-kort-app__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 699px;
}

/* === Kort: 2-person contact section (Astrid + Bjørn) =============== */
.kn-kort-contact {
	background: #fff;
	padding: 80px 60px;
}
.kn-kort-contact__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 24px;
	align-items: center;
}
.kn-kort-contact__head .kn-eyebrow { color: var(--kn-orange); }
.kn-kort-contact__head h2 {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 52px;
	line-height: 60px;
	color: var(--kn-blue);
	margin: 0 0 16px;
}
.kn-kort-contact__head p {
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	color: var(--kn-blue);
	margin: 0;
}
.kn-kort-contact__card {
	background: var(--kn-muted);
	border-radius: 10px;
	padding: 28px;
}
.kn-kort-contact__avatar {
	width: 121px;
	height: 121px;
	border-radius: 50%;
	background: var(--kn-border);
	display: block;
	margin: 0 0 24px;
	object-fit: cover;
}
.kn-kort-contact__name {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 24px;
	color: var(--kn-blue);
	margin: 0;
}
.kn-kort-contact__role {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	color: var(--kn-blue);
	margin: 4px 0 0;
}
.kn-kort-contact__phone {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--kn-blue);
	margin: 16px 0 0;
	text-decoration: none;
	display: block;
}
.kn-kort-contact__email {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	color: var(--kn-blue);
	text-decoration: none;
}

/* === Kort: Stations dark teal split (Over 70 stasjoner) ============ */
.kn-kort-stations {
	background: #fff;
	padding: 80px 60px;
}
.kn-kort-stations__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-radius: 10px;
	overflow: hidden;
}
.kn-kort-stations__text {
	background: var(--kn-blue);
	color: #fff;
	padding: 80px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.kn-kort-stations__eyebrow {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.12px;
	text-transform: uppercase;
	color: var(--kn-orange);
	margin: 0 0 12px 0;
}
.kn-kort-stations__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 52px;
	line-height: 60px;
	color: #fff;
	margin: 0 0 16px 0;
}
.kn-kort-stations__body {
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	line-height: 28px;
	color: #fff;
	margin: 0 0 24px 0;
}
.kn-kort-stations__link {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	color: var(--kn-orange);
	font-size: 16px;
	text-decoration: none;
}
.kn-kort-stations__img {
	width: 100%;
	height: 569px;
	object-fit: cover;
}

/* === Kort-order centered intro (used on kort-bedrift / kort-privat) === */
.kn-order-intro {
	background: #fff;
	padding: 80px 60px 32px;
}
.kn-order-intro__inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}
.kn-order-intro__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 52px;
	line-height: 60px;
	color: var(--kn-blue);
	margin: 0 0 16px;
}
.kn-order-intro__lede {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	color: var(--kn-blue);
	margin: 0;
}

/* === Order form (kort-bedrift / kort-privat) ====================== */
.kn-order-form {
	background: #fff;
	padding: 0 60px 80px;
}
.kn-order-form__inner {
	max-width: 900px;
	margin: 0 auto;
	background: var(--kn-muted);
	border-radius: 12px;
	padding: 40px;
	display: grid;
	gap: 16px;
}
.kn-order-form label {
	display: grid;
	gap: 6px;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--kn-orange);
}
.kn-order-form label .req { color: var(--kn-orange); }
.kn-order-form input[type="text"],
.kn-order-form input[type="email"],
.kn-order-form input[type="tel"],
.kn-order-form input[type="date"] {
	background: #fff;
	border: 0;
	border-radius: 6px;
	padding: 12px 14px;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: var(--kn-blue);
}
.kn-order-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.kn-order-form__radio {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	color: var(--kn-blue);
	display: flex;
	align-items: center;
	gap: 8px;
}
.kn-order-form__radios { display: flex; gap: 24px; }
.kn-order-form__divider {
	border: 0;
	border-top: 1px solid var(--kn-orange);
	margin: 16px 0;
}
.kn-order-form__section-title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--kn-blue);
	text-align: center;
	margin: 0 0 8px;
}
.kn-order-form__hint {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: var(--kn-grey);
	text-align: center;
	margin: 0 0 16px;
}
.kn-order-form__hint a { color: var(--kn-orange); text-decoration: none; }
.kn-order-form__card-slot {
	background: #fff;
	border-radius: 8px;
	padding: 16px;
}
.kn-order-form__card-slot-label {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--kn-blue);
	margin: 0 0 8px;
}
.kn-order-form__card-slot-row {
	display: grid;
	grid-template-columns: auto auto 1fr;
	gap: 12px;
	align-items: center;
}
.kn-order-form__terms {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: var(--kn-blue);
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}
.kn-order-form__submit {
	background: var(--kn-orange);
	color: #fff;
	border: 0;
	padding: 14px 28px;
	border-radius: 8px;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 16px;
	cursor: pointer;
	justify-self: start;
}

/* === Tanker: 2 product cards (Tanker / Utstyr) ====================== */
.kn-tk-products {
	background: var(--kn-muted);
	padding: 40px 60px;
}
.kn-tk-products__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.kn-tk-product-card {
	background: #fff;
	border: 1px solid var(--kn-border);
	border-radius: 10px;
	overflow: hidden;
}
.kn-tk-product-card__img {
	width: 100%;
	height: 320px;
	object-fit: contain;
	background: var(--kn-muted);
	padding: 24px;
}
.kn-tk-product-card__body { padding: 32px 36px 36px; }
.kn-tk-product-card__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 28px;
	color: var(--kn-blue);
	margin: 0 0 16px 0;
}
.kn-tk-product-card__lede {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	color: var(--kn-blue);
	margin: 0 0 20px 0;
}
.kn-tk-product-card__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--kn-orange);
	color: var(--kn-blue);
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 16px;
	padding: 8px 18px;
	border-radius: 10px;
	text-decoration: none;
}
.kn-tk-product-card__btn:hover { background: var(--kn-orange); color: #fff; }

/* === Tanker: Docs list (PDF downloads) ============================ */
.kn-docs {
	background: #fff;
	padding: 60px;
}
.kn-docs__inner {
	max-width: 1440px;
	margin: 0 auto;
}
.kn-docs__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 32px;
	color: var(--kn-blue);
	margin: 0 0 8px;
}
.kn-docs__lede {
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	color: var(--kn-blue);
	margin: 0 0 32px;
}
.kn-docs__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	max-width: 880px;
}
.kn-docs__item {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	color: var(--kn-blue);
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	text-decoration: none;
}
.kn-docs__item img { width: 43px; height: 43px; }
.kn-docs__item:hover { color: var(--kn-orange); }

/* === Logo strip (DE STOLER PÅ OSS) ================================= */
.kn-logos {
	background: #fff;
	padding: 64px 60px;
}
.kn-logos__inner { max-width: 1440px; margin: 0 auto; text-align: center; }
.kn-logos__eyebrow {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.12px;
	text-transform: uppercase;
	color: var(--kn-orange);
	margin: 0 0 12px 0;
}
.kn-logos__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 32px;
	color: var(--kn-blue);
	margin: 0 0 40px 0;
}
.kn-logos__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}
.kn-logos__item {
	flex: 1 1 0;
	min-width: 140px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.kn-logos__item img {
	max-width: 100%;
	max-height: 64px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter 0.2s, opacity 0.2s;
}
.kn-logos__item img:hover { filter: grayscale(0); opacity: 1; }
.kn-logos__placeholder {
	width: 100%;
	height: 56px;
	border: 1px dashed var(--kn-border);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--kn-grey);
	font-family: 'Inter', sans-serif;
	font-size: 13px;
}

/* === Testimonial (Et utdrag av hva kundene sier) ================== */
.kn-testimonial {
	background: var(--kn-muted);
	padding: 80px 60px;
}
.kn-testimonial__inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}
.kn-testimonial__eyebrow {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.12px;
	text-transform: uppercase;
	color: var(--kn-orange);
	margin: 0 0 24px 0;
}
.kn-testimonial__quote {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 1.3;
	color: var(--kn-blue);
	margin: 0 0 32px 0;
}
.kn-testimonial__person {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}
.kn-testimonial__avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--kn-border);
}
.kn-testimonial__meta { text-align: left; }
.kn-testimonial__name {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--kn-blue);
	margin: 0;
}
.kn-testimonial__role {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	color: var(--kn-grey);
	margin: 2px 0 0;
}

/* === Native-block module overrides (editable Hero / Services) ======= */
/* These sections are built from core blocks (button/image), so the look
   that used to live on raw <a>/<svg> markup is re-applied to the block
   wrappers here. Decorative arrows use a CSS mask + currentColor so they
   inherit the link colour (and the hover swap) automatically. */

/* Hero headline accent — orange word (editable inline text colour).
   Reset the <mark> user-agent background so it reads as coloured text,
   not a highlight box. */
.kn-hero__headline mark.has-inline-color {
	color: var(--kn-orange);
	background: none;
}

/* Feature-split CTA arrow (block renders a bare <a>, no inline svg) */
.kn-feature-split__cta { align-items: center; }
.kn-feature-split__cta::after {
	content: "";
	width: 22px;
	height: 10px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M16 1l5 4-5 4M21 5H1'/></svg>") no-repeat center / contain;
	        mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M16 1l5 4-5 4M21 5H1'/></svg>") no-repeat center / contain;
}

/* Feature-split light variant — outer band background only.
   Half-by-half colors come from --kn-fs-bg-left / --kn-fs-bg-right
   (set on .is-light at the top of the block's CSS). */
.kn-feature-split.is-light { background: #fff; }

/* ==================================================================
   Mobile UX sweep (≤ 720px)

   Catches everything missed by the earlier responsive rules:
   - Page-wide overflow protection (anything that creeps past the
     viewport bleeds the layout and forces the browser to scale down)
   - Grids that must collapse to single column
   - Hero CTAs that must be full-width pills
   - Footer columns that must stack
   - Image safety (any block-content img caps at 100% width)
   - Form fields full-width with comfortable touch targets
   ================================================================== */

@media (max-width: 720px) {
	html, body { overflow-x: hidden; }

	/* Universal safety net: keep block content within the viewport. */
	.kn-section,
	.kn-feature-split,
	.kn-cta,
	.kn-acc,
	.kn-app,
	.kn-compare,
	section.kn-persons,
	.kn-contact,
	.kn-branches,
	.kn-orderform,
	.kn-docs,
	.kn-tk-contact,
	.kn-shop,
	.kn-stats,
	.kn-cat-tabs,
	.kn-logos {
		max-width: 100vw;
		overflow: hidden;
	}

	/* All grids must collapse to single column on mobile, regardless of
	   inline --kn-cols overrides set by render.php. */
	.kn-services,
	.kn-persons__grid,
	.kn-shop__grid,
	.kn-compare__grid,
	.kn-feature-split__inner,
	.kn-cta__inner,
	.kn-contact__inner,
	.kn-app__inner,
	.kn-acc__inner,
	.kn-branches__inner > .kn-branches__grid,
	.kn-tk-contact__inner,
	.kn-footer__inner {
		grid-template-columns: 1fr !important;
	}

	/* Hero CTAs are 350px wide by default — full-width pills on mobile. */
	.kn-hero__cta {
		width: 100% !important;
		max-width: 100% !important;
		justify-content: center;
		text-align: center;
	}
	.kn-hero__ctas {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	/* Images in blocks should never exceed their column width. Targets the
	   common content-image classes; covers feature-split media, CTA media,
	   product/app/dropdown imagery, contact-person avatars, branch map. */
	.kn-feature-split img,
	.kn-cta img,
	.kn-app img,
	.kn-shop img,
	.kn-product img,
	.kn-acc img,
	.kn-tk-contact img,
	.kn-branches img,
	.kn-dropdown img,
	.kn-mobile-panel img,
	.kn-orderform img {
		max-width: 100%;
		height: auto;
	}

	/* Logos in footer + logo strip: make wrap properly. */
	.kn-logos__row,
	.kn-footer__logos {
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
	}

	/* Form fields — full width, comfortable touch targets, 16px font so iOS
	   doesn't auto-zoom when focusing. */
	.kn-form input,
	.kn-form textarea,
	.kn-form select,
	.kn-form--fluent input,
	.kn-form--fluent textarea,
	.kn-form--fluent select,
	.fluentform input,
	.fluentform textarea,
	.fluentform select {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
		font-size: 16px;
		min-height: 44px;
	}
	.kn-form textarea,
	.kn-form--fluent textarea,
	.fluentform textarea {
		min-height: 96px;
	}
	.fluentform .ff_submit_btn_wrapper button,
	.kn-form__submit,
	.kn-form--fluent button[type=submit] {
		width: 100% !important;
		min-height: 48px;
		font-size: 17px;
	}

	/* Trust strip — stack the 3 stats vertically when crammed. */
	.kn-stats__inner {
		grid-template-columns: 1fr !important;
		gap: 24px;
		text-align: center;
	}

	/* Footer: stack and centre everything. */
	.kn-footer__inner {
		text-align: left;
		gap: 28px;
	}
	.kn-footer__brand,
	.kn-footer__col {
		min-width: 0;
	}

	/* Category tabs (produkter): keep horizontal scroll but ensure touch
	   targets meet 44px height. */
	.kn-cat-tabs__tab { min-height: 44px; }

	/* Avoid font-size scaling causing inputs/anchors to feel too small. */
	a, button { -webkit-tap-highlight-color: rgba(255, 128, 36, 0.15); }
}

/* ==================================================================
   Staff directory (region-tabbed kontakt-oss) — new block
   ================================================================== */
.kn-directory { padding: 80px 60px; background: #fff; }
.kn-directory__inner { max-width: 1320px; margin: 0 auto; }
.kn-directory__head { text-align: center; margin: 0 auto 32px; max-width: 720px; }
.kn-directory__head h2 { color: var(--kn-blue); font-family: 'Outfit', sans-serif; font-size: 36px; margin: 0 0 12px; }
.kn-directory__intro { color: var(--kn-blue); font-size: 17px; line-height: 1.5; margin: 0; }
.kn-directory__tabs {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 8px; margin: 0 0 56px;
}
.kn-directory__tab {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 20px; border-radius: 999px;
	background: var(--kn-muted); color: var(--kn-blue);
	font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15px;
	text-decoration: none; transition: background 0.15s, color 0.15s;
}
.kn-directory__tab:hover, .kn-directory__tab:focus-visible {
	background: var(--kn-orange); color: #fff;
}
.kn-directory__region { padding-top: 24px; margin-bottom: 56px; scroll-margin-top: 110px; }
.kn-directory__region-head { margin-bottom: 24px; }
.kn-directory__region-name {
	color: var(--kn-blue); font-family: 'Outfit', sans-serif;
	font-size: 28px; margin: 0 0 8px;
}
.kn-directory__region-meta { font-size: 15px; margin: 4px 0; }
.kn-directory__region-meta a {
	color: var(--kn-orange); text-decoration: none; margin-right: 16px; font-weight: 600;
}
.kn-directory__region-address, .kn-directory__region-desc {
	color: var(--kn-blue); font-size: 15px; line-height: 1.55; margin: 4px 0;
	max-width: 820px;
}
.kn-directory__grid {
	display: grid; gap: 20px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) { .kn-directory__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  {
	.kn-directory { padding: 56px 20px; }
	.kn-directory__grid { grid-template-columns: 1fr; }
	.kn-directory__tabs { margin-bottom: 32px; }
}

/* ==================================================================
   Companies grid — "Selskaper i Knapphus Gruppen"
   ================================================================== */
.kn-companies { padding: 80px 60px; background: var(--kn-muted); }
.kn-companies__inner { max-width: 1320px; margin: 0 auto; }
.kn-companies__head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.kn-companies__head h2 { color: var(--kn-blue); font-family: 'Outfit', sans-serif; font-size: 32px; margin: 0 0 12px; }
.kn-companies__head p { color: var(--kn-blue); font-size: 17px; line-height: 1.5; margin: 0; }
.kn-companies__grid {
	display: grid; gap: 24px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.kn-company {
	background: #fff; border: 1px solid var(--kn-border);
	border-radius: 10px; padding: 24px;
}
.kn-company__name {
	color: var(--kn-blue); font-family: 'Outfit', sans-serif;
	font-size: 18px; margin: 0 0 12px;
}
.kn-company__meta { font-size: 14px; color: var(--kn-blue); margin: 4px 0; line-height: 1.5; }
.kn-company__meta a { color: var(--kn-orange); text-decoration: none; }
@media (max-width: 1024px) { .kn-companies__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  {
	.kn-companies { padding: 56px 20px; }
	.kn-companies__grid { grid-template-columns: 1fr; }
}

/* ==================================================================
   Station finder — map + filterable table
   ================================================================== */
.kn-stations { padding: 80px 60px; background: #fff; }
.kn-stations__inner { max-width: 1320px; margin: 0 auto; }
.kn-stations__head { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.kn-stations__head h2 { color: var(--kn-blue); font-family: 'Outfit', sans-serif; font-size: 36px; margin: 0 0 12px; }
.kn-stations__map {
	width: 100%; height: 480px; border-radius: 12px;
	overflow: hidden; margin-bottom: 24px; border: 1px solid var(--kn-border);
}
.kn-stations__map-inner { width: 100%; height: 100%; }
.kn-stations__marker span {
	display: block; width: 22px; height: 22px;
	background: var(--kn-orange); border-radius: 50%;
	border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.kn-stations__controls { margin: 0 0 16px; }
.kn-stations__search {
	width: 100%; max-width: 420px;
	padding: 12px 16px; border-radius: 8px;
	border: 1px solid var(--kn-border);
	font-family: 'Inter', sans-serif; font-size: 16px;
	background: var(--kn-muted);
}
.kn-stations__table-wrap { overflow-x: auto; }
.kn-stations__table {
	width: 100%; border-collapse: collapse; font-size: 15px;
}
.kn-stations__table th {
	text-align: left; padding: 14px 16px;
	background: var(--kn-muted); color: var(--kn-blue);
	font-family: 'Outfit', sans-serif; font-weight: 600;
	border-bottom: 2px solid var(--kn-border);
}
.kn-stations__table td {
	padding: 14px 16px; border-bottom: 1px solid var(--kn-border);
	color: var(--kn-blue); vertical-align: top;
}
.kn-stations__row { cursor: pointer; transition: background 0.12s; }
.kn-stations__row:hover { background: var(--kn-muted); }
.kn-stations__addr { color: var(--kn-grey); font-size: 13px; }
.kn-stations__note {
	margin: 0 0 16px; font-family: 'Outfit', sans-serif; font-weight: 600;
	font-size: 14px; letter-spacing: 0.4px; color: var(--kn-blue);
}
.kn-stations__note::before { content: '📍 '; }
.kn-stations__dist {
	display: inline-block; margin-left: 10px; padding: 2px 8px;
	border-radius: 999px; background: rgba(255, 128, 36, 0.14);
	color: var(--kn-orange); font-family: 'Outfit', sans-serif;
	font-weight: 600; font-size: 12px; white-space: nowrap; vertical-align: middle;
}
.kn-stations__empty { text-align: center; color: var(--kn-grey); padding: 40px 0; }
@media (max-width: 720px) {
	.kn-stations { padding: 56px 20px; }
	.kn-stations__map { height: 320px; }
	.kn-stations__table th, .kn-stations__table td { padding: 10px 8px; font-size: 14px; }
}

/* ==================================================================
   Service grid — "rich" tile variant
   When a tile has a 'features' array, it grows into a feature card
   with check-list + outlined CTA button (matches the Produkter page
   layout from Figma).
   ================================================================== */
.kn-tile--rich {
	height: auto;
	min-height: 320px;
	padding: 28px;
	gap: 0;
}
.kn-tile--rich .kn-tile__icon {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	background: var(--kn-orange);
	color: #fff;
	margin-bottom: 18px;
}
.kn-tile--rich .kn-tile__icon img {
	width: 32px;
	height: 32px;
	filter: brightness(0) invert(1);
}
.kn-tile--rich .kn-tile__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 22px;
	color: var(--kn-blue);
	margin: 0 0 12px;
	line-height: 1.2;
}
.kn-tile--rich .kn-tile__body {
	font-size: 15px;
	line-height: 1.55;
	color: var(--kn-blue);
	margin: 0 0 18px;
}
.kn-tile__features {
	list-style: none;
	padding: 0;
	margin: 0 0 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.kn-tile__features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--kn-blue);
}
.kn-tile__check {
	flex-shrink: 0;
	color: var(--kn-orange);
	margin-top: 2px;
}
.kn-tile__cta {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	border: 1.5px solid var(--kn-blue);
	border-radius: 8px;
	background: transparent;
	color: var(--kn-blue);
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.kn-tile__cta:hover,
.kn-tile__cta:focus-visible {
	background: var(--kn-orange);
	border-color: var(--kn-orange);
	color: #fff;
}
/* Rich tiles aren't fully-clickable (they have their own CTA button) — drop
   the stretched-link overlay so hovering the card doesn't suggest a single
   tap target. */
.kn-tile--rich .kn-tile__cta::before { content: none; }
.kn-tile--rich:hover { transform: none; box-shadow: none; border-color: var(--kn-border); }

/* ==================================================================
   Job listings — Ledige stillinger rich row cards
   ================================================================== */
.kn-jobs { padding: 80px 60px; background: var(--kn-muted); }
.kn-jobs__inner { max-width: 1320px; margin: 0 auto; }
.kn-jobs__head { max-width: 720px; margin: 0 0 32px; }
.kn-jobs__head h2 { color: var(--kn-blue); font-family: 'Outfit', sans-serif; font-size: 36px; margin: 0 0 12px; }
.kn-jobs__head p  { color: var(--kn-blue); font-size: 17px; line-height: 1.5; margin: 0; }
.kn-jobs__empty   { background: #fff; border: 1px dashed var(--kn-border); border-radius: 12px; padding: 32px; text-align: center; color: var(--kn-blue); font-size: 16px; }
.kn-jobs__list { display: flex; flex-direction: column; gap: 16px; }
.kn-job {
	background: #fff;
	border: 1px solid var(--kn-border);
	border-radius: 12px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kn-job:hover { border-color: var(--kn-orange); box-shadow: 0 4px 12px rgba(1, 66, 68, 0.06); }
.kn-job__summary {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 24px;
	align-items: center;
	padding: 24px 28px;
	cursor: pointer;
	list-style: none;
	color: var(--kn-blue);
}
.kn-job__summary::-webkit-details-marker { display: none; }
.kn-job__main { min-width: 0; }
.kn-job__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 128, 36, 0.12);
	color: var(--kn-orange);
	padding: 4px 12px;
	border-radius: 999px;
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 8px;
}
.kn-job__chip svg { flex-shrink: 0; }
.kn-job__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 22px;
	margin: 0 0 4px;
	color: var(--kn-blue);
}
.kn-job__meta { font-size: 14px; color: var(--kn-grey); margin: 0; }
.kn-job__deadline { text-align: right; min-width: 140px; }
.kn-job__deadline-label {
	display: block;
	font-family: 'Outfit', sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--kn-grey);
	margin-bottom: 2px;
}
.kn-job__deadline-date { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 16px; color: var(--kn-blue); }
.kn-job__chev {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--kn-muted);
	color: var(--kn-blue);
	transition: transform 0.2s ease, background 0.15s ease;
	flex-shrink: 0;
}
.kn-job[open] .kn-job__chev { transform: rotate(180deg); background: var(--kn-orange); color: #fff; }
.kn-job__body { padding: 0 28px 28px 28px; color: var(--kn-blue); font-size: 16px; line-height: 1.6; }
.kn-job__body p { margin: 0 0 12px; }
.kn-job__apply-cta {
	margin-top: 16px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 22px;
	background: var(--kn-orange);
	color: #fff;
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	border-radius: 8px;
}
.kn-job__apply-cta:hover { background: #e8731f; }

@media (max-width: 720px) {
	.kn-jobs { padding: 56px 20px; }
	.kn-jobs__head h2 { font-size: 28px; }
	.kn-job__summary {
		grid-template-columns: 1fr auto;
		gap: 12px;
		padding: 18px 18px 18px 18px;
	}
	.kn-job__deadline { grid-column: 1; text-align: left; min-width: 0; }
	.kn-job__chev { grid-row: 1 / span 2; grid-column: 2; align-self: start; }
	.kn-job__title { font-size: 18px; }
	.kn-job__body { padding: 0 18px 18px; }
}

/* ==================================================================
   Process steps — numbered "Slik gjør du …" list
   ================================================================== */
.kn-steps { padding: 0; background: transparent; }
.kn-steps__inner { max-width: 100%; }
.kn-steps__head { margin: 0 0 24px; }
.kn-steps__title { font-family: 'Outfit', sans-serif; font-size: 32px; color: var(--kn-blue); margin: 0 0 12px; }
.kn-steps__list {
	list-style: none;
	counter-reset: kn-steps;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.kn-steps__item {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 18px;
	align-items: flex-start;
}
.kn-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--kn-orange);
	color: #fff;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 18px;
}
.kn-steps__item-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 17px; color: var(--kn-blue); margin: 8px 0 4px; }
.kn-steps__item-body  { font-size: 15px; line-height: 1.5; color: var(--kn-blue); margin: 0; }

/* ==================================================================
   Application (SØKNAD) section — 1:1 Figma 396:493
   Outer band: cream/muted full bleed (Rectangle 157 — 1440×1266)
   Inner: 1320 max-width, 2-column grid (427 sidebar + 873 form, gap 20)
   Sidebar (Rectangle 74): white card with process steps + contact block
   Form (Rectangle 26): white card 873×867, 41px inner padding → 790 content
   ================================================================== */
.kn-application { padding: 96px 80px; background: var(--kn-muted); }
.kn-application__inner {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 427px 1fr;
	gap: 20px;
	align-items: stretch;
}
.kn-application__side {
	background: #fff;
	border-radius: 16px;
	padding: 40px;
	display: flex;
	flex-direction: column;
}
.kn-application__form-wrap {
	background: #fff;
	border-radius: 16px;
	padding: 41px;
}
.kn-application__contact { margin-top: auto; padding-top: 28px; }
.kn-application__contact h4 { font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--kn-blue); font-size: 18px; margin: 0 0 10px; }
.kn-application__contact a { color: var(--kn-orange); text-decoration: none; display: block; font-weight: 600; font-size: 16px; line-height: 1.5; }
.kn-application__contact a:hover { text-decoration: underline; }

@media (max-width: 960px) {
	.kn-application { padding: 56px 20px; }
	.kn-application__inner { grid-template-columns: 1fr; gap: 16px; }
	.kn-application__side, .kn-application__form-wrap { padding: 28px; }
}

/* ==================================================================
   Text band — simple centered eyebrow + headline + paragraph section
   (matches the "Hvorfor Knapphus" band in Figma)
   ================================================================== */
.kn-textband { padding: 64px 60px; background: #fff; }
.kn-textband__inner { max-width: 980px; margin: 0 auto; }
.kn-textband h2 { color: var(--kn-blue); font-family: 'Outfit', sans-serif; font-size: 40px; line-height: 1.15; margin: 8px 0 16px; }
.kn-textband p { color: var(--kn-blue); font-size: 18px; line-height: 1.6; margin: 0; max-width: 880px; }
@media (max-width: 720px) {
	.kn-textband { padding: 48px 20px; }
	.kn-textband h2 { font-size: 28px; }
	.kn-textband p { font-size: 16px; }
}

/* Application form header — the small intro above the form */
.kn-application__form-head { margin: 0 0 28px; }
.kn-application__form-head .kn-eyebrow { color: var(--kn-orange); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 6px; }
.kn-application__form-head h2 { color: var(--kn-blue); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 40px; margin: 0 0 12px; line-height: 1.15; }
.kn-application__form-head p  { color: var(--kn-blue); font-size: 16px; line-height: 1.55; margin: 0; }

/* ==================================================================
   Application form (native — drag-drop CV upload) — Figma 1:1
   Inputs: 50px tall, light grey background, 1px border, 8px radius.
   2-col rows for navn/telefon + email/linkedin (385+20+385 = 790).
   Stilling + CV + consent + submit span full width.
   Dropzone: 234px tall, dashed border, upload icon centered.
   Submit: orange pill, 218px wide, left-aligned (NOT full width).
   ================================================================== */
.kn-apply {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
	row-gap: 22px;
}
.kn-apply__row { display: flex; flex-direction: column; gap: 8px; }
.kn-apply__row--full { grid-column: 1 / -1; }
.kn-apply label {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--kn-blue);
	line-height: 1.3;
}
.kn-apply__req { color: var(--kn-orange); }
.kn-apply input[type="text"],
.kn-apply input[type="tel"],
.kn-apply input[type="email"],
.kn-apply input[type="url"],
.kn-apply select {
	width: 100%;
	box-sizing: border-box;
	height: 50px;
	padding: 0 16px;
	border: 1px solid var(--kn-border);
	border-radius: 8px;
	background: #f4f4f4;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	color: var(--kn-blue);
	appearance: none;
}
.kn-apply select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none' stroke='%23014244' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 44px;
}
.kn-apply input:focus,
.kn-apply select:focus {
	outline: none;
	border-color: var(--kn-orange);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(255, 128, 36, 0.18);
}

/* CV dropzone — Figma Rectangle 112 (790×234) */
.kn-apply__dropzone {
	position: relative;
	border: 2px dashed var(--kn-border);
	border-radius: 12px;
	background: #f4f4f4;
	min-height: 234px;
	padding: 32px 24px;
	text-align: center;
	transition: border-color 0.15s ease, background 0.15s ease;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.kn-apply__dropzone:hover,
.kn-apply__dropzone.is-dragover { border-color: var(--kn-orange); background: #fff; }
.kn-apply__file-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.kn-apply__dropzone-empty { color: var(--kn-blue); pointer-events: none; }
.kn-apply__dropzone-empty svg { color: var(--kn-orange); margin: 0 auto 14px; display: block; }
.kn-apply__dropzone-empty p { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.4; color: var(--kn-blue); }
.kn-apply__dropzone-empty p + p { margin-top: 8px; }
.kn-apply__hint { color: var(--kn-grey) !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; }
.kn-apply__hint .kn-apply__hint-em { color: var(--kn-orange); font-weight: 600; }
.kn-apply__dropzone-filled {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--kn-blue);
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
}
.kn-apply__dropzone-filled[hidden] { display: none; }
.kn-apply__dropzone-filled svg { color: var(--kn-orange); flex-shrink: 0; }
.kn-apply__dropzone-filled span[data-kn-dropzone-name] { flex: 1; text-align: left; word-break: break-all; font-weight: 500; }
.kn-apply__file-remove {
	border: 0;
	background: var(--kn-blue);
	color: #fff;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}

/* Consent — left-aligned, small text */
.kn-apply__consent { padding-top: 4px; }
.kn-apply__consent label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-weight: 400;
	font-size: 14px;
	font-family: 'Inter', sans-serif;
	color: var(--kn-blue);
	cursor: pointer;
	line-height: 1.55;
}
.kn-apply__consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--kn-orange); flex-shrink: 0; }

/* Submit button — 218×64 in Figma, orange pill, left-aligned */
.kn-apply__submit {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	background: var(--kn-orange);
	color: #fff;
	border: 0;
	padding: 18px 22px;
	width: 218px;
	max-width: 100%;
	height: 64px;
	border-radius: 10px;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 18px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
	align-self: flex-start;
}
.kn-apply__submit:hover { background: #e8731f; transform: translateY(-1px); }

/* Feedback banners */
.kn-apply__success,
.kn-apply__error {
	grid-column: 1 / -1;
	padding: 14px 18px;
	border-radius: 10px;
	font-size: 15px;
	font-family: 'Inter', sans-serif;
}
.kn-apply__success { background: rgba( 0, 128, 0, 0.08 ); border: 1px solid rgba( 0, 128, 0, 0.3 ); color: #0d5b2c; }
.kn-apply__error   { background: rgba( 207, 46, 46, 0.08 ); border: 1px solid rgba( 207, 46, 46, 0.3 ); color: #a02323; }

@media (max-width: 720px) {
	.kn-apply { grid-template-columns: 1fr; }
	.kn-apply__dropzone { min-height: 180px; padding: 24px 16px; }
}

/* ==================================================================
   Shopify collection block (server-rendered product grid)
   ================================================================== */
.kn-shopify { padding: 64px 60px; background: #fff; }
.kn-shopify__header { max-width: 1320px; margin: 0 auto 32px; }
.kn-shopify__title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 40px; color: var(--kn-blue); line-height: 1.1; margin: 0 0 12px; }
.kn-shopify__intro { color: var(--kn-blue); font-size: 18px; line-height: 1.55; margin: 0; max-width: 880px; }
.kn-shopify__grid {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(var(--kn-cols, 4), 1fr);
	gap: 20px;
}
.kn-shopify-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--kn-border);
	border-radius: 12px;
	background: #fff;
	text-decoration: none;
	color: var(--kn-blue);
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.kn-shopify-card:hover {
	border-color: var(--kn-orange);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
.kn-shopify-card.is-sold-out { opacity: 0.65; }
.kn-shopify-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--kn-muted);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.kn-shopify-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	padding: 10px;
	box-sizing: border-box;
}
.kn-shopify-card__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: var(--kn-blue);
	color: #fff;
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
}
.kn-shopify-card__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
	margin: 0;
	color: var(--kn-blue);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kn-shopify-card__price {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: var(--kn-orange);
	margin: 0;
}
.kn-shopify-card__from {
	color: var(--kn-grey);
	font-weight: 400;
	font-size: 14px;
}
.kn-shopify__cta {
	max-width: 1320px;
	margin: 32px auto 0;
	text-align: center;
}
.kn-shopify__notice {
	max-width: 1320px;
	margin: 0 auto;
	padding: 16px 20px;
	background: var(--kn-muted);
	border-radius: 10px;
	color: var(--kn-blue);
	font-size: 14px;
}
.kn-shopify__editor-placeholder {
	max-width: 1320px;
	margin: 0 auto;
	padding: 24px;
	border: 2px dashed var(--kn-border);
	border-radius: 10px;
	color: var(--kn-grey);
	font-family: 'Inter', sans-serif;
	text-align: center;
}

@media (max-width: 1024px) {
	.kn-shopify__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
	.kn-shopify { padding: 48px 20px; }
	.kn-shopify__title { font-size: 28px; }
	.kn-shopify__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 420px) {
	.kn-shopify__grid { grid-template-columns: 1fr; }
}

/* Shopify collection search bar */
.kn-shopify__searchbar {
	position: relative;
	max-width: 560px;
	margin: 0 auto 28px;
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid var(--kn-border);
	border-radius: 999px;
	padding: 0 18px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kn-shopify__searchbar:focus-within {
	border-color: var(--kn-orange);
	box-shadow: 0 0 0 3px rgba(255, 128, 36, 0.18);
}
.kn-shopify__searchbar-icon {
	color: var(--kn-blue);
	flex-shrink: 0;
	margin-right: 10px;
	opacity: 0.7;
}
.kn-shopify__searchbar-input {
	flex: 1;
	height: 48px;
	border: 0;
	background: transparent;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	color: var(--kn-blue);
	outline: none;
	padding: 0;
}
.kn-shopify__searchbar-input::placeholder { color: var(--kn-grey); }
.kn-shopify__searchbar-status {
	color: var(--kn-grey);
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	flex-shrink: 0;
	margin-left: 12px;
	white-space: nowrap;
}
.kn-shopify__grid.is-empty {
	display: block;
	text-align: center;
	color: var(--kn-grey);
	font-style: italic;
	padding: 32px 0;
}
@media (max-width: 720px) {
	.kn-shopify__searchbar { max-width: none; }
	.kn-shopify__searchbar-status { display: none; }
}