/*!
 * You're Fired Hero Slider 1.0.94
 * All selectors are prefixed .yfh- so nothing leaks into Breakdance or the theme.
 */

/* Fredoka (SIL Open Font License), bundled so the foam slide needs no third-party font request. */
@font-face {
	font-family: "Fredoka";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/fredoka-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.yfh-hero {
	--yfh-bg: #07070b;
	--yfh-text: #ffffff;
	--yfh-muted: #d9d9e2;
	--yfh-move: 1600ms;
	/* After a wipe, the new slide's spray and title effects wait this long, so they start
	   once the cloth has cleared the words (set by .yfh-has-wiped). */
	--yfh-lead: 0ms;
	--yfh-ease: cubic-bezier(0.65, 0, 0.35, 1);
	--yfh-controls-space: 96px;
	--yfh-width: min(90%, 1480px);

	position: relative;
	display: grid;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	margin: 0;
	background-color: var(--yfh-bg);
	color: var(--yfh-text);
	font-family: var(--yfh-font-body, inherit);
	-webkit-font-smoothing: antialiased;
}

.yfh-hero *,
.yfh-hero *::before,
.yfh-hero *::after {
	box-sizing: border-box;
}

.yfh-hero [hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------- stage */

.yfh-hero__stage {
	grid-area: 1 / 1;
	display: grid;
	position: relative;
	touch-action: pan-y;
}

.yfh-slide {
	grid-area: 1 / 1;
	position: relative;
	display: grid;
	min-height: clamp(560px, 44vw, 780px);
	margin: 0;
}

/* Without JavaScript only the first slide is shown. */
.yfh-hero:not(.yfh-is-ready) .yfh-slide:not(:first-child) {
	display: none;
}

.yfh-slide__bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

.yfh-hero .yfh-slide__bg-img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: var(--yfh-bg-position, 70% center);
	/* Mirrored by default; slides whose subject belongs behind the words turn it back below. */
	transform: scaleX(-1);
}

/* The wheel and the foamed car sit behind the words on these slides (not mirrored). */
.yfh-hero .yfh-slide--youre-fired .yfh-slide__bg-img,
.yfh-hero .yfh-slide--no-days-off .yfh-slide__bg-img {
	transform: none;
}

/* The wheel close-up gets a dark shade over the whole photo; the foam is bright, so that
   slide gets a deeper shade behind the words. */
.yfh-hero .yfh-slide--youre-fired .yfh-slide__bg::after,
.yfh-hero .yfh-slide--no-days-off .yfh-slide__bg::after {
	background:
		linear-gradient(270deg, rgba(7, 7, 11, 0.95) 0%, rgba(7, 7, 11, 0.88) 38%, rgba(7, 7, 11, 0.6) 62%, rgba(7, 7, 11, 0.35) 88%),
		linear-gradient(0deg, rgba(7, 7, 11, 0.85) 0%, rgba(7, 7, 11, 0) 30%);
}

.yfh-slide__bg::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background:
		linear-gradient(270deg, rgba(7, 7, 11, 0.94) 0%, rgba(7, 7, 11, 0.84) 30%, rgba(7, 7, 11, 0.4) 56%, rgba(7, 7, 11, 0.08) 80%),
		linear-gradient(0deg, rgba(7, 7, 11, 0.85) 0%, rgba(7, 7, 11, 0) 30%);
}

.yfh-slide__inner {
	position: relative;
	z-index: 1;
	width: var(--yfh-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(24px, 4vw, 64px);
	padding-top: clamp(48px, 6vw, 88px);
	padding-bottom: calc(var(--yfh-controls-space) + 24px);
}

/* ----------------------------------------------------------------- copy */

.yfh-slide__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	max-width: 640px;
}

.yfh-hero .yfh-slide__heading {
	margin: 0;
	padding: 0;
	font-family: var(--yfh-font-heading, "Montserrat", sans-serif);
	font-size: clamp(2.6rem, 5.2vw, 5rem);
	font-weight: 900;
	font-style: normal;
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--yfh-text);
	text-wrap: balance;
}

/* The colour follows the spray. The first burst sweeps a gradient across the title,
   starting at the edge nearest the bottle; the second burst sweeps again and fills
   the whole title with the full product colour. The image is three panels wide:
   solid colour | colour-to-light gradient | white, and the animation slides it
   from white, to the gradient, to solid. */
@supports (color: color-mix(in srgb, red 50%, white)) {
	.yfh-slide {
		--yfh-accent-soft: color-mix(in srgb, var(--yfh-accent) 45%, #ffffff);
	}
}

.yfh-is-ready .yfh-slide.is-active .yfh-slide__heading,
.yfh-is-ready .yfh-slide.is-leaving .yfh-slide__heading {
	background-image: linear-gradient(90deg, var(--yfh-accent) 0%, var(--yfh-accent) 33.34%, var(--yfh-accent-soft, var(--yfh-accent)) 61.3%, var(--yfh-text) 66.67%, var(--yfh-text) 100%);
	background-size: 300% 100%;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.yfh-is-ready .yfh-slide.is-active .yfh-slide__heading {
	background-position: 100% 0;
	animation: yfh-heading-sweep 3100ms linear calc(var(--yfh-lead) + 1000ms) both;
}

.yfh-is-ready .yfh-slide.is-leaving .yfh-slide__heading {
	background-position: 0 0;
}

/* A soft dark halo lifts the coloured title off busy backgrounds. */
.yfh-hero .yfh-slide__heading {
	filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}

/* 1.0 s: first burst lands, gradient sweeps in (0.9 s).
   3.2 s: second burst lands, solid colour sweeps in (0.9 s). */
@keyframes yfh-heading-sweep {
	0% { background-position: 100% 0; animation-timing-function: ease-out; }
	29% { background-position: 50% 0; animation-timing-function: linear; }
	71% { background-position: 50% 0; animation-timing-function: ease-out; }
	100% { background-position: 0 0; }
}

@media (forced-colors: active) {
	.yfh-is-ready .yfh-slide .yfh-slide__heading,
	.yfh-is-ready .yfh-slide .yfh-slide__title {
		background-image: none;
		-webkit-text-fill-color: currentColor;
	}

	.yfh-slide__title--alt {
		display: none;
	}
}

/* The foam title copy is positioned against the heading. */
.yfh-hero .yfh-slide__heading {
	position: relative;
}

/* Foam slide: while the foam is on it, the title crossfades into bubbly Fredoka, then back.
   A font cannot animate between typefaces, so the title is printed twice, one copy in each
   font, and the two fade over each other. Each copy carries the colour sweep itself.
   Fredoka sets narrower, so the title keeps its three-line height and nothing below it jumps. */
.yfh-hero .yfh-slide--foam .yfh-slide__heading {
	min-height: calc(2.85em + 27px);
}

.yfh-slide--foam .yfh-slide__title {
	display: block;
}

.yfh-slide--foam .yfh-slide__title--alt {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	font-family: "Fredoka", var(--yfh-font-heading, "Montserrat"), sans-serif;
	/* Fredoka is about 11% narrower. Setting it that much larger (with the line height
	   scaled back) makes it break onto the same lines as the main title, so the crossfade
	   reads as one title changing shape rather than two titles on top of each other. */
	font-size: 1.115em;
	line-height: 0.852;
	letter-spacing: 0.01em;
	opacity: 0;
}

.yfh-is-ready .yfh-slide--foam.is-active .yfh-slide__heading,
.yfh-is-ready .yfh-slide--foam.is-leaving .yfh-slide__heading {
	background-image: none;
	-webkit-text-fill-color: currentColor;
	animation: none;
}

/* The foam slide never takes the product colour and has no gradient sweep: the first
   burst turns the white title into white suds, and it stays foamy until the slide leaves. */
.yfh-is-ready .yfh-slide--foam.is-active .yfh-slide__title {
	color: var(--yfh-text);
	animation: yfh-foam-main 550ms ease-in-out calc(var(--yfh-lead) + 950ms) both;
}

.yfh-is-ready .yfh-slide--foam.is-active .yfh-slide__title--alt {
	animation: yfh-foam-alt 550ms ease-in-out calc(var(--yfh-lead) + 950ms) both;
}

.yfh-is-ready .yfh-slide--foam.is-leaving .yfh-slide__title {
	opacity: 0;
}

.yfh-is-ready .yfh-slide--foam.is-leaving .yfh-slide__title--alt {
	opacity: 1;
}

/* The Fredoka copy is the foam: white bubbles through the lettering, a sudsy white edge,
   soft grey bubble rims for texture, and (via an SVG filter set inline) bubbly, uneven outlines. */
.yfh-is-ready .yfh-slide--foam.is-active .yfh-slide__title--alt,
.yfh-is-ready .yfh-slide--foam.is-leaving .yfh-slide__title--alt {
	background-image:
		radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.95) 0 14%, rgba(255, 255, 255, 0.5) 26%, rgba(255, 255, 255, 0) 40%),
		radial-gradient(circle at 70% 65%, rgba(255, 255, 255, 0.9) 0 10%, rgba(255, 255, 255, 0) 30%),
		radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.75) 0 8%, rgba(255, 255, 255, 0) 24%),
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 0 30%, rgba(176, 188, 204, 0.75) 38%, rgba(255, 255, 255, 0) 48%),
		linear-gradient(180deg, #ffffff 0%, #f4f6fa 55%, #dfe5ee 100%);
	background-size: 0.42em 0.38em, 0.27em 0.31em, 0.19em 0.2em, 0.33em 0.3em, 100% 100%;
	background-position: 0 0, 0.1em 0.12em, 0.2em 0.05em, 0.06em 0.18em, 0 0;
	background-repeat: repeat, repeat, repeat, repeat, no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 0.06em rgba(255, 255, 255, 0.95);
}

