/*
 * Brand effects. Colours and type live in the Elementor kit; this file only
 * holds what Elementor has no control for.
 */

/* ---------------------------------------------------------------------------
 * Highlight: underline a word in any heading and it sits in the mint slate box.
 * Page titles (h1) and the popup heading sweep the box in on load.
 * ------------------------------------------------------------------------- */
:is(h1, h2, h3, h4, h5, h6) u {
	position: relative;
	z-index: 0;
	display: inline-block;
	padding: .05em .3em 0 .26em;
	line-height: .92;
	color: #000;
	text-decoration: none;
	clip-path: polygon(.17em 0, 100% 0, calc(100% - .17em) 100%, 0 100%);
}
:is(h1, h2, h3, h4, h5, h6) u::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #83FBD7;
	transform-origin: 0 50%;
}
h1 u,
.elementor-location-popup h2 u {
	animation: cr-hl-text .3s ease .78s both;
}
h1 u::before,
.elementor-location-popup h2 u::before {
	animation: cr-hl-bar .75s cubic-bezier(.7, 0, .2, 1) .45s both;
}
@keyframes cr-hl-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cr-hl-text { from { color: #fff; } to { color: #000; } }

/* Google's reCAPTCHA badge parks itself off-screen to the right; it must not widen the page. */
html,
body {
	overflow-x: clip;
}

/* Headings wrap into balanced lines, as in the design. */
.e-heading-base {
	text-wrap: balance;
}

/* ---------------------------------------------------------------------------
 * Buttons: the label rolls up letter by letter (the script splits it).
 * ------------------------------------------------------------------------- */
.cr-roll {
	display: flex;
	overflow: hidden;
	height: 1.15em;
	padding: 0 .1em;
	line-height: 1.15;
	white-space: pre;
	transform: skewX(-12deg);
}
.cr-roll .cr-ch {
	position: relative;
	display: inline-block;
	transition: transform .32s cubic-bezier(.65, 0, .2, 1);
	transition-delay: calc(var(--i) * .02s);
}
.cr-roll .cr-ch::after {
	content: attr(data-ch);
	position: absolute;
	top: 100%;
	left: 0;
}
:is([data-cr~="roll"], .ff-btn-submit):is(:hover, :focus-visible) .cr-ch {
	transform: translateY(-100%);
}

/* ---------------------------------------------------------------------------
 * Links in running text: bold, a 3px mint underline that fills on hover.
 * Covers page paragraphs, post bodies (text and lists) and the footer.
 * ------------------------------------------------------------------------- */
:is(.elementor-widget-text-editor, .elementor-widget-icon-list, .e-paragraph-base, .elementor-widget-theme-post-content) a:not(.elementor-button) {
	padding: 0 2px;
	margin: 0 -2px;
	font-weight: 700;
	color: #000;
	text-decoration: none;
	background: linear-gradient(#83FBD7, #83FBD7) no-repeat 0 100% / 100% 3px;
	transition: background-size .25s cubic-bezier(.65, 0, .2, 1), color .25s;
}
:is(.elementor-widget-text-editor, .elementor-widget-icon-list, .e-paragraph-base, .elementor-widget-theme-post-content) a:not(.elementor-button):hover {
	color: #000;
	background-size: 100% 100%;
}
[data-cr-tone~="dark"] :is(.elementor-widget-text-editor, .e-paragraph-base) a:not(.elementor-button),
.e-paragraph-base[data-cr-tone~="dark"] a {
	color: #83FBD7;
}
[data-cr-tone~="dark"] :is(.elementor-widget-text-editor, .e-paragraph-base) a:not(.elementor-button):hover,
.e-paragraph-base[data-cr-tone~="dark"] a:hover {
	color: #000;
}
[data-cr~="bloom"] :is(.e-paragraph-base, .elementor-widget-text-editor) a:not(.elementor-button) {
	white-space: nowrap;
	color: #fff;
}
[data-cr~="bloom"] :is(.e-paragraph-base, .elementor-widget-text-editor) a:not(.elementor-button):hover {
	color: #000;
}

/* ---------------------------------------------------------------------------
 * Bullets: the mint slate arrow. Lists keep their numbers when numbered.
 * Icon lists left on the default dot get the arrow automatically.
 * ------------------------------------------------------------------------- */
.elementor-icon-list-icon:has(.e-fas-circle, .fa-circle) :is(svg, i) {
	display: none;
}
.elementor-icon-list-icon:has(.e-fas-circle, .fa-circle)::before,
:is(.elementor-widget-text-editor, .e-paragraph-base, .cr-list) ul > li::before {
	content: "";
	display: block;
	width: 15px;
	height: 10px;
	background: url("/wp-content/uploads/2026/10/created-arrow-mint.webp") center / contain no-repeat;
}
.elementor-icon-list-icon:has(.e-fas-circle, .fa-circle) {
	align-self: flex-start;
	margin-top: .6em;
}
:is(.elementor-widget-text-editor, .e-paragraph-base, .cr-list) ul {
	padding-left: 0 !important;
	list-style: none !important;
}
:is(.elementor-widget-text-editor, .e-paragraph-base, .cr-list) ul > li {
	position: relative;
	padding-left: 29px;
	list-style: none !important;
}
:is(.elementor-widget-text-editor, .e-paragraph-base, .cr-list) ul > li::before {
	position: absolute;
	top: .62em;
	left: 0;
}

/* ---------------------------------------------------------------------------
 * Glows: dark sections fade to green in the top-right corner; the footer
 * fades to green in the bottom-left.
 * ------------------------------------------------------------------------- */
[data-cr~="glow"],
[data-cr~="bloom"] {
	position: relative;
	isolation: isolate;
}
/* The top glow may run down behind the sections that follow; it never widens the page. */
[data-cr~="glow"] {
	overflow-x: clip;
	overflow-y: visible;
}
[data-cr~="bloom"] {
	overflow: hidden;
}
[data-cr~="glow"]::after,
[data-cr~="bloom"]::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}
[data-cr~="glow"]::after {
	top: 0;
	right: 0;
	width: min(1500px, 130vw);
	height: 1100px;
	background: radial-gradient(ellipse 60% 62% at 100% 0%, rgba(3, 117, 97, .62) 0%, rgba(2, 76, 63, .34) 38%, rgba(0, 0, 0, 0) 72%);
}
[data-cr~="bloom"]::after {
	bottom: 0;
	left: 0;
	width: min(1100px, 120vw);
	height: 520px;
	background: radial-gradient(ellipse 70% 90% at 0% 100%, rgba(3, 117, 97, .7) 0%, rgba(2, 76, 63, .36) 42%, rgba(0, 0, 0, 0) 76%);
}

/* ---------------------------------------------------------------------------
 * Arrows: slide in one after another, then drift. The script sets each
 * arrow's delay from its position.
 * ------------------------------------------------------------------------- */
[data-cr~="arrow"] {
	opacity: 0;
	animation:
		cr-arrow-in .7s cubic-bezier(.2, .8, .2, 1) var(--d, .3s) forwards,
		cr-arrow-float var(--f, 3.4s) ease-in-out calc(var(--d, .3s) + .9s) infinite;
}
@keyframes cr-arrow-in {
	0% { opacity: 0; transform: translateX(-46px) scale(.6); }
	60% { opacity: 1; }
	100% { opacity: 1; transform: none; }
}
@keyframes cr-arrow-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 6px 0; }
}

