/* =============================================================
   KutkiTech — Design Tokens
   Palette: deep navy base, electric blue + circuit green accents,
   a single purple used only in the hero network signature.
   Type: Space Grotesk (display) / Inter (body) / JetBrains Mono (data)
   ============================================================= */
:root {
	--kt-grad-btn: linear-gradient(120deg, #2D61E5 0%, #08855A 100%);
	--kt-grad-btn-hover: linear-gradient(120deg, #3B72F5 0%, #0B9467 100%);
	--kt-on-grad: #FFFFFF;
	--kt-bg:        #090D18;
	--kt-bg-alt:    #0D1424;
	--kt-panel:     #111A2E;
	--kt-panel-2:   #14203A;
	--kt-border:    rgba(255,255,255,.09);
	--kt-border-2:  rgba(255,255,255,.14);
	--kt-text:      #EAEEFB;
	--kt-text-dim:  #9BA6C4;
	--kt-text-dim-2:#6C7796;
	--kt-heading:   #FFFFFF;

	--kt-blue:      #3B7AFE;
	--kt-blue-2:    #6FA0FF;
	--kt-green:     #00BF63;
	--kt-purple:    #8C7BF6;

	--kt-grad-brand: linear-gradient(120deg, var(--kt-blue) 0%, var(--kt-green) 100%);
	--kt-grad-glow:  radial-gradient(circle, rgba(59,122,254,.35), transparent 70%);

	--kt-veil-1: rgba(255,255,255,.015);
	--kt-veil-2: rgba(255,255,255,.02);
	--kt-veil-3: rgba(255,255,255,.03);
	--kt-veil-4: rgba(255,255,255,.05);
	--kt-star-empty: rgba(255,255,255,.15);
	--kt-header-bg: rgba(9,13,24,0);
	--kt-header-bg-scrolled: rgba(9,13,24,.82);
	--kt-mobile-nav-bg: rgba(9,13,24,.98);
	--kt-map-filter: invert(92%) hue-rotate(180deg) brightness(95%) contrast(90%);
	--kt-logo-card-bg: var(--kt-panel-2);
	--kt-logo-card-bg-hover: #1C2B4A;
	--kt-logo-card-border: var(--kt-border-2);

	--kt-font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
	--kt-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--kt-font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

	--kt-radius-sm: 10px;
	--kt-radius: 16px;
	--kt-radius-lg: 24px;
	--kt-container: clamp(1220px, 86vw, 1640px);
	--kt-base-fs: clamp(16px, 0.42vw + 10.4px, 18px);
	--kt-header-h: 84px;

	--kt-ease: cubic-bezier(.22,1,.36,1);

	color-scheme: dark;
}

/* =============================================================
   Light mode — toggled via [data-theme="light"] on <html>,
   set by inline anti-flash script (header.php) + main.js
   ============================================================= */
:root[data-theme="light"] {
	--kt-bg:        #F5F7FB;
	--kt-bg-alt:    #ECF0F8;
	--kt-panel:     #FFFFFF;
	--kt-panel-2:   #F4F7FC;
	--kt-border:    rgba(15,23,42,.10);
	--kt-border-2:  rgba(15,23,42,.16);
	--kt-text:      #2B3242;
	--kt-text-dim:  #5B6478;
	--kt-text-dim-2:#7C879E;
	--kt-heading:   #0B1120;

	--kt-blue-2:    #2A63E8;

	--kt-veil-1: rgba(15,23,42,.02);
	--kt-veil-2: rgba(15,23,42,.03);
	--kt-veil-3: rgba(15,23,42,.04);
	--kt-veil-4: rgba(15,23,42,.06);
	--kt-star-empty: rgba(15,23,42,.18);
	--kt-header-bg: rgba(245,247,251,0);
	--kt-header-bg-scrolled: rgba(245,247,251,.86);
	--kt-mobile-nav-bg: rgba(245,247,251,.98);
	--kt-map-filter: none;
	--kt-logo-card-bg: #FFFFFF;
	--kt-logo-card-bg-hover: #F2F6FF;
	--kt-logo-card-border: rgba(15,23,42,.10);

	color-scheme: light;
}

/* Smooth dark/light theme switching. Components with their own transition
   list (cards, buttons, etc.) declare background-color/border-color/color
   directly in that list — a second `transition` rule here would be silently
   overridden rather than merged, since transition is a shorthand. This rule
   only needs to cover elements that don't declare their own transition,
   which in practice is almost all plain text and a few simple containers. */
body, .kt-site-header, .kt-primary-nav, .kt-download-row, .kt-testimonial-card,
.kt-form-field input, .kt-form-field textarea,
h1, h2, h3, h4, h5, p, span, li, label, td, th {
	transition: background-color .3s var(--kt-ease), border-color .3s var(--kt-ease), color .3s var(--kt-ease);
}

/* =============================================================
   Reset
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--kt-header-h); font-size: var(--kt-base-fs); }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body {
	margin: 0;
	background: var(--kt-bg);
	color: var(--kt-text);
	font-family: var(--kt-font-body);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
/* Icon sizing — kt_icon() SVGs ship without width/height attributes, so without
   this rule browsers fall back to their default replaced-element size (huge). */
svg.kt-icon { width: 22px; height: 22px; flex-shrink: 0; }
svg.kt-icon-sm { width: 16px; height: 16px; flex-shrink: 0; }
svg.kt-icon-xs { width: 13px; height: 13px; flex-shrink: 0; }
svg.kt-icon-lg { width: 40px; height: 40px; flex-shrink: 0; color: var(--kt-text-dim-2); }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5 { font-family: var(--kt-font-display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; color: var(--kt-heading); }
p { margin: 0 0 1em; color: var(--kt-text-dim); }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; appearance: none; -webkit-appearance: none; }
input, textarea { font-family: inherit; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); overflow: hidden; height: 1px; width: 1px; }
.skip-link { top: -50px; left: 10px; position: fixed; z-index: 10000; background: var(--kt-blue); color: #fff; padding: 10px 18px; border-radius: 8px; transition: top .2s; }
.skip-link:focus { top: 10px; position: fixed; clip: auto; width: auto; height: auto; }
:focus-visible { outline: 2px solid var(--kt-blue-2); outline-offset: 3px; border-radius: 4px; }

.kt-container { max-width: var(--kt-container); margin: 0 auto; padding: 0 28px; position: relative; }
.kt-noise-overlay {
	position: fixed; inset: 0; pointer-events: none; z-index: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
	mix-blend-mode: overlay;
}

/* =============================================================
   Header / Nav
   ============================================================= */
.kt-site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 500;
	height: var(--kt-header-h);
	display: flex; align-items: center;
	background: var(--kt-header-bg);
	border-bottom: 1px solid transparent;
	transition: background .35s var(--kt-ease), border-color .35s var(--kt-ease), height .3s var(--kt-ease);
}
.kt-site-header.is-scrolled {
	background: var(--kt-header-bg-scrolled);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border-bottom-color: var(--kt-border);
	height: 72px;
}
/* backdrop-filter creates a new containing block for position:fixed descendants —
   without this, the fixed mobile nav panel (a descendant of the header) would
   position itself relative to the header's own small box instead of the
   viewport as soon as the header is scrolled and gains backdrop-filter,
   collapsing the open menu to near-zero visible height. */
.kt-site-header.kt-nav-open { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.kt-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.kt-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
@media (min-width: 901px) {
	.kt-logo { margin-left: -28px; }
}
.kt-logo-mark { color: var(--kt-blue-2); display: flex; }
.kt-logo-mark svg { filter: drop-shadow(0 0 10px rgba(59,122,254,.45)); }
.kt-logo-text { font-family: var(--kt-font-display); font-weight: 700; font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.35rem); color: var(--kt-heading); letter-spacing: -.01em; white-space: nowrap; }
.kt-logo-text span { color: var(--kt-green); }
.custom-logo { max-height: 52px; width: auto; }

.kt-primary-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.kt-primary-nav::-webkit-scrollbar { display: none; }
.kt-primary-nav .nav-menu { display: flex; align-items: center; gap: clamp(0px, 0.4vw, 6px); }
.kt-primary-nav .nav-menu > li { flex-shrink: 0; }
.kt-primary-nav .nav-menu > li > a {
	display: inline-block; white-space: nowrap;
	padding: 10px clamp(9px, 0.5vw + 6px, 16px); font-size: clamp(0.82rem, 0.7rem + 0.45vw, 0.945rem); font-weight: 500; color: var(--kt-text-dim);
	position: relative; border-radius: 999px; transition: color .25s, background .25s;
}
.kt-primary-nav .nav-menu > li > a::after {
	content: ''; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px;
	background: var(--kt-grad-brand); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--kt-ease);
}
.kt-primary-nav .nav-menu > li > a:hover,
.kt-primary-nav .nav-menu > li > a:focus-visible { color: var(--kt-heading); }
.kt-primary-nav .nav-menu > li > a:hover::after,
.kt-primary-nav .nav-menu > li > a:focus-visible::after,
.kt-primary-nav .nav-menu > li.current-menu-item > a::after { transform: scaleX(1); }
.kt-primary-nav .nav-menu > li.current-menu-item > a { color: var(--kt-heading); }
.kt-btn.kt-mobile-nav-cta { display: none; }

.kt-header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: auto; }

.kt-theme-toggle {
	display: flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--kt-border-2);
	background: var(--kt-veil-2); color: var(--kt-text-dim); flex-shrink: 0;
	transition: color .25s, border-color .25s, background .25s, transform .25s var(--kt-ease);
}
.kt-theme-toggle:hover { color: var(--kt-heading); border-color: var(--kt-blue-2); transform: rotate(-8deg); }
.kt-theme-toggle .kt-theme-icon-moon { display: block; }
.kt-theme-toggle .kt-theme-icon-sun { display: none; }
:root[data-theme="light"] .kt-theme-toggle .kt-theme-icon-moon { display: none; }
:root[data-theme="light"] .kt-theme-toggle .kt-theme-icon-sun { display: block; }

.kt-menu-toggle {
	display: none; flex-direction: column; justify-content: center; gap: 5px;
	width: 42px; height: 42px; border: 1px solid var(--kt-border-2); border-radius: 10px;
	background: var(--kt-veil-3); align-items: center;
	transition: background-color .3s var(--kt-ease), border-color .3s var(--kt-ease);
}
.kt-menu-toggle span { width: 18px; height: 2px; background: var(--kt-heading); border-radius: 2px; transition: transform .3s var(--kt-ease), opacity .2s, background-color .3s var(--kt-ease); }
.kt-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kt-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.kt-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================================
   Buttons
   ============================================================= */
.kt-btn {
	display: inline-flex; align-items: center; gap: 9px; justify-content: center;
	padding: 13px 24px; border-radius: 999px; font-weight: 600; font-size: .95rem;
	border: 1px solid transparent; white-space: nowrap; transition: transform .25s var(--kt-ease), box-shadow .25s, background .25s, color .25s, border-color .25s;
	position: relative; overflow: hidden;
}
.kt-btn svg { width: 16px; height: 16px; transition: transform .3s var(--kt-ease); }
.kt-btn:hover svg { transform: translateX(3px); }
.kt-btn-primary { background: var(--kt-grad-btn); color: var(--kt-on-grad); box-shadow: 0 8px 24px -8px rgba(51,214,166,.45); }
.kt-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(59,122,254,.55); }
.kt-btn-ghost { color: var(--kt-text); border-color: var(--kt-border-2); background: var(--kt-veil-2); }
.kt-btn-ghost:hover { border-color: var(--kt-blue-2); color: var(--kt-heading); background: rgba(59,122,254,.08); }
.kt-btn-outline { color: var(--kt-text); border-color: var(--kt-border-2); background: transparent; }
.kt-btn-outline:hover { border-color: var(--kt-green); color: var(--kt-green); background: var(--kt-veil-2); }
.kt-btn-sm { padding: 9px 18px; font-size: .85rem; }
.kt-btn-lg { padding: 16px 30px; font-size: 1rem; }
.kt-btn:disabled { opacity: .6; cursor: not-allowed; transform: none !important; }

.kt-link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--kt-green); font-weight: 600; }
.kt-link-arrow svg { width: 16px; height: 16px; transition: transform .3s var(--kt-ease); }
.kt-link-arrow:hover svg { transform: translateX(4px); }

/* =============================================================
   Hero
   ============================================================= */
.kt-hero { position: relative; padding: calc(var(--kt-header-h) + 96px) 0 0; overflow: hidden; isolation: isolate; }
#kt-network-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .75; }
.kt-hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); z-index: -1; pointer-events: none; }
.kt-hero-glow-1 { width: 560px; height: 560px; top: -180px; right: -160px; background: radial-gradient(circle, rgba(59,122,254,.32), transparent 70%); }
.kt-hero-glow-2 { width: 460px; height: 460px; bottom: -220px; left: -140px; background: radial-gradient(circle, rgba(140,123,246,.22), transparent 70%); }

.kt-hero-inner { max-width: 780px; text-align: left; padding-bottom: 64px; }
.kt-eyebrow {
	display: inline-flex; align-items: center; gap: 8px; font-family: var(--kt-font-mono);
	font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--kt-green);
	padding: 6px 14px; border: 1px solid rgba(51,214,166,.3); border-radius: 999px; background: rgba(51,214,166,.06);
}
.kt-hero-title { font-size: clamp(2.4rem, 5.4vw, 4.1rem); margin: 22px 0 20px; }
.kt-text-gradient { background: var(--kt-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kt-hero-desc { max-width: 620px; font-size: 1.1rem; color: var(--kt-text-dim); }
.kt-hero-actions { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; }

.kt-hero-stats { border-top: 1px solid var(--kt-border); background: var(--kt-veil-1); backdrop-filter: blur(6px); }
.kt-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.kt-stat { padding: 30px 20px; text-align: center; border-right: 1px solid var(--kt-border); }
.kt-stat:last-child { border-right: none; }
.kt-stat-num { display: block; font-family: var(--kt-font-mono); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--kt-heading); }
.kt-stat-label { display: block; margin-top: 6px; font-size: .85rem; color: var(--kt-text-dim); }

/* =============================================================
   Sections
   ============================================================= */
.kt-main { position: relative; z-index: 2; }
.kt-section { padding: clamp(52px, 5.2vw, 100px) 0; }
.kt-section-panel { background: linear-gradient(180deg, var(--kt-bg-alt), var(--kt-bg)); border-top: 1px solid var(--kt-border); border-bottom: 1px solid var(--kt-border); }

.kt-section-heading { max-width: 680px; margin: 0 auto 40px; }
.kt-section-heading.align-center { text-align: center; }
.kt-section-heading.align-left { text-align: left; margin-left: 0; }
.kt-section-heading h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-top: 14px; }
.kt-section-heading p { font-size: 1.05rem; margin-top: 10px; }

