/* ==========================================================================
   H&M — site overrides
   Loaded LAST on every page so these rules always win.
   0) "Site by" credit link in footer bottom bar
   1) Buttons are brand red (#C41230), not the theme's orange accent
   2) Button hover: white background, red text
   3) Header layout fix for tablet / small-laptop widths (768px - 1279px)
   ========================================================================== */

/* ---------- 0a. Locations row (Office + Store side-by-side) ---------- */
.hm-locations-row {
  width: 100%;
  max-width: 1200px;
  margin: 50px auto 0;
  padding: 0 20px;
  display: block !important;     /* override any e-flex column */
  flex-direction: row !important;
}
.hm-locations-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
.hm-locations-col {
  flex: 1 1 280px;
  min-width: 0;
  max-width: 480px;
  color: #ffffff;
}
.hm-locations-title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: .03em;
}
.hm-locations-col p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #ffffff;
}

/* ---------- 0b. Footer map (static image, per-location clickable pins) ---------- */
.hm-footer-map {
  width: 100%;
  max-width: 1200px;
  margin: 28px auto 30px;
  padding: 0 20px;
}
.hm-map-wrap {
  position: relative;
  display: block;
  line-height: 0;               /* kill the inline-image baseline gap */
  border-radius: 6px;
  overflow: hidden;
}
.hm-map-img {
  display: block;
  width: 100%;
  height: auto;                 /* never cropped, so hotspots stay aligned */
  border: 0;
  background: #1a1a1a;          /* matches dark footer bar until image loads */
}
/* Transparent hotspots sitting over each pin - each opens only that location */
.hm-pin {
  position: absolute;
  display: block;
  border-radius: 8px;
  background: transparent;
  transition: background .15s ease, box-shadow .15s ease;
}
.hm-pin:hover,
.hm-pin:focus-visible {
  background: rgba(196, 18, 48, .14);
  box-shadow: inset 0 0 0 2px rgba(196, 18, 48, .55);
}
.hm-pin-store  { left: 29.55%; top: 16.84%; width: 27.36%; height: 13.47%; }
.hm-pin-office { left: 65.91%; top: 69.70%; width: 27.53%; height: 13.47%; }

