/* Base typography and colors for a professional tone */
:root {
	--brand-primary: #c41e3a; /* deep red accent */
	--text-color: #2c3e50; /* dark blue-gray for text */
	--muted-text: #5a6c7d; /* softer gray for secondary text */
	--beige-light: #faf8f4; /* light beige for backgrounds */
	--beige-base: #f5f1eb; /* base beige */
	--beige-warm: #ede8e0; /* warmer beige for cards */
	--footer-bg: #f5f1eb;
}

html {
	scroll-behavior: smooth;
}

body {
	color: var(--text-color);
	background: var(--beige-light);
}

/* Team member portraits */
.team-member {
	position: relative;
}
.team-member img {
	width: 100%;
	height: 400px;
	min-height: 400px;
	max-height: 400px;
	object-fit: cover;
	object-position: center;
	border-radius: .75rem;
	box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
	transition: transform .3s ease, box-shadow .3s ease;
	display: block;
}
.team-member img:hover {
	transform: scale(1.02);
	box-shadow: 0 .75rem 2rem rgba(0,0,0,.15);
}
.team-member-info h3 {
	color: var(--text-color);
	font-weight: 600;
}
.team-member-info p {
	color: var(--muted-text);
	line-height: 1.6;
	margin: 0;
}
@media (max-width: 767.98px) {
	.team-member img {
		height: 300px;
	}
}

/* Sticky footer layout */
html, body {
	height: 100%;
}
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
main, #main {
	flex: 1 0 auto;
}
footer {
	flex-shrink: 0;
}

/* Improve contrast for navbar toggler icon visibility on light bg */
.navbar-light .navbar-toggler {
	border-color: rgba(0,0,0,.1);
}

/* Hero overlay to ensure text readability over image */
.hero {
	position: relative;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15));
}
.hero .container,
.hero * {
	position: relative;
	z-index: 1;
	color: #fff;
}
.hero .btn-outline-secondary {
	color: #fff;
	border-color: rgba(255,255,255,.7);
}
.hero .btn-outline-secondary:hover {
	background: #fff;
	color: #000;
}

/* Section cards: subtle borders, consistent spacing */
.card {
	border: none;
}
.card .stretched-link {
	color: var(--brand-primary);
	text-decoration: none;
}
.card .stretched-link:hover {
	text-decoration: underline;
}

/* Footer */
.page-footer,
footer.bg-light {
	background: var(--footer-bg) !important;
}

/* Buttons */
.btn-primary {
	background-color: var(--brand-primary);
	border-color: var(--brand-primary);
}
.btn-primary:hover {
	background-color: #a31212;
	border-color: #a31212;
}

/* Skip to content for keyboard users */
.skip-link {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.skip-link:focus {
	position: static;
	width: auto;
	height: auto;
	margin: .5rem;
	padding: .5rem .75rem;
	background: #000;
	color: #fff;
	border-radius: .25rem;
}

/* Modern accents */
.icon-circle {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(198, 40, 40, .1);
	color: var(--brand-primary);
	font-size: 26px;
}
.feature {
	display: flex;
	gap: 1rem;
}
.feature .content {
	flex: 1;
}

/* Process timeline */
.process {
	position: relative;
}
.process .step {
	text-align: center;
}
.process .step .num {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--brand-primary);
	color: #fff;
	font-weight: 700;
	margin-bottom: .5rem;
	position: relative;
	z-index: 2; /* ensure above track */
	box-shadow: 0 0 0 6px #fff; /* halo so track is not visible behind */
}

