/*! Peers Moving - combined site CSS.
 * Built from WPCode snippets 1747, 1647, 1596, 1581 in cascade order.
 * Edit the snippets, then re-run the builder to regenerate this file.
 */
/* ===== snippet 1747 : Homepage layout polish ===== */
/* Site layout polish — 2026-08-01
   Additive CSS only. Disable this snippet to revert everything below.
   No markup, content or theme files are changed. */

/* ============ HOMEPAGE ============
   Bullet sections sat in a ~785px column inside a 1208px container,
   leaving ~420px dead on every row. Two-up structured rows fill it. */
body.home .entry-content section > ul{
  columns:2; column-gap:56px; max-width:none !important; margin-top:22px;
}
body.home .entry-content section > ul > li{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  max-width:none !important; list-style:none;
  padding:12px 0 0; margin:0 0 16px;
  border-top:1px solid rgba(26,22,18,.14);
}
body.home .entry-content section > ul > li strong{ display:block; margin-bottom:4px; }
body.home .entry-content section > ul > li a{ font-weight:700; }
body.home .entry-content section > p{ max-width:70ch !important; }
body.home .entry-content section{ margin-bottom:36px !important; }
body.home .entry-content section > h2{ margin-bottom:16px !important; }

/* The service-area grid printed "Morris County, NJ" thirty times.
   Dover keeps its subtitle because that one says something. */
body.home a[href*="/movers-"] span:nth-child(2){ display:none !important; }
body.home a[href*="/movers-dover-nj/"] span:nth-child(2){ display:block !important; }
body.home a[href*="/movers-"]{ padding-top:13px !important; padding-bottom:13px !important; }

/* ============ INTERIOR PAGES ============
   Same bare single column. These lists carry real prose, so they get the
   row treatment without columns — cramming them two-up would hurt reading. */
body.page:not(.home) .entry-content ul:not([class]) > li{
  list-style:none; position:relative;
  padding:11px 0 0 0; margin:0 0 13px;
  border-top:1px solid rgba(26,22,18,.13);
}
body.page:not(.home) .entry-content ul:not([class]){ padding-left:0; margin-top:20px; }
body.page:not(.home) .entry-content ul:not([class]) > li strong:first-child{
  display:block; margin-bottom:4px;
}
/* breathing room around headings so sections read as sections */
body.page:not(.home) .entry-content h2{ margin-top:1.9em !important; margin-bottom:.5em !important; }
body.page:not(.home) .entry-content h3{ margin-top:1.5em !important; margin-bottom:.35em !important; }

/* ============ SHARED ============ */

/* single column on small screens */
@media (max-width:820px){
  body.home .entry-content section > ul{ columns:1; }
  body.home .entry-content section > p{ max-width:none !important; }
}

/* ============ CLOSING CTA ON CONTENT PAGES ============
   Uses the site's own tokens so it matches the existing brand exactly.
   Ink on the brand red measures 5.3:1 — white on it would be 3.3:1. */
