/* ==========================================================================
   Investment Highway — standalone rebuild
   base.css — fonts, reset, and the minimal layout engine the page markup
   relies on (Elementor containers/sections/columns, tabs, accordion,
   carousel, tooltip). Page-specific values live in page.css, which is
   generated 1:1 from the live page's own stylesheet.
   ========================================================================== */

/* ---------- Fonts: TT Hoves ---------- */
@font-face {
	font-family: "TTHoves";
	src: url("../fonts/TTHoves-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "TTHoves";
	src: url("../fonts/TTHoves-Light.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "TTHoves";
	src: url("../fonts/TTHoves-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "TTHoves";
	src: url("../fonts/TTHoves-DemiBold.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ---------- Reset / base typography (Foundation-derived, as on the live site) ---------- */
html { font-size: 100%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
	margin: 0;
	padding: 0;
	font-family: "TTHoves", sans-serif;
	font-weight: 400;
	line-height: 1.5;
	color: #000;
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

blockquote, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6,
li, ol, p, pre, td, th, ul { margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6 {
	font-family: inherit;
	font-weight: 400;
	font-style: normal;
	color: #000;
	margin: 0 0 .5rem;
	line-height: 1.4;
	text-rendering: optimizeLegibility;
}

p { font-size: inherit; line-height: 1.6; margin-bottom: 1rem; text-rendering: optimizeLegibility; }
p:last-child { margin-bottom: 0; }

dl, ol, ul { line-height: 1.6; margin-bottom: 1rem; list-style-position: outside; }
ol, ul { margin-left: 1.25rem; }
ul { list-style-type: disc; }
li { font-size: inherit; }

a { color: #000; text-decoration: none; line-height: inherit; cursor: pointer; }
a:hover { color: #1B8F45; }

img { max-width: 100%; height: auto; border: 0; display: inline-block; vertical-align: middle; }
svg { display: inline-block; }

button { font-family: inherit; font-size: inherit; color: inherit; }

*:focus-visible { outline: 1px auto #1B8F45; }

br.hidden-mobile { display: inline; }
@media (max-width: 767px) { br.hidden-mobile { display: none; } }

/* ---------- Visibility helpers ---------- */
@media (min-width: 1025px) { .elementor-hidden-desktop { display: none !important; } }
@media (max-width: 1024px) and (min-width: 768px) { .elementor-hidden-tablet { display: none !important; } }
@media (max-width: 767px) { .elementor-hidden-mobile { display: none !important; } }

/* ---------- Entrance animation ---------- */
.elementor-invisible { visibility: hidden; }
.elementor-invisible.is-in { visibility: visible; animation: ihFadeIn .9s ease both; }
@keyframes ihFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.elementor-invisible { visibility: visible !important; animation: none !important; }
}

/* ==========================================================================
   Layout engine
   ========================================================================== */

/* ---------- Sections / columns (legacy Elementor layout) ---------- */
.elementor-section { position: relative; }
.elementor-section .elementor-container {
	display: flex;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}
.elementor-section.elementor-section-boxed > .elementor-container { max-width: 1140px; }
.elementor-section.elementor-section-full_width > .elementor-container { max-width: none; }
.elementor-section.elementor-section-items-bottom > .elementor-container { align-items: flex-end; }
.elementor-section.elementor-section-content-middle > .elementor-container { align-items: center; }

.elementor-column {
	position: relative;
	min-height: 1px;
	display: flex;
}
.elementor-col-100 { width: 100%; }
.elementor-col-50 { width: 50%; }
.elementor-col-33 { width: 33.333%; }

.elementor-widget-wrap {
	position: relative;
	width: 100%;
	flex-wrap: wrap;
	align-content: flex-start;
	display: flex;
}
.elementor-widget-wrap > .elementor-element { width: 100%; }
.elementor-column-gap-default > .elementor-column > .elementor-element-populated { padding: 10px; }
.elementor-column-gap-wide > .elementor-column > .elementor-element-populated { padding: 20px; }

@media (max-width: 767px) {
	.elementor-section .elementor-container { flex-wrap: wrap; }
	.elementor-column { width: 100%; }
}
@media (max-width: 1024px) {
	.elementor-section.elementor-section-boxed > .elementor-container { max-width: 1024px; }
}
@media (max-width: 767px) {
	.elementor-section.elementor-section-boxed > .elementor-container { max-width: 767px; }
}

/* ---------- Widgets ---------- */
.elementor-element { align-self: var(--align-self, auto); }
.elementor-widget { position: relative; }
.elementor-widget:not(:last-child) { margin-block-end: 20px; }
.elementor-widget-container { position: relative; }
.elementor-absolute { position: absolute; }
.elementor-widget__width-auto { max-width: fit-content; }
.elementor-widget__width-initial { max-width: 100%; }
.elementor-background-overlay { position: absolute; inset: 0; pointer-events: none; }

/* ---------- Flex/grid containers (e-con) ---------- */
.e-con {
	/* These custom properties inherit by default. Without resetting them here,
	   a container that doesn't set its own --flex-direction/--gap/etc. would
	   silently inherit whatever value an ANCESTOR container happens to set for
	   its own layout, producing wrong flex-direction/alignment on unrelated
	   nested containers. Resetting to "initial" makes each var(--x, fallback)
	   correctly fall back unless THIS element has its own explicit override. */
	--display: initial;
	--width: initial;
	--min-height: initial;
	--border-radius: initial;
	--margin-top: initial;
	--margin-bottom: initial;
	--margin-left: initial;
	--margin-right: initial;
	--padding-top: initial;
	--padding-bottom: initial;
	--padding-left: initial;
	--padding-right: initial;
	--z-index: initial;
	--align-self: initial;
	--order: initial;
	--position: initial;
	--flex-grow: initial;
	--flex-shrink: initial;
	--background-color: initial;
	--flex-direction: initial;
	--flex-wrap: initial;
	--flex-wrap-mobile: initial;
	--justify-content: initial;
	--align-items: initial;
	--gap: initial;
	--e-con-grid-template-columns: initial;
	--e-con-grid-template-rows: initial;
	--grid-auto-flow: initial;

	--container-max-width: 1140px;
	--content-width: min(100%, var(--container-max-width));
	position: relative;
	display: var(--display, block);
	width: var(--width, 100%);
	max-width: var(--width, 100%);
	min-height: var(--min-height, auto);
	border-radius: var(--border-radius, 0);
	margin-block-start: var(--margin-top, 0);
	margin-block-end: var(--margin-bottom, 0);
	margin-inline-start: var(--margin-left, 0);
	margin-inline-end: var(--margin-right, 0);
	padding-block-start: var(--padding-top, 0);
	padding-block-end: var(--padding-bottom, 0);
	padding-inline-start: var(--padding-left, 0);
	padding-inline-end: var(--padding-right, 0);
	z-index: var(--z-index, auto);
	align-self: var(--align-self, auto);
	order: var(--order, 0);
	position: var(--position, relative);
	flex-grow: var(--flex-grow, 0);
	flex-shrink: var(--flex-shrink, 1);
	background-color: var(--background-color, transparent);
}
.e-con.e-flex {
	flex-direction: var(--flex-direction, column);
	flex-wrap: var(--flex-wrap, nowrap);
	justify-content: var(--justify-content, normal);
	align-items: var(--align-items, normal);
	gap: var(--gap, 0);
}
.e-con.e-grid {
	grid-template-columns: var(--e-con-grid-template-columns, 1fr);
	grid-template-rows: var(--e-con-grid-template-rows, auto);
	grid-auto-flow: var(--grid-auto-flow, row);
	justify-content: var(--justify-content, normal);
	align-items: var(--align-items, normal);
	gap: var(--gap, 0);
}
/* Boxed containers: padding/background on the outer box, layout on the inner. */
.e-con-boxed.e-flex,
.e-con-boxed.e-grid {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: normal;
	align-items: normal;
	gap: initial;
	grid-template-columns: initial;
	grid-template-rows: initial;
}
.e-con-boxed > .e-con-inner {
	display: var(--display, block);
	flex-direction: var(--flex-direction, column);
	flex-wrap: var(--flex-wrap, nowrap);
	justify-content: var(--justify-content, normal);
	align-items: var(--align-items, normal);
	gap: var(--gap, 0);
	grid-template-columns: var(--e-con-grid-template-columns, 1fr);
	grid-template-rows: var(--e-con-grid-template-rows, auto);
	grid-auto-flow: var(--grid-auto-flow, row);
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	flex-grow: 1;
}
/* Elementor gives many row containers a SEPARATE --flex-wrap-mobile value
   (almost always "wrap"), meant as a fallback default for the mobile
   breakpoint -- e.g. so a two-column row (Industries | Criteria, or the
   two "Time saved" stat boxes) wraps onto two full-width stacked lines on
   a phone instead of squeezing both columns side by side. This was never
   wired up, so 60+ containers across the page silently kept their desktop
   nowrap/row behavior on mobile, causing horizontal overflow.

   --flex-wrap (not the "-mobile" variant) still wins when a container
   explicitly sets it for this breakpoint: some widgets (e.g. the 3-column
   "Criteria" stat row) are configured to stay row/nowrap on mobile even
   though the same @media(max-width:767px) block also carries the generic
   --flex-wrap-mobile:wrap -- confirmed from the source, which re-declares
   --flex-wrap:nowrap for that widget inside that exact media block,
   alongside the unchanged --flex-wrap-mobile:wrap. So --flex-wrap-mobile
   is only the FALLBACK for containers that don't specify --flex-wrap of
   their own at this breakpoint, not an unconditional override.

   Placed AFTER both base rules above (same specificity as each): a media
   query gains no cascade priority of its own, so this only wins because it
   comes later in source order. */
@media (max-width: 767px) {
	.e-con.e-flex,
	.e-con-boxed > .e-con-inner {
		flex-wrap: var(--flex-wrap, var(--flex-wrap-mobile, nowrap));
	}
}
.e-con > .elementor-widget, .e-con-inner > .elementor-widget { max-width: 100%; }
/* A content-less widget like a divider needs align-self:stretch to fill
   the cross axis of a COLUMN container (its separator wants width:100% of
   ITS OWN parent -- a percentage of an indeterminate shrink-to-fit width
   otherwise resolves to 0). Scoped to actual divider widgets only: an
   earlier, broader "every widget stretches" version of this rule also
   stretched unrelated widgets (e.g. an image-caption heading positioned via
   the parent's align-items:flex-end in a ROW container) to fill the full
   cross-axis height, which silently cancelled that positioning and left
   the caption pinned to the top of its own stretched-but-mostly-empty box
   instead of the bottom. */
.e-con > .elementor-widget-divider,
.e-con-inner > .elementor-widget-divider {
	align-self: stretch;
	width: 100%;
}
.e-con .elementor-widget:last-child, .e-con-inner .elementor-widget:last-child { margin-block-end: 0; }

@media (max-width: 1024px) { .e-con { --container-max-width: 1024px; } }
@media (max-width: 767px)  { .e-con { --container-max-width: 767px; } }

/* ==========================================================================
   Components
   ========================================================================== */

/* ---------- Accordion (Move with speed / support / advantage) ----------
   Content height is animated via inline max-height, set by JS (main.js) —
   a CSS grid-template-rows 0fr->1fr transition on an auto-height container
   never resolves past its starting value in some engines, so JS measures
   scrollHeight and drives the transition explicitly. */
.e-n-accordion { display: flex; flex-direction: column; gap: var(--n-accordion-item-title-space-between, 0); }

.e-n-accordion-item { display: block; }
.e-n-accordion-clip {
	/* Padding lives on the .e-con INSIDE this wrapper, not on the wrapper
	   itself, with box-sizing:border-box, max-height can never shrink an
	   element below its own padding sum, so if the padding were here the
	   "closed" state would always show a padding-sized sliver of content. */
	overflow: hidden;
	max-height: 0;
	transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.e-n-accordion-item-title {
	display: flex;
	align-items: center;
	justify-content: var(--n-accordion-title-justify-content, flex-start);
	gap: 10px;
	width: 100%;
	padding: var(--n-accordion-padding, 10px);
	margin-block-end: var(--n-accordion-item-title-distance-from-content, 0);
	border: 0;
	border-radius: var(--n-accordion-border-radius, 0);
	background: transparent;
	color: var(--n-accordion-title-normal-color, #000);
	font-size: var(--n-accordion-title-font-size, 16px);
	font-family: inherit;
	line-height: 1.4;
	text-transform: none;
	cursor: pointer;
	transition: background-color .2s ease-in;
}
.e-n-accordion-item-title-header { display: flex; align-items: center; }
.e-n-accordion-item-title-text { line-height: 1; }
.e-n-accordion-item-title-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--n-accordion-icon-size, 15px);
	height: var(--n-accordion-icon-size, 15px);
}
.e-n-accordion-item-title-icon svg { width: 100%; height: 100%; fill: currentColor; }
.e-n-accordion-item .e-opened { display: none; }
.e-n-accordion-item.is-open .e-opened { display: flex; }
.e-n-accordion-item.is-open .e-closed { display: none; }

/* ---------- Tabs (Choose your track) ---------- */
.e-n-tabs { display: flex; flex-direction: column; gap: var(--n-tabs-gap, 0); }
.e-n-tabs-heading {
	display: flex;
	justify-content: var(--n-tabs-heading-justify-content, center);
	flex-wrap: var(--n-tabs-heading-wrap, wrap);
	gap: var(--n-tabs-title-gap, 0);
}
.e-n-tab-title {
	display: flex;
	align-items: var(--n-tabs-title-align-items, center);
	justify-content: var(--n-tabs-title-justify-content, center);
	text-align: var(--n-tabs-title-text-align, center);
	flex-grow: var(--n-tabs-title-flex-grow, 0);
	width: var(--n-tabs-title-width, initial);
	padding: var(--n-tabs-title-padding-top, 0) var(--n-tabs-title-padding-right, 0)
	         var(--n-tabs-title-padding-bottom, 0) var(--n-tabs-title-padding-left, 0);
	border: 0;
	border-radius: var(--n-tabs-title-border-radius, 0);
	background: transparent;
	color: var(--n-tabs-title-color, #000);
	font-size: var(--n-tabs-title-font-size, 20px);
	font-family: inherit;
	line-height: 1.4;
	white-space: var(--n-tabs-title-white-space, initial);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}
.e-n-tab-title[aria-selected="true"] { color: var(--n-tabs-title-color-active, #000); }
.e-n-tabs-content > .e-con { display: none; }
.e-n-tabs-content > .e-con.e-active { display: var(--display, flex); }

/* ---------- Carousel ---------- */
.e-n-carousel { position: relative; }
.e-n-carousel__viewport { overflow: hidden; width: 100%; }
.e-n-carousel .swiper-wrapper {
	display: flex;
	align-items: stretch;
	gap: var(--e-n-carousel-swiper-slides-gap, 0px);
	transition: transform .5s ease;
	will-change: transform;
}
.e-n-carousel .swiper-wrapper.is-jumping { transition: none; }
.e-n-carousel .swiper-slide {
	--slides: var(--e-n-carousel-swiper-slides-to-display, 1);
	--slide-gap: var(--e-n-carousel-swiper-slides-gap, 0px);
	flex: 0 0 calc((100% - (var(--slides) - 1) * var(--slide-gap)) / var(--slides));
	max-width: calc((100% - (var(--slides) - 1) * var(--slide-gap)) / var(--slides));
	height: auto;
	display: flex;
}
.e-n-carousel .swiper-slide > .e-con { width: 100%; }

.elementor-swiper-button {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
	cursor: pointer;
	background: transparent;
	border: 0;
	font-size: var(--e-n-carousel-arrow-size, 17px);
	color: var(--e-n-carousel-arrow-normal-color, #195236);
	transition: color .2s ease, background-color .2s ease;
}
.elementor-swiper-button:hover { color: var(--e-n-carousel-arrow-hover-color, #195236); }
.elementor-swiper-button svg { width: 1em; height: 1em; fill: currentColor; display: block; }
.elementor-swiper-button-prev {
	left: var(--e-n-carousel-arrow-prev-left-align, 0%);
	top: var(--e-n-carousel-arrow-prev-top-align, 50%);
	margin-left: var(--e-n-carousel-arrow-prev-left-position, 0px);
	transform: translate(var(--e-n-carousel-arrow-prev-translate-x, 0px), var(--e-n-carousel-arrow-prev-translate-y, -50%));
}
.elementor-swiper-button-next {
	right: var(--e-n-carousel-arrow-next-right-align, 0%);
	top: var(--e-n-carousel-arrow-next-top-align, 50%);
	margin-right: var(--e-n-carousel-arrow-next-right-position, 0px);
	transform: translate(var(--e-n-carousel-arrow-next-translate-x, 0%), var(--e-n-carousel-arrow-next-translate-y, -50%));
}

/* ---------- Creative button (eael) ---------- */
.eael-creative-button-wrapper { display: flex; }
.eael-creative-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
	border: 0;
	cursor: pointer;
}
.eael-creative-button:hover { color: inherit; }
.eael-creative-button .creative-button-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
}
.cretive-button-text { display: inline-block; }

/* ---------- Tooltip (eael) ---------- */
.eael-tooltip { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.eael-tooltip-content { display: inline-flex; }
.eael-tooltip-content img { width: 100%; display: block; }
.eael-tooltip-text {
	position: absolute;
	z-index: 60;
	visibility: hidden;
	opacity: 0;
	padding: 12px 14px;
	line-height: 1.4;
	text-align: left;
	transition: opacity .3s ease, visibility .3s ease;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.eael-tooltip-text p { margin: 0; line-height: 1.4; }
.eael-tooltip-text a { text-decoration: underline; }
.eael-tooltip-text.eael-tooltip-top { bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); }
.eael-tooltip:hover .eael-tooltip-text,
.eael-tooltip:focus-within .eael-tooltip-text { visibility: visible; opacity: 1; }
@media (max-width: 767px) {
	.eael-tooltip-text { max-width: 78vw; }
}

/* ---------- Divider ---------- */
.elementor-divider { display: flex; }
.elementor-divider-separator {
	display: block;
	width: 100%;
	border-block-start: var(--divider-border-width, 1px) var(--divider-border-style, solid) var(--divider-color, #E7E7E7);
}

/* ---------- "Here's the rundown" strip ---------- */
.inv-section__line { position: relative; z-index: 5; display: flex; }
.inv-section__line--wrap { width: 100%; overflow: hidden; }
.inv-section__line span {
	color: #000;
	text-align: center;
	font-family: inherit;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	flex-shrink: 0;
	padding: 10px 35px;
	margin: 0 5px;
	background: linear-gradient(270deg, #ECECEC 0%, #ECECEC 75%, rgba(236, 236, 236, 0) 100%);
	display: flex;
	align-items: center;
}