/* ==========================================================================
   Alfawine — component styles
   Colour rules are documented in tokens.css. Short version: gold and light
   blue belong on navy or as decoration; text on light backgrounds is navy or
   ink-muted. The gold button carries a NAVY label (8.94:1) rather than white,
   which would only reach 1.97:1.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.aw-container {
	width: 100%;
	max-width: var(--aw-container);
	margin-inline: auto;
	padding-inline: var(--aw-gutter);
}

.aw-container--narrow {
	max-width: var(--aw-container-narrow);
}

.aw-section {
	padding-block: var(--aw-space-2xl);
}

.aw-section--tight {
	padding-block: var(--aw-space-xl);
}

.aw-section--pale {
	background: var(--aw-pale);
}

.aw-section--surface {
	background: var(--aw-surface);
}

.aw-section--navy {
	background: var(--aw-navy);
	color: var(--aw-white);
}

.aw-section--navy h1,
.aw-section--navy h2,
.aw-section--navy h3,
.aw-section--navy h4 {
	color: var(--aw-white);
}

.aw-section--navy a {
	color: var(--aw-white);
}

.aw-eyebrow {
	display: block;
	font-family: var(--aw-font-heading);
	font-size: var(--aw-size-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--aw-ink-muted);
	margin-bottom: var(--aw-space-xs);
}

.aw-section--navy .aw-eyebrow {
	color: var(--aw-gold);
}

.aw-section-title {
	margin-bottom: var(--aw-space-sm);
}

/* Gold rule used as a heading accent. Decorative only — gold text on white
   is 1.97:1 and must never be used for type. */
.aw-rule {
	width: 56px;
	height: 3px;
	border: 0;
	margin: 0 0 var(--aw-space-md);
	background: var(--aw-gold);
	border-radius: 2px;
}

.aw-rule--center {
	margin-inline: auto;
}

.aw-lede {
	font-size: var(--aw-size-lg);
	color: var(--aw-ink-muted);
	max-width: 62ch;
}

.aw-section--navy .aw-lede {
	color: rgb(255 255 255 / 82%);
}

.aw-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.aw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.95em 1.6em;
	border: 2px solid transparent;
	border-radius: var(--aw-radius-pill);
	font-family: var(--aw-font-heading);
	font-size: var(--aw-size-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--aw-transition), box-shadow var(--aw-transition),
		background-color var(--aw-transition), color var(--aw-transition);
}

.aw-btn:hover {
	transform: translateY(-1px);
}

.aw-btn:active {
	transform: translateY(0);
}

/* Gold fill with a NAVY label. White on gold would be 1.97:1 and fail AA. */
.aw-btn--gold {
	background: var(--aw-gold);
	color: var(--aw-navy);
	box-shadow: var(--aw-shadow-sm);
}

.aw-btn--gold:hover,
.aw-btn--gold:focus {
	background: #efc470;
	color: var(--aw-navy);
	box-shadow: var(--aw-shadow);
}

.aw-btn--navy {
	background: var(--aw-navy);
	color: var(--aw-white);
}

.aw-btn--navy:hover,
.aw-btn--navy:focus {
	background: #0a2c4d;
	color: var(--aw-white);
}

.aw-btn--outline-light {
	background: transparent;
	border-color: rgb(255 255 255 / 40%);
	color: var(--aw-white);
}

.aw-btn--outline-light:hover,
.aw-btn--outline-light:focus {
	border-color: var(--aw-gold);
	color: var(--aw-white);
	background: rgb(255 255 255 / 8%);
}

.aw-btn--outline {
	background: transparent;
	border-color: var(--aw-line-strong);
	color: var(--aw-ink);
}

.aw-btn--outline:hover,
.aw-btn--outline:focus {
	border-color: var(--aw-navy);
	color: var(--aw-ink);
}

.aw-btn--sm {
	padding: 0.7em 1.25em;
	font-size: var(--aw-size-xs);
}

.aw-btn--block {
	display: flex;
	width: 100%;
}

.aw-btn__arrow {
	transition: transform var(--aw-transition);
}

.aw-btn:hover .aw-btn__arrow {
	transform: translateX(3px);
}

.aw-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aw-space-sm);
}

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */

.aw-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75em 1.25em;
	background: var(--aw-gold);
	color: var(--aw-navy);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--aw-radius) 0;
}

.aw-skip-link:focus {
	left: 0;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.aw-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--aw-navy);
	border-bottom: 1px solid transparent;
	transition: box-shadow var(--aw-transition), border-color var(--aw-transition);
}

.aw-header.is-scrolled {
	border-bottom-color: rgb(229 176 84 / 28%);
	box-shadow: 0 6px 24px rgb(4 26 47 / 28%);
}

.aw-header__inner {
	display: flex;
	align-items: center;
	gap: var(--aw-space-md);
	min-height: var(--aw-header-h);
}

.aw-header__brand {
	flex: 0 0 auto;
	margin-right: auto;
}

.aw-header__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.aw-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--aw-space-sm);
}

/* --- Brand lockup --- */

.aw-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
}

.aw-brand__emblem {
	width: 44px;
	height: auto;
	flex: 0 0 auto;
}

