/* Site typography: Cabin for headings, Be Vietnam Pro for body text. */
:root {
	--tfa-font-heading: "Cabin", system-ui, sans-serif;
	--tfa-font-body: "Be Vietnam Pro", system-ui, sans-serif;
}
body,
body p, body li, body input, body textarea, body select, body button,
.elementor-widget-text-editor,
.elementor-button {
	font-family: var(--tfa-font-body);
}
body h1, body h2, body h3, body h4, body h5, body h6,
.elementor-heading-title,
.tfa-ibox__title, .tfa-case__title, .tfa-banner__title, .tfa-orbit__label, .tfa-case__metric-value {
	font-family: var(--tfa-font-heading);
}

/*
 * Brand colors, site-wide: navy #001C57 replaces any green coming from
 * Ohio Theme Settings (Primary Color, links, buttons) or Elementor's default
 * global colors (accent #61CE70). html:root outranks the plain :root those print.
 */
html:root {
	--tfa-brand: #001C57;
	--tfa-accent: #F5A800;

	/* Ohio */
	--clb-color-primary: #001C57;
	--clb-link-hover-color: #001C57;
	--clb-button-color: #001C57;
	--clb-button-hover-color: #00123A;
	--clb-selection-color: rgba(0, 28, 87, .18);
	--clb-preloader-spinner-color: #001C57;
}
/* Elementor sets its global colors on body.elementor-kit-N; this selector outranks it. */
body[class*="elementor-kit-"] {
	--e-global-color-primary: #001C57;
	--e-global-color-accent: #001C57;
}
::selection { background: rgba(0, 28, 87, .18); }

/*
 * Hero background (container with CSS class "tfa-hero"):
 * navy gradient comes from the container's own Elementor background;
 * this adds a faint tech grid, soft glows and an animated data network.
 */
