/*
Theme Name: MJ Cleaning Equipment
Theme URI: https://example.com/
Author: MJ Cleaning Equipments & Mechanics
Description: Responsive single-page WordPress theme for MJ Cleaning Equipments & Mechanics.
Version: 1.7.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: mj-cleaning
*/

:root {
  --mj-blue: #3e607a;
  --mj-navy: #263b4a;
  --mj-navy-deep: #18242d;
  --mj-orange: #dd691f;
  --mj-orange-dark: #b95014;
  --mj-ink: #17202a;
  --mj-muted: #68717a;
  --mj-line: #dfe3e6;
  --mj-soft: #f5f3ef;
  --mj-soft-2: #f8f7f4;
  --mj-paper: #ffffff;
  --mj-dark: #17191b;
  --mj-radius-lg: 18px;
  --mj-radius: 12px;
  --mj-radius-sm: 8px;
  --mj-max: 1210px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  background: var(--mj-paper);
  color: var(--mj-ink);
  font-family: "Manrope", Arial, sans-serif;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.navigation-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.mj-container { width: min(var(--mj-max), calc(100% - 48px)); margin-inline: auto; }
.mj-kicker {
  margin: 0 0 12px;
  color: var(--mj-orange-dark);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}
.mj-section { padding: 96px 0; }
.mj-section--soft { background: var(--mj-soft-2); border-block: 1px solid #ece9e3; }
.mj-section-head {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(340px, .72fr);
  gap: 72px;
  align-items: end;
  margin-bottom: 38px;
}
.mj-section-head--wide { grid-template-columns: minmax(0, .9fr) minmax(360px, .72fr); }
.mj-section-head h2,
.mj-sales-copy h2,
.mj-cleaning-copy h2,
.mj-contact-intro h2,
.mj-cta h2 {
  margin: 0;
  color: var(--mj-navy-deep);
  font-family: "Barlow", Arial, sans-serif;
  font-size: clamp(2.45rem, 4.2vw, 4rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .98;
}
.mj-section-head > p:last-child,
.mj-sales-copy > p,
.mj-cleaning-copy > p {
  margin: 0;
  color: var(--mj-muted);
  font-size: .96rem;
  line-height: 1.7;
}

/* Buttons / actions */
.mj-button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 20px;
  border: 1px solid var(--mj-dark);
  border-radius: 9px;
  background: var(--mj-dark);
  color: #fff;
  text-decoration: none;
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.mj-button svg { width: 17px; height: 17px; }
.mj-button:hover,
.mj-button:focus-visible { background: #2b2d30; border-color: #2b2d30; transform: translateY(-1px); }
.mj-text-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--mj-navy-deep); font-size: .86rem; font-weight: 800; text-decoration: none; }
.mj-text-arrow span { font-size: 1.35rem; line-height: 1; transform: translateY(-1px); transition: transform .18s ease; }
.mj-text-arrow:hover span { transform: translate(3px, -1px); }

/* Topbar */
.mj-topbar { border-bottom: 1px solid #ebe7e1; background: #f4f1ec; color: var(--mj-ink); }
.mj-topbar-inner { min-height: 35px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.mj-topbar p { margin: 0; }
.mj-topbar-services { display: flex; align-items: center; gap: 9px; color: #5e646a; font-size: .69rem; letter-spacing: .09em; text-transform: uppercase; }
.mj-topbar-services strong { color: var(--mj-navy-deep); font-weight: 800; }
.mj-topbar-services span { color: #c66b2f; }
.mj-topbar-call { display: inline-flex; align-items: center; gap: 8px; color: #3f454b; font-size: .73rem; font-weight: 700; text-decoration: none; }
.mj-topbar-call svg { width: 14px; height: 14px; color: var(--mj-navy-deep); fill: currentColor; stroke: none; }

/* Header */
.mj-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(18, 28, 38, .08);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(8px);
}
.mj-header-inner { min-height: 78px; display: grid; grid-template-columns: 190px 1fr auto; gap: 34px; align-items: center; }
.mj-brand { display: inline-flex; width: 174px; text-decoration: none; }
.mj-brand-image { width: 174px; max-height: 64px; object-fit: contain; object-position: left center; }
.mj-nav { display: flex; justify-content: center; gap: 28px; }
.mj-nav a { position: relative; color: #303840; font-size: .82rem; font-weight: 700; text-decoration: none; }
.mj-nav a::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 0; height: 2px; background: var(--mj-orange); transition: width .18s ease; }
.mj-nav a:hover::after { width: 100%; }
.mj-header-actions { display: flex; align-items: center; gap: 9px; }
.mj-button--header { min-height: 42px; padding-inline: 16px; border-radius: 8px; font-size: .79rem; }
.mj-call-icon {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid #ccd2d7; border-radius: 8px; color: var(--mj-navy-deep); background: #fff; text-decoration: none;
}
.mj-call-icon:hover { border-color: #9fa8af; background: #f8f8f7; }
.mj-call-icon svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.mj-menu-toggle {
  display: none;
  width: 42px; height: 42px; border: 1px solid #ccd2d7; border-radius: 8px; background: #fff; cursor: pointer;
}
.mj-menu-toggle span,
.mj-menu-toggle::before,
.mj-menu-toggle::after {
  content: ""; display: block; width: 18px; height: 2px; margin: 4px auto; background: var(--mj-navy-deep); transition: transform .18s ease, opacity .18s ease;
}
.mj-site-header.is-menu-open .mj-menu-toggle span { opacity: 0; }
.mj-site-header.is-menu-open .mj-menu-toggle::before { transform: translateY(6px) rotate(45deg); }
.mj-site-header.is-menu-open .mj-menu-toggle::after { transform: translateY(-6px) rotate(-45deg); }

/* Hero */
.mj-hero { padding: 18px 0 34px; background: #fff; overflow: hidden; }
.mj-hero-shell {
  height: clamp(520px, calc(100svh - 165px), 650px);
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(430px, 1.04fr);
  gap: 18px;
  padding: 18px;
  border: 1px solid #e8e5df;
  border-radius: var(--mj-radius-lg);
  background: var(--mj-soft);
}
.mj-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 36px 28px 34px 34px; }
.mj-hero-copy h1 {
  margin: 0;
  max-width: 650px;
  color: var(--mj-navy-deep);
  font-family: "Barlow", Arial, sans-serif;
  font-size: clamp(3.5rem, 5.1vw, 5.15rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: .9;
}
.mj-hero-copy h1 span,
.mj-hero-copy h1 em { display: block; }
.mj-hero-copy h1 em { color: var(--mj-orange-dark); font-style: normal; }
.mj-hero-lead { max-width: 590px; margin: 20px 0 0; color: #59636c; font-size: .94rem; line-height: 1.65; }
.mj-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 24px; }
.mj-text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--mj-navy-deep); text-decoration: none; }
.mj-call-dot { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #cfd4d8; border-radius: 50%; background: #fff; color: var(--mj-navy-deep); }
.mj-call-dot svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.mj-text-link small { display: block; color: #7a8289; font-size: .64rem; font-weight: 600; }
.mj-text-link strong { display: block; margin-top: 1px; font-size: .84rem; }
.mj-hero-proof { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 25px; padding-top: 17px; border-top: 1px solid #d9d5ce; color: #444d55; font-size: .71rem; font-weight: 800; }
.mj-hero-proof span { position: relative; padding-left: 11px; }
.mj-hero-proof span::before { content: ""; position: absolute; left: 0; top: .56em; width: 4px; height: 4px; background: var(--mj-orange); }
.mj-hero-media { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 13px; background: #ecebe8; }
.mj-hero-media > img { width: 100%; height: 100%; object-fit: cover; object-position: 57% center; }
.mj-hero-note {
  position: absolute; left: 16px; bottom: 16px; width: min(340px, calc(100% - 32px)); padding: 14px 16px;
  border: 1px solid rgba(20, 31, 41, .08); border-radius: 9px; background: rgba(255,255,255,.94); color: var(--mj-navy-deep);
}
.mj-hero-note strong { display: block; font-size: .84rem; }
.mj-hero-note span { display: block; margin-top: 3px; color: #69727a; font-size: .72rem; line-height: 1.45; }
.mj-location-chip {
  position: absolute; top: 16px; right: 16px; padding: 10px 12px; border: 1px solid rgba(20,31,41,.1); border-radius: 8px; background: rgba(255,255,255,.94); color: var(--mj-navy-deep);
}
.mj-location-chip span { display: block; color: var(--mj-orange-dark); font-size: .57rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.mj-location-chip strong { display: block; margin-top: 2px; font-size: .69rem; }

/* Pathway */
.mj-pathway { padding: 7px 0 0; }
.mj-pathway-label { margin: 0 0 12px; color: #747b81; font-size: .69rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.mj-pathway-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mj-pathway-grid a {
  min-height: 112px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px 19px;
  border: 1px solid var(--mj-line); border-radius: 11px; background: #fff; text-decoration: none; transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.mj-pathway-grid a:hover { transform: translateY(-2px); border-color: #bbc2c8; background: #faf9f7; }
.mj-pathway-num { align-self: start; color: var(--mj-orange-dark); font-size: .72rem; font-weight: 800; }
.mj-pathway-grid strong { display: block; color: var(--mj-navy-deep); font-size: .9rem; }
.mj-pathway-grid small { display: block; margin-top: 4px; color: var(--mj-muted); font-size: .72rem; line-height: 1.45; }
.mj-pathway-arrow { color: #6a737a; font-size: 1.65rem; line-height: 1; transition: transform .18s ease; }
.mj-pathway-grid a:hover .mj-pathway-arrow { transform: translateX(3px); color: var(--mj-navy-deep); }

/* Machines */
.mj-machine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mj-machine-card {
  overflow: hidden; border: 1px solid var(--mj-line); border-radius: 12px; background: #fff;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mj-machine-card:hover { transform: translateY(-2px); border-color: #c2c8cd; box-shadow: 0 12px 26px rgba(23,32,42,.06); }
.mj-machine-image { height: 220px; display: grid; place-items: center; overflow: hidden; background: #f7f7f5; border-bottom: 1px solid #ecebea; }
.mj-machine-image img { width: 100%; height: 100%; object-fit: contain; padding: 18px; transition: transform .22s ease; }
.mj-machine-card:hover .mj-machine-image img { transform: scale(1.02); }
.mj-machine-copy { padding: 19px 20px 21px; }
.mj-machine-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.mj-machine-top span { color: var(--mj-orange-dark); font-size: .7rem; font-weight: 800; }
.mj-machine-top small { color: #858d94; font-size: .6rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.mj-machine-copy h3 { margin: 11px 0 6px; color: var(--mj-navy-deep); font-family: "Barlow", Arial, sans-serif; font-size: 1.35rem; line-height: 1.05; }
.mj-machine-copy p { margin: 0; color: var(--mj-muted); font-size: .78rem; line-height: 1.55; }
.mj-machine-copy ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 15px 0 0; padding: 0; list-style: none; }
.mj-machine-copy li { padding: 5px 7px; border: 1px solid #e0e3e5; border-radius: 6px; background: #fff; color: #5f6870; font-size: .61rem; font-weight: 700; }
.mj-repair-callout {
  margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 19px 21px;
  border: 1px solid #e7d8ca; border-radius: 10px; background: #fbf7f2;
}
.mj-repair-callout > div { display: flex; align-items: center; gap: 14px; }
.mj-repair-callout-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 1px solid #d8c4b2; border-radius: 8px; background: #fff; color: var(--mj-orange-dark); }
.mj-repair-callout-icon svg { width: 19px; height: 19px; }
.mj-repair-callout strong { color: var(--mj-navy-deep); font-size: .85rem; }
.mj-repair-callout p { margin: 2px 0 0; color: var(--mj-muted); font-size: .74rem; }
.mj-repair-callout > a { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; color: var(--mj-navy-deep); font-size: .76rem; font-weight: 800; text-decoration: none; }
.mj-repair-callout > a span { font-size: 1.25rem; transition: transform .18s ease; }
.mj-repair-callout > a:hover span { transform: translateX(3px); }

/* Sales */
.mj-sales-layout { display: grid; grid-template-columns: minmax(400px, .98fr) minmax(0, 1.02fr); gap: 68px; align-items: center; }
.mj-sales-photo { position: relative; overflow: hidden; min-height: 520px; border: 1px solid #e5e2dc; border-radius: 15px; background: #ecebe7; }
.mj-sales-photo img { width: 100%; height: 520px; object-fit: cover; }
.mj-sales-float { position: absolute; left: 14px; bottom: 14px; max-width: 300px; padding: 13px 15px; border: 1px solid rgba(20,31,41,.09); border-radius: 8px; background: rgba(255,255,255,.95); }
.mj-sales-float span { display: block; color: var(--mj-orange-dark); font-size: .6rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.mj-sales-float strong { display: block; margin-top: 3px; color: var(--mj-navy-deep); font-size: .82rem; }
.mj-sales-copy > p { margin-top: 19px; }
.mj-sales-points { margin-top: 26px; border-top: 1px solid #d8d5cf; }
.mj-sales-points > div { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 15px 0; border-bottom: 1px solid #d8d5cf; }
.mj-sales-points span { color: var(--mj-orange-dark); font-size: .7rem; font-weight: 800; }
.mj-sales-points p { margin: 0; color: #68717a; font-size: .77rem; }
.mj-sales-points strong { color: var(--mj-navy-deep); }
.mj-inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 21px; margin-top: 24px; }

/* Cleaning */
.mj-cleaning-section { background: #fff; border-bottom: 1px solid #ece9e3; }
.mj-cleaning-layout { display: grid; grid-template-columns: minmax(0, .86fr) minmax(430px, 1.14fr); gap: 68px; align-items: center; }
.mj-cleaning-copy h2 { color: var(--mj-navy-deep); }
.mj-cleaning-copy > p { margin-top: 19px; color: var(--mj-muted); }
.mj-clean-service-list { margin: 27px 0 26px; border-top: 1px solid var(--mj-line); }
.mj-clean-service-list > div { display: grid; grid-template-columns: 118px 1fr; gap: 17px; align-items: center; min-height: 57px; border-bottom: 1px solid var(--mj-line); }
.mj-clean-service-list span { color: #7c8389; font-size: .65rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.mj-clean-service-list strong { color: #28323a; font-size: .8rem; }
.mj-cleaning-photo { position: relative; overflow: hidden; min-height: 530px; border: 1px solid #e4e1dc; border-radius: 15px; background: #ecebe7; }
.mj-cleaning-photo img { width: 100%; height: 530px; object-fit: cover; }
.mj-cleaning-caption { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 13px 15px; border: 1px solid rgba(20,31,41,.08); border-radius: 8px; background: rgba(255,255,255,.95); }
.mj-cleaning-caption span { display: block; color: var(--mj-orange-dark); font-size: .59rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.mj-cleaning-caption strong { display: block; margin-top: 2px; color: var(--mj-navy-deep); font-size: .79rem; }

/* Process */
.mj-process-layout { display: grid; grid-template-columns: minmax(380px, .94fr) minmax(0, 1.06fr); gap: 58px; align-items: stretch; }
.mj-process-photo { position: relative; overflow: hidden; min-height: 485px; border: 1px solid #e4e1dc; border-radius: 14px; background: #ecebe7; }
.mj-process-photo img { width: 100%; height: 100%; min-height: 485px; object-fit: cover; }
.mj-process-photo > div { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 12px 14px; border: 1px solid rgba(20,31,41,.08); border-radius: 8px; background: rgba(255,255,255,.95); }
.mj-process-photo strong { display: block; color: var(--mj-navy-deep); font-size: .79rem; }
.mj-process-photo span { display: block; margin-top: 2px; color: var(--mj-muted); font-size: .68rem; }
.mj-process-list { border-top: 1px solid var(--mj-line); }
.mj-process-list article { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 21px 0; border-bottom: 1px solid var(--mj-line); }
.mj-process-list article > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #d7d2cb; border-radius: 7px; background: var(--mj-soft-2); color: var(--mj-orange-dark); font-size: .68rem; font-weight: 800; }
.mj-process-list h3 { margin: 0; color: var(--mj-navy-deep); font-size: .9rem; }
.mj-process-list p { margin: 5px 0 0; color: var(--mj-muted); font-size: .77rem; }

/* Contact */
.mj-contact { background: #f7f5f1; border-top: 1px solid #ece8e1; }
.mj-contact-intro { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 31px; }
.mj-contact-intro h2 { max-width: 720px; }
.mj-contact-call { flex: 0 0 auto; padding-bottom: 3px; text-align: right; }
.mj-contact-call > span { display: block; color: #7d8389; font-size: .65rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.mj-contact-call a { display: inline-flex; align-items: center; gap: 8px; margin-top: 3px; color: var(--mj-navy-deep); font-family: "Barlow", Arial, sans-serif; font-size: 1.38rem; font-weight: 700; text-decoration: none; }
.mj-contact-call svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.mj-contact-grid { display: grid; grid-template-columns: minmax(300px, .7fr) minmax(0, 1.3fr); overflow: hidden; border: 1px solid #dedad3; border-radius: 14px; background: #fff; }
.mj-contact-panel { display: flex; flex-direction: column; justify-content: space-between; min-height: 620px; padding: 38px; border-right: 1px solid #dedad3; background: #f0ede7; color: var(--mj-ink); }
.mj-contact-eyebrow { display: inline-block; color: var(--mj-orange-dark); font-size: .63rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.mj-contact-panel h3 { margin: 18px 0 10px; max-width: 330px; color: var(--mj-navy-deep); font-family: "Barlow", Arial, sans-serif; font-size: 2rem; line-height: 1; }
.mj-contact-panel p { margin: 0; color: #697178; font-size: .8rem; }
.mj-contact-details { margin-top: 32px; border-top: 1px solid #d6d1c9; }
.mj-contact-line { padding: 14px 0; border-bottom: 1px solid #d6d1c9; }
.mj-contact-line span { display: block; margin-bottom: 3px; color: #7a807f; font-size: .61rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.mj-contact-line a, .mj-contact-line strong { color: var(--mj-navy-deep); font-size: .79rem; font-weight: 800; text-decoration: none; }
.mj-contact-line small { display: block; margin-top: 3px; color: #80868b; font-size: .63rem; }
.mj-form-wrap { padding: 39px 43px; }
.mj-form-heading { margin-bottom: 24px; }
.mj-form-heading > span { color: var(--mj-orange-dark); font-size: .63rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.mj-form-heading h3 { margin: 5px 0 7px; color: var(--mj-navy-deep); font-family: "Barlow", Arial, sans-serif; font-size: 1.75rem; line-height: 1; }
.mj-form-heading p { margin: 0; max-width: 640px; color: var(--mj-muted); font-size: .76rem; }
.mj-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 14px; }
.mj-field { display: grid; gap: 6px; }
.mj-field--full { grid-column: 1 / -1; }
.mj-field label { color: #364049; font-size: .68rem; font-weight: 800; }
.mj-field input,
.mj-field select,
.mj-field textarea {
  width: 100%; border: 1px solid #cfd3d6; border-radius: 7px; background: #fff; color: var(--mj-ink); padding: 11px 12px; outline: none;
  transition: border-color .18s ease, background .18s ease;
}
.mj-field input,
.mj-field select { height: 46px; }
.mj-field textarea { min-height: 118px; resize: vertical; }
.mj-field input:focus,
.mj-field select:focus,
.mj-field textarea:focus { border-color: #7f8b94; background: #fff; }
.mj-enquiry-choice { grid-column: 1 / -1; }
.mj-enquiry-choice > span { display: block; margin-bottom: 7px; color: #364049; font-size: .68rem; font-weight: 800; }
.mj-type-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.mj-type-option { position: relative; cursor: pointer; }
.mj-type-option input { position: absolute; opacity: 0; pointer-events: none; }
.mj-type-option-inner { min-height: 61px; display: flex; flex-direction: column; justify-content: center; padding: 10px 11px; border: 1px solid #ced3d6; border-radius: 7px; background: #fff; transition: border-color .18s ease, background .18s ease; }
.mj-type-option-inner strong { color: var(--mj-navy-deep); font-size: .71rem; }
.mj-type-option-inner small { margin-top: 2px; color: #7a8187; font-size: .58rem; }
.mj-type-option input:checked + .mj-type-option-inner,
.mj-type-option.is-selected .mj-type-option-inner { border-color: #5e6870; background: #f7f5f1; box-shadow: inset 3px 0 0 var(--mj-orange); }
.mj-form-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 3px; }
.mj-form-note { max-width: 300px; color: #7d8489; font-size: .63rem; }
.mj-form-message { grid-column: 1 / -1; padding: 11px 13px; border: 1px solid #d6dce0; border-radius: 7px; background: #f7f8f8; color: #263846; font-size: .74rem; }
.mj-form-message--success { border-color: #cfe1d5; background: #f1f7f3; color: #21593a; }
.mj-form-message--error { border-color: #ecd2cb; background: #fff6f3; color: #7b2c1f; }
.mj-plugin-placeholder { padding: 20px; border: 1px dashed #b7bdc2; border-radius: 8px; background: #fafafa; }
.mj-plugin-placeholder strong { color: var(--mj-navy-deep); }
.mj-plugin-placeholder p { margin: 6px 0 17px; color: var(--mj-muted); font-size: .76rem; }

/* Final CTA */
.mj-cta { padding: 54px 0; border-top: 1px solid #e6dfd6; background: #f1ece5; }
.mj-cta .mj-kicker { color: var(--mj-orange-dark); }
.mj-cta h2 { max-width: 760px; color: var(--mj-navy-deep); font-size: clamp(2.35rem, 4vw, 3.65rem); }
.mj-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 44px; }
.mj-cta-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 17px; }
.mj-cta-actions > a:not(.mj-button) { color: var(--mj-navy-deep); font-size: .77rem; font-weight: 900; text-decoration: none; }

/* Footer */
.mj-site-footer { padding: 44px 0 31px; background: var(--mj-dark); color: #fff; }
.mj-footer-top { display: grid; grid-template-columns: 1.35fr .65fr .85fr; gap: 52px; padding-bottom: 31px; border-bottom: 1px solid #34373a; }
.mj-footer-logo { display: inline-flex; width: 160px; padding: 6px; border-radius: 8px; background: #fff; }
.mj-footer-logo .mj-brand-image { width: 100%; max-height: 72px; }
.mj-footer-copy { max-width: 420px; margin: 15px 0 0; color: #a7acb0; font-size: .75rem; }
.mj-footer-col h3 { margin: 0 0 12px; color: #fff; font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; }
.mj-footer-links { display: grid; gap: 8px; }
.mj-footer-links a { color: #b5b9bc; font-size: .74rem; text-decoration: none; }
.mj-footer-links a:hover { color: #fff; }
.mj-footer-links small { color: #777f85; font-size: .6rem; }
.mj-footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 21px; color: #7f8589; font-size: .66rem; }
.mj-mobile-actions { display: none; }

@media (max-width: 1120px) {
  .mj-header-inner { grid-template-columns: 164px 1fr auto; gap: 20px; }
  .mj-brand, .mj-brand-image { width: 154px; }
  .mj-nav { gap: 19px; }
  .mj-hero-copy { padding-left: 22px; padding-right: 15px; }
  .mj-hero-copy h1 { font-size: clamp(3.25rem, 5.2vw, 4.6rem); }
  .mj-machine-grid { grid-template-columns: repeat(2, 1fr); }
  .mj-sales-layout, .mj-cleaning-layout { gap: 44px; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 76px; }
  .mj-container { width: min(var(--mj-max), calc(100% - 30px)); }
  .mj-topbar-inner { min-height: 33px; }
  .mj-topbar-call span { display: none; }
  .mj-topbar-call { width: 24px; justify-content: center; }
  .mj-header-inner { min-height: 68px; grid-template-columns: 1fr auto; }
  .mj-brand, .mj-brand-image { width: 142px; max-height: 56px; }
  .mj-button--header { display: none; }
  .mj-call-icon { display: grid; }
  .mj-menu-toggle { display: block; }
  .mj-nav {
    display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; padding: 11px 15px 18px; flex-direction: column; gap: 0;
    background: #fff; border-bottom: 1px solid var(--mj-line); box-shadow: 0 14px 24px rgba(20,27,34,.08);
  }
  .mj-site-header.is-menu-open .mj-nav { display: flex; }
  .mj-nav a { padding: 12px 2px; border-bottom: 1px solid #eceff0; }
  .mj-nav a::after { display: none; }

  .mj-hero { padding-top: 15px; }
  .mj-hero-shell { height: auto; min-height: auto; grid-template-columns: 1fr; gap: 12px; padding: 12px; border-radius: 16px; }
  .mj-hero-copy { order: 1; padding: 44px 28px 35px; }
  .mj-hero-copy h1 { max-width: 720px; font-size: clamp(3.75rem, 10vw, 5.8rem); }
  .mj-hero-media { order: 2; min-height: 440px; }
  .mj-pathway-grid { grid-template-columns: 1fr; }
  .mj-pathway-grid a { min-height: 92px; }
  .mj-section { padding: 78px 0; }
  .mj-section-head, .mj-section-head--wide { grid-template-columns: 1fr; gap: 17px; margin-bottom: 31px; }
  .mj-section-head h2, .mj-sales-copy h2, .mj-cleaning-copy h2, .mj-contact-intro h2 { font-size: clamp(2.65rem, 7.5vw, 3.9rem); }
  .mj-sales-layout, .mj-cleaning-layout, .mj-process-layout { grid-template-columns: 1fr; }
  .mj-sales-photo, .mj-sales-photo img { min-height: 450px; height: 450px; }
  .mj-cleaning-photo, .mj-cleaning-photo img { min-height: 470px; height: 470px; }
  .mj-process-photo { min-height: 410px; }
  .mj-process-photo img { min-height: 410px; }
  .mj-contact-intro { align-items: flex-start; flex-direction: column; gap: 15px; }
  .mj-contact-call { text-align: left; }
  .mj-contact-grid { grid-template-columns: 1fr; }
  .mj-contact-panel { min-height: auto; padding: 34px; border-right: 0; border-bottom: 1px solid #dedad3; }
  .mj-contact-details { margin-top: 28px; }
  .mj-footer-top { grid-template-columns: 1.2fr .8fr .8fr; gap: 28px; }
}

@media (max-width: 620px) {
  body { padding-bottom: 65px; }
  .mj-container { width: min(var(--mj-max), calc(100% - 22px)); }
  .mj-topbar-services { font-size: .62rem; gap: 6px; letter-spacing: .06em; }
  .mj-topbar-call { color: var(--mj-navy-deep); }
  .mj-header-inner { min-height: 64px; }
  .mj-brand, .mj-brand-image { width: 126px; max-height: 52px; }
  .mj-call-icon, .mj-menu-toggle { width: 39px; height: 39px; border-radius: 8px; }

  .mj-hero { padding: 10px 0 31px; }
  .mj-hero-shell { padding: 9px; border-radius: 14px; }
  .mj-hero-copy { padding: 25px 17px 21px; }
  .mj-kicker { margin-bottom: 9px; font-size: .69rem; }
  .mj-hero-copy h1 { font-size: clamp(2.75rem, 13vw, 3.55rem); line-height: .9; }
  .mj-hero-lead { margin-top: 14px; font-size: .82rem; line-height: 1.52; }
  .mj-hero-actions { align-items: stretch; gap: 10px; margin-top: 17px; }
  .mj-hero-actions .mj-button { width: 100%; }
  .mj-text-link { width: 100%; }
  .mj-hero-proof { gap: 6px 12px; margin-top: 16px; padding-top: 12px; font-size: .62rem; }
  .mj-hero-media { min-height: 290px; border-radius: 10px; }
  .mj-hero-media > img { object-position: 60% center; }
  .mj-location-chip { top: 10px; right: 10px; padding: 8px 10px; border-radius: 7px; }
  .mj-location-chip strong { font-size: .61rem; }
  .mj-hero-note { left: 10px; bottom: 10px; width: calc(100% - 20px); padding: 11px 12px; border-radius: 7px; }
  .mj-hero-note strong { font-size: .77rem; }
  .mj-hero-note span { font-size: .66rem; }

  .mj-pathway { padding-top: 0; }
  .mj-pathway-label { font-size: .64rem; }
  .mj-pathway-grid { gap: 8px; }
  .mj-pathway-grid a { min-height: 84px; padding: 14px 14px; border-radius: 9px; }
  .mj-pathway-grid small { font-size: .65rem; }
  .mj-pathway-arrow { font-size: 1.45rem; }

  .mj-section { padding: 62px 0; }
  .mj-section-head h2, .mj-sales-copy h2, .mj-cleaning-copy h2, .mj-contact-intro h2, .mj-cta h2 { font-size: clamp(2.35rem, 12vw, 3.25rem); }
  .mj-section-head > p:last-child, .mj-sales-copy > p, .mj-cleaning-copy > p { font-size: .82rem; }
  .mj-machine-grid { grid-template-columns: 1fr; gap: 10px; }
  .mj-machine-card { display: grid; grid-template-columns: 116px 1fr; min-height: 160px; border-radius: 10px; }
  .mj-machine-image { height: 100%; min-height: 160px; border-bottom: 0; border-right: 1px solid #ecebea; }
  .mj-machine-image img { padding: 10px; }
  .mj-machine-copy { padding: 14px 13px; }
  .mj-machine-copy h3 { margin-top: 8px; font-size: 1.18rem; }
  .mj-machine-copy p { font-size: .69rem; }
  .mj-machine-copy ul { display: none; }
  .mj-machine-top small { display: none; }
  .mj-repair-callout { align-items: stretch; flex-direction: column; gap: 13px; padding: 15px; border-radius: 9px; }
  .mj-repair-callout > a { padding-left: 54px; }

  .mj-sales-layout, .mj-cleaning-layout, .mj-process-layout { gap: 27px; }
  .mj-sales-photo, .mj-sales-photo img { min-height: 325px; height: 325px; border-radius: 11px; }
  .mj-sales-float { left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 11px 12px; border-radius: 7px; }
  .mj-sales-points > div { padding: 12px 0; }
  .mj-sales-points p { font-size: .72rem; }
  .mj-inline-actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .mj-inline-actions .mj-button { width: 100%; }
  .mj-text-arrow { justify-content: center; }

  .mj-clean-service-list { margin-top: 22px; }
  .mj-clean-service-list > div { grid-template-columns: 96px 1fr; gap: 10px; min-height: 53px; }
  .mj-clean-service-list strong { font-size: .72rem; }
  .mj-cleaning-photo, .mj-cleaning-photo img { min-height: 320px; height: 320px; border-radius: 11px; }
  .mj-cleaning-caption { left: 10px; right: 10px; bottom: 10px; border-radius: 7px; }

  .mj-process-photo { min-height: 295px; border-radius: 10px; }
  .mj-process-photo img { min-height: 295px; }
  .mj-process-photo > div { left: 10px; right: 10px; bottom: 10px; border-radius: 7px; }
  .mj-process-list article { grid-template-columns: 41px 1fr; gap: 12px; padding: 17px 0; }
  .mj-process-list article > span { width: 31px; height: 31px; border-radius: 6px; }
  .mj-process-list p { font-size: .7rem; }

  .mj-contact-intro { margin-bottom: 21px; }
  .mj-contact-call a { font-size: 1.24rem; }
  .mj-contact-grid { border-radius: 11px; }
  .mj-contact-panel, .mj-form-wrap { padding: 24px 18px; }
  .mj-contact-panel h3 { font-size: 1.75rem; }
  .mj-form-heading { margin-bottom: 19px; }
  .mj-form { grid-template-columns: 1fr; }
  .mj-field--full, .mj-enquiry-choice, .mj-form-footer, .mj-form-message { grid-column: auto; }
  .mj-type-options { grid-template-columns: 1fr; gap: 6px; }
  .mj-type-option-inner { min-height: 50px; }
  .mj-form-footer { align-items: stretch; flex-direction: column; }
  .mj-form-footer .mj-button { width: 100%; }
  .mj-form-note { max-width: none; }

  .mj-cta { padding: 43px 0; }
  .mj-cta-inner { align-items: stretch; flex-direction: column; gap: 21px; }
  .mj-cta-actions { align-items: stretch; flex-direction: column; gap: 11px; }
  .mj-cta-actions .mj-button { width: 100%; }
  .mj-cta-actions > a:not(.mj-button) { text-align: center; }

  .mj-site-footer { padding-bottom: 26px; }
  .mj-footer-top { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .mj-footer-brand { grid-column: 1 / -1; }
  .mj-footer-logo { width: 145px; }
  .mj-footer-bottom { flex-direction: column; gap: 5px; }

  .mj-mobile-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: .8fr 1.2fr; min-height: 65px;
    border-top: 1px solid #d9dddf; background: #fff; box-shadow: 0 -8px 20px rgba(20,27,34,.08);
  }
  .mj-mobile-actions a { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--mj-navy-deep); font-size: .74rem; font-weight: 800; text-decoration: none; }
  .mj-mobile-actions a:first-child { border-right: 1px solid #e0e3e5; }
  .mj-mobile-actions a:last-child { background: var(--mj-dark); color: #fff; }
  .mj-mobile-actions svg { width: 17px; height: 17px; }
  .mj-mobile-actions a:first-child svg { fill: var(--mj-navy-deep); stroke: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}


/* =========================================================
   v1.3 — Desktop balance + mobile refinement
   Brand blue is now used as a text/detail colour, not a large background.
   ========================================================= */
@media (min-width: 901px) {
  .mj-hero {
    min-height: calc(100svh - 113px);
    display: flex;
    align-items: center;
    padding: 18px 0 26px;
  }
  .mj-hero-shell {
    width: min(1260px, calc(100% - 48px));
    height: clamp(590px, calc(100svh - 157px), 760px);
    min-height: 590px;
    grid-template-columns: minmax(410px, .82fr) minmax(0, 1.18fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-color: #e3e0da;
    border-radius: 18px;
    background: #fff;
  }
  .mj-hero-copy {
    padding: 50px 46px 46px;
    background: #f7f5f1;
  }
  .mj-hero-copy h1 {
    max-width: 530px;
    font-size: clamp(3.4rem, 4.35vw, 4.7rem);
    line-height: .93;
    letter-spacing: -.045em;
  }
  .mj-hero-copy h1 span { white-space: nowrap; }
  .mj-hero-lead { max-width: 485px; margin-top: 18px; font-size: .91rem; }
  .mj-hero-actions { margin-top: 22px; }
  .mj-hero-proof { margin-top: 23px; padding-top: 15px; }
  .mj-hero-media { border-radius: 0; }
  .mj-hero-media > img { object-position: 51% 50%; }
  .mj-hero-note { left: 19px; bottom: 19px; }
  .mj-location-chip { top: 19px; right: 19px; }

  .mj-pathway { padding-top: 18px; }
  .mj-pathway-grid { gap: 14px; }
  .mj-pathway-grid a { min-height: 106px; padding: 18px 20px; }

  .mj-section { padding: 88px 0; }
  .mj-section-head,
  .mj-section-head--wide {
    grid-template-columns: minmax(0, 1.05fr) minmax(350px, .78fr);
    gap: 56px;
    margin-bottom: 34px;
  }
  .mj-section-head h2,
  .mj-sales-copy h2,
  .mj-cleaning-copy h2,
  .mj-contact-intro h2,
  .mj-cta h2 {
    font-size: clamp(2.55rem, 3.55vw, 3.55rem);
    line-height: 1;
  }
  .mj-machine-grid { gap: 14px; }
  .mj-machine-image { height: 205px; }
  .mj-machine-copy { padding: 18px 19px 20px; }

  .mj-sales-layout {
    grid-template-columns: minmax(0, 1.03fr) minmax(410px, .97fr);
    gap: 74px;
  }
  .mj-sales-photo,
  .mj-sales-photo img { min-height: 490px; height: 490px; }
  .mj-cleaning-layout {
    grid-template-columns: minmax(410px, .92fr) minmax(0, 1.08fr);
    gap: 74px;
  }
  .mj-cleaning-photo,
  .mj-cleaning-photo img { min-height: 500px; height: 500px; }
  .mj-process-layout {
    grid-template-columns: minmax(420px, .98fr) minmax(0, 1.02fr);
    gap: 68px;
  }
  .mj-process-photo,
  .mj-process-photo img { min-height: 460px; }
  .mj-contact-grid { grid-template-columns: minmax(315px, .68fr) minmax(0, 1.32fr); }
  .mj-contact-panel { min-height: 590px; }
}

/* quieter brand application */
.mj-topbar-services span { color: #a2a7ab; }
.mj-call-icon,
.mj-call-dot,
.mj-topbar-call svg,
.mj-contact-call a,
.mj-mobile-actions a:first-child,
.mj-mobile-actions a:first-child svg { color: #28343d; }
.mj-call-icon { background: #fff; }
.mj-call-dot { border-radius: 9px; }
.mj-hero-proof span::before { background: #c9a28a; }
.mj-cta { background: #f6f3ee; }
.mj-site-footer { background: #1b1c1e; }

/* arrows should read like controls, not decorative chevrons */
.mj-pathway-arrow { width: 24px; height: 24px; display: grid; place-items: center; color: #6b7379; font-size: 0; }
.mj-pathway-arrow svg { width: 19px; height: 19px; stroke-width: 1.65; }
.mj-pathway-grid a:hover .mj-pathway-arrow { transform: translateX(2px); }
.mj-repair-callout > a svg,
.mj-text-arrow svg { width: 17px; height: 17px; transition: transform .18s ease; }
.mj-repair-callout > a:hover svg,
.mj-text-arrow:hover svg { transform: translateX(3px); }

@media (max-width: 900px) {
  .mj-hero-shell { background: #fff; }
  .mj-hero-copy { background: #f7f5f1; border-radius: 11px; }
  .mj-hero-copy h1 { font-size: clamp(3.2rem, 9.4vw, 4.9rem); line-height: .92; }
  .mj-hero-copy h1 span { white-space: normal; }
  .mj-hero-media { min-height: 390px; }
  .mj-section { padding: 70px 0; }
}

@media (max-width: 620px) {
  .mj-container { width: min(var(--mj-max), calc(100% - 20px)); }
  .mj-header-inner { min-height: 62px; }
  .mj-brand, .mj-brand-image { width: 122px; }

  .mj-hero { padding: 9px 0 27px; }
  .mj-hero-shell { gap: 9px; padding: 8px; border-radius: 13px; }
  .mj-hero-copy { padding: 23px 16px 19px; border-radius: 9px; }
  .mj-hero-copy h1 { font-size: clamp(2.65rem, 12.2vw, 3.25rem); line-height: .93; }
  .mj-hero-lead { max-width: 340px; margin-top: 12px; font-size: .79rem; line-height: 1.48; }
  .mj-hero-actions { gap: 8px; margin-top: 15px; }
  .mj-button { min-height: 47px; }
  .mj-text-link { gap: 9px; }
  .mj-call-dot { width: 36px; height: 36px; border-radius: 8px; }
  .mj-hero-proof { margin-top: 14px; padding-top: 11px; gap: 5px 11px; }
  .mj-hero-media { min-height: 270px; border-radius: 9px; }
  .mj-hero-note { padding: 10px 11px; }
  .mj-location-chip { max-width: 190px; }

  .mj-pathway-grid a { min-height: 78px; padding: 12px 13px; }
  .mj-pathway-grid strong { font-size: .82rem; }
  .mj-pathway-grid small { margin-top: 2px; font-size: .62rem; }
  .mj-pathway-arrow { width: 21px; height: 21px; }
  .mj-pathway-arrow svg { width: 17px; height: 17px; }

  .mj-section { padding: 56px 0; }
  .mj-section-head,
  .mj-section-head--wide { gap: 13px; margin-bottom: 25px; }
  .mj-section-head h2,
  .mj-sales-copy h2,
  .mj-cleaning-copy h2,
  .mj-contact-intro h2,
  .mj-cta h2 { font-size: clamp(2.15rem, 10.8vw, 2.85rem); line-height: 1; }
  .mj-machine-card { grid-template-columns: 108px 1fr; min-height: 150px; }
  .mj-machine-image { min-height: 150px; }
  .mj-machine-copy { padding: 13px 12px; }
  .mj-machine-copy h3 { font-size: 1.12rem; }

  .mj-sales-layout,
  .mj-cleaning-layout,
  .mj-process-layout { gap: 23px; }
  .mj-sales-photo,
  .mj-sales-photo img { min-height: 292px; height: 292px; }
  .mj-cleaning-photo,
  .mj-cleaning-photo img { min-height: 296px; height: 296px; }
  .mj-process-photo,
  .mj-process-photo img { min-height: 278px; }

  .mj-contact-intro { gap: 12px; margin-bottom: 18px; }
  .mj-contact-grid { border-radius: 10px; }
  .mj-contact-panel,
  .mj-form-wrap { padding: 21px 16px; }
  .mj-contact-panel h3 { margin-top: 13px; font-size: 1.62rem; }
  .mj-contact-details { margin-top: 22px; }
  .mj-contact-line { padding: 12px 0; }
  .mj-type-option-inner { min-height: 47px; }
  .mj-field input,
  .mj-field select { height: 44px; }
  .mj-field textarea { min-height: 105px; }
  .mj-cta { padding: 38px 0; }
}

/* =========================================================
   v1.4 — cleaner hero, single brand band, aligned pathways
   ========================================================= */

/* Keep the strong brand background to one small utility band only. */
.mj-topbar {
  border-bottom: 0;
  background: #263f52;
  color: #fff;
}
.mj-topbar-services { color: rgba(255,255,255,.72); }
.mj-topbar-services strong { color: #fff; }
.mj-topbar-services span { color: #f08a3b; }
.mj-topbar-offer {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  text-decoration: none;
}
.mj-offer-mark {
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 5px;
  color: #ffd1ad;
  font-size: .57rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Avoid large tinted page backgrounds. */
.mj-section--soft,
.mj-contact,
.mj-cta { background: #fff; }
.mj-contact-panel { background: #fff; }
.mj-repair-callout { background: #fff; border-color: #e0e3e5; }
.mj-process-list article > span { background: #fff; }

/* Hero: fewer objects, stronger order, no large coloured panel. */
.mj-hero {
  overflow: hidden;
  background: #fff;
}
.mj-hero-shell {
  display: grid;
  background: #fff;
}
.mj-hero-intro,
.mj-hero-details { min-width: 0; }
.mj-hero-intro h1 {
  margin: 0;
  color: var(--mj-navy-deep);
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: .91;
}
.mj-hero-intro h1 span,
.mj-hero-intro h1 em { display: block; }
.mj-hero-intro h1 em { color: var(--mj-orange-dark); font-style: normal; }
.mj-hero-lead { margin: 0; color: #59636c; }
.mj-hero-details .mj-hero-actions { margin-top: 22px; }
.mj-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 17px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #e2e4e5;
  color: #555f67;
  font-size: .69rem;
  font-weight: 700;
}
.mj-hero-meta > span:not(.mj-hero-address) {
  position: relative;
  padding-left: 10px;
}
.mj-hero-meta > span:not(.mj-hero-address)::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 3px;
  height: 3px;
  background: #c57b4e;
}
.mj-hero-address {
  flex-basis: 100%;
  color: #7a8289;
  font-weight: 600;
}
.mj-hero-media {
  position: relative;
  overflow: hidden;
  border: 1px solid #e4e6e7;
  background: #f4f4f2;
}
.mj-hero-media > img { width: 100%; height: 100%; object-fit: cover; }

/* Service chooser: make every card share exactly the same internal rhythm. */
.mj-pathway { padding-top: 8px; }
.mj-pathway-grid { gap: 12px; }
.mj-pathway-grid a {
  position: relative;
  display: block;
  min-height: 116px;
  padding: 20px 52px 19px 19px;
  border: 1px solid #dfe3e6;
  border-radius: 10px;
  background: #fff;
}
.mj-pathway-head {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}
.mj-pathway-num { align-self: auto; line-height: 1.2; }
.mj-pathway-grid strong { line-height: 1.28; }
.mj-pathway-grid small {
  min-height: 38px;
  margin: 7px 0 0 38px;
  line-height: 1.48;
}
.mj-pathway-arrow {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}
.mj-pathway-grid a:hover .mj-pathway-arrow { transform: translate(2px, -50%); }

/* Normalised machine art: same canvas and baseline across desktop cards. */
.mj-machine-image {
  height: 210px;
  display: block;
  background: #fff;
}
.mj-machine-image img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  object-position: center;
}
.mj-machine-card:hover .mj-machine-image img { transform: none; }
.mj-machine-copy { min-height: 205px; }
.mj-machine-copy h3 { min-height: 2.1em; }

/* Contact: both phone numbers are simply phone numbers, not primary/secondary. */
.mj-contact-phones { display: flex; flex-wrap: wrap; gap: 7px 16px; }
.mj-contact-phones a { white-space: nowrap; }
.mj-footer-links small { display: none; }

@media (min-width: 901px) {
  .mj-hero {
    min-height: calc(100svh - 113px);
    display: flex;
    align-items: center;
    padding: 28px 0 40px;
  }
  .mj-hero-shell {
    width: min(var(--mj-max), calc(100% - 48px));
    min-height: clamp(560px, calc(100svh - 178px), 690px);
    height: auto;
    grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.18fr);
    grid-template-rows: 1fr 1fr;
    column-gap: 62px;
    row-gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .mj-hero-intro {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    padding: 0 0 17px 0;
  }
  .mj-hero-details {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    padding-top: 17px;
  }
  .mj-hero-intro h1 {
    max-width: 510px;
    font-size: clamp(3.7rem, 4.55vw, 4.95rem);
  }
  .mj-hero-lead {
    max-width: 500px;
    font-size: .92rem;
    line-height: 1.65;
  }
  .mj-hero-media {
    grid-column: 2;
    grid-row: 1 / 3;
    min-height: 560px;
    border-radius: 15px;
  }
  .mj-hero-media > img { object-position: 54% center; }
  .mj-hero-meta { max-width: 500px; }

  .mj-pathway { padding-top: 4px; }
  .mj-pathway-grid a { min-height: 120px; }

  .mj-machine-grid { align-items: stretch; }
  .mj-machine-card { display: flex; flex-direction: column; }
  .mj-machine-copy { flex: 1; }
}

@media (max-width: 900px) {
  .mj-topbar-offer { font-size: .66rem; }
  .mj-hero { padding: 22px 0 34px; }
  .mj-hero-shell {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .mj-hero-intro { order: 1; padding: 8px 4px 0; }
  .mj-hero-media { order: 2; min-height: 390px; border-radius: 12px; }
  .mj-hero-details { order: 3; padding: 0 4px; }
  .mj-hero-intro h1 { font-size: clamp(3.4rem, 9.8vw, 5.2rem); }
  .mj-hero-lead { max-width: 620px; font-size: .86rem; line-height: 1.58; }
  .mj-hero-details .mj-hero-actions { margin-top: 17px; }
  .mj-hero-meta { margin-top: 18px; padding-top: 14px; }
  .mj-pathway-grid a { min-height: 94px; }
  .mj-machine-copy { min-height: 0; }
  .mj-machine-copy h3 { min-height: 0; }
}

@media (max-width: 620px) {
  .mj-topbar-inner { gap: 12px; }
  .mj-topbar-services { flex: 0 0 auto; }
  .mj-topbar-offer {
    min-width: 0;
    gap: 6px;
    font-size: .58rem;
    line-height: 1.2;
    text-align: right;
  }
  .mj-offer-mark { padding: 2px 4px; font-size: .5rem; }

  .mj-hero { padding: 15px 0 29px; }
  .mj-hero-shell { gap: 13px; }
  .mj-hero-intro { padding: 8px 4px 0; }
  .mj-hero-intro .mj-kicker { margin-bottom: 8px; }
  .mj-hero-intro h1 {
    font-size: clamp(2.75rem, 12.3vw, 3.35rem);
    line-height: .92;
  }
  .mj-hero-media {
    min-height: 248px;
    height: 248px;
    border-radius: 10px;
  }
  .mj-hero-media > img { object-position: 58% center; }
  .mj-hero-details { padding: 1px 4px 0; }
  .mj-hero-lead { max-width: 350px; font-size: .79rem; line-height: 1.5; }
  .mj-hero-details .mj-hero-actions {
    align-items: stretch;
    gap: 9px;
    margin-top: 14px;
  }
  .mj-hero-details .mj-button { width: 100%; }
  .mj-hero-details .mj-text-link { width: 100%; }
  .mj-hero-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px;
    margin-top: 14px;
    padding-top: 12px;
    font-size: .61rem;
  }
  .mj-hero-address { grid-column: 1 / -1; }

  .mj-pathway { padding-top: 2px; }
  .mj-pathway-label { margin-bottom: 9px; }
  .mj-pathway-grid { gap: 7px; }
  .mj-pathway-grid a {
    min-height: 90px;
    padding: 14px 42px 13px 13px;
  }
  .mj-pathway-head { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; }
  .mj-pathway-grid strong { font-size: .8rem; }
  .mj-pathway-grid small {
    min-height: 0;
    margin: 5px 0 0 32px;
    font-size: .62rem;
  }
  .mj-pathway-arrow { right: 12px; }

  /* Keep the compact horizontal mobile machine cards from v1.3. */
  .mj-machine-image { height: 100%; min-height: 150px; }
  .mj-machine-image img { object-fit: cover; }

  .mj-contact-panel { border-bottom-color: #e3e5e6; }
  .mj-contact-phones { gap: 5px 13px; }
}

.mj-machine-image picture { display: block; width: 100%; height: 100%; }
.mj-machine-image picture img { width: 100%; height: 100%; }
@media (max-width: 620px) {
  .mj-machine-image picture img { object-fit: contain; padding: 10px; }
}

@media (min-width: 621px) {
  .mj-machine-image { height: auto; aspect-ratio: 1200 / 650; }
}
@media (max-width: 900px) {
  .mj-hero-shell { grid-template-areas: "intro" "media" "details"; }
  .mj-hero-intro { grid-area: intro; }
  .mj-hero-media { grid-area: media; }
  .mj-hero-details { grid-area: details; }
}
@media (max-width: 620px) {
  .mj-machine-image { aspect-ratio: auto; height: 100%; }
  .mj-topbar-offer > span:last-child { display: none; }
  .mj-offer-mark { color: #fff; border-color: rgba(255,255,255,.34); }
}


/* =========================================================
   v1.5 — orange actions, cleaner hero, tighter service chooser
   ========================================================= */

/* Orange is the primary action colour throughout the site. */
.mj-button {
  border-color: var(--mj-orange);
  background: var(--mj-orange);
  color: #fff;
}
.mj-button:hover,
.mj-button:focus-visible {
  border-color: var(--mj-orange-dark);
  background: var(--mj-orange-dark);
}
.mj-mobile-actions a:last-child {
  background: var(--mj-orange);
  color: #fff;
}
.mj-mobile-actions a:last-child:hover { background: var(--mj-orange-dark); }

/* Utility band: brand descriptor instead of a promotional badge. */
.mj-topbar-message {
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .015em;
  text-align: right;
}

/* Hero: one aligned content column opposite the workshop image. */
.mj-hero-support {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e2e4e5;
}
.mj-hero-support > div,
.mj-hero-workshop {
  min-width: 0;
  padding: 0;
  text-decoration: none;
}
.mj-hero-support span {
  display: block;
  margin-bottom: 3px;
  color: var(--mj-orange-dark);
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.mj-hero-support strong {
  display: block;
  color: #3f4a52;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.42;
}
.mj-hero-workshop {
  grid-column: 1 / -1;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid #eceeef;
}
.mj-hero-workshop strong { color: #68717a; font-weight: 600; }
.mj-hero-workshop:hover strong { color: var(--mj-navy-deep); }

/* Service chooser: equal vertical padding and truly centred content. */
.mj-pathway-grid a {
  min-height: 98px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 24px;
  gap: 12px;
  align-items: center;
  align-content: center;
  padding: 15px 17px;
}
.mj-pathway-num {
  align-self: center;
  line-height: 1;
}
.mj-pathway-copy { min-width: 0; }
.mj-pathway-copy strong {
  display: block;
  line-height: 1.28;
}
.mj-pathway-copy small {
  display: block;
  min-height: 0;
  margin: 5px 0 0;
  line-height: 1.42;
}
.mj-pathway-arrow {
  position: static;
  transform: none;
  justify-self: end;
}
.mj-pathway-grid a:hover .mj-pathway-arrow { transform: translateX(2px); }

@media (min-width: 901px) {
  .mj-hero {
    min-height: calc(100svh - 113px);
    padding: 24px 0 34px;
  }
  .mj-hero-shell {
    min-height: 550px;
    grid-template-columns: minmax(390px, .88fr) minmax(520px, 1.12fr);
    grid-template-rows: auto auto;
    column-gap: 70px;
    row-gap: 20px;
    align-content: center;
  }
  .mj-hero-intro {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    padding: 0;
  }
  .mj-hero-details {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    padding: 0;
  }
  .mj-hero-intro h1 {
    max-width: 550px;
    font-size: clamp(3.35rem, 4.05vw, 4.45rem);
    line-height: .93;
  }
  .mj-hero-intro h1 span { white-space: nowrap; }
  .mj-hero-media {
    grid-column: 2;
    grid-row: 1 / 3;
    min-height: 550px;
    height: min(65vh, 620px);
    align-self: center;
  }
  .mj-hero-lead { max-width: 510px; }
  .mj-hero-details .mj-hero-actions { margin-top: 20px; }
  .mj-hero-support { max-width: 510px; margin-top: 22px; }
  .mj-pathway { padding-top: 2px; }
  .mj-pathway-grid a { min-height: 98px; }
}

@media (max-width: 900px) {
  .mj-topbar-message { font-size: .64rem; }
  .mj-hero-support { margin-top: 17px; padding-top: 13px; }
}

@media (max-width: 620px) {
  .mj-topbar-message {
    max-width: 180px;
    font-size: .54rem;
    line-height: 1.25;
  }
  .mj-hero { padding-top: 14px; }
  .mj-hero-shell { gap: 12px; }
  .mj-hero-intro h1 {
    font-size: clamp(2.55rem, 11.5vw, 3.1rem);
    line-height: .94;
  }
  .mj-hero-intro h1 span { white-space: nowrap; }
  .mj-hero-details .mj-hero-actions { margin-top: 13px; }
  .mj-hero-support {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 13px;
    margin-top: 13px;
    padding-top: 11px;
  }
  .mj-hero-support span { font-size: .5rem; }
  .mj-hero-support strong { font-size: .61rem; }
  .mj-hero-workshop { margin-top: 10px; padding-top: 9px; }

  .mj-pathway-grid a {
    min-height: 76px;
    grid-template-columns: 24px minmax(0, 1fr) 20px;
    gap: 9px;
    padding: 11px 12px;
  }
  .mj-pathway-grid strong { font-size: .79rem; }
  .mj-pathway-copy small { margin-top: 3px; font-size: .61rem; }
  .mj-pathway-arrow { right: auto; }
}

/* =========================================================
   v1.5.1 — final alignment pass
   ========================================================= */

/* Keep the top utility line confident and concise. */
.mj-topbar-message {
  font-weight: 800;
  letter-spacing: .025em;
}

/* Hero support should feel like part of the hero, not a separate card. */
@media (min-width: 901px) {
  .mj-hero-shell {
    grid-template-columns: minmax(390px, .9fr) minmax(520px, 1.1fr);
    column-gap: 58px;
  }
  .mj-hero-intro,
  .mj-hero-details { max-width: 520px; }
  .mj-hero-support {
    grid-template-columns: .9fr .9fr 1.2fr;
    gap: 18px;
    align-items: start;
    max-width: 520px;
    margin-top: 20px;
    padding-top: 14px;
  }
  .mj-hero-workshop {
    grid-column: auto;
    margin-top: 0;
    padding-top: 0;
    padding-left: 18px;
    border-top: 0;
    border-left: 1px solid #e2e4e5;
  }
  .mj-hero-support > div:nth-child(2) {
    padding-left: 18px;
    border-left: 1px solid #e2e4e5;
  }
  .mj-hero-support strong { font-size: .66rem; }
  .mj-hero-media {
    min-height: 525px;
    height: min(61vh, 590px);
  }
}

/* Equal top/bottom rhythm in the three service choices. */
.mj-pathway-grid a {
  min-height: 94px;
  padding-top: 14px;
  padding-bottom: 14px;
}

@media (max-width: 900px) {
  .mj-hero-support {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mj-hero-workshop {
    grid-column: 1 / -1;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid #eceeef;
    border-left: 0;
  }
}

@media (max-width: 620px) {
  .mj-topbar-message { max-width: 176px; }
  .mj-pathway-grid a {
    min-height: 72px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}


/* =========================================================
   v1.6 — final brand bar, cleaner hero utility strip, refined actions
   ========================================================= */

/* One confident descriptor across the top utility bar. */
.mj-topbar-inner {
  justify-content: center;
}
.mj-topbar-message {
  width: 100%;
  max-width: none;
  text-align: center;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

/* Hero utility details: compact, intentional and easier to scan. */
.mj-hero-support {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  max-width: 520px;
  margin-top: 21px;
  padding-top: 15px;
}
.mj-hero-support-item,
.mj-hero-workshop {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0 14px;
  border: 0;
  text-decoration: none;
}
.mj-hero-support-item:first-child { padding-left: 0; }
.mj-hero-support-item + .mj-hero-support-item,
.mj-hero-workshop {
  border-left: 1px solid #e2e4e5;
}
.mj-hero-support-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--mj-orange-dark);
}
.mj-hero-support-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
}
.mj-hero-support-copy { min-width: 0; }
.mj-hero-support span:not(.mj-hero-support-icon) {
  margin: 0 0 2px;
  color: #7a8187;
  font-size: .5rem;
  letter-spacing: .085em;
}
.mj-hero-support strong {
  color: #36414a;
  font-size: .64rem;
  line-height: 1.32;
}
.mj-hero-workshop {
  grid-column: auto;
  margin-top: 0;
  padding-top: 0;
}
.mj-hero-workshop strong { color: #36414a; font-weight: 700; }

/* Refine small directional cues: chevrons, not long drawn arrows. */
.mj-pathway-arrow {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #616b73;
}
.mj-pathway-arrow svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
}
.mj-pathway-grid a:hover .mj-pathway-arrow {
  color: var(--mj-orange-dark);
  transform: translateX(1px);
}
.mj-repair-callout > a svg,
.mj-text-arrow svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
}

/* New-equipment questions read as label + answer, never as one run-on line. */
.mj-sales-points p strong {
  display: block;
  margin-bottom: 3px;
}

@media (min-width: 901px) {
  .mj-hero-support {
    max-width: 520px;
  }
}

@media (max-width: 900px) {
  .mj-topbar-message { font-size: .62rem; }
  .mj-hero-support {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  .mj-hero-workshop {
    grid-column: auto;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    border-left: 1px solid #e2e4e5;
  }
}

@media (max-width: 620px) {
  .mj-topbar-inner { min-height: 34px; }
  .mj-topbar-message {
    max-width: none;
    font-size: .53rem;
    line-height: 1.2;
    letter-spacing: .07em;
    text-align: center;
  }
  .mj-hero-support {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 14px;
    padding-top: 7px;
  }
  .mj-hero-support-item,
  .mj-hero-workshop {
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 9px;
    padding: 8px 0;
    border-left: 0;
    border-top: 1px solid #eceeef;
  }
  .mj-hero-support-item:first-child { border-top: 0; }
  .mj-hero-support-icon { width: 27px; height: 27px; }
  .mj-hero-support-icon svg { width: 18px; height: 18px; }
  .mj-hero-support span:not(.mj-hero-support-icon) { font-size: .49rem; }
  .mj-hero-support strong { font-size: .62rem; }
}


/* =========================================================
   v1.7 — mobile header balance
   Call left • logo centered • menu right
   ========================================================= */
@media (max-width: 900px) {
  .mj-header-inner {
    position: relative;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    grid-template-areas: "call brand menu";
    gap: 12px;
  }
  .mj-brand {
    grid-area: brand;
    justify-self: center;
    width: 128px;
  }
  .mj-brand-image {
    width: 128px;
    max-height: 54px;
    object-position: center;
  }
  .mj-header-actions { display: contents; }
  .mj-call-icon {
    grid-area: call;
    justify-self: start;
  }
  .mj-menu-toggle {
    grid-area: menu;
    justify-self: end;
  }
  .mj-nav {
    grid-area: nav;
    z-index: 3;
  }
}

@media (max-width: 620px) {
  .mj-header-inner {
    grid-template-columns: 39px minmax(0, 1fr) 39px;
    gap: 10px;
  }
  .mj-brand,
  .mj-brand-image {
    width: 112px;
    max-height: 48px;
  }
}