.aw-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.aw-brand__name {
	font-family: var(--aw-font-heading);
	font-size: 1.32rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.aw-brand__suffix {
	font-family: var(--aw-font-heading);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}

.aw-brand__tagline {
	font-size: 0.6rem;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	opacity: 0.82;
}

/* Light variant sits on navy. gold-on-navy is 8.94:1, white-on-navy 17.59:1. */
.aw-brand--light .aw-brand__name { color: var(--aw-white); }
.aw-brand--light .aw-brand__suffix { color: var(--aw-gold); }
.aw-brand--light .aw-brand__tagline { color: var(--aw-blue); }

.aw-brand--dark .aw-brand__name { color: var(--aw-navy); }
.aw-brand--dark .aw-brand__suffix { color: #8a6a15; } /* 5.06:1 on white */
.aw-brand--dark .aw-brand__tagline { color: var(--aw-ink-muted); }

/* --- Navigation --- */

.aw-nav__list,
.aw-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(0.75rem, 1.6vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.aw-nav li {
	position: relative;
}

.aw-nav a {
	display: block;
	padding: 0.4em 0;
	font-family: var(--aw-font-heading);
	font-size: var(--aw-size-sm);
	font-weight: 500;
	color: rgb(255 255 255 / 92%);
	text-decoration: none;
	white-space: nowrap;
}

.aw-nav a:hover,
.aw-nav a:focus {
	color: var(--aw-gold);
}

.aw-nav .current-menu-item > a,
.aw-nav .current_page_item > a {
	color: var(--aw-gold);
	box-shadow: inset 0 -2px 0 var(--aw-gold);
}

/* Sub menus */
.aw-nav ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-width: 240px;
	padding: 0.5rem 0;
	background: var(--aw-white);
	border-radius: var(--aw-radius);
	box-shadow: var(--aw-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--aw-transition), transform var(--aw-transition),
		visibility var(--aw-transition);
}

.aw-nav li:hover > ul,
.aw-nav li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.aw-nav ul ul a {
	padding: 0.55em 1.1rem;
	color: var(--aw-ink);
	white-space: normal;
}

.aw-nav ul ul a:hover,
.aw-nav ul ul a:focus {
	background: var(--aw-surface);
	color: var(--aw-ink);
	box-shadow: none;
}

/* --- Language switcher --- */

.aw-lang {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: var(--aw-radius-pill);
	overflow: hidden;
}

.aw-lang__item {
	display: block;
	padding: 0.32em 0.7em;
	font-family: var(--aw-font-heading);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: rgb(255 255 255 / 75%);
	text-decoration: none;
	transition: background-color var(--aw-transition), color var(--aw-transition);
}

.aw-lang__item:hover {
	color: var(--aw-gold);
}

.aw-lang__item.is-current {
	background: var(--aw-gold);
	color: var(--aw-navy);
}

/* --- Burger --- */

.aw-burger {
	display: none;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: transparent;
	border: 1px solid rgb(255 255 255 / 25%);
	border-radius: var(--aw-radius);
	color: var(--aw-white);
	font-family: var(--aw-font-heading);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.aw-burger__box {
	position: relative;
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.aw-burger__box::before,
.aw-burger__box::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.aw-burger__box::before { top: -6px; }
.aw-burger__box::after { top: 6px; }

.aw-burger[aria-expanded="true"] .aw-burger__box { background: transparent; }
.aw-burger[aria-expanded="true"] .aw-burger__box::before { transform: rotate(45deg); top: 0; }
.aw-burger[aria-expanded="true"] .aw-burger__box::after { transform: rotate(-45deg); top: 0; }

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */

.aw-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--aw-navy);
	opacity: 0;
	transition: opacity var(--aw-transition);
}

.aw-drawer.is-open {
	opacity: 1;
}

.aw-drawer__panel {
	display: flex;
	flex-direction: column;
	gap: var(--aw-space-md);
	height: 100%;
	padding: var(--aw-space-md) var(--aw-gutter) var(--aw-space-lg);
	overflow-y: auto;
	transform: translateY(-8px);
	transition: transform var(--aw-transition);
}

.aw-drawer.is-open .aw-drawer__panel {
	transform: translateY(0);
}

.aw-drawer__close {
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.85rem;
	background: transparent;
	border: 1px solid rgb(255 255 255 / 25%);
	border-radius: var(--aw-radius);
	color: var(--aw-white);
	font-family: var(--aw-font-heading);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.aw-drawer__close-icon {
	font-size: 1.2rem;
	line-height: 1;
}

.aw-nav--drawer .aw-nav__list,
.aw-nav--drawer ul {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.aw-nav--drawer a {
	padding: 0.9em 0;
	font-size: var(--aw-size-md);
	border-bottom: 1px solid rgb(255 255 255 / 12%);
	white-space: normal;
}

.aw-nav--drawer .current-menu-item > a,
.aw-nav--drawer .current_page_item > a {
	box-shadow: none;
}

.aw-nav--drawer ul ul {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	padding: 0 0 0 1rem;
	background: transparent;
	box-shadow: none;
	opacity: 1;
}

.aw-nav--drawer ul ul a {
	border-bottom: 0;
	color: rgb(255 255 255 / 72%);
	font-size: var(--aw-size-base);
}

.aw-drawer__actions {
	display: grid;
	gap: var(--aw-space-xs);
}

.aw-drawer .aw-lang {
	align-self: flex-start;
}

/* --------------------------------------------------------------------------
   Mobile action bar
   -------------------------------------------------------------------------- */

.aw-mobile-bar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 90;
	display: none;
	grid-template-columns: repeat(3, 1fr);
	background: var(--aw-white);
	border-top: 1px solid var(--aw-line);
	box-shadow: 0 -4px 20px rgb(4 26 47 / 10%);
	padding-bottom: env(safe-area-inset-bottom);
}

.aw-mobile-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	padding: 0.6rem 0.25rem;
	color: var(--aw-ink);
	font-family: var(--aw-font-heading);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}

.aw-mobile-bar__icon svg {
	width: 20px;
	height: 20px;
}

.aw-mobile-bar__item--accent {
	color: var(--aw-navy);
	background: var(--aw-gold);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.aw-hero {
	position: relative;
	background: var(--aw-navy);
	color: var(--aw-white);
	overflow: hidden;
	isolation: isolate;
}

/* Gradient stands in for photography until real imagery is supplied, so the
   page is complete and launchable without stock photos of other people
   posing as the cleaning team. */
.aw-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(120% 90% at 85% 10%, rgb(131 195 233 / 22%) 0%, transparent 55%),
		radial-gradient(90% 80% at 5% 90%, rgb(229 176 84 / 16%) 0%, transparent 60%),
		linear-gradient(155deg, #062241 0%, var(--aw-navy) 55%, #020f1c 100%);
}

.aw-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: linear-gradient(to bottom, rgb(0 0 0 / 40%), transparent 70%);
}

.aw-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--aw-space-lg);
	padding-block: clamp(3rem, 8vw, 6rem);
}

.aw-hero__content {
	max-width: 46rem;
}

/* The emblem sits beside the copy on wide screens, centred under it on narrow
   ones. Three layers of motion, all in the palette: a soft entrance, a gold
   glow that breathes behind the mark, and a light sweep that crosses it every
   few seconds. Nothing here is decorative noise — the glow echoes the radial
   light already in the hero background, and the sweep is the same gold. */
.aw-hero__media {
	position: relative;
	display: grid;
	place-items: center;
	isolation: isolate;
}

.aw-hero__media::before {
	content: "";
	position: absolute;
	inset: -18%;
	z-index: -2;
	background: radial-gradient(circle at 50% 50%, rgb(229 176 84 / 22%) 0%, transparent 62%);
	animation: aw-hero-glow 4.5s ease-in-out infinite;
}

.aw-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		105deg,
		transparent 38%,
		rgb(255 255 255 / 6%) 48%,
		rgb(229 176 84 / 12%) 50%,
		rgb(255 255 255 / 6%) 52%,
		transparent 62%
	);
	transform: translateX(-110%);
	animation: aw-hero-sweep 6s ease-in-out 2s infinite;
	pointer-events: none;
	mix-blend-mode: soft-light;
}

