/* Batı Ambalaj — SEO landing page templates
   Scoped under .ba-page so nothing here can leak into Elementor pages. */

/* ---------- Host layout neutralisation ----------
   The theme renders page content inside
   `<div class="container" id="lqd-contents-wrap">`, which is a Bootstrap
   container (max-width 1170px, 15px side padding) AND `display:flex`.
   Two consequences: full-bleed sections could not reach the viewport edges,
   and .ba-page — as a flex item — shrank to its content width.
   batiambalaj/init.php swaps the `container` class for `ba-contents-wrap`;
   these rules finish the job. */

#lqd-contents-wrap.ba-contents-wrap {
	display: block;
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}

.ba-page {
	width: 100%;
	background: #fff;
	overflow-x: clip; /* nothing here may push the page sideways */
}

/* Fallback: if the wrapper still is a Bootstrap container (cached markup,
   another layout), paint the full-bleed sections edge to edge anyway.
   box-shadow + clip-path bleeds the background without changing layout width
   and without ever creating a horizontal scrollbar. */
.container > .ba-page > .ba-hero,
.container > .ba-page > .ba-trust,
.container > .ba-page > .ba-ctaband,
.container > .ba-page > .ba-section--tint,
.container > .ba-page > .ba-section--links,
.container > .ba-page > .ba-faq,
.container > .ba-page > .ba-quote {
	box-shadow: 0 0 0 100vmax var(--ba-bleed, transparent);
	clip-path: inset(0 -100vmax);
}

.ba-page,
.ba-block {
	--ba-primary: #2c2f8e;
	--ba-primary-dark: #1f2168;
	--ba-ink: #2d3058;
	--ba-accent: #fad55b;
	--ba-deep: #002e42;
	--ba-muted: #5b6080;
	--ba-line: #e2e5f0;
	--ba-surface: #f5f6fa;
	--ba-radius: 14px;
	--ba-wrap: 1220px;

	color: var(--ba-ink);
	font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 17px;
	line-height: 1.65;
}

.ba-page *, .ba-page *::before, .ba-page *::after,
.ba-block *, .ba-block *::before, .ba-block *::after { box-sizing: border-box; }

.ba-wrap {
	width: 100%;
	max-width: var(--ba-wrap);
	margin-inline: auto;
	padding-inline: 20px;
}

.ba-page p { margin: 0 0 1em; }
.ba-page p:last-child { margin-bottom: 0; }
/* Links: components own their colour. Only prose links get the accent, so a
   blanket `a` rule can never out-specify a button or a bar. */
.ba-page a,
.ba-block a { color: inherit; }

.ba-page p a,
.ba-page li a,
.ba-page td a,
.ba-page th a,
.ba-page figcaption a,
.ba-page .ba-note a,
.ba-block p a,
.ba-block li a,
.ba-block td a,
.ba-block th a {
	color: var(--ba-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.ba-page p a:hover,
.ba-page li a:hover,
.ba-block p a:hover,
.ba-block li a:hover { color: var(--ba-primary-dark); }

/* ---------- Headings ---------- */

.ba-h2 {
	margin: 0 0 .75em;
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.2;
	font-weight: 700;
	color: var(--ba-deep);
	letter-spacing: -.01em;
}

.ba-h3 {
	margin: 1.8em 0 .5em;
	font-size: clamp(19px, 2vw, 23px);
	line-height: 1.3;
	font-weight: 700;
	color: var(--ba-primary);
}

/* ---------- Breadcrumb ---------- */

.ba-breadcrumb {
	padding-block: 18px;
	border-bottom: 1px solid var(--ba-line);
	font-size: 14px;
}

.ba-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ba-breadcrumb li { color: var(--ba-muted); }
.ba-breadcrumb li + li::before { content: "›"; margin-inline-end: 8px; opacity: .5; }
.ba-breadcrumb a { color: var(--ba-muted); text-decoration: none; }
.ba-breadcrumb a:hover { color: var(--ba-primary); text-decoration: underline; }

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

.ba-hero {
	padding-block: clamp(52px, 7vw, 96px);
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(44,47,142,.12) 0%, transparent 58%),
		var(--ba-surface);
	--ba-bleed: var(--ba-surface);
}

.ba-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	align-items: center;
}

@media (min-width: 900px) {
	.ba-hero__inner { grid-template-columns: 1.1fr .9fr; gap: 56px; }
}

.ba-eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	padding: 6px 14px;
	border-radius: 50em;
	background: rgba(44,47,142,.09);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ba-primary);
}

.ba-hero__title {
	margin: 0 0 .4em;
	font-size: clamp(32px, 5vw, 52px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--ba-deep);
}

.ba-hero__lead {
	max-width: 60ch;
	font-size: clamp(17px, 1.8vw, 20px);
	color: var(--ba-muted);
}

.ba-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.ba-hero__media { margin: 0; }

.ba-hero__media img {
	width: 100%;
	height: auto;
	border-radius: var(--ba-radius);
	box-shadow: 0 24px 60px rgba(0,46,66,.16);
}

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

.ba-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border: 2px solid transparent;
	border-radius: 50em;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.ba-btn:hover { transform: translateY(-2px); }

