/* =========================================================
	ROOT / DESIGN SYSTEM
	========================================================= */

:root{

	/* -------------------------
		Layout variables
		------------------------- */

	--side-card-w: 197px;
	--side-card-h: 102px;
	--side-card-radius: 25px;
	--side-card-border: 1px;

	--tab-w: 26px;
	--tab-border-color: #ccc;
	--tab-radius: 10px;

	/* -------------------------
		Typography
		------------------------- */

	--font-ui:
		system-ui,
		-apple-system,
		Segoe UI,
		Roboto,
		Helvetica,
		Arial,
		sans-serif;

	--font-classic:
		Verdana,
		Tahoma,
		Segoe UI,
		sans-serif;

	/* -------------------------
		Menu system
		------------------------- */

	--menu-h: 102px;
	--menu-overlap: 66px;
	--menu-visible: calc(var(--menu-h) - var(--menu-overlap));

	--menu-w: 177px;
	--menu-radius: 25px;
	--menu-mobile-radius: 20px;
	--menu-border: 2px;

	--fade-ms: 250ms;
	--toggle-offset: -8px;
	--menu-slide: calc(var(--menu-h) + var(--toggle-offset));

	/* animation */
	--over: 8px;
	--bounce: 10px;
	--dur: 680ms;

	/* -------------------------
		Spacing scale
		------------------------- */

	--space-2xs: 4px;
	--space-xs: 8px;
	--space-sm: 12px;
	--space-md: 18px;
	--space-lg: 24px;
	--space-xl: 34px;
	--space-2xl: 48px;

	/* -------------------------
		Shadows
		------------------------- */

	--shadow-sm: 0 2px 6px rgba(0,0,0,0.08);
	--shadow-md: 0 6px 16px rgba(0,0,0,0.12);
	--shadow-lg: 0 12px 28px rgba(0,0,0,0.18);

	/* -------------------------
		Colors
		------------------------- */

	--color-text: #222;
	--color-text-muted: #555;

	--color-primary: #8b1f1f;
	--color-primary-soft: #efe4e4;

	--color-border: #d8d8d8;
	--color-bg-soft: #f2f2f2;
	--color-bg-hover: #f6e9e9;

	/* -------------------------
		Extended colors (states / usage)
		------------------------- */

	--color-primary-strong: #993333;
	--color-primary-hover: #7d2f2a;

	--color-text-dark: #333;
	--color-text-mid: #666;
}

/* =========================================================
	BASE
	========================================================= */

#cpp-viewport{
	min-height: 100vh;
	background: transparent;
    overflow: hidden;
    padding: 12px;
}

ul { margin: 5px 0 0 0; }
li { list-style-position: outside; }

a{
	font-family:var(--font-classic);
	font-size: 1rem;
	color: var(--color-primary);
	font-weight: bold;
	text-decoration: none;
	text-underline-offset: 2px;
}
a:hover{ text-decoration: underline; }

.textBox{
	font-weight: bold;
	background-color: #fff;
	border-width: 1px;
	border-color: var(--color-text-mid);
	font-size: 11px;
	color: var(--color-primary-strong);
}

/* -------------------------
	Reset
	------------------------- */

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

/* -------------------------
	Document
	------------------------- */

html,
body {
	height: 100%;
	margin: 0;
	background-color: var(--color-text-dark);
	font-size: 16px;
	font-family:var(--font-ui);

	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

/* =========================================================
	BASE / TYPOGRAPHY
	========================================================= */

body {
    hyphens: manual;           /* Blockera automatiska svenska brytpunkter */
    overflow-wrap: break-word; /* Säkerhet mot overflow */
    word-break: normal;        /* Viktigt: återställ till normalt beteende */
}

/* Den kritiska content-arean */
.cpp-content-body {
    padding: 0 24px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    word-wrap: break-word;     /* alias för overflow-wrap */
    overflow-wrap: break-word;
    word-break: normal;        /* ← NYTT / VIKTIGT */
    hyphens: manual;           /* ← ÄNDRA från auto till manual */
}

/* Alla vanliga text-element – lägg till en gemensam regel */
.bodyText,
.project-item .content,
.contact-item,
.company-info p,
p,
span.text-content,          /* egna klasser */
h1, h2, h3,
.cpp-scroll {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;           /* styr brytning manuellt med ­ */
    line-height: 1.5;          /* behåll befintlig */
}

/* Specifika undantag om du vill ha aggressivare brytning någonstans */
.cpp-content-body.long-word-allowed {
    hyphens: auto;             /* bara för att testa auto på vissa sidor */
    hyphenate-limit-chars: 8 3 2;  /* minst 8 tecken totalt, 3 före + 2 efter bindestreck */
}

/* =========================================================
	TYPOGRAPHY
	========================================================= */

.cpp-footer,
.cpp-breadcrumb{
	text-align: center;
	white-space: normal;
	word-break: break-word;
}

/* -------------------------
	Text styles
	------------------------- */

h1 { font-family:var(--font-classic); font-size: 1.8rem; color: #000; }
h2 { font-family:var(--font-classic); font-size: 1.35rem; color: #000; }
h3 { font-family:var(--font-classic); font-size: 1.15rem; color: #000; }

.headerText { font-family:var(--font-classic); font-size: 1.4rem; color: #000; }
.bodyText   { font-family:var(--font-classic); font-size: 1rem; line-height: 1.5; color: var(--color-text); }

.bodyText ul {
	padding-left: 1.5rem; 
}

.bodyText li {
	margin-bottom: 0.65rem;
	line-height: 1.5;
}

p + ul {
  margin-top: -8px;
}

ul + p {
  margin-top: 24px;
}

/* -------------------------
	Meta text (top/footer)
	------------------------- */

.topText,
.topLink{
	font-family:var(--font-classic);
	font-size: 0.8rem;
	color: var(--color-text-mid);
	font-weight: bold;
	text-decoration: none;
	line-height: 1.4;
}

.topLink:hover{ text-decoration: underline; }

/* =========================================================
	INTERACTIONS / UTILITIES
	========================================================= */

/* -------------------------
	Click + touch
	------------------------- */

a,
button,
.m2-toggle,
.menu-btn,
.cpp-tab{
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	touch-action: manipulation;
}

/* -------------------------
	Transitions
	------------------------- */

a,
button,
.cpp-card{
	transition: 
		color 0.15s ease,
		background 0.15s ease,
		border-color 0.15s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

/* =========================================================
	LAYOUT
	========================================================= */

/* =========================================
   HERO IMAGE – SMART CROP SYSTEM
========================================= */

.cpp-hero{
	position: relative;
	width: 100%;
	overflow: hidden;

	/* Mobil: exakt 16:9 */
	aspect-ratio: 16 / 9;
}

.cpp-hero::after{
	content:"";
	position:absolute;
	inset:0;

	background: linear-gradient(
		to bottom,
		rgba(0,0,0,0.08) 0%,
		rgba(0,0,0,0.18) 100%
	);

	pointer-events:none;
}

.cpp-hero img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	display: block;

	opacity: 0;
	transform: scale(1.04);

	transition:
		opacity .4s ease,
		transform 1.2s ease;
}

.cpp-hero.is-visible img{
	opacity: 1;
	transform: scale(1);
}

.cpp-scroll{
	line-height:1.4;
	font-size:1.02rem;
	z-index:10;
}

.cpp-separator{
	width: 100%;
	height: 4px;
	background: linear-gradient(to right, #ffffff 0%, #c24a44 50%, #ffffff 100%);
}

#cpp-global-logo{
	position: fixed;
	inset: 0;

	background-image: url("/images/cpp_logo.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;

	opacity: 0;
	transition: opacity 0.6s ease;
	filter: grayscale(50%);

	z-index: 2;
	pointer-events: none;
}

body.loaded #cpp-global-logo {
	opacity: 0.35;
}

.addressCompany{ font-weight:bold; font-size:18px; }
.addressCity{ font-style:normal; font-size:14px; }

.cpp-content-body{
	padding: 0 24px 16px;
	overflow-x:hidden;
	overflow-y:auto;
	word-wrap:break-word;
	hyphens:auto;
}

/* -------------------------
	Core containers
	------------------------- */

#cpp-stage{
	position: relative; /* viktigt */
}

#cpp-white-base{
	background:#fff;
	z-index:1;
	pointer-events:none;
}

/* -------------------------
	Content wrapper
	------------------------- */

.cpp-content{
	background:transparent;

	/* struktur */
	display:flex;
	flex-direction:column;

	/* visuellt neutralt */
	border:none;
	border-radius:0;
	box-shadow:none;

	overflow:visible;
	z-index:3;

	transition: box-shadow 0.2s ease;
}

/* right white tab mask */
.cpp-content::after{
	content:"";
	display:block;
}

.cpp-content-inner{
	display:flex;
	flex-direction:column;

	padding: 0;

	height:auto;
	min-height:0;

	overflow:visible;
}

/* -------------------------
	Scroll system
	------------------------- */

/* scroll container */
#contentFrameHolder.cpp-scroll{
	border:1px solid var(--tab-border-color);

	background:rgba(255,255,255,0.88);

	box-shadow:
		inset 0 0 0 1px rgba(0,0,0,0.06),
		inset 0 0 8px rgba(0,0,0,0.08);
}

#contentFrameHolder{
	overflow-x:hidden;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--color-primary-strong) transparent;
}

