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

.cilloni-xmas {
	--xmas-navy: #102b45;
	--xmas-green: #244c3b;
	--xmas-pine: #17392d;
	--xmas-red: #a52e35;
	--xmas-gold: #c7a568;
	--xmas-cream: #faf7ef;
	--xmas-paper: #fffdfa;
	position: relative;
	padding: clamp(84px, 10vw, 165px) clamp(20px, 5vw, 88px) clamp(100px, 12vw, 190px);
	overflow: hidden;
	background:
		radial-gradient(circle at 6% 18%, rgba(165, 46, 53, 0.07), transparent 20%),
		radial-gradient(circle at 91% 81%, rgba(36, 76, 59, 0.11), transparent 24%),
		linear-gradient(145deg, #fff 0 42%, #f8f4e9 100%);
	color: var(--xmas-navy);
	font-family: "Avenir Next", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
	isolation: isolate;
}

.cilloni-xmas::before {
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	left: 0;
	height: 7px;
	background: linear-gradient(90deg, var(--xmas-pine) 0 44%, var(--xmas-red) 44% 69%, var(--xmas-gold) 69%);
	content: "";
}

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

.cilloni-xmas__sprig {
	position: absolute;
	z-index: -1;
	width: min(28vw, 470px);
	stroke: var(--xmas-green);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1;
	opacity: 0.1;
	pointer-events: none;
}

.cilloni-xmas__sprig--left {
	left: -145px;
	top: 26%;
	transform: rotate(-18deg);
}

.cilloni-xmas__sprig--right {
	right: -145px;
	bottom: -60px;
	transform: scaleX(-1) rotate(-8deg);
}

.cilloni-xmas__header {
	display: grid;
	margin-bottom: clamp(70px, 9vw, 135px);
	grid-template-columns: minmax(520px, 1.35fr) minmax(320px, 0.65fr);
	align-items: end;
	gap: clamp(44px, 8vw, 150px);
}

.cilloni-xmas__header h2 {
	position: relative;
	display: inline-block;
	width: max-content;
	margin: 0;
	color: var(--xmas-navy);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(4.9rem, 8vw, 9.2rem);
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.055em;
	line-height: 0.82;
}

.cilloni-xmas__header h2::after {
	position: absolute;
	right: 4%;
	bottom: -0.13em;
	left: 4%;
	height: 0.08em;
	border-radius: 999px;
	background: rgba(165, 46, 53, 0.2);
	content: "";
	transform: rotate(-1deg);
}

.cilloni-xmas__header > p {
	max-width: 570px;
	margin: 0 0 8px;
	color: rgba(16, 43, 69, 0.72);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1.1rem, 1.45vw, 1.45rem);
	line-height: 1.65;
}

.cilloni-xmas__salon {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) minmax(400px, 0.82fr);
	align-items: center;
	gap: clamp(26px, 4vw, 68px);
}

.cilloni-xmas__gallery {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(145px, 0.36fr);
	grid-template-rows: repeat(2, minmax(215px, 1fr));
	height: clamp(620px, 59vw, 800px);
	gap: clamp(10px, 1.1vw, 17px);
	perspective: 1300px;
}

.cilloni-xmas__comet {
	position: absolute;
	z-index: 5;
	top: -53px;
	left: clamp(48px, 6vw, 98px);
	width: 92px;
	height: auto;
	color: var(--xmas-red);
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 3;
	pointer-events: none;
	filter: drop-shadow(0 8px 15px rgba(165, 46, 53, 0.2));
	animation: cilloni-xmas-comet 4.8s ease-in-out infinite alternate;
}

.cilloni-xmas__comet path:last-child { fill: currentColor; stroke-width: 1.5; }

.cilloni-xmas__photo {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: #d8ddd5;
	box-shadow: 0 27px 72px rgba(16, 43, 69, 0.13);
	transform: translate3d(var(--xmas-photo-x, 0), var(--xmas-photo-y, 0), 0);
	transition: box-shadow 600ms ease, transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cilloni-xmas__photo--hero {
	grid-row: 1 / -1;
	border-radius: 2px 2px 120px 2px;
}

.cilloni-xmas__photo--ornaments {
	border-radius: 70px 2px 2px 2px;
}

.cilloni-xmas__photo--work {
	border-radius: 2px 2px 70px 2px;
}

.cilloni-xmas__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.8) contrast(0.98) brightness(0.9);
	transition: filter 850ms ease, transform 1300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cilloni-xmas__photo--hero img { object-position: 50% center; transform: scale(1.025); }