/* Modern "why us" list */
.benefits {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.benefit {
	background: #fff;
	border: none;
	border-left: 4px solid var(--brand-primary);
	border-radius: .5rem;
	padding: 1rem 1rem 1rem 1rem;
	transition: box-shadow .2s ease, transform .2s ease;
}
.benefit:hover {
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.06);
	transform: translateY(-2px);
}
.benefit h3 {
	font-size: 1rem;
	margin-bottom: .25rem;
}
.benefit p {
	color: var(--muted-text);
	margin: 0;
}
/* Tile variation with icon and soft background */
.benefits-tiles {
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
}
.tile {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	background: var(--beige-warm);
	border: none;
	border-radius: .75rem;
	padding: 1.25rem 1.25rem;
	min-height: 180px;
	box-shadow: 0 .25rem .75rem rgba(0,0,0,.03);
}
.tile-icon {
	width: 48px;
	height: 48px;
	border-radius: .75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: none;
	color: var(--brand-primary);
	font-size: 24px;
	flex: 0 0 48px;
}
.tile-body h3 {
	font-size: 1.1rem;
	margin: 0 0 .35rem 0;
}
.tile-body p {
	margin: 0;
	color: var(--muted-text);
	line-height: 1.5;
}

/* Services tiles */
.services-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
}
.service-tile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 200px;
	background: #ffffff;
	border: none;
	border-radius: .75rem;
	padding: 1.25rem 1.25rem;
	box-shadow: 0 .25rem .75rem rgba(0,0,0,.03);
	transition: transform .2s ease, box-shadow .2s ease;
}
.service-tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.06);
}
.service-tile .icon {
	width: 48px;
	height: 48px;
	border-radius: .75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--beige-warm);
	border: none;
	color: var(--brand-primary);
	font-size: 24px;
	margin-bottom: .5rem;
}
.service-tile h3 {
	font-size: 1.1rem;
	margin: 0 0 .35rem 0;
}
.service-tile p {
	color: var(--muted-text);
	margin: 0 0 .75rem 0;
}
.service-tile .link {
	font-weight: 600;
	color: var(--brand-primary);
	text-decoration: none;
}
.service-tile .link:hover {
	text-decoration: underline;
}
@media (max-width: 767.98px) {
	.services-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 991.98px) {
	.benefits {
		grid-template-columns: 1fr;
	}
	.benefits-tiles {
		grid-template-columns: 1fr;
	}
}

/* Large why-section (light variant matching site colors) */
.why-section {
	background: var(--beige-base);
	color: #212529;
	border: none;
	border-radius: .75rem;
	padding: 2rem;
}
.why-section .lead {
	color: var(--muted-text);
}
.why-card {
	background: #ffffff;
	border: none;
	border-radius: .75rem;
	padding: 1rem 1.25rem;
	color: #212529;
}
.why-card + .why-card {
	margin-top: 1rem;
}
.why-card .title {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: .25rem;
	color: #212529;
}
.why-card .desc {
	color: var(--muted-text);
	margin: 0;
	line-height: 1.5;
}
.why-icon {
	width: 40px;
	height: 40px;
	border-radius: .5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--beige-warm);
	border: none;
	color: var(--brand-primary);
	font-size: 20px;
	margin-right: .75rem;
}
.why-media {
	background: #ffffff;
	border: none;
	border-radius: .75rem;
	overflow: hidden;
	box-shadow: 0 .25rem .75rem rgba(0,0,0,.03);
}
.why-media img {
	width: 100%;
	height: auto;
	display: block;
}

/* Horizontal process with single-row layout */
.process-horizontal {
	position: relative;
}
.process-horizontal .track {
	position: absolute;
	left: 0;
	right: 0;
	top: 22px; /* vertically align with circle center */
	height: 2px;
	background: rgba(0,0,0,.08);
	z-index: 0;
}
.process-horizontal .steps {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
}
@media (max-width: 767.98px) {
	/* Switch to vertical process */
	.process-horizontal .track {
		left: 22px;
		right: auto;
		top: 0;
		bottom: 0;
		width: 2px;
		height: auto;
	}
	.process-horizontal .steps {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}
	.process-horizontal .steps .step {
		text-align: left;
		position: relative;
		padding-left: 56px; /* indent text so siffran/linjen ligger till vänster */
	}
	.process-horizontal .steps .step .num {
		position: absolute;
		left: 0;
		top: 0;
		margin-bottom: 0; /* handled by absolute positioning */
	}
}