/**
 * Spiro design tokens — 2026 redesign.
 * Typography: Outfit (see designer spec).
 * Layout: 1630px content width (see 01-general-instructions.pdf).
 */
:root {
	--spiro-font-family: "Outfit", Arial, sans-serif;
	--spiro-font-weight-regular: 400;
	--spiro-font-weight-medium: 500;
	--spiro-font-weight-bold: 700;
	--spiro-font-weight-extrabold: 800;
	--spiro-color-blue: #007ec1;
	--spiro-color-navy: #002c41;
	--spiro-color-dark: #000000;
	--spiro-color-bg: #f6f6f6;
	--spiro-color-ink: #000000;
	/* Rollover / focused inputs — 03-colors.pdf */
	--spiro-color-rollover: #174054;
	--spiro-content-max: 1630px;
	--spiro-canvas-max: 100%;
	--spiro-gutter: 50px;
	/* Distance from viewport edges to inner edges of 1630px content shell */
	--spiro-content-left: calc(max(0px, (100vw - var(--spiro-content-max)) / 2) + var(--spiro-gutter));
	--spiro-content-right: calc(max(0px, (100vw - var(--spiro-content-max)) / 2) + var(--spiro-gutter));

	/*
	 * Type ramp — sizes inferred from PDF text layers at 1920 artboard
	 * (02-typography.pdf binds weights only; 01-general = 1630 content shell).
	 * See planning/2026-09-06-design-qa-fonts-colors-effects.md
	 */
	--spiro-type-hero: clamp(42px, 3.28vw, 63px);
	--spiro-type-hero-services: clamp(48px, 5.5vw, 88px);
	--spiro-type-hero-item: clamp(40px, 6.2vw, 92px);
	--spiro-type-section: clamp(28px, 2.55vw, 49px);
	--spiro-type-section-lg: clamp(36px, 3.28vw, 63px);
	--spiro-type-lead-home: clamp(22px, 2.25vw, 43px);
	--spiro-type-lead: clamp(18px, 1.55vw, 30px);
	--spiro-type-intro: clamp(18px, 1.35vw, 26px);
	--spiro-type-body: clamp(16px, 1.25vw, 24px);
	--spiro-type-body-sm: clamp(15px, 1.05vw, 18px);
	--spiro-type-nav: clamp(16px, 1.15vw, 19px);
	--spiro-type-logos-desc: clamp(16px, 1.15vw, 19px);
	--spiro-type-btn: 19px;
	--spiro-type-btn-sm: 18px;
	--spiro-type-caption: clamp(13px, 0.9vw, 16px);
	--spiro-type-card-title: clamp(18px, 1.35vw, 22px);
	--spiro-type-card-title-lg: clamp(22px, 1.8vw, 28px);

	/* Hover / motion shared values */
	--spiro-hover-zoom: 1.04;
	--spiro-hover-zoom-strong: 1.08;
	--spiro-hover-dim: brightness(0.92);
	--spiro-hover-dim-strong: brightness(0.8);
	--spiro-hover-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--spiro-hover-duration: 0.55s;

	/* Added Services accordion — PDF 05/06 @ 1920 */
	--spiro-faq-services-heading-size: clamp(36px, 3.28vw, 63px);
	--spiro-faq-services-item-size: clamp(20px, 1.46vw, 28px);
	--spiro-faq-services-icon-size: 32px;
	--spiro-faq-services-icon-gap: 18px;
	--spiro-faq-services-answer-size: 18px;
	--spiro-faq-services-row-pad: 26px;
	--spiro-faq-services-muted: #e2e4e5;
	/* Fine divider: dark blue ~60% opacity — visible on navy, not white 1pt */
	--spiro-faq-services-divider: rgba(0, 126, 193, 0.55);
}

/* --------------------------------------------------------------------------
   Focus — remove default browser / Bootstrap outline on click, drag, and tab focus
   (:focus alone loses to Bootstrap's a:focus — higher element specificity)
   -------------------------------------------------------------------------- */
body{
	background-color: var(--spiro-color-bg);
}
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
[tabindex]:focus,
[tabindex]:focus-visible {
	outline: none;
	outline-offset: 0;
}

