/* ==========================================================================
   Inner pages: page header, content, cards, forms, contact and support blocks
   ========================================================================== */

.screen-reader {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Page header ---------- */

.page-hero {
	position: relative;
	padding-block: clamp(32px, 5vw, 64px) clamp(28px, 4vw, 48px);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}
.page-hero::before {
	/* The logo's dot grid, fading out from the end edge. */
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 1.5px 1.5px, var(--dot) 1.5px, transparent 0);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(to left, #000, transparent 55%);
	mask-image: linear-gradient(to left, #000, transparent 55%);
	opacity: .7;
	pointer-events: none;
}
[dir="rtl"] .page-hero::before {
	-webkit-mask-image: linear-gradient(to right, #000, transparent 55%);
	mask-image: linear-gradient(to right, #000, transparent 55%);
}
.page-hero .wrap { position: relative; }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; font-size: .88rem; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-inline: 10px; color: var(--line-2); }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink-3); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.page-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; font-size: .9rem; color: var(--ink-3); }
.page-hero__title {
	margin-top: 14px;
	font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem);
	max-width: 24ch;
	line-height: 1.3;
}
html[lang="en"] .page-hero__title { letter-spacing: -.025em; line-height: 1.12; }
.page-hero__lead { margin-top: 16px; max-width: 62ch; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); color: var(--ink-2); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* :not(body): WordPress also puts "tag" on <body> of tag archives. */
.tag:not(body) {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--blue-soft);
	color: var(--blue);
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.5;
}

/* ---------- Layout ---------- */

.page-body { padding-top: clamp(32px, 5vw, 56px); }
.page-body > * + * { margin-top: clamp(32px, 5vw, 56px); }

.layout-aside {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}
.layout-aside > * + * { margin-top: 0; }
.layout-aside__side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 16px; }

.split {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: clamp(20px, 4vw, 48px);
	align-items: start;
}
.split__side { display: grid; gap: 16px; position: sticky; top: calc(var(--header-h) + 24px); }

.lead-media {
	margin: 0 0 32px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	background: #fff;
}
.lead-media img { width: 100%; }
.lead-media--contain img { max-height: 520px; object-fit: contain; }
.lead-media--wide { max-height: 440px; }
.lead-media--wide img { height: 100%; max-height: 440px; object-fit: cover; }

.notice {
	padding: 14px 18px;
	border-inline-start: 3px solid var(--blue);
	border-radius: var(--r-sm);
	background: var(--blue-soft);
	color: var(--ink-2);
}

/* ---------- Rich content ---------- */

.prose { max-width: 76ch; color: var(--ink-2); }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { margin-top: 1.8em; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); color: var(--ink); }
.prose h3 { margin-top: 1.5em; font-size: 1.2rem; color: var(--ink); }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose a { color: var(--blue); }
.prose strong { color: var(--ink); }
.prose ul, .prose ol { padding-inline-start: 0; list-style: none; }
.prose ul li, .prose ol li { position: relative; padding-inline-start: 26px; }
.prose ul li + li, .prose ol li + li { margin-top: .5em; }
.prose ul li::before {
	content: "";
	position: absolute;
	inset-inline-start: 4px;
	top: .75em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--blue);
	box-shadow: 0 0 0 4px var(--blue-soft);
}
.prose ol { counter-reset: li; }
.prose ol li { counter-increment: li; }
.prose ol li::before { content: counter(li) "."; position: absolute; inset-inline-start: 0; font-weight: 700; color: var(--blue); }
.prose figure { margin: 1.6em 0; }
.prose img { border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--line); text-align: start; }
.prose th { background: var(--bg-2); color: var(--ink); }
.prose .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.prose .gallery figure { margin: 0; }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-md); }

/* Long feature lists read better in two columns on wide screens. */
@media (min-width: 900px) {
	.prose ul:has(> li:nth-child(8)) { columns: 2; column-gap: 40px; }
	.prose ul:has(> li:nth-child(8)) li { break-inside: avoid; margin-bottom: .5em; }
	.prose ul:has(> li:nth-child(8)) li + li { margin-top: 0; }
}

