/* ============================================================
   Brand: jmjroofing.pro — JMJ Roofing Contractor Corporation
   Theme: home-trade · accent pin: brick/light · ns: jmj01
   Authored from scratch for this domain. Colours/surfaces come
   from Site DNA tokens (var(--dna-*)); structure is bespoke.
   ============================================================ */

:root {
  --jmj-maxw: 1180px;
  --jmj-nav-h: 74px;
  --jmj-ink: var(--dna-ink, #16202a);
  --jmj-soft: var(--dna-ink-soft, #51616e);
  --jmj-line: var(--dna-line, #e4dcd5);
  --jmj-bg: var(--dna-bg, #faf7f4);
  --jmj-surf: var(--dna-surface, #ffffff);
  --jmj-surf2: var(--dna-surface-2, #f4efe9);
  --jmj-accent: var(--dna-accent, #c0542a);
  --jmj-accent2: var(--dna-accent-2, #d98b46);
  --jmj-accent-ink: var(--dna-accent-ink, #ffffff);
  --jmj-shadow: 0 18px 48px -28px rgba(31, 18, 10, 0.45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--jmj-ink);
  background: var(--jmj-bg);
  line-height: 1.62;
  font-size: 17px;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: 'Syne', 'Inter', sans-serif; line-height: 1.08; letter-spacing: -0.01em; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.jmj-wrap { width: 100%; max-width: var(--jmj-maxw); margin: 0 auto; padding: 0 22px; }

.jmj-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--jmj-accent);
}

.jmj-section { padding: clamp(56px, 8vw, 104px) 0; }
.jmj-section--alt { background: var(--jmj-surf2); }

.jmj-sec-head { max-width: 680px; margin-bottom: 42px; }
.jmj-sec-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); margin: 14px 0 12px; }
.jmj-sec-head p { color: var(--jmj-soft); font-size: 1.05rem; }
.jmj-sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn,
.jmj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 650; font-size: 0.95rem; line-height: 1;
  padding: 15px 26px; border-radius: var(--btn-radius, 10px);
  border: 1.5px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.jmj-btn-solid, .btn-solid {
  background: var(--jmj-accent); color: var(--jmj-accent-ink);
  box-shadow: 0 12px 26px -14px var(--jmj-accent);
}
.jmj-btn-solid:hover, .btn-solid:hover { transform: translateY(-2px); }
.jmj-btn-ghost, .btn-ghost {
  background: transparent; color: var(--jmj-ink); border-color: var(--jmj-line);
}
.jmj-btn-ghost:hover, .btn-ghost:hover { border-color: var(--jmj-accent); color: var(--jmj-accent); }
.jmj-btn-light { background: var(--jmj-surf); color: var(--jmj-ink); }
.jmj-btn-light:hover { transform: translateY(-2px); }

/* ---------- Nav ---------- */
.jmj-nav {
  position: fixed; inset: 0 0 auto 0; height: var(--jmj-nav-h); z-index: 60;
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--jmj-bg) 88%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--jmj-line);
}
.jmj-nav .jmj-wrap { display: flex; align-items: center; gap: 22px; }
.jmj-brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.jmj-brand img { width: 38px; height: 38px; }
.jmj-brand b { font-family: 'Syne', sans-serif; font-size: 1.06rem; display: block; letter-spacing: -0.01em; }
.jmj-brand span span { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--jmj-soft); }
.jmj-nav-links { display: flex; gap: 26px; }
.jmj-nav-links a { font-size: 0.92rem; font-weight: 550; color: var(--jmj-soft); }
.jmj-nav-links a:hover, .jmj-nav-links a[aria-current="page"] { color: var(--jmj-accent); }
.jmj-nav-end { display: flex; align-items: center; gap: 14px; }
.jmj-nav-phone { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; font-size: 0.92rem; }
.jmj-nav-phone .dna-ic { color: var(--jmj-accent); }
.jmj-burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 38px; align-items: center; justify-content: center; background: none; border: 1px solid var(--jmj-line); border-radius: 9px; }
.jmj-burger span { width: 19px; height: 2px; background: var(--jmj-ink); transition: .25s; }

/* ---------- Hero (block: mirror -> jmj01-hero-mirror) ---------- */
.jmj01-hero { padding: calc(var(--jmj-nav-h) + 52px) 0 64px; position: relative; overflow: hidden; }
.jmj01-hero::before {
  content: ''; position: absolute; top: -20%; right: -10%; width: 60%; height: 120%;
  background: radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--jmj-accent) 16%, transparent), transparent 62%);
  z-index: 0;
}
.jmj01-hero .jmj-wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center; }
.jmj01-hero-frame { position: relative; }
.jmj01-hero-photo { border-radius: 20px; overflow: hidden; box-shadow: var(--jmj-shadow); aspect-ratio: 4 / 3.2; }
.jmj01-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.jmj01-hero-chip {
  position: absolute; left: -14px; bottom: -22px; max-width: 250px;
  background: var(--jmj-surf); border: 1px solid var(--jmj-line); border-radius: 14px;
  padding: 16px 18px; box-shadow: var(--jmj-shadow);
}
.jmj01-hero-chip .jmj01-stars { color: var(--jmj-accent2); display: flex; gap: 2px; margin-bottom: 6px; }
.jmj01-hero-chip .jmj01-stars .dna-ic { width: 1em; height: 1em; }
.jmj01-hero-chip b { display: block; font-family: 'Inter', sans-serif; font-size: 0.95rem; line-height: 1.4; font-weight: 600; }
.jmj01-hero-chip small { color: var(--jmj-soft); font-size: 0.8rem; }
.jmj01-hero h1 { font-size: clamp(2.2rem, 5.2vw, 3.5rem); margin: 16px 0 18px; }
.jmj01-hero-sub { font-size: 1.12rem; color: var(--jmj-soft); max-width: 30em; }
.jmj01-hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 28px; }
.jmj01-hero-mini { display: flex; flex-wrap: wrap; gap: 18px 26px; margin-top: 30px; }
.jmj01-hero-mini span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 600; color: var(--jmj-soft); }
.jmj01-hero-mini .dna-ic { color: var(--jmj-accent); }