.cilloni-xmas__photo--ornaments img { object-position: 87% 47%; transform: scale(2.05); }
.cilloni-xmas__photo--work img { object-position: 65% 77%; transform: scale(1.72); }

.cilloni-xmas__photo::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 54%, rgba(18, 49, 38, 0.66));
	content: "";
	pointer-events: none;
}

.cilloni-xmas__photo.is-active {
	box-shadow: 0 32px 85px rgba(16, 43, 69, 0.2), 0 0 0 1px rgba(165, 46, 53, 0.16);
}

.cilloni-xmas__photo.is-active img,
.cilloni-xmas__photo:hover img,
.cilloni-xmas.is-magical .cilloni-xmas__photo img {
	filter: saturate(1.08) contrast(1) brightness(1.02);
}

.cilloni-xmas__photo--hero.is-active img,
.cilloni-xmas__photo--hero:hover img { transform: scale(1.07); }
.cilloni-xmas__photo--ornaments.is-active img,
.cilloni-xmas__photo--ornaments:hover img { transform: scale(2.2); }
.cilloni-xmas__photo--work.is-active img,
.cilloni-xmas__photo--work:hover img { transform: scale(1.86); }

.cilloni-xmas.is-magical .cilloni-xmas__photo {
	box-shadow: 0 35px 95px rgba(36, 76, 59, 0.25), 0 0 34px rgba(199, 165, 104, 0.18);
}

.cilloni-xmas__photo figcaption {
	position: absolute;
	z-index: 2;
	right: 24px;
	bottom: 24px;
	left: 24px;
	color: #fff;
}

.cilloni-xmas__photo figcaption span {
	display: block;
	margin-bottom: 7px;
	color: #f0d39f;
	font-size: 0.58rem;
	font-weight: 750;
	letter-spacing: 0.16em;
}

.cilloni-xmas__photo figcaption strong {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1.2rem, 1.7vw, 1.7rem);
	font-weight: 400;
}

