/*
Theme Name: MECHATRIC
Theme URI: https://mechatric.com/
Description: MECHATRIC child theme for Hello Elementor. Header, footer, navigation and design system.
Author: MECHATRIC
Template: hello-elementor
Version: 1.0.0
Text Domain: mechatric
*/

/* ---------- Design tokens ---------- */
:root {
	--mx-navy: #0a2540;
	--mx-navy-2: #0b3d6e;
	--mx-blue: #0b6fe0;
	--mx-blue-dark: #095dbd;
	--mx-sky: #e8f1fc;
	--mx-amber: #f5a524;
	--mx-amber-light: #ffb83d;
	--mx-ink: #1f2933;
	--mx-mute: #5b6b7b;
	--mx-line: #e3e9f0;
	--mx-alt: #f5f8fc;
	--mx-radius: 10px;
	--mx-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--mx-max: 1200px;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { font-family: var(--mx-font); color: var(--mx-ink); line-height: 1.6; font-size: 16px; margin: 0; background: #fff; overflow-x: hidden; }
body * { box-sizing: border-box; }
a, a:hover, a:focus { color: var(--mx-blue); text-decoration: none; }
.mx-btn, .mx-btn:hover, .mx-card, .mx-card:hover, .mx-chips a, .mx-nav a, .mx-mega a, .mx-footer a, .mx-utility a, .mx-crumbs a, .mx-more { text-decoration: none !important; }
a:hover { color: var(--mx-blue-dark); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--mx-font); color: var(--mx-navy); line-height: 1.2; margin: 0 0 14px; font-weight: 700; }
h1 { font-size: 46px; }
h2 { font-size: 32px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }
p { margin: 0 0 14px; }
.site-main, .page-content, body:not([class*=elementor-page-]) .site-main { margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100%; }
.page-header { display: none; }
.mx-container { max-width: var(--mx-max); margin: 0 auto; padding: 0 24px; }

/* ---------- Utility bar ---------- */
.mx-utility { background: var(--mx-navy); color: #c9d9ea; font-size: 13.5px; }
.mx-utility .mx-container { display: flex; justify-content: space-between; align-items: center; min-height: 38px; gap: 16px; }
.mx-utility a { color: #fff; font-weight: 600; }
.mx-utility a:hover { color: var(--mx-amber); }
.mx-utility .mx-ptc-link { color: var(--mx-amber); }
.mx-utility .mx-util-right { display: flex; gap: 22px; align-items: center; }

/* ---------- Header ---------- */
.mx-header { background: #fff; border-bottom: 1px solid var(--mx-line); position: sticky; top: 0; z-index: 100; }
.mx-header .mx-container { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 18px; }
.mx-logo img { height: 50px; width: auto; display: block; }
.mx-nav { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mx-nav > li { position: relative; }
.mx-nav > li > a { display: block; padding: 26px 11px; color: var(--mx-navy); font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.mx-nav > li > a:hover, .mx-nav > li.is-current > a { color: var(--mx-blue); }
.mx-nav > li.has-mega > a:after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: 0 0 3px 7px; opacity: .6; }
.mx-mega { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid var(--mx-line); border-top: 3px solid var(--mx-blue); box-shadow: 0 18px 40px rgba(10,37,64,.12); border-radius: 0 0 var(--mx-radius) var(--mx-radius); padding: 22px 24px; display: none; min-width: 560px; }
.mx-nav > li:hover > .mx-mega, .mx-nav > li:focus-within > .mx-mega { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(200px, 1fr)); gap: 6px 26px; }
.mx-mega a { display: block; padding: 7px 0; color: var(--mx-ink); font-size: 14.5px; border-bottom: 1px solid #f0f3f7; }
.mx-mega a:hover { color: var(--mx-blue); }
.mx-mega a small { display: block; color: var(--mx-mute); font-size: 12.5px; }
.mx-header-cta { display: flex; align-items: center; gap: 10px; }
.mx-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.mx-burger span { display: block; width: 24px; height: 2px; background: var(--mx-navy); margin: 5px 0; }

/* ---------- Buttons ---------- */
.mx-btn { display: inline-block; padding: 12px 22px; border-radius: 6px; font-weight: 700; font-size: 15px; line-height: 1.2; transition: .2s; border: 2px solid transparent; cursor: pointer; text-align: center; }
.mx-btn--primary { background: var(--mx-amber); color: #10233a; }
.mx-btn--primary:hover { background: var(--mx-amber-light); color: #10233a; }
.mx-btn--blue { background: var(--mx-blue); color: #fff; }
.mx-btn--blue:hover { background: var(--mx-blue-dark); color: #fff; }
.mx-btn--ghost { border-color: rgba(255,255,255,.7); color: #fff; }
.mx-btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.mx-btn--outline { border-color: var(--mx-navy); color: var(--mx-navy); }
.mx-btn--outline:hover { background: var(--mx-navy); color: #fff; }
.mx-btn--sm { padding: 9px 16px; font-size: 14px; }
.mx-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Sections ---------- */
.mx-section { padding: 84px 0; }
.mx-section--alt { background: var(--mx-alt); }
.mx-section--navy { background: var(--mx-navy); color: #c9d9ea; }
.mx-section--navy h2, .mx-section--navy h3 { color: #fff; }
.mx-section--tight { padding: 56px 0; }
.mx-eyebrow { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--mx-blue); font-weight: 700; margin-bottom: 8px; }
.mx-lead { font-size: 18.5px; color: var(--mx-mute); max-width: 760px; margin-bottom: 36px; }
.mx-center { text-align: center; }
.mx-center .mx-lead { margin-left: auto; margin-right: auto; }

/* ---------- Hero ---------- */
.mx-hero { background: linear-gradient(135deg, #0a2540 0%, #0b3d6e 55%, #0b6fe0 100%); color: #d6e6f7; padding: 100px 0 92px; position: relative; overflow: hidden; }
.mx-hero:after { content: ""; position: absolute; right: -140px; top: -140px; width: 560px; height: 560px; border-radius: 50%; border: 64px solid rgba(255,255,255,.05); pointer-events: none; }
.mx-hero h1 { color: #fff; font-size: 52px; max-width: 820px; }
.mx-hero .mx-eyebrow { color: #9cc7f5; }
.mx-hero p { font-size: 19px; max-width: 720px; margin-bottom: 32px; }
.mx-hero .mx-pills { margin-top: 40px; }
.mx-page-hero { background: linear-gradient(135deg, #0a2540 0%, #0b3d6e 100%); color: #c9d9ea; padding: 64px 0 56px; }
.mx-page-hero h1 { color: #fff; font-size: 42px; max-width: 860px; }
.mx-page-hero p { font-size: 18.5px; max-width: 760px; margin: 0; }
.mx-page-hero .mx-eyebrow { color: #9cc7f5; }
.mx-crumbs { font-size: 13.5px; margin-bottom: 18px; color: #9fb3c8; }
.mx-crumbs a { color: #c9d9ea; }
.mx-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.mx-pills span { border: 1px solid rgba(255,255,255,.25); border-radius: 30px; padding: 6px 14px; font-size: 14px; color: #e3eefa; }

/* ---------- Grids & cards ---------- */
.mx-grid { display: grid; gap: 22px; }
.mx-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mx-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mx-grid--4 { grid-template-columns: repeat(4, 1fr); }
.mx-card { background: #fff; border: 1px solid var(--mx-line); border-radius: var(--mx-radius); padding: 26px; transition: .2s; display: block; color: inherit; }
a.mx-card:hover, .mx-card--hover:hover { box-shadow: 0 12px 30px rgba(10,37,64,.09); transform: translateY(-2px); color: inherit; }
.mx-card h3 { margin-bottom: 8px; }
.mx-card p { color: var(--mx-mute); font-size: 15px; margin: 0; }
.mx-card .mx-more { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 14px; color: var(--mx-blue); }
.mx-icon { width: 48px; height: 48px; border-radius: 10px; background: var(--mx-sky); color: var(--mx-blue); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; margin-bottom: 16px; }
.mx-card--navy { background: var(--mx-navy); border-color: var(--mx-navy); color: #c9d9ea; }
.mx-card--navy h3 { color: #fff; }
.mx-card--navy p { color: #c9d9ea; }

/* ---------- Lists, chips, steps ---------- */
.mx-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.mx-chips span, .mx-chips a { background: #fff; border: 1px solid #d5e0ec; border-radius: 6px; padding: 9px 15px; font-weight: 600; color: var(--mx-navy); font-size: 15px; }
.mx-chips a:hover { border-color: var(--mx-blue); color: var(--mx-blue); }
.mx-check { list-style: none; padding: 0; margin: 0 0 14px; }
.mx-check li { padding: 6px 0 6px 28px; position: relative; }
.mx-check li:before { content: ""; position: absolute; left: 2px; top: 13px; width: 12px; height: 7px; border-left: 2.5px solid var(--mx-blue); border-bottom: 2.5px solid var(--mx-blue); transform: rotate(-45deg); }
.mx-steps { display: grid; grid-template-columns: repeat(var(--steps, 6), 1fr); gap: 0; counter-reset: step; }
.mx-step { position: relative; padding: 0 12px 0 0; }
.mx-step:before { counter-increment: step; content: counter(step); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--mx-blue); color: #fff; font-weight: 800; margin-bottom: 12px; position: relative; z-index: 1; }
.mx-step:after { content: ""; position: absolute; top: 19px; left: 38px; right: 0; height: 2px; background: #cfdcea; }
.mx-step:last-child:after { display: none; }
.mx-step h4 { margin-bottom: 4px; }
.mx-step p { font-size: 14px; color: var(--mx-mute); margin: 0; }
.mx-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.mx-split--top { align-items: start; }
.mx-badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .5px; padding: 3px 9px; border-radius: 4px; background: var(--mx-sky); color: var(--mx-blue); margin: 0 6px 6px 0; }
.mx-note { font-size: 13.5px; color: var(--mx-mute); border-left: 3px solid var(--mx-line); padding-left: 12px; }
.mx-quote { border-left: 4px solid var(--mx-amber); padding: 6px 0 6px 18px; font-size: 18px; font-style: italic; color: var(--mx-navy); }

/* ---------- CTA band ---------- */
.mx-cta { background: var(--mx-navy); border-radius: 14px; padding: 46px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: center; color: #c9d9ea; }
.mx-cta h2 { color: #fff; margin-bottom: 10px; }
.mx-cta p { margin: 0; }
.mx-cta .mx-btns { justify-content: flex-end; }
.mx-meta { display: grid; gap: 12px; }
.mx-meta div { background: rgba(255,255,255,.06); border-radius: 8px; padding: 13px 18px; color: #fff; }
.mx-meta b { display: block; color: var(--mx-amber); font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase; }

/* ---------- Forms (Contact Form 7) ---------- */
.mx-form { background: #fff; border: 1px solid var(--mx-line); border-radius: 12px; padding: 32px; }
.mx-form fieldset { border: 0; border-top: 1px solid var(--mx-line); margin: 0 0 18px; padding: 18px 0 0; }
.mx-form fieldset:first-of-type { border-top: 0; padding-top: 0; }
.mx-form legend { font-weight: 800; color: var(--mx-navy); font-size: 17px; padding: 0; margin-bottom: 12px; }
.mx-form legend small { color: var(--mx-blue); font-weight: 700; margin-right: 6px; }
.mx-form .mx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.mx-form .mx-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.mx-form label { display: block; font-size: 14px; font-weight: 600; color: var(--mx-navy); margin-bottom: 4px; }
.mx-form input[type=text], .mx-form input[type=email], .mx-form input[type=tel], .mx-form input[type=url], .mx-form input[type=number], .mx-form select, .mx-form textarea { width: 100%; border: 1px solid #cfd8e3; border-radius: 6px; padding: 10px 12px; font: inherit; font-size: 15px; background: #fff; color: var(--mx-ink); }
.mx-form textarea { min-height: 110px; height: 120px; }
.mx-form input:focus, .mx-form select:focus, .mx-form textarea:focus { outline: none; border-color: var(--mx-blue); box-shadow: 0 0 0 3px rgba(11,111,224,.12); }
.mx-form .wpcf7-list-item { margin: 0 14px 6px 0; display: inline-block; }
.mx-form .wpcf7-list-item label { font-weight: 500; display: inline; }
.mx-form input[type=submit] { background: var(--mx-amber); color: #10233a; border: 0; border-radius: 6px; padding: 14px 28px; font-weight: 800; font-size: 16px; cursor: pointer; }
.mx-form input[type=submit]:hover { background: var(--mx-amber-light); }
.mx-form .wpcf7-not-valid-tip { font-size: 13px; }
.mx-form p { margin: 0 0 12px; }
.mx-form .mx-hint { font-size: 13px; color: var(--mx-mute); font-weight: 400; }

/* ---------- Chinese block ---------- */
.mx-zh { background: #fff7e6; border: 1px solid #f5d79a; border-radius: 12px; padding: 24px 28px; font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif; color: #3d2c00; font-size: 17px; line-height: 1.8; }
.mx-zh b { display: block; font-size: 13px; letter-spacing: 1.5px; color: #a36b00; margin-bottom: 6px; font-family: var(--mx-font); }

/* ---------- Footer ---------- */
.mx-footer { background: #071a2e; color: #9fb3c8; font-size: 14.5px; padding: 64px 0 0; }
.mx-footer a { color: #c9d9ea; }
.mx-footer a:hover { color: #fff; }
.mx-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 28px; }
.mx-footer h4 { color: #fff; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 14px; }
.mx-footer ul { list-style: none; padding: 0; margin: 0; }
.mx-footer li { margin-bottom: 8px; }
.mx-footer .mx-brand { color: #fff; font-size: 20px; font-weight: 800; letter-spacing: .5px; }
.mx-footer-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.mx-footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 48px; padding: 20px 0; font-size: 13.5px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
	.mx-nav > li > a { padding: 26px 8px; font-size: 14px; }
	.mx-footer-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
	.mx-burger { display: block; }
	.mx-nav { display: none; position: absolute; top: 76px; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; border-bottom: 1px solid var(--mx-line); box-shadow: 0 12px 24px rgba(10,37,64,.1); max-height: calc(100vh - 120px); overflow-y: auto; }
	.mx-nav.is-open { display: flex; }
	.mx-nav > li > a { padding: 14px 24px; border-top: 1px solid #f0f3f7; }
	.mx-mega, .mx-nav > li:hover > .mx-mega { display: none; position: static; transform: none; min-width: 0; box-shadow: none; border: 0; padding: 0 24px 12px 36px; }
	.mx-nav > li.is-open > .mx-mega { display: block; }
	.mx-header-cta .mx-btn--outline { display: none; }
	.mx-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.mx-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.mx-steps { grid-template-columns: repeat(3, 1fr); gap: 22px; }
	.mx-step:after { display: none; }
	.mx-split, .mx-cta { grid-template-columns: 1fr; }
	.mx-cta .mx-btns { justify-content: flex-start; }
	h1, .mx-hero h1 { font-size: 38px; }
	.mx-page-hero h1 { font-size: 34px; }
	h2 { font-size: 28px; }
}
@media (max-width: 640px) {
	.mx-utility .mx-util-email { display: none; }
	.mx-grid--2, .mx-grid--3, .mx-grid--4, .mx-form .mx-row, .mx-form .mx-row--3 { grid-template-columns: 1fr; }
	.mx-steps { grid-template-columns: 1fr 1fr; }
	.mx-section { padding: 58px 0; }
	.mx-hero { padding: 68px 0; }
	.mx-hero h1 { font-size: 34px; }
	.mx-header-cta .mx-btn--primary { padding: 9px 12px; font-size: 13px; }
	.mx-footer-grid { grid-template-columns: 1fr 1fr; }
	.mx-cta, .mx-form { padding: 26px 20px; }
	.mx-logo img { height: 40px; }
}

/* ---------- Catalogue ---------- */
.mx-pcard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.mx-pcard-img { width: 100%; height: 180px; object-fit: contain; background: #f5f8fc; display: block; }
.mx-pcard-ph { height: 150px; background: linear-gradient(135deg, #e8f1fc, #f5f8fc); display: flex; align-items: center; justify-content: center; font-size: 46px; font-weight: 800; color: #b7cde6; }
.mx-pcard-body { padding: 20px 22px 22px; }
.mx-pcard-meta { font-size: 12.5px; color: var(--mx-blue); font-weight: 700; letter-spacing: .3px; margin-bottom: 6px; }
.mx-pcard h3 { font-size: 18px; }
.mx-pcard-badges { margin-top: 12px; }
.mx-pcard-badges .mx-badge { font-size: 11px; }
.mx-hero-badges .mx-badge { background: rgba(255,255,255,.12); color: #fff; }
.mx-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 15px; }
.mx-table th, .mx-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--mx-line); vertical-align: top; }
.mx-table th { width: 45%; color: var(--mx-navy); font-weight: 600; background: #fafcfe; }
.mx-table--compact th, .mx-table--compact td { padding: 6px 8px; font-size: 14px; }
.mx-chips--sm span { padding: 5px 10px; font-size: 13px; font-weight: 600; }
.mx-subnav a.is-active { background: var(--mx-navy); color: #fff; border-color: var(--mx-navy); }
.mx-subnav small { opacity: .7; }
.woocommerce-breadcrumb, .woocommerce-products-header { display: none; }

.woocommerce table.mx-table, .mx-table { border: 0 !important; border-radius: 0 !important; }
.woocommerce .mx-table th, .woocommerce .mx-table td { border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; }


.mx-table--sizes th, .mx-table--sizes td { width: auto; white-space: nowrap; font-size: 13.5px; }


.mx-supply-note { font-size: 14.5px; color: #c9d9ea; margin: 10px 0 0; max-width: 640px; }


/* ---------- Phase 5: mobile persistent actions ---------- */
.mx-mobilebar { display: none; }
@media (max-width: 1024px) {
	.mx-mobilebar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: #fff; border-top: 1px solid var(--mx-line); box-shadow: 0 -6px 18px rgba(10,37,64,.08); }
	.mx-mobilebar a { text-align: center; padding: 13px 8px; font-weight: 700; font-size: 14.5px; color: var(--mx-navy) !important; }
	.mx-mobilebar a.is-primary { background: var(--mx-amber); color: #10233a !important; }
	body { padding-bottom: 50px; }
}

/* ---------- Header: logo without tagline + Partner With Us button ---------- */
.mx-logo img { height: 54px; }
.mx-header-cta .mx-btn { white-space: nowrap; }
@media (min-width: 1025px) {
	.mx-header .mx-container { max-width: 1340px; }
}
@media (min-width: 1025px) and (max-width: 1440px) {
	.mx-nav > li > a { padding: 26px 8px; font-size: 14px; }
	.mx-header .mx-container { gap: 12px; }
}
@media (max-width: 1024px) {
	.mx-logo img { height: 42px; }
}
.mx-logo { flex-shrink: 0; }
@media (min-width: 1025px) {
	.mx-utility .mx-container { max-width: 1340px; }
}
@media (min-width: 1025px) and (max-width: 1259px) {
	.mx-header-cta .mx-btn--outline { display: none; }
}

/* ---------- Founder hero with portrait ---------- */
.mx-founder-hero { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.mx-founder-photo { width: 230px; height: 280px; object-fit: cover; object-position: 50% 30%; border-radius: 12px; border: 4px solid rgba(255,255,255,.9); box-shadow: 0 14px 34px rgba(0,0,0,.25); display: block; }
@media (max-width: 760px) {
	.mx-founder-hero { grid-template-columns: 1fr; gap: 22px; }
	.mx-founder-photo { width: 150px; height: 180px; order: -1; }
}

/* ---------- Phase 6: typography (self-hosted Inter, China-safe) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/inter-800.woff2") format("woff2"); }
:root {
	--mx-font: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--mx-s1: 4px; --mx-s2: 8px; --mx-s3: 12px; --mx-s4: 16px; --mx-s5: 24px; --mx-s6: 32px; --mx-s7: 48px; --mx-s8: 64px;
}
h1 { font-size: 42px; letter-spacing: -.5px; }
h2 { font-size: 32px; letter-spacing: -.3px; }
h3 { font-size: 22px; }
.mx-hero h1 { font-size: 44px; }
.mx-page-hero h1 { font-size: 40px; }
.mx-card h3 { font-size: 20px; }
.mx-table, .mx-table td, .mx-pcard-meta { font-variant-numeric: tabular-nums; }
.mx-table { font-size: 14.5px; }
/* visible keyboard focus (WCAG 2.2 AA) */
a:focus-visible, button:focus-visible, .mx-btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--mx-blue); outline-offset: 2px; }
@media (max-width: 1024px) {
	h1, .mx-hero h1 { font-size: 36px; }
	.mx-page-hero h1 { font-size: 32px; }
	h2 { font-size: 27px; }
}
@media (max-width: 640px) {
	.mx-hero h1 { font-size: 31px; }
}

/* ---------- Phase 6/7: search ---------- */
.mx-search-toggle { background: none; border: 1px solid var(--mx-line); border-radius: 6px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--mx-navy); cursor: pointer; padding: 0; }
.mx-search-toggle:hover, .mx-search-toggle[aria-expanded=true] { border-color: var(--mx-blue); color: var(--mx-blue); }
.mx-searchbar { background: var(--mx-alt); border-top: 1px solid var(--mx-line); padding: 14px 0; }
.mx-searchbar[hidden] { display: none; }
.mx-search-form { display: flex; gap: 10px; max-width: 760px; }
.mx-search-form input[type=search] { flex: 1; min-width: 0; border: 1px solid #cfd8e3; border-radius: 6px; padding: 11px 14px; font: inherit; font-size: 16px; background: #fff; color: var(--mx-ink); }
.mx-search-form input[type=search]:focus { outline: none; border-color: var(--mx-blue); box-shadow: 0 0 0 3px rgba(11,111,224,.15); }
.mx-search-form--hero { margin-top: 22px; }
.mx-search-summary { color: var(--mx-mute); margin-bottom: 8px; }
.mx-search-h { font-size: 22px; margin: 34px 0 14px; }
.mx-search-h small { font-size: 14px; color: var(--mx-mute); font-weight: 600; margin-left: 6px; }
.mx-empty { max-width: 720px; }
.mx-empty p { color: var(--mx-mute); margin-bottom: 22px; }
@media (max-width: 1024px) {
	.mx-header-cta { gap: 8px; }
	.mx-search-form .mx-btn { padding: 11px 14px; }
}

/* ---------- Phase 5/7: dynamic RFQ ---------- */
.mx-cond[hidden] { display: none !important; }
.mx-rfq .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px; }
.mx-rfq .wpcf7-radio .wpcf7-list-item { margin: 0; }
.mx-rfq [data-name="intent"] .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #cfd8e3; border-radius: 6px; padding: 10px 16px; font-weight: 600; color: var(--mx-navy); cursor: pointer; background: #fff; }
.mx-rfq [data-name="intent"] .wpcf7-list-item label:has(input:checked) { border-color: var(--mx-blue); background: var(--mx-sky); color: var(--mx-blue); }
.mx-rfq .mx-hint { display: block; }
legend .mx-hint { display: inline; }

.mx-rfq { counter-reset: mxstep; }
.mx-rfq fieldset:not([hidden]) { counter-increment: mxstep; }
.mx-rfq legend small::after { content: " " counter(mxstep); }

/* ---------- Phase 6: product cards, technical tables, data states ---------- */
.mx-pcard-body { display: flex; flex-direction: column; flex: 1; }
.mx-pcard .mx-more { margin-top: auto; padding-top: 14px; }
.mx-pcard-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 0; padding: 10px 0 0; border-top: 1px solid var(--mx-line); }
.mx-pcard-specs dt { font-size: 11.5px; color: var(--mx-mute); font-weight: 600; line-height: 1.3; }
.mx-pcard-specs dd { margin: 2px 0 0; font-weight: 700; color: var(--mx-navy); font-variant-numeric: tabular-nums; }
.mx-quickdata { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.mx-quickdata div { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 10px 16px; min-width: 150px; }
.mx-quickdata dt { font-size: 12px; color: #9cc7f5; font-weight: 600; }
.mx-quickdata dd { margin: 2px 0 0; color: #fff; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.mx-table-wrap { overflow-x: auto; max-height: 70vh; border: 1px solid var(--mx-line); border-radius: 8px; }
.mx-table--specs { margin: 0; }
.mx-table--specs thead th { position: sticky; top: 0; z-index: 1; background: var(--mx-navy) !important; color: #fff !important; font-size: 13px; letter-spacing: .4px; text-transform: uppercase; }
.mx-table--specs tbody tr:nth-child(even) th, .mx-table--specs tbody tr:nth-child(even) td { background: #f7f9fc; }
.mx-table .mx-na { color: var(--mx-mute); font-style: italic; }
.mx-data-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: 6px; margin: 0 0 14px; }
.mx-data-status--ok { background: #e7f6ec; color: #17663a; }
.mx-data-status--pending { background: #fff4e0; color: #8a5a00; }
.mx-chips--sm a { padding: 5px 10px; font-size: 13px; font-weight: 600; }

/* What is ...? + brand box */
.mx-whatis { max-width: 860px; }
.mx-whatis-item { margin-bottom: 26px; }
.mx-whatis-item h2 { font-size: 26px; margin-bottom: 10px; }
.mx-whatis-item p { font-size: 16.5px; }
.mx-brandbox .mx-note { margin-top: 10px; }

.mx-numbered { counter-reset: mxn; list-style: none; padding: 0; margin: 18px 0 0; }
.mx-numbered li { counter-increment: mxn; position: relative; padding: 0 0 18px 54px; }
.mx-numbered li:before { content: counter(mxn); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--mx-blue); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.mx-numbered h3 { font-size: 19px; margin-bottom: 4px; }
.mx-landing h2 { font-size: 28px; }

.mx-faq .mx-whatis-item h2 { font-size: 19px; }
.mx-faq .mx-whatis-item { margin-bottom: 18px; border-bottom: 1px solid var(--mx-line); padding-bottom: 14px; }

/* ---------- Subtle motion (Phase 6: restrained, accessible) ---------- */
@keyframes mx-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mx-spin { to { transform: rotate(360deg); } }
.mx-hero .mx-eyebrow, .mx-hero h1, .mx-hero p, .mx-hero .mx-btns, .mx-hero .mx-pills,
.mx-page-hero .mx-eyebrow, .mx-page-hero h1, .mx-page-hero p, .mx-page-hero .mx-btns { animation: mx-fade-up .7s ease both; }
.mx-hero h1, .mx-page-hero h1 { animation-delay: .08s; }
.mx-hero p, .mx-page-hero p { animation-delay: .16s; }
.mx-hero .mx-btns, .mx-page-hero .mx-btns { animation-delay: .24s; }
.mx-hero .mx-pills { animation-delay: .32s; }
.mx-hero:after { animation: mx-spin 90s linear infinite; border-style: dashed; }
.mx-js .mx-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.mx-js .mx-reveal.is-in { opacity: 1; transform: none; }
.mx-btn { transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.mx-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(10,37,64,.15); }
.mx-card .mx-more { transition: transform .2s; display: inline-block; }
a.mx-card:hover .mx-more { transform: translateX(4px); }
.mx-icon { transition: transform .3s; }
.mx-card:hover .mx-icon { transform: rotate(-8deg) scale(1.08); }
.mx-chips a { transition: border-color .2s, color .2s, transform .2s; }
.mx-chips a:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
	*, *:before, *:after { animation: none !important; transition: none !important; }
	.mx-js .mx-reveal { opacity: 1; transform: none; }
}

@media (min-width: 1025px) and (max-width: 1360px) {
	.mx-header-cta .mx-btn--outline { display: none; }
}

/* Landing/spec tables: column widths follow their content (founder 2026-10-07). */
.mx-table--specs { table-layout: auto; }
.mx-table--specs th, .mx-table--specs td { width: auto; }
.mx-table--specs tbody th { min-width: 2.5em; }

/* Wider wordmark logo (v2): keep header in one row. */
@media (min-width: 1025px) and (max-width: 1200px) {
	.mx-logo img { height: 46px; }
	.mx-nav > li > a { padding: 26px 6px; font-size: 13.5px; }
	.mx-header-cta .mx-btn--primary { padding: 10px 14px; }
}
@media (max-width: 640px) {
	.mx-logo img { height: 36px; }
	.mx-header-cta .mx-btn--primary { display: none; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
	.mx-logo img { height: 40px; }
	.mx-nav > li > a { padding: 26px 5px; font-size: 13px; }
	.mx-header .mx-container { gap: 8px; }
	.mx-header-cta .mx-btn--primary { font-size: 0; padding: 10px 14px; }
	.mx-header-cta .mx-btn--primary::after { content: 'RFQ'; font-size: 14px; }
}

/* Mega menu: stays open ~0.5s after the pointer leaves, so sub-items are easy to reach (founder 2026-10-07). */
@media (min-width: 1025px) {
	.mx-nav > li > .mx-mega { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(200px, 1fr)); gap: 6px 26px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .2s ease .5s, visibility 0s linear .7s; z-index: 300; }
	.mx-nav > li:hover > .mx-mega, .mx-nav > li:focus-within > .mx-mega { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .15s ease 0s, visibility 0s linear 0s; }
	.mx-nav > li.has-mega > a { padding-bottom: 30px; margin-bottom: -4px; }
}

/* Category schematic illustrations (original MECHATRIC drawings). */
.mx-landing-hero { align-items: center; }
.mx-illus { margin: 0; }
.mx-illus img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--mx-line); box-shadow: 0 10px 28px rgba(10,37,64,.08); }
.mx-card--illus { overflow: hidden; }
a.mx-card .mx-card-illus, .woocommerce a.mx-card img.mx-card-illus { display: block; width: calc(100% + 52px); max-width: none !important; height: auto; margin: -26px -26px 16px; border-bottom: 1px solid var(--mx-line); }

/* Homepage hero slider - three original illustrations, CSS-only crossfade (founder 2026-10-07). */
.mx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.mx-hero-grid .mx-hero-text { position: relative; z-index: 2; }
.mx-slider { position: relative; z-index: 2; aspect-ratio: 3 / 2; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.mx-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: mx-slide 15s infinite; }
.mx-slide--1 { animation-delay: 0s; }
.mx-slide--2 { animation-delay: 5s; }
.mx-slide--3 { animation-delay: 10s; }
@keyframes mx-slide { 0% { opacity: 0; transform: scale(1.03); } 4% { opacity: 1; transform: scale(1); } 30% { opacity: 1; } 36% { opacity: 0; } 100% { opacity: 0; } }
.mx-slider-dots { position: absolute; right: 22px; bottom: 26px; display: flex; gap: 8px; }
.mx-slider-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.35); animation: mx-dot 15s infinite; }
.mx-slider-dots span:nth-child(2) { animation-delay: 5s; }
.mx-slider-dots span:nth-child(3) { animation-delay: 10s; }
@keyframes mx-dot { 0%, 33% { background: #f5a524; } 34%, 100% { background: rgba(255,255,255,.35); } }
@media (max-width: 1024px) { .mx-hero-grid { grid-template-columns: 1fr; gap: 34px; } }
@media (prefers-reduced-motion: reduce) { .mx-slide, .mx-slider-dots span { animation: none; } .mx-slide--1 { opacity: 1; } }

/* Brand catalog photos (credited) on category pages and cards. */
a.mx-card .mx-card-illus, .woocommerce a.mx-card img.mx-card-illus { aspect-ratio: 2 / 1; object-fit: cover; background: #fff; }
.mx-illus--photo img { background: #fff; max-height: 420px; object-fit: contain; }
.mx-illus figcaption { margin-top: 8px; font-size: 12.5px; color: var(--mx-mute); text-align: right; }

.mx-slider::after { content: 'Images: SIT S.p.A.'; position: absolute; left: 18px; bottom: 14px; z-index: 3; font-size: 11px; color: #fff; opacity: .8; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

.mx-footer-disclaimer { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; line-height: 1.6; color: #9fb3c8; }

/* Series detail blocks (1.4.12) */
.mx-fam-details { margin-top: 34px; display: grid; gap: 22px; }
.mx-fam-detail { scroll-margin-top: 110px; }
.mx-fam-detail h3 { font-size: 22px; margin-bottom: 10px; }
.mx-fam-detail .mx-table-wrap { margin-top: 12px; }

/* Founder 2026-10-09: every image fully visible (no cropping). */
a.mx-card .mx-card-illus, .woocommerce a.mx-card img.mx-card-illus { aspect-ratio: 4 / 3; object-fit: contain !important; background: #f5f8fc; }
.mx-illus img, .mx-illus--photo img, .mx-landing img, .mx-pcard-img, .woocommerce div.product div.images img { object-fit: contain !important; height: auto; max-width: 100%; }
.mx-illus--photo img { max-height: 520px; width: auto; margin: 0 auto; }

/* Full-width page banner (1.4.14) */
.mx-page-banner { margin: 28px 0 0; }
.mx-page-banner img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 14px; border: 1px solid var(--mx-line); background: #fff; }

/* Homepage coupling slider (1.4.19) */
.mx-slider { background: #eef3f7; }
.mx-slider::after { content: none !important; }
.mx-slider-dots span { background: rgba(10,37,64,.25); }
.mx-slider-dots span { animation-name: mx-dot2; }
@keyframes mx-dot2 { 0%, 33% { background: #f5a524; } 34%, 100% { background: rgba(10,37,64,.25); } }

/* Homepage slider: 5 slides, 5 s each (1.4.20) */
.mx-slide { animation: mx-slide5 25s infinite; }
.mx-slide--1 { animation-delay: 0s; } .mx-slide--2 { animation-delay: 5s; } .mx-slide--3 { animation-delay: 10s; } .mx-slide--4 { animation-delay: 15s; } .mx-slide--5 { animation-delay: 20s; }
@keyframes mx-slide5 { 0% { opacity: 0; transform: scale(1.03); } 2.4% { opacity: 1; transform: scale(1); } 18% { opacity: 1; } 21.6% { opacity: 0; } 100% { opacity: 0; } }
.mx-slider-dots span { animation: mx-dot5 25s infinite; }
.mx-slider-dots span:nth-child(1) { animation-delay: 0s; } .mx-slider-dots span:nth-child(2) { animation-delay: 5s; } .mx-slider-dots span:nth-child(3) { animation-delay: 10s; } .mx-slider-dots span:nth-child(4) { animation-delay: 15s; } .mx-slider-dots span:nth-child(5) { animation-delay: 20s; }
@keyframes mx-dot5 { 0%, 19.9% { background: #f5a524; } 20%, 100% { background: rgba(10,37,64,.25); } }
@media (prefers-reduced-motion: reduce) { .mx-slide, .mx-slider-dots span { animation: none; } .mx-slide--1 { opacity: 1; } }
/* Homepage slider: 7 slides, 5 s each (1.4.21) */
.mx-slide { animation: mx-slide7 35s infinite; }
.mx-slide--1 { animation-delay: 0s; } .mx-slider-dots span:nth-child(1) { animation-delay: 0s; }
.mx-slide--2 { animation-delay: 5s; } .mx-slider-dots span:nth-child(2) { animation-delay: 5s; }
.mx-slide--3 { animation-delay: 10s; } .mx-slider-dots span:nth-child(3) { animation-delay: 10s; }
.mx-slide--4 { animation-delay: 15s; } .mx-slider-dots span:nth-child(4) { animation-delay: 15s; }
.mx-slide--5 { animation-delay: 20s; } .mx-slider-dots span:nth-child(5) { animation-delay: 20s; }
.mx-slide--6 { animation-delay: 25s; } .mx-slider-dots span:nth-child(6) { animation-delay: 25s; }
.mx-slide--7 { animation-delay: 30s; } .mx-slider-dots span:nth-child(7) { animation-delay: 30s; }
@keyframes mx-slide7 { 0% { opacity: 0; transform: scale(1.03); } 1.7% { opacity: 1; transform: scale(1); } 12.69% { opacity: 1; } 15.29% { opacity: 0; } 100% { opacity: 0; } }
.mx-slider-dots span { animation: mx-dot7 35s infinite; }
@keyframes mx-dot7 { 0%, 14.19% { background: #f5a524; } 14.29%, 100% { background: rgba(10,37,64,.25); } }
@media (prefers-reduced-motion: reduce) { .mx-slide, .mx-slider-dots span { animation: none; } .mx-slide--1 { opacity: 1; } }

/* Logo v4 wordmark (2026-10-12) */
.mx-logo img { height: 30px !important; width: auto; }
@media (max-width: 1200px) { .mx-logo img { height: 26px !important; } }
@media (max-width: 600px) { .mx-logo img { height: 22px !important; } }

/* Industries cards: anchor offset under sticky header */
.mx-card[id] { scroll-margin-top: 110px; }

/* Homepage slider: 9 slides (1.4.24) */
.mx-slide { animation: mx-slide9 45s infinite; }
.mx-slide--1 { animation-delay: 0s; } .mx-slider-dots span:nth-child(1) { animation-delay: 0s; }
.mx-slide--2 { animation-delay: 5s; } .mx-slider-dots span:nth-child(2) { animation-delay: 5s; }
.mx-slide--3 { animation-delay: 10s; } .mx-slider-dots span:nth-child(3) { animation-delay: 10s; }
.mx-slide--4 { animation-delay: 15s; } .mx-slider-dots span:nth-child(4) { animation-delay: 15s; }
.mx-slide--5 { animation-delay: 20s; } .mx-slider-dots span:nth-child(5) { animation-delay: 20s; }
.mx-slide--6 { animation-delay: 25s; } .mx-slider-dots span:nth-child(6) { animation-delay: 25s; }
.mx-slide--7 { animation-delay: 30s; } .mx-slider-dots span:nth-child(7) { animation-delay: 30s; }
.mx-slide--8 { animation-delay: 35s; } .mx-slider-dots span:nth-child(8) { animation-delay: 35s; }
.mx-slide--9 { animation-delay: 40s; } .mx-slider-dots span:nth-child(9) { animation-delay: 40s; }
@keyframes mx-slide9 { 0% { opacity: 0; transform: scale(1.03); } 1.3% { opacity: 1; transform: scale(1); } 9.91% { opacity: 1; } 11.91% { opacity: 0; } 100% { opacity: 0; } }
.mx-slider-dots span { animation: mx-dot9 45s infinite; }
@keyframes mx-dot9 { 0%, 11.01% { background: #f5a524; } 11.11%, 100% { background: rgba(10,37,64,.25); } }
@media (prefers-reduced-motion: reduce) { .mx-slide, .mx-slider-dots span { animation: none; } .mx-slide--1 { opacity: 1; } }

/* Homepage slider: 10 slides (1.4.25) */
.mx-slide { animation: mx-slide10 50s infinite; }
.mx-slide--1 { animation-delay: 0s; } .mx-slider-dots span:nth-child(1) { animation-delay: 0s; }
.mx-slide--2 { animation-delay: 5s; } .mx-slider-dots span:nth-child(2) { animation-delay: 5s; }
.mx-slide--3 { animation-delay: 10s; } .mx-slider-dots span:nth-child(3) { animation-delay: 10s; }
.mx-slide--4 { animation-delay: 15s; } .mx-slider-dots span:nth-child(4) { animation-delay: 15s; }
.mx-slide--5 { animation-delay: 20s; } .mx-slider-dots span:nth-child(5) { animation-delay: 20s; }
.mx-slide--6 { animation-delay: 25s; } .mx-slider-dots span:nth-child(6) { animation-delay: 25s; }
.mx-slide--7 { animation-delay: 30s; } .mx-slider-dots span:nth-child(7) { animation-delay: 30s; }
.mx-slide--8 { animation-delay: 35s; } .mx-slider-dots span:nth-child(8) { animation-delay: 35s; }
.mx-slide--9 { animation-delay: 40s; } .mx-slider-dots span:nth-child(9) { animation-delay: 40s; }
.mx-slide--10 { animation-delay: 45s; } .mx-slider-dots span:nth-child(10) { animation-delay: 45s; }
@keyframes mx-slide10 { 0% { opacity: 0; transform: scale(1.03); } 1.2% { opacity: 1; transform: scale(1); } 9% { opacity: 1; } 10.8% { opacity: 0; } 100% { opacity: 0; } }
.mx-slider-dots span { animation: mx-dot10 50s infinite; }
@keyframes mx-dot10 { 0%, 9.9% { background: #f5a524; } 10%, 100% { background: rgba(10,37,64,.25); } }
@media (prefers-reduced-motion: reduce) { .mx-slide, .mx-slider-dots span { animation: none; } .mx-slide--1 { opacity: 1; } }

/* Homepage slider: 11 slides (1.4.26) */
.mx-slide { animation: mx-slide11 55s infinite; }
.mx-slide--1 { animation-delay: 0s; } .mx-slider-dots span:nth-child(1) { animation-delay: 0s; }
.mx-slide--2 { animation-delay: 5s; } .mx-slider-dots span:nth-child(2) { animation-delay: 5s; }
.mx-slide--3 { animation-delay: 10s; } .mx-slider-dots span:nth-child(3) { animation-delay: 10s; }
.mx-slide--4 { animation-delay: 15s; } .mx-slider-dots span:nth-child(4) { animation-delay: 15s; }
.mx-slide--5 { animation-delay: 20s; } .mx-slider-dots span:nth-child(5) { animation-delay: 20s; }
.mx-slide--6 { animation-delay: 25s; } .mx-slider-dots span:nth-child(6) { animation-delay: 25s; }
.mx-slide--7 { animation-delay: 30s; } .mx-slider-dots span:nth-child(7) { animation-delay: 30s; }
.mx-slide--8 { animation-delay: 35s; } .mx-slider-dots span:nth-child(8) { animation-delay: 35s; }
.mx-slide--9 { animation-delay: 40s; } .mx-slider-dots span:nth-child(9) { animation-delay: 40s; }
.mx-slide--10 { animation-delay: 45s; } .mx-slider-dots span:nth-child(10) { animation-delay: 45s; }
.mx-slide--11 { animation-delay: 50s; } .mx-slider-dots span:nth-child(11) { animation-delay: 50s; }
@keyframes mx-slide11 { 0% { opacity: 0; transform: scale(1.03); } 1.1% { opacity: 1; transform: scale(1); } 8.1% { opacity: 1; } 9.8% { opacity: 0; } 100% { opacity: 0; } }
.mx-slider-dots span { animation: mx-dot11 55s infinite; }
@keyframes mx-dot11 { 0%, 9% { background: #f5a524; } 9.1%, 100% { background: rgba(10,37,64,.25); } }
@media (prefers-reduced-motion: reduce) { .mx-slide, .mx-slider-dots span { animation: none; } .mx-slide--1 { opacity: 1; } }

/* 1.4.27: outline buttons inside the navy CTA box were navy-on-navy (invisible) */
.mx-cta .mx-btn--outline { border-color: rgba(255,255,255,.75); color: #fff; }
.mx-cta .mx-btn--outline:hover { background: #fff; border-color: #fff; color: var(--mx-navy); }

/* 1.4.28: Academy slide viewer (Coupling Academy) */
.mx-deck { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; border-radius: 14px; background: #0b2442; padding: 14px; scrollbar-width: thin; }
.mx-deck:focus { outline: 2px solid var(--mx-amber, #f5a524); outline-offset: 2px; }
.mx-deck-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; position: relative; }
.mx-deck-slide img { display: block; width: 100%; height: auto; border-radius: 8px; background: #fff; }
.mx-deck-slide figcaption { position: absolute; right: 12px; bottom: 10px; background: rgba(11,36,66,.85); color: #fff; font-size: 13px; padding: 3px 10px; border-radius: 20px; }
.mx-deck--doc .mx-deck-slide img { width: auto; max-width: 100%; max-height: 85vh; margin: 0 auto; }
.mx-deck-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; color: #5b6b7d; font-size: 14px; }