/* =========================================================================
   Tooriistakeskus Teenused
   Uses the site's established "workshop technical precision" identity:
   steel white / charcoal / safety-amber / steel-blue, Barlow Condensed +
   IBM Plex Sans/Mono, measuring-tape tick-rule motif.
   Defensive resets (all:unset + !important) guard against Divi's global
   a / button / heading styles, matching the pattern used in the header,
   categories and mate-soodustooted plugins.
   ========================================================================= */

.tkt-services {
	--tkt-steel-white: #F2F3EF;
	--tkt-charcoal: #1C1F22;
	--tkt-amber: #E3A008;
	--tkt-steel-blue: #3D5A73;
	--tkt-line: rgba(28, 31, 34, 0.12);

	background: var(--tkt-steel-white);
	padding: 72px 24px;
	box-sizing: border-box;
}

.tkt-services * {
	box-sizing: border-box;
}

.tkt-services__inner {
	max-width: 1180px;
	margin: 0 auto;
}

/* ---------- Header ---------- */

.tkt-services__head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 48px;
}

.tkt-services__eyebrow {
	display: inline-block !important;
	font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace !important;
	font-size: 12px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--tkt-steel-blue) !important;
	margin: 0 0 10px !important;
}

.tkt-services__heading {
	all: unset;
	display: block;
	font-family: var(--tms-font-display) !important;
	font-weight: 700 !important;
	font-size: clamp(30px, 4vw, 42px) !important;
	line-height: 1.1 !important;
	letter-spacing: 0.01em !important;
	text-transform: uppercase !important;
	color: var(--tkt-charcoal) !important;
	margin: 0 0 14px !important;
}

.tkt-services__intro {
	font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
	font-size: 16px !important;
	line-height: 1.6 !important;
	color: rgba(28, 31, 34, 0.72) !important;
	margin: 0 !important;
}

/* Measuring-tape tick-rule divider under the heading block */
.tkt-tick-rule {
	display: block;
	width: 220px;
	height: 14px;
	margin: 28px auto 0;
	background-image:
		repeating-linear-gradient(
			to right,
			var(--tkt-charcoal) 0 1.5px,
			transparent 1.5px 11px
		),
		repeating-linear-gradient(
			to right,
			var(--tkt-amber) 0 1.5px,
			transparent 1.5px 33px
		);
	background-size: 100% 8px, 100% 14px;
	background-position: top, bottom;
	background-repeat: repeat-x;
	opacity: 0.9;
}

/* Left-aligned variant, used under the single service page title */
.tkt-tick-rule--left {
	margin: 20px 0 0;
}

.tkt-services__empty {
	display: block;
	font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
	text-align: center;
	color: rgba(28, 31, 34, 0.55) !important;
	border: 1px dashed var(--tkt-line);
	padding: 24px;
	border-radius: 2px;
}

/* ---------- Grid ---------- */

.tkt-services__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

@media (max-width: 980px) {
	.tkt-services__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.tkt-services__grid {
		grid-template-columns: 1fr;
	}
	.tkt-services {
		padding: 48px 16px;
	}
}

/* ---------- Card ---------- */

.tkt-card {
	all: unset !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	position: relative;
	background: #fff !important;
	border: 1px solid var(--tkt-line) !important;
	border-top: 3px solid var(--tkt-charcoal) !important;
	border-radius: 2px;
	padding: 28px 24px 24px !important;
	cursor: pointer;
	transition: border-top-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 1px 2px rgba(28, 31, 34, 0.04);
}

.tkt-card:hover,
.tkt-card:focus-visible {
	border-top-color: var(--tkt-amber) !important;
	transform: translateY(-3px);
	box-shadow: 0 14px 28px -18px rgba(28, 31, 34, 0.35);
}

.tkt-card:focus-visible {
	outline: 2px solid var(--tkt-steel-blue) !important;
	outline-offset: 3px;
}

.tkt-card__icon {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--tkt-line);
	border-radius: 2px;
	color: var(--tkt-steel-blue);
	margin-bottom: 18px;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tkt-card__icon svg {
	width: 26px;
	height: 26px;
}

.tkt-card:hover .tkt-card__icon {
	background: var(--tkt-charcoal);
	border-color: var(--tkt-charcoal);
	color: var(--tkt-amber);
}

.tkt-card__title {
	all: unset;
	display: block;
	font-family: var(--tms-font-display) !important;
	font-weight: 600 !important;
	font-size: 21px !important;
	line-height: 1.2 !important;
	color: var(--tkt-charcoal) !important;
	margin: 0 0 10px !important;
}

.tkt-card__desc {
	font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
	font-size: 14.5px !important;
	line-height: 1.55 !important;
	color: rgba(28, 31, 34, 0.68) !important;
	margin: 0 0 20px !important;
	flex-grow: 1;
}

.tkt-card__cta {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace !important;
	font-size: 12.5px !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--tkt-charcoal) !important;
	border-top: 1px solid var(--tkt-line);
	padding-top: 14px;
	width: 100%;
}