.cilloni-xmas__bauble {
	position: absolute;
	z-index: 6;
	right: clamp(91px, 10.5vw, 164px);
	top: 50%;
	width: clamp(88px, 8vw, 120px);
	aspect-ratio: 1;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	background: linear-gradient(135deg, #c95458, #8f2029 70%);
	box-shadow: inset 12px 12px 24px rgba(255,255,255,.15), 0 18px 50px rgba(60, 18, 24, 0.3);
	color: #f3d9a6;
	transform: translate(50%, -50%);
	transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 600ms ease;
}

.cilloni-xmas__bauble::before {
	position: absolute;
	top: -56px;
	left: 50%;
	width: 1px;
	height: 52px;
	background: var(--xmas-gold);
	content: "";
}

.cilloni-xmas__bauble-cap {
	position: absolute;
	top: -10px;
	left: 50%;
	width: 28px;
	height: 13px;
	border-radius: 5px 5px 1px 1px;
	background: var(--xmas-gold);
	transform: translateX(-50%);
}

.cilloni-xmas__bauble svg { display: block; width: 100%; height: 100%; padding: 23px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.cilloni-xmas.is-magical .cilloni-xmas__bauble { transform: translate(50%, -50%) rotate(8deg) scale(1.06); box-shadow: inset 12px 12px 24px rgba(255,255,255,.2), 0 0 45px rgba(218, 181, 104, 0.42); }

.cilloni-xmas__card {
	position: relative;
	z-index: 4;
	margin-left: clamp(-88px, -5.2vw, -34px);
	padding: clamp(36px, 4.4vw, 68px);
	border: 1px solid rgba(36, 76, 59, 0.15);
	border-radius: 2px 84px 2px 2px;
	background: rgba(255, 253, 250, 0.95);
	box-shadow: 0 34px 100px rgba(16, 43, 69, 0.14);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.cilloni-xmas__card-head {
	display: flex;
	margin-bottom: 31px;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.cilloni-xmas__card-head > p {
	margin: 0;
	color: var(--xmas-green);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.05rem;
	font-style: italic;
}

.cilloni-xmas__magic {
	display: inline-flex;
	min-height: 38px;
	padding: 8px 13px;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(165, 46, 53, 0.22);
	border-radius: 999px;
	background: transparent;
	color: var(--xmas-red);
	cursor: pointer;
	font: inherit;
	font-size: 0.59rem;
	font-weight: 750;
	letter-spacing: 0.06em;
	transition: background-color 350ms ease, color 350ms ease, transform 350ms ease;
}

.cilloni-xmas__magic:hover,
.cilloni-xmas__magic:focus-visible,
.cilloni-xmas__magic[aria-pressed="true"] { background: var(--xmas-red); color: #fff; transform: translateY(-2px); }
.cilloni-xmas__magic:focus-visible { outline: 2px solid var(--xmas-red); outline-offset: 3px; }
.cilloni-xmas__magic span:first-child { animation: cilloni-xmas-twinkle 2s ease-in-out infinite alternate; }

.cilloni-xmas__tabs {
	display: flex;
	margin-bottom: 40px;
	border-top: 1px solid rgba(36, 76, 59, 0.15);
	border-bottom: 1px solid rgba(36, 76, 59, 0.15);
}

.cilloni-xmas__tabs button {
	position: relative;
	min-height: 58px;
	padding: 11px 16px;
	border: 0;
	background: transparent;
	color: rgba(16, 43, 69, 0.48);
	cursor: pointer;
	font: inherit;
	font-size: 0.65rem;
	font-weight: 750;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	transition: color 350ms ease, background-color 350ms ease;
}

.cilloni-xmas__tabs button span { display: block; margin-bottom: 4px; color: var(--xmas-red); font-size: 0.48rem; opacity: 0.65; }
.cilloni-xmas__tabs button::after { position: absolute; right: 14px; bottom: -1px; left: 14px; height: 2px; background: var(--xmas-red); content: ""; transform: scaleX(0); transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1); }
.cilloni-xmas__tabs button:hover,
.cilloni-xmas__tabs button:focus-visible,
.cilloni-xmas__tabs button.is-active { color: var(--xmas-navy); background: rgba(165, 46, 53, 0.035); }
.cilloni-xmas__tabs button.is-active::after { transform: scaleX(1); }
.cilloni-xmas__tabs button:focus-visible { outline: 2px solid var(--xmas-red); outline-offset: 3px; }

.cilloni-xmas__panel[hidden] { display: none; }
.cilloni-xmas__panel.is-active { animation: cilloni-xmas-panel 650ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.cilloni-xmas__overline { margin: 0 0 15px; color: var(--xmas-red); font-size: 0.6rem; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; }
.cilloni-xmas__panel h3 { margin: 0 0 22px; color: var(--xmas-navy); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.1rem, 2.8vw, 3.45rem); font-weight: 400; line-height: 1.03; }
.cilloni-xmas__panel > p:not(.cilloni-xmas__overline) { margin: 0; color: rgba(16, 43, 69, 0.68); font-size: 0.92rem; line-height: 1.75; }
.cilloni-xmas__tags { display: flex; margin-top: 25px; flex-wrap: wrap; gap: 7px; }
.cilloni-xmas__tags span { padding: 7px 11px; border: 1px solid rgba(36, 76, 59, 0.17); border-radius: 999px; background: rgba(36, 76, 59, 0.035); color: var(--xmas-green); font-size: 0.61rem; }

.cilloni-xmas__promise {
	display: grid;
	margin-top: 38px;
	padding-top: 24px;
	grid-template-columns: 45px 1fr;
	align-items: center;
	gap: 15px;
	border-top: 1px solid rgba(36, 76, 59, 0.14);
}

.cilloni-xmas__promise > span { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(165, 46, 53, 0.28); border-radius: 50%; color: var(--xmas-red); font-family: Georgia, "Times New Roman", serif; font-size: 0.9rem; font-style: italic; }
.cilloni-xmas__promise p { margin: 0; color: rgba(16, 43, 69, 0.57); font-size: 0.7rem; line-height: 1.55; }
.cilloni-xmas__promise strong { display: block; margin-bottom: 2px; color: var(--xmas-navy); font-family: Georgia, "Times New Roman", serif; font-size: 0.95rem; font-weight: 400; }

.cilloni-xmas__snow { position: absolute; z-index: 8; inset: 0; overflow: hidden; pointer-events: none; }
.cilloni-xmas__flake { position: absolute; left: var(--flake-x); top: -18px; width: var(--flake-size); height: var(--flake-size); border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 0 7px rgba(255,255,255,.8); opacity: var(--flake-opacity); animation: cilloni-xmas-snow var(--flake-duration) linear forwards; }

.cilloni-xmas__reveal { opacity: 0; transform: translateY(30px); transition: opacity 900ms ease, transform 1000ms cubic-bezier(0.16, 1, 0.3, 1); }
.cilloni-xmas__reveal.is-visible { opacity: 1; transform: translateY(0); }
.cilloni-xmas__card.cilloni-xmas__reveal { transition-delay: 120ms; }

@keyframes cilloni-xmas-panel { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cilloni-xmas-twinkle { from { opacity: 0.35; transform: rotate(-8deg) scale(0.85); } to { opacity: 1; transform: rotate(8deg) scale(1.14); } }
@keyframes cilloni-xmas-comet { from { transform: translate3d(0, 0, 0) rotate(-4deg); } to { transform: translate3d(8px, -5px, 0) rotate(2deg); } }
@keyframes cilloni-xmas-snow { to { opacity: 0; transform: translate3d(var(--flake-drift), calc(var(--xmas-height, 1100px) + 40px), 0) rotate(360deg); } }

@media (max-width: 1120px) {
	.cilloni-xmas__header { grid-template-columns: 1fr; gap: 42px; }
	.cilloni-xmas__header > p { margin-left: clamp(40px, 12vw, 150px); }
	.cilloni-xmas__salon { grid-template-columns: 1fr; }
	.cilloni-xmas__gallery { height: min(80vw, 750px); }
	.cilloni-xmas__card { width: min(90%, 820px); margin: clamp(-110px, -9vw, -60px) 0 0 auto; }
	.cilloni-xmas__bauble { right: clamp(94px, 13vw, 160px); }
}

@media (max-width: 700px) {
	.cilloni-xmas { padding: 82px 18px 90px; }
	.cilloni-xmas__header { margin-bottom: 62px; }
	.cilloni-xmas__header h2 { font-size: clamp(4rem, 19vw, 6.2rem); }
	.cilloni-xmas__header > p { margin-left: 26px; font-size: 1.05rem; }
	.cilloni-xmas__gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 310px 148px; height: auto; gap: 8px; }
	.cilloni-xmas__photo--hero { grid-column: 1 / -1; grid-row: auto; border-radius: 2px 2px 70px 2px; }
	.cilloni-xmas__photo--ornaments { border-radius: 48px 2px 2px 2px; }
	.cilloni-xmas__photo--work { border-radius: 2px 2px 48px 2px; }
	.cilloni-xmas__photo figcaption { right: 13px; bottom: 13px; left: 13px; }
	.cilloni-xmas__photo figcaption strong { font-size: 1rem; }
	.cilloni-xmas__bauble { right: 50%; top: 314px; width: 74px; transform: translate(50%, -50%); }
	.cilloni-xmas.is-magical .cilloni-xmas__bauble { transform: translate(50%, -50%) rotate(8deg) scale(1.06); }
	.cilloni-xmas__bauble::before { top: -32px; height: 29px; }
	.cilloni-xmas__card { width: calc(100% - 18px); margin: -24px 0 0 auto; padding: 38px 24px 34px; border-radius: 2px 54px 2px 2px; }
	.cilloni-xmas__card-head { align-items: flex-start; flex-direction: column; }
	.cilloni-xmas__tabs { overflow-x: auto; scrollbar-width: none; }
	.cilloni-xmas__tabs::-webkit-scrollbar { display: none; }
	.cilloni-xmas__tabs button { min-width: max-content; padding-inline: 13px; }
	.cilloni-xmas__panel h3 { font-size: 2.2rem; }
	.cilloni-xmas__sprig { width: 390px; }
	.cilloni-xmas__sprig--left { left: -240px; }
	.cilloni-xmas__sprig--right { right: -240px; }
}

@media (prefers-reduced-motion: reduce) {
	.cilloni-xmas *,
	.cilloni-xmas *::before,
	.cilloni-xmas *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; }
	.cilloni-xmas__reveal { opacity: 1; transform: none; }
	.cilloni-xmas__snow { display: none; }
}