a,
button,
input,
textarea,
select {
	-webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   Layout containers — content 1630px, full-bleed elements stay outside
   -------------------------------------------------------------------------- */

.spiro-content-shell,
.max-width-1630 .container,
.max-width-1260 .container,
section.section .container {
	width: 100%;
	max-width: var(--spiro-content-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spiro-gutter);
	padding-right: var(--spiro-gutter);
	box-sizing: border-box;
}

/* Nested CMS containers — inherit parent width, avoid double gutters */
section.section .container .container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* CMS narrow row presets keep their intended widths */
section.section .max-width-460 .container {
	max-width: 460px;
}

section.section .max-width-780 .container {
	max-width: 780px;
}

section.section .max-width-960 .container {
	max-width: 920px;
}

section.section .max-width-980 .container {
	max-width: 980px;
}

header .spiro-content-shell {
	max-width: var(--spiro-content-max);
}

header.spiro-header,
header.spiro-header+section,
.spiro-header {
	max-width: none;
}

/* Header/footer: full viewport width; inner content stays 1630px */
header {
	max-width: none;
	width: 100%;
}

.spiro-content-width {
	width: 100%;
	max-width: var(--spiro-content-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spiro-gutter);
	padding-right: var(--spiro-gutter);
	box-sizing: border-box;
}

/* Nested inside a padded CMS .container — keep one gutter only (mobile) */
@media (max-width: 767px) {
	.container .spiro-content-width {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

.legal_compliance .max-width-1630 .container,
.legal_compliance .max-width-1260 .container {
	padding-left: var(--spiro-gutter);
	padding-right: var(--spiro-gutter);
}

/* --------------------------------------------------------------------------
   Layout utilities — Added Services and similar 40/60 blocks
   -------------------------------------------------------------------------- */

.cols_40_60 .flex_container {
	display: grid;
	grid-template-columns: 40% 60%;
	width: 100%;
	align-items: stretch;
}

.cols_40_60 .flex_container .cell_1_2 {
	min-width: 1px !important;
	max-width: none !important;
}

.dark_blue_bg {
	background-color: var(--spiro-color-navy, #002c41);
	color: #fff;
}

@media (max-width: 992px) {
	.cols_40_60 .flex_container {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Blue Boxes row — always 4 equal columns (page-builder class: blue_boxes)
   Must live here (head) so global .cell_1_4 widths cannot wrap cards to 3+1.
   -------------------------------------------------------------------------- */

.blue_boxes > .container > .row.flex_container,
.blue_boxes > .container > .flex_container,
.blue_boxes .flex_container {
	display: grid !important;
	grid-template-columns: repeat(4, calc(25% - 15px));
	gap: 60px;
	align-items: stretch;
	justify-content: center;
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Bootstrap .row clearfix pseudo-elements would occupy grid cells. */
.blue_boxes .flex_container::before,
.blue_boxes .flex_container::after {
	content: none !important;
	display: none !important;
}

/* Fewer than 4 cards keep the same card width and stay centered. */
.blue_boxes .flex_container:has(> [class*="cell_"]:nth-child(2):last-child) {
	grid-template-columns: repeat(2, calc(33% - 15px));
}

.blue_boxes .flex_container:has(> [class*="cell_"]:nth-child(3):last-child) {
	grid-template-columns: repeat(3, calc(25% - 15px));
}

.blue_boxes .flex_container:has(> [class*="cell_"]:only-child) {
	grid-template-columns: calc(25% - 15px);
}

.blue_boxes .flex_container > [class*="cell_"] {
	float: none !important;
	display: flex !important;
	flex-direction: column;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.blue_boxes .flex_container > [class*="cell_"] > .full-height {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: auto !important;
	min-height: 100%;
}

.blue_boxes .spiro-blue-box {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
	min-height: 100%;
}

@media (max-width: 1199px) {
	.blue_boxes .flex_container,
	.blue_boxes .flex_container:has(> [class*="cell_"]:nth-child(2):last-child),
	.blue_boxes .flex_container:has(> [class*="cell_"]:nth-child(3):last-child),
	.blue_boxes .flex_container:has(> [class*="cell_"]:only-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.blue_boxes .flex_container,
	.blue_boxes .flex_container:has(> [class*="cell_"]:nth-child(2):last-child),
	.blue_boxes .flex_container:has(> [class*="cell_"]:nth-child(3):last-child),
	.blue_boxes .flex_container:has(> [class*="cell_"]:only-child) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Base */
html,
body {
	font-family: var(--spiro-font-family);
}

body {
	font-weight: var(--spiro-font-weight-medium);
}

/* Titles — Outfit Extra Bold (except small titles in body text) */
h1,
h2,
h3,
h4,
h5,
h6,
h1.page_title,
.regular_box_title h2 p,
.contact_info_footer h2 p,
.helpline-info h2 p,
.caption .itemtitle,
.newsletter_form h2,
.timeline .cell_2_5 h2,
.timeline h2.timeline_year,
.one_product_description h1.page_title {
	font-family: var(--spiro-font-family);
	font-weight: var(--spiro-font-weight-extrabold);
}

.spiro-footer h2,
.spiro-footer h3 {
	font-weight: var(--spiro-font-weight-bold);
}

/* Small subtitles — Outfit Bold */
.small_box_title h2 p,
.options h2 p,
.options.two_boxes h2 p,
.description_content h3,
.description_content h4,
.description_content h5,
.description_content h6,
.description_content .small_box_title h2 p {
	font-family: var(--spiro-font-family);
	font-weight: var(--spiro-font-weight-bold);
}

/* Leads + navigation — Outfit Bold */
.navbar-nav>li>a,
.description_content p.lead,
.lead_text .description_content p,
h3.footer_newsletter,
.newletter_footer span {
	font-family: var(--spiro-font-family);
	font-weight: var(--spiro-font-weight-bold);
}

/* Body / running text — Outfit Medium */
.description_content p,
.regular_box_content .description_content p,
.smaller_text .regular_box_content .description_content p,
.small_box_title .description_content p,
.small_box_title .description_content p a,
.container_machine_div .description_content_full p,
.options .description_content p,
.options2 .description_content p,
.timeline .description_content p,
.unique_features_container tr td,
.featured_prod_machines,
.goto_products,
.goto_products a,
#machine_category_container ul li {
	font-family: var(--spiro-font-family);
	font-weight: var(--spiro-font-weight-medium);
}

/* Buttons — Outfit Medium */
.btn-custom,
button,
input[type="submit"],
input[type="button"],
.footer_newsletter_form #sendnewsletter2 {
	font-family: var(--spiro-font-family);
	font-weight: var(--spiro-font-weight-medium);
}

/* Footer addresses, captions, misc — Outfit Regular */
.contact_info_footer .description_content p,
.contact_info_footer .description_content p a,
.helpline-info .description_content p,
.helpline-info .description_content p a,
.copyright p,
.legal_compliance p,
.legal_compliance p a,
.caption .itemtext,
.gallery .itemVideo .caption,
.languages_cont a {
	font-family: var(--spiro-font-family);
	font-weight: var(--spiro-font-weight-regular);
}

/* --------------------------------------------------------------------------
   Home intro lead — CMS sectionClass "main_text"
   Typography: LEAD = Outfit Bold (02-typography.pdf)
   Motion: slide from right like Statron (52-home-scroll-animations.pdf)
   -------------------------------------------------------------------------- */

.main_text {
	background-color: var(--spiro-color-bg);
	padding-top: clamp(56px, 7vw, 110px);
	padding-bottom: clamp(56px, 7vw, 110px);
}

.main_text .description_content {
	max-width: 920px;
}

.main_text .description_content p,
.main_text .regular_box_content .description_content p {
	margin: 0;
	color: var(--spiro-color-ink);
	font-family: var(--spiro-font-family);
	font-weight: var(--spiro-font-weight-bold);
	font-size: var(--spiro-type-lead-home);
	line-height: 1.45;
	text-align: left;
	hyphens: manual;
}

/* --------------------------------------------------------------------------
   Home products / connectivity / highlights intro —
   CMS sectionClass "hp_products", "hp_connectivity", "hp_highlights"
   Typography: heading 63px Extra Bold (PDF), body 26px Medium (PDF 05)
   Motion: slide from right like Statron (52-home-scroll-animations.pdf)
   -------------------------------------------------------------------------- */

.hp_products,
.hp_connectivity,
.hp_highlights {
	background-color: var(--spiro-color-bg);
	padding-top: clamp(56px, 7vw, 110px);
	padding-bottom: clamp(56px, 7vw, 110px);
}

.hp_products .flex_container,
.hp_connectivity .flex_container,
.hp_highlights .flex_container {
	align-items: flex-start;
}

.hp_products h2,
.hp_products h2 p,
.hp_connectivity h2,
.hp_connectivity h2 p,
.hp_highlights h2,
.hp_highlights h2 p {
	margin: 0;
	padding: 0;
	color: var(--spiro-color-ink);
	font-family: var(--spiro-font-family);
	font-weight: var(--spiro-font-weight-extrabold);
	font-size: var(--spiro-type-section-lg);
	line-height: 1;
	text-align: left;
	text-transform: uppercase;
}

.hp_products .description_content p,
.hp_products .regular_box_content .description_content p,
.hp_connectivity .description_content p,
.hp_connectivity .regular_box_content .description_content p,
.hp_highlights .description_content p,
.hp_highlights .regular_box_content .description_content p {
	margin: 0;
	color: var(--spiro-color-ink);
	font-family: var(--spiro-font-family);
	font-weight: var(--spiro-font-weight-medium);
	/* PDF 05: HP body 26 Medium @ 1920 */
	font-size: var(--spiro-type-intro);
	line-height: 1.5;
	text-align: left;
	hyphens: manual;
}
.hp_connectivity .description_content.spiro-come-right.is-inview {
    max-width: 600px;
    padding-left: 2rem;
}
@media (max-width: 992px) {

	.hp_products .flex_container,
	.hp_connectivity .flex_container,
	.hp_highlights .flex_container {
		row-gap: 28px;
	}

	.hp_products h2,
	.hp_products h2 p,
	.hp_connectivity h2,
	.hp_connectivity h2 p,
	.hp_highlights h2,
	.hp_highlights h2 p {
		font-size: clamp(36px, 9vw, 63px);
	}
}

/* ≤920px: keep section / page titles inside the content column */
@media (max-width: 920px) {
	.hp_products h2,
	.hp_products h2 p,
	.hp_connectivity h2,
	.hp_connectivity h2 p,
	.hp_highlights h2,
	.hp_highlights h2 p {
		font-size: clamp(28px, 6.5vw, 48px);
		line-height: 1.05;
	}

	:root {
		--spiro-type-hero: clamp(28px, 6vw, 48px);
		--spiro-type-hero-services: clamp(32px, 7vw, 56px);
		--spiro-type-section-lg: clamp(28px, 6vw, 48px);
		--spiro-type-card-title-lg: clamp(15px, 3.5vw, 22px);
	}
}

/* Mobile gutter */
@media (max-width: 640px) {
	:root {
		--spiro-gutter: 35px;
	}
}

/* --------------------------------------------------------------------------
   Stadium CTA — white capsule on gray
   - CMS sectionClass: hp_market_place (homepage MARKET / PLACE)
   - Reusable: spiro-quote (product Request / A Quote, etc.)
   Markup: .full-height > h3 (accent) + h2 (ink) + optional .description_content + .btn-custom
   -------------------------------------------------------------------------- */

.hp_market_place,
.spiro-quote {
	background-color: var(--spiro-color-bg);
	padding-top: clamp(48px, 6vw, 90px);
	padding-bottom: clamp(48px, 6vw, 90px);
}

.hp_market_place .flex_container,
.spiro-quote .flex_container {
	justify-content: center;
	align-items: center;
}

.hp_market_place .cell_1_1,
.spiro-quote .cell_1_1 {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* White oval / stadium shape around the stacked copy + button */
.hp_market_place .full-height,
.spiro-quote .full-height {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 80%;
	max-width: 100%;
	margin: 0 auto;
	padding: clamp(52px, 5.5vw, 88px) clamp(72px, 10vw, 160px);
	background-color: #fff;
	border-radius: 9999px;
	text-align: center;
}

.hp_market_place h3,
.hp_market_place h3 p,
.spiro-quote h3,
.spiro-quote h3 p {
	margin: 0;
	padding: 0;
	color: var(--spiro-color-blue);
	font-family: var(--spiro-font-family);
	font-weight: var(--spiro-font-weight-extrabold);
	/* PDF 05: home MARKET/PLACE uses .spiro-quote → 123 @ 1920 */
	font-size: clamp(32px, 6.4vw, 123px);
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

.hp_market_place h2,
.hp_market_place h2 p,
.spiro-quote h2,
.spiro-quote h2 p {
	margin: 0;
	padding: 0;
	color: var(--spiro-color-navy);
	font-family: var(--spiro-font-family);
	font-weight: var(--spiro-font-weight-extrabold);
	font-size: clamp(32px, 6.4vw, 123px);
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

/* PDF 10: product Request / A Quote ~101 (item wrapper; home MARKET stays 123) */
.spiro-item .spiro-quote h3,
.spiro-item .spiro-quote h3 p,
.spiro-item .spiro-quote h2,
.spiro-item .spiro-quote h2 p {
	font-size: clamp(42px, 5.27vw, 101px);
}

.hp_market_place .description_content,
.spiro-quote .description_content {
	margin-top: clamp(6px, 0.8vw, 12px);
	margin-bottom: clamp(22px, 2.4vw, 36px);
}

.hp_market_place .description_content p,
.spiro-quote .description_content p {
	margin: 0;
	color: var(--spiro-color-navy);
	font-family: var(--spiro-font-family);
	font-weight: var(--spiro-font-weight-medium);
	font-size: clamp(1.6rem, 2.22vw, 3.2rem);
	line-height: 1.45;
	text-align: center;
	hyphens: manual;
}

.hp_market_place .btn-custom,
.spiro-quote .btn-custom {
	display: inline-block;
	min-width: 0;
	padding: 12px 36px;
	border-radius: 9999px;
	background-color: var(--spiro-color-navy);
	color: #fff;
	font-family: var(--spiro-font-family);
	font-weight: var(--spiro-font-weight-medium);
	font-size: var(--spiro-type-btn-sm);
	line-height: 1.3;
	text-decoration: none;
}

/* Quote (no lead text): space between title and button */
.hp_market_place h2 + .btn-custom,
.spiro-quote h2 + .btn-custom {
	margin-top: clamp(22px, 2.4vw, 36px);
}

.hp_market_place .btn-custom:hover,
.hp_market_place .btn-custom:focus,
.spiro-quote .btn-custom:hover,
.spiro-quote .btn-custom:focus {
	background-color: var(--spiro-color-blue);
	color: #fff;
}

@media (max-width: 767px) {
	.hp_market_place .full-height,
	.spiro-quote .full-height {
		padding: 40px 36px;
		border-radius: 80px;
		width: 100%;
	}
	.hp_connectivity .description_content.spiro-come-right{
		padding-left: 0;
	}
}

/* Required-field fake placeholders: label + blue * (no ch offsets) */
.spiro-field-hint {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	display: block;
	box-sizing: border-box;
	padding: 0 18px;
	height: 51px;
	overflow: hidden;
	color: inherit;
	font-family: inherit;
	font-size: var(--spiro-type-btn, 16px);
	font-weight: var(--spiro-font-weight-medium, 500);
	line-height: 51px;
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
}

.spiro-cf--msg .spiro-field-hint,
.spiro-hf--full .spiro-field-hint,
.spiro-wf--full .spiro-field-hint,
.spiro-sf--msg .spiro-field-hint,
.spiro-uf--msg .spiro-field-hint,
.spiro-jf--msg .spiro-field-hint,
.spiro-field-hint--textarea {
	height: auto;
	min-height: 0;
	padding: 14px 18px;
	line-height: 1.4;
	white-space: normal;
	overflow: visible;
}

.spiro-field-hint__star {
	padding-left: 5px;
	color: var(--spiro-color-blue, #007ec1);
	font-weight: var(--spiro-font-weight-medium, 500);
}

.spiro-cf--req:has(input:not(:placeholder-shown)) .spiro-field-hint,
.spiro-cf--req:has(textarea:not(:placeholder-shown)) .spiro-field-hint,
.spiro-cf--req:has(select:not([data-empty="1"])) .spiro-field-hint,
.spiro-cf--req:has(input:focus) .spiro-field-hint,
.spiro-cf--req:has(textarea:focus) .spiro-field-hint,
.spiro-cf--req:has(select:focus) .spiro-field-hint,
.spiro-hf--req:has(input:not(:placeholder-shown)) .spiro-field-hint,
.spiro-hf--req:has(textarea:not(:placeholder-shown)) .spiro-field-hint,
.spiro-hf--req:has(select:not([data-empty="1"])) .spiro-field-hint,
.spiro-hf--req:has(input:focus) .spiro-field-hint,
.spiro-hf--req:has(textarea:focus) .spiro-field-hint,
.spiro-hf--req:has(select:focus) .spiro-field-hint,
.spiro-wf--req:has(input:not(:placeholder-shown)) .spiro-field-hint,
.spiro-wf--req:has(textarea:not(:placeholder-shown)) .spiro-field-hint,
.spiro-wf--req:has(select:not([data-empty="1"])) .spiro-field-hint,
.spiro-wf--req:has(input:focus) .spiro-field-hint,
.spiro-wf--req:has(textarea:focus) .spiro-field-hint,
.spiro-wf--req:has(select:focus) .spiro-field-hint,
.spiro-sf--req:has(input:not(:placeholder-shown)) .spiro-field-hint,
.spiro-sf--req:has(textarea:not(:placeholder-shown)) .spiro-field-hint,
.spiro-sf--req:has(select:not([data-empty="1"])) .spiro-field-hint,
.spiro-sf--req:has(input:focus) .spiro-field-hint,
.spiro-sf--req:has(textarea:focus) .spiro-field-hint,
.spiro-sf--req:has(select:focus) .spiro-field-hint,
.spiro-uf--req:has(input:not(:placeholder-shown)) .spiro-field-hint,
.spiro-uf--req:has(textarea:not(:placeholder-shown)) .spiro-field-hint,
.spiro-uf--req:has(select:not([data-empty="1"])) .spiro-field-hint,
.spiro-uf--req:has(input:focus) .spiro-field-hint,
.spiro-uf--req:has(textarea:focus) .spiro-field-hint,
.spiro-uf--req:has(select:focus) .spiro-field-hint,
.spiro-jf--req:has(input:not(:placeholder-shown)) .spiro-field-hint,
.spiro-jf--req:has(textarea:not(:placeholder-shown)) .spiro-field-hint,
.spiro-jf--req:has(input:focus) .spiro-field-hint,
.spiro-jf--req:has(textarea:focus) .spiro-field-hint,
.bd-req:has(input:not(:placeholder-shown)) .spiro-field-hint,
.bd-req:has(select:not([data-empty="1"])) .spiro-field-hint,
.bd-req:has(input:focus) .spiro-field-hint,
.bd-req:has(select:focus) .spiro-field-hint {
	opacity: 0;
}

.spiro-cf--req .form-control::placeholder,
.spiro-hf--req .form-control::placeholder,
.spiro-wf--req .form-control::placeholder,
.spiro-sf--req .form-control::placeholder,
.spiro-uf--req .form-control::placeholder,
.spiro-jf--req .form-control::placeholder,
.bd-req .form-control::placeholder {
	color: transparent !important;
	opacity: 0 !important;
}

/* Form success/error under submit — same pill style as newsletter (exclude VR newsletter) */
form:not(.vr-signup-form) .screen-reader-error,
form:not(.vr-signup-form) .screen-reader-response,
#sparepartsmodal .screen-reader-error,
#sparepartsmodal .screen-reader-response {
	display: none;
	width: 100%;
	box-sizing: border-box;
	margin: 14px 0 0;
	padding: 12px 18px;
	border-radius: 12px;
	font-family: var(--spiro-font-family, "Outfit", Arial, sans-serif);
	font-size: 15px;
	font-weight: var(--spiro-font-weight-medium, 500);
	line-height: 1.35;
	text-align: center;
}

form:not(.vr-signup-form) .screen-reader-response,
#sparepartsmodal .screen-reader-response {
	background: #ffffff !important;
	color: var(--spiro-color-navy, #002c41) !important;
}

form:not(.vr-signup-form) .screen-reader-error,
#sparepartsmodal .screen-reader-error {
	background: #dd131a !important;
	color: #ffffff !important;
}

form:not(.vr-signup-form) .screen-reader-error.is-visible,
form:not(.vr-signup-form) .screen-reader-response.is-visible,
#sparepartsmodal .screen-reader-error.is-visible,
#sparepartsmodal .screen-reader-response.is-visible {
	display: block;
}