/* Custom cursor: a black dot that follows the pointer and swells into a
   larger inverted ball over anything clickable — no label, as in the brief.

   Only on devices that actually have a pointer; touch keeps its own behaviour
   and the native cursor is left alone there. */

@media (hover: hover) and (pointer: fine) {
	html,
	body,
	a,
	button,
	.btn,
	.btn-block,
	.work-wrapper,
	[role="button"] {
		cursor: none;
	}

	/* The cursor itself is a point, not a shape: it carries no size and no
	   colour, and only marks where the pointer is. What is drawn are the two
	   things hung from it, both centred on that point.

	   They are two rather than one because they have to cross over. The ball and
	   the badge are different sizes, and a badge is only ever as wide as the
	   wording inside it — so one element turning into the other has to go from a
	   set width to `auto`, and that is not something a browser can animate. It
	   snaps, which is what this section is here to stop. Kept apart, neither ever
	   changes size at all: one falls away as the other rises, both on transform
	   and opacity, which the compositor handles without touching layout. */
	/* The cursor element draws nothing and takes no space: `display: contents`
	   means it generates no box at all, and the two things inside it stand
	   directly in the page as though they were the body's own children.

	   That is not tidiness, it is the whole reason the ball is visible. The ball
	   inverts what is under it, and an element can only blend with the backdrop
	   of the stacking context its parent sits in. A wrapper with a position and
	   a z-index makes a stacking context of its own — an empty one — so a ball
	   inside such a wrapper has nothing to invert and comes out plain white on a
	   cream page. Generating no box, this wrapper makes no stacking context, and
	   the ball goes on blending with the page exactly as it did when it was the
	   wrapper. */
	.fcg-cursor {
		display: contents;
	}

	/* Both are placed on the pointer by the script, which writes the same
	   position to each of them on every frame. */
	.fcg-cursor-dot,
	.fcg-cursor-badge {
		position: fixed;
		top: 0;
		left: 0;
		/* above every layer the site stacks, so what they draw covers what they
		   are over instead of letting labels draw through */
		z-index: 2147483647;
		pointer-events: none;
		will-change: transform;
	}

	/* The ball. Difference blending inverts whatever it passes over, so the text
	   under it reads through instead of being covered.

	   It is centred on the pointer by half its own size in negative margin
	   rather than by a transform, because the transform is the script's: it is
	   rewritten every frame with the pointer's position, and anything CSS put
	   there would be wiped. The margins move with the width and the height, so
	   the ball stays centred at whatever size it is, growing and shrinking about
	   its own middle. */
	.fcg-cursor-dot {
		width: 1.4rem;
		height: 1.4rem;
		margin: -0.7rem 0 0 -0.7rem;
		border-radius: 999px;
		background: #fff;
		mix-blend-mode: difference;
		/* The ball is redrawn every frame and blends against whatever is under
		   it. Saying so up front lets the compositor keep it on a layer of its
		   own instead of working that out again on each move, and the
		   containment stops anything inside it from inviting the rest of the
		   page into the same repaint. */
		will-change: transform;
		contain: layout style paint;
		transition: width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
			height 0.34s cubic-bezier(0.22, 1, 0.36, 1),
			margin 0.34s cubic-bezier(0.22, 1, 0.36, 1),
			background-color 0.34s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.24s ease;
	}

	/* The badge is carried on a point of its own, so the pill inside it is free
	   to be centred and scaled by CSS while the script writes the position out
	   here. The badge never blends, so a stacking context here costs nothing. */
	.fcg-cursor-badge {
		width: 0;
		height: 0;
		will-change: transform;
	}

	/* The badge. It waits shrunk and clear and comes up to size when it is
	   wanted, a touch past it and back — the overshoot in the curve — so it
	   arrives rather than appears.

	   Hidden by visibility as well as by opacity, and only once the fade has
	   finished: WebKit still composites a filtered backdrop behind an element
	   that is fully transparent, which used to leave a smear of blurred card on
	   the page. Fading first and hiding after means the blur goes out with the
	   badge instead of being cut away underneath it. */
	.fcg-cursor-pill {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.9rem;
		padding: 0.5rem 1.7rem 0.5rem 0.5rem;
		border-radius: 999px;
		/* Dark rather than light. A fifth of white over a blur reads beautifully
		   on a photograph and disappears completely on a white page, taking its
		   white lettering with it — which is exactly what happened in the gaps
		   between the cards on the work pages. Dark works on both: over a
		   picture it still reads as frosted glass, and over paper it is the only
		   thing on the screen that could be a button. */
		/* Glass, but dark glass. A fifth of white over a blur is what the design
		   had, and it reads beautifully on a photograph and vanishes completely
		   on a white page, taking its white lettering with it. Dark and still
		   sheer keeps both: what is behind goes on showing through, and there is
		   always enough of it to carry the wording. */
		background: rgba(2, 2, 2, 0.42);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		white-space: nowrap;
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, -50%) scale(0.55);
		transition: opacity 0.24s ease,
			transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0s linear 0.24s;
	}

	/* the crossover: wherever a badge is called for, the ball goes down and the
	   badge comes up, and the two overlap in the middle */
	.fcg-cursor.is-label .fcg-cursor-dot,
	.fcg-cursor.is-play .fcg-cursor-dot,
	.fcg-cursor.is-next .fcg-cursor-dot,
	.fcg-cursor.is-prev .fcg-cursor-dot {
		width: 0;
		height: 0;
		margin: 0;
		opacity: 0;
	}
	.fcg-cursor.is-label .fcg-cursor-pill,
	.fcg-cursor.is-play .fcg-cursor-pill,
	.fcg-cursor.is-next .fcg-cursor-pill,
	.fcg-cursor.is-prev .fcg-cursor-pill {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, -50%) scale(1);
		transition: opacity 0.24s ease,
			transform 0.42s cubic-bezier(0.22, 1.14, 0.36, 1),
			visibility 0s;
	}

	/* Over anything that can be clicked the ball simply grows.

	   It used to step aside there instead, which was the wrong way round: the
	   page hides the native pointer, so on every link, button and the Let's work
	   together panel — the things a pointer is most often aimed at — there was
	   nothing on the screen at all. */
	/* Over the site's own buttons the ball steps aside altogether. Those already
	   draw a mark at the pointer — the ring with the arrow in it — and a ball
	   sitting on top of that is two things saying the same thing. It leaves the
	   way the badge does, shrinking into the point it stands on. */
	.fcg-cursor.is-hidden .fcg-cursor-dot {
		width: 0;
		height: 0;
		margin: 0;
		opacity: 0;
	}

	/* It opens to a little over twice the resting ball and stays solid.

	   Solid is the point: at full strength the difference blending turns what is
	   under it into its own negative — a black button with white lettering comes
	   through as a white disc with black lettering, clean either way round. Made
	   sheer instead, the inversion is only half done and mixes back into what it
	   is over, which over a black pill on a cream page came out as a muddy grey
	   smear rather than as anything deliberate. */
	.fcg-cursor.is-grow .fcg-cursor-dot {
		width: 2.4rem;
		height: 2.4rem;
		margin: -1.2rem 0 0 -1.2rem;
		opacity: 1;
	}

	/* The footer is the one ground the inversion cannot serve: against its blue,
	   difference blending comes out yellow. There the ball is painted rather
	   than blended — flat black at rest, and sheer once it is grown, since a
	   solid disc that size would simply cover the white lettering it is on. */
	.fcg-cursor.is-dark .fcg-cursor-dot {
		background: #000;
		mix-blend-mode: normal;
	}
	.fcg-cursor.is-dark.is-grow .fcg-cursor-dot {
		background: rgba(0, 0, 0, 0.55);
	}

	/* Over a project card and over the showreel the ball is replaced by a
	   badge: a frosted pill with a black disc — an arrow for "View", a play
	   triangle for "Play" — and the label beside it. */
	/* the wording is simply in the badge and rides its fade; it needs no fading
	   of its own */
	.fcg-cursor-label {
		font-size: 1.3rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--c-white, #fbfbf4);
		white-space: nowrap;
	}
	.fcg-cursor.is-label .fcg-cursor-icon {
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2036%2036%27%3E%3Cg%20transform%3D%27translate%2818%2018%29%20rotate%2845%29%20scale%281.4%29%20translate%28-18%20-18%29%27%3E%3Cpath%20d%3D%27M8.36393%2026.3642L7.65682%2027.0713L9.07103%2028.4855L9.77814%2027.7784L8.36393%2026.3642ZM28.1629%209.39362C28.5534%209.00309%2028.5534%208.36993%2028.1629%207.9794C27.7724%207.58888%2027.1392%207.58888%2026.7487%207.9794L28.1629%209.39362ZM14.0208%207.9794L13.3137%207.2723L11.8995%208.68651L12.6066%209.39362L14.0208%207.9794ZM27.5959%209.64587C28.1257%209.49003%2028.4289%208.93417%2028.273%208.40433C28.1172%207.87449%2027.5613%207.57131%2027.0315%207.72715L27.5959%209.64587ZM26.6776%2023.4647L27.3847%2024.1718L28.7989%2022.7576L28.0918%2022.0505L26.6776%2023.4647ZM9.77814%2027.7784L28.0918%209.46474L26.6776%208.05053L8.36393%2026.3642L9.77814%2027.7784ZM28.0918%209.46474L28.1629%209.39362L26.7487%207.9794L26.6776%208.05053L28.0918%209.46474ZM12.6066%209.39362C13.6477%2010.4348%2015.2045%2010.8668%2016.7421%2011.0237C18.311%2011.1838%2020.0463%2011.0752%2021.6341%2010.8716C23.2292%2010.6671%2024.7161%2010.3613%2025.8012%2010.1077C26.3448%209.98072%2026.7902%209.86621%2027.101%209.78305C27.2565%209.74146%2027.3785%209.70768%2027.4624%209.68404C27.5044%209.67222%2027.5369%209.66293%2027.5593%209.65648C27.5705%209.65325%2027.5792%209.65073%2027.5853%209.64895C27.5884%209.64806%2027.5908%209.64735%2027.5926%209.64684C27.5934%209.64658%2027.5942%209.64637%2027.5947%209.64621C27.595%209.64613%2027.5953%209.64604%2027.5954%209.646C27.5957%209.64593%2027.5959%209.64587%2027.3137%208.68651C27.0315%207.72715%2027.0316%207.72711%2027.0317%207.72709C27.0317%207.7271%2027.0317%207.72709%2027.0317%207.7271C27.0315%207.72713%2027.0313%207.72721%2027.0308%207.72734C27.03%207.72759%2027.0285%207.72804%2027.0263%207.72867C27.022%207.72992%2027.0151%207.73191%2027.0058%207.73461C26.9871%207.74%2026.9584%207.74819%2026.9204%207.7589C26.8443%207.78032%2026.7307%207.81179%2026.5842%207.85099C26.291%207.92942%2025.8664%208.03864%2025.3461%208.16021C24.3034%208.40384%2022.8869%208.69464%2021.3797%208.88787C19.8653%209.08205%2018.2994%209.17228%2016.9451%209.03407C15.5594%208.89267%2014.5706%208.52924%2014.0208%207.9794L12.6066%209.39362ZM27.3847%208.75764C26.4642%208.36693%2026.4641%208.3672%2026.4639%208.36751C26.4639%208.36766%2026.4637%208.368%2026.4636%208.36831C26.4633%208.36891%2026.463%208.36967%2026.4626%208.37058C26.4619%208.3724%2026.4608%208.37481%2026.4596%208.37781C26.4571%208.38382%2026.4536%208.39218%2026.4491%208.40285C26.4403%208.42418%2026.4277%208.45472%2026.4118%208.49399C26.3801%208.57253%2026.335%208.68608%2026.2796%208.83082C26.1689%209.12016%2026.0169%209.53502%2025.8485%2010.0448C25.5126%2011.0618%2025.1069%2012.4697%2024.8353%2014.0209C24.5649%2015.5657%2024.4199%2017.2945%2024.6331%2018.9388C24.8466%2020.585%2025.4293%2022.2165%2026.6776%2023.4647L28.0918%2022.0505C27.2543%2021.213%2026.7941%2020.0516%2026.6165%2018.6817C26.4386%2017.3099%2026.5544%2015.7994%2026.8054%2014.3657C27.0553%2012.9383%2027.4317%2011.6284%2027.7476%2010.6722C27.9051%2010.1954%2028.0464%209.80982%2028.1476%209.54538C28.1981%209.41323%2028.2386%209.31154%2028.2659%209.24407C28.2795%209.21034%2028.2899%209.18518%2028.2966%209.16907C28.2999%209.16101%2028.3023%209.15521%2028.3038%209.15174C28.3045%209.15%2028.305%209.14884%2028.3052%209.14828C28.3054%209.14799%2028.3054%209.14785%2028.3054%209.14786C28.3054%209.14787%2028.3054%209.14799%2028.3054%209.14799C28.3053%209.14815%2028.3052%209.14834%2027.3847%208.75764Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	}
	/* the site's own follower would double up with this one */
	.btn-view {
		display: none !important;
	}

	/* the disc the badge carries: an arrow for View, a triangle for Play, an
	   arrow turned either way for the carousel. Which one is a background
	   image, so swapping it costs no layout. */
	.fcg-cursor.is-play .fcg-cursor-icon {
		background-image: var(--fcg-play);
	}
	.fcg-cursor-icon {
		display: block;
		flex: 0 0 auto;
		width: 3.4rem;
		height: 3.4rem;
		border-radius: 50%;
		background: #000 center / 46% no-repeat;
	}
	

	/* the reel's own Showreel pill gives way to the cursor badge */
	#home .exp .exp-btn-block-wrapper .btn {
		display: none !important;
	}

	/* Over the carousel the badge names the step it will take and points at
	   it — the same frosted pill, with the arrow turned to match. The label
	   leads on the way back, so the arrow always sits on the side it moves
	   towards. */
	.fcg-cursor.is-next .fcg-cursor-pill {
		padding: 0.5rem 0.5rem 0.5rem 1.7rem;
		flex-direction: row-reverse;
	}
	.fcg-cursor.is-next .fcg-cursor-icon {
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2036%2036%27%3E%3Cg%20transform%3D%27translate%2818%2018%29%20rotate%2845%29%20scale%281.4%29%20translate%28-18%20-18%29%27%3E%3Cpath%20d%3D%27M8.36393%2026.3642L7.65682%2027.0713L9.07103%2028.4855L9.77814%2027.7784L8.36393%2026.3642ZM28.1629%209.39362C28.5534%209.00309%2028.5534%208.36993%2028.1629%207.9794C27.7724%207.58888%2027.1392%207.58888%2026.7487%207.9794L28.1629%209.39362ZM14.0208%207.9794L13.3137%207.2723L11.8995%208.68651L12.6066%209.39362L14.0208%207.9794ZM27.5959%209.64587C28.1257%209.49003%2028.4289%208.93417%2028.273%208.40433C28.1172%207.87449%2027.5613%207.57131%2027.0315%207.72715L27.5959%209.64587ZM26.6776%2023.4647L27.3847%2024.1718L28.7989%2022.7576L28.0918%2022.0505L26.6776%2023.4647ZM9.77814%2027.7784L28.0918%209.46474L26.6776%208.05053L8.36393%2026.3642L9.77814%2027.7784ZM28.0918%209.46474L28.1629%209.39362L26.7487%207.9794L26.6776%208.05053L28.0918%209.46474ZM12.6066%209.39362C13.6477%2010.4348%2015.2045%2010.8668%2016.7421%2011.0237C18.311%2011.1838%2020.0463%2011.0752%2021.6341%2010.8716C23.2292%2010.6671%2024.7161%2010.3613%2025.8012%2010.1077C26.3448%209.98072%2026.7902%209.86621%2027.101%209.78305C27.2565%209.74146%2027.3785%209.70768%2027.4624%209.68404C27.5044%209.67222%2027.5369%209.66293%2027.5593%209.65648C27.5705%209.65325%2027.5792%209.65073%2027.5853%209.64895C27.5884%209.64806%2027.5908%209.64735%2027.5926%209.64684C27.5934%209.64658%2027.5942%209.64637%2027.5947%209.64621C27.595%209.64613%2027.5953%209.64604%2027.5954%209.646C27.5957%209.64593%2027.5959%209.64587%2027.3137%208.68651C27.0315%207.72715%2027.0316%207.72711%2027.0317%207.72709C27.0317%207.7271%2027.0317%207.72709%2027.0317%207.7271C27.0315%207.72713%2027.0313%207.72721%2027.0308%207.72734C27.03%207.72759%2027.0285%207.72804%2027.0263%207.72867C27.022%207.72992%2027.0151%207.73191%2027.0058%207.73461C26.9871%207.74%2026.9584%207.74819%2026.9204%207.7589C26.8443%207.78032%2026.7307%207.81179%2026.5842%207.85099C26.291%207.92942%2025.8664%208.03864%2025.3461%208.16021C24.3034%208.40384%2022.8869%208.69464%2021.3797%208.88787C19.8653%209.08205%2018.2994%209.17228%2016.9451%209.03407C15.5594%208.89267%2014.5706%208.52924%2014.0208%207.9794L12.6066%209.39362ZM27.3847%208.75764C26.4642%208.36693%2026.4641%208.3672%2026.4639%208.36751C26.4639%208.36766%2026.4637%208.368%2026.4636%208.36831C26.4633%208.36891%2026.463%208.36967%2026.4626%208.37058C26.4619%208.3724%2026.4608%208.37481%2026.4596%208.37781C26.4571%208.38382%2026.4536%208.39218%2026.4491%208.40285C26.4403%208.42418%2026.4277%208.45472%2026.4118%208.49399C26.3801%208.57253%2026.335%208.68608%2026.2796%208.83082C26.1689%209.12016%2026.0169%209.53502%2025.8485%2010.0448C25.5126%2011.0618%2025.1069%2012.4697%2024.8353%2014.0209C24.5649%2015.5657%2024.4199%2017.2945%2024.6331%2018.9388C24.8466%2020.585%2025.4293%2022.2165%2026.6776%2023.4647L28.0918%2022.0505C27.2543%2021.213%2026.7941%2020.0516%2026.6165%2018.6817C26.4386%2017.3099%2026.5544%2015.7994%2026.8054%2014.3657C27.0553%2012.9383%2027.4317%2011.6284%2027.7476%2010.6722C27.9051%2010.1954%2028.0464%209.80982%2028.1476%209.54538C28.1981%209.41323%2028.2386%209.31154%2028.2659%209.24407C28.2795%209.21034%2028.2899%209.18518%2028.2966%209.16907C28.2999%209.16101%2028.3023%209.15521%2028.3038%209.15174C28.3045%209.15%2028.305%209.14884%2028.3052%209.14828C28.3054%209.14799%2028.3054%209.14785%2028.3054%209.14786C28.3054%209.14787%2028.3054%209.14799%2028.3054%209.14799C28.3053%209.14815%2028.3052%209.14834%2027.3847%208.75764Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	}
	.fcg-cursor.is-prev .fcg-cursor-icon {
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2036%2036%27%3E%3Cg%20transform%3D%27translate%2818%2018%29%20rotate%28225%29%20scale%281.4%29%20translate%28-18%20-18%29%27%3E%3Cpath%20d%3D%27M8.36393%2026.3642L7.65682%2027.0713L9.07103%2028.4855L9.77814%2027.7784L8.36393%2026.3642ZM28.1629%209.39362C28.5534%209.00309%2028.5534%208.36993%2028.1629%207.9794C27.7724%207.58888%2027.1392%207.58888%2026.7487%207.9794L28.1629%209.39362ZM14.0208%207.9794L13.3137%207.2723L11.8995%208.68651L12.6066%209.39362L14.0208%207.9794ZM27.5959%209.64587C28.1257%209.49003%2028.4289%208.93417%2028.273%208.40433C28.1172%207.87449%2027.5613%207.57131%2027.0315%207.72715L27.5959%209.64587ZM26.6776%2023.4647L27.3847%2024.1718L28.7989%2022.7576L28.0918%2022.0505L26.6776%2023.4647ZM9.77814%2027.7784L28.0918%209.46474L26.6776%208.05053L8.36393%2026.3642L9.77814%2027.7784ZM28.0918%209.46474L28.1629%209.39362L26.7487%207.9794L26.6776%208.05053L28.0918%209.46474ZM12.6066%209.39362C13.6477%2010.4348%2015.2045%2010.8668%2016.7421%2011.0237C18.311%2011.1838%2020.0463%2011.0752%2021.6341%2010.8716C23.2292%2010.6671%2024.7161%2010.3613%2025.8012%2010.1077C26.3448%209.98072%2026.7902%209.86621%2027.101%209.78305C27.2565%209.74146%2027.3785%209.70768%2027.4624%209.68404C27.5044%209.67222%2027.5369%209.66293%2027.5593%209.65648C27.5705%209.65325%2027.5792%209.65073%2027.5853%209.64895C27.5884%209.64806%2027.5908%209.64735%2027.5926%209.64684C27.5934%209.64658%2027.5942%209.64637%2027.5947%209.64621C27.595%209.64613%2027.5953%209.64604%2027.5954%209.646C27.5957%209.64593%2027.5959%209.64587%2027.3137%208.68651C27.0315%207.72715%2027.0316%207.72711%2027.0317%207.72709C27.0317%207.7271%2027.0317%207.72709%2027.0317%207.7271C27.0315%207.72713%2027.0313%207.72721%2027.0308%207.72734C27.03%207.72759%2027.0285%207.72804%2027.0263%207.72867C27.022%207.72992%2027.0151%207.73191%2027.0058%207.73461C26.9871%207.74%2026.9584%207.74819%2026.9204%207.7589C26.8443%207.78032%2026.7307%207.81179%2026.5842%207.85099C26.291%207.92942%2025.8664%208.03864%2025.3461%208.16021C24.3034%208.40384%2022.8869%208.69464%2021.3797%208.88787C19.8653%209.08205%2018.2994%209.17228%2016.9451%209.03407C15.5594%208.89267%2014.5706%208.52924%2014.0208%207.9794L12.6066%209.39362ZM27.3847%208.75764C26.4642%208.36693%2026.4641%208.3672%2026.4639%208.36751C26.4639%208.36766%2026.4637%208.368%2026.4636%208.36831C26.4633%208.36891%2026.463%208.36967%2026.4626%208.37058C26.4619%208.3724%2026.4608%208.37481%2026.4596%208.37781C26.4571%208.38382%2026.4536%208.39218%2026.4491%208.40285C26.4403%208.42418%2026.4277%208.45472%2026.4118%208.49399C26.3801%208.57253%2026.335%208.68608%2026.2796%208.83082C26.1689%209.12016%2026.0169%209.53502%2025.8485%2010.0448C25.5126%2011.0618%2025.1069%2012.4697%2024.8353%2014.0209C24.5649%2015.5657%2024.4199%2017.2945%2024.6331%2018.9388C24.8466%2020.585%2025.4293%2022.2165%2026.6776%2023.4647L28.0918%2022.0505C27.2543%2021.213%2026.7941%2020.0516%2026.6165%2018.6817C26.4386%2017.3099%2026.5544%2015.7994%2026.8054%2014.3657C27.0553%2012.9383%2027.4317%2011.6284%2027.7476%2010.6722C27.9051%2010.1954%2028.0464%209.80982%2028.1476%209.54538C28.1981%209.41323%2028.2386%209.31154%2028.2659%209.24407C28.2795%209.21034%2028.2899%209.18518%2028.2966%209.16907C28.2999%209.16101%2028.3023%209.15521%2028.3038%209.15174C28.3045%209.15%2028.305%209.14884%2028.3052%209.14828C28.3054%209.14799%2028.3054%209.14785%2028.3054%209.14786C28.3054%209.14787%2028.3054%209.14799%2028.3054%209.14799C28.3053%209.14815%2028.3052%209.14834%2027.3847%208.75764Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	}

	/* the carousel's own arrow would double up with the badge */
	.carousel .carousel-arrow {
		display: none !important;
	}

	/* Away from the page entirely — and out at once rather than on the crossover,
	   since there is nothing to cross over to. The backdrop filter has to go with
	   it: WebKit still composites a filtered backdrop on a fully transparent
	   element, which left a smear of blurred card behind on the Work page even
	   though the badge itself was invisible. */
	.fcg-cursor.is-away .fcg-cursor-dot,
	.fcg-cursor.is-away .fcg-cursor-pill {
		opacity: 0 !important;
		visibility: hidden !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		transition: opacity 0.16s ease, visibility 0s linear 0.16s;
	}
}

