/* Bree Serif — display / headings. latin-ext */
@font-face {
	font-family: "Bree Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/static/bree-serif-latin-ext.woff2) format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* Bree Serif — latin */
@font-face {
	font-family: "Bree Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/static/bree-serif.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;
}

/* Inter — body / UI. Variable file, only 400-600 is declared. latin-ext */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url(/static/inter-latin-ext.woff2) format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* Inter — latin */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url(/static/inter.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;
}

/* ==========================================================================
   INFINIX RENO — global brand theme tokens.
   Single source of truth for brand colour and type. The UnoCSS theme in
   static/config.js maps its utility colours onto these same hex values, so
   `bg-amber` and `var(--color-primary)` always resolve to the same colour.
   ========================================================================== */
:root {
	/* Identity colours */
	--brand-raw-steel: #58595b;
	--brand-amber-gold: #f5c142;
	--brand-daylight-yellow: #fdf280;
	--brand-light-mortar: #dcdcdc;

	/* Derived shades, only for hover/active states */
	--brand-raw-steel-dark: #454647;
	--brand-amber-gold-dark: #e0a92b;

	/* Semantic roles */
	--color-primary: var(--brand-amber-gold);
	--color-secondary: var(--brand-daylight-yellow);
	--color-dark: var(--brand-raw-steel);

	--background-main: #ffffff;
	--background-soft: #f7f7f5;
	/* Warm off-white ground and the soft cream form surface, both derived from
	   Amber Gold rather than being new hues. */
	--background-warm: #fcfbf7;
	--surface-cream: #fff6e0;

	--text-primary: var(--brand-raw-steel);
	--text-secondary: #77787a;
	--text-on-dark: #f2f2f2;

	--border-color: var(--brand-light-mortar);

	/* One brand gradient, used sparingly as a thin decorative rule */
	--brand-gradient: linear-gradient(
		90deg,
		#58595b 0%,
		#f5c142 35%,
		#fdf280 65%,
		#dcdcdc 100%
	);

	--font-display: "Bree Serif", Georgia, serif;
	--font-body: "Inter", Arial, sans-serif;
}

html {
	font-size: 14px;
}

body {
	font-family: var(--font-body);
	font-optical-sizing: auto;
	font-style: normal;
	color: var(--text-primary);
	background-color: var(--background-main);
}

/* Headings are Bree Serif everywhere, so a missing utility class can never
   silently fall back to the body sans. */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.12;
	color: var(--text-primary);
}

/* Display sizes live here rather than in per-page utilities: the root is 14px,
   so the utility scale tops out below the brand's H1 range. clamp() covers
   mobile -> tablet -> desktop in one declaration. A page that deliberately
   wants a small heading still overrides these with a text-* utility. */
h1 {
	font-size: clamp(36px, 5vw, 68px);
	line-height: 1.06;
}

h2 {
	font-size: clamp(28px, 3.2vw, 48px);
	line-height: 1.14;
}

h3 {
	font-size: clamp(22px, 1.9vw, 30px);
	line-height: 1.25;
}

/* Button interaction: a small lift and a soft shadow on hover, pressed back
   down on click. Kept off the transform of anything that also animates in. */
.btn-lift {
	will-change: transform;
}

.btn-lift:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -10px rgba(88, 89, 91, 0.45);
}

.btn-lift:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 4px 10px -6px rgba(88, 89, 91, 0.4);
}

@media (prefers-reduced-motion: reduce) {
	.btn-lift:hover:not(:disabled),
	.btn-lift:active:not(:disabled) {
		transform: none;
	}
}

/* ==========================================================================
   SECTION PHOTO BACKDROP

   A photograph behind a section, softened so it reads as atmosphere rather
   than as the subject. The image is blurred and scaled slightly (blur leaves
   soft transparent edges; the scale hides them), then covered by a scrim in
   the section's own colour so the existing text colours stay legible without
   the section changing theme. An inset shadow adds the vignette.

   Two variants: --light keeps Raw Steel text on a pale ground, --dark keeps
   white text on Raw Steel.
   ========================================================================== */
.section-photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	border-radius: inherit;
}

.section-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(3px);
	transform: scale(1.06);
}

.section-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 90px rgba(88, 89, 91, 0.22);
}

