/* FM — stili globali: reset, animazioni, hover/focus, responsive.
   Gli stili statici stanno inline nei template (fedeltà al mockup);
   qui vivono solo gli stati e il responsive. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #111210; color: #ECEAE3; font-family: 'Manrope', sans-serif; }
img { max-width: 100%; }
::selection { background: #ECEAE3; color: #111210; }

@keyframes fmRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fmZoom { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }

.fm-root { position: relative; overflow: hidden; min-height: 100vh; }

/* ---------- NAV ---------- */
.fm-nav {
	display: flex; justify-content: space-between; align-items: center;
	padding: 28px 48px; font-family: 'Manrope', sans-serif;
}
.fm-nav--overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
.fm-nav--solid { position: relative; }
.fm-nav--solid::after {
	content: ""; position: absolute; left: 48px; right: 48px; bottom: 0;
	height: 1px; background: rgba(236,234,227,.14);
}
.fm-wordmark {
	font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 24px;
	letter-spacing: .42em; padding-left: .42em; color: #ECEAE3; text-decoration: none;
}
.fm-navlinks { display: flex; gap: 34px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }
.fm-navlink {
	position: relative; color: rgba(236,234,227,.78); text-decoration: none;
	padding-bottom: 4px; transition: color .2s ease;
}
.fm-navlink:hover { color: #ECEAE3; }
.fm-navlink.is-active::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0;
	height: 1px; background: rgba(236,234,227,.7);
}

/* ---------- SHOT (hover zoom) ---------- */
.fm-shot:hover .fm-shot-img { transform: scale(1.045); }

/* ---------- LINK / BOTTONI ---------- */
.fm-btn-outline { transition: background .2s ease, color .2s ease, border-color .2s ease; }
.fm-btn-outline:hover { background: #ECEAE3 !important; color: #111210 !important; border-color: #ECEAE3 !important; }
.fm-mlink, .fm-flink { transition: color .2s ease; }
.fm-mlink:hover, .fm-flink:hover { color: #ECEAE3 !important; }
.fm-ilink { transition: opacity .2s ease; }
.fm-ilink:hover { opacity: .7; }

/* ---------- CHIP FILTRO ---------- */
.fm-chip {
	font-family: 'Manrope', sans-serif; font-size: 12px; letter-spacing: .1em;
	text-transform: uppercase; font-weight: 500; padding: 10px 18px; border-radius: 2px;
	cursor: pointer; transition: all .2s ease;
	background: transparent; color: rgba(236,234,227,.7); border: 1px solid rgba(236,234,227,.22);
}
.fm-chip:hover { color: #ECEAE3; border-color: rgba(236,234,227,.45); }
.fm-chip.is-active { background: #ECEAE3; color: #111210; border-color: #ECEAE3; }

/* ---------- CARD PORTFOLIO ---------- */
.fm-card { transition: opacity .2s ease; }
.fm-card:hover { opacity: .94; }
.fm-card[hidden] { display: none !important; }

/* ---------- FORM ---------- */
.fm-input:focus { border-bottom-color: rgba(236,234,227,.7) !important; }
.fm-input::placeholder { color: rgba(236,234,227,.38); }
.fm-select option { background: #1a1b18; color: #ECEAE3; }
.fm-submit:hover { opacity: .85; }
.fm-submit:disabled { opacity: .5; cursor: default; }

/* ---------- LIGHTBOX ---------- */
.fm-lightbox { animation: fmFade .35s ease both; }
.fm-lightbox-inner { animation: fmZoom .4s cubic-bezier(.2,.6,.15,1) both; }
.fm-lb-close, .fm-lb-prev, .fm-lb-next { transition: background .2s ease, color .2s ease; }
.fm-lb-close:hover, .fm-lb-prev:hover, .fm-lb-next:hover { background: #ECEAE3; color: #111210; }

/* ---------- RICHTEXT (paragrafi WYSIWYG) ---------- */
.fm-richtext p { margin: 0 0 26px; }
.fm-richtext p:last-child { margin-bottom: 0; }
.fm-richtext a { color: #ECEAE3; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
	.fm-root section[style] { padding-left: 24px !important; padding-right: 24px !important; }
	.fm-nav { padding-left: 24px !important; padding-right: 24px !important; }
	.fm-nav--solid::after { left: 24px; right: 24px; }
	.fm-footer { padding-left: 24px !important; padding-right: 24px !important; }
	.fm-hero-copy { left: 24px !important; right: 24px !important; }

	.fm-grid-3 { grid-template-columns: 1fr !important; }
	.fm-2col, .fm-2col--about, .fm-2col--contact { grid-template-columns: 1fr !important; gap: 40px !important; }
	.fm-sticky { position: static !important; height: 70vh !important; min-height: 420px; }

	.fm-navlinks { gap: 16px; font-size: 11px; }
	.fm-wordmark { font-size: 20px; }
	.fm-footer-top { gap: 40px; }
}

@media (max-width: 560px) {
	.fm-grid-2 { grid-template-columns: 1fr !important; }
	.fm-navlinks { gap: 12px; letter-spacing: .1em; }
}