/* Self-hosted fonts (latin subset, mirrored from Google Fonts css2) — Saira Condensed 600/700 + Roboto variable 400/500/700 */

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/roboto-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/roboto-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/roboto-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/saira-condensed-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/saira-condensed-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   MC-SITE — Elementor-free site header + footer (Moore Clean)
   Replicates Elementor header template 13 and footer template 108.
   Kit palette: green #1CAC45, blue #344791, accent #5AC57E, white-82 #FFFFFFD1,
   gray #D8D2CD. Fonts: Saira Condensed (display), Roboto (body).
   ========================================================================== */

/* ---------- Header ---------- */
.mc-hdr{
  position:sticky;top:0;z-index:1100;background:#fff;
  border-bottom:1px solid #D8D2CD;padding:5px 10px}
.mc-hdr-in{display:flex;align-items:center;width:100%;gap:8px}
.mc-hdr-logo{flex:0 0 auto;display:block;line-height:0;margin-right:auto}
.mc-hdr-logo img{width:150px;height:auto;display:block}
.mc-hdr-nav{flex:0 1 auto;margin:0 auto}
ul.mc-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:10px}
ul.mc-menu li{margin:0}
ul.mc-menu a{
  display:block;position:relative;z-index:1;padding:13px 18px;
  font-family:"Saira Condensed",Sans-serif;font-size:18px;font-weight:700;
  text-transform:uppercase;letter-spacing:.2px;line-height:1.2em;
  color:#344791;text-decoration:none;
  transition:color .3s}
/* shutter-out-horizontal: blue grows from the center out (Elementor parity) */
ul.mc-menu a::before{
  content:"";position:absolute;inset:0;z-index:-1;background:#344791;
  transform:scale3d(0,1,1);transform-origin:center;transition:transform .3s}
