@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/inter-400-800.woff2?v=3100e775e8) format('woff2');}
@font-face{font-family:'Kaushan Script';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/kaushan-script-400.woff2?v=addcc80ddc) format('woff2');}
/* Michael Jr. Plumbing demo, ROUND 2: Big Blue's look (Levi's pick, his words: "i like that one"), Michael
   Jr.'s facts. Every number here is in research/SPEC.md §R2. Two-tone dark / bright blue with pale and white
   bands, Inter 800 CAPS headings, a Kaushan Script eyebrow per band, square buttons with a thin arrow,
   circles only for icon / number discs and the reveal handle, zero shadows, zero gradients. */
:root{
  --mj-ink:#04122b; --mj-dark:#061a3a; --mj-blue:#0a8fd8; --mj-blue-d:#0a76bb; --mj-blue-dd:#075f96;
  --mj-pale:#eef5fa; --mj-white:#ffffff; --mj-navy:#1a237e; --mj-muted:#4a5672;
  --mj-rule:#d6e0ea; --mj-rule-w:rgba(255,255,255,.16); --mj-w86:rgba(255,255,255,.86);
  --mj-text:'Inter','Helvetica Neue',Arial,system-ui,sans-serif; --mj-script:'Kaushan Script','Brush Script MT',cursive;
  --mj-gut:40px; --mj-max:1760px; --mj-sec:88px; --mj-bar-h:60px;
  --mj-h1:clamp(36px,3.75vw,54px); --mj-h2:clamp(28px,2.5vw,36px);
  --mj-ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box;border-radius:0;box-shadow:none}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mj-white);color:var(--mj-dark);font:400 17px/1.6 var(--mj-text);font-synthesis:none;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
picture{display:contents}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--mj-blue-d);outline-offset:3px}
.mj-hero :focus-visible,.mj-vip :focus-visible,.mj-connect :focus-visible,.mj-jobs :focus-visible,.mj-ft :focus-visible,.mj-areas__side :focus-visible,
.mj-phero :focus-visible,.mj-jx :focus-visible,.mj-ctap :focus-visible,.mj-vcard :focus-visible{outline-color:var(--mj-white)}
.mj-nw{white-space:nowrap}
.mj-skip{position:absolute;left:16px;top:-80px;z-index:30;background:var(--mj-blue-d);color:var(--mj-white);padding:12px 16px;font-weight:700}
.mj-skip:focus{top:8px}
.mj-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mj-wrap{max-width:var(--mj-max);margin-inline:auto;padding-inline:var(--mj-gut)}

/* ---- type ---- */
h1,h2,h3{font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
h1{font-size:var(--mj-h1);line-height:1.08}
h1 span{display:block;white-space:nowrap}
h2{font-size:var(--mj-h2);line-height:1.12}
h3{font-size:20px;line-height:1.25}
h1,h2,h3{text-wrap:balance}   /* fix round (V20): no single word left alone on a heading's last line */
.mj-script{font:400 26px/1.25 var(--mj-script);color:var(--mj-blue);margin-bottom:8px;text-transform:none}
.mj-head--c{text-align:center;max-width:860px;margin:0 auto 48px}
.mj-lede{font-size:17px;color:var(--mj-muted);margin-top:16px}
.mj-cap{font:500 14px/1.4 var(--mj-text);color:var(--mj-muted);padding-top:10px}
.mj-entry__src{font:500 13px/1.4 var(--mj-text);color:var(--mj-muted)}

/* ---- icons, discs, stars, buttons ---- */
.mj-ico{display:block;flex:none}
.mj-ico--blue{color:var(--mj-blue)}
.mj-disc{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--mj-blue);color:var(--mj-white);flex:none}
.mj-stars{display:inline-flex;gap:2px;color:var(--mj-blue)}
.mj-stars svg{display:block}
.mj-stars--white{color:var(--mj-white)}
.mj-starstrip{display:inline-flex;gap:3px;align-self:flex-start;background:var(--mj-blue-d);color:var(--mj-white);padding:5px 8px}
.mj-starstrip svg{display:block;width:14px;height:14px}
.mj-btn{display:inline-flex;align-items:center;gap:16px;height:52px;padding:0 24px;background:var(--mj-blue-d);color:var(--mj-white);
  font:700 14px/1 var(--mj-text);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;
  transition:background-color .15s}
.mj-btn:hover{background:var(--mj-blue-dd)}
.mj-btn--dark{background:var(--mj-dark)}
.mj-btn--dark:hover{background:var(--mj-ink)}
.mj-arrow{display:block;flex:none}

/* ---- 1-2 header: utility bar + nav (ink); the logo hangs in a white block ---- */
.mj-hd{background:var(--mj-white);color:var(--mj-ink);position:relative;z-index:10;box-shadow:0 2px 12px rgba(4,18,43,.08)}   /* R6: the white header (Levi); not sticky */
.mj-hd :focus-visible{outline-color:var(--mj-navy)}
/* R3/R6: the logo spans the utility bar and the nav like Big Blue's shield, inside the header (top 10, 104 tall in the
   124px header); R6: the navy-on-transparent cut on the white header */
.mj-logo{position:absolute;z-index:12;top:10px;left:max(var(--mj-gut),calc((100% - var(--mj-max)) / 2 + var(--mj-gut)));display:block;line-height:0}
.mj-logo__img{height:104px;width:auto}
.mj-top{height:44px;position:relative}
/* R3: the rows' divider starts right of the logo (it showed through the knockout's transparent "Jr") */
.mj-top::after{content:"";position:absolute;bottom:0;right:0;height:1px;background:var(--mj-rule);
  left:calc(max(var(--mj-gut),calc((100% - var(--mj-max)) / 2 + var(--mj-gut))) + 130px + 16px)}
.mj-top__in{height:100%;max-width:var(--mj-max);margin-inline:auto;padding:0 var(--mj-gut) 0 calc(var(--mj-gut) + 130px + 24px);display:flex}
.mj-top__cell{display:flex;align-items:center;gap:10px;padding:0 24px;border-right:1px solid var(--mj-rule);color:var(--mj-muted);
  font:600 13px/1 var(--mj-text);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.mj-top__call{margin-left:auto;border-right:0;padding-right:0;color:var(--mj-ink)}
.mj-top__call:hover{color:var(--mj-blue-d);text-decoration:underline;text-underline-offset:4px}
.mj-stars--top svg{width:14px;height:14px}
.mj-nav{height:80px;border-bottom:1px solid var(--mj-rule)}   /* the header's bottom edge, inside its 80px */
.mj-nav__in{position:relative;height:100%;max-width:var(--mj-max);margin-inline:auto;padding:0 var(--mj-gut);display:flex;align-items:center;gap:36px}
.mj-nav__links{display:flex;gap:28px;margin-left:auto;font:700 14px/1 var(--mj-text);letter-spacing:.05em;text-transform:uppercase}
.mj-nav__links a{text-decoration:none;padding:8px 0}
.mj-nav__links a:hover{color:var(--mj-blue-d);text-decoration:underline;text-underline-offset:6px}
.mj-navvip{display:inline-flex;align-items:center;gap:6px}
.mj-navstar{display:block;flex:none;color:var(--mj-blue)}   /* R4: the VIP plan link stands out (no pill, no chip) */
.mj-callblock{display:flex;align-items:center;gap:12px;color:var(--mj-white);text-decoration:none}
.mj-callblock__t{display:flex;flex-direction:column;gap:4px}
.mj-callblock__k{font:600 12px/1 var(--mj-text);letter-spacing:.06em;text-transform:uppercase;color:var(--mj-w86)}
.mj-callblock__n{font:800 22px/1 var(--mj-text);letter-spacing:-.01em}
.mj-callblock:hover .mj-callblock__n{color:var(--mj-blue)}
.mj-hd .mj-callblock{color:var(--mj-ink)}
.mj-hd .mj-callblock__k{color:var(--mj-muted)}
.mj-hd .mj-callblock:hover .mj-callblock__n{color:var(--mj-blue-d);text-decoration:underline;text-underline-offset:4px}
.mj-menu{display:none;position:relative}
.mj-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;height:48px;padding:0 16px;border:2px solid var(--mj-ink);
  font:700 14px/1 var(--mj-text);letter-spacing:.05em;text-transform:uppercase}