.section-photo--light::after {
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0.94) 0%,
		rgba(255, 255, 255, 0.86) 45%,
		rgba(247, 247, 245, 0.72) 100%
	);
}

.section-photo--dark::after {
	background: linear-gradient(
		100deg,
		rgba(88, 89, 91, 0.93) 0%,
		rgba(88, 89, 91, 0.86) 55%,
		rgba(69, 70, 71, 0.9) 100%
	);
}

/* Anything that should sit above the backdrop. */
.section-photo-content {
	position: relative;
	z-index: 1;
}

.home-hero .section-photo img {
	object-position: center;
}

.service-hero {
	background-color: var(--background-soft);
}

.service-hero .section-photo img {
	object-position: center;
}

.service-hero .section-photo--light::after {
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0.78) 0%,
		rgba(255, 255, 255, 0.66) 42%,
		rgba(247, 247, 245, 0.48) 100%
	);
}

.home-hero .section-photo--light::after {
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0.92) 0%,
		rgba(255, 255, 255, 0.82) 42%,
		rgba(247, 247, 245, 0.56) 100%
	);
}

.home-hero__subline,
.home-hero__body {
	max-width: 54rem;
}

@media (min-width: 1024px) {
	.home-hero,
	.home-hero__content {
		min-height: 42rem;
	}

	.home-hero__content {
		padding-top: 7rem;
		padding-bottom: 3.5rem;
		justify-content: flex-end;
		align-items: flex-start;
		gap: 1.75rem;
	}

	.home-hero__actions {
		padding-top: 0.25rem;
	}
}

@media (max-width: 1023px) {
	.home-hero,
	.home-hero__content {
		min-height: auto;
	}

	.home-hero__content {
		padding-top: 6rem;
		padding-bottom: 4.5rem;
		justify-content: flex-end;
		align-items: flex-start;
		gap: 1.25rem;
	}

	.home-hero__title {
		max-width: 100%;
		font-size: clamp(3.1rem, 8vw, 4.25rem);
		line-height: 1.02;
	}

	.home-hero__subline {
		font-size: clamp(1.4rem, 2.5vw, 1.8rem);
		line-height: 1.25;
	}

	.home-hero__body {
		max-width: 42rem;
		font-size: clamp(1.1rem, 2vw, 1.35rem);
		line-height: 1.58;
	}
}

