/* Freestyle Movement — front page (static rebuild). Prefixed .fm- to avoid Inspiro collisions. */

.fm-front {
	--fm-bg: #0c0c0d;
	--fm-fg: #f4f4f4;
	--fm-muted: #a9a9ad;
	--fm-line: rgba(255,255,255,.12);
	--fm-accent: #ffffff;

	/* Swiss / International Typographic Style: a tight modular scale.
	   Limited sizes, hierarchy through weight + space, no drastic jumps. */
	--fm-fs-small: 0.8125rem;   /* 13px — labels, categories */
	--fm-fs-body:  1.0625rem;   /* 17px — body copy */
	--fm-fs-h3:    1.3125rem;   /* 21px — sub-heads, large lead */
	--fm-fs-lg:    clamp(1.6rem, 2.2vw, 2.1rem);  /* section headings */
	--fm-fs-xl:    clamp(2rem, 3vw, 2.6rem);      /* hero */

	background: var(--fm-bg);
	color: var(--fm-fg);
	font-family: inherit;
	font-size: var(--fm-fs-body);
	line-height: 1.6;
	overflow-x: hidden;
}
.fm-front *,
.fm-modal * { box-sizing: border-box; }

/* Reveal-on-scroll */
.fm-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.fm-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.fm-reveal { opacity: 1; transform: none; transition: none; }
}

/* Shared */
.fm-h2 { font-size: var(--fm-fs-lg); line-height: 1.15; margin: 0 0 1rem; letter-spacing: -0.01em; font-weight: 700; }
.fm-eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: var(--fm-fs-small); color: var(--fm-muted); margin: 0 0 .6rem; }