.mj-menu summary::-webkit-details-marker{display:none}
.mj-menu[open] summary{background:var(--mj-ink);color:var(--mj-white)}
.mj-menu__panel{position:absolute;right:0;top:calc(100% + 16px);width:300px;background:var(--mj-white);color:var(--mj-ink);border:1px solid var(--mj-rule);
  padding:8px 24px 24px;
  display:flex;flex-direction:column}
.mj-menu__panel a:not(.mj-btn){display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--mj-rule);font:700 15px/1 var(--mj-text);
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
.mj-menu__panel .mj-btn{margin-top:24px;justify-content:space-between}

/* ---- 3 hero (dark): copy 55%, the photo 45% sets the height, a bright review box on its corner ---- */
.mj-hero{display:grid;grid-template-columns:55% 45%;background:var(--mj-dark);color:var(--mj-white);position:relative;overflow-x:clip}   /* R3: the cut-out's transparent margin never passes the viewport */
/* the left padding lines the copy up with the content column: (hero - max) / 2 + gut = 90.909% of the 55% column - max/2 + gut */
.mj-hero__copy{padding:64px 48px 48px max(var(--mj-gut),calc(90.909% - var(--mj-max) / 2 + var(--mj-gut)));min-width:0}
.mj-gbox{display:inline-flex;align-items:center;gap:28px;background:var(--mj-blue-d);color:var(--mj-white);padding:14px 16px 14px 22px;text-decoration:none}
.mj-gbox__t{display:flex;flex-direction:column;gap:6px;font:600 13px/1.1 var(--mj-text);letter-spacing:.05em;text-transform:uppercase}
.mj-gbox__t span:first-child{font-weight:800;font-size:15px}
.mj-gbox__g{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--mj-white)}
.mj-g{width:28px;height:28px}
.mj-hero h1{margin-top:24px}
.mj-hero__lede{font-size:17px;color:var(--mj-w86);max-width:560px;margin-top:16px}
.mj-hero__btns{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:28px}   /* fix round (V26): call + request, as on the sub-page heroes */
.mj-hero__photo{position:relative;min-height:0;background:var(--mj-ink)}
.mj-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* round 2.1: keyed to .mj-fade, which main.js adds itself, so the photo shows if main.js never runs */
html.mj-fade .mj-hero__img{opacity:.001;transition:opacity .4s var(--mj-ease)}
html.mj-fade .mj-hero__img.is-in{opacity:1}
/* the box stays in the photo's x >= 0.55, y >= 0.6 (the man is at x 0.11-0.69, y 0.03-0.69; SPEC R2 band 3) */
.mj-hero__rv{grid-column:1 / -1;background:var(--mj-blue-d);color:var(--mj-white);padding:24px var(--mj-gut)}
/* R4: the owners (v2 cut-out, 1310x1200) stand at the seam the way Big Blue's owner does, bottom flush with the hero,
   over the photo's left part. Its three straight cuts lie on its canvas edges and each is hidden on an edge:
   - the bottom cut on the hero's bottom edge;
   - his arm (x 0, from y 0.654 down) on the seam (left: 0);
   - her blazer (x 1.0, from y 0.423 down) 40px under the review box, whose min-height (0.577 of the cut-out's height
     + 8px = 0.5285 x its width + 8px) keeps its top above the start of that cut.
   --mj-cw is the cut-out's width: the photo column (45vw) less the box (min(320px, 21vw)) plus the 40px overlap. Her
   face ends at x 0.80 of it, at least 17px left of the box at every width from 1024 up. */
.mj-hero__couple{position:absolute;z-index:2;bottom:0;left:0;width:var(--mj-cw);pointer-events:none;line-height:0}
.mj-hero__couple img{display:block;width:100%;height:auto}
@media (min-width:768px){
  .mj-hero__rv{position:absolute;z-index:3;right:0;bottom:0;min-height:calc(var(--mj-cw) * 0.5285 + 8px);padding:20px 18px 18px;
    display:flex;flex-direction:column;justify-content:center}
}
/* R4: the hero is no longer as tall as the photo's aspect: min-height clamp(520px, 41vw, 720px) (525 at 1280) keeps his
   chin (y 0.59 of the cut-out) inside Levi's 580px fold with the cut-out standing on the hero's bottom edge */
@media (min-width:1024px){
  .mj-hero{min-height:clamp(520px,41vw,720px);--mj-cw:calc(45vw - min(320px, 21vw) + 40px)}
  .mj-hero__rv{width:min(320px,21vw)}
}
.mj-hero__rv blockquote p{font-size:13px;line-height:1.5;margin-top:12px}
.mj-hero__rv figcaption{font:700 13px/1.3 var(--mj-text);letter-spacing:.04em;text-transform:uppercase;margin-top:12px}
.mj-hero__rv figcaption::before{content:"";display:inline-block;width:24px;height:1px;background:currentColor;vertical-align:middle;margin-right:10px}

/* ---- 4 three value cards ---- */
.mj-cards{padding-top:16px;background:var(--mj-white)}
.mj-cards__in{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mj-vcard{display:flex;gap:20px;align-items:flex-start;padding:32px 28px;color:var(--mj-white);min-height:168px}
.mj-vcard--bright{background:var(--mj-blue-d)}
.mj-vcard--dark{background:var(--mj-dark)}
.mj-vcard__disc{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.14);flex:none}
.mj-vcard h2{font-size:20px;line-height:1.2}
.mj-vcard p{font-size:15px;line-height:1.55;margin-top:8px}

