.cilloni-memorial,
.cilloni-memorial * { box-sizing: border-box; }

.cilloni-memorial {
	--memorial-ink: #26332f;
	--memorial-green: #53695f;
	--memorial-sage: #aebdb4;
	--memorial-stone: #ecece7;
	--memorial-paper: #f8f7f2;
	--memorial-gold: #b7a475;
	position: relative;
	padding: clamp(96px, 11vw, 180px) clamp(20px, 5vw, 88px) clamp(115px, 13vw, 210px);
	overflow: hidden;
	background:
		linear-gradient(105deg, transparent 0 60%, rgba(255,255,255,.42) 60% 60.08%, transparent 60.08%),
		radial-gradient(circle at 78% 18%, rgba(255,255,255,.7), transparent 27%),
		var(--memorial-stone);
	color: var(--memorial-ink);
	font-family: "Avenir Next", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
	isolation: isolate;
}

.cilloni-memorial::before {
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	width: 54%;
	height: 5px;
	background: linear-gradient(90deg, transparent, var(--memorial-green));
	content: "";
}

.cilloni-memorial__line-art {
	position: absolute;
	z-index: -1;
	right: -110px;
	bottom: -120px;
	width: min(37vw, 620px);
	stroke: var(--memorial-green);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 0.8;
	opacity: 0.1;
	pointer-events: none;
}

.cilloni-memorial__inner { width: min(100%, 1660px); margin: 0 auto; }

.cilloni-memorial__header {
	display: grid;
	margin-bottom: clamp(78px, 9vw, 142px);
	grid-template-columns: minmax(540px, 1.3fr) minmax(320px, .7fr);
	align-items: end;
	gap: clamp(45px, 8vw, 145px);
}

.cilloni-memorial__eyebrow,
.cilloni-memorial__overline {
	margin: 0 0 22px;
	color: var(--memorial-green);
	font-size: .64rem;
	font-weight: 750;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.cilloni-memorial__header h2 {
	position: relative;
	width: max-content;
	margin: 0;
	color: var(--memorial-ink);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(4.7rem, 7.8vw, 8.9rem);
	font-weight: 400;
	font-style: italic;
	letter-spacing: -.058em;
	line-height: .84;
}

.cilloni-memorial__header h2::after {
	position: absolute;
	right: 5%;
	bottom: -.16em;
	left: 5%;
	height: .045em;
	border-radius: 999px;
	background: rgba(83, 105, 95, .4);
	content: "";
	transform: rotate(-.7deg);
}

.cilloni-memorial__header > p {
	max-width: 570px;
	margin: 0 0 7px;
	color: rgba(38, 51, 47, .65);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1.08rem, 1.45vw, 1.44rem);
	line-height: 1.68;
}

.cilloni-memorial__composition {
	display: grid;
	grid-template-columns: minmax(390px, .88fr) minmax(430px, 1.12fr);
	align-items: center;
	gap: clamp(62px, 8vw, 142px);
}

.cilloni-memorial__visual {
	--memorial-x: 0px;
	--memorial-y: 0px;
	--memorial-zoom: 1.045;
	position: relative;
	min-height: clamp(590px, 57vw, 810px);
}

.cilloni-memorial__photo {
	position: absolute;
	margin: 0;
	overflow: hidden;
	background: #d9ddd7;
	box-shadow: 0 32px 85px rgba(38, 51, 47, .15);
}

.cilloni-memorial__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.78) contrast(.97);
	transition: transform 1000ms cubic-bezier(.16, 1, .3, 1), filter 700ms ease;
}

.cilloni-memorial__photo--main {
	top: 0;
	right: 9%;
	bottom: 0;
	left: 0;
	border-radius: 50% 50% 3px 3px / 18% 18% 3px 3px;
}

.cilloni-memorial__photo--main img {
	object-position: center 45%;
	transform: translate3d(calc(var(--memorial-x) * -.32), calc(var(--memorial-y) * -.32), 0) scale(var(--memorial-zoom));
}

