/* ==========================================================================
   Manual J Pro — shared stylesheet
   Base tokens carried over verbatim from the approved design template, plus
   hover/focus utility classes (compiled from the template's style-hover /
   style-focus attributes) and a responsive layer for phones and tablets.
   ========================================================================== */

html, body { margin: 0; padding: 0; background: #F2F1EC; }
body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: #15191E;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: #C94F27; text-decoration: none; }
a:hover { color: #15191E; }
img { max-width: 100%; }
input[type=range] { accent-color: #E8623C; }
::selection { background: #E8623C; color: #fff; }
@keyframes mjp-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Hover utilities (map 1:1 to the template's style-hover values) -------- */
.hv-white:hover            { color: #fff !important; }
.hv-invert:hover           { background: #fff !important; color: #15191E !important; }
.hv-bd-orange:hover        { border-color: #E8623C !important; }
.hv-bg-orange:hover        { background: #E8623C !important; }
.hv-bg-orange-white:hover  { background: #E8623C !important; color: #fff !important; }
.hv-bd-white:hover         { border-color: #fff !important; color: #fff !important; }
.hv-dark:hover             { background: #15191E !important; color: #fff !important; }
.hv-chip-orange:hover      { background: rgba(232,98,60,0.15) !important; color: #E8623C !important; }
.hv-chip-purple:hover      { background: rgba(154,123,214,0.15) !important; color: #B29AE8 !important; }
.hv-chip-blue:hover        { background: rgba(60,167,196,0.15) !important; color: #3CA7C4 !important; }

/* --- Focus utility (form inputs) ------------------------------------------ */
.fc-orange:focus { border-color: #E8623C !important; background: #fff !important; }

/* --- Page wrapper: desktop keeps the fixed min width; mobile goes fluid ---- */
.mjp-page { min-width: 1100px; }

/* --- Article body typography (migrated blog posts) ------------------------ */
.mjp-article { font-size: 17px; line-height: 1.75; color: rgba(21,25,30,0.86); }
.mjp-article > *:first-child { margin-top: 0; }
.mjp-article h2 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 28px;
  letter-spacing: -0.01em; color: #15191E; margin: 48px 0 14px; line-height: 1.2;
}
.mjp-article h3 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 21px;
  color: #15191E; margin: 34px 0 10px; line-height: 1.25;
}
.mjp-article h4 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 17.5px;
  color: #15191E; margin: 26px 0 8px;
}
.mjp-article p { margin: 0 0 20px; }
.mjp-article ul, .mjp-article ol { margin: 0 0 22px; padding-left: 24px; }
.mjp-article li { margin-bottom: 9px; }
.mjp-article a { color: #C94F27; text-decoration: underline; text-underline-offset: 2px; }
.mjp-article a:hover { color: #15191E; }
.mjp-article strong { color: #15191E; font-weight: 600; }
.mjp-article blockquote {
  margin: 26px 0; padding: 4px 0 4px 22px; border-left: 3px solid #E8623C;
  color: rgba(21,25,30,0.7); font-size: 18px;
}
.mjp-article img { border-radius: 12px; margin: 12px 0; }
.mjp-article table {
  width: 100%; border-collapse: collapse; margin: 8px 0 26px; font-size: 15px;
}
.mjp-article th, .mjp-article td {
  border: 1px solid rgba(21,25,30,0.12); padding: 11px 14px; text-align: left; vertical-align: top;
}
.mjp-article th { background: #F8F7F4; font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #15191E; }
.mjp-article figure { margin: 20px 0; }
.mjp-article hr { border: none; border-top: 1px solid rgba(21,25,30,0.12); margin: 36px 0; }
.mjp-article-wrap { overflow-x: auto; }

/* --- Navigation bar (shared chrome) --------------------------------------- */
.mjp-navbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(21,25,30,0.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mjp-navbar-accent { height: 3px; background: linear-gradient(90deg,#E8623C 0%,#3CA7C4 100%); }
.mjp-navbar-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 32px; height: 68px;
  display: flex; align-items: center; justify-content: space-between; position: relative;
}
.mjp-logo { display: flex; align-items: center; gap: 12px; color: #fff; }
.mjp-logo:hover { color: #fff; }
.mjp-logo-mark {
  width: 32px; height: 32px; border-radius: 7px;
  background: linear-gradient(135deg,#E8623C 0%,#E8623C 49.5%,#3CA7C4 50.5%,#3CA7C4 100%);
  display: grid; place-items: center;
  font-family: 'Space Grotesk',sans-serif; font-weight: 700; font-size: 18px; color: #fff; flex: none;
}
.mjp-logo-word { font-family: 'Space Grotesk',sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 0.04em; color: #fff; }
.mjp-nav-links { display: flex; align-items: center; gap: 30px; }
.mjp-nav-links a[data-nav] {
  font-family: 'IBM Plex Sans',sans-serif; font-size: 13.5px; font-weight: 500;
  color: rgba(255,255,255,0.72); letter-spacing: 0.02em;
  padding: 24px 2px 21px; border-bottom: 3px solid transparent;
}
.mjp-nav-links a[data-nav]:hover { color: #fff !important; }
.mjp-nav-cta {
  font-family: 'IBM Plex Sans',sans-serif; font-size: 13.5px; font-weight: 600;
  color: #15191E !important; background: #fff; padding: 9px 18px; border-radius: 6px; letter-spacing: 0.02em;
}
.mjp-nav-cta:hover { background: #E8623C; color: #fff !important; }
body[data-page="services"] a[data-nav="services"],
body[data-page="pricing"]  a[data-nav="pricing"],
body[data-page="articles"] a[data-nav="articles"] {
  color: #fff !important; border-bottom-color: #E8623C !important; font-weight: 600 !important;
}
.mjp-nav-toggle { display: none; }
.mjp-nav-check { display: none; }

/* ==========================================================================
   Responsive layer
   The template is a fixed 1100px desktop design built almost entirely with
   inline styles. Rather than rewrite every element, we relax the fixed width
   and reflow the common inline patterns (multi-column grids, oversized type
   and padding) with attribute-scoped overrides under the .mjp-page wrapper.
   Desktop rendering is untouched.
   ========================================================================== */
@media (max-width: 1024px) {
  .mjp-page { min-width: 0 !important; }

  /* Collapse the section-level layout grids (tagged .mjp-cols) to one column.
     Small tabular grids (load rows, duct schedule) are deliberately left alone. */
  .mjp-cols { grid-template-columns: 1fr !important; gap: 24px !important; }
}

@media (max-width: 720px) {
  /* Let flex rows (hero stats, trust strip, CTA button rows) wrap on phones */
  .mjp-page [style*="display:flex"] { flex-wrap: wrap; }

  /* Tame the big section paddings and hero/heading type on phones */
  .mjp-page section[style*="padding:96px"],
  .mjp-page section[style*="padding:88px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .mjp-page [style*="padding:96px 32px"] { padding: 56px 20px !important; }
  .mjp-page [style*="padding:88px 32px"] { padding: 52px 20px !important; }
  .mjp-page [style*="padding:76px 32px"] { padding: 52px 20px !important; }
  .mjp-page [style*="padding:72px 64px"] { padding: 44px 24px !important; }
  .mjp-page [style*="padding:48px"] { padding: 28px !important; }

  /* h1 / h2 scale down so nothing overflows the viewport */
  .mjp-page h1 { font-size: 38px !important; line-height: 1.08 !important; }
  .mjp-page h2 { font-size: 30px !important; }
  .mjp-page [style*="font-size:64px"] { font-size: 38px !important; }
  .mjp-page [style*="font-size:54px"] { font-size: 34px !important; }
  .mjp-page [style*="font-size:42px"] { font-size: 28px !important; }
  .mjp-page [style*="font-size:40px"] { font-size: 27px !important; }

  /* Full-width CTA buttons on small screens */
  .mjp-page a[style*="padding:15px 28px"],
  .mjp-page a[style*="padding:16px"] { display: inline-block; }
}

/* --- Navigation: switch to a toggle menu on narrow screens ---------------- */
@media (max-width: 900px) {
  .mjp-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border: 1px solid rgba(255,255,255,0.22);
    border-radius: 8px; background: transparent; color: #fff; cursor: pointer;
    font-size: 20px; line-height: 1;
  }
  .mjp-nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    gap: 0; padding: 8px 20px 20px;
    background: rgba(21,25,30,0.98); border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .mjp-nav-check:checked ~ .mjp-nav-links { display: flex; }
  .mjp-nav-links a[data-nav] {
    padding: 14px 2px !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    width: 100%;
  }
  .mjp-nav-cta { margin-top: 10px; text-align: center; }
}