/* ---- 5 request a visit (pale) ---- */
.mj-req{background:var(--mj-pale);padding-block:var(--mj-sec)}
.mj-cards + .mj-req{margin-top:16px}   /* fix round (V15): the gap is only for the white under the blue cards */
.mj-req__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:64px;align-items:start}
.mj-req__text{color:var(--mj-muted);margin-top:16px;max-width:620px}
.mj-req__row{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:32px;margin-top:32px;padding-top:32px;border-top:1px solid var(--mj-rule)}
.mj-req__rv blockquote p{font-size:16px;line-height:1.7;font-style:italic;margin-top:12px}
.mj-req__rv figcaption{margin-top:12px}
.mj-req__name{font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:14px}
.mj-stats{display:flex;flex-direction:column;gap:16px}
.mj-req__row--solo{grid-template-columns:minmax(0,400px)}
.mj-req__row--solo .mj-stats{flex-direction:row}
.mj-req__row--solo .mj-stat{flex:1}
.mj-stat{display:flex;flex-direction:column;background:var(--mj-white);border:1px solid var(--mj-rule);text-align:center}
.mj-stat__v{font:800 44px/1 var(--mj-text);padding:22px 0 16px}
.mj-stat__l{font:600 14px/1 var(--mj-text);letter-spacing:.05em;text-transform:uppercase;padding:12px;color:var(--mj-white)}
.mj-stat__l--blue{background:var(--mj-blue-d)}
.mj-stat__l--dark{background:var(--mj-dark)}
.mj-form{background:var(--mj-white);border:1px solid var(--mj-rule);padding:40px}
.mj-form__body{display:flex;flex-direction:column;gap:16px}
.mj-form__h{text-align:center;font-size:22px;margin-bottom:8px}
.mj-form__two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mj-form label{display:flex;flex-direction:column;gap:6px;font:600 14px/1.3 var(--mj-text)}
.mj-opt{font-weight:500;color:var(--mj-muted)}
.mj-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.mj-err{font:600 14px/1.4 var(--mj-text);color:#b3261e}   /* 6.5:1 on white */
.mj-form [aria-invalid="true"]{border-color:#b3261e;outline:1px solid #b3261e;outline-offset:0}
.mj-form input:not([type=checkbox]),.mj-form textarea{height:52px;padding:0 14px;border:1px solid #7a8aa0;background:var(--mj-white);font:400 16px/1.4 var(--mj-text);width:100%}
.mj-form textarea{height:auto;padding:12px 14px;resize:vertical}
.mj-form .mj-check{flex-direction:row;align-items:center;gap:12px;font-weight:500;min-height:48px}
.mj-check input{width:22px;height:22px;flex:none;accent-color:var(--mj-blue-d);margin:0}
.mj-form button{align-self:center}
.mj-form__note{font-size:14px;color:var(--mj-muted);text-align:center}
.mj-form__status{font:700 17px/1.4 var(--mj-text)}
.mj-form__status:empty{display:none}
.mj-form.is-sent .mj-form__body{display:none}

/* ---- 6 services: 4 x 3 photo tiles with a solid label strip ---- */
.mj-svc{padding-block:var(--mj-sec)}
.mj-svc__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mj-svc__tile{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--mj-pale)}
.mj-svc__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--mj-ease)}
.mj-svc__tile:hover img{transform:scale(1.03)}
.mj-strip{position:absolute;left:0;right:0;bottom:0;background:var(--mj-blue-d);color:var(--mj-white);padding:13px 12px;text-align:center;
  font:700 15px/1.2 var(--mj-text);letter-spacing:.05em;text-transform:uppercase}
.mj-strip--2{display:flex;flex-direction:column;justify-content:center;gap:3px;font-size:13px;padding:9px 8px;min-height:calc(2.4em + 23px)}   /* fix round (V24): two lines + the gap + the phone padding (20px) */
.mj-strip--2 span + span{font-weight:500;text-transform:none;letter-spacing:0}

/* ---- 7 why (white, rule above): the van + three numbered reasons ---- */
.mj-why{padding-block:var(--mj-sec);border-top:1px solid var(--mj-rule)}
.mj-why__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.mj-why__photo{justify-self:center;width:100%;max-width:440px}
.mj-why__photo .mj-ph{aspect-ratio:1310/1200;overflow:hidden;background:var(--mj-dark)}   /* R4: the v2 cut-out on a dark panel */
.mj-ph img{width:100%;height:100%;object-fit:cover}
.mj-reasons li{display:grid;grid-template-columns:56px 1fr;gap:24px;position:relative;padding-bottom:36px}
.mj-reasons li:last-child{padding-bottom:0}
.mj-reasons li:not(:last-child)::before{content:"";position:absolute;left:27px;top:60px;bottom:4px;width:2px;background:var(--mj-rule)}
.mj-num{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;border:2px solid var(--mj-blue-d);
  color:var(--mj-blue-d);font:800 20px/1 var(--mj-text);background:var(--mj-white)}
.mj-reasons h3{font-size:18px;margin-top:6px}
.mj-reasons p{font-size:16px;color:var(--mj-muted);margin-top:6px}

/* ---- 8 VIP, R5: Big Blue's payment-plan band done for VIP: the price as the hero, the dispatch-fee strip, two decorative
   membership cards (the page's only radius and shadow), solid tiles, a dark "How VIP works" panel ---- */
.mj-vip{background:var(--mj-blue-d);color:var(--mj-white);padding-block:var(--mj-sec);overflow-x:clip}
.mj-vip .mj-script{color:var(--mj-white)}
.mj-bdisc{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--mj-white);color:var(--mj-blue-d);flex:none}
.mj-vip__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:48px;align-items:center}
.mj-vip__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;margin-top:24px}
.mj-vip__amt{font:900 clamp(56px,calc(12.5vw - 88px),104px)/1 var(--mj-text);letter-spacing:-.02em}
.mj-vip__per{font:700 22px/1.2 var(--mj-text)}
.mj-vip__term{font:500 18px/1.4 var(--mj-text);margin-top:8px}
/* MULTI-PAGE: the dispatch-fee strip is gone (the client's rule, OB seo.pricing); one line of her VIP text sits there */
.mj-vip__note{font:500 18px/1.5 var(--mj-text);max-width:520px;margin-top:20px;padding-top:20px;border-top:1px solid var(--mj-rule-w)}
/* the cards: a 500:350 stage, sized in container units so they stay crisp and in proportion at any width */
.mj-mcards{position:relative;width:100%;max-width:500px;aspect-ratio:500/350;justify-self:center;container-type:inline-size}
.mj-mcard{position:absolute;width:72%;aspect-ratio:1.586;border-radius:14px;box-shadow:0 18px 40px rgba(2,10,25,.35);overflow:hidden}
.mj-mcard--back{right:2%;top:4%;transform:rotate(6deg);background:var(--mj-white);color:var(--mj-dark);
  display:flex;flex-direction:column;justify-content:flex-start;padding:7% 18% 7% 8%}   /* its title sits on the part the front card leaves visible */
.mj-mcard__star{position:absolute;top:9%;right:7%;width:4.8cqw;height:4.8cqw;color:var(--mj-blue)}
.mj-mcard--back p{font:800 18px/1.15 var(--mj-text);font-size:3.1cqw;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap}   /* fix round (V21): ends clear of the star */
.mj-mcard--front{left:2%;bottom:2%;transform:rotate(-8deg);background:var(--mj-ink);color:var(--mj-white);padding:6% 7%;
  display:flex;flex-direction:column}