/* A half-second fade into the foam as the first burst lands. No fade back. */
@keyframes yfh-foam-main {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes yfh-foam-alt {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.yfh-hero .yfh-slide__heading::after {
	content: "";
	display: block;
	width: 72px;
	height: 5px;
	margin-top: 22px;
	border-radius: 3px;
	background: var(--yfh-accent);
}

.yfh-hero .yfh-slide__desc {
	margin: 0;
	padding: 0;
	max-width: 32ch;
	font-size: clamp(1.05rem, 1.4vw, 1.3rem);
	font-weight: 500;
	line-height: 1.5;
	color: var(--yfh-muted);
}

.yfh-hero .yfh-slide__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	margin: 4px 0 0;
	padding: 14px 28px;
	border: 0;
	border-radius: 6px;
	background: var(--yfh-accent);
	color: var(--yfh-cta-text);
	font-family: var(--yfh-font-heading, "Montserrat", sans-serif);
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.yfh-hero .yfh-slide__cta:hover {
	color: var(--yfh-cta-text);
	filter: brightness(1.08);
	box-shadow: 0 12px 32px -12px var(--yfh-glow);
}

.yfh-hero .yfh-slide__cta svg {
	flex: none;
	width: 18px;
	height: 18px;
}

/* Shop button + "Call us" side by side; the call button is outlined in the slide colour. */
.yfh-hero .yfh-slide__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 4px 0 0;
}

.yfh-hero .yfh-slide__actions .yfh-slide__cta {
	margin: 0;
}

.yfh-hero .yfh-slide__call {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 12px 24px;
	border: 2px solid var(--yfh-accent);
	border-radius: 6px;
	background: rgba(7, 7, 11, 0.55);
	color: #fff;
	font-family: var(--yfh-font-heading, "Montserrat", sans-serif);
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.yfh-hero .yfh-slide__call svg {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--yfh-accent);
	transition: color 0.2s ease;
}

.yfh-hero .yfh-slide__call:hover,
.yfh-hero .yfh-slide__call:focus-visible {
	background: var(--yfh-accent);
	color: var(--yfh-cta-text);
	box-shadow: 0 12px 32px -12px var(--yfh-glow);
}

.yfh-hero .yfh-slide__call:hover svg,
.yfh-hero .yfh-slide__call:focus-visible svg {
	color: var(--yfh-cta-text);
}

/* -------------------------------------------------------------- product */

/* The bottle sits in the left column, the words on the right. */
.yfh-slide__product {
	order: -1;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

/* Accent glow: a soft oval directly behind the bottle, kept close to it so
   the colour never spreads over the car or foam in the background. */
.yfh-slide__product::before {
	content: "";
	position: absolute;
	top: 52%;
	left: 50%;
	width: min(66%, 340px);
	height: 86%;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, var(--yfh-glow) 0%, rgba(0, 0, 0, 0) 64%);
	filter: blur(16px);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* the bright green glow was too strong behind You're Fired (William) */
.yfh-slide--youre-fired .yfh-slide__product::before {
	opacity: 0.35;
}

.yfh-slide__bottle-wrap {
	position: relative;
	z-index: 1;
	display: block;
	max-width: 100%;
	line-height: 0;
}

/* Spray: comes straight out of the trigger nozzle. The nozzle sits 96.6% across and 3.5% down
   every bottle image (measured on the cut-outs), so the effect is anchored exactly there.
   The mist is a real photographed spray burst (assets/images/spray/spray-mist.webp, white on
   transparent, its point at the middle of the left edge) used as a mask, so each slide can
   colour it with --yfh-spray-color. It bursts out of the nozzle, billows towards the title and
   fades where it is. No particles. */
.yfh-slide__spray {
	--yfh-spray-reach: 1;
	position: absolute;
	top: 3.5%;
	left: 96.6%;
	width: 0;
	height: 0;
	pointer-events: none;
}

.yfh-slide__spray::before {
	content: "";
	position: absolute;
	top: calc(-79px * var(--yfh-spray-reach));
	left: -2px;
	width: calc(420px * var(--yfh-spray-reach));
	height: calc(158px * var(--yfh-spray-reach));
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, var(--yfh-spray-color, var(--yfh-accent-soft, var(--yfh-accent))) 32%, var(--yfh-spray-color, var(--yfh-accent-soft, var(--yfh-accent))) 100%);
	-webkit-mask-image: url("../images/spray/spray-mist.webp");
	mask-image: url("../images/spray/spray-mist.webp");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	opacity: 0;
	transform-origin: 0 50%;
}

/* The snow foam slide sprays a light purple. */
.yfh-slide--no-days-off {
	--yfh-spray-color: #d4b8ff;
}

/* Two bursts per slide: one as it lands, another about two seconds later. */
.yfh-is-ready .yfh-slide.is-active .yfh-slide__spray::before {
	animation: yfh-spray-mist 2.1s cubic-bezier(0.2, 0.7, 0.3, 1) calc(var(--yfh-lead) + 780ms) 2 both;
}

/* No Days Off! sprays ONCE; You're Fired and P45 keep their two bursts (George, 2026-10-02).
   The title has to follow the spray, and the sweep above is timed to two bursts, so this slide
   gets a single sweep that finishes while the one burst of mist is still on screen. */
.yfh-is-ready .yfh-slide.yfh-slide--no-days-off.is-active .yfh-slide__spray::before {
	animation-iteration-count: 1;
}

.yfh-is-ready .yfh-slide.yfh-slide--no-days-off.is-active .yfh-slide__heading {
	animation: yfh-heading-sweep-once 1400ms ease-out calc(var(--yfh-lead) + 1000ms) both;
}

@keyframes yfh-heading-sweep-once {
	0% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

/* A gentle puff: it grows out of the nozzle and fades where it is. It never travels away
   from the bottle, so the mist stays joined to the nozzle the whole time. */
@keyframes yfh-spray-mist {
	0% { opacity: 0; transform: scale(0.12, 0.3); }
	9% { opacity: 0.55; transform: scale(0.55, 0.7); }
	32% { opacity: 0.5; transform: scale(1, 1); }
	62% { opacity: 0.28; transform: scale(1.02, 1.04); }
	88% { opacity: 0; transform: scale(1.04, 1.07); }
	100% { opacity: 0; transform: scale(1.04, 1.07); }
}

.yfh-hero .yfh-slide__bottle {
	position: relative;
	z-index: 1;
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(560px, 64vh);
	margin: 0;
	filter: drop-shadow(0 30px 45px rgba(0, 0, 0, 0.6));
}

/* ------------------------------------------------ transitions (JS only) */

.yfh-hero.yfh-has-wiped {
	--yfh-lead: 1200ms;
}

/* Cloth wipe: the next slide waits underneath and a microfibre cloth wipes the current
   one away, left to right. The old slide is masked with a streaky "just wiped" edge
   (assets/images/wipe/wipe-mask.webp) and the cloth (wipe-cloth.webp) rides on that edge,
   scrubbing up and down as it goes.

   Geometry: the mask is 230% of the slide wide with its edge in the middle, so moving it
   from 100% to 0% carries the edge from -15% to 115% of the slide width, linearly.
   The cloth is --yfh-cloth-w wide and its own translate is set so its centre sits on that
   edge the whole way (both animations are linear and the same length). */
.yfh-hero {
	--yfh-cloth-w: 24%;
	--yfh-cloth-from: -112.5%;
	--yfh-cloth-to: 429.2%;
}

.yfh-is-ready .yfh-slide {
	z-index: 0;
	visibility: hidden;
	/* Every slide carries the wipe mask, parked where it shows the whole slide, so the
	   image is already loaded when the first wipe starts. */
	-webkit-mask-image: url("../images/wipe/wipe-mask.webp");
	mask-image: url("../images/wipe/wipe-mask.webp");
	-webkit-mask-size: 230% 100%;
	mask-size: 230% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;
}

.yfh-is-ready .yfh-slide.is-active {
	z-index: 1;
	visibility: visible;
}

.yfh-is-ready .yfh-slide.is-leaving {
	z-index: 2;
	visibility: visible;
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
	animation: yfh-wipe-off var(--yfh-move) linear both;
}

@keyframes yfh-wipe-off {
	from {
		-webkit-mask-position: 100% 0;
		mask-position: 100% 0;
	}
	to {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
	}
}

/* The cloth. */
.yfh-hero__stage::after {
	content: "";
	position: absolute;
	top: 4%;
	bottom: 4%;
	left: 0;
	z-index: 3;
	width: var(--yfh-cloth-w);
	background: url("../images/wipe/wipe-cloth.webp") center / contain no-repeat;
	filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55));
	opacity: 0;
	pointer-events: none;
	translate: var(--yfh-cloth-from) 0;
}

