/* ============================================================================
   crh design-improvements layer — George-approved design phase (2026-08-19).
   Served at /improvements.css; injected into BOTH mirrors (desktop + mobile/)
   by scripts/inject-design-improvements.py (marker crh-design-improvements).

   PRESENTATION ONLY. No DOM, content, schema or SEO changes live in this file.
   Structure/headings/copy stay byte-identical to the mirrors; every rule below
   cites the measured defect (or George instruction) it exists to fix, so a
   future session can tell intent from drift (same discipline as
   docs/recorded-deviations.json for content).

   u_NNN ids are Duda-generated and are REUSED for different elements on
   different pages (measured: u_1373398024 is the hero H1 paragraph on
   car-recovery but an orange-underlined block on car-towing). Any u_-scoped
   rule here MUST therefore be page-scoped (via .u_dmStyle_template_* on
   .dmBody) or scoped inside template-global chrome (#hamburger-header-container,
   #hcontainer), never bare-global.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1) MOBILE: dark "black line between each section" dividers — remove.
   George 2026-08-19: FAQ area "absolutely dreadful ... black line between each
   section". Measured @375: Duda's reset `*{border:0 solid #333}` plus per-row
   border-WIDTH-only rules (e.g. u_1005055760 3px, u_1562872544 3px+3px,
   u_1989481810 2px, u_1170805113 3px, u_1079344022 1px, u_1173654312 4px)
   leave the colour at the #333 default -> near-black full-width rules.
   Deliberate accents (lead-form frame u_1473091977, heading underlines) set an
   EXPLICIT border-color rgba(231,160,101,1)/rgba(216,114,11,1) with !important,
   so this deliberately-NOT-!important override hides exactly the defaulted-dark
   lines and cannot touch the orange accents.
---------------------------------------------------------------------------- */
/* Surgical, not generic: a broad `border-color: transparent` on all
   rows/cols also killed the DELIBERATE orange lead-form frame (u_1473091977)
   on mobile, so instead each measured dark-line element is zeroed by id.
   List = every u_ id from the full CSS scan whose border rules set widths
   with NO explicit colour (i.e. they fall to the #333 default):
   home rows u_1005055760/u_1644552661/u_1562872544/u_1989481810/u_1705216041/
   u_1170805113; u_1079344022 (1px, location pages); u_1173654312 (4px,
   breakdown-recovery); u_1024288330 (1px, blog list); plus stacked-column
   right-edge separators u_1111473675/u_1228905843/u_1252764906/u_1537893110/
   u_1973427591 (1px #333 down the screen edge once columns stack on mobile).
   Row/col class kept in each selector so an id reused for a non-grid element
   on another page cannot be hit. */
/* both bodies since 2026-08-19 evening: George found the 24-hour band still
   carried its dark top border on DESKTOP, and asked for the coloured "red"
   row boundaries (rgb(216,114,11) top-borders u_1306443595/u_1592625774/
   u_1952063605) to go as well — "boundaries between each row just look
   really poor". The lead-form frame (u_1473091977) stays. */
/* .dmBody + div added 2026-08-22: the DESKTOP template CSS (home_withFlex)
   carries `#dm .dmBody div.u_N{border-*-width:Npx!important}` — (1,2,1) —
   which outranked the previous (1,2,0) form by one element type, so the
   3px line under u_1005055760 survived on desktop (George flagged it twice).
   (1,3,1) beats every template width rule; measured in-browser. */
#dm .dmBody div.dmRespRow.u_1005055760,
#dm .dmBody div.dmRespRow.u_1644552661,
#dm .dmBody div.dmRespRow.u_1562872544,
#dm .dmBody div.dmRespRow.u_1989481810,
#dm .dmBody div.dmRespRow.u_1705216041,
#dm .dmBody div.dmRespRow.u_1170805113,
#dm .dmBody div.dmRespRow.u_1079344022,
#dm .dmBody div.dmRespRow.u_1173654312,
#dm .dmBody div.dmRespRow.u_1024288330,
#dm .dmBody div.dmRespRow.u_1306443595,
#dm .dmBody div.dmRespRow.u_1592625774,
#dm .dmBody div.dmRespRow.u_1952063605,
#dm .dmBody div.dmRespRow.u_1969841421,
#dm .dmBody div.dmRespRow.u_1825511302 {
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
}
/* Both scopes needed: these u_ ids are REUSED — e.g. on the mobile home doc
   u_1228905843 is the hamburger-drawer column under .p_hfcontainer (header
   chrome, NOT .dmBody), where Duda sets the 1px right edge via
   `#dm .p_hfcontainer div.u_N` (1,2,1) !important — the "1px #333 line down
   the screen edge". (1,3,1) in each scope; measured in-browser 2026-08-22. */
#dm .dmBody div.dmRespCol.u_1111473675,
#dm .dmBody div.dmRespCol.u_1228905843,
#dm .dmBody div.dmRespCol.u_1252764906,
#dm .dmBody div.dmRespCol.u_1537893110,
#dm .dmBody div.dmRespCol.u_1973427591,
#dm .p_hfcontainer div.dmRespCol.u_1111473675,
#dm .p_hfcontainer div.dmRespCol.u_1228905843,
#dm .p_hfcontainer div.dmRespCol.u_1252764906,
#dm .p_hfcontainer div.dmRespCol.u_1537893110,
#dm .p_hfcontainer div.dmRespCol.u_1973427591 {
  border-right-width: 0 !important;
}

/* ----------------------------------------------------------------------------
   2) Squashed background-image strips -> real photo panels.
   George: "24 hour car recovery ... picture is half showing and half over the
   blue background ... same for What is towing". Measured @375: the image half
   of these bands is an .empty-column with data-background-image that collapses
   to 375x100 (background-position 0 0) — a broken-looking letterbox slice.
   The [data-background-image] attribute deliberately EXCLUDES the healthy
   gallery column (u_1618180506, data-gallery-bg, measured fine at 300px).
   Mobile: inset rounded photo card. Desktop: same columns letterbox at
   600x149; give them real height (no inset — grid width games would wrap the
   50% columns).
---------------------------------------------------------------------------- */
.dmMobileBody #dm .dmRespCol.empty-column[data-background-image] {
  min-height: 220px !important;
  background-position: 50% 50% !important;
  background-size: cover !important;
  width: calc(100% - 28px) !important;
  margin: 6px auto 24px !important;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.dmDesktopBody #dm .dmRespCol.empty-column[data-background-image] {
  min-height: 280px !important;
  background-position: 50% 50% !important;
  background-size: cover !important;
}