/* ---------- Trust metric bar (block: metricbar -> jmj01-trust-metricbar) ---------- */
.jmj01-trust { padding: 0; margin-top: -34px; position: relative; z-index: 2; }
.jmj01-trust-bar {
  background: var(--jmj-ink); color: #fff; border-radius: 18px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 30px 24px; box-shadow: var(--jmj-shadow);
}
.jmj01-metric { text-align: center; padding: 4px 10px; }
.jmj01-metric b { font-family: 'Syne', sans-serif; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--jmj-accent2); display: block; }
.jmj01-metric span { font-size: 0.82rem; opacity: 0.82; }

/* ---------- Services cards (block: cards -> jmj01-svc-cards) ---------- */
.jmj01-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.jmj01-card {
  background: var(--jmj-surf); border: 1px solid var(--jmj-line); border-radius: 16px;
  padding: 30px 26px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.jmj01-card:hover { transform: translateY(-4px); box-shadow: var(--jmj-shadow); border-color: color-mix(in srgb, var(--jmj-accent) 40%, var(--jmj-line)); }
.jmj01-card-ic {
  width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px; background: color-mix(in srgb, var(--jmj-accent) 13%, transparent);
  color: var(--jmj-accent); margin-bottom: 18px;
}
.jmj01-card-ic .dna-ic { width: 26px; height: 26px; }
.jmj01-card h3 { font-size: 1.22rem; margin-bottom: 9px; }
.jmj01-card p { color: var(--jmj-soft); font-size: 0.96rem; }
.jmj01-card ul { list-style: none; margin-top: 14px; display: grid; gap: 8px; }
.jmj01-card li { display: flex; gap: 9px; font-size: 0.9rem; color: var(--jmj-soft); }
.jmj01-card li .dna-ic { color: var(--jmj-accent); flex-shrink: 0; margin-top: 2px; }

/* ---------- Comparison (authored) ---------- */
.jmj01-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.jmj01-comp-card {
  background: var(--jmj-surf); border: 1px solid var(--jmj-line); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
}
.jmj01-comp-card.is-flag { border-color: var(--jmj-accent); box-shadow: var(--jmj-shadow); }
.jmj01-comp-media { aspect-ratio: 16 / 10; overflow: hidden; }
.jmj01-comp-media img { width: 100%; height: 100%; object-fit: cover; }
.jmj01-comp-body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.jmj01-comp-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jmj-accent); }
.jmj01-comp-card h3 { font-size: 1.3rem; margin: 8px 0 6px; }
.jmj01-comp-card p { color: var(--jmj-soft); font-size: 0.94rem; }
.jmj01-comp-meta { margin-top: auto; padding-top: 18px; display: grid; gap: 7px; }
.jmj01-comp-meta div { display: flex; justify-content: space-between; font-size: 0.85rem; border-top: 1px dashed var(--jmj-line); padding-top: 7px; }
.jmj01-comp-meta b { font-family: 'Syne', sans-serif; }

