/* =========================================================
   Centurion Plant Hire — flow-specific styles
   Depends on: tokens.css, base.css, components.css, division.css
   ========================================================= */

/* --- Plant hero (bigger than division hero, image-forward) --- */
.csl-plant-hero { background: var(--bg); position: relative; overflow: clip; }
.csl-plant-hero::before {
	content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 6px;
	background: linear-gradient(90deg, var(--div-plant) 0%, var(--div-plant) 40%, transparent 40%);
}
.csl-plant-hero__inner {
	display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 72px);
	padding: clamp(56px, 8vw, 120px) 0 clamp(56px, 8vw, 96px);
	align-items: center;
}
.csl-plant-hero__title {
	font-size: clamp(40px, 6vw, 76px); font-weight: 700; line-height: 1.02;
	letter-spacing: -0.025em; margin: 12px 0 20px; color: var(--ink);
}
.csl-plant-hero__title .csl-accent-word { color: var(--div-plant); font-style: italic; font-weight: 700; }
.csl-plant-hero__lede {
	font-size: clamp(16px, 1.4vw, 20px); color: var(--ink-3); max-width: 44ch; margin: 0 0 24px;
}
.csl-plant-hero__meta {
	display: flex; flex-wrap: wrap; gap: 24px; margin: 0 0 32px; padding: 20px 0 0;
	border-top: 1px solid var(--line);
}
.csl-plant-hero__meta-item { display: flex; flex-direction: column; gap: 4px; }
.csl-plant-hero__meta-num { font-size: 32px; font-weight: 800; color: var(--ink); font-family: var(--font-mono); }
.csl-plant-hero__meta-lbl { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.csl-plant-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.csl-plant-hero__visual {
	position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden;
	background: linear-gradient(135deg, #2a2622 0%, #100D0A 60%, #2a2622 100%);
	box-shadow: 0 30px 80px -30px rgba(0,0,0,.35);
}
.csl-plant-hero__visual::after {
	content: "Plant hire · photography TBC"; position: absolute; inset: auto 0 20px 20px;
	font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(245,239,226,.5);
	text-transform: uppercase;
}
.csl-plant-hero__visual::before {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(45deg, transparent 47%, rgba(240,169,59,.35) 49%, rgba(240,169,59,.35) 51%, transparent 53%) 0 0 / 32px 32px,
		linear-gradient(-45deg, transparent 47%, rgba(240,169,59,.15) 49%, rgba(240,169,59,.15) 51%, transparent 53%) 0 0 / 44px 44px;
	opacity: 0.6;
}
/* When a real image is present, drop the placeholder pattern + "photography TBC" label. */
.csl-plant-hero__visual.has-image::before,
.csl-plant-hero__visual.has-image::after { content: none; display: none; }
.csl-plant-hero__visual__img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center; display: block; z-index: 1;
}
.csl-plant-hero__badge {
	position: absolute; top: 20px; left: 20px; z-index: 2;
	background: var(--div-plant); color: #1a1612; font-family: var(--font-mono);
	font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	padding: 8px 14px; border-radius: 4px;
}

@media (max-width: 900px) {
	.csl-plant-hero__inner { grid-template-columns: 1fr; gap: 32px; }
	.csl-plant-hero__visual { aspect-ratio: 5 / 4; }
}

/* --- Section headers (used in all Plant Hire sections) --- */
.csl-plant-section { padding: clamp(56px, 8vw, 96px) 0; }
.csl-plant-section--dark { background: var(--ink); color: var(--bg); }
.csl-plant-section--muted { background: var(--surface); }
.csl-plant-section__header { max-width: 720px; margin: 0 0 40px; }
.csl-plant-section__title {
	font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; line-height: 1.05;
	letter-spacing: -0.02em; margin: 8px 0 12px;
}
.csl-plant-section__lede { font-size: 17px; color: var(--ink-3); margin: 0; max-width: 60ch; }
.csl-plant-section--dark .csl-plant-section__title { color: var(--bg); }
.csl-plant-section--dark .csl-btn--outline {
	color: var(--bg);
	border-color: rgba(245,239,226,.28);
}
.csl-plant-section--dark .csl-btn--outline:hover {
	color: var(--div-plant);
	border-color: var(--div-plant);
}
.csl-plant-section--dark .csl-plant-section__lede { color: rgba(245,239,226,.72); }

/* --- Category tiles (Excavators, Loaders, Rollers, Dumpers) --- */
.csl-plant-cats {
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
}
.csl-plant-cat {
	position: relative; display: flex; flex-direction: column; gap: 12px;
	padding: 28px 24px 24px; background: var(--surface); border: 1px solid var(--line);
	border-radius: 12px; text-decoration: none; color: inherit;
	transition: transform 200ms var(--ease-standard), border-color 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard);
	min-height: 260px;
}
.csl-plant-cat::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: var(--div-plant); border-radius: 12px 12px 0 0;
	transform: scaleX(0.15); transform-origin: left center;
	transition: transform 300ms var(--ease-standard);
}
.csl-plant-cat:hover { transform: translateY(-4px); border-color: var(--div-plant); box-shadow: 0 20px 40px -20px rgba(0,0,0,.15); }
.csl-plant-cat:hover::before { transform: scaleX(1); }
.csl-plant-cat__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--div-plant); }
.csl-plant-cat__icon { display: inline-flex; align-items: center; font-size: 44px; line-height: 1; color: var(--ink); margin: 0 0 8px; }
.csl-plant-cat__icon svg { display: block; }
.csl-plant-cat:hover .csl-plant-cat__icon { color: var(--div-plant); }
.csl-plant-cat__name { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
.csl-plant-cat__count { font-size: 13px; color: var(--ink-3); margin: 0; }
.csl-plant-cat__arrow {
	margin-top: auto; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
	letter-spacing: 0.08em; color: var(--ink); text-transform: uppercase;
}

@media (max-width: 1100px) { .csl-plant-cats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .csl-plant-cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .csl-plant-cats { grid-template-columns: 1fr; } }

/* --- Catalogue tab bar --- */
.csl-plant-cat-tabs {
	display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px;
	padding: 6px; background: var(--surface); border: 1px solid var(--line);
	border-radius: 999px; width: fit-content;
}
/* .csl-plant-cat-tab: pill-tabs on the catalogue filter bar.
   Elementor's global kit styles all <button> elements with an orange
   background + light text, so we have to override that here with enough
   specificity (button.csl-plant-cat-tab) and lock every state (default,
   :hover, :focus, :focus-visible, :active) so the browser's / kit's
   focus styles don't turn the whole pill orange with white-on-white text. */
button.csl-plant-cat-tab,
button.csl-plant-cat-tab:hover,
button.csl-plant-cat-tab:focus,
button.csl-plant-cat-tab:focus-visible,
button.csl-plant-cat-tab:active {
	appearance: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 10px 18px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--ink-3);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-shadow: none;
	transition: color 150ms, background 150ms;
}
button.csl-plant-cat-tab:hover { color: var(--ink); }
button.csl-plant-cat-tab:focus-visible { outline: 2px solid var(--div-plant); outline-offset: 2px; }
button.csl-plant-cat-tab.is-active,
button.csl-plant-cat-tab.is-active:hover,
button.csl-plant-cat-tab.is-active:focus,
button.csl-plant-cat-tab.is-active:focus-visible,
button.csl-plant-cat-tab.is-active:active {
	background: #1A1612;
	color: #F5EFE2;
}