.mj-mcard__logo{width:20cqw;height:auto;flex:none;align-self:flex-start}   /* V21: never stretched by the column */
.mj-mcard__rule{display:block;width:16%;height:3px;background:var(--mj-blue);margin-top:auto}
.mj-mcard__vip{font:800 28px/1.1 var(--mj-text);font-size:6.4cqw;text-transform:uppercase;letter-spacing:.04em;margin-top:4%}
.mj-mcard__line{font:600 10px/1.3 var(--mj-text);font-size:2.3cqw;text-transform:uppercase;letter-spacing:.1em;color:var(--mj-w86);margin-top:3%}
/* the tiles: solid white, square, 3 x 2, equal heights */
.mj-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}   /* tiles in a row share its height; each row is as tall as its text */
.mj-tile{display:flex;align-items:center;gap:14px;background:var(--mj-white);color:var(--mj-dark);padding:16px 18px}
.mj-tile__disc{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--mj-blue-d);color:var(--mj-white);flex:none}
.mj-tile h3{font-size:15px;line-height:1.3}
.mj-tile p{font-size:14px;line-height:1.45;color:var(--mj-muted);margin-top:4px}
.mj-vip__btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.mj-btn--line{background:transparent;color:var(--mj-white);box-shadow:none;border:2px solid var(--mj-white)}
.mj-btn--line:hover{background:var(--mj-white);color:var(--mj-blue-d)}
/* "How VIP works": a dark inset panel at the band's foot (the band's second ground) */
.mj-how{margin-top:48px;padding:32px 36px;background:var(--mj-dark)}
.mj-how__h{font-size:20px}
.mj-how__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 32px;margin-top:24px}
.mj-how__steps li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start}
.mj-how__n{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--mj-blue-d);
  color:var(--mj-white);font:800 18px/1 var(--mj-text)}
.mj-how__steps p{font-size:16px;line-height:1.55;color:var(--mj-w86);margin-top:2px}

/* ---- R4: the VIP push, built by main.js from a <template> (with no JS neither exists) ---- */
.mj-pop{border:0;padding:0;margin:auto;width:min(680px,calc(100vw - 48px));max-height:calc(100vh - 48px);overflow:auto;
  background:var(--mj-dark);color:var(--mj-white)}
.mj-pop::backdrop{background:rgba(4,18,43,.72)}
.mj-pop[open]{animation:mj-rise .25s var(--mj-ease)}
.mj-pop :focus-visible{outline-color:var(--mj-white)}
.mj-pop h2:focus{outline:none}
.mj-pop__strip{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--mj-blue-d);padding:8px 8px 8px 28px}
.mj-pop__strip .mj-script{color:var(--mj-white);margin:0;font-size:24px}
.mj-pop__x,.mj-sheet__x{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:0;background:transparent;
  color:var(--mj-white);cursor:pointer;flex:none}
.mj-pop__body{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:28px;padding:28px}
.mj-pop h2{font-size:28px}
.mj-pop__price{font:700 18px/1.4 var(--mj-text);margin-top:8px}
.mj-pop__list{display:flex;flex-direction:column;gap:14px;margin:20px 0 24px}
.mj-pop__list li{display:flex;align-items:center;gap:14px;font-size:15px;line-height:1.45}
.mj-pop__list .mj-bdisc{width:40px;height:40px}
.mj-pop__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.mj-pop__no{min-height:48px;padding:0 4px;border:0;background:none;color:var(--mj-w86);font:600 14px/1 var(--mj-text);
  text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.mj-pop__no:hover{color:var(--mj-white)}
.mj-pop__photo img{display:block;width:200px;height:250px;object-fit:cover}
/* fix round (V1): the phone card is one line, 52px tall: the offer is a link to the form, then a close button */
.mj-sheet{display:none;position:fixed;z-index:19;left:12px;right:12px;bottom:16px;max-width:480px;margin-inline:auto;
  background:var(--mj-dark);color:var(--mj-white);border-left:6px solid var(--mj-blue-d)}
.mj-sheet.is-open{display:flex;align-items:center;animation:mj-rise .3s var(--mj-ease)}
.mj-sheet :focus-visible{outline-color:var(--mj-white);outline-offset:-4px}
.mj-sheet__a{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:52px;padding:4px 4px 4px 12px;color:var(--mj-white);
  text-decoration:none;font:500 14px/1.2 var(--mj-text)}
.mj-sheet__a > .mj-ico{color:var(--mj-blue)}
.mj-sheet__t{flex:1;min-width:0}
.mj-sheet__t b{font-weight:800}
.mj-sheet__a .mj-arrow{width:24px}
.mj-sheet__x{width:48px;height:52px}
@keyframes mj-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (min-width:1024px){ .mj-sheet,.mj-sheet.is-open{display:none} }

/* ---- 9 connect (dark): the van cut-out stands on the band's foot and rises 64px over its top ---- */
.mj-connect{background:var(--mj-dark);color:var(--mj-white);padding-top:72px}
.mj-connect__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(600px,38vw)) minmax(0,1fr);gap:24px;align-items:end}
.mj-connect__copy,.mj-connect__call{padding-bottom:72px}
.mj-connect__van{position:relative;align-self:stretch;min-height:260px}
.mj-connect__van img{position:absolute;left:0;bottom:0;width:100%;height:auto}   /* stands on the band's foot */
.mj-connect__call p{color:var(--mj-w86);margin-bottom:20px}
.mj-callblock--big .mj-disc{width:64px;height:64px}
.mj-callblock--big .mj-callblock__k{font-size:13px}
.mj-callblock--big .mj-callblock__n{font-size:30px}

/* ---- 10 before / after (pale) ---- */
.mj-ba{background:var(--mj-pale);padding-block:var(--mj-sec)}
/* fix round (V12): the slider (S x S) and the pair (two 3:4 frames, 0.75 S wide) share one height, S, never above 480px: the
   pair's 500w files are never shown past their own size */
.mj-ba .mj-wrap{container-type:inline-size}
.mj-ba__row{--ba-s:min(480px,calc((100cqw - 48px) / 2.5));display:grid;grid-template-columns:var(--ba-s) calc(var(--ba-s) * 1.5 + 16px);gap:32px;align-items:start;justify-content:center}
.mj-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.mj-pair .mj-ph{aspect-ratio:3/4;overflow:hidden}
/* the reveal. no-JS base: the two halves side by side, before on the left, labelled under each */
.mj-ba__frame{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:480px}
.mj-ba__before{order:-1}
.mj-ba__layer img{width:100%;aspect-ratio:1/1;object-fit:cover}
.mj-ba__tag{display:block;padding-top:8px;font:700 14px/1.4 var(--mj-text);text-transform:uppercase;letter-spacing:.05em}
.mj-ba__line,.mj-ba__handle,.mj-ba__range,.mj-ba__chip{display:none}
/* with JS: one frame, drag anywhere */
html.js .mj-ba__frame{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;cursor:col-resize;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:var(--mj-rule)}
html.js .mj-ba__layer{position:absolute;inset:0;order:0}
html.js .mj-ba__layer img{width:100%;height:100%;aspect-ratio:auto;pointer-events:none;-webkit-user-drag:none}
html.js .mj-ba__tag{display:none}
html.js .mj-ba__before{clip-path:inset(0 calc(100% - var(--slider-pos,50) * 1%) 0 0)}
html.js .mj-ba__line{display:block;position:absolute;top:0;bottom:0;width:2px;left:calc(var(--slider-pos,50) * 1% - 1px);
  background:var(--mj-white);pointer-events:none}