@media (max-width: 767px) {
  .hm-footer-map { margin: 22px auto 20px; }
  .hm-locations-row { margin-top: 36px; }
  /* larger tap targets on phones */
  .hm-pin-store  { left: 25%; top: 11%; width: 36%; height: 24%; }
  .hm-pin-office { left: 61%; top: 65%; width: 37%; height: 24%; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .hm-locations-grid { gap: 30px; }
}

/* ---------- 0c. Counter numbers: keep figures on ONE line ---------- */
/* The theme sizes these in vw, which outgrows their card at desktop/tablet
   widths, so "1,000" wrapped into "1,00" + "0". Never break mid-figure. */
.trx-addons-counter-number-wrap,
.trx-addons-counter-number-title-wrap,
.trx-addons-counter-number,
.trx-addons-counter-number-prefix,
.trx-addons-counter-number-suffix,
.trx-addons-counter-number .odometer-digit,
.trx-addons-counter-number .odometer-value {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}
/* Let the figure scale to its card instead of overflowing.
   The 4-up stat grid (shared by every service page) sizes its numbers in vw,
   which outgrows the card on desktop/tablet, so size them against the CARD
   width (cqw) instead - they then shrink to fit rather than break. */
.elementor-element-867250a .elementor-widget-trx_elm_counter,
.elementor-element-39bc871 .elementor-widget-trx_elm_counter {
  container-type: inline-size;
}
@media (min-width: 768px) {
  .elementor-element-867250a .trx-addons-counter-number-wrap,
  .elementor-element-39bc871 .trx-addons-counter-number-wrap {
    font-size: 33cqw !important;   /* ~0.33 x card width; "1,000+" needs 0.35 */
    line-height: 1.12;
  }
}
/* Fallback for browsers without container queries */
@supports not (font-size: 1cqw) {
  @media (min-width: 768px) {
    .elementor-element-867250a .trx-addons-counter-number-wrap,
    .elementor-element-39bc871 .trx-addons-counter-number-wrap {
      font-size: 4.3vw !important;
    }
  }
}

/* ---------- 0d. Mobile slide-out menu: white panel, dark links ---------- */
/* Theme default paints this panel a dark warm grey (#2E2828) with white
   links - a leftover from the original brown palette. The rest of the site
   is white/red/black, so make the panel white with dark links. */
.trx-addons-mobile-menu-outer-container {
  background-color: #ffffff !important;
  border-right: 1px solid #ececec;
}
.trx-addons-mobile-menu,
.trx-addons-main-mobile-menu,
.trx-addons-mobile-menu-container {
  background-color: transparent !important;
}
.trx-addons-mobile-menu .trx-addons-menu-link,
.trx-addons-mobile-menu .trx-addons-submenu-link,
.trx-addons-mobile-menu-container .trx-addons-menu-link,
.trx-addons-mobile-menu-container .trx-addons-submenu-link {
  color: #141414 !important;
}
.trx-addons-mobile-menu .trx-addons-menu-link:hover,
.trx-addons-mobile-menu-container .trx-addons-menu-link:hover,
.trx-addons-mobile-menu .trx-addons-submenu-link:hover {
  color: var(--gold-400, #c41230) !important;
}
/* dropdown panels inside the menu */
.trx-addons-mobile-menu-container .trx-addons-submenu {
  background-color: #ffffff !important;
  border-color: #ececec !important;
  box-shadow: none !important;
}
/* the caret + close icons must be dark on white */
.trx-addons-mobile-menu .trx-addons-dropdown-icon,
.trx-addons-mobile-menu-container .trx-addons-dropdown-icon,
.trx-addons-mobile-menu .trx-addons-dropdown-icon svg path,
.trx-addons-mobile-menu-container .trx-addons-dropdown-icon svg path {
  color: #141414 !important;
  fill: #141414 !important;
}
.trx-addons-mobile-menu-close,
.trx-addons-mobile-menu-close i,
.trx-addons-mobile-menu-close svg path {
  color: #141414 !important;
  fill: #141414 !important;
}

/* ---------- 0. Footer credit link ---------- */
.hm-credit-link {
  color: inherit;                       /* match surrounding white text on dark bar */
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.hm-credit-link:hover,
.hm-credit-link:focus-visible {
  color: var(--gold-400, #c41230);      /* brand red hover on dark section */
  border-bottom-color: var(--gold-400, #c41230);
}

/* ---------- 1. Buttons: brand red ---------- */
.elementor-button,
.elementor-button.elementor-size-sm,
.elementor-button.elementor-size-md,
.elementor-button.elementor-size-lg,
.elementor-button.elementor-size-xl,
a.elementor-button,
.elementor-button-link,
.wp-block-button__link,
button[type="submit"],
input[type="submit"],
input[type="button"],
.trx_addons_button,
.sc_button {
  background-color: #C41230 !important;
  border-color: #C41230 !important;
  color: #ffffff !important;
}

/* keep icon + label in step with the button colour */
.elementor-button .elementor-button-text,
.elementor-button .elementor-button-content-wrapper,
.elementor-button span,
.elementor-button div {
  color: inherit !important;
}
.elementor-button svg,
.elementor-button .e-font-icon-svg {
  fill: currentColor !important;
  color: inherit !important;
}
.elementor-button svg path {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ---------- 2. Button hover: white background, red text ---------- */
.elementor-button:hover,
.elementor-button:focus,
.elementor-button:focus-visible,
a.elementor-button:hover,
.elementor-button-link:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.trx_addons_button:hover,
.sc_button:hover {
  background-color: #ffffff !important;
  border-color: #C41230 !important;
  color: #C41230 !important;
}

/* ---------- 3. Header: tablet (768px - 1366px) ----------
   Desktop-style bar: white strip, big circular logo hanging below the edge and
   the red 24/7 phone panel flush to the right edge. The inline menu can't fit
   at these widths (8 items need ~820px on their own), so the burger replaces
   it and opens the same full menu.                                        */

@media (min-width: 768px) and (max-width: 1366px) {

  /* keep the desktop strip + desktop row out of the way, use the compact row */
  .top_panel .elementor-element-01dd775,
  .top_panel .elementor-element-1445ceab { display: none !important; }

  .top_panel { background: #fff !important; position: relative; z-index: 40; }

  .top_panel .elementor-element-481bca {
    display: flex !important;
    padding: 0 !important;
    background: #fff !important;
    min-height: 76px !important;
    align-items: stretch !important;
  }

  .top_panel .elementor-element-1f85929 {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 76px !important;
    background: #fff !important;
    padding: 0 0 0 30px !important;
    gap: 0 !important;
    position: relative !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.07);
  }

  /* ---- logo: 96px circle, hanging 28px below the bar like desktop ---- */
  .top_panel .elementor-element-525999b0 {
    width: 96px !important;
    flex: 0 0 96px !important;
    height: 76px !important;
    position: relative !important;
    display: block !important;
  }
  .top_panel .elementor-element-c717ae7,
  .top_panel .elementor-element-c717ae7 .elementor-widget-container { position: static !important; }
  .top_panel .elementor-element-c717ae7 a {
    display: block !important;
    width: 96px !important;
    height: 96px !important;
  }
  .top_panel .elementor-element-c717ae7 img,
  .top_panel .elementor-element-c717ae7 .logo_image {
    position: absolute !important;
    top: 8px !important;
    left: 0 !important;
    width: 96px !important;
    height: 96px !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 50% !important;
    z-index: 6;
  }

  /* ---- right hand group ---- */
  .top_panel .elementor-element-7d032b8b {
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    height: 76px !important;
  }

  /* burger sits left of the red panel */
  .top_panel .elementor-element-32a5cc45 {
    order: -1 !important;
    width: 64px !important;
    height: 76px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* the widget wrapper is stretched to the full bar height, which pinned the
     icon to the top edge; centre it both ways */
  .top_panel .elementor-element-32a5cc45 .elementor-widget-container {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .top_panel .elementor-element-32a5cc45 .trx-addons-hamburger-toggle {
    color: #141414 !important;
    width: 26px !important;
    height: 26px !important;
  }
  .top_panel .elementor-element-32a5cc45 svg {
    width: 26px !important;
    height: 26px !important;
    fill: #141414 !important;
    color: #141414 !important;
  }

  /* red 24/7 panel, flush to the right edge, full bar height */
  .top_panel .elementor-element-3319298f { height: 76px !important; display: flex !important; background: #c41230 !important; }
  .top_panel .elementor-element-3319298f .elementor-widget-container {
    background: #c41230 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 26px 0 22px !important;
  }
  .top_panel .elementor-element-3319298f .trx-addons-list-container,
  .top_panel .elementor-element-3319298f .trx-addons-list-items,
  .top_panel .elementor-element-3319298f li,
  .top_panel .elementor-element-3319298f a {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }
  .top_panel .elementor-element-3319298f a { gap: 12px !important; }
  .top_panel .elementor-element-3319298f svg {
    width: 28px !important;
    height: 28px !important;
    fill: #fff !important;
    color: #fff !important;
  }
  .top_panel .elementor-element-3319298f h6 {
    color: #fff !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: .01em !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  .top_panel .elementor-element-3319298f h6::before {
    content: "24/7 Emergency";
    display: block !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,.85) !important;
    margin-bottom: 2px !important;
  }

  .top_panel,
  .top_panel .elementor-4911 { min-height: 0 !important; }
}

/* ---------- 5. Real customer testimonials (replaces empty widget) ---------- */
.hm-testimonials {
  --hm-tr: #c41230;
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 10px;
}
@media (max-width: 1024px) { .hm-testimonials { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .hm-testimonials { grid-template-columns: 1fr; } }
.hm-testimonials .hm-t-card {
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 24px 22px 22px;
  box-shadow: 0 10px 28px rgba(20,20,20,.05);
  display: flex;
  flex-direction: column;
}
.hm-testimonials .hm-t-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.hm-testimonials .hm-t-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--hm-tr); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
  font-family: 'Hanken Grotesk', Arial, sans-serif;
}
.hm-testimonials .hm-t-name {
  font-family: 'Hanken Grotesk', Arial, sans-serif;
  font-weight: 700; font-size: 16px; color: #141414; line-height: 1.2;
}
.hm-testimonials .hm-t-when { font-size: 12px; color: #777; }
.hm-testimonials .hm-t-stars {
  color: #f5a623; font-size: 15px; letter-spacing: 2px; margin: 4px 0 10px;
}
.hm-testimonials .hm-t-text {
  color: #333; font-size: 15px; line-height: 1.6; margin: 0 0 14px;
  flex: 1 1 auto;
}
.hm-testimonials .hm-t-branch {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #666; border-top: 1px solid #ececec; padding-top: 12px;
}
.hm-testimonials .hm-t-branch strong { color: var(--hm-tr); font-weight: 700; }
.hm-testimonials .hm-t-google {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; font-size: 12px; color: #666; text-decoration: none;
}
.hm-testimonials .hm-t-google:hover { color: var(--hm-tr); }

.hm-reviews-cta {
  margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
}
.hm-reviews-cta a {
  display: inline-flex; align-items: center; gap: 8px;
  background: #141414; color: #fff; text-decoration: none;
  padding: 12px 20px; border-radius: 6px; border: 2px solid #141414;
  font-family: 'Hanken Grotesk', Arial, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: background .15s ease, border-color .15s ease;
  white-space: nowrap;
  max-width: 100%;
}
.hm-reviews-cta a:hover { background: #c41230; color: #fff; border-color: #c41230; }
.hm-reviews-cta a.hm-reviews-cta-ghost { background: transparent; color: #141414; border: 2px solid #141414; }
.hm-reviews-cta a.hm-reviews-cta-ghost:hover { background: #c41230; color: #fff; border-color: #c41230; }

/* ---- testimonial carousel: one review centred, arrows outside the box ---- */
.hm-testimonials {
  display: block;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.hm-t-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.hm-t-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.hm-t-track {
  display: flex;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.hm-t-track .hm-t-card {
  flex: 0 0 100%;
  max-width: 100%;
  margin: 0;
}
.hm-t-arrow {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  color: #141414;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 6px 16px rgba(20,20,20,.14);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hm-t-arrow:hover { background: #c41230; color: #fff; border-color: #c41230; }
.hm-t-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.hm-t-dots button {
  width: 9px; height: 9px; border-radius: 50%;
  border: 0; padding: 0; background: #d5d5d5; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.hm-t-dots button.is-active { background: #c41230; transform: scale(1.25); }
@media (max-width: 640px) {
  .hm-t-row { gap: 10px; }
  .hm-t-arrow { width: 40px; height: 40px; font-size: 22px; }
}

/* ==========================================================================
   4) FOOTER — mobile & tablet tidy-up  (scoped below 1280px, where the theme
   switches the footer to its desktop 4-column layout)
   Problems fixed: columns stacked with gap:0, long emails breaking mid-word,
   the chat launcher covering the bottom bar.
   ========================================================================== */
@media (max-width: 1279px) {

  /* brand column: space out logo / blurb / Office+Store */
  .footer_wrap .elementor-element-f2011bf {
    gap: 22px !important;
  }

  /* the Contact / Links / Get-in-Touch row: let it wrap so a column is never
     so narrow that "info@hmlocksmithandsecurity.co.uk" breaks mid-word */
  .footer_wrap .elementor-element-1dc555c {
    gap: 34px 30px !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .footer_wrap .elementor-element-1dc555c > .e-con {
    flex: 1 1 320px !important;
    min-width: 0 !important;
    width: auto !important;
  }

  /* long addresses/emails: never split a word mid-way */
  .footer_wrap a[href^="mailto:"] {
    display: inline-block;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  /* bottom bar: room to breathe + clear of the chat launcher */
  .footer_wrap .elementor-element-38cab91 {
    gap: 10px 30px !important;
    padding-top: 6px !important;
    padding-bottom: 84px !important;
  }
}

@media (max-width: 767px) {
  /* tighter address columns so Office and Store still fit side by side */
  .footer-address-row { gap: 20px !important; }
  .footer-address-col { min-width: 118px !important; }

  .footer_wrap .elementor-element-34df354 { gap: 40px !important; }
  .footer_wrap .elementor-element-1dc555c { gap: 34px !important; }
}

/* WhatsApp item in the mobile burger menu */
.hm-wa-menu-item .hm-wa-icon { width: 16px; height: 16px; flex: none; margin-right: 8px; }

/* ---------- Our Work gallery ---------- */
.hm-work-gallery { width: 100%; }
.hm-work-group { margin-bottom: 48px; }
.hm-work-group:last-child { margin-bottom: 0; }
.hm-work-group h3 {
  font-family: 'Hanken Grotesk', Arial, sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #c41230; margin: 0 0 18px;
}
.hm-work-grid { columns: 3; column-gap: 16px; }
@media (max-width: 900px) { .hm-work-grid { columns: 2; } }
@media (max-width: 560px) { .hm-work-grid { columns: 1; } }
.hm-work-grid img {
  width: 100%; height: auto; display: block; margin: 0 0 16px;
  border-radius: 10px; box-shadow: 0 10px 28px rgba(20,20,20,.08);
  break-inside: avoid; -webkit-column-break-inside: avoid;
}

/* ---------- Homepage "We deliver" image column: show the WHOLE photo ---------- */
/* The container was a 50%-wide box with background-size:cover, so the portrait
   photo was cropped/zoomed. Match the box to the photo's 3:4 ratio and contain
   the image, so the full frame is visible at every breakpoint. */
.elementor-5286 .elementor-element.elementor-element-720d961b {
  aspect-ratio: 3 / 4 !important;
  min-height: 0 !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-color: #141414;
}

/* ---------- Our Work: giant "H&M Group" sign-off text ---------- */
/* Was font-size:24.5vw + nowrap, so it overflowed the page and clipped mid-word.
   Sized to fit the container on one line at every width. */
.elementor-4993 .elementor-element.elementor-element-2706ac39 {
  margin: 0 !important;          /* drop the -4vw / -7vw negative margins that let the footer cut the letters */
}
.elementor-4993 .elementor-element.elementor-element-2706ac39 .elementor-heading-title {
  font-size: 17vw !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em;
}

/* ---------- Our Work: click-to-zoom lightbox ---------- */
.hm-work-grid img { cursor: zoom-in; }
.hm-work-grid img:focus-visible { outline: 3px solid #c41230; outline-offset: 3px; }
.hm-lb-lock { overflow: hidden; }
.hm-lightbox {
  position: fixed; inset: 0; z-index: 2147483000; display: none;
  align-items: center; justify-content: center;
  background: rgba(12,12,12,.94); padding: 48px 72px;
}
.hm-lightbox.is-open { display: flex; }
.hm-lb-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hm-lb-img {
  max-width: min(1100px, 86vw); max-height: 74vh; width: auto; height: auto;
  border-radius: 6px; box-shadow: 0 24px 70px rgba(0,0,0,.65); background: #111;
}
.hm-lb-cap { display: block !important; color: #fff; font-size: 14px; opacity: .72; text-align: center; max-width: 80vw; }
.hm-lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; font-size: 30px; line-height: 1;
  cursor: pointer; display: grid; place-items: center; transition: background .2s ease;
}
.hm-lb-btn:hover { background: #c41230; }
.hm-lb-prev { left: 12px; }
.hm-lb-next { right: 12px; }
.hm-lb-close {
  position: absolute; top: 12px; right: 14px; width: 44px; height: 44px;
  border: 0; background: none; color: #fff; font-size: 34px; line-height: 1;
  cursor: pointer; transition: color .2s ease;
}
.hm-lb-close:hover { color: #c41230; }
@media (max-width: 767px) {
  .hm-lightbox { padding: 64px 10px 48px; }
  .hm-lb-btn { width: 42px; height: 42px; font-size: 24px; }
  .hm-lb-prev { left: 4px; }
  .hm-lb-next { right: 4px; }
  .hm-lb-img { max-height: 74vh; }
}

/* ---------- Home: "Book A Service Now" bar ---------- */
.hm-book-msg {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}
.hm-book-msg.is-err { color: #c41230; }
.hm-book-msg.is-ok  { color: #1c7a4a; }
.hm-book-msg a { color: inherit; text-decoration: underline; }
.elementor-form .hm-invalid {
  border-color: #c41230 !important;
  box-shadow: 0 0 0 2px rgba(196, 18, 48, .16) !important;
}
@media (max-width: 767px) {
  .hm-book-msg { text-align: center; }
}

/* Elementor's own form handler prints its own red "error" line when its
   admin-ajax post fails on the static build; we handle the submit ourselves. */
.elementor-element-fb4226f .elementor-message { display: none !important; }

/* ---------- Trades: one hero photo per service ---------- */
/* Seven trade pages share page-id-8340 / post-8340.css and were all showing the
   same 399.webp hero. Each page now carries its own body class and its own
   photo, so no shared-file edits are needed. */
body.hm-svc-locksmith .elementor-element-25f53175:not(.elementor-motion-effects-element-type-background),
body.hm-svc-home-security .elementor-element-25f53175:not(.elementor-motion-effects-element-type-background),
body.hm-svc-cctv .elementor-element-25f53175:not(.elementor-motion-effects-element-type-background),
body.hm-svc-painting .elementor-element-25f53175:not(.elementor-motion-effects-element-type-background),
body.hm-svc-refurb .elementor-element-25f53175:not(.elementor-motion-effects-element-type-background),
body.hm-svc-building .elementor-element-25f53175:not(.elementor-motion-effects-element-type-background),
body.hm-svc-technical .elementor-element-25f53175:not(.elementor-motion-effects-element-type-background),
body.hm-svc-insurance .elementor-element-25f53175:not(.elementor-motion-effects-element-type-background) {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center 50% !important;
}

body.hm-svc-locksmith .elementor-element-25f53175:not(.elementor-motion-effects-element-type-background) {
  background-image: url('/wp-content/uploads/2026/10/locksmith-workshop.webp') !important;
  background-position: center 52% !important;
}
body.hm-svc-home-security .elementor-element-25f53175:not(.elementor-motion-effects-element-type-background) {
  background-image: url('/wp-content/uploads/2026/09/2151015244.jpg') !important;
  background-position: center 45% !important;
}
body.hm-svc-cctv .elementor-element-25f53175:not(.elementor-motion-effects-element-type-background) {
  background-image: url('/wp-content/uploads/2026/05/15034.jpg') !important;
  background-position: center 40% !important;
}
body.hm-svc-painting .elementor-element-25f53175:not(.elementor-motion-effects-element-type-background) {
  background-image: url('/assets/img/work/gallery-22.jpg') !important;
  background-position: center 55% !important;
}
body.hm-svc-refurb .elementor-element-25f53175:not(.elementor-motion-effects-element-type-background) {
  background-image: url('/wp-content/uploads/2026/10/refurbishment-hero.webp') !important;
  background-position: center 38% !important;
}
body.hm-svc-building .elementor-element-25f53175:not(.elementor-motion-effects-element-type-background) {
  background-image: url('/wp-content/uploads/2026/05/freepik__our-company-uniform-is-attached-companyshirt-i-wan__46283-scaled.jpg') !important;
  background-position: center 45% !important;
}
body.hm-svc-technical .elementor-element-25f53175:not(.elementor-motion-effects-element-type-background) {
  background-image: url('/wp-content/uploads/2026/05/10721.webp') !important;
  background-position: center 50% !important;
}
body.hm-svc-insurance .elementor-element-25f53175:not(.elementor-motion-effects-element-type-background) {
  background-image: url('/wp-content/uploads/2026/04/11092.jpg') !important;
  background-position: center 45% !important;
}

/* the theme fades its overlay to .25, which is not enough over bright photos */
body[class*="hm-svc-"] .elementor-element-25f53175::before {
  opacity: .75 !important;
}

@media (max-width: 767px) {
  body.hm-svc-locksmith .elementor-element-25f53175:not(.elementor-motion-effects-element-type-background) { background-position: center 45% !important; }
  body[class*="hm-svc-"] .elementor-element-25f53175::before {
    background-image: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.50) 45%, rgba(0,0,0,.80) 100%) !important;
    opacity: 1 !important;
  }
}

/* ---------- Home services carousel: side arrows (desktop) ---------- */
.elementor-element-c266de1 { position: relative; }
.hm-car-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c41230;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
  transition: background .2s ease, box-shadow .2s ease;
}
.hm-car-arrow svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.hm-car-arrow:hover { background: #141414; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.hm-car-arrow:focus-visible { outline: 3px solid #141414; outline-offset: 3px; }
.hm-car-prev { left: 18px; }
.hm-car-next { right: 18px; }

/* desktop only - touch devices keep swiping */
@media (min-width: 1025px) {
  .hm-car-arrow { display: flex; }
  /* hide Elementor's own arrows, which sit inside the sliding wrapper */
  .hm-car-ready .elementor-swiper-button { display: none !important; }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  .hm-car-arrow { width: 50px; height: 50px; }
  .hm-car-prev { left: 14px; }
  .hm-car-next { right: 14px; }
}

/* ---------------------------------------------------------------------------
   Homepage hero, 601–767px: Elementor switches the section to the mobile
   photo background at 767px but only lightens the heading text at 600px, so
   for 167px of width the headline sat dark on top of the photo. Match the
   phone treatment (white type) across the whole photo range.
   --------------------------------------------------------------------------- */
@media (min-width: 601px) and (max-width: 767px) {
  .elementor-element-78cf0e9 .elementor-heading-title,
  .elementor-element-78cf0e9 .elementor-heading-title a,
  .elementor-element-78cf0e9 h1,
  .elementor-element-78cf0e9 h2,
  .elementor-element-78cf0e9 h3 {
    color: #ffffff !important;
  }
  /* keep the small "Happy clients" label readable too */
  .elementor-element-78cf0e9 .elementor-heading-title span {
    color: #ffffff !important;
  }
}

/* Same band: the photo is bright behind the van, so a light scrim keeps the
   white headline and the "Happy clients" label crisp. Desktop is untouched. */
@media (min-width: 601px) and (max-width: 767px) {
  .elementor-element-78cf0e9 { position: relative; }
  .elementor-element-78cf0e9::before {
    content: "" !important;
    position: absolute;
    inset: 0;
    opacity: 1 !important;
    background: linear-gradient(90deg,
      rgba(0, 0, 0, .60) 0%,
      rgba(0, 0, 0, .55) 38%,
      rgba(0, 0, 0, .42) 62%,
      rgba(0, 0, 0, .26) 82%,
      rgba(0, 0, 0, .08) 100%) !important;
    pointer-events: none;
    z-index: 0;
  }
  .elementor-element-78cf0e9 > .e-con-inner,
  .elementor-element-78cf0e9 > .elementor-container {
    position: relative;
    z-index: 1;
  }
}

/* Belt and braces for that band: a soft shadow keeps white type legible even
   where the van's bright panel sits directly behind the headline. */
@media (min-width: 601px) and (max-width: 767px) {
  .elementor-element-78cf0e9 .elementor-heading-title {
    text-shadow: 0 2px 16px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .45);
  }
}

/* ---------------------------------------------------------------------------
   Homepage intro: WhatsApp button beside the red "Contact Us" button.
   Ghost treatment (white fill, red border) so the red CTA stays the primary.
   --------------------------------------------------------------------------- */
.elementor-element-b42a0ea,
.elementor-element-b42a0ea .elementor-widget-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.elementor-element-b42a0ea a.elementor-button.hm-wa-btn {
  background: #ffffff !important;
  color: #c41230 !important;
  border: 2px solid #c41230;
  padding: 16px 38px !important;   /* 2px border keeps the 56px height of the red button */
  border-radius: 889px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.elementor-element-b42a0ea a.elementor-button.hm-wa-btn:hover,
.elementor-element-b42a0ea a.elementor-button.hm-wa-btn:focus-visible {
  background: #c41230 !important;
  color: #ffffff !important;
  border-color: #c41230;
}
.elementor-element-b42a0ea a.elementor-button.hm-wa-btn .elementor-button-icon svg,
.elementor-element-b42a0ea a.elementor-button.hm-wa-btn .hm-wa-svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}
@media (max-width: 1279px) {
  .elementor-element-b42a0ea a.elementor-button.hm-wa-btn {
    padding: 14px 34px !important;
  }
}
@media (max-width: 767px) {
  .elementor-element-b42a0ea a.elementor-button.hm-wa-btn {
    padding: 12px 28px !important;
  }
}

/* Footer contact lines are now clickable tel:/mailto: links — keep them looking
   like the rest of the footer copy instead of the theme's red link colour. */
footer .elementor-widget-text-editor p a {
  color: inherit !important;
  text-decoration: none;
  transition: color .18s ease;
}
footer .elementor-widget-text-editor p a:hover,
footer .elementor-widget-text-editor p a:focus-visible {
  color: #ff8a99 !important;   /* light red reads better than brand red on black */
  text-decoration: underline;
}

/* In-page anchors (#services, #quote, #contact) were landing underneath the
   sticky header, hiding the section heading. */
#services,
#quote,
#contact,
section[id],
div[id].elementor-element {
  scroll-margin-top: 124px;
}
@media (max-width: 767px) {
  #services,
  #quote,
  #contact {
    scroll-margin-top: 100px;
  }
}

/* ---------------------------------------------------------------------------
   Trade pages share one intro-column photo (the door + keys shot) because the
   template CSS in post-8340.css is shared by all of them. Give every service a
   relevant image instead. Each file is pre-framed at the column's aspect ratio
   with the whole photo visible, so nothing is cropped.
   --------------------------------------------------------------------------- */
body.hm-svc-gas .elementor-element-e616330,
body.hm-svc-gas .elementor-element-e616330 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url("/wp-content/uploads/2026/10/col-gas-heating.webp") !important;
}
body.hm-svc-plumbing .elementor-element-e616330,
body.hm-svc-plumbing .elementor-element-e616330 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url("/wp-content/uploads/2026/10/col-plumbing.webp") !important;
}
body.hm-svc-electrical .elementor-element-e616330,
body.hm-svc-electrical .elementor-element-e616330 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url("/wp-content/uploads/2026/10/col-electrical.webp") !important;
}
body.hm-svc-locksmith .elementor-element-e616330,
body.hm-svc-locksmith .elementor-element-e616330 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url("/wp-content/uploads/2026/10/col-locksmith.webp") !important;
}
body.hm-svc-home-security .elementor-element-e616330,
body.hm-svc-home-security .elementor-element-e616330 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url("/wp-content/uploads/2026/10/col-home-security.webp") !important;
}
body.hm-svc-cctv .elementor-element-e616330,
body.hm-svc-cctv .elementor-element-e616330 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url("/wp-content/uploads/2026/10/col-cctv.webp") !important;
}
body.hm-svc-painting .elementor-element-e616330,
body.hm-svc-painting .elementor-element-e616330 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url("/wp-content/uploads/2026/10/col-painting.webp") !important;
}
body.hm-svc-refurb .elementor-element-e616330,
body.hm-svc-refurb .elementor-element-e616330 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url("/wp-content/uploads/2026/10/col-refurbishment.webp") !important;
}
body.hm-svc-building .elementor-element-e616330,
body.hm-svc-building .elementor-element-e616330 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url("/wp-content/uploads/2026/10/col-building.webp") !important;
}
body.hm-svc-insurance .elementor-element-e616330,
body.hm-svc-insurance .elementor-element-e616330 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url("/wp-content/uploads/2026/10/col-insurance.webp") !important;
}
body.hm-svc-technical .elementor-element-e616330,
body.hm-svc-technical .elementor-element-e616330 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url("/wp-content/uploads/2026/10/col-technical.webp") !important;
}

/* Homepage intro section: new portrait van-logo photo — cap the height so it
   doesn't stretch the two-column layout on desktop. */
.elementor-element-74c2f39 img {
  max-height: 560px;
  width: 100%;
  object-fit: cover;
  object-position: center 40%;
  border-radius: 14px;
  background: #111;
}
@media (max-width: 767px) {
  .elementor-element-74c2f39 img {
    max-height: 340px;
    border-radius: 10px;
  }
}

/* ---------------------------------------------------------------------------
   1. Hide the theme's scroll-to-top button — it overlaps the chat launcher
      and its dark background (#2E2828) shows as a "black line" beside it.
   2. Remove the input-area top border inside the chat panel (clean look).
   --------------------------------------------------------------------------- */
a.trx_addons_scroll_to_top,
.trx_addons_scroll_to_top {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Netlify "Powered by Netlify" badge
   Netlify injects an iframe (#nl-badge-frame) at bottom-right with
   z-index 2147483645, which paints a dark bar over the chat launcher.
   Nothing can out-stack that, so remove it from the page.
--------------------------------------------------------------------------- */
#nl-badge-frame,
iframe[title="Powered by Netlify"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ---------------------------------------------------------------------------
   Services CTA — button directly under the homepage services carousel
--------------------------------------------------------------------------- */
.hm-services-cta {
  display: flex;
  justify-content: center;
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  padding: 0 20px 64px;
  box-sizing: border-box;
}
.hm-services-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #1a1a1a;
  color: #fff !important;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 18px 36px;
  border-radius: 889px;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
}
.hm-services-cta-btn svg { width: 17px; height: 17px; flex: none; }
.hm-services-cta-btn:hover,
.hm-services-cta-btn:focus {
  background: #c41230;
  color: #fff !important;
  transform: translateY(-2px);
}
@media (max-width: 600px) {
  .hm-services-cta { padding: 0 16px 44px; }
  .hm-services-cta-btn { padding: 16px 26px; font-size: 0.94rem; }
}

/* ---------------------------------------------------------------------------
   Stat counter labels: the theme forces white-space:nowrap, so a long label
   ("Rating across all platform") spills out of its card and over the next
   column. Let them wrap inside their card instead.
--------------------------------------------------------------------------- */
.trx-addons-counter-title {
  white-space: normal !important;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Mobile stat cards (the 2x2 "1,000+ / 17 / 500+ / 4.9" block).
   Elementor sets --e-con-grid-template-rows: repeat(2, 1fr) on the grid and the
   grid stretches to its flex parent, so below 768px each card ballooned to a
   ~550px column with the number floating over the background. Pin the rows and
   position the counter widget to the card box so it cannot overflow.
--------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .e-grid:has(.trx-addons-counter),
  .elementor-element-39bc871,
  .elementor-element-867250a {
    grid-template-rows: repeat(2, 152px) !important;
    grid-auto-rows: 152px !important;
    align-content: start !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    --min-height: 0 !important;
  }
  .e-grid:has(.trx-addons-counter) > .e-con,
  .elementor-element-39bc871 > .e-con,
  .elementor-element-867250a > .e-con {
    position: relative !important;
    overflow: hidden !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  /* The counter widget reports a stale ~375px height, so it overflowed the
     card. Pin it to the card box and centre its content instead. */
  .e-grid:has(.trx-addons-counter) > .e-con > .elementor-widget,
  .elementor-element-39bc871 > .e-con > .elementor-widget,
  .elementor-element-867250a > .e-con > .elementor-widget {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: auto !important;
    width: auto !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
  }
  .e-grid:has(.trx-addons-counter) > .e-con > .elementor-widget > .elementor-widget-container,
  .elementor-element-39bc871 > .e-con > .elementor-widget > .elementor-widget-container,
  .elementor-element-867250a > .e-con > .elementor-widget > .elementor-widget-container {
    width: 100% !important;
  }
  .e-grid:has(.trx-addons-counter) .trx-addons-counter-title,
  .elementor-element-39bc871 .trx-addons-counter-title,
  .elementor-element-867250a .trx-addons-counter-title {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
}

/* ---------------------------------------------------------------------------
   Unify typography on the home page and the two landing pages (+ their shared
   header/footer). They were mixing four families (Hanken Grotesk, DM Sans,
   Inter, Manrope); the CTA buttons use Hanken Grotesk, so all text matches them.
   Icon fonts are excluded so glyph icons keep rendering.
--------------------------------------------------------------------------- */
body.home,
body.page-id-99010,
body.page-id-90102,
.hm-landing {
  --e-global-typography-primary-font-family: "Hanken Grotesk";
  --e-global-typography-secondary-font-family: "Hanken Grotesk";
  --e-global-typography-text-font-family: "Hanken Grotesk";
  --e-global-typography-accent-font-family: "Hanken Grotesk";
  --e-global-typography-theme_font_p-font-family: "Hanken Grotesk";
}
.hm-landing { --hm-body: 'Hanken Grotesk', Arial, sans-serif; }

body.home :is(h1,h2,h3,h4,h5,h6,p,li,a,span,div,strong,em,b,blockquote,label,figcaption,button,td,th,dt,dd,summary,input,select,textarea):not(i):not(.eicon):not([class^="eicon-"]):not([class*="trx_addons_icon"]),
body.page-id-99010 :is(h1,h2,h3,h4,h5,h6,p,li,a,span,div,strong,em,b,blockquote,label,figcaption,button,td,th,dt,dd,summary,input,select,textarea):not(i):not(.eicon):not([class^="eicon-"]):not([class*="trx_addons_icon"]),
body.page-id-90102 :is(h1,h2,h3,h4,h5,h6,p,li,a,span,div,strong,em,b,blockquote,label,figcaption,button,td,th,dt,dd,summary,input,select,textarea):not(i):not(.eicon):not([class^="eicon-"]):not([class*="trx_addons_icon"]),
.hm-landing :is(h1,h2,h3,h4,h5,h6,p,li,a,span,div,strong,em,b,blockquote,label,figcaption,button,td,th,dt,dd,summary,input,select,textarea):not(i):not(.eicon):not([class^="eicon-"]):not([class*="trx_addons_icon"]) {
  font-family: 'Hanken Grotesk', Arial, sans-serif !important;
}