@media (hover: hover) and (pointer: fine) {
	/* While the film is running the badge offers the opposite of what it offered
	   a moment ago: two bars rather than a triangle, because pressing now stops
	   it. The wording beside them is swapped by the script. */
	/* The player writes its own Play / Pause across the middle of the film. The
	   badge says the same word in the same place and covers most of it, leaving
	   the tail of it sticking out from behind — "se" of Pause. Where the badge
	   is doing the telling, the player's own wording is not needed; on a touch
	   screen, where there is no badge, it stays. */
	.showreel .showreel-toggle-text {
		display: none !important;
	}

	
}

@media (hover: hover) and (pointer: fine) {
	/* Over the player's control bar ours is put away and the browser's own is
	   allowed back: the site turns the native pointer off everywhere, which is
	   right until you are trying to land on a scrubber. */
	.fcg-cursor.is-native .fcg-cursor-dot,
	.fcg-cursor.is-native .fcg-cursor-pill {
		opacity: 0 !important;
		visibility: hidden !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}
	.showreel .plyr__controls,
	.showreel .plyr__controls * {
		cursor: auto !important;
	}
	.showreel .plyr__controls button,
	.showreel .plyr__controls input,
	.showreel .plyr__progress,
	.showreel .plyr__progress *,
	.showreel .plyr__progress__container,
	.showreel .plyr__progress__container * {
		cursor: pointer !important;
	}
}