/* The mark is unlinked here, so the image itself carries the size and the
   entrance. It is sized by HEIGHT on purpose: the emblem is a wide file
   (679x355, about 1.9:1), so driving it from the width made it sprawl sideways
   and read as a banner. Height is what gives the hero vertical presence, and
   the width follows the aspect ratio from there. max-width keeps it inside the
   column on narrow screens, where it sits under the copy instead. */
.aw-hero__media .aw-brand__emblem {
	display: block;
	width: auto;
	height: clamp(210px, 44vh, 600px);
	max-width: 100%;
	filter: drop-shadow(0 14px 40px rgb(2 15 28 / 50%));
	animation: aw-hero-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

@keyframes aw-hero-in {
	from {
		opacity: 0;
		transform: translateY(28px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes aw-hero-glow {
	0%, 100% {
	 opacity: 0.55;
		transform: scale(0.92);
	}
	50% {
	 opacity: 1;
		transform: scale(1.06);
	}
}

@keyframes aw-hero-sweep {
	0% {
		transform: translateX(-110%);
	}
	55%, 100% {
		transform: translateX(110%);
	}
}

@media (min-width: 60rem) {
	.aw-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
	}

	/* Give the mark the room it now fills: the glow needs somewhere to sit. */
	.aw-hero__media {
		min-height: 580px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aw-hero__media::before,
	.aw-hero__media::after,
	.aw-hero__media .aw-brand__emblem {
		animation: none;
	}

	.aw-hero__media .aw-brand__emblem {
		opacity: 1;
		transform: none;
	}
}

.aw-hero__title {
	color: var(--aw-white);
	margin-bottom: var(--aw-space-md);
}

.aw-hero__text {
	font-size: var(--aw-size-lg);
	color: rgb(255 255 255 / 85%);
	max-width: 42rem;
	margin-bottom: var(--aw-space-lg);
}

.aw-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aw-space-sm);
	margin-top: var(--aw-space-lg);
	padding-top: var(--aw-space-md);
	border-top: 1px solid rgb(255 255 255 / 14%);
}

.aw-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: var(--aw-size-sm);
	color: rgb(255 255 255 / 78%);
}

.aw-hero__badge svg {
	width: 18px;
	height: 18px;
	color: var(--aw-gold);
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Service grid
   -------------------------------------------------------------------------- */

.aw-grid {
	display: grid;
	gap: var(--aw-space-md);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.aw-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.aw-service-card {
	display: flex;
	flex-direction: column;
	gap: var(--aw-space-xs);
	padding: var(--aw-space-lg) var(--aw-space-md);
	background: var(--aw-white);
	border: 1px solid var(--aw-line);
	border-radius: var(--aw-radius-lg);
	text-decoration: none;
	color: var(--aw-ink);
	transition: transform var(--aw-transition), box-shadow var(--aw-transition),
		border-color var(--aw-transition);
}

.aw-service-card:hover,
.aw-service-card:focus-within {
	transform: translateY(-3px);
	border-color: var(--aw-gold);
	box-shadow: var(--aw-shadow);
}

.aw-service-card__icon {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin-bottom: var(--aw-space-sm);
	background: var(--aw-pale);
	border-radius: 50%;
	color: var(--aw-navy);
}

.aw-service-card__icon svg {
	width: 28px;
	height: 28px;
}

.aw-service-card__title {
	font-family: var(--aw-font-heading);
	font-size: var(--aw-size-md);
	font-weight: 600;
	line-height: var(--aw-leading-snug);
	margin: 0;
}

/* The whole card is not a link, so the title link should read as a heading
   that happens to be clickable, not as body-copy blue with an underline. */
.aw-service-card__title a {
	color: var(--aw-ink);
	text-decoration: none;
}

.aw-service-card__title a:hover,
.aw-service-card__title a:focus-visible {
	color: var(--aw-ink);
	text-decoration: underline;
	text-decoration-color: var(--aw-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.aw-service-card__text {
	margin: 0;
	font-size: var(--aw-size-sm);
	color: var(--aw-ink-muted);
}

.aw-service-card__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--aw-space-sm);
	margin-top: auto;
	padding-top: var(--aw-space-sm);
}

.aw-service-card__price {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	font-family: var(--aw-font-heading);
	font-size: var(--aw-size-sm);
	font-weight: 600;
	color: var(--aw-ink);
	line-height: 1.25;
}

.aw-service-card__ref {
	font-family: var(--aw-font-body);
	font-size: var(--aw-size-xs);
	font-weight: 400;
	color: var(--aw-ink-muted);
}

.aw-service-card__more {
	flex: 0 0 auto;
	white-space: nowrap;
	font-family: var(--aw-font-heading);
	font-size: var(--aw-size-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--aw-ink);
	text-decoration: underline;
	text-decoration-color: var(--aw-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Feature split (Why choose / Before & After band)
   -------------------------------------------------------------------------- */

.aw-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--aw-space-lg);
	align-items: center;
}

.aw-split__media {
	position: relative;
	border-radius: var(--aw-radius-lg);
	overflow: hidden;
	background: var(--aw-navy);
	min-height: 300px;
	display: grid;
	/* Group the quote and its rule as one block, centred. place-items: center
	   centres each child inside its own grid row instead, which left the quote
	   in the top half and the rule stranded in the bottom half. */
	place-content: center;
	justify-items: center;
	grid-auto-rows: min-content;
	gap: var(--aw-space-md, 16px);
	padding: var(--aw-space-lg);
}

.aw-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The "Cleaner spaces" panel stands in for a photograph until real imagery is
   supplied, for the same reason the hero does: a stock photo of somebody
   else's cleaning crew would misrepresent the team. So it is designed rather
   than filled — navy field, gold light, and a ring that echoes the logo's
   swoosh. Adding .aw-split__media--photo when the real photo arrives drops the
   decoration and lets .aw-split__media img show through. */
.aw-split__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(64% 54% at 78% 16%, rgb(229 176 84 / 17%) 0%, transparent 66%),
		radial-gradient(78% 66% at 10% 88%, rgb(131 195 233 / 15%) 0%, transparent 68%),
		radial-gradient(circle at 78% 76%, transparent 0 56px, rgb(229 176 84 / 22%) 56px 59px, transparent 59px),
		radial-gradient(circle at 78% 76%, transparent 0 76px, rgb(229 176 84 / 11%) 76px 78px, transparent 78px),
		linear-gradient(160deg, #062241 0%, var(--aw-navy) 58%, #020f1c 100%);
}

.aw-split__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(rgb(255 255 255 / 6%) 1px, transparent 1px);
	background-size: 26px 26px;
	mask-image: radial-gradient(115% 95% at 50% 50%, rgb(0 0 0 / 55%), transparent 76%);
}

/* The quote and its rule sit above both decoration layers. */
.aw-split__quote,
.aw-split__media > .aw-rule {
	position: relative;
	z-index: 1;
}

.aw-split__media--photo::before,
.aw-split__media--photo::after {
	display: none;
}

.aw-split__quote {
	font-family: var(--aw-font-heading);
	font-size: var(--aw-size-xl);
	font-weight: 500;
	font-style: italic;
	line-height: var(--aw-leading-snug);
	color: var(--aw-white);
	text-align: center;
	max-width: 22ch;
}

/* --- Checklist --- */

.aw-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--aw-space-sm);
}