.yfh-is-wiping .yfh-hero__stage::after {
	animation:
		yfh-cloth-travel var(--yfh-move) linear both,
		yfh-cloth-scrub var(--yfh-move) ease-in-out both;
}

@keyframes yfh-cloth-travel {
	from { translate: var(--yfh-cloth-from) 0; }
	to { translate: var(--yfh-cloth-to) 0; }
}

/* Up-and-down wiping strokes with a slight twist, fading in and out at the ends. */
@keyframes yfh-cloth-scrub {
	0% { opacity: 0; transform: translateY(-7%) rotate(-10deg); }
	8% { opacity: 1; }
	22% { transform: translateY(7%) rotate(7deg); }
	42% { transform: translateY(-7%) rotate(-8deg); }
	62% { transform: translateY(7%) rotate(7deg); }
	82% { transform: translateY(-5%) rotate(-6deg); }
	92% { opacity: 1; }
	100% { opacity: 0; transform: translateY(3%) rotate(4deg); }
}

/* ------------------------------------------------------------- controls */

.yfh-hero__controls {
	grid-area: 1 / 1;
	align-self: end;
	justify-self: center;
	position: relative;
	z-index: 5;
	width: var(--yfh-width);
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: clamp(20px, 3vw, 36px);
	pointer-events: none;
}

.yfh-hero__controls > * {
	pointer-events: auto;
}

.yfh-hero__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.yfh-hero__spacer {
	flex: 1 1 auto;
	pointer-events: none;
}

.yfh-hero .yfh-hero__tab,
.yfh-hero .yfh-hero__btn {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.32);
	background: rgba(7, 7, 11, 0.72);
	color: #ffffff;
	font-family: var(--yfh-font-heading, "Montserrat", sans-serif);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* Slide controls are small coloured dots (their product names stay available
   to screen readers). */
.yfh-hero .yfh-hero__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-color: transparent;
	border-radius: 50%;
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.yfh-hero__tab-dot {
	flex: none;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--yfh-tab-accent);
	opacity: 0.55;
	transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.yfh-hero .yfh-hero__tab:hover .yfh-hero__tab-dot {
	opacity: 1;
}

.yfh-hero .yfh-hero__tab:hover,
.yfh-hero .yfh-hero__btn:hover {
	border-color: #ffffff;
	background: rgba(40, 40, 48, 0.85);
}

/* Active slide: larger, fully opaque dot with a white ring (not colour alone). */
.yfh-hero .yfh-hero__tab[aria-current="true"] {
	border-color: transparent;
	background: transparent;
}

.yfh-hero .yfh-hero__tab[aria-current="true"] .yfh-hero__tab-dot {
	opacity: 1;
	transform: scale(1.3);
	box-shadow: 0 0 0 2px #07070b, 0 0 0 4px #ffffff;
}

.yfh-hero .yfh-hero__btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 50%;
}

.yfh-hero .yfh-hero__btn svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* Qualified with .yfh-hero__btn so these beat `.yfh-hero .yfh-hero__btn svg`. */
.yfh-hero .yfh-hero__btn .yfh-hero__icon-play,
.yfh-hero.yfh-is-user-paused .yfh-hero__btn .yfh-hero__icon-pause {
	display: none;
}

.yfh-hero.yfh-is-user-paused .yfh-hero__btn .yfh-hero__icon-play {
	display: block;
}

.yfh-hero a:focus-visible,
.yfh-hero button:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
	box-shadow: 0 0 0 7px #07070b;
}

.yfh-hero .yfh-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------- tablet */

