/*
 * Teknivo theme styles.
 *
 * The brand guideline (Teknivo - Brand Guideline.pdf, v1.0): Dark Navy,
 * Connected Teal, Tech Blue, Ice Blue; Poppins SemiBold headings, Open Sans
 * text. Layout from the reference board (clients/teknivo/design/). The page
 * is Elementor containers; the .tk-* classes below are applied to Elementor
 * widgets and containers (Advanced → CSS Classes) to give them that look.
 */

/* ------------------------------------------------------------------ tokens */
:root {
	--tk-navy: #0D2340;       /* primary: security, trust */
	--tk-teal: #5CDDE5;       /* secondary: connectivity */
	--tk-blue: #004AAD;       /* accent (main): technology; buttons, links */
	--tk-ice: #EAF4F8;        /* accent (minor): light bands */
	--tk-navy-2: #132F55;
	--tk-blue-dark: #003A88;
	--tk-ink: #0D2340;
	--tk-muted: #4D5E73;
	--tk-line: #D8E4EC;
	--tk-wa-bright: #25D366;  /* icon-only floating button */
	--tk-shadow-sm: 0 2px 10px rgba(13, 35, 64, .06);
	--tk-shadow-md: 0 18px 40px rgba(13, 35, 64, .14);
	--tk-radius: 20px;
	--tk-container: 1240px;
	--tk-gutter: 32px;
	--tk-head: 'Poppins', Arial, sans-serif;
	--tk-sans: 'Open Sans', Arial, sans-serif;
	--tk-header-h: 72px;
}
@media (max-width: 767px) {
	:root { --tk-gutter: 20px; --tk-header-h: 64px; }
}

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: #fff;
	color: var(--tk-ink);
	font-family: var(--tk-sans);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { color: var(--tk-blue); text-decoration: none; }