.kt-lead { font-size: 1.08rem; color: var(--kt-text-dim); }
.kt-highlight { color: var(--kt-heading); font-family: var(--kt-font-display); font-size: 1.2rem; padding-left: 18px; border-left: 3px solid var(--kt-green); }

/* Page header (interior pages) */
.kt-page-header { padding: calc(var(--kt-header-h) + 52px) 0 44px; text-align: left; position: relative; overflow: hidden; isolation: isolate; }
.kt-page-header h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin-top: 16px; }
.kt-page-subtitle { max-width: 620px; font-size: 1.08rem; }

.kt-page-header + .kt-section { padding-top: 24px; } /*added later*/

/* Service detail page header — icon sits between the eyebrow and title, so it
   needs its own explicit spacing rather than relying on h1's default
   margin-top (meant for eyebrow-directly-above-h1), since adjacent margins
   collapse to the larger value instead of adding together. */
.kt-service-detail-header h1 { margin-top: 0; }
.kt-service-detail-thumb {
	margin: 0 0 20px; border-radius: var(--kt-radius-lg); overflow: hidden;
}
.kt-service-detail-thumb img { width: 100%; height: auto; display: block; }

/* =============================================================
   Services grid
   ============================================================= */
.kt-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kt-service-card {
	background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius);
	padding: 32px 26px; transition: transform .35s var(--kt-ease), border-color .35s var(--kt-ease), background .35s var(--kt-ease), color .35s var(--kt-ease);
}
.kt-service-card:hover { transform: translateY(-6px); border-color: rgba(59,122,254,.4); background: var(--kt-panel-2); }
.kt-service-icon {
	width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, rgba(59,122,254,.18), rgba(51,214,166,.14)); color: var(--kt-blue-2); margin-bottom: 18px;
}
.kt-service-icon svg { width: 24px; height: 24px; }
.kt-service-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.kt-service-card p { font-size: .95rem; margin: 0; }
.kt-service-card-lg .kt-service-body { font-size: .95rem; }

/* Service detail page */
.kt-service-detail-icon {
	width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, rgba(59,122,254,.2), rgba(51,214,166,.16)); color: var(--kt-blue-2);
	margin: 24px 0 28px; box-shadow: 0 10px 26px -12px rgba(59,122,254,.35);
}
.kt-service-detail-icon svg { width: 28px; height: 28px; }

.kt-service-detail-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; }
.kt-service-detail-content { max-width: none; }
.kt-service-detail-sidebar { position: sticky; top: calc(var(--kt-header-h) + 24px); display: flex; flex-direction: column; gap: 24px; }

.kt-benefit-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kt-benefit-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .96rem; color: var(--kt-text); }
.kt-benefit-list svg { color: var(--kt-green); margin-top: 3px; flex-shrink: 0; }

.kt-advantage-panel {
	padding: 28px; border-radius: var(--kt-radius); background: linear-gradient(160deg, rgba(59,122,254,.12), rgba(51,214,166,.08));
	border: 1px solid rgba(59,122,254,.25);
}
.kt-advantage-panel h3 { font-size: 1.15rem; margin: 8px 0 16px; }
.kt-advantage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.kt-advantage-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--kt-text-dim); }
.kt-advantage-list svg { color: var(--kt-blue-2); margin-top: 2px; flex-shrink: 0; }

.kt-service-cta-panel { padding: 28px; border-radius: var(--kt-radius); background: var(--kt-panel); border: 1px solid var(--kt-border); text-align: center; }
.kt-service-cta-panel h3 { font-size: 1.1rem; margin-bottom: 8px; }
.kt-service-cta-panel p { font-size: .88rem; margin-bottom: 18px; }
.kt-service-cta-panel .kt-btn { width: 100%; justify-content: center; }

/* =============================================================
   Why choose us
   ============================================================= */
.kt-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.kt-why-grid h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-top: 12px; }
.kt-why-list { display: grid; gap: 18px; }
.kt-why-item { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: var(--kt-radius-sm); border: 1px solid var(--kt-border); background: var(--kt-veil-1); transition: border-color .3s, background .3s; }
.kt-why-item:hover { border-color: rgba(51,214,166,.35); background: rgba(51,214,166,.04); }
.kt-why-item svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--kt-green); margin-top: 2px; }
.kt-why-item h4 { font-size: 1rem; margin-bottom: 4px; }
.kt-why-item p { font-size: .9rem; margin: 0; }

/* =============================================================
   Testimonials
   ============================================================= */
.kt-testimonial-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kt-testimonial-card { background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius); padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.kt-quote-icon { width: 30px; height: 30px; color: var(--kt-purple); opacity: .8; }
.kt-stars { display: flex; gap: 3px; }
.kt-star { fill: var(--kt-star-empty); color: transparent; }
.kt-star.is-filled { fill: #FFC94D; }
.kt-testimonial-quote { color: var(--kt-text); font-size: .98rem; flex-grow: 1; }
.kt-testimonial-author { display: flex; align-items: center; gap: 12px; padding-top: 6px; border-top: 1px solid var(--kt-border); transition: border-color .3s var(--kt-ease); }
.kt-avatar-initials { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--kt-grad-btn); color: var(--kt-on-grad); font-weight: 700; font-family: var(--kt-font-display); flex-shrink: 0; }
.kt-avatar-lg { width: 84px; height: 84px; font-size: 1.4rem; }
.kt-avatar-img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.kt-testimonial-author strong { display: block; font-size: .92rem; color: var(--kt-heading); }
.kt-testimonial-author span { font-size: .82rem; color: var(--kt-text-dim); }

/* =============================================================
   FAQ Accordion
   ============================================================= */
.kt-faq-wrap { max-width: 820px; }
.kt-accordion-item { border-bottom: 1px solid var(--kt-border); transition: border-color .3s var(--kt-ease); }
.kt-accordion-trigger {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
	background: none; border: none; color: var(--kt-heading); text-align: left; padding: 22px 4px; font-family: var(--kt-font-display); font-size: 1.05rem; font-weight: 600;
}
.kt-accordion-icon { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.kt-accordion-icon::before, .kt-accordion-icon::after { content: ''; position: absolute; background: var(--kt-green); border-radius: 2px; transition: transform .3s var(--kt-ease); }
.kt-accordion-icon::before { width: 100%; height: 2px; top: 50%; left: 0; transform: translateY(-50%); }
.kt-accordion-icon::after { width: 2px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); }
.kt-accordion-trigger[aria-expanded="true"] .kt-accordion-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.kt-accordion-panel { overflow: hidden; padding-bottom: 22px; }
.kt-accordion-panel p { font-size: .96rem; margin: 0; }

/* =============================================================
   CTA
   ============================================================= */
.kt-cta { padding: 64px 0; position: relative; }
.kt-cta-inner {
	text-align: center; max-width: 680px; margin: 0 auto; padding: 60px 40px; border-radius: var(--kt-radius-lg);
	background: linear-gradient(135deg, rgba(59,122,254,.16), rgba(51,214,166,.10));
	border: 1px solid rgba(59,122,254,.28);
	position: relative; overflow: hidden;
}
.kt-cta-inner::before {
	content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 1px;
	background: var(--kt-grad-brand); opacity: .35;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.kt-cta-inner h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.kt-cta-inner .kt-btn { margin-top: 20px; }

/* =============================================================
   Footer
   ============================================================= */
.kt-site-footer { position: relative; padding: 80px 0 0; background: var(--kt-bg-alt); border-top: 1px solid var(--kt-border); overflow: hidden; transition: background-color .3s var(--kt-ease), border-color .3s var(--kt-ease); }
.kt-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px; }
.kt-footer-tagline { font-size: .92rem; margin: 18px 0 20px; max-width: 280px; }
.kt-footer-tagline em { color: var(--kt-green); font-style: normal; }
.footer-widget-title { font-size: .95rem; color: var(--kt-heading); margin-bottom: 18px; }
.kt-footer-col ul li { margin-bottom: 11px; }
.kt-footer-col ul a { font-size: .9rem; color: var(--kt-text-dim); transition: color .2s; }
.kt-footer-col ul a:hover { color: var(--kt-green); }
.kt-footer-contact li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; font-size: .88rem; color: var(--kt-text-dim); }
.kt-footer-contact svg { flex-shrink: 0; margin-top: 2px; color: var(--kt-blue-2); }
.kt-footer-contact a { color: var(--kt-text-dim); }
.kt-footer-contact a:hover { color: var(--kt-heading); }

.kt-social-links { display: flex; gap: 10px; }
.kt-social-links a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--kt-border-2); display: flex; align-items: center; justify-content: center; color: var(--kt-text-dim); transition: all .25s; }
.kt-social-links a:hover { color: var(--kt-on-grad); background: var(--kt-grad-btn); border-color: transparent; }
.kt-social-links svg { width: 17px; height: 17px; }
.kt-social-links-lg a { width: 46px; height: 46px; }

.kt-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 24px 0; border-top: 1px solid var(--kt-border); font-size: .84rem; color: var(--kt-text-dim-2); transition: border-color .3s var(--kt-ease), color .3s var(--kt-ease); }
.kt-footer-bottom p { margin: 0; }
.kt-footer-legal { display: flex; gap: 22px; }
.kt-footer-legal a:hover { color: var(--kt-green); }
.kt-footer-wave { position: absolute; top: -1px; left: 0; right: 0; height: 140px; background: var(--kt-grad-glow); opacity: .5; pointer-events: none; }

.kt-back-to-top {
	position: fixed; right: 26px; bottom: 26px; z-index: 400; width: 46px; height: 46px; border-radius: 50%;
	background: var(--kt-grad-btn); color: var(--kt-on-grad); border: none; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 26px -8px rgba(51,214,166,.5); opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
	transition: opacity .3s, transform .3s var(--kt-ease);
}
.kt-back-to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* =============================================================
   About page
   ============================================================= */
.kt-about-hero { position: relative; }
.kt-about-content-wrap { position: relative; overflow: hidden; }
.kt-about-content-glow { width: 420px; height: 420px; right: -140px; top: 50%; transform: translateY(-50%); background: radial-gradient(circle, rgba(51,214,166,.20), transparent 70%); display: none; }
@media (min-width: 1300px) { .kt-about-content-glow { display: block; } }
.kt-about-content-mascot { display: none; }
.kt-mascot-wrap.kt-about-content-mascot { display: none; }
@media (min-width: 1300px) {
	.kt-mascot-wrap.kt-about-content-mascot {
		display: flex; position: absolute; right: 56px; top: 50%; transform: translateY(-50%);
		width: clamp(150px, 12vw, 210px); margin: 0; pointer-events: none; z-index: 2;
	}
}
.kt-about-hero .kt-page-header { padding-bottom: 60px; }
.kt-about-hero-mascot { bottom: -42px; width: clamp(140px, 13vw, 210px); }
.kt-section-tight-top { padding-top: 4px; }
@media (min-width: 901px) {
	.kt-about-hero .kt-page-header h1,
	.kt-about-hero .kt-page-header .kt-page-subtitle { max-width: 66%; }
}
.kt-values-grid, .kt-process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kt-value-card { background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius); padding: 28px 26px; transition: transform .3s var(--kt-ease), border-color .3s var(--kt-ease), background-color .3s var(--kt-ease), color .3s var(--kt-ease), box-shadow .3s var(--kt-ease); }
.kt-value-card:hover { transform: translateY(-4px); border-color: rgba(51,214,166,.35); box-shadow: 0 16px 34px -20px rgba(0,0,0,.4); }
.kt-value-card svg { width: 26px; height: 26px; color: var(--kt-blue-2); margin-bottom: 16px; }
.kt-value-card h4 { font-size: 1.02rem; margin-bottom: 8px; letter-spacing: -.01em; }
.kt-value-card p { font-size: .9rem; line-height: 1.6; margin: 0; color: var(--kt-text-dim); }

.kt-process-card { padding: 30px 28px; border-radius: var(--kt-radius); background: var(--kt-veil-2); border: 1px solid var(--kt-border); transition: transform .3s var(--kt-ease), border-color .3s var(--kt-ease), background-color .3s var(--kt-ease); }
.kt-process-card:hover { transform: translateY(-4px); border-color: rgba(59,122,254,.3); }
.kt-process-card p { color: var(--kt-text); font-size: 1rem; line-height: 1.65; margin-top: 12px; }

.kt-timeline { display: flex; flex-direction: column; gap: 18px; max-width: 780px; border-left: 2px solid var(--kt-border); }
.kt-timeline-item {
	position: relative; margin-left: 32px; padding: 20px 24px;
	background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius);
	transition: transform .3s var(--kt-ease), border-color .3s var(--kt-ease), background-color .3s var(--kt-ease), box-shadow .3s var(--kt-ease);
}
.kt-timeline-item:hover { transform: translateX(4px); border-color: rgba(51,214,166,.3); box-shadow: 0 14px 30px -18px rgba(0,0,0,.4); }
.kt-timeline-item::before { content: ''; position: absolute; left: -39px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--kt-grad-brand); box-shadow: 0 0 0 4px var(--kt-bg); }
.kt-timeline-year { display: inline-block; font-family: var(--kt-font-mono); font-weight: 600; color: var(--kt-green); font-size: 1.05rem; margin-bottom: 8px; }
.kt-timeline-item p { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--kt-text-dim); }

/* =============================================================
   Services page extras
   ============================================================= */
.kt-services-grid-detailed { grid-template-columns: repeat(2, 1fr); }
.kt-tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.kt-tag { font-size: .88rem; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--kt-border-2); color: var(--kt-text-dim); background: var(--kt-veil-2); transition: all .2s; }
.kt-tag:hover { color: var(--kt-heading); border-color: var(--kt-green); }

/* =============================================================
   Team
   ============================================================= */
/* .kt-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.kt-team-card { background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius); padding: 26px; text-align: center; transition: transform .3s var(--kt-ease), border-color .3s var(--kt-ease), background-color .3s var(--kt-ease), color .3s var(--kt-ease); } */

.kt-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, max-content));
  gap: 22px;
  justify-content: center; /* centers the row when fewer cards */
}
.kt-team-card {
  background: var(--kt-panel);
  border: 1px solid var(--kt-border);
  border-radius: var(--kt-radius);
  padding: 26px;
  text-align: center;
  transition: transform .3s var(--kt-ease),
              border-color .3s var(--kt-ease),
              background-color .3s var(--kt-ease),
              color .3s var(--kt-ease);
}

