/* 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: optional;
  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: optional;
  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 ---------- */
/* Symmetric 40px end gutters (user 2026-07-29: move the logo inward from the
   left, and the phone + CTA inward from the right, by the same amount). The
   inset lives HERE rather than as per-item margins so the two ends stay
   mechanically equal — the CTA used to carry a one-off margin-right:24px
   against the logo's 10px, so the bar was never actually symmetric. */
.mc-hdr{
  position:sticky;top:0;z-index:1100;background:#fff;
  border-bottom:1px solid #D8D2CD;padding:5px 40px}
.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:6px}
ul.mc-menu li{margin:0}
/* horizontal padding trimmed 18px -> 12px (2026-07-29) to buy back width for
   the inline nav; the shutter hover still covers the whole item. */
ul.mc-menu a{
  display:block;position:relative;z-index:1;padding:13px 12px;
  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)}
/* padding-left 20px -> 10px (2026-07-29): this is the ONLY fixed part of the
   "Careers to phone number" gap — the other ~30px of it is the auto-margin
   free space that already collapses to 0 when the window narrows. */
.mc-hdr-phone{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  margin-left:auto;padding-left:10px;
  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}
/* margin-right removed 2026-07-29 — .mc-hdr's padding now sets the right
   inset, so this must NOT re-add one or the ends go asymmetric again. */
.mc-hdr-cta-wrap{flex:0 0 auto;padding-left:14px}
/* 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 18px;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}

/* ---- inline-nav SQUEEZE BAND, 1025-1240px --------------------------------
   The burger breakpoint stays at 1024px (user requirement 2026-07-29), so the
   inline nav must physically fit a 1025px viewport. MEASURED required widths
   of the header row (logo + nav + phone + CTA + gaps + gutters):
     original spacing, 10px gutters ............ 1254px  <- never fit 1025!
     original spacing, 40px gutters ............ 1314px
     trimmed base above (12/6/10/14/18) ........ 1190px
     + 16px gutters, 9px items, 3px gap, 17px
       font, 120px logo (this band) ............ 1018px  <- fits 1025 ✓
   So the row could NEVER fit at 1025px on the original spacing — that is the
   pre-existing overflow bug (41px of horizontal scrollbar measured at
   1085px), and only this squeeze makes the 1024px breakpoint honest.
   Banded with min-width:1025px on purpose: below that the nav is a full-width
   dropdown, which must keep its roomy 13px/20px tap targets and full-size
   logo — this squeeze must never leak into it. */
@media (min-width:1025px) and (max-width:1240px){
  .mc-hdr{padding:5px 16px}
  .mc-hdr-logo img{width:120px}
  ul.mc-menu{gap:3px}
  ul.mc-menu a{padding:13px 9px;font-size:17px}
  .mc-hdr-phone{padding-left:6px;font-size:17px}
  .mc-hdr-cta-wrap{padding-left:10px}
  .mc-hdr .mc-hdr-cta{padding:12px 14px;font-size:15px}
}

@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;position:relative}
/* 2.89 (2026-09-12, owner): the city-hero hazard stripe (9px black / amber bars) runs along the top
   edge of the footer, sitewide. */
