/*
	Theme Name: K9 Harmony Child
	Theme URI: https://k9harmonyut.com
	Description: Child theme of Hello Elementor for K9 Harmony. Holds the only custom stylesheet on this site. Everything Elementor can do natively is done in Elementor; only what has no native control lives here, and it reads its values from the Elementor global variables so Site Settings stays the single source of truth.
	Author: SoftwarePro
	Author URI: https://softwarepro.nyc
	Template: hello-elementor
	Version: 1.0.0
	Requires at least: 6.0
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello-elementor-child
*/

/* =========================================================
   K9 Harmony — site custom CSS (the only custom CSS file)
   Every value comes from an Elementor global, never a raw hex.
   ========================================================= */

/* Accent words inside a heading. Figma colours single words orange
   inside an H1/H2 line; Elementor has no per-word colour control. */
.k9-accent {
	color: var(--e-global-color-accent);
}

/* Emphasised words inside body text (Figma: "... your dog? Call Brittany"
   where the last words are Ink semibold). No per-word control exists. */
.k9-emphasis {
	color: var(--e-global-color-k9ink);
	font-weight: 600;
}

/* Emphasised words on a dark section (Figma CTA band: "Not sure yet? Start
   with a free phone consultation" where the last words are full white
   semibold inside an 80% white line). No per-word control exists. */
.k9-emphasis-light {
	color: var(--e-global-color-k9white);
	font-weight: 600;
}

/* Emphasised words in brand green (Services hero: "Not sure which service
   you need? Start with a free phone consultation." where the second
   sentence is Green semibold). No per-word control exists. */
.k9-strong-green {
	color: var(--e-global-color-secondary);
	font-weight: 600;
}

/* Hard line breaks inside a heading or an intro line are Figma's DESKTOP
   line endings. Below 1025px the column is narrower and the text already
   wraps on its own, so the break would cut a line in the wrong place ("...
   that fits / their neighborhood."). Elementor has no responsive control
   for a <br> typed into the text, so it is neutralised here and the
   desktop layout keeps the design's exact line endings. */
@media (max-width: 1024px) {
	.elementor-widget-heading .elementor-heading-title br {
		display: none;
	}
}

/* Icon widget vertical centring. The icon wrapper has no line-height of
   its own, so it inherits the body's 1.5 line-height (28.7px) and the
   inline-block icon sits on the baseline, about 3px above centre.
   Elementor's Icon widget has no line-height control. */
.elementor-widget-icon .elementor-icon-wrapper {
	line-height: 0;
}

.elementor-widget-icon .elementor-icon {
	vertical-align: top;
}

/* Button widget line box. The inline-block button sits in a line box that
   inherits the body's 28.7px line-height, so a text-link button (padding 0,
   e.g. "Learn More", 20.27px line) renders 29px tall and pushes everything
   below it down. The button keeps its own typography line-height. */
.elementor-widget-button {
	line-height: 0;
}

/* Services hero buttons (herob1 "Book a $50…" + herob2 "Call …"). Between
   1025 and 1219px the hero is still two fixed columns, so the 320 + 240
   buttons sit side by side and wrap the first label. Stack them full width
   only in that band; desktop keeps the Figma side-by-side and tablet
   (≤1024, full-width text column) keeps them in one comfortable row.
   Raw properties with !important because Elementor's own per-element rules
   (prefixed with the page id) outrank a plain child-theme selector. */