/* Original Elementor layouts shown inside the new frame until a page is rewritten. */
.builder-content { color: var(--ink); }
.builder-content .elementor-section.elementor-section-boxed > .elementor-container { max-width: 100%; }
.builder-content img { border-radius: var(--r-md); }

/* ---------- Cards ---------- */

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 20px;
}
.card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	overflow: hidden;
	transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.card:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.card[hidden] { display: none; }
.card__media { display: block; aspect-ratio: 16 / 10; background: var(--bg-2); overflow: hidden; border-bottom: 1px solid var(--line); }
/* Logo-style images sit on white once loaded; until then the placeholder stays soft. */
.card__media--contain img { background: #fff; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card__media--contain img { object-fit: contain; }
.card:hover .card__media img { transform: scale(1.03); }
.card__body { display: grid; gap: 8px; padding: 18px 20px 22px; }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .85rem; color: var(--ink-3); }
.card__title { font-size: 1.1rem; line-height: 1.5; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card__text { font-size: .95rem; color: var(--ink-2); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
	padding: 8px 16px;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	background: transparent;
	font-family: var(--f-ui);
	font-size: .92rem;
	font-weight: 500;
	color: var(--ink-2);
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.related { margin-top: clamp(56px, 8vw, 96px); }
.related .cards { margin-top: 28px; }

/* ---------- Sidebar pieces ---------- */

.help-card, .steps-card {
	display: grid;
	gap: 12px;
	padding: 24px;
	border-radius: var(--r-lg);
	background: var(--bg-2);
}
.help-card__title, .steps-card__title { font-size: 1.15rem; }
.help-card p { color: var(--ink-2); font-size: .95rem; }
.help-card .btn { width: 100%; }
.help-card__phone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding-top: 4px; font-weight: 600; text-decoration: none; color: var(--ink); }
.help-card__phone .tk-icon { color: var(--blue); }
.help-card--wide { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 40px; padding: clamp(24px, 4vw, 40px); }
.help-card--wide .btn { width: auto; }

.side-list { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.side-list__title { font-size: 1rem; margin-bottom: 8px; }
.side-list ul { list-style: none; }
.side-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
	font-size: .93rem;
	text-decoration: none;
	color: var(--ink-2);
}
.side-list li:last-child a { border-bottom: 0; }
.side-list a:hover { color: var(--blue); }
.side-list .tk-icon { flex: none; width: 1em; height: 1em; color: var(--ink-3); }

/* ---------- Forms (Everest Forms and Contact Form 7) ---------- */

.form-card {
	padding: clamp(22px, 3.4vw, 40px);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--shadow);
}
.form-card__title { font-size: 1.35rem; }
.form-card__lead { margin-top: 6px; margin-bottom: 20px; color: var(--ink-2); font-size: .95rem; }

