/* Contact page
   Fixed-layout geometry from the approved design.
   Repeated typography and presentation rules are grouped to minimise duplication. */

/* Shared typography and presentation */
.contact-rectangle-70,
.contact-rectangle-3 {
  background: var(--color-primary);
}

.contact-rectangle-71,
.contact-rectangle-73,
.contact-rectangle-93,
.contact-rectangle-74,
.contact-rectangle-95,
.contact-rectangle-79,
.contact-rectangle-91,
.contact-rectangle-77,
.contact-rectangle-96,
.contact-rectangle-78,
.contact-rectangle-75,
.contact-rectangle-98,
.contact-rectangle-80,
.contact-rectangle-76,
.contact-rectangle-99,
.contact-rectangle-81-2,
.contact-rectangle-81-3 {
  background: var(--color-white);
}

.contact-rectangle-94,
.contact-freepik-br-07e9d428-c990-4603-adf4-7d205b53241b {
  background-image: url("/assets/images/Contact%20Us%20Page%20Image%202.png");
}

.contact-contact-us,
.contact-submit-enquiry,
.contact-request-a-call,
.contact-send-enquiry,
.contact-book-a-call {
  font-weight: 400;
  font-size: 18px;
  line-height: 21px;
  color: var(--color-white);
}

.contact-home,
.contact-our-services,
.contact-meet-the-team,
.contact-meet-the-facilitator,
.contact-faq {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: var(--color-white);
}

.contact-rectangle-81,
.contact-rectangle-92,
.contact-rectangle-5 {
  background: var(--color-primary);
  border: 1px solid #ff4040;
}

.contact-send-us-your-enquiry,
.contact-our-location,
.contact-want-to-book-a-call {
  font-weight: 300;
  font-size: 44px;
  line-height: 54px;
  text-transform: uppercase;
  color: var(--color-black);
}

.contact-complete-the-form-below-and-tell-us,
.contact-if-you-would-rather-discuss-your-property {
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-text-muted);
}

.contact-full-name,
.contact-full-name-2,
.contact-preferred-contact-method,
.contact-property-location,
.contact-leave-a-short-note-to-help-us,
.contact-service-interested-in,
.contact-email-address,
.contact-phone-number,
.contact-phone-number-2,
.contact-preferred-call-time {
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-text-muted);
  opacity: 0.68;
}

.contact-vector-21,
.contact-vector-20 {
  opacity: 0.68;
  border: 2px solid #646464;
}

.contact-corporate-letting-landlord-and-investor-support-brrrr,
.contact-phone-call-email-whatsapp-video-call {
  font-weight: 400;
  font-size: 20px;
  line-height: 60px;
  color: var(--color-text-muted);
  opacity: 0.68;
}

.contact-vector-22,
.contact-vector-23,
.contact-vector-24,
.contact-vector-25,
.contact-vector-26,
.contact-vector-27,
.contact-vector-22-2,
.contact-vector-23-2,
.contact-vector-24-2 {
  border: 1px solid #b1aaaa;
}

/* General layout */
.contact-figma-page {
  width: 1440px;
  height: 3463px;
}

/* Contact information */
.contact-rectangle-72 {
  width: 1440px;
  height: 2478px;
  left: 0px;
  top: 454px;
  background: #f5f5f5;
}

/* General layout */
.contact-rectangle-1 {
  width: 1457px;
  height: 464px;
  left: -9px;
  top: -13px;
  background: var(--color-black);
}

.contact-headway-5qgiuubxkwm-unsplash-1 {
  width: 1440px;
  height: 452px;
  left: 0;
  top: 0;
  background-image: url("/assets/images/Contact%20Us%20Header%20Image%201.jpg");
  background-position: 50% -293px;
  background-size: 1440px 960px;
}

.contact-rectangle-1-2 {
  width: 1457px;
  height: 464px;
  left: -9px;
  top: -13px;
  background: var(--color-black);
  opacity: 0.67;
}

/* Contact information */
.contact-rectangle-70 {
  width: 514px;
  height: 570px;
  left: 85px;
  top: 524px;
}

.contact-rectangle-71 {
  width: 757px;
  height: 570px;
  left: 599px;
  top: 524px;
}

/* Enquiry form */
.contact-rectangle-73 {
  width: 1271px;
  height: 112px;
  left: 85px;
  top: 1260px;
}

/* Map and location */
.contact-rectangle-93 {
  width: 375px;
  height: 339px;
  left: 85px;
  top: 2466px;
}

.contact-rectangle-94 {
  width: 882px;
  height: 339px;
  left: 474px;
  top: 2466px;
}

/* Enquiry form */
.contact-rectangle-74 {
  width: 415px;
  height: 78px;
  left: 85px;
  top: 1385px;
}

/* Call request */
.contact-rectangle-95 {
  width: 415px;
  height: 78px;
  left: 85px;
  top: 2070px;
}

/* Enquiry form */
.contact-rectangle-79 {
  width: 415px;
  height: 78px;
  left: 85px;
  top: 1567px;
}

/* Call request */
.contact-rectangle-91 {
  width: 1264px;
  height: 102px;
  left: calc(50% - 1270px / 2);
  top: 1955px;
}

/* Enquiry form */
.contact-rectangle-77 {
  width: 629px;
  height: 78px;
  left: 85px;
  top: 1476px;
}

/* Call request */
.contact-rectangle-96 {
  width: 1264px;
  height: 78px;
  left: 85px;
  top: 2161px;
}

/* Enquiry form */
.contact-rectangle-78 {
  width: 629px;
  height: 78px;
  left: 727px;
  top: 1476px;
}

.contact-rectangle-75 {
  width: 415px;
  height: 78px;
  left: 513px;
  top: 1385px;
}

/* Call request */
.contact-rectangle-98 {
  width: 415px;
  height: 78px;
  left: 513px;
  top: 2070px;
}

/* Enquiry form */
.contact-rectangle-80 {
  width: 843px;
  height: 158px;
  left: 513px;
  top: 1567px;
}

.contact-rectangle-76 {
  width: 415px;
  height: 78px;
  left: 941px;
  top: 1385px;
}

/* Call request */
.contact-rectangle-99 {
  width: 408px;
  height: 78px;
  left: 941px;
  top: 2070px;
}

/* Hero and navigation */
.contact-whatsapp-image-2026-01-12-at-7 {
  width: 179px;
  height: 60px;
  left: 80px;
  top: 25px;
  background-image: url("/assets/images/Logo.jpeg");
}

.contact-rectangle-3 {
  width: 130px;
  height: 54px;
  left: 1230px;
  top: 29px;
}

.contact-contact-us {
  width: 87px;
  height: 16px;
  left: 1251px;
  top: 46px;
}

.contact-whether-you-want-to-discuss-a-property {
  width: 1072px;
  height: 58px;
  left: calc(50% - 1072px / 2);
  top: 241px;
  font-weight: 300;
  font-size: 24px;
  line-height: 33px;
  text-align: center;
  color: var(--color-white);
}

.contact-contact-us-2 {
  width: 1115px;
  height: 38px;
  left: calc(50% - 1115px / 2 - 0.5px);
  top: 156px;
  font-weight: 300;
  font-size: 54px;
  line-height: 65px;
  text-align: center;
  text-transform: capitalize;
  color: var(--color-white);
}

.contact-rectangle-2 {
    width: 555px;
    height: 52px;
    left: 443px;
    top: 29px;
    background: rgba(255, 255, 255, 0.18);
    opacity: 0.18;
}

.contact-home {
  width: 44px;
  height: 16px;
  left: 464px;
  top: 46px;
}

.contact-our-services {
  width: 90px;
  height: 16px;
  left: 533px;
  top: 46px;
}

.contact-meet-the-team {
  width: 107px;
  height: 16px;
  left: 648px;
  top: 46px;
}

.contact-meet-the-facilitator {
  width: 139px;
  height: 15px;
  left: 780px;
  top: 46px;
}

.contact-faq {
  width: 31px;
  height: 16px;
  left: 944px;
  top: 46px;
}

/* Contact information */
.contact-let-s-discuss-your-property-goals {
  width: 426px;
  height: 160px;
  left: calc(50% - 426px / 2 - 375px);
  top: 546px;
  font-weight: 300;
  font-size: 58px;
  line-height: 60px;
  color: var(--color-white);
}

.contact-every-property-has-a-different-opportunity-you {
  width: 514px;
  height: 391px;
  left: calc(50% - 514px / 2 + 258px);
  top: 614px;
  font-weight: 400;
  font-size: 24px;
  line-height: 35px;
  color: var(--color-text-muted);
  white-space: normal;
}

.contact-every-property-has-a-different-opportunity-you p {
  margin: 0;
}

.contact-every-property-has-a-different-opportunity-you p + p {
  margin-top: 20px;
}

/* Enquiry form */
.contact-rectangle-81 {
  width: 159px;
  height: 48px;
  left: 1197px;
  top: 1742px;
}

.contact-submit-enquiry {
  width: 121px;
  height: 21px;
  left: 1216px;
  top: 1755px;
}

/* Call request */
.contact-rectangle-92 {
  width: 159px;
  height: 48px;
  left: 1190px;
  top: 2252px;
}

.contact-request-a-call {
  width: 116px;
  height: 21px;
  left: 1212px;
  top: 2265px;
}