@media (min-width: 1025px) and (max-width: 1219px) {
	.elementor-element-herobtn {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.elementor-element-herobtn > .elementor-element-herob1,
	.elementor-element-herobtn > .elementor-element-herob2 {
		width: 100% !important;
		max-width: 100% !important;
	}

	.elementor-element-herobtn > .elementor-element-herob1 .elementor-button,
	.elementor-element-herobtn > .elementor-element-herob2 .elementor-button {
		width: 100% !important;
	}
}

/* Header dropdown gap (nav menu 6dc6c05, header template 18). Elementor's
   "Distance from menu" control emits no CSS when the submenu pointer is
   "none", so the dropdown panel touched the menu bar. Offset the first-level
   panel and bridge the gap with a transparent ::before, so moving the cursor
   across the gap does not drop the hover and close the menu.
   !important because SmartMenus (the Nav Menu's own script) writes an inline
   margin-top:0 on the panel the moment it opens, which would otherwise win. */
.elementor-element-6dc6c05 .elementor-nav-menu--main .elementor-nav-menu > li {
	position: relative;
}

.elementor-element-6dc6c05 .elementor-nav-menu--main .elementor-nav-menu > li > .elementor-nav-menu--dropdown {
	margin-top: 22px !important;
}

.elementor-element-6dc6c05 .elementor-nav-menu--main .elementor-nav-menu > li > .elementor-nav-menu--dropdown::before {
	content: "";
	position: absolute;
	top: -22px;
	left: 0;
	right: 0;
	height: 22px;
}

/* Hero media quote card (class k9-hero-note). Figma gives it a fixed 452px
   width, but the photo panel it sits in narrows between 1025 and 1083px and
   a fixed card spills past the photo's rounded edge. Capping it at the panel
   width keeps 452 where there is room and shrinks it only when there is not.
   Elementor's container has no working max-width control. */
.k9-hero-note {
	max-width: 100%;
}

/* Finder card photo ("Still Not Sure?" card, image class k9-img-clip). An
   <img> with object-fit:cover + border-radius renders white in the rounded
   corners in Chrome (the webp is painted on a white box before clipping).
   Rounding a clipping wrapper, squaring the image, and forcing a composite
   layer (translateZ) so the rounded clip has no sub-pixel white seam removes
   it. Elementor's image widget has no overflow control on the wrapper. */
.k9-img-clip {
	overflow: hidden;
	border-radius: 12px;
	line-height: 0;
	transform: translateZ(0);
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}

.k9-img-clip img {
	border-radius: 0;
	display: block;
}

/* Image Box with the image on top renders the image as an inline-block on
   the text baseline, which leaves a ~7px gap under it before the text.
   No Elementor control removes it. */
.elementor-widget-image-box .elementor-image-box-img {
	vertical-align: top;
}

/* Icon Box / Image Box titles. The parent theme gives every h1-h6 a 0.5rem
   top margin; these widgets never reset it and expose no control for it, so
   a card title set to H3 would sit 8px lower than the design. */
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-image-box .elementor-image-box-title {
	margin-top: 0;
}

/* Image Box with the image on the left (Success Stories review author,
   Areas We Serve call box). Its text column is width:100%, so the image
   flex-shrinks below its set width; no control stops that. */
.k9-review-author .elementor-image-box-img,
.k9-areas-call .elementor-image-box-img {
	flex-shrink: 0;
}

/* About story chips (Icon List, inline, class k9-story-chips). The three
   steps fit one row only at the full 592px column width. From 1200px down
   the row shrinks — side by side until 1025, then stacked — so the chips
   wrap and the second line opens with a stray arrow. Stacking them keeps
   each step on its own line with its arrow in front. Icon List's Layout
   control is not responsive, so this cannot be set per breakpoint in
   Elementor. */
@media (max-width: 1200px) {
	.k9-story-chips .elementor-icon-list-items.elementor-inline-items {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 8px;
	}

	.k9-story-chips .elementor-icon-list-items.elementor-inline-items .elementor-inline-item {
		margin: 0;
	}

	.k9-story-chips .elementor-icon-list-items.elementor-inline-items .elementor-inline-item::after {
		content: none;
	}
}

/* Image Box that keeps its image beside the text on phones (add the class
   k9-inline-box to the widget). Below 768px Elementor hard-codes a stacked
   layout with a centred image (margin:auto !important) and offers no
   control to keep the Left/Right position. The per-box gaps below carry
   both classes so they always outrank the shared k9-inline-box rule, on
   every page and whatever order the stylesheets land in. */
@media (max-width: 767px) {
	.k9-inline-box .elementor-image-box-wrapper {
		display: flex;
		align-items: center;
		text-align: start;
	}

	.k9-inline-box .elementor-image-box-img {
		flex: 0 0 auto;
		margin: 0 2.9px 0 0 !important;
	}

	/* Review author in the Success Stories carousel: same inline layout,
	   with the Figma 13.5px gap between avatar and name. */
	.k9-inline-box.k9-review-author .elementor-image-box-img {
		margin-right: 13.5px !important;
	}

	/* Areas We Serve call box (photo + "Not sure if Brittany serves your
	   neighborhood?"): same inline layout, Figma 14.36px photo gap. */
	.k9-inline-box.k9-areas-call .elementor-image-box-img {
		margin-right: 14.36px !important;
	}

	/* Services hero rating (stars + "5-Star Reviews · Local Trainer"):
	   Figma keeps the 9px gap between the stars and the label. */
	.k9-inline-box.k9-hero-rating .elementor-image-box-img {
		margin-right: 9px !important;
	}

	/* Services decision rows on phones: the programme link wraps under the
	   need text, so the 40px badge must stop setting the row's text height —
	   otherwise a one-line need leaves a dead strip above its link while a
	   two-line need does not. Taking the badge out of the flow lets the gap
	   follow the text, whatever the line count. Elementor has no control for
	   this: the icon and the title live in the same flex row. */
	.k9-decision-row .elementor-widget-icon-box {
		position: relative;
	}

	.k9-decision-row .elementor-widget-icon-box .elementor-icon-box-icon {
		position: absolute;
		inset-inline-start: 0;
		top: 0;
		margin: 0;
	}

	.k9-decision-row .elementor-widget-icon-box .elementor-icon-box-wrapper {
		padding-inline-start: 56px;
	}
}

/* Success Stories review cards: a review (class k9-review-text) shows four
   lines; "Read more" (class k9-review-more) expands it and then reads
   "Read less" (k9-reviews.js). A review that fits in four lines keeps the
   link's space but hides it. Elementor has no line-clamp or toggle control. */
.k9-review-text:not(.is-expanded) .elementor-heading-title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

.k9-review-more:not(.is-active) {
	visibility: hidden;
}

.k9-review-more .elementor-button {
	cursor: pointer;
}

/* Icon cards (class k9-icon-card on an Icon Box card, on the container
   holding one, or on the video photo): the icon grows while the card is
   hovered. Elementor's icon hover animation only reacts to the icon itself. */
.k9-icon-card .elementor-icon {
	transition: transform 0.3s ease;
}

.k9-icon-card:hover .elementor-icon {
	transform: scale(1.15);
}

/* Icon-box cards that stretch to equal height in a grid (Virtual Training
   "A Great Fit for Many Situations"): a grid row stretches every card to the
   tallest one, but the icon-box wrapper pins to the top, so a one-line card
   and a two-line card in the same row centre their content at different
   heights. Only the left-icon variant (inline-start); top-icon cards keep their top
   alignment. Where a
   card is only as tall as its content this has no visual effect. The widget
   has no vertical content-alignment control of its own. */
.k9-icon-card.elementor-position-inline-start.elementor-widget-icon-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Approach step cards (container class k9-approach-step): hovering anywhere
   on the card swings the arrow in its white badge from pointing down-right
   to along the row, and grows it a little. The badge itself stays put.
   Elementor's icon hover effects only react to the icon's own hover. */
.k9-approach-step .elementor-widget-icon .elementor-icon svg {
	transition: transform 0.3s ease;
	transform-origin: center;
}

.k9-approach-step:hover .elementor-widget-icon .elementor-icon svg {
	transform: rotate(-45deg) scale(1.12);
}

/* Services decision list (container class k9-decision-row). The row's own
   hover fill and border are native container hover controls; what no
   control can reach is what sits INSIDE the hovered row — in Figma the
   icon badge turns accent, its glyph goes white (that colour is baked into
   the exported SVG, whether the glyph is stroked or filled), the need goes
   white semibold, and the programme link with its arrow goes white medium
   even when the pointer is on the row rather than on the link itself. */
.k9-decision-row .elementor-icon,
.k9-decision-row .elementor-icon svg [stroke],
.k9-decision-row .elementor-icon svg path,
.k9-decision-row .elementor-icon-box-title,
.k9-decision-row .elementor-button,
.k9-decision-row .elementor-button svg {
	transition: background-color 0.3s ease, color 0.3s ease, stroke 0.3s ease, fill 0.3s ease;
}

.elementor .k9-decision-row:hover .elementor-widget-icon-box.elementor-view-stacked .elementor-icon {
	background-color: var(--e-global-color-accent);
}

.k9-decision-row:hover .elementor-icon svg [stroke] {
	stroke: var(--e-global-color-k9white);
}

.k9-decision-row:hover .elementor-icon svg path:not([fill="none"]) {
	fill: var(--e-global-color-k9white);
}

.elementor .k9-decision-row:hover .elementor-widget-icon-box .elementor-icon-box-title {
	color: var(--e-global-color-k9white);
	font-weight: 600;
}

body .elementor .k9-decision-row:hover .elementor-widget-button .elementor-button {
	color: var(--e-global-color-k9white);
	font-weight: 500;
}

body .elementor .k9-decision-row:hover .elementor-widget-button .elementor-button svg {
	fill: var(--e-global-color-k9white);
}

/* Choose Your Program: the "Not sure which program…" card (container class
   k9-grid-span-full) spans the whole row once the grid drops to two columns
   (below 1025px). A grid child has no column-span control. */
@media (max-width: 1024px) {
	.e-con.k9-grid-span-full {
		grid-column: 1 / -1;
	}
}

/* Video photo ("See How K9 Harmony Helps", container class
   k9-video-trigger): opens Elementor's own lightbox from the container's
   Attributes. In the lightbox the video sits in a white frame with an
   accent ring on a dark brand-green backdrop. The frame is sized so the
   whole 16:9 video, YouTube controls included, always fits the screen. */
.k9-video-trigger {
	cursor: pointer;
}

#elementor-lightbox-k9video {
	background-color: color-mix(in srgb, var(--e-global-color-k9footerbg) 92%, transparent);
}