#contentFrameHolder::-webkit-scrollbar{
	width:10px;
}

#contentFrameHolder::-webkit-scrollbar-track{
	background: transparent;
}

#contentFrameHolder::-webkit-scrollbar-thumb{
	background:
		linear-gradient(
			to bottom,
			#b44a4a,
			var(--color-primary-strong)
		);
	border-radius:6px;
	border:2px solid transparent; /* luft */
	background-clip: padding-box;
}

#contentFrameHolder::-webkit-scrollbar-thumb:hover{
	background: var(--color-primary-hover);
}

/* =========================================================
	COMPONENTS
	========================================================= */

/* ---------------------------------------------------------
	Core components
	--------------------------------------------------------- */

/* Kort */
.cpp-card{
	width: var(--side-card-w);
	height: var(--side-card-h);
	border: var(--side-card-border) solid #000;
	border-radius: 0;
	border-top-right-radius: var(--side-card-radius);
	border-bottom-right-radius: var(--side-card-radius);
	background: #fff;
	overflow: hidden;
}

/* Kort (adress) */
.cpp-address{
	position: absolute;
	left: 0;
	top: calc(100% - var(--side-card-h) - 20px);
	width: var(--side-card-w);
	height: var(--side-card-h);
	z-index: 5;
}

.cpp-address .cpp-address-card{
	width: var(--side-card-w);
	height: var(--side-card-h);

	background: linear-gradient(to right, #f3f3f3 0%, #ffffff 65%);
	border: 1px solid #d0d0d0;

	box-shadow: 0 6px 14px rgba(0,0,0,0.14);

	border-radius: 0;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;

	/* viktig ändring */
	padding: 10px 14px;

	line-height: 1.15;

	border-left: 3px solid var(--color-primary-strong);
}

.cpp-address-inner{
	padding: 3px 5px;
	color: #111;

	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.cpp-address-inner div{
	margin-bottom: 2px;
}

.cpp-address-title{
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.2px;
	margin-bottom: 2px;
}

.cpp-address-city{
	font-size: 12.5px;
	color: #666;
	margin-bottom: 4px;
}

.cpp-address-city::after{
	content: "";
	display: block;
	height: 1px;
	background: #e5e5e5;
	margin-top: 5px;
}

.cpp-address-mail,
.cpp-address-web{
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.25;
}

.cpp-address-mail{
	letter-spacing: 0.1px;
}

.cpp-address-web span{
	color: var(--color-primary-strong);
}

/* ---------------------------------------------------------
	Content
	--------------------------------------------------------- */

.tjanster-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 1.75rem;
	margin: 2.5rem 0 2rem 0;
}

.tjanst-kort {
	display: block;
	background: #ffffff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: all 0.35s ease;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
	height: 100%;
}

.tjanst-kort:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
	border-color: var(--color-primary-strong);
}

.tjanst-kort,
.tjanst-kort:hover,
.tjanst-kort:focus,
.tjanst-kort * {
	text-decoration: none !important;
}

.tjanst-bild {
	height: 145px;
	background-size: cover;
	background-position: 50% 15%;
	position: relative;
	overflow: hidden;
}

.tjanst-bild::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(0,0,0,0.30));
	z-index: 1;
	pointer-events: none;
}