/* Count badge: solid dark pill so it reads clearly regardless of what
   colour the tab ends up (active dark pill, inactive transparent, or if
   Elementor's kit still bleeds through anywhere). */
.csl-plant-cat-tab__count {
	font-family: var(--font-mono);
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(26,22,18,.85);
	color: #F5EFE2;
}
.csl-plant-cat-tab.is-active .csl-plant-cat-tab__count {
	background: var(--div-plant);
	color: #1A1612;
}

/* --- Product grid + card --- */
.csl-plant-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.csl-plant-grid--catalogue { grid-template-columns: repeat(3, 1fr); }
.csl-plant-grid--featured  { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.csl-plant-grid--related   { grid-template-columns: repeat(3, 1fr); }
.csl-plant-grid__cell.is-hidden { display: none; }

@media (max-width: 1024px) { .csl-plant-grid { grid-template-columns: repeat(2, 1fr); } .csl-plant-grid--featured { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .csl-plant-grid, .csl-plant-grid--featured, .csl-plant-grid--related { grid-template-columns: 1fr; } }

.csl-plant-card {
	display: flex; flex-direction: column; background: var(--bg);
	border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
	text-decoration: none; color: inherit;
	transition: transform 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard), border-color 200ms var(--ease-standard);
}
.csl-plant-card:hover { transform: translateY(-3px); border-color: var(--div-plant); box-shadow: 0 24px 40px -24px rgba(0,0,0,.18); }
.csl-plant-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--ink); overflow: hidden; }
.csl-plant-card__thumb {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background:
		linear-gradient(135deg, var(--swatch, #B78427) 0%, #1a1612 100%);
}
.csl-plant-card__thumb::before {
	content: ""; position: absolute; inset: 0;
	background: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 8px, transparent 8px 20px);
}
.csl-plant-card__thumb span {
	position: relative; z-index: 2; color: rgba(245,239,226,.86);
	font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
	padding: 4px 10px; background: rgba(0,0,0,.35); border-radius: 4px; backdrop-filter: blur(6px);
}
.csl-plant-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.csl-plant-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.csl-plant-card__cat {
	font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--div-plant); margin: 0 0 2px;
}
.csl-plant-card__title { font-size: 17px; font-weight: 700; margin: 0; line-height: 1.25; letter-spacing: -0.005em; color: var(--ink); }
.csl-plant-card__sub { font-size: 14px; color: var(--ink-3); margin: 0; }
.csl-plant-card__foot {
	margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between;
	align-items: baseline; border-top: 1px dashed var(--line);
}
.csl-plant-card__price { font-size: 13px; color: var(--ink-3); }
.csl-plant-card__price strong { font-size: 20px; color: var(--ink); font-family: var(--font-mono); font-weight: 700; margin: 0 4px; }
.csl-plant-card__price-sfx { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; }
.csl-plant-card__arrow { color: var(--div-plant); font-family: var(--font-mono); font-weight: 700; }