/* ----------------------------------------------------------------------------
   3) FAQ accordion -> clean cards (both breakpoints; heading TAGS untouched).
   George: homepage FAQ "looks absolutely dreadful" (mobile); keep the heading
   structure. Measured: LI.accordion-item white, 1px rgba(0,0,0,.125) borders,
   border-radius 4px top-only, question H3 16px/300 vs answer 17px black
   (hierarchy inverted). Cards: rounded, borderless, soft shadow, question
   bolder than answer, answer joined inside the same card.
---------------------------------------------------------------------------- */
#dm .accordion-wrapper .accordion-item {
  border: 0 !important;
  border-radius: 12px !important;
  overflow: hidden;
  background: #fff !important;
  margin: 0 0 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 32, 0.06), 0 4px 14px rgba(15, 23, 32, 0.05);
}
#dm .accordion-wrapper .accordion-title {
  padding: 16px 18px !important;
  border-bottom: 0 !important;
}
#dm .accordion-wrapper .accordion-item.expanded .accordion-title {
  border-bottom: 1px solid #edf0f3 !important;
}
#dm .accordion-wrapper .accordion-title h3 {
  font-weight: 600 !important;
  color: #212a33 !important;
  line-height: 1.4 !important;
}
.dmMobileBody #dm .accordion-wrapper .accordion-title h3 { font-size: 16px !important; }
.dmDesktopBody #dm .accordion-wrapper .accordion-title h3 { font-size: 19px !important; }
#dm .accordion-wrapper .accordion-description .section-inner {
  padding: 14px 18px 18px !important;
  border-bottom: 0 !important;
}
#dm .accordion-wrapper .accordion-description .section-inner,
#dm .accordion-wrapper .accordion-description .section-inner p,
#dm .accordion-wrapper .accordion-description .section-inner span {
  font-size: 15px !important;
  color: #46525e !important;
  line-height: 1.6 !important;
}

/* ----------------------------------------------------------------------------
   4) HOME mobile: "How to prepare for a long journey" steps read lopsided —
   centred H3 above left-hugging number blobs + left H4s (George: "not
   centralised"). Centre the shape blobs and step headings; body copy stays
   left for readability. u_1569818710 is the steps row on the HOME template,
   hence the template guard (see header note on u_ id reuse).
---------------------------------------------------------------------------- */
.dmMobileBody #dm .u_dmStyle_template_home .u_1569818710 .dmShape {
  margin-left: auto !important;
  margin-right: auto !important;
}
.dmMobileBody #dm .u_dmStyle_template_home .u_1569818710 :is(h3, h4) {
  text-align: center !important;
}

/* ----------------------------------------------------------------------------
   5) MOBILE: justified body text -> left. 51 elements on home alone carry
   .text-align-justify; at ~345px columns justification creates severe word-gap
   rivers (visible in George's screenshots and mine). Mobile-only on purpose —
   desktop 2-col justified text at ~578px is acceptable and stays live-parity.
---------------------------------------------------------------------------- */
#dm .text-align-justify {
  text-align: left !important;
}

/* ----------------------------------------------------------------------------
   6) MOBILE: header phone number robustly centred at EVERY viewport width.
   George: "the number in the header ... just needs to be centralised".
   Measured: the number paragraph (u_1096339614, template-global header chrome)
   sits in a small-8 column next to the hamburger column — centred at 375 by
   luck of column maths, off-centre at other widths / Duda's medium range.
   Absolute-centre it against the fixed bar (row is position:relative).
---------------------------------------------------------------------------- */
/* position:fixed (not absolute): the paragraph's nearest positioned ancestor
   is its ~250px column, so absolute centring anchored to the column, not the
   bar (measured cx=72 vs viewport 188). The bar itself is permanently fixed
   at the viewport top, so pinning to the viewport is exact at every width:
   50vw + translateX(-50%), vertically centred in the bar's 76px. */
.dmMobileBody #hamburger-header-container div.u_1096339614.dmNewParagraph {
  position: fixed !important;
  left: 50vw !important;
  top: 0 !important;
  height: 76px !important;
  display: flex !important;
  align-items: center !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  width: max-content !important;
  max-width: calc(100vw - 120px) !important;
}

/* ----------------------------------------------------------------------------
   7) INNER-PAGE HERO — George: "every other page other than the home page has
   got that horrible orange header with a little white ball ... follow the
   exact same suit as the home page ... blank background overlay over the
   image with white text and make the image section bigger."
   Measured on /car-recovery: hero = first .dmRespRow.hasBackgroundOverlay,
   photo bg + ::before WHITE overlay at opacity .57 (washes the photo out),
   BLACK H1, total band ~142px. 97/104 pages share this exact first-row
   structure; home is excluded via its .u_dmStyle_template_home dmBody class
   (home's hero is already the wanted look and must not be re-tinted).
---------------------------------------------------------------------------- */
#dm .dmBody:not(.u_dmStyle_template_home) .dmRespRowsWrapper > .dmRespRow.hasBackgroundOverlay:first-child::before {
  /* top-weighted scrim: darker at the very top so the white nav/logo stay
     legible over pale skies, settling to an even dark overlay behind the H1 */
  background: linear-gradient(to bottom,
    rgba(8, 13, 18, 0.82) 0,
    rgba(10, 16, 21, 0.55) 30%,
    rgba(13, 20, 26, 0.55) 100%) !important;
  opacity: 1 !important;
}
/* Duda lays the hero out BELOW the fixed header (measured top=103 at every
   desktop width), so a transparent header would sit on the white page with
   white text — invisible (George's catch). Pull the hero up under the header
   by its MEASURED height (--crh-hdr-h, set + resize-updated by the injected
   JS) and pad/height-compensate, so the photo genuinely runs behind the nav
   at any viewport width. */
.dmDesktopBody #dm .dmBody:not(.u_dmStyle_template_home) .dmRespRowsWrapper > .dmRespRow.hasBackgroundOverlay:first-child {
  margin-top: calc(0px - var(--crh-hdr-h, 0px)) !important;
  padding-top: calc(135px + var(--crh-hdr-h, 0px)) !important;
  padding-bottom: 95px !important;
  min-height: calc(310px + var(--crh-hdr-h, 0px)) !important;
}
.dmMobileBody #dm .dmBody:not(.u_dmStyle_template_home) .dmRespRowsWrapper > .dmRespRow.hasBackgroundOverlay:first-child {
  padding-top: 120px !important;
  padding-bottom: 64px !important;
  min-height: 250px !important;
}
/* every text node in the hero goes white — including spans/headings that
   carry their own colour classes (measured: contact's "Call Us Now <number>"
   line stayed black via a span colour class). Anything inside a link/button
   is excluded so button styling is untouched, EXCEPT tel: links, which want
   the white treatment (they're the conversion line). */