/* ---------- About statsled (block: statsled -> jmj01-about-statsled) ---------- */
.jmj01-about .jmj-wrap { display: grid; grid-template-columns: 1fr 0.86fr; gap: 50px; align-items: center; }
.jmj01-about-copy p { color: var(--jmj-soft); margin-top: 14px; }
.jmj01-about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.jmj01-stat {
  background: var(--jmj-surf); border: 1px solid var(--jmj-line); border-radius: 15px; padding: 24px 22px;
}
.jmj01-stat b { font-family: 'Syne', sans-serif; font-size: 1.9rem; color: var(--jmj-accent); display: block; }
.jmj01-stat span { font-size: 0.88rem; color: var(--jmj-soft); }
.jmj01-about-sign { margin-top: 24px; display: flex; align-items: center; gap: 14px; }
.jmj01-about-sign .jmj01-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--jmj-accent); }
.jmj01-about-sign b { display: block; font-family: 'Syne', sans-serif; }
.jmj01-about-sign small { color: var(--jmj-soft); }

/* ---------- FAQ (authored) ---------- */
.jmj01-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.jmj01-faq-item { background: var(--jmj-surf); border: 1px solid var(--jmj-line); border-radius: 13px; overflow: hidden; }
.jmj01-faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 18px 22px; font-family: 'Syne', sans-serif; font-size: 1.04rem; font-weight: 600; color: var(--jmj-ink);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.jmj01-faq-q::after { content: '+'; color: var(--jmj-accent); font-size: 1.4rem; flex-shrink: 0; transition: transform .2s; }
.jmj01-faq-item.is-open .jmj01-faq-q::after { content: '\2212'; }
.jmj01-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.jmj01-faq-item.is-open .jmj01-faq-a { max-height: 320px; }
.jmj01-faq-a p { padding: 0 22px 20px; color: var(--jmj-soft); font-size: 0.96rem; }

/* ---------- CTA band (block: band -> jmj01-cta-band) ---------- */
.jmj01-cta { background: var(--jmj-ink); color: #fff; padding: clamp(50px, 7vw, 88px) 0; text-align: center; }
.jmj01-cta h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); max-width: 16em; margin: 0 auto 14px; }
.jmj01-cta p { color: rgba(255,255,255,0.74); max-width: 38em; margin: 0 auto 28px; }
.jmj01-cta-acts { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; }

/* ---------- Page header ---------- */
.jmj-pagehead { padding: calc(var(--jmj-nav-h) + 56px) 0 44px; background: var(--jmj-surf2); border-bottom: 1px solid var(--jmj-line); }
.jmj-crumbs { font-size: 0.82rem; color: var(--jmj-soft); margin-bottom: 12px; }
.jmj-crumbs a:hover { color: var(--jmj-accent); }
.jmj-pagehead h1 { font-size: clamp(2rem, 4.6vw, 3rem); margin-bottom: 12px; }
.jmj-pagehead p { color: var(--jmj-soft); max-width: 46em; }

/* ---------- Services page detail list ---------- */
.jmj01-svc-list { display: grid; gap: 18px; }
.jmj01-svc-row {
  background: var(--jmj-surf); border: 1px solid var(--jmj-line); border-radius: 16px;
  display: grid; grid-template-columns: 0.9fr 1.1fr; overflow: hidden;
}
.jmj01-svc-row:nth-child(even) { grid-template-columns: 1.1fr 0.9fr; }
.jmj01-svc-row:nth-child(even) .jmj01-svc-media { order: 2; }
.jmj01-svc-media { min-height: 230px; }
.jmj01-svc-media img { width: 100%; height: 100%; object-fit: cover; }
.jmj01-svc-text { padding: 30px 30px; }
.jmj01-svc-text h3 { font-size: 1.4rem; margin-bottom: 10px; }
.jmj01-svc-text p { color: var(--jmj-soft); }
.jmj01-svc-text ul { list-style: none; margin-top: 14px; display: grid; gap: 9px; }
.jmj01-svc-text li { display: flex; gap: 9px; font-size: 0.92rem; }
.jmj01-svc-text li .dna-ic { color: var(--jmj-accent); flex-shrink: 0; margin-top: 2px; }

