/* ==========================================================================
   Site colours: celadon green (16 October 2026).

   Garth: "my website is too monotone". First live as terracotta and green;
   at 21:41 the same evening: "lets try with just the green - i dont like
   the terracotta". So the green does all of it: the buttons that ask for
   business, the small marks, a pale wash behind the reviews, and a deep
   green in place of the warm brown bands. The one cool note against the
   cream. Everything here lives in this one sheet, loaded last, and only
   while Appearance, Site colours is ticked. Untick it and the site is
   exactly as it was before.

   Contrast: green #4f6a5e is 5.0 to 1 on the cream, 4.6 to 1 on the wash
   and 5.9 to 1 under white type; cream type on the deep green #33463e is
   11 to 1; the light celadon #aec1b4 on the deep green is 5.3 to 1.
   ========================================================================== */

:root {
	--nw-green: #4f6a5e;
	--nw-green-hover: #3e5449;
	--nw-green-mark: #7f9a8e;
	--nw-green-light: #aec1b4;
	--nw-green-wash: #dfe5dd;
	--nw-green-band: #33463e;
	--color-accent: var(--nw-green-mark);
	--color-accent-deep: var(--nw-green);
	--color-deep: var(--nw-green-band);
	--color-celadon: var(--nw-green-light);
	--color-celadon-deep: var(--nw-green-mark);
	--color-celadon-text: var(--nw-green);
}

/* The bands that were warm brown. */
.section--home-products,
.section--furniture-statement,
.fitout-ladder,
.about-band,
.section--projects-list {
	background-color: var(--nw-green-band) !important;
}

/* The reviews on a pale wash of the same green. */
.section--reviews {
	background-color: var(--nw-green-wash) !important;
}

/* Small marks on the light grounds. */
.eyebrow__marker,
.reviews__clients-label::before,
.trust-strip__mark,
.quote-drawer__empty-mark {
	background: var(--nw-green-mark) !important;
}

.home-hero__contact-label::before {
	content: "";
	display: inline-block;
	width: 0.34rem;
	height: 0.34rem;
	margin-right: 0.55rem;
	vertical-align: 0.1em;
	transform: rotate(45deg);
	background: var(--nw-green-mark);
}

.text-link,
.furniture-search__empty-link,
.quote-clear__link--yes {
	color: var(--nw-green) !important;
}

/* Marks and numbers on the dark grounds read in the light celadon. */
.home-product__cta,
.home-product__num,
.home-product__arrow,
.fitout-stage__num,
.fitout-ladder__index,
.site-footer__furniture-label {
	color: var(--nw-green-light) !important;
}

.fitout-stage__bar {
	background: var(--nw-green-light) !important;
}

/* The client logos stay neutral, as they were. */
.client__mono {
	background-color: #a29782 !important;
}

/* The buttons that ask for business. The theme's buttons fill on hover with
   two panels that rise from below, coloured by four custom properties; so
   these set the properties, not the colours, and the rising panels are a
   deeper green with the words staying white. (16 October 2026, 23:04: the
   first version forced white words, and the panels rose in warm white over
   them, so the label vanished on hover.) */
.menu-item--cta > a,
.product-card__cta,
.quote-drawer__cta,
.quote-fab {
	--btn-text: #fffefa;
	--btn-border: var(--nw-green);
	/* Garth, 23:07: "make it go black on the hover over". */
	--btn-fill: var(--color-ink);
	--btn-fill-text: #fffefa;
	background-color: var(--nw-green) !important;
	border-color: var(--nw-green) !important;
	color: #fffefa !important;
}

.menu-item--cta > a:hover,
.menu-item--cta > a:focus-visible,
.product-card__cta:hover,
.product-card__cta:focus-visible,
.quote-drawer__cta:hover,
.quote-drawer__cta:focus-visible,
.quote-fab:hover,
.quote-fab:focus-visible {
	border-color: var(--color-ink) !important;
}

/* The count keeps its own light chip, with green figures. */
.quote-fab__count,
.menu-cta-count {
	color: var(--nw-green) !important;
}

.quote-badge {
	background: var(--nw-green) !important;
}