.mc-ftr::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(90deg,#111 0 18px,#E8A000 18px 36px)}
.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 grow in the first time they scroll into view. All 8 fire together
   — mc-site.js watches the strip, not the tiles (see the note there).
   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.

   THREE DIALS, and duration alone is the weakest of them (user 2026-07-30 found
   the grow "almost unnoticeable" at .5s):
   1. transform DURATION below — the headline speed.
   2. the CURVE. The old cubic-bezier(.2,.8,.3,1) was heavily front-loaded and
      spent ~62% of the scale change in its first ~100ms, so the motion read as
      ~150ms no matter what the duration said. .25,.46,.45,.94 (easeOutQuad)
      spreads it evenly and is why this now reads as a grow rather than a pop.
   3. opacity is deliberately SHORTER than transform, so each tile turns solid
      early and you watch it grow instead of watching it fade in.
   Start scale is the third dial: tiles begin at 72% and grow to full. It was
   .86 until the user asked for a more pronounced grow (2026-07-30), which
   doubled the travel. Lower it further for more; opacity stays put, since the
   point of the short fade is that the growth is what you see. */
.mc-ftr-gallery.js-ftr-anim .mc-ftr-gitem{
  opacity:0;transform:scale(.72);
  transition:opacity .55s ease,transform 1.35s cubic-bezier(.25,.46,.45,.94)}
.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 h2{
  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 h2{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}
/* Standalone News link under the Talk to an Expert button. Deliberately reuses
   the footer's existing link idiom (16px / #FFFFFFD1 / white on hover) rather
   than introducing a new one, since the footer is due a full redesign.
   Centres itself on phones via .mc-ftr-col--brand{text-align:center}. */
.mc-ftr-news{
  display:inline-block;font-size:16px;color:#FFFFFFD1;
  text-decoration:none;transition:color .3s}
.mc-ftr-news:hover{color:#fff}
.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 h2,ul.mc-ftr-svc{padding-left:14px}
.mc-ftr-col--contacts h2,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}
/* Careers band is a .mc-vid-band since 2026-08-31 (native video + replay
   button, shared rules in the news section); the background is the clip's own
   final frame as a load/fail fill, matching the frame it freezes on. */
.mc-cr-band{
  position:relative;height:320px;overflow:hidden;
  background:url("/assets/logos/company/moore-clean-truck-logo-animation-final-frame-v2.webp") center/cover no-repeat}
/* Careers section heading, added 2026-07-26 to fix that page's h1 -> h3 skip.
   Careers is neither .mc-service nor .moore-city, so it inherits no heading
   styles from moore-clean-city-page.css and needs its own. Matches the popup's
   h2 treatment (Saira Condensed, brand blue) and centres over .mc-cr-shot,
   which is itself centred. No bottom margin: the shot's own 24px top margin
   provides the gap. */
.mc-cr h2{
  margin:28px 0 0;text-align:center;color:#344791;
  font-family:"Saira Condensed",sans-serif;font-weight:700;
  font-size:clamp(1.5rem,3vw,2rem);line-height:1.2}
.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 h2{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 h2,.mc-ftr-areas-txt,
  .mc-ftr-col--services h2,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 */
/* Anchor targets must clear the sticky header (.mc-hdr, position:sticky).
   #cyclone added 2026-07-29 for the "Cyclone deep-clean option" links on the
   parking-lot pages; without it the heading lands underneath the header. */
#quote,#cyclone{scroll-margin-top:96px}
/* Homepage section anchors — the four the main menu points at. These had NO
   scroll-margin, so the section landed flush at y=0 and the sticky header
   sliced the top off every heading (user, 2026-07-30).
   ⚠️ The reason 0 was visibly broken here: each target is a wrapper DIV whose
   heading sits only 28-52px inside it (52 at 1280, 50 in the squeeze band, 28
   on a phone) — LESS than the header, so the heading itself ended up underneath.
   80px is the header's own height, measured: 77.6px at both 1280 and 390, and
   64.2px in the 1025-1240 band where the logo shrinks. That lands the target's
   top edge just below the header, so the section's OWN top padding supplies the
   gap and no sliver of the previous section shows — which is why this is 80 and
   not the 96 used above for #quote/#cyclone (those are mid-card targets where
   the extra 18px is harmless; left alone deliberately). */
#premier-services,#accountability-app,#clients,#service-areas{scroll-margin-top:80px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Contact popup (Gravity Form 2) ---------- */
/* Keep the viewport scrollbar's space reserved even while the popup locks
   body scroll (overflow:hidden). Without this the scrollbar disappears on
   open and every centered block shifts ~15px on Windows browsers; a timed
   auto-open is not user-initiated, so that shift would count toward CLS.
   No visual change on pages that scroll (all of ours) — the gutter is
   already there. Overlay-scrollbar platforms (macOS, iOS) are unaffected. */
html{scrollbar-gutter:stable}
/* overflow:hidden so the panel's off-screen start position (see the slide
   block below) can never raise a horizontal scrollbar on the page behind. */
.mc-modal{position:fixed;inset:0;z-index:1300;display:flex;overflow:hidden;
  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}

/* Slide in from the right, slide back out to the right (user, 2026-07-26).
   mc-site.js adds .is-open one frame after [hidden] comes off, and removes it
   before putting [hidden] back, so both directions animate.

   ⚠ THE TRAVEL DISTANCE IS NOT translateX(100%). That was the first attempt and
   it left the photo column visibly stranded on screen until [hidden] snapped it
   away. The panel is CENTRED, so its left edge starts at (vw - pw)/2; moving it
   by its own width therefore lands the left edge at (vw + pw)/2, which is still
   well inside the viewport whenever the panel is narrower than the screen. At
   1487px with the 900px panel that stranded about 245px of it.

   The distance that puts the left edge exactly on the right viewport edge is
   (vw + pw)/2, which is what 50vw + 50% says: 50% resolves against the panel's
   own width, 50vw against the viewport. The extra 2rem is rounding slack. This
   is exact at every viewport rather than a guess, and it self-satisfies at
   narrow widths where pw approaches vw. */
.mc-modal-panel{
  transform:translateX(calc(50vw + 50% + 2rem));
  transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.mc-modal-backdrop{opacity:0;transition:opacity .32s ease}
.mc-modal.is-open .mc-modal-panel{transform:translateX(0)}
.mc-modal.is-open .mc-modal-backdrop{opacity:1}
@media (prefers-reduced-motion:reduce){
  .mc-modal-panel,.mc-modal-backdrop{transition:none}
}
.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;text-align:center;
  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;
  text-align:center}
.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}
/* the active circle itself is amber for both skins — see the shared rule
   alongside the completed-step block further down */
.mc-gf--light .gf_step_completed .gf_step_number{background:#B84F08;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}

/* ==========================================================================
   SAND PANEL for the INLINE quote form (2026-07-26, user request).
   The form column used to sit straight on the green #quote card wearing a
   white-on-dark skin. It now gets its own beige panel, matching the
   .mc-glance spec panel exactly (sand fill, #E8E0CF hairline, 18px radius,
   same soft shadow) so it reads as part of the existing card system.

   Everything below the panel rule re-skins the form for a LIGHT background.
   It deliberately MIRRORS the .mc-gf--light popup block above, so the inline
   and popup forms now match; keep the two in sync when either changes. They
   are not merged into one selector list because the popup sits on white and
   already differs (shorter textarea, no top margin).

   Scope: .mc-gf:not(.mc-gf--light) = the inline form only, on the 34 pages
   that embed it. Lands at (0,4,0), which out-ranks the green-card rules in
   moore-clean-city-page.css (0,3,0) without needing any !important beyond
   what those rules already carry. The bare panel rule is (0,2,0), tying with
   .mc-quote-cols .mc-gf, and wins because mc-site.css enqueues later. */
.mc-gf:not(.mc-gf--light){
  background:var(--mc-sand,#F3EFE8);
  border:1px solid #E8E0CF;
  border-radius:18px;
  padding:1.4rem 1.6rem 1.5rem;
  box-shadow:0 2px 4px rgba(16,40,70,.05),0 10px 24px rgba(16,40,70,.07)}
@media (max-width:600px){
  .mc-gf:not(.mc-gf--light){padding:1.15rem 1.1rem 1.25rem;border-radius:14px}
}

/* Grow the panel out to 10px inside the green card (user, 2026-07-26).
   The gap IS the card's padding, so the panel pulls back by exactly that
   padding minus the gap. Tracking the same clamp() keeps the gap constant on
   every viewport instead of drifting between the 28px and 56px ends. Change
   the 10px below to retune it; nothing else needs touching.
   ⚠ !important on the horizontal margins is required, not cosmetic: the
   green card is a wp-block-group .is-layout-constrained, and core ships
   `.is-layout-constrained > :where(...){margin-left:auto !important}` which
   otherwise silently re-centres the panel and cancels the pull. */
.mc-gf:not(.mc-gf--light){--mc-gf-pull:calc(10px - clamp(1.75rem,4.5vw,3.5rem))}

/* Buttons (Back / Next / Send my request) centred in the footer row. Scoped
   to .mc-gf so it lands on BOTH the inline and popup forms. City CSS already
   makes this row a flex container; this only adds the main-axis alignment. */
/* THE FORM HEIGHT DIAL (user, 2026-07-26).
   GF lays .gform_fields out as a grid with row-gap:var(--gf-form-gap-y), and
   its foundation theme sets that to a very roomy 40px. That single number is
   what made the form tall: Contacts and Location are the two tallest steps and
   both run three grid rows, so each was carrying 80px of pure gap, and
   mc-site.js locks every step to the tallest. Halving it takes 40px off the
   lock, which shortens ALL FOUR steps at once and so keeps them identical,
   while visibly tightening the space between the boxes on Contacts.
   Step 1 gains the most: it is a single field with no inter-field gaps, so it
   loses none of its own height and the whole 40px comes out of its slack.
   GF declares the default ON .gform-theme--foundation, which is the wrapper
   itself at (0,1,0), so re-declaring at (0,2,0) here wins. Retune this one
   value if it wants to be tighter or looser; nothing else needs touching. */
.mc-gf .gform_wrapper{--gf-form-gap-y:20px}
/* "Have multiple properties" toggle (field 22, a GF HTML field carrying a
   plain checkbox that is NOT stored with the entry; .mc-gf-multi) beside
   Property name on the Location step (user 2026-09-06). Widths come from the
   fields' layoutGridColumnSpan (8 + 4 of GF's 12-column grid). The HTML field
   has no visible label, so align-self:end drops its one choice level with the
   Property name INPUT rather than with its label; the choice row is given
   the control height so the box centres on the input. GF collapses every
   field to full width under 641px on its own. */
.mc-gf .gform_wrapper .gfield.mc-gf-multi{align-self:end}
.mc-gf .gform_wrapper .gfield.mc-gf-multi .gfield_checkbox{margin:0}
.mc-gf .gform_wrapper .gfield.mc-gf-multi .gchoice{
  min-height:var(--gf-ctrl-size,44px);display:flex;align-items:center}
/* Inputs the toggle has filled and locked (mc-site.js sets readOnly + this
   class): muted text and a not-allowed cursor so they read as fixed. Both
   skins paint inputs with (0,4,1) !important rules (input[type=text] under
   .mc-gf:not(.mc-gf--light) / .mc-gf--light), so this needs .gform_body +
   [type=text] to reach (0,5,1) and win, focus state included. */
.mc-gf .gform_wrapper .gform_body input[type=text].mc-gf-locked,
.mc-gf .gform_wrapper .gform_body input[type=text].mc-gf-locked:focus{
  color:#6B7480 !important;background:#F3F4F6 !important;cursor:not-allowed}

.mc-gf .gform_wrapper .gform_page_footer,
.mc-gf .gform_wrapper .gform-page-footer,
.mc-gf .gform_wrapper .gform_footer{
  justify-content:center;
  /* Breathing room above the buttons. City CSS sets margin:1rem 0 0 with
     !important, so this has to carry it too. THIS IS THE GAP DIAL — one
     number, same on every step.
     Reduced from 2.25rem on 2026-07-27: the step indicator now sits directly
     above the buttons and brings its own 1.8rem top margin plus a divider, so
     the old value stacked into an oversized gap. Flex items do not collapse
     margins, so the two would have simply added up. */
  margin-top:1.4rem !important}

/* ⚠ DO NOT re-pin the button row to the bottom of the form. Tried on
   2026-07-26 (flex chain down .gform-body and .gform_page plus
   margin-top:auto on the footer) so the buttons would land identically on
   all four steps. It worked, but the gap it opened on the short steps is the
   FULL difference between that step and the tallest one, which the user
   judged far too big, and it coincided with a scroll jump on Next. The slack
   is inherent: mc-site.js locks the form to the tallest step, so consuming
   all of it necessarily leaves a hole. A fixed margin above gives consistent
   SPACING instead of a consistent absolute position, and the leftover slack
   stays where it was, at the bottom of the panel where the sand hides it. */

/* Single-column context: the Services page 3266, where the form follows the
   card's own heading and copy, and every page once the columns stack. Left,
   right and bottom face the card; the TOP faces the copy above it, so it
   keeps its normal margin. */
.mc-gf:not(.mc-gf--light){
  margin-left:var(--mc-gf-pull) !important;
  margin-right:var(--mc-gf-pull) !important;
  margin-bottom:var(--mc-gf-pull)}

/* Form column widened 45% -> 48% on 2026-07-27 (user), so the four-step
   indicator holds one row on desktop instead of dropping "Details" onto a
   second line. The columns carry their widths as INLINE flex-basis from the
   block editor, and core sets flex-grow:0 on any column with one, so this
   needs !important to win. Scoped above the stacking breakpoint so the mobile
   layout is untouched. Changed in step with the step-bar gap and label size in
   moore-clean-city-page.css; adjust the pair together. */
@media (min-width:782px){
  .mc-quote-cols > .wp-block-column:first-child{flex-basis:52% !important}
  .mc-quote-cols > .wp-block-column:last-child{flex-basis:48% !important}
}

/* Two-column context. Mirror image: the LEFT edge faces the text column
   rather than the card, so it keeps the columns gap, and the top joins the
   pull. Breakpoint is 782px because that is where WordPress core actually
   stacks columns (`flex-basis:100%` under 781px), NOT the 900px the vertical
   rule used to use.
   The column must STRETCH first. .mc-quote-cols is vertically centred and the
   55% text column is the taller of the two on desktop, so without align-self
   the panel would float mid-card and never reach the top and bottom edges.
   Making the column a flex column then lets the panel fill it. */
@media (min-width:782px){
  .mc-quote-cols > .wp-block-column:last-child{
    align-self:stretch;display:flex;flex-direction:column}
  .mc-quote-cols > .wp-block-column:last-child > .mc-gf:not(.mc-gf--light){
    flex:1 1 auto;
    margin-top:var(--mc-gf-pull) !important;
    margin-right:var(--mc-gf-pull) !important;
    margin-bottom:var(--mc-gf-pull) !important;
    margin-left:0 !important}
}

/* Form heading, injected into GF's own .gform_heading by
   mooreclean_gf_inline_heading() in functions.php. Family and weight come
   from the page's h3 rule (Archivo 800), which carries !important; only the
   size and colour are set here. Colour has to be stated because
   `.mc-service .mc-svc-card--green h3{color:#fff}` would otherwise paint it
   white on the sand. */
.mc-gf:not(.mc-gf--light) .gform_heading{margin:0 0 1.15rem;text-align:center}
.mc-gf:not(.mc-gf--light) .mc-gf-title{
  margin:0 0 .3rem;font-size:1.5rem;line-height:1.2;color:#344791}
.mc-gf:not(.mc-gf--light) .mc-gf-sub{
  margin:0;font-size:.95rem;line-height:1.55;color:#5A6472}

/* Live list of the services ticked on step 1, built by mc-site.js and shown
   under the subheading on BOTH forms. One flowing line, every entry followed
   by a middle dot (the separator already used in .mc-svc-links and the
   "25+ YEARS IN TEXAS" strip).

   min-height reserves exactly one line whether or not anything is selected, so
   the FIRST tick costs no height and nothing below it moves. 1.5em resolves
   against this element's own .9rem, which is the same figure as its
   line-height, so the two stay in step if either is retuned. Deliberately NOT
   :empty{display:none} — that was the earlier version and it made the first
   tick shove the page down. Ticking enough services to wrap to a second line
   still shifts; only the first line is free. */
.mc-gf-picks{
  margin:.5rem 0 0;font-size:.9rem;line-height:1.5;
  font-weight:600;text-align:center;
  min-height:1.5em}
/* ⚠ The colour needs THREE classes, not one. The inline form sits inside the
   green quote card, and `.mc-service .mc-svc-card--green p{color:#D6EEDF}` in
   moore-clean-city-page.css is (0,2,1) — it beat a bare `.mc-gf-picks` at
   (0,1,0) and painted the line pale mint on sand, close to invisible. The
   popup copy is not inside that card, so it needs no extra weight. */
.mc-service .mc-gf .mc-gf-picks{color:#344791}
.mc-modal-body .mc-gf-picks{color:#344791}
/* In the popup the line sits after .mc-modal-sub, which owns the gap down to
   the form, so hand that gap over. Keyed on the line EXISTING rather than on
   it having content: mc-site.js creates it on load, so the handover happens
   before any interaction and never as a jump. With JS off it is never created
   and the subtitle keeps its original spacing. */
.mc-modal-body .mc-gf-picks{margin:0 0 1.15rem}
.mc-modal-sub:has(+ .mc-gf-picks){margin-bottom:.5rem}

/* The checklist's own "Select a service" legend now duplicates the subtitle
   above it. Hidden VISUALLY only, with the standard clip pattern rather than
   display:none, because a <fieldset> still needs its <legend> to announce the
   group to screen readers. Scoped to the inline form: the popup keeps the
   legend, since its heading says nothing about picking a service. */
.mc-gf:not(.mc-gf--light) .mc-service-checklist > legend.gfield_label{
  position:absolute !important;width:1px !important;height:1px !important;
  padding:0 !important;margin:-1px !important;overflow:hidden !important;
  clip:rect(0 0 0 0) !important;white-space:nowrap !important;border:0 !important}

/* The white vertical rule was the separator between the text column and the
   form. The panel does that job now, and a white hairline would sit INSIDE
   the sand and vanish anyway. City CSS keeps its own rule; this switches it
   off, and the panel's own padding replaces the 1.9rem gutter it was inset
   from. */
.mc-quote-cols .mc-gf:not(.mc-gf--light)::before{display:none}

/* ---- labels ---- */
.mc-gf:not(.mc-gf--light) .gform_wrapper .gfield_label,
.mc-gf:not(.mc-gf--light) .gform_wrapper legend.gfield_label,
.mc-gf:not(.mc-gf--light) .gform_wrapper .gform-field-label{color:#344791 !important}
.mc-gf:not(.mc-gf--light) .gform_wrapper .gfield_required,
.mc-gf:not(.mc-gf--light) .gform_wrapper .gfield_required *{color:#B84F08 !important}
.mc-gf:not(.mc-gf--light) .gform_wrapper .gfield_description{color:#6B7480}

/* ---- inputs ---- */
.mc-gf:not(.mc-gf--light) .gform_wrapper input[type=text],
.mc-gf:not(.mc-gf--light) .gform_wrapper input[type=email],
.mc-gf:not(.mc-gf--light) .gform_wrapper input[type=tel],
.mc-gf:not(.mc-gf--light) .gform_wrapper input[type=number],
.mc-gf:not(.mc-gf--light) .gform_wrapper textarea{
  background:#fff !important;color:#2B3238 !important;
  border:1px solid #C9D0D8 !important}
.mc-gf:not(.mc-gf--light) .gform_wrapper input:focus,
.mc-gf:not(.mc-gf--light) .gform_wrapper textarea:focus{
  outline:2px solid #1CAC45 !important;border-color:#1CAC45 !important}

/* ---- step bar (completed step stays amber via the .mc-gf rules below) ---- */
.mc-gf:not(.mc-gf--light) .gf_page_steps{border-top-color:#E1E5EA}
.mc-gf:not(.mc-gf--light) .gf_step{color:#8A929C}
.mc-gf:not(.mc-gf--light) .gf_step_number{background:#E1E5EA;color:#5A6472}
.mc-gf:not(.mc-gf--light) .gf_step_active{color:#344791}

/* ---- buttons: amber Next/Submit already reads on sand; Back was a white
   ghost button and needed an outline instead ---- */
.mc-gf:not(.mc-gf--light) .gform_wrapper .gform_previous_button{
  color:#5A6472 !important;border:1px solid #C9D0D8 !important}
.mc-gf:not(.mc-gf--light) .gform_wrapper .gform_previous_button:hover,
.mc-gf:not(.mc-gf--light) .gform_wrapper .gform_previous_button:focus{
  background:#F0F2F5 !important}

/* ---- messages ---- */
.mc-gf:not(.mc-gf--light) .gform_wrapper .gfield_validation_message,
.mc-gf:not(.mc-gf--light) .gform_wrapper .validation_message,
.mc-gf:not(.mc-gf--light) .gform_wrapper .gfield_description.validation_message{
  background:#FCEEE7 !important;color:#8A2C0B !important}
.mc-gf:not(.mc-gf--light) .gform_wrapper .gfield_description.instruction{
  color:#7A838F !important;background:none !important}
.mc-gf:not(.mc-gf--light) .gform_confirmation_message{
  background:#F2F8F4;border:1px solid #BFE3CC;color:#2B3238}
.mc-gf:not(.mc-gf--light) .gform_confirmation_message strong{color:#1B6B3F}
.mc-gf:not(.mc-gf--light) .gform_confirmation_message a{color:#1CAC45}

/* Service checklist (forms 1/2 "Items" page): 2 columns of 6, column-major so
   the first six services fill the left column (5 -> 6 rows on 2026-09-06 when
   "Other Sweeping" / "Other Cleanup Service" were added at the foot of each
   column; measured after: Select stays shorter than the Location step at
   both 1280px and 390px, so the tallest-step lock in mc-site.js is unmoved). GF's framework theme renders
   the choice list as a GRID, which makes CSS column-count a no-op, so we drive
   the two columns with grid directly (fixed 5 rows + column auto-flow = the
   left column fills first). !important beats GF's own grid rules. Single
   column on narrow phones so the longer labels don't wrap awkwardly. */
.mc-service-checklist .gfield_checkbox{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  grid-template-rows:repeat(6,auto) !important;
  grid-auto-flow:column !important;
  /* row gap opened up from .35rem on 2026-07-26 (user); column gap unchanged */
  gap:.75rem 2rem !important;
}
.mc-service-checklist .gchoice{break-inside:avoid}
/* Service names one size up, 14px -> 16px (user "+2 units", 2026-07-26).
   GF sizes these from --gf-ctrl-label-font-size-secondary, which resolves to
   --gf-font-size-secondary = 14px, and the per-form inline <style> re-declares
   that same variable. Setting font-size directly sidesteps both. GF's own rule
   wraps its selector in :where(), which contributes ZERO specificity, so this
   (0,2,0) rule wins without !important. Applies to both forms. */
.mc-service-checklist .gform-field-label--type-inline{font-size:16px}
@media (max-width:520px){
  .mc-service-checklist .gfield_checkbox{
    grid-template-columns:1fr !important;
    grid-template-rows:auto !important;
    grid-auto-flow:row !important;
  }
}

/* Amber highlight in the green #quote CTA headings — the word "quote" AND the
   "{City} Metro" phrase (wrapped via <span class="mc-hl-amber"> in content).
   #E8A000 (medium amber): user preferred it over the button's darker #B84F08
   (which is ~1.8:1 on the #14532F green); this keeps ~4:1 and reads better. */
.mc-hl-amber{color:#E8A000}

/* Page-indicator completed step: dark amber (button #B84F08) with white number,
   replacing GF's default blue. GF's framework feeds the circle from
   --gf-field-pg-steps-number-*-complete declared ON THE WRAPPER, so setting them
   on .mc-gf (an ancestor) lost to GF's own value — they must be re-declared at
   .gform_wrapper level. We also hard-set background/border/color so the amber
   wins outright (the earlier rule missed border-color, leaving a blue ring).
   Covers both the inline (.mc-gf) and popup (.mc-gf.mc-gf--light) forms. */
.mc-gf .gform_wrapper{
  --gf-field-pg-steps-number-bg-color-complete:#B84F08;
  --gf-field-pg-steps-number-border-color-complete:#B84F08;
  --gf-field-pg-steps-number-color-complete:#fff;
  --gf-field-pg-steps-number-bg-color-active:#B84F08;
  --gf-field-pg-steps-number-border-color-active:#B84F08;
  --gf-field-pg-steps-number-color-active:#fff;
}
.mc-gf .gf_step_completed .gf_step_number{
  background:#B84F08 !important;
  border-color:#B84F08 !important;
  color:#fff !important;
}
/* CURRENT step circle: same amber as the completed ones (user, 2026-07-26).
   The two stay tellable apart because GF prints a check mark in the completed
   circle and the step number in the current one. Declared here rather than in
   each skin so the green-card, sand and popup forms cannot drift apart; the
   !important is what beats the per-skin rules above and city CSS's own
   .mc-gf .gf_step_active .gf_step_number, which are all equal or higher
   specificity. border-color is set explicitly — leaving it out is what left a
   blue ring around the completed circle the first time round. */
.mc-gf .gf_step_active .gf_step_number{
  background:#B84F08 !important;
  border-color:#B84F08 !important;
  color:#fff !important;
}

/* Post-submit thank-you text in black (user, 2026-07-26). Declared here, after
   both skins, and with !important because the green-card rule in city CSS
   (#fff), the sand rule (#2B3238) and the popup rule (#2B3238 with a green
   <strong>) all target the same element at equal specificity — source order
   alone is too easy to break by moving a block. Covers both forms. */
.mc-gf .gform_confirmation_message,
.mc-gf .gform_confirmation_message strong{color:#000 !important}

/* Closing "back to home" link, sits after the #quote card on every service and
   location page (2026-07-24). Colour is --mc-amber-btn #B84F08, i.e. the SAME
   on-light amber used by .mc-service .eyebrow and the trio "Learn more" links.
   NOT the lighter #F0B03C, which is the on-dark-card variant and would only
   reach ~2:1 against this page background. Weight/size follow .t-more. */
/* Cross-sell service links, sits directly above the closing home link
   (added 2026-07-25). Six services, middot-separated, decorative arrow at each
   end. Green matches the body-link colour; the arrows/separators stay muted so
   the row reads as navigation rather than sentence text. Wraps on phones. */
.mc-svc-links{
  margin:0;padding:2rem 0 0;text-align:center;
  font-size:.9rem;line-height:2;color:#9AA3AE}
/* links + arrows match .mc-home-link exactly (amber #B84F08, 700, .9rem);
   only the middot separators stay muted so the six items still read apart. */
.mc-svc-links a{color:#B84F08;font-weight:700;font-size:.9rem;text-decoration:none}
.mc-svc-links a:hover,
.mc-svc-links a:focus{text-decoration:underline;text-underline-offset:3px}
.mc-svc-links .sep{margin:0 .45rem;color:#9AA3AE}
.mc-svc-links .arw{color:#B84F08;font-weight:700;margin:0 .3rem}
/* tighten the gap when the two rows stack */
/* 2026-08-18: the home link is the 3rd row of the links block — no extra gap,
   same line box as the two rows above (line-height 2 at .9rem). */
.mc-svc-links + .mc-home-link{padding-top:0;font-size:.9rem;line-height:2}

.mc-home-link{margin:0;padding:2rem 0;text-align:center}
/* The link is the LAST child of the page wrapper, so the wrapper's own bottom
   padding lands underneath it: 3rem on .mc-service but 0 on .moore-city. That
   threw the centring out in OPPOSITE directions per template (too much space
   ABOVE on the hubs, too much BELOW on the service pages). Zero it and let the
   link's own symmetric padding define an even band on both. margin:0 keeps WP's
   24px block-gap from reintroducing an uneven top gap. (:has() is already a
   dependency in this file, see body:has(.mc-home).) */
:is(.mc-service,.moore-city):has(> .mc-home-link){padding-bottom:0}
.mc-home-link a{
  color:#B84F08;font-weight:700;font-size:.9rem;text-decoration:none}
.mc-home-link a:hover,
.mc-home-link a:focus{text-decoration:underline;text-underline-offset:3px}

/* --------------------------------------------------------------------------
 * BODY-COPY LINK COLOURS (added 2026-07-24) — fixes pink links.
 *
 * Plain <p> links in the content cards had NO colour rule of their own, so they
 * fell through to hello-elementor's parent reset.css `a{color:#c36}` and
 * rendered PINK. That is a de-Elementorization regression: the Elementor kit
 * (post-265.css) used to colour every link and loaded after the theme CSS;
 * deactivating Elementor removed it and nothing replaced it.
 *
 * Light cards use --mc-green-deep #1C7A42 (the "At a glance" label green), NOT
 * the H1's brighter --mc-green #2CA558: #2CA558 is only ~3.2:1 on white, which
 * fails WCAG AA for body text, while #1C7A42 is ~5.4:1. The design system
 * already makes this split (bright green for the big H1, deep green for small
 * text) so this follows the existing convention.
 *
 * Only `p a` is targeted, deliberately: it leaves list links (e.g.
 * .mc-area-list), breadcrumbs, buttons and the trio "Learn more" alone.
 * .mc-home-link is excluded so it keeps its amber. The dark-card overrides
 * below tie on specificity with the light rule, so ORDER MATTERS — keep them
 * after it.
 * ------------------------------------------------------------------------ */
.mc-service p:not(.mc-home-link):not(.mc-svc-links) a,
.moore-city p:not(.mc-home-link):not(.mc-svc-links) a{
  color:#1C7A42;text-decoration:underline;text-underline-offset:2px}
.mc-service p:not(.mc-home-link):not(.mc-svc-links) a:hover,
.mc-service p:not(.mc-home-link):not(.mc-svc-links) a:focus,
.moore-city p:not(.mc-home-link):not(.mc-svc-links) a:hover,
.moore-city p:not(.mc-home-link):not(.mc-svc-links) a:focus{color:#B84F08}

/* dark blue card: light green, as .moore-city .mc-why already does */
.mc-service .mc-svc-card--blue p a,
.moore-city .mc-svc-card--blue p a{color:#9FE3C4}
.mc-service .mc-svc-card--blue p a:hover,
.mc-service .mc-svc-card--blue p a:focus,
.moore-city .mc-svc-card--blue p a:hover,
.moore-city .mc-svc-card--blue p a:focus{color:#fff}

/* green quote card: light amber, matching the eyebrows on that card */
.mc-service .mc-cta p a,
.moore-city .mc-cta p a,
.mc-service .mc-svc-card--green p a{color:#F0B03C}
.mc-service .mc-cta p a:hover,
.moore-city .mc-cta p a:hover,
.mc-service .mc-svc-card--green p a:hover{color:#fff}

/* ==========================================================================
   NEWS — /news/ index and single articles (2026-07-27)

   Its own layout rather than the .mc-service template, per the user's brief,
   but built from the same tokens so it reads as the same site: sand cards,
   brand blue headings, the amber #B84F08 used for on-light links, and the
   Archivo/Inter pairing. Scoped entirely under .mc-news so it cannot leak
   into the service or city templates.

   Tokens are restated here rather than inherited: moore-clean-city-page.css
   declares them on .moore-city and .mc-service, and news is neither.
   ========================================================================== */
.mc-news{
  --mc-blue:#292B74; --mc-blue-lt:#344791; --mc-sand:#F3EFE8;
  --mc-amber-btn:#B84F08; --mc-ink:#2C3840; --mc-slate:#48535C;
  --mc-line:#E8E0CF;
  max-width:1160px;margin:0 auto;padding:clamp(1.75rem,4.5vw,3.5rem) 20px 0;
  font-family:'Inter',system-ui,sans-serif;color:var(--mc-ink);
  font-size:16.5px;line-height:1.7}

/* floated podcasts table on news articles (2026-08-07): same visual language
   as the insights rail tables (bordered cells, sand Archivo header). Fixed
   300px so neither row wraps; drops out of the float on phones. */
.mc-news-podcasts{float:right;width:300px;margin:.4rem 0 1rem 1.5rem}
.mc-news-podcasts table{width:100%;border-collapse:collapse;font-size:.9rem;line-height:1.5;background:#fff}
.mc-news-podcasts th,.mc-news-podcasts td{border:1px solid var(--mc-line);padding:.5rem .6rem;text-align:left;vertical-align:top}
.mc-news-podcasts thead th{background:var(--mc-sand);font-family:'Archivo','Inter',sans-serif;font-weight:700}
.mc-news-podcasts td{white-space:nowrap}
.mc-news-podcasts a{color:#157F35}
@media (max-width:600px){.mc-news-podcasts{float:none;width:100%;margin:1rem 0}
  .mc-news-podcasts td{white-space:normal}}

/* ---- index header ---- */
.mc-news-head{max-width:760px;margin:0 0 2.2rem}
.mc-news .eyebrow{
  font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.82rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--mc-amber-btn);margin:0 0 .9rem}
.mc-news h1{
  font-family:'Archivo','Inter',sans-serif;font-weight:800;
  letter-spacing:-.025em;line-height:1.08;color:var(--mc-blue);
  font-size:clamp(2.4rem,5.5vw,4rem);margin:0}
.mc-news-lede{font-size:1.13rem;color:var(--mc-slate);margin:.9rem 0 0}

/* ---- company-video band (redesign 2026-08-31; native since round 3) ----
   Fixed-height letterboxed crop like the careers .mc-cr-band, but the clip is
   SELF-HOSTED (a native <video>, same as the header/app/map videos), so on
   ended it simply freezes on its final frame — no end screen, no cover-image
   hand-off. The background is the ffmpeg-extracted final frame anyway, as a
   graceful fill while the video loads or if it fails. The replay button
   (homepage .mc-video-lite .mc-play look) shows only in the --idle state set
   on ended; --manual (after a replay click) lets clicks reach the video so
   tap-to-pause works. 20% taller than careers per the user (384px vs 320px). */
.mc-news-band{
  position:relative;height:384px;overflow:hidden;margin:0 0 2.2rem;
  border-radius:18px;border:1px solid var(--mc-line);
  background:url("/assets/logos/company/moore-clean-truck-logo-animation-final-frame-v2.webp") center/cover no-repeat}
/* Shared .mc-vid-band behaviour (this band AND the careers .mc-cr-band):
   cover-cropped native video, decorative until it ends; is-idle (set by
   mc-site.js on ended) fades the replay button in; is-manual (after a replay
   click) lets clicks reach the video so tap-to-pause works. */
.mc-vid-band video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none}
.mc-vid-band.is-manual video{pointer-events:auto;cursor:pointer}
.mc-vid-replay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;background:transparent;
  border:3px solid #fff;box-sizing:border-box;padding:0;cursor:pointer;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.45));
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,visibility .3s ease,transform .15s ease}
/* hello-elementor's reset.css paints [type="button"]:hover/:focus pink
   (#C36); out-rank it so the ring stays transparent */
.mc-vid-band .mc-vid-replay:hover,
.mc-vid-band .mc-vid-replay:focus{background:transparent}
.mc-vid-replay::after{
  content:"";position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff}
.mc-vid-band.is-idle .mc-vid-replay{opacity:1;visibility:visible;pointer-events:auto}
.mc-vid-band.is-idle .mc-vid-replay:hover{transform:translate(-50%,-50%) scale(1.08)}

/* ---- card grid (redesign 2026-08-31: uniform cards, no images; back to
   sand per the user, same day) ---- */
.mc-news-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1.5rem;margin:0 0 2.5rem}
.mc-news-card{
  background:var(--mc-sand);border:1px solid var(--mc-line);border-radius:18px;
  padding:1.5rem 1.6rem;display:flex;flex-direction:column;
  transition:box-shadow .25s ease}
.mc-news-card:hover{
  box-shadow:0 4px 8px rgba(16,40,70,.07),0 16px 32px rgba(16,40,70,.10)}

.mc-news-meta{display:flex;align-items:center;gap:.8rem;margin:0 0 .8rem;flex-wrap:wrap}
.mc-news-meta .mc-news-date{margin:0}
.mc-news-tag{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-weight:600;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mc-amber-btn);background:#fff;border:1px solid var(--mc-line);
  border-radius:999px;padding:.18rem .65rem}

.mc-news-date{
  margin:0 0 .5rem;font-family:'JetBrains Mono',monospace;
  font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mc-slate)}
.mc-news-card-title{
  font-family:'Archivo','Inter',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:1.2rem;line-height:1.3;margin:0 0 .55rem}
.mc-news-card-title a{color:var(--mc-blue);text-decoration:none}
.mc-news-card-title a:hover{color:var(--mc-amber-btn);text-decoration:underline;text-underline-offset:3px}
.mc-news-excerpt{margin:0 0 1rem;color:var(--mc-slate);font-size:.95rem}
/* margin-top:auto pins the link to the card bottom so ragged excerpt lengths
   still line up across a row */
.mc-news-more{margin:auto 0 0}
.mc-news-more a{
  color:var(--mc-amber-btn);font-weight:700;font-size:.9rem;text-decoration:none}
.mc-news-more a:hover{text-decoration:underline;text-underline-offset:3px}
.mc-news-empty{color:var(--mc-slate)}

/* ---- single article ---- */
.mc-news--single{max-width:980px}
.mc-news .mc-breadcrumbs{
  font-size:.85rem;color:var(--mc-slate);margin:0 0 1.6rem}
.mc-news .mc-breadcrumbs a{color:var(--mc-blue-lt);text-decoration:none}
.mc-news .mc-breadcrumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.mc-news .mc-breadcrumbs span{margin:0 .4rem;color:#9AA3AE}
.mc-news .mc-breadcrumbs span[aria-current]{margin:0;color:var(--mc-slate)}

.mc-news-head--single{margin-bottom:1.6rem}
.mc-news-head--single h1{font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.12}
.mc-news-head--single .mc-news-date{margin:1rem 0 0}

.mc-news-hero{margin:0 0 2rem}
.mc-news-hero img{width:100%;height:auto;border-radius:18px;display:block}

.mc-news-body{font-size:1.05rem}
.mc-news-body h2{
  font-family:'Archivo','Inter',sans-serif;font-weight:800;letter-spacing:-.02em;
  color:var(--mc-blue);font-size:1.6rem;line-height:1.2;margin:2.2rem 0 .8rem}
.mc-news-body h3{
  font-family:'Archivo','Inter',sans-serif;font-weight:800;
  color:var(--mc-blue);font-size:1.2rem;margin:1.8rem 0 .6rem}
.mc-news-body p{margin:0 0 1.15rem}
.mc-news-body a{color:var(--mc-amber-btn);text-decoration:underline;text-underline-offset:3px}
.mc-news-body a:hover{color:#9E4E09}
.mc-news-body blockquote{
  margin:1.6rem 0;padding:.2rem 0 .2rem 1.4rem;
  border-left:3px solid var(--mc-amber-btn);color:var(--mc-slate);font-style:italic}
.mc-news-body img{max-width:100%;height:auto;border-radius:14px}
.mc-news-body ul,.mc-news-body ol{margin:0 0 1.15rem 1.2rem}
.mc-news-body li{margin:0 0 .4rem}

.mc-news-back{margin:2.5rem 0 0}
.mc-news-back a{color:var(--mc-amber-btn);font-weight:700;text-decoration:none}
.mc-news-back a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- pagination ---- */
.mc-news .mc-news-pager{margin:0 0 2.5rem}
.mc-news .nav-links{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.mc-news .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 .7rem;border-radius:999px;
  border:1px solid var(--mc-line);background:#fff;
  color:var(--mc-blue);text-decoration:none;font-size:.9rem;font-weight:600}
.mc-news .page-numbers:hover{background:var(--mc-sand)}
.mc-news .page-numbers.current{
  background:var(--mc-amber-btn);border-color:var(--mc-amber-btn);color:#fff}

@media (max-width:820px){
  .mc-news{padding-left:20px;padding-right:20px}
  .mc-news-grid{grid-template-columns:1fr;gap:1.25rem}
  .mc-news-band{height:288px}
}

/* ==========================================================================
   INDUSTRY INSIGHTS single article (pilot 2026-08-05, post 4681).
   Two-column article layout per the user's format spec: text left (58%),
   visuals right (42%, sticky), full-width header, constrained footer rows.
   Same Archivo/Inter language and tokens as .mc-news; scoped under .mc-ins.
   ========================================================================== */
.mc-ins{
  --mc-blue:#292B74; --mc-blue-lt:#344791; --mc-sand:#F3EFE8;
  --mc-amber-btn:#B84F08; --mc-ink:#2C3840; --mc-slate:#48535C;
  --mc-line:#E8E0CF;
  max-width:1160px;margin:0 auto;
  padding:clamp(1.75rem,4.5vw,3.5rem) 20px 3.5rem;
  font-family:'Inter',system-ui,sans-serif;color:var(--mc-ink);
  font-size:16.5px;line-height:1.7}

.mc-ins .mc-breadcrumbs{font-size:.85rem;color:var(--mc-slate);margin:0 0 1.6rem}
.mc-ins .mc-breadcrumbs a{color:var(--mc-blue-lt);text-decoration:none}
.mc-ins .mc-breadcrumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.mc-ins .mc-breadcrumbs span{margin:0 .4rem;color:#9AA3AE}
.mc-ins .mc-breadcrumbs span[aria-current]{margin:0;color:var(--mc-slate)}

.mc-ins .eyebrow{
  font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.82rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--mc-amber-btn);margin:0 0 .9rem}
.mc-ins-head{max-width:820px;margin:0 0 1.2rem}
.mc-ins-head h1{
  font-family:'Archivo','Inter',sans-serif;font-weight:800;
  letter-spacing:-.025em;line-height:1.12;color:var(--mc-blue);
  font-size:clamp(1.9rem,4vw,2.9rem);margin:0}
.mc-ins-date{
  margin:1rem 0 0;font-family:'JetBrains Mono',monospace;
  font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mc-slate)}

.mc-ins-body h2{
  font-family:'Archivo','Inter',sans-serif;font-weight:800;letter-spacing:-.02em;
  color:var(--mc-blue);font-size:1.6rem;line-height:1.2;margin:2.2rem 0 .8rem}
.mc-ins-body h3{
  font-family:'Archivo','Inter',sans-serif;font-weight:800;
  color:var(--mc-blue);font-size:1.15rem;margin:1.6rem 0 .55rem}
.mc-ins-body p{margin:0 0 1.1rem}
.mc-ins-body a{color:var(--mc-amber-btn);text-decoration:underline;text-underline-offset:3px}
.mc-ins-body a:hover{color:#9E4E09}
.mc-ins-body ul{margin:0 0 1.1rem 1.2rem;padding:0}
.mc-ins-body li{margin:0 0 .5rem}
.mc-ins-body figcaption{font-size:.84rem;color:var(--mc-slate);margin-top:.5rem;text-align:center}

/* header lede + constrained full-width rows (intro, porter, footer, FAQ) */
.mc-ins-lede{max-width:820px;font-size:1.13rem;color:var(--mc-slate)}
.mc-ins-narrow{max-width:820px}

/* the two-column rows: text left, visual rail right */
.mc-ins-row{gap:2.4rem;margin-top:.4rem}
.mc-ins-row .wp-block-column > h2:first-child{margin-top:.4rem}
.mc-ins-vis,.mc-ins-stick{align-self:flex-start}
@media (min-width:782px){.mc-ins-stick{position:sticky;top:96px}
.mc-ins-row--flip{flex-direction:row-reverse;margin-top:2.6rem}}
.mc-ins-vis figure{margin:0 0 1.3rem}
.mc-ins-body img{
  width:100%;height:auto;border:1px solid var(--mc-line);
  border-radius:14px;background:#fff}

/* compact data table inside the rail */
.mc-ins-vis .wp-block-table{margin:0 0 1.3rem}
/* 2.68 (2026-08-22, owner): guide comparison tables tagged mc-col1-fit — first column shrinks to its
   content ("Technology" / "Mechanical broom" stay on one line), second column gives up the width.
   Desktop only; small screens keep natural wrapping. */
@media (min-width:601px){
.mc-ins-body .wp-block-table.mc-col1-fit th:first-child,.mc-ins-body .wp-block-table.mc-col1-fit td:first-child{white-space:nowrap;width:1%}
.mc-ins-body .wp-block-table.mc-col1-fit th:nth-child(2),.mc-ins-body .wp-block-table.mc-col1-fit td:nth-child(2){width:34%}
}
.mc-ins-vis table{
  width:100%;border-collapse:collapse;font-size:.9rem;line-height:1.5;
  background:#fff}
.mc-ins-vis th,.mc-ins-vis td{
  border:1px solid var(--mc-line);padding:.5rem .6rem;
  text-align:left;vertical-align:top}
.mc-ins-vis thead th{
  background:var(--mc-sand);
  font-family:'Archivo','Inter',sans-serif;font-weight:700}

/* sand checklist card in the rail */
.mc-ins-card{
  background:var(--mc-sand);border:1px solid var(--mc-line);
  border-radius:18px;padding:1.5rem 1.6rem;margin-top:.2rem}
.mc-ins-card h3{margin:0 0 .7rem}
.mc-ins-card p:last-child{margin-bottom:0}

@media (max-width:781px){.mc-ins-stick{position:static}}

/* article outro: leader note in a sand frame + home link (template-level,
   appears under every insights post) */
.mc-ins-outro{margin:2.6rem 0 0}
.mc-ins-outro p{margin:0;font-style:italic;color:#157F35;font-size:14px}
/* leader line moved to the TOP in the eyebrow slot (user 2026-08-07); same
   look as the outro, margins flipped for the head position. */
.mc-ins-intro{margin:0 0 1.1rem;max-width:820px}
#sources{scroll-margin-top:80px}
.mc-ins-intro p{margin:0;font-style:italic;color:var(--mc-amber-btn);font-size:14px}
/* leadership outro under the article body: intro's format (italic 14px) in
   the insights green, full article width (no 820px cap by design) */
.mc-ins-outro{margin:1.6rem 0 0}
.mc-ins-outro p{margin:0;font-style:italic;color:#157F35;font-size:14px}
.mc-ins-outro a{color:#157F35;text-decoration:underline;text-underline-offset:3px}
.mc-ins-outro a:hover{text-decoration:none}
.mc-ins-home{margin:1.4rem 0 0;text-align:center}
/* 2.84 (2026-09-05, owner): the service-hub links row (.mc-svc-links) now sits above the
   home link on insights posts; the home link becomes its 3rd row, no extra gap. */
.mc-svc-links + .mc-ins-home{margin-top:0}
/* same look as the service pages' t-more links, arrow on the left */
.mc-ins-home a{display:block;font-weight:700;font-size:.85rem;color:var(--mc-amber-btn);text-decoration:none}
.mc-ins-home a:hover{text-decoration:underline;text-underline-offset:3px}

/* first visual in a column row starts level with the paired column's h2 */
.mc-ins-row .wp-block-column > .wp-block-image:first-child{margin-top:.5rem}

/* header region: featured portrait pinned top right, its top level with
   the H1; the lede AND the first content section flow beside it on the left
   (left blocks are capped at 820px, the image occupies x beyond that) */
.mc-ins-headrow{position:relative;margin-bottom:1.2rem}
.mc-ins-headrow .mc-ins-head{margin:0;max-width:820px}
.mc-ins-headimg{position:absolute;top:-66px;right:0;margin:0} /* 2.72: top raised to the intro line (2x14px italic + 1.1rem gap = ~66px) */
.mc-ins-headimg img{height:466px;width:320px;object-fit:cover;display:block; /* 2.73: both guides pinned to one cropped size (466 = 400 + 66px headroom, top:-66px above; width fixed so portrait ratios match) */
  border:1px solid var(--mc-line);border-radius:0}
/* 2.75: EVERY capped text block beside the image yields to it (intro included — it sits in the image band
   since the 2.72 top raise). Desktop only: below 782px the image is static full-width and the 820px caps
   must stay. 360 = 320px image + 40px gap. NB 2.74 accidentally nested this block INSIDE the img rule above
   (it closes on its second line), which CSS nesting scoped into .mc-ins-headimg img descendants = no effect. */
@media (min-width:782px){
.mc-ins-intro,.mc-ins-narrow,.mc-ins-headrow .mc-ins-head{max-width:min(820px,calc(100% - 360px))} /* 2.76: top-level containers ONLY — calc resolves against the PARENT, so capping .mc-ins-lede inside the already-capped head subtracted 360 twice (lede collapsed to 400px) */
}
@media (max-width:781px){
  .mc-ins-headimg{position:static;top:auto;margin-top:1.2rem}
  .mc-ins-headimg img{height:auto;width:100%}
}

/* site-green keyword highlights in the frequency table (darkened kit green
   #1CAC45 -> #157F35 for AA contrast on white) */
.mc-ins-key{color:#157F35}
.mc-ins-photo img{border-radius:0}

/* ---- v2.63: /industry-insights/ blog hub (category-industry-insights.php) ---- */
.mc-bloghub{max-width:1140px;margin:0 auto;padding:2.5rem 1.25rem 3rem}
.mc-bloghub-hero{text-align:center;max-width:820px;margin:0 auto 2.5rem}
.mc-bloghub .eyebrow{font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#B84F08;margin:0 0 .5rem}
.mc-bloghub-hero h1{font-family:"Saira Condensed",sans-serif;font-size:clamp(2.2rem,5vw,3.2rem);color:#292B74;margin:0 0 1rem;line-height:1.05}
.mc-bloghub-hero h1 em{font-style:normal;color:#2CA558}
.mc-bloghub-lede{color:#3a4149;font-size:1.05rem;line-height:1.7;margin:0}
.mc-bloghub-row{display:flex;gap:2.25rem;align-items:center;background:var(--mc-sand,#F3EFE8);border-radius:14px;padding:1.75rem;margin:0 0 1.75rem}
.mc-bloghub-row--flip{flex-direction:row-reverse}
.mc-bloghub-img{flex:0 0 40%;display:block}
.mc-bloghub-img img{width:100%;height:320px;object-fit:cover;border-radius:10px;display:block}
.mc-bloghub-txt{flex:1}
.mc-bloghub-txt h2{font-family:"Saira Condensed",sans-serif;font-size:1.7rem;line-height:1.2;margin:0 0 .75rem}
.mc-bloghub-txt h2 a{color:#14532F;text-decoration:none}
.mc-bloghub-txt h2 a:hover{color:#B84F08}
.mc-bloghub-excerpt{color:#3a4149;line-height:1.65;font-size:.98rem}
.mc-bloghub-excerpt .mc-ins-key{color:#157F35;font-weight:700}
.mc-bloghub-more{display:inline-block;margin-top:1rem;color:#B84F08;font-weight:700;text-decoration:none}
.mc-bloghub-more:hover{text-decoration:underline}
.mc-bloghub-home{text-align:center;padding:1.5rem 0 0;margin:0}
.mc-bloghub-home a{color:#B84F08;font-weight:700;text-decoration:none}
@media (max-width:781px){.mc-bloghub-row,.mc-bloghub-row--flip{flex-direction:column;padding:1.25rem}.mc-bloghub-img{flex:none;width:100%}.mc-bloghub-img img{height:220px}}

/* ---------- Company video watch page /company-video/ (2026-08-15) ----------
   The one page where a video IS the main content: real player controls, no
   aria-hidden, big. Responsive 16:9 via aspect-ratio (no padding-hack). The
   page reuses the .mc-service card system so it inherits the sitewide look;
   these rules only shape the player boxes. --sm variant for the two secondary
   videos so the hero clearly reads as primary. */
.mc-cv-player{width:100%;max-width:960px;margin:1.4rem auto 0;aspect-ratio:16/9;
  background:#0b1220;border-radius:14px;overflow:hidden;
  box-shadow:0 10px 30px rgba(20,30,50,.18)}
.mc-cv-player iframe{width:100%;height:100%;border:0;display:block}
.mc-cv-player--sm{max-width:760px}
.mc-cv .mc-hero-btns{margin-top:1.4rem;justify-content:center}

/* ---- AI-image disclosure caption under service-band photos (airport pages, 2026-08-25) ---- */
.mc-band-photo figcaption{font-size:14px}
/* 2.90 (2026-09-14): footer social icons (Facebook / LinkedIn) under Industry Insights, first column. */
.mc-ftr-social{display:flex;gap:10px;margin-top:16px}
.mc-ftr-social a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.14);transition:background .18s ease,transform .18s ease}
.mc-ftr-social a:hover{background:#5AC57E;transform:translateY(-2px)}
.mc-ftr-social svg{width:16px;height:16px;fill:#fff;display:block}
/* 2.91 (2026-09-14): footer social icons centered on phones (the brand column is text-align:center
   there, but a flex row needs justify-content). */
@media (max-width:767px){.mc-ftr-social{justify-content:center}}