.tfa-hero { position: relative; overflow: hidden; isolation: isolate; }
.tfa-hero::before,
.tfa-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.tfa-hero::before {
	background:
		radial-gradient(38% 55% at 12% 0%, rgba(245, 168, 0, .16), transparent 70%),
		radial-gradient(45% 60% at 92% 100%, rgba(61, 123, 224, .28), transparent 70%),
		linear-gradient(rgba(143, 176, 255, .07) 1px, transparent 1px) 0 0 / 48px 48px,
		linear-gradient(90deg, rgba(143, 176, 255, .07) 1px, transparent 1px) 0 0 / 48px 48px;
	-webkit-mask-image: linear-gradient(#000 55%, transparent);
	mask-image: linear-gradient(#000 55%, transparent);
}
.tfa-hero::after {
	background: url("hero-network.svg") center / cover no-repeat;
	/* Darken the middle so the headline always reads cleanly. */
	-webkit-mask-image: radial-gradient(46% 70% at 50% 50%, transparent 42%, #000 95%);
	mask-image: radial-gradient(46% 70% at 50% 50%, transparent 42%, #000 95%);
	opacity: .9;
}
.tfa-hero > .e-con-inner,
.tfa-hero > .elementor-element { position: relative; z-index: 1; }
@media (max-width: 767px) {
	.tfa-hero::after { opacity: .45; }
}

/* ---------- About page helpers (container / text-editor CSS classes) ---------- */
/* Light band with slanted top and bottom edges ("wrapper angled upper-end lower-end"). */
.tfa-angled {
	clip-path: polygon(0 3.5vw, 100% 0, 100% calc(100% - 3.5vw), 0 100%);
}
/* Numbered list with navy badges (core strategy). */
.tfa-ol ol { list-style: none; counter-reset: tfa-ol; margin: 0; padding: 0;display: flex;flex-flow: column;gap: 20px; }
.tfa-ol li { counter-increment: tfa-ol; position: relative; padding-left: 2.75rem; margin: 0 0 1rem; line-height: 1.6; }
.tfa-ol li:last-child { margin-bottom: 0; }
.tfa-ol li::before {
	content: counter(tfa-ol); position: absolute; left: 0; top: 0;
	width: 1.9rem; height: 1.9rem; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #001C57; color: #fff; font-family: "Cabin", sans-serif; font-weight: 700; font-size: .95rem;
}
.tfa-ol li strong { color: #001C57; }
/* Closing quote under the CEO message. */
.tfa-quote { position: relative; padding-top: 3.25rem; text-align: center; }
.tfa-quote::before {
	content: "\201C"; position: absolute; top: -.5rem; left: 50%; transform: translateX(-50%);
	font-family: Georgia, serif; font-size: 5rem; line-height: 1; color: #F5A800;
}
.tfa-quote p:first-child { font-family: "Cabin", sans-serif; font-size: 1.6rem; font-weight: 700; color: #001C57; margin-bottom: .35rem; }

/* =====================================================================
 * Mobile safety net (v1.9.0) – applies to pages already built in Elementor.
 * ===================================================================== */
/* No sideways scrolling from decorative shapes or wide children. `clip` keeps sticky headers working. */
html, body { overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; }

@media (max-width: 1024px) {
	/* Side-by-side container groups wrap on tablet instead of squeezing. */
	.elementor .e-con.e-flex { --flex-wrap: wrap; }
}
@media (max-width: 767px) {
	/* A container holding other containers (2-3 column rows) stacks on phones. */
	.elementor .e-con.e-flex:has(> .e-con),
	.elementor .e-con.e-flex > .e-con-inner:has(> .e-con) {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
	}
	.elementor .e-con.e-flex:has(> .e-con) > .e-con,
	.elementor .e-con.e-flex > .e-con-inner:has(> .e-con) > .e-con {
		--width: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	/* Button rows: wrap and centre instead of overflowing. */
	.elementor .e-con.e-flex:has(> .elementor-widget-button) { flex-wrap: wrap !important; }
	.elementor-widget-button .elementor-button { white-space: normal; text-align: center; }

	/* Long Vietnamese headings never break the layout. */
	.elementor-heading-title { overflow-wrap: anywhere; }

	/* Slanted band: smaller angle on phones. */
	.tfa-angled { clip-path: polygon(0 12px, 100% 0, 100% calc(100% - 12px), 0 100%); }

	/* TFA cards: tighter padding on small screens. */
	.tfa-ibox-grid--card .tfa-ibox,
	.tfa-ibox-grid--card-inline .tfa-ibox { padding: 1.75rem 1.25rem; }
	.tfa-ibox-grid--side .tfa-ibox { gap: 1rem; }
	.tfa-case { padding: 1.5rem 1.25rem; }
	.tfa-case__metric-value { font-size: 1.4rem; }
	.tfa-step { padding: 1.25rem; gap: 1rem; }
	.tfa-step__num { width: 2.6rem; height: 2.6rem; font-size: 1rem; }
	.tfa-stat { padding: 1.75rem 1.25rem 1.5rem; }
	.tfa-stat__value { font-size: 1.4rem; }
	.tfa-level { padding: 1.5rem 1.25rem 1.6rem; }
	.tfa-fpanel__title { font-size: 1.3rem; }
	.tfa-checks__item { font-size: 1rem; }
	.tfa-checks--boxed .tfa-checks__item { padding: 1rem 1rem 1rem 3rem; }
	.tfa-checks--boxed .tfa-checks__item::before { left: 1rem; top: 1.1rem; }
	.tfa-faq__q { padding: 1rem 3.25rem 1rem 1.1rem; font-size: 1rem; }
	.tfa-faq__q::after { right: .9rem; }
	.tfa-faq__a { padding: 0 1.1rem 1.1rem; }
	.tfa-banner { padding: 1.25rem 1.25rem 1.25rem calc(1.25rem + 8px); }
	.tfa-banner__text { font-size: 1rem; }
	.tfa-member { padding: 1.5rem 1.25rem; }
	.tfa-logo { padding: 1.5rem 1rem; }
	.tfa-process__title { font-size: 1.2rem; }
	.tfa-quote p:first-child { font-size: 1.3rem; }
	.tfa-quote::before { font-size: 4rem; }
	/* Decorative shapes are noise on a narrow screen. */
	.tfa-decor--dots::before, .tfa-decor--circle::after { display: none; }
}

/* Button rows (2+ buttons side by side) on every page: centred, equal width on phones. */
@media (max-width: 767px) {
	.elementor .e-con.e-flex:has(> .elementor-widget-button + .elementor-widget-button) {
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
	}
	.elementor .e-con.e-flex:has(> .elementor-widget-button + .elementor-widget-button) > .elementor-widget-button {
		width: 100%; max-width: 320px;
	}
	.elementor .e-con.e-flex:has(> .elementor-widget-button + .elementor-widget-button) .elementor-button-wrapper { text-align: center; }
	.elementor .e-con.e-flex:has(> .elementor-widget-button + .elementor-widget-button) .elementor-button { width: 100%; justify-content: center; }
	/* Single buttons under a centred hero headline follow the headline. */
	.tfa-hero .elementor-widget-button .elementor-button-wrapper { text-align: center; }
}

/* TFA widgets always take the full width of their column, so a centred
   parent can never shrink them to nothing (orbit, grids, steps, FAQ…). */
.e-con > .elementor-widget[class*="elementor-widget-tfa-"],
.e-con > .e-con-inner > .elementor-widget[class*="elementor-widget-tfa-"] { width: 100%; }

/* =====================================================================
 * v1.9.3 – mobile fixes: side margins, SVG diagrams, fallback menu
 * ===================================================================== */
/* SVG diagrams scale with their column (Safari collapsed them and they overlapped the text below). */
.elementor-widget-image img[src$=".svg"] { height: auto; }
.e-con > .elementor-widget-image,
.e-con > .e-con-inner > .elementor-widget-image { width: 100%; }
.elementor-widget-image img[src*="about-connect"] { width: 100%; height: auto; aspect-ratio: 600 / 480; display: block; }

@media (max-width: 767px) {
	/* Comfortable side margins on phones. */
	.elementor .e-con.e-parent { padding-left: 20px !important; padding-right: 20px !important; }
	.elementor .e-con.e-parent > .e-con-inner { padding-left: 0 !important; padding-right: 0 !important; }
	/* Space between a stacked image column and the text that follows it. */
	.elementor .e-con.e-flex:has(> .e-con) { row-gap: 32px !important; }
}

/* =====================================================================
 * v1.9.4 – mobile header always visible + bottom tab bar
 * ===================================================================== */
.tfa-mbar, .tfa-mtab, .tfa-mnav { display: none; }
@media (max-width: 1024px) {
	:root { --tfa-mbar-h: 64px; --tfa-mtab-h: 64px; }
	/* Replace the Ohio header (empty/transparent at the top of the page) with a fixed white bar. */
	#masthead, .header-cap, .hamburger-nav, a.scroll-top { display: none !important; }
	body { padding-top: var(--tfa-mbar-h) !important; padding-bottom: calc(var(--tfa-mtab-h) + env(safe-area-inset-bottom, 0px)) !important; }
	body.admin-bar .tfa-mbar { top: 46px; }

	.tfa-mbar {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		position: fixed; top: 0; left: 0; right: 0; z-index: 99990; height: var(--tfa-mbar-h);
		padding: 0 16px 0 20px; background: #FFFFFF; box-shadow: 0 1px 0 #E3E9F5, 0 6px 18px rgba(0, 28, 87, .06);
	}
	.tfa-mbar__logo { display: flex; align-items: center; min-width: 0; text-decoration: none; }
	.tfa-mbar__logo img { display: block; height: 36px; width: auto; max-width: 170px; object-fit: contain; }
	.tfa-mbar__logo span { font-family: var(--tfa-font-heading, sans-serif); font-weight: 700; font-size: 20px; color: #001C57; }
	.tfa-mbar__cta {
		flex: 0 0 auto; padding: 10px 14px; border-radius: 10px; background: #001C57; color: #FFFFFF !important;
		font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap;
	}

	.tfa-mtab {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990;
		height: calc(var(--tfa-mtab-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
		background: #FFFFFF; box-shadow: 0 -1px 0 #E3E9F5, 0 -6px 18px rgba(0, 28, 87, .06);
	}
	.tfa-mtab__item {
		flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
		min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none;
		color: #5B6680 !important; font: 600 11px/1.2 var(--tfa-font-body, sans-serif);
	}
	.tfa-mtab__item span { white-space: nowrap; }
	.tfa-mtab__item.is-active, .tfa-mtab__item[aria-expanded="true"] { color: #001C57 !important; }
	.tfa-mtab__item.is-active svg { color: #F5A800; }
	.tfa-mtab__item[href^="tel:"] svg { color: #F5A800; }

	.tfa-mnav { display: block; }
}
@media (max-width: 360px) {
	.tfa-mbar__cta { padding: 9px 10px; font-size: 13px; }
	.tfa-mbar__logo img { max-width: 130px; }
}

.tfa-mnav {
	position: fixed; top: 0; left: 0; right: 0; bottom: calc(var(--tfa-mtab-h, 64px) + env(safe-area-inset-bottom, 0px));
	z-index: 99995; background: #FFFFFF; overflow-y: auto;
	padding: 0 24px 32px; transform: translateY(16px); opacity: 0; visibility: hidden;
	transition: transform .25s ease, opacity .25s ease, visibility .25s;
	font-family: var(--tfa-font-body, sans-serif);
}
html.tfa-mnav-open .tfa-mnav { transform: none; opacity: 1; visibility: visible; }
html.tfa-mnav-open, html.tfa-mnav-open body { overflow: hidden; }
.tfa-mnav__head { display: flex; align-items: center; justify-content: space-between; height: var(--tfa-mbar-h, 64px); margin: 0 -8px 8px -4px; }
.tfa-mnav__logo { display: flex; align-items: center; font-family: var(--tfa-font-heading, sans-serif); font-weight: 700; font-size: 20px; color: #001C57; text-decoration: none; }
.tfa-mnav__logo img { height: 36px; width: auto; max-width: 170px; }
.tfa-mnav__close { width: 44px; height: 44px; border: 0; border-radius: 12px; background: #EEF2FA; color: #001C57; font-size: 28px; line-height: 44px; cursor: pointer; }
.tfa-mnav ul { list-style: none; margin: 0; padding: 0; }
.tfa-mnav li { border-bottom: 1px solid #E3E9F5; }
.tfa-mnav a { display: block; padding: 14px 4px; color: #001C57; font-weight: 600; font-size: 18px; text-decoration: none; }
.tfa-mnav .sub-menu { padding-left: 14px; }
.tfa-mnav .sub-menu li { border-bottom: 0; }
.tfa-mnav .sub-menu a { padding: 9px 4px; font-weight: 500; font-size: 16px; color: #3B4763; }
.tfa-mnav .current-menu-item > a { color: #B37800; }
.tfa-mnav__cta { display: block; margin-top: 24px; padding: 14px; border-radius: 10px; background: #F5A800; color: #001C57 !important; text-align: center; font-weight: 700; }