.form-shell { color: var(--ink); }
/* Contact Form 7 stamps its own dir/lang on the form; follow the page instead. */
[dir="rtl"] .form-shell .wpcf7, [dir="rtl"] .form-shell .everest-forms { direction: rtl; text-align: right; }
[dir="ltr"] .form-shell .wpcf7, [dir="ltr"] .form-shell .everest-forms { direction: ltr; text-align: left; }
/* Email and phone numbers are typed left to right, but sit on the reading side. */
[dir="rtl"] .form-shell input[type="email"], [dir="rtl"] .form-shell input[type="tel"] { direction: ltr; text-align: right !important; }
.form-shell .everest-forms .evf-container,
.form-shell .everest-forms { max-width: none; margin: 0; padding: 0; background: none; box-shadow: none; }
/* Everest lays rows out as flex with a more specific selector; the grid has to win or each column shrinks to its content. */
.form-shell .everest-forms .evf-field-container { padding: 0 !important; }
.form-shell .evf-field-container .evf-frontend-row { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; margin: 0 !important; }
.form-shell .evf-field-container .evf-frontend-grid { width: 100% !important; max-width: none !important; min-width: 0; padding: 0 !important; float: none !important; flex: none !important; }
.form-shell .evf-field-description { margin-top: 8px !important; padding: 0 !important; color: var(--ink-3) !important; font-size: .85rem !important; line-height: 1.6; text-align: start; }
.form-shell .evf-field, .form-shell .tk-form p { margin: 0 0 18px !important; padding: 0 !important; }
.form-shell label, .form-shell .evf-label {
	display: block;
	margin-bottom: 8px !important;
	font-family: var(--f-ui);
	font-size: .93rem !important;
	font-weight: 600 !important;
	color: var(--ink) !important;
	text-align: start;
}
.form-shell .tk-form label { display: grid; gap: 8px; margin: 0 !important; }
/* Everest wraps the label text and the required "*" side by side inside one label. */
.form-shell .evf-field-label .evf-label { display: inline !important; margin: 0 !important; }
.form-shell .evf-field-label abbr.required { margin-inline-start: 4px; color: var(--red); text-decoration: none; }
.form-shell input[type="text"],
.form-shell input[type="email"],
.form-shell input[type="tel"],
.form-shell input[type="number"],
.form-shell input[type="url"],
.form-shell select,
.form-shell textarea {
	width: 100% !important;
	min-height: 50px;
	padding: 12px 14px !important;
	border: 1px solid var(--line-2) !important;
	border-radius: var(--r-md) !important;
	background: var(--bg) !important;
	color: var(--ink) !important;
	font: inherit !important;
	font-size: 1rem !important;
	line-height: 1.5 !important;
	box-shadow: none !important;
	transition: border-color .2s, box-shadow .2s;
}
.form-shell textarea { min-height: 140px; resize: vertical; }
.form-shell input:focus, .form-shell select:focus, .form-shell textarea:focus {
	outline: none;
	border-color: var(--blue) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent) !important;
}
.form-shell ::placeholder { color: var(--ink-3); opacity: 1; }