.tkt-card__arrow {
	width: 16px;
	height: 16px;
	color: var(--tkt-amber);
	transition: transform 0.2s ease;
}

.tkt-card:hover .tkt-card__arrow {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.tkt-card,
	.tkt-card__icon,
	.tkt-card__arrow {
		transition: none !important;
	}
	.tkt-card:hover {
		transform: none;
	}
}

/* =========================================================================
   Sidebar submenu ("Kõrvalmenüü") - placed on individual service pages so
   the other services stay reachable while reading one of them.
   ========================================================================= */

.tkt-submenu {
	--tkt-steel-white: #F2F3EF;
	--tkt-charcoal: #1C1F22;
	--tkt-amber: #E3A008;
	--tkt-steel-blue: #3D5A73;
	--tkt-line: rgba(28, 31, 34, 0.12);

	display: block;
	background: #fff;
	border: 1px solid var(--tkt-line);
	border-top: 3px solid var(--tkt-charcoal);
	border-radius: 2px;
	padding: 22px 22px 12px;
	box-sizing: border-box;
	max-width: 320px;
}

.tkt-submenu__heading {
	display: block;
	font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace !important;
	font-size: 12px !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--tkt-steel-blue) !important;
	margin: 0 0 12px !important;
}

.tkt-submenu__rule {
	display: block;
	height: 8px;
	margin: 0 0 10px;
	background-image: repeating-linear-gradient(
		to right,
		var(--tkt-charcoal) 0 1.5px,
		transparent 1.5px 11px
	);
	background-size: 100% 8px;
	background-repeat: repeat-x;
	opacity: 0.8;
}

.tkt-submenu__list {
	all: unset;
	display: block;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tkt-submenu__item {
	all: unset;
	display: block;
	list-style: none !important;
	border-bottom: 1px solid var(--tkt-line);
}

.tkt-submenu__item::before,
.tkt-submenu__item::marker {
	content: none !important;
}

.tkt-submenu__item:last-child {
	border-bottom: none;
}

.tkt-submenu__item a {
	all: unset !important;
	display: block !important;
	font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	color: var(--tkt-charcoal) !important;
	padding: 12px 4px 12px 14px !important;
	border-left: 3px solid transparent !important;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.tkt-submenu__item a:hover,
.tkt-submenu__item a:focus-visible {
	color: var(--tkt-steel-blue) !important;
	border-left-color: var(--tkt-steel-blue) !important;
	padding-left: 18px !important;
}

.tkt-submenu__item.is-active a {
	color: var(--tkt-charcoal) !important;
	font-weight: 600 !important;
	border-left-color: var(--tkt-amber) !important;
}

@media (max-width: 780px) {
	.tkt-submenu {
		max-width: none;
	}
}

/* =========================================================================
   Single service page (auto-rendered via templates/single-tkt-teenus.php)
   Sidebar submenu + content, in the site's own header/footer.
   ========================================================================= */

.tkt-service-page {
	--tkt-steel-white: #F2F3EF;
	--tkt-charcoal: #1C1F22;
	--tkt-amber: #E3A008;
	--tkt-steel-blue: #3D5A73;
	--tkt-line: rgba(28, 31, 34, 0.12);

	background: var(--tkt-steel-white);
	padding: 56px 24px 88px;
	box-sizing: border-box;
}

.tkt-service-page * {
	box-sizing: border-box;
}

.tkt-service-page__inner {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 40px;
	align-items: start;
}

@media (max-width: 780px) {
	.tkt-service-page__inner {
		grid-template-columns: 1fr;
	}
	.tkt-service-page {
		padding: 40px 16px 64px;
	}
}

.tkt-service-page__sidebar {
	position: sticky;
	top: 24px;
}

@media (max-width: 780px) {
	.tkt-service-page__sidebar {
		position: static;
	}
}

.tkt-service-page__title {
	all: unset;
	display: block;
	font-family: var(--tms-font-display) !important;
	font-weight: 700 !important;
	font-size: clamp(30px, 4vw, 42px) !important;
	line-height: 1.1 !important;
	text-transform: uppercase !important;
	color: var(--tkt-charcoal) !important;
	margin: 6px 0 0 !important;
}

.tkt-service-page__body {
	margin-top: 32px;
	font-family: 'IBM Plex Sans', system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: rgba(28, 31, 34, 0.82);
	max-width: 68ch;
}

.tkt-service-page__body p {
	margin: 0 0 20px;
}

.tkt-service-page__body h2 {
	font-family: var(--tms-font-display);
	font-weight: 700;
	font-size: 26px;
	text-transform: uppercase;
	color: var(--tkt-charcoal);
	margin: 36px 0 14px;
}

.tkt-service-page__body h3 {
	font-family: var(--tms-font-display);
	font-weight: 600;
	font-size: 21px;
	color: var(--tkt-charcoal);
	margin: 28px 0 12px;
}

.tkt-service-page__body ul,
.tkt-service-page__body ol {
	margin: 0 0 20px;
	padding-left: 22px;
}

.tkt-service-page__body li {
	margin-bottom: 8px;
}

.tkt-service-page__body a {
	color: var(--tkt-steel-blue) !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tkt-service-page__body a:hover {
	color: var(--tkt-charcoal) !important;
}

.tkt-service-page__body img {
	max-width: 100%;
	height: auto;
	border-radius: 2px;
	margin: 8px 0 20px;
}

.tkt-service-page__body blockquote {
	margin: 24px 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--tkt-amber);
	color: rgba(28, 31, 34, 0.68);
	font-style: italic;
}

/* ---------- Pricing tables ---------- */

.tkt-service-page__body .tkt-table-wrap {
	overflow-x: auto;
	margin: 0 0 28px;
	border: 1px solid var(--tkt-line);
	border-radius: 2px;
	background: #fff;
	-webkit-overflow-scrolling: touch;
}

.tkt-service-page__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	font-family: 'IBM Plex Sans', system-ui, sans-serif;
	min-width: 720px;
}

.tkt-service-page__body thead th {
	background: var(--tkt-charcoal);
	color: var(--tkt-steel-white);
	font-family: var(--tms-font-display);
	font-weight: 600;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-align: left;
	padding: 10px 14px;
}

.tkt-service-page__body td,
.tkt-service-page__body th {
	padding: 9px 14px;
	border-bottom: 1px solid var(--tkt-line);
	vertical-align: top;
	text-align: left;
}

.tkt-service-page__body tbody tr:nth-child(even) {
	background: rgba(61, 90, 115, 0.045);
}

.tkt-service-page__body tbody tr:last-child td {
	border-bottom: none;
}

.tkt-service-page__body td.tkt-price,
.tkt-service-page__body th.tkt-price {
	white-space: nowrap;
	font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
	color: var(--tkt-charcoal);
}

.tkt-service-page__body td.tkt-spec-list {
	font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
	font-size: 12.5px;
	line-height: 1.7;
	color: rgba(28, 31, 34, 0.75);
	white-space: normal;
}

.tkt-service-page__body small {
	color: rgba(28, 31, 34, 0.6);
	font-size: 0.85em;
}

/* Editorial / proofreading callouts left in seeded content */
.tkt-service-page__body .tkt-editor-note {
	font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
	font-size: 12.5px;
	background: var(--tkt-steel-white);
	border: 1px dashed rgba(28, 31, 34, 0.3);
	padding: 12px 14px;
	color: var(--tkt-steel-blue);
	margin: 0 0 24px;
}

/* ---------- Package tier cards (Pronks / Hõbe / Kuld) ---------- */

.tkt-tier-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 20px 0 28px;
}