.aw-checklist li {
	position: relative;
	padding-left: 2.6rem;
	font-size: var(--aw-size-md);
	line-height: var(--aw-leading-snug);
}

.aw-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 22px;
	height: 22px;
	background: var(--aw-navy);
	border-radius: 50%;
}

.aw-checklist li::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 0.42em;
	width: 5px;
	height: 9px;
	border: solid var(--aw-gold);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.aw-section--pale .aw-checklist li::before {
	background: var(--aw-navy);
}

/* --------------------------------------------------------------------------
   Areas we cover
   -------------------------------------------------------------------------- */

.aw-areas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--aw-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.aw-areas li {
	padding: 0.9em 1.1em;
	background: var(--aw-white);
	border: 1px solid var(--aw-line);
	border-radius: var(--aw-radius);
	font-size: var(--aw-size-sm);
	font-weight: 500;
	color: var(--aw-ink);
}

.aw-note {
	margin-top: var(--aw-space-md);
	padding: var(--aw-space-sm) var(--aw-space-md);
	background: var(--aw-pale);
	border-left: 3px solid var(--aw-navy);
	border-radius: var(--aw-radius-sm);
	font-size: var(--aw-size-sm);
	color: var(--aw-ink);
}

.aw-section--navy .aw-note {
	background: rgb(255 255 255 / 8%);
	border-left-color: var(--aw-gold);
	color: rgb(255 255 255 / 88%);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.aw-faq {
	display: grid;
	gap: var(--aw-space-sm);
	max-width: 46rem;
}

.aw-faq details {
	background: var(--aw-white);
	border: 1px solid var(--aw-line);
	border-radius: var(--aw-radius);
	overflow: hidden;
}

.aw-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--aw-space-sm);
	padding: var(--aw-space-sm) var(--aw-space-md);
	font-family: var(--aw-font-heading);
	font-size: var(--aw-size-md);
	font-weight: 600;
	color: var(--aw-ink);
	cursor: pointer;
	list-style: none;
}

.aw-faq summary::-webkit-details-marker {
	display: none;
}

.aw-faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border: solid var(--aw-navy);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--aw-transition);
}

.aw-faq details[open] summary::after {
	transform: rotate(-135deg) translateY(-2px);
}

.aw-faq__body {
	padding: 0 var(--aw-space-md) var(--aw-space-md);
	color: var(--aw-ink-muted);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.aw-footer {
	background: var(--aw-navy);
	color: var(--aw-white);
}

.aw-footer__contact {
	border-bottom: 1px solid rgb(255 255 255 / 12%);
}

.aw-footer__contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--aw-space-sm);
	padding-block: var(--aw-space-lg);
}

.aw-contact-card {
	display: flex;
	align-items: center;
	gap: var(--aw-space-sm);
	padding: var(--aw-space-sm);
	border-radius: var(--aw-radius);
	text-decoration: none;
	color: var(--aw-white);
	transition: background-color var(--aw-transition);
}

.aw-contact-card:hover,
.aw-contact-card:focus {
	background: rgb(255 255 255 / 7%);
	color: var(--aw-white);
}

.aw-contact-card__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
	background: var(--aw-gold);
	color: var(--aw-navy);
	border-radius: 50%;
}

.aw-contact-card__icon svg {
	width: 24px;
	height: 24px;
}

.aw-contact-card__body {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.aw-contact-card__label {
	font-size: var(--aw-size-xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 65%);
}

.aw-contact-card__value {
	font-family: var(--aw-font-heading);
	font-size: var(--aw-size-md);
	font-weight: 600;
	word-break: break-word;
}

.aw-contact-card__note {
	font-size: var(--aw-size-xs);
	color: rgb(255 255 255 / 60%);
}

/* --- Brand row --- */

.aw-footer__main-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--aw-space-lg);
	align-items: center;
	padding-block: var(--aw-space-lg);
}

.aw-footer__heading {
	font-size: var(--aw-size-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--aw-gold);
	margin-bottom: var(--aw-space-xs);
}

.aw-footer__area-name {
	font-family: var(--aw-font-heading);
	font-size: var(--aw-size-lg);
	font-weight: 600;
	margin: 0 0 0.35em;
}

.aw-footer__area-note {
	margin: 0;
	font-size: var(--aw-size-sm);
	color: rgb(255 255 255 / 68%);
	max-width: 32ch;
}

.aw-footer__tagline {
	display: grid;
	place-items: center;
}

.aw-footer__script {
	margin: 0;
	font-family: var(--aw-font-heading);
	font-size: var(--aw-size-xl);
	font-weight: 500;
	font-style: italic;
	line-height: var(--aw-leading-snug);
	text-align: center;
	color: var(--aw-gold);
}

/* --- Statutory bar --- */

.aw-footer__legal {
	background: #020f1c;
	border-top: 1px solid rgb(255 255 255 / 10%);
}

.aw-footer__legal-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--aw-space-xs) var(--aw-space-md);
	padding-block: var(--aw-space-sm);
	font-size: var(--aw-size-xs);
	color: rgb(255 255 255 / 66%);
}

/* Reg 20 requires the disclosure to be legible, so it is never
   reduced below this size or lightened. */
.aw-legal-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin: 0;
}

.aw-legal-line__name {
	font-weight: 600;
	color: var(--aw-white);
}

.aw-legal-line__sep {
	color: rgb(255 255 255 / 35%);
}

.aw-legal-line__label {
	color: rgb(255 255 255 / 55%);
}

.aw-legal-line--address {
	flex-basis: 100%;
}

.aw-footer__legal-menu {
	margin-left: auto;
}

.aw-legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aw-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.aw-legal-menu a {
	color: rgb(255 255 255 / 72%);
	text-decoration: none;
}

