/* ==========================================================
   MosterNet brand + readability refresh (Sep 2026)
   To undo everything: delete this whole block and Save.
   ========================================================== */
:root{--mn-navy:#00263C;--mn-navy-2:#0B3A57;--mn-red:#F73B29;--mn-red-btn:#D42A1A;--mn-red-btn-hover:#B02012;--mn-ink:#1F2A33;}

/* 1. Brand colors. White header so the navy logo reads; navy hero; light footer */
.zpheader-style-02,
.theme-header,
.theme-menu{background-color:#fff!important;}
.theme-header{border-bottom:1px solid #E3E8EC!important;}
.theme-menu ul li a{color:var(--mn-navy)!important;}
.theme-menu ul li a:hover,.theme-menu ul li.theme-menu-selected > a{color:var(--mn-red-btn)!important;}
.theme-menu ul li a::before,.theme-menu ul li a::after{background-color:var(--mn-red)!important;border-color:var(--mn-red)!important;}
.theme-responsive-menu-area svg,.theme-responsive-menu-area svg path,.theme-responsive-menu-area [class*=menu-icon] *{fill:var(--mn-navy)!important;stroke:var(--mn-navy)!important;}
.theme-responsive-menu-area [class*=menu-icon] span,.theme-responsive-menu-area [class*=hamburger] span{background-color:var(--mn-navy)!important;}
.theme-menu{border-color:var(--mn-red)!important;}
.zphero-slide.zpdark-section{background-color:var(--mn-navy)!important;}
.theme-footer-area.zpdark-section{background-color:#EEF2F5!important;}
.theme-footer-area.zpdark-section,.theme-footer-area.zpdark-section :is(p,li,span,div,a,strong,em,h1,h2,h3,h4,.zptext,.zptext *){color:var(--mn-navy)!important;}
.theme-footer-area.zpdark-section a.zpbutton.zpbutton-type-primary,.theme-footer-area.zpdark-section a.zpbutton.zpbutton-type-primary *{color:#fff!important;}

/* Section headings: navy on white (was light blue, ~2:1 contrast) */
.zpdefault-section h1,.zpdefault-section h1 *,
.zpdefault-section h2,.zpdefault-section h2 *,
.zpdefault-section h3,.zpdefault-section h3 *{color:var(--mn-navy)!important;}
.zpdark-section h1,.zpdark-section h1 *,
.zpdark-section h2,.zpdark-section h2 *,
.zpdark-section h3,.zpdark-section h3 *{color:#fff!important;}

/* Small accent lines + icons: brand red instead of light blue / yellow */
.zpdefault-section .zpheading-style-type1::after,
.zpdefault-section .zpheading::after{background-color:var(--mn-red)!important;border-color:var(--mn-red)!important;}
.zpdefault-section svg,.zpdefault-section svg path{fill:var(--mn-red)!important;}
.zsbox-container-style-02{border-bottom-color:var(--mn-red)!important;}

/* Buttons: red with white text (darker red keeps text readable) */
a.zpbutton.zpbutton-type-primary{background-color:var(--mn-red-btn)!important;border-color:var(--mn-red-btn)!important;color:#fff!important;font-weight:600!important;}
a.zpbutton.zpbutton-type-primary:hover,a.zpbutton.zpbutton-type-primary:focus{background-color:var(--mn-red-btn-hover)!important;border-color:var(--mn-red-btn-hover)!important;}

h3{line-height:1.3!important;}

/* 2. One heading font (Outfit, as in the hero) and one body font (Roboto) */
h1,h2,h3,h4,.zpheading{font-family:'Outfit',sans-serif!important;}
.zpdefault-section p,.zpdefault-section li,.zpdefault-section .zptext{font-family:'Roboto',sans-serif!important;color:var(--mn-ink);}
.zpdark-section p,.zpdark-section li,.zpdark-section .zptext,.zpdark-section .zptext *{color:#fff!important;}

/* 3. Logo: show it on phones and tablets too; smaller on desktop */
.theme-header .zpcontainer .theme-branding-info .theme-logo-parent.theme-disable-logo-mobile{display:flex!important;}
.theme-logo-parent img{max-height:120px!important;width:auto!important;}
@media (min-width:768px) and (max-width:991px){.theme-logo-parent img{max-height:90px!important;}}

/* 4. Headshot: don't stretch past a sensible size on tablets */
img[src*="C75344C8"]{max-width:420px!important;width:100%!important;height:auto!important;margin:0 auto!important;display:block!important;}

/* 5. Phones: smaller headings, left-aligned paragraphs */
@media (max-width:767px){
  .theme-logo-parent img{max-height:64px!important;}
  .zphero-slide h2{font-size:36px!important;line-height:1.15!important;}
  .zpdefault-section h1{font-size:34px!important;line-height:1.2!important;}
  .zpdefault-section h2{font-size:30px!important;line-height:1.2!important;}
  .zpdefault-section h3{font-size:24px!important;line-height:1.25!important;}
  .zpdefault-section p,.zpdefault-section .zptext,.zpdefault-section .zptext *{text-align:left!important;}
}
@media (min-width:768px) and (max-width:991px){
  .zpdefault-section h1{font-size:44px!important;}
  .zpdefault-section h2{font-size:38px!important;}
}
/* 6. Mobile menu icon navy (header is white now); keep list bullets inside the page */
.theme-burger-icon,.theme-burger-icon::before,.theme-burger-icon::after{background-color:var(--mn-navy)!important;}
.zpdefault-section ul{padding-left:1.25em!important;}
/* 7. Hero call-to-action button */
.zphero-slide a.mn-hero-cta{display:inline-block!important;background:var(--mn-red-btn)!important;color:#fff!important;font-family:'Outfit',sans-serif!important;font-weight:600!important;font-size:18px!important;line-height:1.2!important;padding:14px 28px!important;border-radius:6px!important;text-decoration:none!important;}
.zphero-slide a.mn-hero-cta:hover,.zphero-slide a.mn-hero-cta:focus{background:var(--mn-red-btn-hover)!important;}
@media (max-width:767px){.zphero-slide a.mn-hero-cta{display:block!important;text-align:center!important;}}
/* 8. Areas We Serve page: space out the town list, left-align on all screens */
[data-element-id="elm_h7y9F8YKR-CvyVhsd6aVpw"] .zptext p{margin:0 0 14px 0!important;text-align:left!important;}
[data-element-id="elm_h7y9F8YKR-CvyVhsd6aVpw"] .zptext{max-width:760px;margin:0 auto!important;text-align:left!important;}
/* Home hero is now an H1: match the old size on phones */
@media (max-width:767px){.zphero-slide h1{font-size:36px!important;line-height:1.15!important;}}
/* 9. Leftover theme colors: Services boxes, About tabs, Contact banner */
.zpelem-box.zpdark-section-bg{background-color:var(--mn-navy)!important;}
.zptab.zptab-active{background-color:var(--mn-navy)!important;border-color:var(--mn-navy)!important;}
.zptab.zptab-active .zptab-name{color:#fff!important;}
.zptab:not(.zptab-active),.zptab:not(.zptab-active) *{color:var(--mn-navy)!important;}
.zptab.zptab-active *{color:#fff!important;}
.zptab:not(.zptab-active):hover{border-color:var(--mn-red)!important;}
.zptab .zptab-name{font-family:'Outfit',sans-serif!important;font-weight:500!important;}
[data-element-id="elm_jn2_fdzGNNXUfhU264zGuw"].zpsection{background-color:var(--mn-navy)!important;background-image:linear-gradient(rgba(0,38,60,.85),rgba(0,38,60,.85)),url("https://static.zohocdn.com/sites/stock-images/images/zpstock-image-1307.webp")!important;}
.theme-logo-parent a{color:var(--mn-navy)!important;outline-color:var(--mn-red)!important;}
/* 10. FAQ page and Contact "How it works": readable question headings and spacing */
.zpdefault-section .zptext h3{font-size:24px!important;line-height:1.3!important;margin:28px 0 8px!important;}
.zpdefault-section .zptext h3:first-child{margin-top:0!important;}
[data-element-id="elm_kKeo8zZNQAmzpYfiOIgoZA"] .zptext{max-width:820px;margin:0 auto!important;}
[data-element-id="elm_kKeo8zZNQAmzpYfiOIgoZA"] .zptext,[data-element-id="elm_kKeo8zZNQAmzpYfiOIgoZA"] .zptext *{text-align:left!important;}
[data-element-id="elm_kKeo8zZNQAmzpYfiOIgoZA"] .zptext p{margin:0 0 10px!important;}
.zpdefault-section .zptext a:not(.zpbutton):not(.mn-hero-cta){color:var(--mn-red-btn)!important;text-decoration:underline!important;}
@media (max-width:767px){.zpdefault-section .zptext h3{font-size:21px!important;}}
/* 11. Main heading size: consistent page titles on desktop (phones/tablets use the rules above) */
@media (min-width:992px){.zpdefault-section h1{font-size:48px!important;line-height:1.15!important;}.zphero-slide h1{font-size:54px!important;}}
/* 12. Contact form: branded form page loaded full width (form file: /mosternet-contact-form.html) */
[data-element-id="elm_5j5h9FtRGPNSsAIoossQ9Q"] .zpiframe-container{width:100%!important;}
[data-element-id="elm_5j5h9FtRGPNSsAIoossQ9Q"] iframe{display:block!important;width:100%!important;max-width:680px!important;height:940px!important;border:0!important;margin:0 auto!important;}
@media (max-width:560px){[data-element-id="elm_5j5h9FtRGPNSsAIoossQ9Q"] iframe{height:1160px!important;}}
/* 13. Headshot stays sharp on tablets (theme forces 100% width there) */
.zpimage-container figure img[src*="C75344C8"],.zpimage-container img[src*="C75344C8"]{max-inline-size:420px!important;max-width:420px!important;width:100%!important;height:auto!important;margin:0 auto!important;}
/* 14. Photos: same shape, rounded corners, full column width on every page (logo + headshot excluded) */
.zpelem-image:has(img:not([src*="Logo"]):not([src*="C75344C8"])) .zpimage-container{justify-content:center!important;width:100%!important;}
.zpelem-image:has(img:not([src*="Logo"]):not([src*="C75344C8"])) figure{display:block!important;width:100%!important;max-width:100%!important;max-inline-size:100%!important;height:auto!important;margin:0!important;}
.zpelem-image img:not([src*="Logo"]):not([src*="C75344C8"]){display:block!important;width:100%!important;max-width:100%!important;max-inline-size:100%!important;height:auto!important;aspect-ratio:3/2;object-fit:cover!important;border-radius:8px!important;}
img[src*="C75344C8"]{border-radius:8px!important;}
/* Desktop: a photo beside a navy box fills the box's full height so each pair lines up */
@media (min-width:992px){
  .zprow:has(> .zpelem-col > .zpelem-box):has(> .zpelem-col > .zpelem-image){align-items:stretch!important;}
  .zprow:has(> .zpelem-col > .zpelem-box) > .zpelem-col:has(> .zpelem-image){position:relative!important;min-height:360px;}
  .zprow:has(> .zpelem-col > .zpelem-box) > .zpelem-col > .zpelem-image{position:absolute!important;top:0;bottom:0;left:15px;right:15px;margin:0!important;}
  .zprow:has(> .zpelem-col > .zpelem-box) > .zpelem-col > .zpelem-image .zpimage-container,
  .zprow:has(> .zpelem-col > .zpelem-box) > .zpelem-col > .zpelem-image figure{height:100%!important;}
  .zprow:has(> .zpelem-col > .zpelem-box) > .zpelem-col > .zpelem-image img{height:100%!important;aspect-ratio:auto!important;}
  .zprow > .zpelem-col > .zpelem-box{margin-bottom:0!important;}
}
/* Phones + tablets: each photo follows its navy box, so photos never stack back-to-back */
@media (max-width:991px){.zprow:has(> .zpelem-col > .zpelem-box) > .zpelem-col:has(> .zpelem-image){order:2;}}
/* 15. Phones + tablets: header (logo + menu button) stays at the top while scrolling */
@media (max-width:991px){
  .zpheader-style-02{position:sticky!important;top:0!important;z-index:1000!important;background:#fff!important;box-shadow:0 2px 8px rgba(0,38,60,.12);}
  .zpheader-style-02 .theme-branding-info{padding-top:12px!important;padding-bottom:12px!important;}
  .zpheader-style-02 .theme-responsive-menu-area{padding-top:12px!important;padding-bottom:12px!important;}
}
@media (min-width:768px) and (max-width:991px){.theme-logo-parent img{max-height:76px!important;}}
@media (max-width:767px){.theme-logo-parent img{max-height:56px!important;}}
/* 16. Desktop: whole header (logo + menu) stays at the top while scrolling; the logo eases smaller so the bar stays slim */
@media (min-width:992px){
  .zpheader-style-02{position:sticky!important;top:0!important;z-index:1000!important;background:#fff!important;box-shadow:0 2px 8px rgba(0,38,60,.10);}
  .zpheader-style-02 .theme-header.theme-header-animate{position:static!important;animation:none!important;box-shadow:none!important;}
  @supports (animation-timeline: scroll()){
    .zpheader-style-02 .theme-logo-parent img{animation:mn-logo-shrink linear both;animation-timeline:scroll(root);animation-range:0 180px;}
    .zpheader-style-02 > .theme-header:not(.theme-responsive-dark) > .zpcontainer{animation:mn-bar-shrink linear both;animation-timeline:scroll(root);animation-range:0 180px;}
  }
  @supports not (animation-timeline: scroll()){.zpheader-style-02 .theme-logo-parent img{max-height:84px!important;}}
}
@keyframes mn-logo-shrink{from{height:120px;}to{height:64px;}}
@keyframes mn-bar-shrink{from{padding-top:16px;padding-bottom:16px;}to{padding-top:6px;padding-bottom:6px;}}
/* end of MosterNet refresh */