.tjanst-bild::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.40));
	z-index: 2;
	opacity: 1;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.tjanst-kort:hover .tjanst-bild::before {
	opacity: 0;
}

.tjanst-innehall {
	padding: 1.5rem 1.5rem 2rem;
	position: relative;
}

.tjanst-innehall h3 {
	color: #1f1f1f;
	font-size: 1.38rem;
	font-weight: 600;
	margin: 0 0 0.85rem 0;
	line-height: 1.25;
}

.tjanst-innehall p {
	color: #6b6b6b;
	font-size: 0.95rem;
	line-height: 1.68;
	margin-bottom: 0;
}

.kort-pil {
	position: absolute;
	bottom: 1.6rem;
	right: 1.65rem;
	font-size: 1.35rem;
	color: #c1272d;
	opacity: 0;
	transform: translateX(-8px);
	transition: all 0.35s ease;
	pointer-events: none;
}

.tjanst-kort:hover .kort-pil {
	opacity: 1;
	transform: translateX(0);
}

.tjanst-innehall {
	padding: 1.65rem 1.65rem 2.2rem;
	position: relative;
}

@media (max-width: 760px) {
	.tjanster-grid {
		gap: 1.5rem;
		margin: 2rem 0 1.5rem 0;
	}
  
	.tjanst-kort {
		margin: 0 -15px;
	}
  
	.tjanst-bild {
		height: 135px;
		background-position: 50% 12%;
	}
  
	.tjanst-innehall {
		padding: 1.4rem 1.25rem 1.7rem;
	}
}

.tjanster-lista {
	list-style: disc;
	padding-left: 1.4rem;
	margin-top: 1.2rem;
}

.tjanster-lista li {
	margin-bottom: 1.8rem;
	padding-left: 0.3rem;
}

.tjanster-lista strong {
	color: #1f1f1f;
	font-size: 1.1rem;
}

.tjanster-lista p {
	color: #555;
	line-height: 1.65;
	margin: 0.4rem 0 0.6rem 0;
}

.tjanst-lankar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 2rem;
	margin-top: 0.4rem;
}

.tjanst-lankar a {
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
}

.tjanst-lankar a:hover {
	text-decoration: underline;
}

@media (max-width: 480px) {
	.tjanst-lankar {
		gap: 0.2rem 1.8rem;
	}
}

.company-info {
	max-width: 420px;
	margin: 40px auto;
	padding: 20px;
	background-color: rgba(255,255,255,0.5);
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	text-align: center;
}

.company-info h3 {
	margin-bottom: 25px;
}

.company-info .columns-container {
	display: inline-flex;
	gap: 20px;
	text-align: left;
}

.company-info .left-column {
	text-align: right;
	white-space: nowrap;
}

.company-info .right-column {
	text-align: left;
}

.company-info p {
	margin: 10px 0;
	font-size: 1rem;
	line-height: 1.4;
}

/* ---------------------------------------------------------
	Content cards
	--------------------------------------------------------- */

/* TVÅ KOLUMNER DESKTOP
.project-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 40px;
	margin: 60px auto;
	max-width: 1200px;
	padding: 0 16px;
} */

.project-container {
	display: flex;
	flex-direction: column;
	gap: 36px;
	margin: 40px auto;
	max-width: 760px;
	padding: 0 12px;
}

.project-item {
	background: #fff;
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	transition: transform .25s ease, box-shadow .25s ease;
}

.project-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

.project-item img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	margin-top: 18px;
	margin-bottom: 18px;
	display: block;
}

.project-item h3 {
	font-size: 1.4rem;
	margin: 10px 0 6px;
	font-weight: 600;
}

.project-item h4 {
	margin: 4px 0;
	font-weight: 400;
	color: var(--color-text-mid);
}

.project-item p {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #444;
	margin-top: 14px;
}

.project-item h4 i {
	font-style: italic;
	color: #888;
}

.project-item hr {
	width: 60px;
	border: none;
	border-top: 2px solid #ddd;
	margin: 14px auto;
}

.project-item .content {

	line-height: 1.6;
	color: var(--color-text);
	font-size: 1rem;

}

.project-item .content p {

	margin-bottom: 1.2rem;

}

.project-item .content .tech {

	background-color: #f5f7f9;
	border-left: 4px solid #3a6ea5;
	padding: 0.8rem 1rem;
	margin: 1.5rem 0;

	font-size: 0.9rem;
	color: var(--color-text-dark);

}

.project-item .content .highlights {

	background-color: #fafafa;
	border: 1px solid #ddd;
	border-radius: 4px;

	padding: 1rem 1.2rem;
	margin-top: 1.5rem;

}

.project-item .content .highlights strong {

	display: block;
	margin-bottom: 0.6rem;

	font-size: 0.95rem;
	color: #111;

}

.project-item .content .highlights ul {

	margin: 0;
	padding-left: 1.2rem;

}

.project-item .content .highlights li {

	margin-bottom: 0.4rem;

	font-size: 0.95rem;
	color: var(--color-text-dark);

}

/* ---------------------------------------------------------
	Contact cards
	--------------------------------------------------------- */

.contact-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;

	max-width: 1200px;
	margin: 10px auto 40px;
}

.contact-item {
	background: #fff;
	max-width: 320px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: rgba(255,255,255,0.5);
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}

.contact-item img {
	width: 100%;
	aspect-ratio:1 / 1;
	object-fit: contain;
	border-radius:8px;
	margin-top:18px;
	margin-bottom:18px;
	display: block;
	filter: grayscale(40%);
	transition: filter .25s ease;
}

.contact-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

.contact-item:hover img{
	filter: grayscale(0%);
}

/* Rubriker */
.contact-item h3 {
	font-size:1.3rem;
	font-weight:600;
	margin:12px 0 4px 0;
	text-align: center;
	color: var(--color-text-dark);
}

.contact-item h4 {
	margin:4px 0;
	padding-bottom: 10px;
	text-align: center;
	border-bottom: 1px solid #eee;
	color:var(--color-text-mid);
	font-weight:400;
}

.contact-item hr{
	width:60px;
	border:none;
	border-top:2px solid #ddd;
	margin:14px auto;
}

/* Footer som sitter FAST I BOTTON */
.contact-item .buttonContainer{
	margin-top: auto;
	display: flex;
	flex-direction: column;

	padding: 0;
}