.aw-legal-menu a:hover,
.aw-legal-menu a:focus {
	color: var(--aw-gold);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.aw-form {
	display: grid;
	gap: var(--aw-space-md);
	max-width: 44rem;
}

.aw-field {
	display: grid;
	gap: 0.35rem;
}

.aw-field__label {
	font-family: var(--aw-font-heading);
	font-size: var(--aw-size-sm);
	font-weight: 600;
	color: var(--aw-ink);
}

.aw-field__label .aw-required {
	color: var(--aw-error);
	margin-left: 0.15em;
}

.aw-field input,
.aw-field select,
.aw-field textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	font-family: inherit;
	font-size: var(--aw-size-base);
	color: var(--aw-ink);
	background: var(--aw-white);
	border: 1px solid var(--aw-line-strong);
	border-radius: var(--aw-radius);
	transition: border-color var(--aw-transition), box-shadow var(--aw-transition);
}

.aw-field textarea {
	min-height: 140px;
	resize: vertical;
}

.aw-field input:focus,
.aw-field select:focus,
.aw-field textarea:focus {
	border-color: var(--aw-focus);
	box-shadow: 0 0 0 3px rgb(11 92 171 / 16%);
	outline: none;
}

/* A field the server rejected. The colour is deliberately distinct from the
   gold focus ring: focus says "you are here", error says "this needs you". */
.aw-field--error input,
.aw-field--error select,
.aw-field--error textarea {
	border-color: #b3261e;
}

.aw-field--error input:focus,
.aw-field--error select:focus,
.aw-field--error textarea:focus {
	border-color: #b3261e;
	box-shadow: 0 0 0 3px rgb(179 38 30 / 14%);
}

.aw-field__hint {
	font-size: var(--aw-size-xs);
	color: var(--aw-ink-muted);
}

.aw-field-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--aw-form-gap, var(--aw-space-md));
}

/* Radio / checkbox pairs */
.aw-choice {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aw-space-sm);
}

.aw-choice label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	border: 1px solid var(--aw-line-strong);
	border-radius: var(--aw-radius-pill);
	font-size: var(--aw-size-sm);
	cursor: pointer;
	transition: border-color var(--aw-transition), background-color var(--aw-transition);
}

.aw-choice label:hover {
	border-color: var(--aw-navy);
}

.aw-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.aw-choice input:checked + span {
	font-weight: 600;
}

.aw-choice label:has(input:checked) {
	border-color: var(--aw-navy);
	background: var(--aw-pale);
	color: var(--aw-navy);
}

.aw-choice input:focus-visible + span {
	outline: 3px solid var(--aw-focus);
	outline-offset: 3px;
	border-radius: 2px;
}

.aw-form__whatsapp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--aw-space-sm);
	padding: var(--aw-space-sm) var(--aw-space-md);
	background: var(--aw-pale);
	border-radius: var(--aw-radius);
	font-size: var(--aw-size-sm);
	color: var(--aw-ink);
}

.aw-form__whatsapp strong {
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Page header (inner pages)
   -------------------------------------------------------------------------- */

.aw-page-head {
	background: var(--aw-navy);
	color: var(--aw-white);
	padding-block: var(--aw-space-xl);
}

.aw-page-head h1 {
	color: var(--aw-white);
	margin-bottom: var(--aw-space-xs);
}

.aw-page-head .aw-lede {
	color: rgb(255 255 255 / 82%);
	margin-bottom: 0;
}

/* GeneratePress entry content wrapper */
.entry-content > * {
	max-width: var(--aw-container-narrow);
	margin-inline: auto;
}

/* Anything that lays out its own container opts out of the prose cap.
   Without the .aw-single exception the single-service layout is clamped to
   --aw-container-narrow (820px) because it is a direct child of
   .entry-content, and the two-column head collapses to ~740px. */
.entry-content > .aw-section,
.entry-content > .aw-container,
.entry-content > .aw-single,
.entry-content > .aw-breadcrumb,
.entry-content > .woocommerce-breadcrumb {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

.aw-prose {
	max-width: var(--aw-container-narrow);
}

.aw-prose h2 {
	margin-top: 1.8em;
}

.aw-prose ul,
.aw-prose ol {
	padding-left: 1.3em;
}

/* --------------------------------------------------------------------------
   Inner pages (about, areas, before & after, contact)
   -------------------------------------------------------------------------- */

.aw-inner {
	display: grid;
	gap: var(--aw-space-lg);
}

/* The section hands out the full container; the reading-width pieces take it
   back. Anything an author drops into the body keeps the whole 1200px. */
.aw-inner > .aw-blocks,
.aw-inner > .aw-inner__prose {
	max-width: var(--aw-container-narrow);
	margin-inline: auto;
	width: 100%;
}

/* Headed groups become cards, matching the service card's border, radius and
   hover treatment so the two never read as different components. */
.aw-blocks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	/* align-items: start, not stretch. A card holding three paragraphs next to
	   one holding a four-item list otherwise stretches to the taller sibling and
	   fills with dead space. */
	align-items: start;
	gap: var(--aw-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.aw-blocks__card {
	display: flex;
	flex-direction: column;
	gap: var(--aw-space-xs);
	padding: var(--aw-space-lg) var(--aw-space-md);
	background: var(--aw-white);
	border: 1px solid var(--aw-line);
	border-radius: var(--aw-radius-lg);
	transition: border-color var(--aw-transition), box-shadow var(--aw-transition);
}

.aw-blocks__card:hover,
.aw-blocks__card:focus-within {
	border-color: var(--aw-gold);
	box-shadow: var(--aw-shadow);
}

/* The card title carries the site's gold accent rather than a heavy heading. */
.aw-blocks__title {
	margin: 0;
	font-size: var(--aw-size-md);
	line-height: 1.3;
	color: var(--aw-navy);
	padding-bottom: var(--aw-space-2xs);
	border-bottom: 2px solid var(--aw-gold);
	/* Long titles such as "Where the standards come from" wrap to two lines at
	   card width, and at the larger display size they read as a banner rather
	   than a card heading. */
	text-wrap: balance;
}

/* A level-3 heading is a sub-point, not a card of its own weight. */
.aw-blocks__card--h3 .aw-blocks__title {
	font-size: var(--aw-size-sm);
	letter-spacing: 0.02em;
}

/* Prose inside a card needs real rhythm. The bare .aw-prose rules only set an
   indent, which left the four-item list on About with its lines touching. */
.aw-blocks__body ul,
.aw-blocks__body ol {
	margin: 0 0 var(--aw-space-sm);
	padding-left: 1.15em;
	display: grid;
	gap: var(--aw-space-2xs);
}

.aw-blocks__body li {
	line-height: var(--aw-leading-snug);
}

.aw-blocks__body blockquote {
	margin: var(--aw-space-sm) 0 0;
}

.aw-blocks__body > *:first-child {
	margin-top: 0;
}

.aw-blocks__body > *:last-child {
	margin-bottom: 0;
}

/* Unheaded copy keeps a readable measure instead of stretching the grid. */
.aw-inner__prose {
	max-width: 68ch;
}

@media (max-width: 600px) {
	.aw-blocks__card {
		padding: var(--aw-space-md);
	}
}

/* Insurance disclosure in the footer. Only rendered once the policy details are
   complete, so it is styled to read as a fact rather than as a badge. */
.aw-insurance {
	margin: 0;
	font-size: var(--aw-size-xs);
	line-height: var(--aw-leading-snug);
	color: rgb(255 255 255 / 72%);
}

.aw-insurance--legal {
	color: rgb(255 255 255 / 66%);
}

/* Coverage map on the Areas page. The SVG is inlined so its pin links work;
   this only has to frame it. */
.aw-coverage {
	margin: 0;
	overflow: hidden;
	background: var(--aw-white);
	border: 1px solid var(--aw-line);
	border-radius: var(--aw-radius-lg);
	box-shadow: var(--aw-shadow-sm);
}

.aw-coverage__frame svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Pins are links; make the focus ring land on the pin, not the whole figure. */
.aw-coverage a:focus-visible {
	outline: 3px solid var(--aw-gold);
	outline-offset: 3px;
	border-radius: 50%;
}

.aw-coverage__caption {
	display: grid;
	gap: 4px;
	padding: var(--aw-space-sm) var(--aw-space-md);
	border-top: 1px solid var(--aw-line);
	font-size: var(--aw-size-sm);
	color: var(--aw-ink);
}

.aw-coverage__caption-sub {
	font-size: var(--aw-size-xs);
	color: rgb(15 34 51 / 62%);
}

/* Numbered zone badge, matching the pin on the map. */
.aw-blocks__zone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-bottom: var(--aw-space-2xs);
	background: var(--aw-navy);
	border: 2px solid var(--aw-gold);
	border-radius: 50%;
	font-size: var(--aw-size-sm);
	font-weight: 700;
	color: var(--aw-gold);
}

/* A targeted pin jumps to a card further down; do not hide where it landed.
   :focus is listed too because assets/js/main.js focuses the target after the
   smooth scroll, and that is what highlights the card in browsers where the
   fragment lands late. */
.aw-blocks__card:target,
.aw-blocks__card:focus {
	border-color: var(--aw-gold);
	box-shadow: 0 0 0 3px rgb(229 176 84 / 35%);
}

/* --------------------------------------------------------------------------
   Before & After: the empty state and any photographs the client adds
   -------------------------------------------------------------------------- */

.aw-pending {
	max-width: 56ch;
	margin-inline: auto;
	padding: var(--aw-space-lg);
	background: var(--aw-white);
	border: 1px dashed rgb(4 26 47 / 22%);
	border-radius: var(--aw-radius-lg);
	text-align: center;
}

.aw-pending__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--aw-space-sm);
	background: var(--aw-pale);
	border-radius: 50%;
	color: var(--aw-navy);
}

