/* Cold Lava overrides - Stage 1 design fixes */

/* === H1.1: Hero 4-button grid - equal-width cells and equal-width buttons.
   Row sits flush-left against the hero column's left edge (same vertical
   line as the 'I want to...' heading and the Google Reviews badge). The
   .e-con-boxed wrapper would otherwise centre/inset the grid via
   --content-width. Zeroed out so the grid spans the full column width
   without re-sizing the individual buttons. === */
.elementor-891 .elementor-element.elementor-element-64e2078,
.elementor-element.elementor-element-64e2078 {
  --e-con-grid-template-columns: repeat(4, 1fr) !important;
  --gap: 8px 8px !important;
  --row-gap: 8px !important;
  --column-gap: 8px !important;
  --justify-items: stretch !important;
  --align-items: stretch !important;
  --content-width: 100% !important;
  --padding-left: 0px !important;
  --padding-right: 0px !important;
  --margin-left: 0px !important;
  --margin-right: 0px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.elementor-891 .elementor-element.elementor-element-64e2078 > .e-con-inner,
.elementor-element.elementor-element-64e2078 > .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 768px) {
  .elementor-891 .elementor-element.elementor-element-64e2078,
  .elementor-element.elementor-element-64e2078 {
    --e-con-grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* Force each hero button widget to occupy its full grid cell.
   The widgets sit inside `.e-con-inner`, not as direct children of the grid.
   Per-widget post-891 rules set width:80% via --container-widget-width;
   override that with !important here. */
.elementor-element.elementor-element-64e2078 .elementor-widget-button,
.elementor-element.elementor-element-234128e,
.elementor-element.elementor-element-7b1c8f4,
.elementor-element.elementor-element-31f471d,
.elementor-element.elementor-element-495a29a {
  width: 100% !important;
  max-width: 100% !important;
  --container-widget-width: 100% !important;
  --container-widget-flex-grow: 1 !important;
  justify-self: stretch !important;
}
.elementor-element.elementor-element-64e2078 .elementor-widget-button .elementor-widget-container,
.elementor-element.elementor-element-64e2078 .elementor-widget-button .elementor-button-wrapper {
  width: 100% !important;
}
.elementor-element.elementor-element-64e2078 .elementor-widget-button .elementor-button,
.elementor-element.elementor-element-64e2078 .elementor-widget-button .elementor-button-text {
  font-family: "Montserrat", sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #fff !important;
}
.elementor-element.elementor-element-64e2078 .elementor-widget-button .elementor-button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 20px !important;
  border-radius: 5px !important;
}

/* === H7: match the 3 new stat boxes to the 3 original ones (white outline, white text/icons on purple) === */
.elementor-element-83e7e75 .elementor-widget-icon-box > .elementor-widget-container {
  padding: 20px !important;
  border: 2px solid #ffffff !important;
}
.elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon-box-title,
.elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon-box-title a,
.elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon-box-description {
  color: #ffffff !important;
}

/* The "Since 1988 / Family-run agency" stat box was inserted outside
   the .elementor-element-83e7e75 grid (it's a sibling widget inside
   the same purple bernards-stats-block container). Apply the same
   white-text treatment to it so it matches the other six stats. */
.bernards-stats-block .elementor-widget-icon-box .elementor-icon-box-title,
.bernards-stats-block .elementor-widget-icon-box .elementor-icon-box-title a,
.bernards-stats-block .elementor-widget-icon-box .elementor-icon-box-title span,
.bernards-stats-block .elementor-widget-icon-box .elementor-icon-box-description {
  color: #ffffff !important;
}
.bernards-stats-block .elementor-widget-icon-box .elementor-icon,
.bernards-stats-block .elementor-widget-icon-box .elementor-icon svg,
.bernards-stats-block .elementor-widget-icon-box .elementor-icon i {
  fill: #ffffff !important;
  color: #ffffff !important;
}
.elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon-box-title {
  font-size: 63px !important;
  margin: 0 !important;
}
.elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon-box-description {
  font-size: 20px !important;
}
.elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon-box-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: left !important;
  flex-direction: row !important;
}
.elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon-box-content {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}
.elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon,
.elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon svg,
.elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon i {
  fill: #ffffff !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}
.elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon {
  background: transparent !important;
}
.elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon-box-description a {
  color: #ffffff !important;
  text-decoration: underline !important;
}
.elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon-box-icon { margin-right: 22px !important; }

/* === Stop oversized Elementor buttons spilling past viewport on tablet/mobile === */
@media (max-width: 1024px) {
  .elementor-button.elementor-size-lg {
    padding: 14px 28px !important;
  }
}
@media (max-width: 768px) {
  .elementor-button.elementor-size-lg {
    padding: 12px 22px !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* Ensure their containing widget can't push past the viewport either */
  .elementor-widget-button .elementor-button-wrapper {
    max-width: 100%;
  }
}

/* === Brand palette ===
   --brand-grey: from "THE ESTATE AGENTS" lowercase strapline in the logo.
   Replaces all turquoise / mint / green accents site-wide. */
:root {
  --brand-grey: #707070;
  --brand-grey-dark: #5a5a5a;
  --brand-purple: #5D3384;
}

/* Property-search bundle uses --rm-green / --rm-link - override at the wrapper. */
.clps-wrapper {
  --rm-green: #707070 !important;
  --rm-link: #707070 !important;
}

/* === Mint #00DEB6 → grey #707070 across the board === */
[style*="#00DEB6"],
[style*="#00deb6"] { /* fallback for inline style remnants */ }

/* Recent-instructions sale badge: text was navy on mint - go white on grey. */
.ri-badge-sale {
  background: #707070 !important;
  color: #fff !important;
}

/* Single-property featured badge */
.sp-badge-featured {
  background: #707070 !important;
  color: #fff !important;
}

/* Single-property accent fills/borders/links.
   (.sp-similar-card-price removed from this sweep - it overlays a dark
   image gradient and must stay white, Oliver 2026-07-13.) */
.sp-back-link:hover,
.sp-back-link:hover svg,
.sp-section-title::before,
.sp-key-features li::before,
.sp-info-item-icon svg {
  color: #707070 !important;
  fill: #707070 !important;
}

/* "Book Free Evaluation" homepage CTA - was mint */
a[href*="/valuations"][style*="#00DEB6"],
.bernards-search-btn,
.elementor-button[href*="property-search"][style*="#00DEB6"] {
  background: #707070 !important;
  color: #fff !important;
}

/* "Recent Instructions" / "For Sale" colour pills referencing mint */
.ri-card-badge.ri-badge-sale { background: #707070 !important; color: #fff !important; }

/* Property-search: featured pill, EPC banner, hero accent dot */
.clps-wrapper .rm-card-featured,
.clps-wrapper .rm-card-badge.rm-card-featured {
  background: #707070 !important;
  color: #fff !important;
}

/* Hero search BUY tab and any other green tab */
.bernards-search-tab.active {
  background: #707070 !important;
  color: #fff !important;
}

/* Generic safety override - any element whose inline style declares the mint colour */
[style*="background:#00DEB6"],
[style*="background: #00DEB6"],
[style*="background-color:#00DEB6"],
[style*="background-color: #00DEB6"] {
  background-color: #707070 !important;
  color: #fff !important;
}
[style*="color:#00DEB6"],
[style*="color: #00DEB6"] {
  color: #707070 !important;
}
[style*="fill:#00DEB6"],
[style*="fill: #00DEB6"] {
  fill: #707070 !important;
}
[style*="border-color:#00DEB6"],
[style*="border-color: #00DEB6"],
[style*="border:2px solid #00DEB6"],
[style*="border: 2px solid #00DEB6"] {
  border-color: #707070 !important;
}

/* === Text on purple → white (S2) ===
   Any element with brand-purple background - force descendant text
   white. Covers Elementor purple sections, badges, search-bar tabs,
   the search button, the partner row, and any bespoke purple block.
   Hex variants: #5D3384 (brand-purple), #45266b (hover-darker),
   #5d3384 lowercase, #2b1847 (hover-active marker). */
[style*="background:#5D3384"],
[style*="background: #5D3384"],
[style*="background-color:#5D3384"],
[style*="background-color: #5D3384"],
[style*="background:#5d3384"],
[style*="background-color:#5d3384"],
[style*="background:#45266b"],
[style*="background-color:#45266b"],
.ri-badge-let,
.elementor-element-14c172ff,
section[class*="purple"],
div[class*="purple"],
.bernards-search-tab,
.bernards-search-btn,
.bernards-newsletter,
.bernards-news-hero,
.bn-news-hero {
  color: #ffffff !important;
}
[style*="background:#5D3384"] *,
[style*="background: #5D3384"] *,
[style*="background-color:#5D3384"] *,
[style*="background-color: #5D3384"] *,
.elementor-element-14c172ff h1,
.elementor-element-14c172ff h2,
.elementor-element-14c172ff h3,
.elementor-element-14c172ff h4,
.elementor-element-14c172ff h5,
.elementor-element-14c172ff h6,
.elementor-element-14c172ff p,
.elementor-element-14c172ff a,
.elementor-element-14c172ff span,
.bernards-search-tab,
.bernards-search-tab.active,
.bernards-search-btn {
  color: #ffffff !important;
}

/* Belt-and-braces: any element whose computed bg is a purple shade
   (selectors below cover the variable-driven cases). */
.bernards-newsletter h1,
.bernards-newsletter h2,
.bernards-newsletter h3,
.bernards-newsletter h4,
.bernards-newsletter p,
.bernards-newsletter label,
.bernards-newsletter span,
.bn-news-hero h1,
.bn-news-hero h2,
.bn-news-hero p,
.bn-news-hero-h1,
.bn-news-hero-sub {
  color: #ffffff !important;
}

/* === Social icon spacing (applies to every elementor-social-icons widget) === */
.elementor-social-icons-wrapper.elementor-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px !important;
  align-items: center;
}
.elementor-social-icons-wrapper.elementor-grid .elementor-grid-item {
  margin: 0 !important;
}

/* Social icons - transparent background, white glyph. No circle,
   no border, the icon itself sits directly on the purple banner. */
.elementor-social-icon-facebook-f,
.elementor-social-icon-instagram,
.elementor-social-icon-linkedin,
.elementor-social-icon {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
}
.elementor-social-icon-facebook-f:hover,
.elementor-social-icon-instagram:hover,
.elementor-social-icon-linkedin:hover,
.elementor-social-icon:hover {
  background: transparent !important;
  color: #ffffff !important;
  opacity: 0.75;
  transform: translateY(-1px);
}
.elementor-social-icon i,
.elementor-social-icon svg,
.elementor-social-icon-facebook-f i,
.elementor-social-icon-facebook-f svg,
.elementor-social-icon-instagram i,
.elementor-social-icon-instagram svg,
.elementor-social-icon-linkedin i,
.elementor-social-icon-linkedin svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* === "Follow us on social media" section: purple bg, single
   centred column with text on top and icons stacked below.
   Tightened vertical rhythm - heading / sub / icons sit close
   together with minimal padding at section edges. === */
.elementor-element-14c172ff {
  background: #5D3384 !important;
  padding: 28px 20px !important;
}
.elementor-element-14c172ff .elementor-container {
  flex-wrap: wrap !important;
  justify-content: center !important;
}
.elementor-element-14c172ff .elementor-column {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
}
.elementor-element-14c172ff .elementor-widget-wrap {
  align-content: center !important;
  justify-content: center !important;
  text-align: center !important;
}
/* Strip Elementor's per-widget vertical padding so the three
   stacked widgets (heading / sub / icons) sit tight together. */
.elementor-element-14c172ff .elementor-widget {
  margin-bottom: 0 !important;
}
.elementor-element-14c172ff .elementor-widget-container {
  padding: 0 !important;
}
.elementor-element-14c172ff .elementor-heading-title {
  color: #fff !important;
  text-align: center !important;
}
.elementor-element-14c172ff h3.elementor-heading-title {
  margin: 0 0 8px !important;
  font-size: 2.25rem;
  line-height: 1.2;
}
.elementor-element-14c172ff h4.elementor-heading-title {
  font-weight: 400;
  opacity: 0.9;
  max-width: 640px;
  font-size: 1.125rem;
  line-height: 1.4;
  margin: 0 auto 12px !important;
}
.elementor-element-14c172ff .elementor-social-icons-wrapper.elementor-grid {
  justify-content: center !important;
  gap: 22px !important;
  margin-top: 0;
}
.elementor-element-14c172ff .elementor-social-icon {
  width: 38px;
  height: 38px;
  font-size: 22px;
}

/* Remove the social-icons widget that sits in the footer's contact
   column (data-id 38b08bb1) - the new centred social row above is
   the single source of truth for socials. */
.elementor-location-footer .elementor-element-38b08bb1 {
  display: none !important;
}

/* === H9: Partner logos - smaller, footer-tier === */
.elementor-element-10b4d63 {
  padding: 28px 0 12px !important;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: #fafafa;
}
.elementor-element-10b4d63 img {
  max-height: 44px !important;
  width: auto !important;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.elementor-element-10b4d63 img:hover {
  opacity: 1;
}
.elementor-element-10b4d63 .elementor-element-3d0f528 {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px;
}
.elementor-element-10b4d63 .elementor-widget-image {
  flex: 0 0 auto;
  margin: 0 !important;
}

/* === Team cards - every card identical: fixed total height with a
   fixed photo on top and a fixed text block underneath. Long names
   like 'Darren Tait - MARLA MNAEA' are clamped so the card stays
   the same size regardless of content. Hover de-greyscales the
   photo + a subtle scale-up. === */
.elementor-widget-elementskit-team {
  height: 100% !important;
}
.elementor-widget-elementskit-team .elementor-widget-container,
.elementor-widget-elementskit-team .ekit-wid-con {
  height: 100% !important;
  display: flex;
  flex-direction: column;
}
.elementor-widget-elementskit-team .profile-image-card,
.profile-image-card.ekit-team-style-overlay {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  height: 460px;
  width: 100%;
}
.elementor-widget-elementskit-team .profile-image-card img,
.profile-image-card.ekit-team-style-overlay img {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.25s ease, transform 0.35s ease;
  flex: 0 0 280px;
}
.elementor-widget-elementskit-team .profile-image-card:hover img,
.profile-image-card.ekit-team-style-overlay:hover img {
  filter: grayscale(0%);
  transform: scale(1.04);
}
@media (max-width: 768px) {
  .elementor-widget-elementskit-team .profile-image-card,
  .profile-image-card.ekit-team-style-overlay {
    height: 420px;
  }
  .elementor-widget-elementskit-team .profile-image-card img,
  .profile-image-card.ekit-team-style-overlay img {
    height: 240px;
    flex: 0 0 240px;
  }
}
/* Equal-height row: stretch every team column so every card in a row
   matches the tallest sibling (now consistently 460px). */
.elementor-section.elementor-inner-section .elementor-container,
.elementor-section .elementor-container {
  align-items: stretch !important;
}
.elementor-section.elementor-inner-section .elementor-column.elementor-col-25 {
  display: flex !important;
}
.elementor-section.elementor-inner-section .elementor-column.elementor-col-25 .elementor-widget-wrap {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}
/* Text block sits at the bottom of the card with a fixed height so
   every card across every row reads identical regardless of name
   length. Long titles clamp to 2 lines with ellipsis. */
.elementor-widget-elementskit-team .profile-image-card .hover-area,
.profile-image-card.ekit-team-style-overlay .hover-area,
body .profile-image-card .hover-area,
body .profile-image-card.ekit-team-style-overlay .hover-area {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 180px !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 16px 18px !important;
  background: #ffffff !important;
  color: #1B2A4A !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
  pointer-events: auto !important;
  flex: 0 0 180px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .elementor-widget-elementskit-team .profile-image-card .hover-area,
  .profile-image-card.ekit-team-style-overlay .hover-area,
  body .profile-image-card .hover-area,
  body .profile-image-card.ekit-team-style-overlay .hover-area {
    height: 180px !important;
    flex: 0 0 180px;
  }
}
.profile-image-card .hover-area .profile-body,
.profile-image-card .hover-area .profile-footer {
  width: 100%;
}
/* Title - clamp to 2 lines so 'Darren Tait - MARLA MNAEA' doesn't
   push the card taller than its siblings. Brand-purple per Jacob. */
.profile-image-card .hover-area .profile-title {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--brand-purple) !important;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 2.6em;
}
.profile-image-card .hover-area .profile-designation {
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--brand-purple) !important;
  letter-spacing: 0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Earlier we hid .profile-content sitewide because it held lorem-ipsum filler.
   The handover brief (section 1 #11 + section 3 #8) requires the office + email
   visible, and the filler has been cleaned from source. Rule deliberately removed
   so the cleaned office + email render below the role. */
.profile-image-card .hover-area .profile-footer,
.profile-image-card .hover-area .ekit-team-social-list {
  display: none !important;
}
.profile-image-card .hover-area .ekit-team-social-list-old-placeholder {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 0;
}
.profile-image-card .hover-area .ekit-team-social-list li {
  margin: 0;
}
.profile-image-card .hover-area .ekit-team-social-list a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-purple);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  overflow: visible;
  transition: background 0.15s ease, transform 0.15s ease;
}
.profile-image-card .hover-area .ekit-team-social-list a:hover {
  background: #ffffff;
  color: var(--brand-purple);
  transform: translateY(-1px);
}
.profile-image-card .hover-area .ekit-team-social-list a svg,
.profile-image-card .hover-area .ekit-team-social-list a i {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* The custom icon-font's LinkedIn "in" glyph sits ~2px below the
   optical centre, so the bottom strokes get clipped inside the
   rounded button. Nudge it up so both letters are fully visible. */
.profile-image-card .hover-area .ekit-team-social-list a i.icon-linkedin {
  position: relative;
  top: -2px;
}

/* === Meet The Team hero - full-team photo, no zoom crop === */
.elementor-124 .elementor-element.elementor-element-214526c:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap,
.elementor-124 .elementor-element.elementor-element-214526c > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  min-height: 520px;
}
@media (max-width: 768px) {
  .elementor-124 .elementor-element.elementor-element-214526c:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap {
    min-height: 320px;
  }
}

/* === Testimonial swiper - constrain swiper nav arrows that render full-width on the valuations page === */
.elementor-swiper-button,
.elementor-swiper-button-prev,
.elementor-swiper-button-next,
.swiper-button-prev,
.swiper-button-next {
  position: absolute !important;
  top: 50% !important;
  width: 44px !important;
  height: 44px !important;
  margin-top: -22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  z-index: 10;
  font-size: 22px !important;
  color: #5D3384 !important;
  background: transparent;
  pointer-events: auto;
}
.elementor-swiper-button-prev,
.swiper-button-prev { left: 8px !important; right: auto !important; }
.elementor-swiper-button-next,
.swiper-button-next { right: 8px !important; left: auto !important; }
.elementor-swiper-button svg,
.swiper-button-prev svg,
.swiper-button-next svg {
  width: 22px !important;
  height: 22px !important;
}

/* Cap the testimonial widget container so the slider doesn't blow up vertically. */
.elementor-widget-testimonial-carousel,
.elementor-widget-bdt-testimonial,
.elementor-element[class*="elementor-widget-testimonial"] {
  position: relative;
}
.elementor-widget-testimonial-carousel .elementor-main-swiper,
.elementor-widget-testimonial-carousel .swiper-container,
.elementor-widget-testimonial-carousel .swiper {
  overflow: hidden;
  position: relative;
}
.elementor-widget-testimonial-carousel .swiper-wrapper {
  align-items: stretch;
}
.elementor-widget-testimonial-carousel .swiper-slide,
.elementor-widget-testimonial-carousel .elementor-testimonial {
  height: auto;
}

/* === SP1: Single property page - main address title 50% smaller === */
.sp-header-address {
  font-size: 1.75rem !important;
  line-height: 1.25 !important;
}
@media (max-width: 768px) {
  .sp-header-address { font-size: 1.4rem !important; }
}

/* === SP2: Single property - section subheadings 50% smaller === */
.sp-section-title,
.sp-similar-title {
  font-size: 1.25rem !important;
  line-height: 1.3 !important;
}

/* === SP3: Property card titles 50% smaller AND not bold === */
/* Search-results cards rendered by property-search.js */
.clps-wrapper .rm-card-address {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
}
/* Similar-properties cards on single-property */
.sp-similar-card-address {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
}
/* Recent Instructions cards on the homepage */
.ri-card-address {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
}

/* B12 responsive counter override removed (2026-05-11): it was forcing
   `display: flex; flex-wrap: wrap` and `font-size: 90%` at <=900px on
   `.elementor-counter-number-wrapper`, which made the Selling-page
   "Why Sell With Us?" counters render visibly smaller than the
   bernards.coldlava.ai clone. The clone's per-page post-906.css
   already handles the responsive cascade (80px desktop, 40px <=767px).
   If suffix overflow re-surfaces on tablet, fix it with a targeted
   per-widget rule, not a global counter override. */

/* Stop landlords/about hero rows from forcing horizontal overflow on tablet */
@media (max-width: 1024px) {
  .elementor-952 .elementor-element.elementor-element-e6cfa65,
  .elementor-section[data-id="e6cfa65"] {
    padding-right: 0 !important;
  }
}

/* === L3: Landlords FAQ heading === */
.bernards-landlords-faq-heading {
  text-align: center;
  margin-bottom: 16px !important;
}
.bernards-landlords-faq-heading h2 {
  font-family: "Montserrat", sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 700;
  color: var(--e-global-color-secondary) !important;
  margin: 0 !important;
}

/* === SE1: Selling page 4 icon boxes (replaces accordion) === */
.bernards-selling-iconboxes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}
.bernards-selling-iconbox {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bernards-selling-iconbox:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}
.bernards-selling-iconbox-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(93,51,132,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5D3384;
}
.bernards-selling-iconbox-icon svg {
  width: 26px;
  height: 26px;
}
.bernards-selling-iconbox-title {
  font-family: "Montserrat", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  color: #2a2a2a;
}
.bernards-selling-iconbox-text {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #555;
  margin: 0;
}
@media (max-width: 1024px) {
  .bernards-selling-iconboxes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .bernards-selling-iconboxes-grid { grid-template-columns: 1fr; }
}