ul.mc-menu a:hover,ul.mc-menu a:focus{color:#fff}
ul.mc-menu a:hover::before,ul.mc-menu a:focus::before{transform:scale3d(1,1,1)}
.mc-hdr-phone{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  margin-left:auto;padding-left:20px;
  font-family:"Saira Condensed",Sans-serif;font-size:18px;font-weight:700;
  letter-spacing:.2px;color:#344791;text-decoration:none;white-space:nowrap}
.mc-hdr-phone svg{width:18px;height:18px;fill:#1CAC45;flex:0 0 auto}
.mc-hdr-phone:hover{color:#344791}
.mc-hdr-cta-wrap{flex:0 0 auto;padding-left:24px;margin-right:24px}
/* color !important + .mc-hdr prefix: outrank the Elementor kit's link color */
.mc-hdr .mc-hdr-cta{
  display:inline-flex;align-items:center;gap:6px;
  background:#1CAC45;color:#fff !important;border-radius:100px;
  padding:12px 24px;text-decoration:none;
  font-family:"Saira Condensed",Sans-serif;font-size:16px;font-weight:700;
  text-transform:uppercase;letter-spacing:.2px;line-height:1.2em;
  transition:transform .3s;white-space:nowrap}
.mc-hdr .mc-hdr-cta svg{width:15px;height:15px;fill:#fff}
.mc-hdr .mc-hdr-cta:hover,.mc-hdr .mc-hdr-cta:focus{color:#fff !important;transform:scale(1.06)}

/* burger — sits FIRST in the bar on mobile (before the logo).
   Every state is pinned explicitly: mobile browsers give <button> their own
   active/focus background, which showed up as a red box that stuck after tap. */
/* DISPLAY lives on its own low-specificity rule. Do NOT fold display into the
   state group below: :hover/:focus/:active raise specificity above the mobile
   media query, so the button would hide itself the instant it was tapped
   (and swallow the click with it). */
.mc-hdr-burger{
  display:none;flex:0 0 auto;cursor:pointer;
  padding:8px;margin:0 6px 0 0;line-height:0}
/* colour/chrome only — safe to pin across every state */
.mc-hdr-burger,
.mc-hdr-burger:hover,
.mc-hdr-burger:focus,
.mc-hdr-burger:active{
  background:none !important;background-color:transparent !important;
  border:0 !important;box-shadow:none !important;outline:none;
  color:#344791 !important;-webkit-tap-highlight-color:transparent;
  appearance:none;-webkit-appearance:none}
.mc-hdr-burger svg,
.mc-hdr-burger:hover svg,
.mc-hdr-burger:focus svg,
.mc-hdr-burger:active svg,
.mc-hdr-burger .ico-open,
.mc-hdr-burger .ico-close{
  width:26px;height:26px;fill:#344791 !important;color:#344791 !important;
  transition:transform .2s}
.mc-hdr-burger:hover svg{transform:scale(1.1)}
.mc-hdr-burger:focus-visible{outline:2px solid #344791 !important;outline-offset:2px}
.mc-hdr-burger .ico-close{display:none}
.mc-hdr.nav-open .mc-hdr-burger .ico-open{display:none}
.mc-hdr.nav-open .mc-hdr-burger .ico-close{display:inline}

@media (max-width:1024px){
  .mc-hdr-nav{
    display:none;position:absolute;left:0;right:0;top:100%;margin:0;
    background:#fff;border-bottom:1px solid #D8D2CD;
    box-shadow:0 12px 24px rgba(0,0,0,.12)}
  .mc-hdr.nav-open .mc-hdr-nav{display:block}
  ul.mc-menu{flex-direction:column;align-items:stretch;padding:6px 0;gap:0}
  ul.mc-menu a{border-radius:0;padding:13px 20px}
  .mc-hdr-burger{display:inline-flex}
}
@media (max-width:767px){
  .mc-hdr{padding:5px 8px}
  .mc-hdr-phone{display:none}
  .mc-hdr-cta-wrap{padding-left:8px}
  .mc-hdr-cta{padding:10px 18px;font-size:15px}
}

/* ---------- Footer ---------- */
.mc-ftr{background:#344791;font-family:"Roboto",Sans-serif}
.mc-ftr-box{max-width:1280px;margin:0 auto;padding-left:10px;padding-right:10px}
/* gallery strip */
.mc-ftr-gallery-sec{padding:40px 0 8px}
.mc-ftr-gallery{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.mc-ftr-gitem{position:relative;aspect-ratio:1/1;overflow:hidden}
.mc-ftr-gitem .g-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .3s}
.mc-ftr-gitem:hover .g-img{transform:scale(1.08)}
.mc-ftr-gitem .g-ovl{
  position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;
  transition:opacity .3s}
.mc-ftr-gitem:hover .g-ovl{opacity:1}
@media (max-width:1024px){.mc-ftr-gallery{gap:4px}}
@media (max-width:767px){.mc-ftr-gallery{grid-template-columns:repeat(4,1fr);gap:8px}}
/* Thumbnails pop in the first time they scroll into view — replicates the old
   Elementor Pro gallery, whose JS faded each tile in as it entered the viewport.
   The .js-ftr-anim class is added by mc-site.js, so with JS off (or no
   IntersectionObserver) the tiles just render normally instead of staying hidden. */
.mc-ftr-gallery.js-ftr-anim .mc-ftr-gitem{
  opacity:0;transform:scale(.86);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.3,1)}
.mc-ftr-gallery.js-ftr-anim .mc-ftr-gitem.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .mc-ftr-gallery.js-ftr-anim .mc-ftr-gitem{
    opacity:1;transform:none;transition:none}}

/* main columns */
.mc-ftr-main{padding:60px 0 68px}
.mc-ftr-cols{display:flex;flex-wrap:wrap}
.mc-ftr-col{flex:0 0 25%;max-width:25%;min-width:0}
.mc-ftr-col--brand{padding-right:6%}
.mc-ftr h3{
  font-family:"Saira Condensed",Sans-serif;font-size:24px;font-weight:700;
  color:#fff;margin:0 0 10px;line-height:1.2em}
.mc-ftr-col--areas h3{padding-left:5%}
/* Original Elementor image widget rendered the logo at width:50% of the
   column (tablet 20%, mobile 40%) — not full column width. */
.mc-ftr-logo{display:block;width:50%;max-width:337px;height:auto}
.mc-ftr-email{color:#FFFFFFD1;font-size:15px;margin:6px 0 14px}
.mc-ftr-expert{
  display:flex;align-items:center;gap:12px;text-align:left;
  background:#1CAC45;border-radius:6px;padding:16px;margin:0 0 14px;
  box-shadow:0 0 16px rgba(0,0,0,.08);text-decoration:none;
  transition:background .3s}
.mc-ftr-expert:hover{background:#5AC57E}
.mc-ftr-expert .xi{
  flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center}
.mc-ftr-expert .xi svg{width:24px;height:24px;fill:#1CAC45}
.mc-ftr-expert .xt{
  display:block;white-space:nowrap;
  font-family:"Saira Condensed",Sans-serif;font-size:18px;font-weight:700;
  color:#fff !important;line-height:1.2em}
.mc-ftr-expert .xp{
  display:block;white-space:nowrap;
  font-family:"Saira Condensed",Sans-serif;font-size:16px;font-weight:700;
  text-transform:uppercase;letter-spacing:.2px;color:#FFFFFFD1 !important;margin-top:2px}
.mc-ftr-copy{display:flex;align-items:center;gap:10px;color:#FFFFFFD1;font-size:15px;white-space:nowrap}
.mc-ftr-copy svg{width:15px;height:15px;fill:#FFFFFFD1}
.mc-ftr-copy--bottom{margin-top:56px}
/* areas */
.mc-ftr-areas-txt{padding-left:10%;font-size:16px;line-height:1.4em;color:#FFFFFFD1}
.mc-ftr-areas-txt a{color:#FFFFFFD1;text-decoration:none}
.mc-ftr-areas-txt a:hover{color:#fff}
/* services */
ul.mc-ftr-svc{list-style:none;margin:0;padding:0}
ul.mc-ftr-svc li{padding:1.5px 0}
ul.mc-ftr-svc a{color:#FFFFFFD1;font-size:16px;text-decoration:none;transition:color .3s}
ul.mc-ftr-svc a:hover{color:#fff}
/* contacts */
ul.mc-ftr-contact{list-style:none;margin:0 0 12px;padding:0}
ul.mc-ftr-contact li{padding:3px 0}
ul.mc-ftr-contact a{
  display:inline-flex;align-items:center;gap:6px;color:#FFFFFFD1;font-size:16px;
  text-decoration:none}
ul.mc-ftr-contact a:hover{color:#fff}
ul.mc-ftr-contact svg{width:14px;height:14px;fill:#FFFFFFD1;flex:0 0 auto}
.mc-ftr-addr p{color:#FFFFFFD1;font-size:16px;line-height:1.5;margin:0 0 10px}
/* Phone numbers in the address block: written as real tel: links so mobile
   browsers don't auto-detect them and paint them their own colour (Safari/
   Chrome were rendering the San Antonio number red). */
.mc-ftr-addr a,.mc-ftr-addr a:hover,.mc-ftr-addr a:visited,.mc-ftr-addr a:active{
  color:#FFFFFFD1 !important;text-decoration:none}
.mc-ftr-addr a:hover{color:#fff !important}

/* Column contents sit in from the left edge rather than flush against it. */
.mc-ftr-col--services h3,ul.mc-ftr-svc{padding-left:14px}
.mc-ftr-col--contacts h3,ul.mc-ftr-contact,.mc-ftr-addr{padding-left:14px}
@media (max-width:1024px){
  .mc-ftr-col{flex:0 0 50%;max-width:50%;padding:0 12px 24px 0}
  .mc-ftr-col--brand{padding-right:12px}
}

/* ---------- Careers page (exact replica of the old Elementor page 130) ---------- */
.mc-cr{max-width:1280px;margin:0 auto;padding:10px}
.mc-cr-band{
  position:relative;height:320px;overflow:hidden;
  background:url("../../uploads/2025/04/mooreclean-logo-endscreen-animation.webp") center/cover no-repeat}
.mc-cr-band iframe{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(1.03);
  width:100%;min-width:570px;aspect-ratio:16/9;min-height:100%;
  border:0;pointer-events:none;transition:opacity .6s}
.mc-cr-shot{width:819px;max-width:100%;height:auto;display:block;margin:24px auto 8px}
.mc-cr-btnrow{display:flex;margin:8px 0}
.mc-cr-btnrow--center{justify-content:center;padding:12px}
.mc-cr .mc-cr-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:#1CAC45;color:#fff !important;border-radius:100px;
  padding:10px 24px;text-decoration:none;
  font-family:"Saira Condensed",Sans-serif;font-size:16px;font-weight:700;
  text-transform:uppercase;letter-spacing:.2px;line-height:1.2em;
  transition:background .3s}
.mc-cr .mc-cr-btn:hover,.mc-cr .mc-cr-btn:focus{background:#5AC57E;color:#fff !important}
.mc-cr .mc-cr-btn svg{width:15px;height:15px;fill:#fff}
.mc-cr .mc-cr-btn--docs{
  background:#344791;font-size:19px;font-weight:500;text-transform:none;
  letter-spacing:0;line-height:1.3em}
.mc-cr .mc-cr-btn--docs:hover,.mc-cr .mc-cr-btn--docs:focus{background:#5AC57E}

/* hide the theme's auto page title on the new homepage ("Homepage(New)") */
body:has(.mc-home) .page-header{display:none}
@media (max-width:767px){
  .mc-ftr-main{padding:44px 0 40px}
  .mc-ftr-cols{display:block}
  .mc-ftr-col{max-width:100%;padding:0 0 26px;text-align:left}
  .mc-ftr-copy{display:none}
  .mc-ftr-col--contacts h3{display:none}
  /* Phones: brand, Service Areas and Our Services centre up. The Contacts
     column deliberately stays left-aligned with its 14px indent (user call). */
  .mc-ftr-col--brand,
  .mc-ftr-col--areas,
  .mc-ftr-col--services{text-align:center}
  /* the desktop left indents fight the centring — drop them on phones */
  .mc-ftr-col--areas h3,.mc-ftr-areas-txt,
  .mc-ftr-col--services h3,ul.mc-ftr-svc{padding-left:0}
  /* brand block centres up on phones */
  .mc-ftr-logo{width:auto;max-width:169px;margin-left:auto;margin-right:auto}
  /* Contacts stays left-aligned but sits further in from the edge on phones */
  .mc-ftr-col--contacts ul.mc-ftr-contact,
  .mc-ftr-col--contacts .mc-ftr-addr{padding-left:24px}
  .mc-ftr-email{text-align:center}
  .mc-ftr-expert{
    width:75%;margin-left:auto;margin-right:auto;
    justify-content:center;text-align:left}
}


/* quote-form anchor target: clear the sticky header when jumping to #quote */
#quote{scroll-margin-top:96px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Contact popup (Gravity Form 2) ---------- */
.mc-modal{position:fixed;inset:0;z-index:1300;display:flex;
  align-items:center;justify-content:center;padding:1rem}
.mc-modal[hidden]{display:none}
.mc-modal-backdrop{position:absolute;inset:0;background:rgba(18,20,38,.66)}
.mc-modal-panel{
  position:relative;z-index:1;display:flex;width:100%;max-width:900px;
  max-height:92vh;background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.4);font-family:"Roboto",sans-serif}
.mc-modal-photo{
  flex:0 0 340px;background-size:cover;background-position:center;
  background-repeat:no-repeat;background-color:#E9EDF2}
.mc-modal-body{
  flex:1 1 auto;min-width:0;padding:1.9rem 1.7rem;overflow-y:auto}
.mc-modal-panel h2{
  margin:0 0 .3rem;color:#344791;
  font-family:"Saira Condensed",sans-serif;font-weight:700;
  font-size:clamp(1.6rem,3.2vw,2rem);line-height:1.2}
.mc-modal-sub{margin:0 0 1.15rem;color:#5A6472;font-size:.95rem;line-height:1.55}
.mc-modal-sub a{color:#1CAC45;text-decoration:underline}
.mc-modal-x{
  position:absolute;top:.5rem;right:.7rem;z-index:2;
  background:none;border:0;cursor:pointer;color:#7A838F;
  font-size:2rem;line-height:1;padding:.1rem .4rem;border-radius:8px;
  transition:background .2s,color .2s}
.mc-modal-x:hover,.mc-modal-x:focus{background:#F0F2F5;color:#344791}
@media (max-width:820px){
  .mc-modal-photo{display:none}
  .mc-modal-panel{max-width:560px}
}
@media (max-width:560px){
  .mc-modal{padding:.5rem}
  .mc-modal-body{padding:1.5rem 1.1rem}
}

/* ---- Gravity Forms inside the white popup (overrides the green-card skin).
   Loaded after moore-clean-city-page.css, so equal-specificity rules win. ---- */
.mc-gf--light{margin-top:0}
.mc-gf--light .gform_wrapper .gfield_label,
.mc-gf--light .gform_wrapper legend.gfield_label,
.mc-gf--light .gform_wrapper .gform-field-label{color:#344791 !important}
.mc-gf--light .gform_wrapper .gfield_required,
.mc-gf--light .gform_wrapper .gfield_required *{color:#B84F08 !important}
.mc-gf--light .gform_wrapper .gfield_description{color:#6B7480}
.mc-gf--light .gform_wrapper input[type=text],
.mc-gf--light .gform_wrapper input[type=email],
.mc-gf--light .gform_wrapper input[type=tel],
.mc-gf--light .gform_wrapper textarea{
  background:#fff !important;color:#2B3238 !important;
  border:1px solid #C9D0D8 !important}
.mc-gf--light .gform_wrapper input:focus,
.mc-gf--light .gform_wrapper textarea:focus{
  outline:2px solid #1CAC45 !important;border-color:#1CAC45 !important}
.mc-gf--light .gform_wrapper textarea{min-height:96px}
/* step bar */
.mc-gf--light .gf_page_steps{border-top-color:#E1E5EA}
.mc-gf--light .gf_step{color:#8A929C}
.mc-gf--light .gf_step_number{background:#E1E5EA;color:#5A6472}
.mc-gf--light .gf_step_active{color:#344791}
.mc-gf--light .gf_step_active .gf_step_number{background:#344791;color:#fff}
.mc-gf--light .gf_step_completed .gf_step_number{background:#1CAC45;color:#fff}
/* buttons keep the amber CTA; Back becomes an outline on white */
.mc-gf--light .gform_wrapper .gform_previous_button{
  color:#5A6472 !important;border:1px solid #C9D0D8 !important}
.mc-gf--light .gform_wrapper .gform_previous_button:hover,
.mc-gf--light .gform_wrapper .gform_previous_button:focus{
  background:#F0F2F5 !important}
/* messages */
.mc-gf--light .gform_wrapper .gfield_validation_message,
.mc-gf--light .gform_wrapper .validation_message,
.mc-gf--light .gform_wrapper .gfield_description.validation_message{
  background:#FCEEE7 !important;color:#8A2C0B !important}
.mc-gf--light .gform_wrapper .gfield_description.instruction{
  color:#7A838F !important;background:none !important}
.mc-gf--light .gform_confirmation_message{
  background:#F2F8F4;border:1px solid #BFE3CC;color:#2B3238}
.mc-gf--light .gform_confirmation_message strong{color:#1B6B3F}
.mc-gf--light .gform_confirmation_message a{color:#1CAC45}