/* =========================================================================================================== */
/* Fuzzy Works -- the landing page at the root of fuzzy-works.com                                               */
/* =========================================================================================================== */
/*
	Grown out of .document/html_landing_page/, which is the vendored source of this design and is kept there as
	the original. The class names are that file's -- .hero, .design, .design-part, .panel-image, .sticky-footer --
	so the two stay comparable; what changed is that a panel now holds an illustration and a caption rather than
	the words "Preview 1", which needed a stacking context, a legible resting state and a text layer that the
	hover dimming does not touch.

	NO STYLESHEET IN THIS DIRECTORY IS SHARED WITH THE APPLICATIONS. css/style.css and administrator/css/style.css
	are Bootstrap-based and belong to pages behind a sign-in; this file belongs to a static page with no framework
	on it at all. They have no reason to know about each other and deliberately do not.
*/


/* ----------------------------------------------------------------------------------------------------------- */
/* 1. base                                                                                                       */
/* ----------------------------------------------------------------------------------------------------------- */

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: 100%;
	font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
	background-color: #0d0d0d;
	color: #ffffff;
	box-sizing: border-box;
}

* {
	outline: 0 !important;
	-webkit-touch-callout: none;
	box-sizing: inherit;
}

a {
	text-decoration: none;
	color: inherit;
}


/* ----------------------------------------------------------------------------------------------------------- */
/* 2. the hero and its background layers                                                                         */
/* ----------------------------------------------------------------------------------------------------------- */

.hero {
	position: relative;
	width: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 96px 0 88px 0;
}

/* layer 1: the photograph */
.bg-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('../landing_image/bg02.jpg') no-repeat center center / cover;
	z-index: 1;
}

/* layer 2: the darkening, which is what makes white text on a photograph readable at every window size */
.bg-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.72);
	z-index: 2;
}

/* layer 3: a fine dot screen, so the photograph reads as a texture rather than as a stock image */
.bg-pattern {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(rgba(0, 0, 0, 0.5) 1px, transparent 1px);
	background-size: 3px 3px;
	z-index: 3;
}

/* layer 4: the particle constellation, drawn by landing/js/particles.min.js into this element */
#particles-js {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
}


/* ----------------------------------------------------------------------------------------------------------- */
/* 3. the mark                                                                                                   */
/* ----------------------------------------------------------------------------------------------------------- */

.top-left-logo {
	position: absolute;
	top: 30px;
	left: 40px;
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 22px;
	/* the bundled Roboto is the 400 weight only, so 700 here would be a browser-synthesised bold. Letter-spacing
	   and uppercase carry the weight instead, which is what the design was doing anyway. */
	font-weight: 400;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #ffffff;
	z-index: 50;
}

.top-left-logo svg {
	height: 30px;
	width: auto;
	flex: 0 0 auto;
}


/* ----------------------------------------------------------------------------------------------------------- */
/* 4. the four panels                                                                                            */
/* ----------------------------------------------------------------------------------------------------------- */

.front-content {
	position: relative;
	z-index: 5;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* clicks fall through the empty gaps to the particle canvas, which is where the original design wanted them */
	pointer-events: none;
}

.front-content * {
	pointer-events: auto;
}

.design {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.design-part {
	width: 25%;
	position: relative;
	top: 0;
	transition: top 0.45s ease-out, transform 0.45s ease-out;
}

/*
	THE TILE. `.panel-image` keeps its name from the source design and is still the full-height box; it is a
	positioning context holding an illustration layer, a scrim and a caption.

	THE WHOLE TILE CARRIES THE TRANSPARENCY, and that is deliberate rather than convenient. The alternative was to
	fade only the artwork and keep the caption solid, which is what an earlier version did -- but the request was
	for the PANELS to be transparent, and a panel whose ground and border dissolve while its text stays put does
	not read as a transparent panel, it reads as text floating on the photograph. Fading the tile also gives all
	four the same behaviour, including the contact panel, which has no artwork to fade.

	The cost is that the caption dims with everything else. It is kept legible at rest by the scrim below and by
	stopping well short of invisible: at 0.45 over the darkened hero photograph the titles are still readable
	before the pointer arrives, which is the property that matters -- somebody has to be able to tell what the
	four panels are without hovering each one to find out.
*/
.panel-image {
	position: relative;
	display: block;
	width: 100%;
	height: 75vh;
	min-height: 420px;
	overflow: hidden;
	background-color: #101010;
	color: #ffffff;
	opacity: 0.45;
	transition: opacity 0.45s ease;
}

/*
	`:focus-within` alongside `:hover` so a keyboard user reaching the panel by Tab gets the same reveal a pointer
	does. It is on `.design-part` rather than on the tile so the two placeholder tiles -- which hold no focusable
	element and are not links -- still brighten under the pointer along with the rest.
*/
.design-part:hover .panel-image,
.design-part:focus-within .panel-image {
	opacity: 1;
}

.panel-art {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	/* the artwork is at full strength WITHIN the tile; the tile's own opacity above is what dims it against the
	   page. Two stacked fades would compound into a smudge, which is the wrong kind of understated. */
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.5s ease, transform 0.9s ease;
}

/* the scrim: a bottom-up darkening under the caption, so the text is legible over any part of any illustration */
.panel-image::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* tight on purpose: opaque only under the caption itself and gone by 52% of the height. A softer, taller
	   gradient reads better in isolation and swallows the middle of every illustration, which is where each of
	   the three drawings puts its subject. */
	background: linear-gradient(to top, rgba(5, 7, 5, 0.95) 0%, rgba(5, 7, 5, 0.86) 15%, rgba(5, 7, 5, 0.38) 33%, rgba(5, 7, 5, 0) 52%);
	pointer-events: none;
}