.ba-btn--primary { background: var(--ba-primary); color: #fff; }
.ba-btn--primary:hover { background: var(--ba-primary-dark); color: #fff; box-shadow: 0 10px 26px rgba(44,47,142,.3); }

.ba-btn--accent { background: var(--ba-accent); color: var(--ba-deep); }
.ba-btn--accent:hover { color: var(--ba-deep); box-shadow: 0 10px 26px rgba(250,213,91,.42); }

.ba-btn--ghost { border-color: var(--ba-primary); color: var(--ba-primary); }
.ba-btn--ghost:hover { background: var(--ba-primary); color: #fff; }

.ba-btn--ghost-light { border-color: rgba(255,255,255,.6); color: #fff; }
.ba-btn--ghost-light:hover { background: #fff; color: var(--ba-deep); }

/* ---------- Trust strip ---------- */

.ba-trust {
	padding-block: 30px;
	border-block: 1px solid var(--ba-line);
	background: #fff;
	--ba-bleed: #fff;
}

.ba-trust__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px 24px;
}

@media (min-width: 860px) {
	.ba-trust__grid { grid-template-columns: repeat(4, 1fr); }
}

.ba-trust__item { display: flex; flex-direction: column; gap: 2px; }
.ba-trust__item strong { font-size: 20px; font-weight: 700; color: var(--ba-primary); }
.ba-trust__item span { font-size: 14px; line-height: 1.45; color: var(--ba-muted); }

/* ---------- Sections ---------- */

.ba-section { padding-block: clamp(44px, 6vw, 82px); }
.ba-section--tint { background: var(--ba-surface); --ba-bleed: var(--ba-surface); }
/* Prose only. ba-steps is an <ol> and ba-checklist a <ul>; without excluding
   them the readable-measure cap collapsed the step row to ~74ch (~630px),
   which is why five cards could not sit side by side. */
.ba-section > .ba-wrap > p,
.ba-section > .ba-wrap > ul:not([class*="ba-"]),
.ba-section > .ba-wrap > ol:not([class*="ba-"]),
.ba-section > .ba-wrap > .ba-note {
	max-width: 74ch;
	margin-inline: auto;
}

/* Layout components always span the full content column. */
.ba-page .ba-steps,
.ba-page .ba-features,
.ba-page .ba-cards,
.ba-page .ba-solutions,
.ba-page .ba-caps,
.ba-page .ba-linkgrid,
.ba-page .ba-dodont,
.ba-page .ba-table-scroll {
	max-width: none;
	margin-inline: 0;
	padding-inline-start: 0;
}

.ba-page .ba-checklist { max-width: 74ch; margin-inline: auto; }

/* The same cap sits on sub-block children; exclude the components there too. */
.ba-page .ba-subblock > .ba-steps,
.ba-page .ba-subblock > .ba-features,
.ba-page .ba-subblock > .ba-cards,
.ba-page .ba-subblock > .ba-solutions { max-width: none; padding-inline-start: 0; }

.ba-page ul, .ba-page ol { padding-inline-start: 1.25em; }
.ba-page li { margin-bottom: .45em; }

/* ---------- Tables ---------- */

.ba-table-scroll {
	overflow-x: auto;
	margin: 1.5em 0;
	border: 1px solid var(--ba-line);
	border-radius: var(--ba-radius);
	-webkit-overflow-scrolling: touch;
}

.ba-table-scroll:focus-visible { outline: 2px solid var(--ba-primary); outline-offset: 2px; }

.ba-table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: 15px;
	background: #fff;
}

.ba-table caption {
	padding: 14px 18px;
	text-align: start;
	font-weight: 600;
	color: var(--ba-muted);
	border-bottom: 1px solid var(--ba-line);
}

.ba-table th, .ba-table td {
	padding: 13px 18px;
	text-align: start;
	vertical-align: top;
	border-bottom: 1px solid var(--ba-line);
}

.ba-table thead th {
	background: var(--ba-surface);
	font-weight: 700;
	color: var(--ba-deep);
	white-space: nowrap;
}

.ba-table tbody th { font-weight: 600; color: var(--ba-deep); }
.ba-table tbody tr:last-child th,
.ba-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Steps ---------- */

.ba-steps {
	counter-reset: ba-step;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	margin: 1.5em 0 0;
	padding: 0;
	list-style: none;
}

/* A row that does not fill (5 items across 3 columns) centres instead of
   hugging the left edge and leaving a hole. */
.ba-steps > .ba-steps__item { flex: 1 1 250px; }

/* Column count follows the number of steps so the last row is never ragged. */
@media (min-width: 640px) {
	.ba-steps > .ba-steps__item { flex: 0 1 calc((100% - 18px) / 2); }
}

@media (min-width: 940px) {
	.ba-steps--3 > .ba-steps__item,
	.ba-steps--5 > .ba-steps__item,
	.ba-steps--6 > .ba-steps__item { flex: 0 1 calc((100% - 36px) / 3); }
	.ba-steps--4 > .ba-steps__item { flex: 0 1 calc((100% - 54px) / 4); }
}

@media (min-width: 1180px) {
	.ba-steps--5 { gap: 12px; }
	.ba-steps--5 > .ba-steps__item { flex: 0 1 calc((100% - 50px) / 5); min-width: 0; }
	.ba-steps--6 > .ba-steps__item { flex: 0 1 calc((100% - 36px) / 3); }
}

/* Five abreast inside the 1220px wrap would give ~226px cards, which turned
   the row into tall narrow columns. The row is allowed to break out of the
   wrap on wide screens so each card gets roughly square proportions, and the
   badge moves above the title instead of sitting beside it. */
@media (min-width: 1180px) {
	.ba-page .ba-steps--5 > .ba-steps__item { padding: 24px 22px; }

	.ba-page .ba-steps--5 > .ba-steps__item::before {
		position: static;
		margin-bottom: 14px;
		width: 30px;
		height: 30px;
		font-size: 13px;
	}

	.ba-page .ba-steps--5 .ba-steps__title {
		min-height: 0;
		display: block;
		font-size: 16px;
		line-height: 1.3;
		margin-bottom: .5em;
	}

	.ba-page .ba-steps--5 .ba-steps__item p { font-size: 14.5px; line-height: 1.5; }
	.ba-page .ba-steps--5 .ba-steps__meta { font-size: 12px; padding: 4px 11px; }
}

/* Break out of the content column so five cards have room to be square. */
@media (min-width: 1320px) {
	.ba-page .ba-steps--5 {
		width: calc(100% + 200px);
		margin-inline: -100px;
	}
}

@media (min-width: 1560px) {
	.ba-page .ba-steps--5 {
		width: calc(100% + 320px);
		margin-inline: -160px;
	}
}



.ba-steps__item {
	counter-increment: ba-step;
	position: relative;
	padding: 24px 24px 24px 68px;
	border: 1px solid var(--ba-line);
	border-radius: var(--ba-radius);
	background: #fff;
	margin: 0;
}

.ba-steps__item::before {
	content: counter(ba-step);
	position: absolute;
	inset-inline-start: 22px;
	top: 22px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50em;
	background: var(--ba-primary);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}

.ba-steps__title { margin: 0 0 .35em; font-size: 17px; font-weight: 700; color: var(--ba-deep); }
.ba-steps__item p { font-size: 15px; color: var(--ba-muted); }
.ba-steps__meta {
	display: inline-block;
	margin-top: 10px;
	padding: 4px 12px;
	border-radius: 50em;
	background: var(--ba-surface);
	font-size: 13px;
	font-weight: 600;
	color: var(--ba-primary);
}

/* ---------- Problem/solution cards ---------- */

.ba-cards {
	display: grid;
	gap: 18px;
	margin-top: 1.5em;
}

@media (min-width: 760px) { .ba-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ba-cards { grid-template-columns: repeat(3, 1fr); } }

.ba-card {
	padding: 26px;
	border: 1px solid var(--ba-line);
	border-radius: var(--ba-radius);
	background: #fff;
}

.ba-card__title {
	margin: 0 0 .7em;
	padding-bottom: .55em;
	border-bottom: 2px solid var(--ba-accent);
	font-size: 18px;
	font-weight: 700;
	color: var(--ba-deep);
}

.ba-card p { font-size: 15px; line-height: 1.6; }
.ba-card__problem { color: var(--ba-muted); }
.ba-card__solution { color: var(--ba-ink); margin-bottom: 0; }

.ba-card__problem span,
.ba-card__solution span {
	display: block;
	margin-bottom: 3px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ba-card__problem span { color: #b0637a; }
.ba-card__solution span { color: var(--ba-primary); }

/* ---------- Figures ---------- */

.ba-figure { margin: 1.8em 0; }

.ba-figure img {
	width: 100%;
	height: auto;
	border-radius: var(--ba-radius);
}

.ba-figure figcaption {
	margin-top: 10px;
	font-size: 14px;
	color: var(--ba-muted);
}

/* ---------- CTA band ---------- */

.ba-ctaband {
	padding-block: clamp(40px, 5.5vw, 68px);
	background: linear-gradient(120deg, var(--ba-deep) 0%, var(--ba-primary) 100%);
	color: #fff;
	--ba-bleed: var(--ba-primary);
}

.ba-ctaband__inner {
	display: grid;
	gap: 24px;
	align-items: center;
}

@media (min-width: 900px) {
	.ba-ctaband__inner { grid-template-columns: 1.4fr auto; }
}

.ba-ctaband__title { margin: 0 0 .4em; font-size: clamp(22px, 2.8vw, 30px); font-weight: 700; color: #fff; }
.ba-ctaband__text { margin: 0; color: rgba(255,255,255,.82); max-width: 62ch; }
.ba-ctaband__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Link cards ---------- */

.ba-section--links { background: var(--ba-surface); --ba-bleed: var(--ba-surface); }

.ba-linkgrid {
	display: grid;
	gap: 16px;
	margin-top: 1.4em;
}

@media (min-width: 700px) { .ba-linkgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .ba-linkgrid { grid-template-columns: repeat(3, 1fr); } }

.ba-linkcard {
	display: block;
	padding: 22px 24px;
	border: 1px solid var(--ba-line);
	border-radius: var(--ba-radius);
	background: #fff;
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.ba-linkcard:hover {
	border-color: var(--ba-primary);
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(0,46,66,.1);
}

.ba-linkcard__title {
	display: block;
	margin-bottom: 6px;
	font-size: 17px;
	font-weight: 700;
	color: var(--ba-primary);
}

.ba-linkcard__text { display: block; font-size: 14.5px; line-height: 1.55; color: var(--ba-muted); }

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

.ba-faq { background: #fff; --ba-bleed: #fff; }

.ba-accordion {
	margin-top: 1.4em;
	border: 1px solid var(--ba-line);
	border-radius: var(--ba-radius);
	overflow: hidden;
}

.ba-accordion__item + .ba-accordion__item { border-top: 1px solid var(--ba-line); }

.ba-accordion__q {
	padding: 20px 56px 20px 24px;
	position: relative;
	cursor: pointer;
	font-size: 17px;
	font-weight: 600;
	color: var(--ba-deep);
	list-style: none;
}

.ba-accordion__q::-webkit-details-marker { display: none; }

.ba-accordion__q::after {
	content: "";
	position: absolute;
	inset-inline-end: 24px;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -7px;
	border-inline-end: 2px solid var(--ba-primary);
	border-bottom: 2px solid var(--ba-primary);
	transform: rotate(45deg);
	transition: transform .25s ease;
}

.ba-accordion__item[open] .ba-accordion__q::after { transform: rotate(-135deg); margin-top: -2px; }
.ba-accordion__q:hover { background: var(--ba-surface); }
.ba-accordion__q:focus-visible { outline: 2px solid var(--ba-primary); outline-offset: -2px; }

.ba-accordion__a { padding: 0 24px 22px; font-size: 16px; color: var(--ba-muted); }
.ba-accordion__a p:last-child { margin-bottom: 0; }

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

.ba-quote { background: var(--ba-surface); --ba-bleed: var(--ba-surface); }

.ba-quote__inner {
	display: grid;
	gap: 36px;
	align-items: start;
}

@media (min-width: 940px) {
	.ba-quote__inner { grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; }

	/* The intro column is much shorter than the form, which left a large gap
	   beneath it. Making it sticky keeps the contact details in view while the
	   form is filled in, instead of stranding them at the top. */
	.ba-page .ba-quote__intro { position: sticky; top: 24px; }
}

.ba-quote__list { margin: 1.2em 0; padding-inline-start: 0; list-style: none; }

.ba-quote__list li {
	padding-inline-start: 26px;
	position: relative;
	font-size: 15.5px;
	color: var(--ba-muted);
}

.ba-quote__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: .55em;
	width: 8px;
	height: 8px;
	border-radius: 50em;
	background: var(--ba-accent);
}

.ba-quote__direct { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 1.2em; font-weight: 600; }
.ba-quote__direct a { text-decoration: none; }
.ba-quote__direct a:hover { text-decoration: underline; }

.ba-quote__form {
	padding: 28px;
	border: 1px solid var(--ba-line);
	border-radius: var(--ba-radius);
	background: #fff;
}

.ba-quote__form input[type="text"],
.ba-quote__form input[type="email"],
.ba-quote__form input[type="tel"],
.ba-quote__form input[type="number"],
.ba-quote__form textarea,
.ba-quote__form select {
	width: 100%;
	padding: 12px 14px;
	margin-bottom: 14px;
	border: 1px solid var(--ba-line);
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 15px;
	color: var(--ba-ink);
}

.ba-quote__form input:focus,
.ba-quote__form textarea:focus,
.ba-quote__form select:focus {
	border-color: var(--ba-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(44,47,142,.12);
}

.ba-quote__form input[type="submit"],
.ba-quote__form button[type="submit"] {
	width: auto;
	padding: 14px 32px;
	border: 0;
	border-radius: 50em;
	background: var(--ba-primary);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s ease;
}

.ba-quote__form input[type="submit"]:hover,
.ba-quote__form button[type="submit"]:hover { background: var(--ba-primary-dark); }

.ba-quote__fallback {
	padding: 20px;
	border: 1px dashed var(--ba-line);
	border-radius: 10px;
	background: var(--ba-surface);
	font-size: 15px;
	color: var(--ba-muted);
}

.ba-quote__fallback code {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 5px;
	background: #fff;
	font-size: 13.5px;
	color: var(--ba-primary);
}

/* ---------- Address / map (Kocaeli only) ---------- */

.ba-plants { display: grid; gap: 18px; margin-top: 1.5em; }
@media (min-width: 760px) { .ba-plants { grid-template-columns: repeat(2, 1fr); } }

.ba-plant {
	padding: 26px;
	border: 1px solid var(--ba-line);
	border-inline-start: 4px solid var(--ba-accent);
	border-radius: var(--ba-radius);
	background: #fff;
}

.ba-plant h3 { margin: 0 0 .5em; font-size: 18px; font-weight: 700; color: var(--ba-deep); }
.ba-plant address { font-style: normal; font-size: 15.5px; color: var(--ba-muted); }

.ba-map { margin-top: 1.6em; border-radius: var(--ba-radius); overflow: hidden; border: 1px solid var(--ba-line); }
.ba-map iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ---------- Notice ---------- */

.ba-note {
	padding: 18px 22px;
	margin: 1.5em 0;
	border-inline-start: 4px solid var(--ba-primary);
	border-radius: 0 10px 10px 0;
	background: var(--ba-surface);
	font-size: 15.5px;
	color: var(--ba-muted);
}

.ba-note strong { color: var(--ba-deep); }

/* ---------- Checklist ---------- */

.ba-checklist { margin: 1.4em 0; padding-inline-start: 0; list-style: none; }

.ba-checklist li {
	position: relative;
	padding: 12px 12px 12px 44px;
	border-bottom: 1px solid var(--ba-line);
	font-size: 15.5px;
}

.ba-checklist li:last-child { border-bottom: 0; }

.ba-checklist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 12px;
	top: 17px;
	width: 16px;
	height: 9px;
	border-inline-start: 2.5px solid var(--ba-primary);
	border-bottom: 2.5px solid var(--ba-primary);
	transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	.ba-page *, .ba-page *::before, .ba-page *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* ---------- Pasted blocks on existing Elementor pages ---------- */

.ba-block { /* inherits every .ba-page token */ }
.ba-block .ba-section { padding-block: clamp(30px, 4vw, 48px); }
.ba-block .ba-section:nth-of-type(even) { background: transparent; }
.ba-block .ba-wrap { padding-inline: 0; max-width: none; }

/* ---------- Theme title bar ----------
   batiambalaj/init.php switches the title bar off through the theme's own
   option, which is the clean path. If an Elementor page setting overrides that
   option the bar can still render; hide just its inner band. The site header is
   a sibling inside .titlebar, so it is untouched. */

body.ba-has-template .titlebar-inner { display: none; }
body.ba-has-template .titlebar { min-height: 0; padding: 0; background-image: none; }
body.ba-has-template .titlebar-overlay { display: none; }

/* ---------- Contact bar ---------- */

.ba-contactbar {
	padding-block: 20px;
	background: var(--ba-deep);
	color: #fff;
	--ba-bleed: var(--ba-deep);
}

.ba-contactbar__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	align-items: stretch;
}

@media (min-width: 560px) {
	.ba-contactbar__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	.ba-contactbar__inner { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}

.ba-contactbar__item {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 8px 16px;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 10px;
	text-decoration: none;
	color: #fff;
	transition: background-color .2s ease, border-color .2s ease;
}

.ba-contactbar__item:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); color: #fff; }
.ba-contactbar__item--wa { border-color: rgba(250,213,91,.7); }
.ba-contactbar__item--wa:hover { background: var(--ba-accent); color: var(--ba-deep); }
.ba-contactbar__item--wa:hover .ba-contactbar__label { color: rgba(0,46,66,.7); }

.ba-contactbar__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255,255,255,.6);
}

.ba-contactbar__value { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ba-contactbar__note {
	grid-column: 1 / -1;
	padding-top: 2px;
	font-size: 14.5px;
	line-height: 1.5;
	color: rgba(255,255,255,.75);
}

@media (min-width: 1240px) {
	.ba-contactbar__note {
		grid-column: auto;
		align-self: center;
		padding-top: 0;
		padding-inline-start: 6px;
	}
}

/* ---------- Inline CTA ---------- */

.ba-inlinecta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 28px;
	align-items: center;
	justify-content: space-between;
	padding: 24px 28px;
	margin: 2em 0;
	border: 1px solid var(--ba-line);
	border-inline-start: 4px solid var(--ba-accent);
	border-radius: var(--ba-radius);
	background: #fff;
}

.ba-inlinecta__text { flex: 1 1 320px; }
.ba-inlinecta__text strong { display: block; margin-bottom: 4px; font-size: 17px; color: var(--ba-deep); }
.ba-inlinecta__text span { font-size: 15px; color: var(--ba-muted); }

.ba-inlinecta__actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.ba-inlinecta__phone { font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ba-inlinecta__phone:hover { text-decoration: underline; }

/* ---------- Reassurance ---------- */

.ba-reassure { background: var(--ba-surface); --ba-bleed: var(--ba-surface); }

.ba-reassure__grid {
	display: grid;
	gap: 18px;
	margin-top: 1.4em;
}

@media (min-width: 700px)  { .ba-reassure__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .ba-reassure__grid { grid-template-columns: repeat(4, 1fr); } }

.ba-reassure__item {
	padding: 24px;
	border-radius: var(--ba-radius);
	background: #fff;
	border: 1px solid var(--ba-line);
}

.ba-reassure__item h3 { margin: 0 0 .5em; font-size: 16.5px; font-weight: 700; color: var(--ba-primary); }
.ba-reassure__item p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ba-muted); }

/* ---------- Sticky mobile actions ---------- */

.ba-sticky {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 9990;
	display: none;
	gap: 1px;
	background: var(--ba-line);
	box-shadow: 0 -6px 22px rgba(0,46,66,.14);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.ba-sticky__btn {
	flex: 1;
	padding: 15px 8px;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	background: #fff;
	color: var(--ba-deep);
}

.ba-sticky__btn--call  { background: var(--ba-primary); color: #fff; }
.ba-sticky__btn--wa    { background: var(--ba-accent); color: var(--ba-deep); }
.ba-sticky__btn--quote { background: var(--ba-deep); color: #fff; }

@media (max-width: 860px) {
	.ba-sticky { display: flex; }
	body.ba-has-template { padding-bottom: 56px; }
}

@media print { .ba-sticky { display: none !important; } }

/* ---------- Component colour authority ----------
   Declared with `.ba-page` in front so no generic link rule — ours, the
   theme's, or Elementor's kit — can win over a button's own colour. */

.ba-page .ba-btn--primary,
.ba-page .ba-btn--primary:hover,
.ba-page .ba-btn--primary:focus  { color: #fff; }

.ba-page .ba-btn--accent,
.ba-page .ba-btn--accent:hover,
.ba-page .ba-btn--accent:focus   { color: var(--ba-deep); }

.ba-page .ba-btn--ghost          { color: var(--ba-primary); }
.ba-page .ba-btn--ghost:hover    { color: #fff; }

.ba-page .ba-btn--ghost-light    { color: #fff; }
.ba-page .ba-btn--ghost-light:hover { color: var(--ba-deep); }

.ba-page .ba-contactbar__item,
.ba-page .ba-contactbar__item:hover { color: #fff; }
.ba-page .ba-contactbar__item--wa:hover { color: var(--ba-deep); }

.ba-page .ba-sticky__btn--call,
.ba-page .ba-sticky__btn--quote  { color: #fff; }
.ba-page .ba-sticky__btn--wa     { color: var(--ba-deep); }

.ba-page .ba-linkcard            { color: inherit; }
.ba-page .ba-breadcrumb a        { color: var(--ba-muted); text-decoration: none; }
.ba-page .ba-breadcrumb a:hover  { color: var(--ba-primary); text-decoration: underline; }
.ba-page .ba-quote__direct a     { color: var(--ba-primary); text-decoration: none; }
.ba-page .ba-quote__direct a:hover { text-decoration: underline; }
.ba-page .ba-inlinecta__phone    { color: var(--ba-primary); }

/* Prose links inside the dark CTA band must stay legible */
.ba-page .ba-ctaband p a,
.ba-page .ba-ctaband li a { color: var(--ba-accent); }

/* ---------- Typography tightening in dense blocks ----------
   The page line-height (1.65) is right for running prose but too airy inside
   cards and step boxes, where it made short paragraphs look stretched. */

.ba-page .ba-steps__item p,
.ba-page .ba-card p,
.ba-page .ba-reassure__item p,
.ba-page .ba-linkcard__text { line-height: 1.5; }

.ba-page .ba-steps__item {
	padding: 22px 22px 22px 62px;
	display: flex;
	flex-direction: column;
}

.ba-page .ba-steps__item::before { inset-inline-start: 18px; top: 20px; }
.ba-page .ba-steps__title { min-height: 32px; display: flex; align-items: center; }
.ba-page .ba-steps__meta { margin-top: auto; align-self: flex-start; }

/* Equal-height cards so a short item does not leave a ragged row */
.ba-page .ba-cards,
.ba-page .ba-reassure__grid { align-items: stretch; }
.ba-page .ba-card,
.ba-page .ba-reassure__item { display: flex; flex-direction: column; }
.ba-page .ba-card__solution { margin-top: auto; }

/* Hero: keep the lead readable, stop the buttons from stretching on mobile */
.ba-page .ba-hero__lead { line-height: 1.55; }
.ba-page .ba-hero__actions .ba-btn,
.ba-page .ba-ctaband__actions .ba-btn { flex: 0 0 auto; }

@media (max-width: 460px) {
	.ba-page .ba-hero__actions,
	.ba-page .ba-ctaband__actions,
	.ba-page .ba-inlinecta__actions { width: 100%; }
	.ba-page .ba-hero__actions .ba-btn,
	.ba-page .ba-ctaband__actions .ba-btn,
	.ba-page .ba-inlinecta__actions .ba-btn { flex: 1 1 100%; }
}

/* Trust strip: two clear lines, never a broken phrase */
.ba-page .ba-trust__item strong { font-size: 18px; line-height: 1.25; }
.ba-page .ba-trust__item span   { font-size: 13.5px; line-height: 1.4; }

/* ---------- Centred section headings ----------
   The heading and its single intro line are centred; running prose stays
   left-aligned, because centred body copy is measurably harder to read. */

.ba-page .ba-h2 {
	text-align: center;
	max-width: 22ch;
	margin-inline: auto;
	margin-bottom: .6em;
}

@media (min-width: 760px) { .ba-page .ba-h2 { max-width: 30ch; } }

.ba-page .ba-lead,
.ba-page .ba-section > .ba-wrap > .ba-h2 + p {
	max-width: 66ch;
	margin-inline: auto;
	margin-bottom: 1.5em;
	text-align: center;
	font-size: 1.05em;
	color: var(--ba-muted);
}

.ba-page .ba-section > .ba-wrap > .ba-h2 + p:last-child { margin-bottom: 0; }

/* Section headings keep their own alignment inside the hero and CTA band */
.ba-page .ba-ctaband__title { text-align: center; max-width: none; }

@media (min-width: 900px) {
	.ba-page .ba-ctaband__title,
	.ba-page .ba-ctaband__text { text-align: start; }
}

/* ---------- Feature boxes ---------- */

.ba-features {
	display: grid;
	gap: 18px;
	margin-top: 1.6em;
}

@media (min-width: 700px)  { .ba-features--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px)  { .ba-features--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .ba-features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ba-feature {
	display: flex;
	flex-direction: column;
	padding: 26px 26px 24px;
	border: 1px solid var(--ba-line);
	border-radius: var(--ba-radius);
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.ba-feature:hover { border-color: rgba(44,47,142,.35); box-shadow: 0 12px 28px rgba(0,46,66,.07); }

.ba-feature__title {
	margin: 0 0 .6em;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--ba-deep);
}

.ba-feature p {
	margin: 0 0 .7em;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--ba-muted);
}

.ba-feature p:last-of-type { margin-bottom: 0; }
.ba-feature__lead { color: var(--ba-ink) !important; font-weight: 600; }

.ba-feature__meta {
	display: inline-block;
	align-self: flex-start;
	margin-top: 14px;
	padding: 5px 13px;
	border-radius: 50em;
	background: var(--ba-surface);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ba-primary);
}

/* Numbered variant — the badge replaces a bare "1." in the heading text */
.ba-features--numbered { counter-reset: ba-feature; }

.ba-features--numbered .ba-feature {
	counter-increment: ba-feature;
	padding-top: 56px;
	position: relative;
}

.ba-features--numbered .ba-feature::before {
	content: counter(ba-feature);
	position: absolute;
	top: 24px;
	inset-inline-start: 26px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50em;
	background: var(--ba-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

/* ---------- Do / don't ---------- */

.ba-dodont {
	display: grid;
	gap: 18px;
	margin: 1.6em 0;
}

@media (min-width: 760px) { .ba-dodont { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ba-dodont__col {
	padding: 26px;
	border: 1px solid var(--ba-line);
	border-radius: var(--ba-radius);
	background: #fff;
}

.ba-dodont__col h3 {
	margin: 0 0 .8em;
	padding-bottom: .55em;
	border-bottom: 2px solid var(--ba-line);
	font-size: 17px;
	font-weight: 700;
}

.ba-dodont__col--do h3   { color: var(--ba-primary); border-bottom-color: var(--ba-primary); }
.ba-dodont__col--dont h3 { color: #a2566c; border-bottom-color: #e4bcc7; }

.ba-dodont ul { margin: 0; padding-inline-start: 22px; }
.ba-dodont li { font-size: 15.5px; line-height: 1.55; color: var(--ba-muted); margin-bottom: .55em; }
.ba-dodont li:last-child { margin-bottom: 0; }

/* ---------- Ragged last rows ----------
   Feature and problem-card grids use the same centring trick as the steps, so
   a 5-of-3 or 4-of-3 layout never leaves a hole on the right. */

.ba-page .ba-features,
.ba-page .ba-cards,
.ba-page .ba-reassure__grid,
.ba-page .ba-linkgrid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
}

.ba-page .ba-features > *,
.ba-page .ba-cards > *,
.ba-page .ba-reassure__grid > *,
.ba-page .ba-linkgrid > * { flex: 1 1 280px; }

@media (min-width: 700px) {
	.ba-page .ba-features--2 > *,
	.ba-page .ba-cards > *,
	.ba-page .ba-linkgrid > * { flex: 0 1 calc((100% - 18px) / 2); }
	.ba-page .ba-reassure__grid > * { flex: 0 1 calc((100% - 18px) / 2); }
}

@media (min-width: 1020px) {
	.ba-page .ba-features--3 > *,
	.ba-page .ba-cards > *,
	.ba-page .ba-linkgrid > * { flex: 0 1 calc((100% - 36px) / 3); }
}

@media (min-width: 1060px) {
	.ba-page .ba-reassure__grid > * { flex: 0 1 calc((100% - 54px) / 4); }
}

/* ---------- Intro sections ----------
   An opening section is prose, not cards. Keep it a single centred column at a
   comfortable measure so it never reads as a full-width wall of text. */

.ba-page .ba-section--intro > .ba-wrap > p { max-width: 70ch; }

.ba-page .ba-section--intro > .ba-wrap > p + p { margin-top: -.2em; }

/* ---------- H3 sub-blocks ----------
   Every H3 and the copy under it becomes its own card, so a section made of
   several H3 runs no longer reads as one long column of text. */

.ba-page .ba-subblock {
	padding: 26px 28px;
	margin: 0 auto 16px;
	max-width: 900px;
	border: 1px solid var(--ba-line);
	border-radius: var(--ba-radius);
	background: #fff;
}

.ba-page .ba-section--tint .ba-subblock { background: #fff; }

.ba-page .ba-subblock > .ba-h3 {
	margin-top: 0;
	margin-bottom: .55em;
	padding-bottom: .5em;
	border-bottom: 2px solid var(--ba-accent);
	font-size: 19px;
	color: var(--ba-deep);
}

.ba-page .ba-subblock > p { max-width: none; margin-inline: 0; }
.ba-page .ba-subblock > p:last-child { margin-bottom: 0; }
.ba-page .ba-subblock > ul,
.ba-page .ba-subblock > ol { max-width: none; margin-inline: 0; }
.ba-page .ba-subblock > .ba-table-scroll:last-child,
.ba-page .ba-subblock > .ba-figure:last-child { margin-bottom: 0; }
.ba-page .ba-subblock > .ba-checklist { margin-block: 1em 0; }

/* Two abreast on wide screens when a section has several short blocks */
@media (min-width: 1100px) {
	.ba-page .ba-section--pair > .ba-wrap {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 18px;
	}
	.ba-page .ba-section--pair > .ba-wrap > .ba-h2,
	.ba-page .ba-section--pair > .ba-wrap > .ba-lead,
	.ba-page .ba-section--pair > .ba-wrap > .ba-h2 + p { grid-column: 1 / -1; }
	.ba-page .ba-section--pair .ba-subblock { max-width: none; margin-bottom: 0; }
}

/* ---------- Solution cards ---------- */

.ba-page .ba-solutions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	margin-top: 1.6em;
}

.ba-page .ba-solutions > * { flex: 1 1 300px; }

@media (min-width: 760px)  { .ba-page .ba-solutions > * { flex: 0 1 calc((100% - 18px) / 2); } }
@media (min-width: 1080px) { .ba-page .ba-solutions > * { flex: 0 1 calc((100% - 36px) / 3); } }

.ba-solution {
	display: flex;
	flex-direction: column;
	padding: 26px;
	border: 1px solid var(--ba-line);
	border-top: 3px solid var(--ba-primary);
	border-radius: var(--ba-radius);
	background: #fff;
	transition: box-shadow .2s ease, transform .2s ease;
}

.ba-solution:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,46,66,.09); }

.ba-solution__title {
	margin: 0 0 .6em;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ba-deep);
}

.ba-solution__text { margin: 0 0 1em; font-size: 15px; line-height: 1.55; color: var(--ba-muted); }

.ba-solution__list { margin: 0 0 1em; padding-inline-start: 0; list-style: none; }

.ba-solution__list li {
	position: relative;
	padding-inline-start: 22px;
	margin-bottom: .5em;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ba-ink);
}

.ba-solution__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 2px;
	top: .52em;
	width: 11px;
	height: 6px;
	border-inline-start: 2px solid var(--ba-primary);
	border-bottom: 2px solid var(--ba-primary);
	transform: rotate(-45deg);
}

.ba-solution__benefit {
	margin: auto 0 0;
	padding-top: .9em;
	border-top: 1px solid var(--ba-line);
	font-size: 14.5px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--ba-primary);
}

/* ---------- Capability row ---------- */

.ba-page .ba-caps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	margin-top: 1.6em;
}

.ba-page .ba-caps > * { flex: 1 1 220px; }

@media (min-width: 700px)  { .ba-page .ba-caps > * { flex: 0 1 calc((100% - 18px) / 2); } }
@media (min-width: 1040px) { .ba-page .ba-caps > * { flex: 0 1 calc((100% - 54px) / 4); } }

.ba-caps__item {
	padding: 26px 24px;
	border-radius: var(--ba-radius);
	background: #fff;
	border: 1px solid var(--ba-line);
	text-align: center;
}

.ba-caps__figure {
	display: block;
	margin-bottom: .35em;
	font-size: clamp(24px, 3vw, 30px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--ba-primary);
}

.ba-caps__title { margin: 0 0 .45em; font-size: 16px; font-weight: 700; color: var(--ba-deep); }
.ba-caps__item p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ba-muted); }

/* ---------- Quote form fields (Contact Form 7) ----------
   Markup lives in the CF7 form editor; these styles make it match the page. */

.ba-page .ba-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 16px;
}

@media (min-width: 520px) {
	.ba-page .ba-form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ba-page .ba-form__field { margin: 0 0 16px; }

.ba-page .ba-form__field label {
	display: block;
	margin-bottom: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ba-deep);
}

.ba-page .ba-form__req { color: #b5485f; font-weight: 700; }

.ba-page .ba-form__hint {
	display: block;
	margin-top: 5px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--ba-muted);
}

.ba-page .ba-quote__form textarea { min-height: 110px; resize: vertical; }

/* Native controls CF7 prints */
.ba-page .ba-quote__form .wpcf7-form-control-wrap { display: block; }

/* The theme and Elementor both ship their own select styling, so this rule
   restates every property rather than relying on the shorter selector above. */
.ba-page .ba-quote__form select,
.ba-page .ba-quote__form select.wpcf7-select,
.ba-page .ba-quote__form .wpcf7-form-control-wrap select {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	padding: 12px 38px 12px 14px;
	margin: 0;
	border: 1px solid var(--ba-line);
	border-radius: 8px;
	background-color: #fff;
	background-image: linear-gradient(45deg, transparent 50%, var(--ba-primary) 50%),
	                  linear-gradient(135deg, var(--ba-primary) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	font: inherit;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ba-ink);
	box-shadow: none;
	cursor: pointer;
}

.ba-page .ba-quote__form select:focus {
	border-color: var(--ba-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(44,47,142,.12);
}

/* File upload */
.ba-page .ba-quote__form input[type="file"] {
	width: 100%;
	padding: 11px 14px;
	border: 1px dashed var(--ba-line);
	border-radius: 8px;
	background: var(--ba-surface);
	font: inherit;
	font-size: 14px;
	color: var(--ba-muted);
	cursor: pointer;
}

.ba-page .ba-quote__form input[type="file"]:hover { border-color: var(--ba-primary); }

.ba-page .ba-quote__form input[type="file"]::file-selector-button {
	margin-inline-end: 12px;
	padding: 7px 14px;
	border: 0;
	border-radius: 50em;
	background: var(--ba-primary);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
}

/* Consent checkbox */
.ba-page .ba-quote__form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }

.ba-page .ba-quote__form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ba-muted);
	cursor: pointer;
}

.ba-page .ba-quote__form .wpcf7-acceptance input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin-top: 1px;
	accent-color: var(--ba-primary);
}

.ba-page .ba-quote__form .wpcf7-acceptance a { color: var(--ba-primary); text-decoration: underline; }

/* Validation and response messages */
.ba-page .ba-quote__form .wpcf7-not-valid-tip {
	margin-top: 5px;
	font-size: 12.5px;
	font-weight: 600;
	color: #b5485f;
}

.ba-page .ba-quote__form .wpcf7-not-valid { border-color: #d9a3af; }

.ba-page .ba-quote__form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 13px 16px;
	border: 1px solid var(--ba-line);
	border-radius: 8px;
	font-size: 14.5px;
	line-height: 1.5;
}

.ba-page .ba-quote__form form.sent .wpcf7-response-output {
	border-color: #9fc6a8;
	background: #f1f8f2;
	color: #2b5d38;
}

.ba-page .ba-quote__form form.invalid .wpcf7-response-output,
.ba-page .ba-quote__form form.failed .wpcf7-response-output,
.ba-page .ba-quote__form form.aborted .wpcf7-response-output {
	border-color: #d9a3af;
	background: #fdf2f4;
	color: #8d3547;
}

.ba-page .ba-quote__form .wpcf7-spinner { margin-inline-start: 12px; }

/* Submit row */
.ba-page .ba-form__submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--ba-line);
}