/* --- Fleet brand strip --- */
.csl-plant-fleet {
	display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
	padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.csl-plant-fleet__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.csl-plant-fleet__list { display: flex; flex-wrap: wrap; gap: 22px; row-gap: 12px; align-items: center; }
.csl-plant-fleet__brand {
	font-size: 18px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink);
	opacity: 0.85; padding: 6px 10px; border-radius: 6px;
	transition: color 150ms, background 150ms, opacity 150ms;
}
.csl-plant-fleet__brand:hover { background: var(--surface); opacity: 1; color: var(--div-plant); }

/* --- Why-us grid (6-cell on plant hire home) --- */
.csl-plant-why {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.csl-plant-why__card {
	background: rgba(245,239,226,0.04); border: 1px solid rgba(245,239,226,0.08);
	padding: 24px; border-radius: 12px;
}
.csl-plant-why__card-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%; background: var(--div-plant); color: #1a1612;
	font-family: var(--font-mono); font-weight: 800; font-size: 12px; margin: 0 0 12px;
}
.csl-plant-why__card h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.005em; margin: 0 0 8px; color: var(--bg); }
.csl-plant-why__card p { font-size: 14px; color: rgba(245,239,226,0.72); margin: 0; }
@media (max-width: 900px) { .csl-plant-why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .csl-plant-why { grid-template-columns: 1fr; } }

/* --- Empty states / helper text --- */
.csl-plant-empty {
	padding: 40px; text-align: center; background: var(--surface); border: 1px dashed var(--line);
	border-radius: 12px; color: var(--ink-3); margin: 0;
}
.csl-plant-poa { color: var(--ink-3); font-family: var(--font-mono); font-size: 13px; }
.csl-plant-price { color: var(--ink); font-family: var(--font-mono); font-weight: 700; }
.csl-plant-price-sfx { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; margin-left: 2px; }

/* =========================================================
   Single product page (single-csl_plant.php)
   ========================================================= */
.csl-plant-single { padding: 0 0 clamp(48px, 6vw, 80px); }
.csl-plant-crumbs {
	padding: 24px 0 0; font-family: var(--font-mono); font-size: 12px;
	letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.csl-plant-crumbs a { color: var(--ink-3); text-decoration: none; border-bottom: 1px dotted transparent; transition: color 150ms, border-color 150ms; }
.csl-plant-crumbs a:hover { color: var(--div-plant); border-color: currentColor; }
.csl-plant-crumbs__sep { padding: 0 8px; opacity: 0.4; }

.csl-plant-single__grid {
	display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 64px);
	padding: 24px 0 0; align-items: start;
}
@media (max-width: 900px) { .csl-plant-single__grid { grid-template-columns: 1fr; gap: 32px; } }