/* Choice lists (products to ask about, number of employees) as tappable chips. */
.form-shell .evf-field-checkbox ul, .form-shell .evf-field-radio ul {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
.form-shell .evf-field-radio ul { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.form-shell .evf-field-checkbox li, .form-shell .evf-field-radio li {
	position: relative;
	display: flex !important;
	align-items: center;
	gap: 12px;
	width: auto !important;
	min-height: 54px;
	/* Everest's "3 columns" layout fixes each choice at a third of the row; the grid decides instead. */
	flex: none !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 12px 16px !important;
	float: none !important;
	border: 1px solid var(--line-2);
	border-radius: var(--r-md);
	background: var(--bg);
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
}
.form-shell .evf-field-checkbox li label, .form-shell .evf-field-radio li label {
	display: block !important;
	flex: 1;
	text-align: start !important;
	margin: 0 !important;
	font-weight: 500 !important;
	font-size: .9rem !important;
	line-height: 1.4;
	cursor: pointer;
}
/* The whole chip toggles its box. */
.form-shell .evf-field-checkbox li label::after, .form-shell .evf-field-radio li label::after { content: ""; position: absolute; inset: 0; }
.form-shell .evf-field-checkbox li:hover, .form-shell .evf-field-radio li:hover { border-color: var(--ink-3); }
.form-shell .evf-field-checkbox li:has(input:checked),
.form-shell .evf-field-radio li:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.form-shell .evf-field-checkbox li:has(input:checked) label,
.form-shell .evf-field-radio li:has(input:checked) label { color: var(--blue) !important; }
.form-shell .evf-field-checkbox input, .form-shell .evf-field-radio input { accent-color: var(--blue); margin: 0 !important; flex: none; width: 18px; height: 18px; }
.form-shell .evf-label .required, .form-shell abbr.required { display: inline !important; margin-inline-start: 4px; color: var(--red); text-decoration: none; border: 0; }

.form-shell button[type="submit"],
.form-shell input[type="submit"],
.form-shell .evf-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: .7em 1.8em !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--red) !important;
	color: var(--red-ink) !important;
	font-family: var(--f-ui) !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background-color .2s;
}
.form-shell button[type="submit"]:hover, .form-shell input[type="submit"]:hover, .form-shell .evf-submit:hover { background: color-mix(in srgb, var(--red) 86%, #000) !important; }
.form-shell .evf-submit-container { padding: 0 !important; text-align: start !important; }

.form-shell .evf-error, .form-shell .wpcf7-not-valid-tip { margin-top: 6px; font-size: .85rem; color: var(--red) !important; }
.form-shell .everest-forms-notice, .form-shell .wpcf7-response-output {
	margin: 18px 0 0 !important;
	padding: 14px 16px !important;
	border: 1px solid var(--line-2) !important;
	border-radius: var(--r-md);
	background: var(--bg-2) !important;
	color: var(--ink) !important;
	font-size: .95rem;
}
.form-shell .everest-forms-notice--success, .form-shell .sent .wpcf7-response-output { border-color: #2E9D63 !important; }
.form-shell .wpcf7-spinner { margin-inline: 12px; }
/* After the form is sent, Everest replaces it with the message; give that state some presence. */
.form-shell .everest-forms-notice--success { margin-top: 0 !important; padding: 18px 20px !important; font-size: 1rem; line-height: 1.8; }
.download-ready { display: grid; justify-items: start; gap: 10px; margin-top: 18px; }
.download-ready p { color: var(--ink-3); font-size: .88rem; }

/* ---------- Contact ---------- */

.contact-list { display: grid; gap: 10px; list-style: none; }
.contact-list li {
	display: flex;
	gap: 14px;
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
}
.contact-list li > span:last-child { display: grid; gap: 2px; }
.contact-list__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 50%;
	background: var(--blue-soft);
	color: var(--blue);
}
.contact-list__label { font-size: .85rem; color: var(--ink-3); }
.contact-list a { font-weight: 600; text-decoration: none; color: var(--ink); }
.contact-list a:hover { color: var(--blue); }
[dir="rtl"] .contact-list a[dir="ltr"] { text-align: right; }

.branches__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.branch { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.branch__map { aspect-ratio: 16 / 9; background: var(--bg-2); }
.branch__map iframe { width: 100%; height: 100%; border: 0; display: block; }
:root[data-mode="dark"] .branch__map iframe { filter: invert(.9) hue-rotate(180deg) saturate(.7); }
.branch__body { display: grid; gap: 8px; padding: 20px 22px 24px; }
.branch__title { font-size: 1.15rem; }
.branch__body p { color: var(--ink-2); }

/* ---------- Support ---------- */

.channels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; }
.channel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
}
.channel__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); }
.channel__icon .tk-icon { width: 24px; height: 24px; }
.channel__title { font-size: 1.15rem; }
.channel p { color: var(--ink-2); font-size: .95rem; }
.channel .link-arrow { margin-top: auto; padding-top: 6px; }
.hours-note { color: var(--ink-3); font-size: .95rem; }

/* ---------- Careers ---------- */

.jobs { display: grid; gap: 10px; margin-top: 24px; list-style: none; }
.job {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
}
.job__title { font-size: 1.1rem; }
.job__title a { text-decoration: none; }
.job__meta { font-size: .88rem; color: var(--ink-3); }

/* ---------- Partners ---------- */

.countries { text-align: center; }
.countries__title { margin-inline: auto; text-align: center; }
.countries__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; list-style: none; }
.countries__list li {
	padding: 10px 20px;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	background: var(--surface);
	font-family: var(--f-display);
	font-weight: 600;
}
.partners { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; gap: 20px; margin-top: 28px; }
.partner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 32px 24px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	text-align: center;
}
.partner__logo { width: 112px; height: 112px; object-fit: contain; padding: 10px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); margin-bottom: 6px; }
.partner__name { font-size: 1.2rem; }
.partner__addr { color: var(--ink-2); font-size: .95rem; max-width: 34ch; }
.partner__phones { display: grid; gap: 6px; list-style: none; }
.partner__phones a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.partner__phones a:hover { color: var(--blue); }
.partner__phones .tk-icon { color: var(--blue); width: 1em; height: 1em; }
.partner__site { margin-top: auto; }

