/* Liquid glass – photo, colour-tinted light, and a refractive glass panel with a travelling sheen. */
.q-hs-liquid .q-page-hero {
	--q-ph-fg: #fff;
	--q-ph-muted: rgb(255 255 255 / 86%);
	--q-ph-accent: #f3d9a6;
	background: #1c1714 var(--q-hero-img, none) center 55% / cover no-repeat;
	padding-block: clamp(4.5rem, 11vw, 9rem) clamp(3.5rem, 8vw, 6.5rem) !important;
}
.q-hs-liquid .q-ph__deco::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgb(28 23 20 / 78%) 0%, rgb(28 23 20 / 45%) 50%, rgb(28 23 20 / 15%) 100%), linear-gradient(0deg, rgb(28 23 20 / 55%), transparent 55%); }
/* Coloured light pooling behind the glass so the refraction has something to bend */
.q-hs-liquid .q-ph__d1 { width: 42vw; aspect-ratio: 1; left: -8vw; top: -14vw; border-radius: 50%; background: radial-gradient(circle, rgb(213 119 77 / 70%), transparent 65%); filter: blur(10px); animation: q-liq-drift 16s ease-in-out infinite alternate; }
.q-hs-liquid .q-ph__d2 { width: 30vw; aspect-ratio: 1; left: 30vw; bottom: -18vw; border-radius: 50%; background: radial-gradient(circle, rgb(201 164 92 / 55%), transparent 65%); filter: blur(10px); animation: q-liq-drift 20s ease-in-out infinite alternate-reverse; }
@keyframes q-liq-drift { to { transform: translate(6vw, 3vw) scale(1.15); } }

.q-hs-liquid .q-ph__panel {
	width: fit-content;
	max-width: min(760px, 100%);
	padding: clamp(1.6rem, 4vw, 2.8rem) clamp(1.4rem, 4vw, 3rem);
	border-radius: 34px;
	background:
		radial-gradient(120% 90% at 10% 0%, rgb(255 255 255 / 30%), transparent 45%),
		linear-gradient(160deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 6%));
	-webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(1.06);
	backdrop-filter: blur(22px) saturate(1.9) brightness(1.06);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 70%),
		inset 0 -1px 0 rgb(255 255 255 / 18%),
		inset 1px 0 0 rgb(255 255 255 / 30%),
		inset 0 -24px 40px -28px rgb(0 0 0 / 50%),
		0 30px 80px -30px rgb(0 0 0 / 70%);
	overflow: hidden;
}
/* Refractive rim: a bright gradient border that fades around the edge */
.q-hs-liquid .q-ph__panel::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
	background: linear-gradient(135deg, rgb(255 255 255 / 90%), rgb(255 255 255 / 10%) 35%, rgb(255 255 255 / 5%) 60%, rgb(255 220 190 / 70%));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Travelling specular sheen */
.q-hs-liquid .q-ph__panel::after {
	content: ""; position: absolute; top: -40%; bottom: -40%; width: 30%; left: -40%; pointer-events: none;
	background: linear-gradient(100deg, transparent, rgb(255 255 255 / 22%), transparent);
	transform: rotate(12deg);
	animation: q-liq-sheen 7s ease-in-out 1s infinite;
}
@keyframes q-liq-sheen { 0% { left: -40%; } 45%, 100% { left: 130%; } }
.q-hs-liquid .q-ph__crumbs { display: inline-flex; padding: .45em .9em; border-radius: 999px; background: rgb(255 255 255 / 14%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%); }
.q-hs-liquid .q-page-hero .wp-block-post-title { text-shadow: 0 2px 30px rgb(0 0 0 / 35%); }
@supports not (backdrop-filter: blur(1px)) { .q-hs-liquid .q-ph__panel { background: rgb(28 23 20 / 72%); } }