#dm .dmBody:not(.u_dmStyle_template_home) .dmRespRowsWrapper > .dmRespRow.hasBackgroundOverlay:first-child :is(h1, h2, h3, h4, p, span):not(a):not(a *):not(.crh-contact-kicker),
#dm .dmBody:not(.u_dmStyle_template_home) .dmRespRowsWrapper > .dmRespRow.hasBackgroundOverlay:first-child a[href^="tel:"],
#dm .dmBody:not(.u_dmStyle_template_home) .dmRespRowsWrapper > .dmRespRow.hasBackgroundOverlay:first-child a[href^="tel:"] span {
  color: #fff !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

/* ----------------------------------------------------------------------------
   8) INNER pages, desktop, at TOP of page: the orange header bar goes
   transparent so the enlarged dark hero reads like the home page (George:
   "follow the exact same suit as the home page"). White top-level nav +
   logo for legibility over the photo. Home is excluded (its dmBody carries
   u_dmStyle_template_home; :has() is supported by every 2026 browser).
   Dropdown SUB-menu items keep Duda's colours (they render on light panels) —
   only .unav-top-item is recoloured.
---------------------------------------------------------------------------- */
/* Implementation note: the obvious html:not(.crh-scrolled) ... :has(...) form is
   NOT used because Chromium fails to re-evaluate such rules when the html class
   toggles (measured here: .matches() said false while the style system kept
   applying the stale rule). Instead the injector adds class crh-inner to BODY
   via a tiny pre-body script on non-home documents (static decision at inject
   time), and the scroll JS toggles crh-scrolled on BODY — body-class
   invalidation is the reliable path. */
#hcontainer { position: relative; transition: background-color 0.25s ease, box-shadow 0.25s ease; }
body.dmDesktopBody.crh-inner:not(.crh-scrolled):not(.crh-nohero) #hcontainer.dmHeader.u_hcontainer {
  background: transparent !important;
}
body.dmDesktopBody.crh-inner:not(.crh-scrolled) #hcontainer .unifiednav__item.unav-top-item,
body.dmDesktopBody.crh-inner:not(.crh-scrolled) #hcontainer .dmNewParagraph * {
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* ----------------------------------------------------------------------------
   9) SHRINKING STICKY HEADER on scroll — George: "maybe add a shrinking header
   which starts working as we scroll down" (desktop; conversion-first: the
   phone number becomes permanently visible once scrolling). The injected JS
   toggles .crh-scrolled on <html> (adds >130px, removes <70px — hysteresis so
   it can't flicker) and appends one tel: pill (.crh-hdr-phone) to #hcontainer
   on desktop documents. Applies on ALL desktop pages incl. home (home's
   #hcontainer is collapsed at top — forced open only while scrolled).
---------------------------------------------------------------------------- */
/* HOME hides the whole fixed header container (display:none on
   .dmHeaderContainer) and renders its top nav inside the hero instead — that
   nav scrolls away naturally, so revealing the fixed bar on scroll gives home
   the same sticky header with no duplication. */
body.dmDesktopBody.crh-scrolled .dmHeaderContainer {
  display: block !important;
  height: auto !important;
}
/* Specificity note: on REAL scroll Duda's own scroll-responder JS adds
   .scroll-responder_set to #hcontainer, and its stylesheet paints the bar
   orange via `*#dm .dmInner div.dmHeader.p_hfcontainer.u_hcontainer
   .scroll-responder_set#hcontainer{background-color:rgb(231,160,101)
   !important}` — (2,5,1) + !important. Class-simulated scroll tests never
   fire that JS, which is how this shipped orange unseen (measured headless
   2026-08-22, real mouse-wheel scroll). #hcontainer#hcontainer repeats the
   id legally → (3,4,1) outranks it using only hooks present on every page. */
body.dmDesktopBody.crh-scrolled #dm #hcontainer#hcontainer.dmHeader.u_hcontainer {
  /* orange per George 2026-08-22 ("site colour"); was teal rgb(8,96,112) */
  background: rgb(231, 160, 101) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}
body.dmDesktopBody.crh-scrolled #hcontainer .dmRespRow {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}
body.dmDesktopBody.crh-scrolled #hcontainer .unifiednav__item.unav-top-item,
body.dmDesktopBody.crh-scrolled #hcontainer .dmNewParagraph * {
  color: #fff !important;
}
/* logo text compact in the shrunk bar */
body.dmDesktopBody.crh-scrolled #hcontainer .dmNewParagraph * {
  font-size: 24px !important;
  line-height: 1.2 !important;
}
body.dmDesktopBody.crh-scrolled #hcontainer .dmNewParagraph,
body.dmDesktopBody.crh-inner #hcontainer .dmNewParagraph {
  margin: 0 !important;
}


/* the phone pill itself (JS-injected; hidden until scrolled; never on mobile
   — the mobile fixed bar already shows the number permanently) */
.crh-hdr-phone {
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  /* white pill + teal text (footer-pill precedent) so it reads on the orange
     bar — George 2026-08-22: "the button in the top right just needs to be a
     different colour". */
  background: #fff;
  color: rgb(8, 96, 112) !important;
  font-weight: 700;
  font-size: 16px;
  padding: 9px 20px;
  border-radius: 26px;
  text-decoration: none;
  white-space: nowrap;
  z-index: 5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
body.crh-scrolled .crh-hdr-phone {
  opacity: 1;
  pointer-events: auto;
}
.dmMobileBody .crh-hdr-phone { display: none !important; }


/* ----------------------------------------------------------------------------
   10) Reviews-badge widget: hide the inline "Loading reviews" placeholder.
   The snappsapi widget mounts INLINE (inside home's hero row) and paints
   "Loading reviews" there until the reviews fetch returns; the real badge
   then renders as a FIXED bottom-right offcanvas (inside the same mount, so
   the mount cannot be display:none'd). visibility hides the inline loading
   state; the offcanvas re-enables itself (visibility is resettable by
   descendants, and position:fixed escapes the mount's box). George 2026-08-19:
   "have it not show 'Loading reviews' and it just goes in straight away".
---------------------------------------------------------------------------- */
/* Hide the widget mount ONLY while the reviews are still loading (the
   "Loading reviews" text state). Once the widget's markup (the offcanvas +
   badge) is in the DOM, everything reverts to native behaviour — Bootstrap
   itself drives the offcanvas with visibility/transform, so forcing
   `.offcanvas{visibility:visible}` (the previous attempt) made the drawer
   flash open on load AND kept the badge hidden. George caught it broken. */
#dm #rev_list_container:not(:has(#offcanvasGReviews)) {
  visibility: hidden;
}


/* ============================================================================
   REDESIGN v2 — George 2026-08-19: "the whole design just needs a thorough
   updating ... very old, bleak and bland ... especially desktop ... the whole
   time bear in mind convertibility". Content stays where it is; conversion
   furniture (click-to-calls, popup, buttons, scrolled-bar number) is sacred.
   ============================================================================ */