@media (max-width: 1023px) {
	.yfh-slide {
		min-height: clamp(520px, 68vw, 700px);
	}

	.yfh-slide__inner {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: 24px;
	}

	.yfh-slide__bg::after {
		background:
			linear-gradient(270deg, rgba(7, 7, 11, 0.95) 0%, rgba(7, 7, 11, 0.88) 40%, rgba(7, 7, 11, 0.5) 64%, rgba(7, 7, 11, 0.12) 86%),
			linear-gradient(0deg, rgba(7, 7, 11, 0.85) 0%, rgba(7, 7, 11, 0) 30%);
	}

	.yfh-hero .yfh-slide__heading {
		font-size: clamp(2.2rem, 5.6vw, 3.4rem);
	}

	.yfh-hero .yfh-slide__bottle {
		max-height: min(460px, 56vh);
	}
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 767px) {
	.yfh-hero {
		--yfh-controls-space: 58px;
		--yfh-cloth-w: 34%;
		--yfh-cloth-from: -94.1%;
		--yfh-cloth-to: 288.2%;
	}

	.yfh-slide {
		/* Phones had no minimum height, so the hero collapsed to whatever the content
		   needed - about 400px, of which 148px was padding. The bottle, the words and
		   two buttons were all fighting over the ~250px that was left. */
		min-height: clamp(470px, 122vw, 600px);
	}

	/* Phones keep the desktop arrangement: bottle on the left, words on the right. */
	.yfh-slide__inner {
		grid-template-columns: minmax(0, 0.54fr) minmax(0, 1.46fr);
		align-items: center;
		gap: 16px;
		/* The site's sticky header covers the top ~46px of the hero on phones, which hid the
		   bottle cap and the spray, so the content starts below it. */
		padding-top: 76px;
		padding-bottom: calc(var(--yfh-controls-space) + 14px);
	}

	.yfh-hero .yfh-slide__bg-img {
		object-position: var(--yfh-bg-position-mobile, 70% center);
	}

	.yfh-slide__bg::after {
		background:
			linear-gradient(270deg, rgba(7, 7, 11, 0.93) 0%, rgba(7, 7, 11, 0.82) 58%, rgba(7, 7, 11, 0.4) 100%),
			linear-gradient(0deg, rgba(7, 7, 11, 0.85) 0%, rgba(7, 7, 11, 0) 35%);
	}

	.yfh-hero .yfh-slide--youre-fired .yfh-slide__bg::after,
	.yfh-hero .yfh-slide--no-days-off .yfh-slide__bg::after {
		background:
			linear-gradient(270deg, rgba(7, 7, 11, 0.93) 0%, rgba(7, 7, 11, 0.84) 58%, rgba(7, 7, 11, 0.5) 100%),
			linear-gradient(0deg, rgba(7, 7, 11, 0.85) 0%, rgba(7, 7, 11, 0) 35%);
	}

	/* The desktop title is set at 0.95 line-height, which reads as one solid block at
	   5rem but has the lines almost touching once a phone wraps it onto three. */
	.yfh-hero .yfh-slide__heading {
		font-size: clamp(1.4rem, 7vw, 2.1rem);
		line-height: 1.14;
		letter-spacing: 0;
	}

	.yfh-hero .yfh-slide__heading::after {
		width: 44px;
		height: 4px;
		margin-top: 18px;
	}

	.yfh-slide__copy {
		gap: 18px;
	}

	.yfh-hero .yfh-slide__desc {
		font-size: 0.95rem;
		line-height: 1.55;
	}

	.yfh-hero .yfh-slide__cta {
		min-height: 44px;
		gap: 8px;
		padding: 10px 14px;
		font-size: 0.7rem;
		letter-spacing: 0.04em;
	}

	.yfh-hero .yfh-slide__cta svg {
		width: 14px;
		height: 14px;
	}

	/* The buttons wrapped onto two rows and each shrank to its own label, so "Call us"
	   hung short under the shop button. Stack them deliberately, at matching width. */
	.yfh-hero .yfh-slide__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.yfh-hero .yfh-slide__actions .yfh-slide__cta,
	.yfh-hero .yfh-slide__call {
		width: 100%;
		justify-content: center;
	}

	.yfh-hero .yfh-slide__call {
		min-height: 44px;
		gap: 6px;
		padding: 8px 12px;
		font-size: 0.7rem;
		letter-spacing: 0.04em;
	}

	.yfh-hero .yfh-slide__call svg {
		width: 14px;
		height: 14px;
	}

	.yfh-hero .yfh-slide__bottle {
		max-height: 250px;
	}

	.yfh-slide__product::before {
		width: 95%;
	}

	.yfh-hero__controls {
		gap: 6px;
		padding-bottom: 14px;
	}

	.yfh-hero__tabs {
		flex: 1 1 auto;
		gap: 0;
	}

	/* Angle the spray slightly down, towards the title beside the bottle. */
	.yfh-slide__spray {
		--yfh-spray-reach: 0.7;
		transform: rotate(10deg);
	}

	/* Reserves three lines so the two stacked copies of the foam title cannot collapse
	   mid-swap. Three lines at the 1.14 line-height above. */
	.yfh-hero .yfh-slide--foam .yfh-slide__heading {
		min-height: calc(3.42em + 14px);
	}

	.yfh-hero .yfh-hero__btn {
		width: 44px;
		height: 44px;
	}

	.yfh-hero .yfh-hero__btn svg {
		width: 16px;
		height: 16px;
	}

	.yfh-hero__spacer {
		display: none;
	}
}

/* ------------------------------------------------ in-page menu links */

/* The site's sticky header is ~150px tall (~190px on phones). The home pages carry this
   stylesheet, so their menu links (#our-story, #reviews, #contact) stop below it. */
html {
	scroll-padding-top: 160px;
}

@media (max-width: 767px) {
	html {
		scroll-padding-top: 200px;
	}
}

/* ------------------------------------------- home page review strip */

/* The reviews section on Home / Home new: two rows of equal cards drifting slowly in
   opposite directions. Each .y0rf-rs-track holds two identical .y0rf-rs-copy groups
   (20px apart), so sliding it by half its width (plus half the gap) loops seamlessly.
   Hovering or focusing a row pauses it. The class names are Breakdance global classes. */
