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

.cilloni-self {
	--self-navy: #102b45;
	--self-deep: #0a2033;
	--self-green: #557c63;
	--self-lime: #94c94b;
	--self-sage: #dce8de;
	--self-gold: #cfb75f;
	position: relative;
	padding: clamp(96px, 11vw, 180px) clamp(20px, 5vw, 88px) clamp(120px, 14vw, 220px);
	overflow: hidden;
	background:
		radial-gradient(circle at 12% 78%, rgba(220,232,222,.74), transparent 27%),
		linear-gradient(134deg, #fff 0 55%, #f3f6f1 100%);
	color: var(--self-navy);
	font-family: "Avenir Next", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
	isolation: isolate;
}

.cilloni-self::before { position: absolute; z-index: -1; top: 0; left: 0; width: 45%; height: 5px; background: linear-gradient(90deg,var(--self-green),transparent); content: ""; }
.cilloni-self__grid { position: absolute; z-index: -2; inset: 0; background-image: linear-gradient(rgba(16,43,69,.027) 1px,transparent 1px),linear-gradient(90deg,rgba(16,43,69,.027) 1px,transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(to bottom,transparent,black 18%,black 80%,transparent); }
.cilloni-self__leaves { position: absolute; z-index: -1; right: -90px; bottom: -90px; width: min(31vw,500px); stroke: var(--self-green); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1; opacity: .09; pointer-events: none; }
.cilloni-self__inner { width: min(100%,1660px); margin: 0 auto; }

.cilloni-self__header { display: grid; margin-bottom: clamp(76px,9vw,140px); grid-template-columns: minmax(540px,1.3fr) minmax(320px,.7fr); align-items: end; gap: clamp(45px,8vw,145px); }
.cilloni-self__eyebrow { margin: 0 0 22px; color: var(--self-green); font-size: .64rem; font-weight: 760; letter-spacing: .18em; text-transform: uppercase; }
.cilloni-self__header h2 { position: relative; width: max-content; margin: 0; color: var(--self-navy); font-family: Georgia,"Times New Roman",serif; font-size: clamp(4.8rem,8vw,9.1rem); font-weight: 400; font-style: italic; letter-spacing: -.06em; line-height: .84; }
.cilloni-self__header h2::after { position: absolute; right: 3%; bottom: -.16em; left: 46%; height: .055em; border-radius: 999px; background: var(--self-lime); content: ""; opacity: .78; transform: rotate(-1deg); }
.cilloni-self__header > p { max-width: 575px; margin: 0 0 7px; color: rgba(16,43,69,.66); font-family: Georgia,"Times New Roman",serif; font-size: clamp(1.08rem,1.45vw,1.45rem); line-height: 1.68; }

.cilloni-self__experience { display: grid; grid-template-columns: minmax(330px,.82fr) minmax(300px,.72fr) minmax(270px,.54fr); align-items: stretch; gap: clamp(14px,1.5vw,25px); }
.cilloni-self__copy { padding: clamp(38px,4.5vw,72px); border: 1px solid rgba(16,43,69,.1); border-radius: 72px 2px 2px 2px; background: rgba(255,255,252,.94); box-shadow: 0 27px 80px rgba(16,43,69,.1); }
.cilloni-self__chapter { display: flex; margin: 0 0 30px; align-items: center; gap: 14px; color: var(--self-green); font-size: .59rem; font-weight: 760; letter-spacing: .15em; text-transform: uppercase; }
.cilloni-self__chapter i { display: block; width: 48px; height: 1px; background: rgba(85,124,99,.44); }
.cilloni-self__copy h3 { margin: 0 0 29px; color: var(--self-navy); font-family: Georgia,"Times New Roman",serif; font-size: clamp(2.8rem,4vw,4.7rem); font-weight: 400; line-height: .99; }
.cilloni-self__copy h3 em { color: var(--self-green); font-weight: 400; }
.cilloni-self__copy > p:not(.cilloni-self__chapter) { margin: 0; color: rgba(16,43,69,.63); font-size: .91rem; line-height: 1.76; }

.cilloni-self__features { display: grid; margin-top: 38px; border-top: 1px solid rgba(16,43,69,.11); }
.cilloni-self__features > div { display: grid; min-height: 67px; padding: 13px 0; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; border-bottom: 1px solid rgba(16,43,69,.1); }
.cilloni-self__features span { color: var(--self-lime); font-size: .56rem; font-weight: 800; }
.cilloni-self__features p { margin: 0; color: rgba(16,43,69,.47); font-size: .64rem; line-height: 1.4; }
.cilloni-self__features strong { display: block; margin-bottom: 2px; color: var(--self-navy); font-family: Georgia,"Times New Roman",serif; font-size: 1rem; font-weight: 400; }

.cilloni-self__photo { position: relative; min-height: 690px; margin: 0; overflow: hidden; background: #cad5d0; box-shadow: 0 30px 85px rgba(16,43,69,.15); }
.cilloni-self__photo::after { position: absolute; inset: 0; background: linear-gradient(to bottom,transparent 54%,rgba(10,32,51,.6)); content: ""; transition: background 800ms ease; }
.cilloni-self__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.015); transition: transform 1000ms cubic-bezier(.16,1,.3,1),filter 850ms ease; }
.cilloni-self__experience:hover .cilloni-self__photo img { transform: scale(1.045); }
.cilloni-self.is-night .cilloni-self__photo img { filter: brightness(.72) saturate(.78) contrast(1.05); }
.cilloni-self.is-night .cilloni-self__photo::after { background: linear-gradient(to bottom,rgba(7,24,40,.35),rgba(7,24,40,.82)); }
.cilloni-self__photo figcaption { position: absolute; z-index: 3; right: 20px; bottom: 21px; left: 20px; display: flex; padding: 17px 18px; align-items: center; gap: 13px; border: 1px solid rgba(255,255,255,.16); background: rgba(10,32,51,.68); color: #fff; -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); }
.cilloni-self__photo figcaption > span { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--self-lime); box-shadow: 0 0 0 6px rgba(148,201,75,.14); }
.cilloni-self__photo figcaption p { margin: 0; color: rgba(255,255,255,.52); font-size: .6rem; line-height: 1.4; }
.cilloni-self__photo figcaption strong { display: block; margin-bottom: 2px; color: #fff; font-family: Georgia,"Times New Roman",serif; font-size: .98rem; font-weight: 400; }

.cilloni-self__clock-card { display: flex; min-width: 0; padding: clamp(27px,3.3vw,50px); flex-direction: column; align-items: center; justify-content: center; border-radius: 2px 2px 76px 2px; background: var(--self-navy); box-shadow: 0 35px 90px rgba(16,43,69,.22); color: #fff; transition: background 850ms ease,box-shadow 850ms ease; }
.cilloni-self.is-night .cilloni-self__clock-card { background: #081b2c; box-shadow: 0 35px 100px rgba(8,27,44,.31); }
.cilloni-self__availability { display: flex; margin: 0 0 28px; align-items: center; gap: 10px; color: rgba(255,255,255,.58); font-size: .56rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.cilloni-self__availability i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--self-lime); box-shadow: 0 0 0 6px rgba(148,201,75,.13); animation: cilloni-self-live 2.5s ease-in-out infinite; }

.cilloni-self__dial { --self-angle: 180deg; position: relative; display: grid; width: min(100%,260px); aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,.06) 0 45%,transparent 46%),conic-gradient(from 0deg,rgba(148,201,75,.4),rgba(207,183,95,.17),rgba(255,255,255,.07),rgba(148,201,75,.4)); cursor: grab; touch-action: none; }
.cilloni-self__dial:active { cursor: grabbing; }
.cilloni-self__dial::before { position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: inherit; content: ""; }
.cilloni-self__dial:focus-visible { outline: 2px solid var(--self-lime); outline-offset: 7px; }
.cilloni-self__ticks { position: absolute; inset: 20px; border-radius: 50%; background: repeating-conic-gradient(from -1deg,rgba(255,255,255,.5) 0 1deg,transparent 1deg 15deg); -webkit-mask: radial-gradient(circle,transparent 0 82%,#000 83%); mask: radial-gradient(circle,transparent 0 82%,#000 83%); opacity: .45; }
.cilloni-self__hand { position: absolute; inset: 0; transform: rotate(var(--self-angle)); transition: transform 420ms cubic-bezier(.16,1,.3,1); pointer-events: none; }
.cilloni-self__hand::before { position: absolute; top: 18px; left: 50%; width: 2px; height: calc(50% - 32px); border-radius: 2px; background: linear-gradient(var(--self-lime),var(--self-gold)); content: ""; transform: translateX(-50%); box-shadow: 0 0 10px rgba(148,201,75,.35); }
.cilloni-self__hand i { position: absolute; top: 14px; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--self-lime); transform: translateX(-50%); box-shadow: 0 0 0 6px rgba(148,201,75,.12); }
.cilloni-self__time { position: relative; z-index: 2; text-align: center; pointer-events: none; }
.cilloni-self__time strong { display: block; color: #fff; font-family: Georgia,"Times New Roman",serif; font-size: clamp(2rem,3vw,3.1rem); font-weight: 400; letter-spacing: -.04em; }
.cilloni-self__time span { display: block; margin-top: 4px; color: var(--self-lime); font-size: .55rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.cilloni-self__dial-hint { max-width: 220px; margin: 22px 0 0; color: rgba(255,255,255,.42); font-size: .57rem; line-height: 1.5; text-align: center; }

.cilloni-self__price-note { display: grid; width: 100%; margin-top: 34px; padding-top: 24px; grid-template-columns: 35px 1fr 34px; align-items: center; gap: 11px; border-top: 1px solid rgba(255,255,255,.12); }
.cilloni-self__price-note > span { color: var(--self-gold); font-family: Georgia,"Times New Roman",serif; font-size: 1.7rem; }
.cilloni-self__price-note p { margin: 0; color: rgba(255,255,255,.42); font-size: .55rem; line-height: 1.4; }
.cilloni-self__price-note strong { display: block; color: #fff; font-family: Georgia,"Times New Roman",serif; font-size: .91rem; font-weight: 400; }
.cilloni-self__price-note svg { width: 31px; stroke: var(--self-gold); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.3; }

.cilloni-self__reveal { opacity: 0; transform: translateY(31px); transition: opacity 950ms ease,transform 1100ms cubic-bezier(.16,1,.3,1); }
.cilloni-self__reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes cilloni-self-live { 0%,100% { opacity: .55; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }

@media (max-width: 1220px) {
	.cilloni-self__header { grid-template-columns: 1fr; gap: 42px; }
	.cilloni-self__header > p { margin-left: clamp(38px,12vw,150px); }
	.cilloni-self__experience { grid-template-columns: 1fr 1fr; }
	.cilloni-self__copy { grid-column: 1/-1; width: min(86%,780px); margin-bottom: -70px; z-index: 3; }
	.cilloni-self__photo { min-height: 650px; }
}

@media (max-width: 720px) {
	.cilloni-self { padding: 84px 18px 100px; }
	.cilloni-self__header { margin-bottom: 67px; }
	.cilloni-self__header h2 { font-size: clamp(3.65rem,17vw,5.45rem); }
	.cilloni-self__header > p { margin-left: 25px; font-size: 1.04rem; }
	.cilloni-self__experience { grid-template-columns: 1fr; }
	.cilloni-self__copy { grid-column: auto; width: calc(100% - 16px); margin-bottom: -50px; padding: 38px 23px 34px; border-radius: 52px 2px 2px 2px; }
	.cilloni-self__copy h3 { font-size: 2.65rem; }
	.cilloni-self__photo { min-height: 600px; }
	.cilloni-self__clock-card { min-height: 520px; border-radius: 2px 2px 58px 2px; }
	.cilloni-self__dial { width: min(100%,245px); }
	.cilloni-self__leaves { right: -210px; width: 480px; }
}

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