/* Mirror customisation — menu shape.
   The original nav is a row of near-square blocks (radius .2rem); here they
   read as pills, and the expanded menu panels get matching softer corners. */

/* All three keep one height and one radius so the row reads as a set. The
   height is up from the original 4rem to give the logo animation room. */
.nav .n-logo,
.nav .n-links,
.nav .n-toggle {
	height: 5rem;
	border-radius: 2.5rem; /* half the height = full pill */
}

/* Solid black instead of the original translucent glass. Because the
   pills no longer take their tone from the section behind them, their
   contents have to stay light even where the nav flips to its light theme. */
.nav .n-logo,
.nav .n-links,
.nav .n-toggle {
	background: #000;
}
.nav[data-theme="light"] {
	--navColor: var(--c-white, #fbfbf4);
}

/* the logo slot: wider padding, and a wider inner box for the animation */
.nav .n-logo {
	padding: 0 2.6rem;
}
.nav .n-logo svg {
	width: 12rem;
}

/* the other two grow with it rather than looking pinched next to it */
.nav .n-links {
	width: 34.6rem;
}
.nav .n-toggle {
	width: 7rem;
}

/* the hairline overlay inside each bordered element has to follow the shape */
.nav .border-inner {
	border-radius: 2.5rem;
}

/* on mobile the pills slide in from below their own height — that offset has
   to grow with them or they peek out while hidden */
@media (max-width: 1099px) {
	.nav .n-logo,
	.nav .n-toggle {
		transform: translateY(5.4rem);
	}
	.scrolled .nav .n-logo,
	.scrolled .nav .n-toggle {
		transform: translateY(0);
	}
}

.menu .m-top-item {
	border-radius: 1.4rem;
}

/* ==========================================================================
   The menu: what changed here and what was left alone.

   The three panels stay across the top and the four page links stay low on the
   left, both as the design had them. What went is the block that filled the
   rest of the bottom row — a phone number, a Write Us line, a newsletter
   sign-up and a column of underlined social names. The accounts from that list
   are badges now, standing at the bottom right where the block used to end.
   ========================================================================== */

.menu .m-bottom-right {
	display: none !important;
}

/* The bottom row: the words on the left, the badges out at the right, sitting
   on one line. They are laid as a row rather than stacked, which is what holds
   the badges' foot level with the last word — the alignment keeps itself
   whatever the words measure, and nothing is given a position of its own. */
.menu .m-bottom {
	flex-direction: row !important;
	align-items: flex-end !important;
	justify-content: space-between;
	width: 100%;
	/* the whole row sits nearer the foot of the screen than the design had it */
	margin-bottom: 2rem;
	padding-right: 2rem;
}

/* The links start where the panel above them starts. The design set them in by
   four rem against the panels' two, which left the column of words sitting a
   step inside everything else on the screen. */
.menu .m-links {
	margin-left: 2rem;
	margin-bottom: 0;
	width: max-content;
}

/* At the right-hand end of that row, standing on the line the last word ends
   on. Level boxes are not level type: the menu is set at 8.4rem on 120%, so a
   tenth of that size is empty leading under the letters, and a badge whose box
   bottom matched the word's box bottom sat that much below the letters
   themselves. The row is lifted by exactly that leading. */
.menu .fcg-m-social {
	justify-content: flex-end;
	margin: 0 0 0.84rem;
}

/* The arrow on a page link is not set here. ui-tweaks.css already replaces the
   design's diamond with it, and that sheet is linked after this one — rules
   added here to do the same job lost the tie and left the arrow half converted:
   taken out of absolute positioning by one sheet, kept at seven rem wide by the
   other, so it stood in the line at full width for ever and pushed every word
   in from the edge whether it was being pointed at or not. */

/* --- the social accounts, as badges --------------------------------------
   A card each: the name at the top, the mark at the foot. They are built from
   the links the menu already carried, so the addresses are the site's own. */
/* One width for all of them, and that width is whatever the longest name needs.
   Equal columns on a track sized to its own content: the grid measures every
   card, takes the widest, and gives that width to each. So nothing is cut and
   nothing is hard-coded — add an account with a longer name and they all grow
   to it together. */
.menu .fcg-m-social {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	width: max-content;
	gap: 0.6rem;
}
.menu .fcg-m-badge {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* The height is set and the width is not: a card is as wide as the name on
	   it needs, never narrower than it is tall. Held square, the longest names
	   ran past their own edge — and a square that fits "Instagram" would leave
	   "Behance" swimming in empty card. */
	/* the track above decides the width; this only keeps a card from ever being
	   narrower than it is tall */
	width: auto;
	min-width: 7.2rem;
	height: 7.2rem;
	/* the marks blend into this card, so the blending is kept inside it */
	isolation: isolate;
	padding: 0.9rem;
	border-radius: 0.9rem;
	background: var(--c-grey-dark, #141414);
	color: var(--c-white, #fbfbf4);
	transition: background 0.6s var(--ease);
}
/* On hover the card itself fills with the studio's blue and everything on it
   stays white. The site's own rule turns a hovered link's wording blue, which
   on a card that is a link left blue lettering on near-black — readable, but
   the card is the thing being pointed at, so the card is what should answer.
   The marks follow the wording, since they are drawn in the current colour. */
.menu .fcg-m-badge:hover {
	background: var(--hover-blue, #001eff);
}
/* Written this long on purpose. The site paints the wording of any hovered
   link blue through a rule carrying !important and a selector of four classes
   and two elements; on a blue card that put blue on blue and the name and the
   mark simply vanished. Matching that weight is not enough — this sheet is
   linked before that one, so a tie goes to it — hence one class more. */
.menu .fcg-m-social a.fcg-m-badge:hover,
.menu .fcg-m-social a.fcg-m-badge:hover span.fcg-m-badge-name,
.menu .fcg-m-social a.fcg-m-badge:hover span.fcg-m-badge-icon {
	color: var(--c-white, #fbfbf4) !important;
	opacity: 1 !important;
}

.menu .fcg-m-badge-name {
	font-size: 1.05rem;
	line-height: 1.2;
	/* it sets the card's width, so it must never break to a second line */
	white-space: nowrap;
}
.menu .fcg-m-badge-icon {
	position: relative;
	display: block;
	width: 2.2rem;
	height: 2.2rem;
}
/* Behance plays as a Lottie, drawn as vector into this box. Its artwork is
   black on nothing, so inverting alone turns it white — no blending is wanted
   here, because there is no ground to drop, unlike the pictures below. */
/* Behance plays as a Lottie, drawn as vector into this box.

   Its shapes are painted white here rather than inverted into white, which is
   how the other three are handled. Inverting turned it yellow on hover: the
   site paints the wording of a hovered link blue through a rule that reaches
   every span inside it, this box is a span, the drawing inherited that blue —
   and blue put through an inversion comes out yellow, which is arithmetic, not
   a bug. Painting the shapes directly leaves nothing for the inversion to get
   hold of, and the mark stays white on both grounds. */
.menu .fcg-m-lottie {
	display: block;
	width: 100%;
	height: 100%;
	color: var(--c-white, #fbfbf4) !important;
}
.menu .fcg-m-lottie svg path,
.menu .fcg-m-lottie svg g {
	fill: var(--c-white, #fbfbf4) !important;
}
.menu .fcg-m-lottie svg [stroke] {
	stroke: var(--c-white, #fbfbf4) !important;
}
.menu .fcg-m-lottie svg {
	display: block;
	width: 100% !important;
	height: 100% !important;
}
/* The photographed ones, still and moving, stacked in the same square.

   Their files are near-black artwork on solid white, and these cards are
   near-black — the wrong way round. Inverting turns the artwork white and the
   ground black; screen blending then drops black to nothing, since screening
   black leaves the backdrop untouched and screening white gives white. What is
   left is a white mark on the card, correct over both its resting colour and
   its blue. Done this way rather than by repainting the files, because
   repainting a moving picture frame by frame would cost the movement, which is
   the whole point of them. */
.menu .fcg-m-badge-icon img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: invert(1);
	mix-blend-mode: screen;
	transition: opacity 0.18s linear;
}
.menu .fcg-m-badge-icon .fcg-m-move {
	opacity: 0;
}
.menu .fcg-m-badge:hover .fcg-m-badge-icon .fcg-m-still {
	opacity: 0;
}
.menu .fcg-m-badge:hover .fcg-m-badge-icon .fcg-m-move {
	opacity: 1;
}



@media (max-width: 1099px) {
	/* The bottom row is a row on a wide screen: words on the left, badges out at
	   the right. There is no room for that here — the badges were pushed a
	   hundred and fifteen pixels past the edge of the screen — so the two stack,
	   the badges under the words they belong with. The desktop rule carries
	   !important, which is what has to be answered. */
	.menu .m-bottom {
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: flex-end;
		gap: 3rem;
		padding-right: 2rem;
	}
	/* lined up with the words above them: the links carry their own two rem of
	   indent, and without matching it the badges sat hard against the edge of
	   the screen with the first one clipped */
	.menu .fcg-m-social {
		justify-content: flex-start;
		margin-left: 2rem;
		flex-wrap: wrap;
	}

	.menu .fcg-m-badge {
		min-width: 6.2rem;
		height: 6.2rem;
	}
}

/* ==========================================================================
   The two dot marks, given one gesture each instead of nine.

   Both controls are built the same way: nine small squares, positioned
   absolutely, that scatter into a new arrangement on hover. It is a lot of
   moving parts for a mark a few millimetres across — at that size nine things
   travelling at once reads as a shimmer rather than as a shape becoming
   another shape. Each is given a single, legible move instead.
   ========================================================================== */

/* --- the nav's "..." : three dots close into one line --------------------
   The design rotates the whole mark ninety degrees while two more dots fade in
   on one axis and four on the other. This keeps the three that are already
   there and simply draws them together, so the mark says "this opens out"
   with one movement and no fading at all. */
.nav .n-toggle:hover .n-toggle-icon {
	transform: none;
}
.nav .n-toggle:hover .n-toggle-dot:nth-child(2) {
	transform: translate(0.25rem);
}
.nav .n-toggle:hover .n-toggle-dot:nth-child(3) {
	transform: none;
}
.nav .n-toggle:hover .n-toggle-dot:nth-child(4) {
	transform: translate(-0.25rem);
}
/* the six the design brings in are left where they are, out of sight */
.nav .n-toggle:hover .n-toggle-dot:nth-child(1),
.nav .n-toggle:hover .n-toggle-dot:nth-child(5),
.nav .n-toggle:hover .n-toggle-dot:nth-child(n + 6) {
	opacity: 0;
}

/* --- the menu's close: the dots give way to the site's own cross ---------
   Rather than nine squares finding their way into an X, the dots fade together
   and the cross this site already uses turns into place over them. It is the
   same mark as the one on the showreel's Close, so the two read as the same
   control in two places. */
.menu .m-close .m-close-icon {
	position: relative;
}
.menu .m-close .m-close-icon::after {
	content: "";
	position: absolute;
	inset: -0.35rem;
	background: var(--c-black, #020202);
	-webkit-mask: var(--fcg-close) center / contain no-repeat;
	mask: var(--fcg-close) center / contain no-repeat;
	opacity: 0;
	transform: rotate(-90deg) scale(0.55);
	transition: opacity 0.3s var(--ease), transform 0.55s var(--ease);
}
.menu .m-close:hover .m-close-icon::after {
	opacity: 1;
	transform: none;
}
/* the nine go quietly, all together, instead of scattering */
.menu .m-close:hover .m-close-dot {
	opacity: 0;
	transform: none;
}