.aw-pending__icon svg {
	width: 24px;
	height: 24px;
}

.aw-pending__title {
	margin: 0 0 var(--aw-space-2xs);
	font-size: var(--aw-size-md);
	color: var(--aw-navy);
}

.aw-pending__text {
	margin: 0 0 var(--aw-space-md);
	font-size: var(--aw-size-sm);
	line-height: var(--aw-leading-snug);
	color: rgb(15 34 51 / 78%);
}

/* Photography the client drops straight into the page. The core blocks are
   styled here so an image needs no special handling to look branded. */
.aw-blocks__body .wp-block-gallery,
.aw-blocks__body .wp-block-image,
.aw-blocks__body .wp-block-columns {
	margin-block: var(--aw-space-md);
}

.aw-blocks__body .wp-block-gallery figcaption,
.aw-blocks__body .wp-block-image figcaption {
	font-size: var(--aw-size-xs);
	color: rgb(15 34 51 / 62%);
}

.aw-blocks__body .wp-block-gallery img,
.aw-blocks__body .wp-block-image img {
	border-radius: var(--aw-radius);
}

/* --------------------------------------------------------------------------
   Before / after comparison
   -------------------------------------------------------------------------- */

.aw-compare {
	display: grid;
	/* Two columns, not auto-fit. With auto-fit at minmax(260px, 1fr) a 1120px
	   container resolves to four columns, a before/after pair fills two of them
	   and the other two sit empty. min(100%, 420px) keeps the pair side by side on
	   desktop and collapses to a single column on a phone. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: var(--aw-space-md);
}

.aw-compare__item {
	/* position: relative was missing, so the absolutely positioned
	   .aw-compare__tag resolved against a further ancestor and the labels were
	   drawn off the item entirely — invisible in every screenshot. */
	position: relative;
	margin: 0;
	border: 1px solid var(--aw-line);
	border-radius: var(--aw-radius-lg);
	overflow: hidden;
	background: var(--aw-white);
}

.aw-compare__frame {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--aw-surface);
}

.aw-compare__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aw-compare__tag {
	position: absolute;
	/* The frame is position: relative and comes later in the DOM, so without a
	   z-index it paints on top of the label and the tag is invisible. */
	z-index: 1;
	top: var(--aw-space-xs);
	left: var(--aw-space-xs);
	padding: 0.3em 0.8em;
	background: var(--aw-navy);
	color: var(--aw-white);
	font-family: var(--aw-font-heading);
	font-size: var(--aw-size-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--aw-radius-pill);
}

.aw-compare__tag--after {
	background: var(--aw-gold);
	color: var(--aw-navy);
}

.aw-compare__caption {
	/* The caption is a direct child of the two-column grid, so it has to claim
	   the full width or it lands in the first column. */
	grid-column: 1 / -1;
	margin: 0;
	padding: var(--aw-space-sm) var(--aw-space-md);
	background: var(--aw-white);
	border: 1px solid var(--aw-line);
	border-radius: var(--aw-radius);
	font-size: var(--aw-size-sm);
	color: var(--aw-ink-muted);
}

/* Before is the default navy tag; --after is the gold override that already
   existed. Declared explicitly so the pair is legible in the markup. */
.aw-compare__tag--before {
	background: var(--aw-navy);
	color: var(--aw-white);
}

