/* The video lightbox reimplemented in public/js/site.js. The live site used
   Webflow's own lightbox component, whose styles live in the Webflow runtime
   CSS we do not ship. Scoped under its own prefix so nothing here can collide
   with the carried Webflow stylesheet. */
.mpcm-lightbox {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 1.25rem;
  background: rgba(0, 0, 0, .92);
}
.mpcm-lightbox__frame {
  position: relative; width: 100%; max-width: 68rem; height: 0;
}
.mpcm-lightbox__frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.mpcm-lightbox__close {
  position: absolute; top: .75rem; right: 1rem;
  width: 2.75rem; height: 2.75rem;
  font-size: 2rem; line-height: 1;
  color: #fff; background: transparent; border: 0; cursor: pointer;
}
.mpcm-lightbox__close:focus-visible { outline: .125rem solid #fff; outline-offset: .25rem; }

/* v1.2 decision 4 (2026-09-28) removed the .mpcm-embed-placeholder rules that
   used to stand in for the disabled ResponseMonkey booking widget on /meeting
   — the real widget is carried again (scripts/extract-pages.mjs), so nothing
   in this file targets that class any more. */

/* ==========================================================================
   v1.1 round 2 — sweep corrections, 2026-09-06 PT
   Repo-authored CSS only. public/styles/site.css is the carried Webflow
   stylesheet and is regenerated by scripts/build-stylesheet.mjs, so not one
   declaration below touches it (AGENTS.md).
   ========================================================================== */

/* U9 — the opened mobile menu was buried under the hero: document.elementFromPoint
   at each of the four links returned .header7_content / .padding-section-large,
   never the link.
   CAUSE (measured on the deployed preview, not inferred): NOT stacking. The
   carried `.w-nav{z-index:1000;position:relative}` already puts the whole navbar
   above the page, and the panel's own `z-index:auto` sits inside that context.
   The defect is the overlay: public/js/site.js reimplements Webflow's toggle by
   moving `.w-nav-menu` into a generated `div.w-nav-overlay`, and the carried rule
   `.w-nav-overlay{position:absolute;overflow:hidden}` gives that div NO height —
   Webflow's own runtime sets the height inline while it slides the panel open,
   and the rebuilt toggle never did. Measured open: overlay 390x0, panel 390x844
   inside it. A 0px-tall overflow:hidden box clipped the entire panel away.
   FIX: the overlay wraps one absolutely positioned panel and has nothing of its
   own to clip, so it does not need to hide overflow. Closed, the overlay is
   display:none and this rule is inert. */
.w-nav-overlay { overflow: visible; }

/* Light-ground shell pages — /404 and /thank-you, which render the site's own
   header (sweep item U1; the seven /post/* stubs that also used to carry this
   class are gone as of v1.2 decision 1).
   Every carried page puts that same header over a dark hero, so it is
   transparent (`.navbar_component{background-color:#fff0}`) and every control
   in it is white by default (`--link-color--link-alternate` and
   `--base-color-brand--white`/`--base-color-neutral--white` both resolve to
   white). On these two pages' WHITE ground that is white-on-white, 1:1 — and so
   is the header wordmark, a white-only raster with no dark variant
   (`new-logo_mpcm-logo-white.png`).
   v1.1 fixed the text half by recolouring the nav links and hamburger bars dark
   (`--text-color--text-primary`). John's launch-prep decision 3 (2026-09-28)
   fixes the logo half instead, without a new asset: give the header itself a
   solid ground in the site's own brand purple — `--base-color-brand--dark`,
   declared in the carried stylesheet as `#309` (the 3-digit shorthand for
   #330099), the exact value doctrine/brand-observed.md measured off the live
   site's `#330099` primary. On that purple ground the header's own default
   white is correct again — white on #330099 measures 13.12:1 (brand-observed.md),
   the same figure the v1.1 comment already cited for dark-on-white — so the
   v1.1 text-colour override is removed rather than re-tuned, and every control
   (nav links, hamburger bars, now the logo too) falls back to the values the
   carried stylesheet already gives them on every other page. No brand accent on
   a button or a background is touched: the orange CTA is unchanged. */
.mpcm-light-shell .navbar_component { background-color: var(--base-color-brand--dark); }

/* U1 on /404. With a footer beneath it, the carried `.utility_component{height:100vh}`
   centres the message in a full viewport and leaves ~40vh of empty page above the
   footer. Scoped to the utility page by body class; the class itself is not edited.
   The top padding clears the header, which is `position:absolute`. */
.mpcm-light-shell .utility_component { height: auto; padding-top: 9rem; padding-bottom: 6rem; }

/* v1.2 decision 1 (2026-09-28) dropped the seven /post/* items from the build
   entirely (301s in public/_redirects), so the .mpcm-post-stub rule that used
   to size their shell section is gone — nothing targets that class any more.
   v1.2 decision 2 removed the footer newsletter form (`.footer2_right-wrapper`,
   scripts/corrections-v1_2.mjs), which is what the BACKLOG round-one contrast
   fix below used to be for — the "Subscribe" button and consent line it
   recoloured no longer exist on any page, so that rule is gone too. */

/* Round 3, rule 11 — /training/link-building overflowed to scrollWidth 819 at 390
   (429px over, the worst single overflow in the 576-route sweep). Cause: the
   carried Loom embed is a hard-sized `<iframe width="640" height="359">`, and its
   grid parent `.trainging_component` is `grid-template-columns:.5fr 1.5fr .5fr` at
   every breakpoint with no mobile rule, so at 390 the middle track resolves to the
   iframe's 640px intrinsic minimum (measured tracks: 143.98px 640px 0px inside a
   351px grid) and `.training_main-content` paints 640px wide out to right=819.48.
   The LIVE page is worse — scrollWidth 992 at 390, same iframe, same tracks
   (143.98px 640px 156.75px; the third track is 0 here only because the Relume
   "Universal CTA Here" placeholder was removed as row 41). A carried live defect:
   there is no correct live rendering to match, so this is the smallest scoped rule
   that makes the block fit, and nothing is hidden or clipped.
   Scoped to <=991px (Webflow's own tablet breakpoint) so the 1440 layout is
   byte-identical to the parent build — verified: `.trainging_component` 1280px,
   `.training_main-content` 748.8px, iframe 640x359 at x=399.98, before and after. */
@media screen and (max-width: 991px) {
  .trainging_component { grid-template-columns: 1fr; }
  .trainging_component > * { min-width: 0; }
  .training_main-content .w-embed.w-iframe { width: 100%; min-width: 0; }
  .training_main-content .w-embed.w-iframe iframe {
    width: 100%; max-width: 100%; height: auto; aspect-ratio: 640 / 359;
  }
}

/* ==========================================================================
   v1.2 IX2 pass — 2026-09-28. The live site's Webflow interactions that John
   flagged on the preview homepage, reproduced from the live IX2 config
   (CHANGES-v1.2.md rows 10-14). The scroll-linked half is public/js/site.js
   section 5, which adds html.mpcm-ix when it runs; everything under
   html:not(.mpcm-ix) below is the static layout for no-JS and for
   prefers-reduced-motion: reduce, where nothing moves, so nothing may overlap
   or sit off-screen.
   ========================================================================== */

/* Website mockups (e-21/22, e-29/30, e-37/38, e-51/52, e-55/56, e-57/58,
   e-61/62). Live: hovering a device frame moves its screenshot up by a fixed
   distance over 15s, linear; leaving it runs back over 5s, linear. The Pete's
   frame only reacts at >=992 (its events are limited to Webflow's "main"
   breakpoint); the other six react at every width, and on touch a tap is the
   hover, as it is for IX2's mouseover. The carried <img> keeps the inline
   IX2 initial-state transform (translate3d(0,0,0)), which is why these rules
   need !important. Pure CSS: no script. */
@media (prefers-reduced-motion: no-preference) {
  .gallery_website-preview_certified, .gallery_website-preview_best-exterminator,
  .gallery_website-preview_highland, .gallery_website-preview_ecogeek,
  .gallery_website-preview_petes, .gallery_website-preview_pesky-critters,
  .gallery_website-preview_imagesandhoff { transition: transform 5s linear !important; }
  .gallery_website-preview-wrapper_certified:hover .gallery_website-preview_certified,
  .gallery_website-preview-wrapper_best-exterminator:hover .gallery_website-preview_best-exterminator,
  .gallery_website-preview-wrapper_highland:hover .gallery_website-preview_highland,
  .gallery_website-preview-wrapper_ecogeek:hover .gallery_website-preview_ecogeek,
  .gallery_website-preview-wrapper_pesky-critters:hover .gallery_website-preview_pesky-critters,
  .gallery_website-preview-wrapper_sandhoff:hover .gallery_website-preview_imagesandhoff {
    transition-duration: 15s !important;
  }
  .gallery_website-preview-wrapper_certified:hover .gallery_website-preview_certified { transform: translate3d(0, -4676px, 0) !important; }
  .gallery_website-preview-wrapper_best-exterminator:hover .gallery_website-preview_best-exterminator { transform: translate3d(0, -2306px, 0) !important; }
  .gallery_website-preview-wrapper_highland:hover .gallery_website-preview_highland { transform: translate3d(0, -1839px, 0) !important; }
  .gallery_website-preview-wrapper_ecogeek:hover .gallery_website-preview_ecogeek { transform: translate3d(0, -2870px, 0) !important; }
  .gallery_website-preview-wrapper_pesky-critters:hover .gallery_website-preview_pesky-critters { transform: translate3d(0, -2838px, 0) !important; }
  .gallery_website-preview-wrapper_sandhoff:hover .gallery_website-preview_imagesandhoff { transform: translate3d(0, -3317px, 0) !important; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 992px) {
  .gallery_website-preview-wrapper_petes:hover .gallery_website-preview_petes {
    transform: translate3d(0, -3210px, 0) !important; transition-duration: 15s !important;
  }
}

/* Overlap. The carried layout lets .video-box-container (the video row and
   the three trust columns) run 128px past the top of .div-block-2 ("Need Help
   Growing Your Business?"); live hides that by moving the box up as it
   scrolls (e-5). Static layout: push the heading block clear by the same 8rem. */
html:not(.mpcm-ix) .div-block-2 { margin-top: 8rem; }

/* Marketing system (e-44/45/46, >=992 only; below that live stacks the
   cards and so does this). Static layout: no pin, and the camera scrolls
   sideways on its own so every card can be reached. */
@media screen and (min-width: 992px) {
  html:not(.mpcm-ix) .section.horizontal-scroll-section { height: auto; }
  html:not(.mpcm-ix) .horizontal-scroll-wrapper-camera {
    position: relative; height: auto; overflow-x: auto; padding-bottom: 3rem;
  }
}

/* Starter-site card deck (e-41 / e-42). Static layout: un-stack the deck, so
   all three cards read in order with none covering another, and drop the
   300vh scroll runway that only exists to drive the animation. */
html:not(.mpcm-ix) .layout416_component { height: auto; }
html:not(.mpcm-ix) .layout416_content { position: static; height: auto; padding-top: 4rem; padding-bottom: 4rem; }
html:not(.mpcm-ix) .layout416_content-right {
  position: static; min-height: 0; display: flex; flex-direction: column; gap: 1.5rem;
}
html:not(.mpcm-ix) .layout416_card { position: relative; transform: none; margin-left: 0; margin-right: 0; }

/* FAQ video tiles (John, 2026-09-28: fix them). Not an IX2 state: each tile's
   link is a shrink-to-fit flex child, so before its lazy image loads the link
   and the image are 0px wide — and a 0x0 lazy image never intersects the
   viewport, so it never loads. Live has the same markup and only escapes it
   by timing (at 390 one live tile stayed 0x24 in the same probe). Give the
   link and image the width they reach once loaded on live (416x234 at 1440,
   167x94 at 390: the full tile, at the thumbnails' own 1280x720 ratio). */
.homepage_video-cms_faq-item > .w-lightbox { width: 100%; }
.homepage_video-cms_faq-item > .w-lightbox > img { width: 100%; aspect-ratio: 16 / 9; }

/* At scale(1.3) (e-6) the "Need Help Growing" block is wider than the
   viewport at >=992: 1552px of scrollWidth at 1440, on live as well as here,
   which gives the whole page a sideways scrollbar. The carried
   `.section_layout92{overflow:hidden}` only applies at the smaller
   breakpoints. Clipping the section on x only removes the sideways scroll
   without cutting any text (the heading itself stays inside 1440 at 1.3). */
.section_layout92 { overflow-x: clip; }