html.js .mj-ba__handle{display:flex;align-items:center;justify-content:center;position:absolute;width:40px;height:40px;
  border-radius:50%;left:calc(var(--slider-pos,50) * 1% - 20px);top:calc(50% - 20px);background:var(--mj-white);
  color:var(--mj-blue-d);pointer-events:none}
html.js .mj-ba__chip{display:block;position:absolute;top:12px;padding:6px 10px;font:700 13px/1.2 var(--mj-text);letter-spacing:.05em;
  text-transform:uppercase;background:var(--mj-blue-d);color:var(--mj-white);pointer-events:none}
html.js .mj-ba__chip--b{left:12px}
html.js .mj-ba__chip--a{right:12px}
/* the hidden range covers the whole frame (invisible, pointer-free), so a focus scroll brings the whole frame on screen */
html.js .mj-ba__range{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;
  pointer-events:none;-webkit-appearance:none;appearance:none}
html.js .mj-ba__frame:focus-within{outline:3px solid var(--mj-blue-d);outline-offset:3px}

/* ---- 11 reviews (white): three bordered cards + "More reviews" ---- */
.mj-rvws{padding-block:var(--mj-sec)}
.mj-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 32px;margin-top:12px;font:700 16px/1.4 var(--mj-text)}
.mj-links a{color:var(--mj-blue-d);text-underline-offset:4px;display:inline-flex;align-items:center;min-height:48px}
.mj-rcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}   /* fix round (V22) */
.mj-card-rv{display:flex;flex-direction:column;border:1px solid var(--mj-rule);padding:32px}
.mj-card-rv__text{font-size:15px;line-height:1.7;flex:1 0 auto}
.mj-card-rv .mj-starstrip{margin-top:24px}
.mj-card-rv h3{font-size:15px;letter-spacing:.04em;margin-top:14px}
.mj-card-rv .mj-entry__src{margin-top:4px}
.mj-more{margin-top:32px}
.mj-more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;height:52px;padding:0 24px;border:2px solid var(--mj-blue-d);
  color:var(--mj-blue-d);font:700 14px/1 var(--mj-text);letter-spacing:.06em;text-transform:uppercase}
.mj-more summary::-webkit-details-marker{display:none}
.mj-more summary:hover,.mj-more[open] summary{background:var(--mj-blue-d);color:var(--mj-white)}
.mj-cols{columns:3;column-gap:48px;margin-top:24px}
.mj-entry{break-inside:avoid;border-top:1px solid var(--mj-rule);padding:24px 0}
.mj-entry h3{font-size:16px;letter-spacing:.03em}
.mj-entry p:last-child{font-size:16px;line-height:1.65;margin-top:10px}
.mj-foot{font:500 13px/1.4 var(--mj-text);color:var(--mj-muted);margin-top:24px}

/* ---- 12 jobs (dark): three check lines + a 3 x 2 photo grid with label strips ---- */
.mj-jobs{background:var(--mj-dark);color:var(--mj-white);padding-block:var(--mj-sec)}
.mj-jobs__grid{max-width:var(--mj-max);margin-inline:auto;padding-inline:var(--mj-gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.mj-checks{margin-top:32px;display:flex;flex-direction:column;gap:28px}
.mj-checks li{display:grid;grid-template-columns:30px 1fr;gap:16px}
.mj-cdisc{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--mj-blue);color:var(--mj-white);margin-top:1px}
.mj-checks h3{font-size:17px}
.mj-checks p{font-size:15px;color:var(--mj-w86);margin-top:6px}
.mj-jobs__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mj-jtile{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--mj-ink)}
.mj-jtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---- 13 service areas (white) ---- */
.mj-areas{padding-block:var(--mj-sec);border-top:1px solid var(--mj-rule)}
.mj-areas__grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:48px;align-items:stretch}
.mj-areas__side{background:var(--mj-blue-d);color:var(--mj-white);padding:36px 32px;display:flex;flex-direction:column;gap:12px}
.mj-areas__side h3{font-size:24px}
.mj-areas__side p{color:var(--mj-white)}
.mj-areas__side .mj-callblock{margin-top:auto;padding-top:16px}
.mj-areas__side .mj-disc{background:var(--mj-white);color:var(--mj-blue-d)}
.mj-areas__side .mj-callblock__k{color:var(--mj-white)}   /* 4.86:1 on --mj-blue-d; the 86% white was 4.0 */
.mj-areas__side .mj-callblock:hover .mj-callblock__n{color:var(--mj-white);text-decoration:underline;text-underline-offset:5px}   /* round 2.1: the blue hover was 1.37:1 */
.mj-towns{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;align-content:start}
.mj-towns li{display:flex;align-items:center;gap:14px;min-height:64px;border-bottom:1px solid var(--mj-rule);font:700 20px/1.2 var(--mj-text)}

/* ---- 14 contact strip + footer ---- */
.mj-contact{padding-block:72px;background:var(--mj-pale)}
.mj-req + .mj-contact,.mj-sec--pale + .mj-contact{background:var(--mj-white);border-top:1px solid var(--mj-rule)}   /* fix round (V15) */
.mj-contact__in{display:flex;align-items:center;justify-content:center;gap:32px}
.mj-disc--xl{width:88px;height:88px;outline:12px solid rgba(10,143,216,.16)}
.mj-contact__k{color:var(--mj-muted);font-size:16px}
.mj-contact h2{margin-top:6px}
.mj-contact h2 a{text-decoration:none;color:var(--mj-blue-d)}
.mj-contact__alt{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:8px}
.mj-contact__alt a{display:inline-flex;align-items:center;min-height:48px;text-underline-offset:4px}
.mj-ft{background:var(--mj-ink);color:var(--mj-w86);padding:64px 0 32px;font-size:15px}
.mj-ft__grid{display:grid;grid-template-columns:180px repeat(4,minmax(0,1fr));gap:40px}
.mj-ft__logo{width:150px;height:auto}
.mj-ft__h{font:800 15px/1.3 var(--mj-text);letter-spacing:.05em;text-transform:uppercase;color:var(--mj-white);margin-bottom:12px}
.mj-ft__h--2{margin-top:24px}
.mj-ft li{padding-block:3px}
.mj-ft a{text-underline-offset:4px;color:var(--mj-white)}
.mj-vcard a,.mj-ft a,.mj-towns a,.mj-contact__alt a{overflow-wrap:anywhere}   /* fix round (T4): the email address */
.mj-ft__legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--mj-rule-w);font-size:14px}

