/* ============================================================
   TRANSTEK — brand design system
   Navy #001F3F / Cyan #00D9FF / Blue #0074D9
   Headings: Rajdhani (uppercase) · Body: Inter
   ============================================================ */

:root {
	--tt-navy: #001F3F;
	--tt-navy-2: #00162e;
	--tt-navy-3: #000F1F;
	--tt-navy-4: #002b55;
	--tt-cyan: #00D9FF;
	--tt-blue: #0074D9;
	--tt-light: #F8F9FA;
	--tt-light-2: #F0F4F8;
	--tt-gray: #4b5563;
	--tt-g300: #d1d5db;
	--tt-g400: #9ca3af;
	--tt-font-h: 'Rajdhani', 'Arial Narrow', sans-serif;
	--tt-font-b: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--tt-font-b);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--tt-gray);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
	font-family: var(--tt-font-h);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.2;
	color: var(--tt-navy);
	margin: 0 0 1rem;
}
h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.875rem, 3.5vw, 2.25rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1.1rem; }
img { max-width: 100%; height: auto; }
a { color: var(--tt-blue); }

/* ---------- Layout helpers ---------- */
.tt-container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
.tt-section { padding: 5rem 0; }
.tt-section > .wp-block-group__inner-container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
.wp-block-group.alignfull { max-width: none; margin-left: 0; margin-right: 0; }
.tt-bg-light { background: var(--tt-light); }
.tt-bg-light-2 { background: var(--tt-light-2); }
.tt-bg-navy { background: var(--tt-navy); color: #fff; }
.tt-bg-navy h1, .tt-bg-navy h2, .tt-bg-navy h3, .tt-bg-navy h4 { color: #fff; }
.tt-bg-navy p { color: var(--tt-g300); }
.tt-main { display: block; }
.tt-fallback { padding: 4rem 1.5rem; }

/* ---------- Headings decor ---------- */
.tt-underline {
	display: block;
	width: 6rem;
	height: 4px;
	background: linear-gradient(90deg, var(--tt-cyan), var(--tt-blue));
	margin: 1rem 0 2.75rem;
}
.tt-underline.tt-center { margin-left: auto; margin-right: auto; }
.tt-kicker {
	font-family: var(--tt-font-h);
	text-transform: uppercase;
	letter-spacing: 0.25em;
	font-size: 0.85rem;
	color: var(--tt-cyan);
	font-weight: 600;
	margin-bottom: 0.5rem;
}

/* ---------- Buttons (skewed parallelograms) ---------- */
.tt-btn {
	display: inline-block;
	transform: skewX(-10deg);
	background: linear-gradient(135deg, var(--tt-cyan), var(--tt-blue));
	padding: 0.95rem 2.4rem;
	text-decoration: none !important;
	border: none;
	cursor: pointer;
	transition: box-shadow 0.25s ease, filter 0.25s ease;
}
.tt-btn > span {
	display: inline-block;
	transform: skewX(10deg);
	font-family: var(--tt-font-h);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 1rem;
	color: var(--tt-navy);
}
.tt-btn:hover { box-shadow: 0 0 26px rgba(0, 217, 255, 0.5); filter: brightness(1.07); }
.tt-btn-outline { background: transparent; border: 2px solid var(--tt-cyan); }
.tt-btn-outline > span { color: #fff; }
.tt-btn-outline:hover { background: rgba(0, 217, 255, 0.12); box-shadow: 0 0 22px rgba(0, 217, 255, 0.35); }
.tt-btn-dark { background: var(--tt-navy-3); }
.tt-btn-dark > span { color: #fff; }
.tt-btn-sm { padding: 0.65rem 1.6rem; }
.tt-btn-sm > span { font-size: 0.9rem; }

/* ---------- Header ---------- */
.tt-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: var(--tt-navy);
	min-height: 80px;
	display: flex;
	align-items: center;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}
.admin-bar .tt-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .tt-header { top: 46px; } }
.tt-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
}
.tt-logo img { height: 46px; width: auto; display: block; }
.tt-nav { display: block; }
.tt-menu {
	display: flex;
	gap: 2.1rem;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}
.tt-menu a {
	color: var(--tt-g300);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.98rem;
	position: relative;
	padding: 0.5rem 0;
	display: inline-block;
}
.tt-menu a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 0;
	background: var(--tt-cyan);
	transition: width 0.25s ease;
}
.tt-menu a:hover { color: #fff; }
.tt-menu a:hover::after { width: 100%; }
.tt-menu .current-menu-item > a,
.tt-menu .current-page-item > a { color: var(--tt-cyan); }
.tt-menu .current-menu-item > a::after,
.tt-menu .current-page-item > a::after { width: 100%; }
.tt-hamburger {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
}
.tt-hamburger span { display: block; width: 26px; height: 2px; background: var(--tt-cyan); transition: 0.25s; }
.tt-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tt-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tt-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.tt-hero {
	background: var(--tt-navy);
	color: #fff;
	text-align: center;
	padding: 6rem 0 5rem;
	position: relative;
	overflow: hidden;
}
.tt-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(0, 217, 255, 0.13) 1.2px, transparent 1.2px);
	background-size: 26px 26px;
	pointer-events: none;
}
.tt-hero::after {
	content: '';
	position: absolute;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 116, 217, 0.35), transparent 70%);
	top: -220px;
	right: -160px;
	pointer-events: none;
}
.tt-hero > .wp-block-group__inner-container { position: relative; z-index: 1; }
.tt-hero h1 { color: #fff; }
.tt-hero-logo { margin-bottom: 1.75rem !important; }
.tt-hero-logo img { width: min(380px, 72vw); height: auto; }
.tt-tagline {
	color: var(--tt-g300);
	font-size: 1.15rem;
	max-width: 660px;
	margin: 0 auto 2.5rem !important;
}
.tt-hero-btns { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; }
.tt-scroll {
	margin-top: 3.5rem;
	color: var(--tt-g400);
	font-size: 0.72rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	font-family: var(--tt-font-h);
	font-weight: 600;
}
.tt-scroll::after {
	content: '';
	display: block;
	width: 1px;
	height: 44px;
	background: linear-gradient(var(--tt-cyan), transparent);
	margin: 0.75rem auto 0;
	animation: tt-drop 1.8s ease-in-out infinite;
}
@keyframes tt-drop {
	0% { transform: scaleY(0); transform-origin: top; }
	45% { transform: scaleY(1); transform-origin: top; }
	55% { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Inner page hero */
.tt-page-hero {
	background: var(--tt-navy);
	color: #fff;
	text-align: center;
	padding: 4.5rem 0;
	position: relative;
	overflow: hidden;
}
.tt-page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(0, 217, 255, 0.1) 1.2px, transparent 1.2px);
	background-size: 26px 26px;
	pointer-events: none;
}
.tt-page-hero > .wp-block-group__inner-container { position: relative; z-index: 1; }
.tt-page-hero h1 { color: #fff; margin-bottom: 0.75rem; }
.tt-page-hero p { color: var(--tt-g300); max-width: 680px; margin: 0 auto; font-size: 1.1rem; }

/* ---------- Cards & grids ---------- */
.tt-grid { display: grid; gap: 1.75rem; }
.tt-grid-4 { grid-template-columns: repeat(4, 1fr); }
.tt-grid-3 { grid-template-columns: repeat(3, 1fr); }
.tt-grid-2 { grid-template-columns: repeat(2, 1fr); }
.tt-card {
	background: #fff;
	padding: 2.25rem 2rem;
	box-shadow: 0 10px 30px rgba(0, 31, 63, 0.08);
	border: 1px solid #edf1f6;
}
.tt-card h3 { margin: 1.35rem 0 0.7rem; }
.tt-card p { margin-bottom: 0; font-size: 0.96rem; }
.tt-card-dark {
	background: var(--tt-navy-2);
	border: 1px solid rgba(0, 217, 255, 0.22);
	color: #fff;
}
.tt-card-dark h3 { color: #fff; }
.tt-card-dark p { color: var(--tt-g300); }
.tt-icon-box {
	width: 64px;
	height: 64px;
	background: var(--tt-navy);
	transform: skewX(-10deg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.tt-icon-box svg {
	width: 30px;
	height: 30px;
	stroke: var(--tt-cyan);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transform: skewX(10deg);
}
.tt-icon-box.tt-cyan-box { background: var(--tt-cyan); }
.tt-icon-box.tt-cyan-box svg { stroke: var(--tt-navy); }

/* ---------- CTA banner ---------- */
.tt-cta {
	background: linear-gradient(120deg, var(--tt-cyan), var(--tt-blue) 55%, var(--tt-navy-4));
	text-align: center;
	padding: 4.5rem 0;
	color: #fff;
	position: relative;
	overflow: hidden;
}
.tt-cta > .wp-block-group__inner-container { position: relative; z-index: 1; }
.tt-cta h2 { color: #fff; margin-bottom: 0.75rem; }
.tt-cta p { color: rgba(255, 255, 255, 0.92); font-size: 1.1rem; max-width: 640px; margin: 0 auto 2.25rem; }

/* ---------- Split rows (services / mission) ---------- */
.tt-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3.5rem;
	align-items: center;
	padding: 2.75rem 0;
}
.tt-split.tt-flip > div:first-child { order: 2; }
.tt-split.tt-flip > div:last-child { order: 1; }
.tt-split img { width: 100%; height: auto; display: block; }
.tt-frame { position: relative; display: inline-block; width: 100%; }
.tt-frame::before {
	content: '';
	position: absolute;
	inset: 0;
	border: 3px solid var(--tt-cyan);
	transform: translate(18px, 18px);
	z-index: 0;
	pointer-events: none;
}
.tt-frame img { position: relative; z-index: 1; box-shadow: 0 18px 45px rgba(0, 31, 63, 0.18); }

/* ---------- Check lists ---------- */
.tt-checks { list-style: none; margin: 1.25rem 0 1.75rem; padding: 0; display: grid; gap: 0.65rem; }
.tt-checks li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.98rem; }
.tt-checks svg {
	width: 20px;
	height: 20px;
	stroke: var(--tt-cyan);
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
	margin-top: 4px;
}

/* ---------- Stats band ---------- */
.tt-stat {
	background: var(--tt-navy-2);
	border: 1px solid rgba(0, 217, 255, 0.2);
	padding: 2.1rem 1.5rem;
	text-align: center;
}
.tt-stat-num {
	font-family: var(--tt-font-h);
	font-size: 3rem;
	font-weight: 700;
	color: var(--tt-cyan);
	line-height: 1;
}
.tt-stat-label {
	color: var(--tt-g300);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.85rem;
	margin-top: 0.6rem;
	font-family: var(--tt-font-h);
	font-weight: 600;
}

/* ---------- Expertise tiles ---------- */
.tt-tile {
	background: var(--tt-light-2);
	border: 1px solid #e3e9f1;
	padding: 1.1rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-weight: 600;
	color: var(--tt-navy);
	font-size: 0.95rem;
}
.tt-tile svg {
	width: 20px;
	height: 20px;
	stroke: var(--tt-cyan);
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

/* ---------- Testimonials ---------- */
.tt-pills { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-bottom: 3rem; }
.tt-pill {
	font-family: var(--tt-font-h);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	font-size: 0.85rem;
	padding: 0.6rem 1.4rem;
	border: 1px solid #d5dce6;
	background: #fff;
	color: var(--tt-navy);
	cursor: pointer;
	transition: 0.2s;
}
.tt-pill:hover { border-color: var(--tt-cyan); color: var(--tt-blue); }
.tt-pill.tt-active { background: var(--tt-navy); color: #fff; border-color: var(--tt-navy); }
.tt-tcard {
	background: #fff;
	padding: 2rem;
	box-shadow: 0 10px 30px rgba(0, 31, 63, 0.08);
	border: 1px solid #edf1f6;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	border-top: 3px solid var(--tt-cyan);
}
.tt-tcard p { margin-bottom: 0; font-size: 0.96rem; font-style: italic; }
.tt-stars { color: #f5a623; letter-spacing: 0.22em; font-size: 0.95rem; }
.tt-quote { font-size: 2.6rem; line-height: 1; color: var(--tt-cyan); font-family: Georgia, serif; margin-bottom: -0.6rem; }
.tt-tmeta { margin-top: auto; padding-top: 0.5rem; }
.tt-tname { font-family: var(--tt-font-h); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tt-navy); }
.tt-trole { color: var(--tt-g400); font-size: 0.85rem; }
.tt-hidden { display: none !important; }

/* ---------- Contact ---------- */
.tt-contact-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; align-items: start; }
.tt-info-block { margin-bottom: 1.75rem; }
.tt-info-label {
	font-family: var(--tt-font-h);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--tt-navy);
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.35rem;
}
.tt-info-label svg {
	width: 18px;
	height: 18px;
	stroke: var(--tt-cyan);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.tt-info-block p { margin-bottom: 0; }

/* Fluent Forms styling */
.fluentform .ff-el-group { margin-bottom: 1.25rem; }
.fluentform label,
.fluentform .ff-el-form-check-label {
	font-family: var(--tt-font-h) !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	color: var(--tt-navy) !important;
}
.fluentform .ff-el-form-control {
	background: #fff;
	border: 1px solid #d7dde5;
	padding: 0.85rem 1rem;
	border-radius: 0;
	width: 100%;
	font-family: var(--tt-font-b);
	font-size: 0.98rem;
	color: #1f2937;
}
.fluentform .ff-el-form-control:focus {
	border-color: var(--tt-cyan);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.15);
}
.fluentform textarea.ff-el-form-control { min-height: 150px; resize: vertical; }
.fluentform .ff-btn-submit {
	background: linear-gradient(135deg, var(--tt-cyan), var(--tt-blue)) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0.95rem 2.6rem !important;
	font-family: var(--tt-font-h) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	font-size: 1rem !important;
	color: var(--tt-navy) !important;
	cursor: pointer;
	transition: box-shadow 0.25s ease, filter 0.25s ease;
}
.fluentform .ff-btn-submit:hover { box-shadow: 0 0 26px rgba(0, 217, 255, 0.5); filter: brightness(1.07); }

/* ---------- Footer ---------- */
.tt-footer {
	background: var(--tt-navy);
	color: var(--tt-g300);
	border-top: 3px solid var(--tt-cyan);
	margin-top: 0;
}
.tt-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
	gap: 2.5rem;
	padding: 4rem 0 3rem;
}
.tt-footer h4 { color: #fff; margin-bottom: 1.25rem; }
.tt-footer-logo { height: 44px; width: auto; margin-bottom: 1.1rem; }
.tt-footer p { font-size: 0.95rem; }
.tt-footer a { color: var(--tt-g300); text-decoration: none; }
.tt-footer a:hover { color: var(--tt-cyan); }
.tt-flink { list-style: none; margin: 0; padding: 0; }
.tt-flink li { margin: 0.6rem 0; }
.tt-flink a::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	background: var(--tt-cyan);
	transform: rotate(45deg) skewX(-10deg);
	margin-right: 0.7rem;
	vertical-align: middle;
}
.tt-contact-list { list-style: none; margin: 0; padding: 0; }
.tt-contact-list li { display: flex; gap: 0.75rem; margin: 0.7rem 0; align-items: flex-start; font-size: 0.95rem; }
.tt-contact-list svg {
	width: 18px;
	height: 18px;
	stroke: var(--tt-cyan);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
	margin-top: 4px;
}
.tt-social { display: flex; gap: 0.75rem; }
.tt-social a {
	width: 42px;
	height: 42px;
	border: 1px solid rgba(209, 213, 219, 0.35);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: 0.25s;
	color: var(--tt-g300);
}
.tt-social a:hover { background: var(--tt-cyan); border-color: var(--tt-cyan); color: var(--tt-navy); }
.tt-social svg { width: 18px; height: 18px; fill: currentColor; }
.tt-bottombar {
	border-top: 1px solid rgba(209, 213, 219, 0.15);
	padding: 1.25rem 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	font-size: 0.85rem;
	color: var(--tt-g400);
}
.tt-legal-links a { margin: 0 0.25rem; }
.tt-sep { margin: 0 0.4rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.tt-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.tt-grid-3 { grid-template-columns: repeat(2, 1fr); }
	.tt-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
	.tt-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--tt-navy);
		border-top: 1px solid rgba(0, 217, 255, 0.2);
		box-shadow: 0 18px 30px rgba(0, 0, 0, 0.35);
	}
	.tt-nav.tt-open { display: block; }
	.tt-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 0.75rem 1.5rem 1.25rem; }
	.tt-menu li { border-bottom: 1px solid rgba(209, 213, 219, 0.1); }
	.tt-menu li:last-child { border-bottom: none; }
	.tt-menu a { display: block; padding: 0.8rem 0; }
	.tt-hamburger { display: flex; }
	.tt-header { position: sticky; }
	.tt-header-inner { position: relative; }
}
@media (max-width: 768px) {
	.tt-split { grid-template-columns: 1fr; gap: 2rem; }
	.tt-split.tt-flip > div:first-child { order: 0; }
	.tt-split.tt-flip > div:last-child { order: 0; }
	.tt-contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.tt-section { padding: 3.5rem 0; }
}
@media (max-width: 600px) {
	.tt-grid-4, .tt-grid-3, .tt-grid-2 { grid-template-columns: 1fr; }
	.tt-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
	.tt-header-cta { display: none; }
	.tt-hero { padding: 4rem 0 3.5rem; }
}

/* WordPress block alignment niceties */
.wp-block-image.aligncenter { text-align: center; }