@media (max-width: 767px) {
	.home-hero {
		overflow-x: clip;
	}

	.home-hero .section-photo img {
		filter: blur(1px);
		transform: scale(1.025);
		object-position: center center;
	}

	.home-hero .section-photo--light::after {
		background: linear-gradient(
			100deg,
			rgba(255, 255, 255, 0.94) 0%,
			rgba(255, 255, 255, 0.8) 48%,
			rgba(247, 247, 245, 0.52) 100%
		);
	}

	.home-hero__content {
		padding-top: 4.75rem;
		padding-bottom: 3.75rem;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		gap: 1rem;
	}

	.home-hero__title {
		font-size: clamp(2.6rem, 10vw, 3.25rem);
		line-height: 0.99;
		text-wrap: balance;
	}

	.home-hero__accent {
		width: 9.5rem;
		margin-top: 1.25rem;
	}

	.home-hero__subline {
		font-size: 1.3rem;
		line-height: 1.22;
	}

	.home-hero__body {
		width: 100%;
		max-width: 34rem;
		font-size: 1.15rem;
		line-height: 1.55;
	}

	.home-hero__actions {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.home-hero__button {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 389px) {
	.home-hero__content {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.home-hero__title {
		font-size: clamp(2.45rem, 10.5vw, 3rem);
	}

	.home-hero__subline {
		font-size: 1.2rem;
	}

	.home-hero__body {
		font-size: 1.08rem;
	}
}

/* ==========================================================================
   NAVIGATION — desktop Services dropdown.

   These rules are hand-written here rather than composed from UnoCSS utility
   classes, deliberately. The panel's structural properties (position, and the
   hidden state) have to be correct before any JavaScript runs and before any
   CSS generation happens. In development the UnoCSS browser runtime builds
   utility CSS by scanning the DOM, so a panel whose `position: absolute` came
   from a generated utility is briefly unstyled — that is, `position: static`,
   `display: block`, full width — which drops it into the navbar's flex row and
   pushes the header open. Plain stylesheet rules are never subject to that.

   Visibility is driven by `.is-open` toggling opacity / visibility /
   pointer-events / transform only. `position` and `display` never change, so
   opening the menu cannot affect header height or move sibling nav items.
   ========================================================================== */

/* Alpine strips x-cloak on init, but the attribute does nothing on its own.
   Without this rule every x-cloak element is fully visible until Alpine boots. */
[x-cloak] {
	display: none !important;
}

.services-menu {
	position: relative;
	display: flex;
	align-items: center;
}

.services-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	z-index: 60;

	width: 320px;
	margin: 0;
	padding: 8px;
	list-style: none;

	display: flex;
	flex-direction: column;
	gap: 2px;

	background: var(--background-main);
	border: 1px solid var(--border-color);
	border-radius: 14px;
	box-shadow:
		0 14px 35px rgba(88, 89, 91, 0.14),
		0 2px 6px rgba(88, 89, 91, 0.06);

	/* Closed. Never `display: none`, so the panel keeps its absolute
	   positioning and can transition. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%) translateY(-6px);
	transition:
		opacity 180ms ease-out,
		transform 180ms ease-out,
		visibility 180ms;
}

.services-dropdown.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.services-dropdown__item {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 42px;
	padding: 0 16px 0 18px;
	border-radius: 10px;

	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--text-primary);
	text-decoration: none;

	transition:
		background-color 150ms ease,
		color 150ms ease;
}

.services-dropdown__item:hover {
	/* Very light Daylight Yellow, not a solid block. */
	background: rgba(253, 242, 128, 0.35);
}

.services-dropdown__item:focus-visible {
	background: rgba(253, 242, 128, 0.35);
	outline: 2px solid var(--brand-amber-gold);
	outline-offset: -2px;
}

/* "All Services" leads the list. */
.services-dropdown__item--lead {
	font-weight: 600;
}

/* Current page: Daylight Yellow row with an Amber Gold accent bar. */
.services-dropdown__item--current {
	background: var(--brand-daylight-yellow);
}

.services-dropdown__item--current::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 16px;
	border-radius: 2px;
	background: var(--brand-amber-gold);
}

.services-dropdown__divider {
	height: 1px;
	margin: 6px 8px;
	background: var(--border-color);
	list-style: none;
}

/* The mobile menu is an accordion in normal flow and shares no positioning
   with the desktop panel above. */
.mobile-submenu {
	position: static;
	display: flex;
	flex-direction: column;
}

@media (prefers-reduced-motion: reduce) {
	.services-dropdown {
		transition: none;
	}
}

/* Staggered entrance for grids of cards. Deliberately a keyframe animation
   rather than a transition: the per-card delay must not also delay that card's
   hover response, and transition-delay would. Elements start at opacity 0 and
   the animation holds its end state via `both`. */
@keyframes card-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.card-rise {
	animation: card-rise 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.card-rise {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* Thin decorative brand rule. Used for the footer top line and hero accents. */
.brand-rule {
	background: var(--brand-gradient);
}

/* ==========================================================================
   ENQUIRY COMPOSITION — the "Get In Touch" band on /contact-us.

   Three parts share one ground: the service list, the enquiry card and the
   photograph. On wide screens the card is deliberately allowed to sit over the
   photograph's leading edge so the group reads as one composition rather than
   three tiles; below `lg` the overlap is dropped and everything stacks.

   Hand-written here rather than composed from utilities because the card is a
   small design system of its own — one field treatment repeated seven times,
   plus two organic shapes that arbitrary-value utilities express badly.
   ========================================================================== */

.enquiry-card {
	background: var(--surface-cream);
	border: 1px solid rgba(245, 193, 66, 0.38);
	border-radius: 18px;
	box-shadow: 0 26px 60px -32px rgba(88, 89, 91, 0.4);
}

.enquiry-composition {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 24px;
}

.enquiry-form-card {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 520px;
}

/* Field label. Raw Steel rather than the secondary grey: the cream ground is
   light enough that #77787A drops under 4.5:1 at this size. */
.enquiry-label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-primary);
}

.enquiry-label__optional {
	margin-left: 6px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--text-secondary);
}

/* Underlined field. Border width never changes on focus — the colour swap plus
   a 1px shadow doubles the apparent weight without shifting the baseline. */