/* ---- phone bar ---- */
.mj-bar{display:none}

/* ---- 404 ---- */
.mj-nf{background:var(--mj-dark);color:var(--mj-white);padding-block:calc(var(--mj-sec) * 1.25)}   /* fix round (V28): a dark band between the header and footer */
.mj-nf h1{font-size:var(--mj-h1)}
.mj-nf :focus-visible{outline-color:var(--mj-white)}

/* ---- responsive ---- */
@media (max-width:1279px){ .mj-top__cell{padding:0 16px} .mj-top__cell:nth-child(3){display:none} .mj-callblock--big .mj-callblock__n{font-size:26px} }
@media (max-width:1199px){
  .mj-nav__links{display:none}
  .mj-menu{display:block}
  .mj-nav__call{margin-left:auto}
}
@media (max-width:1099px){
  .mj-connect__grid{grid-template-columns:1fr;gap:24px;align-items:start}
  .mj-connect__van{max-width:600px;align-self:auto;min-height:0}
  .mj-connect__van img{position:static}
  .mj-connect__copy{padding-bottom:0}
  .mj-connect__call{padding-bottom:56px}
  .mj-cols{columns:2}
}
@media (max-width:1023px){
  .mj-top__cell:nth-child(2){display:none}
  .mj-hero{grid-template-columns:1fr}
  .mj-hero__copy{padding:56px var(--mj-gut) 40px}
  .mj-hero__photo{aspect-ratio:auto;height:clamp(420px,60vw,560px)}
  .mj-hero{--mj-cw:calc(clamp(420px,60vw,560px) * 0.98)}
  .mj-hero__rv{width:calc(100% - var(--mj-cw) + 40px)}
  .mj-hero__img{object-position:30% 30%}
  .mj-cards__in{grid-template-columns:minmax(0,1fr)}
  .mj-req__grid,.mj-why__grid,.mj-vip__top,.mj-jobs__grid{grid-template-columns:1fr;gap:48px}
  .mj-mcards{width:70%;justify-self:center}
  .mj-tiles{grid-template-columns:1fr 1fr;margin-top:48px}
  .mj-ba__row{grid-template-columns:minmax(0,1fr);justify-content:stretch}
  .mj-how__steps{grid-template-columns:1fr;gap:20px}
  .mj-rcards{grid-template-columns:1fr}
  .mj-areas__grid{grid-template-columns:minmax(0,1fr)}
  .mj-ft__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:599px){ .mj-tiles{grid-template-columns:1fr} }