.fm-btn {
	display: inline-block; cursor: pointer; font: inherit; text-decoration: none;
	padding: .95rem 2.1rem; border-radius: 999px; letter-spacing: .04em;
	font-size: .9rem; text-transform: uppercase; transition: background .25s ease, color .25s ease, border-color .25s ease; border: 1px solid var(--fm-fg);
}
/* Ghost: light, subtle outline at rest; fills on hover. */
.fm-btn--ghost { background: transparent; color: var(--fm-fg); border-color: rgba(255,255,255,.4); }
.fm-btn--ghost:hover { background: var(--fm-fg); color: #0c0c0d; border-color: var(--fm-fg); }
.fm-btn--solid { background: var(--fm-fg); color: var(--fm-bg); }
.fm-btn--solid:hover { background: transparent; color: var(--fm-fg); }

/* HERO */
.fm-hero { position: relative; min-height: 92vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.fm-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.fm-hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6)); z-index: 1; }
.fm-hero__content { position: relative; z-index: 2; max-width: 880px; padding: 6rem 1.5rem; }
.fm-hero__kicker { font-size: var(--fm-fs-xl); font-weight: 700; letter-spacing: -.01em; margin: 0 0 1.4rem; }
.fm-hero__lead { font-size: var(--fm-fs-body); line-height: 1.7; color: #e7e7e7; margin: 0 0 2rem; }

/* BAND (agency statement) — full-width image, text overlaid */
.fm-band { position: relative; overflow: hidden; text-align: center; background: #0c0c0d; }
.fm-band__img { display: block; width: 100%; height: auto; transform: scale(1); will-change: transform; }
.fm-band__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; transform: scale(1); will-change: transform; }
.fm-band.is-webgl .fm-band__canvas { display: block; }
.fm-band.is-webgl .fm-band__img { visibility: hidden; }
.fm-band__veil { position: absolute; inset: 0; background: rgba(8,8,9,.42); }
.fm-band__inner { position: absolute; inset: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; max-width: 1040px; margin: 0 auto; padding: 1.5rem; text-shadow: 0 2px 24px rgba(0,0,0,.65); }
.fm-band .fm-h2 { text-wrap: balance; margin: 0; }
.fm-band__copy { color: var(--fm-muted); line-height: 1.7; margin: 0; max-width: 720px; }
.fm-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Keep the agency headline on one line from tablet up (no orphaned word). */
@media (min-width: 768px) { .fm-band .fm-h2 { white-space: nowrap; } }
/* On phones the panorama is too short to overlay text — use a tall crop. */
@media (max-width: 768px) {
	.fm-band__img { height: 78vh; object-fit: cover; object-position: center 66%; }
	.fm-band .fm-h2 { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .fm-band__img { transform: none !important; } }

/* WORK */
.fm-work { padding: 6rem 1.5rem; max-width: 1280px; margin: 0 auto; }
.fm-work__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2.4rem; flex-wrap: wrap; }
.fm-work__head .fm-h2 { margin: 0; }
.fm-work__count { color: var(--fm-muted); letter-spacing: .18em; text-transform: uppercase; font-size: .76rem; }
.fm-work__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.fm-work__item { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; text-decoration: none; }
.fm-work__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.fm-work__item:hover .fm-work__thumb { transform: scale(1.06); }
.fm-work__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.8)); }
.fm-work__meta { position: absolute; left: 1.1rem; bottom: 1rem; right: 1.1rem; display: flex; flex-direction: column; gap: .15rem; }
.fm-work__title { color: #fff; font-size: 1.05rem; font-weight: 600; }
.fm-work__cat { color: var(--fm-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; }

/* SERVICES */
.fm-services { padding: 6rem 1.5rem; max-width: 1280px; margin: 0 auto; }
.fm-services__head { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
.fm-services__intro { color: var(--fm-muted); line-height: 1.7; }
.fm-services__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 3.5rem; }
.fm-svc { border-top: 1px solid var(--fm-line); padding-top: 1.4rem; }
.fm-svc__name { font-size: 1.15rem; margin: 0 0 .6rem; }
.fm-svc__blurb { color: var(--fm-muted); font-size: .9rem; line-height: 1.6; margin: 0 0 1rem; }
.fm-svc__list { list-style: none; margin: 0; padding: 0; }
.fm-svc__list li { color: #cfcfd2; font-size: .86rem; padding: .32rem 0; border-bottom: 1px solid rgba(255,255,255,.05); }

.fm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.fm-card { position: relative; min-height: 260px; border-radius: 6px; overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: flex-end; }
.fm-card__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.78)); }
.fm-card__body { position: relative; padding: 1.4rem; }
.fm-card__title { font-size: 1.15rem; margin: 0 0 .5rem; }
.fm-card__link { color: #fff; text-decoration: none; font-size: .82rem; letter-spacing: .06em; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 2px; }
.fm-card__link:hover { border-color: #fff; }

/* ABOUT */
.fm-about { padding: 6rem 1.5rem; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: center; }
.fm-about__text p { color: var(--fm-muted); line-height: 1.8; margin: 0 0 1.1rem; }
.fm-about__text .fm-btn { margin-top: .6rem; }
.fm-about__media { display: grid; gap: 1rem; }
.fm-about__media img { width: 100%; height: auto; border-radius: 6px; display: block; }

/* CONSULTATION */
.fm-consult { position: relative; background-size: cover; background-position: center; padding: 7rem 1.5rem; text-align: center; }
.fm-consult__veil { position: absolute; inset: 0; background: rgba(8,8,9,.7); }
.fm-consult__inner { position: relative; max-width: 720px; margin: 0 auto; }
.fm-consult__inner p { color: #e2e2e2; line-height: 1.7; margin: 0 0 1.8rem; }

/* CLIENTS */
.fm-clients { padding: 6rem 1.5rem; max-width: 1100px; margin: 0 auto; text-align: center; }
.fm-clients__head { max-width: 640px; margin: 0 auto 3rem; }
.fm-clients__head p { color: var(--fm-muted); line-height: 1.7; }
.fm-clients__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 2rem; align-items: center; }
.fm-clients__cell { display: flex; align-items: center; justify-content: center; min-height: 70px; }
.fm-clients__cell img { max-width: 130px; max-height: 56px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .72; transition: opacity .25s ease; }
.fm-clients__cell img:hover { opacity: 1; }

/* TEAM */
.fm-team { padding: 4rem 1.5rem; text-align: center; border-top: 1px solid var(--fm-line); max-width: 1100px; margin: 0 auto; }
.fm-team__name { font-size: 1.3rem; margin: 0 0 .25rem; }
.fm-team__role { color: var(--fm-muted); margin: 0 0 1rem; }
.fm-team__social { list-style: none; display: flex; gap: 1.5rem; justify-content: center; padding: 0; margin: 0; }
.fm-team__social a { color: var(--fm-fg); text-decoration: none; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; border-bottom: 1px solid transparent; }
.fm-team__social a:hover { border-color: var(--fm-fg); }

/* FINAL CTA */
.fm-final { padding: 7rem 1.5rem; text-align: center; }
.fm-final__headline { font-size: var(--fm-fs-lg); line-height: 1.2; max-width: 900px; margin: 0 auto .9rem; text-wrap: balance; }
.fm-final__headline .fm-final__l1, .fm-final__headline .fm-final__l2 { display: inline; }
/* One line from tablet up; on mobile break after "Unleash your creativity". */
@media (min-width: 768px) { .fm-final__headline { white-space: nowrap; } }
@media (max-width: 767px) { .fm-final__headline .fm-final__l1 { display: block; } }
.fm-final__sub { color: #d8d8da; font-size: var(--fm-fs-h3); margin: 0 0 2rem; }

/* MODAL — animated */
.fm-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 1.5rem; visibility: hidden; pointer-events: none; }
.fm-modal.is-open { visibility: visible; pointer-events: auto; }
.fm-modal__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.7); opacity: 0; transition: opacity .35s ease; backdrop-filter: blur(2px); }
.fm-modal.is-open .fm-modal__scrim { opacity: 1; }
.fm-modal__panel {
	position: relative; width: 100%; max-width: 480px; background: #161618; color: #f4f4f4;
	border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 2.4rem 2rem;
	transform: translateY(28px) scale(.97); opacity: 0; transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
.fm-modal.is-open .fm-modal__panel { transform: none; opacity: 1; }
.fm-modal__close { position: absolute; top: .8rem; right: 1rem; background: none; border: 0; color: #bbb; font-size: 1.7rem; line-height: 1; cursor: pointer; transition: color .2s; }
.fm-modal__close:hover { color: #fff; }
.fm-modal__title { font-size: 1.5rem; margin: 0 0 .4rem; }
.fm-modal__sub { color: var(--fm-muted, #a9a9ad); font-size: .9rem; margin: 0 0 1.5rem; }
.fm-form { display: flex; flex-direction: column; gap: .8rem; }
.fm-form__field { width: 100%; background: #0e0e10; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: #f4f4f4; padding: .8rem 1rem; font: inherit; font-size: .92rem; transition: border-color .2s; }
.fm-form__field:focus { outline: none; border-color: #fff; }
.fm-form__field::placeholder { color: #76767c; }
textarea.fm-form__field { resize: vertical; min-height: 96px; }
.fm-form__submit { margin-top: .4rem; background: #fff; color: #111; border: 0; border-radius: 999px; padding: .85rem; font: inherit; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; transition: opacity .2s; }
.fm-form__submit:hover { opacity: .85; }
.fm-form__submit:disabled { opacity: .5; cursor: default; }
.fm-form__status { font-size: .85rem; margin: .4rem 0 0; min-height: 1.1em; }
.fm-form__status.is-error { color: #ff8a8a; }
.fm-form__status.is-ok { color: #8affa8; }

/* Responsive */
@media (max-width: 900px) {
	.fm-work__grid, .fm-services__cols, .fm-cards { grid-template-columns: repeat(2, 1fr); }
	.fm-about { grid-template-columns: 1fr; }
	.fm-clients__grid { grid-template-columns: repeat(3, 1fr); }
	.fm-band { background-attachment: scroll; }
}
@media (max-width: 560px) {
	.fm-work__grid, .fm-services__cols, .fm-cards { grid-template-columns: 1fr; }
	.fm-clients__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Shared design tokens (so .fm-page templates get the same scale) ===== */
:root {
	--fm-fs-small: 0.8125rem;
	--fm-fs-body:  1.0625rem;
	--fm-fs-h3:    1.3125rem;
	--fm-fs-lg:    clamp(1.6rem, 2.2vw, 2.1rem);
	--fm-fs-xl:    clamp(2rem, 3vw, 2.6rem);
	--fm-fg:    #f4f4f4;
	--fm-muted: #a9a9ad;
	--fm-line:  rgba(255,255,255,.12);
}

/* ===== Dark inner pages (About / Contact) — "murdered out" ===== */
body.fm-dark-page,
body.fm-dark-page .site,
body.fm-dark-page #page,
body.fm-dark-page .site-content-contain,
body.fm-dark-page .site-content,
body.fm-dark-page #content { background: #0c0c0d !important; }
.fm-page { background: #0c0c0d; color: var(--fm-fg); font-size: var(--fm-fs-body); line-height: 1.6; padding: clamp(4rem, 8vw, 7rem) 1.5rem; }
.fm-page a { color: var(--fm-fg); }
.fm-page__inner { max-width: 1100px; margin: 0 auto; }
.fm-page__title { font-size: var(--fm-fs-xl); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 2rem; }
.fm-page__hero { width: 100%; height: clamp(260px, 46vh, 540px); overflow: hidden; background: #0c0c0d; }
.fm-page__hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fm-about-layout { display: grid; grid-template-columns: 300px 1fr; gap: 3.5rem; align-items: start; }
.fm-contact-layout { display: grid; grid-template-columns: 1fr 300px; gap: 3.5rem; align-items: start; }
.fm-about-main .fm-h2 { font-size: var(--fm-fs-lg); margin: 0 0 1.4rem; }
.fm-about-main p { color: var(--fm-muted); line-height: 1.8; margin: 0 0 1.1rem; }

.fm-locations { border-top: 1px solid var(--fm-line); padding-top: 1.1rem; margin-bottom: 1.8rem; }
.fm-locations__label { font-size: var(--fm-fs-small); text-transform: uppercase; letter-spacing: .2em; color: var(--fm-muted); margin: 0 0 .9rem; }
.fm-locations ul { list-style: none; margin: 0; padding: 0; }
.fm-locations li { font-size: var(--fm-fs-h3); margin: 0 0 .35rem; }

.fm-coming { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3.5rem; border-top: 1px solid var(--fm-line); padding-top: 2rem; }
.fm-coming h3 { font-size: var(--fm-fs-h3); margin: 0 0 .3rem; }
.fm-coming p { color: var(--fm-muted); margin: 0; }

.fm-contact__lead { font-size: var(--fm-fs-lg); margin: 0 0 1.8rem; }
.fm-form--page { max-width: 540px; }

@media (max-width: 820px) {
	.fm-about-layout, .fm-contact-layout { grid-template-columns: 1fr; gap: 2rem; }
	.fm-coming { grid-template-columns: 1fr; }
}

/* ===== Color overrides — beat Inspiro's explicit heading colors ===== */
.fm-front h1, .fm-front h2, .fm-front h3, .fm-front h4,
.fm-page h1, .fm-page h2, .fm-page h3, .fm-page h4 { color: var(--fm-fg) !important; }
.fm-front .fm-hero__kicker, .fm-front .fm-hero__lead { color: #fff !important; }
.fm-front .fm-work__title, .fm-front .fm-card__title { color: #fff !important; }
.fm-front .fm-services__intro, .fm-front .fm-clients__head p, .fm-front .fm-band__copy { color: var(--fm-muted) !important; }
.fm-page p, .fm-page li { color: var(--fm-fg); }
.fm-page .fm-about-main p { color: var(--fm-muted); }