.decors {
	pointer-events: none;
}

.csh, .circle-shadow {
	background: var(--main-mc1, #c6a26a);
	border-radius: 50%;
	opacity: 0.3;
	width: 3.74rem;
	height: 3.74rem;
	position: relative;
	filter: blur(1.58rem);
}
article.service-card .csh {
	position: absolute;
	translate: 20px 7px;
	transition: scale 1.1s, opacity .41s;
}
article.service-card:hover .csh {
	scale: 7;
	opacity: 0.47;
}
#d.iphone article.service-card .csh,
#d.safari article.service-card .csh {
	display: none !important;
}

/* Zmienne CSS dla powtarzających się wartości */
:root {
	--circle-size-lg: 626px;
	--circle-size-md: 384px;
	--main-color: var(--main-mc1, #c6a26a);
	--darker-color: var(--darker-dc1, #795c2e);
	--blur-amount: 100px;
}

/* --- Style bazowe dla wszystkich elementów pozycji absolutnej i okręgów --- */
.absolute-circle {
	position: absolute;
	border-radius: 50%;
}

/* --- Style dla cieni (shadows) --- */
#d.d {
	.shadow {
		filter: blur(var(--blur-amount));
		mix-blend-mode: darken;
		background: var(--main-color);
	}

	.shadow3 {
		/* opacity: 0.3; - Specyficzne dla tego cienia */
		opacity: 0.3; /* Usunąłem zmienną, bo to jest unikalne dla tego elementu */
		width: var(--circle-size-lg);
		height: var(--circle-size-lg);
		left: calc(50% + 71px);
		top: 86px;
	}

	.shadow4 {
		opacity: 0.34;
		width: 595px; /* Unikalna szerokość */
		height: var(--circle-size-lg);
		left: -2%;
		top: 3%;
	}
}

/* --- Style dla wypełnionych okręgów (circles) --- */
.filled-circle {
	background: var(--main-color);
	opacity: 0.3; /* Wspólne dla circle i outline3/4 */
}

.circle {
	width: var(--circle-size-md);
	height: var(--circle-size-md);
	left: 1231px;
	top: -146px;
}

/* --- Style dla obrysów (outlines) --- */
.outline-base {
	border-style: solid;
	border-color: var(--darker-color);
	border-width: 1px;
}

.outline {
	width: var(--circle-size-md);
	height: var(--circle-size-md);
	left: 1292px;
	top: 73px;
}

.outline2 {
	width: var(--circle-size-md);
	height: var(--circle-size-md);
	left: 1427px;
	top: -151px;
}

.outline3,
.outline4 {
	opacity: 0.3;
	width: var(--circle-size-md);
	height: var(--circle-size-md);
	transform-origin: 0px 0px;
	transform: rotate(0deg) scale(1, -1);
}

.outline3 {
	left: -42px;
	top: 139px;
}

.outline4 {
	left: 93px;
	top: 363px;
}

/* --- Specyficzny styl dla circle2 --- */
.circle2 {
	width: var(--circle-size-md);
	height: var(--circle-size-md);
	left: -103px;
	top: 338px;
	transform-origin: 0px 0px;
	transform: rotate(0deg) scale(1, -1);
	border-radius: 50%; /* Przeniesione z absolute-circle, bo to jest jedyny circle bez tego. */
	border-style: solid;
	border-color: var(--darker-color);
	border-width: 1px;
}

.decors {
	position: absolute;
}

#d.d .approach-section__image-shadow {
	background: var(--main-mc1, #c6a26a);
	border-radius: 50%;
	opacity: 0.5;
	flex-shrink: 0;
	width: 543px;
	height: 520px;
	position: absolute;
	left: -36px;
	top: -43px;
	filter: blur(100px);
	mix-blend-mode: darken;
}





@media screen and (min-width: 77.01rem) {
	.section-title-vertical {
		font-family: "CrimsonText-Bold", sans-serif;
		font-size: 120px;
		font-weight: 700;
		-webkit-text-stroke: 1px var(--main-mc1, #c6a26a);
		color: transparent;
		position: absolute;
		white-space: nowrap;
		pointer-events: none;
		opacity: 0.8;
		line-height: 0.75;
		writing-mode: sideways-rl;
		z-index: 1;
		margin-left: -9px;
	}
	.section-title-vertical.contact-section__title-vertical {
		bottom: 50%;
		top: auto;
		translate: 5px 50%;
		padding-top: 35px;
		writing-mode: sideways-lr;
		letter-spacing: 1px;
	}

	.section-title-vertical.hero__title-vertical {
		-webkit-text-stroke: unset;
		color: var(--main-mc1, #c6a26a);
		margin-left: -9px;
		opacity: .3;
		top: 0;
		bottom: 0;
		text-align: center;
		font-size: 135px;
	}

	.our-story .section-title-vertical.our-story__title-vertical {
		writing-mode: horizontal-tb;
		word-wrap: break-word;
		white-space: break-spaces;
		text-align: left;
		z-index: 8;
		bottom: 70%;
		width: 100vw;
		line-height: .75;
		margin: 1rem 0;
		bottom: 66.7%;
		zoom: 1;

		span {
			color: #f3efe6;
		}
	}
}
@media screen and (max-width: 88rem) {
	.section-title-vertical.services-section__title-vertical {
		display: none;
	}
}


@media screen and (max-width: 77rem) {
	.section-title-vertical {
		display: none; /* Hide decorative vertical titles on mobile */
	}
	.section-title-vertical.team-section__title-vertical--who {
		display: block;
		max-width: var(--container-width);
		margin: 1rem auto 0;
		font-size: 60px;
	}
}