/* =====================================================================
   MOORE CLEAN — City page styling  v5 (+12.1 noun highlight 2026-08-18)
   Paste into: Appearance → Customize → Additional CSS
   Scoped to .moore-city and .single-locations only.
   Fonts: enqueued via functions.php — no @import needed here.
   ===================================================================== */
/* ================================================================
   WIDTH — single clean override via CSS variable only.
   We set the variable and let WordPress's own constrained layout
   engine apply it. No negative margins, no entry-content padding
   overrides — those fought Hello Elementor's container and caused
   the left shift and uneven alignment.
   ================================================================ */
.single-locations{
  --wp--style--global--content-size: 1060px;
  --wp--style--global--wide-size:    1280px}

/* Hello Elementor wraps content in .hentry which has its own max-width.
   Override just that one container so our variable takes effect.        */
.single-locations .hentry,
.single-locations .entry-content{
  max-width:100% !important}

/* ---- COLOUR TOKENS -------------------------------------------------- */
.moore-city{
  --mc-blue:        #292B74;
  --mc-green:       #2CA558;
  --mc-amber:       #E8A000;   /* bright — hazard stripe only            */
  --mc-amber-btn:   #B84F08;   /* deep — buttons, white text 5.05:1 ✅  */
  --mc-amber-hover: #9E4E09;   /* button hover, white text 5.92:1 ✅    */
  --mc-teal:        #0F3E40;
  --mc-green-dark:  #14532F;
  --mc-gray:        #F4F6F8;
  --mc-sand:        #F3EFE8;
  --mc-slate:       #48535C;
  --mc-line:        #E4E8EC}

/* ---- TYPE ----------------------------------------------------------- */
.moore-city{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.65;color:#2C3840}
.moore-city h1,.moore-city h2,.moore-city h3,.moore-city h4{
  font-family:'Archivo','Inter',sans-serif !important;
  font-weight:800 !important;letter-spacing:-.02em;line-height:1.1;color:var(--mc-blue)}
.moore-city h2{font-size:clamp(1.8rem,3.2vw,2.4rem);margin-top:2rem;margin-bottom:.6rem}
.moore-city h3{font-size:clamp(1.05rem,2vw,1.2rem)}
.moore-city p{font-size:15px;color:#3A4750}
.moore-city .eyebrow{
  font-family:'JetBrains Mono',monospace !important;font-weight:600;
  font-size:.82rem !important;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:.4rem}

/* ---- HERO ----------------------------------------------------------- */
/* alignfull Cover block handles its own full-width breakout natively.   */
/* We only add the visual layer — no width/margin overrides here.        */
.moore-city .mc-hero{position:relative;overflow:hidden}
.moore-city .mc-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px)}
.moore-city .mc-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:9px;z-index:3;
  background:repeating-linear-gradient(90deg,#111 0 18px,var(--mc-amber) 18px 36px)}
.moore-city .mc-hero .wp-block-cover__inner-container{position:relative;z-index:2}
.moore-city .mc-hero h1{font-size:clamp(2.2rem,4.4vw,3.5rem);color:#fff}

/* ---- BUTTONS -------------------------------------------------------- */
.moore-city .wp-block-button__link{
  font-family:'Archivo',sans-serif;font-weight:700;
  font-size:.95rem;border-radius:8px;padding:.75rem 1.5rem;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;
  box-shadow:0 3px 0 rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.12)}
.moore-city .wp-block-button__link:hover{
  transform:translateY(-2px);
  box-shadow:0 5px 0 rgba(0,0,0,.22),0 3px 8px rgba(0,0,0,.14)}
.moore-city .wp-block-button__link:active{
  transform:translateY(1px);
  box-shadow:0 1px 0 rgba(0,0,0,.28)}

/* Deep amber — white text, 5.05:1 full AA ✅ */
.moore-city .wp-block-button:not(.is-style-outline) .wp-block-button__link{
  background-color:var(--mc-amber-btn) !important;
  color:#ffffff !important;border:0 !important}
.moore-city .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{
  background-color:var(--mc-amber-hover) !important}

/* Hero outline button */
.moore-city .mc-hero .is-style-outline .wp-block-button__link{
  background:transparent !important;color:#fff !important;
  border:2px solid rgba(255,255,255,.65) !important;
  box-shadow:0 2px 0 rgba(0,0,0,.2)}
.moore-city .mc-hero .is-style-outline .wp-block-button__link:hover{
  background:rgba(255,255,255,.12) !important}

/* ---- SERVICE CARDS -------------------------------------------------- */
.moore-city .mc-services{
  display:flex !important;flex-wrap:nowrap !important;
  gap:1rem !important;align-items:stretch}
.moore-city .mc-services .wp-block-column{
  flex:1 1 0 !important;min-width:0;
  background:#fff;
  border:1px solid var(--mc-line);
  border-top:3px solid var(--mc-blue);
  border-radius:10px;padding:1.4rem 1.2rem;
  box-shadow:
    0 1px 2px rgba(16,40,70,.04),
    0 4px 12px rgba(16,40,70,.08),
    0 8px 20px rgba(16,40,70,.05);
  transition:transform .18s ease,box-shadow .18s ease}
.moore-city .mc-services .wp-block-column:hover{
  transform:translateY(-3px);
  box-shadow:
    0 2px 4px rgba(16,40,70,.06),
    0 8px 20px rgba(16,40,70,.13),
    0 16px 32px rgba(16,40,70,.07)}
.moore-city .mc-services h3{font-size:1rem;margin:0 0 .5rem;color:var(--mc-blue)}
.moore-city .mc-services p{font-size:.9rem;color:var(--mc-slate);margin:0}
@media(max-width:680px){
  .moore-city .mc-services{flex-wrap:wrap !important}
  .moore-city .mc-services .wp-block-column{flex:1 1 100% !important}}

/* ---- BUNDLED SERVICES CARD (bg: #3A5580 slate blue-gray, set in block inline style) */
.moore-city .wp-block-group.has-background:not(.mc-why):not(.mc-cta):not(.moore-city){
  position:relative;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.13);
  border-radius:10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 4px 16px rgba(0,0,0,.18),
    0 8px 32px rgba(0,0,0,.10)}
/* Crosshatch overlay — same pattern as Why and CTA bands */
.moore-city .wp-block-group.has-background:not(.mc-why):not(.mc-cta):not(.moore-city)::before{
  content:"";
  position:absolute;inset:0;
  z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.06) 0 1px,transparent 1px 6px)}
/* Lift content above the crosshatch overlay */
.moore-city .wp-block-group.has-background:not(.mc-why):not(.mc-cta):not(.moore-city) > *{
  position:relative;z-index:1}

/* ---- ACROSS THE METRO — border + shadow box ------------------------- */
/* trio cards: heading+intro paragraph IS the link (replaced the Learn
   more row, 2026-07-28). Inherit text colors, no underline; hover paints
   the heading the t-more amber for affordance. */
.moore-city .mc-trio-body p a.t-link{
  color:inherit;text-decoration:none;display:block}
.moore-city .mc-trio-body p a.t-link:hover .t-head,
.moore-city .mc-trio-body p a.t-link:hover .t-head em{color:#B84F08}

/* Hero buttons: CENTRED (user 2026-07-29, final).
   History so this is not "fixed" back and forth: centring was tried first on
   all 34 hero pages via `:has(> .mc-hero-lede)` and rejected, then left+20px,
   then left+30px, and once the video moved under the At a glance card the user
   asked for centring after all — but only where the pilot class is applied.
   Styled off .mc-hero-btns, placed on the hero's own buttons block by
   `_theme/mc-hero-btns-class.php`, NOT off a post ID and NOT off :has(), so it
   stays on the pages it has been applied to and promotes by re-running that
   script with more IDs. */
.mc-service .mc-hero-btns{justify-content:center}
/* Mobile: keep the two hero buttons SIDE BY SIDE instead of stacking (user
   2026-07-29). MEASURED at 390px: 334px available but the pair needed
   140 + 205 + a 24px gap = 369px, so it wrapped, 35px short. Reclaimed by
   halving the gap (12px, saves 12) and trimming the buttons' HORIZONTAL
   padding only (18px, saves ~37), which together clear the shortfall with
   room to spare. Vertical padding is untouched, so tap-target height and the
   font size are unchanged. nowrap makes the intent explicit. */
@media (max-width:781px){
  .mc-service .mc-hero-btns{flex-wrap:nowrap;gap:12px}
  .mc-service .mc-hero-btns .wp-block-button__link{
    padding-left:18px;padding-right:18px}
}

/* Hero lede justified so both edges align (user 2026-07-29, SA pilot).
   Class-driven like .mc-hero-btns above, via `_theme/mc-lede-just-class.php`.
   Note: text-align:justify never stretches the LAST line — that is the spec,
   not a bug, so the final line stays left-aligned.
   hyphens:auto is included because justifying without it opens larger word
   gaps; hyphenation lets the browser break long words instead of stretching
   spaces. Remove it if no hyphens are preferred over tighter gaps.
   Applies at ALL widths, mobile included, pending the user's review. Measured
   word gaps for that review: desktop (594px measure, ~10 words/line) worst gap
   9px vs a 5.1px space; mobile (334px measure, some lines only 3 words) worst
   gap 50px. The mobile decision is the user's to make, not mine. */
.mc-service .mc-lede-just{
  text-align:justify;hyphens:auto;-webkit-hyphens:auto}

/* Invisible reserve for the hanging video card (user-directed 2026-07-29).
   The pressure-washing intro card is now ONE column of copy that wraps around
   this float, exactly as it would wrap around a real image sitting under the
   video. Nothing is drawn: it only occupies space.
   Width matches the video (a FIXED 300px, flush with the card's content right
   edge); margin-left is the gutter beside it and margin-bottom the gap before
   text flows underneath.
   ⚠ The HEIGHT here is only a no-JS FALLBACK. The real value is measured at
   runtime by mc-site.js, because the video's overhang is not constant: it
   depends on the hero card's height, which reflows with the lede and the
   At-a-glance rows. Measured 125px at a 1425px viewport but 176px at 1009px,
   and the hardcoded 125px let 8 lines run under the video at the narrow size.
   The fallback is 125px to MINIMISE CLS, because the intro card's top sits
   INSIDE the initial viewport on ordinary desktop screens, so the JS
   correction is NOT below-fold-exempt. Measured overhang by viewport:
     1905px -> 125px · 1425px -> 125px · 1265px -> 125px
     1009px -> 176px · 805px -> 205px
   It is FLAT at 125px across every common desktop width and only grows on
   narrow windows, so 125px means zero late shift for the large majority of
   desktop visits. (A 176px fallback was tried on the reasoning that it suited
   the 1024px case; it zeroed the shift there but introduced a 51px shift at
   1265-1905px, i.e. it optimised the rare case at the expense of the common
   one. Do not "improve" it back.) CPU is not the consideration: the
   measurement costs 0.044ms per run, twice per load.
   ⚠ Hidden below 782px: there the video is in normal flow ABOVE this card, so
   reserving space would carve a hole out of nothing.
   ⚠ !important on the margin is REQUIRED, not defensive. This div sits in an
   `is-layout-constrained` group, and WordPress core emits
     .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
       { margin-left:auto !important; margin-right:auto !important }
   which silently zeroed the 1.75rem gutter at EVERY width (measured: text
   cleared the video by only 2px at 805px). Same core rule that forced
   !important on the mobile video breakout. */
.mc-service .mc-vid-reserve{
  float:right;width:300px;height:125px;
  margin:0 0 1.5rem 1.75rem !important;pointer-events:none}
/* The eyebrow directly after the reserve carried a 24px top margin ON TOP of
   the card+s 56px padding (user flagged the gap 2026-08-07) - zero it; only
   intro cards with the reserve are affected. */
.mc-service .mc-vid-reserve + .eyebrow{margin-top:0 !important}
@media (max-width:781px){
  .mc-service .mc-vid-reserve{display:none}
}

/* coverage-area map in the "Where we work" sand panel (2026-07-28) */
.mc-area-map{margin:1.25rem 0 0}
.mc-area-map img{width:100%;height:auto;display:block}

/* Click-expand the coverage map 1.5x (user 2026-08-07: hover only shows the
   zoom cursor; CLICK toggles the zoom and it stays until a second click —
   was hover-expand from 2026-07-29). The .is-open class is flipped by
   mc-site.js.
   ⚠ DESKTOP POINTERS ONLY — (hover:hover) and (pointer:fine) keeps it off
   touch screens, where there is no real hover and a scaled overlay would
   only get in the way (user raised this).
   transform only, so zero layout cost and no CLS. The parent .mc-svc-card
   has NO overflow:hidden (verified), so the enlarged map is not clipped,
   and z-index lifts it above the following (statically positioned) section.
   Vertical origin is TOP everywhere, so the map only ever grows DOWNWARD
   (user 2026-07-29) and never rides up over the address block above it.
   Horizontal origin is BREAKPOINTED, because the safe direction depends on
   how much gutter exists — MEASURED on the Austin construction page:
     1285px viewport -> 119px gap right of the map, 91px growth per side
                        with a centred origin = 27px clearance (safe, and it
                        only improves as the viewport widens)
     1085px viewport ->  42px gap = 46px OVERFLOW, i.e. a horizontal
                        scrollbar, which must NEVER be patched with
                        overflow-x:hidden on html/body (see working rules)
   So: centred growth (even on both sides, as requested) from 1300px up;
   below that, right-origin growth leftward keeps the feature without the
   scrollbar. */
@media (hover: hover) and (pointer: fine) {
  .mc-area-map img{
    position:relative;z-index:1;cursor:zoom-in;
    transform-origin:right top;
    transition:transform .3s ease}
  .mc-area-map.is-open img{
    transform:scale(1.5);z-index:30;cursor:zoom-out}
}
@media (hover: hover) and (pointer: fine) and (min-width: 1300px) {
  .mc-area-map img{transform-origin:center top}
}
@media (prefers-reduced-motion: reduce){
  .mc-area-map img{transition:none}
}

/* hub #quote CTA: call button centred in its column (user 2026-07-28) */
.moore-city .mc-quote-cols .wp-block-buttons{justify-content:center}

/* mc-quote-cols excluded: the hub #quote CTA columns sit on the dark green
   band with white text — the white box made the heading invisible. */
.moore-city .wp-block-columns:not(.mc-services):not(.mc-stats):not(.mc-quotes):not(.mc-quote-cols){
  border:1px solid var(--mc-line);
  border-radius:12px;
  padding:1.8rem !important;
  background:#fff;
  box-shadow:
    0 2px 4px rgba(16,40,70,.04),
    0 6px 20px rgba(16,40,70,.08)}

/* Don't apply the "across the metro" box to the FAQ columns wrapper.
   :has() targets the columns container that contains details blocks,
   leaving the details blocks' own border/shadow rules untouched.     */
.moore-city .wp-block-columns:has(.wp-block-details){
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  background:transparent !important}

/* ---- WHY BAND ------------------------------------------------------- */
.moore-city .mc-why{position:relative;overflow:hidden}
.moore-city .mc-why::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.04) 0 1px,transparent 1px 6px)}
.moore-city .mc-why > *{position:relative;z-index:1}

