/* ==========================================================================
   Atlas Sport — "Contact"
   Paired with atlas-contact.php
   Mobile-first; the desktop layout starts at 993px, matching the theme's
   own breakpoint and the rest of the atlas-* packages.

   Note the deliberate background inversion between the two artboards: on
   mobile the form band is cream and the card inside it white, on desktop
   the band is white and the card cream. Same for the map band. The rules
   below follow the design rather than flattening it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Host container. Shoptimizer's header.php leaves
   #content > .shoptimizer-archive > .col-full open, so without this the page
   renders inside the theme's 1170px box. Scoped to the body class added in
   atlas-contact.php, never to .col-full globally.
   -------------------------------------------------------------------------- */

.atlas-ct-page .site-content .shoptimizer-archive .col-full {
	max-width: none;
	padding: 0;
}
.atlas-ct-page .site-content .shoptimizer-archive { margin-bottom: 0; }
.atlas-ct-page .archive-header { padding: 0; }
.atlas-ct-page .content-area { width: 100%; clear: both; }
.atlas-ct-page .entry-header { display: none; }
.atlas-ct-page .entry-content { margin: 0; }

.atlas-ct,
.atlas-ct *,
.atlas-ct *::before,
.atlas-ct *::after { box-sizing: border-box; }

.atlas-ct {
	--ct-dark: #12291B;
	--ct-deep: #07301A;
	--ct-green: #0C6436;
	--ct-green-mid: #178A45;
	--ct-green-band: #0F5C30;
	--ct-lime: #7AC943;
	--ct-body: #5b6660;
	--ct-quiet: #8d968e;
	--ct-cream: #f6f8f4;
	--ct-line: #eef0ec;
	--ct-max: 1440px;

	width: 100%;
	margin: 0;
	background: #fff;
	color: var(--ct-body);
	font-family: 'Open Sans', Roboto, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.atlas-ct a { color: inherit; text-decoration: none; }
.atlas-ct ul { margin: 0; padding: 0; list-style: none; }
.atlas-ct li::before { content: none !important; } /* kill theme tick bullets */
.atlas-ct img { max-width: 100%; }
.atlas-ct__svg { display: block; width: 100%; height: 100%; }
.atlas-ct section { position: relative; }

/* --- shared type ------------------------------------------------------- */

.atlas-ct__h1 {
	margin: 0 0 12px;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -.026em;
	color: #fff;
	text-wrap: balance;
}

.atlas-ct__h2 {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.022em;
	color: var(--ct-dark);
	text-wrap: balance;
}
.atlas-ct__h2--sm { margin-bottom: 18px; }

/* --- 1. hero ----------------------------------------------------------- */

.atlas-ct__hero {
	position: relative;
	overflow: hidden;
	background: var(--ct-deep);
	padding: 26px 20px 34px;
}

/* The blueprint grid: two hairline gradients crossing. */
.atlas-ct__herogrid-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .24;
	background-image:
		linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
	background-size: 34px 34px;
}
.atlas-ct__heroglow {
	position: absolute;
	right: -110px;
	top: -160px;
	width: 420px;
	height: 420px;
	pointer-events: none;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(122, 201, 67, .24) 0%, rgba(122, 201, 67, 0) 68%);
}

.atlas-ct__heroinner {
	position: relative;
	z-index: 2;
	max-width: var(--ct-max);
	margin: 0 auto;
}

.atlas-ct__crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
	font-size: 12px;
	font-weight: 500;
	color: #8fb79a;
}
.atlas-ct__crumbs a { color: #c3dbca; }
.atlas-ct__crumbs [aria-current] { color: #fff; font-weight: 600; }
.atlas-ct__crumbsep { display: flex; flex: 0 0 auto; width: 12px; height: 12px; }

.atlas-ct__lead {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: #dbeadf;
	text-wrap: pretty;
}

/* --- 2. formular ------------------------------------------------------- */

.atlas-ct__formsec {
	background: var(--ct-cream);
	padding: 34px 20px;
	scroll-margin-top: 100px; /* the sticky header, when we jump to #formular */
}
.atlas-ct__formcopy p {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ct-body);
	text-wrap: pretty;
}

.atlas-ct__card {
	background: #fff;
	border-radius: 16px;
	padding: 22px 20px 20px;
}

.atlas-ct__sent {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #eff8e7;
	border: 1px solid #cbe7ae;
	border-radius: 12px;
	padding: 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #255c30;
}
.atlas-ct__senticon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 7px;
	border-radius: 50%;
	background: #4c9a3f;
	color: #fff;
}