.kt-team-card:hover { transform: translateY(-5px); border-color: rgba(59,122,254,.4); }
.kt-team-photo { width: 96px; height: 96px; margin: 0 auto 16px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--kt-panel-2); }
.kt-team-photo img { width: 100%; height: 100%; object-fit: cover; }
.kt-team-card h3 { font-size: 1.02rem; margin-bottom: 4px; }
.kt-team-role { font-size: .86rem; color: var(--kt-blue-2); margin-bottom: 10px; }
.kt-team-bio { font-size: .85rem; color: var(--kt-text-dim); margin-bottom: 10px; }
.kt-team-linkedin { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--kt-border-2); align-items: center; justify-content: center; color: var(--kt-text-dim); }
.kt-team-linkedin:hover { color: var(--kt-on-grad); background: var(--kt-grad-btn); border-color: transparent; }

/* Hierarchy groups */
.kt-team-groups { display: flex; flex-direction: column; gap: 56px; }
/* .kt-team-group-heading { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; } */


/* .kt-team-group-heading h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0; }
.kt-team-group-count { font-family: var(--kt-font-mono); font-size: .8rem; color: var(--kt-text-dim-2); padding: 4px 12px; border: 1px solid var(--kt-border-2); border-radius: 999px; } */

.kt-team-group-heading {
  display: flex;
  align-items: center;     /* aligns h2 and badge vertically */
  justify-content: center; /* centers the whole heading block horizontally */
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  text-align: center;
}

.kt-team-group-heading h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  margin: 0;
}

.kt-team-group-count {
  font-family: var(--kt-font-mono);
  font-size: .8rem;
  color: var(--kt-text-dim-2);
  padding: 4px 12px;
  border: 1px solid var(--kt-border-2);
  border-radius: 999px;
  display: inline-flex;    /* makes pill behave consistently */
  align-items: center;     /* centers text vertically inside pill */
  justify-content: center; /* centers text horizontally inside pill */
}


.kt-team-card { cursor: pointer; }
.kt-team-card:focus-visible { outline: 2px solid var(--kt-blue-2); outline-offset: 3px; }
.kt-team-readmore { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--kt-green); margin-top: 4px; }
.kt-team-readmore svg { width: 13px; height: 13px; transition: transform .3s var(--kt-ease); }
.kt-team-card:hover .kt-team-readmore svg { transform: translateX(3px); }

.kt-avatar-xl { width: 100%; height: 100%; font-size: 2.6rem; border-radius: var(--kt-radius); }

/* Team bio modal — mirrors the video modal's open/close mechanics */
.kt-team-modal {
	position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
	padding: calc(var(--kt-header-h) + 20px) 24px 24px;
	opacity: 0; visibility: hidden; transition: opacity .3s var(--kt-ease), visibility 0s linear .3s;
	overflow: hidden;
}
.kt-team-modal.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--kt-ease); }
.kt-team-modal-backdrop { position: absolute; inset: 0; background: rgba(5,8,16,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.kt-team-modal-inner {
	position: relative; width: 100%; max-width: 700px; max-height: calc(100vh - var(--kt-header-h) - 40px); overflow-y: auto;
	background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius-lg);
	box-shadow: 0 24px 64px -12px rgba(0,0,0,.5), 0 8px 24px -8px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04) inset;
	transform: scale(.94) translateY(8px); transition: transform .3s var(--kt-ease), background-color .3s var(--kt-ease), border-color .3s var(--kt-ease);
}
.kt-team-modal.is-open .kt-team-modal-inner { transform: scale(1) translateY(0); }
.kt-team-modal-body { display: grid; grid-template-columns: 220px 1fr; align-items: start; }
.kt-team-modal-close.kt-team-modal-close {
	position: absolute; top: 16px; right: 16px; z-index: 3;
	background: var(--kt-veil-4); border: 1px solid var(--kt-border-2); color: var(--kt-heading);
	box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.kt-team-modal-nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 36px; height: 36px; border-radius: 50%; background: var(--kt-veil-4); border: 1px solid var(--kt-border-2);
	color: var(--kt-heading); display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 12px rgba(0,0,0,.2);
	transition: background-color .2s, border-color .2s, transform .2s;
}
.kt-team-modal-nav:hover { border-color: var(--kt-blue-2); transform: translateY(-50%) scale(1.08); }
.kt-team-modal-prev { left: 12px; }
.kt-team-modal-next { right: 12px; }

/* Photo is a fixed, always-fully-visible square (like a profile picture) that
   stays pinned in view while the bio column scrolls, instead of a tall image
   force-cropped to fill the column. */
.kt-team-modal-photo {
	position: sticky; top: 0; z-index: 1;
	aspect-ratio: 1 / 1; width: 100%;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden; background: var(--kt-panel-2);
	border-right: 1px solid var(--kt-border);
	border-top-left-radius: calc(var(--kt-radius-lg) - 1px);
	border-bottom-left-radius: calc(var(--kt-radius-lg) - 1px);
	box-shadow: 4px 0 20px -8px rgba(0,0,0,.3);
}
.kt-team-modal-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.kt-team-modal-photo .kt-avatar-initials { position: static; width: 68%; height: 68%; font-size: 2.2rem; }

.kt-team-modal-info { padding: 30px 30px 32px; }
.kt-team-modal-info h3 { font-size: 1.32rem; letter-spacing: -.01em; margin-bottom: 4px; }
.kt-team-modal-role {
	display: inline-flex; font-size: .78rem; font-weight: 600; letter-spacing: .02em;
	color: var(--kt-blue-2); background: rgba(59,122,254,.12); border: 1px solid rgba(59,122,254,.25);
	border-radius: 999px; padding: 4px 12px; margin-bottom: 18px;
}
.kt-team-modal-expertise {
	font-size: .82rem; color: var(--kt-text-dim); margin-bottom: 22px; line-height: 1.5;
	background: var(--kt-panel-2); border: 1px solid var(--kt-border); border-radius: var(--kt-radius-sm);
	padding: 14px 16px;
}
.kt-team-modal-expertise strong { display: flex; align-items: center; gap: 6px; color: var(--kt-heading); margin-bottom: 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.kt-team-modal-bio { font-size: .92rem; line-height: 1.7; margin-bottom: 20px; }
.kt-team-modal-bio p { margin-bottom: 1em; }
.kt-team-modal-bio p:last-child { margin-bottom: 0; }

.kt-admin-note { margin-top: 26px; padding: 16px 20px; border-radius: var(--kt-radius-sm); border: 1px dashed var(--kt-border-2); font-size: .88rem; color: var(--kt-text-dim); }

/* =============================================================
   Careers
   ============================================================= */
.kt-jobs-list { display: flex; flex-direction: column; gap: 16px; }
.kt-job-card { display: flex; align-items: center; gap: 22px; padding: 26px; background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius); transition: border-color .3s var(--kt-ease), transform .3s var(--kt-ease), background-color .3s var(--kt-ease), color .3s var(--kt-ease); }
.kt-job-card:hover { border-color: rgba(51,214,166,.35); transform: translateY(-3px); }
.kt-job-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; background: rgba(59,122,254,.12); display: flex; align-items: center; justify-content: center; color: var(--kt-blue-2); }
.kt-job-icon svg { width: 24px; height: 24px; }
.kt-job-info { flex-grow: 1; min-width: 0; }
.kt-job-info h3 { font-size: 1.1rem; margin-bottom: 6px; }
.kt-job-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: .82rem; color: var(--kt-text-dim); margin-bottom: 8px; font-family: var(--kt-font-mono); }
.kt-job-meta-single { margin: 18px 0 0; font-size: .84rem; }
.kt-service-detail-layout + .kt-job-apply { margin-top: 40px; }
.kt-job-meta span,
.kt-event-meta span,
.kt-event-detail-meta span,
.kt-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(59,122,254,.1); border: 1px solid rgba(59,122,254,.22); color: var(--kt-blue-2); line-height: 1.2; transition: background-color .3s var(--kt-ease), border-color .3s var(--kt-ease), color .3s var(--kt-ease); }
.kt-pill-accent,
.kt-job-meta span:last-child:not(:only-child) { background: rgba(51,214,166,.1); border-color: rgba(51,214,166,.28); color: var(--kt-green); }
.kt-job-desc p { font-size: .92rem; margin: 0; }

/* =============================================================
   Downloads
   ============================================================= */
.kt-downloads-list { display: flex; flex-direction: column; gap: 14px; }
.kt-download-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 24px; background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius); }
.kt-download-icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: rgba(140,123,246,.14); color: var(--kt-purple); display: flex; align-items: center; justify-content: center; }
.kt-download-info { flex: 1 1 220px; min-width: 0; }
.kt-download-info h3 { font-size: 1rem; margin-bottom: 2px; overflow-wrap: break-word; }
.kt-download-info p { font-size: .86rem; margin: 0; overflow-wrap: break-word; }
.kt-download-btn { flex-shrink: 0; }
.kt-download-pending { flex-shrink: 0; font-size: .82rem; color: var(--kt-text-dim-2); font-style: italic; }

/* =============================================================
   Contact
   ============================================================= */
.kt-contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; }
.kt-contact-details { display: flex; flex-direction: column; gap: 20px; margin: 28px 0; }
.kt-contact-details li { display: flex; gap: 14px; align-items: flex-start; }
.kt-contact-details svg { width: 24px; height: 24px; color: var(--kt-green); flex-shrink: 0; margin-top: 2px; }
.kt-contact-details span:first-child { display: block; font-size: .8rem; color: var(--kt-text-dim-2); margin-bottom: 2px; }
.kt-contact-details a, .kt-contact-details div span:last-child { color: var(--kt-heading); font-size: 1rem; }

.kt-contact-form-wrap { background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius-lg); padding: 36px; }
.kt-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.kt-form-field { margin-bottom: 18px; }
.kt-form-field label { display: block; font-size: .85rem; color: var(--kt-text-dim); margin-bottom: 8px; }
.kt-form-field input, .kt-form-field textarea {
	width: 100%; padding: 13px 16px; border-radius: 10px; border: 1px solid var(--kt-border-2);
	background: var(--kt-veil-3); color: var(--kt-heading); font-size: .95rem; transition: border-color .2s, background .2s;
	resize: vertical;
}
.kt-form-field input:focus, .kt-form-field textarea:focus { outline: none; border-color: var(--kt-blue-2); background: var(--kt-veil-4); }
.kt-hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.kt-form-submit { width: 100%; position: relative; }
.kt-btn-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #FFFFFF; border-radius: 50%; animation: kt-spin .7s linear infinite; }
@keyframes kt-spin { to { transform: rotate(360deg); } }
.kt-form-status { margin-top: 14px; font-size: .9rem; min-height: 1.2em; }
.kt-form-status.is-success { color: var(--kt-green); }
.kt-form-status.is-error { color: #FF7A7A; }

/* =============================================================
   Our Work / Portfolio
   ============================================================= */
.kt-portfolio-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.kt-portfolio-filter {
	padding: 10px 20px; border-radius: 999px; border: 1px solid var(--kt-border-2);
	background: var(--kt-veil-2); color: var(--kt-text-dim); font-size: .87rem; font-weight: 600;
	transition: background .35s var(--kt-ease), border-color .3s var(--kt-ease), color .3s var(--kt-ease), transform .3s var(--kt-ease), box-shadow .35s var(--kt-ease);
}
.kt-portfolio-filter:hover { border-color: var(--kt-blue-2); color: var(--kt-heading); }
.kt-portfolio-filter.is-active { background: var(--kt-grad-btn); color: var(--kt-on-grad); border-color: transparent; transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(59,122,254,.55); }

.kt-portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; }

.kt-portfolio-card {
	position: relative; display: flex; flex-direction: column;
	border-radius: var(--kt-radius); overflow: hidden;
	background: var(--kt-panel); border: 1px solid var(--kt-border);
	transition: transform .35s var(--kt-ease), border-color .35s var(--kt-ease), background-color .35s var(--kt-ease), color .35s var(--kt-ease), opacity .35s var(--kt-ease), box-shadow .35s var(--kt-ease);
}
.kt-portfolio-card:hover { transform: translateY(-5px); border-color: rgba(59,122,254,.35); box-shadow: 0 16px 36px -18px rgba(0,0,0,.5); }
.kt-portfolio-card:hover, .kt-portfolio-card:focus-within { will-change: transform; }
.kt-portfolio-card:hover .kt-device-screen img { will-change: transform; }
.kt-portfolio-card.is-hidden { opacity: 0; transform: scale(.92); pointer-events: none; }

.kt-portfolio-media { position: relative; padding: 30px 30px 0; background: linear-gradient(160deg, var(--kt-panel-2), var(--kt-bg-alt)); flex-shrink: 0; }

/* Browser/laptop chassis frame around the screenshot */
.kt-device-frame {
	position: relative; border-radius: 10px 10px 3px 3px; overflow: hidden;
	background: linear-gradient(180deg, #1c2540, #10182a);
	border: 1px solid rgba(255,255,255,.08);
	box-shadow: 0 26px 50px -26px rgba(0,0,0,.65);
	transition: transform .5s var(--kt-ease);
}
.kt-device-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; }
.kt-device-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.16); }
.kt-device-dot:nth-child(1) { background: #ff5f57; }
.kt-device-dot:nth-child(2) { background: #febc2e; }
.kt-device-dot:nth-child(3) { background: #28c840; }
.kt-device-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--kt-logo-card-bg); }
.kt-device-screen img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; transition: transform .6s var(--kt-ease); }
.kt-portfolio-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--kt-text-dim-2); }
.kt-portfolio-placeholder svg { width: 34px; height: 34px; }
/* "Laptop base" ledge beneath the browser chassis */
.kt-device-frame::after {
	content: ''; display: block; height: 9px; margin: 0 -6px;
	background: linear-gradient(180deg, #1c2540, #0a0f1e);
	border-radius: 0 0 8px 8px;
	box-shadow: 0 8px 16px -8px rgba(0,0,0,.55);
}

.kt-portfolio-badge {
	position: absolute; top: 20px; left: 20px; z-index: 2;
	padding: 5px 12px; border-radius: 999px; font-size: .7rem; font-weight: 700;
	letter-spacing: .03em; text-transform: uppercase;
	background: var(--kt-grad-btn); color: var(--kt-on-grad);
	box-shadow: 0 8px 18px -8px rgba(51,214,166,.55);
}

.kt-portfolio-play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
	width: 60px; height: 60px; border-radius: 50%;
	background: rgba(9,13,24,.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(255,255,255,.28); color: #fff;
	display: flex; align-items: center; justify-content: center;
	transition: transform .3s var(--kt-ease), background .3s;
}
.kt-portfolio-play svg { width: 20px; height: 20px; margin-left: 3px; }
.kt-portfolio-play:hover { transform: translate(-50%, -50%) scale(1.1); background: var(--kt-blue); border-color: transparent; }

/* pointer-events:none by default so the overlay never blocks clicks to what's
   underneath it (e.g. the video play button) — only its own interactive
   children opt back in. This matters most once the overlay expands to cover
   the whole card on hover (see the hover-mode block below). */
.kt-portfolio-overlay { position: relative; z-index: 1; padding: 26px 28px 26px; flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; }
.kt-portfolio-overlay a { pointer-events: auto; }
.kt-portfolio-client-logo { display: block; background: var(--kt-logo-card-bg); padding: 5px 12px; border-radius: 6px; height: 28px; width: auto; max-width: 140px; object-fit: contain; margin-bottom: 12px; transition: background-color .3s var(--kt-ease); }
.kt-portfolio-overlay h3 { font-size: 1.18rem; margin-bottom: 3px; }
.kt-portfolio-client { display: block; font-size: .85rem; margin-bottom: 10px; }
.kt-portfolio-desc { font-size: .92rem; line-height: 1.55; margin-bottom: 14px; }
.kt-portfolio-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; margin-bottom: 6px; }
.kt-portfolio-tag { display: inline-block; font-size: .74rem; padding: 4px 12px; border-radius: 999px; }
.kt-portfolio-overlay .kt-link-arrow { font-size: .9rem; margin-top: 6px; }