/* ---------- 404 and search ---------- */

.notfound { padding-block: clamp(48px, 9vw, 120px); max-width: 720px; }
.notfound__code {
	font-family: var(--f-display);
	font-size: clamp(5rem, 3rem + 10vw, 10rem);
	font-weight: 800;
	line-height: 1;
	color: transparent;
	background-image: radial-gradient(circle at 3px 3px, var(--blue) 2.6px, transparent 0);
	background-size: 9px 9px;
	-webkit-background-clip: text;
	background-clip: text;
}
[dir="rtl"] .notfound__code { text-align: right; }
.notfound__title { margin-top: 12px; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); }
.notfound__lead { margin: 12px 0 28px; color: var(--ink-2); max-width: 56ch; }
.notfound__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; list-style: none; }

.search-box { display: flex; gap: 10px; max-width: 560px; }
.search-box input {
	flex: 1;
	min-height: 50px;
	padding: 0 16px;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink);
	font: inherit;
}
.search-box input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); }
.results { display: grid; gap: 8px; list-style: none; }
.result { padding: 18px 0; border-bottom: 1px solid var(--line); }
.result__title { font-family: var(--f-display); font-size: 1.15rem; font-weight: 700; text-decoration: none; }
.result p { margin-top: 4px; color: var(--ink-2); }

.nav-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.nav-links .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; text-decoration: none; }
.nav-links .current { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
	.layout-aside, .split { grid-template-columns: 1fr; }
	.layout-aside__side, .split__side { position: static; }
	.channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.partners, .branches__grid { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
	.channels, .maps { grid-template-columns: 1fr; }
	.help-card--wide { grid-template-columns: 1fr; }
	.partner { flex-direction: column; }
	.job { flex-direction: column; align-items: flex-start; }
	.search { flex-direction: column; }
	.page-hero__actions .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Product and company pages
   ========================================================================== */

.intro-split {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(24px, 5vw, 72px);
	align-items: center;
}
.intro-split .prose > h2:first-child { margin-top: 0; }
.intro-split__media { margin: 0; padding: clamp(16px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.intro-split__media img { width: 100%; }
.intro-split__media--logo { max-width: 340px; justify-self: center; }

.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

.features { display: grid; gap: 14px; margin-top: clamp(24px, 3vw, 36px); list-style: none; }
.features--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.features--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.feature {
	position: relative;
	display: grid;
	align-content: start;
	gap: 8px;
	padding: 22px 22px 24px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
}
.feature::before {
	content: "";
	width: 10px;
	height: 10px;
	margin-bottom: 6px;
	border-radius: 50%;
	background: var(--blue);
	box-shadow: 16px 0 0 -1px var(--dot), 32px 0 0 -2px var(--dot);
}
[dir="rtl"] .feature::before { box-shadow: -16px 0 0 -1px var(--dot), -32px 0 0 -2px var(--dot); }
.feature__kicker { font-family: "IBM Plex Sans", var(--f-ui); font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--blue); }
[dir="rtl"] .feature__kicker { text-align: right; }
html[lang="en"] .feature__kicker { display: none; }
.feature__title { font-size: 1.1rem; }
.feature p { font-size: .94rem; color: var(--ink-2); }

.chip__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-inline-start: 6px; padding: 0 6px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font-size: .75rem; }
.chip[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip[aria-selected="true"] .chip__count { background: color-mix(in srgb, var(--bg) 20%, transparent); color: var(--bg); }

.apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; }
.app {
	display: flex;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
	animation: tk-in .35s var(--ease) both;
}
@keyframes tk-in { from { opacity: 0; transform: translateY(6px); } }
.app__mark {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 12px;
	background: #714B67;
	color: #fff;
	font-family: "IBM Plex Sans", sans-serif;
	font-weight: 700;
}
.app__body { display: grid; gap: 2px; }
.app__name { font-family: "IBM Plex Sans", var(--f-ui); font-weight: 700; color: var(--ink); }
[dir="rtl"] .app__name { text-align: right; }
.app__desc { font-size: .9rem; line-height: 1.6; color: var(--ink-2); }

.steps--large .steps__item { padding-block: 14px; font-size: 1.05rem; }
.cards--spaced { margin-top: 28px; }

.cta-band {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px 48px;
	padding: clamp(26px, 4.5vw, 56px);
	border-radius: var(--r-lg);
	background-color: var(--navy);
	background-image: radial-gradient(circle at 1.5px 1.5px, rgba(143, 173, 240, .22) 1.5px, transparent 0);
	background-size: 22px 22px;
	color: var(--navy-ink);
}
.cta-band__title { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); max-width: 26ch; }
.cta-band p { margin-top: 10px; max-width: 56ch; color: rgba(238, 242, 250, .8); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn--outline-light { border-color: rgba(255, 255, 255, .5); color: #fff; background: transparent; }
.btn--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* About */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; list-style: none; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--line); }
.facts li { display: grid; gap: 4px; padding: 22px 24px; background: var(--surface); color: var(--ink-2); font-size: .95rem; }
.facts__num { font-family: var(--f-display); font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); font-weight: 700; line-height: 1.1; color: var(--ink); }
[dir="rtl"] .facts__num { text-align: right; }