/* Hero and navigation */
.contact-rectangle-5 {
  width: 145px;
  height: 48px;
  left: 570px;
  top: 346px;
}

.contact-send-enquiry {
  width: 106px;
  height: 21px;
  left: 590px;
  top: 359px;
}

.contact-rectangle-6 {
  width: 137px;
  height: 48px;
  left: 733px;
  top: 346px;
  border: 2px solid #ffffff;
}

.contact-book-a-call {
  width: 90px;
  height: 21px;
  left: 757px;
  top: 359px;
}

/* Contact information */
.contact-freepik-br-07e9d428-c990-4603-adf4-7d205b53241b {
  width: 514px;
  height: 439px;
  left: 85px;
  top: 655px;
  background-position: center bottom !important;
  background-size: cover !important;
}

.contact-send-us-your-enquiry {
    width: 1161px;
    height: 38px;
    /*  left: calc(50% - 1161px / 2 - 41.5px);*/
    left: calc(50% - 1189px / 2 - 41.5px);
    top: 1189px;
}

/* Map and location */
.contact-our-location {
  width: 1161px;
  height: 38px;
  left: calc(50% - 1189px / 2 - 41.5px);
  top: 2395px;
}

/* Enquiry form */
.contact-want-to-book-a-call {
  width: 1161px;
  height: 38px;
  left: calc(50% - 1189px / 2 - 41.5px);
  top: 1884px;
}

.contact-complete-the-form-below-and-tell-us {
  width: 1205px;
  height: 42px;
  left: calc(50% - 1210px / 2 + 0.5px);
  top: 1287px;
}

/* Map and location */
.contact-use-the-map-to-locate-us-or {
  width: 311px;
  height: 127px;
  left: calc(50% - 311px / 2 - 447.5px);
  top: 2572px;
  font-weight: 400;
  font-size: 24px;
  line-height: 35px;
  text-align: center;
  color: var(--color-text-muted);
}

/* Enquiry form */
.contact-full-name {
  width: 290px;
  height: 17px;
  left: calc(50% - 290px / 2 - 457px);
  top: 1416px;
}

/* Call request */
.contact-full-name-2 {
  width: 113px;
  height: 17px;
  left: calc(50% - 113px / 2 - 545.5px);
  top: 2101px;
}

/* Enquiry form */
.contact-preferred-contact-method {
  width: 290px;
  height: 17px;
  left: calc(50% - 290px / 2 - 457px);
  top: 1598px;
}

/* Call request */
.contact-if-you-would-rather-discuss-your-property {
  width: 1179px;
  height: 47px;
  left: calc(50% - 1210px / 2 + 0.5px);
  top: 1978px;
}

/* Enquiry form */
.contact-property-location {
  width: 290px;
  height: 17px;
  left: calc(50% - 290px / 2 - 457px);
  top: 1507px;
}

/* Call request */
.contact-leave-a-short-note-to-help-us {
  width: 528px;
  height: 17px;
  left: calc(50% - 528px / 2 - 338px);
  top: 2192px;
}

/* Enquiry form */
.contact-service-interested-in {
  width: 290px;
  height: 17px;
  left: calc(50% - 290px / 2 + 185px);
  top: 1507px;
}

.contact-email-address {
  width: 290px;
  height: 17px;
  left: calc(50% - 290px / 2 - 29px);
  top: 1416px;
}

/* Call request */
.contact-phone-number {
  width: 140px;
  height: 17px;
  left: calc(50% - 140px / 2 - 104px);
  top: 2101px;
}

/* Enquiry form */
.contact-tell-us-about-your-property-portfolio-investment {
  width: 764px;
  height: 40px;
  left: calc(50% - 764px / 2 + 208px);
  top: 1586px;
  font-weight: 400;
  font-size: 20px;
  line-height: 23px;
  color: var(--color-text-muted);
  opacity: 0.68;
}

.contact-phone-number-2 {
  width: 290px;
  height: 17px;
  left: calc(50% - 290px / 2 + 399px);
  top: 1416px;
}

/* Call request */
.contact-preferred-call-time {
  width: 290px;
  height: 17px;
  left: calc(50% - 290px / 2 + 399px);
  top: 2101px;
}

/* Enquiry form */
.contact-vector-21 {
  width: 15px;
  height: 7.5px;
  left: 454px;
  top: 1602.5px;
}

.contact-vector-20 {
  width: 15px;
  height: 7.5px;
  left: 1310px;
  top: 1511.5px;
}

.contact-rectangle-81-2 {
  width: 629px;
  height: 443px;
  left: 727px;
  top: 1554px;
}

.contact-corporate-letting-landlord-and-investor-support-brrrr {
  width: 412px;
  height: 351px;
  left: calc(50% - 412px / 2 + 246px);
  top: 1585px;
}

.contact-vector-22 {
  width: 563px;
  height: 0px;
  left: 762px;
  top: 1621px;
}

.contact-vector-23 {
  width: 563px;
  height: 0px;
  left: 762px;
  top: 1682px;
}

.contact-vector-24 {
  width: 563px;
  height: 0px;
  left: 762px;
  top: 1739px;
}

.contact-vector-25 {
  width: 563px;
  height: 0px;
  left: 762px;
  top: 1801px;
}

.contact-vector-26 {
  width: 563px;
  height: 0px;
  left: 762px;
  top: 1861px;
}

/* Call request */
.contact-vector-27 {
  width: 563px;
  height: 0px;
  left: 762px;
  top: 1923px;
}

/* Enquiry form */
.contact-rectangle-81-3 {
  width: 415px;
  height: 259px;
  left: 85px;
  top: 1646px;
}

.contact-phone-call-email-whatsapp-video-call {
  width: 412px;
  height: 201px;
  left: calc(50% - 412px / 2 - 396px);
  top: 1677px;
}

.contact-vector-22-2 {
  width: 349px;
  height: 0px;
  left: 120px;
  top: 1713px;
}

.contact-vector-23-2 {
  width: 349px;
  height: 0px;
  left: 120px;
  top: 1774px;
}

.contact-vector-24-2 {
  width: 349px;
  height: 0px;
  left: 120px;
  top: 1831px;
}

.contact-enquiry {
  left: 0;
  top: 1240px;
}

/* Call request */
.contact-book-call {
  left: 0;
  top: 1935px;
}

/* Enquiry form */
.contact-full-name-3 {
  left: 85px;
  top: 1385px;
  width: 415px;
  height: 78px;
}

.contact-email-address-2 {
  left: 513px;
  top: 1385px;
  width: 415px;
  height: 78px;
}

.contact-phone-number-3 {
  left: 941px;
  top: 1385px;
  width: 415px;
  height: 78px;
}

.contact-property-location-2 {
  left: 85px;
  top: 1476px;
  width: 629px;
  height: 78px;
}

.contact-service {
  left: 727px;
  top: 1476px;
  width: 629px;
  height: 78px;
}

.contact-preferredcontact {
  left: 84px;
  top: 1567px;
  width: 415px;
  height: 78px;
}

.contact-tell-us-about-your-property-portfolio-investment-2 {
  left: 513px;
  top: 1574px;
  width: 843px;
  height: 158px;
}

.contact-real-submit {
  left: 1197px;
  top: 1742px;
  width: 159px;
  height: 48px;
}

/* Call request */
.contact-full-name-4 {
  left: 85px;
  top: 2070px;
  width: 415px;
  height: 78px;
}

.contact-phone-number-4 {
  left: 513px;
  top: 2070px;
  width: 415px;
  height: 78px;
}

.contact-preferred-call-time-2 {
  left: 941px;
  top: 2070px;
  width: 408px;
  height: 78px;
}

.contact-leave-a-short-note-to-help-us-2 {
  left: 85px;
  top: 2161px;
  width: 1264px;
  height: 78px;
}

.contact-real-submit-2 {
  left: 1190px;
  top: 2252px;
  width: 159px;
  height: 48px;
}

/* Map and location */
.contact-map-frame {
  left: 474px;
  top: 2466px;
  width: 882px;
  height: 339px;
}


/* Final Contact-page alignment with the approved reference. */
.contact-send-us-your-enquiry span,
.contact-want-to-book-a-call span,
.contact-our-location span {
  color: var(--color-primary);
  font-weight: 700;
}

/* These were static Figma dropdown-menu exports. The real accessible select
   controls above them must remain closed until the visitor opens them. */
.contact-rectangle-81-2,
.contact-corporate-letting-landlord-and-investor-support-brrrr,
.contact-vector-22,
.contact-vector-23,
.contact-vector-24,
.contact-vector-25,
.contact-vector-26,
.contact-vector-27,
.contact-rectangle-81-3,
.contact-phone-call-email-whatsapp-video-call,
.contact-vector-22-2,
.contact-vector-23-2,
.contact-vector-24-2 {
  display: none !important;
}

/* Keep the enquiry, call and location headings on one line like the approved design. */
.contact-send-us-your-enquiry,
.contact-want-to-book-a-call,
.contact-our-location {
  white-space: nowrap;
}
/* ================================================================
   SOR CONTACT PAGE — PREMIUM MOTION + INTERACTION
   Paste at the very bottom of wwwroot/assets/css/contact.css

   Scope: Contact page only. No HTML changes required.
   ================================================================ */