#elementor-lightbox-k9video .elementor-video-container .elementor-video-wrapper {
	width: min(90vw, calc((85vh - 16px) * 16 / 9 + 16px));
	max-height: none;
	overflow: hidden;
	border: 8px solid var(--e-global-color-k9white);
	border-radius: 20px;
	box-shadow: 0 0 0 3px var(--e-global-color-accent), 0 40px 90px -20px color-mix(in srgb, var(--e-global-color-k9black) 60%, transparent);
}

/* Contact anchor (#contact, Start Your Training): when the browser jumps to
   it natively (from another page, or without smooth scrolling) it lands
   below the 86px sticky header. */
#contact {
	scroll-margin-top: 86px;
}

/* Site menu Off-Canvas (header template; Off-Canvas widget class
   k9-offcanvas, opened by the orange menu button). A dark brand-green
   overlay behind the panel, divider lines between the stacked menu items
   (the menu shows in the panel below 1201px, class k9-offcanvas-menu) and an
   accent keyboard-focus ring. The overlay control takes no global colour
   with transparency, and the Nav Menu has no item divider when vertical. */
body .elementor-element.elementor-widget-off-canvas.k9-offcanvas .e-off-canvas__overlay {
	background-color: color-mix(in srgb, var(--e-global-color-k9footerbg) 75%, transparent);
}