/* ---- v2.1 UNIFIED HEADER GEOMETRY (George: nav sits differently per page and
   jumps on scroll — "that design is just really, really poor"). One layout
   everywhere on desktop: logo LEFT, nav TRUE-CENTRED in the bar, phone pill
   RIGHT — identical at top and scrolled, so nothing moves except the bar
   itself. The pill shows from the very top on inner pages (conversion). */
/* One header geometry for every desktop page and both states: a 3-part flex
   bar — logo takes its natural width on the left, the nav CENTRES in the
   remaining middle, the pill sits absolute right. True viewport-centring was
   measured to collide with the text logo below ~1400px, so the nav centres in
   the free middle instead — identical on every page and state, which is what
   kills the "nav sits differently per page / moves on scroll" complaint. */
body.dmDesktopBody.crh-inner #hcontainer .dmRespColsWrapper,
body.dmDesktopBody.crh-scrolled #hcontainer .dmRespColsWrapper {
  display: flex !important;
  align-items: center !important;
  padding-right: 150px !important;
}
body.dmDesktopBody.crh-inner #hcontainer .dmRespColsWrapper > .dmRespCol:first-child,
body.dmDesktopBody.crh-scrolled #hcontainer .dmRespColsWrapper > .dmRespCol:first-child {
  flex: 0 0 auto !important;
  width: auto !important;
}
body.dmDesktopBody.crh-inner #hcontainer .dmRespColsWrapper > .dmRespCol:last-child,
body.dmDesktopBody.crh-scrolled #hcontainer .dmRespColsWrapper > .dmRespCol:last-child {
  flex: 1 1 auto !important;
  width: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
body.dmDesktopBody.crh-inner #hcontainer nav,
body.dmDesktopBody.crh-scrolled #hcontainer nav {
  position: static !important;
  margin: 0 !important;
  width: max-content !important;
  max-width: 100%;
}
body.dmDesktopBody.crh-inner .crh-hdr-phone {
  opacity: 1;
  pointer-events: auto;
}

/* ---- v2.2 TYPE + DIVIDERS: restyle every existing Duda divider line into the
   brand accent (short orange bar) so section headings carry one consistent
   signature instead of assorted grey rules. */
#dm .dmDividerWrapper hr,
#dm .dmDividerWrapper .dmDivider,
#dm .dmBody div.dmDividerWrapper > :not(#crh-never) {
  /* > * added 2026-08-22: the service-card dividers' inner element is neither
     hr nor .dmDivider, so they stayed 2px at 264-330px wide (measured).
     :not(#crh-never) is a pure specificity boost (adds id weight -> (2,2,1))
     because a Duda per-id longhand border-top-width!important still beat the
     plain > * form on thickness (width won, 4px lost — measured). */
  width: 72px !important;
  max-width: 72px !important;
  border: 0 !important;
  border-top: 4px solid rgb(231, 160, 101) !important;
  border-radius: 2px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- v2.3 TEAL BANDS (George's screenshots: "just don't look very good").
   Bigger banded headings, comfortable left-set copy with a proper measure,
   photo softened with radius+shadow on desktop, and a call CTA (JS-injected
   .crh-band-cta) under the copy — the band becomes a conversion block. */
.dmDesktopBody #dm .dmRespRow:has(> .dmRespColsWrapper > .dmRespCol.empty-column[data-background-image]) h2,
.dmDesktopBody #dm .dmRespRow:has(> .dmRespColsWrapper > .dmRespCol.empty-column[data-background-image]) h3 {
  font-size: clamp(26px, 2.2vw, 34px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  text-align: left !important;
  margin-bottom: 10px !important;
}
.dmDesktopBody #dm .dmRespRow:has(> .dmRespColsWrapper > .dmRespCol.empty-column[data-background-image]) p {
  font-size: 17px !important;
  line-height: 1.65 !important;
  max-width: 58ch;
}
.dmDesktopBody #dm .dmRespRow:has(> .dmRespColsWrapper > .dmRespCol.empty-column[data-background-image]) .dmRespCol:not(.empty-column) {
  align-self: center;
}
.dmDesktopBody #dm .dmRespCol.empty-column[data-background-image] {
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
/* the injected band CTA pill (both breakpoints) */
.crh-band-cta {
  display: inline-block;
  margin-top: 18px;
  background: rgb(231, 160, 101);
  color: #fff !important;
  font-weight: 700;
  font-size: 17px;
  padding: 12px 26px;
  border-radius: 28px;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.crh-band-cta:hover {
  background: rgb(214, 132, 64);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26);
}
.dmMobileBody .crh-band-cta { display: block; width: max-content; margin: 16px auto 4px; }

/* ---- v2.4 TESTIMONIALS (George: "one is lower than the others"). Equal-height
   columns with the attribution pinned to one shared baseline — no copy edits
   needed, works for any future quote length. Quote glyphs join the palette. */
#dm .u_dmStyle_template_home .u_1935061344 .dmRespColsWrapper { align-items: stretch !important; }
#dm .u_dmStyle_template_home .u_1935061344 .dmRespCol {
  display: flex !important;
  flex-direction: column !important;
}
#dm .u_dmStyle_template_home .u_1935061344 .dmRespCol > .dmNewParagraph:last-child {
  margin-top: auto !important;
}
#dm .u_dmStyle_template_home .u_1935061344 .graphicWidget svg,
#dm .u_dmStyle_template_home .u_1935061344 .graphicWidget svg * {
  fill: rgb(231, 160, 101) !important;
}

/* ---- v2.5 FAQ SECTION (George: "the grey background is just boring as
   anything"). Warm cream gradient behind the white cards; questions keep the
   card treatment from v1. :has() here is evaluated statically (no dynamic
   class toggling), so the Chromium invalidation bug does not apply. */
/* George on the cream attempt: "all you've done is make it a slightly
   different colour… that hasn't actually improved the design at all." Real
   treatment: the FAQ becomes a DEEP TEAL feature section — white cards pop on
   it, the title goes white with the orange accent, and the section bookends
   the teal photo-bands so the bottom half of the page has a rhythm
   (white -> teal -> orange quote -> white) instead of grey-on-grey. */
#dm .dmRespRow:has(.accordion-wrapper) {
  background: linear-gradient(180deg, rgb(10, 82, 96) 0%, rgb(8, 96, 112) 100%) !important;
  padding-top: 24px !important;
  padding-bottom: 64px !important;
}
#dm .dmRespRow:has(.accordion-wrapper) .accordion-item {
  border-radius: 14px !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  margin: 0 0 14px !important;
}

/* ---- v2.6 AREAS / photo-gallery tiles: rounded, gentle hover lift, and a
   bottom scrim so the town names sit on glass rather than raw photo. */