/* Census link on teal */
.moore-city .mc-why a,.moore-city .mc-why a:visited{
  color:#9FE3C4 !important;text-decoration:underline;text-underline-offset:3px}
.moore-city .mc-why a:hover{color:#fff !important}

/* Stat glass cards */
.moore-city .mc-stats .wp-block-column{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:1rem .8rem;
  box-shadow:0 2px 8px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.08)}
.moore-city .mc-stats h3{font-size:2.6rem;line-height:1;margin:0 0 .2rem;color:#7FD9A6}
.moore-city .mc-stats p{font-size:.85rem;margin:0;color:#C4E0DC}

/* ---- TESTIMONIALS -------------------------------------------------- */
.moore-city .mc-quotes .wp-block-quote{
  background:var(--mc-sand);
  border:1px solid #E8DFD4;
  border-left:5px solid var(--mc-green);
  border-radius:10px;padding:1.5rem 1.6rem;margin:0;font-style:normal;
  box-shadow:0 2px 4px rgba(0,0,0,.05),0 6px 16px rgba(0,0,0,.07)}
.moore-city .mc-quotes .wp-block-quote p{font-style:normal;font-size:.95rem}
.moore-city .mc-quotes cite{
  display:block;margin-top:.8rem;font-style:normal;
  font-weight:600;font-size:.82rem;color:#5B6B78}

/* ---- FAQ ACCORDION ------------------------------------------------- */
.moore-city .wp-block-details{
  border:1px solid var(--mc-line);border-radius:8px;
  padding:.3rem 1.1rem;margin-bottom:.6rem;background:#fff;
  box-shadow:0 2px 6px rgba(16,40,70,.05),0 1px 2px rgba(16,40,70,.04);
  transition:box-shadow .15s ease}
.moore-city .wp-block-details[open]{
  border-left:3px solid var(--mc-blue);
  box-shadow:0 4px 12px rgba(16,40,70,.10),0 1px 3px rgba(16,40,70,.06)}
.moore-city .wp-block-details summary{
  font-weight:700;font-size:.95rem;color:var(--mc-blue) !important;
  cursor:pointer;padding:.75rem 0;list-style:none}
.moore-city .wp-block-details summary::-webkit-details-marker{display:none}
.moore-city .wp-block-details p{
  color:var(--mc-slate);font-size:.9rem;padding-bottom:.5rem}

/* ---- FINAL CTA BAND ------------------------------------------------ */
.moore-city .mc-cta{position:relative;overflow:hidden}
.moore-city .mc-cta::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px)}
.moore-city .mc-cta::after{
  content:"";position:absolute;left:0;right:0;top:0;height:9px;z-index:2;
  background:repeating-linear-gradient(90deg,#111 0 18px,var(--mc-amber) 18px 36px)}
.moore-city .mc-cta > *{position:relative;z-index:1}

/* ---- PAGE TITLE SUPPRESSION --------------------------------------- */
.single-locations .entry-title,
.single-locations .page-title,
.single-locations h1.entry-title,
body.single-locations .page-header{display:none !important}

/* ---- HEADING COLOUR OVERRIDES ------------------------------------- */
.moore-city h2,.moore-city h3{color:var(--mc-blue)}
.moore-city .mc-why h2,.moore-city .mc-why h3,
.moore-city .mc-cta h2{color:#fff}
.moore-city .wp-block-details summary{color:var(--mc-blue) !important}

/* ---- LOCAL COVERAGE SPACING --------------------------------------- */
/* Tighten excess whitespace above/below the intro group block          */
.moore-city .wp-block-group:not(.mc-why):not(.mc-cta):not(.mc-hero):not(.has-background):not(.moore-city){
  padding-top:1.5rem !important;
  padding-bottom:.75rem !important}

/* ---- CHECKMARK LISTS ----------------------------------------------- */
/* mc-checklist: green circle checkmark, used on service cards           */
/* mc-checklist--light: white ghost checkmark, used on dark bg (bundled) */
.moore-city .mc-checklist{
  list-style:none !important;
  padding-left:0 !important;
  margin:.7rem 0 0 !important}
.moore-city .mc-checklist li{
  position:relative;
  padding-left:1.7rem;
  font-size:.88rem;
  color:var(--mc-slate);
  margin-bottom:.35rem;
  line-height:1.4}
.moore-city .mc-checklist li::before{
  content:"";
  position:absolute;
  left:0;top:.12em;
  width:1rem;height:1rem;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%232CA558%22%2F%3E%3Cpolyline%20points%3D%224%2C8.5%206.5%2C11%2012%2C5.5%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-size:contain;
  background-repeat:no-repeat}

/* Light variant — white ghost circle for dark green bundled card       */
.moore-city .mc-checklist--light li{color:#C9D8CE}
.moore-city .mc-checklist--light li::before{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.18%29%22%2F%3E%3Cpolyline%20points%3D%224%2C8.5%206.5%2C11%2012%2C5.5%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}

/* Bundled services columns inherit dark card context                   */
.moore-city .wp-block-group.has-background .mc-checklist li{color:#C9D8CE}
.moore-city .wp-block-group.has-background .mc-checklist li::before{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.18%29%22%2F%3E%3Cpolyline%20points%3D%224%2C8.5%206.5%2C11%2012%2C5.5%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}

/* ---- FULL CARD CLICKABLE — stretched link technique ---------------- */
/* The heading <a class="mc-card-link"> is positioned relative so it    */
/* sits above the ::after overlay. The ::after stretches to cover the   */
/* entire card, making every pixel clickable. No JS needed.             */
.moore-city .mc-services .wp-block-column{position:relative}
.moore-city .mc-card-link{position:relative;z-index:1}
.moore-city .mc-card-link::after{
  content:"";
  position:absolute;
  inset:0;
  /* Expand ::after to cover the full card (parent column) */
  top:calc(-1.4rem - 3px);   /* card padding-top + border-top */
  left:-1.2rem;               /* card padding-left */
  right:-1.2rem;              /* card padding-right */
  bottom:-1.4rem;             /* card padding-bottom */
  z-index:0;
  border-radius:10px}
/* Lift card visually on hover (re-affirm here since ::after triggers) */
.moore-city .mc-services .wp-block-column:hover{
  transform:translateY(-3px);cursor:pointer}

/* ---- BUNDLED SERVICES: update dark green → deep indigo ------------- */
/* Inline style on the block already handles bg-color. This ensures     */
/* any theme override is beaten and border-top reflects the new colour. */
.moore-city .wp-block-group.has-background:not(.mc-why):not(.mc-cta):not(.moore-city){
  border-top:1px solid rgba(255,255,255,.13);
  border-radius:10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 4px 16px rgba(0,0,0,.18),
    0 8px 32px rgba(0,0,0,.10)}

/* ---- AREAS SERVED — two-column bulleted list ----------------------- */
/* mc-area-list: clean bullet list for city/community and district cols  */
.moore-city .mc-area-list{
  list-style:none !important;
  padding-left:0 !important;
  margin:.4rem 0 0 !important}
.moore-city .mc-area-list li{
  position:relative;
  padding-left:1.4rem;
  font-size:.9rem;
  color:var(--mc-slate);
  margin-bottom:.3rem;
  line-height:1.5}
.moore-city .mc-area-list li::before{
  content:"";
  position:absolute;
  left:0;top:.35em;
  width:.55rem;height:.55rem;
  background-color:#B84F08;
  border-radius:50%}
.moore-city .mc-area-list li a{
  color:var(--mc-blue);
  text-decoration:underline;
  text-underline-offset:2px}
.moore-city .mc-area-list li a:hover{color:var(--mc-green)}
/* "…and more" — same style as all other list items */

/* ---- AREAS SERVED CARD --------------------------------------------- */
/* Single bordered card wrapping all three area columns                  */
.moore-city .mc-areas-card{
  border:1px solid var(--mc-line);
  border-radius:12px;
  background:#fff;
  box-shadow:
    0 2px 4px rgba(16,40,70,.04),
    0 6px 20px rgba(16,40,70,.07)}
/* Prevent the generic columns border rule from double-bordering inside  */
.moore-city .mc-areas-card .wp-block-columns{
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  background:transparent !important}

/* ---- SERVICES GRID — 5 cards wrap 3+2 at desktop ------------------- */
/* Five hero cards at 1060px are too tight in one row (~195px each).    */
/* Switch mc-services to a wrapping flex row: 3 cards top, 2 bottom.    */
.moore-city .wp-block-columns.mc-services{
  flex-wrap:wrap !important;
  gap:1.25rem}
.moore-city .mc-services > .wp-block-column{
  flex:0 0 calc(33.333% - .84rem) !important;
  min-width:260px}
@media (max-width: 900px){
  .moore-city .mc-services > .wp-block-column{
    flex:0 0 calc(50% - .7rem) !important}
}
@media (max-width: 680px){
  .moore-city .mc-services > .wp-block-column{
    flex:0 0 100% !important}
}

/* ---- REVEAL WINDOW on city hub pages (parallax cover) -------------- */
.moore-city .mc-reveal{min-height:300px}
.moore-city .mc-reveal .eyebrow{color:#F0B03C;margin-bottom:.4rem}
.moore-city .mc-reveal .mc-reveal-line{
  font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.15;color:#fff;
  max-width:22ch;margin-left:auto;margin-right:auto}
@media (hover:none) and (pointer:coarse){
  .moore-city .mc-reveal.has-parallax{background-attachment:scroll !important}}

/* ---------------------------------------------------------------- */
/* Child-page breadcrumbs (rendered by moore-clean-seo.php)         */
/* ---------------------------------------------------------------- */
.single-locations .mc-breadcrumbs{
  font-family:'Inter',sans-serif;font-size:.85rem;color:#48535C;
  padding:.85rem clamp(1.25rem,4vw,2.5rem);max-width:1060px;margin:0 auto}
.single-locations .mc-breadcrumbs a{color:#292B74;text-decoration:none;font-weight:500}
.single-locations .mc-breadcrumbs a:hover{text-decoration:underline;text-underline-offset:2px}
.single-locations .mc-breadcrumbs span[aria-hidden]{margin:0 .5rem;color:#9AA4AD}
.single-locations .mc-breadcrumbs span[aria-current]{color:#48535C}

/* =====================================================================
   MOORE CLEAN — UNIVERSAL SERVICE PAGES  ·  mc-service family  v1
   Scoped to .mc-service (wp:group className on /services/ pages).
   Card style: giant rounded cards on concrete gray, oversized display
   type, fixed-background reveal windows, amber accent system.
   Zero effect on city pages (.moore-city) or any other page.
   ===================================================================== */

/* ---- page shell ----------------------------------------------------- */
body:has(.mc-service){background:#F4F6F8}
body.page:has(.mc-service) .entry-title,
body.page:has(.mc-service) .page-title,
body.page:has(.mc-service) .page-header{display:none !important}
body.page:has(.mc-service){
  --wp--style--global--content-size: 1160px;
  --wp--style--global--wide-size:    1280px}
body.page:has(.mc-service) .hentry,
body.page:has(.mc-service) .entry-content{max-width:100% !important}
/* mc-service layout on locations CPT (city-service child pages) */
body.single-locations:has(.mc-service){
  --wp--style--global--content-size: 1160px;
  --wp--style--global--wide-size:    1280px}

/* ---- tokens & base type --------------------------------------------- */
.mc-service{
  --mc-blue:#292B74; --mc-green:#2CA558; --mc-green-deep:#1C7A42;
  --mc-green-card:#1B6B3F; --mc-amber-btn:#B84F08; --mc-amber-hover:#9E4E09;
  --mc-amber-lt:#F0B03C; --mc-gray:#F4F6F8; --mc-sand:#F3EFE8;
  --mc-slate:#48535C; --mc-line:#E4E8EC; --mc-ink:#2C3840;
  font-family:'Inter',system-ui,sans-serif;
  font-size:16.5px;line-height:1.7;color:var(--mc-ink)}
/* body-prefixed to out-rank Elementor kit rules (.elementor-kit-265 h1 etc)
   which load later and set Tahoma/Saira Condensed at fixed sizes */
body .mc-service h1,body .mc-service h2,body .mc-service h3{
  font-family:'Archivo','Inter',sans-serif !important;
  font-weight:800 !important;letter-spacing:-.025em !important;line-height:1.08;
  text-transform:none !important;color:var(--mc-blue)}
body .mc-service h1{font-size:clamp(2.4rem,5.5vw,4rem)}
body .mc-service h1 em{font-style:normal;color:var(--mc-green)}
/* v12.0 (2026-08-18): service-NOUN highlight, owner spec. The H1 <em> moved from the verb to the noun
   ("Austin, TX <em>Parking Lot</em> Sweeping"); the h1 rule above is unchanged. H2 <em> = the same green on
   white/sand cards (large bold text, 3.2:1 clears the 3:1 large-text floor); in the blue Why band it is the
   light green the blue cards already use for links/t-head. The green quote card uses .mc-hl-amber spans. */
body .mc-service h2 em{font-style:normal;color:var(--mc-green)}
.mc-service .mc-svc-card--blue h2 em{color:#8FE0B0}
/* Why-band H2 is a direct child of a constrained group, so WP caps it at the 800px content width while the
   card is ~950px inside; "What does SWPPP compliance require from cleanup?" wrapped its last word with room
   to spare (owner screenshot 2026-08-18). Let that H2 use the card width and trim its ceiling a hair. */
.mc-service .mc-svc-card--blue > h2{max-width:none;font-size:clamp(1.9rem,3.5vw,2.5rem)}
/* v12.1 (2026-08-18): hub H1 "Austin, TX <em>Street</em> Sweeping & Cleanup" — noun green on the dark hero,
   same green as the service-page H1. Hub cards untouched (locked). */
.moore-city h1 em{font-style:normal;color:var(--mc-green)}
body .mc-service h2{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:.8rem;line-height:1.08}
body .mc-service h3{font-size:1.1rem;line-height:1.25}
body .mc-service p{color:#3A4750;font-family:'Inter',system-ui,sans-serif;font-size:1em;line-height:1.7}
.mc-service .eyebrow{
  font-family:'JetBrains Mono',monospace !important;font-weight:600;
  font-size:.82rem !important;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mc-amber-btn);margin-bottom:.9rem}

/* ---- giant rounded cards -------------------------------------------- */
.mc-service .mc-svc-card{
  border-radius:28px;background:#fff;
  padding:clamp(1.75rem,4.5vw,3.5rem) !important;
  box-shadow:0 1px 2px rgba(16,40,70,.04),0 8px 28px rgba(16,40,70,.06);
  margin-top:1.5rem;margin-bottom:0}
.mc-service .mc-svc-card--sand{background:var(--mc-sand)}
/* map-carrying sand card only: tighter frame (user 2026-08-07); other cards
   keep the clamp above. :has() — fine on all evergreen browsers; without it
   the padding just stays as before. */
.mc-service .mc-svc-card--sand:has(.mc-area-map){padding:clamp(1.25rem,3vw,2.25rem) !important}
.mc-service .mc-svc-card--blue{background:var(--mc-blue)}
.mc-service .mc-svc-card--blue h2,.mc-service .mc-svc-card--blue h3{color:#fff}
.mc-service .mc-svc-card--blue p{color:#C9CDEB}
.mc-service .mc-svc-card--blue .eyebrow{color:var(--mc-amber-lt)}
.mc-service .mc-svc-card--green{background:var(--mc-green-card)}
.mc-service .mc-svc-card--green h2,.mc-service .mc-svc-card--green h3{color:#fff}
.mc-service .mc-svc-card--green p{color:#D6EEDF}
.mc-service .mc-svc-card--green .eyebrow{color:var(--mc-amber-lt)}

/* ---- buttons -------------------------------------------------------- */
.mc-service .wp-block-button__link{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.98rem;
  border-radius:10px;padding:.85rem 1.7rem;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;
  box-shadow:0 3px 0 rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.12)}
.mc-service .wp-block-button:not(.is-style-outline) .wp-block-button__link{
  background-color:var(--mc-amber-btn) !important;color:#fff !important;border:0 !important}
.mc-service .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{
  background-color:var(--mc-amber-hover) !important;transform:translateY(-2px);
  box-shadow:0 5px 0 rgba(0,0,0,.22),0 3px 8px rgba(0,0,0,.14)}
.mc-service .is-style-outline .wp-block-button__link{
  background:transparent !important;color:var(--mc-blue) !important;
  border:2px solid var(--mc-blue) !important;box-shadow:none}
.mc-service .is-style-outline .wp-block-button__link:hover{
  background:var(--mc-blue) !important;color:#fff !important;transform:translateY(-2px)}
.mc-service .mc-svc-card--blue .is-style-outline .wp-block-button__link,
.mc-service .mc-svc-card--green .is-style-outline .wp-block-button__link{
  color:#fff !important;border-color:rgba(255,255,255,.6) !important}
.mc-service .mc-svc-card--blue .is-style-outline .wp-block-button__link:hover,
.mc-service .mc-svc-card--green .is-style-outline .wp-block-button__link:hover{
  background:rgba(255,255,255,.14) !important}

/* ---- hero internals ------------------------------------------------- */
.mc-service .mc-hero-lede{font-size:1.13rem}
.mc-service .mc-hero-photo img{border-radius:20px;width:100%;object-fit:cover}
.mc-service .mc-hero-photo{margin-top:1.5rem}

/* at-a-glance spec panel (wp:html inside sand group) */
.mc-service .mc-glance{
  background:var(--mc-sand);border:1px solid #E8E0CF;border-radius:18px;
  padding:1.4rem 1.6rem 1.5rem !important;
  box-shadow:0 2px 4px rgba(16,40,70,.05),0 10px 24px rgba(16,40,70,.07)}
/* The panel heading is an <h2> as of 2026-07-26: it sits directly under the
   page <h1>, so an <h3> skipped a level and Lighthouse flagged the heading
   order on all 27 pages carrying this panel. Promoting it is purely semantic,
   which is why the size is pinned here. This selector is (0,2,1) and so
   out-ranks `body .mc-service h2` at (0,1,2), keeping the small label size
   rather than inheriting the 2.6rem section-heading scale.
   h3 is kept in the selector deliberately: it costs nothing and means a page
   whose content has not been converted yet still renders correctly. */
.mc-service .mc-glance h2,
.mc-service .mc-glance h3{margin:0 0 .5rem;font-size:.95rem}
.mc-service .mc-glance-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.55rem 0;border-top:1px solid #E4DCCB}
.mc-service .mc-glance-row .k{
  font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mc-green-deep);white-space:nowrap}
.mc-service .mc-glance-row .v{
  font-size:.88rem;font-weight:600;color:var(--mc-ink);text-align:right;line-height:1.4}

/* ---- stat strip ----------------------------------------------------- */
.mc-service .mc-svc-stats .wp-block-column{padding:0 .5rem}
.mc-service .mc-svc-stats h3{
  font-size:clamp(2.2rem,4.5vw,3.4rem);line-height:1;margin:0 0 .4rem;
  letter-spacing:-.03em;color:var(--mc-blue)}
.mc-service .mc-svc-stats h3 em{font-style:normal;color:var(--mc-amber-btn)}
.mc-service .mc-svc-stats p{
  font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:#7A7261;margin:0}
.mc-service .mc-svc-stats .wp-block-column + .wp-block-column{
  border-left:1px solid #E2D9C6;padding-left:1.25rem}
@media (max-width:781px){
  .mc-service .mc-svc-stats .wp-block-column + .wp-block-column{
    border-left:none;padding-left:.5rem}}

/* ---- reveal windows (wp:cover.mc-reveal, Fixed background ON) ------- */
.mc-service .mc-reveal{min-height:300px}
.mc-service .mc-reveal .eyebrow{color:var(--mc-amber-lt);margin-bottom:.4rem}
.mc-service .mc-reveal .mc-reveal-line{
  font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.15;color:#fff;
  max-width:22ch;margin-left:auto;margin-right:auto}
/* iOS: fixed backgrounds unsupported — fall back to scroll */
@media (hover:none) and (pointer:coarse){
  .mc-service .mc-reveal.has-parallax{background-attachment:scroll !important}}

/* ---- reveal windows via a real <img> (2026-08-16, TODO #9) ------------
   Same wp:cover band, but the picture is <img.mc-reveal-img loading="lazy">
   instead of an inline CSS background, so it lazy-loads and is visible to
   Google (alt + image sitemap). At rest it is a static cover (absolute,
   object-fit:cover) — what touch devices always saw. On hover/fine-pointer
   devices mc-site.js adds .is-fixed as the band nears the viewport and the
   image becomes position:fixed; clip-path:inset(0) clips it to the band, so
   it reads exactly like the old background-attachment:fixed reveal window.
   clip-path (unlike transform/filter) does NOT re-parent fixed descendants.
   The image stays absolute until the band is near, because a fixed image
   always intersects the viewport and would defeat loading="lazy".
   Reduced-motion users keep the static cover. Applies to .mc-service and
   .moore-city bands alike (selector is not scoped to either). */
.mc-reveal.mc-reveal--img{clip-path:inset(0)}
.mc-reveal.mc-reveal--img > img.mc-reveal-img{
  position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;
  max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;
  box-shadow:none;object-fit:cover;object-position:center;z-index:0;
  pointer-events:none}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .mc-reveal.mc-reveal--img.is-fixed > img.mc-reveal-img{position:fixed}}

/* ---- text/image bands (wp:columns) ---------------------------------- */
.mc-service .mc-band-photo img{
  border-radius:20px;width:100%;min-height:280px;object-fit:cover}
.mc-service .mc-band .wp-block-column{align-self:center}

/* ---- checklist — amber circles on service pages --------------------- */
.mc-service .mc-checklist{list-style:none !important;padding-left:0 !important;margin:.9rem 0 0 !important}
.mc-service .mc-checklist li{
  position:relative;padding-left:1.9rem;font-size:.95rem;
  color:var(--mc-slate);margin-bottom:.55rem;line-height:1.5}
.mc-service .mc-checklist li::before{
  content:"";position:absolute;left:0;top:.18em;width:1.05rem;height:1.05rem;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%23B84F08%22%2F%3E%3Cpolyline%20points%3D%224%2C8.5%206.5%2C11%2012%2C5.5%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-size:contain;background-repeat:no-repeat}

/* ---- photo trio (wp:columns.mc-trio) -------------------------------- */
.mc-service .mc-trio{margin-top:2rem}
.mc-service .mc-trio img{
  width:100%;height:190px;object-fit:cover;border-radius:14px}
/* mc-trio-full (PW pages 2026-08-07): user wants the WHOLE picture visible
   ("zoom out"), so no fixed-height crop; 4 columns make each tile smaller. */
.mc-service .mc-trio-full img{height:auto;aspect-ratio:3/2;object-fit:cover}
/* The broom-collecting-debris closeup reads best anchored 85% down: headlight
   stays in frame at top while the debris and bottles at the curb line show at
   the bottom of the 190px window (crop simulated at 50/65/75/85, 2026-07-23).
   Scoped by filename so only this image shifts. */
.mc-service .mc-trio img[src*="closeup-broom-collecting-debris"],
.moore-city .mc-trio img[src*="closeup-broom-collecting-debris"]{object-position:center 85%}
/* handyman sign-repair portrait: the STOP sign sits high in the frame, so pin
   the crop to the top to keep it inside the 190px trio window (simulated 2026-07-25). */
.mc-service .mc-trio img[src*="handyman-sign-repair"]{object-position:center top}
/* handyman door-repair portrait (Services page tile, 2026-07-26): a centred
   crop lands on the worker's legs and loses the actual repair. At 25% the
   gloved hand, screwdriver and door lock are all in the 190px window
   (simulated at 0/25/50 before shipping). */
.mc-service .mc-trio img[src*="handyman-door-repair"]{object-position:center 25%}
.mc-service .mc-trio p{
  font-size:.85rem;margin-top:.9rem;line-height:1.5;color:var(--mc-slate);
  border-left:3px solid #E8DFD0;padding-left:.9rem}
.mc-service .mc-trio .t-head{
  display:block;font-family:'Archivo',sans-serif;font-weight:800;
  font-size:1.05rem;letter-spacing:-.01em;line-height:1.25;
  color:var(--mc-blue);margin-bottom:.35rem}
.mc-service .mc-trio .t-head em{font-style:normal;color:var(--mc-green)}
.mc-service .mc-svc-card--blue .mc-trio p{color:#C9CDEB;border-left-color:rgba(255,255,255,.25)}
.mc-service .mc-svc-card--blue .mc-trio .t-head{color:#fff}
.mc-service .mc-svc-card--blue .mc-trio .t-head em{color:#8FE0B0}
/* trio "learn more" link (bundle page) */
.mc-service .mc-trio .t-more{
  display:block;margin-top:.5rem;font-weight:700;font-size:.85rem;
  color:var(--mc-amber-btn);text-decoration:none}
.mc-service .mc-trio .t-more:hover{text-decoration:underline;text-underline-offset:3px}
.mc-service .mc-svc-card--blue .mc-trio .t-more{color:var(--mc-amber-lt)}
/* trio tiles: the PICTURE and the HEADING carry the link (replaced the Learn more
   row on the city service pages, 2026-09-20). Heading keeps its colors; hover paints
   it amber, the picture dims slightly. */
/* .wp-block-columns in the selector: has to outrank the underlined body-link rule in mc-site.css */
.mc-service .wp-block-columns.mc-trio p a.t-link{display:block;color:inherit;text-decoration:none}
.mc-service .wp-block-columns.mc-trio p a.t-link:hover .t-head,
.mc-service .wp-block-columns.mc-trio p a.t-link:hover .t-head em{color:var(--mc-amber-btn)}
.mc-service .mc-svc-card--blue .wp-block-columns.mc-trio p a.t-link:hover .t-head,
.mc-service .mc-svc-card--blue .wp-block-columns.mc-trio p a.t-link:hover .t-head em{color:var(--mc-amber-lt)}
.mc-service .mc-trio .mc-trio-img a{display:block}
.mc-service .mc-trio .mc-trio-img a img{transition:opacity .15s}
.mc-service .mc-trio .mc-trio-img a:hover img{opacity:.9}
/* city service pages: the rule beside each tile heading + text is amber (owner 2026-09-20),
   same ambers the old Get a quote row used */
.single-locations .mc-service .mc-trio p{border-left-color:var(--mc-amber-btn)}
.single-locations .mc-service .mc-svc-card--blue .mc-trio p{border-left-color:var(--mc-amber-lt)}
/* ...and that rule is the same length on every tile in a row: the text block stretches to the
   tallest tile (owner 2026-09-20). Stacked tiles on mobile keep their natural height. */
.single-locations .mc-service .mc-trio>.wp-block-column{display:flex;flex-direction:column}
.single-locations .mc-service .mc-trio>.wp-block-column>p{flex:1 1 auto}
/* "Why it matters" band (= the blue card, city + statewide service pages): text links take the band's own text color
   (gray-lavender, inherited; owner corrected white -> gray), hover = the band's green accent #8FE0B0, regular
   weight, underlined (owner 2026-09-21). !important because the links carry an inline light-green color.
   The tile links (a.t-link on headings, picture links) are not text links and stay as they are. */
.mc-service .mc-svc-card--blue p a:not(.t-link):not(.t-more),
.mc-service .mc-svc-card--blue li a:not(.t-link):not(.t-more){
  color:inherit !important;font-weight:400 !important;text-decoration:underline !important;text-underline-offset:3px}
.mc-service .mc-svc-card--blue p a:not(.t-link):not(.t-more) strong{font-weight:400 !important}
.mc-service .mc-svc-card--blue p a:not(.t-link):not(.t-more):hover,
.mc-service .mc-svc-card--blue p a:not(.t-link):not(.t-more):focus,
.mc-service .mc-svc-card--blue li a:not(.t-link):not(.t-more):hover{color:#8FE0B0 !important}

/* ---- trio photo cards on CITY HUB pages (services grid redesign) ---- */
/* Same anatomy as the /services/ hub cards: photo, two-tone t-head,
   blurb with left rule, Learn more link. Scoped .moore-city because the
   originals are scoped .mc-service only. */
.moore-city .mc-trio{margin-top:2rem}
.moore-city .mc-trio img{
  width:100%;height:190px;object-fit:cover;border-radius:14px}
.moore-city .mc-trio p{
  font-size:.85rem;margin-top:.9rem;line-height:1.5;color:var(--mc-slate);
  border-left:3px solid #E8DFD0;padding-left:.9rem}
.moore-city .mc-trio .t-head{
  display:block;font-family:'Archivo',sans-serif;font-weight:800;
  font-size:1.05rem;letter-spacing:-.01em;line-height:1.25;
  color:var(--mc-blue);margin-bottom:.35rem}
.moore-city .mc-trio .t-head em{font-style:normal;color:var(--mc-green)}
.moore-city .mc-trio .t-more{
  display:block;margin-top:.5rem;font-weight:700;font-size:.85rem;
  color:var(--mc-amber-btn);text-decoration:none}
.moore-city .mc-trio .t-more:hover{text-decoration:underline;text-underline-offset:3px}
/* card body wrapper: one continuous left rule spanning blurb + checklist
   + Learn more (inner blocks lose their own rules/margins) */
.moore-city .mc-trio .mc-trio-body{
  border-left:3px solid #E8DFD0;padding-left:.9rem;margin-top:.9rem}
.moore-city .mc-trio .mc-trio-body p{
  border-left:0;padding-left:0;margin-top:0}
.moore-city .mc-trio .mc-trio-body .mc-checklist{margin:.6rem 0 0 !important}
.moore-city .mc-trio .mc-trio-body .mc-checklist li{
  font-size:.85rem;margin-bottom:.4rem}
/* 2-card row: cards keep 3-column width, row centered */
.moore-city .mc-trio--pair{justify-content:center}
.moore-city .mc-trio--pair .wp-block-column{
  flex:0 0 calc((100% - 2*var(--wp--style--block-gap,24px))/3)}

/* ---- metro route cards (wp:html grid) ------------------------------- */
.mc-service .mc-dispatch-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1.5rem}
.mc-service .mc-route{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  text-decoration:none;background:#fff;border:1px solid var(--mc-line);
  border-radius:16px;padding:1.05rem 1rem; /* 12.34: 1.2rem -> 1rem sides so "Corpus Christi" fits one line in the 2-col picker */
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.mc-service .mc-route:hover{
  transform:translateY(-3px);border-color:var(--mc-amber-btn);
  box-shadow:0 2px 4px rgba(16,40,70,.06),0 14px 30px rgba(16,40,70,.12)}
.mc-service .mc-route .city{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.98rem; /* 12.34: 1.05rem -> .98rem, same reason */
  color:var(--mc-blue);display:block;line-height:1.2}
.mc-service .mc-route .go{font-size:.78rem;color:var(--mc-slate);display:block;margin-top:.1rem}
.mc-service .mc-route .arrow{
  color:var(--mc-amber-btn);font-family:'Archivo',sans-serif;
  font-weight:800;font-size:1.2rem;flex:none;transition:transform .18s ease}
.mc-service .mc-route:hover .arrow{transform:translateX(4px)}
@media (max-width:540px){.mc-service .mc-dispatch-grid{grid-template-columns:1fr}}

/* ---- FAQ accordions ------------------------------------------------- */
.mc-service .wp-block-details{
  border:1px solid var(--mc-line);border-radius:14px;background:#fff;
  padding:.35rem 1.25rem;margin-top:.7rem;
  box-shadow:0 2px 6px rgba(16,40,70,.04);transition:box-shadow .15s ease}
.mc-service .wp-block-details[open]{
  border-left:3px solid var(--mc-green);box-shadow:0 4px 12px rgba(16,40,70,.09)}
.mc-service .wp-block-details summary{
  font-weight:700;font-size:.98rem;color:var(--mc-blue) !important;
  cursor:pointer;padding:.85rem 0;list-style:none}
.mc-service .wp-block-details summary::-webkit-details-marker{display:none}
.mc-service .wp-block-details p{font-size:.92rem;color:var(--mc-slate);padding-bottom:.8rem}

/* ---- video placeholder card — vertical 9:16 ------------------------- */
/* Default: in-flow inside a card (universal pages, mobile). The
   mc-video-card--hang variant lives in the hero's right column and hangs
   out of the hero card, floating beside the following card (child pages). */
.mc-service .mc-video-card{
  position:relative;margin:0 auto;max-width:300px;
  background:#fff;border-radius:18px;padding:.6rem;
  box-shadow:0 8px 20px rgba(16,40,70,.13),0 20px 40px rgba(16,40,70,.11)}
/* hang margin tuned for the 4:5 card height (was -570px at 9:16).
   RAISED 90px on 2026-07-29 (top 134px -> 44px) so the card sits roughly
   across the gap between the hero card and the intro card instead of deep
   over the intro. ⚠ The bottom margin was relaxed by the SAME 90px
   (-422px -> -332px) on purpose: top + height + bottom must stay constant
   (44 + 370 + -332 = 82px, as before) or the whole page below shifts up with
   the card. MEASURED after: 44px gap under the At a glance card, card centred
   ~699px against a hero/intro boundary midpoint of ~676px. */
.mc-service .mc-video-card--hang{
  z-index:5;margin:44px 0 -332px auto}
/* Centred under the At a glance card instead of flush right (user 2026-07-29,
   San Antonio pilot). The base rule leaves margin-left:auto with margin-right:0,
   which pushes the card to the column's right edge; making the right margin
   auto as well centres it in the column, and the glance card fills that column,
   so column-centred IS centred under the glance card.
   Class-driven by `_theme/mc-vid-centre-class.php`, so it stays on the pages it
   has been applied to.
   ⚠ The invisible wrap reserve follows automatically: mc-site.js derives the
   reserve's WIDTH from the video's real left edge, so moving the video sideways
   does not need any CSS change to the reserve. */
.mc-service .mc-video-card--hang.mc-vid-centre{margin-right:auto}
@media (max-width:781px){
  .mc-service .mc-video-card--hang{margin:1.5rem auto .5rem}}
/* Hero right column SWAPPED (user 2026-08-07): the video now sits FIRST in
   normal flow (plain .mc-video-card, centred by its own margin:0 auto) and
   the At-a-glance card hangs into the intro card instead. Same accounting
   as the old video hang: 24px gap + card height (~271-295px, varies with
   the Coverage row wrap) - 332px bottom pull keeps the hero height in the
   old range, and mc-site.js measures the REAL overhang for the text
   reserve, so height variation only moves the wrap, not the layout. The
   card already carries an opaque sand background + shadow, so overlapping
   the intro card is safe. */
/* Video raised 40px, card FIXED (user 2026-08-07): the negative pull would
   shift the following flow up 40px, so the card top margin absorbs it
   (24+40=64) and only the video moves. Video top now ~level with the H1
   (measured 60px vs 56px hero padding). :has keeps universal pages+ in-flow
   videos untouched. */
.mc-service .wp-block-column:has(.mc-glance--hang) .mc-video-card{margin-top:-40px}
.mc-service .mc-glance--hang{position:relative;z-index:5;margin:64px 0 -332px}
@media (max-width:781px){
  .mc-service .wp-block-column:has(.mc-glance--hang) .mc-video-card{margin-top:1.5rem}
  .mc-service .mc-glance--hang{margin:1.5rem 0 .5rem}}
.mc-service .mc-video-frame{
  position:relative;aspect-ratio:4/5;border-radius:13px;overflow:hidden;
  background:url("/assets/_legacy/placeholders/placeholder.webp") center/cover no-repeat,#1B1E3C;
  display:flex;align-items:center;justify-content:center}
.mc-service .mc-video-frame::before{
  content:"";position:absolute;inset:0;background:rgba(18,20,38,.5)}
.mc-service .mc-play{
  position:relative;z-index:2;width:64px;height:64px;border-radius:50%;
  background:rgba(255,255,255,.95);display:block;
  box-shadow:0 4px 14px rgba(0,0,0,.3)}
.mc-service .mc-play::after{
  content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--mc-amber-btn)}
.mc-service .mc-video-note{
  position:absolute;z-index:2;bottom:.8rem;left:0;right:0;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff}

/* ---- two cards side by side (wp:columns.mc-two-cards) --------------- */
.mc-service .mc-two-cards{margin-top:1.5rem}
.mc-service .mc-two-cards .wp-block-column{display:flex}
.mc-service .mc-two-cards .mc-svc-card{margin-top:0;width:100%}
.mc-service .mc-two-cards .mc-casc-img img,
.mc-service .mc-casc-img img{
  border-radius:16px;width:100%;height:260px;object-fit:cover}

/* ---- breadcrumbs between cards — minimal vertical footprint,
   width-aligned with the cards (1160px constrained, centered) ---------- */
.mc-service .mc-breadcrumbs{
  max-width:var(--wp--style--global--content-size,1160px);
  margin:0 auto;padding:.4rem .5rem 0}

/* ---- page bottom spacing before footer ------------------------------ */
.mc-service{padding-bottom:3rem}

/* ---- quote card internals ------------------------------------------- */
.mc-service .mc-quote-note{
  font-family:'JetBrains Mono',monospace !important;font-size:.72rem !important;
  letter-spacing:.1em;text-transform:uppercase;color:#8FE0B0 !important;margin-top:1.2rem}
.mc-service .mc-form-slot{
  background:rgba(255,255,255,.07);border:1px dashed rgba(255,255,255,.35);
  border-radius:18px;padding:2rem 1.5rem;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:.78rem;color:#D6EEDF;
  letter-spacing:.08em;margin-top:1.5rem}
.mc-service .mc-quote-cols .mc-form-slot{margin-top:0;min-height:220px;
  display:flex;align-items:center;justify-content:center}

/* ================= MC-HOME — Elementor-free homepage ================= */
/* Matches the CURRENT homepage look (Elementor kit palette + fonts):
   green #1CAC45, blue #344791, orange #FF8200, accent #5AC57E,
   Saira Condensed headings, Roboto body. Only mc-family carryover is the
   rounded-with-shadow card per section (.mc-hsec). No nested cards.     */
body:has(.mc-home){background:#F5F6F7}
/* match the original Elementor kit container: 1280px boxed width */
.mc-home{
  --wp--style--global--content-size:1280px;
  --wp--style--global--wide-size:1340px}
.mc-home{
  --h-green:#1CAC45; --h-blue:#344791; --h-text:#494B4F; --h-accent:#5AC57E;
  --h-orange:#FF8200; --h-light:#747C89; --h-lightbg:#FBF3EA; --h-border:#D8D2CD;
  font-family:'Roboto',system-ui,sans-serif;color:var(--h-text);
  padding-bottom:3rem}
body .mc-home h1,body .mc-home h2,body .mc-home h3{
  font-family:'Saira Condensed','Archivo',sans-serif !important;
  font-weight:700 !important;line-height:1.12;text-transform:none}
body .mc-home h2{font-size:clamp(1.9rem,3.4vw,2.6rem);color:var(--h-blue);
  margin-bottom:.6rem}
body .mc-home p{font-family:'Roboto',system-ui,sans-serif;font-size:1.25rem;
  line-height:1.6;color:var(--h-text)}
.mc-home .mc-sub-orange{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:1.75rem;color:var(--h-orange);line-height:1.25}
.mc-home .mc-sub-light{color:var(--h-light)}

/* ---- section cards --------------------------------------------------- */
.mc-home .mc-hsec{
  border-radius:28px;background:#fff;
  padding:clamp(1.75rem,4.5vw,3.25rem) !important;
  box-shadow:0 1px 2px rgba(16,40,70,.04),0 8px 28px rgba(16,40,70,.08);
  margin-top:1.5rem;margin-bottom:0}

/* ---- buttons --------------------------------------------------------- */
.mc-home .wp-block-button__link{
  font-family:'Saira Condensed',sans-serif;font-weight:600;font-size:1.05rem;
  letter-spacing:.02em;border-radius:6px;padding:.7rem 1.7rem;
  transition:background-color .15s ease,transform .15s ease}
.mc-home .wp-block-button:not(.is-style-outline) .wp-block-button__link{
  background-color:var(--h-green) !important;color:#fff !important;border:0 !important}
.mc-home .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{
  background-color:#178F3A !important;transform:translateY(-2px)}
.mc-home .is-style-outline .wp-block-button__link{
  background:rgba(0,0,0,.25) !important;color:#fff !important;
  border:2px solid rgba(255,255,255,.85) !important}
.mc-home .is-style-outline .wp-block-button__link:hover{
  background:rgba(0,0,0,.45) !important}

/* ---- hero ------------------------------------------------------------ */
/* full-width WHITE band > 1280px frame (cover photo) > video on top.
   Frame is 16:9 so the video fits without bars on desktop; min-height
   keeps it usable on mobile (video letterboxes inside the player).    */
.mc-home .mc-home-hero{background:#F5F6F7}
/* 700px frame (original hero height); the video is scaled ~11% larger
   than the frame and anchored to the TOP, so its bottom 10% — where
   YouTube paints end-cards/icons — stays cropped out of view          */
.mc-home .mc-hero-frame{
  position:relative;width:min(100%,1280px);margin:0 auto;
  height:min(700px,58vw);
  overflow:hidden;background:#000}
.mc-home .mc-hero-cover{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mc-home .mc-hero-overlay{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;padding:1rem}
.mc-home .mc-hero-overlay .wp-block-buttons{
  display:flex;gap:12px;justify-content:center;margin-top:1.4rem}
/* original slider typography (post-134.css): heading Helvetica 62px,
   description Arial 28px/700 — deliberately NOT the Saira site font  */
body .mc-home .mc-home-hero h1{
  color:#fff;font-family:"Helvetica","Arial",sans-serif !important;
  font-weight:700 !important;
  font-size:clamp(2.4rem,5.2vw,3.875rem);margin:0 auto;max-width:24ch;
  line-height:1.3;letter-spacing:0}
/* hero slider text: plain white with a soft gray shadow for contrast */
.mc-home .mc-hl{
  color:#fff;
  text-shadow:0 2px 10px rgba(40,45,50,.6),0 1px 3px rgba(40,45,50,.5)}
/* hero video layer inside the frame (plays once, fades to the cover).
   Self-hosted <video> since 2026-07-28 — no YouTube chrome to crop, so it
   simply covers the frame. */
.mc-home .mc-hero-video{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  transition:opacity .8s ease}
.mc-home .mc-hero-video.is-ended{opacity:0}
.mc-home .mc-hero-video video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* hero text slider: 3 stacked slides (slide 3 empty), keyed to the video's
   currentTime by mc-home.js (2-12s / 14-21s / empty after). The slide
   wrapper no longer fades; each child animates with transform+opacity ONLY
   (compositor-driven — no layout, no paint, no CLS).
     heading: slides DOWN from the top on entry, back UP on exit
     desc:    slides in from the LEFT, exits to the RIGHT (entry direction
              comes from the keyframe animation, exit from the transition
              back to the resting offset) */
.mc-home .mc-hero-slider{position:relative;z-index:2;display:grid}
.mc-home .mc-hs-slide{grid-area:1/1;pointer-events:none}
/* original hero: .swiper-slide-contents max-width 40% — text wraps like the old slider */
.mc-home .mc-hs-slide{max-width:min(660px,88%);margin:0 auto;justify-self:center}
.mc-home .mc-hs-slide.is-active{pointer-events:auto}
.mc-home .mc-hs-slide h1,
.mc-home .mc-hs-slide .mc-hs-head{
  opacity:0;transform:translateY(-120px);
  transition:transform .8s ease,opacity .8s ease}
.mc-home .mc-hs-slide.is-active h1,
.mc-home .mc-hs-slide.is-active .mc-hs-head{opacity:1;transform:none}
.mc-home .mc-hs-slide .mc-hs-desc{
  opacity:0;transform:translateX(160px);
  transition:transform .8s ease,opacity .8s ease}
.mc-home .mc-hs-slide.is-active .mc-hs-desc{
  opacity:1;transform:none;animation:mc-desc-in .8s ease both}
@keyframes mc-desc-in{
  from{opacity:0;transform:translateX(-160px)}
  to{opacity:1;transform:none}}
/* while mc-home.js takes over from the static is-active markup, suppress
   the transitions so the initial reset doesn't visibly slide out */
.mc-home .mc-hero-slider.is-syncing .mc-hs-slide h1,
.mc-home .mc-hero-slider.is-syncing .mc-hs-slide .mc-hs-head,
.mc-home .mc-hero-slider.is-syncing .mc-hs-slide .mc-hs-desc{
  transition:none !important;animation:none !important}
@media (prefers-reduced-motion:reduce){
  .mc-home .mc-hs-slide h1,
  .mc-home .mc-hs-slide .mc-hs-head,
  .mc-home .mc-hs-slide .mc-hs-desc{transition:none;animation:none}}
.mc-home .mc-hs-head{
  font-family:"Helvetica","Arial",sans-serif !important;font-weight:700;
  font-size:clamp(2.4rem,5.2vw,3.875rem);line-height:1.3;color:#fff;
  margin:0 auto;max-width:24ch}
.mc-home .mc-hs-desc{
  font-family:"Arial",sans-serif !important;font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.75rem);color:#fff;line-height:1.4;
  letter-spacing:.2px;margin-top:.9rem}
.mc-home .mc-home-hero .wp-block-buttons{position:relative;z-index:2}

/* ---- city buttons (4 separate rounded green buttons) ----------------- */
/* Desktop: all 4 fit the track (no overflow) so the stepper idles.
   Mobile: each button spans the full track width -> steps one by one.  */
.mc-home .mc-city-bar{
  overflow:hidden;max-width:1280px;margin:1.5rem auto 0;padding:0 1rem}
.mc-home .mc-city-track{display:flex;gap:14px}
.mc-home .mc-city-track a{
  flex:1 1 0;min-width:0;
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:clamp(1.1rem,1.9vw,1.45rem);color:#fff;text-decoration:none;
  text-align:center;padding:12px 0;background:var(--h-green);border-radius:8px;
  box-shadow:0 2px 6px rgba(16,40,70,.15);
  transition:background-color .15s ease}
.mc-home .mc-city-track a:hover{background:#178F3A}
@media (max-width:760px){.mc-home .mc-city-track a{flex:0 0 100%}}

/* uppercase heading variant (PREMIER POWER SWEEPING SERVICES) */
.mc-home .mc-caps{text-transform:uppercase}

/* ---- flip cards (sharp corners, gray front / green back) ------------- */
/* Original Elementor dims (post-134.css): card height 336px, 3-col grid,
   20px gap; grid container --width:90% of the 1280 kit container =
   1152px centered -> cards ~371px wide; image 80% width natural aspect,
   centered; title 20px uppercase; back text 18px/1.5.                  */
.mc-home .mc-flip-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  max-width:1040px;margin:1.8rem auto 0}
@media (max-width:900px){.mc-home .mc-flip-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.mc-home .mc-flip-grid{grid-template-columns:1fr}}
.mc-home .mc-flip{
  perspective:1200px;height:336px;cursor:pointer;outline-offset:3px}
.mc-home .mc-flip-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;transition:transform .55s cubic-bezier(.35,.1,.25,1)}
@media (hover:hover){.mc-home .mc-flip:hover .mc-flip-inner{transform:rotateY(180deg)}}
.mc-home .mc-flip.is-flipped .mc-flip-inner{transform:rotateY(180deg)}
.mc-home .mc-flip-front,.mc-home .mc-flip-back{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:0;overflow:hidden;
  box-shadow:0 2px 4px rgba(16,40,70,.08),0 8px 20px rgba(16,40,70,.12)}
.mc-home .mc-flip-front{
  background:#EBEBEBD1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding-top:20px}
.mc-home .mc-flip-front img{
  width:80% !important;max-width:80% !important;height:auto;max-height:230px;
  object-fit:contain;display:block;margin:0 auto}
/* wide source photos cropped to match the other card images' box:
   same 80% width, square-cropped, same height cap */
.mc-home .mc-flip-front img.mc-sq{
  width:80% !important;max-width:80% !important;height:auto;
  aspect-ratio:1/1;max-height:230px;object-fit:cover}
.mc-home .mc-flip-front h3{
  text-align:center;padding:0 1rem;font-size:20px;line-height:1.2;
  color:var(--h-text);margin:.9rem 0 0;
  text-transform:uppercase;letter-spacing:.02em}
.mc-home .mc-flip-back{
  background:var(--h-accent);transform:rotateY(180deg);
  padding:1.6rem 1.4rem;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
.mc-home .mc-flip-back h3{color:#fff;font-size:20px;line-height:1.2;
  text-transform:uppercase;margin:0 0 .6rem}
.mc-home .mc-flip-back p{color:#fff;font-size:17px;line-height:1.5;margin:0}
.mc-home .mc-flip-back p a{color:#fff}
.mc-home .mc-flip-btn{
  margin-top:1rem;font-family:'Saira Condensed',sans-serif;font-weight:600;
  font-size:1rem;letter-spacing:.02em;color:#fff;text-decoration:none;
  border:2px solid rgba(255,255,255,.85);border-radius:4px;padding:.45rem 1.3rem;
  transition:background-color .15s ease}
.mc-home .mc-flip-btn:hover{background:rgba(255,255,255,.18)}

/* ---- accountability app: stacked icon rows left, video right --------- */
.mc-home .mc-app-cols{margin-top:1.6rem}
.mc-home .mc-appboxes{display:flex;flex-direction:column;gap:1.4rem}
.mc-home .mc-appbox{display:flex;gap:1rem;align-items:flex-start;text-align:left}
.mc-home .mc-appbox img{
  width:56px;height:56px;object-fit:contain;flex:none;margin-top:.2rem}
.mc-home .mc-appbox h3{font-size:1.2rem;color:var(--h-blue);margin:0 0 .3rem}
.mc-home .mc-appbox p{font-size:1.125rem;color:var(--h-text);line-height:1.55;margin:0}
.mc-home .mc-app-cols .mc-video-lite{margin:0 auto}
/* mobile: app video stacks ABOVE the icon rows */
@media (max-width:781px){
  .mc-home .mc-app-cols .wp-block-column:last-child{order:-1;margin-bottom:1.2rem}}

/* ---- video lite embed ------------------------------------------------ */
.mc-home .mc-video-lite{
  position:relative;max-width:720px;margin:2.2rem auto 0;aspect-ratio:16/9;
  border-radius:8px;overflow:hidden;cursor:pointer;background:#000;
  box-shadow:0 8px 24px rgba(0,0,0,.25)}
.mc-home .mc-video-lite img{width:100%;height:100%;object-fit:cover;opacity:.88}
.mc-home .mc-video-lite iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Self-hosted decorative loops (.is-native): a poster img that JS swaps for a
   muted looping <video> on scroll-into-view. No player chrome exists, so the
   old pointer-events workaround is gone. Poster shows at full opacity so the
   crossfade to the identical first frames is invisible. */
.mc-home .mc-video-lite.is-native{cursor:default}
.mc-home .mc-video-lite.is-native img{opacity:1}
.mc-home .mc-video-lite.is-native video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* play button: all-white circle OUTLINE with the triangle inside (user
   spec 2026-07-28; was a solid green disc). Soft shadow keeps it legible
   on light poster frames. */
.mc-home .mc-video-lite .mc-play{
  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;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.45));
  transition:transform .15s ease}
.mc-home .mc-video-lite:hover .mc-play{transform:translate(-50%,-50%) scale(1.08)}
.mc-home .mc-video-lite .mc-play::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}
/* self-hosted click-to-play player fills the facade box */
.mc-home .mc-video-lite video{
  position:absolute;inset:0;width:100%;height:100%;background:#000}
/* service-areas aerial video: original = full content width x 400px,
   video CROPS to cover the box (no pillarboxing) like a bg video */
.mc-home .mc-video-lite--wide{
  max-width:76%;margin-left:auto;margin-right:auto;aspect-ratio:auto;height:400px;margin-top:1.6rem}
.mc-home .mc-video-lite--wide iframe{
  position:absolute;inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);
  aspect-ratio:16/9;width:auto;height:auto;min-width:100%;min-height:100%}
/* phones: the areas video breaks out of the section card and runs edge to
   edge across the screen. Full 16:9 here rather than the 400px desktop crop. */
@media (max-width:767px){
  .mc-home .mc-video-lite--wide{
    max-width:none;width:100vw;
    /* !important is REQUIRED here (fixed 2026-07-25). The parent .mc-hsec is a
       WordPress "is-layout-constrained" block, and core emits
         .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
         { margin-left:auto !important; margin-right:auto !important }
       Without !important those auto margins WIN, the negative margins never
       apply, and the video starts at the card's padding-left (28px on a phone)
       then runs a full 100vw from there — hanging 28px past the right edge and
       making the WHOLE PAGE horizontally scrollable on mobile.
       Do NOT "fix" that symptom with overflow-x:hidden on html/body: it breaks
       the sticky header (position:sticky needs a non-clipped scroll ancestor). */
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    aspect-ratio:16/9;height:auto;border-radius:0}
}

/* ---- counters -------------------------------------------------------- */
.mc-home .mc-counters{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;text-align:center}
@media (max-width:800px){.mc-home .mc-counters{grid-template-columns:1fr 1fr}}
.mc-home .mc-count .n,.mc-home .mc-count .sfx{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:clamp(2.5rem,4.8vw,3.5rem);color:var(--h-blue);letter-spacing:0}
.mc-home .mc-count .lbl{
  display:block;margin-top:.15rem;font-family:'Roboto',sans-serif;
  font-weight:500;font-size:1.125rem;color:var(--h-orange)}

/* ---- client logo step-scroller (no edge fade — user request) --------- */
.mc-home .mc-marquee{overflow:hidden;margin-top:1.8rem}
.mc-home .mc-marquee-track{display:flex;align-items:center;gap:3.5rem;width:max-content}
.mc-home .mc-marquee-track img{
  flex:none;height:152px;width:auto;max-width:370px;object-fit:contain}
/* mobile: one logo per step (each fills the track viewport) */
@media (max-width:760px){
  .mc-home .mc-marquee{-webkit-mask-image:none;mask-image:none}
  .mc-home .mc-marquee-track{width:auto}
  .mc-home .mc-marquee-track img{
    flex:0 0 100%;width:100%;max-width:none;height:120px}}
@media (prefers-reduced-motion:reduce){
  .mc-home .mc-marquee-track{width:auto;flex-wrap:wrap}
  .mc-home .mc-marquee{-webkit-mask-image:none;mask-image:none}}

/* ---- service areas step-scroller (one city, pause, next) ------------- */
.mc-home .mc-area-marquee{overflow:hidden;margin-top:1.4rem} /* 12.18: edge fade removed (owner) */
.mc-home .mc-area-track{display:flex;align-items:center;gap:2.6rem;width:max-content}
.mc-home .mc-area-track span{
  flex:none;font-family:'Saira Condensed',sans-serif;font-weight:600;
  font-size:1.35rem;color:var(--h-orange);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .mc-home .mc-area-track{width:auto;flex-wrap:wrap}
  .mc-home .mc-area-marquee{-webkit-mask-image:none;mask-image:none}}

/* Centre the "Get a quote" button in the blue "Why it matters" card
   (user 2026-07-26, 27 pages). The block is a bare <!-- wp:buttons --> with no
   layout attributes, so WordPress renders it is-layout-flex at flex-start.
   Done in CSS rather than editing 27 posts' block attributes. */
.mc-service .mc-svc-card--blue .wp-block-buttons{justify-content:center}

/* ---- mobile side gutters for BARE hub content (2026-07-26) ----------
   .moore-city has no horizontal padding of its own, and its children get
   max-width:800px + auto margins from WordPress's constrained layout — which
   does nothing once the viewport is narrower than 800px. So on phones the bare
   headings and paragraphs (the ones NOT inside a card) sat flush against the
   left edge while the cards beside them were inset 30-32px.
   Pad ONLY the bare children. The hero cover, the parallax reveal band, .mc-why
   and .mc-cta are deliberately full-bleed and must NOT be inset, so alignfull,
   has-background and our own mc-* components are excluded. 32px matches the
   text inset inside .mc-why / .mc-cta, so headings line up with card copy all
   the way down the page.
   Breakpoint is 820px, not the usual 781px: the flush-edge problem exists for
   any viewport below the 800px content-size, so 781 would leave a live gap. */
@media (max-width:820px){
  .moore-city > h1,
  .moore-city > h2,
  .moore-city > h3,
  .moore-city > h4,
  .moore-city > p,
  .moore-city > ul,
  .moore-city > ol,
  .moore-city > .wp-block-group:not([class*="mc-"]):not(.alignfull):not(.has-background){
    padding-left:32px;padding-right:32px}
  /* service/universal pages are already carded and need nothing except the two
     closing rows, which are centred but should wrap inside the gutters */
  .mc-service > .mc-svc-links,
  .mc-service > .mc-home-link{
    padding-left:32px;padding-right:32px}
}

/* ---- embedded maps on the city hubs ---------------------------------
   The Google Maps embeds ship hard-coded width="400" height="300" attributes
   and had NO CSS constraint, so inside the ~315px content column on a phone
   the iframe ran 85px past its container and off the right edge of the page —
   the same class of bug as the service-areas video. max-width caps it on
   narrow screens and leaves the 400px desktop size untouched; display:block
   removes the inline-descender gap underneath.
   ⚠️ Scoped to .moore-city ON PURPOSE. Do NOT generalise this to .mc-home or
   .mc-service: the video-lite embeds there deliberately OVERFLOW their box
   (min-width/min-height:100%) to cover-crop, and a blanket max-width would
   pillarbox them. */
.moore-city iframe{max-width:100%;display:block}

/* ---- testimonials (single-slide carousel + dots) --------------------- */
.mc-home .mc-divider{
  display:flex;align-items:center;gap:1rem;max-width:640px;margin:0 auto .8rem}
.mc-home .mc-divider::before,.mc-home .mc-divider::after{
  content:"";flex:1;height:1px;background:var(--h-border)}
.mc-home .mc-divider span{
  font-family:'Saira Condensed',sans-serif;font-weight:700;font-size:1rem;
  letter-spacing:.08em;text-transform:uppercase;color:#EC7427}
/* Height-stable carousel (2026-07-25). Previously every slide was
   display:none and only the active one display:block, so the beige panel was
   only ever as tall as the CURRENT testimonial — each 6s rotation resized it
   and everything below jumped. Very visible on phones.
   Fix: ALL slides share ONE grid cell (grid-area:1/1). The row is sized by the
   TALLEST slide, so the panel height is constant and nothing below moves; the
   inactive slides are hidden with visibility (which still reserves space)
   rather than display (which does not). Slides stretch to the row height and
   centre their own text, so short quotes sit centred in the panel.
   Do NOT put `display` back on .is-active — it would collapse the cell again. */
.mc-home .mc-tcarousel{
  margin-top:.8rem;text-align:center;
  display:grid;grid-template-columns:minmax(0,1fr)}
.mc-home .mc-tslide{
  grid-area:1/1;
  display:flex;flex-direction:column;justify-content:center;
  visibility:hidden;
  background:var(--h-lightbg);padding:40px 32px 22px;text-align:center;
  margin:0;width:100%}
.mc-home .mc-tslide.is-active{visibility:visible}
/* nav dots hidden per user request 2026-07-25 — the 6s auto-advance still
   runs, and prefers-reduced-motion still stops it. */
.mc-home .mc-tdots{display:none}
.mc-home .mc-tdot{
  width:11px;height:11px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--h-border)}
.mc-home .mc-tdot.is-active{background:var(--h-green)}
.mc-home .mc-tslide p{
  font-size:1.1rem;color:var(--h-blue);line-height:1.6;margin:0 0 1rem}
.mc-home .mc-tslide .mc-tname{
  display:block;font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:1.05rem;color:var(--h-green)}
.mc-home .mc-tslide .mc-ttitle{
  display:block;font-size:.88rem;color:var(--h-light);margin-top:.1rem}

/* ---- fleet photo band — FULL-BLEED parallax, image only ------------- */
.mc-home .mc-hband{
  background-position:center;background-size:cover;background-repeat:no-repeat;
  background-attachment:fixed;
  min-height:320px;margin-top:1.5rem}
@media (hover:none) and (pointer:coarse){
  .mc-home .mc-hband{background-attachment:scroll}}

/* ---- construction photo band — FULL-BLEED parallax ------------------ */
/* alignfull group, not an mc-hsec card: edge-to-edge, no radius/shadow  */
.mc-home .mc-hsec--photo{
  background-image:linear-gradient(rgba(0,0,0,.34),rgba(0,0,0,.34)),
    url('/assets/cities/skylines/austin-tx-skyline-texas-capitol.webp');
  background-position:center;background-size:cover;background-repeat:no-repeat;
  background-attachment:fixed;
  min-height:320px;display:flex;flex-direction:column;justify-content:center;
  margin-top:1.5rem;padding:clamp(3rem,6vw,4.5rem) clamp(1rem,3vw,2rem)}
/* iOS/touch fallback — fixed backgrounds jank or break on mobile */
@media (hover:none) and (pointer:coarse){
  .mc-home .mc-hsec--photo{background-attachment:scroll}}
body .mc-home .mc-hsec--photo h2{color:#fff;font-size:clamp(1.7rem,3vw,2.25rem)}
.mc-home .mc-hsec--photo p{color:#fff;font-size:1.25rem;max-width:60rem;
  margin-left:auto;margin-right:auto}
.mc-home .mc-hsec--photo a{color:rgba(255,255,255,.85);text-decoration:underline}

/* ---- certification badges (no card — plain strip, logos +50%) -------- */
.mc-home .mc-hsec--badges{
  background:transparent;box-shadow:none;border-radius:0;
  padding:clamp(1rem,2.5vw,1.75rem) !important}
.mc-home .mc-badges{
  display:flex;justify-content:center;align-items:center;gap:3rem;flex-wrap:wrap}
.mc-home .mc-badges img{height:96px;width:auto;object-fit:contain}

/* ---- office section -------------------------------------------------- */
.mc-home .mc-gallery-strip{
  display:flex;gap:1rem;overflow-x:auto;
  scroll-snap-type:x mandatory;padding-bottom:.6rem}
.mc-home .mc-gallery-strip img{
  height:260px;width:auto;border-radius:8px;scroll-snap-align:start;flex:none}
.mc-home .mc-office-cols h2{margin-top:0}

/* ---- green quote section --------------------------------------------- */
.mc-home .mc-hsec--green{background:var(--h-green)}
body .mc-home .mc-hsec--green h2{color:#fff}
.mc-home .mc-hsec--green p{color:#fff}
.mc-home .mc-form-slot{
  max-width:560px;margin:1.5rem auto 0;
  background:rgba(255,255,255,.1);border:1px dashed rgba(255,255,255,.5);
  border-radius:8px;padding:2rem 1.5rem;text-align:center;
  font-size:.9rem;color:#fff;letter-spacing:.04em}

/* ---- hero slider: ~20% smaller on phones so lines break less awkwardly ---- */
@media (max-width:768px){
  .mc-home .mc-home-hero h1,
  .mc-home .mc-hs-slide h1,
  .mc-home .mc-hs-head{font-size:clamp(1.9rem,4.2vw,3.1rem) !important}
  .mc-home .mc-hs-desc{font-size:clamp(1.05rem,2vw,1.4rem) !important}
}

/* ==========================================================================
   MC-GF — Gravity Forms 2.10 ("orbital" theme) inside the green quote cards.
   NOTE: GF 2.10 wraps forms in .gform-theme--orbital, NOT the older
   .gravity-theme — selectors here must not depend on that legacy class.
   Layout/grid is left to GF (field widths come from layoutGridColumnSpan);
   this file only re-skins it for a green background.
   ========================================================================== */
.mc-gf{margin-top:1.25rem}
.mc-quote-cols .mc-gf{margin-top:0}
.mc-home .mc-gf{max-width:680px;margin-left:auto;margin-right:auto;text-align:left}

/* ---- step indicator ---- */
/* Step indicator sits BETWEEN the fields and the buttons (user, 2026-07-27).
   ⚠ This could NOT be done with `order` alone. GF's DOM nests them at
   different depths:
       <form>
         .gf_page_steps          <- direct child of the form
         .gform-body
           .gform_page
             .gform_page_fields  <- the fields
             .gform-page-footer  <- the buttons
   so the steps and the buttons are not siblings and cannot be ordered against
   each other. Flattening the two wrappers with display:contents promotes the
   fields and the footer into the form's own flex context, and all three can
   then be ordered.

   display:contents is safe on these two specifically: neither carries a
   background, border or padding of its own (checked), so removing their boxes
   changes nothing visually. Inactive pages keep working because GF marks them
   with an INLINE style="display:none", which beats this rule; mc-site.js's
   height lock also sets display='' / 'none' inline, so it still measures each
   step correctly.

   Divider now sits ABOVE the bar, separating it from the fields. If it is ever
   moved again, flip border-top/padding-top/margin-top here AND the two
   -color overrides in mc-site.css. */
.mc-gf form[id^="gform_"]{display:flex;flex-direction:column}
.mc-gf form[id^="gform_"] > .gform-body{display:contents}
.mc-gf .gform_page{display:contents}

.mc-gf .gform_page_fields{order:1}
.mc-gf .gf_page_steps{order:2}
.mc-gf .gform_page_footer,
.mc-gf .gform-page-footer,
.mc-gf .gform_footer{order:3}

/* gap and label size trimmed on 2026-07-27 so all four steps hold one row on
   desktop. Four labels (SELECT, CONTACTS, LOCATION, DETAILS) plus their
   circles ran a little wider than the 45% column, so "Details" dropped to a
   second line. The column was widened to 48% at the same time (see
   mc-site.css); both were changed together to leave margin rather than fitting
   exactly, since label widths vary with the font actually loaded. */
.mc-gf .gf_page_steps{
  display:flex;flex-wrap:wrap;gap:.4rem .8rem;border:0;
  margin:1.8rem 0 0;padding:1rem 0 0;
  border-top:1px solid rgba(255,255,255,.28)}
.mc-gf .gf_step{
  display:flex;align-items:center;gap:.4rem;margin:0;padding:0;
  font-family:'Inter',system-ui,sans-serif;font-size:.79rem;font-weight:600;
  color:rgba(255,255,255,.62);opacity:1}
.mc-home .mc-gf .gf_step{font-family:'Roboto',sans-serif}
.mc-gf .gf_step_number{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  background:rgba(255,255,255,.2);color:#fff;
  font-size:.76rem;font-weight:700;line-height:1}
.mc-gf .gf_step_number::before,.mc-gf .gf_step_number::after{display:none}
.mc-gf .gf_step_label{color:inherit}
.mc-gf .gf_step_active{color:#fff}
.mc-gf .gf_step_active .gf_step_number{background:#FFD9A8;color:#7A3406}
.mc-gf .gf_step_completed .gf_step_number{background:rgba(255,255,255,.85);color:#1B6B3F}

/* ---- labels ---- */
.mc-gf .gform_wrapper .gfield_label,
.mc-gf .gform_wrapper legend.gfield_label,
.mc-gf .gform_wrapper .gform-field-label{
  color:#fff !important;
  font-family:'Inter',system-ui,sans-serif;font-size:.85rem;font-weight:600;
  letter-spacing:.01em;margin-bottom:.3rem}
.mc-home .mc-gf .gform_wrapper .gfield_label{font-family:'Roboto',sans-serif}
.mc-gf .gform_wrapper .gfield_required,
.mc-gf .gform_wrapper .gfield_required *{color:#FFD9A8 !important}
.mc-gf .gform_wrapper .gfield_description{color:rgba(255,255,255,.8)}

/* ---- inputs ---- */
.mc-gf .gform_wrapper input[type=text],
.mc-gf .gform_wrapper input[type=email],
.mc-gf .gform_wrapper input[type=tel],
.mc-gf .gform_wrapper input[type=number],
.mc-gf .gform_wrapper textarea{
  width:100%;box-sizing:border-box;
  background:#fff !important;color:#2B3238 !important;
  border:1px solid rgba(255,255,255,.5) !important;border-radius:8px !important;
  padding:.68rem .8rem !important;
  font-family:inherit;font-size:.95rem;box-shadow:none !important}
.mc-gf .gform_wrapper textarea{min-height:118px;resize:vertical}
.mc-gf .gform_wrapper input:focus,
.mc-gf .gform_wrapper textarea:focus{
  outline:2px solid #FFD9A8 !important;outline-offset:1px;border-color:#fff !important}
.mc-gf .gform_wrapper ::placeholder{color:#8A959D;opacity:1}

/* ---- buttons: submit + next amber, back ghosted ---- */
.mc-gf .gform_wrapper .gform_button,
.mc-gf .gform_wrapper .gform_next_button,
.mc-gf .gform_wrapper input[type=submit]{
  background:#B84F08 !important;color:#fff !important;border:0 !important;
  border-radius:999px !important;padding:.75rem 1.9rem !important;
  font-family:'Inter',system-ui,sans-serif;font-size:.95rem;font-weight:600 !important;
  letter-spacing:.01em;cursor:pointer;width:auto !important;
  transition:background .25s,transform .25s}
.mc-home .mc-gf .gform_wrapper .gform_button,
.mc-home .mc-gf .gform_wrapper .gform_next_button{
  font-family:'Saira Condensed',sans-serif;font-weight:700 !important;
  font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em}
.mc-gf .gform_wrapper .gform_button:hover,
.mc-gf .gform_wrapper .gform_next_button:hover,
.mc-gf .gform_wrapper .gform_button:focus,
.mc-gf .gform_wrapper .gform_next_button:focus{
  background:#9E4E09 !important;transform:translateY(-1px)}
.mc-gf .gform_wrapper .gform_previous_button{
  background:transparent !important;color:#fff !important;
  border:1px solid rgba(255,255,255,.65) !important;border-radius:999px !important;
  padding:.72rem 1.5rem !important;font-weight:600 !important;cursor:pointer;
  width:auto !important;transition:background .25s}
.mc-gf .gform_wrapper .gform_previous_button:hover,
.mc-gf .gform_wrapper .gform_previous_button:focus{
  background:rgba(255,255,255,.15) !important}
.mc-gf .gform_wrapper .gform_page_footer,
.mc-gf .gform_wrapper .gform-page-footer,
.mc-gf .gform_wrapper .gform_footer{
  display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
  margin:1rem 0 0 !important;padding:0 !important;border:0}

/* ---- validation + confirmation on green ---- */
.mc-gf .gform_wrapper .gfield_validation_message,
.mc-gf .gform_wrapper .validation_message,
.mc-gf .gform_wrapper .gfield_description.validation_message{
  background:rgba(255,255,255,.95) !important;border:0 !important;
  border-left:3px solid #B84F08 !important;border-radius:6px;
  color:#8A2C0B !important;font-size:.82rem;padding:.45rem .6rem !important;
  margin-top:.35rem}
.mc-gf .gform_wrapper .gform_validation_errors{
  background:rgba(255,255,255,.95) !important;border:0 !important;
  border-radius:8px;box-shadow:none !important;padding:.8rem 1rem !important}
.mc-gf .gform_wrapper .gform_validation_errors h2,
.mc-gf .gform_wrapper .gform_validation_errors a,
.mc-gf .gform_wrapper .gform_validation_errors *{color:#8A2C0B !important}
.mc-gf .gform_confirmation_message{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.4);
  border-radius:12px;padding:1.4rem 1.2rem;color:#fff;font-size:1rem;line-height:1.6}
.mc-gf .gform_confirmation_message strong{color:#fff}
.mc-gf .gform_confirmation_message a{color:#FFD9A8;text-decoration:underline}

/* honeypot must stay hidden but present */
.mc-gf .gform_wrapper .gform_validation_container{display:none !important}

/* The "There was a problem with your submission" banner duplicates the
   per-field errors and adds a lot of height on the green card. Hide it
   VISUALLY but keep it in the a11y tree — GF autofocuses it on error and
   screen readers rely on it, so display:none would break both. */
.mc-gf .gform_wrapper .gform_validation_errors{
  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;background:none !important;box-shadow:none !important}

/* Format hints (e.g. the phone mask) are instructions, not errors — don't
   dress them up like a second error box next to the real one. */
.mc-gf .gform_wrapper .gfield_description.instruction{
  background:none !important;border:0 !important;border-left:0 !important;
  padding:.15rem 0 0 !important;margin:0 !important;
  color:rgba(255,255,255,.78) !important;font-size:.76rem !important}

/* GF's "0 of 2 max characters" counters under maxLength fields — the limit
   still applies, we just don't narrate it. */
.mc-gf .gform_wrapper .ginput_counter,
.mc-gf .gform_wrapper .charleft{display:none !important}

/* White rule down the left of the form, inset from the card edges so it
   spans the form rather than the whole green card. */
.mc-quote-cols .mc-gf{position:relative;padding-left:1.9rem}
.mc-quote-cols .mc-gf::before{
  content:"";position:absolute;left:0;top:.5rem;bottom:.5rem;width:2px;
  background:rgba(255,255,255,.55);border-radius:2px}
@media (max-width:900px){
  .mc-quote-cols .mc-gf{padding-left:0}
  .mc-quote-cols .mc-gf::before{display:none}
}

/* "*" indicates required fields — universally understood, just noise here. */
.mc-gf .gform_wrapper .gform_required_legend{display:none !important}

/* ---------- Hub coverage-area map (2026-08-15) ----------
   The 4 city hubs swapped their Google Maps iframe for a static portrait
   coverage image (mc-hub-coverage-maps.php). It reuses .mc-area-map so the
   service pages' click-to-zoom behaviour applies unchanged; these rules only
   add the caption and keep the figure flush in its 400px column. */
.moore-city .mc-coverage-map{margin:0}
.moore-city .mc-coverage-map img{border-radius:10px}
.moore-city .mc-coverage-map figcaption{
  margin:.45rem 0 0;font-size:.78rem;line-height:1.35;color:#6B7680;text-align:center}

/* 2026-08-16: the same coverage map now replaces the older radius map on the
   24 service pages (mc-service-coverage-maps.php) — same file, alt, caption
   and zoom. Only the styling rules travel; the .moore-city margin:0 override
   does NOT (on service pages the figure keeps .mc-area-map's 1.25rem top
   margin under the NAP text, exactly where the old map sat). */
.mc-service .mc-coverage-map img{border-radius:10px}
.mc-service .mc-coverage-map figcaption{
  margin:.45rem 0 0;font-size:.78rem;line-height:1.35;color:#6B7680;text-align:center}

/* ---- Our Locations hub: facility address line under each city card heading (2026-08-31) ---- */
/* 12.31 (2026-09-12, owner): address sized like the t-head heading (1.05rem, was .8rem). */
.mc-service .mc-trio .t-addr{display:block;font-size:1.05rem;line-height:1.25;font-weight:600;color:var(--mc-slate);margin:-.1rem 0 .5rem}

/* ================= MC-HUB — city hub pages on the mc-home design ================= */
/* 2026-09-07 Dallas pilot (locations-redesign-plan.md). The hub wrapper is
   .mc-home.mc-hub, so every homepage rule above applies unchanged; these are
   the hub-only additions: bullets on the flip-card backs, the why-band stats
   inside the skyline parallax slot, the NAP block, and the links-row footer. */
.mc-home.mc-hub{padding-bottom:3rem}
.mc-home.mc-hub:has(> .mc-home-link){padding-bottom:0}
/* flip-card backs carry bullets on the hubs (user 2026-09-07) */
.mc-home .mc-flip-back ul{
  list-style:none;margin:0;padding:0;text-align:left;color:#fff;
  font-family:'Roboto',system-ui,sans-serif;font-size:15px;line-height:1.4}
.mc-home .mc-flip-back ul li{position:relative;padding-left:1.05rem;margin:0 0 .35rem}
.mc-home .mc-flip-back ul li::before{
  content:"";position:absolute;left:0;top:.5em;width:.42rem;height:.42rem;
  border-radius:50%;background:#fff}
/* why-band in the parallax slot: readable paragraphs + 4 stat tiles */
.mc-home .mc-hub-why p{font-size:1.15rem;text-align:left}
.mc-home .mc-hub-why a{color:#9FE3C4}
.mc-home .mc-hub-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;
  max-width:60rem;margin:1.8rem auto 0;text-align:center}
@media (max-width:800px){.mc-home .mc-hub-stats{grid-template-columns:1fr 1fr}}
/* 12.21: tiles are .mc-count so mc-home.js counts them up on reveal (same script as the
   homepage counters); .pfx/.sfx hold the non-numeric "#", "+", "/7" parts inline */
.mc-home .mc-hub-stats .n,.mc-home .mc-hub-stats .pfx,.mc-home .mc-hub-stats .sfx{
  display:inline;font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:1;color:#7FD9A6;letter-spacing:0}
.mc-home .mc-hub-stats .lbl{display:block;margin-top:.35rem;font-family:inherit;font-weight:inherit;
  font-size:1.05rem;color:#fff}
/* NAP block: address column + coverage map (map keeps mc-area-map click-zoom) */
.mc-home .mc-nap-cols h3{font-size:1.6rem;color:var(--h-blue);margin:0 0 .6rem}
.mc-home .mc-nap-cols p{font-size:1.125rem}
.mc-home .mc-nap-cols .wp-block-buttons{margin-top:1rem}
.mc-home .mc-nap-photo{margin:1.4rem 0 0}
/* 12.9 (2026-09-12): the NAP photo mirrors the service pages' "Where we serve" band photo
   (.mc-casc-img: 260px landscape strip, cover, 16px radius); band is 58/42 like that band. */
.mc-home .mc-nap-photo img{width:100%;height:260px;object-fit:cover;display:block;border-radius:16px}
.mc-home .mc-coverage-map{margin:0}
.mc-home .mc-coverage-map figcaption{
  font-size:.8rem;color:var(--h-light);margin-top:.5rem;text-align:center}
/* green quote card: the call button reads white-on-green like the homepage */
.mc-home .mc-hsec--green .is-style-outline .wp-block-button__link{background:rgba(0,0,0,.18) !important}
/* hub flip-card button: the homepage outline button as is, only the ends
   rounded like the header "Contact Us" pill (user 2026-09-07). 12.7 */
.mc-home.mc-hub .mc-flip-btn{border-radius:100px;padding:.45rem 1.5rem}
/* hub quote card = the shared two-column hub layout (.mc-quote-cols: text
   left, sand form panel right, skinned by mc-site.css). The panel's "pull"
   margins are tuned to the hub cards' 3.5rem padding; this card pads
   clamp(1.75rem,4.5vw,3.25rem), so restate the pull against that. 12.5 */
.mc-home .mc-quote-cols .mc-gf:not(.mc-gf--light){
  --mc-gf-pull:calc(10px - clamp(1.75rem,4.5vw,3.25rem));max-width:none}
.mc-home .mc-quote-cols h2{text-align:left;margin-top:0}
.mc-home .mc-quote-cols > .wp-block-column:first-child p{text-align:left}
.mc-home .mc-quote-cols .wp-block-buttons{justify-content:flex-start;margin-top:1.2rem}
@media (max-width:781px){
  .mc-home .mc-quote-cols h2,.mc-home .mc-quote-cols > .wp-block-column:first-child p{text-align:center}
  .mc-home .mc-quote-cols .wp-block-buttons{justify-content:center}}
/* hub form panel = the service-page form EXACTLY (user 2026-09-07). Colors
   were already identical (shared mc-site.css skin); what leaked in was the
   homepage type stack: Roboto body/labels/step bar/buttons, Saira headings,
   left-aligned heading lines. Restore Inter 16.5px/1.7 #2C3840, Archivo 800
   titles, centred heading, weight-600 buttons. 12.8 */
.mc-home.mc-hub .mc-gf:not(.mc-gf--light){
  font-family:'Inter',system-ui,sans-serif;font-size:16.5px;line-height:1.7;
  color:#2C3840;text-align:start}
.mc-home.mc-hub .mc-gf:not(.mc-gf--light) .gform_wrapper *:not(h3):not(.mc-gf-title),
.mc-home.mc-hub .mc-gf:not(.mc-gf--light) .gf_step,
.mc-home.mc-hub .mc-gf:not(.mc-gf--light) .gform_wrapper .gfield_label{
  font-family:'Inter',system-ui,sans-serif}
body .mc-home.mc-hub .mc-gf h3,
.mc-home.mc-hub .mc-gf .mc-gf-title{
  font-family:'Archivo','Inter',sans-serif !important;font-weight:800 !important;
  letter-spacing:-.025em}
.mc-home.mc-hub .mc-gf p{font-family:'Inter',system-ui,sans-serif;text-align:center}
.mc-home.mc-hub .mc-gf .gform_wrapper .gform_button,
.mc-home.mc-hub .mc-gf .gform_wrapper .gform_next_button,
.mc-home.mc-hub .mc-gf .gform_wrapper .gform_previous_button{
  font-family:'Inter',system-ui,sans-serif;font-weight:600 !important;
  font-size:.95rem;text-transform:none;letter-spacing:.01em}
.mc-home.mc-hub .mc-gf .gf_step{line-height:1.7}
/* hub hero on phones: the city H1 is much longer than the homepage's, so the
   fixed 58vw frame cannot hold slide 1. Let the frame grow with the overlay
   (cover photo + video stay absolute and keep covering it). 12.4 */
@media (max-width:768px){
  .mc-home.mc-hub .mc-hero-frame{height:auto;min-height:58vw}
  .mc-home.mc-hub .mc-hero-overlay{position:relative;min-height:58vw;padding:1.6rem 1rem}
  body .mc-home.mc-hub .mc-home-hero h1{font-size:clamp(1.5rem,4.2vw,3.1rem) !important}
}
/* 12.10 (2026-09-12): Service Areas band on the hub carries the original district paragraph;
   owner: left-aligned, not centered. Kept at a readable measure inside the centered card. */
.mc-home .mc-hub-areas-text{text-align:justify;max-width:none} /* 12.17: full band width (owner) */
/* 12.11 (2026-09-12): service-area text justified (owner); the parallax why-band carries the
   original city hero's hazard stripe (9px, #111 / amber #E8A000, 18px bars) above AND below. */
.mc-home .mc-hub-why{position:relative}
.mc-home .mc-hub-why::before,.mc-home .mc-hub-why::after{
  content:"";position:absolute;left:0;right:0;height:9px;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(90deg,#111 0 18px,#E8A000 18px 36px)}
.mc-home .mc-hub-why::before{top:0}
.mc-home .mc-hub-why::after{bottom:0}
/* 12.12 (2026-09-12): Dallas hub FAQ band = service-page FAQ card with the beige GF panel alone in
   the right column: no outward pull (that geometry belongs to the green quote cards), no top gap. */
.mc-hub-faq .mc-gf:not(.mc-gf--light){--mc-gf-pull:0px;margin-top:0}
/* 12.13 (2026-09-12): Dallas hub Service Areas band: the 3D horizon map replaces the areas video
   (same 76% slot on desktop, full-bleed on phones) + the warehouse address line under it. */
.mc-home .mc-hub-map{max-width:76%;margin:1.6rem auto 0}
.mc-home .mc-hub-map img{width:100%;height:auto;display:block;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.mc-home .mc-hub-map figcaption{font-size:.8rem;color:var(--h-light);margin-top:.5rem;text-align:center}
.mc-home .mc-hub-warehouse{margin-top:1rem}
@media (max-width:767px){
  /* 12.35 (2026-09-14): !important - Gutenberg's constrained layout forces margin-left/right:auto
     !important on children, which collapsed the left bleed to 0 and pushed the map 28px past the
     right edge on phones (owner report). */
  .mc-home .mc-hub-map{max-width:none;width:100vw;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important}
  .mc-home .mc-hub-map img{border-radius:0}}
/* 12.14 (2026-09-12): the hub's FAQ container (.mc-service.mc-hub-faq) did not constrain its
   children (card + links row ran full-bleed above 1280px); cap them to the hub's 1280 like the
   .mc-hsec cards. */
.mc-hub-faq > .mc-svc-card,.mc-hub-faq > .mc-svc-links,.mc-hub-faq > .mc-home-link{
  max-width:1280px;margin-left:auto !important;margin-right:auto !important}
/* 12.15 (2026-09-12): Dallas hub FAQ band 66/34 with the broom photo filling the right column;
   flip-card back titles as styled text (same look as the h3 they replaced); quote button spacing. */
.mc-hub-faq .mc-faq-cols > .wp-block-column.is-vertically-aligned-top:last-child{display:flex;align-self:stretch} /* 12.16: fill the FAQ column height */
.mc-hub-faq .mc-faq-photo{margin:0;flex:1;display:flex}
.mc-hub-faq .mc-faq-photo img{width:100%;height:100%;min-height:260px;object-fit:cover;border-radius:16px;display:block}
@media (max-width:781px){.mc-hub-faq .mc-faq-photo img{height:auto;min-height:0}}
.mc-home .mc-flip-back .mc-flip-back-title{
  font-family:'Saira Condensed','Archivo',sans-serif;font-weight:700;color:#fff;font-size:20px;
  line-height:1.2;text-transform:uppercase;margin:0 0 .6rem}
.mc-home .mc-hub-quote-btn{margin-top:1rem}
/* 12.24 (2026-09-12, owner): the hub's two "Get a quote" buttons (under the flip cards and under the
   Service Areas map) look exactly like the service pages' hero button (.mc-service rules @609-618:
   Archivo 700 .98rem, 10px radius, deep amber #B84F08 / white, 3px drop shadow, lift on hover).
   `body` prefix + `.wp-block-button` outrank the hub's green `:not(.is-style-outline)` rule (0,4,0). */
.mc-home .mc-hub-flip-quote{margin-top:1.8rem}
body .mc-home .mc-hub-flip-quote .wp-block-button .wp-block-button__link,
body .mc-home .mc-hub-quote-btn .wp-block-button .wp-block-button__link{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.98rem;
  border-radius:10px;padding:.85rem 1.7rem;border:0 !important;
  background-color:#B84F08 !important;color:#fff !important; /* 12.25: literal, the --mc-amber-* tokens are .moore-city/.mc-service-scoped */
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;
  box-shadow:0 3px 0 rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.12)}
body .mc-home .mc-hub-flip-quote .wp-block-button .wp-block-button__link:hover,
body .mc-home .mc-hub-quote-btn .wp-block-button .wp-block-button__link:hover{
  background-color:#9E4E09 !important;color:#fff !important;transform:translateY(-2px);
  box-shadow:0 5px 0 rgba(0,0,0,.22),0 3px 8px rgba(0,0,0,.14)}
/* 12.18 (2026-09-12): Dallas hub credentials line under the Service Areas paragraph. */
.mc-home .mc-hub-creds{font-size:1rem;color:var(--h-light);margin-top:1rem}
.mc-home .mc-hub-creds a{color:#1C7A42;text-decoration:underline;text-underline-offset:2px;font-weight:600}
/* 12.19 (2026-09-12): Dallas hub parallax headings use the service pages' reveal-line type
   (Archivo 800, -.02em, clamp(1.6rem,3.4vw,2.5rem), 22ch measure) instead of the homepage Saira. */
body .mc-home .mc-hub-why h2{
  font-family:'Archivo','Inter',sans-serif !important;font-weight:800 !important;letter-spacing:-.02em;
  font-size:clamp(1.15rem,2.35vw,2rem);line-height:1.15;color:#fff;max-width:none} /* 12.20: sized to hold one line on desktop (owner) */

/* 12.26 (2026-09-12): PW city pages, graffiti cross-sell band above the map band - photo sized to
   match the homepage flip-card image (~267x221 rendered, owner) instead of filling the column. */
.mc-service .mc-pw-graffiti-band .mc-band-photo img{width:320px;height:auto;min-height:0;display:block;margin:0 auto} /* 12.28: 270 -> 320 (owner: slightly bigger) */
/* 12.27 (2026-09-12): same band - photo column collapses to the 270px image and sits at the far right,
   so the text column takes the remaining width (owner: fill the white space). Stacks on mobile via
   core's flex-basis:100% !important under 782px. */
.mc-service .mc-pw-graffiti-band .mc-band>.wp-block-column:last-child{flex:0 0 320px} /* 12.28: 270 -> 320 */
.mc-service .mc-pw-graffiti-band .mc-band>.wp-block-column:first-child{flex:1 1 0}
.mc-service .mc-pw-graffiti-band .mc-band-photo{margin:0 0 0 auto}
/* 12.28 (2026-09-12): PW city pages, "What's included" band - the photo column now holds TWO photos
   (existing + the hub flip-card construction-site wash). Column stretches to the text column's height
   and the photos split it, so the empty space above/below the single photo is gone (owner). */
.mc-service .mc-band>.wp-block-column.mc-incl-photos{align-self:stretch;display:flex;flex-direction:column;gap:2rem} /* 12.29: gap 1rem -> 2rem (owner: double the space; photos shrink to fit) */
.mc-service .mc-incl-photos .mc-band-photo{flex:1 1 0;min-height:0;margin:0;overflow:hidden;border-radius:20px}
.mc-service .mc-incl-photos .mc-band-photo img{height:100%;min-height:280px}

/* ---- 12.30 (2026-09-12): /locations/ "Our Flagship Office Facility" band - photo slider (.mc-slider),
   driven by mc-site.js 1.30. Stacked slides cross-fade; prev/next + dots; 4:3 frame, cover-fit. ---- */
.mc-slider{position:relative;overflow:hidden;border-radius:20px;background:#e9edf3;aspect-ratio:4/3}
.mc-slider .mc-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s ease}
.mc-slider .mc-slide.is-active{opacity:1;z-index:1}
.mc-slider .mc-slide img{width:100%;height:100%;object-fit:cover;display:block}
.mc-slider .mc-slider-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.85);color:#292B74;font-size:30px;line-height:40px;text-align:center;cursor:pointer;padding:0 0 4px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.mc-slider .mc-slider-btn:hover,.mc-slider .mc-slider-btn:focus-visible{background:#fff}
.mc-slider .mc-slider-btn.prev{left:12px}
.mc-slider .mc-slider-btn.next{right:12px}
.mc-slider .mc-slider-dots{position:absolute;left:0;right:0;bottom:10px;z-index:2;display:flex;justify-content:center;gap:8px}
.mc-slider .mc-sdot{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.6);cursor:pointer;box-shadow:0 0 2px rgba(0,0,0,.4)}
.mc-slider .mc-sdot.is-active{background:#2CA558}
.mc-service .mc-flagship .mc-band>.wp-block-column:first-child{min-width:0}
/* 12.33 (2026-09-12, owner): slider column ~15% wider on desktop (50% -> 57.5% of the band; text column takes the rest). */
@media (min-width:782px){
  .mc-service .mc-flagship .mc-band>.wp-block-column:first-child{flex:0 0 57.5%}
  .mc-service .mc-flagship .mc-band>.wp-block-column:last-child{flex:1 1 0}
}
@media (prefers-reduced-motion:reduce){.mc-slider .mc-slide{transition:none}}

/* ---- 12.32 (2026-09-12, owner): /locations/ (page 3360) city-card skylines all crop to the McAllen
   photo's shape (1915x821) so the six cards line up; Houston's 1437x546 was much shorter. ---- */
.page-id-3360 .mc-trio .mc-trio-img img{aspect-ratio:1915/821;width:100%;height:auto;object-fit:cover}
/* 12.36 (2026-09-14, owner/PageSpeed): on the hubs the whole flip-card BACK is the link (was a bare
   "Learn More" anchor). Anchor styling reset + button-look hover on the whole back. */
.mc-home a.mc-flip-back{color:#fff;text-decoration:none}
.mc-home a.mc-flip-back .mc-flip-btn{display:inline-block}
.mc-home a.mc-flip-back:hover .mc-flip-btn,.mc-home a.mc-flip-back:focus-visible .mc-flip-btn{background:rgba(255,255,255,.18)}
/* 12.37 (2026-09-20, owner): city hubs - the SECOND parallax band (the "Why do ... Properties Need Frequent
   Cleaning Services?" band, id="why-<city>") carries justified text; the first band (skyline, id="<city>-band-2")
   and the stat tiles stay as they were. Scoped by the id prefix so new hubs pick it up. ---- */
.mc-home .mc-hub-why[id^="why-"] p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}