.cilloni-memorial__visual[data-service="1"] { --memorial-zoom: 1.13; }
.cilloni-memorial__visual[data-service="1"] .cilloni-memorial__photo--main img { object-position: 48% 32%; }
.cilloni-memorial__visual[data-service="2"] { --memorial-zoom: 1.08; }
.cilloni-memorial__visual[data-service="2"] .cilloni-memorial__photo--main img { object-position: 52% 60%; }
.cilloni-memorial__visual[data-service="3"] { --memorial-zoom: 1.16; }
.cilloni-memorial__visual[data-service="3"] .cilloni-memorial__photo--main img { object-position: 40% 46%; }

.cilloni-memorial__photo--detail {
	right: -2%;
	bottom: 8%;
	width: clamp(150px, 15vw, 230px);
	aspect-ratio: 1;
	border: 9px solid var(--memorial-stone);
	border-radius: 50%;
}

.cilloni-memorial__photo--detail img {
	object-position: 42% 13%;
	transform: translate3d(calc(var(--memorial-x) * .22), calc(var(--memorial-y) * .22), 0) scale(1.8);
}

.cilloni-memorial__visual:hover .cilloni-memorial__photo img { filter: saturate(.9) contrast(1); }

.cilloni-memorial__seal {
	position: absolute;
	z-index: 3;
	top: 15%;
	right: 0;
	display: grid;
	width: 116px;
	aspect-ratio: 1;
	place-content: center;
	border: 1px solid rgba(83,105,95,.35);
	border-radius: 50%;
	background: rgba(248,247,242,.92);
	color: var(--memorial-green);
	font-size: .54rem;
	font-weight: 750;
	letter-spacing: .13em;
	text-align: center;
	text-transform: uppercase;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.cilloni-memorial__seal i { width: 23px; height: 1px; margin: 7px auto; background: var(--memorial-gold); }

.cilloni-memorial__caption {
	position: absolute;
	z-index: 3;
	bottom: 23px;
	left: 25px;
	margin: 0;
	padding: 13px 17px;
	background: rgba(38,51,47,.82);
	color: rgba(255,255,255,.74);
	font-size: .56rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
}

.cilloni-memorial__caption span { margin-right: 10px; color: var(--memorial-gold); }

.cilloni-memorial__content {
	max-width: 730px;
	padding: clamp(12px, 2vw, 35px) 0;
}

.cilloni-memorial__content h3 {
	margin: 0 0 30px;
	color: var(--memorial-ink);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(2.8rem, 4.5vw, 5.4rem);
	font-weight: 400;
	line-height: 1.02;
}

.cilloni-memorial__content h3 em { color: var(--memorial-green); font-weight: 400; }
.cilloni-memorial__content > p:not(.cilloni-memorial__overline) { max-width: 655px; margin: 0; color: rgba(38,51,47,.64); font-size: .96rem; line-height: 1.8; }

.cilloni-memorial__services {
	display: grid;
	margin-top: 45px;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid rgba(38,51,47,.14);
	border-left: 1px solid rgba(38,51,47,.14);
}

.cilloni-memorial__services button {
	position: relative;
	display: grid;
	min-height: 72px;
	padding: 18px 19px;
	grid-template-columns: 30px 1fr;
	align-items: center;
	border: 0;
	border-right: 1px solid rgba(38,51,47,.14);
	border-bottom: 1px solid rgba(38,51,47,.14);
	background: rgba(255,255,255,.13);
	color: rgba(38,51,47,.58);
	font: inherit;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1rem;
	text-align: left;
	cursor: pointer;
	transition: background 400ms ease, color 400ms ease;
}

.cilloni-memorial__services button::after {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	background: var(--memorial-green);
	content: "";
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 500ms cubic-bezier(.16,1,.3,1);
}

.cilloni-memorial__services button span { color: var(--memorial-gold); font: 700 .55rem/1 "Segoe UI", sans-serif; letter-spacing: .08em; }
.cilloni-memorial__services button:hover { color: var(--memorial-ink); background: rgba(255,255,255,.3); }
.cilloni-memorial__services button.is-active { color: var(--memorial-ink); background: rgba(255,255,255,.55); }
.cilloni-memorial__services button.is-active::after { transform: scaleX(1); }
.cilloni-memorial__services button:focus-visible { z-index: 2; outline: 2px solid var(--memorial-green); outline-offset: -2px; }

.cilloni-memorial__panels { position: relative; min-height: 92px; padding: 25px 0 0 32px; border-left: 1px solid var(--memorial-gold); }
.cilloni-memorial__panel { opacity: 0; transform: translateY(7px); transition: opacity 450ms ease, transform 550ms ease; }
.cilloni-memorial__panel.is-active { opacity: 1; transform: translateY(0); }
.cilloni-memorial__panel p { max-width: 570px; margin: 0; color: rgba(38,51,47,.57); font-family: Georgia, "Times New Roman", serif; font-size: 1.02rem; line-height: 1.6; }

.cilloni-memorial__promise { display: flex; margin-top: 34px; padding-top: 25px; align-items: center; gap: 15px; border-top: 1px solid rgba(38,51,47,.12); }
.cilloni-memorial__promise > span { display: block; width: 8px; height: 8px; border: 1px solid var(--memorial-gold); border-radius: 50%; }
.cilloni-memorial__promise p { margin: 0; color: rgba(38,51,47,.55); font-size: .68rem; line-height: 1.5; }
.cilloni-memorial__promise strong { color: var(--memorial-ink); font-weight: 700; }

.cilloni-memorial__reveal { opacity: 0; transform: translateY(30px); transition: opacity 950ms ease, transform 1100ms cubic-bezier(.16,1,.3,1); }
.cilloni-memorial__reveal.is-visible { opacity: 1; transform: translateY(0); }
.cilloni-memorial__content.cilloni-memorial__reveal { transition-delay: 120ms; }

@media (max-width: 1120px) {
	.cilloni-memorial__header { grid-template-columns: 1fr; gap: 42px; }
	.cilloni-memorial__header > p { margin-left: clamp(38px,12vw,150px); }
	.cilloni-memorial__composition { grid-template-columns: 1fr; }
	.cilloni-memorial__visual { width: min(85%,720px); }
	.cilloni-memorial__content { margin-left: clamp(30px,8vw,115px); }
}

@media (max-width: 700px) {
	.cilloni-memorial { padding: 84px 18px 98px; }
	.cilloni-memorial__header { margin-bottom: 67px; }
	.cilloni-memorial__header h2 { font-size: clamp(3.55rem,16.5vw,5.35rem); }
	.cilloni-memorial__header > p { margin-left: 25px; font-size: 1.04rem; }
	.cilloni-memorial__visual { width: calc(100% - 15px); min-height: 565px; }
	.cilloni-memorial__photo--main { right: 0; }
	.cilloni-memorial__photo--detail { right: -15px; width: 135px; border-width: 7px; }
	.cilloni-memorial__seal { top: 11%; right: -7px; width: 96px; }
	.cilloni-memorial__content { margin: 0; padding-top: 25px; }
	.cilloni-memorial__content h3 { font-size: 2.7rem; }
	.cilloni-memorial__services { grid-template-columns: 1fr; }
	.cilloni-memorial__services button { min-height: 66px; }
	.cilloni-memorial__line-art { right: -210px; width: 490px; }
}

@media (prefers-reduced-motion: reduce) {
	.cilloni-memorial *, .cilloni-memorial *::before, .cilloni-memorial *::after { animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; }
	.cilloni-memorial__reveal { opacity: 1; transform: none; }
}