.enquiry-field {
	width: 100%;
	padding: 8px 2px;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(88, 89, 91, 0.18);
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 1.125rem;
	line-height: 1.5;
	color: var(--text-primary);
	transition:
		border-color 200ms ease,
		box-shadow 200ms ease;
}

.enquiry-field::placeholder {
	color: var(--text-secondary);
}

.enquiry-field:focus {
	outline: none;
	border-bottom-color: var(--brand-amber-gold);
	box-shadow: 0 1px 0 0 var(--brand-amber-gold);
}

.enquiry-field[aria-invalid="true"] {
	border-bottom-color: #dc2626;
}

/* Custom enquiry listbox. Styled to match the nav Services dropdown rather than
   the browser-native system menu. */
.enquiry-select-control {
	position: relative;
}

.enquiry-select-trigger {
	width: 100%;
	min-height: 54px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: var(--background-main);
	border: 1px solid var(--border-color);
	border-radius: 10px;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--text-primary);
	text-align: left;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
	transition:
		border-color 200ms ease,
		box-shadow 200ms ease;
}

.enquiry-select-trigger:focus-visible,
.enquiry-select-trigger:hover {
	border-color: var(--brand-amber-gold);
	box-shadow: 0 16px 28px -24px rgba(245, 193, 66, 0.65);
}

.enquiry-select-trigger.is-invalid {
	border-color: #dc2626;
}

.enquiry-select-trigger__text {
	flex: 1;
}

.enquiry-select-trigger__chevron {
	display: inline-flex;
	color: var(--text-primary);
	transition: transform 180ms ease-out;
}

.enquiry-select-trigger__chevron.is-open {
	transform: rotate(180deg);
}

.enquiry-select-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 2000;
	width: 100%;
	padding: 8px;
	background: var(--background-main);
	border: 1px solid var(--border-color);
	border-radius: 14px;
	box-shadow:
		0 14px 35px rgba(88, 89, 91, 0.1),
		0 2px 6px rgba(88, 89, 91, 0.06);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-4px);
	transition:
		opacity 180ms ease-out,
		transform 180ms ease-out,
		visibility 180ms;
}

.enquiry-select-panel.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.enquiry-select-panel__inner {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 320px;
	overflow-y: auto;
}

.enquiry-select-option {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 42px;
	padding: 10px 14px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--text-primary);
	text-align: left;
	transition:
		background-color 150ms ease,
		color 150ms ease;
}

.enquiry-select-option:hover,
.enquiry-select-option:focus-visible {
	background: rgba(253, 242, 128, 0.35);
	outline: none;
}

.enquiry-select-option.is-selected {
	background: var(--brand-daylight-yellow);
}

.enquiry-select-option__indicator {
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 9999px;
	background: var(--brand-amber-gold);
	opacity: 0;
	transform: scale(0.6);
	transition:
		opacity 150ms ease,
		transform 150ms ease;
}

.enquiry-select-option__indicator.is-visible {
	opacity: 1;
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.enquiry-select-trigger__chevron,
	.enquiry-select-panel,
	.enquiry-select-option__indicator {
		transition: none;
	}
}

/* A six-row box reads badly with only an underline, so the one multi-line
   field takes the "minimal 1px border" variant instead. */
.enquiry-textarea {
	width: 100%;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(88, 89, 91, 0.18);
	border-radius: 10px;
	font-family: var(--font-body);
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--text-primary);
	transition: border-color 200ms ease;
}

.enquiry-textarea::placeholder {
	color: var(--text-secondary);
}

.enquiry-textarea:focus {
	outline: none;
	border-color: var(--brand-amber-gold);
}

/* Service list item on the left. The Amber Gold rule grows in under the label
   on hover; the glyph lifts 2px with it. */
.enquiry-service {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 2px 12px;
	color: var(--text-primary);
}

.enquiry-service::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--border-color);
}

.enquiry-service::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--brand-amber-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 220ms ease-out;
}

.enquiry-service:hover::before {
	transform: scaleX(1);
}

.enquiry-service img {
	transition: transform 220ms ease-out;
}

.enquiry-service:hover img {
	transform: translateY(-2px);
}