/* Static (touch / no-hover) context: the overlay sits in normal flow below
   the screenshot on the card's own background, so it should use the
   theme-aware text colors like the rest of the site. */
.kt-portfolio-client { color: var(--kt-blue-2); }
.kt-portfolio-desc { color: var(--kt-text-dim); }
.kt-portfolio-tag { background: var(--kt-veil-3); color: var(--kt-text-dim); }

/* Desktop enhancement: turn the always-visible info panel into a hover-reveal
   overlay on devices that actually support hover, so mouse users get the
   richer "hover to see details" interaction while touch users keep the
   static, always-visible version below the image. */
@media (hover: hover) and (pointer: fine) {
	.kt-portfolio-card:hover .kt-device-frame { transform: translateY(-4px); }
	.kt-portfolio-card:hover .kt-device-screen img { transform: scale(1.08); }
	.kt-portfolio-overlay {
		position: absolute; inset: 0; padding-top: 45%;
		background: linear-gradient(180deg, transparent 0%, rgba(6,10,20,.68) 35%, rgba(6,10,20,.97) 100%);
		opacity: 0; transform: translateY(8px);
		transition: opacity .35s var(--kt-ease), transform .35s var(--kt-ease);
	}
	.kt-portfolio-card:hover .kt-portfolio-overlay,
	.kt-portfolio-card:focus-within .kt-portfolio-overlay { opacity: 1; transform: translateY(0); }

	/* On this dark scrim, text must stay light regardless of site-wide theme —
	   the background here is always dark (it's an image overlay, not a themed
	   panel), so text tied to the light/dark text variables would go
	   dark-on-dark and disappear in light mode. */
	.kt-portfolio-overlay h3 { color: #fff; }
	.kt-portfolio-overlay .kt-portfolio-client { color: #8FC4FF; }
	.kt-portfolio-overlay .kt-portfolio-desc { color: rgba(255,255,255,.78); }
	.kt-portfolio-overlay .kt-portfolio-tag { background: rgba(255,255,255,.14); color: rgba(255,255,255,.9); }
}

/* Single project page layout */
.kt-project-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; align-items: start; }
.kt-project-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.kt-device-frame-lg { max-width: 100%; }
.kt-project-sidebar {
	display: flex; flex-direction: column; gap: 16px;
	padding: 28px; border-radius: var(--kt-radius); background: var(--kt-panel); border: 1px solid var(--kt-border);
	position: sticky; top: calc(var(--kt-header-h) + 24px);
}
.kt-project-client-logo { max-height: 40px; width: auto; max-width: 160px; object-fit: contain; background: var(--kt-logo-card-bg); padding: 6px 12px; border-radius: 8px; align-self: flex-start; transition: background-color .3s var(--kt-ease); }
.kt-project-meta-row { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--kt-border); }
.kt-project-meta-row:last-of-type { border-bottom: none; padding-bottom: 0; }
.kt-project-meta-row span { font-size: .78rem; color: var(--kt-text-dim-2); text-transform: uppercase; letter-spacing: .04em; }
.kt-project-meta-row strong { font-size: .98rem; color: var(--kt-heading); font-weight: 600; }
.kt-project-content { max-width: none; }

/* Video lightbox modal */
.kt-video-modal {
	position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px;
	opacity: 0; visibility: hidden; transition: opacity .3s var(--kt-ease), visibility 0s linear .3s;
}
.kt-video-modal.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--kt-ease); }
.kt-video-modal-backdrop { position: absolute; inset: 0; background: rgba(5,8,16,.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.kt-video-modal-inner { position: relative; width: 100%; max-width: 960px; transform: scale(.94); transition: transform .3s var(--kt-ease); }
.kt-video-modal.is-open .kt-video-modal-inner { transform: scale(1); }
.kt-video-modal-close {
	position: absolute; top: -48px; right: 0; width: 36px; height: 36px; border-radius: 50%;
	background: var(--kt-panel); border: 1px solid var(--kt-border-2); color: var(--kt-heading);
	display: flex; align-items: center; justify-content: center; transition: border-color .2s;
}
.kt-video-modal-close:hover { border-color: var(--kt-blue-2); }
.kt-video-modal-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--kt-radius); overflow: hidden; background: #000; box-shadow: 0 30px 70px -20px rgba(0,0,0,.7); }
.kt-video-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* =============================================================
   Our Clients
   ============================================================= */
/* .kt-clients-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.kt-client-card {
	display: flex; align-items: center; justify-content: center; height: 140px; padding: 28px;
	background: rgba(255,255,255,.94); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
	border-radius: var(--kt-radius); border: 1px solid rgba(15,23,42,.06);
	box-shadow: 0 1px 2px rgba(15,23,42,.04);
	transition: transform .3s var(--kt-ease), box-shadow .3s var(--kt-ease), background-color .3s var(--kt-ease);
}
.kt-client-card:hover { transform: translateY(-4px); background: rgba(255,255,255,1); box-shadow: 0 18px 34px -18px rgba(0,0,0,.4); }
.kt-client-card img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.kt-client-name { font-family: var(--kt-font-display); font-weight: 600; color: #1d2327; text-align: center; font-size: .95rem; } */

/* =============================================================
   Our Clients
   ============================================================= */
.kt-clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 200px)); /* fixed width */
  gap: 24px;
  justify-content: center; /* centers when fewer cards */
  margin: 0 auto;          /* centers the whole block */
}

.kt-client-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  padding: 28px;
  background: var(--kt-logo-card-bg);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: var(--kt-radius);
  border: 1px solid var(--kt-logo-card-border);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: transform .3s var(--kt-ease),
              box-shadow .3s var(--kt-ease),
              background-color .3s var(--kt-ease),
              border-color .3s var(--kt-ease);
}

.kt-client-card:hover {
  transform: translateY(-4px);
  background: var(--kt-logo-card-bg-hover);
  border-color: rgba(59,122,254,.45);
  box-shadow: 0 18px 34px -14px rgba(59,122,254,.35);
}

.kt-client-card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.kt-client-name {
  font-family: var(--kt-font-display);
  font-weight: 600;
  color: #1d2327;
  text-align: center;
  font-size: .95rem;
}


/* =============================================================
   Our Partners (grouped by category)
   ============================================================= */
/* .kt-partner-group { margin-bottom: 44px; }
.kt-partner-group:last-child { margin-bottom: 0; }
.kt-partner-group-title {
	font-size: 1rem; font-weight: 600; color: var(--kt-text-dim); margin: 0 0 20px;
	display: flex; align-items: center; gap: 14px;
}
.kt-partner-group-title::after { content: ''; flex: 1; height: 1px; background: var(--kt-border); } */

.kt-partner-group {
  margin-bottom: 44px;
}
.kt-partner-group:last-child {
  margin-bottom: 0;
}

.kt-partner-group-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--kt-text-dim);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center; /* centers heading + line */
  gap: 14px;
  flex-wrap: wrap;
  text-align: center;
}

.kt-partner-group-title::before,
.kt-partner-group-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--kt-border);
}


/* =============================================================
   Blog / generic content
   ============================================================= */
.kt-blog-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.kt-blog-filter {
	padding: 10px 20px; border-radius: 999px; border: 1px solid var(--kt-border-2);
	background: var(--kt-veil-2); color: var(--kt-text-dim); font-size: .87rem; font-weight: 600;
	transition: background .35s var(--kt-ease), border-color .3s var(--kt-ease), color .3s var(--kt-ease), transform .3s var(--kt-ease), box-shadow .35s var(--kt-ease);
}
.kt-blog-filter:hover { border-color: var(--kt-blue-2); color: var(--kt-heading); }
.kt-blog-filter.is-active { background: var(--kt-grad-btn); color: var(--kt-on-grad); border-color: transparent; transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(59,122,254,.55); }

.kt-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kt-blog-card {
	background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius); overflow: hidden;
	transition: transform .35s var(--kt-ease), border-color .35s var(--kt-ease), background-color .35s var(--kt-ease), color .35s var(--kt-ease), opacity .35s var(--kt-ease), box-shadow .35s var(--kt-ease);
}
.kt-blog-card:hover { transform: translateY(-4px); border-color: rgba(59,122,254,.3); box-shadow: 0 16px 36px -18px rgba(0,0,0,.4); }
.kt-blog-card.is-hidden { opacity: 0; transform: scale(.92); pointer-events: none; }
.kt-blog-thumb { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--kt-veil-3); }
.kt-blog-thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--kt-ease); }
.kt-blog-card:hover .kt-blog-thumb img { transform: scale(1.035); }
.kt-blog-card-body { padding: 20px 22px 22px; }
.kt-blog-card h3 { font-size: 1.05rem; margin: 0 0 6px; }
.kt-blog-card p { font-size: .9rem; margin: 0 0 10px; }
.kt-blog-card .kt-link-arrow { margin-top: 2px; }
.kt-pagination { margin-top: 40px; text-align: center; }

.kt-blog-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-family: var(--kt-font-mono); font-size: .72rem; }
.kt-blog-meta span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; background: var(--kt-veil-3); border: 1px solid var(--kt-border); color: var(--kt-text-dim-2); transition: background-color .3s var(--kt-ease), border-color .3s var(--kt-ease); }
.kt-blog-meta-single { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--kt-border); }
.kt-blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }

.kt-prose img { border-radius: var(--kt-radius-sm); height: auto; margin: 1.4em 0; }
.kt-prose figure { margin: 1.4em 0; }
.kt-prose figcaption { font-size: .85rem; color: var(--kt-text-dim-2); text-align: center; margin-top: 8px; }

/* =============================================================
   Comments
   ============================================================= */
.kt-comments { max-width: 780px; margin: 56px auto 0; }
.kt-comments-title { font-size: 1.3rem; margin-bottom: 24px; }
.kt-comment-list, .kt-comment-list ol { list-style: none; margin: 0; padding: 0; }
.kt-comment-list .children { list-style: none; margin: 20px 0 0; padding: 0 0 0 32px; border-left: 1px solid var(--kt-border); }
.kt-comment { margin-bottom: 24px; }
.kt-comment-body { display: flex; gap: 14px; }
.kt-comment-avatar { flex-shrink: 0; }
.kt-comment-avatar img { width: 44px; height: 44px; border-radius: 50%; display: block; }
.kt-comment-content { flex: 1; min-width: 0; }
.kt-comment-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.kt-comment-author { font-size: .95rem; color: var(--kt-heading); }
.kt-comment-date a { font-size: .78rem; color: var(--kt-text-dim-2); }
.kt-comment-date a:hover { color: var(--kt-green); }
.kt-comment-pending { font-size: .82rem; color: var(--kt-blue-2); font-style: italic; margin-bottom: 8px; }
.kt-comment-text { font-size: .92rem; color: var(--kt-text-dim); }
.kt-comment-text p { margin-bottom: .8em; }
.kt-comment-reply { margin-top: 8px; }
.kt-comment-reply a { font-size: .78rem; font-weight: 600; color: var(--kt-green); }
.kt-comment-reply a:hover { text-decoration: underline; }

.kt-comment-form-wrap { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--kt-border); }
.kt-comment-form-wrap #reply-title { font-size: 1.1rem; margin-bottom: 6px; }
.kt-comment-form-note { font-size: .85rem; color: var(--kt-text-dim-2); margin-bottom: 20px; }
.kt-comment-form-wrap .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: .82rem; color: var(--kt-text-dim); }
.kt-comment-form-wrap .comment-form-cookies-consent input { margin: 0; }
#cancel-comment-reply-link { display: inline-block; margin-left: 12px; font-size: .82rem; color: var(--kt-text-dim-2); }
#cancel-comment-reply-link:hover { color: var(--kt-green); }

.kt-prose { max-width: min(100%, 880px); margin-inline: auto; font-size: 1.02rem; }
.kt-prose h2, .kt-prose h3 { margin-top: 1.6em; }
.kt-prose > p, .kt-prose li { max-width: none; text-align: left; line-height: 1.75; }
.kt-prose > p:last-child { margin-bottom: 0; }
.kt-prose blockquote { max-width: none; }

/* A padded, bordered panel for text-heavy single-post/page content, so
   long-form copy doesn't just float loose in open space. Line length is
   capped on the paragraphs above (68ch) regardless of how wide the card
   itself is, so text stays comfortable to read even in a full-width card. */
.kt-text-card {
	background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius);
	padding: 44px clamp(24px, 5vw, 56px);
	transition: border-color .3s var(--kt-ease), background-color .3s var(--kt-ease);
}
.kt-text-card-lg { max-width: none; padding: clamp(28px, 4vw, 48px) clamp(24px, 6vw, 64px); }
@media (max-width: 600px) {
	.kt-text-card { padding: 28px 22px; }
	.kt-cta-inner { padding: 44px 26px; }
	.kt-cta-inner h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); line-height: 1.3; }
	.kt-cta-inner p { margin-top: 12px; }
	.kt-cta-inner .kt-btn { margin-top: 26px; width: 100%; }
}
/* CTA card: breathing room from the screen edges on mobile/tablet */
@media (max-width: 900px) {
	.kt-cta { padding-left: 24px; padding-right: 24px; }
	.kt-cta .kt-cta-inner { padding: 44px 26px; }
}
@media (max-width: 380px) {
	.kt-cta { padding-left: 18px; padding-right: 18px; }
}