.ba-page .ba-form__submit-note { margin: 0; font-size: 13px; color: var(--ba-muted); }

/* =========================================================================
   MOBILE PASS
   Desktop padding and type were carried straight down to phone widths, which
   left too little room for content. Everything below only narrows spacing and
   steps type down — no layout is restructured, so desktop is untouched.
   ====================================================================== */

@media (max-width: 620px) {

	.ba-page { font-size: 16px; }
	.ba-wrap { padding-inline: 16px; }

	.ba-page .ba-section { padding-block: 34px; }
	.ba-page .ba-hero { padding-block: 34px 38px; }

	.ba-page .ba-h2 { max-width: none; font-size: 25px; }
	.ba-page .ba-h3 { font-size: 18px; }
	.ba-page .ba-lead,
	.ba-page .ba-section > .ba-wrap > .ba-h2 + p { font-size: 16px; margin-bottom: 1.2em; }

	/* Boxes: 26–28px of padding is a lot of a 360px screen */
	.ba-page .ba-subblock,
	.ba-page .ba-feature,
	.ba-page .ba-card,
	.ba-page .ba-solution,
	.ba-page .ba-reassure__item,
	.ba-page .ba-caps__item,
	.ba-page .ba-linkcard,
	.ba-page .ba-plant,
	.ba-page .ba-dodont__col { padding: 20px 18px; }

	.ba-page .ba-quote__form { padding: 20px 18px; }
	.ba-page .ba-inlinecta { padding: 20px 18px; }

	.ba-page .ba-steps__item { padding: 20px 18px 20px 56px; }
	.ba-page .ba-steps__item::before { inset-inline-start: 16px; top: 18px; }
	.ba-page .ba-steps__title { min-height: 30px; }

	/* Full-width buttons read better than two half-width ones */
	.ba-page .ba-hero__actions,
	.ba-page .ba-ctaband__actions,
	.ba-page .ba-inlinecta__actions { width: 100%; }
	.ba-page .ba-hero__actions .ba-btn,
	.ba-page .ba-ctaband__actions .ba-btn,
	.ba-page .ba-inlinecta__actions .ba-btn { flex: 1 1 100%; }

	.ba-page .ba-accordion__q { padding: 16px 44px 16px 18px; font-size: 16px; }
	.ba-page .ba-accordion__q::after { inset-inline-end: 18px; }
	.ba-page .ba-accordion__a { padding: 0 18px 18px; font-size: 15px; }

	.ba-page .ba-table { min-width: 520px; font-size: 14px; }
	.ba-page .ba-table th,
	.ba-page .ba-table td { padding: 11px 14px; }
	.ba-page .ba-table caption { padding: 12px 14px; font-size: 14px; }

	.ba-page .ba-breadcrumb { padding-block: 14px; font-size: 13px; }
	.ba-page .ba-map iframe { height: 280px; }
	.ba-page .ba-figure { margin-block: 1.4em; }

	.ba-page .ba-contactbar__value { font-size: 15px; }
	.ba-page .ba-trust { padding-block: 22px; }
	.ba-page .ba-ctaband { padding-block: 32px; }
}