/* === L2: Landlords hero image - supplied Bernards property photo (from the brief /
   Facebook image set). Overrides the original post-952.css background. */
.elementor-952 .elementor-element.elementor-element-9283488:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap,
.elementor-952 .elementor-element.elementor-element-9283488 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url("/wp-content/uploads/2026/05/landlords-hero.jpg") !important;
  background-position: center center !important;
  background-size: cover !important;
}

/* Banner top padding tightened to match the bottom. Original Elementor
   rule (post-891.css) sets padding-top + padding-bottom both to 40px,
   but the "By The Numbers" heading + its margin pushed extra space at
   the top so it read asymmetric. Zero the heading wrapper's margin
   and pull the banner's top padding down to the same 40px the bottom
   uses; nothing else moves. */
.bernards-stats-block,
.elementor-element.elementor-element-33a5102 {
  --padding-top: 40px !important;
  --padding-bottom: 40px !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
.bernards-stats-block > .e-con-inner {
  padding-top: 0 !important;
}
.bernards-stats-heading {
  text-align: center;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.bernards-stats-heading h2 {
  font-family: "Montserrat", sans-serif !important;
  font-size: 2rem !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  letter-spacing: 0.02em;
  margin: 0 0 16px !important;
}

/* Stats grid: allow wrapping when 6 items + ensure 3-up on tablet, 2-up on phone */
.bernards-stats-block .e-grid {
  flex-wrap: wrap !important;
}
@media (min-width: 1025px) {
  .bernards-stats-block .e-grid > .elementor-widget-icon-box {
    flex: 0 0 calc(33.333% - 24px) !important;
  }
}

/* AB2 note: About Us hero now uses the clone's exact Elementor widget
   structure (image 9c58f65 + heading 4c1ebf7 + text-editor ae78a4f
   inside container 68b69b3). The styling lives in post-1013.css, which
   is already loaded on this page. No bespoke overrides needed. */

/* === Batch 3 - footer overhaul === */

/* H9: hide the body "We Partner With" row (homepage only) - now lives in footer */
.elementor-element-10b4d63 {
  display: none !important;
}

/* Allow the 5-column footer to fit by re-flexing the existing col-25 children */
.elementor-location-footer .elementor-element-5344013 .elementor-container > .elementor-column.elementor-col-25 {
  width: 20% !important;
  flex: 0 0 20% !important;
  max-width: 20% !important;
}
@media (max-width: 1024px) {
  .elementor-location-footer .elementor-element-5344013 .elementor-container > .elementor-column.elementor-col-25 {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}
@media (max-width: 600px) {
  .elementor-location-footer .elementor-element-5344013 .elementor-container > .elementor-column.elementor-col-25 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* H9: 5th column "We Partner With" - partner logo grid (refined: 2x3, uniform cards) */
.bernards-footer-col-partners .bernards-footer-partner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.bernards-footer-col-partners .bernards-footer-partner-img {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  box-sizing: border-box;
}
.bernards-footer-col-partners .bernards-footer-partner-img img {
  max-height: 36px;
  max-width: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* F1: PDF compliance row - merged into the single purple footer block (Oliver):
   the CMP strip + legal disclaimer + copyright are all one full-width purple row. */
.bernards-footer-pdf-row {
  background: #ECE6F4;
  padding: 22px 16px 14px;
  border-top: none;
}
/* White footer columns box (3f77a898, a legacy elementor-section): add bottom padding
   so the gap below the columns (into the lavender block) matches the gap above them
   (purple band -> columns), ~58px. Was flush (the lowest column met the lavender). */
.elementor-element-3f77a898 {
  padding-bottom: 36px !important;
}
.bernards-footer-pdf-row-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: center;
}
.bernards-footer-pdf-link {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5D3384 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(93,51,132,0.3);
  padding: 4px 0;
  transition: color 0.2s, border-color 0.2s;
}
.bernards-footer-pdf-link:hover {
  color: #3f2259 !important;
  border-color: rgba(93,51,132,0.7);
}
@media (max-width: 600px) {
  .bernards-footer-pdf-row-inner { gap: 10px 16px; }
  .bernards-footer-pdf-link { font-size: 11px; }
}

/* Footer: merge the CMP strip + legal disclaimer (15ac6c2, was white) + copyright
   (7dc0347e, was a slightly different purple) into ONE full-width purple block with
   white text, so the footer reads: purple 'Follow us' -> white Bernards columns ->
   one purple block. (Oliver) */
.elementor-element-15ac6c2,
.elementor-element-7dc0347e {
  background-color: #ECE6F4 !important;
}
.elementor-element-15ac6c2,
.elementor-element-15ac6c2 *,
.elementor-element-7dc0347e,
.elementor-element-7dc0347e * {
  color: #5D3384 !important;
}

/* Step D: mobile (<=480px) - break long email/link strings to prevent horizontal overflow */
@media (max-width: 480px) {
  a[href^="mailto:"],
  a[href^="tel:"] {
    word-break: break-all;
    overflow-wrap: anywhere;
  }
}

/* Step E: valuations form 768px overflow - Elementor's form-fields-wrapper has margin-right:-5px
   for inter-column gutters, but at this breakpoint there's no matching parent padding, so it
   pushes 5px past the viewport. Neutralise the negative margin at <=1024px. */
@media (max-width: 1024px) {
  .elementor-form-fields-wrapper.elementor-labels-above {
    margin-right: 0 !important;
  }
}

/* Sticky header. Default: solid white on every page. On the homepage
   (root `<html data-bernards-page="home">` set by coldlava-header.js)
   the header is transparent over the hero video and flips to white
   once scrolled past the threshold. */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.elementor-location-header.is-scrolled {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

/* Vertically centre the header row at desktop widths so the larger
   logo, the nav items, and the Book-a-Valuation button all align on
   the same baseline through the entire flex chain that Elementor
   wraps around them. */
@media (min-width: 1025px) {
  /* Full-width header band, content aligned to the hero's content
     column (logo left edge sits in line with the 'W' in 'Welcome'
     below). Outer wrapper spans the viewport, inner container caps
     and pads to match the hero. */
  .elementor-location-header .elementor-section.elementor-element-70b8e4af,
  .elementor-location-header .elementor-element-70b8e4af {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .elementor-location-header .elementor-element-70b8e4af > .elementor-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 80px !important;
    padding-right: 80px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .elementor-location-header .elementor-element-44f83af5 > .elementor-container,
  .elementor-location-header .elementor-section.elementor-element-44f83af5 .elementor-container {
    align-items: center !important;
    min-height: 92px;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .elementor-location-header .elementor-element-44f83af5 .elementor-column,
  .elementor-location-header .elementor-element-44f83af5 .elementor-widget-wrap {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-content: center !important;
  }
  .elementor-location-header .elementor-nav-menu--main {
    display: flex !important;
    align-items: center !important;
    min-height: 92px;
  }
  .elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu {
    display: flex !important;
    align-items: center !important;
    min-height: auto !important;
  }
  .elementor-location-header .elementor-element-4084b2c {
    display: inline-flex !important;
    align-items: center !important;
  }
}
@media (max-width: 1024px) {
  .elementor-location-header .elementor-section.elementor-element-70b8e4af,
  .elementor-location-header .elementor-element-70b8e4af {
    width: 100% !important;
    max-width: none !important;
  }
  .elementor-location-header .elementor-element-70b8e4af > .elementor-container {
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Charters-style transparent-over-hero header dropped permanently
   (Jacob 2026-05-11). The flash before the hero video loaded made
   the nav unreadable on every load. Header now stays solid white
   on every page, every state. */

/* Step I: post-Step-G QA fixes
   1. H7 stat-box title (63px) overflows its column at <=1024px - scale down responsively.
   2. The `.elementor-cta__bg` (skin-cover background-image divs) overflow viewport via
      Elementor's hover-zoom transform. Clip them to the wrapper. */
@media (max-width: 1024px) {
  .elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon-box-title {
    font-size: 44px !important;
  }
  .elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon-box-description {
    font-size: 16px !important;
  }
}
@media (max-width: 768px) {
  .elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon-box-title {
    font-size: 36px !important;
  }
}
.elementor-cta__bg-wrapper {
  overflow: hidden !important;
}

/* ==========================================================================
   Section A - May 2026 brief
   ========================================================================== */

/* A3 reverted (Jacob 2026-05-11): keep the bernards-clone fonts.
   The clone uses Montserrat (headings/UI) and Heebo (some body text)
   loaded by Elementor's own google-fonts CSS. We no longer enforce
   Futura/Jost sitewide. The `--bernards-font` token below is retained
   only for our new bespoke sections (newsletter, news cards, fees,
   process steps) and now resolves to Montserrat so they stay in family. */
:root {
  --bernards-font: "Montserrat", sans-serif;
}

/* A4: Hero Google review block - Google logo badge on top, purple
   "READ OUR REVIEWS" button below with arrow on the right. Both link
   to the Southsea Google Business profile. */
.elementor-element-a5276f7 a img {
  transition: transform 0.15s ease;
}
.elementor-element-a5276f7 a:hover img {
  transform: scale(1.04);
}
.elementor-element.elementor-element-a5276f7 img {
  width: 38% !important;
  max-width: 280px !important;
  height: auto !important;
}
@media (max-width: 1024px) {
  .elementor-element.elementor-element-a5276f7 img {
    width: 55% !important;
    max-width: 240px !important;
  }
}

/* READ OUR REVIEWS button hidden - the Google badge above already
   links to the Southsea profile. */
.elementor-element-0e84e98 { display: none !important; }

/* A5: Move "By The Numbers" to sit directly below the hero.
   The previous CSS flex-order approach broke the hero on the homepage,
   so this is now done by physically relocating the .bernards-stats-block
   in src/lib/static-pages/index.html (it sits right after the hero
   section in source). No CSS needed here. */

/* A8: Reduce on-scroll motion - disable Elementor entrance animations on
   static content. Carousels and sliders (.swiper-*) keep their motion. */
.elementor-invisible {
  visibility: visible !important;
  opacity: 1 !important;
}
.elementor-element[data-settings*="_animation"],
[data-settings*='"_animation"'] {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.elementor-widget[class*="elementor-invisible"],
.elementor-element[class*="elementor-invisible"] {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}
/* Belt-and-braces: kill any Animate.css class Elementor injects at runtime */
.animated, .animated-slow, .animated-fast,
.fadeIn, .fadeInUp, .fadeInDown, .fadeInLeft, .fadeInRight,
.slideInUp, .slideInDown, .slideInLeft, .slideInRight,
.zoomIn, .zoomInUp, .zoomInDown, .bounceIn {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* A1 reverted (Jacob 2026-05-11): centred-logo experiment dropped.
   Logo stays on the left (its original column) and the nav items sit
   to the right. The injected .bernards-nav-logo-li is hidden via CSS
   on every breakpoint. Original logo column is bumped a touch larger
   and the nav-item font-size is nudged down to keep the bar tidy. */
.bernards-nav-logo-li { display: none !important; }

/* Compact header: bar height stays tight; the logo is the only thing
   that drives the height. Logo bumped slightly per Jacob. */
.elementor-location-header .elementor-element-66762fe8 .elementor-widget-image img,
.elementor-location-header .elementor-element-21bc90e9 img {
  max-height: 72px !important;
  width: auto !important;
  height: auto !important;
  display: block;
}
@media (max-width: 1024px) {
  .elementor-location-header .elementor-element-66762fe8 .elementor-widget-image img,
  .elementor-location-header .elementor-element-21bc90e9 img {
    max-height: 56px !important;
  }
}
/* Strip Elementor's column padding inside the header so the bar isn't
   inflated by empty vertical whitespace around the logo. */
.elementor-location-header .elementor-element-44f83af5,
.elementor-location-header .elementor-element-44f83af5 > .elementor-container,
.elementor-location-header .elementor-element-44f83af5 .elementor-column,
.elementor-location-header .elementor-element-44f83af5 .elementor-widget-wrap,
.elementor-location-header .elementor-element-44f83af5 .elementor-widget-image .elementor-widget-container,
.elementor-location-header .elementor-element-44f83af5 .elementor-widget-nav-menu .elementor-widget-container,
.elementor-location-header .elementor-element-44f83af5 .elementor-widget-button .elementor-widget-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.elementor-location-header .elementor-element-44f83af5 .elementor-widget {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Nav text size - tuned to read clearly without dominating the bar. */
.elementor-location-header .elementor-nav-menu .elementor-item {
  font-size: 15px !important;
  letter-spacing: 0.04em;
  padding: 12px 16px !important;
}
.elementor-location-header .elementor-nav-menu--dropdown .elementor-sub-item,
.elementor-location-header .elementor-nav-menu .elementor-sub-item {
  font-size: 14px !important;
}

/* Header: tighten nav item spacing at desktop so all items + logo + the
   'Book a Valuation' button fit on ONE line (the kit's 17.5px item margins were
   pushing 'Contact Us' onto a 2nd line ~1301-1500px). Side padding (logo<->hero
   alignment) is left untouched. Only applies where the full horizontal nav shows.

   Retightened 2026-08-18: the menu still overflowed its 906px box and ran under
   the 'Book a Valuation' button (Contact Us was ~96px behind it even before
   'Commercial' became the wider 'Block Management'). Type down to 13px with
   tighter padding and margins brings the row back inside its container. */
@media (min-width: 1301px) {
  .elementor-location-header .elementor-nav-menu--main {
    --e-nav-menu-horizontal-menu-item-margin: 2px !important;
  }
  .elementor-location-header .elementor-nav-menu > li.menu-item {
    margin-left: 2px !important;
    margin-right: 2px !important;
  }
  .elementor-location-header .elementor-nav-menu .elementor-item {
    font-size: 13px !important;
    letter-spacing: 0.01em !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* Contact Us branch cards: force Montserrat on the description block
   so the "Visit Branch", phone, email, and opening hours all sit in
   the same family as the rest of the site. */
.elementor-image-box-description,
.elementor-image-box-description * {
  font-family: "Montserrat", sans-serif !important;
}

/* Contact Us page reuses the bernards-clone's Elementor widget markup
   and post-940.css drives the font/size/weight. The branch-card layer
   below just handles two extra things:
     (a) the map<->card hover sync highlight
     (b) bottom-aligning the Opening hours block so it lines up across
         every card on a row even when address line counts differ. */
/* Match the gap below Row 3 (Lee/Gosport -> Finest banner) to the
   smaller, natural gap that already exists between Row 1 -> Row 2
   and Row 2 -> Row 3 (no padding, just baseline). Shrunk Row 3's
   padding-bottom from 40px to 0 so every row-to-row transition reads
   identical, then re-added 24px of grey strip ABOVE the Finest
   banner so there's still visible space before the heading. */
.elementor-page-940 .elementor-element.elementor-element-a1e91ec {
  --padding-top: 0 !important;
  padding-top: 0 !important;
  --padding-bottom: 96px !important;
  padding-bottom: 96px !important;
}
.elementor-page-940 .elementor-element.elementor-element-3ded8ff {
  --padding-top: 0 !important;
  padding-top: 0 !important;
}

/* Lock every branch column on the Contact Us page to 33% width so
   they never stretch to fill the row, regardless of how many cards
   sit in the row. A row with only 2 cards leaves a 33% blank slot
   on the right (intentional - fills as new branches arrive). */
.elementor-page-940 .elementor-element.elementor-element-919f6a7,
.elementor-page-940 .elementor-element.elementor-element-d6ed14b,
.elementor-page-940 .elementor-element.elementor-element-0388d9d,
.elementor-page-940 .elementor-element.elementor-element-b65e30f,
.elementor-page-940 .elementor-element.elementor-element-0c7ac30,
.elementor-page-940 .elementor-element.elementor-element-3b01657,
.elementor-page-940 .elementor-element.elementor-element-d2304a1,
.elementor-page-940 .bernards-branch-col {
  flex: 0 0 33.333% !important;
  width: 33.333% !important;
  max-width: 33.333% !important;
  --width: 33.333% !important;
}
.bernards-branch-card .elementor-image-box-wrapper {
  text-align: left !important;
}
.bernards-branch-card .elementor-image-box-img {
  width: 100% !important;
}
.bernards-branch-card .elementor-image-box-img img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block;
  transition-duration: 0.3s;
}
.bernards-branch-card .elementor-image-box-title {
  font-family: "Montserrat", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

.elementor-widget-image-box.bernards-office-card {
  transition: box-shadow 0.18s ease, transform 0.18s ease;
  cursor: pointer;
  border-radius: 6px;
}
.elementor-widget-image-box.bernards-office-card:hover,
.elementor-widget-image-box.bernards-office-card.is-active {
  box-shadow: 0 0 0 2px var(--brand-purple), 0 10px 24px rgba(93, 51, 132, 0.15);
  transform: translateY(-2px);
}
.elementor-widget-image-box.bernards-office-card:hover .elementor-image-box-img,
.elementor-widget-image-box.bernards-office-card.is-active .elementor-image-box-img {
  border-radius: 6px 6px 0 0;
}
/* Photo -> title gap: 32px on every branch card (Contact Us). The
   doubled 56px Jacob asked for earlier was visually right at the
   time, but with the equal-height flex layout the gap has started
   reading bigger than intended (the row container's padding +
   flex-stretch was inflating it). Pinning to a flat 32px regardless
   of card height. */
.elementor-page-940 .elementor-widget-image-box .elementor-image-box-img,
.elementor-page-940 figure.elementor-image-box-img,
.elementor-page-940 .elementor-image-box-wrapper > .elementor-image-box-img {
  width: 100% !important;
  margin: 0 0 32px 0 !important;
  padding: 0 !important;
}
.elementor-page-940 .elementor-image-box-img img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block !important;
}
.elementor-page-940 .elementor-image-box-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Equal-height cards across a row so the Opening times line up.
   Force the flex chain so every card stretches to the tallest in
   its row, then pin the hours to the bottom of the card body. */
.elementor-page-940 .elementor-element[data-element_type="container"].e-con.e-parent {
  display: flex !important;
  align-items: stretch !important;
}
.elementor-page-940 .elementor-element[data-element_type="container"].e-con.e-child {
  display: flex !important;
  flex: 1 1 0 !important;
  align-self: stretch !important;
}
.elementor-page-940 .elementor-widget-image-box {
  flex: 1 1 auto !important;
  height: 100% !important;
  display: flex !important;
  width: 100% !important;
}
.elementor-page-940 .elementor-widget-image-box > .elementor-widget-container {
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.elementor-page-940 .elementor-image-box-wrapper {
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
.elementor-page-940 .elementor-image-box-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
.elementor-page-940 .elementor-image-box-hours {
  margin: auto 0 0 0 !important;
}
/* Make each card a flex column and push the Opening hours block to the
   bottom of the available height. Cards with a shorter address grow a
   gap above the hours so the hours block starts at the same Y across
   every card on a row. Scoped to Contact Us only. */
.elementor-page-940 .elementor-widget-image-box .elementor-image-box-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.elementor-page-940 .elementor-image-box-description {
  margin-bottom: 0;
}
.elementor-page-940 .elementor-image-box-hours {
  margin: auto 0 0;
  padding-top: 14px;
  font-family: "Montserrat", sans-serif;
}
.elementor-page-940 .elementor-image-box-hours strong { color: #1B2A4A; }
/* Equal-height columns ONLY inside the Contact Us branch grid, so the
   sitewide flex/grid layout on every other page isn't disturbed.
   Scoped to the page wrapper (.elementor-page-940) so this can't
   reach the About Us stats grid or any other e-con elsewhere. */
.elementor-page-940 .elementor-element[data-element_type="container"].e-con.e-parent {
  align-items: stretch;
}
.elementor-page-940 .elementor-element[data-element_type="container"].e-con.e-child {
  display: flex;
}
.elementor-page-940 .elementor-widget-image-box {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}
.elementor-page-940 .elementor-widget-image-box > .elementor-widget-container {
  display: flex;
  width: 100%;
}
.elementor-page-940 .elementor-widget-image-box .elementor-image-box-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}
/* Map pin highlight when its branch card is hovered or active. Scale
   the inner SVG (not the marker container, which Leaflet positions
   with its own transform). Drop-shadow makes the highlight read at a
   glance. */
.bernards-marker svg {
  transition: transform 0.18s ease, filter 0.18s ease;
  transform-origin: 50% 100%;
}
.bernards-marker.is-active { z-index: 1000 !important; }
.bernards-marker.is-active svg {
  transform: scale(1.25);
  filter: drop-shadow(0 4px 10px rgba(93, 51, 132, 0.55));
}
.bernards-marker.is-active svg path { fill: #2b1847; }

/* Hero heading "Welcome to Bernards Estate Agents" - post-891.css has
   text-transform:uppercase on it, which forced the all-caps display
   even after the source text was changed to title case. Override
   here so the rendered text matches the source. */
.elementor-891 .elementor-element.elementor-element-6232537a .elementor-heading-title {
  text-transform: none !important;
}

/* A7: Residual green sweep - catch any remaining mint shades not already
   covered. #6FCFA0 was the search-hero "BUY" tab on the old WP build. */
[style*="#6FCFA0"],
[style*="#6fcfa0"],
[style*="background:#6FCFA0"],
[style*="background-color:#6FCFA0"] {
  background-color: var(--brand-grey) !important;
  color: #fff !important;
}
[style*="color:#6FCFA0"],
[style*="color: #6FCFA0"] {
  color: var(--brand-grey) !important;
}

/* B3: News index page - purple-tinted hero, carousel of post cards */
.bn-news-hero {
  background: linear-gradient(180deg, #5D3384 0%, #45266b 100%);
  color: #ffffff;
  padding: 96px 20px 64px;
  text-align: center;
}
.bn-news-hero-inner {
  max-width: 880px;
  margin: 0 auto;
}
.bn-news-hero-h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 56px;
  font-weight: 500;
  text-transform: capitalize;
  margin: 0 0 16px;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.bn-news-hero-sub {
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 auto;
  max-width: 640px;
}
@media (max-width: 768px) {
  .bn-news-hero { padding: 48px 20px 24px; }
  .bn-news-hero-h1 { font-size: 32px; }
}

.bn-news-carousel-section {
  background: #f7f5fb;
  padding: 56px 0 80px;
}
.bn-news-carousel-shell {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 72px;
}
.bn-news-carousel-viewport {
  overflow: hidden;
  padding: 8px 4px;
  margin: -8px -4px;
}
.bn-news-carousel-track {
  display: flex;
  align-items: stretch;
  gap: 28px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.bn-news-card {
  flex: 0 0 25%;
  min-width: 0;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(20, 12, 40, 0.06);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  display: flex;
  flex-direction: column;
}
.bn-news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(20, 12, 40, 0.14);
}
.bn-news-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.bn-news-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #efeaf6;
  flex: 0 0 auto;
  position: relative;
}
.bn-news-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.18) 100%);
}
.bn-news-card-img--placeholder {
  background: linear-gradient(135deg, #efeaf6, #d9cce8);
}
.bn-news-card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 12px;
}
.bn-news-card-date {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-purple);
  font-weight: 600;
}
.bn-news-card-title {
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  color: #1B2A4A;
}
.bn-news-card-readmore {
  margin-top: auto;
  padding-top: 6px;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-purple);
}
.bn-news-card-readmore::after {
  content: " \2192";
  transition: transform 0.15s ease;
  display: inline-block;
}
.bn-news-card:hover .bn-news-card-readmore::after {
  transform: translateX(3px);
}
.bn-news-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-purple);
  color: #ffffff;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  z-index: 2;
}
.bn-news-carousel-arrow:hover {
  background: #45266b;
  transform: translateY(-50%) scale(1.05);
}
.bn-news-carousel-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.bn-news-carousel-arrow:disabled:hover {
  background: var(--brand-purple);
  transform: translateY(-50%);
}
.bn-news-carousel-arrow--prev { left: 8px; }
.bn-news-carousel-arrow--next { right: 8px; }
.bn-news-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.bn-news-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(93, 51, 132, 0.25);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.bn-news-carousel-dot.is-active {
  background: var(--brand-purple);
  transform: scale(1.25);
}
@media (max-width: 768px) {
  .bn-news-carousel-shell { padding: 0 16px; }
  .bn-news-carousel-arrow--prev { left: -4px; }
  .bn-news-carousel-arrow--next { right: -4px; }
}

/* === Landlords "Service options and menu of charges" - branded HTML
   table that replaces the original PNG. Left rail: purple panel with
   the four tier descriptions. Right rail: comparison grid with
   ticks / crosses / Optional pills. === */
.bernards-service-table {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  max-width: 1180px;
  margin: 0 auto 36px;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 32px rgba(20, 12, 40, 0.08);
  border: 1px solid #ece6f5;
}
.bernards-service-table-intro {
  background: linear-gradient(180deg, #5D3384 0%, #45266b 100%);
  color: #ffffff !important;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
}
/* Landlord & Tenant Fees PDF button, pinned to the bottom of the purple rail
   (moved in from below the table, Oliver 2026-07-13). */
.bernards-service-table-intro-btn {
  margin-top: auto;
  align-self: stretch;
  display: block;
  text-align: center;
  padding: 13px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  color: #ffffff !important;
  font-family: "Montserrat", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.bernards-service-table-intro-btn:hover {
  background: #ffffff;
  color: #5D3384 !important;
}
/* Keep clear air between the copy above and the pinned button. */
.bernards-service-table-intro-list {
  margin-bottom: 28px !important;
}
.bernards-service-table-intro-h {
  font-family: "Montserrat", sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0 0 22px;
  line-height: 1.15;
  color: #ffffff !important;
}
.bernards-service-table-intro-list {
  margin: 0;
}
.bernards-service-table-intro-list dt {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: #ffffff !important;
  letter-spacing: 0.01em;
}
.bernards-service-table-intro-list dd {
  font-family: "Montserrat", sans-serif;
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.86) !important;
}
.bernards-service-table-intro-list dd:last-child {
  margin-bottom: 0;
}

.bernards-service-table-grid-wrap {
  padding: 24px 24px 28px;
  overflow-x: auto;
}
.bernards-service-table-grid-h {
  font-family: "Montserrat", sans-serif;
  font-size: 1.625rem;
  font-weight: 500;
  color: #1f2937;
  margin: 0 0 18px;
}
.bernards-service-table-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  color: #1f2937;
}
.bernards-service-table-grid thead th {
  font-weight: 500;
  font-size: 13px;
  color: #4a4a4a;
  text-align: center;
  padding: 0 12px 14px;
  border-bottom: 1px solid #ece6f5;
}
.bernards-service-table-grid thead th.bn-st-feat {
  text-align: left;
  color: #6b7280;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bernards-service-table-grid thead th.bn-st-feat-rent {
  color: var(--brand-purple);
  font-weight: 600;
}
.bernards-service-table-grid tbody th {
  text-align: left;
  font-weight: 500;
  color: #1f2937;
  padding: 14px 12px;
  border-bottom: 1px solid #f4f0fa;
  background: rgba(93, 51, 132, 0.02);
}
.bernards-service-table-grid tbody td {
  text-align: center;
  padding: 14px 8px;
  border-bottom: 1px solid #f4f0fa;
}
.bernards-service-table-grid tbody tr:last-child th,
.bernards-service-table-grid tbody tr:last-child td {
  border-bottom: 0;
}
.bernards-service-table-grid tbody tr:hover th,
.bernards-service-table-grid tbody tr:hover td {
  background: rgba(93, 51, 132, 0.05);
}
.bernards-service-table-grid td[data-v="yes"] {
  color: var(--brand-purple);
  font-size: 18px;
  font-weight: 700;
}
.bernards-service-table-grid td[data-v="no"] {
  color: #c8c1d6;
  font-size: 16px;
  font-weight: 600;
}
.bernards-service-table-grid td[data-v="opt"] {
  color: var(--brand-purple);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bernards-service-table-grid td[data-v="opt"]::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-purple);
  margin-right: 8px;
  vertical-align: middle;
  opacity: 0.4;
}

/* Mobile cards - hidden on desktop, replace the table on small viewports */
.bernards-service-cards {
  display: none;
}

@media (max-width: 900px) {
  .bernards-service-table {
    grid-template-columns: 1fr;
  }
  .bernards-service-table-intro {
    padding: 28px 22px;
  }
  .bernards-service-table-grid-wrap {
    padding: 20px 16px 24px;
  }
  .bernards-service-table-grid {
    display: none;
  }
  .bernards-service-table-grid-h {
    font-size: 1.375rem;
  }
  .bernards-service-cards {
    display: grid;
    gap: 14px;
    margin-top: 4px;
  }
  .bernards-service-card {
    background: #ffffff;
    border: 1px solid #ece6f5;
    border-radius: 12px;
    padding: 22px 22px 20px;
    box-shadow: 0 2px 8px rgba(20, 12, 40, 0.04);
  }
  .bernards-service-card.is-premium {
    border-color: var(--brand-purple);
    box-shadow: 0 6px 20px rgba(93, 51, 132, 0.14);
    background: linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%);
    position: relative;
  }
  .bernards-service-card.is-premium::before {
    content: "Most comprehensive";
    display: inline-block;
    background: var(--brand-purple);
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
  }
  .bernards-service-card h4 {
    font-family: "Montserrat", sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--brand-purple);
    margin: 0 0 14px;
    line-height: 1.2;
  }
  .bernards-service-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .bernards-service-card-list li {
    font-family: "Montserrat", sans-serif;
    font-size: 0.875rem;
    color: #1f2937;
    padding: 9px 0;
    border-bottom: 1px solid #f4f0fa;
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 10px;
  }
  .bernards-service-card-list li:last-child {
    border-bottom: 0;
  }
  .bernards-service-card-list li::before {
    content: "✓";
    color: var(--brand-purple);
    font-weight: 700;
    font-size: 14px;
    text-align: center;
  }
  .bernards-service-card-list li[data-v="opt"]::before {
    content: "○";
    color: rgba(93, 51, 132, 0.55);
    font-weight: 700;
  }
  .bn-sc-opt {
    background: rgba(93, 51, 132, 0.10);
    color: var(--brand-purple);
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1;
  }
}

/* B11: Process of Letting on the Landlords page */
.bernards-process-section {
  background: #ffffff;
  padding: 64px 20px;
}
.bernards-process-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.bernards-process-heading {
  font-family: var(--bernards-font);
  font-size: 2rem;
  font-weight: 700;
  color: var(--brand-purple);
  text-align: center;
  margin: 0 0 12px;
}
.bernards-process-intro {
  font-family: var(--bernards-font);
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
  margin: 0 auto 36px;
  max-width: 720px;
  color: #2a2a2a;
}
.bernards-process-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  counter-reset: bernards-step;
}
.bernards-process-steps > li {
  display: flex;
  gap: 16px;
  background: #f7f5fb;
  border-left: 4px solid var(--brand-purple);
  border-radius: 6px;
  padding: 22px 24px;
}
.bernards-process-step-num {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-purple);
  color: #ffffff;
  font-family: var(--bernards-font);
  font-size: 1rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bernards-process-steps h3 {
  font-family: var(--bernards-font);
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: #1a1a1a;
}
.bernards-process-steps p {
  font-family: var(--bernards-font);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  color: #3a3a3a;
}
@media (max-width: 820px) {
  .bernards-process-steps { grid-template-columns: 1fr; }
}

/* B9: Letting agency fees grid on the Landlords page */
.bernards-fees-section {
  background: #f4f2f8;
  padding: 64px 20px;
}
.bernards-fees-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.bernards-fees-heading {
  font-family: var(--bernards-font);
  font-size: 2rem;
  font-weight: 700;
  color: var(--brand-purple);
  text-align: center;
  margin: 0 0 8px;
}
.bernards-fees-intro {
  font-family: var(--bernards-font);
  font-size: 0.95rem;
  text-align: center;
  margin: 0 auto 32px;
  color: #4a4a4a;
}
.bernards-fees-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
.bernards-fee-card {
  background: #ffffff;
  border: 1px solid #e5e0ee;
  border-radius: 10px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
/* Whole card turns brand purple on hover - same effect on all three
   (Oliver 2026-07-13). */
.bernards-fee-card:hover {
  background: var(--brand-purple, #5D3384) !important;
  border-color: var(--brand-purple, #5D3384) !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(93, 51, 132, 0.28);
}
.bernards-fee-card:hover .bernards-fee-rate,
.bernards-fee-card:hover h3,
.bernards-fee-card:hover p {
  color: #ffffff !important;
}
/* Third card carries the -feature modifier from the original variant.
   Make it behave exactly like the others - no separate colour overrides,
   so the .bernards-fee-rate purple rule above wins on all three cards. */
.bernards-fee-rate {
  font-family: var(--bernards-font);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--brand-purple);
  line-height: 1;
  margin-bottom: 8px;
}
.bernards-fee-card h3 {
  font-family: var(--bernards-font);
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: #1a1a1a;
}
.bernards-fee-card p {
  font-family: var(--bernards-font);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  color: #3a3a3a;
}
.bernards-fees-other {
  font-family: var(--bernards-font);
  font-size: 0.9rem;
  line-height: 1.55;
  text-align: center;
  color: #4a4a4a;
  margin: 0 0 16px;
}
.bernards-fees-pdf {
  font-family: var(--bernards-font);
  font-size: 0.95rem;
  text-align: center;
  margin: 0;
}
.bernards-fees-pdf a {
  color: var(--brand-purple);
  text-decoration: underline;
  font-weight: 600;
}
@media (max-width: 820px) {
  .bernards-fees-grid { grid-template-columns: 1fr; }
}

/* D1: Newsletter sign-up section - sits at the bottom of the homepage,
   directly above the footer. Purple background to match the brand block. */
.bernards-newsletter {
  background: var(--brand-purple);
  padding: 56px 20px;
  color: #ffffff;
}
.bernards-newsletter-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.bernards-newsletter-copy h3 {
  font-family: var(--bernards-font);
  font-size: 1.875rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: #ffffff;
}
.bernards-newsletter-copy p {
  font-family: var(--bernards-font);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}
.bernards-newsletter-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.bernards-newsletter-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.bernards-newsletter-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 16px;
  font-family: var(--bernards-font);
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: #ffffff;
  color: #1a1a1a;
}
.bernards-newsletter-input:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
.bernards-newsletter-button {
  flex: 0 0 auto;
  padding: 14px 24px;
  font-family: var(--bernards-font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 6px;
  border: 0;
  background: #ffffff;
  color: var(--brand-purple);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.bernards-newsletter-button:hover {
  background: rgba(255, 255, 255, 0.92);
  transform: translateY(-1px);
}
.bernards-newsletter-status {
  min-height: 1.4em;
  margin: 10px 0 0;
  font-family: var(--bernards-font);
  font-size: 0.875rem;
  color: #ffffff;
}
@media (max-width: 820px) {
  .bernards-newsletter-inner { grid-template-columns: 1fr; gap: 24px; }
  .bernards-newsletter-row { flex-direction: column; }
  .bernards-newsletter-button { width: 100%; }
}

/* "Not Quite Ready to Sell" text-editor: equalise gap above and below the bullet list. */
.elementor-element-45e4c53 .elementor-widget-container > p,
.elementor-element-45e4c53 .elementor-widget-container > ul {
  margin: 0 0 16px;
}
.elementor-element-45e4c53 .elementor-widget-container > p:last-child,
.elementor-element-45e4c53 .elementor-widget-container > ul:last-child {
  margin-bottom: 0;
}
.elementor-element-45e4c53 .elementor-widget-container > ul {
  padding-left: 1.5em;
}

/* Selling page: remove the 4-tile service nav row (Selling/Landlords/Land/Mortgages) per web-dev review p.7. */
.elementor-element-04b374c {
  display: none !important;
}

/* Contact page: grey branch section had 80px top / 0 bottom padding. Match bottom to top so the hours aren't flush against the grey edge (web-dev review p.9). */
.elementor-940 .elementor-element.elementor-element-704f6bb {
  --padding-bottom: 80px;
}
@media (max-width: 767px) {
  .elementor-940 .elementor-element.elementor-element-704f6bb {
    --padding-bottom: 40px;
  }
}

/* Razak/testimonial (review) row (568cadc): grey band so the grey runs across Mortgages
   + the review row (white content cards sit on it), then white for Free Property
   Valuation below. (Oliver - keep this, it looks good.) */
.elementor-891 .elementor-element.elementor-element-568cadc {
  background-color: #F8F8F8 !important;
}
.elementor-891 .elementor-element.elementor-element-568cadc > .e-con-inner {
  padding-top: 40px !important;
  padding-bottom: 80px !important;
}
/* Halve the gap between the Mortgages row and the review row (Oliver): was 160px
   (80 below Mortgages image + 80 above review image) -> 80px (40 + 40). Only the
   facing edges change; the gaps above Mortgages and below the review are untouched. */
.elementor-891 .elementor-element.elementor-element-904c2b6 > .e-con-inner {
  padding-bottom: 40px !important;
}
/* Halve the gap below the white Free Property Valuation band into the purple row. */
.elementor-891 .elementor-element.elementor-element-14c172ff > .e-con-inner {
  padding-top: 20px !important;
}
.elementor-891 .elementor-element.elementor-element-8591aff {
  margin-top: 20px !important;
}

/* Free Property Valuation: full-width WHITE band, content capped at the site-wide
   1280 width inside. The grey "break" comes from the neighbouring bands (alternating
   white/grey full-width bands) - this matches the rest of the page's full-width-band
   rhythm rather than a floating card. Template for the sitewide pattern. */
.elementor-891 .elementor-element.elementor-element-d54ff5d {
  background-color: #ffffff !important;
  /* Match the FPV top/bottom spacing to the 80px Mortgages->review gap (Oliver).
     --padding-top drives BOTH the section and the inner wrapper (it doubles), and
     the content adds ~24px (top heading) / ~10px (bottom button). So visible gap =
     2*pad + offset: top 2*28+24=80, bottom 2*35+10=80. */
  --padding-top: 28px !important;
  --padding-bottom: 35px !important;
  padding-top: 28px !important;
  padding-bottom: 35px !important;
}
.elementor-891 .elementor-element.elementor-element-d54ff5d > .e-con-inner {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-items: center !important;
}

/* === Homepage row-width normalisation (web-dev review p.1/p.2) ===
   Match every CONTENT row to the 'Not Quite Ready to Sell' reference frame:
   1280px content with 80px side gutters (identical to the header + footer).
   Full-bleed rows are kept full-width per Oliver: the hero + Start-your-search
   band (31e508f1) and the 'By The Numbers' purple stat band (33a5102). */
@media (min-width: 1025px) {
  /* Boxed content rows -> cap inner wrapper to 1280, centred. The designated
     full-width boxed sections are excluded so their full-width override wins. */
  .elementor-891 > .e-con.e-con-boxed:not(.elementor-element-33a5102):not(.elementor-element-9ec1e61):not(.elementor-element-904c2b6):not(.elementor-element-568cadc):not(.elementor-element-d54ff5d) > .e-con-inner {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Legacy <section> content rows -> cap container to 1280 (hero 31e508f1 excluded). */
  .elementor-891 > .elementor-section:not(.elementor-element-31e508f1) > .elementor-container {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Full-bleed two-column content rows (We-care b6fec2e, NQRtS a49aa37): keep the
     background edge-to-edge, pin the content to the 1280 frame via symmetric padding. */
  .elementor-891 > .e-con.e-con-full {
    padding-left: max(0px, calc((100% - 1280px) / 2)) !important;
    padding-right: max(0px, calc((100% - 1280px) / 2)) !important;
  }
}

/* === Homepage: FULL-WIDTH content sections = content with 80px gutters either side
   (header-bar gutters), NOT edge-to-edge (Oliver). Background full-bleed; content fills
   viewport minus 80px each side. Sections: We Care (b6fec2e), Not Quite Ready to Sell
   (a49aa37), 4-tile grid (9ec1e61), Mortgages (904c2b6), Reviews (568cadc), Free
   Property Valuation (d54ff5d). */
@media (min-width: 1025px) {
  .elementor-891 > .e-con.elementor-element-9ec1e61,
  .elementor-891 > .e-con.elementor-element-904c2b6,
  .elementor-891 > .e-con.elementor-element-568cadc,
  .elementor-891 > .e-con.elementor-element-d54ff5d,
  .elementor-891 > .e-con.e-con-full.elementor-element-b6fec2e,
  .elementor-891 > .e-con.e-con-full.elementor-element-a49aa37 {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
  .elementor-891 > .e-con.elementor-element-9ec1e61 > .e-con-inner,
  .elementor-891 > .e-con.elementor-element-904c2b6 > .e-con-inner,
  .elementor-891 > .e-con.elementor-element-568cadc > .e-con-inner,
  .elementor-891 > .e-con.elementor-element-d54ff5d > .e-con-inner {
    max-width: none !important;
  }
}

/* === Sitewide width: FULL WIDTH = content with 80px gutters, RESPONSIVE ===
   The old fixed 1280px cap is ABOLISHED site-wide (Oliver). That cap made content
   lock to 1280px - it only looked like 80px gutters at exactly 1440px and centred
   (capped) on anything wider. Replaced with responsive 80px side gutters so content
   scales with the viewport on every page. Homepage (891) keeps its own bespoke
   per-section setup above; header (304) + footer (317) are untouched. */
@media (min-width: 1025px) {
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .e-con.e-con-boxed,
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .e-con.e-con-full {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .e-con.e-con-boxed > .e-con-inner {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .elementor-section {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .elementor-section > .elementor-container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* === Sitewide vertical rhythm = the homepage spacing, run site-wide ===
   Target: content rows ~80px top/bottom (the homepage standard). The catch is
   how Elementor section types combine padding:
   - BOXED e-con: the inner wrapper inherits --padding-top, so the section value
     DOUBLES (section 40 + inner 40 = ~80 visible). Keep boxed at 40.
   - FULL e-con + LEGACY <section>: no inner doubling, so the section value IS the
     visible padding. Set these to 80 to match.
   Coloured stat bands stay tighter (~50) via their own inner-padding overrides.
   Homepage (891) keeps its bespoke spacing; header (304) + footer (317) untouched. */
@media (min-width: 1025px) {
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .e-con.e-con-boxed {
    --padding-top: 20px !important;
    --padding-bottom: 20px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .e-con.e-con-full,
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .elementor-section {
    --padding-top: 40px !important;
    --padding-bottom: 40px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* === Header nav: horizontal down to tablet, burger ONLY on phone (Oliver +
   developer). Horizontal >=768px (one line, no wrap); burger <=767px. To fit
   the logo + 7 nav items at tablet widths, the "Book a Valuation" CTA is
   hidden 768-1024px (it returns >=1025px and is reachable in the burger /
   footer below 768px). Scoped to the header (elementor-304). */
@media (min-width: 768px) {
  .elementor-304 .elementor-nav-menu--main { display: flex !important; }
  .elementor-304 .elementor-nav-menu--main > .elementor-nav-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
  }
  .elementor-304 .elementor-menu-toggle { display: none !important; }
}
@media (max-width: 767px) {
  .elementor-304 .elementor-nav-menu--main { display: none !important; }
  .elementor-304 .elementor-menu-toggle { display: flex !important; }
}
/* Compacting (768-1300px): tighter items so the horizontal nav fits one line. */
@media (min-width: 768px) and (max-width: 1300px) {
  .elementor-304 .elementor-nav-menu--main {
    --e-nav-menu-horizontal-menu-item-margin: 1px !important;
  }
  .elementor-304 .elementor-nav-menu > li.menu-item {
    margin-left: 1px !important;
    margin-right: 1px !important;
  }
  .elementor-304 .elementor-nav-menu .elementor-item {
    font-size: 12.5px !important;
    letter-spacing: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}
/* Header layout at tablet (768-1024px): the header stacks + reverses its
   columns here by default (built for the burger). Force a single horizontal
   row - logo | nav - pin the order, hide the CTA column, and let the nav take
   the slack. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-304 .elementor-element-44f83af5 > .elementor-container {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .elementor-304 .elementor-element-66762fe8 {
    width: auto !important;
    flex: 0 0 auto !important;
    order: 0 !important;
  }
  .elementor-304 .elementor-element-69476c00 {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    order: 1 !important;
  }
  .elementor-304 .elementor-element-1a77465 {
    display: none !important;
  }
  .elementor-304 .elementor-nav-menu .elementor-item {
    font-size: 11.5px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* === Selling: 'Why Sell With Us?' stats band → purple (Oliver design request) ===
   Matches homepage 'By The Numbers' (#5D3384). NOTE: the counter numbers
   are brand-purple by default (colour set on .elementor-counter-number-
   wrapper), so they disappear on a purple bg unless the WRAPPER is forced
   white too. Padding matches the homepage band (40px, zero inner-top).
   Counters set to Montserrat for consistency. */
.elementor-element-c3751a9 {
  background-color: #5D3384 !important;
  --padding-top: 40px !important;
  --padding-bottom: 40px !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
.elementor-element-c3751a9 > .e-con-inner {
  padding-top: 10px !important;
  padding-bottom: 0 !important;
}
/* Same balance fix for the other coloured stat bands so content is centred
   (equal space above/below) and consistent with the homepage (Oliver): landlords
   stats (9ba26ce) and About "Why Choose Bernards?" (ed37b4e) were top-light /
   bottom-heavy from an asymmetric inner padding. */
.elementor-952 .elementor-element-9ba26ce > .e-con-inner,
.elementor-1013 .elementor-element-ed37b4e > .e-con-inner {
  padding-top: 10px !important;
  padding-bottom: 0 !important;
}
.elementor-element-c3751a9 .elementor-heading-title,
.elementor-element-c3751a9 .elementor-counter-title,
.elementor-element-c3751a9 .elementor-counter-number-wrapper,
.elementor-element-c3751a9 .elementor-counter-number,
.elementor-element-c3751a9 .elementor-counter-number-prefix,
.elementor-element-c3751a9 .elementor-counter-number-suffix {
  color: #ffffff !important;
}
.elementor-element-c3751a9 .elementor-counter-number-wrapper {
  font-family: "Montserrat", sans-serif !important;
}

/* Selling hero: add bottom padding so it doesn't run straight into the purple 'Why Sell With Us?' band below.
   Also force symmetric 80px side gutters (was 0 left / 100 right) so the hero
   content runs full-width-with-gutters like the rest of the page (Oliver). */
.elementor-906 .elementor-element.elementor-element-241b0c2 {
  padding-bottom: 56px !important;
  padding-left: 80px !important;
  padding-right: 80px !important;
}
.elementor-906 .elementor-element.elementor-element-241b0c2 > .elementor-container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* === Site-wide row width consistency (web-dev review p.1/p.2/p.7/p.8) ===
   Elementor's kit sets the default boxed-container width to 1280px, while
   the dominant rows use an explicit 1450px - so any row without an explicit
   width (e.g. the 'Why work with Bernards?' heading) sat narrower and
   misaligned. Raise the desktop default to 1450px so all default-width rows
   line up with the 1450 rows in one change. Desktop only (>1024px); the kit's
   tablet/mobile container widths are left as-is. Rows with explicit widths
   (incl. intentionally narrow ones) are unaffected; full-width rows are
   handled separately by the content-cap rules above. */
@media (min-width: 1025px) {
  .e-con {
    --container-max-width: 1450px;
  }
}

/* About Us: remove the top 'We care about property / We care about you' row
   so the 'About Us' row becomes the top row (web-dev review p.8). The 2-col
   image-left restructure of that row is pending the supplied golf photo. */
.elementor-1013 .elementor-element.elementor-element-a8dcb4c {
  display: none !important;
}

/* Buttons: uppercase sitewide for consistency (web-dev review p.1/p.7/p.8).
   Standard buttons were authored in caps; some (e.g. case-study 'book an
   appointment' / 'check availability') were lowercase. Force uppercase on
   the button text so they all match regardless of authored case. */
.elementor-button .elementor-button-text {
  text-transform: uppercase;
}

/* Landlords: match 'Expert Lettings Services Tailored to You' heading to the
   'How letting with Bernards works' reference (2rem / 700) per web-dev
   review p.4 ('same size and thickness'). Was 35px/500. */
.elementor-element-0904213 .elementor-heading-title {
  font-size: 2rem !important;
  font-weight: 700 !important;
}

/* Meet the Team: box the full-width 'Meet The Whole Team' row to 1450px so its
   two columns match the rest of the site's rows (web-dev review p.8). The group
   photo lives on the left column, so capping the container constrains both
   columns cleanly. */
.elementor-124 .elementor-element.elementor-element-8332f44 > .elementor-container {
  max-width: 1450px;
  margin-left: auto;
  margin-right: auto;
}

/* Remove dead 'READ OUR REVIEWS' CTA buttons (all link to #) per web-dev
   review p.4 (Landlords) / p.6 (Selling) and the sitewide intent. Covers
   Selling, Landlords, Land & New Homes, Mortgages, and the 3 case studies
   (shared id b8b51ba). The HOMEPAGE 'READ OUR REVIEWS' is intentionally
   kept - it's a working link to their Google reviews, not a dead CTA. */
.elementor-element-79b3451,
.elementor-element-5fab9c9,
.elementor-element-44d2ff5,
.elementor-element-8d34d21,
.elementor-element-b8b51ba {
  display: none !important;
}

/* === Heading consistency - full sweep (web-dev review p.1/p.4/p.5) ===
   Normalise standalone section headings to the site canonical 45px / 500
   (with the canonical responsive steps). Deliberately LEAVES the hero tier
   (73-80px) and the intentional 'We care about property / We care about you'
   size pairing untouched.
   - 53f8c534  Mortgages 'What's it going to cost?' (was 55px)
   - 3747455   Land 'We are always seeking land...' (was 55px)
   - 51284c2   Valuations 'Search for Your Perfect Property' (was 48px/300)
   - 2b65cf7   Selling 'What we do and how we do it' (was 48px/300) */
.elementor-element-53f8c534 .elementor-heading-title,
.elementor-element-3747455 .elementor-heading-title,
.elementor-element-51284c2 .elementor-heading-title,
.elementor-element-2b65cf7 .elementor-heading-title {
  font-size: 45px !important;
  font-weight: 500 !important;
}
@media (max-width: 1024px) {
  .elementor-element-53f8c534 .elementor-heading-title,
  .elementor-element-3747455 .elementor-heading-title,
  .elementor-element-51284c2 .elementor-heading-title,
  .elementor-element-2b65cf7 .elementor-heading-title {
    font-size: 35px !important;
  }
}
@media (max-width: 767px) {
  .elementor-element-53f8c534 .elementor-heading-title,
  .elementor-element-3747455 .elementor-heading-title,
  .elementor-element-51284c2 .elementor-heading-title,
  .elementor-element-2b65cf7 .elementor-heading-title {
    font-size: 28px !important;
  }
}

/* === Contact page: even vertical rhythm between sections (Oliver) ===
   Office rows had 80px top+bottom (160px between rows); Finest 0/80;
   Follow-us 28/28; map 0 - all uneven. Normalise to a uniform 40px so the
   gaps map→row1→row2→row3→Finest→Follow-us are all ~80px. */
.elementor-940 .elementor-element.elementor-element-704f6bb,
.elementor-940 .elementor-element.elementor-element-3ded8ff {
  --padding-top: 40px !important;
  --padding-bottom: 40px !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
.elementor-940 .elementor-element.elementor-element-6acffb89 {
  --padding-bottom: 20px !important;
  padding-bottom: 20px !important;
}
/* Follow-us (footer top section, shared) - match the rhythm */
.elementor-element-14c172ff {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* === 'MEET EVERYONE AT BERNARDS' buttons: symmetric padding (Oliver) ===
   Were flush against the team cards above (0) with 80px below - uneven.
   Add 40px above (button margin-top) and set the section bottom padding to
   40px so the button has equal breathing room above and below. */
.elementor-element-5a90f81,
.elementor-element-4dcdbd1,
.elementor-element-000982b {
  margin-top: 40px !important;
}
.elementor-element-28c81da,
.elementor-element-4c534a7,
.elementor-element-7a62bf2 {
  --padding-bottom: 40px !important;
  padding-bottom: 40px !important;
}

/* Selling: 'Free Property Valuation' CTA row was full-width (e-con-full) while
   the same row is boxed on Home/Landlords - cap its content to 1450 centred so
   it aligns with every other row. (Oliver - row widths must match sitewide.) */
.elementor-element-bb45a59 {
  max-width: 1450px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  --padding-left: 25px !important;
  --padding-right: 25px !important;
  padding-left: 25px !important;
  padding-right: 25px !important;
}

/* ---- Replacement photos (supplied images) ---- */
/* Home "Not Quite Ready to Sell" hero (bef6aca) → yellow-brick detached house
   (handover Section 1 #4, supplied as bernards4.png). */
.elementor-891 .elementor-element.elementor-element-bef6aca:not(.elementor-motion-effects-element-type-background),
.elementor-891 .elementor-element.elementor-element-bef6aca > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url("/wp-content/uploads/2026/06/bernards4.png") !important;
}
/* Selling hero left image (0020fe4) → supplied Tudor-house photo */
.elementor-906 .elementor-element.elementor-element-0020fe4:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap,
.elementor-906 .elementor-element.elementor-element-0020fe4 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url("/wp-content/uploads/2026/05/selling-featured.jpg") !important;
}


/* === Selling page: remove Razak review row; FPV full-width; video-tours placeholders === */
/* Remove the Razak / "Feb 10th 26" review row (Oliver). */
.elementor-906 .elementor-element.elementor-element-7479962 { display: none !important; }
/* Free Property Valuation (bb45a59) full-width (override the old 1450 cap). */
.elementor-906 .elementor-element.elementor-element-bb45a59 {
  max-width: none !important;
  padding-left: 80px !important;
  padding-right: 80px !important;
}
/* Video Tours: 2-column section, two vertical (9:16) tour videos side by side. */
.bernards-video-tours-2col {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: center;
  max-width: none;
  margin: 28px 0 0;
}
.bernards-video-tours-2col .bernards-video {
  display: block;
  height: 560px;
  width: auto;
  max-width: 360px;
  border-radius: 8px;
  background: #000;
}
@media (max-width: 600px) {
  .bernards-video-tours-2col { flex-direction: column; align-items: center; }
  .bernards-video-tours-2col .bernards-video { height: auto; width: 70%; max-width: 320px; }
}


/* === Landlords page (952) - Oliver review === */
/* Full-width sections: hero (e6cfa65), FAQ (00cfe6d), Service Options (a3ff5d7),
   Free Property Valuation (b81afc4). Override the sitewide 1280 cap for these. */
@media (min-width: 1025px) {
  .elementor-952 .elementor-element-e6cfa65 > .elementor-container,
  .elementor-952 .elementor-element-b81afc4 > .e-con-inner {
    max-width: none !important;
  }
}
@media (min-width: 1300px) {
  .elementor-952 .elementor-element-00cfe6d,
  .elementor-952 .elementor-element-a3ff5d7 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* Stats row (9ba26ce: Average Rent / Average Yield) -> light lavender band (the
   homepage lavender #ECE6F4) with purple text (Oliver: light lavender + purple text). */
.elementor-952 .elementor-element.elementor-element-9ba26ce {
  background-color: #ECE6F4 !important;
}
.elementor-952 .elementor-element-9ba26ce .elementor-heading-title,
.elementor-952 .elementor-element-9ba26ce .elementor-counter-title,
.elementor-952 .elementor-element-9ba26ce .elementor-counter-number-wrapper,
.elementor-952 .elementor-element-9ba26ce .elementor-counter-number,
.elementor-952 .elementor-element-9ba26ce .elementor-counter-number-prefix,
.elementor-952 .elementor-element-9ba26ce .elementor-counter-number-suffix,
.elementor-952 .elementor-element-9ba26ce p,
.elementor-952 .elementor-element-9ba26ce .elementor-widget-text-editor {
  color: #5D3384 !important;
}


/* Landlords: heading consistency - Expert Lettings (0904213) + FAQ (00cfe6d) match the
   standard section heading (45px / 500, Montserrat), like "Meet our lettings team". */
.elementor-952 .elementor-element-0904213 .elementor-heading-title,
.elementor-952 .elementor-element-00cfe6d .elementor-widget-heading .elementor-heading-title {
  font-family: "Montserrat", sans-serif !important;
  font-size: 45px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}
/* Landlords Service Options (a3ff5d7): photo column (343e5e2) REMOVED (Oliver
   2026-07-13) - the menu-of-charges table (d4b9ff3) now runs full width. */
.elementor-952 .elementor-element-a3ff5d7 > .elementor-element-343e5e2 {
  display: none !important;
}
@media (min-width: 1025px) {
  .elementor-952 .elementor-element-a3ff5d7 > .elementor-element-d4b9ff3 {
    width: 100% !important;
    flex: 0 0 100% !important;
    --width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Let the table use the section's full width (was capped at 1180px; the
     flex column otherwise shrinks the grid to fit-content). */
  .elementor-952 .bernards-service-table {
    max-width: none !important;
    width: 100% !important;
  }
}


/* === "Full width" = 80px gutters either side - Selling (906) + Landlords (952) === */
/* Selling: every content section runs full width with 80px side gutters. */
@media (min-width: 1025px) {
  .elementor-906 > .e-con {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
  .elementor-906 > .e-con > .e-con-inner { max-width: none !important; }
  /* Legacy sections: put the 80px gutter on the SECTION and zero the container's,
     otherwise the section's own 80px + the container's 80px stack to 160px (the
     six-step process row was double-guttered at 170px). */
  .elementor-906 > .elementor-section {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
  .elementor-906 > .elementor-section > .elementor-container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* "What we do and how we do it" (b35ca9a): its two columns carry 20px (left)
     and 10px (right) of their own padding, pushing the outer content edges to
     100/90 instead of the section's 80. Zero the OUTER paddings only so content
     sits at a clean symmetric 80px; the inter-column gap is untouched. */
  .elementor-906 .elementor-element-b35ca9a > .elementor-element-2b65cf7 {
    padding-left: 0 !important;
  }
  .elementor-906 .elementor-element-b35ca9a > .elementor-element-9bf2fc0 {
    padding-right: 0 !important;
  }
}
/* Landlords full-width sections: 80px gutters (not edge-to-edge). */
@media (min-width: 1025px) {
  /* Hero (e6cfa65) + Expert Lettings (7197130) are legacy sections: put the 80px
     gutter on the SECTION and zero the container, otherwise the section's own
     padding + the container's 80px stack to ~160px (Expert Lettings was at 170). */
  .elementor-952 .elementor-element-e6cfa65,
  .elementor-952 .elementor-element-7197130 {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
  .elementor-952 .elementor-element-e6cfa65 > .elementor-container,
  .elementor-952 .elementor-element-7197130 > .elementor-container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .elementor-952 > .e-con.elementor-element-00cfe6d,
  .elementor-952 > .e-con.elementor-element-a3ff5d7,
  .elementor-952 .elementor-element-b81afc4 {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
  .elementor-952 .elementor-element-b81afc4 > .e-con-inner { max-width: none !important; }
  /* FAQ (00cfe6d): two columns carry 20px (left) / 10px (right) of their own
     padding; zero the OUTER paddings so content sits at a clean symmetric 80px. */
  .elementor-952 .elementor-element-00cfe6d > .elementor-element-0fbfcbe { padding-left: 0 !important; }
  .elementor-952 .elementor-element-00cfe6d > .elementor-element-c21e71a { padding-right: 0 !important; }
}

/* Landlords FAQ image (c21e71a): replaced the kitchen screenshot with Sam's
   seafront bay-window photo (self-hosted, resized to 1800w). */
.elementor-952 .elementor-element.elementor-element-c21e71a:not(.elementor-motion-effects-element-type-background) {
  background-image: url("/wp-content/uploads/2026/07/landlords-faq-seaview.jpg") !important;
}

/* "Follow us on social media" (14c172ff) lives in the shared footer template
   (.elementor-317), so it renders on every page. It was capped at 1280px; make it
   full-width with 80px side gutters to match the sitewide gutter standard (Oliver
   asked for it on Selling - applied at the footer level so all pages stay
   consistent, since the section is shared). */
@media (min-width: 1025px) {
  .elementor-317 .elementor-element.elementor-element-14c172ff {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
  .elementor-317 .elementor-element.elementor-element-14c172ff > .elementor-container {
    max-width: none !important;
    width: 100% !important;
  }
}


/* === "Book a Valuation" buttons: consistent purple box + white text on every page
   (some pages had a white box with purple text). === */
a.elementor-button[href*="valuations"],
.elementor-button[href*="valuations"] {
  background-color: #5D3384 !important;
}
a.elementor-button[href*="valuations"] .elementor-button-text,
a.elementor-button[href*="valuations"] .elementor-button-icon,
a.elementor-button[href*="valuations"] svg,
.elementor-button[href*="valuations"] .elementor-button-text {
  color: #ffffff !important;
  fill: #ffffff !important;
}


/* Homepage: "By The Numbers" heading matches "Start your search" exactly (36px / 500 /
   Montserrat). Was 32px. */
.elementor-891 .elementor-element.elementor-element-33a5102 .elementor-heading-title {
  font-size: 36px !important;
  font-weight: 500 !important;
  font-family: "Montserrat", sans-serif !important;
}


/* Property Search "Thinking of selling?" sidebar - "Book Free Valuation" button:
   force WHITE text on the grey button (was rendering black for some users). The outline
   "View Rentals" variant keeps its own colour. */
.rm-sidebar-cta-btn:not(.rm-sidebar-cta-btn-outline),
.rm-sidebar-cta-btn:not(.rm-sidebar-cta-btn-outline):hover,
.rm-sidebar-cta-btn:not(.rm-sidebar-cta-btn-outline):visited {
  color: #ffffff !important;
}


/* Property Search sidebar buttons ("Book Free Valuation" + "View Rentals"): match the
   header "Book a Valuation" button - uppercase, 15px / 500 / Montserrat (Oliver). */
.rm-sidebar-cta-btn {
  font-family: "Montserrat", sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* === Free Property Valuation row: grey background (#F8F8F8) so it separates from
   the white row above instead of merging (Oliver). Landlords FPV (b81afc4) is already
   grey; selling FPV (bb45a59) was white. */
.elementor-906 .elementor-element.elementor-element-bb45a59 {
  background-color: #F8F8F8 !important;
}

/* === Land & New Homes: "Meet the team" is NOT full-width (Oliver) - cap centred
   to 1280. Mirrors the sitewide width selector + the section id so it outranks the
   sitewide full-width rule. */
@media (min-width: 1025px) {
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .e-con.e-con-boxed.elementor-element-02deb2a > .e-con-inner {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .elementor-section.elementor-element-4c534a7 > .elementor-container {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* === About Us: "Meet the team" is NOT full-width (Oliver) - cap centred to 1280.
   (b7379c5 = heading/intro row, 28c81da = team cards row.) The visible "We care
   about property / we care about you" row (6ae321e) is already full-width; the
   old top duplicate (a8dcb4c) stays hidden. */
@media (min-width: 1025px) {
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .e-con.e-con-boxed.elementor-element-b7379c5 > .e-con-inner {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .elementor-section.elementor-element-28c81da > .elementor-container {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* === Contact Us: the map hero (53f81392) runs full-bleed/edge-to-edge (Oliver
   wants the map "full length"), overriding the sitewide 80px gutters for it only. */
@media (min-width: 1025px) {
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .elementor-section.elementor-element-53f81392 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* === Property Search: the results + sidebar layout (.rm-main-layout) was capped at
   1320px centred, narrower than the search bar above it. Make it full-width with
   80px side gutters to match the rest of the site (Oliver). */
@media (min-width: 1025px) {
  .rm-main-layout {
    max-width: none !important;
    width: auto !important;
    margin-left: 80px !important;
    margin-right: 80px !important;
  }
}

/* === Property Search location input: black text on a white box (brief #11).
   The filter bar forces all text white (`.rm-filter-bar * { color:#fff }`),
   so the typed text/placeholder was invisible in the light search box. Make
   the search box white with dark, readable text. */
.rm-filter-bar .rm-filter-location input {
  background: #fff !important;
  color: #002337 !important;
}
.rm-filter-bar .rm-filter-location input::placeholder {
  color: rgba(0, 35, 55, 0.5) !important;
}

/* === Material Icons not rendering (showed raw ligature text like "menu_book",
   "search_and_safety", "auto_awesome" on Careers "Why Work With Bernards"). The
   plugin's @font-face is loaded, but .material-icons font-family was being
   overridden to Montserrat, so the ::before ligatures printed as plain text. Force
   the icon font so they render as glyphs (loaded last, beats the override). */
.material-icons,
.material-icons::before {
  font-family: "Material Icons" !important;
}

/* === "Meet the team": the team cards sat ~180px below the heading (heading row's
   80px bottom + cards row's 80px top). Pull the cards up close to the heading on
   every page that has one (Oliver). Heading rows -> 0 bottom; card rows -> small top. */
@media (min-width: 1025px) {
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .e-con.elementor-element-02deb2a,
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .e-con.elementor-element-b7379c5,
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .e-con.elementor-element-1f71bcf,
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .elementor-section.elementor-element-8332f44 {
    --padding-bottom: 0px !important;
    padding-bottom: 0px !important;
  }
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .elementor-section.elementor-element-4c534a7,
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .elementor-section.elementor-element-28c81da,
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .elementor-section.elementor-element-7a62bf2,
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .elementor-section.elementor-element-24c2ce4 {
    --padding-top: 24px !important;
    padding-top: 24px !important;
  }
}

/* === Headings: match the homepage "Mortgages" heading (45px / 500 / Montserrat)
   site-wide (brief: "match all headings to same size and thickness as Mortgages").
   These section headings were stuck at 35px: Selling 6-Step (d901e9c), Landlords
   Service Options (139499a), Land New Build Consultancy (b662176) + Land Sales
   (c7216cd), About Supporting Charities (43ae01f), Mortgages "Mortgage services"
   (51cdae8). Hero/page titles and the search-matched "By The Numbers" are left. */
.elementor-element-d901e9c .elementor-heading-title,
.elementor-element-139499a .elementor-heading-title,
.elementor-element-b662176 .elementor-heading-title,
.elementor-element-c7216cd .elementor-heading-title,
.elementor-element-43ae01f .elementor-heading-title,
.elementor-element-51cdae8 .elementor-heading-title {
  font-size: 45px !important;
  font-weight: 500 !important;
  font-family: "Montserrat", sans-serif !important;
}
@media (max-width: 1024px) {
  .elementor-element-d901e9c .elementor-heading-title,
  .elementor-element-139499a .elementor-heading-title,
  .elementor-element-b662176 .elementor-heading-title,
  .elementor-element-c7216cd .elementor-heading-title,
  .elementor-element-43ae01f .elementor-heading-title,
  .elementor-element-51cdae8 .elementor-heading-title {
    font-size: 35px !important;
  }
}
@media (max-width: 767px) {
  .elementor-element-d901e9c .elementor-heading-title,
  .elementor-element-139499a .elementor-heading-title,
  .elementor-element-b662176 .elementor-heading-title,
  .elementor-element-c7216cd .elementor-heading-title,
  .elementor-element-43ae01f .elementor-heading-title,
  .elementor-element-51cdae8 .elementor-heading-title {
    font-size: 28px !important;
  }
}

/* === Land "Why work with Bernards?" (a985783): heading sat ~160px from the top
   (section 80 + an extra 80 on the heading widget 77f59bb), far wider than the
   ~40px "Our Latest Developments" card spacing above it. Tighten to match (Oliver). */
.elementor-990 .elementor-element-77f59bb .elementor-widget-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
@media (min-width: 1025px) {
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .e-con.e-con-boxed.elementor-element-a985783 {
    --padding-top: 20px !important;
    padding-top: 20px !important;
  }
}

/* === In-page "We Partner With..." section heading was 75px/500 - towering over the
   footer's own "We Partner With" (24px/300, matching the footer column headings).
   Match it to the footer so they marry up (Oliver). Land (b9cc7fc), About (fb29fc1),
   Mortgages (0e87be8). */
.elementor-element-b9cc7fc .elementor-heading-title,
.elementor-element-fb29fc1 .elementor-heading-title,
.elementor-element-0e87be8 .elementor-heading-title {
  font-size: 24px !important;
  font-weight: 300 !important;
  font-family: "Montserrat", sans-serif !important;
  line-height: 1.3 !important;
}

/* === About Us: hide the Bernards logo from the hero (brief: "Remove bernards
   logo from hero"). Widget 9c58f65 inside the About Us hero section. */
.elementor-1013 .elementor-element-9c58f65 { display: none !important; }

/* === Meet the Team: show name + role STATICALLY below the photo, kill only the
   hover fade/overlay (Oliver). The ElementsKit team widget hides the name behind
   an overlay that only fades in on hover; we want the name visible permanently
   underneath the photo, no fade. Also kill the ::before dark slide-up panel. */
body .profile-image-card,
body .profile-image-card:hover {
  background: transparent !important;
}
body .profile-image-card *,
body .profile-image-card:hover * {
  transition: none !important;
}
body .profile-image-card img,
body .profile-image-card:hover img {
  transform: none !important;
  -webkit-transform: none !important;
  scale: none !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}
/* Kill the dark ::before pseudo-element panel (and ::after for the v3 variant)
   that slides up over the photo on hover. */
body .profile-image-card::before,
body .profile-image-card::after,
body .profile-image-card:hover::before,
body .profile-image-card:hover::after,
.ekit-wid-con .profile-image-card::before,
.ekit-wid-con .profile-image-card::after,
.ekit-wid-con .profile-image-card:hover::before,
.ekit-wid-con .profile-image-card:hover::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-color: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
/* Show the .hover-area (which contains the name + role) STATICALLY below the
   photo - not absolute-positioned, not faded out, not transformed. */
body .profile-image-card .hover-area,
body .profile-image-card:hover .hover-area,
.ekit-wid-con .profile-image-card .hover-area,
.ekit-wid-con .profile-image-card:hover .hover-area {
  position: static !important;
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  background: transparent !important;
  padding: 14px 8px 4px !important;
  width: 100% !important;
  text-align: center !important;
}
body .profile-image-card .hover-area .profile-body,
body .profile-image-card:hover .hover-area .profile-body {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
/* Name + role text were white (designed for the dark overlay) - flip to dark on
   the now-light card background. */
body .profile-image-card .hover-area .profile-title,
body .profile-image-card .hover-area .profile-designation,
body .profile-image-card .hover-area .profile-content {
  color: #0B2447 !important;
}
/* Typography (font-family / size / weight) intentionally NOT set here - let the
   page's existing styles cascade so the cards match the rest of the site. */
body .profile-image-card .hover-area .profile-title { margin: 0 0 4px !important; }
body .profile-image-card .hover-area .profile-designation { margin: 0 !important; }
/* Keep the social icon footer hidden (designed for the hover overlay), but show
   .profile-content -- this is where the office + email ("brand") live. The
   handover brief item #11 + section-3 #8 require these visible. */
body .profile-image-card .hover-area .profile-footer,
body .profile-image-card .hover-area .ekit-team-social-list {
  display: none !important;
}

/* === Landlords + Selling hero image: TRUE full-bleed corner-to-edge, no margin
   (handover Section 1 #8 + #10). Hero is a 2-col row (image left, content right).
   The sitewide 80px gutter rule on legacy sections has 5 classes of specificity
   (.elementor:not(891):not(304):not(317) > .elementor-section), so we mirror that
   pattern and add the section id (6 classes) to beat it. Right column keeps an
   inner left gutter so the content text/buttons still sit ~80px from the right. */
@media (min-width: 1025px) {
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .elementor-section.elementor-element-e6cfa65,
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .elementor-section.elementor-element-241b0c2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Right content column gets an inner left gutter so its text/buttons sit ~80px
     in from the visible edge; for selling we keep the right padding as the rule
     above zeros it for the section. */
  .elementor-952 .elementor-element-e6cfa65 .elementor-element-51ba083,
  .elementor-906 .elementor-element-241b0c2 .elementor-column + .elementor-column {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}

/* ============================================================================
   SITEWIDE VERTICAL RHYTHM (2026-06-02, Oliver - re-applied correctly)
   ----------------------------------------------------------------------------
   The Elementor padding model is asymmetric between boxed and full e-cons:
     - BOXED e-con: the inner .e-con-inner inherits --padding-top, so the
       section value EFFECTIVELY DOUBLES. Setting section=40 gives ~80 visible.
     - FULL e-con + legacy `<section>`: no inner doubling - section value IS
       the visible padding. Set these to 80.
     - Stat bands stay at section 40 with explicit inner override (top-leaning)
       so the figures sit ~50 tall, top-heavy by design.
     - Homepage (elementor-891) is EXCLUDED - has its own bespoke spacing.
     - Header (304) / footer (317) excluded.
   ========================================================================= */

/* BOXED e-cons → section 40 (renders ~80 visible because inner doubles).
   Excludes home (891), header (304), footer (317), stat bands, search hero. */
body .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) .elementor-element.e-con-boxed.e-con.e-parent:not(.bernards-stats-block):not(.bernards-search-hero):not(.bernards-about-intro):not(.elementor-element-64e2078),
body .elementor-element.e-con-boxed.e-con.e-parent:not(.bernards-stats-block):not(.bernards-search-hero):not(.bernards-about-intro):not(.elementor-element-64e2078) {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  --padding-top: 20px !important;
  --padding-bottom: 20px !important;
}

/* FULL e-cons → section 40 (no inner doubling) = ~40 visible → 80 combined. */
body .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) .elementor-element.e-con-full.e-con.e-parent:not(.bernards-stats-block):not(.bernards-search-hero),
body .elementor-element.e-con-full.e-con.e-parent:not(.bernards-stats-block):not(.bernards-search-hero) {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  --padding-top: 40px !important;
  --padding-bottom: 40px !important;
}

/* Legacy <section> → 40. Excludes hero sections, stat bands, search hero. */
body .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .elementor-section.elementor-top-section:not(.bernards-stats-block):not(.bernards-search-hero):not(.elementor-element-e6cfa65):not(.elementor-element-241b0c2):not(.elementor-element-a017226):not(.elementor-element-bef6aca):not(.elementor-element-8332f44) {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* Stat bands: section 40 + inner override for top-leaning ~50 total */
body .bernards-stats-block,
body .elementor-element.elementor-element-33a5102,
body .elementor-element.elementor-element-ed37b4e {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  --padding-top: 40px !important;
  --padding-bottom: 40px !important;
}
body .bernards-stats-block > .e-con-inner,
body .elementor-element.elementor-element-33a5102 > .e-con-inner,
body .elementor-element.elementor-element-ed37b4e > .e-con-inner {
  padding-top: 10px !important;
  padding-bottom: 0 !important;
}

/* Custom bespoke sections (Bernards-named) - content rows = 80px direct
   (no inner doubling on these because they aren't e-cons). */
body .bernards-process-section,
body .bernards-mortgage-section,
body .bernards-cta-section,
body .bernards-areas,
body .bernards-fees-section {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* Landlords hero CTAs (Oliver): "Book a Rental Valuation" wraps to two lines
   making it taller than the single-line "Contact Us" button. Force both to the
   taller size for visual parity. */
.elementor-element-e6cfa65 .elementor-button.elementor-size-lg {
  min-height: 85px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Round 2 #4 - restored team-card branch/office line.
   Sits between .profile-designation (role) and .profile-content (email).
   Brand purple, matches the role size, weight 500. */
body .profile-image-card .bernards-profile-office,
body .bernards-profile-office {
  font-family: "Montserrat", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #5D3384 !important;
  margin: 6px 0 4px !important;
  line-height: 1.4 !important;
}

/* Round 2 #5 - refit team-card photos so heads aren't cropped.
   The cards use object-fit: cover with object-position: 50% 50% (centred),
   which on ~500x500 portraits rendered at 295x280 trims roughly evenly
   off top and bottom - clipping the top of the head. Push the focal point
   upward so faces sit comfortably in frame. Scoped to .profile-image-card
   images on team grids; no effect on other site images. */
body .profile-image-card img {
  object-position: 50% 20% !important;
}

/* Round 2 #8 - match Selling + Land hero CTA button heights to the
   FREE ONLINE VALUATION button (76px), using the same min-height +
   inline-flex centring approach already applied to the Landlords hero.
   Scoped to the two specific hero section IDs only; colour untouched
   (grey stays grey). */
.elementor-element-241b0c2 .elementor-button.elementor-size-lg,
.elementor-element-a017226 .elementor-button.elementor-size-lg {
  min-height: 76px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* ============================================================================
   Round 2 - hero photo runs corner-to-corner vertically between header bottom
   and the top of the next row (Oliver). Scoped to the three side-by-side
   hero sections only.
   ----------------------------------------------------------------------------
   Before: section padding-top:80 + padding-bottom:80 (from the sitewide
   rhythm rule) put 80px of white gutter above and below the photo column.
   Now: zero those section paddings so the photo fills the full vertical
   gap between header bottom and next-section top. Move the breathing room
   INSIDE the right content column's widget-wrap so the heading / intro /
   CTAs still have 80px of headroom + footroom.
   ========================================================================= */
@media (min-width: 1025px) {
  /* Mirror the parent chain of the older rule above (lines ~2356) and add
     the hero ID so this wins on specificity (7 classes vs the older 5). */
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .elementor-section.elementor-top-section.elementor-element-e6cfa65,
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .elementor-section.elementor-top-section.elementor-element-241b0c2,
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .elementor-section.elementor-top-section.elementor-element-a017226 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    --padding-top: 0 !important;
    --padding-bottom: 0 !important;
  }

  /* Land hero (a017226) horizontal full-bleed too - Landlords + Selling
     are already in the full-bleed rule earlier in this file. */
  .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .elementor-section.elementor-element-a017226 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Right (content) column inner wrap gets the 80px vertical padding so
     text + buttons don't sit at the section edges. */
  body .elementor-element-e6cfa65 .elementor-column + .elementor-column > .elementor-widget-wrap,
  body .elementor-element-241b0c2 .elementor-column + .elementor-column > .elementor-widget-wrap,
  body .elementor-element-a017226 .elementor-column + .elementor-column > .elementor-widget-wrap {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}

/* Round 2 - make nav sub-menus reveal on hover via pure CSS.
   Elementor's frontend JS isn't bundled in the static clone, so the
   sub-menu was sitting in the DOM at top:0/left:0 with no reveal trigger.
   This unblocks BOTH dropdowns: About Us → Meet The Team (round-1 #24)
   and the new Property Search → Residential / Commercial. */
.elementor-nav-menu .menu-item-has-children {
  position: relative;
}
.elementor-nav-menu .menu-item-has-children > .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid rgba(0, 35, 55, 0.08);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 35, 55, 0.08);
  list-style: none;
  margin: 0;
  padding: 8px 0;
  z-index: 999;
  display: none;
}
body .elementor-nav-menu .menu-item-has-children:hover > .sub-menu,
body .elementor-nav-menu .menu-item-has-children:focus-within > .sub-menu,
body .elementor-nav-menu .menu-item-has-children.is-hovered > .sub-menu {
  display: block !important;
}
.elementor-nav-menu .sub-menu .elementor-sub-item {
  display: block;
  padding: 8px 18px;
  color: #002337;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.elementor-nav-menu .sub-menu .elementor-sub-item:hover {
  background: #ECE6F4;
  color: #5D3384;
}
/* On the mobile/burger version (Elementor's dropdown nav), the sub-menu
   already sits inline beneath its parent - no positioning needed, just
   indent the sub-items so they read as nested. */
.elementor-nav-menu--dropdown .menu-item-has-children > .sub-menu {
  position: static;
  box-shadow: none;
  border: 0;
  background: transparent;
  padding: 0 0 0 16px;
  display: block;
}

/* Round 2 - About Us intro restructured to 2-col image-left, FULL BLEED.
   Photo column corner-to-corner, touching header bottom + next row top
   (same rule as Landlords/Selling/Land heroes). Internal padding moves
   into the content column. Same dark gradient overlay as home hero
   (linear-gradient #00233770 → #002337CC). Single column under 1024px. */
body .elementor .elementor-element.elementor-element-68b69b3.e-con-boxed.e-con.e-parent.bernards-about-intro,
body .elementor-element.elementor-element-68b69b3.e-con-boxed.e-con.e-parent.bernards-about-intro {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  --padding-top: 0 !important;
  --padding-bottom: 0 !important;
  --padding-left: 0 !important;
  --padding-right: 0 !important;
  max-width: none !important;
}
/* Inner e-con-inner gets no padding either so the grid is truly full-bleed. */
body .bernards-about-intro > .e-con-inner.bernards-about-intro-grid {
  padding: 0 !important;
  max-width: none !important;
}

.bernards-about-intro-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0 !important;
  align-items: stretch;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  /* Lock to EXACTLY 694px - matches the homepage video row at 1024 viewport. */
  min-height: 634px !important;
  height: 634px !important;
  max-height: 634px !important;
  overflow: hidden !important;
}

.bernards-about-intro-image {
  position: relative;
  /* Match the homepage hero VIDEO row at 1024 viewport (634px). */
  min-height: 634px !important;
  height: 634px !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0;
  overflow: hidden;
}

.bernards-about-intro-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,35,55,0.40) 0%, rgba(0,35,55,0.65) 100%);
  pointer-events: none;
}

.bernards-about-intro-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  text-align: left;
  /* 48px left = same LIVE photo->content gap as the Landlords / Selling heroes
     (their column padding is zeroed by a CMS override on prod, netting 48). */
  padding: 80px 80px 80px 48px;
}
/* Heading + paragraph share the same left edge: the text-editor widget shipped
   with align-self:center which indented the paragraph past the heading. Force
   every content widget full-width so text-align:left lines them all up. */
.bernards-about-intro-content > .elementor-element {
  align-self: stretch !important;
  width: auto !important;
}

/* Logo image inside the content column shouldn't be centered or oversized */
.bernards-about-intro-content .elementor-widget-image img {
  max-width: 220px;
  height: auto;
}

/* "About Us" heading + paragraph left-aligned inside the content column */
.bernards-about-intro-content .elementor-heading-title {
  text-align: left !important;
}

.bernards-about-intro-content .elementor-widget-text-editor p {
  text-align: left !important;
}

@media (max-width: 1024px) {
  .bernards-about-intro-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .bernards-about-intro-image {
    min-height: 280px;
  }
  .bernards-about-intro-content .elementor-heading-title,
  .bernards-about-intro-content .elementor-widget-text-editor p {
    text-align: center !important;
  }
  .bernards-about-intro-content {
    align-items: center;
    text-align: center;
  }
}

/* Hide the in-row Bernards logo on the new About Us 2-col intro - the
   logo already sits in the header above so showing it again here is
   redundant. Keeps heading + paragraph as the right column's content. */
.bernards-about-intro-content .elementor-element-9c58f65 {
  display: none !important;
}

/* Home "I want to..." → SELL/LET/BUY/RENT button row (64e2078).
   The sitewide boxed e-con rule gives it 40/40 padding which together
   with the inner doubling reads as ~80 above + 80 below the buttons -
   pushing the buttons miles away from the "I want to..." heading above
   and the Google badge below. Tighten so the row sits compact between
   them (Oliver). */
body .elementor .elementor-element.elementor-element-64e2078.e-con-boxed.e-con.e-parent,
body .elementor-element.elementor-element-64e2078.e-con-boxed.e-con.e-parent {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  --padding-top: 0 !important;
  --padding-bottom: 0 !important;
}

/* === MTT hero (8332f44) - make the team photo full-bleed.
   The original WP markup put the photo as a background image on the left
   column (214526c) inside a section with 100px right padding, leaving a
   grey gutter above, below and between the photo + right column. Same
   treatment as the Landlords/Selling/Land heroes: zero the section's
   padding, let the photo column fill the full vertical between header
   and next row, move the breathing room into the right content column. */
@media (min-width: 768px) {
  body .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) > .elementor-section.elementor-element-8332f44 {
    padding: 0 !important;
  }
  body .elementor-section.elementor-top-section.elementor-element-8332f44 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
    /* Match the homepage hero VIDEO row at 1024 viewport (634px). */
    min-height: 634px !important;
  }
  body .elementor-element-8332f44 > .elementor-container {
    min-height: 634px !important;
  }
  /* Photo column wrap full-height, no inset */
  body .elementor-element-8332f44 > .elementor-container > .elementor-column.elementor-element-214526c > .elementor-widget-wrap {
    padding: 0 !important;
  }
  /* Superseded 2026-07-24: this column now holds the full-bleed team-photo hero,
     so the old inset (80px vertical + 117px left, for the abandoned 2-col text
     layout) is zeroed. Heading + intro get their own spacing below the photo. */
  body .elementor-element-8332f44 > .elementor-container > .elementor-column.elementor-element-a081083 > .elementor-widget-wrap {
    padding: 0 !important;
    margin-left: 0 !important;
  }
}

/* === Land & New Homes hero (a017226) - same treatment as MTT.
   Photo column already full-bleed via post-990.css (zero padding); the
   only thing missing is a min-height to match Landlords / Selling so
   the hero photo doesn't render short when the right-column copy is
   shorter than the others. (Oliver) */
@media (min-width: 768px) {
  body .elementor-section.elementor-top-section.elementor-element-a017226 {
    min-height: 634px !important;
  }
  body .elementor-element-a017226 > .elementor-container {
    min-height: 634px !important;
  }
}

/* About Us intro right column - match Landlords / Selling / Land hero
   typography (Oliver). Heading 73/80 weight 500, paragraph 18/24 weight 300.
   Scoped to .bernards-about-intro-content only. */
body .bernards-about-intro-content .elementor-heading-title {
  font-size: 73px !important;
  line-height: 80px !important;
  font-weight: 500 !important;
  font-family: "Montserrat", sans-serif !important;
}

body .bernards-about-intro-content .elementor-widget-text-editor,
body .bernards-about-intro-content .elementor-widget-text-editor p,
body .bernards-about-intro-content .elementor-widget-text-editor article {
  font-size: 18px !important;
  line-height: 1.4 !important;
  font-weight: 300 !important;
  font-family: "Montserrat", sans-serif !important;
}

@media (max-width: 1024px) {
  body .bernards-about-intro-content .elementor-heading-title {
    font-size: 48px !important;
    line-height: 54px !important;
  }
}

/* ============================================================
   BERNARDS REVIEWS CAROUSEL (home page, replaces the static
   single-testimonial widget). Single card with prev/next arrows,
   smooth fade transition, auto-advance every 7.5s, pause on hover.
   Match the mortgage calculator aesthetic: soft gradient white
   card, branded purple accents, pill-shaped chrome.
   ============================================================ */
.brv-carousel {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-family: "Montserrat", sans-serif !important;
}

.brv-card-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.brv-card {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #fff 0%, #FBF9FD 100%);
  border: 1px solid rgba(93, 51, 132, 0.10);
  border-radius: 18px;
  box-shadow: 0 6px 28px rgba(0, 35, 55, 0.06), 0 1px 2px rgba(0, 35, 55, 0.04);
  padding: 44px 48px 36px;
  overflow: hidden;
  text-align: left;
}

.brv-card::after {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 230, 244, 0.55) 0%, rgba(236, 230, 244, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.brv-quote-mark {
  position: absolute;
  top: -10px;
  left: 26px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 140px;
  line-height: 1;
  color: rgba(93, 51, 132, 0.10);
  pointer-events: none;
  z-index: 0;
}

.brv-stars {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #F5B400;
  margin-bottom: 18px;
}

.brv-text {
  position: relative;
  z-index: 1;
  font-family: "Montserrat", sans-serif !important;
  font-size: 17px;
  line-height: 1.55;
  color: #002337;
  font-weight: 400;
  margin: 0 0 22px 0;
  letter-spacing: -0.005em;
  /* Lock card height so it doesn't jump when reviews change.
     8 lines × 1.55 line-height × 17px ≈ 210px. */
  min-height: 168px;
}

.brv-name {
  position: relative;
  z-index: 1;
  font-family: "Montserrat", sans-serif !important;
  font-size: 14px;
  font-weight: 700;
  color: #5D3384;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Smooth fade-in transitions per direction */
.brv-fade-from-right {
  animation: brv-slide-right 0.45s ease-out both;
}
.brv-fade-from-left {
  animation: brv-slide-left 0.45s ease-out both;
}
@keyframes brv-slide-right {
  0%   { opacity: 0; transform: translateX(18px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes brv-slide-left {
  0%   { opacity: 0; transform: translateX(-18px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Arrow buttons - solid Bernards purple at rest with white chevron.
   Sitewide rule: coloured (purple) button → white icon. */
.brv-arrow {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: #5D3384;
  color: #fff !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(93, 51, 132, 0.28);
}
.brv-arrow-prev { left: 0; }
.brv-arrow-next { right: 0; }
.brv-arrow:hover {
  background: #4a2a6b;
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 6px 18px rgba(93, 51, 132, 0.42);
}
.brv-arrow:active { transform: translateY(-50%) scale(0.96); }
.brv-arrow svg { display: block; }
.brv-arrow svg path { fill: #fff !important; }

/* Counter - hidden per Oliver. Keeps the JS hook so we can flip it back
   on for debugging if needed. */
.brv-counter { display: none !important; }

/* "See more Google Reviews" CTA below the carousel - brand purple,
   uppercase, Montserrat to match the site buttons. Left-aligned to the
   carousel card's left edge (same max-width + side padding as the carousel). */
.brv-more-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 720px;
  margin: 22px auto 0;
  padding: 0 64px;
  box-sizing: border-box;
}
.brv-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: #5D3384;
  color: #fff !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.brv-more:hover {
  background: #4a2869;
  transform: translateY(-1px);
}
.brv-more svg path { fill: #fff; }

@media (max-width: 720px) {
  .brv-carousel { padding: 0 56px; max-width: 100%; }
  .brv-more-wrap { margin-top: 16px; padding: 0 56px; }
  .brv-card { padding: 32px 28px 28px; border-radius: 14px; }
  .brv-quote-mark { font-size: 100px; left: 14px; top: -4px; }
  .brv-text { font-size: 15px; min-height: 220px; }
  .brv-arrow { width: 42px; height: 42px; }
}

/* Land & New Homes - tighten the gap between the "Meet the team" title and the
   team photos (brief #5). The section keeps the sitewide 80px row rhythm padding;
   a negative top margin simply pulls the whole grid up, dropping the ~180px gap
   to ~60px without fighting the cascade or touching the sitewide rule. Desktop
   only so the stacked mobile layout is left as-is. */
@media (min-width: 1025px) {
  .elementor-element.elementor-element-4c534a7 {
    margin-top: -120px !important;
  }
}

/* Mortgages section (Selling page) - brief #4.
   The photo column was capped at 238px while the copy column is taller, so
   the image floated high and the CONTACT US button hung low. Stretch the
   image to the full row height so it's centralised to the row, and lift the
   button by trimming the copy column's bottom padding. */
.elementor-906 .elementor-element-a0bc86a {
  align-self: stretch !important;
}
.elementor-906 .elementor-element-75a202b {
  justify-content: center !important;
}

/* ============================================================
   Latest News page - clean modern blog index.
   Hero matches the homepage panorama feel: full-bleed photo with
   a soft purple→teal overlay and crisp white title centred.
   Grid below is 3 columns of news cards with hover lift.
   ============================================================ */
.bnews-hero {
  position: relative;
  width: 100%;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* neutral scrim only - no purple hue over the photo (Oliver 2026-07-13) */
  background-image:
    linear-gradient(rgba(12, 16, 22, 0.46), rgba(12, 16, 22, 0.46)),
    url('/wp-content/uploads/2026/07/news-header.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  padding: 80px 24px;
  margin: 0;
}
.bnews-hero-inner {
  position: relative;
  max-width: 760px;
  z-index: 1;
}
.bnews-hero-title {
  font-family: "Montserrat", sans-serif !important;
  font-size: 64px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #fff !important;
  margin: 0 0 18px;
}
.bnews-hero-sub {
  font-family: "Montserrat", sans-serif !important;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}

.bnews-grid-section {
  background: #fafafa;
  padding: 80px 24px;
}
.bnews-grid-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.bnews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.bnews-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(0, 35, 55, 0.08);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  box-shadow: 0 2px 8px rgba(0, 35, 55, 0.04);
}
.bnews-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 35, 55, 0.10);
  border-color: rgba(93, 51, 132, 0.18);
}
/* Uniform 16:10 tile; the full image is always visible (contained),
   with a soft blurred copy of itself filling any letterbox space.
   No colour overlays (Oliver 2026-07-13). */
.bnews-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  overflow: hidden;
  background-color: #f0eef3;
  background-size: 0 0;
  background-repeat: no-repeat;
}
.bnews-card-image::before {
  content: "";
  position: absolute;
  inset: -24px;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(20px);
  opacity: 0.5;
}
.bnews-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.bnews-card-body {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.bnews-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Montserrat", sans-serif !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.bnews-card-tag {
  color: #5D3384;
  text-transform: uppercase;
}
.bnews-card-date {
  color: rgba(0, 35, 55, 0.5);
  text-transform: uppercase;
}
.bnews-card-title {
  font-family: "Montserrat", sans-serif !important;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: #002337;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.bnews-card-blurb {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bnews-card-blurb {
  font-family: "Montserrat", sans-serif !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(0, 35, 55, 0.72);
  margin: 0;
  flex: 1;
}
.bnews-card-cta {
  font-family: "Montserrat", sans-serif !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #5D3384;
  text-transform: uppercase;
  margin-top: 4px;
}

.bnews-grid-note {
  text-align: center;
  font-family: "Montserrat", sans-serif !important;
  font-size: 13px;
  color: rgba(0, 35, 55, 0.55);
  margin: 56px 0 0;
}

@media (max-width: 1024px) {
  .bnews-grid { grid-template-columns: repeat(2, 1fr); }
  .bnews-hero-title { font-size: 48px; }
}
@media (max-width: 640px) {
  .bnews-grid { grid-template-columns: 1fr; }
  .bnews-hero { min-height: 360px; padding: 60px 20px; }
  .bnews-hero-title { font-size: 36px; }
}

/* ============================================================
   Sitewide hero size - clamp every page's hero section to
   ~580px so they all read at the same scale as the homepage.
   Selling / Landlords / Contact Us / Careers / Mortgages /
   Valuations were previously taller (content-driven 700-890px);
   force them down to match. About Us, MTT, Land & New Homes
   already capped to 580 via their own rules above.
   ============================================================ */
@media (min-width: 768px) {
  /* Lock to EXACTLY 694px so every hero matches the homepage video row
     identically. Content centres inside via the existing align-items.
     overflow: hidden trims rare narrow-viewport overflow rather than
     letting content push the row taller. */
  body .elementor-section.elementor-top-section.elementor-element-241b0c2,
  body .elementor-section.elementor-top-section.elementor-element-e6cfa65,
  body .elementor-section.elementor-top-section.elementor-element-d8fef58,
  body .elementor-section.elementor-top-section.elementor-element-18b6422,
  body .elementor-section.elementor-top-section.elementor-element-194e85b0 {
    min-height: 634px !important;
    height: 634px !important;
    max-height: 634px !important;
    overflow: hidden !important;
  }
  body .elementor-element-241b0c2 > .elementor-container,
  body .elementor-element-e6cfa65 > .elementor-container,
  body .elementor-element-d8fef58 > .elementor-container,
  body .elementor-element-18b6422 > .elementor-container,
  body .elementor-element-194e85b0 > .elementor-container {
    min-height: 634px !important;
    height: 634px !important;
  }
  /* Reduce inner column padding so the title fits within 694px even at
     1500px viewport (Selling's "Best Price From The Right Buyer" wraps
     to 3 lines here, +paragraph +buttons). */
  body .elementor-element-241b0c2 .elementor-column > .elementor-widget-wrap,
  body .elementor-element-e6cfa65 .elementor-column > .elementor-widget-wrap,
  body .elementor-element-d8fef58 .elementor-column > .elementor-widget-wrap,
  body .elementor-element-18b6422 .elementor-column > .elementor-widget-wrap,
  body .elementor-element-194e85b0 .elementor-column > .elementor-widget-wrap {
    padding-top: 3em !important;
    padding-bottom: 3em !important;
  }
}

/* ============================================================================
   Spacing pass (Oliver, Jun 2026) - vertical centring of hero content columns.
   The image column is full-height; the text column's widget-wrap packed its
   wrapped widget rows to the top, leaving a dead band of whitespace at the
   bottom next to the photo. Centre the rows so heading / intro / CTAs sit
   balanced against the image. Scoped to the column-based heroes, desktop only
   (mobile is single-column and flows top-to-bottom). About Us hero 68b69b3 is
   a newer e-con and already justify-content:center, so it's left alone.
   ========================================================================= */
@media (min-width: 1025px) {
  body .elementor-element-e6cfa65 .elementor-column + .elementor-column > .elementor-widget-wrap,
  body .elementor-element-241b0c2 .elementor-column + .elementor-column > .elementor-widget-wrap,
  body .elementor-element-a017226 .elementor-column + .elementor-column > .elementor-widget-wrap,
  body .elementor-element-8332f44 .elementor-column + .elementor-column > .elementor-widget-wrap {
    align-content: center !important;
  }
}

/* ============================================================================
   Spacing pass (Oliver, Jun 2026) - unify footer spacing across pages.
   The shared footer rows measured DIFFERENT vertical padding per page (columns
   block bottom 0 vs 36; company-number row 0 vs 40; plus stray margins on
   Selling), so the footer didn't read as identical sitewide. Force one set of
   symmetric values on every page. Desktop only (the measured drift is desktop).
   ========================================================================= */
@media (min-width: 1025px) {
  /* Footer columns block (logo / Property / Company / Contact / Partners) */
  body .elementor-element-3f77a898 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  /* Company-number / registered-office row */
  body .elementor-element-15ac6c2 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  /* Purple copyright bar - neutralise Selling's stray top margin */
  body .elementor-element-7dc0347e {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Revert: "What We Do And How We Do It" (selling b35ca9a) back to 80/80. The
   40px sitewide rhythm squashed this image+text row and cropped the team photo's
   heads (Oliver). High-specificity to beat the sitewide rhythm rule above. */
@media (min-width: 1025px) {
  body .elementor:not(.elementor-891):not(.elementor-304):not(.elementor-317) .elementor-element.e-con-full.e-con.e-parent.elementor-element-b35ca9a:not(.bernards-stats-block):not(.bernards-search-hero) {
    --padding-top: 80px !important;
    --padding-bottom: 80px !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}

/* Full Management (-feature) standing purple fill REMOVED (Oliver 2026-07-13):
   it now matches Tenant Find / Rent Collection and shares the same
   purple-on-hover effect defined with the base .bernards-fee-card rules. */

/* Property-search filter bar: selects clipped their labels ("All Propert",
   "Within 10 r", "Property Ty") because min-width:0 let them shrink below their
   text. Let each size to its content; trim the arrow padding + location width to
   claw back room so the single row still fits (Oliver). Desktop only. */
@media (min-width: 1025px) {
  .rm-filter-select { min-width: max-content !important; padding-right: 26px !important; }
  .rm-filter-location { flex: 0 0 200px !important; }
}

/* Contact "Bernards Areas We Love" intro (4aa5c76): give it comfortable
   top/bottom breathing room (was crammed). NOTE: only wins once the leftover
   CMS padding overrides on 4aa5c76 are cleared in /admin/overrides (inline
   !important from the overlay otherwise beats this). */
@media (min-width: 1025px) {
  body .elementor-element.elementor-element-4aa5c76 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* ============================================================================
   MOBILE NAV (burger) - make the menu open/close work. Elementor's toggle is a
   <div> that needs its frontend JS (not bundled in this static clone), so the
   burger did nothing and had no visible close. A small inline script in
   StaticPageRenderer flips aria-expanded (toggle) + aria-hidden (dropdown);
   this CSS drives the panel + icon off those aria states. Mobile only (<=767px)
   so desktop is completely untouched. (Oliver, Jun 2026) */
@media (max-width: 767px) {
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container { display: none !important; }
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"] {
    display: block !important;
    position: fixed; top: 92px; left: 0; right: 0;
    background: #ffffff; z-index: 99999;
    box-shadow: 0 12px 30px rgba(0,0,0,0.16);
    max-height: calc(100vh - 92px) !important; overflow-y: auto !important;
    padding: 6px 0; border-top: 1px solid rgba(0,0,0,0.06);
    transform: none !important; opacity: 1 !important; visibility: visible !important;
  }
  /* burger icon swaps to an X when open */
  .elementor-menu-toggle__icon--close { display: none; }
  .elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--open { display: none !important; }
  .elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--close { display: inline-block !important; }
  /* full-width tappable rows */
  nav.elementor-nav-menu--dropdown .elementor-item,
  nav.elementor-nav-menu--dropdown .elementor-sub-item { display: block; padding: 13px 24px; font-size: 16px; }
  nav.elementor-nav-menu--dropdown .sub-menu .elementor-sub-item { padding-left: 40px; }
}

/* Mobile burger menu: Elementor pins the dropdown items to height:0 (collapse
   animation it normally drives via JS). Force them open when the menu is. */
@media (max-width: 767px) {
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"] .elementor-nav-menu,
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"] .elementor-nav-menu li,
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"] .elementor-item,
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"] .elementor-sub-item,
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"] .sub-menu {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    display: block !important;
  }
}


/* =====================================================================
   MOBILE OPTIMISATION PASS — 2026-06-26 (Oliver / Cold Lava)
   APPEND-ONLY. EVERY rule below is scoped to max-width:1024px or tighter.
   Desktop (>=1025px) is NEVER targeted and cannot be affected by anything
   in this block. Verified desktop-invariant (computed-style + pixel) at
   1440 & 1920 via handover/scripts/desktop-lock.mjs against the live site.
   To revert the whole pass: delete from this banner to end of file.
   ===================================================================== */

/* --- T1.1  About Us: intro paragraph hidden on mobile --------------------
   .bernards-about-intro-grid is locked to the desktop hero height (634px)
   with overflow:hidden. The existing <=1024 rule stacks it to one column but
   never unlocks that height, so the stacked "About Us" heading + paragraph
   are clipped away entirely. Unlock the height; shrink the photo so the
   text shows beneath it. */
@media (max-width: 1024px) {
  body .bernards-about-intro-grid {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  body .bernards-about-intro-image {
    height: 280px !important;
    min-height: 280px !important;
  }
  body .bernards-about-intro-content {
    padding: 32px 24px !important;
  }
}

/* --- T1.2  Meet The Team: the stale CMS override (margin-left:-69px on the
   a081083 column) was deleted from style_overrides on 2026-07-24, along with
   the section's margin-bottom:80px and 24c2ce4's padding-top:0px overrides -
   all leftovers from the abandoned 2-column hero. No transform compensation is
   needed now; the column sits naturally and the full-bleed hero is flush. --- */

/* --- T1.3  Contact: map causes ~61px horizontal page scroll --------------
   Stray zero-width map nodes land past the right edge and leaflet's own
   overflow:hidden doesn't contain the document scroll width. Clip horizontal
   overflow on the contact page root ONLY (.elementor-940 = contact post id).
   overflow-x:clip does not create a scroll container, so sticky/positioned
   elements are unaffected. */
@media (max-width: 1024px) {
  .elementor-940 {
    overflow-x: clip !important;
  }
}

/* --- T1.4  Contact: six office cards crammed into 3 columns --------------
   The office rows (all share class elementor-element-704f6bb) stay 3-up at
   phone width, so names + phone/email collide and clip. The child --width:33%
   is hard to beat per-column, so flip each row to a vertical column on phones
   — cards then stack full-width one-per-row. */
@media (max-width: 600px) {
  body .elementor-940 .elementor-element-704f6bb {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
  }
  body .elementor-940 .elementor-element-704f6bb > .e-con {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --- T2.1  Primary CTAs: grey (#818181) -> brand purple (#5D3384), MOBILE
   ONLY. The same CTA is purple on Home but grey on service pages, and grey-
   on-white fails the contrast bar. Targets ONLY the 60 buttons that
   Elementor paints grey (extracted from post-*.css); outline/ghost buttons
   are untouched. Desktop keeps its current colours (locked). */
@media (max-width: 1024px) {
  .elementor-element-000982b .elementor-button,
  .elementor-element-0407f38 .elementor-button,
  .elementor-element-0f29106 .elementor-button,
  .elementor-element-0f2bb9e .elementor-button,
  .elementor-element-10ac7a6 .elementor-button,
  .elementor-element-179cf80 .elementor-button,
  .elementor-element-1dc14ea .elementor-button,
  .elementor-element-234db5b .elementor-button,
  .elementor-element-24a743f .elementor-button,
  .elementor-element-25c13cb1 .elementor-button,
  .elementor-element-32fe1d51 .elementor-button,
  .elementor-element-34616b58 .elementor-button,
  .elementor-element-352edfc .elementor-button,
  .elementor-element-35f99ff .elementor-button,
  .elementor-element-42b4b67 .elementor-button,
  .elementor-element-4573399 .elementor-button,
  .elementor-element-47f4d803 .elementor-button,
  .elementor-element-4dcdbd1 .elementor-button,
  .elementor-element-4fb54ba .elementor-button,
  .elementor-element-4fcafce .elementor-button,
  .elementor-element-51934db .elementor-button,
  .elementor-element-5a90f81 .elementor-button,
  .elementor-element-5f7cc3fe .elementor-button,
  .elementor-element-5f8f12d .elementor-button,
  .elementor-element-6203f1a .elementor-button,
  .elementor-element-67d29bd .elementor-button,
  .elementor-element-696c569 .elementor-button,
  .elementor-element-70cfa4c .elementor-button,
  .elementor-element-71261c8 .elementor-button,
  .elementor-element-75ca05e7 .elementor-button,
  .elementor-element-7ab74efa .elementor-button,
  .elementor-element-7dcb179 .elementor-button,
  .elementor-element-7fae469 .elementor-button,
  .elementor-element-82eb0c4 .elementor-button,
  .elementor-element-855f9fc .elementor-button,
  .elementor-element-8591aff .elementor-button,
  .elementor-element-869e854 .elementor-button,
  .elementor-element-8842038 .elementor-button,
  .elementor-element-9058509 .elementor-button,
  .elementor-element-943b5bb .elementor-button,
  .elementor-element-a5cea7d .elementor-button,
  .elementor-element-aaaea4f .elementor-button,
  .elementor-element-b4f145c .elementor-button,
  .elementor-element-b934b1b .elementor-button,
  .elementor-element-babcba5 .elementor-button,
  .elementor-element-bb1d4ac .elementor-button,
  .elementor-element-c59bc9b .elementor-button,
  .elementor-element-c6f8c0c .elementor-button,
  .elementor-element-cdb12a2 .elementor-button,
  .elementor-element-cf25673 .elementor-button,
  .elementor-element-d02ac82 .elementor-button,
  .elementor-element-d2ea43a .elementor-button,
  .elementor-element-dbb7b27 .elementor-button,
  .elementor-element-e15bf42 .elementor-button,
  .elementor-element-ec6b8c2 .elementor-button,
  .elementor-element-ef95829 .elementor-button,
  .elementor-element-f0723a0 .elementor-button,
  .elementor-element-f177308 .elementor-button,
  .elementor-element-f264588 .elementor-button,
  .elementor-element-fbf5cea .elementor-button {
    background-color: #5D3384 !important;
    border-color: #5D3384 !important;
    color: #ffffff !important;
  }
  .elementor-element-000982b .elementor-button:hover,
  .elementor-element-000982b .elementor-button:focus,
  .elementor-element-0407f38 .elementor-button:hover,
  .elementor-element-0407f38 .elementor-button:focus,
  .elementor-element-0f29106 .elementor-button:hover,
  .elementor-element-0f29106 .elementor-button:focus,
  .elementor-element-0f2bb9e .elementor-button:hover,
  .elementor-element-0f2bb9e .elementor-button:focus,
  .elementor-element-10ac7a6 .elementor-button:hover,
  .elementor-element-10ac7a6 .elementor-button:focus,
  .elementor-element-179cf80 .elementor-button:hover,
  .elementor-element-179cf80 .elementor-button:focus,
  .elementor-element-1dc14ea .elementor-button:hover,
  .elementor-element-1dc14ea .elementor-button:focus,
  .elementor-element-234db5b .elementor-button:hover,
  .elementor-element-234db5b .elementor-button:focus,
  .elementor-element-24a743f .elementor-button:hover,
  .elementor-element-24a743f .elementor-button:focus,
  .elementor-element-25c13cb1 .elementor-button:hover,
  .elementor-element-25c13cb1 .elementor-button:focus,
  .elementor-element-32fe1d51 .elementor-button:hover,
  .elementor-element-32fe1d51 .elementor-button:focus,
  .elementor-element-34616b58 .elementor-button:hover,
  .elementor-element-34616b58 .elementor-button:focus,
  .elementor-element-352edfc .elementor-button:hover,
  .elementor-element-352edfc .elementor-button:focus,
  .elementor-element-35f99ff .elementor-button:hover,
  .elementor-element-35f99ff .elementor-button:focus,
  .elementor-element-42b4b67 .elementor-button:hover,
  .elementor-element-42b4b67 .elementor-button:focus,
  .elementor-element-4573399 .elementor-button:hover,
  .elementor-element-4573399 .elementor-button:focus,
  .elementor-element-47f4d803 .elementor-button:hover,
  .elementor-element-47f4d803 .elementor-button:focus,
  .elementor-element-4dcdbd1 .elementor-button:hover,
  .elementor-element-4dcdbd1 .elementor-button:focus,
  .elementor-element-4fb54ba .elementor-button:hover,
  .elementor-element-4fb54ba .elementor-button:focus,
  .elementor-element-4fcafce .elementor-button:hover,
  .elementor-element-4fcafce .elementor-button:focus,
  .elementor-element-51934db .elementor-button:hover,
  .elementor-element-51934db .elementor-button:focus,
  .elementor-element-5a90f81 .elementor-button:hover,
  .elementor-element-5a90f81 .elementor-button:focus,
  .elementor-element-5f7cc3fe .elementor-button:hover,
  .elementor-element-5f7cc3fe .elementor-button:focus,
  .elementor-element-5f8f12d .elementor-button:hover,
  .elementor-element-5f8f12d .elementor-button:focus,
  .elementor-element-6203f1a .elementor-button:hover,
  .elementor-element-6203f1a .elementor-button:focus,
  .elementor-element-67d29bd .elementor-button:hover,
  .elementor-element-67d29bd .elementor-button:focus,
  .elementor-element-696c569 .elementor-button:hover,
  .elementor-element-696c569 .elementor-button:focus,
  .elementor-element-70cfa4c .elementor-button:hover,
  .elementor-element-70cfa4c .elementor-button:focus,
  .elementor-element-71261c8 .elementor-button:hover,
  .elementor-element-71261c8 .elementor-button:focus,
  .elementor-element-75ca05e7 .elementor-button:hover,
  .elementor-element-75ca05e7 .elementor-button:focus,
  .elementor-element-7ab74efa .elementor-button:hover,
  .elementor-element-7ab74efa .elementor-button:focus,
  .elementor-element-7dcb179 .elementor-button:hover,
  .elementor-element-7dcb179 .elementor-button:focus,
  .elementor-element-7fae469 .elementor-button:hover,
  .elementor-element-7fae469 .elementor-button:focus,
  .elementor-element-82eb0c4 .elementor-button:hover,
  .elementor-element-82eb0c4 .elementor-button:focus,
  .elementor-element-855f9fc .elementor-button:hover,
  .elementor-element-855f9fc .elementor-button:focus,
  .elementor-element-8591aff .elementor-button:hover,
  .elementor-element-8591aff .elementor-button:focus,
  .elementor-element-869e854 .elementor-button:hover,
  .elementor-element-869e854 .elementor-button:focus,
  .elementor-element-8842038 .elementor-button:hover,
  .elementor-element-8842038 .elementor-button:focus,
  .elementor-element-9058509 .elementor-button:hover,
  .elementor-element-9058509 .elementor-button:focus,
  .elementor-element-943b5bb .elementor-button:hover,
  .elementor-element-943b5bb .elementor-button:focus,
  .elementor-element-a5cea7d .elementor-button:hover,
  .elementor-element-a5cea7d .elementor-button:focus,
  .elementor-element-aaaea4f .elementor-button:hover,
  .elementor-element-aaaea4f .elementor-button:focus,
  .elementor-element-b4f145c .elementor-button:hover,
  .elementor-element-b4f145c .elementor-button:focus,
  .elementor-element-b934b1b .elementor-button:hover,
  .elementor-element-b934b1b .elementor-button:focus,
  .elementor-element-babcba5 .elementor-button:hover,
  .elementor-element-babcba5 .elementor-button:focus,
  .elementor-element-bb1d4ac .elementor-button:hover,
  .elementor-element-bb1d4ac .elementor-button:focus,
  .elementor-element-c59bc9b .elementor-button:hover,
  .elementor-element-c59bc9b .elementor-button:focus,
  .elementor-element-c6f8c0c .elementor-button:hover,
  .elementor-element-c6f8c0c .elementor-button:focus,
  .elementor-element-cdb12a2 .elementor-button:hover,
  .elementor-element-cdb12a2 .elementor-button:focus,
  .elementor-element-cf25673 .elementor-button:hover,
  .elementor-element-cf25673 .elementor-button:focus,
  .elementor-element-d02ac82 .elementor-button:hover,
  .elementor-element-d02ac82 .elementor-button:focus,
  .elementor-element-d2ea43a .elementor-button:hover,
  .elementor-element-d2ea43a .elementor-button:focus,
  .elementor-element-dbb7b27 .elementor-button:hover,
  .elementor-element-dbb7b27 .elementor-button:focus,
  .elementor-element-e15bf42 .elementor-button:hover,
  .elementor-element-e15bf42 .elementor-button:focus,
  .elementor-element-ec6b8c2 .elementor-button:hover,
  .elementor-element-ec6b8c2 .elementor-button:focus,
  .elementor-element-ef95829 .elementor-button:hover,
  .elementor-element-ef95829 .elementor-button:focus,
  .elementor-element-f0723a0 .elementor-button:hover,
  .elementor-element-f0723a0 .elementor-button:focus,
  .elementor-element-f177308 .elementor-button:hover,
  .elementor-element-f177308 .elementor-button:focus,
  .elementor-element-f264588 .elementor-button:hover,
  .elementor-element-f264588 .elementor-button:focus,
  .elementor-element-fbf5cea .elementor-button:hover,
  .elementor-element-fbf5cea .elementor-button:focus {
    background-color: #4a2869 !important;
    border-color: #4a2869 !important;
    color: #ffffff !important;
  }
}

/* --- T2.2  Map zoom controls below comfortable tap size ------------------*/
@media (max-width: 1024px) {
  .leaflet-control-zoom a {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 22px !important;
  }
}

/* --- T3.1  Home "By The Numbers" stats — align icons + text (Oliver) -------
   The 6 stat icon-boxes (section 83e7e75) use justify-content:center, so each
   row centres on its own content width — icons and numbers land at different
   x-positions per box (ragged). On phones/tablets, switch to a fixed icon
   column + left-aligned text so all icons line up and all numbers line up,
   with a normalised icon size across the mixed icon-fonts + SVGs. Desktop
   (>=1025px) keeps JJ's centred design untouched. */
@media (max-width: 1024px) {
  body .elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon-box-wrapper {
    justify-content: flex-start !important;
    gap: 22px !important;
    padding-left: 30px !important;
    padding-right: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body .elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon-box-icon {
    margin-right: 0 !important;
    width: 60px !important;
    min-width: 60px !important;
    flex: 0 0 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body .elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon {
    font-size: 50px !important;
    line-height: 1 !important;
  }
  body .elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon-box-icon svg,
  body .elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon-box-icon img {
    width: 50px !important;
    height: 50px !important;
  }
  body .elementor-element-83e7e75 .elementor-widget-icon-box .elementor-icon-box-content {
    flex: 1 1 auto !important;
    width: auto !important;
    text-align: left !important;
  }
}

/* === Selling FPV row: alignment + top gap (Oliver 2026-07-13) === */
/* Gap above the row was ~110px vs ~50px below it - bring the top down to match
   by trimming the previous section's bottom padding (80 -> 20; +20 margin +10
   inner pad = 50 visible). */
.elementor-906 .elementor-element.elementor-element-6ab3441 {
  --padding-bottom: 20px !important;
  padding-bottom: 20px !important;
}
/* Left title started at 90px while every section above sits at 80px - drop the
   column's inner left padding. Right column's text sat at 788px vs 769px for the
   Mortgages column above - narrow the left column so the right one lines up.
   Desktop only; columns stack below 1025px. */
@media (min-width: 1025px) {
  .elementor-906 .elementor-element.elementor-element-cf96c2c {
    padding-left: 0 !important;
    /* 53.05% of the 1280px content box = 679px -> right column text lands
       at 769px, level with the Mortgages column above. flex-shrink 0 stops
       the flex row redistributing the width. */
    width: 53.05% !important;
    flex-shrink: 0 !important;
  }
}

/* === Landlords lettings-team carousel (Oliver 2026-07-13) ===
   Replaces the 4 static director cards. Native horizontal scroll +
   snap (swipe works on touch), purple arrows, auto-advance via the
   inline script next to the markup. */
.bn-team-carousel {
  position: relative;
  width: 100%;
  max-width: 1280px;
  min-width: 0;
  margin: 0 auto;
}
.bn-team-track { min-width: 0; }
.bn-team-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px 18px;
}
.bn-team-track::-webkit-scrollbar { display: none; }
.bn-team-card {
  flex: 0 0 calc((100% - 60px) / 4);
  scroll-snap-align: start;
  background: #ffffff;
  border: 1px solid #ece6f5;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none !important;
  box-shadow: 0 4px 18px rgba(20, 12, 40, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bn-team-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 26px rgba(20, 12, 40, 0.12);
}
.bn-team-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.bn-team-card-body { padding: 14px 16px 16px; }
.bn-team-card-name {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #0B2447;
  margin: 0 0 2px;
}
.bn-team-card-role {
  font-family: "Montserrat", sans-serif;
  font-size: 0.8125rem;
  color: #6b6b76;
  margin: 0;
  min-height: 1.2em;
}
.bn-team-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: #5D3384;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: background 0.15s ease;
}
.bn-team-arrow:hover { background: #45266b; }
.bn-team-arrow--prev { left: -14px; }
.bn-team-arrow--next { right: -14px; }
@media (max-width: 1024px) {
  .bn-team-card { flex-basis: calc((100% - 40px) / 3); }
}
@media (max-width: 767px) {
  .bn-team-card { flex-basis: calc((100% - 20px) / 2); }
  .bn-team-arrow { display: none; }
}

/* === Handleys Corner brochure: self-hosted page-turner (Oliver 2026-07-13) ===
   No third-party chrome; overlaid arrows are the ONLY control. The wrap keeps
   the full-spread footprint; the book box animates between cover width (closed,
   centred, no blank half) and full spread (open). Leaf turns on a keyframed
   arc with shading for a softer, more physical page turn. Pages 1272x1800. */
.bn-flipbook-wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  aspect-ratio: 2544 / 1800;
}
/* the wrapping e-con must size to the book, not clamp at 80px */
.elementor-element-13cbbcf {
  height: auto !important;
  min-height: 0 !important;
}
.bn-flipbook {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  transition: width 0.5s cubic-bezier(0.4, 0.1, 0.2, 1);
  background: linear-gradient(180deg, #efeaf5 0%, #e4ddef 100%);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(20, 12, 40, 0.12);
  overflow: hidden;
  perspective: 2800px;
  user-select: none;
  -webkit-user-select: none;
}
.bn-fb-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.bn-fb-page { position: absolute; top: 0; bottom: 0; }
.bn-fb-page--left { left: 0; width: 50%; transition: left 0.5s cubic-bezier(0.4,0.1,0.2,1), width 0.5s cubic-bezier(0.4,0.1,0.2,1); }
.bn-fb-page--right { left: 50%; width: 50%; transition: left 0.5s cubic-bezier(0.4,0.1,0.2,1), width 0.5s cubic-bezier(0.4,0.1,0.2,1); }
.bn-fb-page--solo { left: 0; width: 100%; transition: opacity 0.22s ease, transform 0.22s ease; }
.bn-fb-page img, .bn-fb-face img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
/* closed states: box shrinks to a single page, no blank half */
@media (min-width: 768px) {
  .bn-fb--coverR, .bn-fb--coverL { width: 50%; }
  .bn-fb--coverR .bn-fb-page--right { left: 0; width: 100%; }
  .bn-fb--coverR .bn-fb-page--left { display: none; }
  .bn-fb--coverL .bn-fb-page--left { left: 0; width: 100%; }
  .bn-fb--coverL .bn-fb-page--right { display: none; }
  .bn-fb--coverR::after, .bn-fb--coverL::after { opacity: 0; }
}
/* spine shading where the two pages meet */
.bn-flipbook::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 34px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.07) 50%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.4s ease;
}
/* the turning leaf - keyframed arc: lifts towards the viewer mid-turn */
.bn-fb-leaf {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  transform-style: preserve-3d;
  z-index: 4;
}
.bn-fb-leaf--right { left: 50%; transform-origin: left center; }
.bn-fb-leaf--left { left: 0; transform-origin: right center; }
/* translateZ BEFORE rotateY: the lift happens along the viewer axis, so
   the spine edge stays glued (rotate-then-translate shoved the page
   ~46px sideways off the spine at mid-turn). */
@keyframes bnFbTurnF {
  0%   { transform: translateZ(0) rotateY(0deg); }
  45%  { transform: translateZ(34px) rotateY(-84deg); }
  100% { transform: translateZ(0) rotateY(-180deg); }
}
@keyframes bnFbTurnB {
  0%   { transform: translateZ(0) rotateY(0deg); }
  45%  { transform: translateZ(34px) rotateY(84deg); }
  100% { transform: translateZ(0) rotateY(180deg); }
}
.bn-fb-leaf--turnF { animation: bnFbTurnF 0.82s cubic-bezier(0.45, 0.08, 0.3, 1) forwards; }
.bn-fb-leaf--turnB { animation: bnFbTurnB 0.82s cubic-bezier(0.45, 0.08, 0.3, 1) forwards; }
.bn-fb-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #f6f3fa;
  overflow: hidden;
}
.bn-fb-face--back { transform: rotateY(180deg); }
/* curvature illusion: soft shading along the moving edge + spine */
.bn-fb-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 84%, rgba(0,0,0,0.05) 100%);
}
@keyframes bnFbDim {
  0% { opacity: 0; }
  45% { opacity: 1; }
  100% { opacity: 0; }
}
.bn-fb-leaf--turnF .bn-fb-face::before,
.bn-fb-leaf--turnB .bn-fb-face::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,0.16), rgba(0,0,0,0.02) 55%, rgba(255,255,255,0.10));
  opacity: 0;
  animation: bnFbDim 0.82s ease forwards;
  z-index: 1;
}
/* mobile slide-fade */
.bn-fb-out-left { opacity: 0; transform: translateX(-26px); }
.bn-fb-out-right { opacity: 0; transform: translateX(26px); }
.bn-fb-in-right { opacity: 0; transform: translateX(26px); transition: none; }
.bn-fb-in-left { opacity: 0; transform: translateX(-26px); transition: none; }
/* overlaid arrows - the only way to turn pages */
.bn-fb-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 6;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: rgba(93, 51, 132, 0.92) !important;
  color: #fff !important;
  font-size: 26px !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22) !important;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.bn-fb-arrow:hover { background: #45266b !important; }
.bn-fb-arrow--prev { left: 16px; }
.bn-fb-arrow--next { right: 16px; }
.bn-fb-arrow--off { opacity: 0.25; pointer-events: none; }
/* page counter */
.bn-fb-counter {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  background: rgba(20, 12, 40, 0.66);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 999px;
  pointer-events: none;
}
@media (max-width: 767px) {
  .bn-flipbook-wrap { aspect-ratio: 1272 / 1800; }
  .bn-flipbook { border-radius: 8px; }
  .bn-flipbook::after { display: none; }
  .bn-fb-arrow { width: 40px !important; height: 40px !important; }
  .bn-fb-arrow--prev { left: 10px; }
  .bn-fb-arrow--next { right: 10px; }
}

/* === About Us: intro paragraph fills its column (was capped 61% -> 361px,
   other pages' intros run ~544px) (Oliver 2026-07-13) === */
.elementor-element-ae78a4f {
  max-width: 100% !important;
  width: 100% !important;
  --container-widget-width: 100% !important;
}

/* === About Us: FFC logo in the supporting-charities section (Oliver 2026-07-13) === */
/* FFC logo now leads the LEFT column of the charities section, above the
   "We care about property / you" headlines; the left column centres the group
   vertically, so the logo pushes the headline block down for an even balance. */
.bn-ffc-logo-wrap {
  margin: 0 0 42px;
}
.bn-ffc-logo-wrap img {
  display: block;
  width: 340px;
  max-width: 80%;
  height: auto;
}

/* ============================================================
   OFFICE PAGES (items 77/78/79) — /<town>-estate-agents, generated
   by scripts/generate-office-pages.mjs. v2 layout: split hero like
   the rest of the site (photo right, dark text on white), map
   paired with the opening-hours card, constrained FAQs, Vebra
   carousel with status ribbons.
   ============================================================ */
.bn-office-page { background: #ffffff; }

.bn-office-breadcrumb {
  padding: 18px 80px 10px;
  font-size: 13px;
  color: #707070;
  display: flex;
  gap: 8px;
  align-items: center;
}
.bn-office-breadcrumb a { color: #707070; text-decoration: none; }
.bn-office-breadcrumb a:hover { color: #5D3384; }
.bn-office-breadcrumb em { font-style: normal; color: #5D3384; font-weight: 600; }

/* --- Hero: 2-column split, matching the sitewide hero language --- */
.bn-office-hero2 {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  align-items: stretch;
}
.bn-office-hero2-text { align-self: center; padding: 48px 56px 56px 80px; }
.bn-office-hero2 h1 { color: #5D3384; font-size: 45px; font-weight: 500 !important; line-height: 1.15; margin: 0 0 16px; }
.bn-office-tagline { color: #212529; font-size: 19px; font-weight: 500; line-height: 1.5; margin: 0 0 12px; }
.bn-office-blurb { color: #212529; font-size: 18px; font-weight: 300; line-height: 1.6; margin: 0 0 28px; }
.bn-office-hero2-media { min-height: 560px; }
.bn-office-hero2-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bn-office-contact { list-style: none; margin: 0; padding: 0; }
.bn-office-contact li { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font-size: 15px; color: #333333; }
.bn-office-contact a { color: #333333 !important; text-decoration: none; }
.bn-office-contact a:hover { color: #5D3384 !important; text-decoration: underline; }
.bn-office-ico {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #F0EBF7;
  color: #5D3384;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bn-office-ico svg { width: 16px; height: 16px; }

.bn-office-google { display: flex; align-items: center; gap: 10px; margin: 20px 0 30px; text-decoration: none; }
.bn-office-google-word { font-weight: 700; font-size: 17px; color: #333333 !important; }
.bn-office-stars { display: inline-flex; gap: 2px; color: #FBBC04; }
.bn-office-stars svg { width: 17px; height: 17px; }
.bn-office-google-read { font-size: 13px; font-weight: 600; color: #5D3384 !important; text-decoration: underline; text-underline-offset: 3px; }

.bn-office-hero2-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.bn-office-hero2-ctas .bn-office-cta { margin-bottom: 0; }

/* Shared CTA buttons */
.bn-office-cta {
  display: block;
  text-align: center;
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 5px;
  margin-bottom: 12px;
  transition: background 0.2s ease, color 0.2s ease;
}
.bn-office-cta--solid { background: #5D3384; color: #ffffff !important; }
.bn-office-cta--solid:hover { background: #45266b; }
.bn-office-cta--line { border: 2px solid #5D3384; color: #5D3384 !important; }
.bn-office-cta--line:hover { background: #5D3384; color: #ffffff !important; }
.bn-office-cta:active, .bn-office-arrow:active { transform: translateY(1px); }

/* Contact Branch popover: call / email / directions in place, no page hop */
.bn-office-contactpop { position: relative; display: inline-block; }
.bn-office-contactpop--block { display: block; }
.bn-office-contactpop--block .bn-office-contactpop-btn { width: 100%; }
.bn-office-contactpop-btn { cursor: pointer; background: transparent !important; white-space: normal; }
.bn-office-contactpop-btn:hover,
.bn-office-contactpop-btn:focus,
.bn-office-contactpop-btn[aria-expanded="true"] { background: #5D3384 !important; color: #ffffff !important; }
.bn-office-contactpop-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 230px;
  background: #ffffff;
  border: 1px solid #ECE6F4;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(58, 32, 88, 0.16);
  padding: 6px;
  z-index: 30;
}
.bn-office-contactpop-menu a {
  display: block;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #333333 !important;
  text-decoration: none;
  border-radius: 3px;
}
.bn-office-contactpop-menu a:hover { background: #F0EBF7; color: #5D3384 !important; }

/* --- Location + opening hours, side by side --- */
.bn-office-h2--location { padding: 64px 80px 0; margin-bottom: 0 !important; }
.bn-office-main2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 64px;
  padding: 24px 80px 12px;
  align-items: start;
}
.bn-office-page h2.bn-office-h2 {
  color: #5D3384 !important;
  font-size: 45px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  margin: 0 0 24px;
}
#bn-office-map { height: 440px; width: 100%; border-radius: 4px; z-index: 0; }
#bn-office-map .leaflet-tile-pane { filter: grayscale(100%) contrast(1.05); }
#bn-office-map .leaflet-marker-pane { filter: none; }
.bn-office-pin { background: none; border: none; }
.bn-office-directions {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: #5D3384 !important;
  text-decoration: none;
}
.bn-office-directions:hover { text-decoration: underline; text-underline-offset: 3px; }

.bn-office-side {
  background: #F8F7FB;
  border: 1px solid #ECE6F4;
  border-top: 3px solid #5D3384;
  padding: 28px;
  border-radius: 4px;
}
.bn-office-side h3 { font-size: 18px; font-weight: 600; color: #333333; margin: 0 0 10px; }
.bn-office-hours { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
.bn-office-hours td { padding: 7px 0; font-size: 15px; border: none; }
.bn-office-hours td:first-child { color: #333333; font-weight: 600; }
.bn-office-hours td:last-child { text-align: right; color: #707070; }

/* --- FAQs --- */
.bn-office-faq-wrap { padding: 44px 80px 12px; }
.bn-office-faq { max-width: 900px; }
.bn-office-faq-item { border-bottom: 1px solid #E5E0EC; }
.bn-office-faq-item:first-child { border-top: 1px solid #E5E0EC; }
.bn-office-faq-q {
  background: none !important;
  background-color: transparent !important;
  color: #333333 !important;
  white-space: normal !important;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 2px;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 18px;
  font-weight: 600;
}
.bn-office-faq-toggle { flex: 0 0 auto; font-size: 24px; font-weight: 400; color: #5D3384; line-height: 1; }
.bn-office-faq-toggle::before { content: "+"; }
.bn-office-faq-item.is-open .bn-office-faq-toggle::before { content: "\2212"; }
.bn-office-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.bn-office-faq-item.is-open .bn-office-faq-a { max-height: 400px; }
.bn-office-faq-a p { color: #212529; font-size: 17px; font-weight: 300; line-height: 1.7; margin: 0; padding: 0 2px 20px; }
.bn-office-faq-a a { color: #5D3384; font-weight: 600; }

/* --- For Sale / To Rent carousel --- */
.bn-office-listings { padding: 32px 80px 90px; }
.bn-office-listings-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.bn-office-tabs { display: flex; gap: 28px; align-items: baseline; }
.bn-office-tab {
  background: none !important;
  background-color: transparent !important;
  border: none;
  white-space: normal;
  cursor: pointer;
  padding: 0;
  font-size: 34px;
  font-weight: 700;
  transition: color 0.2s ease;
}
.bn-office-tab { color: #C9C1D6 !important; }
.bn-office-tab:hover, .bn-office-tab.is-active { color: #5D3384 !important; }
.bn-office-listings-nav { display: flex; align-items: center; gap: 12px; }
.bn-office-more {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5D3384 !important;
  text-decoration: none;
  margin-right: 8px;
}
.bn-office-more:hover { text-decoration: underline; }
.bn-office-arrow {
  background: #ffffff !important;
  color: #5D3384 !important;
  padding: 0 !important;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #D9D2E5;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.bn-office-arrow:hover { background: #5D3384 !important; color: #ffffff !important; border-color: #5D3384; }

.bn-office-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.bn-office-track::-webkit-scrollbar { display: none; }
.bn-office-card {
  flex: 0 0 calc((100% - 48px) / 3);
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  display: block;
}
.bn-office-card-img { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: #ECE6F4; }
.bn-office-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.bn-office-card:hover .bn-office-card-img img { transform: scale(1.04); }
/* Sized up Aug 2026 alongside the search-card ribbon — the client couldn't
   pick out for-sale vs to-rent at a glance. */
.bn-office-ribbon {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #5D3384;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 7px 14px;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}
.bn-office-ribbon--muted { background: #002337; }
.bn-office-card-body { display: block; padding: 14px 2px 0; }
.bn-office-card-price { display: block; color: #5D3384; font-size: 22px; font-weight: 800; }
.bn-office-card-price em { font-style: normal; font-size: 12px; font-weight: 500; color: #707070; margin-left: 6px; }
.bn-office-card-addr { display: block; color: #333333; font-size: 15px; margin: 6px 0 4px; }
.bn-office-card:hover .bn-office-card-addr { color: #5D3384; }
.bn-office-card-specs { display: block; color: #707070; font-size: 13px; }
.bn-office-skel {
  flex: 0 0 calc((100% - 48px) / 3);
  aspect-ratio: 4 / 3.9;
  border-radius: 4px;
  background: linear-gradient(100deg, #F0EBF7 40%, #F8F5FC 50%, #F0EBF7 60%);
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .bn-office-skel { animation: bn-office-shimmer 1.4s ease infinite; }
}
@keyframes bn-office-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -80% 0; }
}
@media (max-width: 1024px) { .bn-office-skel { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 640px) { .bn-office-skel { flex-basis: 86%; } }
.bn-office-empty { padding: 44px 0; color: #707070; font-size: 15px; }
.bn-office-empty a { color: #5D3384; font-weight: 600; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .bn-office-breadcrumb { padding: 14px 20px 8px; }
  .bn-office-hero2 { grid-template-columns: minmax(0, 1fr); }
  .bn-office-hero2-text { padding: 8px 20px 40px; }
  .bn-office-hero2-media { min-height: 0; order: -1; }
  .bn-office-hero2-media img { aspect-ratio: 16 / 10; height: auto; }
  .bn-office-h2--location { padding: 44px 20px 0; }
  .bn-office-main2 { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 18px 20px 8px; }
  .bn-office-side { max-width: 480px; }
  .bn-office-faq-wrap { padding: 36px 20px 8px; }
  .bn-office-listings { padding: 24px 20px 70px; }
  .bn-office-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 640px) {
  .bn-office-hero2 h1 { font-size: 32px; }
  .bn-office-page h2.bn-office-h2 { font-size: 30px !important; }
  .bn-office-tagline { font-size: 17px; }
  .bn-office-contact li { font-size: 14px; }
  .bn-office-hero2-ctas .bn-office-cta { flex: 1 1 100%; }
  .bn-office-tab { font-size: 25px; }
  #bn-office-map { height: 320px; }
  .bn-office-track { gap: 16px; }
  .bn-office-card { flex-basis: 86%; }
}

/* Our Offices: third row (Waterlooville / Havant / Lee-On-The-Solent), real
   branch photos from the contact-us cards, same footprint as the other rows. */
.bn-offices-extra-inner {
  display: flex !important;
  flex-direction: row !important;
  gap: 20px;
  align-items: stretch;
}
.bn-offices-extra-card { flex: 1 1 0; min-width: 0; }
.bn-offices-extra-img { display: block; aspect-ratio: 1646 / 920; overflow: hidden; margin-bottom: 15px; }
.bn-offices-extra-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bn-offices-extra-card .elementor-image-box-title a { color: inherit; }
@media (max-width: 767px) {
  .bn-offices-extra-inner { flex-direction: column !important; }
}

/* Office-card hover affordance (Contact Us + Our Offices): zoom the photo,
   float in a "View office" pill, tint the branch name — makes it obvious the
   cards click through to the office pages. Scoped by the -estate-agents href
   so Meet The Team / About image-box cards are untouched. */
.elementor-image-box-img a[href$="-estate-agents"],
a.bn-offices-extra-img {
  display: block;
  position: relative;
  overflow: hidden;
}
.elementor-image-box-img a[href$="-estate-agents"] img,
a.bn-offices-extra-img img {
  transition: transform 0.35s ease;
}
.elementor-image-box-img a[href$="-estate-agents"]:hover img,
a.bn-offices-extra-img:hover img {
  transform: scale(1.06);
}
.elementor-image-box-img a[href$="-estate-agents"]::after,
a.bn-offices-extra-img::after {
  content: "View office";
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: #5D3384;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 7px 14px;
  border-radius: 3px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.elementor-image-box-img a[href$="-estate-agents"]:hover::after,
a.bn-offices-extra-img:hover::after {
  opacity: 1;
  transform: translateY(0);
}
h3.elementor-image-box-title a[href$="-estate-agents"] {
  transition: color 0.2s ease;
}
h3.elementor-image-box-title a[href$="-estate-agents"]:hover {
  color: #5D3384 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Book a Valuation modal (office pages, item 81) */
.bn-val-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.bn-val-backdrop { position: absolute; inset: 0; background: rgba(20, 10, 35, 0.55); }
.bn-val-card {
  position: relative;
  background: #ffffff;
  border-radius: 4px;
  border-top: 3px solid #5D3384;
  box-shadow: 0 24px 70px rgba(20, 10, 35, 0.35);
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 32px;
}
.bn-val-card h3 { font-size: 24px; font-weight: 700; color: #5D3384; margin: 0 0 6px; }
.bn-val-sub { color: #707070; font-size: 14px; margin: 0 0 22px; }
.bn-val-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #F0EBF7 !important;
  color: #5D3384 !important;
  font-size: 14px;
  cursor: pointer;
  padding: 0 !important;
}
.bn-val-x:hover { background: #5D3384 !important; color: #ffffff !important; }
.bn-val-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bn-val-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bn-val-field { margin-bottom: 14px; }
.bn-val-field label { display: block; font-size: 13px; font-weight: 600; color: #333333; margin-bottom: 6px; }
.bn-val-field label span { color: #5D3384; }
.bn-val-field input, .bn-val-field textarea {
  width: 100%;
  border: 1px solid #D9D2E5;
  border-radius: 3px;
  padding: 11px 12px;
  font-size: 14px;
  color: #333333;
  background: #ffffff;
}
.bn-val-field input:focus, .bn-val-field textarea:focus { outline: 2px solid #5D3384; outline-offset: -1px; border-color: #5D3384; }
.bn-val-error { color: #B3261E; font-size: 14px; margin: 0 0 12px; }
.bn-val-error a { color: #B3261E; font-weight: 700; }
.bn-val-submit { width: 100%; border: none; cursor: pointer; font-size: 15px; }
.bn-val-submit:disabled { opacity: 0.6; cursor: default; }
.bn-val-done h3 { margin-top: 8px; }
.bn-val-done p { color: #707070; font-size: 15px; line-height: 1.7; }
@media (max-width: 640px) {
  .bn-val-card { padding: 24px 18px; }
  .bn-val-row { grid-template-columns: 1fr; gap: 0; }
}

/* Contact Us enquiry form (item 82) — reuses bn-val field styles */
.bn-enq-section { padding: 24px 80px 70px; }
.bn-enq-inner {
  max-width: 760px;
  background: #F8F7FB;
  border: 1px solid #ECE6F4;
  border-top: 3px solid #5D3384;
  border-radius: 4px;
  padding: 36px;
  margin: 0 auto;
}
.bn-enq-intro h2 { color: #5D3384; font-size: 26px; font-weight: 600; margin: 0 0 8px; }
.bn-enq-intro p { color: #707070; font-size: 15px; margin: 0 0 24px; }
.bn-enq-form .bn-val-field select {
  width: 100%;
  border: 1px solid #D9D2E5;
  border-radius: 3px;
  padding: 11px 12px;
  font-size: 14px;
  color: #333333;
  background: #ffffff;
}
.bn-enq-form .bn-val-field select:focus { outline: 2px solid #5D3384; outline-offset: -1px; }
.bn-enq-form .bn-val-field input, .bn-enq-form .bn-val-field textarea { background: #ffffff; }
.bn-enq-submit { width: 100%; border: none; cursor: pointer; font-size: 15px; }
.bn-enq-submit:disabled { opacity: 0.6; cursor: default; }
.bn-enq-done h3 { color: #5D3384; font-size: 22px; margin: 0 0 8px; }
.bn-enq-done p { color: #707070; font-size: 15px; margin: 0; }
@media (max-width: 1024px) { .bn-enq-section { padding: 16px 20px 56px; } }
@media (max-width: 640px) { .bn-enq-inner { padding: 26px 18px; } }

/* Footer credits (item 87/88): one row on the legal strip -
   copyright left, credits centred, policy links right. */
.elementor-element-7dc0347e > .elementor-container {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
}
.elementor-element-7dc0347e .elementor-column { width: auto !important; }
.bn-credits {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 26px;
  min-width: 0;
}
.bn-credit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit !important;
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}
.bn-credit:hover { text-decoration: underline; text-underline-offset: 3px; }
.bn-credit img { height: 15px; width: auto; display: inline-block; }
.bn-credit img.bn-credit-carrot { height: 18px; }
.bn-credit strong { font-weight: 700; letter-spacing: 0.5px; margin-left: -3px; }
@media (max-width: 767px) {
  .elementor-element-7dc0347e > .elementor-container { justify-content: center; }
  .bn-credits { flex-basis: 100%; order: 3; margin-top: 10px; }
}

/* Selling hero CTA row (988d7e2): the boxed e-con-inner was centring itself
   16px inside the grid, so CONTACT US sat off the text column's left edge
   (Oliver spotted it, 2026-07-17). Span it fully - buttons now flush with
   the heading/subline at every width. */
.elementor-element-988d7e2 > .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
}

/* Same boxed-inner 16px gutter bug as the selling hero (item 89), found by a
   sitewide edge sweep on the hero CTA rows of landlords, Handleys Corner,
   mortgages and careers - buttons now flush with their text columns. */
.elementor-element-fe8e24c > .e-con-inner,
.elementor-element-5ac2a34 > .e-con-inner,
.elementor-element-fe6a2a7 > .e-con-inner,
.elementor-element-3c0f4d6 > .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
}

/* === Meet the Team full-bleed hero (client req 2026-07-24) === */
/* Collapse the empty spacer column and zero the section/container/column
   horizontal padding so the team photo runs edge to edge as a hero banner
   (avoids the 100vw breakout, which overflowed because the boxed container
   is not viewport-centred). Heading + intro stay constrained + centred below. */
.elementor-124 .elementor-element-8332f44 .elementor-element-214526c {
  display: none !important;
}
.elementor-124 .elementor-element-8332f44,
.elementor-124 .elementor-element-8332f44 > .elementor-container,
.elementor-124 .elementor-element-8332f44 .elementor-element-a081083,
.elementor-124 .elementor-element-8332f44 .elementor-element-a081083 > .elementor-widget-wrap,
.elementor-124 .elementor-element-8332f44 .elementor-element-448798f,
.elementor-124 .elementor-element-8332f44 .elementor-element-448798f > .elementor-widget-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
}
.elementor-124 .elementor-element-8332f44 .elementor-element-a081083 {
  width: 100% !important;
  flex: 0 0 100% !important;
}
.elementor-124 .elementor-element-8332f44 .elementor-element-a081083 > .elementor-widget-wrap {
  text-align: center;
}
/* High specificity + !important to beat Elementor's own .elementor-widget-image img rule. */
.elementor-124 .elementor-element-8332f44 img.bn-team-group-photo {
  width: 100% !important;
  max-width: 100% !important;
  height: clamp(300px, 38vw, 560px) !important;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
  margin: 0 !important;
}
/* Heading + intro: readable width, centred, spaced under the hero banner.
   Heading gets full width + nowrap on desktop so "Meet The Whole Team" stays on
   one line; it is allowed to wrap again on mobile where 73px is too wide. */
.elementor-124 .elementor-element-8332f44 .elementor-element-1fe0e61 {
  max-width: 100%;
  margin: 44px auto 24px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
@media (min-width: 768px) {
  .elementor-124 .elementor-element-8332f44 .elementor-element-1fe0e61 .elementor-heading-title {
    white-space: nowrap;
  }
}
.elementor-124 .elementor-element-8332f44 .elementor-element-402af61 {
  max-width: 780px;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
/* Balance the vertical rhythm below the hero so the search box sits equidistant
   (~52px) between the paragraph above and the team cards below.
   - hero section bottom margin drives paragraph -> search
   - the search box overhang (~26px) + its margin + the team grid's top padding
     drive search -> cards; trim the latter two to match. */
/* Make the hero section hug its content (no min-height slack / padding-bottom
   trailing space) so paragraph->search is identical on desktop and mobile.
   The column's widget-wrap also carries a 28px bottom padding on mobile that
   must be zeroed (the desktop reset was min-width:768 only). */
.elementor-124 .elementor-element-8332f44 {
  margin-bottom: 0 !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
}
.elementor-124 .elementor-element-8332f44 .elementor-element-a081083 > .elementor-widget-wrap {
  padding-bottom: 0 !important;
}
/* Search box is the single lever for the gaps on both sides. Its box runs ~26px
   below the input and the team grid adds ~60px of structural top space, so the
   bottom margin is pulled negative to keep search->cards equal to
   paragraph->search (~52px) on every breakpoint. */
body .cl-team-search {
  margin-top: 52px !important;
  margin-bottom: -34px !important;
}

/* === News page: section heads + Industry News feed (client req 2026-07-24) === */
.bnews-section-head {
  max-width: 1200px;
  margin: 0 auto 22px;
  text-align: center;
}
.bnews-section-title {
  font-family: "Montserrat", sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
}
.bnews-section-sub {
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  color: #5a5f66;
  margin: 0 auto;
  max-width: 640px;
  line-height: 1.5;
}
.bnews-section-sub a { color: #5D3384; font-weight: 600; text-decoration: none; }
.bnews-section-sub a:hover { text-decoration: underline; }
.bnews-industry-section {
  border-top: 1px solid #e6e3ec;
  margin-top: 8px;
}
.bnews-industry-loading {
  grid-column: 1 / -1;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  color: #8a8f96;
  padding: 24px 0;
}
.bnews-card-image--fallback {
  background: linear-gradient(135deg, #5D3384 0%, #3f2259 100%);
  position: relative;
}
.bnews-card-image--fallback::after {
  content: "Property Industry Eye";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Manual Bernards posts are self-contained summary tiles (not links), so they
   should not read as clickable: no cursor pointer, no hover lift. */
.bnews-card--static { cursor: default; }
.bnews-card--static:hover { transform: none; }