.pm-endcta{
  margin:56px 0 4px; padding:clamp(24px,3.4vw,42px);
  background:var(--pm-paper-2,#E4DCC9);
  border:1px solid rgba(23,20,15,.16);
}
.pm-endcta .pm-endcta-k{
  font-family:var(--pm-slip,'Courier Prime',monospace) !important;
  font-size:11.5px !important; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pm-ink-3,#6E6653) !important; margin:0 0 12px !important;
}
.pm-endcta h2{ margin:0 0 10px !important; font-size:clamp(23px,3vw,34px) !important; }
.pm-endcta p{ margin:0 0 18px !important; color:var(--pm-ink-2,#4A4437); max-width:54ch; }
.pm-endcta .pm-endcta-btns{ display:flex; gap:12px; flex-wrap:wrap; margin:0 !important; }
.pm-endcta a{
  display:inline-block; padding:15px 26px;
  font-family:var(--pm-slip,'Courier Prime',monospace);
  font-weight:700; font-size:14px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none !important; border:2px solid var(--pm-ink,#17140F);
  transition:background .15s, color .15s;
}
.pm-endcta a.pm-endcta-a{ background:var(--pm-red,#EE593D); color:var(--pm-ink,#17140F) !important; }
.pm-endcta a.pm-endcta-b{ background:transparent; color:var(--pm-ink,#17140F) !important; }
.pm-endcta a.pm-endcta-a:hover{ background:var(--pm-red-dk,#C0401E); color:#fff !important; }
.pm-endcta a.pm-endcta-b:hover{ background:var(--pm-ink,#17140F); color:var(--pm-paper,#EFE9DC) !important; }
@media (max-width:640px){ .pm-endcta a{ width:100%; text-align:center; } }

/* ============ MOBILE FIXES ============
   The reCAPTCHA badge is a 256px fixed panel that floated straight over
   the body copy on phones — worse on pages with no form at all. Google's
   terms allow hiding it provided the attribution text is shown instead,
   which snippet "Content pages - closing CTA" now prints in the footer. */
.grecaptcha-badge{ visibility:hidden !important; }

.pm-recaptcha-note{
  font-size:12px; line-height:1.5; opacity:.75; margin:14px 0 0; text-align:center;
}
.pm-recaptcha-note a{ text-decoration:underline; }

@media (max-width:900px){
  /* the page-title band was eating ~130px before the first line of copy */
  body.page:not(.home) .entry-header,
  body.page:not(.home) .page-header{ padding-top:18px !important; padding-bottom:14px !important; }
  body.page:not(.home) .entry-content > h2:first-child,
  body.page:not(.home) .entry-content section:first-child{ margin-top:8px !important; }
  body.page:not(.home) .entry-content h2{ margin-top:1.15em !important; }

  /* give the sticky call bar clearance so it never covers the last line */
  body{ padding-bottom:96px; }

  /* tighten the homepage stack too */
  body.home .entry-content section{ margin-bottom:26px !important; }
  body.home .entry-content section > h2{ margin-bottom:12px !important; }
}

/* ---- MOBILE GAP: title band to first line of copy ----
   .entry-header carried a 40px bottom margin and .entry-content a 40px
   top margin, plus the first section's own padding — about 150px of
   nothing before the reader reached a word. */
@media (max-width:900px){
  body.page:not(.home) .entry-header{ margin-bottom:14px !important; }
  body.page:not(.home) .entry-content{ margin-top:14px !important; }
  body.page:not(.home) .entry-content .elementor-section:first-child{ padding-top:0 !important; }
  body.page:not(.home) .entry-content > *:first-child{ margin-top:0 !important; }
}

/* ============ CONSOLIDATED TIMELINE ============
   The archive rail was a sideways scroller (grid-auto-flow:column +
   overflow-x:auto). It now wraps and reads down the page like everything
   else, which is what a timeline of 11 photographs actually wants. */
html body .pm-tl-rail{
  display:grid !important;
  grid-auto-flow:row !important;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;
  grid-auto-columns:auto !important;
  overflow-x:visible !important;
  overflow:visible !important;
  scroll-snap-type:none !important;
  padding-bottom:0 !important;
}
html body .pm-tl-card{ scroll-snap-align:none !important; }
@media (max-width:600px){
  html body .pm-tl-rail{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important; }
  html body .pm-tl-card img{ height:130px !important; }
}

/* ============ MOBILE MENU ============
   Konte's own toggle sits inside the drawer header, which computes to 0x0 —
   present in the DOM, impossible to tap. This is the visible way out.
   Sticky, so it stays reachable however far the menu is scrolled. */
#mobile-menu .panel .pm-menu-close{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:12px;
  width:100%; min-height:60px; padding:16px 22px; margin:0;
  background:var(--pm-paper,#EFE9DC);
  border:0; border-bottom:1px solid rgba(23,20,15,.18);
  font-family:var(--pm-slip,'Courier Prime',monospace);
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pm-ink,#17140F); cursor:pointer; text-align:left;
}
#mobile-menu .panel .pm-menu-close .pm-menu-close-x{
  font-size:30px; line-height:1; font-family:inherit; margin-top:-4px;
}
#mobile-menu .panel .pm-menu-close:hover{ color:var(--pm-red-dk,#C0401E); }
#mobile-menu .panel .pm-menu-close:focus-visible{
  outline:3px solid var(--pm-red,#EE593D); outline-offset:-3px;
}

/* the drawer must scroll, and clear the sticky call bar at the bottom */
#mobile-menu .panel{
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
#mobile-menu .mobile-menu__nav{ padding-bottom:120px; }

/* generous tap targets on every menu row (44px is the accessible minimum) */
#mobile-menu .mobile-menu__nav a{ min-height:52px; display:flex; align-items:center; }

/* the accessibility widget floated over the open drawer */
body.mobile-menu-opened .userway_buttons_wrapper{ display:none !important; }

/* ============ FREE QUOTE INTRO ============ */
.pm-quote-intro{ margin:0 0 34px; max-width:66ch; }
.pm-quote-intro .pm-qi-k{
  font-family:var(--pm-slip,'Courier Prime',monospace) !important;
  font-size:11.5px !important; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pm-ink-3,#6E6653) !important; margin:0 0 10px !important;
}
.pm-quote-intro h2{ margin:0 0 12px !important; }
.pm-quote-intro .pm-qi-lede{ color:var(--pm-ink-2,#4A4437); margin:0 0 22px !important; }
.pm-quote-intro .pm-qi-points{ list-style:none; padding:0; margin:0; }
.pm-quote-intro .pm-qi-points li{
  position:relative; padding:13px 0 0; margin:0 0 13px;
  border-top:1px solid rgba(23,20,15,.14); color:var(--pm-ink-2,#4A4437);
  line-height:1.6;
}
.pm-quote-intro .pm-qi-points b{ color:var(--pm-ink,#17140F); }

/* ============ SITEWIDE FOOTER ============
   Konte's thin two-item bar is hidden, not deleted — disable the
   "Sitewide footer" snippet and this rule and the original returns. */
footer#colophon.site-footer{ display:none !important; }

.pm-sitefooter{ background:var(--pm-paper-2,#E4DCC9); border-top:3px solid var(--pm-ink,#17140F); }
.pm-sitefooter .pm-ft-inner{
  max-width:var(--pm-shell,1280px); margin:0 auto; padding:clamp(38px,4.5vw,60px) 36px clamp(30px,3.5vw,44px);
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(24px,3vw,52px);
}
.pm-sitefooter h2{
  font-family:var(--pm-slip,'Courier Prime',monospace) !important;
  font-size:11.5px !important; font-weight:700 !important; letter-spacing:.15em !important;
  text-transform:uppercase !important; color:var(--pm-ink-3,#6E6653) !important;
  margin:0 0 14px !important; line-height:1.4 !important;
}
.pm-sitefooter ul{ list-style:none; margin:0; padding:0; }
.pm-sitefooter li{ margin:0 0 9px; }
.pm-sitefooter a{ color:var(--pm-ink,#17140F); text-decoration:none; font-size:15.5px; }
.pm-sitefooter a:hover{ color:var(--pm-red-dk,#C0401E); text-decoration:underline; text-underline-offset:3px; }
.pm-sitefooter .pm-ft-name{
  font-family:var(--pm-display,'Staatliches',sans-serif); font-size:24px;
  letter-spacing:.02em; color:var(--pm-ink,#17140F); margin:0 0 10px;
}
.pm-sitefooter .pm-ft-addr,.pm-sitefooter .pm-ft-hours{ color:var(--pm-ink-2,#4A4437); font-size:15.5px; margin:0 0 8px; line-height:1.6; }
.pm-sitefooter .pm-ft-tel{
  font-family:var(--pm-display,'Staatliches',sans-serif); font-size:27px;
  letter-spacing:.02em; color:var(--pm-ink,#17140F);
}
.pm-sitefooter .pm-ft-cta{ margin:18px 0 0; }
.pm-sitefooter .pm-ft-btn{
  display:inline-block; padding:13px 22px; background:var(--pm-red,#EE593D);
  color:var(--pm-ink,#17140F) !important; border:2px solid var(--pm-ink,#17140F);
  font-family:var(--pm-slip,'Courier Prime',monospace); font-weight:700; font-size:13px;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none !important;
}
.pm-sitefooter .pm-ft-btn:hover{ background:var(--pm-red-dk,#C0401E); color:#fff !important; }

/* quiet legal bar — the site's own policy sits above Google's fine print */
.pm-sitefooter .pm-ft-legal{ border-top:1px solid rgba(23,20,15,.18); }
.pm-sitefooter .pm-ft-legal-inner{
  max-width:var(--pm-shell,1280px); margin:0 auto; padding:20px 36px 26px;
}
.pm-sitefooter .pm-ft-legal p{ margin:0 0 6px; }
.pm-sitefooter .pm-ft-lic,.pm-sitefooter .pm-ft-copy{
  font-family:var(--pm-slip,'Courier Prime',monospace); font-size:12px;
  letter-spacing:.06em; color:var(--pm-ink-2,#4A4437); text-transform:uppercase;
}
.pm-sitefooter .pm-ft-copy a{ font-size:12px; text-decoration:underline; }
.pm-sitefooter .pm-ft-rc{ font-size:11.5px; color:var(--pm-ink-3,#6E6653); opacity:.85; margin-top:10px !important; }
.pm-sitefooter .pm-ft-rc a{ font-size:11.5px; color:var(--pm-ink-3,#6E6653); text-decoration:underline; }

@media (max-width:1000px){ .pm-sitefooter .pm-ft-inner{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){
  .pm-sitefooter .pm-ft-inner{ grid-template-columns:1fr; padding-inline:22px; }
  .pm-sitefooter .pm-ft-legal-inner{ padding-inline:22px; }
  .pm-sitefooter .pm-ft-btn{ display:block; text-align:center; }
}
/* clear the sticky call bar */
@media (max-width:1024px){ .pm-sitefooter{ padding-bottom:96px; } }

/* ===== snippet 1647 : Bridge - Peers Moving 1888 design layer ===== */
/* Peers Moving 1888 - transitional design layer
   Moves typography and palette onto the client-approved direction while page
   structure stays exactly where visitors already know it. The eventual platform
   cutover is then a structural change only, never a brand change.

   Approved tokens: Playfair Display / Source Sans 3, accent #D95E00,
   link #B34E00 (5.24:1), ink #1A1A1A, warm border #E5E2DC. */

/* ---- 1. Elementor global tokens (the native lever) ----
   Elementor kit 302 declares these; remapping them restyles every widget
   that uses a global instead of a hard-coded value. */
html body .elementor-kit-302,
.elementor-kit-302.elementor-kit-302,
:root {
	--e-global-color-primary: #D95E00 !important;
	--e-global-color-accent: #D95E00 !important;
	--e-global-color-secondary: #4A4A4A !important;
	--e-global-color-text: #1A1A1A !important;
	--e-global-typography-primary-font-family: "Playfair Display" !important;
	--e-global-typography-secondary-font-family: "Playfair Display" !important;
	--e-global-typography-text-font-family: "Source Sans 3" !important;
	--e-global-typography-accent-font-family: "Source Sans 3" !important;
}

/* ---- 2. Body voice: Source Sans 3 ----
   !important is needed on the root: Konte sets the body face from the
   Customizer with a more specific rule that otherwise wins. */
html body,
body p, body li, body td, body dd, body dt, body blockquote,
body label, body input, body textarea, body select, body button,
body .elementor-widget-text-editor,
body .elementor-widget-container,
body .site-main {
	font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif !important;
}
body {
	color: #4A4A4A;
}

/* ---- 2b. Navigation ----
   The theme paints nav links in the old accent, which measures roughly
   3.2:1 on the #f0f0f1 header and fails AA for normal-size text. Ink is
   both the approved treatment and the accessible one; the accent is
   reserved for the actual call-to-action. */
html body .main-navigation a,
html body .primary-menu a,
html body .konte-menu a,
html body #site-navigation a,
html body .site-header .menu-item > a,
html body .mobile-menu a {
	color: #1A1A1A !important;
	font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif !important;
	font-weight: 600 !important;
}
html body .main-navigation a:hover,
html body .primary-menu a:hover,
html body .site-header .menu-item > a:hover,
html body .site-header .menu-item.current-menu-item > a,
html body .site-header .menu-item.current_page_item > a {
	color: #B34E00 !important;
}

/* ---- 3. Display voice: Playfair Display ----
   Tight leading. Big type needs less leading, not the theme default. */
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body .elementor-heading-title,
html body .entry-title, html body .page-title,
html body .section-title, html body .widget-title,
html body .konte-title {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	color: #1A1A1A !important;
}
html body h1, html body .elementor-heading-title h1 { line-height: 1.08 !important; }
html body h2, html body .elementor-heading-title h2 { line-height: 1.15 !important; }
html body h3, html body h4 { line-height: 1.28 !important; }
/* italic descenders in display type must not clip */
html body h1 em, html body h2 em, html body h1 i, html body h2 i {
	line-height: 1.18 !important;
	font-style: italic;
}

/* ---- 4. Accent remap ---- */
/* Card left-accents are inline styles inside Elementor widgets, so a
   stylesheet can only reach them by attribute match. */
html body [style*="#EE593D"],
html body [style*="#ee593d"] {
	border-left-color: #D95E00 !important;
}
/* Warm the cool hairline so borders match the new neutral temperature. */
html body [style*="#ececec"],
html body [style*="#ECECEC"] {
	border-color: #E5E2DC !important;
	border-left-color: #D95E00 !important;
}

/* Buttons that ride the Elementor global stay correct via section 1.
   These catch the theme's own button classes. */
html body .elementor-button-wrapper .elementor-button,
html body .konte-button,
html body .button:not(.gform_button),
html body button.btn-primary {
	background-color: #D95E00;
	border-color: #D95E00;
	font-family: "Source Sans 3", Arial, sans-serif;
	font-weight: 700;
	letter-spacing: .01em;
	border-radius: 8px;
	transition: background-color .15s ease, border-color .15s ease;
}
html body .elementor-button-wrapper .elementor-button:hover,
html body .konte-button:hover,
html body .button:not(.gform_button):hover {
	background-color: #B34E00;
	border-color: #B34E00;
}
html body .elementor-button-wrapper .elementor-button:focus-visible,
html body .konte-button:focus-visible,
html body .button:not(.gform_button):focus-visible {
	outline: 3px solid #1A1A1A;
	outline-offset: 2px;
}

/* ---- 5. Links ----
   #B34E00 (5.24:1) not #D95E00 (3.78:1): in-content links are normal size
   and must clear 4.5:1. Underline stays, never colour alone. */
/* :not([style*="background"]) is load-bearing. Without it this rule
   repainted inline pill CTAs that carry their own ground and their own
   white text, producing orange-on-orange. A link rule must never touch a
   control that paints its own background. */
html body .site-main a:not([class]):not([style*="background"]),
html body .elementor-widget-text-editor a:not([style*="background"]),
html body .town-body a:not([style*="background"]) {
	color: #B34E00 !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}
html body .site-main a:not([class]):not([style*="background"]):hover,
html body .elementor-widget-text-editor a:not([style*="background"]):hover {
	color: #8F3E00 !important;
}

/* Inline pill CTAs: move onto the new accent and guarantee their contrast.
   #B34E00 not #D95E00 because these run at 16px/700, which is below the
   18.66px-bold large-text threshold and so needs the full 4.5:1.
   White on #B34E00 is 5.24:1. */
html body a[style*="background:#EE593D"],
html body a[style*="background: #EE593D"],
html body a[style*="background:#D95E00"],
html body a[style*="background: #D95E00"] {
	background: #B34E00 !important;
	color: #ffffff !important;
	text-decoration: none !important;
}
html body a[style*="background:#EE593D"]:hover,
html body a[style*="background: #EE593D"]:hover {
	background: #8F3E00 !important;
}
html body a:focus-visible {
	outline: 3px solid #D95E00 !important;
	outline-offset: 2px;
}

/* ---- 5b. Contrast repairs found by sitewide audit ---- */
/* Site title link sat at #EE593D on the #f0f0f1 header: 3.01:1, failing. */
html body .site-title a,
html body .site-description a {
	color: #B34E00 !important;
}
/* Footer links were also #EE593D on #f0f0f1 (3.01:1) on every page. The
   main-content link rule never reached them. */
html body .site-footer a:not([style*="background"]),
html body .footer-items a:not([style*="background"]),
html body .copyright a:not([style*="background"]),
html body .site-info a:not([style*="background"]) {
	color: #B34E00 !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}
/* The Google Reviews plugin paints its rating and stars #FB8E28 (2.33:1)
   and its footnote #777 (4.48:1). Both fail; neither is brand-critical. */
html body .rpi-stars,
html body .rpi-rating,
html body [class^="rpi-"] .rpi-stars {
	color: #B34E00 !important;
}
html body [class^="rpi-"],
html body [class*=" rpi-"] {
	--rpi-muted: #4A4A4A;
}
html body [class^="rpi-"] [style*="#777"],
html body [class^="rpi-"] .rpi-powered,
html body .rpi-powered {
	color: #4A4A4A !important;
}

/* ---- 6. Warm the surfaces ---- */
html body .site-footer,
html body .site-header {
	background-color: #F6F5F2;
}

/* ---- 7. Sticky book bar picks up the new accent ---- */
html body #pm-bookbar .pm-call { background: #D95E00 !important; }
html body #pm-bookbar .pm-quote { background: #1A1A1A !important; }

/* ---- 7b. Mobile display scale ----
   At 390px the theme's 44px h1 wrapped to four lines. A four-line hero
   headline is a size error, not a copy problem. Playfair carries a
   tighter setting well, so scale down and close the leading. */
@media (max-width: 640px) {
	html body h1,
	html body .elementor-heading-title h1,
	html body .entry-title,
	html body .page-title {
		font-size: clamp(27px, 7.4vw, 33px) !important;
		line-height: 1.14 !important;
	}
	html body h2,
	html body .elementor-heading-title h2 {
		font-size: clamp(22px, 5.6vw, 27px) !important;
		line-height: 1.2 !important;
	}
}

/* ---- 8. Motion dial is low (0.2): keep transitions short and honour
   reduced-motion rather than killing feedback outright. ---- */
@media (prefers-reduced-motion: reduce) {
	html body .elementor-button-wrapper .elementor-button,
	html body .konte-button,
	html body .button {
		transition: none;
	}
}

/* ============================================================
   STRUCTURAL BRIDGE - the pieces that make the approved rebuild
   recognisable. Contrast for every pair is stated inline and was
   verified against the rendered page, not assumed.
   ============================================================ */

/* ---- A. Utility bar ---- */
html body .pm-utilitybar {
	background: #1A1A1A;
	color: #ffffff;
	font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	line-height: 1.4;
}
html body .pm-utilitybar-inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 9px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}
html body .pm-ub-left {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}
html body .pm-utilitybar a {
	color: #ffffff !important;          /* 17.4:1 on #1A1A1A */
	text-decoration: none;
}
html body .pm-utilitybar a:hover { text-decoration: underline; }
html body .pm-utilitybar a:focus-visible {
	outline: 2px solid #FFB37A;
	outline-offset: 2px;
}
html body .pm-ub-lic { color: #C9C4BE; }   /* 9.85:1 on #1A1A1A */
html body .pm-ub-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
	color: #ffffff;
}
html body .pm-ub-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: #6B7280;
	display: inline-block;
}
html body .pm-ub-status.is-open .pm-ub-dot { background: #4ADE80; }
html body .pm-ub-mail { font-weight: 600; }

/* ---- B. Header call-to-action pair ---- */
html body .pm-header-ctas {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-left: 18px;
	vertical-align: middle;
}
html body .pm-header-ctas a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	padding: 12px 18px;
	border-radius: 8px;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}
html body .pm-header-ctas .pm-cta-quote {
	color: #1A1A1A !important;          /* 15.9:1 on the #f0f0f1 header */
	background: transparent;
	border: 1.5px solid #1A1A1A;
}
html body .pm-header-ctas .pm-cta-quote:hover {
	background: #1A1A1A;
	color: #ffffff !important;
}
html body .pm-header-ctas .pm-cta-call {
	color: #ffffff !important;          /* 5.24:1 on #B34E00 */
	background: #B34E00;
	border: 1.5px solid #B34E00;
}
html body .pm-header-ctas .pm-cta-call:hover {
	background: #8F3E00;
	border-color: #8F3E00;
}
html body .pm-header-ctas a:focus-visible {
	outline: 3px solid #1A1A1A;
	outline-offset: 2px;
}

/* ---- C. Homepage trust strip ---- */
html body .pm-truststrip {
	background: #FFF4EC;
	border-top: 1px solid #E5E2DC;
	border-bottom: 1px solid #E5E2DC;
	padding: 30px 20px;
}
html body .pm-ts-inner {
	max-width: 1120px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 32px;
	align-items: center;
}
html body .pm-ts-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
html body .pm-ts-stat { display: flex; flex-direction: column; gap: 3px; }
html body .pm-ts-n {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 700;
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.05;
	color: #B34E00;                      /* 4.84:1 on #FFF4EC, large type */
}
html body .pm-ts-star { font-size: .62em; margin-left: 2px; }
html body .pm-ts-l {
	font-family: "Source Sans 3", Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: #4A4A4A;                      /* 8.19:1 on #FFF4EC */
}
html body .pm-ts-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}
html body .pm-ts-points li {
	position: relative;
	padding-left: 26px;
	font-family: "Source Sans 3", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: #1A1A1A;                      /* 16.6:1 on #FFF4EC */
}
html body .pm-ts-points li::before {
	content: "\2713";
	position: absolute;
	left: 0; top: 0;
	font-weight: 700;
	color: #B34E00;
}

/* ---- D. Structural bridge, small screens ---- */
@media (max-width: 900px) {
	html body .pm-ts-inner { grid-template-columns: 1fr; gap: 22px; }
	html body .pm-ts-stats { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 1024px) {
	html body .pm-header-ctas { display: none; }   /* sticky book bar covers this */
}
@media (max-width: 640px) {
	html body .pm-ub-lic { display: none; }
	html body .pm-utilitybar-inner { justify-content: center; padding: 8px 14px; gap: 10px; }
	html body .pm-ub-left { gap: 10px; justify-content: center; }
	html body .pm-utilitybar { font-size: 12px; }
	html body .pm-truststrip { padding: 24px 16px; }
}


/* pm-utilitybar duplicate guard
   The utility bar is emitted on wp_body_open, so the legitimate one is always a
   direct child of <body>. On /about/ a second copy renders nested inside the
   content wrapper, giving two stacked black bars. Hide any copy that is not a
   direct child of body. Delete these lines to revert. */
:not(body) > .pm-utilitybar { display: none !important; }


/* ============ DISPATCH BOARD - light rendition (appended 2026-07-30) ============
   Everything above is the previous "Peers Moving 1888" bridge, left intact because
   it carries the LAYOUT for the utility bar, header CTAs, trust strip and sticky
   book bar. This block only re-skins. TO REVERT: delete from here to the end.
   Client constraint: must not read as a dark website - paper sheet, not chalkboard.
   ============================================================================== */
:root {
  --pm-paper:#EFE9DC; --pm-paper-2:#E4DCC9; --pm-kraft:#C8A66B;
  --pm-ink:#17140F; --pm-ink-2:#4A4437; --pm-ink-3:#6E6653;
  --pm-red:#A8261F; --pm-red-dk:#7E1A15;
  --pm-display:'Staatliches','Arial Narrow',sans-serif;
  --pm-slip:'Courier Prime','Courier New',monospace;
  --pm-body:'Bitter',Georgia,'Times New Roman',serif;
  --e-global-color-primary:#A8261F !important;
  --e-global-color-accent:#A8261F !important;
  --e-global-color-secondary:#4A4437 !important;
  --e-global-color-text:#17140F !important;
  --e-global-typography-primary-font-family:'Staatliches' !important;
  --e-global-typography-secondary-font-family:'Staatliches' !important;
  --e-global-typography-text-font-family:'Bitter' !important;
  --e-global-typography-accent-font-family:'Bitter' !important;
}
html body{background:var(--pm-paper)!important;}
html body,body .site-main,body .elementor-widget-text-editor,body .elementor-widget-container{font-family:var(--pm-body)!important;color:var(--pm-ink)!important;font-size:17px!important;line-height:1.7!important;}
html body .pm-utilitybar{background:var(--pm-ink)!important;color:var(--pm-paper-2)!important;font-family:var(--pm-slip)!important;font-size:12px!important;letter-spacing:.06em!important;text-transform:uppercase;}
html body .pm-utilitybar a{color:var(--pm-paper-2)!important;}
html body .site-header,html body .header-main{background:var(--pm-paper)!important;border-bottom:2px solid var(--pm-ink)!important;box-shadow:none!important;}
html body .konte-menu a,html body #site-navigation a,html body .site-header .menu-item>a,html body .mobile-menu a{color:var(--pm-ink)!important;font-family:var(--pm-display)!important;font-weight:400!important;font-size:17px!important;letter-spacing:.04em!important;text-transform:uppercase;}
html body .site-header .menu-item.current-menu-item>a{color:var(--pm-red)!important;}
html body .entry-title,html body .page-title,html body .section-title,html body .widget-title,html body .konte-title,html body h1,html body h2,html body h3,html body .elementor-heading-title{font-family:var(--pm-display)!important;font-weight:400!important;letter-spacing:.01em!important;line-height:1.02!important;color:var(--pm-ink)!important;}
html body h1{font-size:clamp(2.4rem,6vw,4.4rem)!important;}
html body h2{font-size:clamp(1.9rem,4vw,2.8rem)!important;}
html body h3{font-size:clamp(1.3rem,2.4vw,1.7rem)!important;}
html body .entry-header,html body .page-header{background:var(--pm-paper-2)!important;border-top:3px solid var(--pm-kraft)!important;border-bottom:3px solid var(--pm-ink)!important;padding:40px 0 36px!important;}
html body .entry-header h1,html body .page-header h1,html body .entry-header .entry-title{color:var(--pm-ink)!important;}
html body .entry-header p,html body .page-header p{color:var(--pm-ink-2)!important;}
html body .konte-button,html body .button:not(.gform_button),html body button.btn-primary,html body .pm-header-ctas a,html body .elementor-button,html body .gform_button{background-color:var(--pm-red)!important;border:2px solid var(--pm-ink)!important;color:#fff!important;border-radius:0!important;font-family:var(--pm-display)!important;font-weight:400!important;letter-spacing:.05em!important;font-size:18px!important;box-shadow:4px 4px 0 var(--pm-ink)!important;min-height:54px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;transition:transform .12s ease,box-shadow .12s ease!important;}
html body .konte-button:hover,html body .button:not(.gform_button):hover,html body .elementor-button:hover,html body .gform_button:hover{transform:translate(2px,2px)!important;box-shadow:2px 2px 0 var(--pm-ink)!important;background-color:var(--pm-red-dk)!important;}
html body .elementor-widget-text-editor a:not([style*="background"]),html body .site-main a:not([class]){color:var(--pm-red)!important;text-decoration:underline!important;text-underline-offset:2px;}
html body [style*="#EE593D"],html body [style*="#D95E00"]{border-radius:0!important;}
html body .elementor-widget-html div[style*="border-left"]{border-left-color:var(--pm-red)!important;border-radius:0!important;box-shadow:4px 4px 0 rgba(23,20,15,.14)!important;}
html body .rpi-rating,html body .rpi-stars{color:var(--pm-red)!important;}
html body .rpi-powered{font-family:var(--pm-slip)!important;font-size:11px!important;}
html body .pm-truststrip{background:var(--pm-paper-2)!important;color:var(--pm-ink)!important;border-top:3px solid var(--pm-ink)!important;border-bottom:3px solid var(--pm-ink)!important;}
html body .pm-ts-n{font-family:var(--pm-display)!important;color:var(--pm-ink)!important;}
html body .pm-ts-l{font-family:var(--pm-slip)!important;color:var(--pm-ink-3)!important;letter-spacing:.12em!important;text-transform:uppercase;font-size:11px!important;}
html body #pm-bookbar a{font-family:var(--pm-display)!important;border-radius:0!important;letter-spacing:.04em!important;}
html body .gform_wrapper input[type=text],html body .gform_wrapper input[type=email],html body .gform_wrapper input[type=tel],html body .gform_wrapper select,html body .gform_wrapper textarea{border-radius:0!important;border:2px solid var(--pm-ink-3)!important;font-family:var(--pm-body)!important;min-height:50px!important;background:#fff!important;}
html body .gfield_label{font-family:var(--pm-slip)!important;text-transform:uppercase!important;letter-spacing:.12em!important;font-size:12px!important;color:var(--pm-ink-2)!important;}


/* ---- Dispatch Board: corrections (measured, not assumed) ---- */

/* 1. Body face. The bridge block above sets "body p, body li, ..." with
      !important, which beats inheritance from body. Match its selector list
      so the later rule wins. */
html body, body p, body li, body td, body dd, body dt,
body blockquote, body label, body input, body select, body textarea {
  font-family: var(--pm-body) !important;
}

/* 2. Mobile menu button. Konte ships a 20x24px control with 2px hairlines,
      well under a 54px touch target. Bars stay CSS-drawn (never a glyph) and
      the transform is left alone so Konte's open/close animation still runs. */
html body .mobile-menu-toggle.hamburger-menu {
  width: 52px !important; height: 52px !important;
  padding: 0 !important; border: 2px solid var(--pm-ink) !important;
  background: var(--pm-paper) !important; border-radius: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: 3px 3px 0 var(--pm-ink) !important;
}
html body .mobile-menu-toggle.hamburger-menu:active { box-shadow: 1px 1px 0 var(--pm-ink) !important; transform: translate(2px,2px) !important; }
html body .hamburger-box { width: 24px !important; height: 16px !important; }
html body .hamburger-inner,
html body .hamburger-inner::before,
html body .hamburger-inner::after {
  background-color: var(--pm-ink) !important;
  height: 3px !important; width: 24px !important; border-radius: 0 !important;
}
html body .mobile-menu-hamburger { display: flex !important; align-items: center !important; }

/* 3. Sticky contact bar: the world's colours, not the old orange. */
html body #pm-bookbar { background: var(--pm-ink) !important; border-top: 3px solid var(--pm-kraft) !important; }
html body #pm-bookbar a { border-radius: 0 !important; min-height: 54px !important; font-size: 17px !important; }
html body #pm-bookbar a:first-child { background: var(--pm-red) !important; color: #fff !important; }
html body #pm-bookbar .pm-quote { background: var(--pm-paper) !important; color: var(--pm-ink) !important; }

/* 4. Off-canvas mobile menu panel. */
html body .mobile-menu, html body .off-canvas-panel, html body #mobile-menu {
  background: var(--pm-paper) !important;
}
html body .mobile-menu a { font-size: 19px !important; padding-block: 14px !important; }


/* ---- PM-MENU-V2: off-canvas mobile menu ----
   Konte's panel was never touched by the bridge: links in the theme's original
   #EE593D, 24px tall, no padding, no dividers, on a WHITE inner .panel (the
   white was on .mobile-menu-panel .panel, not the outer wrapper). */
html body .mobile-menu-panel.offscreen-panel { border-right: 3px solid var(--pm-ink) !important; }
html body .mobile-menu-panel .panel { background: var(--pm-paper) !important; }
html body .mobile-menu-panel .backdrop { background: rgba(23,20,15,.42) !important; }
html body .mobile-menu__nav { padding: 26px 0 0 !important; }
html body .mobile-menu__nav ul.menu { margin: 0 !important; padding: 0 !important; list-style: none !important; }
html body .mobile-menu__nav ul.menu > li { border-bottom: 1px solid rgba(23,20,15,.16) !important; margin: 0 !important; }
html body .mobile-menu__nav ul.menu > li:first-child { border-top: 1px solid rgba(23,20,15,.16) !important; }
html body .mobile-menu__nav ul.menu > li > a {
  display: flex !important; align-items: center !important;
  min-height: 58px !important; padding: 0 22px !important;
  font-family: var(--pm-display) !important; font-weight: 400 !important;
  font-size: 21px !important; letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--pm-ink) !important; text-decoration: none !important;
}
html body .mobile-menu__nav ul.menu > li > a:hover,
html body .mobile-menu__nav ul.menu > li.current-menu-item > a { color: var(--pm-red) !important; }
html body .mobile-menu__nav ul.menu ul.sub-menu > li > a {
  min-height: 50px !important; padding-left: 40px !important;
  font-size: 17px !important; color: var(--pm-ink-2) !important;
}


/* ---- PM-GF-V1: Gravity Forms ----
   The form wrapper rendered pure white against the paper ground - the "giant
   white spot". GF 3.x ships its own theme framework, so the wrapper and the
   submit button need their own selectors; .gform_button alone does not match. */
html body .gform-theme, html body .gform-theme--foundation,
html body .gform-theme--framework, html body .gform_wrapper form,
html body .gform_wrapper .gform_body, html body .gform_wrapper .gform-body { background: transparent !important; }
html body .gform_wrapper {
  background: var(--pm-paper-2) !important;
  border: 2px solid var(--pm-ink) !important;
  box-shadow: 6px 6px 0 var(--pm-ink) !important;
  border-radius: 0 !important; padding: 28px !important;
}
html body .gform_wrapper .gform_title { font-family: var(--pm-display) !important; color: var(--pm-ink) !important; }
html body .gform_wrapper input:not([type=submit]),
html body .gform_wrapper select, html body .gform_wrapper textarea { background: #fff !important; }
html body .gform_wrapper .gform_footer button,
html body .gform_wrapper .gform_footer input[type=submit],
html body .gform_wrapper button[type=submit],
html body .gform-theme button[type=submit] {
  background-color: var(--pm-red) !important; background-image: none !important;
  border: 2px solid var(--pm-ink) !important; color: #fff !important;
  border-radius: 0 !important; box-shadow: 4px 4px 0 var(--pm-ink) !important;
  font-family: var(--pm-display) !important; font-weight: 400 !important;
  font-size: 19px !important; letter-spacing: .05em !important;
  min-height: 56px !important; padding: 0 28px !important;
}


/* ---- PM-NOWHITE-V1 ----
   A white band was reported under the hero image at wide viewports. The hero is
   a CSS background on .entry-thumbnail (background-size: cover, transparent own
   background), so any moment the bitmap is not painted - lazyload frame, repaint
   during scroll, decode gap - whatever is behind shows through. Nothing in the
   ancestor chain is white, but filling these with paper means a gap can never
   read as a white slab. */
html body .site, html body .site-content, html body .site-main,
html body .entry-thumbnail, html body .entry-header, html body .page-header,
html body .content-area, html body #content, html body #primary {
  background-color: var(--pm-paper) !important;
}
html body .entry-header, html body .page-header { background-color: var(--pm-paper-2) !important; }
html body .entry-thumbnail { background-color: var(--pm-paper-2) !important; }


/* ---- PM-NEARWHITE-V1 ----
   The reported "white spot" was never pure white, which is why a scan for
   rgb(255,255,255) missed it three times. Three near-white sources:
     1. inline background-color:#f3f3f3 on a pasted CTA block in an Elementor
        HTML widget ("Get a Free, No-Pressure Quote Today")
     2. .site-footer.custom = #f0f0f1, from Kirki footer_background_color
     3. an earlier bridge rule painting header+footer #F6F5F2
   All three read as a white slab against the #EFE9DC paper ground. */
html body [style*="#f3f3f3"], html body [style*="#F3F3F3"],
html body [style*="#f0f0f1"], html body [style*="#F0F0F1"],
html body [style*="#f6f5f2"], html body [style*="#F6F5F2"],
html body [style*="#fff"], html body [style*="#FFF"],
html body [style*="rgb(255, 255, 255)"] {
  background-color: var(--pm-paper-2) !important;
  border-radius: 0 !important;
}
html body input[style*="#fff"], html body textarea[style*="#fff"],
html body select[style*="#fff"] { background-color: #fff !important; }
html body .site-footer, html body .site-footer.custom, html body footer.site-footer {
  background-color: var(--pm-paper-2) !important;
  border-top: 3px solid var(--pm-ink) !important;
}
html body .site-header, html body .header-main, html body .header-mobile {
  background-color: var(--pm-paper) !important;
}


/* ---- PM-NEARWHITE-V2: the last two off-palette panels ---- */
html body .sub-menu, html body .menu .sub-menu, html body .konte-menu .sub-menu {
  background-color: var(--pm-paper) !important;
  border: 2px solid var(--pm-ink) !important; border-radius: 0 !important;
  box-shadow: 4px 4px 0 rgba(23,20,15,.18) !important;
}
html body .sub-menu a { color: var(--pm-ink) !important; }
html body .sub-menu a:hover { color: var(--pm-red) !important; }
html body .grw-review-inner, html body .grw-backgn,
html body [class*="grw-review"], html body .rpi-flx.grw-review-inner {
  background-color: var(--pm-paper-2) !important;
  border: 2px solid var(--pm-ink) !important; border-radius: 0 !important;
}


/* ---- PM-HEADSPACE-V1 ----
   Measured on the homepage: .entry-header was 1313px tall before a single word
   of content - .page-titles carrying 65px/70px padding for two lines of text,
   and .entry-thumbnail locked to 800px by Kirki page_header_height. Content
   started at 1415px. That is the "white space". Tightened to 764px; the photo
   now scales with the viewport instead of a fixed 800px band. Applies to every
   page that uses the Konte page header, not just the homepage. */
html body .entry-header, html body .page-header { padding-top: 0 !important; padding-bottom: 0 !important; }
html body .page-titles {
  padding-top: clamp(28px, 3.5vw, 52px) !important;
  padding-bottom: clamp(28px, 3.5vw, 52px) !important;
}
html body .entry-thumbnail { height: clamp(260px, 34vh, 440px) !important; min-height: 0 !important; }
@media (max-width: 782px) {
  html body .entry-thumbnail { height: clamp(200px, 28vh, 300px) !important; }
  html body .page-titles { padding-top: 24px !important; padding-bottom: 24px !important; }
}


/* ---- PM-TONE-V1 ----
   Konte pulls .site-content up over .entry-header, so giving the header a
   different paper tone than the body puts a visible seam across the overlap.
   One tone for the whole shell; section contrast comes from rules and the
   .section--alt bands instead. */
html body .site, html body .site-content, html body .site-main,
html body .entry-content, html body .entry-header, html body .page-header,
html body .entry-thumbnail { background-color: var(--pm-paper) !important; }


/* ---- PM-HIDEHERO-V1 ----
   The Konte featured-image band on the front page renders a white rectangle
   across its lower-left on wide viewports (reported at ~1999px; not reproducible
   at 2392px, which is why inspection kept coming back clean). Page Header Content
   was set to "Do not show" in Konte's Display Settings and saved, but the front
   page template still emits the band, so it is removed here instead.
   The same fleet photo still appears further down the page in the history
   section, so nothing is lost. To restore: delete this block. */
html body.home .entry-thumbnail { display: none !important; }
html body.home .entry-header { padding-bottom: clamp(20px, 3vw, 40px) !important; }


/* ---- PM-BRAND-ORANGE-V1 ----
   CORRECTION. I replaced the brand orange with an oxblood (#A8261F) to win a
   contrast argument. That was wrong: brand colours are proposed, never changed.
   Sampled from the logo (2013/10/82.2.gif.png, 250x144) the dominant brand
   values are #E45438 / #EC5838 - i.e. the original #EE593D. Restored.
   Contrast handled honestly instead of by recolouring the brand:
     - #EE593D carries white text at 3.5:1, which is AA for large/bold only, so
       it is used for button and badge FILLS where the label is large display type.
     - Small text and in-content links use #C0401E, the same hue darkened to
       ~5.2:1 on paper, so nothing ships below AA. */
:root {
  --pm-red: #EE593D !important;
  --pm-red-dk: #C0401E !important;
  --e-global-color-primary: #EE593D !important;
  --e-global-color-accent: #EE593D !important;
}
html body .elementor-widget-text-editor a:not([style*="background"]),
html body .site-main a:not([class]),
html body .town-body a { color: #C0401E !important; }
html body .konte-button, html body .button:not(.gform_button),
html body .pm-header-ctas a, html body .elementor-button,
html body .gform_wrapper .gform_footer button,
html body .gform_wrapper button[type="submit"],
html body #pm-bookbar a:first-child {
  background-color: #EE593D !important;
  font-size: 19px !important;
}
html body .rpi-rating, html body .rpi-stars, html body .stencil { color: #C0401E !important; }
html body .site-header .menu-item.current-menu-item > a { color: #C0401E !important; }


/* ---- PM-GRID-V1: one measure ----
   Measured at 1426px the page used FOUR container widths with four different
   left edges: header full-bleed (0), content .container 1170 (128),
   Elementor .elementor-container 1140 (143), utility bar 1120 (153). Nothing
   lined up vertically, which is why the page reads ragged. One shell for all.
   Full-bleed BACKGROUNDS are kept; only their inner content aligns. */
:root { --pm-shell: 1280px; }
html body .pm-utilitybar-inner,
html body .site-header .konte-container,
html body .site-header .konte-container-fluid,
html body .header-main .konte-container,
html body .header-main .konte-container-fluid,
html body .header-mobile .konte-container,
html body .header-mobile .konte-container-fluid,
html body .elementor-section-boxed > .elementor-container,
html body .container,
html body .pm-truststrip .pm-ts-inner,
html body .site-footer .konte-container {
  max-width: var(--pm-shell) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(18px, 3vw, 36px) !important;
  padding-right: clamp(18px, 3vw, 36px) !important;
  box-sizing: border-box !important;
}
/* the hero figure and page titles sit inside .container, so they inherit it */
html body .pm-hero-photo { max-width: none !important; }


/* ---- PM-GRID-V2: correction to PM-GRID-V1 ----
   V1 padded every container in the chain, and because they nest
   (.container > .elementor-container > figure) the padding compounded and each
   level got narrower: 1280 / 1098 / 1006. Only the OUTERMOST element in each
   chain carries the shell width and the gutter; everything inside goes 100%.
   max-width alone also could not widen .container, which sets width:1170 -
   so width is set explicitly. */
html body .container,
html body .pm-utilitybar-inner,
html body .site-header .konte-container,
html body .site-header .konte-container-fluid,
html body .header-main .konte-container,
html body .header-main .konte-container-fluid,
html body .site-footer .konte-container {
  width: 100% !important;
  max-width: var(--pm-shell) !important;
  margin-left: auto !important; margin-right: auto !important;
  padding-left: clamp(18px, 3vw, 36px) !important;
  padding-right: clamp(18px, 3vw, 36px) !important;
  box-sizing: border-box !important;
}
/* nested: inherit the shell, never add another gutter */
html body .elementor-section-boxed > .elementor-container,
html body .elementor-container,
html body .pm-truststrip .pm-ts-inner,
html body .pm-hero-photo,
html body .entry-content > .elementor {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important; padding-right: 0 !important;
  margin-left: 0 !important; margin-right: 0 !important;
}


/* ---- PM-A11Y-V1 ----
   Audit (admin bar excluded) found the utility bar at 12px with 14px-tall tap
   targets. This audience skews older - a large share are seniors or adult
   children arranging a parent's move - so the fine print gets a floor and its
   links get a real hit area. Mobile keeps 12px where horizontal space is tight. */
html body .pm-utilitybar { font-size: 13px !important; }
html body .pm-utilitybar a,
html body .pm-ub-mail {
  display: inline-flex !important; align-items: center !important;
  min-height: 30px !important;
}
@media (max-width: 640px) {
  html body .pm-utilitybar { font-size: 12px !important; }
  html body .pm-utilitybar a, html body .pm-ub-mail { min-height: 36px !important; }
}


/* ---- PM-UTILBAR-MOBILE-V2 ----
   On phones the utility bar wrapped: address + status on line one, then the
   email centred on its own line underneath, which read as tacked-on. The email
   is hidden below 900px - it already appears in the footer and the sticky bar
   carries Call / Get Free Quote, so nothing is lost. Address and open/closed
   status stay, since those are the two things worth showing on a phone. */
@media (max-width: 900px) {
  html body .pm-ub-mail { display: none !important; }
  html body .pm-utilitybar-inner { justify-content: center !important; flex-wrap: nowrap !important; }
  html body .pm-ub-left { justify-content: center !important; flex-wrap: nowrap !important; gap: 12px !important; }
  html body .pm-utilitybar { padding-block: 2px !important; }
}


/* ---- PM-CONTRAST-FIX-V1 ----
   REGRESSION I CAUSED. PM-NEARWHITE-V1 used [style*="#fff"] to repaint pale
   panels. That selector also matched elements whose inline style only sets
   color:#fff - including the year chips on the heritage photo tiles - so it
   painted a paper background behind white text: 1.3:1, unreadable.
   Scope the repaint to actual background declarations, and give the photo
   tiles a real scrim so white captions read on any image. */
html body [style*="color:#fff"]:not([style*="background"]),
html body [style*="color:#FFF"]:not([style*="background"]),
html body [style*="color: #fff"]:not([style*="background"]) {
  background-color: transparent !important;
}
/* dark scrim behind the caption block on each heritage tile */
html body a[style*="overflow:hidden"][style*="position:relative"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  background: linear-gradient(to top, rgba(23,20,15,.92) 0%, rgba(23,20,15,.55) 45%, rgba(23,20,15,0) 100%);
  pointer-events: none;
  z-index: 1;
}
html body a[style*="overflow:hidden"][style*="position:relative"] > span {
  z-index: 2 !important;
}
/* the year chip: solid ink, white type - 17:1 rather than 1.3:1 */
html body a[style*="overflow:hidden"] span[style*="font-size:22px"] {
  background: var(--pm-ink) !important;
  color: #fff !important;
  padding: 3px 10px !important;
  font-family: var(--pm-display) !important;
  letter-spacing: .04em !important;
}


/* ---- PM-MOBILE-SUBMENU-V1 ----
   PM-NEARWHITE-V2 gave .sub-menu a 2px border + offset shadow. That was meant
   for the DESKTOP dropdown, but the same class is used by the mobile off-canvas
   submenu, so on a phone the child items rendered as a floating black box
   inside the panel. Mobile submenus are plain indented rows.
   Their type also fell back to Bitter lowercase while the parents are
   Staatliches caps - two type systems in one menu. Unified. */
html body .mobile-menu-panel .sub-menu,
html body .mobile-menu__nav .sub-menu {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  position: static !important;
}
html body .mobile-menu__nav .sub-menu > li {
  border-top: 1px solid rgba(23,20,15,.12) !important;
  border-bottom: 0 !important;
  margin: 0 !important;
}
html body .mobile-menu__nav .sub-menu > li > a {
  font-family: var(--pm-display) !important;
  text-transform: uppercase !important;
  font-size: 17px !important;
  letter-spacing: .04em !important;
  font-weight: 400 !important;
  color: var(--pm-ink-2) !important;
  padding: 0 22px 0 44px !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
}
html body .mobile-menu__nav .sub-menu > li > a:hover { color: var(--pm-red) !important; }
/* dividers span the panel, not an inset box */
html body .mobile-menu__nav ul.menu,
html body .mobile-menu__nav ul.menu > li { margin: 0 !important; }

/* ---- PM-TITLEBAND-V1 ----
   Konte's .entry-header, .entry-thumbnail and .page-titles are gone: every page
   now uses Elementor's full-width template, and PM-PAGESHELL-V1 re-emits the
   title into the content flow instead. Those three wrappers were the source of
   the 1313px dead zone, the white rectangle at wide viewports, and three of the
   four different left edges, so the rules above that fought them are now inert
   on pages - they still apply to the three guides, which are posts.

   The title now sits in the same column as the body copy on every page. Top
   space is put on the band rather than on .pm-page so that builder pages which
   already open on their own H1 keep the spacing their sections define, instead
   of being pushed down twice. */
html body .pm-titleband {
  padding-top: clamp(40px, 4.6vw, 76px);
  margin: 0 0 clamp(24px, 2.8vw, 40px);
}
html body .pm-titleband .entry-title { margin: 0; }
html body .pm-page { padding-bottom: clamp(48px, 6vw, 96px); }

/* One short brand rule under the title: the single piece of the old header band
   worth keeping, and the signature that makes 58 differently-built pages read as
   one site. Decorative only, so it carries no contrast requirement. */
html body .pm-titleband::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  background: var(--pm-red);
  margin-top: clamp(16px, 1.8vw, 24px);
}

/* Breadcrumb slot. Yoast breadcrumbs are currently switched off site-wide, so
   this renders nothing today; it is here so turning them on needs no CSS. */
html body .pm-crumb {
  font-family: var(--pm-slip) !important;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pm-ink-2);
  margin: 0 0 16px;
}
html body .pm-crumb a {
  color: var(--pm-ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--pm-kraft);
}
html body .pm-crumb a:hover { color: var(--pm-red-dk); }

/* The three guides are posts. Elementor registers its full-width template for
   the page post type only, so a post keeps Konte's .entry-header no matter what
   template slug it carries - setting it there produced a second H1. They keep
   the theme header; it is stripped back here to read identically to the band. */
html body.single-post .entry-header {
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  padding: clamp(40px, 4.6vw, 76px) 0 0 !important;
  margin-bottom: clamp(24px, 2.8vw, 40px) !important;
}
html body.single-post .entry-header::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  background: var(--pm-red);
  margin-top: clamp(16px, 1.8vw, 24px);
}

/* ---- PM-UNIFY-V1 ----
   Two edges were still out of line after the template rollout, measured at 390px
   and 1440px across eight pages.

   1. Elementor gives every populated column 10px of horizontal padding, so on
      builder pages the body copy sat 10px to the right of the H1, and 30px where
      columns nest. Zeroed on full-width columns only: multi-column rows keep it,
      because that padding is what holds them apart.

   2. The three guides are posts, so they keep Konte's header. On /packing-tips/
      that put 649px of banner and featured image above the first line of copy -
      the same dead zone the template rollout removed everywhere else. The
      featured image is dropped there, as it already is on all 58 pages, so the
      guides open on their title like the rest of the site. */
html body .elementor-column.elementor-col-100 > .elementor-widget-wrap.elementor-element-populated {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html body.single-post .entry-thumbnail { display: none !important; }

/* ---- PM-GUIDES-V1 ----
   Finishing the three guides, which are posts and so keep Konte's header.

   The brand rule was hung on .entry-header, but that element is full-bleed on a
   post, so the rule started at x=0 while the title started at 116. Moved onto
   the title itself, which sits inside the container.

   Their Elementor documents were also built to a 750px column while the rest of
   the site runs the full 1208px shell, leaving the copy floating 222px to the
   right of its own H1. Scoped to .single-post so the 58 pages are untouched.

   "Comments Off" is not information a reader needs. The publish date stays. */
html body.single-post .entry-header::after { content: none !important; }
html body.single-post .entry-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  background: var(--pm-red);
  margin-top: clamp(16px, 1.8vw, 24px);
}
html body.single-post .entry-content .elementor-section > .elementor-container {
  max-width: 100% !important;
  width: 100% !important;
}
html body.single-post .entry-content .elementor-element { max-width: 100% !important; }
html body.single-post .comments-link { display: none !important; }

/* ---- PM-GUIDES-V2 ----
   Konte lays a single post out in a 750px column, centred. That measure is worth
   keeping - 750px of 17px Bitter is about 75 characters a line, which is right
   for a long guide, where the 1208px shell would run past 130 - but centring it
   put its left edge 222px inside the H1 above it. Left-aligned instead: same
   left edge as every other page, without stretching the line length.

   The stacked margins under the title (40px from the header, 40px again from the
   content) left a 108px hole between the date and the first line. One of them is
   enough. */
html body.single-post .site-main > article,
html body.single-post article.hentry {
  margin-left: 0 !important;
  margin-right: auto !important;
}
html body.single-post .entry-content { margin-top: 0 !important; }

/* ---- PM-GUIDES-V3 ----
   The centring is on #primary.content-area, not on the article: Konte gives it
   max-width 750px and auto side margins, so it sat 229px in from the container
   while the title above it started at the container edge. Keeping the 750px
   measure and dropping only the left auto-margin puts the guide's copy on the
   same left edge as every other page on the site. */
html body.single-post #primary.content-area {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ---- PM-CONTRAST-V2 ----
   Every accent text colour here was checked against #FFFFFF, but the page
   background is #EFE9DC and form panels are #E4DCC9. Re-measured on the real
   backgrounds across seven pages: in-content links 4.33:1 (#B34E00) and 4.35:1
   (#C0401E), the form's "(Required)" marker 3.85:1, the current nav item 4.35:1,
   and the header phone CTA 3.42:1 - white on brand orange, because a later rule
   repainted that control's own darker fill and left the white label behind.

   --pm-accent-text is the accent for anything that has to clear 4.5:1 as text.
   The brand orange is NOT changed: it still carries every fill, badge and rule.
   Only text colours move, and only where they were failing. */
html body {
  --pm-accent-text: #8F3E00;
  --pm-accent-text-hover: #6F3000;
}
html body .elementor-widget-text-editor a:not([style*="background"]),
html body .site-main a:not([class]),
html body .entry-content a:not([class]):not([style*="background"]),
html body .town-body a,
html body .site-footer a,
html body .rpi-rating,
html body .rpi-stars,
html body .gform_wrapper .gfield_required,
html body .site-header .menu-item.current-menu-item > a {
  color: var(--pm-accent-text) !important;
}
html body .elementor-widget-text-editor a:not([style*="background"]):hover,
html body .site-main a:not([class]):hover,
html body .entry-content a:not([class]):hover,
html body .town-body a:hover,
html body .site-footer a:hover {
  color: var(--pm-accent-text-hover) !important;
}

/* The phone CTA keeps the brand orange fill it now has; only the label moves,
   to ink, which measures 5.2:1 on that orange. */
html body .pm-header-ctas .pm-cta-call,
html body .pm-header-ctas .pm-cta-call * {
  color: var(--pm-ink) !important;
}

/* ---- PM-CONTRAST-V3 ----
   Controls paint their own background, so content-link colour must never reach
   them. The accent rule - and the #B34E00 and #C0401E rules before it - matched
   Gutenberg buttons through a:not([style*="background"]) and repainted a black
   label on a vivid-orange fill down to 2.55:1. The button's own palette class
   is restored at higher specificity rather than the fill being changed. */
html body .entry-content a.wp-block-button__link.has-black-color,
html body .entry-content a.wp-block-button__link.has-black-color strong,
html body .entry-content a.wp-element-button.has-black-color,
html body .entry-content a.wp-element-button.has-black-color strong {
  color: #000000 !important;
}

/* The rest of the accent text that was still measured against white rather than
   paper: site title 4.33:1, footer copyright links 3.84:1 at 12px, and the
   Google rating 4.33:1. */
html body .site-branding .site-title a,
html body .copyright a,
html body [class^="rpi-"] .rpi-stars,
html body span.rpi-stars.rpi-stars,
html body [class^="rpi-"] .rpi-rating,
html body .entry-content a:not([class]) * {
  color: var(--pm-accent-text) !important;
}

/* Greys inherited from plugins and the theme, all of them chosen against white
   and sitting on paper: "powered by Google" 3.7:1, the trust-strip labels
   4.17:1 at 11px, the post date 2.97:1. --pm-ink-2 measures 7.3:1 on the
   darker of the two panels. */
html body .wp-google-powered,
html body .wp-google-powered *,
html body .pm-ts-l,
html body .entry-meta .entry-date,
html body .entry-meta .posted-on {
  color: var(--pm-ink-2) !important;
}

/* ---- PM-CONTRAST-V4 ----
   Three stragglers, all of them losing a specificity argument rather than a
   colour one, so these selectors are weighted to win rather than the values
   changed again.

   - The reviews plugin scopes its own #777 more tightly than a single class, so
     the doubled class outranks it. Real 16px text, 3.7:1 on paper.
   - The footer copyright links were already claimed by an earlier rule carrying
     a :not() attribute selector, which outranked the plain one. 3.84:1 at 12px.
   - The footer widget links sat under the same earlier :not() rule as the
     copyright ones. Scoped to .footer-items so it cannot reach a control that
     paints its own background: a first attempt at a broad .entry-content rule
     repainted the blue "review us on" button of the reviews plugin down to
     1.45:1, the same trap in a different costume. In-content links keep the
     narrow a:not([class]) rule from V2. */
html body div.wp-google-powered.wp-google-powered,
html body div.wp-google-powered.wp-google-powered * {
  color: #4A4437 !important;
}
html body .copyright a:not([style*="background"]):not([hidden]),
html body .footer-items .copyright a:not([style*="background"]) {
  color: #8F3E00 !important;
}
html body .footer-items a:not([style*="background"]):not([hidden]),
html body .footer-items .custom-text a:not([style*="background"]) {
  color: #8F3E00 !important;
}

/* ---- PM-CONTRAST-V5 ----
   The last one: a hand-authored inline colour in the homepage copy,
   <strong style="color:#C0401E">Dover</strong>, at 4.35:1 on paper. Only the
   exact authored value is targeted, so nothing else inherits this. */
html body .entry-content [style*="color:#C0401E"],
html body .entry-content [style*="color: #C0401E"],
html body .entry-content [style*="color:#c0401e"] {
  color: #8F3E00 !important;
}

/* ---- PM-CONTRAST-V6 ----
   The sticky mobile call bar was still white on the brand orange: 3.42:1, which
   clears AA only on the large-text allowance (19px at weight 800) and left the
   most-tapped control on the site as the weakest text on it, while the header
   CTAs had already moved to ink. Same treatment, same reason - the orange fill
   is untouched, only the label moves. Measured 5.4:1. */
html body #pm-bookbar a.pm-call,
html body #pm-bookbar a.pm-call *,
html body #pm-bookbar a[href^="tel:"],
html body #pm-bookbar a[href^="tel:"] * {
  color: var(--pm-ink) !important;
}


/* The three icon shapes, authored once as tokens so the header CTA, the sticky
   bar, the rating and the proof list all draw from the same set. */
html body {
  --pm-ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  --pm-ico-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2.6l2.82 6.09 6.68.7-4.98 4.5 1.38 6.55L12 17.1l-5.9 3.34 1.38-6.55-4.98-4.5 6.68-.7z'/%3E%3C/svg%3E");
  --pm-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5L9.2 17.3 4 12.1'/%3E%3C/svg%3E");
}

/* ---- PM-POLISH-V1 ----
   Homepage polish pass, measured at 1440px and 390px. Refinement only: the
   Dispatch Board world, the copy and the behaviour are unchanged.

   Items 1-3 are typographic and live in the shared layer rather than behind a
   .home selector, because a homepage-only measure or heading rhythm would be
   exactly the one-off drift this pass exists to remove. */

/* 1. Measure. Body copy ran the full 1208px shell - 111 characters per line,
      where comfortable reading is 65-75. Prose is capped; layout (grids, the
      form, the trust strip, the reviews widget, images, columns) is untouched. */
html body .elementor-widget-text-editor p,
html body .elementor-widget-text-editor ul,
html body .elementor-widget-text-editor ol,
html body .town-body p,
html body .town-body ul {
  max-width: 72ch;
}
html body [style*="text-align:center"] p,
html body [style*="text-align: center"] p {
  margin-left: auto;
  margin-right: auto;
}

/* 2. Heading rhythm. A heading belongs to what follows it, so it wants more air
      above than below; both margins were an identical 37.184px, which left the
      page reading as one undifferentiated column. */
html body .entry-content h2 { margin-top: 2.1em; margin-bottom: .55em; }
html body .entry-content h3 { margin-top: 1.7em; margin-bottom: .45em; }
/* No :first-child reset: every heading here is the first child of its own
   widget wrapper, so that rule zeroed the top margin on all of them and
   cancelled the rhythm it was meant to protect. */

/* 3. Balanced headings. The H1 was breaking with "1888" stranded on line two. */
html body h1,
html body h2,
html body h3,
html body .pm-titleband .entry-title {
  text-wrap: balance;
}

/* 4. The quote form submit is styled in the Gravity Forms brand layer
      (snippet 1596), which loads after this one and owns that control. Fixing
      it here would have been a duplicate that silently lost. */

/* 5. Icons. Three Unicode glyphs were standing in for an icon set: a dingbat
      telephone in the header CTA and the sticky bar, a dingbat star in the
      rating, a check dingbat in the proof list. Redrawn as authored SVG at one
      stroke weight and masked, so each takes currentColor and inherits its own
      contrast. The glyph stays in the markup and is clipped out of view. */
html body .pm-cta-icon,
html body .pm-ts-star {
  display: inline-block;
  overflow: hidden;
  text-indent: -999px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
html body .pm-cta-icon {
  width: 1.02em; height: 1.02em;
  vertical-align: -.13em;
  margin-right: .5em;
  -webkit-mask-image: var(--pm-ico-phone); mask-image: var(--pm-ico-phone);
}
html body .pm-ts-star {
  width: 1em; height: 1em;
  vertical-align: -.08em;
  margin-left: .18em;
  -webkit-mask-image: var(--pm-ico-star); mask-image: var(--pm-ico-star);
}
html body .pm-ts-points li::before {
  content: "" !important;
  width: 1.05em; height: 1.05em;
  top: .28em !important;
  background-color: var(--pm-accent-text) !important;
  color: transparent !important;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image: var(--pm-ico-check); mask-image: var(--pm-ico-check);
}

/* 6. The hero photo carried a 1.5px rule where every other edge is 2px ink. */
html body .pm-hero-photo img { border-width: 2px !important; }

/* 7. Keyboard focus was inheriting the browser default, which all but vanishes
      on paper. One visible ring, in the ink the rest of the system uses. */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body .gform_button:focus-visible,
html body .nav-toggle:focus-visible {
  outline: 3px solid var(--pm-ink) !important;
  outline-offset: 3px !important;
}

/* ---- PM-POLISH-V2 ----
   The 72ch cap in V1 only reached prose sitting inside an Elementor text
   widget. The town, specialty and state-to-state pages keep their copy as
   direct children of .entry-content and were still running 111 characters a
   line - about 40 of the 58 pages, i.e. most of the site.

   Scoped to direct children so that nothing inside a card, grid, column or
   builder section is touched: those are layout, and layout keeps its width. */
html body .entry-content p,
html body .entry-content li,
html body .entry-content dd,
html body .entry-content blockquote {
  max-width: 72ch;
}
/* Layout keeps its own width: a grid cell or card is already narrower than the
   cap, so this only matters where a container is deliberately wide. */
html body .entry-content [class*="grid"] p,
html body .entry-content [class*="card"] p,
html body .entry-content .pm-ts-points li,
html body .entry-content table p {
  max-width: none;
}
/* Centred copy stays centred once it is capped. */
html body .entry-content p[style*="text-align:center"],
html body .entry-content p[style*="text-align: center"],
html body .entry-content .has-text-align-center,
html body .entry-content [style*="text-align:center"] > p,
html body .entry-content [style*="text-align: center"] > p {
  margin-left: auto;
  margin-right: auto;
}

/* ---- PM-CONTRAST-V7 ----
   The accent rule for in-content links also matches .site-main a:not([class]),
   which carries no background guard - so it repainted an inline pill CTA on
   /piano-moving/, white label on a #B34E00 fill, down to 1.4:1. The pill paints
   its own ground, so its label is restored rather than its fill changed.

   Scoped to the four dark fills actually used on this site: a light inline
   background can never be handed white text by this rule. */
html body .site-main a[style*="background: #B34E00"],
html body .entry-content a[style*="background: #B34E00"],
html body .site-main a[style*="background:#B34E00"],
html body .entry-content a[style*="background:#B34E00"],
html body .site-main a[style*="background: #b34e00"],
html body .entry-content a[style*="background: #b34e00"],
html body .site-main a[style*="background:#b34e00"],
html body .entry-content a[style*="background:#b34e00"],
html body .site-main a[style*="background: #EE593D"],
html body .entry-content a[style*="background: #EE593D"],
html body .site-main a[style*="background:#EE593D"],
html body .entry-content a[style*="background:#EE593D"],
html body .site-main a[style*="background: #ee593d"],
html body .entry-content a[style*="background: #ee593d"],
html body .site-main a[style*="background:#ee593d"],
html body .entry-content a[style*="background:#ee593d"],
html body .site-main a[style*="background: #D95E00"],
html body .entry-content a[style*="background: #D95E00"],
html body .site-main a[style*="background:#D95E00"],
html body .entry-content a[style*="background:#D95E00"],
html body .site-main a[style*="background: #d95e00"],
html body .entry-content a[style*="background: #d95e00"],
html body .site-main a[style*="background:#d95e00"],
html body .entry-content a[style*="background:#d95e00"],
html body .site-main a[style*="background: #8F3E00"],
html body .entry-content a[style*="background: #8F3E00"],
html body .site-main a[style*="background:#8F3E00"],
html body .entry-content a[style*="background:#8F3E00"] {
  color: #ffffff !important;
}

/* ---- PM-CTA-HOVER-V1 ----
   The phone CTA now inverts on hover exactly like its Free Quote sibling: ink
   fill, white label. Plain white on the brand orange would have been 3.44:1 at
   19px/400 - a fail - so the fill inverts with the text rather than the label
   changing on its own. White on ink measures about 17:1.

   background-color is set on the anchor only, never on its children: the phone
   icon is a mask painted with currentColor, so giving the span a background
   would erase the glyph. */
html body .pm-header-ctas .pm-cta-call:hover,
html body .pm-header-ctas .pm-cta-call:focus-visible {
  background-color: var(--pm-ink) !important;
  border-color: var(--pm-ink) !important;
}
html body .pm-header-ctas .pm-cta-call:hover,
html body .pm-header-ctas .pm-cta-call:hover *,
html body .pm-header-ctas .pm-cta-call:focus-visible,
html body .pm-header-ctas .pm-cta-call:focus-visible * {
  color: #ffffff !important;
}

/* ---- PM-BODYINK-V1 ----
   Body copy was still rendering in Elementor's default cool grey #54595F while
   every heading sat on the palette ink #17140F. It cleared contrast at 6:1, so
   the sweep never flagged it, but next to ink headings on warm paper it read as
   washed out - and a cool grey on a warm ground is the wrong temperature besides.

   Body copy now takes the same ink as the headings. Scoped to p and li that do
   NOT carry an inline colour, so the white captions sitting on the dark gradient
   of the history photo cards keep theirs. */
html body .entry-content p:not([style*="color"]),
html body .entry-content li:not([style*="color"]),
html body .entry-content dd:not([style*="color"]),
html body .town-body p:not([style*="color"]),
html body .town-body li:not([style*="color"]) {
  color: var(--pm-ink) !important;
}
/* never repaint copy that sits on a photo or a dark panel */
html body .entry-content figure p,
html body .entry-content figure li,
html body .pm-hero-photo p,
html body .pm-truststrip p,
html body .pm-truststrip li {
  color: inherit !important;
}

/* ---- PM-CARDCAPTION-V1 ----
   The history photo cards put their caption on a dark gradient laid over the
   image. The in-content accent rule reached those spans through
   a:not([class]) * and repainted them #8F3E00 on near-black - unreadable.

   It survived every contrast sweep because those sweeps skip anything inside a
   figure or over imagery, on the grounds that computed backgroundColor reads
   transparent there and reports false failures. That exclusion hid a real one.
   Captions are pinned back to white, which is what the gradient exists for. */
html body .entry-content a[style*="position:relative"] span,
html body .entry-content a[style*="position: relative"] span,
html body .pm-hero-photo span {
  color: #ffffff !important;
}

/* ---- PM-HERO-UNCROP-V1 ----
   The hero was locked to a fixed height with object-fit:cover, which sliced the
   top and bottom off a photograph of two trucks. Letting it keep its own aspect
   ratio shows the whole vehicle, which is the entire point of the picture. */
html body .pm-hero-photo img {
  height: auto !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
  max-height: none !important;
}

/* ---- PM-TIMELINE-V1 ----
   The 137-year rail. Horizontal scroll on narrow screens, grid on wide: a
   timeline is one continuous thing, and breaking it into a stack loses the
   sense of one business moving through time. Photographs are the content here,
   so the chrome stays out of their way - paper ground, ink rule, no card
   shadows competing with the prints. */
html body .pm-radius,
html body .pm-timeline {
  margin: clamp(48px, 6vw, 88px) 0 0;
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 3px solid var(--pm-ink);
}
html body .pm-radius h2,
html body .pm-timeline h2 { margin: 0 0 .5em; }
html body .pm-radius p,
html body .pm-timeline .pm-tl-intro { max-width: 72ch; }

html body .pm-tl-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: clamp(20px, 2.4vw, 32px) 0 18px;
  margin: 0 0 4px;
  scrollbar-width: thin;
}
html body .pm-tl-card {
  scroll-snap-align: start;
  margin: 0;
  background: var(--pm-paper-2);
  border: 2px solid var(--pm-ink);
  display: flex;
  flex-direction: column;
}
html body .pm-tl-card img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: center 55%;
  border-bottom: 2px solid var(--pm-ink);
  filter: none;
}
html body .pm-tl-card figcaption {
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
html body .pm-tl-year {
  font-family: var(--pm-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: .03em;
  color: var(--pm-ink);
}
html body .pm-tl-cap {
  font-family: var(--pm-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--pm-ink-2);
}
html body .pm-tl-note {
  font-family: var(--pm-slip);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pm-ink-2);
  margin: 6px 0 0;
}
@media (min-width: 900px) {
  html body .pm-tl-rail { scroll-snap-type: none; }
}


/* ===== snippet 1596 : Forms - Gravity Forms brand layer ===== */
/* Peers Moving — Gravity Forms brand layer
   Tokens: accent #EE593D / hover #C0401E / ink #17140F / muted #4A4A4A
   border #E5E2DC / radius sm 4px md 12px / gap md 14px
   Replaces the old WPForms float-hack layout. GF's native 12-col grid does the columns. */

/* ---- 1. Orbital theme variables ----
   Doubled class + !important: GF's own theme stylesheet enqueues AFTER this
   header snippet, so equal-specificity overrides lose the cascade. */
html body .gform_wrapper.gform-theme--orbital.gform-theme--orbital,
html body .gform-theme--orbital.gform-theme--orbital,
html body .gform_wrapper.gform-theme.gform-theme {
	--gf-color-primary: #EE593D !important;
	--gf-color-primary-rgb: 217, 94, 0 !important;
	--gf-color-primary-contrast: #ffffff !important;
	--gf-color-primary-contrast-rgb: 255, 255, 255 !important;
	--gf-color-primary-darker: #C0401E !important;
	--gf-color-primary-lighter: #F4826D !important;
	--gf-color-secondary: #ffffff !important;
	--gf-color-secondary-contrast: #17140F !important;
	--gf-color-danger: #C0401E !important;
	--gf-radius: 8px !important;
	--gf-ctrl-radius: 8px !important;
	--gf-ctrl-btn-radius: 8px !important;
	--gf-ctrl-border-color: #8C8681 !important;
	--gf-ctrl-label-color-primary: #17140F !important;
	--gf-ctrl-label-color-secondary: #4A4A4A !important;
	--gf-ctrl-desc-color: #4A4A4A !important;
	--gf-ctrl-btn-bg-color-primary: #EE593D !important;
	--gf-ctrl-btn-bg-color-hover-primary: #C0401E !important;
	--gf-ctrl-btn-color-primary: #ffffff !important;
	--gf-ctrl-btn-font-size: 18px !important;
	--gf-ctrl-btn-padding-y: 16px !important;
	--gf-ctrl-btn-padding-x: 28px !important;
}

/* ---- 2. Form container = design-system card ----
   peers-moving-1888 specifies cards as 1px #E5E2DC, 12px radius and an
   accent-tinted shadow. The 3px left accent bar came from the superseded
   direction; the approved build uses it once as a callout, never as the
   card pattern. Shadow is tinted to the accent, never neutral black. */
html body .gform_wrapper {
	max-width: 100%;
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid #E5E2DC;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(217, 94, 0, .11);
	padding: 28px;
}

/* ---- 3. Grid rhythm ---- */
html body .gform_wrapper .gform_fields {
	grid-column-gap: 14px;
	grid-row-gap: 18px;
}

/* ---- 4. Labels ---- */
html body .gform_wrapper .gfield_label,
html body .gform_wrapper legend.gfield_label {
	display: block;
	font-family: "Bitter", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
	font-weight: 800;
	font-size: 16px;
	line-height: 1.35;
	color: #17140F;
	margin: 0 0 8px;
}
html body .gform_wrapper .gfield_required,
html body .gform_wrapper .gfield_required .gfield_required_asterisk {
	color: #C0401E;
	font-weight: 800;
}
html body .gform_wrapper .ginput_complex label,
html body .gform_wrapper .gform_fields .gfield_description {
	font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #4A4A4A;
	text-transform: none;
	letter-spacing: 0;
}

/* ---- 5. Controls ---- */
html body .gform_wrapper .gform_fields input[type=text],
html body .gform_wrapper .gform_fields input[type=email],
html body .gform_wrapper .gform_fields input[type=tel],
html body .gform_wrapper .gform_fields input[type=number],
html body .gform_wrapper .gform_fields input[type=url],
html body .gform_wrapper .gform_fields textarea,
html body .gform_wrapper .gform_fields select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-height: 52px;
	padding: 12px 14px;
	font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: #17140F;
	background: #ffffff;
	/* #8C8681 (3.59:1 vs white), not the inherited #cbc6c2 (1.69:1).
	   Input background matches the card, so this border is the only thing
	   identifying the control — WCAG 1.4.11 requires 3:1 for that boundary. */
	border: 1px solid #8C8681;
	border-radius: 8px;
	box-shadow: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}
html body .gform_wrapper .gform_fields textarea {
	min-height: 132px;
	line-height: 1.6;
	resize: vertical;
}
/* #79716B = 4.79:1 vs white, clearing 1.4.3's 4.5:1 (was #8a8681 at ~3.6:1).
   Reuses the site's existing sublabel gray, and stays far enough from the
   #17140F input text that a hint never reads as a filled value.
   !important because GF's sheet loads after this snippet. */
html body .gform_wrapper .gform_fields ::placeholder {
	color: #79716B !important;
	opacity: 1 !important;
}
/* Focus indicator — WCAG 2.4.7 / 2.4.11.
   !important is required: GF's Orbital sheet enqueues after this snippet and
   silently overrode the previous (unflagged) version of this rule.
   outline rather than box-shadow so the ring survives forced-colors mode. */
html body .gform_wrapper .gform_fields input:focus,
html body .gform_wrapper .gform_fields textarea:focus,
html body .gform_wrapper .gform_fields select:focus {
	border-color: #C0401E !important;
	outline: 3px solid #EE593D !important;
	outline-offset: 1px !important;
	box-shadow: none !important;
}

/* invisible reCAPTCHA renders no visible control — collapse the whole row
   so it contributes neither a stray "CAPTCHA" label nor vertical space */
html body .gform_wrapper .gfield--type-captcha {
	margin: 0 !important;
	padding: 0 !important;
}
html body .gform_wrapper .gfield--type-captcha > .gfield_label,
html body .gform_wrapper .gfield--type-captcha > label.gfield_label {
	display: none !important;
}
html body .gform_wrapper .gfield--type-captcha .ginput_recaptcha[data-size="invisible"] {
	display: block;
	height: 0;
	overflow: hidden;
}

/* ---- 6. Submit ---- */
html body .gform_wrapper .gform_footer,
html body .gform_wrapper .gform-footer {
	margin: 22px 0 0;
	padding: 0;
}
html body .gform_wrapper .gform_footer input[type=submit],
html body .gform_wrapper .gform_footer button[type=submit],
html body .gform_wrapper .gform-footer input[type=submit],
html body .gform_wrapper .gform-footer button[type=submit],
html body .gform_wrapper .gform_page_footer input[type=submit],
html body .gform_wrapper .gform_page_footer button[type=submit],
html body .gform_wrapper input.gform_button,
html body .gform_wrapper button.gform_button {
	display: inline-block !important;
	width: 100% !important;
	max-width: 420px !important;
	min-height: 56px !important;
	height: auto !important;
	padding: 16px 28px !important;
	font-family: "Bitter", -apple-system, system-ui, sans-serif !important;
	font-weight: 800 !important;
	/* 19px, not 18px: white on #EE593D measures 3.78:1. WCAG treats >=18.66px
	   bold as large text (3:1 floor), so this clears AA without touching the
	   brand color, which is not ours to change. */
	font-size: 19px !important;
	line-height: 1.2 !important;
	letter-spacing: .02em !important;
	text-transform: none !important;
	color: #ffffff !important;
	background: #EE593D !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: background .18s ease, transform .12s ease !important;
}
html body .gform_wrapper input.gform_button:hover,
html body .gform_wrapper button.gform_button:hover,
html body .gform_wrapper .gform_footer input[type=submit]:hover,
html body .gform_wrapper .gform-footer input[type=submit]:hover {
	background: #C0401E !important;
}
html body .gform_wrapper input.gform_button:active,
html body .gform_wrapper button.gform_button:active {
	transform: translateY(1px) !important;
}
html body .gform_wrapper input.gform_button:focus-visible,
html body .gform_wrapper button.gform_button:focus-visible {
	outline: 3px solid #17140F !important;
	outline-offset: 2px !important;
}

/* ---- 7. Validation ---- */
/* Error state reads from the tinted ground and a full accent-dark border,
   not a side bar. #FFF4EC is the direction's own wash tint. */
html body .gform_wrapper .gform_validation_errors {
	background: #FFF4EC;
	border: 1px solid #C0401E;
	border-radius: 8px;
	box-shadow: none;
}
html body .gform_wrapper .gform_validation_errors > h2,
html body .gform_wrapper .gform_validation_errors > h2 .gform-icon {
	color: #C0401E;
	font-family: "Bitter", -apple-system, system-ui, sans-serif;
	font-weight: 800;
}
html body .gform_wrapper .gfield_error input,
html body .gform_wrapper .gfield_error textarea,
html body .gform_wrapper .gfield_error select {
	border-color: #C0401E;
	background: #fffaf9;
}
html body .gform_wrapper .gfield_validation_message,
html body .gform_wrapper .validation_message {
	background: transparent;
	border: 0;
	padding: 6px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: #C0401E;
}

/* ---- 8. Confirmation ----
   Standalone (non-AJAX) confirmation gets the card treatment. */
html body .gform_confirmation_message {
	background: #ffffff;
	border: 1px solid #E5E2DC;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(217, 94, 0, .11);
	padding: 24px 28px;
	font-size: 17px;
	line-height: 1.7;
	color: #17140F;
}
/* AJAX confirmation replaces the form INSIDE .gform_wrapper, which is already
   a card — strip the inner one so we never render a card inside a card. */
html body .gform_confirmation_wrapper .gform_confirmation_message {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 4px 2px;
	font-family: "Bitter", -apple-system, system-ui, sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.65;
	color: #17140F;
}

/* ---- 9. Mobile ---- */
@media (max-width: 640px) {
	html body .gform_wrapper {
		padding: 18px;
		border-radius: 10px;
	}
	html body .gform_wrapper .gform_fields > .gfield {
		grid-column: span 12 !important;
	}
	html body .gform_wrapper input.gform_button,
	html body .gform_wrapper button.gform_button {
		max-width: 100% !important;
	}
}
@media (max-width: 1024px) {
	html body .gform_wrapper input.gform_button,
	html body .gform_wrapper button.gform_button {
		width: 100% !important;
		max-width: 100% !important;
	}
}


/* PM-GF-RETOKEN-V2: retokenised to the Dispatch Board palette.
   Squares the corners so the form controls match the stamped button family. */
html body .gform_wrapper .gform_footer button,
html body .gform_wrapper .gform_footer input[type="submit"],
html body .gform_wrapper button[type="submit"] {
  border-radius: 0 !important;
  border: 2px solid #17140F !important;
  box-shadow: 4px 4px 0 #17140F !important;
  font-family: "Staatliches", "Arial Narrow", sans-serif !important;
  font-weight: 400 !important; font-size: 19px !important; letter-spacing: .05em !important;
  min-height: 56px !important;
}
html body .gform_wrapper input:not([type="submit"]),
html body .gform_wrapper select,
html body .gform_wrapper textarea { border-radius: 0 !important; }


/* PM-BRAND-ORANGE-RESTORE: brand orange #EE593D sampled from the logo.
   The oxblood here was mine and it changed the brand colour - reverted.
   White on #EE593D is 3.5:1, so the submit label stays large display type. */

/* ---- PM-SUBMIT-STAMP-V1 ----
   The quote form submit was the last control on the site still off-system: an
   8px radius, Bitter 19/800, white on the brand orange at 3.44:1 - the weakest
   text on the homepage sitting on its most important control, while every other
   button is a square stamped one. It now matches the header CTAs: square, ink
   border, offset shadow, Staatliches, ink label on the untouched brand orange.
   Measured 5.36:1.

   This lives here rather than in the design layer because this snippet loads
   after it and owns the form controls. */
html body .gform_wrapper .gform_footer button.gform_button,
html body .gform_wrapper .gform_footer input[type="submit"].gform_button,
html body .gform_wrapper button.gform_button.button {
  border-radius: 0 !important;
  background: #EE593D !important;
  color: #17140F !important;
  border: 2px solid #17140F !important;
  box-shadow: 4px 4px 0 #17140F !important;
  font-family: "Staatliches", "Arial Narrow", sans-serif !important;
  font-weight: 400 !important;
  font-size: 21px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}
html body .gform_wrapper .gform_footer button.gform_button:hover,
html body .gform_wrapper button.gform_button.button:hover {
  background: #EE593D !important;
  color: #17140F !important;
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 #17140F !important;
}
html body .gform_wrapper .gform_footer button.gform_button:active,
html body .gform_wrapper button.gform_button.button:active {
  transform: translate(4px, 4px) !important;
  box-shadow: 0 0 0 #17140F !important;
}
html body .gform_wrapper .gform_footer button.gform_button:focus-visible {
  outline: 3px solid #17140F !important;
  outline-offset: 3px !important;
}


/* ===== snippet 1581 : Content width — custom sections match content width ===== */
.elementor-widget-html > .elementor-widget-container > div[style*="max-width"]{max-width:100% !important;}