/* ---------- Process timeline (block: timeline -> jmj01-proc-timeline) ---------- */
.jmj01-proc-line { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.jmj01-node { position: relative; padding-top: 24px; }
.jmj01-node .jmj01-dot {
  width: 40px; height: 40px; border-radius: 50%; background: var(--jmj-accent); color: var(--jmj-accent-ink);
  display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-weight: 700; margin-bottom: 14px;
}
.jmj01-node::before { content: ''; position: absolute; top: 44px; left: 40px; right: -20px; height: 2px; background: var(--jmj-line); }
.jmj01-node:last-child::before { display: none; }
.jmj01-node h3 { font-size: 1.1rem; margin-bottom: 7px; }
.jmj01-node p { color: var(--jmj-soft); font-size: 0.92rem; }

/* ---------- Contact ---------- */
/* DNA split-right squeezes our 2-pane booking widget into the 320px rail.
   Override so the bespoke form keeps the WIDE column and the info card the rail.
   html.* prefix beats site-dna.css (loaded after style.css) on specificity. */
html.dna-contact-split-right [data-contact-root] {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
}
html.dna-contact-split-right [data-contact-booking] { order: 0; min-width: 0; }
html.dna-contact-split-right [data-contact-info] { order: 1; }
@media (max-width: 960px) {
  html.dna-contact-split-right [data-contact-root] { grid-template-columns: 1fr; }
  html.dna-contact-split-right [data-contact-info] { order: 0; }
}

.jmj01-info { background: var(--jmj-surf); border: 1px solid var(--jmj-line); border-radius: 18px; padding: 28px 26px; }
.jmj01-info h3 { font-size: 1.2rem; margin-bottom: 18px; }
.jmj01-info-row { display: flex; gap: 13px; padding: 13px 0; border-top: 1px solid var(--jmj-line); }
.jmj01-info-row:first-of-type { border-top: 0; }
.jmj01-info-row .dna-ic { color: var(--jmj-accent); flex-shrink: 0; margin-top: 3px; }
.jmj01-info-row b { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--jmj-soft); }
.jmj01-info-row a, .jmj01-info-row span span { font-size: 0.98rem; }

/* ---------- Booking form (bespoke, sidebar layout) ---------- */
.jmj01-book { background: var(--jmj-surf); border: 1px solid var(--jmj-line); border-radius: 18px; overflow: hidden; display: grid; grid-template-columns: 260px 1fr; box-shadow: var(--jmj-shadow); }
.jmj01-book-side { background: var(--jmj-ink); color: #fff; padding: 30px 26px; }
.jmj01-book-side h4 { font-size: 1.18rem; margin-bottom: 10px; }
.jmj01-book-side p { font-size: 0.88rem; color: rgba(255,255,255,0.72); }
.jmj01-book-steps { margin-top: 26px; display: grid; gap: 14px; }
.jmj01-book-step { display: flex; gap: 12px; align-items: center; font-size: 0.9rem; opacity: 0.55; }
.jmj01-book-step.is-active { opacity: 1; }
.jmj01-book-step b { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--jmj-accent2); display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-size: 0.85rem; flex-shrink: 0; }
.jmj01-book-step.is-active b { background: var(--jmj-accent); border-color: var(--jmj-accent); }
.jmj01-book-body { padding: 30px 28px; }
.jmj01-book-body h4 { font-size: 1.2rem; margin-bottom: 6px; }
.jmj01-book-body > p { color: var(--jmj-soft); font-size: 0.92rem; margin-bottom: 18px; }
.jmj01-pick { display: grid; gap: 11px; }
.jmj01-opt {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px; cursor: pointer;
  border: 1.5px solid var(--jmj-line); border-radius: 12px; transition: border-color .15s, background .15s;
}
.jmj01-opt:hover { border-color: var(--jmj-accent); }
.jmj01-opt.is-picked { border-color: var(--jmj-accent); background: color-mix(in srgb, var(--jmj-accent) 8%, transparent); }
.jmj01-opt .dna-ic { color: var(--jmj-accent); }
.jmj01-opt b { display: block; font-family: 'Inter', sans-serif; font-size: 0.96rem; font-weight: 600; }
.jmj01-opt small { color: var(--jmj-soft); font-size: 0.82rem; }
.jmj01-opt em { font-style: normal; font-size: 0.78rem; color: var(--jmj-accent); font-weight: 600; white-space: nowrap; }
.jmj01-field { margin-bottom: 15px; }
.jmj01-field label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 6px; }
.jmj01-field input, .jmj01-field textarea, .jmj01-field select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--jmj-line); border-radius: 10px;
  font: inherit; font-size: 0.92rem; background: var(--jmj-bg); color: var(--jmj-ink);
}
.jmj01-field input:focus, .jmj01-field textarea:focus { outline: none; border-color: var(--jmj-accent); }
.jmj01-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.jmj01-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.jmj01-slot { padding: 9px 14px; border: 1.5px solid var(--jmj-line); border-radius: 9px; background: var(--jmj-bg); cursor: pointer; font-size: 0.85rem; font-weight: 600; }
.jmj01-slot.is-picked { border-color: var(--jmj-accent); background: var(--jmj-accent); color: var(--jmj-accent-ink); }
.jmj01-book-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }
.jmj01-book-done { text-align: center; padding: 24px 0; }
.jmj01-book-done .dna-ic { width: 3em; height: 3em; color: var(--jmj-accent); }
.jmj01-book-done h4 { margin-top: 12px; font-size: 1.4rem; }