@media (max-width:767px){
  :root{--mj-gut:16px;--mj-sec:64px;--mj-h1:34px;--mj-h2:28px}
  html{scroll-padding-bottom:calc(var(--mj-bar-h) + 16px)}   /* round 2.1: a focused field lands 16px clear of the bar */
  body{font-size:16px;padding-bottom:calc(var(--mj-bar-h) + env(safe-area-inset-bottom))}
  .mj-top{display:none}
  .mj-nav{height:64px}
  .mj-nav__in{gap:12px}
  .mj-logo{top:5px;left:16px;display:flex;align-items:center;min-height:54px}   /* a 54px tap target around the 50px logo */
  .mj-logo__img{height:50px}
  .mj-nav__call .mj-callblock__t{display:none}
  .mj-nav__call .mj-disc{width:54px;height:54px}
  .mj-menu summary{height:54px}
  .mj-menu__panel{width:min(300px,calc(100vw - 32px))}
  .mj-script{font-size:24px}   /* stays large text (>= 24px): 3.54:1 on white, 3.22 on pale */
  .mj-hero{overflow-x:clip}
  /* 20px top and a 12px gap keep both faces above the fixed bar on the first screen at 664 and 667 tall */
  .mj-hero__copy{padding:20px 16px calc(91.6vw + 12px)}   /* 91.6vw = the v2 cut-out's height at 100vw wide */
  .mj-hero__couple{left:0;bottom:100%;width:100vw}   /* both side cuts on the screen's edges */
  .mj-hero__rv{position:static;width:auto;min-height:0;padding:24px 16px;display:block}
  .mj-gbox{gap:16px;padding:10px 10px 10px 14px}
  .mj-gbox__t{font-size:12px}
  .mj-gbox__t span:first-child{font-size:13px}
  .mj-gbox__g{width:40px;height:40px}
  .mj-hero h1{margin-top:18px}
  .mj-hero__lede{font-size:16px;margin-top:12px}
  /* fix round (V14): the services grid now comes before the request band in the DOM itself (no CSS order swap) */
  .mj-hero__btns{display:none}   /* phones: the owners stand under the copy; the call bar carries Call / Text / Request */
  .mj-btn,.mj-more summary{height:54px}
  .mj-contact h2 a{display:inline-flex;align-items:center;min-height:54px}
  .mj-hero__photo{height:360px}
  .mj-vcard{padding:24px 20px;min-height:0}
  .mj-vcard__disc{width:56px;height:56px}
  .mj-vcard h2{font-size:18px}
  .mj-req__row{grid-template-columns:1fr}
  .mj-stats{flex-direction:row}
  .mj-stat{flex:1}
  .mj-form{padding:24px 16px}
  .mj-form__two{grid-template-columns:1fr}
  .mj-form .mj-check{min-height:54px}
  .mj-svc__grid{grid-template-columns:1fr 1fr;gap:8px}
  .mj-strip{font-size:12px;padding:10px 6px}
  .mj-strip--2{font-size:11px}
  .mj-reasons li{grid-template-columns:44px 1fr;gap:16px}
  .mj-num{width:44px;height:44px;font-size:17px}
  .mj-reasons li:not(:last-child)::before{left:21px;top:48px}
  .mj-reasons h3{font-size:16px}
  .mj-vip__per{font-size:18px}
  .mj-vip__top{gap:32px}
  .mj-how{padding:24px 20px;margin-top:40px}
  .mj-callblock--big .mj-callblock__n{font-size:26px}
  .mj-pair{gap:8px}
  .mj-cols{columns:1}
  .mj-card-rv{padding:24px 20px}
  .mj-jobs__tiles{grid-template-columns:1fr 1fr;gap:6px}
  .mj-towns{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}
  .mj-towns li{font-size:16px;min-height:54px;gap:8px}
  .mj-contact__in{flex-direction:column;align-items:flex-start;gap:20px}
  .mj-disc--xl{width:64px;height:64px;outline-width:8px}
  .mj-ft__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 16px}
  .mj-ft__grid > :first-child{grid-column:1 / -1}
  /* MULTI-PAGE: the footer's service and town lists are links to every page, so phones keep them */
  .mj-ft{font-size:14px}
  .mj-ft li a{display:inline-flex;align-items:center;min-height:44px}
  .mj-sheet{bottom:calc(var(--mj-bar-h) + env(safe-area-inset-bottom) + 10px)}
  .mj-how__steps li{grid-template-columns:44px 1fr}
  .mj-how__n{width:44px;height:44px;font-size:17px}
  .mj-pop__body{grid-template-columns:1fr}
  .mj-bar{display:grid;grid-template-columns:1fr 1fr 1.4fr;position:fixed;left:0;right:0;bottom:0;z-index:20;
    height:calc(var(--mj-bar-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    background:var(--mj-ink);border-top:2px solid var(--mj-white)}
  .mj-bar a{display:flex;align-items:center;justify-content:center;font:700 15px/1 var(--mj-text);letter-spacing:.05em;text-transform:uppercase;
    color:var(--mj-white);text-decoration:none;border-right:1px solid var(--mj-rule-w)}
  .mj-bar a:last-child{background:var(--mj-blue-d);border-right:0}
  .mj-bar a:focus-visible{outline:3px solid var(--mj-white);outline-offset:-6px}
}
@media (prefers-reduced-motion:reduce){
  html.mj-fade .mj-hero__img{opacity:1;transition:none}
  .mj-svc__tile img,.mj-svc__tile:hover img{transform:none;transition:none}
  .mj-btn{transition:none}
  .mj-pop[open],.mj-sheet.is-open{animation:none}
}

/* =====================================================================================================================
   MULTI-PAGE (2026-10-15). The sub-page bands, built only from the preview's tokens and components: dark / pale / white
   flat grounds, Inter 800 CAPS headings, the script eyebrow, square buttons with the thin arrow, circles only for icon
   discs, ruled lists, captions under photos. No pills, no glass, no gradients, no check-mark lists.
   ===================================================================================================================== */
.mj-nav__links a[aria-current="page"],.mj-nav__links a[aria-current="true"]{color:var(--mj-blue-d);text-decoration:underline;text-underline-offset:6px}
.mj-menu__panel a[aria-current="page"],.mj-menu__panel a[aria-current="true"]{color:var(--mj-blue-d)}   /* V18: the section of a service / town page */
.mj-btn--tel{gap:12px}
.mj-btn--tel .mj-ico{width:18px;height:18px}

/* breadcrumb (on the dark page hero) */
.mj-crumbs{font:600 13px/1.4 var(--mj-text);letter-spacing:.05em;text-transform:uppercase;color:var(--mj-w86)}
.mj-crumbs ol{display:flex;flex-wrap:wrap;align-items:center}
.mj-crumbs li{display:flex;align-items:center}
.mj-crumbs li:not(:last-child)::after{content:"/";margin:0 10px;color:var(--mj-w86)}   /* fix round (V27): a wrapped line ends on the slash, never starts with it */
.mj-crumbs a{color:var(--mj-white);display:inline-flex;align-items:center;min-height:32px;text-underline-offset:4px}

/* the page hero (dark), the home hero's grid: copy 55%, photo 45% */
.mj-phero{display:grid;grid-template-columns:55% 45%;background:var(--mj-dark);color:var(--mj-white)}
.mj-phero__copy{padding:24px 48px 48px max(var(--mj-gut),calc(90.909% - var(--mj-max) / 2 + var(--mj-gut)));min-width:0}
.mj-phero--solo{display:block}
.mj-phero--solo .mj-phero__copy{max-width:var(--mj-max);margin-inline:auto;padding:24px var(--mj-gut) 48px}
.mj-phero .mj-script{margin:16px 0 0}
/* sub-page h1s are whole phrases ("Water heater repair and replacement in Gallatin, TN"), so a step under the home's
   54px h1: 40px at 1280, which keeps the call button inside Levi's 580px screen with a three-line h1 */
.mj-phero h1{margin-top:6px;font-size:clamp(32px,3.125vw,46px)}
.mj-phero .mj-crumbs + h1{margin-top:20px}
.mj-phero__lede{font-size:17px;line-height:1.55;color:var(--mj-w86);max-width:640px;margin-top:14px}
.mj-phero__btns{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:24px}
.mj-phero__photo{position:relative;background:var(--mj-ink);min-height:360px}
.mj-phero__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* content sections: white and pale alternate; a photo sits beside the text, sides alternating */
.mj-sec{padding-block:var(--mj-sec)}
.mj-sec--pale{background:var(--mj-pale)}
.mj-sec--rule{border-top:1px solid var(--mj-rule)}
.mj-sec__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}
.mj-sec__grid--flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.mj-sec__grid--flip .mj-sec__photo{order:-1}
.mj-sec__body{max-width:780px}
.mj-sec__photo .mj-ph{aspect-ratio:4/3;overflow:hidden;background:var(--mj-pale)}
.mj-sec--pale .mj-sec__photo .mj-ph{background:var(--mj-white)}
.mj-prose p{font-size:17px;line-height:1.7;margin-top:16px}
.mj-prose h2 + p{margin-top:20px}
.mj-bul{display:grid;gap:10px;margin-top:20px}
.mj-bul li{position:relative;padding-left:26px;font-size:17px;line-height:1.6}
.mj-bul li::before{content:"";position:absolute;left:2px;top:.66em;width:8px;height:8px;background:var(--mj-blue-d)}

/* the call / text panel a section ends with (the VIP band's dark inset panel) */
.mj-ctap{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;margin-top:40px;padding:28px 32px;background:var(--mj-dark);color:var(--mj-white)}
.mj-ctap__k{flex-basis:100%;font:700 14px/1.4 var(--mj-text);letter-spacing:.06em;text-transform:uppercase;color:var(--mj-w86)}
.mj-ctap__alt{display:inline-flex;align-items:center;min-height:48px;color:var(--mj-white);font-weight:700;text-underline-offset:4px}

/* hub tiles: the home services tiles as links; the last tile is a dark "all" tile */
.mj-svc__a{position:absolute;inset:0;display:block;color:var(--mj-white);text-decoration:none}
.mj-svc__a:focus-visible{outline:none}
.mj-svc__tile:focus-within{outline:3px solid var(--mj-blue-d);outline-offset:3px}
.mj-svc__a:hover .mj-strip{background:var(--mj-blue-dd);text-decoration:underline;text-underline-offset:4px}
.mj-svc__tile--all{background:var(--mj-dark)}
.mj-svc__all{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px;
  color:var(--mj-white);text-decoration:none;text-align:center;font:800 20px/1.2 var(--mj-text);letter-spacing:.02em;text-transform:uppercase}
.mj-svc__all:hover{background:var(--mj-ink);text-decoration:underline;text-underline-offset:5px}
.mj-svc__all:focus-visible{outline:none}