#dm .photoGalleryThumbs .thumbnailInnerWrapper {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#dm .photoGalleryThumbs .thumbnailInnerWrapper:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}
#dm .photoGalleryThumbs .caption-container {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(10, 16, 21, 0.72) 100%) !important;
}
#dm .photoGalleryThumbs .caption-title {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  font-weight: 600 !important;
}

/* ---- v2.7 BUTTONS sitewide: living hover/active states on every pill
   (conversion furniture — make them feel pressable, never smaller). */
#dm a.dmCall,
#dm .dmButtonLink,
#dm a.dmWidget {
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
#dm a.dmCall:hover,
#dm .dmButtonLink:hover,
#dm a.dmWidget:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  filter: brightness(1.04);
}
#dm a.dmCall:active,
#dm .dmButtonLink:active,
#dm a.dmWidget:active {
  transform: translateY(0);
  filter: brightness(0.97);
}

/* ---- v2.8 INNER HERO TITLE (George: "the text and the title just don't seem
   that good"). Heavier, tighter H1 with a short brand accent bar instead of
   the odd full-width orange border the paragraph carried. */
#dm .dmBody:not(.u_dmStyle_template_home) .dmRespRowsWrapper > .dmRespRow.hasBackgroundOverlay:first-child .dmNewParagraph {
  border-bottom: 0 !important;
}
#dm .dmBody:not(.u_dmStyle_template_home) .dmRespRowsWrapper > .dmRespRow.hasBackgroundOverlay:first-child h1 {
  font-weight: 800 !important;
  letter-spacing: -0.015em;
}
.dmDesktopBody #dm .dmBody:not(.u_dmStyle_template_home) .dmRespRowsWrapper > .dmRespRow.hasBackgroundOverlay:first-child h1,
.dmDesktopBody #dm .dmBody:not(.u_dmStyle_template_home) .dmRespRowsWrapper > .dmRespRow.hasBackgroundOverlay:first-child h1 span {
  font-size: clamp(40px, 3.4vw, 58px) !important;
}
#dm .dmBody:not(.u_dmStyle_template_home) .dmRespRowsWrapper > .dmRespRow.hasBackgroundOverlay:first-child h1::after {
  content: "";
  display: block;
  width: 76px;
  height: 4px;
  border-radius: 2px;
  background: rgb(231, 160, 101);
  margin: 18px auto 0;
}

/* ---- v2.9 FOOTER: sits on the same warm ground as the FAQ section instead of
   bare white, with the brand rule on top. */
#dm .dmFooterContainer {
  background: #f7f2ea !important;
  border-top: 4px solid rgb(231, 160, 101);
}


/* ---- v2.10 polish round (walk findings, 2026-08-19) ---- */

/* FAQ heading row shares the cream ground with the cards row (it sat white
   directly above the tinted section and read as a seam) */
#dm .dmRespRow:has(+ .dmRespRow .accordion-wrapper) {
  background: rgb(10, 82, 96) !important;
  padding-top: 56px !important;
  padding-bottom: 0 !important;
}
#dm .dmRespRow:has(+ .dmRespRow .accordion-wrapper) :is(h1, h2, h3, h4, p),
#dm .dmRespRow:has(+ .dmRespRow .accordion-wrapper) :is(h1, h2, h3, h4, p) span {
  color: #fff !important;
}
#dm .dmRespRow:has(+ .dmRespRow .accordion-wrapper) :is(h1, h2, h3, h4, p)::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  border-radius: 2px;
  background: rgb(231, 160, 101);
  margin: 16px auto 0;
}

/* the 48px all-caps quote banner under the FAQ shouted in a dated way — calm
   it to a confident pull-quote scale (home template row u_1170805113) */
.dmDesktopBody #dm .u_dmStyle_template_home .u_1170805113 p {
  font-size: 36px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}
.dmMobileBody #dm .u_dmStyle_template_home .u_1170805113 p {
  font-size: 24px !important;
  font-weight: 700 !important;
}

/* gallery tiles need air for their radius to read */
#dm .photogallery-column {
  padding: 7px !important;
}

/* footer call BUTTON (a.dmCall) only: square white box -> pill. Scoped
   2026-08-22: the earlier bare a[href^=tel] selector also caught the PLAIN
   inline number in the footer text and turned it into a button — George:
   "I don't know why you've done that... put it back to how it was". */
#dm .dmFooterContainer a.dmCall[href^="tel:"],
#dm .dmFooterContainer div:has(> a.dmCall[href^="tel:"]) {
  border-radius: 28px !important;
  overflow: hidden;
}


/* ---- v2.11 Google-reviews popup cards (George: "on mobile, the icons and
   name don't really seem to be centred"). At narrow widths the drawer's
   Bootstrap grid squeezes the cards and truncates names (reproduced on the
   desktop document at phone width — the state DevTools shows without a
   reload). Cards go full-width with a centred avatar/name/stars header at
   narrow widths on EITHER document; desktop-width rendering (which George
   likes) is untouched. */
@media (max-width: 700px) {
  #dm .ddts_reviews_container .offcanvas .card {
    min-width: 100% !important;
  }
  #dm .ddts_reviews_container .offcanvas .card .col-9 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #dm .ddts_reviews_container .offcanvas .card img.img-fluid {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 0 6px !important;
    display: block;
  }
}

/* ---- v4.22 reviews-panel card layout (George 2026-08-23: "have the icon,
   name, how long ago, and the stars just a bit better aligned... not very
   well designed at all on mobile"). The fragment's card header is a loose
   inline flow (avatar+name in one <p>, stars and time-ago dangling after it
   inside a col-9), so nothing lines up and spacing is cramped. Rebuild the
   header as a tidy grid AT EVERY WIDTH: round avatar on the left spanning
   two rows; name top-right; stars + time-ago on one line beneath the name.
   All 5 stars always visible (nowrap). display:contents on the <p> lifts
   the avatar/name out so they can be grid items — the fragment markup is
   third-party, so layout is imposed here rather than edited there. */
