/* ==========================================================================
   Kualitatem 2026 — site-wide header, "Let's build" contact panel and footer
   Design: Figma "KTM" › ktm home page › Header (sticky), Final CTA, Footer (1440 frame).
   Loaded on every page. Apart from the site-wide fonts block, every rule is scoped to
   .ktm-site-header, .ktm-site-cta or .ktm-site-footer, so page layouts are not affected.
   ========================================================================== */

@font-face { font-family: "Neue Montreal"; src: url("../fonts/NeueMontreal-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Neue Montreal"; src: url("../fonts/NeueMontreal-Medium.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Neue Montreal"; src: url("../fonts/NeueMontreal-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
	--ktm-site-blue: #1473b8;
	--ktm-site-navy: #0f5c94;
	--ktm-site-grad: linear-gradient(127deg, #0f5c94 0%, #1473b8 75%);
	--ktm-site-head: "Space Grotesk", Arial, Helvetica, sans-serif;
	--ktm-site-body: "Neue Montreal", "Helvetica Neue", Arial, sans-serif;
	/* The parent's inner-page banners are offset 100px (80px on mobile) for a fixed header; keep the same height. */
	--ktm-site-header-h: 100px;
	--ktm-site-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Site-wide fonts ----------
   Replaces the parent theme's fonts on every page: Neue Montreal (secondary) for text,
   Space Grotesk (primary) for headings. Parent rules replaced: all.css body "Fedra Sans Pro",
   .hnBanenrSectionWrapper .bannerContent h1 "Gilroy", .ttHero/.ttStats/.ttCategory "Poppins".
   Icon fonts (Font Awesome, Glyphicons) are untouched: they are set on their own classes. */
body { font-family: var(--ktm-site-body); }
:where(h1, h2, h3, h4, h5, h6),
.hnBanenrSectionWrapper .bannerContent h1 { font-family: var(--ktm-site-head); }
.ttHero, .ttStats, .ttCategory { font-family: var(--ktm-site-body); }
:where(button, input, select, textarea, optgroup) { font-family: inherit; }

/* Page templates that bring their own fonts in an inline <style> (it prints after this file,
   so these need !important or extra specificity):
   - page-temenos-assurance.php: --ff-display Space Grotesk, --ff-body IBM Plex Sans, --ff-mono IBM Plex Mono (on :root);
   - automation/functional/penetration/quality-assurance templates, page-clients.php,
     template-faq-hub.php, template-penetration-testing.php: var(--font-head) / var(--font-body);
   - single-case_studies.php: Inter on .csPage and its form, Georgia on the pull-quote marks. */
:root, body, body * {
	--ff-display: var(--ktm-site-head) !important;
	--ff-body: var(--ktm-site-body) !important;
	--ff-mono: var(--ktm-site-body) !important;
	--font-head: var(--ktm-site-head) !important;
	--font-body: var(--ktm-site-body) !important;
}
body .csPage,
body .csContactForm .wpcf7-form textarea,
body .csContactForm .wpcf7-form input[type="submit"] { font-family: var(--ktm-site-body); }
body .csPullQuoteInner .qqOpen,
body .csPullQuoteInner .qqClose { font-family: var(--ktm-site-head); }

/* ---------- Shared ---------- */
.ktm-skip-link {
	position: fixed; left: 16px; top: -60px; z-index: 10001; padding: 10px 16px; border-radius: 8px;
	background: var(--ktm-site-navy); color: #fff; font: 500 15px/1 var(--ktm-site-body); transition: top .2s;
}
.ktm-skip-link:focus { top: 12px; color: #fff; }
.ktm-site-header .ktm-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ktm-site-header *, .ktm-site-cta *, .ktm-site-footer * { box-sizing: border-box; }
.ktm-site-header :where(ul, ol), .ktm-site-cta :where(ul, ol), .ktm-site-footer :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.ktm-site-header :where(p, h2), .ktm-site-cta :where(p, h2), .ktm-site-footer :where(p, h2) { margin: 0; }
.ktm-site-header a, .ktm-site-cta a, .ktm-site-footer a { text-decoration: none; }
.ktm-site-header :focus-visible, .ktm-site-cta :focus-visible, .ktm-site-footer :focus-visible { outline: 2px solid #36afef; outline-offset: 3px; border-radius: 4px; }

/* Button (Figma component "Button / Talk to an Expert") */
.ktm-site-btn {
	display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 8px 8px 24px; border-radius: 999px;
	font: 500 16px/19px var(--ktm-site-body); white-space: nowrap;
	transition: background-color .2s var(--ktm-site-ease), box-shadow .2s var(--ktm-site-ease), transform .2s var(--ktm-site-ease);
}
.ktm-site-btn:hover { transform: translateY(-1px); }
.ktm-site-btn__icon { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; transition: transform .2s var(--ktm-site-ease); }
.ktm-site-btn:hover .ktm-site-btn__icon { transform: rotate(45deg); }
.ktm-site-btn--primary, .ktm-site-btn--primary:hover, .ktm-site-btn--primary:focus { background: var(--ktm-site-blue); color: #fff; }
.ktm-site-btn--primary:hover { background: #0f5c96; box-shadow: 0 8px 20px rgba(20, 115, 184, .25); }
.ktm-site-btn--primary .ktm-site-btn__icon { background: #fff; color: var(--ktm-site-blue); }
.ktm-site-btn--light, .ktm-site-btn--light:hover, .ktm-site-btn--light:focus { background: #fff; color: var(--ktm-site-blue); }
.ktm-site-btn--light:hover { box-shadow: 0 8px 24px rgba(4, 30, 60, .25); }
.ktm-site-btn--light .ktm-site-btn__icon { background: var(--ktm-site-blue); color: #fff; }

/* Pills (Figma: "TMMi Level 5 / ISO 27001 / Clutch profile") */
.ktm-site-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.ktm-site-tags li { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font: 500 13px/16px var(--ktm-site-body); }
.ktm-site-tags a, .ktm-site-tags a:hover { color: inherit; }
.ktm-site-tags--outline { gap: 8px; }
.ktm-site-tags--outline li { padding: 6px 12px; border-radius: 8px; background: none; border: 1px solid rgba(255, 255, 255, .3); font-size: 12px; line-height: 14px; }

/* ==========================================================================
   Header
   ========================================================================== */
.ktm-site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 999;
	height: var(--ktm-site-header-h); background: #fff;
	transition: box-shadow .25s;
}
.admin-bar .ktm-site-header { top: 32px; }
.ktm-site-header.is-scrolled { box-shadow: 0 6px 24px rgba(15, 92, 148, .08); }
.ktm-site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 64px; }

.ktm-site-logo { flex: none; display: block; width: 168px; padding-left: 38px; } /* Figma: 100x40 logo inside a 168px slot */
.ktm-site-logo img { display: block; width: 100px; height: 40px; }

.ktm-site-nav__menu { display: flex; align-items: center; gap: 36px; }
.ktm-site-nav__menu:has(> li:nth-child(7)) { gap: clamp(20px, 2.2vw, 36px); } /* Figma has 6 items at 36px; longer menus tighten so they fit */
.ktm-site-nav__menu > li { position: relative; }
.ktm-site-nav__menu > li > a {
	display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; white-space: nowrap;
	font: 500 16px/20px var(--ktm-site-body); color: var(--ktm-site-navy); transition: color .2s;
}
.ktm-site-nav__menu > li > a:hover,
.ktm-site-nav__menu > li.current-menu-item > a,
.ktm-site-nav__menu > li.current-menu-ancestor > a { color: var(--ktm-site-blue); }
/* Figma "⌄" next to items with a dropdown (13px, 50% opacity) */
.ktm-site-nav__menu > li.menu-item-has-children > a::after {
	content: ""; width: 8px; height: 5px; margin-top: 2px; opacity: .5; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s;
}

/* Dropdowns (not in the Figma: styled to match the cards on the page) */
.ktm-site-nav__menu .sub-menu {
	position: absolute; left: -16px; top: calc(100% + 30px); /* opens at the bottom edge of the 100px header */ z-index: 2; min-width: 270px; padding: 10px;
	background: #fff; border: 1px solid #e3edf5; border-radius: 16px; box-shadow: 0 18px 40px rgba(15, 92, 148, .14);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .18s, transform .18s var(--ktm-site-ease), visibility 0s .18s;
}
.ktm-site-nav__menu .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -31px; height: 31px; } /* keeps :hover while moving down */
.ktm-site-nav__menu .sub-menu:has(> li:nth-child(9)) { display: grid; grid-template-columns: repeat(2, minmax(250px, 1fr)); column-gap: 4px; }
.ktm-site-nav__menu > li:hover > .sub-menu,
.ktm-site-nav__menu > li:focus-within > .sub-menu,
.ktm-site-nav__menu > li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s var(--ktm-site-ease); }
.ktm-site-nav__menu > li:hover > a::after,
.ktm-site-nav__menu > li.is-open > a::after { transform: rotate(180deg); }
.ktm-site-nav__menu .sub-menu a {
	display: block; padding: 10px 12px; border-radius: 10px;
	font: 400 15px/20px var(--ktm-site-body); color: var(--ktm-site-navy); transition: background-color .15s, color .15s;
}
.ktm-site-nav__menu .sub-menu a:hover,
.ktm-site-nav__menu .sub-menu .current-menu-item > a { background: #eef6fc; color: var(--ktm-site-blue); }
.ktm-site-nav__sub-toggle { display: none; }

.ktm-site-header__cta { flex: none; }
.ktm-site-nav__cta { display: none; }

.ktm-site-header__toggle {
	display: none; width: 44px; height: 44px; padding: 0; border: 1px solid #d9e9f4; border-radius: 12px;
	background: #fff; color: var(--ktm-site-navy); cursor: pointer; place-items: center;
}
.ktm-site-header__bars { display: grid; gap: 5px; width: 20px; }
.ktm-site-header__bars span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
.ktm-nav-open .ktm-site-header__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ktm-nav-open .ktm-site-header__bars span:nth-child(2) { opacity: 0; }
.ktm-nav-open .ktm-site-header__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1439px) {
	.ktm-site-header__inner { padding: 0 32px; }
	.ktm-site-logo { width: auto; padding-left: 0; }
	.ktm-site-nav__menu { gap: 24px; }
	.ktm-site-nav__menu:has(> li:nth-child(7)) { gap: 22px; }
}

/* Mobile/tablet: the menu becomes a drawer under the header */
@media (max-width: 1279px) {
	.ktm-site-header__toggle { display: grid; }
	.ktm-site-header__inner { padding: 0 24px; }
	.ktm-site-header__cta { margin-left: auto; }
	.ktm-site-nav {
		position: fixed; left: 0; right: 0; top: var(--ktm-site-header-h); bottom: 0; z-index: 998;
		overflow-y: auto; overscroll-behavior: contain; padding: 8px 24px 32px; background: #fff; border-top: 1px solid #e3edf5;
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: opacity .2s, transform .2s var(--ktm-site-ease), visibility 0s .2s;
	}
	.admin-bar .ktm-site-nav { top: calc(var(--ktm-site-header-h) + 46px); }
	.ktm-nav-open .ktm-site-nav { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--ktm-site-ease); }
	.ktm-nav-open { overflow: hidden; }
	.ktm-site-nav__menu { display: block; }
	.ktm-site-nav__menu > li { border-bottom: 1px solid #e3edf5; }
	.ktm-site-nav__menu > li > a { display: flex; padding: 16px 48px 16px 0; font-size: 18px; line-height: 22px; }
	.ktm-site-nav__menu > li.menu-item-has-children > a::after { display: none; }
	.ktm-site-nav__sub-toggle {
		display: grid; place-items: center; position: absolute; right: 0; top: 7px; width: 40px; height: 40px;
		padding: 0; border: 0; border-radius: 10px; background: #eef6fc; color: var(--ktm-site-navy); cursor: pointer;
	}
	.ktm-site-nav__sub-toggle svg { transition: transform .2s; }
	.ktm-site-nav__menu > li.is-open > .ktm-site-nav__sub-toggle svg { transform: rotate(180deg); }
	.ktm-site-nav__menu .sub-menu::before { display: none; }
	.ktm-site-nav__menu .sub-menu,
	.ktm-site-nav__menu .sub-menu:has(> li:nth-child(9)) {
		position: static; display: none; min-width: 0; margin: 0 0 12px; padding: 0; border: 0; box-shadow: none;
		opacity: 1; visibility: visible; transform: none; transition: none;
	}
	.ktm-site-nav__menu > li.is-open > .sub-menu { display: block; }
	.ktm-site-nav__menu .sub-menu a { padding: 10px 12px; font-size: 16px; }
	.ktm-site-nav__cta { display: inline-flex; margin-top: 24px; }
}

@media (max-width: 767px) {
	:root { --ktm-site-header-h: 80px; }
	.ktm-site-header__inner { padding: 0 16px; }
	.ktm-site-header__cta { display: none; }
	.ktm-site-nav { padding: 8px 16px 32px; }
}
@media (max-width: 600px) {
	.admin-bar .ktm-site-header { top: 0; }
}

/* ==========================================================================
   "Let's build" contact panel (before the footer, as in the parent theme)
   ========================================================================== */
.ktm-site-cta { padding: 80px 24px 96px; background: #fff; }
.ktm-site-cta__panel {
	max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 678fr) minmax(0, 520fr);
	border: 1px solid #d9e9f4; border-radius: 32px; overflow: hidden; background: #fff;
}
.ktm-site-cta__intro {
	display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
	padding: 35px 56px 47px 64px; background: var(--ktm-site-grad); color: #fff;
}
.ktm-site-cta__title {
	max-width: 558px; font: 500 clamp(32px, 3.61vw, 52px)/1.115 var(--ktm-site-head); letter-spacing: -0.025em; color: #fff; text-transform: none;
}
.ktm-site-cta__text { max-width: 558px; font: 400 19px/30px var(--ktm-site-body); color: rgba(255, 255, 255, .85); }
.ktm-site-cta__mail { display: grid; gap: 4px; font: 400 14px/17px var(--ktm-site-body); color: rgba(255, 255, 255, .65); }
.ktm-site-cta__mail a, .ktm-site-cta__mail a:hover { font-size: 16px; line-height: 19px; font-weight: 500; color: #fff; }

/* Contact Form 7 (markup comes from the plugin: .row > .col-12 > .form-group > p > span > input) */
.ktm-site-cta__form { padding: 51px 30px 47px 30px; background: #fff; }
.ktm-site-cta__form .wpcf7-form .row { display: grid; gap: 16px; margin: 0; }
.ktm-site-cta__form .wpcf7-form .row > * { width: auto; max-width: none; padding: 0; margin: 0; }
.ktm-site-cta__form .wpcf7-form .form-group, .ktm-site-cta__form .wpcf7-form p { margin: 0; }
.ktm-site-cta__form .wpcf7-form-control-wrap { display: block; }
.ktm-site-cta__form .wpcf7-form .form-control:not(.wpcf7-submit),
.ktm-site-cta__form .wpcf7-form .form-select {
	display: block; width: 100%; height: 45px; padding: 12px 15px; margin: 0;
	border: 0; border-bottom: 1px solid #c2c2c2; border-radius: 4px; background-color: #deebf5; box-shadow: none;
	font: 400 16px/20px var(--ktm-site-body); color: #000;
}
.ktm-site-cta__form .wpcf7-form .form-select { padding-right: 40px; background-position: right 15px center; }
.ktm-site-cta__form .wpcf7-form textarea.form-control { height: 120px; min-height: 120px; padding: 10px; line-height: 24px; resize: vertical; }
.ktm-site-cta__form .wpcf7-form .form-control::placeholder { color: #000; opacity: 1; }
.ktm-site-cta__form .wpcf7-form .form-control:focus,
.ktm-site-cta__form .wpcf7-form .form-select:focus { outline: 2px solid #36afef; outline-offset: 0; background-color: #e6f1f9; }
.ktm-site-cta__form .wpcf7-form .wpcf7-submit {
	display: inline-block; width: 200px; height: 49px; margin-top: 7px; padding: 0 20px;
	border: 1px solid #000; border-radius: 30px; background: transparent; box-shadow: none;
	font: 400 18px/27px var(--ktm-site-body); color: #000; cursor: pointer; transition: background-color .2s, color .2s;
}
.ktm-site-cta__form .wpcf7-form .wpcf7-submit:hover { background: #000; color: #fff; }
.ktm-site-cta__form .wpcf7-not-valid-tip { margin-top: 4px; font: 400 13px/16px var(--ktm-site-body); color: #c0392b; }
.ktm-site-cta__form .wpcf7-response-output { margin: 16px 0 0 !important; padding: 10px 14px !important; border-radius: 8px; font: 400 14px/20px var(--ktm-site-body); }
.ktm-site-cta__form .wpcf7-spinner { margin: 0 0 0 12px; vertical-align: middle; }

/* ==========================================================================
   Footer
   ========================================================================== */
.ktm-site-footer, #siteFooter.ktm-site-footer { background: var(--ktm-site-grad); color: #fff; padding: 80px 24px 40px; } /* the id beats the parent all.css "#siteFooter { background: #fff }" */
.ktm-site-footer__inner { max-width: 1200px; margin: 0 auto; }
.ktm-site-footer__top { display: flex; gap: 48px; }
.ktm-site-footer__brand { flex: 0 0 320px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.ktm-site-footer__logo img { display: block; width: 108px; height: 44px; }
.ktm-site-footer__col { flex: 0 0 172px; min-width: 0; } /* long labels overflow the 172px column, as in the Figma */
.ktm-site-footer__title { margin: 0 0 14px; font: 700 17px/20px var(--ktm-site-body); color: #fff; }
.ktm-site-footer__links { display: grid; gap: 14px; }
.ktm-site-footer__links li { line-height: 18px; white-space: nowrap; }
.ktm-site-footer__links a { display: inline-block; font: 400 15px/18px var(--ktm-site-body); color: rgba(255, 255, 255, .75); transition: color .2s; }
.ktm-site-footer__links a:hover, .ktm-site-footer__links .current-menu-item > a { color: #fff; }

.ktm-site-offices {
	display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;
	margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .18);
}
.ktm-site-offices li {
	display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 14px 16px; border-radius: 14px;
	background: rgba(255, 255, 255, .08); font: 500 15px/18px var(--ktm-site-body); color: #fff;
}
.ktm-site-offices__flag { width: 20px; height: 20px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .3); } /* Figma placeholder: swap with flags */

.ktm-site-footer__legal {
	display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
	margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .18);
	font: 400 13px/16px var(--ktm-site-body); color: rgba(255, 255, 255, .7);
}
.ktm-site-footer__legal .ktm-site-footer__col { flex: none; }
.ktm-site-footer__legal .ktm-site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ktm-site-footer__legal .ktm-site-footer__links a { font-size: 13px; line-height: 16px; color: rgba(255, 255, 255, .7); }
.ktm-site-footer__legal .ktm-site-footer__links a:hover { color: #fff; }

/* ---------- Responsive: contact panel + footer ---------- */
@media (max-width: 1099px) {
	.ktm-site-cta__panel { grid-template-columns: 1fr; }
	.ktm-site-cta__intro { padding: 40px 40px 44px; }
	.ktm-site-cta__form { padding: 36px 40px 40px; }
	.ktm-site-footer__top { flex-wrap: wrap; row-gap: 40px; }
	.ktm-site-footer__brand { flex-basis: 100%; }
	.ktm-site-footer__col { flex: 1 1 calc(50% - 24px); }
	.ktm-site-footer__links li { white-space: normal; }
	.ktm-site-offices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.ktm-site-cta { padding: 56px 16px 64px; }
	.ktm-site-cta__panel { border-radius: 24px; }
	.ktm-site-cta__intro { padding: 32px 22px 36px; }
	.ktm-site-cta__text { font-size: 17px; line-height: 27px; }
	.ktm-site-cta__form { padding: 28px 22px 32px; }
	.ktm-site-footer, #siteFooter.ktm-site-footer { padding: 56px 16px 32px; }
	.ktm-site-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ktm-site-footer__legal { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.ktm-site-header *, .ktm-site-header, .ktm-site-btn, .ktm-site-btn__icon { transition: none !important; }
}