.vm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vm__card { padding: clamp(24px, 3.4vw, 40px); border-radius: var(--r-lg); background: var(--bg-2); }
.vm__card:first-child { background: var(--navy); color: var(--navy-ink); }
.vm__card:first-child p { color: rgba(238, 242, 250, .82); }
.vm__title { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin-bottom: 12px; }
.vm__card p { color: var(--ink-2); font-size: 1.02rem; }

.services__list { margin-top: clamp(20px, 3vw, 32px); border-top: 1px solid var(--line); }
.service {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
	align-items: center;
	gap: 24px;
	padding: clamp(18px, 2.4vw, 28px) 12px;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
	transition: background-color .25s;
}
.service:hover { background: var(--bg-2); }
.service__title { font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); font-weight: 600; }
.service p { color: var(--ink-2); }
.service .tk-icon { width: 26px; height: 26px; color: var(--blue); }

.link-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.link-tile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 22px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
	font-family: var(--f-display);
	font-weight: 600;
	text-decoration: none;
	transition: border-color .2s, color .2s;
}
.link-tile:hover { border-color: var(--blue); color: var(--blue); }
.link-tile .tk-icon { color: var(--blue); flex: none; }
.profile-link { margin-top: 20px; }

/* Clients */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; list-style: none; }
.logo-grid .logo-chip {
	display: grid;
	place-items: center;
	height: 104px;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: #fff;
	overflow: hidden;
	transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
:root[data-mode="dark"] .logo-grid .logo-chip { border-color: transparent; }
.logo-grid .logo-chip img { max-width: 100%; max-height: 78px; width: auto; height: auto; object-fit: contain; }
.logo-grid .logo-chip:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: var(--shadow); }
.sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; margin-top: 20px; }
.sheets figure { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }

@media (max-width: 1180px) {
	.features--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
	.intro-split, .split--even, .vm { grid-template-columns: 1fr; }
	.features--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.facts, .link-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cta-band { grid-template-columns: 1fr; }
	.service { grid-template-columns: minmax(0, 1fr) auto; }
	.service p { grid-column: 1; grid-row: 2; }
	.service .tk-icon { grid-column: 2; grid-row: 1 / 3; }
}
@media (max-width: 599px) {
	.features--4, .features--5, .apps { grid-template-columns: 1fr; }
	.logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cta-band__actions .btn { flex: 1 1 100%; }
}