.atlas-ct__form { display: flex; flex-direction: column; gap: 10px; }
.atlas-ct__row { display: flex; flex-direction: column; gap: 10px; }

.atlas-ct__field {
	display: flex;
	align-items: center;
	gap: 11px;
	background: var(--ct-cream);
	border: 1.5px solid #e2e7de;
	border-radius: 12px;
	padding: 13px 15px;
	transition: border-color .16s ease;
}
.atlas-ct__field--area { align-items: flex-start; }
.atlas-ct__field:focus-within { border-color: var(--ct-lime); }
.atlas-ct__fieldicon {
	display: flex;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: #98a29a;
}
.atlas-ct__field--area .atlas-ct__fieldicon { margin-top: 2px; }

/* Qualified past the theme's own input rules, which match at the same
   specificity and would otherwise win on source order. */
.atlas-ct .atlas-ct__field input,
.atlas-ct .atlas-ct__field textarea {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	background: none;
	box-shadow: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ct-dark);
}
.atlas-ct .atlas-ct__field textarea { line-height: 1.5; resize: vertical; }
.atlas-ct .atlas-ct__field input::placeholder,
.atlas-ct .atlas-ct__field textarea::placeholder { color: #98a29a; opacity: 1; }

/* The theme's own :focus rule matches at the same specificity as the base
   above, so state it again here. The visible focus ring is on the wrapper. */
.atlas-ct .atlas-ct__field input:focus,
.atlas-ct .atlas-ct__field textarea:focus {
	border: 0;
	outline: none;
	background: none;
	box-shadow: none;
}

/* Off-screen rather than display:none, so bots that skip hidden fields still
   find it. Never focusable by keyboard. */
.atlas-ct__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.atlas-ct button.atlas-ct__submit {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 2px;
	border: 0;
	border-radius: 12px;
	background: var(--ct-lime);
	color: #06301A;
	padding: 16px 20px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color .18s ease;
}
.atlas-ct button.atlas-ct__submit:hover,
.atlas-ct button.atlas-ct__submit:focus { background: #6cbb35; color: #06301A; }

.atlas-ct__btnarrow { display: flex; flex: 0 0 auto; width: 18px; height: 18px; }

/* --- 3. contact + consilieri ------------------------------------------- */

/* The section itself is a bare wrapper on mobile: each half carries its own
   background so the two bands alternate, as in the artboard. */
.atlas-ct__contact { background: #fff; }

.atlas-ct__reach { background: var(--ct-cream); padding: 34px 20px 32px; }
.atlas-ct__team { background: #fff; padding: 34px 20px; }

.atlas-ct__channel {
	display: flex;
	align-items: center;
	gap: 13px;
	background: #fff;
	border: 1px solid var(--ct-line);
	border-radius: 14px;
	padding: 18px;
	margin-bottom: 12px;
	transition: border-color .16s ease, box-shadow .16s ease;
}
.atlas-ct__channel:last-of-type { margin-bottom: 0; }
.atlas-ct__channel:hover {
	border-color: #cfe0c9;
	box-shadow: 0 8px 22px rgba(20, 40, 25, .07);
}
.atlas-ct__channelicon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	padding: 11px;
	border-radius: 12px;
	background: var(--ct-green-band);
	color: #fff;
}
.atlas-ct__channeltext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atlas-ct__channellabel {
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ct-quiet);
}
.atlas-ct__channelvalue {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ct-dark);
	overflow-wrap: anywhere; /* the address is long and the column is narrow */
}

.atlas-ct__coverage {
	margin-top: 22px;
	background: var(--ct-green-band);
	border-radius: 16px;
	padding: 24px 22px;
}
.atlas-ct__coveragelabel {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ct-lime);
}
.atlas-ct__coverage p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #dbeadf;
}