.k9-offcanvas-menu .elementor-nav-menu > li:not(:last-child) {
	border-bottom: 1px solid var(--e-global-color-k9bordersand);
}

.k9-offcanvas a:focus-visible {
	outline: 2px solid var(--e-global-color-accent);
	outline-offset: 4px;
}

/* Site menu Off-Canvas submenu ("Services" > "Aggression & Reactivity
   Training"). The panel's menu is a vertical MAIN menu, so Elementor styles
   its sub-menu as an absolutely positioned 12em flyout: the Nav Menu's own
   script opened it beside the panel, where the panel clipped it, so the
   arrow looked dead. Laying the sub-menu out in the flow — indented, and as
   wide as the panel allows — turns that same show / hide into a plain
   accordion, while the card itself (white, 12px radius, card border, drop
   shadow, 18/13 item padding) is the header dropdown's own styling, set on
   the widget. !important because the script writes the flyout's position and
   offsets inline the moment it opens. Elementor has no "stack the sub-menu"
   control. */
.k9-offcanvas-menu .elementor-nav-menu--main .elementor-nav-menu ul {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 4px 0 14.36px 19.14px !important;
	overflow: hidden;
}

.k9-offcanvas-menu .sub-arrow {
	transition: transform 0.3s ease;
}

.k9-offcanvas-menu a[aria-expanded="true"] .sub-arrow {
	transform: rotate(180deg);
}