.panel-body {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 2;
	padding: 0 28px 34px 28px;
	text-align: left;
}

/* which illustration a tile carries. Named after the subject rather than after the position, so reordering the
   panels is a change to index.html alone. */
.panel-art-digital-field-book { background-image: url('../landing_image/panel-digital-field-book.svg'); }
.panel-art-industrial-robotics { background-image: url('../landing_image/panel-industrial-robotics.svg'); }
.panel-art-ground-transport { background-image: url('../landing_image/panel-ground-transport.svg'); }
.panel-art-contact { background-image: url('../landing_image/panel-contact.svg'); }

.panel-eyebrow {
	display: inline-block;
	margin-bottom: 12px;
	padding: 4px 10px;
	border: 1px solid rgba(237, 221, 94, 0.5);
	border-radius: 2px;
	color: #EDDD5E;
	font-size: 10px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	line-height: 1.4;
}

.panel-title {
	margin: 0 0 10px 0;
	font-size: 21px;
	line-height: 1.25;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #ffffff;
}

.panel-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.66);
	max-width: 30ch;
}

.panel-action {
	display: inline-block;
	margin-top: 16px;
	font-size: 11px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: #EDDD5E;
	border-bottom: 1px solid rgba(237, 221, 94, 0.35);
	padding-bottom: 3px;
	transition: border-color 0.3s ease;
}

/* the hover, on the tiles that lead somewhere. The brightening is the tile's; this is the slow push in. */
.design-part:hover .panel-art {
	transform: scale(1.045);
}

.design-part.is-link:hover {
	top: -34px;
	transform: scale(0.975);
	z-index: 20;
}

.design-part.is-link:hover .panel-action {
	border-color: #EDDD5E;
}

/* a keyboard user gets the same affordance a pointer does, which is the whole reason this is a separate rule */
.design-part .panel-image:focus-visible {
	outline: 2px solid #EDDD5E !important;
	outline-offset: -4px;
}


/*
	THE TWO PLACEHOLDERS. They are not links, so they must not behave like one: no lift, no pointer, and a caption
	that says outright that there is nothing behind them yet. A tile that rises under the pointer and then does
	nothing when clicked is worse than a tile that never moved.
*/
/* the placeholders stay a step behind the real panel at both ends, so "nothing here yet" is legible before the
   caption is read */
.design-part.is-placeholder .panel-art {
	opacity: 0.72;
}

.design-part.is-placeholder:hover .panel-art {
	transform: scale(1.02);
}

.design-part.is-placeholder:hover .panel-image,
.design-part.is-placeholder:focus-within .panel-image {
	opacity: 0.85;
}

.design-part.is-placeholder .panel-title,
.design-part.is-placeholder .panel-text {
	color: rgba(255, 255, 255, 0.5);
}

.design-part.is-placeholder .panel-eyebrow {
	color: rgba(255, 255, 255, 0.45);
	border-color: rgba(255, 255, 255, 0.22);
}


/* ----------------------------------------------------------------------------------------------------------- */
/* 5. the contact panel                                                                                          */
/* ----------------------------------------------------------------------------------------------------------- */