@media (max-width: 400px) {
	.ba-page .ba-wrap { padding-inline: 14px; }
	.ba-page .ba-h2 { font-size: 23px; }
	.ba-page .ba-hero__title { font-size: 30px; }
	.ba-page .ba-btn { padding: 13px 20px; font-size: 14.5px; }
	.ba-page .ba-subblock,
	.ba-page .ba-feature,
	.ba-page .ba-card,
	.ba-page .ba-solution { padding: 18px 16px; }
}

/* A scrollable table needs to look scrollable. The fade only shows while there
   is more content to the right. */
.ba-page .ba-table-scroll {
	background:
		linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 40px 100% no-repeat,
		linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right center / 40px 100% no-repeat,
		radial-gradient(farthest-side at 0 50%, rgba(0,46,66,.14), transparent) left center / 14px 100% no-repeat,
		radial-gradient(farthest-side at 100% 50%, rgba(0,46,66,.14), transparent) right center / 14px 100% no-repeat;
	background-attachment: local, local, scroll, scroll;
}

/* Nothing may push the document sideways on a phone */
@media (max-width: 860px) {
	.ba-page .ba-steps--5 { width: auto; margin-inline: 0; }
	.ba-page img, .ba-page iframe, .ba-page table { max-width: 100%; }
}