/* The form widget's own width cap is lifted; its container sets the width. */
:is(.cr-newsletter, .cr-form-rect) .fluentform {
	max-width: 100% !important;
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Newsletter forms (Fluent Forms widget with the class cr-newsletter):
 * one slanted email field and the SUBSCRIBE button, side by side, wrapping
 * onto two lines on narrow screens. The sponsor form (cr-form-rect) uses
 * plain rectangles.
 * ------------------------------------------------------------------------- */
:is(.cr-newsletter, .cr-form-rect) .frm-fluent-form .ff-el-group {
	margin-bottom: 0;
}
.cr-newsletter .frm-fluent-form .ff-t-container {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.cr-newsletter .frm-fluent-form .ff-t-cell {
	flex: 3 1 240px !important;
	width: auto !important;
	min-width: 0;
	padding: 0 !important;
}
.cr-newsletter .frm-fluent-form .ff-t-cell.ff-t-column-2 {
	flex: 1 0 auto !important;
}
.cr-newsletter--stack .frm-fluent-form .ff-t-cell {
	flex-basis: 100% !important;
}
.cr-newsletter--stack .frm-fluent-form .ff-btn-submit {
	height: 56px;
}
.cr-newsletter .frm-fluent-form .ff-el-input--label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}
:is(.cr-newsletter, .cr-form-rect) .frm-fluent-form .ff-el-input--content {
	padding: 1px;
	background: rgba(255, 255, 255, .45);
	transition: background .2s;
}
.cr-newsletter .frm-fluent-form .ff-el-input--content {
	height: 54px;
	padding: 1px 1.5px;
	clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
:is(.cr-newsletter, .cr-form-rect) .frm-fluent-form .ff-el-input--content:is(:hover, :focus-within) {
	background: #83FBD7;
}
:is(.cr-newsletter, .cr-form-rect) .frm-fluent-form .ff-el-form-control {
	width: 100%;
	box-shadow: none !important;
	outline: none;
}
.cr-newsletter .frm-fluent-form .ff-el-form-control {
	height: 100%;
	clip-path: polygon(9.8px 0, 100% 0, calc(100% - 9.8px) 100%, 0 100%);
}
.cr-form-rect .frm-fluent-form textarea.ff-el-form-control {
	height: 148px;
	padding: 16px 18px;
	line-height: 1.5;
	resize: none;
}
:is(.cr-newsletter, .cr-form-rect) .frm-fluent-form .ff-el-form-control::placeholder {
	color: rgba(255, 255, 255, .55);
	opacity: 1;
}
.cr-form-rect .frm-fluent-form .ff-el-group {
	margin-bottom: 20px;
}
.cr-form-rect .frm-fluent-form .ff-el-input--label label {
	color: #fff;
	font: 700 15px/1.4 Montserrat, sans-serif;
}
.cr-form-rect .frm-fluent-form .ff-el-is-required.asterisk-right label::after {
	color: #83FBD7;
}
:is(.cr-newsletter, .cr-form-rect) form.frm-fluent-form .ff-btn.ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 54px;
	line-height: 1;
	box-shadow: none !important;
	opacity: 1;
	clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.cr-form-rect form.frm-fluent-form .ff-btn.ff-btn-submit {
	width: auto;
	padding: 0 44px;
}
:is(.cr-newsletter, .cr-form-rect) .frm-fluent-form .error {
	color: #ff9b9b;
	font: 400 14px/1.4 Montserrat, sans-serif;
}
:is(.cr-newsletter, .cr-form-rect) .ff-message-success {
	color: #fff;
	font: 400 17px/1.6 Montserrat, sans-serif;
	background: transparent;
	border: 1px solid #83FBD7;
	box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Phone mock-up: the arrows around it are sized relative to its width, so
 * the whole group scales as one piece with its column.
 * ------------------------------------------------------------------------- */
[data-cr~="phone"] {
	container-type: inline-size;
}

/* Every classic Elementor button takes the slanted brand shape. */
.elementor-widget-button .elementor-button {
	border-radius: 0;
	clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

/* The blog's VIEW MORE POSTS button: the slanted mint button. */
.cr-loadmore .e-loop__load-more .elementor-button {
	display: inline-flex;
	align-items: center;
	height: 54px;
	padding: 0 40px;
	border: 0;
	border-radius: 0;
	clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.cr-loadmore .e-loop__load-more .elementor-button-text {
	display: inline-block;
	transform: skewX(-12deg);
}

/* Popups: the page behind blurs; the close button gets a comfortable hit area. */
.elementor-popup-modal {
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.elementor-popup-modal .dialog-close-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	top: 8px;
	right: 8px;
	margin: 0;
}

/* Inside a popup the glow fits the card, and the card never scrolls. */
.elementor-location-popup [data-cr~="glow"]::after {
	width: 100%;
	height: 100%;
}
.elementor-popup-modal .dialog-message {
	overflow: hidden;
}

/* A one-field form (no columns): the button sits 12px below the field. */
.cr-newsletter .frm-fluent-form .ff-el-group:not(.ff_submit_btn_wrapper) + .ff_submit_btn_wrapper {
	margin-top: 12px;
}

/* ---------------------------------------------------------------------------
 * Visitors who ask for less motion get everything in place, no movement.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	h1 u,
	h1 u::before,
	.elementor-location-popup h2 u,
	.elementor-location-popup h2 u::before,
	[data-cr~="arrow"] {
		animation: none;
		opacity: 1;
	}
	.cr-roll .cr-ch {
		transition: none;
	}
}