.kt-404 { padding: 160px 0 140px; position: relative; overflow: hidden; isolation: isolate; }
.kt-404-code { font-size: clamp(2.2rem, 6vw, 3.4rem); margin: 14px 0; }

/* =============================================================
   Scroll reveal
   ============================================================= */
.reveal-up { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--kt-ease), transform .7s var(--kt-ease); transition-delay: calc(var(--d, 0) * 90ms); }
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

.kt-form-field input[type="file"] {
	padding: 10px 14px; font-size: .88rem; color: var(--kt-text-dim);
}
.kt-form-field input[type="file"]::-webkit-file-upload-button {
	margin-right: 12px; padding: 7px 14px; border-radius: 999px; border: none;
	background: var(--kt-grad-btn); color: var(--kt-on-grad); font-weight: 600; font-size: .82rem; cursor: pointer;
}
.kt-field-hint { font-weight: 400; color: var(--kt-text-dim-2); font-size: .78rem; }
.kt-file-error { color: #FF7A7A; font-size: .82rem; margin: 8px 0 0; }
.kt-form-field.has-error input,
.kt-form-field.has-error input[type="file"] { border-color: #FF7A7A; }

.kt-job-apply { margin-top: 20px; padding: 22px; border-radius: var(--kt-radius); background: var(--kt-veil-2); border: 1px solid var(--kt-border); }
.kt-job-apply .kt-form-submit { width: auto; padding: 12px 26px; }
.kt-apply-toggle[aria-expanded="true"] { border-color: var(--kt-green); color: var(--kt-green); }
.kt-apply-toggle { flex-shrink: 0; }

.kt-job-apply-animated { opacity: 0; transform: translateY(-10px); transition: opacity .35s var(--kt-ease), transform .35s var(--kt-ease); }
.kt-job-apply-animated.is-open { opacity: 1; transform: translateY(0); }
.kt-job-full-desc { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--kt-border); }
.kt-job-full-desc:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.kt-map-embed { border-radius: var(--kt-radius); overflow: hidden; border: 1px solid var(--kt-border); line-height: 0; }
.kt-map-embed iframe { display: block; filter: var(--kt-map-filter); }

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 1080px) {
	.kt-services-grid { grid-template-columns: repeat(2, 1fr); }
	.kt-testimonial-track { grid-template-columns: repeat(2, 1fr); }
	.kt-team-grid { grid-template-columns: repeat(3, 1fr); }
	.kt-portfolio-grid { gap: 24px; }
	.kt-footer-grid { grid-template-columns: 1fr 1fr; }
	.kt-clients-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	.kt-primary-nav {
		position: absolute; top: calc(100% + 10px); left: 4px; right: 4px;
		max-height: min(76vh, 520px); overflow-y: auto;
		background: var(--kt-mobile-nav-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
		border: 1px solid var(--kt-border); border-radius: var(--kt-radius);
		box-shadow: 0 28px 60px -20px rgba(0,0,0,.55);
		transform: translateY(-10px) scale(.98); opacity: 0; pointer-events: none;
		transition: transform .3s var(--kt-ease), opacity .25s var(--kt-ease), background-color .3s var(--kt-ease), border-color .3s var(--kt-ease);
		padding: 12px 8px;
	}
	.kt-primary-nav.is-open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
	.kt-primary-nav .nav-menu { flex-direction: column; align-items: stretch; padding: 4px; gap: 3px; }
	.kt-primary-nav .nav-menu > li > a { display: block; padding: 14px 18px; font-size: 1.02rem; border-radius: var(--kt-radius-sm); }
	.kt-primary-nav .nav-menu > li > a:hover,
	.kt-primary-nav .nav-menu > li > a:focus-visible { background: var(--kt-veil-3); }
	.kt-btn.kt-mobile-nav-cta { display: flex; align-items: center; justify-content: center; margin: 10px 8px 4px; padding: 14px 20px; }
	.kt-menu-toggle { display: flex; }
	.kt-header-actions .kt-btn-primary.kt-btn-sm { display: none; }
	.kt-header-actions { gap: 10px; }
	.kt-container { padding: 0 20px; }
	.kt-why-grid, .kt-contact-grid, .kt-project-layout, .kt-service-detail-layout { grid-template-columns: 1fr; gap: 36px; }
	.kt-service-detail-sidebar { position: static; }
	.kt-team-modal-body { grid-template-columns: 1fr; }
	.kt-comment-list .children { padding-left: 16px; }
	.kt-comment-avatar img { width: 36px; height: 36px; }
	.kt-team-modal-photo { position: static; width: 148px; aspect-ratio: 1 / 1; margin: 24px auto 0; border-radius: 50%; border: 2px solid var(--kt-border-2); box-shadow: 0 8px 24px -6px rgba(0,0,0,.35); }
	.kt-team-modal-photo .kt-avatar-initials { border-radius: 50%; }
	.kt-team-modal-prev { left: 8px; }
	.kt-team-modal-next { right: 8px; }
	.kt-team-modal-info { padding: 16px 24px 28px; text-align: center; }
	.kt-team-modal-expertise { text-align: left; }
	.kt-team-modal-bio { text-align: left; }
	.kt-project-sidebar { position: static; }
	.kt-values-grid, .kt-process-grid { grid-template-columns: repeat(2, 1fr); }
	.kt-services-grid-detailed { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.kt-stats-grid { grid-template-columns: 1fr; }
	.kt-stat { border-right: none; border-bottom: 1px solid var(--kt-border); }
	.kt-stat:last-child { border-bottom: none; }
	.kt-services-grid, .kt-testimonial-track, .kt-team-grid, .kt-blog-grid, .kt-portfolio-grid, .kt-clients-grid { grid-template-columns: 1fr; }
	.kt-values-grid, .kt-process-grid { grid-template-columns: 1fr; }
	.kt-footer-grid { grid-template-columns: 1fr; text-align: center; }
	.kt-footer-brand { display: flex; flex-direction: column; align-items: center; }
	.kt-footer-col ul { padding: 0; }
	.kt-footer-contact li { justify-content: center; }
	.kt-social-links { justify-content: center; }
	.kt-footer-bottom { flex-direction: column; text-align: center; justify-content: center; }
	.kt-footer-legal { justify-content: center; }
	.kt-form-row { grid-template-columns: 1fr; }
	.kt-job-card { flex-direction: column; align-items: flex-start; }
	.kt-download-row { flex-direction: column; align-items: stretch; text-align: center; }
	.kt-download-icon { margin: 0 auto; }
	.kt-download-info { text-align: center; }
	.kt-download-btn { width: 100%; justify-content: center; }
	.kt-hero-title { font-size: clamp(2rem, 8vw, 2.6rem); }
	.kt-section { padding: 52px 0; }
}

/* =============================================================
   Mascots — decorative KT characters with idle motion, used on
   About Us (and anywhere else a bit of personality helps fill
   dead space). Respects prefers-reduced-motion via the global
   rule near the top of this file.
   ============================================================= */
.kt-mascot-wrap {
	position: relative; display: flex; align-items: flex-end; justify-content: center;
	pointer-events: none; user-select: none;
}
.kt-mascot { position: relative; max-width: 100%; height: auto; filter: drop-shadow(0 20px 30px rgba(0,0,0,.35)); }
.kt-mascot-dark { display: block; }
.kt-mascot-light { display: none; }
:root[data-theme="light"] .kt-mascot-dark { display: none; }
:root[data-theme="light"] .kt-mascot-light { display: block; }
.kt-mascot-float { animation: kt-mascot-float 5.5s ease-in-out infinite; }
.kt-mascot-float.kt-mascot-delay { animation-delay: -2.75s; }
@keyframes kt-mascot-float {
	0%, 100% { transform: translateY(0) rotate(-1.2deg); }
	50%      { transform: translateY(-16px) rotate(1.2deg); }
}
.kt-mascot-hero { position: absolute; right: 2%; bottom: -6px; width: clamp(160px, 16vw, 260px); z-index: 1; }
.kt-home-hero-mascot { width: clamp(190px, 19vw, 300px); z-index: 0; }
.kt-home-hero-mascot-right { right: 3%; bottom: 130px; }
.kt-mascot-wrap.kt-home-hero-mascot-left { left: 1%; bottom: 130px; display: none; }
@media (min-width: 1400px) { .kt-mascot-wrap.kt-home-hero-mascot-left { display: flex; } }
.kt-mascot-inline { width: clamp(140px, 22vw, 220px); margin: 0 auto; }

/* =============================================================
   Events (mirrors the Careers list/detail pattern)
   ============================================================= */
.kt-events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.kt-event-card {
	display: flex; flex-direction: column; background: var(--kt-panel); border: 1px solid var(--kt-border);
	border-radius: var(--kt-radius); overflow: hidden;
	transition: transform .35s var(--kt-ease), border-color .35s var(--kt-ease), background-color .35s var(--kt-ease), box-shadow .35s var(--kt-ease);
}
.kt-event-card:hover { transform: translateY(-5px); border-color: rgba(51,214,166,.35); box-shadow: 0 18px 38px -20px rgba(0,0,0,.5); }
.kt-event-media { position: relative; aspect-ratio: 16/10; background: var(--kt-logo-card-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: background-color .3s var(--kt-ease); }
.kt-event-media img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.kt-event-date-badge {
	position: absolute; top: 14px; left: 14px; z-index: 2; text-align: center;
	background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius-sm);
	padding: 8px 12px; box-shadow: 0 8px 18px -10px rgba(0,0,0,.4); line-height: 1.1;
}
.kt-event-date-badge .kt-event-day { display: block; font-family: var(--kt-font-display); font-weight: 700; font-size: 1.15rem; color: var(--kt-heading); }
.kt-event-date-badge .kt-event-mon { display: block; font-family: var(--kt-font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--kt-blue-2); margin-top: 2px; }
.kt-event-body { padding: 20px 22px 24px; flex-grow: 1; display: flex; flex-direction: column; }
.kt-event-body h3 { font-size: 1.08rem; margin: 0 0 10px; }
.kt-event-body h3 a { color: inherit; }
.kt-event-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.kt-event-meta span { font-size: .74rem; padding: 5px 12px; }

.kt-event-detail-layout { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: 48px; align-items: start; }
.kt-event-detail-media { background: var(--kt-logo-card-bg); border-radius: var(--kt-radius); border: 1px solid var(--kt-logo-card-border); padding: 24px; display: flex; align-items: center; justify-content: center; transition: background-color .3s var(--kt-ease), border-color .3s var(--kt-ease); }
.kt-event-detail-media img { width: 100%; height: auto; object-fit: contain; }
.kt-event-detail-meta { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; margin: 18px 0 22px; }
.kt-event-detail-meta span { font-size: .88rem; padding: 8px 16px; }
.kt-event-detail-meta span svg { flex-shrink: 0; }
.kt-event-empty { padding: 60px 24px; text-align: center; border: 1px dashed var(--kt-border-2); border-radius: var(--kt-radius); color: var(--kt-text-dim); }

@media (max-width: 900px) {
	.kt-events-grid { grid-template-columns: repeat(2, 1fr); }
	.kt-event-detail-layout { grid-template-columns: 1fr; gap: 30px; }
	.kt-mascot-hero {
		position: static; display: flex; width: 150px; margin: 18px auto 0;
	}
	.kt-about-hero .kt-page-header { padding-bottom: 20px; }
	.kt-cta { padding-top: 44px; }
}
@media (max-width: 720px) {
	.kt-events-grid { grid-template-columns: 1fr; }
}

/* Page scroll progress bar — thin gradient line pinned to the very top,
   above the header, filling left-to-right as the visitor scrolls down. */
.kt-scroll-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 999;
	background: transparent; pointer-events: none;
}
.kt-scroll-progress span {
	display: block; height: 100%; width: 0%;
	background: var(--kt-grad-brand);
	transition: width .1s linear;
}

/* =============================================================
   v1.1 — layout, mascots, events, downloads, typography
   ============================================================= */

/* ---------- Page header text + wider subtitles ---------- */
.kt-page-subtitle { max-width: min(100%, 760px); }
.kt-page-header-inner { position: relative; }
@media (min-width: 901px) {
	.kt-page-header.has-mascot .kt-page-header-text { max-width: calc(100% - clamp(150px, 14vw, 230px)); }
}

/* ---------- Mascots: small, in-flow by default; big only where there is room ---------- */
.kt-mascot-sm   { width: clamp(100px, 9vw, 150px); margin: 0; }
.kt-mascot-mini { width: 88px; margin: 14px 0 0 auto; }                 /* page headers on phones/tablets: small, BELOW the text */
@media (min-width: 901px) {
	.kt-mascot-mini { position: absolute; right: 28px; bottom: -40px; width: clamp(110px, 10.5vw, 180px); margin: 0; z-index: 1; }
}

/* Homepage hero: girl (left) · text · boy (right), same size, vertically centred on the text */
.kt-hero { padding-top: calc(var(--kt-header-h) + clamp(40px, 6vw, 96px)); }
.kt-hero-grid { display: grid; grid-template-columns: 1fr; align-items: center; }
.kt-hero-inner { max-width: none; padding: 0 0 clamp(32px, 4vw, 64px); min-width: 0; }
.kt-hero-title { font-size: clamp(2.2rem, 4.6vw, 3.9rem); max-width: 22ch; }
.kt-hero-desc  { max-width: 64ch; }
.kt-hero-side  { display: none; }
.kt-hero-minis { display: flex; justify-content: flex-end; margin-top: 22px; }
.kt-hero-mini  { width: clamp(84px, 22vw, 120px); }
@media (min-width: 1100px) {
	.kt-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 3.4fr) minmax(0, 1fr); column-gap: clamp(16px, 2.2vw, 40px); }
	.kt-hero-side { display: flex; align-self: center; justify-self: center; width: 100%; max-width: 260px; margin: 0 0 clamp(32px, 4vw, 64px); }
	.kt-hero-side .kt-mascot { width: 100%; }
	.kt-hero-minis { display: none; }
}
.kt-no-mascots .kt-hero-grid { grid-template-columns: 1fr; }
.kt-no-mascots .kt-hero-side { display: none; }