#dm .ddts_reviews_container .offcanvas .card .row:first-child .col-9 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  display: grid !important;
  grid-template-columns: 46px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  text-align: left !important;
}
#dm .ddts_reviews_container .offcanvas .card .row:first-child .col-9 > p {
  display: contents !important;
}
#dm .ddts_reviews_container .offcanvas .card .row:first-child .col-9 img.img-fluid {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 !important;
  display: block;
}
#dm .ddts_reviews_container .offcanvas .card .row:first-child .col-9 > p > a {
  grid-column: 2;
  grid-row: 1;
  font-weight: 600;
  line-height: 1.25;
}
#dm .ddts_reviews_container .offcanvas .card .row:first-child .col-9 > span[style*="fbbc04"] {
  grid-column: 2;
  grid-row: 2;
  white-space: nowrap;
  letter-spacing: 2px;
  font-size: 14px;
  line-height: 1.2;
}
#dm .ddts_reviews_container .offcanvas .card .row:first-child .col-9 > span.text-muted {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  white-space: nowrap;
  font-size: 12px !important;
}
#dm .ddts_reviews_container .offcanvas .card {
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .08);
}
#dm .ddts_reviews_container .offcanvas .card .card-body {
  padding: 14px 16px 10px !important;
}
/* The panel must NEVER render un-opened. The fragment's own layout depends on
   a CDN Bootstrap stylesheet; when that fails or applies late (George's real
   phone, 2026-08-23), the "hidden" offcanvas rendered INLINE over the dark
   section as a cramped pseudo-carousel whose only arrows were the section's
   background photo-slider controls — an un-navigable mess that looked like a
   broken reviews slider. This guard needs no Bootstrap: closed = gone. */
#dm .ddts_reviews_container .offcanvas:not(.show):not(.showing) {
  display: none !important;
}

/* ---- v4.23 contact-page kicker (George 2026-08-23): "Contact Us" is the H1
   (the page must say what it is); "We Are Here to Help You" keeps its big
   strapline look as the H2. The kicker is a small orange overline above it. */
/* repeated-class bump: the v2 hero force-white rule (id + ~4 classes,
   !important) outranks a bare (1,1,0) — the kicker must stay orange on
   the photo. Same idiom as the scrolled-header #hcontainer#hcontainer. */
#dm .dmBody h1.crh-contact-kicker.crh-contact-kicker.crh-contact-kicker.crh-contact-kicker {
  font-size: 16px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgb(231, 160, 101) !important;
  font-weight: 700 !important;
  margin: 0 0 2px !important;
  line-height: 1.4 !important;
}


/* ============================================================================
   v3 — George 2026-08-19 late: "I wanted a proper redesign… bottom half
   especially… go through each bit step by step." Plus breakage + named fixes.
   ============================================================================ */

/* ---- v3.1 hide Google's reCAPTCHA badge (George: "I don't really want the
   'protected by reCAPTCHA' showing"). Google permits hiding it if the
   attribution text is shown instead — the injected JS adds that line under
   the lead form. */
.grecaptcha-badge { visibility: hidden !important; }
.crh-recaptcha-note {
  font-size: 11px;
  color: #8a949c;
  text-align: center;
  margin: 10px auto 0;
  max-width: 640px;
  line-height: 1.5;
}
/* Duda's link colour (white, !important) made these anchors invisible on the
   light form panel — "the Google ___ and ___ apply" (agent-caught 2026-08-22,
   confirmed computed rgb(255,255,255)). Both scopes + !important so the note's
   links are grey/underlined wherever the lead form sits. */
.crh-recaptcha-note a,
#dm .dmBody div.crh-recaptcha-note a,
#dm .p_hfcontainer div.crh-recaptcha-note a {
  color: #8a949c !important;
  text-decoration: underline !important;
}

/* ---- v3.2 teal photo-bands: identical breathing room top and bottom on both
   bands (George: "the spacing on the top and bottom doesn't look consistent
   in those two rows"). */
.dmDesktopBody #dm .dmRespRow:has(> .dmRespColsWrapper > .dmRespCol.empty-column[data-background-image]) {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
.dmMobileBody #dm .dmRespRow:has(> .dmRespColsWrapper > .dmRespCol.empty-column[data-background-image]) {
  padding-top: 36px !important;
  padding-bottom: 28px !important;
}

/* ---- v3.3 the all-caps pull-quote band becomes a deliberate ORANGE feature
   band (it sat as plain dark text on white and read as leftover). White text,
   generous padding — completes the white/teal/orange rhythm. */
#dm .u_dmStyle_template_home .dmRespRow.u_1170805113 {
  background: linear-gradient(120deg, rgb(224, 148, 86) 0%, rgb(231, 160, 101) 100%) !important;
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
#dm .u_dmStyle_template_home .dmRespRow.u_1170805113 p,
#dm .u_dmStyle_template_home .dmRespRow.u_1170805113 p span {
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

/* ---- v3.4 the green step blobs joined the palette (green was the only
   off-brand colour on the page). Numbers stay handwritten-black on orange. */
#dm .u_dmStyle_template_home .u_1569818710 .dmShape svg,
#dm .u_dmStyle_template_home .u_1569818710 .dmShape svg * {
  fill: rgb(231, 160, 101) !important;
}

/* ---- v3.5 footer call button: WHITE pill with teal text (George twice: the
   button was orange-on-orange in the footer band). Highest-contrast object in
   the band; hover lifts. */
#dm .dmFooterContainer a.dmCall[href^="tel:"] {
  background: #fff !important;
  color: rgb(8, 96, 112) !important;
  font-weight: 700 !important;
  border-radius: 28px !important;
  padding: 12px 28px !important;
  display: inline-block;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#dm .dmFooterContainer a.dmCall[href^="tel:"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}
#dm .dmFooterContainer a.dmCall[href^="tel:"] * { color: rgb(8, 96, 112) !important; }
#dm .dmFooterContainer div:has(> a.dmCall[href^="tel:"]) {
  background: transparent !important;
  border-radius: 28px !important;
}

/* ---- v3.6 pages with NO photo hero (blog list, gbp, thank-you…): the
   transparent header left invisible white text on a white page and a dead gap
   (George: "on some of the pages there's just white space at the top"). The
   injected JS tags them body.crh-nohero -> the header is the solid teal bar
   from the very top, pill visible. */
/* orange to match the scrolled bar (one solid-bar identity sitewide) —
   George picked orange for the solid bar 2026-08-22; flagged in report. */
body.dmDesktopBody.crh-nohero #hcontainer.dmHeader.u_hcontainer {
  background: rgb(231, 160, 101) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}
body.dmDesktopBody.crh-nohero #hcontainer .unifiednav__item.unav-top-item,
body.dmDesktopBody.crh-nohero #hcontainer .dmNewParagraph * {
  color: #fff !important;
}
body.dmDesktopBody.crh-nohero .crh-hdr-phone { opacity: 1; pointer-events: auto; }
body.dmDesktopBody.crh-nohero #hcontainer .dmRespColsWrapper {
  display: flex !important;
  align-items: center !important;
  padding-right: 150px !important;
}
body.dmDesktopBody.crh-nohero #hcontainer .dmRespColsWrapper > .dmRespCol:first-child { flex: 0 0 auto !important; width: auto !important; }
body.dmDesktopBody.crh-nohero #hcontainer .dmRespColsWrapper > .dmRespCol:last-child { flex: 1 1 auto !important; width: auto !important; display: flex !important; justify-content: center !important; align-items: center !important; }
body.dmDesktopBody.crh-nohero #hcontainer nav { position: static !important; margin: 0 !important; width: max-content !important; }


