/*
 * SU-PAD contact form (2026 redesign) — see inc/contact-form.php.
 * Figma: SU-PAD 3120:511 (contact page card), 3053:3100 (band above the footer),
 * 3445:3954 (single-column form metrics).
 *
 * The form (CF7 #148) is also embedded in legacy boxes. Their rules in the child
 * style.css force colours, backgrounds and borders with !important, which is why
 * the same properties carry !important here:
 *  - .su_sidebar_form input / textarea / input[type=submit], #custom_html-2 .wpcf7-form-control-wrap
 *  - #custom_html-2 span { display: inline-block } (hits every span in the sidebar widget, hence display !important on spans)
 *  - .zs_footer_contact input / textarea / input[type=submit]
 *  - .wpcf7-list-item, .wpcf7-list-item-label (margins, white floated labels)
 *  - .wpcf7-response-output (red, floated, centred)
 * Two other stylesheets are answered as well:
 *  - Contact Form 7 Multi-Step, cf7mls.css: a red box on every .wpcf7-not-valid, opacity .8 on every submit hover
 *  - Divi: :focus { outline: 0 } on everything, .et_pb_widget li a:hover recolours links in the sidebar
 */

.supad-cf,
.supad-form {
	--supad-navy: #292f6e;
	--supad-green: #6bba49;
	--supad-green-2: #6ebe49;
	--supad-hero: linear-gradient(90deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), linear-gradient(90deg, #01001d 0%, #050d42 55%, #0d2a6e 100%);
	direction: rtl;
	text-align: right;
	font-family: 'Rubik', Helvetica, Arial, sans-serif;
	color: var(--supad-navy);
	box-sizing: border-box;
}
.supad-cf *, .supad-cf *::before, .supad-cf *::after,
.supad-form *, .supad-form *::before, .supad-form *::after { box-sizing: border-box; }

/* ---------- the form: one column on a white panel wherever it is embedded ---------- */
.supad-form { padding: 24px; border-radius: 12px; background: #fff; }
.supad-cf .wpcf7 { margin: 0; }
/* inside the card and the band the wrapper supplies the surface */
.supad-cf .supad-form { padding: 0; border-radius: 0; background: none; }

.supad-form .supad-cf__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.supad-form .supad-cf__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; }
.supad-form .supad-cf__field--wide { grid-column: 1 / -1; }
.supad-form .supad-cf__label {
	display: flex !important;
	gap: 4px;
	align-items: center;
	font-size: 16px;
	line-height: 23px;
	font-weight: 500;
	color: var(--supad-navy);
}
.supad-form .supad-cf__req { color: var(--supad-green); font-weight: 600; }
.supad-form .supad-cf__optional { font-size: 14px; line-height: 20px; font-weight: 300; }
.supad-form .wpcf7-form-control-wrap { display: block !important; position: relative; margin: 0 !important; }

.supad-form .supad-cf__field input,
.supad-form .supad-cf__field select,
.supad-form .supad-cf__field textarea {
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid #d2d2d7 !important;
	border-radius: 8px;
	background-color: #fff !important;
	color: var(--supad-navy) !important;
	font-family: inherit;
	font-size: 16px;
	font-weight: 300;
	line-height: 23px;
	direction: rtl;
	text-align: right;
	box-shadow: none;
	outline: none;
}
.supad-form .supad-cf__field textarea { height: 96px; padding: 14px 16px; resize: vertical; }
.supad-form .supad-cf__field select {
	-webkit-appearance: none;
	appearance: none;
	padding-left: 44px;
	background-image: url(chevron-card.svg);
	background-repeat: no-repeat;
	background-position: left 16px center;
	background-size: 12px 7px;
	cursor: pointer;
}
.supad-form .supad-cf__field input:focus,
.supad-form .supad-cf__field select:focus,
.supad-form .supad-cf__field textarea:focus {
	border-color: var(--supad-green) !important;
	box-shadow: 0 0 0 3px rgba(107, 186, 73, .2);
	/* invisible normally; Windows high-contrast mode drops the shadow and the border colour and draws this instead */
	outline: 2px solid transparent;
}
.supad-form .supad-cf__field .wpcf7-not-valid { border-color: #d63638 !important; }
.supad-form .wpcf7-form-control-wrap .wpcf7-not-valid-tip { display: block !important; margin: 4px 0 0; font-size: 13px; line-height: 18px; color: #d63638; }

.supad-form .supad-cf__bottom {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #e5e7eb;
}
.supad-form .supad-cf__consents { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.supad-form .supad-cf__consents .wpcf7-form-control-wrap,
.supad-form .supad-cf__consents .wpcf7-form-control { display: block !important; }
.supad-form .supad-cf__consents .wpcf7-list-item { display: block !important; margin: 0 !important; }
.supad-form .supad-cf__consents label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	cursor: pointer;
}
.supad-form .supad-cf__consents .wpcf7-list-item-label {
	float: none;
	color: var(--supad-navy) !important;
	font-size: 15px;
	line-height: 22px;
	font-weight: 300;
}
.supad-form .supad-cf__consents .wpcf7-list-item-label a { color: inherit; text-decoration: underline; }
.supad-form .supad-cf__consents input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 2px solid #8e8e93 !important;
	border-radius: 6px;
	background: #fff !important;
	cursor: pointer;
}
.supad-form .supad-cf__consents input[type="checkbox"]:checked {
	border: 0 !important;
	background: url(checkbox-checked.svg) no-repeat center / 20px 20px !important;
}
.supad-form .supad-cf__consents input[type="checkbox"]:focus-visible { outline: 2px solid var(--supad-green); outline-offset: 2px; }
/* A missing consent: cf7mls.css boxes every .wpcf7-not-valid in red, and here that is the row's wrapper.
   Drop the box and mark the checkbox itself, like the fields. */
.supad-form .supad-cf__consents .wpcf7-not-valid { border: 0 !important; }
.supad-form .supad-cf__consents .wpcf7-not-valid input[type="checkbox"] { border-color: #d63638 !important; }
/* Keyboard focus on the button and the links: Divi's reset removes the browser's own ring. */
.supad-form .supad-cf__bottom .supad-cf__actions input.supad-cf__submit:focus-visible,
.supad-form .supad-cf__consents .wpcf7-list-item-label a:focus-visible { outline: 2px solid var(--supad-navy); outline-offset: 2px; }

.supad-form .supad-cf__actions { position: relative; }
/* arrow + label centred as a pair: 14px arrow, 10px gap, label */
.supad-form .supad-cf__bottom .supad-cf__actions input.supad-cf__submit {
	display: block;
	float: none;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 0 0 24px;
	border: 0 !important;
	border-radius: 8px;
	background: var(--supad-green) url(arrow-submit.svg) no-repeat left calc(50% - 20.5px) center / 14px 12px !important;
	color: #fff !important;
	font-family: inherit;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 23px;
	text-align: center;
	cursor: pointer;
	transition: background-color .2s;
}
/* opacity answers cf7mls.css, which fades every submit button to .8 on hover */
.supad-form .supad-cf__bottom .supad-cf__actions input.supad-cf__submit:hover { background-color: #5aa63a !important; opacity: 1; }
.supad-form .wpcf7-spinner { position: absolute; top: 50%; left: 12px; margin: -12px 0 0; }

.wpcf7 form .supad-form ~ .wpcf7-response-output {
	float: none;
	margin: 16px 0 0;
	padding: 10px 16px;
	border-radius: 8px;
	background: #fff;
	font-size: 15px;
	line-height: 22px;
	direction: rtl;
	text-align: right;
	color: #292f6e;
}
.wpcf7 form.sent .supad-form ~ .wpcf7-response-output { display: block !important; border-color: #6bba49; }

/* ---------- in-field labels: sidebar and plain embeds (class set by contact-form.js) ---------- */
.supad-form--inlabel .supad-cf__field { position: relative; }
.supad-form--inlabel .supad-cf__label {
	position: absolute;
	/* above the control wrap, which is positioned too and comes later in the markup */
	z-index: 1;
	top: 0;
	right: 16px;
	max-width: calc(100% - 32px);
	height: 48px;
	overflow: hidden;
	white-space: nowrap;
	pointer-events: none;
}
.supad-form--inlabel .supad-cf__details .supad-cf__label { top: 14px; height: auto; min-height: 24px; flex-wrap: wrap; white-space: normal; }
/* A filled field shows only its value. The label is clipped out of view, not removed: it is the field's
   name for screen readers, and display: none would take the name away. (Three rules, not one list: a
   browser that does not know one of the selectors must not drop the others.) */
.supad-form--inlabel .supad-cf__field.is-filled .supad-cf__label { width: 1px; height: 1px; min-height: 0; clip-path: inset(50%); white-space: nowrap; }
.supad-form--inlabel .supad-cf__field:has(:autofill) .supad-cf__label { width: 1px; height: 1px; min-height: 0; clip-path: inset(50%); white-space: nowrap; }
.supad-form--inlabel .supad-cf__field:has(:-webkit-autofill) .supad-cf__label { width: 1px; height: 1px; min-height: 0; clip-path: inset(50%); white-space: nowrap; }
/* the dropdown's first option repeats the label: hide it until something is chosen */
.supad-form--inlabel .supad-cf__field:not(.is-filled) select { color: transparent !important; }
.supad-form .supad-cf__field select option { color: #292f6e; }

/* ---------- card skin (contact page) ---------- */
.supad-cf--card {
	position: relative;
	z-index: 10;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	border-radius: 32px;
	background: #f7f7f7;
	box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .08);
	overflow: hidden;
}
.supad-cf--card .supad-cf__hero {
	padding: 24px 48px;
	min-height: 160px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-image: var(--supad-hero);
	color: #fff;
}
.supad-cf--card .supad-cf__title {
	display: inline-block;
	align-self: flex-start;
	margin: 0;
	padding: 0 0 5px;
	font-size: 36px;
	line-height: 52px;
	font-weight: 700;
	letter-spacing: -.72px;
	color: #fff;
	background: linear-gradient(var(--supad-green), var(--supad-green)) no-repeat right bottom / 120px 5px;
}
.supad-cf--card .supad-cf__intro { margin: 10px 0 0; padding: 0; font-size: 18px; line-height: 26px; font-weight: 300; color: #fff; opacity: .92; }
.supad-cf--card .supad-cf__note { margin: 4px 0 0; padding: 0; font-size: 15px; line-height: 22px; font-weight: 500; color: #fff; }

.supad-cf--card .supad-cf__body { padding: 16px 48px 24px; background: #fff; }
.supad-cf--card .supad-cf__grid { column-gap: 24px; padding: 12px 0 8px; }
.supad-cf--card .supad-cf__field textarea { height: 80px; }
.supad-cf--card .supad-cf__bottom { gap: 24px; margin-top: 12px; padding-top: 12px; }
.supad-cf--card .supad-cf__consents { gap: 8px; }
.supad-cf--card .supad-cf__bottom .supad-cf__actions input.supad-cf__submit {
	height: 48px;
	padding: 0 26px 0 50px;
	background-position: left calc(50% - 30px) center !important;
}

.supad-cf--card .supad-cf__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 40px;
	min-height: 80px;
	margin: 0;
	padding: 18px 48px;
	list-style: none;
	background-image: var(--supad-hero);
	border-radius: 0 0 32px 32px;
}
/* contact items, shared by the card and the sidebar: icon on the right, text to its left */
.supad-cf .supad-cf__contact li { margin: 0; padding: 0; list-style: none; }
.supad-cf .supad-cf__contact a { display: flex; align-items: center; gap: 14px; color: #fff; font-size: 16px; line-height: 23px; font-weight: 300; text-decoration: none; }
/* hover keeps the link white (in the sidebar Divi's .et_pb_widget li a:hover would recolour it) and underlines the text */
.supad-cf .supad-cf__contact a:hover { color: #fff; }
.supad-cf .supad-cf__contact a:hover span { text-decoration: underline; }
.supad-cf .supad-cf__contact a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.supad-cf .supad-cf__contact img { width: 24.8px; height: 25.42px; margin: 9px; transform: scaleY(-1); }
.supad-cf .supad-cf__contact .supad-cf__contact-phone { font-size: 20px; line-height: 29px; font-weight: 500; }
.supad-cf .supad-cf__contact .supad-cf__contact-phone span { direction: ltr; unicode-bidi: isolate; }

.supad-cf--card .supad-cf__service { padding: 24px 48px; background: #f7f7f7; }
.supad-cf--card .supad-cf__service-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px;
	border: 1px solid #d2d2d7;
	border-radius: 12px;
	background: #fff;
}
/* service box pieces, shared by the card and the sidebar */
.supad-cf .supad-cf__service-copy { display: flex; align-items: center; gap: 12px; }
.supad-cf .supad-cf__service-icon { display: flex !important; align-items: center; justify-content: center; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 12px; background: var(--supad-green-2); }
.supad-cf .supad-cf__service-title { margin: 0; padding: 0; font-size: 24px; line-height: 35px; font-weight: 700; color: var(--supad-navy); }
.supad-cf .supad-cf__service-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 240px;
	width: 240px;
	height: 48px;
	border: 2px solid var(--supad-green);
	border-radius: 8px;
	background: var(--supad-green-2);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s;
}
.supad-cf .supad-cf__service-btn:hover { background: #fff; color: var(--supad-green); }
.supad-cf .supad-cf__service-btn:focus-visible { outline: 2px solid var(--supad-navy); outline-offset: 2px; }

/* Contact page section that hosts the card: overlap the hero by 50px (Figma 3120:549 top 351 vs hero bottom 401). */
.et_pb_section.et_pb_section.supad-contact-card-section { padding: 0 0 66px; margin-top: -50px; background: transparent; z-index: 10; }
.et_pb_section.supad-contact-card-section .et_pb_row { width: 92%; max-width: 1400px; padding: 0; }

/* ---------- band skin (above the footer) ---------- */
.supad-cf-band {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: 40px 5%;
	background: linear-gradient(90deg, #0b2d6c, #050d42);
	direction: rtl;
}
.supad-cf-band__watermark {
	position: absolute;
	font-family: 'Rubik', Helvetica, Arial, sans-serif;
	font-size: 220px;
	line-height: 260px;
	font-weight: 700;
	color: #fff;
	opacity: .14;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	direction: ltr;
}
/* Figma: centred at x 666.5 / y 41 and x 1202.5 / y 468 on a 1920 x 602 section */
.supad-cf-band__watermark--top { left: 34.7%; top: 41px; transform: translate(-50%, -50%); }
.supad-cf-band__watermark--bottom { left: 62.6%; bottom: 134px; transform: translate(-50%, 50%); }

.supad-cf--band {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px;
	border-radius: 12px;
	background: #fff;
	filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .1));
}
.supad-cf--band .supad-cf__hero { margin-bottom: 32px; }
.supad-cf--band .supad-cf__title {
	margin: 0;
	/* Figma: a 4px line centred 12px under the 40px heading, the intro 12px under the line's centre */
	padding: 0 0 14px;
	font-size: 52px;
	line-height: 40px;
	font-weight: 700;
	color: var(--supad-navy);
	background: url(line-band.svg) no-repeat right bottom / 144px 4px;
}
.supad-cf--band .supad-cf__intro { margin: 10px 0 0; padding: 0; font-size: 18px; line-height: 26px; font-weight: 400; color: var(--supad-navy); }
.supad-cf--band .supad-cf__grid { column-gap: 16px; }
.supad-cf--band .supad-cf__details,
.supad-cf--band .supad-cf__req { display: none; }
.supad-cf--band .supad-cf__label { font-size: 19px; line-height: 19px; }
.supad-cf--band .supad-cf__field input,
.supad-cf--band .supad-cf__field select { border-color: #d8d8d8 !important; border-radius: 5px; background-color: rgba(255, 255, 255, .96) !important; font-weight: 400; }
.supad-cf--band .supad-cf__field select { font-size: 15.8px; background-image: url(chevron-band.svg); background-size: 20px 20px; }
.supad-cf--band .supad-cf__bottom { gap: 24px; margin-top: 20px; padding-top: 8px; border-top: 0; }
.supad-cf--band .supad-cf__consents { gap: 12px; }
.supad-cf--band .supad-cf__consents .wpcf7-list-item-label { font-size: 15.8px; font-weight: 400; }
.supad-cf--band .supad-cf__consents input[type="checkbox"] { border: 1px solid #d8d8d8 !important; border-radius: 5px; }
.supad-cf--band .supad-cf__bottom .supad-cf__actions input.supad-cf__submit {
	height: auto;
	padding: 0 26px;
	border: 3px solid var(--supad-green-2) !important;
	border-radius: 0;
	background: var(--supad-green-2) !important;
	font-size: 26px !important;
	line-height: 44.2px;
	font-weight: 400 !important;
}
.supad-cf--band .supad-cf__bottom .supad-cf__actions input.supad-cf__submit:hover { background: #fff !important; color: var(--supad-green-2) !important; }

/* ---------- sidebar width: every template that shows the sidebar card ---------- */
/* The card is drawn at 300px. The theme gives the sidebar a fifth of a container that is 80% of the
   window (228px at 1440, 174px at 1100), which squeezed the form. Here the sidebar is 300px wide (30%
   of the container on small desktops) and the container grows from 80% towards 90% of the window to
   pay for it: the content beside the sidebar keeps the width it had, the page margins give instead.
   Once the 90% cap is reached the content gives the rest: on blog posts from a window of about 1190px
   down, at most 15px; on the other templates from about 1265px down, at most 37px.
   - calc(63.355% + 312px) is the container at which 96.125% of it, minus the 300px sidebar, equals
     the old article width (76.125% of 80% of the window). The Customizer's max-width: 1600px still applies.
   - !important answers the Divi Customizer CSS: .single-post #sidebar { width: 20% !important }. */
@media (min-width: 981px) {
	/* blog posts: article 76.125% + sidebar 20% filled 96.125% of the container.
	   Not when the blog plugin's "hide sidebar" option is on, and not on full-width posts. */
	body.single-post.et_right_sidebar:not(.free-blog-post-sidebar-hide) #main-content > .container,
	body.single-post.et_left_sidebar:not(.free-blog-post-sidebar-hide) #main-content > .container { width: min(90%, calc(63.355% + 312px)); }
	body.single-post #sidebar { width: min(300px, 30%) !important; }
	body.single-post #left-area { width: calc(96.125% - min(300px, 30%)); }

	/* 404, search results, archives and plain pages show the same sidebar. There it has 30px of padding
	   beside the content (so 330px for a 300px card), and content + sidebar fill 97% (76.125% + 20.875%).
	   :has() keeps this to pages where the card really is in the sidebar; a browser without :has()
	   leaves the theme's widths and the card scales down. */
	body:not(.single-post) #main-content > .container:has(> #content-area > #sidebar .supad-cf--side) { width: min(90%, calc(62.78% + 340px)); }
	body:not(.single-post) #content-area:has(> #sidebar .supad-cf--side) > #sidebar { width: min(330px, calc(30% + 30px)); }
	body:not(.single-post) #content-area:has(> #sidebar .supad-cf--side) > #left-area { width: calc(97% - min(330px, calc(30% + 30px))); }
	/* Divi's divider line is pinned 20.875% from the container's right edge. Move it with the sidebar:
	   the sidebar's left edge is the 3% that stays empty at the right plus the sidebar's width. */
	body.et_right_sidebar:not(.single-post) #main-content > .container:has(> #content-area > #sidebar .supad-cf--side)::before { right: calc(3% + min(330px, calc(30% + 30px))) !important; }
}

/* ---------- side skin (blog sidebar; Figma 3445:4160, drawn at 300px) ---------- */
/* Paddings and the big type scale down with the sidebar where it is narrower than 300px. */
.supad-cf--side { display: flex; flex-direction: column; gap: 24px; container-type: inline-size; }
.supad-cf--side .supad-cf__panel { border-radius: 24px; background: #fff; box-shadow: 0 12px 32px rgba(0, 0, 0, .08); overflow: hidden; }
.supad-cf--side .supad-cf__hero {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	padding: clamp(14px, 8cqw, 24px);
	background-image: var(--supad-hero);
	color: #fff;
}
.supad-cf--side .supad-cf__title {
	align-self: flex-start;
	margin: 0;
	padding: 0 0 10px;
	font-size: 28px;
	font-size: clamp(18px, 9.33cqw, 28px);
	line-height: 1.357;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #fff;
	background: linear-gradient(var(--supad-green), var(--supad-green)) no-repeat right bottom / 72px 4px;
}
.supad-cf--side .supad-cf__intro { margin: 0; padding: 0; font-size: 16px; line-height: 24px; font-weight: 300; color: #fff; opacity: .92; }
.supad-cf--side .supad-cf__note { margin: -4px 0 0; padding: 0; font-size: 14px; line-height: 21px; font-weight: 500; color: #fff; }
.supad-cf--side .supad-cf__body { padding: 24px; padding: clamp(14px, 8cqw, 24px); background: #fff; }
.supad-cf--side .supad-cf__consents label { align-items: flex-start; }
.supad-cf--side .supad-cf__consents .wpcf7-list-item-label { font-size: 14px; line-height: 20px; }
.supad-cf--side .supad-cf__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 20px 24px;
	padding: clamp(14px, 6.67cqw, 20px) clamp(14px, 8cqw, 24px);
	list-style: none;
	background-image: var(--supad-hero);
}
.supad-cf--side .supad-cf__contact li { max-width: 100%; }
.supad-cf--side .supad-cf__contact a { min-height: 44px; }
.supad-cf--side .supad-cf__contact li:last-child a { min-height: 64px; }
.supad-cf--side .supad-cf__contact a span { min-width: 0; overflow-wrap: anywhere; }
.supad-cf--side .supad-cf__contact .supad-cf__contact-phone { font-size: clamp(14px, 6.67cqw, 20px); }
.supad-cf--side .supad-cf__service-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* 24px to the outer edge, border included */
	padding: 23px;
	padding: clamp(13px, calc(8cqw - 1px), 23px);
	border: 1px solid #d2d2d7;
	border-radius: 12px;
	background: #fff;
}
.supad-cf--side .supad-cf__service-copy { gap: 14px; }
.supad-cf--side .supad-cf__service-title { font-size: clamp(16px, 8cqw, 24px); }
.supad-cf--side .supad-cf__service-btn { flex: 0 0 auto; width: 100%; }

/* Divi section and row hosting [supad_contact_band]: full bleed, no padding (pinned, bug 3). */
.et_pb_section.et_pb_section.supad-contact-band-section { padding: 0; }
.et_pb_section.supad-contact-band-section .et_pb_row { width: 100%; max-width: none; padding: 0; }
.et_pb_row.et_pb_row.supad-contact-band-row { width: 100%; max-width: none; padding: 0; margin: 0; }
.et_pb_row.supad-contact-band-row .et_pb_column,
.et_pb_row.supad-contact-band-row .et_pb_code { margin: 0; }

/* ---------- card and band from 768: two columns, submit beside the consents ---------- */
@media (min-width: 768px) {
	.supad-cf--card .supad-cf__grid,
	.supad-cf--band .supad-cf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.supad-cf--band .supad-cf__grid { row-gap: 32px; }
	.supad-cf--card .supad-cf__bottom,
	.supad-cf--band .supad-cf__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
	.supad-cf--band .supad-cf__bottom { margin-top: 32px; }
	.supad-cf--band .supad-cf__consents .wpcf7-list-item-label { line-height: 35px; }
	.supad-cf--card .supad-cf__actions,
	.supad-cf--band .supad-cf__actions { flex: 0 0 auto; }
	.supad-cf--card .supad-cf__bottom .supad-cf__actions input.supad-cf__submit { width: auto; background-position: left 26px center !important; }
	.supad-cf--band .supad-cf__bottom .supad-cf__actions input.supad-cf__submit { width: auto; }
	.supad-cf--card .wpcf7-spinner,
	.supad-cf--band .wpcf7-spinner { left: auto; right: 100%; margin: -12px 8px 0 0; }
}

/* ---------- desktop from 981: three columns ---------- */
@media (min-width: 981px) {
	.supad-cf--card .supad-cf__grid,
	.supad-cf--band .supad-cf__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- tablet 768-980 ---------- */
@media (max-width: 980px) {
	.supad-cf--card .supad-cf__hero,
	.supad-cf--card .supad-cf__body,
	.supad-cf--card .supad-cf__service { padding-left: 32px; padding-right: 32px; }
	.supad-cf--card .supad-cf__contact { padding-left: 32px; padding-right: 32px; gap: 8px 32px; }
	.supad-cf--band { padding: 40px 32px; }
	.supad-cf--band .supad-cf__title { font-size: 42px; line-height: 44px; }
	.supad-cf-band__watermark { font-size: 150px; line-height: 180px; }
}

/* ---------- phone <=767 ---------- */
@media (max-width: 767px) {
	.et_pb_section.et_pb_section.supad-contact-card-section { margin-top: -30px; padding-bottom: 40px; }
	.et_pb_section.supad-contact-card-section .et_pb_row { width: 94%; }
	.supad-cf--card { border-radius: 20px; }
	.supad-cf--card .supad-cf__hero,
	.supad-cf--card .supad-cf__body,
	.supad-cf--card .supad-cf__service { padding-left: 20px; padding-right: 20px; }
	.supad-cf--card .supad-cf__title { font-size: 28px; line-height: 40px; }
	.supad-cf--card .supad-cf__intro { font-size: 16px; line-height: 24px; }
	.supad-cf--card .supad-cf__contact { flex-direction: column; align-items: flex-start; padding: 16px 20px; border-radius: 0 0 20px 20px; }
	.supad-cf--card .supad-cf__contact img { margin: 0; }
	.supad-cf--card .supad-cf__service-card { flex-direction: column; align-items: stretch; padding: 20px; }
	.supad-cf--card .supad-cf__service-btn { flex-basis: auto; width: 100%; }
	.supad-cf-band { padding: 24px 16px; }
	.supad-cf--band { padding: 28px 20px; }
	.supad-cf--band .supad-cf__hero { margin-bottom: 24px; }
	.supad-cf--band .supad-cf__title { font-size: 32px; line-height: 38px; }
	.supad-cf--band .supad-cf__intro { font-size: 16px; line-height: 24px; }
	.supad-cf--band .supad-cf__label { font-size: 17px; }
	.supad-cf-band__watermark { font-size: 90px; line-height: 110px; }
}