/* ---------- Stats: optional second row ---------- */
.kt-stats-grid { grid-template-columns: repeat(var(--cols, 3), 1fr); }
.kt-stats-grid--more { border-top: 1px solid var(--kt-border); }
.kt-stats-grid--more .kt-stat { padding-top: 24px; padding-bottom: 24px; }
@media (max-width: 720px) {
	.kt-stats-grid { grid-template-columns: 1fr; }
	.kt-stats-grid--more { border-top: 1px solid var(--kt-border); }
	.kt-stat { padding: 20px 16px; }
}

/* ---------- Grids that centre a partial last row (no stranded cards) ---------- */
.kt-services-grid, .kt-testimonial-track, .kt-values-grid, .kt-events-grid {
	--cols: 3; --gap: 24px;
	display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap);
}
.kt-services-grid > *, .kt-testimonial-track > *, .kt-values-grid > *, .kt-events-grid > * {
	flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
	max-width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
}
.kt-events-grid { --gap: 28px; }
.kt-services-grid-detailed { --cols: 2; }
@media (min-width: 1500px) { .kt-events-grid { --cols: 4; } }
@media (max-width: 1080px) { .kt-services-grid, .kt-testimonial-track { --cols: 2; } }
@media (max-width: 900px)  { .kt-values-grid, .kt-events-grid { --cols: 2; } .kt-services-grid-detailed { --cols: 1; } }
@media (max-width: 720px)  { .kt-services-grid, .kt-testimonial-track, .kt-values-grid, .kt-events-grid { --cols: 1; } }
.kt-service-card, .kt-testimonial-card, .kt-value-card { padding-left: clamp(22px, 2vw, 34px); padding-right: clamp(22px, 2vw, 34px); }

/* ---------- Events: Upcoming (over) / Previous (under) with pill headings ---------- */
.kt-events-group { margin: 0 0 clamp(36px, 4vw, 64px); }
.kt-events-group:last-child { margin-bottom: 0; }
.kt-events-group__head { display: flex; justify-content: center; margin: 0 0 26px; }
.kt-events-pill {
	display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px 10px 20px; border-radius: 999px;
	font-family: var(--kt-font-display); font-weight: 600; font-size: 1.02rem; line-height: 1;
	box-shadow: 0 10px 26px -14px rgba(0,0,0,.5);
}
.kt-events-pill svg { width: 17px; height: 17px; }
.kt-events-pill__count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.kt-events-pill--upcoming { background: var(--kt-grad-btn); color: var(--kt-on-grad); }
.kt-events-pill--upcoming .kt-events-pill__count { background: rgba(5,16,25,.18); }
.kt-events-pill--previous { background: var(--kt-veil-4); color: var(--kt-heading); border: 1px solid var(--kt-border-2); box-shadow: none; }
.kt-events-pill--previous .kt-events-pill__count { background: var(--kt-veil-4); color: var(--kt-text-dim); }
.kt-events-group__empty { text-align: center; max-width: 460px; margin: 0 auto; padding: 14px 24px; border-radius: 999px; background: var(--kt-veil-3); border: 1px dashed var(--kt-border-2); color: var(--kt-text-dim); font-size: .94rem; }

/* ---------- Pill filters (downloads) — same look as Our Work filters ---------- */
.kt-pill-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.kt-pill-filter {
	padding: 10px 20px; border-radius: 999px; border: 1px solid var(--kt-border-2);
	background: var(--kt-veil-2); color: var(--kt-text-dim); font-size: .87rem; font-weight: 600;
	transition: background .35s var(--kt-ease), border-color .3s var(--kt-ease), color .3s var(--kt-ease), transform .3s var(--kt-ease), box-shadow .35s var(--kt-ease);
}
.kt-pill-filter:hover { border-color: var(--kt-blue-2); color: var(--kt-heading); }
.kt-pill-filter.is-active { background: var(--kt-grad-btn); color: var(--kt-on-grad); border-color: transparent; transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(59,122,254,.55); }

/* Downloads: two columns on wide screens so rows are not stretched edge to edge */
.kt-downloads-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 14px; }
.kt-download-row.is-hidden { display: none; }
.kt-download-cat { margin-top: 8px; font-size: .72rem; padding: 3px 10px; }
.kt-download-row:hover { border-color: rgba(59,122,254,.4); }

/* ---------- FAQ: heading + mascot beside the accordion on wide screens ---------- */
.kt-faq-wrap { max-width: var(--kt-container); display: grid; grid-template-columns: 1fr; gap: 12px; }
.kt-faq-head .kt-section-heading { margin-bottom: 20px; }
.kt-faq-mascot { justify-self: end; margin-top: 8px; width: 92px; }
@media (min-width: 1000px) {
	.kt-faq-wrap { grid-template-columns: minmax(260px, .7fr) 1.7fr; gap: 12px clamp(40px, 5vw, 96px); grid-template-areas: "head acc" "mascot acc"; align-items: start; }
	.kt-faq-head { grid-area: head; }
	.kt-accordion { grid-area: acc; }
	.kt-faq-mascot { grid-area: mascot; justify-self: start; width: clamp(110px, 9vw, 160px); margin-top: 0; }
}

/* ---------- CTA: wider card + small mascot ---------- */
.kt-cta { position: relative; display: flex; flex-direction: column; }
.kt-cta-inner { width: 100%; max-width: clamp(680px, 58vw, 920px); }
.kt-cta-mascot { order: 2; margin: 18px auto 0; width: 96px; }
@media (min-width: 1100px) {
	.kt-cta-mascot { position: absolute; right: clamp(24px, 6vw, 140px); bottom: 70px; margin: 0; width: clamp(110px, 9vw, 160px); z-index: 1; }
}

/* ---------- Text cards: use the space, no justified text ---------- */
.kt-text-card-lg { max-width: none; }
.kt-text-card-lg.kt-prose, .kt-prose--wide { max-width: none; margin-inline: 0; }
@media (min-width: 1500px) {
	.kt-text-card-lg.kt-prose, .kt-prose--wide { column-count: 2; column-gap: clamp(48px, 5vw, 96px); }
	.kt-prose--wide h2, .kt-prose--wide h3, .kt-text-card-lg.kt-prose h2, .kt-text-card-lg.kt-prose h3 { break-after: avoid; }
	.kt-prose--wide img, .kt-text-card-lg.kt-prose img { break-inside: avoid; }
}
.kt-about-card { position: relative; }
.kt-about-card-mascot { margin: 18px 0 -10px auto; }
@media (max-width: 900px) { .kt-about-card-mascot { width: 92px; } }

/* ---------- Typography: Nepali (Devanagari) via Mukta ---------- */
html.kt-has-deva, html:lang(ne) { font-size: calc(var(--kt-base-fs) * var(--kt-deva-scale, 1.06)); }
html.kt-has-deva body, html:lang(ne) body { line-height: 1.8; }
html.kt-has-deva h1, html.kt-has-deva h2, html.kt-has-deva h3, html.kt-has-deva h4, html.kt-has-deva h5,
html:lang(ne) h1, html:lang(ne) h2, html:lang(ne) h3, html:lang(ne) h4, html:lang(ne) h5 { line-height: 1.32; letter-spacing: 0; }
html.kt-has-deva .kt-eyebrow, html:lang(ne) .kt-eyebrow { letter-spacing: 0; text-transform: none; font-size: .86rem; }
html.kt-has-deva .kt-btn, html:lang(ne) .kt-btn { line-height: 1.5; }
html.kt-has-deva .kt-prose > p, html.kt-has-deva .kt-prose li, html:lang(ne) .kt-prose > p, html:lang(ne) .kt-prose li { line-height: 1.9; }

/* Large monitors: a little more air between cards, roomier timeline & process */
@media (min-width: 1500px) {
	.kt-process-grid, .kt-values-grid { --gap: 28px; gap: 28px; }
	.kt-timeline { max-width: min(100%, 980px); }
}

/* =============================================================
   v1.1.1 — mobile menu fix + justified text on desktop only
   ============================================================= */

/* The mobile menu is now pinned to the viewport (not to the header's
   shrink-wrapped inner box), so it always opens at full width and height
   on every page, regardless of what sits below the header. */
@media (max-width: 900px) {
	.kt-site-header .kt-header-inner { width: 100%; }
	.kt-logo { margin-left: 0; }
	.kt-primary-nav {
		position: fixed; top: calc(var(--kt-header-h) + 8px); left: 12px; right: 12px; bottom: auto;
		width: auto; height: auto; min-height: 0;
		max-height: calc(100vh - var(--kt-header-h) - 28px);
		max-height: calc(100dvh - var(--kt-header-h) - 28px);
		overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
		z-index: 700;
		background: var(--kt-mobile-nav-bg);
		visibility: hidden; opacity: 0; pointer-events: none;
		transition: transform .3s var(--kt-ease), opacity .25s var(--kt-ease), visibility 0s linear .3s;
	}
	.kt-primary-nav.is-open {
		visibility: visible; opacity: 1; pointer-events: auto;
		transition: transform .3s var(--kt-ease), opacity .25s var(--kt-ease), visibility 0s;
	}
	.kt-primary-nav .nav-menu { display: flex; flex-direction: column; width: 100%; }
	.kt-primary-nav .nav-menu > li { width: 100%; flex-shrink: 0; }
	.kt-primary-nav .nav-menu > li > a { white-space: normal; }
	.kt-primary-nav .nav-menu > li > a::after { display: none; }
}

/* Justified long text: desktop / tablet-landscape and up only.
   Phones and portrait tablets keep ragged-right, which reads far better in narrow columns. */
@media (min-width: 901px) {
	.kt-prose > p, .kt-prose li {
		text-align: justify; text-align-last: left;
		hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
	}
}
@media (max-width: 900px) {
	.kt-prose > p, .kt-prose li { text-align: left; text-align-last: auto; hyphens: manual; -webkit-hyphens: manual; }
}

/* =============================================================
   v1.2 — stable FAQ layout, smooth accordion, performance
   ============================================================= */

/* ---------- FAQ: side column never moves when an answer opens ---------- */
.kt-faq-side { display: contents; }             /* phones/tablets: heading, answers, then the small mascot */
.kt-faq-head { order: 1; }
.kt-accordion { order: 2; }
.kt-faq-mascot { order: 3; }
@media (min-width: 1000px) {
	.kt-faq-wrap { grid-template-columns: minmax(260px, .7fr) 1.7fr; grid-template-areas: none; align-items: start; gap: 12px clamp(40px, 5vw, 96px); }
	.kt-faq-side {
		display: flex; flex-direction: column; gap: 22px; align-self: start;
		position: sticky; top: calc(var(--kt-header-h) + 28px);
	}
	.kt-faq-head, .kt-accordion, .kt-faq-mascot { grid-area: auto; order: 0; }
	.kt-faq-mascot { justify-self: auto; align-self: flex-start; }
}

/* ---------- Accordion: height animates in CSS (no jump, no reflow storms) ---------- */
.kt-accordion-panel {
	display: grid; grid-template-rows: 0fr; padding-bottom: 0; overflow: hidden;
	visibility: hidden;
	transition: grid-template-rows .32s var(--kt-ease), visibility 0s linear .32s;
}
.kt-accordion-panel-inner { min-height: 0; overflow: hidden; padding-bottom: 0; transition: padding-bottom .32s var(--kt-ease); }
.kt-accordion-trigger[aria-expanded="true"] + .kt-accordion-panel {
	grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .32s var(--kt-ease), visibility 0s;
}
.kt-accordion-trigger[aria-expanded="true"] + .kt-accordion-panel .kt-accordion-panel-inner { padding-bottom: 22px; }
@media (prefers-reduced-motion: reduce) {
	.kt-accordion-panel, .kt-accordion-panel-inner { transition: none; }
}

/* ---------- Mascots: reserve space, cheaper paint ---------- */
.kt-mascot-wrap { aspect-ratio: 2 / 3; }          /* no jump when the lazy image arrives */
.kt-mascot { filter: none; }                      /* drop-shadow on an animated image repaints every frame */
.kt-mascot-wrap::after {                          /* static soft shadow instead */
	content: ""; position: absolute; left: 16%; right: 16%; bottom: 1%; height: 5%; z-index: 0; pointer-events: none;
	background: radial-gradient(ellipse at center, rgba(0,0,0,.38), rgba(0,0,0,0) 70%);
}
:root[data-theme="light"] .kt-mascot-wrap::after { background: radial-gradient(ellipse at center, rgba(15,30,60,.22), rgba(15,30,60,0) 70%); }
.kt-mascot { z-index: 1; will-change: transform; }
.kt-mascot-wrap.is-offscreen .kt-mascot-float { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .kt-mascot-float { animation: none; } }

/* ---------- Paint-heavy extras off on small screens ---------- */
@media (max-width: 900px) {
	.kt-noise-overlay { display: none; }            /* full-screen blend-mode layer is costly on phones */
	.kt-hero-glow { filter: blur(60px); }
}

/* =============================================================
   v1.3 — contrast on gradients, detail pills + media cards,
   wider adaptive text cards, raised logo cards
   ============================================================= */

/* ---------- Gradient buttons: white text on a deeper gradient (both themes) ---------- */
.kt-btn-primary, .kt-blog-filter.is-active, .kt-portfolio-filter.is-active, .kt-pill-filter.is-active { text-shadow: 0 1px 1px rgba(2,12,27,.28); }
.kt-btn-primary { box-shadow: 0 10px 26px -10px rgba(45,97,229,.6); }
.kt-btn-primary:hover { background: var(--kt-grad-btn-hover); color: var(--kt-on-grad); box-shadow: 0 16px 32px -10px rgba(45,97,229,.65); }
.kt-btn-primary svg { stroke: currentColor; }

/* ---------- Detail pills (author / date / read time / category) ---------- */
.kt-pill-row { display: flex; flex-wrap: wrap; gap: 12px; }
.kt-detail-pill {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 10px 20px; border-radius: 999px;
	background: var(--kt-panel); border: 1px solid var(--kt-border);
	color: var(--kt-heading); font-family: var(--kt-font-display); font-weight: 600; font-size: .92rem; line-height: 1.2;
	box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 18px -12px rgba(15,23,42,.28);
	transition: transform .3s var(--kt-ease), box-shadow .3s var(--kt-ease), border-color .3s var(--kt-ease), background-color .3s var(--kt-ease), color .3s var(--kt-ease);
}
.kt-detail-pill svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--kt-green); }
.kt-detail-pill span { color: inherit; }
a.kt-detail-pill:hover { transform: translateY(-2px); border-color: rgba(8,133,90,.45); }
:root:not([data-theme="light"]) .kt-detail-pill { box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 22px -14px rgba(0,0,0,.7); background: var(--kt-panel-2); }