/* Site menu open / close flow: the panel slides on an ease-in-out curve
   (the same curve played backwards on close) and the overlay fades in and
   out over the widget's own animation duration instead of popping. The
   widget has no easing control and its overlay has no animation. */
.k9-offcanvas .e-off-canvas__main.animated {
	animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

.k9-offcanvas .e-off-canvas[aria-hidden="false"] .e-off-canvas__overlay {
	animation: k9-overlay-in var(--e-off-canvas-animation-duration-minimum) ease both;
}

.k9-offcanvas .e-off-canvas.animated-reverse-wrapper .e-off-canvas__overlay {
	animation: k9-overlay-out var(--e-off-canvas-animation-duration-minimum) ease both;
}

@keyframes k9-overlay-in {
	from {
		opacity: 0;
	}
}

@keyframes k9-overlay-out {
	to {
		opacity: 0;
	}
}

/* Inline image pills inside a heading line (Figma: "What Can Change [pill]
   With the Right [pill] Training?"). Elementor cannot place images inside a
   heading line. Every size is in em of the heading's global font size (Figma
   pill 108 x 50.5 on a 50px H2), so the pills scale with the H2 preset at
   every breakpoint. The pill sits on the bottom of the line box and the dog
   cut-out overflows above it, exactly as in the design. */
.k9-pill {
	position: relative;
	display: inline-block;
	width: 2.16em;
	height: 1.01em;
	border-radius: 100px;
	vertical-align: bottom;
}

.k9-pill--accent {
	background-color: var(--e-global-color-accent);
}

.k9-pill--beige {
	width: 2.18em;
	background-color: var(--e-global-color-k9beige);
}

.k9-pill img {
	position: absolute;
	bottom: 0;
	max-width: none;
	height: auto;
	border-radius: 0;
}

.k9-pill--accent img {
	left: 0.308em;
	width: 1.468em;
}

.k9-pill--beige img {
	left: 0.412em;
	width: 1.358em;
}

/* FAQ accordion (Nested Accordion with the class k9-faq). In Figma the open
   item is one box: its question grows to the k9faqopen preset and sits
   14.36px above the answer, and the title's bottom corners join the answer
   panel. The widget's typography, padding and radius have no per-state
   (open) controls. */
.k9-faq .e-n-accordion-item[open] > .e-n-accordion-item-title {
	padding-bottom: 14.36px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.k9-faq .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-text {
	font-size: var(--e-global-typography-k9faqopen-font-size);
	line-height: var(--e-global-typography-k9faqopen-line-height);
}

/* Closing an item: Elementor removes [open] only once the answer has
   collapsed, so the question snapped back to its normal size. It now eases
   back; opening still switches to the open style at once. */
.k9-faq .e-n-accordion-item > .e-n-accordion-item-title {
	transition: padding-bottom 0.3s ease, border-radius 0.3s ease;
}

.k9-faq .e-n-accordion-item > .e-n-accordion-item-title .e-n-accordion-item-title-text {
	transition: font-size 0.3s ease, line-height 0.3s ease;
}

.k9-faq .e-n-accordion-item[open] > .e-n-accordion-item-title,
.k9-faq .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-text {
	transition: none;
}

/* About page FAQ (Accordion widget, class k9-faq-classic). Figma draws the
   rows as separate 12px cards 14.36px apart, and the open row's question
   keeps the answer panel's colour. The Accordion widget has no per-item
   radius, no gap between items and no active-title background. */
.k9-faq-classic .elementor-accordion-item {
	border: 0;
	border-radius: 12px;
	overflow: hidden;
}

.k9-faq-classic .elementor-accordion-item + .elementor-accordion-item {
	margin-top: 14.36px;
}

.k9-faq-classic .elementor-tab-title.elementor-active {
	background-color: var(--e-global-color-k9lilacactive);
}

/* Virtual Training FAQ (classic Accordion, classes k9-faq-classic k9-faq-vt).
   The open question grows to the k9faqopen preset and its row joins the answer
   with the Figma 14.36px gap; the whole open item is one uniform k9lilacactive
   box (the title_background global makes a per-element rule that outranks the
   shared active rule, so the active bg needs !important here); the chevron
   points down when closed and up when open; the SVG disclosure renders at the
   Figma 21.5px box; and the questions stay sentence case (the k9faq preset
   would capitalise them). Scoped to k9-faq-vt so the About FAQ is untouched. */
.k9-faq-vt .elementor-accordion-icon svg {
	width: 21.5px;
	height: 21.5px;
}

.k9-faq-vt .elementor-accordion-title {
	text-transform: none !important;
}

.k9-faq-vt .elementor-accordion-icon-closed svg {
	transform: rotate(180deg);
}

.k9-faq-vt .elementor-tab-title.elementor-active {
	padding-bottom: 14.36px;
}

.k9-faq-vt .elementor-tab-title.elementor-active {
	background-color: var(--e-global-color-k9lilacactive) !important;
}

.k9-faq-vt .elementor-tab-title.elementor-active .elementor-accordion-title {
	font-size: var(--e-global-typography-k9faqopen-font-size);
	line-height: var(--e-global-typography-k9faqopen-line-height);
}

/* Areas We Serve chips (heading widgets with the class k9-area-chip).
   Clicking one moves the Google Map beside them to that area
   (k9-areas-map.js) and marks it .is-active, filled as in Figma. A
   heading has no clickable or active state of its own. */
.k9-area-chip {
	cursor: pointer;
}

.elementor-element.k9-area-chip.is-active {
	background-color: var(--e-global-color-primary);
}

.elementor-element.k9-area-chip.is-active .elementor-heading-title {
	color: var(--e-global-color-k9white);
}

.k9-area-chip:focus-visible {
	outline: 2px solid var(--e-global-color-accent);
	outline-offset: 2px;
}

/* Start Your Training form (Form widget with Step fields, class
   k9-steps-form). Figma draws each step as a coloured card holding its
   fields — the first field's label is the card title — with the step
   button 20px below the card. The Form widget has no per-step background,
   no gap between the Back / Next buttons and no placeholder colour. */
.k9-steps-form .e-form__step {
	--k9-step-bg: var(--e-global-color-k9mint);
}

.k9-steps-form .e-form__step:nth-child(2) {
	--k9-step-bg: var(--e-global-color-k9lavender);
}

.k9-steps-form .e-form__step:nth-child(3) {
	--k9-step-bg: var(--e-global-color-k9orangetint);
}

.elementor-widget-form.k9-steps-form .e-form__step > .elementor-field-group.elementor-column {
	padding: 0 19.14px 14.36px;
	background-color: var(--k9-step-bg);
}

.elementor-widget-form.k9-steps-form .e-form__step > .e-field-step + .elementor-field-group.elementor-column {
	padding-top: 19.14px;
	border-radius: 12px 12px 0 0;
}

.elementor-widget-form.k9-steps-form .e-form__step > .elementor-field-group.elementor-column:has(+ .e-form__buttons) {
	padding-bottom: 19.14px;
	border-radius: 0 0 12px 12px;
}

.k9-steps-form .e-form__buttons {
	flex-wrap: nowrap;
	gap: 14.36px;
	margin-top: 20px;
}

.k9-steps-form .elementor-field-textual::placeholder {
	color: var(--e-global-color-k9placeholder);
	opacity: 1;
}

/* Start Your Training: the form column (container class k9-sticky-col)
   stays in view while the photo beside it scrolls, and stops at the end of
   its row. It sits 30px below the 86px sticky header. Elementor Pro's Sticky
   needs a script that only an editor save enqueues; CSS sticky needs none.
   Side-by-side layouts only (1025px+). */
@media (min-width: 1025px) {
	.e-con.k9-sticky-col {
		position: sticky;
		top: 116px;
	}
}

/* Contact page waitlist form (Form widget, class k9-wl-form). Figma stacks
   the nine fields into three coloured cards, each card's first field carrying
   the step label, with white gaps between the cards and the submit full width
   below. The Form widget has no per-group background, card radius, inter-field
   gap colour or placeholder colour. Grouping comes from per-field classes
   (k9wl-g1/2/3 for the colour, -s for a card's first field, -ge for its last). */
.k9-wl-form .elementor-form-fields-wrapper {
	row-gap: 0;
}

.k9-wl-form .elementor-field-group {
	padding: 0 19.14px;
	margin: 0;
}

.k9-wl-form .elementor-field-group.k9wl-g1 {
	background-color: var(--e-global-color-k9mint);
}

.k9-wl-form .elementor-field-group.k9wl-g2 {
	background-color: var(--e-global-color-k9lavender);
}

.k9-wl-form .elementor-field-group.k9wl-g3 {
	background-color: var(--e-global-color-k9orangetint);
}

.k9-wl-form .elementor-field-group.k9wl-g1s {
	padding-top: 19.14px;
	border-radius: 14px 14px 0 0;
}

.k9-wl-form .elementor-field-group.k9wl-g2s,
.k9-wl-form .elementor-field-group.k9wl-g3s {
	padding-top: 19.14px;
	border-radius: 14px 14px 0 0;
	margin-top: 19.14px;
}

.k9-wl-form .elementor-field-group.k9wl-ge {
	padding-bottom: 19.14px;
	border-radius: 0 0 14px 14px;
}

.k9-wl-form .elementor-field-group:not(.k9wl-ge) .elementor-field {
	margin-bottom: 14.36px;
}

.k9-wl-form .elementor-field-type-submit {
	padding: 0;
	margin-top: 19.14px;
}

.k9-wl-form .elementor-field-textual::placeholder {
	color: var(--e-global-color-k9placeholder);
	opacity: 1;
}

/* Waitlist anchor (#waitlist, the Contact form section): native jumps land
   below the 86px sticky header. */
#waitlist {
	scroll-margin-top: 86px;
}

/* Smooth scrolling (Lenis 1.3.26, k9-smooth-scroll.js) — the library's own
   stylesheet, unchanged. iframes (the Google Map) ignore the pointer only
   while a smooth scroll is moving, so the wheel never gets caught by the
   map mid-scroll; the map is clickable again as soon as scrolling stops. */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
	overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
	overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
	pointer-events: none;
}

.lenis.lenis-autoToggle {
	transition-property: overflow;
	transition-duration: 1ms;
	transition-behavior: allow-discrete;
}