/*
Theme Name: Crystalline
Template: hello-elementor
Description: Child theme for Crystalline Services LLC. Fonts, design tokens and the small CSS layer Elementor cannot express. Content is edited in Elementor.
Version: 1.0.0
Text Domain: crystalline
*/

/* ---------- Tokens (mirror Elementor Global Colors; see docs/DESIGN_TOKENS.md) ---------- */
:root {
	--c-navy: #0a1f45;
	--c-navy-deep: #0c2f66;
	--c-navy-ink: #071634;
	--c-gold: #c9a766;
	--c-gold-dark: #7d6029;
	--c-slate: #55637c;
	--c-cream: #fdfbf6;
	--c-linen: #f7f3ea;
	--c-line: rgba(12, 47, 102, .16);
	--c-line-dark: rgba(247, 243, 234, .2);
	--c-input-line: rgba(12, 47, 102, .4);
	--c-frame-gold: rgba(125, 96, 41, .35);
	--ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
	background: var(--c-cream);
	color: var(--c-navy);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
.elementor-heading-title a, .elementor-heading-title a:hover { color: inherit; }
a { transition: color .2s var(--ease); }
:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }
.cs-dark :focus-visible { outline-color: var(--c-gold); }

/* Hard line breaks from the design apply on desktop/tablet; on phones text wraps naturally. */
@media (max-width: 767px) { br.d { display: none; } }