@media (max-width: 640px) {
	.tkt-tier-grid {
		grid-template-columns: 1fr;
	}
}

.tkt-tier {
	background: #fff;
	border: 1px solid var(--tkt-line);
	border-top: 3px solid var(--tkt-steel-blue);
	border-radius: 2px;
	padding: 20px;
}

.tkt-tier--gold {
	border-top-color: var(--tkt-amber);
}

.tkt-tier__name {
	display: block;
	font-family: var(--tms-font-display);
	font-weight: 700;
	font-size: 20px;
	text-transform: uppercase;
	color: var(--tkt-charcoal);
}

.tkt-tier__price {
	display: block;
	font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
	font-size: 15px;
	color: var(--tkt-steel-blue);
	margin: 4px 0 14px;
}

.tkt-tier--gold .tkt-tier__price {
	color: var(--tkt-amber);
}

.tkt-tier ul {
	margin: 0 !important;
	padding-left: 18px;
	font-size: 14px;
	line-height: 1.55;
}

.tkt-tier li {
	margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════
   TEENUSTE RUUDUSTIK MAKETI JÄRGI (11.09.2026, tagasiside PDF lk 1)

   Neli erinevust senisest:
     1. kaart oli PÜSTINE (ikoon, pealkiri, tekst, nool üksteise all)
        -> RÕHTNE: ikoon vasakul, tekst paremal
     2. päises oli „Tööriistakeskus" eyebrow + sissejuhatus + kriipsujoon
        -> maketil on ainult pealkiri „Teenused"
     3. kaardil oli „Loe lähemalt →" nool -> maketil ei ole
     4. kaart oli valge äärisega -> hele sinakashall, ääriseta

   Markup jääb PUUTUMATA — kõik peidetud osad on `display:none`, mitte
   kustutatud, seega vana kujundus on ühe CSS-ploki eemaldamisega tagasi.
   ══════════════════════════════════════════════════════════════════════ */

.tkt-services__eyebrow,
.tkt-services__intro,
.tkt-tick-rule,
.tkt-card__cta { display: none !important; }

.tkt-services__head { margin-bottom: 16px; }

.tkt-services__heading {
	/* Taepselt samad vaeaertused mis .tkc-popular-head („Populaarsed
	   kategooriad") — 25px ja letter-spacing -0.01em, mitte 26px/0. */
	font-family: 'IBM Plex Sans', sans-serif !important;
	font-size: 25px !important;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none !important;
	letter-spacing: -0.01em;
	color: #123F6E;
	margin: 0;
	text-align: left;
}

.tkt-services__grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 16px !important;
}