/* ---------- Footer ---------- */
.jmj-foot { background: var(--jmj-ink); color: #fff; }
.jmj-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.4fr; gap: 40px; padding: 58px 0 38px; }
.jmj-foot .jmj-wrap { width: 100%; }
.jmj-foot .jmj-brand b { color: #fff; }
.jmj-foot p { color: rgba(255,255,255,0.62); font-size: 0.92rem; margin-top: 14px; max-width: 32ch; }
.jmj-foot h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--jmj-accent2); margin-bottom: 16px; }
.jmj-foot ul { list-style: none; display: grid; gap: 11px; }
.jmj-foot ul a, .jmj-foot-contact li { color: rgba(255,255,255,0.74); font-size: 0.92rem; display: flex; align-items: center; gap: 9px; }
.jmj-foot ul a:hover { color: #fff; }
.jmj-foot-contact .dna-ic { color: var(--jmj-accent2); flex-shrink: 0; }
.jmj-foot-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 20px 0; }
.jmj-foot-bottom .jmj-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 0.82rem; color: rgba(255,255,255,0.56); }
.jmj-foot-bottom a:hover { color: #fff; }

/* ---------- Legal pages ---------- */
.jmj-legal { max-width: 760px; }
.jmj-legal h2 { font-size: 1.3rem; margin: 30px 0 10px; }
.jmj-legal p, .jmj-legal li { color: var(--jmj-soft); margin-top: 10px; }
.jmj-legal ul { padding-left: 20px; }

/* ---------- Reveal animation ---------- */
.jmj-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.jmj-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .jmj01-hero .jmj-wrap { grid-template-columns: 1fr; gap: 60px; }
  .jmj01-hero-frame { order: 2; }
  .jmj01-about .jmj-wrap { grid-template-columns: 1fr; gap: 36px; }
  .jmj01-svc-grid, .jmj01-compare { grid-template-columns: 1fr; }
  .jmj01-trust-bar { grid-template-columns: 1fr 1fr; gap: 18px; }
  .jmj01-proc-line { grid-template-columns: 1fr 1fr; }
  .jmj01-node::before { display: none; }
  .jmj01-svc-row, .jmj01-svc-row:nth-child(even) { grid-template-columns: 1fr; }
  .jmj01-svc-row:nth-child(even) .jmj01-svc-media { order: 0; }
  .jmj01-book { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .jmj-nav-links { display: none; }
  .jmj-burger { display: flex; }
  .jmj-nav.is-open .jmj-nav-links {
    display: flex; flex-direction: column; position: absolute; top: var(--jmj-nav-h); left: 0; right: 0;
    background: var(--jmj-bg); border-bottom: 1px solid var(--jmj-line); padding: 18px 22px; gap: 16px;
  }
  .jmj-nav-phone span:not(.dna-ic) { display: none; }
  .jmj-foot-grid { grid-template-columns: 1fr; gap: 30px; }
  .jmj01-2col { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .jmj01-trust-bar { grid-template-columns: 1fr 1fr; }
  .jmj01-proc-line { grid-template-columns: 1fr; }
}