/* Gemensam knappstil */
.contact-item .read-more-btn,
.contact-item .vCard-button{
	display: block;
	width: 100%;
	margin: 0;
	padding: 12px 0;

	font-family:var(--font-classic);
	font-size: 1rem;
	font-weight: bold;

	text-align: center;
	text-decoration: none;
	cursor: pointer;

	background-color: #ffffff;
	color: var(--color-primary-strong);

	border: none;
	border-radius: 0;

	transition: background-color 160ms ease, color 160ms ease;
}

/* Hover – CPP-röd */
.contact-item .read-more-btn:hover,
.contact-item .vCard-button:hover{
	background-color: var(--color-primary-strong);
	color: #ffffff;
	text-decoration: none;
}

/* Aktiv */
.contact-item .read-more-btn:active,
.contact-item .vCard-button:active{
	background-color: var(--color-primary-hover);
}

/* Endast NEDERSTA knappen rundas */
.contact-item .vCard-button{
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

.contact-item a{
	display:block;
	text-align:center;
	margin:3px 0;

	font-weight:bold;
	color:var(--color-primary-strong);
	text-decoration:none;

	white-space:normal;
	overflow-wrap:anywhere;
	word-break:break-word;
}

.contact-item a:hover {
	text-decoration: underline;
	/* color: #0070c0; */
}

.contact-item a[href^="tel:"] {
	font-weight: normal;
	color: var(--color-text-muted);
	text-decoration: none;
	cursor: default;
	pointer-events: none;   /* gör den oklickbar */
}

.contact-item a[href^="mailto:"] {
	display: inline-block;
	margin-bottom: 12px;
}

/* ---------------------------------------------------------
	Form
	--------------------------------------------------------- */

.contact-form{
	max-width:690px;
	margin:0 auto;

	padding:16px;

	border-radius:8px;
	border:1px solid var(--color-border);

	background:rgba(255,255,255,0.55);
	box-shadow:0 4px 8px rgba(0,0,0,0.12);
}

/* Grid layout*/
.contact-form .form-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px 14px;
}


/* textarea + button full width */
.contact-form .form-field--full{
	grid-column:1 / -1;
}

/* Labels */
.contact-form .form-field label{
	display:inline-block;
	margin:2px 0 6px 3px;
	color:var(--color-text-dark);
	font-weight:600;
}

/* Input fields */
.contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.contact-form textarea,
.contact-form select{

	font-family:var(--font-classic);
	font-size:1rem;

	padding:10px;

	border:1px solid #ccc;
	border-radius:4px;

	background:rgba(255,255,255,0.65);
	color:#000;

	outline:none;

	width:100%;
	min-width:0;

	transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

/* Input hover */
.contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.contact-form textarea:hover{
	border-color:var(--color-primary-hover);
}

/* Input focus */
.contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.contact-form textarea:focus{

	border-color:var(--color-primary-strong);

	box-shadow:0 0 4px rgba(153,51,51,0.35);

	background:#fff;
}

/* Disabled inputs */
.contact-form input:disabled,
.contact-form textarea:disabled{

	background:#e9e9e9 !important;
	color:var(--color-text-mid) !important;

	border-color:#d0d0d0;

	cursor:not-allowed;

	opacity:1; /* viktigt – annars gör browser dem halvtransparenta */
}

/* disabled hover */
.contact-form input:disabled:hover,
.contact-form textarea:disabled:hover{
	border-color:#ccc !important;
}

/* TEXTAREA */
.contact-form textarea{
	min-height:110px;
	max-height:70vh;
	resize:vertical;
}

/* BUTTON */
.sendButton{
	width:100%;

	border:none;
	padding:10px;

	font-family:var(--font-classic);
	font-size:16px;
	font-weight:bold;

	border-radius:5px;

	transition:background-color .2s, color .2s, box-shadow .2s;
}

/* Normal */
.sendButton:not([disabled]){
	background:#f0f0f0;
	color:var(--color-primary-strong);
	cursor:pointer;
}

/* Disabled */
.sendButton[disabled]{
	background:#ccc;
	color:#fff;
}

/* Hover */
.sendButton:not([disabled]):hover{
	background:var(--color-primary-hover);
	color:#fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}

/* Button spacing */
.contact-form .form-actions{
	padding-top:6px;
}

/* ---------------------------------------------------------
	Navigation / meta
	--------------------------------------------------------- */

.cpp-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 6px;
	font-family:var(--font-ui);
	line-height: 1.3;
	color: var(--color-text-muted);
	background: #fff;
	text-align: center;
	overflow: visible;
	text-decoration: none;
}

.cpp-breadcrumb a,
.cpp-breadcrumb .is-active{
	font-size:0.75rem;
	font-weight:600;

	display:inline-flex;
	align-items:center;
	justify-content:center;

	padding:3px 10px;

	background: var(--color-bg-soft);
	border:1px solid var(--color-border);
	color: var(--color-text);
	border-radius:12px;

	line-height:1.2;

	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.cpp-breadcrumb a:hover{
	background: var(--color-bg-hover);
	border-color:#d7b3b3;
	color: var(--color-primary);
	text-decoration: none;
}

.cpp-breadcrumb .is-active{
	background: var(--color-primary-soft);
	border-color:#d0a4a4;
	color: var(--color-primary);
	cursor:default;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

/* Footer */
.cpp-footer {
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--font-ui);
	font-size: 0.8rem;
}

/* ---------------------------------------------------------
	UI elements
	--------------------------------------------------------- */

.cpp-to-top{
	margin-left:auto;
	visibility:hidden;
}

#toTop {

	position: fixed;

	left: 50%;

	transform: translateX(-50%) translateY(-100%);

	background-color: rgba(245, 245, 245, 0.9);
	color: var(--color-primary-strong);

	padding: 15px 20px 0 20px;

	border-radius: 5px;
	text-decoration: none;

	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

	transition: transform 0.3s ease-in-out,
	            opacity 0.3s ease-in-out,
	            left 0.2s ease;

	font-size: 36px;

	opacity: 0;
	pointer-events: none;

	z-index: 9999;
}

#toTop.visible {

	transform: translateX(-50%) translateY(0);
	opacity: 1;
	pointer-events: auto;

}

#toTop:hover {

	background-color: var(--color-primary-strong);
	color: #fff;

}

/* ---------------------------------------------------------
	Cookie / analytics banner
	--------------------------------------------------------- */