/* ---------- Featured image as its own card ---------- */
.kt-single-stack { display: flex; flex-direction: column; gap: 28px; max-width: clamp(1220px, 90vw, 1840px); }
.kt-media-card {
	margin: 0; border-radius: var(--kt-radius-lg); overflow: hidden;
	background: var(--kt-panel); border: 1px solid var(--kt-border);
	box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 24px 48px -26px rgba(15,23,42,.35);
	transition: box-shadow .4s var(--kt-ease), border-color .3s var(--kt-ease);
}
.kt-media-card img { display: block; width: 100%; height: auto; max-height: min(78vh, 920px); object-fit: contain; margin: 0; border-radius: 0; }
:root:not([data-theme="light"]) .kt-media-card { box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 28px 56px -26px rgba(0,0,0,.75); }
.kt-service-detail-thumb { border: 1px solid var(--kt-border); background: var(--kt-panel); box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 24px 48px -26px rgba(15,23,42,.35); }
:root:not([data-theme="light"]) .kt-service-detail-thumb { box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 28px 56px -26px rgba(0,0,0,.75); }

/* project + event: pills sit above their media card */
.kt-project-main > .kt-pill-row { margin-bottom: -4px; }
.kt-event-pills { margin: 18px 0 24px; }
.kt-event-detail-meta { display: none; }

/* ---------- Text cards use the room they are given ---------- */
.kt-text-card.kt-prose { max-width: none; margin-inline: 0; }
.kt-text-card { box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 22px 44px -30px rgba(15,23,42,.3); }
:root:not([data-theme="light"]) .kt-text-card { box-shadow: 0 24px 48px -30px rgba(0,0,0,.7); }
.kt-single-stack .kt-text-card { padding: clamp(28px, 3.4vw, 56px) clamp(24px, 4.4vw, 76px); }

/* Two balanced columns whenever the card is wide enough for two comfortable measures.
   Uses rem, so it adapts to browser zoom and monitor size automatically. */
.kt-prose--wide, .kt-text-card-lg.kt-prose {
	columns: 2 34rem; column-gap: clamp(44px, 4.5vw, 96px); column-rule: 1px solid var(--kt-border);
}
.kt-prose--wide h2, .kt-prose--wide h3, .kt-text-card-lg.kt-prose h2, .kt-text-card-lg.kt-prose h3 { break-after: avoid; }
.kt-prose--wide img, .kt-prose--wide figure, .kt-prose--wide blockquote, .kt-prose--wide pre, .kt-text-card-lg.kt-prose img { break-inside: avoid; }
.kt-prose--wide > :first-child, .kt-text-card-lg.kt-prose > :first-child { margin-top: 0; }
.kt-prose--wide .kt-blog-tags { column-span: all; }

/* ---------- Client & partner logo cards: raised, with depth in both themes ---------- */
:root {
	--kt-lift-rest:  0 1px 1px rgba(0,0,0,.3), 0 8px 16px -10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
	--kt-lift-hover: 0 2px 3px rgba(0,0,0,.35), 0 16px 26px -12px rgba(0,0,0,.65), 0 38px 64px -26px rgba(0,0,0,.7), 0 0 0 1px rgba(111,160,255,.45), 0 0 42px -10px rgba(59,122,254,.45), inset 0 1px 0 rgba(255,255,255,.12);
	--kt-lift-ground: rgba(0,0,0,.55);
}
:root[data-theme="light"] {
	--kt-lift-rest:  0 1px 2px rgba(15,23,42,.07), 0 10px 20px -14px rgba(15,23,42,.28), inset 0 1px 0 #fff;
	--kt-lift-hover: 0 2px 4px rgba(15,23,42,.08), 0 16px 28px -14px rgba(15,23,42,.28), 0 36px 60px -28px rgba(42,99,232,.45), 0 0 0 1px rgba(42,99,232,.35), inset 0 1px 0 #fff;
	--kt-lift-ground: rgba(30,50,110,.4);
}
/* specificity is deliberately higher than .reveal-up so its slow transform/transition don't win */
.kt-clients-grid .kt-client-card {
	position: relative; box-shadow: var(--kt-lift-rest);
	transition: opacity .7s var(--kt-ease), transform .45s cubic-bezier(.2,.9,.25,1.15), box-shadow .45s var(--kt-ease), background-color .3s var(--kt-ease), border-color .3s var(--kt-ease);
	transition-delay: calc(var(--d, 0) * 90ms), 0s, 0s, 0s, 0s;
	will-change: transform;
}
.kt-clients-grid .kt-client-card::before {   /* soft top-light sheen */
	content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background: linear-gradient(160deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 46%);
	opacity: 0; transition: opacity .4s var(--kt-ease);
}
:root[data-theme="light"] .kt-clients-grid .kt-client-card::before { background: linear-gradient(160deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 50%); }
.kt-clients-grid .kt-client-card::after {    /* contact shadow on the "floor" under the lifted card */
	content: ''; position: absolute; left: 14%; right: 14%; bottom: -16px; height: 16px; border-radius: 50%;
	background: var(--kt-lift-ground); filter: blur(11px); opacity: 0; transform: scaleX(.7);
	transition: opacity .45s var(--kt-ease), transform .45s var(--kt-ease); pointer-events: none; z-index: -1;
}
.kt-clients-grid .kt-client-card img { position: relative; transition: transform .45s cubic-bezier(.2,.9,.25,1.15), filter .3s var(--kt-ease); }
@media (hover: hover) {
	.kt-clients-grid .kt-client-card.reveal-up.is-visible:hover,
	.kt-clients-grid .kt-client-card:hover { transform: translateY(-10px) scale(1.035); box-shadow: var(--kt-lift-hover); }
	.kt-clients-grid .kt-client-card:hover::before { opacity: 1; }
	.kt-clients-grid .kt-client-card:hover::after { opacity: 1; transform: scaleX(1); }
	.kt-clients-grid .kt-client-card:hover img { transform: scale(1.06); }
}
.kt-clients-grid a.kt-client-card:focus-visible { outline: 2px solid var(--kt-blue-2); outline-offset: 4px; transform: translateY(-6px); box-shadow: var(--kt-lift-hover); }
.kt-clients-grid .kt-client-card:active { transform: translateY(-4px) scale(1.01); }

/* Text fallback (no logo uploaded) follows the theme instead of staying black */
.kt-client-name { color: var(--kt-heading); line-height: 1.3; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
	.kt-clients-grid .kt-client-card, .kt-clients-grid .kt-client-card img, .kt-detail-pill { transition: none; }
	.kt-clients-grid .kt-client-card:hover { transform: none; }
}

/* =============================================================
   v1.3.1 — images fill their rounded cards edge to edge,
   at their natural proportions (nothing cropped, no empty bands)
   ============================================================= */
.kt-blog-card { display: flex; flex-direction: column; }
.kt-blog-card-body { flex: 1; display: flex; flex-direction: column; }
.kt-blog-card .kt-link-arrow { margin-top: auto; padding-top: 4px; }
.kt-blog-thumb { aspect-ratio: auto; background: none; line-height: 0; }
.kt-blog-thumb:not(:has(img)) { aspect-ratio: 16 / 10; background: var(--kt-veil-3); }
.kt-blog-thumb img { display: block; width: 100%; height: auto; object-fit: cover; }

.kt-event-media { aspect-ratio: auto; background: none; line-height: 0; }
.kt-event-media:not(:has(img)) { aspect-ratio: 16 / 10; background: var(--kt-logo-card-bg); line-height: normal; }
.kt-event-media img { display: block; width: 100%; height: auto; padding: 0; object-fit: cover; }

.kt-event-detail-media { padding: 0; overflow: hidden; line-height: 0; }
.kt-event-detail-media:not(:has(img)) { padding: 48px; line-height: normal; }
.kt-event-detail-media img { display: block; width: 100%; height: auto; object-fit: cover; }

.kt-media-card img { max-height: none; object-fit: cover; }

.kt-device-screen { aspect-ratio: auto; line-height: 0; }
.kt-device-screen img { height: auto; object-fit: cover; }
.kt-portfolio-placeholder { aspect-ratio: 16 / 10; height: auto; }

/* =============================================================
   v1.4 — consistent rich-text typography, smoother motion,
   structured careers
   ============================================================= */

/* ---------- Editor content: paragraphs, lists and tables all read the same ----------
   Lists used to inherit the (brighter) body colour while paragraphs were dimmed, which
   made list text look bolder. Now everything shares one colour/weight/line-height, and
   bold only appears where <strong>/<b> (or a heading) was explicitly applied. */
.kt-prose :where(p, li, td, dd, dt, blockquote, div) { font-weight: 400; color: var(--kt-text-dim); line-height: 1.75; }
.kt-prose :where(span, a, em, i, u, small, sup, sub) { font-weight: inherit; }
.kt-prose :where(strong, b) { font-weight: 700; color: var(--kt-text); }
.kt-prose :where(strong, b) :where(span, a, em, i) { font-weight: inherit; color: inherit; }
.kt-prose b[style*="normal"], .kt-prose strong[style*="normal"] { font-weight: inherit; color: inherit; }   /* Google Docs paste wrapper */
.kt-prose :where(th) { font-weight: 600; color: var(--kt-heading); }
.kt-prose a { color: var(--kt-blue-2); text-decoration: underline; text-decoration-color: rgba(59,122,254,.4); text-underline-offset: 3px; }
.kt-prose a:hover { text-decoration-color: currentColor; }
.kt-prose ul:not([class]), .kt-prose ol:not([class]) { margin: 0 0 1.15em; padding-left: 1.4em; }
.kt-prose ul:not([class]) { list-style: disc outside; }
.kt-prose ol:not([class]) { list-style: decimal outside; }
.kt-prose :where(ul, ol):not([class]) :where(ul, ol):not([class]) { margin: .4em 0 .2em; }
.kt-prose li:not([class]) { margin: 0 0 .45em; padding-left: .2em; }
.kt-prose li:not([class])::marker { color: var(--kt-green); font-weight: 400; }
.kt-prose h2, .kt-prose h3, .kt-prose h4 { font-weight: 600; }

/* ---------- Smoother reveal: keyframe-based, so card hover transitions are never overridden ---------- */
.reveal-up { opacity: 0; transform: none; transition: none; }
.reveal-up.is-visible { opacity: 1; transform: none; animation: kt-rise .9s var(--kt-ease) backwards; animation-delay: calc(var(--d, 0) * 90ms); }
@keyframes kt-rise { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.992); } to { opacity: 1; transform: none; } }

/* ---------- Page transitions ---------- */
@view-transition { navigation: auto; }
.kt-site-header { view-transition-name: kt-site-header; }
::view-transition-old(root) { animation: kt-vt-out .22s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: kt-vt-in .55s var(--kt-ease) both; }
::view-transition-group(kt-site-header) { animation-duration: .3s; }
@keyframes kt-vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes kt-vt-in  { from { opacity: 0; transform: translateY(14px); } }
@supports not (view-transition-name: none) {
	body { animation: kt-page-in .6s var(--kt-ease) both; }
	html.kt-leaving body { opacity: 0; transform: translateY(-6px); transition: opacity .2s ease-in, transform .2s ease-in; }
}
@keyframes kt-page-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
	body { animation: none !important; }
}

/* ---------- Buttons: disabled + block ---------- */
.kt-btn[disabled], .kt-btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.kt-btn-block { width: 100%; }
.kt-btn { will-change: transform; }

/* ---------- Careers: badges & pills ---------- */
.kt-job-badge {
	display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px;
	font-size: .74rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2; white-space: nowrap;
	background: rgba(0,191,99,.12); color: var(--kt-green); border: 1px solid rgba(0,191,99,.32);
}
.kt-job-badge.is-urgent { background: rgba(245,165,36,.13); color: #F5A524; border-color: rgba(245,165,36,.38); }
.kt-job-badge.is-closed { background: rgba(255,122,122,.12); color: #FF7A7A; border-color: rgba(255,122,122,.34); }
:root[data-theme="light"] .kt-job-badge { color: #067A52; background: rgba(8,133,90,.10); border-color: rgba(8,133,90,.3); }
:root[data-theme="light"] .kt-job-badge.is-urgent { color: #A35F00; background: rgba(245,165,36,.14); }
:root[data-theme="light"] .kt-job-badge.is-closed { color: #C73A3A; }
.kt-detail-pill--sm { padding: 6px 13px; font-size: .8rem; gap: 7px; box-shadow: none; }
.kt-detail-pill--sm svg { width: 13px; height: 13px; }
.kt-job-header-pills { margin-top: 24px; }

/* ---------- Careers: listing cards ---------- */
.kt-jobs-list { gap: 22px; }
.kt-job-card {
	display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
	box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 22px 44px -32px rgba(15,23,42,.35);
	transition: border-color .35s var(--kt-ease), transform .45s var(--kt-ease), box-shadow .45s var(--kt-ease), background-color .3s var(--kt-ease);
}
:root:not([data-theme="light"]) .kt-job-card { box-shadow: 0 24px 48px -32px rgba(0,0,0,.7); }
.kt-job-card:hover { border-color: rgba(0,191,99,.4); transform: translateY(-4px); box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 30px 54px -28px rgba(45,97,229,.4); }
.kt-job-card:has(.kt-apply-toggle[aria-expanded="true"]) { transform: none; border-color: rgba(45,97,229,.5); }
.kt-job-card-main { display: flex; align-items: center; gap: 22px; padding: clamp(20px, 2.4vw, 30px); }
.kt-job-icon { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, rgba(59,122,254,.18), rgba(0,191,99,.16)); }
.kt-job-info h3 { font-size: clamp(1.1rem, 1vw + .8rem, 1.35rem); margin: 0; }
.kt-job-info h3 a:hover { color: var(--kt-green); }
.kt-job-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.kt-job-summary { margin: 12px 0 0; font-size: .93rem; max-width: 90ch; }
.kt-job-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }

/* ---------- Careers: expanding apply panel (height animates smoothly for any content) ---------- */
.kt-job-apply { margin: 0; padding: 0; border: 0; background: none; border-radius: 0; }
.kt-job-apply[hidden] { display: none; }
.kt-job-apply-animated { display: grid; grid-template-rows: 0fr; opacity: 0; transform: none; transition: grid-template-rows .65s var(--kt-ease), opacity .45s var(--kt-ease); }
.kt-job-apply-animated.is-open { grid-template-rows: 1fr; opacity: 1; transform: none; }
.kt-job-apply-inner { min-height: 0; overflow: hidden; }
.kt-job-apply-grid {
	display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start;
	padding: clamp(22px, 3vw, 38px); border-top: 1px solid var(--kt-border); background: var(--kt-veil-2);
}
.kt-job-apply-details { min-width: 0; }
.kt-job-apply-details .kt-job-section:last-child { margin-bottom: 0; }
.kt-job-apply--solo { margin-top: 12px; }
.kt-job-apply--solo .kt-job-apply-grid { grid-template-columns: minmax(0, 820px); justify-content: center; border: 0; background: none; padding: 28px 0 36px; }
.kt-job-apply--bare { display: block; }
.kt-job-apply--bare .kt-job-apply-grid { display: block; padding: 0; border: 0; background: none; }

.kt-apply-card {
	background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius-lg);
	padding: clamp(22px, 2.6vw, 36px); box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 26px 50px -34px rgba(15,23,42,.4);
}
:root:not([data-theme="light"]) .kt-apply-card { box-shadow: 0 28px 52px -34px rgba(0,0,0,.75); }
.kt-apply-card-head { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--kt-border); }
.kt-apply-card-head h3 { margin: 8px 0 4px; font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem); }
.kt-apply-card-head p { margin: 0; font-size: .92rem; }
.kt-apply-card .kt-form-submit { width: 100%; padding: 15px 26px; }
.kt-apply-card .kt-form-field:last-of-type { margin-bottom: 20px; }