/*
	The fourth tile carries text rather than an illustration, so it gets a flat ground and its content sits in the
	normal flow of the tile instead of being pinned to the bottom edge. It keeps the same width, height and border
	treatment as the other three, which is what makes it read as the fourth panel and not as a footer that drifted.
*/
.panel-image.panel-contact {
	background: linear-gradient(160deg, #16211a 0%, #0c110d 55%, #080a08 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0 28px 34px 28px;
}

/* `relative` and not `static`: the scrim on .panel-image is an absolutely positioned ::after, and a static child
   cannot take a z-index to sit above it -- the contact details would be printed underneath their own darkening. */
.panel-contact .panel-body {
	position: relative;
	z-index: 2;
	padding: 0;
}

.contact-list {
	list-style: none;
	margin: 18px 0 0 0;
	padding: 0;
}

.contact-list li {
	margin-bottom: 15px;
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
}

.contact-label {
	display: block;
	margin-bottom: 3px;
	font-size: 10px;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.42);
}

.contact-list a {
	color: #EDDD5E;
	border-bottom: 1px solid rgba(237, 221, 94, 0.28);
	padding-bottom: 1px;
	transition: border-color 0.3s ease;
	overflow-wrap: anywhere;
}

.contact-list a:hover,
.contact-list a:focus-visible {
	border-color: #EDDD5E;
}

/*
	THE UNFILLED VALUES ARE MARKED, LOUDLY AND ON PURPOSE.

	The real address, telephone number and postal address are not in this repository -- they are a deployment's
	own details, and inventing plausible ones for a page that goes on the open internet is how a company ends up
	publishing an email nobody reads. Every value still to be supplied is wrapped in `.contact-pending`, which
	prints in a colour nobody ships by accident. Search this file's markup for that class before deploying; when
	the last one is gone the panel is finished.

	IT IS FINISHED -- 2026-09-03, finding MISS-SITE-01, and the three placeholders had been live on production
	until then, which is exactly the outcome the paragraph above was written to prevent. The rule stays: it is the
	marking for the NEXT value somebody has to leave unfilled, and it is what makes such a value impossible to
	miss on the page. What was missing was not the marker but a test that looked at this file at all --
	MarketingSiteTest read the marketing page and nothing else. It now reads both public pages.
*/
.contact-pending {
	display: inline-block;
	padding: 1px 7px;
	border: 1px dashed rgba(255, 138, 128, 0.7);
	border-radius: 2px;
	color: #ff8a80;
	font-size: 11px;
	letter-spacing: 1.4px;
	white-space: nowrap;
}


/* ----------------------------------------------------------------------------------------------------------- */
/* 6. the footer                                                                                                 */
/* ----------------------------------------------------------------------------------------------------------- */

.sticky-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0.72);
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
	padding: 14px 20px;
	font-size: 12px;
	letter-spacing: 1px;
	z-index: 50;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sticky-footer p {
	margin: 0;
}

.sticky-footer a {
	color: rgba(255, 255, 255, 0.78);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.sticky-footer a:hover,
.sticky-footer a:focus-visible {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.6);
}

.footer-separator {
	margin: 0 10px;
	color: rgba(255, 255, 255, 0.28);
}


/* ----------------------------------------------------------------------------------------------------------- */
/* 7. narrower windows                                                                                           */
/* ----------------------------------------------------------------------------------------------------------- */

@media (max-width: 1200px) {

	.panel-text {
		max-width: none;
	}

}

@media (max-width: 997px) {

	.design-part {
		width: 50%;
	}

	.panel-image {
		height: 58vh;
	}

	.design-part.is-link:hover {
		top: -22px;
	}

}

@media (max-width: 767px) {

	.hero {
		padding: 84px 0 84px 0;
	}

	.top-left-logo {
		top: 22px;
		left: 22px;
		font-size: 18px;
		letter-spacing: 3px;
	}

	.panel-image {
		height: auto;
		min-height: 360px;
	}

}

@media (max-width: 560px) {

	.design-part {
		width: 100%;
	}

	.panel-image {
		min-height: 330px;
	}

	/* the lift is a pointer affordance and there is no pointer here; on a touch screen it only makes the tile jump
	   under the finger that just tapped it */
	.design-part.is-link:hover {
		top: 0;
		transform: none;
	}

}


/* ----------------------------------------------------------------------------------------------------------- */
/* 8. reduced motion                                                                                             */
/* ----------------------------------------------------------------------------------------------------------- */

/*
	The same decision js/leaf.js makes inside the applications. The particle canvas is switched off in the page's
	own script rather than here, because a canvas animation is not a CSS transition and a media query cannot reach
	it -- see the inline block at the bottom of index.html.
*/
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.design-part.is-link:hover {
		top: 0;
		transform: none;
	}

}