.csl-plant-single__media {
	position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden;
	background: linear-gradient(135deg, #2a2622 0%, #100D0A 60%, #2a2622 100%);
	box-shadow: 0 30px 60px -30px rgba(0,0,0,.35);
}
.csl-plant-single__media::before {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(45deg, transparent 47%, rgba(240,169,59,.32) 49%, rgba(240,169,59,.32) 51%, transparent 53%) 0 0 / 32px 32px;
	opacity: 0.5;
}
.csl-plant-single__media img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; display: block; }
.csl-plant-single__media-lbl {
	position: absolute; bottom: 16px; left: 20px; z-index: 3;
	font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(245,239,226,.55);
	text-transform: uppercase;
}
.csl-plant-single__badge {
	position: absolute; top: 16px; left: 16px; z-index: 3;
	background: var(--div-plant); color: #1a1612; font-family: var(--font-mono);
	font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	padding: 6px 12px; border-radius: 4px;
}

.csl-plant-single__body { display: flex; flex-direction: column; gap: 20px; }
.csl-plant-single__cat {
	font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--div-plant); margin: 0;
}
.csl-plant-single__title {
	font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.02em;
	line-height: 1.05; margin: 0; color: var(--ink);
}
.csl-plant-single__sub { font-size: 18px; color: var(--ink-3); margin: 0; }

.csl-plant-specs {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
	background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px;
	margin: 8px 0 0;
}
.csl-plant-specs__row { display: flex; flex-direction: column; gap: 2px; }
.csl-plant-specs__key { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.csl-plant-specs__val { font-size: 15px; color: var(--ink); font-weight: 600; }

.csl-plant-rates {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 0;
}
.csl-plant-rate {
	background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px;
	display: flex; flex-direction: column; gap: 4px; text-align: left;
}
.csl-plant-rate--week { border-color: var(--div-plant); background: rgba(240,169,59,0.05); }
.csl-plant-rate__lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.csl-plant-rate__val { font-family: var(--font-mono); font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; }
.csl-plant-rate--week .csl-plant-rate__lbl { color: var(--div-plant); }
.csl-plant-rate__poa { font-family: var(--font-mono); font-size: 15px; color: var(--ink-3); font-weight: 600; }

.csl-plant-single__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0; }
.csl-plant-single__disclaimer { font-size: 13px; color: var(--ink-3); margin: 0; }

.csl-plant-single__block {
	background: var(--surface); border-radius: 12px; padding: 24px; margin: 12px 0 0;
	border: 1px solid var(--line);
}
.csl-plant-single__block h3 {
	font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ink-3); margin: 0 0 12px;
}
.csl-plant-single__block ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; }
.csl-plant-single__block li {
	position: relative; padding-left: 20px; font-size: 14px; color: var(--ink); line-height: 1.4;
}
.csl-plant-single__block li::before {
	content: "✓"; position: absolute; left: 0; top: 0;
	color: var(--div-plant); font-weight: 700;
}

.csl-plant-single__pdf-link {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--div-plant); text-decoration: none; font-family: var(--font-mono);
	font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
	border-bottom: 1px dotted currentColor; padding-bottom: 1px;
}
.csl-plant-single__pdf-link:hover { color: var(--ink); }

.csl-plant-single__related { padding: clamp(48px, 6vw, 72px) 0 0; }
.csl-plant-single__related-header { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 24px; }
.csl-plant-single__related-header h2 { font-size: 24px; font-weight: 700; margin: 0; color: var(--ink); }
.csl-plant-single__related-header a { color: var(--div-plant); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }

/* =========================================================
   Taxonomy archive (taxonomy-csl_plant_cat.php)
   ========================================================= */