.y0rf-rs-row {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.y0rf-rs-track,
.y0rf-rs-copy {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: 20px !important;
	width: max-content !important;
	max-width: none !important;
}

.y0rf-rs-copy,
.y0rf-rs-card {
	flex: 0 0 auto !important;
}

.y0rf-rs-card {
	height: auto !important;
}

.y0rf-rs-track {
	animation: y0rf-rs-scroll 80s linear infinite;
	will-change: transform;
}

.y0rf-rs-track--rev {
	animation-duration: 95s;
	animation-direction: reverse;
}

/* The customer car strip reuses the same row/track/copy mechanics without the "rev"
   modifier, so it travels the opposite way to the reviews. Its track is a different
   length, so it needs its own duration to drift at the same pace (William, 2026-09-21).
   Keep it proportional to the card count: 9 cards per copy = 105s (10 = 117s, 6 = 70s). The duration
   has to live here: .y0rf-rs-track sets `animation` as a shorthand, and this stylesheet
   loads after the Breakdance class CSS, so a duration set on the class alone is overridden. */
.y0rf-rs-track.y0rf-cs-track {
	animation-duration: 105s;
}

.y0rf-rs-row:hover .y0rf-rs-track,
.y0rf-rs-row:focus-within .y0rf-rs-track {
	animation-play-state: paused;
}

@keyframes y0rf-rs-scroll {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(calc(-50% - 10px), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.y0rf-rs-track {
		animation: none;
	}

	.y0rf-rs-row {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.y0rf-rs-copy[aria-hidden="true"] {
		display: none !important;
	}
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.yfh-hero {
		--yfh-move: 1ms;
	}

	/* No sweep: the title shows its colour gradient straight away. */
	.yfh-is-ready .yfh-slide.is-active .yfh-slide__heading {
		background-position: 0 0;
	}

	.yfh-is-ready .yfh-slide.is-active .yfh-slide__title {
		background-position: 0 0;
	}

	.yfh-slide__title--alt {
		display: none;
	}

	.yfh-hero *,
	.yfh-hero *::before,
	.yfh-hero *::after {
		transition-duration: 1ms !important;
		transition-delay: 0s !important;
		animation: none !important;
	}
}

/* ------------------------------------------------------- home page extras */
/* How to use, Before & after, Why Auto Elite, FAQ and Delivery (built in Breakdance).
   Their cards carry data-ae="..." attributes; colours come from data-ae-colour. */

/* titles, icons and buttons use the bright brand green; only the bottle photos are softer (William) */
[data-ae-colour="green"] {
	--ae-c: #93e23d;
	--ae-g: rgba(147, 226, 61, 0.2);
}

[data-ae-colour="purple"] {
	--ae-c: #a46bff;
	--ae-g: rgba(164, 107, 255, 0.24);
}

[data-ae-colour="blue"] {
	--ae-c: #4aa8ff;
	--ae-g: rgba(74, 168, 255, 0.22);
}

[data-ae-colour="pink"] {
	--ae-c: #ff4fa8;
	--ae-g: rgba(255, 79, 168, 0.22);
}

[data-ae-colour="silver"] {
	--ae-c: #e9e9f0;
	--ae-g: rgba(233, 233, 240, 0.18);
}

/* Fade up as it scrolls into view; the script adds .ae-js and staggers siblings. */
html.ae-js [data-ae-reveal] {
	opacity: 0;
	transform: translateY(36px) scale(0.98);
	transition: opacity 0.45s ease var(--ae-d, 0ms), transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) var(--ae-d, 0ms);
}

html.ae-js [data-ae-reveal].ae-in {
	opacity: 1;
	transform: none;
}

/* Short bar under each section title, drawn in from the left. */
.bde-fancy-container[data-ae="bar"] {
	transform-origin: left center;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
}

html.ae-js [data-ae-reveal]:not(.ae-in) [data-ae="bar"] {
	transform: scaleX(0);
}

/* How to use: product tabs */
.bde-fancy-container[data-ae="tabs"] {
	flex-wrap: wrap;
}

.bde-text[data-ae-tab] {
	cursor: pointer;
	padding: 13px 24px;
	border: 2px solid var(--ae-c);
	border-radius: 999px;
	background: var(--ae-c);
	color: #08080c;
	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	user-select: none;
	transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
}

.bde-text[data-ae-tab][data-ae-colour="purple"] {
	color: #ffffff;
	--ae-c: #7b2ff7;
}

.bde-text[data-ae-tab]:hover {
	transform: translateY(-2px);
}

.bde-text[data-ae-tab]:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.bde-text[data-ae-tab][aria-selected="true"] {
	opacity: 1;
	box-shadow: 0 0 0 2px #07070b, 0 0 0 4px #ffffff;
}

html.ae-js [data-ae-panel] {
	display: none;
}

html.ae-js [data-ae-panel].ae-active {
	display: flex;
	animation: ae-panel-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes ae-panel-in {
	from {
		opacity: 0;
		transform: translateX(40px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* the bottle stands still over a soft glow in the product colour */
.bde-fancy-container[data-ae="bottle"] {
	position: relative;
}

.bde-fancy-container[data-ae="bottle"]::before {
	content: "";
	position: absolute;
	inset: 26% 22%;
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--ae-g), transparent);
	filter: blur(16px);
	opacity: 0.3;
}

.bde-fancy-container[data-ae="bottle"] img {
	position: relative;
	filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.55));
}


/* step cards: number in a coloured disc, a rule that draws across, lift on hover */
/* Box styling lives on the .y0rf-step global class in Breakdance.
   Only the hover/scroll animation stays here. */
.bde-fancy-container[data-ae="step"] {
	transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s;
}

.bde-fancy-container[data-ae="step"]::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--ae-c);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ae-active [data-ae="step"]::before,
html:not(.ae-js) [data-ae="step"]::before {
	transform: scaleX(1);
}

.ae-active [data-ae="step"]:nth-child(2)::before {
	transition-delay: 0.1s;
}

.ae-active [data-ae="step"]:nth-child(3)::before {
	transition-delay: 0.2s;
}

.ae-active [data-ae="step"] {
	animation: ae-step-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.ae-active [data-ae="step"]:nth-child(2) {
	animation-delay: 0.06s;
}

.ae-active [data-ae="step"]:nth-child(3) {
	animation-delay: 0.12s;
}

@keyframes ae-step-in {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.bde-fancy-container[data-ae="step"]:hover {
	transform: translateY(-6px);
	border-color: var(--ae-c);
	box-shadow: 0 18px 44px var(--ae-g);
}

/* Size and type live on the .y0rf-step-num global class in Breakdance.
   The colour follows the product colour of the tab, so it stays here. */
.bde-text[data-ae="num"] {
	background: var(--ae-c);
	color: #08080c;
	font-family: "Montserrat", sans-serif;
	transition: transform 0.35s;
}

[data-ae="step"]:hover .bde-text[data-ae="num"] {
	transform: scale(1.08);
}

/* product page copy: the description sits in a Breakdance tabs panel, and Woo's default
   16px on a 1.4 line-height reads cramped on a dark background. Size and leading only. */
.single-product .bde-tabs__panel-content,
.single-product .bde-tabs__panel-content p,
.single-product .bde-tabs__panel-content li,
.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-product-details__short-description p {
	font-size: 17px;
	line-height: 1.75;
}

.single-product .bde-tabs__panel-content h3 {
	margin-top: 1.6em;
	margin-bottom: 0.5em;
	font-size: 18px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.single-product .bde-tabs__panel-content ol,
.single-product .bde-tabs__panel-content ul {
	margin: 0.7em 0 0;
	padding-left: 1.3em;
}

.single-product .bde-tabs__panel-content li {
	margin-bottom: 0.5em;
}

.single-product .bde-tabs__panel-content p + p {
	margin-top: 0.9em;
}

/* home product panels: hover turns the whole border the product colour (like the shop grid) */
.bde-fancy-container[data-ae="panel"] {
	transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s;
}

.bde-fancy-container[data-ae="panel"]:hover {
	transform: translateY(-6px);
	border-color: var(--ae-c, #7b2ff7);
	box-shadow: 0 18px 44px var(--ae-g, rgba(0, 0, 0, 0.4));
}

@media (prefers-reduced-motion: reduce) {
	.bde-fancy-container[data-ae="panel"]:hover {
		transform: none;
	}
}

/* before & after cards */
/* Frame styling lives on the .y0rf-ba-frame global class in Breakdance. */
.bde-fancy-container[data-ae="ba"] {
	transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s;
}

.bde-fancy-container[data-ae="ba"] > :first-child {
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
}

.bde-fancy-container[data-ae="ba"]:hover {
	transform: translateY(-6px);
	border-color: var(--ae-c);
	box-shadow: 0 20px 48px var(--ae-g);
}

/* why: the three bottles beside a list of reasons; each row lights up in its colour */
.bde-fancy-container[data-ae="why-bottles"] {
	position: relative;
}

.bde-fancy-container[data-ae="why-bottles"] img {
	position: relative;
}

/* why cards (William's mock-up): boxed, thin border, lift on hover; no glow */
/* Card styling lives on the .y0rf-why-card global class in Breakdance. */
.bde-fancy-container[data-ae="why-card"] {
	transition: transform 0.35s, border-color 0.35s;
}

.bde-fancy-container[data-ae="why-card"]:hover {
	transform: translateY(-5px);
	border-color: var(--ae-c);
}

/* solid colour disc with a dark icon, so the icons are easy to see */
[data-ae="why-card"] .bde-icon-icon,
[data-ae="perk"] .bde-icon-icon {
	background: var(--ae-c) !important;
	border-color: var(--ae-c) !important;
}

[data-ae="why-card"] .bde-icon-icon svg path,
[data-ae="why-card"] .bde-icon-icon svg circle,
[data-ae="why-card"] .bde-icon-icon svg rect,
[data-ae="perk"] .bde-icon-icon svg path,
[data-ae="perk"] .bde-icon-icon svg circle,
[data-ae="perk"] .bde-icon-icon svg rect {
	stroke: #08080c !important;
	stroke-width: 2.2 !important;
}

[data-ae="why-card"] .bde-heading {
	transition: color 0.3s;
}

.bde-fancy-container[data-ae="why-card"]:hover .bde-heading {
	color: var(--ae-c);
}

/* FAQ: each question is its own card, with a + that turns into a x when open */
[data-ae="faq"] .bde-accordion.bde-accordion--bordered {
	border: 0;
	border-radius: 0;
	background: none;
	overflow: visible;
}

[data-ae="faq"] .bde-accordion__content-wrapper {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	background: #111117;
	overflow: hidden;
	transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

[data-ae="faq"] .bde-accordion__content-wrapper:hover {
	transform: translateX(6px);
	border-color: rgba(164, 107, 255, 0.5);
}

[data-ae="faq"] .bde-accordion__content-wrapper.is-active {
	border-color: #a46bff;
	box-shadow: 0 16px 40px rgba(164, 107, 255, 0.16), inset 3px 0 0 #a46bff;
}

[data-ae="faq"] .bde-accordion__button {
	position: relative;
	padding-right: 64px;
	border: 0;
	border-radius: 0;
}

[data-ae="faq"] .bde-accordion__icon {
	display: none;
}

[data-ae="faq"] .bde-accordion__button::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	color: #fff;
	font: 400 22px/26px "Montserrat", sans-serif;
	text-align: center;
	transition: transform 0.35s, background 0.35s, border-color 0.35s, color 0.35s;
}

[data-ae="faq"] .is-active > .bde-accordion__title-tag .bde-accordion__button::after {
	transform: rotate(45deg);
	border-color: #a46bff;
	background: #a46bff;
	color: #08080c;
}

[data-ae="faq"] .bde-accordion__panel {
	border: 0;
}

/* page banners (Contact, Shop): a hero photo behind a dark fade, zooming in gently on load */
.bde-section[data-ae="banner"] {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.bde-section[data-ae="banner"]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-position: center;
	background-size: cover;
	opacity: 0.6;
	transform: scale(1.04);
	animation: ae-banner-in 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.bde-section[data-ae="banner"]::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(7, 7, 11, 0.97) 0%, rgba(7, 7, 11, 0.86) 45%, rgba(7, 7, 11, 0.45) 100%),
		linear-gradient(0deg, #07070b 0%, rgba(7, 7, 11, 0) 35%);
}

[data-ae-banner="wheel"]::before {
	/* ?v= so browsers drop the old copy that still had the yellow brake caliper */
	background-image: url("../images/slides/youre-fired-background.webp?v=1084");
}

[data-ae-banner="foam"]::before {
	background-image: url("../images/slides/no-days-off-background.webp");
}

/* Our Story banner: close-up of glossy black paint under studio lights */
[data-ae-banner="paint"]::before {
	background-image: url("/wp-content/uploads/2026/09/story-banner-paint.webp");
	background-position: center;
}

/* Shop banner: a clean, glossy dark car in a studio */
[data-ae-banner="car"]::before {
	background-image: url("/wp-content/uploads/2026/09/shop-banner-car.webp");
	background-position: 70% 50%;
}

@keyframes ae-banner-in {
	from {
		opacity: 0;
		transform: scale(1.14);
	}
	to {
		opacity: 0.6;
		transform: scale(1.04);
	}
}

.bde-fancy-container[data-ae="banner-photo"] img {
	border-radius: 18px;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
}

/* contact cards lift on hover */
.bde-fancy-container[data-ae="card"] {
	transition: transform 0.35s, box-shadow 0.35s;
}

.bde-fancy-container[data-ae="card"]:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.9);
}

/* shop grid: the live WooCommerce product list as dark colour cards (William's mock-up):
   green You're Fired, purple No Days Off!, blue P45, silver Spray Trigger */
[data-ae="shop"] li.post-21 { --ae-c: #93e23d; --ae-btn: #5fae14; --ae-btn-text: #08080c; }
[data-ae="shop"] li.post-23 { --ae-c: #a46bff; --ae-btn: #7b2ff7; --ae-btn-text: #ffffff; }
[data-ae="shop"] li.post-25 { --ae-c: #4aa8ff; --ae-btn: #1f8bff; --ae-btn-text: #08080c; }
[data-ae="shop"] li.post-156 { --ae-c: #d9d9e2; --ae-btn: transparent; --ae-btn-text: #ffffff; }

/* category filter buttons ([yfh_shop_filters]) */
.yfh-shop-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.yfh-shop-filters .yfh-filter {
	--ae-c: #ffffff;
	--ae-t: #08080c;
	padding: 11px 22px;
	border-radius: 999px;
	background: var(--ae-c);
	color: var(--ae-t);
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
	transition: opacity 0.25s, transform 0.25s;
}

.yfh-shop-filters .yfh-filter--wheels { --ae-c: #93e23d; }
.yfh-shop-filters .yfh-filter--bodywork { --ae-c: #7b2ff7; --ae-t: #ffffff; }
.yfh-shop-filters .yfh-filter--interior { --ae-c: #1f8bff; }
.yfh-shop-filters .yfh-filter--accessories { --ae-c: #d9d9e2; }

.yfh-shop-filters .yfh-filter:hover {
	transform: translateY(-2px);
	color: var(--ae-t);
}

.yfh-shop-filters .yfh-filter.is-active {
	opacity: 1;
	box-shadow: 0 0 0 2px #07070b, 0 0 0 4px #ffffff;
}

/* bar: product count on the left, sorting on the right, drawn as one strip */
[data-ae="shop"] .bde-wooshoppage {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
}

[data-ae="shop"] .bde-wooshoppage > * {
	flex: 0 0 100%;
}

[data-ae="shop"] .bde-wooshoppage::before {
	content: "";
	order: 1;
	flex: 0 0 100%;
	height: 0;
}

[data-ae="shop"] .breakdance-woocommerce .woocommerce-result-count,
[data-ae="shop"] .breakdance-woocommerce .woocommerce-ordering {
	float: none;
	margin: 0 0 24px;
	min-height: 58px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: #0e0e14;
}

[data-ae="shop"] .breakdance-woocommerce .woocommerce-result-count {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	width: auto;
	padding: 0 22px;
	border-left: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px 0 0 10px;
	color: #c9c9d3;
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

[data-ae="shop"] .breakdance-woocommerce .woocommerce-ordering {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	width: auto;
	padding: 0 10px 0 0;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0 10px 10px 0;
}

[data-ae="shop"] .bde-wooshoppage > .woocommerce-notices-wrapper { order: 0; }
[data-ae="shop"] .bde-wooshoppage > .woocommerce-result-count { order: 2; }
[data-ae="shop"] .bde-wooshoppage > .woocommerce-ordering { order: 3; }
[data-ae="shop"] .bde-wooshoppage > ul.products { order: 4; }
[data-ae="shop"] .bde-wooshoppage > .woocommerce-pagination { margin-top: 28px; }

@media (max-width: 479px) {
	[data-ae="shop"] .breakdance-woocommerce .woocommerce-result-count {
		flex: 0 0 auto;
		padding: 0 12px;
		font-size: 11px;
	}

	[data-ae="shop"] .breakdance-woocommerce .woocommerce-ordering {
		flex: 1 1 0;
		min-width: 0;
		padding-left: 0;
	}

	[data-ae="shop"] .breakdance-woocommerce .woocommerce-ordering .bde-woo-select,
	[data-ae="shop"] .breakdance-woocommerce .woocommerce-ordering select {
		width: 100%;
		min-width: 0;
		font-size: 11px;
	}
}
[data-ae="shop"] .bde-wooshoppage > nav,
[data-ae="shop"] .bde-wooshoppage > .woocommerce-pagination { order: 5; }

[data-ae="shop"] .breakdance-woocommerce .woocommerce-ordering select {
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 6px;
	background: transparent;
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

[data-ae="shop"] .breakdance-woocommerce .woocommerce-ordering select option {
	background: #0e0e14;
	color: #fff;
}

[data-ae="shop"] .breakdance-woocommerce .woocommerce-ordering .bde-woo-select__arrow {
	color: #fff;
	border-color: #fff;
	opacity: 1;
}

[data-ae="shop"] .breakdance-woocommerce .woocommerce-ordering .bde-woo-select__arrow svg,
[data-ae="shop"] .breakdance-woocommerce .woocommerce-ordering .bde-woo-select__arrow::before,
[data-ae="shop"] .breakdance-woocommerce .woocommerce-ordering .bde-woo-select__arrow::after {
	color: #fff;
	border-color: #fff;
	fill: #fff;
	stroke: #fff;
}

[data-ae="shop"] .breakdance-woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
}

@media (max-width: 1119px) {
	[data-ae="shop"] .breakdance-woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 479px) {
	[data-ae="shop"] .breakdance-woocommerce ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

[data-ae="shop"] .breakdance-woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-top: 3px solid var(--ae-c, #7b2ff7);
	border-radius: 14px;
	background: #0e0e14;
	animation: ae-step-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	transition: transform 0.35s, border-color 0.35s;
}

[data-ae="shop"] .breakdance-woocommerce ul.products li.product:nth-child(2) { animation-delay: 0.1s; }
[data-ae="shop"] .breakdance-woocommerce ul.products li.product:nth-child(3) { animation-delay: 0.2s; }
[data-ae="shop"] .breakdance-woocommerce ul.products li.product:nth-child(4) { animation-delay: 0.3s; }

[data-ae="shop"] .breakdance-woocommerce ul.products li.product:hover {
	transform: translateY(-6px);
	border-color: var(--ae-c, #7b2ff7);
}

[data-ae="shop"] .breakdance-woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: #fff;
	text-decoration: none;
}

[data-ae="shop"] .breakdance-woocommerce ul.products li.product .bde-woo-product-image {
	overflow: hidden;
	margin: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0;
	background: #0b0b10;
	aspect-ratio: 1 / 0.92;
}

[data-ae="shop"] .breakdance-woocommerce ul.products li.product .bde-woo-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
	transition: transform 0.5s ease;
}

[data-ae="shop"] .breakdance-woocommerce ul.products li.product:hover .bde-woo-product-image img {
	transform: scale(1.05);
}

[data-ae="shop"] .breakdance-woocommerce ul.products li.product h2.woocommerce-loop-product__title {
	margin: 0;
	padding: 22px 22px 4px;
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

[data-ae="shop"] .breakdance-woocommerce ul.products li.product .yfh-card-type {
	display: block;
	padding: 0 22px;
	color: #8d8d9a;
	font-family: "Montserrat", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

[data-ae="shop"] .breakdance-woocommerce ul.products li.product .bde-woo-product-footer {
	margin: 0;
	margin-top: auto;
	padding: 18px 22px 22px;
}

[data-ae="shop"] .breakdance-woocommerce ul.products li.product a.button {
	position: relative;
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border: 1px solid var(--ae-btn, #7b2ff7);
	border-radius: 6px;
	background: var(--ae-btn, #7b2ff7);
	color: var(--ae-btn-text, #fff);
	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: filter 0.2s, background 0.2s;
}

/* arrow on the right of every card button */
[data-ae="shop"] .breakdance-woocommerce ul.products li.product a.button::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

[data-ae="shop"] .breakdance-woocommerce ul.products li.post-156 a.button {
	border-color: rgba(255, 255, 255, 0.55);
}

[data-ae="shop"] .breakdance-woocommerce ul.products li.product a.button:hover {
	color: var(--ae-btn-text, #fff);
	filter: brightness(1.12);
}

[data-ae="shop"] .breakdance-woocommerce ul.products li.post-156 a.button:hover {
	background: rgba(255, 255, 255, 0.08);
}

[data-ae="shop"] .breakdance-woocommerce a.added_to_cart {
	display: block;
	margin-top: 10px;
	color: var(--ae-c, #fff);
	font-size: 13px;
	text-align: center;
}

/* Our story photo: portrait, so George and the bottle are both in view */
.y0rf-story-img {
	height: auto !important;
	aspect-ratio: 1082 / 1454;
	object-position: center top !important;
}

/* small section titles run green, purple, blue down the page (the rest are set in Breakdance) */
.y0rf-clean .y0rf-eyebrow { color: #93e23d; }
.y0rf-story .y0rf-eyebrow { color: #a46bff; }
.y0rf-results .y0rf-eyebrow { color: #4aa8ff; }

/* feature strip under the hero: same look as the delivery strip (William) - solid colour disc
   icons beside a coloured title and a white line, centred in each column, no divider lines */
.y0rf-features {
	column-gap: 24px !important;
	row-gap: 20px !important;
}

.y0rf-features > .y0rf-feature {
	justify-content: center !important;
	align-items: center !important;
	gap: 16px !important;
	padding: 4px 0 !important;
	border: 0 !important;
}

.y0rf-features > .y0rf-feature > .y0rf-feature-icon {
	box-sizing: border-box;
	flex: 0 0 50px;
	width: 50px !important;
	height: 50px !important;
	margin: 0;
	padding: 13px;
	border-radius: 50%;
	color: #08080c !important;
}

.y0rf-features > .y0rf-feature:nth-child(1) > .y0rf-feature-icon { background: #93e23d; }
.y0rf-features > .y0rf-feature:nth-child(2) > .y0rf-feature-icon { background: #a46bff; }
.y0rf-features > .y0rf-feature:nth-child(3) > .y0rf-feature-icon { background: #4aa8ff; }

.y0rf-features .y0rf-feature-icon svg {
	width: 100%;
	height: 100%;
	stroke: #08080c;
	stroke-width: 2.2;
}

.y0rf-features .y0rf-feature-title {
	font-size: 14px !important;
}

.y0rf-features .y0rf-feature-sub {
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #ffffff !important;
	max-width: 330px;
}

@media (max-width: 767px) {
	.y0rf-features > .y0rf-feature {
		justify-content: flex-start !important;
	}
}

/* the England flag icon keeps its real colours (white flag, red cross) inside the coloured circles */
[data-ae] .bde-icon-icon svg path.yfh-flag-cross,
.y0rf-features .y0rf-feature-icon svg path.yfh-flag-cross {
	fill: #e4002b !important;
	stroke: none !important;
}

[data-ae] .bde-icon-icon svg rect.yfh-flag-field,
.y0rf-features .y0rf-feature-icon svg rect.yfh-flag-field {
	fill: #ffffff !important;
	stroke: #08080c !important;
	stroke-width: 1.6 !important;
}

/* Our Story: George's photo stays in view beside his story on wider screens */
@media (min-width: 1120px) {
	.bde-fancy-container[data-ae="sticky-photo"] {
		position: sticky;
		top: 130px;
		align-self: flex-start;
	}
}

.bde-fancy-container[data-ae="sticky-photo"] img {
	border-radius: 18px;
}

/* delivery strip: each item centred in its column */
.bde-fancy-container[data-ae="perk"] {
	justify-content: center !important;
}

@media (max-width: 1119px) {
	.bde-fancy-container[data-ae="perk"] {
		justify-content: flex-start !important;
	}
}

/* footer without the "Join the journey" column: logo + socials, then the three link columns */
@media (min-width: 1120px) {
	.y0rf-footer-grid {
		grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) !important;
	}
}

/* delivery strip */
.bde-fancy-container[data-ae="perk"] {
	transition: transform 0.35s;
}

.bde-fancy-container[data-ae="perk"]:hover {
	transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
	html.ae-js [data-ae-reveal],
	[data-ae],
	[data-ae]::before,
	[data-ae] *,
	[data-ae-panel] {
		transition: none !important;
		animation: none !important;
	}

	html.ae-js [data-ae-reveal] {
		opacity: 1;
		transform: none;
	}

	[data-ae="step"]::before,
	html.ae-js [data-ae-reveal]:not(.ae-in) [data-ae="bar"] {
		transform: none;
	}
}

/* Header menu (8 links): keep the logo from being squeezed out, tighten on
   smaller laptops, and wrap onto two rows on phones instead of hiding links. */
.y0rf-header-logo-link {
	flex-shrink: 0;
}
@media (max-width: 1300px) {
	.y0rf-header .y0rf-header-inner {
		gap: 20px;
	}
	.y0rf-header .y0rf-nav {
		gap: 14px;
	}
	.y0rf-header .y0rf-header-actions {
		gap: 12px;
	}
	.y0rf-header .y0rf-header-logo-link {
		max-width: 100px;
	}
}
@media (min-width: 1024px) and (max-width: 1120px) {
	.y0rf-header .y0rf-header-inner {
		flex-wrap: wrap;
	}
	.y0rf-header .y0rf-nav {
		order: 3;
		width: 100%;
	}
	.y0rf-header .y0rf-header-btn {
		white-space: nowrap;
	}
}
@media (max-width: 767px) {
	.y0rf-header .y0rf-nav {
		flex-wrap: wrap;
		justify-content: center;
		overflow-x: visible;
		column-gap: 16px;
		row-gap: 6px;
	}
}

/* ------------------------------------------- below desktop: whole cloth, soft wipe edge

   The cloth is shown whole (contain), so on anything narrower than a desktop it is
   shorter than the slide. The desktop mask is a streaky hard-edged image, and anywhere
   the cloth does not cover it that edge reads as a long line above and below the cloth.
   Below 1025px the mask becomes a soft gradient instead: same geometry (230% wide, edge
   swept by the same animation), same wipe, but the boundary is a feather rather than a
   line, so there is nothing for the uncovered part to show. Desktop keeps the streaky
   cloth mask. */
@media (max-width: 1024px) {
	.yfh-is-ready .yfh-slide {
		-webkit-mask-image: linear-gradient(90deg, transparent 0 46%, #000 56% 100%);
		mask-image: linear-gradient(90deg, transparent 0 46%, #000 56% 100%);
	}

	/* whole cloth, scaled down to fit — never cropped */
	.yfh-hero__stage::after {
		background-size: contain;
		top: 4%;
		bottom: 4%;
	}
}

/* the shorter hero is a phone thing only — tablets keep their height */
@media (max-width: 767px) {
	.yfh-slide {
		min-height: clamp(400px, 104vw, 520px) !important;
	}
}


/* ---------------------------------------------------------------------------
   MOBILE IMAGE WEIGHT - before/after tiles.
   The six square photos are 840KB together, and Breakdance writes them into the
   page CSS as background-image, which cannot be lazy-loaded, so every one of them
   downloaded on first paint for a section that sits ~8,600px down the page. They
   are 1200x1200 sources shown in a 326px tile on a phone.
   Below tablet-landscape the tile is never wider than ~390px, so the 768px copies
   WordPress already generated are used instead: 840KB -> 408KB.
   Specificity note: Breakdance's own rule is two classes carrying !important, so
   each rule here adds a third (the card's .y0rf-ba-frame) to win regardless of
   which stylesheet loads last - the post CSS loads after this file.
   --------------------------------------------------------------------------- */
@media (max-width: 1119px) {
	.y0rf-ba-frame .bde-image-comparison-141-480 .image-lft {
		background-image: url("https://yourefired.co.uk/wp-content/uploads/2026/09/sq-wheels-before-768x768.webp") !important;
	}

	.y0rf-ba-frame .bde-image-comparison-141-480 .image-rgt {
		background-image: url("https://yourefired.co.uk/wp-content/uploads/2026/09/sq-wheels-after-768x768.webp") !important;
	}

	.y0rf-ba-frame .bde-image-comparison-141-486 .image-lft {
		background-image: url("https://yourefired.co.uk/wp-content/uploads/2026/10/sq-bodywork-before-768x768.webp") !important;
	}

	.y0rf-ba-frame .bde-image-comparison-141-486 .image-rgt {
		background-image: url("https://yourefired.co.uk/wp-content/uploads/2026/10/sq-bodywork-after-768x768.webp") !important;
	}

	.y0rf-ba-frame .bde-image-comparison-141-492 .image-lft {
		background-image: url("https://yourefired.co.uk/wp-content/uploads/2026/10/sq-interior-before-768x768.webp") !important;
	}

	.y0rf-ba-frame .bde-image-comparison-141-492 .image-rgt {
		background-image: url("https://yourefired.co.uk/wp-content/uploads/2026/10/sq-interior-after-768x768.webp") !important;
	}
}