#cpp-cookie-banner{
	position: fixed;
	left: 50%;
	bottom: 52px;
	transform: translateX(-50%);

	/* width: clamp(320px, 85vw, 520px); */
	width: min(520px, 90vw);

	background: #fff;
	border: 2px solid #000;
	border-radius: 18px;

	box-shadow: 0 10px 30px rgba(0,0,0,0.18);

	padding: 12px 16px;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;

	font-family:var(--font-classic);
	font-size: 0.85rem;
	color: var(--color-text-dark);

	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	
	cursor: default;

	transition:
		opacity 220ms ease,
		transform 220ms ease,
		box-shadow 220ms ease;
}

#cpp-cookie-banner:hover{
	transform: translateX(-50%) translateY(-4px);
	box-shadow: 0 18px 40px rgba(0,0,0,0.22);
}

#cpp-cookie-banner.visible{
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

#cpp-cookie-banner .cpp-cookie-text{
	flex: 1;
	line-height: 1.4;
}

#cpp-cookie-banner .cpp-cookie-btn{
	background: var(--color-primary-strong);
	color: #fff;
	border: none;
	border-radius: 999px;

	padding: 6px 16px;

	font-weight: bold;
	font-size: 0.8rem;
	cursor: pointer;

	transition:
		background-color 160ms ease,
		transform 120ms ease,
		box-shadow 160ms ease;
}

#cpp-cookie-banner .cpp-cookie-btn:hover{
	background: var(--color-primary-hover);
	box-shadow: 0 6px 14px rgba(0,0,0,0.18);
	transform: translateY(-1px);
}

#cpp-cookie-banner .cpp-cookie-btn:active{
	transform: scale(0.94);
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Liten initial "attention pulse" */
@keyframes cppCookiePulse{
	0%{ transform: scale(1); }
	40%{ transform: scale(1.06); }
	70%{ transform: scale(0.98); }
	100%{ transform: scale(1); }
}

#cpp-cookie-banner.visible .cpp-cookie-btn{
	animation: cppCookiePulse 420ms ease-out 0.4s 1;
}

/* ---------------------------------------------------------
	System (logo, etc)
	--------------------------------------------------------- */

.cpp-logo{
	position:relative;

	z-index:2000;
	width:var(--side-card-w);
	height:var(--side-card-h);
}