.csl-plant-tax-hero {
	background: var(--surface); padding: clamp(48px, 6vw, 80px) 0;
	border-bottom: 1px solid var(--line);
}
.csl-plant-tax-hero__inner { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: end; }
@media (max-width: 900px) { .csl-plant-tax-hero__inner { grid-template-columns: 1fr; } }
.csl-plant-tax-hero__title { font-size: clamp(36px, 5vw, 60px); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; margin: 8px 0 12px; color: var(--ink); }
.csl-plant-tax-hero__lede { font-size: 16px; color: var(--ink-3); max-width: 55ch; margin: 0; }
.csl-plant-tax-hero__meta { text-align: right; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.csl-plant-tax-hero__meta strong { display: block; font-size: 42px; color: var(--ink); font-weight: 800; }
@media (max-width: 900px) { .csl-plant-tax-hero__meta { text-align: left; } }

.csl-plant-tax-body { padding: clamp(40px, 5vw, 64px) 0; }

/* =========================================================
   Plant hire home layout
   ========================================================= */
.csl-plant-home__enquiry {
	display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px;
	background: var(--ink); color: var(--bg);
	padding: clamp(56px, 8vw, 96px) 0;
}

/* =========================================================
   Fluent Forms embed — make the plugin's output match tokens
   ========================================================= */
.csl-ff-embed .ff-el-form-control,
.csl-ff-embed .ff_form_wrap input[type="text"],
.csl-ff-embed .ff_form_wrap input[type="email"],
.csl-ff-embed .ff_form_wrap input[type="tel"],
.csl-ff-embed .ff_form_wrap input[type="url"],
.csl-ff-embed .ff_form_wrap textarea,
.csl-ff-embed .ff_form_wrap select {
	font-family: var(--font-sans) !important;
	font-size: 15px !important;
	padding: 12px 14px !important;
	border-radius: var(--radius-sm) !important;
	border: 1px solid var(--line) !important;
	background: var(--surface) !important;
	color: var(--ink) !important;
	line-height: 1.4 !important;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
.csl-ff-embed .ff-el-form-control:focus,
.csl-ff-embed input:focus,
.csl-ff-embed textarea:focus,
.csl-ff-embed select:focus {
	border-color: var(--div-plant) !important;
	box-shadow: 0 0 0 3px rgba(240,169,59,.15) !important;
	outline: none !important;
}
.csl-ff-embed .ff-el-input--label label,
.csl-ff-embed label {
	font-family: var(--font-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--ink-3) !important;
	font-weight: 600 !important;
	margin-bottom: 6px !important;
}
.csl-ff-embed .ff-el-group { margin-bottom: 14px !important; width: 100% !important; display: block !important; }
.csl-ff-embed .ff-el-form-control { width: 100% !important; box-sizing: border-box !important; }
.csl-ff-embed .ff-el-input--label { width: 100% !important; display: block !important; }
.csl-ff-embed .ff-el-input--content { width: 100% !important; display: block !important; }
.csl-ff-embed .ff-t-container,
.csl-ff-embed .ff_columns_total_2,
.csl-ff-embed .ff_columns_total_3 { display: block !important; }
.csl-ff-embed .ff-t-cell,
.csl-ff-embed .ff-t-column { display: block !important; width: 100% !important; padding: 0 !important; }
.csl-ff-embed .ff-btn-submit,
.csl-ff-embed button[type="submit"] {
	width: 100% !important;
	background: var(--div-plant) !important;
	color: #1a1612 !important;
	border: 0 !important;
	border-radius: var(--radius-pill) !important;
	padding: 14px 24px !important;
	font-family: var(--font-sans) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: -0.005em !important;
	cursor: pointer !important;
	transition: background 150ms ease, transform 150ms ease;
	box-shadow: 0 8px 20px -8px rgba(240,169,59,.4);
}
.csl-ff-embed .ff-btn-submit:hover,
.csl-ff-embed button[type="submit"]:hover {
	background: #d99527 !important;
	transform: translateY(-1px);
}
.csl-ff-embed .ff-message-success,
.csl-ff-embed .ff-message.ff-message-success {
	background: rgba(62,157,106,.1) !important;
	color: var(--success) !important;
	border-left: 3px solid var(--success) !important;
	padding: 16px 20px !important;
	border-radius: var(--radius-sm) !important;
	font-size: 15px !important;
}
.csl-ff-embed .ff-el-form-check-label,
.csl-ff-embed .ff_list_inline label {
	text-transform: none !important;
	font-family: var(--font-sans) !important;
	letter-spacing: 0 !important;
	font-size: 14px !important;
	color: var(--ink) !important;
	font-weight: 500 !important;
}

/* Dark surrounds (compact embed on dark background) — lighten inputs */
.csl-plant-section--dark .csl-ff-embed { background: transparent; }
.csl-ff-embed--compact input,
.csl-ff-embed--compact textarea { background: var(--surface) !important; }

/* Dark-context enquiry card.

   The 'Quick enquiry' card is an inline-styled <aside> with
   background: var(--surface). --surface resolves to #FFFFFF by default,
   which makes the card render as a white block sitting on top of the
   dark plant section — losing the intended dark-form design and making
   any light-on-dark label overrides look invisible on white.

   Fix: force the aside inside a dark plant section to a dark surface,
   then style every FluentForm control inside it for a dark card:
   light labels, light-cream inputs so they still stand out as clearly
   fillable, and a gold-accent radio dot. */
/* Any FluentForm-embed inside a dark section — covers:
   .csl-plant-section--dark     (plant hire product/category dark blocks)
   .csl-plant-home__enquiry     (plant home two-col enquiry grid)
   .csl-enquiry                 (homepage 'Get in touch' section)
   .csl-section--dark           (any generic dark section)
   Selectors are duplicated per prefix so any/all containers work. */
html body .csl-plant-section--dark aside,
html body .csl-plant-home__enquiry aside,
html body .csl-enquiry aside,
html body .csl-section--dark aside {
	background: #1C1915 !important;
	color: #F5EFE2 !important;
	border: 1px solid #2E2922;
}

html body .csl-plant-section--dark aside h3,
html body .csl-plant-home__enquiry aside h3,
html body .csl-enquiry aside h3,
html body .csl-section--dark aside h3,
html body .csl-plant-section--dark aside p,
html body .csl-plant-home__enquiry aside p,
html body .csl-enquiry aside p,
html body .csl-section--dark aside p {
	color: #F5EFE2;
}

/* Every FluentForm label inside a dark section — the radio option text
   is a <span> inside .ff-el-form-check-label; target both. */
html body .csl-plant-section--dark .csl-ff-embed label,
html body .csl-plant-section--dark .csl-ff-embed .ff-el-input--label label,
html body .csl-plant-section--dark .csl-ff-embed .ff_list_inline label,
html body .csl-plant-section--dark .csl-ff-embed .ff-el-form-check-label,
html body .csl-plant-section--dark .csl-ff-embed .ff-el-form-check-label span,
html body .csl-plant-home__enquiry .csl-ff-embed label,
html body .csl-plant-home__enquiry .csl-ff-embed .ff-el-input--label label,
html body .csl-plant-home__enquiry .csl-ff-embed .ff_list_inline label,
html body .csl-plant-home__enquiry .csl-ff-embed .ff-el-form-check-label,
html body .csl-plant-home__enquiry .csl-ff-embed .ff-el-form-check-label span,
html body .csl-enquiry .csl-ff-embed label,
html body .csl-enquiry .csl-ff-embed .ff-el-input--label label,
html body .csl-enquiry .csl-ff-embed .ff_list_inline label,
html body .csl-enquiry .csl-ff-embed .ff-el-form-check-label,
html body .csl-enquiry .csl-ff-embed .ff-el-form-check-label span,
html body .csl-section--dark .csl-ff-embed label,
html body .csl-section--dark .csl-ff-embed .ff-el-input--label label,
html body .csl-section--dark .csl-ff-embed .ff_list_inline label,
html body .csl-section--dark .csl-ff-embed .ff-el-form-check-label,
html body .csl-section--dark .csl-ff-embed .ff-el-form-check-label span {
	color: #F5EFE2 !important;
	opacity: 1 !important;
}

/* Radios themselves: gold accent + a soft contrast ring so the empty
   circles are visible against the near-black background. */
html body .csl-plant-section--dark .csl-ff-embed input[type="radio"],
html body .csl-plant-section--dark .csl-ff-embed input[type="checkbox"],
html body .csl-plant-home__enquiry .csl-ff-embed input[type="radio"],
html body .csl-plant-home__enquiry .csl-ff-embed input[type="checkbox"],
html body .csl-enquiry .csl-ff-embed input[type="radio"],
html body .csl-enquiry .csl-ff-embed input[type="checkbox"],
html body .csl-section--dark .csl-ff-embed input[type="radio"],
html body .csl-section--dark .csl-ff-embed input[type="checkbox"] {
	accent-color: #F0A93B !important;
	width: 16px !important;
	height: 16px !important;
	vertical-align: middle;
	margin-right: 6px;
}

/* Keep inputs light so they read as clearly-fillable cards on dark. */
html body .csl-plant-section--dark .csl-ff-embed .ff-el-form-control,
html body .csl-plant-home__enquiry .csl-ff-embed .ff-el-form-control,
html body .csl-enquiry .csl-ff-embed .ff-el-form-control,
html body .csl-section--dark .csl-ff-embed .ff-el-form-control {
	background: #FBF8F2 !important;
	color: #1A1612 !important;
	border-color: #2E2922 !important;
}