/* Organic photo mask. Kept close to a circle-ish rounded rectangle rather than
   a lopsided blob — the corners differ enough to read as drawn, not generated. */
.enquiry-figure {
	overflow: hidden;
	border-radius: 46% 54% 44% 56% / 40% 38% 62% 60%;
}

.enquiry-visual {
	position: relative;
	z-index: 2;
	width: min(100%, 380px);
	align-self: flex-end;
	aspect-ratio: 4 / 5;
	box-shadow: 0 24px 50px -36px rgba(88, 89, 91, 0.35);
}

.enquiry-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.enquiry-figure:hover img {
	transform: scale(1.02);
}

/* Decorations. Three, all inert. */
.enquiry-blob {
	background: rgba(220, 220, 220, 0.5);
	border-radius: 58% 42% 50% 50% / 45% 52% 48% 55%;
}

.enquiry-ring {
	border: 1.5px dashed rgba(245, 193, 66, 0.6);
	border-radius: 9999px;
}

.enquiry-ring--behind {
	position: absolute;
	z-index: 1;
	left: -40px;
	bottom: 40px;
	width: 180px;
	height: 180px;
	pointer-events: none;
}

.enquiry-swatch {
	background: rgba(253, 242, 128, 0.55);
	border-radius: 40% 60% 55% 45% / 55% 45% 55% 45%;
}

@media (prefers-reduced-motion: reduce) {
	.enquiry-figure:hover img,
	.enquiry-service:hover img {
		transform: none;
	}
}

@media (min-width: 1024px) {
	.enquiry-composition {
		min-height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-block: 12px;
	}

	.enquiry-form-card {
		margin-right: auto;
	}

	.enquiry-visual {
		position: absolute;
		top: 50%;
		right: 0;
		width: min(72%, 420px);
		transform: translateY(-50%);
	}
}

@media (max-width: 1023.98px) {
	.enquiry-ring--behind {
		left: -18px;
		bottom: 120px;
		width: 140px;
		height: 140px;
	}
}

::selection {
	background: var(--brand-daylight-yellow);
	color: var(--brand-raw-steel);
}

:focus-visible {
	outline: 2px solid var(--brand-amber-gold);
	outline-offset: 2px;
}

dialog {
	max-width: unset;
	max-height: unset;
	background-color: white;
}

dialog::backdrop {
	display: none;
}

button:not(:disabled) {
	cursor: pointer;
}

/* Blog article content rendered from the Quill editor.
   The UnoCSS preflight resets lists, headings and tables, which stripped the
   bullet/number markers and table borders that authors add in the back-office
   editor. These rules restore that formatting on the live blog pages. */
#contents {
	line-height: 1.7;
}

#contents p {
	margin: 0.75em 0;
}

#contents ul,
#contents ol {
	margin: 0.75em 0;
	padding-left: 1.75em;
}

#contents ul {
	list-style: disc;
}

#contents ol {
	list-style: decimal;
}

#contents ul ul {
	list-style: circle;
}

#contents li {
	margin: 0.35em 0;
	display: list-item;
}

#contents h1 {
	font-size: 2em;
	font-weight: 700;
	margin: 0.8em 0 0.4em;
}

#contents h2 {
	font-size: 1.6em;
	font-weight: 700;
	margin: 0.8em 0 0.4em;
}

#contents h3 {
	font-size: 1.3em;
	font-weight: 600;
	margin: 0.8em 0 0.4em;
}

#contents a {
	color: var(--text-primary);
	text-decoration: underline;
	text-decoration-color: var(--color-primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

#contents a:hover {
	color: var(--brand-amber-gold-dark);
}

#contents blockquote {
	border-left: 4px solid var(--color-primary);
	padding-left: 1em;
	margin: 1em 0;
	color: var(--text-secondary);
}

#contents img {
	max-width: 100%;
	height: auto;
}

#contents pre {
	background: var(--background-soft);
	padding: 1em;
	border-radius: 8px;
	overflow-x: auto;
}

#contents table {
	border-collapse: collapse;
	width: 100%;
	margin: 1em 0;
	overflow-x: auto;
	display: block;
}

#contents table th,
#contents table td {
	border: 1px solid var(--border-color);
	padding: 0.5em 0.75em;
	text-align: left;
}

#contents table th {
	background: var(--background-soft);
	font-weight: 600;
}