.cpp-logo .cpp-logo-card{
	position: relative;
	width: var(--side-card-w);
	height: var(--side-card-h);

	background: linear-gradient(to right, #f3f3f3 0%, #ffffff 65%);
	border: 1px solid #d0d0d0;

	box-shadow: 0 6px 14px rgba(0,0,0,0.14);

	border-radius: 0;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;

	/* subtil koppling till adresskort */
	border-left: 3px solid var(--color-primary-strong);

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	overflow: hidden;

	box-shadow: 0 8px 14px rgba(0,0,0,0.18);
}

.cpp-logo .cpp-logo-link{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	text-decoration:none;
	color:inherit;
	z-index:1;
}

.cpp-logo .logo-inner{
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	width:100% !important;
	height:100% !important;
}

.cpp-logo .logo-inner img{
	max-width:180px;
	width:100%;
	height:auto;
	display:block;

	transform:scale(0.96);
	transform-origin: center center;

	transition:transform 220ms cubic-bezier(.25,.46,.45,.94);
	will-change:transform;
}

.is-home .cpp-logo a{
	cursor: pointer;
}

.is-home .cpp-logo a::after{
	content: "";
	position: absolute;
	inset: 0;
}

/* hover */
@media (hover:hover){
	body:not(.is-home) .cpp-logo:hover .logo-inner img{
		transform: scale(1.00) translateY(-1px);
	}
}

/* click */
.cpp-logo:active .logo-inner img,
body:not(.is-home) .cpp-logo:hover:active .logo-inner img{
	transform: scale(0.92) translateY(1px);
}

/* ---------------------------------------------------------
	System (tabs)
	--------------------------------------------------------- */

/* -------------------------
	Layout
	------------------------- */
   
.cpp-tabs{
	position:absolute;
	left:0;
	top:34px;
	bottom:34px;
	width:30px;

	display:flex;
	flex-direction:column;
	align-items:flex-end;

	background:#fff;
	z-index:50;

	box-shadow:
		3px 0 8px rgba(0,0,0,0.08),
		1px 0 0 rgba(0,0,0,0.04);
}

.cpp-tab{
	position:relative;
	z-index:51;

	background:#e3e3e3;
	margin:0;

	border-left:1px solid var(--tab-border-color);
	border-right:1px solid #ddd;
	border-bottom:1px solid var(--tab-border-color);

	display:flex;
	align-items:center;
	justify-content:center;

	min-height:24px;
	padding:2px 0;

	right:-1px;
}

/* Active indicator (vänster linje) */
.cpp-tab::after{
	content:"";
	position:absolute;
	left:0;
	top:0;
	bottom:0;

	width:0;
	background:#993333;

	transition: 
		width 220ms ease,
		background 180ms ease;
}

.cpp-tab:not(.is-active):hover::after{
	width:2px;
	background:#c05050; /* lite ljusare röd */
}

.cpp-tab:hover{
	background: var(--color-bg-hover);
}

/* ---------------------------------------------------------
	Tabs animation - grow from edge
	--------------------------------------------------------- */

/* -------------------------
	Base (start-state)
	------------------------- */

.cpp-tab{
	opacity:0;
	pointer-events:none;

	width:0;
	overflow:hidden;

	transform-origin: right center;

	transform: translateX(4px);

	transition:
		width 420ms cubic-bezier(.34,1.56,.64,1),
		opacity 180ms ease;
}

/* -------------------------
	Ready state
	------------------------- */

.cpp-tabs.tabs-ready .cpp-tab{
	opacity:1;
	pointer-events:auto;

	width:var(--tab-w);

	transform: translateX(0);
}

/* -------------------------
	Active tab (fallback + style)
	------------------------- */

.cpp-tab.is-active{
	background: linear-gradient(to right, #dcdcdc 0%, #ffffff 100%);
	box-shadow:	inset 0 2px 4px rgba(0,0,0,0.08);
	z-index: 60;

	cursor:default;
	border-right:0;
	width:var(--tab-w);
}

.cpp-tab.is-active::after{
	width:3px;
	background:#993333;
	transition: width 260ms cubic-bezier(.34,1.56,.64,1);
}

/* -------------------------
	Active animation (leader)
	------------------------- */

.cpp-tabs.tabs-ready .cpp-tab.is-active{
	transition-delay: 0ms !important;
	animation: cppTabPop 420ms cubic-bezier(.34,1.56,.64,1);
}

@keyframes cppTabPop{
	0%   { width:0; }
	70%  { width:calc(var(--tab-w) + 2px); }
	100% { width:var(--tab-w); }
}

/* -------------------------
	Stagger
	------------------------- */

.cpp-tabs.tabs-ready .cpp-tab:nth-child(1){ transition-delay: 80ms; }
.cpp-tabs.tabs-ready .cpp-tab:nth-child(2){ transition-delay: 160ms; }
.cpp-tabs.tabs-ready .cpp-tab:nth-child(3){ transition-delay: 240ms; }
.cpp-tabs.tabs-ready .cpp-tab:nth-child(4){ transition-delay: 320ms; }
.cpp-tabs.tabs-ready .cpp-tab:nth-child(5){ transition-delay: 400ms; }
.cpp-tabs.tabs-ready .cpp-tab:nth-child(6){ transition-delay: 480ms; }
.cpp-tabs.tabs-ready .cpp-tab:nth-child(7){ transition-delay: 560ms; }
.cpp-tabs.tabs-ready .cpp-tab:nth-child(8){ transition-delay: 640ms; }

/* active ALWAYS first */
.cpp-tabs.tabs-ready .cpp-tab.is-active{
	transition-delay: 0ms !important;
}

/* -------------------------
	Disable animation after load
	------------------------- */

.cpp-tabs.tabs-initialized .cpp-tab{
	transition: none !important;
	animation: none !important;
}

/* -------------------------
	Reset styling
	------------------------- */

.cpp-tab:first-child{
	border-top:1px solid var(--tab-border-color);
	border-top-left-radius:var(--tab-radius);
}

.cpp-tab:not(.is-active){
	cursor:pointer;
}

.cpp-tab:not(.is-active):hover{
	background:#f7f7f7;
	box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.cpp-tab-rot{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%) rotate(-90deg);
	transform-origin:center;

	white-space:nowrap;
	pointer-events:none;
}

.cpp-tab-label{
	font-family:var(--font-ui);
	font-size:.85rem;
	font-weight:600;
	line-height:1.05;
	letter-spacing:.04em;
	user-select:none;
}

.cpp-tab.is-active .cpp-tab-label{
	font-weight:700;
	letter-spacing: 0.05em;
	color: #000;
}

.cpp-tab:not(.is-active):hover .cpp-tab-label{
	color:#000;
}

/* =========================================================
   EXTERNAL / LIB OVERRIDES
   ========================================================= */

/* -------------------------
   SweetAlert
   ------------------------- */

.swal2-container {
	position: fixed !important;
	inset: 0 !important;
	z-index: 10000 !important;
	touch-action: none;
}

/* Tema */
.swal2-title{ color:#000; font-weight:bold; }

.swal2-html-container{ color:var(--color-text-dark); }

.swal2-html-container img{
	border:4px solid var(--color-primary-strong);
}

.swal2-popup{
	font-family:var(--font-classic);
	border-radius:16px;
}

.swal2-close{
	color:var(--color-primary-strong) !important;
	font-size:1.6rem;
}

.swal2-confirm{
	background:var(--color-primary-strong) !important;
	color:#fff !important;
	font-weight:bold;
	border-radius:999px;
}

body.swal2-shown {
	overflow: inherit !important;
}

/* -------------------------
	Popup animation
	------------------------- */

@keyframes cppPopupLift{

	0%{
		transform: translateY(10px) scale(0.98);
		opacity:0;
	}

	100%{
		transform: translateY(0) scale(1);
		opacity:1;
	}

}

/* -------------------------
	Contact popup
	------------------------- */

.cpp-contact-popup{
	max-height: 90dvh !important;
	display: flex !important;
	flex-direction: column;
	padding: 2em 2.2em !important;
	border-radius:18px;
	box-shadow:0 20px 60px rgba(0,0,0,0.25);
	animation: cppPopupLift 260ms cubic-bezier(.22,.61,.36,1);
}

.cpp-contact-popup .swal2-html-container{
	overflow-y: auto !important;
	max-height: 60dvh !important;
	-webkit-overflow-scrolling: touch;
}

/* -------------------------
	Profile popup
	------------------------- */

.cpp-profile-card{
	max-width:560px;
	margin:0 auto;
	padding-right:8px; /* luft mot scrollbar */
}

/* -------------------------
	Header
	------------------------- */

.cpp-profile-header{
	display:flex;
	align-items:center;
	gap:22px;
	margin-bottom:18px;
}

/* -------------------------
	Profilbild
	------------------------- */

.cpp-profile-header img{
	width:104px;
	height:104px;
	border-radius:50%;
	object-fit:cover;
	border:4px solid var(--color-primary-strong);
	flex-shrink:0;
	box-shadow:0 6px 14px rgba(0,0,0,0.18);
}

/* -------------------------
	Text
	------------------------- */

.cpp-profile-name{
	font-size:1.45rem;
	font-weight:700;
	color:#111;
	margin-bottom:2px;
}

.cpp-profile-role{
	font-size:1.05rem;
	color:var(--color-primary-strong);
	font-weight:600;
}

/* -------------------------
	Divider
	------------------------- */

.cpp-profile-divider{
	height:1px;
	background:linear-gradient(
		to right,
		transparent,
		#ccc 30%,
		#ccc 70%,
		transparent
	);
	margin:16px 0 20px 0;
}

/* -------------------------
	Bio
	------------------------- */

.cpp-profile-bio{
	line-height:1.6;
	font-size:1rem;
	color:var(--color-text-dark);
	text-align:left;
	max-width: 480px;
}

/* -------------------------
	Bättre typografi i bio
	------------------------- */

.cpp-profile-bio p{
	margin-bottom:14px;
}

/* =========================================================
   MEDIA QUERIES
========================================================= */

/* ---------------------------------------------------------
	Desktop
	--------------------------------------------------------- */

@media (min-width:761px){
	html,
	body{
		height:100%;
		overflow:hidden;
	}

	html{
		scrollbar-gutter:stable;
	}

	#cpp-viewport {
		height: 100%;
		width: 100%;
		min-height: 100vh;
		min-height: 100dvh;
	}

	#cpp-stage{
		height:100%;
		margin:0 auto;
		overflow:hidden;
	}

	#cpp-white-base {
		position:absolute;
		inset: 34px 30px 34px calc(205px + 30px);
	}

	.cpp-content{
		position:absolute;
		top:0;
		bottom:0;
		left:205px;
		right:0;
		border:1px solid #000;
		border-radius:25px;
		box-shadow: var(--shadow-lg);
		overflow:hidden;
	}

	.cpp-content-inner{
		position:absolute;
		inset:0;

		padding: var(--space-md) var(--space-md) var(--space-sm);

		height:100%;
		overflow:hidden;
	}

	/* separator line for tabs */
	.cpp-content-inner::before{
		content:"";
		position:absolute;
		top:34px;
		bottom:34px;
		left:30px;

		width:1px;
		background:var(--tab-border-color);

		z-index:20;
		pointer-events:none;
	}

	#contentFrameHolder{
		flex:1 1 auto;
		overflow-y:auto;

		-webkit-overflow-scrolling:touch;
	}

	.cpp-scroll{
		position:absolute;
		left: var(--space-lg);
		right: 30px;
		top: var(--space-xl);
		bottom: var(--space-xl);
	}

	.cpp-content::after{
		content:"";
		position:absolute;
		top:34px;
		bottom:34px;
		right:0;
		width:30px;
		background:#fff;
		z-index:1;
		pointer-events:none;
	}

	.cpp-breadcrumb {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: var(--space-xl);
		border-top-left-radius: 23px;
		border-top-right-radius: 23px;
	}

	.cpp-footer {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: var(--space-xl);
		border-bottom-left-radius: 23px;
		border-bottom-right-radius: 23px;
	}

	.cpp-address{
		top:auto !important;
		bottom:0 !important;

		left:0 !important;

		width:var(--side-card-w);
		height:var(--side-card-h);
	}
}