/* ============================================================================
   v4 — page-by-page audit round (2026-08-22, George: "go through each bit
   step by step... make your design look really, really good"). Four audit
   agents swept every page; each finding below was re-verified in-browser
   before styling (several agent claims were rejected as capture artifacts —
   see memory/decisions.md).
   ============================================================================ */

/* ---- v4.1 Home intro heading: Duda inline span forces italic-400 on the
   "Car Recovery Sheffield" H2 (u_1173917019) — dated look vs every other
   section heading. Inline style attr has no !important, so this wins. */
#dm .dmBody .u_1173917019 h2 span {
  font-style: normal !important;
  font-weight: 700 !important;
}

/* ---- v4.2 Broken-image safety net. Verified 2026-08-22: the home Promise
   image that prompted this actually LOADS on live and clone once its lazy
   fetch fires (irt-cdn mirror asset, 1091x1333) — the "dead half-row" in
   audit captures was an unfired loading=lazy artifact, so on a healthy page
   NOTHING is tagged and every rule here is inert. Kept as a defensive net:
   if an image genuinely 404s (error event / late probe), the injector JS
   tags it .crh-img-broken and its contentless column .crh-col-collapsed,
   and the Promise text column recentres instead of sitting beside a void. */
img.crh-img-broken { display: none !important; }
#dm .dmRespCol.crh-col-collapsed { display: none !important; }
#dm .dmBody .u_1520924103 .dmRespColsWrapper:has(> .crh-col-collapsed) {
  display: flex !important;
  justify-content: center !important;
}
#dm .dmBody .u_1520924103 .dmRespColsWrapper:has(> .crh-col-collapsed) > .dmRespCol:not(.crh-col-collapsed) {
  float: none !important;
  margin: 0 auto !important;
  text-align: center;
}

/* ---- v4.3 (REVERTED 2026-08-22, George: "put that back to black because I
   liked it how it was") — the quick-band keeps Duda's original black. */

/* ---- v4.4 Parallax bands on MOBILE: background-attachment:fixed is
   unreliable on iOS (zoomed/blank paint); serve the same image as a normal
   scrolling cover so the band always paints. Desktop keeps the parallax. */
.dmMobileBody #dm .dmSectionParallax,
.dmMobileBody #dm [class*="dmSectionParalla"] {
  background-attachment: scroll !important;
}

/* ---- v4.5 Home "Safety" heading (u_1705216041): washed mid-grey
   rgb(81,81,81) vs dark siblings; align with the standard heading colour. */
#dm .dmBody div.u_1705216041 :is(h2, h3) {
  color: #262626 !important;
}

/* ---- v4.6 (REVERTED 2026-08-22): the /blog nav item stays — George: "we do
   need that because that actually goes to a proper page". Demo POSTS are
   still on the cutover cleanup list; the nav keeps both Blogs and Blog. */

/* ---- v4.7 Inner-page hero paragraph links: orange inline links over the
   lightest part of the hero photo were the lowest-contrast text on the page
   (location pages). White + underline reads cleanly on the scrim. */
#dm .dmBody:not(.u_dmStyle_template_home) .dmRespRowsWrapper > .dmRespRow.hasBackgroundOverlay:first-child p a:not([href^="tel:"]) {
  color: #fff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}


/* ---- v4.8 "Things to do" gallery tiles (Chesterfield/Rotherham): every
   tile image 404s on the LIVE CDN (/opt/*-640w.jpeg gone; originals 403 —
   HEAD-checked 2026-08-22), so live and clone both render bare scrim tiles.
   The injector probes each tile's background URL and tags failures
   .crh-tile-broken; those tiles become deliberate teal caption cards.
   Working galleries elsewhere are never tagged and never touched. */
#dm .photoGalleryThumbs .crh-tile-broken {
  background: linear-gradient(150deg, rgb(10, 82, 96) 0%, rgb(8, 96, 112) 100%) !important;
  border-radius: 10px;
}

/* ---- v4.9 "[Town] Neighbourhoods" (u_1978010221, shared across location
   pages): a comma-separated wall of orange links read as dated text soup.
   Chip grid: the paragraph's font-size:0 swallows the raw ", " text nodes,
   each link becomes a rounded chip. */
#dm .dmBody .u_1978010221 .dmNewParagraph:has(a) {
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: center;
}
#dm .dmBody .u_1978010221 .dmNewParagraph a {
  display: inline-block;
  font-size: 14px !important;
  line-height: 1.4 !important;
  padding: 5px 14px;
  margin: 4px 3px;
  background: rgba(231, 160, 101, 0.10);
  border: 1px solid rgba(231, 160, 101, 0.45) !important;
  border-radius: 16px;
  text-decoration: none !important;
  white-space: nowrap;
}
#dm .dmBody .u_1978010221 .dmNewParagraph a:hover {
  background: rgba(231, 160, 101, 0.22);
}


/* ---- v4.10 Service-page "Service Areas" separators on MOBILE: the 1px #333
   right-borders live on dmNewParagraph elements (u_1111473675/u_1973427591)
   on service pages — NOT .dmRespCol as on the pages measured for §1 — so the
   §1 kill list silently missed them and the lines float beside the stacked
   lists (agent-caught, verified computed 1px). Desktop keeps its subtle
   side-by-side separators; mobile stacking makes them meaningless. */
/* Measured on /car-recovery mobile: these paragraphs live in the FOOTER
   (#fcontainer, class p_hfcontainer) — not .dmBody — and Duda's winning rule
   is `#dm .p_hfcontainer div.u_N` (1,2,1)!important. Both scopes covered at
   (1,3,1); desktop keeps its side-by-side column separators. */
.dmMobileBody #dm .dmBody div.dmNewParagraph.u_1111473675,
.dmMobileBody #dm .dmBody div.dmNewParagraph.u_1228905843,
.dmMobileBody #dm .dmBody div.dmNewParagraph.u_1252764906,
.dmMobileBody #dm .dmBody div.dmNewParagraph.u_1537893110,
.dmMobileBody #dm .dmBody div.dmNewParagraph.u_1973427591,
.dmMobileBody #dm .p_hfcontainer div.dmNewParagraph.u_1111473675,
.dmMobileBody #dm .p_hfcontainer div.dmNewParagraph.u_1228905843,
.dmMobileBody #dm .p_hfcontainer div.dmNewParagraph.u_1252764906,
.dmMobileBody #dm .p_hfcontainer div.dmNewParagraph.u_1537893110,
.dmMobileBody #dm .p_hfcontainer div.dmNewParagraph.u_1973427591 {
  border-right-width: 0 !important;
  border-left-width: 0 !important;
}