/* Inline helpers used inside editable headings */
.cs-gold { color: var(--c-gold); }
.cs-dot { color: var(--c-gold); }
.elementor-heading-title:has(.cs-town) { display: flex; flex-wrap: wrap; row-gap: 6px; }
.cs-town { white-space: nowrap; }
.cs-town .cs-dot { font-size: .7em; line-height: 0; }
.elementor-heading-title strong { font-weight: 600; }
.elementor-heading-title a.cs-u { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Buttons (Elementor Button widget + class) ---------- */
.elementor-button { transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.cs-btn-primary .elementor-button:hover, .cs-btn-primary .elementor-button:focus-visible { background-color: var(--c-navy) !important; border-color: var(--c-navy) !important; }
.cs-btn-light .elementor-button:hover, .cs-btn-light .elementor-button:focus-visible { background-color: var(--c-linen) !important; border-color: var(--c-linen) !important; }
.cs-btn-outline .elementor-button:hover { background-color: var(--c-navy-deep) !important; color: var(--c-cream) !important; }

/* ---------- Arrow link: text + 16px arrow + underline ---------- */
.cs-arrow .elementor-heading-title a {
	display: inline-flex; align-items: center; gap: 9px;
	padding-bottom: 5px; border-bottom: 1px solid var(--c-navy-deep);
}
.cs-arrow .elementor-heading-title a::after {
	content: ""; width: 16px; height: 16px; flex: none;
	background: url(icons/arrow-right-navy-16.svg) center / 16px 16px no-repeat;
	transition: transform .2s var(--ease);
}
.cs-arrow .elementor-heading-title a:hover::after { transform: translateX(4px); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Header / nav (HFE Navigation Menu widget, class cs-nav) ---------- */
.cs-header .cs-logo { margin-right: auto !important; }
.cs-nav .hfe-nav-menu { gap: 25.2px; }
.cs-nav .hfe-nav-menu > li.menu-item { margin: 0 !important; }
.cs-nav .hfe-nav-menu > li > a.hfe-menu-item {
	font-family: Manrope, sans-serif; font-weight: 500; font-size: 15px; line-height: 25.2px; letter-spacing: .15px;
	color: var(--c-navy); padding: 10px 0 10px !important; border-bottom: 1px solid transparent;
}
.cs-nav .hfe-nav-menu > li.current-menu-item > a.hfe-menu-item,
.cs-nav .hfe-nav-menu > li > a.hfe-menu-item:hover,
.cs-nav .hfe-nav-menu > li > a.hfe-menu-item:focus-visible { border-bottom-color: var(--c-gold); color: var(--c-navy); }
.cs-topbar a { color: #f7f3ea; }

/* ---------- Hero overlay (two stacked gradients from Figma) ---------- */
.cs-hero { position: relative; }
.cs-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background:
		linear-gradient(90deg, rgba(7,22,52,.82) 0%, rgba(7,22,52,.55) 34%, rgba(7,22,52,.06) 64%, rgba(7,22,52,0) 100%),
		linear-gradient(0deg, rgba(7,22,52,.40) 0%, rgba(7,22,52,0) 40%);
}
.cs-hero > .e-con-inner { position: relative; z-index: 1; }
@media (max-width: 767px) {
	.cs-hero::after { background: linear-gradient(180deg, rgba(7,22,52,.35) 0%, rgba(7,22,52,.85) 100%); }
}

/* ---------- Framed portrait ---------- */
.cs-framed { position: relative; }
.cs-framed img { display: block; border: 1px solid var(--c-line); box-sizing: border-box; }
.cs-framed::after { content: ""; position: absolute; inset: 15px; border: 1px solid var(--c-frame-gold); pointer-events: none; }

/* ---------- Plan card ---------- */
.cs-plan { box-shadow: 0 36px 70px -48px rgba(7,22,52,.5); }

/* ---------- Icons drawn from the Figma SVGs ---------- */
.cs-stars { display: block; width: 106px; height: 18px; background: url(icons/star-gold-18.svg) 0 0 / 18px 18px space no-repeat; background-repeat: space no-repeat; }
.cs-goldarrow { display: block; width: 22px; height: 22px; background: url(icons/arrow-right-gold-22.svg) center / 22px 22px no-repeat; transition: transform .2s var(--ease); }
.cs-rowlink:hover .cs-goldarrow { transform: translateX(4px); }
.cs-rowlink:hover .elementor-heading-title a { color: var(--c-navy-deep); }

/* ---------- Review avatars ---------- */
.cs-avatar img { border-radius: 50%; }
.cs-avatar-initial {
	display: flex; width: 52px; height: 52px; border-radius: 50%; align-items: center; justify-content: center;
	color: #fff; font: 500 22px/22px Manrope, sans-serif; letter-spacing: 3.08px; text-indent: 3.08px;
}

/* ---------- Footer links ---------- */
.cs-flink .elementor-heading-title a:hover { color: #f7f3ea; }
.cs-footer .elementor-heading-title a { color: inherit; }
.cs-header .cs-nav, .cs-nav .elementor-widget-container, .cs-nav .hfe-nav-menu { height: auto !important; min-height: 0 !important; align-self: center; }
.cs-nav div.hfe-nav-menu::before, .cs-nav div.hfe-nav-menu::after { display: none; } /* clearfix pseudos become 25px flex items */
.cs-nav ul.hfe-nav-menu::before, .cs-nav ul.hfe-nav-menu::after { display: none; }
@media (min-width: 1025px) { .cs-nowrap .elementor-heading-title { white-space: nowrap; } }

/* ---------- Bullet lists (gold diamond) ---------- */
.cs-bullet .elementor-heading-title { position: relative; }
.cs-bullet .elementor-heading-title::before {
	content: ""; position: absolute; left: -18.5px; top: 9.94px; width: 7px; height: 7px;
	background: var(--c-gold); transform: rotate(45deg);
}

/* ---------- FAQ (Elementor Nested Accordion, class cs-faq) ---------- */
.cs-faq .e-n-accordion { gap: 0 !important; }
.cs-faq .e-n-accordion-item { border-bottom: 1px solid var(--c-line); }
.cs-faq .e-n-accordion-item-title {
	padding: 23.8px 0 !important; border: 0 !important; background: transparent !important;
	justify-content: space-between !important; align-items: center; list-style: none; cursor: pointer;
}
.cs-faq .e-n-accordion-item-title::-webkit-details-marker { display: none; }
.cs-faq .e-n-accordion-item-title-text {
	font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 25.9px; line-height: 32.4px; color: var(--c-navy);
}
.cs-faq .e-n-accordion-item-title-icon { display: none !important; }
.cs-faq .e-n-accordion-item-title::after {
	content: "+"; font: 300 30px/30px Manrope, sans-serif; color: var(--c-gold-dark); width: 18px; text-align: center;
	transition: transform .2s var(--ease); flex: none;
}
.cs-faq .e-n-accordion-item[open] > .e-n-accordion-item-title::after { transform: rotate(45deg); }
.cs-faq .e-n-accordion-item > .e-con { border: 0 !important; padding: 0 30px 27px 0 !important; background: transparent !important; }
.cs-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text { color: var(--c-navy-deep); }
.cs-goldarrow-20 { width: 20px; height: 20px; background-image: url(icons/arrow-right-gold-20.svg); background-size: 20px 20px; }

/* ---------- Contact form (Contact Form 7, markup in Contact > Contact Forms) ---------- */
.cs-cf7 .wpcf7 form > p:empty { display: none; }
.cs-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; row-gap: 26px; }
.cs-field { grid-column: span 2; min-width: 0; }
.cs-half { grid-column: span 1; }
.cs-form label {
	display: block; margin: 0 0 7.84px; font: 600 12px/20.16px Manrope, sans-serif; letter-spacing: 1.68px;
	text-transform: uppercase; color: var(--c-navy);
}
.cs-form .cs-req { color: var(--c-gold-dark); }
.cs-form .wpcf7-form-control-wrap { display: block; position: relative; }
.cs-form input[type=text], .cs-form input[type=email], .cs-form input[type=tel], .cs-form select, .cs-form textarea {
	display: block; width: 100%; height: 57.55px; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--c-input-line);
	border-radius: 0; background: transparent; box-shadow: none; outline-offset: 2px;
	font: 400 17px/28.56px Manrope, sans-serif; color: var(--c-navy);
	transition: border-color .2s var(--ease);
}
.cs-form select {
	appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer;
	background: url(icons/chevron-down-navy-20.svg) right center / 20px 20px no-repeat;
}
.cs-form textarea { height: 130px; padding: 13.3px 0 0; resize: none; font-size: 17px; line-height: 26.35px; }
.cs-form ::placeholder { color: #8791a4; opacity: 1; }
.cs-form input:focus, .cs-form select:focus, .cs-form textarea:focus { border-bottom-color: var(--c-navy-deep); }
.cs-form .cs-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cs-submit { grid-column: span 2; display: flex; align-items: center; gap: 25px; margin-top: 18px; }
.cs-submit .wpcf7-submit {
	width: 166px; height: 54px; flex: none; border: 1px solid var(--c-navy-deep); border-radius: 2px;
	background: var(--c-navy-deep); color: var(--c-cream); cursor: pointer;
	font: 600 15px/25.2px Manrope, sans-serif; letter-spacing: .3px; transition: background-color .2s var(--ease);
}
.cs-submit .wpcf7-submit:hover, .cs-submit .wpcf7-submit:focus-visible { background: var(--c-navy); }
.cs-submit .cs-note { margin: 0; max-width: 334px; font: 400 14px/23.52px Manrope, sans-serif; color: var(--c-slate); }
.cs-submit .wpcf7-spinner { position: absolute; }
.cs-form .wpcf7-not-valid-tip { font: 500 13px/20px Manrope, sans-serif; color: #a12a2a; margin-top: 6px; }
.cs-form .wpcf7-not-valid { border-bottom-color: #a12a2a; }
.cs-cf7 .wpcf7-response-output { margin: 24px 0 0 !important; padding: 12px 16px !important; font: 500 15px/24px Manrope, sans-serif; border-width: 1px !important; }
@media (max-width: 767px) {
	.cs-half { grid-column: span 2; }
	.cs-submit { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- Responsive layer (docs/RESPONSIVE_BEHAVIOR.md) ---------- */
/* Rows use Figma px widths; below 1440 they may shrink instead of overflowing. */
.cs-row > .e-con, .cs-row > .elementor-element { flex-shrink: 1 !important; min-width: 0; }
.cs-row > .elementor-widget-heading { min-width: min-content; }
.cs-row > .elementor-widget-html, .cs-row > .elementor-widget-button { flex-shrink: 0 !important; }
.cs-row > .elementor-widget-image img { max-width: 100%; }
@media (max-width: 1024px) {
	.cs-diff .e-con-inner > .e-con > .e-con { width: 50% !important; }
}
/* Two-column page splits stack below 900px; each column takes the full width. */
@media (max-width: 900px) {
	.cs-split { flex-direction: column !important; }
	.cs-split > .e-con, .cs-split > .elementor-element { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; --container-widget-width: 100% !important; }
	.cs-split > * + * { margin-top: 32px !important; }
	/* stacked images keep their own proportions (from their width/height attributes, so space is reserved before load = no CLS);
	   a forced 4:3 cut the head off portraits (About, Home 'Meet Skarlet') */
	.cs-split > .elementor-widget-image img { width: 100% !important; height: auto !important; object-fit: cover; }
	/* image-right blocks: image first, like the image-left ones, so two photos never sit back to back */
	.cs-split.cs-imgright { flex-direction: column-reverse !important; }
	.cs-split.cs-imgright > * + * { margin-top: 0 !important; }
	.cs-split.cs-imgright > :first-child { margin-top: 32px !important; }
}
@media (max-width: 767px) {
	.cs-diff .e-con-inner > .e-con > .e-con { width: 100% !important; }
	.e-con .elementor-widget-heading { max-width: 100%; }
}

/* Breadcrumb "Home" link: 15px-tall text -> 39px tap area without moving the layout */
.cs-crumb a { display: inline-block; padding: 12px 0; margin: -12px 0; }
@media (max-width: 767px) {
	.cs-keeprow { flex-direction: row !important; }
	.cs-keeprow > * + * { margin-left: 16px !important; }
	.cs-keeprow > :first-child { flex: 0 0 auto !important; width: auto !important; max-width: 45% !important; --container-widget-width: auto !important; }
	.cs-keeprow > :last-child { flex: 1 1 0 !important; width: auto !important; min-width: 0; --container-widget-width: auto !important; }
	.cs-keeprow.cs-row[class*="justify"], .cs-keeprow { justify-content: flex-start; }
}
/* a11y: the in-sentence phone link needs a non-colour cue (axe link-in-text-block) */
.cs-topbar a.cs-topphone { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Top bar + dropdown menu below desktop (RESPONSIVE_BEHAVIOR.md "Header and navigation") */
@media (max-width: 1024px) {
	.cs-topbar .elementor-heading-title { font-size: 12px !important; white-space: nowrap; }
	.cs-topbar .e-con { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; }
	.cs-topbar .e-con > * { margin: 0 !important; width: auto !important; }
	.cs-header .cs-logo { flex: none !important; }
	.cs-header .cs-nav { flex: 1 1 auto !important; }
	.cs-header .cs-nav .hfe-nav-menu__toggle { margin-left: auto !important; margin-right: 0 !important; }
	.cs-nav div.hfe-nav-menu { gap: 0; }   /* desktop item gap also hit the toggle wrapper and pushed the icon 13px up */
	.cs-header .cs-logo img { width: 180px !important; height: 61px !important; }
	.cs-header .cs-header-cta { flex: none !important; width: auto !important; --container-widget-width: auto !important; }
	.cs-header-cta .elementor-button { white-space: nowrap; padding-left: 24px !important; padding-right: 24px !important; }
	.cs-nav .hfe-nav-menu > li > a.hfe-menu-item { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (max-width: 767px) {
	.cs-topbar .e-con > :first-child { display: none; }
	.cs-topbar .e-con { justify-content: center !important; }
	.cs-topbar .e-con > :last-child { width: 100% !important; --container-widget-width: 100% !important; }
	.cs-topbar .e-con > :last-child .elementor-heading-title { text-align: center; white-space: normal; }
	.cs-nav .hfe-nav-menu > li > a.hfe-menu-item { padding-left: 20px !important; padding-right: 20px !important; }
	.cs-header .cs-logo img { width: 150px !important; height: 51px !important; }
}


/* ==========================================================================
   Mobile layer (docs/MOBILE_UI_AUDIT.md)
   Hooks are added by the builder (add_cls): cs-cols, cs-kv, cs-sig, cs-spread,
   cs-imgright, cs-fcols, cs-fbottom, cs-info. Spacing uses the 8px rhythm.
   ========================================================================== */

/* ---- Navigation panel (hamburger below desktop): brand colours, not HFE defaults ---- */
@media (max-width: 1024px) {
	.cs-header .hfe-nav-menu__toggle { padding: 10px; margin-right: -10px; cursor: pointer; }
	.cs-header .hfe-nav-menu__toggle .hfe-nav-menu-icon { display: block; position: relative; width: 24px; height: 24px; }
	.cs-header .hfe-nav-menu__toggle svg { width: 24px; height: 24px; fill: var(--c-navy); }
	/* open state: a thin navy X instead of the boxed "window-close" glyph */
	.cs-header .hfe-nav-menu__toggle.hfe-active-menu svg { display: none; }
	.cs-header .hfe-nav-menu__toggle.hfe-active-menu .hfe-nav-menu-icon::before,
	.cs-header .hfe-nav-menu__toggle.hfe-active-menu .hfe-nav-menu-icon::after {
		content: ""; position: absolute; left: 1px; top: 11px; width: 22px; height: 2px; background: var(--c-navy); transform: rotate(45deg);
	}
	.cs-header .hfe-nav-menu__toggle.hfe-active-menu .hfe-nav-menu-icon::after { transform: rotate(-45deg); }
	.cs-nav nav.hfe-dropdown { background: var(--c-cream) !important; border-top: 1px solid var(--c-line); box-shadow: 0 28px 40px -28px rgba(7, 22, 52, .45); }
	.cs-nav nav.hfe-dropdown ul.hfe-nav-menu { background: transparent !important; gap: 0; }   /* desktop 25px item gap opened up the panel */
	.cs-nav nav.hfe-dropdown li.menu-item { border-bottom: 1px solid var(--c-line) !important; background: transparent !important; }
	.cs-nav nav.hfe-dropdown li > a.hfe-menu-item {
		display: flex; align-items: center; min-height: 52px; padding-top: 13px !important; padding-bottom: 13px !important;
		background: transparent !important; color: var(--c-navy) !important; border-bottom: 0 !important;
		font-size: 16px; font-weight: 500;
	}
	.cs-nav nav.hfe-dropdown li > a.hfe-menu-item:hover,
	.cs-nav nav.hfe-dropdown li > a.hfe-menu-item:focus-visible { background: var(--c-linen) !important; color: var(--c-navy-deep) !important; }
	.cs-nav nav.hfe-dropdown li.current-menu-item > a.hfe-menu-item { color: var(--c-navy-deep) !important; font-weight: 600; box-shadow: inset 3px 0 0 var(--c-gold); }
}

/* ---- Menu CTA (primary-menu item with class cs-menu-cta): the header button covers it above 767px ---- */
.cs-nav li.cs-menu-cta { display: none !important; }
@media (max-width: 767px) {
	.cs-nav nav.hfe-dropdown li.cs-menu-cta { display: block !important; border-bottom: 0 !important; padding: 20px; }
	.cs-nav nav.hfe-dropdown li.cs-menu-cta > a.hfe-menu-item {
		justify-content: center; min-height: 54px; padding: 0 16px !important; border-radius: 2px; box-shadow: none !important;
		background: var(--c-navy-deep) !important; color: var(--c-cream) !important; font-weight: 600; letter-spacing: .3px;
	}
	.cs-nav nav.hfe-dropdown li.cs-menu-cta > a.hfe-menu-item:hover,
	.cs-nav nav.hfe-dropdown li.cs-menu-cta > a.hfe-menu-item:focus-visible { background: var(--c-navy) !important; color: var(--c-cream) !important; }
}

.cs-script { display: none !important; }   /* HTML widgets that only carry a script */

/* ---- Hero/meta dot lists: each item keeps its dot; lines break only between items ---- */
.cs-nw { white-space: nowrap; }
a[href^="tel:"] { white-space: nowrap; }   /* a phone number never breaks across lines */

@media (max-width: 767px) {
	/* Two-column lists merge into one list: the second column continues the first (no double gap) */
	.cs-cols { padding-bottom: 0 !important; }
	.cs-cols > .e-con + .e-con { margin-top: 0 !important; }

	/* Label / value rows (cleaning plan card): one label column so values line up */
	.cs-kv > :first-child { flex: 0 0 104px !important; width: 104px !important; max-width: none !important; }
	.cs-kv > * + * { margin-left: 12px !important; }

	/* Owner signature: name on its own line, direct line below (it wrapped beside the phone) */
	.cs-sig { flex-direction: column !important; align-items: flex-start !important; }
	.cs-sig.cs-keeprow > * { width: 100% !important; max-width: none !important; flex: none !important; align-items: flex-start !important; }
	.cs-sig > * + * { margin: 16px 0 0 !important; }
	.cs-sig .elementor-heading-title { text-align: left !important; }

	/* Name ... label rows and link ... arrow rows: text takes the room, the end item sits right */
	.cs-keeprow.cs-spread { justify-content: space-between !important; align-items: center !important; }
	.cs-keeprow.cs-spread > :first-child { flex: 1 1 auto !important; width: auto !important; max-width: none !important; }
	.cs-keeprow.cs-spread > :last-child { flex: none !important; width: auto !important; margin-top: 0 !important; }
	.cs-keeprow.cs-spread:not(.cs-rowlink) { align-items: baseline !important; }   /* town name ... VIRGINIA on one baseline */

	/* Signature: the name keeps its desktop text width otherwise and wraps */
	.cs-sig .elementor-widget { width: 100% !important; max-width: 100% !important; --container-widget-width: 100% !important; }

	/* Home service rows: the arrow sits beside the title instead of on a line of its own */
	.cs-svcrow { position: relative; }
	.cs-svcrow > :first-child { padding-right: 36px; }
	.cs-svcrow > .elementor-widget-html { position: absolute !important; left: auto !important; right: 0 !important; top: 28px; width: auto !important; margin: 0 !important; }

	/* Location link rows (Service Area): desktop line-height is too open once the text wraps */
	.cs-rowlink.cs-spread { padding-top: 16px !important; padding-bottom: 16px !important; }
	.cs-rowlink.cs-spread .elementor-heading-title { line-height: 1.3 !important; }

	/* Contact details: clear the divider; long values wrap tightly; the email scales instead of overflowing at 320 */
	.cs-info { padding-top: 16px !important; }
	.cs-info .elementor-heading-title { line-height: 1.35 !important; }
	.cs-info .elementor-heading-title:has(a[href^="mailto:"]) { font-size: clamp(16px, 5.2vw, 24px) !important; }

	/* Footer: brand block, then Explore | Services side by side, then contact; compact bottom bar */
	.cs-fcols { display: grid !important; grid-template-columns: max-content 1fr; column-gap: 32px; row-gap: 40px; }   /* Explore is short; Services gets the rest so its links don't wrap at 320 */
	.cs-fcols > * { width: auto !important; min-width: 0; margin: 0 !important; }
	.cs-fcols > :first-child, .cs-fcols > :last-child { grid-column: 1 / -1; }
	.cs-fcols > :first-child .elementor-widget-image img { width: 168px !important; height: auto !important; }
	.cs-footer .cs-flink a { display: inline-block; padding: 6px 0; margin: -6px 0; }   /* 34px tap height, same layout */
	.cs-fbottom { padding-top: 24px !important; }
	.cs-fbottom > * + * { margin-top: 8px !important; }

	/* Buttons are full width on phones with centred labels: desktop side padding only forced labels onto two lines at 320 */
	.elementor-widget-button .elementor-button { padding-left: 16px !important; padding-right: 16px !important; white-space: nowrap; }
}
@media (max-width: 374px) {
	.cs-form label { letter-spacing: 1.2px; }   /* keeps the required * on the label's line */
}