/* --------------------------------------------------------------------------
   Before / after slider (automatic pairs)
   -------------------------------------------------------------------------- */

.aw-slider {
	margin: 0;
}

.aw-slider__frame {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--aw-line);
	border-radius: var(--aw-radius-lg);
	background: var(--aw-surface);
}

.aw-slider__frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The before layer is full-size and clipped from the right: no pixel math in
   CSS, and without JavaScript the 50/50 inline default still shows both. */
.aw-slider__top {
	position: absolute;
	inset: 0;
	clip-path: inset(0 calc(100% - var(--aw-split, 50%)) 0 0);
}

.aw-slider__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--aw-split, 50%);
	width: 3px;
	margin-left: -1.5px;
	background: var(--aw-gold);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
	pointer-events: none;
}

.aw-slider__handle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2.4rem;
	height: 2.4rem;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--aw-gold);
	border: 3px solid var(--aw-white);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Transparent over the whole frame: dragging anywhere moves the split, and
   keyboard users get a real focusable range control for free. */
.aw-slider__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
}

.aw-slider__frame:focus-within {
	outline: 3px solid var(--aw-gold);
	outline-offset: 3px;
}

/* Inside the slider the after tag docks right; the shared class stays naval
   everywhere else. */
.aw-slider .aw-compare__tag--after {
	left: auto;
	right: var(--aw-space-xs);
}

/* --------------------------------------------------------------------------
   Section helpers
   -------------------------------------------------------------------------- */

.aw-section-head {
	margin-bottom: var(--aw-space-lg);
}

.aw-section-head--center {
	text-align: center;
}

.aw-section-head--center .aw-lede,
.aw-lede--center {
	margin-inline: auto;
}

.aw-section-head--wide {
	max-width: 44rem;
}

.aw-grid--bare {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Grid items stretch to the tallest in the row, but the card lives inside an
   <li>, so the card itself needs to be told to fill it — otherwise the card
   borders stop at different heights across a row. */
.aw-grid--bare > li {
	display: flex;
}

.aw-grid--bare > li > .aw-service-card {
	flex: 1 1 auto;
}

.aw-actions--center {
	justify-content: center;
	margin-top: 1.75rem;
}

.aw-checklist--spaced {
	margin-top: 1.5rem;
}

/* --- Numbered steps --- */

.aw-steps {
	display: grid;
	gap: var(--aw-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: aw-step;
}

.aw-step {
	display: flex;
	align-items: flex-start;
	gap: var(--aw-space-sm);
	padding: var(--aw-space-sm) var(--aw-space-md);
	background: var(--aw-white);
	border: 1px solid var(--aw-line);
	border-radius: var(--aw-radius);
}

.aw-step__num {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	background: var(--aw-navy);
	color: var(--aw-gold);
	border-radius: 50%;
	font-family: var(--aw-font-heading);
	font-size: var(--aw-size-sm);
	font-weight: 700;
}

.aw-step__text {
	font-size: var(--aw-size-base);
	line-height: var(--aw-leading-snug);
}

/* --- Service card extras --- */

.aw-service-card__flag {
	align-self: flex-start;
	margin: 0;
	padding: 0.2em 0.7em;
	background: var(--aw-navy);
	color: var(--aw-gold);
	border-radius: var(--aw-radius-pill);
	font-family: var(--aw-font-heading);
	font-size: var(--aw-size-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.aw-price {
	font-family: var(--aw-font-heading);
	font-weight: 600;
}

.aw-price__from {
	font-size: var(--aw-size-xs);
	font-weight: 500;
	color: var(--aw-ink-muted);
}

.aw-price--on-request {
	color: var(--aw-ink-muted);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   Neutralise the parent page container
   --------------------------------------------------------------------------
   GeneratePress centres #content in a fixed-width container with its own
   padding. Every section here is a full-bleed band that manages its own
   inner width via .aw-container, so the outer constraint only produces white
   margins either side of the hero and the navy sections.
   -------------------------------------------------------------------------- */

#page,
#content,
.site-content,
.site-main,
.content-area,
.inside-article,
.entry-content {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

body.separate-containers .site-main,
body.separate-containers .inside-article,
body.separate-containers .content-area,
body.separate-containers .entry-content {
	padding: 0;
}

/* GeneratePress also emits a content-size custom property; ignore it for the
   page shell while keeping it available to .aw-container. */
body {
	--wp--style--global--content-size: 100%;
}

/* --------------------------------------------------------------------------
   Cookie banner
   -------------------------------------------------------------------------- */

.aw-cookie {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 120;
	background: var(--aw-white);
	border-top: 1px solid var(--aw-line);
	box-shadow: 0 -6px 24px rgb(4 26 47 / 12%);
	padding-block: var(--aw-space-sm);
	padding-bottom: calc(var(--aw-space-sm) + env(safe-area-inset-bottom));
}

.aw-cookie[hidden] {
	display: none;
}

.aw-cookie__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--aw-space-sm) var(--aw-space-md);
}

.aw-cookie__text {
	flex: 1 1 22rem;
	margin: 0;
	font-size: var(--aw-size-sm);
	line-height: var(--aw-leading-snug);
	color: var(--aw-ink-muted);
}

.aw-cookie__text a {
	color: var(--aw-ink);
	font-weight: 600;
}

.aw-cookie__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aw-space-xs);
}

/* Lift the banner clear of the sticky mobile action bar. */
@media (max-width: 767px) {
	.aw-cookie {
		bottom: 68px;
	}
}

/* --------------------------------------------------------------------------
   Single service page
   -------------------------------------------------------------------------- */

.aw-breadcrumb {
	padding: var(--aw-space-sm) 0 0;
	font-size: var(--aw-size-xs);
	color: var(--aw-ink-muted);
}

.aw-breadcrumb a {
	color: var(--aw-ink-muted);
	text-decoration: none;
}

.aw-breadcrumb a:hover {
	color: var(--aw-ink);
	text-decoration: underline;
}

.aw-single__head {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.85fr);
	gap: var(--aw-space-xl);
	align-items: start;
	padding-block: var(--aw-space-lg) var(--aw-space-xl);
}

.aw-single__icon {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	margin-bottom: var(--aw-space-md);
	background: var(--aw-pale);
	color: var(--aw-navy);
	border-radius: 50%;
}

.aw-single__icon svg {
	width: 32px;
	height: 32px;
}

.aw-single__title {
	margin-bottom: var(--aw-space-sm);
}

.aw-single__excerpt {
	font-size: var(--aw-size-lg);
	color: var(--aw-ink-muted);
	max-width: 46ch;
}

.aw-single__price {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	margin: var(--aw-space-md) 0;
	font-family: var(--aw-font-heading);
	font-size: var(--aw-size-lg);
	font-weight: 600;
	color: var(--aw-ink);
}

.aw-single__price .aw-price__from {
	font-size: var(--aw-size-sm);
}

.aw-single__price-note {
	font-family: var(--aw-font-body);
	font-size: var(--aw-size-xs);
	font-weight: 400;
	color: var(--aw-ink-muted);
}

.aw-single__flag {
	display: inline-block;
	margin: 0 0 var(--aw-space-md);
	padding: 0.25em 0.85em;
	background: var(--aw-navy);
	color: var(--aw-gold);
	border-radius: var(--aw-radius-pill);
	font-family: var(--aw-font-heading);
	font-size: var(--aw-size-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.aw-single__actions {
	margin-bottom: var(--aw-space-sm);
}

.aw-single__whatsapp-hint {
	margin: 0;
	font-size: var(--aw-size-sm);
	color: var(--aw-ink-muted);
}

/* --- Facts sidebar --- */

.aw-single__facts {
	position: sticky;
	top: calc(var(--aw-header-h) + var(--aw-space-sm));
	display: grid;
	gap: 1px;
	background: var(--aw-line);
	border: 1px solid var(--aw-line);
	border-radius: var(--aw-radius-lg);
	overflow: hidden;
}

.aw-fact {
	padding: var(--aw-space-sm) var(--aw-space-md);
	background: var(--aw-white);
}

.aw-fact__label {
	margin: 0 0 0.25em;
	font-size: var(--aw-size-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--aw-ink-muted);
}

.aw-fact__value {
	margin: 0;
	font-size: var(--aw-size-base);
	line-height: var(--aw-leading-snug);
}

.aw-fact__value a {
	font-family: var(--aw-font-heading);
	font-weight: 600;
	color: var(--aw-ink);
	text-decoration: none;
}

.aw-fact__value a:hover {
	color: var(--aw-focus);
	text-decoration: underline;
}

.aw-fact--contact {
	background: var(--aw-surface);
}

.aw-single__body {
	padding-bottom: var(--aw-space-xl);
}

.aw-single__body h2 {
	margin-top: 1.6em;
}

@media (max-width: 900px) {
	.aw-single__head {
		grid-template-columns: 1fr;
		gap: var(--aw-space-lg);
	}

	.aw-single__facts {
		position: static;
	}
}

/* --------------------------------------------------------------------------
   Quote form
   -------------------------------------------------------------------------- */

.aw-quote-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.75fr);
	gap: var(--aw-space-xl);
	align-items: start;
}

.aw-quote-layout__aside {
	position: sticky;
	top: calc(var(--aw-header-h) + var(--aw-space-sm));
}

.aw-quote-aside {
	display: grid;
	gap: var(--aw-space-sm);
	padding: var(--aw-space-lg);
	background: var(--aw-pale);
	border-radius: var(--aw-radius-lg);
}

.aw-quote-aside__title {
	margin: 0;
	font-size: var(--aw-size-sm);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aw-ink);
}