/* ---- v4.11 Broken gallery tiles: caption legibility. The caption sits in
   its own .caption-container under the (now teal) tile with near-black text
   on the dark caption gradient. Thumb-level class is set by the SAME probe
   that tags the anchor (no :has() — Chromium's :has invalidation on late
   class changes is unreliable here, measured on the header rules). */
.crh-tile-broken-thumb .caption-title,
.crh-tile-broken-thumb .caption-inner {
  color: #fff !important;
}
/* #dm + gallery scope: Duda's own caption gradient is (1,2,0)!important. */
#dm .dmPhotoGallery .crh-tile-broken-thumb .caption-container {
  min-height: 68px;
  background: rgb(7, 64, 74) !important;
  border-radius: 0 0 10px 10px;
}

/* ---- v4.12 Map embeds: fixed 400px iframes floated in 600px columns left
   ragged white slabs beside every map (location pages). Fill the column,
   keep the height. */
#dm .dmBody .dmRespCol iframe[src*="google.com/maps"] {
  width: 100% !important;
}

/* ---- v4.13 List bullets: default #333/black discs beside orange links
   (Service Areas etc.) — recolour every content list marker to the brand
   accent for one consistent list language. */
#dm .dmBody li::marker {
  color: rgb(231, 160, 101);
}

/* ---- v4.14 car-recovery intro H2 "Car towing service Sheffield": inline
   hardcoded rgb(0,0,0) while the same heading on breakdown-recovery /
   car-towing computes the theme orange rgb(231,160,101). Align it. */
#dm .dmBody .u_1665430866 h2 span {
  color: rgb(231, 160, 101) !important;
}

/* ---- v4.15 (REVERTED 2026-08-22, George: "the button in the header on
   mobile just looks shit... Just have it as the number central, exactly as
   it was") — §6 keeps the number centred; no pill styling. */

/* ---- v4.16 Pre-footer "Services:" strip (row u_1431751198, shared on
   service pages): plain grey text list under the styled sections. Give the
   label the small-caps treatment and the links breathing room; the row
   centres so it no longer reads stranded. */
/* The strip's row carries only the numeric id attribute (id="1431751198"),
   no u_ class, and sits in the footer — [id=...] attribute selector, no
   .dmBody scope (measured on /car-recovery). */
#dm [id="1431751198"] {
  text-align: center;
}
#dm [id="1431751198"] .dmNewParagraph {
  font-size: 15px !important;
  line-height: 2 !important;
}
#dm [id="1431751198"] a {
  color: rgb(231, 160, 101) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
#dm [id="1431751198"] a:hover {
  text-decoration: underline !important;
}


/* ---- v4.17 Desktop reading measure. Article pages (blog posts) run body
   copy the full ~1200px content width — far past a comfortable measure.
   No blog marker class exists (each page only has its own template class),
   so the cap is structural: paragraphs sitting in a FULL-WIDTH column are
   capped and centred on desktop. Multi-column grids (medium-6 etc.) are
   untouched; row backgrounds still run full-bleed. */
.dmDesktopBody #dm .dmBody .dmRespCol.large-12 > .dmNewParagraph {
  max-width: 860px;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ---- v4.18 Mobile hamburger drawer: the "Call us" nav entry becomes the
   drawer's one true button (George 2026-08-22: "That would be best to have
   as a button"), and the dark separator line above it goes. */
#dm #mobile-hamburger-drawer a[href^="tel:"] {
  display: inline-block;
  background: rgb(231, 160, 101) !important;
  color: #fff !important;
  font-weight: 700;
  padding: 10px 26px;
  border-radius: 24px;
  text-decoration: none !important;
  margin: 10px 0 6px;
  border: 0 !important;
}
#dm #mobile-hamburger-drawer a[href^="tel:"] * { color: #fff !important; }
/* the separator above the call action (border-top on the item/paragraph
   holding it, colour-defaulted #333) */
#dm #mobile-hamburger-drawer li,
#dm #mobile-hamburger-drawer .dmNewParagraph,
#dm #mobile-hamburger-drawer [class*="unifiednav"] {
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
}

/* ---- v4.19 Teal band CTA position on MOBILE: George — "the click-to-call
   button should be below the picture, not between the text and the picture".
   The injector adds a second row-level pill (.crh-band-cta--after) after the
   photo column; mobile shows that one, desktop keeps the in-column pill. */
.dmMobileBody #dm .dmRespCol:not(.empty-column) > .crh-band-cta { display: none !important; }
.crh-band-cta--after { display: none; }
.dmMobileBody #dm .crh-band-cta--after {
  display: block;
  width: max-content;
  margin: 4px auto 26px;
}

/* ---- v4.20 "How to prepare for a long journey" (u_1569818710): step titles
   were centred but their body text left — centre the whole step column
   (short copy under centred numbered icons; George 2026-08-22). */
#dm .dmBody .u_1569818710 .dmRespCol .dmNewParagraph,
#dm .dmBody .u_1569818710 .dmRespCol .dmNewParagraph * {
  text-align: center !important;
}


/* ---- v4.21 Split-title heroes (SEO pass 2026-08-22): two stacked H1 lines
   became H1 + H2 (one H1 per page); the H2 line keeps its size-70 class, so
   it rendered 70px against the H1's clamped 51px, and the H1's orange
   accent bar sat between the lines. The H2 title-line mirrors the H1
   typography, and the accent moves to the LAST line. */
#dm .dmBody:not(.u_dmStyle_template_home) .dmRespRowsWrapper > .dmRespRow.hasBackgroundOverlay:first-child h2.size-70,
#dm .dmBody:not(.u_dmStyle_template_home) .dmRespRowsWrapper > .dmRespRow.hasBackgroundOverlay:first-child h2.size-60 {
  font-size: clamp(40px, 3.4vw, 58px) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
}
#dm .dmBody:not(.u_dmStyle_template_home) .dmRespRowsWrapper > .dmRespRow.hasBackgroundOverlay:first-child:has(h2.size-70) h1::after,
#dm .dmBody:not(.u_dmStyle_template_home) .dmRespRowsWrapper > .dmRespRow.hasBackgroundOverlay:first-child:has(h2.size-60) h1::after {
  display: none !important;
}
#dm .dmBody:not(.u_dmStyle_template_home) .dmRespRowsWrapper > .dmRespRow.hasBackgroundOverlay:first-child h2.size-70::after,
#dm .dmBody:not(.u_dmStyle_template_home) .dmRespRowsWrapper > .dmRespRow.hasBackgroundOverlay:first-child h2.size-60::after {
  content: "";
  display: block;
  width: 76px;
  height: 4px;
  border-radius: 2px;
  background: rgb(231, 160, 101);
  margin: 14px auto 0;
}