/* ---------- jQuery UI selectmenu fallback ----------
   batiambalaj/init.php keeps the native <select> by adding the class that
   theme.js excludes. If the widget still gets built — a cached page, or the
   exclusion list changing in a theme update — these rules make it look like
   the rest of the form instead of bare text. */

.ba-page .ba-quote__form .ui-selectmenu-button.ui-button {
	display: flex !important;
	align-items: center;
	width: 100% !important;
	height: auto !important;
	padding: 12px 38px 12px 14px !important;
	margin: 0;
	border: 1px solid var(--ba-line) !important;
	border-radius: 8px !important;
	background: #fff !important;
	font: inherit !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: var(--ba-ink) !important;
	text-align: start;
	box-shadow: none !important;
}

.ba-page .ba-quote__form .ui-selectmenu-button.ui-button:hover,
.ba-page .ba-quote__form .ui-selectmenu-button.ui-button:focus {
	border-color: var(--ba-primary) !important;
	outline: none;
}

.ba-page .ba-quote__form .ui-selectmenu-button .ui-selectmenu-icon {
	order: 1;
	margin-inline-start: auto;
	color: var(--ba-primary);
}

.ba-page .ba-quote__form .ui-selectmenu-button .ui-selectmenu-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ba-page .ba-quote__form .ui-selectmenu-menu .ui-menu {
	border: 1px solid var(--ba-line);
	border-radius: 8px;
	background: #fff;
	font-size: 15px;
	box-shadow: 0 14px 34px rgba(0,46,66,.13);
}

.ba-page .ba-quote__form .ui-selectmenu-menu .ui-menu-item-wrapper { padding: 10px 14px; }

.ba-page .ba-quote__form .ui-selectmenu-menu .ui-menu-item-wrapper.ui-state-active {
	background: var(--ba-primary);
	color: #fff;
	border: 0;
	margin: 0;
}