.aw-quote-aside__text {
	margin: 0;
	font-size: var(--aw-size-sm);
	line-height: var(--aw-leading-snug);
	color: var(--aw-ink);
}

.aw-quote-aside__big {
	margin: 0;
	font-family: var(--aw-font-heading);
	font-size: var(--aw-size-lg);
	font-weight: 700;
	line-height: 1.2;
}

.aw-quote-aside__big a {
	color: var(--aw-ink);
	text-decoration: none;
}

.aw-quote-aside .aw-rule {
	margin: var(--aw-space-2xs) 0;
}

/* Honeypot: removed from the accessibility tree and from view, but left in
   the DOM so a naive bot still fills it. */
.aw-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.aw-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.aw-fieldset > legend {
	padding: 0;
	margin-bottom: 0.35rem;
}

.aw-form__wa-icon svg {
	width: 18px;
	height: 18px;
	color: var(--aw-navy);
	vertical-align: -4px;
}

.aw-form__legal {
	margin: 0;
	font-size: var(--aw-size-xs);
	line-height: var(--aw-leading-snug);
	color: var(--aw-ink-muted);
}

.aw-form__legal a {
	color: var(--aw-ink);
	font-weight: 600;
}

/* --- Notices --- */

.aw-notice {
	padding: var(--aw-space-md);
	border-radius: var(--aw-radius);
	border-left: 4px solid;
	margin-bottom: var(--aw-space-lg);
}

.aw-notice p {
	margin: 0 0 0.75em;
	font-size: var(--aw-size-base);
}

.aw-notice p:last-child {
	margin-bottom: 0;
}

.aw-notice--ok {
	background: #eef7f1;
	border-left-color: var(--aw-success);
	color: #14432d;
}

.aw-notice--error {
	background: #fdf0f0;
	border-left-color: var(--aw-error);
	color: #7a1818;
}

@media (max-width: 900px) {
	.aw-quote-layout {
		grid-template-columns: 1fr;
	}

	.aw-quote-layout__aside {
		position: static;
		order: -1;
	}
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.aw-header__nav {
		display: none;
	}

	.aw-burger {
		display: inline-flex;
	}
}

@media (max-width: 767px) {
	:root {
		--aw-header-h: 66px;
	}

	.aw-header__actions .aw-lang {
		display: none;
	}

	.aw-header__actions .aw-btn {
		display: none;
	}

	.aw-mobile-bar {
		display: grid;
	}

	/* Keep the sticky bar from covering the end of the page. */
	.aw-footer {
		padding-bottom: 68px;
	}

	.aw-footer__legal-grid {
		flex-direction: column;
		align-items: flex-start;
	}

	.aw-footer__legal-menu {
		margin-left: 0;
	}

	.aw-brand__tagline {
		display: none;
	}

	.aw-brand__emblem {
		width: 36px;
	}

	.aw-brand__name {
		font-size: 1.12rem;
	}
}

@media (max-width: 420px) {
	.aw-brand__suffix {
		font-size: 0.58rem;
		letter-spacing: 0.2em;
	}
}

@media print {
	.aw-header,
	.aw-mobile-bar,
	.aw-drawer,
	.aw-footer__contact,
	.aw-actions,
	.aw-btn {
		display: none !important;
	}

	body {
		font-size: 11pt;
	}
}

/* Forced colours / high contrast */
@media (forced-colors: active) {
	.aw-btn--gold,
	.aw-btn--navy {
		border: 2px solid ButtonText;
	}

	.aw-service-card {
		border: 1px solid CanvasText;
	}
}

.aw-quote-aside--loose {
	margin-top: var(--aw-space-xl);
}