.atlas-ct__people { display: flex; flex-direction: column; gap: 12px; }
.atlas-ct__people li { margin: 0; }
.atlas-ct__people a {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--ct-cream);
	border: 1px solid var(--ct-line);
	border-radius: 14px;
	padding: 18px;
	transition: border-color .16s ease, box-shadow .16s ease;
}
.atlas-ct__people a:hover {
	border-color: #cfe0c9;
	box-shadow: 0 8px 22px rgba(20, 40, 25, .07);
}
.atlas-ct__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #eaf4e2;
	color: var(--ct-green-mid);
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
}
.atlas-ct__persontext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atlas-ct__personname {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ct-dark);
}
.atlas-ct__personrole {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ct-green-mid);
}
.atlas-ct__personphone {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 3px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ct-dark);
}
/* The mark says "this opens WhatsApp", so a number that looks like a call
   link does not mislead. WhatsApp green, not the Atlas green. */
.atlas-ct__waicon {
	display: flex;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	color: #25D366;
}

/* --- 4. hartă ---------------------------------------------------------- */

.atlas-ct__map { background: #fff; padding: 34px 20px 30px; }
.atlas-ct__maphead { margin-bottom: 18px; }
.atlas-ct__maphead .atlas-ct__h2 { margin-bottom: 0; font-size: 22px; letter-spacing: -.02em; }
.atlas-ct__mapimg { display: block; width: 100%; height: auto; }

/* ==========================================================================
   Tablet — 768 to 992px
   ========================================================================== */

@media (min-width: 768px) and (max-width: 992px) {

	.atlas-ct__hero { padding: 40px 40px 48px; }
	.atlas-ct__h1 { font-size: 40px; }
	.atlas-ct__lead { font-size: 18px; max-width: 620px; }

	.atlas-ct__formsec { padding: 54px 40px; }
	.atlas-ct__h2 { font-size: 30px; }
	.atlas-ct__formcopy p { font-size: 17px; max-width: 620px; }
	.atlas-ct__card { padding: 28px 26px 26px; }
	.atlas-ct__row { flex-direction: row; gap: 12px; }
	.atlas-ct__row .atlas-ct__field { flex: 1 1 0; min-width: 0; }

	.atlas-ct__reach,
	.atlas-ct__team { padding: 48px 40px; }
	.atlas-ct__people {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}

	.atlas-ct__map { padding: 48px 40px; }
	.atlas-ct__maphead { text-align: center; max-width: 700px; margin: 0 auto 24px; }
	.atlas-ct__maphead .atlas-ct__h2 { font-size: 30px; }
	.atlas-ct__mapimg { max-width: 300px; margin: 0 auto; }
}

/* ==========================================================================
   Desktop — 993px and up
   ========================================================================== */

@media (min-width: 993px) {

	/* --- hero --- */
	.atlas-ct__hero { padding: 52px 56px 64px; }
	.atlas-ct__herogrid-bg { opacity: .28; background-size: 46px 46px; }
	.atlas-ct__heroglow {
		right: -160px;
		top: -220px;
		width: 720px;
		height: 720px;
		background: radial-gradient(circle, rgba(122, 201, 67, .22) 0%, rgba(122, 201, 67, 0) 66%);
	}

	.atlas-ct__crumbs { margin-bottom: 34px; font-size: 14px; }
	.atlas-ct__crumbsep { width: 14px; height: 14px; }

	.atlas-ct__h1 {
		margin-bottom: 16px;
		max-width: 820px;
		font-size: 52px;
		line-height: 1.1;
		letter-spacing: -.03em;
	}
	.atlas-ct__lead { max-width: 640px; font-size: 19px; line-height: 1.6; }

	/* --- formular: the band turns white and the card cream --- */
	.atlas-ct__formsec { background: #fff; padding: 74px 56px 76px; }
	.atlas-ct__formgrid {
		display: flex;
		align-items: flex-start;
		gap: 64px;
		max-width: var(--ct-max);
		margin: 0 auto;
	}
	.atlas-ct__formcopy { flex: 1 1 0; min-width: 0; }
	.atlas-ct__formcopy p { margin: 0; max-width: 520px; font-size: 18px; line-height: 1.75; }

	.atlas-ct__h2 { margin-bottom: 20px; font-size: 38px; line-height: 1.16; letter-spacing: -.028em; }
	.atlas-ct__h2--sm { margin-bottom: 26px; font-size: 32px; letter-spacing: -.026em; }

	.atlas-ct__card {
		flex: 0 0 auto;
		width: 640px;
		background: var(--ct-cream);
		border-radius: 20px;
		padding: 32px 34px 30px;
	}

	.atlas-ct__sent { gap: 14px; border-radius: 14px; padding: 20px 22px; font-size: 16px; line-height: 1.45; }
	.atlas-ct__senticon { width: 38px; height: 38px; padding: 9px; }

	.atlas-ct__form { gap: 12px; }
	.atlas-ct__row { flex-direction: row; gap: 12px; }
	.atlas-ct__row .atlas-ct__field { flex: 1 1 0; min-width: 0; }

	.atlas-ct__field {
		gap: 12px;
		background: #fff;
		border-radius: 13px;
		padding: 14px 16px;
	}
	.atlas-ct__fieldicon { width: 20px; height: 20px; }
	.atlas-ct .atlas-ct__field input,
	.atlas-ct .atlas-ct__field textarea { font-size: 15px; }

	.atlas-ct button.atlas-ct__submit {
		gap: 11px;
		margin-top: 4px;
		border-radius: 13px;
		padding: 17px 20px;
		font-size: 17px;
		box-shadow: 0 10px 22px rgba(122, 201, 67, .30);
	}
	.atlas-ct__btnarrow { width: 20px; height: 20px; }

	/* --- contact + consilieri: one cream band, two columns --- */
	.atlas-ct__contact { background: var(--ct-cream); padding: 70px 56px 74px; }
	.atlas-ct__contactgrid {
		display: flex;
		align-items: flex-start;
		gap: 64px;
		max-width: var(--ct-max);
		margin: 0 auto;
	}
	.atlas-ct__reach {
		flex: 0 0 auto;
		width: 460px;
		background: none;
		padding: 0;
	}
	.atlas-ct__team {
		flex: 1 1 0;
		min-width: 0;
		background: none;
		padding: 0;
	}

	.atlas-ct__channel { gap: 16px; border-radius: 16px; padding: 22px 24px; margin-bottom: 16px; }
	.atlas-ct__channelicon { width: 48px; height: 48px; padding: 13px; border-radius: 14px; }
	.atlas-ct__channellabel { font-size: 13px; }
	.atlas-ct__channelvalue { font-size: 19px; }

	.atlas-ct__coverage { margin-top: 30px; padding: 26px 24px; }

	.atlas-ct__people {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
	.atlas-ct__people a { gap: 16px; background: #fff; border-radius: 16px; padding: 22px; }
	.atlas-ct__avatar { width: 52px; height: 52px; font-size: 18px; }
	.atlas-ct__persontext { gap: 3px; }
	.atlas-ct__personname { font-size: 17px; }
	.atlas-ct__personrole { font-size: 13px; }
	.atlas-ct__personphone { margin-top: 4px; font-size: 15px; }
	.atlas-ct__waicon { width: 16px; height: 16px; }

	/* --- hartă: cream on desktop, centred head --- */
	.atlas-ct__map { background: var(--ct-cream); padding: 56px 56px 52px; }
	.atlas-ct__maphead {
		text-align: center;
		max-width: 820px;
		margin: 0 auto 28px;
	}
	.atlas-ct__maphead .atlas-ct__h2 { font-size: 38px; line-height: 1.14; letter-spacing: -.03em; }
	.atlas-ct__mapimg { max-width: 360px; margin: 0 auto; }
}

/* Narrow desktops: the 640px card plus a 64px gutter leaves the copy column
   too thin, so tighten both before anything collides. */
@media (min-width: 993px) and (max-width: 1200px) {
	.atlas-ct__hero,
	.atlas-ct__formsec,
	.atlas-ct__contact,
	.atlas-ct__map { padding-left: 36px; padding-right: 36px; }
	.atlas-ct__formgrid,
	.atlas-ct__contactgrid { gap: 40px; }
	.atlas-ct__card { width: 520px; }
	.atlas-ct__reach { width: 400px; }
	.atlas-ct__h1 { font-size: 44px; }
	.atlas-ct__h2 { font-size: 32px; }
	.atlas-ct__h2--sm { font-size: 28px; }
	.atlas-ct__people { gap: 14px; }
	.atlas-ct__mapimg { max-width: 310px; }
}

@media (prefers-reduced-motion: reduce) {
	.atlas-ct * { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Contact Form 7 inside the card (ATLAS_CT_FORM_SHORTCODE)

   CF7 emits its own markup: everything in one <p>, a plain <span> before each
   control as the label, and <br> between the two. The rules below drop that
   line-break flow and re-skin the controls so the form matches the built-in
   one above (same pill fields, same lime submit).

   The label spans carry inline styles (font-size/text-indent/display), which
   only !important can beat. They are the only spans in the form with no
   class, hence :not([class]).
   -------------------------------------------------------------------------- */

.atlas-ct__cf7 { width: 100%; }
.atlas-ct__cf7 .wpcf7 { margin: 0; }
.atlas-ct__cf7 form.wpcf7-form { margin: 0; }
.atlas-ct__cf7 form.wpcf7-form > p { margin: 0; }
.atlas-ct__cf7 form.wpcf7-form br { display: none; }

/* Label above each control. */
.atlas-ct .atlas-ct__cf7 form.wpcf7-form p > span:not([class]) {
	display: block !important;
	margin: 14px 0 6px;
	text-indent: 0 !important;
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ct-body);
}
.atlas-ct .atlas-ct__cf7 form.wpcf7-form p > span:not([class]):first-child { margin-top: 0; }

.atlas-ct__cf7 .wpcf7-form-control-wrap { display: block; width: 100%; }

/* Controls, matching .atlas-ct__field. Qualified past the theme's own input
   rules, which match at the same specificity and would win on source order. */
.atlas-ct .atlas-ct__cf7 input.wpcf7-form-control:not([type="submit"]),
.atlas-ct .atlas-ct__cf7 select.wpcf7-form-control,
.atlas-ct .atlas-ct__cf7 textarea.wpcf7-form-control {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 13px 15px;
	background: var(--ct-cream);
	border: 1.5px solid #e2e7de;
	border-radius: 12px;
	box-shadow: none;
	outline: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ct-dark);
	transition: border-color .16s ease;
}
/* The theme pins every textarea to 150px. Let the tag's own row count decide
   instead ("Cu ce te putem ajuta?" is [textarea ... x3], so three rows). */
.atlas-ct .atlas-ct__cf7 textarea.wpcf7-form-control {
	height: auto !important;
	min-height: 0;
	line-height: 1.5;
	resize: vertical;
}

/* Shoptimizer pins .site-content select to 40px. With 26px of padding and a
   18px line box inside, the option text was clipped at the bottom. Both
   controls size from their content instead, which also keeps them equal. */
.atlas-ct .atlas-ct__cf7 input.wpcf7-form-control:not([type="submit"]),
.atlas-ct .atlas-ct__cf7 select.wpcf7-form-control {
	height: auto !important;
	min-height: 47px;
	line-height: 1.3 !important;
}
.atlas-ct .atlas-ct__cf7 input.wpcf7-form-control:focus,
.atlas-ct .atlas-ct__cf7 select.wpcf7-form-control:focus,
.atlas-ct .atlas-ct__cf7 textarea.wpcf7-form-control:focus {
	border-color: var(--ct-lime);
	background: var(--ct-cream);
	box-shadow: none;
	outline: none;
}
.atlas-ct .atlas-ct__cf7 input.wpcf7-form-control::placeholder,
.atlas-ct .atlas-ct__cf7 textarea.wpcf7-form-control::placeholder {
	color: #98a29a;
	opacity: 1;
}

/* Native select chrome swapped for the same chevron the rest of the page uses. */
.atlas-ct .atlas-ct__cf7 select.wpcf7-form-control {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235b6660' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 13px 8px;
	cursor: pointer;
}
/* The empty first option reads as placeholder text, not as an answer. */
.atlas-ct .atlas-ct__cf7 select.wpcf7-form-control:has(option[value=""]:checked) { color: #98a29a; }

/* Submit, matching .atlas-ct__submit. */
.atlas-ct__cf7 form.wpcf7-form > p:last-of-type { margin-top: 20px; }
.atlas-ct .atlas-ct__cf7 input.wpcf7-submit {
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 12px;
	background: var(--ct-lime);
	color: #06301A;
	padding: 16px 20px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color .18s ease;
}
.atlas-ct .atlas-ct__cf7 input.wpcf7-submit:hover,
.atlas-ct .atlas-ct__cf7 input.wpcf7-submit:focus { background: #6cbb35; color: #06301A; }

/* Validation and response messages. */
.atlas-ct__cf7 .wpcf7-not-valid-tip {
	margin-top: 5px;
	font-size: 12px;
	font-weight: 600;
	color: #b3261e;
}
.atlas-ct .atlas-ct__cf7 .wpcf7-not-valid { border-color: #e39c96; }
.atlas-ct__cf7 .wpcf7-response-output {
	margin: 16px 0 0 !important;
	padding: 13px 15px !important;
	border: 1px solid #cbe7ae !important;
	border-radius: 12px !important;
	background: #eff8e7;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	color: #255c30;
}
.atlas-ct__cf7 .wpcf7 form.invalid .wpcf7-response-output,
.atlas-ct__cf7 .wpcf7 form.unaccepted .wpcf7-response-output,
.atlas-ct__cf7 .wpcf7 form.failed .wpcf7-response-output {
	border-color: #e39c96 !important;
	background: #fdf1f0;
	color: #8c211a;
}
.atlas-ct__cf7 .wpcf7-spinner { margin: 0 auto; display: block; }

/* A control with no label of its own (a label deleted from the form) would
   otherwise sit flush against the field above it. Every control gets the gap,
   and the ones that do follow a label give it back, since the label already
   carries its own bottom margin.

   Note the br in the selector: CF7 puts one between the label and its control,
   and although it is hidden above it is still an element, so a plain
   "label + control" adjacency never matches. */
.atlas-ct__cf7 form.wpcf7-form p .wpcf7-form-control-wrap {
	margin-top: 12px;
}
.atlas-ct__cf7 form.wpcf7-form p span:not([class]) + .wpcf7-form-control-wrap,
.atlas-ct__cf7 form.wpcf7-form p span:not([class]) + br + .wpcf7-form-control-wrap {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   Two-column rows

   CF7's default output is one flat list, so pairing fields needs wrappers in
   the form itself (see the markup in the README of this package). Each row is
   a flex line that stacks below 600px and splits in two above it.
   -------------------------------------------------------------------------- */

.atlas-ct__cf7 .atlas-f { display: flex; flex-direction: column; gap: 12px; }
.atlas-ct__cf7 .atlas-f__row { display: flex; flex-direction: column; gap: 12px; }
.atlas-ct__cf7 .atlas-f__col { display: block; min-width: 0; }

/* WordPress runs the form content through wpautop, which wraps the inside of
   each row in a <p>. That paragraph would become the row's only flex item and
   shrink to its content, leaving the fields at their intrinsic widths. Give it
   the row's own layout instead, so the columns land on it. */
.atlas-ct__cf7 .atlas-f__row > p {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 100%;
	width: 100%;
	margin: 0;
}

.atlas-ct .atlas-ct__cf7 .atlas-f__lab {
	display: block;
	margin: 0 0 6px;
	text-indent: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ct-body);
}

/* Inside a row the wrappers are the layout, so drop the stacking margin. */
.atlas-ct__cf7 .atlas-f .wpcf7-form-control-wrap + .wpcf7-form-control-wrap { margin-top: 0; }
.atlas-ct__cf7 .atlas-f .wpcf7-form-control-wrap { display: block; }

@media (min-width: 600px) {
	.atlas-ct__cf7 .atlas-f__row,
	.atlas-ct__cf7 .atlas-f__row > p { flex-direction: row; align-items: flex-start; }
	.atlas-ct__cf7 .atlas-f__col { flex: 1 1 0; }
}

/* wpautop can leave empty paragraphs between the row wrappers. */
.atlas-ct__cf7 form.wpcf7-form p:empty { display: none; }

/* --------------------------------------------------------------------------
   Hero title on one line from 993px up

   The heading was capped at 820px while a single line needs ~985px at the
   desktop size, so it always broke in two and pushed the lead text down.
   Uncapping it and tying the size to the viewport keeps it on one line from
   993px to 1900px and beyond (58px is where it stops growing, matching the
   1440px content column).

   Deliberately no white-space: nowrap. If a longer wording ever goes in, it
   wraps like before instead of running off the side of the section.

   Comes after the width blocks above on purpose: it has to override the
   993-1200px rule that pins the size to 44px.
   -------------------------------------------------------------------------- */
@media (min-width: 993px) {
	.atlas-ct__h1 {
		max-width: none;
		font-size: min(3.9vw, 58px);
	}
}