.tkt-card {
	/* ⚠ RUUDUSTIK, MITTE `flex-direction:row`. Kaardil on NELI lameda
	   tasandi last (ikoon, h3, p, cta) — reana laoks flex nad KOIK
	   korvuti, seega kirjeldus satuks pealkirja korvale, mitte alla.
	   Grid annab: ikoon vasakus veerus ule kahe rea, pealkiri ja
	   kirjeldus paremas veerus uksteise all — nagu maketil. */
	display: grid !important;
	grid-template-columns: auto 1fr !important;
	column-gap: 16px !important;
	row-gap: 3px !important;
	align-items: start !important;
	background: #EDF2F8 !important;
	border: none !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	padding: 20px !important;
	text-align: left !important;
	transition: background .15s ease;
}
.tkt-card:hover { background: #E3EBF4 !important; transform: none !important; }

.tkt-card__icon {
	flex: 0 0 auto !important;
	width: 42px !important;
	height: 42px !important;
	margin: 0 !important;
	background: none !important;
	border: none !important;
	color: #123F6E !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	/* Ikoon hoiab vasakut veergu ja ulatub ule MOLEMA rea. */
	grid-column: 1 !important;
	grid-row: 1 / span 2 !important;
	align-self: center !important;
}
.tkt-card__icon svg { width: 100% !important; height: 100% !important; }
.tkt-card__title { grid-column: 2 !important; grid-row: 1 !important; }
.tkt-card__desc  { grid-column: 2 !important; grid-row: 2 !important; }

.tkt-card__title {
	font-family: 'IBM Plex Sans', sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: #123F6E !important;
	margin: 0 0 4px !important;
}
.tkt-card__desc {
	font-family: 'IBM Plex Sans', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: #5A6472 !important;
	margin: 0 !important;
}

@media (max-width: 1024px) {
	.tkt-services__grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
	.tkt-services__grid { grid-template-columns: 1fr !important; }
	.tkt-services__heading { font-size: 21px !important; }
}

/* ═══ TAUSTARIBA NAGU „POPULAARSED KATEGOORIAD" (11.09.2026) ═══
   Sama toon (#F6F8FB) JA sama laius — taust järgib Divi rida, täpselt
   nagu kategooriate riba. */
.tkt-services {
	/* ⚠ 100vw VALJAMURRE EEMALDATUD 11.09.2026.
	   Ehitasin selle eeldusel, et „Populaarsed kategooriad" riba on
	   taislaiuses. EI OLE: .tkc-wrap-il ei ole max-width'i, aga ta on
	   Divi rea SEES, mis annab talle laiusepiirangu. Minu valjamurre
	   tegi need kolm riba seega EESKUJUST LAIEMAKS, mitte samaks.
	   Tavaline background jargib nuud sama Divi rida. */
	background: #F6F8FB;
	padding-top: 34px;
	padding-bottom: 38px;
}

/* ═══════════════════════════════════════════════════════════════════════
   PÄIS NAGU „SOODUSTOOTED" / „UUED TOOTED" (11.09.2026)

   MIKS SEE „IMELIK" VÄLJA NÄGI. Ma olin varem ühtlustanud ainult
   PEALKIRJA FONDI (25px / -0.01em / navy), aga mitte päise ÜLESEHITUST.
   Renderdatud lehelt loetuna on siin päises neli elementi, mida kahel
   teisel sektsioonil EI OLE ühtegi:

       <span class="tkt-services__eyebrow">Tööriistakeskus</span>   ← silt üleval
       <h2  class="tkt-services__heading">Teenused</h2>
       <p   class="tkt-services__intro">Lisaks tööriistade...</p>
       <span class="tkt-tick-rule">                                  ← kriips all

   Lisaks on `.tkt-services__head` `text-align:center` ja `max-width:640px;
   margin:0 auto` — ehk kitsas KESKELE joondatud plokk, samal ajal kui
   „Soodustooted" ja „Uued tooted" on lihtne VASAKULE joondatud pealkirjarida.
   Font oli sama, ülesehitus täiesti erinev — sellest mulje.
   ═══════════════════════════════════════════════════════════════════════ */

.tkt-services .tkt-services__head {
	text-align: left !important;
	max-width: none !important;
	margin: 0 0 18px !important;   /* sama, mis .msp-sale-header */
}

/* Silt „Tööriistakeskus" ja kaunistuskriips — puhas dekoratsioon, kahel
   teisel sektsioonil vastet ei ole. Peidame, ei kustuta. */
.tkt-services .tkt-services__eyebrow,
.tkt-services .tkt-tick-rule {
	display: none !important;
}

/* ⚠ SISSEJUHATAV TEKST JÄETI ALLES, ainult vasakule joondatud ja väiksem.
   „Soodustoodetel" ja „Uutel toodetel" seda vastet ei ole, seega TÄPSEKS
   koopiaks tuleks see peita. AGA see on päris sisu, mille keegi on adminis
   kirjutanud — selle vaikne kaotamine muudaks seda, mida leht ÜTLEB, mitte
   ainult seda, kuidas ta välja näeb. Peitmiseks piisab ühest reast:
       .tkt-services .tkt-services__intro { display: none !important; } */
.tkt-services .tkt-services__intro {
	text-align: left !important;
	font-size: 14.5px !important;
	margin: 6px 0 0 !important;
	max-width: 760px;
}

/* Sisuala laius TÄPSELT nagu .msp-sale-wrap / .mnp-new-wrap (max-width
   1240px + 24px külgpolster). Praegusel Divi real (max-width 1080px) annavad
   mõlemad sama 1032px sisulaiuse, seega täna see midagi ei muuda — aga kui
   rida kunagi laiemaks tehakse, jäävad sektsioonid ikka joonde. */
.tkt-services {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
}
.tkt-services .tkt-services__inner {
	max-width: none !important;
	padding: 0 !important;
}

/* ═══ PEALKIRI JÄÄB TAUSTAST VÄLJA (11.09.2026) ═══
   Kasutaja soov: hall riba katab ainult kaardid, pealkiri jääb sellest
   välja — valgel lehetaustal.

   Seetõttu kolib `background` sektsioonilt RUUDUSTIKULE. `margin: 0 -24px`
   laseb ribal ulatuda sektsiooni külgpolstrist läbi, nii et riba laius
   jääb TÄPSELT samaks, mis enne (kogu Divi rida), aga kaardid ise jäävad
   endisele joonele. Ilma negatiivse marginita jääks riba 48px kitsamaks
   kui varem ja ei ühtiks enam teiste sektsioonidega. */
.tkt-services {
	background: none !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.tkt-services .tkt-services__grid {
	background: #F6F8FB;
	padding: 26px 24px 30px !important;
	margin: 0 -24px !important;
}
@media (max-width: 900px) {
	.tkt-services .tkt-services__grid {
		padding: 20px 16px 22px !important;
		margin: 0 -16px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   AVALEHE SEKTSIOONIDE VAHED KOMPAKTSEMAKS (14.09.2026)

   MÕÕTSIN enne muutmist, kust vahed tegelikult tulevad. Avalehe kõik viis
   sektsiooni on ÜHE Divi rea (`et_pb_row_0`) sees eraldi `et_pb_code`
   moodulitena, ja lehe enda inline-CSS ütleb:

       .et_pb_code_0, _1, _2, _3, _4 { margin-top:0!important;
                                       margin-bottom:0!important;
                                       padding-top:0; padding-bottom:0 }

   ⚠ SEEGA DIVI EI ANNA VAHEDESSE ÜHTEGI PIKSLIT. Kogu vahe tuli MEIE ENDA
   ümbriste püstpolstrist. Divi seadetes nokitsemine poleks midagi muutnud.

   Mõõdetud vahed sektsioonide VAHEL (alumine + järgmise ülemine):
       kategooriad -> bännerid   38 + 32 = 70px
       bännerid    -> soodus     32 + 34 = 66px
       soodus      -> uued       38 + 34 = 72px
       uued        -> teenused   38 +  0 = 64px  (+ ruudustiku 26px)

   Uus skeem: 20px üleval / 22px all igal sektsioonil -> vahe 42px
   (mobiilis 14/16 -> 30px). Ühtlane, mitte iga sektsioon isemoodi.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sektsioonil endal taust puudub (see on ruudustikul, et pealkiri jääks
   taustast välja) — ülemine polster annab pealkirjale ruumi. */
.tkt-services{ padding-top:20px !important; padding-bottom:22px !important; }
.tkt-services .tkt-services__grid{ padding:20px 24px 24px !important; }
@media (max-width:900px){
  .tkt-services{ padding-top:14px !important; padding-bottom:16px !important; }
  .tkt-services .tkt-services__grid{ padding:16px 16px 18px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEENUSTE PEALKIRI — !important PARANDUS (14.09.2026)

   ⚠ MINU VAREM ÜLEKIRJUTUS EI HAKANUD OSALISELT ÜLDSE KEHTIMA.
   Baasreegel (selle faili rida 50) paneb `!important` KÕIGILE omadustele:

       color: var(--tkt-charcoal) !important;   ehk must #1C1F22
       letter-spacing: 0.01em !important;
       line-height: 1.1 !important;
       margin: 0 0 14px !important;

   Minu hilisem reegel (rida 630) kirjutas neist neljast ainult
   `font-family`, `font-size` ja `text-transform` `!important`-iga. Ülejäänud
   jäid ilma. CSS-i reegel on, et `!important` VÕIDAB tavalise deklaratsiooni
   üle SÕLTUMATA järjekorrast — hilisem tavaline reegel ei saa varasemat
   `!important` reeglit üle kirjutada.

   Tagajärg: pealkiri oli SUURUSELT ja FONDILT õige, aga VÄRVILT must kogu
   aeg. Ma raporteerisin selle tehtuks, kontrollimata, kas värv päriselt
   rakendus — kontrollisin ainult, et reegel on failis olemas. Reegli
   olemasolu failis ei ole sama, mis reegli kehtimine lehel.

   Nüüd on kõigil neljal `!important` ja väärtused vastavad täpselt
   `.tkc-popular-head` omadele („Populaarsed kategooriad") ning
   `.tkb-strip-title` omadele („Usaldatud kaubamärgid").
   ═══════════════════════════════════════════════════════════════════════════ */
.tkt-services .tkt-services__heading {
	color: #123F6E !important;
	letter-spacing: -0.01em !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	margin: 0 !important;
}

/* HOIATUS: CSS-il EI OLE pesastatud kommentaare.
   Kommentaari sees olev teine kommentaari-alustus ei alusta midagi, AGA
   esimene sulgev margijada LOPETAB kogu kommentaari. Ulejaanud tekst valgub
   CSS-i sisse prugina ja rikub JARGMISE reegli.

   Tapselt see juhtus siin 14.09.2026: pealkirja varvireegel oli failis
   olemas ja nagi oige, aga brauser ei joudnud selleni kunagi, sest
   kommentaar oli lopetatud 12 rida varem kui ma arvasin.

   Kui tahad kommentaaris koodinaidet, kirjuta see ILMA kommentaarimarkideta. */

/* ═══════════════════════════════════════════════════════════════════════════
   TEENUSE KONTAKTIVORM (14.09.2026)
   Kuvatakse teenuse sisulehe lopus. Sisse-valja administ: uldine lyliti
   (Teenused -> Kontaktivorm) ja iga teenuse oma markeruut.
   ═══════════════════════════════════════════════════════════════════════════ */

.tkt-form {
	margin: 40px 0 0;
	padding: 26px 24px 28px;
	background: #F6F8FB;
	border-radius: 10px;
	box-sizing: border-box;
}

.tkt-form__title {
	margin: 0 0 8px !important;
	font-family: 'IBM Plex Sans', sans-serif !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	color: #123F6E !important;
}

.tkt-form__intro {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(28, 31, 34, 0.78);
}

/* ── Teated ─────────────────────────────────────────────────────────────── */
.tkt-form__notice {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.5;
}
.tkt-form__notice--ok {
	background: #E6EFE4;
	border-left: 4px solid #4B7F52;
	color: #24421F;
	margin-bottom: 0;
}
.tkt-form__notice--err {
	background: #F7E3E1;
	border-left: 4px solid #B23A34;
	color: #5A1E1A;
}
.tkt-form__notice p { margin: 0 0 4px; }
.tkt-form__notice p:last-child { margin-bottom: 0; }

/* ── Vali ───────────────────────────────────────────────────────────────
   Kaks veergu; pikk tekst ja markeruut ule kogu laiuse. */
.tkt-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 18px;
}
.tkt-form__row {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.tkt-form__row--wide { grid-column: 1 / -1; }

.tkt-form__row label {
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #123F6E;
}
.tkt-form__req { color: #B23A34; }

.tkt-form input[type="text"],
.tkt-form input[type="email"],
.tkt-form input[type="tel"],
.tkt-form select,
.tkt-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 13px;
	border: 1px solid #CFD8E3;
	border-radius: 6px;
	background: #fff;
	font-family: 'IBM Plex Sans', sans-serif;
	/* ⚠ 16px, MITTE VAIKSEM: iOS Safari suumib lehe sisse, kui fookusesse
	   voetud vaelja kirjasuurus on alla 16px. Vorm on mobiilis peamine
	   kasutuskoht, seega see ei ole pisiasi. */
	font-size: 16px;
	line-height: 1.4;
	color: #1C1F22;
}
.tkt-form textarea { resize: vertical; min-height: 120px; }

.tkt-form input:focus,
.tkt-form select:focus,
.tkt-form textarea:focus {
	outline: 2px solid #123F6E;
	outline-offset: 1px;
	border-color: #123F6E;
}

.tkt-form__check {
	flex-direction: row !important;
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-weight: 500 !important;
	color: #1C1F22 !important;
}
.tkt-form__check input { margin-top: 3px; flex: 0 0 auto; }

/* ── Nupp ───────────────────────────────────────────────────────────────── */
.tkt-form__actions { margin: 18px 0 0; }
.tkt-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 26px;
	border: 0;
	border-radius: 8px;
	background: #123F6E;
	color: #fff;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease;
}
.tkt-form__submit:hover,
.tkt-form__submit:focus { background: #0A2A5A; color: #fff; }

/* ── Robotiloks ─────────────────────────────────────────────────────────
   ⚠ EI OLE `display:none`. Osa roboteid jaetab peidetud vaeljad tahtlikult
   vahele ja loks ei tooetaks. Ekraanilt vaelja viimine hoiab vaelja
   „olemasolevaks", aga inimene seda ei nae ega saa kogemata taeita. */
.tkt-form__hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

@media (max-width: 640px) {
	.tkt-form { padding: 20px 16px 22px; border-radius: 8px; }
	.tkt-form__grid { grid-template-columns: 1fr; }
	.tkt-form__title { font-size: 20px !important; }
	.tkt-form__submit { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   "SELGE JA RAHULIK" — TEENUSED (19.09.2026, kliendi soov: teenused sobivamaks
   sisselogimise ja registreerimise disainiga)

   Sama keel mis Minu konto / registreerimine / Meist: valged kaardid, õhuke
   #E3E3DF äär, 20px nurgad, pehme vari, teraseksinine aktsent #4C6B8A,
   IBM Plex Sans tekst ja Barlow Condensed pealkirjad.

   Skoop: teenuste ÜLEVAATE leht (/teenused/) ja ÜKSIKUD teenuse lehed.
   AVALEHE „Teenused" sektsioon (body.home) jääb samaks, sest see peab
   sobima teiste avalehe sektsioonidega (Soodustooted, Uued tooted).
   Markup on puutumata; vana kujundus tuleb tagasi selle ploki eemaldamisega.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Üksik teenuse leht ─────────────────────────────────────────────── */
.tkt-service-page {
	background: #fff !important;
	padding: clamp(24px, 4vw, 48px) 24px clamp(48px, 8vw, 88px) !important;
}
.tkt-service-page__inner {
	max-width: 1120px !important;
	grid-template-columns: 280px minmax(0, 1fr) !important;
	gap: 24px !important;
}

/* Kõrvalmenüü kaart */
.tkt-submenu {
	background: #fff !important;
	border: 1px solid #E3E3DF !important;
	border-top: 1px solid #E3E3DF !important;
	border-radius: 20px !important;
	box-shadow: 0 1px 2px rgba(30, 34, 40, .04), 0 24px 48px -24px rgba(30, 34, 40, .16);
	padding: 22px 16px 14px !important;
}
.tkt-submenu__heading {
	font-family: 'IBM Plex Sans', sans-serif !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	letter-spacing: .12em !important;
	color: #4C6B8A !important;
	margin: 0 0 10px 10px !important;
}
.tkt-submenu__rule { display: none !important; }
.tkt-submenu__item { border-bottom: none !important; margin-bottom: 2px; }
.tkt-submenu__item a {
	font-family: 'IBM Plex Sans', sans-serif !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	color: #23262B !important;
	padding: 11px 14px !important;
	border-left: none !important;
	border-radius: 10px !important;
	transition: background .15s ease, color .15s ease !important;
}
.tkt-submenu__item a:hover,
.tkt-submenu__item a:focus-visible {
	background: #F6F8FB !important;
	color: #3D5670 !important;
	padding-left: 14px !important;
}
.tkt-submenu__item.is-active a {
	background: #E7EDF2 !important;
	color: #3D5670 !important;
	font-weight: 600 !important;
}

/* Sisukaart */
.tkt-service-page__content {
	background: #fff;
	border: 1px solid #E3E3DF;
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(30, 34, 40, .04), 0 24px 48px -24px rgba(30, 34, 40, .16);
	padding: clamp(24px, 4.5vw, 44px);
	min-width: 0;
}
.tkt-service-page__title {
	font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
	font-weight: 600 !important;
	font-size: clamp(2.1rem, 5vw, 2.7rem) !important;
	line-height: 1.05 !important;
	letter-spacing: .005em !important;
	text-transform: none !important;
	color: #23262B !important;
	margin: 0 !important;
}
.tkt-service-page__body {
	margin-top: 18px !important;
	max-width: none !important;
	font-size: 15px !important;
	font-weight: 500;
	line-height: 1.7 !important;
	color: #5B6168 !important;
}
.tkt-service-page__body h2,
.tkt-service-page__body h3 {
	font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: .005em;
	color: #23262B !important;
}
.tkt-service-page__body h2 { font-size: 1.75rem !important; }
.tkt-service-page__body h3 { font-size: 1.35rem !important; }
.tkt-service-page__body a { color: #3D5670 !important; text-decoration-color: #4C6B8A; }
.tkt-service-page__body a:hover { color: #23262B !important; }
.tkt-service-page__body img { border-radius: 14px !important; }
.tkt-service-page__body blockquote {
	border-left: 3px solid #4C6B8A !important;
	background: #F6F8FB;
	border-radius: 0 12px 12px 0;
	padding: 12px 18px !important;
	font-style: normal !important;
}

/* Hinnatabelid */
.tkt-service-page__body .tkt-table-wrap {
	border: 1px solid #E3E3DF !important;
	border-radius: 14px !important;
	box-shadow: none;
}
.tkt-service-page__body thead th {
	background: #E7EDF2 !important;
	color: #3D5670 !important;
	font-family: 'IBM Plex Sans', sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	padding: 12px 14px !important;
}
.tkt-service-page__body td,
.tkt-service-page__body th { border-bottom: 1px solid #E3E3DF !important; font-size: 14px; }
.tkt-service-page__body tbody tr:nth-child(even) { background: #F6F8FB !important; }
.tkt-service-page__body td.tkt-price,
.tkt-service-page__body th.tkt-price,
.tkt-service-page__body td.tkt-spec-list {
	font-family: 'IBM Plex Sans', sans-serif !important;
	font-variant-numeric: tabular-nums;
}
.tkt-service-page__body td.tkt-price { font-weight: 600; color: #23262B !important; }

/* Hoolduspaketid */
.tkt-tier {
	background: #F6F8FB !important;
	border: 1px solid #E3E3DF !important;
	border-radius: 14px !important;
	padding: 22px !important;
}
.tkt-tier--gold { background: #E7EDF2 !important; border-color: #C7D4E0 !important; }
.tkt-tier__name {
	font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
	font-weight: 600 !important;
	font-size: 1.4rem !important;
	text-transform: none !important;
	color: #23262B !important;
}
.tkt-tier__price,
.tkt-tier--gold .tkt-tier__price {
	font-family: 'IBM Plex Sans', sans-serif !important;
	font-weight: 600;
	color: #3D5670 !important;
}

/* Kontaktivorm — pehme alamkaart, aktsentnupp */
.tkt-form {
	background: #F6F8FB !important;
	border: 1px solid #E3E3DF;
	border-radius: 14px !important;
	margin-top: 32px !important;
}
.tkt-form__title {
	font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
	font-size: 1.6rem !important;
	font-weight: 600 !important;
	letter-spacing: .005em !important;
	color: #23262B !important;
}
.tkt-form__intro { color: #5B6168 !important; }
.tkt-form__row label { color: #23262B !important; }
.tkt-form input[type="text"],
.tkt-form input[type="email"],
.tkt-form input[type="tel"],
.tkt-form select,
.tkt-form textarea {
	border: 1px solid #E3E3DF !important;
	border-radius: 10px !important;
	color: #23262B !important;
}
.tkt-form input:focus,
.tkt-form select:focus,
.tkt-form textarea:focus {
	outline: 2px solid #4C6B8A !important;
	border-color: #4C6B8A !important;
}
.tkt-form__check { color: #23262B !important; }
.tkt-form__submit {
	background: #4C6B8A !important;
	border-radius: 10px !important;
	font-weight: 600 !important;
}
.tkt-form__submit:hover,
.tkt-form__submit:focus { background: #3D5670 !important; }
.tkt-form__notice { border-radius: 10px !important; }

@media (max-width: 780px) {
	.tkt-service-page { padding: 20px 12px 56px !important; }
	.tkt-service-page__inner { grid-template-columns: 1fr !important; }
	.tkt-service-page__content { padding: 22px 18px; }
}

/* ── Teenuste ülevaate leht (mitte avaleht) ──────────────────────────── */
body:not(.home) .tkt-services .tkt-services__grid {
	background: none !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 16px !important;
}
body:not(.home) .tkt-services {
	padding-top: clamp(24px, 4vw, 48px) !important;
	padding-bottom: clamp(48px, 8vw, 88px) !important;
}
body:not(.home) .tkt-services .tkt-services__head { margin-bottom: 22px !important; }
body:not(.home) .tkt-services .tkt-services__heading {
	font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
	font-weight: 600 !important;
	font-size: clamp(2.1rem, 5vw, 2.7rem) !important;
	line-height: 1.05 !important;
	letter-spacing: .005em !important;
	color: #23262B !important;
}
body:not(.home) .tkt-services .tkt-card {
	background: #fff !important;
	border: 1px solid #E3E3DF !important;
	border-radius: 20px !important;
	box-shadow: 0 1px 2px rgba(30, 34, 40, .04), 0 24px 48px -24px rgba(30, 34, 40, .16) !important;
	padding: 24px !important;
	column-gap: 16px !important;
	transition: border-color .15s ease, box-shadow .15s ease !important;
}
body:not(.home) .tkt-services .tkt-card:hover {
	background: #fff !important;
	border-color: #C7D4E0 !important;
	box-shadow: 0 1px 2px rgba(30, 34, 40, .04), 0 28px 52px -24px rgba(61, 86, 112, .28) !important;
}
body:not(.home) .tkt-services .tkt-card__icon {
	width: 46px !important;
	height: 46px !important;
	border-radius: 50% !important;
	background: #E7EDF2 !important;
	color: #3D5670 !important;
	padding: 11px;
}
body:not(.home) .tkt-services .tkt-card__title {
	font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
	font-size: 1.3rem !important;
	font-weight: 600 !important;
	letter-spacing: .005em !important;
	color: #23262B !important;
}
body:not(.home) .tkt-services .tkt-card__desc {
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	color: #5B6168 !important;
}