@media (min-width:541px){
	.cpp-hero{
		height: 260px;
		aspect-ratio: auto;
	}

	.cpp-hero img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 15% center;
	}
}

/* -------------------------
	Tablet
	------------------------- */

@media (min-width:761px) and (max-width:920px){
	#cpp-stage{
		max-width:900px;
		height:100%;
	}
}

@media (min-width:921px){
	#cpp-stage{
		width:900px;
		transform:none;
	}
}

/* ---------------------------------------------------------
	Mobile
	--------------------------------------------------------- */

@media (max-width:760px){

	/* -------------------------
		Variabler
		------------------------- */

	:root{
		--mobile-header-h: 34px;
	}

	#cpp-white-base{
		top:2px;
		left:2px;
		right:2px;
		bottom:auto;
		border-radius:20px;
	}

	/* -------------------------
		Reset av desktop-positionering
		------------------------- */

	.cpp-main::after{
		content:"";
		display:block;
		flex: 0 0 10px;
		background:#fff;
	}

	#pageButtons{
		display: none;
	}

	/* -------------------------
		Wrappers & Viewport
		------------------------- */

	html{
		height:100%;
		overflow-x:hidden;
		overflow-y:auto;
	}

	body{
		min-height:100dvh;
	}

	#cpp-stage{
		width: 100%;
		height: auto;
		overflow: visible;
		min-height:100vh;
		min-height:100dvh;
		/* max-width:520px; */
		max-width:100%;
		margin:0 auto;
	}
	
	#cpp-viewport{
		height:auto;
		min-height:0;
		overflow-x:hidden;
		overflow-y:visible;
	}

	/* -------------------------
		Mobil layout-stack
		------------------------- */

	.cpp-mobile-stack{
		display:flex;
		flex-direction:column;
		align-items:stretch;

		/*max-width:520px;*/
		margin:0 auto;

		background:#fff;
		border-radius:20px;
		box-shadow:0 8px 18px rgba(0,0,0,.28);

		padding:0;
	}

	/* -------------------------
		Content
		------------------------- */

	.cpp-main{
		display: flex;
		flex: 1 1 auto;
		min-height: 0;
	}

	.cpp-content::after{
		width:10px;
	}

	/* -------------------------
		Reset av desktop-posotionering
		------------------------- */

	.cpp-tabs{
		position: relative;
		inset:auto;
	}

	.cpp-breadcrumb,
	.cpp-footer {
		position: relative;
		inset: auto;
		width: 100%;
		padding: 6px 15px 6px 29px;
		height: auto;
		min-height: 34px;
		flex: 0 0 auto;
	}

	.cpp-breadcrumb {
		border-radius: 0;
	}

	.cpp-footer {
		border-bottom-left-radius: 20px;
		border-bottom-right-radius: 20px;
	}

	.cpp-scroll{
		position: relative;
	}

	/* -------------------------
		Scrollyta
		------------------------- */

	#contentFrameHolder{
		width: 100%;
		margin: 0;
		padding: 0;
		flex: 1 1 auto;
		min-width: 0;
		min-height: 0;
		overflow-y: visible;
		/* transform: translateZ(0); */
	}
	
	.cpp-logo,
	.cpp-address{
		position: relative !important;
		inset:auto !important;

		width: 100% !important;
		/* max-width: 520px; */
		max-width: 100%;

		margin: 0 auto !important;
	}

	/* -------------------------
		Content
		------------------------- */

	.cpp-content {
		position: relative;
		inset: auto;
		width: 100%;
		/* max-width: 520px; */
		max-width: 100%;
		flex: 1 1 auto;
		z-index: 10;
		clear: both;
		margin: 0 auto;
	}

	/* -------------------------
		Address
		------------------------- */

	.cpp-mobile-header .cpp-logo{
		display: block;
		pointer-events: auto;

		flex: 0 1 auto;
		width: 100%;
		max-width: 320px;

		margin: 0;
		z-index: 3000;
	}

	.cpp-mobile-header .cpp-logo .cpp-logo-card{
		width:auto;
	}

	.cpp-logo .logo-inner{
		width:auto !important;
	}

	.cpp-logo img{
		max-width: 260px;  /* justera denna */
		width: 100%;
		height: auto;
		margin: 0 auto;
		display: block;
	}

	.cpp-mobile-header .cpp-address{
		display: flex;
		width: var(--side-card-w);
		flex: 1 1 auto;
		flex-shrink: 0;
		min-width: 0;
		max-width: var(--side-card-w);
		padding-left: 0;
		margin: 0 auto;
		margin-left: var(--header-gap);
		margin-right: auto;
		z-index: 5;
		align-items: center;
	}

	.cpp-mobile-header .cpp-address .cpp-address-card{
		width: 100%;
		border-radius: 20px;
	}

	.cpp-mobile-header .cpp-address-card{
		display: flex;
		position: relative;
		border-left: 1px solid #ddd !important;
		padding-left: 10px !important;
		flex-direction: column;
		justify-content: center;          /* centrera texten i kortet */
		height: 100% !important;
	}

	.cpp-address-inner{
		text-align: left;
	}

	.cpp-mobile-header .cpp-address::before{
		content: "";
		position: absolute;
		left: 0;
		top: 10px;
		bottom: 10px;
		width: 1px;
		background: #ddd;
	}

	/* Ta bort "dubbelkort" på mobil */
	.cpp-mobile-header .cpp-logo .cpp-card,
	.cpp-mobile-header .cpp-address .cpp-card{
		background: transparent;
		box-shadow: none;
		border: none;
		border-radius: 0;
		padding: 0;
	}

	/* -------------------------
		Tabs
		------------------------- */

	.cpp-mobile-stack .cpp-tabs{
		position: relative;
		left: auto;
		top: auto;
		bottom: auto;
		width: 34px;
		height: auto;
		flex: 0 0 34px;
		z-index: 50;
		pointer-events: auto;
		background:#fff;
	}

	/* -------------------------
		Logo
		------------------------- */

	.cpp-logo .cpp-card,
	.cpp-logo .cpp-logo-card{
		border-radius: 20px !important;
	}

	.cpp-logo .cpp-logo-card{ z-index: 200; }
	.cpp-logo .cpp-logo-link{ z-index: 210; }

	.cpp-mobile-header{
		position: relative;

		display:flex;
		flex-direction:row;
		align-items:center;
		justify-content: flex-start;

		gap:16px;

		width:100%;
		max-width:360px;
		margin:0 auto;

		padding:14px 18px;

		border-radius:0 0 25px 25px;
		background:linear-gradient(#ffffff,#f3f3f3);
		box-shadow:0 3px 8px rgba(0,0,0,0.05);
	}

	.cpp-mobile-header .cpp-logo,
	.cpp-mobile-header .cpp-address{
		width:auto !important;
		max-width:none !important;
		margin:0 !important;
	}

	.cpp-logo{
		flex:0 0 auto;
	}

	.cpp-address{
		flex:0 0 auto;
	}

	.cpp-mobile-mask,
	.cpp-mobile-header{
		overflow: visible !important;
	}

	.cpp-mobile-header-wrap{
		width: 100%;
		background:#fff;
		border-radius: 20px 20px 0 0;
		padding: 0;
		padding-left: 0 !important;
		padding-right: 0 !important;
		border: none;
		z-index: 5000;
	}

	/* -------------------------
		Breadcrumb & Footer
		------------------------- */

	.cpp-footer,
	.cpp-breadcrumb{
		position: relative !important;
		width: 100% !important;

		display: flex;
		align-items: center;
		justify-content: center;

		padding: 6px 15px 6px 29px;

		height: auto !important;
		min-height: 34px;
		max-height: none !important;

		flex: 0 0 auto;      /* viktigt */
		overflow: visible !important;
	}

	.cpp-breadcrumb{
		border-top-left-radius:0;
		border-top-right-radius:0;
	}

	.cpp-footer .topText{
		display:block;
		width:100%;
		text-align:center;
	}

	/* -------------------------
		Global UI effects
		------------------------- */

	.cpp-content{
		transition: filter .25s ease;
	}

	body.menu-open .cpp-content{
		filter: brightness(.97) blur(.8px);
	}
}