.contact-page {
    --contact-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --contact-motion-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --contact-motion-red: var(--color-primary, #ff4040);
}

    /* Hero */
    .contact-page .contact-headway-5qgiuubxkwm-unsplash-1 {
        transform-origin: center center;
        animation: contactHeroImageIn 1500ms var(--contact-motion-ease-soft) both;
        will-change: transform, opacity, filter;
    }

    .contact-page .contact-rectangle-1-2 {
        animation: contactHeroOverlayIn 950ms ease both;
    }

    .contact-page .contact-whatsapp-image-2026-01-12-at-7,
    .contact-page .contact-rectangle-2,
    .contact-page .contact-rectangle-3,
    .contact-page .contact-contact-us,
    .contact-page .contact-home,
    .contact-page .contact-our-services,
    .contact-page .contact-meet-the-team,
    .contact-page .contact-meet-the-facilitator,
    .contact-page .contact-faq,
    .contact-page .contact-contact-us-2,
    .contact-page .contact-whether-you-want-to-discuss-a-property,
    .contact-page .contact-rectangle-5,
    .contact-page .contact-send-enquiry,
    .contact-page .contact-rectangle-6,
    .contact-page .contact-book-a-call {
        animation: contactHeroTextIn 760ms var(--contact-motion-ease) both;
    }

    .contact-page .contact-whatsapp-image-2026-01-12-at-7 {
        animation-delay: 60ms;
    }

    .contact-page .contact-rectangle-2 {
        animation-delay: 100ms;
    }

    .contact-page .contact-home,
    .contact-page .contact-our-services,
    .contact-page .contact-meet-the-team,
    .contact-page .contact-meet-the-facilitator,
    .contact-page .contact-faq {
        animation-delay: 145ms;
    }

    .contact-page .contact-rectangle-3,
    .contact-page .contact-contact-us {
        animation-delay: 190ms;
    }

    .contact-page .contact-contact-us-2 {
        animation-delay: 260ms;
    }

    .contact-page .contact-whether-you-want-to-discuss-a-property {
        animation-delay: 360ms;
    }

    .contact-page .contact-rectangle-5,
    .contact-page .contact-send-enquiry {
        animation-delay: 470ms;
    }

    .contact-page .contact-rectangle-6,
    .contact-page .contact-book-a-call {
        animation-delay: 530ms;
    }

@keyframes contactHeroImageIn {
    from {
        opacity: 0.76;
        transform: scale(1.045);
        filter: saturate(0.92) contrast(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
        filter: saturate(1) contrast(1);
    }
}

@keyframes contactHeroOverlayIn {
    from {
        opacity: 0.82;
    }

    to {
        opacity: 0.67;
    }
}

@keyframes contactHeroTextIn {
    from {
        opacity: 0;
        transform: translate3d(0, 12px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Header links and hero CTA polish */
.contact-page .contact-home,
.contact-page .contact-our-services,
.contact-page .contact-meet-the-team,
.contact-page .contact-meet-the-facilitator,
.contact-page .contact-faq,
.contact-page .contact-contact-us,
.contact-page .contact-send-enquiry,
.contact-page .contact-book-a-call {
    text-decoration: none;
    transition: transform 240ms var(--contact-motion-ease), color 240ms ease, filter 240ms ease, box-shadow 240ms ease;
}

    .contact-page .contact-home:hover,
    .contact-page .contact-our-services:hover,
    .contact-page .contact-meet-the-team:hover,
    .contact-page .contact-meet-the-facilitator:hover,
    .contact-page .contact-faq:hover {
        color: #ffd0d0;
        transform: translate3d(0, -2px, 0);
    }

    .contact-page .contact-contact-us:hover,
    .contact-page .contact-send-enquiry:hover,
    .contact-page .contact-book-a-call:hover {
        transform: translate3d(0, -3px, 0);
        filter: brightness(1.04);
        box-shadow: 0 16px 34px rgba(255, 64, 64, 0.24);
    }

/* Scroll reveal system */
html.faq-contact-motion-ready .contact-page .contact-motion-target {
    --contact-x: 0px;
    --contact-y: 28px;
    --contact-scale: 1;
    opacity: 0;
    transform: translate3d(var(--contact-x), var(--contact-y), 0) scale(var(--contact-scale));
    filter: blur(1.3px) saturate(0.97) contrast(0.98);
    transition: opacity 720ms var(--contact-motion-ease), transform 860ms var(--contact-motion-ease-soft), filter 560ms ease, box-shadow 300ms ease, background-color 260ms ease;
    transition-delay: var(--contact-delay, 0ms);
    will-change: opacity, transform, filter;
}

    html.faq-contact-motion-ready .contact-page .contact-motion-target.contact-visible {
        --contact-x: 0px;
        --contact-y: 0px;
        --contact-scale: 1;
        opacity: 1;
        filter: none;
    }

html.faq-contact-motion-ready .contact-page .contact-from-left {
    --contact-x: -34px;
}

html.faq-contact-motion-ready .contact-page .contact-from-right {
    --contact-x: 34px;
}

html.faq-contact-motion-ready .contact-page .contact-soft-scale {
    --contact-y: 16px;
    --contact-scale: 0.985;
}

/* Premium card surfaces */
.contact-page .contact-rectangle-70,
.contact-page .contact-rectangle-71,
.contact-page .contact-rectangle-73,
.contact-page .contact-rectangle-91,
.contact-page .contact-rectangle-93,
.contact-page .contact-rectangle-94 {
    transition: transform 300ms var(--contact-motion-ease), box-shadow 300ms ease, filter 300ms ease;
}

    .contact-page .contact-rectangle-70.contact-visible,
    .contact-page .contact-rectangle-71.contact-visible,
    .contact-page .contact-rectangle-73.contact-visible,
    .contact-page .contact-rectangle-91.contact-visible,
    .contact-page .contact-rectangle-93.contact-visible,
    .contact-page .contact-rectangle-94.contact-visible {
        box-shadow: 0 22px 58px rgba(18, 18, 18, 0.08);
    }

    .contact-page .contact-rectangle-70:hover,
    .contact-page .contact-rectangle-71:hover,
    .contact-page .contact-rectangle-73:hover,
    .contact-page .contact-rectangle-91:hover,
    .contact-page .contact-rectangle-93:hover,
    .contact-page .contact-rectangle-94:hover {
        transform: translate3d(0, -3px, 0);
        box-shadow: 0 28px 70px rgba(18, 18, 18, 0.12);
    }

.contact-page .contact-rectangle-70 {
    overflow: hidden;
}

    .contact-page .contact-rectangle-70::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(105deg, transparent 22%, rgba(255,255,255,0.30) 48%, transparent 74%);
        transform: translateX(-135%);
        opacity: 0;
    }

html.faq-contact-motion-ready .contact-page .contact-rectangle-70.contact-visible::after {
    animation: contactRedPanelSweep 1150ms var(--contact-motion-ease) 340ms both;
}

@keyframes contactRedPanelSweep {
    0% {
        opacity: 0;
        transform: translateX(-135%);
    }

    18% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(135%);
    }
}

/* Section heading underline reveal */
.contact-page .contact-send-us-your-enquiry,
.contact-page .contact-want-to-book-a-call,
.contact-page .contact-our-location {
    position: absolute;
}

    .contact-page .contact-send-us-your-enquiry::after,
    .contact-page .contact-want-to-book-a-call::after,
    .contact-page .contact-our-location::after {
/*        content: "";
*/        position: absolute;
        left: 0;
        bottom: -16px;
        width: 72px;
        height: 3px;
        border-radius: 999px;
        background: var(--contact-motion-red);
        transform-origin: left center;
        transform: scaleX(0);
        opacity: 0;
        transition: transform 680ms var(--contact-motion-ease) 180ms, opacity 280ms ease 180ms;
    }

    .contact-page .contact-send-us-your-enquiry.contact-visible::after,
    .contact-page .contact-want-to-book-a-call.contact-visible::after,
    .contact-page .contact-our-location.contact-visible::after {
        transform: scaleX(1);
        opacity: 0.9;
    }

/* Real form controls */
.contact-page .real-control,
.contact-page .real-submit {
    transition: transform 240ms var(--contact-motion-ease), box-shadow 260ms ease, background-color 260ms ease, filter 240ms ease;
}

    .contact-page .real-control:hover {
        transform: translate3d(0, -2px, 0);
        box-shadow: 0 14px 30px rgba(20, 20, 20, 0.05);
    }

    .contact-page .real-control:focus {
        transform: translate3d(0, -3px, 0);
        background-color: #fff;
        box-shadow: inset 0 0 0 2px rgba(255, 64, 64, 0.50), 0 16px 34px rgba(20, 20, 20, 0.08);
    }

    .contact-page .real-submit:hover {
        transform: translate3d(0, -3px, 0);
        filter: brightness(1.035);
        box-shadow: 0 16px 34px rgba(255, 64, 64, 0.24);
    }

/* Map interaction */
.contact-page .contact-map-frame {
    transition: transform 360ms var(--contact-motion-ease), box-shadow 360ms ease, filter 360ms ease;
}

    .contact-page .contact-map-frame.contact-visible {
        box-shadow: 0 22px 58px rgba(18, 18, 18, 0.08);
    }

    .contact-page .contact-map-frame:hover {
        transform: translate3d(0, -4px, 0);
        box-shadow: 0 30px 80px rgba(18, 18, 18, 0.14);
        filter: saturate(1.04) contrast(1.02);
    }

/* Contact page side image polish */
.contact-page .contact-freepik-br-07e9d428-c990-4603-adf4-7d205b53241b,
.contact-page .contact-rectangle-94 {
    transform-origin: center bottom;
}

    .contact-page .contact-freepik-br-07e9d428-c990-4603-adf4-7d205b53241b:hover,
    .contact-page .contact-rectangle-94:hover {
        filter: saturate(1.025) contrast(1.015);
    }

@media (hover: none) {
    .contact-page .contact-home:hover,
    .contact-page .contact-our-services:hover,
    .contact-page .contact-meet-the-team:hover,
    .contact-page .contact-meet-the-facilitator:hover,
    .contact-page .contact-faq:hover,
    .contact-page .contact-contact-us:hover,
    .contact-page .contact-send-enquiry:hover,
    .contact-page .contact-book-a-call:hover,
    .contact-page .contact-rectangle-70:hover,
    .contact-page .contact-rectangle-71:hover,
    .contact-page .contact-rectangle-73:hover,
    .contact-page .contact-rectangle-91:hover,
    .contact-page .contact-rectangle-93:hover,
    .contact-page .contact-rectangle-94:hover,
    .contact-page .real-control:hover,
    .contact-page .real-submit:hover,
    .contact-page .contact-map-frame:hover {
        transform: none;
        box-shadow: none;
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-page .contact-headway-5qgiuubxkwm-unsplash-1,
    .contact-page .contact-rectangle-1-2,
    .contact-page .contact-whatsapp-image-2026-01-12-at-7,
    .contact-page .contact-rectangle-2,
    .contact-page .contact-rectangle-3,
    .contact-page .contact-contact-us,
    .contact-page .contact-home,
    .contact-page .contact-our-services,
    .contact-page .contact-meet-the-team,
    .contact-page .contact-meet-the-facilitator,
    .contact-page .contact-faq,
    .contact-page .contact-contact-us-2,
    .contact-page .contact-whether-you-want-to-discuss-a-property,
    .contact-page .contact-rectangle-5,
    .contact-page .contact-send-enquiry,
    .contact-page .contact-rectangle-6,
    .contact-page .contact-book-a-call,
    .contact-page .contact-motion-target,
    .contact-page .contact-rectangle-70::after,
    .contact-page .real-control,
    .contact-page .real-submit,
    .contact-page .contact-map-frame {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        box-shadow: none !important;
    }

    .contact-page .contact-send-us-your-enquiry::after,
    .contact-page .contact-want-to-book-a-call::after,
    .contact-page .contact-our-location::after {
        transform: scaleX(1) !important;
        opacity: 1 !important;
    }
}

/* ================================================================
   CONTACT PAGE — DOUBLE TEXT FIX BUT KEEP BUTTON MOTION
   Keeps premium hover animation. Only removes duplicate static text.
   ================================================================ */

/* Hide only the duplicate exported text layers */
.contact-page .contact-submit-enquiry,
.contact-page .contact-request-a-call {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Keep exported button backgrounds available for visual/motion layer */
.contact-page .contact-rectangle-81,
.contact-page .contact-rectangle-92 {
    display: block !important;
    opacity: 1 !important;
    pointer-events: none !important;
    z-index: 40 !important;
}

/* Keep real form buttons above, with same premium motion feel */
.contact-page .contact-real-submit,
.contact-page .contact-real-submit-2 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    z-index: 9000 !important;
    overflow: hidden !important;
    background: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), filter 260ms ease, box-shadow 260ms ease !important;
}

    /* Premium hover motion like hero buttons */
    .contact-page .contact-real-submit:hover,
    .contact-page .contact-real-submit-2:hover {
        transform: translate3d(0, -3px, 0) !important;
        filter: brightness(1.04) !important;
        box-shadow: 0 16px 34px rgba(255, 64, 64, 0.26) !important;
    }

    /* Button light sweep */
    .contact-page .contact-real-submit::after,
    .contact-page .contact-real-submit-2::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient( 105deg, transparent 20%, rgba(255, 255, 255, 0.34) 48%, transparent 74% );
        transform: translateX(-135%);
        transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-page .contact-real-submit:hover::after,
    .contact-page .contact-real-submit-2:hover::after {
        transform: translateX(135%);
    }
/* ================================================================
   CONTACT PAGE — REMOVE IMAGE BEHIND MAP
   Keeps real Google map visible and removes exported background image.
   ================================================================ */

.contact-page .contact-rectangle-94 {
    display: none !important;
}

.contact-page .contact-map-frame {
    z-index: 9000 !important;
    background: #ffffff !important;
}
/* ================================================================
   CONTACT PAGE — EXACT SAME HOVER AS HERO BUTTONS
   Submit Enquiry + Request a Call
   ================================================================ */

/* Hide duplicate exported text/background for form buttons only */
.contact-page .contact-rectangle-81,
.contact-page .contact-submit-enquiry,
.contact-page .contact-rectangle-92,
.contact-page .contact-request-a-call {
    display: none !important;
}

/* Real buttons: same base look as hero Send Enquiry button */
.contact-page .contact-real-submit,
.contact-page .contact-real-submit-2 {
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 159px !important;
    height: 48px !important;
    padding: 0 !important;
    background: var(--color-primary) !important;
    border: 1px solid #ff4040 !important;
    color: #ffffff !important;
    font-family: var(--font-primary) !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 21px !important;
    text-align: center !important;
    cursor: pointer !important;
    appearance: none !important;
    overflow: visible !important;
    z-index: 9000 !important;
    transform: translate3d(0, 0, 0) !important;
    filter: none !important;
    box-shadow: none !important;
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), color 240ms ease, filter 240ms ease, box-shadow 240ms ease !important;
}

/* Correct positions */
.contact-page .contact-real-submit {
    left: 1197px !important;
    top: 1742px !important;
}

.contact-page .contact-real-submit-2 {
    left: 1190px !important;
    top: 2252px !important;
}

    /* EXACT same hover motion as hero Send Enquiry / Book a Call */
    .contact-page .contact-real-submit:hover,
    .contact-page .contact-real-submit-2:hover {
        transform: translate3d(0, -3px, 0) !important;
        filter: brightness(1.04) !important;
        box-shadow: 0 16px 34px rgba(255, 64, 64, 0.24) !important;
    }

    /* Same click feel */
    .contact-page .contact-real-submit:active,
    .contact-page .contact-real-submit-2:active {
        transform: translate3d(0, -1px, 0) !important;
        filter: brightness(0.98) !important;
        box-shadow: 0 10px 22px rgba(255, 64, 64, 0.18) !important;
    }

    /* Remove old shine effects from previous snippets */
    .contact-page .contact-real-submit::before,
    .contact-page .contact-real-submit::after,
    .contact-page .contact-real-submit-2::before,
    .contact-page .contact-real-submit-2::after {
        content: none !important;
        display: none !important;
    }
/* ================================================================
   SOR CONTACT PAGE — DROPDOWN DESIGN FIX
   Paste this at the very bottom of wwwroot/assets/css/contact.css

   Fixes both real select fields:
   - Service Interested In
   - Preferred Contact Method

   Purpose:
   - remove red focus/border from opened dropdown field
   - make closed/open select field match the clean white design
   - replace browser/default arrow with same small grey chevron
   - keep exact Figma field size and position
   ================================================================ */

.contact-page {
    --sor-select-arrow: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L8 8L15 1' stroke='%23646464' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

    /* Hide old exported Figma arrow lines so only one clean arrow appears. */
    .contact-page .contact-vector-20,
    .contact-page .contact-vector-21 {
        display: none !important;
    }

    /* Base select style for both dropdowns. */
    .contact-page select.real-control.real-select.contact-service,
    .contact-page select.real-control.real-select.contact-preferredcontact {
        position: absolute !important;
        box-sizing: border-box !important;
        height: 78px !important;
        padding: 0 62px 0 24px !important;
        margin: 0 !important;
        background-color: #ffffff !important;
        background-image: var(--sor-select-arrow) !important;
        background-repeat: no-repeat !important;
        background-position: right 24px center !important;
        background-size: 16px 9px !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        color: rgba(100, 100, 100, 0.68) !important;
        opacity: 1 !important;
        font-family: var(--font-primary) !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 28px !important;
        text-align: left !important;
        cursor: pointer !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        transform: none !important;
        transition: background-color 180ms ease, color 180ms ease !important;
    }

    /* Exact positions/sizes from your existing layout. */
    .contact-page select.real-control.real-select.contact-service {
        left: 727px !important;
        top: 1476px !important;
        width: 629px !important;
    }

    .contact-page select.real-control.real-select.contact-preferredcontact {
        left: 84px !important;
        top: 1567px !important;
        width: 415px !important;
    }

        /* Stop the red focus border from the general .real-control:focus rule. */
        .contact-page select.real-control.real-select.contact-service:hover,
        .contact-page select.real-control.real-select.contact-service:focus,
        .contact-page select.real-control.real-select.contact-service:focus-visible,
        .contact-page select.real-control.real-select.contact-service:active,
        .contact-page select.real-control.real-select.contact-preferredcontact:hover,
        .contact-page select.real-control.real-select.contact-preferredcontact:focus,
        .contact-page select.real-control.real-select.contact-preferredcontact:focus-visible,
        .contact-page select.real-control.real-select.contact-preferredcontact:active {
            background-color: #ffffff !important;
            border: 0 !important;
            outline: 0 !important;
            box-shadow: none !important;
            transform: none !important;
            filter: none !important;
        }

    /* Keep option list clean when browser allows option styling. */
    .contact-page select.real-select option {
        background: #ffffff;
        color: #646464;
        font-family: var(--font-primary);
        font-size: 20px;
        font-weight: 400;
    }

        .contact-page select.real-select option:checked {
            background: #777777;
            color: #ffffff;
        }

    /* Remove IE/old Edge native arrow. */
    .contact-page select.real-select::-ms-expand {
        display: none;
    }
/* ================================================================
   CONTACT PAGE — FINAL CONSISTENT DROPDOWN FIX
   Paste at the very bottom of wwwroot/assets/css/contact.css

   Applies to:
   - Service Interested In
   - Preferred Contact Method

   Purpose:
   - remove red/active focus border
   - keep top/bottom borders consistent
   - make dropdown text use the same placeholder grey
   - make arrow same size, colour, and position
   - hide old exported Figma arrow shapes
   ================================================================ */

.contact-page {
    --contact-select-text: #8e8e8e;
    --contact-select-border: #f2f2f2;
    --contact-select-arrow: #777777;
    --contact-select-option-hover: #777777;
}

    /* Hide old exported Figma arrow lines. The real select now has its own clean arrow. */
    .contact-page .contact-vector-20,
    .contact-page .contact-vector-21 {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Base dropdown look — same for both select boxes. */
    .contact-page select.real-control.real-select.contact-service,
    .contact-page select.real-control.real-select.contact-preferredcontact {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        background-color: #ffffff !important;
        background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 6.75L9 11.25L13.5 6.75' fill='none' stroke='%23777777' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: calc(100% - 26px) 50% !important;
        background-size: 18px 18px !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: inset 0 0 0 1px var(--contact-select-border) !important;
        color: var(--contact-select-text) !important;
        opacity: 1 !important;
        font-family: var(--font-primary) !important;
        font-weight: 400 !important;
        font-size: 20px !important;
        line-height: 28px !important;
        padding: 0 64px 0 24px !important;
        cursor: pointer !important;
        color-scheme: light !important;
        transform: none !important;
        transition: box-shadow 220ms ease, background-color 220ms ease, filter 220ms ease !important;
    }

        /* Keep selected/placeholder text grey, not black/red. */
        .contact-page select.real-control.real-select.contact-service option,
        .contact-page select.real-control.real-select.contact-preferredcontact option {
            color: var(--contact-select-text) !important;
            background-color: #ffffff !important;
            font-family: var(--font-primary) !important;
            font-size: 20px !important;
            font-weight: 400 !important;
        }

            /* First option / placeholder row keeps same text colour. */
            .contact-page select.real-control.real-select.contact-service option[value=""],
            .contact-page select.real-control.real-select.contact-preferredcontact option[value=""] {
                color: var(--contact-select-text) !important;
                background-color: #ffffff !important;
            }

            /* Browser dropdown selected row: make it neutral grey instead of red/blue where supported. */
            .contact-page select.real-control.real-select.contact-service option:checked,
            .contact-page select.real-control.real-select.contact-preferredcontact option:checked {
                color: #ffffff !important;
                background: linear-gradient(var(--contact-select-option-hover), var(--contact-select-option-hover)) !important;
                background-color: var(--contact-select-option-hover) !important;
            }

        /* Hover/focus/active state: no red border, no jumping, consistent top and bottom border. */
        .contact-page select.real-control.real-select.contact-service:hover,
        .contact-page select.real-control.real-select.contact-preferredcontact:hover,
        .contact-page select.real-control.real-select.contact-service:focus,
        .contact-page select.real-control.real-select.contact-preferredcontact:focus,
        .contact-page select.real-control.real-select.contact-service:focus-visible,
        .contact-page select.real-control.real-select.contact-preferredcontact:focus-visible,
        .contact-page select.real-control.real-select.contact-service:active,
        .contact-page select.real-control.real-select.contact-preferredcontact:active {
            background-color: #ffffff !important;
            color: var(--contact-select-text) !important;
            border: 0 !important;
            outline: 0 !important;
            box-shadow: inset 0 0 0 1px var(--contact-select-border) !important;
            transform: none !important;
            filter: none !important;
        }

        /* Firefox removes its internal dotted focus line. */
        .contact-page select.real-control.real-select.contact-service:-moz-focusring,
        .contact-page select.real-control.real-select.contact-preferredcontact:-moz-focusring {
            color: transparent !important;
            text-shadow: 0 0 0 var(--contact-select-text) !important;
        }

        /* Old IE/Edge dropdown arrow fallback removal. */
        .contact-page select.real-control.real-select.contact-service::-ms-expand,
        .contact-page select.real-control.real-select.contact-preferredcontact::-ms-expand {
            display: none !important;
        }
    /* ================================================================
   SOR CONTACT PAGE — FINAL SELECT DROPDOWN ICON + HOVER/FOCUS BORDER
   Paste at the very bottom of wwwroot/assets/css/contact.css

   Applies to both:
   - Service Interested In
   - Preferred Contact Method
   ================================================================ */

    /* Hide exported Figma arrow lines so only the clean select arrow appears */
    .contact-page .contact-vector-20,
    .contact-page .contact-vector-21 {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Base select style — clean like the reference image */
    .contact-page select.real-control.real-select.contact-service,
    .contact-page select.real-control.real-select.contact-preferredcontact {
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        background-color: #ffffff !important;
        color: #8f8f8f !important;
        font-family: var(--font-primary) !important;
        font-weight: 400 !important;
        font-size: 20px !important;
        line-height: 28px !important;
        /* Normal state: no heavy border */
        border: 1px solid transparent !important;
        outline: 0 !important;
        box-shadow: none !important;
        padding: 0 64px 0 22px !important;
        border-radius: 0 !important;
        cursor: pointer !important;
        /* Exact grey chevron arrow like the reference */
        background-image: url("data:image/svg+xml,%3Csvg width='18' height='10' viewBox='0 0 18 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L9 9L17 1' stroke='%238c8c8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-size: 16px 9px !important;
        background-position: right 22px center !important;
        transform: none !important;
        filter: none !important;
        transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease !important;
    }

        /* Same border on top, left, right and bottom — only on hover/focus/select */
        .contact-page select.real-control.real-select.contact-service:hover,
        .contact-page select.real-control.real-select.contact-service:focus,
        .contact-page select.real-control.real-select.contact-service:focus-visible,
        .contact-page select.real-control.real-select.contact-preferredcontact:hover,
        .contact-page select.real-control.real-select.contact-preferredcontact:focus,
        .contact-page select.real-control.real-select.contact-preferredcontact:focus-visible {
            border: 1px solid #eeeeee !important;
            outline: 0 !important;
            box-shadow: none !important;
            background-color: #ffffff !important;
            color: #8f8f8f !important;
            transform: none !important;
        }

        /* Remove browser red/blue validation or focus styling from these selects */
        .contact-page select.real-control.real-select.contact-service:active,
        .contact-page select.real-control.real-select.contact-preferredcontact:active {
            border: 1px solid #eeeeee !important;
            outline: 0 !important;
            box-shadow: none !important;
            color: #8f8f8f !important;
            transform: none !important;
        }

        /* Keep option text consistent where browser allows it */
        .contact-page select.real-control.real-select.contact-service option,
        .contact-page select.real-control.real-select.contact-preferredcontact option {
            background-color: #ffffff !important;
            color: #8f8f8f !important;
            font-family: var(--font-primary) !important;
            font-size: 20px !important;
        }
    /* ================================================================
   CONTACT PAGE — CSS ONLY SELECT BORDER + CHEVRON FINAL
   Paste at the VERY BOTTOM of wwwroot/assets/css/contact.css

   Requirement:
   - No JavaScript.
   - Apply to both real dropdowns.
   - Normal state: no visible border.
   - Focus/open OR selected real option: show top/left/right border only.
   - No bottom border.
   - Grey text and grey chevron like reference image.
   ================================================================ */

    /* Hide old exported Figma arrow lines. The select now has its own chevron. */
    .contact-page .contact-vector-20,
    .contact-page .contact-vector-21 {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Base select style for both dropdowns */
    .contact-page select.real-control.real-select.contact-service,
    .contact-page select.real-control.real-select.contact-preferredcontact {
        -webkit-appearance: none !important;
        appearance: none !important;
        box-sizing: border-box !important;
        background-color: #ffffff !important;
        color: #909090 !important;
        opacity: 1 !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        font-family: var(--font-primary) !important;
        font-weight: 400 !important;
        font-size: 20px !important;
        line-height: 28px !important;
        padding-left: 24px !important;
        padding-right: 62px !important;
        cursor: pointer !important;
        background-image: url("data:image/svg+xml,%3Csvg width='18' height='10' viewBox='0 0 18 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L9 8L16 2' stroke='%238D8D8D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 28px center !important;
        background-size: 18px 10px !important;
        transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease !important;
    }

        /* Remove red/blue browser focus styling and previous animation focus shadows */
        .contact-page select.real-control.real-select.contact-service:focus,
        .contact-page select.real-control.real-select.contact-service:focus-visible,
        .contact-page select.real-control.real-select.contact-service:active,
        .contact-page select.real-control.real-select.contact-preferredcontact:focus,
        .contact-page select.real-control.real-select.contact-preferredcontact:focus-visible,
        .contact-page select.real-control.real-select.contact-preferredcontact:active {
            outline: 0 !important;
            box-shadow: none !important;
            background-color: #ffffff !important;
            color: #909090 !important;
            transform: none !important;
        }

        /* Show border ONLY when user opens/focuses the select.
   No bottom border. */
        .contact-page select.real-control.real-select.contact-service:focus,
        .contact-page select.real-control.real-select.contact-service:focus-visible,
        .contact-page select.real-control.real-select.contact-service:active,
        .contact-page select.real-control.real-select.contact-preferredcontact:focus,
        .contact-page select.real-control.real-select.contact-preferredcontact:focus-visible,
        .contact-page select.real-control.real-select.contact-preferredcontact:active {
            border-top: 1px solid #d8d8d8 !important;
            border-left: 1px solid #d8d8d8 !important;
            border-right: 1px solid #d8d8d8 !important;
            border-bottom: 0 !important;
        }

        /* CSS-only selected state.
   After the user selects a real option, keep the same top/left/right border.
   Works in modern Chrome/Edge. No JavaScript needed. */
        .contact-page select.real-control.real-select.contact-service:has(option:not([value=""]):checked),
        .contact-page select.real-control.real-select.contact-preferredcontact:has(option:not([value=""]):checked) {
            border-top: 1px solid #d8d8d8 !important;
            border-left: 1px solid #d8d8d8 !important;
            border-right: 1px solid #d8d8d8 !important;
            border-bottom: 0 !important;
            box-shadow: none !important;
            color: #909090 !important;
        }

        /* Option list text colour */
        .contact-page select.real-control.real-select.contact-service option,
        .contact-page select.real-control.real-select.contact-preferredcontact option {
            color: #909090 !important;
            background: #ffffff !important;
            font-size: 20px !important;
        }
    /* ================================================================
   CONTACT PAGE — PROPER UX DROPDOWN FINAL
   Paste at the VERY BOTTOM of wwwroot/assets/css/contact.css

   Applies to both real selects:
   - Service Interested In
   - Preferred Contact Method

   UX rules:
   - Clean borderless field normally, matching the design.
   - Light grey border only on hover/focus/open.
   - No red browser/focus border.
   - Proper grey chevron, aligned like the reference.
   - Placeholder text stays soft grey; selected value becomes slightly darker.
   - Native option list is improved as much as CSS allows.
   ================================================================ */

    /* Remove the old exported Figma arrow lines so only the real select chevron shows. */
    .contact-page .contact-vector-20,
    .contact-page .contact-vector-21 {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Keep the real dropdowns above exported Figma text/shape layers. */
    .contact-page select.real-control.real-select.contact-service,
    .contact-page select.real-control.real-select.contact-preferredcontact {
        position: absolute !important;
        z-index: 9500 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        box-sizing: border-box !important;
        height: 78px !important;
        background-color: #ffffff !important;
        /* Invisible border in normal state prevents jumping when hover/focus border appears. */
        border: 1px solid transparent !important;
        border-radius: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        color: #8f8f8f !important;
        opacity: 1 !important;
        font-family: var(--font-primary, Arial, sans-serif) !important;
        font-weight: 400 !important;
        font-size: 20px !important;
        line-height: 28px !important;
        padding: 0 66px 0 24px !important;
        cursor: pointer !important;
        background-image: url("data:image/svg+xml,%3Csvg width='18' height='10' viewBox='0 0 18 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L9 8L16 2' stroke='%238f8f8f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 28px center !important;
        background-size: 18px 10px !important;
        transition: border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, background-color 180ms ease !important;
        transform: none !important;
        filter: none !important;
    }

    /* Exact fixed positions from your design. */
    .contact-page select.real-control.real-select.contact-service {
        left: 727px !important;
        top: 1476px !important;
        width: 629px !important;
    }

    .contact-page select.real-control.real-select.contact-preferredcontact {
        left: 85px !important;
        top: 1567px !important;
        width: 415px !important;
    }

        /* Placeholder state stays soft grey. */
        .contact-page select.real-control.real-select.contact-service:has(option[value=""]:checked),
        .contact-page select.real-control.real-select.contact-preferredcontact:has(option[value=""]:checked) {
            color: #9a9a9a !important;
        }

        /* Selected value becomes clearer, but still calm and professional. */
        .contact-page select.real-control.real-select.contact-service:has(option:not([value=""]):checked),
        .contact-page select.real-control.real-select.contact-preferredcontact:has(option:not([value=""]):checked) {
            color: #6f6f6f !important;
        }

        /* Good UX: show a clean border on hover so users know this is interactive. */
        .contact-page select.real-control.real-select.contact-service:hover,
        .contact-page select.real-control.real-select.contact-preferredcontact:hover {
            border-color: #dddddd !important;
            background-color: #ffffff !important;
            color: #777777 !important;
            box-shadow: none !important;
        }

        /* Good UX: focus/open state has a slightly stronger neutral border, not red. */
        .contact-page select.real-control.real-select.contact-service:focus,
        .contact-page select.real-control.real-select.contact-service:focus-visible,
        .contact-page select.real-control.real-select.contact-service:active,
        .contact-page select.real-control.real-select.contact-preferredcontact:focus,
        .contact-page select.real-control.real-select.contact-preferredcontact:focus-visible,
        .contact-page select.real-control.real-select.contact-preferredcontact:active {
            border-color: #cfcfcf !important;
            outline: none !important;
            box-shadow: 0 0 0 3px rgba(120, 120, 120, 0.06) !important;
            background-color: #ffffff !important;
            color: #6f6f6f !important;
            transform: none !important;
            filter: none !important;
        }

        /* Ensure no previous red validation/focus styles appear. */
        .contact-page select.real-control.real-select.contact-service:invalid,
        .contact-page select.real-control.real-select.contact-service:required,
        .contact-page select.real-control.real-select.contact-preferredcontact:invalid,
        .contact-page select.real-control.real-select.contact-preferredcontact:required {
            box-shadow: none !important;
        }

        /* Native dropdown options — browser controls the open panel, but this improves the text colour. */
        .contact-page select.real-control.real-select.contact-service option,
        .contact-page select.real-control.real-select.contact-preferredcontact option {
            background: #ffffff !important;
            color: #777777 !important;
            font-family: var(--font-primary, Arial, sans-serif) !important;
            font-size: 20px !important;
            font-weight: 400 !important;
        }

            .contact-page select.real-control.real-select.contact-service option:checked,
            .contact-page select.real-control.real-select.contact-preferredcontact option:checked {
                background: #eeeeee !important;
                color: #ffffff !important;
            }

        /* Remove old animation hover transform from select fields only. */
        .contact-page select.real-control.real-select.contact-service:hover,
        .contact-page select.real-control.real-select.contact-service:focus,
        .contact-page select.real-control.real-select.contact-preferredcontact:hover,
        .contact-page select.real-control.real-select.contact-preferredcontact:focus {
            transform: none !important;
        }
/* ================================================================
   CONTACT PAGE — CUSTOM DROPDOWN NO-BORDER FINAL
   Paste at the VERY BOTTOM of wwwroot/assets/css/contact.css

   Why this is needed:
   Native <select> option panels are drawn by the browser, so the open
   menu border cannot be fully removed with CSS. This CSS works with the
   small JS file to show a custom dropdown while keeping the real select
   in the form for normal submission.
   ================================================================ */

.contact-page {
    --sor-dropdown-text: #8f8f8f;
    --sor-dropdown-text-selected: #6f6f6f;
    --sor-dropdown-selected-bg: #777777;
    --sor-dropdown-hover-bg: #f4f4f4;
}

    /* Hide old exported Figma arrow lines. */
    .contact-page .contact-vector-20,
    .contact-page .contact-vector-21 {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Keep the original real selects in the form, but do not let users open
   the browser's native menu. The custom menu updates these values. */
    .contact-page select.real-control.real-select.contact-service.sor-native-select-hidden,
    .contact-page select.real-control.real-select.contact-preferredcontact.sor-native-select-hidden {
        opacity: 0 !important;
        pointer-events: none !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        z-index: 1 !important;
    }

    /* Custom select wrappers — exact Figma positions. */
    .contact-page .sor-custom-select {
        position: absolute !important;
        z-index: 12000 !important;
        height: 78px !important;
        font-family: var(--font-primary, Arial, sans-serif) !important;
    }

    .contact-page .sor-custom-select--service {
        left: 727px !important;
        top: 1476px !important;
        width: 629px !important;
    }

    .contact-page .sor-custom-select--preferredcontact {
        left: 85px !important;
        top: 1567px !important;
        width: 415px !important;
    }

    /* Closed field — no border, no focus border, no shadow. */
    .contact-page .sor-custom-select__button {
        width: 100% !important;
        height: 78px !important;
        margin: 0 !important;
        padding: 0 64px 0 24px !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        color: var(--sor-dropdown-text) !important;
        font-family: var(--font-primary, Arial, sans-serif) !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 28px !important;
        text-align: left !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        transform: none !important;
        filter: none !important;
        transition: color 180ms ease, background-color 180ms ease !important;
    }

        .contact-page .sor-custom-select__button:hover,
        .contact-page .sor-custom-select__button:focus,
        .contact-page .sor-custom-select__button:focus-visible,
        .contact-page .sor-custom-select.is-open .sor-custom-select__button {
            border: 0 !important;
            outline: 0 !important;
            box-shadow: none !important;
            background: #ffffff !important;
            color: var(--sor-dropdown-text-selected) !important;
            transform: none !important;
            filter: none !important;
        }

    .contact-page .sor-custom-select__value {
        display: block !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    /* Clean grey chevron like your reference. */
    .contact-page .sor-custom-select__chevron {
        position: absolute !important;
        right: 28px !important;
        top: 50% !important;
        width: 18px !important;
        height: 10px !important;
        transform: translateY(-50%) !important;
        pointer-events: none !important;
    }

        .contact-page .sor-custom-select__chevron::before {
            content: "" !important;
            display: block !important;
            width: 18px !important;
            height: 10px !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
            background-size: 18px 10px !important;
            background-image: url("data:image/svg+xml,%3Csvg width='18' height='10' viewBox='0 0 18 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L9 8L16 2' stroke='%238f8f8f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        }

    /* Open menu — no border on top, right, bottom, or left. */
    .contact-page .sor-custom-select__menu {
        position: absolute !important;
        left: 0 !important;
        top: 78px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 10px 0 !important;
        list-style: none !important;
        background: #ffffff !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        display: none !important;
    }

    .contact-page .sor-custom-select.is-open .sor-custom-select__menu {
        display: block !important;
    }

    .contact-page .sor-custom-select__option {
        min-height: 40px !important;
        padding: 5px 24px !important;
        margin: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
        color: var(--sor-dropdown-text-selected) !important;
        font-family: var(--font-primary, Arial, sans-serif) !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 30px !important;
        cursor: pointer !important;
        user-select: none !important;
    }

        .contact-page .sor-custom-select__option:hover,
        .contact-page .sor-custom-select__option.is-active {
            background: var(--sor-dropdown-hover-bg) !important;
            color: var(--sor-dropdown-text-selected) !important;
        }

        .contact-page .sor-custom-select__option.is-selected {
            background: var(--sor-dropdown-selected-bg) !important;
            color: #ffffff !important;
        }

        .contact-page .sor-custom-select__option.is-placeholder {
            color: var(--sor-dropdown-text-selected) !important;
        }
/* ================================================================
   SOR CONTACT PAGE — PROPER CUSTOM DROPDOWNS WITH BORDER
   Paste at the VERY BOTTOM of wwwroot/assets/css/contact.css

   Purpose:
   - Replace browser native dropdown menu with a clean custom dropdown.
   - Proper full border around the field and menu.
   - Same design for Service Interested In and Preferred Contact Method.
   - Keeps original <select> values for form submission.
   ================================================================ */

.contact-page {
    --sor-dd-border: #d8d8d8;
    --sor-dd-border-active: #c6c6c6;
    --sor-dd-text: #8d8d8d;
    --sor-dd-text-active: #696969;
    --sor-dd-highlight: #737373;
    --sor-dd-bg: #ffffff;
    --sor-dd-shadow: 0 18px 42px rgba(18, 18, 18, 0.08);
}

    /* Hide old exported Figma arrows and old exported dropdown panels. */
    .contact-page .contact-vector-20,
    .contact-page .contact-vector-21,
    .contact-page .contact-rectangle-81-2,
    .contact-page .contact-corporate-letting-landlord-and-investor-support-brrrr,
    .contact-page .contact-vector-22,
    .contact-page .contact-vector-23,
    .contact-page .contact-vector-24,
    .contact-page .contact-vector-25,
    .contact-page .contact-vector-26,
    .contact-page .contact-vector-27,
    .contact-page .contact-rectangle-81-3,
    .contact-page .contact-phone-call-email-whatsapp-video-call,
    .contact-page .contact-vector-22-2,
    .contact-page .contact-vector-23-2,
    .contact-page .contact-vector-24-2 {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Hide older custom dropdown attempts if they were pasted previously. */
    .contact-page .sor-custom-select,
    .contact-page .sor-contact-custom-select {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Keep the real selects in the form for submission, but do not show native browser UI. */
    .contact-page select.real-control.real-select.contact-service,
    .contact-page select.real-control.real-select.contact-preferredcontact {
        position: absolute !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        width: 1px !important;
        height: 1px !important;
        z-index: -1 !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* Main custom select field. */
    .contact-page .sor-contact-select {
        position: absolute !important;
        height: 78px !important;
        box-sizing: border-box !important;
        z-index: 12000 !important;
        background: var(--sor-dd-bg) !important;
        border: 1px solid var(--sor-dd-border) !important;
        border-radius: 0 !important;
        font-family: var(--font-primary, Arial, sans-serif) !important;
        color: var(--sor-dd-text) !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .contact-page .sor-contact-select--service {
        left: 727px !important;
        top: 1476px !important;
        width: 629px !important;
    }

    .contact-page .sor-contact-select--preferred {
        left: 84px !important;
        top: 1567px !important;
        width: 415px !important;
    }

    .contact-page .sor-contact-select.is-open,
    .contact-page .sor-contact-select:focus-within {
        border-color: var(--sor-dd-border-active) !important;
        box-shadow: 0 10px 26px rgba(20, 20, 20, 0.045) !important;
    }

    .contact-page .sor-contact-select__button {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 36px 0 30px !important;
        margin: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        color: var(--sor-dd-text) !important;
        font-family: var(--font-primary, Arial, sans-serif) !important;
        font-weight: 400 !important;
        font-size: 20px !important;
        line-height: 28px !important;
        text-align: left !important;
        cursor: pointer !important;
        box-shadow: none !important;
        transform: none !important;
        filter: none !important;
    }

        .contact-page .sor-contact-select__button:hover,
        .contact-page .sor-contact-select__button:focus,
        .contact-page .sor-contact-select__button:focus-visible {
            outline: 0 !important;
            box-shadow: none !important;
            transform: none !important;
            filter: none !important;
            color: var(--sor-dd-text-active) !important;
        }

    .contact-page .sor-contact-select__value {
        display: block !important;
        max-width: calc(100% - 42px) !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .contact-page .sor-contact-select__chevron {
        flex: 0 0 auto !important;
        width: 18px !important;
        height: 10px !important;
        margin-left: 18px !important;
        background-image: url("data:image/svg+xml,%3Csvg width='18' height='10' viewBox='0 0 18 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L9 8L16 2' stroke='%238d8d8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 18px 10px !important;
        transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    .contact-page .sor-contact-select.is-open .sor-contact-select__chevron {
        transform: rotate(180deg) !important;
    }

    /* Custom menu panel with proper border. */
    .contact-page .sor-contact-select__menu {
        position: absolute !important;
        left: -1px !important;
        right: -1px !important;
        top: calc(100% + 0px) !important;
        z-index: 12020 !important;
        box-sizing: border-box !important;
        background: var(--sor-dd-bg) !important;
        border: 1px solid var(--sor-dd-border-active) !important;
        border-top: 0 !important;
        box-shadow: var(--sor-dd-shadow) !important;
        overflow: hidden !important;
        max-height: 390px !important;
        overflow-y: auto !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(0, -4px, 0) !important;
        transition: opacity 160ms ease, visibility 0s linear 160ms, transform 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    .contact-page .sor-contact-select.is-open .sor-contact-select__menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) !important;
        transition-delay: 0s !important;
    }

    .contact-page .sor-contact-select__option {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 50px !important;
        padding: 0 24px !important;
        border: 0 !important;
        border-bottom: 1px solid #eeeeee !important;
        background: #ffffff !important;
        color: #707070 !important;
        font-family: var(--font-primary, Arial, sans-serif) !important;
        font-weight: 400 !important;
        font-size: 20px !important;
        line-height: 28px !important;
        text-align: left !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-shadow: none !important;
        transform: none !important;
        transition: background-color 150ms ease, color 150ms ease, padding-left 150ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

        .contact-page .sor-contact-select__option:last-child {
            border-bottom: 0 !important;
        }

        .contact-page .sor-contact-select__option:hover,
        .contact-page .sor-contact-select__option:focus {
            outline: 0 !important;
            background: #f3f3f3 !important;
            color: #4f4f4f !important;
            padding-left: 30px !important;
        }

        .contact-page .sor-contact-select__option.is-selected {
            background: var(--sor-dd-highlight) !important;
            color: #ffffff !important;
        }

        .contact-page .sor-contact-select__option.is-placeholder {
            color: #858585 !important;
        }

            .contact-page .sor-contact-select__option.is-placeholder.is-selected {
                background: var(--sor-dd-highlight) !important;
                color: #ffffff !important;
            }

    /* Keep menu scrollbar quiet on long dropdown. */
    .contact-page .sor-contact-select__menu::-webkit-scrollbar {
        width: 8px;
    }

    .contact-page .sor-contact-select__menu::-webkit-scrollbar-track {
        background: #f5f5f5;
    }

    .contact-page .sor-contact-select__menu::-webkit-scrollbar-thumb {
        background: #d0d0d0;
    }
    /* ================================================================
   CONTACT PAGE — CUSTOM DROPDOWN BORDER ONLY WHILE ACTIVE
   Paste at the VERY BOTTOM of wwwroot/assets/css/contact.css

   Use after the Proper Custom Dropdown Border Pack.
   Result:
   - No border when dropdown is closed and mouse leaves.
   - Border appears only on hover or while the dropdown menu is open.
   - Menu keeps its proper border while open.
   ================================================================ */

    /* Closed/normal state: no visible field border */
    .contact-page .sor-contact-select {
        border: 1px solid transparent !important;
        box-shadow: none !important;
    }

        /* Do not keep border just because the button still has focus after selecting */
        .contact-page .sor-contact-select:focus-within:not(.is-open):not(:hover) {
            border-color: transparent !important;
            box-shadow: none !important;
        }

        /* Show border only while user is hovering the dropdown */
        .contact-page .sor-contact-select:hover {
            border-color: #d8d8d8 !important;
            box-shadow: none !important;
        }

        /* Show a clear professional border while dropdown is open */
        .contact-page .sor-contact-select.is-open {
            border-color: #cfcfcf !important;
            box-shadow: none !important;
        }

    /* Keep the menu properly bordered only while it is open */
    .contact-page .sor-contact-select__menu {
        border: 1px solid #cfcfcf !important;
        border-top: 0 !important;
        box-shadow: 0 18px 42px rgba(18, 18, 18, 0.08) !important;
    }

    /* When closed, menu is invisible and no border is visible */
    .contact-page .sor-contact-select:not(.is-open) .sor-contact-select__menu {
        border-color: transparent !important;
        box-shadow: none !important;
    }

    /* Keep selected text clean after user chooses an option */
    .contact-page .sor-contact-select:not(.is-open):not(:hover) .sor-contact-select__button {
        color: #8d8d8d !important;
    }

    /* Keep the arrow calm in normal state */
    .contact-page .sor-contact-select:not(.is-open):not(:hover) .sor-contact-select__chevron {
        opacity: 0.9 !important;
    }

/* ================================================================
   CONTACT PAGE — FAQ STYLE TITLE HOVER ONLY
   CSS ONLY — no loader / form / dropdown / map changes
   Paste at the VERY BOTTOM of contact.css
   ================================================================ */

.contact-page {
    --contact-faq-hover-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

    /* Main title areas only */
    .contact-page .contact-contact-us-2,
    .contact-page .contact-let-s-discuss-your-property-goals,
    .contact-page .contact-send-us-your-enquiry,
    .contact-page .contact-want-to-book-a-call,
    .contact-page .contact-our-location {
        cursor: default !important;
        transition: color 220ms ease, transform 240ms var(--contact-faq-hover-ease), letter-spacing 240ms ease, text-shadow 240ms ease !important;
    }

        /* Exact FAQ-style motion */
        .contact-page .contact-contact-us-2:hover,
        .contact-page .contact-let-s-discuss-your-property-goals:hover,
        .contact-page .contact-send-us-your-enquiry:hover,
        .contact-page .contact-want-to-book-a-call:hover,
        .contact-page .contact-our-location:hover {
            transform: translate3d(5px, 0, 0) !important;
            letter-spacing: 0.01em !important;
        }

        /* Hero title stays white */
        .contact-page .contact-contact-us-2:hover {
            color: #ffffff !important;
            text-shadow: 0 10px 28px rgba(255, 255, 255, 0.10) !important;
        }

        /* Red panel title stays white */
        .contact-page .contact-let-s-discuss-your-property-goals:hover {
            color: #ffffff !important;
            text-shadow: 0 10px 28px rgba(255, 255, 255, 0.12) !important;
        }

        /* Section headings keep their original black/red style */
        .contact-page .contact-send-us-your-enquiry:hover,
        .contact-page .contact-want-to-book-a-call:hover,
        .contact-page .contact-our-location:hover {
            color: var(--color-black) !important;
        }

            .contact-page .contact-send-us-your-enquiry:hover span,
            .contact-page .contact-want-to-book-a-call:hover span,
            .contact-page .contact-our-location:hover span {
                color: var(--color-primary) !important;
            }

    /* Do not apply title hover motion to long paragraph/subtitle text */
    .contact-page .contact-whether-you-want-to-discuss-a-property,
    .contact-page .contact-every-property-has-a-different-opportunity-you,
    .contact-page .contact-complete-the-form-below-and-tell-us,
    .contact-page .contact-if-you-would-rather-discuss-your-property,
    .contact-page .contact-use-the-map-to-locate-us-or {
        transform: none !important;
        letter-spacing: normal !important;
    }

/* Keep touch devices stable */
@media (hover: none) {
    .contact-page .contact-contact-us-2:hover,
    .contact-page .contact-let-s-discuss-your-property-goals:hover,
    .contact-page .contact-send-us-your-enquiry:hover,
    .contact-page .contact-want-to-book-a-call:hover,
    .contact-page .contact-our-location:hover {
        transform: none !important;
        letter-spacing: normal !important;
        text-shadow: none !important;
    }
}
/* ================================================================
   CONTACT PAGE — RED PANEL + IMAGE MOVE ONLY
   Keep "Let's Discuss Your Property Goals" text motion untouched
   Paste at the VERY BOTTOM of contact.css
   ================================================================ */

/* Smooth motion only for red panel and image */
.contact-page .contact-rectangle-70,
.contact-page .contact-freepik-br-07e9d428-c990-4603-adf4-7d205b53241b {
    transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), filter 420ms ease, box-shadow 420ms ease !important;
    will-change: transform, filter, box-shadow !important;
}

/* Keep the right white content area completely static */
.contact-page .contact-rectangle-71,
.contact-page .contact-every-property-has-a-different-opportunity-you,
.contact-page .contact-rectangle-71:hover,
.contact-page .contact-every-property-has-a-different-opportunity-you:hover {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

/* Stop previous section-hover code from moving the title text */
.contact-page .contact-figma-page:has(.contact-rectangle-70:hover) .contact-let-s-discuss-your-property-goals,
.contact-page .contact-figma-page:has(.contact-freepik-br-07e9d428-c990-4603-adf4-7d205b53241b:hover) .contact-let-s-discuss-your-property-goals {
    transform: none !important;
    letter-spacing: normal !important;
}

/* Move ONLY red panel + image when hovering the red area, image, or title */
.contact-page .contact-figma-page:has(.contact-rectangle-70:hover) .contact-rectangle-70,
.contact-page .contact-figma-page:has(.contact-freepik-br-07e9d428-c990-4603-adf4-7d205b53241b:hover) .contact-rectangle-70,
.contact-page .contact-figma-page:has(.contact-let-s-discuss-your-property-goals:hover) .contact-rectangle-70,
.contact-page .contact-figma-page:has(.contact-rectangle-70:hover) .contact-freepik-br-07e9d428-c990-4603-adf4-7d205b53241b,
.contact-page .contact-figma-page:has(.contact-freepik-br-07e9d428-c990-4603-adf4-7d205b53241b:hover) .contact-freepik-br-07e9d428-c990-4603-adf4-7d205b53241b,
.contact-page .contact-figma-page:has(.contact-let-s-discuss-your-property-goals:hover) .contact-freepik-br-07e9d428-c990-4603-adf4-7d205b53241b {
    transform: translate3d(0, -8px, 0) !important;
}

/* Premium depth on the red panel */
.contact-page .contact-figma-page:has(.contact-rectangle-70:hover) .contact-rectangle-70,
.contact-page .contact-figma-page:has(.contact-freepik-br-07e9d428-c990-4603-adf4-7d205b53241b:hover) .contact-rectangle-70,
.contact-page .contact-figma-page:has(.contact-let-s-discuss-your-property-goals:hover) .contact-rectangle-70 {
    box-shadow: 0 26px 70px rgba(255, 64, 64, 0.18) !important;
    filter: brightness(1.015) !important;
}

/* Image enhancement, but only with the red panel */
.contact-page .contact-figma-page:has(.contact-rectangle-70:hover) .contact-freepik-br-07e9d428-c990-4603-adf4-7d205b53241b,
.contact-page .contact-figma-page:has(.contact-freepik-br-07e9d428-c990-4603-adf4-7d205b53241b:hover) .contact-freepik-br-07e9d428-c990-4603-adf4-7d205b53241b,
.contact-page .contact-figma-page:has(.contact-let-s-discuss-your-property-goals:hover) .contact-freepik-br-07e9d428-c990-4603-adf4-7d205b53241b {
    filter: saturate(1.035) contrast(1.018) !important;
}

/* Keep the title's own FAQ-style motion exactly separate */
.contact-page .contact-figma-page:has(.contact-let-s-discuss-your-property-goals:hover) .contact-let-s-discuss-your-property-goals:hover,
.contact-page .contact-let-s-discuss-your-property-goals:hover {
    transform: translate3d(5px, 0, 0) !important;
    letter-spacing: 0.01em !important;
    color: #ffffff !important;
}

/* Touch devices stable */
@media (hover: none) {
    .contact-page .contact-rectangle-70,
    .contact-page .contact-freepik-br-07e9d428-c990-4603-adf4-7d205b53241b,
    .contact-page .contact-let-s-discuss-your-property-goals {
        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
        letter-spacing: normal !important;
    }
}