/* the jobs strip (dark): our check-ins, photo then caption under it, town and month only */
.mj-jx{background:var(--mj-dark);color:var(--mj-white);padding-block:var(--mj-sec)}
.mj-jx .mj-lede{color:var(--mj-w86)}
.mj-jx__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
.mj-jx__item .mj-ph{aspect-ratio:4/3;overflow:hidden;background:var(--mj-ink)}
.mj-jx__t{font:600 16px/1.5 var(--mj-text);margin-top:14px}
.mj-jx__m{display:flex;flex-wrap:wrap;gap:0 8px;margin-top:6px;font:700 13px/1.4 var(--mj-text);letter-spacing:.05em;text-transform:uppercase;color:var(--mj-blue)}
.mj-jx__m span + span::before{content:"/";margin-right:8px;color:var(--mj-w86)}
.mj-jx__list{margin-top:40px;border-bottom:1px solid var(--mj-rule-w)}
.mj-jx__list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:baseline;padding:16px 0;border-top:1px solid var(--mj-rule-w)}
.mj-jx__list .mj-jx__t{margin:0}
.mj-jx__list .mj-jx__m{margin:0}

/* FAQ: ruled <details>, the heading beside them */
.mj-faq__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;align-items:start}
.mj-faq__list details{border-top:1px solid var(--mj-rule)}
.mj-faq__list details:last-child{border-bottom:1px solid var(--mj-rule)}
.mj-faq__list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px;padding:16px 0;
  font:700 18px/1.4 var(--mj-text)}
.mj-faq__list summary::-webkit-details-marker{display:none}
.mj-faq__list summary:hover{color:var(--mj-blue-d)}
.mj-faq__ico{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:2px solid var(--mj-blue-d);color:var(--mj-blue-d);flex:none;transition:transform .2s var(--mj-ease)}
.mj-faq__list details[open] .mj-faq__ico{transform:rotate(45deg)}
.mj-faq__a{padding:0 60px 24px 0;font-size:17px;line-height:1.7}

/* related links: the service-area list's ruled rows, as links */
.mj-rel__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 64px}
.mj-rel h2{font-size:24px;margin-bottom:8px}
.mj-towns li > a{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;text-decoration:none}
.mj-towns li > a:hover{color:var(--mj-blue-d);text-decoration:underline;text-underline-offset:5px}
.mj-towns--1{grid-template-columns:minmax(0,1fr)}
.mj-areas__side .mj-areas__all{color:var(--mj-white);font-weight:700;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:48px}
.mj-plain{columns:4;column-gap:32px;margin-top:24px}
.mj-plain li{break-inside:avoid;padding:10px 0;border-bottom:1px solid var(--mj-rule);font:600 16px/1.3 var(--mj-text)}
.mj-areas__more{margin-top:56px}
.mj-areas__more h3{font-size:20px}
.mj-areas__more p{color:var(--mj-muted);margin-top:8px}

/* contact page: the value cards carry the ways to reach us */
.mj-vcard a{color:var(--mj-white);text-underline-offset:4px}
.mj-vcard__lines{margin-top:8px;font-size:16px;line-height:1.6}
.mj-vcard__lines li{padding-block:2px}
.mj-vcard__lines a{display:inline-flex;align-items:center;min-height:32px}
.mj-phero .mj-script{text-wrap:balance}
.mj-sec--cards{padding-top:16px}

@media (max-width:1023px){
  .mj-phero{grid-template-columns:1fr}
  .mj-phero__copy{padding:28px var(--mj-gut) 40px}
  .mj-phero__photo{min-height:0;height:clamp(300px,52vw,440px)}
  .mj-sec__grid,.mj-sec__grid--flip,.mj-faq__grid{grid-template-columns:1fr;gap:40px}
  .mj-sec__grid--flip .mj-sec__photo{order:0}
  .mj-sec__photo{max-width:640px}
  .mj-jx__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mj-plain{columns:3}
}
@media (max-width:767px){
  .mj-phero__copy{padding:16px 16px 32px}
  .mj-phero .mj-crumbs + h1{margin-top:16px}
  .mj-phero .mj-script{margin-top:16px}
  .mj-phero__lede{font-size:16px}
  .mj-phero__btns .mj-btn{width:100%;justify-content:space-between;white-space:normal;height:auto;min-height:54px;padding:10px 16px;line-height:1.25}
  .mj-phero__btns .mj-btn--tel{justify-content:flex-start}
  .mj-phero__photo{height:240px}
  .mj-ctap{padding:24px 20px;gap:16px}
  .mj-ctap .mj-btn{width:100%;justify-content:space-between}
  .mj-jx__grid{gap:24px 12px}
  .mj-jx__t{font-size:15px}
  .mj-jx__m{font-size:12px}
  .mj-jx__list li{grid-template-columns:1fr}
  .mj-faq__list summary{font-size:16px}
  .mj-faq__a{padding-right:0;font-size:16px}
  .mj-rel__grid{grid-template-columns:1fr;gap:40px}
  .mj-plain{columns:2;column-gap:16px}
  .mj-prose p,.mj-bul li{font-size:16px}
  .mj-svc__all{font-size:16px}
}
@media (max-width:479px){ .mj-jx__grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .mj-faq__ico{transition:none} }
.mj-sec__link{text-decoration:none}
.mj-sec__link:hover{color:var(--mj-blue-d);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.mj-prose h2 + .mj-bul{margin-top:20px}
.mj-phero h1,.mj-prose h2,.mj-head--c h2{text-wrap:balance}
/* a hub's link entries: ruled, three across (the reviews' "More reviews" entries) */
.mj-lgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px}
.mj-lgrid__item{border-top:1px solid var(--mj-rule);padding:24px 0 32px}
.mj-lgrid__item h2{font-size:20px;line-height:1.25}
.mj-lgrid__item p{font-size:16px;line-height:1.6;margin-top:10px}
.mj-lgrid__item .mj-sec__link{text-decoration:underline;text-decoration-color:var(--mj-blue-d);text-decoration-thickness:2px;text-underline-offset:5px}
.mj-rcards--1,.mj-rcards--2{grid-template-columns:repeat(var(--n),minmax(0,420px));justify-content:center}
.mj-rcards--1{--n:1}
.mj-rcards--2{--n:2}
@media (max-width:1023px){ .mj-lgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .mj-rcards--1,.mj-rcards--2{grid-template-columns:1fr} }
@media (max-width:599px){ .mj-lgrid{grid-template-columns:1fr} }

/* Wide screens (1600+): the side spacing grows with the window, up to 72px. 1440 and below are unchanged. */
@media (min-width:1600px){ :root{ --mj-gut:clamp(40px,3.75vw,72px) } }

/* ---- fix round 2026-10-20 (tools/build.mjs owns the markup) ---- */
@media (max-width:767px){
  /* V16: the contact page's card links and the breadcrumb are 44px tap targets on phones */
  .mj-vcard__lines li{padding-block:0}
  .mj-vcard__lines a,.mj-crumbs a{min-height:44px}
}
/* V20: under 400 wide the sub-page h1 scales with the screen (32px at 390, 31 at 375), so "Hendersonville, TN" stays on one
   line under "Plumber in" instead of leaving "TN" alone */
@media (max-width:399px){ .mj-phero h1{font-size:clamp(24px,calc((100vw - 32px) / 11.2),32px)} }
/* T4 / V19: at 400% zoom (320 CSS px) the two-column footer and town list become one column */
@media (max-width:359px){ .mj-ft__grid,.mj-towns{grid-template-columns:minmax(0,1fr)} }