/* CV dropzone */
.kt-dropzone {
	position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "i t" "i n"; column-gap: 16px; align-items: center;
	padding: 16px 20px; border: 1.5px dashed var(--kt-border-2); border-radius: 14px; background: var(--kt-veil-2);
	transition: border-color .3s var(--kt-ease), background-color .3s var(--kt-ease), transform .3s var(--kt-ease), box-shadow .3s var(--kt-ease);
}
.kt-dropzone:hover, .kt-dropzone:focus-within, .kt-dropzone.is-drag { border-color: var(--kt-blue-2); background: var(--kt-veil-4); }
.kt-dropzone.is-drag { transform: scale(1.015); box-shadow: 0 0 0 4px rgba(59,122,254,.15); }
.kt-dropzone > svg { grid-area: i; width: 30px; height: 30px; color: var(--kt-green); transform: rotate(180deg); }
.kt-dropzone-text { grid-area: t; color: var(--kt-text-dim); font-size: .92rem; }
.kt-dropzone-text strong { color: var(--kt-heading); font-weight: 600; }
.kt-dropzone-name { grid-area: n; font-size: .8rem; color: var(--kt-text-dim-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-dropzone.has-file { border-style: solid; border-color: rgba(0,191,99,.55); }
.kt-dropzone.has-file .kt-dropzone-name { color: var(--kt-green); font-weight: 600; }
.kt-form-field .kt-dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; background: none; }
.kt-form-field.has-error .kt-dropzone { border-color: #FF7A7A; }

/* ---------- Careers: at-a-glance tiles (inside the panel) ---------- */
.kt-glance-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.kt-glance-tile {
	display: grid; grid-template-columns: auto 1fr; grid-template-areas: "i l" "i v"; column-gap: 12px; align-items: center;
	padding: 12px 16px; border-radius: 14px; background: var(--kt-panel); border: 1px solid var(--kt-border);
}
.kt-glance-tile svg { grid-area: i; width: 20px; height: 20px; color: var(--kt-green); }
.kt-glance-label { grid-area: l; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--kt-text-dim-2); }
.kt-glance-value { grid-area: v; font-size: .92rem; font-weight: 600; color: var(--kt-heading); line-height: 1.3; }

/* ---------- Careers: structured sections ---------- */
.kt-job-section {
	background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius);
	padding: clamp(20px, 2.4vw, 32px); margin-bottom: 18px;
	box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 20px 40px -32px rgba(15,23,42,.35);
}
:root:not([data-theme="light"]) .kt-job-section { box-shadow: 0 22px 44px -32px rgba(0,0,0,.65); }
.kt-job-section h3 { display: flex; align-items: center; gap: 12px; font-size: 1.1rem; margin: 0 0 16px; }
.kt-job-section-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center; background: rgba(59,122,254,.13); color: var(--kt-blue-2); }
.kt-job-section-icon svg { width: 18px; height: 18px; }
.kt-job-points { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.kt-job-points li { display: flex; align-items: flex-start; gap: 12px; font-size: .98rem; line-height: 1.6; font-weight: 400; color: var(--kt-text-dim); }
.kt-job-points li svg { margin-top: .5em; width: 13px; height: 13px; color: var(--kt-green); flex-shrink: 0; }
.kt-job-note { margin: 0; font-size: .98rem; }
.kt-job-overview .kt-prose > :last-child { margin-bottom: 0; }

/* ---------- Careers: single job page ---------- */
.kt-job-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: clamp(28px, 3.5vw, 60px); align-items: start; }
.kt-job-side { position: sticky; top: calc(var(--kt-header-h) + 24px); display: flex; flex-direction: column; gap: 18px; }
.kt-job-main .kt-job-section:last-child { margin-bottom: 0; }
.kt-glance-card {
	background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius-lg);
	padding: clamp(22px, 2.6vw, 34px); box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 28px 54px -34px rgba(15,23,42,.45);
}
:root:not([data-theme="light"]) .kt-glance-card { box-shadow: 0 30px 56px -34px rgba(0,0,0,.8); }
.kt-glance-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.kt-glance-head h3 { margin: 0; font-size: 1.3rem; }
.kt-glance-list { margin: 0 0 24px; }
.kt-glance-row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 15px 0; border-bottom: 1px dashed var(--kt-border-2); }
.kt-glance-row:last-child { border-bottom: 0; }
.kt-glance-row dt { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .92rem; color: var(--kt-text-dim); flex-shrink: 0; }
.kt-glance-row dt svg { color: var(--kt-green); align-self: center; }
.kt-glance-row dd { margin: 0; text-align: right; font-weight: 600; font-size: .96rem; color: var(--kt-heading); line-height: 1.35; }
.kt-job-back { align-self: flex-start; padding-left: 6px; }

@media (max-width: 900px) {
	.kt-job-card-main { flex-direction: column; align-items: flex-start; }
	.kt-job-actions { width: 100%; margin-left: 0; }
	.kt-job-actions .kt-btn { flex: 1; }
	.kt-job-apply-grid { grid-template-columns: 1fr; }
	.kt-job-layout { grid-template-columns: 1fr; }
	.kt-job-side { position: static; order: -1; }
	.kt-glance-row { flex-direction: column; align-items: flex-start; gap: 4px; }
	.kt-glance-row dd { text-align: left; }
}

.kt-benefit-list li, .kt-advantage-list li { color: var(--kt-text-dim); font-weight: 400; }
.kt-benefit-list li strong { color: var(--kt-text); }

/* =============================================================
   v1.4.1 — consistent buttons, calmer careers typography,
   uniform glance tiles, download button
   ============================================================= */

/* Buttons: <a> and <button> now render at identical heights (anchors were inheriting the
   body's 1.65 line-height, buttons use "normal"), so mixed rows line up perfectly. */
.kt-btn { line-height: 1.25; font-family: inherit; min-height: 46px; }
.kt-btn-sm { min-height: 40px; padding: 9px 20px; font-size: .86rem; }
.kt-btn-lg { min-height: 54px; }
.kt-btn > span { line-height: inherit; }

/* The old "expanded" state turned the label green — invisible on the gradient. Keep it readable. */
.kt-btn-primary.kt-apply-toggle[aria-expanded="true"] { color: var(--kt-on-grad); border-color: transparent; }
.kt-btn-primary.kt-apply-toggle[aria-expanded="true"]:hover { background: var(--kt-grad-btn-hover); }
.kt-btn-outline.kt-apply-toggle[aria-expanded="true"] { color: var(--kt-green); border-color: var(--kt-green); }

/* Listing card: quieter title, smaller supporting text, equal-width action buttons */
.kt-job-info h3 { font-size: clamp(1rem, .5vw + .9rem, 1.18rem); font-weight: 600; letter-spacing: -.005em; }
.kt-job-pills { gap: 8px; margin-top: 10px; }
.kt-job-pills .kt-detail-pill--sm { padding: 5px 12px; font-size: .76rem; font-weight: 500; line-height: 1.3; gap: 6px; color: var(--kt-text-dim); font-family: var(--kt-font-body); }
.kt-job-pills .kt-detail-pill--sm svg { width: 12px; height: 12px; }
.kt-job-badge { padding: 4px 11px; font-size: .7rem; }
.kt-job-summary { font-size: .88rem; line-height: 1.6; margin-top: 10px; }
.kt-job-icon { width: 50px; height: 50px; border-radius: 14px; }
.kt-job-icon svg { width: 22px; height: 22px; }
.kt-job-actions { gap: 10px; }
.kt-job-actions .kt-btn { min-width: 158px; }

/* Header pills on the single job page — same restraint */
.kt-job-header-pills .kt-detail-pill { padding: 8px 16px; font-size: .84rem; font-weight: 500; font-family: var(--kt-font-body); }

/* Glance tiles: identical height, label + value stacked and centred, long values wrap to 2 lines at most */
.kt-glance-tiles { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.kt-glance-tile {
	display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto;
	grid-template-areas: "i l" "i v"; column-gap: 14px; row-gap: 2px;
	align-content: center; align-items: center; min-height: 72px; padding: 12px 16px;
}
.kt-glance-tile svg { grid-area: i; justify-self: center; width: 18px; height: 18px; box-sizing: content-box; padding: 10px; border-radius: 11px; background: rgba(0,191,99,.12); color: var(--kt-green); }
.kt-glance-label { font-size: .64rem; letter-spacing: .08em; line-height: 1.2; align-self: end; }
.kt-glance-value { font-size: .86rem; font-weight: 600; line-height: 1.3; align-self: start; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Role-at-a-glance card + section cards: calmer sizes */
.kt-glance-head h3 { font-size: 1.12rem; }
.kt-glance-row { padding: 13px 0; }
.kt-glance-row dt { font-size: .86rem; }
.kt-glance-row dd { font-size: .9rem; }
.kt-job-section h3 { font-size: 1rem; gap: 11px; margin-bottom: 14px; }
.kt-job-section-icon { width: 32px; height: 32px; border-radius: 10px; }
.kt-job-section-icon svg { width: 16px; height: 16px; }
.kt-job-points li, .kt-job-note { font-size: .93rem; }
.kt-apply-card-head h3 { font-size: clamp(1.1rem, .6vw + 1rem, 1.35rem); }
.kt-apply-card-head p { font-size: .86rem; }

/* Downloads: size as a quiet label, action as a proper gradient button */
.kt-download-row { align-items: center; }
.kt-download-action { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: auto; }
.kt-download-size { font-family: var(--kt-font-mono); font-size: .76rem; color: var(--kt-text-dim-2); padding: 5px 11px; border-radius: 999px; background: var(--kt-veil-3); border: 1px solid var(--kt-border); white-space: nowrap; }
.kt-download-btn { min-width: 140px; }
.kt-download-btn svg { transition: transform .3s var(--kt-ease); }
.kt-download-btn:hover svg { transform: translateY(2px); }
.kt-download-icon { background: linear-gradient(135deg, rgba(59,122,254,.16), rgba(0,191,99,.14)); color: var(--kt-blue-2); }
.kt-download-info h3 { font-size: .98rem; font-weight: 600; }
@media (max-width: 900px) {
	.kt-job-actions .kt-btn { min-width: 0; }
	.kt-download-action { width: 100%; justify-content: space-between; margin-left: 0; }
	.kt-download-btn { flex: 1; }
	.kt-glance-tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .kt-glance-tiles { grid-template-columns: 1fr; } }

/* =============================================================
   v1.4.2 — downloads layout + jerk-free button hover
   ============================================================= */

/* Primary button hover: cross-fade an overlay instead of swapping the gradient
   (gradients can't transition, which caused a visible flash), and keep the text on
   its own compositor layer so it never re-rasterises / shifts while the button lifts. */
.kt-btn-primary { transform: translate3d(0,0,0); backface-visibility: hidden; -webkit-font-smoothing: antialiased; }
.kt-btn-primary::before { content: ''; position: absolute; inset: 0; background: var(--kt-grad-btn-hover); opacity: 0; transition: opacity .35s var(--kt-ease); pointer-events: none; }
.kt-btn-primary > * { position: relative; z-index: 1; }
.kt-btn-primary:hover, .kt-btn-primary.kt-apply-toggle[aria-expanded="true"]:hover { background: var(--kt-grad-btn); transform: translate3d(0,-2px,0); }
.kt-btn-primary:hover::before { opacity: 1; }
.kt-btn-primary svg { transition: transform .35s var(--kt-ease); }
.kt-btn-primary:hover svg { transform: translate3d(3px,0,0); }
/* Download: the arrow gently nudges down and back; the label never moves */
.kt-download-btn:hover svg { transform: none; animation: kt-dl-nudge .9s var(--kt-ease) infinite; }
@keyframes kt-dl-nudge { 0%, 100% { transform: translate3d(0,0,0); } 45% { transform: translate3d(0,3px,0); } }

/* Downloads list: a lone document stretches to the full row (auto-fit collapses empty tracks) */
.kt-downloads-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); }
.kt-download-row { flex-wrap: nowrap; gap: 20px; padding: 20px 26px; }
.kt-download-info { flex: 1 1 auto; }
.kt-download-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.kt-download-cat { margin-top: 0; font-size: .7rem; padding: 3px 10px; line-height: 1.4; }
.kt-download-size { font-family: var(--kt-font-mono); font-size: .68rem; line-height: 1.4; padding: 3px 10px; border-radius: 999px; background: var(--kt-veil-3); border: 1px solid var(--kt-border); color: var(--kt-text-dim-2); white-space: nowrap; }
.kt-download-action { margin-left: auto; flex-shrink: 0; }

/* Mobile: compact icon + text row with a full-width button underneath — no wasted height */
@media (max-width: 700px) {
	.kt-download-row { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "i t" "a a"; gap: 14px 14px; align-items: center; padding: 16px; text-align: left; }
	.kt-download-icon { grid-area: i; margin: 0; width: 44px; height: 44px; }
	.kt-download-info { grid-area: t; flex: none; text-align: left; }
	.kt-download-action { grid-area: a; width: 100%; margin: 0; }
	.kt-download-btn { width: 100%; }
	.kt-download-pending { grid-area: a; text-align: center; }
}