/* ---------------------------------------------------------
	Small mobile
	--------------------------------------------------------- */

@media (max-width:640px){

	.contact-container {
		gap: 18px;
	}

	.company-info{
		text-align:center;
	}

	.company-info .columns-container{
		flex-direction:column;
		align-items:center;
		text-align:center;

		display:none;
		width:100%;
	}

	.company-info-mobile{
		display:block;
		text-align:center;
	}

	.project-container,
	.contact-container{
		max-width:100%;
		padding:0;
		margin:12px 0;
	}

	.contact-item{
		width:100%;
		margin:0 auto;
	}

	.project-item,
	.contact-item{
		box-shadow:0 6px 16px rgba(0,0,0,.10);
	}

	.contact-form .form-grid{
		grid-template-columns:1fr;
	}

}

/* ---------------------------------------------------------
	iPhone-saft mobileheader
	--------------------------------------------------------- */

@media (max-width:480px){
	#cpp-cookie-banner{
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		gap: 8px;
	}

	/* -------------------------
		SweetAlert mobilfix
		------------------------- */

	.swal2-popup{
		width: 92vw !important;
		padding: 1rem !important;
		max-height: 90dvh !important;
	}

	.swal2-title{
		margin: 0 0 6px 0 !important;
		font-size: 1.2rem;
		white-space: normal !important;
	}

	.swal2-image{
		max-width: 120px !important;
		height: auto !important;
		margin: 6px auto !important;
	}

	.swal2-html-container{
		margin: 6px 0 !important;
		padding: 0 !important;
		line-height: 1.4;
	}

	.swal2-actions{
		margin-top: 10px !important;
	}

	.cpp-swal-nowrap{
	  white-space: nowrap;
	}

	.cpp-profile-header{
		flex-direction:column;
		text-align:center;
	}

	.cpp-profile-card{
		padding-right:12px;
	}
}

@media (max-width:460px){

	.cpp-address{
		display:none !important;
	}

	.cpp-mobile-header{
		justify-content:center !important;

		width:fit-content !important;
		max-width:90% !important;

		margin:0 auto !important;
		padding:14px 18px !important;
	}

	.cpp-logo{
		width:90%;
		max-width:360px;
		margin:0 auto;
	}

	.cpp-logo .cpp-logo-card{
		width:100%;
	}

	.cpp-logo .logo-inner{
		width:100% !important;
		height:100% !important;
	}

	.logo-inner,
	.logo-link{
		display:flex;
		justify-content:center;
		align-items:center;
		width:100%;
	}

	.cpp-logo img{
		width:100%;
		height:auto;
		display:block;
	}
}