/* ==========================================================================
   H&M — AMZ-inspired structure layer (homepage)
   Adopts layout signatures from amzlocksmith.co.uk in H&M's own style:
   1) top red USP bar  2) hero call-now + reviews cards
   3) reviews surfaced higher  4) soft red-tint section rhythm
   Works in both light and dark themes.
   ========================================================================== */

/* ---------- 1. Top red USP bar ---------- */
.hm-usp-bar {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 26px;
  background: #c41230; color: #fff;
  font-family: 'Hanken Grotesk', Arial, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  padding: 9px 16px; text-align: center; line-height: 1.2;
}
.hm-usp-bar .hm-usp { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.hm-usp-bar .hm-usp svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.hm-usp-bar .hm-usp-star { color: #ffd54a; }
@media (max-width: 860px) {
  /* keep all items on ONE line on phones */
  .hm-usp-bar { flex-wrap: nowrap; font-size: clamp(9px, 2.5vw, 11.5px); gap: 10px; padding: 7px 8px; }
  .hm-usp-bar .hm-usp { gap: 4px; }
  .hm-usp-bar .hm-usp svg { width: 12px; height: 12px; }
  .hm-usp-bar .hm-usp-sm-hide { display: none; }
}

/* ---------- Hero "Happy clients": drop the stock faces, keep stars + count ----
   The original was a single composite image (faces + 1K + stars). Hide it and
   rebuild a clean badge with no faces. */
.elementor-element-78cf0e9 img.wp-image-7488,
.elementor-element-78cf0e9 img[src*="custom-img-503-fourth"],
.elementor-element-78cf0e9 .elementor-element-27e6e6d,
.elementor-element-78cf0e9 .elementor-element-4d5baf7 { display: none !important; }
.elementor-element-78cf0e9 .hm-happy { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.elementor-element-78cf0e9 .hm-happy-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; height: 30px; padding: 0 11px; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  color: #fff !important; font-weight: 800; font-size: 13px; letter-spacing: .02em;
  font-family: 'Hanken Grotesk', Arial, sans-serif;
}
.elementor-element-78cf0e9 .hm-happy-meta { display: flex; flex-direction: column; line-height: 1.15; }
.elementor-element-78cf0e9 .hm-happy-stars { color: #e5142f !important; font-size: 15px; letter-spacing: 2px; }
.elementor-element-78cf0e9 .hm-happy-label { color: #fff !important; font-weight: 700; font-size: 14px; font-family: 'Hanken Grotesk', Arial, sans-serif; }
.elementor-element-78cf0e9 .hm-happy-label { text-shadow: 0 1px 6px rgba(0,0,0,.3); }
/* Hero is a dark team photo at ALL widths now, so the badge + label stay
   light-on-dark everywhere (previously desktop assumed a light hero grid). */
.elementor-element-78cf0e9 .hm-happy-label { color: #ffffff !important; }
.elementor-element-78cf0e9 .hm-happy-badge { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.32); color: #ffffff !important; }
/* beat the dark hero's blanket span colour */
html.hm-theme-dark body .elementor-element-78cf0e9 .hm-happy-stars { color: #e5142f !important; }
html.hm-theme-dark body .elementor-element-78cf0e9 .hm-happy-label { color: #ffffff !important; }
html.hm-theme-dark body .elementor-element-78cf0e9 .hm-happy-badge { color: #ffffff !important; }

/* ---------- Emergency CTA: bold red panel ---------- */
.elementor-element-e8b5968 .elementor-element-103073a,
.elementor-element-e8b5968 .elementor-element-103073a > .elementor-widget-wrap.elementor-element-populated,
html.hm-theme-dark body .elementor-element-e8b5968 .elementor-element-103073a,
html.hm-theme-dark body .elementor-element-e8b5968 .elementor-element-103073a > .elementor-widget-wrap.elementor-element-populated {
  background-image: linear-gradient(140deg, #e5142f 0%, #bd1328 55%, #8f0e20 100%) !important;
  background-color: transparent !important;
}
.elementor-element-e8b5968 .elementor-background-overlay,
html.hm-theme-dark body .elementor-element-e8b5968 .elementor-background-overlay {
  opacity: .18 !important; mix-blend-mode: multiply;
}
.elementor-element-e8b5968 .elementor-element-3e31415 .elementor-heading-title,
html.hm-theme-dark body .elementor-element-e8b5968 .elementor-element-3e31415 .elementor-heading-title {
  color: #ffffff !important; opacity: .9;
}
.elementor-element-e8b5968 .elementor-element-339257b a.elementor-button,
html.hm-theme-dark body .elementor-element-e8b5968 .elementor-element-339257b a.elementor-button {
  background: #ffffff !important; color: #c41230 !important; box-shadow: 0 10px 26px rgba(0,0,0,.3) !important;
}
.elementor-element-e8b5968 .elementor-element-339257b a.elementor-button:hover,
html.hm-theme-dark body .elementor-element-e8b5968 .elementor-element-339257b a.elementor-button:hover {
  background: #0b0b0d !important; color: #ffffff !important;
}

/* ---------- Hero: full-width team photo background ---------- */
/* Kill the 1px white border the generic dark e-con rule adds to the hero */
html.hm-theme-dark body .elementor-element-78cf0e9,
.elementor-element-78cf0e9 {
  border: none !important;
  outline: none !important;
}

/* Review card: center all text inside it */
.hm-hero-cards .hm-hc-rev {
  align-items: center !important;
  text-align: center !important;
}
.hm-hero-cards .hm-hc-rev .hm-hc-body { align-items: center !important; text-align: center; }

/* Hide the right-column and its parent column — photo is the CSS background now */
.elementor-element-78cf0e9 .elementor-element-e0ecd90 { display: none !important; }
.elementor-element-78cf0e9 .elementor-element-7d4c71c {
  display: none !important;
}
/* Text column takes the full width */
.elementor-element-78cf0e9 > .e-con-inner > .elementor-element-3eb0787 {
  flex: 0 0 100% !important;
  max-width: 620px !important;
}

/* Hero background photo + dark overlay — ALL breakpoints.
   Dark mode was removed, so the hero must carry its own dark background for the
   white headline to stay readable (previously mobile relied on the dark theme). */
html body .elementor-5286 .elementor-element.elementor-element-78cf0e9,
html body .elementor-5286 .elementor-element.elementor-element-78cf0e9:not(.elementor-motion-effects-element-type-background) {
  background-image: url('/wp-content/uploads/2026/09/magnific_upscale_WDCjAbecXe-scaled.webp') !important;
  background-size: cover !important;
  background-position: center 38% !important;   /* frame the team head-to-waist on wide desktop (image is taller than the hero there) */
  background-repeat: no-repeat !important;
  min-height: 560px !important;
}
/* Gradient overlay: deep left fading to translucent right (desktop) */
html body .elementor-5286 .elementor-element.elementor-element-78cf0e9::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8,8,11,.82) 0%, rgba(8,8,11,.58) 50%, rgba(8,8,11,.18) 100%);
  z-index: 0; pointer-events: none;
}
/* Mobile: keep the photo, centre the crop on the team, and use a stronger, more
   even scrim so the left-aligned white text stays crisp on a narrow screen. */
@media (max-width: 767px) {
  html body .elementor-5286 .elementor-element.elementor-element-78cf0e9,
  html body .elementor-5286 .elementor-element.elementor-element-78cf0e9:not(.elementor-motion-effects-element-type-background) {
    background-position: center center !important;
    min-height: unset !important;
  }
  html body .elementor-5286 .elementor-element.elementor-element-78cf0e9::before {
    background: linear-gradient(180deg, rgba(8,8,11,.86) 0%, rgba(8,8,11,.76) 45%, rgba(8,8,11,.84) 100%) !important;
  }
}
/* Lift inner content above the overlay; left-align the text block (all widths) */
.elementor-element-78cf0e9 > .e-con-inner {
  position: relative;
  z-index: 1;
  justify-content: flex-start !important;
  padding-left: 60px !important;
  padding-bottom: 56px !important;   /* breathing room below the hero cards */
}
@media (max-width: 767px) {
  .elementor-element-78cf0e9 > .e-con-inner {
    justify-content: flex-start !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-bottom: 40px !important;
  }
}

/* Hero text: always white — photo bg is always dark regardless of theme */
.elementor-element-78cf0e9 h1.elementor-heading-title,
.elementor-element-78cf0e9 h2.elementor-heading-title,
.elementor-element-78cf0e9 .elementor-heading-title,
.elementor-element-78cf0e9 h1,
html.hm-theme-dark body .elementor-element-78cf0e9 h1.elementor-heading-title,
html:not(.hm-theme-dark) .elementor-element-78cf0e9 h1.elementor-heading-title {
  color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
/* All other text/spans in hero also white */
.elementor-element-78cf0e9 .elementor-element-3eb0787 p,
.elementor-element-78cf0e9 .elementor-element-3eb0787 span:not(.hm-happy-stars):not(.hm-happy-badge):not(.hm-hc-stars):not(.hm-hc-body):not(.hm-hc-ic):not(.hm-hc-call):not(.hm-hc-rev) {
  color: rgba(255,255,255,.9) !important;
}


/* ---------- Hero CTA button: size to its text, not full-width ---------- */
.elementor-element-693f713 a.elementor-button {
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  padding: 15px 34px !important;
  font-size: 15px !important;
}

/* ---------- 2. Hero: call-now card + reviews card ---------- */
.hm-hero-cards {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; max-width: 500px;
  align-items: stretch;
}
/* compact sizing (were too chunky) */
.hm-hero-cards .hm-hc { padding: 11px 14px !important; border-radius: 12px; min-height: 0; }
.hm-hero-cards .hm-hc-call .hm-hc-ic { width: 34px; height: 34px; }
.hm-hero-cards .hm-hc-call .hm-hc-ic svg { width: 17px; height: 17px; }
.hm-hero-cards .hm-hc-call .hm-hc-body small { font-size: 10px; }
.hm-hero-cards .hm-hc-call .hm-hc-body strong { font-size: 18px; }
.hm-hero-cards .hm-hc-rev { justify-content: center; gap: 3px; }
.hm-hero-cards .hm-hc-rev .hm-hc-stars { font-size: 13px; letter-spacing: 1px; }
.hm-hero-cards .hm-hc-rev .hm-hc-body strong { font-size: 13px; }
.hm-hero-cards .hm-hc-rev .hm-hc-body small { font-size: 11px; }
.hm-hero-cards .hm-hc {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; border-radius: 14px; text-decoration: none;
  font-family: 'Hanken Grotesk', Arial, sans-serif;
}
.hm-hc-call { background: #c41230; color: #fff; box-shadow: 0 12px 30px rgba(196,18,48,.3); transition: transform .18s ease, box-shadow .18s ease; }
.hm-hc-call:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(196,18,48,.42); }
.hm-hc-call .hm-hc-ic {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: rgba(255,255,255,.18); display: grid; place-items: center;
}
.hm-hc-call .hm-hc-ic svg { width: 20px; height: 20px; fill: #fff; }
.hm-hc-call .hm-hc-body { display: flex; flex-direction: column; line-height: 1.15; }
.hm-hc-call .hm-hc-body small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.hm-hc-call .hm-hc-body strong { font-size: 21px; font-weight: 800; letter-spacing: .01em; }

.hm-hc-rev { background: #ffffff; color: #1a1a1a; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 12px 30px rgba(0,0,0,.18); flex-direction: column; align-items: flex-start; gap: 4px; }
.hm-hc-rev .hm-hc-stars { color: #f5a623; font-size: 15px; letter-spacing: 2px; }
.hm-hc-rev .hm-hc-body { display: flex; flex-direction: column; line-height: 1.25; align-items: center; text-align: center; }
.hm-hc-rev .hm-hc-body strong { font-size: 14px; font-weight: 800; color: #141414; text-align: center; }
.hm-hc-rev .hm-hc-body small { font-size: 12px; color: #666; text-align: center; }

/* beat the hero's blanket span colour so card text keeps its own colours */
.hm-hero-cards .hm-hc-call,
.hm-hero-cards .hm-hc-call span,
.hm-hero-cards .hm-hc-call small,
.hm-hero-cards .hm-hc-call strong { color: #fff !important; }
.hm-hero-cards .hm-hc-rev .hm-hc-stars { color: #f5a623 !important; }
.hm-hero-cards .hm-hc-rev strong { color: #141414 !important; }
.hm-hero-cards .hm-hc-rev small { color: #666 !important; }

@media (max-width: 767px) {
  .hm-hero-cards { margin-top: 20px; max-width: 100%; flex-direction: column; }
  /* stack the two cards full-width (beats .hm-hero-cards .hm-hc flex:1 1 0) so
     the phone number has room to sit on one line */
  .hm-hero-cards .hm-hc { flex: 1 1 auto; width: 100%; }
  /* never wrap the number; shrink a touch only if a narrow phone still needs it */
  .hm-hero-cards .hm-hc-call .hm-hc-body strong { white-space: nowrap; font-size: clamp(17px, 6vw, 21px); }
}

/* ---------- 4. Soft red-tint section rhythm ("colour grid") ----------
   Light mode: AMZ-style soft pink-red blocks alternating with white.
   Dark mode: a subtle warm-dark so the rhythm still reads. */
html:not(.hm-theme-dark) .elementor-element-11e96edd,
html:not(.hm-theme-dark) .elementor-element-8b2ec58 {
  background-color: #fbeef0 !important;
}
html.hm-theme-dark body .elementor-element-11e96edd.e-con.e-parent,
html.hm-theme-dark body .elementor-element-8b2ec58.e-con.e-parent {
  background-color: #130d0f !important;
}

/* ---------- Mix: contrasting secondary buttons + hairline dividers ----------
   AMZ mixes black & white blocks. Here the SECONDARY buttons invert per theme
   (white-on-dark in dark mode, black-on-light in light mode) and a few sections
   get a thin contrasting divider line. Kept light — the red stays the primary. */

/* secondary buttons: white in dark mode */
html.hm-theme-dark body .hm-services-cta-btn,
html.hm-theme-dark body .hm-reviews-cta a {
  background: #ffffff !important;
  color: #0b0b0d !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.42) !important;
}
html.hm-theme-dark body .hm-services-cta-btn:hover,
html.hm-theme-dark body .hm-reviews-cta a:hover {
  background: #e9e9e9 !important; color: #0b0b0d !important; border-color: #e9e9e9 !important;
}
html.hm-theme-dark body .hm-services-cta-btn svg { fill: #0b0b0d !important; color: #0b0b0d !important; }

/* secondary buttons: black in light mode */
html:not(.hm-theme-dark) .hm-services-cta-btn,
html:not(.hm-theme-dark) .hm-reviews-cta a {
  background: #111214 !important;
  color: #ffffff !important;
  border: 2px solid #111214 !important;
}
html:not(.hm-theme-dark) .hm-services-cta-btn:hover,
html:not(.hm-theme-dark) .hm-reviews-cta a:hover {
  background: #c41230 !important; color: #ffffff !important; border-color: #c41230 !important;
}

/* thin contrasting divider lines between a couple of sections */
html.hm-theme-dark body .elementor-element-ed08da9,
html.hm-theme-dark body .elementor-element-e840018 { border-top: 1px solid rgba(255,255,255,.12); }
html:not(.hm-theme-dark) .elementor-element-ed08da9,
html:not(.hm-theme-dark) .elementor-element-e840018 { border-top: 1px solid rgba(0,0,0,.1); }

/* ---------- Breathing room in the service cards (were cramped) ----------
   The checklist sat ~4px under each card; give it real space and looser rows. */
#services .e-con.e-child { padding-top: 18px !important; padding-bottom: 34px !important; }
#services .elementor-widget-icon-list { margin-top: 22px !important; }
#services .elementor-icon-list-item { padding-bottom: 11px !important; }
#services .elementor-icon-list-item:last-child { padding-bottom: 0 !important; }
#services .e-con-inner { gap: 30px !important; }
/* more air between the stacked cards */
#services .elementor-element.e-con.e-child + .e-con.e-child { margin-top: 10px; }

/* ---------- Service-card photos: fill the frame, keep faces (crop bottom) ----
   The portrait "Reactive Maintenance" photo was letterboxed; zoom it to fill
   and anchor near the top so the face stays and the crop comes off the bottom. */
.elementor-element-ed08da9 .trx-addons-info-box-icon-wrap img {
  object-fit: cover !important;
  object-position: center 14% !important;
  background: transparent !important;
}

/* ---------- DESKTOP hero photo (right column) --------------------------------
   The old hero art was a transparent cutout sitting on a baked-in dark circle.
   The new shot is a plain rectangular uniform/team photo, so frame it as a
   premium card: rounded corners, soft border + shadow, cover-cropped. Desktop
   only (the hero image widget is hidden on tablet/mobile; mobile uses b66c3a1).*/
.elementor-element-78cf0e9 img.hm-hero-photo {
  width: 100% !important;
  height: auto !important;
  max-height: 520px;
  aspect-ratio: 16 / 11;
  object-fit: cover !important;
  object-position: center 28% !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 2px 0 rgba(255,255,255,.04) inset;
  border: 1px solid rgba(0,0,0,.08);
  background: transparent !important;
}
html.hm-theme-dark body .elementor-element-78cf0e9 img.hm-hero-photo {
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 26px 70px rgba(0,0,0,.55);
}

/* ---------- Testimonials heading: fit two lines on mobile ---------------------
   "Trusted by Homeowners & Businesses Across London" wrapped to three lines on
   narrow phones; shrink it a touch so it lands on two. */
@media (max-width: 767px) {
  .elementor-element-1ad7c82 .elementor-heading-title {
    font-size: 30px !important;
    line-height: 1.18 !important;
  }
}

/* ============================================================================
   CORE-SERVICES cards redesign (#services top row: Building Services,
   Insurance Services, Reactive Maintenance). Turn the three columns into
   cohesive premium cards: full-bleed photo at the top, solid surface,
   rounded corners, soft shadow, subtle hover lift. Light + dark.
   ========================================================================== */
#services > .e-con-inner > .e-con.e-child:has(.trx-addons-info-box) {
  /* dark "blackish" card surface: faint white dot texture + red top accent */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='1.1' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #232732 0%, #141720 100%);
  background-repeat: repeat, no-repeat;
  background-size: 22px 22px, 100% 100%;
  border: 1px solid rgba(255,255,255,.09);
  border-top: 3px solid #c41230;            /* red accent frames the top of each card */
  border-radius: 18px;
  overflow: hidden;
  padding: 0 0 26px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.30);
  transition: transform .25s ease, box-shadow .25s ease;
}
#services > .e-con-inner > .e-con.e-child:has(.trx-addons-info-box):hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 54px rgba(0,0,0,.42);
}
/* white / light text on the dark card surface */
#services .trx-addons-info-box-title { color: #ffffff !important; }
#services .trx-addons-info-box-description,
#services .trx-addons-info-box-content,
#services .trx-addons-info-box-content p { color: rgba(255,255,255,.74) !important; }
#services .elementor-icon-list-text { color: rgba(255,255,255,.80) !important; }
#services .elementor-icon-list-icon i,
#services .elementor-icon-list-icon svg { color: #ff4d5f !important; fill: #ff4d5f !important; }
/* photo flush to the card's top + sides */
#services .trx-addons-info-box-icon-wrap,
#services .trx-addons-info-box-icon,
#services .trx-addons-info-box-icon-inner { margin: 0 !important; width: 100% !important; display: block !important; }
#services .elementor-widget-trx_elm_info_box > .elementor-widget-container { padding: 0 !important; }
#services .trx-addons-info-box-icon-wrap img {
  border-radius: 0 !important;
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  object-position: center 24% !important;
}
/* pad the text, not the photo */
#services .trx-addons-info-box-content { padding: 20px 24px 0 !important; }
#services .elementor-widget-icon-list { padding: 0 24px !important; margin-top: 16px !important; }
#services .trx-addons-info-box-title {
  position: relative;
  margin: 0 0 16px !important;
  padding-bottom: 10px !important;
}
/* short red rule under the title */
#services .trx-addons-info-box-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 40px; height: 3px;
  border-radius: 2px;
  background: #c41230;
}

/* dark-theme card surface */
html.hm-theme-dark body #services > .e-con-inner > .e-con.e-child:has(.trx-addons-info-box) {
  background: #161a22;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
html.hm-theme-dark body #services > .e-con-inner > .e-con.e-child:has(.trx-addons-info-box):hover {
  box-shadow: 0 24px 54px rgba(0,0,0,.6);
}

/* The column is now the card, so flatten the inner info-box wrapper (it had its
   own dark surface/border/radius, which made a nested box in dark mode). */
#services .trx-addons-info-box,
html.hm-theme-dark body #services .trx-addons-info-box {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
}

/* ---------- Hero: remove the "Get Emergency Support Now" button (client) ------
   The hero already has the red call-now card below, so the extra CTA button
   was redundant. */
.elementor-element-693f713 { display: none !important; }
/* NOTE: the "connect header with hero" treatment moved to hm-overrides.css
   (section 20) so it can apply to the trades and about pages too. */

/* ---------- Book A Service Now moved onto the hero (client) ----------------
   The booking box is now a white connected card on a navy frame (styled in
   hm-overrides.css). Positioning only here — the box background lives there. */
.elementor-element-78cf0e9 .elementor-element-17422a0 {
  margin-top: 0 !important;
}

/* ---------- Sections removed at client request (to be replaced) -----------
   Hidden rather than deleted so they can be swapped for new sections. */
.elementor-element-e840018,   /* "Why Choose Us" intro + dark reason cards */
.elementor-element-95cf590,   /* "London-Wide Coverage" heading + London map */
.elementor-element-47967337 { /* numbered 01/02/03 list */
  display: none !important;
}

/* ============================================================================
   CORE-SERVICES cards — customer mockup redesign
   Inset rounded image, category eyebrow + divider, clean white title (no red
   underline), muted body, red "More Details" pill + white-outline circular
   arrow. Checklist hidden to match the mockup. Overrides the earlier dark
   full-bleed card styling above (this block loads later = wins).
   ========================================================================== */
#services > .e-con-inner > .e-con.e-child:has(.trx-addons-info-box){
  background:linear-gradient(180deg,#2c2c30 0%,#242427 100%) !important;  /* charcoal, like the reference */
  border:1px solid rgba(255,255,255,.08) !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  border-radius:20px !important;
  margin-left:22px !important; margin-right:22px !important;   /* gap between the card and the screen edges */
  padding:0 !important; overflow:hidden !important;           /* image sits full-bleed to the card edges */
  box-shadow:0 16px 40px rgba(0,0,0,.28) !important;
}
#services .trx-addons-info-box-icon-wrap img{
  border-radius:0 !important; height:280px !important; object-position:center 30% !important;
}
#services .trx-addons-info-box-content{ padding:24px 24px 0 !important; }
#services .trx-addons-info-box-title{ margin:0 0 16px !important; padding-bottom:0 !important; font-size:26px !important; line-height:1.15 !important; }
#services .trx-addons-info-box-title::after{ display:none !important; }   /* drop the red underline */
#services .trx-addons-info-box-description{ color:rgba(255,255,255,.72) !important; font-size:16px !important; line-height:1.55 !important; }
#services .elementor-widget-icon-list{ display:none !important; }         /* mockup shows no checklist */
#services .hm-card-cta{ margin:22px 24px 22px !important; padding-top:4px !important; }
#services .hm-card-eyebrow{ margin:0 0 16px !important; }
/* circular arrow button → white outline (card is dark), matching the mockup */
#services .hm-card-arrow-btn,
#services .hm-card-arrow-btn--light{
  border:1.5px solid rgba(255,255,255,.42) !important; color:#ffffff !important; background:transparent !important;
}
#services .hm-card-arrow-btn:hover,
#services .hm-card-arrow-btn--light:hover{ background:#c41230 !important; border-color:#c41230 !important; }