a:hover { color: var(--tk-navy); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, p { text-wrap: pretty; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--tk-header-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}
.admin-bar { --tk-admin-bar: 32px; }

:focus-visible { outline: 3px solid var(--tk-teal); outline-offset: 2px; }

.tk-skip-link {
	position: absolute; left: 16px; top: -100px; z-index: 100;
	padding: 10px 16px; border-radius: 8px; background: var(--tk-navy); color: #fff; font-weight: 600;
}
.tk-skip-link:focus { top: 12px; color: #fff; }

.tk-container {
	width: 100%;
	max-width: var(--tk-container);
	margin-inline: auto;
	padding-inline: var(--tk-gutter);
}
.tk-container--narrow { max-width: 860px; }
.tk-icon { flex: none; }

/* ----------------------------------------------------------------- buttons */
.tk-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 13px 24px; border-radius: 999px; border: 1.5px solid transparent;
	font-family: var(--tk-head); font-weight: 500; font-size: 15.5px; line-height: 1.2;
	text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.tk-btn--lg { padding: 16px 30px; font-size: 16.5px; }
.tk-btn--sm { padding: 10px 18px; font-size: 14px; gap: 8px; }
.tk-btn--block { display: flex; width: 100%; }
.tk-btn--wa, .tk-btn--primary { background: var(--tk-blue); color: #fff; box-shadow: 0 10px 24px rgba(0, 74, 173, .22); }
.tk-btn--wa:hover, .tk-btn--wa:focus-visible, .tk-btn--primary:hover { background: var(--tk-blue-dark); color: #fff; }
/* On navy or photos: teal with navy text. */
.tk-btn--wa.tk-btn--on-dark { background: var(--tk-teal); color: var(--tk-navy); box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }
.tk-btn--wa.tk-btn--on-dark:hover { background: #8BE8EE; color: var(--tk-navy); }
.tk-btn--outline { background: #fff; border-color: var(--tk-line); color: var(--tk-navy); }
.tk-btn--outline:hover { border-color: var(--tk-blue); color: var(--tk-blue); }
.tk-btn--light { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .55); color: #fff; }
.tk-btn--light:hover { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; }
@media (max-width: 480px) {
	.tk-btn { white-space: normal; text-align: center; }
}

.tk-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Elementor Button widget, restyled: "tk-ebtn tk-ebtn--link" (or outline). */
.tk-ebtn .elementor-button {
	display: inline-flex; align-items: center; padding: 14px 26px; border-radius: 999px;
	border: 1.5px solid transparent; font-family: var(--tk-head); font-weight: 500;
	font-size: 15.5px; line-height: 1.2; fill: currentColor;
	transition: background-color .15s, border-color .15s, color .15s;
}
.tk-ebtn--outline .elementor-button { background: #fff; border-color: var(--tk-line); color: var(--tk-navy); }
.tk-ebtn--outline .elementor-button:hover { border-color: var(--tk-blue); color: var(--tk-blue); }
.tk-ebtn--link .elementor-button { background: none; padding: 4px 0; border-radius: 0; color: var(--tk-blue); font-size: 15px; }
.tk-ebtn--link .elementor-button:hover { color: var(--tk-navy); text-decoration: underline; }

/* Round arrow buttons (hero, rails). */
.tk-arrow {
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--tk-line); background: #fff;
	color: var(--tk-navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	box-shadow: var(--tk-shadow-sm); transition: background-color .15s, color .15s, opacity .15s;
}
.tk-arrow:hover { background: var(--tk-navy); color: #fff; }
.tk-arrow:disabled { opacity: .35; cursor: default; }
.tk-arrow:disabled:hover { background: #fff; color: var(--tk-navy); }

/* ------------------------------------------------------------------ header */
.tk-header {
	position: sticky; top: var(--tk-admin-bar, 0px); z-index: 50;
	background: rgba(255, 255, 255, .95); backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--tk-line);
}
.tk-header__bar { min-height: var(--tk-header-h); padding-block: 10px; display: flex; align-items: center; gap: 20px; }
.tk-header__brand { display: flex; align-items: center; flex: none; }
.tk-header__logo { width: 136px; height: auto; display: block; }
.tk-nav { margin-left: auto; }
.tk-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.tk-nav__list a {
	display: block; padding: 9px 14px; border-radius: 999px;
	font-family: var(--tk-head); font-size: 15px; font-weight: 500; color: var(--tk-muted); white-space: nowrap;
}
.tk-nav__list a:hover { background: var(--tk-ice); color: var(--tk-navy); }
.tk-header__cta { flex: none; }

@media (max-width: 900px) {
	/* The section links become a scrolling row under the bar. */
	.tk-header__bar { flex-wrap: wrap; row-gap: 6px; padding-bottom: 0; }
	.tk-header__cta { margin-left: auto; }
	.tk-header__logo { width: 116px; }
	.tk-nav {
		order: 3; flex-basis: 100%; margin: 0 calc(var(--tk-gutter) * -1);
		overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
	}
	.tk-nav::-webkit-scrollbar { display: none; }
	.tk-nav__list { padding: 0 var(--tk-gutter) 8px; }
	.tk-nav__list a { padding: 7px 12px; font-size: 14px; background: var(--tk-ice); }
	html { scroll-padding-top: 116px; }
}
@media (max-width: 782px) {
	.admin-bar { --tk-admin-bar: 46px; }
}
@media (max-width: 600px) {
	.admin-bar { --tk-admin-bar: 0px; }
}

/* ---------------------------------------------------------- page sections */
.elementor-widget-text-editor p:last-child,
.elementor-widget-text-editor ul:last-child { margin-bottom: 0; }
.elementor-widget-text-editor p:first-child { margin-top: 0; }

.tk-eyebrow {
	font-family: var(--tk-head); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tk-blue);
}
.tk-eyebrow--light { color: var(--tk-teal); }
.tk-h2 .elementor-heading-title {
	font-family: var(--tk-head); font-weight: 600; font-size: clamp(27px, 3.3vw, 40px);
	line-height: 1.18; letter-spacing: -.01em; color: var(--tk-navy);
}
.tk-h2--light .elementor-heading-title { color: #fff; }
.tk-h3 .elementor-heading-title {
	font-family: var(--tk-head); font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--tk-navy);
}
.tk-h3-lg .elementor-heading-title {
	font-family: var(--tk-head); font-weight: 600; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.25; color: var(--tk-navy);
}
.tk-light .elementor-heading-title { color: #fff; }
.tk-lead { font-size: 17px; line-height: 1.65; color: var(--tk-muted); }
.tk-lead--light { color: rgba(255, 255, 255, .84); }
.tk-text { font-size: 15px; line-height: 1.6; color: var(--tk-muted); }
.tk-center { text-align: center; }
.tk-center .elementor-heading-title { text-align: center; }
.tk-center .tk-lead { margin-inline: auto; max-width: 60ch; }
.e-con.tk-center, .e-con.tk-faq-wrap { align-self: center; margin-inline: auto; }

/* Rows of buttons keep their natural width (Elementor stretches flex children). */
.e-con.tk-inline > .e-con { --width: auto; width: auto; }
.e-con.tk-inline > .elementor-element { --container-widget-flex-grow: 0; flex-grow: 0; width: auto; }

.tk-pill { display: inline-block; align-self: flex-start; width: auto; }
.tk-pill p {
	margin: 0; padding: 4px 12px; border-radius: 999px; background: #fff;
	font-family: var(--tk-head); font-size: 12.5px; font-weight: 500; color: var(--tk-blue); line-height: 1.5;
}

/* -------------------------------------------------------------------- hero */
.tk-hero { position: relative; background: var(--tk-navy); color: #fff; overflow: hidden; }
.tk-hero__track { display: grid; }
.tk-hero__slide {
	grid-area: 1 / 1; position: relative; display: flex; align-items: center;
	min-height: clamp(520px, 78vh, 680px); opacity: 0; visibility: hidden;
	transition: opacity .7s ease, visibility .7s;
}
.tk-hero__slide.is-active { opacity: 1; visibility: visible; }
.tk-hero .tk-hero__img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.tk-hero__slide::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg, rgba(13, 35, 64, .94) 0%, rgba(13, 35, 64, .78) 38%, rgba(13, 35, 64, .2) 72%, rgba(13, 35, 64, .05) 100%);
}
.tk-hero__content { position: relative; z-index: 2; padding-block: 72px 112px; }
.tk-hero__content > * { max-width: 600px; }
.tk-hero__eyebrow {
	margin: 0 0 14px; font-family: var(--tk-head); font-size: 13.5px; font-weight: 500; letter-spacing: .14em;
	text-transform: uppercase; color: var(--tk-teal);
}
.tk-hero__title {
	margin: 0 0 16px; font-family: var(--tk-head); font-weight: 600; font-size: clamp(34px, 4.8vw, 56px);
	line-height: 1.1; letter-spacing: -.015em; color: #fff;
}
.tk-hero__text { margin: 0 0 28px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .86); max-width: 52ch; }
.tk-hero__points {
	list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px;
}
.tk-hero__points li { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: rgba(255, 255, 255, .9); }
.tk-hero__points li::before {
	content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tk-teal); flex: none;
	box-shadow: 0 0 0 4px rgba(92, 221, 229, .18);
}
.tk-hero__controls {
	position: absolute; left: 0; right: 0; bottom: 32px; z-index: 3;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.tk-hero__dots { display: flex; gap: 8px; }
.tk-hero__dot {
	width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
	background: rgba(255, 255, 255, .45); transition: width .25s, background-color .25s;
}
.tk-hero__dot.is-active { width: 32px; background: var(--tk-teal); }
.tk-hero__arrows { display: flex; gap: 10px; }
.tk-hero .tk-arrow { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); color: #fff; box-shadow: none; }
.tk-hero .tk-arrow:hover { background: #fff; color: var(--tk-navy); }
@media (max-width: 767px) {
	.tk-hero__slide { min-height: 600px; align-items: flex-end; }
	.tk-hero__slide::before {
		background: linear-gradient(180deg, rgba(13, 35, 64, .25) 0%, rgba(13, 35, 64, .7) 40%, rgba(13, 35, 64, .96) 72%);
	}
	.tk-hero__content { padding-block: 120px 96px; }
	.tk-hero__text { font-size: 16px; margin-bottom: 22px; }
	.tk-hero__points { margin-top: 20px; gap: 8px 16px; }
	.tk-hero__arrows { display: none; }
	.tk-hero__controls { bottom: 28px; }
}

/* -------------------------------------------------------------- categories */
/* Grid: the first (CCTV) card spans two rows; on phones the cards scroll sideways. */
.e-con.tk-cats > .tk-cat:first-child { grid-row: span 2; }
.tk-cat {
	background: var(--tk-ice); border-radius: var(--tk-radius); overflow: hidden;
	transition: box-shadow .2s, transform .2s;
}
.tk-cat:hover { box-shadow: var(--tk-shadow-md); transform: translateY(-2px); }
.tk-cat .tk-cat__img img { display: block; width: 100%; height: 170px; object-fit: cover; }
.tk-cat .tk-cat__img--product img { object-fit: contain; padding: 18px; background: linear-gradient(160deg, #fff 0%, var(--tk-ice) 100%); }
.tk-cats > .tk-cat:first-child .tk-cat__img img { height: 380px; }
.tk-cat > .e-con { flex-grow: 1; }
.tk-cat .tk-cat__foot { margin-top: auto; }
@media (max-width: 1024px) {
	.tk-cats > .tk-cat:first-child .tk-cat__img img { height: 170px; }
	.e-con.tk-cats > .tk-cat:first-child { grid-row: auto; }
}
@media (max-width: 767px) {
	.e-con.tk-cats {
		display: flex !important; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
		/* Bleed to both screen edges: Elementor pins width at 100%, so widen it too. */
		width: calc(100% + var(--tk-gutter) * 2); max-width: none;
		margin-inline: calc(var(--tk-gutter) * -1); padding-inline: var(--tk-gutter); padding-bottom: 8px;
		scroll-padding-inline: var(--tk-gutter); scrollbar-width: none;
	}
	.e-con.tk-cats::-webkit-scrollbar { display: none; }
	.e-con.tk-cats > .tk-cat { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ------------------------------------------------------------- featured */
.tk-feature {
	background:
		radial-gradient(70% 90% at 85% 40%, rgba(92, 221, 229, .22), transparent 65%),
		linear-gradient(115deg, var(--tk-navy) 0%, var(--tk-navy-2) 55%, var(--tk-blue) 130%);
	border-radius: var(--tk-radius); overflow: hidden;
}
.tk-feature .tk-feature__img img { display: block; width: 100%; max-height: 340px; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .35)); }
.tk-feature__list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tk-feature__list li { display: flex; gap: 10px; color: rgba(255, 255, 255, .9); font-size: 15.5px; }
.tk-feature__list li::before { content: "✓"; color: var(--tk-teal); font-weight: 700; flex: none; }

/* ---------------------------------------------------------------- products */
.tk-product {
	background: #fff; border: 1px solid var(--tk-line); border-radius: 18px;
	transition: box-shadow .2s, border-color .2s;
}
.tk-product:hover { border-color: #B7CFE0; box-shadow: var(--tk-shadow-md); }
.tk-product__img { background: linear-gradient(160deg, #fff 0%, var(--tk-ice) 100%); border-radius: 12px; }
.tk-product .tk-product__img img { display: block; width: 100%; height: 190px; object-fit: contain; padding: 18px; }
.tk-product__brand p { margin: 0; font-family: var(--tk-head); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tk-blue); }
.tk-product__name .elementor-heading-title { font-family: var(--tk-head); font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--tk-navy); }
.tk-product__desc { font-size: 14px; line-height: 1.55; color: var(--tk-muted); }
/* Push the button to the card's bottom so a row lines up. */
.tk-product > .tk-product__foot { margin-top: auto; }
@media (max-width: 767px) {
	/* Two cards per row on phones. */
	.tk-product .tk-product__img img { height: 130px; padding: 10px; }
	.tk-product__name .elementor-heading-title { font-size: 15px; }
	.tk-product__desc { font-size: 13px; }
	/* Fits one line from 375px; wraps rather than clips on narrower phones. */
	.tk-product .tk-btn--sm { padding: 9px 4px; font-size: 12.5px; line-height: 1.25; white-space: normal; text-align: center; }
	.tk-product .tk-btn--sm .tk-icon { display: none; }
}

/* ------------------------------------------------------------------ rails */
.tk-rail-wrap { position: relative; }
.e-con.tk-rail {
	flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	padding-bottom: 6px;
}
.e-con.tk-rail::-webkit-scrollbar { display: none; }
.e-con.tk-rail > .e-con { flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; }
.tk-rail__arrow { position: absolute; top: 38%; z-index: 3; display: none; }
.tk-rail__arrow--prev { left: -14px; }
.tk-rail__arrow--next { right: -14px; }
.tk-rail-wrap.has-overflow > .tk-rail__arrow { display: inline-flex; }
@media (max-width: 1024px) {
	.e-con.tk-rail > .e-con { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 767px) {
	.e-con.tk-rail > .e-con { flex-basis: 72%; }
	.tk-rail__arrow { display: none !important; }
}

/* ---------------------------------------------------------------- solutions */
.tk-solutions { background: var(--tk-navy); }
.tk-tabs .e-n-tabs-heading {
	gap: 0; border-bottom: 1px solid rgba(255, 255, 255, .18); justify-content: stretch;
	overflow-x: auto; scrollbar-width: none;
}
.tk-tabs .e-n-tabs-heading::-webkit-scrollbar { display: none; }
.tk-tabs .e-n-tab-title {
	flex: 1 1 0; justify-content: center; padding: 18px 16px; background: transparent !important;
	border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; border-radius: 0;
	font-family: var(--tk-head); font-weight: 500; font-size: 16px; color: rgba(255, 255, 255, .7) !important;
	white-space: nowrap; transition: color .15s, border-color .15s;
}
.tk-tabs .e-n-tab-title:hover { color: #fff !important; }
.tk-tabs .e-n-tab-title[aria-selected="true"] { color: #fff !important; border-bottom-color: var(--tk-teal); }
.tk-tabs .e-n-tab-title-text { color: inherit !important; font: inherit; }
.tk-tabs .e-n-tabs-content > .e-con { border: 0; }
.tk-tabs .e-n-tabs-content { margin-top: 28px; }
.tk-sol { border-radius: var(--tk-radius); overflow: hidden; position: relative; }
.tk-sol::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(90deg, rgba(13, 35, 64, .96) 0%, rgba(13, 35, 64, .82) 45%, rgba(13, 35, 64, .45) 100%);
}
.tk-sol > * { position: relative; z-index: 1; }
.tk-sol-card { background: rgba(255, 255, 255, .96); border-radius: 16px; }
.tk-sol-card .elementor-icon { font-size: 26px; color: var(--tk-blue); }
.tk-sol-card .elementor-icon svg { width: 26px; height: 26px; fill: var(--tk-blue); }
@media (max-width: 767px) {
	.tk-tabs .e-n-tab-title { flex: none; padding: 14px 14px; font-size: 15px; }
	.tk-sol::before { background: linear-gradient(180deg, rgba(13, 35, 64, .9) 0%, rgba(13, 35, 64, .94) 100%); }
}

/* ------------------------------------------------------------------- brands */
.tk-brand-row { border-top: 1px solid var(--tk-line); }
.tk-brand-card .tk-brand-card__img img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: 14px; }

/* ---------------------------------------------------------------- why us */
.tk-why { border-radius: var(--tk-radius); overflow: hidden; position: relative; }
.tk-why::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(180deg, rgba(13, 35, 64, .15) 0%, rgba(13, 35, 64, .3) 45%, rgba(13, 35, 64, .92) 100%);
}
.tk-why > * { position: relative; z-index: 1; }
.tk-why > .tk-why__icon { margin-block: auto; }
.tk-why .tk-why__icon img { width: 104px; height: auto; display: block; margin-inline: auto; }
.tk-why .tk-h3 .elementor-heading-title { color: #fff; text-align: center; }
.tk-why .tk-text { color: rgba(255, 255, 255, .86); text-align: center; }

/* ------------------------------------------------------------- how it works */
.tk-steps-panel { background: var(--tk-navy); border-radius: var(--tk-radius); }
.tk-steps-panel .tk-h2 .elementor-heading-title { font-size: clamp(26px, 2.4vw, 32px); }
.tk-step { position: relative; }
.tk-step__num .elementor-heading-title {
	display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
	background: var(--tk-ice); color: var(--tk-blue); font-family: var(--tk-head); font-weight: 600; font-size: 18px;
	border: 2px solid #fff; box-shadow: 0 0 0 1px var(--tk-line);
}
/* Connecting line from each step's badge to the next. */
.e-con.tk-steps > .tk-step:not(:last-child)::after {
	content: ""; position: absolute; top: 28px; left: 64px; right: -20px; height: 2px; z-index: -1;
	background: repeating-linear-gradient(90deg, var(--tk-teal) 0 8px, transparent 8px 14px);
}
.tk-step .elementor-icon { font-size: 22px; color: var(--tk-blue); }
.tk-step .elementor-icon svg { width: 22px; height: 22px; fill: var(--tk-blue); }
@media (max-width: 1024px) {
	.e-con.tk-steps > .tk-step:not(:last-child)::after { display: none; }
}

/* ----------------------------------------------------------------- projects */
.e-con.tk-projects > .tk-project:first-child { grid-row: span 2; }
.tk-project { border-radius: var(--tk-radius); overflow: hidden; position: relative; }
.tk-project::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(180deg, rgba(13, 35, 64, 0) 25%, rgba(13, 35, 64, .7) 60%, rgba(13, 35, 64, .95) 100%);
}
/* The short cards' text reaches the top half of the photo: darken it all. */
.e-con.tk-projects > .tk-project:not(:first-child)::before {
	background: linear-gradient(180deg, rgba(13, 35, 64, .35) 0%, rgba(13, 35, 64, .82) 45%, rgba(13, 35, 64, .95) 100%);
}
.tk-project > * { position: relative; z-index: 1; }
.tk-project .tk-h3-lg .elementor-heading-title { color: #fff; }
.tk-project .tk-text { color: rgba(255, 255, 255, .88); }
.tk-project__area p { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--tk-teal); }
@media (max-width: 1024px) {
	.e-con.tk-projects > .tk-project:first-child { grid-row: auto; }
}

/* --------------------------------------------------------------------- FAQ */
.tk-faq { display: grid; gap: 12px; }
.tk-faq__item { background: #fff; border: 1px solid var(--tk-line); border-radius: 14px; transition: border-color .15s, background-color .15s; }
.tk-faq__item[open] { background: var(--tk-ice); border-color: #B7CFE0; }
.tk-faq__q {
	list-style: none; cursor: pointer; padding: 18px 22px; display: flex; gap: 16px; justify-content: space-between; align-items: center;
	font-family: var(--tk-head); font-weight: 500; font-size: 16px; line-height: 1.45; color: var(--tk-navy);
}
.tk-faq__q::-webkit-details-marker { display: none; }
.tk-faq__q::after {
	content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--tk-ice);
	display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 500; color: var(--tk-blue);
}
.tk-faq__item[open] .tk-faq__q::after { content: "−"; background: #fff; }
.tk-faq__a { padding: 0 22px 20px; font-size: 15px; line-height: 1.7; color: var(--tk-muted); }
.tk-faq__a p { margin: 0 0 10px; }
.tk-faq__a p:last-child, .tk-faq__a ul:last-child { margin-bottom: 0; }
.tk-faq__a ul { margin: 0 0 10px; padding-left: 20px; }
.tk-faq__a li { margin-bottom: 4px; }

/* --------------------------------------------------------------- final CTA */
.tk-cta { border-radius: 24px; overflow: hidden; position: relative; }
.tk-cta::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(90deg, rgba(13, 35, 64, .96) 0%, rgba(13, 35, 64, .8) 45%, rgba(13, 35, 64, .1) 100%);
}
.tk-cta > * { position: relative; z-index: 1; }
@media (max-width: 767px) {
	.tk-cta::before { background: linear-gradient(180deg, rgba(13, 35, 64, .82) 0%, rgba(13, 35, 64, .94) 100%); }
}

/* ------------------------------------------------------------------ footer */
.tk-footer { background: var(--tk-navy); color: rgba(255, 255, 255, .78); font-size: 14.5px; line-height: 1.7; }
.tk-footer a { color: #fff; }
.tk-footer a:hover { color: #fff; text-decoration: underline; }
.tk-footer__grid {
	padding-block: 64px 32px;
	display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr; gap: 40px;
}
@media (max-width: 1024px) {
	.tk-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.tk-footer__grid { grid-template-columns: 1fr; gap: 32px; padding-block: 48px 24px; }
}
.tk-footer__col { display: flex; flex-direction: column; gap: 10px; }
.tk-footer__col p { margin: 0; max-width: 38ch; }
.tk-footer__logo { width: 168px; height: auto; display: block; margin-bottom: 6px; }
.tk-footer__heading { font-family: var(--tk-head); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 4px; }
.tk-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tk-footer__links a, .tk-footer__links span { display: inline-flex; align-items: flex-start; gap: 10px; color: rgba(255, 255, 255, .84); }
.tk-footer__links .tk-icon { color: var(--tk-teal); margin-top: 4px; }
.tk-footer__social { list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 10px; }
.tk-footer__social a {
	width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
	display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.tk-footer__social a:hover { background: var(--tk-teal); border-color: var(--tk-teal); color: var(--tk-navy); }
.tk-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .14); padding-block: 22px 28px;
	display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 13px; color: rgba(255, 255, 255, .6);
}

/* --------------------------------------------------- floating WhatsApp button */
.tk-wa-float {
	position: fixed; right: 20px; bottom: 20px; z-index: 60;
	width: 58px; height: 58px; border-radius: 50%; background: var(--tk-wa-bright); color: #fff;
	display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
	transition: transform .15s;
}
.tk-wa-float:hover { color: #fff; transform: scale(1.05); }

/* ------------------------------------------------------- block-editor pages */
.tk-page { padding-block: 64px; }
.tk-page__title { font-family: var(--tk-head); font-weight: 600; font-size: clamp(30px, 4vw, 42px); line-height: 1.15; color: var(--tk-navy); margin: 0 0 20px; }
.tk-prose { font-size: 17px; line-height: 1.7; }